@tedi-design-system/angular 8.2.0-rc.2 → 8.2.0-rc.4

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

@@ -6767,7 +6767,11 @@ class DateInputComponent {
     multiRow = input(true, ...(ngDevMode ? [{ debugName: "multiRow" }] : []));
     /** Which end the tag labels truncate from when they don't fit (`false` = no truncation). */
     ellipsis = input(false, ...(ngDevMode ? [{ debugName: "ellipsis" }] : []));
-    /** Whether the tags show a remove (close) button. */
+    /**
+     * Whether the tags show a remove (close) button. Independent of `readOnly`,
+     * which only locks the text input — the parent decides whether the value can
+     * still change (e.g. through the calendar).
+     */
     removable = input(true, ...(ngDevMode ? [{ debugName: "removable" }] : []));
     placeholder = input("", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
@@ -6777,6 +6781,7 @@ class DateInputComponent {
     iconDisabled = input(false, ...(ngDevMode ? [{ debugName: "iconDisabled" }] : []));
     useNativePicker = input(false, ...(ngDevMode ? [{ debugName: "useNativePicker" }] : []));
     nativeIsoValue = input("", ...(ngDevMode ? [{ debugName: "nativeIsoValue" }] : []));
+    /** Whether to show the clear button. Independent of `readOnly`, like `removable`. */
     clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
     inputChange = output();
     iconClick = output();
@@ -6837,7 +6842,6 @@ class DateInputComponent {
     inputValue = computed(() => this.useNativePicker() ? this.nativeIsoValue() : this.value(), ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
     showClear = computed(() => this.clearable() &&
         !this.disabled() &&
-        !this.readOnly() &&
         (this.inputValue() !== "" || this.hasTags()), ...(ngDevMode ? [{ debugName: "showClear" }] : []));
     iconAriaLabel = this.translationService.track("date-picker.open-calendar");
     clearAriaLabel = this.translationService.track("date-picker.clear-date");
@@ -6856,12 +6860,12 @@ class DateInputComponent {
         this.iconClick.emit();
     }
     handleTagRemove(id) {
-        if (this.disabled() || this.readOnly())
+        if (this.disabled())
             return;
         this.tagRemove.emit(id);
     }
     handleClear() {
-        if (this.disabled() || this.readOnly())
+        if (this.disabled())
             return;
         this.clear.emit();
     }
@@ -6890,7 +6894,7 @@ class DateInputComponent {
         return width - inputMinWidth;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateInputComponent, isStandalone: true, selector: "tedi-date-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconActive: { classPropertyName: "iconActive", publicName: "iconActive", isSignal: true, isRequired: false, transformFunction: null }, iconDisabled: { classPropertyName: "iconDisabled", publicName: "iconDisabled", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, nativeIsoValue: { classPropertyName: "nativeIsoValue", publicName: "nativeIsoValue", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputChange: "inputChange", iconClick: "iconClick", tagRemove: "tagRemove", clear: "clear" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.tedi-date-input--disabled": "disabled()", "class.tedi-date-input--readonly": "readOnly()", "class.tedi-date-input--with-tags": "hasTags()", "class.tedi-date-input--tags-wrap": "hasTags() && multiRow()", "class.tedi-date-input--tags-single-row": "hasTags() && !multiRow()", "class.tedi-date-input--tags-measuring": "hasTags() && !multiRow() && visibleTagsCount() === null" }, classAttribute: "tedi-date-input" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "fieldElement", first: true, predicate: ["fieldElement"], descendants: true, isSignal: true }, { propertyName: "tagElements", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "textField", first: true, predicate: TextFieldComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n  @if (hasTags()) {\n    <div class=\"tedi-date-input__tags\">\n      @for (tag of visibleTags(); track tag.id) {\n        <tedi-tag\n          #tagElement\n          [ellipsis]=\"ellipsis()\"\n          [closable]=\"removable() && !disabled() && !readOnly()\"\n          (closed)=\"handleTagRemove(tag.id)\"\n        >\n          {{ tag.label }}\n        </tedi-tag>\n      }\n    </div>\n    @if (hiddenTagsCount() > 0) {\n      <tedi-tag class=\"tedi-date-input__tags-counter\"\n        >+{{ hiddenTagsCount() }}</tedi-tag\n      >\n    }\n  }\n  <input\n    #inputElement\n    tedi-text-field\n    class=\"tedi-date-input__input\"\n    [id]=\"inputId()\"\n    [attr.name]=\"name() || null\"\n    [type]=\"inputType()\"\n    [value]=\"inputValue()\"\n    [attr.placeholder]=\"placeholder() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readOnly()\"\n    [required]=\"required()\"\n    (input)=\"handleInput($event)\"\n  />\n</div>\n<div class=\"tedi-date-input__actions\">\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-input__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"clearAriaLabel()\"\n      (click)=\"handleClear()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <button\n    type=\"button\"\n    class=\"tedi-date-input__icon\"\n    [class.tedi-date-input__icon--active]=\"iconActive()\"\n    [disabled]=\"disabled() || iconDisabled()\"\n    [attr.aria-label]=\"iconAriaLabel()\"\n    [attr.aria-expanded]=\"iconActive()\"\n    (click)=\"handleIconClick()\"\n  >\n    <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n  </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-input--with-tags .tedi-date-input__input{height:auto}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--tags-wrap),.tedi-form-field__box:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--_field-height)}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--with-tags),.tedi-form-field__box:has(.tedi-date-input--with-tags){padding-block:calc(var(--_field-padding-y) - var(--tedi-borders-01))}\n"], dependencies: [{ kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateInputComponent, isStandalone: true, selector: "tedi-date-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconActive: { classPropertyName: "iconActive", publicName: "iconActive", isSignal: true, isRequired: false, transformFunction: null }, iconDisabled: { classPropertyName: "iconDisabled", publicName: "iconDisabled", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, nativeIsoValue: { classPropertyName: "nativeIsoValue", publicName: "nativeIsoValue", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputChange: "inputChange", iconClick: "iconClick", tagRemove: "tagRemove", clear: "clear" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.tedi-date-input--disabled": "disabled()", "class.tedi-date-input--readonly": "readOnly()", "class.tedi-date-input--with-tags": "hasTags()", "class.tedi-date-input--tags-wrap": "hasTags() && multiRow()", "class.tedi-date-input--tags-single-row": "hasTags() && !multiRow()", "class.tedi-date-input--tags-measuring": "hasTags() && !multiRow() && visibleTagsCount() === null" }, classAttribute: "tedi-date-input" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "fieldElement", first: true, predicate: ["fieldElement"], descendants: true, isSignal: true }, { propertyName: "tagElements", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "textField", first: true, predicate: TextFieldComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n  @if (hasTags()) {\n    <div class=\"tedi-date-input__tags\">\n      @for (tag of visibleTags(); track tag.id) {\n        <tedi-tag\n          #tagElement\n          [ellipsis]=\"ellipsis()\"\n          [closable]=\"removable() && !disabled()\"\n          (closed)=\"handleTagRemove(tag.id)\"\n        >\n          {{ tag.label }}\n        </tedi-tag>\n      }\n    </div>\n    @if (hiddenTagsCount() > 0) {\n      <tedi-tag class=\"tedi-date-input__tags-counter\"\n        >+{{ hiddenTagsCount() }}</tedi-tag\n      >\n    }\n  }\n  <input\n    #inputElement\n    tedi-text-field\n    class=\"tedi-date-input__input\"\n    [id]=\"inputId()\"\n    [attr.name]=\"name() || null\"\n    [type]=\"inputType()\"\n    [value]=\"inputValue()\"\n    [attr.placeholder]=\"placeholder() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readOnly()\"\n    [required]=\"required()\"\n    (input)=\"handleInput($event)\"\n  />\n</div>\n<div class=\"tedi-date-input__actions\">\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-input__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"clearAriaLabel()\"\n      (click)=\"handleClear()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <button\n    type=\"button\"\n    class=\"tedi-date-input__icon\"\n    [class.tedi-date-input__icon--active]=\"iconActive()\"\n    [disabled]=\"disabled() || iconDisabled()\"\n    [attr.aria-label]=\"iconAriaLabel()\"\n    [attr.aria-expanded]=\"iconActive()\"\n    (click)=\"handleIconClick()\"\n  >\n    <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n  </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-input--with-tags .tedi-date-input__input{height:auto}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--tags-wrap),.tedi-form-field__box:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--_field-height)}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--with-tags),.tedi-form-field__box:has(.tedi-date-input--with-tags){padding-block:calc(var(--_field-padding-y) - var(--tedi-borders-01))}\n"], dependencies: [{ kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
@@ -6909,7 +6913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         "[class.tedi-date-input--tags-single-row]": "hasTags() && !multiRow()",
                         "[class.tedi-date-input--tags-measuring]": "hasTags() && !multiRow() && visibleTagsCount() === null",
                         "(window:resize)": "onResize()",
-                    }, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n  @if (hasTags()) {\n    <div class=\"tedi-date-input__tags\">\n      @for (tag of visibleTags(); track tag.id) {\n        <tedi-tag\n          #tagElement\n          [ellipsis]=\"ellipsis()\"\n          [closable]=\"removable() && !disabled() && !readOnly()\"\n          (closed)=\"handleTagRemove(tag.id)\"\n        >\n          {{ tag.label }}\n        </tedi-tag>\n      }\n    </div>\n    @if (hiddenTagsCount() > 0) {\n      <tedi-tag class=\"tedi-date-input__tags-counter\"\n        >+{{ hiddenTagsCount() }}</tedi-tag\n      >\n    }\n  }\n  <input\n    #inputElement\n    tedi-text-field\n    class=\"tedi-date-input__input\"\n    [id]=\"inputId()\"\n    [attr.name]=\"name() || null\"\n    [type]=\"inputType()\"\n    [value]=\"inputValue()\"\n    [attr.placeholder]=\"placeholder() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readOnly()\"\n    [required]=\"required()\"\n    (input)=\"handleInput($event)\"\n  />\n</div>\n<div class=\"tedi-date-input__actions\">\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-input__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"clearAriaLabel()\"\n      (click)=\"handleClear()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <button\n    type=\"button\"\n    class=\"tedi-date-input__icon\"\n    [class.tedi-date-input__icon--active]=\"iconActive()\"\n    [disabled]=\"disabled() || iconDisabled()\"\n    [attr.aria-label]=\"iconAriaLabel()\"\n    [attr.aria-expanded]=\"iconActive()\"\n    (click)=\"handleIconClick()\"\n  >\n    <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n  </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-input--with-tags .tedi-date-input__input{height:auto}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--tags-wrap),.tedi-form-field__box:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--_field-height)}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--with-tags),.tedi-form-field__box:has(.tedi-date-input--with-tags){padding-block:calc(var(--_field-padding-y) - var(--tedi-borders-01))}\n"] }]
+                    }, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n  @if (hasTags()) {\n    <div class=\"tedi-date-input__tags\">\n      @for (tag of visibleTags(); track tag.id) {\n        <tedi-tag\n          #tagElement\n          [ellipsis]=\"ellipsis()\"\n          [closable]=\"removable() && !disabled()\"\n          (closed)=\"handleTagRemove(tag.id)\"\n        >\n          {{ tag.label }}\n        </tedi-tag>\n      }\n    </div>\n    @if (hiddenTagsCount() > 0) {\n      <tedi-tag class=\"tedi-date-input__tags-counter\"\n        >+{{ hiddenTagsCount() }}</tedi-tag\n      >\n    }\n  }\n  <input\n    #inputElement\n    tedi-text-field\n    class=\"tedi-date-input__input\"\n    [id]=\"inputId()\"\n    [attr.name]=\"name() || null\"\n    [type]=\"inputType()\"\n    [value]=\"inputValue()\"\n    [attr.placeholder]=\"placeholder() || null\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readOnly()\"\n    [required]=\"required()\"\n    (input)=\"handleInput($event)\"\n  />\n</div>\n<div class=\"tedi-date-input__actions\">\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-date-input__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"clearAriaLabel()\"\n      (click)=\"handleClear()\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n  <button\n    type=\"button\"\n    class=\"tedi-date-input__icon\"\n    [class.tedi-date-input__icon--active]=\"iconActive()\"\n    [disabled]=\"disabled() || iconDisabled()\"\n    [attr.aria-label]=\"iconAriaLabel()\"\n    [attr.aria-expanded]=\"iconActive()\"\n    (click)=\"handleIconClick()\"\n  >\n    <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n  </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-input--with-tags .tedi-date-input__input{height:auto}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--tags-wrap),.tedi-form-field__box:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--_field-height)}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--with-tags),.tedi-form-field__box:has(.tedi-date-input--with-tags){padding-block:calc(var(--_field-padding-y) - var(--tedi-borders-01))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], ellipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsis", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], iconActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconActive", required: false }] }], iconDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconDisabled", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], nativeIsoValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "nativeIsoValue", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], iconClick: [{ type: i0.Output, args: ["iconClick"] }], tagRemove: [{ type: i0.Output, args: ["tagRemove"] }], clear: [{ type: i0.Output, args: ["clear"] }], inputElement: [{ type: i0.ViewChild, args: ["inputElement", { ...{
                             read: ElementRef,
                         }, isSignal: true }] }], fieldElement: [{ type: i0.ViewChild, args: ["fieldElement", { isSignal: true }] }], tagElements: [{ type: i0.ViewChildren, args: ["tagElement", { ...{
@@ -9314,7 +9318,8 @@ class DateFieldComponent {
     inputDisabled = input(false, ...(ngDevMode ? [{ debugName: "inputDisabled" }] : []));
     /**
      * Blocks typing into the input but leaves the calendar interactive — useful
-     * for guided picking.
+     * for guided picking. The value can still be cleared while the calendar is
+     * available, since the user can change it there anyway.
      */
     readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : []));
     /**
@@ -9429,7 +9434,8 @@ class DateFieldComponent {
     /**
      * Use the OS native date picker instead of the custom popover (single mode only).
      * `true` always, `false` never, breakpoint name → native below that breakpoint
-     * (custom popover from that breakpoint up).
+     * (custom popover from that breakpoint up). `readOnly` uses the custom
+     * calendar so picking and clearing remain available without manual input.
      */
     useNativePicker = input(false, ...(ngDevMode ? [{ debugName: "useNativePicker" }] : []));
     /**
@@ -9552,7 +9558,8 @@ class DateFieldComponent {
     }, ...(ngDevMode ? [{ debugName: "useNativePickerResolved" }] : []));
     useNativePickerEffective = computed(() => this.useNativePickerResolved() &&
         this.mode() === "single" &&
-        !this.modalEnabled(), ...(ngDevMode ? [{ debugName: "useNativePickerEffective" }] : []));
+        !this.modalEnabled() &&
+        !this.readOnly(), ...(ngDevMode ? [{ debugName: "useNativePickerEffective" }] : []));
     numberOfMonthsResolved = computed(() => Math.max(1, this.resolveBreakpointInput(this.numberOfMonths())), ...(ngDevMode ? [{ debugName: "numberOfMonthsResolved" }] : []));
     enableCalendarResolved = computed(() => this.resolveBreakpointInput(this.enableCalendar()), ...(ngDevMode ? [{ debugName: "enableCalendarResolved" }] : []));
     calendarTriggerResolved = computed(() => this.resolveBreakpointInput(this.calendarTrigger()), ...(ngDevMode ? [{ debugName: "calendarTriggerResolved" }] : []));
@@ -9617,7 +9624,13 @@ class DateFieldComponent {
             label: customFormat ? customFormat(d) : this.defaultFormat(d),
         }));
     }, ...(ngDevMode ? [{ debugName: "tagsForMultipleMode" }] : []));
-    canClear = computed(() => !!this.value() && !this.fieldDisabled() && !this.readOnly(), ...(ngDevMode ? [{ debugName: "canClear" }] : []));
+    /**
+     * Whether the user can change the value at all. `readOnly` only locks the
+     * text input: while the calendar is available the user can still pick dates,
+     * so they must also be able to remove them (clear button, tag close).
+     */
+    valueEditable = computed(() => !this.fieldDisabled() && (!this.readOnly() || this.showCalendar()), ...(ngDevMode ? [{ debugName: "valueEditable" }] : []));
+    canClear = computed(() => !!this.value() && this.valueEditable(), ...(ngDevMode ? [{ debugName: "canClear" }] : []));
     inputIsTrigger = computed(() => this.showCalendar() && this.calendarTriggerResolved() === "input", ...(ngDevMode ? [{ debugName: "inputIsTrigger" }] : []));
     initialOpenEmit = true;
     constructor() {
@@ -9676,7 +9689,7 @@ class DateFieldComponent {
         this.dateInput().focusInput();
     }
     reset() {
-        if (this.fieldDisabled() || this.readOnly())
+        if (!this.valueEditable())
             return;
         this.commitValue(null);
     }
@@ -9739,7 +9752,7 @@ class DateFieldComponent {
         this.commitValue(parsed);
     }
     handleTagRemove(id) {
-        if (this.fieldDisabled() || this.readOnly())
+        if (!this.valueEditable())
             return;
         const v = this.value();
         if (!Array.isArray(v))
@@ -10046,7 +10059,7 @@ class DateFieldComponent {
                 useFactory: (field) => field.childContext,
                 deps: [forwardRef(() => DateFieldComponent)],
             },
-        ], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: "<tedi-date-input\n  #dateInput\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n  [inputId]=\"inputId()\"\n  [name]=\"name()\"\n  [value]=\"inputText()\"\n  [ariaDescribedby]=\"describedBy.attribute()\"\n  [tags]=\"tagsForMultipleMode()\"\n  [mode]=\"mode()\"\n  [multiRow]=\"multiRow()\"\n  [ellipsis]=\"tagEllipsis()\"\n  [removable]=\"isTagRemovable()\"\n  [placeholder]=\"effectivePlaceholder()\"\n  [disabled]=\"fieldDisabled()\"\n  [readOnly]=\"readOnly() || inputIsTrigger()\"\n  [required]=\"required()\"\n  [iconActive]=\"overlayOpen()\"\n  [iconDisabled]=\"!enableCalendarResolved()\"\n  [useNativePicker]=\"useNativePickerEffective()\"\n  [nativeIsoValue]=\"nativeIsoValue()\"\n  [clearable]=\"canClear()\"\n  (click)=\"handleInputClick($event)\"\n  (inputChange)=\"handleInputChange($event)\"\n  (iconClick)=\"handleIconClick()\"\n  (tagRemove)=\"handleTagRemove($event)\"\n  (clear)=\"handleClear()\"\n/>\n@if (usePopover()) {\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n    [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n    [cdkConnectedOverlayHasBackdrop]=\"false\"\n    (attach)=\"handleOverlayAttached()\"\n    (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n    (detach)=\"handleOverlayDetached()\"\n  >\n    <div\n      class=\"tedi-date-field__overlay\"\n      role=\"dialog\"\n      [attr.aria-label]=\"'date-field.calendar-dialog' | tediTranslate\"\n      cdkTrapFocus\n      (keydown)=\"handleOverlayKeydown($event)\"\n    >\n      <tedi-calendar\n        #calendar\n        [bordered]=\"false\"\n        [value]=\"value()\"\n        [currentMonth]=\"currentMonth()\"\n        [mode]=\"mode()\"\n        [selectionLevel]=\"selectionLevel()\"\n        [localeCode]=\"localeCode()\"\n        [showOutsideDays]=\"showOutsideDays()\"\n        [showWeekNumbers]=\"showWeekNumbers()\"\n        [numberOfMonths]=\"numberOfMonthsResolved()\"\n        [monthYearSelectType]=\"monthYearSelectType()\"\n        [required]=\"required()\"\n        [disabledMatchers]=\"resolvedDisabledMatchers()\"\n        [availableDays]=\"availableDays()\"\n        [unavailableDays]=\"unavailableDays()\"\n        [shouldDisableMonth]=\"shouldDisableMonth()\"\n        [shouldDisableYear]=\"shouldDisableYear()\"\n        [minYear]=\"minYear()\"\n        [maxYear]=\"maxYear()\"\n        [inputDisabled]=\"fieldDisabled()\"\n        (currentMonthChange)=\"handleCurrentMonthChange($event)\"\n        (select)=\"handleCalendarSelect()\"\n      >\n        <!--\n          Footer projection forwards into the overlay-mounted calendar.\n          Modal mode (modal-below-breakpoint) does NOT receive projected\n          footers \u2014 the modal opens via ModalService.open() with a data\n          hash, which has no projection mechanism. If footer-in-modal is\n          ever required, refactor to pass a TemplateRef through the modal's\n          data injection.\n        -->\n        <ng-content select=\"[tediCalendarFooter]\" />\n      </tedi-calendar>\n    </div>\n  </ng-template>\n}\n", styles: [".tedi-date-field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-field:not(.tedi-field-surface){flex:1}.tedi-date-field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x);width:100%}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-date-field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-date-field--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-date-field--large{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-date-field__overlay{background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}\n"], dependencies: [{ kind: "component", type: CalendarComponent, selector: "tedi-calendar", inputs: ["view", "currentMonth", "value", "mode", "selectionLevel", "localeCode", "showOutsideDays", "showWeekNumbers", "showNavigation", "bordered", "disabledMatchers", "availableDays", "unavailableDays", "dayStatus", "monthYearSelectType", "required", "numberOfMonths", "inputDisabled", "shouldDisableMonth", "shouldDisableYear", "minYear", "maxYear"], outputs: ["viewChange", "currentMonthChange", "valueChange", "select"] }, { kind: "component", type: DateInputComponent, selector: "tedi-date-input", inputs: ["inputId", "name", "ariaDescribedby", "value", "tags", "mode", "multiRow", "ellipsis", "removable", "placeholder", "disabled", "readOnly", "required", "iconActive", "iconDisabled", "useNativePicker", "nativeIsoValue", "clearable"], outputs: ["inputChange", "iconClick", "tagRemove", "clear"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, isSignal: true }, { propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: "<tedi-date-input\n  #dateInput\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n  [inputId]=\"inputId()\"\n  [name]=\"name()\"\n  [value]=\"inputText()\"\n  [ariaDescribedby]=\"describedBy.attribute()\"\n  [tags]=\"tagsForMultipleMode()\"\n  [mode]=\"mode()\"\n  [multiRow]=\"multiRow()\"\n  [ellipsis]=\"tagEllipsis()\"\n  [removable]=\"isTagRemovable() && valueEditable()\"\n  [placeholder]=\"effectivePlaceholder()\"\n  [disabled]=\"fieldDisabled()\"\n  [readOnly]=\"readOnly() || inputIsTrigger()\"\n  [required]=\"required()\"\n  [iconActive]=\"overlayOpen()\"\n  [iconDisabled]=\"!enableCalendarResolved()\"\n  [useNativePicker]=\"useNativePickerEffective()\"\n  [nativeIsoValue]=\"nativeIsoValue()\"\n  [clearable]=\"canClear()\"\n  (click)=\"handleInputClick($event)\"\n  (inputChange)=\"handleInputChange($event)\"\n  (iconClick)=\"handleIconClick()\"\n  (tagRemove)=\"handleTagRemove($event)\"\n  (clear)=\"handleClear()\"\n/>\n@if (usePopover()) {\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n    [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n    [cdkConnectedOverlayHasBackdrop]=\"false\"\n    (attach)=\"handleOverlayAttached()\"\n    (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n    (detach)=\"handleOverlayDetached()\"\n  >\n    <div\n      class=\"tedi-date-field__overlay\"\n      role=\"dialog\"\n      [attr.aria-label]=\"'date-field.calendar-dialog' | tediTranslate\"\n      cdkTrapFocus\n      (keydown)=\"handleOverlayKeydown($event)\"\n    >\n      <tedi-calendar\n        #calendar\n        [bordered]=\"false\"\n        [value]=\"value()\"\n        [currentMonth]=\"currentMonth()\"\n        [mode]=\"mode()\"\n        [selectionLevel]=\"selectionLevel()\"\n        [localeCode]=\"localeCode()\"\n        [showOutsideDays]=\"showOutsideDays()\"\n        [showWeekNumbers]=\"showWeekNumbers()\"\n        [numberOfMonths]=\"numberOfMonthsResolved()\"\n        [monthYearSelectType]=\"monthYearSelectType()\"\n        [required]=\"required()\"\n        [disabledMatchers]=\"resolvedDisabledMatchers()\"\n        [availableDays]=\"availableDays()\"\n        [unavailableDays]=\"unavailableDays()\"\n        [shouldDisableMonth]=\"shouldDisableMonth()\"\n        [shouldDisableYear]=\"shouldDisableYear()\"\n        [minYear]=\"minYear()\"\n        [maxYear]=\"maxYear()\"\n        [inputDisabled]=\"fieldDisabled()\"\n        (currentMonthChange)=\"handleCurrentMonthChange($event)\"\n        (select)=\"handleCalendarSelect()\"\n      >\n        <!--\n          Footer projection forwards into the overlay-mounted calendar.\n          Modal mode (modal-below-breakpoint) does NOT receive projected\n          footers \u2014 the modal opens via ModalService.open() with a data\n          hash, which has no projection mechanism. If footer-in-modal is\n          ever required, refactor to pass a TemplateRef through the modal's\n          data injection.\n        -->\n        <ng-content select=\"[tediCalendarFooter]\" />\n      </tedi-calendar>\n    </div>\n  </ng-template>\n}\n", styles: [".tedi-date-field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-field:not(.tedi-field-surface){flex:1}.tedi-date-field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x);width:100%}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-date-field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-date-field--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-date-field--large{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-date-field__overlay{background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}\n"], dependencies: [{ kind: "component", type: CalendarComponent, selector: "tedi-calendar", inputs: ["view", "currentMonth", "value", "mode", "selectionLevel", "localeCode", "showOutsideDays", "showWeekNumbers", "showNavigation", "bordered", "disabledMatchers", "availableDays", "unavailableDays", "dayStatus", "monthYearSelectType", "required", "numberOfMonths", "inputDisabled", "shouldDisableMonth", "shouldDisableYear", "minYear", "maxYear"], outputs: ["viewChange", "currentMonthChange", "valueChange", "select"] }, { kind: "component", type: DateInputComponent, selector: "tedi-date-input", inputs: ["inputId", "name", "ariaDescribedby", "value", "tags", "mode", "multiRow", "ellipsis", "removable", "placeholder", "disabled", "readOnly", "required", "iconActive", "iconDisabled", "useNativePicker", "nativeIsoValue", "clearable"], outputs: ["inputChange", "iconClick", "tagRemove", "clear"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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: DateFieldComponent, decorators: [{
             type: Component,
@@ -10080,7 +10093,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         "[class.tedi-field-surface--disabled]": "paintsSurface() && disabled()",
                         "[class.tedi-date-field--small]": "resolvedSize() === 'small'",
                         "[class.tedi-date-field--large]": "resolvedSize() === 'large'",
-                    }, template: "<tedi-date-input\n  #dateInput\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n  [inputId]=\"inputId()\"\n  [name]=\"name()\"\n  [value]=\"inputText()\"\n  [ariaDescribedby]=\"describedBy.attribute()\"\n  [tags]=\"tagsForMultipleMode()\"\n  [mode]=\"mode()\"\n  [multiRow]=\"multiRow()\"\n  [ellipsis]=\"tagEllipsis()\"\n  [removable]=\"isTagRemovable()\"\n  [placeholder]=\"effectivePlaceholder()\"\n  [disabled]=\"fieldDisabled()\"\n  [readOnly]=\"readOnly() || inputIsTrigger()\"\n  [required]=\"required()\"\n  [iconActive]=\"overlayOpen()\"\n  [iconDisabled]=\"!enableCalendarResolved()\"\n  [useNativePicker]=\"useNativePickerEffective()\"\n  [nativeIsoValue]=\"nativeIsoValue()\"\n  [clearable]=\"canClear()\"\n  (click)=\"handleInputClick($event)\"\n  (inputChange)=\"handleInputChange($event)\"\n  (iconClick)=\"handleIconClick()\"\n  (tagRemove)=\"handleTagRemove($event)\"\n  (clear)=\"handleClear()\"\n/>\n@if (usePopover()) {\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n    [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n    [cdkConnectedOverlayHasBackdrop]=\"false\"\n    (attach)=\"handleOverlayAttached()\"\n    (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n    (detach)=\"handleOverlayDetached()\"\n  >\n    <div\n      class=\"tedi-date-field__overlay\"\n      role=\"dialog\"\n      [attr.aria-label]=\"'date-field.calendar-dialog' | tediTranslate\"\n      cdkTrapFocus\n      (keydown)=\"handleOverlayKeydown($event)\"\n    >\n      <tedi-calendar\n        #calendar\n        [bordered]=\"false\"\n        [value]=\"value()\"\n        [currentMonth]=\"currentMonth()\"\n        [mode]=\"mode()\"\n        [selectionLevel]=\"selectionLevel()\"\n        [localeCode]=\"localeCode()\"\n        [showOutsideDays]=\"showOutsideDays()\"\n        [showWeekNumbers]=\"showWeekNumbers()\"\n        [numberOfMonths]=\"numberOfMonthsResolved()\"\n        [monthYearSelectType]=\"monthYearSelectType()\"\n        [required]=\"required()\"\n        [disabledMatchers]=\"resolvedDisabledMatchers()\"\n        [availableDays]=\"availableDays()\"\n        [unavailableDays]=\"unavailableDays()\"\n        [shouldDisableMonth]=\"shouldDisableMonth()\"\n        [shouldDisableYear]=\"shouldDisableYear()\"\n        [minYear]=\"minYear()\"\n        [maxYear]=\"maxYear()\"\n        [inputDisabled]=\"fieldDisabled()\"\n        (currentMonthChange)=\"handleCurrentMonthChange($event)\"\n        (select)=\"handleCalendarSelect()\"\n      >\n        <!--\n          Footer projection forwards into the overlay-mounted calendar.\n          Modal mode (modal-below-breakpoint) does NOT receive projected\n          footers \u2014 the modal opens via ModalService.open() with a data\n          hash, which has no projection mechanism. If footer-in-modal is\n          ever required, refactor to pass a TemplateRef through the modal's\n          data injection.\n        -->\n        <ng-content select=\"[tediCalendarFooter]\" />\n      </tedi-calendar>\n    </div>\n  </ng-template>\n}\n", styles: [".tedi-date-field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-field:not(.tedi-field-surface){flex:1}.tedi-date-field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x);width:100%}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-date-field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-date-field--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-date-field--large{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-date-field__overlay{background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}\n"] }]
+                    }, template: "<tedi-date-input\n  #dateInput\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n  [inputId]=\"inputId()\"\n  [name]=\"name()\"\n  [value]=\"inputText()\"\n  [ariaDescribedby]=\"describedBy.attribute()\"\n  [tags]=\"tagsForMultipleMode()\"\n  [mode]=\"mode()\"\n  [multiRow]=\"multiRow()\"\n  [ellipsis]=\"tagEllipsis()\"\n  [removable]=\"isTagRemovable() && valueEditable()\"\n  [placeholder]=\"effectivePlaceholder()\"\n  [disabled]=\"fieldDisabled()\"\n  [readOnly]=\"readOnly() || inputIsTrigger()\"\n  [required]=\"required()\"\n  [iconActive]=\"overlayOpen()\"\n  [iconDisabled]=\"!enableCalendarResolved()\"\n  [useNativePicker]=\"useNativePickerEffective()\"\n  [nativeIsoValue]=\"nativeIsoValue()\"\n  [clearable]=\"canClear()\"\n  (click)=\"handleInputClick($event)\"\n  (inputChange)=\"handleInputChange($event)\"\n  (iconClick)=\"handleIconClick()\"\n  (tagRemove)=\"handleTagRemove($event)\"\n  (clear)=\"handleClear()\"\n/>\n@if (usePopover()) {\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n    [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n    [cdkConnectedOverlayHasBackdrop]=\"false\"\n    (attach)=\"handleOverlayAttached()\"\n    (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n    (detach)=\"handleOverlayDetached()\"\n  >\n    <div\n      class=\"tedi-date-field__overlay\"\n      role=\"dialog\"\n      [attr.aria-label]=\"'date-field.calendar-dialog' | tediTranslate\"\n      cdkTrapFocus\n      (keydown)=\"handleOverlayKeydown($event)\"\n    >\n      <tedi-calendar\n        #calendar\n        [bordered]=\"false\"\n        [value]=\"value()\"\n        [currentMonth]=\"currentMonth()\"\n        [mode]=\"mode()\"\n        [selectionLevel]=\"selectionLevel()\"\n        [localeCode]=\"localeCode()\"\n        [showOutsideDays]=\"showOutsideDays()\"\n        [showWeekNumbers]=\"showWeekNumbers()\"\n        [numberOfMonths]=\"numberOfMonthsResolved()\"\n        [monthYearSelectType]=\"monthYearSelectType()\"\n        [required]=\"required()\"\n        [disabledMatchers]=\"resolvedDisabledMatchers()\"\n        [availableDays]=\"availableDays()\"\n        [unavailableDays]=\"unavailableDays()\"\n        [shouldDisableMonth]=\"shouldDisableMonth()\"\n        [shouldDisableYear]=\"shouldDisableYear()\"\n        [minYear]=\"minYear()\"\n        [maxYear]=\"maxYear()\"\n        [inputDisabled]=\"fieldDisabled()\"\n        (currentMonthChange)=\"handleCurrentMonthChange($event)\"\n        (select)=\"handleCalendarSelect()\"\n      >\n        <!--\n          Footer projection forwards into the overlay-mounted calendar.\n          Modal mode (modal-below-breakpoint) does NOT receive projected\n          footers \u2014 the modal opens via ModalService.open() with a data\n          hash, which has no projection mechanism. If footer-in-modal is\n          ever required, refactor to pass a TemplateRef through the modal's\n          data injection.\n        -->\n        <ng-content select=\"[tediCalendarFooter]\" />\n      </tedi-calendar>\n    </div>\n  </ng-template>\n}\n", styles: [".tedi-date-field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-field:not(.tedi-field-surface){flex:1}.tedi-date-field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x);width:100%}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-date-field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-date-field--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-date-field--large{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-date-field__overlay{background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], tagEllipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagEllipsis", required: false }] }], isTagRemovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTagRemovable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disablePast: [{ type: i0.Input, args: [{ isSignal: true, alias: "disablePast", required: false }] }], disableFuture: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableFuture", required: false }] }], shouldDisableMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableMonth", required: false }] }], shouldDisableYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableYear", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], availableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDays", required: false }] }], unavailableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableDays", required: false }] }], selectionLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLevel", required: false }] }], monthYearSelectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthYearSelectType", required: false }] }], initialMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialMonth", required: false }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], enableCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCalendar", required: false }] }], calendarTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarTrigger", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], calendar: [{ type: i0.ViewChild, args: ["calendar", { isSignal: true }] }], dateInput: [{ type: i0.ViewChild, args: ["dateInput", { isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }] } });
 
 class PopoverTriggerDirective {
@@ -16946,6 +16959,18 @@ class TediTableComponent {
     size = input("medium", ...(ngDevMode ? [{ debugName: "size" }] : []));
     /** Caption rendered above the table. */
     caption = input(undefined, ...(ngDevMode ? [{ debugName: "caption" }] : []));
+    /**
+     * Accessible name for the `<table>`. Use when no visible `caption` is
+     * rendered, so screen readers can announce the table and tell it apart from
+     * other tables on the page. Overrides `caption` as the accessible name;
+     * ignored when `ariaLabelledby` is provided.
+     */
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
+    /**
+     * ID of an external element that names the `<table>` (e.g. a heading above
+     * it). Takes precedence over `ariaLabel` and `caption`.
+     */
+    ariaLabelledby = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledby" }] : []));
     /**
      * Alternating row backgrounds (zebra striping).
      * @default false
@@ -18886,13 +18911,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 }, stickyLastColumn: { classPropertyName: "stickyLastColumn", publicName: "stickyLastColumn", 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 }, filterModalBreakpoint: { classPropertyName: "filterModalBreakpoint", publicName: "filterModalBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, filterModalFullscreen: { classPropertyName: "filterModalFullscreen", publicName: "filterModalFullscreen", isSignal: true, isRequired: false, transformFunction: null }, filterPopoverWidth: { classPropertyName: "filterPopoverWidth", publicName: "filterPopoverWidth", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", 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 }, stickyLastColumn: { classPropertyName: "stickyLastColumn", publicName: "stickyLastColumn", 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 }, filterModalBreakpoint: { classPropertyName: "filterModalBreakpoint", publicName: "filterModalBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, filterModalFullscreen: { classPropertyName: "filterModalFullscreen", publicName: "filterModalFullscreen", isSignal: true, isRequired: false, transformFunction: null }, filterPopoverWidth: { classPropertyName: "filterPopoverWidth", publicName: "filterPopoverWidth", 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 }, { propertyName: "tableElement", first: true, predicate: ["tableElement"], 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      [align]=\"top.align\"\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      [xs]=\"top.xs\"\n      [sm]=\"top.sm\"\n      [md]=\"top.md\"\n      [lg]=\"top.lg\"\n      [xl]=\"top.xl\"\n      [xxl]=\"top.xxl\"\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  [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n  [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n  [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n  [attr.style]=\"maxHeightStyle()\"\n  cdkScrollable\n  tabindex=\"0\"\n  role=\"group\"\n  [attr.aria-label]=\"scrollRegionLabel()\"\n  (scroll)=\"onHorizontalScroll()\"\n>\n  <table\n    #tableElement\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              @let headerAlign = meta?.headerAlign ?? meta?.align;\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                  (headerAlign\n                    ? ' tedi-table__cell--align-' + headerAlign\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                  controlCellClass(header.column.id) +\n                  stickyLeftClass(header.column.id) +\n                  stickyRightClass(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                [style.right.px]=\"stickyRight(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                      @if (filterUsesModal()) {\n                        <button\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)=\"openFilterModal(header.column)\"\n                        ></button>\n                      } @else {\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                            [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n                          >\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                    }\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                    controlCellClass(cell.column.id) +\n                    stickyLeftClass(cell.column.id) +\n                    stickyRightClass(cell.column.id)\n                  \"\n                  [style.left.px]=\"stickyLeft(cell.column.id)\"\n                  [style.right.px]=\"stickyRight(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=\"\n                            subTpl;\n                            context: { $implicit: row }\n                          \"\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      [align]=\"bottom.align\"\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      [xs]=\"bottom.xs\"\n      [sm]=\"bottom.sm\"\n      [md]=\"bottom.md\"\n      [lg]=\"bottom.lg\"\n      [xl]=\"bottom.xl\"\n      [xxl]=\"bottom.xxl\"\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--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align: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}.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{overflow:hidden;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__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column .tedi-table__scroll--shadow-start .tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.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-last-column .tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column .tedi-table__scroll--shadow-end .tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{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-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 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-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-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-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 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);border-bottom:0;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--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header .tedi-table__scroll--shadow-header .tedi-table__head .tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.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", "align", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle", "xs", "sm", "md", "lg", "xl", "xxl"], 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", "size", "invalid", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass", "characterLimit"] }, { 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 });
+        ], queries: [{ propertyName: "customResultsTemplateRef", first: true, predicate: TediPaginationResultsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "tableElement", first: true, predicate: ["tableElement"], 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      [align]=\"top.align\"\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      [xs]=\"top.xs\"\n      [sm]=\"top.sm\"\n      [md]=\"top.md\"\n      [lg]=\"top.lg\"\n      [xl]=\"top.xl\"\n      [xxl]=\"top.xxl\"\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  [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n  [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n  [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n  [attr.style]=\"maxHeightStyle()\"\n  cdkScrollable\n  tabindex=\"0\"\n  role=\"group\"\n  [attr.aria-label]=\"scrollRegionLabel()\"\n  (scroll)=\"onHorizontalScroll()\"\n>\n  <table\n    #tableElement\n    class=\"tedi-table__table\"\n    [attr.id]=\"id() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || 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              @let headerAlign = meta?.headerAlign ?? meta?.align;\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                  (headerAlign\n                    ? ' tedi-table__cell--align-' + headerAlign\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                  controlCellClass(header.column.id) +\n                  stickyLeftClass(header.column.id) +\n                  stickyRightClass(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                [style.right.px]=\"stickyRight(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                      @if (filterUsesModal()) {\n                        <button\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)=\"openFilterModal(header.column)\"\n                        ></button>\n                      } @else {\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                            [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n                          >\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                    }\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                    controlCellClass(cell.column.id) +\n                    stickyLeftClass(cell.column.id) +\n                    stickyRightClass(cell.column.id)\n                  \"\n                  [style.left.px]=\"stickyLeft(cell.column.id)\"\n                  [style.right.px]=\"stickyRight(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=\"\n                            subTpl;\n                            context: { $implicit: row }\n                          \"\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      [align]=\"bottom.align\"\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      [xs]=\"bottom.xs\"\n      [sm]=\"bottom.sm\"\n      [md]=\"bottom.md\"\n      [lg]=\"bottom.lg\"\n      [xl]=\"bottom.xl\"\n      [xxl]=\"bottom.xxl\"\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--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align: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}.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{overflow:hidden;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__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column .tedi-table__scroll--shadow-start .tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.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-last-column .tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column .tedi-table__scroll--shadow-end .tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{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-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 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-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-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-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 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);border-bottom:0;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--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header .tedi-table__scroll--shadow-header .tedi-table__head .tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.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", "align", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle", "xs", "sm", "md", "lg", "xl", "xxl"], 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", "size", "invalid", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass", "characterLimit"] }, { 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,
@@ -18926,8 +18951,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      [align]=\"top.align\"\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      [xs]=\"top.xs\"\n      [sm]=\"top.sm\"\n      [md]=\"top.md\"\n      [lg]=\"top.lg\"\n      [xl]=\"top.xl\"\n      [xxl]=\"top.xxl\"\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  [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n  [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n  [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n  [attr.style]=\"maxHeightStyle()\"\n  cdkScrollable\n  tabindex=\"0\"\n  role=\"group\"\n  [attr.aria-label]=\"scrollRegionLabel()\"\n  (scroll)=\"onHorizontalScroll()\"\n>\n  <table\n    #tableElement\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              @let headerAlign = meta?.headerAlign ?? meta?.align;\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                  (headerAlign\n                    ? ' tedi-table__cell--align-' + headerAlign\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                  controlCellClass(header.column.id) +\n                  stickyLeftClass(header.column.id) +\n                  stickyRightClass(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                [style.right.px]=\"stickyRight(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                      @if (filterUsesModal()) {\n                        <button\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)=\"openFilterModal(header.column)\"\n                        ></button>\n                      } @else {\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                            [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n                          >\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                    }\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                    controlCellClass(cell.column.id) +\n                    stickyLeftClass(cell.column.id) +\n                    stickyRightClass(cell.column.id)\n                  \"\n                  [style.left.px]=\"stickyLeft(cell.column.id)\"\n                  [style.right.px]=\"stickyRight(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=\"\n                            subTpl;\n                            context: { $implicit: row }\n                          \"\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      [align]=\"bottom.align\"\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      [xs]=\"bottom.xs\"\n      [sm]=\"bottom.sm\"\n      [md]=\"bottom.md\"\n      [lg]=\"bottom.lg\"\n      [xl]=\"bottom.xl\"\n      [xxl]=\"bottom.xxl\"\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--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align: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}.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{overflow:hidden;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__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column .tedi-table__scroll--shadow-start .tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.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-last-column .tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column .tedi-table__scroll--shadow-end .tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{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-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 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-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-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-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 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);border-bottom:0;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--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header .tedi-table__scroll--shadow-header .tedi-table__head .tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.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 }] }], stickyLastColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyLastColumn", 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 }] }], filterModalBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModalBreakpoint", required: false }] }], filterModalFullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModalFullscreen", required: false }] }], filterPopoverWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPopoverWidth", 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 }] }], tableElement: [{ type: i0.ViewChild, args: ["tableElement", { 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      [align]=\"top.align\"\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      [xs]=\"top.xs\"\n      [sm]=\"top.sm\"\n      [md]=\"top.md\"\n      [lg]=\"top.lg\"\n      [xl]=\"top.xl\"\n      [xxl]=\"top.xxl\"\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  [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n  [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n  [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n  [attr.style]=\"maxHeightStyle()\"\n  cdkScrollable\n  tabindex=\"0\"\n  role=\"group\"\n  [attr.aria-label]=\"scrollRegionLabel()\"\n  (scroll)=\"onHorizontalScroll()\"\n>\n  <table\n    #tableElement\n    class=\"tedi-table__table\"\n    [attr.id]=\"id() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || 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              @let headerAlign = meta?.headerAlign ?? meta?.align;\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                  (headerAlign\n                    ? ' tedi-table__cell--align-' + headerAlign\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                  controlCellClass(header.column.id) +\n                  stickyLeftClass(header.column.id) +\n                  stickyRightClass(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                [style.right.px]=\"stickyRight(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                      @if (filterUsesModal()) {\n                        <button\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)=\"openFilterModal(header.column)\"\n                        ></button>\n                      } @else {\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                            [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n                          >\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                    }\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                    controlCellClass(cell.column.id) +\n                    stickyLeftClass(cell.column.id) +\n                    stickyRightClass(cell.column.id)\n                  \"\n                  [style.left.px]=\"stickyLeft(cell.column.id)\"\n                  [style.right.px]=\"stickyRight(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=\"\n                            subTpl;\n                            context: { $implicit: row }\n                          \"\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      [align]=\"bottom.align\"\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      [xs]=\"bottom.xs\"\n      [sm]=\"bottom.sm\"\n      [md]=\"bottom.md\"\n      [lg]=\"bottom.lg\"\n      [xl]=\"bottom.xl\"\n      [xxl]=\"bottom.xxl\"\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--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align: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}.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{overflow:hidden;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__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column .tedi-table__scroll--shadow-start .tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.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-last-column .tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column .tedi-table__scroll--shadow-end .tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{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-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 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-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-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-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 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);border-bottom:0;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--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header .tedi-table__scroll--shadow-header .tedi-table__head .tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", 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 }] }], stickyLastColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyLastColumn", 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 }] }], filterModalBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModalBreakpoint", required: false }] }], filterModalFullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModalFullscreen", required: false }] }], filterPopoverWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPopoverWidth", 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 }] }], tableElement: [{ type: i0.ViewChild, args: ["tableElement", { 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 });