@ndwnu/design-system 12.0.0 → 12.2.0

package/fesm2022/ndwnu-design-system.mjs

@@ -1,18 +1,18 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, forwardRef, Directive, model, computed, viewChild, inject, ElementRef, output, signal, DestroyRef, EventEmitter, ViewContainerRef, Output, contentChildren, PLATFORM_ID, contentChild, effect, Renderer2, afterNextRender, Injectable, InjectionToken, ChangeDetectorRef, DOCUMENT, linkedSignal, untracked, TemplateRef, viewChildren } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, forwardRef, Directive, model, computed, viewChild, ElementRef, signal, afterRenderEffect, effect, EventEmitter, inject, DestroyRef, ViewContainerRef, Output, output, contentChildren, PLATFORM_ID, contentChild, Renderer2, afterNextRender, CUSTOM_ELEMENTS_SCHEMA, Injectable, InjectionToken, ChangeDetectorRef, DOCUMENT, linkedSignal, untracked, TemplateRef, Injector, viewChildren } from '@angular/core';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { NgTemplateOutlet, NgClass, isPlatformBrowser, AsyncPipe, NgStyle } from '@angular/common';
+import { NgTemplateOutlet, NgClass, DatePipe, isPlatformBrowser, CommonModule, AsyncPipe, NgStyle } from '@angular/common';
+import { CoreBadgeComponent, CoreAutosuggestDirective, CoreIconComponent, CoreAutosuggestOptionComponent, MatchBoldPipe, CoreAutosuggestAddOptionComponent, CoreAutosuggestPanelComponent, CoreCheckboxComponent, CoreCheckboxGroupComponent, setRadioItemsName, checkRadioItems, CorePillComponent, CoreBreadcrumbComponent, CoreBreadcrumbGroupComponent, CoreFavoriteComponent, CoreKeyValueListComponent, CoreRouterBreadcrumbsComponent } from '@ndwnu/core';
 import * as i1$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, NgControl, Validators, FormsModule } from '@angular/forms';
-import { CoreAutosuggestDirective, CoreIconComponent, CoreAutosuggestOptionComponent, MatchBoldPipe, CoreAutosuggestAddOptionComponent, CoreAutosuggestPanelComponent, CoreCheckboxComponent, CoreCheckboxGroupComponent, setRadioItemsName, checkRadioItems, CorePillComponent, CoreBreadcrumbComponent, CoreBreadcrumbGroupComponent, CoreFavoriteComponent, CoreKeyValueListComponent, CoreRouterBreadcrumbsComponent } from '@ndwnu/core';
-import { provideNativeDateAdapter } from '@angular/material/core';
+import { NG_VALUE_ACCESSOR, NgControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MAT_DATE_LOCALE, provideNativeDateAdapter } from '@angular/material/core';
 import * as i1 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { AriaDescriber, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
+import { MatDatepickerIntl, MatCalendar, MatDatepickerModule } from '@angular/material/datepicker';
+import { noop, take, fromEvent, startWith, Subject, BehaviorSubject, interval, map, pairwise, takeWhile, filter, skipWhile, switchMap, tap } from 'rxjs';
+import { ConfigurableFocusTrapFactory, AriaDescriber } from '@angular/cdk/a11y';
 import * as i1$2 from '@angular/cdk/overlay';
 import { Overlay, OverlayModule } from '@angular/cdk/overlay';
-import { ComponentPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
-import { fromEvent, take, noop, startWith, Subject, BehaviorSubject, interval, map, pairwise, takeWhile, filter, skipWhile, switchMap, tap } from 'rxjs';
+import { TemplatePortal, ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { RouterLink } from '@angular/router';
 import { CdkScrollable } from '@angular/cdk/scrolling';
@@ -20,27 +20,15 @@ import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
 import { Dialog } from '@angular/cdk/dialog';
 import * as i1$3 from '@angular/cdk/drag-drop';
 import { CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
+import { debounceTime } from 'rxjs/operators';
 
-class BadgeComponent {
-    /**
-     * The value of the badge
-     */
-    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
-    /**
-     * The aria label, used by screen readers to give context.
-     */
-    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
-    /**
-     * When true, the badge will display values above 99.
-     * When false (default), the badge will display values above 99 as a dot
-     */
-    displayLargeNumbers = input(false, ...(ngDevMode ? [{ debugName: "displayLargeNumbers" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BadgeComponent, isStandalone: true, selector: "ndw-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, displayLargeNumbers: { classPropertyName: "displayLargeNumbers", publicName: "displayLargeNumbers", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (value(); as value) {\n  @if (!displayLargeNumbers() && (value < -9 || value > 99)) {\n    <span class=\"dot\"></span>\n  } @else {\n    {{ value }}\n  }\n} @else {\n  {{ value() }}\n}\n@if (ariaLabel()) {\n  <span class=\"sr-only\"> {{ ariaLabel() }}</span>\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";:host{align-items:center;background-color:var(--badge-background-color);border:var(--badge-border);border-radius:var(--badge-min-size);box-sizing:border-box;color:var(--badge-color);display:flex;font-size:var(--badge-font-size);height:var(--badge-min-size);justify-content:center;letter-spacing:-1px;max-width:fit-content;min-width:var(--badge-min-size);padding-inline:var(--badge-padding-inline);text-align:center}.dot{display:block;background-color:var(--badge-color);border-radius:50%;height:var(--badge-dot-size);width:var(--badge-dot-size)}.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;--badge-background-color: var(--ndw-color-primary-050);--badge-border: var(--ndw-border-size-sm) solid var(--ndw-color-primary);--badge-color: var(--ndw-color-primary);--badge-dot-size: var(--ndw-spacing-2xs);--badge-min-size: 1.25rem;--badge-padding-inline: var(--ndw-spacing-2xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class BadgeComponent extends CoreBadgeComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: BadgeComponent, isStandalone: true, selector: "ndw-badge", usesInheritance: true, ngImport: i0, template: "@if (variant() === 'error') {\n  !\n} @else if (value(); as value) {\n  @if (!displayLargeNumbers() && (value < -9 || value > 99)) {\n    <span class=\"dot\"></span>\n  } @else {\n    {{ value }}\n  }\n} @else {\n  {{ value() }}\n}\n@if (ariaLabel()) {\n  <span class=\"sr-only\">{{ ariaLabel() }}</span>\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";:host{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: "20.2.4", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-badge', template: "@if (value(); as value) {\n  @if (!displayLargeNumbers() && (value < -9 || value > 99)) {\n    <span class=\"dot\"></span>\n  } @else {\n    {{ value }}\n  }\n} @else {\n  {{ value() }}\n}\n@if (ariaLabel()) {\n  <span class=\"sr-only\"> {{ ariaLabel() }}</span>\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";: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)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-badge', template: "@if (variant() === 'error') {\n  !\n} @else if (value(); as value) {\n  @if (!displayLargeNumbers() && (value < -9 || value > 99)) {\n    <span class=\"dot\"></span>\n  } @else {\n    {{ value }}\n  }\n} @else {\n  {{ value() }}\n}\n@if (ariaLabel()) {\n  <span class=\"sr-only\">{{ ariaLabel() }}</span>\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";:host{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 {
@@ -185,23 +173,737 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
             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"] }]
         }] });
 
-class DatepickerComponent {
-    dateClass = (cellDate, view) => {
-        const className = 'ndw-date';
-        // Only highlight dates inside the month view.
-        if (view === 'month') {
-            const date = cellDate.getDate();
-            // Highlight the 1st and 20th day of each month.
-            return date === 1 || date === 20 ? `${className} highlighted` : className;
-        }
-        return className;
+function createDutchDatepickerIntl() {
+    const intl = new MatDatepickerIntl();
+    intl.calendarLabel = 'Kalender';
+    intl.openCalendarLabel = 'Open kalender';
+    intl.closeCalendarLabel = 'Sluit kalender';
+    intl.comparisonDateLabel = 'Vergelijkingsdatum';
+    intl.prevMonthLabel = 'Vorige maand';
+    intl.nextMonthLabel = 'Volgende maand';
+    intl.nextMultiYearLabel = 'Volgende jaren';
+    intl.prevMultiYearLabel = 'Vorige jaren';
+    intl.prevYearLabel = 'Vorig jaar';
+    intl.nextYearLabel = 'Volgend jaar';
+    intl.switchToMonthViewLabel = 'Schakel naar maandweergave';
+    intl.switchToMultiYearViewLabel = 'Schakel naar jaartallenweergave';
+    return intl;
+}
+function datesAreSameYear(d1, d2) {
+    return d1.getFullYear() === d2.getFullYear();
+}
+function datesAreSameMonth(d1, d2) {
+    return datesAreSameYear(d1, d2) && d1.getMonth() === d2.getMonth();
+}
+function datesAreSameDay(d1, d2) {
+    return datesAreSameMonth(d1, d2) && d1.getDate() === d2.getDate();
+}
+function toDateArray(value) {
+    return [value].flat().filter((v) => v != null);
+}
+function toggleDates(current, toToggle) {
+    const toggled = [...current];
+    toToggle.forEach((date) => {
+        const index = toggled.findIndex((d) => areDatesEqual(d, date));
+        if (index > -1) {
+            toggled.splice(index, 1);
+        }
+        else {
+            toggled.push(date);
+        }
+    });
+    return toggled;
+}
+function getUniqueDates(dates) {
+    return dates.filter((date, index) => dates.findIndex((d) => areDatesEqual(d, date)) === index);
+}
+function compareDates(a, b) {
+    return a.getTime() - b.getTime();
+}
+function isDateBefore(a, b) {
+    return compareDates(a, b) < 0;
+}
+function isDateAfter(a, b) {
+    return compareDates(a, b) > 0;
+}
+function areDatesEqual(a, b) {
+    return compareDates(a, b) === 0;
+}
+function areDatesEqualInView(a, b, view) {
+    switch (view) {
+        case 'month':
+            return datesAreSameDay(a, b);
+        case 'year':
+            return datesAreSameMonth(a, b);
+        case 'multi-year':
+            return datesAreSameYear(a, b);
+        default:
+            return false;
+    }
+}
+function datesToInputValue(dates, mode) {
+    if (dates.length === 0) {
+        return '';
+    }
+    switch (mode) {
+        case 'month':
+            return formatMonth(dates[0]);
+        case 'single':
+            return formatDate(dates[0]);
+        case 'multiple':
+            return dates.sort(compareDates).map(formatDate).join(', ');
+        case 'range':
+            return dates.slice(0, 2).map(formatDate).join(' - ');
+        default:
+            return '';
+    }
+}
+function formatDate(date) {
+    return new Intl.DateTimeFormat('nl-NL').format(date);
+}
+function formatMonth(date) {
+    return new Intl.DateTimeFormat('nl-NL', { year: 'numeric', month: 'numeric' }).format(date);
+}
+function inputValueToDates(input, mode) {
+    const parts = input.split(/[-,]/).map((part) => parseInt(part.trim(), 10));
+    const parsed = [];
+    if (mode === 'month' && parts.length === 2) {
+        const [month, year] = parts;
+        parsed.push(createDate(year, month - 1, 1));
+    }
+    else if (mode === 'single' && parts.length === 3) {
+        const [day, month, year] = parts;
+        parsed.push(createDate(year, month - 1, day));
+    }
+    else if (mode === 'multiple' && parts.length % 3 === 0) {
+        for (let i = 0; i < parts.length; i += 3) {
+            const [day, month, year] = parts.slice(i, i + 3);
+            parsed.push(createDate(year, month - 1, day));
+        }
+    }
+    else if (mode === 'range' && parts.length === 6) {
+        const [day1, month1, year1, day2, month2, year2] = parts;
+        parsed.push(createDate(year1, month1 - 1, day1));
+        parsed.push(createDate(year2, month2 - 1, day2));
+    }
+    return parsed.filter((date) => date != null);
+}
+function createDate(year, month, day) {
+    const minValidYear = 1000;
+    if (isNaN(year) ||
+        isNaN(month) ||
+        isNaN(day) ||
+        year < minValidYear ||
+        month < 0 ||
+        month > 11 ||
+        day < 1 ||
+        day > 31) {
+        return null;
+    }
+    const date = new Date(year, month, day);
+    return date.getFullYear() === year && date.getMonth() === month && date.getDate() === day
+        ? date
+        : null;
+}
+function datesToOutputValue(dates, mode) {
+    const array = toDateArray(dates);
+    switch (mode) {
+        case 'single':
+        case 'month':
+            return array[0] ?? null;
+        case 'multiple':
+            return array;
+        case 'range':
+            return array.slice(0, 2);
+    }
+}
+function getDateClassFn(dateWithIndicatorFn, mode, selectedDates) {
+    return (cellDate, view) => {
+        const classNames = ['ndw-date'];
+        if (dateWithIndicatorFn(cellDate)) {
+            classNames.push('ndw-date-indicator');
+        }
+        if (selectedDates.some((selectedDate) => areDatesEqualInView(cellDate, selectedDate, view))) {
+            classNames.push('ndw-date-selected');
+        }
+        if (mode === 'range' && selectedDates.length === 2) {
+            if (isDateBefore(selectedDates[0], cellDate) && isDateAfter(selectedDates[1], cellDate)) {
+                classNames.push('ndw-date-in-range');
+            }
+            if (areDatesEqual(selectedDates[0], cellDate)) {
+                classNames.push('ndw-date-range-start');
+            }
+            if (areDatesEqual(selectedDates[1], cellDate)) {
+                classNames.push('ndw-date-range-end');
+            }
+        }
+        return classNames;
     };
+}
+
+const rangePreviewClasses = {
+    start: 'ndw-date-range-start-preview',
+    end: 'ndw-date-range-end-preview',
+    inside: 'ndw-date-in-range-preview',
+};
+class CalendarComponent {
+    mode = input('single', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
+    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
+    startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : []));
+    dateEnabledFilter = input(() => true, ...(ngDevMode ? [{ debugName: "dateEnabledFilter" }] : []));
+    dateWithIndicatorFilter = input(() => false, ...(ngDevMode ? [{ debugName: "dateWithIndicatorFilter" }] : []));
+    elevated = input(true, ...(ngDevMode ? [{ debugName: "elevated" }] : []));
+    internalDateEnabledFilter = computed(() => {
+        const disabled = this.disabled();
+        const filter = this.dateEnabledFilter();
+        return (date) => !disabled && filter(date);
+    }, ...(ngDevMode ? [{ debugName: "internalDateEnabledFilter" }] : []));
+    calendar = viewChild(MatCalendar, ...(ngDevMode ? [{ debugName: "calendar" }] : []));
+    calendarElement = viewChild(MatCalendar, ...(ngDevMode ? [{ debugName: "calendarElement", read: (ElementRef) }] : [{
+            read: (ElementRef),
+        }]));
+    value = signal([], ...(ngDevMode ? [{ debugName: "value" }] : []));
+    startView = computed(() => (this.mode() === 'month' ? 'year' : 'month'), ...(ngDevMode ? [{ debugName: "startView" }] : []));
+    dateClass = computed(() => getDateClassFn(this.dateWithIndicatorFilter(), this.mode(), this.value()), ...(ngDevMode ? [{ debugName: "dateClass" }] : []));
+    #onChange = noop;
+    #mouseMoveListener = null;
+    constructor() {
+        afterRenderEffect(() => {
+            const calendar = this.calendar();
+            this.value(); // Depend on value changes.
+            // Force the calendar to refresh the calendar view.
+            // This is needed to redraw after setting classes on dates.
+            calendar?.updateTodaysDate();
+        });
+        effect(() => {
+            const mode = this.mode();
+            const element = this.calendarElement()?.nativeElement;
+            const calendar = this.calendar();
+            this.removeMouseMoveListener();
+            if (mode !== 'range' || !element || !calendar) {
+                return;
+            }
+            this.addMouseMoveListener(element, calendar);
+        });
+    }
+    ngOnDestroy() {
+        this.removeMouseMoveListener();
+    }
+    addMouseMoveListener(calendarElement, calendar) {
+        this.#mouseMoveListener = () => this.addRangePreviewClasses(calendarElement, calendar);
+        calendarElement.addEventListener('mousemove', this.#mouseMoveListener);
+    }
+    removeMouseMoveListener() {
+        if (this.#mouseMoveListener) {
+            this.calendarElement()?.nativeElement.removeEventListener('mousemove', this.#mouseMoveListener);
+            this.#mouseMoveListener = null;
+        }
+    }
+    addRangePreviewClasses(calendarElement, calendar) {
+        const selection = this.value();
+        const hovered = calendarElement.querySelector('.ndw-date:hover');
+        if (calendar.currentView !== 'month' || selection.length !== 1 || !hovered) {
+            calendarElement
+                .querySelectorAll('.ndw-date')
+                .forEach((btn) => this.removeRangePreviewClasses(btn));
+            return;
+        }
+        const getButtonDate = (el) => {
+            return new Date(calendar.activeDate.getFullYear() || 0, calendar.activeDate.getMonth() || 0, parseInt(el.textContent || '0', 10));
+        };
+        const selectedDate = selection[0];
+        const hoveredDate = getButtonDate(hovered);
+        // Get all buttons between
+        calendarElement.querySelectorAll('.ndw-date').forEach((btn) => {
+            const btnDate = getButtonDate(btn);
+            this.removeRangePreviewClasses(btn);
+            if ((isDateAfter(btnDate, selectedDate) && isDateBefore(btnDate, hoveredDate)) ||
+                (isDateBefore(btnDate, selectedDate) && isDateAfter(btnDate, hoveredDate))) {
+                btn.classList.add(rangePreviewClasses.inside);
+            }
+            else if (areDatesEqual(btnDate, selectedDate) && isDateAfter(hoveredDate, selectedDate)) {
+                btn.classList.add(rangePreviewClasses.start);
+            }
+            else if (areDatesEqual(btnDate, selectedDate) && isDateBefore(hoveredDate, selectedDate)) {
+                btn.classList.add(rangePreviewClasses.end);
+            }
+            else if (areDatesEqual(btnDate, hoveredDate) && isDateAfter(btnDate, selectedDate)) {
+                btn.classList.add(rangePreviewClasses.end);
+            }
+            else if (areDatesEqual(btnDate, hoveredDate) && isDateBefore(btnDate, selectedDate)) {
+                btn.classList.add(rangePreviewClasses.start);
+            }
+        });
+    }
+    removeRangePreviewClasses(element) {
+        Object.values(rangePreviewClasses).forEach((cssClass) => {
+            element.classList.remove(cssClass);
+        });
+    }
+    onDateSelected(date, toggle = true) {
+        const mode = this.mode();
+        const dates = toDateArray(date);
+        let selection;
+        if (mode === 'multiple' && toggle) {
+            selection = toggleDates(this.value(), dates);
+        }
+        else if (mode === 'range' && toggle) {
+            const toggled = toggleDates(this.value(), dates);
+            // When the user selected a third date, start a new range from that date.
+            if (toggled.length > 2) {
+                selection = toggled.slice(-1);
+            }
+            else {
+                selection = toggled;
+            }
+        }
+        else {
+            selection = dates;
+        }
+        selection = selection.sort(compareDates);
+        this.writeValue(selection);
+        this.#onChange(datesToOutputValue(selection, mode));
+    }
+    onMonthSelected(date) {
+        if (this.mode() === 'month') {
+            this.onDateSelected(date);
+        }
+    }
+    writeValue(value) {
+        this.value.set(toDateArray(value));
+    }
+    registerOnChange(fn) {
+        this.#onChange = fn;
+    }
+    registerOnTouched(_fn) {
+        // noop
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.4", type: CalendarComponent, isStandalone: true, selector: "ndw-calendar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, dateEnabledFilter: { classPropertyName: "dateEnabledFilter", publicName: "dateEnabledFilter", isSignal: true, isRequired: false, transformFunction: null }, dateWithIndicatorFilter: { classPropertyName: "dateWithIndicatorFilter", publicName: "dateWithIndicatorFilter", isSignal: true, isRequired: false, transformFunction: null }, elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { properties: { "class.elevated": "elevated()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CalendarComponent),
+                multi: true,
+            },
+            { 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  panelClass=\"ndw-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{display:block;width:300px;margin:calc(-1 * var(--ndw-spacing-2xs))}:host.elevated{border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-content)}\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: "20.2.4", ngImport: i0, type: CalendarComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDatepickerModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CalendarComponent),
+                            multi: true,
+                        },
+                        { provide: MAT_DATE_LOCALE, useValue: 'nl-NL' },
+                        { provide: MatDatepickerIntl, useFactory: createDutchDatepickerIntl },
+                        provideNativeDateAdapter(),
+                    ], selector: 'ndw-calendar', host: {
+                        '[class.elevated]': 'elevated()',
+                    }, template: "<mat-calendar\n  panelClass=\"ndw-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{display:block;width:300px;margin:calc(-1 * var(--ndw-spacing-2xs))}:host.elevated{border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-content)}\n"] }]
+        }], ctorParameters: () => [] });
+
+class PopoverTriggerDirective {
+    popoverToggled = new EventEmitter();
+    popoverPosition = input('nextToTriggerButton', ...(ngDevMode ? [{ debugName: "popoverPosition" }] : []));
+    popoverContent = input.required(...(ngDevMode ? [{ debugName: "popoverContent", alias: 'ndwPopoverTrigger' }] : [{ alias: 'ndwPopoverTrigger' }]));
+    toggleOnClick = input(true, ...(ngDevMode ? [{ debugName: "toggleOnClick" }] : []));
+    isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    toggle() {
+        if (!this.toggleOnClick()) {
+            return;
+        }
+        this.isOpen.set(!this.isOpen());
+        this.togglePopover();
+    }
+    destroyRef = inject(DestroyRef);
+    elementRef = inject((ElementRef));
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    focusTrapFactory = inject(ConfigurableFocusTrapFactory);
+    overlayRef;
+    ngOnDestroy() {
+        this.isOpen.set(false);
+        this.togglePopover();
+    }
+    togglePopover() {
+        if (this.isOpen()) {
+            this.open();
+        }
+        else {
+            this.close();
+        }
+        this.popoverToggled.emit(this.isOpen());
+    }
+    open() {
+        const positions = this.getPopoverPosition(this.popoverPosition());
+        const templatePortal = new TemplatePortal(this.popoverContent(), this.viewContainerRef);
+        this.overlayRef = this.overlay.create({
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            positionStrategy: this.overlay
+                .position()
+                .flexibleConnectedTo(this.elementRef)
+                .withPositions(positions),
+        });
+        this.overlayRef.attach(templatePortal);
+        this.overlayRef.hostElement.addEventListener('click', (event) => {
+            const target = event.target;
+            if (this.nodeOrParentsHaveAttribute(target, 'ndwPopoverCloseTrigger')) {
+                this.isOpen.set(false);
+                this.togglePopover();
+            }
+        });
+        this.trapFocus(this.overlayRef);
+        this.closeOverlayOnEscapeKey(this.overlayRef);
+        this.closeOverlayOnBackdropClick(this.overlayRef);
+    }
+    trapFocus(overlayRef) {
+        this.focusTrapFactory.create(overlayRef.overlayElement);
+    }
+    closeOverlayOnEscapeKey(overlayRef) {
+        overlayRef.overlayElement.onkeydown = (event) => {
+            if (event.key === 'Escape') {
+                this.isOpen.set(false);
+                this.togglePopover();
+            }
+        };
+    }
+    nodeOrParentsHaveAttribute(node, attribute) {
+        let next = node;
+        while (next) {
+            if (next.hasAttribute(attribute)) {
+                return true;
+            }
+            next = next.parentElement;
+        }
+        return false;
+    }
+    closeOverlayOnBackdropClick(overlayRef) {
+        overlayRef
+            .backdropClick()
+            .pipe(takeUntilDestroyed(this.destroyRef), take(1))
+            .subscribe(() => {
+            this.isOpen.set(false);
+            this.togglePopover();
+        });
+    }
+    close() {
+        this.overlayRef?.dispose();
+    }
+    getPopoverPosition(popoverPosition) {
+        let positions;
+        if (popoverPosition === 'overTriggerButton') {
+            positions = [
+                {
+                    originX: 'start',
+                    originY: 'bottom',
+                    overlayX: 'start',
+                    overlayY: 'bottom',
+                    panelClass: 'ndw-popover-panel',
+                },
+                {
+                    originX: 'end',
+                    originY: 'bottom',
+                    overlayX: 'end',
+                    overlayY: 'bottom',
+                    panelClass: 'ndw-popover-panel',
+                },
+                {
+                    originX: 'start',
+                    originY: 'top',
+                    overlayX: 'start',
+                    overlayY: 'top',
+                    panelClass: 'ndw-popover-panel',
+                },
+                {
+                    originX: 'end',
+                    originY: 'top',
+                    overlayX: 'end',
+                    overlayY: 'top',
+                    panelClass: 'ndw-popover-panel',
+                },
+            ];
+        }
+        else {
+            positions = [
+                {
+                    originX: 'start',
+                    originY: 'bottom',
+                    overlayX: 'start',
+                    overlayY: 'top',
+                    offsetY: 4,
+                    panelClass: 'ndw-popover-panel',
+                },
+                {
+                    originX: 'end',
+                    originY: 'bottom',
+                    overlayX: 'end',
+                    overlayY: 'top',
+                    offsetY: 4,
+                    panelClass: 'ndw-popover-panel',
+                },
+                {
+                    originX: 'start',
+                    originY: 'top',
+                    overlayX: 'start',
+                    overlayY: 'bottom',
+                    offsetY: -4,
+                    panelClass: 'ndw-popover-panel',
+                },
+                {
+                    originX: 'end',
+                    originY: 'top',
+                    overlayX: 'end',
+                    overlayY: 'bottom',
+                    offsetY: -4,
+                    panelClass: 'ndw-popover-panel',
+                },
+            ];
+        }
+        return [
+            ...positions,
+            ...positions.map((position) => ({
+                ...position,
+                overlayX: 'center',
+                overlayY: 'center',
+            })),
+        ];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: PopoverTriggerDirective, isStandalone: true, selector: "[ndwPopoverTrigger]", inputs: { popoverPosition: { classPropertyName: "popoverPosition", publicName: "popoverPosition", isSignal: true, isRequired: false, transformFunction: null }, popoverContent: { classPropertyName: "popoverContent", publicName: "ndwPopoverTrigger", isSignal: true, isRequired: true, transformFunction: null }, toggleOnClick: { classPropertyName: "toggleOnClick", publicName: "toggleOnClick", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { popoverToggled: "popoverToggled", isOpen: "isOpenChange" }, host: { listeners: { "click": "toggle()" } }, exportAs: ["ndwPopoverTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PopoverTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'ndwPopoverTrigger',
+                    host: {
+                        '(click)': 'toggle()',
+                    },
+                    selector: '[ndwPopoverTrigger]',
+                }]
+        }], propDecorators: { popoverToggled: [{
+                type: Output
+            }] } });
+
+class TagComponent {
+    /**
+     * Disables the tag
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Aria label for the interactive button
+     */
+    suffixAriaLabel = input('Verwijder', ...(ngDevMode ? [{ debugName: "suffixAriaLabel" }] : []));
+    /**
+     * The name of the icon to display
+     */
+    suffixIcon = input('close', ...(ngDevMode ? [{ debugName: "suffixIcon" }] : []));
+    clicked = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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"] }]
+        }] });
+
+class InputDirective {
+    set disabled(disabled) {
+        this.element.disabled = disabled;
+    }
+    get error() {
+        return !!this.element.getAttribute('error');
+    }
+    set error(error) {
+        this.element.toggleAttribute('error', error);
+    }
+    set success(success) {
+        this.element.toggleAttribute('success', success);
+    }
+    set id(id) {
+        this.element.id = id;
+    }
+    set ariaDescribedBy(id) {
+        this.element.setAttribute('aria-describedby', id);
+    }
+    elementRef = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    ngControl = inject(NgControl, { optional: true });
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    get control() {
+        return this.ngControl ? this.ngControl.control : null;
+    }
+    ngOnInit() {
+        this.updateRequiredAttribute();
+        this.control?.statusChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.updateRequiredAttribute();
+        });
+        fromEvent(this.element, 'blur')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.updateErrorAttribute();
+        });
+        // Add ndw-changed attribute when the input is changed and has a value
+        fromEvent(this.element, 'input')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.setSelectPlaceholderAttribute();
+        });
+        this.setSelectPlaceholderAttribute();
+    }
+    updateErrorAttribute(formFieldError) {
+        if (this.control) {
+            this.error = (this.control.invalid === true && this.control.touched) || !!formFieldError;
+        }
+    }
+    setSelectPlaceholderAttribute() {
+        if (this.element instanceof HTMLSelectElement) {
+            const isPlaceholderSelected = this.element.selectedIndex === 0 &&
+                this.element.options[this.element.selectedIndex].disabled;
+            this.element.toggleAttribute('ndw-placeholder', isPlaceholderSelected);
+        }
+    }
+    updateRequiredAttribute() {
+        if (this.control) {
+            // Mark element as required when the control has a 'required' validator.
+            // This will show an asterisk (*)
+            this.element.required = this.control.hasValidator(Validators.required);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: InputDirective, isStandalone: true, selector: "input[ndwInput], select[ndwInput], textarea[ndwInput]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[ndwInput], select[ndwInput], textarea[ndwInput]',
+                }]
+        }] });
+
+class DatepickerComponent {
+    mode = input('single', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    placeholder = input('Selecteer een datum', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    openCalendarLabel = input('Open kalender', ...(ngDevMode ? [{ debugName: "openCalendarLabel" }] : []));
+    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
+    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
+    dateEnabledFilter = input(() => true, ...(ngDevMode ? [{ debugName: "dateEnabledFilter" }] : []));
+    dateWithIndicatorFilter = input(() => false, ...(ngDevMode ? [{ debugName: "dateWithIndicatorFilter" }] : []));
+    // Used by the FormFieldComponent to set the success and error state.
+    input = viewChild.required(InputDirective);
+    popoverTrigger = viewChild.required(PopoverTriggerDirective);
+    value = model([], ...(ngDevMode ? [{ debugName: "value" }] : []));
+    startAt = computed(() => {
+        const value = this.value();
+        return value.length > 0 ? value[value.length - 1] : null;
+    }, ...(ngDevMode ? [{ debugName: "startAt" }] : []));
+    formattedValue = computed(() => datesToInputValue(this.value(), this.mode()), ...(ngDevMode ? [{ debugName: "formattedValue" }] : []));
+    showTags = computed(() => this.mode() === 'multiple', ...(ngDevMode ? [{ debugName: "showTags" }] : []));
+    #onChange = noop;
+    onDateInput(input) {
+        const parsed = inputValueToDates(input, this.mode());
+        const merged = this.mode() === 'multiple' ? [...toDateArray(this.value()), ...parsed] : parsed;
+        const filtered = getUniqueDates(merged.filter((date) => {
+            const dateEnabledFilter = this.dateEnabledFilter();
+            const minDate = this.minDate() ?? date;
+            const maxDate = this.maxDate() ?? date;
+            return (dateEnabledFilter(date) &&
+                compareDates(date, minDate) >= 0 &&
+                compareDates(date, maxDate) <= 0);
+        }));
+        if (filtered.length > 0) {
+            this.onDateSelected(filtered);
+        }
+        else {
+            this.onDateSelected(null);
+        }
+        if (filtered.length === 0 || this.mode() === 'multiple') {
+            this.input().element.value = '';
+        }
+    }
+    removeDate(date) {
+        const filtered = this.value().filter((d) => d.getTime() !== date.getTime());
+        this.onDateSelected(filtered);
+    }
+    onDateSelected(date) {
+        const mode = this.mode();
+        const dates = toDateArray(date).sort(compareDates);
+        this.writeValue(dates);
+        this.#onChange(datesToOutputValue(dates, mode));
+        if (mode === 'single' || mode === 'month') {
+            this.#closeCalendar();
+        }
+        if (!this.popoverTrigger().isOpen()) {
+            this.input().control?.markAllAsTouched();
+            this.input().updateErrorAttribute();
+        }
+    }
+    onPopoverOpenChange(isOpen) {
+        if (!isOpen) {
+            this.input().control?.markAllAsTouched();
+            this.input().updateErrorAttribute();
+        }
+    }
+    #closeCalendar() {
+        if (this.popoverTrigger().isOpen()) {
+            this.popoverTrigger().isOpen.set(false);
+            this.popoverTrigger().togglePopover();
+        }
+    }
+    writeValue(value) {
+        this.value.set(toDateArray(value));
+    }
+    registerOnChange(fn) {
+        this.#onChange = fn;
+    }
+    registerOnTouched(_fn) {
+        // noop
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: DatepickerComponent, isStandalone: true, selector: "ndw-datepicker", providers: [provideNativeDateAdapter()], ngImport: i0, template: "<input ndwInput [matDatepicker]=\"picker\" placeholder=\"Select a date\" />\n<mat-datepicker-toggle [for]=\"picker\" />\n<mat-datepicker [dateClass]=\"dateClass\" panelClass=\"ndw-calendar\" #picker />\n", styles: [":host{position:relative}mat-datepicker-toggle{position:absolute;right:0;top:0;transform:scale(.75)}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: DatepickerComponent, isStandalone: true, selector: "ndw-datepicker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, openCalendarLabel: { classPropertyName: "openCalendarLabel", publicName: "openCalendarLabel", 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 }, dateEnabledFilter: { classPropertyName: "dateEnabledFilter", publicName: "dateEnabledFilter", isSignal: true, isRequired: false, transformFunction: null }, dateWithIndicatorFilter: { classPropertyName: "dateWithIndicatorFilter", publicName: "dateWithIndicatorFilter", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", value: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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  />\n</ng-template>\n\n@if (showTags() && value().length > 0) {\n  <div class=\"tag-container\">\n    @for (value of value(); track value) {\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"], 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: "20.2.4", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDatepickerModule], providers: [provideNativeDateAdapter()], selector: 'ndw-datepicker', template: "<input ndwInput [matDatepicker]=\"picker\" placeholder=\"Select a date\" />\n<mat-datepicker-toggle [for]=\"picker\" />\n<mat-datepicker [dateClass]=\"dateClass\" panelClass=\"ndw-calendar\" #picker />\n", styles: [":host{position:relative}mat-datepicker-toggle{position:absolute;right:0;top:0;transform:scale(.75)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormsModule,
+                        MatDatepickerModule,
+                        InputDirective,
+                        IconComponent,
+                        PopoverTriggerDirective,
+                        CalendarComponent,
+                        TagComponent,
+                        DatePipe,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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  />\n</ng-template>\n\n@if (showTags() && value().length > 0) {\n  <div class=\"tag-container\">\n    @for (value of value(); track value) {\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"] }]
         }] });
 
 class ErrorComponent {
@@ -215,7 +917,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
 
 const MIME_TYPE_MAP = {
     geojson: 'application/geo+json',
+    tsv: 'text/tab-separated-values',
 };
+
 class FileUploadComponent {
     allowedFileTypeRegex = input(...(ngDevMode ? [undefined, { debugName: "allowedFileTypeRegex" }] : []));
     disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
@@ -224,6 +928,7 @@ class FileUploadComponent {
         dragOverText: 'Laat los om te uploaden',
     }, ...(ngDevMode ? [{ debugName: "fileUploadText" }] : []));
     maxFileSizeInBytes = input(1000000, ...(ngDevMode ? [{ debugName: "maxFileSizeInBytes" }] : []));
+    mimeTypeMap = input({}, ...(ngDevMode ? [{ debugName: "mimeTypeMap" }] : []));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
     uploadDate = input('', ...(ngDevMode ? [{ debugName: "uploadDate" }] : []));
     draggingOver = model(false, ...(ngDevMode ? [{ debugName: "draggingOver" }] : []));
@@ -363,7 +1068,7 @@ class FileUploadComponent {
      * Ensures that the provided File has a valid MIME type.
      *
      * NOTE: Some file extensions are not automatically mapped to a valid MIME type by the operating system.
-     * In such cases, the MIME_TYPE_MAP is used to assign the correct MIME type.
+     * In such cases, the MIME_TYPE_MAP in combination with the mimeTypeMap input is used to assign the correct MIME type.
      */
     ensureFileType(file) {
         if (file.type?.trim()) {
@@ -375,7 +1080,8 @@ class FileUploadComponent {
             return file;
         }
         const extension = nameParts.pop()?.toLowerCase();
-        const mimeType = extension && MIME_TYPE_MAP[extension];
+        const combinedMimeTypeMap = { ...MIME_TYPE_MAP, ...this.mimeTypeMap() };
+        const mimeType = extension && combinedMimeTypeMap[extension];
         if (mimeType) {
             return new File([file], file.name, { type: mimeType, lastModified: file.lastModified });
         }
@@ -383,7 +1089,7 @@ class FileUploadComponent {
         return file;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: FileUploadComponent, isStandalone: true, selector: "ndw-file-upload", inputs: { allowedFileTypeRegex: { classPropertyName: "allowedFileTypeRegex", publicName: "allowedFileTypeRegex", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fileUploadText: { classPropertyName: "fileUploadText", publicName: "fileUploadText", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeInBytes: { classPropertyName: "maxFileSizeInBytes", publicName: "maxFileSizeInBytes", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, uploadDate: { classPropertyName: "uploadDate", publicName: "uploadDate", isSignal: true, isRequired: false, transformFunction: null }, draggingOver: { classPropertyName: "draggingOver", publicName: "draggingOver", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, incorrectFileSize: { classPropertyName: "incorrectFileSize", publicName: "incorrectFileSize", isSignal: true, isRequired: false, transformFunction: null }, incorrectFileType: { classPropertyName: "incorrectFileType", publicName: "incorrectFileType", isSignal: true, isRequired: false, transformFunction: null }, selectedFile: { classPropertyName: "selectedFile", publicName: "selectedFile", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", draggingOver: "draggingOverChange", error: "errorChange", incorrectFileSize: "incorrectFileSizeChange", incorrectFileType: "incorrectFileTypeChange", selectedFile: "selectedFileChange", success: "successChange" }, host: { listeners: { "click": "onClick()", "dragenter": "onDragEnter($event)", "dragleave": "onDragLeave($event)", "dragover": "onDragOver($event)", "drop": "onDrop($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.tabindex": "!this.canEdit() ? -1 : 0", "class.disabled": "disabled()", "class.dragging": "draggingOver()", "class.error": "error()", "class.file-selected": "!!selectedFile()", "class.readonly": "readonly()", "class.success": "success()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: FileUploadComponent, isStandalone: true, selector: "ndw-file-upload", inputs: { allowedFileTypeRegex: { classPropertyName: "allowedFileTypeRegex", publicName: "allowedFileTypeRegex", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fileUploadText: { classPropertyName: "fileUploadText", publicName: "fileUploadText", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeInBytes: { classPropertyName: "maxFileSizeInBytes", publicName: "maxFileSizeInBytes", isSignal: true, isRequired: false, transformFunction: null }, mimeTypeMap: { classPropertyName: "mimeTypeMap", publicName: "mimeTypeMap", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, uploadDate: { classPropertyName: "uploadDate", publicName: "uploadDate", isSignal: true, isRequired: false, transformFunction: null }, draggingOver: { classPropertyName: "draggingOver", publicName: "draggingOver", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, incorrectFileSize: { classPropertyName: "incorrectFileSize", publicName: "incorrectFileSize", isSignal: true, isRequired: false, transformFunction: null }, incorrectFileType: { classPropertyName: "incorrectFileType", publicName: "incorrectFileType", isSignal: true, isRequired: false, transformFunction: null }, selectedFile: { classPropertyName: "selectedFile", publicName: "selectedFile", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", draggingOver: "draggingOverChange", error: "errorChange", incorrectFileSize: "incorrectFileSizeChange", incorrectFileType: "incorrectFileTypeChange", selectedFile: "selectedFileChange", success: "successChange" }, host: { listeners: { "click": "onClick()", "dragenter": "onDragEnter($event)", "dragleave": "onDragLeave($event)", "dragover": "onDragOver($event)", "drop": "onDrop($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.tabindex": "!this.canEdit() ? -1 : 0", "class.disabled": "disabled()", "class.dragging": "draggingOver()", "class.error": "error()", "class.file-selected": "!!selectedFile()", "class.readonly": "readonly()", "class.success": "success()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: FileUploadComponent,
@@ -549,335 +1255,76 @@ class ClearSearchButtonComponent {
         }
         inputElement.value = '';
         inputElement.dispatchEvent(new Event('input'));
-        this.inputValue.set('');
-        this.buttonClicked.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ClearSearchButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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"] }]
-        }] });
-
-const INPUT_CONTAINER_CLASS = 'input-container';
-
-var FormFieldElement;
-(function (FormFieldElement) {
-    FormFieldElement["Dropdown"] = "ndw-dropdown";
-    FormFieldElement["Input"] = "input";
-    FormFieldElement["Select"] = "select";
-    FormFieldElement["Textarea"] = "textarea";
-})(FormFieldElement || (FormFieldElement = {}));
-
-class InfoComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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"] }]
-        }] });
-
-class InputDirective {
-    set disabled(disabled) {
-        this.element.disabled = disabled;
-    }
-    get error() {
-        return !!this.element.getAttribute('error');
-    }
-    set error(error) {
-        this.element.toggleAttribute('error', error);
-    }
-    set success(success) {
-        this.element.toggleAttribute('success', success);
-    }
-    set id(id) {
-        this.element.id = id;
-    }
-    set ariaDescribedBy(id) {
-        this.element.setAttribute('aria-describedby', id);
-    }
-    elementRef = inject(ElementRef);
-    destroyRef = inject(DestroyRef);
-    ngControl = inject(NgControl, { optional: true });
-    get element() {
-        return this.elementRef.nativeElement;
-    }
-    get control() {
-        return this.ngControl ? this.ngControl.control : null;
-    }
-    ngOnInit() {
-        this.updateRequiredAttribute();
-        this.control?.statusChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-            this.updateRequiredAttribute();
-        });
-        fromEvent(this.element, 'blur')
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            this.updateErrorAttribute();
-        });
-        // Add ndw-changed attribute when the input is changed and has a value
-        fromEvent(this.element, 'input')
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            this.setSelectPlaceholderAttribute();
-        });
-        this.setSelectPlaceholderAttribute();
-    }
-    updateErrorAttribute(formFieldError) {
-        if (this.control) {
-            this.error = (this.control.invalid === true && this.control.touched) || !!formFieldError;
-        }
-    }
-    setSelectPlaceholderAttribute() {
-        if (this.element instanceof HTMLSelectElement) {
-            const isPlaceholderSelected = this.element.selectedIndex === 0 &&
-                this.element.options[this.element.selectedIndex].disabled;
-            this.element.toggleAttribute('ndw-placeholder', isPlaceholderSelected);
-        }
-    }
-    updateRequiredAttribute() {
-        if (this.control) {
-            // Mark element as required when the control has a 'required' validator.
-            // This will show an asterisk (*)
-            this.element.required = this.control.hasValidator(Validators.required);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: InputDirective, isStandalone: true, selector: "input[ndwInput], select[ndwInput], textarea[ndwInput]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'input[ndwInput], select[ndwInput], textarea[ndwInput]',
-                }]
-        }] });
-
-class InputIconComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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"] }]
-        }] });
-
-class ButtonDirective {
-    elementRef = inject(ElementRef);
-    get element() {
-        return this.elementRef.nativeElement;
-    }
-    ngOnInit() {
-        // If the text content of a child node is longer than 35 characters, truncate it
-        if (!this.element.childNodes.length) {
-            return;
-        }
-        this.element.childNodes.forEach((node) => {
-            if (node.nodeType === Node.TEXT_NODE) {
-                if (!node.textContent) {
-                    return;
-                }
-                const text = node.textContent.trim();
-                if (text.length > 35) {
-                    node.textContent = text.slice(0, 35) + '...';
-                }
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: ButtonDirective, isStandalone: true, selector: "[ndwButton]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ndwButton]',
-                }]
-        }] });
-
-class PopoverTriggerDirective {
-    popoverToggled = new EventEmitter();
-    popoverPosition = input('nextToTriggerButton', ...(ngDevMode ? [{ debugName: "popoverPosition" }] : []));
-    popoverContent = input.required(...(ngDevMode ? [{ debugName: "popoverContent", alias: 'ndwPopoverTrigger' }] : [{ alias: 'ndwPopoverTrigger' }]));
-    toggleOnClick = input(true, ...(ngDevMode ? [{ debugName: "toggleOnClick" }] : []));
-    isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-    toggle() {
-        if (!this.toggleOnClick()) {
-            return;
-        }
-        this.isOpen.set(!this.isOpen());
-        this.togglePopover();
-    }
-    destroyRef = inject(DestroyRef);
-    elementRef = inject((ElementRef));
-    overlay = inject(Overlay);
-    viewContainerRef = inject(ViewContainerRef);
-    focusTrapFactory = inject(ConfigurableFocusTrapFactory);
-    overlayRef;
-    ngOnDestroy() {
-        this.isOpen.set(false);
-        this.togglePopover();
-    }
-    togglePopover() {
-        if (this.isOpen()) {
-            this.open();
-        }
-        else {
-            this.close();
-        }
-        this.popoverToggled.emit(this.isOpen());
-    }
-    open() {
-        const positions = this.getPopoverPosition(this.popoverPosition());
-        const templatePortal = new TemplatePortal(this.popoverContent(), this.viewContainerRef);
-        this.overlayRef = this.overlay.create({
-            hasBackdrop: true,
-            backdropClass: 'cdk-overlay-transparent-backdrop',
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
-            positionStrategy: this.overlay
-                .position()
-                .flexibleConnectedTo(this.elementRef)
-                .withPositions(positions),
-        });
-        this.overlayRef.attach(templatePortal);
-        this.overlayRef.hostElement.addEventListener('click', (event) => {
-            const target = event.target;
-            if (this.nodeOrParentsHaveAttribute(target, 'ndwPopoverCloseTrigger')) {
-                this.isOpen.set(false);
-                this.togglePopover();
-            }
-        });
-        this.trapFocus(this.overlayRef);
-        this.closeOverlayOnEscapeKey(this.overlayRef);
-        this.closeOverlayOnBackdropClick(this.overlayRef);
-    }
-    trapFocus(overlayRef) {
-        this.focusTrapFactory.create(overlayRef.overlayElement);
-    }
-    closeOverlayOnEscapeKey(overlayRef) {
-        overlayRef.overlayElement.onkeydown = (event) => {
-            if (event.key === 'Escape') {
-                this.isOpen.set(false);
-                this.togglePopover();
-            }
-        };
-    }
-    nodeOrParentsHaveAttribute(node, attribute) {
-        let next = node;
-        while (next) {
-            if (next.hasAttribute(attribute)) {
-                return true;
-            }
-            next = next.parentElement;
-        }
-        return false;
-    }
-    closeOverlayOnBackdropClick(overlayRef) {
-        overlayRef
-            .backdropClick()
-            .pipe(takeUntilDestroyed(this.destroyRef), take(1))
-            .subscribe(() => {
-            this.isOpen.set(false);
-            this.togglePopover();
-        });
+        this.inputValue.set('');
+        this.buttonClicked.emit();
     }
-    close() {
-        this.overlayRef?.dispose();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ClearSearchButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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"] }]
+        }] });
+
+const INPUT_CONTAINER_CLASS = 'input-container';
+
+var FormFieldElement;
+(function (FormFieldElement) {
+    FormFieldElement["Dropdown"] = "ndw-dropdown";
+    FormFieldElement["Input"] = "input";
+    FormFieldElement["Select"] = "select";
+    FormFieldElement["Textarea"] = "textarea";
+})(FormFieldElement || (FormFieldElement = {}));
+
+class InfoComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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"] }]
+        }] });
+
+class InputIconComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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"] }]
+        }] });
+
+class ButtonDirective {
+    elementRef = inject(ElementRef);
+    get element() {
+        return this.elementRef.nativeElement;
     }
-    getPopoverPosition(popoverPosition) {
-        let positions;
-        if (popoverPosition === 'overTriggerButton') {
-            positions = [
-                {
-                    originX: 'start',
-                    originY: 'bottom',
-                    overlayX: 'start',
-                    overlayY: 'bottom',
-                    panelClass: 'ndw-popover-panel',
-                },
-                {
-                    originX: 'end',
-                    originY: 'bottom',
-                    overlayX: 'end',
-                    overlayY: 'bottom',
-                    panelClass: 'ndw-popover-panel',
-                },
-                {
-                    originX: 'start',
-                    originY: 'top',
-                    overlayX: 'start',
-                    overlayY: 'top',
-                    panelClass: 'ndw-popover-panel',
-                },
-                {
-                    originX: 'end',
-                    originY: 'top',
-                    overlayX: 'end',
-                    overlayY: 'top',
-                    panelClass: 'ndw-popover-panel',
-                },
-            ];
-        }
-        else {
-            positions = [
-                {
-                    originX: 'start',
-                    originY: 'bottom',
-                    overlayX: 'start',
-                    overlayY: 'top',
-                    offsetY: 4,
-                    panelClass: 'ndw-popover-panel',
-                },
-                {
-                    originX: 'end',
-                    originY: 'bottom',
-                    overlayX: 'end',
-                    overlayY: 'top',
-                    offsetY: 4,
-                    panelClass: 'ndw-popover-panel',
-                },
-                {
-                    originX: 'start',
-                    originY: 'top',
-                    overlayX: 'start',
-                    overlayY: 'bottom',
-                    offsetY: -4,
-                    panelClass: 'ndw-popover-panel',
-                },
-                {
-                    originX: 'end',
-                    originY: 'top',
-                    overlayX: 'end',
-                    overlayY: 'bottom',
-                    offsetY: -4,
-                    panelClass: 'ndw-popover-panel',
-                },
-            ];
+    ngOnInit() {
+        // If the text content of a child node is longer than 35 characters, truncate it
+        if (!this.element.childNodes.length) {
+            return;
         }
-        return [
-            ...positions,
-            ...positions.map((position) => ({
-                ...position,
-                overlayX: 'center',
-                overlayY: 'center',
-            })),
-        ];
+        this.element.childNodes.forEach((node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                if (!node.textContent) {
+                    return;
+                }
+                const text = node.textContent.trim();
+                if (text.length > 35) {
+                    node.textContent = text.slice(0, 35) + '...';
+                }
+            }
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", type: PopoverTriggerDirective, isStandalone: true, selector: "[ndwPopoverTrigger]", inputs: { popoverPosition: { classPropertyName: "popoverPosition", publicName: "popoverPosition", isSignal: true, isRequired: false, transformFunction: null }, popoverContent: { classPropertyName: "popoverContent", publicName: "ndwPopoverTrigger", isSignal: true, isRequired: true, transformFunction: null }, toggleOnClick: { classPropertyName: "toggleOnClick", publicName: "toggleOnClick", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { popoverToggled: "popoverToggled", isOpen: "isOpenChange" }, host: { listeners: { "click": "toggle()" } }, exportAs: ["ndwPopoverTrigger"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: ButtonDirective, isStandalone: true, selector: "[ndwButton]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PopoverTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ButtonDirective, decorators: [{
             type: Directive,
             args: [{
-                    exportAs: 'ndwPopoverTrigger',
-                    host: {
-                        '(click)': 'toggle()',
-                    },
-                    selector: '[ndwPopoverTrigger]',
+                    selector: '[ndwButton]',
                 }]
-        }], propDecorators: { popoverToggled: [{
-                type: Output
-            }] } });
+        }] });
 
 class OptionComponent {
     value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
@@ -1233,154 +1680,62 @@ class FormFieldComponent {
     tooltip = input('', ...(ngDevMode ? [{ debugName: "tooltip" }] : []));
     clearButtonClicked = output();
     monthInput = contentChild(MonthInputComponent, ...(ngDevMode ? [{ debugName: "monthInput" }] : []));
-    regularInput = contentChild(InputDirective, ...(ngDevMode ? [{ debugName: "regularInput" }] : []));
-    input = computed(() => this.regularInput() ?? this.monthInput()?.input(), ...(ngDevMode ? [{ debugName: "input" }] : []));
-    inputType = computed(() => this.input()?.element.type, ...(ngDevMode ? [{ debugName: "inputType" }] : []));
-    isSearchInput = computed(() => this.inputType() === 'search', ...(ngDevMode ? [{ debugName: "isSearchInput" }] : []));
-    hasPickerButton = computed(() => this.inputType() === 'date' ||
-        this.inputType() === 'time' ||
-        this.input()?.element.nodeName.toLowerCase() === FormFieldElement.Select, ...(ngDevMode ? [{ debugName: "hasPickerButton" }] : []));
-    uuid = crypto.randomUUID();
-    descriptionUuid = crypto.randomUUID();
-    inputContainerClass = INPUT_CONTAINER_CLASS;
-    constructor() {
-        effect(() => {
-            const input = this.input();
-            if (!input) {
-                return;
-            }
-            this.setInputDisabledState(input);
-            this.setInputErrorState();
-            this.setInputSuccessState(input);
-            this.setInputId(input);
-            this.setAriaDescribedBy(input);
-        });
-    }
-    setInputDisabledState(input) {
-        input.disabled = this.disabled() || !!this.input()?.element.disabled;
-    }
-    setInputErrorState() {
-        this.input()?.updateErrorAttribute(!!this.error()?.length);
-    }
-    setInputSuccessState(input) {
-        input.success = !!this.success()?.length;
-    }
-    setInputId(input) {
-        input.id = `input-${this.uuid}`;
-    }
-    setAriaDescribedBy(input) {
-        input.ariaDescribedBy = this.descriptionUuid;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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: "regularInput", first: true, predicate: InputDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (input() === undefined) {\n  <fieldset>\n    <legend ndwLabel [class.sr-only]=\"hideLabel()\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n    </legend>\n    <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\n  </fieldset>\n} @else {\n  <label ndwLabel [attr.for]=\"input() ? 'input-' + uuid : null\" [class.sr-only]=\"hideLabel()\">\n    <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n  </label>\n  <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\n}\n\n<ng-template #fieldTemplate>\n  <div\n    [class]=\"inputContainerClass\"\n    [attr.success]=\"success() ? true : null\"\n    [attr.error]=\"error() ? true : null\"\n  >\n    @if (isSearchInput()) {\n      <ndw-input-icon>search</ndw-input-icon>\n    }\n\n    <ng-content />\n\n    @if (isSearchInput()) {\n      <ndw-clear-search-button\n        [input]=\"input()\"\n        [disabled]=\"disabled()\"\n        [ariaLabel]=\"suffixAriaLabel()\"\n        (buttonClicked)=\"clearButtonClicked.emit()\"\n      />\n    }\n    @if (hasPickerButton()) {\n      <ndw-picker-button\n        [input]=\"input()\"\n        [disabled]=\"disabled()\"\n        [ariaLabel]=\"suffixAriaLabel()\"\n      />\n    }\n  </div>\n\n  @if (info(); as info) {\n    <ndw-info [id]=\"descriptionUuid\">{{ info }}</ndw-info>\n  }\n  @if (error(); as error) {\n    <ndw-error role=\"alert\" aria-live=\"polite\">{{ error }}</ndw-error>\n  }\n  @if (success(); as success) {\n    <ndw-success role=\"alert\" aria-live=\"polite\">{{ success }}</ndw-success>\n  }\n</ng-template>\n\n<ng-template #labelTemplate>\n  <span class=\"required-label required\"> * </span>\n  {{ label() }}\n  @if (tooltip(); as tooltip) {\n    <ndw-icon [ndwTooltip]=\"tooltip\">info</ndw-icon>\n  }\n</ng-template>\n", styles: [":host{position:relative;display:grid;color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm)}:host .required-label{display:none}:host:has([required]) .required-label{display:inline}fieldset{border:0;margin:0;padding:0}fieldset legend{padding-inline:0;word-break:break-word}label{word-break:break-word}ndw-error,ndw-success,ndw-info{margin-top:var(--ndw-spacing-2xs)}\n"], dependencies: [{ kind: "component", type: ClearSearchButtonComponent, selector: "ndw-clear-search-button", inputs: ["disabled", "input", "ariaLabel"], outputs: ["buttonClicked"] }, { kind: "component", type: ErrorComponent, selector: "ndw-error" }, { kind: "component", type: InfoComponent, selector: "ndw-info" }, { kind: "component", type: InputIconComponent, selector: "ndw-input-icon" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PickerButtonComponent, selector: "ndw-picker-button", inputs: ["disabled", "input", "ariaLabel", "required"] }, { kind: "component", type: SuccessComponent, selector: "ndw-success" }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormFieldComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        ClearSearchButtonComponent,
-                        ErrorComponent,
-                        InfoComponent,
-                        InputIconComponent,
-                        IconComponent,
-                        NgTemplateOutlet,
-                        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"] }]
-        }], ctorParameters: () => [] });
-
-class RadioButtonComponent {
-    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
-    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
-    success = input(false, ...(ngDevMode ? [{ debugName: "success" }] : []));
-    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
-    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
-    name = signal(undefined, ...(ngDevMode ? [{ debugName: "name" }] : []));
-    uuid = crypto.randomUUID();
-    onInputChange(event) {
-        const input = event.target;
-        this.checked.set(input.checked);
-    }
-    writeValue(value) {
-        this.checked.set(value);
-    }
-    registerOnChange(fn) {
-        this.checked.subscribe(fn);
-    }
-    registerOnTouched() {
-        // noop
-    }
-    setDisabledState(isDisabled) {
-        this.disabled.set(isDisabled);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: RadioButtonComponent, isStandalone: true, selector: "ndw-radio-button", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", value: "valueChange" }, host: { properties: { "class.checked": "checked()", "class.disabled": "disabled()" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: RadioButtonComponent,
-                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: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--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-secondary-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: "20.2.4", ngImport: i0, type: RadioButtonComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class.checked]': 'checked()',
-                        '[class.disabled]': 'disabled()',
-                    }, imports: [NgClass], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            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: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--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-secondary-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"] }]
-        }] });
-
-class RadioGroupComponent {
-    radioButtons = contentChildren(RadioButtonComponent, ...(ngDevMode ? [{ debugName: "radioButtons" }] : []));
+    dateInput = contentChild(DatepickerComponent, ...(ngDevMode ? [{ debugName: "dateInput" }] : []));
+    regularInput = contentChild(InputDirective, ...(ngDevMode ? [{ debugName: "regularInput" }] : []));
+    input = computed(() => this.regularInput() ?? this.monthInput()?.input() ?? this.dateInput()?.input(), ...(ngDevMode ? [{ debugName: "input" }] : []));
+    inputType = computed(() => this.input()?.element.type, ...(ngDevMode ? [{ debugName: "inputType" }] : []));
+    isSearchInput = computed(() => this.inputType() === 'search', ...(ngDevMode ? [{ debugName: "isSearchInput" }] : []));
+    hasPickerButton = computed(() => this.inputType() === 'date' ||
+        this.inputType() === 'time' ||
+        this.input()?.element.nodeName.toLowerCase() === FormFieldElement.Select, ...(ngDevMode ? [{ debugName: "hasPickerButton" }] : []));
     uuid = crypto.randomUUID();
-    onChange = noop;
-    ngAfterContentInit() {
-        const radioButtons = [...this.radioButtons()];
-        setRadioItemsName(radioButtons, this.uuid);
-        checkRadioItems(radioButtons, this.onChange);
-    }
-    writeValue(value) {
-        this.radioButtons().forEach((radio) => {
-            radio.checked.set(radio.value() === value);
+    descriptionUuid = crypto.randomUUID();
+    inputContainerClass = INPUT_CONTAINER_CLASS;
+    constructor() {
+        effect(() => {
+            const input = this.input();
+            if (!input) {
+                return;
+            }
+            this.setInputDisabledState(input);
+            this.setInputErrorState();
+            this.setInputSuccessState(input);
+            this.setInputId(input);
+            this.setAriaDescribedBy(input);
         });
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
+    setInputDisabledState(input) {
+        input.disabled = this.disabled() || !!this.input()?.element.disabled;
     }
-    registerOnTouched() {
-        // noop
+    setInputErrorState() {
+        this.input()?.updateErrorAttribute(!!this.error()?.length);
     }
-    setDisabledState(isDisabled) {
-        this.radioButtons().forEach((radio) => radio.disabled.set(isDisabled));
+    setInputSuccessState(input) {
+        input.success = !!this.success()?.length;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.4", type: RadioGroupComponent, isStandalone: true, selector: "ndw-radio-group", host: { attributes: { "role": "radiogroup" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                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 });
+    setInputId(input) {
+        input.id = `input-${this.uuid}`;
+    }
+    setAriaDescribedBy(input) {
+        input.ariaDescribedBy = this.descriptionUuid;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: FormFieldComponent, isStandalone: true, selector: "ndw-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, suffixAriaLabel: { classPropertyName: "suffixAriaLabel", publicName: "suffixAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clearButtonClicked: "clearButtonClicked" }, queries: [{ propertyName: "monthInput", first: true, predicate: MonthInputComponent, descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: DatepickerComponent, descendants: true, isSignal: true }, { propertyName: "regularInput", first: true, predicate: InputDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (input() === undefined) {\n  <fieldset>\n    <legend ndwLabel [class.sr-only]=\"hideLabel()\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n    </legend>\n    <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\n  </fieldset>\n} @else {\n  <label ndwLabel [attr.for]=\"input() ? 'input-' + uuid : null\" [class.sr-only]=\"hideLabel()\">\n    <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n  </label>\n  <ng-container *ngTemplateOutlet=\"fieldTemplate\" />\n}\n\n<ng-template #fieldTemplate>\n  <div\n    [class]=\"inputContainerClass\"\n    [attr.success]=\"success() ? true : null\"\n    [attr.error]=\"error() ? true : null\"\n  >\n    @if (isSearchInput()) {\n      <ndw-input-icon>search</ndw-input-icon>\n    }\n\n    <ng-content />\n\n    @if (isSearchInput()) {\n      <ndw-clear-search-button\n        [input]=\"input()\"\n        [disabled]=\"disabled()\"\n        [ariaLabel]=\"suffixAriaLabel()\"\n        (buttonClicked)=\"clearButtonClicked.emit()\"\n      />\n    }\n    @if (hasPickerButton()) {\n      <ndw-picker-button\n        [input]=\"input()\"\n        [disabled]=\"disabled()\"\n        [ariaLabel]=\"suffixAriaLabel()\"\n      />\n    }\n  </div>\n\n  @if (info(); as info) {\n    <ndw-info [id]=\"descriptionUuid\">{{ info }}</ndw-info>\n  }\n  @if (error(); as error) {\n    <ndw-error role=\"alert\" aria-live=\"polite\">{{ error }}</ndw-error>\n  }\n  @if (success(); as success) {\n    <ndw-success role=\"alert\" aria-live=\"polite\">{{ success }}</ndw-success>\n  }\n</ng-template>\n\n<ng-template #labelTemplate>\n  <span class=\"required-label required\"> * </span>\n  {{ label() }}\n  @if (tooltip(); as tooltip) {\n    <ndw-icon [ndwTooltip]=\"tooltip\">info</ndw-icon>\n  }\n</ng-template>\n", styles: [":host{position:relative;display:grid;color:var(--ndw-color-grey-700);font-family:var(--ndw-font-family-body);font-size:var(--ndw-font-size-sm)}:host .required-label{display:none}:host:has([required]) .required-label{display:inline}fieldset{border:0;margin:0;padding:0}fieldset legend{padding-inline:0;word-break:break-word}label{word-break:break-word}ndw-error,ndw-success,ndw-info{margin-top:var(--ndw-spacing-2xs)}\n"], dependencies: [{ kind: "component", type: ClearSearchButtonComponent, selector: "ndw-clear-search-button", inputs: ["disabled", "input", "ariaLabel"], outputs: ["buttonClicked"] }, { kind: "component", type: ErrorComponent, selector: "ndw-error" }, { kind: "component", type: InfoComponent, selector: "ndw-info" }, { kind: "component", type: InputIconComponent, selector: "ndw-input-icon" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PickerButtonComponent, selector: "ndw-picker-button", inputs: ["disabled", "input", "ariaLabel", "required"] }, { kind: "component", type: SuccessComponent, selector: "ndw-success" }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RadioGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
-            args: [{ host: {
-                        role: 'radiogroup',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: RadioGroupComponent,
-                            multi: true,
-                        },
-                    ], selector: 'ndw-radio-group', template: "<ng-content />\n", styles: [":host{display:grid;gap:var(--ndw-spacing-2xs)}\n"] }]
-        }] });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ClearSearchButtonComponent,
+                        ErrorComponent,
+                        InfoComponent,
+                        InputIconComponent,
+                        IconComponent,
+                        NgTemplateOutlet,
+                        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"] }]
+        }], ctorParameters: () => [] });
 
 /**
  * Directive that automatically grows a textarea element to fit its content.
@@ -1546,15 +1901,171 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+class MarkdownEditorComponent {
+    ngControl = inject(NgControl, { optional: true });
+    uuid = input(crypto.randomUUID(), ...(ngDevMode ? [{ debugName: "uuid" }] : []));
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    success = input(false, ...(ngDevMode ? [{ debugName: "success" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    toolbar = input([
+        'bold',
+        'header',
+        'italic',
+        'unordered-list',
+        'ordered-list',
+        'task-list',
+    ], ...(ngDevMode ? [{ debugName: "toolbar" }] : []));
+    bold = computed(() => this.toolbar().includes('bold'), ...(ngDevMode ? [{ debugName: "bold" }] : []));
+    header = computed(() => this.toolbar().includes('header'), ...(ngDevMode ? [{ debugName: "header" }] : []));
+    italic = computed(() => this.toolbar().includes('italic'), ...(ngDevMode ? [{ debugName: "italic" }] : []));
+    quote = computed(() => this.toolbar().includes('quote'), ...(ngDevMode ? [{ debugName: "quote" }] : []));
+    unorderedList = computed(() => this.toolbar().includes('unordered-list'), ...(ngDevMode ? [{ debugName: "unorderedList" }] : []));
+    orderedList = computed(() => this.toolbar().includes('ordered-list'), ...(ngDevMode ? [{ debugName: "orderedList" }] : []));
+    taskList = computed(() => this.toolbar().includes('task-list'), ...(ngDevMode ? [{ debugName: "taskList" }] : []));
+    get isRequiredOrHasRequiredValidator() {
+        return this.required() || this.ngControl?.control?.hasValidator(Validators.required)
+            ? true
+            : null;
+    }
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        if (!customElements.get('markdown-toolbar')) {
+            import('@github/markdown-toolbar-element');
+        }
+    }
+    writeValue(value) {
+        this.value.set(value);
+    }
+    registerOnChange(fn) {
+        this.value.subscribe(fn);
+    }
+    registerOnTouched() {
+        // noop
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MarkdownEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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  [(ngModel)]=\"value\"\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: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoGrowDirective, selector: "textarea[ndwAutoGrow]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MarkdownEditorComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, CommonModule, ReactiveFormsModule, FormsModule, AutoGrowDirective], selector: 'ndw-markdown-editor', host: {
+                        '[class.disabled]': 'disabled()',
+                        '[class.error]': 'error()',
+                        '[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  [(ngModel)]=\"value\"\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"] }]
+        }], ctorParameters: () => [] });
+
+class RadioButtonComponent {
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    success = input(false, ...(ngDevMode ? [{ debugName: "success" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    name = signal(undefined, ...(ngDevMode ? [{ debugName: "name" }] : []));
+    uuid = crypto.randomUUID();
+    onInputChange(event) {
+        const input = event.target;
+        this.checked.set(input.checked);
+    }
+    writeValue(value) {
+        this.checked.set(value);
+    }
+    registerOnChange(fn) {
+        this.checked.subscribe(fn);
+    }
+    registerOnTouched() {
+        // noop
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: RadioButtonComponent, isStandalone: true, selector: "ndw-radio-button", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", value: "valueChange" }, host: { properties: { "class.checked": "checked()", "class.disabled": "disabled()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: RadioButtonComponent,
+                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: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--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-secondary-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: "20.2.4", ngImport: i0, type: RadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.checked]': 'checked()',
+                        '[class.disabled]': 'disabled()',
+                    }, imports: [NgClass], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{--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-secondary-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"] }]
+        }] });
+
+class RadioGroupComponent {
+    radioButtons = contentChildren(RadioButtonComponent, ...(ngDevMode ? [{ debugName: "radioButtons" }] : []));
+    uuid = crypto.randomUUID();
+    onChange = noop;
+    ngAfterContentInit() {
+        const radioButtons = [...this.radioButtons()];
+        setRadioItemsName(radioButtons, this.uuid);
+        checkRadioItems(radioButtons, this.onChange);
+    }
+    writeValue(value) {
+        this.radioButtons().forEach((radio) => {
+            radio.checked.set(radio.value() === value);
+        });
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched() {
+        // noop
+    }
+    setDisabledState(isDisabled) {
+        this.radioButtons().forEach((radio) => radio.disabled.set(isDisabled));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.4", type: RadioGroupComponent, isStandalone: true, selector: "ndw-radio-group", host: { attributes: { "role": "radiogroup" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{ host: {
+                        role: 'radiogroup',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: RadioGroupComponent,
+                            multi: true,
+                        },
+                    ], selector: 'ndw-radio-group', template: "<ng-content />\n", styles: [":host{display:grid;gap:var(--ndw-spacing-2xs)}\n"] }]
+        }] });
+
 class PillComponent extends CorePillComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PillComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: PillComponent, isStandalone: true, selector: "ndw-pill", host: { classAttribute: "ndw-paragraph-md" }, usesInheritance: true, ngImport: i0, template: "<div>\n  <ng-content />\n</div>\n", styles: [":host{display:inline-block;line-height:1rem;border-radius:var(--pill-border-radius);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-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)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: PillComponent, isStandalone: true, selector: "ndw-pill", host: { classAttribute: "ndw-paragraph-md" }, usesInheritance: true, ngImport: i0, template: "<div>\n  <ng-content />\n</div>\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)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PillComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ndw-paragraph-md',
-                    }, selector: 'ndw-pill', template: "<div>\n  <ng-content />\n</div>\n", styles: [":host{display:inline-block;line-height:1rem;border-radius:var(--pill-border-radius);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-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)}\n"] }]
+                    }, selector: 'ndw-pill', template: "<div>\n  <ng-content />\n</div>\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)}\n"] }]
         }] });
 
 class ListItemComponent {
@@ -1610,7 +2121,7 @@ class ListItemComponent {
         this.expanded.update((expanded) => !expanded);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: ListItemComponent, isStandalone: true, selector: "ndw-list-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badgeValue: { classPropertyName: "badgeValue", publicName: "badgeValue", isSignal: true, isRequired: false, transformFunction: null }, buttonIcon: { classPropertyName: "buttonIcon", publicName: "buttonIcon", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, checkType: { classPropertyName: "checkType", publicName: "checkType", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indented: { classPropertyName: "indented", publicName: "indented", isSignal: true, isRequired: false, transformFunction: null }, pillColor: { classPropertyName: "pillColor", publicName: "pillColor", isSignal: true, isRequired: false, transformFunction: null }, pillLabel: { classPropertyName: "pillLabel", publicName: "pillLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", buttonClicked: "buttonClicked", checked: "checkedChange", expanded: "expandedChange" }, host: { attributes: { "role": "listitem" } }, viewQueries: [{ propertyName: "radioButton", first: true, predicate: RadioButtonComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (actionable()) {\n  <button\n    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\" />\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);width:100%}[ndw-list-item]:not(.actionable){--list-item-hover-background-color: var(--ndw-color-white)}[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", inputs: ["value", "ariaLabel", "displayLargeNumbers"] }, { 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: "20.2.4", type: ListItemComponent, isStandalone: true, selector: "ndw-list-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badgeValue: { classPropertyName: "badgeValue", publicName: "badgeValue", isSignal: true, isRequired: false, transformFunction: null }, buttonIcon: { classPropertyName: "buttonIcon", publicName: "buttonIcon", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, checkType: { classPropertyName: "checkType", publicName: "checkType", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indented: { classPropertyName: "indented", publicName: "indented", isSignal: true, isRequired: false, transformFunction: null }, pillColor: { classPropertyName: "pillColor", publicName: "pillColor", isSignal: true, isRequired: false, transformFunction: null }, pillLabel: { classPropertyName: "pillLabel", publicName: "pillLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", buttonClicked: "buttonClicked", checked: "checkedChange", expanded: "expandedChange" }, host: { attributes: { "role": "listitem" } }, viewQueries: [{ propertyName: "radioButton", first: true, predicate: RadioButtonComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (actionable()) {\n  <button\n    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\" />\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);width:100%}[ndw-list-item]:not(.actionable){--list-item-hover-background-color: var(--ndw-color-white)}[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: "20.2.4", ngImport: i0, type: ListItemComponent, decorators: [{
             type: Component,
@@ -1987,30 +2498,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
             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-secondary-050);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:hover .title{color:var(--ndw-color-secondary-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-secondary-100);transition-property:color,background-color;transition-duration:var(--ndw-animation-speed-fast);transition-timing-function:ease-out}.card:active .title{color:var(--ndw-color-secondary-600);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"] }]
         }] });
 
-class TagComponent {
-    /**
-     * Disables the tag
-     */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    /**
-     * Aria label for the interactive button
-     */
-    suffixAriaLabel = input('Verwijder', ...(ngDevMode ? [{ debugName: "suffixAriaLabel" }] : []));
-    /**
-     * The name of the icon to display
-     */
-    suffixIcon = input('close', ...(ngDevMode ? [{ debugName: "suffixIcon" }] : []));
-    clicked = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", 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 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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"] }]
-        }] });
-
 class DropdownComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     chevron = input(true, ...(ngDevMode ? [{ debugName: "chevron" }] : []));
@@ -2120,11 +2607,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
 class FavoriteComponent {
     checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: FavoriteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", 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;gap:var(--ndw-spacing-xs)}.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-secondary-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-secondary-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);pointer-events:none}.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)}.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)}.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}[ndwInput]{display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);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;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]: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-secondary-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-secondary-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);pointer-events:none}[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)}[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)}[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: "20.2.4", 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;gap:var(--ndw-spacing-xs)}.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-secondary-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-secondary-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);pointer-events:none}.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)}.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)}.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}[ndwInput]{display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);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;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]: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-secondary-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-secondary-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);pointer-events:none}[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)}[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)}[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: "20.2.4", 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;gap:var(--ndw-spacing-xs)}.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-secondary-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-secondary-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);pointer-events:none}.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)}.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)}.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}[ndwInput]{display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);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;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]: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-secondary-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-secondary-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);pointer-events:none}[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)}[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)}[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\">\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;gap:var(--ndw-spacing-xs)}.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-secondary-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-secondary-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);pointer-events:none}.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)}.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)}.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}[ndwInput]{display:flex;align-items:center;background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);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;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]: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-secondary-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-secondary-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);pointer-events:none}[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)}[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)}[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"] }]
         }] });
 
 class HoverableListItemComponent {
@@ -2162,11 +2649,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
 
 class KeyValueListComponent extends CoreKeyValueListComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: KeyValueListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: KeyValueListComponent, isStandalone: true, selector: "ndw-key-value-list", usesInheritance: true, ngImport: i0, template: "<dl [class.striped]=\"hasZebraStripes()\">\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: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}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.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)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: KeyValueListComponent, isStandalone: true, selector: "ndw-key-value-list", usesInheritance: true, ngImport: i0, template: "<dl [class.striped]=\"hasZebraStripes()\" [class.fluid]=\"fluid()\">\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: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}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.striped dt{padding-inline-start:var(--ndw-spacing-xs)}dl.striped dd{padding-inline-end:var(--ndw-spacing-xs)}dl.striped dt:nth-child(4n+1),dl.striped dd:nth-child(4n+2){background-color:var(--ndw-color-grey-100)}dl.fluid{width:100%}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: KeyValueListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndw-key-value-list', imports: [IconComponent, NgTemplateOutlet, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dl [class.striped]=\"hasZebraStripes()\">\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: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}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.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)}\n"] }]
+            args: [{ selector: 'ndw-key-value-list', imports: [IconComponent, NgTemplateOutlet, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dl [class.striped]=\"hasZebraStripes()\" [class.fluid]=\"fluid()\">\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: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}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.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"] }]
         }] });
 
 class MainNavigationHeaderComponent {
@@ -2193,11 +2680,11 @@ class MainNavigationHeaderComponent {
         this.isMobileMenuOpen.update((open) => !open);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MainNavigationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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()\">\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: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 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;gap:var(--ndw-spacing-md);margin-bottom:var(--ndw-spacing-md);padding-inline:0;position:relative}header a{color:var(--ndw-color-white);display:flex;flex-direction:column;gap:var(--ndw-spacing-xs);letter-spacing:var(--ndw-letter-spacing-md);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-white)}header.expanded{align-items:flex-start;padding-inline:var(--ndw-spacing-md)}header.expanded a img{width:4rem}header.expanded a img.nwb{width:6rem}@media screen and (max-width: 1024px){header{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: "20.2.4", 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: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 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;gap:var(--ndw-spacing-md);margin-bottom:var(--ndw-spacing-md);padding-inline:0;position:relative}header a{color:var(--ndw-color-white);display:flex;flex-direction:column;gap:var(--ndw-spacing-xs);letter-spacing:var(--ndw-letter-spacing-md);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-white)}header.expanded{align-items:flex-start;padding-inline:var(--ndw-spacing-md)}header.expanded a img{width:4rem}header.expanded a img.nwb{width:6rem}@media screen and (max-width: 1024px){header{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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MainNavigationHeaderComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, PillComponent, RouterLink], selector: 'ndw-main-navigation-header', template: "<header [class.expanded]=\"isExpanded()\">\n  <a routerLink=\"/\">\n    <img [class]=\"theme()\" [src]=\"themeImagePath()\" [alt]=\"theme().toUpperCase() + ' logo'\" />\n    @if (isExpanded() || isMobile()) {\n      {{ applicationName() }}\n    }\n  </a>\n  @if (environment()) {\n    <ndw-pill [color]=\"environmentColor()\">\n      {{ !isExpanded() || isMobile() ? environment()?.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: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 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;gap:var(--ndw-spacing-md);margin-bottom:var(--ndw-spacing-md);padding-inline:0;position:relative}header a{color:var(--ndw-color-white);display:flex;flex-direction:column;gap:var(--ndw-spacing-xs);letter-spacing:var(--ndw-letter-spacing-md);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-white)}header.expanded{align-items:flex-start;padding-inline:var(--ndw-spacing-md)}header.expanded a img{width:4rem}header.expanded a img.nwb{width:6rem}@media screen and (max-width: 1024px){header{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()\">\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: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:root{--ndw-spacing-3xs: .125rem;--ndw-spacing-2xs: .25rem;--ndw-spacing-xs: .5rem;--ndw-spacing-sm: .75rem;--ndw-spacing-md: 1rem;--ndw-spacing-lg: 1.5rem;--ndw-spacing-xl: 2rem;--ndw-spacing-2xl: 2.5rem;--ndw-spacing-3xl: 3rem;--ndw-spacing-4xl: 5rem;--ndw-spacing-5xl: 8rem;--ndw-border-size-sm: 1px;--ndw-border-size-md: 2px;--ndw-border-size-lg: 3px;--ndw-border-radius-xs: .125rem;--ndw-border-radius-sm: .25rem;--ndw-border-radius-md: .5rem;--ndw-border-radius-lg: 1.5rem;--ndw-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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 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;gap:var(--ndw-spacing-md);margin-bottom:var(--ndw-spacing-md);padding-inline:0;position:relative}header a{color:var(--ndw-color-white);display:flex;flex-direction:column;gap:var(--ndw-spacing-xs);letter-spacing:var(--ndw-letter-spacing-md);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-white)}header.expanded{align-items:flex-start;padding-inline:var(--ndw-spacing-md)}header.expanded a img{width:4rem}header.expanded a img.nwb{width:6rem}@media screen and (max-width: 1024px){header{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"] }]
         }] });
 
 class MainNavigationMenuComponent {
@@ -2233,7 +2720,7 @@ class MainNavigationMenuComponent {
         this.setActiveMobileItem(this.activeMobileItem() === item ? undefined : item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MainNavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: MainNavigationMenuComponent, isStandalone: true, selector: "ndw-main-navigation-menu", inputs: { isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div cdkMenu class=\"menu\" [class.expanded]=\"isExpanded()\">\n  @for (item of items(); track getItemKey(item)) {\n    @if (!item.children) {\n      @if (item.callback) {\n        <button cdkMenuItem ndwButton menu (click)=\"closeMobileMenu(item)\">\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n        </button>\n      } @else {\n        <a\n          cdkMenuItem\n          ndwButton\n          menu\n          [queryParams]=\"item.queryParams\"\n          [routerLink]=\"item.path\"\n          (click)=\"closeMobileMenu()\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <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                class=\"sub-menu-button\"\n                (click)=\"closeMobileMenu(subItem)\"\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                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </a>\n            }\n          }\n        }\n      } @else {\n        <button cdkMenuItem ndwButton menu [cdkMenuTriggerFor]=\"subMenu\">\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 cdkMenuItem ndwButton menu (click)=\"subItem.callback()\">\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}.menu [ndwButton],.sub-menu [ndwButton]{cursor:pointer}.menu [ndwButton] .suffix,.sub-menu [ndwButton] .suffix{position:absolute;right:var(--ndw-spacing-sm)}.menu{justify-content:center}.menu.expanded [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-white)}@media screen and (min-width: 1024px){.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-400)}}@media screen and (max-width: 1024px){.menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}}.sub-menu{background-color:var(--ndw-color-grey-700);min-width:10rem}.sub-menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-sm)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ndw-badge", inputs: ["value", "ariaLabel", "displayLargeNumbers"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: MainNavigationMenuComponent, isStandalone: true, selector: "ndw-main-navigation-menu", inputs: { isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div cdkMenu class=\"menu\" [class.expanded]=\"isExpanded()\">\n  @for (item of items(); track getItemKey(item)) {\n    @if (!item.children) {\n      @if (item.callback) {\n        <button cdkMenuItem ndwButton menu (click)=\"closeMobileMenu(item)\">\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <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          [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                class=\"sub-menu-button\"\n                (click)=\"closeMobileMenu(subItem)\"\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                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </a>\n            }\n          }\n        }\n      } @else {\n        <button cdkMenuItem ndwButton menu [cdkMenuTriggerFor]=\"subMenu\">\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 cdkMenuItem ndwButton menu (click)=\"subItem.callback()\">\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}.menu [ndwButton],.sub-menu [ndwButton]{cursor:pointer}.menu [ndwButton] .suffix,.sub-menu [ndwButton] .suffix{position:absolute;right:var(--ndw-spacing-sm)}.menu{justify-content:center}.menu .expanded-badge{position:absolute;left:var(--ndw-spacing-md);top:0}.menu.expanded [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-white)}@media screen and (min-width: 1024px){.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-400)}}@media screen and (max-width: 1024px){.menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}}.sub-menu{background-color:var(--ndw-color-grey-700);min-width:10rem}.sub-menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-sm)}\n"], dependencies: [{ kind: "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"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MainNavigationMenuComponent, decorators: [{
             type: Component,
@@ -2245,7 +2732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                         IconComponent,
                         RouterLink,
                         NgTemplateOutlet,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-main-navigation-menu', template: "<div cdkMenu class=\"menu\" [class.expanded]=\"isExpanded()\">\n  @for (item of items(); track getItemKey(item)) {\n    @if (!item.children) {\n      @if (item.callback) {\n        <button cdkMenuItem ndwButton menu (click)=\"closeMobileMenu(item)\">\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n        </button>\n      } @else {\n        <a\n          cdkMenuItem\n          ndwButton\n          menu\n          [queryParams]=\"item.queryParams\"\n          [routerLink]=\"item.path\"\n          (click)=\"closeMobileMenu()\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <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                class=\"sub-menu-button\"\n                (click)=\"closeMobileMenu(subItem)\"\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                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </a>\n            }\n          }\n        }\n      } @else {\n        <button cdkMenuItem ndwButton menu [cdkMenuTriggerFor]=\"subMenu\">\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 cdkMenuItem ndwButton menu (click)=\"subItem.callback()\">\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}.menu [ndwButton],.sub-menu [ndwButton]{cursor:pointer}.menu [ndwButton] .suffix,.sub-menu [ndwButton] .suffix{position:absolute;right:var(--ndw-spacing-sm)}.menu{justify-content:center}.menu.expanded [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-white)}@media screen and (min-width: 1024px){.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-400)}}@media screen and (max-width: 1024px){.menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}}.sub-menu{background-color:var(--ndw-color-grey-700);min-width:10rem}.sub-menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-sm)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-main-navigation-menu', template: "<div cdkMenu class=\"menu\" [class.expanded]=\"isExpanded()\">\n  @for (item of items(); track getItemKey(item)) {\n    @if (!item.children) {\n      @if (item.callback) {\n        <button cdkMenuItem ndwButton menu (click)=\"closeMobileMenu(item)\">\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <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          [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                class=\"sub-menu-button\"\n                (click)=\"closeMobileMenu(subItem)\"\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                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </a>\n            }\n          }\n        }\n      } @else {\n        <button cdkMenuItem ndwButton menu [cdkMenuTriggerFor]=\"subMenu\">\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 cdkMenuItem ndwButton menu (click)=\"subItem.callback()\">\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\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\", sans-serif;--ndw-font-family-heading: \"DM Sans\", sans-serif;--ndw-base-font-size: 16px;--ndw-font-size-2xs: .5625rem;--ndw-font-size-xs: .6875rem;--ndw-font-size-sm: .8125rem;--ndw-font-size-md: 1.125rem;--ndw-font-size-lg: 1.25rem;--ndw-font-size-xl: 1.5rem;--ndw-font-weight-regular: 400;--ndw-font-weight-bold: 650;--ndw-line-height-sm: 1.375rem;--ndw-line-height-md: 1.5rem;--ndw-rotate-half: rotate(180deg);--ndw-modal-width-sm: 31.25rem;--ndw-modal-width-md: 45rem;--main-navigation-collapse-width: 2.75rem;--main-navigation-expanded-width: 12.5rem;--main-navigation-mobile-header-height: 3.5rem}.menu [ndwButton],.sub-menu [ndwButton]{cursor:pointer}.menu [ndwButton] .suffix,.sub-menu [ndwButton] .suffix{position:absolute;right:var(--ndw-spacing-sm)}.menu{justify-content:center}.menu .expanded-badge{position:absolute;left:var(--ndw-spacing-md);top:0}.menu.expanded [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-white)}@media screen and (min-width: 1024px){.menu.expanded [ndwButton].sub-menu-button{color:var(--ndw-color-grey-400)}}@media screen and (max-width: 1024px){.menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-md)}}.sub-menu{background-color:var(--ndw-color-grey-700);min-width:10rem}.sub-menu [ndwButton]{justify-content:flex-start;padding-inline:var(--ndw-spacing-sm)}\n"] }]
         }] });
 
 class MainNavigationComponent {
@@ -2834,6 +3321,11 @@ class MultiSelectComponent {
     lastCheckedElementId = model(...(ngDevMode ? [undefined, { debugName: "lastCheckedElementId" }] : []));
     searchInputValue = model('', ...(ngDevMode ? [{ debugName: "searchInputValue" }] : []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    viewItems = computed(() => {
+        const isOpen = this.isOpen();
+        const items = untracked(this.dataSource);
+        return isOpen ? items.slice().sort((a, b) => Number(b.value) - Number(a.value)) : items;
+    }, ...(ngDevMode ? [{ debugName: "viewItems" }] : []));
     selectAmount = computed(() => this.dataSource().filter((checkbox) => checkbox.value).length, ...(ngDevMode ? [{ debugName: "selectAmount" }] : []));
     noSearchResults = computed(() => this.dataSource().filter((checkbox) => checkbox.label.toLowerCase().includes(this.searchInputValue().toLowerCase())).length === 0, ...(ngDevMode ? [{ debugName: "noSearchResults" }] : []));
     filterSearch(value) {
@@ -2859,9 +3351,6 @@ class MultiSelectComponent {
     isOpenChanged(isOpen) {
         this.isOpen.set(isOpen);
         if (isOpen) {
-            this.dataSource.set(this.dataSource()
-                .slice()
-                .sort((a, b) => Number(b.value) - Number(a.value)));
             this.searchInputValue.set('');
             this.determineLastCheckedElement();
         }
@@ -2877,7 +3366,7 @@ class MultiSelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: MultiSelectComponent, isStandalone: true, selector: "ndw-multi-select", inputs: { buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: true, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null }, chevron: { classPropertyName: "chevron", publicName: "chevron", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectAmountHidden: { classPropertyName: "selectAmountHidden", publicName: "selectAmountHidden", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, lastCheckedElementId: { classPropertyName: "lastCheckedElementId", publicName: "lastCheckedElementId", isSignal: true, isRequired: false, transformFunction: null }, searchInputValue: { classPropertyName: "searchInputValue", publicName: "searchInputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataSource: "dataSourceChange", lastCheckedElementId: "lastCheckedElementIdChange", searchInputValue: "searchInputValueChange" }, viewQueries: [{ propertyName: "dropdownTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ndw-dropdown\n  prefixIcon=\"filter_alt\"\n  [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\n  (tagClicked)=\"toggleSelectAll(false)\"\n  (isOpenChange)=\"isOpenChanged($event)\"\n  [buttonText]=\"buttonText()\"\n  [disabled]=\"disabled()\"\n  [chevron]=\"chevron()\"\n  [prefixIcon]=\"prefixIcon()\"\n>\n  <ndw-form-field [label]=\"searchLabel()\" [hideLabel]=\"true\">\n    <input\n      ndwInput\n      type=\"search\"\n      [value]=\"searchInputValue()\"\n      (input)=\"searchInputChanged($event)\"\n      [placeholder]=\"searchPlaceholder()\"\n    />\n  </ndw-form-field>\n  @if (noSearchResults()) {\n    <div class=\"no-search-results\">\n      <ndw-icon>sentiment_dissatisfied</ndw-icon>\n      {{ noResultText() }}\n    </div>\n  } @else {\n    <ndw-list class=\"multi-select-container\">\n      @for (checkbox of dataSource(); track checkbox.id) {\n        @if (filterSearch(checkbox.label)) {\n          <ndw-list-item\n            [class.last-checked]=\"lastCheckedElementId() === checkbox.id\"\n            [checkable]=\"true\"\n            [checked]=\"checkbox.value\"\n            [prefixIcon]=\"checkbox.icon\"\n            [subtitle]=\"checkbox.label\"\n            (checkedChange)=\"checkboxChanged(checkbox.id)\"\n          >\n            @if (checkbox.image && isOpen()) {\n              <img [src]=\"checkbox.image.src\" [alt]=\"checkbox.image.alt\" />\n            }\n          </ndw-list-item>\n        }\n      }\n    </ndw-list>\n  }\n  <div class=\"ndw-dialog-footer\">\n    @if (selectAmount() === dataSource().length) {\n      <button ndwLink (click)=\"toggleSelectAll(false)\">\n        {{ selectAllText().deselect }}\n      </button>\n    } @else {\n      <button ndwLink (click)=\"toggleSelectAll(true)\">\n        {{ selectAllText().select }}\n      </button>\n    }\n    <div class=\"ndw-dialog-footer-total\" aria-live=\"polite\">\n      Geselecteerd: <strong>{{ selectAmount() }}</strong>\n    </div>\n  </div>\n</ndw-dropdown>\n", styles: [":host{display:flex}ndw-form-field{margin-bottom:var(--ndw-spacing-md)}.no-search-results{display:grid;justify-items:center;width:var(--multi-select-default-width);margin:auto;padding:0 var(--ndw-spacing-md);font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}.multi-select-container{margin-inline:calc(var(--ndw-spacing-sm) * -1);max-height:var(--multi-select-default-width);min-width:var(--multi-select-default-width);overflow-y:auto}.multi-select-container ndw-list-item img{width:var(--ndw-spacing-lg)}.multi-select-container ndw-list-item.last-checked{height:auto;padding-bottom:var(--ndw-spacing-sm);margin-bottom:var(--ndw-spacing-sm);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200)}ndw-dropdown{width:inherit}.ndw-dialog-footer{display:flex;margin-top:var(--ndw-spacing-md);border-top:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);padding-top:var(--ndw-spacing-md);font-size:var(--ndw-font-size-xs)}.ndw-dialog-footer .ndw-dialog-footer-total{display:flex;flex:1;justify-content:end;gap:var(--ndw-spacing-2xs)}\n"], dependencies: [{ kind: "component", type: DropdownComponent, selector: "ndw-dropdown", inputs: ["disabled", "chevron", "buttonText", "prefixIcon", "selectAmount"], outputs: ["tagClicked", "isOpenChange"] }, { kind: "component", type: FormFieldComponent, selector: "ndw-form-field", inputs: ["label", "suffixAriaLabel", "hideLabel", "disabled", "error", "success", "info", "tooltip"], outputs: ["clearButtonClicked"] }, { kind: "directive", type: InputDirective, selector: "input[ndwInput], select[ndwInput], textarea[ndwInput]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: ListComponent, selector: "ndw-list", inputs: ["elevated"] }, { kind: "component", type: ListItemComponent, selector: "ndw-list-item", inputs: ["active", "badgeValue", "buttonIcon", "buttonLabel", "checkable", "checkType", "collapsible", "disabled", "indented", "pillColor", "pillLabel", "prefixIcon", "showButton", "subtitle", "title", "checked", "expanded"], outputs: ["activeChange", "buttonClicked", "checkedChange", "expandedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: MultiSelectComponent, isStandalone: true, selector: "ndw-multi-select", inputs: { buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: true, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null }, chevron: { classPropertyName: "chevron", publicName: "chevron", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectAmountHidden: { classPropertyName: "selectAmountHidden", publicName: "selectAmountHidden", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, lastCheckedElementId: { classPropertyName: "lastCheckedElementId", publicName: "lastCheckedElementId", isSignal: true, isRequired: false, transformFunction: null }, searchInputValue: { classPropertyName: "searchInputValue", publicName: "searchInputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataSource: "dataSourceChange", lastCheckedElementId: "lastCheckedElementIdChange", searchInputValue: "searchInputValueChange" }, viewQueries: [{ propertyName: "dropdownTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ndw-dropdown\n  prefixIcon=\"filter_alt\"\n  [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\n  (tagClicked)=\"toggleSelectAll(false)\"\n  (isOpenChange)=\"isOpenChanged($event)\"\n  [buttonText]=\"buttonText()\"\n  [disabled]=\"disabled()\"\n  [chevron]=\"chevron()\"\n  [prefixIcon]=\"prefixIcon()\"\n>\n  <ndw-form-field [label]=\"searchLabel()\" [hideLabel]=\"true\">\n    <input\n      ndwInput\n      type=\"search\"\n      [value]=\"searchInputValue()\"\n      (input)=\"searchInputChanged($event)\"\n      [placeholder]=\"searchPlaceholder()\"\n    />\n  </ndw-form-field>\n  @if (noSearchResults()) {\n    <div class=\"no-search-results\">\n      <ndw-icon>sentiment_dissatisfied</ndw-icon>\n      {{ noResultText() }}\n    </div>\n  } @else {\n    <ndw-list class=\"multi-select-container\">\n      @for (checkbox of viewItems(); track checkbox.id) {\n        @if (filterSearch(checkbox.label)) {\n          <ndw-list-item\n            [class.last-checked]=\"lastCheckedElementId() === checkbox.id\"\n            [checkable]=\"true\"\n            [checked]=\"checkbox.value\"\n            [prefixIcon]=\"checkbox.icon\"\n            [subtitle]=\"checkbox.label\"\n            (checkedChange)=\"checkboxChanged(checkbox.id)\"\n          >\n            @if (checkbox.image && isOpen()) {\n              <img [src]=\"checkbox.image.src\" [alt]=\"checkbox.image.alt\" />\n            }\n          </ndw-list-item>\n        }\n      }\n    </ndw-list>\n  }\n  <div class=\"ndw-dialog-footer\">\n    @if (selectAmount() === dataSource().length) {\n      <button ndwLink (click)=\"toggleSelectAll(false)\">\n        {{ selectAllText().deselect }}\n      </button>\n    } @else {\n      <button ndwLink (click)=\"toggleSelectAll(true)\">\n        {{ selectAllText().select }}\n      </button>\n    }\n    <div class=\"ndw-dialog-footer-total\" aria-live=\"polite\">\n      Geselecteerd: <strong>{{ selectAmount() }}</strong>\n    </div>\n  </div>\n</ndw-dropdown>\n", styles: [":host{display:flex}ndw-form-field{margin-bottom:var(--ndw-spacing-md)}.no-search-results{display:grid;justify-items:center;width:var(--multi-select-default-width);margin:auto;padding:0 var(--ndw-spacing-md);font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}.multi-select-container{margin-inline:calc(var(--ndw-spacing-sm) * -1);max-height:var(--multi-select-default-width);min-width:var(--multi-select-default-width);overflow-y:auto}.multi-select-container ndw-list-item img{width:var(--ndw-spacing-lg)}.multi-select-container ndw-list-item.last-checked{height:auto;padding-bottom:var(--ndw-spacing-sm);margin-bottom:var(--ndw-spacing-sm);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200)}ndw-dropdown{width:inherit}.ndw-dialog-footer{display:flex;margin-top:var(--ndw-spacing-md);border-top:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);padding-top:var(--ndw-spacing-md);font-size:var(--ndw-font-size-xs)}.ndw-dialog-footer .ndw-dialog-footer-total{display:flex;flex:1;justify-content:end;gap:var(--ndw-spacing-2xs)}\n"], dependencies: [{ kind: "component", type: DropdownComponent, selector: "ndw-dropdown", inputs: ["disabled", "chevron", "buttonText", "prefixIcon", "selectAmount"], outputs: ["tagClicked", "isOpenChange"] }, { kind: "component", type: FormFieldComponent, selector: "ndw-form-field", inputs: ["label", "suffixAriaLabel", "hideLabel", "disabled", "error", "success", "info", "tooltip"], outputs: ["clearButtonClicked"] }, { kind: "directive", type: InputDirective, selector: "input[ndwInput], select[ndwInput], textarea[ndwInput]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: ListComponent, selector: "ndw-list", inputs: ["elevated"] }, { kind: "component", type: ListItemComponent, selector: "ndw-list-item", inputs: ["active", "badgeValue", "buttonIcon", "buttonLabel", "checkable", "checkType", "collapsible", "disabled", "indented", "pillColor", "pillLabel", "prefixIcon", "showButton", "subtitle", "title", "checked", "expanded"], outputs: ["activeChange", "buttonClicked", "checkedChange", "expandedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -2888,7 +3377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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)=\"isOpenChanged($event)\"\n  [buttonText]=\"buttonText()\"\n  [disabled]=\"disabled()\"\n  [chevron]=\"chevron()\"\n  [prefixIcon]=\"prefixIcon()\"\n>\n  <ndw-form-field [label]=\"searchLabel()\" [hideLabel]=\"true\">\n    <input\n      ndwInput\n      type=\"search\"\n      [value]=\"searchInputValue()\"\n      (input)=\"searchInputChanged($event)\"\n      [placeholder]=\"searchPlaceholder()\"\n    />\n  </ndw-form-field>\n  @if (noSearchResults()) {\n    <div class=\"no-search-results\">\n      <ndw-icon>sentiment_dissatisfied</ndw-icon>\n      {{ noResultText() }}\n    </div>\n  } @else {\n    <ndw-list class=\"multi-select-container\">\n      @for (checkbox of dataSource(); track checkbox.id) {\n        @if (filterSearch(checkbox.label)) {\n          <ndw-list-item\n            [class.last-checked]=\"lastCheckedElementId() === checkbox.id\"\n            [checkable]=\"true\"\n            [checked]=\"checkbox.value\"\n            [prefixIcon]=\"checkbox.icon\"\n            [subtitle]=\"checkbox.label\"\n            (checkedChange)=\"checkboxChanged(checkbox.id)\"\n          >\n            @if (checkbox.image && isOpen()) {\n              <img [src]=\"checkbox.image.src\" [alt]=\"checkbox.image.alt\" />\n            }\n          </ndw-list-item>\n        }\n      }\n    </ndw-list>\n  }\n  <div class=\"ndw-dialog-footer\">\n    @if (selectAmount() === dataSource().length) {\n      <button ndwLink (click)=\"toggleSelectAll(false)\">\n        {{ selectAllText().deselect }}\n      </button>\n    } @else {\n      <button ndwLink (click)=\"toggleSelectAll(true)\">\n        {{ selectAllText().select }}\n      </button>\n    }\n    <div class=\"ndw-dialog-footer-total\" aria-live=\"polite\">\n      Geselecteerd: <strong>{{ selectAmount() }}</strong>\n    </div>\n  </div>\n</ndw-dropdown>\n", styles: [":host{display:flex}ndw-form-field{margin-bottom:var(--ndw-spacing-md)}.no-search-results{display:grid;justify-items:center;width:var(--multi-select-default-width);margin:auto;padding:0 var(--ndw-spacing-md);font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}.multi-select-container{margin-inline:calc(var(--ndw-spacing-sm) * -1);max-height:var(--multi-select-default-width);min-width:var(--multi-select-default-width);overflow-y:auto}.multi-select-container ndw-list-item img{width:var(--ndw-spacing-lg)}.multi-select-container ndw-list-item.last-checked{height:auto;padding-bottom:var(--ndw-spacing-sm);margin-bottom:var(--ndw-spacing-sm);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200)}ndw-dropdown{width:inherit}.ndw-dialog-footer{display:flex;margin-top:var(--ndw-spacing-md);border-top:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);padding-top:var(--ndw-spacing-md);font-size:var(--ndw-font-size-xs)}.ndw-dialog-footer .ndw-dialog-footer-total{display:flex;flex:1;justify-content:end;gap:var(--ndw-spacing-2xs)}\n"] }]
+                    ], selector: 'ndw-multi-select', template: "<ndw-dropdown\n  prefixIcon=\"filter_alt\"\n  [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\n  (tagClicked)=\"toggleSelectAll(false)\"\n  (isOpenChange)=\"isOpenChanged($event)\"\n  [buttonText]=\"buttonText()\"\n  [disabled]=\"disabled()\"\n  [chevron]=\"chevron()\"\n  [prefixIcon]=\"prefixIcon()\"\n>\n  <ndw-form-field [label]=\"searchLabel()\" [hideLabel]=\"true\">\n    <input\n      ndwInput\n      type=\"search\"\n      [value]=\"searchInputValue()\"\n      (input)=\"searchInputChanged($event)\"\n      [placeholder]=\"searchPlaceholder()\"\n    />\n  </ndw-form-field>\n  @if (noSearchResults()) {\n    <div class=\"no-search-results\">\n      <ndw-icon>sentiment_dissatisfied</ndw-icon>\n      {{ noResultText() }}\n    </div>\n  } @else {\n    <ndw-list class=\"multi-select-container\">\n      @for (checkbox of viewItems(); track checkbox.id) {\n        @if (filterSearch(checkbox.label)) {\n          <ndw-list-item\n            [class.last-checked]=\"lastCheckedElementId() === checkbox.id\"\n            [checkable]=\"true\"\n            [checked]=\"checkbox.value\"\n            [prefixIcon]=\"checkbox.icon\"\n            [subtitle]=\"checkbox.label\"\n            (checkedChange)=\"checkboxChanged(checkbox.id)\"\n          >\n            @if (checkbox.image && isOpen()) {\n              <img [src]=\"checkbox.image.src\" [alt]=\"checkbox.image.alt\" />\n            }\n          </ndw-list-item>\n        }\n      }\n    </ndw-list>\n  }\n  <div class=\"ndw-dialog-footer\">\n    @if (selectAmount() === dataSource().length) {\n      <button ndwLink (click)=\"toggleSelectAll(false)\">\n        {{ selectAllText().deselect }}\n      </button>\n    } @else {\n      <button ndwLink (click)=\"toggleSelectAll(true)\">\n        {{ selectAllText().select }}\n      </button>\n    }\n    <div class=\"ndw-dialog-footer-total\" aria-live=\"polite\">\n      Geselecteerd: <strong>{{ selectAmount() }}</strong>\n    </div>\n  </div>\n</ndw-dropdown>\n", styles: [":host{display:flex}ndw-form-field{margin-bottom:var(--ndw-spacing-md)}.no-search-results{display:grid;justify-items:center;width:var(--multi-select-default-width);margin:auto;padding:0 var(--ndw-spacing-md);font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}.multi-select-container{margin-inline:calc(var(--ndw-spacing-sm) * -1);max-height:var(--multi-select-default-width);min-width:var(--multi-select-default-width);overflow-y:auto}.multi-select-container ndw-list-item img{width:var(--ndw-spacing-lg)}.multi-select-container ndw-list-item.last-checked{height:auto;padding-bottom:var(--ndw-spacing-sm);margin-bottom:var(--ndw-spacing-sm);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200)}ndw-dropdown{width:inherit}.ndw-dialog-footer{display:flex;margin-top:var(--ndw-spacing-md);border-top:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);padding-top:var(--ndw-spacing-md);font-size:var(--ndw-font-size-xs)}.ndw-dialog-footer .ndw-dialog-footer-total{display:flex;flex:1;justify-content:end;gap:var(--ndw-spacing-2xs)}\n"] }]
         }] });
 
 class RouterBreadcrumbsComponent extends CoreRouterBreadcrumbsComponent {
@@ -3280,7 +3769,7 @@ class SwitcherComponent {
                 useExisting: forwardRef(() => SwitcherComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\n  class=\"switch-slider\"\n  [style.width]=\"sliderWidth\"\n  [style.left]=\"sliderPosition\"\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    <span class=\"switch-label\">{{ option.label }}</span>\n\n    @if (option.disabled) {\n      <span [id]=\"generateId(i) + '-disabled'\" class=\"sr-only\"> (disabled) </span>\n    }\n  </label>\n}\n", styles: [":host{width:100%;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)}.switch-slider{position:absolute;top:var(--ndw-spacing-2xs);height:calc(100% - var(--ndw-spacing-2xs) * 2);background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-sm);box-shadow:var(--ndw-elevation-content);transition:left .2s ease,width .2s ease;z-index:1}.switch-option{box-sizing:border-box;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 .2s ease,border-color .2s ease;height:calc(var(--ndw-spacing-xl) + var(--ndw-spacing-xl))}.switch-option:hover:not(:disabled){color:var(--ndw-color-grey-700)}.switch-option.active{color:var(--ndw-color-grey-900);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500)}.switch-option.active .switch-label{color:var(--ndw-color-black)}.switch-option.active ndw-icon{color:var(--ndw-color-primary-500)}.switch-option:disabled{cursor:not-allowed;opacity:.5}.switch-label{white-space:nowrap}.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\n  class=\"switch-slider\"\n  [style.width]=\"sliderWidth\"\n  [style.left]=\"sliderPosition\"\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    <span class=\"switch-label\">{{ option.label }}</span>\n\n    @if (option.disabled) {\n      <span [id]=\"generateId(i) + '-disabled'\" class=\"sr-only\"> (disabled) </span>\n    }\n  </label>\n}\n", styles: [":host{width:100%;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)}.switch-slider{position:absolute;top:var(--ndw-spacing-2xs);height:calc(100% - var(--ndw-spacing-2xs) * 2);background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-sm);box-shadow:var(--ndw-elevation-content);transition:left .2s ease,width .2s ease;z-index:1}.switch-option{box-sizing:border-box;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 .2s ease,border-color .2s ease;height:calc(var(--ndw-spacing-xl) + var(--ndw-spacing-xl))}.switch-option:hover:not(:disabled){color:var(--ndw-color-grey-700)}.switch-option.active{color:var(--ndw-color-grey-900);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500)}.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{white-space:nowrap}.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: "20.2.4", ngImport: i0, type: SwitcherComponent, decorators: [{
             type: Component,
@@ -3293,7 +3782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         role: 'radiogroup',
                         '[class.disabled]': 'disabled()',
-                    }, template: "<div\n  class=\"switch-slider\"\n  [style.width]=\"sliderWidth\"\n  [style.left]=\"sliderPosition\"\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    <span class=\"switch-label\">{{ option.label }}</span>\n\n    @if (option.disabled) {\n      <span [id]=\"generateId(i) + '-disabled'\" class=\"sr-only\"> (disabled) </span>\n    }\n  </label>\n}\n", styles: [":host{width:100%;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)}.switch-slider{position:absolute;top:var(--ndw-spacing-2xs);height:calc(100% - var(--ndw-spacing-2xs) * 2);background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-sm);box-shadow:var(--ndw-elevation-content);transition:left .2s ease,width .2s ease;z-index:1}.switch-option{box-sizing:border-box;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 .2s ease,border-color .2s ease;height:calc(var(--ndw-spacing-xl) + var(--ndw-spacing-xl))}.switch-option:hover:not(:disabled){color:var(--ndw-color-grey-700)}.switch-option.active{color:var(--ndw-color-grey-900);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500)}.switch-option.active .switch-label{color:var(--ndw-color-black)}.switch-option.active ndw-icon{color:var(--ndw-color-primary-500)}.switch-option:disabled{cursor:not-allowed;opacity:.5}.switch-label{white-space:nowrap}.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\n  class=\"switch-slider\"\n  [style.width]=\"sliderWidth\"\n  [style.left]=\"sliderPosition\"\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    <span class=\"switch-label\">{{ option.label }}</span>\n\n    @if (option.disabled) {\n      <span [id]=\"generateId(i) + '-disabled'\" class=\"sr-only\"> (disabled) </span>\n    }\n  </label>\n}\n", styles: [":host{width:100%;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)}.switch-slider{position:absolute;top:var(--ndw-spacing-2xs);height:calc(100% - var(--ndw-spacing-2xs) * 2);background-color:var(--ndw-color-white);border-radius:var(--ndw-border-radius-sm);box-shadow:var(--ndw-elevation-content);transition:left .2s ease,width .2s ease;z-index:1}.switch-option{box-sizing:border-box;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 .2s ease,border-color .2s ease;height:calc(var(--ndw-spacing-xl) + var(--ndw-spacing-xl))}.switch-option:hover:not(:disabled){color:var(--ndw-color-grey-700)}.switch-option.active{color:var(--ndw-color-grey-900);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500)}.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{white-space:nowrap}.switch-radio{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.switch-radio:focus,.switch-radio:focus-visible{outline:none}\n"] }]
         }] });
 
 class TabComponent {
@@ -3308,6 +3797,7 @@ class TabComponent {
     }
     title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
     active = false;
     id = input(crypto.randomUUID(), ...(ngDevMode ? [{ debugName: "id" }] : []));
     ngOnInit() {
@@ -3317,7 +3807,7 @@ class TabComponent {
         return this._elementRef.nativeElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.4", 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 }, 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: "20.2.4", 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 }, 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
@@ -3325,15 +3815,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
         }] });
 
 class TabGroupComponent {
+    _injector = inject(Injector);
+    _destroyRef = inject(DestroyRef);
     _tabs = contentChildren(TabComponent, ...(ngDevMode ? [{ debugName: "_tabs" }] : []));
     _tabButtons = viewChildren('tabButton', ...(ngDevMode ? [{ debugName: "_tabButtons" }] : []));
+    _tabGroupContainer = viewChild('tabGroupContainer', ...(ngDevMode ? [{ debugName: "_tabGroupContainer" }] : []));
+    hasPadding = input(false, ...(ngDevMode ? [{ debugName: "hasPadding" }] : []));
+    activeTabId = model(...(ngDevMode ? [undefined, { debugName: "activeTabId" }] : []));
+    inlinePadding = input(0, ...(ngDevMode ? [{ debugName: "inlinePadding" }] : []));
+    // Scroll state signals
+    _scrollLeft = signal(0, ...(ngDevMode ? [{ debugName: "_scrollLeft" }] : []));
+    _scrollWidth = signal(0, ...(ngDevMode ? [{ debugName: "_scrollWidth" }] : []));
+    _clientWidth = signal(0, ...(ngDevMode ? [{ debugName: "_clientWidth" }] : []));
     tabs = computed(() => this._tabs().map((tab) => {
         tab.active = tab.id() === this.activeTabId();
         return tab;
     }), ...(ngDevMode ? [{ debugName: "tabs" }] : []));
-    hasPadding = input(false, ...(ngDevMode ? [{ debugName: "hasPadding" }] : []));
-    activeTabId = model(...(ngDevMode ? [undefined, { debugName: "activeTabId" }] : []));
-    inlinePadding = input(0, ...(ngDevMode ? [{ debugName: "inlinePadding" }] : []));
+    canScrollLeft = computed(() => this._scrollLeft() > 0, ...(ngDevMode ? [{ debugName: "canScrollLeft" }] : []));
+    canScrollRight = computed(() => this._scrollLeft() < this._scrollWidth() - this._clientWidth() - 1, ...(ngDevMode ? [{ debugName: "canScrollRight" }] : []));
+    _resizeObserver;
     constructor() {
         effect(() => {
             const tabs = this._tabs();
@@ -3352,6 +3852,48 @@ class TabGroupComponent {
                 tab.active = tab.id() === id;
             });
         });
+        // Setup scroll detection after render
+        afterNextRender(() => {
+            this._setupScrollDetection();
+        }, { injector: this._injector });
+    }
+    ngOnDestroy() {
+        this._resizeObserver?.disconnect();
+    }
+    _setupScrollDetection() {
+        const container = this._tabGroupContainer()?.nativeElement;
+        if (!container)
+            return;
+        this._updateScrollState(container);
+        // Listen to scroll events
+        fromEvent(container, 'scroll')
+            .pipe(takeUntilDestroyed(this._destroyRef), debounceTime(50))
+            .subscribe(() => {
+            this._updateScrollState(container);
+        });
+        // Observe resize
+        this._resizeObserver = new ResizeObserver(() => {
+            this._updateScrollState(container);
+        });
+        this._resizeObserver.observe(container);
+    }
+    _updateScrollState(container) {
+        this._scrollLeft.set(container.scrollLeft);
+        this._scrollWidth.set(container.scrollWidth);
+        this._clientWidth.set(container.clientWidth);
+    }
+    scrollTo(direction) {
+        const container = this._tabGroupContainer()?.nativeElement;
+        if (!container)
+            return;
+        const scrollAmount = 200; // Fixed scroll amount in pixels
+        const newScrollLeft = direction === 'left'
+            ? container.scrollLeft - scrollAmount
+            : container.scrollLeft + scrollAmount;
+        container.scrollTo({
+            left: newScrollLeft,
+            behavior: 'smooth',
+        });
     }
     selectTab(index) {
         this.activeTabId.set(this._tabs()?.[index].id());
@@ -3372,11 +3914,11 @@ class TabGroupComponent {
                 break;
             case 'Home':
                 event.preventDefault();
-                this.selectTab(this.getNextEnabledIndex(tabCount, 0, 1));
+                this.selectTab(this.getFirstEnabledIndex(tabCount));
                 break;
             case 'End':
                 event.preventDefault();
-                this.selectTab(this.getNextEnabledIndex(tabCount, -1, -1));
+                this.selectTab(this.getLastEnabledIndex(tabCount));
                 break;
         }
     }
@@ -3388,12 +3930,26 @@ class TabGroupComponent {
         }
         return start;
     }
+    getFirstEnabledIndex(tabCount) {
+        for (let i = 0; i < tabCount; i++) {
+            if (!this.tabs()[i].disabled())
+                return i;
+        }
+        return 0;
+    }
+    getLastEnabledIndex(tabCount) {
+        for (let i = tabCount - 1; i >= 0; i--) {
+            if (!this.tabs()[i].disabled())
+                return i;
+        }
+        return tabCount - 1;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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 }], ngImport: i0, template: "<div 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      {{ tab.title() }}\n    </button>\n  }\n</div>\n@for (tab of tabs(); track tab.id(); let i = $index) {\n  <div\n    class=\"tab-content\"\n    [ngClass]=\"{ 'is-hidden': !tab.active }\"\n    [id]=\"'tab-panel-' + tab.id\"\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"'tab-' + tab.id\"\n    [tabindex]=\"0\"\n  >\n    <ng-template [cdkPortalOutlet]=\"tab.content\"></ng-template>\n  </div>\n}\n", styles: [".tab-group{display:flex;gap:var(--ndw-spacing-lg);overflow:auto hidden;padding-left:0;position:relative;z-index:1}.tab-group.with-padding{padding-inline:var(--ndw-spacing-lg)}.tab-group:after{background-color:var(--ndw-color-grey-200);bottom:0;content:\"\";height:var(--ndw-border-size-sm);position:absolute;left:0;right:0;width:auto;z-index:-1}.tab-button{background:none;border:none;border-bottom:var(--ndw-border-size-lg) solid transparent;color:var(--ndw-color-grey-400);cursor:pointer;display:block;font-weight:700;padding:var(--ndw-spacing-md) 0;position:relative;transition:border-bottom .2s ease-out,color .2s ease-out;word-break:break-word}.tab-button:disabled{pointer-events:none;opacity:.5}.tab-button:hover{border-color:var(--ndw-color-grey-500);color:var(--ndw-color-grey-500)}.tab-button:active,.tab-button:focus{border-color:transparent;color:var(--ndw-color-grey-400)}.tab-button[aria-selected=true]{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-button[aria-selected=true]:hover{border-color:var(--ndw-color-primary-hover);color:var(--ndw-color-primary-hover)}.tab-button[aria-selected=true]:active{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-content{padding-top:var(--ndw-spacing-md)}.tab-content.is-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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  @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  <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        {{ tab.title() }}\n        @if (tab.hasError()) {\n          <ndw-badge [size]=\"'small'\" [variant]=\"'error'\" />\n        }\n      </button>\n    }\n  </div>\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);z-index:2;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:block;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: "20.2.4", ngImport: i0, type: TabGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndw-tab-group', imports: [CdkPortalOutlet, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tab-group\" role=\"tablist\" [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      {{ tab.title() }}\n    </button>\n  }\n</div>\n@for (tab of tabs(); track tab.id(); let i = $index) {\n  <div\n    class=\"tab-content\"\n    [ngClass]=\"{ 'is-hidden': !tab.active }\"\n    [id]=\"'tab-panel-' + tab.id\"\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"'tab-' + tab.id\"\n    [tabindex]=\"0\"\n  >\n    <ng-template [cdkPortalOutlet]=\"tab.content\"></ng-template>\n  </div>\n}\n", styles: [".tab-group{display:flex;gap:var(--ndw-spacing-lg);overflow:auto hidden;padding-left:0;position:relative;z-index:1}.tab-group.with-padding{padding-inline:var(--ndw-spacing-lg)}.tab-group:after{background-color:var(--ndw-color-grey-200);bottom:0;content:\"\";height:var(--ndw-border-size-sm);position:absolute;left:0;right:0;width:auto;z-index:-1}.tab-button{background:none;border:none;border-bottom:var(--ndw-border-size-lg) solid transparent;color:var(--ndw-color-grey-400);cursor:pointer;display:block;font-weight:700;padding:var(--ndw-spacing-md) 0;position:relative;transition:border-bottom .2s ease-out,color .2s ease-out;word-break:break-word}.tab-button:disabled{pointer-events:none;opacity:.5}.tab-button:hover{border-color:var(--ndw-color-grey-500);color:var(--ndw-color-grey-500)}.tab-button:active,.tab-button:focus{border-color:transparent;color:var(--ndw-color-grey-400)}.tab-button[aria-selected=true]{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-button[aria-selected=true]:hover{border-color:var(--ndw-color-primary-hover);color:var(--ndw-color-primary-hover)}.tab-button[aria-selected=true]:active{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-content{padding-top:var(--ndw-spacing-md)}.tab-content.is-hidden{display:none}\n"] }]
+            args: [{ selector: 'ndw-tab-group', imports: [CdkPortalOutlet, NgClass, BadgeComponent, ButtonDirective, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tab-group-wrapper\">\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  <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        {{ tab.title() }}\n        @if (tab.hasError()) {\n          <ndw-badge [size]=\"'small'\" [variant]=\"'error'\" />\n        }\n      </button>\n    }\n  </div>\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);z-index:2;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:block;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: () => [] });
 
 const ndwAgGridTheme = {
@@ -3607,5 +4163,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionService, AlertComponent, AutoGrowDirective, AutosuggestAddOptionComponent, AutosuggestDirective, AutosuggestOptionComponent, AutosuggestPanelComponent, AvatarComponent, BadgeComponent, BannerComponent, BreadcrumbComponent, BreadcrumbGroupComponent, ButtonDirective, CARD_COMPONENTS, CARD_ID_TOKEN, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CheckboxComponent, CheckboxGroupComponent, CollapsibleComponent, DEFAULT_BACKGROUNDS, DashboardCardComponent, DatepickerComponent, DropdownComponent, EditBarActionsComponent, EditBarComponent, EditBarMessageComponent, ErrorComponent, FavoriteComponent, FileUploadComponent, FormFieldComponent, FormFieldElement, HoverableListItemComponent, IconComponent, InfoComponent, InputButtonComponent, InputDirective, InputIconComponent, KeyValueListComponent, LayoutBannersComponent, LayoutComponent, ListComponent, ListItemComponent, LoaderComponent, MAP_BACKGROUNDS, MAP_BACKGROUND_IMAGES, MAP_LAYERS, MAP_LAYER_IMAGES, MODAL_COMPONENTS, MainNavigationComponent, MapButtonComponent, MapDisplayComponent, MapDisplayOptionComponent, MapLegendComponent, MaxCharDirective, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalService, MonthInputComponent, MultiSelectComponent, OptionComponent, OptionGroupComponent, PillComponent, PopoverTriggerDirective, RadioButtonComponent, RadioGroupComponent, RouterBreadcrumbsComponent, SplitterComponent, SummaryCardActionComponent, SummaryCardActionsComponent, SummaryCardComponent, SummaryCardContentComponent, SummaryCardHeaderComponent, SummaryCardSubtitleComponent, SummaryCardTagComponent, SummaryCardTagsComponent, SwitcherComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastService, TooltipComponent, TooltipDirective, fontMapButtonIcons, mapButtonIcons, ndwAgGridTheme, svgMapButtonIcons };
+export { AccordionComponent, AccordionService, AlertComponent, AutoGrowDirective, AutosuggestAddOptionComponent, AutosuggestDirective, AutosuggestOptionComponent, AutosuggestPanelComponent, AvatarComponent, BadgeComponent, BannerComponent, BreadcrumbComponent, BreadcrumbGroupComponent, ButtonDirective, CARD_COMPONENTS, CARD_ID_TOKEN, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CheckboxComponent, CheckboxGroupComponent, CollapsibleComponent, DEFAULT_BACKGROUNDS, DashboardCardComponent, DatepickerComponent, DropdownComponent, EditBarActionsComponent, EditBarComponent, EditBarMessageComponent, ErrorComponent, FavoriteComponent, FileUploadComponent, FormFieldComponent, FormFieldElement, HoverableListItemComponent, IconComponent, InfoComponent, InputButtonComponent, InputDirective, InputIconComponent, KeyValueListComponent, LayoutBannersComponent, LayoutComponent, ListComponent, ListItemComponent, LoaderComponent, MAP_BACKGROUNDS, MAP_BACKGROUND_IMAGES, MAP_LAYERS, MAP_LAYER_IMAGES, MODAL_COMPONENTS, MainNavigationComponent, MapButtonComponent, MapDisplayComponent, MapDisplayOptionComponent, MapLegendComponent, MarkdownEditorComponent, MaxCharDirective, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalService, MonthInputComponent, MultiSelectComponent, OptionComponent, OptionGroupComponent, PillComponent, PopoverTriggerDirective, RadioButtonComponent, RadioGroupComponent, RouterBreadcrumbsComponent, SplitterComponent, SummaryCardActionComponent, SummaryCardActionsComponent, SummaryCardComponent, SummaryCardContentComponent, SummaryCardHeaderComponent, SummaryCardSubtitleComponent, SummaryCardTagComponent, SummaryCardTagsComponent, SwitcherComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastService, TooltipComponent, TooltipDirective, fontMapButtonIcons, mapButtonIcons, ndwAgGridTheme, svgMapButtonIcons };
 //# sourceMappingURL=ndwnu-design-system.mjs.map