@ndwnu/design-system 14.1.1 → 14.1.2

package/fesm2022/ndwnu-design-system.mjs

@@ -3139,7 +3139,7 @@ class MainNavigationMenuComponent {
         this.setActiveMobileItem(this.activeMobileItem() === item ? undefined : item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MainNavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MainNavigationMenuComponent, isStandalone: true, selector: "ndw-main-navigation-menu", inputs: { isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div cdkMenu class=\"menu\" [class.expanded]=\"isExpanded()\">\n  @for (item of items(); track getItemKey(item)) {\n    @if (!item.children) {\n      @if (item.callback) {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          ndwTooltipPosition=\"right\"\n          (click)=\"closeMobileMenu(item)\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n          @if (!isExpanded() && item.notifications) {\n            <ndw-badge class=\"expanded-badge\" [value]=\"item.notifications\" />\n          }\n        </button>\n      } @else {\n        <a\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          ndwTooltipPosition=\"right\"\n          [queryParams]=\"item.queryParams\"\n          [routerLink]=\"item.path\"\n          (click)=\"closeMobileMenu()\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n        </a>\n      }\n    } @else {\n      @if (isMobile()) {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"activeMobileItem() === item || undefined\"\n          (click)=\"toggleActiveMobileItem(item)\"\n          (keydown)=\"handleMobileItemKeydown($event, item)\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          <ndw-icon class=\"suffix\">\n            {{ activeMobileItem() !== item ? 'arrow_drop_down' : 'arrow_drop_up' }}\n          </ndw-icon>\n        </button>\n        @if (activeMobileItem() === item) {\n          @for (subItem of item.children; track getItemKey(subItem)) {\n            @if (subItem.callback) {\n              <button\n                cdkMenuItem\n                ndwButton\n                menu\n                [attr.active]=\"subItem.active ? true : null\"\n                class=\"sub-menu-button\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </a>\n            }\n          }\n        }\n      } @else {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          ndwTooltipPosition=\"right\"\n          [cdkMenuTriggerFor]=\"subMenu\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n            <ndw-icon class=\"suffix\">arrow_right</ndw-icon>\n          }\n        </button>\n      }\n\n      <ng-template #subMenu>\n        <div cdkMenu class=\"sub-menu\">\n          @for (subItem of item.children; track getItemKey(subItem)) {\n            @if (subItem.callback) {\n              <button\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                (click)=\"subItem.callback()\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </a>\n            }\n          }\n        </div>\n      </ng-template>\n    }\n  }\n</div>\n\n<ng-template #label let-item>\n  {{ item.label }}\n  @if (item.notifications) {\n    <ndw-badge [value]=\"item.notifications\" />\n  }\n</ng-template>\n", styles: [":root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}.menu [ndwButton],.sub-menu [ndwButton]{margin-inline:0;width:100%;cursor:pointer}.menu [ndwButton] .suffix,.sub-menu [ndwButton] .suffix{position:absolute;right:var(--ndw-spacing-sm)}.menu{justify-content:center}.menu .expanded-badge{position:absolute;left:var(--ndw-spacing-md);top:0}.menu.expanded [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-700)}@media screen and (min-width:1024px){.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-700)}}@media screen and (max-width:1024px){.menu{display:flex;flex-direction:column;gap:var(--ndw-spacing-xs)}.menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}.menu [ndwButton].sub-menu-button{height:1.875rem;margin-left:var(--ndw-spacing-md)}}.sub-menu{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-md);min-width:10.3rem;padding:var(--ndw-spacing-xs);box-shadow:var(--ndw-elevation-popover)}.sub-menu [ndwButton]{justify-content:flex-start;height:1.875rem;width:100%;padding:var(--ndw-spacing-2xs);border-radius:var(--ndw-border-radius-md);margin:0}.sub-menu [ndwButton]:hover{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-100);box-shadow:none;clip-path:none}.sub-menu [ndwButton]:active,.sub-menu [ndwButton][active],.sub-menu [ndwButton][selected]{background-color:var(--ndw-color-info-200);border-color:var(--ndw-color-info-200)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ndw-badge" }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip", "ndwTooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MainNavigationMenuComponent, isStandalone: true, selector: "ndw-main-navigation-menu", inputs: { isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div cdkMenu class=\"menu\" [class.expanded]=\"isExpanded()\">\n  @for (item of items(); track getItemKey(item)) {\n    @if (!item.children) {\n      @if (item.callback) {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          ndwTooltipPosition=\"right\"\n          (click)=\"closeMobileMenu(item)\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n          @if (!isExpanded() && item.notifications) {\n            <ndw-badge class=\"expanded-badge\" [value]=\"item.notifications\" />\n          }\n        </button>\n      } @else {\n        <a\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          ndwTooltipPosition=\"right\"\n          [queryParams]=\"item.queryParams\"\n          [routerLink]=\"item.path\"\n          (click)=\"closeMobileMenu()\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n        </a>\n      }\n    } @else {\n      @if (isMobile()) {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"activeMobileItem() === item || undefined\"\n          (click)=\"toggleActiveMobileItem(item)\"\n          (keydown)=\"handleMobileItemKeydown($event, item)\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          <ndw-icon class=\"suffix\">\n            {{ activeMobileItem() !== item ? 'arrow_drop_down' : 'arrow_drop_up' }}\n          </ndw-icon>\n        </button>\n        @if (activeMobileItem() === item) {\n          @for (subItem of item.children; track getItemKey(subItem)) {\n            @if (subItem.callback) {\n              <button\n                cdkMenuItem\n                ndwButton\n                menu\n                [attr.active]=\"subItem.active ? true : null\"\n                class=\"sub-menu-button\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </a>\n            }\n          }\n        }\n      } @else {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          ndwTooltipPosition=\"right\"\n          [cdkMenuTriggerFor]=\"subMenu\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n            <ndw-icon class=\"suffix\">arrow_right</ndw-icon>\n          }\n        </button>\n      }\n\n      <ng-template #subMenu>\n        <div cdkMenu class=\"sub-menu\">\n          @for (subItem of item.children; track getItemKey(subItem)) {\n            @if (subItem.callback) {\n              <button\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                (click)=\"subItem.callback()\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </a>\n            }\n          }\n        </div>\n      </ng-template>\n    }\n  }\n</div>\n\n<ng-template #label let-item>\n  {{ item.label }}\n  @if (item.notifications) {\n    <ndw-badge [value]=\"item.notifications\" />\n  }\n</ng-template>\n", styles: [":root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}.menu [ndwButton],.sub-menu [ndwButton]{margin-inline:0;width:100%;cursor:pointer}.menu [ndwButton] .suffix,.sub-menu [ndwButton] .suffix{position:absolute;right:var(--ndw-spacing-sm)}.menu{justify-content:center}.menu .expanded-badge{position:absolute;left:var(--ndw-spacing-md);top:0}.menu.expanded [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md);margin-inline:var(--ndw-spacing-xs);width:calc(100% - var(--ndw-spacing-xs) * 2)}.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-700)}@media screen and (min-width:1024px){.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-700)}}@media screen and (max-width:1024px){.menu{display:flex;flex-direction:column;gap:var(--ndw-spacing-xs)}.menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}.menu [ndwButton].sub-menu-button{height:1.875rem;margin-left:var(--ndw-spacing-md)}}.sub-menu{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-md);min-width:10.3rem;padding:var(--ndw-spacing-xs);box-shadow:var(--ndw-elevation-popover)}.sub-menu [ndwButton]{justify-content:flex-start;height:1.875rem;width:100%;padding:var(--ndw-spacing-2xs);border-radius:var(--ndw-border-radius-md);margin:0}.sub-menu [ndwButton]:hover{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-100);box-shadow:none;clip-path:none}.sub-menu [ndwButton]:active,.sub-menu [ndwButton][active],.sub-menu [ndwButton][selected]{background-color:var(--ndw-color-info-200);border-color:var(--ndw-color-info-200)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ndw-badge" }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip", "ndwTooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MainNavigationMenuComponent, decorators: [{
             type: Component,
@@ -3152,7 +3152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         RouterLink,
                         NgTemplateOutlet,
                         TooltipDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-main-navigation-menu', template: "<div cdkMenu class=\"menu\" [class.expanded]=\"isExpanded()\">\n  @for (item of items(); track getItemKey(item)) {\n    @if (!item.children) {\n      @if (item.callback) {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          ndwTooltipPosition=\"right\"\n          (click)=\"closeMobileMenu(item)\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n          @if (!isExpanded() && item.notifications) {\n            <ndw-badge class=\"expanded-badge\" [value]=\"item.notifications\" />\n          }\n        </button>\n      } @else {\n        <a\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          ndwTooltipPosition=\"right\"\n          [queryParams]=\"item.queryParams\"\n          [routerLink]=\"item.path\"\n          (click)=\"closeMobileMenu()\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n        </a>\n      }\n    } @else {\n      @if (isMobile()) {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"activeMobileItem() === item || undefined\"\n          (click)=\"toggleActiveMobileItem(item)\"\n          (keydown)=\"handleMobileItemKeydown($event, item)\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          <ndw-icon class=\"suffix\">\n            {{ activeMobileItem() !== item ? 'arrow_drop_down' : 'arrow_drop_up' }}\n          </ndw-icon>\n        </button>\n        @if (activeMobileItem() === item) {\n          @for (subItem of item.children; track getItemKey(subItem)) {\n            @if (subItem.callback) {\n              <button\n                cdkMenuItem\n                ndwButton\n                menu\n                [attr.active]=\"subItem.active ? true : null\"\n                class=\"sub-menu-button\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </a>\n            }\n          }\n        }\n      } @else {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          ndwTooltipPosition=\"right\"\n          [cdkMenuTriggerFor]=\"subMenu\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n            <ndw-icon class=\"suffix\">arrow_right</ndw-icon>\n          }\n        </button>\n      }\n\n      <ng-template #subMenu>\n        <div cdkMenu class=\"sub-menu\">\n          @for (subItem of item.children; track getItemKey(subItem)) {\n            @if (subItem.callback) {\n              <button\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                (click)=\"subItem.callback()\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </a>\n            }\n          }\n        </div>\n      </ng-template>\n    }\n  }\n</div>\n\n<ng-template #label let-item>\n  {{ item.label }}\n  @if (item.notifications) {\n    <ndw-badge [value]=\"item.notifications\" />\n  }\n</ng-template>\n", styles: [":root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}.menu [ndwButton],.sub-menu [ndwButton]{margin-inline:0;width:100%;cursor:pointer}.menu [ndwButton] .suffix,.sub-menu [ndwButton] .suffix{position:absolute;right:var(--ndw-spacing-sm)}.menu{justify-content:center}.menu .expanded-badge{position:absolute;left:var(--ndw-spacing-md);top:0}.menu.expanded [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-700)}@media screen and (min-width:1024px){.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-700)}}@media screen and (max-width:1024px){.menu{display:flex;flex-direction:column;gap:var(--ndw-spacing-xs)}.menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}.menu [ndwButton].sub-menu-button{height:1.875rem;margin-left:var(--ndw-spacing-md)}}.sub-menu{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-md);min-width:10.3rem;padding:var(--ndw-spacing-xs);box-shadow:var(--ndw-elevation-popover)}.sub-menu [ndwButton]{justify-content:flex-start;height:1.875rem;width:100%;padding:var(--ndw-spacing-2xs);border-radius:var(--ndw-border-radius-md);margin:0}.sub-menu [ndwButton]:hover{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-100);box-shadow:none;clip-path:none}.sub-menu [ndwButton]:active,.sub-menu [ndwButton][active],.sub-menu [ndwButton][selected]{background-color:var(--ndw-color-info-200);border-color:var(--ndw-color-info-200)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-main-navigation-menu', template: "<div cdkMenu class=\"menu\" [class.expanded]=\"isExpanded()\">\n  @for (item of items(); track getItemKey(item)) {\n    @if (!item.children) {\n      @if (item.callback) {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          ndwTooltipPosition=\"right\"\n          (click)=\"closeMobileMenu(item)\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n          @if (!isExpanded() && item.notifications) {\n            <ndw-badge class=\"expanded-badge\" [value]=\"item.notifications\" />\n          }\n        </button>\n      } @else {\n        <a\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          ndwTooltipPosition=\"right\"\n          [queryParams]=\"item.queryParams\"\n          [routerLink]=\"item.path\"\n          (click)=\"closeMobileMenu()\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n        </a>\n      }\n    } @else {\n      @if (isMobile()) {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"activeMobileItem() === item || undefined\"\n          (click)=\"toggleActiveMobileItem(item)\"\n          (keydown)=\"handleMobileItemKeydown($event, item)\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          <ndw-icon class=\"suffix\">\n            {{ activeMobileItem() !== item ? 'arrow_drop_down' : 'arrow_drop_up' }}\n          </ndw-icon>\n        </button>\n        @if (activeMobileItem() === item) {\n          @for (subItem of item.children; track getItemKey(subItem)) {\n            @if (subItem.callback) {\n              <button\n                cdkMenuItem\n                ndwButton\n                menu\n                [attr.active]=\"subItem.active ? true : null\"\n                class=\"sub-menu-button\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </a>\n            }\n          }\n        }\n      } @else {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          ndwTooltipPosition=\"right\"\n          [cdkMenuTriggerFor]=\"subMenu\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n            <ndw-icon class=\"suffix\">arrow_right</ndw-icon>\n          }\n        </button>\n      }\n\n      <ng-template #subMenu>\n        <div cdkMenu class=\"sub-menu\">\n          @for (subItem of item.children; track getItemKey(subItem)) {\n            @if (subItem.callback) {\n              <button\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                (click)=\"subItem.callback()\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </a>\n            }\n          }\n        </div>\n      </ng-template>\n    }\n  }\n</div>\n\n<ng-template #label let-item>\n  {{ item.label }}\n  @if (item.notifications) {\n    <ndw-badge [value]=\"item.notifications\" />\n  }\n</ng-template>\n", styles: [":root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}.menu [ndwButton],.sub-menu [ndwButton]{margin-inline:0;width:100%;cursor:pointer}.menu [ndwButton] .suffix,.sub-menu [ndwButton] .suffix{position:absolute;right:var(--ndw-spacing-sm)}.menu{justify-content:center}.menu .expanded-badge{position:absolute;left:var(--ndw-spacing-md);top:0}.menu.expanded [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md);margin-inline:var(--ndw-spacing-xs);width:calc(100% - var(--ndw-spacing-xs) * 2)}.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-700)}@media screen and (min-width:1024px){.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-700)}}@media screen and (max-width:1024px){.menu{display:flex;flex-direction:column;gap:var(--ndw-spacing-xs)}.menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}.menu [ndwButton].sub-menu-button{height:1.875rem;margin-left:var(--ndw-spacing-md)}}.sub-menu{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-md);min-width:10.3rem;padding:var(--ndw-spacing-xs);box-shadow:var(--ndw-elevation-popover)}.sub-menu [ndwButton]{justify-content:flex-start;height:1.875rem;width:100%;padding:var(--ndw-spacing-2xs);border-radius:var(--ndw-border-radius-md);margin:0}.sub-menu [ndwButton]:hover{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-100);box-shadow:none;clip-path:none}.sub-menu [ndwButton]:active,.sub-menu [ndwButton][active],.sub-menu [ndwButton][selected]{background-color:var(--ndw-color-info-200);border-color:var(--ndw-color-info-200)}\n"] }]
         }], propDecorators: { isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 class MainNavigationComponent {