@ndwnu/design-system 14.1.0 → 14.1.1

package/fesm2022/ndwnu-design-system.mjs

@@ -1202,6 +1202,7 @@ class TooltipDirective {
     overlay = inject(Overlay);
     ariaDescriber = inject(AriaDescriber);
     text = input.required({ ...(ngDevMode ? { debugName: "text" } : {}), alias: 'ndwTooltip' });
+    position = input('top', { ...(ngDevMode ? { debugName: "position" } : {}), alias: 'ndwTooltipPosition' });
     overlayRef = null;
     tooltipRef = null;
     isMouseOverTooltip = false;
@@ -1260,11 +1261,8 @@ class TooltipDirective {
         const element = this.elementRef.nativeElement;
         this.ariaDescriber.describe(element, this.text());
     }
-    getFlexibleConnectedPositionStrategy() {
-        return this.overlay
-            .position()
-            .flexibleConnectedTo(this.elementRef.nativeElement)
-            .withPositions([
+    positions = {
+        top: [
             {
                 offsetX: this.elementRef.nativeElement.offsetWidth / 2 - 16,
                 offsetY: -8,
@@ -1281,10 +1279,25 @@ class TooltipDirective {
                 overlayX: 'start',
                 overlayY: 'top',
             },
-        ]);
+        ],
+        right: [
+            {
+                offsetX: 8,
+                originX: 'end',
+                originY: 'center',
+                overlayX: 'start',
+                overlayY: 'center',
+            },
+        ],
+    };
+    getFlexibleConnectedPositionStrategy() {
+        return this.overlay
+            .position()
+            .flexibleConnectedTo(this.elementRef.nativeElement)
+            .withPositions(this.positions[this.position()]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: TooltipDirective, isStandalone: true, selector: "[ndwTooltip]", inputs: { text: { classPropertyName: "text", publicName: "ndwTooltip", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-hidden": "false", "tabindex": "0" }, listeners: { "focus": "show()", "blur": "hideFromTrigger()", "document:keydown.escape": "hideOnEscape()", "keydown.escape": "hide()", "mouseenter": "show()", "mouseleave": "hideFromTrigger()" } }, usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: TooltipDirective, isStandalone: true, selector: "[ndwTooltip]", inputs: { text: { classPropertyName: "text", publicName: "ndwTooltip", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "ndwTooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "false", "tabindex": "0" }, listeners: { "focus": "show()", "blur": "hideFromTrigger()", "document:keydown.escape": "hideOnEscape()", "keydown.escape": "hide()", "mouseenter": "show()", "mouseleave": "hideFromTrigger()" } }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
@@ -1301,7 +1314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         tabindex: '0',
                     },
                 }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "ndwTooltip", required: true }] }] } });
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "ndwTooltip", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "ndwTooltipPosition", required: false }] }] } });
 
 class InputButtonComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
@@ -1809,7 +1822,7 @@ class FormFieldComponent {
         input.ariaDescribedBy = this.descriptionUuid;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: FormFieldComponent, isStandalone: true, selector: "ndw-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, suffixAriaLabel: { classPropertyName: "suffixAriaLabel", publicName: "suffixAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clearButtonClicked: "clearButtonClicked" }, queries: [{ propertyName: "monthInput", first: true, predicate: MonthInputComponent, descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: DatepickerComponent, descendants: true, isSignal: true }, { propertyName: "regularInput", first: true, predicate: InputDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (input() === undefined) {\n  <fieldset>\n    <legend ndwLabel [class.sr-only]=\"hideLabel()\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n    </legend>\n    <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\n  </fieldset>\n} @else {\n  <label ndwLabel [attr.for]=\"input() ? 'input-' + uuid : null\" [class.sr-only]=\"hideLabel()\">\n    <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n  </label>\n  <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\n}\n\n<ng-template #fieldTemplate>\n  <div\n    [class]=\"inputContainerClass\"\n    [attr.success]=\"success() ? true : null\"\n    [attr.error]=\"error() ? true : null\"\n  >\n    @if (isSearchInput()) {\n      <ndw-input-icon>search</ndw-input-icon>\n    }\n\n    <ng-content />\n\n    @if (isSearchInput()) {\n      <ndw-clear-search-button\n        [input]=\"input()\"\n        [disabled]=\"disabled()\"\n        [ariaLabel]=\"suffixAriaLabel()\"\n        (buttonClicked)=\"clearButtonClicked.emit()\"\n      />\n    }\n    @if (hasPickerButton()) {\n      <ndw-picker-button\n        [input]=\"input()\"\n        [disabled]=\"disabled()\"\n        [ariaLabel]=\"suffixAriaLabel()\"\n      />\n    }\n  </div>\n\n  @if (info(); as info) {\n    <ndw-info [id]=\"descriptionUuid\">{{ info }}</ndw-info>\n  }\n  @if (error(); as error) {\n    <ndw-error role=\"alert\" aria-live=\"polite\">{{ error }}</ndw-error>\n  }\n  @if (success(); as success) {\n    <ndw-success role=\"alert\" aria-live=\"polite\">{{ success }}</ndw-success>\n  }\n</ng-template>\n\n<ng-template #labelTemplate>\n  <span class=\"required-label required\"> * </span>\n  {{ label() }}\n  @if (tooltip(); as tooltip) {\n    <ndw-icon [ndwTooltip]=\"tooltip\">info</ndw-icon>\n  }\n</ng-template>\n", styles: [":host{position:relative;display:grid;color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm)}:host .required-label{display:none}:host:has([required]) .required-label{display:inline}fieldset{border:0;margin:0;padding:0}fieldset legend{padding-inline:0;word-break:break-word}label{word-break:break-word}ndw-error,ndw-success,ndw-info{margin-top:var(--ndw-spacing-2xs)}\n"], dependencies: [{ kind: "component", type: ClearSearchButtonComponent, selector: "ndw-clear-search-button", inputs: ["disabled", "input", "ariaLabel"], outputs: ["buttonClicked"] }, { kind: "component", type: ErrorComponent, selector: "ndw-error" }, { kind: "component", type: InfoComponent, selector: "ndw-info" }, { kind: "component", type: InputIconComponent, selector: "ndw-input-icon" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PickerButtonComponent, selector: "ndw-picker-button", inputs: ["disabled", "input", "ariaLabel", "required"] }, { kind: "component", type: SuccessComponent, selector: "ndw-success" }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: FormFieldComponent, isStandalone: true, selector: "ndw-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, suffixAriaLabel: { classPropertyName: "suffixAriaLabel", publicName: "suffixAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clearButtonClicked: "clearButtonClicked" }, queries: [{ propertyName: "monthInput", first: true, predicate: MonthInputComponent, descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: DatepickerComponent, descendants: true, isSignal: true }, { propertyName: "regularInput", first: true, predicate: InputDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (input() === undefined) {\n  <fieldset>\n    <legend ndwLabel [class.sr-only]=\"hideLabel()\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n    </legend>\n    <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\n  </fieldset>\n} @else {\n  <label ndwLabel [attr.for]=\"input() ? 'input-' + uuid : null\" [class.sr-only]=\"hideLabel()\">\n    <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n  </label>\n  <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\n}\n\n<ng-template #fieldTemplate>\n  <div\n    [class]=\"inputContainerClass\"\n    [attr.success]=\"success() ? true : null\"\n    [attr.error]=\"error() ? true : null\"\n  >\n    @if (isSearchInput()) {\n      <ndw-input-icon>search</ndw-input-icon>\n    }\n\n    <ng-content />\n\n    @if (isSearchInput()) {\n      <ndw-clear-search-button\n        [input]=\"input()\"\n        [disabled]=\"disabled()\"\n        [ariaLabel]=\"suffixAriaLabel()\"\n        (buttonClicked)=\"clearButtonClicked.emit()\"\n      />\n    }\n    @if (hasPickerButton()) {\n      <ndw-picker-button\n        [input]=\"input()\"\n        [disabled]=\"disabled()\"\n        [ariaLabel]=\"suffixAriaLabel()\"\n      />\n    }\n  </div>\n\n  @if (info(); as info) {\n    <ndw-info [id]=\"descriptionUuid\">{{ info }}</ndw-info>\n  }\n  @if (error(); as error) {\n    <ndw-error role=\"alert\" aria-live=\"polite\">{{ error }}</ndw-error>\n  }\n  @if (success(); as success) {\n    <ndw-success role=\"alert\" aria-live=\"polite\">{{ success }}</ndw-success>\n  }\n</ng-template>\n\n<ng-template #labelTemplate>\n  <span class=\"required-label required\"> * </span>\n  {{ label() }}\n  @if (tooltip(); as tooltip) {\n    <ndw-icon [ndwTooltip]=\"tooltip\">info</ndw-icon>\n  }\n</ng-template>\n", styles: [":host{position:relative;display:grid;color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm)}:host .required-label{display:none}:host:has([required]) .required-label{display:inline}fieldset{border:0;margin:0;padding:0}fieldset legend{padding-inline:0;word-break:break-word}label{word-break:break-word}ndw-error,ndw-success,ndw-info{margin-top:var(--ndw-spacing-2xs)}\n"], dependencies: [{ kind: "component", type: ClearSearchButtonComponent, selector: "ndw-clear-search-button", inputs: ["disabled", "input", "ariaLabel"], outputs: ["buttonClicked"] }, { kind: "component", type: ErrorComponent, selector: "ndw-error" }, { kind: "component", type: InfoComponent, selector: "ndw-info" }, { kind: "component", type: InputIconComponent, selector: "ndw-input-icon" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PickerButtonComponent, selector: "ndw-picker-button", inputs: ["disabled", "input", "ariaLabel", "required"] }, { kind: "component", type: SuccessComponent, selector: "ndw-success" }, { 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: FormFieldComponent, decorators: [{
             type: Component,
@@ -3013,7 +3026,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 
 class KeyValueListComponent extends CoreKeyValueListComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: KeyValueListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: KeyValueListComponent, isStandalone: true, selector: "ndw-key-value-list", usesInheritance: true, ngImport: i0, template: "<dl\n  [class.striped]=\"hasZebraStripes()\"\n  [class.fluid]=\"fluid()\"\n  [class.font-md]=\"fontSize() === 'md'\"\n  [class.font-lg]=\"fontSize() === 'lg'\"\n>\n  @for (keyValueRow of normalizedData(); track keyValueRow.key) {\n    <dt>\n      <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.key }\" />\n    </dt>\n    <dd>\n      <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.value }\" />\n    </dd>\n  }\n</dl>\n\n<ng-template #cellData let-data>\n  @if (data.url) {\n    <a ndwLink target=\"_blank\" [href]=\"data.url\">\n      {{ data.label }}\n      <ndw-icon size=\"sm\">open_in_new</ndw-icon>\n    </a>\n  } @else {\n    {{ data.label }}\n  }\n\n  @if (data.tooltip) {\n    <ndw-icon class=\"tooltip-icon\" size=\"sm\" [ndwTooltip]=\"data.tooltip\">info</ndw-icon>\n  }\n</ng-template>\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl{display:grid;width:fit-content;grid-template-columns:auto auto;margin:0}dl dt,dl dd{display:flex;align-items:center;gap:var(--ndw-spacing-2xs);padding-block:var(--ndw-spacing-xs);margin:0}dl dt .tooltip-icon,dl dd .tooltip-icon{color:var(--ndw-color-info-500)}dl dt{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;padding-inline-end:var(--ndw-spacing-2xs)}dl dd{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-inline-start:var(--ndw-spacing-2xs)}dl.font-md dt{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}dl.font-md dd{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl.font-lg dt{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}dl.font-lg dd{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl.striped dt{padding-inline-start:var(--ndw-spacing-xs)}dl.striped dd{padding-inline-end:var(--ndw-spacing-xs)}dl.striped dt:nth-child(4n+1),dl.striped dd:nth-child(4n+2){background-color:var(--ndw-color-grey-100)}dl.fluid{width:100%}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: KeyValueListComponent, isStandalone: true, selector: "ndw-key-value-list", usesInheritance: true, ngImport: i0, template: "<dl\n  [class.striped]=\"hasZebraStripes()\"\n  [class.fluid]=\"fluid()\"\n  [class.font-md]=\"fontSize() === 'md'\"\n  [class.font-lg]=\"fontSize() === 'lg'\"\n>\n  @for (keyValueRow of normalizedData(); track keyValueRow.key) {\n    <dt>\n      <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.key }\" />\n    </dt>\n    <dd>\n      <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.value }\" />\n    </dd>\n  }\n</dl>\n\n<ng-template #cellData let-data>\n  @if (data.url) {\n    <a ndwLink target=\"_blank\" [href]=\"data.url\">\n      {{ data.label }}\n      <ndw-icon size=\"sm\">open_in_new</ndw-icon>\n    </a>\n  } @else {\n    {{ data.label }}\n  }\n\n  @if (data.tooltip) {\n    <ndw-icon class=\"tooltip-icon\" size=\"sm\" [ndwTooltip]=\"data.tooltip\">info</ndw-icon>\n  }\n</ng-template>\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl{display:grid;width:fit-content;grid-template-columns:auto auto;margin:0}dl dt,dl dd{display:flex;align-items:center;gap:var(--ndw-spacing-2xs);padding-block:var(--ndw-spacing-xs);margin:0}dl dt .tooltip-icon,dl dd .tooltip-icon{color:var(--ndw-color-info-500)}dl dt{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;padding-inline-end:var(--ndw-spacing-2xs)}dl dd{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-inline-start:var(--ndw-spacing-2xs)}dl.font-md dt{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}dl.font-md dd{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl.font-lg dt{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}dl.font-lg dd{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl.striped dt{padding-inline-start:var(--ndw-spacing-xs)}dl.striped dd{padding-inline-end:var(--ndw-spacing-xs)}dl.striped dt:nth-child(4n+1),dl.striped dd:nth-child(4n+2){background-color:var(--ndw-color-grey-100)}dl.fluid{width:100%}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { 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: KeyValueListComponent, decorators: [{
             type: Component,
@@ -3126,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          (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          [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          [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]{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"] }], 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)}.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,
@@ -3139,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          (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          [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          [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]{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)}.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 {
@@ -3184,14 +3197,14 @@ class MainNavigationComponent {
         this.#renderer.setAttribute(this.#document.body, 'data-main-navigation-expanded', this.isExpanded().toString());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MainNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MainNavigationComponent, isStandalone: true, selector: "ndw-main-navigation", inputs: { applicationName: { classPropertyName: "applicationName", publicName: "applicationName", isSignal: true, isRequired: true, transformFunction: null }, topMenuItems: { classPropertyName: "topMenuItems", publicName: "topMenuItems", isSignal: true, isRequired: true, transformFunction: null }, bottomMenuItems: { classPropertyName: "bottomMenuItems", publicName: "bottomMenuItems", isSignal: true, isRequired: false, transformFunction: null }, environment: { classPropertyName: "environment", publicName: "environment", isSignal: true, isRequired: false, transformFunction: null }, footerTexts: { classPropertyName: "footerTexts", publicName: "footerTexts", isSignal: true, isRequired: false, transformFunction: null }, isCollapsible: { classPropertyName: "isCollapsible", publicName: "isCollapsible", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isExpanded: "isExpandedChange" }, host: { listeners: { "window:resize": "onWindowResize()" }, properties: { "class.expanded": "isExpanded()" } }, ngImport: i0, template: "<ndw-main-navigation-header\n  [applicationName]=\"applicationName()\"\n  [environment]=\"environment()\"\n  [isExpanded]=\"isExpanded()\"\n  [isMobile]=\"isMobile()\"\n  [theme]=\"theme()\"\n  [themeImagePath]=\"themeImagePath()\"\n  [(isMobileMenuOpen)]=\"isMobileMenuOpen\"\n/>\n@if (!isMobile()) {\n  <div class=\"content\">\n    <main>\n      <ndw-main-navigation-menu\n        [isExpanded]=\"isExpanded()\"\n        [isMobile]=\"isMobile()\"\n        [items]=\"topMenuItems()\"\n        (closed)=\"closeMobileMenu()\"\n      />\n    </main>\n    <footer>\n      @if (bottomMenuItems(); as bottomMenuItems) {\n        <ndw-main-navigation-menu\n          [isExpanded]=\"isExpanded()\"\n          [isMobile]=\"isMobile()\"\n          [items]=\"bottomMenuItems\"\n          (closed)=\"closeMobileMenu()\"\n        />\n      }\n      <div class=\"texts\">\n        @if (isExpanded() || isMobile()) {\n          @for (text of footerTexts(); track $index) {\n            <p>{{ text }}</p>\n          }\n        }\n      </div>\n      <div class=\"version\">\n        <p>{{ version() }}</p>\n      </div>\n      @if (isCollapsible() && !isMobile()) {\n        <button ndwButton menu class=\"collapse-toggle\" (click)=\"toggleView()\">\n          <ndw-icon>keyboard_double_arrow_right</ndw-icon>\n        </button>\n      }\n    </footer>\n  </div>\n} @else {\n  @if (isMobileMenuOpen()) {\n    <div class=\"content\">\n      <main>\n        <ndw-main-navigation-menu\n          [isExpanded]=\"isExpanded()\"\n          [isMobile]=\"isMobile()\"\n          [items]=\"mobileMenuItems()\"\n          (closed)=\"closeMobileMenu()\"\n        />\n      </main>\n    </div>\n  }\n}\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}: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}:host{background-color:var(--ndw-color-white);box-sizing:border-box;color:var(--ndw-color-grey-700);display:grid;grid-template-rows:auto 1fr;height:100%;padding-top:var(--ndw-spacing-lg);width:var(--main-navigation-collapse-width);border-right:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-bottom:0}@media screen and (max-width:1024px){:host{padding-top:var(--ndw-spacing-md);height:var(--main-navigation-mobile-header-height);width:100%;border-right:0;border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300)}}.content{background-color:var(--ndw-color-white);display:grid;grid-template-rows:1fr auto;overflow-y:auto}.content footer{padding-block-end:var(--ndw-spacing-xl);position:relative}.content footer .texts{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-block-start:var(--ndw-spacing-md);padding-inline:var(--ndw-spacing-md)}.content footer .texts p{text-align:center}.content footer .version{align-items:center;display:grid;height:2.625rem}.content footer .version p{display:none;font-size:var(--ndw-font-size-2xs);text-align:center}.content footer .collapse-toggle{bottom:0;cursor:pointer;position:absolute;right:0;width:var(--main-navigation-collapse-width)}@media screen and (max-width:1024px){.content{position:absolute;inset:var(--main-navigation-mobile-header-height) 0 0;z-index:9999}}:host(.expanded){min-width:var(--main-navigation-expanded-width)}@media screen and (max-width:1024px){:host(.expanded){width:100%}}:host(.expanded) .content footer{padding-block-end:0}:host(.expanded) .content footer .version p{display:block}:host(.expanded) .content footer .collapse-toggle ndw-icon{transform:var(--ndw-rotate-half)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: MainNavigationHeaderComponent, selector: "ndw-main-navigation-header", inputs: ["applicationName", "isExpanded", "isMobile", "theme", "themeImagePath", "environment", "isMobileMenuOpen"], outputs: ["isMobileMenuOpenChange"] }, { kind: "component", type: MainNavigationMenuComponent, selector: "ndw-main-navigation-menu", inputs: ["isExpanded", "isMobile", "items"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MainNavigationComponent, isStandalone: true, selector: "ndw-main-navigation", inputs: { applicationName: { classPropertyName: "applicationName", publicName: "applicationName", isSignal: true, isRequired: true, transformFunction: null }, topMenuItems: { classPropertyName: "topMenuItems", publicName: "topMenuItems", isSignal: true, isRequired: true, transformFunction: null }, bottomMenuItems: { classPropertyName: "bottomMenuItems", publicName: "bottomMenuItems", isSignal: true, isRequired: false, transformFunction: null }, environment: { classPropertyName: "environment", publicName: "environment", isSignal: true, isRequired: false, transformFunction: null }, footerTexts: { classPropertyName: "footerTexts", publicName: "footerTexts", isSignal: true, isRequired: false, transformFunction: null }, isCollapsible: { classPropertyName: "isCollapsible", publicName: "isCollapsible", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isExpanded: "isExpandedChange" }, host: { listeners: { "window:resize": "onWindowResize()" }, properties: { "class.expanded": "isExpanded()" } }, ngImport: i0, template: "<ndw-main-navigation-header\n  [applicationName]=\"applicationName()\"\n  [environment]=\"environment()\"\n  [isExpanded]=\"isExpanded()\"\n  [isMobile]=\"isMobile()\"\n  [theme]=\"theme()\"\n  [themeImagePath]=\"themeImagePath()\"\n  [(isMobileMenuOpen)]=\"isMobileMenuOpen\"\n/>\n@if (!isMobile()) {\n  <div class=\"content\">\n    <main>\n      <ndw-main-navigation-menu\n        [isExpanded]=\"isExpanded()\"\n        [isMobile]=\"isMobile()\"\n        [items]=\"topMenuItems()\"\n        (closed)=\"closeMobileMenu()\"\n      />\n    </main>\n    <footer>\n      @if (bottomMenuItems(); as bottomMenuItems) {\n        <ndw-main-navigation-menu\n          [isExpanded]=\"isExpanded()\"\n          [isMobile]=\"isMobile()\"\n          [items]=\"bottomMenuItems\"\n          (closed)=\"closeMobileMenu()\"\n        />\n      }\n      <div class=\"texts\">\n        @if (isExpanded() || isMobile()) {\n          @for (text of footerTexts(); track $index) {\n            <p>{{ text }}</p>\n          }\n        }\n      </div>\n      <div class=\"version\">\n        <p>{{ version() }}</p>\n      </div>\n      @if (isCollapsible() && !isMobile()) {\n        <button ndwButton menu class=\"collapse-toggle\" (click)=\"toggleView()\">\n          <ndw-icon>keyboard_double_arrow_right</ndw-icon>\n        </button>\n      }\n    </footer>\n  </div>\n} @else {\n  @if (isMobileMenuOpen()) {\n    <div class=\"content\">\n      <main>\n        <ndw-main-navigation-menu\n          [isExpanded]=\"isExpanded()\"\n          [isMobile]=\"isMobile()\"\n          [items]=\"mobileMenuItems()\"\n          (closed)=\"closeMobileMenu()\"\n        />\n      </main>\n    </div>\n  }\n}\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}: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}:host{background-color:var(--ndw-color-white);box-sizing:border-box;color:var(--ndw-color-grey-700);display:grid;grid-template-rows:auto 1fr;height:100%;padding-top:var(--ndw-spacing-lg);width:var(--main-navigation-collapse-width);border-right:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-bottom:0}@media screen and (max-width:1024px){:host{padding-top:var(--ndw-spacing-md);height:var(--main-navigation-mobile-header-height);width:100%;border-right:0;border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300)}}.content{background-color:var(--ndw-color-white);display:grid;grid-template-rows:1fr auto;overflow-y:auto}.content footer{padding-block-end:var(--ndw-spacing-xl);position:relative}.content footer .texts{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-block-start:var(--ndw-spacing-md);padding-inline:var(--ndw-spacing-md)}.content footer .texts p{text-align:center}.content footer .version{align-items:center;display:grid;height:2.625rem}.content footer .version p{display:none;font-size:var(--ndw-font-size-2xs);text-align:center}.content footer .collapse-toggle{bottom:0;cursor:pointer;position:absolute;right:0;margin-inline:0;width:var(--main-navigation-collapse-width)}@media screen and (max-width:1024px){.content{position:absolute;inset:var(--main-navigation-mobile-header-height) 0 0;z-index:9999}}:host(.expanded){min-width:var(--main-navigation-expanded-width)}@media screen and (max-width:1024px){:host(.expanded){width:100%}}:host(.expanded) .content footer{padding-block-end:0}:host(.expanded) .content footer .version p{display:block}:host(.expanded) .content footer .collapse-toggle ndw-icon{transform:var(--ndw-rotate-half)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: MainNavigationHeaderComponent, selector: "ndw-main-navigation-header", inputs: ["applicationName", "isExpanded", "isMobile", "theme", "themeImagePath", "environment", "isMobileMenuOpen"], outputs: ["isMobileMenuOpenChange"] }, { kind: "component", type: MainNavigationMenuComponent, selector: "ndw-main-navigation-menu", inputs: ["isExpanded", "isMobile", "items"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MainNavigationComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.expanded]': 'isExpanded()',
                         '(window:resize)': 'onWindowResize()',
-                    }, imports: [IconComponent, MainNavigationHeaderComponent, MainNavigationMenuComponent], selector: 'ndw-main-navigation', template: "<ndw-main-navigation-header\n  [applicationName]=\"applicationName()\"\n  [environment]=\"environment()\"\n  [isExpanded]=\"isExpanded()\"\n  [isMobile]=\"isMobile()\"\n  [theme]=\"theme()\"\n  [themeImagePath]=\"themeImagePath()\"\n  [(isMobileMenuOpen)]=\"isMobileMenuOpen\"\n/>\n@if (!isMobile()) {\n  <div class=\"content\">\n    <main>\n      <ndw-main-navigation-menu\n        [isExpanded]=\"isExpanded()\"\n        [isMobile]=\"isMobile()\"\n        [items]=\"topMenuItems()\"\n        (closed)=\"closeMobileMenu()\"\n      />\n    </main>\n    <footer>\n      @if (bottomMenuItems(); as bottomMenuItems) {\n        <ndw-main-navigation-menu\n          [isExpanded]=\"isExpanded()\"\n          [isMobile]=\"isMobile()\"\n          [items]=\"bottomMenuItems\"\n          (closed)=\"closeMobileMenu()\"\n        />\n      }\n      <div class=\"texts\">\n        @if (isExpanded() || isMobile()) {\n          @for (text of footerTexts(); track $index) {\n            <p>{{ text }}</p>\n          }\n        }\n      </div>\n      <div class=\"version\">\n        <p>{{ version() }}</p>\n      </div>\n      @if (isCollapsible() && !isMobile()) {\n        <button ndwButton menu class=\"collapse-toggle\" (click)=\"toggleView()\">\n          <ndw-icon>keyboard_double_arrow_right</ndw-icon>\n        </button>\n      }\n    </footer>\n  </div>\n} @else {\n  @if (isMobileMenuOpen()) {\n    <div class=\"content\">\n      <main>\n        <ndw-main-navigation-menu\n          [isExpanded]=\"isExpanded()\"\n          [isMobile]=\"isMobile()\"\n          [items]=\"mobileMenuItems()\"\n          (closed)=\"closeMobileMenu()\"\n        />\n      </main>\n    </div>\n  }\n}\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}: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}:host{background-color:var(--ndw-color-white);box-sizing:border-box;color:var(--ndw-color-grey-700);display:grid;grid-template-rows:auto 1fr;height:100%;padding-top:var(--ndw-spacing-lg);width:var(--main-navigation-collapse-width);border-right:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-bottom:0}@media screen and (max-width:1024px){:host{padding-top:var(--ndw-spacing-md);height:var(--main-navigation-mobile-header-height);width:100%;border-right:0;border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300)}}.content{background-color:var(--ndw-color-white);display:grid;grid-template-rows:1fr auto;overflow-y:auto}.content footer{padding-block-end:var(--ndw-spacing-xl);position:relative}.content footer .texts{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-block-start:var(--ndw-spacing-md);padding-inline:var(--ndw-spacing-md)}.content footer .texts p{text-align:center}.content footer .version{align-items:center;display:grid;height:2.625rem}.content footer .version p{display:none;font-size:var(--ndw-font-size-2xs);text-align:center}.content footer .collapse-toggle{bottom:0;cursor:pointer;position:absolute;right:0;width:var(--main-navigation-collapse-width)}@media screen and (max-width:1024px){.content{position:absolute;inset:var(--main-navigation-mobile-header-height) 0 0;z-index:9999}}:host(.expanded){min-width:var(--main-navigation-expanded-width)}@media screen and (max-width:1024px){:host(.expanded){width:100%}}:host(.expanded) .content footer{padding-block-end:0}:host(.expanded) .content footer .version p{display:block}:host(.expanded) .content footer .collapse-toggle ndw-icon{transform:var(--ndw-rotate-half)}\n"] }]
+                    }, imports: [IconComponent, MainNavigationHeaderComponent, MainNavigationMenuComponent], selector: 'ndw-main-navigation', template: "<ndw-main-navigation-header\n  [applicationName]=\"applicationName()\"\n  [environment]=\"environment()\"\n  [isExpanded]=\"isExpanded()\"\n  [isMobile]=\"isMobile()\"\n  [theme]=\"theme()\"\n  [themeImagePath]=\"themeImagePath()\"\n  [(isMobileMenuOpen)]=\"isMobileMenuOpen\"\n/>\n@if (!isMobile()) {\n  <div class=\"content\">\n    <main>\n      <ndw-main-navigation-menu\n        [isExpanded]=\"isExpanded()\"\n        [isMobile]=\"isMobile()\"\n        [items]=\"topMenuItems()\"\n        (closed)=\"closeMobileMenu()\"\n      />\n    </main>\n    <footer>\n      @if (bottomMenuItems(); as bottomMenuItems) {\n        <ndw-main-navigation-menu\n          [isExpanded]=\"isExpanded()\"\n          [isMobile]=\"isMobile()\"\n          [items]=\"bottomMenuItems\"\n          (closed)=\"closeMobileMenu()\"\n        />\n      }\n      <div class=\"texts\">\n        @if (isExpanded() || isMobile()) {\n          @for (text of footerTexts(); track $index) {\n            <p>{{ text }}</p>\n          }\n        }\n      </div>\n      <div class=\"version\">\n        <p>{{ version() }}</p>\n      </div>\n      @if (isCollapsible() && !isMobile()) {\n        <button ndwButton menu class=\"collapse-toggle\" (click)=\"toggleView()\">\n          <ndw-icon>keyboard_double_arrow_right</ndw-icon>\n        </button>\n      }\n    </footer>\n  </div>\n} @else {\n  @if (isMobileMenuOpen()) {\n    <div class=\"content\">\n      <main>\n        <ndw-main-navigation-menu\n          [isExpanded]=\"isExpanded()\"\n          [isMobile]=\"isMobile()\"\n          [items]=\"mobileMenuItems()\"\n          (closed)=\"closeMobileMenu()\"\n        />\n      </main>\n    </div>\n  }\n}\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}: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}:host{background-color:var(--ndw-color-white);box-sizing:border-box;color:var(--ndw-color-grey-700);display:grid;grid-template-rows:auto 1fr;height:100%;padding-top:var(--ndw-spacing-lg);width:var(--main-navigation-collapse-width);border-right:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-bottom:0}@media screen and (max-width:1024px){:host{padding-top:var(--ndw-spacing-md);height:var(--main-navigation-mobile-header-height);width:100%;border-right:0;border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300)}}.content{background-color:var(--ndw-color-white);display:grid;grid-template-rows:1fr auto;overflow-y:auto}.content footer{padding-block-end:var(--ndw-spacing-xl);position:relative}.content footer .texts{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-block-start:var(--ndw-spacing-md);padding-inline:var(--ndw-spacing-md)}.content footer .texts p{text-align:center}.content footer .version{align-items:center;display:grid;height:2.625rem}.content footer .version p{display:none;font-size:var(--ndw-font-size-2xs);text-align:center}.content footer .collapse-toggle{bottom:0;cursor:pointer;position:absolute;right:0;margin-inline:0;width:var(--main-navigation-collapse-width)}@media screen and (max-width:1024px){.content{position:absolute;inset:var(--main-navigation-mobile-header-height) 0 0;z-index:9999}}:host(.expanded){min-width:var(--main-navigation-expanded-width)}@media screen and (max-width:1024px){:host(.expanded){width:100%}}:host(.expanded) .content footer{padding-block-end:0}:host(.expanded) .content footer .version p{display:block}:host(.expanded) .content footer .collapse-toggle ndw-icon{transform:var(--ndw-rotate-half)}\n"] }]
         }], propDecorators: { applicationName: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationName", required: true }] }], topMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "topMenuItems", required: true }] }], bottomMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottomMenuItems", required: false }] }], environment: [{ type: i0.Input, args: [{ isSignal: true, alias: "environment", required: false }] }], footerTexts: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTexts", required: false }] }], isCollapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsible", required: false }] }], version: [{ type: i0.Input, args: [{ isSignal: true, alias: "version", required: false }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }, { type: i0.Output, args: ["isExpandedChange"] }] } });
 
 class LayoutComponent {
@@ -3311,7 +3324,7 @@ class MapButtonComponent {
         mail: 'Maak een melding',
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MapButtonComponent, isStandalone: true, selector: "ndw-map-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  class=\"map-control\"\n  [class.active]=\"active()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"iconLabel()\"\n  (click)=\"clicked.emit()\"\n  [ndwTooltip]=\"iconLabel()\"\n>\n  @if (svgIcon()) {\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <use [attr.href]=\"'images/map-button-icons.svg#' + svgIcon()\"></use>\n    </svg>\n  } @else if (buttonIcon()) {\n    <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n  }\n  <div class=\"content-wrapper\">\n    <ng-content />\n  </div>\n</button>\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{width:fit-content}.map-control{justify-content:center}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MapButtonComponent, isStandalone: true, selector: "ndw-map-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  class=\"map-control\"\n  [class.active]=\"active()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"iconLabel()\"\n  (click)=\"clicked.emit()\"\n  [ndwTooltip]=\"iconLabel()\"\n>\n  @if (svgIcon()) {\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <use [attr.href]=\"'images/map-button-icons.svg#' + svgIcon()\"></use>\n    </svg>\n  } @else if (buttonIcon()) {\n    <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n  }\n  <div class=\"content-wrapper\">\n    <ng-content />\n  </div>\n</button>\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{width:fit-content}.map-control{justify-content:center}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { 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: MapButtonComponent, decorators: [{
             type: Component,