[CL] add `hideIfEmpty` input to bit-nav-group (#12046)

libs/components/src/navigation/nav-group.component.html

@@ -1,54 +1,56 @@
 <!-- This a higher order component that composes `NavItemComponent`  -->
-<bit-nav-item
+<ng-container *ngIf="!hideIfEmpty || nestedNavComponents.length > 0">
-  [text]="text"
+  <bit-nav-item
-  [icon]="icon"
+    [text]="text"
-  [route]="route"
+    [icon]="icon"
-  [relativeTo]="relativeTo"
+    [route]="route"
-  [routerLinkActiveOptions]="routerLinkActiveOptions"
+    [relativeTo]="relativeTo"
-  [variant]="variant"
+    [routerLinkActiveOptions]="routerLinkActiveOptions"
-  [treeDepth]="treeDepth"
+    [variant]="variant"
-  (mainContentClicked)="handleMainContentClicked()"
+    [treeDepth]="treeDepth"
-  [ariaLabel]="ariaLabel"
+    (mainContentClicked)="handleMainContentClicked()"
-  [hideActiveStyles]="parentHideActiveStyles"
+    [ariaLabel]="ariaLabel"
->
+    [hideActiveStyles]="parentHideActiveStyles"
-  <ng-template #button>
+  >
-    <button
+    <ng-template #button>
-      type="button"
+      <button
-      class="tw-ml-auto"
+        type="button"
-      [bitIconButton]="
+        class="tw-ml-auto"
-        open ? 'bwi-angle-up' : variant === 'tree' ? 'bwi-angle-right' : 'bwi-angle-down'
+        [bitIconButton]="
-      "
+          open ? 'bwi-angle-up' : variant === 'tree' ? 'bwi-angle-right' : 'bwi-angle-down'
-      [buttonType]="'light'"
+        "
-      (click)="toggle($event)"
+        [buttonType]="'light'"
-      size="small"
+        (click)="toggle($event)"
-      [title]="'toggleCollapse' | i18n"
+        size="small"
-      aria-haspopup="true"
+        [title]="'toggleCollapse' | i18n"
-      [attr.aria-expanded]="open.toString()"
+        aria-haspopup="true"
-      [attr.aria-controls]="contentId"
+        [attr.aria-expanded]="open.toString()"
-      [attr.aria-label]="['toggleCollapse' | i18n, text].join(' ')"
+        [attr.aria-controls]="contentId"
-    ></button>
+        [attr.aria-label]="['toggleCollapse' | i18n, text].join(' ')"
-  </ng-template>
+      ></button>
+    </ng-template>
 
-  <!-- Show toggle to the left for trees otherwise to the right -->
+    <!-- Show toggle to the left for trees otherwise to the right -->
-  <ng-container slot="start" *ngIf="variant === 'tree'">
+    <ng-container slot="start" *ngIf="variant === 'tree'">
-    <ng-container *ngTemplateOutlet="button"></ng-container>
-  </ng-container>
-  <ng-container slot="end">
-    <ng-content select="[slot=end]"></ng-content>
-    <ng-container *ngIf="variant !== 'tree'">
       <ng-container *ngTemplateOutlet="button"></ng-container>
     </ng-container>
-  </ng-container>
+    <ng-container slot="end">
-</bit-nav-item>
+      <ng-content select="[slot=end]"></ng-content>
+      <ng-container *ngIf="variant !== 'tree'">
+        <ng-container *ngTemplateOutlet="button"></ng-container>
+      </ng-container>
+    </ng-container>
+  </bit-nav-item>
 
-<!-- [attr.aria-controls] of the above button expects a unique ID on the controlled element -->
+  <!-- [attr.aria-controls] of the above button expects a unique ID on the controlled element -->
-<ng-container *ngIf="sideNavService.open$ | async">
+  <ng-container *ngIf="sideNavService.open$ | async">
-  <div
+    <div
-    *ngIf="open"
+      *ngIf="open"
-    [attr.id]="contentId"
+      [attr.id]="contentId"
-    [attr.aria-label]="[text, 'submenu' | i18n].join(' ')"
+      [attr.aria-label]="[text, 'submenu' | i18n].join(' ')"
-    role="group"
+      role="group"
-  >
+    >
-    <ng-content></ng-content>
+      <ng-content></ng-content>
-  </div>
+    </div>
+  </ng-container>
 </ng-container>

libs/components/src/navigation/nav-group.component.ts

@@ -1,5 +1,6 @@
 import {
   AfterContentInit,
+  booleanAttribute,
   Component,
   ContentChildren,
   EventEmitter,
@@ -40,6 +41,12 @@ export class NavGroupComponent extends NavBaseComponent implements AfterContentI
   @Input()
   open = false;
 
+  /**
+   * Automatically hide the nav group if there are no child buttons
+   */
+  @Input({ transform: booleanAttribute })
+  hideIfEmpty = false;
+
   @Output()
   openChange = new EventEmitter<boolean>();
 

libs/components/src/navigation/nav-group.stories.ts

@@ -88,6 +88,30 @@ export const Default: StoryObj<NavGroupComponent> = {
   }),
 };
 
+export const HideEmptyGroups: StoryObj<NavGroupComponent & { renderChildren: boolean }> = {
+  args: {
+    hideIfEmpty: true,
+    renderChildren: false,
+  },
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+      <bit-side-nav>
+        <bit-nav-group text="Hello World (Anchor)" [route]="['a']" icon="bwi-filter" [hideIfEmpty]="hideIfEmpty">
+          <bit-nav-item text="Child A" route="a" icon="bwi-filter" *ngIf="renderChildren"></bit-nav-item>
+          <bit-nav-item text="Child B" route="b" *ngIf="renderChildren"></bit-nav-item>
+          <bit-nav-item text="Child C" route="c" icon="bwi-filter" *ngIf="renderChildren"></bit-nav-item>
+        </bit-nav-group>
+        <bit-nav-group text="Lorem Ipsum (Button)" icon="bwi-filter">
+          <bit-nav-item text="Child A" icon="bwi-filter"></bit-nav-item>
+          <bit-nav-item text="Child B"></bit-nav-item>
+          <bit-nav-item text="Child C" icon="bwi-filter"></bit-nav-item>
+        </bit-nav-group>
+      </bit-side-nav>
+    `,
+  }),
+};
+
 export const Tree: StoryObj<NavGroupComponent> = {
   render: (args) => ({
     props: args,