@tedi-design-system/angular 7.1.0-rc.18 → 7.1.0-rc.19

package/fesm2022/tedi-design-system-angular-tedi.mjs

@@ -853,7 +853,7 @@ class DropdownItemValueComponent {
         event.preventDefault();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownItemValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DropdownItemValueComponent, isStandalone: true, selector: "tedi-dropdown-item-value", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-dropdown-item-value--vertical": "layout() === 'vertical'", "class.tedi-dropdown-item-value--horizontal": "layout() === 'horizontal'", "class.tedi-dropdown-item-value--checkbox": "type() === 'checkbox'", "class.tedi-dropdown-item-value--radio": "type() === 'radio'" }, classAttribute: "tedi-dropdown-item-value" }, ngImport: i0, template: "@if (type() === 'checkbox') {\n  <input\n    type=\"checkbox\"\n    tedi-checkbox\n    class=\"tedi-dropdown-item-value__checkbox\"\n    tabindex=\"-1\"\n    [checked]=\"selected()\"\n    [indeterminate]=\"indeterminate()\"\n    [disabled]=\"disabled()\"\n    (click)=\"onIndicatorClick($event)\"\n  />\n} @else if (type() === 'radio') {\n  <input\n    type=\"radio\"\n    class=\"tedi-dropdown-item-value__radio\"\n    tabindex=\"-1\"\n    [checked]=\"selected()\"\n    [disabled]=\"disabled()\"\n    (click)=\"onIndicatorClick($event)\"\n  />\n}\n<ng-content select=\"tedi-icon, [tediIcon]\" />\n<div class=\"tedi-dropdown-item-value__content\">\n  <ng-content select=\"tedi-dropdown-item-value-label\" />\n  <ng-content select=\"tedi-dropdown-item-value-meta\" />\n</div>\n<ng-content />\n", styles: [".tedi-dropdown-item-value{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%}.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio{align-items:flex-start}.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>input[tedi-checkbox][type=checkbox],.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>input.tedi-dropdown-item-value__radio,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>.tedi-icon,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>input[tedi-checkbox][type=checkbox],.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>input.tedi-dropdown-item-value__radio,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>.tedi-icon{margin-top:calc((var(--body-regular-line-height) - var(--form-checkbox-radio-size-responsive)) / 2)}.tedi-dropdown-item-value--radio{gap:var(--form-checkbox-radio-inner-spacing)}.tedi-dropdown-item-value__checkbox,.tedi-dropdown-item-value__radio{flex-shrink:0;pointer-events:none}.tedi-dropdown-item-value__radio{position:relative;width:var(--form-checkbox-radio-size-responsive);height:var(--form-checkbox-radio-size-responsive);padding:0;margin:0;vertical-align:middle;appearance:none;cursor:pointer;background-color:var(--form-checkbox-radio-default-background-default);border:var(--tedi-borders-01) solid var(--form-checkbox-radio-default-border-default);border-radius:var(--form-checkbox-radio-indicator-radius-radio)}.tedi-dropdown-item-value__radio:checked{background-color:var(--form-checkbox-radio-default-background-default);border-color:var(--form-checkbox-radio-default-border-selected)}.tedi-dropdown-item-value__radio:checked:before{position:absolute;top:50%;left:50%;width:calc(var(--form-checkbox-radio-size-responsive) * .625);height:calc(var(--form-checkbox-radio-size-responsive) * .625);content:\"\";background:var(--form-checkbox-radio-default-border-selected);border-radius:50%;transform:translate(-50%,-50%)}.tedi-dropdown-item-value__radio:disabled{cursor:not-allowed;background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-dropdown-item-value__radio:disabled:checked{background-color:var(--form-checkbox-radio-default-background-default);border-color:var(--form-checkbox-radio-default-border-selected-disabled)}.tedi-dropdown-item-value__radio:disabled:checked:before{background:var(--form-checkbox-radio-default-border-selected-disabled)}.tedi-dropdown-item-value__content{display:flex;flex:1 0 0;min-width:0}.tedi-dropdown-item-value--horizontal .tedi-dropdown-item-value__content{flex-direction:row;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:space-between}.tedi-dropdown-item-value--vertical .tedi-dropdown-item-value__content{flex-direction:column;align-items:flex-start}.tedi-dropdown-item-value__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--dropdown-item-default-text)}.tedi-dropdown-item-value__label--no-clip{overflow:visible}.tedi-dropdown-item-value__meta{flex-shrink:0;font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-tertiary)}.tedi-dropdown-item-value--vertical .tedi-dropdown-item-value__meta{flex-shrink:1}li[tedi-dropdown-item][aria-selected=true] .tedi-dropdown-item-value__label,li[tedi-dropdown-item][aria-selected=true] .tedi-dropdown-item-value__meta,li[tedi-dropdown-item].tedi-dropdown-item--selected .tedi-dropdown-item-value__label,li[tedi-dropdown-item].tedi-dropdown-item--selected .tedi-dropdown-item-value__meta,.tedi-dropdown-item[aria-selected=true] .tedi-dropdown-item-value__label,.tedi-dropdown-item[aria-selected=true] .tedi-dropdown-item-value__meta,.tedi-dropdown-item.tedi-dropdown-item--selected .tedi-dropdown-item-value__label,.tedi-dropdown-item.tedi-dropdown-item--selected .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__label,li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__meta,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__label,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item][aria-disabled=true] .tedi-dropdown-item-value__label,li[tedi-dropdown-item][aria-disabled=true] .tedi-dropdown-item-value__meta,li[tedi-dropdown-item].tedi-dropdown-item--disabled .tedi-dropdown-item-value__label,li[tedi-dropdown-item].tedi-dropdown-item--disabled .tedi-dropdown-item-value__meta,.tedi-dropdown-item[aria-disabled=true] .tedi-dropdown-item-value__label,.tedi-dropdown-item[aria-disabled=true] .tedi-dropdown-item-value__meta,.tedi-dropdown-item.tedi-dropdown-item--disabled .tedi-dropdown-item-value__label,.tedi-dropdown-item.tedi-dropdown-item--disabled .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true],li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected,.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true],.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__radio,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__radio{background-color:var(--form-checkbox-radio-default-background-hover);border-color:var(--form-checkbox-radio-default-border-hover);border-width:var(--tedi-borders-02)}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DropdownItemValueComponent, isStandalone: true, selector: "tedi-dropdown-item-value", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-dropdown-item-value--vertical": "layout() === 'vertical'", "class.tedi-dropdown-item-value--horizontal": "layout() === 'horizontal'", "class.tedi-dropdown-item-value--checkbox": "type() === 'checkbox'", "class.tedi-dropdown-item-value--radio": "type() === 'radio'" }, classAttribute: "tedi-dropdown-item-value" }, ngImport: i0, template: "@if (type() === 'checkbox') {\n  <input\n    type=\"checkbox\"\n    tedi-checkbox\n    class=\"tedi-dropdown-item-value__checkbox\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [checked]=\"selected()\"\n    [indeterminate]=\"indeterminate()\"\n    [disabled]=\"disabled()\"\n    (click)=\"onIndicatorClick($event)\"\n  />\n} @else if (type() === 'radio') {\n  <input\n    type=\"radio\"\n    class=\"tedi-dropdown-item-value__radio\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [checked]=\"selected()\"\n    [disabled]=\"disabled()\"\n    (click)=\"onIndicatorClick($event)\"\n  />\n}\n<ng-content select=\"tedi-icon, [tediIcon]\" />\n<div class=\"tedi-dropdown-item-value__content\">\n  <ng-content select=\"tedi-dropdown-item-value-label\" />\n  <ng-content select=\"tedi-dropdown-item-value-meta\" />\n</div>\n<ng-content />\n", styles: [".tedi-dropdown-item-value{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%}.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio{align-items:flex-start}.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>input[tedi-checkbox][type=checkbox],.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>input.tedi-dropdown-item-value__radio,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>.tedi-icon,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>input[tedi-checkbox][type=checkbox],.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>input.tedi-dropdown-item-value__radio,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>.tedi-icon{margin-top:calc((var(--body-regular-line-height) - var(--form-checkbox-radio-size-responsive)) / 2)}.tedi-dropdown-item-value--radio{gap:var(--form-checkbox-radio-inner-spacing)}.tedi-dropdown-item-value__checkbox,.tedi-dropdown-item-value__radio{flex-shrink:0;pointer-events:none}.tedi-dropdown-item-value__radio{position:relative;width:var(--form-checkbox-radio-size-responsive);height:var(--form-checkbox-radio-size-responsive);padding:0;margin:0;vertical-align:middle;appearance:none;cursor:pointer;background-color:var(--form-checkbox-radio-default-background-default);border:var(--tedi-borders-01) solid var(--form-checkbox-radio-default-border-default);border-radius:var(--form-checkbox-radio-indicator-radius-radio)}.tedi-dropdown-item-value__radio:checked{background-color:var(--form-checkbox-radio-default-background-default);border-color:var(--form-checkbox-radio-default-border-selected)}.tedi-dropdown-item-value__radio:checked:before{position:absolute;top:50%;left:50%;width:calc(var(--form-checkbox-radio-size-responsive) * .625);height:calc(var(--form-checkbox-radio-size-responsive) * .625);content:\"\";background:var(--form-checkbox-radio-default-border-selected);border-radius:50%;transform:translate(-50%,-50%)}.tedi-dropdown-item-value__radio:disabled{cursor:not-allowed;background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-dropdown-item-value__radio:disabled:checked{background-color:var(--form-checkbox-radio-default-background-default);border-color:var(--form-checkbox-radio-default-border-selected-disabled)}.tedi-dropdown-item-value__radio:disabled:checked:before{background:var(--form-checkbox-radio-default-border-selected-disabled)}.tedi-dropdown-item-value__content{display:flex;flex:1 0 0;min-width:0}.tedi-dropdown-item-value--horizontal .tedi-dropdown-item-value__content{flex-direction:row;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:space-between}.tedi-dropdown-item-value--vertical .tedi-dropdown-item-value__content{flex-direction:column;align-items:flex-start}.tedi-dropdown-item-value__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--dropdown-item-default-text)}.tedi-dropdown-item-value__label--no-clip{overflow:visible}.tedi-dropdown-item-value__meta{flex-shrink:0;font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-tertiary)}.tedi-dropdown-item-value--vertical .tedi-dropdown-item-value__meta{flex-shrink:1}li[tedi-dropdown-item][aria-selected=true] .tedi-dropdown-item-value__label,li[tedi-dropdown-item][aria-selected=true] .tedi-dropdown-item-value__meta,li[tedi-dropdown-item].tedi-dropdown-item--selected .tedi-dropdown-item-value__label,li[tedi-dropdown-item].tedi-dropdown-item--selected .tedi-dropdown-item-value__meta,.tedi-dropdown-item[aria-selected=true] .tedi-dropdown-item-value__label,.tedi-dropdown-item[aria-selected=true] .tedi-dropdown-item-value__meta,.tedi-dropdown-item.tedi-dropdown-item--selected .tedi-dropdown-item-value__label,.tedi-dropdown-item.tedi-dropdown-item--selected .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__label,li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__meta,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__label,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item][aria-disabled=true] .tedi-dropdown-item-value__label,li[tedi-dropdown-item][aria-disabled=true] .tedi-dropdown-item-value__meta,li[tedi-dropdown-item].tedi-dropdown-item--disabled .tedi-dropdown-item-value__label,li[tedi-dropdown-item].tedi-dropdown-item--disabled .tedi-dropdown-item-value__meta,.tedi-dropdown-item[aria-disabled=true] .tedi-dropdown-item-value__label,.tedi-dropdown-item[aria-disabled=true] .tedi-dropdown-item-value__meta,.tedi-dropdown-item.tedi-dropdown-item--disabled .tedi-dropdown-item-value__label,.tedi-dropdown-item.tedi-dropdown-item--disabled .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true],li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected,.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true],.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__radio,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__radio{background-color:var(--form-checkbox-radio-default-background-hover);border-color:var(--form-checkbox-radio-default-border-hover);border-width:var(--tedi-borders-02)}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownItemValueComponent, decorators: [{
             type: Component,
@@ -863,7 +863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         "[class.tedi-dropdown-item-value--horizontal]": "layout() === 'horizontal'",
                         "[class.tedi-dropdown-item-value--checkbox]": "type() === 'checkbox'",
                         "[class.tedi-dropdown-item-value--radio]": "type() === 'radio'",
-                    }, template: "@if (type() === 'checkbox') {\n  <input\n    type=\"checkbox\"\n    tedi-checkbox\n    class=\"tedi-dropdown-item-value__checkbox\"\n    tabindex=\"-1\"\n    [checked]=\"selected()\"\n    [indeterminate]=\"indeterminate()\"\n    [disabled]=\"disabled()\"\n    (click)=\"onIndicatorClick($event)\"\n  />\n} @else if (type() === 'radio') {\n  <input\n    type=\"radio\"\n    class=\"tedi-dropdown-item-value__radio\"\n    tabindex=\"-1\"\n    [checked]=\"selected()\"\n    [disabled]=\"disabled()\"\n    (click)=\"onIndicatorClick($event)\"\n  />\n}\n<ng-content select=\"tedi-icon, [tediIcon]\" />\n<div class=\"tedi-dropdown-item-value__content\">\n  <ng-content select=\"tedi-dropdown-item-value-label\" />\n  <ng-content select=\"tedi-dropdown-item-value-meta\" />\n</div>\n<ng-content />\n", styles: [".tedi-dropdown-item-value{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%}.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio{align-items:flex-start}.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>input[tedi-checkbox][type=checkbox],.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>input.tedi-dropdown-item-value__radio,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>.tedi-icon,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>input[tedi-checkbox][type=checkbox],.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>input.tedi-dropdown-item-value__radio,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>.tedi-icon{margin-top:calc((var(--body-regular-line-height) - var(--form-checkbox-radio-size-responsive)) / 2)}.tedi-dropdown-item-value--radio{gap:var(--form-checkbox-radio-inner-spacing)}.tedi-dropdown-item-value__checkbox,.tedi-dropdown-item-value__radio{flex-shrink:0;pointer-events:none}.tedi-dropdown-item-value__radio{position:relative;width:var(--form-checkbox-radio-size-responsive);height:var(--form-checkbox-radio-size-responsive);padding:0;margin:0;vertical-align:middle;appearance:none;cursor:pointer;background-color:var(--form-checkbox-radio-default-background-default);border:var(--tedi-borders-01) solid var(--form-checkbox-radio-default-border-default);border-radius:var(--form-checkbox-radio-indicator-radius-radio)}.tedi-dropdown-item-value__radio:checked{background-color:var(--form-checkbox-radio-default-background-default);border-color:var(--form-checkbox-radio-default-border-selected)}.tedi-dropdown-item-value__radio:checked:before{position:absolute;top:50%;left:50%;width:calc(var(--form-checkbox-radio-size-responsive) * .625);height:calc(var(--form-checkbox-radio-size-responsive) * .625);content:\"\";background:var(--form-checkbox-radio-default-border-selected);border-radius:50%;transform:translate(-50%,-50%)}.tedi-dropdown-item-value__radio:disabled{cursor:not-allowed;background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-dropdown-item-value__radio:disabled:checked{background-color:var(--form-checkbox-radio-default-background-default);border-color:var(--form-checkbox-radio-default-border-selected-disabled)}.tedi-dropdown-item-value__radio:disabled:checked:before{background:var(--form-checkbox-radio-default-border-selected-disabled)}.tedi-dropdown-item-value__content{display:flex;flex:1 0 0;min-width:0}.tedi-dropdown-item-value--horizontal .tedi-dropdown-item-value__content{flex-direction:row;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:space-between}.tedi-dropdown-item-value--vertical .tedi-dropdown-item-value__content{flex-direction:column;align-items:flex-start}.tedi-dropdown-item-value__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--dropdown-item-default-text)}.tedi-dropdown-item-value__label--no-clip{overflow:visible}.tedi-dropdown-item-value__meta{flex-shrink:0;font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-tertiary)}.tedi-dropdown-item-value--vertical .tedi-dropdown-item-value__meta{flex-shrink:1}li[tedi-dropdown-item][aria-selected=true] .tedi-dropdown-item-value__label,li[tedi-dropdown-item][aria-selected=true] .tedi-dropdown-item-value__meta,li[tedi-dropdown-item].tedi-dropdown-item--selected .tedi-dropdown-item-value__label,li[tedi-dropdown-item].tedi-dropdown-item--selected .tedi-dropdown-item-value__meta,.tedi-dropdown-item[aria-selected=true] .tedi-dropdown-item-value__label,.tedi-dropdown-item[aria-selected=true] .tedi-dropdown-item-value__meta,.tedi-dropdown-item.tedi-dropdown-item--selected .tedi-dropdown-item-value__label,.tedi-dropdown-item.tedi-dropdown-item--selected .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__label,li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__meta,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__label,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item][aria-disabled=true] .tedi-dropdown-item-value__label,li[tedi-dropdown-item][aria-disabled=true] .tedi-dropdown-item-value__meta,li[tedi-dropdown-item].tedi-dropdown-item--disabled .tedi-dropdown-item-value__label,li[tedi-dropdown-item].tedi-dropdown-item--disabled .tedi-dropdown-item-value__meta,.tedi-dropdown-item[aria-disabled=true] .tedi-dropdown-item-value__label,.tedi-dropdown-item[aria-disabled=true] .tedi-dropdown-item-value__meta,.tedi-dropdown-item.tedi-dropdown-item--disabled .tedi-dropdown-item-value__label,.tedi-dropdown-item.tedi-dropdown-item--disabled .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true],li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected,.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true],.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__radio,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__radio{background-color:var(--form-checkbox-radio-default-background-hover);border-color:var(--form-checkbox-radio-default-border-hover);border-width:var(--tedi-borders-02)}\n"] }]
+                    }, template: "@if (type() === 'checkbox') {\n  <input\n    type=\"checkbox\"\n    tedi-checkbox\n    class=\"tedi-dropdown-item-value__checkbox\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [checked]=\"selected()\"\n    [indeterminate]=\"indeterminate()\"\n    [disabled]=\"disabled()\"\n    (click)=\"onIndicatorClick($event)\"\n  />\n} @else if (type() === 'radio') {\n  <input\n    type=\"radio\"\n    class=\"tedi-dropdown-item-value__radio\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [checked]=\"selected()\"\n    [disabled]=\"disabled()\"\n    (click)=\"onIndicatorClick($event)\"\n  />\n}\n<ng-content select=\"tedi-icon, [tediIcon]\" />\n<div class=\"tedi-dropdown-item-value__content\">\n  <ng-content select=\"tedi-dropdown-item-value-label\" />\n  <ng-content select=\"tedi-dropdown-item-value-meta\" />\n</div>\n<ng-content />\n", styles: [".tedi-dropdown-item-value{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%}.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio{align-items:flex-start}.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>input[tedi-checkbox][type=checkbox],.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>input.tedi-dropdown-item-value__radio,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--checkbox>.tedi-icon,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>input[tedi-checkbox][type=checkbox],.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>input.tedi-dropdown-item-value__radio,.tedi-dropdown-item-value--vertical.tedi-dropdown-item-value--radio>.tedi-icon{margin-top:calc((var(--body-regular-line-height) - var(--form-checkbox-radio-size-responsive)) / 2)}.tedi-dropdown-item-value--radio{gap:var(--form-checkbox-radio-inner-spacing)}.tedi-dropdown-item-value__checkbox,.tedi-dropdown-item-value__radio{flex-shrink:0;pointer-events:none}.tedi-dropdown-item-value__radio{position:relative;width:var(--form-checkbox-radio-size-responsive);height:var(--form-checkbox-radio-size-responsive);padding:0;margin:0;vertical-align:middle;appearance:none;cursor:pointer;background-color:var(--form-checkbox-radio-default-background-default);border:var(--tedi-borders-01) solid var(--form-checkbox-radio-default-border-default);border-radius:var(--form-checkbox-radio-indicator-radius-radio)}.tedi-dropdown-item-value__radio:checked{background-color:var(--form-checkbox-radio-default-background-default);border-color:var(--form-checkbox-radio-default-border-selected)}.tedi-dropdown-item-value__radio:checked:before{position:absolute;top:50%;left:50%;width:calc(var(--form-checkbox-radio-size-responsive) * .625);height:calc(var(--form-checkbox-radio-size-responsive) * .625);content:\"\";background:var(--form-checkbox-radio-default-border-selected);border-radius:50%;transform:translate(-50%,-50%)}.tedi-dropdown-item-value__radio:disabled{cursor:not-allowed;background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-dropdown-item-value__radio:disabled:checked{background-color:var(--form-checkbox-radio-default-background-default);border-color:var(--form-checkbox-radio-default-border-selected-disabled)}.tedi-dropdown-item-value__radio:disabled:checked:before{background:var(--form-checkbox-radio-default-border-selected-disabled)}.tedi-dropdown-item-value__content{display:flex;flex:1 0 0;min-width:0}.tedi-dropdown-item-value--horizontal .tedi-dropdown-item-value__content{flex-direction:row;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:space-between}.tedi-dropdown-item-value--vertical .tedi-dropdown-item-value__content{flex-direction:column;align-items:flex-start}.tedi-dropdown-item-value__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--dropdown-item-default-text)}.tedi-dropdown-item-value__label--no-clip{overflow:visible}.tedi-dropdown-item-value__meta{flex-shrink:0;font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-tertiary)}.tedi-dropdown-item-value--vertical .tedi-dropdown-item-value__meta{flex-shrink:1}li[tedi-dropdown-item][aria-selected=true] .tedi-dropdown-item-value__label,li[tedi-dropdown-item][aria-selected=true] .tedi-dropdown-item-value__meta,li[tedi-dropdown-item].tedi-dropdown-item--selected .tedi-dropdown-item-value__label,li[tedi-dropdown-item].tedi-dropdown-item--selected .tedi-dropdown-item-value__meta,.tedi-dropdown-item[aria-selected=true] .tedi-dropdown-item-value__label,.tedi-dropdown-item[aria-selected=true] .tedi-dropdown-item-value__meta,.tedi-dropdown-item.tedi-dropdown-item--selected .tedi-dropdown-item-value__label,.tedi-dropdown-item.tedi-dropdown-item--selected .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__label,li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__meta,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__label,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item][aria-disabled=true] .tedi-dropdown-item-value__label,li[tedi-dropdown-item][aria-disabled=true] .tedi-dropdown-item-value__meta,li[tedi-dropdown-item].tedi-dropdown-item--disabled .tedi-dropdown-item-value__label,li[tedi-dropdown-item].tedi-dropdown-item--disabled .tedi-dropdown-item-value__meta,.tedi-dropdown-item[aria-disabled=true] .tedi-dropdown-item-value__label,.tedi-dropdown-item[aria-disabled=true] .tedi-dropdown-item-value__meta,.tedi-dropdown-item.tedi-dropdown-item--disabled .tedi-dropdown-item-value__label,.tedi-dropdown-item.tedi-dropdown-item--disabled .tedi-dropdown-item-value__meta{color:inherit}li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true],li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected,.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true],.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),li[tedi-dropdown-item]:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio)[aria-selected=true]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:has(.tedi-dropdown-item-value--checkbox,.tedi-dropdown-item-value--radio).tedi-dropdown-item--selected:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__radio,.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]) .tedi-dropdown-item-value__radio{background-color:var(--form-checkbox-radio-default-background-hover);border-color:var(--form-checkbox-radio-default-border-hover);border-width:var(--tedi-borders-02)}\n"] }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class DropdownItemValueLabelComponent {
@@ -2170,6 +2170,34 @@ const translationsMap = {
         en: "Columns",
         ru: "Колонки",
     },
+    "table.select-column": {
+        description: "Accessible name of the row-selection control column header",
+        components: ["Table"],
+        et: "Vali",
+        en: "Select",
+        ru: "Выбрать",
+    },
+    "table.expand-column": {
+        description: "Accessible name of the row-expansion control column header",
+        components: ["Table"],
+        et: "Laienda",
+        en: "Expand",
+        ru: "Развернуть",
+    },
+    "table.reorder-column": {
+        description: "Accessible name of the row-reorder control column header",
+        components: ["Table"],
+        et: "Järjesta",
+        en: "Reorder",
+        ru: "Изменить порядок",
+    },
+    "table.scroll-region": {
+        description: "Accessible name of the horizontally scrollable table region",
+        components: ["Table"],
+        et: "Tabeli sisu",
+        en: "Table content",
+        ru: "Содержимое таблицы",
+    },
     "table.expand-row": {
         description: "Label for the expand row toggle (collapsed state)",
         components: ["Table"],
@@ -2268,6 +2296,13 @@ const translationsMap = {
         en: "More information",
         ru: "Дополнительная информация",
     },
+    "scroll-fade.label": {
+        description: "Default label for the scrollable region",
+        components: ["ScrollFade"],
+        et: "Keritav sisu",
+        en: "Scrollable content",
+        ru: "Прокручиваемая область",
+    },
     "pagination.title": {
         description: "Label of the pagination",
         components: ["Table", "Pagination"],
@@ -2872,6 +2907,13 @@ const translationsMap = {
         en: "Minutes",
         ru: "Минуты",
     },
+    "time-picker.times": {
+        description: "Aria label for the dropdown listbox of time slots in the time picker.",
+        components: ["TimePicker"],
+        et: "Kellaajad",
+        en: "Times",
+        ru: "Время",
+    },
     "time-field.clear": {
         description: "Label for the button that clears the selected time from the input field.",
         components: ["TimeField"],
@@ -6922,11 +6964,11 @@ class CalendarDayGridComponent {
         return new Date(day.getFullYear(), day.getMonth(), day.getDate()).getTime();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CalendarDayGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CalendarDayGridComponent, isStandalone: true, selector: "tedi-calendar-day-grid", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: true, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, availableDays: { classPropertyName: "availableDays", publicName: "availableDays", isSignal: true, isRequired: false, transformFunction: null }, unavailableDays: { classPropertyName: "unavailableDays", publicName: "unavailableDays", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null }, dayStatus: { classPropertyName: "dayStatus", publicName: "dayStatus", isSignal: true, isRequired: false, transformFunction: null }, hoveredDate: { classPropertyName: "hoveredDate", publicName: "hoveredDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { daySelect: "daySelect", hoveredDate: "hoveredDateChange" }, ngImport: i0, template: "<table\n  class=\"tedi-calendar-day-grid\"\n  [class.tedi-calendar-day-grid--with-week-numbers]=\"showWeekNumbers()\"\n  role=\"grid\"\n  [attr.aria-label]=\"gridAriaLabel()\"\n  [attr.aria-multiselectable]=\"multiselectable() ? 'true' : null\"\n>\n  <thead>\n    <tr class=\"tedi-calendar-day-grid__header\" role=\"row\">\n      @if (showWeekNumbers()) {\n        <th\n          class=\"tedi-calendar-day-grid__week-number-header\"\n          scope=\"col\"\n          [attr.aria-label]=\"weekNumberHeaderLabel()\"\n        ></th>\n      }\n      @for (name of weekdayNames(); track $index; let i = $index) {\n        <th\n          class=\"tedi-calendar-day-grid__weekday\"\n          role=\"columnheader\"\n          scope=\"col\"\n          [attr.aria-label]=\"weekdayFullNames()[i]\"\n        >\n          <span aria-hidden=\"true\">{{ name }}</span>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (row of grid(); track rowKey(row, $index)) {\n      <tr class=\"tedi-calendar-day-grid__row\" role=\"row\">\n        @if (showWeekNumbers()) {\n          <td\n            class=\"tedi-calendar-day-grid__week-number\"\n            role=\"rowheader\"\n            scope=\"row\"\n            [attr.aria-label]=\"weekNumberLabel(row)\"\n          >\n            <span aria-hidden=\"true\">{{ weekNumber(row) }}</span>\n          </td>\n        }\n        @for (day of row; track cellKey(day, $index)) {\n          <td class=\"tedi-calendar-day-grid__cell\" role=\"gridcell\">\n            @if (day) {\n              <button\n                type=\"button\"\n                [class]=\"cellState(day)\"\n                [attr.aria-selected]=\"isSelected(day) ? 'true' : null\"\n                [attr.aria-disabled]=\"isDisabled(day) ? 'true' : null\"\n                [attr.aria-label]=\"ariaLabelForDay(day)\"\n                [attr.tabindex]=\"isFocusable(day) ? 0 : -1\"\n                [attr.data-date-key]=\"day.getTime()\"\n                (click)=\"handleClick(day)\"\n                (mouseenter)=\"handleMouseEnter(day)\"\n                (mouseleave)=\"handleMouseLeave()\"\n                (focus)=\"handleFocus(day)\"\n                (blur)=\"handleBlur($event)\"\n              >\n                {{ day.getDate() }}\n                @let status = statusForDay(day);\n                @if (status) {\n                  <tedi-status-indicator\n                    class=\"tedi-calendar-day-grid__status\"\n                    [type]=\"status.type\"\n                    size=\"sm\"\n                    [hasBorder]=\"true\"\n                  />\n                }\n              </button>\n            }\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [".tedi-calendar-day-grid{width:max-content;border-spacing:0;border-collapse:collapse}.tedi-calendar-day-grid__header{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);font-weight:400;color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__week-number-header{display:flex;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__row{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__header,.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__row{grid-template-columns:repeat(8,var(--form-calendar-date-width))}.tedi-calendar-day-grid__cell{display:flex;align-items:center;justify-content:center;padding:0}.tedi-calendar-day-grid__week-number{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__day{position:relative;display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-calendar-day-grid__day:hover{background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day:active{background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day:focus-visible{z-index:1;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-day-grid__day--outside{color:var(--form-datepicker-date-text-muted)}.tedi-calendar-day-grid__day--outside:hover{color:var(--general-text-primary)}.tedi-calendar-day-grid__day--today:before{position:absolute;inset:0;pointer-events:none;content:\"\";border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:50%}.tedi-calendar-day-grid__day--available-day{color:var(--form-datepicker-date-text-available);background:var(--form-datepicker-date-available)}.tedi-calendar-day-grid__day--available-day:hover{color:var(--general-text-primary);background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--selected:hover{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected-hover)}.tedi-calendar-day-grid__day--selected.tedi-calendar-day-grid__day--today:before{inset:var(--tedi-borders-01);border-color:var(--form-datepicker-today-border-secondary)}.tedi-calendar-day-grid__day--range-start,.tedi-calendar-day-grid__day--range-end{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--range-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--range-middle,.tedi-calendar-day-grid__day--range-preview-middle{color:var(--general-text-primary);background:var(--form-datepicker-date-active);border-radius:0}.tedi-calendar-day-grid__day--range-preview-start,.tedi-calendar-day-grid__day--range-preview-end{color:var(--general-text-primary);background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day--range-preview-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-preview-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--unavailable-day{color:var(--general-text-primary);text-decoration:line-through;opacity:.3}.tedi-calendar-day-grid__day--disabled,.tedi-calendar-day-grid__day[aria-disabled=true]{pointer-events:none;cursor:not-allowed;opacity:.3}.tedi-calendar-day-grid__status{position:absolute;top:var(--tedi-borders-02);right:0;pointer-events:none}\n"], dependencies: [{ kind: "component", type: StatusIndicatorComponent, selector: "tedi-status-indicator", inputs: ["label", "type", "size", "hasBorder", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CalendarDayGridComponent, isStandalone: true, selector: "tedi-calendar-day-grid", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: true, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, availableDays: { classPropertyName: "availableDays", publicName: "availableDays", isSignal: true, isRequired: false, transformFunction: null }, unavailableDays: { classPropertyName: "unavailableDays", publicName: "unavailableDays", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null }, dayStatus: { classPropertyName: "dayStatus", publicName: "dayStatus", isSignal: true, isRequired: false, transformFunction: null }, hoveredDate: { classPropertyName: "hoveredDate", publicName: "hoveredDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { daySelect: "daySelect", hoveredDate: "hoveredDateChange" }, ngImport: i0, template: "<table\n  class=\"tedi-calendar-day-grid\"\n  [class.tedi-calendar-day-grid--with-week-numbers]=\"showWeekNumbers()\"\n  role=\"grid\"\n  [attr.aria-label]=\"gridAriaLabel()\"\n  [attr.aria-multiselectable]=\"multiselectable() ? 'true' : null\"\n>\n  <thead>\n    <tr class=\"tedi-calendar-day-grid__header\" role=\"row\">\n      @if (showWeekNumbers()) {\n        <th class=\"tedi-calendar-day-grid__week-number-header\" scope=\"col\">\n          <span class=\"sr-only\">{{ weekNumberHeaderLabel() }}</span>\n        </th>\n      }\n      @for (name of weekdayNames(); track $index; let i = $index) {\n        <th\n          class=\"tedi-calendar-day-grid__weekday\"\n          role=\"columnheader\"\n          scope=\"col\"\n          [attr.aria-label]=\"weekdayFullNames()[i]\"\n        >\n          {{ name }}\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (row of grid(); track rowKey(row, $index)) {\n      <tr class=\"tedi-calendar-day-grid__row\" role=\"row\">\n        @if (showWeekNumbers()) {\n          <th\n            class=\"tedi-calendar-day-grid__week-number\"\n            role=\"rowheader\"\n            scope=\"row\"\n            [attr.aria-label]=\"weekNumberLabel(row)\"\n          >\n            {{ weekNumber(row) }}\n          </th>\n        }\n        @for (day of row; track cellKey(day, $index)) {\n          <td\n            class=\"tedi-calendar-day-grid__cell\"\n            [attr.role]=\"day ? 'presentation' : 'gridcell'\"\n          >\n            @if (day) {\n              <button\n                type=\"button\"\n                role=\"gridcell\"\n                [class]=\"cellState(day)\"\n                [attr.aria-selected]=\"isSelected(day) ? 'true' : null\"\n                [attr.aria-disabled]=\"isDisabled(day) ? 'true' : null\"\n                [attr.aria-label]=\"ariaLabelForDay(day)\"\n                [attr.tabindex]=\"isFocusable(day) ? 0 : -1\"\n                [attr.data-date-key]=\"day.getTime()\"\n                (click)=\"handleClick(day)\"\n                (mouseenter)=\"handleMouseEnter(day)\"\n                (mouseleave)=\"handleMouseLeave()\"\n                (focus)=\"handleFocus(day)\"\n                (blur)=\"handleBlur($event)\"\n              >\n                {{ day.getDate() }}\n                @let status = statusForDay(day);\n                @if (status) {\n                  <tedi-status-indicator\n                    class=\"tedi-calendar-day-grid__status\"\n                    [type]=\"status.type\"\n                    size=\"sm\"\n                    [hasBorder]=\"true\"\n                  />\n                }\n              </button>\n            }\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [".tedi-calendar-day-grid{width:max-content;border-spacing:0;border-collapse:collapse}.tedi-calendar-day-grid__header{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);font-weight:400;color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__week-number-header{display:flex;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__row{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__header,.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__row{grid-template-columns:repeat(8,var(--form-calendar-date-width))}.tedi-calendar-day-grid__cell{display:flex;align-items:center;justify-content:center;padding:0}.tedi-calendar-day-grid__week-number{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);font-weight:400;color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__day{position:relative;display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-calendar-day-grid__day:hover{background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day:active{background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day:focus-visible{z-index:1;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-day-grid__day--outside{color:var(--form-datepicker-date-text-muted)}.tedi-calendar-day-grid__day--outside:hover{color:var(--general-text-primary)}.tedi-calendar-day-grid__day--today:before{position:absolute;inset:0;pointer-events:none;content:\"\";border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:50%}.tedi-calendar-day-grid__day--available-day{color:var(--form-datepicker-date-text-available);background:var(--form-datepicker-date-available)}.tedi-calendar-day-grid__day--available-day:hover{color:var(--general-text-primary);background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--selected:hover{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected-hover)}.tedi-calendar-day-grid__day--selected.tedi-calendar-day-grid__day--today:before{inset:var(--tedi-borders-01);border-color:var(--form-datepicker-today-border-secondary)}.tedi-calendar-day-grid__day--range-start,.tedi-calendar-day-grid__day--range-end{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--range-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--range-middle,.tedi-calendar-day-grid__day--range-preview-middle{color:var(--general-text-primary);background:var(--form-datepicker-date-active);border-radius:0}.tedi-calendar-day-grid__day--range-preview-start,.tedi-calendar-day-grid__day--range-preview-end{color:var(--general-text-primary);background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day--range-preview-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-preview-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--unavailable-day{color:var(--general-text-primary);text-decoration:line-through;opacity:.3}.tedi-calendar-day-grid__day--disabled,.tedi-calendar-day-grid__day[aria-disabled=true]{pointer-events:none;cursor:not-allowed;opacity:.3}.tedi-calendar-day-grid__status{position:absolute;top:var(--tedi-borders-02);right:0;pointer-events:none}\n"], dependencies: [{ kind: "component", type: StatusIndicatorComponent, selector: "tedi-status-indicator", inputs: ["label", "type", "size", "hasBorder", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CalendarDayGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tedi-calendar-day-grid", standalone: true, imports: [StatusIndicatorComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\n  class=\"tedi-calendar-day-grid\"\n  [class.tedi-calendar-day-grid--with-week-numbers]=\"showWeekNumbers()\"\n  role=\"grid\"\n  [attr.aria-label]=\"gridAriaLabel()\"\n  [attr.aria-multiselectable]=\"multiselectable() ? 'true' : null\"\n>\n  <thead>\n    <tr class=\"tedi-calendar-day-grid__header\" role=\"row\">\n      @if (showWeekNumbers()) {\n        <th\n          class=\"tedi-calendar-day-grid__week-number-header\"\n          scope=\"col\"\n          [attr.aria-label]=\"weekNumberHeaderLabel()\"\n        ></th>\n      }\n      @for (name of weekdayNames(); track $index; let i = $index) {\n        <th\n          class=\"tedi-calendar-day-grid__weekday\"\n          role=\"columnheader\"\n          scope=\"col\"\n          [attr.aria-label]=\"weekdayFullNames()[i]\"\n        >\n          <span aria-hidden=\"true\">{{ name }}</span>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (row of grid(); track rowKey(row, $index)) {\n      <tr class=\"tedi-calendar-day-grid__row\" role=\"row\">\n        @if (showWeekNumbers()) {\n          <td\n            class=\"tedi-calendar-day-grid__week-number\"\n            role=\"rowheader\"\n            scope=\"row\"\n            [attr.aria-label]=\"weekNumberLabel(row)\"\n          >\n            <span aria-hidden=\"true\">{{ weekNumber(row) }}</span>\n          </td>\n        }\n        @for (day of row; track cellKey(day, $index)) {\n          <td class=\"tedi-calendar-day-grid__cell\" role=\"gridcell\">\n            @if (day) {\n              <button\n                type=\"button\"\n                [class]=\"cellState(day)\"\n                [attr.aria-selected]=\"isSelected(day) ? 'true' : null\"\n                [attr.aria-disabled]=\"isDisabled(day) ? 'true' : null\"\n                [attr.aria-label]=\"ariaLabelForDay(day)\"\n                [attr.tabindex]=\"isFocusable(day) ? 0 : -1\"\n                [attr.data-date-key]=\"day.getTime()\"\n                (click)=\"handleClick(day)\"\n                (mouseenter)=\"handleMouseEnter(day)\"\n                (mouseleave)=\"handleMouseLeave()\"\n                (focus)=\"handleFocus(day)\"\n                (blur)=\"handleBlur($event)\"\n              >\n                {{ day.getDate() }}\n                @let status = statusForDay(day);\n                @if (status) {\n                  <tedi-status-indicator\n                    class=\"tedi-calendar-day-grid__status\"\n                    [type]=\"status.type\"\n                    size=\"sm\"\n                    [hasBorder]=\"true\"\n                  />\n                }\n              </button>\n            }\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [".tedi-calendar-day-grid{width:max-content;border-spacing:0;border-collapse:collapse}.tedi-calendar-day-grid__header{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);font-weight:400;color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__week-number-header{display:flex;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__row{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__header,.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__row{grid-template-columns:repeat(8,var(--form-calendar-date-width))}.tedi-calendar-day-grid__cell{display:flex;align-items:center;justify-content:center;padding:0}.tedi-calendar-day-grid__week-number{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__day{position:relative;display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-calendar-day-grid__day:hover{background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day:active{background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day:focus-visible{z-index:1;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-day-grid__day--outside{color:var(--form-datepicker-date-text-muted)}.tedi-calendar-day-grid__day--outside:hover{color:var(--general-text-primary)}.tedi-calendar-day-grid__day--today:before{position:absolute;inset:0;pointer-events:none;content:\"\";border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:50%}.tedi-calendar-day-grid__day--available-day{color:var(--form-datepicker-date-text-available);background:var(--form-datepicker-date-available)}.tedi-calendar-day-grid__day--available-day:hover{color:var(--general-text-primary);background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--selected:hover{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected-hover)}.tedi-calendar-day-grid__day--selected.tedi-calendar-day-grid__day--today:before{inset:var(--tedi-borders-01);border-color:var(--form-datepicker-today-border-secondary)}.tedi-calendar-day-grid__day--range-start,.tedi-calendar-day-grid__day--range-end{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--range-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--range-middle,.tedi-calendar-day-grid__day--range-preview-middle{color:var(--general-text-primary);background:var(--form-datepicker-date-active);border-radius:0}.tedi-calendar-day-grid__day--range-preview-start,.tedi-calendar-day-grid__day--range-preview-end{color:var(--general-text-primary);background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day--range-preview-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-preview-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--unavailable-day{color:var(--general-text-primary);text-decoration:line-through;opacity:.3}.tedi-calendar-day-grid__day--disabled,.tedi-calendar-day-grid__day[aria-disabled=true]{pointer-events:none;cursor:not-allowed;opacity:.3}.tedi-calendar-day-grid__status{position:absolute;top:var(--tedi-borders-02);right:0;pointer-events:none}\n"] }]
+            args: [{ selector: "tedi-calendar-day-grid", standalone: true, imports: [StatusIndicatorComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\n  class=\"tedi-calendar-day-grid\"\n  [class.tedi-calendar-day-grid--with-week-numbers]=\"showWeekNumbers()\"\n  role=\"grid\"\n  [attr.aria-label]=\"gridAriaLabel()\"\n  [attr.aria-multiselectable]=\"multiselectable() ? 'true' : null\"\n>\n  <thead>\n    <tr class=\"tedi-calendar-day-grid__header\" role=\"row\">\n      @if (showWeekNumbers()) {\n        <th class=\"tedi-calendar-day-grid__week-number-header\" scope=\"col\">\n          <span class=\"sr-only\">{{ weekNumberHeaderLabel() }}</span>\n        </th>\n      }\n      @for (name of weekdayNames(); track $index; let i = $index) {\n        <th\n          class=\"tedi-calendar-day-grid__weekday\"\n          role=\"columnheader\"\n          scope=\"col\"\n          [attr.aria-label]=\"weekdayFullNames()[i]\"\n        >\n          {{ name }}\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (row of grid(); track rowKey(row, $index)) {\n      <tr class=\"tedi-calendar-day-grid__row\" role=\"row\">\n        @if (showWeekNumbers()) {\n          <th\n            class=\"tedi-calendar-day-grid__week-number\"\n            role=\"rowheader\"\n            scope=\"row\"\n            [attr.aria-label]=\"weekNumberLabel(row)\"\n          >\n            {{ weekNumber(row) }}\n          </th>\n        }\n        @for (day of row; track cellKey(day, $index)) {\n          <td\n            class=\"tedi-calendar-day-grid__cell\"\n            [attr.role]=\"day ? 'presentation' : 'gridcell'\"\n          >\n            @if (day) {\n              <button\n                type=\"button\"\n                role=\"gridcell\"\n                [class]=\"cellState(day)\"\n                [attr.aria-selected]=\"isSelected(day) ? 'true' : null\"\n                [attr.aria-disabled]=\"isDisabled(day) ? 'true' : null\"\n                [attr.aria-label]=\"ariaLabelForDay(day)\"\n                [attr.tabindex]=\"isFocusable(day) ? 0 : -1\"\n                [attr.data-date-key]=\"day.getTime()\"\n                (click)=\"handleClick(day)\"\n                (mouseenter)=\"handleMouseEnter(day)\"\n                (mouseleave)=\"handleMouseLeave()\"\n                (focus)=\"handleFocus(day)\"\n                (blur)=\"handleBlur($event)\"\n              >\n                {{ day.getDate() }}\n                @let status = statusForDay(day);\n                @if (status) {\n                  <tedi-status-indicator\n                    class=\"tedi-calendar-day-grid__status\"\n                    [type]=\"status.type\"\n                    size=\"sm\"\n                    [hasBorder]=\"true\"\n                  />\n                }\n              </button>\n            }\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [".tedi-calendar-day-grid{width:max-content;border-spacing:0;border-collapse:collapse}.tedi-calendar-day-grid__header{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);font-weight:400;color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__week-number-header{display:flex;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__row{display:grid;grid-template-columns:repeat(7,var(--form-calendar-date-width))}.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__header,.tedi-calendar-day-grid--with-week-numbers .tedi-calendar-day-grid__row{grid-template-columns:repeat(8,var(--form-calendar-date-width))}.tedi-calendar-day-grid__cell{display:flex;align-items:center;justify-content:center;padding:0}.tedi-calendar-day-grid__week-number{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);font-weight:400;color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-calendar-day-grid__day{position:relative;display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-calendar-day-grid__day:hover{background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day:active{background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day:focus-visible{z-index:1;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-day-grid__day--outside{color:var(--form-datepicker-date-text-muted)}.tedi-calendar-day-grid__day--outside:hover{color:var(--general-text-primary)}.tedi-calendar-day-grid__day--today:before{position:absolute;inset:0;pointer-events:none;content:\"\";border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:50%}.tedi-calendar-day-grid__day--available-day{color:var(--form-datepicker-date-text-available);background:var(--form-datepicker-date-available)}.tedi-calendar-day-grid__day--available-day:hover{color:var(--general-text-primary);background:var(--form-datepicker-date-hover)}.tedi-calendar-day-grid__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--selected:hover{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected-hover)}.tedi-calendar-day-grid__day--selected.tedi-calendar-day-grid__day--today:before{inset:var(--tedi-borders-01);border-color:var(--form-datepicker-today-border-secondary)}.tedi-calendar-day-grid__day--range-start,.tedi-calendar-day-grid__day--range-end{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected)}.tedi-calendar-day-grid__day--range-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--range-middle,.tedi-calendar-day-grid__day--range-preview-middle{color:var(--general-text-primary);background:var(--form-datepicker-date-active);border-radius:0}.tedi-calendar-day-grid__day--range-preview-start,.tedi-calendar-day-grid__day--range-preview-end{color:var(--general-text-primary);background:var(--form-datepicker-date-active)}.tedi-calendar-day-grid__day--range-preview-start{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-calendar-day-grid__day--range-preview-end{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-calendar-day-grid__day--unavailable-day{color:var(--general-text-primary);text-decoration:line-through;opacity:.3}.tedi-calendar-day-grid__day--disabled,.tedi-calendar-day-grid__day[aria-disabled=true]{pointer-events:none;cursor:not-allowed;opacity:.3}.tedi-calendar-day-grid__status{position:absolute;top:var(--tedi-borders-02);right:0;pointer-events:none}\n"] }]
         }], propDecorators: { month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: true }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], availableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDays", required: false }] }], unavailableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableDays", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], dayStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayStatus", required: false }] }], daySelect: [{ type: i0.Output, args: ["daySelect"] }], hoveredDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoveredDate", required: false }] }, { type: i0.Output, args: ["hoveredDateChange"] }] } });
 
 class CalendarMonthGridComponent {
@@ -7218,7 +7260,7 @@ class CalendarHeaderComponent {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CalendarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CalendarHeaderComponent, isStandalone: true, selector: "tedi-calendar-header", inputs: { currentMonth: { classPropertyName: "currentMonth", publicName: "currentMonth", isSignal: true, isRequired: true, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, isMonthDisabled: { classPropertyName: "isMonthDisabled", publicName: "isMonthDisabled", isSignal: true, isRequired: false, transformFunction: null }, isYearDisabled: { classPropertyName: "isYearDisabled", publicName: "isYearDisabled", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, yearPageStart: { classPropertyName: "yearPageStart", publicName: "yearPageStart", isSignal: true, isRequired: false, transformFunction: null }, yearPageSize: { classPropertyName: "yearPageSize", publicName: "yearPageSize", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prevClick: "prevClick", nextClick: "nextClick", monthChange: "monthChange", yearChange: "yearChange", viewChange: "viewChange" }, ngImport: i0, template: "<nav\n  class=\"tedi-calendar-header\"\n  [class.tedi-calendar-header--disabled]=\"inputDisabled()\"\n  [attr.aria-label]=\"navAriaLabel()\"\n>\n  @if (showNavigation()) {\n    <button\n      tedi-button\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-calendar-header__nav-button\"\n      [attr.aria-label]=\"prevAriaLabel()\"\n      [disabled]=\"prevDisabled()\"\n      (click)=\"handlePrev()\"\n    >\n      <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n    </button>\n  }\n\n  <div class=\"tedi-calendar-header__title\">\n    @switch (view()) {\n      @case (\"days\") {\n        @if (monthYearSelectType() === \"dropdown\") {\n          <tedi-dropdown\n            [value]=\"currentMonthIndex().toString()\"\n            (valueChange)=\"handleMonthSelect($event)\"\n          >\n            <button\n              tedi-dropdown-trigger\n              type=\"button\"\n              ariaHaspopup=\"listbox\"\n              class=\"tedi-calendar-header__select\"\n              [attr.aria-label]=\"selectMonthLabel()\"\n              [disabled]=\"inputDisabled()\"\n            >\n              {{ currentMonthLabel() }}\n              <tedi-icon\n                name=\"arrow_drop_down\"\n                class=\"tedi-calendar-header__select-arrow\"\n                color=\"inherit\"\n                size=\"inherit\"\n              />\n            </button>\n            <tedi-dropdown-content\n              dropdownRole=\"listbox\"\n              class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--month\"\n            >\n              @for (option of monthOptions(); track option.index) {\n                <li\n                  tedi-dropdown-item\n                  [value]=\"option.index.toString()\"\n                  [disabled]=\"option.disabled\"\n                >\n                  {{ option.label }}\n                </li>\n              }\n            </tedi-dropdown-content>\n          </tedi-dropdown>\n        } @else if (monthYearSelectType() === \"grid\") {\n          <button\n            type=\"button\"\n            class=\"tedi-calendar-header__label-button\"\n            [attr.aria-label]=\"selectMonthLabel()\"\n            [disabled]=\"inputDisabled()\"\n            (click)=\"handleMonthLabelClick()\"\n          >\n            {{ currentMonthLabel() }}\n          </button>\n        } @else {\n          <span class=\"tedi-calendar-header__static-label\">\n            {{ currentMonthLabel() }}\n          </span>\n        }\n\n        @if (monthYearSelectType() === \"dropdown\") {\n          <tedi-dropdown\n            position=\"bottom-end\"\n            [value]=\"currentYear().toString()\"\n            (valueChange)=\"handleYearSelect($event)\"\n          >\n            <button\n              tedi-dropdown-trigger\n              type=\"button\"\n              ariaHaspopup=\"listbox\"\n              class=\"tedi-calendar-header__select\"\n              [attr.aria-label]=\"selectYearLabel()\"\n              [disabled]=\"inputDisabled()\"\n            >\n              {{ currentYear() }}\n              <tedi-icon\n                name=\"arrow_drop_down\"\n                class=\"tedi-calendar-header__select-arrow\"\n                color=\"inherit\"\n                size=\"inherit\"\n              />\n            </button>\n            <tedi-dropdown-content\n              dropdownRole=\"listbox\"\n              class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n            >\n              @for (option of yearOptions(); track option.year) {\n                <li\n                  tedi-dropdown-item\n                  [value]=\"option.year.toString()\"\n                  [disabled]=\"option.disabled\"\n                >\n                  {{ option.year }}\n                </li>\n              }\n            </tedi-dropdown-content>\n          </tedi-dropdown>\n        } @else if (monthYearSelectType() === \"grid\") {\n          <button\n            type=\"button\"\n            class=\"tedi-calendar-header__label-button\"\n            [attr.aria-label]=\"selectYearLabel()\"\n            [disabled]=\"inputDisabled()\"\n            (click)=\"handleYearLabelClick()\"\n          >\n            {{ currentYear() }}\n          </button>\n        } @else {\n          <span class=\"tedi-calendar-header__static-label\">\n            {{ currentYear() }}\n          </span>\n        }\n      }\n      @case (\"months\") {\n        @if (monthYearSelectType() === \"dropdown\") {\n          <tedi-dropdown\n            [value]=\"currentYear().toString()\"\n            (valueChange)=\"handleYearSelect($event)\"\n          >\n            <button\n              tedi-dropdown-trigger\n              type=\"button\"\n              ariaHaspopup=\"listbox\"\n              class=\"tedi-calendar-header__select\"\n              [attr.aria-label]=\"selectYearLabel()\"\n              [disabled]=\"inputDisabled()\"\n            >\n              {{ currentYear() }}\n              <tedi-icon\n                name=\"arrow_drop_down\"\n                class=\"tedi-calendar-header__select-arrow\"\n                color=\"inherit\"\n                size=\"inherit\"\n              />\n            </button>\n            <tedi-dropdown-content\n              dropdownRole=\"listbox\"\n              class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n            >\n              @for (option of yearOptions(); track option.year) {\n                <li\n                  tedi-dropdown-item\n                  [value]=\"option.year.toString()\"\n                  [disabled]=\"option.disabled\"\n                >\n                  {{ option.year }}\n                </li>\n              }\n            </tedi-dropdown-content>\n          </tedi-dropdown>\n        } @else if (monthYearSelectType() === \"grid\") {\n          <button\n            type=\"button\"\n            class=\"tedi-calendar-header__label-button\"\n            [attr.aria-label]=\"selectYearLabel()\"\n            [disabled]=\"inputDisabled()\"\n            (click)=\"handleYearLabelClick()\"\n          >\n            {{ currentYear() }}\n          </button>\n        } @else {\n          <span class=\"tedi-calendar-header__static-label\">\n            {{ currentYear() }}\n          </span>\n        }\n      }\n      @case (\"years\") {\n        <span class=\"tedi-calendar-header__static-label\">\n          {{ yearRangeLabel() }}\n        </span>\n      }\n    }\n  </div>\n\n  @if (showNavigation()) {\n    <button\n      tedi-button\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-calendar-header__nav-button\"\n      [attr.aria-label]=\"nextAriaLabel()\"\n      [disabled]=\"nextDisabled()\"\n      (click)=\"handleNext()\"\n    >\n      <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n    </button>\n  }\n\n  <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n    {{ captionAnnouncement() }}\n  </span>\n</nav>\n", styles: [".tedi-calendar-header{display:flex;align-items:center;justify-content:space-between}.tedi-calendar-header__title{display:flex;flex:1;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}.tedi-calendar-header__nav-button{flex-shrink:0}.tedi-calendar-header__nav-button.tedi-button .tedi-icon{font-size:var(--icon-03)}.tedi-calendar-header__select,.tedi-calendar-header__label-button{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;padding-left:var(--layout-grid-gutters-04);font-family:inherit;font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize;cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-sm)}.tedi-calendar-header__select:hover:not(:disabled),.tedi-calendar-header__label-button:hover:not(:disabled){color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-calendar-header__select:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select[aria-expanded=true],.tedi-calendar-header__label-button[aria-expanded=true]{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-calendar-header__select[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select:focus-visible,.tedi-calendar-header__label-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-header__select:disabled,.tedi-calendar-header__label-button:disabled{cursor:not-allowed;opacity:.5}.tedi-calendar-header__select-arrow.tedi-icon{flex-shrink:0;font-size:var(--tedi-size-09);color:var(--general-icon-tertiary)}.tedi-calendar-header__dropdown{max-height:15rem}.tedi-calendar-header__static-label{font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize}.tedi-calendar-header--disabled .tedi-calendar-header__select,.tedi-calendar-header--disabled .tedi-calendar-header__label-button{pointer-events:none;cursor:not-allowed;opacity:.5}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CalendarHeaderComponent, isStandalone: true, selector: "tedi-calendar-header", inputs: { currentMonth: { classPropertyName: "currentMonth", publicName: "currentMonth", isSignal: true, isRequired: true, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, isMonthDisabled: { classPropertyName: "isMonthDisabled", publicName: "isMonthDisabled", isSignal: true, isRequired: false, transformFunction: null }, isYearDisabled: { classPropertyName: "isYearDisabled", publicName: "isYearDisabled", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, yearPageStart: { classPropertyName: "yearPageStart", publicName: "yearPageStart", isSignal: true, isRequired: false, transformFunction: null }, yearPageSize: { classPropertyName: "yearPageSize", publicName: "yearPageSize", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prevClick: "prevClick", nextClick: "nextClick", monthChange: "monthChange", yearChange: "yearChange", viewChange: "viewChange" }, ngImport: i0, template: "<div\n  class=\"tedi-calendar-header\"\n  role=\"group\"\n  [class.tedi-calendar-header--disabled]=\"inputDisabled()\"\n  [attr.aria-label]=\"navAriaLabel()\"\n>\n  @if (showNavigation()) {\n    <button\n      tedi-button\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-calendar-header__nav-button\"\n      [attr.aria-label]=\"prevAriaLabel()\"\n      [disabled]=\"prevDisabled()\"\n      (click)=\"handlePrev()\"\n    >\n      <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n    </button>\n  }\n\n  <div class=\"tedi-calendar-header__title\">\n    @switch (view()) {\n      @case (\"days\") {\n        @if (monthYearSelectType() === \"dropdown\") {\n          <tedi-dropdown\n            [value]=\"currentMonthIndex().toString()\"\n            (valueChange)=\"handleMonthSelect($event)\"\n          >\n            <button\n              tedi-dropdown-trigger\n              type=\"button\"\n              ariaHaspopup=\"listbox\"\n              class=\"tedi-calendar-header__select\"\n              [attr.aria-label]=\"selectMonthLabel()\"\n              [disabled]=\"inputDisabled()\"\n            >\n              {{ currentMonthLabel() }}\n              <tedi-icon\n                name=\"arrow_drop_down\"\n                class=\"tedi-calendar-header__select-arrow\"\n                color=\"inherit\"\n                size=\"inherit\"\n              />\n            </button>\n            <tedi-dropdown-content\n              dropdownRole=\"listbox\"\n              class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--month\"\n            >\n              @for (option of monthOptions(); track option.index) {\n                <li\n                  tedi-dropdown-item\n                  [value]=\"option.index.toString()\"\n                  [disabled]=\"option.disabled\"\n                >\n                  {{ option.label }}\n                </li>\n              }\n            </tedi-dropdown-content>\n          </tedi-dropdown>\n        } @else if (monthYearSelectType() === \"grid\") {\n          <button\n            type=\"button\"\n            class=\"tedi-calendar-header__label-button\"\n            [attr.aria-label]=\"selectMonthLabel()\"\n            [disabled]=\"inputDisabled()\"\n            (click)=\"handleMonthLabelClick()\"\n          >\n            {{ currentMonthLabel() }}\n          </button>\n        } @else {\n          <span class=\"tedi-calendar-header__static-label\">\n            {{ currentMonthLabel() }}\n          </span>\n        }\n\n        @if (monthYearSelectType() === \"dropdown\") {\n          <tedi-dropdown\n            position=\"bottom-end\"\n            [value]=\"currentYear().toString()\"\n            (valueChange)=\"handleYearSelect($event)\"\n          >\n            <button\n              tedi-dropdown-trigger\n              type=\"button\"\n              ariaHaspopup=\"listbox\"\n              class=\"tedi-calendar-header__select\"\n              [attr.aria-label]=\"selectYearLabel()\"\n              [disabled]=\"inputDisabled()\"\n            >\n              {{ currentYear() }}\n              <tedi-icon\n                name=\"arrow_drop_down\"\n                class=\"tedi-calendar-header__select-arrow\"\n                color=\"inherit\"\n                size=\"inherit\"\n              />\n            </button>\n            <tedi-dropdown-content\n              dropdownRole=\"listbox\"\n              class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n            >\n              @for (option of yearOptions(); track option.year) {\n                <li\n                  tedi-dropdown-item\n                  [value]=\"option.year.toString()\"\n                  [disabled]=\"option.disabled\"\n                >\n                  {{ option.year }}\n                </li>\n              }\n            </tedi-dropdown-content>\n          </tedi-dropdown>\n        } @else if (monthYearSelectType() === \"grid\") {\n          <button\n            type=\"button\"\n            class=\"tedi-calendar-header__label-button\"\n            [attr.aria-label]=\"selectYearLabel()\"\n            [disabled]=\"inputDisabled()\"\n            (click)=\"handleYearLabelClick()\"\n          >\n            {{ currentYear() }}\n          </button>\n        } @else {\n          <span class=\"tedi-calendar-header__static-label\">\n            {{ currentYear() }}\n          </span>\n        }\n      }\n      @case (\"months\") {\n        @if (monthYearSelectType() === \"dropdown\") {\n          <tedi-dropdown\n            [value]=\"currentYear().toString()\"\n            (valueChange)=\"handleYearSelect($event)\"\n          >\n            <button\n              tedi-dropdown-trigger\n              type=\"button\"\n              ariaHaspopup=\"listbox\"\n              class=\"tedi-calendar-header__select\"\n              [attr.aria-label]=\"selectYearLabel()\"\n              [disabled]=\"inputDisabled()\"\n            >\n              {{ currentYear() }}\n              <tedi-icon\n                name=\"arrow_drop_down\"\n                class=\"tedi-calendar-header__select-arrow\"\n                color=\"inherit\"\n                size=\"inherit\"\n              />\n            </button>\n            <tedi-dropdown-content\n              dropdownRole=\"listbox\"\n              class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n            >\n              @for (option of yearOptions(); track option.year) {\n                <li\n                  tedi-dropdown-item\n                  [value]=\"option.year.toString()\"\n                  [disabled]=\"option.disabled\"\n                >\n                  {{ option.year }}\n                </li>\n              }\n            </tedi-dropdown-content>\n          </tedi-dropdown>\n        } @else if (monthYearSelectType() === \"grid\") {\n          <button\n            type=\"button\"\n            class=\"tedi-calendar-header__label-button\"\n            [attr.aria-label]=\"selectYearLabel()\"\n            [disabled]=\"inputDisabled()\"\n            (click)=\"handleYearLabelClick()\"\n          >\n            {{ currentYear() }}\n          </button>\n        } @else {\n          <span class=\"tedi-calendar-header__static-label\">\n            {{ currentYear() }}\n          </span>\n        }\n      }\n      @case (\"years\") {\n        <span class=\"tedi-calendar-header__static-label\">\n          {{ yearRangeLabel() }}\n        </span>\n      }\n    }\n  </div>\n\n  @if (showNavigation()) {\n    <button\n      tedi-button\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-calendar-header__nav-button\"\n      [attr.aria-label]=\"nextAriaLabel()\"\n      [disabled]=\"nextDisabled()\"\n      (click)=\"handleNext()\"\n    >\n      <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n    </button>\n  }\n\n  <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n    {{ captionAnnouncement() }}\n  </span>\n</div>\n", styles: [".tedi-calendar-header{display:flex;align-items:center;justify-content:space-between}.tedi-calendar-header__title{display:flex;flex:1;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}.tedi-calendar-header__nav-button{flex-shrink:0}.tedi-calendar-header__nav-button.tedi-button .tedi-icon{font-size:var(--icon-03)}.tedi-calendar-header__select,.tedi-calendar-header__label-button{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;padding-left:var(--layout-grid-gutters-04);font-family:inherit;font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize;cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-sm)}.tedi-calendar-header__select:hover:not(:disabled),.tedi-calendar-header__label-button:hover:not(:disabled){color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-calendar-header__select:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select[aria-expanded=true],.tedi-calendar-header__label-button[aria-expanded=true]{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-calendar-header__select[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select:focus-visible,.tedi-calendar-header__label-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-header__select:disabled,.tedi-calendar-header__label-button:disabled{cursor:not-allowed;opacity:.5}.tedi-calendar-header__select-arrow.tedi-icon{flex-shrink:0;font-size:var(--tedi-size-09);color:var(--general-icon-tertiary)}.tedi-calendar-header__dropdown{max-height:15rem}.tedi-calendar-header__static-label{font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize}.tedi-calendar-header--disabled .tedi-calendar-header__select,.tedi-calendar-header--disabled .tedi-calendar-header__label-button{pointer-events:none;cursor:not-allowed;opacity:.5}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemComponent, selector: "li[tedi-dropdown-item]", inputs: ["value", "disabled", "clipContent", "closeOnSelect"], outputs: ["itemSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
             type: Component,
@@ -7229,7 +7271,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         DropdownTriggerDirective,
                         DropdownContentComponent,
                         DropdownItemComponent,
-                    ], template: "<nav\n  class=\"tedi-calendar-header\"\n  [class.tedi-calendar-header--disabled]=\"inputDisabled()\"\n  [attr.aria-label]=\"navAriaLabel()\"\n>\n  @if (showNavigation()) {\n    <button\n      tedi-button\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-calendar-header__nav-button\"\n      [attr.aria-label]=\"prevAriaLabel()\"\n      [disabled]=\"prevDisabled()\"\n      (click)=\"handlePrev()\"\n    >\n      <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n    </button>\n  }\n\n  <div class=\"tedi-calendar-header__title\">\n    @switch (view()) {\n      @case (\"days\") {\n        @if (monthYearSelectType() === \"dropdown\") {\n          <tedi-dropdown\n            [value]=\"currentMonthIndex().toString()\"\n            (valueChange)=\"handleMonthSelect($event)\"\n          >\n            <button\n              tedi-dropdown-trigger\n              type=\"button\"\n              ariaHaspopup=\"listbox\"\n              class=\"tedi-calendar-header__select\"\n              [attr.aria-label]=\"selectMonthLabel()\"\n              [disabled]=\"inputDisabled()\"\n            >\n              {{ currentMonthLabel() }}\n              <tedi-icon\n                name=\"arrow_drop_down\"\n                class=\"tedi-calendar-header__select-arrow\"\n                color=\"inherit\"\n                size=\"inherit\"\n              />\n            </button>\n            <tedi-dropdown-content\n              dropdownRole=\"listbox\"\n              class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--month\"\n            >\n              @for (option of monthOptions(); track option.index) {\n                <li\n                  tedi-dropdown-item\n                  [value]=\"option.index.toString()\"\n                  [disabled]=\"option.disabled\"\n                >\n                  {{ option.label }}\n                </li>\n              }\n            </tedi-dropdown-content>\n          </tedi-dropdown>\n        } @else if (monthYearSelectType() === \"grid\") {\n          <button\n            type=\"button\"\n            class=\"tedi-calendar-header__label-button\"\n            [attr.aria-label]=\"selectMonthLabel()\"\n            [disabled]=\"inputDisabled()\"\n            (click)=\"handleMonthLabelClick()\"\n          >\n            {{ currentMonthLabel() }}\n          </button>\n        } @else {\n          <span class=\"tedi-calendar-header__static-label\">\n            {{ currentMonthLabel() }}\n          </span>\n        }\n\n        @if (monthYearSelectType() === \"dropdown\") {\n          <tedi-dropdown\n            position=\"bottom-end\"\n            [value]=\"currentYear().toString()\"\n            (valueChange)=\"handleYearSelect($event)\"\n          >\n            <button\n              tedi-dropdown-trigger\n              type=\"button\"\n              ariaHaspopup=\"listbox\"\n              class=\"tedi-calendar-header__select\"\n              [attr.aria-label]=\"selectYearLabel()\"\n              [disabled]=\"inputDisabled()\"\n            >\n              {{ currentYear() }}\n              <tedi-icon\n                name=\"arrow_drop_down\"\n                class=\"tedi-calendar-header__select-arrow\"\n                color=\"inherit\"\n                size=\"inherit\"\n              />\n            </button>\n            <tedi-dropdown-content\n              dropdownRole=\"listbox\"\n              class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n            >\n              @for (option of yearOptions(); track option.year) {\n                <li\n                  tedi-dropdown-item\n                  [value]=\"option.year.toString()\"\n                  [disabled]=\"option.disabled\"\n                >\n                  {{ option.year }}\n                </li>\n              }\n            </tedi-dropdown-content>\n          </tedi-dropdown>\n        } @else if (monthYearSelectType() === \"grid\") {\n          <button\n            type=\"button\"\n            class=\"tedi-calendar-header__label-button\"\n            [attr.aria-label]=\"selectYearLabel()\"\n            [disabled]=\"inputDisabled()\"\n            (click)=\"handleYearLabelClick()\"\n          >\n            {{ currentYear() }}\n          </button>\n        } @else {\n          <span class=\"tedi-calendar-header__static-label\">\n            {{ currentYear() }}\n          </span>\n        }\n      }\n      @case (\"months\") {\n        @if (monthYearSelectType() === \"dropdown\") {\n          <tedi-dropdown\n            [value]=\"currentYear().toString()\"\n            (valueChange)=\"handleYearSelect($event)\"\n          >\n            <button\n              tedi-dropdown-trigger\n              type=\"button\"\n              ariaHaspopup=\"listbox\"\n              class=\"tedi-calendar-header__select\"\n              [attr.aria-label]=\"selectYearLabel()\"\n              [disabled]=\"inputDisabled()\"\n            >\n              {{ currentYear() }}\n              <tedi-icon\n                name=\"arrow_drop_down\"\n                class=\"tedi-calendar-header__select-arrow\"\n                color=\"inherit\"\n                size=\"inherit\"\n              />\n            </button>\n            <tedi-dropdown-content\n              dropdownRole=\"listbox\"\n              class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n            >\n              @for (option of yearOptions(); track option.year) {\n                <li\n                  tedi-dropdown-item\n                  [value]=\"option.year.toString()\"\n                  [disabled]=\"option.disabled\"\n                >\n                  {{ option.year }}\n                </li>\n              }\n            </tedi-dropdown-content>\n          </tedi-dropdown>\n        } @else if (monthYearSelectType() === \"grid\") {\n          <button\n            type=\"button\"\n            class=\"tedi-calendar-header__label-button\"\n            [attr.aria-label]=\"selectYearLabel()\"\n            [disabled]=\"inputDisabled()\"\n            (click)=\"handleYearLabelClick()\"\n          >\n            {{ currentYear() }}\n          </button>\n        } @else {\n          <span class=\"tedi-calendar-header__static-label\">\n            {{ currentYear() }}\n          </span>\n        }\n      }\n      @case (\"years\") {\n        <span class=\"tedi-calendar-header__static-label\">\n          {{ yearRangeLabel() }}\n        </span>\n      }\n    }\n  </div>\n\n  @if (showNavigation()) {\n    <button\n      tedi-button\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-calendar-header__nav-button\"\n      [attr.aria-label]=\"nextAriaLabel()\"\n      [disabled]=\"nextDisabled()\"\n      (click)=\"handleNext()\"\n    >\n      <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n    </button>\n  }\n\n  <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n    {{ captionAnnouncement() }}\n  </span>\n</nav>\n", styles: [".tedi-calendar-header{display:flex;align-items:center;justify-content:space-between}.tedi-calendar-header__title{display:flex;flex:1;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}.tedi-calendar-header__nav-button{flex-shrink:0}.tedi-calendar-header__nav-button.tedi-button .tedi-icon{font-size:var(--icon-03)}.tedi-calendar-header__select,.tedi-calendar-header__label-button{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;padding-left:var(--layout-grid-gutters-04);font-family:inherit;font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize;cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-sm)}.tedi-calendar-header__select:hover:not(:disabled),.tedi-calendar-header__label-button:hover:not(:disabled){color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-calendar-header__select:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select[aria-expanded=true],.tedi-calendar-header__label-button[aria-expanded=true]{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-calendar-header__select[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select:focus-visible,.tedi-calendar-header__label-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-header__select:disabled,.tedi-calendar-header__label-button:disabled{cursor:not-allowed;opacity:.5}.tedi-calendar-header__select-arrow.tedi-icon{flex-shrink:0;font-size:var(--tedi-size-09);color:var(--general-icon-tertiary)}.tedi-calendar-header__dropdown{max-height:15rem}.tedi-calendar-header__static-label{font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize}.tedi-calendar-header--disabled .tedi-calendar-header__select,.tedi-calendar-header--disabled .tedi-calendar-header__label-button{pointer-events:none;cursor:not-allowed;opacity:.5}\n"] }]
+                    ], template: "<div\n  class=\"tedi-calendar-header\"\n  role=\"group\"\n  [class.tedi-calendar-header--disabled]=\"inputDisabled()\"\n  [attr.aria-label]=\"navAriaLabel()\"\n>\n  @if (showNavigation()) {\n    <button\n      tedi-button\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-calendar-header__nav-button\"\n      [attr.aria-label]=\"prevAriaLabel()\"\n      [disabled]=\"prevDisabled()\"\n      (click)=\"handlePrev()\"\n    >\n      <tedi-icon name=\"arrow_back\" [size]=\"18\" />\n    </button>\n  }\n\n  <div class=\"tedi-calendar-header__title\">\n    @switch (view()) {\n      @case (\"days\") {\n        @if (monthYearSelectType() === \"dropdown\") {\n          <tedi-dropdown\n            [value]=\"currentMonthIndex().toString()\"\n            (valueChange)=\"handleMonthSelect($event)\"\n          >\n            <button\n              tedi-dropdown-trigger\n              type=\"button\"\n              ariaHaspopup=\"listbox\"\n              class=\"tedi-calendar-header__select\"\n              [attr.aria-label]=\"selectMonthLabel()\"\n              [disabled]=\"inputDisabled()\"\n            >\n              {{ currentMonthLabel() }}\n              <tedi-icon\n                name=\"arrow_drop_down\"\n                class=\"tedi-calendar-header__select-arrow\"\n                color=\"inherit\"\n                size=\"inherit\"\n              />\n            </button>\n            <tedi-dropdown-content\n              dropdownRole=\"listbox\"\n              class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--month\"\n            >\n              @for (option of monthOptions(); track option.index) {\n                <li\n                  tedi-dropdown-item\n                  [value]=\"option.index.toString()\"\n                  [disabled]=\"option.disabled\"\n                >\n                  {{ option.label }}\n                </li>\n              }\n            </tedi-dropdown-content>\n          </tedi-dropdown>\n        } @else if (monthYearSelectType() === \"grid\") {\n          <button\n            type=\"button\"\n            class=\"tedi-calendar-header__label-button\"\n            [attr.aria-label]=\"selectMonthLabel()\"\n            [disabled]=\"inputDisabled()\"\n            (click)=\"handleMonthLabelClick()\"\n          >\n            {{ currentMonthLabel() }}\n          </button>\n        } @else {\n          <span class=\"tedi-calendar-header__static-label\">\n            {{ currentMonthLabel() }}\n          </span>\n        }\n\n        @if (monthYearSelectType() === \"dropdown\") {\n          <tedi-dropdown\n            position=\"bottom-end\"\n            [value]=\"currentYear().toString()\"\n            (valueChange)=\"handleYearSelect($event)\"\n          >\n            <button\n              tedi-dropdown-trigger\n              type=\"button\"\n              ariaHaspopup=\"listbox\"\n              class=\"tedi-calendar-header__select\"\n              [attr.aria-label]=\"selectYearLabel()\"\n              [disabled]=\"inputDisabled()\"\n            >\n              {{ currentYear() }}\n              <tedi-icon\n                name=\"arrow_drop_down\"\n                class=\"tedi-calendar-header__select-arrow\"\n                color=\"inherit\"\n                size=\"inherit\"\n              />\n            </button>\n            <tedi-dropdown-content\n              dropdownRole=\"listbox\"\n              class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n            >\n              @for (option of yearOptions(); track option.year) {\n                <li\n                  tedi-dropdown-item\n                  [value]=\"option.year.toString()\"\n                  [disabled]=\"option.disabled\"\n                >\n                  {{ option.year }}\n                </li>\n              }\n            </tedi-dropdown-content>\n          </tedi-dropdown>\n        } @else if (monthYearSelectType() === \"grid\") {\n          <button\n            type=\"button\"\n            class=\"tedi-calendar-header__label-button\"\n            [attr.aria-label]=\"selectYearLabel()\"\n            [disabled]=\"inputDisabled()\"\n            (click)=\"handleYearLabelClick()\"\n          >\n            {{ currentYear() }}\n          </button>\n        } @else {\n          <span class=\"tedi-calendar-header__static-label\">\n            {{ currentYear() }}\n          </span>\n        }\n      }\n      @case (\"months\") {\n        @if (monthYearSelectType() === \"dropdown\") {\n          <tedi-dropdown\n            [value]=\"currentYear().toString()\"\n            (valueChange)=\"handleYearSelect($event)\"\n          >\n            <button\n              tedi-dropdown-trigger\n              type=\"button\"\n              ariaHaspopup=\"listbox\"\n              class=\"tedi-calendar-header__select\"\n              [attr.aria-label]=\"selectYearLabel()\"\n              [disabled]=\"inputDisabled()\"\n            >\n              {{ currentYear() }}\n              <tedi-icon\n                name=\"arrow_drop_down\"\n                class=\"tedi-calendar-header__select-arrow\"\n                color=\"inherit\"\n                size=\"inherit\"\n              />\n            </button>\n            <tedi-dropdown-content\n              dropdownRole=\"listbox\"\n              class=\"tedi-calendar-header__dropdown tedi-calendar-header__dropdown--year\"\n            >\n              @for (option of yearOptions(); track option.year) {\n                <li\n                  tedi-dropdown-item\n                  [value]=\"option.year.toString()\"\n                  [disabled]=\"option.disabled\"\n                >\n                  {{ option.year }}\n                </li>\n              }\n            </tedi-dropdown-content>\n          </tedi-dropdown>\n        } @else if (monthYearSelectType() === \"grid\") {\n          <button\n            type=\"button\"\n            class=\"tedi-calendar-header__label-button\"\n            [attr.aria-label]=\"selectYearLabel()\"\n            [disabled]=\"inputDisabled()\"\n            (click)=\"handleYearLabelClick()\"\n          >\n            {{ currentYear() }}\n          </button>\n        } @else {\n          <span class=\"tedi-calendar-header__static-label\">\n            {{ currentYear() }}\n          </span>\n        }\n      }\n      @case (\"years\") {\n        <span class=\"tedi-calendar-header__static-label\">\n          {{ yearRangeLabel() }}\n        </span>\n      }\n    }\n  </div>\n\n  @if (showNavigation()) {\n    <button\n      tedi-button\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-calendar-header__nav-button\"\n      [attr.aria-label]=\"nextAriaLabel()\"\n      [disabled]=\"nextDisabled()\"\n      (click)=\"handleNext()\"\n    >\n      <tedi-icon name=\"arrow_forward\" [size]=\"18\" />\n    </button>\n  }\n\n  <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n    {{ captionAnnouncement() }}\n  </span>\n</div>\n", styles: [".tedi-calendar-header{display:flex;align-items:center;justify-content:space-between}.tedi-calendar-header__title{display:flex;flex:1;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}.tedi-calendar-header__nav-button{flex-shrink:0}.tedi-calendar-header__nav-button.tedi-button .tedi-icon{font-size:var(--icon-03)}.tedi-calendar-header__select,.tedi-calendar-header__label-button{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;padding-left:var(--layout-grid-gutters-04);font-family:inherit;font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize;cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-sm)}.tedi-calendar-header__select:hover:not(:disabled),.tedi-calendar-header__label-button:hover:not(:disabled){color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-calendar-header__select:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button:hover:not(:disabled) .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select[aria-expanded=true],.tedi-calendar-header__label-button[aria-expanded=true]{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-calendar-header__select[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon,.tedi-calendar-header__label-button[aria-expanded=true] .tedi-calendar-header__select-arrow.tedi-icon{color:inherit}.tedi-calendar-header__select:focus-visible,.tedi-calendar-header__label-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-calendar-header__select:disabled,.tedi-calendar-header__label-button:disabled{cursor:not-allowed;opacity:.5}.tedi-calendar-header__select-arrow.tedi-icon{flex-shrink:0;font-size:var(--tedi-size-09);color:var(--general-icon-tertiary)}.tedi-calendar-header__dropdown{max-height:15rem}.tedi-calendar-header__static-label{font-size:var(--body-regular-size);font-weight:500;color:var(--general-text-primary);text-transform:capitalize}.tedi-calendar-header--disabled .tedi-calendar-header__select,.tedi-calendar-header--disabled .tedi-calendar-header__label-button{pointer-events:none;cursor:not-allowed;opacity:.5}\n"] }]
         }], propDecorators: { currentMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentMonth", required: true }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], showNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigation", required: false }] }], monthYearSelectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthYearSelectType", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], isMonthDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMonthDisabled", required: false }] }], isYearDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isYearDisabled", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], yearPageStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearPageStart", required: false }] }], yearPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearPageSize", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], prevClick: [{ type: i0.Output, args: ["prevClick"] }], nextClick: [{ type: i0.Output, args: ["nextClick"] }], monthChange: [{ type: i0.Output, args: ["monthChange"] }], yearChange: [{ type: i0.Output, args: ["yearChange"] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }] } });
 
 const YEAR_PAGE_SIZE = 12;
@@ -9018,6 +9060,14 @@ class PopoverTriggerDirective {
      * @default false
      */
     underline = input(false, ...(ngDevMode ? [{ debugName: "underline" }] : []));
+    /**
+     * When `false`, the trigger drops its `button` role and dialog ARIA
+     * (`aria-haspopup`, `aria-expanded`, `aria-controls`). Use this when the element
+     * is only a positioning anchor and an inner control is the real, labelled trigger
+     * — e.g. a field wrapper whose icon button opens the popover.
+     * @default true
+     */
+    interactive = input(true, ...(ngDevMode ? [{ debugName: "interactive" }] : []));
     host = inject(ElementRef);
     popover = inject(PopoverComponent);
     overlayOrigin = inject(CdkOverlayOrigin, { self: true });
@@ -9025,7 +9075,7 @@ class PopoverTriggerDirective {
         this.popover.togglePopover();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.24", type: PopoverTriggerDirective, isStandalone: true, selector: "[tedi-popover-trigger]", inputs: { underline: { classPropertyName: "underline", publicName: "underline", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "button", "aria-haspopup": "dialog" }, listeners: { "click": "onClick()" }, properties: { "id": "popover.containerId() + '_trigger'", "attr.aria-expanded": "popover.isOpen()", "attr.aria-controls": "popover.containerId() || null", "class.tedi-popover-trigger__text": "underline()" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.24", type: PopoverTriggerDirective, isStandalone: true, selector: "[tedi-popover-trigger]", inputs: { underline: { classPropertyName: "underline", publicName: "underline", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" }, listeners: { "click": "onClick()" }, properties: { "attr.role": "interactive() ? 'button' : null", "attr.aria-haspopup": "interactive() ? 'dialog' : null", "id": "popover.containerId() + '_trigger'", "attr.aria-expanded": "interactive() ? popover.isOpen() : null", "attr.aria-controls": "interactive() ? (popover.containerId() || null) : null", "class.tedi-popover-trigger__text": "underline()" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverTriggerDirective, decorators: [{
             type: Directive,
@@ -9035,15 +9085,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                     hostDirectives: [CdkOverlayOrigin],
                     host: {
                         tabindex: "0",
-                        role: "button",
-                        "aria-haspopup": "dialog",
+                        "[attr.role]": "interactive() ? 'button' : null",
+                        "[attr.aria-haspopup]": "interactive() ? 'dialog' : null",
                         "[id]": "popover.containerId() + '_trigger'",
-                        "[attr.aria-expanded]": "popover.isOpen()",
-                        "[attr.aria-controls]": "popover.containerId() || null",
+                        "[attr.aria-expanded]": "interactive() ? popover.isOpen() : null",
+                        "[attr.aria-controls]": "interactive() ? (popover.containerId() || null) : null",
                         "[class.tedi-popover-trigger__text]": "underline()",
                     },
                 }]
-        }], propDecorators: { underline: [{ type: i0.Input, args: [{ isSignal: true, alias: "underline", required: false }] }], onClick: [{
+        }], propDecorators: { underline: [{ type: i0.Input, args: [{ isSignal: true, alias: "underline", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], onClick: [{
                 type: HostListener,
                 args: ["click"]
             }] } });
@@ -10182,7 +10232,7 @@ class DatePickerComponent {
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "calendarGrid", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #inputElement\n  type=\"text\"\n  class=\"tedi-date-picker__input\"\n  role=\"combobox\"\n  aria-autocomplete=\"none\"\n  aria-haspopup=\"dialog\"\n  [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n  [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n  [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n  [attr.id]=\"inputId()\"\n  [attr.placeholder]=\"inputPlaceholder()\"\n  [attr.aria-expanded]=\"!fieldDisabled() && popover().isOpen()\"\n  [attr.aria-controls]=\"uniqueId\"\n  [attr.aria-readonly]=\"!allowManualInput()\"\n  [readOnly]=\"!allowManualInput()\"\n  [value]=\"inputValue()\"\n  [disabled]=\"fieldDisabled()\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onInputBlur()\"\n  (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n  @if (selected()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-picker__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n      [disabled]=\"fieldDisabled()\"\n      (click)=\"clearInput()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <tedi-popover\n    style=\"display: flex; align-items: center\"\n    position=\"bottom-end\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <button\n      tedi-button\n      tedi-popover-trigger\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-date-picker__toggle\"\n      [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n      [disabled]=\"fieldDisabled()\"\n      (click)=\"openCalendar()\"\n    >\n      <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n    </button>\n    <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n      <div\n        class=\"tedi-date-picker__calendar\"\n        (keydown)=\"onCalendarKeyDown($event)\"\n      >\n        <tedi-date-picker-header\n          [uniqueId]=\"uniqueId\"\n          [currentView]=\"currentView()\"\n          [month]=\"month()\"\n          [monthMode]=\"monthMode()\"\n          [yearMode]=\"yearMode()\"\n          [showNavigation]=\"showNavigation()\"\n          [canGoPrev]=\"canGoPrev()\"\n          [canGoNext]=\"canGoNext()\"\n          [selectedYear]=\"selectedYear()\"\n          [years]=\"years()\"\n          [pagedYears]=\"pagedYears()\"\n          [hasPrevYearPage]=\"hasPrevYearPage()\"\n          [hasNextYearPage]=\"hasNextYearPage()\"\n          [disabledMonths]=\"disabledMonths()\"\n          [disabledYears]=\"disabledYears()\"\n          (prevMonth)=\"prevMonth()\"\n          (nextMonth)=\"nextMonth()\"\n          (monthSelect)=\"onMonthSelect($event)\"\n          (yearSelect)=\"onYearSelect($event)\"\n          (monthClick)=\"onMonthClick()\"\n          (yearClick)=\"onYearClick()\"\n          (prevYearPage)=\"prevYearPage()\"\n          (nextYearPage)=\"nextYearPage()\"\n        />\n\n        @if (currentView() === \"calendar-grid\") {\n          <tedi-date-picker-calendar-grid\n            #gridElement\n            [gridId]=\"uniqueId\"\n            [weekRows]=\"weekRows()\"\n            [weekNumbers]=\"weekNumbers()\"\n            [showWeekNumbers]=\"showWeekNumbers()\"\n            [activeDate]=\"activeDate()\"\n            [selected]=\"selected()\"\n            [today]=\"today\"\n            (daySelect)=\"selectDay($event)\"\n            (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n          />\n        } @else if (currentView() === \"month-grid\") {\n          <tedi-date-picker-month-grid\n            [currentMonth]=\"month()\"\n            (monthSelect)=\"onMonthSelect($event)\"\n          />\n        } @else if (currentView() === \"year-grid\") {\n          <tedi-date-picker-year-grid\n            [pagedYears]=\"pagedYears()\"\n            [selectedYear]=\"selectedYear()\"\n            (yearSelect)=\"onYearSelect($event)\"\n          />\n        }\n      </div>\n    </tedi-popover-content>\n  </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:inset 0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed;background:transparent}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center;min-width:0}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--tedi-borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: DatePickerHeaderComponent, selector: "tedi-date-picker-header", inputs: ["uniqueId", "currentView", "month", "monthMode", "yearMode", "showNavigation", "canGoPrev", "canGoNext", "selectedYear", "years", "pagedYears", "hasPrevYearPage", "hasNextYearPage", "disabledMonths", "disabledYears"], outputs: ["prevMonth", "nextMonth", "monthSelect", "yearSelect", "monthClick", "yearClick", "prevYearPage", "nextYearPage"] }, { kind: "component", type: DatePickerCalendarGridComponent, selector: "tedi-date-picker-calendar-grid", inputs: ["gridId", "weekRows", "weekNumbers", "showWeekNumbers", "activeDate", "selected", "today"], outputs: ["daySelect", "dayKeydown"] }, { kind: "component", type: DatePickerMonthGridComponent, selector: "tedi-date-picker-month-grid", inputs: ["currentMonth"], outputs: ["monthSelect"] }, { kind: "component", type: DatePickerYearGridComponent, selector: "tedi-date-picker-year-grid", inputs: ["pagedYears", "selectedYear"], outputs: ["yearSelect"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "calendarGrid", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #inputElement\n  type=\"text\"\n  class=\"tedi-date-picker__input\"\n  role=\"combobox\"\n  aria-autocomplete=\"none\"\n  aria-haspopup=\"dialog\"\n  [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n  [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n  [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n  [attr.id]=\"inputId()\"\n  [attr.placeholder]=\"inputPlaceholder()\"\n  [attr.aria-expanded]=\"!fieldDisabled() && popover().isOpen()\"\n  [attr.aria-controls]=\"uniqueId\"\n  [attr.aria-readonly]=\"!allowManualInput()\"\n  [readOnly]=\"!allowManualInput()\"\n  [value]=\"inputValue()\"\n  [disabled]=\"fieldDisabled()\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onInputBlur()\"\n  (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n  @if (selected()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-picker__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n      [disabled]=\"fieldDisabled()\"\n      (click)=\"clearInput()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <tedi-popover\n    style=\"display: flex; align-items: center\"\n    position=\"bottom-end\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <button\n      tedi-button\n      tedi-popover-trigger\n      type=\"button\"\n      variant=\"neutral\"\n      size=\"small\"\n      class=\"tedi-date-picker__toggle\"\n      [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n      [disabled]=\"fieldDisabled()\"\n      (click)=\"openCalendar()\"\n    >\n      <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n    </button>\n    <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n      <div\n        class=\"tedi-date-picker__calendar\"\n        (keydown)=\"onCalendarKeyDown($event)\"\n      >\n        <tedi-date-picker-header\n          [uniqueId]=\"uniqueId\"\n          [currentView]=\"currentView()\"\n          [month]=\"month()\"\n          [monthMode]=\"monthMode()\"\n          [yearMode]=\"yearMode()\"\n          [showNavigation]=\"showNavigation()\"\n          [canGoPrev]=\"canGoPrev()\"\n          [canGoNext]=\"canGoNext()\"\n          [selectedYear]=\"selectedYear()\"\n          [years]=\"years()\"\n          [pagedYears]=\"pagedYears()\"\n          [hasPrevYearPage]=\"hasPrevYearPage()\"\n          [hasNextYearPage]=\"hasNextYearPage()\"\n          [disabledMonths]=\"disabledMonths()\"\n          [disabledYears]=\"disabledYears()\"\n          (prevMonth)=\"prevMonth()\"\n          (nextMonth)=\"nextMonth()\"\n          (monthSelect)=\"onMonthSelect($event)\"\n          (yearSelect)=\"onYearSelect($event)\"\n          (monthClick)=\"onMonthClick()\"\n          (yearClick)=\"onYearClick()\"\n          (prevYearPage)=\"prevYearPage()\"\n          (nextYearPage)=\"nextYearPage()\"\n        />\n\n        @if (currentView() === \"calendar-grid\") {\n          <tedi-date-picker-calendar-grid\n            #gridElement\n            [gridId]=\"uniqueId\"\n            [weekRows]=\"weekRows()\"\n            [weekNumbers]=\"weekNumbers()\"\n            [showWeekNumbers]=\"showWeekNumbers()\"\n            [activeDate]=\"activeDate()\"\n            [selected]=\"selected()\"\n            [today]=\"today\"\n            (daySelect)=\"selectDay($event)\"\n            (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n          />\n        } @else if (currentView() === \"month-grid\") {\n          <tedi-date-picker-month-grid\n            [currentMonth]=\"month()\"\n            (monthSelect)=\"onMonthSelect($event)\"\n          />\n        } @else if (currentView() === \"year-grid\") {\n          <tedi-date-picker-year-grid\n            [pagedYears]=\"pagedYears()\"\n            [selectedYear]=\"selectedYear()\"\n            (yearSelect)=\"onYearSelect($event)\"\n          />\n        }\n      </div>\n    </tedi-popover-content>\n  </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:inset 0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed;background:transparent}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center;min-width:0}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--tedi-borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: DatePickerHeaderComponent, selector: "tedi-date-picker-header", inputs: ["uniqueId", "currentView", "month", "monthMode", "yearMode", "showNavigation", "canGoPrev", "canGoNext", "selectedYear", "years", "pagedYears", "hasPrevYearPage", "hasNextYearPage", "disabledMonths", "disabledYears"], outputs: ["prevMonth", "nextMonth", "monthSelect", "yearSelect", "monthClick", "yearClick", "prevYearPage", "nextYearPage"] }, { kind: "component", type: DatePickerCalendarGridComponent, selector: "tedi-date-picker-calendar-grid", inputs: ["gridId", "weekRows", "weekNumbers", "showWeekNumbers", "activeDate", "selected", "today"], outputs: ["daySelect", "dayKeydown"] }, { kind: "component", type: DatePickerMonthGridComponent, selector: "tedi-date-picker-month-grid", inputs: ["currentMonth"], outputs: ["monthSelect"] }, { kind: "component", type: DatePickerYearGridComponent, selector: "tedi-date-picker-year-grid", inputs: ["pagedYears", "selectedYear"], outputs: ["yearSelect"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -10355,6 +10405,11 @@ class NumberFieldComponent {
      * @default false
      */
     fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    /**
+     * Accessible label for the input, used when no visible `label` is provided
+     * (e.g. when the field is embedded as a compact addon of another control).
+     */
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
     inputRef;
     formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
     onChange = () => { };
@@ -10420,13 +10475,13 @@ class NumberFieldComponent {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: NumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: NumberFieldComponent, isStandalone: true, selector: "tedi-number-field", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: NumberFieldComponent, isStandalone: true, selector: "tedi-number-field", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NumberFieldComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "@if (label()) {\n  <label tedi-label [for]=\"inputId()\" [required]=\"required()\" [size]=\"size()\">\n    {{ label() }}\n  </label>\n}\n<div\n  [class]=\"{\n    'tedi-number-field': true,\n    'tedi-number-field--invalid': isInvalid(),\n    'tedi-number-field--disabled': isDisabled(),\n  }\"\n>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--decrement': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"decrementDisabled()\"\n    [attr.aria-label]=\"'numberField.decrement' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('decrement')\"\n  >\n    <tedi-icon name=\"remove\" [size]=\"18\" />\n  </button>\n  <div\n    [class]=\"{\n      'tedi-number-field__input-wrapper': true,\n      'tedi-number-field__input-wrapper--small': size() === 'small',\n      'tedi-number-field__input-wrapper--disabled': isDisabled(),\n      'tedi-number-field__input-wrapper--with-suffix': suffix(),\n      'tedi-number-field__input-wrapper--full-width': fullWidth(),\n    }\"\n    (click)=\"focus()\"\n  >\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      type=\"number\"\n      inputmode=\"numeric\"\n      class=\"tedi-number-field__input\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [attr.step]=\"step()\"\n      [attr.aria-invalid]=\"isInvalid()\"\n      [attr.aria-describedby]=\"feedbackId()\"\n      (input)=\"handleInputChange($event)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (suffix()) {\n      <small tedi-text color=\"tertiary\" class=\"tedi-number-field__suffix\">\n        {{ suffix() }}\n      </small>\n    }\n  </div>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--increment': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"incrementDisabled()\"\n    [attr.aria-label]=\"'numberField.increment' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('increment')\"\n  >\n    <tedi-icon name=\"add\" [size]=\"18\" />\n  </button>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [attr.id]=\"feedbackId()\"\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n", styles: [".tedi-number-field{display:flex}.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__button:not(:disabled),.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:not(:disabled){border-color:var(--form-input-border-hover)}.tedi-number-field .tedi-number-field__button{--general-icon-primary: currentcolor;width:var(--form-field-height);height:var(--form-field-height);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field .tedi-number-field__button:disabled{background-color:var(--form-input-background-disabled);border:var(--tedi-borders-01) solid var(--form-input-border-disabled);opacity:.5}.tedi-number-field .tedi-number-field__button--decrement{z-index:2;margin-right:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-left-radius:var(--button-radius-sm);border-bottom-left-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--increment{margin-left:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-right-radius:var(--button-radius-sm);border-bottom-right-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--small{width:var(--form-field-height-sm);height:var(--form-field-height-sm)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:disabled,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:hover,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper{border-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:focus-within{outline-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:active{z-index:2;outline:none;border-color:var(--form-general-feedback-error-border);border-radius:0}.tedi-number-field--disabled .tedi-number-field__button,.tedi-number-field--disabled .tedi-number-field__button:disabled,.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);opacity:.5}.tedi-number-field--disabled .tedi-number-field__input-wrapper .tedi-number-field__input{background-color:var(--form-input-background-disabled)}.tedi-number-field__input-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--form-field-inner-spacing-sm);align-items:stretch;width:var(--form-number-input-min-width);height:var(--form-field-height);padding-right:var(--form-field-padding-y-3-default);padding-left:var(--form-field-padding-y-3-default);background-color:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field__input-wrapper:focus-within{z-index:2;outline:calc(2 * var(--tedi-borders-01)) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01);border-color:var(--form-input-border-active);border-radius:var(--button-radius-sm)}.tedi-number-field__input-wrapper:active:not(.tedi-number-field__input-wrapper--disabled){z-index:2;outline:none;border-color:var(--form-input-border-active);border-radius:0}.tedi-number-field__input-wrapper--small{height:var(--form-field-height-sm)}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__input{grid-column:span 1;text-align:right}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__suffix{align-self:center;text-align:left;-webkit-user-select:none;user-select:none}.tedi-number-field__input-wrapper--full-width{width:100%}.tedi-number-field__input{grid-column:span 2;width:100%;font-size:var(--heading-h6-size);color:var(--form-input-text-filled);text-align:center;outline:none;background-color:var(--form-input-background-default);border:0;border-radius:0}.tedi-number-field__input::-webkit-outer-spin-button,.tedi-number-field__input::-webkit-inner-spin-button{appearance:none}.tedi-number-field__input[type=number]{appearance:textfield}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "@if (label()) {\n  <label tedi-label [for]=\"inputId()\" [required]=\"required()\" [size]=\"size()\">\n    {{ label() }}\n  </label>\n}\n<div\n  [class]=\"{\n    'tedi-number-field': true,\n    'tedi-number-field--invalid': isInvalid(),\n    'tedi-number-field--disabled': isDisabled(),\n  }\"\n>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--decrement': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"decrementDisabled()\"\n    [attr.aria-label]=\"'numberField.decrement' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('decrement')\"\n  >\n    <tedi-icon name=\"remove\" [size]=\"18\" />\n  </button>\n  <div\n    [class]=\"{\n      'tedi-number-field__input-wrapper': true,\n      'tedi-number-field__input-wrapper--small': size() === 'small',\n      'tedi-number-field__input-wrapper--disabled': isDisabled(),\n      'tedi-number-field__input-wrapper--with-suffix': suffix(),\n      'tedi-number-field__input-wrapper--full-width': fullWidth(),\n    }\"\n    (click)=\"focus()\"\n  >\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      type=\"number\"\n      inputmode=\"numeric\"\n      class=\"tedi-number-field__input\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [attr.step]=\"step()\"\n      [attr.aria-invalid]=\"isInvalid()\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() || null)\"\n      [attr.aria-describedby]=\"feedbackId()\"\n      (input)=\"handleInputChange($event)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (suffix()) {\n      <small tedi-text color=\"tertiary\" class=\"tedi-number-field__suffix\">\n        {{ suffix() }}\n      </small>\n    }\n  </div>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--increment': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"incrementDisabled()\"\n    [attr.aria-label]=\"'numberField.increment' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('increment')\"\n  >\n    <tedi-icon name=\"add\" [size]=\"18\" />\n  </button>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [attr.id]=\"feedbackId()\"\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n", styles: [".tedi-number-field{display:flex}.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__button:not(:disabled),.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:not(:disabled){border-color:var(--form-input-border-hover)}.tedi-number-field .tedi-number-field__button{--general-icon-primary: currentcolor;width:var(--form-field-height);height:var(--form-field-height);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field .tedi-number-field__button:disabled{background-color:var(--form-input-background-disabled);border:var(--tedi-borders-01) solid var(--form-input-border-disabled);opacity:.5}.tedi-number-field .tedi-number-field__button--decrement{z-index:2;margin-right:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-left-radius:var(--button-radius-sm);border-bottom-left-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--increment{margin-left:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-right-radius:var(--button-radius-sm);border-bottom-right-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--small{width:var(--form-field-height-sm);height:var(--form-field-height-sm)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:disabled,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:hover,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper{border-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:focus-within{outline-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:active{z-index:2;outline:none;border-color:var(--form-general-feedback-error-border);border-radius:0}.tedi-number-field--disabled .tedi-number-field__button,.tedi-number-field--disabled .tedi-number-field__button:disabled,.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);opacity:.5}.tedi-number-field--disabled .tedi-number-field__input-wrapper .tedi-number-field__input{background-color:var(--form-input-background-disabled)}.tedi-number-field__input-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--form-field-inner-spacing-sm);align-items:stretch;width:var(--form-number-input-min-width);height:var(--form-field-height);padding-right:var(--form-field-padding-y-3-default);padding-left:var(--form-field-padding-y-3-default);background-color:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field__input-wrapper:focus-within{z-index:2;outline:calc(2 * var(--tedi-borders-01)) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01);border-color:var(--form-input-border-active);border-radius:var(--button-radius-sm)}.tedi-number-field__input-wrapper:active:not(.tedi-number-field__input-wrapper--disabled){z-index:2;outline:none;border-color:var(--form-input-border-active);border-radius:0}.tedi-number-field__input-wrapper--small{height:var(--form-field-height-sm)}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__input{grid-column:span 1;text-align:right}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__suffix{align-self:center;text-align:left;-webkit-user-select:none;user-select:none}.tedi-number-field__input-wrapper--full-width{width:100%}.tedi-number-field__input{grid-column:span 2;width:100%;font-size:var(--heading-h6-size);color:var(--form-input-text-filled);text-align:center;outline:none;background-color:var(--form-input-background-default);border:0;border-radius:0}.tedi-number-field__input::-webkit-outer-spin-button,.tedi-number-field__input::-webkit-inner-spin-button{appearance:none}.tedi-number-field__input[type=number]{appearance:textfield}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: NumberFieldComponent, decorators: [{
             type: Component,
@@ -10443,8 +10498,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                             useExisting: forwardRef(() => NumberFieldComponent),
                             multi: true,
                         },
-                    ], template: "@if (label()) {\n  <label tedi-label [for]=\"inputId()\" [required]=\"required()\" [size]=\"size()\">\n    {{ label() }}\n  </label>\n}\n<div\n  [class]=\"{\n    'tedi-number-field': true,\n    'tedi-number-field--invalid': isInvalid(),\n    'tedi-number-field--disabled': isDisabled(),\n  }\"\n>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--decrement': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"decrementDisabled()\"\n    [attr.aria-label]=\"'numberField.decrement' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('decrement')\"\n  >\n    <tedi-icon name=\"remove\" [size]=\"18\" />\n  </button>\n  <div\n    [class]=\"{\n      'tedi-number-field__input-wrapper': true,\n      'tedi-number-field__input-wrapper--small': size() === 'small',\n      'tedi-number-field__input-wrapper--disabled': isDisabled(),\n      'tedi-number-field__input-wrapper--with-suffix': suffix(),\n      'tedi-number-field__input-wrapper--full-width': fullWidth(),\n    }\"\n    (click)=\"focus()\"\n  >\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      type=\"number\"\n      inputmode=\"numeric\"\n      class=\"tedi-number-field__input\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [attr.step]=\"step()\"\n      [attr.aria-invalid]=\"isInvalid()\"\n      [attr.aria-describedby]=\"feedbackId()\"\n      (input)=\"handleInputChange($event)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (suffix()) {\n      <small tedi-text color=\"tertiary\" class=\"tedi-number-field__suffix\">\n        {{ suffix() }}\n      </small>\n    }\n  </div>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--increment': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"incrementDisabled()\"\n    [attr.aria-label]=\"'numberField.increment' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('increment')\"\n  >\n    <tedi-icon name=\"add\" [size]=\"18\" />\n  </button>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [attr.id]=\"feedbackId()\"\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n", styles: [".tedi-number-field{display:flex}.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__button:not(:disabled),.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:not(:disabled){border-color:var(--form-input-border-hover)}.tedi-number-field .tedi-number-field__button{--general-icon-primary: currentcolor;width:var(--form-field-height);height:var(--form-field-height);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field .tedi-number-field__button:disabled{background-color:var(--form-input-background-disabled);border:var(--tedi-borders-01) solid var(--form-input-border-disabled);opacity:.5}.tedi-number-field .tedi-number-field__button--decrement{z-index:2;margin-right:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-left-radius:var(--button-radius-sm);border-bottom-left-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--increment{margin-left:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-right-radius:var(--button-radius-sm);border-bottom-right-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--small{width:var(--form-field-height-sm);height:var(--form-field-height-sm)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:disabled,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:hover,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper{border-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:focus-within{outline-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:active{z-index:2;outline:none;border-color:var(--form-general-feedback-error-border);border-radius:0}.tedi-number-field--disabled .tedi-number-field__button,.tedi-number-field--disabled .tedi-number-field__button:disabled,.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);opacity:.5}.tedi-number-field--disabled .tedi-number-field__input-wrapper .tedi-number-field__input{background-color:var(--form-input-background-disabled)}.tedi-number-field__input-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--form-field-inner-spacing-sm);align-items:stretch;width:var(--form-number-input-min-width);height:var(--form-field-height);padding-right:var(--form-field-padding-y-3-default);padding-left:var(--form-field-padding-y-3-default);background-color:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field__input-wrapper:focus-within{z-index:2;outline:calc(2 * var(--tedi-borders-01)) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01);border-color:var(--form-input-border-active);border-radius:var(--button-radius-sm)}.tedi-number-field__input-wrapper:active:not(.tedi-number-field__input-wrapper--disabled){z-index:2;outline:none;border-color:var(--form-input-border-active);border-radius:0}.tedi-number-field__input-wrapper--small{height:var(--form-field-height-sm)}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__input{grid-column:span 1;text-align:right}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__suffix{align-self:center;text-align:left;-webkit-user-select:none;user-select:none}.tedi-number-field__input-wrapper--full-width{width:100%}.tedi-number-field__input{grid-column:span 2;width:100%;font-size:var(--heading-h6-size);color:var(--form-input-text-filled);text-align:center;outline:none;background-color:var(--form-input-background-default);border:0;border-radius:0}.tedi-number-field__input::-webkit-outer-spin-button,.tedi-number-field__input::-webkit-inner-spin-button{appearance:none}.tedi-number-field__input[type=number]{appearance:textfield}\n"] }]
-        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], inputRef: [{
+                    ], template: "@if (label()) {\n  <label tedi-label [for]=\"inputId()\" [required]=\"required()\" [size]=\"size()\">\n    {{ label() }}\n  </label>\n}\n<div\n  [class]=\"{\n    'tedi-number-field': true,\n    'tedi-number-field--invalid': isInvalid(),\n    'tedi-number-field--disabled': isDisabled(),\n  }\"\n>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--decrement': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"decrementDisabled()\"\n    [attr.aria-label]=\"'numberField.decrement' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('decrement')\"\n  >\n    <tedi-icon name=\"remove\" [size]=\"18\" />\n  </button>\n  <div\n    [class]=\"{\n      'tedi-number-field__input-wrapper': true,\n      'tedi-number-field__input-wrapper--small': size() === 'small',\n      'tedi-number-field__input-wrapper--disabled': isDisabled(),\n      'tedi-number-field__input-wrapper--with-suffix': suffix(),\n      'tedi-number-field__input-wrapper--full-width': fullWidth(),\n    }\"\n    (click)=\"focus()\"\n  >\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      type=\"number\"\n      inputmode=\"numeric\"\n      class=\"tedi-number-field__input\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [attr.step]=\"step()\"\n      [attr.aria-invalid]=\"isInvalid()\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() || null)\"\n      [attr.aria-describedby]=\"feedbackId()\"\n      (input)=\"handleInputChange($event)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (suffix()) {\n      <small tedi-text color=\"tertiary\" class=\"tedi-number-field__suffix\">\n        {{ suffix() }}\n      </small>\n    }\n  </div>\n  <button\n    tedi-button\n    type=\"button\"\n    variant=\"secondary\"\n    [class]=\"{\n      'tedi-number-field__button': true,\n      'tedi-number-field__button--increment': true,\n      'tedi-number-field__button--small': size() === 'small',\n    }\"\n    [disabled]=\"incrementDisabled()\"\n    [attr.aria-label]=\"'numberField.increment' | tediTranslate: step()\"\n    (click)=\"handleButtonClick('increment')\"\n  >\n    <tedi-icon name=\"add\" [size]=\"18\" />\n  </button>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [attr.id]=\"feedbackId()\"\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n", styles: [".tedi-number-field{display:flex}.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__button:not(:disabled),.tedi-number-field:hover:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:not(:disabled){border-color:var(--form-input-border-hover)}.tedi-number-field .tedi-number-field__button{--general-icon-primary: currentcolor;width:var(--form-field-height);height:var(--form-field-height);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field .tedi-number-field__button:disabled{background-color:var(--form-input-background-disabled);border:var(--tedi-borders-01) solid var(--form-input-border-disabled);opacity:.5}.tedi-number-field .tedi-number-field__button--decrement{z-index:2;margin-right:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-left-radius:var(--button-radius-sm);border-bottom-left-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--increment{margin-left:calc(-1 * var(--tedi-borders-01));border-radius:0;border-top-right-radius:var(--button-radius-sm);border-bottom-right-radius:var(--button-radius-sm)}.tedi-number-field .tedi-number-field__button--small{width:var(--form-field-height-sm);height:var(--form-field-height-sm)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:disabled,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__button:hover,.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper{border-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:focus-within{outline-color:var(--form-general-feedback-error-border)}.tedi-number-field--invalid:not(.tedi-number-field--disabled) .tedi-number-field__input-wrapper:active{z-index:2;outline:none;border-color:var(--form-general-feedback-error-border);border-radius:0}.tedi-number-field--disabled .tedi-number-field__button,.tedi-number-field--disabled .tedi-number-field__button:disabled,.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-number-field--disabled .tedi-number-field__input-wrapper{background-color:var(--form-input-background-disabled);opacity:.5}.tedi-number-field--disabled .tedi-number-field__input-wrapper .tedi-number-field__input{background-color:var(--form-input-background-disabled)}.tedi-number-field__input-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--form-field-inner-spacing-sm);align-items:stretch;width:var(--form-number-input-min-width);height:var(--form-field-height);padding-right:var(--form-field-padding-y-3-default);padding-left:var(--form-field-padding-y-3-default);background-color:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default)}.tedi-number-field__input-wrapper:focus-within{z-index:2;outline:calc(2 * var(--tedi-borders-01)) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01);border-color:var(--form-input-border-active);border-radius:var(--button-radius-sm)}.tedi-number-field__input-wrapper:active:not(.tedi-number-field__input-wrapper--disabled){z-index:2;outline:none;border-color:var(--form-input-border-active);border-radius:0}.tedi-number-field__input-wrapper--small{height:var(--form-field-height-sm)}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__input{grid-column:span 1;text-align:right}.tedi-number-field__input-wrapper--with-suffix .tedi-number-field__suffix{align-self:center;text-align:left;-webkit-user-select:none;user-select:none}.tedi-number-field__input-wrapper--full-width{width:100%}.tedi-number-field__input{grid-column:span 2;width:100%;font-size:var(--heading-h6-size);color:var(--form-input-text-filled);text-align:center;outline:none;background-color:var(--form-input-background-default);border:0;border-radius:0}.tedi-number-field__input::-webkit-outer-spin-button,.tedi-number-field__input::-webkit-inner-spin-button{appearance:none}.tedi-number-field__input[type=number]{appearance:textfield}\n"] }]
+        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputRef: [{
                 type: ViewChild,
                 args: ["inputElement"]
             }] } });
@@ -12028,6 +12083,11 @@ class ToggleComponent {
      * @default false
      */
     icon = input(false, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    /**
+     * Accessible label for the toggle. Provide this when there is no associated
+     * visible `<label>` element, so the switch has an accessible name.
+     */
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
     inputRef;
     onChange = () => { };
     onTouched = () => { };
@@ -12071,13 +12131,13 @@ class ToggleComponent {
         }
     }, ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ToggleComponent, isStandalone: true, selector: "tedi-toggle", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "class": "classes()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ToggleComponent, isStandalone: true, selector: "tedi-toggle", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "class": "classes()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ToggleComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<input\n  #inputElement\n  [id]=\"inputId()\"\n  [checked]=\"checked()\"\n  [disabled]=\"disabled()\"\n  [required]=\"required()\"\n  [attr.aria-checked]=\"checked()\"\n  type=\"checkbox\"\n  class=\"tedi-toggle__input\"\n  role=\"switch\"\n  (change)=\"handleChange($event)\"\n/>\n<span class=\"tedi-toggle__slider\" aria-hidden=\"true\">\n  @if (icon() && size() === 'large') {\n    <tedi-icon\n      [name]=\"checked() ? 'lock_open_right' : 'lock'\"\n      [color]=\"iconColor()\"\n      [size]=\"16\"\n      class=\"tedi-toggle__icon\"\n    />\n  }\n</span>\n", styles: [".tedi-toggle{position:relative;display:block}.tedi-toggle--size-default{--_toggle-indicator: var(--form-toggle-default-indicator);width:var(--form-toggle-default-width);height:var(--form-toggle-default-height)}.tedi-toggle--size-default .tedi-toggle__slider{width:var(--form-toggle-default-indicator);height:var(--form-toggle-default-indicator)}.tedi-toggle--size-large{--_toggle-indicator: var(--form-toggle-large-indicator);width:var(--form-toggle-large-width);height:var(--form-toggle-large-height)}.tedi-toggle--size-large .tedi-toggle__slider{width:var(--form-toggle-large-indicator);height:var(--form-toggle-large-indicator)}.tedi-toggle--primary-filled .tedi-toggle__input{background-color:var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-filled .tedi-toggle__input:hover{background-color:var(--form-toggle-primary-inactive-hover)}.tedi-toggle--primary-filled .tedi-toggle__input:active{background-color:var(--form-toggle-primary-inactive-active)}.tedi-toggle--primary-filled .tedi-toggle__input:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);background-color:var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-filled .tedi-toggle__input:disabled{cursor:not-allowed;background-color:var(--form-toggle-primary-inactive-default);opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-indicator)}.tedi-toggle--primary-filled .tedi-toggle__input:checked{background-color:var(--form-toggle-primary-active-default)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:hover{background-color:var(--form-toggle-primary-active-hover)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:active{background-color:var(--form-toggle-primary-active-active)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);background-color:var(--form-toggle-primary-active-default)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:disabled{cursor:not-allowed;background-color:var(--form-toggle-primary-active-default);opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:checked:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-indicator)}.tedi-toggle--primary-outlined .tedi-toggle__input{border:var(--tedi-borders-01) solid var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:hover{border:var(--tedi-borders-01) solid var(--form-toggle-primary-inactive-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:hover+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:active{border:var(--tedi-borders-01) solid var(--form-toggle-primary-inactive-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:active+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);border:var(--tedi-borders-01) solid var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled{cursor:not-allowed;border:var(--tedi-borders-01) solid var(--form-toggle-primary-inactive-default);opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:checked{border:var(--tedi-borders-01) solid var(--form-toggle-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:hover{border:var(--tedi-borders-01) solid var(--form-toggle-primary-active-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:hover+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:active{border:var(--tedi-borders-01) solid var(--form-toggle-primary-active-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:active+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);border:var(--tedi-borders-01) solid var(--form-toggle-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled{cursor:not-allowed;border:var(--tedi-borders-01) solid var(--form-toggle-primary-active-default);opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input{background-color:var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-filled .tedi-toggle__input:hover{background-color:var(--form-toggle-colored-inactive-hover)}.tedi-toggle--colored-filled .tedi-toggle__input:active{background-color:var(--form-toggle-colored-inactive-active)}.tedi-toggle--colored-filled .tedi-toggle__input:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);background-color:var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-filled .tedi-toggle__input:disabled{cursor:not-allowed;background-color:var(--form-toggle-colored-inactive-default);opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-indicator)}.tedi-toggle--colored-filled .tedi-toggle__input:checked{background-color:var(--form-toggle-colored-active-default)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:hover{background-color:var(--form-toggle-colored-active-hover)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:active{background-color:var(--form-toggle-colored-active-active)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);background-color:var(--form-toggle-colored-active-default)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:disabled{cursor:not-allowed;background-color:var(--form-toggle-colored-active-default);opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:checked:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-indicator)}.tedi-toggle--colored-outlined .tedi-toggle__input{border:var(--tedi-borders-01) solid var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:hover{border:var(--tedi-borders-01) solid var(--form-toggle-colored-inactive-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:hover+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:active{border:var(--tedi-borders-01) solid var(--form-toggle-colored-inactive-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:active+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);border:var(--tedi-borders-01) solid var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled{cursor:not-allowed;border:var(--tedi-borders-01) solid var(--form-toggle-colored-inactive-default);opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:checked{border:var(--tedi-borders-01) solid var(--form-toggle-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:hover{border:var(--tedi-borders-01) solid var(--form-toggle-colored-active-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:hover+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:active{border:var(--tedi-borders-01) solid var(--form-toggle-colored-active-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:active+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);border:var(--tedi-borders-01) solid var(--form-toggle-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled{cursor:not-allowed;border:var(--tedi-borders-01) solid var(--form-toggle-colored-active-default);opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle__input{width:100%;height:100%;margin:0;appearance:none;cursor:pointer;border-radius:var(--form-toggle-radius)}.tedi-toggle__input:checked+.tedi-toggle__slider{left:calc(100% - var(--_toggle-indicator) - var(--form-toggle-padding));transform:translateY(-50%)}.tedi-toggle__slider{position:absolute;top:50%;left:var(--form-toggle-padding);display:flex;align-items:center;justify-content:center;pointer-events:none;border-radius:50%;transform:translateY(-50%);transition:left .17s ease-out}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<input\n  #inputElement\n  [id]=\"inputId()\"\n  [checked]=\"checked()\"\n  [disabled]=\"disabled()\"\n  [required]=\"required()\"\n  [attr.aria-checked]=\"checked()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  type=\"checkbox\"\n  class=\"tedi-toggle__input\"\n  role=\"switch\"\n  (change)=\"handleChange($event)\"\n/>\n<span class=\"tedi-toggle__slider\" aria-hidden=\"true\">\n  @if (icon() && size() === 'large') {\n    <tedi-icon\n      [name]=\"checked() ? 'lock_open_right' : 'lock'\"\n      [color]=\"iconColor()\"\n      [size]=\"16\"\n      class=\"tedi-toggle__icon\"\n    />\n  }\n</span>\n", styles: [".tedi-toggle{position:relative;display:block}.tedi-toggle--size-default{--_toggle-indicator: var(--form-toggle-default-indicator);width:var(--form-toggle-default-width);height:var(--form-toggle-default-height)}.tedi-toggle--size-default .tedi-toggle__slider{width:var(--form-toggle-default-indicator);height:var(--form-toggle-default-indicator)}.tedi-toggle--size-large{--_toggle-indicator: var(--form-toggle-large-indicator);width:var(--form-toggle-large-width);height:var(--form-toggle-large-height)}.tedi-toggle--size-large .tedi-toggle__slider{width:var(--form-toggle-large-indicator);height:var(--form-toggle-large-indicator)}.tedi-toggle--primary-filled .tedi-toggle__input{background-color:var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-filled .tedi-toggle__input:hover{background-color:var(--form-toggle-primary-inactive-hover)}.tedi-toggle--primary-filled .tedi-toggle__input:active{background-color:var(--form-toggle-primary-inactive-active)}.tedi-toggle--primary-filled .tedi-toggle__input:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);background-color:var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-filled .tedi-toggle__input:disabled{cursor:not-allowed;background-color:var(--form-toggle-primary-inactive-default);opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-indicator)}.tedi-toggle--primary-filled .tedi-toggle__input:checked{background-color:var(--form-toggle-primary-active-default)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:hover{background-color:var(--form-toggle-primary-active-hover)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:active{background-color:var(--form-toggle-primary-active-active)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);background-color:var(--form-toggle-primary-active-default)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:disabled{cursor:not-allowed;background-color:var(--form-toggle-primary-active-default);opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:checked:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-indicator)}.tedi-toggle--primary-outlined .tedi-toggle__input{border:var(--tedi-borders-01) solid var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:hover{border:var(--tedi-borders-01) solid var(--form-toggle-primary-inactive-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:hover+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:active{border:var(--tedi-borders-01) solid var(--form-toggle-primary-inactive-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:active+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);border:var(--tedi-borders-01) solid var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled{cursor:not-allowed;border:var(--tedi-borders-01) solid var(--form-toggle-primary-inactive-default);opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:checked{border:var(--tedi-borders-01) solid var(--form-toggle-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:hover{border:var(--tedi-borders-01) solid var(--form-toggle-primary-active-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:hover+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:active{border:var(--tedi-borders-01) solid var(--form-toggle-primary-active-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:active+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);border:var(--tedi-borders-01) solid var(--form-toggle-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled{cursor:not-allowed;border:var(--tedi-borders-01) solid var(--form-toggle-primary-active-default);opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input{background-color:var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-filled .tedi-toggle__input:hover{background-color:var(--form-toggle-colored-inactive-hover)}.tedi-toggle--colored-filled .tedi-toggle__input:active{background-color:var(--form-toggle-colored-inactive-active)}.tedi-toggle--colored-filled .tedi-toggle__input:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);background-color:var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-filled .tedi-toggle__input:disabled{cursor:not-allowed;background-color:var(--form-toggle-colored-inactive-default);opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-indicator)}.tedi-toggle--colored-filled .tedi-toggle__input:checked{background-color:var(--form-toggle-colored-active-default)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:hover{background-color:var(--form-toggle-colored-active-hover)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:active{background-color:var(--form-toggle-colored-active-active)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);background-color:var(--form-toggle-colored-active-default)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:disabled{cursor:not-allowed;background-color:var(--form-toggle-colored-active-default);opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:checked:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-indicator)}.tedi-toggle--colored-outlined .tedi-toggle__input{border:var(--tedi-borders-01) solid var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:hover{border:var(--tedi-borders-01) solid var(--form-toggle-colored-inactive-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:hover+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:active{border:var(--tedi-borders-01) solid var(--form-toggle-colored-inactive-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:active+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);border:var(--tedi-borders-01) solid var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled{cursor:not-allowed;border:var(--tedi-borders-01) solid var(--form-toggle-colored-inactive-default);opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:checked{border:var(--tedi-borders-01) solid var(--form-toggle-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:hover{border:var(--tedi-borders-01) solid var(--form-toggle-colored-active-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:hover+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:active{border:var(--tedi-borders-01) solid var(--form-toggle-colored-active-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:active+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);border:var(--tedi-borders-01) solid var(--form-toggle-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled{cursor:not-allowed;border:var(--tedi-borders-01) solid var(--form-toggle-colored-active-default);opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle__input{width:100%;height:100%;margin:0;appearance:none;cursor:pointer;border-radius:var(--form-toggle-radius)}.tedi-toggle__input:checked+.tedi-toggle__slider{left:calc(100% - var(--_toggle-indicator) - var(--form-toggle-padding));transform:translateY(-50%)}.tedi-toggle__slider{position:absolute;top:50%;left:var(--form-toggle-padding);display:flex;align-items:center;justify-content:center;pointer-events:none;border-radius:50%;transform:translateY(-50%);transition:left .17s ease-out}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
@@ -12089,8 +12149,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         }
                     ], host: {
                         "[class]": "classes()"
-                    }, template: "<input\n  #inputElement\n  [id]=\"inputId()\"\n  [checked]=\"checked()\"\n  [disabled]=\"disabled()\"\n  [required]=\"required()\"\n  [attr.aria-checked]=\"checked()\"\n  type=\"checkbox\"\n  class=\"tedi-toggle__input\"\n  role=\"switch\"\n  (change)=\"handleChange($event)\"\n/>\n<span class=\"tedi-toggle__slider\" aria-hidden=\"true\">\n  @if (icon() && size() === 'large') {\n    <tedi-icon\n      [name]=\"checked() ? 'lock_open_right' : 'lock'\"\n      [color]=\"iconColor()\"\n      [size]=\"16\"\n      class=\"tedi-toggle__icon\"\n    />\n  }\n</span>\n", styles: [".tedi-toggle{position:relative;display:block}.tedi-toggle--size-default{--_toggle-indicator: var(--form-toggle-default-indicator);width:var(--form-toggle-default-width);height:var(--form-toggle-default-height)}.tedi-toggle--size-default .tedi-toggle__slider{width:var(--form-toggle-default-indicator);height:var(--form-toggle-default-indicator)}.tedi-toggle--size-large{--_toggle-indicator: var(--form-toggle-large-indicator);width:var(--form-toggle-large-width);height:var(--form-toggle-large-height)}.tedi-toggle--size-large .tedi-toggle__slider{width:var(--form-toggle-large-indicator);height:var(--form-toggle-large-indicator)}.tedi-toggle--primary-filled .tedi-toggle__input{background-color:var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-filled .tedi-toggle__input:hover{background-color:var(--form-toggle-primary-inactive-hover)}.tedi-toggle--primary-filled .tedi-toggle__input:active{background-color:var(--form-toggle-primary-inactive-active)}.tedi-toggle--primary-filled .tedi-toggle__input:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);background-color:var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-filled .tedi-toggle__input:disabled{cursor:not-allowed;background-color:var(--form-toggle-primary-inactive-default);opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-indicator)}.tedi-toggle--primary-filled .tedi-toggle__input:checked{background-color:var(--form-toggle-primary-active-default)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:hover{background-color:var(--form-toggle-primary-active-hover)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:active{background-color:var(--form-toggle-primary-active-active)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);background-color:var(--form-toggle-primary-active-default)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:disabled{cursor:not-allowed;background-color:var(--form-toggle-primary-active-default);opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:checked:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-indicator)}.tedi-toggle--primary-outlined .tedi-toggle__input{border:var(--tedi-borders-01) solid var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:hover{border:var(--tedi-borders-01) solid var(--form-toggle-primary-inactive-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:hover+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:active{border:var(--tedi-borders-01) solid var(--form-toggle-primary-inactive-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:active+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);border:var(--tedi-borders-01) solid var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled{cursor:not-allowed;border:var(--tedi-borders-01) solid var(--form-toggle-primary-inactive-default);opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:checked{border:var(--tedi-borders-01) solid var(--form-toggle-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:hover{border:var(--tedi-borders-01) solid var(--form-toggle-primary-active-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:hover+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:active{border:var(--tedi-borders-01) solid var(--form-toggle-primary-active-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:active+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);border:var(--tedi-borders-01) solid var(--form-toggle-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled{cursor:not-allowed;border:var(--tedi-borders-01) solid var(--form-toggle-primary-active-default);opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input{background-color:var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-filled .tedi-toggle__input:hover{background-color:var(--form-toggle-colored-inactive-hover)}.tedi-toggle--colored-filled .tedi-toggle__input:active{background-color:var(--form-toggle-colored-inactive-active)}.tedi-toggle--colored-filled .tedi-toggle__input:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);background-color:var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-filled .tedi-toggle__input:disabled{cursor:not-allowed;background-color:var(--form-toggle-colored-inactive-default);opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-indicator)}.tedi-toggle--colored-filled .tedi-toggle__input:checked{background-color:var(--form-toggle-colored-active-default)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:hover{background-color:var(--form-toggle-colored-active-hover)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:active{background-color:var(--form-toggle-colored-active-active)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);background-color:var(--form-toggle-colored-active-default)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:disabled{cursor:not-allowed;background-color:var(--form-toggle-colored-active-default);opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:checked:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-indicator)}.tedi-toggle--colored-outlined .tedi-toggle__input{border:var(--tedi-borders-01) solid var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:hover{border:var(--tedi-borders-01) solid var(--form-toggle-colored-inactive-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:hover+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:active{border:var(--tedi-borders-01) solid var(--form-toggle-colored-inactive-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:active+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);border:var(--tedi-borders-01) solid var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled{cursor:not-allowed;border:var(--tedi-borders-01) solid var(--form-toggle-colored-inactive-default);opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:checked{border:var(--tedi-borders-01) solid var(--form-toggle-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:hover{border:var(--tedi-borders-01) solid var(--form-toggle-colored-active-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:hover+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:active{border:var(--tedi-borders-01) solid var(--form-toggle-colored-active-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:active+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);border:var(--tedi-borders-01) solid var(--form-toggle-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled{cursor:not-allowed;border:var(--tedi-borders-01) solid var(--form-toggle-colored-active-default);opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle__input{width:100%;height:100%;margin:0;appearance:none;cursor:pointer;border-radius:var(--form-toggle-radius)}.tedi-toggle__input:checked+.tedi-toggle__slider{left:calc(100% - var(--_toggle-indicator) - var(--form-toggle-padding));transform:translateY(-50%)}.tedi-toggle__slider{position:absolute;top:50%;left:var(--form-toggle-padding);display:flex;align-items:center;justify-content:center;pointer-events:none;border-radius:50%;transform:translateY(-50%);transition:left .17s ease-out}\n"] }]
-        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], inputRef: [{
+                    }, template: "<input\n  #inputElement\n  [id]=\"inputId()\"\n  [checked]=\"checked()\"\n  [disabled]=\"disabled()\"\n  [required]=\"required()\"\n  [attr.aria-checked]=\"checked()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  type=\"checkbox\"\n  class=\"tedi-toggle__input\"\n  role=\"switch\"\n  (change)=\"handleChange($event)\"\n/>\n<span class=\"tedi-toggle__slider\" aria-hidden=\"true\">\n  @if (icon() && size() === 'large') {\n    <tedi-icon\n      [name]=\"checked() ? 'lock_open_right' : 'lock'\"\n      [color]=\"iconColor()\"\n      [size]=\"16\"\n      class=\"tedi-toggle__icon\"\n    />\n  }\n</span>\n", styles: [".tedi-toggle{position:relative;display:block}.tedi-toggle--size-default{--_toggle-indicator: var(--form-toggle-default-indicator);width:var(--form-toggle-default-width);height:var(--form-toggle-default-height)}.tedi-toggle--size-default .tedi-toggle__slider{width:var(--form-toggle-default-indicator);height:var(--form-toggle-default-indicator)}.tedi-toggle--size-large{--_toggle-indicator: var(--form-toggle-large-indicator);width:var(--form-toggle-large-width);height:var(--form-toggle-large-height)}.tedi-toggle--size-large .tedi-toggle__slider{width:var(--form-toggle-large-indicator);height:var(--form-toggle-large-indicator)}.tedi-toggle--primary-filled .tedi-toggle__input{background-color:var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-filled .tedi-toggle__input:hover{background-color:var(--form-toggle-primary-inactive-hover)}.tedi-toggle--primary-filled .tedi-toggle__input:active{background-color:var(--form-toggle-primary-inactive-active)}.tedi-toggle--primary-filled .tedi-toggle__input:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);background-color:var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-filled .tedi-toggle__input:disabled{cursor:not-allowed;background-color:var(--form-toggle-primary-inactive-default);opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-indicator)}.tedi-toggle--primary-filled .tedi-toggle__input:checked{background-color:var(--form-toggle-primary-active-default)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:hover{background-color:var(--form-toggle-primary-active-hover)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:active{background-color:var(--form-toggle-primary-active-active)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);background-color:var(--form-toggle-primary-active-default)}.tedi-toggle--primary-filled .tedi-toggle__input:checked:disabled{cursor:not-allowed;background-color:var(--form-toggle-primary-active-default);opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:checked:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--primary-filled .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-indicator)}.tedi-toggle--primary-outlined .tedi-toggle__input{border:var(--tedi-borders-01) solid var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:hover{border:var(--tedi-borders-01) solid var(--form-toggle-primary-inactive-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:hover+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:active{border:var(--tedi-borders-01) solid var(--form-toggle-primary-inactive-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:active+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);border:var(--tedi-borders-01) solid var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled{cursor:not-allowed;border:var(--tedi-borders-01) solid var(--form-toggle-primary-inactive-default);opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{background-color:var(--form-toggle-primary-inactive-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:checked{border:var(--tedi-borders-01) solid var(--form-toggle-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:hover{border:var(--tedi-borders-01) solid var(--form-toggle-primary-active-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:hover+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-hover)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:active{border:var(--tedi-borders-01) solid var(--form-toggle-primary-active-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:active+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-active)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);border:var(--tedi-borders-01) solid var(--form-toggle-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled{cursor:not-allowed;border:var(--tedi-borders-01) solid var(--form-toggle-primary-active-default);opacity:.5}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{background-color:var(--form-toggle-primary-active-default)}.tedi-toggle--primary-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input{background-color:var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-filled .tedi-toggle__input:hover{background-color:var(--form-toggle-colored-inactive-hover)}.tedi-toggle--colored-filled .tedi-toggle__input:active{background-color:var(--form-toggle-colored-inactive-active)}.tedi-toggle--colored-filled .tedi-toggle__input:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);background-color:var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-filled .tedi-toggle__input:disabled{cursor:not-allowed;background-color:var(--form-toggle-colored-inactive-default);opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-indicator)}.tedi-toggle--colored-filled .tedi-toggle__input:checked{background-color:var(--form-toggle-colored-active-default)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:hover{background-color:var(--form-toggle-colored-active-hover)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:active{background-color:var(--form-toggle-colored-active-active)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);background-color:var(--form-toggle-colored-active-default)}.tedi-toggle--colored-filled .tedi-toggle__input:checked:disabled{cursor:not-allowed;background-color:var(--form-toggle-colored-active-default);opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:checked:disabled+.tedi-toggle__slider .tedi-toggle__icon{opacity:.5}.tedi-toggle--colored-filled .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-indicator)}.tedi-toggle--colored-outlined .tedi-toggle__input{border:var(--tedi-borders-01) solid var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:hover{border:var(--tedi-borders-01) solid var(--form-toggle-colored-inactive-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:hover+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:active{border:var(--tedi-borders-01) solid var(--form-toggle-colored-inactive-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:active+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);border:var(--tedi-borders-01) solid var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled{cursor:not-allowed;border:var(--tedi-borders-01) solid var(--form-toggle-colored-inactive-default);opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{background-color:var(--form-toggle-colored-inactive-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:checked{border:var(--tedi-borders-01) solid var(--form-toggle-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:hover{border:var(--tedi-borders-01) solid var(--form-toggle-colored-active-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:hover+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-hover)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:active{border:var(--tedi-borders-01) solid var(--form-toggle-colored-active-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:active+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-active)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:focus-visible{outline:calc(2 * var(--tedi-borders-01)) solid var(--form-toggle-primary-active-default);outline-offset:var(--tedi-borders-01);border:var(--tedi-borders-01) solid var(--form-toggle-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:focus-visible+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled{cursor:not-allowed;border:var(--tedi-borders-01) solid var(--form-toggle-colored-active-default);opacity:.5}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{background-color:var(--form-toggle-colored-active-default)}.tedi-toggle--colored-outlined .tedi-toggle__input:checked:disabled+.tedi-toggle__slider{opacity:.5}.tedi-toggle__input{width:100%;height:100%;margin:0;appearance:none;cursor:pointer;border-radius:var(--form-toggle-radius)}.tedi-toggle__input:checked+.tedi-toggle__slider{left:calc(100% - var(--_toggle-indicator) - var(--form-toggle-padding));transform:translateY(-50%)}.tedi-toggle__slider{position:absolute;top:50%;left:var(--form-toggle-padding);display:flex;align-items:center;justify-content:center;pointer-events:none;border-radius:50%;transform:translateY(-50%);transition:left .17s ease-out}\n"] }]
+        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputRef: [{
                 type: ViewChild,
                 args: ['inputElement']
             }] } });
@@ -12679,7 +12739,7 @@ class TimePickerComponent {
                 useExisting: forwardRef(() => TimePickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "hourColumns", predicate: ["hourColumn"], descendants: true, isSignal: true }, { propertyName: "minuteColumns", predicate: ["minuteColumn"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (variant() === 'scroll') {\n  <div class=\"tedi-time-picker__columns\" role=\"group\">\n    <div\n      #hourColumn\n      class=\"tedi-time-picker__column\"\n      role=\"listbox\"\n      [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n      [attr.aria-label]=\"'time-picker.hours' | tediTranslate\"\n      [attr.aria-activedescendant]=\"hourActiveId()\"\n      [attr.aria-disabled]=\"isDisabled()\"\n      (keydown)=\"onColumnKeydown($event, 'hour')\"\n      (scroll)=\"onColumnScroll('hour')\"\n    >\n      @for (hour of hours; track hour; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"tedi-time-picker__item\"\n          role=\"option\"\n          [id]=\"hourItemId(i)\"\n          [class.tedi-time-picker__item--selected]=\"highlightedHourIndex() === i\"\n          [attr.aria-selected]=\"selectedHour() === +hour\"\n          [disabled]=\"isDisabled()\"\n          tabindex=\"-1\"\n          (click)=\"onHourClick(hour)\"\n        >\n          {{ hour }}\n        </button>\n      }\n    </div>\n    <div class=\"tedi-time-picker__separator\"></div>\n    <div\n      #minuteColumn\n      class=\"tedi-time-picker__column\"\n      role=\"listbox\"\n      [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n      [attr.aria-label]=\"'time-picker.minutes' | tediTranslate\"\n      [attr.aria-activedescendant]=\"minuteActiveId()\"\n      [attr.aria-disabled]=\"isDisabled()\"\n      (keydown)=\"onColumnKeydown($event, 'minute')\"\n      (scroll)=\"onColumnScroll('minute')\"\n    >\n      @for (minute of minutes(); track minute; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"tedi-time-picker__item\"\n          role=\"option\"\n          [id]=\"minuteItemId(i)\"\n          [class.tedi-time-picker__item--selected]=\"highlightedMinuteIndex() === i\"\n          [attr.aria-selected]=\"selectedMinute() === +minute\"\n          [disabled]=\"isDisabled()\"\n          tabindex=\"-1\"\n          (click)=\"onMinuteClick(minute)\"\n        >\n          {{ minute }}\n        </button>\n      }\n    </div>\n  </div>\n} @else if (variant() === 'dropdown') {\n  @if (timeSlots().length === 0) {\n    <p class=\"tedi-time-picker__empty\">{{ 'time-picker.no-slots' | tediTranslate }}</p>\n  } @else {\n    <div\n      class=\"tedi-time-picker__dropdown\"\n      role=\"listbox\"\n      [attr.aria-disabled]=\"isDisabled() ? true : null\"\n    >\n      @for (slot of timeSlots(); track slot; let i = $index) {\n        <div\n          class=\"tedi-time-picker__dropdown-item\"\n          role=\"option\"\n          [class.tedi-time-picker__dropdown-item--selected]=\"isSlotSelected(slot)\"\n          [attr.aria-selected]=\"isSlotSelected(slot)\"\n          [attr.aria-disabled]=\"isDisabled() ? true : null\"\n          [attr.tabindex]=\"isDisabled() ? -1 : getDropdownTabIndex(i)\"\n          (click)=\"!isDisabled() && selectSlot(slot)\"\n          (keydown)=\"onDropdownKeydown($event)\"\n        >\n          {{ slot }}\n        </div>\n      }\n    </div>\n  }\n} @else if (variant() === 'slots') {\n  @if (timeSlots().length === 0) {\n    <p class=\"tedi-time-picker__empty\">{{ 'time-picker.no-slots' | tediTranslate }}</p>\n  } @else {\n    <tedi-radio-card-group\n      class=\"tedi-time-picker__grid\"\n      role=\"radiogroup\"\n      [style]=\"gridStyle()\"\n    >\n      @for (slot of timeSlots(); track slot; let i = $index) {\n        <label\n          tedi-radio-card\n          variant=\"secondary\"\n          class=\"tedi-time-picker__slot\"\n          [showIndicator]=\"showSlotIndicator()\"\n          [for]=\"slotId(i)\"\n        >\n          <input\n            tedi-radio\n            type=\"radio\"\n            [id]=\"slotId(i)\"\n            [name]=\"radioGroupName\"\n            [value]=\"slot\"\n            [checked]=\"isSlotSelected(slot)\"\n            [disabled]=\"isDisabled()\"\n            (change)=\"onRadioChange(slot)\"\n          />\n          {{ slot }}\n        </label>\n      }\n    </tedi-radio-card-group>\n  }\n}\n", styles: [".tedi-time-picker{--tedi-time-picker-item-height: var(--tedi-dimensions-16);--tedi-time-picker-columns-height: 12.5rem;--tedi-time-picker-width: var(--tedi-containers-01);--_tedi-time-picker-snap-padding: calc((var(--tedi-time-picker-columns-height) - var(--tedi-time-picker-item-height)) / 2);display:block;width:fit-content}.tedi-time-picker--disabled{pointer-events:none;opacity:.5}.tedi-time-picker--bordered{overflow:hidden;border:var(--tedi-borders-01) solid var(--general-border-primary);border-radius:var(--card-radius-rounded)}@media(max-width:61.98rem){.tedi-time-picker{--tedi-time-picker-item-height: var(--tedi-dimensions-18);--tedi-time-picker-columns-height: 15.75rem}}.tedi-time-picker__columns{position:relative;display:flex;width:var(--tedi-time-picker-width);height:var(--tedi-time-picker-columns-height);overflow:hidden;-webkit-user-select:none;user-select:none;background:var(--card-background-primary)}.tedi-time-picker__columns:before{position:absolute;inset:0;z-index:3;pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--card-background-primary) 0%,transparent 30%,transparent 70%,var(--card-background-primary) 100%)}.tedi-time-picker__columns:after{position:absolute;top:50%;right:0;left:0;z-index:1;height:var(--tedi-time-picker-item-height);pointer-events:none;content:\"\";background:var(--form-datepicker-date-selected);transform:translateY(-50%)}.tedi-time-picker__column{position:relative;z-index:2;flex:1;height:100%;padding:var(--_tedi-time-picker-snap-padding) 0;overflow-y:scroll;scroll-behavior:smooth;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;scroll-padding:var(--_tedi-time-picker-snap-padding);scrollbar-width:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:none}.tedi-time-picker__column::-webkit-scrollbar{display:none}.tedi-time-picker__column:focus{outline:none}.tedi-time-picker__column:focus-visible{z-index:5;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-time-picker__separator{position:relative;z-index:2;width:var(--tedi-borders-02);background:var(--general-border-primary)}.tedi-time-picker__item{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:var(--tedi-time-picker-item-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;scroll-snap-align:center;scroll-snap-stop:always;background:none;border:0}.tedi-time-picker__item:disabled{cursor:not-allowed}.tedi-time-picker__item:focus,.tedi-time-picker__item:focus-visible{outline:none;box-shadow:none}.tedi-time-picker__item--selected{z-index:2;color:var(--form-datepicker-date-text-selected)}.tedi-time-picker__dropdown{display:flex;flex-direction:column;min-width:var(--tedi-time-picker-dropdown-min-width, auto);overflow:auto;border-radius:var(--dropdown-item-radius)}.tedi-time-picker__empty{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);margin:0;font-size:var(--body-small-regular-size);color:var(--general-text-secondary);text-align:center}.tedi-time-picker__dropdown-item{display:flex;align-items:center;width:100%;min-height:var(--tedi-dimensions-16);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-time-picker__dropdown-item:hover{color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-time-picker__dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-time-picker__dropdown-item[aria-disabled=true]{cursor:not-allowed}.tedi-time-picker__dropdown-item[aria-disabled=true]:hover{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}.tedi-time-picker__dropdown-item--selected,.tedi-time-picker__dropdown-item--selected:hover{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-time-picker__grid{display:grid;gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}\n"], dependencies: [{ kind: "component", type: RadioCardComponent, selector: "label[tedi-radio-card]", inputs: ["variant", "grouped", "showIndicator"] }, { kind: "component", type: RadioCardGroupComponent, selector: "tedi-radio-card-group", inputs: ["grouped"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "hourColumns", predicate: ["hourColumn"], descendants: true, isSignal: true }, { propertyName: "minuteColumns", predicate: ["minuteColumn"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (variant() === 'scroll') {\n  <div class=\"tedi-time-picker__columns\" role=\"group\">\n    <div\n      #hourColumn\n      class=\"tedi-time-picker__column\"\n      role=\"listbox\"\n      [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n      [attr.aria-label]=\"'time-picker.hours' | tediTranslate\"\n      [attr.aria-activedescendant]=\"hourActiveId()\"\n      [attr.aria-disabled]=\"isDisabled()\"\n      (keydown)=\"onColumnKeydown($event, 'hour')\"\n      (scroll)=\"onColumnScroll('hour')\"\n    >\n      @for (hour of hours; track hour; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"tedi-time-picker__item\"\n          role=\"option\"\n          [id]=\"hourItemId(i)\"\n          [class.tedi-time-picker__item--selected]=\"highlightedHourIndex() === i\"\n          [attr.aria-selected]=\"selectedHour() === +hour\"\n          [disabled]=\"isDisabled()\"\n          tabindex=\"-1\"\n          (click)=\"onHourClick(hour)\"\n        >\n          {{ hour }}\n        </button>\n      }\n    </div>\n    <div class=\"tedi-time-picker__separator\"></div>\n    <div\n      #minuteColumn\n      class=\"tedi-time-picker__column\"\n      role=\"listbox\"\n      [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n      [attr.aria-label]=\"'time-picker.minutes' | tediTranslate\"\n      [attr.aria-activedescendant]=\"minuteActiveId()\"\n      [attr.aria-disabled]=\"isDisabled()\"\n      (keydown)=\"onColumnKeydown($event, 'minute')\"\n      (scroll)=\"onColumnScroll('minute')\"\n    >\n      @for (minute of minutes(); track minute; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"tedi-time-picker__item\"\n          role=\"option\"\n          [id]=\"minuteItemId(i)\"\n          [class.tedi-time-picker__item--selected]=\"highlightedMinuteIndex() === i\"\n          [attr.aria-selected]=\"selectedMinute() === +minute\"\n          [disabled]=\"isDisabled()\"\n          tabindex=\"-1\"\n          (click)=\"onMinuteClick(minute)\"\n        >\n          {{ minute }}\n        </button>\n      }\n    </div>\n  </div>\n} @else if (variant() === 'dropdown') {\n  @if (timeSlots().length === 0) {\n    <p class=\"tedi-time-picker__empty\">{{ 'time-picker.no-slots' | tediTranslate }}</p>\n  } @else {\n    <div\n      class=\"tedi-time-picker__dropdown\"\n      role=\"listbox\"\n      [attr.aria-label]=\"'time-picker.times' | tediTranslate\"\n      [attr.aria-disabled]=\"isDisabled() ? true : null\"\n    >\n      @for (slot of timeSlots(); track slot; let i = $index) {\n        <div\n          class=\"tedi-time-picker__dropdown-item\"\n          role=\"option\"\n          [class.tedi-time-picker__dropdown-item--selected]=\"isSlotSelected(slot)\"\n          [attr.aria-selected]=\"isSlotSelected(slot)\"\n          [attr.aria-disabled]=\"isDisabled() ? true : null\"\n          [attr.tabindex]=\"isDisabled() ? -1 : getDropdownTabIndex(i)\"\n          (click)=\"!isDisabled() && selectSlot(slot)\"\n          (keydown)=\"onDropdownKeydown($event)\"\n        >\n          {{ slot }}\n        </div>\n      }\n    </div>\n  }\n} @else if (variant() === 'slots') {\n  @if (timeSlots().length === 0) {\n    <p class=\"tedi-time-picker__empty\">{{ 'time-picker.no-slots' | tediTranslate }}</p>\n  } @else {\n    <tedi-radio-card-group\n      class=\"tedi-time-picker__grid\"\n      role=\"radiogroup\"\n      [style]=\"gridStyle()\"\n    >\n      @for (slot of timeSlots(); track slot; let i = $index) {\n        <label\n          tedi-radio-card\n          variant=\"secondary\"\n          class=\"tedi-time-picker__slot\"\n          [showIndicator]=\"showSlotIndicator()\"\n          [for]=\"slotId(i)\"\n        >\n          <input\n            tedi-radio\n            type=\"radio\"\n            [id]=\"slotId(i)\"\n            [name]=\"radioGroupName\"\n            [value]=\"slot\"\n            [checked]=\"isSlotSelected(slot)\"\n            [disabled]=\"isDisabled()\"\n            (change)=\"onRadioChange(slot)\"\n          />\n          {{ slot }}\n        </label>\n      }\n    </tedi-radio-card-group>\n  }\n}\n", styles: [".tedi-time-picker{--tedi-time-picker-item-height: var(--tedi-dimensions-16);--tedi-time-picker-columns-height: 12.5rem;--tedi-time-picker-width: var(--tedi-containers-01);--_tedi-time-picker-snap-padding: calc((var(--tedi-time-picker-columns-height) - var(--tedi-time-picker-item-height)) / 2);display:block;width:fit-content}.tedi-time-picker--disabled{pointer-events:none;opacity:.5}.tedi-time-picker--disabled .tedi-time-picker__column,.tedi-time-picker--disabled .tedi-time-picker__dropdown{overflow:hidden}.tedi-time-picker--bordered{overflow:hidden;border:var(--tedi-borders-01) solid var(--general-border-primary);border-radius:var(--card-radius-rounded)}@media(max-width:61.98rem){.tedi-time-picker{--tedi-time-picker-item-height: var(--tedi-dimensions-18);--tedi-time-picker-columns-height: 15.75rem}}.tedi-time-picker__columns{position:relative;display:flex;width:var(--tedi-time-picker-width);height:var(--tedi-time-picker-columns-height);overflow:hidden;-webkit-user-select:none;user-select:none;background:var(--card-background-primary)}.tedi-time-picker__columns:before{position:absolute;inset:0;z-index:3;pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--card-background-primary) 0%,transparent 30%,transparent 70%,var(--card-background-primary) 100%)}.tedi-time-picker__columns:after{position:absolute;top:50%;right:0;left:0;z-index:1;height:var(--tedi-time-picker-item-height);pointer-events:none;content:\"\";background:var(--form-datepicker-date-selected);transform:translateY(-50%)}.tedi-time-picker__column{position:relative;z-index:2;flex:1;height:100%;padding:var(--_tedi-time-picker-snap-padding) 0;overflow-y:scroll;scroll-behavior:smooth;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;scroll-padding:var(--_tedi-time-picker-snap-padding);scrollbar-width:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:none}.tedi-time-picker__column::-webkit-scrollbar{display:none}.tedi-time-picker__column:focus{outline:none}.tedi-time-picker__column:focus-visible{z-index:5;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-time-picker__separator{position:relative;z-index:2;width:var(--tedi-borders-02);background:var(--general-border-primary)}.tedi-time-picker__item{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:var(--tedi-time-picker-item-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;scroll-snap-align:center;scroll-snap-stop:always;background:none;border:0}.tedi-time-picker__item:disabled{cursor:not-allowed}.tedi-time-picker__item:focus,.tedi-time-picker__item:focus-visible{outline:none;box-shadow:none}.tedi-time-picker__item--selected{z-index:2;color:var(--form-datepicker-date-text-selected)}.tedi-time-picker__dropdown{display:flex;flex-direction:column;min-width:var(--tedi-time-picker-dropdown-min-width, auto);overflow:auto;border-radius:var(--dropdown-item-radius)}.tedi-time-picker__empty{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);margin:0;font-size:var(--body-small-regular-size);color:var(--general-text-secondary);text-align:center}.tedi-time-picker__dropdown-item{display:flex;align-items:center;width:100%;min-height:var(--tedi-dimensions-16);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-time-picker__dropdown-item:hover{color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-time-picker__dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-time-picker__dropdown-item[aria-disabled=true]{cursor:not-allowed}.tedi-time-picker__dropdown-item[aria-disabled=true]:hover{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}.tedi-time-picker__dropdown-item--selected,.tedi-time-picker__dropdown-item--selected:hover{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-time-picker__grid{display:grid;gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}\n"], dependencies: [{ kind: "component", type: RadioCardComponent, selector: "label[tedi-radio-card]", inputs: ["variant", "grouped", "showIndicator"] }, { kind: "component", type: RadioCardGroupComponent, selector: "tedi-radio-card-group", inputs: ["grouped"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
@@ -12701,7 +12761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                             useExisting: forwardRef(() => TimePickerComponent),
                             multi: true,
                         },
-                    ], template: "@if (variant() === 'scroll') {\n  <div class=\"tedi-time-picker__columns\" role=\"group\">\n    <div\n      #hourColumn\n      class=\"tedi-time-picker__column\"\n      role=\"listbox\"\n      [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n      [attr.aria-label]=\"'time-picker.hours' | tediTranslate\"\n      [attr.aria-activedescendant]=\"hourActiveId()\"\n      [attr.aria-disabled]=\"isDisabled()\"\n      (keydown)=\"onColumnKeydown($event, 'hour')\"\n      (scroll)=\"onColumnScroll('hour')\"\n    >\n      @for (hour of hours; track hour; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"tedi-time-picker__item\"\n          role=\"option\"\n          [id]=\"hourItemId(i)\"\n          [class.tedi-time-picker__item--selected]=\"highlightedHourIndex() === i\"\n          [attr.aria-selected]=\"selectedHour() === +hour\"\n          [disabled]=\"isDisabled()\"\n          tabindex=\"-1\"\n          (click)=\"onHourClick(hour)\"\n        >\n          {{ hour }}\n        </button>\n      }\n    </div>\n    <div class=\"tedi-time-picker__separator\"></div>\n    <div\n      #minuteColumn\n      class=\"tedi-time-picker__column\"\n      role=\"listbox\"\n      [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n      [attr.aria-label]=\"'time-picker.minutes' | tediTranslate\"\n      [attr.aria-activedescendant]=\"minuteActiveId()\"\n      [attr.aria-disabled]=\"isDisabled()\"\n      (keydown)=\"onColumnKeydown($event, 'minute')\"\n      (scroll)=\"onColumnScroll('minute')\"\n    >\n      @for (minute of minutes(); track minute; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"tedi-time-picker__item\"\n          role=\"option\"\n          [id]=\"minuteItemId(i)\"\n          [class.tedi-time-picker__item--selected]=\"highlightedMinuteIndex() === i\"\n          [attr.aria-selected]=\"selectedMinute() === +minute\"\n          [disabled]=\"isDisabled()\"\n          tabindex=\"-1\"\n          (click)=\"onMinuteClick(minute)\"\n        >\n          {{ minute }}\n        </button>\n      }\n    </div>\n  </div>\n} @else if (variant() === 'dropdown') {\n  @if (timeSlots().length === 0) {\n    <p class=\"tedi-time-picker__empty\">{{ 'time-picker.no-slots' | tediTranslate }}</p>\n  } @else {\n    <div\n      class=\"tedi-time-picker__dropdown\"\n      role=\"listbox\"\n      [attr.aria-disabled]=\"isDisabled() ? true : null\"\n    >\n      @for (slot of timeSlots(); track slot; let i = $index) {\n        <div\n          class=\"tedi-time-picker__dropdown-item\"\n          role=\"option\"\n          [class.tedi-time-picker__dropdown-item--selected]=\"isSlotSelected(slot)\"\n          [attr.aria-selected]=\"isSlotSelected(slot)\"\n          [attr.aria-disabled]=\"isDisabled() ? true : null\"\n          [attr.tabindex]=\"isDisabled() ? -1 : getDropdownTabIndex(i)\"\n          (click)=\"!isDisabled() && selectSlot(slot)\"\n          (keydown)=\"onDropdownKeydown($event)\"\n        >\n          {{ slot }}\n        </div>\n      }\n    </div>\n  }\n} @else if (variant() === 'slots') {\n  @if (timeSlots().length === 0) {\n    <p class=\"tedi-time-picker__empty\">{{ 'time-picker.no-slots' | tediTranslate }}</p>\n  } @else {\n    <tedi-radio-card-group\n      class=\"tedi-time-picker__grid\"\n      role=\"radiogroup\"\n      [style]=\"gridStyle()\"\n    >\n      @for (slot of timeSlots(); track slot; let i = $index) {\n        <label\n          tedi-radio-card\n          variant=\"secondary\"\n          class=\"tedi-time-picker__slot\"\n          [showIndicator]=\"showSlotIndicator()\"\n          [for]=\"slotId(i)\"\n        >\n          <input\n            tedi-radio\n            type=\"radio\"\n            [id]=\"slotId(i)\"\n            [name]=\"radioGroupName\"\n            [value]=\"slot\"\n            [checked]=\"isSlotSelected(slot)\"\n            [disabled]=\"isDisabled()\"\n            (change)=\"onRadioChange(slot)\"\n          />\n          {{ slot }}\n        </label>\n      }\n    </tedi-radio-card-group>\n  }\n}\n", styles: [".tedi-time-picker{--tedi-time-picker-item-height: var(--tedi-dimensions-16);--tedi-time-picker-columns-height: 12.5rem;--tedi-time-picker-width: var(--tedi-containers-01);--_tedi-time-picker-snap-padding: calc((var(--tedi-time-picker-columns-height) - var(--tedi-time-picker-item-height)) / 2);display:block;width:fit-content}.tedi-time-picker--disabled{pointer-events:none;opacity:.5}.tedi-time-picker--bordered{overflow:hidden;border:var(--tedi-borders-01) solid var(--general-border-primary);border-radius:var(--card-radius-rounded)}@media(max-width:61.98rem){.tedi-time-picker{--tedi-time-picker-item-height: var(--tedi-dimensions-18);--tedi-time-picker-columns-height: 15.75rem}}.tedi-time-picker__columns{position:relative;display:flex;width:var(--tedi-time-picker-width);height:var(--tedi-time-picker-columns-height);overflow:hidden;-webkit-user-select:none;user-select:none;background:var(--card-background-primary)}.tedi-time-picker__columns:before{position:absolute;inset:0;z-index:3;pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--card-background-primary) 0%,transparent 30%,transparent 70%,var(--card-background-primary) 100%)}.tedi-time-picker__columns:after{position:absolute;top:50%;right:0;left:0;z-index:1;height:var(--tedi-time-picker-item-height);pointer-events:none;content:\"\";background:var(--form-datepicker-date-selected);transform:translateY(-50%)}.tedi-time-picker__column{position:relative;z-index:2;flex:1;height:100%;padding:var(--_tedi-time-picker-snap-padding) 0;overflow-y:scroll;scroll-behavior:smooth;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;scroll-padding:var(--_tedi-time-picker-snap-padding);scrollbar-width:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:none}.tedi-time-picker__column::-webkit-scrollbar{display:none}.tedi-time-picker__column:focus{outline:none}.tedi-time-picker__column:focus-visible{z-index:5;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-time-picker__separator{position:relative;z-index:2;width:var(--tedi-borders-02);background:var(--general-border-primary)}.tedi-time-picker__item{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:var(--tedi-time-picker-item-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;scroll-snap-align:center;scroll-snap-stop:always;background:none;border:0}.tedi-time-picker__item:disabled{cursor:not-allowed}.tedi-time-picker__item:focus,.tedi-time-picker__item:focus-visible{outline:none;box-shadow:none}.tedi-time-picker__item--selected{z-index:2;color:var(--form-datepicker-date-text-selected)}.tedi-time-picker__dropdown{display:flex;flex-direction:column;min-width:var(--tedi-time-picker-dropdown-min-width, auto);overflow:auto;border-radius:var(--dropdown-item-radius)}.tedi-time-picker__empty{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);margin:0;font-size:var(--body-small-regular-size);color:var(--general-text-secondary);text-align:center}.tedi-time-picker__dropdown-item{display:flex;align-items:center;width:100%;min-height:var(--tedi-dimensions-16);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-time-picker__dropdown-item:hover{color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-time-picker__dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-time-picker__dropdown-item[aria-disabled=true]{cursor:not-allowed}.tedi-time-picker__dropdown-item[aria-disabled=true]:hover{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}.tedi-time-picker__dropdown-item--selected,.tedi-time-picker__dropdown-item--selected:hover{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-time-picker__grid{display:grid;gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}\n"] }]
+                    ], template: "@if (variant() === 'scroll') {\n  <div class=\"tedi-time-picker__columns\" role=\"group\">\n    <div\n      #hourColumn\n      class=\"tedi-time-picker__column\"\n      role=\"listbox\"\n      [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n      [attr.aria-label]=\"'time-picker.hours' | tediTranslate\"\n      [attr.aria-activedescendant]=\"hourActiveId()\"\n      [attr.aria-disabled]=\"isDisabled()\"\n      (keydown)=\"onColumnKeydown($event, 'hour')\"\n      (scroll)=\"onColumnScroll('hour')\"\n    >\n      @for (hour of hours; track hour; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"tedi-time-picker__item\"\n          role=\"option\"\n          [id]=\"hourItemId(i)\"\n          [class.tedi-time-picker__item--selected]=\"highlightedHourIndex() === i\"\n          [attr.aria-selected]=\"selectedHour() === +hour\"\n          [disabled]=\"isDisabled()\"\n          tabindex=\"-1\"\n          (click)=\"onHourClick(hour)\"\n        >\n          {{ hour }}\n        </button>\n      }\n    </div>\n    <div class=\"tedi-time-picker__separator\"></div>\n    <div\n      #minuteColumn\n      class=\"tedi-time-picker__column\"\n      role=\"listbox\"\n      [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n      [attr.aria-label]=\"'time-picker.minutes' | tediTranslate\"\n      [attr.aria-activedescendant]=\"minuteActiveId()\"\n      [attr.aria-disabled]=\"isDisabled()\"\n      (keydown)=\"onColumnKeydown($event, 'minute')\"\n      (scroll)=\"onColumnScroll('minute')\"\n    >\n      @for (minute of minutes(); track minute; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"tedi-time-picker__item\"\n          role=\"option\"\n          [id]=\"minuteItemId(i)\"\n          [class.tedi-time-picker__item--selected]=\"highlightedMinuteIndex() === i\"\n          [attr.aria-selected]=\"selectedMinute() === +minute\"\n          [disabled]=\"isDisabled()\"\n          tabindex=\"-1\"\n          (click)=\"onMinuteClick(minute)\"\n        >\n          {{ minute }}\n        </button>\n      }\n    </div>\n  </div>\n} @else if (variant() === 'dropdown') {\n  @if (timeSlots().length === 0) {\n    <p class=\"tedi-time-picker__empty\">{{ 'time-picker.no-slots' | tediTranslate }}</p>\n  } @else {\n    <div\n      class=\"tedi-time-picker__dropdown\"\n      role=\"listbox\"\n      [attr.aria-label]=\"'time-picker.times' | tediTranslate\"\n      [attr.aria-disabled]=\"isDisabled() ? true : null\"\n    >\n      @for (slot of timeSlots(); track slot; let i = $index) {\n        <div\n          class=\"tedi-time-picker__dropdown-item\"\n          role=\"option\"\n          [class.tedi-time-picker__dropdown-item--selected]=\"isSlotSelected(slot)\"\n          [attr.aria-selected]=\"isSlotSelected(slot)\"\n          [attr.aria-disabled]=\"isDisabled() ? true : null\"\n          [attr.tabindex]=\"isDisabled() ? -1 : getDropdownTabIndex(i)\"\n          (click)=\"!isDisabled() && selectSlot(slot)\"\n          (keydown)=\"onDropdownKeydown($event)\"\n        >\n          {{ slot }}\n        </div>\n      }\n    </div>\n  }\n} @else if (variant() === 'slots') {\n  @if (timeSlots().length === 0) {\n    <p class=\"tedi-time-picker__empty\">{{ 'time-picker.no-slots' | tediTranslate }}</p>\n  } @else {\n    <tedi-radio-card-group\n      class=\"tedi-time-picker__grid\"\n      role=\"radiogroup\"\n      [style]=\"gridStyle()\"\n    >\n      @for (slot of timeSlots(); track slot; let i = $index) {\n        <label\n          tedi-radio-card\n          variant=\"secondary\"\n          class=\"tedi-time-picker__slot\"\n          [showIndicator]=\"showSlotIndicator()\"\n          [for]=\"slotId(i)\"\n        >\n          <input\n            tedi-radio\n            type=\"radio\"\n            [id]=\"slotId(i)\"\n            [name]=\"radioGroupName\"\n            [value]=\"slot\"\n            [checked]=\"isSlotSelected(slot)\"\n            [disabled]=\"isDisabled()\"\n            (change)=\"onRadioChange(slot)\"\n          />\n          {{ slot }}\n        </label>\n      }\n    </tedi-radio-card-group>\n  }\n}\n", styles: [".tedi-time-picker{--tedi-time-picker-item-height: var(--tedi-dimensions-16);--tedi-time-picker-columns-height: 12.5rem;--tedi-time-picker-width: var(--tedi-containers-01);--_tedi-time-picker-snap-padding: calc((var(--tedi-time-picker-columns-height) - var(--tedi-time-picker-item-height)) / 2);display:block;width:fit-content}.tedi-time-picker--disabled{pointer-events:none;opacity:.5}.tedi-time-picker--disabled .tedi-time-picker__column,.tedi-time-picker--disabled .tedi-time-picker__dropdown{overflow:hidden}.tedi-time-picker--bordered{overflow:hidden;border:var(--tedi-borders-01) solid var(--general-border-primary);border-radius:var(--card-radius-rounded)}@media(max-width:61.98rem){.tedi-time-picker{--tedi-time-picker-item-height: var(--tedi-dimensions-18);--tedi-time-picker-columns-height: 15.75rem}}.tedi-time-picker__columns{position:relative;display:flex;width:var(--tedi-time-picker-width);height:var(--tedi-time-picker-columns-height);overflow:hidden;-webkit-user-select:none;user-select:none;background:var(--card-background-primary)}.tedi-time-picker__columns:before{position:absolute;inset:0;z-index:3;pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--card-background-primary) 0%,transparent 30%,transparent 70%,var(--card-background-primary) 100%)}.tedi-time-picker__columns:after{position:absolute;top:50%;right:0;left:0;z-index:1;height:var(--tedi-time-picker-item-height);pointer-events:none;content:\"\";background:var(--form-datepicker-date-selected);transform:translateY(-50%)}.tedi-time-picker__column{position:relative;z-index:2;flex:1;height:100%;padding:var(--_tedi-time-picker-snap-padding) 0;overflow-y:scroll;scroll-behavior:smooth;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;scroll-padding:var(--_tedi-time-picker-snap-padding);scrollbar-width:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:none}.tedi-time-picker__column::-webkit-scrollbar{display:none}.tedi-time-picker__column:focus{outline:none}.tedi-time-picker__column:focus-visible{z-index:5;outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-time-picker__separator{position:relative;z-index:2;width:var(--tedi-borders-02);background:var(--general-border-primary)}.tedi-time-picker__item{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:var(--tedi-time-picker-item-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;scroll-snap-align:center;scroll-snap-stop:always;background:none;border:0}.tedi-time-picker__item:disabled{cursor:not-allowed}.tedi-time-picker__item:focus,.tedi-time-picker__item:focus-visible{outline:none;box-shadow:none}.tedi-time-picker__item--selected{z-index:2;color:var(--form-datepicker-date-text-selected)}.tedi-time-picker__dropdown{display:flex;flex-direction:column;min-width:var(--tedi-time-picker-dropdown-min-width, auto);overflow:auto;border-radius:var(--dropdown-item-radius)}.tedi-time-picker__empty{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);margin:0;font-size:var(--body-small-regular-size);color:var(--general-text-secondary);text-align:center}.tedi-time-picker__dropdown-item{display:flex;align-items:center;width:100%;min-height:var(--tedi-dimensions-16);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-time-picker__dropdown-item:hover{color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-time-picker__dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-time-picker__dropdown-item[aria-disabled=true]{cursor:not-allowed}.tedi-time-picker__dropdown-item[aria-disabled=true]:hover{color:var(--dropdown-item-default-text);background:var(--dropdown-item-default-background)}.tedi-time-picker__dropdown-item--selected,.tedi-time-picker__dropdown-item--selected:hover{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-time-picker__grid{display:grid;gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], timeSlots: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeSlots", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], showSlotIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSlotIndicator", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], trapFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "trapFocus", required: false }] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }], hourColumns: [{ type: i0.ViewChildren, args: ["hourColumn", { isSignal: true }] }], minuteColumns: [{ type: i0.ViewChildren, args: ["minuteColumn", { isSignal: true }] }] } });
 
 class TimePickerModalComponent {
@@ -13071,7 +13131,7 @@ class TimeFieldComponent {
                 provide: TEDI_FORM_FIELD_CONTROL,
                 useExisting: forwardRef(() => TimeFieldComponent),
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (usePopover()) {\n  <!--\n    The field wrapper is the popover anchor + trigger, so the picker matches the\n    input width. Button-trigger mode disables clicks on everything but the icon\n    (see SCSS); input-trigger mode opens from anywhere in the field.\n  -->\n  <tedi-popover\n    #popover\n    class=\"tedi-time-field__popover\"\n    [position]=\"popoverPosition()\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <div\n      #fieldEl\n      tedi-popover-trigger\n      class=\"tedi-time-field__field\"\n      [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n      [attr.role]=\"null\"\n      [attr.tabindex]=\"-1\"\n      (focus)=\"onFieldFocus($event)\"\n      (click)=\"onFieldClick()\"\n    >\n      <ng-container *ngTemplateOutlet=\"timeInput\" />\n      <div class=\"tedi-time-field__actions\">\n        <ng-container *ngTemplateOutlet=\"clearButton\" />\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [attr.aria-expanded]=\"popoverIsOpen() || null\"\n          aria-haspopup=\"dialog\"\n          (click)=\"onIconClick()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      </div>\n    </div>\n    <tedi-popover-content class=\"tedi-time-field__popover-content\" maxWidth=\"none\">\n      <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n    </tedi-popover-content>\n  </tedi-popover>\n} @else {\n  <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n  <div #fieldEl class=\"tedi-time-field__field\">\n    <ng-container *ngTemplateOutlet=\"timeInput\" />\n    <div class=\"tedi-time-field__actions\">\n      <ng-container *ngTemplateOutlet=\"clearButton\" />\n      @if (hasNativePicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openNativePicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else if (hasPicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openPicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else {\n        <span class=\"tedi-time-field__icon tedi-time-field__icon--static\" aria-hidden=\"true\">\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </span>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #timeInput>\n  <input\n    #inputElement\n    class=\"tedi-time-field__input\"\n    inputmode=\"numeric\"\n    [type]=\"inputType()\"\n    [id]=\"inputId()\"\n    [attr.placeholder]=\"placeholder()\"\n    [value]=\"inputValue()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"inputIsTrigger()\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    (click)=\"onInputClick($event)\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n\n<ng-template #clearButton>\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-time-field__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onClearClick($event)\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n</ng-template>\n\n<ng-template #pickerWheel>\n  <tedi-time-picker\n    #timePicker\n    [value]=\"value()\"\n    [variant]=\"customPickerVariant()\"\n    [timeSlots]=\"timeSlots()\"\n    [columns]=\"columns()\"\n    [showSlotIndicator]=\"showSlotIndicator()\"\n    [minuteStep]=\"minuteStep()\"\n    [trapFocus]=\"true\"\n    [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n    (valueChange)=\"onPickerValueChange($event)\"\n    (closeRequested)=\"closePopover()\"\n  />\n</ng-template>\n", styles: [".tedi-time-field,.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: TimePickerComponent, selector: "tedi-time-picker", inputs: ["value", "variant", "timeSlots", "columns", "showSlotIndicator", "minuteStep", "disabled", "border", "trapFocus"], outputs: ["valueChange", "closeRequested"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (usePopover()) {\n  <!--\n    The field wrapper is the popover anchor + trigger, so the picker matches the\n    input width. Button-trigger mode disables clicks on everything but the icon\n    (see SCSS); input-trigger mode opens from anywhere in the field.\n  -->\n  <tedi-popover\n    #popover\n    class=\"tedi-time-field__popover\"\n    [position]=\"popoverPosition()\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <div\n      #fieldEl\n      tedi-popover-trigger\n      [interactive]=\"false\"\n      class=\"tedi-time-field__field\"\n      [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n      [attr.tabindex]=\"-1\"\n      (focus)=\"onFieldFocus($event)\"\n      (click)=\"onFieldClick()\"\n    >\n      <ng-container *ngTemplateOutlet=\"timeInput\" />\n      <div class=\"tedi-time-field__actions\">\n        <ng-container *ngTemplateOutlet=\"clearButton\" />\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [attr.aria-expanded]=\"popoverIsOpen() || null\"\n          aria-haspopup=\"dialog\"\n          (click)=\"onIconClick()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      </div>\n    </div>\n    <tedi-popover-content class=\"tedi-time-field__popover-content\" maxWidth=\"none\">\n      <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n    </tedi-popover-content>\n  </tedi-popover>\n} @else {\n  <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n  <div #fieldEl class=\"tedi-time-field__field\">\n    <ng-container *ngTemplateOutlet=\"timeInput\" />\n    <div class=\"tedi-time-field__actions\">\n      <ng-container *ngTemplateOutlet=\"clearButton\" />\n      @if (hasNativePicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openNativePicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else if (hasPicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openPicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else {\n        <span class=\"tedi-time-field__icon tedi-time-field__icon--static\" aria-hidden=\"true\">\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </span>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #timeInput>\n  <input\n    #inputElement\n    class=\"tedi-time-field__input\"\n    inputmode=\"numeric\"\n    [type]=\"inputType()\"\n    [id]=\"inputId()\"\n    [attr.placeholder]=\"placeholder()\"\n    [value]=\"inputValue()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"inputIsTrigger()\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    (click)=\"onInputClick($event)\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n\n<ng-template #clearButton>\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-time-field__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onClearClick($event)\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n</ng-template>\n\n<ng-template #pickerWheel>\n  <tedi-time-picker\n    #timePicker\n    [value]=\"value()\"\n    [variant]=\"customPickerVariant()\"\n    [timeSlots]=\"timeSlots()\"\n    [columns]=\"columns()\"\n    [showSlotIndicator]=\"showSlotIndicator()\"\n    [minuteStep]=\"minuteStep()\"\n    [trapFocus]=\"true\"\n    [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n    (valueChange)=\"onPickerValueChange($event)\"\n    (closeRequested)=\"closePopover()\"\n  />\n</ng-template>\n", styles: [".tedi-time-field,.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "component", type: TimePickerComponent, selector: "tedi-time-picker", inputs: ["value", "variant", "timeSlots", "columns", "showSlotIndicator", "minuteStep", "disabled", "border", "trapFocus"], outputs: ["valueChange", "closeRequested"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimeFieldComponent, decorators: [{
             type: Component,
@@ -13098,30 +13158,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         },
                     ], host: {
                         class: "tedi-time-field",
-                    }, template: "@if (usePopover()) {\n  <!--\n    The field wrapper is the popover anchor + trigger, so the picker matches the\n    input width. Button-trigger mode disables clicks on everything but the icon\n    (see SCSS); input-trigger mode opens from anywhere in the field.\n  -->\n  <tedi-popover\n    #popover\n    class=\"tedi-time-field__popover\"\n    [position]=\"popoverPosition()\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <div\n      #fieldEl\n      tedi-popover-trigger\n      class=\"tedi-time-field__field\"\n      [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n      [attr.role]=\"null\"\n      [attr.tabindex]=\"-1\"\n      (focus)=\"onFieldFocus($event)\"\n      (click)=\"onFieldClick()\"\n    >\n      <ng-container *ngTemplateOutlet=\"timeInput\" />\n      <div class=\"tedi-time-field__actions\">\n        <ng-container *ngTemplateOutlet=\"clearButton\" />\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [attr.aria-expanded]=\"popoverIsOpen() || null\"\n          aria-haspopup=\"dialog\"\n          (click)=\"onIconClick()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      </div>\n    </div>\n    <tedi-popover-content class=\"tedi-time-field__popover-content\" maxWidth=\"none\">\n      <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n    </tedi-popover-content>\n  </tedi-popover>\n} @else {\n  <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n  <div #fieldEl class=\"tedi-time-field__field\">\n    <ng-container *ngTemplateOutlet=\"timeInput\" />\n    <div class=\"tedi-time-field__actions\">\n      <ng-container *ngTemplateOutlet=\"clearButton\" />\n      @if (hasNativePicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openNativePicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else if (hasPicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openPicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else {\n        <span class=\"tedi-time-field__icon tedi-time-field__icon--static\" aria-hidden=\"true\">\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </span>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #timeInput>\n  <input\n    #inputElement\n    class=\"tedi-time-field__input\"\n    inputmode=\"numeric\"\n    [type]=\"inputType()\"\n    [id]=\"inputId()\"\n    [attr.placeholder]=\"placeholder()\"\n    [value]=\"inputValue()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"inputIsTrigger()\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    (click)=\"onInputClick($event)\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n\n<ng-template #clearButton>\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-time-field__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onClearClick($event)\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n</ng-template>\n\n<ng-template #pickerWheel>\n  <tedi-time-picker\n    #timePicker\n    [value]=\"value()\"\n    [variant]=\"customPickerVariant()\"\n    [timeSlots]=\"timeSlots()\"\n    [columns]=\"columns()\"\n    [showSlotIndicator]=\"showSlotIndicator()\"\n    [minuteStep]=\"minuteStep()\"\n    [trapFocus]=\"true\"\n    [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n    (valueChange)=\"onPickerValueChange($event)\"\n    (closeRequested)=\"closePopover()\"\n  />\n</ng-template>\n", styles: [".tedi-time-field,.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"] }]
+                    }, template: "@if (usePopover()) {\n  <!--\n    The field wrapper is the popover anchor + trigger, so the picker matches the\n    input width. Button-trigger mode disables clicks on everything but the icon\n    (see SCSS); input-trigger mode opens from anywhere in the field.\n  -->\n  <tedi-popover\n    #popover\n    class=\"tedi-time-field__popover\"\n    [position]=\"popoverPosition()\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <div\n      #fieldEl\n      tedi-popover-trigger\n      [interactive]=\"false\"\n      class=\"tedi-time-field__field\"\n      [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n      [attr.tabindex]=\"-1\"\n      (focus)=\"onFieldFocus($event)\"\n      (click)=\"onFieldClick()\"\n    >\n      <ng-container *ngTemplateOutlet=\"timeInput\" />\n      <div class=\"tedi-time-field__actions\">\n        <ng-container *ngTemplateOutlet=\"clearButton\" />\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [attr.aria-expanded]=\"popoverIsOpen() || null\"\n          aria-haspopup=\"dialog\"\n          (click)=\"onIconClick()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      </div>\n    </div>\n    <tedi-popover-content class=\"tedi-time-field__popover-content\" maxWidth=\"none\">\n      <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n    </tedi-popover-content>\n  </tedi-popover>\n} @else {\n  <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n  <div #fieldEl class=\"tedi-time-field__field\">\n    <ng-container *ngTemplateOutlet=\"timeInput\" />\n    <div class=\"tedi-time-field__actions\">\n      <ng-container *ngTemplateOutlet=\"clearButton\" />\n      @if (hasNativePicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openNativePicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else if (hasPicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openPicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else {\n        <span class=\"tedi-time-field__icon tedi-time-field__icon--static\" aria-hidden=\"true\">\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </span>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #timeInput>\n  <input\n    #inputElement\n    class=\"tedi-time-field__input\"\n    inputmode=\"numeric\"\n    [type]=\"inputType()\"\n    [id]=\"inputId()\"\n    [attr.placeholder]=\"placeholder()\"\n    [value]=\"inputValue()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"inputIsTrigger()\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    (click)=\"onInputClick($event)\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n\n<ng-template #clearButton>\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-time-field__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onClearClick($event)\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n</ng-template>\n\n<ng-template #pickerWheel>\n  <tedi-time-picker\n    #timePicker\n    [value]=\"value()\"\n    [variant]=\"customPickerVariant()\"\n    [timeSlots]=\"timeSlots()\"\n    [columns]=\"columns()\"\n    [showSlotIndicator]=\"showSlotIndicator()\"\n    [minuteStep]=\"minuteStep()\"\n    [trapFocus]=\"true\"\n    [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n    (valueChange)=\"onPickerValueChange($event)\"\n    (closeRequested)=\"closePopover()\"\n  />\n</ng-template>\n", styles: [".tedi-time-field,.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], pickerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerVariant", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], pickerTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTrigger", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], timeSlots: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeSlots", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], showSlotIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSlotIndicator", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], inputElement: [{ type: i0.ViewChild, args: ["inputElement", { isSignal: true }] }], fieldEl: [{ type: i0.ViewChild, args: ["fieldEl", { isSignal: true }] }], popover: [{ type: i0.ViewChild, args: ["popover", { isSignal: true }] }], timePicker: [{ type: i0.ViewChild, args: ["timePicker", { isSignal: true }] }] } });
 
-class TextGroupLabelComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextGroupLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: TextGroupLabelComponent, isStandalone: true, selector: "tedi-text-group-label", ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextGroupLabelComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "tedi-text-group-label",
-                    template: `<ng-content />`,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                }]
-        }] });
-
 class TextGroupComponent {
     type = input("horizontal", ...(ngDevMode ? [{ debugName: "type" }] : []));
     labelWidth = input(...(ngDevMode ? [undefined, { debugName: "labelWidth" }] : []));
     breakpointService = inject(BreakpointService);
-    textGroupLabel = contentChild(TextGroupLabelComponent, ...(ngDevMode ? [{ debugName: "textGroupLabel", read: ElementRef }] : [{ read: ElementRef }]));
-    labelText = signal(null, ...(ngDevMode ? [{ debugName: "labelText" }] : []));
     xs = input(...(ngDevMode ? [undefined, { debugName: "xs" }] : []));
     sm = input(...(ngDevMode ? [undefined, { debugName: "sm" }] : []));
     md = input(...(ngDevMode ? [undefined, { debugName: "md" }] : []));
@@ -13148,24 +13191,30 @@ class TextGroupComponent {
         }
         return classList.join(" ");
     }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
-    ngAfterContentChecked() {
-        const labelEl = this.textGroupLabel()?.nativeElement;
-        if (labelEl) {
-            const text = labelEl.textContent?.trim() || null;
-            if (text !== this.labelText()) {
-                this.labelText.set(text);
-            }
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: TextGroupComponent, isStandalone: true, selector: "tedi-text-group", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "textGroupLabel", first: true, predicate: TextGroupLabelComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<dl [class]=\"classes()\" [style.--_label-width]=\"breakpointInputs().labelWidth\">\n  <dt [attr.aria-label]=\"labelText()\">\n    <span tedi-label aria-hidden=\"true\">\n      <ng-content select=\"tedi-text-group-label\"></ng-content>\n    </span>\n  </dt>\n  <dd>\n    <ng-content select=\"tedi-text-group-value\"></ng-content>\n  </dd>\n</dl>\n", styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group--fixed-label>dt{flex-shrink:0}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TextGroupComponent, isStandalone: true, selector: "tedi-text-group", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<dl [class]=\"classes()\" [style.--_label-width]=\"breakpointInputs().labelWidth\">\n  <dt>\n    <span tedi-label>\n      <ng-content select=\"tedi-text-group-label\"></ng-content>\n    </span>\n  </dt>\n  <dd>\n    <ng-content select=\"tedi-text-group-value\"></ng-content>\n  </dd>\n</dl>\n", styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group--fixed-label>dt{flex-shrink:0}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextGroupComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: "tedi-text-group", imports: [
                         LabelComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dl [class]=\"classes()\" [style.--_label-width]=\"breakpointInputs().labelWidth\">\n  <dt [attr.aria-label]=\"labelText()\">\n    <span tedi-label aria-hidden=\"true\">\n      <ng-content select=\"tedi-text-group-label\"></ng-content>\n    </span>\n  </dt>\n  <dd>\n    <ng-content select=\"tedi-text-group-value\"></ng-content>\n  </dd>\n</dl>\n", styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group--fixed-label>dt{flex-shrink:0}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"] }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], textGroupLabel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TextGroupLabelComponent), { ...{ read: ElementRef }, isSignal: true }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dl [class]=\"classes()\" [style.--_label-width]=\"breakpointInputs().labelWidth\">\n  <dt>\n    <span tedi-label>\n      <ng-content select=\"tedi-text-group-label\"></ng-content>\n    </span>\n  </dt>\n  <dd>\n    <ng-content select=\"tedi-text-group-value\"></ng-content>\n  </dd>\n</dl>\n", styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group--fixed-label>dt{flex-shrink:0}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
+
+class TextGroupLabelComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextGroupLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: TextGroupLabelComponent, isStandalone: true, selector: "tedi-text-group-label", ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextGroupLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "tedi-text-group-label",
+                    template: `<ng-content />`,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }] });
 
 class TextGroupValueComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextGroupValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -13198,6 +13247,8 @@ class CarouselContentComponent {
     fade = input(false, ...(ngDevMode ? [{ debugName: "fade" }] : []));
     /** Transition duration in ms */
     transitionMs = input(400, ...(ngDevMode ? [{ debugName: "transitionMs" }] : []));
+    /** Accessible label for the carousel region. Falls back to the `carousel` translation. */
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
     translationService = inject(TediTranslationService);
     breakpointService = inject(BreakpointService);
     host = inject(ElementRef);
@@ -13205,6 +13256,7 @@ class CarouselContentComponent {
     track = viewChild.required("track");
     slideElements = viewChildren("slide", ...(ngDevMode ? [{ debugName: "slideElements" }] : []));
     slides = contentChildren(CarouselSlideDirective, ...(ngDevMode ? [{ debugName: "slides" }] : []));
+    resolvedAriaLabel = computed(() => this.ariaLabel() ?? this.translationService.track("carousel")(), ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : []));
     trackIndex = signal(0, ...(ngDevMode ? [{ debugName: "trackIndex" }] : []));
     animate = signal(false, ...(ngDevMode ? [{ debugName: "animate" }] : []));
     viewportWidth = signal(0, ...(ngDevMode ? [{ debugName: "viewportWidth" }] : []));
@@ -13544,7 +13596,7 @@ class CarouselContentComponent {
         }, 100);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CarouselContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CarouselContentComponent, isStandalone: true, selector: "tedi-carousel-content", inputs: { slidesPerView: { classPropertyName: "slidesPerView", publicName: "slidesPerView", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, fade: { classPropertyName: "fade", publicName: "fade", isSignal: true, isRequired: false, transformFunction: null }, transitionMs: { classPropertyName: "transitionMs", publicName: "transitionMs", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "region", "aria-roledescription": "carousel", "aria-live": "off" }, listeners: { "scroll": "onScroll()", "wheel": "onWheel($event)", "keydown": "onKeyDown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "lostpointercapture": "onPointerUp()" }, properties: { "attr.aria-label": "translationService.track('carousel')()", "class": "classes()" } }, queries: [{ propertyName: "slides", predicate: CarouselSlideDirective, isSignal: true }], viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }, { propertyName: "slideElements", predicate: ["slide"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #track\n  class=\"tedi-carousel__track\"\n  [style]=\"trackStyle()\"\n  (transitionend)=\"onTransitionEnd($event)\"\n>\n  @for (idx of renderedIndices(); track $index) {\n    <div\n      #slide\n      class=\"tedi-carousel__slide\"\n      [attr.role]=\"isSlideVisible($index) ? 'group' : 'presentation'\"\n      aria-roledescription=\"slide\"\n      [attr.aria-label]=\"\n        translationService.track('carousel.slide', idx + 1, slides().length)()\n      \"\n      [attr.aria-current]=\"$index === renderedActiveIndex() ? 'true' : null\"\n      [attr.aria-hidden]=\"isSlideVisible($index) ? null : 'true'\"\n      [attr.tabindex]=\"isSlideVisible($index) ? '-1' : null\"\n      [style.flex]=\"slideFlex()\"\n    >\n      <ng-container *ngTemplateOutlet=\"slides()[idx].template\"></ng-container>\n    </div>\n  }\n</div>\n", styles: [".tedi-carousel__content{position:relative;width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;cursor:grab}.tedi-carousel__content:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-03))}.tedi-carousel__content:active{cursor:grabbing}.tedi-carousel__content--fade-right{-webkit-mask-image:linear-gradient(to right,black 90%,transparent 100%);mask-image:linear-gradient(to right,black 90%,transparent 100%)}.tedi-carousel__content--fade-x{-webkit-mask-image:linear-gradient(to right,black 85%,transparent 100%),linear-gradient(to left,black 85%,transparent 100%);mask-image:linear-gradient(to right,black 85%,transparent 100%),linear-gradient(to left,black 85%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}.tedi-carousel__track{display:flex;will-change:transform}.tedi-carousel__slide{-webkit-user-select:none;user-select:none;scroll-snap-align:none;scroll-margin:0;-webkit-user-drag:none}.tedi-carousel__slide:focus{outline:none}.tedi-carousel__slide:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-03))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CarouselContentComponent, isStandalone: true, selector: "tedi-carousel-content", inputs: { slidesPerView: { classPropertyName: "slidesPerView", publicName: "slidesPerView", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, fade: { classPropertyName: "fade", publicName: "fade", isSignal: true, isRequired: false, transformFunction: null }, transitionMs: { classPropertyName: "transitionMs", publicName: "transitionMs", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "region", "aria-roledescription": "carousel", "aria-live": "off" }, listeners: { "scroll": "onScroll()", "wheel": "onWheel($event)", "keydown": "onKeyDown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "lostpointercapture": "onPointerUp()" }, properties: { "attr.aria-label": "resolvedAriaLabel()", "class": "classes()" } }, queries: [{ propertyName: "slides", predicate: CarouselSlideDirective, isSignal: true }], viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }, { propertyName: "slideElements", predicate: ["slide"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #track\n  class=\"tedi-carousel__track\"\n  [style]=\"trackStyle()\"\n  (transitionend)=\"onTransitionEnd($event)\"\n>\n  @for (idx of renderedIndices(); track $index) {\n    <div\n      #slide\n      class=\"tedi-carousel__slide\"\n      [attr.role]=\"isSlideVisible($index) ? 'group' : 'presentation'\"\n      aria-roledescription=\"slide\"\n      [attr.aria-label]=\"\n        translationService.track('carousel.slide', idx + 1, slides().length)()\n      \"\n      [attr.aria-current]=\"$index === renderedActiveIndex() ? 'true' : null\"\n      [attr.aria-hidden]=\"isSlideVisible($index) ? null : 'true'\"\n      [attr.tabindex]=\"isSlideVisible($index) ? '-1' : null\"\n      [style.flex]=\"slideFlex()\"\n    >\n      <ng-container *ngTemplateOutlet=\"slides()[idx].template\"></ng-container>\n    </div>\n  }\n</div>\n", styles: [".tedi-carousel__content{position:relative;width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;cursor:grab}.tedi-carousel__content:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-03))}.tedi-carousel__content:active{cursor:grabbing}.tedi-carousel__content--fade-right{-webkit-mask-image:linear-gradient(to right,black 90%,transparent 100%);mask-image:linear-gradient(to right,black 90%,transparent 100%)}.tedi-carousel__content--fade-x{-webkit-mask-image:linear-gradient(to right,black 85%,transparent 100%),linear-gradient(to left,black 85%,transparent 100%);mask-image:linear-gradient(to right,black 85%,transparent 100%),linear-gradient(to left,black 85%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}.tedi-carousel__track{display:flex;will-change:transform}.tedi-carousel__slide{-webkit-user-select:none;user-select:none;scroll-snap-align:none;scroll-margin:0;-webkit-user-drag:none}.tedi-carousel__slide:focus{outline:none}.tedi-carousel__slide:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-03))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CarouselContentComponent, decorators: [{
             type: Component,
@@ -13552,11 +13604,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         tabindex: "0",
                         role: "region",
                         "aria-roledescription": "carousel",
-                        "[attr.aria-label]": "translationService.track('carousel')()",
+                        "[attr.aria-label]": "resolvedAriaLabel()",
                         "aria-live": "off",
                         "[class]": "classes()",
                     }, template: "<div\n  #track\n  class=\"tedi-carousel__track\"\n  [style]=\"trackStyle()\"\n  (transitionend)=\"onTransitionEnd($event)\"\n>\n  @for (idx of renderedIndices(); track $index) {\n    <div\n      #slide\n      class=\"tedi-carousel__slide\"\n      [attr.role]=\"isSlideVisible($index) ? 'group' : 'presentation'\"\n      aria-roledescription=\"slide\"\n      [attr.aria-label]=\"\n        translationService.track('carousel.slide', idx + 1, slides().length)()\n      \"\n      [attr.aria-current]=\"$index === renderedActiveIndex() ? 'true' : null\"\n      [attr.aria-hidden]=\"isSlideVisible($index) ? null : 'true'\"\n      [attr.tabindex]=\"isSlideVisible($index) ? '-1' : null\"\n      [style.flex]=\"slideFlex()\"\n    >\n      <ng-container *ngTemplateOutlet=\"slides()[idx].template\"></ng-container>\n    </div>\n  }\n</div>\n", styles: [".tedi-carousel__content{position:relative;width:100%;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;cursor:grab}.tedi-carousel__content:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-03))}.tedi-carousel__content:active{cursor:grabbing}.tedi-carousel__content--fade-right{-webkit-mask-image:linear-gradient(to right,black 90%,transparent 100%);mask-image:linear-gradient(to right,black 90%,transparent 100%)}.tedi-carousel__content--fade-x{-webkit-mask-image:linear-gradient(to right,black 85%,transparent 100%),linear-gradient(to left,black 85%,transparent 100%);mask-image:linear-gradient(to right,black 85%,transparent 100%),linear-gradient(to left,black 85%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}.tedi-carousel__track{display:flex;will-change:transform}.tedi-carousel__slide{-webkit-user-select:none;user-select:none;scroll-snap-align:none;scroll-margin:0;-webkit-user-drag:none}.tedi-carousel__slide:focus{outline:none}.tedi-carousel__slide:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-03))}\n"] }]
-        }], propDecorators: { slidesPerView: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidesPerView", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], fade: [{ type: i0.Input, args: [{ isSignal: true, alias: "fade", required: false }] }], transitionMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionMs", required: false }] }], track: [{ type: i0.ViewChild, args: ["track", { isSignal: true }] }], slideElements: [{ type: i0.ViewChildren, args: ["slide", { isSignal: true }] }], slides: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CarouselSlideDirective), { isSignal: true }] }], onScroll: [{
+        }], propDecorators: { slidesPerView: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidesPerView", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], fade: [{ type: i0.Input, args: [{ isSignal: true, alias: "fade", required: false }] }], transitionMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionMs", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], track: [{ type: i0.ViewChild, args: ["track", { isSignal: true }] }], slideElements: [{ type: i0.ViewChildren, args: ["slide", { isSignal: true }] }], slides: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CarouselSlideDirective), { isSignal: true }] }], onScroll: [{
                 type: HostListener,
                 args: ["scroll"]
             }], onWheel: [{
@@ -14578,6 +14630,16 @@ class TediTableComponent {
      * @default undefined
      */
     getSubRows = input(undefined, ...(ngDevMode ? [{ debugName: "getSubRows" }] : []));
+    /**
+     * Accessor returning a stable, unique id for a row, passed straight through
+     * to TanStack's `getRowId`. By default rows are keyed by their index, so
+     * selection / expansion state breaks as soon as the data changes (filtering,
+     * adding, removing, reordering rows). Key by an entity id instead — e.g.
+     * `getRowId: (row) => row.id` — to keep `rowSelection` / `expanded` stable
+     * across data updates and controllable from the outside by that id.
+     * @default undefined
+     */
+    getRowId = input(undefined, ...(ngDevMode ? [{ debugName: "getRowId" }] : []));
     /**
      * Table-level row grouping key. When set, consecutive rendered rows with an
      * equal key form a group, and:
@@ -14758,6 +14820,10 @@ class TediTableComponent {
     rowDetailsLabel = this.translation.track("table.row-details");
     dragColumnLabel = this.translation.track("table.drag-column");
     dragRowLabel = this.translation.track("table.drag-row");
+    selectColumnLabel = this.translation.track("table.select-column");
+    expandColumnLabel = this.translation.track("table.expand-column");
+    reorderColumnLabel = this.translation.track("table.reorder-column");
+    scrollRegionLabel = this.translation.track("table.scroll-region");
     // ── Keyboard column-reorder state machine ──────────────────────────────────
     /** Currently picked-up column id (during keyboard reordering), or `null`. */
     _pickedUpColumnId = signal(null, ...(ngDevMode ? [{ debugName: "_pickedUpColumnId" }] : []));
@@ -15043,6 +15109,7 @@ class TediTableComponent {
             manualFiltering,
             pageCount: manualPagination && pageCount !== undefined ? pageCount : undefined,
             rowCount: manualPagination && rowCount !== undefined ? rowCount : undefined,
+            getRowId: this.getRowId(),
             getRowCanExpand: renderSub
                 ? (this.getRowCanExpand() ?? (() => true))
                 : this.getRowCanExpand(),
@@ -15092,6 +15159,7 @@ class TediTableComponent {
         this.hasFilterableColumns();
         this.enableRowSelection();
         this.paginationOptions();
+        this.getRowId();
     }
     hostClasses = computed(() => {
         const rowExpand = this.expandTrigger() === "row";
@@ -15236,6 +15304,13 @@ class TediTableComponent {
         };
         effect(() => this.persistence.setControlled(this.state()));
         effect(() => this.persistence.setPersist(this.persist()));
+        // Keep the filter-popover drafts aligned with the applied filter state so a
+        // reset (clearFilters(), controlled state, a removed chip) doesn't leave a
+        // reopened popover showing stale inputs / checkboxes.
+        effect(() => {
+            const filters = this.tableState().columnFilters ?? [];
+            untracked(() => this.reconcileFilterDrafts(filters));
+        });
     }
     applyPatch(updater, getPrev, toPatch) {
         this.persistence.patch((state) => {
@@ -15246,6 +15321,18 @@ class TediTableComponent {
             return toPatch(next);
         });
     }
+    /**
+     * Clears every active column filter in one call, resetting all `filterable`
+     * columns at once. Routes through the same state machinery as the per-column
+     * **Clear** buttons, so it updates internal state, respects a controlled
+     * `state` input, and emits `(stateChange)`. Grab a component reference (e.g.
+     * a template ref `#table` or `viewChild`) to call it from consumer code.
+     */
+    clearFilters() {
+        // `true` forces the empty state rather than TanStack's `initialState`
+        // filters, so a controlled table always resets to no filters.
+        this.table.resetColumnFilters(true);
+    }
     handleRowClick(event, row) {
         // Clicks that land on an interactive control inside a cell (checkbox,
         // link, button, form field, …) must not also activate the row or toggle
@@ -15300,6 +15387,11 @@ class TediTableComponent {
     rowExpandsOnClick(row) {
         return this.expandTrigger() === "row" && row.getCanExpand();
     }
+    rowHasNestedInteractive(row) {
+        return (this.hasSelection() ||
+            this.reorderableRows() ||
+            (this.hasExpansion() && row.getCanExpand()));
+    }
     handleRowMouseEnter(row) {
         this._hoveredRowId.set(row.id);
     }
@@ -15778,10 +15870,25 @@ class TediTableComponent {
         const dir = column.getIsSorted();
         return dir === "asc" ? "ascending" : dir === "desc" ? "descending" : "none";
     }
-    getHeaderLabel(column) {
-        const meta = this.getColumnMeta(column);
+    getSrOnlyHeaderLabel(column) {
+        switch (column.id) {
+            case SELECT_COLUMN_ID:
+                return this.selectColumnLabel();
+            case EXPAND_COLUMN_ID:
+                return this.expandColumnLabel();
+            case DRAG_COLUMN_ID:
+                return this.reorderColumnLabel();
+        }
+        // Only provide a screen-reader-only name when the header renders no visible
+        // text (an empty `<th>` fails WCAG "empty-table-header"). Columns with a
+        // visible header are already named by their own text — adding an sr-only
+        // copy would double-announce them.
         const header = column.columnDef.header;
-        return meta?.label ?? (typeof header === "string" ? header : null);
+        const isEmptyHeader = header == null || (typeof header === "string" && header.trim() === "");
+        if (!isEmptyHeader) {
+            return null;
+        }
+        return this.getColumnMeta(column)?.label ?? null;
     }
     resolveColumnLabel(column) {
         const meta = this.getColumnMeta(column);
@@ -15960,6 +16067,12 @@ class TediTableComponent {
      * nothing.
      */
     filterDrafts = new Map();
+    // The applied filter value each draft was last synced from. Lets
+    // `reconcileFilterDrafts` tell an external filter reset (clearFilters(),
+    // controlled `state`, a removed filter chip) — where the applied value
+    // changed out from under the draft — apart from a half-typed draft the user
+    // is mid-editing (applied value unchanged), which must be preserved.
+    filterDraftBaselines = new Map();
     /**
      * Normalises `filterable: true | TableFilterOptions | undefined | false`
      * into `TableFilterOptions | null`. `null` means the column did not opt in.
@@ -16015,9 +16128,46 @@ class TediTableComponent {
         if (!s) {
             s = signal(initial);
             this.filterDrafts.set(columnId, s);
+            this.filterDraftBaselines.set(columnId, initial);
         }
         return s;
     }
+    /**
+     * Structural equality for filter values (strings, numbers, bigints, arrays,
+     * plain objects). Filter values are consumer-supplied `unknown`, so the
+     * comparison must never throw: reference-equal values (including equal
+     * primitives and bigints) short-circuit, and anything JSON can't serialise
+     * (bigint mismatches, cyclic structures) falls back to "changed".
+     */
+    filterValuesEqual(a, b) {
+        if (a === b)
+            return true;
+        if (a === undefined || b === undefined)
+            return false;
+        try {
+            return JSON.stringify(a) === JSON.stringify(b);
+        }
+        catch {
+            return false;
+        }
+    }
+    /**
+     * Realigns each open/created filter draft with the applied filter state
+     * whenever the latter changes externally (`clearFilters()`, controlled
+     * `state`, a removed filter chip). A draft is only overwritten when its
+     * column's applied value actually moved since the draft last synced — so an
+     * in-progress, unapplied draft (applied value unchanged) is left intact.
+     */
+    reconcileFilterDrafts(filters) {
+        const appliedById = new Map(filters.map((f) => [f.id, f.value]));
+        for (const [id, draft] of this.filterDrafts) {
+            const applied = appliedById.get(id);
+            if (!this.filterValuesEqual(applied, this.filterDraftBaselines.get(id))) {
+                draft.set(applied);
+                this.filterDraftBaselines.set(id, applied);
+            }
+        }
+    }
     /**
      * Called when the filter trigger button is clicked. If `clearOnClose` is
      * set, the draft is reset to the currently-applied value every time the
@@ -16100,13 +16250,13 @@ class TediTableComponent {
         return value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TediTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TediTableComponent, isStandalone: true, selector: "tedi-table", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, verticalBorders: { classPropertyName: "verticalBorders", publicName: "verticalBorders", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, stickyFirstColumn: { classPropertyName: "stickyFirstColumn", publicName: "stickyFirstColumn", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, fixedLayout: { classPropertyName: "fixedLayout", publicName: "fixedLayout", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, activeRowId: { classPropertyName: "activeRowId", publicName: "activeRowId", isSignal: true, isRequired: false, transformFunction: null }, selectedRowHighlight: { classPropertyName: "selectedRowHighlight", publicName: "selectedRowHighlight", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, enableRowSelection: { classPropertyName: "enableRowSelection", publicName: "enableRowSelection", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, enableColumnFilters: { classPropertyName: "enableColumnFilters", publicName: "enableColumnFilters", isSignal: true, isRequired: false, transformFunction: null }, renderSubComponent: { classPropertyName: "renderSubComponent", publicName: "renderSubComponent", isSignal: true, isRequired: false, transformFunction: null }, getRowCanExpand: { classPropertyName: "getRowCanExpand", publicName: "getRowCanExpand", isSignal: true, isRequired: false, transformFunction: null }, expandTrigger: { classPropertyName: "expandTrigger", publicName: "expandTrigger", isSignal: true, isRequired: false, transformFunction: null }, expandButtonVariant: { classPropertyName: "expandButtonVariant", publicName: "expandButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, expandButtonLabel: { classPropertyName: "expandButtonLabel", publicName: "expandButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, getSubRows: { classPropertyName: "getSubRows", publicName: "getSubRows", isSignal: true, isRequired: false, transformFunction: null }, groupRowsBy: { classPropertyName: "groupRowsBy", publicName: "groupRowsBy", isSignal: true, isRequired: false, transformFunction: null }, rowGroupDividers: { classPropertyName: "rowGroupDividers", publicName: "rowGroupDividers", isSignal: true, isRequired: false, transformFunction: null }, controlColumnOrder: { classPropertyName: "controlColumnOrder", publicName: "controlColumnOrder", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, paginationTop: { classPropertyName: "paginationTop", publicName: "paginationTop", isSignal: true, isRequired: false, transformFunction: null }, manualPagination: { classPropertyName: "manualPagination", publicName: "manualPagination", isSignal: true, isRequired: false, transformFunction: null }, manualSorting: { classPropertyName: "manualSorting", publicName: "manualSorting", isSignal: true, isRequired: false, transformFunction: null }, manualFiltering: { classPropertyName: "manualFiltering", publicName: "manualFiltering", isSignal: true, isRequired: false, transformFunction: null }, pageCount: { classPropertyName: "pageCount", publicName: "pageCount", isSignal: true, isRequired: false, transformFunction: null }, rowCount: { classPropertyName: "rowCount", publicName: "rowCount", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, defaultState: { classPropertyName: "defaultState", publicName: "defaultState", isSignal: true, isRequired: false, transformFunction: null }, persist: { classPropertyName: "persist", publicName: "persist", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placeholderRole: { classPropertyName: "placeholderRole", publicName: "placeholderRole", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, rowAriaLabel: { classPropertyName: "rowAriaLabel", publicName: "rowAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, reorderableRows: { classPropertyName: "reorderableRows", publicName: "reorderableRows", isSignal: true, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", rowClick: "rowClick", rowDrop: "rowDrop" }, host: { attributes: { "data-name": "tedi-table" }, properties: { "class": "hostClasses()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TediTableComponent, isStandalone: true, selector: "tedi-table", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, verticalBorders: { classPropertyName: "verticalBorders", publicName: "verticalBorders", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, stickyFirstColumn: { classPropertyName: "stickyFirstColumn", publicName: "stickyFirstColumn", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, fixedLayout: { classPropertyName: "fixedLayout", publicName: "fixedLayout", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, activeRowId: { classPropertyName: "activeRowId", publicName: "activeRowId", isSignal: true, isRequired: false, transformFunction: null }, selectedRowHighlight: { classPropertyName: "selectedRowHighlight", publicName: "selectedRowHighlight", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, enableRowSelection: { classPropertyName: "enableRowSelection", publicName: "enableRowSelection", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, enableColumnFilters: { classPropertyName: "enableColumnFilters", publicName: "enableColumnFilters", isSignal: true, isRequired: false, transformFunction: null }, renderSubComponent: { classPropertyName: "renderSubComponent", publicName: "renderSubComponent", isSignal: true, isRequired: false, transformFunction: null }, getRowCanExpand: { classPropertyName: "getRowCanExpand", publicName: "getRowCanExpand", isSignal: true, isRequired: false, transformFunction: null }, expandTrigger: { classPropertyName: "expandTrigger", publicName: "expandTrigger", isSignal: true, isRequired: false, transformFunction: null }, expandButtonVariant: { classPropertyName: "expandButtonVariant", publicName: "expandButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, expandButtonLabel: { classPropertyName: "expandButtonLabel", publicName: "expandButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, getSubRows: { classPropertyName: "getSubRows", publicName: "getSubRows", isSignal: true, isRequired: false, transformFunction: null }, getRowId: { classPropertyName: "getRowId", publicName: "getRowId", isSignal: true, isRequired: false, transformFunction: null }, groupRowsBy: { classPropertyName: "groupRowsBy", publicName: "groupRowsBy", isSignal: true, isRequired: false, transformFunction: null }, rowGroupDividers: { classPropertyName: "rowGroupDividers", publicName: "rowGroupDividers", isSignal: true, isRequired: false, transformFunction: null }, controlColumnOrder: { classPropertyName: "controlColumnOrder", publicName: "controlColumnOrder", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, paginationTop: { classPropertyName: "paginationTop", publicName: "paginationTop", isSignal: true, isRequired: false, transformFunction: null }, manualPagination: { classPropertyName: "manualPagination", publicName: "manualPagination", isSignal: true, isRequired: false, transformFunction: null }, manualSorting: { classPropertyName: "manualSorting", publicName: "manualSorting", isSignal: true, isRequired: false, transformFunction: null }, manualFiltering: { classPropertyName: "manualFiltering", publicName: "manualFiltering", isSignal: true, isRequired: false, transformFunction: null }, pageCount: { classPropertyName: "pageCount", publicName: "pageCount", isSignal: true, isRequired: false, transformFunction: null }, rowCount: { classPropertyName: "rowCount", publicName: "rowCount", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, defaultState: { classPropertyName: "defaultState", publicName: "defaultState", isSignal: true, isRequired: false, transformFunction: null }, persist: { classPropertyName: "persist", publicName: "persist", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placeholderRole: { classPropertyName: "placeholderRole", publicName: "placeholderRole", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, rowAriaLabel: { classPropertyName: "rowAriaLabel", publicName: "rowAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, reorderableRows: { classPropertyName: "reorderableRows", publicName: "reorderableRows", isSignal: true, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", rowClick: "rowClick", rowDrop: "rowDrop" }, host: { attributes: { "data-name": "tedi-table" }, properties: { "class": "hostClasses()" } }, providers: [
             {
                 provide: TEDI_TABLE_CONTEXT,
                 useFactory: (component) => component.contextValue,
                 deps: [TediTableComponent],
             },
-        ], queries: [{ propertyName: "customResultsTemplateRef", first: true, predicate: TediPaginationResultsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n  <div\n    [id]=\"liveRegionId\"\n    aria-live=\"polite\"\n    aria-atomic=\"true\"\n    class=\"tedi-table__sr-only\"\n  ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"top.boundaryCount\"\n      [siblingCount]=\"top.siblingCount\"\n      [labels]=\"top.labels\"\n      [background]=\"top.background\"\n      [dividerPosition]=\"top.dividerPosition\"\n      [hideResults]=\"top.hideResults\"\n      [hidePageSize]=\"top.hidePageSize\"\n      [hidePager]=\"top.hidePager\"\n      [hideArrows]=\"top.hideArrows\"\n      [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n      [arrowVariant]=\"top.arrowVariant\"\n      [showArrowLabels]=\"top.showArrowLabels\"\n      [previousIcon]=\"top.previousIcon\"\n      [nextIcon]=\"top.nextIcon\"\n      [showModalTitle]=\"top.showModalTitle\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (topResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n\n<div\n  #scrollContainer\n  class=\"tedi-table__scroll\"\n  [attr.style]=\"maxHeightStyle()\"\n  cdkScrollable\n>\n  <table\n    class=\"tedi-table__table\"\n    [attr.id]=\"id() || null\"\n    [attr.aria-rowcount]=\"ariaRowCount()\"\n    [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n  >\n    @if (caption(); as cap) {\n      <caption class=\"tedi-table__caption\">\n        @if (isString(cap)) {\n          {{ cap }}\n        } @else {\n          <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n        }\n      </caption>\n    }\n\n    <thead class=\"tedi-table__head\">\n      @for (\n        headerGroup of headerGroups();\n        track headerGroup.id;\n        let rowIndex = $index\n      ) {\n        <tr\n          class=\"tedi-table__row\"\n          [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n          [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          cdkDropListAutoScrollDisabled\n          (cdkDropListDropped)=\"handleColumnDrop($event)\"\n        >\n          @for (header of headerGroup.headers; track header.id) {\n            @if (shouldRenderHeader(header, rowIndex)) {\n              @let meta = getColumnMeta(header.column);\n              @let ariaSort = getHeaderAriaSort(header.column);\n              @let headerLabel = getHeaderLabel(header.column);\n              @let rowSpan = getHeaderRowSpan(header, rowIndex);\n              <th\n                scope=\"col\"\n                cdkDrag\n                [cdkDragDisabled]=\"\n                  !reorderableColumns() ||\n                  rowIndex > 0 ||\n                  header.column.id === SELECT_COLUMN_ID ||\n                  header.column.id === EXPAND_COLUMN_ID\n                \"\n                cdkDragLockAxis=\"x\"\n                (keydown)=\"handleHeaderKeydown($event, header)\"\n                [class]=\"\n                  'tedi-table__header-cell' +\n                  (isHeaderGroup(header)\n                    ? ' tedi-table__header-cell--group'\n                    : '') +\n                  (meta?.align\n                    ? ' tedi-table__cell--align-' + meta?.align\n                    : '') +\n                  (meta?.vAlign\n                    ? ' tedi-table__cell--valign-' + meta?.vAlign\n                    : '') +\n                  (pickedUpColumnId() === header.column.id\n                    ? ' tedi-table__header-cell--picked-up'\n                    : '') +\n                  stickyLeftClass(header.column.id)\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n                [attr.rowspan]=\"rowSpan\"\n                [attr.aria-sort]=\"ariaSort\"\n                [attr.aria-label]=\"headerLabel\"\n                [style.width.px]=\"headerCellWidth(header.column)\"\n                [style.min-width.px]=\"columnMinWidth(header.column)\"\n                [style.max-width.px]=\"columnMaxWidth(header.column)\"\n                [style.left.px]=\"stickyLeft(header.column.id)\"\n              >\n                @if (header.column.id === SELECT_COLUMN_ID) {\n                  @if (selectionMode() === \"multiple\") {\n                    <input\n                      tedi-checkbox\n                      type=\"checkbox\"\n                      [id]=\"resolvedId() + '-select-all'\"\n                      [name]=\"resolvedId() + '-select-all'\"\n                      [attr.aria-label]=\"selectAllLabel()\"\n                      [checked]=\"isAllPageRowsSelected()\"\n                      [indeterminate]=\"\n                        isSomePageRowsSelected() && !isAllPageRowsSelected()\n                      \"\n                      (change)=\"handleSelectAll($any($event.target).checked)\"\n                    />\n                  }\n                } @else if (header.column.id === EXPAND_COLUMN_ID) {\n                  <!-- empty -->\n                } @else if (header.column.id === DRAG_COLUMN_ID) {\n                  <!-- empty -->\n                } @else {\n                  <span class=\"tedi-table__header-content\">\n                    @if (\n                      reorderableColumns() &&\n                      rowIndex === 0 &&\n                      !isHeaderGroup(header)\n                    ) {\n                      <button\n                        type=\"button\"\n                        cdkDragHandle\n                        class=\"tedi-table__drag-handle\"\n                        [class.tedi-table__drag-handle--picked-up]=\"\n                          pickedUpColumnId() === header.column.id\n                        \"\n                        [id]=\"reorderHandleId(header.column.id)\"\n                        [attr.aria-label]=\"dragColumnLabel()\"\n                        [attr.aria-pressed]=\"\n                          reorderableColumns()\n                            ? pickedUpColumnId() === header.column.id\n                            : null\n                        \"\n                      >\n                        <tedi-icon\n                          name=\"drag_indicator\"\n                          [size]=\"18\"\n                          color=\"inherit\"\n                        />\n                      </button>\n                    }\n                    <ng-container\n                      *flexRender=\"\n                        header.column.columnDef.header;\n                        props: header.getContext();\n                        let content\n                      \"\n                    >\n                      @if (shouldRenderSortableHeader(header.column, content)) {\n                        <button\n                          tedi-table-header-button\n                          [icon]=\"sortIcon(header.column)\"\n                          [selected]=\"!!header.column.getIsSorted()\"\n                          (click)=\"handleSortToggle(header.column)\"\n                        >\n                          {{ content }}\n                        </button>\n                      } @else if (isString(content) || isNumber(content)) {\n                        {{ content }}\n                      } @else {\n                        {{ content }}\n                      }\n                    </ng-container>\n                    @if (shouldRenderFilterButton(header.column)) {\n                      <tedi-popover\n                        #filterPopover\n                        class=\"tedi-table__filter-popover\"\n                        position=\"bottom-end\"\n                        [preventOverflow]=\"true\"\n                      >\n                        <button\n                          tedi-popover-trigger\n                          tedi-table-header-button\n                          icon=\"filter_alt\"\n                          [selected]=\"filterIsActive(header.column)\"\n                          [filled]=\"filterIsActive(header.column)\"\n                          [aria-label]=\"filterAriaLabel(header.column)\"\n                          (click)=\"handleFilterTriggerClick(header.column)\"\n                        ></button>\n                        <tedi-popover-content>\n                          <div class=\"tedi-table__filter\">\n                            <div class=\"tedi-table__filter-body\">\n                              @if (filterTemplateFor(header.column); as tpl) {\n                                <ng-container\n                                  *ngTemplateOutlet=\"\n                                    tpl;\n                                    context: filterContextFor(\n                                      header.column,\n                                      filterPopover\n                                    )\n                                  \"\n                                />\n                              }\n                            </div>\n                            <div class=\"tedi-table__filter-actions\">\n                              <button\n                                tedi-button\n                                variant=\"secondary\"\n                                size=\"small\"\n                                type=\"button\"\n                                (click)=\"\n                                  handleFilterClear(\n                                    header.column,\n                                    filterPopover\n                                  )\n                                \"\n                              >\n                                {{ filterClearLabel() }}\n                              </button>\n                              <button\n                                tedi-button\n                                variant=\"primary\"\n                                size=\"small\"\n                                type=\"button\"\n                                (click)=\"\n                                  handleFilterApply(\n                                    header.column,\n                                    filterPopover\n                                  )\n                                \"\n                              >\n                                {{ filterApplyLabel() }}\n                              </button>\n                            </div>\n                          </div>\n                        </tedi-popover-content>\n                      </tedi-popover>\n                    }\n                  </span>\n                }\n              </th>\n            }\n          }\n        </tr>\n      }\n      @if (enableColumnFilters()) {\n        <tr\n          class=\"tedi-table__row tedi-table__row--filter\"\n          [attr.aria-rowindex]=\"\n            ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n          \"\n        >\n          @for (column of leafColumns(); track column.id) {\n            @let filterId = resolvedId() + \"-filter-\" + column.id;\n            <th class=\"tedi-table__header-cell\" scope=\"col\">\n              @if (column.getCanFilter()) {\n                <tedi-form-field size=\"small\">\n                  <input\n                    tedi-text-field\n                    type=\"text\"\n                    [id]=\"filterId\"\n                    [name]=\"filterId\"\n                    [attr.aria-label]=\"filterLabel(column)\"\n                    [placeholder]=\"filterPlaceholder()\"\n                    [value]=\"getFilterValue(column)\"\n                    (input)=\"\n                      handleColumnFilter(column, $any($event.target).value)\n                    \"\n                  />\n                </tedi-form-field>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody\n      class=\"tedi-table__body\"\n      cdkDropList\n      [cdkDropListDisabled]=\"!reorderableRows()\"\n      (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n    >\n      @if (rows().length === 0) {\n        <tr class=\"tedi-table__row\">\n          <td\n            class=\"tedi-table__cell tedi-table__cell--placeholder\"\n            [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n          >\n            @if (placeholder(); as pl) {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  @if (isString(pl)) {\n                    {{ pl }}\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                  }\n                </div>\n              } @else {\n                @if (isString(pl)) {\n                  {{ pl }}\n                } @else {\n                  <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                }\n              }\n            } @else {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  {{ placeholderLabel() }}\n                </div>\n              } @else {\n                {{ placeholderLabel() }}\n              }\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of rows(); track row.id) {\n          @let isActiveRow =\n            activeRowId() !== undefined && row.id === activeRowId();\n          @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n          @let subRowId = resolvedId() + \"-sub-\" + row.id;\n          @let expandsOnClick = rowExpandsOnClick(row);\n          <tr\n            cdkDrag\n            [cdkDragDisabled]=\"!reorderableRows()\"\n            cdkDragLockAxis=\"y\"\n            [class]=\"\n              'tedi-table__row' +\n              (this.selectedRowHighlight() && row.getIsSelected()\n                ? ' tedi-table__row--selected'\n                : '') +\n              (isActiveRow ? ' tedi-table__row--active' : '') +\n              (interactive() || expandsOnClick\n                ? ' tedi-table__row--clickable'\n                : '') +\n              (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n              (groupStartRowIds().has(row.id)\n                ? ' tedi-table__row--group-start'\n                : '') +\n              (pickedUpRow() === row.original\n                ? ' tedi-table__row--picked-up'\n                : '')\n            \"\n            [attr.role]=\"interactive() ? 'button' : null\"\n            [attr.tabindex]=\"interactive() ? 0 : null\"\n            [attr.aria-label]=\"rowAriaLabelFor(row)\"\n            [attr.aria-rowindex]=\"ariaRowIndex\"\n            [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n            (click)=\"\n              (interactive() || expandsOnClick) && handleRowClick($event, row)\n            \"\n            (keydown)=\"handleRowKeydown($event, row)\"\n            (mouseenter)=\"handleRowMouseEnter(row)\"\n            (mouseleave)=\"handleRowMouseLeave()\"\n          >\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              @let cellMeta = getColumnMeta(cell.column);\n              @let cellContext = cell.getContext();\n              @let resolvedSpan = resolveRowSpan(cell, cellContext);\n              @if (resolvedSpan !== 0) {\n                <td\n                  [class]=\"\n                    'tedi-table__cell' +\n                    (cellMeta?.align\n                      ? ' tedi-table__cell--align-' + cellMeta?.align\n                      : '') +\n                    (cellMeta?.vAlign\n                      ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n                      : '') +\n                    stickyLeftClass(cell.column.id)\n                  \"\n                  [style.left.px]=\"stickyLeft(cell.column.id)\"\n                  [attr.rowspan]=\"\n                    resolvedSpan !== null && resolvedSpan > 1\n                      ? resolvedSpan\n                      : null\n                  \"\n                >\n                  @if (cell.column.id === DRAG_COLUMN_ID) {\n                    <button\n                      type=\"button\"\n                      cdkDragHandle\n                      class=\"tedi-table__drag-handle\"\n                      [class.tedi-table__drag-handle--picked-up]=\"\n                        pickedUpRow() === row.original\n                      \"\n                      [id]=\"rowReorderHandleId(row.id)\"\n                      [attr.aria-label]=\"dragRowLabel()\"\n                      [attr.aria-pressed]=\"\n                        reorderableRows()\n                          ? pickedUpRow() === row.original\n                          : null\n                      \"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown)=\"handleRowReorderKeydown($event, row)\"\n                    >\n                      <tedi-icon\n                        name=\"drag_indicator\"\n                        [size]=\"18\"\n                        color=\"inherit\"\n                      />\n                    </button>\n                  } @else if (cell.column.id === SELECT_COLUMN_ID) {\n                    @if (selectionMode() === \"multiple\") {\n                      <input\n                        tedi-checkbox\n                        type=\"checkbox\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-' + row.id\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"isRowSelected(row)\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        [indeterminate]=\"isRowIndeterminate(row)\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    } @else {\n                      <input\n                        tedi-radio\n                        type=\"radio\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-row'\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"row.getIsSelected()\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    }\n                  } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n                    <span\n                      class=\"tedi-table__expand-toggle\"\n                      [class.tedi-table__expand-toggle--icon-only]=\"\n                        !expandButtonHasLabel()\n                      \"\n                    >\n                      @if (row.getCanExpand()) {\n                        @let expandOpen = row.getIsExpanded();\n                        <button\n                          tedi-collapse-button\n                          [arrowType]=\"resolvedExpandVariant()\"\n                          [hideText]=\"!expandButtonHasLabel()\"\n                          [openText]=\"expandButtonOpenText()\"\n                          [closeText]=\"expandButtonCloseText()\"\n                          [open]=\"expandOpen\"\n                          [id]=\"resolvedId() + '-expand-' + row.id\"\n                          [ariaControls]=\"subRowId\"\n                          [ariaLabel]=\"\n                            expandButtonHasLabel()\n                              ? undefined\n                              : expandRowLabel(expandOpen)\n                          \"\n                          (openChange)=\"handleExpandToggle(row)\"\n                          (click)=\"$event.stopPropagation()\"\n                          (keydown)=\"handleExpandKeydown($event)\"\n                        ></button>\n                      }\n                    </span>\n                  } @else {\n                    <ng-container\n                      *flexRender=\"\n                        cell.column.columnDef.cell;\n                        props: cellContext;\n                        let content\n                      \"\n                    >\n                      {{ content }}\n                    </ng-container>\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (renderSubComponent(); as subTpl) {\n            @if (row.getCanExpand()) {\n              @let isExpanded = row.getIsExpanded();\n              <tr\n                [class]=\"\n                  'tedi-table__row tedi-table__row--sub-component' +\n                  (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n                \"\n              >\n                <td\n                  class=\"tedi-table__cell tedi-table__cell--sub-component\"\n                  [attr.id]=\"subRowId\"\n                  [attr.role]=\"isExpanded ? 'region' : null\"\n                  [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n                  [attr.inert]=\"isExpanded ? null : ''\"\n                  [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n                >\n                  <div class=\"tedi-table__sub-component-wrapper\">\n                    <div class=\"tedi-table__sub-component-content\">\n                      <div class=\"tedi-table__sub-component-inner\">\n                        <ng-container\n                          *ngTemplateOutlet=\"subTpl; context: { $implicit: row }\"\n                        />\n                      </div>\n                    </div>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        }\n      }\n    </tbody>\n\n    @if (hasFooter()) {\n      <tfoot class=\"tedi-table__foot\">\n        @for (group of footerGroups(); track group.id) {\n          <tr class=\"tedi-table__row\">\n            @for (header of group.headers; track header.id) {\n              @let footerMeta = getColumnMeta(header.column);\n              <td\n                [class]=\"\n                  'tedi-table__cell tedi-table__cell--footer' +\n                  (footerMeta?.align\n                    ? ' tedi-table__cell--align-' + footerMeta?.align\n                    : '') +\n                  (footerMeta?.vAlign\n                    ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n                    : '')\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n              >\n                @if (!header.isPlaceholder) {\n                  <ng-container\n                    *flexRender=\"\n                      header.column.columnDef.footer;\n                      props: header.getContext();\n                      let content\n                    \"\n                  >\n                    {{ content }}\n                  </ng-container>\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"bottom.boundaryCount\"\n      [siblingCount]=\"bottom.siblingCount\"\n      [labels]=\"bottom.labels\"\n      [background]=\"bottom.background\"\n      [dividerPosition]=\"bottom.dividerPosition\"\n      [hideResults]=\"bottom.hideResults\"\n      [hidePageSize]=\"bottom.hidePageSize\"\n      [hidePager]=\"bottom.hidePager\"\n      [hideArrows]=\"bottom.hideArrows\"\n      [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n      [arrowVariant]=\"bottom.arrowVariant\"\n      [showArrowLabels]=\"bottom.showArrowLabels\"\n      [previousIcon]=\"bottom.previousIcon\"\n      [nextIcon]=\"bottom.nextIcon\"\n      [showModalTitle]=\"bottom.showModalTitle\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (bottomResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-center .tedi-table__expand-toggle{justify-content:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: PaginationComponent, selector: "tedi-pagination", inputs: ["pageCount", "page", "totalItems", "pageSize", "pageSizeOptions", "boundaryCount", "siblingCount", "labels", "background", "dividerPosition", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TediPaginationResultsDirective, selector: "[tediPaginationResults]" }, { kind: "component", type: TediTableHeaderButtonComponent, selector: "button[tedi-table-header-button]", inputs: ["icon", "filled", "selected", "disabled", "iconSize", "aria-label"] }, { kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "underline", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "customResultsTemplateRef", first: true, predicate: TediPaginationResultsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n  <div\n    [id]=\"liveRegionId\"\n    aria-live=\"polite\"\n    aria-atomic=\"true\"\n    class=\"tedi-table__sr-only\"\n  ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"top.boundaryCount\"\n      [siblingCount]=\"top.siblingCount\"\n      [labels]=\"top.labels\"\n      [background]=\"top.background\"\n      [dividerPosition]=\"top.dividerPosition\"\n      [hideResults]=\"top.hideResults\"\n      [hidePageSize]=\"top.hidePageSize\"\n      [hidePager]=\"top.hidePager\"\n      [hideArrows]=\"top.hideArrows\"\n      [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n      [arrowVariant]=\"top.arrowVariant\"\n      [showArrowLabels]=\"top.showArrowLabels\"\n      [previousIcon]=\"top.previousIcon\"\n      [nextIcon]=\"top.nextIcon\"\n      [showModalTitle]=\"top.showModalTitle\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (topResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n\n<div\n  #scrollContainer\n  class=\"tedi-table__scroll\"\n  [attr.style]=\"maxHeightStyle()\"\n  cdkScrollable\n  tabindex=\"0\"\n  role=\"group\"\n  [attr.aria-label]=\"scrollRegionLabel()\"\n>\n  <table\n    class=\"tedi-table__table\"\n    [attr.id]=\"id() || null\"\n    [attr.aria-rowcount]=\"ariaRowCount()\"\n    [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n  >\n    @if (caption(); as cap) {\n      <caption class=\"tedi-table__caption\">\n        @if (isString(cap)) {\n          {{ cap }}\n        } @else {\n          <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n        }\n      </caption>\n    }\n\n    <thead class=\"tedi-table__head\">\n      @for (\n        headerGroup of headerGroups();\n        track headerGroup.id;\n        let rowIndex = $index\n      ) {\n        <tr\n          class=\"tedi-table__row\"\n          [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n          [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          cdkDropListAutoScrollDisabled\n          (cdkDropListDropped)=\"handleColumnDrop($event)\"\n        >\n          @for (header of headerGroup.headers; track header.id) {\n            @if (shouldRenderHeader(header, rowIndex)) {\n              @let meta = getColumnMeta(header.column);\n              @let ariaSort = getHeaderAriaSort(header.column);\n              @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n              @let rowSpan = getHeaderRowSpan(header, rowIndex);\n              <th\n                scope=\"col\"\n                cdkDrag\n                [cdkDragDisabled]=\"\n                  !reorderableColumns() ||\n                  rowIndex > 0 ||\n                  header.column.id === SELECT_COLUMN_ID ||\n                  header.column.id === EXPAND_COLUMN_ID\n                \"\n                cdkDragLockAxis=\"x\"\n                (keydown)=\"handleHeaderKeydown($event, header)\"\n                [class]=\"\n                  'tedi-table__header-cell' +\n                  (isHeaderGroup(header)\n                    ? ' tedi-table__header-cell--group'\n                    : '') +\n                  (meta?.align\n                    ? ' tedi-table__cell--align-' + meta?.align\n                    : '') +\n                  (meta?.vAlign\n                    ? ' tedi-table__cell--valign-' + meta?.vAlign\n                    : '') +\n                  (pickedUpColumnId() === header.column.id\n                    ? ' tedi-table__header-cell--picked-up'\n                    : '') +\n                  stickyLeftClass(header.column.id)\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n                [attr.rowspan]=\"rowSpan\"\n                [attr.aria-sort]=\"ariaSort\"\n                [style.width.px]=\"headerCellWidth(header.column)\"\n                [style.min-width.px]=\"columnMinWidth(header.column)\"\n                [style.max-width.px]=\"columnMaxWidth(header.column)\"\n                [style.left.px]=\"stickyLeft(header.column.id)\"\n              >\n                @if (srHeaderLabel) {\n                  <span class=\"tedi-table__sr-only\">{{ srHeaderLabel }}</span>\n                }\n                @if (header.column.id === SELECT_COLUMN_ID) {\n                  @if (selectionMode() === \"multiple\") {\n                    <input\n                      tedi-checkbox\n                      type=\"checkbox\"\n                      [id]=\"resolvedId() + '-select-all'\"\n                      [name]=\"resolvedId() + '-select-all'\"\n                      [attr.aria-label]=\"selectAllLabel()\"\n                      [checked]=\"isAllPageRowsSelected()\"\n                      [indeterminate]=\"\n                        isSomePageRowsSelected() && !isAllPageRowsSelected()\n                      \"\n                      (change)=\"handleSelectAll($any($event.target).checked)\"\n                    />\n                  }\n                } @else if (header.column.id === EXPAND_COLUMN_ID) {\n                  <!-- empty -->\n                } @else if (header.column.id === DRAG_COLUMN_ID) {\n                  <!-- empty -->\n                } @else {\n                  <span class=\"tedi-table__header-content\">\n                    @if (\n                      reorderableColumns() &&\n                      rowIndex === 0 &&\n                      !isHeaderGroup(header)\n                    ) {\n                      <button\n                        type=\"button\"\n                        cdkDragHandle\n                        class=\"tedi-table__drag-handle\"\n                        [class.tedi-table__drag-handle--picked-up]=\"\n                          pickedUpColumnId() === header.column.id\n                        \"\n                        [id]=\"reorderHandleId(header.column.id)\"\n                        [attr.aria-label]=\"dragColumnLabel()\"\n                        [attr.aria-pressed]=\"\n                          reorderableColumns()\n                            ? pickedUpColumnId() === header.column.id\n                            : null\n                        \"\n                      >\n                        <tedi-icon\n                          name=\"drag_indicator\"\n                          [size]=\"18\"\n                          color=\"inherit\"\n                        />\n                      </button>\n                    }\n                    <ng-container\n                      *flexRender=\"\n                        header.column.columnDef.header;\n                        props: header.getContext();\n                        let content\n                      \"\n                    >\n                      @if (shouldRenderSortableHeader(header.column, content)) {\n                        <button\n                          tedi-table-header-button\n                          [icon]=\"sortIcon(header.column)\"\n                          [selected]=\"!!header.column.getIsSorted()\"\n                          (click)=\"handleSortToggle(header.column)\"\n                        >\n                          {{ content }}\n                        </button>\n                      } @else if (isString(content) || isNumber(content)) {\n                        {{ content }}\n                      } @else {\n                        {{ content }}\n                      }\n                    </ng-container>\n                    @if (shouldRenderFilterButton(header.column)) {\n                      <tedi-popover\n                        #filterPopover\n                        class=\"tedi-table__filter-popover\"\n                        position=\"bottom-end\"\n                        [preventOverflow]=\"true\"\n                      >\n                        <button\n                          tedi-popover-trigger\n                          tedi-table-header-button\n                          icon=\"filter_alt\"\n                          [selected]=\"filterIsActive(header.column)\"\n                          [filled]=\"filterIsActive(header.column)\"\n                          [aria-label]=\"filterAriaLabel(header.column)\"\n                          (click)=\"handleFilterTriggerClick(header.column)\"\n                        ></button>\n                        <tedi-popover-content>\n                          <div class=\"tedi-table__filter\">\n                            <div class=\"tedi-table__filter-body\">\n                              @if (filterTemplateFor(header.column); as tpl) {\n                                <ng-container\n                                  *ngTemplateOutlet=\"\n                                    tpl;\n                                    context: filterContextFor(\n                                      header.column,\n                                      filterPopover\n                                    )\n                                  \"\n                                />\n                              }\n                            </div>\n                            <div class=\"tedi-table__filter-actions\">\n                              <button\n                                tedi-button\n                                variant=\"secondary\"\n                                size=\"small\"\n                                type=\"button\"\n                                (click)=\"\n                                  handleFilterClear(\n                                    header.column,\n                                    filterPopover\n                                  )\n                                \"\n                              >\n                                {{ filterClearLabel() }}\n                              </button>\n                              <button\n                                tedi-button\n                                variant=\"primary\"\n                                size=\"small\"\n                                type=\"button\"\n                                (click)=\"\n                                  handleFilterApply(\n                                    header.column,\n                                    filterPopover\n                                  )\n                                \"\n                              >\n                                {{ filterApplyLabel() }}\n                              </button>\n                            </div>\n                          </div>\n                        </tedi-popover-content>\n                      </tedi-popover>\n                    }\n                  </span>\n                }\n              </th>\n            }\n          }\n        </tr>\n      }\n      @if (enableColumnFilters()) {\n        <tr\n          class=\"tedi-table__row tedi-table__row--filter\"\n          [attr.aria-rowindex]=\"\n            ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n          \"\n        >\n          @for (column of leafColumns(); track column.id) {\n            @let filterId = resolvedId() + \"-filter-\" + column.id;\n            <th class=\"tedi-table__header-cell\" scope=\"col\">\n              @if (column.getCanFilter()) {\n                <tedi-form-field size=\"small\">\n                  <input\n                    tedi-text-field\n                    type=\"text\"\n                    [id]=\"filterId\"\n                    [name]=\"filterId\"\n                    [attr.aria-label]=\"filterLabel(column)\"\n                    [placeholder]=\"filterPlaceholder()\"\n                    [value]=\"getFilterValue(column)\"\n                    (input)=\"\n                      handleColumnFilter(column, $any($event.target).value)\n                    \"\n                  />\n                </tedi-form-field>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody\n      class=\"tedi-table__body\"\n      cdkDropList\n      [cdkDropListDisabled]=\"!reorderableRows()\"\n      (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n    >\n      @if (rows().length === 0) {\n        <tr class=\"tedi-table__row\">\n          <td\n            class=\"tedi-table__cell tedi-table__cell--placeholder\"\n            [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n          >\n            @if (placeholder(); as pl) {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  @if (isString(pl)) {\n                    {{ pl }}\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                  }\n                </div>\n              } @else {\n                @if (isString(pl)) {\n                  {{ pl }}\n                } @else {\n                  <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                }\n              }\n            } @else {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  {{ placeholderLabel() }}\n                </div>\n              } @else {\n                {{ placeholderLabel() }}\n              }\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of rows(); track row.id) {\n          @let isActiveRow =\n            activeRowId() !== undefined && row.id === activeRowId();\n          @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n          @let subRowId = resolvedId() + \"-sub-\" + row.id;\n          @let expandsOnClick = rowExpandsOnClick(row);\n          <tr\n            cdkDrag\n            [cdkDragDisabled]=\"!reorderableRows()\"\n            cdkDragLockAxis=\"y\"\n            [class]=\"\n              'tedi-table__row' +\n              (this.selectedRowHighlight() && row.getIsSelected()\n                ? ' tedi-table__row--selected'\n                : '') +\n              (isActiveRow ? ' tedi-table__row--active' : '') +\n              (interactive() || expandsOnClick\n                ? ' tedi-table__row--clickable'\n                : '') +\n              (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n              (groupStartRowIds().has(row.id)\n                ? ' tedi-table__row--group-start'\n                : '') +\n              (pickedUpRow() === row.original\n                ? ' tedi-table__row--picked-up'\n                : '')\n            \"\n            [attr.role]=\"\n              interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n            \"\n            [attr.tabindex]=\"interactive() ? 0 : null\"\n            [attr.aria-label]=\"rowAriaLabelFor(row)\"\n            [attr.aria-rowindex]=\"ariaRowIndex\"\n            [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n            (click)=\"\n              (interactive() || expandsOnClick) && handleRowClick($event, row)\n            \"\n            (keydown)=\"handleRowKeydown($event, row)\"\n            (mouseenter)=\"handleRowMouseEnter(row)\"\n            (mouseleave)=\"handleRowMouseLeave()\"\n          >\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              @let cellMeta = getColumnMeta(cell.column);\n              @let cellContext = cell.getContext();\n              @let resolvedSpan = resolveRowSpan(cell, cellContext);\n              @if (resolvedSpan !== 0) {\n                <td\n                  [class]=\"\n                    'tedi-table__cell' +\n                    (cellMeta?.align\n                      ? ' tedi-table__cell--align-' + cellMeta?.align\n                      : '') +\n                    (cellMeta?.vAlign\n                      ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n                      : '') +\n                    stickyLeftClass(cell.column.id)\n                  \"\n                  [style.left.px]=\"stickyLeft(cell.column.id)\"\n                  [attr.rowspan]=\"\n                    resolvedSpan !== null && resolvedSpan > 1\n                      ? resolvedSpan\n                      : null\n                  \"\n                >\n                  @if (cell.column.id === DRAG_COLUMN_ID) {\n                    <button\n                      type=\"button\"\n                      cdkDragHandle\n                      class=\"tedi-table__drag-handle\"\n                      [class.tedi-table__drag-handle--picked-up]=\"\n                        pickedUpRow() === row.original\n                      \"\n                      [id]=\"rowReorderHandleId(row.id)\"\n                      [attr.aria-label]=\"dragRowLabel()\"\n                      [attr.aria-pressed]=\"\n                        reorderableRows()\n                          ? pickedUpRow() === row.original\n                          : null\n                      \"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown)=\"handleRowReorderKeydown($event, row)\"\n                    >\n                      <tedi-icon\n                        name=\"drag_indicator\"\n                        [size]=\"18\"\n                        color=\"inherit\"\n                      />\n                    </button>\n                  } @else if (cell.column.id === SELECT_COLUMN_ID) {\n                    @if (selectionMode() === \"multiple\") {\n                      <input\n                        tedi-checkbox\n                        type=\"checkbox\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-' + row.id\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"isRowSelected(row)\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        [indeterminate]=\"isRowIndeterminate(row)\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    } @else {\n                      <input\n                        tedi-radio\n                        type=\"radio\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-row'\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"row.getIsSelected()\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    }\n                  } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n                    <span\n                      class=\"tedi-table__expand-toggle\"\n                      [class.tedi-table__expand-toggle--icon-only]=\"\n                        !expandButtonHasLabel()\n                      \"\n                    >\n                      @if (row.getCanExpand()) {\n                        @let expandOpen = row.getIsExpanded();\n                        <button\n                          tedi-collapse-button\n                          [arrowType]=\"resolvedExpandVariant()\"\n                          [hideText]=\"!expandButtonHasLabel()\"\n                          [openText]=\"expandButtonOpenText()\"\n                          [closeText]=\"expandButtonCloseText()\"\n                          [open]=\"expandOpen\"\n                          [id]=\"resolvedId() + '-expand-' + row.id\"\n                          [ariaControls]=\"\n                            renderSubComponent() ? subRowId : undefined\n                          \"\n                          [ariaLabel]=\"\n                            expandButtonHasLabel()\n                              ? undefined\n                              : expandRowLabel(expandOpen)\n                          \"\n                          (openChange)=\"handleExpandToggle(row)\"\n                          (click)=\"$event.stopPropagation()\"\n                          (keydown)=\"handleExpandKeydown($event)\"\n                        ></button>\n                      }\n                    </span>\n                  } @else {\n                    <ng-container\n                      *flexRender=\"\n                        cell.column.columnDef.cell;\n                        props: cellContext;\n                        let content\n                      \"\n                    >\n                      {{ content }}\n                    </ng-container>\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (renderSubComponent(); as subTpl) {\n            @if (row.getCanExpand()) {\n              @let isExpanded = row.getIsExpanded();\n              <tr\n                [class]=\"\n                  'tedi-table__row tedi-table__row--sub-component' +\n                  (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n                \"\n              >\n                <td\n                  class=\"tedi-table__cell tedi-table__cell--sub-component\"\n                  [attr.id]=\"subRowId\"\n                  [attr.role]=\"isExpanded ? 'region' : null\"\n                  [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n                  [attr.inert]=\"isExpanded ? null : ''\"\n                  [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n                >\n                  <div class=\"tedi-table__sub-component-wrapper\">\n                    <div class=\"tedi-table__sub-component-content\">\n                      <div class=\"tedi-table__sub-component-inner\">\n                        <ng-container\n                          *ngTemplateOutlet=\"subTpl; context: { $implicit: row }\"\n                        />\n                      </div>\n                    </div>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        }\n      }\n    </tbody>\n\n    @if (hasFooter()) {\n      <tfoot class=\"tedi-table__foot\">\n        @for (group of footerGroups(); track group.id) {\n          <tr class=\"tedi-table__row\">\n            @for (header of group.headers; track header.id) {\n              @let footerMeta = getColumnMeta(header.column);\n              <td\n                [class]=\"\n                  'tedi-table__cell tedi-table__cell--footer' +\n                  (footerMeta?.align\n                    ? ' tedi-table__cell--align-' + footerMeta?.align\n                    : '') +\n                  (footerMeta?.vAlign\n                    ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n                    : '')\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n              >\n                @if (!header.isPlaceholder) {\n                  <ng-container\n                    *flexRender=\"\n                      header.column.columnDef.footer;\n                      props: header.getContext();\n                      let content\n                    \"\n                  >\n                    {{ content }}\n                  </ng-container>\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"bottom.boundaryCount\"\n      [siblingCount]=\"bottom.siblingCount\"\n      [labels]=\"bottom.labels\"\n      [background]=\"bottom.background\"\n      [dividerPosition]=\"bottom.dividerPosition\"\n      [hideResults]=\"bottom.hideResults\"\n      [hidePageSize]=\"bottom.hidePageSize\"\n      [hidePager]=\"bottom.hidePager\"\n      [hideArrows]=\"bottom.hideArrows\"\n      [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n      [arrowVariant]=\"bottom.arrowVariant\"\n      [showArrowLabels]=\"bottom.showArrowLabels\"\n      [previousIcon]=\"bottom.previousIcon\"\n      [nextIcon]=\"bottom.nextIcon\"\n      [showModalTitle]=\"bottom.showModalTitle\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (bottomResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-center .tedi-table__expand-toggle{justify-content:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: PaginationComponent, selector: "tedi-pagination", inputs: ["pageCount", "page", "totalItems", "pageSize", "pageSizeOptions", "boundaryCount", "siblingCount", "labels", "background", "dividerPosition", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TediPaginationResultsDirective, selector: "[tediPaginationResults]" }, { kind: "component", type: TediTableHeaderButtonComponent, selector: "button[tedi-table-header-button]", inputs: ["icon", "filled", "selected", "disabled", "iconSize", "aria-label"] }, { kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "underline", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TediTableComponent, decorators: [{
             type: Component,
@@ -16140,8 +16290,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                             useFactory: (component) => component.contextValue,
                             deps: [TediTableComponent],
                         },
-                    ], template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n  <div\n    [id]=\"liveRegionId\"\n    aria-live=\"polite\"\n    aria-atomic=\"true\"\n    class=\"tedi-table__sr-only\"\n  ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"top.boundaryCount\"\n      [siblingCount]=\"top.siblingCount\"\n      [labels]=\"top.labels\"\n      [background]=\"top.background\"\n      [dividerPosition]=\"top.dividerPosition\"\n      [hideResults]=\"top.hideResults\"\n      [hidePageSize]=\"top.hidePageSize\"\n      [hidePager]=\"top.hidePager\"\n      [hideArrows]=\"top.hideArrows\"\n      [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n      [arrowVariant]=\"top.arrowVariant\"\n      [showArrowLabels]=\"top.showArrowLabels\"\n      [previousIcon]=\"top.previousIcon\"\n      [nextIcon]=\"top.nextIcon\"\n      [showModalTitle]=\"top.showModalTitle\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (topResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n\n<div\n  #scrollContainer\n  class=\"tedi-table__scroll\"\n  [attr.style]=\"maxHeightStyle()\"\n  cdkScrollable\n>\n  <table\n    class=\"tedi-table__table\"\n    [attr.id]=\"id() || null\"\n    [attr.aria-rowcount]=\"ariaRowCount()\"\n    [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n  >\n    @if (caption(); as cap) {\n      <caption class=\"tedi-table__caption\">\n        @if (isString(cap)) {\n          {{ cap }}\n        } @else {\n          <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n        }\n      </caption>\n    }\n\n    <thead class=\"tedi-table__head\">\n      @for (\n        headerGroup of headerGroups();\n        track headerGroup.id;\n        let rowIndex = $index\n      ) {\n        <tr\n          class=\"tedi-table__row\"\n          [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n          [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          cdkDropListAutoScrollDisabled\n          (cdkDropListDropped)=\"handleColumnDrop($event)\"\n        >\n          @for (header of headerGroup.headers; track header.id) {\n            @if (shouldRenderHeader(header, rowIndex)) {\n              @let meta = getColumnMeta(header.column);\n              @let ariaSort = getHeaderAriaSort(header.column);\n              @let headerLabel = getHeaderLabel(header.column);\n              @let rowSpan = getHeaderRowSpan(header, rowIndex);\n              <th\n                scope=\"col\"\n                cdkDrag\n                [cdkDragDisabled]=\"\n                  !reorderableColumns() ||\n                  rowIndex > 0 ||\n                  header.column.id === SELECT_COLUMN_ID ||\n                  header.column.id === EXPAND_COLUMN_ID\n                \"\n                cdkDragLockAxis=\"x\"\n                (keydown)=\"handleHeaderKeydown($event, header)\"\n                [class]=\"\n                  'tedi-table__header-cell' +\n                  (isHeaderGroup(header)\n                    ? ' tedi-table__header-cell--group'\n                    : '') +\n                  (meta?.align\n                    ? ' tedi-table__cell--align-' + meta?.align\n                    : '') +\n                  (meta?.vAlign\n                    ? ' tedi-table__cell--valign-' + meta?.vAlign\n                    : '') +\n                  (pickedUpColumnId() === header.column.id\n                    ? ' tedi-table__header-cell--picked-up'\n                    : '') +\n                  stickyLeftClass(header.column.id)\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n                [attr.rowspan]=\"rowSpan\"\n                [attr.aria-sort]=\"ariaSort\"\n                [attr.aria-label]=\"headerLabel\"\n                [style.width.px]=\"headerCellWidth(header.column)\"\n                [style.min-width.px]=\"columnMinWidth(header.column)\"\n                [style.max-width.px]=\"columnMaxWidth(header.column)\"\n                [style.left.px]=\"stickyLeft(header.column.id)\"\n              >\n                @if (header.column.id === SELECT_COLUMN_ID) {\n                  @if (selectionMode() === \"multiple\") {\n                    <input\n                      tedi-checkbox\n                      type=\"checkbox\"\n                      [id]=\"resolvedId() + '-select-all'\"\n                      [name]=\"resolvedId() + '-select-all'\"\n                      [attr.aria-label]=\"selectAllLabel()\"\n                      [checked]=\"isAllPageRowsSelected()\"\n                      [indeterminate]=\"\n                        isSomePageRowsSelected() && !isAllPageRowsSelected()\n                      \"\n                      (change)=\"handleSelectAll($any($event.target).checked)\"\n                    />\n                  }\n                } @else if (header.column.id === EXPAND_COLUMN_ID) {\n                  <!-- empty -->\n                } @else if (header.column.id === DRAG_COLUMN_ID) {\n                  <!-- empty -->\n                } @else {\n                  <span class=\"tedi-table__header-content\">\n                    @if (\n                      reorderableColumns() &&\n                      rowIndex === 0 &&\n                      !isHeaderGroup(header)\n                    ) {\n                      <button\n                        type=\"button\"\n                        cdkDragHandle\n                        class=\"tedi-table__drag-handle\"\n                        [class.tedi-table__drag-handle--picked-up]=\"\n                          pickedUpColumnId() === header.column.id\n                        \"\n                        [id]=\"reorderHandleId(header.column.id)\"\n                        [attr.aria-label]=\"dragColumnLabel()\"\n                        [attr.aria-pressed]=\"\n                          reorderableColumns()\n                            ? pickedUpColumnId() === header.column.id\n                            : null\n                        \"\n                      >\n                        <tedi-icon\n                          name=\"drag_indicator\"\n                          [size]=\"18\"\n                          color=\"inherit\"\n                        />\n                      </button>\n                    }\n                    <ng-container\n                      *flexRender=\"\n                        header.column.columnDef.header;\n                        props: header.getContext();\n                        let content\n                      \"\n                    >\n                      @if (shouldRenderSortableHeader(header.column, content)) {\n                        <button\n                          tedi-table-header-button\n                          [icon]=\"sortIcon(header.column)\"\n                          [selected]=\"!!header.column.getIsSorted()\"\n                          (click)=\"handleSortToggle(header.column)\"\n                        >\n                          {{ content }}\n                        </button>\n                      } @else if (isString(content) || isNumber(content)) {\n                        {{ content }}\n                      } @else {\n                        {{ content }}\n                      }\n                    </ng-container>\n                    @if (shouldRenderFilterButton(header.column)) {\n                      <tedi-popover\n                        #filterPopover\n                        class=\"tedi-table__filter-popover\"\n                        position=\"bottom-end\"\n                        [preventOverflow]=\"true\"\n                      >\n                        <button\n                          tedi-popover-trigger\n                          tedi-table-header-button\n                          icon=\"filter_alt\"\n                          [selected]=\"filterIsActive(header.column)\"\n                          [filled]=\"filterIsActive(header.column)\"\n                          [aria-label]=\"filterAriaLabel(header.column)\"\n                          (click)=\"handleFilterTriggerClick(header.column)\"\n                        ></button>\n                        <tedi-popover-content>\n                          <div class=\"tedi-table__filter\">\n                            <div class=\"tedi-table__filter-body\">\n                              @if (filterTemplateFor(header.column); as tpl) {\n                                <ng-container\n                                  *ngTemplateOutlet=\"\n                                    tpl;\n                                    context: filterContextFor(\n                                      header.column,\n                                      filterPopover\n                                    )\n                                  \"\n                                />\n                              }\n                            </div>\n                            <div class=\"tedi-table__filter-actions\">\n                              <button\n                                tedi-button\n                                variant=\"secondary\"\n                                size=\"small\"\n                                type=\"button\"\n                                (click)=\"\n                                  handleFilterClear(\n                                    header.column,\n                                    filterPopover\n                                  )\n                                \"\n                              >\n                                {{ filterClearLabel() }}\n                              </button>\n                              <button\n                                tedi-button\n                                variant=\"primary\"\n                                size=\"small\"\n                                type=\"button\"\n                                (click)=\"\n                                  handleFilterApply(\n                                    header.column,\n                                    filterPopover\n                                  )\n                                \"\n                              >\n                                {{ filterApplyLabel() }}\n                              </button>\n                            </div>\n                          </div>\n                        </tedi-popover-content>\n                      </tedi-popover>\n                    }\n                  </span>\n                }\n              </th>\n            }\n          }\n        </tr>\n      }\n      @if (enableColumnFilters()) {\n        <tr\n          class=\"tedi-table__row tedi-table__row--filter\"\n          [attr.aria-rowindex]=\"\n            ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n          \"\n        >\n          @for (column of leafColumns(); track column.id) {\n            @let filterId = resolvedId() + \"-filter-\" + column.id;\n            <th class=\"tedi-table__header-cell\" scope=\"col\">\n              @if (column.getCanFilter()) {\n                <tedi-form-field size=\"small\">\n                  <input\n                    tedi-text-field\n                    type=\"text\"\n                    [id]=\"filterId\"\n                    [name]=\"filterId\"\n                    [attr.aria-label]=\"filterLabel(column)\"\n                    [placeholder]=\"filterPlaceholder()\"\n                    [value]=\"getFilterValue(column)\"\n                    (input)=\"\n                      handleColumnFilter(column, $any($event.target).value)\n                    \"\n                  />\n                </tedi-form-field>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody\n      class=\"tedi-table__body\"\n      cdkDropList\n      [cdkDropListDisabled]=\"!reorderableRows()\"\n      (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n    >\n      @if (rows().length === 0) {\n        <tr class=\"tedi-table__row\">\n          <td\n            class=\"tedi-table__cell tedi-table__cell--placeholder\"\n            [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n          >\n            @if (placeholder(); as pl) {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  @if (isString(pl)) {\n                    {{ pl }}\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                  }\n                </div>\n              } @else {\n                @if (isString(pl)) {\n                  {{ pl }}\n                } @else {\n                  <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                }\n              }\n            } @else {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  {{ placeholderLabel() }}\n                </div>\n              } @else {\n                {{ placeholderLabel() }}\n              }\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of rows(); track row.id) {\n          @let isActiveRow =\n            activeRowId() !== undefined && row.id === activeRowId();\n          @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n          @let subRowId = resolvedId() + \"-sub-\" + row.id;\n          @let expandsOnClick = rowExpandsOnClick(row);\n          <tr\n            cdkDrag\n            [cdkDragDisabled]=\"!reorderableRows()\"\n            cdkDragLockAxis=\"y\"\n            [class]=\"\n              'tedi-table__row' +\n              (this.selectedRowHighlight() && row.getIsSelected()\n                ? ' tedi-table__row--selected'\n                : '') +\n              (isActiveRow ? ' tedi-table__row--active' : '') +\n              (interactive() || expandsOnClick\n                ? ' tedi-table__row--clickable'\n                : '') +\n              (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n              (groupStartRowIds().has(row.id)\n                ? ' tedi-table__row--group-start'\n                : '') +\n              (pickedUpRow() === row.original\n                ? ' tedi-table__row--picked-up'\n                : '')\n            \"\n            [attr.role]=\"interactive() ? 'button' : null\"\n            [attr.tabindex]=\"interactive() ? 0 : null\"\n            [attr.aria-label]=\"rowAriaLabelFor(row)\"\n            [attr.aria-rowindex]=\"ariaRowIndex\"\n            [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n            (click)=\"\n              (interactive() || expandsOnClick) && handleRowClick($event, row)\n            \"\n            (keydown)=\"handleRowKeydown($event, row)\"\n            (mouseenter)=\"handleRowMouseEnter(row)\"\n            (mouseleave)=\"handleRowMouseLeave()\"\n          >\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              @let cellMeta = getColumnMeta(cell.column);\n              @let cellContext = cell.getContext();\n              @let resolvedSpan = resolveRowSpan(cell, cellContext);\n              @if (resolvedSpan !== 0) {\n                <td\n                  [class]=\"\n                    'tedi-table__cell' +\n                    (cellMeta?.align\n                      ? ' tedi-table__cell--align-' + cellMeta?.align\n                      : '') +\n                    (cellMeta?.vAlign\n                      ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n                      : '') +\n                    stickyLeftClass(cell.column.id)\n                  \"\n                  [style.left.px]=\"stickyLeft(cell.column.id)\"\n                  [attr.rowspan]=\"\n                    resolvedSpan !== null && resolvedSpan > 1\n                      ? resolvedSpan\n                      : null\n                  \"\n                >\n                  @if (cell.column.id === DRAG_COLUMN_ID) {\n                    <button\n                      type=\"button\"\n                      cdkDragHandle\n                      class=\"tedi-table__drag-handle\"\n                      [class.tedi-table__drag-handle--picked-up]=\"\n                        pickedUpRow() === row.original\n                      \"\n                      [id]=\"rowReorderHandleId(row.id)\"\n                      [attr.aria-label]=\"dragRowLabel()\"\n                      [attr.aria-pressed]=\"\n                        reorderableRows()\n                          ? pickedUpRow() === row.original\n                          : null\n                      \"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown)=\"handleRowReorderKeydown($event, row)\"\n                    >\n                      <tedi-icon\n                        name=\"drag_indicator\"\n                        [size]=\"18\"\n                        color=\"inherit\"\n                      />\n                    </button>\n                  } @else if (cell.column.id === SELECT_COLUMN_ID) {\n                    @if (selectionMode() === \"multiple\") {\n                      <input\n                        tedi-checkbox\n                        type=\"checkbox\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-' + row.id\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"isRowSelected(row)\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        [indeterminate]=\"isRowIndeterminate(row)\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    } @else {\n                      <input\n                        tedi-radio\n                        type=\"radio\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-row'\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"row.getIsSelected()\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    }\n                  } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n                    <span\n                      class=\"tedi-table__expand-toggle\"\n                      [class.tedi-table__expand-toggle--icon-only]=\"\n                        !expandButtonHasLabel()\n                      \"\n                    >\n                      @if (row.getCanExpand()) {\n                        @let expandOpen = row.getIsExpanded();\n                        <button\n                          tedi-collapse-button\n                          [arrowType]=\"resolvedExpandVariant()\"\n                          [hideText]=\"!expandButtonHasLabel()\"\n                          [openText]=\"expandButtonOpenText()\"\n                          [closeText]=\"expandButtonCloseText()\"\n                          [open]=\"expandOpen\"\n                          [id]=\"resolvedId() + '-expand-' + row.id\"\n                          [ariaControls]=\"subRowId\"\n                          [ariaLabel]=\"\n                            expandButtonHasLabel()\n                              ? undefined\n                              : expandRowLabel(expandOpen)\n                          \"\n                          (openChange)=\"handleExpandToggle(row)\"\n                          (click)=\"$event.stopPropagation()\"\n                          (keydown)=\"handleExpandKeydown($event)\"\n                        ></button>\n                      }\n                    </span>\n                  } @else {\n                    <ng-container\n                      *flexRender=\"\n                        cell.column.columnDef.cell;\n                        props: cellContext;\n                        let content\n                      \"\n                    >\n                      {{ content }}\n                    </ng-container>\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (renderSubComponent(); as subTpl) {\n            @if (row.getCanExpand()) {\n              @let isExpanded = row.getIsExpanded();\n              <tr\n                [class]=\"\n                  'tedi-table__row tedi-table__row--sub-component' +\n                  (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n                \"\n              >\n                <td\n                  class=\"tedi-table__cell tedi-table__cell--sub-component\"\n                  [attr.id]=\"subRowId\"\n                  [attr.role]=\"isExpanded ? 'region' : null\"\n                  [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n                  [attr.inert]=\"isExpanded ? null : ''\"\n                  [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n                >\n                  <div class=\"tedi-table__sub-component-wrapper\">\n                    <div class=\"tedi-table__sub-component-content\">\n                      <div class=\"tedi-table__sub-component-inner\">\n                        <ng-container\n                          *ngTemplateOutlet=\"subTpl; context: { $implicit: row }\"\n                        />\n                      </div>\n                    </div>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        }\n      }\n    </tbody>\n\n    @if (hasFooter()) {\n      <tfoot class=\"tedi-table__foot\">\n        @for (group of footerGroups(); track group.id) {\n          <tr class=\"tedi-table__row\">\n            @for (header of group.headers; track header.id) {\n              @let footerMeta = getColumnMeta(header.column);\n              <td\n                [class]=\"\n                  'tedi-table__cell tedi-table__cell--footer' +\n                  (footerMeta?.align\n                    ? ' tedi-table__cell--align-' + footerMeta?.align\n                    : '') +\n                  (footerMeta?.vAlign\n                    ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n                    : '')\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n              >\n                @if (!header.isPlaceholder) {\n                  <ng-container\n                    *flexRender=\"\n                      header.column.columnDef.footer;\n                      props: header.getContext();\n                      let content\n                    \"\n                  >\n                    {{ content }}\n                  </ng-container>\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"bottom.boundaryCount\"\n      [siblingCount]=\"bottom.siblingCount\"\n      [labels]=\"bottom.labels\"\n      [background]=\"bottom.background\"\n      [dividerPosition]=\"bottom.dividerPosition\"\n      [hideResults]=\"bottom.hideResults\"\n      [hidePageSize]=\"bottom.hidePageSize\"\n      [hidePager]=\"bottom.hidePager\"\n      [hideArrows]=\"bottom.hideArrows\"\n      [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n      [arrowVariant]=\"bottom.arrowVariant\"\n      [showArrowLabels]=\"bottom.showArrowLabels\"\n      [previousIcon]=\"bottom.previousIcon\"\n      [nextIcon]=\"bottom.nextIcon\"\n      [showModalTitle]=\"bottom.showModalTitle\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (bottomResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-center .tedi-table__expand-toggle{justify-content:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], verticalBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalBorders", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], stickyFirstColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyFirstColumn", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], fixedLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedLayout", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], activeRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRowId", required: false }] }], selectedRowHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRowHighlight", required: false }] }], rowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHover", required: false }] }], enableRowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableRowSelection", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], enableColumnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnFilters", required: false }] }], renderSubComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderSubComponent", required: false }] }], getRowCanExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowCanExpand", required: false }] }], expandTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandTrigger", required: false }] }], expandButtonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandButtonVariant", required: false }] }], expandButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandButtonLabel", required: false }] }], getSubRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "getSubRows", required: false }] }], groupRowsBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupRowsBy", required: false }] }], rowGroupDividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowGroupDividers", required: false }] }], controlColumnOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlColumnOrder", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], paginationTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationTop", required: false }] }], manualPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualPagination", required: false }] }], manualSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualSorting", required: false }] }], manualFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualFiltering", required: false }] }], pageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageCount", required: false }] }], rowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowCount", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], defaultState: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultState", required: false }] }], persist: [{ type: i0.Input, args: [{ isSignal: true, alias: "persist", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placeholderRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderRole", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], rowAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowAriaLabel", required: false }] }], reorderableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableRows", required: false }] }], reorderableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableColumns", required: false }] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDrop: [{ type: i0.Output, args: ["rowDrop"] }], customResultsTemplateRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TediPaginationResultsDirective), { ...{ read: TemplateRef }, isSignal: true }] }], scrollContainer: [{ type: i0.ViewChild, args: ["scrollContainer", { isSignal: true }] }] } });
+                    ], template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n  <div\n    [id]=\"liveRegionId\"\n    aria-live=\"polite\"\n    aria-atomic=\"true\"\n    class=\"tedi-table__sr-only\"\n  ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"top.boundaryCount\"\n      [siblingCount]=\"top.siblingCount\"\n      [labels]=\"top.labels\"\n      [background]=\"top.background\"\n      [dividerPosition]=\"top.dividerPosition\"\n      [hideResults]=\"top.hideResults\"\n      [hidePageSize]=\"top.hidePageSize\"\n      [hidePager]=\"top.hidePager\"\n      [hideArrows]=\"top.hideArrows\"\n      [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n      [arrowVariant]=\"top.arrowVariant\"\n      [showArrowLabels]=\"top.showArrowLabels\"\n      [previousIcon]=\"top.previousIcon\"\n      [nextIcon]=\"top.nextIcon\"\n      [showModalTitle]=\"top.showModalTitle\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (topResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n\n<div\n  #scrollContainer\n  class=\"tedi-table__scroll\"\n  [attr.style]=\"maxHeightStyle()\"\n  cdkScrollable\n  tabindex=\"0\"\n  role=\"group\"\n  [attr.aria-label]=\"scrollRegionLabel()\"\n>\n  <table\n    class=\"tedi-table__table\"\n    [attr.id]=\"id() || null\"\n    [attr.aria-rowcount]=\"ariaRowCount()\"\n    [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n  >\n    @if (caption(); as cap) {\n      <caption class=\"tedi-table__caption\">\n        @if (isString(cap)) {\n          {{ cap }}\n        } @else {\n          <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n        }\n      </caption>\n    }\n\n    <thead class=\"tedi-table__head\">\n      @for (\n        headerGroup of headerGroups();\n        track headerGroup.id;\n        let rowIndex = $index\n      ) {\n        <tr\n          class=\"tedi-table__row\"\n          [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n          [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          cdkDropListAutoScrollDisabled\n          (cdkDropListDropped)=\"handleColumnDrop($event)\"\n        >\n          @for (header of headerGroup.headers; track header.id) {\n            @if (shouldRenderHeader(header, rowIndex)) {\n              @let meta = getColumnMeta(header.column);\n              @let ariaSort = getHeaderAriaSort(header.column);\n              @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n              @let rowSpan = getHeaderRowSpan(header, rowIndex);\n              <th\n                scope=\"col\"\n                cdkDrag\n                [cdkDragDisabled]=\"\n                  !reorderableColumns() ||\n                  rowIndex > 0 ||\n                  header.column.id === SELECT_COLUMN_ID ||\n                  header.column.id === EXPAND_COLUMN_ID\n                \"\n                cdkDragLockAxis=\"x\"\n                (keydown)=\"handleHeaderKeydown($event, header)\"\n                [class]=\"\n                  'tedi-table__header-cell' +\n                  (isHeaderGroup(header)\n                    ? ' tedi-table__header-cell--group'\n                    : '') +\n                  (meta?.align\n                    ? ' tedi-table__cell--align-' + meta?.align\n                    : '') +\n                  (meta?.vAlign\n                    ? ' tedi-table__cell--valign-' + meta?.vAlign\n                    : '') +\n                  (pickedUpColumnId() === header.column.id\n                    ? ' tedi-table__header-cell--picked-up'\n                    : '') +\n                  stickyLeftClass(header.column.id)\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n                [attr.rowspan]=\"rowSpan\"\n                [attr.aria-sort]=\"ariaSort\"\n                [style.width.px]=\"headerCellWidth(header.column)\"\n                [style.min-width.px]=\"columnMinWidth(header.column)\"\n                [style.max-width.px]=\"columnMaxWidth(header.column)\"\n                [style.left.px]=\"stickyLeft(header.column.id)\"\n              >\n                @if (srHeaderLabel) {\n                  <span class=\"tedi-table__sr-only\">{{ srHeaderLabel }}</span>\n                }\n                @if (header.column.id === SELECT_COLUMN_ID) {\n                  @if (selectionMode() === \"multiple\") {\n                    <input\n                      tedi-checkbox\n                      type=\"checkbox\"\n                      [id]=\"resolvedId() + '-select-all'\"\n                      [name]=\"resolvedId() + '-select-all'\"\n                      [attr.aria-label]=\"selectAllLabel()\"\n                      [checked]=\"isAllPageRowsSelected()\"\n                      [indeterminate]=\"\n                        isSomePageRowsSelected() && !isAllPageRowsSelected()\n                      \"\n                      (change)=\"handleSelectAll($any($event.target).checked)\"\n                    />\n                  }\n                } @else if (header.column.id === EXPAND_COLUMN_ID) {\n                  <!-- empty -->\n                } @else if (header.column.id === DRAG_COLUMN_ID) {\n                  <!-- empty -->\n                } @else {\n                  <span class=\"tedi-table__header-content\">\n                    @if (\n                      reorderableColumns() &&\n                      rowIndex === 0 &&\n                      !isHeaderGroup(header)\n                    ) {\n                      <button\n                        type=\"button\"\n                        cdkDragHandle\n                        class=\"tedi-table__drag-handle\"\n                        [class.tedi-table__drag-handle--picked-up]=\"\n                          pickedUpColumnId() === header.column.id\n                        \"\n                        [id]=\"reorderHandleId(header.column.id)\"\n                        [attr.aria-label]=\"dragColumnLabel()\"\n                        [attr.aria-pressed]=\"\n                          reorderableColumns()\n                            ? pickedUpColumnId() === header.column.id\n                            : null\n                        \"\n                      >\n                        <tedi-icon\n                          name=\"drag_indicator\"\n                          [size]=\"18\"\n                          color=\"inherit\"\n                        />\n                      </button>\n                    }\n                    <ng-container\n                      *flexRender=\"\n                        header.column.columnDef.header;\n                        props: header.getContext();\n                        let content\n                      \"\n                    >\n                      @if (shouldRenderSortableHeader(header.column, content)) {\n                        <button\n                          tedi-table-header-button\n                          [icon]=\"sortIcon(header.column)\"\n                          [selected]=\"!!header.column.getIsSorted()\"\n                          (click)=\"handleSortToggle(header.column)\"\n                        >\n                          {{ content }}\n                        </button>\n                      } @else if (isString(content) || isNumber(content)) {\n                        {{ content }}\n                      } @else {\n                        {{ content }}\n                      }\n                    </ng-container>\n                    @if (shouldRenderFilterButton(header.column)) {\n                      <tedi-popover\n                        #filterPopover\n                        class=\"tedi-table__filter-popover\"\n                        position=\"bottom-end\"\n                        [preventOverflow]=\"true\"\n                      >\n                        <button\n                          tedi-popover-trigger\n                          tedi-table-header-button\n                          icon=\"filter_alt\"\n                          [selected]=\"filterIsActive(header.column)\"\n                          [filled]=\"filterIsActive(header.column)\"\n                          [aria-label]=\"filterAriaLabel(header.column)\"\n                          (click)=\"handleFilterTriggerClick(header.column)\"\n                        ></button>\n                        <tedi-popover-content>\n                          <div class=\"tedi-table__filter\">\n                            <div class=\"tedi-table__filter-body\">\n                              @if (filterTemplateFor(header.column); as tpl) {\n                                <ng-container\n                                  *ngTemplateOutlet=\"\n                                    tpl;\n                                    context: filterContextFor(\n                                      header.column,\n                                      filterPopover\n                                    )\n                                  \"\n                                />\n                              }\n                            </div>\n                            <div class=\"tedi-table__filter-actions\">\n                              <button\n                                tedi-button\n                                variant=\"secondary\"\n                                size=\"small\"\n                                type=\"button\"\n                                (click)=\"\n                                  handleFilterClear(\n                                    header.column,\n                                    filterPopover\n                                  )\n                                \"\n                              >\n                                {{ filterClearLabel() }}\n                              </button>\n                              <button\n                                tedi-button\n                                variant=\"primary\"\n                                size=\"small\"\n                                type=\"button\"\n                                (click)=\"\n                                  handleFilterApply(\n                                    header.column,\n                                    filterPopover\n                                  )\n                                \"\n                              >\n                                {{ filterApplyLabel() }}\n                              </button>\n                            </div>\n                          </div>\n                        </tedi-popover-content>\n                      </tedi-popover>\n                    }\n                  </span>\n                }\n              </th>\n            }\n          }\n        </tr>\n      }\n      @if (enableColumnFilters()) {\n        <tr\n          class=\"tedi-table__row tedi-table__row--filter\"\n          [attr.aria-rowindex]=\"\n            ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n          \"\n        >\n          @for (column of leafColumns(); track column.id) {\n            @let filterId = resolvedId() + \"-filter-\" + column.id;\n            <th class=\"tedi-table__header-cell\" scope=\"col\">\n              @if (column.getCanFilter()) {\n                <tedi-form-field size=\"small\">\n                  <input\n                    tedi-text-field\n                    type=\"text\"\n                    [id]=\"filterId\"\n                    [name]=\"filterId\"\n                    [attr.aria-label]=\"filterLabel(column)\"\n                    [placeholder]=\"filterPlaceholder()\"\n                    [value]=\"getFilterValue(column)\"\n                    (input)=\"\n                      handleColumnFilter(column, $any($event.target).value)\n                    \"\n                  />\n                </tedi-form-field>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody\n      class=\"tedi-table__body\"\n      cdkDropList\n      [cdkDropListDisabled]=\"!reorderableRows()\"\n      (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n    >\n      @if (rows().length === 0) {\n        <tr class=\"tedi-table__row\">\n          <td\n            class=\"tedi-table__cell tedi-table__cell--placeholder\"\n            [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n          >\n            @if (placeholder(); as pl) {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  @if (isString(pl)) {\n                    {{ pl }}\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                  }\n                </div>\n              } @else {\n                @if (isString(pl)) {\n                  {{ pl }}\n                } @else {\n                  <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                }\n              }\n            } @else {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  {{ placeholderLabel() }}\n                </div>\n              } @else {\n                {{ placeholderLabel() }}\n              }\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of rows(); track row.id) {\n          @let isActiveRow =\n            activeRowId() !== undefined && row.id === activeRowId();\n          @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n          @let subRowId = resolvedId() + \"-sub-\" + row.id;\n          @let expandsOnClick = rowExpandsOnClick(row);\n          <tr\n            cdkDrag\n            [cdkDragDisabled]=\"!reorderableRows()\"\n            cdkDragLockAxis=\"y\"\n            [class]=\"\n              'tedi-table__row' +\n              (this.selectedRowHighlight() && row.getIsSelected()\n                ? ' tedi-table__row--selected'\n                : '') +\n              (isActiveRow ? ' tedi-table__row--active' : '') +\n              (interactive() || expandsOnClick\n                ? ' tedi-table__row--clickable'\n                : '') +\n              (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n              (groupStartRowIds().has(row.id)\n                ? ' tedi-table__row--group-start'\n                : '') +\n              (pickedUpRow() === row.original\n                ? ' tedi-table__row--picked-up'\n                : '')\n            \"\n            [attr.role]=\"\n              interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n            \"\n            [attr.tabindex]=\"interactive() ? 0 : null\"\n            [attr.aria-label]=\"rowAriaLabelFor(row)\"\n            [attr.aria-rowindex]=\"ariaRowIndex\"\n            [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n            (click)=\"\n              (interactive() || expandsOnClick) && handleRowClick($event, row)\n            \"\n            (keydown)=\"handleRowKeydown($event, row)\"\n            (mouseenter)=\"handleRowMouseEnter(row)\"\n            (mouseleave)=\"handleRowMouseLeave()\"\n          >\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              @let cellMeta = getColumnMeta(cell.column);\n              @let cellContext = cell.getContext();\n              @let resolvedSpan = resolveRowSpan(cell, cellContext);\n              @if (resolvedSpan !== 0) {\n                <td\n                  [class]=\"\n                    'tedi-table__cell' +\n                    (cellMeta?.align\n                      ? ' tedi-table__cell--align-' + cellMeta?.align\n                      : '') +\n                    (cellMeta?.vAlign\n                      ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n                      : '') +\n                    stickyLeftClass(cell.column.id)\n                  \"\n                  [style.left.px]=\"stickyLeft(cell.column.id)\"\n                  [attr.rowspan]=\"\n                    resolvedSpan !== null && resolvedSpan > 1\n                      ? resolvedSpan\n                      : null\n                  \"\n                >\n                  @if (cell.column.id === DRAG_COLUMN_ID) {\n                    <button\n                      type=\"button\"\n                      cdkDragHandle\n                      class=\"tedi-table__drag-handle\"\n                      [class.tedi-table__drag-handle--picked-up]=\"\n                        pickedUpRow() === row.original\n                      \"\n                      [id]=\"rowReorderHandleId(row.id)\"\n                      [attr.aria-label]=\"dragRowLabel()\"\n                      [attr.aria-pressed]=\"\n                        reorderableRows()\n                          ? pickedUpRow() === row.original\n                          : null\n                      \"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown)=\"handleRowReorderKeydown($event, row)\"\n                    >\n                      <tedi-icon\n                        name=\"drag_indicator\"\n                        [size]=\"18\"\n                        color=\"inherit\"\n                      />\n                    </button>\n                  } @else if (cell.column.id === SELECT_COLUMN_ID) {\n                    @if (selectionMode() === \"multiple\") {\n                      <input\n                        tedi-checkbox\n                        type=\"checkbox\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-' + row.id\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"isRowSelected(row)\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        [indeterminate]=\"isRowIndeterminate(row)\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    } @else {\n                      <input\n                        tedi-radio\n                        type=\"radio\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-row'\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"row.getIsSelected()\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    }\n                  } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n                    <span\n                      class=\"tedi-table__expand-toggle\"\n                      [class.tedi-table__expand-toggle--icon-only]=\"\n                        !expandButtonHasLabel()\n                      \"\n                    >\n                      @if (row.getCanExpand()) {\n                        @let expandOpen = row.getIsExpanded();\n                        <button\n                          tedi-collapse-button\n                          [arrowType]=\"resolvedExpandVariant()\"\n                          [hideText]=\"!expandButtonHasLabel()\"\n                          [openText]=\"expandButtonOpenText()\"\n                          [closeText]=\"expandButtonCloseText()\"\n                          [open]=\"expandOpen\"\n                          [id]=\"resolvedId() + '-expand-' + row.id\"\n                          [ariaControls]=\"\n                            renderSubComponent() ? subRowId : undefined\n                          \"\n                          [ariaLabel]=\"\n                            expandButtonHasLabel()\n                              ? undefined\n                              : expandRowLabel(expandOpen)\n                          \"\n                          (openChange)=\"handleExpandToggle(row)\"\n                          (click)=\"$event.stopPropagation()\"\n                          (keydown)=\"handleExpandKeydown($event)\"\n                        ></button>\n                      }\n                    </span>\n                  } @else {\n                    <ng-container\n                      *flexRender=\"\n                        cell.column.columnDef.cell;\n                        props: cellContext;\n                        let content\n                      \"\n                    >\n                      {{ content }}\n                    </ng-container>\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (renderSubComponent(); as subTpl) {\n            @if (row.getCanExpand()) {\n              @let isExpanded = row.getIsExpanded();\n              <tr\n                [class]=\"\n                  'tedi-table__row tedi-table__row--sub-component' +\n                  (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n                \"\n              >\n                <td\n                  class=\"tedi-table__cell tedi-table__cell--sub-component\"\n                  [attr.id]=\"subRowId\"\n                  [attr.role]=\"isExpanded ? 'region' : null\"\n                  [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n                  [attr.inert]=\"isExpanded ? null : ''\"\n                  [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n                >\n                  <div class=\"tedi-table__sub-component-wrapper\">\n                    <div class=\"tedi-table__sub-component-content\">\n                      <div class=\"tedi-table__sub-component-inner\">\n                        <ng-container\n                          *ngTemplateOutlet=\"subTpl; context: { $implicit: row }\"\n                        />\n                      </div>\n                    </div>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        }\n      }\n    </tbody>\n\n    @if (hasFooter()) {\n      <tfoot class=\"tedi-table__foot\">\n        @for (group of footerGroups(); track group.id) {\n          <tr class=\"tedi-table__row\">\n            @for (header of group.headers; track header.id) {\n              @let footerMeta = getColumnMeta(header.column);\n              <td\n                [class]=\"\n                  'tedi-table__cell tedi-table__cell--footer' +\n                  (footerMeta?.align\n                    ? ' tedi-table__cell--align-' + footerMeta?.align\n                    : '') +\n                  (footerMeta?.vAlign\n                    ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n                    : '')\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n              >\n                @if (!header.isPlaceholder) {\n                  <ng-container\n                    *flexRender=\"\n                      header.column.columnDef.footer;\n                      props: header.getContext();\n                      let content\n                    \"\n                  >\n                    {{ content }}\n                  </ng-container>\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"bottom.boundaryCount\"\n      [siblingCount]=\"bottom.siblingCount\"\n      [labels]=\"bottom.labels\"\n      [background]=\"bottom.background\"\n      [dividerPosition]=\"bottom.dividerPosition\"\n      [hideResults]=\"bottom.hideResults\"\n      [hidePageSize]=\"bottom.hidePageSize\"\n      [hidePager]=\"bottom.hidePager\"\n      [hideArrows]=\"bottom.hideArrows\"\n      [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n      [arrowVariant]=\"bottom.arrowVariant\"\n      [showArrowLabels]=\"bottom.showArrowLabels\"\n      [previousIcon]=\"bottom.previousIcon\"\n      [nextIcon]=\"bottom.nextIcon\"\n      [showModalTitle]=\"bottom.showModalTitle\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (bottomResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-center .tedi-table__expand-toggle{justify-content:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], verticalBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalBorders", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], stickyFirstColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyFirstColumn", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], fixedLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedLayout", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], activeRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRowId", required: false }] }], selectedRowHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRowHighlight", required: false }] }], rowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHover", required: false }] }], enableRowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableRowSelection", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], enableColumnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnFilters", required: false }] }], renderSubComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderSubComponent", required: false }] }], getRowCanExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowCanExpand", required: false }] }], expandTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandTrigger", required: false }] }], expandButtonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandButtonVariant", required: false }] }], expandButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandButtonLabel", required: false }] }], getSubRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "getSubRows", required: false }] }], getRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowId", required: false }] }], groupRowsBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupRowsBy", required: false }] }], rowGroupDividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowGroupDividers", required: false }] }], controlColumnOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlColumnOrder", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], paginationTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationTop", required: false }] }], manualPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualPagination", required: false }] }], manualSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualSorting", required: false }] }], manualFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualFiltering", required: false }] }], pageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageCount", required: false }] }], rowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowCount", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], defaultState: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultState", required: false }] }], persist: [{ type: i0.Input, args: [{ isSignal: true, alias: "persist", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placeholderRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderRole", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], rowAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowAriaLabel", required: false }] }], reorderableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableRows", required: false }] }], reorderableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableColumns", required: false }] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDrop: [{ type: i0.Output, args: ["rowDrop"] }], customResultsTemplateRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TediPaginationResultsDirective), { ...{ read: TemplateRef }, isSignal: true }] }], scrollContainer: [{ type: i0.ViewChild, args: ["scrollContainer", { isSignal: true }] }] } });
 
 class TediTableToolbarComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TediTableToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -17261,12 +17411,16 @@ class ScrollFadeComponent {
     fadePosition = input("both", ...(ngDevMode ? [{ debugName: "fadePosition" }] : []));
     /** Scrollbar style. */
     scrollBar = input("custom", ...(ngDevMode ? [{ debugName: "scrollBar" }] : []));
+    /** Accessible label for the scrollable region. Falls back to a translated default. */
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
     /** Emitted when scrolled to the top. */
     scrolledToTop = output();
     /** Emitted when scrolled to the bottom. */
     scrolledToBottom = output();
+    translationService = inject(TediTranslationService);
     innerRef = viewChild.required("inner");
     resizeObserver = null;
+    _defaultLabel = this.translationService.track("scroll-fade.label");
     fade = signal({ top: false, bottom: false }, ...(ngDevMode ? [{ debugName: "fade" }] : []));
     classes = computed(() => {
         const classList = ["tedi-scroll-fade"];
@@ -17317,14 +17471,14 @@ class ScrollFadeComponent {
         this.fade.set({ top: !atTop, bottom: !atBottom });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ScrollFadeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: ScrollFadeComponent, isStandalone: true, selector: "tedi-scroll-fade", inputs: { fadeSize: { classPropertyName: "fadeSize", publicName: "fadeSize", isSignal: true, isRequired: false, transformFunction: null }, fadePosition: { classPropertyName: "fadePosition", publicName: "fadePosition", isSignal: true, isRequired: false, transformFunction: null }, scrollBar: { classPropertyName: "scrollBar", publicName: "scrollBar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrolledToTop: "scrolledToTop", scrolledToBottom: "scrolledToBottom" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "innerRef", first: true, predicate: ["inner"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #inner cdkScrollable [class]=\"innerClasses()\" (scroll)=\"onScroll()\">\n  <ng-content />\n</div>\n", styles: [".tedi-scroll-fade{--_tedi-scroll-fade-top: 0%;--_tedi-scroll-fade-bottom: 0%;position:relative;display:flex;flex-direction:column;max-height:inherit;overflow:hidden}.tedi-scroll-fade__inner{flex:1;min-height:0;max-height:inherit;overflow:auto;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black var(--_tedi-scroll-fade-top),black calc(100% - var(--_tedi-scroll-fade-bottom)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black var(--_tedi-scroll-fade-top),black calc(100% - var(--_tedi-scroll-fade-bottom)),transparent 100%)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar{width:6px;background-color:var(--general-surface-primary)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-thumb{background:var(--general-border-primary);border-radius:100px}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--general-border-secondary)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-track{background-color:var(--general-surface-primary)}.tedi-scroll-fade--top-0{--_tedi-scroll-fade-top: 0% }.tedi-scroll-fade--bottom-0{--_tedi-scroll-fade-bottom: 0% }.tedi-scroll-fade--top-10{--_tedi-scroll-fade-top: 10% }.tedi-scroll-fade--bottom-10{--_tedi-scroll-fade-bottom: 10% }.tedi-scroll-fade--top-20{--_tedi-scroll-fade-top: 20% }.tedi-scroll-fade--bottom-20{--_tedi-scroll-fade-bottom: 20% }\n"], dependencies: [{ kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: ScrollFadeComponent, isStandalone: true, selector: "tedi-scroll-fade", inputs: { fadeSize: { classPropertyName: "fadeSize", publicName: "fadeSize", isSignal: true, isRequired: false, transformFunction: null }, fadePosition: { classPropertyName: "fadePosition", publicName: "fadePosition", isSignal: true, isRequired: false, transformFunction: null }, scrollBar: { classPropertyName: "scrollBar", publicName: "scrollBar", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrolledToTop: "scrolledToTop", scrolledToBottom: "scrolledToBottom" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "innerRef", first: true, predicate: ["inner"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #inner\n  cdkScrollable\n  [class]=\"innerClasses()\"\n  tabindex=\"0\"\n  role=\"group\"\n  [attr.aria-label]=\"ariaLabel() || _defaultLabel()\"\n  (scroll)=\"onScroll()\"\n>\n  <ng-content />\n</div>\n", styles: [".tedi-scroll-fade{--_tedi-scroll-fade-top: 0%;--_tedi-scroll-fade-bottom: 0%;position:relative;display:flex;flex-direction:column;max-height:inherit;overflow:hidden}.tedi-scroll-fade__inner{flex:1;min-height:0;max-height:inherit;overflow:auto;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black var(--_tedi-scroll-fade-top),black calc(100% - var(--_tedi-scroll-fade-bottom)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black var(--_tedi-scroll-fade-top),black calc(100% - var(--_tedi-scroll-fade-bottom)),transparent 100%)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar{width:6px;background-color:var(--general-surface-primary)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-thumb{background:var(--general-border-primary);border-radius:100px}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--general-border-secondary)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-track{background-color:var(--general-surface-primary)}.tedi-scroll-fade--top-0{--_tedi-scroll-fade-top: 0% }.tedi-scroll-fade--bottom-0{--_tedi-scroll-fade-bottom: 0% }.tedi-scroll-fade--top-10{--_tedi-scroll-fade-top: 10% }.tedi-scroll-fade--bottom-10{--_tedi-scroll-fade-bottom: 10% }.tedi-scroll-fade--top-20{--_tedi-scroll-fade-top: 20% }.tedi-scroll-fade--bottom-20{--_tedi-scroll-fade-bottom: 20% }\n"], dependencies: [{ kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ScrollFadeComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: "tedi-scroll-fade", imports: [CdkScrollable], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "[class]": "classes()",
-                    }, template: "<div #inner cdkScrollable [class]=\"innerClasses()\" (scroll)=\"onScroll()\">\n  <ng-content />\n</div>\n", styles: [".tedi-scroll-fade{--_tedi-scroll-fade-top: 0%;--_tedi-scroll-fade-bottom: 0%;position:relative;display:flex;flex-direction:column;max-height:inherit;overflow:hidden}.tedi-scroll-fade__inner{flex:1;min-height:0;max-height:inherit;overflow:auto;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black var(--_tedi-scroll-fade-top),black calc(100% - var(--_tedi-scroll-fade-bottom)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black var(--_tedi-scroll-fade-top),black calc(100% - var(--_tedi-scroll-fade-bottom)),transparent 100%)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar{width:6px;background-color:var(--general-surface-primary)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-thumb{background:var(--general-border-primary);border-radius:100px}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--general-border-secondary)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-track{background-color:var(--general-surface-primary)}.tedi-scroll-fade--top-0{--_tedi-scroll-fade-top: 0% }.tedi-scroll-fade--bottom-0{--_tedi-scroll-fade-bottom: 0% }.tedi-scroll-fade--top-10{--_tedi-scroll-fade-top: 10% }.tedi-scroll-fade--bottom-10{--_tedi-scroll-fade-bottom: 10% }.tedi-scroll-fade--top-20{--_tedi-scroll-fade-top: 20% }.tedi-scroll-fade--bottom-20{--_tedi-scroll-fade-bottom: 20% }\n"] }]
-        }], propDecorators: { fadeSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fadeSize", required: false }] }], fadePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "fadePosition", required: false }] }], scrollBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBar", required: false }] }], scrolledToTop: [{ type: i0.Output, args: ["scrolledToTop"] }], scrolledToBottom: [{ type: i0.Output, args: ["scrolledToBottom"] }], innerRef: [{ type: i0.ViewChild, args: ["inner", { isSignal: true }] }] } });
+                    }, template: "<div\n  #inner\n  cdkScrollable\n  [class]=\"innerClasses()\"\n  tabindex=\"0\"\n  role=\"group\"\n  [attr.aria-label]=\"ariaLabel() || _defaultLabel()\"\n  (scroll)=\"onScroll()\"\n>\n  <ng-content />\n</div>\n", styles: [".tedi-scroll-fade{--_tedi-scroll-fade-top: 0%;--_tedi-scroll-fade-bottom: 0%;position:relative;display:flex;flex-direction:column;max-height:inherit;overflow:hidden}.tedi-scroll-fade__inner{flex:1;min-height:0;max-height:inherit;overflow:auto;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black var(--_tedi-scroll-fade-top),black calc(100% - var(--_tedi-scroll-fade-bottom)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black var(--_tedi-scroll-fade-top),black calc(100% - var(--_tedi-scroll-fade-bottom)),transparent 100%)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar{width:6px;background-color:var(--general-surface-primary)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-thumb{background:var(--general-border-primary);border-radius:100px}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--general-border-secondary)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-track{background-color:var(--general-surface-primary)}.tedi-scroll-fade--top-0{--_tedi-scroll-fade-top: 0% }.tedi-scroll-fade--bottom-0{--_tedi-scroll-fade-bottom: 0% }.tedi-scroll-fade--top-10{--_tedi-scroll-fade-top: 10% }.tedi-scroll-fade--bottom-10{--_tedi-scroll-fade-bottom: 10% }.tedi-scroll-fade--top-20{--_tedi-scroll-fade-top: 20% }.tedi-scroll-fade--bottom-20{--_tedi-scroll-fade-bottom: 20% }\n"] }]
+        }], propDecorators: { fadeSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fadeSize", required: false }] }], fadePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "fadePosition", required: false }] }], scrollBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBar", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], scrolledToTop: [{ type: i0.Output, args: ["scrolledToTop"] }], scrolledToBottom: [{ type: i0.Output, args: ["scrolledToBottom"] }], innerRef: [{ type: i0.ViewChild, args: ["inner", { isSignal: true }] }] } });
 
 class TimelineComponent {
     /** Index of active item */
@@ -17826,7 +17980,7 @@ class HeaderLanguageComponent {
         this.popover()?.hidePopover();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLanguageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderLanguageComponent, isStandalone: true, selector: "tedi-header-language", inputs: { languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: true, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, languageHrefs: { classPropertyName: "languageHrefs", publicName: "languageHrefs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { languageChange: "languageChange" }, host: { properties: { "class.tedi-header-language--label-left": "labelPosition() === 'left'" }, classAttribute: "tedi-header-language" }, viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<span\n  tedi-text\n  color=\"secondary\"\n  modifiers=\"small\"\n  class=\"tedi-header-language__label\"\n  >{{ selectLabel() || (\"header.select-lang\" | tediTranslate) }}</span\n>\n<tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n  <button\n    type=\"button\"\n    tedi-popover-trigger\n    class=\"tedi-link tedi-header__link-button\"\n    [attr.aria-label]=\"triggerAriaLabel()\"\n  >\n    <span>{{ displayedLanguage() }}</span>\n    <tedi-icon\n      name=\"expand_more\"\n      [size]=\"18\"\n      color=\"inherit\"\n      class=\"tedi-header-language__chevron\"\n    />\n  </button>\n  <tedi-popover-content maxWidth=\"none\">\n    @for (language of languageKeys(); track language) {\n      @if (languageHrefs()?.[language]; as href) {\n        <a class=\"tedi-link tedi-header__link-button\" [href]=\"href\">\n          <span>{{ languages()[language] }}</span>\n        </a>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"tedi-link tedi-header__link-button\"\n          (click)=\"handleChangeLang(language)\"\n        >\n          <span>{{ languages()[language] }}</span>\n        </button>\n      }\n    }\n  </tedi-popover-content>\n</tedi-popover>\n", styles: [".tedi-header-language{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.tedi-header-language [tedi-popover-trigger] .tedi-header-language__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-language [tedi-popover-trigger][aria-expanded=true] .tedi-header-language__chevron{transform:rotate(-180deg)}.tedi-header-language--label-left{flex-direction:row;gap:var(--layout-grid-gutters-08);align-items:center}@media(max-width:47.98rem){.tedi-header-language{display:flex;align-items:center;justify-content:center;width:var(--layout-header-mobile-button-size);min-width:var(--layout-header-mobile-button-min-size);height:var(--layout-header-mobile-button-min-size)}}.tedi-header-language__label{display:none}@media(min-width:62rem){.tedi-header-language__label{display:block}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderLanguageComponent, isStandalone: true, selector: "tedi-header-language", inputs: { languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: true, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, languageHrefs: { classPropertyName: "languageHrefs", publicName: "languageHrefs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { languageChange: "languageChange" }, host: { properties: { "class.tedi-header-language--label-left": "labelPosition() === 'left'" }, classAttribute: "tedi-header-language" }, viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<span\n  tedi-text\n  color=\"secondary\"\n  modifiers=\"small\"\n  class=\"tedi-header-language__label\"\n  >{{ selectLabel() || (\"header.select-lang\" | tediTranslate) }}</span\n>\n<tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n  <button\n    type=\"button\"\n    tedi-popover-trigger\n    class=\"tedi-link tedi-header__link-button\"\n    [attr.aria-label]=\"triggerAriaLabel()\"\n  >\n    <span>{{ displayedLanguage() }}</span>\n    <tedi-icon\n      name=\"expand_more\"\n      [size]=\"18\"\n      color=\"inherit\"\n      class=\"tedi-header-language__chevron\"\n    />\n  </button>\n  <tedi-popover-content maxWidth=\"none\">\n    @for (language of languageKeys(); track language) {\n      @if (languageHrefs()?.[language]; as href) {\n        <a class=\"tedi-link tedi-header__link-button\" [href]=\"href\">\n          <span>{{ languages()[language] }}</span>\n        </a>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"tedi-link tedi-header__link-button\"\n          (click)=\"handleChangeLang(language)\"\n        >\n          <span>{{ languages()[language] }}</span>\n        </button>\n      }\n    }\n  </tedi-popover-content>\n</tedi-popover>\n", styles: [".tedi-header-language{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.tedi-header-language [tedi-popover-trigger] .tedi-header-language__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-language [tedi-popover-trigger][aria-expanded=true] .tedi-header-language__chevron{transform:rotate(-180deg)}.tedi-header-language--label-left{flex-direction:row;gap:var(--layout-grid-gutters-08);align-items:center}@media(max-width:47.98rem){.tedi-header-language{display:flex;align-items:center;justify-content:center;width:var(--layout-header-mobile-button-size);min-width:var(--layout-header-mobile-button-min-size);height:var(--layout-header-mobile-button-min-size)}}.tedi-header-language__label{display:none}@media(min-width:62rem){.tedi-header-language__label{display:block}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderLanguageComponent, decorators: [{
             type: Component,
@@ -18323,7 +18477,7 @@ class HeaderProfileComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderProfileComponent, isStandalone: true, selector: "tedi-header-profile", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showPopover: { classPropertyName: "showPopover", publicName: "showPopover", isSignal: true, isRequired: false, transformFunction: null }, noStyle: { classPropertyName: "noStyle", publicName: "noStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *hideAt=\"breakpointInputs().showPopover\">\n  <ng-container *ngTemplateOutlet=\"trigger\" />\n</ng-container>\n\n<ng-container *showAt=\"breakpointInputs().showPopover\">\n  <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n    <button\n      type=\"button\"\n      tedi-button\n      tedi-popover-trigger\n      [attr.data-open]=\"modalOpen()\"\n      [variant]=\"buttonVariant()\"\n      [attr.aria-label]=\"!showLabel() ? resolvedLabel() : null\"\n      (click)=\"handleModalOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n    <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-profile__popover\">\n      <ng-container *ngTemplateOutlet=\"content\" />\n    </tedi-popover-content>\n  </tedi-popover>\n</ng-container>\n\n<ng-template #trigger>\n  @if (isSmall()) {\n    <tedi-header-mobile-button\n      [icon]=\"modalOpen() ? 'close' : 'account_circle'\"\n      [label]=\"resolvedLabel()\"\n      [selected]=\"modalOpen()\"\n      ariaHasPopup=\"dialog\"\n      [ariaExpanded]=\"modalOpen()\"\n      (click)=\"handleModalOpen()\"\n    />\n  } @else {\n    <button\n      type=\"button\"\n      tedi-button\n      [attr.data-open]=\"modalOpen()\"\n      [variant]=\"buttonVariant()\"\n      [attr.aria-label]=\"!showLabel() ? resolvedLabel() : null\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"modalOpen()\"\n      (click)=\"handleModalOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n  }\n  <ng-container *ngTemplateOutlet=\"modal\" />\n</ng-template>\n\n<ng-template #buttonContent>\n  <tedi-icon\n    name=\"account_circle\"\n    color=\"brand\"\n    class=\"tedi-header-profile__icon\"\n    [class.tedi-header-profile__icon--small]=\"showLabel()\"\n  />\n  @if (showLabel()) {\n    <span class=\"tedi-header-profile__label\">{{ resolvedLabel() }}</span>\n    <tedi-icon name=\"expand_more\" class=\"tedi-header-profile__icon--expand\" />\n  }\n</ng-template>\n\n<ng-template #modal>\n  @if (modalOpen()) {\n    <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n    <div\n      class=\"tedi-header-profile__modal\"\n      [class.tedi-header-profile__modal--no-style]=\"noStyle()\"\n    >\n      <ng-container *ngTemplateOutlet=\"content\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-header-profile{--header-profile-offset: var(--layout-header-height);align-content:center}tedi-header-profile [tedi-popover-trigger] .tedi-header-profile__icon--expand{transition:transform .2s ease-in-out}tedi-header-profile [tedi-popover-trigger][aria-expanded=true] .tedi-header-profile__icon--expand{transform:rotate(-180deg)}tedi-header-profile tedi-icon.tedi-header-profile__icon{font-size:var(--icon-06)}tedi-header-profile tedi-icon.tedi-header-profile__icon.tedi-header-profile__icon--small{font-size:var(--icon-03)}tedi-header-profile tedi-icon.tedi-header-profile__icon--expand{font-size:var(--icon-03)}tedi-header-profile .tedi-header-profile__label{white-space:nowrap}tedi-header-profile .tedi-header-profile__overlay{position:absolute;top:var(--header-profile-offset);left:0;z-index:calc(var(--z-index-header) - 1);width:100%;height:calc(100dvh - var(--header-profile-offset));background:#00000040}tedi-header-profile .tedi-header-profile__modal{position:absolute;top:var(--header-profile-offset);right:0;z-index:var(--z-index-header);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);max-width:100%;height:calc(100dvh - var(--header-profile-offset));overflow-y:auto;background:var(--general-surface-primary);border-top:1px solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal:not(tedi-header-profile .tedi-header-profile__modal--no-style)>*:not(.tedi-header-role){padding:var(--layout-header-modal-item-padding);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button{flex-direction:row;gap:var(--link-inner-spacing-x);align-items:center;justify-content:flex-start;width:100%;height:auto;min-height:0;padding:0;font-size:var(--body-regular-size)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button .tedi-header-mobile-button__inner{flex-direction:row;gap:var(--link-inner-spacing-x);align-items:center}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button .tedi-header-mobile-button__text{font-size:inherit}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button tedi-icon{font-size:var(--icon-02)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-logout__button tedi-icon{font-size:var(--icon-02)}.tedi-header-profile__popover tedi-header-logout tedi-icon{font-size:var(--icon-02)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "directive", type: ShowAtDirective, selector: "[showAt]", inputs: ["showAt"] }, { kind: "directive", type: HideAtDirective, selector: "[hideAt]", inputs: ["hideAt"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HeaderMobileButtonComponent, selector: "tedi-header-mobile-button", inputs: ["icon", "label", "href", "selected", "disabled", "ariaLabel", "ariaHasPopup", "ariaExpanded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderProfileComponent, isStandalone: true, selector: "tedi-header-profile", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showPopover: { classPropertyName: "showPopover", publicName: "showPopover", isSignal: true, isRequired: false, transformFunction: null }, noStyle: { classPropertyName: "noStyle", publicName: "noStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *hideAt=\"breakpointInputs().showPopover\">\n  <ng-container *ngTemplateOutlet=\"trigger\" />\n</ng-container>\n\n<ng-container *showAt=\"breakpointInputs().showPopover\">\n  <tedi-popover [withBorder]=\"true\" position=\"bottom\" [preventOverflow]=\"true\">\n    <button\n      type=\"button\"\n      tedi-button\n      tedi-popover-trigger\n      [attr.data-open]=\"modalOpen()\"\n      [variant]=\"buttonVariant()\"\n      [attr.aria-label]=\"!showLabel() ? resolvedLabel() : null\"\n      (click)=\"handleModalOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n    <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-profile__popover\">\n      <ng-container *ngTemplateOutlet=\"content\" />\n    </tedi-popover-content>\n  </tedi-popover>\n</ng-container>\n\n<ng-template #trigger>\n  @if (isSmall()) {\n    <tedi-header-mobile-button\n      [icon]=\"modalOpen() ? 'close' : 'account_circle'\"\n      [label]=\"resolvedLabel()\"\n      [selected]=\"modalOpen()\"\n      ariaHasPopup=\"dialog\"\n      [ariaExpanded]=\"modalOpen()\"\n      (click)=\"handleModalOpen()\"\n    />\n  } @else {\n    <button\n      type=\"button\"\n      tedi-button\n      [attr.data-open]=\"modalOpen()\"\n      [variant]=\"buttonVariant()\"\n      [attr.aria-label]=\"!showLabel() ? resolvedLabel() : null\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"modalOpen()\"\n      (click)=\"handleModalOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"buttonContent\" />\n    </button>\n  }\n  <ng-container *ngTemplateOutlet=\"modal\" />\n</ng-template>\n\n<ng-template #buttonContent>\n  <tedi-icon\n    name=\"account_circle\"\n    color=\"brand\"\n    class=\"tedi-header-profile__icon\"\n    [class.tedi-header-profile__icon--small]=\"showLabel()\"\n  />\n  @if (showLabel()) {\n    <span class=\"tedi-header-profile__label\">{{ resolvedLabel() }}</span>\n    <tedi-icon name=\"expand_more\" class=\"tedi-header-profile__icon--expand\" />\n  }\n</ng-template>\n\n<ng-template #modal>\n  @if (modalOpen()) {\n    <div class=\"tedi-header-profile__overlay\" (click)=\"handleModalOpen()\"></div>\n    <div\n      class=\"tedi-header-profile__modal\"\n      [class.tedi-header-profile__modal--no-style]=\"noStyle()\"\n    >\n      <ng-container *ngTemplateOutlet=\"content\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["tedi-header-profile{--header-profile-offset: var(--layout-header-height);align-content:center}tedi-header-profile [tedi-popover-trigger] .tedi-header-profile__icon--expand{transition:transform .2s ease-in-out}tedi-header-profile [tedi-popover-trigger][aria-expanded=true] .tedi-header-profile__icon--expand{transform:rotate(-180deg)}tedi-header-profile tedi-icon.tedi-header-profile__icon{font-size:var(--icon-06)}tedi-header-profile tedi-icon.tedi-header-profile__icon.tedi-header-profile__icon--small{font-size:var(--icon-03)}tedi-header-profile tedi-icon.tedi-header-profile__icon--expand{font-size:var(--icon-03)}tedi-header-profile .tedi-header-profile__label{white-space:nowrap}tedi-header-profile .tedi-header-profile__overlay{position:absolute;top:var(--header-profile-offset);left:0;z-index:calc(var(--z-index-header) - 1);width:100%;height:calc(100dvh - var(--header-profile-offset));background:#00000040}tedi-header-profile .tedi-header-profile__modal{position:absolute;top:var(--header-profile-offset);right:0;z-index:var(--z-index-header);display:flex;flex-direction:column;width:var(--navigation-vertical-item-width-default);max-width:100%;height:calc(100dvh - var(--header-profile-offset));overflow-y:auto;background:var(--general-surface-primary);border-top:1px solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal:not(tedi-header-profile .tedi-header-profile__modal--no-style)>*:not(.tedi-header-role){padding:var(--layout-header-modal-item-padding);border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button{flex-direction:row;gap:var(--link-inner-spacing-x);align-items:center;justify-content:flex-start;width:100%;height:auto;min-height:0;padding:0;font-size:var(--body-regular-size)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button .tedi-header-mobile-button__inner{flex-direction:row;gap:var(--link-inner-spacing-x);align-items:center}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button .tedi-header-mobile-button__text{font-size:inherit}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-mobile-button tedi-icon{font-size:var(--icon-02)}tedi-header-profile .tedi-header-profile__modal tedi-header-logout .tedi-header-logout__button tedi-icon{font-size:var(--icon-02)}.tedi-header-profile__popover tedi-header-logout tedi-icon{font-size:var(--icon-02)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "directive", type: ShowAtDirective, selector: "[showAt]", inputs: ["showAt"] }, { kind: "directive", type: HideAtDirective, selector: "[hideAt]", inputs: ["hideAt"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HeaderMobileButtonComponent, selector: "tedi-header-mobile-button", inputs: ["icon", "label", "href", "selected", "disabled", "ariaLabel", "ariaHasPopup", "ariaExpanded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderProfileComponent, decorators: [{
             type: Component,
@@ -18596,7 +18750,7 @@ class HeaderRoleComponent {
         return { name: icon.name, size: icon.size ?? 24 };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderRoleComponent, isStandalone: true, selector: "tedi-header-role", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchClearable: { classPropertyName: "searchClearable", publicName: "searchClearable", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnSelect: { classPropertyName: "clearSearchOnSelect", publicName: "clearSearchOnSelect", isSignal: true, isRequired: false, transformFunction: null }, isOrganization: { classPropertyName: "isOrganization", publicName: "isOrganization", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, organizationSearchLabel: { classPropertyName: "organizationSearchLabel", publicName: "organizationSearchLabel", isSignal: true, isRequired: false, transformFunction: null }, showRoleSwitch: { classPropertyName: "showRoleSwitch", publicName: "showRoleSwitch", isSignal: true, isRequired: false, transformFunction: null }, representatives: { classPropertyName: "representatives", publicName: "representatives", isSignal: true, isRequired: true, transformFunction: null }, currentRepresentative: { classPropertyName: "currentRepresentative", publicName: "currentRepresentative", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { currentRepresentative: "currentRepresentativeChange", roleSelectionToggle: "roleSelectionToggle" }, host: { classAttribute: "tedi-header-role" }, queries: [{ propertyName: "titleContent", first: true, predicate: HeaderRoleTitleDirective, descendants: true, isSignal: true }, { propertyName: "customContent", first: true, predicate: HeaderRoleContentDirective, descendants: true, isSignal: true }, { propertyName: "noResultsContent", first: true, predicate: HeaderRoleNoResultsDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: SearchComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *hideAt=\"'lg'\">\n  <div\n    class=\"tedi-header-role__head\"\n    [class.tedi-header-role__head--open]=\"mobileOpen() && hasRoleSelection()\"\n  >\n    <div\n      tedi-text\n      color=\"secondary\"\n      class=\"tedi-header-role__info\"\n      [class.tedi-header-role__info--inline]=\"!hasRoleSelection()\"\n    >\n      <div class=\"tedi-header-role__info-title\">\n        <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n        <p tedi-text modifiers=\"bold\" color=\"secondary\">\n          {{ currentRepresentative().name }}\n        </p>\n      </div>\n      @if (description()) {\n        @if (!hasRoleSelection()) {\n          <tedi-separator axis=\"vertical\" size=\"1rem\" />\n        }\n        <span class=\"tedi-header-role__description\">{{ description() }}</span>\n      }\n    </div>\n    @if (hasRoleSelection()) {\n      <button\n        type=\"button\"\n        tedi-button\n        variant=\"neutral\"\n        (click)=\"handleMobileOpen()\"\n      >\n        {{ collapseText() }}\n        <tedi-icon name=\"expand_more\" [attr.data-open]=\"mobileOpen()\" />\n      </button>\n    }\n  </div>\n  @if (hasRoleSelection()) {\n    <div class=\"tedi-header-role__collapse\" [attr.data-open]=\"mobileOpen()\">\n      <div class=\"tedi-header-role__collapse--items\">\n        @if (hasCustomContent()) {\n          <ng-container\n            *ngTemplateOutlet=\"customContentTemplate()\"\n          ></ng-container>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n      </div>\n    </div>\n  }\n</ng-container>\n\n<ng-container *showAt=\"'lg'\">\n  @if (label() || description() || hasTitle()) {\n    <div\n      tedi-text\n      color=\"secondary\"\n      modifiers=\"small\"\n      class=\"tedi-header-role__head\"\n      [class.tedi-header-role__head--open]=\"hasRoleSelection() && mobileOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n\n      @if (description()) {\n        <span class=\"tedi-header-role__description\">{{ description() }}</span>\n      }\n    </div>\n  }\n\n  @if (hasRoleSelection()) {\n    <tedi-popover\n      [withBorder]=\"true\"\n      position=\"bottom\"\n      [preventOverflow]=\"true\"\n    >\n      <button\n        type=\"button\"\n        tedi-popover-trigger\n        class=\"tedi-link tedi-header__link-button\"\n      >\n        <span>{{ currentRepresentative().name }}</span>\n        <tedi-icon\n          name=\"expand_more\"\n          [size]=\"16\"\n          class=\"tedi-header-role__chevron\"\n        />\n      </button>\n      <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-role__dropdown\">\n        @if (hasCustomContent()) {\n          <ng-container\n            *ngTemplateOutlet=\"customContentTemplate()\"\n          ></ng-container>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n      </tedi-popover-content>\n    </tedi-popover>\n  } @else {\n    <div class=\"tedi-header-role__value\">{{ currentRepresentative().name }}</div>\n  }\n</ng-container>\n\n<ng-template #content>\n  @if (showSearch()) {\n    <tedi-search\n      [inputId]=\"inputId\"\n      [label]=\"searchText()\"\n      [value]=\"inputValue()\"\n      [clearable]=\"searchClearable()\"\n      (valueChange)=\"handleInputChange($event)\"\n    />\n  }\n  @if (filteredRepresentatives().length === 0) {\n    @if (hasNoResultsContent()) {\n      <ng-container *ngTemplateOutlet=\"noResultsTemplate()\"></ng-container>\n    } @else {\n      <span class=\"tedi-header-role__no-results\">{{ noResultsText() }}</span>\n    }\n  }\n  @for (r of filteredRepresentatives(); track r.id) {\n    <button\n      type=\"button\"\n      class=\"tedi-header-role__representative\"\n      [attr.data-selected]=\"r.id === currentRepresentative().id\"\n      (click)=\"handleSelectRepresentative(r)\"\n    >\n      @if (resolveIcon(r.icon); as icon) {\n        <tedi-icon [name]=\"icon.name\" [size]=\"icon.size\" />\n      }\n      <div>\n        <div>{{ r.name }}</div>\n        @if (r.description) {\n          <div tedi-text modifiers=\"small\">\n            {{ r.description }}\n          </div>\n        }\n      </div>\n    </button>\n  }\n</ng-template>\n\n<ng-template #roleTitle>\n  <ng-content select=\"[tedi-header-role-title]\">\n    @if (label(); as labelText) {\n      <p\n        tedi-text\n        [modifiers]=\"isTabletView() ? ['bold'] : ['small', 'bold']\"\n        color=\"secondary\"\n      >\n        {{ labelText }}\n      </p>\n    }\n  </ng-content>\n</ng-template>\n", styles: [":root{--_header-role-transition-duration: .3s}.tedi-header-role{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:unset;background-color:var(--general-surface-secondary);border-bottom:var(--tedi-borders-04) solid var(--general-border-brand)}@media(min-width:62rem){.tedi-header-role{background-color:transparent;border-bottom:0}}.tedi-header-role [tedi-popover-trigger] .tedi-header-role__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-role [tedi-popover-trigger][aria-expanded=true] .tedi-header-role__chevron{transform:rotate(-180deg)}.tedi-header-role__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:space-between;width:100%;padding:var(--card-padding-md-default);transition:padding var(--_header-role-transition-duration) ease}@media(min-width:62rem){.tedi-header-role__head{justify-content:flex-start;padding:0}}.tedi-header-role__head .tedi-header-role__info{display:flex;flex-direction:column;align-items:flex-start}.tedi-header-role__head .tedi-header-role__info--inline{flex-direction:row;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-header-role__head .tedi-header-role__info-title{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-header-role__head button{gap:var(--link-inner-spacing-x);padding:0;border:none}.tedi-header-role__head button tedi-icon{transition:transform .2s ease-in-out}.tedi-header-role__head button tedi-icon[data-open=true]{transform:rotate(-180deg)}.tedi-header-role__dropdown{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16)}.tedi-header-role__dropdown>*:not(:first-child){position:relative}.tedi-header-role__dropdown>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}.tedi-header-role__value{min-width:max-content}.tedi-header-role__representative{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;width:100%;padding:var(--card-padding-xs);font-size:var(--body-regular-size);color:var(--general-text-secondary);text-align:start;cursor:pointer;background:transparent;border:0;border-radius:var(--card-radius-rounded)}.tedi-header-role__representative:not([data-selected=true]):hover{color:var(--general-text-primary);background:var(--header-popover-item-hover)}.tedi-header-role__representative:not([data-selected=true]):active{color:var(--general-text-white);background:var(--header-popover-item-active)}.tedi-header-role__representative:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-header-role__representative[data-selected=true]{color:var(--general-text-white);background:var(--header-popover-item-selected)}.tedi-header-role__representative tedi-icon{color:inherit}.tedi-header-role__representative [tedi-text]{color:inherit}.tedi-header-role__no-results{padding-top:var(--layout-grid-gutters-08);color:var(--general-text-secondary);text-align:center}.tedi-header-role__collapse{display:grid;visibility:hidden;grid-template-rows:minmax(0,0fr);width:100%;overflow:hidden;transition:grid-template-rows var(--_header-role-transition-duration) ease}.tedi-header-role__collapse[data-open=true]{visibility:visible;grid-template-rows:minmax(0,1fr)}.tedi-header-role__collapse[data-open=true] .tedi-header-role__collapse--items{visibility:visible}.tedi-header-role__collapse--items{display:flex;visibility:hidden;flex-direction:column;gap:var(--layout-grid-gutters-16);min-height:0;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default);overflow:hidden;transition:visibility var(--_header-role-transition-duration) ease}.tedi-header-role__collapse--items>*:not(:first-child){position:relative}.tedi-header-role__collapse--items>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "directive", type: ShowAtDirective, selector: "[showAt]", inputs: ["showAt"] }, { kind: "directive", type: HideAtDirective, selector: "[hideAt]", inputs: ["hideAt"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: SearchComponent, selector: "tedi-search", inputs: ["inputId", "label", "value", "placeholder", "size", "clearable", "searchIcon", "disabled", "button", "feedbackText", "ariaLabel"], outputs: ["valueChange", "searchEvent", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeaderRoleComponent, isStandalone: true, selector: "tedi-header-role", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchClearable: { classPropertyName: "searchClearable", publicName: "searchClearable", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnSelect: { classPropertyName: "clearSearchOnSelect", publicName: "clearSearchOnSelect", isSignal: true, isRequired: false, transformFunction: null }, isOrganization: { classPropertyName: "isOrganization", publicName: "isOrganization", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, organizationSearchLabel: { classPropertyName: "organizationSearchLabel", publicName: "organizationSearchLabel", isSignal: true, isRequired: false, transformFunction: null }, showRoleSwitch: { classPropertyName: "showRoleSwitch", publicName: "showRoleSwitch", isSignal: true, isRequired: false, transformFunction: null }, representatives: { classPropertyName: "representatives", publicName: "representatives", isSignal: true, isRequired: true, transformFunction: null }, currentRepresentative: { classPropertyName: "currentRepresentative", publicName: "currentRepresentative", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { currentRepresentative: "currentRepresentativeChange", roleSelectionToggle: "roleSelectionToggle" }, host: { classAttribute: "tedi-header-role" }, queries: [{ propertyName: "titleContent", first: true, predicate: HeaderRoleTitleDirective, descendants: true, isSignal: true }, { propertyName: "customContent", first: true, predicate: HeaderRoleContentDirective, descendants: true, isSignal: true }, { propertyName: "noResultsContent", first: true, predicate: HeaderRoleNoResultsDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: SearchComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *hideAt=\"'lg'\">\n  <div\n    class=\"tedi-header-role__head\"\n    [class.tedi-header-role__head--open]=\"mobileOpen() && hasRoleSelection()\"\n  >\n    <div\n      tedi-text\n      color=\"secondary\"\n      class=\"tedi-header-role__info\"\n      [class.tedi-header-role__info--inline]=\"!hasRoleSelection()\"\n    >\n      <div class=\"tedi-header-role__info-title\">\n        <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n        <p tedi-text modifiers=\"bold\" color=\"secondary\">\n          {{ currentRepresentative().name }}\n        </p>\n      </div>\n      @if (description()) {\n        @if (!hasRoleSelection()) {\n          <tedi-separator axis=\"vertical\" size=\"1rem\" />\n        }\n        <span class=\"tedi-header-role__description\">{{ description() }}</span>\n      }\n    </div>\n    @if (hasRoleSelection()) {\n      <button\n        type=\"button\"\n        tedi-button\n        variant=\"neutral\"\n        (click)=\"handleMobileOpen()\"\n      >\n        {{ collapseText() }}\n        <tedi-icon name=\"expand_more\" [attr.data-open]=\"mobileOpen()\" />\n      </button>\n    }\n  </div>\n  @if (hasRoleSelection()) {\n    <div class=\"tedi-header-role__collapse\" [attr.data-open]=\"mobileOpen()\">\n      <div class=\"tedi-header-role__collapse--items\">\n        @if (hasCustomContent()) {\n          <ng-container\n            *ngTemplateOutlet=\"customContentTemplate()\"\n          ></ng-container>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n      </div>\n    </div>\n  }\n</ng-container>\n\n<ng-container *showAt=\"'lg'\">\n  @if (label() || description() || hasTitle()) {\n    <div\n      tedi-text\n      color=\"secondary\"\n      modifiers=\"small\"\n      class=\"tedi-header-role__head\"\n      [class.tedi-header-role__head--open]=\"hasRoleSelection() && mobileOpen()\"\n    >\n      <ng-container *ngTemplateOutlet=\"roleTitle\"></ng-container>\n\n      @if (description()) {\n        <span class=\"tedi-header-role__description\">{{ description() }}</span>\n      }\n    </div>\n  }\n\n  @if (hasRoleSelection()) {\n    <tedi-popover\n      [withBorder]=\"true\"\n      position=\"bottom\"\n      [preventOverflow]=\"true\"\n    >\n      <button\n        type=\"button\"\n        tedi-popover-trigger\n        class=\"tedi-link tedi-header__link-button\"\n      >\n        <span>{{ currentRepresentative().name }}</span>\n        <tedi-icon\n          name=\"expand_more\"\n          [size]=\"16\"\n          class=\"tedi-header-role__chevron\"\n        />\n      </button>\n      <tedi-popover-content maxWidth=\"small\" class=\"tedi-header-role__dropdown\">\n        @if (hasCustomContent()) {\n          <ng-container\n            *ngTemplateOutlet=\"customContentTemplate()\"\n          ></ng-container>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        }\n      </tedi-popover-content>\n    </tedi-popover>\n  } @else {\n    <div class=\"tedi-header-role__value\">{{ currentRepresentative().name }}</div>\n  }\n</ng-container>\n\n<ng-template #content>\n  @if (showSearch()) {\n    <tedi-search\n      [inputId]=\"inputId\"\n      [label]=\"searchText()\"\n      [value]=\"inputValue()\"\n      [clearable]=\"searchClearable()\"\n      (valueChange)=\"handleInputChange($event)\"\n    />\n  }\n  @if (filteredRepresentatives().length === 0) {\n    @if (hasNoResultsContent()) {\n      <ng-container *ngTemplateOutlet=\"noResultsTemplate()\"></ng-container>\n    } @else {\n      <span class=\"tedi-header-role__no-results\">{{ noResultsText() }}</span>\n    }\n  }\n  @for (r of filteredRepresentatives(); track r.id) {\n    <button\n      type=\"button\"\n      class=\"tedi-header-role__representative\"\n      [attr.data-selected]=\"r.id === currentRepresentative().id\"\n      (click)=\"handleSelectRepresentative(r)\"\n    >\n      @if (resolveIcon(r.icon); as icon) {\n        <tedi-icon [name]=\"icon.name\" [size]=\"icon.size\" />\n      }\n      <div>\n        <div>{{ r.name }}</div>\n        @if (r.description) {\n          <div tedi-text modifiers=\"small\">\n            {{ r.description }}\n          </div>\n        }\n      </div>\n    </button>\n  }\n</ng-template>\n\n<ng-template #roleTitle>\n  <ng-content select=\"[tedi-header-role-title]\">\n    @if (label(); as labelText) {\n      <p\n        tedi-text\n        [modifiers]=\"isTabletView() ? ['bold'] : ['small', 'bold']\"\n        color=\"secondary\"\n      >\n        {{ labelText }}\n      </p>\n    }\n  </ng-content>\n</ng-template>\n", styles: [":root{--_header-role-transition-duration: .3s}.tedi-header-role{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:unset;background-color:var(--general-surface-secondary);border-bottom:var(--tedi-borders-04) solid var(--general-border-brand)}@media(min-width:62rem){.tedi-header-role{background-color:transparent;border-bottom:0}}.tedi-header-role [tedi-popover-trigger] .tedi-header-role__chevron{margin:0;transition:transform .2s ease-in-out}.tedi-header-role [tedi-popover-trigger][aria-expanded=true] .tedi-header-role__chevron{transform:rotate(-180deg)}.tedi-header-role__head{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:space-between;width:100%;padding:var(--card-padding-md-default);transition:padding var(--_header-role-transition-duration) ease}@media(min-width:62rem){.tedi-header-role__head{justify-content:flex-start;padding:0}}.tedi-header-role__head .tedi-header-role__info{display:flex;flex-direction:column;align-items:flex-start}.tedi-header-role__head .tedi-header-role__info--inline{flex-direction:row;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-header-role__head .tedi-header-role__info-title{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-header-role__head button{gap:var(--link-inner-spacing-x);padding:0;border:none}.tedi-header-role__head button tedi-icon{transition:transform .2s ease-in-out}.tedi-header-role__head button tedi-icon[data-open=true]{transform:rotate(-180deg)}.tedi-header-role__dropdown{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-16)}.tedi-header-role__dropdown>*:not(:first-child){position:relative}.tedi-header-role__dropdown>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}.tedi-header-role__value{min-width:max-content}.tedi-header-role__representative{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;width:100%;padding:var(--card-padding-xs);font-size:var(--body-regular-size);color:var(--general-text-secondary);text-align:start;cursor:pointer;background:transparent;border:0;border-radius:var(--card-radius-rounded)}.tedi-header-role__representative:not([data-selected=true]):hover{color:var(--general-text-primary);background:var(--header-popover-item-hover)}.tedi-header-role__representative:not([data-selected=true]):active{color:var(--general-text-white);background:var(--header-popover-item-active)}.tedi-header-role__representative:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-header-role__representative[data-selected=true]{color:var(--general-text-white);background:var(--header-popover-item-selected)}.tedi-header-role__representative tedi-icon{color:inherit}.tedi-header-role__representative [tedi-text]{color:inherit}.tedi-header-role__no-results{padding-top:var(--layout-grid-gutters-08);color:var(--general-text-secondary);text-align:center}.tedi-header-role__collapse{display:grid;visibility:hidden;grid-template-rows:minmax(0,0fr);width:100%;overflow:hidden;transition:grid-template-rows var(--_header-role-transition-duration) ease}.tedi-header-role__collapse[data-open=true]{visibility:visible;grid-template-rows:minmax(0,1fr)}.tedi-header-role__collapse[data-open=true] .tedi-header-role__collapse--items{visibility:visible}.tedi-header-role__collapse--items{display:flex;visibility:hidden;flex-direction:column;gap:var(--layout-grid-gutters-16);min-height:0;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default);overflow:hidden;transition:visibility var(--_header-role-transition-duration) ease}.tedi-header-role__collapse--items>*:not(:first-child){position:relative}.tedi-header-role__collapse--items>*:not(:first-child):after{position:absolute;top:calc(-1 * (var(--layout-grid-gutters-16) / 2 + 1px));left:0;width:100%;height:1px;content:\"\";background-color:var(--general-border-primary)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "directive", type: ShowAtDirective, selector: "[showAt]", inputs: ["showAt"] }, { kind: "directive", type: HideAtDirective, selector: "[hideAt]", inputs: ["hideAt"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: SearchComponent, selector: "tedi-search", inputs: ["inputId", "label", "value", "placeholder", "size", "clearable", "searchIcon", "disabled", "button", "feedbackText", "ariaLabel"], outputs: ["valueChange", "searchEvent", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeaderRoleComponent, decorators: [{
             type: Component,