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