npm - @ndwnu/design-system - Versions diffs - 14.2.0 → 14.2.1 - Mend

@ndwnu/design-system 14.2.0 → 14.2.1

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 (55) hide show

package/CLAUDE.md +1525 -1525
package/README.md +4 -4
package/assets/icons.ts +83 -83
package/fesm2022/ndwnu-design-system.mjs +155 -155
package/fesm2022/ndwnu-design-system.mjs.map +1 -1
package/package.json +1 -1
package/styles/FONTS.md +46 -46
package/styles/base/_colors.scss +246 -246
package/styles/base/_fonts.scss +13 -13
package/styles/base/_material.scss +17 -17
package/styles/base/_typography.scss +133 -133
package/styles/base/_variables.scss +92 -92
package/styles/base/colors.stories.model.ts +85 -85
package/styles/base/colors.stories.ts +24 -24
package/styles/base/index.scss +5 -5
package/styles/base/typography.stories.ts +111 -111
package/styles/components/_button.scss +133 -133
package/styles/components/_card.scss +3 -3
package/styles/components/_datepicker.scss +134 -134
package/styles/components/_divider.scss +10 -10
package/styles/components/_dropdown.scss +8 -8
package/styles/components/_edit-bar.scss +97 -97
package/styles/components/_filter-button.scss +39 -39
package/styles/components/_guided-tour.scss +70 -70
package/styles/components/_input.scss +253 -253
package/styles/components/_label.scss +23 -23
package/styles/components/_link.scss +36 -36
package/styles/components/_list-item.scss +7 -7
package/styles/components/_map.scss +114 -114
package/styles/components/_menu-button.scss +37 -37
package/styles/components/_popover.scss +19 -19
package/styles/components/_summary-card.scss +183 -183
package/styles/components/_table.scss +8 -8
package/styles/components/divider.stories.ts +80 -80
package/styles/components/index.scss +17 -17
package/styles/components/link.stories.ts +154 -154
package/styles/index.scss +4 -4
package/styles/layout/_grid.scss +165 -165
package/styles/layout/_overlay.scss +7 -7
package/styles/layout/grid.stories.ts +168 -168
package/styles/layout/index.scss +2 -2
package/styles/storybook/_core.scss +60 -60
package/styles/storybook/_reset.scss +21 -21
package/styles/storybook/index.scss +17 -17
package/styles/storybook/overrides/_buttons.scss +95 -95
package/styles/storybook/overrides/_code-previews.scss +97 -97
package/styles/storybook/overrides/_content.scss +24 -24
package/styles/storybook/overrides/_headers.scss +31 -31
package/styles/storybook/overrides/_layout.scss +44 -44
package/styles/storybook/overrides/_table.scss +112 -112
package/styles/storybook/overrides/index.scss +6 -6
package/styles/storybook/overrides.css +355 -355
package/styles/utils/_screenreader.scss +13 -13
package/styles/utils/classes.stories.ts +157 -157
package/styles/utils/index.scss +1 -1

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

@@ -26,11 +26,11 @@ import { debounceTime } from 'rxjs/operators';
 class BadgeComponent extends CoreBadgeComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: BadgeComponent, isStandalone: true, selector: "ndw-badge", usesInheritance: true, ngImport: i0, template: "@if (variant() === 'error') {\n  !\n} @else if (value()) {\n  @if (!displayLargeNumbers() && valueOutOfRange()) {\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: [":host{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)}:host(.small){--badge-dot-size: var(--ndw-spacing-1xs);--badge-min-size: 1rem;--badge-padding-inline: var(--ndw-spacing-1xs)}:host(.error){--badge-background-color: var(--ndw-color-critical-500);--badge-border: none;--badge-color: var(--ndw-color-white);letter-spacing:0px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: BadgeComponent, isStandalone: true, selector: "ndw-badge", usesInheritance: true, ngImport: i0, template: "@if (variant() === 'error') {\r\n  !\r\n} @else if (value()) {\r\n  @if (!displayLargeNumbers() && valueOutOfRange()) {\r\n    <span class=\"dot\"></span>\r\n  } @else {\r\n    {{ value() }}\r\n  }\r\n} @else {\r\n  {{ value() }}\r\n}\r\n@if (ariaLabel()) {\r\n  <span class=\"sr-only\">{{ ariaLabel() }}</span>\r\n}\r\n", styles: [":host{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)}:host(.small){--badge-dot-size: var(--ndw-spacing-1xs);--badge-min-size: 1rem;--badge-padding-inline: var(--ndw-spacing-1xs)}:host(.error){--badge-background-color: var(--ndw-color-critical-500);--badge-border: none;--badge-color: var(--ndw-color-white);letter-spacing:0px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-badge', template: "@if (variant() === 'error') {\n  !\n} @else if (value()) {\n  @if (!displayLargeNumbers() && valueOutOfRange()) {\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: [":host{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)}:host(.small){--badge-dot-size: var(--ndw-spacing-1xs);--badge-min-size: 1rem;--badge-padding-inline: var(--ndw-spacing-1xs)}:host(.error){--badge-background-color: var(--ndw-color-critical-500);--badge-border: none;--badge-color: var(--ndw-color-white);letter-spacing:0px}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-badge', template: "@if (variant() === 'error') {\r\n  !\r\n} @else if (value()) {\r\n  @if (!displayLargeNumbers() && valueOutOfRange()) {\r\n    <span class=\"dot\"></span>\r\n  } @else {\r\n    {{ value() }}\r\n  }\r\n} @else {\r\n  {{ value() }}\r\n}\r\n@if (ariaLabel()) {\r\n  <span class=\"sr-only\">{{ ariaLabel() }}</span>\r\n}\r\n", styles: [":host{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)}:host(.small){--badge-dot-size: var(--ndw-spacing-1xs);--badge-min-size: 1rem;--badge-padding-inline: var(--ndw-spacing-1xs)}:host(.error){--badge-background-color: var(--ndw-color-critical-500);--badge-border: none;--badge-color: var(--ndw-color-white);letter-spacing:0px}\n"] }]
         }] });
 class AutosuggestDirective extends CoreAutosuggestDirective {
@@ -77,7 +77,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 class IconComponent extends CoreIconComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IconComponent, isStandalone: true, selector: "ndw-icon", host: { attributes: { "aria-hidden": "true", "translate": "no" }, classAttribute: "material-symbols-rounded notranslate" }, usesInheritance: true, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:inline-block;font-size:var(--ndw-spacing-lg);position:relative;-webkit-user-select:none;user-select:none}:host.icon--sm{font-size:var(--ndw-spacing-md)}:host.icon--filled{font-variation-settings:\"FILL\" 1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IconComponent, isStandalone: true, selector: "ndw-icon", host: { attributes: { "aria-hidden": "true", "translate": "no" }, classAttribute: "material-symbols-rounded notranslate" }, usesInheritance: true, ngImport: i0, template: "<ng-content />\r\n", styles: [":host{display:inline-block;font-size:var(--ndw-spacing-lg);position:relative;-webkit-user-select:none;user-select:none}:host.icon--sm{font-size:var(--ndw-spacing-md)}:host.icon--filled{font-variation-settings:\"FILL\" 1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
@@ -85,14 +85,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         'aria-hidden': 'true',
                         class: 'material-symbols-rounded notranslate',
                         translate: 'no',
-                    }, template: "<ng-content />\n", styles: [":host{display:inline-block;font-size:var(--ndw-spacing-lg);position:relative;-webkit-user-select:none;user-select:none}:host.icon--sm{font-size:var(--ndw-spacing-md)}:host.icon--filled{font-variation-settings:\"FILL\" 1}\n"] }]
+                    }, template: "<ng-content />\r\n", styles: [":host{display:inline-block;font-size:var(--ndw-spacing-lg);position:relative;-webkit-user-select:none;user-select:none}:host.icon--sm{font-size:var(--ndw-spacing-md)}:host.icon--filled{font-variation-settings:\"FILL\" 1}\n"] }]
         }] });
 class AutosuggestOptionComponent extends CoreAutosuggestOptionComponent {
     icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
     image = input(...(ngDevMode ? [undefined, { debugName: "image" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AutosuggestOptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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) {\r\n  <ndw-icon>{{ icon }}</ndw-icon>\r\n}\r\n@if (image(); as image) {\r\n  <img [alt]=\"image.alt\" [src]=\"image.src\" />\r\n}\r\n<span class=\"ndw-option-text\" [innerHTML]=\"label() | matchBold: searchTerm()\"></span>\r\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: "21.0.8", ngImport: i0, type: AutosuggestOptionComponent, decorators: [{
             type: Component,
@@ -105,12 +105,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '[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"] }]
+                    }, template: "@if (icon(); as icon) {\r\n  <ndw-icon>{{ icon }}</ndw-icon>\r\n}\r\n@if (image(); as image) {\r\n  <img [alt]=\"image.alt\" [src]=\"image.src\" />\r\n}\r\n<span class=\"ndw-option-text\" [innerHTML]=\"label() | matchBold: searchTerm()\"></span>\r\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"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }] } });
 class AutosuggestAddOptionComponent extends CoreAutosuggestAddOptionComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AutosuggestAddOptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", 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\r\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: "21.0.8", ngImport: i0, type: AutosuggestAddOptionComponent, decorators: [{
             type: Component,
@@ -122,12 +122,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '[class.ndw-autosuggest-option--selected]': 'selected()',
                         '(click)': 'selectViaInteraction()',
                         '(keydown)': 'handleKeydown($event)',
-                    }, 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"] }]
+                    }, template: "<ndw-icon [size]=\"'sm'\">add</ndw-icon> Voeg <span class=\"truncate\">'{{ value().label }}'</span> toe\r\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: "21.0.8", ngImport: i0, type: AutosuggestPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AutosuggestPanelComponent, isStandalone: true, selector: "ndw-autosuggest", usesInheritance: true, ngImport: i0, template: "<ng-template>\r\n  @if (suggestions().length === 0 && !enableAddOption()) {\r\n    <div class=\"ndw-autosuggest-panel\">\r\n      <ng-container *ngTemplateOutlet=\"emptyResults\"></ng-container>\r\n    </div>\r\n  } @else {\r\n    <datalist #panel class=\"ndw-autosuggest-panel\">\r\n      @for (option of slicedOptions(); track option) {\r\n        <ndw-autosuggest-option\r\n          #option\r\n          [icon]=\"option.icon\"\r\n          [image]=\"option.image\"\r\n          [label]=\"option.label\"\r\n          [value]=\"option\"\r\n          [searchTerm]=\"searchTerm()\"\r\n        />\r\n      }\r\n      @if (enableAddOption()) {\r\n        @if (!!searchTerm().trim()) {\r\n          <ndw-autosuggest-add-option\r\n            #option\r\n            [value]=\"createNewOption(searchTerm())\"\r\n            (addOption)=\"addNewOption($event)\"\r\n          />\r\n        } @else if (!suggestions().length) {\r\n          <ng-container *ngTemplateOutlet=\"emptyResults\"></ng-container>\r\n        }\r\n      }\r\n      @if (hasMoreResults()) {\r\n        <p class=\"ndw-autosuggest-panel__more-results\">\r\n          {{ hiddenResultsText() }}\r\n        </p>\r\n      }\r\n    </datalist>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #emptyResults>\r\n  <div class=\"ndw-autosuggest-panel__empty\">\r\n    <ndw-icon>sentiment_dissatisfied</ndw-icon>\r\n    {{ noResultText() }}\r\n  </div>\r\n</ng-template>\r\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: "21.0.8", ngImport: i0, type: AutosuggestPanelComponent, decorators: [{
             type: Component,
@@ -136,7 +136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         AutosuggestOptionComponent,
                         IconComponent,
                         NgTemplateOutlet,
-                    ], 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"] }]
+                    ], selector: 'ndw-autosuggest', template: "<ng-template>\r\n  @if (suggestions().length === 0 && !enableAddOption()) {\r\n    <div class=\"ndw-autosuggest-panel\">\r\n      <ng-container *ngTemplateOutlet=\"emptyResults\"></ng-container>\r\n    </div>\r\n  } @else {\r\n    <datalist #panel class=\"ndw-autosuggest-panel\">\r\n      @for (option of slicedOptions(); track option) {\r\n        <ndw-autosuggest-option\r\n          #option\r\n          [icon]=\"option.icon\"\r\n          [image]=\"option.image\"\r\n          [label]=\"option.label\"\r\n          [value]=\"option\"\r\n          [searchTerm]=\"searchTerm()\"\r\n        />\r\n      }\r\n      @if (enableAddOption()) {\r\n        @if (!!searchTerm().trim()) {\r\n          <ndw-autosuggest-add-option\r\n            #option\r\n            [value]=\"createNewOption(searchTerm())\"\r\n            (addOption)=\"addNewOption($event)\"\r\n          />\r\n        } @else if (!suggestions().length) {\r\n          <ng-container *ngTemplateOutlet=\"emptyResults\"></ng-container>\r\n        }\r\n      }\r\n      @if (hasMoreResults()) {\r\n        <p class=\"ndw-autosuggest-panel__more-results\">\r\n          {{ hiddenResultsText() }}\r\n        </p>\r\n      }\r\n    </datalist>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #emptyResults>\r\n  <div class=\"ndw-autosuggest-panel__empty\">\r\n    <ndw-icon>sentiment_dissatisfied</ndw-icon>\r\n    {{ noResultText() }}\r\n  </div>\r\n</ng-template>\r\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 extends CoreCheckboxComponent {
@@ -149,7 +149,7 @@ class CheckboxComponent extends CoreCheckboxComponent {
                 useExisting: CheckboxComponent,
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<input\n  type=\"checkbox\"\n  class=\"sr-only\"\n  [id]=\"'checkbox-' + uuid\"\n  [checked]=\"checked()\"\n  [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n  [disabled]=\"disabled()\"\n  [required]=\"required()\"\n  [indeterminate]=\"indeterminate()\"\n  (change)=\"onInputChange($event)\"\n/>\n<label [for]=\"'checkbox-' + uuid\" [ngClass]=\"{ 'switch-text': switch() }\">\n  <div\n    aria-hidden=\"true\"\n    [ngClass]=\"{ error: error(), success: success(), checkbox: !switch(), switch: switch() }\"\n  >\n    @if (!switch()) {\n      @if (checked()) {\n        <ndw-icon>check</ndw-icon>\n      } @else if (indeterminate()) {\n        <ndw-icon>remove</ndw-icon>\n      }\n    } @else {\n      <span class=\"switch-icon\">\n        @if (checked()) {\n          <ndw-icon>check</ndw-icon>\n        } @else {\n          <ndw-icon>close</ndw-icon>\n        }\n      </span>\n    }\n  </div>\n  <span id=\"checkbox-label-{{ uuid }}\">\n    <ng-content />\n  </span>\n</label>\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--checkable-input-size: 1.25rem;cursor:pointer;min-height:1.375rem;width:fit-content}div{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;color:var(--ndw-color-white);display:flex;height:var(--checkable-input-size);position:relative;transition:background-color var(--ndw-animation-speed-fast) ease-out,border-color var(--ndw-animation-speed-fast) ease-out,box-shadow var(--ndw-animation-speed-fast) ease-out;width:var(--checkable-input-size);flex-shrink:0}div.success{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}div.error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}label{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;color:var(--ndw-color-grey-600);cursor:pointer;display:flex;gap:var(--ndw-spacing-xs);line-height:var(--ndw-line-height-sm);width:fit-content;word-break:break-word}:host(.checked) div,:host(.indeterminate) div{background-color:var(--ndw-color-primary-500);border-color:var(--ndw-color-primary-500)}:host(.checked) div.success,:host(.indeterminate) div.success{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.error,:host(.indeterminate) div.error{background-color:var(--ndw-color-critical-500);border-color:var(--ndw-color-critical-500)}:host(:focus-within) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus-within) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-info-500)}:host(.checked:focus-within) div,:host(.indeterminate:focus-within) div{background-color:var(--ndw-color-primary-700)}:host(.disabled){pointer-events:none;-webkit-user-select:none;user-select:none}:host(.disabled) div{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-200)}:host(.disabled) label{color:var(--ndw-color-grey-400)}:host(.checked.disabled) div{background-color:var(--ndw-color-grey-200);border-color:var(--ndw-color-grey-200)}\n", "div{border-radius:var(--ndw-border-radius-sm)}div.checkbox ndw-icon{font-size:1.25rem;inset:calc(var(--ndw-border-size-sm) * -1);position:absolute}div.switch{width:2.75rem;height:var(--ndw-spacing-lg);border-radius:calc(var(--ndw-spacing-lg) / 2);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);padding:var(--ndw-border-size-lg)}div.switch .switch-icon{background-color:var(--ndw-color-grey-400);border-radius:50%;width:var(--ndw-spacing-md);height:var(--ndw-spacing-md);display:flex;align-items:center;justify-content:center;animation:translateToLeft var(--ndw-animation-speed-fast) ease-out forwards}div.switch .switch-icon ndw-icon{color:var(--ndw-color-white);font-size:var(--ndw-spacing-sm)}div.switch.error{background-color:var(--ndw-color-white)}label.switch-text{margin-top:var(--ndw-spacing-2xs)}:host(.checked) div.switch,:host(.indeterminate) div.switch{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.switch .switch-icon,:host(.indeterminate) div.switch .switch-icon{background-color:var(--ndw-color-white);animation:translateToRight var(--ndw-animation-speed-fast) ease-out forwards}:host(.checked) div.switch .switch-icon ndw-icon,:host(.indeterminate) div.switch .switch-icon ndw-icon{color:var(--ndw-color-positive-500)}:host(.checked) div.switch.error,:host(.indeterminate) div.switch.error{background-color:var(--ndw-color-positive-500)}:host(:hover) div{background-color:var(--ndw-color-white)}:host(:hover) div.checkbox{border-color:var(--ndw-color-primary-500)}:host(:hover) div.switch{border-color:var(--ndw-color-grey-500)}:host(:hover) div.switch ndw-icon{color:var(--ndw-color-white)}:host(.checked:hover) div.checkbox,:host(.indeterminate:hover) div.checkbox{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600)}:host(.checked:hover) div.switch,:host(.indeterminate:hover) div.switch{background-color:var(--ndw-color-positive-600);border-color:var(--ndw-color-positive-600)}:host(.checked:hover) div.switch ndw-icon,:host(.indeterminate:hover) div.switch ndw-icon{color:var(--ndw-color-positive-600)}:host(:focus-within) div.switch{border-color:var(--ndw-color-info-500)}:host(.disabled) div.switch{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300)}:host(.disabled) div.switch .switch-icon{background-color:var(--ndw-color-grey-200)}:host(.checked.disabled) div.switch,:host(.indeterminate.disabled) div.switch{background-color:var(--ndw-color-grey-400);border-color:var(--ndw-color-grey-400)}:host(.checked.disabled) div.switch .switch-icon,:host(.indeterminate.disabled) div.switch .switch-icon{background-color:var(--ndw-color-white)}:host(.checked.disabled) div.switch .switch-icon ndw-icon,:host(.indeterminate.disabled) div.switch .switch-icon ndw-icon{background-color:var(--ndw-color-white);color:var(--ndw-color-grey-400)}@keyframes translateToRight{0%{transform:translate(0);background-color:var(--ndw-color-grey-300)}to{transform:translate(20px);background-color:var(--ndw-color-white)}}@keyframes translateToLeft{0%{transform:translate(20px);background-color:var(--ndw-color-white)}to{transform:translate(0);background-color:var(--ndw-color-grey-300)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0, template: "<input\r\n  type=\"checkbox\"\r\n  class=\"sr-only\"\r\n  [id]=\"'checkbox-' + uuid\"\r\n  [checked]=\"checked()\"\r\n  [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\r\n  [disabled]=\"disabled()\"\r\n  [required]=\"required()\"\r\n  [indeterminate]=\"indeterminate()\"\r\n  (change)=\"onInputChange($event)\"\r\n/>\r\n<label [for]=\"'checkbox-' + uuid\" [ngClass]=\"{ 'switch-text': switch() }\">\r\n  <div\r\n    aria-hidden=\"true\"\r\n    [ngClass]=\"{ error: error(), success: success(), checkbox: !switch(), switch: switch() }\"\r\n  >\r\n    @if (!switch()) {\r\n      @if (checked()) {\r\n        <ndw-icon>check</ndw-icon>\r\n      } @else if (indeterminate()) {\r\n        <ndw-icon>remove</ndw-icon>\r\n      }\r\n    } @else {\r\n      <span class=\"switch-icon\">\r\n        @if (checked()) {\r\n          <ndw-icon>check</ndw-icon>\r\n        } @else {\r\n          <ndw-icon>close</ndw-icon>\r\n        }\r\n      </span>\r\n    }\r\n  </div>\r\n  <span id=\"checkbox-label-{{ uuid }}\">\r\n    <ng-content />\r\n  </span>\r\n</label>\r\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--checkable-input-size: 1.25rem;cursor:pointer;min-height:1.375rem;width:fit-content}div{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;color:var(--ndw-color-white);display:flex;height:var(--checkable-input-size);position:relative;transition:background-color var(--ndw-animation-speed-fast) ease-out,border-color var(--ndw-animation-speed-fast) ease-out,box-shadow var(--ndw-animation-speed-fast) ease-out;width:var(--checkable-input-size);flex-shrink:0}div.success{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}div.error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}label{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;color:var(--ndw-color-grey-600);cursor:pointer;display:flex;gap:var(--ndw-spacing-xs);line-height:var(--ndw-line-height-sm);width:fit-content;word-break:break-word}:host(.checked) div,:host(.indeterminate) div{background-color:var(--ndw-color-primary-500);border-color:var(--ndw-color-primary-500)}:host(.checked) div.success,:host(.indeterminate) div.success{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.error,:host(.indeterminate) div.error{background-color:var(--ndw-color-critical-500);border-color:var(--ndw-color-critical-500)}:host(:focus-within) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus-within) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-info-500)}:host(.checked:focus-within) div,:host(.indeterminate:focus-within) div{background-color:var(--ndw-color-primary-700)}:host(.disabled){pointer-events:none;-webkit-user-select:none;user-select:none}:host(.disabled) div{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-200)}:host(.disabled) label{color:var(--ndw-color-grey-400)}:host(.checked.disabled) div{background-color:var(--ndw-color-grey-200);border-color:var(--ndw-color-grey-200)}\n", "div{border-radius:var(--ndw-border-radius-sm)}div.checkbox ndw-icon{font-size:1.25rem;inset:calc(var(--ndw-border-size-sm) * -1);position:absolute}div.switch{width:2.75rem;height:var(--ndw-spacing-lg);border-radius:calc(var(--ndw-spacing-lg) / 2);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);padding:var(--ndw-border-size-lg)}div.switch .switch-icon{background-color:var(--ndw-color-grey-400);border-radius:50%;width:var(--ndw-spacing-md);height:var(--ndw-spacing-md);display:flex;align-items:center;justify-content:center;animation:translateToLeft var(--ndw-animation-speed-fast) ease-out forwards}div.switch .switch-icon ndw-icon{color:var(--ndw-color-white);font-size:var(--ndw-spacing-sm)}div.switch.error{background-color:var(--ndw-color-white)}label.switch-text{margin-top:var(--ndw-spacing-2xs)}:host(.checked) div.switch,:host(.indeterminate) div.switch{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.switch .switch-icon,:host(.indeterminate) div.switch .switch-icon{background-color:var(--ndw-color-white);animation:translateToRight var(--ndw-animation-speed-fast) ease-out forwards}:host(.checked) div.switch .switch-icon ndw-icon,:host(.indeterminate) div.switch .switch-icon ndw-icon{color:var(--ndw-color-positive-500)}:host(.checked) div.switch.error,:host(.indeterminate) div.switch.error{background-color:var(--ndw-color-positive-500)}:host(:hover) div{background-color:var(--ndw-color-white)}:host(:hover) div.checkbox{border-color:var(--ndw-color-primary-500)}:host(:hover) div.switch{border-color:var(--ndw-color-grey-500)}:host(:hover) div.switch ndw-icon{color:var(--ndw-color-white)}:host(.checked:hover) div.checkbox,:host(.indeterminate:hover) div.checkbox{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600)}:host(.checked:hover) div.switch,:host(.indeterminate:hover) div.switch{background-color:var(--ndw-color-positive-600);border-color:var(--ndw-color-positive-600)}:host(.checked:hover) div.switch ndw-icon,:host(.indeterminate:hover) div.switch ndw-icon{color:var(--ndw-color-positive-600)}:host(:focus-within) div.switch{border-color:var(--ndw-color-info-500)}:host(.disabled) div.switch{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300)}:host(.disabled) div.switch .switch-icon{background-color:var(--ndw-color-grey-200)}:host(.checked.disabled) div.switch,:host(.indeterminate.disabled) div.switch{background-color:var(--ndw-color-grey-400);border-color:var(--ndw-color-grey-400)}:host(.checked.disabled) div.switch .switch-icon,:host(.indeterminate.disabled) div.switch .switch-icon{background-color:var(--ndw-color-white)}:host(.checked.disabled) div.switch .switch-icon ndw-icon,:host(.indeterminate.disabled) div.switch .switch-icon ndw-icon{background-color:var(--ndw-color-white);color:var(--ndw-color-grey-400)}@keyframes translateToRight{0%{transform:translate(0);background-color:var(--ndw-color-grey-300)}to{transform:translate(20px);background-color:var(--ndw-color-white)}}@keyframes translateToLeft{0%{transform:translate(20px);background-color:var(--ndw-color-white)}to{transform:translate(0);background-color:var(--ndw-color-grey-300)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -163,16 +163,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             useExisting: CheckboxComponent,
                             multi: true,
                         },
-                    ], selector: 'ndw-checkbox', template: "<input\n  type=\"checkbox\"\n  class=\"sr-only\"\n  [id]=\"'checkbox-' + uuid\"\n  [checked]=\"checked()\"\n  [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n  [disabled]=\"disabled()\"\n  [required]=\"required()\"\n  [indeterminate]=\"indeterminate()\"\n  (change)=\"onInputChange($event)\"\n/>\n<label [for]=\"'checkbox-' + uuid\" [ngClass]=\"{ 'switch-text': switch() }\">\n  <div\n    aria-hidden=\"true\"\n    [ngClass]=\"{ error: error(), success: success(), checkbox: !switch(), switch: switch() }\"\n  >\n    @if (!switch()) {\n      @if (checked()) {\n        <ndw-icon>check</ndw-icon>\n      } @else if (indeterminate()) {\n        <ndw-icon>remove</ndw-icon>\n      }\n    } @else {\n      <span class=\"switch-icon\">\n        @if (checked()) {\n          <ndw-icon>check</ndw-icon>\n        } @else {\n          <ndw-icon>close</ndw-icon>\n        }\n      </span>\n    }\n  </div>\n  <span id=\"checkbox-label-{{ uuid }}\">\n    <ng-content />\n  </span>\n</label>\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--checkable-input-size: 1.25rem;cursor:pointer;min-height:1.375rem;width:fit-content}div{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;color:var(--ndw-color-white);display:flex;height:var(--checkable-input-size);position:relative;transition:background-color var(--ndw-animation-speed-fast) ease-out,border-color var(--ndw-animation-speed-fast) ease-out,box-shadow var(--ndw-animation-speed-fast) ease-out;width:var(--checkable-input-size);flex-shrink:0}div.success{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}div.error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}label{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;color:var(--ndw-color-grey-600);cursor:pointer;display:flex;gap:var(--ndw-spacing-xs);line-height:var(--ndw-line-height-sm);width:fit-content;word-break:break-word}:host(.checked) div,:host(.indeterminate) div{background-color:var(--ndw-color-primary-500);border-color:var(--ndw-color-primary-500)}:host(.checked) div.success,:host(.indeterminate) div.success{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.error,:host(.indeterminate) div.error{background-color:var(--ndw-color-critical-500);border-color:var(--ndw-color-critical-500)}:host(:focus-within) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus-within) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-info-500)}:host(.checked:focus-within) div,:host(.indeterminate:focus-within) div{background-color:var(--ndw-color-primary-700)}:host(.disabled){pointer-events:none;-webkit-user-select:none;user-select:none}:host(.disabled) div{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-200)}:host(.disabled) label{color:var(--ndw-color-grey-400)}:host(.checked.disabled) div{background-color:var(--ndw-color-grey-200);border-color:var(--ndw-color-grey-200)}\n", "div{border-radius:var(--ndw-border-radius-sm)}div.checkbox ndw-icon{font-size:1.25rem;inset:calc(var(--ndw-border-size-sm) * -1);position:absolute}div.switch{width:2.75rem;height:var(--ndw-spacing-lg);border-radius:calc(var(--ndw-spacing-lg) / 2);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);padding:var(--ndw-border-size-lg)}div.switch .switch-icon{background-color:var(--ndw-color-grey-400);border-radius:50%;width:var(--ndw-spacing-md);height:var(--ndw-spacing-md);display:flex;align-items:center;justify-content:center;animation:translateToLeft var(--ndw-animation-speed-fast) ease-out forwards}div.switch .switch-icon ndw-icon{color:var(--ndw-color-white);font-size:var(--ndw-spacing-sm)}div.switch.error{background-color:var(--ndw-color-white)}label.switch-text{margin-top:var(--ndw-spacing-2xs)}:host(.checked) div.switch,:host(.indeterminate) div.switch{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.switch .switch-icon,:host(.indeterminate) div.switch .switch-icon{background-color:var(--ndw-color-white);animation:translateToRight var(--ndw-animation-speed-fast) ease-out forwards}:host(.checked) div.switch .switch-icon ndw-icon,:host(.indeterminate) div.switch .switch-icon ndw-icon{color:var(--ndw-color-positive-500)}:host(.checked) div.switch.error,:host(.indeterminate) div.switch.error{background-color:var(--ndw-color-positive-500)}:host(:hover) div{background-color:var(--ndw-color-white)}:host(:hover) div.checkbox{border-color:var(--ndw-color-primary-500)}:host(:hover) div.switch{border-color:var(--ndw-color-grey-500)}:host(:hover) div.switch ndw-icon{color:var(--ndw-color-white)}:host(.checked:hover) div.checkbox,:host(.indeterminate:hover) div.checkbox{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600)}:host(.checked:hover) div.switch,:host(.indeterminate:hover) div.switch{background-color:var(--ndw-color-positive-600);border-color:var(--ndw-color-positive-600)}:host(.checked:hover) div.switch ndw-icon,:host(.indeterminate:hover) div.switch ndw-icon{color:var(--ndw-color-positive-600)}:host(:focus-within) div.switch{border-color:var(--ndw-color-info-500)}:host(.disabled) div.switch{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300)}:host(.disabled) div.switch .switch-icon{background-color:var(--ndw-color-grey-200)}:host(.checked.disabled) div.switch,:host(.indeterminate.disabled) div.switch{background-color:var(--ndw-color-grey-400);border-color:var(--ndw-color-grey-400)}:host(.checked.disabled) div.switch .switch-icon,:host(.indeterminate.disabled) div.switch .switch-icon{background-color:var(--ndw-color-white)}:host(.checked.disabled) div.switch .switch-icon ndw-icon,:host(.indeterminate.disabled) div.switch .switch-icon ndw-icon{background-color:var(--ndw-color-white);color:var(--ndw-color-grey-400)}@keyframes translateToRight{0%{transform:translate(0);background-color:var(--ndw-color-grey-300)}to{transform:translate(20px);background-color:var(--ndw-color-white)}}@keyframes translateToLeft{0%{transform:translate(20px);background-color:var(--ndw-color-white)}to{transform:translate(0);background-color:var(--ndw-color-grey-300)}}\n"] }]
+                    ], selector: 'ndw-checkbox', template: "<input\r\n  type=\"checkbox\"\r\n  class=\"sr-only\"\r\n  [id]=\"'checkbox-' + uuid\"\r\n  [checked]=\"checked()\"\r\n  [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\r\n  [disabled]=\"disabled()\"\r\n  [required]=\"required()\"\r\n  [indeterminate]=\"indeterminate()\"\r\n  (change)=\"onInputChange($event)\"\r\n/>\r\n<label [for]=\"'checkbox-' + uuid\" [ngClass]=\"{ 'switch-text': switch() }\">\r\n  <div\r\n    aria-hidden=\"true\"\r\n    [ngClass]=\"{ error: error(), success: success(), checkbox: !switch(), switch: switch() }\"\r\n  >\r\n    @if (!switch()) {\r\n      @if (checked()) {\r\n        <ndw-icon>check</ndw-icon>\r\n      } @else if (indeterminate()) {\r\n        <ndw-icon>remove</ndw-icon>\r\n      }\r\n    } @else {\r\n      <span class=\"switch-icon\">\r\n        @if (checked()) {\r\n          <ndw-icon>check</ndw-icon>\r\n        } @else {\r\n          <ndw-icon>close</ndw-icon>\r\n        }\r\n      </span>\r\n    }\r\n  </div>\r\n  <span id=\"checkbox-label-{{ uuid }}\">\r\n    <ng-content />\r\n  </span>\r\n</label>\r\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--checkable-input-size: 1.25rem;cursor:pointer;min-height:1.375rem;width:fit-content}div{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;color:var(--ndw-color-white);display:flex;height:var(--checkable-input-size);position:relative;transition:background-color var(--ndw-animation-speed-fast) ease-out,border-color var(--ndw-animation-speed-fast) ease-out,box-shadow var(--ndw-animation-speed-fast) ease-out;width:var(--checkable-input-size);flex-shrink:0}div.success{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}div.error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}label{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;color:var(--ndw-color-grey-600);cursor:pointer;display:flex;gap:var(--ndw-spacing-xs);line-height:var(--ndw-line-height-sm);width:fit-content;word-break:break-word}:host(.checked) div,:host(.indeterminate) div{background-color:var(--ndw-color-primary-500);border-color:var(--ndw-color-primary-500)}:host(.checked) div.success,:host(.indeterminate) div.success{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.error,:host(.indeterminate) div.error{background-color:var(--ndw-color-critical-500);border-color:var(--ndw-color-critical-500)}:host(:focus-within) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus-within) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-info-500)}:host(.checked:focus-within) div,:host(.indeterminate:focus-within) div{background-color:var(--ndw-color-primary-700)}:host(.disabled){pointer-events:none;-webkit-user-select:none;user-select:none}:host(.disabled) div{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-200)}:host(.disabled) label{color:var(--ndw-color-grey-400)}:host(.checked.disabled) div{background-color:var(--ndw-color-grey-200);border-color:var(--ndw-color-grey-200)}\n", "div{border-radius:var(--ndw-border-radius-sm)}div.checkbox ndw-icon{font-size:1.25rem;inset:calc(var(--ndw-border-size-sm) * -1);position:absolute}div.switch{width:2.75rem;height:var(--ndw-spacing-lg);border-radius:calc(var(--ndw-spacing-lg) / 2);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);padding:var(--ndw-border-size-lg)}div.switch .switch-icon{background-color:var(--ndw-color-grey-400);border-radius:50%;width:var(--ndw-spacing-md);height:var(--ndw-spacing-md);display:flex;align-items:center;justify-content:center;animation:translateToLeft var(--ndw-animation-speed-fast) ease-out forwards}div.switch .switch-icon ndw-icon{color:var(--ndw-color-white);font-size:var(--ndw-spacing-sm)}div.switch.error{background-color:var(--ndw-color-white)}label.switch-text{margin-top:var(--ndw-spacing-2xs)}:host(.checked) div.switch,:host(.indeterminate) div.switch{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.switch .switch-icon,:host(.indeterminate) div.switch .switch-icon{background-color:var(--ndw-color-white);animation:translateToRight var(--ndw-animation-speed-fast) ease-out forwards}:host(.checked) div.switch .switch-icon ndw-icon,:host(.indeterminate) div.switch .switch-icon ndw-icon{color:var(--ndw-color-positive-500)}:host(.checked) div.switch.error,:host(.indeterminate) div.switch.error{background-color:var(--ndw-color-positive-500)}:host(:hover) div{background-color:var(--ndw-color-white)}:host(:hover) div.checkbox{border-color:var(--ndw-color-primary-500)}:host(:hover) div.switch{border-color:var(--ndw-color-grey-500)}:host(:hover) div.switch ndw-icon{color:var(--ndw-color-white)}:host(.checked:hover) div.checkbox,:host(.indeterminate:hover) div.checkbox{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600)}:host(.checked:hover) div.switch,:host(.indeterminate:hover) div.switch{background-color:var(--ndw-color-positive-600);border-color:var(--ndw-color-positive-600)}:host(.checked:hover) div.switch ndw-icon,:host(.indeterminate:hover) div.switch ndw-icon{color:var(--ndw-color-positive-600)}:host(:focus-within) div.switch{border-color:var(--ndw-color-info-500)}:host(.disabled) div.switch{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300)}:host(.disabled) div.switch .switch-icon{background-color:var(--ndw-color-grey-200)}:host(.checked.disabled) div.switch,:host(.indeterminate.disabled) div.switch{background-color:var(--ndw-color-grey-400);border-color:var(--ndw-color-grey-400)}:host(.checked.disabled) div.switch .switch-icon,:host(.indeterminate.disabled) div.switch .switch-icon{background-color:var(--ndw-color-white)}:host(.checked.disabled) div.switch .switch-icon ndw-icon,:host(.indeterminate.disabled) div.switch .switch-icon ndw-icon{background-color:var(--ndw-color-white);color:var(--ndw-color-grey-400)}@keyframes translateToRight{0%{transform:translate(0);background-color:var(--ndw-color-grey-300)}to{transform:translate(20px);background-color:var(--ndw-color-white)}}@keyframes translateToLeft{0%{transform:translate(20px);background-color:var(--ndw-color-white)}to{transform:translate(0);background-color:var(--ndw-color-grey-300)}}\n"] }]
         }], propDecorators: { switch: [{ type: i0.Input, args: [{ isSignal: true, alias: "switch", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }] } });
 class CheckboxGroupComponent extends CoreCheckboxGroupComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CheckboxGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: CheckboxGroupComponent, isStandalone: true, selector: "ndw-checkbox-group", usesInheritance: true, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:grid;gap:var(--checkbox-group-gap)}:host{--checkbox-group-gap: var(--ndw-spacing-2xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: CheckboxGroupComponent, isStandalone: true, selector: "ndw-checkbox-group", usesInheritance: true, ngImport: i0, template: "<ng-content />\r\n", styles: [":host{display:grid;gap:var(--checkbox-group-gap)}:host{--checkbox-group-gap: var(--ndw-spacing-2xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-checkbox-group', template: "<ng-content />\n", styles: [":host{display:grid;gap:var(--checkbox-group-gap)}:host{--checkbox-group-gap: var(--ndw-spacing-2xs)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-checkbox-group', template: "<ng-content />\r\n", styles: [":host{display:grid;gap:var(--checkbox-group-gap)}:host{--checkbox-group-gap: var(--ndw-spacing-2xs)}\n"] }]
         }] });
 function createDutchDatepickerIntl() {
@@ -552,7 +552,7 @@ class CalendarComponent {
             { provide: MAT_DATE_LOCALE, useValue: 'nl-NL' },
             { provide: MatDatepickerIntl, useFactory: createDutchDatepickerIntl },
             provideNativeDateAdapter(),
-        ], viewQueries: [{ propertyName: "calendar", first: true, predicate: MatCalendar, descendants: true, isSignal: true }, { propertyName: "calendarElement", first: true, predicate: MatCalendar, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<mat-calendar\n  [minDate]=\"minDate()\"\n  [maxDate]=\"maxDate()\"\n  [dateClass]=\"dateClass()\"\n  [class.range-picker]=\"mode() === 'range'\"\n  [class.month-picker]=\"mode() === 'month'\"\n  [startView]=\"startView()\"\n  [startAt]=\"startAt()\"\n  [dateFilter]=\"internalDateEnabledFilter()\"\n  (monthSelected)=\"onMonthSelected($event)\"\n  (selectedChange)=\"onDateSelected($event)\"\n/>\n", styles: [":host{--calendar-width: 300px;display:block;width:var(--calendar-width);margin:calc(-1 * var(--ndw-spacing-2xs))}:host.elevated{border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-content)}:host.show-week-numbers{width:calc(var(--calendar-width) + 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "calendar", first: true, predicate: MatCalendar, descendants: true, isSignal: true }, { propertyName: "calendarElement", first: true, predicate: MatCalendar, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<mat-calendar\r\n  [minDate]=\"minDate()\"\r\n  [maxDate]=\"maxDate()\"\r\n  [dateClass]=\"dateClass()\"\r\n  [class.range-picker]=\"mode() === 'range'\"\r\n  [class.month-picker]=\"mode() === 'month'\"\r\n  [startView]=\"startView()\"\r\n  [startAt]=\"startAt()\"\r\n  [dateFilter]=\"internalDateEnabledFilter()\"\r\n  (monthSelected)=\"onMonthSelected($event)\"\r\n  (selectedChange)=\"onDateSelected($event)\"\r\n/>\r\n", styles: [":host{--calendar-width: 300px;display:block;width:var(--calendar-width);margin:calc(-1 * var(--ndw-spacing-2xs))}:host.elevated{border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-content)}:host.show-week-numbers{width:calc(var(--calendar-width) + 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
@@ -568,7 +568,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                     ], selector: 'ndw-calendar', host: {
                         '[class.elevated]': 'elevated()',
                         '[class.show-week-numbers]': 'showWeekNumbers()',
-                    }, template: "<mat-calendar\n  [minDate]=\"minDate()\"\n  [maxDate]=\"maxDate()\"\n  [dateClass]=\"dateClass()\"\n  [class.range-picker]=\"mode() === 'range'\"\n  [class.month-picker]=\"mode() === 'month'\"\n  [startView]=\"startView()\"\n  [startAt]=\"startAt()\"\n  [dateFilter]=\"internalDateEnabledFilter()\"\n  (monthSelected)=\"onMonthSelected($event)\"\n  (selectedChange)=\"onDateSelected($event)\"\n/>\n", styles: [":host{--calendar-width: 300px;display:block;width:var(--calendar-width);margin:calc(-1 * var(--ndw-spacing-2xs))}:host.elevated{border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-content)}:host.show-week-numbers{width:calc(var(--calendar-width) + 1rem)}\n"] }]
+                    }, template: "<mat-calendar\r\n  [minDate]=\"minDate()\"\r\n  [maxDate]=\"maxDate()\"\r\n  [dateClass]=\"dateClass()\"\r\n  [class.range-picker]=\"mode() === 'range'\"\r\n  [class.month-picker]=\"mode() === 'month'\"\r\n  [startView]=\"startView()\"\r\n  [startAt]=\"startAt()\"\r\n  [dateFilter]=\"internalDateEnabledFilter()\"\r\n  (monthSelected)=\"onMonthSelected($event)\"\r\n  (selectedChange)=\"onDateSelected($event)\"\r\n/>\r\n", styles: [":host{--calendar-width: 300px;display:block;width:var(--calendar-width);margin:calc(-1 * var(--ndw-spacing-2xs))}:host.elevated{border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-content)}:host.show-week-numbers{width:calc(var(--calendar-width) + 1rem)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], dateEnabledFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateEnabledFilter", required: false }] }], dateWithIndicatorFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateWithIndicatorFilter", required: false }] }], elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatCalendar), { isSignal: true }] }], calendarElement: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatCalendar), { ...{
                             read: (ElementRef),
                         }, isSignal: true }] }] } });
@@ -775,13 +775,13 @@ class TagComponent {
     suffixIcon = input('close', ...(ngDevMode ? [{ debugName: "suffixIcon" }] : []));
     clicked = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: TagComponent, isStandalone: true, selector: "ndw-tag", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, suffixAriaLabel: { classPropertyName: "suffixAriaLabel", publicName: "suffixAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.disabled": "disabled()" } }, ngImport: i0, template: "<ng-content />\n<button type=\"button\" [disabled]=\"disabled()\" (click)=\"clicked.emit($event)\">\n  <span class=\"sr-only\">{{ suffixAriaLabel() }}</span>\n  <ndw-icon>{{ suffixIcon() }}</ndw-icon>\n</button>\n", styles: [":host{position:relative;overflow:hidden;display:inline-grid;grid-template-columns:auto 1fr;align-items:center;height:1.5rem;padding:0 var(--ndw-spacing-2xs) 0 var(--ndw-spacing-xs);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary);border-radius:45px;outline:none;color:var(--ndw-color-primary);background-color:var(--ndw-color-primary-050);font-size:var(--ndw-font-size-sm);cursor:pointer;transition:var(--ndw-animation-speed-fast) ease-out}:host:hover{border:var(--ndw-border-size-sm) solid var(--ndw-color-primary);background-color:var(--ndw-color-primary);color:var(--ndw-color-white)}:host:active,:host:focus-within{border:var(--ndw-border-size-sm) solid var(--ndw-color-link-400);background-color:var(--ndw-color-primary-600);color:var(--ndw-color-white)}:host.disabled{border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-400);background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-400);pointer-events:none}:host button{background-color:transparent;border:0;color:inherit;padding:0}:host button:focus{outline:none}:host button:after{content:\"\";inset:0;position:absolute}:host button ndw-icon{display:grid;font-size:var(--ndw-font-size-sm);width:var(--ndw-spacing-md)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: TagComponent, isStandalone: true, selector: "ndw-tag", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, suffixAriaLabel: { classPropertyName: "suffixAriaLabel", publicName: "suffixAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.disabled": "disabled()" } }, ngImport: i0, template: "<ng-content />\r\n<button type=\"button\" [disabled]=\"disabled()\" (click)=\"clicked.emit($event)\">\r\n  <span class=\"sr-only\">{{ suffixAriaLabel() }}</span>\r\n  <ndw-icon>{{ suffixIcon() }}</ndw-icon>\r\n</button>\r\n", styles: [":host{position:relative;overflow:hidden;display:inline-grid;grid-template-columns:auto 1fr;align-items:center;height:1.5rem;padding:0 var(--ndw-spacing-2xs) 0 var(--ndw-spacing-xs);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary);border-radius:45px;outline:none;color:var(--ndw-color-primary);background-color:var(--ndw-color-primary-050);font-size:var(--ndw-font-size-sm);cursor:pointer;transition:var(--ndw-animation-speed-fast) ease-out}:host:hover{border:var(--ndw-border-size-sm) solid var(--ndw-color-primary);background-color:var(--ndw-color-primary);color:var(--ndw-color-white)}:host:active,:host:focus-within{border:var(--ndw-border-size-sm) solid var(--ndw-color-link-400);background-color:var(--ndw-color-primary-600);color:var(--ndw-color-white)}:host.disabled{border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-400);background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-400);pointer-events:none}:host button{background-color:transparent;border:0;color:inherit;padding:0}:host button:focus{outline:none}:host button:after{content:\"\";inset:0;position:absolute}:host button ndw-icon{display:grid;font-size:var(--ndw-font-size-sm);width:var(--ndw-spacing-md)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.disabled]': 'disabled()',
-                    }, imports: [IconComponent], selector: 'ndw-tag', template: "<ng-content />\n<button type=\"button\" [disabled]=\"disabled()\" (click)=\"clicked.emit($event)\">\n  <span class=\"sr-only\">{{ suffixAriaLabel() }}</span>\n  <ndw-icon>{{ suffixIcon() }}</ndw-icon>\n</button>\n", styles: [":host{position:relative;overflow:hidden;display:inline-grid;grid-template-columns:auto 1fr;align-items:center;height:1.5rem;padding:0 var(--ndw-spacing-2xs) 0 var(--ndw-spacing-xs);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary);border-radius:45px;outline:none;color:var(--ndw-color-primary);background-color:var(--ndw-color-primary-050);font-size:var(--ndw-font-size-sm);cursor:pointer;transition:var(--ndw-animation-speed-fast) ease-out}:host:hover{border:var(--ndw-border-size-sm) solid var(--ndw-color-primary);background-color:var(--ndw-color-primary);color:var(--ndw-color-white)}:host:active,:host:focus-within{border:var(--ndw-border-size-sm) solid var(--ndw-color-link-400);background-color:var(--ndw-color-primary-600);color:var(--ndw-color-white)}:host.disabled{border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-400);background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-400);pointer-events:none}:host button{background-color:transparent;border:0;color:inherit;padding:0}:host button:focus{outline:none}:host button:after{content:\"\";inset:0;position:absolute}:host button ndw-icon{display:grid;font-size:var(--ndw-font-size-sm);width:var(--ndw-spacing-md)}\n"] }]
+                    }, imports: [IconComponent], selector: 'ndw-tag', template: "<ng-content />\r\n<button type=\"button\" [disabled]=\"disabled()\" (click)=\"clicked.emit($event)\">\r\n  <span class=\"sr-only\">{{ suffixAriaLabel() }}</span>\r\n  <ndw-icon>{{ suffixIcon() }}</ndw-icon>\r\n</button>\r\n", styles: [":host{position:relative;overflow:hidden;display:inline-grid;grid-template-columns:auto 1fr;align-items:center;height:1.5rem;padding:0 var(--ndw-spacing-2xs) 0 var(--ndw-spacing-xs);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary);border-radius:45px;outline:none;color:var(--ndw-color-primary);background-color:var(--ndw-color-primary-050);font-size:var(--ndw-font-size-sm);cursor:pointer;transition:var(--ndw-animation-speed-fast) ease-out}:host:hover{border:var(--ndw-border-size-sm) solid var(--ndw-color-primary);background-color:var(--ndw-color-primary);color:var(--ndw-color-white)}:host:active,:host:focus-within{border:var(--ndw-border-size-sm) solid var(--ndw-color-link-400);background-color:var(--ndw-color-primary-600);color:var(--ndw-color-white)}:host.disabled{border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-400);background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-400);pointer-events:none}:host button{background-color:transparent;border:0;color:inherit;padding:0}:host button:focus{outline:none}:host button:after{content:\"\";inset:0;position:absolute}:host button ndw-icon{display:grid;font-size:var(--ndw-font-size-sm);width:var(--ndw-spacing-md)}\n"] }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], suffixAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixAriaLabel", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 class InputDirective {
@@ -950,7 +950,7 @@ class DatepickerComponent {
                 useExisting: forwardRef(() => DatepickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "input", first: true, predicate: InputDirective, descendants: true, isSignal: true }, { propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  ndwInput\n  [value]=\"showTags() ? '' : formattedValue()\"\n  (blur)=\"onDateInput($event.target.value)\"\n  [min]=\"minDate()\"\n  [max]=\"maxDate()\"\n  [placeholder]=\"placeholder()\"\n  [required]=\"required()\"\n  [disabled]=\"disabled()\"\n/>\n\n<button\n  ndwButton\n  class=\"calendar-button\"\n  type=\"button\"\n  extra-small\n  tertiary\n  [ndwPopoverTrigger]=\"calendarTemplate\"\n  [toggleOnClick]=\"true\"\n  [attr.aria-label]=\"openCalendarLabel()\"\n  [disabled]=\"disabled()\"\n  (isOpenChange)=\"onPopoverOpenChange($event)\"\n>\n  <ndw-icon>calendar_month</ndw-icon>\n</button>\n\n<ng-template #calendarTemplate>\n  <ndw-calendar\n    [ngModel]=\"value()\"\n    (ngModelChange)=\"onDateSelected($event)\"\n    [mode]=\"mode()\"\n    [minDate]=\"minDate()\"\n    [maxDate]=\"maxDate()\"\n    [startAt]=\"startAt()\"\n    [dateEnabledFilter]=\"dateEnabledFilter()\"\n    [dateWithIndicatorFilter]=\"dateWithIndicatorFilter()\"\n    [elevated]=\"false\"\n    [showWeekNumbers]=\"showWeekNumbers()\"\n  />\n</ng-template>\n\n@if (showTags() && value().length > 0) {\n  <div class=\"tag-container\">\n    @for (value of value(); track value.getTime()) {\n      <ndw-tag (clicked)=\"removeDate(value)\">{{ value | date: 'd-M-yyyy' }}</ndw-tag>\n    }\n  </div>\n}\n", styles: [":host{position:relative;flex:1}input{padding-right:calc(var(--ndw-spacing-xl) + var(--ndw-spacing-2xs))}.calendar-button{position:absolute;margin:var(--ndw-spacing-xs);right:0;top:0}.calendar-button[disabled]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500)}.tag-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--ndw-spacing-xs);padding-left:var(--ndw-spacing-xs);padding-right:var(--ndw-spacing-xs);padding-bottom:var(--ndw-spacing-xs)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "directive", type: InputDirective, selector: "input[ndwInput], select[ndwInput], textarea[ndwInput]" }, { 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: CalendarComponent, selector: "ndw-calendar", inputs: ["mode", "disabled", "minDate", "maxDate", "startAt", "dateEnabledFilter", "dateWithIndicatorFilter", "elevated", "showWeekNumbers"], outputs: ["disabledChange"] }, { kind: "component", type: TagComponent, selector: "ndw-tag", inputs: ["disabled", "suffixAriaLabel", "suffixIcon"], outputs: ["clicked"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: InputDirective, descendants: true, isSignal: true }, { propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<input\r\n  ndwInput\r\n  [value]=\"showTags() ? '' : formattedValue()\"\r\n  (blur)=\"onDateInput($event.target.value)\"\r\n  [min]=\"minDate()\"\r\n  [max]=\"maxDate()\"\r\n  [placeholder]=\"placeholder()\"\r\n  [required]=\"required()\"\r\n  [disabled]=\"disabled()\"\r\n/>\r\n\r\n<button\r\n  ndwButton\r\n  class=\"calendar-button\"\r\n  type=\"button\"\r\n  extra-small\r\n  tertiary\r\n  [ndwPopoverTrigger]=\"calendarTemplate\"\r\n  [toggleOnClick]=\"true\"\r\n  [attr.aria-label]=\"openCalendarLabel()\"\r\n  [disabled]=\"disabled()\"\r\n  (isOpenChange)=\"onPopoverOpenChange($event)\"\r\n>\r\n  <ndw-icon>calendar_month</ndw-icon>\r\n</button>\r\n\r\n<ng-template #calendarTemplate>\r\n  <ndw-calendar\r\n    [ngModel]=\"value()\"\r\n    (ngModelChange)=\"onDateSelected($event)\"\r\n    [mode]=\"mode()\"\r\n    [minDate]=\"minDate()\"\r\n    [maxDate]=\"maxDate()\"\r\n    [startAt]=\"startAt()\"\r\n    [dateEnabledFilter]=\"dateEnabledFilter()\"\r\n    [dateWithIndicatorFilter]=\"dateWithIndicatorFilter()\"\r\n    [elevated]=\"false\"\r\n    [showWeekNumbers]=\"showWeekNumbers()\"\r\n  />\r\n</ng-template>\r\n\r\n@if (showTags() && value().length > 0) {\r\n  <div class=\"tag-container\">\r\n    @for (value of value(); track value.getTime()) {\r\n      <ndw-tag (clicked)=\"removeDate(value)\">{{ value | date: 'd-M-yyyy' }}</ndw-tag>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{position:relative;flex:1}input{padding-right:calc(var(--ndw-spacing-xl) + var(--ndw-spacing-2xs))}.calendar-button{position:absolute;margin:var(--ndw-spacing-xs);right:0;top:0}.calendar-button[disabled]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500)}.tag-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--ndw-spacing-xs);padding-left:var(--ndw-spacing-xs);padding-right:var(--ndw-spacing-xs);padding-bottom:var(--ndw-spacing-xs)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "directive", type: InputDirective, selector: "input[ndwInput], select[ndwInput], textarea[ndwInput]" }, { 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: CalendarComponent, selector: "ndw-calendar", inputs: ["mode", "disabled", "minDate", "maxDate", "startAt", "dateEnabledFilter", "dateWithIndicatorFilter", "elevated", "showWeekNumbers"], outputs: ["disabledChange"] }, { kind: "component", type: TagComponent, selector: "ndw-tag", inputs: ["disabled", "suffixAriaLabel", "suffixIcon"], outputs: ["clicked"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
@@ -969,16 +969,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             useExisting: forwardRef(() => DatepickerComponent),
                             multi: true,
                         },
-                    ], selector: 'ndw-datepicker', template: "<input\n  ndwInput\n  [value]=\"showTags() ? '' : formattedValue()\"\n  (blur)=\"onDateInput($event.target.value)\"\n  [min]=\"minDate()\"\n  [max]=\"maxDate()\"\n  [placeholder]=\"placeholder()\"\n  [required]=\"required()\"\n  [disabled]=\"disabled()\"\n/>\n\n<button\n  ndwButton\n  class=\"calendar-button\"\n  type=\"button\"\n  extra-small\n  tertiary\n  [ndwPopoverTrigger]=\"calendarTemplate\"\n  [toggleOnClick]=\"true\"\n  [attr.aria-label]=\"openCalendarLabel()\"\n  [disabled]=\"disabled()\"\n  (isOpenChange)=\"onPopoverOpenChange($event)\"\n>\n  <ndw-icon>calendar_month</ndw-icon>\n</button>\n\n<ng-template #calendarTemplate>\n  <ndw-calendar\n    [ngModel]=\"value()\"\n    (ngModelChange)=\"onDateSelected($event)\"\n    [mode]=\"mode()\"\n    [minDate]=\"minDate()\"\n    [maxDate]=\"maxDate()\"\n    [startAt]=\"startAt()\"\n    [dateEnabledFilter]=\"dateEnabledFilter()\"\n    [dateWithIndicatorFilter]=\"dateWithIndicatorFilter()\"\n    [elevated]=\"false\"\n    [showWeekNumbers]=\"showWeekNumbers()\"\n  />\n</ng-template>\n\n@if (showTags() && value().length > 0) {\n  <div class=\"tag-container\">\n    @for (value of value(); track value.getTime()) {\n      <ndw-tag (clicked)=\"removeDate(value)\">{{ value | date: 'd-M-yyyy' }}</ndw-tag>\n    }\n  </div>\n}\n", styles: [":host{position:relative;flex:1}input{padding-right:calc(var(--ndw-spacing-xl) + var(--ndw-spacing-2xs))}.calendar-button{position:absolute;margin:var(--ndw-spacing-xs);right:0;top:0}.calendar-button[disabled]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500)}.tag-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--ndw-spacing-xs);padding-left:var(--ndw-spacing-xs);padding-right:var(--ndw-spacing-xs);padding-bottom:var(--ndw-spacing-xs)}\n"] }]
+                    ], selector: 'ndw-datepicker', template: "<input\r\n  ndwInput\r\n  [value]=\"showTags() ? '' : formattedValue()\"\r\n  (blur)=\"onDateInput($event.target.value)\"\r\n  [min]=\"minDate()\"\r\n  [max]=\"maxDate()\"\r\n  [placeholder]=\"placeholder()\"\r\n  [required]=\"required()\"\r\n  [disabled]=\"disabled()\"\r\n/>\r\n\r\n<button\r\n  ndwButton\r\n  class=\"calendar-button\"\r\n  type=\"button\"\r\n  extra-small\r\n  tertiary\r\n  [ndwPopoverTrigger]=\"calendarTemplate\"\r\n  [toggleOnClick]=\"true\"\r\n  [attr.aria-label]=\"openCalendarLabel()\"\r\n  [disabled]=\"disabled()\"\r\n  (isOpenChange)=\"onPopoverOpenChange($event)\"\r\n>\r\n  <ndw-icon>calendar_month</ndw-icon>\r\n</button>\r\n\r\n<ng-template #calendarTemplate>\r\n  <ndw-calendar\r\n    [ngModel]=\"value()\"\r\n    (ngModelChange)=\"onDateSelected($event)\"\r\n    [mode]=\"mode()\"\r\n    [minDate]=\"minDate()\"\r\n    [maxDate]=\"maxDate()\"\r\n    [startAt]=\"startAt()\"\r\n    [dateEnabledFilter]=\"dateEnabledFilter()\"\r\n    [dateWithIndicatorFilter]=\"dateWithIndicatorFilter()\"\r\n    [elevated]=\"false\"\r\n    [showWeekNumbers]=\"showWeekNumbers()\"\r\n  />\r\n</ng-template>\r\n\r\n@if (showTags() && value().length > 0) {\r\n  <div class=\"tag-container\">\r\n    @for (value of value(); track value.getTime()) {\r\n      <ndw-tag (clicked)=\"removeDate(value)\">{{ value | date: 'd-M-yyyy' }}</ndw-tag>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{position:relative;flex:1}input{padding-right:calc(var(--ndw-spacing-xl) + var(--ndw-spacing-2xs))}.calendar-button{position:absolute;margin:var(--ndw-spacing-xs);right:0;top:0}.calendar-button[disabled]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500)}.tag-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--ndw-spacing-xs);padding-left:var(--ndw-spacing-xs);padding-right:var(--ndw-spacing-xs);padding-bottom:var(--ndw-spacing-xs)}\n"] }]
         }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], openCalendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openCalendarLabel", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateEnabledFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateEnabledFilter", required: false }] }], dateWithIndicatorFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateWithIndicatorFilter", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], input: [{ type: i0.ViewChild, args: [i0.forwardRef(() => InputDirective), { isSignal: true }] }], popoverTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverTriggerDirective), { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 class ErrorComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ErrorComponent, isStandalone: true, selector: "ndw-error", ngImport: i0, template: "<ndw-icon>warning</ndw-icon>\n<ng-content />\n", styles: [":host{align-content:center;color:var(--ndw-color-critical-500);display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-xs);gap:var(--ndw-spacing-2xs);grid-template-columns:auto 1fr;align-items:flex-start;word-break:break-word}ndw-icon{font-size:.875rem}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ErrorComponent, isStandalone: true, selector: "ndw-error", ngImport: i0, template: "<ndw-icon>warning</ndw-icon>\r\n<ng-content />\r\n", styles: [":host{align-content:center;color:var(--ndw-color-critical-500);display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-xs);gap:var(--ndw-spacing-2xs);grid-template-columns:auto 1fr;align-items:flex-start;word-break:break-word}ndw-icon{font-size:.875rem}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ErrorComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], selector: 'ndw-error', template: "<ndw-icon>warning</ndw-icon>\n<ng-content />\n", styles: [":host{align-content:center;color:var(--ndw-color-critical-500);display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-xs);gap:var(--ndw-spacing-2xs);grid-template-columns:auto 1fr;align-items:flex-start;word-break:break-word}ndw-icon{font-size:.875rem}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], selector: 'ndw-error', template: "<ndw-icon>warning</ndw-icon>\r\n<ng-content />\r\n", styles: [":host{align-content:center;color:var(--ndw-color-critical-500);display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-xs);gap:var(--ndw-spacing-2xs);grid-template-columns:auto 1fr;align-items:flex-start;word-break:break-word}ndw-icon{font-size:.875rem}\n"] }]
         }] });
 const MIME_TYPE_MAP = {
@@ -1157,7 +1157,7 @@ class FileUploadComponent {
                 useExisting: FileUploadComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "fileInputElement", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!draggingOver() && !selectedFile()) {\n  <ndw-icon>cloud_upload</ndw-icon>\n} @else if (draggingOver() && !selectedFile()) {\n  <ndw-icon>pageless</ndw-icon>\n}\n\n{{ displayText() }}\n\n@if (selectedFile()) {\n  <div class=\"file-name\">\n    <button\n      class=\"file-name-text\"\n      (click)=\"onDownloadFileClick()\"\n      (keydown.enter)=\"onDownloadFileClick()\"\n    >\n      {{ selectedFile()?.name }}\n    </button>\n\n    <div class=\"file-delete-icon\">\n      <button (click)=\"onDeleteClick($event)\" (keydown.enter)=\"onDeleteClick($event)\">\n        <ndw-icon>delete</ndw-icon>\n      </button>\n    </div>\n  </div>\n\n  <p class=\"file-date\">\n    {{ uploadDate() }}\n  </p>\n}\n\n<input type=\"file\" #fileInput hidden aria-hidden=\"true\" (change)=\"onFileSelected($event)\" />\n", styles: [":host{display:grid;align-items:center;border-radius:var(--ndw-border-radius-sm);border:var(--ndw-border-size-sm) dashed var(--ndw-color-info-500);background-color:var(--ndw-color-info-100);color:var(--ndw-color-info-500);padding:var(--ndw-spacing-lg);text-align:center;cursor:pointer;transition:var(--ndw-animation-speed-fast) ease-out}:host ndw-icon{color:var(--ndw-color-info-500);font-size:var(--ndw-font-size-md);pointer-events:none}:host.dragging,:host:hover,:host:focus{background-color:var(--ndw-color-info-300);outline:none}:host.success.file-selected{background-color:var(--ndw-color-positive-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-positive-500);color:var(--ndw-color-positive-500)}:host.error{background-color:var(--ndw-color-critical-100);border:var(--ndw-border-size-sm) dashed var(--ndw-color-critical-500);color:var(--ndw-color-critical-500)}:host.error ndw-icon{color:var(--ndw-color-critical-500);pointer-events:none}:host.error.file-selected{background-color:var(--ndw-color-critical-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-critical-500);color:var(--ndw-color-critical-500)}:host.error.file-selected ndw-icon{color:var(--ndw-color-info-500);pointer-events:all}:host.disabled,:host.readonly{background-color:var(--ndw-color-grey-100);border:var(--ndw-border-size-sm) dashed var(--ndw-color-grey-500);color:var(--ndw-color-grey-500);cursor:not-allowed}:host.disabled ndw-icon,:host.readonly ndw-icon{color:var(--ndw-color-grey-500);pointer-events:none}:host.disabled.file-selected .file-name,:host.readonly.file-selected .file-name{color:var(--ndw-color-info-500)}:host.disabled.file-selected .file-name .file-name-text:hover,:host.readonly.file-selected .file-name .file-name-text:hover{text-decoration:none}:host.disabled.file-selected .file-delete-icon,:host.readonly.file-selected .file-delete-icon{display:none}:host.file-selected{background-color:var(--ndw-color-grey-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);padding:var(--ndw-spacing-sm);align-items:baseline;word-break:break-all;cursor:auto;text-align:left}:host.file-selected .file-name{display:flex;align-items:center}:host.file-selected .file-name .file-name-text{background:transparent;border:none;padding:0;color:var(--ndw-color-info-500);cursor:pointer}:host.file-selected .file-name .file-name-text:hover,:host.file-selected .file-name .file-name-text:focus{text-decoration:underline;outline:none}:host.file-selected .file-date{font-size:var(--ndw-font-size-xs);color:var(--ndw-color-grey-500);margin:0}:host.file-selected .file-delete-icon{display:flex;flex:1;justify-content:end;pointer-events:all}:host.file-selected .file-delete-icon button{background:transparent;border:none;cursor:pointer;padding:var(--ndw-spacing-2xs);border-radius:var(--ndw-border-radius-md);transition:background-color .15s ease-in-out}:host.file-selected .file-delete-icon button:hover{background-color:var(--ndw-alpha-black-007)}:host.file-selected .file-delete-icon button:active,:host.file-selected .file-delete-icon button:focus,:host.file-selected .file-delete-icon button:focus-visible{background-color:var(--ndw-alpha-black-015)}:host.file-selected .file-delete-icon button:focus-visible{color:var(--ndw-color-primary);outline-color:var(--ndw-color-info-500)}:host.file-selected .file-delete-icon ndw-icon{pointer-events:all}:host.file-selected .file-delete-icon ndw-icon:focus{color:var(--ndw-color-info-500);outline:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "fileInputElement", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!draggingOver() && !selectedFile()) {\r\n  <ndw-icon>cloud_upload</ndw-icon>\r\n} @else if (draggingOver() && !selectedFile()) {\r\n  <ndw-icon>pageless</ndw-icon>\r\n}\r\n\r\n{{ displayText() }}\r\n\r\n@if (selectedFile()) {\r\n  <div class=\"file-name\">\r\n    <button\r\n      class=\"file-name-text\"\r\n      (click)=\"onDownloadFileClick()\"\r\n      (keydown.enter)=\"onDownloadFileClick()\"\r\n    >\r\n      {{ selectedFile()?.name }}\r\n    </button>\r\n\r\n    <div class=\"file-delete-icon\">\r\n      <button (click)=\"onDeleteClick($event)\" (keydown.enter)=\"onDeleteClick($event)\">\r\n        <ndw-icon>delete</ndw-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <p class=\"file-date\">\r\n    {{ uploadDate() }}\r\n  </p>\r\n}\r\n\r\n<input type=\"file\" #fileInput hidden aria-hidden=\"true\" (change)=\"onFileSelected($event)\" />\r\n", styles: [":host{display:grid;align-items:center;border-radius:var(--ndw-border-radius-sm);border:var(--ndw-border-size-sm) dashed var(--ndw-color-info-500);background-color:var(--ndw-color-info-100);color:var(--ndw-color-info-500);padding:var(--ndw-spacing-lg);text-align:center;cursor:pointer;transition:var(--ndw-animation-speed-fast) ease-out}:host ndw-icon{color:var(--ndw-color-info-500);font-size:var(--ndw-font-size-md);pointer-events:none}:host.dragging,:host:hover,:host:focus{background-color:var(--ndw-color-info-300);outline:none}:host.success.file-selected{background-color:var(--ndw-color-positive-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-positive-500);color:var(--ndw-color-positive-500)}:host.error{background-color:var(--ndw-color-critical-100);border:var(--ndw-border-size-sm) dashed var(--ndw-color-critical-500);color:var(--ndw-color-critical-500)}:host.error ndw-icon{color:var(--ndw-color-critical-500);pointer-events:none}:host.error.file-selected{background-color:var(--ndw-color-critical-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-critical-500);color:var(--ndw-color-critical-500)}:host.error.file-selected ndw-icon{color:var(--ndw-color-info-500);pointer-events:all}:host.disabled,:host.readonly{background-color:var(--ndw-color-grey-100);border:var(--ndw-border-size-sm) dashed var(--ndw-color-grey-500);color:var(--ndw-color-grey-500);cursor:not-allowed}:host.disabled ndw-icon,:host.readonly ndw-icon{color:var(--ndw-color-grey-500);pointer-events:none}:host.disabled.file-selected .file-name,:host.readonly.file-selected .file-name{color:var(--ndw-color-info-500)}:host.disabled.file-selected .file-name .file-name-text:hover,:host.readonly.file-selected .file-name .file-name-text:hover{text-decoration:none}:host.disabled.file-selected .file-delete-icon,:host.readonly.file-selected .file-delete-icon{display:none}:host.file-selected{background-color:var(--ndw-color-grey-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);padding:var(--ndw-spacing-sm);align-items:baseline;word-break:break-all;cursor:auto;text-align:left}:host.file-selected .file-name{display:flex;align-items:center}:host.file-selected .file-name .file-name-text{background:transparent;border:none;padding:0;color:var(--ndw-color-info-500);cursor:pointer}:host.file-selected .file-name .file-name-text:hover,:host.file-selected .file-name .file-name-text:focus{text-decoration:underline;outline:none}:host.file-selected .file-date{font-size:var(--ndw-font-size-xs);color:var(--ndw-color-grey-500);margin:0}:host.file-selected .file-delete-icon{display:flex;flex:1;justify-content:end;pointer-events:all}:host.file-selected .file-delete-icon button{background:transparent;border:none;cursor:pointer;padding:var(--ndw-spacing-2xs);border-radius:var(--ndw-border-radius-md);transition:background-color .15s ease-in-out}:host.file-selected .file-delete-icon button:hover{background-color:var(--ndw-alpha-black-007)}:host.file-selected .file-delete-icon button:active,:host.file-selected .file-delete-icon button:focus,:host.file-selected .file-delete-icon button:focus-visible{background-color:var(--ndw-alpha-black-015)}:host.file-selected .file-delete-icon button:focus-visible{color:var(--ndw-color-primary);outline-color:var(--ndw-color-info-500)}:host.file-selected .file-delete-icon ndw-icon{pointer-events:all}:host.file-selected .file-delete-icon ndw-icon:focus{color:var(--ndw-color-info-500);outline:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
@@ -1181,19 +1181,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             useExisting: FileUploadComponent,
                             multi: true,
                         },
-                    ], selector: 'ndw-file-upload', template: "@if (!draggingOver() && !selectedFile()) {\n  <ndw-icon>cloud_upload</ndw-icon>\n} @else if (draggingOver() && !selectedFile()) {\n  <ndw-icon>pageless</ndw-icon>\n}\n\n{{ displayText() }}\n\n@if (selectedFile()) {\n  <div class=\"file-name\">\n    <button\n      class=\"file-name-text\"\n      (click)=\"onDownloadFileClick()\"\n      (keydown.enter)=\"onDownloadFileClick()\"\n    >\n      {{ selectedFile()?.name }}\n    </button>\n\n    <div class=\"file-delete-icon\">\n      <button (click)=\"onDeleteClick($event)\" (keydown.enter)=\"onDeleteClick($event)\">\n        <ndw-icon>delete</ndw-icon>\n      </button>\n    </div>\n  </div>\n\n  <p class=\"file-date\">\n    {{ uploadDate() }}\n  </p>\n}\n\n<input type=\"file\" #fileInput hidden aria-hidden=\"true\" (change)=\"onFileSelected($event)\" />\n", styles: [":host{display:grid;align-items:center;border-radius:var(--ndw-border-radius-sm);border:var(--ndw-border-size-sm) dashed var(--ndw-color-info-500);background-color:var(--ndw-color-info-100);color:var(--ndw-color-info-500);padding:var(--ndw-spacing-lg);text-align:center;cursor:pointer;transition:var(--ndw-animation-speed-fast) ease-out}:host ndw-icon{color:var(--ndw-color-info-500);font-size:var(--ndw-font-size-md);pointer-events:none}:host.dragging,:host:hover,:host:focus{background-color:var(--ndw-color-info-300);outline:none}:host.success.file-selected{background-color:var(--ndw-color-positive-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-positive-500);color:var(--ndw-color-positive-500)}:host.error{background-color:var(--ndw-color-critical-100);border:var(--ndw-border-size-sm) dashed var(--ndw-color-critical-500);color:var(--ndw-color-critical-500)}:host.error ndw-icon{color:var(--ndw-color-critical-500);pointer-events:none}:host.error.file-selected{background-color:var(--ndw-color-critical-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-critical-500);color:var(--ndw-color-critical-500)}:host.error.file-selected ndw-icon{color:var(--ndw-color-info-500);pointer-events:all}:host.disabled,:host.readonly{background-color:var(--ndw-color-grey-100);border:var(--ndw-border-size-sm) dashed var(--ndw-color-grey-500);color:var(--ndw-color-grey-500);cursor:not-allowed}:host.disabled ndw-icon,:host.readonly ndw-icon{color:var(--ndw-color-grey-500);pointer-events:none}:host.disabled.file-selected .file-name,:host.readonly.file-selected .file-name{color:var(--ndw-color-info-500)}:host.disabled.file-selected .file-name .file-name-text:hover,:host.readonly.file-selected .file-name .file-name-text:hover{text-decoration:none}:host.disabled.file-selected .file-delete-icon,:host.readonly.file-selected .file-delete-icon{display:none}:host.file-selected{background-color:var(--ndw-color-grey-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);padding:var(--ndw-spacing-sm);align-items:baseline;word-break:break-all;cursor:auto;text-align:left}:host.file-selected .file-name{display:flex;align-items:center}:host.file-selected .file-name .file-name-text{background:transparent;border:none;padding:0;color:var(--ndw-color-info-500);cursor:pointer}:host.file-selected .file-name .file-name-text:hover,:host.file-selected .file-name .file-name-text:focus{text-decoration:underline;outline:none}:host.file-selected .file-date{font-size:var(--ndw-font-size-xs);color:var(--ndw-color-grey-500);margin:0}:host.file-selected .file-delete-icon{display:flex;flex:1;justify-content:end;pointer-events:all}:host.file-selected .file-delete-icon button{background:transparent;border:none;cursor:pointer;padding:var(--ndw-spacing-2xs);border-radius:var(--ndw-border-radius-md);transition:background-color .15s ease-in-out}:host.file-selected .file-delete-icon button:hover{background-color:var(--ndw-alpha-black-007)}:host.file-selected .file-delete-icon button:active,:host.file-selected .file-delete-icon button:focus,:host.file-selected .file-delete-icon button:focus-visible{background-color:var(--ndw-alpha-black-015)}:host.file-selected .file-delete-icon button:focus-visible{color:var(--ndw-color-primary);outline-color:var(--ndw-color-info-500)}:host.file-selected .file-delete-icon ndw-icon{pointer-events:all}:host.file-selected .file-delete-icon ndw-icon:focus{color:var(--ndw-color-info-500);outline:none}\n"] }]
+                    ], selector: 'ndw-file-upload', template: "@if (!draggingOver() && !selectedFile()) {\r\n  <ndw-icon>cloud_upload</ndw-icon>\r\n} @else if (draggingOver() && !selectedFile()) {\r\n  <ndw-icon>pageless</ndw-icon>\r\n}\r\n\r\n{{ displayText() }}\r\n\r\n@if (selectedFile()) {\r\n  <div class=\"file-name\">\r\n    <button\r\n      class=\"file-name-text\"\r\n      (click)=\"onDownloadFileClick()\"\r\n      (keydown.enter)=\"onDownloadFileClick()\"\r\n    >\r\n      {{ selectedFile()?.name }}\r\n    </button>\r\n\r\n    <div class=\"file-delete-icon\">\r\n      <button (click)=\"onDeleteClick($event)\" (keydown.enter)=\"onDeleteClick($event)\">\r\n        <ndw-icon>delete</ndw-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <p class=\"file-date\">\r\n    {{ uploadDate() }}\r\n  </p>\r\n}\r\n\r\n<input type=\"file\" #fileInput hidden aria-hidden=\"true\" (change)=\"onFileSelected($event)\" />\r\n", styles: [":host{display:grid;align-items:center;border-radius:var(--ndw-border-radius-sm);border:var(--ndw-border-size-sm) dashed var(--ndw-color-info-500);background-color:var(--ndw-color-info-100);color:var(--ndw-color-info-500);padding:var(--ndw-spacing-lg);text-align:center;cursor:pointer;transition:var(--ndw-animation-speed-fast) ease-out}:host ndw-icon{color:var(--ndw-color-info-500);font-size:var(--ndw-font-size-md);pointer-events:none}:host.dragging,:host:hover,:host:focus{background-color:var(--ndw-color-info-300);outline:none}:host.success.file-selected{background-color:var(--ndw-color-positive-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-positive-500);color:var(--ndw-color-positive-500)}:host.error{background-color:var(--ndw-color-critical-100);border:var(--ndw-border-size-sm) dashed var(--ndw-color-critical-500);color:var(--ndw-color-critical-500)}:host.error ndw-icon{color:var(--ndw-color-critical-500);pointer-events:none}:host.error.file-selected{background-color:var(--ndw-color-critical-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-critical-500);color:var(--ndw-color-critical-500)}:host.error.file-selected ndw-icon{color:var(--ndw-color-info-500);pointer-events:all}:host.disabled,:host.readonly{background-color:var(--ndw-color-grey-100);border:var(--ndw-border-size-sm) dashed var(--ndw-color-grey-500);color:var(--ndw-color-grey-500);cursor:not-allowed}:host.disabled ndw-icon,:host.readonly ndw-icon{color:var(--ndw-color-grey-500);pointer-events:none}:host.disabled.file-selected .file-name,:host.readonly.file-selected .file-name{color:var(--ndw-color-info-500)}:host.disabled.file-selected .file-name .file-name-text:hover,:host.readonly.file-selected .file-name .file-name-text:hover{text-decoration:none}:host.disabled.file-selected .file-delete-icon,:host.readonly.file-selected .file-delete-icon{display:none}:host.file-selected{background-color:var(--ndw-color-grey-100);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);padding:var(--ndw-spacing-sm);align-items:baseline;word-break:break-all;cursor:auto;text-align:left}:host.file-selected .file-name{display:flex;align-items:center}:host.file-selected .file-name .file-name-text{background:transparent;border:none;padding:0;color:var(--ndw-color-info-500);cursor:pointer}:host.file-selected .file-name .file-name-text:hover,:host.file-selected .file-name .file-name-text:focus{text-decoration:underline;outline:none}:host.file-selected .file-date{font-size:var(--ndw-font-size-xs);color:var(--ndw-color-grey-500);margin:0}:host.file-selected .file-delete-icon{display:flex;flex:1;justify-content:end;pointer-events:all}:host.file-selected .file-delete-icon button{background:transparent;border:none;cursor:pointer;padding:var(--ndw-spacing-2xs);border-radius:var(--ndw-border-radius-md);transition:background-color .15s ease-in-out}:host.file-selected .file-delete-icon button:hover{background-color:var(--ndw-alpha-black-007)}:host.file-selected .file-delete-icon button:active,:host.file-selected .file-delete-icon button:focus,:host.file-selected .file-delete-icon button:focus-visible{background-color:var(--ndw-alpha-black-015)}:host.file-selected .file-delete-icon button:focus-visible{color:var(--ndw-color-primary);outline-color:var(--ndw-color-info-500)}:host.file-selected .file-delete-icon ndw-icon{pointer-events:all}:host.file-selected .file-delete-icon ndw-icon:focus{color:var(--ndw-color-info-500);outline:none}\n"] }]
         }], propDecorators: { allowedFileTypeRegex: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedFileTypeRegex", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], fileUploadText: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileUploadText", required: false }] }], maxFileSizeInBytes: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSizeInBytes", required: false }] }], mimeTypeMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "mimeTypeMap", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], uploadDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadDate", required: false }] }], draggingOver: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggingOver", required: false }] }, { type: i0.Output, args: ["draggingOverChange"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }, { type: i0.Output, args: ["errorChange"] }], incorrectFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "incorrectFileSize", required: false }] }, { type: i0.Output, args: ["incorrectFileSizeChange"] }], incorrectFileType: [{ type: i0.Input, args: [{ isSignal: true, alias: "incorrectFileType", required: false }] }, { type: i0.Output, args: ["incorrectFileTypeChange"] }], selectedFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedFile", required: false }] }, { type: i0.Output, args: ["selectedFileChange"] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }, { type: i0.Output, args: ["successChange"] }], fileInputElement: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
 class TooltipComponent {
     text = input.required(...(ngDevMode ? [{ debugName: "text" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: TooltipComponent, isStandalone: true, selector: "ndw-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "tooltip" } }, ngImport: i0, template: "{{ text() }}\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;animation:.3s fadeIn;background-color:var(--ndw-color-grey-700);border-radius:var(--ndw-border-radius-sm);box-shadow:0 0 var(--ndw-border-size-md) 0 var(--ndw-alpha-white-040);color:var(--ndw-color-white);display:inline-block;max-width:18.75rem;padding:var(--ndw-spacing-2xs) var(--ndw-spacing-2xs) var(--ndw-spacing-3xs);position:relative;word-break:break-word}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: TooltipComponent, isStandalone: true, selector: "ndw-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "tooltip" } }, ngImport: i0, template: "{{ text() }}\r\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;animation:.3s fadeIn;background-color:var(--ndw-color-grey-700);border-radius:var(--ndw-border-radius-sm);box-shadow:0 0 var(--ndw-border-size-md) 0 var(--ndw-alpha-white-040);color:var(--ndw-color-white);display:inline-block;max-width:18.75rem;padding:var(--ndw-spacing-2xs) var(--ndw-spacing-2xs) var(--ndw-spacing-3xs);position:relative;word-break:break-word}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         role: 'tooltip',
-                    }, selector: 'ndw-tooltip', template: "{{ text() }}\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;animation:.3s fadeIn;background-color:var(--ndw-color-grey-700);border-radius:var(--ndw-border-radius-sm);box-shadow:0 0 var(--ndw-border-size-md) 0 var(--ndw-alpha-white-040);color:var(--ndw-color-white);display:inline-block;max-width:18.75rem;padding:var(--ndw-spacing-2xs) var(--ndw-spacing-2xs) var(--ndw-spacing-3xs);position:relative;word-break:break-word}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+                    }, selector: 'ndw-tooltip', template: "{{ text() }}\r\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;animation:.3s fadeIn;background-color:var(--ndw-color-grey-700);border-radius:var(--ndw-border-radius-sm);box-shadow:0 0 var(--ndw-border-size-md) 0 var(--ndw-alpha-white-040);color:var(--ndw-color-white);display:inline-block;max-width:18.75rem;padding:var(--ndw-spacing-2xs) var(--ndw-spacing-2xs) var(--ndw-spacing-3xs);position:relative;word-break:break-word}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }] } });
 const SHOW_DELAY_MS = 200;
@@ -1327,11 +1327,11 @@ class InputButtonComponent {
         this.buttonClicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InputButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: InputButtonComponent, isStandalone: true, selector: "ndw-input-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, input: { classPropertyName: "input", publicName: "input", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, alternative: { classPropertyName: "alternative", publicName: "alternative", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<button\n  ndwButton\n  extra-small\n  tertiary\n  type=\"button\"\n  [attr.alternative]=\"alternative() ? true : null\"\n  class=\"input-icon\"\n  [attr.disabled]=\"disabled() || undefined\"\n  (click)=\"onClick()\"\n>\n  <span class=\"sr-only\">{{ ariaLabel() }}</span>\n  <ndw-icon>\n    <ng-content />\n  </ndw-icon>\n</button>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: InputButtonComponent, isStandalone: true, selector: "ndw-input-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, input: { classPropertyName: "input", publicName: "input", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, alternative: { classPropertyName: "alternative", publicName: "alternative", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "<button\r\n  ndwButton\r\n  extra-small\r\n  tertiary\r\n  type=\"button\"\r\n  [attr.alternative]=\"alternative() ? true : null\"\r\n  class=\"input-icon\"\r\n  [attr.disabled]=\"disabled() || undefined\"\r\n  (click)=\"onClick()\"\r\n>\r\n  <span class=\"sr-only\">{{ ariaLabel() }}</span>\r\n  <ndw-icon>\r\n    <ng-content />\r\n  </ndw-icon>\r\n</button>\r\n", dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InputButtonComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], selector: 'ndw-input-button', template: "<button\n  ndwButton\n  extra-small\n  tertiary\n  type=\"button\"\n  [attr.alternative]=\"alternative() ? true : null\"\n  class=\"input-icon\"\n  [attr.disabled]=\"disabled() || undefined\"\n  (click)=\"onClick()\"\n>\n  <span class=\"sr-only\">{{ ariaLabel() }}</span>\n  <ndw-icon>\n    <ng-content />\n  </ndw-icon>\n</button>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], selector: 'ndw-input-button', template: "<button\r\n  ndwButton\r\n  extra-small\r\n  tertiary\r\n  type=\"button\"\r\n  [attr.alternative]=\"alternative() ? true : null\"\r\n  class=\"input-icon\"\r\n  [attr.disabled]=\"disabled() || undefined\"\r\n  (click)=\"onClick()\"\r\n>\r\n  <span class=\"sr-only\">{{ ariaLabel() }}</span>\r\n  <ndw-icon>\r\n    <ng-content />\r\n  </ndw-icon>\r\n</button>\r\n" }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], input: [{ type: i0.Input, args: [{ isSignal: true, alias: "input", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], alternative: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternative", required: false }] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }] } });
 class ClearSearchButtonComponent {
@@ -1361,11 +1361,11 @@ class ClearSearchButtonComponent {
         this.buttonClicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ClearSearchButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ClearSearchButtonComponent, isStandalone: true, selector: "ndw-clear-search-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, input: { classPropertyName: "input", publicName: "input", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "@if (inputValue() !== '') {\n  <ndw-input-button [alternative]=\"true\" (buttonClicked)=\"clear()\">close</ndw-input-button>\n}\n", styles: [":host:empty{display:none}\n"], dependencies: [{ kind: "component", type: InputButtonComponent, selector: "ndw-input-button", inputs: ["disabled", "input", "ariaLabel", "alternative"], outputs: ["buttonClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ClearSearchButtonComponent, isStandalone: true, selector: "ndw-clear-search-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, input: { classPropertyName: "input", publicName: "input", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked" }, ngImport: i0, template: "@if (inputValue() !== '') {\r\n  <ndw-input-button [alternative]=\"true\" (buttonClicked)=\"clear()\">close</ndw-input-button>\r\n}\r\n", styles: [":host:empty{display:none}\n"], dependencies: [{ kind: "component", type: InputButtonComponent, selector: "ndw-input-button", inputs: ["disabled", "input", "ariaLabel", "alternative"], outputs: ["buttonClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ClearSearchButtonComponent, decorators: [{
             type: Component,
-            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"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [InputButtonComponent], selector: 'ndw-clear-search-button', template: "@if (inputValue() !== '') {\r\n  <ndw-input-button [alternative]=\"true\" (buttonClicked)=\"clear()\">close</ndw-input-button>\r\n}\r\n", styles: [":host:empty{display:none}\n"] }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], input: [{ type: i0.Input, args: [{ isSignal: true, alias: "input", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }] } });
 const INPUT_CONTAINER_CLASS = 'input-container';
@@ -1380,20 +1380,20 @@ var FormFieldElement;
 class InfoComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: InfoComponent, isStandalone: true, selector: "ndw-info", ngImport: i0, template: "<ng-content />\n", styles: [":host{align-items:center;color:var(--ndw-color-grey-500);display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-xs);word-break:break-word}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: InfoComponent, isStandalone: true, selector: "ndw-info", ngImport: i0, template: "<ng-content />\r\n", styles: [":host{align-items:center;color:var(--ndw-color-grey-500);display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-xs);word-break:break-word}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InfoComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-info', template: "<ng-content />\n", styles: [":host{align-items:center;color:var(--ndw-color-grey-500);display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-xs);word-break:break-word}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-info', template: "<ng-content />\r\n", styles: [":host{align-items:center;color:var(--ndw-color-grey-500);display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-xs);word-break:break-word}\n"] }]
         }] });
 class InputIconComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InputIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: InputIconComponent, isStandalone: true, selector: "ndw-input-icon", ngImport: i0, template: "<ndw-icon class=\"input-icon\">\n  <ng-content />\n</ndw-icon>\n", styles: [":host{height:var(--ndw-font-size-lg)}.input-icon{font-size:var(--ndw-font-size-lg)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: InputIconComponent, isStandalone: true, selector: "ndw-input-icon", ngImport: i0, template: "<ndw-icon class=\"input-icon\">\r\n  <ng-content />\r\n</ndw-icon>\r\n", styles: [":host{height:var(--ndw-font-size-lg)}.input-icon{font-size:var(--ndw-font-size-lg)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InputIconComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], selector: 'ndw-input-icon', template: "<ndw-icon class=\"input-icon\">\n  <ng-content />\n</ndw-icon>\n", styles: [":host{height:var(--ndw-font-size-lg)}.input-icon{font-size:var(--ndw-font-size-lg)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], selector: 'ndw-input-icon', template: "<ndw-icon class=\"input-icon\">\r\n  <ng-content />\r\n</ndw-icon>\r\n", styles: [":host{height:var(--ndw-font-size-lg)}.input-icon{font-size:var(--ndw-font-size-lg)}\n"] }]
         }] });
 class ButtonDirective {
@@ -1502,7 +1502,7 @@ class OptionGroupComponent {
         this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: OptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: OptionGroupComponent, isStandalone: true, selector: "ndw-option-group", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, fluidColumns: { classPropertyName: "fluidColumns", publicName: "fluidColumns", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, checkedValues: { classPropertyName: "checkedValues", publicName: "checkedValues", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedValues: "checkedValuesChange", disabled: "disabledChange" }, host: { properties: { "attr.error": "error() || null", "attr.required": "isRequiredOrHasRequiredValidator", "attr.success": "success() || null", "class.grid-columns": "fluidColumns() !== null", "style.gridTemplateColumns": "fluidColumnStyle()" } }, queries: [{ propertyName: "children", predicate: OptionComponent, isSignal: true }], ngImport: i0, template: "@for (child of children(); track child.value()) {\n  <label\n    ndwButton\n    [class.fluid]=\"fluid() && fluidColumns() === null\"\n    [class.gridCell]=\"fluidColumns() !== null\"\n    [attr.disabled]=\"child.disabled() || disabled() || readonly() ? 'true' : null\"\n    [attr.secondary]=\"checkedValues().includes(child.value()) ? null : 'true'\"\n    [attr.aria-label]=\"child.description() ?? child.label()\"\n  >\n    <input\n      [type]=\"mode() === 'multiple' ? 'checkbox' : 'radio'\"\n      [name]=\"mode() === 'multiple' ? 'option-group-radio-' + uuid : null\"\n      [value]=\"child.value()\"\n      [disabled]=\"child.disabled() || disabled() || readonly()\"\n      [readonly]=\"readonly()\"\n      [checked]=\"checkedValues().includes(child.value())\"\n      (change)=\"toggleValue(child.value())\"\n    />\n    {{ child.label() }}\n  </label>\n}\n", styles: [":host{display:flex;flex-wrap:wrap;gap:var(--ndw-spacing-xs)}:host.grid-columns{display:grid}:host .fluid{flex-grow:1;display:flex;justify-content:center}:host .gridCell{width:100%;display:flex;justify-content:center}:host input[type=checkbox],:host input[type=radio]{position:absolute;top:0;left:0;opacity:0}:host label[ndwButton]{background-color:var(--ndw-color-primary-500);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500);color:var(--ndw-color-white)}:host label[ndwButton]:hover,:host label[ndwButton]:active{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600);color:var(--ndw-color-white)}:host label[ndwButton]:focus-within{border-color:var(--ndw-color-info-500)}:host label[ndwButton][disabled],:host label[ndwButton][readonly]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-gray-600)}:host label[ndwButton][secondary]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700)}:host label[ndwButton][secondary]:hover{background-color:var(--ndw-color-primary-050);border-color:var(--ndw-color-primary-500);color:var(--ndw-color-grey-700)}:host label[ndwButton][secondary]:active,:host label[ndwButton][secondary]:focus-within{background-color:var(--ndw-color-primary-050);color:var(--ndw-color-grey-700)}:host label[ndwButton][secondary]:focus-within{border-color:var(--ndw-color-info-500)}:host label[ndwButton][secondary][disabled],:host label[ndwButton][secondary][readonly]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-gray-400)}:host[error] label[ndwButton][secondary]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500);color:var(--ndw-color-gray-700)}:host[success] label[ndwButton][secondary]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500);color:var(--ndw-color-gray-700)}:host.ng-invalid label[ndwButton][secondary]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500);color:var(--ndw-color-gray-700)}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: OptionGroupComponent, isStandalone: true, selector: "ndw-option-group", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, fluidColumns: { classPropertyName: "fluidColumns", publicName: "fluidColumns", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, checkedValues: { classPropertyName: "checkedValues", publicName: "checkedValues", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedValues: "checkedValuesChange", disabled: "disabledChange" }, host: { properties: { "attr.error": "error() || null", "attr.required": "isRequiredOrHasRequiredValidator", "attr.success": "success() || null", "class.grid-columns": "fluidColumns() !== null", "style.gridTemplateColumns": "fluidColumnStyle()" } }, queries: [{ propertyName: "children", predicate: OptionComponent, isSignal: true }], ngImport: i0, template: "@for (child of children(); track child.value()) {\r\n  <label\r\n    ndwButton\r\n    [class.fluid]=\"fluid() && fluidColumns() === null\"\r\n    [class.gridCell]=\"fluidColumns() !== null\"\r\n    [attr.disabled]=\"child.disabled() || disabled() || readonly() ? 'true' : null\"\r\n    [attr.secondary]=\"checkedValues().includes(child.value()) ? null : 'true'\"\r\n    [attr.aria-label]=\"child.description() ?? child.label()\"\r\n  >\r\n    <input\r\n      [type]=\"mode() === 'multiple' ? 'checkbox' : 'radio'\"\r\n      [name]=\"mode() === 'multiple' ? 'option-group-radio-' + uuid : null\"\r\n      [value]=\"child.value()\"\r\n      [disabled]=\"child.disabled() || disabled() || readonly()\"\r\n      [readonly]=\"readonly()\"\r\n      [checked]=\"checkedValues().includes(child.value())\"\r\n      (change)=\"toggleValue(child.value())\"\r\n    />\r\n    {{ child.label() }}\r\n  </label>\r\n}\r\n", styles: [":host{display:flex;flex-wrap:wrap;gap:var(--ndw-spacing-xs)}:host.grid-columns{display:grid}:host .fluid{flex-grow:1;display:flex;justify-content:center}:host .gridCell{width:100%;display:flex;justify-content:center}:host input[type=checkbox],:host input[type=radio]{position:absolute;top:0;left:0;opacity:0}:host label[ndwButton]{background-color:var(--ndw-color-primary-500);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500);color:var(--ndw-color-white)}:host label[ndwButton]:hover,:host label[ndwButton]:active{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600);color:var(--ndw-color-white)}:host label[ndwButton]:focus-within{border-color:var(--ndw-color-info-500)}:host label[ndwButton][disabled],:host label[ndwButton][readonly]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-gray-600)}:host label[ndwButton][secondary]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700)}:host label[ndwButton][secondary]:hover{background-color:var(--ndw-color-primary-050);border-color:var(--ndw-color-primary-500);color:var(--ndw-color-grey-700)}:host label[ndwButton][secondary]:active,:host label[ndwButton][secondary]:focus-within{background-color:var(--ndw-color-primary-050);color:var(--ndw-color-grey-700)}:host label[ndwButton][secondary]:focus-within{border-color:var(--ndw-color-info-500)}:host label[ndwButton][secondary][disabled],:host label[ndwButton][secondary][readonly]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-gray-400)}:host[error] label[ndwButton][secondary]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500);color:var(--ndw-color-gray-700)}:host[success] label[ndwButton][secondary]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500);color:var(--ndw-color-gray-700)}:host.ng-invalid label[ndwButton][secondary]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500);color:var(--ndw-color-gray-700)}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: OptionGroupComponent, decorators: [{
             type: Component,
@@ -1512,7 +1512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '[attr.success]': 'success() || null',
                         '[class.grid-columns]': 'fluidColumns() !== null',
                         '[style.gridTemplateColumns]': 'fluidColumnStyle()',
-                    }, imports: [ButtonDirective], selector: 'ndw-option-group', template: "@for (child of children(); track child.value()) {\n  <label\n    ndwButton\n    [class.fluid]=\"fluid() && fluidColumns() === null\"\n    [class.gridCell]=\"fluidColumns() !== null\"\n    [attr.disabled]=\"child.disabled() || disabled() || readonly() ? 'true' : null\"\n    [attr.secondary]=\"checkedValues().includes(child.value()) ? null : 'true'\"\n    [attr.aria-label]=\"child.description() ?? child.label()\"\n  >\n    <input\n      [type]=\"mode() === 'multiple' ? 'checkbox' : 'radio'\"\n      [name]=\"mode() === 'multiple' ? 'option-group-radio-' + uuid : null\"\n      [value]=\"child.value()\"\n      [disabled]=\"child.disabled() || disabled() || readonly()\"\n      [readonly]=\"readonly()\"\n      [checked]=\"checkedValues().includes(child.value())\"\n      (change)=\"toggleValue(child.value())\"\n    />\n    {{ child.label() }}\n  </label>\n}\n", styles: [":host{display:flex;flex-wrap:wrap;gap:var(--ndw-spacing-xs)}:host.grid-columns{display:grid}:host .fluid{flex-grow:1;display:flex;justify-content:center}:host .gridCell{width:100%;display:flex;justify-content:center}:host input[type=checkbox],:host input[type=radio]{position:absolute;top:0;left:0;opacity:0}:host label[ndwButton]{background-color:var(--ndw-color-primary-500);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500);color:var(--ndw-color-white)}:host label[ndwButton]:hover,:host label[ndwButton]:active{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600);color:var(--ndw-color-white)}:host label[ndwButton]:focus-within{border-color:var(--ndw-color-info-500)}:host label[ndwButton][disabled],:host label[ndwButton][readonly]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-gray-600)}:host label[ndwButton][secondary]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700)}:host label[ndwButton][secondary]:hover{background-color:var(--ndw-color-primary-050);border-color:var(--ndw-color-primary-500);color:var(--ndw-color-grey-700)}:host label[ndwButton][secondary]:active,:host label[ndwButton][secondary]:focus-within{background-color:var(--ndw-color-primary-050);color:var(--ndw-color-grey-700)}:host label[ndwButton][secondary]:focus-within{border-color:var(--ndw-color-info-500)}:host label[ndwButton][secondary][disabled],:host label[ndwButton][secondary][readonly]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-gray-400)}:host[error] label[ndwButton][secondary]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500);color:var(--ndw-color-gray-700)}:host[success] label[ndwButton][secondary]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500);color:var(--ndw-color-gray-700)}:host.ng-invalid label[ndwButton][secondary]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500);color:var(--ndw-color-gray-700)}\n"] }]
+                    }, imports: [ButtonDirective], selector: 'ndw-option-group', template: "@for (child of children(); track child.value()) {\r\n  <label\r\n    ndwButton\r\n    [class.fluid]=\"fluid() && fluidColumns() === null\"\r\n    [class.gridCell]=\"fluidColumns() !== null\"\r\n    [attr.disabled]=\"child.disabled() || disabled() || readonly() ? 'true' : null\"\r\n    [attr.secondary]=\"checkedValues().includes(child.value()) ? null : 'true'\"\r\n    [attr.aria-label]=\"child.description() ?? child.label()\"\r\n  >\r\n    <input\r\n      [type]=\"mode() === 'multiple' ? 'checkbox' : 'radio'\"\r\n      [name]=\"mode() === 'multiple' ? 'option-group-radio-' + uuid : null\"\r\n      [value]=\"child.value()\"\r\n      [disabled]=\"child.disabled() || disabled() || readonly()\"\r\n      [readonly]=\"readonly()\"\r\n      [checked]=\"checkedValues().includes(child.value())\"\r\n      (change)=\"toggleValue(child.value())\"\r\n    />\r\n    {{ child.label() }}\r\n  </label>\r\n}\r\n", styles: [":host{display:flex;flex-wrap:wrap;gap:var(--ndw-spacing-xs)}:host.grid-columns{display:grid}:host .fluid{flex-grow:1;display:flex;justify-content:center}:host .gridCell{width:100%;display:flex;justify-content:center}:host input[type=checkbox],:host input[type=radio]{position:absolute;top:0;left:0;opacity:0}:host label[ndwButton]{background-color:var(--ndw-color-primary-500);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500);color:var(--ndw-color-white)}:host label[ndwButton]:hover,:host label[ndwButton]:active{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600);color:var(--ndw-color-white)}:host label[ndwButton]:focus-within{border-color:var(--ndw-color-info-500)}:host label[ndwButton][disabled],:host label[ndwButton][readonly]{background-color:var(--ndw-color-grey-300);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-gray-600)}:host label[ndwButton][secondary]{background-color:var(--ndw-color-white);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-700)}:host label[ndwButton][secondary]:hover{background-color:var(--ndw-color-primary-050);border-color:var(--ndw-color-primary-500);color:var(--ndw-color-grey-700)}:host label[ndwButton][secondary]:active,:host label[ndwButton][secondary]:focus-within{background-color:var(--ndw-color-primary-050);color:var(--ndw-color-grey-700)}:host label[ndwButton][secondary]:focus-within{border-color:var(--ndw-color-info-500)}:host label[ndwButton][secondary][disabled],:host label[ndwButton][secondary][readonly]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-gray-400)}:host[error] label[ndwButton][secondary]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500);color:var(--ndw-color-gray-700)}:host[success] label[ndwButton][secondary]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500);color:var(--ndw-color-gray-700)}:host.ng-invalid label[ndwButton][secondary]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500);color:var(--ndw-color-gray-700)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], fluidColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluidColumns", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], checkedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkedValues", required: false }] }, { type: i0.Output, args: ["checkedValuesChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], children: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OptionComponent), { isSignal: true }] }] } });
 const minDateValidator = (min) => {
@@ -1705,7 +1705,7 @@ class MonthInputComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MonthInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MonthInputComponent, isStandalone: true, selector: "ndw-month-input", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showMonthPickerLabel: { classPropertyName: "showMonthPickerLabel", publicName: "showMonthPickerLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, yearPlaceholder: { classPropertyName: "yearPlaceholder", publicName: "yearPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, monthLabels: { classPropertyName: "monthLabels", publicName: "monthLabels", isSignal: true, isRequired: false, transformFunction: null }, addValidators: { classPropertyName: "addValidators", publicName: "addValidators", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, selectedYear: { classPropertyName: "selectedYear", publicName: "selectedYear", isSignal: true, isRequired: false, transformFunction: null }, selectedMonth: { classPropertyName: "selectedMonth", publicName: "selectedMonth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selectedYear: "selectedYearChange", selectedMonth: "selectedMonthChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: InputDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #input\n  ndwInput\n  type=\"text\"\n  minlength=\"6\"\n  maxlength=\"7\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  [placeholder]=\"placeholder()\"\n  [required]=\"required()\"\n  [value]=\"inputValue()\"\n  (change)=\"onInputChanged(input.value)\"\n  (keydown)=\"onKeyDown($event)\"\n/>\n\n<button\n  ndwButton\n  extra-small\n  tertiary\n  class=\"input-suffix-button\"\n  [attr.aria-label]=\"showMonthPickerLabel() || undefined\"\n  [disabled]=\"disabled() || readonly()\"\n  [ndwPopoverTrigger]=\"monthPicker\"\n  [popoverPosition]=\"'nextToTriggerButton'\"\n  (click)=\"showMonthPicker = !showMonthPicker\"\n>\n  <ndw-icon>calendar_month</ndw-icon>\n</button>\n\n<ng-template #monthPicker>\n  <input\n    ndwInput\n    #yearSelect\n    type=\"number\"\n    [placeholder]=\"yearPlaceholder()\"\n    [min]=\"minDate().getFullYear()\"\n    [max]=\"maxDate().getFullYear()\"\n    [ngModel]=\"selectedYear()\"\n    (ngModelChange)=\"onYearSelected(yearSelect.value)\"\n    [attr.error]=\"isYearValid() ? null : true\"\n  />\n\n  <ndw-option-group\n    mode=\"single\"\n    [fluid]=\"true\"\n    [fluidColumns]=\"4\"\n    [ngModel]=\"selectedMonth() ? [selectedMonth()] : []\"\n    (ngModelChange)=\"onMonthSelected($event?.[0])\"\n  >\n    @for (month of months(); track month.value) {\n      <ndw-option [label]=\"month.label\" [value]=\"month.value\" [disabled]=\"month.disabled\">\n        {{ month }}\n      </ndw-option>\n    }\n  </ndw-option-group>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.input-suffix-button{position:absolute;z-index:1;top:var(--ndw-spacing-xs);right:var(--ndw-spacing-xs)}.input-suffix-button[disabled]{background-color:transparent;border-color:transparent;color:var(--ndw-color-grey-500)}input[type=number]{margin-bottom:var(--ndw-spacing-xs)}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputDirective, selector: "input[ndwInput], select[ndwInput], textarea[ndwInput]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: OptionGroupComponent, selector: "ndw-option-group", inputs: ["error", "readonly", "fluid", "fluidColumns", "mode", "required", "success", "checkedValues", "disabled"], outputs: ["checkedValuesChange", "disabledChange"] }, { kind: "component", type: OptionComponent, selector: "ndw-option", inputs: ["value", "label", "description", "required", "disabled"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[ndwPopoverTrigger]", inputs: ["popoverPosition", "ndwPopoverTrigger", "toggleOnClick", "isOpen"], outputs: ["popoverToggled", "isOpenChange"], exportAs: ["ndwPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MonthInputComponent, isStandalone: true, selector: "ndw-month-input", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showMonthPickerLabel: { classPropertyName: "showMonthPickerLabel", publicName: "showMonthPickerLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, yearPlaceholder: { classPropertyName: "yearPlaceholder", publicName: "yearPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, monthLabels: { classPropertyName: "monthLabels", publicName: "monthLabels", isSignal: true, isRequired: false, transformFunction: null }, addValidators: { classPropertyName: "addValidators", publicName: "addValidators", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, selectedYear: { classPropertyName: "selectedYear", publicName: "selectedYear", isSignal: true, isRequired: false, transformFunction: null }, selectedMonth: { classPropertyName: "selectedMonth", publicName: "selectedMonth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selectedYear: "selectedYearChange", selectedMonth: "selectedMonthChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: InputDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<input\r\n  #input\r\n  ndwInput\r\n  type=\"text\"\r\n  minlength=\"6\"\r\n  maxlength=\"7\"\r\n  [disabled]=\"disabled()\"\r\n  [readonly]=\"readonly()\"\r\n  [placeholder]=\"placeholder()\"\r\n  [required]=\"required()\"\r\n  [value]=\"inputValue()\"\r\n  (change)=\"onInputChanged(input.value)\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n/>\r\n\r\n<button\r\n  ndwButton\r\n  extra-small\r\n  tertiary\r\n  class=\"input-suffix-button\"\r\n  [attr.aria-label]=\"showMonthPickerLabel() || undefined\"\r\n  [disabled]=\"disabled() || readonly()\"\r\n  [ndwPopoverTrigger]=\"monthPicker\"\r\n  [popoverPosition]=\"'nextToTriggerButton'\"\r\n  (click)=\"showMonthPicker = !showMonthPicker\"\r\n>\r\n  <ndw-icon>calendar_month</ndw-icon>\r\n</button>\r\n\r\n<ng-template #monthPicker>\r\n  <input\r\n    ndwInput\r\n    #yearSelect\r\n    type=\"number\"\r\n    [placeholder]=\"yearPlaceholder()\"\r\n    [min]=\"minDate().getFullYear()\"\r\n    [max]=\"maxDate().getFullYear()\"\r\n    [ngModel]=\"selectedYear()\"\r\n    (ngModelChange)=\"onYearSelected(yearSelect.value)\"\r\n    [attr.error]=\"isYearValid() ? null : true\"\r\n  />\r\n\r\n  <ndw-option-group\r\n    mode=\"single\"\r\n    [fluid]=\"true\"\r\n    [fluidColumns]=\"4\"\r\n    [ngModel]=\"selectedMonth() ? [selectedMonth()] : []\"\r\n    (ngModelChange)=\"onMonthSelected($event?.[0])\"\r\n  >\r\n    @for (month of months(); track month.value) {\r\n      <ndw-option [label]=\"month.label\" [value]=\"month.value\" [disabled]=\"month.disabled\">\r\n        {{ month }}\r\n      </ndw-option>\r\n    }\r\n  </ndw-option-group>\r\n</ng-template>\r\n", styles: [":host{display:block;position:relative;width:100%}.input-suffix-button{position:absolute;z-index:1;top:var(--ndw-spacing-xs);right:var(--ndw-spacing-xs)}.input-suffix-button[disabled]{background-color:transparent;border-color:transparent;color:var(--ndw-color-grey-500)}input[type=number]{margin-bottom:var(--ndw-spacing-xs)}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputDirective, selector: "input[ndwInput], select[ndwInput], textarea[ndwInput]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: OptionGroupComponent, selector: "ndw-option-group", inputs: ["error", "readonly", "fluid", "fluidColumns", "mode", "required", "success", "checkedValues", "disabled"], outputs: ["checkedValuesChange", "disabledChange"] }, { kind: "component", type: OptionComponent, selector: "ndw-option", inputs: ["value", "label", "description", "required", "disabled"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[ndwPopoverTrigger]", inputs: ["popoverPosition", "ndwPopoverTrigger", "toggleOnClick", "isOpen"], outputs: ["popoverToggled", "isOpenChange"], exportAs: ["ndwPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MonthInputComponent, decorators: [{
             type: Component,
@@ -1717,7 +1717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         OptionGroupComponent,
                         OptionComponent,
                         PopoverTriggerDirective,
-                    ], selector: 'ndw-month-input', template: "<input\n  #input\n  ndwInput\n  type=\"text\"\n  minlength=\"6\"\n  maxlength=\"7\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  [placeholder]=\"placeholder()\"\n  [required]=\"required()\"\n  [value]=\"inputValue()\"\n  (change)=\"onInputChanged(input.value)\"\n  (keydown)=\"onKeyDown($event)\"\n/>\n\n<button\n  ndwButton\n  extra-small\n  tertiary\n  class=\"input-suffix-button\"\n  [attr.aria-label]=\"showMonthPickerLabel() || undefined\"\n  [disabled]=\"disabled() || readonly()\"\n  [ndwPopoverTrigger]=\"monthPicker\"\n  [popoverPosition]=\"'nextToTriggerButton'\"\n  (click)=\"showMonthPicker = !showMonthPicker\"\n>\n  <ndw-icon>calendar_month</ndw-icon>\n</button>\n\n<ng-template #monthPicker>\n  <input\n    ndwInput\n    #yearSelect\n    type=\"number\"\n    [placeholder]=\"yearPlaceholder()\"\n    [min]=\"minDate().getFullYear()\"\n    [max]=\"maxDate().getFullYear()\"\n    [ngModel]=\"selectedYear()\"\n    (ngModelChange)=\"onYearSelected(yearSelect.value)\"\n    [attr.error]=\"isYearValid() ? null : true\"\n  />\n\n  <ndw-option-group\n    mode=\"single\"\n    [fluid]=\"true\"\n    [fluidColumns]=\"4\"\n    [ngModel]=\"selectedMonth() ? [selectedMonth()] : []\"\n    (ngModelChange)=\"onMonthSelected($event?.[0])\"\n  >\n    @for (month of months(); track month.value) {\n      <ndw-option [label]=\"month.label\" [value]=\"month.value\" [disabled]=\"month.disabled\">\n        {{ month }}\n      </ndw-option>\n    }\n  </ndw-option-group>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.input-suffix-button{position:absolute;z-index:1;top:var(--ndw-spacing-xs);right:var(--ndw-spacing-xs)}.input-suffix-button[disabled]{background-color:transparent;border-color:transparent;color:var(--ndw-color-grey-500)}input[type=number]{margin-bottom:var(--ndw-spacing-xs)}\n"] }]
+                    ], selector: 'ndw-month-input', template: "<input\r\n  #input\r\n  ndwInput\r\n  type=\"text\"\r\n  minlength=\"6\"\r\n  maxlength=\"7\"\r\n  [disabled]=\"disabled()\"\r\n  [readonly]=\"readonly()\"\r\n  [placeholder]=\"placeholder()\"\r\n  [required]=\"required()\"\r\n  [value]=\"inputValue()\"\r\n  (change)=\"onInputChanged(input.value)\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n/>\r\n\r\n<button\r\n  ndwButton\r\n  extra-small\r\n  tertiary\r\n  class=\"input-suffix-button\"\r\n  [attr.aria-label]=\"showMonthPickerLabel() || undefined\"\r\n  [disabled]=\"disabled() || readonly()\"\r\n  [ndwPopoverTrigger]=\"monthPicker\"\r\n  [popoverPosition]=\"'nextToTriggerButton'\"\r\n  (click)=\"showMonthPicker = !showMonthPicker\"\r\n>\r\n  <ndw-icon>calendar_month</ndw-icon>\r\n</button>\r\n\r\n<ng-template #monthPicker>\r\n  <input\r\n    ndwInput\r\n    #yearSelect\r\n    type=\"number\"\r\n    [placeholder]=\"yearPlaceholder()\"\r\n    [min]=\"minDate().getFullYear()\"\r\n    [max]=\"maxDate().getFullYear()\"\r\n    [ngModel]=\"selectedYear()\"\r\n    (ngModelChange)=\"onYearSelected(yearSelect.value)\"\r\n    [attr.error]=\"isYearValid() ? null : true\"\r\n  />\r\n\r\n  <ndw-option-group\r\n    mode=\"single\"\r\n    [fluid]=\"true\"\r\n    [fluidColumns]=\"4\"\r\n    [ngModel]=\"selectedMonth() ? [selectedMonth()] : []\"\r\n    (ngModelChange)=\"onMonthSelected($event?.[0])\"\r\n  >\r\n    @for (month of months(); track month.value) {\r\n      <ndw-option [label]=\"month.label\" [value]=\"month.value\" [disabled]=\"month.disabled\">\r\n        {{ month }}\r\n      </ndw-option>\r\n    }\r\n  </ndw-option-group>\r\n</ng-template>\r\n", styles: [":host{display:block;position:relative;width:100%}.input-suffix-button{position:absolute;z-index:1;top:var(--ndw-spacing-xs);right:var(--ndw-spacing-xs)}.input-suffix-button[disabled]{background-color:transparent;border-color:transparent;color:var(--ndw-color-grey-500)}input[type=number]{margin-bottom:var(--ndw-spacing-xs)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showMonthPickerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMonthPickerLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], yearPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearPlaceholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], monthLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthLabels", required: false }] }], addValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "addValidators", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], selectedYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedYear", required: false }] }, { type: i0.Output, args: ["selectedYearChange"] }], selectedMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedMonth", required: false }] }, { type: i0.Output, args: ["selectedMonthChange"] }], input: [{ type: i0.ViewChild, args: [i0.forwardRef(() => InputDirective), { isSignal: true }] }] } });
 class PickerButtonComponent {
@@ -1755,20 +1755,20 @@ class PickerButtonComponent {
         return undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PickerButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: PickerButtonComponent, isStandalone: true, selector: "ndw-picker-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, input: { classPropertyName: "input", publicName: "input", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (icon(); as icon) {\n  <ndw-input-button (buttonClicked)=\"onClick()\">{{ icon }}</ndw-input-button>\n}\n", dependencies: [{ kind: "component", type: InputButtonComponent, selector: "ndw-input-button", inputs: ["disabled", "input", "ariaLabel", "alternative"], outputs: ["buttonClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: PickerButtonComponent, isStandalone: true, selector: "ndw-picker-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, input: { classPropertyName: "input", publicName: "input", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (icon(); as icon) {\r\n  <ndw-input-button (buttonClicked)=\"onClick()\">{{ icon }}</ndw-input-button>\r\n}\r\n", dependencies: [{ kind: "component", type: InputButtonComponent, selector: "ndw-input-button", inputs: ["disabled", "input", "ariaLabel", "alternative"], outputs: ["buttonClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PickerButtonComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [InputButtonComponent], selector: 'ndw-picker-button', template: "@if (icon(); as icon) {\n  <ndw-input-button (buttonClicked)=\"onClick()\">{{ icon }}</ndw-input-button>\n}\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [InputButtonComponent], selector: 'ndw-picker-button', template: "@if (icon(); as icon) {\r\n  <ndw-input-button (buttonClicked)=\"onClick()\">{{ icon }}</ndw-input-button>\r\n}\r\n" }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], input: [{ type: i0.Input, args: [{ isSignal: true, alias: "input", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
 class SuccessComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SuccessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SuccessComponent, isStandalone: true, selector: "ndw-success", ngImport: i0, template: "<ndw-icon>check</ndw-icon>\n<ng-content />\n", styles: [":host{align-content:center;color:var(--ndw-color-positive-500);display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-xs);gap:var(--ndw-spacing-2xs);grid-template-columns:auto 1fr;align-items:flex-start;word-break:break-word}ndw-icon{font-size:.875rem}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SuccessComponent, isStandalone: true, selector: "ndw-success", ngImport: i0, template: "<ndw-icon>check</ndw-icon>\r\n<ng-content />\r\n", styles: [":host{align-content:center;color:var(--ndw-color-positive-500);display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-xs);gap:var(--ndw-spacing-2xs);grid-template-columns:auto 1fr;align-items:flex-start;word-break:break-word}ndw-icon{font-size:.875rem}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SuccessComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], selector: 'ndw-success', template: "<ndw-icon>check</ndw-icon>\n<ng-content />\n", styles: [":host{align-content:center;color:var(--ndw-color-positive-500);display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-xs);gap:var(--ndw-spacing-2xs);grid-template-columns:auto 1fr;align-items:flex-start;word-break:break-word}ndw-icon{font-size:.875rem}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], selector: 'ndw-success', template: "<ndw-icon>check</ndw-icon>\r\n<ng-content />\r\n", styles: [":host{align-content:center;color:var(--ndw-color-positive-500);display:grid;font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-xs);gap:var(--ndw-spacing-2xs);grid-template-columns:auto 1fr;align-items:flex-start;word-break:break-word}ndw-icon{font-size:.875rem}\n"] }]
         }] });
 class FormFieldComponent {
@@ -1822,7 +1822,7 @@ class FormFieldComponent {
         input.ariaDescribedBy = this.descriptionUuid;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: FormFieldComponent, isStandalone: true, selector: "ndw-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, suffixAriaLabel: { classPropertyName: "suffixAriaLabel", publicName: "suffixAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clearButtonClicked: "clearButtonClicked" }, queries: [{ propertyName: "monthInput", first: true, predicate: MonthInputComponent, descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: DatepickerComponent, descendants: true, isSignal: true }, { propertyName: "regularInput", first: true, predicate: InputDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (input() === undefined) {\n  <fieldset>\n    <legend ndwLabel [class.sr-only]=\"hideLabel()\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n    </legend>\n    <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\n  </fieldset>\n} @else {\n  <label ndwLabel [attr.for]=\"input() ? 'input-' + uuid : null\" [class.sr-only]=\"hideLabel()\">\n    <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n  </label>\n  <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\n}\n\n<ng-template #fieldTemplate>\n  <div\n    [class]=\"inputContainerClass\"\n    [attr.success]=\"success() ? true : null\"\n    [attr.error]=\"error() ? true : null\"\n  >\n    @if (isSearchInput()) {\n      <ndw-input-icon>search</ndw-input-icon>\n    }\n\n    <ng-content />\n\n    @if (isSearchInput()) {\n      <ndw-clear-search-button\n        [input]=\"input()\"\n        [disabled]=\"disabled()\"\n        [ariaLabel]=\"suffixAriaLabel()\"\n        (buttonClicked)=\"clearButtonClicked.emit()\"\n      />\n    }\n    @if (hasPickerButton()) {\n      <ndw-picker-button\n        [input]=\"input()\"\n        [disabled]=\"disabled()\"\n        [ariaLabel]=\"suffixAriaLabel()\"\n      />\n    }\n  </div>\n\n  @if (info(); as info) {\n    <ndw-info [id]=\"descriptionUuid\">{{ info }}</ndw-info>\n  }\n  @if (error(); as error) {\n    <ndw-error role=\"alert\" aria-live=\"polite\">{{ error }}</ndw-error>\n  }\n  @if (success(); as success) {\n    <ndw-success role=\"alert\" aria-live=\"polite\">{{ success }}</ndw-success>\n  }\n</ng-template>\n\n<ng-template #labelTemplate>\n  <span class=\"required-label required\"> * </span>\n  {{ label() }}\n  @if (tooltip(); as tooltip) {\n    <ndw-icon [ndwTooltip]=\"tooltip\">info</ndw-icon>\n  }\n</ng-template>\n", styles: [":host{position:relative;display:grid;color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm)}:host .required-label{display:none}:host:has([required]) .required-label{display:inline}fieldset{border:0;margin:0;padding:0}fieldset legend{padding-inline:0;word-break:break-word}label{word-break:break-word}ndw-error,ndw-success,ndw-info{margin-top:var(--ndw-spacing-2xs)}\n"], dependencies: [{ kind: "component", type: ClearSearchButtonComponent, selector: "ndw-clear-search-button", inputs: ["disabled", "input", "ariaLabel"], outputs: ["buttonClicked"] }, { kind: "component", type: ErrorComponent, selector: "ndw-error" }, { kind: "component", type: InfoComponent, selector: "ndw-info" }, { kind: "component", type: InputIconComponent, selector: "ndw-input-icon" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PickerButtonComponent, selector: "ndw-picker-button", inputs: ["disabled", "input", "ariaLabel", "required"] }, { kind: "component", type: SuccessComponent, selector: "ndw-success" }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip", "ndwTooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: FormFieldComponent, isStandalone: true, selector: "ndw-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, suffixAriaLabel: { classPropertyName: "suffixAriaLabel", publicName: "suffixAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clearButtonClicked: "clearButtonClicked" }, queries: [{ propertyName: "monthInput", first: true, predicate: MonthInputComponent, descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: DatepickerComponent, descendants: true, isSignal: true }, { propertyName: "regularInput", first: true, predicate: InputDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (input() === undefined) {\r\n  <fieldset>\r\n    <legend ndwLabel [class.sr-only]=\"hideLabel()\">\r\n      <ng-container *ngTemplateOutlet=\"labelTemplate\" />\r\n    </legend>\r\n    <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\r\n  </fieldset>\r\n} @else {\r\n  <label ndwLabel [attr.for]=\"input() ? 'input-' + uuid : null\" [class.sr-only]=\"hideLabel()\">\r\n    <ng-container *ngTemplateOutlet=\"labelTemplate\" />\r\n  </label>\r\n  <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\r\n}\r\n\r\n<ng-template #fieldTemplate>\r\n  <div\r\n    [class]=\"inputContainerClass\"\r\n    [attr.success]=\"success() ? true : null\"\r\n    [attr.error]=\"error() ? true : null\"\r\n  >\r\n    @if (isSearchInput()) {\r\n      <ndw-input-icon>search</ndw-input-icon>\r\n    }\r\n\r\n    <ng-content />\r\n\r\n    @if (isSearchInput()) {\r\n      <ndw-clear-search-button\r\n        [input]=\"input()\"\r\n        [disabled]=\"disabled()\"\r\n        [ariaLabel]=\"suffixAriaLabel()\"\r\n        (buttonClicked)=\"clearButtonClicked.emit()\"\r\n      />\r\n    }\r\n    @if (hasPickerButton()) {\r\n      <ndw-picker-button\r\n        [input]=\"input()\"\r\n        [disabled]=\"disabled()\"\r\n        [ariaLabel]=\"suffixAriaLabel()\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  @if (info(); as info) {\r\n    <ndw-info [id]=\"descriptionUuid\">{{ info }}</ndw-info>\r\n  }\r\n  @if (error(); as error) {\r\n    <ndw-error role=\"alert\" aria-live=\"polite\">{{ error }}</ndw-error>\r\n  }\r\n  @if (success(); as success) {\r\n    <ndw-success role=\"alert\" aria-live=\"polite\">{{ success }}</ndw-success>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #labelTemplate>\r\n  <span class=\"required-label required\"> * </span>\r\n  {{ label() }}\r\n  @if (tooltip(); as tooltip) {\r\n    <ndw-icon [ndwTooltip]=\"tooltip\">info</ndw-icon>\r\n  }\r\n</ng-template>\r\n", styles: [":host{position:relative;display:grid;color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm)}:host .required-label{display:none}:host:has([required]) .required-label{display:inline}fieldset{border:0;margin:0;padding:0}fieldset legend{padding-inline:0;word-break:break-word}label{word-break:break-word}ndw-error,ndw-success,ndw-info{margin-top:var(--ndw-spacing-2xs)}\n"], dependencies: [{ kind: "component", type: ClearSearchButtonComponent, selector: "ndw-clear-search-button", inputs: ["disabled", "input", "ariaLabel"], outputs: ["buttonClicked"] }, { kind: "component", type: ErrorComponent, selector: "ndw-error" }, { kind: "component", type: InfoComponent, selector: "ndw-info" }, { kind: "component", type: InputIconComponent, selector: "ndw-input-icon" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PickerButtonComponent, selector: "ndw-picker-button", inputs: ["disabled", "input", "ariaLabel", "required"] }, { kind: "component", type: SuccessComponent, selector: "ndw-success" }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip", "ndwTooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -1836,7 +1836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         PickerButtonComponent,
                         SuccessComponent,
                         TooltipDirective,
-                    ], selector: 'ndw-form-field', template: "@if (input() === undefined) {\n  <fieldset>\n    <legend ndwLabel [class.sr-only]=\"hideLabel()\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n    </legend>\n    <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\n  </fieldset>\n} @else {\n  <label ndwLabel [attr.for]=\"input() ? 'input-' + uuid : null\" [class.sr-only]=\"hideLabel()\">\n    <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n  </label>\n  <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\n}\n\n<ng-template #fieldTemplate>\n  <div\n    [class]=\"inputContainerClass\"\n    [attr.success]=\"success() ? true : null\"\n    [attr.error]=\"error() ? true : null\"\n  >\n    @if (isSearchInput()) {\n      <ndw-input-icon>search</ndw-input-icon>\n    }\n\n    <ng-content />\n\n    @if (isSearchInput()) {\n      <ndw-clear-search-button\n        [input]=\"input()\"\n        [disabled]=\"disabled()\"\n        [ariaLabel]=\"suffixAriaLabel()\"\n        (buttonClicked)=\"clearButtonClicked.emit()\"\n      />\n    }\n    @if (hasPickerButton()) {\n      <ndw-picker-button\n        [input]=\"input()\"\n        [disabled]=\"disabled()\"\n        [ariaLabel]=\"suffixAriaLabel()\"\n      />\n    }\n  </div>\n\n  @if (info(); as info) {\n    <ndw-info [id]=\"descriptionUuid\">{{ info }}</ndw-info>\n  }\n  @if (error(); as error) {\n    <ndw-error role=\"alert\" aria-live=\"polite\">{{ error }}</ndw-error>\n  }\n  @if (success(); as success) {\n    <ndw-success role=\"alert\" aria-live=\"polite\">{{ success }}</ndw-success>\n  }\n</ng-template>\n\n<ng-template #labelTemplate>\n  <span class=\"required-label required\"> * </span>\n  {{ label() }}\n  @if (tooltip(); as tooltip) {\n    <ndw-icon [ndwTooltip]=\"tooltip\">info</ndw-icon>\n  }\n</ng-template>\n", styles: [":host{position:relative;display:grid;color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm)}:host .required-label{display:none}:host:has([required]) .required-label{display:inline}fieldset{border:0;margin:0;padding:0}fieldset legend{padding-inline:0;word-break:break-word}label{word-break:break-word}ndw-error,ndw-success,ndw-info{margin-top:var(--ndw-spacing-2xs)}\n"] }]
+                    ], selector: 'ndw-form-field', template: "@if (input() === undefined) {\r\n  <fieldset>\r\n    <legend ndwLabel [class.sr-only]=\"hideLabel()\">\r\n      <ng-container *ngTemplateOutlet=\"labelTemplate\" />\r\n    </legend>\r\n    <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\r\n  </fieldset>\r\n} @else {\r\n  <label ndwLabel [attr.for]=\"input() ? 'input-' + uuid : null\" [class.sr-only]=\"hideLabel()\">\r\n    <ng-container *ngTemplateOutlet=\"labelTemplate\" />\r\n  </label>\r\n  <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\r\n}\r\n\r\n<ng-template #fieldTemplate>\r\n  <div\r\n    [class]=\"inputContainerClass\"\r\n    [attr.success]=\"success() ? true : null\"\r\n    [attr.error]=\"error() ? true : null\"\r\n  >\r\n    @if (isSearchInput()) {\r\n      <ndw-input-icon>search</ndw-input-icon>\r\n    }\r\n\r\n    <ng-content />\r\n\r\n    @if (isSearchInput()) {\r\n      <ndw-clear-search-button\r\n        [input]=\"input()\"\r\n        [disabled]=\"disabled()\"\r\n        [ariaLabel]=\"suffixAriaLabel()\"\r\n        (buttonClicked)=\"clearButtonClicked.emit()\"\r\n      />\r\n    }\r\n    @if (hasPickerButton()) {\r\n      <ndw-picker-button\r\n        [input]=\"input()\"\r\n        [disabled]=\"disabled()\"\r\n        [ariaLabel]=\"suffixAriaLabel()\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  @if (info(); as info) {\r\n    <ndw-info [id]=\"descriptionUuid\">{{ info }}</ndw-info>\r\n  }\r\n  @if (error(); as error) {\r\n    <ndw-error role=\"alert\" aria-live=\"polite\">{{ error }}</ndw-error>\r\n  }\r\n  @if (success(); as success) {\r\n    <ndw-success role=\"alert\" aria-live=\"polite\">{{ success }}</ndw-success>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #labelTemplate>\r\n  <span class=\"required-label required\"> * </span>\r\n  {{ label() }}\r\n  @if (tooltip(); as tooltip) {\r\n    <ndw-icon [ndwTooltip]=\"tooltip\">info</ndw-icon>\r\n  }\r\n</ng-template>\r\n", styles: [":host{position:relative;display:grid;color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm)}:host .required-label{display:none}:host:has([required]) .required-label{display:inline}fieldset{border:0;margin:0;padding:0}fieldset legend{padding-inline:0;word-break:break-word}label{word-break:break-word}ndw-error,ndw-success,ndw-info{margin-top:var(--ndw-spacing-2xs)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], suffixAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixAriaLabel", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], info: [{ type: i0.Input, args: [{ isSignal: true, alias: "info", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], clearButtonClicked: [{ type: i0.Output, args: ["clearButtonClicked"] }], monthInput: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MonthInputComponent), { isSignal: true }] }], dateInput: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DatepickerComponent), { isSignal: true }] }], regularInput: [{ type: i0.ContentChild, args: [i0.forwardRef(() => InputDirective), { isSignal: true }] }] } });
 /**
@@ -1941,7 +1941,7 @@ class MaxCharDirective {
         if (!this.counterElement) {
             return;
         }
-        this.counterElement.textContent = `${this.element.value.length} /
+        this.counterElement.textContent = `${this.element.value.length} /
     ${this.ndwMaxChar()} ${this.maxCharText()}`;
         if (this.element.value.length > this.ndwMaxChar()) {
             this.renderer.setStyle(this.counterElement, 'color', 'var(--ndw-color-critical-500)');
@@ -2056,7 +2056,7 @@ class MarkdownEditorComponent {
         this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MarkdownEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MarkdownEditorComponent, isStandalone: true, selector: "ndw-markdown-editor", inputs: { uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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 }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { properties: { "class.disabled": "disabled()", "class.error": "error()", "class.readonly": "readonly()", "class.success": "success()", "class.required": "isRequiredOrHasRequiredValidator" } }, ngImport: i0, template: "<markdown-toolbar [attr.for]=\"uuid()\" [attr.inert]=\"disabled() || readonly() ? '' : null\">\n  @if (bold()) {\n    <md-bold>\n      <button ndwButton tertiary alternative title=\"Bold\" aria-label=\"Bold\">\n        <ndw-icon>format_bold</ndw-icon>\n      </button>\n    </md-bold>\n  }\n  @if (header()) {\n    <md-header>\n      <button ndwButton tertiary alternative title=\"Title\" aria-label=\"Title\">\n        <ndw-icon>title</ndw-icon>\n      </button>\n    </md-header>\n  }\n  @if (italic()) {\n    <md-italic>\n      <button ndwButton tertiary alternative title=\"Italic\" aria-label=\"Italic\">\n        <ndw-icon>format_italic</ndw-icon>\n      </button>\n    </md-italic>\n  }\n  @if (quote()) {\n    <md-quote>\n      <button ndwButton tertiary alternative title=\"Quote\" aria-label=\"Quote\">\n        <ndw-icon>format_quote</ndw-icon>\n      </button>\n    </md-quote>\n  }\n  @if (unorderedList()) {\n    <md-unordered-list>\n      <button ndwButton tertiary alternative title=\"Unordered list\" aria-label=\"Unordered list\">\n        <ndw-icon>format_list_bulleted</ndw-icon>\n      </button>\n    </md-unordered-list>\n  }\n  @if (orderedList()) {\n    <md-ordered-list>\n      <button ndwButton tertiary alternative title=\"Ordered list\" aria-label=\"Ordered list\">\n        <ndw-icon>format_list_numbered</ndw-icon>\n      </button>\n    </md-ordered-list>\n  }\n  @if (taskList()) {\n    <md-task-list>\n      <button ndwButton tertiary alternative title=\"Task list\" aria-label=\"Task list\">\n        <ndw-icon>checklist</ndw-icon>\n      </button>\n    </md-task-list>\n  }\n</markdown-toolbar>\n\n<textarea\n  [id]=\"uuid()\"\n  class=\"markdown-editor\"\n  [value]=\"value()\"\n  (input)=\"onChange($event)\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  ndwAutoGrow\n></textarea>\n", styles: [":host{border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-shadow:0 0 0 1px var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);outline:none;background:var(--ndw-color-white);display:flex;flex-direction:column}:host.error,:host.ng-invalid{border:var(--ndw-border-size-sm) solid var(--ndw-color-critical-500)}:host.success{border:var(--ndw-border-size-sm) solid var(--ndw-color-positive-500)}:host.disabled,:host.readonly{background-color:var(--ndw-color-grey-100);cursor:not-allowed}:host.disabled .markdown-editor,:host.readonly .markdown-editor{background-color:var(--ndw-color-grey-100);cursor:not-allowed}:host.disabled markdown-toolbar>*,:host.readonly markdown-toolbar>*{pointer-events:none}:host .markdown-editor{padding-left:var(--ndw-spacing-md);padding-right:var(--ndw-spacing-md);resize:none;border:none;overflow-y:hidden}:host .markdown-editor:focus{outline:none;border:none}:host.focus{border:var(--ndw-border-size-sm) solid var(--ndw-color-info-500);box-shadow:0 0 0 var(--ndw-border-size-sm) var(--ndw-color-info-500)}:host markdown-toolbar{display:flex;padding:var(--ndw-spacing-2xs);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);margin-bottom:var(--ndw-spacing-sm)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: AutoGrowDirective, selector: "textarea[ndwAutoGrow]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MarkdownEditorComponent, isStandalone: true, selector: "ndw-markdown-editor", inputs: { uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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 }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { properties: { "class.disabled": "disabled()", "class.error": "error()", "class.readonly": "readonly()", "class.success": "success()", "class.required": "isRequiredOrHasRequiredValidator" } }, ngImport: i0, template: "<markdown-toolbar [attr.for]=\"uuid()\" [attr.inert]=\"disabled() || readonly() ? '' : null\">\r\n  @if (bold()) {\r\n    <md-bold>\r\n      <button ndwButton tertiary alternative title=\"Bold\" aria-label=\"Bold\">\r\n        <ndw-icon>format_bold</ndw-icon>\r\n      </button>\r\n    </md-bold>\r\n  }\r\n  @if (header()) {\r\n    <md-header>\r\n      <button ndwButton tertiary alternative title=\"Title\" aria-label=\"Title\">\r\n        <ndw-icon>title</ndw-icon>\r\n      </button>\r\n    </md-header>\r\n  }\r\n  @if (italic()) {\r\n    <md-italic>\r\n      <button ndwButton tertiary alternative title=\"Italic\" aria-label=\"Italic\">\r\n        <ndw-icon>format_italic</ndw-icon>\r\n      </button>\r\n    </md-italic>\r\n  }\r\n  @if (quote()) {\r\n    <md-quote>\r\n      <button ndwButton tertiary alternative title=\"Quote\" aria-label=\"Quote\">\r\n        <ndw-icon>format_quote</ndw-icon>\r\n      </button>\r\n    </md-quote>\r\n  }\r\n  @if (unorderedList()) {\r\n    <md-unordered-list>\r\n      <button ndwButton tertiary alternative title=\"Unordered list\" aria-label=\"Unordered list\">\r\n        <ndw-icon>format_list_bulleted</ndw-icon>\r\n      </button>\r\n    </md-unordered-list>\r\n  }\r\n  @if (orderedList()) {\r\n    <md-ordered-list>\r\n      <button ndwButton tertiary alternative title=\"Ordered list\" aria-label=\"Ordered list\">\r\n        <ndw-icon>format_list_numbered</ndw-icon>\r\n      </button>\r\n    </md-ordered-list>\r\n  }\r\n  @if (taskList()) {\r\n    <md-task-list>\r\n      <button ndwButton tertiary alternative title=\"Task list\" aria-label=\"Task list\">\r\n        <ndw-icon>checklist</ndw-icon>\r\n      </button>\r\n    </md-task-list>\r\n  }\r\n</markdown-toolbar>\r\n\r\n<textarea\r\n  [id]=\"uuid()\"\r\n  class=\"markdown-editor\"\r\n  [value]=\"value()\"\r\n  (input)=\"onChange($event)\"\r\n  [disabled]=\"disabled()\"\r\n  [readonly]=\"readonly()\"\r\n  ndwAutoGrow\r\n></textarea>\r\n", styles: [":host{border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-shadow:0 0 0 1px var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);outline:none;background:var(--ndw-color-white);display:flex;flex-direction:column}:host.error,:host.ng-invalid{border:var(--ndw-border-size-sm) solid var(--ndw-color-critical-500)}:host.success{border:var(--ndw-border-size-sm) solid var(--ndw-color-positive-500)}:host.disabled,:host.readonly{background-color:var(--ndw-color-grey-100);cursor:not-allowed}:host.disabled .markdown-editor,:host.readonly .markdown-editor{background-color:var(--ndw-color-grey-100);cursor:not-allowed}:host.disabled markdown-toolbar>*,:host.readonly markdown-toolbar>*{pointer-events:none}:host .markdown-editor{padding-left:var(--ndw-spacing-md);padding-right:var(--ndw-spacing-md);resize:none;border:none;overflow-y:hidden}:host .markdown-editor:focus{outline:none;border:none}:host.focus{border:var(--ndw-border-size-sm) solid var(--ndw-color-info-500);box-shadow:0 0 0 var(--ndw-border-size-sm) var(--ndw-color-info-500)}:host markdown-toolbar{display:flex;padding:var(--ndw-spacing-2xs);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);margin-bottom:var(--ndw-spacing-sm)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: AutoGrowDirective, selector: "textarea[ndwAutoGrow]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MarkdownEditorComponent, decorators: [{
             type: Component,
@@ -2066,7 +2066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '[class.readonly]': 'readonly()',
                         '[class.success]': 'success()',
                         '[class.required]': 'isRequiredOrHasRequiredValidator',
-                    }, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<markdown-toolbar [attr.for]=\"uuid()\" [attr.inert]=\"disabled() || readonly() ? '' : null\">\n  @if (bold()) {\n    <md-bold>\n      <button ndwButton tertiary alternative title=\"Bold\" aria-label=\"Bold\">\n        <ndw-icon>format_bold</ndw-icon>\n      </button>\n    </md-bold>\n  }\n  @if (header()) {\n    <md-header>\n      <button ndwButton tertiary alternative title=\"Title\" aria-label=\"Title\">\n        <ndw-icon>title</ndw-icon>\n      </button>\n    </md-header>\n  }\n  @if (italic()) {\n    <md-italic>\n      <button ndwButton tertiary alternative title=\"Italic\" aria-label=\"Italic\">\n        <ndw-icon>format_italic</ndw-icon>\n      </button>\n    </md-italic>\n  }\n  @if (quote()) {\n    <md-quote>\n      <button ndwButton tertiary alternative title=\"Quote\" aria-label=\"Quote\">\n        <ndw-icon>format_quote</ndw-icon>\n      </button>\n    </md-quote>\n  }\n  @if (unorderedList()) {\n    <md-unordered-list>\n      <button ndwButton tertiary alternative title=\"Unordered list\" aria-label=\"Unordered list\">\n        <ndw-icon>format_list_bulleted</ndw-icon>\n      </button>\n    </md-unordered-list>\n  }\n  @if (orderedList()) {\n    <md-ordered-list>\n      <button ndwButton tertiary alternative title=\"Ordered list\" aria-label=\"Ordered list\">\n        <ndw-icon>format_list_numbered</ndw-icon>\n      </button>\n    </md-ordered-list>\n  }\n  @if (taskList()) {\n    <md-task-list>\n      <button ndwButton tertiary alternative title=\"Task list\" aria-label=\"Task list\">\n        <ndw-icon>checklist</ndw-icon>\n      </button>\n    </md-task-list>\n  }\n</markdown-toolbar>\n\n<textarea\n  [id]=\"uuid()\"\n  class=\"markdown-editor\"\n  [value]=\"value()\"\n  (input)=\"onChange($event)\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  ndwAutoGrow\n></textarea>\n", styles: [":host{border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-shadow:0 0 0 1px var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);outline:none;background:var(--ndw-color-white);display:flex;flex-direction:column}:host.error,:host.ng-invalid{border:var(--ndw-border-size-sm) solid var(--ndw-color-critical-500)}:host.success{border:var(--ndw-border-size-sm) solid var(--ndw-color-positive-500)}:host.disabled,:host.readonly{background-color:var(--ndw-color-grey-100);cursor:not-allowed}:host.disabled .markdown-editor,:host.readonly .markdown-editor{background-color:var(--ndw-color-grey-100);cursor:not-allowed}:host.disabled markdown-toolbar>*,:host.readonly markdown-toolbar>*{pointer-events:none}:host .markdown-editor{padding-left:var(--ndw-spacing-md);padding-right:var(--ndw-spacing-md);resize:none;border:none;overflow-y:hidden}:host .markdown-editor:focus{outline:none;border:none}:host.focus{border:var(--ndw-border-size-sm) solid var(--ndw-color-info-500);box-shadow:0 0 0 var(--ndw-border-size-sm) var(--ndw-color-info-500)}:host markdown-toolbar{display:flex;padding:var(--ndw-spacing-2xs);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);margin-bottom:var(--ndw-spacing-sm)}\n"] }]
+                    }, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<markdown-toolbar [attr.for]=\"uuid()\" [attr.inert]=\"disabled() || readonly() ? '' : null\">\r\n  @if (bold()) {\r\n    <md-bold>\r\n      <button ndwButton tertiary alternative title=\"Bold\" aria-label=\"Bold\">\r\n        <ndw-icon>format_bold</ndw-icon>\r\n      </button>\r\n    </md-bold>\r\n  }\r\n  @if (header()) {\r\n    <md-header>\r\n      <button ndwButton tertiary alternative title=\"Title\" aria-label=\"Title\">\r\n        <ndw-icon>title</ndw-icon>\r\n      </button>\r\n    </md-header>\r\n  }\r\n  @if (italic()) {\r\n    <md-italic>\r\n      <button ndwButton tertiary alternative title=\"Italic\" aria-label=\"Italic\">\r\n        <ndw-icon>format_italic</ndw-icon>\r\n      </button>\r\n    </md-italic>\r\n  }\r\n  @if (quote()) {\r\n    <md-quote>\r\n      <button ndwButton tertiary alternative title=\"Quote\" aria-label=\"Quote\">\r\n        <ndw-icon>format_quote</ndw-icon>\r\n      </button>\r\n    </md-quote>\r\n  }\r\n  @if (unorderedList()) {\r\n    <md-unordered-list>\r\n      <button ndwButton tertiary alternative title=\"Unordered list\" aria-label=\"Unordered list\">\r\n        <ndw-icon>format_list_bulleted</ndw-icon>\r\n      </button>\r\n    </md-unordered-list>\r\n  }\r\n  @if (orderedList()) {\r\n    <md-ordered-list>\r\n      <button ndwButton tertiary alternative title=\"Ordered list\" aria-label=\"Ordered list\">\r\n        <ndw-icon>format_list_numbered</ndw-icon>\r\n      </button>\r\n    </md-ordered-list>\r\n  }\r\n  @if (taskList()) {\r\n    <md-task-list>\r\n      <button ndwButton tertiary alternative title=\"Task list\" aria-label=\"Task list\">\r\n        <ndw-icon>checklist</ndw-icon>\r\n      </button>\r\n    </md-task-list>\r\n  }\r\n</markdown-toolbar>\r\n\r\n<textarea\r\n  [id]=\"uuid()\"\r\n  class=\"markdown-editor\"\r\n  [value]=\"value()\"\r\n  (input)=\"onChange($event)\"\r\n  [disabled]=\"disabled()\"\r\n  [readonly]=\"readonly()\"\r\n  ndwAutoGrow\r\n></textarea>\r\n", styles: [":host{border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-shadow:0 0 0 1px var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);outline:none;background:var(--ndw-color-white);display:flex;flex-direction:column}:host.error,:host.ng-invalid{border:var(--ndw-border-size-sm) solid var(--ndw-color-critical-500)}:host.success{border:var(--ndw-border-size-sm) solid var(--ndw-color-positive-500)}:host.disabled,:host.readonly{background-color:var(--ndw-color-grey-100);cursor:not-allowed}:host.disabled .markdown-editor,:host.readonly .markdown-editor{background-color:var(--ndw-color-grey-100);cursor:not-allowed}:host.disabled markdown-toolbar>*,:host.readonly markdown-toolbar>*{pointer-events:none}:host .markdown-editor{padding-left:var(--ndw-spacing-md);padding-right:var(--ndw-spacing-md);resize:none;border:none;overflow-y:hidden}:host .markdown-editor:focus{outline:none;border:none}:host.focus{border:var(--ndw-border-size-sm) solid var(--ndw-color-info-500);box-shadow:0 0 0 var(--ndw-border-size-sm) var(--ndw-color-info-500)}:host markdown-toolbar{display:flex;padding:var(--ndw-spacing-2xs);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);margin-bottom:var(--ndw-spacing-sm)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { uuid: [{ type: i0.Input, args: [{ isSignal: true, alias: "uuid", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }] } });
 class MarkdownParserComponent {
@@ -2124,7 +2124,7 @@ class RadioButtonComponent {
                 useExisting: RadioButtonComponent,
                 multi: true,
             },
-        ], ngImport: i0, template: "<input\n  type=\"radio\"\n  class=\"sr-only\"\n  [id]=\"'radio-button-' + uuid\"\n  [name]=\"name()\"\n  [checked]=\"checked()\"\n  [disabled]=\"disabled()\"\n  [required]=\"required()\"\n  (change)=\"onInputChange($event)\"\n/>\n<label tabindex=\"-1\" id=\"radio-button-label-{{ uuid }}\" [for]=\"'radio-button-' + uuid\">\n  <div class=\"radio-button\" aria-hidden=\"true\" [ngClass]=\"{ error: error(), success: success() }\">\n    @if (checked()) {\n      <span class=\"check\"></span>\n    }\n  </div>\n  <ng-content />\n</label>\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--checkable-input-size: 1.25rem;cursor:pointer;min-height:1.375rem;width:fit-content}div{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;color:var(--ndw-color-white);display:flex;height:var(--checkable-input-size);position:relative;transition:background-color var(--ndw-animation-speed-fast) ease-out,border-color var(--ndw-animation-speed-fast) ease-out,box-shadow var(--ndw-animation-speed-fast) ease-out;width:var(--checkable-input-size);flex-shrink:0}div.success{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}div.error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}label{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;color:var(--ndw-color-grey-600);cursor:pointer;display:flex;gap:var(--ndw-spacing-xs);line-height:var(--ndw-line-height-sm);width:fit-content;word-break:break-word}:host(.checked) div,:host(.indeterminate) div{background-color:var(--ndw-color-primary-500);border-color:var(--ndw-color-primary-500)}:host(.checked) div.success,:host(.indeterminate) div.success{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.error,:host(.indeterminate) div.error{background-color:var(--ndw-color-critical-500);border-color:var(--ndw-color-critical-500)}:host(:focus-within) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus-within) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-info-500)}:host(.checked:focus-within) div,:host(.indeterminate:focus-within) div{background-color:var(--ndw-color-primary-700)}:host(.disabled){pointer-events:none;-webkit-user-select:none;user-select:none}:host(.disabled) div{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-200)}:host(.disabled) label{color:var(--ndw-color-grey-400)}:host(.checked.disabled) div{background-color:var(--ndw-color-grey-200);border-color:var(--ndw-color-grey-200)}\n", ".radio-button{border-radius:50%}.radio-button .check{background-color:var(--ndw-color-white);border-radius:inherit;height:.5rem;margin:auto;width:.5rem}:host(:hover) .radio-button{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600)}:host(:not(.checked):hover) .radio-button{background-color:var(--ndw-color-white);border-color:var(--ndw-color-primary-500)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<input\r\n  type=\"radio\"\r\n  class=\"sr-only\"\r\n  [id]=\"'radio-button-' + uuid\"\r\n  [name]=\"name()\"\r\n  [checked]=\"checked()\"\r\n  [disabled]=\"disabled()\"\r\n  [required]=\"required()\"\r\n  (change)=\"onInputChange($event)\"\r\n/>\r\n<label tabindex=\"-1\" id=\"radio-button-label-{{ uuid }}\" [for]=\"'radio-button-' + uuid\">\r\n  <div class=\"radio-button\" aria-hidden=\"true\" [ngClass]=\"{ error: error(), success: success() }\">\r\n    @if (checked()) {\r\n      <span class=\"check\"></span>\r\n    }\r\n  </div>\r\n  <ng-content />\r\n</label>\r\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--checkable-input-size: 1.25rem;cursor:pointer;min-height:1.375rem;width:fit-content}div{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;color:var(--ndw-color-white);display:flex;height:var(--checkable-input-size);position:relative;transition:background-color var(--ndw-animation-speed-fast) ease-out,border-color var(--ndw-animation-speed-fast) ease-out,box-shadow var(--ndw-animation-speed-fast) ease-out;width:var(--checkable-input-size);flex-shrink:0}div.success{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}div.error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}label{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;color:var(--ndw-color-grey-600);cursor:pointer;display:flex;gap:var(--ndw-spacing-xs);line-height:var(--ndw-line-height-sm);width:fit-content;word-break:break-word}:host(.checked) div,:host(.indeterminate) div{background-color:var(--ndw-color-primary-500);border-color:var(--ndw-color-primary-500)}:host(.checked) div.success,:host(.indeterminate) div.success{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.error,:host(.indeterminate) div.error{background-color:var(--ndw-color-critical-500);border-color:var(--ndw-color-critical-500)}:host(:focus-within) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus-within) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-info-500)}:host(.checked:focus-within) div,:host(.indeterminate:focus-within) div{background-color:var(--ndw-color-primary-700)}:host(.disabled){pointer-events:none;-webkit-user-select:none;user-select:none}:host(.disabled) div{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-200)}:host(.disabled) label{color:var(--ndw-color-grey-400)}:host(.checked.disabled) div{background-color:var(--ndw-color-grey-200);border-color:var(--ndw-color-grey-200)}\n", ".radio-button{border-radius:50%}.radio-button .check{background-color:var(--ndw-color-white);border-radius:inherit;height:.5rem;margin:auto;width:.5rem}:host(:hover) .radio-button{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600)}:host(:not(.checked):hover) .radio-button{background-color:var(--ndw-color-white);border-color:var(--ndw-color-primary-500)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
@@ -2137,7 +2137,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             useExisting: RadioButtonComponent,
                             multi: true,
                         },
-                    ], selector: 'ndw-radio-button', template: "<input\n  type=\"radio\"\n  class=\"sr-only\"\n  [id]=\"'radio-button-' + uuid\"\n  [name]=\"name()\"\n  [checked]=\"checked()\"\n  [disabled]=\"disabled()\"\n  [required]=\"required()\"\n  (change)=\"onInputChange($event)\"\n/>\n<label tabindex=\"-1\" id=\"radio-button-label-{{ uuid }}\" [for]=\"'radio-button-' + uuid\">\n  <div class=\"radio-button\" aria-hidden=\"true\" [ngClass]=\"{ error: error(), success: success() }\">\n    @if (checked()) {\n      <span class=\"check\"></span>\n    }\n  </div>\n  <ng-content />\n</label>\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--checkable-input-size: 1.25rem;cursor:pointer;min-height:1.375rem;width:fit-content}div{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;color:var(--ndw-color-white);display:flex;height:var(--checkable-input-size);position:relative;transition:background-color var(--ndw-animation-speed-fast) ease-out,border-color var(--ndw-animation-speed-fast) ease-out,box-shadow var(--ndw-animation-speed-fast) ease-out;width:var(--checkable-input-size);flex-shrink:0}div.success{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}div.error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}label{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;color:var(--ndw-color-grey-600);cursor:pointer;display:flex;gap:var(--ndw-spacing-xs);line-height:var(--ndw-line-height-sm);width:fit-content;word-break:break-word}:host(.checked) div,:host(.indeterminate) div{background-color:var(--ndw-color-primary-500);border-color:var(--ndw-color-primary-500)}:host(.checked) div.success,:host(.indeterminate) div.success{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.error,:host(.indeterminate) div.error{background-color:var(--ndw-color-critical-500);border-color:var(--ndw-color-critical-500)}:host(:focus-within) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus-within) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-info-500)}:host(.checked:focus-within) div,:host(.indeterminate:focus-within) div{background-color:var(--ndw-color-primary-700)}:host(.disabled){pointer-events:none;-webkit-user-select:none;user-select:none}:host(.disabled) div{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-200)}:host(.disabled) label{color:var(--ndw-color-grey-400)}:host(.checked.disabled) div{background-color:var(--ndw-color-grey-200);border-color:var(--ndw-color-grey-200)}\n", ".radio-button{border-radius:50%}.radio-button .check{background-color:var(--ndw-color-white);border-radius:inherit;height:.5rem;margin:auto;width:.5rem}:host(:hover) .radio-button{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600)}:host(:not(.checked):hover) .radio-button{background-color:var(--ndw-color-white);border-color:var(--ndw-color-primary-500)}\n"] }]
+                    ], selector: 'ndw-radio-button', template: "<input\r\n  type=\"radio\"\r\n  class=\"sr-only\"\r\n  [id]=\"'radio-button-' + uuid\"\r\n  [name]=\"name()\"\r\n  [checked]=\"checked()\"\r\n  [disabled]=\"disabled()\"\r\n  [required]=\"required()\"\r\n  (change)=\"onInputChange($event)\"\r\n/>\r\n<label tabindex=\"-1\" id=\"radio-button-label-{{ uuid }}\" [for]=\"'radio-button-' + uuid\">\r\n  <div class=\"radio-button\" aria-hidden=\"true\" [ngClass]=\"{ error: error(), success: success() }\">\r\n    @if (checked()) {\r\n      <span class=\"check\"></span>\r\n    }\r\n  </div>\r\n  <ng-content />\r\n</label>\r\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--checkable-input-size: 1.25rem;cursor:pointer;min-height:1.375rem;width:fit-content}div{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);box-sizing:border-box;color:var(--ndw-color-white);display:flex;height:var(--checkable-input-size);position:relative;transition:background-color var(--ndw-animation-speed-fast) ease-out,border-color var(--ndw-animation-speed-fast) ease-out,box-shadow var(--ndw-animation-speed-fast) ease-out;width:var(--checkable-input-size);flex-shrink:0}div.success{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}div.error{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}label{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;align-items:center;color:var(--ndw-color-grey-600);cursor:pointer;display:flex;gap:var(--ndw-spacing-xs);line-height:var(--ndw-line-height-sm);width:fit-content;word-break:break-word}:host(.checked) div,:host(.indeterminate) div{background-color:var(--ndw-color-primary-500);border-color:var(--ndw-color-primary-500)}:host(.checked) div.success,:host(.indeterminate) div.success{background-color:var(--ndw-color-positive-500);border-color:var(--ndw-color-positive-500)}:host(.checked) div.error,:host(.indeterminate) div.error{background-color:var(--ndw-color-critical-500);border-color:var(--ndw-color-critical-500)}:host(:focus-within) div{box-shadow:var(--ndw-elevation-info)}:host(:active) div,:host(:focus-within) div,:host(:not(.checked):active) div,:host(:not(.indeterminate):active) div{border-color:var(--ndw-color-info-500)}:host(.checked:focus-within) div,:host(.indeterminate:focus-within) div{background-color:var(--ndw-color-primary-700)}:host(.disabled){pointer-events:none;-webkit-user-select:none;user-select:none}:host(.disabled) div{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-200)}:host(.disabled) label{color:var(--ndw-color-grey-400)}:host(.checked.disabled) div{background-color:var(--ndw-color-grey-200);border-color:var(--ndw-color-grey-200)}\n", ".radio-button{border-radius:50%}.radio-button .check{background-color:var(--ndw-color-white);border-radius:inherit;height:.5rem;margin:auto;width:.5rem}:host(:hover) .radio-button{background-color:var(--ndw-color-primary-600);border-color:var(--ndw-color-primary-600)}:host(:not(.checked):hover) .radio-button{background-color:var(--ndw-color-white);border-color:var(--ndw-color-primary-500)}\n"] }]
         }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 class RadioGroupComponent {
@@ -2170,7 +2170,7 @@ class RadioGroupComponent {
                 useExisting: RadioGroupComponent,
                 multi: true,
             },
-        ], queries: [{ propertyName: "radioButtons", predicate: RadioButtonComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:grid;gap:var(--ndw-spacing-2xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "radioButtons", predicate: RadioButtonComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\r\n", styles: [":host{display:grid;gap:var(--ndw-spacing-2xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RadioGroupComponent, decorators: [{
             type: Component,
@@ -2182,18 +2182,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             useExisting: RadioGroupComponent,
                             multi: true,
                         },
-                    ], selector: 'ndw-radio-group', template: "<ng-content />\n", styles: [":host{display:grid;gap:var(--ndw-spacing-2xs)}\n"] }]
+                    ], selector: 'ndw-radio-group', template: "<ng-content />\r\n", styles: [":host{display:grid;gap:var(--ndw-spacing-2xs)}\n"] }]
         }], propDecorators: { radioButtons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => RadioButtonComponent), { isSignal: true }] }] } });
 class PillComponent extends CorePillComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PillComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: PillComponent, isStandalone: true, selector: "ndw-pill", host: { classAttribute: "ndw-paragraph-md" }, usesInheritance: true, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:inline-block;line-height:1rem;border-radius:var(--pill-border-radius);font-weight:var(--pill-font-weight);padding:var(--pill-padding-vertical) var(--pill-padding-horizontal);max-width:20rem}:host>div{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host.green{color:var(--pill-green-color);background-color:var(--pill-green-background-color)}:host.gray{color:var(--pill-gray-color);background-color:var(--pill-gray-background-color)}:host.blue{color:var(--pill-blue-color);background-color:var(--pill-blue-background-color)}:host.purple{color:var(--pill-purple-color);background-color:var(--pill-purple-background-color)}:host.yellow{color:var(--pill-yellow-color);background-color:var(--pill-yellow-background-color)}:host.red{color:var(--pill-red-color);background-color:var(--pill-red-background-color)}:host{--pill-border-radius: var(--ndw-border-radius-sm);--pill-padding-vertical: var(--ndw-spacing-3xs);--pill-padding-horizontal: var(--ndw-spacing-2xs);--pill-font-weight: var(--ndw-font-weight-regular);--pill-green-color: var(--ndw-color-positive-600);--pill-green-background-color: var(--ndw-color-positive-100);--pill-gray-color: var(--ndw-color-grey-600);--pill-gray-background-color: var(--ndw-color-grey-200);--pill-blue-color: var(--ndw-color-info-500);--pill-blue-background-color: var(--ndw-color-info-100);--pill-purple-color: var(--ndw-color-alternative-500);--pill-purple-background-color: var(--ndw-color-alternative-100);--pill-yellow-color: var(--ndw-color-grey-600);--pill-yellow-background-color: var(--ndw-color-warning-100);--pill-red-color: var(--ndw-color-critical-500);--pill-red-background-color: var(--ndw-color-critical-100);display:flex;width:fit-content}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: PillComponent, isStandalone: true, selector: "ndw-pill", host: { classAttribute: "ndw-paragraph-md" }, usesInheritance: true, ngImport: i0, template: "<ng-content />\r\n", styles: [":host{display:inline-block;line-height:1rem;border-radius:var(--pill-border-radius);font-weight:var(--pill-font-weight);padding:var(--pill-padding-vertical) var(--pill-padding-horizontal);max-width:20rem}:host>div{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host.green{color:var(--pill-green-color);background-color:var(--pill-green-background-color)}:host.gray{color:var(--pill-gray-color);background-color:var(--pill-gray-background-color)}:host.blue{color:var(--pill-blue-color);background-color:var(--pill-blue-background-color)}:host.purple{color:var(--pill-purple-color);background-color:var(--pill-purple-background-color)}:host.yellow{color:var(--pill-yellow-color);background-color:var(--pill-yellow-background-color)}:host.red{color:var(--pill-red-color);background-color:var(--pill-red-background-color)}:host{--pill-border-radius: var(--ndw-border-radius-sm);--pill-padding-vertical: var(--ndw-spacing-3xs);--pill-padding-horizontal: var(--ndw-spacing-2xs);--pill-font-weight: var(--ndw-font-weight-regular);--pill-green-color: var(--ndw-color-positive-600);--pill-green-background-color: var(--ndw-color-positive-100);--pill-gray-color: var(--ndw-color-grey-600);--pill-gray-background-color: var(--ndw-color-grey-200);--pill-blue-color: var(--ndw-color-info-500);--pill-blue-background-color: var(--ndw-color-info-100);--pill-purple-color: var(--ndw-color-alternative-500);--pill-purple-background-color: var(--ndw-color-alternative-100);--pill-yellow-color: var(--ndw-color-grey-600);--pill-yellow-background-color: var(--ndw-color-warning-100);--pill-red-color: var(--ndw-color-critical-500);--pill-red-background-color: var(--ndw-color-critical-100);display:flex;width:fit-content}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PillComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ndw-paragraph-md',
-                    }, selector: 'ndw-pill', template: "<ng-content />\n", styles: [":host{display:inline-block;line-height:1rem;border-radius:var(--pill-border-radius);font-weight:var(--pill-font-weight);padding:var(--pill-padding-vertical) var(--pill-padding-horizontal);max-width:20rem}:host>div{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host.green{color:var(--pill-green-color);background-color:var(--pill-green-background-color)}:host.gray{color:var(--pill-gray-color);background-color:var(--pill-gray-background-color)}:host.blue{color:var(--pill-blue-color);background-color:var(--pill-blue-background-color)}:host.purple{color:var(--pill-purple-color);background-color:var(--pill-purple-background-color)}:host.yellow{color:var(--pill-yellow-color);background-color:var(--pill-yellow-background-color)}:host.red{color:var(--pill-red-color);background-color:var(--pill-red-background-color)}:host{--pill-border-radius: var(--ndw-border-radius-sm);--pill-padding-vertical: var(--ndw-spacing-3xs);--pill-padding-horizontal: var(--ndw-spacing-2xs);--pill-font-weight: var(--ndw-font-weight-regular);--pill-green-color: var(--ndw-color-positive-600);--pill-green-background-color: var(--ndw-color-positive-100);--pill-gray-color: var(--ndw-color-grey-600);--pill-gray-background-color: var(--ndw-color-grey-200);--pill-blue-color: var(--ndw-color-info-500);--pill-blue-background-color: var(--ndw-color-info-100);--pill-purple-color: var(--ndw-color-alternative-500);--pill-purple-background-color: var(--ndw-color-alternative-100);--pill-yellow-color: var(--ndw-color-grey-600);--pill-yellow-background-color: var(--ndw-color-warning-100);--pill-red-color: var(--ndw-color-critical-500);--pill-red-background-color: var(--ndw-color-critical-100);display:flex;width:fit-content}\n"] }]
+                    }, selector: 'ndw-pill', template: "<ng-content />\r\n", styles: [":host{display:inline-block;line-height:1rem;border-radius:var(--pill-border-radius);font-weight:var(--pill-font-weight);padding:var(--pill-padding-vertical) var(--pill-padding-horizontal);max-width:20rem}:host>div{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host.green{color:var(--pill-green-color);background-color:var(--pill-green-background-color)}:host.gray{color:var(--pill-gray-color);background-color:var(--pill-gray-background-color)}:host.blue{color:var(--pill-blue-color);background-color:var(--pill-blue-background-color)}:host.purple{color:var(--pill-purple-color);background-color:var(--pill-purple-background-color)}:host.yellow{color:var(--pill-yellow-color);background-color:var(--pill-yellow-background-color)}:host.red{color:var(--pill-red-color);background-color:var(--pill-red-background-color)}:host{--pill-border-radius: var(--ndw-border-radius-sm);--pill-padding-vertical: var(--ndw-spacing-3xs);--pill-padding-horizontal: var(--ndw-spacing-2xs);--pill-font-weight: var(--ndw-font-weight-regular);--pill-green-color: var(--ndw-color-positive-600);--pill-green-background-color: var(--ndw-color-positive-100);--pill-gray-color: var(--ndw-color-grey-600);--pill-gray-background-color: var(--ndw-color-grey-200);--pill-blue-color: var(--ndw-color-info-500);--pill-blue-background-color: var(--ndw-color-info-100);--pill-purple-color: var(--ndw-color-alternative-500);--pill-purple-background-color: var(--ndw-color-alternative-100);--pill-yellow-color: var(--ndw-color-grey-600);--pill-yellow-background-color: var(--ndw-color-warning-100);--pill-red-color: var(--ndw-color-critical-500);--pill-red-background-color: var(--ndw-color-critical-100);display:flex;width:fit-content}\n"] }]
         }] });
 class ListItemComponent {
@@ -2250,7 +2250,7 @@ class ListItemComponent {
         this.expanded.update((expanded) => !expanded);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 }, displayLargeNumbers: { classPropertyName: "displayLargeNumbers", publicName: "displayLargeNumbers", 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    ndw-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 ndw-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\" [displayLargeNumbers]=\"displayLargeNumbers()\" />\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: ["[ndw-list-item]{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}[ndw-list-item]:hover,[ndw-list-item][active]{background-color:var(--list-item-hover-background-color)}[ndw-list-item][disabled],[ndw-list-item][aria-disabled]{color:var(--list-item-disabled-color);pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item]{--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)}[ndw-list-item]:not(.actionable){--list-item-hover-background-color: var(--ndw-color-white)}[ndw-list-item]{width:100%}[ndw-list-item] ndw-checkbox.readonly,[ndw-list-item] ndw-radio-button.readonly{pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .affix.expanded{transform:var(--ndw-rotate-half)}[ndw-list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[ndw-list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[ndw-list-item] .suffix-button{padding-inline:var(--ndw-spacing-3xs)}[ndw-list-item] .suffix-button ndw-icon{font-size:var(--ndw-spacing-lg)}[ndw-list-item] .suffix-button[disabled]{background-color:transparent;border-color:transparent}[ndw-list-item].indented{background-color:var(--ndw-color-grey-100);border-radius:0;padding-inline-start:var(--ndw-spacing-3xl)}[ndw-list-item].indented:hover{background-color:var(--ndw-color-grey-300)}[ndw-list-item][disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ndw-badge" }, { kind: "component", type: CheckboxComponent, selector: "ndw-checkbox", inputs: ["switch", "success"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PillComponent, selector: "ndw-pill" }, { kind: "component", type: RadioButtonComponent, selector: "ndw-radio-button", inputs: ["checked", "disabled", "error", "success", "required", "value"], outputs: ["checkedChange", "disabledChange", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 }, displayLargeNumbers: { classPropertyName: "displayLargeNumbers", publicName: "displayLargeNumbers", 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()) {\r\n  <button\r\n    ndw-list-item\r\n    class=\"actionable\"\r\n    [attr.active]=\"active() || undefined\"\r\n    [attr.aria-expanded]=\"expanded()\"\r\n    [attr.disabled]=\"disabled() || undefined\"\r\n    [class.indented]=\"indented()\"\r\n    (click)=\"onListItemSelect()\"\r\n  >\r\n    @if (checkable()) {\r\n      @if (checkType() === 'radio') {\r\n        <ndw-radio-button\r\n          [disabled]=\"disabled()\"\r\n          [class.readonly]=\"!collapsible() && !indented()\"\r\n          [(checked)]=\"checked\"\r\n          (click)=\"onCheckClick($event)\"\r\n        />\r\n      } @else {\r\n        <ndw-checkbox\r\n          [disabled]=\"disabled()\"\r\n          [class.readonly]=\"!collapsible() && !indented()\"\r\n          [(checked)]=\"checked\"\r\n          (click)=\"onCheckClick($event)\"\r\n        />\r\n      }\r\n    }\r\n    <ng-container *ngTemplateOutlet=\"listItem\" />\r\n  </button>\r\n} @else {\r\n  <div ndw-list-item [class.indented]=\"indented()\">\r\n    <ng-container *ngTemplateOutlet=\"listItem\" />\r\n  </div>\r\n}\r\n\r\n<ng-template #listItem>\r\n  @if (prefixIcon(); as prefix) {\r\n    <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\r\n  }\r\n  <ng-content />\r\n  <div class=\"content\">\r\n    @if (title(); as title) {\r\n      <span class=\"title\">{{ title }}</span>\r\n    }\r\n    @if (subtitle(); as subtitle) {\r\n      {{ subtitle }}\r\n    }\r\n  </div>\r\n  @if (pillLabel(); as pillLabel) {\r\n    <ndw-pill [color]=\"pillColor()\">{{ pillLabel }}</ndw-pill>\r\n  }\r\n  @if (badgeValue(); as badgeValue) {\r\n    <ndw-badge [value]=\"badgeValue\" [displayLargeNumbers]=\"displayLargeNumbers()\" />\r\n  }\r\n  @if (showButton()) {\r\n    <button\r\n      ndwButton\r\n      tertiary\r\n      class=\"suffix-button\"\r\n      [attr.aria-label]=\"buttonLabel()\"\r\n      [attr.disabled]=\"disabled() || undefined\"\r\n      (click)=\"onButtonClick($event)\"\r\n    >\r\n      <ndw-icon>{{ buttonIcon() }}</ndw-icon>\r\n    </button>\r\n  }\r\n  @if (collapsible()) {\r\n    <ndw-icon class=\"affix\" [class.expanded]=\"expanded()\">keyboard_arrow_down</ndw-icon>\r\n  }\r\n</ng-template>\r\n", styles: ["[ndw-list-item]{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}[ndw-list-item]:hover,[ndw-list-item][active]{background-color:var(--list-item-hover-background-color)}[ndw-list-item][disabled],[ndw-list-item][aria-disabled]{color:var(--list-item-disabled-color);pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item]{--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)}[ndw-list-item]:not(.actionable){--list-item-hover-background-color: var(--ndw-color-white)}[ndw-list-item]{width:100%}[ndw-list-item] ndw-checkbox.readonly,[ndw-list-item] ndw-radio-button.readonly{pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .affix.expanded{transform:var(--ndw-rotate-half)}[ndw-list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[ndw-list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[ndw-list-item] .suffix-button{padding-inline:var(--ndw-spacing-3xs)}[ndw-list-item] .suffix-button ndw-icon{font-size:var(--ndw-spacing-lg)}[ndw-list-item] .suffix-button[disabled]{background-color:transparent;border-color:transparent}[ndw-list-item].indented{background-color:var(--ndw-color-grey-100);border-radius:0;padding-inline-start:var(--ndw-spacing-3xl)}[ndw-list-item].indented:hover{background-color:var(--ndw-color-grey-300)}[ndw-list-item][disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ndw-badge" }, { kind: "component", type: CheckboxComponent, selector: "ndw-checkbox", inputs: ["switch", "success"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PillComponent, selector: "ndw-pill" }, { 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: "21.0.8", ngImport: i0, type: ListItemComponent, decorators: [{
             type: Component,
@@ -2263,7 +2263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         NgTemplateOutlet,
                         PillComponent,
                         RadioButtonComponent,
-                    ], selector: 'ndw-list-item', template: "@if (actionable()) {\n  <button\n    ndw-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 ndw-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\" [displayLargeNumbers]=\"displayLargeNumbers()\" />\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: ["[ndw-list-item]{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}[ndw-list-item]:hover,[ndw-list-item][active]{background-color:var(--list-item-hover-background-color)}[ndw-list-item][disabled],[ndw-list-item][aria-disabled]{color:var(--list-item-disabled-color);pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item]{--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)}[ndw-list-item]:not(.actionable){--list-item-hover-background-color: var(--ndw-color-white)}[ndw-list-item]{width:100%}[ndw-list-item] ndw-checkbox.readonly,[ndw-list-item] ndw-radio-button.readonly{pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .affix.expanded{transform:var(--ndw-rotate-half)}[ndw-list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[ndw-list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[ndw-list-item] .suffix-button{padding-inline:var(--ndw-spacing-3xs)}[ndw-list-item] .suffix-button ndw-icon{font-size:var(--ndw-spacing-lg)}[ndw-list-item] .suffix-button[disabled]{background-color:transparent;border-color:transparent}[ndw-list-item].indented{background-color:var(--ndw-color-grey-100);border-radius:0;padding-inline-start:var(--ndw-spacing-3xl)}[ndw-list-item].indented:hover{background-color:var(--ndw-color-grey-300)}[ndw-list-item][disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"] }]
+                    ], selector: 'ndw-list-item', template: "@if (actionable()) {\r\n  <button\r\n    ndw-list-item\r\n    class=\"actionable\"\r\n    [attr.active]=\"active() || undefined\"\r\n    [attr.aria-expanded]=\"expanded()\"\r\n    [attr.disabled]=\"disabled() || undefined\"\r\n    [class.indented]=\"indented()\"\r\n    (click)=\"onListItemSelect()\"\r\n  >\r\n    @if (checkable()) {\r\n      @if (checkType() === 'radio') {\r\n        <ndw-radio-button\r\n          [disabled]=\"disabled()\"\r\n          [class.readonly]=\"!collapsible() && !indented()\"\r\n          [(checked)]=\"checked\"\r\n          (click)=\"onCheckClick($event)\"\r\n        />\r\n      } @else {\r\n        <ndw-checkbox\r\n          [disabled]=\"disabled()\"\r\n          [class.readonly]=\"!collapsible() && !indented()\"\r\n          [(checked)]=\"checked\"\r\n          (click)=\"onCheckClick($event)\"\r\n        />\r\n      }\r\n    }\r\n    <ng-container *ngTemplateOutlet=\"listItem\" />\r\n  </button>\r\n} @else {\r\n  <div ndw-list-item [class.indented]=\"indented()\">\r\n    <ng-container *ngTemplateOutlet=\"listItem\" />\r\n  </div>\r\n}\r\n\r\n<ng-template #listItem>\r\n  @if (prefixIcon(); as prefix) {\r\n    <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\r\n  }\r\n  <ng-content />\r\n  <div class=\"content\">\r\n    @if (title(); as title) {\r\n      <span class=\"title\">{{ title }}</span>\r\n    }\r\n    @if (subtitle(); as subtitle) {\r\n      {{ subtitle }}\r\n    }\r\n  </div>\r\n  @if (pillLabel(); as pillLabel) {\r\n    <ndw-pill [color]=\"pillColor()\">{{ pillLabel }}</ndw-pill>\r\n  }\r\n  @if (badgeValue(); as badgeValue) {\r\n    <ndw-badge [value]=\"badgeValue\" [displayLargeNumbers]=\"displayLargeNumbers()\" />\r\n  }\r\n  @if (showButton()) {\r\n    <button\r\n      ndwButton\r\n      tertiary\r\n      class=\"suffix-button\"\r\n      [attr.aria-label]=\"buttonLabel()\"\r\n      [attr.disabled]=\"disabled() || undefined\"\r\n      (click)=\"onButtonClick($event)\"\r\n    >\r\n      <ndw-icon>{{ buttonIcon() }}</ndw-icon>\r\n    </button>\r\n  }\r\n  @if (collapsible()) {\r\n    <ndw-icon class=\"affix\" [class.expanded]=\"expanded()\">keyboard_arrow_down</ndw-icon>\r\n  }\r\n</ng-template>\r\n", styles: ["[ndw-list-item]{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}[ndw-list-item]:hover,[ndw-list-item][active]{background-color:var(--list-item-hover-background-color)}[ndw-list-item][disabled],[ndw-list-item][aria-disabled]{color:var(--list-item-disabled-color);pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item]{--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)}[ndw-list-item]:not(.actionable){--list-item-hover-background-color: var(--ndw-color-white)}[ndw-list-item]{width:100%}[ndw-list-item] ndw-checkbox.readonly,[ndw-list-item] ndw-radio-button.readonly{pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .affix.expanded{transform:var(--ndw-rotate-half)}[ndw-list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[ndw-list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[ndw-list-item] .suffix-button{padding-inline:var(--ndw-spacing-3xs)}[ndw-list-item] .suffix-button ndw-icon{font-size:var(--ndw-spacing-lg)}[ndw-list-item] .suffix-button[disabled]{background-color:transparent;border-color:transparent}[ndw-list-item].indented{background-color:var(--ndw-color-grey-100);border-radius:0;padding-inline-start:var(--ndw-spacing-3xl)}[ndw-list-item].indented:hover{background-color:var(--ndw-color-grey-300)}[ndw-list-item][disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], badgeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeValue", required: false }] }], displayLargeNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayLargeNumbers", required: false }] }], buttonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonIcon", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], checkable: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkable", required: false }] }], checkType: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkType", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indented: [{ type: i0.Input, args: [{ isSignal: true, alias: "indented", required: false }] }], pillColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "pillColor", required: false }] }], pillLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pillLabel", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], showButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButton", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], radioButton: [{ type: i0.ViewChild, args: [i0.forwardRef(() => RadioButtonComponent), { isSignal: true }] }] } });
 class CollapsibleComponent {
@@ -2285,7 +2285,7 @@ class CollapsibleComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", 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 }, displayLargeNumbers: { classPropertyName: "displayLargeNumbers", publicName: "displayLargeNumbers", 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()", "class.open": "expanded()", "class.closed": "!expanded()" } }, ngImport: i0, template: "<ndw-list-item\n  [attr.aria-controls]=\"sectionUuid\"\n  [badgeValue]=\"value()\"\n  [displayLargeNumbers]=\"displayLargeNumbers()\"\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 role=\"region\" class=\"content\" [id]=\"sectionUuid\" [attr.aria-labelledby]=\"toggleUuid\">\n  <div>\n    <ng-content />\n  </div>\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);margin-block:0;display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .2s}:host .content *{min-height:0}:host.open .content{grid-template-rows:1fr;transition:all .2s ease-in-out}\n"], dependencies: [{ kind: "component", type: ListItemComponent, selector: "ndw-list-item", inputs: ["active", "badgeValue", "displayLargeNumbers", "buttonIcon", "buttonLabel", "checkable", "checkType", "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.1.0", version: "21.0.8", 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 }, displayLargeNumbers: { classPropertyName: "displayLargeNumbers", publicName: "displayLargeNumbers", 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()", "class.open": "expanded()", "class.closed": "!expanded()" } }, ngImport: i0, template: "<ndw-list-item\r\n  [attr.aria-controls]=\"sectionUuid\"\r\n  [badgeValue]=\"value()\"\r\n  [displayLargeNumbers]=\"displayLargeNumbers()\"\r\n  [checkable]=\"checkable()\"\r\n  [collapsible]=\"true\"\r\n  [expanded]=\"expanded()\"\r\n  [subtitle]=\"subtitle()\"\r\n  [title]=\"title()\"\r\n  (expandedChange)=\"toggle()\"\r\n>\r\n  <ng-content select=\"custom-header-content\" />\r\n</ndw-list-item>\r\n<section role=\"region\" class=\"content\" [id]=\"sectionUuid\" [attr.aria-labelledby]=\"toggleUuid\">\r\n  <div>\r\n    <ng-content />\r\n  </div>\r\n</section>\r\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);margin-block:0;display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .2s}:host .content *{min-height:0}:host.open .content{grid-template-rows:1fr;transition:all .2s ease-in-out}\n"], dependencies: [{ kind: "component", type: ListItemComponent, selector: "ndw-list-item", inputs: ["active", "badgeValue", "displayLargeNumbers", "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: "21.0.8", ngImport: i0, type: CollapsibleComponent, decorators: [{
             type: Component,
@@ -2293,7 +2293,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '[class.expanded]': 'expanded()',
                         '[class.open]': 'expanded()',
                         '[class.closed]': '!expanded()',
-                    }, imports: [ListItemComponent], selector: 'ndw-collapsible', template: "<ndw-list-item\n  [attr.aria-controls]=\"sectionUuid\"\n  [badgeValue]=\"value()\"\n  [displayLargeNumbers]=\"displayLargeNumbers()\"\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 role=\"region\" class=\"content\" [id]=\"sectionUuid\" [attr.aria-labelledby]=\"toggleUuid\">\n  <div>\n    <ng-content />\n  </div>\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);margin-block:0;display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .2s}:host .content *{min-height:0}:host.open .content{grid-template-rows:1fr;transition:all .2s ease-in-out}\n"] }]
+                    }, imports: [ListItemComponent], selector: 'ndw-collapsible', template: "<ndw-list-item\r\n  [attr.aria-controls]=\"sectionUuid\"\r\n  [badgeValue]=\"value()\"\r\n  [displayLargeNumbers]=\"displayLargeNumbers()\"\r\n  [checkable]=\"checkable()\"\r\n  [collapsible]=\"true\"\r\n  [expanded]=\"expanded()\"\r\n  [subtitle]=\"subtitle()\"\r\n  [title]=\"title()\"\r\n  (expandedChange)=\"toggle()\"\r\n>\r\n  <ng-content select=\"custom-header-content\" />\r\n</ndw-list-item>\r\n<section role=\"region\" class=\"content\" [id]=\"sectionUuid\" [attr.aria-labelledby]=\"toggleUuid\">\r\n  <div>\r\n    <ng-content />\r\n  </div>\r\n</section>\r\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);margin-block:0;display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .2s}:host .content *{min-height:0}:host.open .content{grid-template-rows:1fr;transition:all .2s ease-in-out}\n"] }]
         }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], checkable: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkable", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], displayLargeNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayLargeNumbers", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
 class ListComponent {
@@ -2309,14 +2309,14 @@ class ListComponent {
         checkRadioItems(items);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", 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{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: "21.0.8", 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 />\r\n", styles: [":host{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: "21.0.8", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         role: 'list',
                         '[class.elevated]': 'elevated()',
-                    }, selector: 'ndw-list', template: "<ng-content />\n", styles: [":host{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"] }]
+                    }, selector: 'ndw-list', template: "<ng-content />\r\n", styles: [":host{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"] }]
         }], propDecorators: { elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], listItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ListItemComponent), { isSignal: true }] }] } });
 class AccordionService {
@@ -2349,11 +2349,11 @@ class AccordionComponent extends ListComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: AccordionComponent, isStandalone: true, selector: "ndw-accordion", inputs: { collapseOthers: { classPropertyName: "collapseOthers", publicName: "collapseOthers", isSignal: true, isRequired: false, transformFunction: null } }, providers: [AccordionService], queries: [{ propertyName: "collapsibles", predicate: CollapsibleComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: AccordionComponent, isStandalone: true, selector: "ndw-accordion", inputs: { collapseOthers: { classPropertyName: "collapseOthers", publicName: "collapseOthers", isSignal: true, isRequired: false, transformFunction: null } }, providers: [AccordionService], queries: [{ propertyName: "collapsibles", predicate: CollapsibleComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content />\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [AccordionService], selector: 'ndw-accordion', template: "<ng-content />\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [AccordionService], selector: 'ndw-accordion', template: "<ng-content />\r\n" }]
         }], propDecorators: { collapseOthers: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseOthers", required: false }] }], collapsibles: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CollapsibleComponent), { isSignal: true }] }] } });
 class AlertComponent {
@@ -2380,7 +2380,7 @@ class AlertComponent {
         this.close.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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: [".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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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>\r\n  <ndw-icon class=\"info-icon\">info</ndw-icon>\r\n  @if (actionable()) {\r\n    @if (title(); as title) {\r\n      <h2>{{ title }}</h2>\r\n    }\r\n\r\n    <button ndwButton alternative extra-small tertiary class=\"close-button\" (click)=\"onClose()\">\r\n      <span class=\"sr-only\">Sluit melding</span>\r\n      <ndw-icon>close</ndw-icon>\r\n    </button>\r\n  }\r\n</section>\r\n<ng-content />\r\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{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: "21.0.8", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
@@ -2389,7 +2389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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: [".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"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonDirective, IconComponent], selector: 'ndw-alert', template: "<section>\r\n  <ndw-icon class=\"info-icon\">info</ndw-icon>\r\n  @if (actionable()) {\r\n    @if (title(); as title) {\r\n      <h2>{{ title }}</h2>\r\n    }\r\n\r\n    <button ndwButton alternative extra-small tertiary class=\"close-button\" (click)=\"onClose()\">\r\n      <span class=\"sr-only\">Sluit melding</span>\r\n      <ndw-icon>close</ndw-icon>\r\n    </button>\r\n  }\r\n</section>\r\n<ng-content />\r\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{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"] }]
         }], propDecorators: { actionable: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionable", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ariaLive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLive", required: false }] }], close: [{ type: i0.Output, args: ["close"] }] } });
 class AvatarComponent {
@@ -2397,13 +2397,13 @@ class AvatarComponent {
     initials = input(false, ...(ngDevMode ? [{ debugName: "initials" }] : []));
     color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AvatarComponent, isStandalone: true, selector: "ndw-avatar", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.color": "color()" } }, ngImport: i0, template: "<div class=\"content-wrapper\" role=\"img\" [attr.color]=\"color()\">\n  <ng-content />\n</div>\n\n@if (status() !== 'none') {\n  <div\n    class=\"status-circle\"\n    [ngClass]=\"{ approved: status() === 'approved', declined: status() === 'declined' }\"\n  >\n    @if (status() === 'approved') {\n      <ndw-icon>check</ndw-icon>\n    } @else if (status() === 'declined') {\n      <ndw-icon>close</ndw-icon>\n    }\n  </div>\n}\n", styles: [":host{position:relative;display:flex;width:fit-content}:host .content-wrapper{overflow:hidden;display:flex;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;font-weight:var(--ndw-font-weight-bold);color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300)}:host .content-wrapper[color=blue]{color:var(--ndw-color-info-500);background-color:var(--ndw-color-info-100)}:host .content-wrapper[color=orange]{color:var(--ndw-color-primary-700);background-color:var(--ndw-color-primary-050)}:host .content-wrapper[color=green]{color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-100)}:host .content-wrapper[color=red]{color:var(--ndw-color-critical-500);background-color:var(--ndw-color-critical-100)}:host .content-wrapper[color=yellow]{color:var(--ndw-color-warning-500);background-color:var(--ndw-color-warning-100)}:host .content-wrapper[color=purple]{color:var(--ndw-color-alternative-500);background-color:var(--ndw-color-alternative-100)}:host .content-wrapper ndw-icon{font-size:var(--ndw-font-size-lg)}:host .status-circle{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-500);background-color:var(--ndw-color-white)}:host .status-circle ndw-icon{font-size:var(--ndw-icon-size-md)}:host .status-circle.approved{border-color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-500);color:var(--ndw-color-white)}:host .status-circle.declined{border-color:var(--ndw-color-critical-500);background-color:var(--ndw-color-critical-500);color:var(--ndw-color-white)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AvatarComponent, isStandalone: true, selector: "ndw-avatar", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.color": "color()" } }, ngImport: i0, template: "<div class=\"content-wrapper\" role=\"img\" [attr.color]=\"color()\">\r\n  <ng-content />\r\n</div>\r\n\r\n@if (status() !== 'none') {\r\n  <div\r\n    class=\"status-circle\"\r\n    [ngClass]=\"{ approved: status() === 'approved', declined: status() === 'declined' }\"\r\n  >\r\n    @if (status() === 'approved') {\r\n      <ndw-icon>check</ndw-icon>\r\n    } @else if (status() === 'declined') {\r\n      <ndw-icon>close</ndw-icon>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{position:relative;display:flex;width:fit-content}:host .content-wrapper{overflow:hidden;display:flex;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;font-weight:var(--ndw-font-weight-bold);color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300)}:host .content-wrapper[color=blue]{color:var(--ndw-color-info-500);background-color:var(--ndw-color-info-100)}:host .content-wrapper[color=orange]{color:var(--ndw-color-primary-700);background-color:var(--ndw-color-primary-050)}:host .content-wrapper[color=green]{color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-100)}:host .content-wrapper[color=red]{color:var(--ndw-color-critical-500);background-color:var(--ndw-color-critical-100)}:host .content-wrapper[color=yellow]{color:var(--ndw-color-warning-500);background-color:var(--ndw-color-warning-100)}:host .content-wrapper[color=purple]{color:var(--ndw-color-alternative-500);background-color:var(--ndw-color-alternative-100)}:host .content-wrapper ndw-icon{font-size:var(--ndw-font-size-lg)}:host .status-circle{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-500);background-color:var(--ndw-color-white)}:host .status-circle ndw-icon{font-size:var(--ndw-icon-size-md)}:host .status-circle.approved{border-color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-500);color:var(--ndw-color-white)}:host .status-circle.declined{border-color:var(--ndw-color-critical-500);background-color:var(--ndw-color-critical-500);color:var(--ndw-color-white)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{ host: {
                         '[attr.color]': 'color()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-avatar', imports: [IconComponent, NgClass], template: "<div class=\"content-wrapper\" role=\"img\" [attr.color]=\"color()\">\n  <ng-content />\n</div>\n\n@if (status() !== 'none') {\n  <div\n    class=\"status-circle\"\n    [ngClass]=\"{ approved: status() === 'approved', declined: status() === 'declined' }\"\n  >\n    @if (status() === 'approved') {\n      <ndw-icon>check</ndw-icon>\n    } @else if (status() === 'declined') {\n      <ndw-icon>close</ndw-icon>\n    }\n  </div>\n}\n", styles: [":host{position:relative;display:flex;width:fit-content}:host .content-wrapper{overflow:hidden;display:flex;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;font-weight:var(--ndw-font-weight-bold);color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300)}:host .content-wrapper[color=blue]{color:var(--ndw-color-info-500);background-color:var(--ndw-color-info-100)}:host .content-wrapper[color=orange]{color:var(--ndw-color-primary-700);background-color:var(--ndw-color-primary-050)}:host .content-wrapper[color=green]{color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-100)}:host .content-wrapper[color=red]{color:var(--ndw-color-critical-500);background-color:var(--ndw-color-critical-100)}:host .content-wrapper[color=yellow]{color:var(--ndw-color-warning-500);background-color:var(--ndw-color-warning-100)}:host .content-wrapper[color=purple]{color:var(--ndw-color-alternative-500);background-color:var(--ndw-color-alternative-100)}:host .content-wrapper ndw-icon{font-size:var(--ndw-font-size-lg)}:host .status-circle{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-500);background-color:var(--ndw-color-white)}:host .status-circle ndw-icon{font-size:var(--ndw-icon-size-md)}:host .status-circle.approved{border-color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-500);color:var(--ndw-color-white)}:host .status-circle.declined{border-color:var(--ndw-color-critical-500);background-color:var(--ndw-color-critical-500);color:var(--ndw-color-white)}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-avatar', imports: [IconComponent, NgClass], template: "<div class=\"content-wrapper\" role=\"img\" [attr.color]=\"color()\">\r\n  <ng-content />\r\n</div>\r\n\r\n@if (status() !== 'none') {\r\n  <div\r\n    class=\"status-circle\"\r\n    [ngClass]=\"{ approved: status() === 'approved', declined: status() === 'declined' }\"\r\n  >\r\n    @if (status() === 'approved') {\r\n      <ndw-icon>check</ndw-icon>\r\n    } @else if (status() === 'declined') {\r\n      <ndw-icon>close</ndw-icon>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{position:relative;display:flex;width:fit-content}:host .content-wrapper{overflow:hidden;display:flex;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;font-weight:var(--ndw-font-weight-bold);color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300)}:host .content-wrapper[color=blue]{color:var(--ndw-color-info-500);background-color:var(--ndw-color-info-100)}:host .content-wrapper[color=orange]{color:var(--ndw-color-primary-700);background-color:var(--ndw-color-primary-050)}:host .content-wrapper[color=green]{color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-100)}:host .content-wrapper[color=red]{color:var(--ndw-color-critical-500);background-color:var(--ndw-color-critical-100)}:host .content-wrapper[color=yellow]{color:var(--ndw-color-warning-500);background-color:var(--ndw-color-warning-100)}:host .content-wrapper[color=purple]{color:var(--ndw-color-alternative-500);background-color:var(--ndw-color-alternative-100)}:host .content-wrapper ndw-icon{font-size:var(--ndw-font-size-lg)}:host .status-circle{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-500);background-color:var(--ndw-color-white)}:host .status-circle ndw-icon{font-size:var(--ndw-icon-size-md)}:host .status-circle.approved{border-color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-500);color:var(--ndw-color-white)}:host .status-circle.declined{border-color:var(--ndw-color-critical-500);background-color:var(--ndw-color-critical-500);color:var(--ndw-color-white)}\n"] }]
         }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 class BannerComponent {
@@ -2447,7 +2447,7 @@ class BannerComponent {
             this.textContent()?.nativeElement.scrollWidth > this.textContent()?.nativeElement.clientWidth;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: BannerComponent, isStandalone: true, selector: "ndw-banner", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, readMoreLabel: { classPropertyName: "readMoreLabel", publicName: "readMoreLabel", 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": "button", "tabindex": "0" }, listeners: { "window:resize": "setReadMore()" }, properties: { "attr.aria-live": "ariaLive()", "attr.title": "message()", "class": "type()" } }, viewQueries: [{ propertyName: "textContent", first: true, predicate: ["textContent"], descendants: true, isSignal: true }], ngImport: i0, 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: [".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-200)}:host:active,:host:focus{background-color:var(--ndw-color-info-300)}:host.critical{background-color:var(--ndw-color-critical-100);color:var(--ndw-color-critical-500)}:host.critical section .info-icon,: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)}:host.positive{background-color:var(--ndw-color-positive-100);color:var(--ndw-color-grey-600)}:host.positive section .info-icon,:host.positive button ndw-icon{color:var(--ndw-color-positive-500)}:host.positive:hover{background-color:var(--ndw-color-positive-200)}:host.positive:active,:host.positive:focus{background-color:var(--ndw-color-positive-300)}:host.info-grey{background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500)}:host.info-grey section .info-icon,:host.info-grey button ndw-icon{color:var(--ndw-color-grey-500)}:host.info-grey:hover{background-color:var(--ndw-color-grey-200)}:host.info-grey:active,:host.info-grey:focus{background-color:var(--ndw-color-grey-300)}:host.warning{background-color:var(--ndw-color-warning-100);color:var(--ndw-color-grey-600)}:host.warning section .info-icon,:host.warning button ndw-icon{color:var(--ndw-color-warning-500)}:host.warning:hover{background-color:var(--ndw-color-warning-200)}:host.warning:active,:host.warning:focus{background-color:var(--ndw-color-warning-300)}\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: "21.0.8", type: BannerComponent, isStandalone: true, selector: "ndw-banner", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, readMoreLabel: { classPropertyName: "readMoreLabel", publicName: "readMoreLabel", 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": "button", "tabindex": "0" }, listeners: { "window:resize": "setReadMore()" }, properties: { "attr.aria-live": "ariaLive()", "attr.title": "message()", "class": "type()" } }, viewQueries: [{ propertyName: "textContent", first: true, predicate: ["textContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<section>\r\n  <ndw-icon class=\"info-icon\">info</ndw-icon>\r\n  <p #textContent>\r\n    <strong>{{ title() }}:</strong>\r\n    {{ message() }}\r\n  </p>\r\n  @if (showReadMore) {\r\n    <p>{{ readMoreLabel() }}</p>\r\n  }\r\n</section>\r\n<button ndwButton alternative extra-small tertiary class=\"close-button\" (click)=\"onClose($event)\">\r\n  <span class=\"sr-only\">Sluit melding</span>\r\n  <ndw-icon>close</ndw-icon>\r\n</button>\r\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{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-200)}:host:active,:host:focus{background-color:var(--ndw-color-info-300)}:host.critical{background-color:var(--ndw-color-critical-100);color:var(--ndw-color-critical-500)}:host.critical section .info-icon,: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)}:host.positive{background-color:var(--ndw-color-positive-100);color:var(--ndw-color-grey-600)}:host.positive section .info-icon,:host.positive button ndw-icon{color:var(--ndw-color-positive-500)}:host.positive:hover{background-color:var(--ndw-color-positive-200)}:host.positive:active,:host.positive:focus{background-color:var(--ndw-color-positive-300)}:host.info-grey{background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500)}:host.info-grey section .info-icon,:host.info-grey button ndw-icon{color:var(--ndw-color-grey-500)}:host.info-grey:hover{background-color:var(--ndw-color-grey-200)}:host.info-grey:active,:host.info-grey:focus{background-color:var(--ndw-color-grey-300)}:host.warning{background-color:var(--ndw-color-warning-100);color:var(--ndw-color-grey-600)}:host.warning section .info-icon,:host.warning button ndw-icon{color:var(--ndw-color-warning-500)}:host.warning:hover{background-color:var(--ndw-color-warning-200)}:host.warning:active,:host.warning:focus{background-color:var(--ndw-color-warning-300)}\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: "21.0.8", ngImport: i0, type: BannerComponent, decorators: [{
             type: Component,
@@ -2458,46 +2458,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '(window:resize)': 'setReadMore()',
                         role: 'button',
                         tabindex: '0',
-                    }, 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: [".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-200)}:host:active,:host:focus{background-color:var(--ndw-color-info-300)}:host.critical{background-color:var(--ndw-color-critical-100);color:var(--ndw-color-critical-500)}:host.critical section .info-icon,: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)}:host.positive{background-color:var(--ndw-color-positive-100);color:var(--ndw-color-grey-600)}:host.positive section .info-icon,:host.positive button ndw-icon{color:var(--ndw-color-positive-500)}:host.positive:hover{background-color:var(--ndw-color-positive-200)}:host.positive:active,:host.positive:focus{background-color:var(--ndw-color-positive-300)}:host.info-grey{background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500)}:host.info-grey section .info-icon,:host.info-grey button ndw-icon{color:var(--ndw-color-grey-500)}:host.info-grey:hover{background-color:var(--ndw-color-grey-200)}:host.info-grey:active,:host.info-grey:focus{background-color:var(--ndw-color-grey-300)}:host.warning{background-color:var(--ndw-color-warning-100);color:var(--ndw-color-grey-600)}:host.warning section .info-icon,:host.warning button ndw-icon{color:var(--ndw-color-warning-500)}:host.warning:hover{background-color:var(--ndw-color-warning-200)}:host.warning:active,:host.warning:focus{background-color:var(--ndw-color-warning-300)}\n"] }]
+                    }, imports: [ButtonDirective, IconComponent], selector: 'ndw-banner', template: "<section>\r\n  <ndw-icon class=\"info-icon\">info</ndw-icon>\r\n  <p #textContent>\r\n    <strong>{{ title() }}:</strong>\r\n    {{ message() }}\r\n  </p>\r\n  @if (showReadMore) {\r\n    <p>{{ readMoreLabel() }}</p>\r\n  }\r\n</section>\r\n<button ndwButton alternative extra-small tertiary class=\"close-button\" (click)=\"onClose($event)\">\r\n  <span class=\"sr-only\">Sluit melding</span>\r\n  <ndw-icon>close</ndw-icon>\r\n</button>\r\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{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-200)}:host:active,:host:focus{background-color:var(--ndw-color-info-300)}:host.critical{background-color:var(--ndw-color-critical-100);color:var(--ndw-color-critical-500)}:host.critical section .info-icon,: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)}:host.positive{background-color:var(--ndw-color-positive-100);color:var(--ndw-color-grey-600)}:host.positive section .info-icon,:host.positive button ndw-icon{color:var(--ndw-color-positive-500)}:host.positive:hover{background-color:var(--ndw-color-positive-200)}:host.positive:active,:host.positive:focus{background-color:var(--ndw-color-positive-300)}:host.info-grey{background-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500)}:host.info-grey section .info-icon,:host.info-grey button ndw-icon{color:var(--ndw-color-grey-500)}:host.info-grey:hover{background-color:var(--ndw-color-grey-200)}:host.info-grey:active,:host.info-grey:focus{background-color:var(--ndw-color-grey-300)}:host.warning{background-color:var(--ndw-color-warning-100);color:var(--ndw-color-grey-600)}:host.warning section .info-icon,:host.warning button ndw-icon{color:var(--ndw-color-warning-500)}:host.warning:hover{background-color:var(--ndw-color-warning-200)}:host.warning:active,:host.warning:focus{background-color:var(--ndw-color-warning-300)}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], readMoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "readMoreLabel", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ariaLive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLive", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], textContent: [{ type: i0.ViewChild, args: ['textContent', { isSignal: true }] }] } });
 class BreadcrumbComponent extends CoreBreadcrumbComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BreadcrumbComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: BreadcrumbComponent, isStandalone: true, selector: "ndw-breadcrumb", host: { attributes: { "role": "link" } }, usesInheritance: true, ngImport: i0, template: "<ng-template #content>\r\n  <ng-content />\r\n</ng-template>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         role: 'link',
-                    }, selector: 'ndw-breadcrumb', template: "<ng-template #content>\n  <ng-content />\n</ng-template>\n" }]
+                    }, selector: 'ndw-breadcrumb', template: "<ng-template #content>\r\n  <ng-content />\r\n</ng-template>\r\n" }]
         }] });
 class BreadcrumbGroupComponent extends CoreBreadcrumbGroupComponent {
     breadcrumbs = contentChildren(BreadcrumbComponent, ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BreadcrumbGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: BreadcrumbGroupComponent, isStandalone: true, selector: "ndw-breadcrumb-group", 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: [".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-info-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{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-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{--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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: BreadcrumbGroupComponent, isStandalone: true, selector: "ndw-breadcrumb-group", queries: [{ propertyName: "breadcrumbs", predicate: BreadcrumbComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@for (breadcrumb of breadcrumbs(); track breadcrumb.link()) {\r\n  @if ($count > 1 && $index === $count - 2) {\r\n    <ndw-icon class=\"icon-back\" aria-hidden=\"true\">chevron_left</ndw-icon>\r\n  }\r\n\r\n  <a\r\n    class=\"breadcrumb\"\r\n    [class.current-page]=\"$last\"\r\n    [class.show-on-small-screen]=\"$count === 1 || $index === $count - 2\"\r\n    [attr.aria-current]=\"$last ? 'page' : null\"\r\n    [routerLink]=\"$last ? null : breadcrumb.link()\"\r\n  >\r\n    <ng-template [ngTemplateOutlet]=\"breadcrumb.content()\"></ng-template>\r\n  </a>\r\n\r\n  @if (!$last) {\r\n    <ndw-icon class=\"icon-forward\" aria-hidden=\"true\">chevron_right</ndw-icon>\r\n  }\r\n}\r\n", styles: [".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-info-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{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-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{--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: "21.0.8", ngImport: i0, type: BreadcrumbGroupComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, 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: [".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-info-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{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-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{--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"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, NgTemplateOutlet, RouterLink], selector: 'ndw-breadcrumb-group', template: "@for (breadcrumb of breadcrumbs(); track breadcrumb.link()) {\r\n  @if ($count > 1 && $index === $count - 2) {\r\n    <ndw-icon class=\"icon-back\" aria-hidden=\"true\">chevron_left</ndw-icon>\r\n  }\r\n\r\n  <a\r\n    class=\"breadcrumb\"\r\n    [class.current-page]=\"$last\"\r\n    [class.show-on-small-screen]=\"$count === 1 || $index === $count - 2\"\r\n    [attr.aria-current]=\"$last ? 'page' : null\"\r\n    [routerLink]=\"$last ? null : breadcrumb.link()\"\r\n  >\r\n    <ng-template [ngTemplateOutlet]=\"breadcrumb.content()\"></ng-template>\r\n  </a>\r\n\r\n  @if (!$last) {\r\n    <ndw-icon class=\"icon-forward\" aria-hidden=\"true\">chevron_right</ndw-icon>\r\n  }\r\n}\r\n", styles: [".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-info-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{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-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{--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"] }]
         }], propDecorators: { breadcrumbs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BreadcrumbComponent), { isSignal: true }] }] } });
 class CardContentComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: CardContentComponent, isStandalone: true, selector: "ndw-card-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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: CardContentComponent, isStandalone: true, selector: "ndw-card-content", ngImport: i0, template: "<ng-content />\r\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CardContentComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-card-content', template: "<ng-content />\n", styles: [":host{font-size:var(--ndw-font-size-sm);max-height:100%;overflow-y:auto;word-break:break-word}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-card-content', template: "<ng-content />\r\n", styles: [":host{font-size:var(--ndw-font-size-sm);max-height:100%;overflow-y:auto;word-break:break-word}\n"] }]
         }] });
 class CardFooterComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: CardFooterComponent, isStandalone: true, selector: "ndw-card-footer", ngImport: i0, template: "<ng-content />\n", styles: [":host{align-items:center;display:flex;font-size:var(--ndw-font-size-sm);justify-content:flex-end;gap:var(--ndw-spacing-md);margin-top:var(--ndw-spacing-xs);word-break:break-word}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: CardFooterComponent, isStandalone: true, selector: "ndw-card-footer", ngImport: i0, template: "<ng-content />\r\n", styles: [":host{align-items:center;display:flex;font-size:var(--ndw-font-size-sm);justify-content:flex-end;gap:var(--ndw-spacing-md);margin-top:var(--ndw-spacing-xs);word-break:break-word}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CardFooterComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-card-footer', template: "<ng-content />\n", styles: [":host{align-items:center;display:flex;font-size:var(--ndw-font-size-sm);justify-content:flex-end;gap:var(--ndw-spacing-md);margin-top:var(--ndw-spacing-xs);word-break:break-word}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-card-footer', template: "<ng-content />\r\n", styles: [":host{align-items:center;display:flex;font-size:var(--ndw-font-size-sm);justify-content:flex-end;gap:var(--ndw-spacing-md);margin-top:var(--ndw-spacing-xs);word-break:break-word}\n"] }]
         }] });
 const CARD_ID_TOKEN = new InjectionToken('CARD_ID_TOKEN');
@@ -2522,7 +2522,7 @@ class CardComponent {
                 provide: CARD_ID_TOKEN,
                 useFactory: () => `ndw-card-${crypto.randomUUID()}`,
             },
-        ], queries: [{ propertyName: "header", first: true, predicate: i0.forwardRef(() => CardHeaderComponent), descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"content\">\n  <ng-content />\n</div>\n", styles: [":host{background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-content);padding:var(--ndw-spacing-lg);overflow:hidden;display:grid}:host .content{display:grid;gap:var(--ndw-spacing-md);min-height:var(--header-height)}:host.collapsible{box-sizing:content-box;grid-template-rows:0fr;transition:grid-template-rows var(--ndw-animation-speed-fast) ease-in-out}:host.open{grid-template-rows:1fr}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "header", first: true, predicate: i0.forwardRef(() => CardHeaderComponent), descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"content\">\r\n  <ng-content />\r\n</div>\r\n", styles: [":host{background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-content);padding:var(--ndw-spacing-lg);overflow:hidden;display:grid}:host .content{display:grid;gap:var(--ndw-spacing-md);min-height:var(--header-height)}:host.collapsible{box-sizing:content-box;grid-template-rows:0fr;transition:grid-template-rows var(--ndw-animation-speed-fast) ease-in-out}:host.open{grid-template-rows:1fr}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
@@ -2537,7 +2537,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '[class.open]': '!isCollapsed()',
                         '[class.closed]': 'isCollapsed()',
                         '[style.--header-height]': 'this.headerHeight() + "px"',
-                    }, template: "<div class=\"content\">\n  <ng-content />\n</div>\n", styles: [":host{background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-content);padding:var(--ndw-spacing-lg);overflow:hidden;display:grid}:host .content{display:grid;gap:var(--ndw-spacing-md);min-height:var(--header-height)}:host.collapsible{box-sizing:content-box;grid-template-rows:0fr;transition:grid-template-rows var(--ndw-animation-speed-fast) ease-in-out}:host.open{grid-template-rows:1fr}\n"] }]
+                    }, template: "<div class=\"content\">\r\n  <ng-content />\r\n</div>\r\n", styles: [":host{background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-content);padding:var(--ndw-spacing-lg);overflow:hidden;display:grid}:host .content{display:grid;gap:var(--ndw-spacing-md);min-height:var(--header-height)}:host.collapsible{box-sizing:content-box;grid-template-rows:0fr;transition:grid-template-rows var(--ndw-animation-speed-fast) ease-in-out}:host.open{grid-template-rows:1fr}\n"] }]
         }], propDecorators: { header: [{ type: i0.ContentChild, args: [forwardRef(() => CardHeaderComponent), { isSignal: true }] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }] } });
 class CardHeaderComponent {
@@ -2552,11 +2552,11 @@ class CardHeaderComponent {
         this.isCollapsed.set(!this.isCollapsed());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: CardHeaderComponent, isStandalone: true, selector: "ndw-card-header", inputs: { isCollapsible: { classPropertyName: "isCollapsible", publicName: "isCollapsible", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "@if (isCollapsible()) {\n  <button\n    class=\"float\"\n    type=\"button\"\n    ndwButton\n    extra-small\n    tertiary\n    [attr.aria-controls]=\"cardId\"\n    [attr.aria-expanded]=\"!isCollapsed()\"\n    [class.collapsed]=\"isCollapsed()\"\n    (click)=\"toggleCollapsed()\"\n  >\n    <ndw-icon>keyboard_arrow_down</ndw-icon>\n  </button>\n}\n<ng-content />\n", styles: [":host{display:block;align-items:center;font-family:var(--ndw-font-family-heading);font-size:var(--ndw-font-size-lg);font-weight:700;word-break:break-word}.float{float:right;margin-left:var(--ndw-spacing-sm);transition:transform var(--ndw-animation-speed-fast) ease-in-out}.float.collapsed{transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: CardHeaderComponent, isStandalone: true, selector: "ndw-card-header", inputs: { isCollapsible: { classPropertyName: "isCollapsible", publicName: "isCollapsible", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "@if (isCollapsible()) {\r\n  <button\r\n    class=\"float\"\r\n    type=\"button\"\r\n    ndwButton\r\n    extra-small\r\n    tertiary\r\n    [attr.aria-controls]=\"cardId\"\r\n    [attr.aria-expanded]=\"!isCollapsed()\"\r\n    [class.collapsed]=\"isCollapsed()\"\r\n    (click)=\"toggleCollapsed()\"\r\n  >\r\n    <ndw-icon>keyboard_arrow_down</ndw-icon>\r\n  </button>\r\n}\r\n<ng-content />\r\n", styles: [":host{display:block;align-items:center;font-family:var(--ndw-font-family-heading);font-size:var(--ndw-font-size-lg);font-weight:700;word-break:break-word}.float{float:right;margin-left:var(--ndw-spacing-sm);transition:transform var(--ndw-animation-speed-fast) ease-in-out}.float.collapsed{transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CardHeaderComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-card-header', imports: [IconComponent], template: "@if (isCollapsible()) {\n  <button\n    class=\"float\"\n    type=\"button\"\n    ndwButton\n    extra-small\n    tertiary\n    [attr.aria-controls]=\"cardId\"\n    [attr.aria-expanded]=\"!isCollapsed()\"\n    [class.collapsed]=\"isCollapsed()\"\n    (click)=\"toggleCollapsed()\"\n  >\n    <ndw-icon>keyboard_arrow_down</ndw-icon>\n  </button>\n}\n<ng-content />\n", styles: [":host{display:block;align-items:center;font-family:var(--ndw-font-family-heading);font-size:var(--ndw-font-size-lg);font-weight:700;word-break:break-word}.float{float:right;margin-left:var(--ndw-spacing-sm);transition:transform var(--ndw-animation-speed-fast) ease-in-out}.float.collapsed{transform:rotate(180deg)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-card-header', imports: [IconComponent], template: "@if (isCollapsible()) {\r\n  <button\r\n    class=\"float\"\r\n    type=\"button\"\r\n    ndwButton\r\n    extra-small\r\n    tertiary\r\n    [attr.aria-controls]=\"cardId\"\r\n    [attr.aria-expanded]=\"!isCollapsed()\"\r\n    [class.collapsed]=\"isCollapsed()\"\r\n    (click)=\"toggleCollapsed()\"\r\n  >\r\n    <ndw-icon>keyboard_arrow_down</ndw-icon>\r\n  </button>\r\n}\r\n<ng-content />\r\n", styles: [":host{display:block;align-items:center;font-family:var(--ndw-font-family-heading);font-size:var(--ndw-font-size-lg);font-weight:700;word-break:break-word}.float{float:right;margin-left:var(--ndw-spacing-sm);transition:transform var(--ndw-animation-speed-fast) ease-in-out}.float.collapsed{transform:rotate(180deg)}\n"] }]
         }], propDecorators: { isCollapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsible", required: false }] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }] } });
 const CARD_COMPONENTS = [
@@ -2585,11 +2585,11 @@ class DashboardCardComponent {
      */
     linkTarget = input('_blank', ...(ngDevMode ? [{ debugName: "linkTarget" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DashboardCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: DashboardCardComponent, isStandalone: true, selector: "ndw-dashboard-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, imgSource: { classPropertyName: "imgSource", publicName: "imgSource", isSignal: true, isRequired: true, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: true, transformFunction: null }, linkTarget: { classPropertyName: "linkTarget", publicName: "linkTarget", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a [href]=\"link()\" [target]=\"linkTarget()\" rel=\"noreferrer noopener\" [title]=\"title()\">\n  <ndw-card class=\"card\">\n    <ndw-card-content class=\"card-content\">\n      <img [src]=\"imgSource()\" [alt]=\"title()\" />\n      <span class=\"ndw-heading-sm title\">{{ title() }}</span>\n      <div class=\"ndw-paragraph-md description\"><ng-content /></div>\n    </ndw-card-content>\n  </ndw-card>\n</a>\n", styles: [":host{display:block}a{text-decoration:none}.card{padding:var(--ndw-spacing-3xl);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:hover{background-color:var(--ndw-color-info-100);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:hover .title{color:var(--ndw-color-info-500);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:active{background-color:var(--ndw-color-info-200);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:active .title{color:var(--ndw-color-info-500);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:active .description{color:var(--ndw-color-grey-700);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card-content{display:flex;flex-direction:column;align-items:center;gap:var(--ndw-spacing-xs)}.card-content img{height:50px;width:50px;object-fit:contain}.card-content .title{text-align:center;color:var(--ndw-color-grey-700);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-content .description{text-align:center;color:var(--ndw-color-grey-500);width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:2;-webkit-line-clamp:2}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "ndw-card", inputs: ["isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: CardContentComponent, selector: "ndw-card-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: DashboardCardComponent, isStandalone: true, selector: "ndw-dashboard-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, imgSource: { classPropertyName: "imgSource", publicName: "imgSource", isSignal: true, isRequired: true, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: true, transformFunction: null }, linkTarget: { classPropertyName: "linkTarget", publicName: "linkTarget", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a [href]=\"link()\" [target]=\"linkTarget()\" rel=\"noreferrer noopener\" [title]=\"title()\">\r\n  <ndw-card class=\"card\">\r\n    <ndw-card-content class=\"card-content\">\r\n      <img [src]=\"imgSource()\" [alt]=\"title()\" />\r\n      <span class=\"ndw-heading-sm title\">{{ title() }}</span>\r\n      <div class=\"ndw-paragraph-md description\"><ng-content /></div>\r\n    </ndw-card-content>\r\n  </ndw-card>\r\n</a>\r\n", styles: [":host{display:block}a{text-decoration:none}.card{padding:var(--ndw-spacing-3xl);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:hover{background-color:var(--ndw-color-info-100);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:hover .title{color:var(--ndw-color-info-500);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:active{background-color:var(--ndw-color-info-200);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:active .title{color:var(--ndw-color-info-500);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:active .description{color:var(--ndw-color-grey-700);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card-content{display:flex;flex-direction:column;align-items:center;gap:var(--ndw-spacing-xs)}.card-content img{height:50px;width:50px;object-fit:contain}.card-content .title{text-align:center;color:var(--ndw-color-grey-700);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-content .description{text-align:center;color:var(--ndw-color-grey-500);width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:2;-webkit-line-clamp:2}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "ndw-card", inputs: ["isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: CardContentComponent, selector: "ndw-card-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DashboardCardComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [CardComponent, CardContentComponent], selector: 'ndw-dashboard-card', template: "<a [href]=\"link()\" [target]=\"linkTarget()\" rel=\"noreferrer noopener\" [title]=\"title()\">\n  <ndw-card class=\"card\">\n    <ndw-card-content class=\"card-content\">\n      <img [src]=\"imgSource()\" [alt]=\"title()\" />\n      <span class=\"ndw-heading-sm title\">{{ title() }}</span>\n      <div class=\"ndw-paragraph-md description\"><ng-content /></div>\n    </ndw-card-content>\n  </ndw-card>\n</a>\n", styles: [":host{display:block}a{text-decoration:none}.card{padding:var(--ndw-spacing-3xl);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:hover{background-color:var(--ndw-color-info-100);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:hover .title{color:var(--ndw-color-info-500);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:active{background-color:var(--ndw-color-info-200);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:active .title{color:var(--ndw-color-info-500);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:active .description{color:var(--ndw-color-grey-700);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card-content{display:flex;flex-direction:column;align-items:center;gap:var(--ndw-spacing-xs)}.card-content img{height:50px;width:50px;object-fit:contain}.card-content .title{text-align:center;color:var(--ndw-color-grey-700);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-content .description{text-align:center;color:var(--ndw-color-grey-500);width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:2;-webkit-line-clamp:2}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [CardComponent, CardContentComponent], selector: 'ndw-dashboard-card', template: "<a [href]=\"link()\" [target]=\"linkTarget()\" rel=\"noreferrer noopener\" [title]=\"title()\">\r\n  <ndw-card class=\"card\">\r\n    <ndw-card-content class=\"card-content\">\r\n      <img [src]=\"imgSource()\" [alt]=\"title()\" />\r\n      <span class=\"ndw-heading-sm title\">{{ title() }}</span>\r\n      <div class=\"ndw-paragraph-md description\"><ng-content /></div>\r\n    </ndw-card-content>\r\n  </ndw-card>\r\n</a>\r\n", styles: [":host{display:block}a{text-decoration:none}.card{padding:var(--ndw-spacing-3xl);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:hover{background-color:var(--ndw-color-info-100);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:hover .title{color:var(--ndw-color-info-500);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:active{background-color:var(--ndw-color-info-200);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:active .title{color:var(--ndw-color-info-500);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:active .description{color:var(--ndw-color-grey-700);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card-content{display:flex;flex-direction:column;align-items:center;gap:var(--ndw-spacing-xs)}.card-content img{height:50px;width:50px;object-fit:contain}.card-content .title{text-align:center;color:var(--ndw-color-grey-700);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-content .description{text-align:center;color:var(--ndw-color-grey-500);width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;line-clamp:2;-webkit-line-clamp:2}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], imgSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgSource", required: true }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: true }] }], linkTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkTarget", required: false }] }] } });
 class DropdownComponent {
@@ -2634,11 +2634,11 @@ class DropdownComponent {
         this.isOpenChange.emit(isOpen);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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      <span ndwButton extra-small tertiary>\n        <ndw-icon class=\"button-icon\">{{ buttonIcon() }}</ndw-icon>\n      </span>\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[filter]{width:100%;display:flex;padding-inline:var(--ndw-spacing-sm)}.button-end{margin-inline-start:auto}.button-end span{padding:0}.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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\r\n  type=\"button\"\r\n  #dropdownButton\r\n  ndwButton\r\n  filter\r\n  [ndwPopoverTrigger]=\"dropdownContent\"\r\n  (isOpenChange)=\"isOpenChanged($event)\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n  [disabled]=\"disabled()\"\r\n  aria-haspopup=\"dialog\"\r\n>\r\n  @if (prefixIcon(); as prefixIconName) {\r\n    <ndw-icon class=\"dropdown-prefix-icon\">{{ prefixIconName }}</ndw-icon>\r\n  }\r\n\r\n  {{ buttonText() }}\r\n\r\n  @if (selectAmount()) {\r\n    <ndw-tag\r\n      [attr.disabled]=\"disabled() ? true : null\"\r\n      (keydown)=\"onTagKeyDown($event)\"\r\n      (clicked)=\"onTagClicked($event)\"\r\n    >\r\n      {{ selectAmount() }}\r\n    </ndw-tag>\r\n  }\r\n  @if (chevron()) {\r\n    <div class=\"button-end\">\r\n      <span ndwButton extra-small tertiary>\r\n        <ndw-icon class=\"button-icon\">{{ buttonIcon() }}</ndw-icon>\r\n      </span>\r\n    </div>\r\n  }\r\n</button>\r\n\r\n<ng-template #dropdownContent>\r\n  <div role=\"dialog\" (keydown.escape)=\"closeDropdown()\">\r\n    <ng-content />\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{display:inline-block}button[filter]{width:100%;display:flex;padding-inline:var(--ndw-spacing-sm)}.button-end{margin-inline-start:auto}.button-end span{padding:0}.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: "21.0.8", 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      <span ndwButton extra-small tertiary>\n        <ndw-icon class=\"button-icon\">{{ buttonIcon() }}</ndw-icon>\n      </span>\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[filter]{width:100%;display:flex;padding-inline:var(--ndw-spacing-sm)}.button-end{margin-inline-start:auto}.button-end span{padding:0}.dropdown-prefix-icon{color:var(--ndw-color-grey-300)}div[role=dialog]{max-height:70vh;display:flex;flex-direction:column}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonDirective, IconComponent, PopoverTriggerDirective, TagComponent], selector: 'ndw-dropdown', template: "<button\r\n  type=\"button\"\r\n  #dropdownButton\r\n  ndwButton\r\n  filter\r\n  [ndwPopoverTrigger]=\"dropdownContent\"\r\n  (isOpenChange)=\"isOpenChanged($event)\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n  [disabled]=\"disabled()\"\r\n  aria-haspopup=\"dialog\"\r\n>\r\n  @if (prefixIcon(); as prefixIconName) {\r\n    <ndw-icon class=\"dropdown-prefix-icon\">{{ prefixIconName }}</ndw-icon>\r\n  }\r\n\r\n  {{ buttonText() }}\r\n\r\n  @if (selectAmount()) {\r\n    <ndw-tag\r\n      [attr.disabled]=\"disabled() ? true : null\"\r\n      (keydown)=\"onTagKeyDown($event)\"\r\n      (clicked)=\"onTagClicked($event)\"\r\n    >\r\n      {{ selectAmount() }}\r\n    </ndw-tag>\r\n  }\r\n  @if (chevron()) {\r\n    <div class=\"button-end\">\r\n      <span ndwButton extra-small tertiary>\r\n        <ndw-icon class=\"button-icon\">{{ buttonIcon() }}</ndw-icon>\r\n      </span>\r\n    </div>\r\n  }\r\n</button>\r\n\r\n<ng-template #dropdownContent>\r\n  <div role=\"dialog\" (keydown.escape)=\"closeDropdown()\">\r\n    <ng-content />\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{display:inline-block}button[filter]{width:100%;display:flex;padding-inline:var(--ndw-spacing-sm)}.button-end{margin-inline-start:auto}.button-end span{padding:0}.dropdown-prefix-icon{color:var(--ndw-color-grey-300)}div[role=dialog]{max-height:70vh;display:flex;flex-direction:column}\n"] }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], chevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevron", required: false }] }], buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: true }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], selectAmount: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAmount", required: false }] }], tagClicked: [{ type: i0.Output, args: ["tagClicked"] }], isOpenChange: [{ type: i0.Output, args: ["isOpenChange"] }], popoverTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverTriggerDirective), { isSignal: true }] }], dropdownButton: [{ type: i0.ViewChild, args: ['dropdownButton', { isSignal: true }] }] } });
 class EditBarComponent {
@@ -2667,45 +2667,45 @@ class EditBarComponent {
         this.#resizeObserver.observe(this.editBar().nativeElement);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: EditBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: EditBarComponent, isStandalone: true, selector: "ndw-edit-bar", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, positionFixedWidth: { classPropertyName: "positionFixedWidth", publicName: "positionFixedWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height": "height() + \"px\"" } }, viewQueries: [{ propertyName: "editBar", first: true, predicate: ["editBar"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #editBar\n  class=\"ndw-edit-bar\"\n  [class.ndw-edit-bar--grid]=\"grid()\"\n  [class.ndw-edit-bar--fixed]=\"position() === 'fixed'\"\n  [class.ndw-edit-bar--absolute]=\"position() === 'absolute'\"\n  [class.ndw-edit-bar--static]=\"position() === 'static'\"\n  [class.ndw-edit-bar--sticky]=\"position() === 'sticky'\"\n  [class.ndw-edit-bar--full-width]=\"positionFixedWidth() === 'full'\"\n  [class.ndw-edit-bar--layout-width]=\"positionFixedWidth() === 'layout'\"\n>\n  @if (grid()) {\n    <div class=\"ndw-grid\">\n      <div class=\"column-12\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      </div>\n    </div>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  }\n</div>\n\n<ng-template #content>\n  <div class=\"ndw-edit-bar__inner\">\n    <ng-content select=\"ndw-edit-bar-message\" />\n    <ng-content select=\"ndw-edit-bar-actions\" />\n  </div>\n</ng-template>\n", styles: [":host:has(.ndw-edit-bar--fixed){display:block;padding-block:var(--ndw-spacing-md)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: EditBarComponent, isStandalone: true, selector: "ndw-edit-bar", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, positionFixedWidth: { classPropertyName: "positionFixedWidth", publicName: "positionFixedWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height": "height() + \"px\"" } }, viewQueries: [{ propertyName: "editBar", first: true, predicate: ["editBar"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  #editBar\r\n  class=\"ndw-edit-bar\"\r\n  [class.ndw-edit-bar--grid]=\"grid()\"\r\n  [class.ndw-edit-bar--fixed]=\"position() === 'fixed'\"\r\n  [class.ndw-edit-bar--absolute]=\"position() === 'absolute'\"\r\n  [class.ndw-edit-bar--static]=\"position() === 'static'\"\r\n  [class.ndw-edit-bar--sticky]=\"position() === 'sticky'\"\r\n  [class.ndw-edit-bar--full-width]=\"positionFixedWidth() === 'full'\"\r\n  [class.ndw-edit-bar--layout-width]=\"positionFixedWidth() === 'layout'\"\r\n>\r\n  @if (grid()) {\r\n    <div class=\"ndw-grid\">\r\n      <div class=\"column-12\">\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n  }\r\n</div>\r\n\r\n<ng-template #content>\r\n  <div class=\"ndw-edit-bar__inner\">\r\n    <ng-content select=\"ndw-edit-bar-message\" />\r\n    <ng-content select=\"ndw-edit-bar-actions\" />\r\n  </div>\r\n</ng-template>\r\n", styles: [":host:has(.ndw-edit-bar--fixed){display:block;padding-block:var(--ndw-spacing-md)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: EditBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndw-edit-bar', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.height]': 'height() + "px"',
-                    }, template: "<div\n  #editBar\n  class=\"ndw-edit-bar\"\n  [class.ndw-edit-bar--grid]=\"grid()\"\n  [class.ndw-edit-bar--fixed]=\"position() === 'fixed'\"\n  [class.ndw-edit-bar--absolute]=\"position() === 'absolute'\"\n  [class.ndw-edit-bar--static]=\"position() === 'static'\"\n  [class.ndw-edit-bar--sticky]=\"position() === 'sticky'\"\n  [class.ndw-edit-bar--full-width]=\"positionFixedWidth() === 'full'\"\n  [class.ndw-edit-bar--layout-width]=\"positionFixedWidth() === 'layout'\"\n>\n  @if (grid()) {\n    <div class=\"ndw-grid\">\n      <div class=\"column-12\">\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      </div>\n    </div>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  }\n</div>\n\n<ng-template #content>\n  <div class=\"ndw-edit-bar__inner\">\n    <ng-content select=\"ndw-edit-bar-message\" />\n    <ng-content select=\"ndw-edit-bar-actions\" />\n  </div>\n</ng-template>\n", styles: [":host:has(.ndw-edit-bar--fixed){display:block;padding-block:var(--ndw-spacing-md)}\n"] }]
+                    }, template: "<div\r\n  #editBar\r\n  class=\"ndw-edit-bar\"\r\n  [class.ndw-edit-bar--grid]=\"grid()\"\r\n  [class.ndw-edit-bar--fixed]=\"position() === 'fixed'\"\r\n  [class.ndw-edit-bar--absolute]=\"position() === 'absolute'\"\r\n  [class.ndw-edit-bar--static]=\"position() === 'static'\"\r\n  [class.ndw-edit-bar--sticky]=\"position() === 'sticky'\"\r\n  [class.ndw-edit-bar--full-width]=\"positionFixedWidth() === 'full'\"\r\n  [class.ndw-edit-bar--layout-width]=\"positionFixedWidth() === 'layout'\"\r\n>\r\n  @if (grid()) {\r\n    <div class=\"ndw-grid\">\r\n      <div class=\"column-12\">\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n  }\r\n</div>\r\n\r\n<ng-template #content>\r\n  <div class=\"ndw-edit-bar__inner\">\r\n    <ng-content select=\"ndw-edit-bar-message\" />\r\n    <ng-content select=\"ndw-edit-bar-actions\" />\r\n  </div>\r\n</ng-template>\r\n", styles: [":host:has(.ndw-edit-bar--fixed){display:block;padding-block:var(--ndw-spacing-md)}\n"] }]
         }], propDecorators: { grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], positionFixedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionFixedWidth", required: false }] }], editBar: [{ type: i0.ViewChild, args: ['editBar', { isSignal: true }] }] } });
 class EditBarActionsComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: EditBarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: EditBarActionsComponent, isStandalone: true, selector: "ndw-edit-bar-actions", host: { classAttribute: "ndw-edit-bar-actions" }, ngImport: i0, template: "<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: EditBarActionsComponent, isStandalone: true, selector: "ndw-edit-bar-actions", host: { classAttribute: "ndw-edit-bar-actions" }, ngImport: i0, template: "<ng-content />\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: EditBarActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndw-edit-bar-actions', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ndw-edit-bar-actions',
-                    }, template: "<ng-content />\n" }]
+                    }, template: "<ng-content />\r\n" }]
         }] });
 class EditBarMessageComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: EditBarMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: EditBarMessageComponent, isStandalone: true, selector: "ndw-edit-bar-message", host: { classAttribute: "ndw-edit-bar-message" }, ngImport: i0, template: "<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: EditBarMessageComponent, isStandalone: true, selector: "ndw-edit-bar-message", host: { classAttribute: "ndw-edit-bar-message" }, ngImport: i0, template: "<ng-content />\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: EditBarMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndw-edit-bar-message', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ndw-edit-bar-message',
-                    }, template: "<ng-content />\n" }]
+                    }, template: "<ng-content />\r\n" }]
         }] });
 class FavoriteComponent {
     checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FavoriteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: FavoriteComponent, isStandalone: true, selector: "ndw-favorite", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<core-favorite [(checked)]=\"checked\">\n  <ndw-icon [filled]=\"checked()\">favorite</ndw-icon>\n</core-favorite>\n", styles: [".input-container:has([ndwInput][error]){background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has(select[ndwInput]){padding-inline-end:var(--ndw-spacing-xs)}.input-container[error]:has([ndwInput]:is(:active,:focus,:focus-visible)){background-color:var(--ndw-color-white)}.input-container[error]:has([ndwInput]:is(:active,:focus,:focus-visible)) select[ndwInput]{background-color:var(--ndw-color-white)}.input-container:has([ndwInput]){display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}.input-container:has([ndwInput]):has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}.input-container:has([ndwInput]):has([ndwInput]:active),.input-container:has([ndwInput]):has([ndwInput]:focus),.input-container:has([ndwInput]):has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}.input-container:has([ndwInput])[success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}.input-container:has([ndwInput])[success]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has([ndwInput])[success]:active,.input-container:has([ndwInput])[success]:focus,.input-container:has([ndwInput])[success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-info-500)}.input-container:has([ndwInput])[error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has([ndwInput])[error] [ndwInput]{background-color:var(--ndw-color-critical-100)}.input-container:has([ndwInput])[error]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has([ndwInput])[error]:active,.input-container:has([ndwInput])[error]:focus,.input-container:has([ndwInput])[error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-info-500)}.input-container:has([ndwInput])[disabled],.input-container:has([ndwInput])[readonly],.input-container:has([ndwInput]):has([ndwInput]:disabled),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);cursor:default}.input-container:has([ndwInput])[disabled]:hover,.input-container:has([ndwInput])[disabled]:has([ndwInput]:hover),.input-container:has([ndwInput])[readonly]:hover,.input-container:has([ndwInput])[readonly]:has([ndwInput]:hover),.input-container:has([ndwInput]):has([ndwInput]:disabled):hover,.input-container:has([ndwInput]):has([ndwInput]:disabled):has([ndwInput]:hover),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])):hover,.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:hover){border-color:var(--ndw-color-grey-300)}.input-container:has([ndwInput])[disabled]:has([ndwInput]:active),.input-container:has([ndwInput])[disabled]:has([ndwInput]:focus),.input-container:has([ndwInput])[disabled]:has([ndwInput]:focus-visible),.input-container:has([ndwInput])[readonly]:has([ndwInput]:active),.input-container:has([ndwInput])[readonly]:has([ndwInput]:focus),.input-container:has([ndwInput])[readonly]:has([ndwInput]:focus-visible),.input-container:has([ndwInput]):has([ndwInput]:disabled):has([ndwInput]:active),.input-container:has([ndwInput]):has([ndwInput]:disabled):has([ndwInput]:focus),.input-container:has([ndwInput]):has([ndwInput]:disabled):has([ndwInput]:focus-visible),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:active),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:focus),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:focus-visible){border-color:var(--ndw-color-grey-300);box-shadow:none;outline-color:transparent}.input-container:has([ndwInput])[disabled] [ndwInput],.input-container:has([ndwInput])[readonly] [ndwInput],.input-container:has([ndwInput]):has([ndwInput]:disabled) [ndwInput],.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100);-webkit-user-select:text;user-select:text}.input-container:has([ndwInput])[disabled] ndw-icon,.input-container:has([ndwInput])[readonly] ndw-icon,.input-container:has([ndwInput]):has([ndwInput]:disabled) ndw-icon,.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500);pointer-events:none}.input-container:has([ndwInput]){gap:var(--ndw-spacing-xs)}.input-container:has([ndwInput]):has(>ndw-input-icon){padding-inline:var(--ndw-spacing-xs)}.input-container:has([ndwInput]):has(>ndw-picker-button){padding-inline-end:var(--ndw-spacing-xs)}.input-container:has([ndwInput])>*:has(~[ndwInput]){color:var(--ndw-color-grey-400)}.input-container:has([ndwInput]) *+[ndwInput]{padding-inline-start:0}.input-container:has([ndwInput]) [ndwInput]:has(+*){padding-inline-end:0}.input-container:has([ndwInput]) [ndwInput]:is(textarea){padding-inline-end:var(--ndw-spacing-sm)}.input-container:has([ndwInput]) select[ndwInput]:has(+*){padding-inline-end:0}.input-container:has([ndwInput]) [ndwInput]{border:none;outline:none}.input-container:has([ndwInput]) [ndwInput]:hover,.input-container:has([ndwInput]) [ndwInput]:active,.input-container:has([ndwInput]) [ndwInput]:focus,.input-container:has([ndwInput]) [ndwInput]:focus-visible{border:none;outline:none}.input-container:has([ndwInput]):has(textarea){padding-inline:0}.input-container:has([ndwInput]) .max-char-counter{background-color:var(--ndw-color-white)}.input-container:has([ndwInput])[success] .max-char-counter{background-color:var(--ndw-color-positive-100)}.input-container:has([ndwInput])[error] .max-char-counter{background-color:var(--ndw-color-critical-100)}[ndwInput]{display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}[ndwInput]:has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}[ndwInput]:has([ndwInput]:active),[ndwInput]:has([ndwInput]:focus),[ndwInput]:has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}[ndwInput][success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}[ndwInput][success]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][success]:active,[ndwInput][success]:focus,[ndwInput][success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-info-500)}[ndwInput][error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}[ndwInput][error] [ndwInput]{background-color:var(--ndw-color-critical-100)}[ndwInput][error]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][error]:active,[ndwInput][error]:focus,[ndwInput][error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-info-500)}[ndwInput][disabled],[ndwInput][readonly],[ndwInput]:has([ndwInput]:disabled),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);cursor:default}[ndwInput][disabled]:hover,[ndwInput][disabled]:has([ndwInput]:hover),[ndwInput][readonly]:hover,[ndwInput][readonly]:has([ndwInput]:hover),[ndwInput]:has([ndwInput]:disabled):hover,[ndwInput]:has([ndwInput]:disabled):has([ndwInput]:hover),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])):hover,[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:hover){border-color:var(--ndw-color-grey-300)}[ndwInput][disabled]:has([ndwInput]:active),[ndwInput][disabled]:has([ndwInput]:focus),[ndwInput][disabled]:has([ndwInput]:focus-visible),[ndwInput][readonly]:has([ndwInput]:active),[ndwInput][readonly]:has([ndwInput]:focus),[ndwInput][readonly]:has([ndwInput]:focus-visible),[ndwInput]:has([ndwInput]:disabled):has([ndwInput]:active),[ndwInput]:has([ndwInput]:disabled):has([ndwInput]:focus),[ndwInput]:has([ndwInput]:disabled):has([ndwInput]:focus-visible),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:active),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:focus),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:focus-visible){border-color:var(--ndw-color-grey-300);box-shadow:none;outline-color:transparent}[ndwInput][disabled] [ndwInput],[ndwInput][readonly] [ndwInput],[ndwInput]:has([ndwInput]:disabled) [ndwInput],[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100);-webkit-user-select:text;user-select:text}[ndwInput][disabled] ndw-icon,[ndwInput][readonly] ndw-icon,[ndwInput]:has([ndwInput]:disabled) ndw-icon,[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput]{width:100%;padding-inline:var(--ndw-spacing-sm);color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);height:var(--ndw-spacing-2xl);line-height:var(--ndw-line-height-md);border-radius:var(--ndw-border-radius-sm);text-overflow:ellipsis;white-space:nowrap}[ndwInput]::placeholder{color:var(--ndw-color-grey-400)}[ndwInput][type=search]::-webkit-search-decoration,[ndwInput][type=search]::-webkit-search-cancel-button,[ndwInput][type=search]::-webkit-search-results-button,[ndwInput][type=search]::-webkit-search-results-decoration{display:none}[ndwInput][type=date]::-webkit-calendar-picker-indicator,[ndwInput][type=datetime-local]::-webkit-calendar-picker-indicator,[ndwInput][type=month]::-webkit-calendar-picker-indicator,[ndwInput][type=time]::-webkit-calendar-picker-indicator,[ndwInput][type=week]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0}select[ndwInput]{appearance:none;cursor:pointer}select[ndwInput][ndw-placeholder],select[ndwInput] option[disabled]{color:var(--ndw-color-grey-400)}select[ndwInput] option:not([disabled]){color:var(--ndw-color-grey-700)}textarea[ndwInput]{min-height:4rem;padding-block:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));padding-inline:var(--ndw-spacing-sm);line-height:normal;white-space:pre-wrap;resize:vertical}:host{color:var(--ndw-color-grey-500);height:fit-content}:host input:focus-visible+label{outline-color:Highlight;outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:1px}:host:hover,:host:has(core-favorite.checked){color:var(--ndw-color-critical-500);transition:color .15s ease-in-out}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: CoreFavoriteComponent, selector: "core-favorite", inputs: ["uuid", "checked"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: FavoriteComponent, isStandalone: true, selector: "ndw-favorite", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<core-favorite [(checked)]=\"checked\">\r\n  <ndw-icon [filled]=\"checked()\">favorite</ndw-icon>\r\n</core-favorite>\r\n", styles: [".input-container:has([ndwInput][error]){background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has(select[ndwInput]){padding-inline-end:var(--ndw-spacing-xs)}.input-container[error]:has([ndwInput]:is(:active,:focus,:focus-visible)){background-color:var(--ndw-color-white)}.input-container[error]:has([ndwInput]:is(:active,:focus,:focus-visible)) select[ndwInput]{background-color:var(--ndw-color-white)}.input-container:has([ndwInput]){display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}.input-container:has([ndwInput]):has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}.input-container:has([ndwInput]):has([ndwInput]:active),.input-container:has([ndwInput]):has([ndwInput]:focus),.input-container:has([ndwInput]):has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}.input-container:has([ndwInput])[success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}.input-container:has([ndwInput])[success]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has([ndwInput])[success]:active,.input-container:has([ndwInput])[success]:focus,.input-container:has([ndwInput])[success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-info-500)}.input-container:has([ndwInput])[error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has([ndwInput])[error] [ndwInput]{background-color:var(--ndw-color-critical-100)}.input-container:has([ndwInput])[error]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has([ndwInput])[error]:active,.input-container:has([ndwInput])[error]:focus,.input-container:has([ndwInput])[error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-info-500)}.input-container:has([ndwInput])[disabled],.input-container:has([ndwInput])[readonly],.input-container:has([ndwInput]):has([ndwInput]:disabled),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);cursor:default}.input-container:has([ndwInput])[disabled]:hover,.input-container:has([ndwInput])[disabled]:has([ndwInput]:hover),.input-container:has([ndwInput])[readonly]:hover,.input-container:has([ndwInput])[readonly]:has([ndwInput]:hover),.input-container:has([ndwInput]):has([ndwInput]:disabled):hover,.input-container:has([ndwInput]):has([ndwInput]:disabled):has([ndwInput]:hover),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])):hover,.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:hover){border-color:var(--ndw-color-grey-300)}.input-container:has([ndwInput])[disabled]:has([ndwInput]:active),.input-container:has([ndwInput])[disabled]:has([ndwInput]:focus),.input-container:has([ndwInput])[disabled]:has([ndwInput]:focus-visible),.input-container:has([ndwInput])[readonly]:has([ndwInput]:active),.input-container:has([ndwInput])[readonly]:has([ndwInput]:focus),.input-container:has([ndwInput])[readonly]:has([ndwInput]:focus-visible),.input-container:has([ndwInput]):has([ndwInput]:disabled):has([ndwInput]:active),.input-container:has([ndwInput]):has([ndwInput]:disabled):has([ndwInput]:focus),.input-container:has([ndwInput]):has([ndwInput]:disabled):has([ndwInput]:focus-visible),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:active),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:focus),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:focus-visible){border-color:var(--ndw-color-grey-300);box-shadow:none;outline-color:transparent}.input-container:has([ndwInput])[disabled] [ndwInput],.input-container:has([ndwInput])[readonly] [ndwInput],.input-container:has([ndwInput]):has([ndwInput]:disabled) [ndwInput],.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100);-webkit-user-select:text;user-select:text}.input-container:has([ndwInput])[disabled] ndw-icon,.input-container:has([ndwInput])[readonly] ndw-icon,.input-container:has([ndwInput]):has([ndwInput]:disabled) ndw-icon,.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500);pointer-events:none}.input-container:has([ndwInput]){gap:var(--ndw-spacing-xs)}.input-container:has([ndwInput]):has(>ndw-input-icon){padding-inline:var(--ndw-spacing-xs)}.input-container:has([ndwInput]):has(>ndw-picker-button){padding-inline-end:var(--ndw-spacing-xs)}.input-container:has([ndwInput])>*:has(~[ndwInput]){color:var(--ndw-color-grey-400)}.input-container:has([ndwInput]) *+[ndwInput]{padding-inline-start:0}.input-container:has([ndwInput]) [ndwInput]:has(+*){padding-inline-end:0}.input-container:has([ndwInput]) [ndwInput]:is(textarea){padding-inline-end:var(--ndw-spacing-sm)}.input-container:has([ndwInput]) select[ndwInput]:has(+*){padding-inline-end:0}.input-container:has([ndwInput]) [ndwInput]{border:none;outline:none}.input-container:has([ndwInput]) [ndwInput]:hover,.input-container:has([ndwInput]) [ndwInput]:active,.input-container:has([ndwInput]) [ndwInput]:focus,.input-container:has([ndwInput]) [ndwInput]:focus-visible{border:none;outline:none}.input-container:has([ndwInput]):has(textarea){padding-inline:0}.input-container:has([ndwInput]) .max-char-counter{background-color:var(--ndw-color-white)}.input-container:has([ndwInput])[success] .max-char-counter{background-color:var(--ndw-color-positive-100)}.input-container:has([ndwInput])[error] .max-char-counter{background-color:var(--ndw-color-critical-100)}[ndwInput]{display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}[ndwInput]:has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}[ndwInput]:has([ndwInput]:active),[ndwInput]:has([ndwInput]:focus),[ndwInput]:has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}[ndwInput][success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}[ndwInput][success]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][success]:active,[ndwInput][success]:focus,[ndwInput][success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-info-500)}[ndwInput][error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}[ndwInput][error] [ndwInput]{background-color:var(--ndw-color-critical-100)}[ndwInput][error]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][error]:active,[ndwInput][error]:focus,[ndwInput][error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-info-500)}[ndwInput][disabled],[ndwInput][readonly],[ndwInput]:has([ndwInput]:disabled),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);cursor:default}[ndwInput][disabled]:hover,[ndwInput][disabled]:has([ndwInput]:hover),[ndwInput][readonly]:hover,[ndwInput][readonly]:has([ndwInput]:hover),[ndwInput]:has([ndwInput]:disabled):hover,[ndwInput]:has([ndwInput]:disabled):has([ndwInput]:hover),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])):hover,[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:hover){border-color:var(--ndw-color-grey-300)}[ndwInput][disabled]:has([ndwInput]:active),[ndwInput][disabled]:has([ndwInput]:focus),[ndwInput][disabled]:has([ndwInput]:focus-visible),[ndwInput][readonly]:has([ndwInput]:active),[ndwInput][readonly]:has([ndwInput]:focus),[ndwInput][readonly]:has([ndwInput]:focus-visible),[ndwInput]:has([ndwInput]:disabled):has([ndwInput]:active),[ndwInput]:has([ndwInput]:disabled):has([ndwInput]:focus),[ndwInput]:has([ndwInput]:disabled):has([ndwInput]:focus-visible),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:active),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:focus),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:focus-visible){border-color:var(--ndw-color-grey-300);box-shadow:none;outline-color:transparent}[ndwInput][disabled] [ndwInput],[ndwInput][readonly] [ndwInput],[ndwInput]:has([ndwInput]:disabled) [ndwInput],[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100);-webkit-user-select:text;user-select:text}[ndwInput][disabled] ndw-icon,[ndwInput][readonly] ndw-icon,[ndwInput]:has([ndwInput]:disabled) ndw-icon,[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput]{width:100%;padding-inline:var(--ndw-spacing-sm);color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);height:var(--ndw-spacing-2xl);line-height:var(--ndw-line-height-md);border-radius:var(--ndw-border-radius-sm);text-overflow:ellipsis;white-space:nowrap}[ndwInput]::placeholder{color:var(--ndw-color-grey-400)}[ndwInput][type=search]::-webkit-search-decoration,[ndwInput][type=search]::-webkit-search-cancel-button,[ndwInput][type=search]::-webkit-search-results-button,[ndwInput][type=search]::-webkit-search-results-decoration{display:none}[ndwInput][type=date]::-webkit-calendar-picker-indicator,[ndwInput][type=datetime-local]::-webkit-calendar-picker-indicator,[ndwInput][type=month]::-webkit-calendar-picker-indicator,[ndwInput][type=time]::-webkit-calendar-picker-indicator,[ndwInput][type=week]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0}select[ndwInput]{appearance:none;cursor:pointer}select[ndwInput][ndw-placeholder],select[ndwInput] option[disabled]{color:var(--ndw-color-grey-400)}select[ndwInput] option:not([disabled]){color:var(--ndw-color-grey-700)}textarea[ndwInput]{min-height:4rem;padding-block:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));padding-inline:var(--ndw-spacing-sm);line-height:normal;white-space:pre-wrap;resize:vertical}:host{color:var(--ndw-color-grey-500);height:fit-content}:host input:focus-visible+label{outline-color:Highlight;outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:1px}:host:hover,:host:has(core-favorite.checked){color:var(--ndw-color-critical-500);transition:color .15s ease-in-out}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: CoreFavoriteComponent, selector: "core-favorite", inputs: ["uuid", "checked"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FavoriteComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, CoreFavoriteComponent], selector: 'ndw-favorite', template: "<core-favorite [(checked)]=\"checked\">\n  <ndw-icon [filled]=\"checked()\">favorite</ndw-icon>\n</core-favorite>\n", styles: [".input-container:has([ndwInput][error]){background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has(select[ndwInput]){padding-inline-end:var(--ndw-spacing-xs)}.input-container[error]:has([ndwInput]:is(:active,:focus,:focus-visible)){background-color:var(--ndw-color-white)}.input-container[error]:has([ndwInput]:is(:active,:focus,:focus-visible)) select[ndwInput]{background-color:var(--ndw-color-white)}.input-container:has([ndwInput]){display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}.input-container:has([ndwInput]):has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}.input-container:has([ndwInput]):has([ndwInput]:active),.input-container:has([ndwInput]):has([ndwInput]:focus),.input-container:has([ndwInput]):has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}.input-container:has([ndwInput])[success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}.input-container:has([ndwInput])[success]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has([ndwInput])[success]:active,.input-container:has([ndwInput])[success]:focus,.input-container:has([ndwInput])[success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-info-500)}.input-container:has([ndwInput])[error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has([ndwInput])[error] [ndwInput]{background-color:var(--ndw-color-critical-100)}.input-container:has([ndwInput])[error]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has([ndwInput])[error]:active,.input-container:has([ndwInput])[error]:focus,.input-container:has([ndwInput])[error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-info-500)}.input-container:has([ndwInput])[disabled],.input-container:has([ndwInput])[readonly],.input-container:has([ndwInput]):has([ndwInput]:disabled),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);cursor:default}.input-container:has([ndwInput])[disabled]:hover,.input-container:has([ndwInput])[disabled]:has([ndwInput]:hover),.input-container:has([ndwInput])[readonly]:hover,.input-container:has([ndwInput])[readonly]:has([ndwInput]:hover),.input-container:has([ndwInput]):has([ndwInput]:disabled):hover,.input-container:has([ndwInput]):has([ndwInput]:disabled):has([ndwInput]:hover),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])):hover,.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:hover){border-color:var(--ndw-color-grey-300)}.input-container:has([ndwInput])[disabled]:has([ndwInput]:active),.input-container:has([ndwInput])[disabled]:has([ndwInput]:focus),.input-container:has([ndwInput])[disabled]:has([ndwInput]:focus-visible),.input-container:has([ndwInput])[readonly]:has([ndwInput]:active),.input-container:has([ndwInput])[readonly]:has([ndwInput]:focus),.input-container:has([ndwInput])[readonly]:has([ndwInput]:focus-visible),.input-container:has([ndwInput]):has([ndwInput]:disabled):has([ndwInput]:active),.input-container:has([ndwInput]):has([ndwInput]:disabled):has([ndwInput]:focus),.input-container:has([ndwInput]):has([ndwInput]:disabled):has([ndwInput]:focus-visible),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:active),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:focus),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:focus-visible){border-color:var(--ndw-color-grey-300);box-shadow:none;outline-color:transparent}.input-container:has([ndwInput])[disabled] [ndwInput],.input-container:has([ndwInput])[readonly] [ndwInput],.input-container:has([ndwInput]):has([ndwInput]:disabled) [ndwInput],.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100);-webkit-user-select:text;user-select:text}.input-container:has([ndwInput])[disabled] ndw-icon,.input-container:has([ndwInput])[readonly] ndw-icon,.input-container:has([ndwInput]):has([ndwInput]:disabled) ndw-icon,.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500);pointer-events:none}.input-container:has([ndwInput]){gap:var(--ndw-spacing-xs)}.input-container:has([ndwInput]):has(>ndw-input-icon){padding-inline:var(--ndw-spacing-xs)}.input-container:has([ndwInput]):has(>ndw-picker-button){padding-inline-end:var(--ndw-spacing-xs)}.input-container:has([ndwInput])>*:has(~[ndwInput]){color:var(--ndw-color-grey-400)}.input-container:has([ndwInput]) *+[ndwInput]{padding-inline-start:0}.input-container:has([ndwInput]) [ndwInput]:has(+*){padding-inline-end:0}.input-container:has([ndwInput]) [ndwInput]:is(textarea){padding-inline-end:var(--ndw-spacing-sm)}.input-container:has([ndwInput]) select[ndwInput]:has(+*){padding-inline-end:0}.input-container:has([ndwInput]) [ndwInput]{border:none;outline:none}.input-container:has([ndwInput]) [ndwInput]:hover,.input-container:has([ndwInput]) [ndwInput]:active,.input-container:has([ndwInput]) [ndwInput]:focus,.input-container:has([ndwInput]) [ndwInput]:focus-visible{border:none;outline:none}.input-container:has([ndwInput]):has(textarea){padding-inline:0}.input-container:has([ndwInput]) .max-char-counter{background-color:var(--ndw-color-white)}.input-container:has([ndwInput])[success] .max-char-counter{background-color:var(--ndw-color-positive-100)}.input-container:has([ndwInput])[error] .max-char-counter{background-color:var(--ndw-color-critical-100)}[ndwInput]{display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}[ndwInput]:has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}[ndwInput]:has([ndwInput]:active),[ndwInput]:has([ndwInput]:focus),[ndwInput]:has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}[ndwInput][success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}[ndwInput][success]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][success]:active,[ndwInput][success]:focus,[ndwInput][success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-info-500)}[ndwInput][error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}[ndwInput][error] [ndwInput]{background-color:var(--ndw-color-critical-100)}[ndwInput][error]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][error]:active,[ndwInput][error]:focus,[ndwInput][error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-info-500)}[ndwInput][disabled],[ndwInput][readonly],[ndwInput]:has([ndwInput]:disabled),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);cursor:default}[ndwInput][disabled]:hover,[ndwInput][disabled]:has([ndwInput]:hover),[ndwInput][readonly]:hover,[ndwInput][readonly]:has([ndwInput]:hover),[ndwInput]:has([ndwInput]:disabled):hover,[ndwInput]:has([ndwInput]:disabled):has([ndwInput]:hover),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])):hover,[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:hover){border-color:var(--ndw-color-grey-300)}[ndwInput][disabled]:has([ndwInput]:active),[ndwInput][disabled]:has([ndwInput]:focus),[ndwInput][disabled]:has([ndwInput]:focus-visible),[ndwInput][readonly]:has([ndwInput]:active),[ndwInput][readonly]:has([ndwInput]:focus),[ndwInput][readonly]:has([ndwInput]:focus-visible),[ndwInput]:has([ndwInput]:disabled):has([ndwInput]:active),[ndwInput]:has([ndwInput]:disabled):has([ndwInput]:focus),[ndwInput]:has([ndwInput]:disabled):has([ndwInput]:focus-visible),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:active),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:focus),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:focus-visible){border-color:var(--ndw-color-grey-300);box-shadow:none;outline-color:transparent}[ndwInput][disabled] [ndwInput],[ndwInput][readonly] [ndwInput],[ndwInput]:has([ndwInput]:disabled) [ndwInput],[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100);-webkit-user-select:text;user-select:text}[ndwInput][disabled] ndw-icon,[ndwInput][readonly] ndw-icon,[ndwInput]:has([ndwInput]:disabled) ndw-icon,[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput]{width:100%;padding-inline:var(--ndw-spacing-sm);color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);height:var(--ndw-spacing-2xl);line-height:var(--ndw-line-height-md);border-radius:var(--ndw-border-radius-sm);text-overflow:ellipsis;white-space:nowrap}[ndwInput]::placeholder{color:var(--ndw-color-grey-400)}[ndwInput][type=search]::-webkit-search-decoration,[ndwInput][type=search]::-webkit-search-cancel-button,[ndwInput][type=search]::-webkit-search-results-button,[ndwInput][type=search]::-webkit-search-results-decoration{display:none}[ndwInput][type=date]::-webkit-calendar-picker-indicator,[ndwInput][type=datetime-local]::-webkit-calendar-picker-indicator,[ndwInput][type=month]::-webkit-calendar-picker-indicator,[ndwInput][type=time]::-webkit-calendar-picker-indicator,[ndwInput][type=week]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0}select[ndwInput]{appearance:none;cursor:pointer}select[ndwInput][ndw-placeholder],select[ndwInput] option[disabled]{color:var(--ndw-color-grey-400)}select[ndwInput] option:not([disabled]){color:var(--ndw-color-grey-700)}textarea[ndwInput]{min-height:4rem;padding-block:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));padding-inline:var(--ndw-spacing-sm);line-height:normal;white-space:pre-wrap;resize:vertical}:host{color:var(--ndw-color-grey-500);height:fit-content}:host input:focus-visible+label{outline-color:Highlight;outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:1px}:host:hover,:host:has(core-favorite.checked){color:var(--ndw-color-critical-500);transition:color .15s ease-in-out}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, CoreFavoriteComponent], selector: 'ndw-favorite', template: "<core-favorite [(checked)]=\"checked\">\r\n  <ndw-icon [filled]=\"checked()\">favorite</ndw-icon>\r\n</core-favorite>\r\n", styles: [".input-container:has([ndwInput][error]){background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has(select[ndwInput]){padding-inline-end:var(--ndw-spacing-xs)}.input-container[error]:has([ndwInput]:is(:active,:focus,:focus-visible)){background-color:var(--ndw-color-white)}.input-container[error]:has([ndwInput]:is(:active,:focus,:focus-visible)) select[ndwInput]{background-color:var(--ndw-color-white)}.input-container:has([ndwInput]){display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}.input-container:has([ndwInput]):has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}.input-container:has([ndwInput]):has([ndwInput]:active),.input-container:has([ndwInput]):has([ndwInput]:focus),.input-container:has([ndwInput]):has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}.input-container:has([ndwInput])[success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}.input-container:has([ndwInput])[success]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has([ndwInput])[success]:active,.input-container:has([ndwInput])[success]:focus,.input-container:has([ndwInput])[success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-info-500)}.input-container:has([ndwInput])[error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}.input-container:has([ndwInput])[error] [ndwInput]{background-color:var(--ndw-color-critical-100)}.input-container:has([ndwInput])[error]:hover{border-color:var(--ndw-color-grey-300)}.input-container:has([ndwInput])[error]:active,.input-container:has([ndwInput])[error]:focus,.input-container:has([ndwInput])[error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-info-500)}.input-container:has([ndwInput])[disabled],.input-container:has([ndwInput])[readonly],.input-container:has([ndwInput]):has([ndwInput]:disabled),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);cursor:default}.input-container:has([ndwInput])[disabled]:hover,.input-container:has([ndwInput])[disabled]:has([ndwInput]:hover),.input-container:has([ndwInput])[readonly]:hover,.input-container:has([ndwInput])[readonly]:has([ndwInput]:hover),.input-container:has([ndwInput]):has([ndwInput]:disabled):hover,.input-container:has([ndwInput]):has([ndwInput]:disabled):has([ndwInput]:hover),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])):hover,.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:hover){border-color:var(--ndw-color-grey-300)}.input-container:has([ndwInput])[disabled]:has([ndwInput]:active),.input-container:has([ndwInput])[disabled]:has([ndwInput]:focus),.input-container:has([ndwInput])[disabled]:has([ndwInput]:focus-visible),.input-container:has([ndwInput])[readonly]:has([ndwInput]:active),.input-container:has([ndwInput])[readonly]:has([ndwInput]:focus),.input-container:has([ndwInput])[readonly]:has([ndwInput]:focus-visible),.input-container:has([ndwInput]):has([ndwInput]:disabled):has([ndwInput]:active),.input-container:has([ndwInput]):has([ndwInput]:disabled):has([ndwInput]:focus),.input-container:has([ndwInput]):has([ndwInput]:disabled):has([ndwInput]:focus-visible),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:active),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:focus),.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:focus-visible){border-color:var(--ndw-color-grey-300);box-shadow:none;outline-color:transparent}.input-container:has([ndwInput])[disabled] [ndwInput],.input-container:has([ndwInput])[readonly] [ndwInput],.input-container:has([ndwInput]):has([ndwInput]:disabled) [ndwInput],.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100);-webkit-user-select:text;user-select:text}.input-container:has([ndwInput])[disabled] ndw-icon,.input-container:has([ndwInput])[readonly] ndw-icon,.input-container:has([ndwInput]):has([ndwInput]:disabled) ndw-icon,.input-container:has([ndwInput]):has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500);pointer-events:none}.input-container:has([ndwInput]){gap:var(--ndw-spacing-xs)}.input-container:has([ndwInput]):has(>ndw-input-icon){padding-inline:var(--ndw-spacing-xs)}.input-container:has([ndwInput]):has(>ndw-picker-button){padding-inline-end:var(--ndw-spacing-xs)}.input-container:has([ndwInput])>*:has(~[ndwInput]){color:var(--ndw-color-grey-400)}.input-container:has([ndwInput]) *+[ndwInput]{padding-inline-start:0}.input-container:has([ndwInput]) [ndwInput]:has(+*){padding-inline-end:0}.input-container:has([ndwInput]) [ndwInput]:is(textarea){padding-inline-end:var(--ndw-spacing-sm)}.input-container:has([ndwInput]) select[ndwInput]:has(+*){padding-inline-end:0}.input-container:has([ndwInput]) [ndwInput]{border:none;outline:none}.input-container:has([ndwInput]) [ndwInput]:hover,.input-container:has([ndwInput]) [ndwInput]:active,.input-container:has([ndwInput]) [ndwInput]:focus,.input-container:has([ndwInput]) [ndwInput]:focus-visible{border:none;outline:none}.input-container:has([ndwInput]):has(textarea){padding-inline:0}.input-container:has([ndwInput]) .max-char-counter{background-color:var(--ndw-color-white)}.input-container:has([ndwInput])[success] .max-char-counter{background-color:var(--ndw-color-positive-100)}.input-container:has([ndwInput])[error] .max-char-counter{background-color:var(--ndw-color-critical-100)}[ndwInput]{display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-radius:var(--ndw-border-radius-sm);box-sizing:border-box;outline:var(--ndw-border-size-sm) solid transparent;outline-offset:calc(var(--ndw-border-size-sm) * -1);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,outline-color .15s ease-in-out}[ndwInput]:has([ndwInput]:hover){border-color:var(--ndw-color-grey-400)}[ndwInput]:has([ndwInput]:active),[ndwInput]:has([ndwInput]:focus),[ndwInput]:has([ndwInput]:focus-visible){border-color:transparent;box-shadow:var(--ndw-elevation-info);outline-color:var(--ndw-color-info-500)}[ndwInput][success]{background-color:var(--ndw-color-positive-100);border-color:var(--ndw-color-positive-500)}[ndwInput][success]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][success]:active,[ndwInput][success]:focus,[ndwInput][success]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-info-500)}[ndwInput][error]{background-color:var(--ndw-color-critical-100);border-color:var(--ndw-color-critical-500)}[ndwInput][error] [ndwInput]{background-color:var(--ndw-color-critical-100)}[ndwInput][error]:hover{border-color:var(--ndw-color-grey-300)}[ndwInput][error]:active,[ndwInput][error]:focus,[ndwInput][error]:focus-visible{background-color:var(--ndw-color-white);border-color:transparent;outline-color:var(--ndw-color-info-500)}[ndwInput][disabled],[ndwInput][readonly],[ndwInput]:has([ndwInput]:disabled),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])){background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-300);color:var(--ndw-color-grey-500);cursor:default}[ndwInput][disabled]:hover,[ndwInput][disabled]:has([ndwInput]:hover),[ndwInput][readonly]:hover,[ndwInput][readonly]:has([ndwInput]:hover),[ndwInput]:has([ndwInput]:disabled):hover,[ndwInput]:has([ndwInput]:disabled):has([ndwInput]:hover),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])):hover,[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:hover){border-color:var(--ndw-color-grey-300)}[ndwInput][disabled]:has([ndwInput]:active),[ndwInput][disabled]:has([ndwInput]:focus),[ndwInput][disabled]:has([ndwInput]:focus-visible),[ndwInput][readonly]:has([ndwInput]:active),[ndwInput][readonly]:has([ndwInput]:focus),[ndwInput][readonly]:has([ndwInput]:focus-visible),[ndwInput]:has([ndwInput]:disabled):has([ndwInput]:active),[ndwInput]:has([ndwInput]:disabled):has([ndwInput]:focus),[ndwInput]:has([ndwInput]:disabled):has([ndwInput]:focus-visible),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:active),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:focus),[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])):has([ndwInput]:focus-visible){border-color:var(--ndw-color-grey-300);box-shadow:none;outline-color:transparent}[ndwInput][disabled] [ndwInput],[ndwInput][readonly] [ndwInput],[ndwInput]:has([ndwInput]:disabled) [ndwInput],[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) [ndwInput]{background-color:var(--ndw-color-grey-100);-webkit-user-select:text;user-select:text}[ndwInput][disabled] ndw-icon,[ndwInput][readonly] ndw-icon,[ndwInput]:has([ndwInput]:disabled) ndw-icon,[ndwInput]:has([ndwInput]:read-only):not(:has(select[ndwInput])) ndw-icon{color:var(--ndw-color-grey-500);pointer-events:none}[ndwInput]{width:100%;padding-inline:var(--ndw-spacing-sm);color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm);height:var(--ndw-spacing-2xl);line-height:var(--ndw-line-height-md);border-radius:var(--ndw-border-radius-sm);text-overflow:ellipsis;white-space:nowrap}[ndwInput]::placeholder{color:var(--ndw-color-grey-400)}[ndwInput][type=search]::-webkit-search-decoration,[ndwInput][type=search]::-webkit-search-cancel-button,[ndwInput][type=search]::-webkit-search-results-button,[ndwInput][type=search]::-webkit-search-results-decoration{display:none}[ndwInput][type=date]::-webkit-calendar-picker-indicator,[ndwInput][type=datetime-local]::-webkit-calendar-picker-indicator,[ndwInput][type=month]::-webkit-calendar-picker-indicator,[ndwInput][type=time]::-webkit-calendar-picker-indicator,[ndwInput][type=week]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0}select[ndwInput]{appearance:none;cursor:pointer}select[ndwInput][ndw-placeholder],select[ndwInput] option[disabled]{color:var(--ndw-color-grey-400)}select[ndwInput] option:not([disabled]){color:var(--ndw-color-grey-700)}textarea[ndwInput]{min-height:4rem;padding-block:calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));padding-inline:var(--ndw-spacing-sm);line-height:normal;white-space:pre-wrap;resize:vertical}:host{color:var(--ndw-color-grey-500);height:fit-content}:host input:focus-visible+label{outline-color:Highlight;outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:1px}:host:hover,:host:has(core-favorite.checked){color:var(--ndw-color-critical-500);transition:color .15s ease-in-out}\n"] }]
         }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
 const BROWSER_STORAGE = new InjectionToken('Browser Storage', {
@@ -3015,22 +3015,22 @@ class HoverableListItemComponent {
         this.selected.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: HoverableListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: HoverableListItemComponent, isStandalone: true, selector: "ndw-hoverable-list-item", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", 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 } }, outputs: { actionSelected: "actionSelected", selected: "selected" }, host: { attributes: { "role": "listitem" } }, ngImport: i0, template: "@if (path(); as path) {\n  <a\n    ndw-list-item\n    class=\"actionable\"\n    [attr.aria-disabled]=\"disabled() || undefined\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    [queryParams]=\"queryParams()\"\n    [routerLink]=\"path\"\n  >\n    <ng-container *ngTemplateOutlet=\"listItem\" />\n  </a>\n} @else {\n  <button\n    ndw-list-item\n    class=\"actionable\"\n    [attr.disabled]=\"disabled() || undefined\"\n    (click)=\"onButtonClick($event)\"\n  >\n    <ng-container *ngTemplateOutlet=\"listItem\" />\n  </button>\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  <div class=\"actions\">\n    @for (action of actions(); track $index) {\n      @if (action.path) {\n        <a\n          ndwButton\n          tertiary\n          extra-small\n          [attr.aria-label]=\"action.label\"\n          [queryParams]=\"action.queryParams\"\n          [routerLink]=\"action.path\"\n          (click)=\"onActionButtonClick($event, action)\"\n        >\n          <ndw-icon>{{ action.icon }}</ndw-icon>\n        </a>\n      } @else {\n        <button\n          ndwButton\n          tertiary\n          extra-small\n          [attr.aria-label]=\"action.label\"\n          (click)=\"onActionButtonClick($event, action)\"\n        >\n          <ndw-icon>{{ action.icon }}</ndw-icon>\n        </button>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["[ndw-list-item]{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}[ndw-list-item]:hover,[ndw-list-item][active]{background-color:var(--list-item-hover-background-color)}[ndw-list-item][disabled],[ndw-list-item][aria-disabled]{color:var(--list-item-disabled-color);pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item]{--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%}[ndw-list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[ndw-list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[ndw-list-item] .actions{display:flex;gap:var(--ndw-spacing-sm);opacity:0;pointer-events:none;transition:opacity var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .actions [ndwButton]{border-radius:50%;padding-inline:var(--ndw-spacing-3xs)}[ndw-list-item] .actions [ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndw-list-item] .actions [ndwButton][disabled]{background-color:transparent;border-color:transparent}[ndw-list-item]:is(:hover,:active,:focus,:focus-within) .actions{opacity:1;pointer-events:auto}[ndw-list-item][disabled] ndw-icon,[ndw-list-item][aria-disabled] ndw-icon{color:var(--list-item-disabled-color)}\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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: HoverableListItemComponent, isStandalone: true, selector: "ndw-hoverable-list-item", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", 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 } }, outputs: { actionSelected: "actionSelected", selected: "selected" }, host: { attributes: { "role": "listitem" } }, ngImport: i0, template: "@if (path(); as path) {\r\n  <a\r\n    ndw-list-item\r\n    class=\"actionable\"\r\n    [attr.aria-disabled]=\"disabled() || undefined\"\r\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n    [queryParams]=\"queryParams()\"\r\n    [routerLink]=\"path\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"listItem\" />\r\n  </a>\r\n} @else {\r\n  <button\r\n    ndw-list-item\r\n    class=\"actionable\"\r\n    [attr.disabled]=\"disabled() || undefined\"\r\n    (click)=\"onButtonClick($event)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"listItem\" />\r\n  </button>\r\n}\r\n\r\n<ng-template #listItem>\r\n  @if (prefixIcon(); as prefix) {\r\n    <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\r\n  }\r\n  <ng-content />\r\n  <div class=\"content\">\r\n    @if (title(); as title) {\r\n      <span class=\"title\">{{ title }}</span>\r\n    }\r\n    @if (subtitle(); as subtitle) {\r\n      {{ subtitle }}\r\n    }\r\n  </div>\r\n  <div class=\"actions\">\r\n    @for (action of actions(); track $index) {\r\n      @if (action.path) {\r\n        <a\r\n          ndwButton\r\n          tertiary\r\n          extra-small\r\n          [attr.aria-label]=\"action.label\"\r\n          [queryParams]=\"action.queryParams\"\r\n          [routerLink]=\"action.path\"\r\n          (click)=\"onActionButtonClick($event, action)\"\r\n        >\r\n          <ndw-icon>{{ action.icon }}</ndw-icon>\r\n        </a>\r\n      } @else {\r\n        <button\r\n          ndwButton\r\n          tertiary\r\n          extra-small\r\n          [attr.aria-label]=\"action.label\"\r\n          (click)=\"onActionButtonClick($event, action)\"\r\n        >\r\n          <ndw-icon>{{ action.icon }}</ndw-icon>\r\n        </button>\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["[ndw-list-item]{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}[ndw-list-item]:hover,[ndw-list-item][active]{background-color:var(--list-item-hover-background-color)}[ndw-list-item][disabled],[ndw-list-item][aria-disabled]{color:var(--list-item-disabled-color);pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item]{--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%}[ndw-list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[ndw-list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[ndw-list-item] .actions{display:flex;gap:var(--ndw-spacing-sm);opacity:0;pointer-events:none;transition:opacity var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .actions [ndwButton]{border-radius:50%;padding-inline:var(--ndw-spacing-3xs)}[ndw-list-item] .actions [ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndw-list-item] .actions [ndwButton][disabled]{background-color:transparent;border-color:transparent}[ndw-list-item]:is(:hover,:active,:focus,:focus-within) .actions{opacity:1;pointer-events:auto}[ndw-list-item][disabled] ndw-icon,[ndw-list-item][aria-disabled] ndw-icon{color:var(--list-item-disabled-color)}\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: "21.0.8", ngImport: i0, type: HoverableListItemComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         role: 'listitem',
-                    }, imports: [IconComponent, NgTemplateOutlet, RouterLink], selector: 'ndw-hoverable-list-item', template: "@if (path(); as path) {\n  <a\n    ndw-list-item\n    class=\"actionable\"\n    [attr.aria-disabled]=\"disabled() || undefined\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    [queryParams]=\"queryParams()\"\n    [routerLink]=\"path\"\n  >\n    <ng-container *ngTemplateOutlet=\"listItem\" />\n  </a>\n} @else {\n  <button\n    ndw-list-item\n    class=\"actionable\"\n    [attr.disabled]=\"disabled() || undefined\"\n    (click)=\"onButtonClick($event)\"\n  >\n    <ng-container *ngTemplateOutlet=\"listItem\" />\n  </button>\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  <div class=\"actions\">\n    @for (action of actions(); track $index) {\n      @if (action.path) {\n        <a\n          ndwButton\n          tertiary\n          extra-small\n          [attr.aria-label]=\"action.label\"\n          [queryParams]=\"action.queryParams\"\n          [routerLink]=\"action.path\"\n          (click)=\"onActionButtonClick($event, action)\"\n        >\n          <ndw-icon>{{ action.icon }}</ndw-icon>\n        </a>\n      } @else {\n        <button\n          ndwButton\n          tertiary\n          extra-small\n          [attr.aria-label]=\"action.label\"\n          (click)=\"onActionButtonClick($event, action)\"\n        >\n          <ndw-icon>{{ action.icon }}</ndw-icon>\n        </button>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["[ndw-list-item]{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}[ndw-list-item]:hover,[ndw-list-item][active]{background-color:var(--list-item-hover-background-color)}[ndw-list-item][disabled],[ndw-list-item][aria-disabled]{color:var(--list-item-disabled-color);pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item]{--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%}[ndw-list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[ndw-list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[ndw-list-item] .actions{display:flex;gap:var(--ndw-spacing-sm);opacity:0;pointer-events:none;transition:opacity var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .actions [ndwButton]{border-radius:50%;padding-inline:var(--ndw-spacing-3xs)}[ndw-list-item] .actions [ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndw-list-item] .actions [ndwButton][disabled]{background-color:transparent;border-color:transparent}[ndw-list-item]:is(:hover,:active,:focus,:focus-within) .actions{opacity:1;pointer-events:auto}[ndw-list-item][disabled] ndw-icon,[ndw-list-item][aria-disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"] }]
+                    }, imports: [IconComponent, NgTemplateOutlet, RouterLink], selector: 'ndw-hoverable-list-item', template: "@if (path(); as path) {\r\n  <a\r\n    ndw-list-item\r\n    class=\"actionable\"\r\n    [attr.aria-disabled]=\"disabled() || undefined\"\r\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n    [queryParams]=\"queryParams()\"\r\n    [routerLink]=\"path\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"listItem\" />\r\n  </a>\r\n} @else {\r\n  <button\r\n    ndw-list-item\r\n    class=\"actionable\"\r\n    [attr.disabled]=\"disabled() || undefined\"\r\n    (click)=\"onButtonClick($event)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"listItem\" />\r\n  </button>\r\n}\r\n\r\n<ng-template #listItem>\r\n  @if (prefixIcon(); as prefix) {\r\n    <ndw-icon class=\"affix\">{{ prefix }}</ndw-icon>\r\n  }\r\n  <ng-content />\r\n  <div class=\"content\">\r\n    @if (title(); as title) {\r\n      <span class=\"title\">{{ title }}</span>\r\n    }\r\n    @if (subtitle(); as subtitle) {\r\n      {{ subtitle }}\r\n    }\r\n  </div>\r\n  <div class=\"actions\">\r\n    @for (action of actions(); track $index) {\r\n      @if (action.path) {\r\n        <a\r\n          ndwButton\r\n          tertiary\r\n          extra-small\r\n          [attr.aria-label]=\"action.label\"\r\n          [queryParams]=\"action.queryParams\"\r\n          [routerLink]=\"action.path\"\r\n          (click)=\"onActionButtonClick($event, action)\"\r\n        >\r\n          <ndw-icon>{{ action.icon }}</ndw-icon>\r\n        </a>\r\n      } @else {\r\n        <button\r\n          ndwButton\r\n          tertiary\r\n          extra-small\r\n          [attr.aria-label]=\"action.label\"\r\n          (click)=\"onActionButtonClick($event, action)\"\r\n        >\r\n          <ndw-icon>{{ action.icon }}</ndw-icon>\r\n        </button>\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["[ndw-list-item]{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}[ndw-list-item]:hover,[ndw-list-item][active]{background-color:var(--list-item-hover-background-color)}[ndw-list-item][disabled],[ndw-list-item][aria-disabled]{color:var(--list-item-disabled-color);pointer-events:none;-webkit-user-select:none;user-select:none}[ndw-list-item]{--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%}[ndw-list-item] .affix{color:var(--ndw-color-primary);transition:transform var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .content{display:grid;justify-content:stretch;text-align:left;width:100%}[ndw-list-item] .content .title{font-weight:var(--ndw-font-weight-bold)}[ndw-list-item] .actions{display:flex;gap:var(--ndw-spacing-sm);opacity:0;pointer-events:none;transition:opacity var(--list-item-animation-speed) ease-in-out}[ndw-list-item] .actions [ndwButton]{border-radius:50%;padding-inline:var(--ndw-spacing-3xs)}[ndw-list-item] .actions [ndwButton] ndw-icon{font-size:var(--ndw-spacing-md)}[ndw-list-item] .actions [ndwButton][disabled]{background-color:transparent;border-color:transparent}[ndw-list-item]:is(:hover,:active,:focus,:focus-within) .actions{opacity:1;pointer-events:auto}[ndw-list-item][disabled] ndw-icon,[ndw-list-item][aria-disabled] ndw-icon{color:var(--list-item-disabled-color)}\n"] }]
         }], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], actionSelected: [{ type: i0.Output, args: ["actionSelected"] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 class KeyValueListComponent extends CoreKeyValueListComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: KeyValueListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: KeyValueListComponent, isStandalone: true, selector: "ndw-key-value-list", usesInheritance: true, ngImport: i0, template: "<dl\n  [class.striped]=\"hasZebraStripes()\"\n  [class.fluid]=\"fluid()\"\n  [class.font-md]=\"fontSize() === 'md'\"\n  [class.font-lg]=\"fontSize() === 'lg'\"\n>\n  @for (keyValueRow of normalizedData(); track keyValueRow.key) {\n    <dt>\n      <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.key }\" />\n    </dt>\n    <dd>\n      <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.value }\" />\n    </dd>\n  }\n</dl>\n\n<ng-template #cellData let-data>\n  @if (data.url) {\n    <a ndwLink target=\"_blank\" [href]=\"data.url\">\n      {{ data.label }}\n      <ndw-icon size=\"sm\">open_in_new</ndw-icon>\n    </a>\n  } @else {\n    {{ data.label }}\n  }\n\n  @if (data.tooltip) {\n    <ndw-icon class=\"tooltip-icon\" size=\"sm\" [ndwTooltip]=\"data.tooltip\">info</ndw-icon>\n  }\n</ng-template>\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl{display:grid;width:fit-content;grid-template-columns:auto auto;margin:0}dl dt,dl dd{display:flex;align-items:center;gap:var(--ndw-spacing-2xs);padding-block:var(--ndw-spacing-xs);margin:0}dl dt .tooltip-icon,dl dd .tooltip-icon{color:var(--ndw-color-info-500)}dl dt{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;padding-inline-end:var(--ndw-spacing-2xs)}dl dd{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-inline-start:var(--ndw-spacing-2xs)}dl.font-md dt{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}dl.font-md dd{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl.font-lg dt{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}dl.font-lg dd{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl.striped dt{padding-inline-start:var(--ndw-spacing-xs)}dl.striped dd{padding-inline-end:var(--ndw-spacing-xs)}dl.striped dt:nth-child(4n+1),dl.striped dd:nth-child(4n+2){background-color:var(--ndw-color-grey-100)}dl.fluid{width:100%}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip", "ndwTooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: KeyValueListComponent, isStandalone: true, selector: "ndw-key-value-list", usesInheritance: true, ngImport: i0, template: "<dl\r\n  [class.striped]=\"hasZebraStripes()\"\r\n  [class.fluid]=\"fluid()\"\r\n  [class.font-md]=\"fontSize() === 'md'\"\r\n  [class.font-lg]=\"fontSize() === 'lg'\"\r\n>\r\n  @for (keyValueRow of normalizedData(); track keyValueRow.key) {\r\n    <dt>\r\n      <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.key }\" />\r\n    </dt>\r\n    <dd>\r\n      <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.value }\" />\r\n    </dd>\r\n  }\r\n</dl>\r\n\r\n<ng-template #cellData let-data>\r\n  @if (data.url) {\r\n    <a ndwLink target=\"_blank\" [href]=\"data.url\">\r\n      {{ data.label }}\r\n      <ndw-icon size=\"sm\">open_in_new</ndw-icon>\r\n    </a>\r\n  } @else {\r\n    {{ data.label }}\r\n  }\r\n\r\n  @if (data.tooltip) {\r\n    <ndw-icon class=\"tooltip-icon\" size=\"sm\" [ndwTooltip]=\"data.tooltip\">info</ndw-icon>\r\n  }\r\n</ng-template>\r\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl{display:grid;width:fit-content;grid-template-columns:auto auto;margin:0}dl dt,dl dd{display:flex;align-items:center;gap:var(--ndw-spacing-2xs);padding-block:var(--ndw-spacing-xs);margin:0}dl dt .tooltip-icon,dl dd .tooltip-icon{color:var(--ndw-color-info-500)}dl dt{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;padding-inline-end:var(--ndw-spacing-2xs)}dl dd{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-inline-start:var(--ndw-spacing-2xs)}dl.font-md dt{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}dl.font-md dd{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl.font-lg dt{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}dl.font-lg dd{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl.striped dt{padding-inline-start:var(--ndw-spacing-xs)}dl.striped dd{padding-inline-end:var(--ndw-spacing-xs)}dl.striped dt:nth-child(4n+1),dl.striped dd:nth-child(4n+2){background-color:var(--ndw-color-grey-100)}dl.fluid{width:100%}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip", "ndwTooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: KeyValueListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndw-key-value-list', imports: [IconComponent, NgTemplateOutlet, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dl\n  [class.striped]=\"hasZebraStripes()\"\n  [class.fluid]=\"fluid()\"\n  [class.font-md]=\"fontSize() === 'md'\"\n  [class.font-lg]=\"fontSize() === 'lg'\"\n>\n  @for (keyValueRow of normalizedData(); track keyValueRow.key) {\n    <dt>\n      <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.key }\" />\n    </dt>\n    <dd>\n      <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.value }\" />\n    </dd>\n  }\n</dl>\n\n<ng-template #cellData let-data>\n  @if (data.url) {\n    <a ndwLink target=\"_blank\" [href]=\"data.url\">\n      {{ data.label }}\n      <ndw-icon size=\"sm\">open_in_new</ndw-icon>\n    </a>\n  } @else {\n    {{ data.label }}\n  }\n\n  @if (data.tooltip) {\n    <ndw-icon class=\"tooltip-icon\" size=\"sm\" [ndwTooltip]=\"data.tooltip\">info</ndw-icon>\n  }\n</ng-template>\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl{display:grid;width:fit-content;grid-template-columns:auto auto;margin:0}dl dt,dl dd{display:flex;align-items:center;gap:var(--ndw-spacing-2xs);padding-block:var(--ndw-spacing-xs);margin:0}dl dt .tooltip-icon,dl dd .tooltip-icon{color:var(--ndw-color-info-500)}dl dt{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;padding-inline-end:var(--ndw-spacing-2xs)}dl dd{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-inline-start:var(--ndw-spacing-2xs)}dl.font-md dt{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}dl.font-md dd{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl.font-lg dt{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}dl.font-lg dd{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl.striped dt{padding-inline-start:var(--ndw-spacing-xs)}dl.striped dd{padding-inline-end:var(--ndw-spacing-xs)}dl.striped dt:nth-child(4n+1),dl.striped dd:nth-child(4n+2){background-color:var(--ndw-color-grey-100)}dl.fluid{width:100%}\n"] }]
+            args: [{ selector: 'ndw-key-value-list', imports: [IconComponent, NgTemplateOutlet, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dl\r\n  [class.striped]=\"hasZebraStripes()\"\r\n  [class.fluid]=\"fluid()\"\r\n  [class.font-md]=\"fontSize() === 'md'\"\r\n  [class.font-lg]=\"fontSize() === 'lg'\"\r\n>\r\n  @for (keyValueRow of normalizedData(); track keyValueRow.key) {\r\n    <dt>\r\n      <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.key }\" />\r\n    </dt>\r\n    <dd>\r\n      <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.value }\" />\r\n    </dd>\r\n  }\r\n</dl>\r\n\r\n<ng-template #cellData let-data>\r\n  @if (data.url) {\r\n    <a ndwLink target=\"_blank\" [href]=\"data.url\">\r\n      {{ data.label }}\r\n      <ndw-icon size=\"sm\">open_in_new</ndw-icon>\r\n    </a>\r\n  } @else {\r\n    {{ data.label }}\r\n  }\r\n\r\n  @if (data.tooltip) {\r\n    <ndw-icon class=\"tooltip-icon\" size=\"sm\" [ndwTooltip]=\"data.tooltip\">info</ndw-icon>\r\n  }\r\n</ng-template>\r\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl{display:grid;width:fit-content;grid-template-columns:auto auto;margin:0}dl dt,dl dd{display:flex;align-items:center;gap:var(--ndw-spacing-2xs);padding-block:var(--ndw-spacing-xs);margin:0}dl dt .tooltip-icon,dl dd .tooltip-icon{color:var(--ndw-color-info-500)}dl dt{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;padding-inline-end:var(--ndw-spacing-2xs)}dl dd{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-inline-start:var(--ndw-spacing-2xs)}dl.font-md dt{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}dl.font-md dd{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl.font-lg dt{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}dl.font-lg dd{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl.striped dt{padding-inline-start:var(--ndw-spacing-xs)}dl.striped dd{padding-inline-end:var(--ndw-spacing-xs)}dl.striped dt:nth-child(4n+1),dl.striped dd:nth-child(4n+2){background-color:var(--ndw-color-grey-100)}dl.fluid{width:100%}\n"] }]
         }] });
 const LANGUAGE_FLAGS = {
@@ -3068,11 +3068,11 @@ class LanguageSwitcherComponent {
         this.selected.set(lang);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LanguageSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: LanguageSwitcherComponent, isStandalone: true, selector: "ndw-language-switcher", inputs: { languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, ngImport: i0, template: "<button type=\"button\" class=\"flag-trigger\" [ndwPopoverTrigger]=\"languageList\">\n  <img class=\"flag\" [src]=\"flagSrc(selected())\" [alt]=\"selected()\" />\n  @if (labelFor(selected()); as label) {\n    <span class=\"label\">{{ label }}</span>\n  }\n</button>\n\n<ng-template #languageList>\n  @for (lang of languages(); track lang) {\n    <button\n      type=\"button\"\n      class=\"language-option\"\n      [class.active]=\"selected() === lang\"\n      ndwPopoverCloseTrigger\n      (click)=\"selectLanguage(lang)\"\n    >\n      <img class=\"flag\" [src]=\"flagSrc(lang)\" [alt]=\"lang\" />\n      @if (labelFor(lang); as label) {\n        <span class=\"label\">{{ label }}</span>\n      }\n    </button>\n  }\n</ng-template>\n", styles: [".flag-trigger,.language-option{display:flex;align-items:center;gap:var(--ndw-spacing-2xs);padding:var(--ndw-spacing-2xs);border:none;background:transparent;border-radius:var(--ndw-border-radius-sm);font-size:var(--ndw-font-size-sm)}.flag-trigger:hover,.language-option:hover{background-color:var(--ndw-color-grey-100)}.language-option{gap:var(--ndw-spacing-xs);padding:var(--ndw-spacing-xs) var(--ndw-spacing-sm)}.language-option.active{color:var(--ndw-color-primary-500);font-weight:var(--ndw-font-weight-bold)}.flag{width:20px;height:20px}\n"], dependencies: [{ kind: "directive", type: PopoverTriggerDirective, selector: "[ndwPopoverTrigger]", inputs: ["popoverPosition", "ndwPopoverTrigger", "toggleOnClick", "isOpen"], outputs: ["popoverToggled", "isOpenChange"], exportAs: ["ndwPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: LanguageSwitcherComponent, isStandalone: true, selector: "ndw-language-switcher", inputs: { languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, ngImport: i0, template: "<button type=\"button\" class=\"flag-trigger\" [ndwPopoverTrigger]=\"languageList\">\r\n  <img class=\"flag\" [src]=\"flagSrc(selected())\" [alt]=\"selected()\" />\r\n  @if (labelFor(selected()); as label) {\r\n    <span class=\"label\">{{ label }}</span>\r\n  }\r\n</button>\r\n\r\n<ng-template #languageList>\r\n  @for (lang of languages(); track lang) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"language-option\"\r\n      [class.active]=\"selected() === lang\"\r\n      ndwPopoverCloseTrigger\r\n      (click)=\"selectLanguage(lang)\"\r\n    >\r\n      <img class=\"flag\" [src]=\"flagSrc(lang)\" [alt]=\"lang\" />\r\n      @if (labelFor(lang); as label) {\r\n        <span class=\"label\">{{ label }}</span>\r\n      }\r\n    </button>\r\n  }\r\n</ng-template>\r\n", styles: [".flag-trigger,.language-option{display:flex;align-items:center;gap:var(--ndw-spacing-2xs);padding:var(--ndw-spacing-2xs);border:none;background:transparent;border-radius:var(--ndw-border-radius-sm);font-size:var(--ndw-font-size-sm)}.flag-trigger:hover,.language-option:hover{background-color:var(--ndw-color-grey-100)}.language-option{gap:var(--ndw-spacing-xs);padding:var(--ndw-spacing-xs) var(--ndw-spacing-sm)}.language-option.active{color:var(--ndw-color-primary-500);font-weight:var(--ndw-font-weight-bold)}.flag{width:20px;height:20px}\n"], dependencies: [{ kind: "directive", type: PopoverTriggerDirective, selector: "[ndwPopoverTrigger]", inputs: ["popoverPosition", "ndwPopoverTrigger", "toggleOnClick", "isOpen"], outputs: ["popoverToggled", "isOpenChange"], exportAs: ["ndwPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LanguageSwitcherComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndw-language-switcher', imports: [PopoverTriggerDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" class=\"flag-trigger\" [ndwPopoverTrigger]=\"languageList\">\n  <img class=\"flag\" [src]=\"flagSrc(selected())\" [alt]=\"selected()\" />\n  @if (labelFor(selected()); as label) {\n    <span class=\"label\">{{ label }}</span>\n  }\n</button>\n\n<ng-template #languageList>\n  @for (lang of languages(); track lang) {\n    <button\n      type=\"button\"\n      class=\"language-option\"\n      [class.active]=\"selected() === lang\"\n      ndwPopoverCloseTrigger\n      (click)=\"selectLanguage(lang)\"\n    >\n      <img class=\"flag\" [src]=\"flagSrc(lang)\" [alt]=\"lang\" />\n      @if (labelFor(lang); as label) {\n        <span class=\"label\">{{ label }}</span>\n      }\n    </button>\n  }\n</ng-template>\n", styles: [".flag-trigger,.language-option{display:flex;align-items:center;gap:var(--ndw-spacing-2xs);padding:var(--ndw-spacing-2xs);border:none;background:transparent;border-radius:var(--ndw-border-radius-sm);font-size:var(--ndw-font-size-sm)}.flag-trigger:hover,.language-option:hover{background-color:var(--ndw-color-grey-100)}.language-option{gap:var(--ndw-spacing-xs);padding:var(--ndw-spacing-xs) var(--ndw-spacing-sm)}.language-option.active{color:var(--ndw-color-primary-500);font-weight:var(--ndw-font-weight-bold)}.flag{width:20px;height:20px}\n"] }]
+            args: [{ selector: 'ndw-language-switcher', imports: [PopoverTriggerDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" class=\"flag-trigger\" [ndwPopoverTrigger]=\"languageList\">\r\n  <img class=\"flag\" [src]=\"flagSrc(selected())\" [alt]=\"selected()\" />\r\n  @if (labelFor(selected()); as label) {\r\n    <span class=\"label\">{{ label }}</span>\r\n  }\r\n</button>\r\n\r\n<ng-template #languageList>\r\n  @for (lang of languages(); track lang) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"language-option\"\r\n      [class.active]=\"selected() === lang\"\r\n      ndwPopoverCloseTrigger\r\n      (click)=\"selectLanguage(lang)\"\r\n    >\r\n      <img class=\"flag\" [src]=\"flagSrc(lang)\" [alt]=\"lang\" />\r\n      @if (labelFor(lang); as label) {\r\n        <span class=\"label\">{{ label }}</span>\r\n      }\r\n    </button>\r\n  }\r\n</ng-template>\r\n", styles: [".flag-trigger,.language-option{display:flex;align-items:center;gap:var(--ndw-spacing-2xs);padding:var(--ndw-spacing-2xs);border:none;background:transparent;border-radius:var(--ndw-border-radius-sm);font-size:var(--ndw-font-size-sm)}.flag-trigger:hover,.language-option:hover{background-color:var(--ndw-color-grey-100)}.language-option{gap:var(--ndw-spacing-xs);padding:var(--ndw-spacing-xs) var(--ndw-spacing-sm)}.language-option.active{color:var(--ndw-color-primary-500);font-weight:var(--ndw-font-weight-bold)}.flag{width:20px;height:20px}\n"] }]
         }], propDecorators: { languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }] } });
 class MainNavigationHeaderComponent {
@@ -3099,11 +3099,11 @@ class MainNavigationHeaderComponent {
         this.isMobileMenuOpen.update((open) => !open);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MainNavigationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MainNavigationHeaderComponent, isStandalone: true, selector: "ndw-main-navigation-header", inputs: { applicationName: { classPropertyName: "applicationName", publicName: "applicationName", 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 }, 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() && !isMobile()\">\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()?.charAt(0) : environment() }}\n    </ndw-pill>\n  }\n  @if (isMobile()) {\n    <button ndwButton tertiary class=\"mobile-menu-button\" (click)=\"toggleMobileMenu()\">\n      <ndw-icon>\n        {{ isMobileMenuOpen() ? 'close' : 'menu' }}\n      </ndw-icon>\n    </button>\n  }\n</header>\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}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;overflow:hidden;gap:var(--ndw-spacing-md);margin-bottom:var(--ndw-spacing-md);padding-inline:0;position:relative;padding-top:var(--ndw-spacing-lg)}header a{color:var(--ndw-color-primary-400);display:flex;flex-direction:column;gap:var(--ndw-spacing-xs);letter-spacing:var(--ndw-letter-spacing-sm);font-weight:700;text-decoration:none;text-transform:uppercase}header a img{width:1rem}header ndw-pill{width:fit-content}header .mobile-menu-button{top:0;height:fit-content;padding:0;position:absolute;right:var(--ndw-spacing-sm);text-transform:uppercase}header .mobile-menu-button ndw-icon{font-size:var(--ndw-font-size-lg);color:var(--ndw-color-primary-400)}header.expanded{align-items:flex-start;padding-inline:var(--ndw-spacing-lg)}header.expanded a img{width:4rem}header.expanded a img.nwb{width:6rem}@media screen and (max-width:1024px){header{flex-direction:row;align-items:center;padding-inline:var(--ndw-spacing-md);margin-bottom:0}header.expanded{align-items:center}header.expanded a img{width:var(--ndw-spacing-md)}header.expanded.nwb{width:var(--ndw-spacing-md)}header a{flex-direction:row;letter-spacing:var(--ndw-letter-spacing-sm);line-height:150%;gap:var(--ndw-spacing-md)}header a img{width:var(--ndw-spacing-md)}header a img.nwb{width:var(--ndw-spacing-md)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: PillComponent, selector: "ndw-pill" }, { 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: "21.0.8", type: MainNavigationHeaderComponent, isStandalone: true, selector: "ndw-main-navigation-header", inputs: { applicationName: { classPropertyName: "applicationName", publicName: "applicationName", 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 }, 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() && !isMobile()\">\r\n  <a routerLink=\"/\">\r\n    <img [class]=\"theme()\" [src]=\"themeImagePath()\" [alt]=\"theme().toUpperCase() + ' logo'\" />\r\n    @if (isExpanded() || isMobile()) {\r\n      {{ applicationName() }}\r\n    }\r\n  </a>\r\n  @if (environment()) {\r\n    <ndw-pill [color]=\"environmentColor()\">\r\n      {{ !isExpanded() || isMobile() ? environment()?.charAt(0) : environment() }}\r\n    </ndw-pill>\r\n  }\r\n  @if (isMobile()) {\r\n    <button ndwButton tertiary class=\"mobile-menu-button\" (click)=\"toggleMobileMenu()\">\r\n      <ndw-icon>\r\n        {{ isMobileMenuOpen() ? 'close' : 'menu' }}\r\n      </ndw-icon>\r\n    </button>\r\n  }\r\n</header>\r\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}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;overflow:hidden;gap:var(--ndw-spacing-md);margin-bottom:var(--ndw-spacing-md);padding-inline:0;position:relative;padding-top:var(--ndw-spacing-lg)}header a{color:var(--ndw-color-primary-400);display:flex;flex-direction:column;gap:var(--ndw-spacing-xs);letter-spacing:var(--ndw-letter-spacing-sm);font-weight:700;text-decoration:none;text-transform:uppercase}header a img{width:1rem}header ndw-pill{width:fit-content}header .mobile-menu-button{top:var(--ndw-spacing-md);height:fit-content;padding:0;position:absolute;right:var(--ndw-spacing-sm);text-transform:uppercase}header .mobile-menu-button ndw-icon{font-size:var(--ndw-font-size-lg);color:var(--ndw-color-primary-400)}header.expanded{align-items:flex-start;padding-inline:var(--ndw-spacing-lg)}header.expanded a img{width:4rem}header.expanded a img.nwb{width:6rem}@media screen and (max-width:1024px){header{flex-direction:row;align-items:center;padding-inline:var(--ndw-spacing-md);padding-top:0;height:var(--main-navigation-mobile-header-height);margin-bottom:0}header.expanded{align-items:center}header.expanded a img{width:var(--ndw-spacing-md)}header.expanded.nwb{width:var(--ndw-spacing-md)}header a{flex-direction:row;letter-spacing:var(--ndw-letter-spacing-sm);line-height:150%;gap:var(--ndw-spacing-md)}header a img{width:var(--ndw-spacing-md)}header a img.nwb{width:var(--ndw-spacing-md)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: PillComponent, selector: "ndw-pill" }, { 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: "21.0.8", 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() && !isMobile()\">\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()?.charAt(0) : environment() }}\n    </ndw-pill>\n  }\n  @if (isMobile()) {\n    <button ndwButton tertiary class=\"mobile-menu-button\" (click)=\"toggleMobileMenu()\">\n      <ndw-icon>\n        {{ isMobileMenuOpen() ? 'close' : 'menu' }}\n      </ndw-icon>\n    </button>\n  }\n</header>\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}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;overflow:hidden;gap:var(--ndw-spacing-md);margin-bottom:var(--ndw-spacing-md);padding-inline:0;position:relative;padding-top:var(--ndw-spacing-lg)}header a{color:var(--ndw-color-primary-400);display:flex;flex-direction:column;gap:var(--ndw-spacing-xs);letter-spacing:var(--ndw-letter-spacing-sm);font-weight:700;text-decoration:none;text-transform:uppercase}header a img{width:1rem}header ndw-pill{width:fit-content}header .mobile-menu-button{top:0;height:fit-content;padding:0;position:absolute;right:var(--ndw-spacing-sm);text-transform:uppercase}header .mobile-menu-button ndw-icon{font-size:var(--ndw-font-size-lg);color:var(--ndw-color-primary-400)}header.expanded{align-items:flex-start;padding-inline:var(--ndw-spacing-lg)}header.expanded a img{width:4rem}header.expanded a img.nwb{width:6rem}@media screen and (max-width:1024px){header{flex-direction:row;align-items:center;padding-inline:var(--ndw-spacing-md);margin-bottom:0}header.expanded{align-items:center}header.expanded a img{width:var(--ndw-spacing-md)}header.expanded.nwb{width:var(--ndw-spacing-md)}header a{flex-direction:row;letter-spacing:var(--ndw-letter-spacing-sm);line-height:150%;gap:var(--ndw-spacing-md)}header a img{width:var(--ndw-spacing-md)}header a img.nwb{width:var(--ndw-spacing-md)}}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, PillComponent, RouterLink], selector: 'ndw-main-navigation-header', template: "<header [class.expanded]=\"isExpanded() && !isMobile()\">\r\n  <a routerLink=\"/\">\r\n    <img [class]=\"theme()\" [src]=\"themeImagePath()\" [alt]=\"theme().toUpperCase() + ' logo'\" />\r\n    @if (isExpanded() || isMobile()) {\r\n      {{ applicationName() }}\r\n    }\r\n  </a>\r\n  @if (environment()) {\r\n    <ndw-pill [color]=\"environmentColor()\">\r\n      {{ !isExpanded() || isMobile() ? environment()?.charAt(0) : environment() }}\r\n    </ndw-pill>\r\n  }\r\n  @if (isMobile()) {\r\n    <button ndwButton tertiary class=\"mobile-menu-button\" (click)=\"toggleMobileMenu()\">\r\n      <ndw-icon>\r\n        {{ isMobileMenuOpen() ? 'close' : 'menu' }}\r\n      </ndw-icon>\r\n    </button>\r\n  }\r\n</header>\r\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}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;overflow:hidden;gap:var(--ndw-spacing-md);margin-bottom:var(--ndw-spacing-md);padding-inline:0;position:relative;padding-top:var(--ndw-spacing-lg)}header a{color:var(--ndw-color-primary-400);display:flex;flex-direction:column;gap:var(--ndw-spacing-xs);letter-spacing:var(--ndw-letter-spacing-sm);font-weight:700;text-decoration:none;text-transform:uppercase}header a img{width:1rem}header ndw-pill{width:fit-content}header .mobile-menu-button{top:var(--ndw-spacing-md);height:fit-content;padding:0;position:absolute;right:var(--ndw-spacing-sm);text-transform:uppercase}header .mobile-menu-button ndw-icon{font-size:var(--ndw-font-size-lg);color:var(--ndw-color-primary-400)}header.expanded{align-items:flex-start;padding-inline:var(--ndw-spacing-lg)}header.expanded a img{width:4rem}header.expanded a img.nwb{width:6rem}@media screen and (max-width:1024px){header{flex-direction:row;align-items:center;padding-inline:var(--ndw-spacing-md);padding-top:0;height:var(--main-navigation-mobile-header-height);margin-bottom:0}header.expanded{align-items:center}header.expanded a img{width:var(--ndw-spacing-md)}header.expanded.nwb{width:var(--ndw-spacing-md)}header a{flex-direction:row;letter-spacing:var(--ndw-letter-spacing-sm);line-height:150%;gap:var(--ndw-spacing-md)}header a img{width:var(--ndw-spacing-md)}header a img.nwb{width:var(--ndw-spacing-md)}}\n"] }]
         }], propDecorators: { applicationName: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationName", required: true }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: true }] }], themeImagePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeImagePath", required: true }] }], environment: [{ type: i0.Input, args: [{ isSignal: true, alias: "environment", required: false }] }], isMobileMenuOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobileMenuOpen", required: true }] }, { type: i0.Output, args: ["isMobileMenuOpenChange"] }] } });
 class MainNavigationMenuComponent {
@@ -3139,7 +3139,7 @@ class MainNavigationMenuComponent {
         this.setActiveMobileItem(this.activeMobileItem() === item ? undefined : item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MainNavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MainNavigationMenuComponent, isStandalone: true, selector: "ndw-main-navigation-menu", inputs: { isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div cdkMenu class=\"menu\" [class.expanded]=\"isExpanded()\">\n  @for (item of items(); track getItemKey(item)) {\n    @if (!item.children) {\n      @if (item.callback) {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          ndwTooltipPosition=\"right\"\n          (click)=\"closeMobileMenu(item)\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n          @if (!isExpanded() && item.notifications) {\n            <ndw-badge class=\"expanded-badge\" [value]=\"item.notifications\" />\n          }\n        </button>\n      } @else {\n        <a\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          ndwTooltipPosition=\"right\"\n          [queryParams]=\"item.queryParams\"\n          [routerLink]=\"item.path\"\n          (click)=\"closeMobileMenu()\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n        </a>\n      }\n    } @else {\n      @if (isMobile()) {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"activeMobileItem() === item || undefined\"\n          (click)=\"toggleActiveMobileItem(item)\"\n          (keydown)=\"handleMobileItemKeydown($event, item)\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          <ndw-icon class=\"suffix\">\n            {{ activeMobileItem() !== item ? 'arrow_drop_down' : 'arrow_drop_up' }}\n          </ndw-icon>\n        </button>\n        @if (activeMobileItem() === item) {\n          @for (subItem of item.children; track getItemKey(subItem)) {\n            @if (subItem.callback) {\n              <button\n                cdkMenuItem\n                ndwButton\n                menu\n                [attr.active]=\"subItem.active ? true : null\"\n                class=\"sub-menu-button\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </a>\n            }\n          }\n        }\n      } @else {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          ndwTooltipPosition=\"right\"\n          [cdkMenuTriggerFor]=\"subMenu\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n            <ndw-icon class=\"suffix\">arrow_right</ndw-icon>\n          }\n        </button>\n      }\n\n      <ng-template #subMenu>\n        <div cdkMenu class=\"sub-menu\">\n          @for (subItem of item.children; track getItemKey(subItem)) {\n            @if (subItem.callback) {\n              <button\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                (click)=\"subItem.callback()\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </a>\n            }\n          }\n        </div>\n      </ng-template>\n    }\n  }\n</div>\n\n<ng-template #label let-item>\n  {{ item.label }}\n  @if (item.notifications) {\n    <ndw-badge [value]=\"item.notifications\" />\n  }\n</ng-template>\n", styles: [":root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}.menu [ndwButton],.sub-menu [ndwButton]{margin-inline:0;width:100%;cursor:pointer;border-radius:0}.menu [ndwButton] .suffix,.sub-menu [ndwButton] .suffix{position:absolute;right:var(--ndw-spacing-sm)}.menu{justify-content:center}.menu .expanded-badge{position:absolute;left:var(--ndw-spacing-md);top:0}.menu.expanded [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md);margin-inline:var(--ndw-spacing-xs);width:calc(100% - var(--ndw-spacing-xs) * 2);border-radius:var(--ndw-border-radius-md)}.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-700)}@media screen and (min-width:1024px){.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-700)}}@media screen and (max-width:1024px){.menu{display:flex;flex-direction:column;gap:var(--ndw-spacing-xs)}.menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}.menu [ndwButton].sub-menu-button{height:1.875rem;margin-left:var(--ndw-spacing-md)}}.sub-menu{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-md);min-width:10.3rem;padding:var(--ndw-spacing-xs);box-shadow:var(--ndw-elevation-popover)}.sub-menu [ndwButton]{justify-content:flex-start;height:1.875rem;width:100%;padding:var(--ndw-spacing-2xs);border-radius:var(--ndw-border-radius-md);margin:0}.sub-menu [ndwButton]:hover{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-100);box-shadow:none;clip-path:none}.sub-menu [ndwButton]:active,.sub-menu [ndwButton][active],.sub-menu [ndwButton][selected]{background-color:var(--ndw-color-info-200);border-color:var(--ndw-color-info-200)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ndw-badge" }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip", "ndwTooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MainNavigationMenuComponent, isStandalone: true, selector: "ndw-main-navigation-menu", inputs: { isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div cdkMenu class=\"menu\" [class.expanded]=\"isExpanded()\">\r\n  @for (item of items(); track getItemKey(item)) {\r\n    @if (!item.children) {\r\n      @if (item.callback) {\r\n        <button\r\n          cdkMenuItem\r\n          ndwButton\r\n          menu\r\n          [attr.active]=\"item.active ? true : null\"\r\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\r\n          ndwTooltipPosition=\"right\"\r\n          (click)=\"closeMobileMenu(item)\"\r\n        >\r\n          <ndw-icon>{{ item.icon }}</ndw-icon>\r\n          @if (isExpanded() || isMobile()) {\r\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\r\n          }\r\n          @if (!isExpanded() && item.notifications) {\r\n            <ndw-badge class=\"expanded-badge\" [value]=\"item.notifications\" />\r\n          }\r\n        </button>\r\n      } @else {\r\n        <a\r\n          cdkMenuItem\r\n          ndwButton\r\n          menu\r\n          [attr.active]=\"item.active ? true : null\"\r\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\r\n          ndwTooltipPosition=\"right\"\r\n          [queryParams]=\"item.queryParams\"\r\n          [routerLink]=\"item.path\"\r\n          (click)=\"closeMobileMenu()\"\r\n        >\r\n          <ndw-icon>{{ item.icon }}</ndw-icon>\r\n          @if (isExpanded() || isMobile()) {\r\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\r\n          }\r\n        </a>\r\n      }\r\n    } @else {\r\n      @if (isMobile()) {\r\n        <button\r\n          cdkMenuItem\r\n          ndwButton\r\n          menu\r\n          [attr.active]=\"activeMobileItem() === item || undefined\"\r\n          (click)=\"toggleActiveMobileItem(item)\"\r\n          (keydown)=\"handleMobileItemKeydown($event, item)\"\r\n        >\r\n          <ndw-icon>{{ item.icon }}</ndw-icon>\r\n          <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\r\n          <ndw-icon class=\"suffix\">\r\n            {{ activeMobileItem() !== item ? 'arrow_drop_down' : 'arrow_drop_up' }}\r\n          </ndw-icon>\r\n        </button>\r\n        @if (activeMobileItem() === item) {\r\n          @for (subItem of item.children; track getItemKey(subItem)) {\r\n            @if (subItem.callback) {\r\n              <button\r\n                cdkMenuItem\r\n                ndwButton\r\n                menu\r\n                [attr.active]=\"subItem.active ? true : null\"\r\n                class=\"sub-menu-button\"\r\n                (click)=\"closeMobileMenu(subItem)\"\r\n              >\r\n                @if (subItem.icon) {\r\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\r\n                }\r\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\r\n              </button>\r\n            } @else {\r\n              <a\r\n                cdkMenuItem\r\n                ndwButton\r\n                menu\r\n                class=\"sub-menu-button\"\r\n                [attr.active]=\"subItem.active ? true : null\"\r\n                [queryParams]=\"subItem.queryParams\"\r\n                [routerLink]=\"subItem.path\"\r\n                (click)=\"closeMobileMenu(subItem)\"\r\n              >\r\n                @if (subItem.icon) {\r\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\r\n                }\r\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\r\n              </a>\r\n            }\r\n          }\r\n        }\r\n      } @else {\r\n        <button\r\n          cdkMenuItem\r\n          ndwButton\r\n          menu\r\n          [attr.active]=\"item.active ? true : null\"\r\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\r\n          ndwTooltipPosition=\"right\"\r\n          [cdkMenuTriggerFor]=\"subMenu\"\r\n        >\r\n          <ndw-icon>{{ item.icon }}</ndw-icon>\r\n          @if (isExpanded()) {\r\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\r\n            <ndw-icon class=\"suffix\">arrow_right</ndw-icon>\r\n          }\r\n        </button>\r\n      }\r\n\r\n      <ng-template #subMenu>\r\n        <div cdkMenu class=\"sub-menu\">\r\n          @for (subItem of item.children; track getItemKey(subItem)) {\r\n            @if (subItem.callback) {\r\n              <button\r\n                cdkMenuItem\r\n                ndwButton\r\n                menu\r\n                class=\"sub-menu-button\"\r\n                [attr.active]=\"subItem.active ? true : null\"\r\n                (click)=\"subItem.callback()\"\r\n              >\r\n                @if (subItem.icon) {\r\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\r\n                }\r\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\r\n              </button>\r\n            } @else {\r\n              <a\r\n                cdkMenuItem\r\n                ndwButton\r\n                menu\r\n                class=\"sub-menu-button\"\r\n                [attr.active]=\"subItem.active ? true : null\"\r\n                [queryParams]=\"subItem.queryParams\"\r\n                [routerLink]=\"subItem.path\"\r\n              >\r\n                @if (subItem.icon) {\r\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\r\n                }\r\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\r\n              </a>\r\n            }\r\n          }\r\n        </div>\r\n      </ng-template>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #label let-item>\r\n  {{ item.label }}\r\n  @if (item.notifications) {\r\n    <ndw-badge [value]=\"item.notifications\" />\r\n  }\r\n</ng-template>\r\n", styles: [":root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}.menu [ndwButton],.sub-menu [ndwButton]{margin-inline:0;width:100%;cursor:pointer;border-radius:0}.menu [ndwButton] .suffix,.sub-menu [ndwButton] .suffix{position:absolute;right:var(--ndw-spacing-sm)}.menu{justify-content:center}.menu .expanded-badge{position:absolute;left:var(--ndw-spacing-md);top:0}.menu.expanded [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md);margin-inline:var(--ndw-spacing-xs);width:calc(100% - var(--ndw-spacing-xs) * 2);border-radius:var(--ndw-border-radius-md)}.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-700)}@media screen and (min-width:1024px){.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-700)}}@media screen and (max-width:1024px){.menu{display:flex;flex-direction:column;gap:var(--ndw-spacing-xs)}.menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}.menu [ndwButton].sub-menu-button{height:1.875rem;margin-left:var(--ndw-spacing-md)}}.sub-menu{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-md);min-width:10.3rem;padding:var(--ndw-spacing-xs);box-shadow:var(--ndw-elevation-popover)}.sub-menu [ndwButton]{justify-content:flex-start;height:1.875rem;width:100%;padding:var(--ndw-spacing-2xs);border-radius:var(--ndw-border-radius-md);margin:0}.sub-menu [ndwButton]:hover{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-100);box-shadow:none;clip-path:none}.sub-menu [ndwButton]:active,.sub-menu [ndwButton][active],.sub-menu [ndwButton][selected]{background-color:var(--ndw-color-info-200);border-color:var(--ndw-color-info-200)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ndw-badge" }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip", "ndwTooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MainNavigationMenuComponent, decorators: [{
             type: Component,
@@ -3152,7 +3152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         RouterLink,
                         NgTemplateOutlet,
                         TooltipDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-main-navigation-menu', template: "<div cdkMenu class=\"menu\" [class.expanded]=\"isExpanded()\">\n  @for (item of items(); track getItemKey(item)) {\n    @if (!item.children) {\n      @if (item.callback) {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          ndwTooltipPosition=\"right\"\n          (click)=\"closeMobileMenu(item)\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n          @if (!isExpanded() && item.notifications) {\n            <ndw-badge class=\"expanded-badge\" [value]=\"item.notifications\" />\n          }\n        </button>\n      } @else {\n        <a\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          ndwTooltipPosition=\"right\"\n          [queryParams]=\"item.queryParams\"\n          [routerLink]=\"item.path\"\n          (click)=\"closeMobileMenu()\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n        </a>\n      }\n    } @else {\n      @if (isMobile()) {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"activeMobileItem() === item || undefined\"\n          (click)=\"toggleActiveMobileItem(item)\"\n          (keydown)=\"handleMobileItemKeydown($event, item)\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          <ndw-icon class=\"suffix\">\n            {{ activeMobileItem() !== item ? 'arrow_drop_down' : 'arrow_drop_up' }}\n          </ndw-icon>\n        </button>\n        @if (activeMobileItem() === item) {\n          @for (subItem of item.children; track getItemKey(subItem)) {\n            @if (subItem.callback) {\n              <button\n                cdkMenuItem\n                ndwButton\n                menu\n                [attr.active]=\"subItem.active ? true : null\"\n                class=\"sub-menu-button\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </a>\n            }\n          }\n        }\n      } @else {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          ndwTooltipPosition=\"right\"\n          [cdkMenuTriggerFor]=\"subMenu\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n            <ndw-icon class=\"suffix\">arrow_right</ndw-icon>\n          }\n        </button>\n      }\n\n      <ng-template #subMenu>\n        <div cdkMenu class=\"sub-menu\">\n          @for (subItem of item.children; track getItemKey(subItem)) {\n            @if (subItem.callback) {\n              <button\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                (click)=\"subItem.callback()\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n              >\n                @if (subItem.icon) {\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\n                }\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </a>\n            }\n          }\n        </div>\n      </ng-template>\n    }\n  }\n</div>\n\n<ng-template #label let-item>\n  {{ item.label }}\n  @if (item.notifications) {\n    <ndw-badge [value]=\"item.notifications\" />\n  }\n</ng-template>\n", styles: [":root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}.menu [ndwButton],.sub-menu [ndwButton]{margin-inline:0;width:100%;cursor:pointer;border-radius:0}.menu [ndwButton] .suffix,.sub-menu [ndwButton] .suffix{position:absolute;right:var(--ndw-spacing-sm)}.menu{justify-content:center}.menu .expanded-badge{position:absolute;left:var(--ndw-spacing-md);top:0}.menu.expanded [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md);margin-inline:var(--ndw-spacing-xs);width:calc(100% - var(--ndw-spacing-xs) * 2);border-radius:var(--ndw-border-radius-md)}.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-700)}@media screen and (min-width:1024px){.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-700)}}@media screen and (max-width:1024px){.menu{display:flex;flex-direction:column;gap:var(--ndw-spacing-xs)}.menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}.menu [ndwButton].sub-menu-button{height:1.875rem;margin-left:var(--ndw-spacing-md)}}.sub-menu{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-md);min-width:10.3rem;padding:var(--ndw-spacing-xs);box-shadow:var(--ndw-elevation-popover)}.sub-menu [ndwButton]{justify-content:flex-start;height:1.875rem;width:100%;padding:var(--ndw-spacing-2xs);border-radius:var(--ndw-border-radius-md);margin:0}.sub-menu [ndwButton]:hover{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-100);box-shadow:none;clip-path:none}.sub-menu [ndwButton]:active,.sub-menu [ndwButton][active],.sub-menu [ndwButton][selected]{background-color:var(--ndw-color-info-200);border-color:var(--ndw-color-info-200)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-main-navigation-menu', template: "<div cdkMenu class=\"menu\" [class.expanded]=\"isExpanded()\">\r\n  @for (item of items(); track getItemKey(item)) {\r\n    @if (!item.children) {\r\n      @if (item.callback) {\r\n        <button\r\n          cdkMenuItem\r\n          ndwButton\r\n          menu\r\n          [attr.active]=\"item.active ? true : null\"\r\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\r\n          ndwTooltipPosition=\"right\"\r\n          (click)=\"closeMobileMenu(item)\"\r\n        >\r\n          <ndw-icon>{{ item.icon }}</ndw-icon>\r\n          @if (isExpanded() || isMobile()) {\r\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\r\n          }\r\n          @if (!isExpanded() && item.notifications) {\r\n            <ndw-badge class=\"expanded-badge\" [value]=\"item.notifications\" />\r\n          }\r\n        </button>\r\n      } @else {\r\n        <a\r\n          cdkMenuItem\r\n          ndwButton\r\n          menu\r\n          [attr.active]=\"item.active ? true : null\"\r\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\r\n          ndwTooltipPosition=\"right\"\r\n          [queryParams]=\"item.queryParams\"\r\n          [routerLink]=\"item.path\"\r\n          (click)=\"closeMobileMenu()\"\r\n        >\r\n          <ndw-icon>{{ item.icon }}</ndw-icon>\r\n          @if (isExpanded() || isMobile()) {\r\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\r\n          }\r\n        </a>\r\n      }\r\n    } @else {\r\n      @if (isMobile()) {\r\n        <button\r\n          cdkMenuItem\r\n          ndwButton\r\n          menu\r\n          [attr.active]=\"activeMobileItem() === item || undefined\"\r\n          (click)=\"toggleActiveMobileItem(item)\"\r\n          (keydown)=\"handleMobileItemKeydown($event, item)\"\r\n        >\r\n          <ndw-icon>{{ item.icon }}</ndw-icon>\r\n          <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\r\n          <ndw-icon class=\"suffix\">\r\n            {{ activeMobileItem() !== item ? 'arrow_drop_down' : 'arrow_drop_up' }}\r\n          </ndw-icon>\r\n        </button>\r\n        @if (activeMobileItem() === item) {\r\n          @for (subItem of item.children; track getItemKey(subItem)) {\r\n            @if (subItem.callback) {\r\n              <button\r\n                cdkMenuItem\r\n                ndwButton\r\n                menu\r\n                [attr.active]=\"subItem.active ? true : null\"\r\n                class=\"sub-menu-button\"\r\n                (click)=\"closeMobileMenu(subItem)\"\r\n              >\r\n                @if (subItem.icon) {\r\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\r\n                }\r\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\r\n              </button>\r\n            } @else {\r\n              <a\r\n                cdkMenuItem\r\n                ndwButton\r\n                menu\r\n                class=\"sub-menu-button\"\r\n                [attr.active]=\"subItem.active ? true : null\"\r\n                [queryParams]=\"subItem.queryParams\"\r\n                [routerLink]=\"subItem.path\"\r\n                (click)=\"closeMobileMenu(subItem)\"\r\n              >\r\n                @if (subItem.icon) {\r\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\r\n                }\r\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\r\n              </a>\r\n            }\r\n          }\r\n        }\r\n      } @else {\r\n        <button\r\n          cdkMenuItem\r\n          ndwButton\r\n          menu\r\n          [attr.active]=\"item.active ? true : null\"\r\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\r\n          ndwTooltipPosition=\"right\"\r\n          [cdkMenuTriggerFor]=\"subMenu\"\r\n        >\r\n          <ndw-icon>{{ item.icon }}</ndw-icon>\r\n          @if (isExpanded()) {\r\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\r\n            <ndw-icon class=\"suffix\">arrow_right</ndw-icon>\r\n          }\r\n        </button>\r\n      }\r\n\r\n      <ng-template #subMenu>\r\n        <div cdkMenu class=\"sub-menu\">\r\n          @for (subItem of item.children; track getItemKey(subItem)) {\r\n            @if (subItem.callback) {\r\n              <button\r\n                cdkMenuItem\r\n                ndwButton\r\n                menu\r\n                class=\"sub-menu-button\"\r\n                [attr.active]=\"subItem.active ? true : null\"\r\n                (click)=\"subItem.callback()\"\r\n              >\r\n                @if (subItem.icon) {\r\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\r\n                }\r\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\r\n              </button>\r\n            } @else {\r\n              <a\r\n                cdkMenuItem\r\n                ndwButton\r\n                menu\r\n                class=\"sub-menu-button\"\r\n                [attr.active]=\"subItem.active ? true : null\"\r\n                [queryParams]=\"subItem.queryParams\"\r\n                [routerLink]=\"subItem.path\"\r\n              >\r\n                @if (subItem.icon) {\r\n                  <ndw-icon>{{ subItem.icon }}</ndw-icon>\r\n                }\r\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\r\n              </a>\r\n            }\r\n          }\r\n        </div>\r\n      </ng-template>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #label let-item>\r\n  {{ item.label }}\r\n  @if (item.notifications) {\r\n    <ndw-badge [value]=\"item.notifications\" />\r\n  }\r\n</ng-template>\r\n", styles: [":root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}.menu [ndwButton],.sub-menu [ndwButton]{margin-inline:0;width:100%;cursor:pointer;border-radius:0}.menu [ndwButton] .suffix,.sub-menu [ndwButton] .suffix{position:absolute;right:var(--ndw-spacing-sm)}.menu{justify-content:center}.menu .expanded-badge{position:absolute;left:var(--ndw-spacing-md);top:0}.menu.expanded [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md);margin-inline:var(--ndw-spacing-xs);width:calc(100% - var(--ndw-spacing-xs) * 2);border-radius:var(--ndw-border-radius-md)}.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-700)}@media screen and (min-width:1024px){.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-700)}}@media screen and (max-width:1024px){.menu{display:flex;flex-direction:column;gap:var(--ndw-spacing-xs)}.menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}.menu [ndwButton].sub-menu-button{height:1.875rem;margin-left:var(--ndw-spacing-md)}}.sub-menu{background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-md);min-width:10.3rem;padding:var(--ndw-spacing-xs);box-shadow:var(--ndw-elevation-popover)}.sub-menu [ndwButton]{justify-content:flex-start;height:1.875rem;width:100%;padding:var(--ndw-spacing-2xs);border-radius:var(--ndw-border-radius-md);margin:0}.sub-menu [ndwButton]:hover{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-100);box-shadow:none;clip-path:none}.sub-menu [ndwButton]:active,.sub-menu [ndwButton][active],.sub-menu [ndwButton][selected]{background-color:var(--ndw-color-info-200);border-color:var(--ndw-color-info-200)}\n"] }]
         }], propDecorators: { isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 /* eslint-disable quotes */
@@ -3208,14 +3208,14 @@ class MainNavigationComponent {
         this.#renderer.setAttribute(this.#document.body, 'data-main-navigation-expanded', this.isExpanded().toString());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MainNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MainNavigationComponent, isStandalone: true, selector: "ndw-main-navigation", inputs: { applicationName: { classPropertyName: "applicationName", publicName: "applicationName", isSignal: true, isRequired: true, transformFunction: null }, topMenuItems: { classPropertyName: "topMenuItems", publicName: "topMenuItems", isSignal: true, isRequired: true, transformFunction: null }, bottomMenuItems: { classPropertyName: "bottomMenuItems", publicName: "bottomMenuItems", isSignal: true, isRequired: false, transformFunction: null }, environment: { classPropertyName: "environment", publicName: "environment", isSignal: true, isRequired: false, transformFunction: null }, footerTexts: { classPropertyName: "footerTexts", publicName: "footerTexts", isSignal: true, isRequired: false, transformFunction: null }, isCollapsible: { classPropertyName: "isCollapsible", publicName: "isCollapsible", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isExpanded: "isExpandedChange" }, host: { listeners: { "window:resize": "onWindowResize()" }, properties: { "class.expanded": "isExpanded()" } }, ngImport: i0, template: "<ndw-main-navigation-header\n  [applicationName]=\"applicationName()\"\n  [environment]=\"environment()\"\n  [isExpanded]=\"isExpanded()\"\n  [isMobile]=\"isMobile()\"\n  [theme]=\"theme()\"\n  [themeImagePath]=\"themeImagePath()\"\n  [(isMobileMenuOpen)]=\"isMobileMenuOpen\"\n/>\n@if (!isMobile()) {\n  <div class=\"content\">\n    <main>\n      <ndw-main-navigation-menu\n        [isExpanded]=\"isExpanded()\"\n        [isMobile]=\"isMobile()\"\n        [items]=\"topMenuItems()\"\n        (closed)=\"closeMobileMenu()\"\n      />\n    </main>\n    <footer>\n      @if (bottomMenuItems(); as bottomMenuItems) {\n        <ndw-main-navigation-menu\n          [isExpanded]=\"isExpanded()\"\n          [isMobile]=\"isMobile()\"\n          [items]=\"bottomMenuItems\"\n          (closed)=\"closeMobileMenu()\"\n        />\n      }\n      <div class=\"texts\">\n        @if (isExpanded() || isMobile()) {\n          @for (text of footerTexts(); track $index) {\n            <p>{{ text }}</p>\n          }\n        }\n      </div>\n      <div class=\"version\">\n        <p>{{ version() }}</p>\n      </div>\n      @if (isCollapsible() && !isMobile()) {\n        <button ndwButton menu class=\"collapse-toggle\" (click)=\"toggleView()\">\n          <ndw-icon>keyboard_double_arrow_right</ndw-icon>\n        </button>\n      }\n    </footer>\n  </div>\n} @else {\n  @if (isMobileMenuOpen()) {\n    <div class=\"content\">\n      <main>\n        <ndw-main-navigation-menu\n          [isExpanded]=\"isExpanded()\"\n          [isMobile]=\"isMobile()\"\n          [items]=\"mobileMenuItems()\"\n          (closed)=\"closeMobileMenu()\"\n        />\n      </main>\n    </div>\n  }\n}\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{background-color:var(--ndw-color-white);color:var(--ndw-color-grey-700);display:grid;grid-template-rows:auto 1fr;height:100%;width:var(--main-navigation-collapse-width);border-right:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-bottom:0}@media screen and (max-width:1024px){:host{padding-top:var(--ndw-spacing-md);height:var(--main-navigation-mobile-header-height);width:100%;border-right:0;border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300)}}.content{background-color:var(--ndw-color-white);display:grid;grid-template-rows:1fr auto;overflow-y:auto}.content footer{padding-block-end:var(--ndw-spacing-xl);position:relative}.content footer .texts{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-block-start:var(--ndw-spacing-md);padding-inline:var(--ndw-spacing-md)}.content footer .texts p{text-align:center}.content footer .version{align-items:center;display:grid;height:2.625rem}.content footer .version p{display:none;font-size:var(--ndw-font-size-2xs);text-align:center}.content footer .collapse-toggle{bottom:0;cursor:pointer;position:absolute;right:0;margin-inline:0;border-radius:0;width:var(--main-navigation-collapse-width)}@media screen and (max-width:1024px){.content{position:absolute;inset:var(--main-navigation-mobile-header-height) 0 0;z-index:9999}}:host(.expanded){min-width:var(--main-navigation-expanded-width)}@media screen and (max-width:1024px){:host(.expanded){width:100%}}:host(.expanded) .content footer{padding-block-end:0}:host(.expanded) .content footer .version p{display:block}:host(.expanded) .content footer .collapse-toggle{border-radius:var(--ndw-border-radius-md)}:host(.expanded) .content footer .collapse-toggle ndw-icon{transform:var(--ndw-rotate-half)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: MainNavigationHeaderComponent, selector: "ndw-main-navigation-header", inputs: ["applicationName", "isExpanded", "isMobile", "theme", "themeImagePath", "environment", "isMobileMenuOpen"], outputs: ["isMobileMenuOpenChange"] }, { kind: "component", type: MainNavigationMenuComponent, selector: "ndw-main-navigation-menu", inputs: ["isExpanded", "isMobile", "items"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MainNavigationComponent, isStandalone: true, selector: "ndw-main-navigation", inputs: { applicationName: { classPropertyName: "applicationName", publicName: "applicationName", isSignal: true, isRequired: true, transformFunction: null }, topMenuItems: { classPropertyName: "topMenuItems", publicName: "topMenuItems", isSignal: true, isRequired: true, transformFunction: null }, bottomMenuItems: { classPropertyName: "bottomMenuItems", publicName: "bottomMenuItems", isSignal: true, isRequired: false, transformFunction: null }, environment: { classPropertyName: "environment", publicName: "environment", isSignal: true, isRequired: false, transformFunction: null }, footerTexts: { classPropertyName: "footerTexts", publicName: "footerTexts", isSignal: true, isRequired: false, transformFunction: null }, isCollapsible: { classPropertyName: "isCollapsible", publicName: "isCollapsible", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isExpanded: "isExpandedChange" }, host: { listeners: { "window:resize": "onWindowResize()" }, properties: { "class.expanded": "isExpanded()" } }, ngImport: i0, template: "<ndw-main-navigation-header\r\n  [applicationName]=\"applicationName()\"\r\n  [environment]=\"environment()\"\r\n  [isExpanded]=\"isExpanded()\"\r\n  [isMobile]=\"isMobile()\"\r\n  [theme]=\"theme()\"\r\n  [themeImagePath]=\"themeImagePath()\"\r\n  [(isMobileMenuOpen)]=\"isMobileMenuOpen\"\r\n/>\r\n@if (!isMobile()) {\r\n  <div class=\"content\">\r\n    <main>\r\n      <ndw-main-navigation-menu\r\n        [isExpanded]=\"isExpanded()\"\r\n        [isMobile]=\"isMobile()\"\r\n        [items]=\"topMenuItems()\"\r\n        (closed)=\"closeMobileMenu()\"\r\n      />\r\n    </main>\r\n    <footer>\r\n      @if (bottomMenuItems(); as bottomMenuItems) {\r\n        <ndw-main-navigation-menu\r\n          [isExpanded]=\"isExpanded()\"\r\n          [isMobile]=\"isMobile()\"\r\n          [items]=\"bottomMenuItems\"\r\n          (closed)=\"closeMobileMenu()\"\r\n        />\r\n      }\r\n      <div class=\"texts\">\r\n        @if (isExpanded() || isMobile()) {\r\n          @for (text of footerTexts(); track $index) {\r\n            <p>{{ text }}</p>\r\n          }\r\n        }\r\n      </div>\r\n      <div class=\"version\">\r\n        <p>{{ version() }}</p>\r\n      </div>\r\n      @if (isCollapsible() && !isMobile()) {\r\n        <button ndwButton menu class=\"collapse-toggle\" (click)=\"toggleView()\">\r\n          <ndw-icon>keyboard_double_arrow_right</ndw-icon>\r\n        </button>\r\n      }\r\n    </footer>\r\n  </div>\r\n} @else {\r\n  @if (isMobileMenuOpen()) {\r\n    <div class=\"content\">\r\n      <main>\r\n        <ndw-main-navigation-menu\r\n          [isExpanded]=\"isExpanded()\"\r\n          [isMobile]=\"isMobile()\"\r\n          [items]=\"mobileMenuItems()\"\r\n          (closed)=\"closeMobileMenu()\"\r\n        />\r\n      </main>\r\n    </div>\r\n  }\r\n}\r\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{background-color:var(--ndw-color-white);color:var(--ndw-color-grey-700);display:grid;grid-template-rows:auto 1fr;height:100%;width:var(--main-navigation-collapse-width);border-right:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-bottom:0}@media screen and (max-width:1024px){:host{height:var(--main-navigation-mobile-header-height);width:100%;border-right:0;border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300)}}.content{background-color:var(--ndw-color-white);display:grid;grid-template-rows:1fr auto;overflow-y:auto}.content footer{padding-block-end:var(--ndw-spacing-xl);position:relative}.content footer .texts{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-block-start:var(--ndw-spacing-md);padding-inline:var(--ndw-spacing-md)}.content footer .texts p{text-align:center}.content footer .version{align-items:center;display:grid;height:2.625rem}.content footer .version p{display:none;font-size:var(--ndw-font-size-2xs);text-align:center}.content footer .collapse-toggle{bottom:0;cursor:pointer;position:absolute;right:0;margin-inline:0;border-radius:0;width:var(--main-navigation-collapse-width)}@media screen and (max-width:1024px){.content{border-top:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);position:absolute;inset:var(--main-navigation-mobile-header-height) 0 0;z-index:9999}}:host(.expanded){min-width:var(--main-navigation-expanded-width)}@media screen and (max-width:1024px){:host(.expanded){width:100%}}:host(.expanded) .content footer{padding-block-end:0}:host(.expanded) .content footer .version p{display:block}:host(.expanded) .content footer .collapse-toggle{border-radius:var(--ndw-border-radius-md)}:host(.expanded) .content footer .collapse-toggle ndw-icon{transform:var(--ndw-rotate-half)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: MainNavigationHeaderComponent, selector: "ndw-main-navigation-header", inputs: ["applicationName", "isExpanded", "isMobile", "theme", "themeImagePath", "environment", "isMobileMenuOpen"], outputs: ["isMobileMenuOpenChange"] }, { kind: "component", type: MainNavigationMenuComponent, selector: "ndw-main-navigation-menu", inputs: ["isExpanded", "isMobile", "items"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MainNavigationComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.expanded]': 'isExpanded()',
                         '(window:resize)': 'onWindowResize()',
-                    }, imports: [IconComponent, MainNavigationHeaderComponent, MainNavigationMenuComponent], selector: 'ndw-main-navigation', template: "<ndw-main-navigation-header\n  [applicationName]=\"applicationName()\"\n  [environment]=\"environment()\"\n  [isExpanded]=\"isExpanded()\"\n  [isMobile]=\"isMobile()\"\n  [theme]=\"theme()\"\n  [themeImagePath]=\"themeImagePath()\"\n  [(isMobileMenuOpen)]=\"isMobileMenuOpen\"\n/>\n@if (!isMobile()) {\n  <div class=\"content\">\n    <main>\n      <ndw-main-navigation-menu\n        [isExpanded]=\"isExpanded()\"\n        [isMobile]=\"isMobile()\"\n        [items]=\"topMenuItems()\"\n        (closed)=\"closeMobileMenu()\"\n      />\n    </main>\n    <footer>\n      @if (bottomMenuItems(); as bottomMenuItems) {\n        <ndw-main-navigation-menu\n          [isExpanded]=\"isExpanded()\"\n          [isMobile]=\"isMobile()\"\n          [items]=\"bottomMenuItems\"\n          (closed)=\"closeMobileMenu()\"\n        />\n      }\n      <div class=\"texts\">\n        @if (isExpanded() || isMobile()) {\n          @for (text of footerTexts(); track $index) {\n            <p>{{ text }}</p>\n          }\n        }\n      </div>\n      <div class=\"version\">\n        <p>{{ version() }}</p>\n      </div>\n      @if (isCollapsible() && !isMobile()) {\n        <button ndwButton menu class=\"collapse-toggle\" (click)=\"toggleView()\">\n          <ndw-icon>keyboard_double_arrow_right</ndw-icon>\n        </button>\n      }\n    </footer>\n  </div>\n} @else {\n  @if (isMobileMenuOpen()) {\n    <div class=\"content\">\n      <main>\n        <ndw-main-navigation-menu\n          [isExpanded]=\"isExpanded()\"\n          [isMobile]=\"isMobile()\"\n          [items]=\"mobileMenuItems()\"\n          (closed)=\"closeMobileMenu()\"\n        />\n      </main>\n    </div>\n  }\n}\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{background-color:var(--ndw-color-white);color:var(--ndw-color-grey-700);display:grid;grid-template-rows:auto 1fr;height:100%;width:var(--main-navigation-collapse-width);border-right:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-bottom:0}@media screen and (max-width:1024px){:host{padding-top:var(--ndw-spacing-md);height:var(--main-navigation-mobile-header-height);width:100%;border-right:0;border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300)}}.content{background-color:var(--ndw-color-white);display:grid;grid-template-rows:1fr auto;overflow-y:auto}.content footer{padding-block-end:var(--ndw-spacing-xl);position:relative}.content footer .texts{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-block-start:var(--ndw-spacing-md);padding-inline:var(--ndw-spacing-md)}.content footer .texts p{text-align:center}.content footer .version{align-items:center;display:grid;height:2.625rem}.content footer .version p{display:none;font-size:var(--ndw-font-size-2xs);text-align:center}.content footer .collapse-toggle{bottom:0;cursor:pointer;position:absolute;right:0;margin-inline:0;border-radius:0;width:var(--main-navigation-collapse-width)}@media screen and (max-width:1024px){.content{position:absolute;inset:var(--main-navigation-mobile-header-height) 0 0;z-index:9999}}:host(.expanded){min-width:var(--main-navigation-expanded-width)}@media screen and (max-width:1024px){:host(.expanded){width:100%}}:host(.expanded) .content footer{padding-block-end:0}:host(.expanded) .content footer .version p{display:block}:host(.expanded) .content footer .collapse-toggle{border-radius:var(--ndw-border-radius-md)}: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\r\n  [applicationName]=\"applicationName()\"\r\n  [environment]=\"environment()\"\r\n  [isExpanded]=\"isExpanded()\"\r\n  [isMobile]=\"isMobile()\"\r\n  [theme]=\"theme()\"\r\n  [themeImagePath]=\"themeImagePath()\"\r\n  [(isMobileMenuOpen)]=\"isMobileMenuOpen\"\r\n/>\r\n@if (!isMobile()) {\r\n  <div class=\"content\">\r\n    <main>\r\n      <ndw-main-navigation-menu\r\n        [isExpanded]=\"isExpanded()\"\r\n        [isMobile]=\"isMobile()\"\r\n        [items]=\"topMenuItems()\"\r\n        (closed)=\"closeMobileMenu()\"\r\n      />\r\n    </main>\r\n    <footer>\r\n      @if (bottomMenuItems(); as bottomMenuItems) {\r\n        <ndw-main-navigation-menu\r\n          [isExpanded]=\"isExpanded()\"\r\n          [isMobile]=\"isMobile()\"\r\n          [items]=\"bottomMenuItems\"\r\n          (closed)=\"closeMobileMenu()\"\r\n        />\r\n      }\r\n      <div class=\"texts\">\r\n        @if (isExpanded() || isMobile()) {\r\n          @for (text of footerTexts(); track $index) {\r\n            <p>{{ text }}</p>\r\n          }\r\n        }\r\n      </div>\r\n      <div class=\"version\">\r\n        <p>{{ version() }}</p>\r\n      </div>\r\n      @if (isCollapsible() && !isMobile()) {\r\n        <button ndwButton menu class=\"collapse-toggle\" (click)=\"toggleView()\">\r\n          <ndw-icon>keyboard_double_arrow_right</ndw-icon>\r\n        </button>\r\n      }\r\n    </footer>\r\n  </div>\r\n} @else {\r\n  @if (isMobileMenuOpen()) {\r\n    <div class=\"content\">\r\n      <main>\r\n        <ndw-main-navigation-menu\r\n          [isExpanded]=\"isExpanded()\"\r\n          [isMobile]=\"isMobile()\"\r\n          [items]=\"mobileMenuItems()\"\r\n          (closed)=\"closeMobileMenu()\"\r\n        />\r\n      </main>\r\n    </div>\r\n  }\r\n}\r\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{background-color:var(--ndw-color-white);color:var(--ndw-color-grey-700);display:grid;grid-template-rows:auto 1fr;height:100%;width:var(--main-navigation-collapse-width);border-right:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);border-bottom:0}@media screen and (max-width:1024px){:host{height:var(--main-navigation-mobile-header-height);width:100%;border-right:0;border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300)}}.content{background-color:var(--ndw-color-white);display:grid;grid-template-rows:1fr auto;overflow-y:auto}.content footer{padding-block-end:var(--ndw-spacing-xl);position:relative}.content footer .texts{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-block-start:var(--ndw-spacing-md);padding-inline:var(--ndw-spacing-md)}.content footer .texts p{text-align:center}.content footer .version{align-items:center;display:grid;height:2.625rem}.content footer .version p{display:none;font-size:var(--ndw-font-size-2xs);text-align:center}.content footer .collapse-toggle{bottom:0;cursor:pointer;position:absolute;right:0;margin-inline:0;border-radius:0;width:var(--main-navigation-collapse-width)}@media screen and (max-width:1024px){.content{border-top:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);position:absolute;inset:var(--main-navigation-mobile-header-height) 0 0;z-index:9999}}:host(.expanded){min-width:var(--main-navigation-expanded-width)}@media screen and (max-width:1024px){:host(.expanded){width:100%}}:host(.expanded) .content footer{padding-block-end:0}:host(.expanded) .content footer .version p{display:block}:host(.expanded) .content footer .collapse-toggle{border-radius:var(--ndw-border-radius-md)}:host(.expanded) .content footer .collapse-toggle ndw-icon{transform:var(--ndw-rotate-half)}\n"] }]
         }], propDecorators: { applicationName: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationName", required: true }] }], topMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "topMenuItems", required: true }] }], bottomMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottomMenuItems", required: false }] }], environment: [{ type: i0.Input, args: [{ isSignal: true, alias: "environment", required: false }] }], footerTexts: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTexts", required: false }] }], isCollapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsible", required: false }] }], version: [{ type: i0.Input, args: [{ isSignal: true, alias: "version", required: false }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }, { type: i0.Output, args: ["isExpandedChange"] }] } });
 class LayoutComponent {
@@ -3228,29 +3228,29 @@ class LayoutComponent {
     menuFooterTexts = input(...(ngDevMode ? [undefined, { debugName: "menuFooterTexts" }] : []));
     version = input(...(ngDevMode ? [undefined, { debugName: "version" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", 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-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{background-color:var(--ndw-color-grey-100);height:100%;display:flex;position:absolute;width:100%}: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;flex-direction:column}:host main{height:calc(100% - var(--main-navigation-mobile-header-height))}}\n"], dependencies: [{ kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: MainNavigationComponent, selector: "ndw-main-navigation", inputs: ["applicationName", "topMenuItems", "bottomMenuItems", "environment", "footerTexts", "isCollapsible", "version", "isExpanded"], outputs: ["isExpandedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", 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\r\n  [applicationName]=\"applicationName()\"\r\n  [bottomMenuItems]=\"bottomMenuItems()\"\r\n  [environment]=\"environment()\"\r\n  [footerTexts]=\"menuFooterTexts()\"\r\n  [isCollapsible]=\"isCollapsible()\"\r\n  [isExpanded]=\"isExpanded()\"\r\n  [topMenuItems]=\"topMenuItems()\"\r\n  [version]=\"version()\"\r\n/>\r\n<main cdk-scrollable>\r\n  <ng-content />\r\n</main>\r\n", styles: [":root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{background-color:var(--ndw-color-grey-100);height:100%;display:flex;position:absolute;width:100%}: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;flex-direction:column}:host main{height:calc(100% - var(--main-navigation-mobile-header-height))}}\n"], dependencies: [{ kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: MainNavigationComponent, selector: "ndw-main-navigation", inputs: ["applicationName", "topMenuItems", "bottomMenuItems", "environment", "footerTexts", "isCollapsible", "version", "isExpanded"], outputs: ["isExpandedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{background-color:var(--ndw-color-grey-100);height:100%;display:flex;position:absolute;width:100%}: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;flex-direction:column}:host main{height:calc(100% - var(--main-navigation-mobile-header-height))}}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkScrollable, MainNavigationComponent], selector: 'ndw-layout', template: "<ndw-main-navigation\r\n  [applicationName]=\"applicationName()\"\r\n  [bottomMenuItems]=\"bottomMenuItems()\"\r\n  [environment]=\"environment()\"\r\n  [footerTexts]=\"menuFooterTexts()\"\r\n  [isCollapsible]=\"isCollapsible()\"\r\n  [isExpanded]=\"isExpanded()\"\r\n  [topMenuItems]=\"topMenuItems()\"\r\n  [version]=\"version()\"\r\n/>\r\n<main cdk-scrollable>\r\n  <ng-content />\r\n</main>\r\n", styles: [":root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-letter-spacing-sm: .1rem;--ndw-letter-spacing-md: .2rem;--ndw-letter-spacing-lg: .3rem;--ndw-elevation-info: 0 0 .5rem 0 hsla(var(--_link-500), .25);--ndw-elevation-content: 0 .125rem .125rem 0 hsla(var(--_grey-600), .05);--ndw-elevation-dropdown: 0 .25rem 1rem hsla(var(--_grey-600), .125);--ndw-elevation-popover: 0 .5rem 1.25rem hsla(var(--_grey-600), .125);--ndw-elevation-toast: 0 .75rem 1.25rem hsla(var(--_grey-600), .125);--ndw-backdrop-color: var(--ndw-alpha-black-040);--ndw-animation-speed-very-fast: .1s;--ndw-animation-speed-fast: .2s;--ndw-animation-speed-default: .3s;--ndw-animation-speed-slow: .5s;--ndw-icon-size-md: 1rem;--ndw-icon-size-lg: 1.5rem;--multi-select-default-width: 18.75rem;--ndw-font-family-body: \"Nunito Sans Variable\", sans-serif;--ndw-font-family-heading: \"DM Sans Variable\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}:host{background-color:var(--ndw-color-grey-100);height:100%;display:flex;position:absolute;width:100%}: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;flex-direction:column}:host main{height:calc(100% - var(--main-navigation-mobile-header-height))}}\n"] }]
         }], propDecorators: { applicationName: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationName", required: true }] }], topMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "topMenuItems", required: true }] }], bottomMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottomMenuItems", required: false }] }], environment: [{ type: i0.Input, args: [{ isSignal: true, alias: "environment", required: false }] }], isCollapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsible", required: false }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }], menuFooterTexts: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuFooterTexts", required: false }] }], version: [{ type: i0.Input, args: [{ isSignal: true, alias: "version", required: false }] }] } });
 class LayoutBannersComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LayoutBannersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: LayoutBannersComponent, isStandalone: true, selector: "ndw-layout-banners", ngImport: i0, template: "<ng-content />\n", styles: [":host{display:grid;position:sticky;top:0;z-index:10}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: LayoutBannersComponent, isStandalone: true, selector: "ndw-layout-banners", ngImport: i0, template: "<ng-content />\r\n", styles: [":host{display:grid;position:sticky;top:0;z-index:10}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LayoutBannersComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-layout-banners', template: "<ng-content />\n", styles: [":host{display:grid;position:sticky;top:0;z-index:10}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-layout-banners', template: "<ng-content />\r\n", styles: [":host{display:grid;position:sticky;top:0;z-index:10}\n"] }]
         }] });
 class LoaderComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: LoaderComponent, isStandalone: true, selector: "ndw-loader", ngImport: i0, template: "<svg viewBox=\"0 0 32 32\">\n  <circle cx=\"4\" cy=\"16\" r=\"4\" />\n  <circle cx=\"16\" cy=\"16\" r=\"4\" />\n  <circle cx=\"28\" cy=\"16\" r=\"4\" />\n</svg>\n", styles: [":host{box-sizing:border-box;display:block;height:var(--ndw-spacing-xl);position:relative;width:var(--ndw-spacing-xl)}:host svg{display:block;inset:var(--ndw-border-size-sm);position:absolute}:host svg circle{animation:traffic 1.5s infinite;animation-delay:.1s;fill:currentColor}:host svg circle:first-of-type{animation-delay:.2s}:host svg circle:last-of-type{animation-delay:0s}@keyframes traffic{0%{transform:translate(calc(var(--ndw-spacing-xl) * -1))}33.33%,66.67%{transform:translate(0)}to{transform:translate(var(--ndw-spacing-xl))}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: LoaderComponent, isStandalone: true, selector: "ndw-loader", ngImport: i0, template: "<svg viewBox=\"0 0 32 32\">\r\n  <circle cx=\"4\" cy=\"16\" r=\"4\" />\r\n  <circle cx=\"16\" cy=\"16\" r=\"4\" />\r\n  <circle cx=\"28\" cy=\"16\" r=\"4\" />\r\n</svg>\r\n", styles: [":host{box-sizing:border-box;display:block;height:var(--ndw-spacing-xl);position:relative;width:var(--ndw-spacing-xl)}:host svg{display:block;inset:var(--ndw-border-size-sm);position:absolute}:host svg circle{animation:traffic 1.5s infinite;animation-delay:.1s;fill:currentColor}:host svg circle:first-of-type{animation-delay:.2s}:host svg circle:last-of-type{animation-delay:0s}@keyframes traffic{0%{transform:translate(calc(var(--ndw-spacing-xl) * -1))}33.33%,66.67%{transform:translate(0)}to{transform:translate(var(--ndw-spacing-xl))}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-loader', template: "<svg viewBox=\"0 0 32 32\">\n  <circle cx=\"4\" cy=\"16\" r=\"4\" />\n  <circle cx=\"16\" cy=\"16\" r=\"4\" />\n  <circle cx=\"28\" cy=\"16\" r=\"4\" />\n</svg>\n", styles: [":host{box-sizing:border-box;display:block;height:var(--ndw-spacing-xl);position:relative;width:var(--ndw-spacing-xl)}:host svg{display:block;inset:var(--ndw-border-size-sm);position:absolute}:host svg circle{animation:traffic 1.5s infinite;animation-delay:.1s;fill:currentColor}:host svg circle:first-of-type{animation-delay:.2s}:host svg circle:last-of-type{animation-delay:0s}@keyframes traffic{0%{transform:translate(calc(var(--ndw-spacing-xl) * -1))}33.33%,66.67%{transform:translate(0)}to{transform:translate(var(--ndw-spacing-xl))}}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-loader', template: "<svg viewBox=\"0 0 32 32\">\r\n  <circle cx=\"4\" cy=\"16\" r=\"4\" />\r\n  <circle cx=\"16\" cy=\"16\" r=\"4\" />\r\n  <circle cx=\"28\" cy=\"16\" r=\"4\" />\r\n</svg>\r\n", styles: [":host{box-sizing:border-box;display:block;height:var(--ndw-spacing-xl);position:relative;width:var(--ndw-spacing-xl)}:host svg{display:block;inset:var(--ndw-border-size-sm);position:absolute}:host svg circle{animation:traffic 1.5s infinite;animation-delay:.1s;fill:currentColor}:host svg circle:first-of-type{animation-delay:.2s}:host svg circle:last-of-type{animation-delay:0s}@keyframes traffic{0%{transform:translate(calc(var(--ndw-spacing-xl) * -1))}33.33%,66.67%{transform:translate(0)}to{transform:translate(var(--ndw-spacing-xl))}}\n"] }]
         }] });
 const fontMapButtonIcons = [
@@ -3335,11 +3335,11 @@ class MapButtonComponent {
         mail: 'Maak een melding',
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MapButtonComponent, isStandalone: true, selector: "ndw-map-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  class=\"map-control\"\n  [class.active]=\"active()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"iconLabel()\"\n  (click)=\"clicked.emit()\"\n  [ndwTooltip]=\"iconLabel()\"\n>\n  @if (svgIcon()) {\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <use [attr.href]=\"'images/map-button-icons.svg#' + svgIcon()\"></use>\n    </svg>\n  } @else if (buttonIcon()) {\n    <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n  }\n  <div class=\"content-wrapper\">\n    <ng-content />\n  </div>\n</button>\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{width:fit-content}.map-control{justify-content:center}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip", "ndwTooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MapButtonComponent, isStandalone: true, selector: "ndw-map-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n  class=\"map-control\"\r\n  [class.active]=\"active()\"\r\n  [disabled]=\"disabled()\"\r\n  [attr.aria-label]=\"iconLabel()\"\r\n  (click)=\"clicked.emit()\"\r\n  [ndwTooltip]=\"iconLabel()\"\r\n>\r\n  @if (svgIcon()) {\r\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <use [attr.href]=\"'images/map-button-icons.svg#' + svgIcon()\"></use>\r\n    </svg>\r\n  } @else if (buttonIcon()) {\r\n    <ndw-icon>{{ buttonIcon() }}</ndw-icon>\r\n  }\r\n  <div class=\"content-wrapper\">\r\n    <ng-content />\r\n  </div>\r\n</button>\r\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{width:fit-content}.map-control{justify-content:center}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip", "ndwTooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapButtonComponent, decorators: [{
             type: Component,
-            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 if (buttonIcon()) {\n    <ndw-icon>{{ buttonIcon() }}</ndw-icon>\n  }\n  <div class=\"content-wrapper\">\n    <ng-content />\n  </div>\n</button>\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{width:fit-content}.map-control{justify-content:center}\n"] }]
+            args: [{ selector: 'ndw-map-button', imports: [IconComponent, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  class=\"map-control\"\r\n  [class.active]=\"active()\"\r\n  [disabled]=\"disabled()\"\r\n  [attr.aria-label]=\"iconLabel()\"\r\n  (click)=\"clicked.emit()\"\r\n  [ndwTooltip]=\"iconLabel()\"\r\n>\r\n  @if (svgIcon()) {\r\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <use [attr.href]=\"'images/map-button-icons.svg#' + svgIcon()\"></use>\r\n    </svg>\r\n  } @else if (buttonIcon()) {\r\n    <ndw-icon>{{ buttonIcon() }}</ndw-icon>\r\n  }\r\n  <div class=\"content-wrapper\">\r\n    <ng-content />\r\n  </div>\r\n</button>\r\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{width:fit-content}.map-control{justify-content:center}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 class MapDisplayOptionComponent {
@@ -3349,11 +3349,11 @@ class MapDisplayOptionComponent {
     group = input(...(ngDevMode ? [undefined, { debugName: "group" }] : []));
     selectionChange = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapDisplayOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MapDisplayOptionComponent, isStandalone: true, selector: "ndw-map-display-option", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "@if (type() === 'button') {\n  <button\n    type=\"button\"\n    [title]=\"option().description ?? ''\"\n    [class.column]=\"direction() === 'column'\"\n    (click)=\"selectionChange.emit(option())\"\n  >\n    <ng-container *ngTemplateOutlet=\"template\" />\n    <span class=\"name\">{{ option().name }}</span>\n  </button>\n} @else if (type() === 'radio' || type() === 'checkbox') {\n  <label [class.column]=\"direction() === 'column'\" [title]=\"option().description ?? ''\">\n    <input\n      [type]=\"type()\"\n      name=\"{{ group() }}\"\n      [checked]=\"option().active\"\n      (change)=\"selectionChange.emit(option())\"\n    />\n    <ng-container *ngTemplateOutlet=\"template\" />\n    <span class=\"name\">{{ option().name }}</span>\n  </label>\n} @else {\n  <ng-container *ngTemplateOutlet=\"template\" />\n}\n\n<ng-template #template>\n  @if (option().imageLink) {\n    <img [src]=\"option().imageLink\" [alt]=\"option().name\" />\n  } @else if (option().icon) {\n    <ndw-icon [title]=\"option().name\">{{ option().icon }}</ndw-icon>\n  } @else {\n    <ndw-icon>stacks</ndw-icon>\n  }\n</ng-template>\n", styles: ["button,label{padding:0;border:0;display:flex;align-items:center;width:100%;height:40px;gap:var(--ndw-spacing-2xs);color:var(--ndw-color-grey-700);background-color:var(--ndw-color-white);transition:background-color var(--ndw-animation-speed-default) ease-out;border-radius:var(--ndw-border-radius-sm);cursor:pointer}button.column,label.column{flex-direction:column;justify-content:end;width:64px;height:64px}button:not(.column),label:not(.column){padding:var(--ndw-spacing-2xs);gap:var(--ndw-spacing-xs)}button:not(.column):has(input:checked),label:not(.column):has(input:checked){font-weight:var(--ndw-font-weight-bold)}button:hover,label:hover{background-color:var(--ndw-color-grey-100)}button:has(input:checked) img,button:has(input:checked) ndw-icon,label:has(input:checked) img,label:has(input:checked) ndw-icon{box-shadow:0 0 0 2px var(--ndw-color-secondary-400)}button input,label input{visibility:hidden;position:absolute;width:0;height:0;opacity:0;pointer-events:none;z-index:-1;left:-9999px;top:-9999px}img,ndw-icon{display:block;overflow:hidden;padding:var(--ndw-spacing-2xs);width:32px;height:32px;object-fit:cover;border:1px solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-xs)}.name{font-size:var(--ndw-font-size-sm);white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MapDisplayOptionComponent, isStandalone: true, selector: "ndw-map-display-option", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "@if (type() === 'button') {\r\n  <button\r\n    type=\"button\"\r\n    [title]=\"option().description ?? ''\"\r\n    [class.column]=\"direction() === 'column'\"\r\n    (click)=\"selectionChange.emit(option())\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"template\" />\r\n    <span class=\"name\">{{ option().name }}</span>\r\n  </button>\r\n} @else if (type() === 'radio' || type() === 'checkbox') {\r\n  <label [class.column]=\"direction() === 'column'\" [title]=\"option().description ?? ''\">\r\n    <input\r\n      [type]=\"type()\"\r\n      name=\"{{ group() }}\"\r\n      [checked]=\"option().active\"\r\n      (change)=\"selectionChange.emit(option())\"\r\n    />\r\n    <ng-container *ngTemplateOutlet=\"template\" />\r\n    <span class=\"name\">{{ option().name }}</span>\r\n  </label>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"template\" />\r\n}\r\n\r\n<ng-template #template>\r\n  @if (option().imageLink) {\r\n    <img [src]=\"option().imageLink\" [alt]=\"option().name\" />\r\n  } @else if (option().icon) {\r\n    <ndw-icon [title]=\"option().name\">{{ option().icon }}</ndw-icon>\r\n  } @else {\r\n    <ndw-icon>stacks</ndw-icon>\r\n  }\r\n</ng-template>\r\n", styles: ["button,label{padding:0;border:0;display:flex;align-items:center;width:100%;height:40px;gap:var(--ndw-spacing-2xs);color:var(--ndw-color-grey-700);background-color:var(--ndw-color-white);transition:background-color var(--ndw-animation-speed-default) ease-out;border-radius:var(--ndw-border-radius-sm);cursor:pointer}button.column,label.column{flex-direction:column;justify-content:end;width:64px;height:64px}button:not(.column),label:not(.column){padding:var(--ndw-spacing-2xs);gap:var(--ndw-spacing-xs)}button:not(.column):has(input:checked),label:not(.column):has(input:checked){font-weight:var(--ndw-font-weight-bold)}button:hover,label:hover{background-color:var(--ndw-color-grey-100)}button:has(input:checked) img,button:has(input:checked) ndw-icon,label:has(input:checked) img,label:has(input:checked) ndw-icon{box-shadow:0 0 0 2px var(--ndw-color-secondary-400)}button input,label input{visibility:hidden;position:absolute;width:0;height:0;opacity:0;pointer-events:none;z-index:-1;left:-9999px;top:-9999px}img,ndw-icon{display:block;overflow:hidden;padding:var(--ndw-spacing-2xs);width:32px;height:32px;object-fit:cover;border:1px solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-xs)}.name{font-size:var(--ndw-font-size-sm);white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapDisplayOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndw-map-display-option', imports: [NgTemplateOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (type() === 'button') {\n  <button\n    type=\"button\"\n    [title]=\"option().description ?? ''\"\n    [class.column]=\"direction() === 'column'\"\n    (click)=\"selectionChange.emit(option())\"\n  >\n    <ng-container *ngTemplateOutlet=\"template\" />\n    <span class=\"name\">{{ option().name }}</span>\n  </button>\n} @else if (type() === 'radio' || type() === 'checkbox') {\n  <label [class.column]=\"direction() === 'column'\" [title]=\"option().description ?? ''\">\n    <input\n      [type]=\"type()\"\n      name=\"{{ group() }}\"\n      [checked]=\"option().active\"\n      (change)=\"selectionChange.emit(option())\"\n    />\n    <ng-container *ngTemplateOutlet=\"template\" />\n    <span class=\"name\">{{ option().name }}</span>\n  </label>\n} @else {\n  <ng-container *ngTemplateOutlet=\"template\" />\n}\n\n<ng-template #template>\n  @if (option().imageLink) {\n    <img [src]=\"option().imageLink\" [alt]=\"option().name\" />\n  } @else if (option().icon) {\n    <ndw-icon [title]=\"option().name\">{{ option().icon }}</ndw-icon>\n  } @else {\n    <ndw-icon>stacks</ndw-icon>\n  }\n</ng-template>\n", styles: ["button,label{padding:0;border:0;display:flex;align-items:center;width:100%;height:40px;gap:var(--ndw-spacing-2xs);color:var(--ndw-color-grey-700);background-color:var(--ndw-color-white);transition:background-color var(--ndw-animation-speed-default) ease-out;border-radius:var(--ndw-border-radius-sm);cursor:pointer}button.column,label.column{flex-direction:column;justify-content:end;width:64px;height:64px}button:not(.column),label:not(.column){padding:var(--ndw-spacing-2xs);gap:var(--ndw-spacing-xs)}button:not(.column):has(input:checked),label:not(.column):has(input:checked){font-weight:var(--ndw-font-weight-bold)}button:hover,label:hover{background-color:var(--ndw-color-grey-100)}button:has(input:checked) img,button:has(input:checked) ndw-icon,label:has(input:checked) img,label:has(input:checked) ndw-icon{box-shadow:0 0 0 2px var(--ndw-color-secondary-400)}button input,label input{visibility:hidden;position:absolute;width:0;height:0;opacity:0;pointer-events:none;z-index:-1;left:-9999px;top:-9999px}img,ndw-icon{display:block;overflow:hidden;padding:var(--ndw-spacing-2xs);width:32px;height:32px;object-fit:cover;border:1px solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-xs)}.name{font-size:var(--ndw-font-size-sm);white-space:nowrap}\n"] }]
+            args: [{ selector: 'ndw-map-display-option', imports: [NgTemplateOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (type() === 'button') {\r\n  <button\r\n    type=\"button\"\r\n    [title]=\"option().description ?? ''\"\r\n    [class.column]=\"direction() === 'column'\"\r\n    (click)=\"selectionChange.emit(option())\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"template\" />\r\n    <span class=\"name\">{{ option().name }}</span>\r\n  </button>\r\n} @else if (type() === 'radio' || type() === 'checkbox') {\r\n  <label [class.column]=\"direction() === 'column'\" [title]=\"option().description ?? ''\">\r\n    <input\r\n      [type]=\"type()\"\r\n      name=\"{{ group() }}\"\r\n      [checked]=\"option().active\"\r\n      (change)=\"selectionChange.emit(option())\"\r\n    />\r\n    <ng-container *ngTemplateOutlet=\"template\" />\r\n    <span class=\"name\">{{ option().name }}</span>\r\n  </label>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"template\" />\r\n}\r\n\r\n<ng-template #template>\r\n  @if (option().imageLink) {\r\n    <img [src]=\"option().imageLink\" [alt]=\"option().name\" />\r\n  } @else if (option().icon) {\r\n    <ndw-icon [title]=\"option().name\">{{ option().icon }}</ndw-icon>\r\n  } @else {\r\n    <ndw-icon>stacks</ndw-icon>\r\n  }\r\n</ng-template>\r\n", styles: ["button,label{padding:0;border:0;display:flex;align-items:center;width:100%;height:40px;gap:var(--ndw-spacing-2xs);color:var(--ndw-color-grey-700);background-color:var(--ndw-color-white);transition:background-color var(--ndw-animation-speed-default) ease-out;border-radius:var(--ndw-border-radius-sm);cursor:pointer}button.column,label.column{flex-direction:column;justify-content:end;width:64px;height:64px}button:not(.column),label:not(.column){padding:var(--ndw-spacing-2xs);gap:var(--ndw-spacing-xs)}button:not(.column):has(input:checked),label:not(.column):has(input:checked){font-weight:var(--ndw-font-weight-bold)}button:hover,label:hover{background-color:var(--ndw-color-grey-100)}button:has(input:checked) img,button:has(input:checked) ndw-icon,label:has(input:checked) img,label:has(input:checked) ndw-icon{box-shadow:0 0 0 2px var(--ndw-color-secondary-400)}button input,label input{visibility:hidden;position:absolute;width:0;height:0;opacity:0;pointer-events:none;z-index:-1;left:-9999px;top:-9999px}img,ndw-icon{display:block;overflow:hidden;padding:var(--ndw-spacing-2xs);width:32px;height:32px;object-fit:cover;border:1px solid var(--ndw-color-grey-200);border-radius:var(--ndw-border-radius-xs)}.name{font-size:var(--ndw-font-size-sm);white-space:nowrap}\n"] }]
         }], propDecorators: { option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: true }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 class MapDisplayComponent {
@@ -3423,11 +3423,11 @@ class MapDisplayComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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;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: "component", type: MapDisplayOptionComponent, selector: "ndw-map-display-option", inputs: ["option", "direction", "type", "group"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.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: "21.0.8", 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\">\r\n  @let activeBackground = activeBackgroundOption();\r\n  @if (activeBackground) {\r\n    <ndw-map-display-option [option]=\"activeBackground\" [type]=\"'none'\" />\r\n  }\r\n\r\n  <button class=\"content-wrapper\" type=\"button\" (click)=\"open.set(!open())\">\r\n    {{ title() }}\r\n  </button>\r\n\r\n  @if (numberOfSelectedLayers() && enableClearLayers()) {\r\n    <ndw-tag (clicked)=\"clearLayers()\">{{ numberOfSelectedLayers() }}</ndw-tag>\r\n  }\r\n\r\n  <ndw-icon class=\"map-control__chevron\">keyboard_arrow_down</ndw-icon>\r\n</div>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"showPopover()\"\r\n  (detach)=\"open.set(false)\"\r\n  (overlayOutsideClick)=\"open.set(false)\"\r\n>\r\n  <div class=\"map-control-dropdown\">\r\n    <header>\r\n      <h3 class=\"ndw-paragraph-bold-lg\">{{ title() }}</h3>\r\n      <button ndwButton tertiary type=\"button\" (click)=\"open.set(false)\">\r\n        <ndw-icon>close</ndw-icon>\r\n        <span class=\"sr-only\">Sluit {{ title() }}</span>\r\n      </button>\r\n    </header>\r\n\r\n    <div class=\"map-control-dropdown__content\">\r\n      @if (linkedBackgroundOptions().length) {\r\n        <section class=\"map-control-dropdown__section\">\r\n          <h4 class=\"ndw-paragraph-bold-md map-control-dropdown__subtitle\">\r\n            {{ backgroundsTitle() }}\r\n          </h4>\r\n          <ul class=\"map-control-dropdown__backgrounds\">\r\n            @for (backgroundOption of linkedBackgroundOptions(); track backgroundOption.id) {\r\n              <li>\r\n                <ndw-map-display-option\r\n                  [option]=\"backgroundOption\"\r\n                  [group]=\"'map-backgrounds'\"\r\n                  [type]=\"'radio'\"\r\n                  [direction]=\"'column'\"\r\n                  (selectionChange)=\"selectBackground($event)\"\r\n                />\r\n              </li>\r\n            }\r\n          </ul>\r\n        </section>\r\n      }\r\n\r\n      @if (linkedLayerOptions().length) {\r\n        <section class=\"map-control-dropdown__section\">\r\n          <h4 class=\"ndw-paragraph-bold-md map-control-dropdown__subtitle\">{{ layersTitle() }}</h4>\r\n          <ul>\r\n            @for (layerOption of linkedLayerOptions(); track layerOption.id) {\r\n              <li>\r\n                <ndw-map-display-option\r\n                  [option]=\"layerOption\"\r\n                  [group]=\"'map-layers'\"\r\n                  [type]=\"layerOptionType()\"\r\n                  [direction]=\"'row'\"\r\n                  (selectionChange)=\"toggleLayer($event)\"\r\n                />\r\n              </li>\r\n            }\r\n          </ul>\r\n        </section>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\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;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: "component", type: MapDisplayOptionComponent, selector: "ndw-map-display-option", inputs: ["option", "direction", "type", "group"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.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: "21.0.8", ngImport: i0, type: MapDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndw-map-display', imports: [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;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"] }]
+            args: [{ selector: 'ndw-map-display', imports: [MapDisplayOptionComponent, OverlayModule, IconComponent, TagComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"map-control\" [class.active]=\"open()\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\r\n  @let activeBackground = activeBackgroundOption();\r\n  @if (activeBackground) {\r\n    <ndw-map-display-option [option]=\"activeBackground\" [type]=\"'none'\" />\r\n  }\r\n\r\n  <button class=\"content-wrapper\" type=\"button\" (click)=\"open.set(!open())\">\r\n    {{ title() }}\r\n  </button>\r\n\r\n  @if (numberOfSelectedLayers() && enableClearLayers()) {\r\n    <ndw-tag (clicked)=\"clearLayers()\">{{ numberOfSelectedLayers() }}</ndw-tag>\r\n  }\r\n\r\n  <ndw-icon class=\"map-control__chevron\">keyboard_arrow_down</ndw-icon>\r\n</div>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"showPopover()\"\r\n  (detach)=\"open.set(false)\"\r\n  (overlayOutsideClick)=\"open.set(false)\"\r\n>\r\n  <div class=\"map-control-dropdown\">\r\n    <header>\r\n      <h3 class=\"ndw-paragraph-bold-lg\">{{ title() }}</h3>\r\n      <button ndwButton tertiary type=\"button\" (click)=\"open.set(false)\">\r\n        <ndw-icon>close</ndw-icon>\r\n        <span class=\"sr-only\">Sluit {{ title() }}</span>\r\n      </button>\r\n    </header>\r\n\r\n    <div class=\"map-control-dropdown__content\">\r\n      @if (linkedBackgroundOptions().length) {\r\n        <section class=\"map-control-dropdown__section\">\r\n          <h4 class=\"ndw-paragraph-bold-md map-control-dropdown__subtitle\">\r\n            {{ backgroundsTitle() }}\r\n          </h4>\r\n          <ul class=\"map-control-dropdown__backgrounds\">\r\n            @for (backgroundOption of linkedBackgroundOptions(); track backgroundOption.id) {\r\n              <li>\r\n                <ndw-map-display-option\r\n                  [option]=\"backgroundOption\"\r\n                  [group]=\"'map-backgrounds'\"\r\n                  [type]=\"'radio'\"\r\n                  [direction]=\"'column'\"\r\n                  (selectionChange)=\"selectBackground($event)\"\r\n                />\r\n              </li>\r\n            }\r\n          </ul>\r\n        </section>\r\n      }\r\n\r\n      @if (linkedLayerOptions().length) {\r\n        <section class=\"map-control-dropdown__section\">\r\n          <h4 class=\"ndw-paragraph-bold-md map-control-dropdown__subtitle\">{{ layersTitle() }}</h4>\r\n          <ul>\r\n            @for (layerOption of linkedLayerOptions(); track layerOption.id) {\r\n              <li>\r\n                <ndw-map-display-option\r\n                  [option]=\"layerOption\"\r\n                  [group]=\"'map-layers'\"\r\n                  [type]=\"layerOptionType()\"\r\n                  [direction]=\"'row'\"\r\n                  (selectionChange)=\"toggleLayer($event)\"\r\n                />\r\n              </li>\r\n            }\r\n          </ul>\r\n        </section>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\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;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: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], backgroundsTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundsTitle", required: false }] }], layersTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "layersTitle", required: false }] }], enableClearLayers: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableClearLayers", required: false }] }], layerOptionType: [{ type: i0.Input, args: [{ isSignal: true, alias: "layerOptionType", required: false }] }], backgroundOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundOptions", required: false }] }], layerOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "layerOptions", required: false }] }], backgroundChange: [{ type: i0.Output, args: ["backgroundChange"] }], layerChange: [{ type: i0.Output, args: ["layerChange"] }], clearAllLayers: [{ type: i0.Output, args: ["clearAllLayers"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
 const MAP_BACKGROUND_IMAGES = {
@@ -3611,13 +3611,13 @@ const MAP_LAYERS = {
 class MapLegendOptionComponent {
     option = input.required(...(ngDevMode ? [{ debugName: "option" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapLegendOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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.outline]=\"opt.outline\"\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    @case ('area') {\n      <div class=\"area\" [style.--map-legend-option-color]=\"opt.color\"></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: 18px;--line-height: 8px;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 .line.outline{background-color:transparent;background-image:none;border:1.5px solid var(--map-legend-option-color)}:host .line.outline.dashed{border:1.5px dashed var(--map-legend-option-color)}: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%)}:host .area{--area-size: 16px;background-color:var(--map-legend-option-color);width:var(--area-size);height:var(--area-size);clip-path:polygon(0 10%,0 75%,70% 100%,100% 25%,75% 0)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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();\r\n<div class=\"option-type\">\r\n  @switch (opt.type) {\r\n    @case ('circle') {\r\n      <div class=\"circle\" [style.--map-legend-option-color]=\"opt.color\"></div>\r\n    }\r\n\r\n    @case ('line') {\r\n      <div\r\n        class=\"line\"\r\n        [class.outline]=\"opt.outline\"\r\n        [class.dashed]=\"opt.fillMode === 'dashed'\"\r\n        [style.--map-legend-option-color]=\"opt.color\"\r\n      ></div>\r\n    }\r\n\r\n    @case ('icon') {\r\n      <ndw-icon class=\"icon\">{{ opt.iconName }}</ndw-icon>\r\n    }\r\n\r\n    @case ('image') {\r\n      <img\r\n        class=\"image\"\r\n        [class.contain]=\"opt.objectFit === 'contain'\"\r\n        [src]=\"opt.src\"\r\n        [alt]=\"opt.label\"\r\n      />\r\n    }\r\n\r\n    @case ('polygon') {\r\n      <div class=\"polygon\" [style.--map-legend-option-color]=\"opt.color\">\r\n        <svg viewBox=\"0 0 20 20\">\r\n          <polygon points=\"10,1 1,19 19,19\" />\r\n        </svg>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n      </div>\r\n    }\r\n\r\n    @case ('area') {\r\n      <div class=\"area\" [style.--map-legend-option-color]=\"opt.color\"></div>\r\n    }\r\n  }\r\n</div>\r\n\r\n<span class=\"ndw-paragraph-md option-label\">\r\n  {{ opt.label }}\r\n</span>\r\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: 18px;--line-height: 8px;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 .line.outline{background-color:transparent;background-image:none;border:1.5px solid var(--map-legend-option-color)}:host .line.outline.dashed{border:1.5px dashed var(--map-legend-option-color)}: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%)}:host .area{--area-size: 16px;background-color:var(--map-legend-option-color);width:var(--area-size);height:var(--area-size);clip-path:polygon(0 10%,0 75%,70% 100%,100% 25%,75% 0)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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.outline]=\"opt.outline\"\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    @case ('area') {\n      <div class=\"area\" [style.--map-legend-option-color]=\"opt.color\"></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: 18px;--line-height: 8px;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 .line.outline{background-color:transparent;background-image:none;border:1.5px solid var(--map-legend-option-color)}:host .line.outline.dashed{border:1.5px dashed var(--map-legend-option-color)}: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%)}:host .area{--area-size: 16px;background-color:var(--map-legend-option-color);width:var(--area-size);height:var(--area-size);clip-path:polygon(0 10%,0 75%,70% 100%,100% 25%,75% 0)}\n"] }]
+                    }, template: "@let opt = option();\r\n<div class=\"option-type\">\r\n  @switch (opt.type) {\r\n    @case ('circle') {\r\n      <div class=\"circle\" [style.--map-legend-option-color]=\"opt.color\"></div>\r\n    }\r\n\r\n    @case ('line') {\r\n      <div\r\n        class=\"line\"\r\n        [class.outline]=\"opt.outline\"\r\n        [class.dashed]=\"opt.fillMode === 'dashed'\"\r\n        [style.--map-legend-option-color]=\"opt.color\"\r\n      ></div>\r\n    }\r\n\r\n    @case ('icon') {\r\n      <ndw-icon class=\"icon\">{{ opt.iconName }}</ndw-icon>\r\n    }\r\n\r\n    @case ('image') {\r\n      <img\r\n        class=\"image\"\r\n        [class.contain]=\"opt.objectFit === 'contain'\"\r\n        [src]=\"opt.src\"\r\n        [alt]=\"opt.label\"\r\n      />\r\n    }\r\n\r\n    @case ('polygon') {\r\n      <div class=\"polygon\" [style.--map-legend-option-color]=\"opt.color\">\r\n        <svg viewBox=\"0 0 20 20\">\r\n          <polygon points=\"10,1 1,19 19,19\" />\r\n        </svg>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n      </div>\r\n    }\r\n\r\n    @case ('area') {\r\n      <div class=\"area\" [style.--map-legend-option-color]=\"opt.color\"></div>\r\n    }\r\n  }\r\n</div>\r\n\r\n<span class=\"ndw-paragraph-md option-label\">\r\n  {{ opt.label }}\r\n</span>\r\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: 18px;--line-height: 8px;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 .line.outline{background-color:transparent;background-image:none;border:1.5px solid var(--map-legend-option-color)}:host .line.outline.dashed{border:1.5px dashed var(--map-legend-option-color)}: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%)}:host .area{--area-size: 16px;background-color:var(--map-legend-option-color);width:var(--area-size);height:var(--area-size);clip-path:polygon(0 10%,0 75%,70% 100%,100% 25%,75% 0)}\n"] }]
         }], propDecorators: { option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: true }] }] } });
 class MapLegendGroupComponent {
@@ -3625,13 +3625,13 @@ class MapLegendGroupComponent {
     singleGroup = input(false, ...(ngDevMode ? [{ debugName: "singleGroup" }] : []));
     index = input(0, ...(ngDevMode ? [{ debugName: "index" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapLegendGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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) {\r\n  <h4\r\n    class=\"ndw-paragraph-bold-md group-title\"\r\n    [class.sr-only]=\"singleGroup()\"\r\n    [class.group-title--first]=\"index() === 0\"\r\n  >\r\n    {{ group().label }}\r\n  </h4>\r\n}\r\n<ul>\r\n  @for (option of group().options; let i = $index; track i) {\r\n    <ndw-map-legend-option [option]=\"option\" />\r\n  }\r\n</ul>\r\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: "21.0.8", 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"] }]
+                    }, template: "@if (group().label) {\r\n  <h4\r\n    class=\"ndw-paragraph-bold-md group-title\"\r\n    [class.sr-only]=\"singleGroup()\"\r\n    [class.group-title--first]=\"index() === 0\"\r\n  >\r\n    {{ group().label }}\r\n  </h4>\r\n}\r\n<ul>\r\n  @for (option of group().options; let i = $index; track i) {\r\n    <ndw-map-legend-option [option]=\"option\" />\r\n  }\r\n</ul>\r\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"] }]
         }], propDecorators: { group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], singleGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleGroup", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }] } });
 class MapLegendComponent {
@@ -3649,29 +3649,29 @@ class MapLegendComponent {
         afterNextRender(() => this.htmlIsRendered.set(true));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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$2.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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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()) {\r\n  <button\r\n    class=\"map-control\"\r\n    [class.active]=\"open()\"\r\n    cdkOverlayOrigin\r\n    #trigger=\"cdkOverlayOrigin\"\r\n    (click)=\"open.set(!open())\"\r\n  >\r\n    <ndw-icon>{{ icon() }}</ndw-icon>\r\n    <span class=\"content-wrapper\">\r\n      {{ title() }}\r\n    </span>\r\n    <ndw-icon class=\"map-control__chevron\">keyboard_arrow_down</ndw-icon>\r\n  </button>\r\n\r\n  <ng-template\r\n    cdkConnectedOverlay\r\n    [cdkConnectedOverlayOrigin]=\"trigger\"\r\n    [cdkConnectedOverlayOpen]=\"showPopover()\"\r\n    (detach)=\"open.set(false)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"dropdown\" />\r\n  </ng-template>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"dropdown\" />\r\n}\r\n\r\n<ng-template #dropdown>\r\n  <div class=\"map-control-dropdown\" [class.fixed]=\"isFixedViewMode()\">\r\n    <header>\r\n      <h3 class=\"ndw-paragraph-bold-lg\">{{ title() }}</h3>\r\n\r\n      @if (isDropdownViewMode()) {\r\n        <button\r\n          class=\"map-control-dropdown__close\"\r\n          ndwButton\r\n          tertiary\r\n          type=\"button\"\r\n          (click)=\"open.set(false)\"\r\n        >\r\n          <ndw-icon>close</ndw-icon>\r\n          <span class=\"sr-only\">Sluit {{ title() }}</span>\r\n        </button>\r\n      }\r\n    </header>\r\n\r\n    <div class=\"map-control-dropdown__content\">\r\n      @if (hasJustOneGroup()) {\r\n        <ndw-map-legend-group [group]=\"groups()[0]\" [singleGroup]=\"true\" />\r\n      } @else {\r\n        <ul class=\"groups\">\r\n          @for (group of groups(); let i = $index; track i) {\r\n            @if (!!group.options.length) {\r\n              <ndw-map-legend-group [group]=\"group\" [index]=\"i\" />\r\n            }\r\n          }\r\n        </ul>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\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$2.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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.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: "21.0.8", 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"] }]
+            args: [{ selector: 'ndw-map-legend', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, NgTemplateOutlet, OverlayModule, MapLegendGroupComponent], template: "@if (isDropdownViewMode()) {\r\n  <button\r\n    class=\"map-control\"\r\n    [class.active]=\"open()\"\r\n    cdkOverlayOrigin\r\n    #trigger=\"cdkOverlayOrigin\"\r\n    (click)=\"open.set(!open())\"\r\n  >\r\n    <ndw-icon>{{ icon() }}</ndw-icon>\r\n    <span class=\"content-wrapper\">\r\n      {{ title() }}\r\n    </span>\r\n    <ndw-icon class=\"map-control__chevron\">keyboard_arrow_down</ndw-icon>\r\n  </button>\r\n\r\n  <ng-template\r\n    cdkConnectedOverlay\r\n    [cdkConnectedOverlayOrigin]=\"trigger\"\r\n    [cdkConnectedOverlayOpen]=\"showPopover()\"\r\n    (detach)=\"open.set(false)\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"dropdown\" />\r\n  </ng-template>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"dropdown\" />\r\n}\r\n\r\n<ng-template #dropdown>\r\n  <div class=\"map-control-dropdown\" [class.fixed]=\"isFixedViewMode()\">\r\n    <header>\r\n      <h3 class=\"ndw-paragraph-bold-lg\">{{ title() }}</h3>\r\n\r\n      @if (isDropdownViewMode()) {\r\n        <button\r\n          class=\"map-control-dropdown__close\"\r\n          ndwButton\r\n          tertiary\r\n          type=\"button\"\r\n          (click)=\"open.set(false)\"\r\n        >\r\n          <ndw-icon>close</ndw-icon>\r\n          <span class=\"sr-only\">Sluit {{ title() }}</span>\r\n        </button>\r\n      }\r\n    </header>\r\n\r\n    <div class=\"map-control-dropdown__content\">\r\n      @if (hasJustOneGroup()) {\r\n        <ndw-map-legend-group [group]=\"groups()[0]\" [singleGroup]=\"true\" />\r\n      } @else {\r\n        <ul class=\"groups\">\r\n          @for (group of groups(); let i = $index; track i) {\r\n            @if (!!group.options.length) {\r\n              <ndw-map-legend-group [group]=\"group\" [index]=\"i\" />\r\n            }\r\n          }\r\n        </ul>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["*{box-sizing:border-box}ul{list-style-type:none;padding:0;margin:0}.groups{padding:var(--ndw-spacing-2xs)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
 class ModalContentComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ModalContentComponent, isStandalone: true, selector: "ndw-modal-content", ngImport: i0, template: "<ng-content />\r\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ModalContentComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-modal-content', template: "<ng-content />\n", styles: [":host{font-size:var(--ndw-font-size-sm);max-height:100%;overflow-y:auto;word-break:break-word}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-modal-content', template: "<ng-content />\r\n", styles: [":host{font-size:var(--ndw-font-size-sm);max-height:100%;overflow-y:auto;word-break:break-word}\n"] }]
         }] });
 class ModalFooterComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ModalFooterComponent, isStandalone: true, selector: "ndw-modal-footer", ngImport: i0, template: "<ng-content />\n", styles: [":host{align-items:center;display:flex;font-size:var(--ndw-font-size-sm);justify-content:flex-end;gap:var(--ndw-spacing-md);margin-top:var(--ndw-spacing-xs);word-break:break-word}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ModalFooterComponent, isStandalone: true, selector: "ndw-modal-footer", ngImport: i0, template: "<ng-content />\r\n", styles: [":host{align-items:center;display:flex;font-size:var(--ndw-font-size-sm);justify-content:flex-end;gap:var(--ndw-spacing-md);margin-top:var(--ndw-spacing-xs);word-break:break-word}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ModalFooterComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-modal-footer', template: "<ng-content />\n", styles: [":host{align-items:center;display:flex;font-size:var(--ndw-font-size-sm);justify-content:flex-end;gap:var(--ndw-spacing-md);margin-top:var(--ndw-spacing-xs);word-break:break-word}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-modal-footer', template: "<ng-content />\r\n", styles: [":host{align-items:center;display:flex;font-size:var(--ndw-font-size-sm);justify-content:flex-end;gap:var(--ndw-spacing-md);margin-top:var(--ndw-spacing-xs);word-break:break-word}\n"] }]
         }] });
 class ModalService extends Dialog {
@@ -3710,24 +3710,24 @@ class ModalHeaderComponent {
         this.#modalService?.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ModalHeaderComponent, isStandalone: true, selector: "ndw-modal-header", ngImport: i0, template: "<ng-content />\n<button\n  ndwButton\n  tertiary\n  extra-small\n  ariaLabel=\"Close\"\n  data-testid=\"close-button\"\n  (click)=\"detachModal()\"\n>\n  <ndw-icon>close</ndw-icon>\n</button>\n", styles: [":host{display:block;align-items:center;font-family:var(--ndw-font-family-heading);font-size:var(--ndw-font-size-lg);font-weight:700;word-break:break-word}.float{float:right;margin-left:var(--ndw-spacing-sm);transition:transform var(--ndw-animation-speed-fast) ease-in-out}.float.collapsed{transform:rotate(180deg)}\n", ":host{display:grid;font-family:var(--ndw-font-family-heading);grid-template-columns:1fr auto}ndw-icon{color:var(--ndw-color-primary)}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ModalHeaderComponent, isStandalone: true, selector: "ndw-modal-header", ngImport: i0, template: "<ng-content />\r\n<button\r\n  ndwButton\r\n  tertiary\r\n  extra-small\r\n  ariaLabel=\"Close\"\r\n  data-testid=\"close-button\"\r\n  (click)=\"detachModal()\"\r\n>\r\n  <ndw-icon>close</ndw-icon>\r\n</button>\r\n", styles: [":host{display:block;align-items:center;font-family:var(--ndw-font-family-heading);font-size:var(--ndw-font-size-lg);font-weight:700;word-break:break-word}.float{float:right;margin-left:var(--ndw-spacing-sm);transition:transform var(--ndw-animation-speed-fast) ease-in-out}.float.collapsed{transform:rotate(180deg)}\n", ":host{display:grid;font-family:var(--ndw-font-family-heading);grid-template-columns:1fr auto}ndw-icon{color:var(--ndw-color-primary)}\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: "21.0.8", ngImport: i0, type: ModalHeaderComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonDirective, IconComponent], selector: 'ndw-modal-header', template: "<ng-content />\n<button\n  ndwButton\n  tertiary\n  extra-small\n  ariaLabel=\"Close\"\n  data-testid=\"close-button\"\n  (click)=\"detachModal()\"\n>\n  <ndw-icon>close</ndw-icon>\n</button>\n", styles: [":host{display:block;align-items:center;font-family:var(--ndw-font-family-heading);font-size:var(--ndw-font-size-lg);font-weight:700;word-break:break-word}.float{float:right;margin-left:var(--ndw-spacing-sm);transition:transform var(--ndw-animation-speed-fast) ease-in-out}.float.collapsed{transform:rotate(180deg)}\n", ":host{display:grid;font-family:var(--ndw-font-family-heading);grid-template-columns:1fr auto}ndw-icon{color:var(--ndw-color-primary)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonDirective, IconComponent], selector: 'ndw-modal-header', template: "<ng-content />\r\n<button\r\n  ndwButton\r\n  tertiary\r\n  extra-small\r\n  ariaLabel=\"Close\"\r\n  data-testid=\"close-button\"\r\n  (click)=\"detachModal()\"\r\n>\r\n  <ndw-icon>close</ndw-icon>\r\n</button>\r\n", styles: [":host{display:block;align-items:center;font-family:var(--ndw-font-family-heading);font-size:var(--ndw-font-size-lg);font-weight:700;word-break:break-word}.float{float:right;margin-left:var(--ndw-spacing-sm);transition:transform var(--ndw-animation-speed-fast) ease-in-out}.float.collapsed{transform:rotate(180deg)}\n", ":host{display:grid;font-family:var(--ndw-font-family-heading);grid-template-columns:1fr auto}ndw-icon{color:var(--ndw-color-primary)}\n"] }]
         }] });
 class ModalComponent {
     size = input('sm', ...(ngDevMode ? [{ debugName: "size" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: ModalComponent, isStandalone: true, selector: "ndw-modal", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.modal-size-md": "size() === \"md\"", "class.modal-size-sm": "size() === \"sm\"" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-content);padding:var(--ndw-spacing-lg);overflow:hidden;display:grid}:host .content{display:grid;gap:var(--ndw-spacing-md);min-height:var(--header-height)}:host.collapsible{box-sizing:content-box;grid-template-rows:0fr;transition:grid-template-rows var(--ndw-animation-speed-fast) ease-in-out}:host.open{grid-template-rows:1fr}\n", ":host{box-sizing:border-box;display:flex;flex-direction:column;max-height:100svh;max-width:var(--ndw-modal-width-sm);width:100vw}:host.modal-size-md{max-width:var(--ndw-modal-width-md)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: ModalComponent, isStandalone: true, selector: "ndw-modal", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.modal-size-md": "size() === \"md\"", "class.modal-size-sm": "size() === \"sm\"" } }, ngImport: i0, template: "<ng-content />\r\n", styles: [":host{background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-content);padding:var(--ndw-spacing-lg);overflow:hidden;display:grid}:host .content{display:grid;gap:var(--ndw-spacing-md);min-height:var(--header-height)}:host.collapsible{box-sizing:content-box;grid-template-rows:0fr;transition:grid-template-rows var(--ndw-animation-speed-fast) ease-in-out}:host.open{grid-template-rows:1fr}\n", ":host{box-sizing:border-box;display:flex;flex-direction:column;max-height:100svh;max-width:var(--ndw-modal-width-sm);width:100vw}:host.modal-size-md{max-width:var(--ndw-modal-width-md)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.modal-size-md]': 'size() === "md"',
                         '[class.modal-size-sm]': 'size() === "sm"',
-                    }, selector: 'ndw-modal', template: "<ng-content />\n", styles: [":host{background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-content);padding:var(--ndw-spacing-lg);overflow:hidden;display:grid}:host .content{display:grid;gap:var(--ndw-spacing-md);min-height:var(--header-height)}:host.collapsible{box-sizing:content-box;grid-template-rows:0fr;transition:grid-template-rows var(--ndw-animation-speed-fast) ease-in-out}:host.open{grid-template-rows:1fr}\n", ":host{box-sizing:border-box;display:flex;flex-direction:column;max-height:100svh;max-width:var(--ndw-modal-width-sm);width:100vw}:host.modal-size-md{max-width:var(--ndw-modal-width-md)}\n"] }]
+                    }, selector: 'ndw-modal', template: "<ng-content />\r\n", styles: [":host{background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-content);padding:var(--ndw-spacing-lg);overflow:hidden;display:grid}:host .content{display:grid;gap:var(--ndw-spacing-md);min-height:var(--header-height)}:host.collapsible{box-sizing:content-box;grid-template-rows:0fr;transition:grid-template-rows var(--ndw-animation-speed-fast) ease-in-out}:host.open{grid-template-rows:1fr}\n", ":host{box-sizing:border-box;display:flex;flex-direction:column;max-height:100svh;max-width:var(--ndw-modal-width-sm);width:100vw}:host.modal-size-md{max-width:var(--ndw-modal-width-md)}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 const MODAL_COMPONENTS = [
@@ -3793,7 +3793,7 @@ class MultiSelectComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 }, allowSelectAll: { classPropertyName: "allowSelectAll", publicName: "allowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataSource: "dataSourceChange" }, ngImport: i0, template: "<ndw-dropdown\n  prefixIcon=\"filter_alt\"\n  [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\n  (tagClicked)=\"toggleSelectAll(false)\"\n  (isOpenChange)=\"isOpen.set($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 dataSourceFiltered(); track checkbox.id) {\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          [disabled]=\"checkbox.disabled === true\"\n          (checkedChange)=\"checkboxChanged(checkbox.id)\"\n        >\n          @if (checkbox.image && isOpen()) {\n            <img [src]=\"checkbox.image.src\" [alt]=\"checkbox.image.alt\" />\n          }\n        </ndw-list-item>\n      }\n    </ndw-list>\n  }\n  <div class=\"ndw-dialog-footer\">\n    @if (allowSelectAll()) {\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    }\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;height:calc(var(--ndw-spacing-2xl) + 2 * var(--ndw-border-size-sm))}.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", "displayLargeNumbers", "buttonIcon", "buttonLabel", "checkable", "checkType", "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: "21.0.8", 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 }, allowSelectAll: { classPropertyName: "allowSelectAll", publicName: "allowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataSource: "dataSourceChange" }, ngImport: i0, template: "<ndw-dropdown\r\n  prefixIcon=\"filter_alt\"\r\n  [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\r\n  (tagClicked)=\"toggleSelectAll(false)\"\r\n  (isOpenChange)=\"isOpen.set($event)\"\r\n  [buttonText]=\"buttonText()\"\r\n  [disabled]=\"disabled()\"\r\n  [chevron]=\"chevron()\"\r\n  [prefixIcon]=\"prefixIcon()\"\r\n>\r\n  <ndw-form-field [label]=\"searchLabel()\" [hideLabel]=\"true\">\r\n    <input\r\n      ndwInput\r\n      type=\"search\"\r\n      [value]=\"searchInputValue()\"\r\n      (input)=\"searchInputChanged($event)\"\r\n      [placeholder]=\"searchPlaceholder()\"\r\n    />\r\n  </ndw-form-field>\r\n  @if (noSearchResults()) {\r\n    <div class=\"no-search-results\">\r\n      <ndw-icon>sentiment_dissatisfied</ndw-icon>\r\n      {{ noResultText() }}\r\n    </div>\r\n  } @else {\r\n    <ndw-list class=\"multi-select-container\">\r\n      @for (checkbox of dataSourceFiltered(); track checkbox.id) {\r\n        <ndw-list-item\r\n          [class.last-checked]=\"lastCheckedElementId() === checkbox.id\"\r\n          [checkable]=\"true\"\r\n          [checked]=\"checkbox.value\"\r\n          [prefixIcon]=\"checkbox.icon\"\r\n          [subtitle]=\"checkbox.label\"\r\n          [disabled]=\"checkbox.disabled === true\"\r\n          (checkedChange)=\"checkboxChanged(checkbox.id)\"\r\n        >\r\n          @if (checkbox.image && isOpen()) {\r\n            <img [src]=\"checkbox.image.src\" [alt]=\"checkbox.image.alt\" />\r\n          }\r\n        </ndw-list-item>\r\n      }\r\n    </ndw-list>\r\n  }\r\n  <div class=\"ndw-dialog-footer\">\r\n    @if (allowSelectAll()) {\r\n      @if (selectAmount() === dataSource().length) {\r\n        <button ndwLink (click)=\"toggleSelectAll(false)\">\r\n          {{ selectAllText().deselect }}\r\n        </button>\r\n      } @else {\r\n        <button ndwLink (click)=\"toggleSelectAll(true)\">\r\n          {{ selectAllText().select }}\r\n        </button>\r\n      }\r\n    }\r\n    <div class=\"ndw-dialog-footer-total\" aria-live=\"polite\">\r\n      Geselecteerd: <strong>{{ selectAmount() }}</strong>\r\n    </div>\r\n  </div>\r\n</ndw-dropdown>\r\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;height:calc(var(--ndw-spacing-2xl) + 2 * var(--ndw-border-size-sm))}.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", "displayLargeNumbers", "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: "21.0.8", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -3804,16 +3804,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         IconComponent,
                         ListComponent,
                         ListItemComponent,
-                    ], selector: 'ndw-multi-select', template: "<ndw-dropdown\n  prefixIcon=\"filter_alt\"\n  [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\n  (tagClicked)=\"toggleSelectAll(false)\"\n  (isOpenChange)=\"isOpen.set($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 dataSourceFiltered(); track checkbox.id) {\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          [disabled]=\"checkbox.disabled === true\"\n          (checkedChange)=\"checkboxChanged(checkbox.id)\"\n        >\n          @if (checkbox.image && isOpen()) {\n            <img [src]=\"checkbox.image.src\" [alt]=\"checkbox.image.alt\" />\n          }\n        </ndw-list-item>\n      }\n    </ndw-list>\n  }\n  <div class=\"ndw-dialog-footer\">\n    @if (allowSelectAll()) {\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    }\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;height:calc(var(--ndw-spacing-2xl) + 2 * var(--ndw-border-size-sm))}.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"] }]
+                    ], selector: 'ndw-multi-select', template: "<ndw-dropdown\r\n  prefixIcon=\"filter_alt\"\r\n  [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\r\n  (tagClicked)=\"toggleSelectAll(false)\"\r\n  (isOpenChange)=\"isOpen.set($event)\"\r\n  [buttonText]=\"buttonText()\"\r\n  [disabled]=\"disabled()\"\r\n  [chevron]=\"chevron()\"\r\n  [prefixIcon]=\"prefixIcon()\"\r\n>\r\n  <ndw-form-field [label]=\"searchLabel()\" [hideLabel]=\"true\">\r\n    <input\r\n      ndwInput\r\n      type=\"search\"\r\n      [value]=\"searchInputValue()\"\r\n      (input)=\"searchInputChanged($event)\"\r\n      [placeholder]=\"searchPlaceholder()\"\r\n    />\r\n  </ndw-form-field>\r\n  @if (noSearchResults()) {\r\n    <div class=\"no-search-results\">\r\n      <ndw-icon>sentiment_dissatisfied</ndw-icon>\r\n      {{ noResultText() }}\r\n    </div>\r\n  } @else {\r\n    <ndw-list class=\"multi-select-container\">\r\n      @for (checkbox of dataSourceFiltered(); track checkbox.id) {\r\n        <ndw-list-item\r\n          [class.last-checked]=\"lastCheckedElementId() === checkbox.id\"\r\n          [checkable]=\"true\"\r\n          [checked]=\"checkbox.value\"\r\n          [prefixIcon]=\"checkbox.icon\"\r\n          [subtitle]=\"checkbox.label\"\r\n          [disabled]=\"checkbox.disabled === true\"\r\n          (checkedChange)=\"checkboxChanged(checkbox.id)\"\r\n        >\r\n          @if (checkbox.image && isOpen()) {\r\n            <img [src]=\"checkbox.image.src\" [alt]=\"checkbox.image.alt\" />\r\n          }\r\n        </ndw-list-item>\r\n      }\r\n    </ndw-list>\r\n  }\r\n  <div class=\"ndw-dialog-footer\">\r\n    @if (allowSelectAll()) {\r\n      @if (selectAmount() === dataSource().length) {\r\n        <button ndwLink (click)=\"toggleSelectAll(false)\">\r\n          {{ selectAllText().deselect }}\r\n        </button>\r\n      } @else {\r\n        <button ndwLink (click)=\"toggleSelectAll(true)\">\r\n          {{ selectAllText().select }}\r\n        </button>\r\n      }\r\n    }\r\n    <div class=\"ndw-dialog-footer-total\" aria-live=\"polite\">\r\n      Geselecteerd: <strong>{{ selectAmount() }}</strong>\r\n    </div>\r\n  </div>\r\n</ndw-dropdown>\r\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;height:calc(var(--ndw-spacing-2xl) + 2 * var(--ndw-border-size-sm))}.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"] }]
         }], propDecorators: { buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: true }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultText", required: false }] }], chevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevron", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectAmountHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAmountHidden", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], allowSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSelectAll", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }, { type: i0.Output, args: ["dataSourceChange"] }] } });
 class RouterBreadcrumbsComponent extends CoreRouterBreadcrumbsComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RouterBreadcrumbsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: RouterBreadcrumbsComponent, isStandalone: true, selector: "ndw-router-breadcrumbs", usesInheritance: true, ngImport: i0, template: "<ndw-breadcrumb-group>\r\n  @for (breadcrumb of breadcrumbs$ | async; track breadcrumb.url) {\r\n    <ndw-breadcrumb [link]=\"breadcrumb.url\">{{ breadcrumb.title }}</ndw-breadcrumb>\r\n  }\r\n</ndw-breadcrumb-group>\r\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: "21.0.8", ngImport: i0, type: RouterBreadcrumbsComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [BreadcrumbGroupComponent, BreadcrumbComponent, AsyncPipe], selector: 'ndw-router-breadcrumbs', 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" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [BreadcrumbGroupComponent, BreadcrumbComponent, AsyncPipe], selector: 'ndw-router-breadcrumbs', template: "<ndw-breadcrumb-group>\r\n  @for (breadcrumb of breadcrumbs$ | async; track breadcrumb.url) {\r\n    <ndw-breadcrumb [link]=\"breadcrumb.url\">{{ breadcrumb.title }}</ndw-breadcrumb>\r\n  }\r\n</ndw-breadcrumb-group>\r\n" }]
         }] });
 const initialDragElementDimensions = {
@@ -3997,13 +3997,13 @@ class SplitterComponent {
         return clamp(width, this.safeMinPanelSize(), this.safeMaxPanelSize());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SplitterComponent, isStandalone: true, selector: "ndw-splitter", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, initialPanelSize: { classPropertyName: "initialPanelSize", publicName: "initialPanelSize", isSignal: true, isRequired: false, transformFunction: null }, minimumPanelSize: { classPropertyName: "minimumPanelSize", publicName: "minimumPanelSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.disabled": "disabled()" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "splitter", first: true, predicate: ["splitter"], descendants: true, isSignal: true }, { propertyName: "cdkDrag", first: true, predicate: CdkDrag, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #container\n  class=\"panels\"\n  [class]=\"{\n    horizontal: horizontal(),\n    vertical: !horizontal(),\n    dragging: isDragging(),\n  }\"\n>\n  <div\n    class=\"panel\"\n    [style]=\"{\n      width: horizontal() ? '100%' : firstPanelSize() + 'px',\n      height: horizontal() ? firstPanelSize() + 'px' : '100%',\n    }\"\n  >\n    <ng-content select=\"[first-panel]\"></ng-content>\n  </div>\n  <div\n    #splitter\n    class=\"splitter\"\n    role=\"separator\"\n    aria-orientation=\"{{ horizontal() ? 'horizontal' : 'vertical' }}\"\n    [attr.aria-valuenow]=\"firstPanelSize()\"\n    [attr.aria-valuemin]=\"safeMinPanelSize()\"\n    [attr.aria-valuemax]=\"safeMaxPanelSize()\"\n    cdkDrag\n    [cdkDragLockAxis]=\"horizontal() ? 'y' : 'x'\"\n    [class.disabled]=\"disabled()\"\n    [cdkDragBoundary]=\"container\"\n    (cdkDragStarted)=\"onDragStarted()\"\n    (cdkDragMoved)=\"onDragMoved()\"\n    (cdkDragEnded)=\"onDragEnded()\"\n    (mousedown)=\"onSplitterMouseDown()\"\n    (mouseup)=\"onSplitterMouseUp()\"\n    [cdkDragConstrainPosition]=\"constrainPosition()\"\n  >\n    @if (horizontal()) {\n      <svg viewBox=\"0 0 28 4\" xmlns=\"http://www.w3.org/2000/svg\" role=\"presentation\">\n        @for (i of [0, 1, 2]; track i) {\n          <circle [attr.cx]=\"2 + i * 12\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n        }\n      </svg>\n    } @else {\n      <svg viewBox=\"0 0 4 28\" xmlns=\"http://www.w3.org/2000/svg\" role=\"presentation\">\n        @for (i of [0, 1, 2]; track i) {\n          <circle cx=\"2\" [attr.cy]=\"2 + i * 12\" r=\"2\" fill=\"currentColor\" />\n        }\n      </svg>\n    }\n  </div>\n  <div\n    class=\"panel\"\n    [style]=\"{\n      width: horizontal() ? '100%' : secondPanelSize() + 'px',\n      height: horizontal() ? secondPanelSize() + 'px' : '100%',\n    }\"\n  >\n    <ng-content select=\"[second-panel]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block;--splitter-width: var(--ndw-spacing-sm)}:host.disabled{--splitter-width: var(--ndw-spacing-2xs)}:host{--half-splitter-width: calc(var(--splitter-width) / 2)}.panels{position:relative;display:flex;height:100%;width:100%}.panels .panel{display:flex;min-height:0;min-width:0;flex-grow:1;overflow:auto}.panels .splitter{position:absolute;display:flex;align-items:center;justify-content:center;background-color:var(--ndw-color-grey-200)}.panels .splitter:hover,.panels .splitter.dragging{background-color:var(--ndw-color-grey-300);transition:background-color var(--ndw-animation-speed-fast) ease-in-out}.panels .splitter svg{color:var(--ndw-color-grey-400)}.panels .splitter.disabled{pointer-events:none}.panels .splitter.disabled svg{display:none}.panels.dragging .splitter{background-color:var(--ndw-color-grey-300)}.panels:not(:hover .dragging) .panel{transition:all var(--ndw-animation-speed-fast) ease-in-out}.panels:not(:hover .dragging) .splitter{transition:all var(--ndw-animation-speed-fast) ease-in-out}.panels.vertical{flex-direction:row}.panels.vertical .panel{height:100%;width:50%}.panels.vertical .panel:first-of-type{margin-right:calc(var(--half-splitter-width) - .5px)}.panels.vertical .panel:last-of-type{margin-left:calc(var(--half-splitter-width) - .5px)}.panels.vertical .splitter{left:calc(50% - var(--half-splitter-width));height:100%;width:var(--splitter-width);cursor:ew-resize}.panels.vertical .splitter svg{width:var(--ndw-spacing-2xs)}.panels.horizontal{flex-direction:column}.panels.horizontal .panel{height:50%;width:100%}.panels.horizontal .panel:first-of-type{margin-bottom:calc(var(--half-splitter-width) - .5px)}.panels.horizontal .panel:last-of-type{margin-top:calc(var(--half-splitter-width) - .5px)}.panels.horizontal .splitter{top:calc(50% - var(--half-splitter-width));height:var(--splitter-width);width:100%;cursor:ns-resize}.panels.horizontal .splitter svg{height:var(--ndw-spacing-2xs)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SplitterComponent, isStandalone: true, selector: "ndw-splitter", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, initialPanelSize: { classPropertyName: "initialPanelSize", publicName: "initialPanelSize", isSignal: true, isRequired: false, transformFunction: null }, minimumPanelSize: { classPropertyName: "minimumPanelSize", publicName: "minimumPanelSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.disabled": "disabled()" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "splitter", first: true, predicate: ["splitter"], descendants: true, isSignal: true }, { propertyName: "cdkDrag", first: true, predicate: CdkDrag, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  #container\r\n  class=\"panels\"\r\n  [class]=\"{\r\n    horizontal: horizontal(),\r\n    vertical: !horizontal(),\r\n    dragging: isDragging(),\r\n  }\"\r\n>\r\n  <div\r\n    class=\"panel\"\r\n    [style]=\"{\r\n      width: horizontal() ? '100%' : firstPanelSize() + 'px',\r\n      height: horizontal() ? firstPanelSize() + 'px' : '100%',\r\n    }\"\r\n  >\r\n    <ng-content select=\"[first-panel]\"></ng-content>\r\n  </div>\r\n  <div\r\n    #splitter\r\n    class=\"splitter\"\r\n    role=\"separator\"\r\n    aria-orientation=\"{{ horizontal() ? 'horizontal' : 'vertical' }}\"\r\n    [attr.aria-valuenow]=\"firstPanelSize()\"\r\n    [attr.aria-valuemin]=\"safeMinPanelSize()\"\r\n    [attr.aria-valuemax]=\"safeMaxPanelSize()\"\r\n    cdkDrag\r\n    [cdkDragLockAxis]=\"horizontal() ? 'y' : 'x'\"\r\n    [class.disabled]=\"disabled()\"\r\n    [cdkDragBoundary]=\"container\"\r\n    (cdkDragStarted)=\"onDragStarted()\"\r\n    (cdkDragMoved)=\"onDragMoved()\"\r\n    (cdkDragEnded)=\"onDragEnded()\"\r\n    (mousedown)=\"onSplitterMouseDown()\"\r\n    (mouseup)=\"onSplitterMouseUp()\"\r\n    [cdkDragConstrainPosition]=\"constrainPosition()\"\r\n  >\r\n    @if (horizontal()) {\r\n      <svg viewBox=\"0 0 28 4\" xmlns=\"http://www.w3.org/2000/svg\" role=\"presentation\">\r\n        @for (i of [0, 1, 2]; track i) {\r\n          <circle [attr.cx]=\"2 + i * 12\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\r\n        }\r\n      </svg>\r\n    } @else {\r\n      <svg viewBox=\"0 0 4 28\" xmlns=\"http://www.w3.org/2000/svg\" role=\"presentation\">\r\n        @for (i of [0, 1, 2]; track i) {\r\n          <circle cx=\"2\" [attr.cy]=\"2 + i * 12\" r=\"2\" fill=\"currentColor\" />\r\n        }\r\n      </svg>\r\n    }\r\n  </div>\r\n  <div\r\n    class=\"panel\"\r\n    [style]=\"{\r\n      width: horizontal() ? '100%' : secondPanelSize() + 'px',\r\n      height: horizontal() ? secondPanelSize() + 'px' : '100%',\r\n    }\"\r\n  >\r\n    <ng-content select=\"[second-panel]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;--splitter-width: var(--ndw-spacing-sm)}:host.disabled{--splitter-width: var(--ndw-spacing-2xs)}:host{--half-splitter-width: calc(var(--splitter-width) / 2)}.panels{position:relative;display:flex;height:100%;width:100%}.panels .panel{display:flex;min-height:0;min-width:0;flex-grow:1;overflow:auto}.panels .splitter{position:absolute;display:flex;align-items:center;justify-content:center;background-color:var(--ndw-color-grey-200)}.panels .splitter:hover,.panels .splitter.dragging{background-color:var(--ndw-color-grey-300);transition:background-color var(--ndw-animation-speed-fast) ease-in-out}.panels .splitter svg{color:var(--ndw-color-grey-400)}.panels .splitter.disabled{pointer-events:none}.panels .splitter.disabled svg{display:none}.panels.dragging .splitter{background-color:var(--ndw-color-grey-300)}.panels:not(:hover .dragging) .panel{transition:all var(--ndw-animation-speed-fast) ease-in-out}.panels:not(:hover .dragging) .splitter{transition:all var(--ndw-animation-speed-fast) ease-in-out}.panels.vertical{flex-direction:row}.panels.vertical .panel{height:100%;width:50%}.panels.vertical .panel:first-of-type{margin-right:calc(var(--half-splitter-width) - .5px)}.panels.vertical .panel:last-of-type{margin-left:calc(var(--half-splitter-width) - .5px)}.panels.vertical .splitter{left:calc(50% - var(--half-splitter-width));height:100%;width:var(--splitter-width);cursor:ew-resize}.panels.vertical .splitter svg{width:var(--ndw-spacing-2xs)}.panels.horizontal{flex-direction:column}.panels.horizontal .panel{height:50%;width:100%}.panels.horizontal .panel:first-of-type{margin-bottom:calc(var(--half-splitter-width) - .5px)}.panels.horizontal .panel:last-of-type{margin-top:calc(var(--half-splitter-width) - .5px)}.panels.horizontal .splitter{top:calc(50% - var(--half-splitter-width));height:var(--splitter-width);width:100%;cursor:ns-resize}.panels.horizontal .splitter svg{height:var(--ndw-spacing-2xs)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SplitterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndw-splitter', imports: [DragDropModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.disabled]': 'disabled()',
-                    }, template: "<div\n  #container\n  class=\"panels\"\n  [class]=\"{\n    horizontal: horizontal(),\n    vertical: !horizontal(),\n    dragging: isDragging(),\n  }\"\n>\n  <div\n    class=\"panel\"\n    [style]=\"{\n      width: horizontal() ? '100%' : firstPanelSize() + 'px',\n      height: horizontal() ? firstPanelSize() + 'px' : '100%',\n    }\"\n  >\n    <ng-content select=\"[first-panel]\"></ng-content>\n  </div>\n  <div\n    #splitter\n    class=\"splitter\"\n    role=\"separator\"\n    aria-orientation=\"{{ horizontal() ? 'horizontal' : 'vertical' }}\"\n    [attr.aria-valuenow]=\"firstPanelSize()\"\n    [attr.aria-valuemin]=\"safeMinPanelSize()\"\n    [attr.aria-valuemax]=\"safeMaxPanelSize()\"\n    cdkDrag\n    [cdkDragLockAxis]=\"horizontal() ? 'y' : 'x'\"\n    [class.disabled]=\"disabled()\"\n    [cdkDragBoundary]=\"container\"\n    (cdkDragStarted)=\"onDragStarted()\"\n    (cdkDragMoved)=\"onDragMoved()\"\n    (cdkDragEnded)=\"onDragEnded()\"\n    (mousedown)=\"onSplitterMouseDown()\"\n    (mouseup)=\"onSplitterMouseUp()\"\n    [cdkDragConstrainPosition]=\"constrainPosition()\"\n  >\n    @if (horizontal()) {\n      <svg viewBox=\"0 0 28 4\" xmlns=\"http://www.w3.org/2000/svg\" role=\"presentation\">\n        @for (i of [0, 1, 2]; track i) {\n          <circle [attr.cx]=\"2 + i * 12\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\n        }\n      </svg>\n    } @else {\n      <svg viewBox=\"0 0 4 28\" xmlns=\"http://www.w3.org/2000/svg\" role=\"presentation\">\n        @for (i of [0, 1, 2]; track i) {\n          <circle cx=\"2\" [attr.cy]=\"2 + i * 12\" r=\"2\" fill=\"currentColor\" />\n        }\n      </svg>\n    }\n  </div>\n  <div\n    class=\"panel\"\n    [style]=\"{\n      width: horizontal() ? '100%' : secondPanelSize() + 'px',\n      height: horizontal() ? secondPanelSize() + 'px' : '100%',\n    }\"\n  >\n    <ng-content select=\"[second-panel]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block;--splitter-width: var(--ndw-spacing-sm)}:host.disabled{--splitter-width: var(--ndw-spacing-2xs)}:host{--half-splitter-width: calc(var(--splitter-width) / 2)}.panels{position:relative;display:flex;height:100%;width:100%}.panels .panel{display:flex;min-height:0;min-width:0;flex-grow:1;overflow:auto}.panels .splitter{position:absolute;display:flex;align-items:center;justify-content:center;background-color:var(--ndw-color-grey-200)}.panels .splitter:hover,.panels .splitter.dragging{background-color:var(--ndw-color-grey-300);transition:background-color var(--ndw-animation-speed-fast) ease-in-out}.panels .splitter svg{color:var(--ndw-color-grey-400)}.panels .splitter.disabled{pointer-events:none}.panels .splitter.disabled svg{display:none}.panels.dragging .splitter{background-color:var(--ndw-color-grey-300)}.panels:not(:hover .dragging) .panel{transition:all var(--ndw-animation-speed-fast) ease-in-out}.panels:not(:hover .dragging) .splitter{transition:all var(--ndw-animation-speed-fast) ease-in-out}.panels.vertical{flex-direction:row}.panels.vertical .panel{height:100%;width:50%}.panels.vertical .panel:first-of-type{margin-right:calc(var(--half-splitter-width) - .5px)}.panels.vertical .panel:last-of-type{margin-left:calc(var(--half-splitter-width) - .5px)}.panels.vertical .splitter{left:calc(50% - var(--half-splitter-width));height:100%;width:var(--splitter-width);cursor:ew-resize}.panels.vertical .splitter svg{width:var(--ndw-spacing-2xs)}.panels.horizontal{flex-direction:column}.panels.horizontal .panel{height:50%;width:100%}.panels.horizontal .panel:first-of-type{margin-bottom:calc(var(--half-splitter-width) - .5px)}.panels.horizontal .panel:last-of-type{margin-top:calc(var(--half-splitter-width) - .5px)}.panels.horizontal .splitter{top:calc(50% - var(--half-splitter-width));height:var(--splitter-width);width:100%;cursor:ns-resize}.panels.horizontal .splitter svg{height:var(--ndw-spacing-2xs)}\n"] }]
+                    }, template: "<div\r\n  #container\r\n  class=\"panels\"\r\n  [class]=\"{\r\n    horizontal: horizontal(),\r\n    vertical: !horizontal(),\r\n    dragging: isDragging(),\r\n  }\"\r\n>\r\n  <div\r\n    class=\"panel\"\r\n    [style]=\"{\r\n      width: horizontal() ? '100%' : firstPanelSize() + 'px',\r\n      height: horizontal() ? firstPanelSize() + 'px' : '100%',\r\n    }\"\r\n  >\r\n    <ng-content select=\"[first-panel]\"></ng-content>\r\n  </div>\r\n  <div\r\n    #splitter\r\n    class=\"splitter\"\r\n    role=\"separator\"\r\n    aria-orientation=\"{{ horizontal() ? 'horizontal' : 'vertical' }}\"\r\n    [attr.aria-valuenow]=\"firstPanelSize()\"\r\n    [attr.aria-valuemin]=\"safeMinPanelSize()\"\r\n    [attr.aria-valuemax]=\"safeMaxPanelSize()\"\r\n    cdkDrag\r\n    [cdkDragLockAxis]=\"horizontal() ? 'y' : 'x'\"\r\n    [class.disabled]=\"disabled()\"\r\n    [cdkDragBoundary]=\"container\"\r\n    (cdkDragStarted)=\"onDragStarted()\"\r\n    (cdkDragMoved)=\"onDragMoved()\"\r\n    (cdkDragEnded)=\"onDragEnded()\"\r\n    (mousedown)=\"onSplitterMouseDown()\"\r\n    (mouseup)=\"onSplitterMouseUp()\"\r\n    [cdkDragConstrainPosition]=\"constrainPosition()\"\r\n  >\r\n    @if (horizontal()) {\r\n      <svg viewBox=\"0 0 28 4\" xmlns=\"http://www.w3.org/2000/svg\" role=\"presentation\">\r\n        @for (i of [0, 1, 2]; track i) {\r\n          <circle [attr.cx]=\"2 + i * 12\" cy=\"2\" r=\"2\" fill=\"currentColor\" />\r\n        }\r\n      </svg>\r\n    } @else {\r\n      <svg viewBox=\"0 0 4 28\" xmlns=\"http://www.w3.org/2000/svg\" role=\"presentation\">\r\n        @for (i of [0, 1, 2]; track i) {\r\n          <circle cx=\"2\" [attr.cy]=\"2 + i * 12\" r=\"2\" fill=\"currentColor\" />\r\n        }\r\n      </svg>\r\n    }\r\n  </div>\r\n  <div\r\n    class=\"panel\"\r\n    [style]=\"{\r\n      width: horizontal() ? '100%' : secondPanelSize() + 'px',\r\n      height: horizontal() ? secondPanelSize() + 'px' : '100%',\r\n    }\"\r\n  >\r\n    <ng-content select=\"[second-panel]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;--splitter-width: var(--ndw-spacing-sm)}:host.disabled{--splitter-width: var(--ndw-spacing-2xs)}:host{--half-splitter-width: calc(var(--splitter-width) / 2)}.panels{position:relative;display:flex;height:100%;width:100%}.panels .panel{display:flex;min-height:0;min-width:0;flex-grow:1;overflow:auto}.panels .splitter{position:absolute;display:flex;align-items:center;justify-content:center;background-color:var(--ndw-color-grey-200)}.panels .splitter:hover,.panels .splitter.dragging{background-color:var(--ndw-color-grey-300);transition:background-color var(--ndw-animation-speed-fast) ease-in-out}.panels .splitter svg{color:var(--ndw-color-grey-400)}.panels .splitter.disabled{pointer-events:none}.panels .splitter.disabled svg{display:none}.panels.dragging .splitter{background-color:var(--ndw-color-grey-300)}.panels:not(:hover .dragging) .panel{transition:all var(--ndw-animation-speed-fast) ease-in-out}.panels:not(:hover .dragging) .splitter{transition:all var(--ndw-animation-speed-fast) ease-in-out}.panels.vertical{flex-direction:row}.panels.vertical .panel{height:100%;width:50%}.panels.vertical .panel:first-of-type{margin-right:calc(var(--half-splitter-width) - .5px)}.panels.vertical .panel:last-of-type{margin-left:calc(var(--half-splitter-width) - .5px)}.panels.vertical .splitter{left:calc(50% - var(--half-splitter-width));height:100%;width:var(--splitter-width);cursor:ew-resize}.panels.vertical .splitter svg{width:var(--ndw-spacing-2xs)}.panels.horizontal{flex-direction:column}.panels.horizontal .panel{height:50%;width:100%}.panels.horizontal .panel:first-of-type{margin-bottom:calc(var(--half-splitter-width) - .5px)}.panels.horizontal .panel:last-of-type{margin-top:calc(var(--half-splitter-width) - .5px)}.panels.horizontal .splitter{top:calc(50% - var(--half-splitter-width));height:var(--splitter-width);width:100%;cursor:ns-resize}.panels.horizontal .splitter svg{height:var(--ndw-spacing-2xs)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], initialPanelSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialPanelSize", required: false }] }], minimumPanelSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimumPanelSize", required: false }] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], splitter: [{ type: i0.ViewChild, args: ['splitter', { isSignal: true }] }], cdkDrag: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkDrag), { isSignal: true }] }] } });
 function clamp(width, min, max) {
     return Math.round(Math.min(Math.max(width, min), max));
@@ -4011,13 +4011,13 @@ function clamp(width, min, max) {
 class SummaryCardComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SummaryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SummaryCardComponent, isStandalone: true, selector: "ndw-summary-card", host: { classAttribute: "ndw-summary-card" }, ngImport: i0, template: "<div class=\"ndw-summary-card__wrapper\">\n  <ng-content select=\"ndw-avatar\" />\n  <div class=\"ndw-summary-card__content\">\n    <ng-content select=\"ndw-summary-card-header\" />\n    <ng-content select=\"ndw-summary-card-content\" />\n    <ng-content select=\"ndw-summary-card-tags\" />\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SummaryCardComponent, isStandalone: true, selector: "ndw-summary-card", host: { classAttribute: "ndw-summary-card" }, ngImport: i0, template: "<div class=\"ndw-summary-card__wrapper\">\r\n  <ng-content select=\"ndw-avatar\" />\r\n  <div class=\"ndw-summary-card__content\">\r\n    <ng-content select=\"ndw-summary-card-header\" />\r\n    <ng-content select=\"ndw-summary-card-content\" />\r\n    <ng-content select=\"ndw-summary-card-tags\" />\r\n  </div>\r\n</div>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SummaryCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndw-summary-card', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ndw-summary-card',
-                    }, template: "<div class=\"ndw-summary-card__wrapper\">\n  <ng-content select=\"ndw-avatar\" />\n  <div class=\"ndw-summary-card__content\">\n    <ng-content select=\"ndw-summary-card-header\" />\n    <ng-content select=\"ndw-summary-card-content\" />\n    <ng-content select=\"ndw-summary-card-tags\" />\n  </div>\n</div>\n" }]
+                    }, template: "<div class=\"ndw-summary-card__wrapper\">\r\n  <ng-content select=\"ndw-avatar\" />\r\n  <div class=\"ndw-summary-card__content\">\r\n    <ng-content select=\"ndw-summary-card-header\" />\r\n    <ng-content select=\"ndw-summary-card-content\" />\r\n    <ng-content select=\"ndw-summary-card-tags\" />\r\n  </div>\r\n</div>\r\n" }]
         }] });
 class SummaryCardActionComponent {
@@ -4027,21 +4027,21 @@ class SummaryCardActionComponent {
     action = output();
     template = viewChild.required(TemplateRef);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SummaryCardActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: SummaryCardActionComponent, isStandalone: true, selector: "ndw-summary-card-action", inputs: { iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { attributes: { "role": "listitem" }, classAttribute: "ndw-summary-card-action" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n  <button\n    ndwButton\n    type=\"button\"\n    tertiary\n    extra-small\n    [title]=\"label()\"\n    [disabled]=\"disabled()\"\n    (click)=\"action.emit()\"\n  >\n    <span class=\"sr-only\">{{ label() }}</span>\n    <ndw-icon>{{ iconName() }}</ndw-icon>\n  </button>\n</ng-template>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: SummaryCardActionComponent, isStandalone: true, selector: "ndw-summary-card-action", inputs: { iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { attributes: { "role": "listitem" }, classAttribute: "ndw-summary-card-action" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\r\n  <button\r\n    ndwButton\r\n    type=\"button\"\r\n    tertiary\r\n    extra-small\r\n    [title]=\"label()\"\r\n    [disabled]=\"disabled()\"\r\n    (click)=\"action.emit()\"\r\n  >\r\n    <span class=\"sr-only\">{{ label() }}</span>\r\n    <ndw-icon>{{ iconName() }}</ndw-icon>\r\n  </button>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SummaryCardActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndw-summary-card-action', imports: [IconComponent, ButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         role: 'listitem',
                         class: 'ndw-summary-card-action',
-                    }, template: "<ng-template>\n  <button\n    ndwButton\n    type=\"button\"\n    tertiary\n    extra-small\n    [title]=\"label()\"\n    [disabled]=\"disabled()\"\n    (click)=\"action.emit()\"\n  >\n    <span class=\"sr-only\">{{ label() }}</span>\n    <ndw-icon>{{ iconName() }}</ndw-icon>\n  </button>\n</ng-template>\n" }]
+                    }, template: "<ng-template>\r\n  <button\r\n    ndwButton\r\n    type=\"button\"\r\n    tertiary\r\n    extra-small\r\n    [title]=\"label()\"\r\n    [disabled]=\"disabled()\"\r\n    (click)=\"action.emit()\"\r\n  >\r\n    <span class=\"sr-only\">{{ label() }}</span>\r\n    <ndw-icon>{{ iconName() }}</ndw-icon>\r\n  </button>\r\n</ng-template>\r\n" }]
         }], propDecorators: { iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 class SummaryCardActionsComponent {
     view = input('auto', ...(ngDevMode ? [{ debugName: "view" }] : []));
     actions = contentChildren(SummaryCardActionComponent, { ...(ngDevMode ? { debugName: "actions" } : {}), descendants: true });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SummaryCardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SummaryCardActionsComponent, isStandalone: true, selector: "ndw-summary-card-actions", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "class.ndw-summary-card-actions--auto": "view() === \"auto\"" }, classAttribute: "ndw-summary-card-actions" }, queries: [{ propertyName: "actions", predicate: SummaryCardActionComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"ndw-favorite\" />\n\n@if (view() === 'popover') {\n  <ng-container *ngTemplateOutlet=\"popoverActions\"></ng-container>\n} @else if (view() === 'visible') {\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n  <div class=\"popover-wrapper\">\n    <ng-container *ngTemplateOutlet=\"popoverActions\"></ng-container>\n  </div>\n  <div class=\"regular-wrapper\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n}\n\n<ng-template #popoverActions>\n  <button\n    ndwButton\n    extra-small\n    tertiary\n    [ndwPopoverTrigger]=\"content\"\n    [popoverPosition]=\"'nextToTriggerButton'\"\n  >\n    <span class=\"sr-only\">Open menu</span>\n    <ndw-icon>more_horiz</ndw-icon>\n  </button>\n</ng-template>\n\n<ng-template #content>\n  <div\n    class=\"actions\"\n    [ngClass]=\"{\n      'actions--popover': view() === 'popover',\n      'actions--visible': view() === 'visible',\n      'actions--auto': view() === 'auto',\n    }\"\n  >\n    @for (action of actions(); track action) {\n      <ng-template [ngTemplateOutlet]=\"action.template()\" />\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: PopoverTriggerDirective, selector: "[ndwPopoverTrigger]", inputs: ["popoverPosition", "ndwPopoverTrigger", "toggleOnClick", "isOpen"], outputs: ["popoverToggled", "isOpenChange"], exportAs: ["ndwPopoverTrigger"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SummaryCardActionsComponent, isStandalone: true, selector: "ndw-summary-card-actions", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "class.ndw-summary-card-actions--auto": "view() === \"auto\"" }, classAttribute: "ndw-summary-card-actions" }, queries: [{ propertyName: "actions", predicate: SummaryCardActionComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"ndw-favorite\" />\r\n\r\n@if (view() === 'popover') {\r\n  <ng-container *ngTemplateOutlet=\"popoverActions\"></ng-container>\r\n} @else if (view() === 'visible') {\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n} @else {\r\n  <div class=\"popover-wrapper\">\r\n    <ng-container *ngTemplateOutlet=\"popoverActions\"></ng-container>\r\n  </div>\r\n  <div class=\"regular-wrapper\">\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n  </div>\r\n}\r\n\r\n<ng-template #popoverActions>\r\n  <button\r\n    ndwButton\r\n    extra-small\r\n    tertiary\r\n    [ndwPopoverTrigger]=\"content\"\r\n    [popoverPosition]=\"'nextToTriggerButton'\"\r\n  >\r\n    <span class=\"sr-only\">Open menu</span>\r\n    <ndw-icon>more_horiz</ndw-icon>\r\n  </button>\r\n</ng-template>\r\n\r\n<ng-template #content>\r\n  <div\r\n    class=\"actions\"\r\n    [ngClass]=\"{\r\n      'actions--popover': view() === 'popover',\r\n      'actions--visible': view() === 'visible',\r\n      'actions--auto': view() === 'auto',\r\n    }\"\r\n  >\r\n    @for (action of actions(); track action) {\r\n      <ng-template [ngTemplateOutlet]=\"action.template()\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: PopoverTriggerDirective, selector: "[ndwPopoverTrigger]", inputs: ["popoverPosition", "ndwPopoverTrigger", "toggleOnClick", "isOpen"], outputs: ["popoverToggled", "isOpenChange"], exportAs: ["ndwPopoverTrigger"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SummaryCardActionsComponent, decorators: [{
             type: Component,
@@ -4049,7 +4049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         role: 'list',
                         class: 'ndw-summary-card-actions',
                         '[class.ndw-summary-card-actions--auto]': 'view() === "auto"',
-                    }, template: "<ng-content select=\"ndw-favorite\" />\n\n@if (view() === 'popover') {\n  <ng-container *ngTemplateOutlet=\"popoverActions\"></ng-container>\n} @else if (view() === 'visible') {\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n  <div class=\"popover-wrapper\">\n    <ng-container *ngTemplateOutlet=\"popoverActions\"></ng-container>\n  </div>\n  <div class=\"regular-wrapper\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n}\n\n<ng-template #popoverActions>\n  <button\n    ndwButton\n    extra-small\n    tertiary\n    [ndwPopoverTrigger]=\"content\"\n    [popoverPosition]=\"'nextToTriggerButton'\"\n  >\n    <span class=\"sr-only\">Open menu</span>\n    <ndw-icon>more_horiz</ndw-icon>\n  </button>\n</ng-template>\n\n<ng-template #content>\n  <div\n    class=\"actions\"\n    [ngClass]=\"{\n      'actions--popover': view() === 'popover',\n      'actions--visible': view() === 'visible',\n      'actions--auto': view() === 'auto',\n    }\"\n  >\n    @for (action of actions(); track action) {\n      <ng-template [ngTemplateOutlet]=\"action.template()\" />\n    }\n  </div>\n</ng-template>\n" }]
+                    }, template: "<ng-content select=\"ndw-favorite\" />\r\n\r\n@if (view() === 'popover') {\r\n  <ng-container *ngTemplateOutlet=\"popoverActions\"></ng-container>\r\n} @else if (view() === 'visible') {\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n} @else {\r\n  <div class=\"popover-wrapper\">\r\n    <ng-container *ngTemplateOutlet=\"popoverActions\"></ng-container>\r\n  </div>\r\n  <div class=\"regular-wrapper\">\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n  </div>\r\n}\r\n\r\n<ng-template #popoverActions>\r\n  <button\r\n    ndwButton\r\n    extra-small\r\n    tertiary\r\n    [ndwPopoverTrigger]=\"content\"\r\n    [popoverPosition]=\"'nextToTriggerButton'\"\r\n  >\r\n    <span class=\"sr-only\">Open menu</span>\r\n    <ndw-icon>more_horiz</ndw-icon>\r\n  </button>\r\n</ng-template>\r\n\r\n<ng-template #content>\r\n  <div\r\n    class=\"actions\"\r\n    [ngClass]=\"{\r\n      'actions--popover': view() === 'popover',\r\n      'actions--visible': view() === 'visible',\r\n      'actions--auto': view() === 'auto',\r\n    }\"\r\n  >\r\n    @for (action of actions(); track action) {\r\n      <ng-template [ngTemplateOutlet]=\"action.template()\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n" }]
         }], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], actions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SummaryCardActionComponent), { ...{
                             descendants: true,
                         }, isSignal: true }] }] } });
@@ -4072,13 +4072,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 class SummaryCardHeaderComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SummaryCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SummaryCardHeaderComponent, isStandalone: true, selector: "ndw-summary-card-header", host: { classAttribute: "ndw-summary-card-header" }, ngImport: i0, template: "<div class=\"ndw-summary-card-header__wrapper\">\n  <ng-content select=\"ndw-pill\" />\n  <h3 class=\"ndw-summary-card-header__title\"><ng-content /></h3>\n  <ng-content select=\"ndw-summary-card-subtitle\" />\n</div>\n\n<ng-content select=\"ndw-summary-card-actions\" />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SummaryCardHeaderComponent, isStandalone: true, selector: "ndw-summary-card-header", host: { classAttribute: "ndw-summary-card-header" }, ngImport: i0, template: "<div class=\"ndw-summary-card-header__wrapper\">\r\n  <ng-content select=\"ndw-pill\" />\r\n  <h3 class=\"ndw-summary-card-header__title\"><ng-content /></h3>\r\n  <ng-content select=\"ndw-summary-card-subtitle\" />\r\n</div>\r\n\r\n<ng-content select=\"ndw-summary-card-actions\" />\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SummaryCardHeaderComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ndw-summary-card-header',
-                    }, selector: 'ndw-summary-card-header', template: "<div class=\"ndw-summary-card-header__wrapper\">\n  <ng-content select=\"ndw-pill\" />\n  <h3 class=\"ndw-summary-card-header__title\"><ng-content /></h3>\n  <ng-content select=\"ndw-summary-card-subtitle\" />\n</div>\n\n<ng-content select=\"ndw-summary-card-actions\" />\n" }]
+                    }, selector: 'ndw-summary-card-header', template: "<div class=\"ndw-summary-card-header__wrapper\">\r\n  <ng-content select=\"ndw-pill\" />\r\n  <h3 class=\"ndw-summary-card-header__title\"><ng-content /></h3>\r\n  <ng-content select=\"ndw-summary-card-subtitle\" />\r\n</div>\r\n\r\n<ng-content select=\"ndw-summary-card-actions\" />\r\n" }]
         }] });
 class SummaryCardTagsComponent {
@@ -4117,11 +4117,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 class SummaryCardSubtitleComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SummaryCardSubtitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SummaryCardSubtitleComponent, isStandalone: true, selector: "ndw-summary-card-subtitle", ngImport: i0, template: "<div class=\"ndw-summary-card-subtitle\">\n  <ng-content select=\"ndw-icon\" />\n\n  <div class=\"ndw-summary-card-subtitle__text\">\n    <ng-content />\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SummaryCardSubtitleComponent, isStandalone: true, selector: "ndw-summary-card-subtitle", ngImport: i0, template: "<div class=\"ndw-summary-card-subtitle\">\r\n  <ng-content select=\"ndw-icon\" />\r\n\r\n  <div class=\"ndw-summary-card-subtitle__text\">\r\n    <ng-content />\r\n  </div>\r\n</div>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SummaryCardSubtitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndw-summary-card-subtitle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ndw-summary-card-subtitle\">\n  <ng-content select=\"ndw-icon\" />\n\n  <div class=\"ndw-summary-card-subtitle__text\">\n    <ng-content />\n  </div>\n</div>\n" }]
+            args: [{ selector: 'ndw-summary-card-subtitle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ndw-summary-card-subtitle\">\r\n  <ng-content select=\"ndw-icon\" />\r\n\r\n  <div class=\"ndw-summary-card-subtitle__text\">\r\n    <ng-content />\r\n  </div>\r\n</div>\r\n" }]
         }] });
 class SwitcherComponent {
@@ -4232,7 +4232,7 @@ class SwitcherComponent {
                 useExisting: forwardRef(() => SwitcherComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\n  class=\"switch-slider\"\n  [style.width]=\"sliderWidth\"\n  [style.height]=\"sliderHeight\"\n  [style.left]=\"vertical() ? null : sliderPosition\"\n  [style.top]=\"vertical() ? sliderPosition : null\"\n  [attr.aria-hidden]=\"true\"\n></div>\n\n@for (option of options(); track option.value; let i = $index) {\n  <label\n    class=\"switch-option\"\n    [class.active]=\"selectedValue() === option.value\"\n    [class.disabled]=\"option.disabled || disabled()\"\n    [attr.for]=\"generateId(i)\"\n  >\n    <input\n      type=\"radio\"\n      [id]=\"generateId(i)\"\n      [name]=\"componentName\"\n      [value]=\"option.value\"\n      [checked]=\"selectedValue() === option.value\"\n      [disabled]=\"option.disabled || disabled()\"\n      (change)=\"selectOption(option.value)\"\n      (keydown)=\"onKeyDown($event, i)\"\n      [attr.aria-describedby]=\"option.disabled ? generateId(i) + '-disabled' : null\"\n      class=\"switch-radio\"\n    />\n    @if (option.icon) {\n      <ndw-icon>{{ option.icon }}</ndw-icon>\n    }\n    <div class=\"switch-label\">{{ option.label }}</div>\n\n    @if (option.disabled) {\n      <span [id]=\"generateId(i) + '-disabled'\" class=\"sr-only\"> (disabled) </span>\n    }\n  </label>\n}\n", styles: [":host{position:relative;display:flex;background-color:var(--ndw-color-grey-100);border-radius:var(--ndw-border-radius-md);padding:var(--ndw-spacing-2xs);border:var(--ndw-border-size-sm) solid transparent}:host:focus-within{outline:var(--ndw-border-size-sm) solid var(--ndw-color-info-500)}:host.disabled{opacity:.5;cursor:not-allowed;background-color:var(--ndw-color-grey-50)}:host.vertical{flex-direction:column}.switch-slider{position:absolute;top:var(--ndw-spacing-2xs);height:calc(100% - var(--ndw-spacing-2xs) * 2);background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500);border-radius:var(--ndw-border-radius-sm);box-shadow:var(--ndw-elevation-content);transition:left var(--ndw-animation-speed-fast) ease,top var(--ndw-animation-speed-fast) ease,width var(--ndw-animation-speed-fast) ease}.switch-option{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ndw-spacing-2xs);padding:var(--ndw-spacing-sm);border:none;background:transparent;color:var(--ndw-color-grey-500);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-medium);cursor:pointer;border-radius:var(--ndw-border-radius-sm);transition:color var(--ndw-animation-speed-fast) ease;height:auto}.switch-option:hover:not(:disabled){color:var(--ndw-color-grey-700)}.switch-option.active{color:var(--ndw-color-grey-900)}.switch-option.active .switch-label{color:var(--ndw-color-text)}.switch-option.active ndw-icon{color:var(--ndw-color-primary-500)}.switch-option:disabled{cursor:not-allowed;opacity:.5}.switch-label{display:flex;flex:1;justify-content:center}.switch-radio{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.switch-radio:focus,.switch-radio:focus-visible{outline:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div\r\n  class=\"switch-slider\"\r\n  [style.width]=\"sliderWidth\"\r\n  [style.height]=\"sliderHeight\"\r\n  [style.left]=\"vertical() ? null : sliderPosition\"\r\n  [style.top]=\"vertical() ? sliderPosition : null\"\r\n  [attr.aria-hidden]=\"true\"\r\n></div>\r\n\r\n@for (option of options(); track option.value; let i = $index) {\r\n  <label\r\n    class=\"switch-option\"\r\n    [class.active]=\"selectedValue() === option.value\"\r\n    [class.disabled]=\"option.disabled || disabled()\"\r\n    [attr.for]=\"generateId(i)\"\r\n  >\r\n    <input\r\n      type=\"radio\"\r\n      [id]=\"generateId(i)\"\r\n      [name]=\"componentName\"\r\n      [value]=\"option.value\"\r\n      [checked]=\"selectedValue() === option.value\"\r\n      [disabled]=\"option.disabled || disabled()\"\r\n      (change)=\"selectOption(option.value)\"\r\n      (keydown)=\"onKeyDown($event, i)\"\r\n      [attr.aria-describedby]=\"option.disabled ? generateId(i) + '-disabled' : null\"\r\n      class=\"switch-radio\"\r\n    />\r\n    @if (option.icon) {\r\n      <ndw-icon>{{ option.icon }}</ndw-icon>\r\n    }\r\n    <div class=\"switch-label\">{{ option.label }}</div>\r\n\r\n    @if (option.disabled) {\r\n      <span [id]=\"generateId(i) + '-disabled'\" class=\"sr-only\"> (disabled) </span>\r\n    }\r\n  </label>\r\n}\r\n", styles: [":host{position:relative;display:flex;background-color:var(--ndw-color-grey-100);border-radius:var(--ndw-border-radius-md);padding:var(--ndw-spacing-2xs);border:var(--ndw-border-size-sm) solid transparent}:host:focus-within{outline:var(--ndw-border-size-sm) solid var(--ndw-color-info-500)}:host.disabled{opacity:.5;cursor:not-allowed;background-color:var(--ndw-color-grey-50)}:host.vertical{flex-direction:column}.switch-slider{position:absolute;top:var(--ndw-spacing-2xs);height:calc(100% - var(--ndw-spacing-2xs) * 2);background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500);border-radius:var(--ndw-border-radius-sm);box-shadow:var(--ndw-elevation-content);transition:left var(--ndw-animation-speed-fast) ease,top var(--ndw-animation-speed-fast) ease,width var(--ndw-animation-speed-fast) ease}.switch-option{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ndw-spacing-2xs);padding:var(--ndw-spacing-sm);border:none;background:transparent;color:var(--ndw-color-grey-500);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-medium);cursor:pointer;border-radius:var(--ndw-border-radius-sm);transition:color var(--ndw-animation-speed-fast) ease;height:auto}.switch-option:hover:not(:disabled){color:var(--ndw-color-grey-700)}.switch-option.active{color:var(--ndw-color-grey-900)}.switch-option.active .switch-label{color:var(--ndw-color-text)}.switch-option.active ndw-icon{color:var(--ndw-color-primary-500)}.switch-option:disabled{cursor:not-allowed;opacity:.5}.switch-label{display:flex;flex:1;justify-content:center}.switch-radio{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.switch-radio:focus,.switch-radio:focus-visible{outline:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SwitcherComponent, decorators: [{
             type: Component,
@@ -4246,7 +4246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         role: 'radiogroup',
                         '[class.disabled]': 'disabled()',
                         '[class.vertical]': 'vertical()',
-                    }, template: "<div\n  class=\"switch-slider\"\n  [style.width]=\"sliderWidth\"\n  [style.height]=\"sliderHeight\"\n  [style.left]=\"vertical() ? null : sliderPosition\"\n  [style.top]=\"vertical() ? sliderPosition : null\"\n  [attr.aria-hidden]=\"true\"\n></div>\n\n@for (option of options(); track option.value; let i = $index) {\n  <label\n    class=\"switch-option\"\n    [class.active]=\"selectedValue() === option.value\"\n    [class.disabled]=\"option.disabled || disabled()\"\n    [attr.for]=\"generateId(i)\"\n  >\n    <input\n      type=\"radio\"\n      [id]=\"generateId(i)\"\n      [name]=\"componentName\"\n      [value]=\"option.value\"\n      [checked]=\"selectedValue() === option.value\"\n      [disabled]=\"option.disabled || disabled()\"\n      (change)=\"selectOption(option.value)\"\n      (keydown)=\"onKeyDown($event, i)\"\n      [attr.aria-describedby]=\"option.disabled ? generateId(i) + '-disabled' : null\"\n      class=\"switch-radio\"\n    />\n    @if (option.icon) {\n      <ndw-icon>{{ option.icon }}</ndw-icon>\n    }\n    <div class=\"switch-label\">{{ option.label }}</div>\n\n    @if (option.disabled) {\n      <span [id]=\"generateId(i) + '-disabled'\" class=\"sr-only\"> (disabled) </span>\n    }\n  </label>\n}\n", styles: [":host{position:relative;display:flex;background-color:var(--ndw-color-grey-100);border-radius:var(--ndw-border-radius-md);padding:var(--ndw-spacing-2xs);border:var(--ndw-border-size-sm) solid transparent}:host:focus-within{outline:var(--ndw-border-size-sm) solid var(--ndw-color-info-500)}:host.disabled{opacity:.5;cursor:not-allowed;background-color:var(--ndw-color-grey-50)}:host.vertical{flex-direction:column}.switch-slider{position:absolute;top:var(--ndw-spacing-2xs);height:calc(100% - var(--ndw-spacing-2xs) * 2);background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500);border-radius:var(--ndw-border-radius-sm);box-shadow:var(--ndw-elevation-content);transition:left var(--ndw-animation-speed-fast) ease,top var(--ndw-animation-speed-fast) ease,width var(--ndw-animation-speed-fast) ease}.switch-option{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ndw-spacing-2xs);padding:var(--ndw-spacing-sm);border:none;background:transparent;color:var(--ndw-color-grey-500);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-medium);cursor:pointer;border-radius:var(--ndw-border-radius-sm);transition:color var(--ndw-animation-speed-fast) ease;height:auto}.switch-option:hover:not(:disabled){color:var(--ndw-color-grey-700)}.switch-option.active{color:var(--ndw-color-grey-900)}.switch-option.active .switch-label{color:var(--ndw-color-text)}.switch-option.active ndw-icon{color:var(--ndw-color-primary-500)}.switch-option:disabled{cursor:not-allowed;opacity:.5}.switch-label{display:flex;flex:1;justify-content:center}.switch-radio{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.switch-radio:focus,.switch-radio:focus-visible{outline:none}\n"] }]
+                    }, template: "<div\r\n  class=\"switch-slider\"\r\n  [style.width]=\"sliderWidth\"\r\n  [style.height]=\"sliderHeight\"\r\n  [style.left]=\"vertical() ? null : sliderPosition\"\r\n  [style.top]=\"vertical() ? sliderPosition : null\"\r\n  [attr.aria-hidden]=\"true\"\r\n></div>\r\n\r\n@for (option of options(); track option.value; let i = $index) {\r\n  <label\r\n    class=\"switch-option\"\r\n    [class.active]=\"selectedValue() === option.value\"\r\n    [class.disabled]=\"option.disabled || disabled()\"\r\n    [attr.for]=\"generateId(i)\"\r\n  >\r\n    <input\r\n      type=\"radio\"\r\n      [id]=\"generateId(i)\"\r\n      [name]=\"componentName\"\r\n      [value]=\"option.value\"\r\n      [checked]=\"selectedValue() === option.value\"\r\n      [disabled]=\"option.disabled || disabled()\"\r\n      (change)=\"selectOption(option.value)\"\r\n      (keydown)=\"onKeyDown($event, i)\"\r\n      [attr.aria-describedby]=\"option.disabled ? generateId(i) + '-disabled' : null\"\r\n      class=\"switch-radio\"\r\n    />\r\n    @if (option.icon) {\r\n      <ndw-icon>{{ option.icon }}</ndw-icon>\r\n    }\r\n    <div class=\"switch-label\">{{ option.label }}</div>\r\n\r\n    @if (option.disabled) {\r\n      <span [id]=\"generateId(i) + '-disabled'\" class=\"sr-only\"> (disabled) </span>\r\n    }\r\n  </label>\r\n}\r\n", styles: [":host{position:relative;display:flex;background-color:var(--ndw-color-grey-100);border-radius:var(--ndw-border-radius-md);padding:var(--ndw-spacing-2xs);border:var(--ndw-border-size-sm) solid transparent}:host:focus-within{outline:var(--ndw-border-size-sm) solid var(--ndw-color-info-500)}:host.disabled{opacity:.5;cursor:not-allowed;background-color:var(--ndw-color-grey-50)}:host.vertical{flex-direction:column}.switch-slider{position:absolute;top:var(--ndw-spacing-2xs);height:calc(100% - var(--ndw-spacing-2xs) * 2);background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500);border-radius:var(--ndw-border-radius-sm);box-shadow:var(--ndw-elevation-content);transition:left var(--ndw-animation-speed-fast) ease,top var(--ndw-animation-speed-fast) ease,width var(--ndw-animation-speed-fast) ease}.switch-option{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ndw-spacing-2xs);padding:var(--ndw-spacing-sm);border:none;background:transparent;color:var(--ndw-color-grey-500);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-medium);cursor:pointer;border-radius:var(--ndw-border-radius-sm);transition:color var(--ndw-animation-speed-fast) ease;height:auto}.switch-option:hover:not(:disabled){color:var(--ndw-color-grey-700)}.switch-option.active{color:var(--ndw-color-grey-900)}.switch-option.active .switch-label{color:var(--ndw-color-text)}.switch-option.active ndw-icon{color:var(--ndw-color-primary-500)}.switch-option:disabled{cursor:not-allowed;opacity:.5}.switch-label{display:flex;flex:1;justify-content:center}.switch-radio{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.switch-radio:focus,.switch-radio:focus-visible{outline:none}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }, { type: i0.Output, args: ["selectedValueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 class TabComponent {
@@ -4272,11 +4272,11 @@ class TabComponent {
         return this._elementRef.nativeElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: TabComponent, isStandalone: true, selector: "ndw-tab", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_contentTemplate", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Create a template for the content of the <ndw-tab> so that we can grab a reference to this\n    TemplateRef and use it in a Portal to render the tab content in the appropriate place in the\n    tab-group. -->\n<ng-template #content><ng-content></ng-content></ng-template>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: TabComponent, isStandalone: true, selector: "ndw-tab", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_contentTemplate", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Create a template for the content of the <ndw-tab> so that we can grab a reference to this\r\n    TemplateRef and use it in a Portal to render the tab content in the appropriate place in the\r\n    tab-group. -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndw-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Create a template for the content of the <ndw-tab> so that we can grab a reference to this\n    TemplateRef and use it in a Portal to render the tab content in the appropriate place in the\n    tab-group. -->\n<ng-template #content><ng-content></ng-content></ng-template>\n" }]
+            args: [{ selector: 'ndw-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Create a template for the content of the <ndw-tab> so that we can grab a reference to this\r\n    TemplateRef and use it in a Portal to render the tab content in the appropriate place in the\r\n    tab-group. -->\r\n<ng-template #content><ng-content></ng-content></ng-template>\r\n" }]
         }], propDecorators: { _contentTemplate: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 class TabGroupComponent {
@@ -4418,11 +4418,11 @@ class TabGroupComponent {
         return tabCount - 1;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: TabGroupComponent, isStandalone: true, selector: "ndw-tab-group", inputs: { hasPadding: { classPropertyName: "hasPadding", publicName: "hasPadding", isSignal: true, isRequired: false, transformFunction: null }, activeTabId: { classPropertyName: "activeTabId", publicName: "activeTabId", isSignal: true, isRequired: false, transformFunction: null }, inlinePadding: { classPropertyName: "inlinePadding", publicName: "inlinePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTabId: "activeTabIdChange" }, queries: [{ propertyName: "_tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "_tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }, { propertyName: "_tabGroupContainer", first: true, predicate: ["tabGroupContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tab-group-wrapper\">\n  <div #tabGroupContainer class=\"tab-group\" role=\"tablist\" [class.with-padding]=\"hasPadding()\">\n    @for (tab of tabs(); track tab.id(); let i = $index) {\n      <button\n        #tabButton\n        class=\"tab-button\"\n        role=\"tab\"\n        type=\"button\"\n        [attr.active]=\"tab.active ? true : undefined\"\n        [attr.aria-controls]=\"'tab-panel-' + tab.id()\"\n        [attr.aria-selected]=\"tab.active\"\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        @if (tab.icon()) {\n          <ndw-icon size=\"sm\">{{ tab.icon() }}</ndw-icon>\n        }\n        {{ tab.title() }}\n        @if (tab.hasError()) {\n          <ndw-badge [size]=\"'small'\" [variant]=\"'error'\" />\n        }\n      </button>\n    }\n  </div>\n\n  @if (canScrollLeft()) {\n    <button\n      ndwButton\n      secondary\n      alternative\n      extra-small\n      class=\"scroll-arrow scroll-arrow-left\"\n      type=\"button\"\n      aria-label=\"Scroll naar links\"\n      tabindex=\"-1\"\n      (click)=\"scrollTo('left')\"\n    >\n      <ndw-icon>chevron_left</ndw-icon>\n    </button>\n  }\n\n  @if (canScrollRight()) {\n    <button\n      ndwButton\n      secondary\n      alternative\n      extra-small\n      class=\"scroll-arrow scroll-arrow-right\"\n      type=\"button\"\n      aria-label=\"Scroll naar rechts\"\n      tabindex=\"-1\"\n      (click)=\"scrollTo('right')\"\n    >\n      <ndw-icon>chevron_right</ndw-icon>\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-wrapper{position:relative}.tab-group{display:flex;gap:var(--ndw-spacing-lg);overflow:auto hidden;padding-left:0;position:relative;flex:1;scrollbar-width:none;-ms-overflow-style:none;background:linear-gradient(to bottom,transparent calc(100% - var(--ndw-border-size-sm)),var(--ndw-color-grey-200) calc(100% - var(--ndw-border-size-sm))) 0 0/100vw 100% no-repeat}.tab-group::-webkit-scrollbar{display:none}.tab-group.with-padding{padding-inline:var(--ndw-spacing-lg)}.scroll-arrow{position:absolute;top:var(--ndw-spacing-sm);border-radius:100%;background-color:var(--ndw-color-white);color:var(--ndw-color-grey-600);transition:color .2s ease-out}.scroll-arrow:hover{background-color:var(--ndw-color-grey-50)!important}.scroll-arrow.scroll-arrow-left{left:0}.scroll-arrow.scroll-arrow-right{right:0}.tab-button{background:none;border:none;border-bottom:var(--ndw-border-size-lg) solid transparent;color:var(--ndw-color-grey-400);cursor:pointer;display:flex;align-items:center;gap:var(--ndw-spacing-xs);font-weight:700;padding:var(--ndw-spacing-md) 0;position:relative;transition:border-bottom .2s ease-out,color .2s ease-out;white-space:nowrap;flex-shrink:0}.tab-button ndw-badge{position:absolute;top:0rem;right:-1rem;pointer-events:none}.tab-button ndw-badge.small{top:.25rem;right:-.75rem}.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"] }, { kind: "component", type: BadgeComponent, selector: "ndw-badge" }, { 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: "21.0.8", type: TabGroupComponent, isStandalone: true, selector: "ndw-tab-group", inputs: { hasPadding: { classPropertyName: "hasPadding", publicName: "hasPadding", isSignal: true, isRequired: false, transformFunction: null }, activeTabId: { classPropertyName: "activeTabId", publicName: "activeTabId", isSignal: true, isRequired: false, transformFunction: null }, inlinePadding: { classPropertyName: "inlinePadding", publicName: "inlinePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTabId: "activeTabIdChange" }, queries: [{ propertyName: "_tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "_tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }, { propertyName: "_tabGroupContainer", first: true, predicate: ["tabGroupContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tab-group-wrapper\">\r\n  <div #tabGroupContainer class=\"tab-group\" role=\"tablist\" [class.with-padding]=\"hasPadding()\">\r\n    @for (tab of tabs(); track tab.id(); let i = $index) {\r\n      <button\r\n        #tabButton\r\n        class=\"tab-button\"\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        [attr.active]=\"tab.active ? true : undefined\"\r\n        [attr.aria-controls]=\"'tab-panel-' + tab.id()\"\r\n        [attr.aria-selected]=\"tab.active\"\r\n        [disabled]=\"tab.disabled() ? true : null\"\r\n        [id]=\"'tab-' + tab.id()\"\r\n        [tabindex]=\"tab.active ? 0 : -1\"\r\n        (click)=\"selectTab(i)\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n      >\r\n        @if (tab.icon()) {\r\n          <ndw-icon size=\"sm\">{{ tab.icon() }}</ndw-icon>\r\n        }\r\n        {{ tab.title() }}\r\n        @if (tab.hasError()) {\r\n          <ndw-badge [size]=\"'small'\" [variant]=\"'error'\" />\r\n        }\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  @if (canScrollLeft()) {\r\n    <button\r\n      ndwButton\r\n      secondary\r\n      alternative\r\n      extra-small\r\n      class=\"scroll-arrow scroll-arrow-left\"\r\n      type=\"button\"\r\n      aria-label=\"Scroll naar links\"\r\n      tabindex=\"-1\"\r\n      (click)=\"scrollTo('left')\"\r\n    >\r\n      <ndw-icon>chevron_left</ndw-icon>\r\n    </button>\r\n  }\r\n\r\n  @if (canScrollRight()) {\r\n    <button\r\n      ndwButton\r\n      secondary\r\n      alternative\r\n      extra-small\r\n      class=\"scroll-arrow scroll-arrow-right\"\r\n      type=\"button\"\r\n      aria-label=\"Scroll naar rechts\"\r\n      tabindex=\"-1\"\r\n      (click)=\"scrollTo('right')\"\r\n    >\r\n      <ndw-icon>chevron_right</ndw-icon>\r\n    </button>\r\n  }\r\n</div>\r\n@for (tab of tabs(); track tab.id(); let i = $index) {\r\n  <div\r\n    class=\"tab-content\"\r\n    [ngClass]=\"{ 'is-hidden': !tab.active }\"\r\n    [id]=\"'tab-panel-' + tab.id()\"\r\n    role=\"tabpanel\"\r\n    [attr.aria-labelledby]=\"'tab-' + tab.id()\"\r\n    [tabindex]=\"0\"\r\n  >\r\n    <ng-template [cdkPortalOutlet]=\"tab.content\"></ng-template>\r\n  </div>\r\n}\r\n", styles: [".tab-group-wrapper{position:relative}.tab-group{display:flex;gap:var(--ndw-spacing-lg);overflow:auto hidden;padding-left:0;position:relative;flex:1;scrollbar-width:none;-ms-overflow-style:none;background:linear-gradient(to bottom,transparent calc(100% - var(--ndw-border-size-sm)),var(--ndw-color-grey-200) calc(100% - var(--ndw-border-size-sm))) 0 0/100vw 100% no-repeat}.tab-group::-webkit-scrollbar{display:none}.tab-group.with-padding{padding-inline:var(--ndw-spacing-lg)}.scroll-arrow{position:absolute;top:var(--ndw-spacing-sm);border-radius:100%;background-color:var(--ndw-color-white);color:var(--ndw-color-grey-600);transition:color .2s ease-out}.scroll-arrow:hover{background-color:var(--ndw-color-grey-50)!important}.scroll-arrow.scroll-arrow-left{left:0}.scroll-arrow.scroll-arrow-right{right:0}.tab-button{background:none;border:none;border-bottom:var(--ndw-border-size-lg) solid transparent;color:var(--ndw-color-grey-400);cursor:pointer;display:flex;align-items:center;gap:var(--ndw-spacing-xs);font-weight:700;padding:var(--ndw-spacing-md) 0;position:relative;transition:border-bottom .2s ease-out,color .2s ease-out;white-space:nowrap;flex-shrink:0}.tab-button ndw-badge{position:absolute;top:0rem;right:-1rem;pointer-events:none}.tab-button ndw-badge.small{top:.25rem;right:-.75rem}.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"] }, { kind: "component", type: BadgeComponent, selector: "ndw-badge" }, { kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TabGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndw-tab-group', imports: [CdkPortalOutlet, NgClass, BadgeComponent, ButtonDirective, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tab-group-wrapper\">\n  <div #tabGroupContainer class=\"tab-group\" role=\"tablist\" [class.with-padding]=\"hasPadding()\">\n    @for (tab of tabs(); track tab.id(); let i = $index) {\n      <button\n        #tabButton\n        class=\"tab-button\"\n        role=\"tab\"\n        type=\"button\"\n        [attr.active]=\"tab.active ? true : undefined\"\n        [attr.aria-controls]=\"'tab-panel-' + tab.id()\"\n        [attr.aria-selected]=\"tab.active\"\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        @if (tab.icon()) {\n          <ndw-icon size=\"sm\">{{ tab.icon() }}</ndw-icon>\n        }\n        {{ tab.title() }}\n        @if (tab.hasError()) {\n          <ndw-badge [size]=\"'small'\" [variant]=\"'error'\" />\n        }\n      </button>\n    }\n  </div>\n\n  @if (canScrollLeft()) {\n    <button\n      ndwButton\n      secondary\n      alternative\n      extra-small\n      class=\"scroll-arrow scroll-arrow-left\"\n      type=\"button\"\n      aria-label=\"Scroll naar links\"\n      tabindex=\"-1\"\n      (click)=\"scrollTo('left')\"\n    >\n      <ndw-icon>chevron_left</ndw-icon>\n    </button>\n  }\n\n  @if (canScrollRight()) {\n    <button\n      ndwButton\n      secondary\n      alternative\n      extra-small\n      class=\"scroll-arrow scroll-arrow-right\"\n      type=\"button\"\n      aria-label=\"Scroll naar rechts\"\n      tabindex=\"-1\"\n      (click)=\"scrollTo('right')\"\n    >\n      <ndw-icon>chevron_right</ndw-icon>\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-wrapper{position:relative}.tab-group{display:flex;gap:var(--ndw-spacing-lg);overflow:auto hidden;padding-left:0;position:relative;flex:1;scrollbar-width:none;-ms-overflow-style:none;background:linear-gradient(to bottom,transparent calc(100% - var(--ndw-border-size-sm)),var(--ndw-color-grey-200) calc(100% - var(--ndw-border-size-sm))) 0 0/100vw 100% no-repeat}.tab-group::-webkit-scrollbar{display:none}.tab-group.with-padding{padding-inline:var(--ndw-spacing-lg)}.scroll-arrow{position:absolute;top:var(--ndw-spacing-sm);border-radius:100%;background-color:var(--ndw-color-white);color:var(--ndw-color-grey-600);transition:color .2s ease-out}.scroll-arrow:hover{background-color:var(--ndw-color-grey-50)!important}.scroll-arrow.scroll-arrow-left{left:0}.scroll-arrow.scroll-arrow-right{right:0}.tab-button{background:none;border:none;border-bottom:var(--ndw-border-size-lg) solid transparent;color:var(--ndw-color-grey-400);cursor:pointer;display:flex;align-items:center;gap:var(--ndw-spacing-xs);font-weight:700;padding:var(--ndw-spacing-md) 0;position:relative;transition:border-bottom .2s ease-out,color .2s ease-out;white-space:nowrap;flex-shrink:0}.tab-button ndw-badge{position:absolute;top:0rem;right:-1rem;pointer-events:none}.tab-button ndw-badge.small{top:.25rem;right:-.75rem}.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, BadgeComponent, ButtonDirective, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tab-group-wrapper\">\r\n  <div #tabGroupContainer class=\"tab-group\" role=\"tablist\" [class.with-padding]=\"hasPadding()\">\r\n    @for (tab of tabs(); track tab.id(); let i = $index) {\r\n      <button\r\n        #tabButton\r\n        class=\"tab-button\"\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        [attr.active]=\"tab.active ? true : undefined\"\r\n        [attr.aria-controls]=\"'tab-panel-' + tab.id()\"\r\n        [attr.aria-selected]=\"tab.active\"\r\n        [disabled]=\"tab.disabled() ? true : null\"\r\n        [id]=\"'tab-' + tab.id()\"\r\n        [tabindex]=\"tab.active ? 0 : -1\"\r\n        (click)=\"selectTab(i)\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n      >\r\n        @if (tab.icon()) {\r\n          <ndw-icon size=\"sm\">{{ tab.icon() }}</ndw-icon>\r\n        }\r\n        {{ tab.title() }}\r\n        @if (tab.hasError()) {\r\n          <ndw-badge [size]=\"'small'\" [variant]=\"'error'\" />\r\n        }\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  @if (canScrollLeft()) {\r\n    <button\r\n      ndwButton\r\n      secondary\r\n      alternative\r\n      extra-small\r\n      class=\"scroll-arrow scroll-arrow-left\"\r\n      type=\"button\"\r\n      aria-label=\"Scroll naar links\"\r\n      tabindex=\"-1\"\r\n      (click)=\"scrollTo('left')\"\r\n    >\r\n      <ndw-icon>chevron_left</ndw-icon>\r\n    </button>\r\n  }\r\n\r\n  @if (canScrollRight()) {\r\n    <button\r\n      ndwButton\r\n      secondary\r\n      alternative\r\n      extra-small\r\n      class=\"scroll-arrow scroll-arrow-right\"\r\n      type=\"button\"\r\n      aria-label=\"Scroll naar rechts\"\r\n      tabindex=\"-1\"\r\n      (click)=\"scrollTo('right')\"\r\n    >\r\n      <ndw-icon>chevron_right</ndw-icon>\r\n    </button>\r\n  }\r\n</div>\r\n@for (tab of tabs(); track tab.id(); let i = $index) {\r\n  <div\r\n    class=\"tab-content\"\r\n    [ngClass]=\"{ 'is-hidden': !tab.active }\"\r\n    [id]=\"'tab-panel-' + tab.id()\"\r\n    role=\"tabpanel\"\r\n    [attr.aria-labelledby]=\"'tab-' + tab.id()\"\r\n    [tabindex]=\"0\"\r\n  >\r\n    <ng-template [cdkPortalOutlet]=\"tab.content\"></ng-template>\r\n  </div>\r\n}\r\n", styles: [".tab-group-wrapper{position:relative}.tab-group{display:flex;gap:var(--ndw-spacing-lg);overflow:auto hidden;padding-left:0;position:relative;flex:1;scrollbar-width:none;-ms-overflow-style:none;background:linear-gradient(to bottom,transparent calc(100% - var(--ndw-border-size-sm)),var(--ndw-color-grey-200) calc(100% - var(--ndw-border-size-sm))) 0 0/100vw 100% no-repeat}.tab-group::-webkit-scrollbar{display:none}.tab-group.with-padding{padding-inline:var(--ndw-spacing-lg)}.scroll-arrow{position:absolute;top:var(--ndw-spacing-sm);border-radius:100%;background-color:var(--ndw-color-white);color:var(--ndw-color-grey-600);transition:color .2s ease-out}.scroll-arrow:hover{background-color:var(--ndw-color-grey-50)!important}.scroll-arrow.scroll-arrow-left{left:0}.scroll-arrow.scroll-arrow-right{right:0}.tab-button{background:none;border:none;border-bottom:var(--ndw-border-size-lg) solid transparent;color:var(--ndw-color-grey-400);cursor:pointer;display:flex;align-items:center;gap:var(--ndw-spacing-xs);font-weight:700;padding:var(--ndw-spacing-md) 0;position:relative;transition:border-bottom .2s ease-out,color .2s ease-out;white-space:nowrap;flex-shrink:0}.tab-button ndw-badge{position:absolute;top:0rem;right:-1rem;pointer-events:none}.tab-button ndw-badge.small{top:.25rem;right:-.75rem}.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"] }]
         }], ctorParameters: () => [], propDecorators: { _tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], _tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }], _tabGroupContainer: [{ type: i0.ViewChild, args: ['tabGroupContainer', { isSignal: true }] }], hasPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPadding", required: false }] }], activeTabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTabId", required: false }] }, { type: i0.Output, args: ["activeTabIdChange"] }], inlinePadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlinePadding", required: false }] }] } });
 const ndwAgGridTheme = {
@@ -4465,14 +4465,14 @@ class ToastComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ToastComponent, isStandalone: true, selector: "ndw-toast", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", elementDimensions: "elementDimensions" }, host: { properties: { "class.info": "type() === \"info\"", "class.error": "type() === \"error\"" } }, ngImport: i0, template: "<ndw-icon class=\"toast-icon\">{{ type() }}</ndw-icon>\n{{ message() }}\n<button\n  ndwButton\n  tertiary\n  alternative\n  extra-small\n  (click)=\"closed.emit()\"\n  [attr.aria-label]=\"closeButtonLabel()\"\n>\n  <ndw-icon>close</ndw-icon>\n</button>\n@if (type() === 'info') {\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}\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{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;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.info{background-color:var(--ndw-color-grey-700);color:var(--ndw-color-white)}:host.info .toast-icon{color:var(--ndw-color-white)}:host.info [ndwButton] ndw-icon{color:var(--ndw-color-white)}:host.error{background-color:var(--ndw-color-critical-300);color:var(--ndw-color-grey-700)}:host.error .toast-icon{color:var(--ndw-color-critical-500)}:host.error [ndwButton] ndw-icon{color:var(--ndw-color-grey-700)}@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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ToastComponent, isStandalone: true, selector: "ndw-toast", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", elementDimensions: "elementDimensions" }, host: { properties: { "class.info": "type() === \"info\"", "class.error": "type() === \"error\"" } }, ngImport: i0, template: "<ndw-icon class=\"toast-icon\">{{ type() }}</ndw-icon>\r\n{{ message() }}\r\n<button\r\n  ndwButton\r\n  tertiary\r\n  alternative\r\n  extra-small\r\n  (click)=\"closed.emit()\"\r\n  [attr.aria-label]=\"closeButtonLabel()\"\r\n>\r\n  <ndw-icon>close</ndw-icon>\r\n</button>\r\n@if (type() === 'info') {\r\n  <div\r\n    class=\"progress-bar\"\r\n    [ngStyle]=\"{\r\n      'animation-duration': duration() + 'ms',\r\n      visibility: showProgress() ? 'visible' : 'hidden',\r\n    }\"\r\n    [class.paused]=\"paused()\"\r\n  ></div>\r\n}\r\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{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;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.info{background-color:var(--ndw-color-grey-700);color:var(--ndw-color-white)}:host.info .toast-icon{color:var(--ndw-color-white)}:host.info [ndwButton] ndw-icon{color:var(--ndw-color-white)}:host.error{background-color:var(--ndw-color-critical-300);color:var(--ndw-color-grey-700)}:host.error .toast-icon{color:var(--ndw-color-critical-500)}:host.error [ndwButton] ndw-icon{color:var(--ndw-color-grey-700)}@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: "21.0.8", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.info]': 'type() === "info"',
                         '[class.error]': 'type() === "error"',
-                    }, imports: [IconComponent, NgStyle], selector: 'ndw-toast', template: "<ndw-icon class=\"toast-icon\">{{ type() }}</ndw-icon>\n{{ message() }}\n<button\n  ndwButton\n  tertiary\n  alternative\n  extra-small\n  (click)=\"closed.emit()\"\n  [attr.aria-label]=\"closeButtonLabel()\"\n>\n  <ndw-icon>close</ndw-icon>\n</button>\n@if (type() === 'info') {\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}\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{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;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.info{background-color:var(--ndw-color-grey-700);color:var(--ndw-color-white)}:host.info .toast-icon{color:var(--ndw-color-white)}:host.info [ndwButton] ndw-icon{color:var(--ndw-color-white)}:host.error{background-color:var(--ndw-color-critical-300);color:var(--ndw-color-grey-700)}:host.error .toast-icon{color:var(--ndw-color-critical-500)}:host.error [ndwButton] ndw-icon{color:var(--ndw-color-grey-700)}@keyframes rightToLeft{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
+                    }, imports: [IconComponent, NgStyle], selector: 'ndw-toast', template: "<ndw-icon class=\"toast-icon\">{{ type() }}</ndw-icon>\r\n{{ message() }}\r\n<button\r\n  ndwButton\r\n  tertiary\r\n  alternative\r\n  extra-small\r\n  (click)=\"closed.emit()\"\r\n  [attr.aria-label]=\"closeButtonLabel()\"\r\n>\r\n  <ndw-icon>close</ndw-icon>\r\n</button>\r\n@if (type() === 'info') {\r\n  <div\r\n    class=\"progress-bar\"\r\n    [ngStyle]=\"{\r\n      'animation-duration': duration() + 'ms',\r\n      visibility: showProgress() ? 'visible' : 'hidden',\r\n    }\"\r\n    [class.paused]=\"paused()\"\r\n  ></div>\r\n}\r\n", styles: [".ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{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;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.info{background-color:var(--ndw-color-grey-700);color:var(--ndw-color-white)}:host.info .toast-icon{color:var(--ndw-color-white)}:host.info [ndwButton] ndw-icon{color:var(--ndw-color-white)}:host.error{background-color:var(--ndw-color-critical-300);color:var(--ndw-color-grey-700)}:host.error .toast-icon{color:var(--ndw-color-critical-500)}:host.error [ndwButton] ndw-icon{color:var(--ndw-color-grey-700)}@keyframes rightToLeft{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
         }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], paused: [{ type: i0.Input, args: [{ isSignal: true, alias: "paused", required: false }] }], showProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgress", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], elementDimensions: [{ type: i0.Output, args: ["elementDimensions"] }] } });
 class ToastListComponent {
@@ -4527,7 +4527,7 @@ class ToastListComponent {
         this.toastService.resume();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ToastListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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    [closeButtonLabel]=\"toast.closeButtonLabel ?? 'Sluit'\"\n    [message]=\"toast.message\"\n    [duration]=\"toast.duration\"\n    [paused]=\"toastService.paused()\"\n    [showProgress]=\"toastService.paused() || $first\"\n    [type]=\"toast.type\"\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:var(--first-toast-height)}: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", "closeButtonLabel", "id", "duration", "paused", "showProgress", "type"], outputs: ["closed", "elementDimensions"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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) {\r\n  <ndw-toast\r\n    class=\"toast\"\r\n    [class.hide-content]=\"!toastService.paused() && $index > 0\"\r\n    [ngStyle]=\"{\r\n      '--index': $index,\r\n      '--offset-height': toastOffsetHeights()[$index] + 'px',\r\n      '--first-toast-height': firstToastHeight() + 'px',\r\n    }\"\r\n    [id]=\"toast.id\"\r\n    [closeButtonLabel]=\"toast.closeButtonLabel ?? 'Sluit'\"\r\n    [message]=\"toast.message\"\r\n    [duration]=\"toast.duration\"\r\n    [paused]=\"toastService.paused()\"\r\n    [showProgress]=\"toastService.paused() || $first\"\r\n    [type]=\"toast.type\"\r\n    (closed)=\"toastService.close(toast.id)\"\r\n    (elementDimensions)=\"setToastDimensions(toast.id, $event)\"\r\n  ></ndw-toast>\r\n}\r\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:var(--first-toast-height)}: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", "closeButtonLabel", "id", "duration", "paused", "showProgress", "type"], outputs: ["closed", "elementDimensions"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ToastListComponent, decorators: [{
             type: Component,
@@ -4537,7 +4537,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '[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    [closeButtonLabel]=\"toast.closeButtonLabel ?? 'Sluit'\"\n    [message]=\"toast.message\"\n    [duration]=\"toast.duration\"\n    [paused]=\"toastService.paused()\"\n    [showProgress]=\"toastService.paused() || $first\"\n    [type]=\"toast.type\"\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:var(--first-toast-height)}: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"] }]
+                    }, imports: [ToastComponent, NgStyle], selector: 'ndw-toast-list', template: "@for (toast of toastService.toasts(); track toast.id) {\r\n  <ndw-toast\r\n    class=\"toast\"\r\n    [class.hide-content]=\"!toastService.paused() && $index > 0\"\r\n    [ngStyle]=\"{\r\n      '--index': $index,\r\n      '--offset-height': toastOffsetHeights()[$index] + 'px',\r\n      '--first-toast-height': firstToastHeight() + 'px',\r\n    }\"\r\n    [id]=\"toast.id\"\r\n    [closeButtonLabel]=\"toast.closeButtonLabel ?? 'Sluit'\"\r\n    [message]=\"toast.message\"\r\n    [duration]=\"toast.duration\"\r\n    [paused]=\"toastService.paused()\"\r\n    [showProgress]=\"toastService.paused() || $first\"\r\n    [type]=\"toast.type\"\r\n    (closed)=\"toastService.close(toast.id)\"\r\n    (elementDimensions)=\"setToastDimensions(toast.id, $event)\"\r\n  ></ndw-toast>\r\n}\r\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:var(--first-toast-height)}: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"] }]
         }], propDecorators: { toastComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => ToastComponent), { isSignal: true }] }] } });
 class ToastService {