npm - @ndwnu/design-system - Versions diffs - 9.2.0 → 10.0.0 - Mend

@ndwnu/design-system 9.2.0 → 10.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/fesm2022/ndwnu-design-system.mjs CHANGED Viewed

@@ -1,18 +1,17 @@
 import * as i0 from '@angular/core';
-import { input, Component, ChangeDetectionStrategy, EventEmitter, inject, ElementRef, ChangeDetectorRef, Directive, output, NgZone, ViewContainerRef, DestroyRef, forwardRef, viewChild, TemplateRef, signal, computed, ViewChildren, model, contentChildren, Output, PLATFORM_ID, contentChild, effect, Renderer2, afterNextRender, Injectable, InjectionToken, linkedSignal, untracked, viewChildren } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { DOCUMENT, NgTemplateOutlet, NgClass, isPlatformBrowser, CommonModule, AsyncPipe } from '@angular/common';
-import { hasModifierKey } from '@angular/cdk/keycodes';
-import * as i1$1 from '@angular/cdk/overlay';
-import { Overlay, ViewportRuler, OverlayConfig, ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay';
-import { TemplatePortal, ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
+import { input, Component, ChangeDetectionStrategy, forwardRef, Directive, output, model, contentChildren, computed, viewChild, inject, ElementRef, signal, DestroyRef, EventEmitter, ViewContainerRef, Output, PLATFORM_ID, contentChild, effect, Renderer2, afterNextRender, Injectable, InjectionToken, ChangeDetectorRef, linkedSignal, untracked, TemplateRef, viewChildren } from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { NgTemplateOutlet, NgClass, isPlatformBrowser, DOCUMENT, CommonModule, AsyncPipe, NgStyle } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NgControl, Validators, FormsModule } from '@angular/forms';
-import { Subject, merge, filter, of, map, defer, take, switchMap, noop, fromEvent, delay, startWith } from 'rxjs';
-import { MatchBoldPipe, CoreIconComponent } from '@ndwnu/core';
-import { ActiveDescendantKeyManager, AriaDescriber, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
+import { CoreAutosuggestDirective, CoreIconComponent, CoreAutosuggestOptionComponent, MatchBoldPipe, CoreAutosuggestAddOptionComponent, CoreAutosuggestPanelComponent, setRadioItemsName, checkRadioItems, CoreBreadcrumbComponent, CoreBreadcrumbGroupComponent, CoreRouterBreadcrumbsComponent } from '@ndwnu/core';
+import { AriaDescriber, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
+import * as i1$1 from '@angular/cdk/overlay';
+import { Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { ComponentPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
+import { fromEvent, take, noop, startWith, Subject, BehaviorSubject, interval, map, pairwise, takeWhile, filter, skipWhile, switchMap, tap } from 'rxjs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import { RouterLink, ActivatedRoute, Router, NavigationEnd } from '@angular/router';
+import { RouterLink } from '@angular/router';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
 import { Dialog } from '@angular/cdk/dialog';
@@ -34,525 +33,43 @@ class BadgeComponent {
      */
     displayLargeNumbers = input(false);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: BadgeComponent, isStandalone: true, selector: "ndw-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, displayLargeNumbers: { classPropertyName: "displayLargeNumbers", publicName: "displayLargeNumbers", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (value(); as value) {\n  @if (!displayLargeNumbers() && (value < -9 || value > 99)) {\n    <span class=\"dot\"></span>\n  } @else {\n    {{ value }}\n  }\n} @else {\n  {{ value() }}\n}\n@if (ariaLabel()) {\n  <span class=\"sr-only\"> {{ ariaLabel() }}</span>\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;--min-badge-size: 1.25rem;background-color:var(--ndw-color-primary-050);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary);border-radius:var(--min-badge-size);box-sizing:border-box;color:var(--ndw-color-primary);display:flex;align-items:center;justify-content:center;height:var(--min-badge-size);line-height:100%;text-align:center;padding-inline:var(--ndw-spacing-2xs);min-width:var(--min-badge-size);max-width:fit-content}.dot{display:block;background-color:var(--ndw-color-primary);border-radius:50%;height:var(--ndw-spacing-2xs);width:var(--ndw-spacing-2xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: BadgeComponent, isStandalone: true, selector: "ndw-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, displayLargeNumbers: { classPropertyName: "displayLargeNumbers", publicName: "displayLargeNumbers", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (value(); as value) {\n  @if (!displayLargeNumbers() && (value < -9 || value > 99)) {\n    <span class=\"dot\"></span>\n  } @else {\n    {{ value }}\n  }\n} @else {\n  {{ value() }}\n}\n@if (ariaLabel()) {\n  <span class=\"sr-only\"> {{ ariaLabel() }}</span>\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";:host{--badge-background-color: initial;--badge-border: initial;--badge-color: initial;--badge-dot-size: initial;--badge-font-size: initial;--badge-min-size: initial;--badge-padding-inline: initial;align-items:center;background-color:var(--badge-background-color);border:var(--badge-border);border-radius:var(--badge-min-size);box-sizing:border-box;color:var(--badge-color);display:flex;font-size:var(--badge-font-size);height:var(--badge-min-size);justify-content:center;letter-spacing:-1px;max-width:fit-content;min-width:var(--badge-min-size);padding-inline:var(--badge-padding-inline);text-align:center}.dot{display:block;background-color:var(--badge-color);border-radius:50%;height:var(--badge-dot-size);width:var(--badge-dot-size)}.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{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;--badge-background-color: var(--ndw-color-primary-050);--badge-border: var(--ndw-border-size-sm) solid var(--ndw-color-primary);--badge-color: var(--ndw-color-primary);--badge-dot-size: var(--ndw-spacing-2xs);--badge-min-size: 1.25rem;--badge-padding-inline: var(--ndw-spacing-2xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-badge', template: "@if (value(); as value) {\n  @if (!displayLargeNumbers() && (value < -9 || value > 99)) {\n    <span class=\"dot\"></span>\n  } @else {\n    {{ value }}\n  }\n} @else {\n  {{ value() }}\n}\n@if (ariaLabel()) {\n  <span class=\"sr-only\"> {{ ariaLabel() }}</span>\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;--min-badge-size: 1.25rem;background-color:var(--ndw-color-primary-050);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary);border-radius:var(--min-badge-size);box-sizing:border-box;color:var(--ndw-color-primary);display:flex;align-items:center;justify-content:center;height:var(--min-badge-size);line-height:100%;text-align:center;padding-inline:var(--ndw-spacing-2xs);min-width:var(--min-badge-size);max-width:fit-content}.dot{display:block;background-color:var(--ndw-color-primary);border-radius:50%;height:var(--ndw-spacing-2xs);width:var(--ndw-spacing-2xs)}\n"] }]
-        }] });
-const INPUT_CONTAINER_CLASS = 'input-container';
-class BaseAutosuggestOptionComponent {
-    value = input();
-    selectionChange = new EventEmitter();
-    _active = false;
-    _selected = false;
-    get active() {
-        return this._active;
-    }
-    get selected() {
-        return this._selected;
-    }
-    element = inject(ElementRef);
-    changeDetectorRef = inject(ChangeDetectorRef);
-    // This method is used by FocusableOption
-    focus(_origin, options) {
-        const element = this.element.nativeElement;
-        if (typeof element.focus === 'function') {
-            element.focus(options);
-        }
-    }
-    // This method is used by the KeyManager
-    setActiveStyles() {
-        if (!this._active) {
-            this._active = true;
-            this.changeDetectorRef.markForCheck();
-        }
-    }
-    // This method is used by KeyManager
-    setInactiveStyles() {
-        if (this._active) {
-            this._active = false;
-            this.changeDetectorRef.markForCheck();
-        }
-    }
-    select(emitEvent = true) {
-        if (!this._selected) {
-            this._selected = true;
-            this.changeDetectorRef.markForCheck();
-            if (emitEvent) {
-                this.emitSelectionChangeEvent();
-            }
-        }
-    }
-    deselect(emitEvent = true) {
-        if (this._selected) {
-            this._selected = false;
-            this.changeDetectorRef.markForCheck();
-            if (emitEvent) {
-                this.emitSelectionChangeEvent();
-            }
-        }
-    }
-    handleKeydown(event) {
-        if ((event.key === 'Enter' || event.key === 'Space') && !hasModifierKey(event)) {
-            this.selectViaInteraction();
-            event.preventDefault();
-        }
-    }
-    selectViaInteraction() {
-        this._selected = true;
-        this.changeDetectorRef.markForCheck();
-        this.emitSelectionChangeEvent(true);
-    }
-    ngOnDestroy() {
-        this.selectionChange.complete();
-    }
-    getHostElement() {
-        return this.element.nativeElement;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BaseAutosuggestOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: BaseAutosuggestOptionComponent, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BaseAutosuggestOptionComponent, decorators: [{
-            type: Directive
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-badge', template: "@if (value(); as value) {\n  @if (!displayLargeNumbers() && (value < -9 || value > 99)) {\n    <span class=\"dot\"></span>\n  } @else {\n    {{ value }}\n  }\n} @else {\n  {{ value() }}\n}\n@if (ariaLabel()) {\n  <span class=\"sr-only\"> {{ ariaLabel() }}</span>\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";:host{--badge-background-color: initial;--badge-border: initial;--badge-color: initial;--badge-dot-size: initial;--badge-font-size: initial;--badge-min-size: initial;--badge-padding-inline: initial;align-items:center;background-color:var(--badge-background-color);border:var(--badge-border);border-radius:var(--badge-min-size);box-sizing:border-box;color:var(--badge-color);display:flex;font-size:var(--badge-font-size);height:var(--badge-min-size);justify-content:center;letter-spacing:-1px;max-width:fit-content;min-width:var(--badge-min-size);padding-inline:var(--badge-padding-inline);text-align:center}.dot{display:block;background-color:var(--badge-color);border-radius:50%;height:var(--badge-dot-size);width:var(--badge-dot-size)}.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{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;--badge-background-color: var(--ndw-color-primary-050);--badge-border: var(--ndw-border-size-sm) solid var(--ndw-color-primary);--badge-color: var(--ndw-color-primary);--badge-dot-size: var(--ndw-spacing-2xs);--badge-min-size: 1.25rem;--badge-padding-inline: var(--ndw-spacing-2xs)}\n"] }]
         }] });
-class AutocompleteOptionSelectionChange {
-    source;
-    isUserInput;
-    constructor(source, isUserInput = false) {
-        this.source = source;
-        this.isUserInput = isUserInput;
-    }
-}
-class AutosuggestOptionComponent extends BaseAutosuggestOptionComponent {
-    searchTerm = input('');
-    label = input.required();
-    id;
-    get viewValue() {
-        return (this.getHostElement().textContent ?? '').trim();
-    }
-    constructor() {
-        super();
-        this.id = `ndw-option-${crypto.randomUUID()}`;
-    }
-    // getLabel is required in the FocusableOption interface, which is
-    // implemented by BaseAutosuggestOptionComponent
-    getLabel() {
-        return this.viewValue;
-    }
-    emitSelectionChangeEvent(isUserInput = false) {
-        this.selectionChange.emit(new AutocompleteOptionSelectionChange(this, isUserInput));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AutosuggestOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: AutosuggestOptionComponent, isStandalone: true, selector: "ndw-autosuggest-option", inputs: { searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "click": "selectViaInteraction()", "keydown": "handleKeydown($event)" }, properties: { "id": "id", "class.ndw-autosuggest-option--selected": "selected", "class.ndw-autosuggest-option--active": "active", "attr.aria-selected": "selected" }, classAttribute: "ndw-autosuggest-option" }, usesInheritance: true, ngImport: i0, template: "<span class=\"ndw-option-text\" [innerHTML]=\"label() | matchBold: searchTerm()\"></span>\n", styles: [":host{display:block;width:100%;padding:var(--ndw-spacing-xs) var(--ndw-spacing-sm);box-sizing:border-box;color:var(--ndw-color-grey-700);background-color:var(--ndw-color-white);cursor:pointer;text-align:left;font:inherit;font-size:var(--ndw-font-size-sm);transition:background-color var(--ndw-animation-speed-very-fast) ease-in-out}:host.ndw-autosuggest-option--active,:host:hover:not([aria-disabled=true]){background-color:var(--ndw-color-secondary-050)}:host[aria-disabled=true]{-webkit-user-select:none;user-select:none;cursor:default;background-color:var(--ndw-color-grey-100)}:host.ndw-autosuggest-option--add{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;color:var(--ndw-color-link-400)}:host.ndw-autosuggest-option--add .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ndw-spacing-3xs)}:host:not(:last-child){border-bottom:1px solid var(--ndw-color-grey-200)}:host span{word-break:break-word}\n"], dependencies: [{ kind: "pipe", type: MatchBoldPipe, name: "matchBold" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AutosuggestOptionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ndw-autosuggest-option', imports: [MatchBoldPipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        role: 'option',
-                        '[id]': 'id',
-                        class: 'ndw-autosuggest-option',
-                        '[class.ndw-autosuggest-option--selected]': 'selected',
-                        '[class.ndw-autosuggest-option--active]': 'active',
-                        '[attr.aria-selected]': 'selected',
-                        '(click)': 'selectViaInteraction()',
-                        '(keydown)': 'handleKeydown($event)',
-                    }, template: "<span class=\"ndw-option-text\" [innerHTML]=\"label() | matchBold: searchTerm()\"></span>\n", styles: [":host{display:block;width:100%;padding:var(--ndw-spacing-xs) var(--ndw-spacing-sm);box-sizing:border-box;color:var(--ndw-color-grey-700);background-color:var(--ndw-color-white);cursor:pointer;text-align:left;font:inherit;font-size:var(--ndw-font-size-sm);transition:background-color var(--ndw-animation-speed-very-fast) ease-in-out}:host.ndw-autosuggest-option--active,:host:hover:not([aria-disabled=true]){background-color:var(--ndw-color-secondary-050)}:host[aria-disabled=true]{-webkit-user-select:none;user-select:none;cursor:default;background-color:var(--ndw-color-grey-100)}:host.ndw-autosuggest-option--add{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;color:var(--ndw-color-link-400)}:host.ndw-autosuggest-option--add .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ndw-spacing-3xs)}:host:not(:last-child){border-bottom:1px solid var(--ndw-color-grey-200)}:host span{word-break:break-word}\n"] }]
-        }], ctorParameters: () => [] });
-/* eslint max-lines: off */
-// Based on https://github.com/angular/components/tree/main/src/material/autocomplete
-class AutosuggestDirective {
+class AutosuggestDirective extends CoreAutosuggestDirective {
     ndwAutosuggest = input.required();
-    filter = output();
-    placeholder = input('Begin met zoeken...');
-    overlayAttached = false;
-    overlayRef = null;
-    portal;
-    previousValue;
-    closingActionsSubscription;
-    keydownSubscription;
-    canOpenOnNextFocus = true;
-    valueOnAttach = null;
-    valueOnLastKeydown = null;
-    closeKeyEventStream = new Subject();
-    zone = inject(NgZone);
-    element = inject(ElementRef);
-    viewContainerRef = inject(ViewContainerRef);
-    overlay = inject(Overlay);
-    changeDetectorRef = inject(ChangeDetectorRef);
-    document = inject(DOCUMENT);
-    viewportRuler = inject(ViewportRuler);
-    destroyRef = inject(DestroyRef);
-    get panelOpen() {
-        return this.overlayAttached && !!this.autosuggest?.showPanel;
-    }
-    get activeOption() {
-        const keyManager = this.autosuggest?.keyManager;
-        return keyManager?.activeItem ?? null;
-    }
     get autosuggest() {
         return this.ndwAutosuggest();
     }
-    get panelClosingActions() {
-        return merge(this.optionSelections, this.autosuggest.keyManager.tabOut.pipe(filter(() => this.overlayAttached)), this.closeKeyEventStream, this.getOutsideClickStream(), this.overlayRef
-            ? this.overlayRef.detachments().pipe(filter(() => this.overlayAttached))
-            : of()).pipe(map((event) => (event instanceof AutocompleteOptionSelectionChange ? event : null)));
-    }
-    optionSelections = defer(() => {
-        const options = this.autosuggest.items;
-        if (this.autosuggest && options) {
-            return merge(...options.map((option) => option.selectionChange));
-        }
-        return this.zone.onStable.asObservable().pipe(take(1), switchMap(() => this.optionSelections));
-    });
-    ngAfterViewInit() {
-        const window = this.getWindow();
-        if (typeof window !== 'undefined') {
-            this.zone.runOutsideAngular(() => {
-                window.addEventListener('blur', this.windowBlurHandler);
-            });
-        }
-    }
-    ngOnDestroy() {
-        const window = this.getWindow();
-        if (typeof window !== 'undefined') {
-            window.removeEventListener('blur', this.windowBlurHandler);
-        }
-        this.closingActionsSubscription?.unsubscribe();
-        this.keydownSubscription?.unsubscribe();
-        this.closeKeyEventStream.complete();
-        this.destroyPanel();
-    }
-    openPanel(valueOnAttach = this.element.nativeElement.value) {
-        this.attachOverlay(valueOnAttach);
-    }
-    closePanel() {
-        if (!this.overlayAttached) {
-            return;
-        }
-        if (this.panelOpen) {
-            this.autosuggest.closed?.emit();
-        }
-        this.autosuggest.isOpen = false;
-        this.overlayAttached = false;
-        if (this.overlayRef?.hasAttached()) {
-            this.overlayRef.detach();
-            this.closingActionsSubscription?.unsubscribe();
-            this.keydownSubscription?.unsubscribe();
-        }
-        this.changeDetectorRef.detectChanges();
-        // Dispatch an input event to trigger the form-field component change detection.
-        this.element.nativeElement.dispatchEvent(new Event('input'));
-    }
-    handleFocus() {
-        this.filter.emit(this.element.nativeElement.value);
-        if (!this.canOpenOnNextFocus) {
-            this.canOpenOnNextFocus = true;
-            this.blur();
-        }
-        else if (this.canOpen()) {
-            this.previousValue = this.element.nativeElement.value;
-            this.attachOverlay(this.previousValue);
-        }
-    }
-    writeValue(value) {
-        Promise.resolve(null).then(() => {
-            const displayValue = this.getDisplayValue(value);
-            this.updateNativeInputValue(displayValue);
-        });
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    clearValue() {
-        this.writeValue('');
-        this.onChange('');
-    }
-    handleClick() {
-        if (this.canOpen() && !this.panelOpen) {
-            this.openPanel();
-        }
-    }
-    handleKeydown(event) {
-        const code = event.code;
-        if (event.key === 'Escape') {
-            event.preventDefault();
-        }
-        this.valueOnLastKeydown = this.element.nativeElement.value;
-        if (this.activeOption && code === 'Enter' && this.panelOpen) {
-            this.activeOption.selectViaInteraction();
-            this.resetActiveItem();
-            event.preventDefault();
-        }
-        else if (this.autosuggest) {
-            const prevActiveItem = this.autosuggest.keyManager?.activeItem;
-            const isArrowKey = code === 'ArrowUp' || code === 'ArrowDown';
-            if (code === 'Tab' || (isArrowKey && this.panelOpen)) {
-                this.autosuggest.keyManager?.onKeydown(event);
-            }
-            else if (isArrowKey && this.canOpen()) {
-                this.openPanel();
-            }
-            if (isArrowKey || this.autosuggest.keyManager?.activeItem !== prevActiveItem) {
-                this.scrollToOption();
-                if (this.activeOption) {
-                    this.assignOptionValue(this.activeOption.value() ?? null);
-                }
-            }
-        }
-    }
-    handleInput(event) {
-        const target = event.target;
-        let value = target.value;
-        this.filter.emit(value);
-        this.autosuggest.searchTerm.set(value);
-        // Based on `NumberValueAccessor` from forms.
-        if (target.type === 'number') {
-            value = value === '' ? null : parseFloat(value);
-        }
-        if (this.previousValue !== value) {
-            this.previousValue = value;
-            if (!this.autosuggest) {
-                this.onChange(value);
-            }
-            if (!value) {
-                this.clearPreviousSelectedOption(null, true);
-            }
-            if (this.canOpen() && this.document.activeElement === event.target) {
-                const valueOnAttach = this.valueOnLastKeydown ?? this.element.nativeElement.value;
-                this.valueOnLastKeydown = null;
-                this.openPanel(valueOnAttach);
-            }
-        }
-    }
-    setDisabledState(isDisabled) {
-        this.element.nativeElement.disabled = isDisabled;
-    }
-    handlePanelKeydown = (event) => {
-        if ((event.key === 'Escape' && !hasModifierKey(event)) ||
-            (event.key === 'ArrowUp' && hasModifierKey(event, 'altKey'))) {
-            this.closeKeyEventStream.next();
-            this.resetActiveItem();
-            event.stopPropagation();
-            event.preventDefault();
-        }
-    };
-    windowBlurHandler = () => {
-        this.canOpenOnNextFocus =
-            this.document?.activeElement !== this.element.nativeElement || this.panelOpen;
-    };
-    onChange = noop;
-    onTouched = noop;
-    destroyPanel() {
-        if (this.overlayRef) {
-            this.closePanel();
-            this.overlayRef.dispose();
-            this.overlayRef = null;
-        }
-    }
-    attachOverlay(valueOnAttach = this.element.nativeElement.value) {
-        if (!this.autosuggest) {
-            throw Error('Cannot open autosuggest panel because the autosuggest is not defined.');
-        }
-        let overlayRef = this.overlayRef;
-        if (!overlayRef) {
-            this.portal = new TemplatePortal(this.autosuggest.template(), this.viewContainerRef);
-            overlayRef = this.overlay.create(this.getOverlayConfig());
-            this.overlayRef = overlayRef;
-            this.viewportRuler
-                .change()
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(() => {
-                if (this.panelOpen && overlayRef) {
-                    overlayRef.updateSize({ width: this.getHostWidth() });
-                }
-            });
-            this.initKeydownEvents();
-        }
-        if (overlayRef && !overlayRef.hasAttached()) {
-            overlayRef.attach(this.portal);
-            this.valueOnAttach = valueOnAttach;
-            this.closingActionsSubscription = this.subscribeToClosingActions();
-            this.keydownSubscription = overlayRef.keydownEvents().subscribe(this.handlePanelKeydown);
-        }
-        const wasOpen = this.panelOpen;
-        this.autosuggest.setVisibility();
-        this.autosuggest.isOpen = true;
-        this.overlayAttached = true;
-        if (this.panelOpen && wasOpen !== this.panelOpen) {
-            this.autosuggest.opened.emit();
-        }
-    }
-    initKeydownEvents() {
-        this.overlayRef?.keydownEvents()?.subscribe((event) => {
-            if (event.code === 'ArrowUp' && event.altKey) {
-                this.resetActiveItem();
-                this.closeKeyEventStream.next();
-                event.stopPropagation();
-                event.preventDefault();
-                this.blur();
-            }
-        });
-    }
-    getOverlayConfig() {
-        return new OverlayConfig({
-            positionStrategy: this.getOverlayPosition(),
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
-            width: this.getHostWidth(),
-        });
-    }
-    getHostWidth() {
-        return this.bindingElement().getBoundingClientRect().width;
-    }
-    bindingElement() {
-        const element = this.element.nativeElement;
-        const parentElement = element.parentElement;
-        return parentElement?.classList?.contains(INPUT_CONTAINER_CLASS) ? parentElement : element;
-    }
-    getOverlayPosition() {
-        const positions = [
-            new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' }),
-        ];
-        return this.overlay
-            .position()
-            .flexibleConnectedTo(this.bindingElement())
-            .withPositions(positions)
-            .withFlexibleDimensions(false)
-            .withPush(false);
-    }
-    resetActiveItem() {
-        const activeItemIndex = 0;
-        if (this.autosuggest.keyManager) {
-            this.autosuggest.keyManager.setActiveItem(activeItemIndex);
-        }
-    }
-    blur() {
-        this.element.nativeElement.blur();
-    }
-    getOutsideClickStream() {
-        return merge(fromEvent(this.document, 'click'), fromEvent(this.document, 'touchend')).pipe(filter((event) => {
-            const clickTarget = event.target;
-            return (this.overlayAttached &&
-                clickTarget !== this.element.nativeElement &&
-                this.document.activeElement !== this.element.nativeElement &&
-                !!this.overlayRef &&
-                !this.overlayRef.overlayElement.contains(clickTarget));
-        }));
-    }
-    subscribeToClosingActions() {
-        const items = this.autosuggest.items;
-        const firstStable = this.zone.onStable.asObservable().pipe(take(1));
-        const optionChanges = items.changes.pipe(delay(0));
-        return merge(firstStable, optionChanges)
-            .pipe(switchMap(() => {
-            const wasOpen = this.panelOpen;
-            this.resetActiveItem();
-            this.autosuggest.setVisibility();
-            if (this.panelOpen) {
-                this.overlayRef?.updatePosition();
-                if (wasOpen !== this.panelOpen) {
-                    this.autosuggest.opened?.emit();
-                }
-            }
-            return this.panelClosingActions;
-        }), take(1))
-            .subscribe((event) => this.setValueAndClose(event));
-    }
-    setValueAndClose(event) {
-        const toSelect = event ? event.source : null;
-        if (toSelect) {
-            this.clearPreviousSelectedOption(toSelect);
-            this.onChange(toSelect.value());
-            this.assignOptionValue(toSelect.value() ?? null);
-            this.autosuggest.emitSelectEvent(toSelect);
-            this.element.nativeElement.focus();
-        }
-        else if (this.element.nativeElement.value !== this.valueOnAttach) {
-            this.clearPreviousSelectedOption(null);
-            this.assignOptionValue(null);
-            this.onChange(null);
-        }
-        this.closePanel();
-    }
-    assignOptionValue(value) {
-        const toDisplay = this.getDisplayValue(value);
-        if (value == null) {
-            this.clearPreviousSelectedOption(null, false);
-        }
-        this.updateNativeInputValue(toDisplay);
-    }
-    getDisplayValue(value) {
-        if (!value) {
-            return '';
-        }
-        const displayWithFn = this.autosuggest.displayWith();
-        return this.autosuggest && displayWithFn ? displayWithFn(value) : value;
-    }
-    updateNativeInputValue(value) {
-        this.element.nativeElement.value = value ?? '';
-        this.previousValue = value;
-        this.changeDetectorRef.markForCheck();
-    }
-    scrollToOption() {
-        const index = this.autosuggest.keyManager?.activeItemIndex ?? 0;
-        if (index === 0) {
-            this.autosuggest.setScrollTop(0);
-        }
-        else {
-            const newScrollPosition = index * 26;
-            this.autosuggest.setScrollTop(newScrollPosition);
-        }
-    }
-    clearPreviousSelectedOption(skip, emitEvent) {
-        this.onChange(null);
-        this.autosuggest.items?.forEach((option) => {
-            if (option !== skip && option.selected) {
-                option.deselect(emitEvent);
-            }
-        });
-    }
-    canOpen() {
-        const element = this.element.nativeElement;
-        return !element.readOnly && !element.disabled;
-    }
-    getWindow() {
-        return this.document?.defaultView ?? window;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AutosuggestDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: AutosuggestDirective, isStandalone: true, selector: "input[ndwAutosuggest], textarea[ndwAutosuggest]", inputs: { ndwAutosuggest: { classPropertyName: "ndwAutosuggest", publicName: "ndwAutosuggest", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filter: "filter" }, host: { listeners: { "focus": "handleFocus()", "blur": "onTouched()", "input": "handleInput($event)", "keydown": "handleKeydown($event)", "click": "handleClick()" }, properties: { "attr.role": "\"combobox\"", "attr.autocomplete": "\"off\"", "attr.aria-autocomplete": "\"list\"", "attr.aria-activedescendant": "(panelOpen && activeOption) ? activeOption.id : null", "attr.aria-expanded": "panelOpen.toString()", "attr.aria-owns": "!panelOpen ? null : ndwAutosuggest()?.id", "attr.aria-haspopup": "\"true\"", "placeholder": "placeholder()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AutosuggestDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: AutosuggestDirective, isStandalone: true, selector: "input[ndwAutosuggest], textarea[ndwAutosuggest]", inputs: { ndwAutosuggest: { classPropertyName: "ndwAutosuggest", publicName: "ndwAutosuggest", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "combobox", "aria-autocomplete": "list", "aria-haspopup": "true", "autocomplete": "off" }, listeners: { "blur": "onTouched()", "click": "handleClick()", "focus": "handleFocus()", "input": "handleInput($event)", "keydown": "handleKeydown($event)" }, properties: { "attr.aria-activedescendant": "(panelOpen && activeOption) ? activeOption.id : null", "attr.aria-expanded": "panelOpen.toString()", "attr.aria-owns": "!panelOpen ? null : ndwAutosuggest()?.id" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AutosuggestDirective),
                 multi: true,
             },
-        ], exportAs: ["ndwAutosuggestTrigger"], ngImport: i0 });
+        ], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AutosuggestDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'input[ndwAutosuggest], textarea[ndwAutosuggest]',
-                    exportAs: 'ndwAutosuggestTrigger',
                     host: {
-                        '[attr.role]': '"combobox"',
-                        '[attr.autocomplete]': '"off"',
-                        '[attr.aria-autocomplete]': '"list"',
+                        role: 'combobox',
+                        'aria-autocomplete': 'list',
+                        'aria-haspopup': 'true',
+                        autocomplete: 'off',
                         '[attr.aria-activedescendant]': '(panelOpen && activeOption) ? activeOption.id : null',
                         '[attr.aria-expanded]': 'panelOpen.toString()',
                         '[attr.aria-owns]': '!panelOpen ? null : ndwAutosuggest()?.id',
-                        '[attr.aria-haspopup]': '"true"',
-                        '[placeholder]': 'placeholder()',
-                        '(focus)': 'handleFocus()',
                         '(blur)': 'onTouched()',
+                        '(click)': 'handleClick()',
+                        '(focus)': 'handleFocus()',
                         '(input)': 'handleInput($event)',
                         '(keydown)': 'handleKeydown($event)',
-                        '(click)': 'handleClick()',
                     },
                     providers: [
                         {
@@ -561,6 +78,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                             multi: true,
                         },
                     ],
+                    selector: 'input[ndwAutosuggest], textarea[ndwAutosuggest]',
                 }]
         }] });
@@ -612,106 +130,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], selector: 'ndw-action-icon', template: "<button\n  class=\"ndw-action-icon ndw-action-icon--{{ variant() }}\"\n  [type]=\"buttonType()\"\n  [disabled]=\"disabled()\"\n  (click)=\"clicked.emit()\"\n>\n  <span class=\"sr-only\">{{ ariaLabel() }}</span>\n  <ndw-icon [size]=\"size()\"><ng-content /></ndw-icon>\n</button>\n", styles: [":host{display:inline-block}.ndw-action-icon{position:relative;box-sizing:border-box;display:inline-block;padding:0;border:0;border-radius:var(--ndw-border-radius-md);background-color:transparent;transition:background-color .15s ease-in-out}.ndw-action-icon--primary{color:var(--ndw-color-primary)}.ndw-action-icon--link{color:var(--ndw-color-link-400)}.ndw-action-icon--grey{color:var(--ndw-color-grey-400)}.ndw-action-icon--white{color:var(--ndw-color-white)}.ndw-action-icon:disabled{opacity:.5;pointer-events:none}.ndw-action-icon:not(:disabled):hover{background-color:var(--ndw-alpha-black-007)}.ndw-action-icon:not(:disabled):active,.ndw-action-icon:not(:disabled):focus,.ndw-action-icon:not(:disabled):focus-visible{background-color:var(--ndw-alpha-black-015)}.ndw-action-icon:not(:disabled):focus-visible{outline-color:var(--ndw-color-secondary-500)}.ndw-action-icon ndw-icon{padding:var(--ndw-spacing-2xs);vertical-align:middle}\n"] }]
         }] });
-class AutosuggestAddOptionComponent extends BaseAutosuggestOptionComponent {
-    addOption = output();
-    emitSelectionChangeEvent(isUserInput = false) {
-        this.addOption.emit(this.value());
-        this.selectionChange.emit(new AutocompleteOptionSelectionChange(this, isUserInput));
-    }
+class AutosuggestOptionComponent extends CoreAutosuggestOptionComponent {
+    icon = input();
+    image = input();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AutosuggestOptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: AutosuggestOptionComponent, isStandalone: true, selector: "ndw-autosuggest-option", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "click": "selectViaInteraction()", "keydown": "handleKeydown($event)" }, properties: { "attr.aria-selected": "selected()", "class.ndw-autosuggest-option--active": "active()", "class.ndw-autosuggest-option--selected": "selected()", "id": "id" }, classAttribute: "ndw-autosuggest-option" }, usesInheritance: true, ngImport: i0, template: "@if (icon(); as icon) {\n  <ndw-icon>{{ icon }}</ndw-icon>\n}\n@if (image(); as image) {\n  <img [alt]=\"image.alt\" [src]=\"image.src\" />\n}\n<span class=\"ndw-option-text\" [innerHTML]=\"label() | matchBold: searchTerm()\"></span>\n", styles: [":host{align-items:center;box-sizing:border-box;display:flex;gap:var(--ndw-spacing-xs);padding:var(--ndw-spacing-xs) var(--ndw-spacing-sm);width:100%;color:var(--ndw-color-grey-700);background-color:var(--ndw-color-white);cursor:pointer;text-align:left;font:inherit;font-size:var(--ndw-font-size-sm);transition:background-color var(--ndw-animation-speed-very-fast) ease-in-out}:host img{width:var(--ndw-spacing-lg)}:host.ndw-autosuggest-option--active,:host:hover:not([aria-disabled=true]){background-color:var(--ndw-color-secondary-050)}:host[aria-disabled=true]{-webkit-user-select:none;user-select:none;cursor:default;background-color:var(--ndw-color-grey-100)}:host.ndw-autosuggest-option--add{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;color:var(--ndw-color-link-400)}:host.ndw-autosuggest-option--add .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ndw-spacing-3xs)}:host:not(:last-child){border-bottom:1px solid var(--ndw-color-grey-200)}:host span{word-break:break-word}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "pipe", type: MatchBoldPipe, name: "matchBold" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AutosuggestOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndw-autosuggest-option', imports: [IconComponent, MatchBoldPipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ndw-autosuggest-option',
+                        role: 'option',
+                        '[attr.aria-selected]': 'selected()',
+                        '[class.ndw-autosuggest-option--active]': 'active()',
+                        '[class.ndw-autosuggest-option--selected]': 'selected()',
+                        '[id]': 'id',
+                        '(click)': 'selectViaInteraction()',
+                        '(keydown)': 'handleKeydown($event)',
+                    }, template: "@if (icon(); as icon) {\n  <ndw-icon>{{ icon }}</ndw-icon>\n}\n@if (image(); as image) {\n  <img [alt]=\"image.alt\" [src]=\"image.src\" />\n}\n<span class=\"ndw-option-text\" [innerHTML]=\"label() | matchBold: searchTerm()\"></span>\n", styles: [":host{align-items:center;box-sizing:border-box;display:flex;gap:var(--ndw-spacing-xs);padding:var(--ndw-spacing-xs) var(--ndw-spacing-sm);width:100%;color:var(--ndw-color-grey-700);background-color:var(--ndw-color-white);cursor:pointer;text-align:left;font:inherit;font-size:var(--ndw-font-size-sm);transition:background-color var(--ndw-animation-speed-very-fast) ease-in-out}:host img{width:var(--ndw-spacing-lg)}:host.ndw-autosuggest-option--active,:host:hover:not([aria-disabled=true]){background-color:var(--ndw-color-secondary-050)}:host[aria-disabled=true]{-webkit-user-select:none;user-select:none;cursor:default;background-color:var(--ndw-color-grey-100)}:host.ndw-autosuggest-option--add{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;color:var(--ndw-color-link-400)}:host.ndw-autosuggest-option--add .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ndw-spacing-3xs)}:host:not(:last-child){border-bottom:1px solid var(--ndw-color-grey-200)}:host span{word-break:break-word}\n"] }]
+        }] });
+class AutosuggestAddOptionComponent extends CoreAutosuggestAddOptionComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AutosuggestAddOptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: AutosuggestAddOptionComponent, isStandalone: true, selector: "ndw-autosuggest-add-option", outputs: { addOption: "addOption" }, host: { attributes: { "role": "option" }, listeners: { "click": "selectViaInteraction()", "keydown": "handleKeydown($event)" }, properties: { "class.ndw-autosuggest-option--active": "active", "class.ndw-autosuggest-option--selected": "selected", "attr.aria-selected": "selected" }, classAttribute: "ndw-autosuggest-option ndw-autosuggest-option--add" }, usesInheritance: true, ngImport: i0, template: "<ndw-icon [size]=\"'sm'\">add</ndw-icon> Voeg <span class=\"truncate\">'{{ value() }}'</span> toe\n", styles: [":host{display:block;width:100%;padding:var(--ndw-spacing-xs) var(--ndw-spacing-sm);box-sizing:border-box;color:var(--ndw-color-grey-700);background-color:var(--ndw-color-white);cursor:pointer;text-align:left;font:inherit;font-size:var(--ndw-font-size-sm);transition:background-color var(--ndw-animation-speed-very-fast) ease-in-out}:host.ndw-autosuggest-option--active,:host:hover:not([aria-disabled=true]){background-color:var(--ndw-color-secondary-050)}:host[aria-disabled=true]{-webkit-user-select:none;user-select:none;cursor:default;background-color:var(--ndw-color-grey-100)}:host.ndw-autosuggest-option--add{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;color:var(--ndw-color-link-400)}:host.ndw-autosuggest-option--add .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ndw-spacing-3xs)}:host:not(:last-child){border-bottom:1px solid var(--ndw-color-grey-200)}:host span{word-break:break-word}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: AutosuggestAddOptionComponent, isStandalone: true, selector: "ndw-autosuggest-add-option", host: { attributes: { "role": "option" }, listeners: { "click": "selectViaInteraction()", "keydown": "handleKeydown($event)" }, properties: { "attr.aria-selected": "selected()", "class.ndw-autosuggest-option--active": "active()", "class.ndw-autosuggest-option--selected": "selected()" }, classAttribute: "ndw-autosuggest-option ndw-autosuggest-option--add" }, usesInheritance: true, ngImport: i0, template: "<ndw-icon [size]=\"'sm'\">add</ndw-icon> Voeg <span class=\"truncate\">'{{ value().label }}'</span> toe\n", styles: [":host{align-items:center;box-sizing:border-box;display:flex;gap:var(--ndw-spacing-xs);padding:var(--ndw-spacing-xs) var(--ndw-spacing-sm);width:100%;color:var(--ndw-color-grey-700);background-color:var(--ndw-color-white);cursor:pointer;text-align:left;font:inherit;font-size:var(--ndw-font-size-sm);transition:background-color var(--ndw-animation-speed-very-fast) ease-in-out}:host img{width:var(--ndw-spacing-lg)}:host.ndw-autosuggest-option--active,:host:hover:not([aria-disabled=true]){background-color:var(--ndw-color-secondary-050)}:host[aria-disabled=true]{-webkit-user-select:none;user-select:none;cursor:default;background-color:var(--ndw-color-grey-100)}:host.ndw-autosuggest-option--add{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;color:var(--ndw-color-link-400)}:host.ndw-autosuggest-option--add .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ndw-spacing-3xs)}:host:not(:last-child){border-bottom:1px solid var(--ndw-color-grey-200)}:host span{word-break:break-word}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AutosuggestAddOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndw-autosuggest-add-option', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], host: {
-                        role: 'option',
                         class: 'ndw-autosuggest-option ndw-autosuggest-option--add',
-                        '[class.ndw-autosuggest-option--active]': 'active',
-                        '[class.ndw-autosuggest-option--selected]': 'selected',
-                        '[attr.aria-selected]': 'selected',
+                        role: 'option',
+                        '[attr.aria-selected]': 'selected()',
+                        '[class.ndw-autosuggest-option--active]': 'active()',
+                        '[class.ndw-autosuggest-option--selected]': 'selected()',
                         '(click)': 'selectViaInteraction()',
                         '(keydown)': 'handleKeydown($event)',
-                    }, template: "<ndw-icon [size]=\"'sm'\">add</ndw-icon> Voeg <span class=\"truncate\">'{{ value() }}'</span> toe\n", styles: [":host{display:block;width:100%;padding:var(--ndw-spacing-xs) var(--ndw-spacing-sm);box-sizing:border-box;color:var(--ndw-color-grey-700);background-color:var(--ndw-color-white);cursor:pointer;text-align:left;font:inherit;font-size:var(--ndw-font-size-sm);transition:background-color var(--ndw-animation-speed-very-fast) ease-in-out}:host.ndw-autosuggest-option--active,:host:hover:not([aria-disabled=true]){background-color:var(--ndw-color-secondary-050)}:host[aria-disabled=true]{-webkit-user-select:none;user-select:none;cursor:default;background-color:var(--ndw-color-grey-100)}:host.ndw-autosuggest-option--add{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;color:var(--ndw-color-link-400)}:host.ndw-autosuggest-option--add .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ndw-spacing-3xs)}:host:not(:last-child){border-bottom:1px solid var(--ndw-color-grey-200)}:host span{word-break:break-word}\n"] }]
-        }] });
-const DEFAULTMAXRESULTS = 100;
-const DEFAULTNORESULTTEXT = 'Geen resultaten gevonden. Probeer een andere zoekterm.';
-class AutosuggestPanelComponent {
-    // Inputs
-    suggestions = input([]);
-    enableAddOption = input(false);
-    maxResults = input(DEFAULTMAXRESULTS);
-    noResultText = input(DEFAULTNORESULTTEXT);
-    displayWith = input();
-    // Outputs
-    opened = output();
-    closed = output();
-    optionSelected = output();
-    addOption = output();
-    // View References
-    items;
-    template = viewChild.required(TemplateRef);
-    panel = viewChild.required('panel');
-    // Variables & Signals
-    searchTerm = signal('');
-    slicedOptions = computed(() => this.suggestions().slice(0, this.maxResults()));
-    hasMoreResults = computed(() => this.suggestions().length > this.maxResults());
-    numberOfLeftOverResults = computed(() => this.suggestions().length - this.maxResults());
-    keyManager;
-    showPanel = false;
-    id;
-    isOpen = false;
-    changeDetectorRef = inject(ChangeDetectorRef);
-    constructor() {
-        this.id = `ndw-autosuggest-${crypto.randomUUID()}`;
-    }
-    ngAfterViewInit() {
-        this.keyManager = new ActiveDescendantKeyManager(this.items)
-            .withPageUpDown()
-            .withWrap()
-            .withTypeAhead();
-        this.setVisibility();
-    }
-    ngOnDestroy() {
-        this.keyManager?.destroy();
-    }
-    // Methods
-    getLabelOption(option) {
-        const displayFn = this.displayWith();
-        return displayFn ? displayFn(option) : option;
-    }
-    setScrollTop(scrollTop) {
-        const panel = this.panel();
-        if (panel) {
-            panel.nativeElement.scrollTop = scrollTop;
-        }
-    }
-    setVisibility() {
-        this.showPanel = !!this.items?.length;
-        this.changeDetectorRef.markForCheck();
-    }
-    emitSelectEvent(option) {
-        this.optionSelected.emit(option.value() ?? null);
-    }
-    addNewOption(value) {
-        this.optionSelected.emit(value);
-        this.addOption.emit(value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AutosuggestPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: AutosuggestPanelComponent, isStandalone: true, selector: "ndw-autosuggest", inputs: { suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, enableAddOption: { classPropertyName: "enableAddOption", publicName: "enableAddOption", isSignal: true, isRequired: false, transformFunction: null }, maxResults: { classPropertyName: "maxResults", publicName: "maxResults", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", optionSelected: "optionSelected", addOption: "addOption" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "items", predicate: ["option"], descendants: true }], exportAs: ["apAutocomplete"], ngImport: i0, template: "<ng-template>\n  @if (suggestions().length === 0 && !enableAddOption()) {\n    <div class=\"ndw-autosuggest-panel\">\n      <ng-container *ngTemplateOutlet=\"emptyResults\"></ng-container>\n    </div>\n  } @else {\n    <datalist #panel class=\"ndw-autosuggest-panel\">\n      @for (option of slicedOptions(); track option) {\n        <ndw-autosuggest-option\n          #option\n          [value]=\"option\"\n          [label]=\"getLabelOption(option)\"\n          [searchTerm]=\"searchTerm()\"\n        />\n      }\n      @if (enableAddOption()) {\n        @if (!!searchTerm().trim()) {\n          <ndw-autosuggest-add-option\n            #option\n            [value]=\"searchTerm()\"\n            (addOption)=\"addNewOption($event)\"\n          />\n        } @else if (!suggestions().length) {\n          <ng-container *ngTemplateOutlet=\"emptyResults\"></ng-container>\n        }\n      }\n      @if (hasMoreResults()) {\n        <p class=\"ndw-autosuggest-panel__more-results\">\n          Er zijn nog {{ numberOfLeftOverResults() }} niet-getoonde resultaten, maak je zoekopdracht\n          specifieker\n        </p>\n      }\n    </datalist>\n  }\n</ng-template>\n\n<ng-template #emptyResults>\n  <div class=\"ndw-autosuggest-panel__empty\">\n    <ndw-icon>sentiment_dissatisfied</ndw-icon>\n    {{ noResultText() }}\n  </div>\n</ng-template>\n", styles: [".ndw-autosuggest-panel{--dropdown-line-height: 26px;--dropdown-max-line-items: 7;--dropdown-max-height: calc(var(--dropdown-line-height) * var(--dropdown-max-line-items));display:block;overflow:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;max-height:var(--dropdown-max-height);width:100%;border:1px solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-sm);padding:0;margin-top:2px;background-color:var(--ndw-color-white);box-shadow:var(--ndw-elevation-popover)}.ndw-autosuggest-panel>ndw-autosuggest-option:not(:last-child){border-bottom:1px solid var(--ndw-color-grey-200)}.ndw-autosuggest-panel__more-results{font-size:var(--ndw-font-size-sm);color:var(--ndw-color-grey-400);padding:var(--ndw-spacing-sm) var(--ndw-spacing-md);text-align:center}.ndw-autosuggest-panel__empty{display:grid;justify-items:center;margin:auto;padding:var(--ndw-spacing-sm) var(--ndw-spacing-md);gap:var(--ndw-spacing-xs);max-width:300px;box-sizing:border-box;font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}\n"], dependencies: [{ kind: "component", type: AutosuggestOptionComponent, selector: "ndw-autosuggest-option", inputs: ["searchTerm", "label"] }, { kind: "component", type: AutosuggestAddOptionComponent, selector: "ndw-autosuggest-add-option", outputs: ["addOption"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+                    }, template: "<ndw-icon [size]=\"'sm'\">add</ndw-icon> Voeg <span class=\"truncate\">'{{ value().label }}'</span> toe\n", styles: [":host{align-items:center;box-sizing:border-box;display:flex;gap:var(--ndw-spacing-xs);padding:var(--ndw-spacing-xs) var(--ndw-spacing-sm);width:100%;color:var(--ndw-color-grey-700);background-color:var(--ndw-color-white);cursor:pointer;text-align:left;font:inherit;font-size:var(--ndw-font-size-sm);transition:background-color var(--ndw-animation-speed-very-fast) ease-in-out}:host img{width:var(--ndw-spacing-lg)}:host.ndw-autosuggest-option--active,:host:hover:not([aria-disabled=true]){background-color:var(--ndw-color-secondary-050)}:host[aria-disabled=true]{-webkit-user-select:none;user-select:none;cursor:default;background-color:var(--ndw-color-grey-100)}:host.ndw-autosuggest-option--add{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;color:var(--ndw-color-link-400)}:host.ndw-autosuggest-option--add .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ndw-spacing-3xs)}:host:not(:last-child){border-bottom:1px solid var(--ndw-color-grey-200)}:host span{word-break:break-word}\n"] }]
+        }] });
+class AutosuggestPanelComponent extends CoreAutosuggestPanelComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AutosuggestPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: AutosuggestPanelComponent, isStandalone: true, selector: "ndw-autosuggest", usesInheritance: true, ngImport: i0, template: "<ng-template>\n  @if (suggestions().length === 0 && !enableAddOption()) {\n    <div class=\"ndw-autosuggest-panel\">\n      <ng-container *ngTemplateOutlet=\"emptyResults\"></ng-container>\n    </div>\n  } @else {\n    <datalist #panel class=\"ndw-autosuggest-panel\">\n      @for (option of slicedOptions(); track option) {\n        <ndw-autosuggest-option\n          #option\n          [icon]=\"option.icon\"\n          [image]=\"option.image\"\n          [label]=\"option.label\"\n          [value]=\"option\"\n          [searchTerm]=\"searchTerm()\"\n        />\n      }\n      @if (enableAddOption()) {\n        @if (!!searchTerm().trim()) {\n          <ndw-autosuggest-add-option\n            #option\n            [value]=\"createNewOption(searchTerm())\"\n            (addOption)=\"addNewOption($event)\"\n          />\n        } @else if (!suggestions().length) {\n          <ng-container *ngTemplateOutlet=\"emptyResults\"></ng-container>\n        }\n      }\n      @if (hasMoreResults()) {\n        <p class=\"ndw-autosuggest-panel__more-results\">\n          {{ hiddenResultsText() }}\n        </p>\n      }\n    </datalist>\n  }\n</ng-template>\n\n<ng-template #emptyResults>\n  <div class=\"ndw-autosuggest-panel__empty\">\n    <ndw-icon>sentiment_dissatisfied</ndw-icon>\n    {{ noResultText() }}\n  </div>\n</ng-template>\n", styles: [".ndw-autosuggest-panel{--dropdown-line-height: 26px;--dropdown-max-line-items: 7;--dropdown-max-height: calc(var(--dropdown-line-height) * var(--dropdown-max-line-items));display:block;overflow:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;max-height:var(--dropdown-max-height);width:100%;border:1px solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-sm);padding:0;margin-top:2px;background-color:var(--ndw-color-white);box-shadow:var(--ndw-elevation-popover)}.ndw-autosuggest-panel>ndw-autosuggest-option:not(:last-child){border-bottom:1px solid var(--ndw-color-grey-200)}.ndw-autosuggest-panel__more-results{font-size:var(--ndw-font-size-sm);color:var(--ndw-color-grey-400);padding:var(--ndw-spacing-sm) var(--ndw-spacing-md);text-align:center}.ndw-autosuggest-panel__empty{display:grid;justify-items:center;margin:auto;padding:var(--ndw-spacing-sm) var(--ndw-spacing-md);gap:var(--ndw-spacing-xs);max-width:300px;box-sizing:border-box;font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}\n"], dependencies: [{ kind: "component", type: AutosuggestAddOptionComponent, selector: "ndw-autosuggest-add-option" }, { kind: "component", type: AutosuggestOptionComponent, selector: "ndw-autosuggest-option", inputs: ["icon", "image"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AutosuggestPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndw-autosuggest', imports: [
-                        AutosuggestOptionComponent,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         AutosuggestAddOptionComponent,
+                        AutosuggestOptionComponent,
                         IconComponent,
                         NgTemplateOutlet,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'apAutocomplete', template: "<ng-template>\n  @if (suggestions().length === 0 && !enableAddOption()) {\n    <div class=\"ndw-autosuggest-panel\">\n      <ng-container *ngTemplateOutlet=\"emptyResults\"></ng-container>\n    </div>\n  } @else {\n    <datalist #panel class=\"ndw-autosuggest-panel\">\n      @for (option of slicedOptions(); track option) {\n        <ndw-autosuggest-option\n          #option\n          [value]=\"option\"\n          [label]=\"getLabelOption(option)\"\n          [searchTerm]=\"searchTerm()\"\n        />\n      }\n      @if (enableAddOption()) {\n        @if (!!searchTerm().trim()) {\n          <ndw-autosuggest-add-option\n            #option\n            [value]=\"searchTerm()\"\n            (addOption)=\"addNewOption($event)\"\n          />\n        } @else if (!suggestions().length) {\n          <ng-container *ngTemplateOutlet=\"emptyResults\"></ng-container>\n        }\n      }\n      @if (hasMoreResults()) {\n        <p class=\"ndw-autosuggest-panel__more-results\">\n          Er zijn nog {{ numberOfLeftOverResults() }} niet-getoonde resultaten, maak je zoekopdracht\n          specifieker\n        </p>\n      }\n    </datalist>\n  }\n</ng-template>\n\n<ng-template #emptyResults>\n  <div class=\"ndw-autosuggest-panel__empty\">\n    <ndw-icon>sentiment_dissatisfied</ndw-icon>\n    {{ noResultText() }}\n  </div>\n</ng-template>\n", styles: [".ndw-autosuggest-panel{--dropdown-line-height: 26px;--dropdown-max-line-items: 7;--dropdown-max-height: calc(var(--dropdown-line-height) * var(--dropdown-max-line-items));display:block;overflow:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;max-height:var(--dropdown-max-height);width:100%;border:1px solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-sm);padding:0;margin-top:2px;background-color:var(--ndw-color-white);box-shadow:var(--ndw-elevation-popover)}.ndw-autosuggest-panel>ndw-autosuggest-option:not(:last-child){border-bottom:1px solid var(--ndw-color-grey-200)}.ndw-autosuggest-panel__more-results{font-size:var(--ndw-font-size-sm);color:var(--ndw-color-grey-400);padding:var(--ndw-spacing-sm) var(--ndw-spacing-md);text-align:center}.ndw-autosuggest-panel__empty{display:grid;justify-items:center;margin:auto;padding:var(--ndw-spacing-sm) var(--ndw-spacing-md);gap:var(--ndw-spacing-xs);max-width:300px;box-sizing:border-box;font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{
-                type: ViewChildren,
-                args: ['option']
-            }] } });
+                    ], selector: 'ndw-autosuggest', template: "<ng-template>\n  @if (suggestions().length === 0 && !enableAddOption()) {\n    <div class=\"ndw-autosuggest-panel\">\n      <ng-container *ngTemplateOutlet=\"emptyResults\"></ng-container>\n    </div>\n  } @else {\n    <datalist #panel class=\"ndw-autosuggest-panel\">\n      @for (option of slicedOptions(); track option) {\n        <ndw-autosuggest-option\n          #option\n          [icon]=\"option.icon\"\n          [image]=\"option.image\"\n          [label]=\"option.label\"\n          [value]=\"option\"\n          [searchTerm]=\"searchTerm()\"\n        />\n      }\n      @if (enableAddOption()) {\n        @if (!!searchTerm().trim()) {\n          <ndw-autosuggest-add-option\n            #option\n            [value]=\"createNewOption(searchTerm())\"\n            (addOption)=\"addNewOption($event)\"\n          />\n        } @else if (!suggestions().length) {\n          <ng-container *ngTemplateOutlet=\"emptyResults\"></ng-container>\n        }\n      }\n      @if (hasMoreResults()) {\n        <p class=\"ndw-autosuggest-panel__more-results\">\n          {{ hiddenResultsText() }}\n        </p>\n      }\n    </datalist>\n  }\n</ng-template>\n\n<ng-template #emptyResults>\n  <div class=\"ndw-autosuggest-panel__empty\">\n    <ndw-icon>sentiment_dissatisfied</ndw-icon>\n    {{ noResultText() }}\n  </div>\n</ng-template>\n", styles: [".ndw-autosuggest-panel{--dropdown-line-height: 26px;--dropdown-max-line-items: 7;--dropdown-max-height: calc(var(--dropdown-line-height) * var(--dropdown-max-line-items));display:block;overflow:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;max-height:var(--dropdown-max-height);width:100%;border:1px solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-sm);padding:0;margin-top:2px;background-color:var(--ndw-color-white);box-shadow:var(--ndw-elevation-popover)}.ndw-autosuggest-panel>ndw-autosuggest-option:not(:last-child){border-bottom:1px solid var(--ndw-color-grey-200)}.ndw-autosuggest-panel__more-results{font-size:var(--ndw-font-size-sm);color:var(--ndw-color-grey-400);padding:var(--ndw-spacing-sm) var(--ndw-spacing-md);text-align:center}.ndw-autosuggest-panel__empty{display:grid;justify-items:center;margin:auto;padding:var(--ndw-spacing-sm) var(--ndw-spacing-md);gap:var(--ndw-spacing-xs);max-width:300px;box-sizing:border-box;font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}\n"] }]
+        }] });
 class CheckboxComponent {
     checked = model(false);
@@ -1137,6 +605,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [InputButtonComponent], selector: 'ndw-clear-search-button', template: "@if (inputValue() !== '') {\n  <ndw-input-button [alternative]=\"true\" (buttonClicked)=\"clear()\">close</ndw-input-button>\n}\n", styles: [":host:empty{display:none}\n"] }]
         }] });
+const INPUT_CONTAINER_CLASS = 'input-container';
 var FormFieldElement;
 (function (FormFieldElement) {
     FormFieldElement["Dropdown"] = "ndw-dropdown";
@@ -1360,8 +830,9 @@ class PopoverTriggerDirective {
         this.overlayRef?.dispose();
     }
     getPopoverPosition(popoverPosition) {
+        let positions;
         if (popoverPosition === 'overTriggerButton') {
-            return [
+            positions = [
                 {
                     originX: 'start',
                     originY: 'bottom',
@@ -1392,39 +863,49 @@ class PopoverTriggerDirective {
                 },
             ];
         }
+        else {
+            positions = [
+                {
+                    originX: 'start',
+                    originY: 'bottom',
+                    overlayX: 'start',
+                    overlayY: 'top',
+                    offsetY: 4,
+                    panelClass: 'ndw-popover-panel',
+                },
+                {
+                    originX: 'end',
+                    originY: 'bottom',
+                    overlayX: 'end',
+                    overlayY: 'top',
+                    offsetY: 4,
+                    panelClass: 'ndw-popover-panel',
+                },
+                {
+                    originX: 'start',
+                    originY: 'top',
+                    overlayX: 'start',
+                    overlayY: 'bottom',
+                    offsetY: -4,
+                    panelClass: 'ndw-popover-panel',
+                },
+                {
+                    originX: 'end',
+                    originY: 'top',
+                    overlayX: 'end',
+                    overlayY: 'bottom',
+                    offsetY: -4,
+                    panelClass: 'ndw-popover-panel',
+                },
+            ];
+        }
         return [
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-                offsetY: 4,
-                panelClass: 'ndw-popover-panel',
-            },
-            {
-                originX: 'end',
-                originY: 'bottom',
-                overlayX: 'end',
-                overlayY: 'top',
-                offsetY: 4,
-                panelClass: 'ndw-popover-panel',
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-                offsetY: -4,
-                panelClass: 'ndw-popover-panel',
-            },
-            {
-                originX: 'end',
-                originY: 'top',
-                overlayX: 'end',
-                overlayY: 'bottom',
-                offsetY: -4,
-                panelClass: 'ndw-popover-panel',
-            },
+            ...positions,
+            ...positions.map((position) => ({
+                ...position,
+                overlayX: 'center',
+                overlayY: 'center',
+            })),
         ];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -1858,9 +1339,9 @@ class RadioButtonComponent {
     disabled = model(false);
     error = input(false);
     success = input(false);
-    name = model('');
     required = input(false);
     value = model();
+    name = signal(undefined);
     uuid = crypto.randomUUID();
     onInputChange(event) {
         const input = event.target;
@@ -1879,7 +1360,7 @@ class RadioButtonComponent {
         this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: RadioButtonComponent, isStandalone: true, selector: "ndw-radio-button", inputs: { checked: { classPropertyName: "checked", publicName: "checked", 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", name: "nameChange", value: "valueChange" }, host: { properties: { "class.checked": "checked()", "class.disabled": "disabled()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: RadioButtonComponent, isStandalone: true, selector: "ndw-radio-button", inputs: { checked: { classPropertyName: "checked", publicName: "checked", 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", value: "valueChange" }, host: { properties: { "class.checked": "checked()", "class.disabled": "disabled()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: RadioButtonComponent,
@@ -1906,8 +1387,9 @@ class RadioGroupComponent {
     uuid = crypto.randomUUID();
     onChange = noop;
     ngAfterContentInit() {
-        this.setRadioButtonsName();
-        this.handleCheckedChange();
+        const radioButtons = [...this.radioButtons()];
+        setRadioItemsName(radioButtons, this.uuid);
+        checkRadioItems(radioButtons, this.onChange);
     }
     writeValue(value) {
         this.radioButtons().forEach((radio) => {
@@ -1918,31 +1400,11 @@ class RadioGroupComponent {
         this.onChange = fn;
     }
     registerOnTouched() {
-        // Not implemented
+        // noop
     }
     setDisabledState(isDisabled) {
         this.radioButtons().forEach((radio) => radio.disabled.set(isDisabled));
     }
-    setRadioButtonsName() {
-        this.radioButtons().forEach((radio) => {
-            radio.name.set(this.uuid);
-        });
-    }
-    handleCheckedChange() {
-        this.radioButtons().forEach((radio) => {
-            radio.checked.subscribe((checked) => {
-                if (!checked) {
-                    return;
-                }
-                this.radioButtons().forEach((otherRadio) => {
-                    if (otherRadio !== radio) {
-                        otherRadio.checked.set(false);
-                    }
-                });
-                this.onChange(radio.value());
-            });
-        });
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.7", type: RadioGroupComponent, isStandalone: true, selector: "ndw-radio-group", host: { attributes: { "role": "radiogroup" } }, providers: [
             {
@@ -2156,6 +1618,7 @@ class ListItemComponent {
     buttonIcon = input();
     buttonLabel = input();
     checkable = input(false);
+    checkType = input('checkbox');
     collapsible = input(false);
     disabled = input(false);
     indented = input(false);
@@ -2168,12 +1631,22 @@ class ListItemComponent {
     buttonClicked = output();
     checked = model(false);
     expanded = model(false);
+    radioButton = viewChild(RadioButtonComponent);
+    name = signal(undefined);
     actionable = computed(() => this.checkable() || this.collapsible());
+    constructor() {
+        effect(() => {
+            const name = this.name();
+            if (name) {
+                this.radioButton()?.name.set(name);
+            }
+        });
+    }
     onButtonClick(event) {
         event.stopPropagation();
         this.buttonClicked.emit();
     }
-    onCheckboxClick(event) {
+    onCheckClick(event) {
         event.stopPropagation();
     }
     onListItemSelect() {
@@ -2192,14 +1665,21 @@ class ListItemComponent {
         this.expanded.update((expanded) => !expanded);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ListItemComponent, isStandalone: true, selector: "ndw-list-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badgeValue: { classPropertyName: "badgeValue", publicName: "badgeValue", isSignal: true, isRequired: false, transformFunction: null }, buttonIcon: { classPropertyName: "buttonIcon", publicName: "buttonIcon", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indented: { classPropertyName: "indented", publicName: "indented", isSignal: true, isRequired: false, transformFunction: null }, pillColor: { classPropertyName: "pillColor", publicName: "pillColor", isSignal: true, isRequired: false, transformFunction: null }, pillLabel: { classPropertyName: "pillLabel", publicName: "pillLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", buttonClicked: "buttonClicked", checked: "checkedChange", expanded: "expandedChange" }, host: { attributes: { "role": "listitem" } }, ngImport: i0, template: "@if (actionable()) {\n  <button\n    list-item\n    class=\"actionable\"\n    [attr.active]=\"active() || undefined\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.disabled]=\"disabled() || undefined\"\n    [class.indented]=\"indented()\"\n    (click)=\"onListItemSelect()\"\n  >\n    @if (checkable()) {\n      <ndw-checkbox\n        [disabled]=\"disabled()\"\n        [class.readonly]=\"!collapsible() && !indented()\"\n        [(checked)]=\"checked\"\n        (click)=\"onCheckboxClick($event)\"\n      />\n    }\n    <ng-container *ngTemplateOutlet=\"listItem\" />\n  </button>\n} @else {\n  <div list-item [class.indented]=\"indented()\">\n    <ng-container *ngTemplateOutlet=\"listItem\" />\n  </div>\n}\n\n<ng-template #listItem>\n  @if (prefixIcon(); as prefix) {\n    <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\n  }\n  <ng-content />\n  <div class=\"content\">\n    @if (title(); as title) {\n      <span class=\"title\">{{ title }}</span>\n    }\n    @if (subtitle(); as subtitle) {\n      {{ subtitle }}\n    }\n  </div>\n  @if (pillLabel(); as pillLabel) {\n    <ndw-pill [color]=\"pillColor()\">{{ pillLabel }}</ndw-pill>\n  }\n  @if (badgeValue(); as badgeValue) {\n    <ndw-badge [value]=\"badgeValue\" />\n  }\n  @if (showButton()) {\n    <button\n      ndwButton\n      tertiary\n      class=\"suffix-button\"\n      [attr.aria-label]=\"buttonLabel()\"\n      [attr.disabled]=\"disabled() || undefined\"\n      (click)=\"onButtonClick($event)\"\n    >\n      <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n    </button>\n  }\n  @if (collapsible()) {\n    <ndw-icon class=\"affix\" [class.expanded]=\"expanded()\">keyboard_arrow_down</ndw-icon>\n  }\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";[list-item]{--list-item-animation-speed: initial;--list-item-background-color: initial;--list-item-border-radius: initial;--list-item-color: initial;--list-item-disabled-background-color: initial;--list-item-disabled-color: initial;--list-item-font-size: initial;--list-item-gap: initial;--list-item-hover-background-color: initial;--list-item-min-height: initial;--list-item-padding: initial;align-items:center;background-color:var(--list-item-background-color);border:none;border-radius:var(--list-item-border-radius);color:var(--list-item-color);display:flex;font-size:var(--list-item-font-size);gap:var(--list-item-gap);min-height:var(--list-item-min-height);padding:var(--list-item-padding);text-decoration:none;transition:background-color var(--list-item-animation-speed) ease-in-out}[list-item]:hover,[list-item][active]{background-color:var(--list-item-hover-background-color)}[list-item][disabled]{color:var(--list-item-disabled-color);pointer-events:none;-webkit-user-select:none;user-select:none}.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%}[list-item]{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;--list-item-animation-speed: var(--ndw-animation-speed-fast);--list-item-background-color: var(--ndw-color-white);--list-item-border-radius: var(--ndw-border-radius-sm);--list-item-color: var(--ndw-color-grey-700);--list-item-disabled-background-color: var(--ndw-color-grey-100);--list-item-disabled-color: var(--ndw-color-grey-400);--list-item-font-size: initial;--list-item-gap: var(--ndw-spacing-sm);--list-item-hover-background-color: var(--ndw-color-grey-100);--list-item-min-height: var(--ndw-spacing-2xl);--list-item-padding: var(--ndw-spacing-xs) var(--ndw-spacing-sm);width:100%}[list-item]:not(.actionable){--list-item-hover-background-color: var(--ndw-color-white)}[list-item] ndw-checkbox.readonly{pointer-events:none;-webkit-user-select:none;user-select:none}[list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[list-item] .affix.expanded{transform:var(--ndw-rotate-half)}[list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[list-item] .suffix-button{padding-inline:var(--ndw-spacing-3xs)}[list-item] .suffix-button ndw-icon{font-size:var(--ndw-spacing-lg)}[list-item] .suffix-button[disabled]{background-color:transparent;border-color:transparent}[list-item].indented{background-color:var(--ndw-color-grey-100);border-radius:0;padding-inline-start:var(--ndw-spacing-3xl)}[list-item].indented:hover{background-color:var(--ndw-color-grey-300)}[list-item][disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ndw-badge", inputs: ["value", "ariaLabel", "displayLargeNumbers"] }, { kind: "component", type: CheckboxComponent, selector: "ndw-checkbox", inputs: ["checked", "switch", "disabled", "error", "success", "indeterminate", "required"], outputs: ["checkedChange", "disabledChange"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PillComponent, selector: "ndw-pill", inputs: ["color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ListItemComponent, isStandalone: true, selector: "ndw-list-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badgeValue: { classPropertyName: "badgeValue", publicName: "badgeValue", isSignal: true, isRequired: false, transformFunction: null }, buttonIcon: { classPropertyName: "buttonIcon", publicName: "buttonIcon", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, checkType: { classPropertyName: "checkType", publicName: "checkType", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indented: { classPropertyName: "indented", publicName: "indented", isSignal: true, isRequired: false, transformFunction: null }, pillColor: { classPropertyName: "pillColor", publicName: "pillColor", isSignal: true, isRequired: false, transformFunction: null }, pillLabel: { classPropertyName: "pillLabel", publicName: "pillLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", buttonClicked: "buttonClicked", checked: "checkedChange", expanded: "expandedChange" }, host: { attributes: { "role": "listitem" } }, viewQueries: [{ propertyName: "radioButton", first: true, predicate: RadioButtonComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (actionable()) {\n  <button\n    list-item\n    class=\"actionable\"\n    [attr.active]=\"active() || undefined\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.disabled]=\"disabled() || undefined\"\n    [class.indented]=\"indented()\"\n    (click)=\"onListItemSelect()\"\n  >\n    @if (checkable()) {\n      @if (checkType() === 'radio') {\n        <ndw-radio-button\n          [disabled]=\"disabled()\"\n          [class.readonly]=\"!collapsible() && !indented()\"\n          [(checked)]=\"checked\"\n          (click)=\"onCheckClick($event)\"\n        />\n      } @else {\n        <ndw-checkbox\n          [disabled]=\"disabled()\"\n          [class.readonly]=\"!collapsible() && !indented()\"\n          [(checked)]=\"checked\"\n          (click)=\"onCheckClick($event)\"\n        />\n      }\n    }\n    <ng-container *ngTemplateOutlet=\"listItem\" />\n  </button>\n} @else {\n  <div list-item [class.indented]=\"indented()\">\n    <ng-container *ngTemplateOutlet=\"listItem\" />\n  </div>\n}\n\n<ng-template #listItem>\n  @if (prefixIcon(); as prefix) {\n    <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\n  }\n  <ng-content />\n  <div class=\"content\">\n    @if (title(); as title) {\n      <span class=\"title\">{{ title }}</span>\n    }\n    @if (subtitle(); as subtitle) {\n      {{ subtitle }}\n    }\n  </div>\n  @if (pillLabel(); as pillLabel) {\n    <ndw-pill [color]=\"pillColor()\">{{ pillLabel }}</ndw-pill>\n  }\n  @if (badgeValue(); as badgeValue) {\n    <ndw-badge [value]=\"badgeValue\" />\n  }\n  @if (showButton()) {\n    <button\n      ndwButton\n      tertiary\n      class=\"suffix-button\"\n      [attr.aria-label]=\"buttonLabel()\"\n      [attr.disabled]=\"disabled() || undefined\"\n      (click)=\"onButtonClick($event)\"\n    >\n      <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n    </button>\n  }\n  @if (collapsible()) {\n    <ndw-icon class=\"affix\" [class.expanded]=\"expanded()\">keyboard_arrow_down</ndw-icon>\n  }\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";[list-item]{--list-item-animation-speed: initial;--list-item-background-color: initial;--list-item-border-radius: initial;--list-item-color: initial;--list-item-disabled-background-color: initial;--list-item-disabled-color: initial;--list-item-font-size: initial;--list-item-gap: initial;--list-item-hover-background-color: initial;--list-item-min-height: initial;--list-item-padding: initial;align-items:center;background-color:var(--list-item-background-color);border:none;border-radius:var(--list-item-border-radius);color:var(--list-item-color);display:flex;font-size:var(--list-item-font-size);gap:var(--list-item-gap);min-height:var(--list-item-min-height);padding:var(--list-item-padding);text-decoration:none;transition:background-color var(--list-item-animation-speed) ease-in-out}[list-item]:hover,[list-item][active]{background-color:var(--list-item-hover-background-color)}[list-item][disabled]{color:var(--list-item-disabled-color);pointer-events:none;-webkit-user-select:none;user-select:none}.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%}[list-item]{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;--list-item-animation-speed: var(--ndw-animation-speed-fast);--list-item-background-color: var(--ndw-color-white);--list-item-border-radius: var(--ndw-border-radius-sm);--list-item-color: var(--ndw-color-grey-700);--list-item-disabled-background-color: var(--ndw-color-grey-100);--list-item-disabled-color: var(--ndw-color-grey-400);--list-item-font-size: initial;--list-item-gap: var(--ndw-spacing-sm);--list-item-hover-background-color: var(--ndw-color-grey-100);--list-item-min-height: var(--ndw-spacing-2xl);--list-item-padding: var(--ndw-spacing-xs) var(--ndw-spacing-sm);width:100%}[list-item]:not(.actionable){--list-item-hover-background-color: var(--ndw-color-white)}[list-item] ndw-checkbox.readonly,[list-item] ndw-radio-button.readonly{pointer-events:none;-webkit-user-select:none;user-select:none}[list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[list-item] .affix.expanded{transform:var(--ndw-rotate-half)}[list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[list-item] .suffix-button{padding-inline:var(--ndw-spacing-3xs)}[list-item] .suffix-button ndw-icon{font-size:var(--ndw-spacing-lg)}[list-item] .suffix-button[disabled]{background-color:transparent;border-color:transparent}[list-item].indented{background-color:var(--ndw-color-grey-100);border-radius:0;padding-inline-start:var(--ndw-spacing-3xl)}[list-item].indented:hover{background-color:var(--ndw-color-grey-300)}[list-item][disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ndw-badge", inputs: ["value", "ariaLabel", "displayLargeNumbers"] }, { kind: "component", type: CheckboxComponent, selector: "ndw-checkbox", inputs: ["checked", "switch", "disabled", "error", "success", "indeterminate", "required"], outputs: ["checkedChange", "disabledChange"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PillComponent, selector: "ndw-pill", inputs: ["color"] }, { kind: "component", type: RadioButtonComponent, selector: "ndw-radio-button", inputs: ["checked", "disabled", "error", "success", "required", "value"], outputs: ["checkedChange", "disabledChange", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ListItemComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         role: 'listitem',
-                    }, imports: [BadgeComponent, CheckboxComponent, IconComponent, NgTemplateOutlet, PillComponent], selector: 'ndw-list-item', template: "@if (actionable()) {\n  <button\n    list-item\n    class=\"actionable\"\n    [attr.active]=\"active() || undefined\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.disabled]=\"disabled() || undefined\"\n    [class.indented]=\"indented()\"\n    (click)=\"onListItemSelect()\"\n  >\n    @if (checkable()) {\n      <ndw-checkbox\n        [disabled]=\"disabled()\"\n        [class.readonly]=\"!collapsible() && !indented()\"\n        [(checked)]=\"checked\"\n        (click)=\"onCheckboxClick($event)\"\n      />\n    }\n    <ng-container *ngTemplateOutlet=\"listItem\" />\n  </button>\n} @else {\n  <div list-item [class.indented]=\"indented()\">\n    <ng-container *ngTemplateOutlet=\"listItem\" />\n  </div>\n}\n\n<ng-template #listItem>\n  @if (prefixIcon(); as prefix) {\n    <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\n  }\n  <ng-content />\n  <div class=\"content\">\n    @if (title(); as title) {\n      <span class=\"title\">{{ title }}</span>\n    }\n    @if (subtitle(); as subtitle) {\n      {{ subtitle }}\n    }\n  </div>\n  @if (pillLabel(); as pillLabel) {\n    <ndw-pill [color]=\"pillColor()\">{{ pillLabel }}</ndw-pill>\n  }\n  @if (badgeValue(); as badgeValue) {\n    <ndw-badge [value]=\"badgeValue\" />\n  }\n  @if (showButton()) {\n    <button\n      ndwButton\n      tertiary\n      class=\"suffix-button\"\n      [attr.aria-label]=\"buttonLabel()\"\n      [attr.disabled]=\"disabled() || undefined\"\n      (click)=\"onButtonClick($event)\"\n    >\n      <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n    </button>\n  }\n  @if (collapsible()) {\n    <ndw-icon class=\"affix\" [class.expanded]=\"expanded()\">keyboard_arrow_down</ndw-icon>\n  }\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";[list-item]{--list-item-animation-speed: initial;--list-item-background-color: initial;--list-item-border-radius: initial;--list-item-color: initial;--list-item-disabled-background-color: initial;--list-item-disabled-color: initial;--list-item-font-size: initial;--list-item-gap: initial;--list-item-hover-background-color: initial;--list-item-min-height: initial;--list-item-padding: initial;align-items:center;background-color:var(--list-item-background-color);border:none;border-radius:var(--list-item-border-radius);color:var(--list-item-color);display:flex;font-size:var(--list-item-font-size);gap:var(--list-item-gap);min-height:var(--list-item-min-height);padding:var(--list-item-padding);text-decoration:none;transition:background-color var(--list-item-animation-speed) ease-in-out}[list-item]:hover,[list-item][active]{background-color:var(--list-item-hover-background-color)}[list-item][disabled]{color:var(--list-item-disabled-color);pointer-events:none;-webkit-user-select:none;user-select:none}.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%}[list-item]{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;--list-item-animation-speed: var(--ndw-animation-speed-fast);--list-item-background-color: var(--ndw-color-white);--list-item-border-radius: var(--ndw-border-radius-sm);--list-item-color: var(--ndw-color-grey-700);--list-item-disabled-background-color: var(--ndw-color-grey-100);--list-item-disabled-color: var(--ndw-color-grey-400);--list-item-font-size: initial;--list-item-gap: var(--ndw-spacing-sm);--list-item-hover-background-color: var(--ndw-color-grey-100);--list-item-min-height: var(--ndw-spacing-2xl);--list-item-padding: var(--ndw-spacing-xs) var(--ndw-spacing-sm);width:100%}[list-item]:not(.actionable){--list-item-hover-background-color: var(--ndw-color-white)}[list-item] ndw-checkbox.readonly{pointer-events:none;-webkit-user-select:none;user-select:none}[list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[list-item] .affix.expanded{transform:var(--ndw-rotate-half)}[list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[list-item] .suffix-button{padding-inline:var(--ndw-spacing-3xs)}[list-item] .suffix-button ndw-icon{font-size:var(--ndw-spacing-lg)}[list-item] .suffix-button[disabled]{background-color:transparent;border-color:transparent}[list-item].indented{background-color:var(--ndw-color-grey-100);border-radius:0;padding-inline-start:var(--ndw-spacing-3xl)}[list-item].indented:hover{background-color:var(--ndw-color-grey-300)}[list-item][disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"] }]
-        }] });
+                    }, imports: [
+                        BadgeComponent,
+                        CheckboxComponent,
+                        IconComponent,
+                        NgTemplateOutlet,
+                        PillComponent,
+                        RadioButtonComponent,
+                    ], selector: 'ndw-list-item', template: "@if (actionable()) {\n  <button\n    list-item\n    class=\"actionable\"\n    [attr.active]=\"active() || undefined\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.disabled]=\"disabled() || undefined\"\n    [class.indented]=\"indented()\"\n    (click)=\"onListItemSelect()\"\n  >\n    @if (checkable()) {\n      @if (checkType() === 'radio') {\n        <ndw-radio-button\n          [disabled]=\"disabled()\"\n          [class.readonly]=\"!collapsible() && !indented()\"\n          [(checked)]=\"checked\"\n          (click)=\"onCheckClick($event)\"\n        />\n      } @else {\n        <ndw-checkbox\n          [disabled]=\"disabled()\"\n          [class.readonly]=\"!collapsible() && !indented()\"\n          [(checked)]=\"checked\"\n          (click)=\"onCheckClick($event)\"\n        />\n      }\n    }\n    <ng-container *ngTemplateOutlet=\"listItem\" />\n  </button>\n} @else {\n  <div list-item [class.indented]=\"indented()\">\n    <ng-container *ngTemplateOutlet=\"listItem\" />\n  </div>\n}\n\n<ng-template #listItem>\n  @if (prefixIcon(); as prefix) {\n    <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\n  }\n  <ng-content />\n  <div class=\"content\">\n    @if (title(); as title) {\n      <span class=\"title\">{{ title }}</span>\n    }\n    @if (subtitle(); as subtitle) {\n      {{ subtitle }}\n    }\n  </div>\n  @if (pillLabel(); as pillLabel) {\n    <ndw-pill [color]=\"pillColor()\">{{ pillLabel }}</ndw-pill>\n  }\n  @if (badgeValue(); as badgeValue) {\n    <ndw-badge [value]=\"badgeValue\" />\n  }\n  @if (showButton()) {\n    <button\n      ndwButton\n      tertiary\n      class=\"suffix-button\"\n      [attr.aria-label]=\"buttonLabel()\"\n      [attr.disabled]=\"disabled() || undefined\"\n      (click)=\"onButtonClick($event)\"\n    >\n      <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n    </button>\n  }\n  @if (collapsible()) {\n    <ndw-icon class=\"affix\" [class.expanded]=\"expanded()\">keyboard_arrow_down</ndw-icon>\n  }\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";[list-item]{--list-item-animation-speed: initial;--list-item-background-color: initial;--list-item-border-radius: initial;--list-item-color: initial;--list-item-disabled-background-color: initial;--list-item-disabled-color: initial;--list-item-font-size: initial;--list-item-gap: initial;--list-item-hover-background-color: initial;--list-item-min-height: initial;--list-item-padding: initial;align-items:center;background-color:var(--list-item-background-color);border:none;border-radius:var(--list-item-border-radius);color:var(--list-item-color);display:flex;font-size:var(--list-item-font-size);gap:var(--list-item-gap);min-height:var(--list-item-min-height);padding:var(--list-item-padding);text-decoration:none;transition:background-color var(--list-item-animation-speed) ease-in-out}[list-item]:hover,[list-item][active]{background-color:var(--list-item-hover-background-color)}[list-item][disabled]{color:var(--list-item-disabled-color);pointer-events:none;-webkit-user-select:none;user-select:none}.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%}[list-item]{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;--list-item-animation-speed: var(--ndw-animation-speed-fast);--list-item-background-color: var(--ndw-color-white);--list-item-border-radius: var(--ndw-border-radius-sm);--list-item-color: var(--ndw-color-grey-700);--list-item-disabled-background-color: var(--ndw-color-grey-100);--list-item-disabled-color: var(--ndw-color-grey-400);--list-item-font-size: initial;--list-item-gap: var(--ndw-spacing-sm);--list-item-hover-background-color: var(--ndw-color-grey-100);--list-item-min-height: var(--ndw-spacing-2xl);--list-item-padding: var(--ndw-spacing-xs) var(--ndw-spacing-sm);width:100%}[list-item]:not(.actionable){--list-item-hover-background-color: var(--ndw-color-white)}[list-item] ndw-checkbox.readonly,[list-item] ndw-radio-button.readonly{pointer-events:none;-webkit-user-select:none;user-select:none}[list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[list-item] .affix.expanded{transform:var(--ndw-rotate-half)}[list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[list-item] .suffix-button{padding-inline:var(--ndw-spacing-3xs)}[list-item] .suffix-button ndw-icon{font-size:var(--ndw-spacing-lg)}[list-item] .suffix-button[disabled]{background-color:transparent;border-color:transparent}[list-item].indented{background-color:var(--ndw-color-grey-100);border-radius:0;padding-inline-start:var(--ndw-spacing-3xl)}[list-item].indented:hover{background-color:var(--ndw-color-grey-300)}[list-item][disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"] }]
+        }], ctorParameters: () => [] });
 const collapsibleAnimation = [
     trigger('collapsible', [
@@ -2245,7 +1725,7 @@ class CollapsibleComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: CollapsibleComponent, isStandalone: true, selector: "ndw-collapsible", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class.expanded": "expanded()" } }, ngImport: i0, template: "<ndw-list-item\n  [attr.aria-controls]=\"sectionUuid\"\n  [badgeValue]=\"value()\"\n  [checkable]=\"checkable()\"\n  [collapsible]=\"true\"\n  [expanded]=\"expanded()\"\n  [subtitle]=\"subtitle()\"\n  [title]=\"title()\"\n  (expandedChange)=\"toggle()\"\n>\n  <ng-content select=\"custom-header-content\" />\n</ndw-list-item>\n<section\n  role=\"region\"\n  class=\"content\"\n  [id]=\"sectionUuid\"\n  [attr.aria-labelledby]=\"toggleUuid\"\n  [@collapsible]=\"animationState()\"\n>\n  <ng-content />\n</section>\n", styles: [":host{display:block}:host .content{border-block-start:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);border-bottom-left-radius:var(--ndw-border-radius-sm);border-bottom-right-radius:var(--ndw-border-radius-sm);display:none;height:fit-content;margin-block:0;overflow:hidden;transition:height var(--ndw-animation-speed-fast) ease-in-out}:host.expanded .content{display:block}\n"], dependencies: [{ kind: "component", type: ListItemComponent, selector: "ndw-list-item", inputs: ["active", "badgeValue", "buttonIcon", "buttonLabel", "checkable", "collapsible", "disabled", "indented", "pillColor", "pillLabel", "prefixIcon", "showButton", "subtitle", "title", "checked", "expanded"], outputs: ["activeChange", "buttonClicked", "checkedChange", "expandedChange"] }], animations: [collapsibleAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: CollapsibleComponent, isStandalone: true, selector: "ndw-collapsible", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class.expanded": "expanded()" } }, ngImport: i0, template: "<ndw-list-item\n  [attr.aria-controls]=\"sectionUuid\"\n  [badgeValue]=\"value()\"\n  [checkable]=\"checkable()\"\n  [collapsible]=\"true\"\n  [expanded]=\"expanded()\"\n  [subtitle]=\"subtitle()\"\n  [title]=\"title()\"\n  (expandedChange)=\"toggle()\"\n>\n  <ng-content select=\"custom-header-content\" />\n</ndw-list-item>\n<section\n  role=\"region\"\n  class=\"content\"\n  [id]=\"sectionUuid\"\n  [attr.aria-labelledby]=\"toggleUuid\"\n  [@collapsible]=\"animationState()\"\n>\n  <ng-content />\n</section>\n", styles: [":host{display:block}:host .content{border-block-start:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);border-bottom-left-radius:var(--ndw-border-radius-sm);border-bottom-right-radius:var(--ndw-border-radius-sm);display:none;height:fit-content;margin-block:0;overflow:hidden;transition:height var(--ndw-animation-speed-fast) ease-in-out}:host.expanded .content{display:block}\n"], dependencies: [{ kind: "component", type: ListItemComponent, selector: "ndw-list-item", inputs: ["active", "badgeValue", "buttonIcon", "buttonLabel", "checkable", "checkType", "collapsible", "disabled", "indented", "pillColor", "pillLabel", "prefixIcon", "showButton", "subtitle", "title", "checked", "expanded"], outputs: ["activeChange", "buttonClicked", "checkedChange", "expandedChange"] }], animations: [collapsibleAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CollapsibleComponent, decorators: [{
             type: Component,
@@ -2256,8 +1736,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
 class ListComponent {
     elevated = input(false);
+    listItems = contentChildren(ListItemComponent);
+    #uuid = crypto.randomUUID();
+    ngAfterContentInit() {
+        const items = [...this.listItems()];
+        if (items.some((item) => !item.checkable() || item.checkType() !== 'radio')) {
+            return;
+        }
+        setRadioItemsName(items, this.#uuid);
+        checkRadioItems(items);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: ListComponent, isStandalone: true, selector: "ndw-list", inputs: { elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "class.elevated": "elevated()" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{--list-background-color: initial;--list-border: initial;--list-border-radius: initial;background-color:var(--list-background-color);border:var(--list-border);border-radius:var(--list-border-radius);display:grid;overflow:hidden}:host{--list-border-radius: var(--ndw-border-radius-md);padding:var(--ndw-spacing-xs)}:host.elevated{box-shadow:var(--ndw-elevation-popover)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.7", type: ListComponent, isStandalone: true, selector: "ndw-list", inputs: { elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "class.elevated": "elevated()" } }, queries: [{ propertyName: "listItems", predicate: ListItemComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n", styles: [":host{--list-background-color: initial;--list-border: initial;--list-border-radius: initial;background-color:var(--list-background-color);border:var(--list-border);border-radius:var(--list-border-radius);display:grid;overflow:hidden}:host{--list-border-radius: var(--ndw-border-radius-md);padding:var(--ndw-spacing-xs)}:host.elevated{box-shadow:var(--ndw-elevation-popover)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
@@ -2328,7 +1818,7 @@ class AlertComponent {
         this.close.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: AlertComponent, isStandalone: true, selector: "ndw-alert", inputs: { actionable: { classPropertyName: "actionable", publicName: "actionable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, host: { attributes: { "role": "alert" }, properties: { "attr.aria-live": "ariaLive()", "class": "type()", "class.actionable": "actionable()" } }, ngImport: i0, template: "<section>\n  <ndw-icon class=\"info-icon\">info</ndw-icon>\n  @if (actionable()) {\n    @if (title(); as title) {\n      <h2>{{ title }}</h2>\n    }\n\n    <button ndwButton alternative extra-small tertiary class=\"close-button\" (click)=\"onClose()\">\n      <span class=\"sr-only\">Sluit melding</span>\n      <ndw-icon>close</ndw-icon>\n    </button>\n  }\n</section>\n<ng-content />\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:flex-start;background-color:var(--ndw-color-grey-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-400);border-radius:var(--ndw-border-radius-sm);color:var(--ndw-color-grey-600);display:grid;gap:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);grid-template-columns:auto 1fr;padding-block:calc(var(--ndw-spacing-xs) + var(--ndw-spacing-2xs)) var(--ndw-spacing-xs);padding-inline:var(--ndw-spacing-sm);word-break:break-word}:host section{align-items:center;display:grid;gap:var(--ndw-spacing-xs);grid-template-columns:1fr;min-height:var(--ndw-spacing-lg);margin-top:-.125rem}:host section .info-icon{font-size:var(--ndw-spacing-md);margin-top:-.125rem}:host section .close-button{margin-left:auto;margin-top:calc(var(--ndw-spacing-2xs) * -1);margin-right:calc(var(--ndw-spacing-xs) * -1)}:host section h2{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;line-height:var(--ndw-line-height-sm);margin:0}:host.actionable{grid-template-columns:1fr;padding:var(--ndw-spacing-sm) var(--ndw-spacing-md)}:host.actionable section{grid-template-columns:auto 1fr auto}:host.actionable section .info-icon{color:var(--ndw-color-grey-700)}:host.info{background-color:var(--ndw-color-info-100);border-color:var(--ndw-color-info-500)}:host.info section .info-icon{color:var(--ndw-color-info-500)}:host.warning{background-color:var(--ndw-color-warning-100);border-color:var(--ndw-color-warning-500)}:host.warning section .info-icon{color:var(--ndw-color-warning-500)}:host.critical{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}:host.critical section .info-icon{color:var(--ndw-color-critical-500)}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: AlertComponent, isStandalone: true, selector: "ndw-alert", inputs: { actionable: { classPropertyName: "actionable", publicName: "actionable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, host: { attributes: { "role": "alert" }, properties: { "attr.aria-live": "ariaLive()", "class": "type()", "class.actionable": "actionable()" } }, ngImport: i0, template: "<section>\n  <ndw-icon class=\"info-icon\">info</ndw-icon>\n  @if (actionable()) {\n    @if (title(); as title) {\n      <h2>{{ title }}</h2>\n    }\n\n    <button ndwButton alternative extra-small tertiary class=\"close-button\" (click)=\"onClose()\">\n      <span class=\"sr-only\">Sluit melding</span>\n      <ndw-icon>close</ndw-icon>\n    </button>\n  }\n</section>\n<ng-content />\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:flex-start;background-color:var(--ndw-color-grey-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-400);border-radius:var(--ndw-border-radius-sm);color:var(--ndw-color-grey-600);display:grid;column-gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr;padding-block:var(--ndw-spacing-xs) var(--ndw-spacing-2xs);padding-inline:var(--ndw-spacing-xs);word-break:break-word}:host section{align-items:center;display:grid;gap:var(--ndw-spacing-xs);grid-template-columns:1fr;min-height:var(--ndw-spacing-lg);margin-top:-.125rem}:host section .info-icon{font-size:var(--ndw-spacing-md);margin-top:-.125rem}:host section .close-button{margin-left:auto;margin-top:calc(var(--ndw-spacing-2xs) * -1);margin-right:calc(var(--ndw-spacing-xs) * -1)}:host section h2{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;line-height:100%;margin:0}:host.actionable{grid-template-columns:1fr;padding:var(--ndw-spacing-xs) var(--ndw-spacing-sm)}:host.actionable section{grid-template-columns:auto 1fr auto}:host.actionable section .info-icon{color:var(--ndw-color-grey-700)}:host.info{background-color:var(--ndw-color-info-100);border-color:var(--ndw-color-info-500)}:host.info section .info-icon{color:var(--ndw-color-info-500)}:host.warning{background-color:var(--ndw-color-warning-100);border-color:var(--ndw-color-warning-500)}:host.warning section .info-icon{color:var(--ndw-color-warning-500)}:host.critical{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}:host.critical section .info-icon{color:var(--ndw-color-critical-500)}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
@@ -2337,7 +1827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         '[class]': 'type()',
                         '[class.actionable]': 'actionable()',
                         role: 'alert',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonDirective, IconComponent], selector: 'ndw-alert', template: "<section>\n  <ndw-icon class=\"info-icon\">info</ndw-icon>\n  @if (actionable()) {\n    @if (title(); as title) {\n      <h2>{{ title }}</h2>\n    }\n\n    <button ndwButton alternative extra-small tertiary class=\"close-button\" (click)=\"onClose()\">\n      <span class=\"sr-only\">Sluit melding</span>\n      <ndw-icon>close</ndw-icon>\n    </button>\n  }\n</section>\n<ng-content />\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:flex-start;background-color:var(--ndw-color-grey-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-400);border-radius:var(--ndw-border-radius-sm);color:var(--ndw-color-grey-600);display:grid;gap:var(--ndw-spacing-2xs) var(--ndw-spacing-xs);grid-template-columns:auto 1fr;padding-block:calc(var(--ndw-spacing-xs) + var(--ndw-spacing-2xs)) var(--ndw-spacing-xs);padding-inline:var(--ndw-spacing-sm);word-break:break-word}:host section{align-items:center;display:grid;gap:var(--ndw-spacing-xs);grid-template-columns:1fr;min-height:var(--ndw-spacing-lg);margin-top:-.125rem}:host section .info-icon{font-size:var(--ndw-spacing-md);margin-top:-.125rem}:host section .close-button{margin-left:auto;margin-top:calc(var(--ndw-spacing-2xs) * -1);margin-right:calc(var(--ndw-spacing-xs) * -1)}:host section h2{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;line-height:var(--ndw-line-height-sm);margin:0}:host.actionable{grid-template-columns:1fr;padding:var(--ndw-spacing-sm) var(--ndw-spacing-md)}:host.actionable section{grid-template-columns:auto 1fr auto}:host.actionable section .info-icon{color:var(--ndw-color-grey-700)}:host.info{background-color:var(--ndw-color-info-100);border-color:var(--ndw-color-info-500)}:host.info section .info-icon{color:var(--ndw-color-info-500)}:host.warning{background-color:var(--ndw-color-warning-100);border-color:var(--ndw-color-warning-500)}:host.warning section .info-icon{color:var(--ndw-color-warning-500)}:host.critical{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}:host.critical section .info-icon{color:var(--ndw-color-critical-500)}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonDirective, IconComponent], selector: 'ndw-alert', template: "<section>\n  <ndw-icon class=\"info-icon\">info</ndw-icon>\n  @if (actionable()) {\n    @if (title(); as title) {\n      <h2>{{ title }}</h2>\n    }\n\n    <button ndwButton alternative extra-small tertiary class=\"close-button\" (click)=\"onClose()\">\n      <span class=\"sr-only\">Sluit melding</span>\n      <ndw-icon>close</ndw-icon>\n    </button>\n  }\n</section>\n<ng-content />\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:flex-start;background-color:var(--ndw-color-grey-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-400);border-radius:var(--ndw-border-radius-sm);color:var(--ndw-color-grey-600);display:grid;column-gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr;padding-block:var(--ndw-spacing-xs) var(--ndw-spacing-2xs);padding-inline:var(--ndw-spacing-xs);word-break:break-word}:host section{align-items:center;display:grid;gap:var(--ndw-spacing-xs);grid-template-columns:1fr;min-height:var(--ndw-spacing-lg);margin-top:-.125rem}:host section .info-icon{font-size:var(--ndw-spacing-md);margin-top:-.125rem}:host section .close-button{margin-left:auto;margin-top:calc(var(--ndw-spacing-2xs) * -1);margin-right:calc(var(--ndw-spacing-xs) * -1)}:host section h2{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;line-height:100%;margin:0}:host.actionable{grid-template-columns:1fr;padding:var(--ndw-spacing-xs) var(--ndw-spacing-sm)}:host.actionable section{grid-template-columns:auto 1fr auto}:host.actionable section .info-icon{color:var(--ndw-color-grey-700)}:host.info{background-color:var(--ndw-color-info-100);border-color:var(--ndw-color-info-500)}:host.info section .info-icon{color:var(--ndw-color-info-500)}:host.warning{background-color:var(--ndw-color-warning-100);border-color:var(--ndw-color-warning-500)}:host.warning section .info-icon{color:var(--ndw-color-warning-500)}:host.critical{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}:host.critical section .info-icon{color:var(--ndw-color-critical-500)}\n"] }]
         }] });
 class AvatarComponent {
@@ -2409,11 +1899,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                     }, imports: [ButtonDirective, IconComponent], selector: 'ndw-banner', template: "<section>\n  <ndw-icon class=\"info-icon\">info</ndw-icon>\n  <p #textContent>\n    <strong>{{ title() }}:</strong>\n    {{ message() }}\n  </p>\n  @if (showReadMore) {\n    <p>{{ readMoreLabel() }}</p>\n  }\n</section>\n<button ndwButton alternative extra-small tertiary class=\"close-button\" (click)=\"onClose($event)\">\n  <span class=\"sr-only\">Sluit melding</span>\n  <ndw-icon>close</ndw-icon>\n</button>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;background-color:var(--ndw-color-info-100);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-alpha-black-015);color:var(--ndw-color-info-500);cursor:pointer;display:grid;gap:var(--ndw-spacing-xs);grid-template-columns:1fr auto;height:var(--ndw-spacing-xl);padding-inline:var(--ndw-spacing-2xs);transition:background-color var(--ndw-animation-speed-default) ease-out}:host section{align-items:center;display:grid;gap:var(--ndw-spacing-2xs);grid-template-columns:auto 1fr auto;justify-content:center;text-align:center}:host section .info-icon{font-size:var(--ndw-font-size-lg)}:host section p{font-size:var(--ndw-font-size-sm);line-height:var(--ndw-line-height-md);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host section p strong{font-weight:var(--ndw-font-weight-bold)}:host button ndw-icon{color:var(--ndw-color-info-500)}:host:hover{background-color:var(--ndw-color-info-100)}:host:active,:host:focus{background-color:var(--ndw-color-info-200)}:host.critical{background-color:var(--ndw-color-critical-100);color:var(--ndw-color-critical-500)}:host.critical section .info-icon{color:var(--ndw-color-critical-500)}:host.critical button ndw-icon{color:var(--ndw-color-critical-500)}:host.critical:hover{background-color:var(--ndw-color-critical-200)}:host.critical:active,:host.critical:focus{background-color:var(--ndw-color-critical-300)}\n"] }]
         }] });
-class BreadcrumbComponent {
-    link = input(null);
-    content = viewChild.required('content');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.7", type: BreadcrumbComponent, isStandalone: true, selector: "ndw-breadcrumb", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "link" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #content>\n  <ng-content />\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class BreadcrumbComponent extends CoreBreadcrumbComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BreadcrumbComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: BreadcrumbComponent, isStandalone: true, selector: "ndw-breadcrumb", host: { attributes: { "role": "link" } }, usesInheritance: true, ngImport: i0, template: "<ng-template #content>\n  <ng-content />\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
@@ -2422,17 +1910,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                     }, selector: 'ndw-breadcrumb', template: "<ng-template #content>\n  <ng-content />\n</ng-template>\n" }]
         }] });
-class BreadcrumbGroupComponent {
+class BreadcrumbGroupComponent extends CoreBreadcrumbGroupComponent {
     breadcrumbs = contentChildren(BreadcrumbComponent);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BreadcrumbGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: BreadcrumbGroupComponent, isStandalone: true, selector: "ndw-breadcrumb-group", host: { attributes: { "aria-label": "Breadcrumb", "role": "navigation" } }, queries: [{ propertyName: "breadcrumbs", predicate: BreadcrumbComponent, isSignal: true }], ngImport: i0, template: "@for (breadcrumb of breadcrumbs(); track breadcrumb.link()) {\n  @if ($count > 1 && $index === $count - 2) {\n    <ndw-icon class=\"icon-back\" aria-hidden=\"true\">chevron_left</ndw-icon>\n  }\n\n  <a\n    class=\"breadcrumb\"\n    [class.current-page]=\"$last\"\n    [class.show-on-small-screen]=\"$count === 1 || $index === $count - 2\"\n    [attr.aria-current]=\"$last ? 'page' : null\"\n    [routerLink]=\"$last ? null : breadcrumb.link()\"\n  >\n    <ng-template [ngTemplateOutlet]=\"breadcrumb.content()\"></ng-template>\n  </a>\n\n  @if (!$last) {\n    <ndw-icon class=\"icon-forward\" aria-hidden=\"true\">chevron_right</ndw-icon>\n  }\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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-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-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", 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: 6.25rem}:host{display:flex;align-items:center;background-color:var(--ndw-color-white);padding:var(--ndw-spacing-md)}.breadcrumb{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;text-decoration:none;line-height:100%;color:var(--ndw-color-grey-500);background-color:inherit;padding:calc(var(--ndw-spacing-3xs) * 2.5) var(--ndw-spacing-xs);border-radius:var(--ndw-border-radius-sm);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.breadcrumb:hover{text-decoration:none}.breadcrumb:not(.current-page):hover{color:var(--ndw-color-grey-600);background-color:var(--ndw-color-grey-100);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.breadcrumb:not(.current-page):focus:not(:active){color:var(--ndw-color-grey-500);outline:var(--ndw-border-size-sm) solid var(--ndw-color-secondary-500)}.breadcrumb:not(.current-page):active{color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.breadcrumb.current-page{color:var(--ndw-color-grey-700)}.icon-back{display:none}.icon-forward{display:block}.icon-back,.icon-forward{margin:0 0 var(--ndw-spacing-3xs) 0;font-size:var(--ndw-font-size-md);color:var(--ndw-color-primary-500)}@media screen and (max-width: 1024px){.breadcrumb:not(.show-on-small-screen){display:none}.icon-back{display:block}.icon-forward{display:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BreadcrumbGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: BreadcrumbGroupComponent, isStandalone: true, selector: "ndw-breadcrumb-group", host: { attributes: { "aria-label": "Breadcrumb", "role": "navigation" } }, queries: [{ propertyName: "breadcrumbs", predicate: BreadcrumbComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@for (breadcrumb of breadcrumbs(); track breadcrumb.link()) {\n  @if ($count > 1 && $index === $count - 2) {\n    <ndw-icon class=\"icon-back\" aria-hidden=\"true\">chevron_left</ndw-icon>\n  }\n\n  <a\n    class=\"breadcrumb\"\n    [class.current-page]=\"$last\"\n    [class.show-on-small-screen]=\"$count === 1 || $index === $count - 2\"\n    [attr.aria-current]=\"$last ? 'page' : null\"\n    [routerLink]=\"$last ? null : breadcrumb.link()\"\n  >\n    <ng-template [ngTemplateOutlet]=\"breadcrumb.content()\"></ng-template>\n  </a>\n\n  @if (!$last) {\n    <ndw-icon class=\"icon-forward\" aria-hidden=\"true\">chevron_right</ndw-icon>\n  }\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";:host{--breadcrumb-color: initial;--breadcrumb-current-page-color: initial;--breadcrumb-current-page-font-weight: initial;--breadcrumb-font-family: initial;--breadcrumb-font-size: initial;--breadcrumb-font-weight: initial;--breadcrumb-line-height: initial}.breadcrumb{color:var(--breadcrumb-color);cursor:pointer;font-family:var(--breadcrumb-font-family);font-size:var(--breadcrumb-font-size);font-weight:var(--breadcrumb-font-weight);line-height:var(--breadcrumb-line-height);position:relative;text-decoration:none}.breadcrumb.current-page{color:var(--breadcrumb-current-page-color);cursor:default;font-weight:var(--breadcrumb-current-page-font-weight);pointer-events:none}.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{--breadcrumb-color: var(--ndw-color-grey-500);--breadcrumb-current-page-color: var(--ndw-color-grey-700);--breadcrumb-current-page-font-weight: var(--ndw-font-weight-bold);--breadcrumb-font-family: var(--ndw-font-family-body);--breadcrumb-font-size: var(--ndw-font-size-sm);--breadcrumb-font-weight: var(--ndw-font-weight-bold);--breadcrumb-line-height: 100%}.breadcrumb{background-color:inherit;padding:calc(var(--ndw-spacing-3xs) * 2.5) var(--ndw-spacing-xs);border-radius:var(--ndw-border-radius-sm);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.breadcrumb:hover{color:var(--ndw-color-grey-600);background-color:var(--ndw-color-grey-100);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.breadcrumb:focus:not(:active){color:var(--ndw-color-grey-500);outline:var(--ndw-border-size-sm) solid var(--ndw-color-secondary-500)}.breadcrumb:active{color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}\n", ":host{--breadcrumb-group-background-color: initial;--breadcrumb-group-chevron-size: initial;--breadcrumb-group-color: initial;--breadcrumb-group-padding: initial;align-items:center;background-color:var(--breadcrumb-group-background-color);color:var(--breadcrumb-group-color);display:flex;padding:var(--breadcrumb-group-padding)}.icon-back,.icon-forward{font-size:var(--breadcrumb-group-chevron-size)}.icon-back{display:none}: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-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", 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: 6.25rem}:host{--breadcrumb-group-background-color: var(--ndw-color-white);--breadcrumb-group-chevron-size: var(--ndw-font-size-md);--breadcrumb-group-color: var(--ndw-color-primary-500);--breadcrumb-group-padding: var(--ndw-spacing-md)}.icon-back,.icon-forward{margin-block-end:var(--ndw-spacing-3xs)}@media screen and (max-width: 1024px){.breadcrumb:not(.show-on-small-screen){display:none}.icon-back{display:block}.icon-forward{display:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BreadcrumbGroupComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'aria-label': 'Breadcrumb',
                         role: 'navigation',
-                    }, imports: [IconComponent, NgTemplateOutlet, RouterLink], selector: 'ndw-breadcrumb-group', template: "@for (breadcrumb of breadcrumbs(); track breadcrumb.link()) {\n  @if ($count > 1 && $index === $count - 2) {\n    <ndw-icon class=\"icon-back\" aria-hidden=\"true\">chevron_left</ndw-icon>\n  }\n\n  <a\n    class=\"breadcrumb\"\n    [class.current-page]=\"$last\"\n    [class.show-on-small-screen]=\"$count === 1 || $index === $count - 2\"\n    [attr.aria-current]=\"$last ? 'page' : null\"\n    [routerLink]=\"$last ? null : breadcrumb.link()\"\n  >\n    <ng-template [ngTemplateOutlet]=\"breadcrumb.content()\"></ng-template>\n  </a>\n\n  @if (!$last) {\n    <ndw-icon class=\"icon-forward\" aria-hidden=\"true\">chevron_right</ndw-icon>\n  }\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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-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-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", 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: 6.25rem}:host{display:flex;align-items:center;background-color:var(--ndw-color-white);padding:var(--ndw-spacing-md)}.breadcrumb{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;text-decoration:none;line-height:100%;color:var(--ndw-color-grey-500);background-color:inherit;padding:calc(var(--ndw-spacing-3xs) * 2.5) var(--ndw-spacing-xs);border-radius:var(--ndw-border-radius-sm);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.breadcrumb:hover{text-decoration:none}.breadcrumb:not(.current-page):hover{color:var(--ndw-color-grey-600);background-color:var(--ndw-color-grey-100);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.breadcrumb:not(.current-page):focus:not(:active){color:var(--ndw-color-grey-500);outline:var(--ndw-border-size-sm) solid var(--ndw-color-secondary-500)}.breadcrumb:not(.current-page):active{color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.breadcrumb.current-page{color:var(--ndw-color-grey-700)}.icon-back{display:none}.icon-forward{display:block}.icon-back,.icon-forward{margin:0 0 var(--ndw-spacing-3xs) 0;font-size:var(--ndw-font-size-md);color:var(--ndw-color-primary-500)}@media screen and (max-width: 1024px){.breadcrumb:not(.show-on-small-screen){display:none}.icon-back{display:block}.icon-forward{display:none}}\n"] }]
+                    }, imports: [IconComponent, NgTemplateOutlet, RouterLink], selector: 'ndw-breadcrumb-group', template: "@for (breadcrumb of breadcrumbs(); track breadcrumb.link()) {\n  @if ($count > 1 && $index === $count - 2) {\n    <ndw-icon class=\"icon-back\" aria-hidden=\"true\">chevron_left</ndw-icon>\n  }\n\n  <a\n    class=\"breadcrumb\"\n    [class.current-page]=\"$last\"\n    [class.show-on-small-screen]=\"$count === 1 || $index === $count - 2\"\n    [attr.aria-current]=\"$last ? 'page' : null\"\n    [routerLink]=\"$last ? null : breadcrumb.link()\"\n  >\n    <ng-template [ngTemplateOutlet]=\"breadcrumb.content()\"></ng-template>\n  </a>\n\n  @if (!$last) {\n    <ndw-icon class=\"icon-forward\" aria-hidden=\"true\">chevron_right</ndw-icon>\n  }\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";:host{--breadcrumb-color: initial;--breadcrumb-current-page-color: initial;--breadcrumb-current-page-font-weight: initial;--breadcrumb-font-family: initial;--breadcrumb-font-size: initial;--breadcrumb-font-weight: initial;--breadcrumb-line-height: initial}.breadcrumb{color:var(--breadcrumb-color);cursor:pointer;font-family:var(--breadcrumb-font-family);font-size:var(--breadcrumb-font-size);font-weight:var(--breadcrumb-font-weight);line-height:var(--breadcrumb-line-height);position:relative;text-decoration:none}.breadcrumb.current-page{color:var(--breadcrumb-current-page-color);cursor:default;font-weight:var(--breadcrumb-current-page-font-weight);pointer-events:none}.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{--breadcrumb-color: var(--ndw-color-grey-500);--breadcrumb-current-page-color: var(--ndw-color-grey-700);--breadcrumb-current-page-font-weight: var(--ndw-font-weight-bold);--breadcrumb-font-family: var(--ndw-font-family-body);--breadcrumb-font-size: var(--ndw-font-size-sm);--breadcrumb-font-weight: var(--ndw-font-weight-bold);--breadcrumb-line-height: 100%}.breadcrumb{background-color:inherit;padding:calc(var(--ndw-spacing-3xs) * 2.5) var(--ndw-spacing-xs);border-radius:var(--ndw-border-radius-sm);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.breadcrumb:hover{color:var(--ndw-color-grey-600);background-color:var(--ndw-color-grey-100);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.breadcrumb:focus:not(:active){color:var(--ndw-color-grey-500);outline:var(--ndw-border-size-sm) solid var(--ndw-color-secondary-500)}.breadcrumb:active{color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}\n", ":host{--breadcrumb-group-background-color: initial;--breadcrumb-group-chevron-size: initial;--breadcrumb-group-color: initial;--breadcrumb-group-padding: initial;align-items:center;background-color:var(--breadcrumb-group-background-color);color:var(--breadcrumb-group-color);display:flex;padding:var(--breadcrumb-group-padding)}.icon-back,.icon-forward{font-size:var(--breadcrumb-group-chevron-size)}.icon-back{display:none}: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-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", 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: 6.25rem}:host{--breadcrumb-group-background-color: var(--ndw-color-white);--breadcrumb-group-chevron-size: var(--ndw-font-size-md);--breadcrumb-group-color: var(--ndw-color-primary-500);--breadcrumb-group-padding: var(--ndw-spacing-md)}.icon-back,.icon-forward{margin-block-end:var(--ndw-spacing-3xs)}@media screen and (max-width: 1024px){.breadcrumb:not(.show-on-small-screen){display:none}.icon-back{display:block}.icon-forward{display:none}}\n"] }]
         }] });
 class CardContentComponent {
@@ -2623,11 +2111,11 @@ class DropdownComponent {
         this.isOpenChange.emit(isOpen);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: DropdownComponent, isStandalone: true, selector: "ndw-dropdown", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, chevron: { classPropertyName: "chevron", publicName: "chevron", isSignal: true, isRequired: false, transformFunction: null }, buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: true, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, selectAmount: { classPropertyName: "selectAmount", publicName: "selectAmount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tagClicked: "tagClicked", isOpenChange: "isOpenChange" }, viewQueries: [{ propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  type=\"button\"\n  #dropdownButton\n  ndwButton\n  filter\n  [ndwPopoverTrigger]=\"dropdownContent\"\n  (isOpenChange)=\"isOpenChanged($event)\"\n  (keydown)=\"onKeyDown($event)\"\n  [disabled]=\"disabled()\"\n  aria-haspopup=\"dialog\"\n>\n  @if (prefixIcon(); as prefixIconName) {\n    <ndw-icon class=\"dropdown-prefix-icon\">{{ prefixIconName }}</ndw-icon>\n  }\n\n  {{ buttonText() }}\n\n  @if (selectAmount()) {\n    <ndw-tag\n      [attr.disabled]=\"disabled() ? true : null\"\n      (keydown)=\"onTagKeyDown($event)\"\n      (clicked)=\"onTagClicked($event)\"\n    >\n      {{ selectAmount() }}\n    </ndw-tag>\n  }\n  @if (chevron()) {\n    <div class=\"button-end\">\n      <ndw-icon class=\"button-icon\">{{ buttonIcon() }}</ndw-icon>\n    </div>\n  }\n</button>\n\n<ng-template #dropdownContent>\n  <div role=\"dialog\" (keydown.escape)=\"closeDropdown()\">\n    <ng-content />\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block}button{width:100%;display:flex}.button-end{display:flex;justify-content:flex-end;flex-grow:1;gap:var(--ndw-spacing-2xs)}.button-end ndw-icon{display:flex;align-items:center}.dropdown-prefix-icon{color:var(--ndw-color-grey-300)}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: PopoverTriggerDirective, selector: "[ndwPopoverTrigger]", inputs: ["popoverPosition", "ndwPopoverTrigger", "toggleOnClick", "isOpen"], outputs: ["popoverToggled", "isOpenChange"], exportAs: ["ndwPopoverTrigger"] }, { kind: "component", type: TagComponent, selector: "ndw-tag", inputs: ["disabled", "suffixAriaLabel", "suffixIcon"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: DropdownComponent, isStandalone: true, selector: "ndw-dropdown", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, chevron: { classPropertyName: "chevron", publicName: "chevron", isSignal: true, isRequired: false, transformFunction: null }, buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: true, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, selectAmount: { classPropertyName: "selectAmount", publicName: "selectAmount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tagClicked: "tagClicked", isOpenChange: "isOpenChange" }, viewQueries: [{ propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  type=\"button\"\n  #dropdownButton\n  ndwButton\n  filter\n  [ndwPopoverTrigger]=\"dropdownContent\"\n  (isOpenChange)=\"isOpenChanged($event)\"\n  (keydown)=\"onKeyDown($event)\"\n  [disabled]=\"disabled()\"\n  aria-haspopup=\"dialog\"\n>\n  @if (prefixIcon(); as prefixIconName) {\n    <ndw-icon class=\"dropdown-prefix-icon\">{{ prefixIconName }}</ndw-icon>\n  }\n\n  {{ buttonText() }}\n\n  @if (selectAmount()) {\n    <ndw-tag\n      [attr.disabled]=\"disabled() ? true : null\"\n      (keydown)=\"onTagKeyDown($event)\"\n      (clicked)=\"onTagClicked($event)\"\n    >\n      {{ selectAmount() }}\n    </ndw-tag>\n  }\n  @if (chevron()) {\n    <div class=\"button-end\">\n      <ndw-icon class=\"button-icon\">{{ buttonIcon() }}</ndw-icon>\n    </div>\n  }\n</button>\n\n<ng-template #dropdownContent>\n  <div role=\"dialog\" (keydown.escape)=\"closeDropdown()\">\n    <ng-content />\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block}button{width:100%;display:flex}.button-end{display:flex;justify-content:flex-end;flex-grow:1;gap:var(--ndw-spacing-2xs)}.button-end ndw-icon{display:flex;align-items:center}.dropdown-prefix-icon{color:var(--ndw-color-grey-300)}div[role=dialog]{max-height:70vh;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: PopoverTriggerDirective, selector: "[ndwPopoverTrigger]", inputs: ["popoverPosition", "ndwPopoverTrigger", "toggleOnClick", "isOpen"], outputs: ["popoverToggled", "isOpenChange"], exportAs: ["ndwPopoverTrigger"] }, { kind: "component", type: TagComponent, selector: "ndw-tag", inputs: ["disabled", "suffixAriaLabel", "suffixIcon"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonDirective, IconComponent, PopoverTriggerDirective, TagComponent], selector: 'ndw-dropdown', template: "<button\n  type=\"button\"\n  #dropdownButton\n  ndwButton\n  filter\n  [ndwPopoverTrigger]=\"dropdownContent\"\n  (isOpenChange)=\"isOpenChanged($event)\"\n  (keydown)=\"onKeyDown($event)\"\n  [disabled]=\"disabled()\"\n  aria-haspopup=\"dialog\"\n>\n  @if (prefixIcon(); as prefixIconName) {\n    <ndw-icon class=\"dropdown-prefix-icon\">{{ prefixIconName }}</ndw-icon>\n  }\n\n  {{ buttonText() }}\n\n  @if (selectAmount()) {\n    <ndw-tag\n      [attr.disabled]=\"disabled() ? true : null\"\n      (keydown)=\"onTagKeyDown($event)\"\n      (clicked)=\"onTagClicked($event)\"\n    >\n      {{ selectAmount() }}\n    </ndw-tag>\n  }\n  @if (chevron()) {\n    <div class=\"button-end\">\n      <ndw-icon class=\"button-icon\">{{ buttonIcon() }}</ndw-icon>\n    </div>\n  }\n</button>\n\n<ng-template #dropdownContent>\n  <div role=\"dialog\" (keydown.escape)=\"closeDropdown()\">\n    <ng-content />\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block}button{width:100%;display:flex}.button-end{display:flex;justify-content:flex-end;flex-grow:1;gap:var(--ndw-spacing-2xs)}.button-end ndw-icon{display:flex;align-items:center}.dropdown-prefix-icon{color:var(--ndw-color-grey-300)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonDirective, IconComponent, PopoverTriggerDirective, TagComponent], selector: 'ndw-dropdown', template: "<button\n  type=\"button\"\n  #dropdownButton\n  ndwButton\n  filter\n  [ndwPopoverTrigger]=\"dropdownContent\"\n  (isOpenChange)=\"isOpenChanged($event)\"\n  (keydown)=\"onKeyDown($event)\"\n  [disabled]=\"disabled()\"\n  aria-haspopup=\"dialog\"\n>\n  @if (prefixIcon(); as prefixIconName) {\n    <ndw-icon class=\"dropdown-prefix-icon\">{{ prefixIconName }}</ndw-icon>\n  }\n\n  {{ buttonText() }}\n\n  @if (selectAmount()) {\n    <ndw-tag\n      [attr.disabled]=\"disabled() ? true : null\"\n      (keydown)=\"onTagKeyDown($event)\"\n      (clicked)=\"onTagClicked($event)\"\n    >\n      {{ selectAmount() }}\n    </ndw-tag>\n  }\n  @if (chevron()) {\n    <div class=\"button-end\">\n      <ndw-icon class=\"button-icon\">{{ buttonIcon() }}</ndw-icon>\n    </div>\n  }\n</button>\n\n<ng-template #dropdownContent>\n  <div role=\"dialog\" (keydown.escape)=\"closeDropdown()\">\n    <ng-content />\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block}button{width:100%;display:flex}.button-end{display:flex;justify-content:flex-end;flex-grow:1;gap:var(--ndw-spacing-2xs)}.button-end ndw-icon{display:flex;align-items:center}.dropdown-prefix-icon{color:var(--ndw-color-grey-300)}div[role=dialog]{max-height:70vh;display:flex;flex-direction:column}\n"] }]
         }] });
 class EditBarComponent {
@@ -2726,11 +2214,11 @@ class MainNavigationHeaderComponent {
         this.isMobileMenuOpen.update((open) => !open);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MainNavigationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: MainNavigationHeaderComponent, isStandalone: true, selector: "ndw-main-navigation-header", inputs: { applicationName: { classPropertyName: "applicationName", publicName: "applicationName", isSignal: true, isRequired: true, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: true, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, menuButtonLabel: { classPropertyName: "menuButtonLabel", publicName: "menuButtonLabel", isSignal: true, isRequired: true, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: true, transformFunction: null }, themeImagePath: { classPropertyName: "themeImagePath", publicName: "themeImagePath", isSignal: true, isRequired: true, transformFunction: null }, environment: { classPropertyName: "environment", publicName: "environment", isSignal: true, isRequired: false, transformFunction: null }, isMobileMenuOpen: { classPropertyName: "isMobileMenuOpen", publicName: "isMobileMenuOpen", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { isMobileMenuOpen: "isMobileMenuOpenChange" }, ngImport: i0, template: "<header [class.expanded]=\"isExpanded()\">\n  <a routerLink=\"/\">\n    <img [class]=\"theme()\" [src]=\"themeImagePath()\" [alt]=\"theme().toUpperCase() + ' logo'\" />\n    @if (isExpanded() || isMobile()) {\n      {{ applicationName() }}\n    }\n  </a>\n  @if (environment()) {\n    <ndw-pill [color]=\"environmentColor()\">\n      {{ isExpanded() || isMobile() ? environment() : environment()?.charAt(0) }}\n    </ndw-pill>\n  }\n  @if (isMobile()) {\n    <button ndwButton class=\"mobile-menu-button\" (click)=\"toggleMobileMenu()\">\n      {{ isMobileMenuOpen() ? closeButtonLabel() : menuButtonLabel() }}\n      <ndw-icon>\n        {{ isMobileMenuOpen() ? 'close' : 'menu' }}\n      </ndw-icon>\n    </button>\n  }\n</header>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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-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-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", 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: 6.25rem}header{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;flex-direction:column;align-items:center;display:flex;gap:var(--ndw-spacing-md);height:var(--ndw-main-navigation-mobile-header-height);margin-bottom:var(--ndw-spacing-md);padding-inline:0;position:relative}header a{color:var(--ndw-color-white);display:flex;flex-direction:column;gap:var(--ndw-spacing-xs);letter-spacing:.2rem;text-decoration:none;text-transform:uppercase}header a img{width:1rem}header ndw-pill{width:fit-content}header .mobile-menu-button{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);border-radius:var(--ndw-border-radius-lg);bottom:0;position:absolute;right:var(--ndw-spacing-md);text-transform:uppercase}header .mobile-menu-button ndw-icon{font-size:var(--ndw-font-size-lg)}header .mobile-menu-button:hover{background-color:var(--ndw-color-grey-400);border-color:var(--ndw-color-grey-400)}header .mobile-menu-button:active{background-color:var(--ndw-color-grey-500);border-color:var(--ndw-color-grey-500)}header.expanded{align-items:flex-start;padding-inline:var(--ndw-spacing-md)}header.expanded a img{width:4rem}header.expanded a img.nwb{width:6rem}@media screen and (max-width: 1024px){header{align-items:flex-start;padding-inline:var(--ndw-spacing-md)}header a{flex-direction:row;gap:var(--ndw-spacing-md)}header a img{width:4rem}header a img.nwb{width:6rem}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: PillComponent, selector: "ndw-pill", inputs: ["color"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: MainNavigationHeaderComponent, isStandalone: true, selector: "ndw-main-navigation-header", inputs: { applicationName: { classPropertyName: "applicationName", publicName: "applicationName", isSignal: true, isRequired: true, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: true, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, menuButtonLabel: { classPropertyName: "menuButtonLabel", publicName: "menuButtonLabel", isSignal: true, isRequired: true, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: true, transformFunction: null }, themeImagePath: { classPropertyName: "themeImagePath", publicName: "themeImagePath", isSignal: true, isRequired: true, transformFunction: null }, environment: { classPropertyName: "environment", publicName: "environment", isSignal: true, isRequired: false, transformFunction: null }, isMobileMenuOpen: { classPropertyName: "isMobileMenuOpen", publicName: "isMobileMenuOpen", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { isMobileMenuOpen: "isMobileMenuOpenChange" }, ngImport: i0, template: "<header [class.expanded]=\"isExpanded()\">\n  <a routerLink=\"/\">\n    <img [class]=\"theme()\" [src]=\"themeImagePath()\" [alt]=\"theme().toUpperCase() + ' logo'\" />\n    @if (isExpanded() || isMobile()) {\n      {{ applicationName() }}\n    }\n  </a>\n  @if (environment()) {\n    <ndw-pill [color]=\"environmentColor()\">\n      {{ isExpanded() || isMobile() ? environment() : environment()?.charAt(0) }}\n    </ndw-pill>\n  }\n  @if (isMobile()) {\n    <button ndwButton class=\"mobile-menu-button\" (click)=\"toggleMobileMenu()\">\n      {{ isMobileMenuOpen() ? closeButtonLabel() : menuButtonLabel() }}\n      <ndw-icon>\n        {{ isMobileMenuOpen() ? 'close' : 'menu' }}\n      </ndw-icon>\n    </button>\n  }\n</header>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", 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: 6.25rem}header{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;flex-direction:column;align-items:center;display:flex;gap:var(--ndw-spacing-md);height:var(--ndw-main-navigation-mobile-header-height);margin-bottom:var(--ndw-spacing-md);padding-inline:0;position:relative}header a{color:var(--ndw-color-white);display:flex;flex-direction:column;gap:var(--ndw-spacing-xs);letter-spacing:.2rem;text-decoration:none;text-transform:uppercase}header a img{width:1rem}header ndw-pill{width:fit-content}header .mobile-menu-button{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);border-radius:var(--ndw-border-radius-lg);bottom:0;position:absolute;right:var(--ndw-spacing-md);text-transform:uppercase}header .mobile-menu-button ndw-icon{font-size:var(--ndw-font-size-lg)}header .mobile-menu-button:hover{background-color:var(--ndw-color-grey-400);border-color:var(--ndw-color-grey-400)}header .mobile-menu-button:active{background-color:var(--ndw-color-grey-500);border-color:var(--ndw-color-grey-500)}header.expanded{align-items:flex-start;padding-inline:var(--ndw-spacing-md)}header.expanded a img{width:4rem}header.expanded a img.nwb{width:6rem}@media screen and (max-width: 1024px){header{align-items:flex-start;padding-inline:var(--ndw-spacing-md)}header a{flex-direction:row;gap:var(--ndw-spacing-md)}header a img{width:4rem}header a img.nwb{width:6rem}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: PillComponent, selector: "ndw-pill", inputs: ["color"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MainNavigationHeaderComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, PillComponent, RouterLink], selector: 'ndw-main-navigation-header', template: "<header [class.expanded]=\"isExpanded()\">\n  <a routerLink=\"/\">\n    <img [class]=\"theme()\" [src]=\"themeImagePath()\" [alt]=\"theme().toUpperCase() + ' logo'\" />\n    @if (isExpanded() || isMobile()) {\n      {{ applicationName() }}\n    }\n  </a>\n  @if (environment()) {\n    <ndw-pill [color]=\"environmentColor()\">\n      {{ isExpanded() || isMobile() ? environment() : environment()?.charAt(0) }}\n    </ndw-pill>\n  }\n  @if (isMobile()) {\n    <button ndwButton class=\"mobile-menu-button\" (click)=\"toggleMobileMenu()\">\n      {{ isMobileMenuOpen() ? closeButtonLabel() : menuButtonLabel() }}\n      <ndw-icon>\n        {{ isMobileMenuOpen() ? 'close' : 'menu' }}\n      </ndw-icon>\n    </button>\n  }\n</header>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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-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-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", 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: 6.25rem}header{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;flex-direction:column;align-items:center;display:flex;gap:var(--ndw-spacing-md);height:var(--ndw-main-navigation-mobile-header-height);margin-bottom:var(--ndw-spacing-md);padding-inline:0;position:relative}header a{color:var(--ndw-color-white);display:flex;flex-direction:column;gap:var(--ndw-spacing-xs);letter-spacing:.2rem;text-decoration:none;text-transform:uppercase}header a img{width:1rem}header ndw-pill{width:fit-content}header .mobile-menu-button{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);border-radius:var(--ndw-border-radius-lg);bottom:0;position:absolute;right:var(--ndw-spacing-md);text-transform:uppercase}header .mobile-menu-button ndw-icon{font-size:var(--ndw-font-size-lg)}header .mobile-menu-button:hover{background-color:var(--ndw-color-grey-400);border-color:var(--ndw-color-grey-400)}header .mobile-menu-button:active{background-color:var(--ndw-color-grey-500);border-color:var(--ndw-color-grey-500)}header.expanded{align-items:flex-start;padding-inline:var(--ndw-spacing-md)}header.expanded a img{width:4rem}header.expanded a img.nwb{width:6rem}@media screen and (max-width: 1024px){header{align-items:flex-start;padding-inline:var(--ndw-spacing-md)}header a{flex-direction:row;gap:var(--ndw-spacing-md)}header a img{width:4rem}header a img.nwb{width:6rem}}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, PillComponent, RouterLink], selector: 'ndw-main-navigation-header', template: "<header [class.expanded]=\"isExpanded()\">\n  <a routerLink=\"/\">\n    <img [class]=\"theme()\" [src]=\"themeImagePath()\" [alt]=\"theme().toUpperCase() + ' logo'\" />\n    @if (isExpanded() || isMobile()) {\n      {{ applicationName() }}\n    }\n  </a>\n  @if (environment()) {\n    <ndw-pill [color]=\"environmentColor()\">\n      {{ isExpanded() || isMobile() ? environment() : environment()?.charAt(0) }}\n    </ndw-pill>\n  }\n  @if (isMobile()) {\n    <button ndwButton class=\"mobile-menu-button\" (click)=\"toggleMobileMenu()\">\n      {{ isMobileMenuOpen() ? closeButtonLabel() : menuButtonLabel() }}\n      <ndw-icon>\n        {{ isMobileMenuOpen() ? 'close' : 'menu' }}\n      </ndw-icon>\n    </button>\n  }\n</header>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", 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: 6.25rem}header{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;flex-direction:column;align-items:center;display:flex;gap:var(--ndw-spacing-md);height:var(--ndw-main-navigation-mobile-header-height);margin-bottom:var(--ndw-spacing-md);padding-inline:0;position:relative}header a{color:var(--ndw-color-white);display:flex;flex-direction:column;gap:var(--ndw-spacing-xs);letter-spacing:.2rem;text-decoration:none;text-transform:uppercase}header a img{width:1rem}header ndw-pill{width:fit-content}header .mobile-menu-button{background-color:var(--ndw-color-grey-600);border-color:var(--ndw-color-grey-600);border-radius:var(--ndw-border-radius-lg);bottom:0;position:absolute;right:var(--ndw-spacing-md);text-transform:uppercase}header .mobile-menu-button ndw-icon{font-size:var(--ndw-font-size-lg)}header .mobile-menu-button:hover{background-color:var(--ndw-color-grey-400);border-color:var(--ndw-color-grey-400)}header .mobile-menu-button:active{background-color:var(--ndw-color-grey-500);border-color:var(--ndw-color-grey-500)}header.expanded{align-items:flex-start;padding-inline:var(--ndw-spacing-md)}header.expanded a img{width:4rem}header.expanded a img.nwb{width:6rem}@media screen and (max-width: 1024px){header{align-items:flex-start;padding-inline:var(--ndw-spacing-md)}header a{flex-direction:row;gap:var(--ndw-spacing-md)}header a img{width:4rem}header a img.nwb{width:6rem}}\n"] }]
         }] });
 class MainNavigationMenuComponent {
@@ -2766,11 +2254,11 @@ class MainNavigationMenuComponent {
         this.setActiveMobileItem(this.activeMobileItem() === item ? undefined : item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MainNavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", 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 cdkMenuItem ndwButton menu (click)=\"closeMobileMenu(item)\">\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            {{ item.label }}\n          }\n        </button>\n      } @else {\n        <a\n          cdkMenuItem\n          ndwButton\n          menu\n          [queryParams]=\"item.queryParams\"\n          [routerLink]=\"item.path\"\n          (click)=\"closeMobileMenu()\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            {{ item.label }}\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          @if (isExpanded() || isMobile()) {\n            {{ item.label }}\n            <ndw-icon class=\"suffix\">\n              {{ activeMobileItem() !== item ? 'arrow_drop_down' : 'arrow_drop_up' }}\n            </ndw-icon>\n          }\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                class=\"sub-menu-button\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                {{ subItem.label }}\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                {{ subItem.label }}\n              </a>\n            }\n          }\n        }\n      } @else {\n        <button cdkMenuItem ndwButton menu [cdkMenuTriggerFor]=\"subMenu\">\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            {{ item.label }}\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 cdkMenuItem ndwButton menu (click)=\"subItem.callback()\">\n                {{ subItem.label }}\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n              >\n                {{ subItem.label }}\n              </a>\n            }\n          }\n        </div>\n      </ng-template>\n    }\n  }\n</div>\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-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-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", 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: 6.25rem}.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 [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-white)}@media screen and (min-width: 1024px){.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-400)}}@media screen and (max-width: 1024px){.menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}}.sub-menu{background-color:var(--ndw-color-grey-700);min-width:10rem}.sub-menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-sm)}\n"], dependencies: [{ 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"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", 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 cdkMenuItem ndwButton menu (click)=\"closeMobileMenu(item)\">\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            {{ item.label }}\n          }\n        </button>\n      } @else {\n        <a\n          cdkMenuItem\n          ndwButton\n          menu\n          [queryParams]=\"item.queryParams\"\n          [routerLink]=\"item.path\"\n          (click)=\"closeMobileMenu()\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            {{ item.label }}\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          @if (isExpanded() || isMobile()) {\n            {{ item.label }}\n            <ndw-icon class=\"suffix\">\n              {{ activeMobileItem() !== item ? 'arrow_drop_down' : 'arrow_drop_up' }}\n            </ndw-icon>\n          }\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                class=\"sub-menu-button\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                {{ subItem.label }}\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                {{ subItem.label }}\n              </a>\n            }\n          }\n        }\n      } @else {\n        <button cdkMenuItem ndwButton menu [cdkMenuTriggerFor]=\"subMenu\">\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            {{ item.label }}\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 cdkMenuItem ndwButton menu (click)=\"subItem.callback()\">\n                {{ subItem.label }}\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n              >\n                {{ subItem.label }}\n              </a>\n            }\n          }\n        </div>\n      </ng-template>\n    }\n  }\n</div>\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-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", 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: 6.25rem}.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 [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-white)}@media screen and (min-width: 1024px){.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-400)}}@media screen and (max-width: 1024px){.menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}}.sub-menu{background-color:var(--ndw-color-grey-700);min-width:10rem}.sub-menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-sm)}\n"], dependencies: [{ 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"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MainNavigationMenuComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CdkMenu, CdkMenuItem, CdkMenuTrigger, IconComponent, RouterLink], 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 cdkMenuItem ndwButton menu (click)=\"closeMobileMenu(item)\">\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            {{ item.label }}\n          }\n        </button>\n      } @else {\n        <a\n          cdkMenuItem\n          ndwButton\n          menu\n          [queryParams]=\"item.queryParams\"\n          [routerLink]=\"item.path\"\n          (click)=\"closeMobileMenu()\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            {{ item.label }}\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          @if (isExpanded() || isMobile()) {\n            {{ item.label }}\n            <ndw-icon class=\"suffix\">\n              {{ activeMobileItem() !== item ? 'arrow_drop_down' : 'arrow_drop_up' }}\n            </ndw-icon>\n          }\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                class=\"sub-menu-button\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                {{ subItem.label }}\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                {{ subItem.label }}\n              </a>\n            }\n          }\n        }\n      } @else {\n        <button cdkMenuItem ndwButton menu [cdkMenuTriggerFor]=\"subMenu\">\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            {{ item.label }}\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 cdkMenuItem ndwButton menu (click)=\"subItem.callback()\">\n                {{ subItem.label }}\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n              >\n                {{ subItem.label }}\n              </a>\n            }\n          }\n        </div>\n      </ng-template>\n    }\n  }\n</div>\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-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-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", 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: 6.25rem}.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 [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-white)}@media screen and (min-width: 1024px){.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-400)}}@media screen and (max-width: 1024px){.menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}}.sub-menu{background-color:var(--ndw-color-grey-700);min-width:10rem}.sub-menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-sm)}\n"] }]
+            args: [{ imports: [CdkMenu, CdkMenuItem, CdkMenuTrigger, IconComponent, RouterLink], 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 cdkMenuItem ndwButton menu (click)=\"closeMobileMenu(item)\">\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            {{ item.label }}\n          }\n        </button>\n      } @else {\n        <a\n          cdkMenuItem\n          ndwButton\n          menu\n          [queryParams]=\"item.queryParams\"\n          [routerLink]=\"item.path\"\n          (click)=\"closeMobileMenu()\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            {{ item.label }}\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          @if (isExpanded() || isMobile()) {\n            {{ item.label }}\n            <ndw-icon class=\"suffix\">\n              {{ activeMobileItem() !== item ? 'arrow_drop_down' : 'arrow_drop_up' }}\n            </ndw-icon>\n          }\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                class=\"sub-menu-button\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                {{ subItem.label }}\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                {{ subItem.label }}\n              </a>\n            }\n          }\n        }\n      } @else {\n        <button cdkMenuItem ndwButton menu [cdkMenuTriggerFor]=\"subMenu\">\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            {{ item.label }}\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 cdkMenuItem ndwButton menu (click)=\"subItem.callback()\">\n                {{ subItem.label }}\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n              >\n                {{ subItem.label }}\n              </a>\n            }\n          }\n        </div>\n      </ng-template>\n    }\n  }\n</div>\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-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", 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: 6.25rem}.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 [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-white)}@media screen and (min-width: 1024px){.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-400)}}@media screen and (max-width: 1024px){.menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}}.sub-menu{background-color:var(--ndw-color-grey-700);min-width:10rem}.sub-menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-sm)}\n"] }]
         }] });
 class MainNavigationComponent {
@@ -2817,14 +2305,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: "19.0.7", ngImport: i0, type: MainNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", 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 }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", 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 }, menuButtonLabel: { classPropertyName: "menuButtonLabel", publicName: "menuButtonLabel", 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  [closeButtonLabel]=\"closeButtonLabel()\"\n  [environment]=\"environment()\"\n  [isExpanded]=\"isExpanded()\"\n  [isMobile]=\"isMobile()\"\n  [menuButtonLabel]=\"menuButtonLabel()\"\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: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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-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-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", 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: 6.25rem}:host{background-color:var(--ndw-color-grey-700);box-sizing:border-box;color:var(--ndw-color-grey-400);display:grid;grid-template-rows:auto 1fr;height:100%;padding-top:var(--ndw-spacing-lg);width:var(--main-navigation-collapse-width)}@media screen and (max-width: 1024px){:host{height:var(--main-navigation-mobile-header-height);width:100%}}.content{background-color:var(--ndw-color-grey-700);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){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", "closeButtonLabel", "isExpanded", "isMobile", "menuButtonLabel", "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: "19.0.7", 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 }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", 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 }, menuButtonLabel: { classPropertyName: "menuButtonLabel", publicName: "menuButtonLabel", 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  [closeButtonLabel]=\"closeButtonLabel()\"\n  [environment]=\"environment()\"\n  [isExpanded]=\"isExpanded()\"\n  [isMobile]=\"isMobile()\"\n  [menuButtonLabel]=\"menuButtonLabel()\"\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: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", 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: 6.25rem}:host{background-color:var(--ndw-color-grey-700);box-sizing:border-box;color:var(--ndw-color-grey-400);display:grid;grid-template-rows:auto 1fr;height:100%;padding-top:var(--ndw-spacing-lg);width:var(--main-navigation-collapse-width)}@media screen and (max-width: 1024px){:host{height:var(--main-navigation-mobile-header-height);width:100%}}.content{background-color:var(--ndw-color-grey-700);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){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", "closeButtonLabel", "isExpanded", "isMobile", "menuButtonLabel", "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: "19.0.7", 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  [closeButtonLabel]=\"closeButtonLabel()\"\n  [environment]=\"environment()\"\n  [isExpanded]=\"isExpanded()\"\n  [isMobile]=\"isMobile()\"\n  [menuButtonLabel]=\"menuButtonLabel()\"\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: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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-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-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", 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: 6.25rem}:host{background-color:var(--ndw-color-grey-700);box-sizing:border-box;color:var(--ndw-color-grey-400);display:grid;grid-template-rows:auto 1fr;height:100%;padding-top:var(--ndw-spacing-lg);width:var(--main-navigation-collapse-width)}@media screen and (max-width: 1024px){:host{height:var(--main-navigation-mobile-header-height);width:100%}}.content{background-color:var(--ndw-color-grey-700);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){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  [closeButtonLabel]=\"closeButtonLabel()\"\n  [environment]=\"environment()\"\n  [isExpanded]=\"isExpanded()\"\n  [isMobile]=\"isMobile()\"\n  [menuButtonLabel]=\"menuButtonLabel()\"\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: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", 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: 6.25rem}:host{background-color:var(--ndw-color-grey-700);box-sizing:border-box;color:var(--ndw-color-grey-400);display:grid;grid-template-rows:auto 1fr;height:100%;padding-top:var(--ndw-spacing-lg);width:var(--main-navigation-collapse-width)}@media screen and (max-width: 1024px){:host{height:var(--main-navigation-mobile-header-height);width:100%}}.content{background-color:var(--ndw-color-grey-700);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){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"] }]
         }] });
 class LayoutComponent {
@@ -2837,11 +2325,11 @@ class LayoutComponent {
     menuFooterTexts = input();
     version = input();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: LayoutComponent, isStandalone: true, selector: "ndw-layout", 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 }, isCollapsible: { classPropertyName: "isCollapsible", publicName: "isCollapsible", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, menuFooterTexts: { classPropertyName: "menuFooterTexts", publicName: "menuFooterTexts", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ndw-main-navigation\n  [applicationName]=\"applicationName()\"\n  [bottomMenuItems]=\"bottomMenuItems()\"\n  [environment]=\"environment()\"\n  [footerTexts]=\"menuFooterTexts()\"\n  [isCollapsible]=\"isCollapsible()\"\n  [isExpanded]=\"isExpanded()\"\n  [topMenuItems]=\"topMenuItems()\"\n  [version]=\"version()\"\n/>\n<main cdk-scrollable>\n  <ng-content />\n</main>\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-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-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", 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: 6.25rem}:host{background-color:var(--ndw-color-grey-100);display:grid;grid-template-columns:auto 1fr;height:100svh;position:absolute;width:100svw}:host main{align-content:flex-start;display:grid;grid-template-columns:1fr;height:100%;overflow-y:auto;width:100%;z-index:1}@media screen and (max-width: 1024px){:host{grid-template-columns:1fr;grid-template-rows:auto 1fr}}\n"], dependencies: [{ kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: MainNavigationComponent, selector: "ndw-main-navigation", inputs: ["applicationName", "topMenuItems", "bottomMenuItems", "closeButtonLabel", "environment", "footerTexts", "isCollapsible", "menuButtonLabel", "version", "isExpanded"], outputs: ["isExpandedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: LayoutComponent, isStandalone: true, selector: "ndw-layout", 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 }, isCollapsible: { classPropertyName: "isCollapsible", publicName: "isCollapsible", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, menuFooterTexts: { classPropertyName: "menuFooterTexts", publicName: "menuFooterTexts", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ndw-main-navigation\n  [applicationName]=\"applicationName()\"\n  [bottomMenuItems]=\"bottomMenuItems()\"\n  [environment]=\"environment()\"\n  [footerTexts]=\"menuFooterTexts()\"\n  [isCollapsible]=\"isCollapsible()\"\n  [isExpanded]=\"isExpanded()\"\n  [topMenuItems]=\"topMenuItems()\"\n  [version]=\"version()\"\n/>\n<main cdk-scrollable>\n  <ng-content />\n</main>\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-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", 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: 6.25rem}:host{background-color:var(--ndw-color-grey-100);display:grid;grid-template-columns:auto 1fr;height:100svh;position:absolute;width:100svw}:host main{align-content:flex-start;display:grid;grid-template-columns:1fr;height:100%;overflow-y:auto;width:100%;z-index:1}@media screen and (max-width: 1024px){:host{grid-template-columns:1fr;grid-template-rows:auto 1fr}}\n"], dependencies: [{ kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: MainNavigationComponent, selector: "ndw-main-navigation", inputs: ["applicationName", "topMenuItems", "bottomMenuItems", "closeButtonLabel", "environment", "footerTexts", "isCollapsible", "menuButtonLabel", "version", "isExpanded"], outputs: ["isExpandedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkScrollable, MainNavigationComponent], selector: 'ndw-layout', template: "<ndw-main-navigation\n  [applicationName]=\"applicationName()\"\n  [bottomMenuItems]=\"bottomMenuItems()\"\n  [environment]=\"environment()\"\n  [footerTexts]=\"menuFooterTexts()\"\n  [isCollapsible]=\"isCollapsible()\"\n  [isExpanded]=\"isExpanded()\"\n  [topMenuItems]=\"topMenuItems()\"\n  [version]=\"version()\"\n/>\n<main cdk-scrollable>\n  <ng-content />\n</main>\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-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-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", 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: 6.25rem}:host{background-color:var(--ndw-color-grey-100);display:grid;grid-template-columns:auto 1fr;height:100svh;position:absolute;width:100svw}:host main{align-content:flex-start;display:grid;grid-template-columns:1fr;height:100%;overflow-y:auto;width:100%;z-index:1}@media screen and (max-width: 1024px){:host{grid-template-columns:1fr;grid-template-rows:auto 1fr}}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkScrollable, MainNavigationComponent], selector: 'ndw-layout', template: "<ndw-main-navigation\n  [applicationName]=\"applicationName()\"\n  [bottomMenuItems]=\"bottomMenuItems()\"\n  [environment]=\"environment()\"\n  [footerTexts]=\"menuFooterTexts()\"\n  [isCollapsible]=\"isCollapsible()\"\n  [isExpanded]=\"isExpanded()\"\n  [topMenuItems]=\"topMenuItems()\"\n  [version]=\"version()\"\n/>\n<main cdk-scrollable>\n  <ng-content />\n</main>\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-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", 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: 6.25rem}:host{background-color:var(--ndw-color-grey-100);display:grid;grid-template-columns:auto 1fr;height:100svh;position:absolute;width:100svw}:host main{align-content:flex-start;display:grid;grid-template-columns:1fr;height:100%;overflow-y:auto;width:100%;z-index:1}@media screen and (max-width: 1024px){:host{grid-template-columns:1fr;grid-template-rows:auto 1fr}}\n"] }]
         }] });
 class LayoutBannersComponent {
@@ -2872,14 +2360,20 @@ const fontMapButtonIcons = [
     'zoom-in',
     'zoom-out',
 ];
-const svgMapButtonIcons = ['hectometer', 'low-res', 'zoom-to-content'];
+const svgMapButtonIcons = [
+    'add-traffic-sign',
+    'add-zone',
+    'hectometer',
+    'low-res',
+    'zoom-to-content',
+];
 const mapButtonIcons = [...fontMapButtonIcons, ...svgMapButtonIcons];
 class MapButtonComponent {
     icon = input.required();
+    active = input(false);
     ariaLabel = input();
     disabled = input(false);
-    active = input(false);
     clicked = output();
     buttonIcon = computed(() => this.#icons[this.icon()]);
     svgIcon = computed(() => {
@@ -2898,6 +2392,8 @@ class MapButtonComponent {
     });
     // Mapping from button icon names to Material icons or SVG icon IDs.
     #icons = {
+        'add-traffic-sign': 'add_traffic_sign',
+        'add-zone': 'add_zone',
         direction: 'explore',
         gps: 'my_location',
         hectometer: 'hectometer',
@@ -2911,6 +2407,8 @@ class MapButtonComponent {
         'zoom-to-content': 'zoom-to-content',
     };
     #iconLabels = {
+        'add-traffic-sign': 'Voeg verkeersbord toe',
+        'add-zone': 'Voeg een zone toe',
         direction: 'Herstel kaartrichting',
         gps: 'Ga naar mijn locatie',
         hectometer: 'Toon hectometrering',
@@ -2924,11 +2422,11 @@ class MapButtonComponent {
         'zoom-to-content': 'Zoom naar inhoud',
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MapButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: MapButtonComponent, isStandalone: true, selector: "ndw-map-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  [disabled]=\"disabled()\"\n  [class.active]=\"active()\"\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 {\n    <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n  }\n  <div class=\"content-wrapper\">\n    <ng-content />\n  </div>\n</button>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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}button{display:flex;align-items:center;justify-content:center;min-height:40px;min-width:40px;border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-sm);box-shadow:var(--ndw-elevation-content);color:var(--ndw-color-grey-500);background-color:var(--ndw-color-white)}button .content-wrapper:not(:empty){font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;line-height:1rem;padding-inline:var(--ndw-spacing-xs)}button.active{color:var(--ndw-color-primary-500)}button.active ndw-icon{font-variation-settings:\"FILL\" 1}button:hover{background-color:var(--ndw-color-grey-100)}button:disabled{pointer-events:none;color:var(--ndw-color-grey-300)}\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: "19.0.7", type: MapButtonComponent, isStandalone: true, selector: "ndw-map-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, 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 {\n    <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n  }\n  <div class=\"content-wrapper\">\n    <ng-content />\n  </div>\n</button>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MapButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndw-map-button', imports: [IconComponent, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [disabled]=\"disabled()\"\n  [class.active]=\"active()\"\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 {\n    <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n  }\n  <div class=\"content-wrapper\">\n    <ng-content />\n  </div>\n</button>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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}button{display:flex;align-items:center;justify-content:center;min-height:40px;min-width:40px;border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-sm);box-shadow:var(--ndw-elevation-content);color:var(--ndw-color-grey-500);background-color:var(--ndw-color-white)}button .content-wrapper:not(:empty){font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;line-height:1rem;padding-inline:var(--ndw-spacing-xs)}button.active{color:var(--ndw-color-primary-500)}button.active ndw-icon{font-variation-settings:\"FILL\" 1}button:hover{background-color:var(--ndw-color-grey-100)}button:disabled{pointer-events:none;color:var(--ndw-color-grey-300)}\n"] }]
+            args: [{ selector: 'ndw-map-button', imports: [IconComponent, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, 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 {\n    <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n  }\n  <div class=\"content-wrapper\">\n    <ng-content />\n  </div>\n</button>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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"] }]
         }] });
 class MapDisplayOptionComponent {
@@ -3016,30 +2514,30 @@ class MapDisplayComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MapDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: MapDisplayComponent, isStandalone: true, selector: "ndw-map-display", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, backgroundsTitle: { classPropertyName: "backgroundsTitle", publicName: "backgroundsTitle", isSignal: true, isRequired: false, transformFunction: null }, layersTitle: { classPropertyName: "layersTitle", publicName: "layersTitle", isSignal: true, isRequired: false, transformFunction: null }, enableClearLayers: { classPropertyName: "enableClearLayers", publicName: "enableClearLayers", isSignal: true, isRequired: false, transformFunction: null }, layerOptionType: { classPropertyName: "layerOptionType", publicName: "layerOptionType", isSignal: true, isRequired: false, transformFunction: null }, backgroundOptions: { classPropertyName: "backgroundOptions", publicName: "backgroundOptions", isSignal: true, isRequired: false, transformFunction: null }, layerOptions: { classPropertyName: "layerOptions", publicName: "layerOptions", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backgroundChange: "backgroundChange", layerChange: "layerChange", clearAllLayers: "clearAllLayers", open: "openChange" }, ngImport: i0, template: "<div class=\"display\" [class.active]=\"open()\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  @let activeBackground = activeBackgroundOption();\n  @if (activeBackground) {\n    <ndw-map-display-option [option]=\"activeBackground\" [type]=\"'none'\" />\n  }\n\n  <button type=\"button\" (click)=\"open.set(!open())\">\n    {{ title() }}\n  </button>\n\n  @if (numberOfSelectedLayers() && enableClearLayers()) {\n    <ndw-tag (clicked)=\"clearLayers()\">{{ numberOfSelectedLayers() }}</ndw-tag>\n  }\n\n  <ndw-icon>keyboard_arrow_down</ndw-icon>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"showPopover()\"\n  (detach)=\"open.set(false)\"\n  (overlayOutsideClick)=\"open.set(false)\"\n>\n  <div class=\"display-dropdown\">\n    <header>\n      <h3 class=\"ndw-paragraph-bold-lg\">{{ title() }}</h3>\n      <button ndwButton tertiary title=\"Button\" type=\"button\" (click)=\"open.set(false)\">\n        <ndw-icon>close</ndw-icon>\n      </button>\n    </header>\n\n    <div class=\"display-dropdown__content\">\n      @if (linkedBackgroundOptions().length) {\n        <section class=\"display-dropdown__section\">\n          <h4 class=\"ndw-paragraph-bold-md display-dropdown__subtitle\">{{ backgroundsTitle() }}</h4>\n          <ul class=\"display-dropdown__backgrounds\">\n            @for (backgroundOption of linkedBackgroundOptions(); track backgroundOption.id) {\n              <li>\n                <ndw-map-display-option\n                  [option]=\"backgroundOption\"\n                  [group]=\"'map-backgrounds'\"\n                  [type]=\"'radio'\"\n                  [direction]=\"'column'\"\n                  (selectionChange)=\"selectBackground($event)\"\n                />\n              </li>\n            }\n          </ul>\n        </section>\n      }\n\n      @if (linkedLayerOptions().length) {\n        <section class=\"display-dropdown__section\">\n          <h4 class=\"ndw-paragraph-bold-md display-dropdown__subtitle\">{{ layersTitle() }}</h4>\n          <ul>\n            @for (layerOption of linkedLayerOptions(); track layerOption.id) {\n              <li>\n                <ndw-map-display-option\n                  [option]=\"layerOption\"\n                  [group]=\"'map-layers'\"\n                  [type]=\"layerOptionType()\"\n                  [direction]=\"'row'\"\n                  (selectionChange)=\"toggleLayer($event)\"\n                />\n              </li>\n            }\n          </ul>\n        </section>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".display{position:relative;overflow:hidden;display:inline-flex;gap:var(--ndw-spacing-2xs);align-items:center;height:40px;padding:.25rem;border:1px solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-sm);background-color:var(--ndw-color-white);transition:var(--ndw-animation-speed-default)}.display:hover{background-color:var(--ndw-color-grey-100)}.display.active ndw-icon{rotate:180deg}.display button{border:none;background:none;padding:var(--ndw-spacing-xs);color:var(--ndw-color-grey-600);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-bold)}.display button:after{content:\"\";position:absolute;inset:0}.display ndw-icon{pointer-events:none;padding:.25rem;color:var(--ndw-color-primary);transition-property:rotate;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out;transition-delay:0s}.display-dropdown{max-height:380px;display:grid;grid-template-rows:max-content 1fr;padding:var(--ndw-spacing-2xs);width:226px;border:1px solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-sm);box-shadow:var(--ndw-elevation-dropdown);background-color:var(--ndw-color-white)}.display-dropdown header{display:flex;justify-content:space-between;align-items:center;gap:var(--ndw-spacing-xs);padding:var(--ndw-spacing-xs) 0 var(--ndw-spacing-xs) var(--ndw-spacing-2xs)}.display-dropdown header h3{color:var(--ndw-color-grey-600);margin-block:0}.display-dropdown__content{overflow-y:auto}.display-dropdown__section:not(:first-of-type){margin-top:var(--ndw-spacing-md)}.display-dropdown ul{margin-block-start:var(--ndw-spacing-xs);margin-block-end:0;list-style-type:none;padding:0}.display-dropdown ul.display-dropdown__backgrounds{display:flex;flex-wrap:wrap;align-items:start;justify-content:space-between;gap:var(--ndw-spacing-2xs)}.display-dropdown__subtitle{color:var(--ndw-color-grey-600);padding-inline:var(--ndw-spacing-2xs);margin-block:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MapDisplayOptionComponent, selector: "ndw-map-display-option", inputs: ["option", "direction", "type", "group"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: TagComponent, selector: "ndw-tag", inputs: ["disabled", "suffixAriaLabel", "suffixIcon"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: MapDisplayComponent, isStandalone: true, selector: "ndw-map-display", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, backgroundsTitle: { classPropertyName: "backgroundsTitle", publicName: "backgroundsTitle", isSignal: true, isRequired: false, transformFunction: null }, layersTitle: { classPropertyName: "layersTitle", publicName: "layersTitle", isSignal: true, isRequired: false, transformFunction: null }, enableClearLayers: { classPropertyName: "enableClearLayers", publicName: "enableClearLayers", isSignal: true, isRequired: false, transformFunction: null }, layerOptionType: { classPropertyName: "layerOptionType", publicName: "layerOptionType", isSignal: true, isRequired: false, transformFunction: null }, backgroundOptions: { classPropertyName: "backgroundOptions", publicName: "backgroundOptions", isSignal: true, isRequired: false, transformFunction: null }, layerOptions: { classPropertyName: "layerOptions", publicName: "layerOptions", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backgroundChange: "backgroundChange", layerChange: "layerChange", clearAllLayers: "clearAllLayers", open: "openChange" }, ngImport: i0, template: "<div class=\"map-control\" [class.active]=\"open()\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  @let activeBackground = activeBackgroundOption();\n  @if (activeBackground) {\n    <ndw-map-display-option [option]=\"activeBackground\" [type]=\"'none'\" />\n  }\n\n  <button class=\"content-wrapper\" type=\"button\" (click)=\"open.set(!open())\">\n    {{ title() }}\n  </button>\n\n  @if (numberOfSelectedLayers() && enableClearLayers()) {\n    <ndw-tag (clicked)=\"clearLayers()\">{{ numberOfSelectedLayers() }}</ndw-tag>\n  }\n\n  <ndw-icon class=\"map-control__chevron\">keyboard_arrow_down</ndw-icon>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"showPopover()\"\n  (detach)=\"open.set(false)\"\n  (overlayOutsideClick)=\"open.set(false)\"\n>\n  <div class=\"map-control-dropdown\">\n    <header>\n      <h3 class=\"ndw-paragraph-bold-lg\">{{ title() }}</h3>\n      <button ndwButton tertiary type=\"button\" (click)=\"open.set(false)\">\n        <ndw-icon>close</ndw-icon>\n        <span class=\"sr-only\">Sluit {{ title() }}</span>\n      </button>\n    </header>\n\n    <div class=\"map-control-dropdown__content\">\n      @if (linkedBackgroundOptions().length) {\n        <section class=\"map-control-dropdown__section\">\n          <h4 class=\"ndw-paragraph-bold-md map-control-dropdown__subtitle\">\n            {{ backgroundsTitle() }}\n          </h4>\n          <ul class=\"map-control-dropdown__backgrounds\">\n            @for (backgroundOption of linkedBackgroundOptions(); track backgroundOption.id) {\n              <li>\n                <ndw-map-display-option\n                  [option]=\"backgroundOption\"\n                  [group]=\"'map-backgrounds'\"\n                  [type]=\"'radio'\"\n                  [direction]=\"'column'\"\n                  (selectionChange)=\"selectBackground($event)\"\n                />\n              </li>\n            }\n          </ul>\n        </section>\n      }\n\n      @if (linkedLayerOptions().length) {\n        <section class=\"map-control-dropdown__section\">\n          <h4 class=\"ndw-paragraph-bold-md map-control-dropdown__subtitle\">{{ layersTitle() }}</h4>\n          <ul>\n            @for (layerOption of linkedLayerOptions(); track layerOption.id) {\n              <li>\n                <ndw-map-display-option\n                  [option]=\"layerOption\"\n                  [group]=\"'map-layers'\"\n                  [type]=\"layerOptionType()\"\n                  [direction]=\"'row'\"\n                  (selectionChange)=\"toggleLayer($event)\"\n                />\n              </li>\n            }\n          </ul>\n        </section>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".map-control{padding:.25rem}.map-control-dropdown__section:not(:first-of-type){margin-top:var(--ndw-spacing-md)}.map-control-dropdown ul{margin-block-start:var(--ndw-spacing-xs);margin-block-end:0;list-style-type:none;padding:0}.map-control-dropdown ul.map-control-dropdown__backgrounds{display:flex;flex-wrap:wrap;align-items:start;justify-content:space-between;gap:var(--ndw-spacing-2xs)}.map-control-dropdown__subtitle{color:var(--ndw-color-grey-600);padding-inline:var(--ndw-spacing-2xs);margin-block:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MapDisplayOptionComponent, selector: "ndw-map-display-option", inputs: ["option", "direction", "type", "group"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: TagComponent, selector: "ndw-tag", inputs: ["disabled", "suffixAriaLabel", "suffixIcon"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MapDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndw-map-display', imports: [CommonModule, MapDisplayOptionComponent, OverlayModule, IconComponent, TagComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"display\" [class.active]=\"open()\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  @let activeBackground = activeBackgroundOption();\n  @if (activeBackground) {\n    <ndw-map-display-option [option]=\"activeBackground\" [type]=\"'none'\" />\n  }\n\n  <button type=\"button\" (click)=\"open.set(!open())\">\n    {{ title() }}\n  </button>\n\n  @if (numberOfSelectedLayers() && enableClearLayers()) {\n    <ndw-tag (clicked)=\"clearLayers()\">{{ numberOfSelectedLayers() }}</ndw-tag>\n  }\n\n  <ndw-icon>keyboard_arrow_down</ndw-icon>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"showPopover()\"\n  (detach)=\"open.set(false)\"\n  (overlayOutsideClick)=\"open.set(false)\"\n>\n  <div class=\"display-dropdown\">\n    <header>\n      <h3 class=\"ndw-paragraph-bold-lg\">{{ title() }}</h3>\n      <button ndwButton tertiary title=\"Button\" type=\"button\" (click)=\"open.set(false)\">\n        <ndw-icon>close</ndw-icon>\n      </button>\n    </header>\n\n    <div class=\"display-dropdown__content\">\n      @if (linkedBackgroundOptions().length) {\n        <section class=\"display-dropdown__section\">\n          <h4 class=\"ndw-paragraph-bold-md display-dropdown__subtitle\">{{ backgroundsTitle() }}</h4>\n          <ul class=\"display-dropdown__backgrounds\">\n            @for (backgroundOption of linkedBackgroundOptions(); track backgroundOption.id) {\n              <li>\n                <ndw-map-display-option\n                  [option]=\"backgroundOption\"\n                  [group]=\"'map-backgrounds'\"\n                  [type]=\"'radio'\"\n                  [direction]=\"'column'\"\n                  (selectionChange)=\"selectBackground($event)\"\n                />\n              </li>\n            }\n          </ul>\n        </section>\n      }\n\n      @if (linkedLayerOptions().length) {\n        <section class=\"display-dropdown__section\">\n          <h4 class=\"ndw-paragraph-bold-md display-dropdown__subtitle\">{{ layersTitle() }}</h4>\n          <ul>\n            @for (layerOption of linkedLayerOptions(); track layerOption.id) {\n              <li>\n                <ndw-map-display-option\n                  [option]=\"layerOption\"\n                  [group]=\"'map-layers'\"\n                  [type]=\"layerOptionType()\"\n                  [direction]=\"'row'\"\n                  (selectionChange)=\"toggleLayer($event)\"\n                />\n              </li>\n            }\n          </ul>\n        </section>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".display{position:relative;overflow:hidden;display:inline-flex;gap:var(--ndw-spacing-2xs);align-items:center;height:40px;padding:.25rem;border:1px solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-sm);background-color:var(--ndw-color-white);transition:var(--ndw-animation-speed-default)}.display:hover{background-color:var(--ndw-color-grey-100)}.display.active ndw-icon{rotate:180deg}.display button{border:none;background:none;padding:var(--ndw-spacing-xs);color:var(--ndw-color-grey-600);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-bold)}.display button:after{content:\"\";position:absolute;inset:0}.display ndw-icon{pointer-events:none;padding:.25rem;color:var(--ndw-color-primary);transition-property:rotate;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out;transition-delay:0s}.display-dropdown{max-height:380px;display:grid;grid-template-rows:max-content 1fr;padding:var(--ndw-spacing-2xs);width:226px;border:1px solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-sm);box-shadow:var(--ndw-elevation-dropdown);background-color:var(--ndw-color-white)}.display-dropdown header{display:flex;justify-content:space-between;align-items:center;gap:var(--ndw-spacing-xs);padding:var(--ndw-spacing-xs) 0 var(--ndw-spacing-xs) var(--ndw-spacing-2xs)}.display-dropdown header h3{color:var(--ndw-color-grey-600);margin-block:0}.display-dropdown__content{overflow-y:auto}.display-dropdown__section:not(:first-of-type){margin-top:var(--ndw-spacing-md)}.display-dropdown ul{margin-block-start:var(--ndw-spacing-xs);margin-block-end:0;list-style-type:none;padding:0}.display-dropdown ul.display-dropdown__backgrounds{display:flex;flex-wrap:wrap;align-items:start;justify-content:space-between;gap:var(--ndw-spacing-2xs)}.display-dropdown__subtitle{color:var(--ndw-color-grey-600);padding-inline:var(--ndw-spacing-2xs);margin-block:0}\n"] }]
+            args: [{ selector: 'ndw-map-display', imports: [CommonModule, MapDisplayOptionComponent, OverlayModule, IconComponent, TagComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"map-control\" [class.active]=\"open()\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  @let activeBackground = activeBackgroundOption();\n  @if (activeBackground) {\n    <ndw-map-display-option [option]=\"activeBackground\" [type]=\"'none'\" />\n  }\n\n  <button class=\"content-wrapper\" type=\"button\" (click)=\"open.set(!open())\">\n    {{ title() }}\n  </button>\n\n  @if (numberOfSelectedLayers() && enableClearLayers()) {\n    <ndw-tag (clicked)=\"clearLayers()\">{{ numberOfSelectedLayers() }}</ndw-tag>\n  }\n\n  <ndw-icon class=\"map-control__chevron\">keyboard_arrow_down</ndw-icon>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"showPopover()\"\n  (detach)=\"open.set(false)\"\n  (overlayOutsideClick)=\"open.set(false)\"\n>\n  <div class=\"map-control-dropdown\">\n    <header>\n      <h3 class=\"ndw-paragraph-bold-lg\">{{ title() }}</h3>\n      <button ndwButton tertiary type=\"button\" (click)=\"open.set(false)\">\n        <ndw-icon>close</ndw-icon>\n        <span class=\"sr-only\">Sluit {{ title() }}</span>\n      </button>\n    </header>\n\n    <div class=\"map-control-dropdown__content\">\n      @if (linkedBackgroundOptions().length) {\n        <section class=\"map-control-dropdown__section\">\n          <h4 class=\"ndw-paragraph-bold-md map-control-dropdown__subtitle\">\n            {{ backgroundsTitle() }}\n          </h4>\n          <ul class=\"map-control-dropdown__backgrounds\">\n            @for (backgroundOption of linkedBackgroundOptions(); track backgroundOption.id) {\n              <li>\n                <ndw-map-display-option\n                  [option]=\"backgroundOption\"\n                  [group]=\"'map-backgrounds'\"\n                  [type]=\"'radio'\"\n                  [direction]=\"'column'\"\n                  (selectionChange)=\"selectBackground($event)\"\n                />\n              </li>\n            }\n          </ul>\n        </section>\n      }\n\n      @if (linkedLayerOptions().length) {\n        <section class=\"map-control-dropdown__section\">\n          <h4 class=\"ndw-paragraph-bold-md map-control-dropdown__subtitle\">{{ layersTitle() }}</h4>\n          <ul>\n            @for (layerOption of linkedLayerOptions(); track layerOption.id) {\n              <li>\n                <ndw-map-display-option\n                  [option]=\"layerOption\"\n                  [group]=\"'map-layers'\"\n                  [type]=\"layerOptionType()\"\n                  [direction]=\"'row'\"\n                  (selectionChange)=\"toggleLayer($event)\"\n                />\n              </li>\n            }\n          </ul>\n        </section>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".map-control{padding:.25rem}.map-control-dropdown__section:not(:first-of-type){margin-top:var(--ndw-spacing-md)}.map-control-dropdown ul{margin-block-start:var(--ndw-spacing-xs);margin-block-end:0;list-style-type:none;padding:0}.map-control-dropdown ul.map-control-dropdown__backgrounds{display:flex;flex-wrap:wrap;align-items:start;justify-content:space-between;gap:var(--ndw-spacing-2xs)}.map-control-dropdown__subtitle{color:var(--ndw-color-grey-600);padding-inline:var(--ndw-spacing-2xs);margin-block:0}\n"] }]
         }], ctorParameters: () => [] });
 const MAP_BACKGROUND_IMAGES = {
-    OSM_DEFAULT: '/assets/images/map-backgrounds/osm-default.webp',
-    OSM_BASIC: '/assets/images/map-backgrounds/osm-basic.webp',
-    OSM_COLOR_BLIND: '/assets/images/map-backgrounds/osm-color-blind.webp',
-    OSM_DARK: '/assets/images/map-backgrounds/osm-dark.webp',
-    OSM_NO_ROADS: '/assets/images/map-backgrounds/osm-default-no-roads.webp',
-    OSM_FCD_LINKS: '/assets/images/map-backgrounds/osm-default-with-fcd-links_1-5.webp',
-    OSM_FCD_ROADS: '/assets/images/map-backgrounds/osm-default-with-fcd-roads.webp',
-    OSM_FCD_SEGMENTS: '/assets/images/map-backgrounds/osm-default-with-fcd-segments.webp',
-    OSM_MST: '/assets/images/map-backgrounds/osm-default-with-mst.webp',
-    OSM_NWB_ROADS_WHITE: '/assets/images/map-backgrounds/osm-default-with-nwb-roads-white.webp',
-    OSM_NWB_ROADS: '/assets/images/map-backgrounds/osm-default-with-nwb-roads.webp',
-    OSM_DEFAULT_FULL: '/assets/images/map-backgrounds/osm-default.webp',
-    OSM_FRONT_DARK: '/assets/images/map-backgrounds/osm-front-office-dark.webp',
-    OSM_FRONT_LIGHT_NWB: '/assets/images/map-backgrounds/osm-front-office-light-with-nwb-roads.webp',
-    OSM_FRONT_LIGHT: '/assets/images/map-backgrounds/osm-front-office-light.webp',
-    OSM_GREEN: '/assets/images/map-backgrounds/osm-green.webp',
+    OSM_DEFAULT: '/images/map-backgrounds/osm-default.webp',
+    OSM_BASIC: '/images/map-backgrounds/osm-basic.webp',
+    OSM_COLOR_BLIND: '/images/map-backgrounds/osm-color-blind.webp',
+    OSM_DARK: '/images/map-backgrounds/osm-dark.webp',
+    OSM_NO_ROADS: '/images/map-backgrounds/osm-default-no-roads.webp',
+    OSM_FCD_LINKS: '/images/map-backgrounds/osm-default-with-fcd-links_1-5.webp',
+    OSM_FCD_ROADS: '/images/map-backgrounds/osm-default-with-fcd-roads.webp',
+    OSM_FCD_SEGMENTS: '/images/map-backgrounds/osm-default-with-fcd-segments.webp',
+    OSM_MST: '/images/map-backgrounds/osm-default-with-mst.webp',
+    OSM_NWB_ROADS_WHITE: '/images/map-backgrounds/osm-default-with-nwb-roads-white.webp',
+    OSM_NWB_ROADS: '/images/map-backgrounds/osm-default-with-nwb-roads.webp',
+    OSM_DEFAULT_FULL: '/images/map-backgrounds/osm-default.webp',
+    OSM_FRONT_DARK: '/images/map-backgrounds/osm-front-office-dark.webp',
+    OSM_FRONT_LIGHT_NWB: '/images/map-backgrounds/osm-front-office-light-with-nwb-roads.webp',
+    OSM_FRONT_LIGHT: '/images/map-backgrounds/osm-front-office-light.webp',
+    OSM_GREEN: '/images/map-backgrounds/osm-green.webp',
 };
 const MAP_BACKGROUNDS = {
     OSM_BASIC: {
@@ -3161,12 +2659,12 @@ const DEFAULT_BACKGROUNDS = [
 ];
 const MAP_LAYER_IMAGES = {
-    ACTUAL_TRAFFIC_V1: '/assets/images/map-layers/actueelverkeer1.webp',
-    ACTUAL_TRAFFIC_V2: '/assets/images/map-layers/actueelverkeerv2.webp',
-    IMAGE_MODE_V1: '/assets/images/map-layers/beeldstand1.webp',
-    IMAGE_MODE_V2: '/assets/images/map-layers/beeldstand2.webp',
-    HECTOMETRY: '/assets/images/map-layers/hectometrering.webp',
-    ROAD_WORKS: '/assets/images/map-layers/wegwerkzaamheden.webp',
+    ACTUAL_TRAFFIC_V1: '/images/map-layers/actueelverkeer1.webp',
+    ACTUAL_TRAFFIC_V2: '/images/map-layers/actueelverkeerv2.webp',
+    IMAGE_MODE_V1: '/images/map-layers/beeldstand1.webp',
+    IMAGE_MODE_V2: '/images/map-layers/beeldstand2.webp',
+    HECTOMETRY: '/images/map-layers/hectometrering.webp',
+    ROAD_WORKS: '/images/map-layers/wegwerkzaamheden.webp',
 };
 const MAP_LAYERS = {
     ACTUAL_TRAFFIC_V1: {
@@ -3201,6 +2699,54 @@ const MAP_LAYERS = {
     },
 };
+class MapLegendOptionComponent {
+    option = input.required();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MapLegendOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: MapLegendOptionComponent, isStandalone: true, selector: "ndw-map-legend-option", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "listitem" } }, ngImport: i0, template: "@let opt = option();\n<div class=\"option-type\">\n  @switch (opt.type) {\n    @case ('circle') {\n      <div class=\"circle\" [style.--map-legend-option-color]=\"opt.color\"></div>\n    }\n\n    @case ('line') {\n      <div\n        class=\"line\"\n        [class.dashed]=\"opt.fillMode === 'dashed'\"\n        [style.--map-legend-option-color]=\"opt.color\"\n      ></div>\n    }\n\n    @case ('icon') {\n      <ndw-icon class=\"icon\">{{ opt.iconName }}</ndw-icon>\n    }\n\n    @case ('image') {\n      <img\n        class=\"image\"\n        [class.contain]=\"opt.objectFit === 'contain'\"\n        [src]=\"opt.src\"\n        [alt]=\"opt.label\"\n      />\n    }\n\n    @case ('polygon') {\n      <div class=\"polygon\" [style.--map-legend-option-color]=\"opt.color\">\n        <svg viewBox=\"0 0 20 20\">\n          <polygon points=\"10,1 1,19 19,19\" />\n        </svg>\n        <div class=\"dot\"></div>\n        <div class=\"dot\"></div>\n        <div class=\"dot\"></div>\n      </div>\n    }\n  }\n</div>\n\n<span class=\"ndw-paragraph-md option-label\">\n  {{ opt.label }}\n</span>\n", styles: ["*{box-sizing:border-box}:host{display:grid;grid-template-columns:1.5rem 1fr;align-items:flex-start;justify-content:flex-start;min-height:2rem;padding-block:var(--ndw-spacing-2xs);gap:var(--ndw-spacing-xs);color:var(--ndw-color-grey-600)}:host .option-type{display:flex;min-height:1.5rem;align-items:center;justify-content:center}:host .option-label{display:block;margin-block-start:var(--ndw-spacing-2xs)}:host .circle{border-radius:50%;width:var(--ndw-spacing-xs);aspect-ratio:1;background-color:var(--map-legend-option-color)}:host .line{--line-width: 14px;--line-height: 4px;width:var(--line-width);height:var(--line-height);background-color:var(--map-legend-option-color);border-radius:var(--ndw-border-radius-md)}:host .line.dashed{background-color:transparent;background-image:linear-gradient(to right,var(--map-legend-option-color) 20%,white 20%,white 37.5%,var(--map-legend-option-color) 37.5%,var(--map-legend-option-color) 62.5%,white 62.5%,white 80%,var(--map-legend-option-color) 80%);background-size:var(--line-width) var(--line-height);background-repeat:no-repeat}:host .icon{font-size:.875rem}:host .image{width:16px;height:16px;object-fit:cover;border-radius:var(--ndw-border-radius-sm)}:host .image.contain{object-fit:contain}:host .polygon{--polygon-size: 12px;--dot-size: 5px;position:relative;width:var(--polygon-size);height:var(--polygon-size)}:host .polygon svg{position:absolute;inset:0}:host .polygon svg polygon{fill:#fff;stroke:var(--map-legend-option-color);stroke-width:3}:host .polygon .dot{position:absolute;width:var(--dot-size);height:var(--dot-size);background-color:var(--map-legend-option-color);border-radius:50%}:host .polygon .dot:nth-child(2){top:0;left:50%;transform:translate(-50%,-50%)}:host .polygon .dot:nth-child(3){bottom:0;left:0;transform:translate(-50%,50%)}:host .polygon .dot:nth-child(4){bottom:0;right:0;transform:translate(50%,50%)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MapLegendOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndw-map-legend-option', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], host: {
+                        role: 'listitem',
+                    }, template: "@let opt = option();\n<div class=\"option-type\">\n  @switch (opt.type) {\n    @case ('circle') {\n      <div class=\"circle\" [style.--map-legend-option-color]=\"opt.color\"></div>\n    }\n\n    @case ('line') {\n      <div\n        class=\"line\"\n        [class.dashed]=\"opt.fillMode === 'dashed'\"\n        [style.--map-legend-option-color]=\"opt.color\"\n      ></div>\n    }\n\n    @case ('icon') {\n      <ndw-icon class=\"icon\">{{ opt.iconName }}</ndw-icon>\n    }\n\n    @case ('image') {\n      <img\n        class=\"image\"\n        [class.contain]=\"opt.objectFit === 'contain'\"\n        [src]=\"opt.src\"\n        [alt]=\"opt.label\"\n      />\n    }\n\n    @case ('polygon') {\n      <div class=\"polygon\" [style.--map-legend-option-color]=\"opt.color\">\n        <svg viewBox=\"0 0 20 20\">\n          <polygon points=\"10,1 1,19 19,19\" />\n        </svg>\n        <div class=\"dot\"></div>\n        <div class=\"dot\"></div>\n        <div class=\"dot\"></div>\n      </div>\n    }\n  }\n</div>\n\n<span class=\"ndw-paragraph-md option-label\">\n  {{ opt.label }}\n</span>\n", styles: ["*{box-sizing:border-box}:host{display:grid;grid-template-columns:1.5rem 1fr;align-items:flex-start;justify-content:flex-start;min-height:2rem;padding-block:var(--ndw-spacing-2xs);gap:var(--ndw-spacing-xs);color:var(--ndw-color-grey-600)}:host .option-type{display:flex;min-height:1.5rem;align-items:center;justify-content:center}:host .option-label{display:block;margin-block-start:var(--ndw-spacing-2xs)}:host .circle{border-radius:50%;width:var(--ndw-spacing-xs);aspect-ratio:1;background-color:var(--map-legend-option-color)}:host .line{--line-width: 14px;--line-height: 4px;width:var(--line-width);height:var(--line-height);background-color:var(--map-legend-option-color);border-radius:var(--ndw-border-radius-md)}:host .line.dashed{background-color:transparent;background-image:linear-gradient(to right,var(--map-legend-option-color) 20%,white 20%,white 37.5%,var(--map-legend-option-color) 37.5%,var(--map-legend-option-color) 62.5%,white 62.5%,white 80%,var(--map-legend-option-color) 80%);background-size:var(--line-width) var(--line-height);background-repeat:no-repeat}:host .icon{font-size:.875rem}:host .image{width:16px;height:16px;object-fit:cover;border-radius:var(--ndw-border-radius-sm)}:host .image.contain{object-fit:contain}:host .polygon{--polygon-size: 12px;--dot-size: 5px;position:relative;width:var(--polygon-size);height:var(--polygon-size)}:host .polygon svg{position:absolute;inset:0}:host .polygon svg polygon{fill:#fff;stroke:var(--map-legend-option-color);stroke-width:3}:host .polygon .dot{position:absolute;width:var(--dot-size);height:var(--dot-size);background-color:var(--map-legend-option-color);border-radius:50%}:host .polygon .dot:nth-child(2){top:0;left:50%;transform:translate(-50%,-50%)}:host .polygon .dot:nth-child(3){bottom:0;left:0;transform:translate(-50%,50%)}:host .polygon .dot:nth-child(4){bottom:0;right:0;transform:translate(50%,50%)}\n"] }]
+        }] });
+class MapLegendGroupComponent {
+    group = input.required();
+    singleGroup = input(false);
+    index = input(0);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MapLegendGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: MapLegendGroupComponent, isStandalone: true, selector: "ndw-map-legend-group", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, singleGroup: { classPropertyName: "singleGroup", publicName: "singleGroup", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" } }, ngImport: i0, template: "@if (group().label) {\n  <h4\n    class=\"ndw-paragraph-bold-md group-title\"\n    [class.sr-only]=\"singleGroup()\"\n    [class.group-title--first]=\"index() === 0\"\n  >\n    {{ group().label }}\n  </h4>\n}\n<ul>\n  @for (option of group().options; let i = $index; track i) {\n    <ndw-map-legend-option [option]=\"option\" />\n  }\n</ul>\n", styles: ["*{box-sizing:border-box}.group-title{display:block;margin-block-start:var(--ndw-spacing-sm);margin-block-end:var(--ndw-spacing-2xs);color:var(--ndw-color-grey-600)}.group-title--first{margin-block-start:0}ul{list-style:none;padding:0;margin:0}\n"], dependencies: [{ kind: "component", type: MapLegendOptionComponent, selector: "ndw-map-legend-option", inputs: ["option"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MapLegendGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndw-map-legend-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MapLegendOptionComponent], host: {
+                        role: 'listitem',
+                    }, template: "@if (group().label) {\n  <h4\n    class=\"ndw-paragraph-bold-md group-title\"\n    [class.sr-only]=\"singleGroup()\"\n    [class.group-title--first]=\"index() === 0\"\n  >\n    {{ group().label }}\n  </h4>\n}\n<ul>\n  @for (option of group().options; let i = $index; track i) {\n    <ndw-map-legend-option [option]=\"option\" />\n  }\n</ul>\n", styles: ["*{box-sizing:border-box}.group-title{display:block;margin-block-start:var(--ndw-spacing-sm);margin-block-end:var(--ndw-spacing-2xs);color:var(--ndw-color-grey-600)}.group-title--first{margin-block-start:0}ul{list-style:none;padding:0;margin:0}\n"] }]
+        }] });
+class MapLegendComponent {
+    groups = input.required();
+    icon = input('legend_toggle');
+    title = input('Legenda');
+    viewMode = input('dropdown');
+    open = model(false);
+    htmlIsRendered = signal(false);
+    showPopover = computed(() => this.open() && this.htmlIsRendered());
+    isDropdownViewMode = computed(() => this.viewMode() === 'dropdown');
+    isFixedViewMode = computed(() => this.viewMode() === 'fixed');
+    hasJustOneGroup = computed(() => this.groups().length === 1);
+    constructor() {
+        afterNextRender(() => this.htmlIsRendered.set(true));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MapLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: MapLegendComponent, isStandalone: true, selector: "ndw-map-legend", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, ngImport: i0, template: "@if (isDropdownViewMode()) {\n  <button\n    class=\"map-control\"\n    [class.active]=\"open()\"\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    (click)=\"open.set(!open())\"\n  >\n    <ndw-icon>{{ icon() }}</ndw-icon>\n    <span class=\"content-wrapper\">\n      {{ title() }}\n    </span>\n    <ndw-icon class=\"map-control__chevron\">keyboard_arrow_down</ndw-icon>\n  </button>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"showPopover()\"\n    (detach)=\"open.set(false)\"\n  >\n    <ng-container *ngTemplateOutlet=\"dropdown\" />\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"dropdown\" />\n}\n\n<ng-template #dropdown>\n  <div class=\"map-control-dropdown\" [class.fixed]=\"isFixedViewMode()\">\n    <header>\n      <h3 class=\"ndw-paragraph-bold-lg\">{{ title() }}</h3>\n\n      @if (isDropdownViewMode()) {\n        <button\n          class=\"map-control-dropdown__close\"\n          ndwButton\n          tertiary\n          type=\"button\"\n          (click)=\"open.set(false)\"\n        >\n          <ndw-icon>close</ndw-icon>\n          <span class=\"sr-only\">Sluit {{ title() }}</span>\n        </button>\n      }\n    </header>\n\n    <div class=\"map-control-dropdown__content\">\n      @if (hasJustOneGroup()) {\n        <ndw-map-legend-group [group]=\"groups()[0]\" [singleGroup]=\"true\" />\n      } @else {\n        <ul class=\"groups\">\n          @for (group of groups(); let i = $index; track i) {\n            @if (!!group.options.length) {\n              <ndw-map-legend-group [group]=\"group\" [index]=\"i\" />\n            }\n          }\n        </ul>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box}ul{list-style-type:none;padding:0;margin:0}.groups{padding:var(--ndw-spacing-2xs)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: MapLegendGroupComponent, selector: "ndw-map-legend-group", inputs: ["group", "singleGroup", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MapLegendComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndw-map-legend', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, NgTemplateOutlet, OverlayModule, MapLegendGroupComponent], template: "@if (isDropdownViewMode()) {\n  <button\n    class=\"map-control\"\n    [class.active]=\"open()\"\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    (click)=\"open.set(!open())\"\n  >\n    <ndw-icon>{{ icon() }}</ndw-icon>\n    <span class=\"content-wrapper\">\n      {{ title() }}\n    </span>\n    <ndw-icon class=\"map-control__chevron\">keyboard_arrow_down</ndw-icon>\n  </button>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"showPopover()\"\n    (detach)=\"open.set(false)\"\n  >\n    <ng-container *ngTemplateOutlet=\"dropdown\" />\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"dropdown\" />\n}\n\n<ng-template #dropdown>\n  <div class=\"map-control-dropdown\" [class.fixed]=\"isFixedViewMode()\">\n    <header>\n      <h3 class=\"ndw-paragraph-bold-lg\">{{ title() }}</h3>\n\n      @if (isDropdownViewMode()) {\n        <button\n          class=\"map-control-dropdown__close\"\n          ndwButton\n          tertiary\n          type=\"button\"\n          (click)=\"open.set(false)\"\n        >\n          <ndw-icon>close</ndw-icon>\n          <span class=\"sr-only\">Sluit {{ title() }}</span>\n        </button>\n      }\n    </header>\n\n    <div class=\"map-control-dropdown__content\">\n      @if (hasJustOneGroup()) {\n        <ndw-map-legend-group [group]=\"groups()[0]\" [singleGroup]=\"true\" />\n      } @else {\n        <ul class=\"groups\">\n          @for (group of groups(); let i = $index; track i) {\n            @if (!!group.options.length) {\n              <ndw-map-legend-group [group]=\"group\" [index]=\"i\" />\n            }\n          }\n        </ul>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box}ul{list-style-type:none;padding:0;margin:0}.groups{padding:var(--ndw-spacing-2xs)}\n"] }]
+        }], ctorParameters: () => [] });
 class ModalContentComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: ModalContentComponent, isStandalone: true, selector: "ndw-modal-content", ngImport: i0, template: "<ng-content />\n", styles: [":host{font-size:var(--ndw-font-size-sm);max-height:100%;overflow-y:auto;word-break:break-word}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -3291,6 +2837,7 @@ class MultiSelectComponent {
     noResultText = input('Oeps, geen resultaten gevonden. Probeer een andere zoekterm.');
     chevron = input(true);
     disabled = input(false);
+    selectAmountHidden = input(false);
     selectAllText = input({
         deselect: 'Deselecteer alles',
         select: 'Selecteer alles',
@@ -3340,7 +2887,7 @@ class MultiSelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: MultiSelectComponent, isStandalone: true, selector: "ndw-multi-select", inputs: { buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: true, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null }, chevron: { classPropertyName: "chevron", publicName: "chevron", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, lastCheckedElementId: { classPropertyName: "lastCheckedElementId", publicName: "lastCheckedElementId", isSignal: true, isRequired: false, transformFunction: null }, searchInputValue: { classPropertyName: "searchInputValue", publicName: "searchInputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataSource: "dataSourceChange", lastCheckedElementId: "lastCheckedElementIdChange", searchInputValue: "searchInputValueChange" }, viewQueries: [{ propertyName: "dropdownTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ndw-dropdown\n  prefixIcon=\"filter_alt\"\n  [selectAmount]=\"selectAmount()\"\n  (tagClicked)=\"toggleSelectAll(false)\"\n  (isOpenChange)=\"isOpenChanged($event)\"\n  [buttonText]=\"buttonText()\"\n  [disabled]=\"disabled()\"\n  [chevron]=\"chevron()\"\n  [prefixIcon]=\"prefixIcon()\"\n>\n  <ndw-form-field [label]=\"searchLabel()\" [hideLabel]=\"true\">\n    <input\n      ndwInput\n      type=\"search\"\n      [value]=\"searchInputValue()\"\n      (input)=\"searchInputChanged($event)\"\n      [placeholder]=\"searchPlaceholder()\"\n    />\n  </ndw-form-field>\n  @if (noSearchResults()) {\n    <div class=\"no-search-results\">\n      <ndw-icon>sentiment_dissatisfied</ndw-icon>\n      {{ noResultText() }}\n    </div>\n  } @else {\n    <ndw-list class=\"multi-select-container\">\n      @for (checkbox of dataSource(); track checkbox.id) {\n        @if (filterSearch(checkbox.label)) {\n          <ndw-list-item\n            [class.last-checked]=\"lastCheckedElementId() === checkbox.id\"\n            [checkable]=\"true\"\n            [checked]=\"checkbox.value\"\n            [prefixIcon]=\"checkbox.icon\"\n            [subtitle]=\"checkbox.label\"\n            (checkedChange)=\"checkboxChanged(checkbox.id)\"\n          >\n            @if (checkbox.image; as image) {\n              <img [src]=\"image.src\" [alt]=\"image.alt\" />\n            }\n          </ndw-list-item>\n        }\n      }\n    </ndw-list>\n  }\n  <div class=\"ndw-dialog-footer\">\n    @if (selectAmount() === dataSource().length) {\n      <button ndwLink (click)=\"toggleSelectAll(false)\">\n        {{ selectAllText().deselect }}\n      </button>\n    } @else {\n      <button ndwLink (click)=\"toggleSelectAll(true)\">\n        {{ selectAllText().select }}\n      </button>\n    }\n    <div class=\"ndw-dialog-footer-total\" aria-live=\"polite\">\n      Geselecteerd: <strong>{{ selectAmount() }}</strong>\n    </div>\n  </div>\n</ndw-dropdown>\n", styles: [":host{display:flex}ndw-form-field{margin-bottom:var(--ndw-spacing-md)}.no-search-results{display:grid;justify-items:center;width:var(--multi-select-default-width);margin:auto;padding:0 var(--ndw-spacing-md);font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}.multi-select-container{margin-inline:calc(var(--ndw-spacing-sm) * -1);max-height:var(--multi-select-default-width);min-width:var(--multi-select-default-width);overflow-y:auto}.multi-select-container ndw-list-item img{width:var(--ndw-spacing-lg)}.multi-select-container ndw-list-item.last-checked{height:auto;padding-bottom:var(--ndw-spacing-sm);margin-bottom:var(--ndw-spacing-sm);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200)}ndw-dropdown{width:inherit}.ndw-dialog-footer{display:flex;margin-top:var(--ndw-spacing-md);border-top:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);padding-top:var(--ndw-spacing-md);font-size:var(--ndw-font-size-xs)}.ndw-dialog-footer .ndw-dialog-footer-total{display:flex;flex:1;justify-content:end;gap:var(--ndw-spacing-2xs)}\n"], dependencies: [{ kind: "component", type: DropdownComponent, selector: "ndw-dropdown", inputs: ["disabled", "chevron", "buttonText", "prefixIcon", "selectAmount"], outputs: ["tagClicked", "isOpenChange"] }, { kind: "component", type: FormFieldComponent, selector: "ndw-form-field", inputs: ["label", "suffixAriaLabel", "hideLabel", "disabled", "error", "success", "info", "tooltip"], outputs: ["clearButtonClicked"] }, { kind: "directive", type: InputDirective, selector: "input[ndwInput], select[ndwInput], textarea[ndwInput]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: ListComponent, selector: "ndw-list", inputs: ["elevated"] }, { kind: "component", type: ListItemComponent, selector: "ndw-list-item", inputs: ["active", "badgeValue", "buttonIcon", "buttonLabel", "checkable", "collapsible", "disabled", "indented", "pillColor", "pillLabel", "prefixIcon", "showButton", "subtitle", "title", "checked", "expanded"], outputs: ["activeChange", "buttonClicked", "checkedChange", "expandedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: MultiSelectComponent, isStandalone: true, selector: "ndw-multi-select", inputs: { buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: true, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null }, chevron: { classPropertyName: "chevron", publicName: "chevron", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectAmountHidden: { classPropertyName: "selectAmountHidden", publicName: "selectAmountHidden", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, lastCheckedElementId: { classPropertyName: "lastCheckedElementId", publicName: "lastCheckedElementId", isSignal: true, isRequired: false, transformFunction: null }, searchInputValue: { classPropertyName: "searchInputValue", publicName: "searchInputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataSource: "dataSourceChange", lastCheckedElementId: "lastCheckedElementIdChange", searchInputValue: "searchInputValueChange" }, viewQueries: [{ propertyName: "dropdownTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ndw-dropdown\n  prefixIcon=\"filter_alt\"\n  [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\n  (tagClicked)=\"toggleSelectAll(false)\"\n  (isOpenChange)=\"isOpenChanged($event)\"\n  [buttonText]=\"buttonText()\"\n  [disabled]=\"disabled()\"\n  [chevron]=\"chevron()\"\n  [prefixIcon]=\"prefixIcon()\"\n>\n  <ndw-form-field [label]=\"searchLabel()\" [hideLabel]=\"true\">\n    <input\n      ndwInput\n      type=\"search\"\n      [value]=\"searchInputValue()\"\n      (input)=\"searchInputChanged($event)\"\n      [placeholder]=\"searchPlaceholder()\"\n    />\n  </ndw-form-field>\n  @if (noSearchResults()) {\n    <div class=\"no-search-results\">\n      <ndw-icon>sentiment_dissatisfied</ndw-icon>\n      {{ noResultText() }}\n    </div>\n  } @else {\n    <ndw-list class=\"multi-select-container\">\n      @for (checkbox of dataSource(); track checkbox.id) {\n        @if (filterSearch(checkbox.label)) {\n          <ndw-list-item\n            [class.last-checked]=\"lastCheckedElementId() === checkbox.id\"\n            [checkable]=\"true\"\n            [checked]=\"checkbox.value\"\n            [prefixIcon]=\"checkbox.icon\"\n            [subtitle]=\"checkbox.label\"\n            (checkedChange)=\"checkboxChanged(checkbox.id)\"\n          >\n            @if (checkbox.image; as image) {\n              <img [src]=\"image.src\" [alt]=\"image.alt\" />\n            }\n          </ndw-list-item>\n        }\n      }\n    </ndw-list>\n  }\n  <div class=\"ndw-dialog-footer\">\n    @if (selectAmount() === dataSource().length) {\n      <button ndwLink (click)=\"toggleSelectAll(false)\">\n        {{ selectAllText().deselect }}\n      </button>\n    } @else {\n      <button ndwLink (click)=\"toggleSelectAll(true)\">\n        {{ selectAllText().select }}\n      </button>\n    }\n    <div class=\"ndw-dialog-footer-total\" aria-live=\"polite\">\n      Geselecteerd: <strong>{{ selectAmount() }}</strong>\n    </div>\n  </div>\n</ndw-dropdown>\n", styles: [":host{display:flex}ndw-form-field{margin-bottom:var(--ndw-spacing-md)}.no-search-results{display:grid;justify-items:center;width:var(--multi-select-default-width);margin:auto;padding:0 var(--ndw-spacing-md);font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}.multi-select-container{margin-inline:calc(var(--ndw-spacing-sm) * -1);max-height:var(--multi-select-default-width);min-width:var(--multi-select-default-width);overflow-y:auto}.multi-select-container ndw-list-item img{width:var(--ndw-spacing-lg)}.multi-select-container ndw-list-item.last-checked{height:auto;padding-bottom:var(--ndw-spacing-sm);margin-bottom:var(--ndw-spacing-sm);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200)}ndw-dropdown{width:inherit}.ndw-dialog-footer{display:flex;margin-top:var(--ndw-spacing-md);border-top:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);padding-top:var(--ndw-spacing-md);font-size:var(--ndw-font-size-xs)}.ndw-dialog-footer .ndw-dialog-footer-total{display:flex;flex:1;justify-content:end;gap:var(--ndw-spacing-2xs)}\n"], dependencies: [{ kind: "component", type: DropdownComponent, selector: "ndw-dropdown", inputs: ["disabled", "chevron", "buttonText", "prefixIcon", "selectAmount"], outputs: ["tagClicked", "isOpenChange"] }, { kind: "component", type: FormFieldComponent, selector: "ndw-form-field", inputs: ["label", "suffixAriaLabel", "hideLabel", "disabled", "error", "success", "info", "tooltip"], outputs: ["clearButtonClicked"] }, { kind: "directive", type: InputDirective, selector: "input[ndwInput], select[ndwInput], textarea[ndwInput]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: ListComponent, selector: "ndw-list", inputs: ["elevated"] }, { kind: "component", type: ListItemComponent, selector: "ndw-list-item", inputs: ["active", "badgeValue", "buttonIcon", "buttonLabel", "checkable", "checkType", "collapsible", "disabled", "indented", "pillColor", "pillLabel", "prefixIcon", "showButton", "subtitle", "title", "checked", "expanded"], outputs: ["activeChange", "buttonClicked", "checkedChange", "expandedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -3351,34 +2898,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         IconComponent,
                         ListComponent,
                         ListItemComponent,
-                    ], selector: 'ndw-multi-select', template: "<ndw-dropdown\n  prefixIcon=\"filter_alt\"\n  [selectAmount]=\"selectAmount()\"\n  (tagClicked)=\"toggleSelectAll(false)\"\n  (isOpenChange)=\"isOpenChanged($event)\"\n  [buttonText]=\"buttonText()\"\n  [disabled]=\"disabled()\"\n  [chevron]=\"chevron()\"\n  [prefixIcon]=\"prefixIcon()\"\n>\n  <ndw-form-field [label]=\"searchLabel()\" [hideLabel]=\"true\">\n    <input\n      ndwInput\n      type=\"search\"\n      [value]=\"searchInputValue()\"\n      (input)=\"searchInputChanged($event)\"\n      [placeholder]=\"searchPlaceholder()\"\n    />\n  </ndw-form-field>\n  @if (noSearchResults()) {\n    <div class=\"no-search-results\">\n      <ndw-icon>sentiment_dissatisfied</ndw-icon>\n      {{ noResultText() }}\n    </div>\n  } @else {\n    <ndw-list class=\"multi-select-container\">\n      @for (checkbox of dataSource(); track checkbox.id) {\n        @if (filterSearch(checkbox.label)) {\n          <ndw-list-item\n            [class.last-checked]=\"lastCheckedElementId() === checkbox.id\"\n            [checkable]=\"true\"\n            [checked]=\"checkbox.value\"\n            [prefixIcon]=\"checkbox.icon\"\n            [subtitle]=\"checkbox.label\"\n            (checkedChange)=\"checkboxChanged(checkbox.id)\"\n          >\n            @if (checkbox.image; as image) {\n              <img [src]=\"image.src\" [alt]=\"image.alt\" />\n            }\n          </ndw-list-item>\n        }\n      }\n    </ndw-list>\n  }\n  <div class=\"ndw-dialog-footer\">\n    @if (selectAmount() === dataSource().length) {\n      <button ndwLink (click)=\"toggleSelectAll(false)\">\n        {{ selectAllText().deselect }}\n      </button>\n    } @else {\n      <button ndwLink (click)=\"toggleSelectAll(true)\">\n        {{ selectAllText().select }}\n      </button>\n    }\n    <div class=\"ndw-dialog-footer-total\" aria-live=\"polite\">\n      Geselecteerd: <strong>{{ selectAmount() }}</strong>\n    </div>\n  </div>\n</ndw-dropdown>\n", styles: [":host{display:flex}ndw-form-field{margin-bottom:var(--ndw-spacing-md)}.no-search-results{display:grid;justify-items:center;width:var(--multi-select-default-width);margin:auto;padding:0 var(--ndw-spacing-md);font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}.multi-select-container{margin-inline:calc(var(--ndw-spacing-sm) * -1);max-height:var(--multi-select-default-width);min-width:var(--multi-select-default-width);overflow-y:auto}.multi-select-container ndw-list-item img{width:var(--ndw-spacing-lg)}.multi-select-container ndw-list-item.last-checked{height:auto;padding-bottom:var(--ndw-spacing-sm);margin-bottom:var(--ndw-spacing-sm);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200)}ndw-dropdown{width:inherit}.ndw-dialog-footer{display:flex;margin-top:var(--ndw-spacing-md);border-top:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);padding-top:var(--ndw-spacing-md);font-size:var(--ndw-font-size-xs)}.ndw-dialog-footer .ndw-dialog-footer-total{display:flex;flex:1;justify-content:end;gap:var(--ndw-spacing-2xs)}\n"] }]
-        }] });
-const breadcrumbRouteDataKey = 'breadcrumb';
-class RouterBreadcrumbsComponent {
-    route = inject(ActivatedRoute);
-    router = inject(Router);
-    breadcrumbs$ = this.router.events.pipe(filter((event) => event instanceof NavigationEnd), map(() => this.getBreadcrumbs()));
-    getBreadcrumbs() {
-        let route = this.route.snapshot;
-        const breadcrumbs = [];
-        while (route) {
-            const title = route.data[breadcrumbRouteDataKey];
-            const url = route.pathFromRoot
-                .flatMap((route) => route.url.filter((segment) => segment.path))
-                .join('/');
-            if (title &&
-                // Ignore breadcrumbs from routes that load children to prevent duplicates.
-                // If a parent route has a data property it will be passed on to lazy loaded child routes.
-                !route.routeConfig?.loadChildren) {
-                breadcrumbs.push({ url, title });
-            }
-            route = route.firstChild;
-        }
-        return breadcrumbs;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: RouterBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: RouterBreadcrumbsComponent, isStandalone: true, selector: "ndw-router-breadcrumbs", ngImport: i0, template: "<ndw-breadcrumb-group>\n  @for (breadcrumb of breadcrumbs$ | async; track breadcrumb.url) {\n    <ndw-breadcrumb [link]=\"breadcrumb.url\">{{ breadcrumb.title }}</ndw-breadcrumb>\n  }\n</ndw-breadcrumb-group>\n", dependencies: [{ kind: "component", type: BreadcrumbGroupComponent, selector: "ndw-breadcrumb-group" }, { kind: "component", type: BreadcrumbComponent, selector: "ndw-breadcrumb", inputs: ["link"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+                    ], selector: 'ndw-multi-select', template: "<ndw-dropdown\n  prefixIcon=\"filter_alt\"\n  [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\n  (tagClicked)=\"toggleSelectAll(false)\"\n  (isOpenChange)=\"isOpenChanged($event)\"\n  [buttonText]=\"buttonText()\"\n  [disabled]=\"disabled()\"\n  [chevron]=\"chevron()\"\n  [prefixIcon]=\"prefixIcon()\"\n>\n  <ndw-form-field [label]=\"searchLabel()\" [hideLabel]=\"true\">\n    <input\n      ndwInput\n      type=\"search\"\n      [value]=\"searchInputValue()\"\n      (input)=\"searchInputChanged($event)\"\n      [placeholder]=\"searchPlaceholder()\"\n    />\n  </ndw-form-field>\n  @if (noSearchResults()) {\n    <div class=\"no-search-results\">\n      <ndw-icon>sentiment_dissatisfied</ndw-icon>\n      {{ noResultText() }}\n    </div>\n  } @else {\n    <ndw-list class=\"multi-select-container\">\n      @for (checkbox of dataSource(); track checkbox.id) {\n        @if (filterSearch(checkbox.label)) {\n          <ndw-list-item\n            [class.last-checked]=\"lastCheckedElementId() === checkbox.id\"\n            [checkable]=\"true\"\n            [checked]=\"checkbox.value\"\n            [prefixIcon]=\"checkbox.icon\"\n            [subtitle]=\"checkbox.label\"\n            (checkedChange)=\"checkboxChanged(checkbox.id)\"\n          >\n            @if (checkbox.image; as image) {\n              <img [src]=\"image.src\" [alt]=\"image.alt\" />\n            }\n          </ndw-list-item>\n        }\n      }\n    </ndw-list>\n  }\n  <div class=\"ndw-dialog-footer\">\n    @if (selectAmount() === dataSource().length) {\n      <button ndwLink (click)=\"toggleSelectAll(false)\">\n        {{ selectAllText().deselect }}\n      </button>\n    } @else {\n      <button ndwLink (click)=\"toggleSelectAll(true)\">\n        {{ selectAllText().select }}\n      </button>\n    }\n    <div class=\"ndw-dialog-footer-total\" aria-live=\"polite\">\n      Geselecteerd: <strong>{{ selectAmount() }}</strong>\n    </div>\n  </div>\n</ndw-dropdown>\n", styles: [":host{display:flex}ndw-form-field{margin-bottom:var(--ndw-spacing-md)}.no-search-results{display:grid;justify-items:center;width:var(--multi-select-default-width);margin:auto;padding:0 var(--ndw-spacing-md);font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}.multi-select-container{margin-inline:calc(var(--ndw-spacing-sm) * -1);max-height:var(--multi-select-default-width);min-width:var(--multi-select-default-width);overflow-y:auto}.multi-select-container ndw-list-item img{width:var(--ndw-spacing-lg)}.multi-select-container ndw-list-item.last-checked{height:auto;padding-bottom:var(--ndw-spacing-sm);margin-bottom:var(--ndw-spacing-sm);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200)}ndw-dropdown{width:inherit}.ndw-dialog-footer{display:flex;margin-top:var(--ndw-spacing-md);border-top:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);padding-top:var(--ndw-spacing-md);font-size:var(--ndw-font-size-xs)}.ndw-dialog-footer .ndw-dialog-footer-total{display:flex;flex:1;justify-content:end;gap:var(--ndw-spacing-2xs)}\n"] }]
+        }] });
+class RouterBreadcrumbsComponent extends CoreRouterBreadcrumbsComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: RouterBreadcrumbsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: RouterBreadcrumbsComponent, isStandalone: true, selector: "ndw-router-breadcrumbs", usesInheritance: true, ngImport: i0, template: "<ndw-breadcrumb-group>\n  @for (breadcrumb of breadcrumbs$ | async; track breadcrumb.url) {\n    <ndw-breadcrumb [link]=\"breadcrumb.url\">{{ breadcrumb.title }}</ndw-breadcrumb>\n  }\n</ndw-breadcrumb-group>\n", dependencies: [{ kind: "component", type: BreadcrumbGroupComponent, selector: "ndw-breadcrumb-group" }, { kind: "component", type: BreadcrumbComponent, selector: "ndw-breadcrumb" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: RouterBreadcrumbsComponent, decorators: [{
             type: Component,
@@ -3696,6 +3221,7 @@ class TabGroupComponent {
         return tab;
     }));
     activeTab = model(0);
+    inlinePadding = input(0);
     selectTab(index) {
         this.activeTab.set(index);
         const tabButtons = this._tabButtons();
@@ -3732,101 +3258,207 @@ class TabGroupComponent {
         return start;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: TabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: TabGroupComponent, isStandalone: true, selector: "ndw-tab-group", inputs: { activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, queries: [{ propertyName: "_tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "_tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tab-group\" role=\"tablist\">\n  @for (tab of tabs(); track tab.id; let i = $index) {\n    <button\n      #tabButton\n      role=\"tab\"\n      class=\"tab-button\"\n      [attr.active]=\"tab.active ? true : undefined\"\n      [attr.aria-selected]=\"tab.active\"\n      [attr.aria-controls]=\"'tab-panel-' + tab.id\"\n      [disabled]=\"tab.disabled() ? true : null\"\n      [id]=\"'tab-' + tab.id\"\n      [tabindex]=\"tab.active ? 0 : -1\"\n      (click)=\"selectTab(i)\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      {{ tab.title() }}\n    </button>\n  }\n</div>\n@for (tab of tabs(); track tab.id; let i = $index) {\n  <div\n    class=\"tab-content\"\n    [ngClass]=\"{ 'is-hidden': !tab.active }\"\n    [id]=\"'tab-panel-' + tab.id\"\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"'tab-' + tab.id\"\n    [tabindex]=\"0\"\n  >\n    <ng-template [cdkPortalOutlet]=\"tab.content\"></ng-template>\n  </div>\n}\n", styles: [".tab-group{display:flex;gap:var(--ndw-spacing-lg);overflow:auto hidden;padding-left:0;position:relative;z-index:1}.tab-group:after{background-color:var(--ndw-color-grey-200);bottom:0;content:\"\";height:var(--ndw-border-size-sm);position:absolute;width:100%;z-index:-1}.tab-button{background:none;border:none;border-bottom:var(--ndw-border-size-lg) solid transparent;color:var(--ndw-color-grey-400);cursor:pointer;display:block;font-weight:700;padding:var(--ndw-spacing-md) 0;position:relative;transition:border-bottom .2s ease-out,color .2s ease-out;word-break:break-word}.tab-button:disabled{pointer-events:none;opacity:.5}.tab-button:hover{border-color:var(--ndw-color-grey-500);color:var(--ndw-color-grey-500)}.tab-button:active,.tab-button:focus{border-color:transparent;color:var(--ndw-color-grey-400)}.tab-button[aria-selected=true]{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-button[aria-selected=true]:hover{border-color:var(--ndw-color-primary-hover);color:var(--ndw-color-primary-hover)}.tab-button[aria-selected=true]:active{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-content{padding-top:var(--ndw-spacing-md)}.tab-content.is-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: TabGroupComponent, isStandalone: true, selector: "ndw-tab-group", inputs: { activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, inlinePadding: { classPropertyName: "inlinePadding", publicName: "inlinePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, queries: [{ propertyName: "_tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "_tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tab-group\" role=\"tablist\" [style.--padding-inline]=\"inlinePadding() + 'px'\">\n  @for (tab of tabs(); track tab.id; let i = $index) {\n    <button\n      #tabButton\n      role=\"tab\"\n      class=\"tab-button\"\n      [attr.active]=\"tab.active ? true : undefined\"\n      [attr.aria-selected]=\"tab.active\"\n      [attr.aria-controls]=\"'tab-panel-' + tab.id\"\n      [disabled]=\"tab.disabled() ? true : null\"\n      [id]=\"'tab-' + tab.id\"\n      [tabindex]=\"tab.active ? 0 : -1\"\n      (click)=\"selectTab(i)\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      {{ tab.title() }}\n    </button>\n  }\n</div>\n@for (tab of tabs(); track tab.id; let i = $index) {\n  <div\n    class=\"tab-content\"\n    [ngClass]=\"{ 'is-hidden': !tab.active }\"\n    [id]=\"'tab-panel-' + tab.id\"\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"'tab-' + tab.id\"\n    [tabindex]=\"0\"\n  >\n    <ng-template [cdkPortalOutlet]=\"tab.content\"></ng-template>\n  </div>\n}\n", styles: [".tab-group{display:flex;gap:var(--ndw-spacing-lg);overflow:auto hidden;padding-left:0;position:relative;z-index:1;padding-inline:var(--padding-inline)}.tab-group:after{background-color:var(--ndw-color-grey-200);bottom:0;content:\"\";height:var(--ndw-border-size-sm);position:absolute;left:var(--padding-inline, 0);right:var(--padding-inline, 0);width:auto;z-index:-1}.tab-button{background:none;border:none;border-bottom:var(--ndw-border-size-lg) solid transparent;color:var(--ndw-color-grey-400);cursor:pointer;display:block;font-weight:700;padding:var(--ndw-spacing-md) 0;position:relative;transition:border-bottom .2s ease-out,color .2s ease-out;word-break:break-word}.tab-button:disabled{pointer-events:none;opacity:.5}.tab-button:hover{border-color:var(--ndw-color-grey-500);color:var(--ndw-color-grey-500)}.tab-button:active,.tab-button:focus{border-color:transparent;color:var(--ndw-color-grey-400)}.tab-button[aria-selected=true]{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-button[aria-selected=true]:hover{border-color:var(--ndw-color-primary-hover);color:var(--ndw-color-primary-hover)}.tab-button[aria-selected=true]:active{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-content{padding-top:var(--ndw-spacing-md)}.tab-content.is-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: TabGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndw-tab-group', imports: [CdkPortalOutlet, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tab-group\" role=\"tablist\">\n  @for (tab of tabs(); track tab.id; let i = $index) {\n    <button\n      #tabButton\n      role=\"tab\"\n      class=\"tab-button\"\n      [attr.active]=\"tab.active ? true : undefined\"\n      [attr.aria-selected]=\"tab.active\"\n      [attr.aria-controls]=\"'tab-panel-' + tab.id\"\n      [disabled]=\"tab.disabled() ? true : null\"\n      [id]=\"'tab-' + tab.id\"\n      [tabindex]=\"tab.active ? 0 : -1\"\n      (click)=\"selectTab(i)\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      {{ tab.title() }}\n    </button>\n  }\n</div>\n@for (tab of tabs(); track tab.id; let i = $index) {\n  <div\n    class=\"tab-content\"\n    [ngClass]=\"{ 'is-hidden': !tab.active }\"\n    [id]=\"'tab-panel-' + tab.id\"\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"'tab-' + tab.id\"\n    [tabindex]=\"0\"\n  >\n    <ng-template [cdkPortalOutlet]=\"tab.content\"></ng-template>\n  </div>\n}\n", styles: [".tab-group{display:flex;gap:var(--ndw-spacing-lg);overflow:auto hidden;padding-left:0;position:relative;z-index:1}.tab-group:after{background-color:var(--ndw-color-grey-200);bottom:0;content:\"\";height:var(--ndw-border-size-sm);position:absolute;width:100%;z-index:-1}.tab-button{background:none;border:none;border-bottom:var(--ndw-border-size-lg) solid transparent;color:var(--ndw-color-grey-400);cursor:pointer;display:block;font-weight:700;padding:var(--ndw-spacing-md) 0;position:relative;transition:border-bottom .2s ease-out,color .2s ease-out;word-break:break-word}.tab-button:disabled{pointer-events:none;opacity:.5}.tab-button:hover{border-color:var(--ndw-color-grey-500);color:var(--ndw-color-grey-500)}.tab-button:active,.tab-button:focus{border-color:transparent;color:var(--ndw-color-grey-400)}.tab-button[aria-selected=true]{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-button[aria-selected=true]:hover{border-color:var(--ndw-color-primary-hover);color:var(--ndw-color-primary-hover)}.tab-button[aria-selected=true]:active{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-content{padding-top:var(--ndw-spacing-md)}.tab-content.is-hidden{display:none}\n"] }]
-        }] });
+            args: [{ selector: 'ndw-tab-group', imports: [CdkPortalOutlet, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tab-group\" role=\"tablist\" [style.--padding-inline]=\"inlinePadding() + 'px'\">\n  @for (tab of tabs(); track tab.id; let i = $index) {\n    <button\n      #tabButton\n      role=\"tab\"\n      class=\"tab-button\"\n      [attr.active]=\"tab.active ? true : undefined\"\n      [attr.aria-selected]=\"tab.active\"\n      [attr.aria-controls]=\"'tab-panel-' + tab.id\"\n      [disabled]=\"tab.disabled() ? true : null\"\n      [id]=\"'tab-' + tab.id\"\n      [tabindex]=\"tab.active ? 0 : -1\"\n      (click)=\"selectTab(i)\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      {{ tab.title() }}\n    </button>\n  }\n</div>\n@for (tab of tabs(); track tab.id; let i = $index) {\n  <div\n    class=\"tab-content\"\n    [ngClass]=\"{ 'is-hidden': !tab.active }\"\n    [id]=\"'tab-panel-' + tab.id\"\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"'tab-' + tab.id\"\n    [tabindex]=\"0\"\n  >\n    <ng-template [cdkPortalOutlet]=\"tab.content\"></ng-template>\n  </div>\n}\n", styles: [".tab-group{display:flex;gap:var(--ndw-spacing-lg);overflow:auto hidden;padding-left:0;position:relative;z-index:1;padding-inline:var(--padding-inline)}.tab-group:after{background-color:var(--ndw-color-grey-200);bottom:0;content:\"\";height:var(--ndw-border-size-sm);position:absolute;left:var(--padding-inline, 0);right:var(--padding-inline, 0);width:auto;z-index:-1}.tab-button{background:none;border:none;border-bottom:var(--ndw-border-size-lg) solid transparent;color:var(--ndw-color-grey-400);cursor:pointer;display:block;font-weight:700;padding:var(--ndw-spacing-md) 0;position:relative;transition:border-bottom .2s ease-out,color .2s ease-out;word-break:break-word}.tab-button:disabled{pointer-events:none;opacity:.5}.tab-button:hover{border-color:var(--ndw-color-grey-500);color:var(--ndw-color-grey-500)}.tab-button:active,.tab-button:focus{border-color:transparent;color:var(--ndw-color-grey-400)}.tab-button[aria-selected=true]{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-button[aria-selected=true]:hover{border-color:var(--ndw-color-primary-hover);color:var(--ndw-color-primary-hover)}.tab-button[aria-selected=true]:active{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-content{padding-top:var(--ndw-spacing-md)}.tab-content.is-hidden{display:none}\n"] }]
+        }] });
+const ndwAgGridTheme = {
+    accentColor: 'var(--ndw-color-primary)',
+    oddRowBackgroundColor: 'var(--ndw-color-grey-50)',
+    backgroundColor: 'var(--ndw-color-white)',
+    borderRadius: 'var(--ndw-border-radius-md)',
+    cellFontFamily: 'var(--ndw-font-family-body)',
+    fontFamily: 'inherit',
+    fontSize: 'var(--ndw-font-size-sm)',
+    headerBackgroundColor: 'var(--ndw-color-white)',
+    headerFontFamily: 'var(--ndw-font-family-body)',
+    headerFontSize: 'var(--ndw-font-size-xs)',
+    headerFontWeight: 'var(--ndw-font-weight-bold)',
+    headerRowBorder: {
+        color: 'var(--ndw-color-grey-200)',
+        style: 'solid',
+        width: 'var(--ndw-border-size-md)',
+    },
+    headerTextColor: 'var(--ndw-color-text)',
+    textColor: 'var(--ndw-color-text)',
+    wrapperBorder: false,
+};
 class ToastComponent {
-    renderer = inject(Renderer2);
-    message = input('');
-    // eslint-disable-next-line @angular-eslint/no-output-native
-    close = output();
-    toastContainer = viewChild.required('toastContainer');
-    toastProgress = viewChild.required('toastProgress');
-    interval = null;
-    timeout = null;
-    ngOnInit() {
-        this.open();
-    }
-    ngOnDestroy() {
-        this.clearInterval();
-        this.clearTimeout();
-    }
-    open() {
-        const openTime = 5000;
-        const intervalTime = 10;
-        const totalTicks = openTime / intervalTime;
-        let currentTick = 0;
-        this.interval = setInterval(() => {
-            currentTick++;
-            const percentage = (currentTick / totalTicks) * 100;
-            this.updateProgressWidth(percentage);
-            if (currentTick >= totalTicks) {
-                this.clearInterval();
-                this.startFadeOut();
-            }
-        }, intervalTime);
-    }
-    updateProgressWidth(percentage) {
-        const progressElement = this.toastProgress().nativeElement;
-        const remainingPercentage = Math.max(0, 100 - percentage);
-        progressElement.style.width = `${remainingPercentage}%`;
+    message = input.required();
+    id = input();
+    duration = input(5000);
+    paused = input(false);
+    showProgress = input(true);
+    closed = output();
+    elementDimensions = output();
+    #elementRef = inject(ElementRef);
+    ngAfterViewInit() {
+        this.elementDimensions.emit({
+            width: this.#elementRef.nativeElement.offsetWidth,
+            height: this.#elementRef.nativeElement.offsetHeight,
+        });
     }
-    startFadeOut() {
-        const containerElement = this.toastContainer().nativeElement;
-        this.renderer.addClass(containerElement, 'fade-out');
-        this.timeout = setTimeout(() => this.close.emit(), 200);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.7", type: ToastComponent, isStandalone: true, selector: "ndw-toast", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", elementDimensions: "elementDimensions" }, ngImport: i0, template: "<ndw-icon>info</ndw-icon>\n{{ message() }}\n<button ndwButton tertiary alternative extra-small (click)=\"closed.emit()\" aria-label=\"Sluit\">\n  <ndw-icon>close</ndw-icon>\n</button>\n<div\n  class=\"progress-bar\"\n  [ngStyle]=\"{\n    'animation-duration': duration() + 'ms',\n    visibility: showProgress() ? 'visible' : 'hidden',\n  }\"\n  [class.paused]=\"paused()\"\n></div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;position:relative;align-items:center;background-color:var(--ndw-color-grey-700);border-radius:var(--ndw-spacing-2xs);color:var(--ndw-color-white);display:grid;font-size:var(--ndw-font-size-sm);gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr auto;line-height:var(--ndw-line-height-md);max-width:20rem;width:20rem;opacity:1;overflow:hidden;padding:var(--ndw-spacing-xs);transition:opacity var(--ndw-animation-speed-fast) ease-in;z-index:2;box-shadow:var(--ndw-elevation-toast)}:host.hide-content{color:transparent}:host.hide-content>*{visibility:hidden}:host .progress-bar{animation:5s linear 0s 1 normal rightToLeft;background-color:var(--ndw-color-secondary-400);bottom:0;height:var(--ndw-spacing-2xs);left:-100%;position:absolute;width:100%;z-index:-1}:host .progress-bar.paused{animation-play-state:paused}:host>ndw-icon{font-size:1rem}:host [ndwButton] ndw-icon{color:var(--ndw-color-white)}@keyframes rightToLeft{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToastComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, NgStyle], selector: 'ndw-toast', template: "<ndw-icon>info</ndw-icon>\n{{ message() }}\n<button ndwButton tertiary alternative extra-small (click)=\"closed.emit()\" aria-label=\"Sluit\">\n  <ndw-icon>close</ndw-icon>\n</button>\n<div\n  class=\"progress-bar\"\n  [ngStyle]=\"{\n    'animation-duration': duration() + 'ms',\n    visibility: showProgress() ? 'visible' : 'hidden',\n  }\"\n  [class.paused]=\"paused()\"\n></div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;position:relative;align-items:center;background-color:var(--ndw-color-grey-700);border-radius:var(--ndw-spacing-2xs);color:var(--ndw-color-white);display:grid;font-size:var(--ndw-font-size-sm);gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr auto;line-height:var(--ndw-line-height-md);max-width:20rem;width:20rem;opacity:1;overflow:hidden;padding:var(--ndw-spacing-xs);transition:opacity var(--ndw-animation-speed-fast) ease-in;z-index:2;box-shadow:var(--ndw-elevation-toast)}:host.hide-content{color:transparent}:host.hide-content>*{visibility:hidden}:host .progress-bar{animation:5s linear 0s 1 normal rightToLeft;background-color:var(--ndw-color-secondary-400);bottom:0;height:var(--ndw-spacing-2xs);left:-100%;position:absolute;width:100%;z-index:-1}:host .progress-bar.paused{animation-play-state:paused}:host>ndw-icon{font-size:1rem}:host [ndwButton] ndw-icon{color:var(--ndw-color-white)}@keyframes rightToLeft{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
+        }] });
+class ToastListComponent {
+    toastService = inject(ToastService);
+    toastComponents = viewChildren(ToastComponent);
+    toastDimensions = signal(new Map());
+    toastOffsetHeights = computed(() => {
+        const dimensions = this.toastDimensions();
+        const components = this.toastComponents();
+        return components
+            .map((component) => component.id())
+            .filter((id) => id !== null && id !== undefined)
+            .reduce((acc, id) => {
+            const height = dimensions.get(id)?.height ?? 0;
+            return [...acc, acc[acc.length - 1] + height];
+        }, [0]);
+    });
+    firstToastHeight = computed(() => {
+        const firstComponent = this.toastComponents()?.[0];
+        const firstId = firstComponent?.id();
+        const dimensions = this.toastDimensions();
+        if (firstId === null || firstId === undefined) {
+            return 0;
+        }
+        return dimensions.get(firstId)?.height ?? 0;
+    });
+    totalHeightExcludingGaps = computed(() => {
+        const heights = this.toastOffsetHeights();
+        return heights.length > 0 ? heights[heights.length - 1] : 0;
+    });
+    maxToastWidth = computed(() => {
+        const dimensions = this.toastDimensions();
+        const components = this.toastComponents();
+        return components
+            .map((component) => component.id())
+            .filter((id) => id !== null && id !== undefined)
+            .reduce((max, id) => {
+            const width = dimensions.get(id)?.width ?? 0;
+            return Math.max(max, width);
+        }, 0);
+    });
+    setToastDimensions(id, dimensions) {
+        this.toastDimensions.update((heights) => {
+            heights.set(id, dimensions);
+            return heights;
+        });
     }
-    clearInterval() {
-        if (this.interval !== null) {
-            clearInterval(this.interval);
-            this.interval = null;
-        }
+    pause() {
+        this.toastService.pause();
     }
-    clearTimeout() {
-        if (this.timeout !== null) {
-            clearTimeout(this.timeout);
-            this.timeout = null;
-        }
+    resume() {
+        this.toastService.resume();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.7", type: ToastComponent, isStandalone: true, selector: "ndw-toast", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "toastContainer", first: true, predicate: ["toastContainer"], descendants: true, isSignal: true }, { propertyName: "toastProgress", first: true, predicate: ["toastProgress"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #toastContainer class=\"toast-container\">\n  <ndw-icon>info</ndw-icon>\n  <p>\n    {{ message() }}\n  </p>\n  <button ndwButton tertiary alternative extra-small (click)=\"startFadeOut()\">\n    <ndw-icon>close</ndw-icon>\n  </button>\n  <div #toastProgress class=\"toast-progress-bar\"></div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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%}.toast-container{position:relative;align-items:center;background:var(--ndw-color-grey-700);border-radius:var(--ndw-spacing-2xs);color:var(--ndw-color-white);display:grid;font-size:var(--ndw-font-size-sm);gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr auto;line-height:var(--ndw-line-height-md);opacity:1;padding:var(--ndw-spacing-xs);transition:opacity var(--ndw-animation-speed-fast) ease-in;width:fit-content}.toast-container.fade-out{opacity:0}.toast-container p{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;margin:0;max-width:220px}.toast-container>ndw-icon{font-size:1rem}.toast-container [ndwButton] ndw-icon{color:var(--ndw-color-white)}.toast-container .toast-progress-bar{position:absolute;bottom:0;left:0;width:100%;height:4px;background-color:var(--ndw-color-secondary-400);border-radius:var(--ndw-spacing-2xs)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToastListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: ToastListComponent, isStandalone: true, selector: "ndw-toast-list", host: { listeners: { "mouseenter": "pause()", "mouseleave": "resume()" }, properties: { "style.--total-toast-height": "totalHeightExcludingGaps() + \"px\"", "style.--total-toast-count": "toastComponents().length", "style.--max-toast-width": "maxToastWidth() + \"px\"" } }, viewQueries: [{ propertyName: "toastComponents", predicate: ToastComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@for (toast of toastService.toasts(); track toast.id) {\n  <ndw-toast\n    class=\"toast\"\n    [class.hide-content]=\"!toastService.paused() && $index > 0\"\n    [ngStyle]=\"{\n      '--index': $index,\n      '--offset-height': toastOffsetHeights()[$index] + 'px',\n      '--first-toast-height': firstToastHeight() + 'px',\n    }\"\n    [id]=\"toast.id\"\n    [message]=\"toast.message\"\n    [duration]=\"toast.duration\"\n    [paused]=\"toastService.paused()\"\n    [showProgress]=\"toastService.paused() || $first\"\n    (closed)=\"toastService.close(toast.id)\"\n    (elementDimensions)=\"setToastDimensions(toast.id, $event)\"\n  ></ndw-toast>\n}\n", styles: [":host{--stack-gap: var(--ndw-spacing-sm);--animation-speed: var(--ndw-animation-speed-default);position:relative;width:var(--max-toast-width)}:host .toast{--x: 0;--y: calc((var(--stack-gap) * var(--index)));--scaleX: calc(1 - .05 * var(--index));top:0;left:0;position:absolute;transform:translate(var(--x),var(--y));transform-origin:top center;transition-property:transform,opacity;transition-duration:var(--animation-speed);transition-timing-function:ease;z-index:calc(1000 - var(--index))}:host .toast:not(:first-child){transform:translate(var(--x),var(--y)) scaleX(var(--scaleX))}:host:not(:hover):not(:focus-within) .toast:not(:first-child){height:calc(var(--first-toast-height) - 2 * var(--ndw-spacing-xs))}:host:hover,:host:focus-within{height:calc(var(--total-toast-height) + var(--stack-gap) * (var(--total-toast-count) - 1))}:host:hover .toast,:host:focus-within .toast{--scaleX: 1;--y: calc(var(--offset-height) + var(--stack-gap) * var(--index));transition-duration:var(--animation-speed)}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "ndw-toast", inputs: ["message", "id", "duration", "paused", "showProgress"], outputs: ["closed", "elementDimensions"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToastComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToastListComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], selector: 'ndw-toast', template: "<div #toastContainer class=\"toast-container\">\n  <ndw-icon>info</ndw-icon>\n  <p>\n    {{ message() }}\n  </p>\n  <button ndwButton tertiary alternative extra-small (click)=\"startFadeOut()\">\n    <ndw-icon>close</ndw-icon>\n  </button>\n  <div #toastProgress class=\"toast-progress-bar\"></div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.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%}.toast-container{position:relative;align-items:center;background:var(--ndw-color-grey-700);border-radius:var(--ndw-spacing-2xs);color:var(--ndw-color-white);display:grid;font-size:var(--ndw-font-size-sm);gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr auto;line-height:var(--ndw-line-height-md);opacity:1;padding:var(--ndw-spacing-xs);transition:opacity var(--ndw-animation-speed-fast) ease-in;width:fit-content}.toast-container.fade-out{opacity:0}.toast-container p{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;margin:0;max-width:220px}.toast-container>ndw-icon{font-size:1rem}.toast-container [ndwButton] ndw-icon{color:var(--ndw-color-white)}.toast-container .toast-progress-bar{position:absolute;bottom:0;left:0;width:100%;height:4px;background-color:var(--ndw-color-secondary-400);border-radius:var(--ndw-spacing-2xs)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '(mouseenter)': 'pause()',
+                        '(mouseleave)': 'resume()',
+                        '[style.--total-toast-height]': 'totalHeightExcludingGaps() + "px"',
+                        '[style.--total-toast-count]': 'toastComponents().length',
+                        '[style.--max-toast-width]': 'maxToastWidth() + "px"',
+                    }, imports: [ToastComponent, NgStyle], selector: 'ndw-toast-list', template: "@for (toast of toastService.toasts(); track toast.id) {\n  <ndw-toast\n    class=\"toast\"\n    [class.hide-content]=\"!toastService.paused() && $index > 0\"\n    [ngStyle]=\"{\n      '--index': $index,\n      '--offset-height': toastOffsetHeights()[$index] + 'px',\n      '--first-toast-height': firstToastHeight() + 'px',\n    }\"\n    [id]=\"toast.id\"\n    [message]=\"toast.message\"\n    [duration]=\"toast.duration\"\n    [paused]=\"toastService.paused()\"\n    [showProgress]=\"toastService.paused() || $first\"\n    (closed)=\"toastService.close(toast.id)\"\n    (elementDimensions)=\"setToastDimensions(toast.id, $event)\"\n  ></ndw-toast>\n}\n", styles: [":host{--stack-gap: var(--ndw-spacing-sm);--animation-speed: var(--ndw-animation-speed-default);position:relative;width:var(--max-toast-width)}:host .toast{--x: 0;--y: calc((var(--stack-gap) * var(--index)));--scaleX: calc(1 - .05 * var(--index));top:0;left:0;position:absolute;transform:translate(var(--x),var(--y));transform-origin:top center;transition-property:transform,opacity;transition-duration:var(--animation-speed);transition-timing-function:ease;z-index:calc(1000 - var(--index))}:host .toast:not(:first-child){transform:translate(var(--x),var(--y)) scaleX(var(--scaleX))}:host:not(:hover):not(:focus-within) .toast:not(:first-child){height:calc(var(--first-toast-height) - 2 * var(--ndw-spacing-xs))}:host:hover,:host:focus-within{height:calc(var(--total-toast-height) + var(--stack-gap) * (var(--total-toast-count) - 1))}:host:hover .toast,:host:focus-within .toast{--scaleX: 1;--y: calc(var(--offset-height) + var(--stack-gap) * var(--index));transition-duration:var(--animation-speed)}\n"] }]
         }] });
 class ToastService {
-    overlay = inject(Overlay);
-    isOpen = false;
-    overlayRef;
-    detach() {
-        this.overlayRef?.detach();
-        this.isOpen = false;
+    #maxToasts = 3;
+    #toasts = signal([]);
+    #overlay = inject(Overlay);
+    #paused$ = new BehaviorSubject(false);
+    #active$ = new BehaviorSubject(false);
+    #overlayRef;
+    paused = toSignal(this.#paused$, { initialValue: false });
+    get toasts() {
+        return this.#toasts;
     }
-    dispose() {
-        this.overlayRef?.dispose();
+    constructor() {
+        const getTimeElapsedWhileActiveAndNotPaused = () => interval(50).pipe(startWith(0), map(() => Date.now()), pairwise(), takeWhile(() => this.#active$.getValue()), filter(() => !this.#paused$.getValue()), map(([previous, current]) => current - previous));
+        this.#active$
+            .pipe(takeUntilDestroyed(), skipWhile((active) => !active), switchMap(() => getTimeElapsedWhileActiveAndNotPaused()), tap((elapsedMs) => this.#updateToastExpiration(elapsedMs)))
+            .subscribe();
     }
-    open(message) {
-        if (this.isOpen) {
-            this.detach();
+    /**
+     * Close a toast by its ID. If no ID is provided, all toasts will be closed.
+     */
+    close(id) {
+        const isLastToast = this.#toasts().findIndex((toast) => toast.id === id) === this.toasts().length - 1;
+        this.#removeToast(id);
+        const hasRemainingToasts = this.#toasts().length > 0;
+        if (!hasRemainingToasts) {
+            this.#overlayRef?.detach();
+            this.#active$.next(false);
+            this.#paused$.next(false);
+        }
+        // When the last toast is closed, resume the timer. This prevents the timer from
+        // being paused indefinitely when the last toast is closed as a result of a user
+        // action (e.g., clicking the close button). Since that action will not trigger
+        // the 'mouseleave' event on the toast list component,
+        if (isLastToast) {
+            this.#paused$.next(false);
         }
-        this.overlayRef = this.overlay.create({
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
-            positionStrategy: this.overlay.position().global().centerHorizontally().top('1.5rem'),
+    }
+    /**
+     * Open a toast notification with the given message and optional duration.
+     * @param message The message to display in the toast.
+     * @param duration Optional duration in milliseconds for which the toast should be visible. Defaults to 5000ms.
+     * @returns The ID of the created toast. Can be used to close the toast.
+     */
+    open(message, duration) {
+        const id = crypto.randomUUID();
+        this.#addToast({
+            id,
+            message,
+            duration: duration ?? 5000,
+            remainingTime: duration ?? 5000,
         });
-        const toastPortal = new ComponentPortal(ToastComponent);
-        const toastComponentRef = this.overlayRef.attach(toastPortal);
-        toastComponentRef.setInput('message', message);
-        toastComponentRef.instance.close.subscribe(() => {
-            this.detach();
-            this.dispose();
+        if (!this.#overlayRef) {
+            this.#overlayRef = this.#overlay.create({
+                scrollStrategy: this.#overlay.scrollStrategies.reposition(),
+                positionStrategy: this.#overlay.position().global().top('1.5rem').centerHorizontally(),
+            });
+        }
+        if (!this.#overlayRef.hasAttached()) {
+            const toastListPortal = new ComponentPortal(ToastListComponent);
+            this.#overlayRef.attach(toastListPortal);
+        }
+        this.#paused$.next(false);
+        this.#active$.next(true);
+        return id;
+    }
+    pause() {
+        this.#paused$.next(true);
+    }
+    resume() {
+        this.#paused$.next(false);
+    }
+    #removeToast(id) {
+        this.#toasts.update((toasts) => toasts.filter((toast) => toast.id !== id));
+    }
+    #addToast(toast) {
+        this.#toasts.update((toasts) => [toast, ...toasts].slice(0, this.#maxToasts));
+    }
+    #updateToastExpiration(elapsedMs) {
+        this.#toasts.update((toasts) => toasts.map((toast) => ({ ...toast, remainingTime: toast.remainingTime - elapsedMs })));
+        this.#toasts().forEach((toast) => {
+            if (toast.remainingTime <= 0) {
+                this.close(toast.id);
+            }
         });
-        this.isOpen = true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ToastService, providedIn: 'root' });
@@ -3836,11 +3468,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 /**
  * Generated bundle index. Do not edit.
  */
-export { AccordionComponent, AccordionService, ActionIconComponent, AlertComponent, AutoGrowDirective, AutocompleteOptionSelectionChange, AutosuggestAddOptionComponent, AutosuggestDirective, AutosuggestOptionComponent, AutosuggestPanelComponent, AvatarComponent, BadgeComponent, BannerComponent, BreadcrumbComponent, BreadcrumbGroupComponent, ButtonDirective, CARD_COMPONENTS, CARD_ID_TOKEN, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CheckboxComponent, CheckboxGroupComponent, CollapsibleComponent, DEFAULT_BACKGROUNDS, DashboardCardComponent, DropdownComponent, EditBarActionsComponent, EditBarComponent, EditBarMessageComponent, ErrorComponent, FavoriteComponent, FileUploadComponent, FormFieldComponent, FormFieldElement, IconComponent, InfoComponent, InputButtonComponent, InputDirective, InputIconComponent, LayoutBannersComponent, LayoutComponent, ListComponent, ListItemComponent, LoaderComponent, MAP_BACKGROUNDS, MAP_BACKGROUND_IMAGES, MAP_LAYERS, MAP_LAYER_IMAGES, MODAL_COMPONENTS, MainNavigationComponent, MapButtonComponent, MapDisplayComponent, MapDisplayOptionComponent, MaxCharDirective, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalService, MonthInputComponent, MultiSelectComponent, OptionComponent, OptionGroupComponent, PillComponent, PopoverTriggerDirective, RadioButtonComponent, RadioGroupComponent, RouterBreadcrumbsComponent, SplitterComponent, SummaryCardActionComponent, SummaryCardActionsComponent, SummaryCardComponent, SummaryCardContentComponent, SummaryCardHeaderComponent, SummaryCardSubtitleComponent, SummaryCardTagComponent, SummaryCardTagsComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastService, TooltipComponent, TooltipDirective, breadcrumbRouteDataKey, fontMapButtonIcons, mapButtonIcons, svgMapButtonIcons };
+export { AccordionComponent, AccordionService, ActionIconComponent, AlertComponent, AutoGrowDirective, AutosuggestAddOptionComponent, AutosuggestDirective, AutosuggestOptionComponent, AutosuggestPanelComponent, AvatarComponent, BadgeComponent, BannerComponent, BreadcrumbComponent, BreadcrumbGroupComponent, ButtonDirective, CARD_COMPONENTS, CARD_ID_TOKEN, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CheckboxComponent, CheckboxGroupComponent, CollapsibleComponent, DEFAULT_BACKGROUNDS, DashboardCardComponent, DropdownComponent, EditBarActionsComponent, EditBarComponent, EditBarMessageComponent, ErrorComponent, FavoriteComponent, FileUploadComponent, FormFieldComponent, FormFieldElement, IconComponent, InfoComponent, InputButtonComponent, InputDirective, InputIconComponent, LayoutBannersComponent, LayoutComponent, ListComponent, ListItemComponent, LoaderComponent, MAP_BACKGROUNDS, MAP_BACKGROUND_IMAGES, MAP_LAYERS, MAP_LAYER_IMAGES, MODAL_COMPONENTS, MainNavigationComponent, MapButtonComponent, MapDisplayComponent, MapDisplayOptionComponent, MapLegendComponent, MaxCharDirective, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalService, MonthInputComponent, MultiSelectComponent, OptionComponent, OptionGroupComponent, PillComponent, PopoverTriggerDirective, RadioButtonComponent, RadioGroupComponent, RouterBreadcrumbsComponent, SplitterComponent, SummaryCardActionComponent, SummaryCardActionsComponent, SummaryCardComponent, SummaryCardContentComponent, SummaryCardHeaderComponent, SummaryCardSubtitleComponent, SummaryCardTagComponent, SummaryCardTagsComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastService, TooltipComponent, TooltipDirective, fontMapButtonIcons, mapButtonIcons, ndwAgGridTheme, svgMapButtonIcons };
 //# sourceMappingURL=ndwnu-design-system.mjs.map