fix: NavigationUIComponent not treat wrapAfter properly (#20006)

Author: rmch91

projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.spec.ts

@@ -167,11 +167,12 @@ describe('Navigation UI Component', () => {
     });
 
     it('should return 2 for 11', () => {
-      expect(navigationComponent.getColumnCount(11)).toEqual(2);
+      expect(navigationComponent.getColumnCount(11)).toEqual(3);
     });
 
     it('should return 2 for 12', () => {
-      expect(navigationComponent.getColumnCount(12)).toEqual(2);
+      console.log(navigationComponent.wrapAfter);
+      expect(navigationComponent.getColumnCount(12)).toEqual(3);
     });
 
     it('should return 3 for 13', () => {

projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.ts

@@ -337,7 +337,17 @@ export class NavigationUIComponent implements OnInit, OnDestroy {
   }
 
   getColumnCount(length: number): number {
-    return Math.round(length / (this.wrapAfter || length));
+    if (!this.wrapAfter || length <= 0) {
+      return 1;
+    }
+
+    let subSectionColumns = Math.floor(length / this.wrapAfter);
+
+    if (subSectionColumns >= 1 && length % this.wrapAfter > 0) {
+      subSectionColumns += 1;
+    }
+
+    return subSectionColumns;
   }
 
   focusAfterPreviousClicked(event: MouseEvent) {