@ndwnu/design-system 13.0.1 → 13.1.0

package/fesm2022/ndwnu-design-system.mjs

@@ -343,6 +343,22 @@ function getDateClassFn(dateWithIndicatorFn, mode, selectedDates) {
     };
 }
 
+const MS_PER_DAY = 24 * 60 * 60 * 1000;
+const DAYS_IN_WEEK = 7;
+function getDateWeek(date) {
+    // Create a copy of the date object so we don't modify the original date
+    const d = new Date(date.getTime());
+    // Set to midnight on the nearest Thursday
+    d.setHours(0, 0, 0, 0);
+    d.setDate(d.getDate() + 3 - ((d.getDay() + 6) % DAYS_IN_WEEK));
+    // January 4 is always in week 1.
+    const week1 = new Date(d.getFullYear(), 0, 4);
+    // Adjust to Thursday in week 1 and count number of weeks from date to week1.
+    const diffMs = d.getTime() - week1.getTime();
+    return (1 + Math.round((diffMs / MS_PER_DAY - 3 + ((week1.getDay() + 6) % DAYS_IN_WEEK)) / DAYS_IN_WEEK));
+}
+
+/* eslint-disable max-lines */
 const rangePreviewClasses = {
     start: 'ndw-date-range-start-preview',
     end: 'ndw-date-range-end-preview',
@@ -357,6 +373,7 @@ class CalendarComponent {
     dateEnabledFilter = input(() => true, ...(ngDevMode ? [{ debugName: "dateEnabledFilter" }] : []));
     dateWithIndicatorFilter = input(() => false, ...(ngDevMode ? [{ debugName: "dateWithIndicatorFilter" }] : []));
     elevated = input(true, ...(ngDevMode ? [{ debugName: "elevated" }] : []));
+    showWeekNumbers = input(false, ...(ngDevMode ? [{ debugName: "showWeekNumbers" }] : []));
     internalDateEnabledFilter = computed(() => {
         const disabled = this.disabled();
         const filter = this.dateEnabledFilter();
@@ -369,6 +386,7 @@ class CalendarComponent {
     dateClass = computed(() => getDateClassFn(this.dateWithIndicatorFilter(), this.mode(), this.value()), ...(ngDevMode ? [{ debugName: "dateClass" }] : []));
     #onChange = noop;
     #mouseMoveListener = null;
+    #calendarRowMutationObserver = null;
     constructor() {
         afterRenderEffect(() => {
             const calendar = this.calendar();
@@ -377,6 +395,17 @@ class CalendarComponent {
             // This is needed to redraw after setting classes on dates.
             calendar?.updateTodaysDate();
         });
+        afterRenderEffect(() => {
+            const calendar = this.calendar();
+            const calendarElement = this.calendarElement()?.nativeElement;
+            const showWeekNumbers = this.showWeekNumbers();
+            if (calendar && calendarElement && showWeekNumbers) {
+                this.addWeekNumberAttributes(calendarElement, calendar);
+            }
+            else {
+                this.disconnectCalendarRowMutationObserver();
+            }
+        });
         effect(() => {
             const mode = this.mode();
             const element = this.calendarElement()?.nativeElement;
@@ -390,6 +419,7 @@ class CalendarComponent {
     }
     ngOnDestroy() {
         this.removeMouseMoveListener();
+        this.disconnectCalendarRowMutationObserver();
     }
     addMouseMoveListener(calendarElement, calendar) {
         this.#mouseMoveListener = () => this.addRangePreviewClasses(calendarElement, calendar);
@@ -401,6 +431,11 @@ class CalendarComponent {
             this.#mouseMoveListener = null;
         }
     }
+    disconnectCalendarRowMutationObserver() {
+        // Disconnect the MutationObserver. Check if the disconnect method exists to avoid
+        // errors in the test environment (happy dom has a limited implementation).
+        this.#calendarRowMutationObserver?.disconnect?.();
+    }
     addRangePreviewClasses(calendarElement, calendar) {
         const selection = this.value();
         const hovered = calendarElement.querySelector('.ndw-date:hover');
@@ -410,14 +445,11 @@ class CalendarComponent {
                 .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);
+        const hoveredDate = getButtonDate(calendar, hovered);
         // Get all buttons between
         calendarElement.querySelectorAll('.ndw-date').forEach((btn) => {
-            const btnDate = getButtonDate(btn);
+            const btnDate = getButtonDate(calendar, btn);
             this.removeRangePreviewClasses(btn);
             if ((isDateAfter(btnDate, selectedDate) && isDateBefore(btnDate, hoveredDate)) ||
                 (isDateBefore(btnDate, selectedDate) && isDateAfter(btnDate, hoveredDate))) {
@@ -442,6 +474,33 @@ class CalendarComponent {
             element.classList.remove(cssClass);
         });
     }
+    /**
+     * Adds a data attribute with the week number to each calendar row for styling purposes.
+     * The week number is calculated based on the date of the first button in the row, which represents the first day of that week.
+     *
+     * A mutation observer is used to handle the dynamic rendering of calendar rows by Angular Material,
+     * ensuring that the week numbers are correctly assigned whenever the calendar view changes (e.g., when navigating between months).
+     */
+    addWeekNumberAttributes(calendarElement, calendar) {
+        this.#calendarRowMutationObserver = new MutationObserver(() => {
+            if (calendar.currentView !== 'month') {
+                return;
+            }
+            const rows = calendarElement.querySelectorAll('tr[role="row"]');
+            rows.forEach((row) => {
+                const firstButton = row.querySelector('button');
+                if (firstButton) {
+                    const date = getButtonDate(calendar, firstButton);
+                    row.dataset['weekNumber'] = getDateWeek(date).toString();
+                }
+            });
+        });
+        // Check if the observe method exists to avoid errors in the test environment (happy dom has a limited implementation).
+        this.#calendarRowMutationObserver.observe?.(calendarElement, {
+            childList: true,
+            subtree: true,
+        });
+    }
     onDateSelected(date, toggle = true) {
         const mode = this.mode();
         const dates = toDateArray(date);
@@ -484,7 +543,7 @@ class CalendarComponent {
         this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", 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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", 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 }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { properties: { "class.elevated": "elevated()", "class.show-week-numbers": "showWeekNumbers()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CalendarComponent),
@@ -493,7 +552,7 @@ class CalendarComponent {
             { provide: MAT_DATE_LOCALE, useValue: 'nl-NL' },
             { provide: MatDatepickerIntl, useFactory: createDutchDatepickerIntl },
             provideNativeDateAdapter(),
-        ], viewQueries: [{ propertyName: "calendar", first: true, predicate: MatCalendar, descendants: true, isSignal: true }, { propertyName: "calendarElement", first: true, predicate: MatCalendar, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<mat-calendar\n  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 });
+        ], viewQueries: [{ propertyName: "calendar", first: true, predicate: MatCalendar, descendants: true, isSignal: true }, { propertyName: "calendarElement", first: true, predicate: MatCalendar, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<mat-calendar\n  [minDate]=\"minDate()\"\n  [maxDate]=\"maxDate()\"\n  [dateClass]=\"dateClass()\"\n  [class.range-picker]=\"mode() === 'range'\"\n  [class.month-picker]=\"mode() === 'month'\"\n  [startView]=\"startView()\"\n  [startAt]=\"startAt()\"\n  [dateFilter]=\"internalDateEnabledFilter()\"\n  (monthSelected)=\"onMonthSelected($event)\"\n  (selectedChange)=\"onDateSelected($event)\"\n/>\n", styles: [":host{--calendar-width: 300px;display:block;width:var(--calendar-width);margin:calc(-1 * var(--ndw-spacing-2xs))}:host.elevated{border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-content)}:host.show-week-numbers{width:calc(var(--calendar-width) + 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
@@ -508,10 +567,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         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: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], dateEnabledFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateEnabledFilter", required: false }] }], dateWithIndicatorFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateWithIndicatorFilter", required: false }] }], elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatCalendar), { isSignal: true }] }], calendarElement: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatCalendar), { ...{
+                        '[class.show-week-numbers]': 'showWeekNumbers()',
+                    }, template: "<mat-calendar\n  [minDate]=\"minDate()\"\n  [maxDate]=\"maxDate()\"\n  [dateClass]=\"dateClass()\"\n  [class.range-picker]=\"mode() === 'range'\"\n  [class.month-picker]=\"mode() === 'month'\"\n  [startView]=\"startView()\"\n  [startAt]=\"startAt()\"\n  [dateFilter]=\"internalDateEnabledFilter()\"\n  (monthSelected)=\"onMonthSelected($event)\"\n  (selectedChange)=\"onDateSelected($event)\"\n/>\n", styles: [":host{--calendar-width: 300px;display:block;width:var(--calendar-width);margin:calc(-1 * var(--ndw-spacing-2xs))}:host.elevated{border-radius:var(--ndw-border-radius-md);box-shadow:var(--ndw-elevation-content)}:host.show-week-numbers{width:calc(var(--calendar-width) + 1rem)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], dateEnabledFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateEnabledFilter", required: false }] }], dateWithIndicatorFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateWithIndicatorFilter", required: false }] }], elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatCalendar), { isSignal: true }] }], calendarElement: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatCalendar), { ...{
                             read: (ElementRef),
                         }, isSignal: true }] }] } });
+function getButtonDate(calendar, el) {
+    return new Date(calendar.activeDate.getFullYear() || 0, calendar.activeDate.getMonth() || 0, parseInt(el.textContent || '0', 10));
+}
 
 class PopoverTriggerDirective {
     popoverToggled = new EventEmitter();
@@ -806,6 +869,7 @@ class DatepickerComponent {
     maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
     dateEnabledFilter = input(() => true, ...(ngDevMode ? [{ debugName: "dateEnabledFilter" }] : []));
     dateWithIndicatorFilter = input(() => false, ...(ngDevMode ? [{ debugName: "dateWithIndicatorFilter" }] : []));
+    showWeekNumbers = input(false, ...(ngDevMode ? [{ debugName: "showWeekNumbers" }] : []));
     // Used by the FormFieldComponent to set the success and error state.
     input = viewChild.required(InputDirective);
     popoverTrigger = viewChild.required(PopoverTriggerDirective);
@@ -880,13 +944,13 @@ class DatepickerComponent {
         this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", 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.getTime()) {\n      <ndw-tag (clicked)=\"removeDate(value)\">{{ value | date: 'd-M-yyyy' }}</ndw-tag>\n    }\n  </div>\n}\n", styles: [":host{position:relative;flex:1}input{padding-right:calc(var(--ndw-spacing-xl) + var(--ndw-spacing-2xs))}.calendar-button{position:absolute;margin:var(--ndw-spacing-xs);right:0;top:0}.calendar-button[disabled]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500)}.tag-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--ndw-spacing-xs);padding-left:var(--ndw-spacing-xs);padding-right:var(--ndw-spacing-xs);padding-bottom:var(--ndw-spacing-xs)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "directive", type: InputDirective, selector: "input[ndwInput], select[ndwInput], textarea[ndwInput]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: PopoverTriggerDirective, selector: "[ndwPopoverTrigger]", inputs: ["popoverPosition", "ndwPopoverTrigger", "toggleOnClick", "isOpen"], outputs: ["popoverToggled", "isOpenChange"], exportAs: ["ndwPopoverTrigger"] }, { kind: "component", type: CalendarComponent, selector: "ndw-calendar", inputs: ["mode", "disabled", "minDate", "maxDate", "startAt", "dateEnabledFilter", "dateWithIndicatorFilter", "elevated"], outputs: ["disabledChange"] }, { kind: "component", type: TagComponent, selector: "ndw-tag", inputs: ["disabled", "suffixAriaLabel", "suffixIcon"], outputs: ["clicked"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: InputDirective, descendants: true, isSignal: true }, { propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  ndwInput\n  [value]=\"showTags() ? '' : formattedValue()\"\n  (blur)=\"onDateInput($event.target.value)\"\n  [min]=\"minDate()\"\n  [max]=\"maxDate()\"\n  [placeholder]=\"placeholder()\"\n  [required]=\"required()\"\n  [disabled]=\"disabled()\"\n/>\n\n<button\n  ndwButton\n  class=\"calendar-button\"\n  type=\"button\"\n  extra-small\n  tertiary\n  [ndwPopoverTrigger]=\"calendarTemplate\"\n  [toggleOnClick]=\"true\"\n  [attr.aria-label]=\"openCalendarLabel()\"\n  [disabled]=\"disabled()\"\n  (isOpenChange)=\"onPopoverOpenChange($event)\"\n>\n  <ndw-icon>calendar_month</ndw-icon>\n</button>\n\n<ng-template #calendarTemplate>\n  <ndw-calendar\n    [ngModel]=\"value()\"\n    (ngModelChange)=\"onDateSelected($event)\"\n    [mode]=\"mode()\"\n    [minDate]=\"minDate()\"\n    [maxDate]=\"maxDate()\"\n    [startAt]=\"startAt()\"\n    [dateEnabledFilter]=\"dateEnabledFilter()\"\n    [dateWithIndicatorFilter]=\"dateWithIndicatorFilter()\"\n    [elevated]=\"false\"\n    [showWeekNumbers]=\"showWeekNumbers()\"\n  />\n</ng-template>\n\n@if (showTags() && value().length > 0) {\n  <div class=\"tag-container\">\n    @for (value of value(); track value.getTime()) {\n      <ndw-tag (clicked)=\"removeDate(value)\">{{ value | date: 'd-M-yyyy' }}</ndw-tag>\n    }\n  </div>\n}\n", styles: [":host{position:relative;flex:1}input{padding-right:calc(var(--ndw-spacing-xl) + var(--ndw-spacing-2xs))}.calendar-button{position:absolute;margin:var(--ndw-spacing-xs);right:0;top:0}.calendar-button[disabled]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500)}.tag-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--ndw-spacing-xs);padding-left:var(--ndw-spacing-xs);padding-right:var(--ndw-spacing-xs);padding-bottom:var(--ndw-spacing-xs)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "directive", type: InputDirective, selector: "input[ndwInput], select[ndwInput], textarea[ndwInput]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: PopoverTriggerDirective, selector: "[ndwPopoverTrigger]", inputs: ["popoverPosition", "ndwPopoverTrigger", "toggleOnClick", "isOpen"], outputs: ["popoverToggled", "isOpenChange"], exportAs: ["ndwPopoverTrigger"] }, { kind: "component", type: CalendarComponent, selector: "ndw-calendar", inputs: ["mode", "disabled", "minDate", "maxDate", "startAt", "dateEnabledFilter", "dateWithIndicatorFilter", "elevated", "showWeekNumbers"], outputs: ["disabledChange"] }, { kind: "component", type: TagComponent, selector: "ndw-tag", inputs: ["disabled", "suffixAriaLabel", "suffixIcon"], outputs: ["clicked"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
@@ -905,8 +969,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             useExisting: forwardRef(() => DatepickerComponent),
                             multi: true,
                         },
-                    ], selector: 'ndw-datepicker', template: "<input\n  ndwInput\n  [value]=\"showTags() ? '' : formattedValue()\"\n  (blur)=\"onDateInput($event.target.value)\"\n  [min]=\"minDate()\"\n  [max]=\"maxDate()\"\n  [placeholder]=\"placeholder()\"\n  [required]=\"required()\"\n  [disabled]=\"disabled()\"\n/>\n\n<button\n  ndwButton\n  class=\"calendar-button\"\n  type=\"button\"\n  extra-small\n  tertiary\n  [ndwPopoverTrigger]=\"calendarTemplate\"\n  [toggleOnClick]=\"true\"\n  [attr.aria-label]=\"openCalendarLabel()\"\n  [disabled]=\"disabled()\"\n  (isOpenChange)=\"onPopoverOpenChange($event)\"\n>\n  <ndw-icon>calendar_month</ndw-icon>\n</button>\n\n<ng-template #calendarTemplate>\n  <ndw-calendar\n    [ngModel]=\"value()\"\n    (ngModelChange)=\"onDateSelected($event)\"\n    [mode]=\"mode()\"\n    [minDate]=\"minDate()\"\n    [maxDate]=\"maxDate()\"\n    [startAt]=\"startAt()\"\n    [dateEnabledFilter]=\"dateEnabledFilter()\"\n    [dateWithIndicatorFilter]=\"dateWithIndicatorFilter()\"\n    [elevated]=\"false\"\n  />\n</ng-template>\n\n@if (showTags() && value().length > 0) {\n  <div class=\"tag-container\">\n    @for (value of value(); track value.getTime()) {\n      <ndw-tag (clicked)=\"removeDate(value)\">{{ value | date: 'd-M-yyyy' }}</ndw-tag>\n    }\n  </div>\n}\n", styles: [":host{position:relative;flex:1}input{padding-right:calc(var(--ndw-spacing-xl) + var(--ndw-spacing-2xs))}.calendar-button{position:absolute;margin:var(--ndw-spacing-xs);right:0;top:0}.calendar-button[disabled]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500)}.tag-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--ndw-spacing-xs);padding-left:var(--ndw-spacing-xs);padding-right:var(--ndw-spacing-xs);padding-bottom:var(--ndw-spacing-xs)}\n"] }]
-        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], openCalendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openCalendarLabel", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateEnabledFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateEnabledFilter", required: false }] }], dateWithIndicatorFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateWithIndicatorFilter", required: false }] }], input: [{ type: i0.ViewChild, args: [i0.forwardRef(() => InputDirective), { isSignal: true }] }], popoverTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverTriggerDirective), { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+                    ], selector: 'ndw-datepicker', template: "<input\n  ndwInput\n  [value]=\"showTags() ? '' : formattedValue()\"\n  (blur)=\"onDateInput($event.target.value)\"\n  [min]=\"minDate()\"\n  [max]=\"maxDate()\"\n  [placeholder]=\"placeholder()\"\n  [required]=\"required()\"\n  [disabled]=\"disabled()\"\n/>\n\n<button\n  ndwButton\n  class=\"calendar-button\"\n  type=\"button\"\n  extra-small\n  tertiary\n  [ndwPopoverTrigger]=\"calendarTemplate\"\n  [toggleOnClick]=\"true\"\n  [attr.aria-label]=\"openCalendarLabel()\"\n  [disabled]=\"disabled()\"\n  (isOpenChange)=\"onPopoverOpenChange($event)\"\n>\n  <ndw-icon>calendar_month</ndw-icon>\n</button>\n\n<ng-template #calendarTemplate>\n  <ndw-calendar\n    [ngModel]=\"value()\"\n    (ngModelChange)=\"onDateSelected($event)\"\n    [mode]=\"mode()\"\n    [minDate]=\"minDate()\"\n    [maxDate]=\"maxDate()\"\n    [startAt]=\"startAt()\"\n    [dateEnabledFilter]=\"dateEnabledFilter()\"\n    [dateWithIndicatorFilter]=\"dateWithIndicatorFilter()\"\n    [elevated]=\"false\"\n    [showWeekNumbers]=\"showWeekNumbers()\"\n  />\n</ng-template>\n\n@if (showTags() && value().length > 0) {\n  <div class=\"tag-container\">\n    @for (value of value(); track value.getTime()) {\n      <ndw-tag (clicked)=\"removeDate(value)\">{{ value | date: 'd-M-yyyy' }}</ndw-tag>\n    }\n  </div>\n}\n", styles: [":host{position:relative;flex:1}input{padding-right:calc(var(--ndw-spacing-xl) + var(--ndw-spacing-2xs))}.calendar-button{position:absolute;margin:var(--ndw-spacing-xs);right:0;top:0}.calendar-button[disabled]{background-color:var(--ndw-color-grey-100);border-color:var(--ndw-color-grey-100);color:var(--ndw-color-grey-500)}.tag-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--ndw-spacing-xs);padding-left:var(--ndw-spacing-xs);padding-right:var(--ndw-spacing-xs);padding-bottom:var(--ndw-spacing-xs)}\n"] }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], openCalendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openCalendarLabel", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateEnabledFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateEnabledFilter", required: false }] }], dateWithIndicatorFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateWithIndicatorFilter", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], input: [{ type: i0.ViewChild, args: [i0.forwardRef(() => InputDirective), { isSignal: true }] }], popoverTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverTriggerDirective), { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class ErrorComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2293,13 +2357,13 @@ class AvatarComponent {
     initials = input(false, ...(ngDevMode ? [{ debugName: "initials" }] : []));
     color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AvatarComponent, isStandalone: true, selector: "ndw-avatar", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.color": "color()" } }, ngImport: i0, template: "<div class=\"content-wrapper\" role=\"img\" [attr.color]=\"color()\">\n  <ng-content />\n</div>\n\n@if (status() !== 'none') {\n  <div class=\"status-circle\" [ngClass]=\"{ approved: status() === 'approved' }\">\n    @if (status() === 'approved') {\n      <ndw-icon>check</ndw-icon>\n    }\n  </div>\n}\n", styles: [":host{position:relative;display:flex;width:fit-content}:host .content-wrapper{overflow:hidden;display:flex;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;font-weight:var(--ndw-font-weight-bold);color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300)}:host .content-wrapper[color=blue]{color:var(--ndw-color-info-500);background-color:var(--ndw-color-info-100)}:host .content-wrapper[color=orange]{color:var(--ndw-color-primary-700);background-color:var(--ndw-color-primary-050)}:host .content-wrapper[color=green]{color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-100)}:host .content-wrapper[color=red]{color:var(--ndw-color-critical-500);background-color:var(--ndw-color-critical-100)}:host .content-wrapper[color=yellow]{color:var(--ndw-color-warning-500);background-color:var(--ndw-color-warning-100)}:host .content-wrapper[color=purple]{color:var(--ndw-color-alternative-500);background-color:var(--ndw-color-alternative-100)}:host .content-wrapper ndw-icon{font-size:var(--ndw-font-size-lg)}:host .status-circle{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-500);background-color:var(--ndw-color-white)}:host .status-circle ndw-icon{font-size:var(--ndw-icon-size-md)}:host .status-circle.approved{border-color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-500);color:var(--ndw-color-white)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AvatarComponent, isStandalone: true, selector: "ndw-avatar", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.color": "color()" } }, ngImport: i0, template: "<div class=\"content-wrapper\" role=\"img\" [attr.color]=\"color()\">\n  <ng-content />\n</div>\n\n@if (status() !== 'none') {\n  <div\n    class=\"status-circle\"\n    [ngClass]=\"{ approved: status() === 'approved', declined: status() === 'declined' }\"\n  >\n    @if (status() === 'approved') {\n      <ndw-icon>check</ndw-icon>\n    } @else if (status() === 'declined') {\n      <ndw-icon>close</ndw-icon>\n    }\n  </div>\n}\n", styles: [":host{position:relative;display:flex;width:fit-content}:host .content-wrapper{overflow:hidden;display:flex;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;font-weight:var(--ndw-font-weight-bold);color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300)}:host .content-wrapper[color=blue]{color:var(--ndw-color-info-500);background-color:var(--ndw-color-info-100)}:host .content-wrapper[color=orange]{color:var(--ndw-color-primary-700);background-color:var(--ndw-color-primary-050)}:host .content-wrapper[color=green]{color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-100)}:host .content-wrapper[color=red]{color:var(--ndw-color-critical-500);background-color:var(--ndw-color-critical-100)}:host .content-wrapper[color=yellow]{color:var(--ndw-color-warning-500);background-color:var(--ndw-color-warning-100)}:host .content-wrapper[color=purple]{color:var(--ndw-color-alternative-500);background-color:var(--ndw-color-alternative-100)}:host .content-wrapper ndw-icon{font-size:var(--ndw-font-size-lg)}:host .status-circle{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-500);background-color:var(--ndw-color-white)}:host .status-circle ndw-icon{font-size:var(--ndw-icon-size-md)}:host .status-circle.approved{border-color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-500);color:var(--ndw-color-white)}:host .status-circle.declined{border-color:var(--ndw-color-critical-500);background-color:var(--ndw-color-critical-500);color:var(--ndw-color-white)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{ host: {
                         '[attr.color]': 'color()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-avatar', imports: [IconComponent, NgClass], template: "<div class=\"content-wrapper\" role=\"img\" [attr.color]=\"color()\">\n  <ng-content />\n</div>\n\n@if (status() !== 'none') {\n  <div class=\"status-circle\" [ngClass]=\"{ approved: status() === 'approved' }\">\n    @if (status() === 'approved') {\n      <ndw-icon>check</ndw-icon>\n    }\n  </div>\n}\n", styles: [":host{position:relative;display:flex;width:fit-content}:host .content-wrapper{overflow:hidden;display:flex;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;font-weight:var(--ndw-font-weight-bold);color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300)}:host .content-wrapper[color=blue]{color:var(--ndw-color-info-500);background-color:var(--ndw-color-info-100)}:host .content-wrapper[color=orange]{color:var(--ndw-color-primary-700);background-color:var(--ndw-color-primary-050)}:host .content-wrapper[color=green]{color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-100)}:host .content-wrapper[color=red]{color:var(--ndw-color-critical-500);background-color:var(--ndw-color-critical-100)}:host .content-wrapper[color=yellow]{color:var(--ndw-color-warning-500);background-color:var(--ndw-color-warning-100)}:host .content-wrapper[color=purple]{color:var(--ndw-color-alternative-500);background-color:var(--ndw-color-alternative-100)}:host .content-wrapper ndw-icon{font-size:var(--ndw-font-size-lg)}:host .status-circle{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-500);background-color:var(--ndw-color-white)}:host .status-circle ndw-icon{font-size:var(--ndw-icon-size-md)}:host .status-circle.approved{border-color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-500);color:var(--ndw-color-white)}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-avatar', imports: [IconComponent, NgClass], template: "<div class=\"content-wrapper\" role=\"img\" [attr.color]=\"color()\">\n  <ng-content />\n</div>\n\n@if (status() !== 'none') {\n  <div\n    class=\"status-circle\"\n    [ngClass]=\"{ approved: status() === 'approved', declined: status() === 'declined' }\"\n  >\n    @if (status() === 'approved') {\n      <ndw-icon>check</ndw-icon>\n    } @else if (status() === 'declined') {\n      <ndw-icon>close</ndw-icon>\n    }\n  </div>\n}\n", styles: [":host{position:relative;display:flex;width:fit-content}:host .content-wrapper{overflow:hidden;display:flex;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;font-weight:var(--ndw-font-weight-bold);color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300)}:host .content-wrapper[color=blue]{color:var(--ndw-color-info-500);background-color:var(--ndw-color-info-100)}:host .content-wrapper[color=orange]{color:var(--ndw-color-primary-700);background-color:var(--ndw-color-primary-050)}:host .content-wrapper[color=green]{color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-100)}:host .content-wrapper[color=red]{color:var(--ndw-color-critical-500);background-color:var(--ndw-color-critical-100)}:host .content-wrapper[color=yellow]{color:var(--ndw-color-warning-500);background-color:var(--ndw-color-warning-100)}:host .content-wrapper[color=purple]{color:var(--ndw-color-alternative-500);background-color:var(--ndw-color-alternative-100)}:host .content-wrapper ndw-icon{font-size:var(--ndw-font-size-lg)}:host .status-circle{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-500);background-color:var(--ndw-color-white)}:host .status-circle ndw-icon{font-size:var(--ndw-icon-size-md)}:host .status-circle.approved{border-color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-500);color:var(--ndw-color-white)}:host .status-circle.declined{border-color:var(--ndw-color-critical-500);background-color:var(--ndw-color-critical-500);color:var(--ndw-color-white)}\n"] }]
         }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 class BannerComponent {
@@ -2530,11 +2594,11 @@ class DropdownComponent {
         this.isOpenChange.emit(isOpen);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: DropdownComponent, isStandalone: true, selector: "ndw-dropdown", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, chevron: { classPropertyName: "chevron", publicName: "chevron", isSignal: true, isRequired: false, transformFunction: null }, buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: true, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, selectAmount: { classPropertyName: "selectAmount", publicName: "selectAmount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tagClicked: "tagClicked", isOpenChange: "isOpenChange" }, viewQueries: [{ propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  type=\"button\"\n  #dropdownButton\n  ndwButton\n  filter\n  [ndwPopoverTrigger]=\"dropdownContent\"\n  (isOpenChange)=\"isOpenChanged($event)\"\n  (keydown)=\"onKeyDown($event)\"\n  [disabled]=\"disabled()\"\n  aria-haspopup=\"dialog\"\n>\n  @if (prefixIcon(); as prefixIconName) {\n    <ndw-icon class=\"dropdown-prefix-icon\">{{ prefixIconName }}</ndw-icon>\n  }\n\n  {{ buttonText() }}\n\n  @if (selectAmount()) {\n    <ndw-tag\n      [attr.disabled]=\"disabled() ? true : null\"\n      (keydown)=\"onTagKeyDown($event)\"\n      (clicked)=\"onTagClicked($event)\"\n    >\n      {{ selectAmount() }}\n    </ndw-tag>\n  }\n  @if (chevron()) {\n    <div class=\"button-end\">\n      <ndw-icon class=\"button-icon\">{{ buttonIcon() }}</ndw-icon>\n    </div>\n  }\n</button>\n\n<ng-template #dropdownContent>\n  <div role=\"dialog\" (keydown.escape)=\"closeDropdown()\">\n    <ng-content />\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block}button{width:100%;display:flex}.button-end{display:flex;justify-content:flex-end;flex-grow:1;gap:var(--ndw-spacing-2xs)}.button-end ndw-icon{display:flex;align-items:center}.dropdown-prefix-icon{color:var(--ndw-color-grey-300)}div[role=dialog]{max-height:70vh;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: PopoverTriggerDirective, selector: "[ndwPopoverTrigger]", inputs: ["popoverPosition", "ndwPopoverTrigger", "toggleOnClick", "isOpen"], outputs: ["popoverToggled", "isOpenChange"], exportAs: ["ndwPopoverTrigger"] }, { kind: "component", type: TagComponent, selector: "ndw-tag", inputs: ["disabled", "suffixAriaLabel", "suffixIcon"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: DropdownComponent, isStandalone: true, selector: "ndw-dropdown", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, chevron: { classPropertyName: "chevron", publicName: "chevron", isSignal: true, isRequired: false, transformFunction: null }, buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: true, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, selectAmount: { classPropertyName: "selectAmount", publicName: "selectAmount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tagClicked: "tagClicked", isOpenChange: "isOpenChange" }, viewQueries: [{ propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  type=\"button\"\n  #dropdownButton\n  ndwButton\n  filter\n  [ndwPopoverTrigger]=\"dropdownContent\"\n  (isOpenChange)=\"isOpenChanged($event)\"\n  (keydown)=\"onKeyDown($event)\"\n  [disabled]=\"disabled()\"\n  aria-haspopup=\"dialog\"\n>\n  @if (prefixIcon(); as prefixIconName) {\n    <ndw-icon class=\"dropdown-prefix-icon\">{{ prefixIconName }}</ndw-icon>\n  }\n\n  {{ buttonText() }}\n\n  @if (selectAmount()) {\n    <ndw-tag\n      [attr.disabled]=\"disabled() ? true : null\"\n      (keydown)=\"onTagKeyDown($event)\"\n      (clicked)=\"onTagClicked($event)\"\n    >\n      {{ selectAmount() }}\n    </ndw-tag>\n  }\n  @if (chevron()) {\n    <div class=\"button-end\">\n      <span ndwButton extra-small tertiary>\n        <ndw-icon class=\"button-icon\">{{ buttonIcon() }}</ndw-icon>\n      </span>\n    </div>\n  }\n</button>\n\n<ng-template #dropdownContent>\n  <div role=\"dialog\" (keydown.escape)=\"closeDropdown()\">\n    <ng-content />\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block}button[filter]{width:100%;display:flex;padding-inline:var(--ndw-spacing-sm)}.button-end{margin-inline-start:auto}.button-end span{padding:0}.dropdown-prefix-icon{color:var(--ndw-color-grey-300)}div[role=dialog]{max-height:70vh;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: PopoverTriggerDirective, selector: "[ndwPopoverTrigger]", inputs: ["popoverPosition", "ndwPopoverTrigger", "toggleOnClick", "isOpen"], outputs: ["popoverToggled", "isOpenChange"], exportAs: ["ndwPopoverTrigger"] }, { kind: "component", type: TagComponent, selector: "ndw-tag", inputs: ["disabled", "suffixAriaLabel", "suffixIcon"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonDirective, IconComponent, PopoverTriggerDirective, TagComponent], selector: 'ndw-dropdown', template: "<button\n  type=\"button\"\n  #dropdownButton\n  ndwButton\n  filter\n  [ndwPopoverTrigger]=\"dropdownContent\"\n  (isOpenChange)=\"isOpenChanged($event)\"\n  (keydown)=\"onKeyDown($event)\"\n  [disabled]=\"disabled()\"\n  aria-haspopup=\"dialog\"\n>\n  @if (prefixIcon(); as prefixIconName) {\n    <ndw-icon class=\"dropdown-prefix-icon\">{{ prefixIconName }}</ndw-icon>\n  }\n\n  {{ buttonText() }}\n\n  @if (selectAmount()) {\n    <ndw-tag\n      [attr.disabled]=\"disabled() ? true : null\"\n      (keydown)=\"onTagKeyDown($event)\"\n      (clicked)=\"onTagClicked($event)\"\n    >\n      {{ selectAmount() }}\n    </ndw-tag>\n  }\n  @if (chevron()) {\n    <div class=\"button-end\">\n      <ndw-icon class=\"button-icon\">{{ buttonIcon() }}</ndw-icon>\n    </div>\n  }\n</button>\n\n<ng-template #dropdownContent>\n  <div role=\"dialog\" (keydown.escape)=\"closeDropdown()\">\n    <ng-content />\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block}button{width:100%;display:flex}.button-end{display:flex;justify-content:flex-end;flex-grow:1;gap:var(--ndw-spacing-2xs)}.button-end ndw-icon{display:flex;align-items:center}.dropdown-prefix-icon{color:var(--ndw-color-grey-300)}div[role=dialog]{max-height:70vh;display:flex;flex-direction:column}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonDirective, IconComponent, PopoverTriggerDirective, TagComponent], selector: 'ndw-dropdown', template: "<button\n  type=\"button\"\n  #dropdownButton\n  ndwButton\n  filter\n  [ndwPopoverTrigger]=\"dropdownContent\"\n  (isOpenChange)=\"isOpenChanged($event)\"\n  (keydown)=\"onKeyDown($event)\"\n  [disabled]=\"disabled()\"\n  aria-haspopup=\"dialog\"\n>\n  @if (prefixIcon(); as prefixIconName) {\n    <ndw-icon class=\"dropdown-prefix-icon\">{{ prefixIconName }}</ndw-icon>\n  }\n\n  {{ buttonText() }}\n\n  @if (selectAmount()) {\n    <ndw-tag\n      [attr.disabled]=\"disabled() ? true : null\"\n      (keydown)=\"onTagKeyDown($event)\"\n      (clicked)=\"onTagClicked($event)\"\n    >\n      {{ selectAmount() }}\n    </ndw-tag>\n  }\n  @if (chevron()) {\n    <div class=\"button-end\">\n      <span ndwButton extra-small tertiary>\n        <ndw-icon class=\"button-icon\">{{ buttonIcon() }}</ndw-icon>\n      </span>\n    </div>\n  }\n</button>\n\n<ng-template #dropdownContent>\n  <div role=\"dialog\" (keydown.escape)=\"closeDropdown()\">\n    <ng-content />\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block}button[filter]{width:100%;display:flex;padding-inline:var(--ndw-spacing-sm)}.button-end{margin-inline-start:auto}.button-end span{padding:0}.dropdown-prefix-icon{color:var(--ndw-color-grey-300)}div[role=dialog]{max-height:70vh;display:flex;flex-direction:column}\n"] }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], chevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevron", required: false }] }], buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: true }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], selectAmount: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAmount", required: false }] }], tagClicked: [{ type: i0.Output, args: ["tagClicked"] }], isOpenChange: [{ type: i0.Output, args: ["isOpenChange"] }], popoverTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverTriggerDirective), { isSignal: true }] }], dropdownButton: [{ type: i0.ViewChild, args: ['dropdownButton', { isSignal: true }] }] } });
 
 class EditBarComponent {
@@ -2993,7 +3057,7 @@ class MainNavigationMenuComponent {
         this.setActiveMobileItem(this.activeMobileItem() === item ? undefined : item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MainNavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MainNavigationMenuComponent, isStandalone: true, selector: "ndw-main-navigation-menu", inputs: { isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div cdkMenu class=\"menu\" [class.expanded]=\"isExpanded()\">\n  @for (item of items(); track getItemKey(item)) {\n    @if (!item.children) {\n      @if (item.callback) {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          (click)=\"closeMobileMenu(item)\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n          @if (!isExpanded() && item.notifications) {\n            <ndw-badge class=\"expanded-badge\" [value]=\"item.notifications\" />\n          }\n        </button>\n      } @else {\n        <a\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [queryParams]=\"item.queryParams\"\n          [routerLink]=\"item.path\"\n          (click)=\"closeMobileMenu()\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n        </a>\n      }\n    } @else {\n      @if (isMobile()) {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"activeMobileItem() === item || undefined\"\n          (click)=\"toggleActiveMobileItem(item)\"\n          (keydown)=\"handleMobileItemKeydown($event, item)\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          <ndw-icon class=\"suffix\">\n            {{ activeMobileItem() !== item ? 'arrow_drop_down' : 'arrow_drop_up' }}\n          </ndw-icon>\n        </button>\n        @if (activeMobileItem() === item) {\n          @for (subItem of item.children; track getItemKey(subItem)) {\n            @if (subItem.callback) {\n              <button\n                cdkMenuItem\n                ndwButton\n                menu\n                [attr.active]=\"subItem.active ? true : null\"\n                class=\"sub-menu-button\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </a>\n            }\n          }\n        }\n      } @else {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [cdkMenuTriggerFor]=\"subMenu\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n            <ndw-icon class=\"suffix\">arrow_right</ndw-icon>\n          }\n        </button>\n      }\n\n      <ng-template #subMenu>\n        <div cdkMenu class=\"sub-menu\">\n          @for (subItem of item.children; track getItemKey(subItem)) {\n            @if (subItem.callback) {\n              <button\n                cdkMenuItem\n                ndwButton\n                menu\n                [attr.active]=\"subItem.active ? true : null\"\n                (click)=\"subItem.callback()\"\n              >\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                [attr.active]=\"subItem.active ? true : null\"\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", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MainNavigationMenuComponent, isStandalone: true, selector: "ndw-main-navigation-menu", inputs: { isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div cdkMenu class=\"menu\" [class.expanded]=\"isExpanded()\">\n  @for (item of items(); track getItemKey(item)) {\n    @if (!item.children) {\n      @if (item.callback) {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          (click)=\"closeMobileMenu(item)\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n          @if (!isExpanded() && item.notifications) {\n            <ndw-badge class=\"expanded-badge\" [value]=\"item.notifications\" />\n          }\n        </button>\n      } @else {\n        <a\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          [queryParams]=\"item.queryParams\"\n          [routerLink]=\"item.path\"\n          (click)=\"closeMobileMenu()\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n        </a>\n      }\n    } @else {\n      @if (isMobile()) {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"activeMobileItem() === item || undefined\"\n          (click)=\"toggleActiveMobileItem(item)\"\n          (keydown)=\"handleMobileItemKeydown($event, item)\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          <ndw-icon class=\"suffix\">\n            {{ activeMobileItem() !== item ? 'arrow_drop_down' : 'arrow_drop_up' }}\n          </ndw-icon>\n        </button>\n        @if (activeMobileItem() === item) {\n          @for (subItem of item.children; track getItemKey(subItem)) {\n            @if (subItem.callback) {\n              <button\n                cdkMenuItem\n                ndwButton\n                menu\n                [attr.active]=\"subItem.active ? true : null\"\n                class=\"sub-menu-button\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </a>\n            }\n          }\n        }\n      } @else {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          [cdkMenuTriggerFor]=\"subMenu\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n            <ndw-icon class=\"suffix\">arrow_right</ndw-icon>\n          }\n        </button>\n      }\n\n      <ng-template #subMenu>\n        <div cdkMenu class=\"sub-menu\">\n          @for (subItem of item.children; track getItemKey(subItem)) {\n            @if (subItem.callback) {\n              <button\n                cdkMenuItem\n                ndwButton\n                menu\n                [attr.active]=\"subItem.active ? true : null\"\n                (click)=\"subItem.callback()\"\n              >\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                [attr.active]=\"subItem.active ? true : null\"\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", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TooltipDirective, selector: "[ndwTooltip]", inputs: ["ndwTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MainNavigationMenuComponent, decorators: [{
             type: Component,
@@ -3005,7 +3069,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          (click)=\"closeMobileMenu(item)\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n          @if (!isExpanded() && item.notifications) {\n            <ndw-badge class=\"expanded-badge\" [value]=\"item.notifications\" />\n          }\n        </button>\n      } @else {\n        <a\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [queryParams]=\"item.queryParams\"\n          [routerLink]=\"item.path\"\n          (click)=\"closeMobileMenu()\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n        </a>\n      }\n    } @else {\n      @if (isMobile()) {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"activeMobileItem() === item || undefined\"\n          (click)=\"toggleActiveMobileItem(item)\"\n          (keydown)=\"handleMobileItemKeydown($event, item)\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          <ndw-icon class=\"suffix\">\n            {{ activeMobileItem() !== item ? 'arrow_drop_down' : 'arrow_drop_up' }}\n          </ndw-icon>\n        </button>\n        @if (activeMobileItem() === item) {\n          @for (subItem of item.children; track getItemKey(subItem)) {\n            @if (subItem.callback) {\n              <button\n                cdkMenuItem\n                ndwButton\n                menu\n                [attr.active]=\"subItem.active ? true : null\"\n                class=\"sub-menu-button\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </a>\n            }\n          }\n        }\n      } @else {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [cdkMenuTriggerFor]=\"subMenu\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n            <ndw-icon class=\"suffix\">arrow_right</ndw-icon>\n          }\n        </button>\n      }\n\n      <ng-template #subMenu>\n        <div cdkMenu class=\"sub-menu\">\n          @for (subItem of item.children; track getItemKey(subItem)) {\n            @if (subItem.callback) {\n              <button\n                cdkMenuItem\n                ndwButton\n                menu\n                [attr.active]=\"subItem.active ? true : null\"\n                (click)=\"subItem.callback()\"\n              >\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                [attr.active]=\"subItem.active ? true : null\"\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"] }]
+                        TooltipDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-main-navigation-menu', template: "<div cdkMenu class=\"menu\" [class.expanded]=\"isExpanded()\">\n  @for (item of items(); track getItemKey(item)) {\n    @if (!item.children) {\n      @if (item.callback) {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          (click)=\"closeMobileMenu(item)\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n          @if (!isExpanded() && item.notifications) {\n            <ndw-badge class=\"expanded-badge\" [value]=\"item.notifications\" />\n          }\n        </button>\n      } @else {\n        <a\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          [queryParams]=\"item.queryParams\"\n          [routerLink]=\"item.path\"\n          (click)=\"closeMobileMenu()\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded() || isMobile()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          }\n        </a>\n      }\n    } @else {\n      @if (isMobile()) {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"activeMobileItem() === item || undefined\"\n          (click)=\"toggleActiveMobileItem(item)\"\n          (keydown)=\"handleMobileItemKeydown($event, item)\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n          <ndw-icon class=\"suffix\">\n            {{ activeMobileItem() !== item ? 'arrow_drop_down' : 'arrow_drop_up' }}\n          </ndw-icon>\n        </button>\n        @if (activeMobileItem() === item) {\n          @for (subItem of item.children; track getItemKey(subItem)) {\n            @if (subItem.callback) {\n              <button\n                cdkMenuItem\n                ndwButton\n                menu\n                [attr.active]=\"subItem.active ? true : null\"\n                class=\"sub-menu-button\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                class=\"sub-menu-button\"\n                [attr.active]=\"subItem.active ? true : null\"\n                [queryParams]=\"subItem.queryParams\"\n                [routerLink]=\"subItem.path\"\n                (click)=\"closeMobileMenu(subItem)\"\n              >\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </a>\n            }\n          }\n        }\n      } @else {\n        <button\n          cdkMenuItem\n          ndwButton\n          menu\n          [attr.active]=\"item.active ? true : null\"\n          [ndwTooltip]=\"!isExpanded() ? item.label : ''\"\n          [cdkMenuTriggerFor]=\"subMenu\"\n        >\n          <ndw-icon>{{ item.icon }}</ndw-icon>\n          @if (isExpanded()) {\n            <ng-container *ngTemplateOutlet=\"label; context: { $implicit: item }\" />\n            <ndw-icon class=\"suffix\">arrow_right</ndw-icon>\n          }\n        </button>\n      }\n\n      <ng-template #subMenu>\n        <div cdkMenu class=\"sub-menu\">\n          @for (subItem of item.children; track getItemKey(subItem)) {\n            @if (subItem.callback) {\n              <button\n                cdkMenuItem\n                ndwButton\n                menu\n                [attr.active]=\"subItem.active ? true : null\"\n                (click)=\"subItem.callback()\"\n              >\n                <ng-container *ngTemplateOutlet=\"label; context: { $implicit: subItem }\" />\n              </button>\n            } @else {\n              <a\n                cdkMenuItem\n                ndwButton\n                menu\n                [attr.active]=\"subItem.active ? true : null\"\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"] }]
         }], propDecorators: { isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 class MainNavigationComponent {
@@ -3449,13 +3514,13 @@ const MAP_LAYERS = {
 class MapLegendOptionComponent {
     option = input.required(...(ngDevMode ? [{ debugName: "option" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapLegendOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MapLegendOptionComponent, isStandalone: true, selector: "ndw-map-legend-option", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "listitem" } }, ngImport: i0, template: "@let opt = option();\n<div class=\"option-type\">\n  @switch (opt.type) {\n    @case ('circle') {\n      <div class=\"circle\" [style.--map-legend-option-color]=\"opt.color\"></div>\n    }\n\n    @case ('line') {\n      <div\n        class=\"line\"\n        [class.dashed]=\"opt.fillMode === 'dashed'\"\n        [style.--map-legend-option-color]=\"opt.color\"\n      ></div>\n    }\n\n    @case ('icon') {\n      <ndw-icon class=\"icon\">{{ opt.iconName }}</ndw-icon>\n    }\n\n    @case ('image') {\n      <img\n        class=\"image\"\n        [class.contain]=\"opt.objectFit === 'contain'\"\n        [src]=\"opt.src\"\n        [alt]=\"opt.label\"\n      />\n    }\n\n    @case ('polygon') {\n      <div class=\"polygon\" [style.--map-legend-option-color]=\"opt.color\">\n        <svg viewBox=\"0 0 20 20\">\n          <polygon points=\"10,1 1,19 19,19\" />\n        </svg>\n        <div class=\"dot\"></div>\n        <div class=\"dot\"></div>\n        <div class=\"dot\"></div>\n      </div>\n    }\n  }\n</div>\n\n<span class=\"ndw-paragraph-md option-label\">\n  {{ opt.label }}\n</span>\n", styles: ["*{box-sizing:border-box}:host{display:grid;grid-template-columns:1.5rem 1fr;align-items:flex-start;justify-content:flex-start;min-height:2rem;padding-block:var(--ndw-spacing-2xs);gap:var(--ndw-spacing-xs);color:var(--ndw-color-grey-600)}:host .option-type{display:flex;min-height:1.5rem;align-items:center;justify-content:center}:host .option-label{display:block;margin-block-start:var(--ndw-spacing-2xs)}:host .circle{border-radius:50%;width:var(--ndw-spacing-xs);aspect-ratio:1;background-color:var(--map-legend-option-color)}:host .line{--line-width: 14px;--line-height: 4px;width:var(--line-width);height:var(--line-height);background-color:var(--map-legend-option-color);border-radius:var(--ndw-border-radius-md)}:host .line.dashed{background-color:transparent;background-image:linear-gradient(to right,var(--map-legend-option-color) 20%,white 20%,white 37.5%,var(--map-legend-option-color) 37.5%,var(--map-legend-option-color) 62.5%,white 62.5%,white 80%,var(--map-legend-option-color) 80%);background-size:var(--line-width) var(--line-height);background-repeat:no-repeat}:host .icon{font-size:.875rem}:host .image{width:16px;height:16px;object-fit:cover;border-radius:var(--ndw-border-radius-sm)}:host .image.contain{object-fit:contain}:host .polygon{--polygon-size: 12px;--dot-size: 5px;position:relative;width:var(--polygon-size);height:var(--polygon-size)}:host .polygon svg{position:absolute;inset:0}:host .polygon svg polygon{fill:#fff;stroke:var(--map-legend-option-color);stroke-width:3}:host .polygon .dot{position:absolute;width:var(--dot-size);height:var(--dot-size);background-color:var(--map-legend-option-color);border-radius:50%}:host .polygon .dot:nth-child(2){top:0;left:50%;transform:translate(-50%,-50%)}:host .polygon .dot:nth-child(3){bottom:0;left:0;transform:translate(-50%,50%)}:host .polygon .dot:nth-child(4){bottom:0;right:0;transform:translate(50%,50%)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MapLegendOptionComponent, isStandalone: true, selector: "ndw-map-legend-option", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "listitem" } }, ngImport: i0, template: "@let opt = option();\n<div class=\"option-type\">\n  @switch (opt.type) {\n    @case ('circle') {\n      <div class=\"circle\" [style.--map-legend-option-color]=\"opt.color\"></div>\n    }\n\n    @case ('line') {\n      <div\n        class=\"line\"\n        [class.outline]=\"opt.outline\"\n        [class.dashed]=\"opt.fillMode === 'dashed'\"\n        [style.--map-legend-option-color]=\"opt.color\"\n      ></div>\n    }\n\n    @case ('icon') {\n      <ndw-icon class=\"icon\">{{ opt.iconName }}</ndw-icon>\n    }\n\n    @case ('image') {\n      <img\n        class=\"image\"\n        [class.contain]=\"opt.objectFit === 'contain'\"\n        [src]=\"opt.src\"\n        [alt]=\"opt.label\"\n      />\n    }\n\n    @case ('polygon') {\n      <div class=\"polygon\" [style.--map-legend-option-color]=\"opt.color\">\n        <svg viewBox=\"0 0 20 20\">\n          <polygon points=\"10,1 1,19 19,19\" />\n        </svg>\n        <div class=\"dot\"></div>\n        <div class=\"dot\"></div>\n        <div class=\"dot\"></div>\n      </div>\n    }\n\n    @case ('area') {\n      <div class=\"area\" [style.--map-legend-option-color]=\"opt.color\"></div>\n    }\n  }\n</div>\n\n<span class=\"ndw-paragraph-md option-label\">\n  {{ opt.label }}\n</span>\n", styles: ["*{box-sizing:border-box}:host{display:grid;grid-template-columns:1.5rem 1fr;align-items:flex-start;justify-content:flex-start;min-height:2rem;padding-block:var(--ndw-spacing-2xs);gap:var(--ndw-spacing-xs);color:var(--ndw-color-grey-600)}:host .option-type{display:flex;min-height:1.5rem;align-items:center;justify-content:center}:host .option-label{display:block;margin-block-start:var(--ndw-spacing-2xs)}:host .circle{border-radius:50%;width:var(--ndw-spacing-xs);aspect-ratio:1;background-color:var(--map-legend-option-color)}:host .line{--line-width: 18px;--line-height: 8px;width:var(--line-width);height:var(--line-height);background-color:var(--map-legend-option-color);border-radius:var(--ndw-border-radius-md)}:host .line.dashed{background-color:transparent;background-image:linear-gradient(to right,var(--map-legend-option-color) 20%,white 20%,white 37.5%,var(--map-legend-option-color) 37.5%,var(--map-legend-option-color) 62.5%,white 62.5%,white 80%,var(--map-legend-option-color) 80%);background-size:var(--line-width) var(--line-height);background-repeat:no-repeat}:host .line.outline{background-color:transparent;background-image:none;border:1.5px solid var(--map-legend-option-color)}:host .line.outline.dashed{border:1.5px dashed var(--map-legend-option-color)}:host .icon{font-size:.875rem}:host .image{width:16px;height:16px;object-fit:cover;border-radius:var(--ndw-border-radius-sm)}:host .image.contain{object-fit:contain}:host .polygon{--polygon-size: 12px;--dot-size: 5px;position:relative;width:var(--polygon-size);height:var(--polygon-size)}:host .polygon svg{position:absolute;inset:0}:host .polygon svg polygon{fill:#fff;stroke:var(--map-legend-option-color);stroke-width:3}:host .polygon .dot{position:absolute;width:var(--dot-size);height:var(--dot-size);background-color:var(--map-legend-option-color);border-radius:50%}:host .polygon .dot:nth-child(2){top:0;left:50%;transform:translate(-50%,-50%)}:host .polygon .dot:nth-child(3){bottom:0;left:0;transform:translate(-50%,50%)}:host .polygon .dot:nth-child(4){bottom:0;right:0;transform:translate(50%,50%)}:host .area{--area-size: 16px;background-color:var(--map-legend-option-color);width:var(--area-size);height:var(--area-size);clip-path:polygon(0 10%,0 75%,70% 100%,100% 25%,75% 0)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MapLegendOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ndw-map-legend-option', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], host: {
                         role: 'listitem',
-                    }, template: "@let opt = option();\n<div class=\"option-type\">\n  @switch (opt.type) {\n    @case ('circle') {\n      <div class=\"circle\" [style.--map-legend-option-color]=\"opt.color\"></div>\n    }\n\n    @case ('line') {\n      <div\n        class=\"line\"\n        [class.dashed]=\"opt.fillMode === 'dashed'\"\n        [style.--map-legend-option-color]=\"opt.color\"\n      ></div>\n    }\n\n    @case ('icon') {\n      <ndw-icon class=\"icon\">{{ opt.iconName }}</ndw-icon>\n    }\n\n    @case ('image') {\n      <img\n        class=\"image\"\n        [class.contain]=\"opt.objectFit === 'contain'\"\n        [src]=\"opt.src\"\n        [alt]=\"opt.label\"\n      />\n    }\n\n    @case ('polygon') {\n      <div class=\"polygon\" [style.--map-legend-option-color]=\"opt.color\">\n        <svg viewBox=\"0 0 20 20\">\n          <polygon points=\"10,1 1,19 19,19\" />\n        </svg>\n        <div class=\"dot\"></div>\n        <div class=\"dot\"></div>\n        <div class=\"dot\"></div>\n      </div>\n    }\n  }\n</div>\n\n<span class=\"ndw-paragraph-md option-label\">\n  {{ opt.label }}\n</span>\n", styles: ["*{box-sizing:border-box}:host{display:grid;grid-template-columns:1.5rem 1fr;align-items:flex-start;justify-content:flex-start;min-height:2rem;padding-block:var(--ndw-spacing-2xs);gap:var(--ndw-spacing-xs);color:var(--ndw-color-grey-600)}:host .option-type{display:flex;min-height:1.5rem;align-items:center;justify-content:center}:host .option-label{display:block;margin-block-start:var(--ndw-spacing-2xs)}:host .circle{border-radius:50%;width:var(--ndw-spacing-xs);aspect-ratio:1;background-color:var(--map-legend-option-color)}:host .line{--line-width: 14px;--line-height: 4px;width:var(--line-width);height:var(--line-height);background-color:var(--map-legend-option-color);border-radius:var(--ndw-border-radius-md)}:host .line.dashed{background-color:transparent;background-image:linear-gradient(to right,var(--map-legend-option-color) 20%,white 20%,white 37.5%,var(--map-legend-option-color) 37.5%,var(--map-legend-option-color) 62.5%,white 62.5%,white 80%,var(--map-legend-option-color) 80%);background-size:var(--line-width) var(--line-height);background-repeat:no-repeat}:host .icon{font-size:.875rem}:host .image{width:16px;height:16px;object-fit:cover;border-radius:var(--ndw-border-radius-sm)}:host .image.contain{object-fit:contain}:host .polygon{--polygon-size: 12px;--dot-size: 5px;position:relative;width:var(--polygon-size);height:var(--polygon-size)}:host .polygon svg{position:absolute;inset:0}:host .polygon svg polygon{fill:#fff;stroke:var(--map-legend-option-color);stroke-width:3}:host .polygon .dot{position:absolute;width:var(--dot-size);height:var(--dot-size);background-color:var(--map-legend-option-color);border-radius:50%}:host .polygon .dot:nth-child(2){top:0;left:50%;transform:translate(-50%,-50%)}:host .polygon .dot:nth-child(3){bottom:0;left:0;transform:translate(-50%,50%)}:host .polygon .dot:nth-child(4){bottom:0;right:0;transform:translate(50%,50%)}\n"] }]
+                    }, template: "@let opt = option();\n<div class=\"option-type\">\n  @switch (opt.type) {\n    @case ('circle') {\n      <div class=\"circle\" [style.--map-legend-option-color]=\"opt.color\"></div>\n    }\n\n    @case ('line') {\n      <div\n        class=\"line\"\n        [class.outline]=\"opt.outline\"\n        [class.dashed]=\"opt.fillMode === 'dashed'\"\n        [style.--map-legend-option-color]=\"opt.color\"\n      ></div>\n    }\n\n    @case ('icon') {\n      <ndw-icon class=\"icon\">{{ opt.iconName }}</ndw-icon>\n    }\n\n    @case ('image') {\n      <img\n        class=\"image\"\n        [class.contain]=\"opt.objectFit === 'contain'\"\n        [src]=\"opt.src\"\n        [alt]=\"opt.label\"\n      />\n    }\n\n    @case ('polygon') {\n      <div class=\"polygon\" [style.--map-legend-option-color]=\"opt.color\">\n        <svg viewBox=\"0 0 20 20\">\n          <polygon points=\"10,1 1,19 19,19\" />\n        </svg>\n        <div class=\"dot\"></div>\n        <div class=\"dot\"></div>\n        <div class=\"dot\"></div>\n      </div>\n    }\n\n    @case ('area') {\n      <div class=\"area\" [style.--map-legend-option-color]=\"opt.color\"></div>\n    }\n  }\n</div>\n\n<span class=\"ndw-paragraph-md option-label\">\n  {{ opt.label }}\n</span>\n", styles: ["*{box-sizing:border-box}:host{display:grid;grid-template-columns:1.5rem 1fr;align-items:flex-start;justify-content:flex-start;min-height:2rem;padding-block:var(--ndw-spacing-2xs);gap:var(--ndw-spacing-xs);color:var(--ndw-color-grey-600)}:host .option-type{display:flex;min-height:1.5rem;align-items:center;justify-content:center}:host .option-label{display:block;margin-block-start:var(--ndw-spacing-2xs)}:host .circle{border-radius:50%;width:var(--ndw-spacing-xs);aspect-ratio:1;background-color:var(--map-legend-option-color)}:host .line{--line-width: 18px;--line-height: 8px;width:var(--line-width);height:var(--line-height);background-color:var(--map-legend-option-color);border-radius:var(--ndw-border-radius-md)}:host .line.dashed{background-color:transparent;background-image:linear-gradient(to right,var(--map-legend-option-color) 20%,white 20%,white 37.5%,var(--map-legend-option-color) 37.5%,var(--map-legend-option-color) 62.5%,white 62.5%,white 80%,var(--map-legend-option-color) 80%);background-size:var(--line-width) var(--line-height);background-repeat:no-repeat}:host .line.outline{background-color:transparent;background-image:none;border:1.5px solid var(--map-legend-option-color)}:host .line.outline.dashed{border:1.5px dashed var(--map-legend-option-color)}:host .icon{font-size:.875rem}:host .image{width:16px;height:16px;object-fit:cover;border-radius:var(--ndw-border-radius-sm)}:host .image.contain{object-fit:contain}:host .polygon{--polygon-size: 12px;--dot-size: 5px;position:relative;width:var(--polygon-size);height:var(--polygon-size)}:host .polygon svg{position:absolute;inset:0}:host .polygon svg polygon{fill:#fff;stroke:var(--map-legend-option-color);stroke-width:3}:host .polygon .dot{position:absolute;width:var(--dot-size);height:var(--dot-size);background-color:var(--map-legend-option-color);border-radius:50%}:host .polygon .dot:nth-child(2){top:0;left:50%;transform:translate(-50%,-50%)}:host .polygon .dot:nth-child(3){bottom:0;left:0;transform:translate(-50%,50%)}:host .polygon .dot:nth-child(4){bottom:0;right:0;transform:translate(50%,50%)}:host .area{--area-size: 16px;background-color:var(--map-legend-option-color);width:var(--area-size);height:var(--area-size);clip-path:polygon(0 10%,0 75%,70% 100%,100% 25%,75% 0)}\n"] }]
         }], propDecorators: { option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: true }] }] } });
 
 class MapLegendGroupComponent {
@@ -3576,7 +3641,6 @@ const MODAL_COMPONENTS = [
 ];
 
 class MultiSelectComponent {
-    dropdownTrigger = viewChild.required(PopoverTriggerDirective);
     buttonText = input.required(...(ngDevMode ? [{ debugName: "buttonText" }] : []));
     searchLabel = input('Zoek in lijst.', ...(ngDevMode ? [{ debugName: "searchLabel" }] : []));
     prefixIcon = input('', ...(ngDevMode ? [{ debugName: "prefixIcon" }] : []));
@@ -3589,16 +3653,31 @@ class MultiSelectComponent {
         deselect: 'Deselecteer alles',
         select: 'Selecteer alles',
     }, ...(ngDevMode ? [{ debugName: "selectAllText" }] : []));
+    allowSelectAll = input(true, ...(ngDevMode ? [{ debugName: "allowSelectAll" }] : []));
     dataSource = model([], ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
-    lastCheckedElementId = model(...(ngDevMode ? [undefined, { debugName: "lastCheckedElementId" }] : []));
-    searchInputValue = model('', ...(ngDevMode ? [{ debugName: "searchInputValue" }] : []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-    dataSourceSorted = signal([], ...(ngDevMode ? [{ debugName: "dataSourceSorted" }] : []));
+    searchInputValue = linkedSignal({ ...(ngDevMode ? { debugName: "searchInputValue" } : {}), source: this.isOpen,
+        // Reset search input value when dropdown is opened
+        computation: () => '' });
+    dataSourceSorted = linkedSignal({ ...(ngDevMode ? { debugName: "dataSourceSorted" } : {}), source: this.dataSource,
+        computation: (dataSource) => dataSource.slice().sort((a, b) => Number(b.value) - Number(a.value)) });
+    dataSourceFiltered = computed(() => {
+        const data = this.dataSourceSorted();
+        const search = this.searchInputValue();
+        return data.filter((checkbox) => checkbox.label.toLowerCase().includes(search.toLowerCase()));
+    }, ...(ngDevMode ? [{ debugName: "dataSourceFiltered" }] : []));
+    lastCheckedElementId = computed(() => {
+        const dataSource = this.dataSource();
+        if (dataSource.some((checkbox) => !checkbox.value)) {
+            const lastChecked = [...dataSource].reverse().find((checkbox) => checkbox.value);
+            return lastChecked?.id ?? null;
+        }
+        else {
+            return null;
+        }
+    }, ...(ngDevMode ? [{ debugName: "lastCheckedElementId" }] : []));
     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) {
-        return value.toLowerCase().includes(this.searchInputValue().toLowerCase());
-    }
     searchInputChanged(event) {
         const input = event.target;
         this.searchInputValue.set(input.value);
@@ -3615,33 +3694,9 @@ class MultiSelectComponent {
                 value: selectAll,
             }));
         });
-        this.sortDataSource();
-    }
-    isOpenChanged(isOpen) {
-        this.isOpen.set(isOpen);
-        if (isOpen) {
-            this.searchInputValue.set('');
-            this.determineLastCheckedElement();
-            this.sortDataSource();
-        }
-    }
-    determineLastCheckedElement() {
-        if (this.dataSource().some((checkbox) => !checkbox.value)) {
-            const sourceList = [...this.dataSource()];
-            const lastChecked = sourceList.reverse().find((checkbox) => checkbox.value);
-            this.lastCheckedElementId.set(lastChecked ? lastChecked.id : null);
-        }
-        else {
-            this.lastCheckedElementId.set(null);
-        }
-    }
-    sortDataSource() {
-        this.dataSourceSorted.set(this.dataSource()
-            .slice()
-            .sort((a, b) => Number(b.value) - Number(a.value)));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MultiSelectComponent, isStandalone: true, selector: "ndw-multi-select", inputs: { buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: true, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null }, chevron: { classPropertyName: "chevron", publicName: "chevron", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectAmountHidden: { classPropertyName: "selectAmountHidden", publicName: "selectAmountHidden", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, 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 dataSourceSorted(); 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", "displayLargeNumbers", "buttonIcon", "buttonLabel", "checkable", "checkType", "collapsible", "disabled", "indented", "pillColor", "pillLabel", "prefixIcon", "showButton", "subtitle", "title", "checked", "expanded"], outputs: ["activeChange", "buttonClicked", "checkedChange", "expandedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MultiSelectComponent, isStandalone: true, selector: "ndw-multi-select", inputs: { buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: true, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null }, chevron: { classPropertyName: "chevron", publicName: "chevron", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectAmountHidden: { classPropertyName: "selectAmountHidden", publicName: "selectAmountHidden", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, allowSelectAll: { classPropertyName: "allowSelectAll", publicName: "allowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataSource: "dataSourceChange" }, ngImport: i0, template: "<ndw-dropdown\n  prefixIcon=\"filter_alt\"\n  [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\n  (tagClicked)=\"toggleSelectAll(false)\"\n  (isOpenChange)=\"isOpen.set($event)\"\n  [buttonText]=\"buttonText()\"\n  [disabled]=\"disabled()\"\n  [chevron]=\"chevron()\"\n  [prefixIcon]=\"prefixIcon()\"\n>\n  <ndw-form-field [label]=\"searchLabel()\" [hideLabel]=\"true\">\n    <input\n      ndwInput\n      type=\"search\"\n      [value]=\"searchInputValue()\"\n      (input)=\"searchInputChanged($event)\"\n      [placeholder]=\"searchPlaceholder()\"\n    />\n  </ndw-form-field>\n  @if (noSearchResults()) {\n    <div class=\"no-search-results\">\n      <ndw-icon>sentiment_dissatisfied</ndw-icon>\n      {{ noResultText() }}\n    </div>\n  } @else {\n    <ndw-list class=\"multi-select-container\">\n      @for (checkbox of dataSourceFiltered(); track checkbox.id) {\n        <ndw-list-item\n          [class.last-checked]=\"lastCheckedElementId() === checkbox.id\"\n          [checkable]=\"true\"\n          [checked]=\"checkbox.value\"\n          [prefixIcon]=\"checkbox.icon\"\n          [subtitle]=\"checkbox.label\"\n          [disabled]=\"checkbox.disabled === true\"\n          (checkedChange)=\"checkboxChanged(checkbox.id)\"\n        >\n          @if (checkbox.image && isOpen()) {\n            <img [src]=\"checkbox.image.src\" [alt]=\"checkbox.image.alt\" />\n          }\n        </ndw-list-item>\n      }\n    </ndw-list>\n  }\n  <div class=\"ndw-dialog-footer\">\n    @if (allowSelectAll()) {\n      @if (selectAmount() === dataSource().length) {\n        <button ndwLink (click)=\"toggleSelectAll(false)\">\n          {{ selectAllText().deselect }}\n        </button>\n      } @else {\n        <button ndwLink (click)=\"toggleSelectAll(true)\">\n          {{ selectAllText().select }}\n        </button>\n      }\n    }\n    <div class=\"ndw-dialog-footer-total\" aria-live=\"polite\">\n      Geselecteerd: <strong>{{ selectAmount() }}</strong>\n    </div>\n  </div>\n</ndw-dropdown>\n", styles: [":host{display:flex}ndw-form-field{margin-bottom:var(--ndw-spacing-md)}.no-search-results{display:grid;justify-items:center;width:var(--multi-select-default-width);margin:auto;padding:0 var(--ndw-spacing-md);font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}.multi-select-container{margin-inline:calc(var(--ndw-spacing-sm) * -1);max-height:var(--multi-select-default-width);min-width:var(--multi-select-default-width);overflow-y:auto}.multi-select-container ndw-list-item img{width:var(--ndw-spacing-lg)}.multi-select-container ndw-list-item.last-checked{height:auto;padding-bottom:var(--ndw-spacing-sm);margin-bottom:var(--ndw-spacing-sm);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200)}ndw-dropdown{width:inherit;height:calc(var(--ndw-spacing-2xl) + 2 * var(--ndw-border-size-sm))}.ndw-dialog-footer{display:flex;margin-top:var(--ndw-spacing-md);border-top:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);padding-top:var(--ndw-spacing-md);font-size:var(--ndw-font-size-xs)}.ndw-dialog-footer .ndw-dialog-footer-total{display:flex;flex:1;justify-content:end;gap:var(--ndw-spacing-2xs)}\n"], dependencies: [{ kind: "component", type: DropdownComponent, selector: "ndw-dropdown", inputs: ["disabled", "chevron", "buttonText", "prefixIcon", "selectAmount"], outputs: ["tagClicked", "isOpenChange"] }, { kind: "component", type: FormFieldComponent, selector: "ndw-form-field", inputs: ["label", "suffixAriaLabel", "hideLabel", "disabled", "error", "success", "info", "tooltip"], outputs: ["clearButtonClicked"] }, { kind: "directive", type: InputDirective, selector: "input[ndwInput], select[ndwInput], textarea[ndwInput]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "component", type: ListComponent, selector: "ndw-list", inputs: ["elevated"] }, { kind: "component", type: ListItemComponent, selector: "ndw-list-item", inputs: ["active", "badgeValue", "displayLargeNumbers", "buttonIcon", "buttonLabel", "checkable", "checkType", "collapsible", "disabled", "indented", "pillColor", "pillLabel", "prefixIcon", "showButton", "subtitle", "title", "checked", "expanded"], outputs: ["activeChange", "buttonClicked", "checkedChange", "expandedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -3652,8 +3707,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         IconComponent,
                         ListComponent,
                         ListItemComponent,
-                    ], selector: 'ndw-multi-select', template: "<ndw-dropdown\n  prefixIcon=\"filter_alt\"\n  [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\n  (tagClicked)=\"toggleSelectAll(false)\"\n  (isOpenChange)=\"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 dataSourceSorted(); 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"] }]
-        }], propDecorators: { dropdownTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverTriggerDirective), { isSignal: true }] }], buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: true }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultText", required: false }] }], chevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevron", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectAmountHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAmountHidden", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }, { type: i0.Output, args: ["dataSourceChange"] }], lastCheckedElementId: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastCheckedElementId", required: false }] }, { type: i0.Output, args: ["lastCheckedElementIdChange"] }], searchInputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchInputValue", required: false }] }, { type: i0.Output, args: ["searchInputValueChange"] }] } });
+                    ], selector: 'ndw-multi-select', template: "<ndw-dropdown\n  prefixIcon=\"filter_alt\"\n  [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\n  (tagClicked)=\"toggleSelectAll(false)\"\n  (isOpenChange)=\"isOpen.set($event)\"\n  [buttonText]=\"buttonText()\"\n  [disabled]=\"disabled()\"\n  [chevron]=\"chevron()\"\n  [prefixIcon]=\"prefixIcon()\"\n>\n  <ndw-form-field [label]=\"searchLabel()\" [hideLabel]=\"true\">\n    <input\n      ndwInput\n      type=\"search\"\n      [value]=\"searchInputValue()\"\n      (input)=\"searchInputChanged($event)\"\n      [placeholder]=\"searchPlaceholder()\"\n    />\n  </ndw-form-field>\n  @if (noSearchResults()) {\n    <div class=\"no-search-results\">\n      <ndw-icon>sentiment_dissatisfied</ndw-icon>\n      {{ noResultText() }}\n    </div>\n  } @else {\n    <ndw-list class=\"multi-select-container\">\n      @for (checkbox of dataSourceFiltered(); track checkbox.id) {\n        <ndw-list-item\n          [class.last-checked]=\"lastCheckedElementId() === checkbox.id\"\n          [checkable]=\"true\"\n          [checked]=\"checkbox.value\"\n          [prefixIcon]=\"checkbox.icon\"\n          [subtitle]=\"checkbox.label\"\n          [disabled]=\"checkbox.disabled === true\"\n          (checkedChange)=\"checkboxChanged(checkbox.id)\"\n        >\n          @if (checkbox.image && isOpen()) {\n            <img [src]=\"checkbox.image.src\" [alt]=\"checkbox.image.alt\" />\n          }\n        </ndw-list-item>\n      }\n    </ndw-list>\n  }\n  <div class=\"ndw-dialog-footer\">\n    @if (allowSelectAll()) {\n      @if (selectAmount() === dataSource().length) {\n        <button ndwLink (click)=\"toggleSelectAll(false)\">\n          {{ selectAllText().deselect }}\n        </button>\n      } @else {\n        <button ndwLink (click)=\"toggleSelectAll(true)\">\n          {{ selectAllText().select }}\n        </button>\n      }\n    }\n    <div class=\"ndw-dialog-footer-total\" aria-live=\"polite\">\n      Geselecteerd: <strong>{{ selectAmount() }}</strong>\n    </div>\n  </div>\n</ndw-dropdown>\n", styles: [":host{display:flex}ndw-form-field{margin-bottom:var(--ndw-spacing-md)}.no-search-results{display:grid;justify-items:center;width:var(--multi-select-default-width);margin:auto;padding:0 var(--ndw-spacing-md);font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}.multi-select-container{margin-inline:calc(var(--ndw-spacing-sm) * -1);max-height:var(--multi-select-default-width);min-width:var(--multi-select-default-width);overflow-y:auto}.multi-select-container ndw-list-item img{width:var(--ndw-spacing-lg)}.multi-select-container ndw-list-item.last-checked{height:auto;padding-bottom:var(--ndw-spacing-sm);margin-bottom:var(--ndw-spacing-sm);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200)}ndw-dropdown{width:inherit;height:calc(var(--ndw-spacing-2xl) + 2 * var(--ndw-border-size-sm))}.ndw-dialog-footer{display:flex;margin-top:var(--ndw-spacing-md);border-top:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);padding-top:var(--ndw-spacing-md);font-size:var(--ndw-font-size-xs)}.ndw-dialog-footer .ndw-dialog-footer-total{display:flex;flex:1;justify-content:end;gap:var(--ndw-spacing-2xs)}\n"] }]
+        }], propDecorators: { buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: true }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultText", required: false }] }], chevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevron", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectAmountHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAmountHidden", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], allowSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSelectAll", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }, { type: i0.Output, args: ["dataSourceChange"] }] } });
 
 class RouterBreadcrumbsComponent extends CoreRouterBreadcrumbsComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RouterBreadcrumbsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -4080,7 +4135,7 @@ class SwitcherComponent {
                 useExisting: forwardRef(() => SwitcherComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\n  class=\"switch-slider\"\n  [style.width]=\"sliderWidth\"\n  [style.height]=\"sliderHeight\"\n  [style.left]=\"vertical() ? null : sliderPosition\"\n  [style.top]=\"vertical() ? sliderPosition : null\"\n  [attr.aria-hidden]=\"true\"\n></div>\n\n@for (option of options(); track option.value; let i = $index) {\n  <label\n    class=\"switch-option\"\n    [class.active]=\"selectedValue() === option.value\"\n    [class.disabled]=\"option.disabled || disabled()\"\n    [attr.for]=\"generateId(i)\"\n  >\n    <input\n      type=\"radio\"\n      [id]=\"generateId(i)\"\n      [name]=\"componentName\"\n      [value]=\"option.value\"\n      [checked]=\"selectedValue() === option.value\"\n      [disabled]=\"option.disabled || disabled()\"\n      (change)=\"selectOption(option.value)\"\n      (keydown)=\"onKeyDown($event, i)\"\n      [attr.aria-describedby]=\"option.disabled ? generateId(i) + '-disabled' : null\"\n      class=\"switch-radio\"\n    />\n    @if (option.icon) {\n      <ndw-icon>{{ option.icon }}</ndw-icon>\n    }\n    <div class=\"switch-label\">{{ option.label }}</div>\n\n    @if (option.disabled) {\n      <span [id]=\"generateId(i) + '-disabled'\" class=\"sr-only\"> (disabled) </span>\n    }\n  </label>\n}\n", styles: [":host{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)}:host.vertical{flex-direction:column}.switch-slider{position:absolute;top:var(--ndw-spacing-2xs);height:calc(100% - var(--ndw-spacing-2xs) * 2);background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500);border-radius:var(--ndw-border-radius-sm);box-shadow:var(--ndw-elevation-content);transition:left var(--ndw-animation-speed-fast) ease,top var(--ndw-animation-speed-fast) ease,width var(--ndw-animation-speed-fast) ease}.switch-option{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ndw-spacing-2xs);padding:var(--ndw-spacing-sm);border:none;background:transparent;color:var(--ndw-color-grey-500);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-medium);cursor:pointer;border-radius:var(--ndw-border-radius-sm);transition:color var(--ndw-animation-speed-fast) ease;height:auto}.switch-option:hover:not(:disabled){color:var(--ndw-color-grey-700)}.switch-option.active{color:var(--ndw-color-grey-900)}.switch-option.active .switch-label{color:var(--ndw-color-text)}.switch-option.active ndw-icon{color:var(--ndw-color-primary-500)}.switch-option:disabled{cursor:not-allowed;opacity:.5}.switch-label{display:flex;flex:1;justify-content:center}.switch-radio{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.switch-radio:focus,.switch-radio:focus-visible{outline:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div\n  class=\"switch-slider\"\n  [style.width]=\"sliderWidth\"\n  [style.height]=\"sliderHeight\"\n  [style.left]=\"vertical() ? null : sliderPosition\"\n  [style.top]=\"vertical() ? sliderPosition : null\"\n  [attr.aria-hidden]=\"true\"\n></div>\n\n@for (option of options(); track option.value; let i = $index) {\n  <label\n    class=\"switch-option\"\n    [class.active]=\"selectedValue() === option.value\"\n    [class.disabled]=\"option.disabled || disabled()\"\n    [attr.for]=\"generateId(i)\"\n  >\n    <input\n      type=\"radio\"\n      [id]=\"generateId(i)\"\n      [name]=\"componentName\"\n      [value]=\"option.value\"\n      [checked]=\"selectedValue() === option.value\"\n      [disabled]=\"option.disabled || disabled()\"\n      (change)=\"selectOption(option.value)\"\n      (keydown)=\"onKeyDown($event, i)\"\n      [attr.aria-describedby]=\"option.disabled ? generateId(i) + '-disabled' : null\"\n      class=\"switch-radio\"\n    />\n    @if (option.icon) {\n      <ndw-icon>{{ option.icon }}</ndw-icon>\n    }\n    <div class=\"switch-label\">{{ option.label }}</div>\n\n    @if (option.disabled) {\n      <span [id]=\"generateId(i) + '-disabled'\" class=\"sr-only\"> (disabled) </span>\n    }\n  </label>\n}\n", styles: [":host{position:relative;display:flex;background-color:var(--ndw-color-grey-100);border-radius:var(--ndw-border-radius-md);padding:var(--ndw-spacing-2xs);border:var(--ndw-border-size-sm) solid transparent}:host:focus-within{outline:var(--ndw-border-size-sm) solid var(--ndw-color-info-500)}:host.disabled{opacity:.5;cursor:not-allowed;background-color:var(--ndw-color-grey-50)}:host.vertical{flex-direction:column}.switch-slider{position:absolute;top:var(--ndw-spacing-2xs);height:calc(100% - var(--ndw-spacing-2xs) * 2);background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500);border-radius:var(--ndw-border-radius-sm);box-shadow:var(--ndw-elevation-content);transition:left var(--ndw-animation-speed-fast) ease,top var(--ndw-animation-speed-fast) ease,width var(--ndw-animation-speed-fast) ease}.switch-option{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ndw-spacing-2xs);padding:var(--ndw-spacing-sm);border:none;background:transparent;color:var(--ndw-color-grey-500);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-medium);cursor:pointer;border-radius:var(--ndw-border-radius-sm);transition:color var(--ndw-animation-speed-fast) ease;height:auto}.switch-option:hover:not(:disabled){color:var(--ndw-color-grey-700)}.switch-option.active{color:var(--ndw-color-grey-900)}.switch-option.active .switch-label{color:var(--ndw-color-text)}.switch-option.active ndw-icon{color:var(--ndw-color-primary-500)}.switch-option:disabled{cursor:not-allowed;opacity:.5}.switch-label{display:flex;flex:1;justify-content:center}.switch-radio{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.switch-radio:focus,.switch-radio:focus-visible{outline:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SwitcherComponent, decorators: [{
             type: Component,
@@ -4094,7 +4149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         role: 'radiogroup',
                         '[class.disabled]': 'disabled()',
                         '[class.vertical]': 'vertical()',
-                    }, template: "<div\n  class=\"switch-slider\"\n  [style.width]=\"sliderWidth\"\n  [style.height]=\"sliderHeight\"\n  [style.left]=\"vertical() ? null : sliderPosition\"\n  [style.top]=\"vertical() ? sliderPosition : null\"\n  [attr.aria-hidden]=\"true\"\n></div>\n\n@for (option of options(); track option.value; let i = $index) {\n  <label\n    class=\"switch-option\"\n    [class.active]=\"selectedValue() === option.value\"\n    [class.disabled]=\"option.disabled || disabled()\"\n    [attr.for]=\"generateId(i)\"\n  >\n    <input\n      type=\"radio\"\n      [id]=\"generateId(i)\"\n      [name]=\"componentName\"\n      [value]=\"option.value\"\n      [checked]=\"selectedValue() === option.value\"\n      [disabled]=\"option.disabled || disabled()\"\n      (change)=\"selectOption(option.value)\"\n      (keydown)=\"onKeyDown($event, i)\"\n      [attr.aria-describedby]=\"option.disabled ? generateId(i) + '-disabled' : null\"\n      class=\"switch-radio\"\n    />\n    @if (option.icon) {\n      <ndw-icon>{{ option.icon }}</ndw-icon>\n    }\n    <div class=\"switch-label\">{{ option.label }}</div>\n\n    @if (option.disabled) {\n      <span [id]=\"generateId(i) + '-disabled'\" class=\"sr-only\"> (disabled) </span>\n    }\n  </label>\n}\n", styles: [":host{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)}:host.vertical{flex-direction:column}.switch-slider{position:absolute;top:var(--ndw-spacing-2xs);height:calc(100% - var(--ndw-spacing-2xs) * 2);background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500);border-radius:var(--ndw-border-radius-sm);box-shadow:var(--ndw-elevation-content);transition:left var(--ndw-animation-speed-fast) ease,top var(--ndw-animation-speed-fast) ease,width var(--ndw-animation-speed-fast) ease}.switch-option{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ndw-spacing-2xs);padding:var(--ndw-spacing-sm);border:none;background:transparent;color:var(--ndw-color-grey-500);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-medium);cursor:pointer;border-radius:var(--ndw-border-radius-sm);transition:color var(--ndw-animation-speed-fast) ease;height:auto}.switch-option:hover:not(:disabled){color:var(--ndw-color-grey-700)}.switch-option.active{color:var(--ndw-color-grey-900)}.switch-option.active .switch-label{color:var(--ndw-color-text)}.switch-option.active ndw-icon{color:var(--ndw-color-primary-500)}.switch-option:disabled{cursor:not-allowed;opacity:.5}.switch-label{display:flex;flex:1;justify-content:center}.switch-radio{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.switch-radio:focus,.switch-radio:focus-visible{outline:none}\n"] }]
+                    }, template: "<div\n  class=\"switch-slider\"\n  [style.width]=\"sliderWidth\"\n  [style.height]=\"sliderHeight\"\n  [style.left]=\"vertical() ? null : sliderPosition\"\n  [style.top]=\"vertical() ? sliderPosition : null\"\n  [attr.aria-hidden]=\"true\"\n></div>\n\n@for (option of options(); track option.value; let i = $index) {\n  <label\n    class=\"switch-option\"\n    [class.active]=\"selectedValue() === option.value\"\n    [class.disabled]=\"option.disabled || disabled()\"\n    [attr.for]=\"generateId(i)\"\n  >\n    <input\n      type=\"radio\"\n      [id]=\"generateId(i)\"\n      [name]=\"componentName\"\n      [value]=\"option.value\"\n      [checked]=\"selectedValue() === option.value\"\n      [disabled]=\"option.disabled || disabled()\"\n      (change)=\"selectOption(option.value)\"\n      (keydown)=\"onKeyDown($event, i)\"\n      [attr.aria-describedby]=\"option.disabled ? generateId(i) + '-disabled' : null\"\n      class=\"switch-radio\"\n    />\n    @if (option.icon) {\n      <ndw-icon>{{ option.icon }}</ndw-icon>\n    }\n    <div class=\"switch-label\">{{ option.label }}</div>\n\n    @if (option.disabled) {\n      <span [id]=\"generateId(i) + '-disabled'\" class=\"sr-only\"> (disabled) </span>\n    }\n  </label>\n}\n", styles: [":host{position:relative;display:flex;background-color:var(--ndw-color-grey-100);border-radius:var(--ndw-border-radius-md);padding:var(--ndw-spacing-2xs);border:var(--ndw-border-size-sm) solid transparent}:host:focus-within{outline:var(--ndw-border-size-sm) solid var(--ndw-color-info-500)}:host.disabled{opacity:.5;cursor:not-allowed;background-color:var(--ndw-color-grey-50)}:host.vertical{flex-direction:column}.switch-slider{position:absolute;top:var(--ndw-spacing-2xs);height:calc(100% - var(--ndw-spacing-2xs) * 2);background-color:var(--ndw-color-white);border:var(--ndw-border-size-sm) solid var(--ndw-color-primary-500);border-radius:var(--ndw-border-radius-sm);box-shadow:var(--ndw-elevation-content);transition:left var(--ndw-animation-speed-fast) ease,top var(--ndw-animation-speed-fast) ease,width var(--ndw-animation-speed-fast) ease}.switch-option{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ndw-spacing-2xs);padding:var(--ndw-spacing-sm);border:none;background:transparent;color:var(--ndw-color-grey-500);font-size:var(--ndw-font-size-sm);font-weight:var(--ndw-font-weight-medium);cursor:pointer;border-radius:var(--ndw-border-radius-sm);transition:color var(--ndw-animation-speed-fast) ease;height:auto}.switch-option:hover:not(:disabled){color:var(--ndw-color-grey-700)}.switch-option.active{color:var(--ndw-color-grey-900)}.switch-option.active .switch-label{color:var(--ndw-color-text)}.switch-option.active ndw-icon{color:var(--ndw-color-primary-500)}.switch-option:disabled{cursor:not-allowed;opacity:.5}.switch-label{display:flex;flex:1;justify-content:center}.switch-radio{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.switch-radio:focus,.switch-radio:focus-visible{outline:none}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }, { type: i0.Output, args: ["selectedValueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
 class TabComponent {
@@ -4266,11 +4321,11 @@ class TabGroupComponent {
         return tabCount - 1;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: TabGroupComponent, isStandalone: true, selector: "ndw-tab-group", inputs: { hasPadding: { classPropertyName: "hasPadding", publicName: "hasPadding", isSignal: true, isRequired: false, transformFunction: null }, activeTabId: { classPropertyName: "activeTabId", publicName: "activeTabId", isSignal: true, isRequired: false, transformFunction: null }, inlinePadding: { classPropertyName: "inlinePadding", publicName: "inlinePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTabId: "activeTabIdChange" }, queries: [{ propertyName: "_tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "_tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }, { propertyName: "_tabGroupContainer", first: true, predicate: ["tabGroupContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tab-group-wrapper\">\n  <div #tabGroupContainer class=\"tab-group\" role=\"tablist\" [class.with-padding]=\"hasPadding()\">\n    @for (tab of tabs(); track tab.id(); let i = $index) {\n      <button\n        #tabButton\n        class=\"tab-button\"\n        role=\"tab\"\n        type=\"button\"\n        [attr.active]=\"tab.active ? true : undefined\"\n        [attr.aria-controls]=\"'tab-panel-' + tab.id\"\n        [attr.aria-selected]=\"tab.active\"\n        [disabled]=\"tab.disabled() ? true : null\"\n        [id]=\"'tab-' + tab.id\"\n        [tabindex]=\"tab.active ? 0 : -1\"\n        (click)=\"selectTab(i)\"\n        (keydown)=\"onKeyDown($event)\"\n      >\n        @if (tab.icon()) {\n          <ndw-icon size=\"sm\">{{ tab.icon() }}</ndw-icon>\n        }\n        {{ tab.title() }}\n        @if (tab.hasError()) {\n          <ndw-badge [size]=\"'small'\" [variant]=\"'error'\" />\n        }\n      </button>\n    }\n  </div>\n\n  @if (canScrollLeft()) {\n    <button\n      ndwButton\n      secondary\n      alternative\n      extra-small\n      class=\"scroll-arrow scroll-arrow-left\"\n      type=\"button\"\n      aria-label=\"Scroll naar links\"\n      tabindex=\"-1\"\n      (click)=\"scrollTo('left')\"\n    >\n      <ndw-icon>chevron_left</ndw-icon>\n    </button>\n  }\n\n  @if (canScrollRight()) {\n    <button\n      ndwButton\n      secondary\n      alternative\n      extra-small\n      class=\"scroll-arrow scroll-arrow-right\"\n      type=\"button\"\n      aria-label=\"Scroll naar rechts\"\n      tabindex=\"-1\"\n      (click)=\"scrollTo('right')\"\n    >\n      <ndw-icon>chevron_right</ndw-icon>\n    </button>\n  }\n</div>\n@for (tab of tabs(); track tab.id(); let i = $index) {\n  <div\n    class=\"tab-content\"\n    [ngClass]=\"{ 'is-hidden': !tab.active }\"\n    [id]=\"'tab-panel-' + tab.id\"\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"'tab-' + tab.id\"\n    [tabindex]=\"0\"\n  >\n    <ng-template [cdkPortalOutlet]=\"tab.content\"></ng-template>\n  </div>\n}\n", styles: [".tab-group-wrapper{position:relative}.tab-group{display:flex;gap:var(--ndw-spacing-lg);overflow:auto hidden;padding-left:0;position:relative;flex:1;scrollbar-width:none;-ms-overflow-style:none;background:linear-gradient(to bottom,transparent calc(100% - var(--ndw-border-size-sm)),var(--ndw-color-grey-200) calc(100% - var(--ndw-border-size-sm))) 0 0/100vw 100% no-repeat}.tab-group::-webkit-scrollbar{display:none}.tab-group.with-padding{padding-inline:var(--ndw-spacing-lg)}.scroll-arrow{position:absolute;top:var(--ndw-spacing-sm);border-radius:100%;background-color:var(--ndw-color-white);color:var(--ndw-color-grey-600);transition:color .2s ease-out}.scroll-arrow:hover{background-color:var(--ndw-color-grey-50)!important}.scroll-arrow.scroll-arrow-left{left:0}.scroll-arrow.scroll-arrow-right{right:0}.tab-button{background:none;border:none;border-bottom:var(--ndw-border-size-lg) solid transparent;color:var(--ndw-color-grey-400);cursor:pointer;display:flex;align-items:center;gap:var(--ndw-spacing-xs);font-weight:700;padding:var(--ndw-spacing-md) 0;position:relative;transition:border-bottom .2s ease-out,color .2s ease-out;white-space:nowrap;flex-shrink:0}.tab-button ndw-badge{position:absolute;top:0rem;right:-1rem;pointer-events:none}.tab-button ndw-badge.small{top:.25rem;right:-.75rem}.tab-button:disabled{pointer-events:none;opacity:.5}.tab-button:hover{border-color:var(--ndw-color-grey-500);color:var(--ndw-color-grey-500)}.tab-button:active,.tab-button:focus{border-color:transparent;color:var(--ndw-color-grey-400)}.tab-button[aria-selected=true]{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-button[aria-selected=true]:hover{border-color:var(--ndw-color-primary-hover);color:var(--ndw-color-primary-hover)}.tab-button[aria-selected=true]:active{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-content{padding-top:var(--ndw-spacing-md)}.tab-content.is-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BadgeComponent, selector: "ndw-badge" }, { kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: TabGroupComponent, isStandalone: true, selector: "ndw-tab-group", inputs: { hasPadding: { classPropertyName: "hasPadding", publicName: "hasPadding", isSignal: true, isRequired: false, transformFunction: null }, activeTabId: { classPropertyName: "activeTabId", publicName: "activeTabId", isSignal: true, isRequired: false, transformFunction: null }, inlinePadding: { classPropertyName: "inlinePadding", publicName: "inlinePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTabId: "activeTabIdChange" }, queries: [{ propertyName: "_tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "_tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }, { propertyName: "_tabGroupContainer", first: true, predicate: ["tabGroupContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tab-group-wrapper\">\n  <div #tabGroupContainer class=\"tab-group\" role=\"tablist\" [class.with-padding]=\"hasPadding()\">\n    @for (tab of tabs(); track tab.id(); let i = $index) {\n      <button\n        #tabButton\n        class=\"tab-button\"\n        role=\"tab\"\n        type=\"button\"\n        [attr.active]=\"tab.active ? true : undefined\"\n        [attr.aria-controls]=\"'tab-panel-' + tab.id()\"\n        [attr.aria-selected]=\"tab.active\"\n        [disabled]=\"tab.disabled() ? true : null\"\n        [id]=\"'tab-' + tab.id()\"\n        [tabindex]=\"tab.active ? 0 : -1\"\n        (click)=\"selectTab(i)\"\n        (keydown)=\"onKeyDown($event)\"\n      >\n        @if (tab.icon()) {\n          <ndw-icon size=\"sm\">{{ tab.icon() }}</ndw-icon>\n        }\n        {{ tab.title() }}\n        @if (tab.hasError()) {\n          <ndw-badge [size]=\"'small'\" [variant]=\"'error'\" />\n        }\n      </button>\n    }\n  </div>\n\n  @if (canScrollLeft()) {\n    <button\n      ndwButton\n      secondary\n      alternative\n      extra-small\n      class=\"scroll-arrow scroll-arrow-left\"\n      type=\"button\"\n      aria-label=\"Scroll naar links\"\n      tabindex=\"-1\"\n      (click)=\"scrollTo('left')\"\n    >\n      <ndw-icon>chevron_left</ndw-icon>\n    </button>\n  }\n\n  @if (canScrollRight()) {\n    <button\n      ndwButton\n      secondary\n      alternative\n      extra-small\n      class=\"scroll-arrow scroll-arrow-right\"\n      type=\"button\"\n      aria-label=\"Scroll naar rechts\"\n      tabindex=\"-1\"\n      (click)=\"scrollTo('right')\"\n    >\n      <ndw-icon>chevron_right</ndw-icon>\n    </button>\n  }\n</div>\n@for (tab of tabs(); track tab.id(); let i = $index) {\n  <div\n    class=\"tab-content\"\n    [ngClass]=\"{ 'is-hidden': !tab.active }\"\n    [id]=\"'tab-panel-' + tab.id()\"\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"'tab-' + tab.id()\"\n    [tabindex]=\"0\"\n  >\n    <ng-template [cdkPortalOutlet]=\"tab.content\"></ng-template>\n  </div>\n}\n", styles: [".tab-group-wrapper{position:relative}.tab-group{display:flex;gap:var(--ndw-spacing-lg);overflow:auto hidden;padding-left:0;position:relative;flex:1;scrollbar-width:none;-ms-overflow-style:none;background:linear-gradient(to bottom,transparent calc(100% - var(--ndw-border-size-sm)),var(--ndw-color-grey-200) calc(100% - var(--ndw-border-size-sm))) 0 0/100vw 100% no-repeat}.tab-group::-webkit-scrollbar{display:none}.tab-group.with-padding{padding-inline:var(--ndw-spacing-lg)}.scroll-arrow{position:absolute;top:var(--ndw-spacing-sm);border-radius:100%;background-color:var(--ndw-color-white);color:var(--ndw-color-grey-600);transition:color .2s ease-out}.scroll-arrow:hover{background-color:var(--ndw-color-grey-50)!important}.scroll-arrow.scroll-arrow-left{left:0}.scroll-arrow.scroll-arrow-right{right:0}.tab-button{background:none;border:none;border-bottom:var(--ndw-border-size-lg) solid transparent;color:var(--ndw-color-grey-400);cursor:pointer;display:flex;align-items:center;gap:var(--ndw-spacing-xs);font-weight:700;padding:var(--ndw-spacing-md) 0;position:relative;transition:border-bottom .2s ease-out,color .2s ease-out;white-space:nowrap;flex-shrink:0}.tab-button ndw-badge{position:absolute;top:0rem;right:-1rem;pointer-events:none}.tab-button ndw-badge.small{top:.25rem;right:-.75rem}.tab-button:disabled{pointer-events:none;opacity:.5}.tab-button:hover{border-color:var(--ndw-color-grey-500);color:var(--ndw-color-grey-500)}.tab-button:active,.tab-button:focus{border-color:transparent;color:var(--ndw-color-grey-400)}.tab-button[aria-selected=true]{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-button[aria-selected=true]:hover{border-color:var(--ndw-color-primary-hover);color:var(--ndw-color-primary-hover)}.tab-button[aria-selected=true]:active{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-content{padding-top:var(--ndw-spacing-md)}.tab-content.is-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BadgeComponent, selector: "ndw-badge" }, { kind: "directive", type: ButtonDirective, selector: "[ndwButton]" }, { kind: "component", type: IconComponent, selector: "ndw-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TabGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ndw-tab-group', imports: [CdkPortalOutlet, NgClass, BadgeComponent, ButtonDirective, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tab-group-wrapper\">\n  <div #tabGroupContainer class=\"tab-group\" role=\"tablist\" [class.with-padding]=\"hasPadding()\">\n    @for (tab of tabs(); track tab.id(); let i = $index) {\n      <button\n        #tabButton\n        class=\"tab-button\"\n        role=\"tab\"\n        type=\"button\"\n        [attr.active]=\"tab.active ? true : undefined\"\n        [attr.aria-controls]=\"'tab-panel-' + tab.id\"\n        [attr.aria-selected]=\"tab.active\"\n        [disabled]=\"tab.disabled() ? true : null\"\n        [id]=\"'tab-' + tab.id\"\n        [tabindex]=\"tab.active ? 0 : -1\"\n        (click)=\"selectTab(i)\"\n        (keydown)=\"onKeyDown($event)\"\n      >\n        @if (tab.icon()) {\n          <ndw-icon size=\"sm\">{{ tab.icon() }}</ndw-icon>\n        }\n        {{ tab.title() }}\n        @if (tab.hasError()) {\n          <ndw-badge [size]=\"'small'\" [variant]=\"'error'\" />\n        }\n      </button>\n    }\n  </div>\n\n  @if (canScrollLeft()) {\n    <button\n      ndwButton\n      secondary\n      alternative\n      extra-small\n      class=\"scroll-arrow scroll-arrow-left\"\n      type=\"button\"\n      aria-label=\"Scroll naar links\"\n      tabindex=\"-1\"\n      (click)=\"scrollTo('left')\"\n    >\n      <ndw-icon>chevron_left</ndw-icon>\n    </button>\n  }\n\n  @if (canScrollRight()) {\n    <button\n      ndwButton\n      secondary\n      alternative\n      extra-small\n      class=\"scroll-arrow scroll-arrow-right\"\n      type=\"button\"\n      aria-label=\"Scroll naar rechts\"\n      tabindex=\"-1\"\n      (click)=\"scrollTo('right')\"\n    >\n      <ndw-icon>chevron_right</ndw-icon>\n    </button>\n  }\n</div>\n@for (tab of tabs(); track tab.id(); let i = $index) {\n  <div\n    class=\"tab-content\"\n    [ngClass]=\"{ 'is-hidden': !tab.active }\"\n    [id]=\"'tab-panel-' + tab.id\"\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"'tab-' + tab.id\"\n    [tabindex]=\"0\"\n  >\n    <ng-template [cdkPortalOutlet]=\"tab.content\"></ng-template>\n  </div>\n}\n", styles: [".tab-group-wrapper{position:relative}.tab-group{display:flex;gap:var(--ndw-spacing-lg);overflow:auto hidden;padding-left:0;position:relative;flex:1;scrollbar-width:none;-ms-overflow-style:none;background:linear-gradient(to bottom,transparent calc(100% - var(--ndw-border-size-sm)),var(--ndw-color-grey-200) calc(100% - var(--ndw-border-size-sm))) 0 0/100vw 100% no-repeat}.tab-group::-webkit-scrollbar{display:none}.tab-group.with-padding{padding-inline:var(--ndw-spacing-lg)}.scroll-arrow{position:absolute;top:var(--ndw-spacing-sm);border-radius:100%;background-color:var(--ndw-color-white);color:var(--ndw-color-grey-600);transition:color .2s ease-out}.scroll-arrow:hover{background-color:var(--ndw-color-grey-50)!important}.scroll-arrow.scroll-arrow-left{left:0}.scroll-arrow.scroll-arrow-right{right:0}.tab-button{background:none;border:none;border-bottom:var(--ndw-border-size-lg) solid transparent;color:var(--ndw-color-grey-400);cursor:pointer;display:flex;align-items:center;gap:var(--ndw-spacing-xs);font-weight:700;padding:var(--ndw-spacing-md) 0;position:relative;transition:border-bottom .2s ease-out,color .2s ease-out;white-space:nowrap;flex-shrink:0}.tab-button ndw-badge{position:absolute;top:0rem;right:-1rem;pointer-events:none}.tab-button ndw-badge.small{top:.25rem;right:-.75rem}.tab-button:disabled{pointer-events:none;opacity:.5}.tab-button:hover{border-color:var(--ndw-color-grey-500);color:var(--ndw-color-grey-500)}.tab-button:active,.tab-button:focus{border-color:transparent;color:var(--ndw-color-grey-400)}.tab-button[aria-selected=true]{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-button[aria-selected=true]:hover{border-color:var(--ndw-color-primary-hover);color:var(--ndw-color-primary-hover)}.tab-button[aria-selected=true]:active{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-content{padding-top:var(--ndw-spacing-md)}.tab-content.is-hidden{display:none}\n"] }]
+            args: [{ selector: 'ndw-tab-group', imports: [CdkPortalOutlet, NgClass, BadgeComponent, ButtonDirective, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tab-group-wrapper\">\n  <div #tabGroupContainer class=\"tab-group\" role=\"tablist\" [class.with-padding]=\"hasPadding()\">\n    @for (tab of tabs(); track tab.id(); let i = $index) {\n      <button\n        #tabButton\n        class=\"tab-button\"\n        role=\"tab\"\n        type=\"button\"\n        [attr.active]=\"tab.active ? true : undefined\"\n        [attr.aria-controls]=\"'tab-panel-' + tab.id()\"\n        [attr.aria-selected]=\"tab.active\"\n        [disabled]=\"tab.disabled() ? true : null\"\n        [id]=\"'tab-' + tab.id()\"\n        [tabindex]=\"tab.active ? 0 : -1\"\n        (click)=\"selectTab(i)\"\n        (keydown)=\"onKeyDown($event)\"\n      >\n        @if (tab.icon()) {\n          <ndw-icon size=\"sm\">{{ tab.icon() }}</ndw-icon>\n        }\n        {{ tab.title() }}\n        @if (tab.hasError()) {\n          <ndw-badge [size]=\"'small'\" [variant]=\"'error'\" />\n        }\n      </button>\n    }\n  </div>\n\n  @if (canScrollLeft()) {\n    <button\n      ndwButton\n      secondary\n      alternative\n      extra-small\n      class=\"scroll-arrow scroll-arrow-left\"\n      type=\"button\"\n      aria-label=\"Scroll naar links\"\n      tabindex=\"-1\"\n      (click)=\"scrollTo('left')\"\n    >\n      <ndw-icon>chevron_left</ndw-icon>\n    </button>\n  }\n\n  @if (canScrollRight()) {\n    <button\n      ndwButton\n      secondary\n      alternative\n      extra-small\n      class=\"scroll-arrow scroll-arrow-right\"\n      type=\"button\"\n      aria-label=\"Scroll naar rechts\"\n      tabindex=\"-1\"\n      (click)=\"scrollTo('right')\"\n    >\n      <ndw-icon>chevron_right</ndw-icon>\n    </button>\n  }\n</div>\n@for (tab of tabs(); track tab.id(); let i = $index) {\n  <div\n    class=\"tab-content\"\n    [ngClass]=\"{ 'is-hidden': !tab.active }\"\n    [id]=\"'tab-panel-' + tab.id()\"\n    role=\"tabpanel\"\n    [attr.aria-labelledby]=\"'tab-' + tab.id()\"\n    [tabindex]=\"0\"\n  >\n    <ng-template [cdkPortalOutlet]=\"tab.content\"></ng-template>\n  </div>\n}\n", styles: [".tab-group-wrapper{position:relative}.tab-group{display:flex;gap:var(--ndw-spacing-lg);overflow:auto hidden;padding-left:0;position:relative;flex:1;scrollbar-width:none;-ms-overflow-style:none;background:linear-gradient(to bottom,transparent calc(100% - var(--ndw-border-size-sm)),var(--ndw-color-grey-200) calc(100% - var(--ndw-border-size-sm))) 0 0/100vw 100% no-repeat}.tab-group::-webkit-scrollbar{display:none}.tab-group.with-padding{padding-inline:var(--ndw-spacing-lg)}.scroll-arrow{position:absolute;top:var(--ndw-spacing-sm);border-radius:100%;background-color:var(--ndw-color-white);color:var(--ndw-color-grey-600);transition:color .2s ease-out}.scroll-arrow:hover{background-color:var(--ndw-color-grey-50)!important}.scroll-arrow.scroll-arrow-left{left:0}.scroll-arrow.scroll-arrow-right{right:0}.tab-button{background:none;border:none;border-bottom:var(--ndw-border-size-lg) solid transparent;color:var(--ndw-color-grey-400);cursor:pointer;display:flex;align-items:center;gap:var(--ndw-spacing-xs);font-weight:700;padding:var(--ndw-spacing-md) 0;position:relative;transition:border-bottom .2s ease-out,color .2s ease-out;white-space:nowrap;flex-shrink:0}.tab-button ndw-badge{position:absolute;top:0rem;right:-1rem;pointer-events:none}.tab-button ndw-badge.small{top:.25rem;right:-.75rem}.tab-button:disabled{pointer-events:none;opacity:.5}.tab-button:hover{border-color:var(--ndw-color-grey-500);color:var(--ndw-color-grey-500)}.tab-button:active,.tab-button:focus{border-color:transparent;color:var(--ndw-color-grey-400)}.tab-button[aria-selected=true]{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-button[aria-selected=true]:hover{border-color:var(--ndw-color-primary-hover);color:var(--ndw-color-primary-hover)}.tab-button[aria-selected=true]:active{border-color:var(--ndw-color-primary);color:var(--ndw-color-primary)}.tab-content{padding-top:var(--ndw-spacing-md)}.tab-content.is-hidden{display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], _tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }], _tabGroupContainer: [{ type: i0.ViewChild, args: ['tabGroupContainer', { isSignal: true }] }], hasPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPadding", required: false }] }], activeTabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTabId", required: false }] }, { type: i0.Output, args: ["activeTabIdChange"] }], inlinePadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlinePadding", required: false }] }] } });
 
 const ndwAgGridTheme = {