@ndwnu/design-system 13.0.2 → 13.1.1

package/fesm2022/ndwnu-design-system.mjs

@@ -2357,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\"\n    [ngClass]=\"{ approved: status() === 'approved', declined: status() === 'declined' }\">\n    @if (status() === 'approved') {\n      <ndw-icon>check</ndw-icon>\n    } @else if (status() === 'declined') {\n      <ndw-icon>close</ndw-icon>\n    }\n  </div>\n}\n", styles: [":host{position:relative;display:flex;width:fit-content}:host .content-wrapper{overflow:hidden;display:flex;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;font-weight:var(--ndw-font-weight-bold);color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300)}:host .content-wrapper[color=blue]{color:var(--ndw-color-info-500);background-color:var(--ndw-color-info-100)}:host .content-wrapper[color=orange]{color:var(--ndw-color-primary-700);background-color:var(--ndw-color-primary-050)}:host .content-wrapper[color=green]{color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-100)}:host .content-wrapper[color=red]{color:var(--ndw-color-critical-500);background-color:var(--ndw-color-critical-100)}:host .content-wrapper[color=yellow]{color:var(--ndw-color-warning-500);background-color:var(--ndw-color-warning-100)}:host .content-wrapper[color=purple]{color:var(--ndw-color-alternative-500);background-color:var(--ndw-color-alternative-100)}:host .content-wrapper ndw-icon{font-size:var(--ndw-font-size-lg)}:host .status-circle{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-500);background-color:var(--ndw-color-white)}:host .status-circle ndw-icon{font-size:var(--ndw-icon-size-md)}:host .status-circle.approved{border-color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-500);color:var(--ndw-color-white)}:host .status-circle.declined{border-color:var(--ndw-color-critical-500);background-color:var(--ndw-color-critical-500);color:var(--ndw-color-white)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AvatarComponent, isStandalone: true, selector: "ndw-avatar", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.color": "color()" } }, ngImport: i0, template: "<div class=\"content-wrapper\" role=\"img\" [attr.color]=\"color()\">\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\"\n    [ngClass]=\"{ approved: status() === 'approved', declined: status() === 'declined' }\">\n    @if (status() === 'approved') {\n      <ndw-icon>check</ndw-icon>\n    } @else if (status() === 'declined') {\n      <ndw-icon>close</ndw-icon>\n    }\n  </div>\n}\n", styles: [":host{position:relative;display:flex;width:fit-content}:host .content-wrapper{overflow:hidden;display:flex;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;font-weight:var(--ndw-font-weight-bold);color:var(--ndw-color-grey-700);background-color:var(--ndw-color-grey-300)}:host .content-wrapper[color=blue]{color:var(--ndw-color-info-500);background-color:var(--ndw-color-info-100)}:host .content-wrapper[color=orange]{color:var(--ndw-color-primary-700);background-color:var(--ndw-color-primary-050)}:host .content-wrapper[color=green]{color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-100)}:host .content-wrapper[color=red]{color:var(--ndw-color-critical-500);background-color:var(--ndw-color-critical-100)}:host .content-wrapper[color=yellow]{color:var(--ndw-color-warning-500);background-color:var(--ndw-color-warning-100)}:host .content-wrapper[color=purple]{color:var(--ndw-color-alternative-500);background-color:var(--ndw-color-alternative-100)}:host .content-wrapper ndw-icon{font-size:var(--ndw-font-size-lg)}:host .status-circle{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;border:var(--ndw-border-size-sm) solid var(--ndw-color-grey-500);background-color:var(--ndw-color-white)}:host .status-circle ndw-icon{font-size:var(--ndw-icon-size-md)}:host .status-circle.approved{border-color:var(--ndw-color-positive-500);background-color:var(--ndw-color-positive-500);color:var(--ndw-color-white)}:host .status-circle.declined{border-color:var(--ndw-color-critical-500);background-color:var(--ndw-color-critical-500);color:var(--ndw-color-white)}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ndw-avatar', imports: [IconComponent, NgClass], template: "<div class=\"content-wrapper\" role=\"img\" [attr.color]=\"color()\">\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 {
@@ -2594,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,6 +2993,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
             args: [{ selector: 'ndw-key-value-list', imports: [IconComponent, NgTemplateOutlet, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dl\n  [class.striped]=\"hasZebraStripes()\"\n  [class.fluid]=\"fluid()\"\n  [class.font-md]=\"fontSize() === 'md'\"\n  [class.font-lg]=\"fontSize() === 'lg'\"\n>\n  @for (keyValueRow of normalizedData(); track keyValueRow.key) {\n    <dt>\n      <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.key }\" />\n    </dt>\n    <dd>\n      <ng-container *ngTemplateOutlet=\"cellData; context: { $implicit: keyValueRow.value }\" />\n    </dd>\n  }\n</dl>\n\n<ng-template #cellData let-data>\n  @if (data.url) {\n    <a ndwLink target=\"_blank\" [href]=\"data.url\">\n      {{ data.label }}\n      <ndw-icon size=\"sm\">open_in_new</ndw-icon>\n    </a>\n  } @else {\n    {{ data.label }}\n  }\n\n  @if (data.tooltip) {\n    <ndw-icon class=\"tooltip-icon\" size=\"sm\" [ndwTooltip]=\"data.tooltip\">info</ndw-icon>\n  }\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl{display:grid;width:fit-content;grid-template-columns:auto auto;margin:0}dl dt,dl dd{display:flex;align-items:center;gap:var(--ndw-spacing-2xs);padding-block:var(--ndw-spacing-xs);margin:0}dl dt .tooltip-icon,dl dd .tooltip-icon{color:var(--ndw-color-info-500)}dl dt{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%;padding-inline-end:var(--ndw-spacing-2xs)}dl dd{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;padding-inline-start:var(--ndw-spacing-2xs)}dl.font-md dt{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}dl.font-md dd{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl.font-lg dt{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}dl.font-lg dd{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}dl.striped dt{padding-inline-start:var(--ndw-spacing-xs)}dl.striped dd{padding-inline-end:var(--ndw-spacing-xs)}dl.striped dt:nth-child(4n+1),dl.striped dd:nth-child(4n+2){background-color:var(--ndw-color-grey-100)}dl.fluid{width:100%}\n"] }]
         }] });
 
+const LANGUAGE_FLAGS = {
+    NL: 'images/flags/nl.svg',
+    EN: 'images/flags/en.svg',
+    FR: 'images/flags/fr.svg',
+    DE: 'images/flags/de.svg',
+};
+const LANGUAGE_LABELS = {
+    NL: 'Nederlands',
+    EN: 'English',
+    FR: 'Français',
+    DE: 'Deutsch',
+};
+
+class LanguageSwitcherComponent {
+    languages = input(['NL', 'EN'], ...(ngDevMode ? [{ debugName: "languages" }] : []));
+    selected = model('NL', ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    displayMode = input('flag-only', ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
+    flagSrc(lang) {
+        return LANGUAGE_FLAGS[lang] ?? '';
+    }
+    labelFor(lang) {
+        const language = lang;
+        switch (this.displayMode()) {
+            case 'abbreviation':
+                return language;
+            case 'full':
+                return LANGUAGE_LABELS[language];
+            default:
+                return '';
+        }
+    }
+    selectLanguage(lang) {
+        this.selected.set(lang);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LanguageSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: LanguageSwitcherComponent, isStandalone: true, selector: "ndw-language-switcher", inputs: { languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, ngImport: i0, template: "<button type=\"button\" class=\"flag-trigger\" [ndwPopoverTrigger]=\"languageList\">\n  <img class=\"flag\" [src]=\"flagSrc(selected())\" [alt]=\"selected()\" />\n  @if (labelFor(selected()); as label) {\n    <span class=\"label\">{{ label }}</span>\n  }\n</button>\n\n<ng-template #languageList>\n  @for (lang of languages(); track lang) {\n    <button\n      type=\"button\"\n      class=\"language-option\"\n      [class.active]=\"selected() === lang\"\n      ndwPopoverCloseTrigger\n      (click)=\"selectLanguage(lang)\"\n    >\n      <img class=\"flag\" [src]=\"flagSrc(lang)\" [alt]=\"lang\" />\n      @if (labelFor(lang); as label) {\n        <span class=\"label\">{{ label }}</span>\n      }\n    </button>\n  }\n</ng-template>\n", styles: [".flag-trigger,.language-option{display:flex;align-items:center;gap:var(--ndw-spacing-2xs);padding:var(--ndw-spacing-2xs);border:none;background:transparent;border-radius:var(--ndw-border-radius-sm);font-size:var(--ndw-font-size-sm)}.flag-trigger:hover,.language-option:hover{background-color:var(--ndw-color-grey-100)}.language-option{gap:var(--ndw-spacing-xs);padding:var(--ndw-spacing-xs) var(--ndw-spacing-sm)}.language-option.active{color:var(--ndw-color-primary-500);font-weight:var(--ndw-font-weight-bold)}.flag{width:20px;height:20px}\n"], dependencies: [{ kind: "directive", type: PopoverTriggerDirective, selector: "[ndwPopoverTrigger]", inputs: ["popoverPosition", "ndwPopoverTrigger", "toggleOnClick", "isOpen"], outputs: ["popoverToggled", "isOpenChange"], exportAs: ["ndwPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LanguageSwitcherComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ndw-language-switcher', imports: [PopoverTriggerDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" class=\"flag-trigger\" [ndwPopoverTrigger]=\"languageList\">\n  <img class=\"flag\" [src]=\"flagSrc(selected())\" [alt]=\"selected()\" />\n  @if (labelFor(selected()); as label) {\n    <span class=\"label\">{{ label }}</span>\n  }\n</button>\n\n<ng-template #languageList>\n  @for (lang of languages(); track lang) {\n    <button\n      type=\"button\"\n      class=\"language-option\"\n      [class.active]=\"selected() === lang\"\n      ndwPopoverCloseTrigger\n      (click)=\"selectLanguage(lang)\"\n    >\n      <img class=\"flag\" [src]=\"flagSrc(lang)\" [alt]=\"lang\" />\n      @if (labelFor(lang); as label) {\n        <span class=\"label\">{{ label }}</span>\n      }\n    </button>\n  }\n</ng-template>\n", styles: [".flag-trigger,.language-option{display:flex;align-items:center;gap:var(--ndw-spacing-2xs);padding:var(--ndw-spacing-2xs);border:none;background:transparent;border-radius:var(--ndw-border-radius-sm);font-size:var(--ndw-font-size-sm)}.flag-trigger:hover,.language-option:hover{background-color:var(--ndw-color-grey-100)}.language-option{gap:var(--ndw-spacing-xs);padding:var(--ndw-spacing-xs) var(--ndw-spacing-sm)}.language-option.active{color:var(--ndw-color-primary-500);font-weight:var(--ndw-font-weight-bold)}.flag{width:20px;height:20px}\n"] }]
+        }], propDecorators: { languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }] } });
+
 class MainNavigationHeaderComponent {
     applicationName = input.required(...(ngDevMode ? [{ debugName: "applicationName" }] : []));
     isExpanded = input.required(...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
@@ -3696,7 +3738,7 @@ class MultiSelectComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: MultiSelectComponent, isStandalone: true, selector: "ndw-multi-select", inputs: { buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: true, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultText: { classPropertyName: "noResultText", publicName: "noResultText", isSignal: true, isRequired: false, transformFunction: null }, chevron: { classPropertyName: "chevron", publicName: "chevron", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectAmountHidden: { classPropertyName: "selectAmountHidden", publicName: "selectAmountHidden", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, allowSelectAll: { classPropertyName: "allowSelectAll", publicName: "allowSelectAll", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataSource: "dataSourceChange" }, ngImport: i0, template: "<ndw-dropdown\n  prefixIcon=\"filter_alt\"\n  [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\n  (tagClicked)=\"toggleSelectAll(false)\"\n  (isOpenChange)=\"isOpen.set($event)\"\n  [buttonText]=\"buttonText()\"\n  [disabled]=\"disabled()\"\n  [chevron]=\"chevron()\"\n  [prefixIcon]=\"prefixIcon()\"\n>\n  <ndw-form-field [label]=\"searchLabel()\" [hideLabel]=\"true\">\n    <input\n      ndwInput\n      type=\"search\"\n      [value]=\"searchInputValue()\"\n      (input)=\"searchInputChanged($event)\"\n      [placeholder]=\"searchPlaceholder()\"\n    />\n  </ndw-form-field>\n  @if (noSearchResults()) {\n    <div class=\"no-search-results\">\n      <ndw-icon>sentiment_dissatisfied</ndw-icon>\n      {{ noResultText() }}\n    </div>\n  } @else {\n    <ndw-list class=\"multi-select-container\">\n      @for (checkbox of dataSourceFiltered(); track checkbox.id) {\n        <ndw-list-item\n          [class.last-checked]=\"lastCheckedElementId() === checkbox.id\"\n          [checkable]=\"true\"\n          [checked]=\"checkbox.value\"\n          [prefixIcon]=\"checkbox.icon\"\n          [subtitle]=\"checkbox.label\"\n          [disabled]=\"checkbox.disabled === true\"\n          (checkedChange)=\"checkboxChanged(checkbox.id)\"\n        >\n          @if (checkbox.image && isOpen()) {\n            <img [src]=\"checkbox.image.src\" [alt]=\"checkbox.image.alt\" />\n          }\n        </ndw-list-item>\n      }\n    </ndw-list>\n  }\n  <div class=\"ndw-dialog-footer\">\n    @if (allowSelectAll()) {\n      @if (selectAmount() === dataSource().length) {\n        <button ndwLink (click)=\"toggleSelectAll(false)\">\n          {{ selectAllText().deselect }}\n        </button>\n      } @else {\n        <button ndwLink (click)=\"toggleSelectAll(true)\">\n          {{ selectAllText().select }}\n        </button>\n      }\n    }\n    <div class=\"ndw-dialog-footer-total\" aria-live=\"polite\">\n      Geselecteerd: <strong>{{ selectAmount() }}</strong>\n    </div>\n  </div>\n</ndw-dropdown>\n", styles: [":host{display:flex}ndw-form-field{margin-bottom:var(--ndw-spacing-md)}.no-search-results{display:grid;justify-items:center;width:var(--multi-select-default-width);margin:auto;padding:0 var(--ndw-spacing-md);font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}.multi-select-container{margin-inline:calc(var(--ndw-spacing-sm) * -1);max-height:var(--multi-select-default-width);min-width:var(--multi-select-default-width);overflow-y:auto}.multi-select-container ndw-list-item img{width:var(--ndw-spacing-lg)}.multi-select-container ndw-list-item.last-checked{height:auto;padding-bottom:var(--ndw-spacing-sm);margin-bottom:var(--ndw-spacing-sm);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200)}ndw-dropdown{width:inherit}.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,
@@ -3707,7 +3749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         IconComponent,
                         ListComponent,
                         ListItemComponent,
-                    ], selector: 'ndw-multi-select', template: "<ndw-dropdown\n  prefixIcon=\"filter_alt\"\n  [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\n  (tagClicked)=\"toggleSelectAll(false)\"\n  (isOpenChange)=\"isOpen.set($event)\"\n  [buttonText]=\"buttonText()\"\n  [disabled]=\"disabled()\"\n  [chevron]=\"chevron()\"\n  [prefixIcon]=\"prefixIcon()\"\n>\n  <ndw-form-field [label]=\"searchLabel()\" [hideLabel]=\"true\">\n    <input\n      ndwInput\n      type=\"search\"\n      [value]=\"searchInputValue()\"\n      (input)=\"searchInputChanged($event)\"\n      [placeholder]=\"searchPlaceholder()\"\n    />\n  </ndw-form-field>\n  @if (noSearchResults()) {\n    <div class=\"no-search-results\">\n      <ndw-icon>sentiment_dissatisfied</ndw-icon>\n      {{ noResultText() }}\n    </div>\n  } @else {\n    <ndw-list class=\"multi-select-container\">\n      @for (checkbox of dataSourceFiltered(); track checkbox.id) {\n        <ndw-list-item\n          [class.last-checked]=\"lastCheckedElementId() === checkbox.id\"\n          [checkable]=\"true\"\n          [checked]=\"checkbox.value\"\n          [prefixIcon]=\"checkbox.icon\"\n          [subtitle]=\"checkbox.label\"\n          [disabled]=\"checkbox.disabled === true\"\n          (checkedChange)=\"checkboxChanged(checkbox.id)\"\n        >\n          @if (checkbox.image && isOpen()) {\n            <img [src]=\"checkbox.image.src\" [alt]=\"checkbox.image.alt\" />\n          }\n        </ndw-list-item>\n      }\n    </ndw-list>\n  }\n  <div class=\"ndw-dialog-footer\">\n    @if (allowSelectAll()) {\n      @if (selectAmount() === dataSource().length) {\n        <button ndwLink (click)=\"toggleSelectAll(false)\">\n          {{ selectAllText().deselect }}\n        </button>\n      } @else {\n        <button ndwLink (click)=\"toggleSelectAll(true)\">\n          {{ selectAllText().select }}\n        </button>\n      }\n    }\n    <div class=\"ndw-dialog-footer-total\" aria-live=\"polite\">\n      Geselecteerd: <strong>{{ selectAmount() }}</strong>\n    </div>\n  </div>\n</ndw-dropdown>\n", styles: [":host{display:flex}ndw-form-field{margin-bottom:var(--ndw-spacing-md)}.no-search-results{display:grid;justify-items:center;width:var(--multi-select-default-width);margin:auto;padding:0 var(--ndw-spacing-md);font-size:var(--ndw-font-size-sm);text-align:center;color:var(--ndw-color-grey-400)}.multi-select-container{margin-inline:calc(var(--ndw-spacing-sm) * -1);max-height:var(--multi-select-default-width);min-width:var(--multi-select-default-width);overflow-y:auto}.multi-select-container ndw-list-item img{width:var(--ndw-spacing-lg)}.multi-select-container ndw-list-item.last-checked{height:auto;padding-bottom:var(--ndw-spacing-sm);margin-bottom:var(--ndw-spacing-sm);border-bottom:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200)}ndw-dropdown{width:inherit}.ndw-dialog-footer{display:flex;margin-top:var(--ndw-spacing-md);border-top:var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);padding-top:var(--ndw-spacing-md);font-size:var(--ndw-font-size-xs)}.ndw-dialog-footer .ndw-dialog-footer-total{display:flex;flex:1;justify-content:end;gap:var(--ndw-spacing-2xs)}\n"] }]
+                    ], selector: 'ndw-multi-select', template: "<ndw-dropdown\n  prefixIcon=\"filter_alt\"\n  [selectAmount]=\"selectAmountHidden() ? 0 : selectAmount()\"\n  (tagClicked)=\"toggleSelectAll(false)\"\n  (isOpenChange)=\"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 {
@@ -4135,7 +4177,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,
@@ -4149,7 +4191,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 {
@@ -4321,11 +4363,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 = {
@@ -4357,6 +4399,7 @@ class ToastComponent {
     duration = input(5000, ...(ngDevMode ? [{ debugName: "duration" }] : []));
     paused = input(false, ...(ngDevMode ? [{ debugName: "paused" }] : []));
     showProgress = input(true, ...(ngDevMode ? [{ debugName: "showProgress" }] : []));
+    type = input('info', ...(ngDevMode ? [{ debugName: "type" }] : []));
     closed = output();
     elementDimensions = output();
     #elementRef = inject(ElementRef);
@@ -4367,12 +4410,15 @@ class ToastComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: ToastComponent, isStandalone: true, selector: "ndw-toast", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", elementDimensions: "elementDimensions" }, ngImport: i0, template: "<ndw-icon>info</ndw-icon>\n{{ message() }}\n<button\n  ndwButton\n  tertiary\n  alternative\n  extra-small\n  (click)=\"closed.emit()\"\n  [attr.aria-label]=\"closeButtonLabel()\"\n>\n  <ndw-icon>close</ndw-icon>\n</button>\n<div\n  class=\"progress-bar\"\n  [ngStyle]=\"{\n    'animation-duration': duration() + 'ms',\n    visibility: showProgress() ? 'visible' : 'hidden',\n  }\"\n  [class.paused]=\"paused()\"\n></div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;position:relative;align-items:center;background-color:var(--ndw-color-grey-700);border-radius:var(--ndw-spacing-2xs);color:var(--ndw-color-white);display:grid;font-size:var(--ndw-font-size-sm);gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr auto;line-height:var(--ndw-line-height-md);max-width:20rem;width:20rem;opacity:1;overflow:hidden;padding:var(--ndw-spacing-xs);transition:opacity var(--ndw-animation-speed-fast) ease-in;z-index:2;box-shadow:var(--ndw-elevation-toast)}:host.hide-content{color:transparent}:host.hide-content>*{visibility:hidden}:host .progress-bar{animation:5s linear 0s 1 normal rightToLeft;background-color:var(--ndw-color-secondary-400);bottom:0;height:var(--ndw-spacing-2xs);left:-100%;position:absolute;width:100%;z-index:-1}:host .progress-bar.paused{animation-play-state:paused}:host>ndw-icon{font-size:1rem}:host [ndwButton] ndw-icon{color:var(--ndw-color-white)}@keyframes rightToLeft{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ToastComponent, isStandalone: true, selector: "ndw-toast", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", elementDimensions: "elementDimensions" }, host: { properties: { "class.info": "type() === \"info\"", "class.error": "type() === \"error\"" } }, ngImport: i0, template: "<ndw-icon class=\"toast-icon\">{{ type() }}</ndw-icon>\r\n{{ message() }}\r\n<button\r\n  ndwButton\r\n  tertiary\r\n  alternative\r\n  extra-small\r\n  (click)=\"closed.emit()\"\r\n  [attr.aria-label]=\"closeButtonLabel()\"\r\n>\r\n  <ndw-icon>close</ndw-icon>\r\n</button>\r\n@if (type() === 'info') {\r\n  <div\r\n    class=\"progress-bar\"\r\n    [ngStyle]=\"{\r\n      'animation-duration': duration() + 'ms',\r\n      visibility: showProgress() ? 'visible' : 'hidden',\r\n    }\"\r\n    [class.paused]=\"paused()\"\r\n  ></div>\r\n}\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;position:relative;align-items:center;border-radius:var(--ndw-spacing-2xs);color:var(--ndw-color-white);display:grid;font-size:var(--ndw-font-size-sm);gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr auto;line-height:var(--ndw-line-height-md);max-width:20rem;width:20rem;opacity:1;overflow:hidden;padding:var(--ndw-spacing-xs);transition:opacity var(--ndw-animation-speed-fast) ease-in;z-index:2;box-shadow:var(--ndw-elevation-toast)}:host.hide-content{color:transparent}:host.hide-content>*{visibility:hidden}:host .progress-bar{animation:5s linear 0s 1 normal rightToLeft;background-color:var(--ndw-color-secondary-400);bottom:0;height:var(--ndw-spacing-2xs);left:-100%;position:absolute;width:100%;z-index:-1}:host .progress-bar.paused{animation-play-state:paused}:host>ndw-icon{font-size:1rem}:host.info{background-color:var(--ndw-color-grey-700);color:var(--ndw-color-white)}:host.info .toast-icon{color:var(--ndw-color-white)}:host.info [ndwButton] ndw-icon{color:var(--ndw-color-white)}:host.error{background-color:var(--ndw-color-critical-300);color:var(--ndw-color-grey-700)}:host.error .toast-icon{color:var(--ndw-color-critical-500)}:host.error [ndwButton] ndw-icon{color:var(--ndw-color-grey-700)}@keyframes rightToLeft{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ndw-icon" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, NgStyle], selector: 'ndw-toast', template: "<ndw-icon>info</ndw-icon>\n{{ message() }}\n<button\n  ndwButton\n  tertiary\n  alternative\n  extra-small\n  (click)=\"closed.emit()\"\n  [attr.aria-label]=\"closeButtonLabel()\"\n>\n  <ndw-icon>close</ndw-icon>\n</button>\n<div\n  class=\"progress-bar\"\n  [ngStyle]=\"{\n    'animation-duration': duration() + 'ms',\n    visibility: showProgress() ? 'visible' : 'hidden',\n  }\"\n  [class.paused]=\"paused()\"\n></div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;position:relative;align-items:center;background-color:var(--ndw-color-grey-700);border-radius:var(--ndw-spacing-2xs);color:var(--ndw-color-white);display:grid;font-size:var(--ndw-font-size-sm);gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr auto;line-height:var(--ndw-line-height-md);max-width:20rem;width:20rem;opacity:1;overflow:hidden;padding:var(--ndw-spacing-xs);transition:opacity var(--ndw-animation-speed-fast) ease-in;z-index:2;box-shadow:var(--ndw-elevation-toast)}:host.hide-content{color:transparent}:host.hide-content>*{visibility:hidden}:host .progress-bar{animation:5s linear 0s 1 normal rightToLeft;background-color:var(--ndw-color-secondary-400);bottom:0;height:var(--ndw-spacing-2xs);left:-100%;position:absolute;width:100%;z-index:-1}:host .progress-bar.paused{animation-play-state:paused}:host>ndw-icon{font-size:1rem}:host [ndwButton] ndw-icon{color:var(--ndw-color-white)}@keyframes rightToLeft{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
-        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], paused: [{ type: i0.Input, args: [{ isSignal: true, alias: "paused", required: false }] }], showProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgress", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], elementDimensions: [{ type: i0.Output, args: ["elementDimensions"] }] } });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.info]': 'type() === "info"',
+                        '[class.error]': 'type() === "error"',
+                    }, imports: [IconComponent, NgStyle], selector: 'ndw-toast', template: "<ndw-icon class=\"toast-icon\">{{ type() }}</ndw-icon>\r\n{{ message() }}\r\n<button\r\n  ndwButton\r\n  tertiary\r\n  alternative\r\n  extra-small\r\n  (click)=\"closed.emit()\"\r\n  [attr.aria-label]=\"closeButtonLabel()\"\r\n>\r\n  <ndw-icon>close</ndw-icon>\r\n</button>\r\n@if (type() === 'info') {\r\n  <div\r\n    class=\"progress-bar\"\r\n    [ngStyle]=\"{\r\n      'animation-duration': duration() + 'ms',\r\n      visibility: showProgress() ? 'visible' : 'hidden',\r\n    }\"\r\n    [class.paused]=\"paused()\"\r\n  ></div>\r\n}\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,400,0..1&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block\";.ndw-heading-xl{font-family:var(--ndw-font-family-heading);font-size:2.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-lg{font-family:var(--ndw-font-family-heading);font-size:2rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-md{font-family:var(--ndw-font-family-heading);font-size:1.5rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-heading-sm{font-family:var(--ndw-font-family-heading);font-size:1.25rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-bold-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-xl{font-family:var(--ndw-font-family-body);font-size:1.125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-lg{font-family:var(--ndw-font-family-body);font-size:1rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-md{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}.ndw-paragraph-bold-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-bold);line-height:150%}.ndw-paragraph-sm{font-family:var(--ndw-font-family-body);font-size:.6875rem;font-weight:var(--ndw-font-weight-regular);line-height:150%}:host{font-family:var(--ndw-font-family-body);font-size:.8125rem;font-weight:var(--ndw-font-weight-regular);line-height:150%;position:relative;align-items:center;border-radius:var(--ndw-spacing-2xs);color:var(--ndw-color-white);display:grid;font-size:var(--ndw-font-size-sm);gap:var(--ndw-spacing-xs);grid-template-columns:auto 1fr auto;line-height:var(--ndw-line-height-md);max-width:20rem;width:20rem;opacity:1;overflow:hidden;padding:var(--ndw-spacing-xs);transition:opacity var(--ndw-animation-speed-fast) ease-in;z-index:2;box-shadow:var(--ndw-elevation-toast)}:host.hide-content{color:transparent}:host.hide-content>*{visibility:hidden}:host .progress-bar{animation:5s linear 0s 1 normal rightToLeft;background-color:var(--ndw-color-secondary-400);bottom:0;height:var(--ndw-spacing-2xs);left:-100%;position:absolute;width:100%;z-index:-1}:host .progress-bar.paused{animation-play-state:paused}:host>ndw-icon{font-size:1rem}:host.info{background-color:var(--ndw-color-grey-700);color:var(--ndw-color-white)}:host.info .toast-icon{color:var(--ndw-color-white)}:host.info [ndwButton] ndw-icon{color:var(--ndw-color-white)}:host.error{background-color:var(--ndw-color-critical-300);color:var(--ndw-color-grey-700)}:host.error .toast-icon{color:var(--ndw-color-critical-500)}:host.error [ndwButton] ndw-icon{color:var(--ndw-color-grey-700)}@keyframes rightToLeft{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], paused: [{ type: i0.Input, args: [{ isSignal: true, alias: "paused", required: false }] }], showProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgress", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], elementDimensions: [{ type: i0.Output, args: ["elementDimensions"] }] } });
 
 class ToastListComponent {
     toastService = inject(ToastService);
@@ -4426,7 +4472,7 @@ class ToastListComponent {
         this.toastService.resume();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ToastListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ToastListComponent, isStandalone: true, selector: "ndw-toast-list", host: { listeners: { "mouseenter": "pause()", "mouseleave": "resume()" }, properties: { "style.--total-toast-height": "totalHeightExcludingGaps() + \"px\"", "style.--total-toast-count": "toastComponents().length", "style.--max-toast-width": "maxToastWidth() + \"px\"" } }, viewQueries: [{ propertyName: "toastComponents", predicate: ToastComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@for (toast of toastService.toasts(); track toast.id) {\n  <ndw-toast\n    class=\"toast\"\n    [class.hide-content]=\"!toastService.paused() && $index > 0\"\n    [ngStyle]=\"{\n      '--index': $index,\n      '--offset-height': toastOffsetHeights()[$index] + 'px',\n      '--first-toast-height': firstToastHeight() + 'px',\n    }\"\n    [id]=\"toast.id\"\n    [closeButtonLabel]=\"toast.closeButtonLabel ?? 'Sluit'\"\n    [message]=\"toast.message\"\n    [duration]=\"toast.duration\"\n    [paused]=\"toastService.paused()\"\n    [showProgress]=\"toastService.paused() || $first\"\n    (closed)=\"toastService.close(toast.id)\"\n    (elementDimensions)=\"setToastDimensions(toast.id, $event)\"\n  ></ndw-toast>\n}\n", styles: [":host{--stack-gap: var(--ndw-spacing-sm);--animation-speed: var(--ndw-animation-speed-default);position:relative;width:var(--max-toast-width)}:host .toast{--x: 0;--y: calc((var(--stack-gap) * var(--index)));--scaleX: calc(1 - .05 * var(--index));top:0;left:0;position:absolute;transform:translate(var(--x),var(--y));transform-origin:top center;transition-property:transform,opacity;transition-duration:var(--animation-speed);transition-timing-function:ease;z-index:calc(1000 - var(--index))}:host .toast:not(:first-child){transform:translate(var(--x),var(--y)) scaleX(var(--scaleX))}:host:not(:hover):not(:focus-within) .toast:not(:first-child){height:var(--first-toast-height)}:host:hover,:host:focus-within{height:calc(var(--total-toast-height) + var(--stack-gap) * (var(--total-toast-count) - 1))}:host:hover .toast,:host:focus-within .toast{--scaleX: 1;--y: calc(var(--offset-height) + var(--stack-gap) * var(--index));transition-duration:var(--animation-speed)}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "ndw-toast", inputs: ["message", "closeButtonLabel", "id", "duration", "paused", "showProgress"], outputs: ["closed", "elementDimensions"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ToastListComponent, isStandalone: true, selector: "ndw-toast-list", host: { listeners: { "mouseenter": "pause()", "mouseleave": "resume()" }, properties: { "style.--total-toast-height": "totalHeightExcludingGaps() + \"px\"", "style.--total-toast-count": "toastComponents().length", "style.--max-toast-width": "maxToastWidth() + \"px\"" } }, viewQueries: [{ propertyName: "toastComponents", predicate: ToastComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@for (toast of toastService.toasts(); track toast.id) {\n  <ndw-toast\n    class=\"toast\"\n    [class.hide-content]=\"!toastService.paused() && $index > 0\"\n    [ngStyle]=\"{\n      '--index': $index,\n      '--offset-height': toastOffsetHeights()[$index] + 'px',\n      '--first-toast-height': firstToastHeight() + 'px',\n    }\"\n    [id]=\"toast.id\"\n    [closeButtonLabel]=\"toast.closeButtonLabel ?? 'Sluit'\"\n    [message]=\"toast.message\"\n    [duration]=\"toast.duration\"\n    [paused]=\"toastService.paused()\"\n    [showProgress]=\"toastService.paused() || $first\"\n    [type]=\"toast.type\"\n    (closed)=\"toastService.close(toast.id)\"\n    (elementDimensions)=\"setToastDimensions(toast.id, $event)\"\n  ></ndw-toast>\n}\n", styles: [":host{--stack-gap: var(--ndw-spacing-sm);--animation-speed: var(--ndw-animation-speed-default);position:relative;width:var(--max-toast-width)}:host .toast{--x: 0;--y: calc((var(--stack-gap) * var(--index)));--scaleX: calc(1 - .05 * var(--index));top:0;left:0;position:absolute;transform:translate(var(--x),var(--y));transform-origin:top center;transition-property:transform,opacity;transition-duration:var(--animation-speed);transition-timing-function:ease;z-index:calc(1000 - var(--index))}:host .toast:not(:first-child){transform:translate(var(--x),var(--y)) scaleX(var(--scaleX))}:host:not(:hover):not(:focus-within) .toast:not(:first-child){height:var(--first-toast-height)}:host:hover,:host:focus-within{height:calc(var(--total-toast-height) + var(--stack-gap) * (var(--total-toast-count) - 1))}:host:hover .toast,:host:focus-within .toast{--scaleX: 1;--y: calc(var(--offset-height) + var(--stack-gap) * var(--index));transition-duration:var(--animation-speed)}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "ndw-toast", inputs: ["message", "closeButtonLabel", "id", "duration", "paused", "showProgress", "type"], outputs: ["closed", "elementDimensions"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ToastListComponent, decorators: [{
             type: Component,
@@ -4436,7 +4482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '[style.--total-toast-height]': 'totalHeightExcludingGaps() + "px"',
                         '[style.--total-toast-count]': 'toastComponents().length',
                         '[style.--max-toast-width]': 'maxToastWidth() + "px"',
-                    }, imports: [ToastComponent, NgStyle], selector: 'ndw-toast-list', template: "@for (toast of toastService.toasts(); track toast.id) {\n  <ndw-toast\n    class=\"toast\"\n    [class.hide-content]=\"!toastService.paused() && $index > 0\"\n    [ngStyle]=\"{\n      '--index': $index,\n      '--offset-height': toastOffsetHeights()[$index] + 'px',\n      '--first-toast-height': firstToastHeight() + 'px',\n    }\"\n    [id]=\"toast.id\"\n    [closeButtonLabel]=\"toast.closeButtonLabel ?? 'Sluit'\"\n    [message]=\"toast.message\"\n    [duration]=\"toast.duration\"\n    [paused]=\"toastService.paused()\"\n    [showProgress]=\"toastService.paused() || $first\"\n    (closed)=\"toastService.close(toast.id)\"\n    (elementDimensions)=\"setToastDimensions(toast.id, $event)\"\n  ></ndw-toast>\n}\n", styles: [":host{--stack-gap: var(--ndw-spacing-sm);--animation-speed: var(--ndw-animation-speed-default);position:relative;width:var(--max-toast-width)}:host .toast{--x: 0;--y: calc((var(--stack-gap) * var(--index)));--scaleX: calc(1 - .05 * var(--index));top:0;left:0;position:absolute;transform:translate(var(--x),var(--y));transform-origin:top center;transition-property:transform,opacity;transition-duration:var(--animation-speed);transition-timing-function:ease;z-index:calc(1000 - var(--index))}:host .toast:not(:first-child){transform:translate(var(--x),var(--y)) scaleX(var(--scaleX))}:host:not(:hover):not(:focus-within) .toast:not(:first-child){height:var(--first-toast-height)}:host:hover,:host:focus-within{height:calc(var(--total-toast-height) + var(--stack-gap) * (var(--total-toast-count) - 1))}:host:hover .toast,:host:focus-within .toast{--scaleX: 1;--y: calc(var(--offset-height) + var(--stack-gap) * var(--index));transition-duration:var(--animation-speed)}\n"] }]
+                    }, imports: [ToastComponent, NgStyle], selector: 'ndw-toast-list', template: "@for (toast of toastService.toasts(); track toast.id) {\n  <ndw-toast\n    class=\"toast\"\n    [class.hide-content]=\"!toastService.paused() && $index > 0\"\n    [ngStyle]=\"{\n      '--index': $index,\n      '--offset-height': toastOffsetHeights()[$index] + 'px',\n      '--first-toast-height': firstToastHeight() + 'px',\n    }\"\n    [id]=\"toast.id\"\n    [closeButtonLabel]=\"toast.closeButtonLabel ?? 'Sluit'\"\n    [message]=\"toast.message\"\n    [duration]=\"toast.duration\"\n    [paused]=\"toastService.paused()\"\n    [showProgress]=\"toastService.paused() || $first\"\n    [type]=\"toast.type\"\n    (closed)=\"toastService.close(toast.id)\"\n    (elementDimensions)=\"setToastDimensions(toast.id, $event)\"\n  ></ndw-toast>\n}\n", styles: [":host{--stack-gap: var(--ndw-spacing-sm);--animation-speed: var(--ndw-animation-speed-default);position:relative;width:var(--max-toast-width)}:host .toast{--x: 0;--y: calc((var(--stack-gap) * var(--index)));--scaleX: calc(1 - .05 * var(--index));top:0;left:0;position:absolute;transform:translate(var(--x),var(--y));transform-origin:top center;transition-property:transform,opacity;transition-duration:var(--animation-speed);transition-timing-function:ease;z-index:calc(1000 - var(--index))}:host .toast:not(:first-child){transform:translate(var(--x),var(--y)) scaleX(var(--scaleX))}:host:not(:hover):not(:focus-within) .toast:not(:first-child){height:var(--first-toast-height)}:host:hover,:host:focus-within{height:calc(var(--total-toast-height) + var(--stack-gap) * (var(--total-toast-count) - 1))}:host:hover .toast,:host:focus-within .toast{--scaleX: 1;--y: calc(var(--offset-height) + var(--stack-gap) * var(--index));transition-duration:var(--animation-speed)}\n"] }]
         }], propDecorators: { toastComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => ToastComponent), { isSignal: true }] }] } });
 
 class ToastService {
@@ -4480,9 +4526,11 @@ class ToastService {
      * Open a toast notification with the given message and optional duration.
      * @param message The message to display in the toast.
      * @param duration Optional duration in milliseconds for which the toast should be visible. Defaults to 5000ms.
+     * @param closeButtonLabel
+     * @param type The type of toast. Based on type the behavior and visuals of the toast will change.
      * @returns The ID of the created toast. Can be used to close the toast.
      */
-    open(message, duration, closeButtonLabel) {
+    open(message, duration, closeButtonLabel, type = 'info') {
         const id = crypto.randomUUID();
         this.#addToast({
             id,
@@ -4490,6 +4538,7 @@ class ToastService {
             duration: duration ?? 5000,
             remainingTime: duration ?? 5000,
             closeButtonLabel,
+            type,
         });
         if (!this.#overlayRef) {
             this.#overlayRef = this.#overlay.create({
@@ -4520,7 +4569,7 @@ class ToastService {
     #updateToastExpiration(elapsedMs) {
         this.#toasts.update((toasts) => toasts.map((toast) => ({ ...toast, remainingTime: toast.remainingTime - elapsedMs })));
         this.#toasts().forEach((toast) => {
-            if (toast.remainingTime <= 0) {
+            if (toast.remainingTime <= 0 && toast.type !== 'error') {
                 this.close(toast.id);
             }
         });
@@ -4539,5 +4588,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionService, AlertComponent, AutoGrowDirective, AutosuggestAddOptionComponent, AutosuggestDirective, AutosuggestOptionComponent, AutosuggestPanelComponent, AvatarComponent, BROWSER_STORAGE, BadgeComponent, BannerComponent, BaseTourService, BreadcrumbComponent, BreadcrumbGroupComponent, ButtonDirective, CARD_COMPONENTS, CARD_ID_TOKEN, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CheckboxComponent, CheckboxGroupComponent, CollapsibleComponent, DEFAULT_BACKGROUNDS, DashboardCardComponent, DatepickerComponent, DropdownComponent, EditBarActionsComponent, EditBarComponent, EditBarMessageComponent, ErrorComponent, FavoriteComponent, FileUploadComponent, FormFieldComponent, FormFieldElement, GuidedTourService, HoverableListItemComponent, IconComponent, InfoComponent, InputButtonComponent, InputDirective, InputIconComponent, KeyValueListComponent, LayoutBannersComponent, LayoutComponent, ListComponent, ListItemComponent, LoaderComponent, MAP_BACKGROUNDS, MAP_BACKGROUND_IMAGES, MAP_LAYERS, MAP_LAYER_IMAGES, MODAL_COMPONENTS, MainNavigationComponent, MapButtonComponent, MapDisplayComponent, MapDisplayOptionComponent, MapLegendComponent, MarkdownEditorComponent, MarkdownParserComponent, MaxCharDirective, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalService, MonthInputComponent, MultiSelectComponent, OptionComponent, OptionGroupComponent, PillComponent, PopoverTriggerDirective, RadioButtonComponent, RadioGroupComponent, RouterBreadcrumbsComponent, SplitterComponent, SummaryCardActionComponent, SummaryCardActionsComponent, SummaryCardComponent, SummaryCardContentComponent, SummaryCardHeaderComponent, SummaryCardSubtitleComponent, SummaryCardTagComponent, SummaryCardTagsComponent, SwitcherComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastService, TooltipComponent, TooltipDirective, backButton, cancelButton, defaultStepOptions, elementIsHidden, finishButton, fontMapButtonIcons, formatStepWithImage, makeButton, mapButtonIcons, ndwAgGridTheme, nextButton, svgMapButtonIcons };
+export { AccordionComponent, AccordionService, AlertComponent, AutoGrowDirective, AutosuggestAddOptionComponent, AutosuggestDirective, AutosuggestOptionComponent, AutosuggestPanelComponent, AvatarComponent, BROWSER_STORAGE, BadgeComponent, BannerComponent, BaseTourService, BreadcrumbComponent, BreadcrumbGroupComponent, ButtonDirective, CARD_COMPONENTS, CARD_ID_TOKEN, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CheckboxComponent, CheckboxGroupComponent, CollapsibleComponent, DEFAULT_BACKGROUNDS, DashboardCardComponent, DatepickerComponent, DropdownComponent, EditBarActionsComponent, EditBarComponent, EditBarMessageComponent, ErrorComponent, FavoriteComponent, FileUploadComponent, FormFieldComponent, FormFieldElement, GuidedTourService, HoverableListItemComponent, IconComponent, InfoComponent, InputButtonComponent, InputDirective, InputIconComponent, KeyValueListComponent, LANGUAGE_FLAGS, LANGUAGE_LABELS, LanguageSwitcherComponent, LayoutBannersComponent, LayoutComponent, ListComponent, ListItemComponent, LoaderComponent, MAP_BACKGROUNDS, MAP_BACKGROUND_IMAGES, MAP_LAYERS, MAP_LAYER_IMAGES, MODAL_COMPONENTS, MainNavigationComponent, MapButtonComponent, MapDisplayComponent, MapDisplayOptionComponent, MapLegendComponent, MarkdownEditorComponent, MarkdownParserComponent, MaxCharDirective, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalService, MonthInputComponent, MultiSelectComponent, OptionComponent, OptionGroupComponent, PillComponent, PopoverTriggerDirective, RadioButtonComponent, RadioGroupComponent, RouterBreadcrumbsComponent, SplitterComponent, SummaryCardActionComponent, SummaryCardActionsComponent, SummaryCardComponent, SummaryCardContentComponent, SummaryCardHeaderComponent, SummaryCardSubtitleComponent, SummaryCardTagComponent, SummaryCardTagsComponent, SwitcherComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastService, TooltipComponent, TooltipDirective, backButton, cancelButton, defaultStepOptions, elementIsHidden, finishButton, fontMapButtonIcons, formatStepWithImage, makeButton, mapButtonIcons, ndwAgGridTheme, nextButton, svgMapButtonIcons };
 //# sourceMappingURL=ndwnu-design-system.mjs.map