@tedi-design-system/angular 6.5.0-rc.5 → 6.5.0-rc.6

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

@@ -6,7 +6,7 @@ import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgTemplateOutlet, Common
 import * as i1$3 from '@angular/cdk/overlay';
 import { Overlay, OverlayConfig, CdkConnectedOverlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import * as i1$4 from '@angular/forms';
+import * as i1$5 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NgControl, FormsModule } from '@angular/forms';
 import * as i1$1 from 'ngx-float-ui';
 import { NgxFloatUiContentComponent, NgxFloatUiModule } from 'ngx-float-ui';
@@ -15,9 +15,10 @@ import * as i3 from '@angular/cdk/listbox';
 import { CdkListbox, CdkListboxModule } from '@angular/cdk/listbox';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Dialog } from '@angular/cdk/dialog';
+import * as i1$4 from '@angular/cdk/scrolling';
+import { CdkScrollable, CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
 import { CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 import { createAngularTable, getPaginationRowModel, getExpandedRowModel, getSortedRowModel, getFilteredRowModel, getCoreRowModel, FlexRenderDirective } from '@tanstack/angular-table';
-import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { RouterLink } from '@angular/router';
 
@@ -855,6 +856,62 @@ const translationsMap = {
         en: "Drag row",
         ru: "Перетащить строку",
     },
+    "table.reorder.pickup": {
+        description: "Live region message when a column is picked up for keyboard reordering",
+        components: ["Table"],
+        et: (column) => `Veerg ${column} on valitud. Kasuta vasakut/paremat noolt liigutamiseks ja Tühikut või Sisestust kinnitamiseks. Vajuta Escape tühistamiseks.`,
+        en: (column) => `Column ${column} picked up. Use Left/Right arrow to move, Space or Enter to drop. Press Escape to cancel.`,
+        ru: (column) => `Столбец ${column} взят. Используйте стрелки влево/вправо для перемещения, Пробел или Enter для подтверждения. Нажмите Escape для отмены.`,
+    },
+    "table.reorder.move": {
+        description: "Live region message while a picked-up column is moved between positions",
+        components: ["Table"],
+        et: (column, position) => `Veerg ${column} positsioonil ${position}.`,
+        en: (column, position) => `Column ${column} at position ${position}.`,
+        ru: (column, position) => `Столбец ${column} на позиции ${position}.`,
+    },
+    "table.reorder.drop": {
+        description: "Live region message when a column is dropped",
+        components: ["Table"],
+        et: (column, position) => `Veerg ${column} paigutatud positsioonile ${position}.`,
+        en: (column, position) => `Column ${column} moved to position ${position}.`,
+        ru: (column, position) => `Столбец ${column} перемещен на позицию ${position}.`,
+    },
+    "table.reorder.cancel": {
+        description: "Live region message when column reorder is cancelled",
+        components: ["Table"],
+        et: "Veeru ümberjärjestamine tühistatud.",
+        en: "Column reordering cancelled.",
+        ru: "Перестановка столбцов отменена.",
+    },
+    "table.row-reorder.pickup": {
+        description: "Live region message when a row is picked up for keyboard reordering",
+        components: ["Table"],
+        et: (position) => `Rida ${position} on valitud. Kasuta üles-/allanoolt liigutamiseks ja Tühikut või Sisestust kinnitamiseks. Vajuta Escape tühistamiseks.`,
+        en: (position) => `Row ${position} picked up. Use Up/Down arrow to move, Space or Enter to drop. Press Escape to cancel.`,
+        ru: (position) => `Строка ${position} взята. Используйте стрелки вверх/вниз для перемещения, Пробел или Enter для подтверждения. Нажмите Escape для отмены.`,
+    },
+    "table.row-reorder.move": {
+        description: "Live region message while a picked-up row is moved between positions",
+        components: ["Table"],
+        et: (position) => `Rida liigutatud positsioonile ${position}.`,
+        en: (position) => `Row moved to position ${position}.`,
+        ru: (position) => `Строка перемещена на позицию ${position}.`,
+    },
+    "table.row-reorder.drop": {
+        description: "Live region message when a row is dropped",
+        components: ["Table"],
+        et: (position) => `Rida paigutatud positsioonile ${position}.`,
+        en: (position) => `Row dropped at position ${position}.`,
+        ru: (position) => `Строка размещена на позиции ${position}.`,
+    },
+    "table.row-reorder.cancel": {
+        description: "Live region message when row reorder is cancelled",
+        components: ["Table"],
+        et: "Ridade ümberjärjestamine tühistatud.",
+        en: "Row reordering cancelled.",
+        ru: "Перестановка строк отменена.",
+    },
     "tooltip.icon-trigger": {
         description: "Label we use for icons that are tooltip triggers",
         components: ["TooltipTrigger"],
@@ -5336,6 +5393,13 @@ class SelectComponent {
      * When null, dropdown width matches the host element.
      */
     dropdownWidthRef = input();
+    /**
+     * Which edge of the trigger the dropdown is anchored to. Use `"end"` when the
+     * select sits against the right edge of its container so the panel expands
+     * inward instead of overflowing.
+     * @default "start"
+     */
+    dropdownAlign = input("start");
     /**
      * Configuration for the feedback text displayed below the select.
      */
@@ -5462,22 +5526,15 @@ class SelectComponent {
      */
     cleared = output();
     SpecialOptionControls = SpecialOptionControls;
-    dropdownPositions = [
-        // Open below, expand downward
-        {
-            originX: "start",
-            originY: "bottom",
-            overlayX: "start",
-            overlayY: "top",
-        },
-        // Fallback: open above, expand upward
-        {
-            originX: "start",
-            originY: "top",
-            overlayX: "start",
-            overlayY: "bottom",
-        },
-    ];
+    dropdownPositions = computed(() => {
+        const x = this.dropdownAlign();
+        return [
+            // Open below, expand downward
+            { originX: x, originY: "bottom", overlayX: x, overlayY: "top" },
+            // Fallback: open above, expand upward
+            { originX: x, originY: "top", overlayX: x, overlayY: "bottom" },
+        ];
+    });
     listboxId = computed(() => this.inputId() + "-listbox");
     labelId = computed(() => this.inputId() + "-label");
     isOpen = signal(false);
@@ -6093,13 +6150,13 @@ class SelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SelectComponent, isStandalone: true, selector: "tedi-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidthRef: { classPropertyName: "dropdownWidthRef", publicName: "dropdownWidthRef", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, allowMultiple: { classPropertyName: "allowMultiple", publicName: "allowMultiple", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectableGroups: { classPropertyName: "selectableGroups", publicName: "selectableGroups", isSignal: true, isRequired: false, transformFunction: null }, isTagRemovable: { classPropertyName: "isTagRemovable", publicName: "isTagRemovable", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, disabledKey: { classPropertyName: "disabledKey", publicName: "disabledKey", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, maxDropdownHeight: { classPropertyName: "maxDropdownHeight", publicName: "maxDropdownHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownType: { classPropertyName: "dropdownType", publicName: "dropdownType", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnSelect: { classPropertyName: "clearSearchOnSelect", publicName: "clearSearchOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", searchChange: "searchChange", opened: "opened", closed: "closed", cleared: "cleared" }, host: { listeners: { "window:resize": "onWindowResize()", "document:click": "onDocumentClick($event)" }, properties: { "class.tedi-select--multiselect": "allowMultiple()" }, classAttribute: "tedi-select" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SelectComponent, isStandalone: true, selector: "tedi-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidthRef: { classPropertyName: "dropdownWidthRef", publicName: "dropdownWidthRef", isSignal: true, isRequired: false, transformFunction: null }, dropdownAlign: { classPropertyName: "dropdownAlign", publicName: "dropdownAlign", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, allowMultiple: { classPropertyName: "allowMultiple", publicName: "allowMultiple", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectableGroups: { classPropertyName: "selectableGroups", publicName: "selectableGroups", isSignal: true, isRequired: false, transformFunction: null }, isTagRemovable: { classPropertyName: "isTagRemovable", publicName: "isTagRemovable", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, disabledKey: { classPropertyName: "disabledKey", publicName: "disabledKey", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, maxDropdownHeight: { classPropertyName: "maxDropdownHeight", publicName: "maxDropdownHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownType: { classPropertyName: "dropdownType", publicName: "dropdownType", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnSelect: { classPropertyName: "clearSearchOnSelect", publicName: "clearSearchOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", searchChange: "searchChange", opened: "opened", closed: "closed", cleared: "cleared" }, host: { listeners: { "window:resize": "onWindowResize()", "document:click": "onDocumentClick($event)" }, properties: { "class.tedi-select--multiselect": "allowMultiple()" }, classAttribute: "tedi-select" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: SelectOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: SelectValueTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "cdkListboxRef", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "multiselectContainerRef", first: true, predicate: ["multiselectContainer"], descendants: true, isSignal: true }, { propertyName: "tagRefs", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label\n    [id]=\"labelId()\"\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [size]=\"size()\"\n    (click)=\"onTriggerClick()\"\n  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"searchable() ? null : inputId()\"\n  class=\"tedi-select__trigger tedi-input\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  [class.tedi-input--small]=\"size() === 'small'\"\n  [class.tedi-input--error]=\"state() === 'error'\"\n  [class.tedi-input--valid]=\"state() === 'valid'\"\n  [class.tedi-select__trigger--searchable]=\"searchable()\"\n  [class.tedi-select__trigger--search-focused]=\"searchFocused()\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  [attr.role]=\"searchable() ? null : 'combobox'\"\n  [attr.aria-haspopup]=\"searchable() ? null : 'listbox'\"\n  [attr.aria-expanded]=\"searchable() ? null : isOpen()\"\n  [attr.aria-controls]=\"searchable() ? null : listboxId()\"\n  [attr.aria-labelledby]=\"!searchable() && label() ? labelId() : null\"\n  [tabindex]=\"searchable() || disabled() ? -1 : 0\"\n  (click)=\"onTriggerClick()\"\n  (keydown.enter)=\"onTriggerEnter()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  @if (searchable()) {\n    <div class=\"tedi-select__search-wrapper\">\n      @if (showSingleSelectedValue()) {\n        <span class=\"tedi-select__selected-value\">\n          @if (valueTemplate(); as tpl) {\n            @if (selectedOptions()[0]; as option) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"getValueContext(option)\"\n              />\n            }\n          } @else {\n            {{ selectedLabels().join(\", \") }}\n          }\n        </span>\n      }\n      @if (allowMultiple() && selectedValues().length) {\n        <ng-container\n          [ngTemplateOutlet]=\"multiselectTags\"\n          [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n        />\n      } @else {\n        <input\n          #searchInput\n          [id]=\"inputId()\"\n          type=\"text\"\n          class=\"tedi-select__search-input\"\n          [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n          [placeholder]=\"showSingleSelectedValue() ? '' : placeholder()\"\n          [value]=\"searchTerm()\"\n          [disabled]=\"disabled()\"\n          (input)=\"onSearchInput($event)\"\n          (focus)=\"onSearchFocus()\"\n          (blur)=\"onSearchBlur()\"\n          (keydown)=\"onSearchKeydown($event)\"\n          autocomplete=\"off\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-controls]=\"listboxId()\"\n          [attr.aria-labelledby]=\"label() ? labelId() : null\"\n        />\n      }\n    </div>\n  } @else {\n    <span class=\"tedi-select__label\">\n      @if (selectedValues().length) {\n        @if (allowMultiple()) {\n          <ng-container\n            [ngTemplateOutlet]=\"multiselectTags\"\n            [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n          />\n        } @else {\n          @if (valueTemplate(); as tpl) {\n            @if (selectedOptions()[0]; as option) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"getValueContext(option)\"\n              />\n            }\n          } @else {\n            {{ selectedLabels().join(\", \") }}\n          }\n        }\n      } @else {\n        <span class=\"tedi-select__label--placeholder\">\n          {{ placeholder() }}\n        </span>\n      }\n    </span>\n  }\n\n  @if (clearable() && selectedValues().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'clear' | tediTranslate\"\n      (click)=\"clear($event)\"\n      (keydown.enter)=\"clear($event)\"\n      (keydown.space)=\"clear($event)\"\n      [attr.aria-describedby]=\"label() ? labelId() : null\"\n    ></button>\n  }\n\n  <button\n    class=\"tedi-select__arrow\"\n    type=\"button\"\n    tabindex=\"-1\"\n    (click)=\"onArrowClick($event)\"\n  >\n    <tedi-icon name=\"arrow_drop_down\" />\n  </button>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template #multiselectTags>\n  <div\n    class=\"tedi-select__multiselect-container\"\n    [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n    #multiselectContainer\n  >\n    @if (multiRow()) {\n      @for (value of selectedValues(); track value) {\n        <tedi-tag\n          [closable]=\"isTagRemovable()\"\n          (closed)=\"deselect($event, value)\"\n        >\n          {{ getLabel(value) }}\n        </tedi-tag>\n      }\n    } @else {\n      @for (value of selectedValues(); track value; let i = $index) {\n        @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n          <tedi-tag\n            #tagElement\n            [closable]=\"isTagRemovable()\"\n            (closed)=\"deselect($event, value)\"\n          >\n            {{ getLabel(value) }}\n          </tedi-tag>\n        }\n      }\n      @if (hiddenTagsCount() > 0) {\n        <tedi-tag>+{{ hiddenTagsCount() }}</tedi-tag>\n      }\n    }\n    @if (searchable()) {\n      <input\n        #searchInput\n        [id]=\"inputId()\"\n        type=\"text\"\n        class=\"tedi-select__search-input\"\n        [value]=\"searchTerm()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onSearchInput($event)\"\n        (focus)=\"onSearchFocus()\"\n        (blur)=\"onSearchBlur()\"\n        (keydown)=\"onSearchKeydown($event)\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"listboxId()\"\n        [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      />\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n  (detach)=\"toggleIsOpen(true)\"\n>\n  <div\n    class=\"tedi-select__dropdown\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n    [style.max-height]=\"dropdownMaxHeight() ? dropdownMaxHeight() + 'px' : null\"\n  >\n    <ul\n      [id]=\"listboxId()\"\n      class=\"tedi-select__options\"\n      [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n      [class.tedi-select__options--swatch-grid]=\"dropdownType() === 'grid'\"\n      cdkListbox\n      [cdkListboxMultiple]=\"allowMultiple()\"\n      [cdkListboxValue]=\"visibleSelectedValues()\"\n      [cdkListboxNavigatesDisabledOptions]=\"false\"\n      [cdkListboxUseActiveDescendant]=\"true\"\n      (cdkListboxValueChange)=\"handleValueChange($event)\"\n      (keydown.tab)=\"toggleIsOpen(true)\"\n      (keydown.escape)=\"toggleIsOpen(true)\"\n      #listbox=\"cdkListbox\"\n    >\n      @if (filteredOptions().length) {\n        @if (allowMultiple() && showSelectAll()) {\n          <li\n            class=\"tedi-dropdown-item\"\n            [cdkOption]=\"SpecialOptionControls.SELECT_ALL\"\n          >\n            <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"allOptionsSelected()\" [indeterminate]=\"someOptionsSelected()\">\n              <tedi-dropdown-item-value-label>{{ \"select.select-all\" | tediTranslate }}</tedi-dropdown-item-value-label>\n            </tedi-dropdown-item-value>\n          </li>\n        }\n\n        @for (group of optionGroups(); track group.label) {\n          @if (group.label.length > 0) {\n            @if (allowMultiple() && selectableGroups()) {\n              <li\n                class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n                [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n              >\n                <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"isGroupSelected(group.label)\" [indeterminate]=\"isGroupIndeterminate(group.label)\">\n                  <tedi-dropdown-item-value-label>{{ group.label }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </li>\n            } @else {\n              <li class=\"tedi-select__group-name\" role=\"presentation\">\n                <span tedi-text color=\"tertiary\">\n                  {{ group.label }}\n                </span>\n              </li>\n            }\n          }\n\n          @for (option of group.options; track option.value; let i = $index) {\n            <li\n              class=\"tedi-dropdown-item\"\n              [class.tedi-dropdown-item--selected]=\"!allowMultiple() && isOptionSelected(option.value)\"\n              [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n              [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n              [cdkOption]=\"option.value\"\n              [cdkOptionDisabled]=\"option.disabled\"\n            >\n              @if (optionTemplate(); as tpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tpl.template\"\n                  [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n                />\n              } @else {\n                <tedi-dropdown-item-value\n                  [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{ option.label }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              }\n            </li>\n          }\n        }\n      } @else {\n        <li class=\"tedi-dropdown-item tedi-select__no-options\">\n          {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n        </li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-input{--_border-color: var(--form-input-border-default);--_color: var(--form-input-text-filled);--_background-color: var(--form-input-background-default);--_placeholder-color: var(--form-input-text-placeholder);--_border-radius: var(--form-field-radius);--_font-size: var(--body-regular-size);--_line-height: var(--body-regular-line-height);--_padding-y: var(--form-field-padding-y-md-default);--_padding-x: var(--form-field-padding-x-md-default);--_search-input-min-width: 1px;min-height:var(--form-field-height);padding:calc(var(--_padding-y) - var(--tedi-borders-01)) var(--_padding-x);margin-bottom:0;font-family:var(--family-default);font-size:var(--_font-size);line-height:var(--_line-height);color:var(--_color);background-color:var(--_background-color);border:var(--tedi-borders-01) solid var(--_border-color);border-radius:var(--_border-radius)}.tedi-input:hover{--_border-color: var(--form-input-border-hover)}.tedi-input:focus,.tedi-input:active,.tedi-input.tedi-select__trigger--search-focused{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input--disabled{--_color: var(--form-input-text-disabled);--_border-color: var(--form-input-border-disabled);--_background-color: var(--form-input-background-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(.tedi-input--disabled):focus,.tedi-input--error:not(.tedi-input--disabled):active,.tedi-input--error:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(.tedi-input--disabled):focus,.tedi-input--valid:not(.tedi-input--disabled):active,.tedi-input--valid:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_padding-y: var(--form-field-padding-y-sm);min-height:var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select .tedi-feedback-text{margin-top:var(--form-field-outer-spacing)}.tedi-select__trigger{display:flex;justify-content:space-between;width:100%;cursor:pointer}.tedi-select__label{flex-grow:1;overflow:hidden;text-align:left;cursor:default}.tedi-select__label--placeholder{color:var(--_placeholder-color);pointer-events:none}.tedi-select__clear{flex-grow:0;padding:0;margin:0;color:var(--button-close-text-default);cursor:pointer;background:none;border:none}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;flex-shrink:0;padding:0;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;cursor:default;background:none;border:none}.tedi-select__arrow:focus-visible{outline:none}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-border-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-select__trigger--searchable{cursor:text}.tedi-select__search-wrapper{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--_line-height);overflow:hidden}.tedi-select__selected-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.tedi-select__search-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:transparent;border:none}.tedi-select__search-input:focus{outline:none}.tedi-select__search-input::placeholder{color:var(--form-input-text-placeholder)}.tedi-select__search-input--hidden{color:transparent;caret-color:var(--form-input-text-filled)}.tedi-select__search-input:not(.tedi-select__search-input--hidden){position:relative;flex:1;width:auto;min-width:var(--_search-input-min-width);height:auto}.tedi-select__options{flex:1;min-height:0;padding:0;margin:0;overflow-y:auto;outline:none}.tedi-select__options .tedi-dropdown-item{outline:none}.tedi-select__options .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-select__options .tedi-dropdown-item[aria-selected=true],.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-select__options .tedi-dropdown-item[aria-selected=true] .tedi-icon,.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected .tedi-icon{color:inherit}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04);font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height);text-transform:uppercase;letter-spacing:0}.tedi-select__group-name--selectable{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);text-transform:none;letter-spacing:inherit}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap;overflow:hidden}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__no-options{color:var(--general-text-tertiary);cursor:default}.tedi-select__no-options:hover{color:var(--general-text-tertiary);background:var(--dropdown-item-default-background)}.tedi-select__dropdown:has(.tedi-select__options--swatch-grid){width:fit-content}.tedi-select__options--swatch-grid{--tedi-swatch-size: 24px;--tedi-swatch-gap: var(--layout-grid-gutters-04);--tedi-swatch-columns: 11;display:grid;grid-template-columns:repeat(auto-fit,var(--tedi-swatch-size));gap:var(--tedi-swatch-gap);max-width:calc(var(--tedi-swatch-columns) * (var(--tedi-swatch-size) + var(--tedi-swatch-gap)));padding:var(--dropdown-body-padding-y) var(--dropdown-body-padding-x)}.tedi-select__options--swatch-grid .tedi-dropdown-item{display:flex;align-items:center;justify-content:center;width:var(--tedi-swatch-size);height:var(--tedi-swatch-size);min-height:auto;padding:var(--layout-grid-gutters-02);color:inherit;background:transparent;border-radius:var(--card-radius-rounded)}.tedi-select__options--swatch-grid .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline-offset:0}.tedi-select__options--swatch-grid .tedi-dropdown-item[aria-selected=true],.tedi-select__options--swatch-grid .tedi-dropdown-item.tedi-dropdown-item--selected{color:inherit;background:transparent;border:var(--tedi-borders-02) solid var(--card-border-selected)}.tedi-select__options--swatch-grid .tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled){background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.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$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type"], outputs: ["closed"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: SelectOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: SelectValueTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "cdkListboxRef", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "multiselectContainerRef", first: true, predicate: ["multiselectContainer"], descendants: true, isSignal: true }, { propertyName: "tagRefs", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label\n    [id]=\"labelId()\"\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [size]=\"size()\"\n    (click)=\"onTriggerClick()\"\n  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"searchable() ? null : inputId()\"\n  class=\"tedi-select__trigger tedi-input\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  [class.tedi-input--small]=\"size() === 'small'\"\n  [class.tedi-input--error]=\"state() === 'error'\"\n  [class.tedi-input--valid]=\"state() === 'valid'\"\n  [class.tedi-select__trigger--searchable]=\"searchable()\"\n  [class.tedi-select__trigger--search-focused]=\"searchFocused()\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  [attr.role]=\"searchable() ? null : 'combobox'\"\n  [attr.aria-haspopup]=\"searchable() ? null : 'listbox'\"\n  [attr.aria-expanded]=\"searchable() ? null : isOpen()\"\n  [attr.aria-controls]=\"searchable() ? null : listboxId()\"\n  [attr.aria-labelledby]=\"!searchable() && label() ? labelId() : null\"\n  [tabindex]=\"searchable() || disabled() ? -1 : 0\"\n  (click)=\"onTriggerClick()\"\n  (keydown.enter)=\"onTriggerEnter()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  @if (searchable()) {\n    <div class=\"tedi-select__search-wrapper\">\n      @if (showSingleSelectedValue()) {\n        <span class=\"tedi-select__selected-value\">\n          @if (valueTemplate(); as tpl) {\n            @if (selectedOptions()[0]; as option) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"getValueContext(option)\"\n              />\n            }\n          } @else {\n            {{ selectedLabels().join(\", \") }}\n          }\n        </span>\n      }\n      @if (allowMultiple() && selectedValues().length) {\n        <ng-container\n          [ngTemplateOutlet]=\"multiselectTags\"\n          [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n        />\n      } @else {\n        <input\n          #searchInput\n          [id]=\"inputId()\"\n          type=\"text\"\n          class=\"tedi-select__search-input\"\n          [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n          [placeholder]=\"showSingleSelectedValue() ? '' : placeholder()\"\n          [value]=\"searchTerm()\"\n          [disabled]=\"disabled()\"\n          (input)=\"onSearchInput($event)\"\n          (focus)=\"onSearchFocus()\"\n          (blur)=\"onSearchBlur()\"\n          (keydown)=\"onSearchKeydown($event)\"\n          autocomplete=\"off\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-controls]=\"listboxId()\"\n          [attr.aria-labelledby]=\"label() ? labelId() : null\"\n        />\n      }\n    </div>\n  } @else {\n    <span class=\"tedi-select__label\">\n      @if (selectedValues().length) {\n        @if (allowMultiple()) {\n          <ng-container\n            [ngTemplateOutlet]=\"multiselectTags\"\n            [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n          />\n        } @else {\n          @if (valueTemplate(); as tpl) {\n            @if (selectedOptions()[0]; as option) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"getValueContext(option)\"\n              />\n            }\n          } @else {\n            {{ selectedLabels().join(\", \") }}\n          }\n        }\n      } @else {\n        <span class=\"tedi-select__label--placeholder\">\n          {{ placeholder() }}\n        </span>\n      }\n    </span>\n  }\n\n  @if (clearable() && selectedValues().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'clear' | tediTranslate\"\n      (click)=\"clear($event)\"\n      (keydown.enter)=\"clear($event)\"\n      (keydown.space)=\"clear($event)\"\n      [attr.aria-describedby]=\"label() ? labelId() : null\"\n    ></button>\n  }\n\n  <button\n    class=\"tedi-select__arrow\"\n    type=\"button\"\n    tabindex=\"-1\"\n    (click)=\"onArrowClick($event)\"\n  >\n    <tedi-icon name=\"arrow_drop_down\" />\n  </button>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template #multiselectTags>\n  <div\n    class=\"tedi-select__multiselect-container\"\n    [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n    #multiselectContainer\n  >\n    @if (multiRow()) {\n      @for (value of selectedValues(); track value) {\n        <tedi-tag\n          [closable]=\"isTagRemovable()\"\n          (closed)=\"deselect($event, value)\"\n        >\n          {{ getLabel(value) }}\n        </tedi-tag>\n      }\n    } @else {\n      @for (value of selectedValues(); track value; let i = $index) {\n        @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n          <tedi-tag\n            #tagElement\n            [closable]=\"isTagRemovable()\"\n            (closed)=\"deselect($event, value)\"\n          >\n            {{ getLabel(value) }}\n          </tedi-tag>\n        }\n      }\n      @if (hiddenTagsCount() > 0) {\n        <tedi-tag>+{{ hiddenTagsCount() }}</tedi-tag>\n      }\n    }\n    @if (searchable()) {\n      <input\n        #searchInput\n        [id]=\"inputId()\"\n        type=\"text\"\n        class=\"tedi-select__search-input\"\n        [value]=\"searchTerm()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onSearchInput($event)\"\n        (focus)=\"onSearchFocus()\"\n        (blur)=\"onSearchBlur()\"\n        (keydown)=\"onSearchKeydown($event)\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"listboxId()\"\n        [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      />\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"dropdownPositions()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n  (detach)=\"toggleIsOpen(true)\"\n>\n  <div\n    class=\"tedi-select__dropdown\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n    [style.max-height]=\"dropdownMaxHeight() ? dropdownMaxHeight() + 'px' : null\"\n  >\n    <ul\n      [id]=\"listboxId()\"\n      class=\"tedi-select__options\"\n      [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n      [class.tedi-select__options--swatch-grid]=\"dropdownType() === 'grid'\"\n      cdkListbox\n      [cdkListboxMultiple]=\"allowMultiple()\"\n      [cdkListboxValue]=\"visibleSelectedValues()\"\n      [cdkListboxNavigatesDisabledOptions]=\"false\"\n      [cdkListboxUseActiveDescendant]=\"true\"\n      (cdkListboxValueChange)=\"handleValueChange($event)\"\n      (keydown.tab)=\"toggleIsOpen(true)\"\n      (keydown.escape)=\"toggleIsOpen(true)\"\n      #listbox=\"cdkListbox\"\n    >\n      @if (filteredOptions().length) {\n        @if (allowMultiple() && showSelectAll()) {\n          <li\n            class=\"tedi-dropdown-item\"\n            [cdkOption]=\"SpecialOptionControls.SELECT_ALL\"\n          >\n            <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"allOptionsSelected()\" [indeterminate]=\"someOptionsSelected()\">\n              <tedi-dropdown-item-value-label>{{ \"select.select-all\" | tediTranslate }}</tedi-dropdown-item-value-label>\n            </tedi-dropdown-item-value>\n          </li>\n        }\n\n        @for (group of optionGroups(); track group.label) {\n          @if (group.label.length > 0) {\n            @if (allowMultiple() && selectableGroups()) {\n              <li\n                class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n                [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n              >\n                <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"isGroupSelected(group.label)\" [indeterminate]=\"isGroupIndeterminate(group.label)\">\n                  <tedi-dropdown-item-value-label>{{ group.label }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </li>\n            } @else {\n              <li class=\"tedi-select__group-name\" role=\"presentation\">\n                <span tedi-text color=\"tertiary\">\n                  {{ group.label }}\n                </span>\n              </li>\n            }\n          }\n\n          @for (option of group.options; track option.value; let i = $index) {\n            <li\n              class=\"tedi-dropdown-item\"\n              [class.tedi-dropdown-item--selected]=\"!allowMultiple() && isOptionSelected(option.value)\"\n              [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n              [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n              [cdkOption]=\"option.value\"\n              [cdkOptionDisabled]=\"option.disabled\"\n            >\n              @if (optionTemplate(); as tpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tpl.template\"\n                  [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n                />\n              } @else {\n                <tedi-dropdown-item-value\n                  [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{ option.label }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              }\n            </li>\n          }\n        }\n      } @else {\n        <li class=\"tedi-dropdown-item tedi-select__no-options\">\n          {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n        </li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-input{--_border-color: var(--form-input-border-default);--_color: var(--form-input-text-filled);--_background-color: var(--form-input-background-default);--_placeholder-color: var(--form-input-text-placeholder);--_border-radius: var(--form-field-radius);--_font-size: var(--body-regular-size);--_line-height: var(--body-regular-line-height);--_padding-y: var(--form-field-padding-y-md-default);--_padding-x: var(--form-field-padding-x-md-default);--_search-input-min-width: 1px;min-height:var(--form-field-height);padding:calc(var(--_padding-y) - var(--tedi-borders-01)) var(--_padding-x);margin-bottom:0;font-family:var(--family-default);font-size:var(--_font-size);line-height:var(--_line-height);color:var(--_color);background-color:var(--_background-color);border:var(--tedi-borders-01) solid var(--_border-color);border-radius:var(--_border-radius)}.tedi-input:hover{--_border-color: var(--form-input-border-hover)}.tedi-input:focus,.tedi-input:active,.tedi-input.tedi-select__trigger--search-focused{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input--disabled{--_color: var(--form-input-text-disabled);--_border-color: var(--form-input-border-disabled);--_background-color: var(--form-input-background-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(.tedi-input--disabled):focus,.tedi-input--error:not(.tedi-input--disabled):active,.tedi-input--error:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(.tedi-input--disabled):focus,.tedi-input--valid:not(.tedi-input--disabled):active,.tedi-input--valid:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_padding-y: var(--form-field-padding-y-sm);min-height:var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select .tedi-feedback-text{margin-top:var(--form-field-outer-spacing)}.tedi-select__trigger{display:flex;justify-content:space-between;width:100%;cursor:pointer}.tedi-select__label{flex-grow:1;overflow:hidden;text-align:left;cursor:default}.tedi-select__label--placeholder{color:var(--_placeholder-color);pointer-events:none}.tedi-select__clear{flex-grow:0;padding:0;margin:0;color:var(--button-close-text-default);cursor:pointer;background:none;border:none}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;flex-shrink:0;padding:0;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;cursor:default;background:none;border:none}.tedi-select__arrow:focus-visible{outline:none}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-border-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-select__trigger--searchable{cursor:text}.tedi-select__search-wrapper{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--_line-height);overflow:hidden}.tedi-select__selected-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.tedi-select__search-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:transparent;border:none}.tedi-select__search-input:focus{outline:none}.tedi-select__search-input::placeholder{color:var(--form-input-text-placeholder)}.tedi-select__search-input--hidden{color:transparent;caret-color:var(--form-input-text-filled)}.tedi-select__search-input:not(.tedi-select__search-input--hidden){position:relative;flex:1;width:auto;min-width:var(--_search-input-min-width);height:auto}.tedi-select__options{flex:1;min-height:0;padding:0;margin:0;overflow-y:auto;outline:none}.tedi-select__options .tedi-dropdown-item{outline:none}.tedi-select__options .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-select__options .tedi-dropdown-item[aria-selected=true],.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-select__options .tedi-dropdown-item[aria-selected=true] .tedi-icon,.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected .tedi-icon{color:inherit}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04);font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height);text-transform:uppercase;letter-spacing:0}.tedi-select__group-name--selectable{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);text-transform:none;letter-spacing:inherit}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap;overflow:hidden}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__no-options{color:var(--general-text-tertiary);cursor:default}.tedi-select__no-options:hover{color:var(--general-text-tertiary);background:var(--dropdown-item-default-background)}.tedi-select__dropdown:has(.tedi-select__options--swatch-grid){width:fit-content}.tedi-select__options--swatch-grid{--tedi-swatch-size: 24px;--tedi-swatch-gap: var(--layout-grid-gutters-04);--tedi-swatch-columns: 11;display:grid;grid-template-columns:repeat(auto-fit,var(--tedi-swatch-size));gap:var(--tedi-swatch-gap);max-width:calc(var(--tedi-swatch-columns) * (var(--tedi-swatch-size) + var(--tedi-swatch-gap)));padding:var(--dropdown-body-padding-y) var(--dropdown-body-padding-x)}.tedi-select__options--swatch-grid .tedi-dropdown-item{display:flex;align-items:center;justify-content:center;width:var(--tedi-swatch-size);height:var(--tedi-swatch-size);min-height:auto;padding:var(--layout-grid-gutters-02);color:inherit;background:transparent;border-radius:var(--card-radius-rounded)}.tedi-select__options--swatch-grid .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline-offset:0}.tedi-select__options--swatch-grid .tedi-dropdown-item[aria-selected=true],.tedi-select__options--swatch-grid .tedi-dropdown-item.tedi-dropdown-item--selected{color:inherit;background:transparent;border:var(--tedi-borders-02) solid var(--card-border-selected)}.tedi-select__options--swatch-grid .tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled){background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.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$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type"], outputs: ["closed"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -6125,7 +6182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true,
                         },
-                    ], template: "@if (label()) {\n  <label\n    [id]=\"labelId()\"\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [size]=\"size()\"\n    (click)=\"onTriggerClick()\"\n  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"searchable() ? null : inputId()\"\n  class=\"tedi-select__trigger tedi-input\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  [class.tedi-input--small]=\"size() === 'small'\"\n  [class.tedi-input--error]=\"state() === 'error'\"\n  [class.tedi-input--valid]=\"state() === 'valid'\"\n  [class.tedi-select__trigger--searchable]=\"searchable()\"\n  [class.tedi-select__trigger--search-focused]=\"searchFocused()\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  [attr.role]=\"searchable() ? null : 'combobox'\"\n  [attr.aria-haspopup]=\"searchable() ? null : 'listbox'\"\n  [attr.aria-expanded]=\"searchable() ? null : isOpen()\"\n  [attr.aria-controls]=\"searchable() ? null : listboxId()\"\n  [attr.aria-labelledby]=\"!searchable() && label() ? labelId() : null\"\n  [tabindex]=\"searchable() || disabled() ? -1 : 0\"\n  (click)=\"onTriggerClick()\"\n  (keydown.enter)=\"onTriggerEnter()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  @if (searchable()) {\n    <div class=\"tedi-select__search-wrapper\">\n      @if (showSingleSelectedValue()) {\n        <span class=\"tedi-select__selected-value\">\n          @if (valueTemplate(); as tpl) {\n            @if (selectedOptions()[0]; as option) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"getValueContext(option)\"\n              />\n            }\n          } @else {\n            {{ selectedLabels().join(\", \") }}\n          }\n        </span>\n      }\n      @if (allowMultiple() && selectedValues().length) {\n        <ng-container\n          [ngTemplateOutlet]=\"multiselectTags\"\n          [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n        />\n      } @else {\n        <input\n          #searchInput\n          [id]=\"inputId()\"\n          type=\"text\"\n          class=\"tedi-select__search-input\"\n          [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n          [placeholder]=\"showSingleSelectedValue() ? '' : placeholder()\"\n          [value]=\"searchTerm()\"\n          [disabled]=\"disabled()\"\n          (input)=\"onSearchInput($event)\"\n          (focus)=\"onSearchFocus()\"\n          (blur)=\"onSearchBlur()\"\n          (keydown)=\"onSearchKeydown($event)\"\n          autocomplete=\"off\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-controls]=\"listboxId()\"\n          [attr.aria-labelledby]=\"label() ? labelId() : null\"\n        />\n      }\n    </div>\n  } @else {\n    <span class=\"tedi-select__label\">\n      @if (selectedValues().length) {\n        @if (allowMultiple()) {\n          <ng-container\n            [ngTemplateOutlet]=\"multiselectTags\"\n            [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n          />\n        } @else {\n          @if (valueTemplate(); as tpl) {\n            @if (selectedOptions()[0]; as option) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"getValueContext(option)\"\n              />\n            }\n          } @else {\n            {{ selectedLabels().join(\", \") }}\n          }\n        }\n      } @else {\n        <span class=\"tedi-select__label--placeholder\">\n          {{ placeholder() }}\n        </span>\n      }\n    </span>\n  }\n\n  @if (clearable() && selectedValues().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'clear' | tediTranslate\"\n      (click)=\"clear($event)\"\n      (keydown.enter)=\"clear($event)\"\n      (keydown.space)=\"clear($event)\"\n      [attr.aria-describedby]=\"label() ? labelId() : null\"\n    ></button>\n  }\n\n  <button\n    class=\"tedi-select__arrow\"\n    type=\"button\"\n    tabindex=\"-1\"\n    (click)=\"onArrowClick($event)\"\n  >\n    <tedi-icon name=\"arrow_drop_down\" />\n  </button>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template #multiselectTags>\n  <div\n    class=\"tedi-select__multiselect-container\"\n    [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n    #multiselectContainer\n  >\n    @if (multiRow()) {\n      @for (value of selectedValues(); track value) {\n        <tedi-tag\n          [closable]=\"isTagRemovable()\"\n          (closed)=\"deselect($event, value)\"\n        >\n          {{ getLabel(value) }}\n        </tedi-tag>\n      }\n    } @else {\n      @for (value of selectedValues(); track value; let i = $index) {\n        @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n          <tedi-tag\n            #tagElement\n            [closable]=\"isTagRemovable()\"\n            (closed)=\"deselect($event, value)\"\n          >\n            {{ getLabel(value) }}\n          </tedi-tag>\n        }\n      }\n      @if (hiddenTagsCount() > 0) {\n        <tedi-tag>+{{ hiddenTagsCount() }}</tedi-tag>\n      }\n    }\n    @if (searchable()) {\n      <input\n        #searchInput\n        [id]=\"inputId()\"\n        type=\"text\"\n        class=\"tedi-select__search-input\"\n        [value]=\"searchTerm()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onSearchInput($event)\"\n        (focus)=\"onSearchFocus()\"\n        (blur)=\"onSearchBlur()\"\n        (keydown)=\"onSearchKeydown($event)\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"listboxId()\"\n        [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      />\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n  (detach)=\"toggleIsOpen(true)\"\n>\n  <div\n    class=\"tedi-select__dropdown\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n    [style.max-height]=\"dropdownMaxHeight() ? dropdownMaxHeight() + 'px' : null\"\n  >\n    <ul\n      [id]=\"listboxId()\"\n      class=\"tedi-select__options\"\n      [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n      [class.tedi-select__options--swatch-grid]=\"dropdownType() === 'grid'\"\n      cdkListbox\n      [cdkListboxMultiple]=\"allowMultiple()\"\n      [cdkListboxValue]=\"visibleSelectedValues()\"\n      [cdkListboxNavigatesDisabledOptions]=\"false\"\n      [cdkListboxUseActiveDescendant]=\"true\"\n      (cdkListboxValueChange)=\"handleValueChange($event)\"\n      (keydown.tab)=\"toggleIsOpen(true)\"\n      (keydown.escape)=\"toggleIsOpen(true)\"\n      #listbox=\"cdkListbox\"\n    >\n      @if (filteredOptions().length) {\n        @if (allowMultiple() && showSelectAll()) {\n          <li\n            class=\"tedi-dropdown-item\"\n            [cdkOption]=\"SpecialOptionControls.SELECT_ALL\"\n          >\n            <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"allOptionsSelected()\" [indeterminate]=\"someOptionsSelected()\">\n              <tedi-dropdown-item-value-label>{{ \"select.select-all\" | tediTranslate }}</tedi-dropdown-item-value-label>\n            </tedi-dropdown-item-value>\n          </li>\n        }\n\n        @for (group of optionGroups(); track group.label) {\n          @if (group.label.length > 0) {\n            @if (allowMultiple() && selectableGroups()) {\n              <li\n                class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n                [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n              >\n                <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"isGroupSelected(group.label)\" [indeterminate]=\"isGroupIndeterminate(group.label)\">\n                  <tedi-dropdown-item-value-label>{{ group.label }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </li>\n            } @else {\n              <li class=\"tedi-select__group-name\" role=\"presentation\">\n                <span tedi-text color=\"tertiary\">\n                  {{ group.label }}\n                </span>\n              </li>\n            }\n          }\n\n          @for (option of group.options; track option.value; let i = $index) {\n            <li\n              class=\"tedi-dropdown-item\"\n              [class.tedi-dropdown-item--selected]=\"!allowMultiple() && isOptionSelected(option.value)\"\n              [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n              [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n              [cdkOption]=\"option.value\"\n              [cdkOptionDisabled]=\"option.disabled\"\n            >\n              @if (optionTemplate(); as tpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tpl.template\"\n                  [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n                />\n              } @else {\n                <tedi-dropdown-item-value\n                  [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{ option.label }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              }\n            </li>\n          }\n        }\n      } @else {\n        <li class=\"tedi-dropdown-item tedi-select__no-options\">\n          {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n        </li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-input{--_border-color: var(--form-input-border-default);--_color: var(--form-input-text-filled);--_background-color: var(--form-input-background-default);--_placeholder-color: var(--form-input-text-placeholder);--_border-radius: var(--form-field-radius);--_font-size: var(--body-regular-size);--_line-height: var(--body-regular-line-height);--_padding-y: var(--form-field-padding-y-md-default);--_padding-x: var(--form-field-padding-x-md-default);--_search-input-min-width: 1px;min-height:var(--form-field-height);padding:calc(var(--_padding-y) - var(--tedi-borders-01)) var(--_padding-x);margin-bottom:0;font-family:var(--family-default);font-size:var(--_font-size);line-height:var(--_line-height);color:var(--_color);background-color:var(--_background-color);border:var(--tedi-borders-01) solid var(--_border-color);border-radius:var(--_border-radius)}.tedi-input:hover{--_border-color: var(--form-input-border-hover)}.tedi-input:focus,.tedi-input:active,.tedi-input.tedi-select__trigger--search-focused{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input--disabled{--_color: var(--form-input-text-disabled);--_border-color: var(--form-input-border-disabled);--_background-color: var(--form-input-background-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(.tedi-input--disabled):focus,.tedi-input--error:not(.tedi-input--disabled):active,.tedi-input--error:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(.tedi-input--disabled):focus,.tedi-input--valid:not(.tedi-input--disabled):active,.tedi-input--valid:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_padding-y: var(--form-field-padding-y-sm);min-height:var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select .tedi-feedback-text{margin-top:var(--form-field-outer-spacing)}.tedi-select__trigger{display:flex;justify-content:space-between;width:100%;cursor:pointer}.tedi-select__label{flex-grow:1;overflow:hidden;text-align:left;cursor:default}.tedi-select__label--placeholder{color:var(--_placeholder-color);pointer-events:none}.tedi-select__clear{flex-grow:0;padding:0;margin:0;color:var(--button-close-text-default);cursor:pointer;background:none;border:none}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;flex-shrink:0;padding:0;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;cursor:default;background:none;border:none}.tedi-select__arrow:focus-visible{outline:none}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-border-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-select__trigger--searchable{cursor:text}.tedi-select__search-wrapper{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--_line-height);overflow:hidden}.tedi-select__selected-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.tedi-select__search-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:transparent;border:none}.tedi-select__search-input:focus{outline:none}.tedi-select__search-input::placeholder{color:var(--form-input-text-placeholder)}.tedi-select__search-input--hidden{color:transparent;caret-color:var(--form-input-text-filled)}.tedi-select__search-input:not(.tedi-select__search-input--hidden){position:relative;flex:1;width:auto;min-width:var(--_search-input-min-width);height:auto}.tedi-select__options{flex:1;min-height:0;padding:0;margin:0;overflow-y:auto;outline:none}.tedi-select__options .tedi-dropdown-item{outline:none}.tedi-select__options .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-select__options .tedi-dropdown-item[aria-selected=true],.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-select__options .tedi-dropdown-item[aria-selected=true] .tedi-icon,.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected .tedi-icon{color:inherit}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04);font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height);text-transform:uppercase;letter-spacing:0}.tedi-select__group-name--selectable{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);text-transform:none;letter-spacing:inherit}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap;overflow:hidden}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__no-options{color:var(--general-text-tertiary);cursor:default}.tedi-select__no-options:hover{color:var(--general-text-tertiary);background:var(--dropdown-item-default-background)}.tedi-select__dropdown:has(.tedi-select__options--swatch-grid){width:fit-content}.tedi-select__options--swatch-grid{--tedi-swatch-size: 24px;--tedi-swatch-gap: var(--layout-grid-gutters-04);--tedi-swatch-columns: 11;display:grid;grid-template-columns:repeat(auto-fit,var(--tedi-swatch-size));gap:var(--tedi-swatch-gap);max-width:calc(var(--tedi-swatch-columns) * (var(--tedi-swatch-size) + var(--tedi-swatch-gap)));padding:var(--dropdown-body-padding-y) var(--dropdown-body-padding-x)}.tedi-select__options--swatch-grid .tedi-dropdown-item{display:flex;align-items:center;justify-content:center;width:var(--tedi-swatch-size);height:var(--tedi-swatch-size);min-height:auto;padding:var(--layout-grid-gutters-02);color:inherit;background:transparent;border-radius:var(--card-radius-rounded)}.tedi-select__options--swatch-grid .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline-offset:0}.tedi-select__options--swatch-grid .tedi-dropdown-item[aria-selected=true],.tedi-select__options--swatch-grid .tedi-dropdown-item.tedi-dropdown-item--selected{color:inherit;background:transparent;border:var(--tedi-borders-02) solid var(--card-border-selected)}.tedi-select__options--swatch-grid .tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled){background:transparent}\n"] }]
+                    ], template: "@if (label()) {\n  <label\n    [id]=\"labelId()\"\n    tedi-label\n    [for]=\"inputId()\"\n    [required]=\"required()\"\n    [size]=\"size()\"\n    (click)=\"onTriggerClick()\"\n  >\n    {{ label() }}\n  </label>\n}\n<div\n  [id]=\"searchable() ? null : inputId()\"\n  class=\"tedi-select__trigger tedi-input\"\n  [class.tedi-input--disabled]=\"disabled()\"\n  [class.tedi-input--small]=\"size() === 'small'\"\n  [class.tedi-input--error]=\"state() === 'error'\"\n  [class.tedi-input--valid]=\"state() === 'valid'\"\n  [class.tedi-select__trigger--searchable]=\"searchable()\"\n  [class.tedi-select__trigger--search-focused]=\"searchFocused()\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  [attr.role]=\"searchable() ? null : 'combobox'\"\n  [attr.aria-haspopup]=\"searchable() ? null : 'listbox'\"\n  [attr.aria-expanded]=\"searchable() ? null : isOpen()\"\n  [attr.aria-controls]=\"searchable() ? null : listboxId()\"\n  [attr.aria-labelledby]=\"!searchable() && label() ? labelId() : null\"\n  [tabindex]=\"searchable() || disabled() ? -1 : 0\"\n  (click)=\"onTriggerClick()\"\n  (keydown.enter)=\"onTriggerEnter()\"\n  (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n  (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n  (blur)=\"onTouched()\"\n>\n  @if (searchable()) {\n    <div class=\"tedi-select__search-wrapper\">\n      @if (showSingleSelectedValue()) {\n        <span class=\"tedi-select__selected-value\">\n          @if (valueTemplate(); as tpl) {\n            @if (selectedOptions()[0]; as option) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"getValueContext(option)\"\n              />\n            }\n          } @else {\n            {{ selectedLabels().join(\", \") }}\n          }\n        </span>\n      }\n      @if (allowMultiple() && selectedValues().length) {\n        <ng-container\n          [ngTemplateOutlet]=\"multiselectTags\"\n          [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n        />\n      } @else {\n        <input\n          #searchInput\n          [id]=\"inputId()\"\n          type=\"text\"\n          class=\"tedi-select__search-input\"\n          [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n          [placeholder]=\"showSingleSelectedValue() ? '' : placeholder()\"\n          [value]=\"searchTerm()\"\n          [disabled]=\"disabled()\"\n          (input)=\"onSearchInput($event)\"\n          (focus)=\"onSearchFocus()\"\n          (blur)=\"onSearchBlur()\"\n          (keydown)=\"onSearchKeydown($event)\"\n          autocomplete=\"off\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-controls]=\"listboxId()\"\n          [attr.aria-labelledby]=\"label() ? labelId() : null\"\n        />\n      }\n    </div>\n  } @else {\n    <span class=\"tedi-select__label\">\n      @if (selectedValues().length) {\n        @if (allowMultiple()) {\n          <ng-container\n            [ngTemplateOutlet]=\"multiselectTags\"\n            [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n          />\n        } @else {\n          @if (valueTemplate(); as tpl) {\n            @if (selectedOptions()[0]; as option) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"getValueContext(option)\"\n              />\n            }\n          } @else {\n            {{ selectedLabels().join(\", \") }}\n          }\n        }\n      } @else {\n        <span class=\"tedi-select__label--placeholder\">\n          {{ placeholder() }}\n        </span>\n      }\n    </span>\n  }\n\n  @if (clearable() && selectedValues().length) {\n    <button\n      class=\"tedi-select__clear\"\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'clear' | tediTranslate\"\n      (click)=\"clear($event)\"\n      (keydown.enter)=\"clear($event)\"\n      (keydown.space)=\"clear($event)\"\n      [attr.aria-describedby]=\"label() ? labelId() : null\"\n    ></button>\n  }\n\n  <button\n    class=\"tedi-select__arrow\"\n    type=\"button\"\n    tabindex=\"-1\"\n    (click)=\"onArrowClick($event)\"\n  >\n    <tedi-icon name=\"arrow_drop_down\" />\n  </button>\n</div>\n@if (feedbackText(); as feedback) {\n  <tedi-feedback-text\n    [text]=\"feedback.text\"\n    [type]=\"feedback.type\"\n    [position]=\"feedback.position\"\n  />\n}\n\n<ng-template #multiselectTags>\n  <div\n    class=\"tedi-select__multiselect-container\"\n    [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n    #multiselectContainer\n  >\n    @if (multiRow()) {\n      @for (value of selectedValues(); track value) {\n        <tedi-tag\n          [closable]=\"isTagRemovable()\"\n          (closed)=\"deselect($event, value)\"\n        >\n          {{ getLabel(value) }}\n        </tedi-tag>\n      }\n    } @else {\n      @for (value of selectedValues(); track value; let i = $index) {\n        @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n          <tedi-tag\n            #tagElement\n            [closable]=\"isTagRemovable()\"\n            (closed)=\"deselect($event, value)\"\n          >\n            {{ getLabel(value) }}\n          </tedi-tag>\n        }\n      }\n      @if (hiddenTagsCount() > 0) {\n        <tedi-tag>+{{ hiddenTagsCount() }}</tedi-tag>\n      }\n    }\n    @if (searchable()) {\n      <input\n        #searchInput\n        [id]=\"inputId()\"\n        type=\"text\"\n        class=\"tedi-select__search-input\"\n        [value]=\"searchTerm()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onSearchInput($event)\"\n        (focus)=\"onSearchFocus()\"\n        (blur)=\"onSearchBlur()\"\n        (keydown)=\"onSearchKeydown($event)\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"listboxId()\"\n        [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      />\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"dropdownPositions()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n  (detach)=\"toggleIsOpen(true)\"\n>\n  <div\n    class=\"tedi-select__dropdown\"\n    [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n    [style.max-height]=\"dropdownMaxHeight() ? dropdownMaxHeight() + 'px' : null\"\n  >\n    <ul\n      [id]=\"listboxId()\"\n      class=\"tedi-select__options\"\n      [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n      [class.tedi-select__options--swatch-grid]=\"dropdownType() === 'grid'\"\n      cdkListbox\n      [cdkListboxMultiple]=\"allowMultiple()\"\n      [cdkListboxValue]=\"visibleSelectedValues()\"\n      [cdkListboxNavigatesDisabledOptions]=\"false\"\n      [cdkListboxUseActiveDescendant]=\"true\"\n      (cdkListboxValueChange)=\"handleValueChange($event)\"\n      (keydown.tab)=\"toggleIsOpen(true)\"\n      (keydown.escape)=\"toggleIsOpen(true)\"\n      #listbox=\"cdkListbox\"\n    >\n      @if (filteredOptions().length) {\n        @if (allowMultiple() && showSelectAll()) {\n          <li\n            class=\"tedi-dropdown-item\"\n            [cdkOption]=\"SpecialOptionControls.SELECT_ALL\"\n          >\n            <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"allOptionsSelected()\" [indeterminate]=\"someOptionsSelected()\">\n              <tedi-dropdown-item-value-label>{{ \"select.select-all\" | tediTranslate }}</tedi-dropdown-item-value-label>\n            </tedi-dropdown-item-value>\n          </li>\n        }\n\n        @for (group of optionGroups(); track group.label) {\n          @if (group.label.length > 0) {\n            @if (allowMultiple() && selectableGroups()) {\n              <li\n                class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n                [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n              >\n                <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"isGroupSelected(group.label)\" [indeterminate]=\"isGroupIndeterminate(group.label)\">\n                  <tedi-dropdown-item-value-label>{{ group.label }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              </li>\n            } @else {\n              <li class=\"tedi-select__group-name\" role=\"presentation\">\n                <span tedi-text color=\"tertiary\">\n                  {{ group.label }}\n                </span>\n              </li>\n            }\n          }\n\n          @for (option of group.options; track option.value; let i = $index) {\n            <li\n              class=\"tedi-dropdown-item\"\n              [class.tedi-dropdown-item--selected]=\"!allowMultiple() && isOptionSelected(option.value)\"\n              [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n              [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n              [cdkOption]=\"option.value\"\n              [cdkOptionDisabled]=\"option.disabled\"\n            >\n              @if (optionTemplate(); as tpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tpl.template\"\n                  [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n                />\n              } @else {\n                <tedi-dropdown-item-value\n                  [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\n                  [selected]=\"isOptionSelected(option.value)\"\n                  [disabled]=\"!!option.disabled\"\n                >\n                  <tedi-dropdown-item-value-label>{{ option.label }}</tedi-dropdown-item-value-label>\n                </tedi-dropdown-item-value>\n              }\n            </li>\n          }\n        }\n      } @else {\n        <li class=\"tedi-dropdown-item tedi-select__no-options\">\n          {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n        </li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-input{--_border-color: var(--form-input-border-default);--_color: var(--form-input-text-filled);--_background-color: var(--form-input-background-default);--_placeholder-color: var(--form-input-text-placeholder);--_border-radius: var(--form-field-radius);--_font-size: var(--body-regular-size);--_line-height: var(--body-regular-line-height);--_padding-y: var(--form-field-padding-y-md-default);--_padding-x: var(--form-field-padding-x-md-default);--_search-input-min-width: 1px;min-height:var(--form-field-height);padding:calc(var(--_padding-y) - var(--tedi-borders-01)) var(--_padding-x);margin-bottom:0;font-family:var(--family-default);font-size:var(--_font-size);line-height:var(--_line-height);color:var(--_color);background-color:var(--_background-color);border:var(--tedi-borders-01) solid var(--_border-color);border-radius:var(--_border-radius)}.tedi-input:hover{--_border-color: var(--form-input-border-hover)}.tedi-input:focus,.tedi-input:active,.tedi-input.tedi-select__trigger--search-focused{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input--disabled{--_color: var(--form-input-text-disabled);--_border-color: var(--form-input-border-disabled);--_background-color: var(--form-input-background-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(.tedi-input--disabled):focus,.tedi-input--error:not(.tedi-input--disabled):active,.tedi-input--error:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(.tedi-input--disabled):focus,.tedi-input--valid:not(.tedi-input--disabled):active,.tedi-input--valid:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_padding-y: var(--form-field-padding-y-sm);min-height:var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select .tedi-feedback-text{margin-top:var(--form-field-outer-spacing)}.tedi-select__trigger{display:flex;justify-content:space-between;width:100%;cursor:pointer}.tedi-select__label{flex-grow:1;overflow:hidden;text-align:left;cursor:default}.tedi-select__label--placeholder{color:var(--_placeholder-color);pointer-events:none}.tedi-select__clear{flex-grow:0;padding:0;margin:0;color:var(--button-close-text-default);cursor:pointer;background:none;border:none}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{flex-grow:0;flex-shrink:0;padding:0;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;cursor:default;background:none;border:none}.tedi-select__arrow:focus-visible{outline:none}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-border-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-select__trigger--searchable{cursor:text}.tedi-select__search-wrapper{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--_line-height);overflow:hidden}.tedi-select__selected-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.tedi-select__search-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:transparent;border:none}.tedi-select__search-input:focus{outline:none}.tedi-select__search-input::placeholder{color:var(--form-input-text-placeholder)}.tedi-select__search-input--hidden{color:transparent;caret-color:var(--form-input-text-filled)}.tedi-select__search-input:not(.tedi-select__search-input--hidden){position:relative;flex:1;width:auto;min-width:var(--_search-input-min-width);height:auto}.tedi-select__options{flex:1;min-height:0;padding:0;margin:0;overflow-y:auto;outline:none}.tedi-select__options .tedi-dropdown-item{outline:none}.tedi-select__options .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-select__options .tedi-dropdown-item[aria-selected=true],.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-select__options .tedi-dropdown-item[aria-selected=true] .tedi-icon,.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected .tedi-icon{color:inherit}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04);font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height);text-transform:uppercase;letter-spacing:0}.tedi-select__group-name--selectable{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);text-transform:none;letter-spacing:inherit}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap;overflow:hidden}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__no-options{color:var(--general-text-tertiary);cursor:default}.tedi-select__no-options:hover{color:var(--general-text-tertiary);background:var(--dropdown-item-default-background)}.tedi-select__dropdown:has(.tedi-select__options--swatch-grid){width:fit-content}.tedi-select__options--swatch-grid{--tedi-swatch-size: 24px;--tedi-swatch-gap: var(--layout-grid-gutters-04);--tedi-swatch-columns: 11;display:grid;grid-template-columns:repeat(auto-fit,var(--tedi-swatch-size));gap:var(--tedi-swatch-gap);max-width:calc(var(--tedi-swatch-columns) * (var(--tedi-swatch-size) + var(--tedi-swatch-gap)));padding:var(--dropdown-body-padding-y) var(--dropdown-body-padding-x)}.tedi-select__options--swatch-grid .tedi-dropdown-item{display:flex;align-items:center;justify-content:center;width:var(--tedi-swatch-size);height:var(--tedi-swatch-size);min-height:auto;padding:var(--layout-grid-gutters-02);color:inherit;background:transparent;border-radius:var(--card-radius-rounded)}.tedi-select__options--swatch-grid .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline-offset:0}.tedi-select__options--swatch-grid .tedi-dropdown-item[aria-selected=true],.tedi-select__options--swatch-grid .tedi-dropdown-item.tedi-dropdown-item--selected{color:inherit;background:transparent;border:var(--tedi-borders-02) solid var(--card-border-selected)}.tedi-select__options--swatch-grid .tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled){background:transparent}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onWindowResize: [{
                 type: HostListener,
                 args: ["window:resize"]
@@ -7248,11 +7305,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class ModalContentComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ModalContentComponent, isStandalone: true, selector: "tedi-modal-content", host: { classAttribute: "tedi-modal-content" }, ngImport: i0, template: "<ng-content />\n", styles: ["h1,.h1,.tedi-h1,.text-h1,.tedi-text--h1{font-size:var(--heading-h1-size);font-weight:var(--heading-h1-weight);line-height:var(--heading-h1-line-height)}h2,.h2,.tedi-h2,.text-h2,.tedi-text--h2{font-size:var(--heading-h2-size);font-weight:var(--heading-h2-weight);line-height:var(--heading-h2-line-height)}h3,.h3,.tedi-h3,.text-h3,.tedi-text--h3{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}h4,.h4,.tedi-h4,.text-h4,.tedi-text--h4{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}h5,.h5,.tedi-h5,.text-h5,.tedi-text--h5{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}h6,.h6,.tedi-h6,.text-h6,.tedi-text--h6{font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);line-height:var(--heading-h6-line-height)}.tedi-text--h1{font-size:var(--heading-h1-size);font-weight:var(--heading-h1-weight);line-height:var(--heading-h1-line-height)}.tedi-text--h2{font-size:var(--heading-h2-size);font-weight:var(--heading-h2-weight);line-height:var(--heading-h2-line-height)}.tedi-text--h3{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}.tedi-text--h4{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}.tedi-text--h5{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}.tedi-text--h6{font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);line-height:var(--heading-h6-line-height)}.tedi-text--default{font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--general-text-primary)}.tedi-text--small{font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height)}.text-subtitle{font-size:var(--heading-subtitle-regular-size);font-weight:var(--heading-subtitle-regular-weight);line-height:var(--heading-subtitle-regular-line-height);text-transform:uppercase}.text-subtitle.text-small{font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height)}label{line-height:var(--body-regular-line-height);color:var(--general-text-secondary)}.text-normal{font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--general-text-primary)}small,.text-small{font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height)}.text-extra-small{font-size:var(--body-extra-small-size);font-weight:var(--body-extra-small-weight);line-height:var(--body-extra-small-line-height)}.tedi-text--default,.tedi-text--primary{color:var(--general-text-primary)}.tedi-text--secondary{color:var(--general-text-secondary)}.tedi-text--tertiary{color:var(--general-text-tertiary)}.tedi-text--white{color:var(--general-text-white)}.tedi-text--disabled{color:var(--general-text-disabled)}.tedi-text--brand{color:var(--general-text-brand)}.tedi-text--success{color:var(--general-status-success-text)}.tedi-text--warning{color:var(--general-status-warning-text)}.tedi-text--danger{color:var(--general-status-danger-text)}.tedi-text--info{color:var(--general-status-info-text)}.tedi-text--neutral{color:var(--general-status-neutral-text)}.text-nowrap{white-space:nowrap}.text-break-all{word-break:break-all}.text-break-word{overflow-wrap:break-word}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.text-capitalize-first:first-letter{text-transform:capitalize}.text-break-spaces{white-space:break-spaces}.text-inline-block{display:inline-block}.text-inline{display:inline}b,strong,.text-bold{font-weight:700}.text-thin{font-weight:300}i,.text-italic{font-style:italic}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-line-normal{line-height:normal}.text-line-condensed{line-height:1}.text-default{color:var(--general-text-primary)}.text-primary{color:var(--general-text-brand)}@media print{.text-primary{filter:grayscale(1)}}.text-muted{color:var(--general-text-secondary)}.text-subtle{color:var(--general-text-tertiary)}.text-disabled{color:var(--general-text-disabled)}.text-inverted{color:var(--general-text-white)}.text-positive{color:var(--general-status-success-text)}@media print{.text-positive{filter:grayscale(1)}}.text-important{color:var(--general-status-danger-text)}@media print{.text-important{filter:grayscale(1)}}.text-warning{color:var(--general-status-warning-text)}@media print{.text-warning{filter:grayscale(1)}}.tedi-modal{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;position:fixed;inset:0;z-index:var(--z-index-modal);display:none}.tedi-modal--open{display:block}.tedi-modal--default{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y);--_tedi-modal-body-padding: var(--modal-body-padding);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y);--_tedi-modal-footer-gap: var(--button-gutter-x)}.tedi-modal--default .tedi-modal-header__head h1,.tedi-modal--default .tedi-modal-header__head h2,.tedi-modal--default .tedi-modal-header__head h3,.tedi-modal--default .tedi-modal-header__head h4,.tedi-modal--default .tedi-modal-header__head h5,.tedi-modal--default .tedi-modal-header__head h6{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}.tedi-modal--small{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x-sm);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y-sm);--_tedi-modal-body-padding: var(--modal-body-padding-sm);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x-sm);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y-sm);--_tedi-modal-footer-gap: var(--button-gutter-x-sm)}.tedi-modal--small .tedi-modal-header__head h1,.tedi-modal--small .tedi-modal-header__head h2,.tedi-modal--small .tedi-modal-header__head h3,.tedi-modal--small .tedi-modal-header__head h4,.tedi-modal--small .tedi-modal-header__head h5,.tedi-modal--small .tedi-modal-header__head h6{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}.tedi-modal--xs .tedi-modal__dialog{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal--sm .tedi-modal__dialog{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal--md .tedi-modal__dialog{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal--lg .tedi-modal__dialog{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal--xl .tedi-modal__dialog{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:var(--_tedi-modal-max-height);transform:translate(-50%,-50%)}.tedi-modal--center.tedi-modal--top .tedi-modal__dialog{top:var(--modal-top-margin);transform:translate(-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-left .2s ease-out}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-right .2s ease-out}.tedi-modal--service{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column}.tedi-modal__dialog{position:fixed;max-width:var(--_tedi-modal-max-width);display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal__backdrop{position:fixed;inset:0;background:var(--general-surface-overlay)}.tedi-modal .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.cdk-overlay-container{z-index:var(--z-index-modal)}.tedi-modal-backdrop{background:var(--general-surface-overlay)}.tedi-modal-dialog{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;width:100%;max-width:var(--_tedi-modal-max-width)}.tedi-modal-dialog--default{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y);--_tedi-modal-body-padding: var(--modal-body-padding);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y);--_tedi-modal-footer-gap: var(--button-gutter-x)}.tedi-modal-dialog--default .tedi-modal-header__head h1,.tedi-modal-dialog--default .tedi-modal-header__head h2,.tedi-modal-dialog--default .tedi-modal-header__head h3,.tedi-modal-dialog--default .tedi-modal-header__head h4,.tedi-modal-dialog--default .tedi-modal-header__head h5,.tedi-modal-dialog--default .tedi-modal-header__head h6{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}.tedi-modal-dialog--small{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x-sm);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y-sm);--_tedi-modal-body-padding: var(--modal-body-padding-sm);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x-sm);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y-sm);--_tedi-modal-footer-gap: var(--button-gutter-x-sm)}.tedi-modal-dialog--small .tedi-modal-header__head h1,.tedi-modal-dialog--small .tedi-modal-header__head h2,.tedi-modal-dialog--small .tedi-modal-header__head h3,.tedi-modal-dialog--small .tedi-modal-header__head h4,.tedi-modal-dialog--small .tedi-modal-header__head h5,.tedi-modal-dialog--small .tedi-modal-header__head h6{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}.tedi-modal-dialog--xs{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal-dialog--sm{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal-dialog--md{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal-dialog--lg{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal-dialog--xl{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal-dialog--center{max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--left,.tedi-modal-dialog--right{min-height:100dvh}.tedi-modal-dialog--left cdk-dialog-container,.tedi-modal-dialog--right cdk-dialog-container{min-height:100dvh}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{min-height:100dvh}.tedi-modal-dialog--left{animation:tedi-modal-slide-left .2s ease-out}.tedi-modal-dialog--right{animation:tedi-modal-slide-right .2s ease-out}.tedi-modal-dialog--center cdk-dialog-container{display:flex;flex-direction:column;max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--center .tedi-modal{max-height:var(--_tedi-modal-max-height);overflow:hidden}.tedi-modal-dialog .tedi-modal{display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{border-radius:0}.tedi-modal-dialog--scroll-page{--_tedi-modal-max-height: none}.tedi-modal-dialog--scroll-page cdk-dialog-container{max-height:none}.tedi-modal-dialog--scroll-page .tedi-modal{max-height:none;overflow:visible}.tedi-modal-dialog--scroll-page .tedi-modal-content{overflow-y:visible}.tedi-modal-dialog--fullscreen{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen cdk-dialog-container,.tedi-modal-dialog--fullscreen .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen .tedi-modal{border-radius:0}@media (max-width: 35.98rem){.tedi-modal-dialog--fullscreen-sm{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-sm cdk-dialog-container,.tedi-modal-dialog--fullscreen-sm .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-sm .tedi-modal{border-radius:0}}@media (max-width: 47.98rem){.tedi-modal-dialog--fullscreen-md{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-md cdk-dialog-container,.tedi-modal-dialog--fullscreen-md .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-md .tedi-modal{border-radius:0}}@media (max-width: 61.98rem){.tedi-modal-dialog--fullscreen-lg{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-lg cdk-dialog-container,.tedi-modal-dialog--fullscreen-lg .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-lg .tedi-modal{border-radius:0}}@media (max-width: 74.98rem){.tedi-modal-dialog--fullscreen-xl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xl .tedi-modal{border-radius:0}}@media (max-width: 87.48rem){.tedi-modal-dialog--fullscreen-xxl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xxl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl .tedi-modal{border-radius:0}}.tedi-modal-dialog .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal-dialog .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal-dialog .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal-dialog .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal-dialog .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal-dialog .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}@keyframes tedi-modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes tedi-modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ModalContentComponent, isStandalone: true, selector: "tedi-modal-content", host: { classAttribute: "tedi-modal-content" }, hostDirectives: [{ directive: i1$4.CdkScrollable }], ngImport: i0, template: "<ng-content />\n", styles: ["h1,.h1,.tedi-h1,.text-h1,.tedi-text--h1{font-size:var(--heading-h1-size);font-weight:var(--heading-h1-weight);line-height:var(--heading-h1-line-height)}h2,.h2,.tedi-h2,.text-h2,.tedi-text--h2{font-size:var(--heading-h2-size);font-weight:var(--heading-h2-weight);line-height:var(--heading-h2-line-height)}h3,.h3,.tedi-h3,.text-h3,.tedi-text--h3{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}h4,.h4,.tedi-h4,.text-h4,.tedi-text--h4{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}h5,.h5,.tedi-h5,.text-h5,.tedi-text--h5{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}h6,.h6,.tedi-h6,.text-h6,.tedi-text--h6{font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);line-height:var(--heading-h6-line-height)}.tedi-text--h1{font-size:var(--heading-h1-size);font-weight:var(--heading-h1-weight);line-height:var(--heading-h1-line-height)}.tedi-text--h2{font-size:var(--heading-h2-size);font-weight:var(--heading-h2-weight);line-height:var(--heading-h2-line-height)}.tedi-text--h3{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}.tedi-text--h4{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}.tedi-text--h5{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}.tedi-text--h6{font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);line-height:var(--heading-h6-line-height)}.tedi-text--default{font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--general-text-primary)}.tedi-text--small{font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height)}.text-subtitle{font-size:var(--heading-subtitle-regular-size);font-weight:var(--heading-subtitle-regular-weight);line-height:var(--heading-subtitle-regular-line-height);text-transform:uppercase}.text-subtitle.text-small{font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height)}label{line-height:var(--body-regular-line-height);color:var(--general-text-secondary)}.text-normal{font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--general-text-primary)}small,.text-small{font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height)}.text-extra-small{font-size:var(--body-extra-small-size);font-weight:var(--body-extra-small-weight);line-height:var(--body-extra-small-line-height)}.tedi-text--default,.tedi-text--primary{color:var(--general-text-primary)}.tedi-text--secondary{color:var(--general-text-secondary)}.tedi-text--tertiary{color:var(--general-text-tertiary)}.tedi-text--white{color:var(--general-text-white)}.tedi-text--disabled{color:var(--general-text-disabled)}.tedi-text--brand{color:var(--general-text-brand)}.tedi-text--success{color:var(--general-status-success-text)}.tedi-text--warning{color:var(--general-status-warning-text)}.tedi-text--danger{color:var(--general-status-danger-text)}.tedi-text--info{color:var(--general-status-info-text)}.tedi-text--neutral{color:var(--general-status-neutral-text)}.text-nowrap{white-space:nowrap}.text-break-all{word-break:break-all}.text-break-word{overflow-wrap:break-word}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.text-capitalize-first:first-letter{text-transform:capitalize}.text-break-spaces{white-space:break-spaces}.text-inline-block{display:inline-block}.text-inline{display:inline}b,strong,.text-bold{font-weight:700}.text-thin{font-weight:300}i,.text-italic{font-style:italic}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-line-normal{line-height:normal}.text-line-condensed{line-height:1}.text-default{color:var(--general-text-primary)}.text-primary{color:var(--general-text-brand)}@media print{.text-primary{filter:grayscale(1)}}.text-muted{color:var(--general-text-secondary)}.text-subtle{color:var(--general-text-tertiary)}.text-disabled{color:var(--general-text-disabled)}.text-inverted{color:var(--general-text-white)}.text-positive{color:var(--general-status-success-text)}@media print{.text-positive{filter:grayscale(1)}}.text-important{color:var(--general-status-danger-text)}@media print{.text-important{filter:grayscale(1)}}.text-warning{color:var(--general-status-warning-text)}@media print{.text-warning{filter:grayscale(1)}}.tedi-modal{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;position:fixed;inset:0;z-index:var(--z-index-modal);display:none}.tedi-modal--open{display:block}.tedi-modal--default{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y);--_tedi-modal-body-padding: var(--modal-body-padding);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y);--_tedi-modal-footer-gap: var(--button-gutter-x)}.tedi-modal--default .tedi-modal-header__head h1,.tedi-modal--default .tedi-modal-header__head h2,.tedi-modal--default .tedi-modal-header__head h3,.tedi-modal--default .tedi-modal-header__head h4,.tedi-modal--default .tedi-modal-header__head h5,.tedi-modal--default .tedi-modal-header__head h6{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}.tedi-modal--small{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x-sm);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y-sm);--_tedi-modal-body-padding: var(--modal-body-padding-sm);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x-sm);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y-sm);--_tedi-modal-footer-gap: var(--button-gutter-x-sm)}.tedi-modal--small .tedi-modal-header__head h1,.tedi-modal--small .tedi-modal-header__head h2,.tedi-modal--small .tedi-modal-header__head h3,.tedi-modal--small .tedi-modal-header__head h4,.tedi-modal--small .tedi-modal-header__head h5,.tedi-modal--small .tedi-modal-header__head h6{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}.tedi-modal--xs .tedi-modal__dialog{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal--sm .tedi-modal__dialog{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal--md .tedi-modal__dialog{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal--lg .tedi-modal__dialog{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal--xl .tedi-modal__dialog{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:var(--_tedi-modal-max-height);transform:translate(-50%,-50%)}.tedi-modal--center.tedi-modal--top .tedi-modal__dialog{top:var(--modal-top-margin);transform:translate(-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-left .2s ease-out}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-right .2s ease-out}.tedi-modal--service{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column}.tedi-modal__dialog{position:fixed;max-width:var(--_tedi-modal-max-width);display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal__backdrop{position:fixed;inset:0;background:var(--general-surface-overlay)}.tedi-modal .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.cdk-overlay-container{z-index:var(--z-index-modal)}.tedi-modal-backdrop{background:var(--general-surface-overlay)}.tedi-modal-dialog{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;width:100%;max-width:var(--_tedi-modal-max-width)}.tedi-modal-dialog--default{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y);--_tedi-modal-body-padding: var(--modal-body-padding);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y);--_tedi-modal-footer-gap: var(--button-gutter-x)}.tedi-modal-dialog--default .tedi-modal-header__head h1,.tedi-modal-dialog--default .tedi-modal-header__head h2,.tedi-modal-dialog--default .tedi-modal-header__head h3,.tedi-modal-dialog--default .tedi-modal-header__head h4,.tedi-modal-dialog--default .tedi-modal-header__head h5,.tedi-modal-dialog--default .tedi-modal-header__head h6{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}.tedi-modal-dialog--small{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x-sm);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y-sm);--_tedi-modal-body-padding: var(--modal-body-padding-sm);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x-sm);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y-sm);--_tedi-modal-footer-gap: var(--button-gutter-x-sm)}.tedi-modal-dialog--small .tedi-modal-header__head h1,.tedi-modal-dialog--small .tedi-modal-header__head h2,.tedi-modal-dialog--small .tedi-modal-header__head h3,.tedi-modal-dialog--small .tedi-modal-header__head h4,.tedi-modal-dialog--small .tedi-modal-header__head h5,.tedi-modal-dialog--small .tedi-modal-header__head h6{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}.tedi-modal-dialog--xs{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal-dialog--sm{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal-dialog--md{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal-dialog--lg{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal-dialog--xl{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal-dialog--center{max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--left,.tedi-modal-dialog--right{min-height:100dvh}.tedi-modal-dialog--left cdk-dialog-container,.tedi-modal-dialog--right cdk-dialog-container{min-height:100dvh}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{min-height:100dvh}.tedi-modal-dialog--left{animation:tedi-modal-slide-left .2s ease-out}.tedi-modal-dialog--right{animation:tedi-modal-slide-right .2s ease-out}.tedi-modal-dialog--center cdk-dialog-container{display:flex;flex-direction:column;max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--center .tedi-modal{max-height:var(--_tedi-modal-max-height);overflow:hidden}.tedi-modal-dialog .tedi-modal{display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{border-radius:0}.tedi-modal-dialog--scroll-page{--_tedi-modal-max-height: none}.tedi-modal-dialog--scroll-page cdk-dialog-container{max-height:none}.tedi-modal-dialog--scroll-page .tedi-modal{max-height:none;overflow:visible}.tedi-modal-dialog--scroll-page .tedi-modal-content{overflow-y:visible}.tedi-modal-dialog--fullscreen{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen cdk-dialog-container,.tedi-modal-dialog--fullscreen .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen .tedi-modal{border-radius:0}@media (max-width: 35.98rem){.tedi-modal-dialog--fullscreen-sm{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-sm cdk-dialog-container,.tedi-modal-dialog--fullscreen-sm .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-sm .tedi-modal{border-radius:0}}@media (max-width: 47.98rem){.tedi-modal-dialog--fullscreen-md{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-md cdk-dialog-container,.tedi-modal-dialog--fullscreen-md .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-md .tedi-modal{border-radius:0}}@media (max-width: 61.98rem){.tedi-modal-dialog--fullscreen-lg{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-lg cdk-dialog-container,.tedi-modal-dialog--fullscreen-lg .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-lg .tedi-modal{border-radius:0}}@media (max-width: 74.98rem){.tedi-modal-dialog--fullscreen-xl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xl .tedi-modal{border-radius:0}}@media (max-width: 87.48rem){.tedi-modal-dialog--fullscreen-xxl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xxl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl .tedi-modal{border-radius:0}}.tedi-modal-dialog .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal-dialog .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal-dialog .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal-dialog .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal-dialog .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal-dialog .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}@keyframes tedi-modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes tedi-modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalContentComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: "tedi-modal-content", imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ standalone: true, selector: "tedi-modal-content", imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CdkScrollable], host: {
                         class: "tedi-modal-content",
                     }, template: "<ng-content />\n", styles: ["h1,.h1,.tedi-h1,.text-h1,.tedi-text--h1{font-size:var(--heading-h1-size);font-weight:var(--heading-h1-weight);line-height:var(--heading-h1-line-height)}h2,.h2,.tedi-h2,.text-h2,.tedi-text--h2{font-size:var(--heading-h2-size);font-weight:var(--heading-h2-weight);line-height:var(--heading-h2-line-height)}h3,.h3,.tedi-h3,.text-h3,.tedi-text--h3{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}h4,.h4,.tedi-h4,.text-h4,.tedi-text--h4{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}h5,.h5,.tedi-h5,.text-h5,.tedi-text--h5{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}h6,.h6,.tedi-h6,.text-h6,.tedi-text--h6{font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);line-height:var(--heading-h6-line-height)}.tedi-text--h1{font-size:var(--heading-h1-size);font-weight:var(--heading-h1-weight);line-height:var(--heading-h1-line-height)}.tedi-text--h2{font-size:var(--heading-h2-size);font-weight:var(--heading-h2-weight);line-height:var(--heading-h2-line-height)}.tedi-text--h3{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}.tedi-text--h4{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}.tedi-text--h5{font-size:var(--heading-h5-size);font-weight:var(--heading-h5-weight);line-height:var(--heading-h5-line-height)}.tedi-text--h6{font-size:var(--heading-h6-size);font-weight:var(--heading-h6-weight);line-height:var(--heading-h6-line-height)}.tedi-text--default{font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--general-text-primary)}.tedi-text--small{font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height)}.text-subtitle{font-size:var(--heading-subtitle-regular-size);font-weight:var(--heading-subtitle-regular-weight);line-height:var(--heading-subtitle-regular-line-height);text-transform:uppercase}.text-subtitle.text-small{font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height)}label{line-height:var(--body-regular-line-height);color:var(--general-text-secondary)}.text-normal{font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--general-text-primary)}small,.text-small{font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height)}.text-extra-small{font-size:var(--body-extra-small-size);font-weight:var(--body-extra-small-weight);line-height:var(--body-extra-small-line-height)}.tedi-text--default,.tedi-text--primary{color:var(--general-text-primary)}.tedi-text--secondary{color:var(--general-text-secondary)}.tedi-text--tertiary{color:var(--general-text-tertiary)}.tedi-text--white{color:var(--general-text-white)}.tedi-text--disabled{color:var(--general-text-disabled)}.tedi-text--brand{color:var(--general-text-brand)}.tedi-text--success{color:var(--general-status-success-text)}.tedi-text--warning{color:var(--general-status-warning-text)}.tedi-text--danger{color:var(--general-status-danger-text)}.tedi-text--info{color:var(--general-status-info-text)}.tedi-text--neutral{color:var(--general-status-neutral-text)}.text-nowrap{white-space:nowrap}.text-break-all{word-break:break-all}.text-break-word{overflow-wrap:break-word}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.text-capitalize-first:first-letter{text-transform:capitalize}.text-break-spaces{white-space:break-spaces}.text-inline-block{display:inline-block}.text-inline{display:inline}b,strong,.text-bold{font-weight:700}.text-thin{font-weight:300}i,.text-italic{font-style:italic}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-line-normal{line-height:normal}.text-line-condensed{line-height:1}.text-default{color:var(--general-text-primary)}.text-primary{color:var(--general-text-brand)}@media print{.text-primary{filter:grayscale(1)}}.text-muted{color:var(--general-text-secondary)}.text-subtle{color:var(--general-text-tertiary)}.text-disabled{color:var(--general-text-disabled)}.text-inverted{color:var(--general-text-white)}.text-positive{color:var(--general-status-success-text)}@media print{.text-positive{filter:grayscale(1)}}.text-important{color:var(--general-status-danger-text)}@media print{.text-important{filter:grayscale(1)}}.text-warning{color:var(--general-status-warning-text)}@media print{.text-warning{filter:grayscale(1)}}.tedi-modal{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;position:fixed;inset:0;z-index:var(--z-index-modal);display:none}.tedi-modal--open{display:block}.tedi-modal--default{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y);--_tedi-modal-body-padding: var(--modal-body-padding);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y);--_tedi-modal-footer-gap: var(--button-gutter-x)}.tedi-modal--default .tedi-modal-header__head h1,.tedi-modal--default .tedi-modal-header__head h2,.tedi-modal--default .tedi-modal-header__head h3,.tedi-modal--default .tedi-modal-header__head h4,.tedi-modal--default .tedi-modal-header__head h5,.tedi-modal--default .tedi-modal-header__head h6{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}.tedi-modal--small{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x-sm);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y-sm);--_tedi-modal-body-padding: var(--modal-body-padding-sm);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x-sm);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y-sm);--_tedi-modal-footer-gap: var(--button-gutter-x-sm)}.tedi-modal--small .tedi-modal-header__head h1,.tedi-modal--small .tedi-modal-header__head h2,.tedi-modal--small .tedi-modal-header__head h3,.tedi-modal--small .tedi-modal-header__head h4,.tedi-modal--small .tedi-modal-header__head h5,.tedi-modal--small .tedi-modal-header__head h6{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}.tedi-modal--xs .tedi-modal__dialog{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal--sm .tedi-modal__dialog{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal--md .tedi-modal__dialog{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal--lg .tedi-modal__dialog{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal--xl .tedi-modal__dialog{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal--center .tedi-modal__dialog{top:50%;left:50%;max-height:var(--_tedi-modal-max-height);transform:translate(-50%,-50%)}.tedi-modal--center.tedi-modal--top .tedi-modal__dialog{top:var(--modal-top-margin);transform:translate(-50%)}.tedi-modal--left .tedi-modal__dialog{top:0;left:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-left .2s ease-out}.tedi-modal--right .tedi-modal__dialog{top:0;right:0;min-height:100dvh;border-radius:0;animation:tedi-modal-slide-right .2s ease-out}.tedi-modal--service{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column}.tedi-modal__dialog{position:fixed;max-width:var(--_tedi-modal-max-width);display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal__backdrop{position:fixed;inset:0;background:var(--general-surface-overlay)}.tedi-modal .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}.cdk-overlay-container{z-index:var(--z-index-modal)}.tedi-modal-backdrop{background:var(--general-surface-overlay)}.tedi-modal-dialog{--_tedi-modal-max-width: 95vw;--_tedi-modal-max-height: 95dvh;width:100%;max-width:var(--_tedi-modal-max-width)}.tedi-modal-dialog--default{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y);--_tedi-modal-body-padding: var(--modal-body-padding);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y);--_tedi-modal-footer-gap: var(--button-gutter-x)}.tedi-modal-dialog--default .tedi-modal-header__head h1,.tedi-modal-dialog--default .tedi-modal-header__head h2,.tedi-modal-dialog--default .tedi-modal-header__head h3,.tedi-modal-dialog--default .tedi-modal-header__head h4,.tedi-modal-dialog--default .tedi-modal-header__head h5,.tedi-modal-dialog--default .tedi-modal-header__head h6{font-size:var(--heading-h3-size);font-weight:var(--heading-h3-weight);line-height:var(--heading-h3-line-height)}.tedi-modal-dialog--small{--_tedi-modal-heading-padding-x: var(--modal-heading-padding-x-sm);--_tedi-modal-heading-padding-y: var(--modal-heading-padding-y-sm);--_tedi-modal-body-padding: var(--modal-body-padding-sm);--_tedi-modal-footer-padding-x: var(--modal-footer-padding-x-sm);--_tedi-modal-footer-padding-y: var(--modal-footer-padding-y-sm);--_tedi-modal-footer-gap: var(--button-gutter-x-sm)}.tedi-modal-dialog--small .tedi-modal-header__head h1,.tedi-modal-dialog--small .tedi-modal-header__head h2,.tedi-modal-dialog--small .tedi-modal-header__head h3,.tedi-modal-dialog--small .tedi-modal-header__head h4,.tedi-modal-dialog--small .tedi-modal-header__head h5,.tedi-modal-dialog--small .tedi-modal-header__head h6{font-size:var(--heading-h4-size);font-weight:var(--heading-h4-weight);line-height:var(--heading-h4-line-height)}.tedi-modal-dialog--xs{max-width:min(var(--modal-max-width-xs),var(--_tedi-modal-max-width))}.tedi-modal-dialog--sm{max-width:min(var(--modal-max-width-sm),var(--_tedi-modal-max-width))}.tedi-modal-dialog--md{max-width:min(var(--modal-max-width-md),var(--_tedi-modal-max-width))}.tedi-modal-dialog--lg{max-width:min(var(--modal-max-width-lg),var(--_tedi-modal-max-width))}.tedi-modal-dialog--xl{max-width:min(var(--modal-max-width-xl),var(--_tedi-modal-max-width))}.tedi-modal-dialog--center{max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--left,.tedi-modal-dialog--right{min-height:100dvh}.tedi-modal-dialog--left cdk-dialog-container,.tedi-modal-dialog--right cdk-dialog-container{min-height:100dvh}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{min-height:100dvh}.tedi-modal-dialog--left{animation:tedi-modal-slide-left .2s ease-out}.tedi-modal-dialog--right{animation:tedi-modal-slide-right .2s ease-out}.tedi-modal-dialog--center cdk-dialog-container{display:flex;flex-direction:column;max-height:var(--_tedi-modal-max-height)}.tedi-modal-dialog--center .tedi-modal{max-height:var(--_tedi-modal-max-height);overflow:hidden}.tedi-modal-dialog .tedi-modal{display:flex;flex-direction:column;width:100%;background-color:var(--modal-background);border:var(--tedi-borders-01) solid var(--modal-border-outer);border-radius:var(--modal-radius)}.tedi-modal-dialog--left .tedi-modal,.tedi-modal-dialog--right .tedi-modal{border-radius:0}.tedi-modal-dialog--scroll-page{--_tedi-modal-max-height: none}.tedi-modal-dialog--scroll-page cdk-dialog-container{max-height:none}.tedi-modal-dialog--scroll-page .tedi-modal{max-height:none;overflow:visible}.tedi-modal-dialog--scroll-page .tedi-modal-content{overflow-y:visible}.tedi-modal-dialog--fullscreen{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen cdk-dialog-container,.tedi-modal-dialog--fullscreen .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen .tedi-modal{border-radius:0}@media (max-width: 35.98rem){.tedi-modal-dialog--fullscreen-sm{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-sm cdk-dialog-container,.tedi-modal-dialog--fullscreen-sm .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-sm .tedi-modal{border-radius:0}}@media (max-width: 47.98rem){.tedi-modal-dialog--fullscreen-md{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-md cdk-dialog-container,.tedi-modal-dialog--fullscreen-md .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-md .tedi-modal{border-radius:0}}@media (max-width: 61.98rem){.tedi-modal-dialog--fullscreen-lg{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-lg cdk-dialog-container,.tedi-modal-dialog--fullscreen-lg .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-lg .tedi-modal{border-radius:0}}@media (max-width: 74.98rem){.tedi-modal-dialog--fullscreen-xl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xl .tedi-modal{border-radius:0}}@media (max-width: 87.48rem){.tedi-modal-dialog--fullscreen-xxl{--_tedi-modal-max-width: 100vw;--_tedi-modal-max-height: 100dvh;max-width:100vw;min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl cdk-dialog-container,.tedi-modal-dialog--fullscreen-xxl .tedi-modal{min-height:100dvh}.tedi-modal-dialog--fullscreen-xxl .tedi-modal{border-radius:0}}.tedi-modal-dialog .tedi-modal-header{padding:var(--_tedi-modal-heading-padding-y) var(--_tedi-modal-heading-padding-x);border-bottom:var(--tedi-borders-01) solid var(--modal-border-inner)}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head{display:flex;gap:var(--layout-grid-gutters-08);align-items:center}.tedi-modal-dialog .tedi-modal-header .tedi-modal-header__head .tedi-modal-header__close{margin-left:auto}.tedi-modal-dialog .tedi-modal-header [tedi-modal-description]{margin-top:var(--layout-grid-gutters-08)}.tedi-modal-dialog .tedi-modal-content{display:flex;flex:1;flex-direction:column;gap:var(--layout-grid-gutters-16);padding:var(--_tedi-modal-body-padding);overflow-y:auto}.tedi-modal-dialog .tedi-modal-content:has(.tedi-scroll-fade){overflow:hidden}.tedi-modal-dialog .tedi-modal-content .tedi-scroll-fade{flex:1;min-height:0}.tedi-modal-dialog .tedi-modal-footer{display:flex;gap:var(--_tedi-modal-footer-gap);justify-content:flex-end;padding:var(--_tedi-modal-footer-padding-y) var(--_tedi-modal-footer-padding-x);border-top:var(--tedi-borders-01) solid var(--modal-border-inner)}@keyframes tedi-modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes tedi-modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
         }] });
@@ -8440,7 +8497,14 @@ class PaginationComponent {
      * one-way with `[pageSize]` + `(pageSizeChange)`.
      */
     pageSize = model(undefined);
-    /** Options for the page-size select. Empty/undefined hides the select. */
+    /**
+     * Options for the page-size select. Empty/undefined hides the select.
+     * Accepts plain numbers, or `{ value, label }` objects when the visible
+     * text should differ from the value — e.g. a "Show all" entry
+     * `{ value: totalItems, label: 'Show all' }`. Selecting an option emits its
+     * `value` via `pageSizeChange`; the pager collapses naturally once the
+     * consumer recomputes `pageCount` down to 1.
+     */
     pageSizeOptions = input([]);
     /** Pages always shown at the start and end. @default 1 */
     boundaryCount = input(1);
@@ -8635,10 +8699,17 @@ class PaginationComponent {
         const order = PaginationComponent.BREAKPOINT_ORDER;
         return order.indexOf(current) < order.indexOf(value);
     }
-    pageSizeSelectOptions = computed(() => this.pageSizeOptions().map((option) => ({
-        value: option,
-        label: String(option),
-    })));
+    pageSizeSelectOptions = computed(() => this.pageSizeOptions().map((option) => typeof option === "number" ? { value: option, label: String(option) } : option));
+    /**
+     * Visible text for the currently selected page size. Resolves the matching
+     * option's label so labelled options (e.g. "Show all") render their text
+     * instead of the raw numeric value on the mobile trigger.
+     */
+    selectedPageSizeLabel = computed(() => {
+        const current = this.pageSize();
+        const match = this.pageSizeSelectOptions().find((o) => o.value === current);
+        return match?.label ?? (current != null ? String(current) : "");
+    });
     mobileTriggerLabel = computed(() => `${this.currentPage()} / ${this.pageCount()}`);
     /**
      * Accessible name for the mobile trigger button. Starts with the visible
@@ -8646,7 +8717,7 @@ class PaginationComponent {
      * for voice-control users.
      */
     mobileTriggerAriaLabel = computed(() => `${this.mobileTriggerLabel()}, ${this.mergedLabels().ariaLabel}`);
-    mobilePageSizeAriaLabel = computed(() => `${this.pageSize() ?? ""}, ${this.mergedLabels().pageSize}`);
+    mobilePageSizeAriaLabel = computed(() => `${this.selectedPageSizeLabel()}, ${this.mergedLabels().pageSize}`);
     /** Whether the mobile page-jump picker modal is currently open. */
     isMobileModalOpen = signal(false);
     /** Whether the mobile page-size picker modal is currently open. */
@@ -8713,10 +8784,10 @@ class PaginationComponent {
     openPageSizePicker() {
         const labels = this.mergedLabels();
         const current = this.pageSize();
-        const options = this.pageSizeOptions().map((size) => ({
-            value: size,
-            label: String(size),
-            ariaLabel: `${labels.pageSize}, ${size}`,
+        const options = this.pageSizeSelectOptions().map(({ value, label }) => ({
+            value,
+            label,
+            ariaLabel: `${labels.pageSize}, ${label}`,
         }));
         this.isPageSizeModalOpen.set(true);
         const ref = this.openPickerModal({
@@ -8743,14 +8814,14 @@ class PaginationComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PaginationComponent, isStandalone: true, selector: "tedi-pagination", inputs: { pageCount: { classPropertyName: "pageCount", publicName: "pageCount", isSignal: true, isRequired: true, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, boundaryCount: { classPropertyName: "boundaryCount", publicName: "boundaryCount", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, dividerPosition: { classPropertyName: "dividerPosition", publicName: "dividerPosition", isSignal: true, isRequired: false, transformFunction: null }, hideResults: { classPropertyName: "hideResults", publicName: "hideResults", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, hidePager: { classPropertyName: "hidePager", publicName: "hidePager", isSignal: true, isRequired: false, transformFunction: null }, hideArrows: { classPropertyName: "hideArrows", publicName: "hideArrows", isSignal: true, isRequired: false, transformFunction: null }, disableArrowsAtBoundary: { classPropertyName: "disableArrowsAtBoundary", publicName: "disableArrowsAtBoundary", isSignal: true, isRequired: false, transformFunction: null }, arrowVariant: { classPropertyName: "arrowVariant", publicName: "arrowVariant", isSignal: true, isRequired: false, transformFunction: null }, showArrowLabels: { classPropertyName: "showArrowLabels", publicName: "showArrowLabels", isSignal: true, isRequired: false, transformFunction: null }, previousIcon: { classPropertyName: "previousIcon", publicName: "previousIcon", isSignal: true, isRequired: false, transformFunction: null }, nextIcon: { classPropertyName: "nextIcon", publicName: "nextIcon", isSignal: true, isRequired: false, transformFunction: null }, showModalTitle: { classPropertyName: "showModalTitle", publicName: "showModalTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { attributes: { "data-name": "tedi-pagination" }, properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "customResults", first: true, predicate: TediPaginationResultsDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<span\n  class=\"tedi-pagination__status\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n>\n  {{ statusText() }}\n</span>\n\n<div class=\"tedi-pagination__slot-start\">\n  @if (showResults()) {\n    @if (customResults()) {\n      <ng-content select=\"[tediPaginationResults]\" />\n    } @else {\n      <span class=\"tedi-pagination__results\">\n        {{ mergedLabels().results(totalItems()!) }}\n      </span>\n    }\n  }\n</div>\n\n<div class=\"tedi-pagination__slot-center\">\n  @if (showPager()) {\n    <nav class=\"tedi-pagination__nav\" [attr.aria-label]=\"mergedLabels().ariaLabel\">\n      @if (showPrevious()) {\n        <button\n          tedi-button\n          type=\"button\"\n          size=\"small\"\n          [variant]=\"arrowVariant()\"\n          class=\"tedi-pagination__nav-button tedi-pagination__nav-button--previous\"\n          [attr.aria-label]=\"showArrowLabels() ? null : mergedLabels().previous\"\n          [disabled]=\"previousItem().disabled\"\n          (click)=\"handlePageChange(previousItem().page)\"\n        >\n          <tedi-icon [name]=\"previousIcon()\" />\n          @if (showArrowLabels()) {\n            <span>{{ mergedLabels().previous }}</span>\n          }\n        </button>\n      }\n\n      @if (!useCompactPicker()) {\n        <ul class=\"tedi-pagination__list\">\n          @for (item of pageItems(); track $index) {\n            @if (item.type === \"ellipsis\") {\n              <li\n                class=\"tedi-pagination__item tedi-pagination__item--ellipsis\"\n                aria-hidden=\"true\"\n              >\n                \u2026\n              </li>\n            } @else {\n              <li class=\"tedi-pagination__item\">\n                <button\n                  type=\"button\"\n                  class=\"tedi-pagination__page\"\n                  [class.tedi-pagination__page--selected]=\"item.selected\"\n                  [attr.aria-label]=\"\n                    item.selected\n                      ? mergedLabels().currentPageAriaLabel(item.page!)\n                      : mergedLabels().pageAriaLabel(item.page!)\n                  \"\n                  [attr.aria-current]=\"item.selected ? 'page' : null\"\n                  (click)=\"handlePageChange(item.page)\"\n                >\n                  {{ item.page }}\n                </button>\n              </li>\n            }\n          }\n        </ul>\n      }\n      @if (useCompactPicker()) {\n        <button\n          type=\"button\"\n          class=\"tedi-pagination__mobile-trigger\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"isMobileModalOpen()\"\n          [attr.aria-label]=\"mobileTriggerAriaLabel()\"\n          (click)=\"openMobilePicker()\"\n        >\n          <span class=\"tedi-pagination__mobile-trigger-label\" aria-hidden=\"true\">\n            <strong>{{ currentPage() }}</strong>\n            <span>/</span>\n            <span>{{ pageCount() }}</span>\n          </span>\n          <tedi-icon name=\"arrow_drop_down\" />\n        </button>\n      }\n\n      @if (showNext()) {\n        <button\n          tedi-button\n          type=\"button\"\n          size=\"small\"\n          [variant]=\"arrowVariant()\"\n          class=\"tedi-pagination__nav-button tedi-pagination__nav-button--next\"\n          [attr.aria-label]=\"showArrowLabels() ? null : mergedLabels().next\"\n          [disabled]=\"nextItem().disabled\"\n          (click)=\"handlePageChange(nextItem().page)\"\n        >\n          @if (showArrowLabels()) {\n            <span>{{ mergedLabels().next }}</span>\n          }\n          <tedi-icon [name]=\"nextIcon()\" />\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<div class=\"tedi-pagination__slot-end\">\n  @if (showPageSizeSelect()) {\n    <div class=\"tedi-pagination__page-size\">\n      @if (useCompactPicker()) {\n        <span class=\"tedi-pagination__page-size-label\">\n          {{ mergedLabels().pageSize }}\n        </span>\n        <button\n          type=\"button\"\n          class=\"tedi-pagination__page-size-trigger\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"isPageSizeModalOpen()\"\n          [attr.aria-label]=\"mobilePageSizeAriaLabel()\"\n          (click)=\"openPageSizePicker()\"\n        >\n          <span aria-hidden=\"true\">{{ pageSize() }}</span>\n          <tedi-icon name=\"arrow_drop_down\" />\n        </button>\n      } @else {\n        <label class=\"tedi-pagination__page-size-label\" [attr.for]=\"pageSizeInputId\">\n          {{ mergedLabels().pageSize }}\n        </label>\n        <tedi-select\n          class=\"tedi-pagination__page-size-select\"\n          [inputId]=\"pageSizeInputId\"\n          size=\"small\"\n          [options]=\"pageSizeSelectOptions()\"\n          bindLabel=\"label\"\n          bindValue=\"value\"\n          [ngModel]=\"pageSize()\"\n          (ngModelChange)=\"handlePageSizeChange($event)\"\n        />\n      }\n    </div>\n  }\n</div>\n", styles: [".tedi-pagination{display:grid;grid-template-areas:\"results pager page-size\";grid-template-columns:1fr auto 1fr;gap:var(--layout-grid-gutters-16);align-items:center;width:100%;padding:var(--pagination-padding-y) var(--pagination-padding-x)}.tedi-pagination.tedi-pagination--no-pager{grid-template-areas:\"results page-size\";grid-template-columns:1fr auto}@media (max-width: 47.98rem){.tedi-pagination{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08)}.tedi-pagination.tedi-pagination--no-pager{flex-direction:row;gap:var(--layout-grid-gutters-16);justify-content:space-between}}.tedi-pagination--bg-white{background:var(--general-surface-primary)}.tedi-pagination--bg-transparent{background:transparent}.tedi-pagination--divider-top:not(.tedi-pagination--bg-transparent){border-top:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--divider-bottom:not(.tedi-pagination--bg-transparent){border-bottom:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--no-pager .tedi-pagination__slot-center,.tedi-pagination--no-page-size .tedi-pagination__slot-end{display:none}.tedi-pagination__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}.tedi-pagination__slot-start{display:inline-flex;grid-area:results;align-items:center;justify-self:start;min-width:0}@media (max-width: 47.98rem){.tedi-pagination__slot-start{justify-content:center;justify-self:center;order:2}}@media (max-width: 47.98rem){.tedi-pagination--no-pager .tedi-pagination__slot-start{justify-content:flex-start;justify-self:start;order:0}}.tedi-pagination__slot-center{display:inline-flex;grid-area:pager;align-items:center;justify-self:center}@media (max-width: 47.98rem){.tedi-pagination__slot-center{order:3}}.tedi-pagination__slot-end{display:flex;grid-area:page-size;align-items:center;justify-content:flex-end;min-width:0}@media (max-width: 47.98rem){.tedi-pagination__slot-end{flex-direction:column;gap:var(--layout-grid-gutters-04);justify-content:center;justify-self:center;order:1}}@media (max-width: 47.98rem){.tedi-pagination--no-pager .tedi-pagination__slot-end{flex-direction:row;gap:var(--form-field-inner-spacing);justify-content:flex-end;justify-self:end}}.tedi-pagination__results{flex:0 0 auto;font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media (max-width: 47.98rem){.tedi-pagination__results{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__nav{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}@media (max-width: 47.98rem){.tedi-pagination__nav{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--layout-grid-gutters-16)}}@media (max-width: 47.98rem){.tedi-pagination--no-arrows .tedi-pagination__nav{grid-template-columns:auto}}.tedi-pagination__list{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-08);align-items:center;padding:0;margin:0;list-style:none}.tedi-pagination__item{display:inline-flex;align-items:center;justify-content:center}.tedi-pagination__item--ellipsis{width:var(--pagination-button-size);height:var(--pagination-button-size);font-family:var(--family-default);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);-webkit-user-select:none;user-select:none}.tedi-pagination__page{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-button-size);height:var(--pagination-button-size);padding:0 var(--layout-grid-gutters-04);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-pagination__page:before{position:absolute;inset:-4px;content:\"\"}.tedi-pagination__page:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-pagination__page:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-pagination__page:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__page--selected{color:var(--general-text-white);cursor:default;background:var(--general-surface-brand-secondary)}.tedi-pagination__page--selected:hover,.tedi-pagination__page--selected:active,.tedi-pagination__page--selected:focus-visible{color:var(--general-text-white);background:var(--general-surface-brand-secondary)}@media (max-width: 47.98rem){.tedi-pagination__nav-button--previous{justify-self:end}}@media (max-width: 47.98rem){.tedi-pagination__nav-button--next{justify-self:start}}.tedi-pagination__mobile-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;justify-self:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-pagination__mobile-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__mobile-trigger-label{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}.tedi-pagination__mobile-trigger-label strong{font-weight:var(--body-bold-weight);color:var(--general-text-brand)}.tedi-pagination__page-size{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;justify-content:flex-end;min-width:0}@media (max-width: 47.98rem){.tedi-pagination__page-size{flex-direction:column;gap:var(--layout-grid-gutters-04);align-items:center}}@media (max-width: 47.98rem){.tedi-pagination--no-pager .tedi-pagination__page-size{flex-direction:row;gap:var(--form-field-inner-spacing)}}.tedi-pagination__page-size-label{font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media (max-width: 47.98rem){.tedi-pagination__page-size-label{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__page-size-select.tedi-select{width:auto;min-width:64px}.tedi-pagination__page-size-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-pagination__page-size-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: SelectComponent, selector: "tedi-select", inputs: ["inputId", "label", "required", "placeholder", "state", "size", "clearable", "dropdownWidthRef", "feedbackText", "options", "bindLabel", "bindValue", "allowMultiple", "groupBy", "showSelectAll", "selectableGroups", "isTagRemovable", "multiRow", "compareWith", "disabledKey", "noOptionsMessage", "maxDropdownHeight", "dropdownType", "searchable", "searchFn", "clearSearchOnSelect"], outputs: ["selectionChange", "searchChange", "opened", "closed", "cleared"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PaginationComponent, isStandalone: true, selector: "tedi-pagination", inputs: { pageCount: { classPropertyName: "pageCount", publicName: "pageCount", isSignal: true, isRequired: true, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, boundaryCount: { classPropertyName: "boundaryCount", publicName: "boundaryCount", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, dividerPosition: { classPropertyName: "dividerPosition", publicName: "dividerPosition", isSignal: true, isRequired: false, transformFunction: null }, hideResults: { classPropertyName: "hideResults", publicName: "hideResults", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, hidePager: { classPropertyName: "hidePager", publicName: "hidePager", isSignal: true, isRequired: false, transformFunction: null }, hideArrows: { classPropertyName: "hideArrows", publicName: "hideArrows", isSignal: true, isRequired: false, transformFunction: null }, disableArrowsAtBoundary: { classPropertyName: "disableArrowsAtBoundary", publicName: "disableArrowsAtBoundary", isSignal: true, isRequired: false, transformFunction: null }, arrowVariant: { classPropertyName: "arrowVariant", publicName: "arrowVariant", isSignal: true, isRequired: false, transformFunction: null }, showArrowLabels: { classPropertyName: "showArrowLabels", publicName: "showArrowLabels", isSignal: true, isRequired: false, transformFunction: null }, previousIcon: { classPropertyName: "previousIcon", publicName: "previousIcon", isSignal: true, isRequired: false, transformFunction: null }, nextIcon: { classPropertyName: "nextIcon", publicName: "nextIcon", isSignal: true, isRequired: false, transformFunction: null }, showModalTitle: { classPropertyName: "showModalTitle", publicName: "showModalTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { attributes: { "data-name": "tedi-pagination" }, properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "customResults", first: true, predicate: TediPaginationResultsDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<span\n  class=\"tedi-pagination__status\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n>\n  {{ statusText() }}\n</span>\n\n<div class=\"tedi-pagination__slot-start\">\n  @if (showResults()) {\n    @if (customResults()) {\n      <ng-content select=\"[tediPaginationResults]\" />\n    } @else {\n      <span class=\"tedi-pagination__results\">\n        {{ mergedLabels().results(totalItems()!) }}\n      </span>\n    }\n  }\n</div>\n\n<div class=\"tedi-pagination__slot-center\">\n  @if (showPager()) {\n    <nav class=\"tedi-pagination__nav\" [attr.aria-label]=\"mergedLabels().ariaLabel\">\n      @if (showPrevious()) {\n        <button\n          tedi-button\n          type=\"button\"\n          size=\"small\"\n          [variant]=\"arrowVariant()\"\n          class=\"tedi-pagination__nav-button tedi-pagination__nav-button--previous\"\n          [attr.aria-label]=\"showArrowLabels() ? null : mergedLabels().previous\"\n          [disabled]=\"previousItem().disabled\"\n          (click)=\"handlePageChange(previousItem().page)\"\n        >\n          <tedi-icon [name]=\"previousIcon()\" />\n          @if (showArrowLabels()) {\n            <span>{{ mergedLabels().previous }}</span>\n          }\n        </button>\n      }\n\n      @if (!useCompactPicker()) {\n        <ul class=\"tedi-pagination__list\">\n          @for (item of pageItems(); track $index) {\n            @if (item.type === \"ellipsis\") {\n              <li\n                class=\"tedi-pagination__item tedi-pagination__item--ellipsis\"\n                aria-hidden=\"true\"\n              >\n                \u2026\n              </li>\n            } @else {\n              <li class=\"tedi-pagination__item\">\n                <button\n                  type=\"button\"\n                  class=\"tedi-pagination__page\"\n                  [class.tedi-pagination__page--selected]=\"item.selected\"\n                  [attr.aria-label]=\"\n                    item.selected\n                      ? mergedLabels().currentPageAriaLabel(item.page!)\n                      : mergedLabels().pageAriaLabel(item.page!)\n                  \"\n                  [attr.aria-current]=\"item.selected ? 'page' : null\"\n                  (click)=\"handlePageChange(item.page)\"\n                >\n                  {{ item.page }}\n                </button>\n              </li>\n            }\n          }\n        </ul>\n      }\n      @if (useCompactPicker()) {\n        <button\n          type=\"button\"\n          class=\"tedi-pagination__mobile-trigger\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"isMobileModalOpen()\"\n          [attr.aria-label]=\"mobileTriggerAriaLabel()\"\n          (click)=\"openMobilePicker()\"\n        >\n          <span class=\"tedi-pagination__mobile-trigger-label\" aria-hidden=\"true\">\n            <strong>{{ currentPage() }}</strong>\n            <span>/</span>\n            <span>{{ pageCount() }}</span>\n          </span>\n          <tedi-icon name=\"arrow_drop_down\" />\n        </button>\n      }\n\n      @if (showNext()) {\n        <button\n          tedi-button\n          type=\"button\"\n          size=\"small\"\n          [variant]=\"arrowVariant()\"\n          class=\"tedi-pagination__nav-button tedi-pagination__nav-button--next\"\n          [attr.aria-label]=\"showArrowLabels() ? null : mergedLabels().next\"\n          [disabled]=\"nextItem().disabled\"\n          (click)=\"handlePageChange(nextItem().page)\"\n        >\n          @if (showArrowLabels()) {\n            <span>{{ mergedLabels().next }}</span>\n          }\n          <tedi-icon [name]=\"nextIcon()\" />\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<div class=\"tedi-pagination__slot-end\">\n  @if (showPageSizeSelect()) {\n    <div class=\"tedi-pagination__page-size\">\n      @if (useCompactPicker()) {\n        <span class=\"tedi-pagination__page-size-label\">\n          {{ mergedLabels().pageSize }}\n        </span>\n        <button\n          type=\"button\"\n          class=\"tedi-pagination__page-size-trigger\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"isPageSizeModalOpen()\"\n          [attr.aria-label]=\"mobilePageSizeAriaLabel()\"\n          (click)=\"openPageSizePicker()\"\n        >\n          <span aria-hidden=\"true\">{{ selectedPageSizeLabel() }}</span>\n          <tedi-icon name=\"arrow_drop_down\" />\n        </button>\n      } @else {\n        <label class=\"tedi-pagination__page-size-label\" [attr.for]=\"pageSizeInputId\">\n          {{ mergedLabels().pageSize }}\n        </label>\n        <tedi-select\n          class=\"tedi-pagination__page-size-select\"\n          [inputId]=\"pageSizeInputId\"\n          size=\"small\"\n          [options]=\"pageSizeSelectOptions()\"\n          bindLabel=\"label\"\n          bindValue=\"value\"\n          [dropdownWidthRef]=\"null\"\n          dropdownAlign=\"end\"\n          [ngModel]=\"pageSize()\"\n          (ngModelChange)=\"handlePageSizeChange($event)\"\n        />\n      }\n    </div>\n  }\n</div>\n", styles: [".tedi-pagination{display:grid;grid-template-areas:\"results pager page-size\";grid-template-columns:1fr auto 1fr;gap:var(--layout-grid-gutters-16);align-items:center;width:100%;padding:var(--pagination-padding-y) var(--pagination-padding-x)}.tedi-pagination.tedi-pagination--no-pager{grid-template-areas:\"results page-size\";grid-template-columns:1fr auto}@media (max-width: 47.98rem){.tedi-pagination{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08)}.tedi-pagination.tedi-pagination--no-pager{flex-direction:row;gap:var(--layout-grid-gutters-16);justify-content:space-between}}.tedi-pagination--bg-white{background:var(--general-surface-primary)}.tedi-pagination--bg-transparent{background:transparent}.tedi-pagination--divider-top:not(.tedi-pagination--bg-transparent){border-top:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--divider-bottom:not(.tedi-pagination--bg-transparent){border-bottom:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--no-pager .tedi-pagination__slot-center,.tedi-pagination--no-page-size .tedi-pagination__slot-end{display:none}.tedi-pagination__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}.tedi-pagination__slot-start{display:inline-flex;grid-area:results;align-items:center;justify-self:start;min-width:0}@media (max-width: 47.98rem){.tedi-pagination__slot-start{justify-content:center;justify-self:center;order:2}}@media (max-width: 47.98rem){.tedi-pagination--no-pager .tedi-pagination__slot-start{justify-content:flex-start;justify-self:start;order:0}}.tedi-pagination__slot-center{display:inline-flex;grid-area:pager;align-items:center;justify-self:center}@media (max-width: 47.98rem){.tedi-pagination__slot-center{order:3}}.tedi-pagination__slot-end{display:flex;grid-area:page-size;align-items:center;justify-content:flex-end;min-width:0}@media (max-width: 47.98rem){.tedi-pagination__slot-end{flex-direction:column;gap:var(--layout-grid-gutters-04);justify-content:center;justify-self:center;order:1}}@media (max-width: 47.98rem){.tedi-pagination--no-pager .tedi-pagination__slot-end{flex-direction:row;gap:var(--form-field-inner-spacing);justify-content:flex-end;justify-self:end}}.tedi-pagination__results{flex:0 0 auto;font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media (max-width: 47.98rem){.tedi-pagination__results{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__nav{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}@media (max-width: 47.98rem){.tedi-pagination__nav{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--layout-grid-gutters-16)}}.tedi-pagination__list{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-08);align-items:center;padding:0;margin:0;list-style:none}.tedi-pagination__item{display:inline-flex;align-items:center;justify-content:center}.tedi-pagination__item--ellipsis{width:var(--pagination-button-size);height:var(--pagination-button-size);font-family:var(--family-default);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);-webkit-user-select:none;user-select:none}.tedi-pagination__page{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-button-size);height:var(--pagination-button-size);padding:0 var(--layout-grid-gutters-04);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-pagination__page:before{position:absolute;inset:-4px;content:\"\"}.tedi-pagination__page:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-pagination__page:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-pagination__page:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__page--selected{color:var(--general-text-white);cursor:default;background:var(--general-surface-brand-secondary)}.tedi-pagination__page--selected:hover,.tedi-pagination__page--selected:active,.tedi-pagination__page--selected:focus-visible{color:var(--general-text-white);background:var(--general-surface-brand-secondary)}@media (max-width: 47.98rem){.tedi-pagination__nav-button--previous{grid-column:1;justify-self:end}}@media (max-width: 47.98rem){.tedi-pagination__nav-button--next{grid-column:3;justify-self:start}}.tedi-pagination__mobile-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;justify-self:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}@media (max-width: 47.98rem){.tedi-pagination__mobile-trigger{grid-column:2}}.tedi-pagination__mobile-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__mobile-trigger-label{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}.tedi-pagination__mobile-trigger-label strong{font-weight:var(--body-bold-weight);color:var(--general-text-brand)}.tedi-pagination__page-size{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;justify-content:flex-end;min-width:0}@media (max-width: 47.98rem){.tedi-pagination__page-size{flex-direction:column;gap:var(--layout-grid-gutters-04);align-items:center}}@media (max-width: 47.98rem){.tedi-pagination--no-pager .tedi-pagination__page-size{flex-direction:row;gap:var(--form-field-inner-spacing)}}.tedi-pagination__page-size-label{font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media (max-width: 47.98rem){.tedi-pagination__page-size-label{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__page-size-select.tedi-select{width:auto;min-width:64px}.tedi-pagination__page-size-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-pagination__page-size-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: SelectComponent, selector: "tedi-select", inputs: ["inputId", "label", "required", "placeholder", "state", "size", "clearable", "dropdownWidthRef", "dropdownAlign", "feedbackText", "options", "bindLabel", "bindValue", "allowMultiple", "groupBy", "showSelectAll", "selectableGroups", "isTagRemovable", "multiRow", "compareWith", "disabledKey", "noOptionsMessage", "maxDropdownHeight", "dropdownType", "searchable", "searchFn", "clearSearchOnSelect"], outputs: ["selectionChange", "searchChange", "opened", "closed", "cleared"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: "tedi-pagination", standalone: true, imports: [FormsModule, ButtonComponent, IconComponent, SelectComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "[class]": "hostClasses()",
                         "data-name": "tedi-pagination",
-                    }, template: "<span\n  class=\"tedi-pagination__status\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n>\n  {{ statusText() }}\n</span>\n\n<div class=\"tedi-pagination__slot-start\">\n  @if (showResults()) {\n    @if (customResults()) {\n      <ng-content select=\"[tediPaginationResults]\" />\n    } @else {\n      <span class=\"tedi-pagination__results\">\n        {{ mergedLabels().results(totalItems()!) }}\n      </span>\n    }\n  }\n</div>\n\n<div class=\"tedi-pagination__slot-center\">\n  @if (showPager()) {\n    <nav class=\"tedi-pagination__nav\" [attr.aria-label]=\"mergedLabels().ariaLabel\">\n      @if (showPrevious()) {\n        <button\n          tedi-button\n          type=\"button\"\n          size=\"small\"\n          [variant]=\"arrowVariant()\"\n          class=\"tedi-pagination__nav-button tedi-pagination__nav-button--previous\"\n          [attr.aria-label]=\"showArrowLabels() ? null : mergedLabels().previous\"\n          [disabled]=\"previousItem().disabled\"\n          (click)=\"handlePageChange(previousItem().page)\"\n        >\n          <tedi-icon [name]=\"previousIcon()\" />\n          @if (showArrowLabels()) {\n            <span>{{ mergedLabels().previous }}</span>\n          }\n        </button>\n      }\n\n      @if (!useCompactPicker()) {\n        <ul class=\"tedi-pagination__list\">\n          @for (item of pageItems(); track $index) {\n            @if (item.type === \"ellipsis\") {\n              <li\n                class=\"tedi-pagination__item tedi-pagination__item--ellipsis\"\n                aria-hidden=\"true\"\n              >\n                \u2026\n              </li>\n            } @else {\n              <li class=\"tedi-pagination__item\">\n                <button\n                  type=\"button\"\n                  class=\"tedi-pagination__page\"\n                  [class.tedi-pagination__page--selected]=\"item.selected\"\n                  [attr.aria-label]=\"\n                    item.selected\n                      ? mergedLabels().currentPageAriaLabel(item.page!)\n                      : mergedLabels().pageAriaLabel(item.page!)\n                  \"\n                  [attr.aria-current]=\"item.selected ? 'page' : null\"\n                  (click)=\"handlePageChange(item.page)\"\n                >\n                  {{ item.page }}\n                </button>\n              </li>\n            }\n          }\n        </ul>\n      }\n      @if (useCompactPicker()) {\n        <button\n          type=\"button\"\n          class=\"tedi-pagination__mobile-trigger\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"isMobileModalOpen()\"\n          [attr.aria-label]=\"mobileTriggerAriaLabel()\"\n          (click)=\"openMobilePicker()\"\n        >\n          <span class=\"tedi-pagination__mobile-trigger-label\" aria-hidden=\"true\">\n            <strong>{{ currentPage() }}</strong>\n            <span>/</span>\n            <span>{{ pageCount() }}</span>\n          </span>\n          <tedi-icon name=\"arrow_drop_down\" />\n        </button>\n      }\n\n      @if (showNext()) {\n        <button\n          tedi-button\n          type=\"button\"\n          size=\"small\"\n          [variant]=\"arrowVariant()\"\n          class=\"tedi-pagination__nav-button tedi-pagination__nav-button--next\"\n          [attr.aria-label]=\"showArrowLabels() ? null : mergedLabels().next\"\n          [disabled]=\"nextItem().disabled\"\n          (click)=\"handlePageChange(nextItem().page)\"\n        >\n          @if (showArrowLabels()) {\n            <span>{{ mergedLabels().next }}</span>\n          }\n          <tedi-icon [name]=\"nextIcon()\" />\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<div class=\"tedi-pagination__slot-end\">\n  @if (showPageSizeSelect()) {\n    <div class=\"tedi-pagination__page-size\">\n      @if (useCompactPicker()) {\n        <span class=\"tedi-pagination__page-size-label\">\n          {{ mergedLabels().pageSize }}\n        </span>\n        <button\n          type=\"button\"\n          class=\"tedi-pagination__page-size-trigger\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"isPageSizeModalOpen()\"\n          [attr.aria-label]=\"mobilePageSizeAriaLabel()\"\n          (click)=\"openPageSizePicker()\"\n        >\n          <span aria-hidden=\"true\">{{ pageSize() }}</span>\n          <tedi-icon name=\"arrow_drop_down\" />\n        </button>\n      } @else {\n        <label class=\"tedi-pagination__page-size-label\" [attr.for]=\"pageSizeInputId\">\n          {{ mergedLabels().pageSize }}\n        </label>\n        <tedi-select\n          class=\"tedi-pagination__page-size-select\"\n          [inputId]=\"pageSizeInputId\"\n          size=\"small\"\n          [options]=\"pageSizeSelectOptions()\"\n          bindLabel=\"label\"\n          bindValue=\"value\"\n          [ngModel]=\"pageSize()\"\n          (ngModelChange)=\"handlePageSizeChange($event)\"\n        />\n      }\n    </div>\n  }\n</div>\n", styles: [".tedi-pagination{display:grid;grid-template-areas:\"results pager page-size\";grid-template-columns:1fr auto 1fr;gap:var(--layout-grid-gutters-16);align-items:center;width:100%;padding:var(--pagination-padding-y) var(--pagination-padding-x)}.tedi-pagination.tedi-pagination--no-pager{grid-template-areas:\"results page-size\";grid-template-columns:1fr auto}@media (max-width: 47.98rem){.tedi-pagination{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08)}.tedi-pagination.tedi-pagination--no-pager{flex-direction:row;gap:var(--layout-grid-gutters-16);justify-content:space-between}}.tedi-pagination--bg-white{background:var(--general-surface-primary)}.tedi-pagination--bg-transparent{background:transparent}.tedi-pagination--divider-top:not(.tedi-pagination--bg-transparent){border-top:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--divider-bottom:not(.tedi-pagination--bg-transparent){border-bottom:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--no-pager .tedi-pagination__slot-center,.tedi-pagination--no-page-size .tedi-pagination__slot-end{display:none}.tedi-pagination__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}.tedi-pagination__slot-start{display:inline-flex;grid-area:results;align-items:center;justify-self:start;min-width:0}@media (max-width: 47.98rem){.tedi-pagination__slot-start{justify-content:center;justify-self:center;order:2}}@media (max-width: 47.98rem){.tedi-pagination--no-pager .tedi-pagination__slot-start{justify-content:flex-start;justify-self:start;order:0}}.tedi-pagination__slot-center{display:inline-flex;grid-area:pager;align-items:center;justify-self:center}@media (max-width: 47.98rem){.tedi-pagination__slot-center{order:3}}.tedi-pagination__slot-end{display:flex;grid-area:page-size;align-items:center;justify-content:flex-end;min-width:0}@media (max-width: 47.98rem){.tedi-pagination__slot-end{flex-direction:column;gap:var(--layout-grid-gutters-04);justify-content:center;justify-self:center;order:1}}@media (max-width: 47.98rem){.tedi-pagination--no-pager .tedi-pagination__slot-end{flex-direction:row;gap:var(--form-field-inner-spacing);justify-content:flex-end;justify-self:end}}.tedi-pagination__results{flex:0 0 auto;font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media (max-width: 47.98rem){.tedi-pagination__results{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__nav{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}@media (max-width: 47.98rem){.tedi-pagination__nav{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--layout-grid-gutters-16)}}@media (max-width: 47.98rem){.tedi-pagination--no-arrows .tedi-pagination__nav{grid-template-columns:auto}}.tedi-pagination__list{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-08);align-items:center;padding:0;margin:0;list-style:none}.tedi-pagination__item{display:inline-flex;align-items:center;justify-content:center}.tedi-pagination__item--ellipsis{width:var(--pagination-button-size);height:var(--pagination-button-size);font-family:var(--family-default);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);-webkit-user-select:none;user-select:none}.tedi-pagination__page{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-button-size);height:var(--pagination-button-size);padding:0 var(--layout-grid-gutters-04);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-pagination__page:before{position:absolute;inset:-4px;content:\"\"}.tedi-pagination__page:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-pagination__page:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-pagination__page:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__page--selected{color:var(--general-text-white);cursor:default;background:var(--general-surface-brand-secondary)}.tedi-pagination__page--selected:hover,.tedi-pagination__page--selected:active,.tedi-pagination__page--selected:focus-visible{color:var(--general-text-white);background:var(--general-surface-brand-secondary)}@media (max-width: 47.98rem){.tedi-pagination__nav-button--previous{justify-self:end}}@media (max-width: 47.98rem){.tedi-pagination__nav-button--next{justify-self:start}}.tedi-pagination__mobile-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;justify-self:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-pagination__mobile-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__mobile-trigger-label{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}.tedi-pagination__mobile-trigger-label strong{font-weight:var(--body-bold-weight);color:var(--general-text-brand)}.tedi-pagination__page-size{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;justify-content:flex-end;min-width:0}@media (max-width: 47.98rem){.tedi-pagination__page-size{flex-direction:column;gap:var(--layout-grid-gutters-04);align-items:center}}@media (max-width: 47.98rem){.tedi-pagination--no-pager .tedi-pagination__page-size{flex-direction:row;gap:var(--form-field-inner-spacing)}}.tedi-pagination__page-size-label{font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media (max-width: 47.98rem){.tedi-pagination__page-size-label{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__page-size-select.tedi-select{width:auto;min-width:64px}.tedi-pagination__page-size-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-pagination__page-size-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\n"] }]
+                    }, template: "<span\n  class=\"tedi-pagination__status\"\n  role=\"status\"\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n>\n  {{ statusText() }}\n</span>\n\n<div class=\"tedi-pagination__slot-start\">\n  @if (showResults()) {\n    @if (customResults()) {\n      <ng-content select=\"[tediPaginationResults]\" />\n    } @else {\n      <span class=\"tedi-pagination__results\">\n        {{ mergedLabels().results(totalItems()!) }}\n      </span>\n    }\n  }\n</div>\n\n<div class=\"tedi-pagination__slot-center\">\n  @if (showPager()) {\n    <nav class=\"tedi-pagination__nav\" [attr.aria-label]=\"mergedLabels().ariaLabel\">\n      @if (showPrevious()) {\n        <button\n          tedi-button\n          type=\"button\"\n          size=\"small\"\n          [variant]=\"arrowVariant()\"\n          class=\"tedi-pagination__nav-button tedi-pagination__nav-button--previous\"\n          [attr.aria-label]=\"showArrowLabels() ? null : mergedLabels().previous\"\n          [disabled]=\"previousItem().disabled\"\n          (click)=\"handlePageChange(previousItem().page)\"\n        >\n          <tedi-icon [name]=\"previousIcon()\" />\n          @if (showArrowLabels()) {\n            <span>{{ mergedLabels().previous }}</span>\n          }\n        </button>\n      }\n\n      @if (!useCompactPicker()) {\n        <ul class=\"tedi-pagination__list\">\n          @for (item of pageItems(); track $index) {\n            @if (item.type === \"ellipsis\") {\n              <li\n                class=\"tedi-pagination__item tedi-pagination__item--ellipsis\"\n                aria-hidden=\"true\"\n              >\n                \u2026\n              </li>\n            } @else {\n              <li class=\"tedi-pagination__item\">\n                <button\n                  type=\"button\"\n                  class=\"tedi-pagination__page\"\n                  [class.tedi-pagination__page--selected]=\"item.selected\"\n                  [attr.aria-label]=\"\n                    item.selected\n                      ? mergedLabels().currentPageAriaLabel(item.page!)\n                      : mergedLabels().pageAriaLabel(item.page!)\n                  \"\n                  [attr.aria-current]=\"item.selected ? 'page' : null\"\n                  (click)=\"handlePageChange(item.page)\"\n                >\n                  {{ item.page }}\n                </button>\n              </li>\n            }\n          }\n        </ul>\n      }\n      @if (useCompactPicker()) {\n        <button\n          type=\"button\"\n          class=\"tedi-pagination__mobile-trigger\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"isMobileModalOpen()\"\n          [attr.aria-label]=\"mobileTriggerAriaLabel()\"\n          (click)=\"openMobilePicker()\"\n        >\n          <span class=\"tedi-pagination__mobile-trigger-label\" aria-hidden=\"true\">\n            <strong>{{ currentPage() }}</strong>\n            <span>/</span>\n            <span>{{ pageCount() }}</span>\n          </span>\n          <tedi-icon name=\"arrow_drop_down\" />\n        </button>\n      }\n\n      @if (showNext()) {\n        <button\n          tedi-button\n          type=\"button\"\n          size=\"small\"\n          [variant]=\"arrowVariant()\"\n          class=\"tedi-pagination__nav-button tedi-pagination__nav-button--next\"\n          [attr.aria-label]=\"showArrowLabels() ? null : mergedLabels().next\"\n          [disabled]=\"nextItem().disabled\"\n          (click)=\"handlePageChange(nextItem().page)\"\n        >\n          @if (showArrowLabels()) {\n            <span>{{ mergedLabels().next }}</span>\n          }\n          <tedi-icon [name]=\"nextIcon()\" />\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<div class=\"tedi-pagination__slot-end\">\n  @if (showPageSizeSelect()) {\n    <div class=\"tedi-pagination__page-size\">\n      @if (useCompactPicker()) {\n        <span class=\"tedi-pagination__page-size-label\">\n          {{ mergedLabels().pageSize }}\n        </span>\n        <button\n          type=\"button\"\n          class=\"tedi-pagination__page-size-trigger\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"isPageSizeModalOpen()\"\n          [attr.aria-label]=\"mobilePageSizeAriaLabel()\"\n          (click)=\"openPageSizePicker()\"\n        >\n          <span aria-hidden=\"true\">{{ selectedPageSizeLabel() }}</span>\n          <tedi-icon name=\"arrow_drop_down\" />\n        </button>\n      } @else {\n        <label class=\"tedi-pagination__page-size-label\" [attr.for]=\"pageSizeInputId\">\n          {{ mergedLabels().pageSize }}\n        </label>\n        <tedi-select\n          class=\"tedi-pagination__page-size-select\"\n          [inputId]=\"pageSizeInputId\"\n          size=\"small\"\n          [options]=\"pageSizeSelectOptions()\"\n          bindLabel=\"label\"\n          bindValue=\"value\"\n          [dropdownWidthRef]=\"null\"\n          dropdownAlign=\"end\"\n          [ngModel]=\"pageSize()\"\n          (ngModelChange)=\"handlePageSizeChange($event)\"\n        />\n      }\n    </div>\n  }\n</div>\n", styles: [".tedi-pagination{display:grid;grid-template-areas:\"results pager page-size\";grid-template-columns:1fr auto 1fr;gap:var(--layout-grid-gutters-16);align-items:center;width:100%;padding:var(--pagination-padding-y) var(--pagination-padding-x)}.tedi-pagination.tedi-pagination--no-pager{grid-template-areas:\"results page-size\";grid-template-columns:1fr auto}@media (max-width: 47.98rem){.tedi-pagination{display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08)}.tedi-pagination.tedi-pagination--no-pager{flex-direction:row;gap:var(--layout-grid-gutters-16);justify-content:space-between}}.tedi-pagination--bg-white{background:var(--general-surface-primary)}.tedi-pagination--bg-transparent{background:transparent}.tedi-pagination--divider-top:not(.tedi-pagination--bg-transparent){border-top:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--divider-bottom:not(.tedi-pagination--bg-transparent){border-bottom:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--no-pager .tedi-pagination__slot-center,.tedi-pagination--no-page-size .tedi-pagination__slot-end{display:none}.tedi-pagination__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}.tedi-pagination__slot-start{display:inline-flex;grid-area:results;align-items:center;justify-self:start;min-width:0}@media (max-width: 47.98rem){.tedi-pagination__slot-start{justify-content:center;justify-self:center;order:2}}@media (max-width: 47.98rem){.tedi-pagination--no-pager .tedi-pagination__slot-start{justify-content:flex-start;justify-self:start;order:0}}.tedi-pagination__slot-center{display:inline-flex;grid-area:pager;align-items:center;justify-self:center}@media (max-width: 47.98rem){.tedi-pagination__slot-center{order:3}}.tedi-pagination__slot-end{display:flex;grid-area:page-size;align-items:center;justify-content:flex-end;min-width:0}@media (max-width: 47.98rem){.tedi-pagination__slot-end{flex-direction:column;gap:var(--layout-grid-gutters-04);justify-content:center;justify-self:center;order:1}}@media (max-width: 47.98rem){.tedi-pagination--no-pager .tedi-pagination__slot-end{flex-direction:row;gap:var(--form-field-inner-spacing);justify-content:flex-end;justify-self:end}}.tedi-pagination__results{flex:0 0 auto;font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media (max-width: 47.98rem){.tedi-pagination__results{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__nav{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}@media (max-width: 47.98rem){.tedi-pagination__nav{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--layout-grid-gutters-16)}}.tedi-pagination__list{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-08);align-items:center;padding:0;margin:0;list-style:none}.tedi-pagination__item{display:inline-flex;align-items:center;justify-content:center}.tedi-pagination__item--ellipsis{width:var(--pagination-button-size);height:var(--pagination-button-size);font-family:var(--family-default);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);-webkit-user-select:none;user-select:none}.tedi-pagination__page{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-button-size);height:var(--pagination-button-size);padding:0 var(--layout-grid-gutters-04);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-pagination__page:before{position:absolute;inset:-4px;content:\"\"}.tedi-pagination__page:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-pagination__page:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-pagination__page:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__page--selected{color:var(--general-text-white);cursor:default;background:var(--general-surface-brand-secondary)}.tedi-pagination__page--selected:hover,.tedi-pagination__page--selected:active,.tedi-pagination__page--selected:focus-visible{color:var(--general-text-white);background:var(--general-surface-brand-secondary)}@media (max-width: 47.98rem){.tedi-pagination__nav-button--previous{grid-column:1;justify-self:end}}@media (max-width: 47.98rem){.tedi-pagination__nav-button--next{grid-column:3;justify-self:start}}.tedi-pagination__mobile-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;justify-self:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}@media (max-width: 47.98rem){.tedi-pagination__mobile-trigger{grid-column:2}}.tedi-pagination__mobile-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__mobile-trigger-label{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}.tedi-pagination__mobile-trigger-label strong{font-weight:var(--body-bold-weight);color:var(--general-text-brand)}.tedi-pagination__page-size{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;justify-content:flex-end;min-width:0}@media (max-width: 47.98rem){.tedi-pagination__page-size{flex-direction:column;gap:var(--layout-grid-gutters-04);align-items:center}}@media (max-width: 47.98rem){.tedi-pagination--no-pager .tedi-pagination__page-size{flex-direction:row;gap:var(--form-field-inner-spacing)}}.tedi-pagination__page-size-label{font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media (max-width: 47.98rem){.tedi-pagination__page-size-label{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__page-size-select.tedi-select{width:auto;min-width:64px}.tedi-pagination__page-size-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-pagination__page-size-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\n"] }]
         }], ctorParameters: () => [] });
 
 class TediTableHeaderButtonComponent {
@@ -8786,7 +8857,7 @@ class TediTableHeaderButtonComponent {
     });
     iconVariant = computed(() => this.filled() ? "filled" : "outlined");
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TediTableHeaderButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TediTableHeaderButtonComponent, isStandalone: true, selector: "button[tedi-table-header-button]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "class.tedi-table-header-button--selected": "selected()", "disabled": "disabled() || null", "attr.aria-label": "ariaLabel() || null" }, classAttribute: "tedi-table-header-button" }, ngImport: i0, template: '<ng-content /><tedi-icon [name]="icon()" [variant]="iconVariant()" color="inherit" [size]="iconSize()" />', isInline: true, styles: [".tedi-table-header-button{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:center;min-width:var(--button-xs-icon-size);min-height:var(--button-xs-icon-size);padding:0;font:inherit;color:inherit;text-align:inherit;cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm);transition:background-color .12s ease,color .12s ease,outline-color .12s ease}.tedi-table-header-button:hover:not(:disabled){background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table-header-button:active:not(:disabled){color:var(--button-main-primary-background-default);background:var(--button-main-neutral-icon-only-background-active)}.tedi-table-header-button:focus-visible{color:var(--button-main-primary-background-default);outline:var(--tedi-borders-02) solid var(--general-border-focus);outline-offset:0}.tedi-table-header-button--selected{color:var(--button-main-primary-background-default)}.tedi-table-header-button:disabled{color:var(--general-text-disabled);cursor:not-allowed;background:transparent}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TediTableHeaderButtonComponent, isStandalone: true, selector: "button[tedi-table-header-button]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "class.tedi-table-header-button--selected": "selected()", "disabled": "disabled() || null", "attr.aria-label": "ariaLabel() || null" }, classAttribute: "tedi-table-header-button" }, ngImport: i0, template: '<ng-content /><tedi-icon [name]="icon()" [variant]="iconVariant()" color="inherit" [size]="iconSize()" />', isInline: true, styles: [".tedi-table-header-button{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:center;min-width:var(--button-xs-icon-size);min-height:var(--button-xs-icon-size);padding:0;font:inherit;color:inherit;text-align:inherit;cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm);transition:background-color .12s ease,color .12s ease,outline-color .12s ease}.tedi-table-header-button:hover:not(:disabled){background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table-header-button:active:not(:disabled){color:var(--button-main-primary-background-default);background:var(--button-main-neutral-icon-only-background-active)}.tedi-table-header-button:focus-visible{color:var(--button-main-primary-background-default);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-02);background:transparent;border-color:transparent}.tedi-table-header-button--selected{color:var(--button-main-primary-background-default)}.tedi-table-header-button--selected:focus-visible{color:var(--button-main-primary-background-default);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-02);background:transparent;border-color:transparent}.tedi-table-header-button:disabled{color:var(--general-text-disabled);cursor:not-allowed;background:transparent}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TediTableHeaderButtonComponent, decorators: [{
             type: Component,
@@ -8796,7 +8867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         "[class.tedi-table-header-button--selected]": "selected()",
                         "[disabled]": "disabled() || null",
                         "[attr.aria-label]": "ariaLabel() || null",
-                    }, styles: [".tedi-table-header-button{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:center;min-width:var(--button-xs-icon-size);min-height:var(--button-xs-icon-size);padding:0;font:inherit;color:inherit;text-align:inherit;cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm);transition:background-color .12s ease,color .12s ease,outline-color .12s ease}.tedi-table-header-button:hover:not(:disabled){background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table-header-button:active:not(:disabled){color:var(--button-main-primary-background-default);background:var(--button-main-neutral-icon-only-background-active)}.tedi-table-header-button:focus-visible{color:var(--button-main-primary-background-default);outline:var(--tedi-borders-02) solid var(--general-border-focus);outline-offset:0}.tedi-table-header-button--selected{color:var(--button-main-primary-background-default)}.tedi-table-header-button:disabled{color:var(--general-text-disabled);cursor:not-allowed;background:transparent}\n"] }]
+                    }, styles: [".tedi-table-header-button{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:center;min-width:var(--button-xs-icon-size);min-height:var(--button-xs-icon-size);padding:0;font:inherit;color:inherit;text-align:inherit;cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm);transition:background-color .12s ease,color .12s ease,outline-color .12s ease}.tedi-table-header-button:hover:not(:disabled){background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table-header-button:active:not(:disabled){color:var(--button-main-primary-background-default);background:var(--button-main-neutral-icon-only-background-active)}.tedi-table-header-button:focus-visible{color:var(--button-main-primary-background-default);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-02);background:transparent;border-color:transparent}.tedi-table-header-button--selected{color:var(--button-main-primary-background-default)}.tedi-table-header-button--selected:focus-visible{color:var(--button-main-primary-background-default);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-02);background:transparent;border-color:transparent}.tedi-table-header-button:disabled{color:var(--general-text-disabled);cursor:not-allowed;background:transparent}\n"] }]
         }] });
 
 const TEDI_TABLE_CONTEXT = new InjectionToken("TEDI_TABLE_CONTEXT");
@@ -9193,21 +9264,37 @@ class TediTableComponent {
      */
     interactive = input(false, { transform: booleanAttribute });
     /**
-     * Makes data rows reorderable via drag-and-drop. The consumer reorders the
-     * `data` array in `(rowDrop)` (typically with `moveItemInArray`) and passes
-     * the new array back via `[data]`. Pair with `table-layout: fixed` (via the
-     * `tedi-table--draggable-rows` host modifier added automatically) so the
-     * drag preview preserves cell widths.
+     * Supplies an explicit accessible name for each interactive row. Without it,
+     * a `role="button"` row's name is assembled from all its cell text — verbose
+     * and confusing under a screen reader. Receives the TanStack `Row`; return a
+     * concise label (e.g. the row's primary identifier). Only applied while
+     * `interactive` is `true`.
+     * @default undefined
+     */
+    rowAriaLabel = input(undefined);
+    /**
+     * Makes data rows reorderable by **mouse drag and keyboard**. Mouse: drag a
+     * row by its handle. Keyboard: `Tab` to a row's reorder handle, `Space`/`Enter`
+     * to pick it up, Up/Down arrows to move it one position (clamped to the
+     * current page), `Space`/`Enter` to drop, `Escape` to cancel. Every move is
+     * emitted via `(rowDrop)` with **source `data` indices** — apply it with
+     * `moveItemInArray(data, previousIndex, currentIndex)` and pass the new array
+     * back via `[data]`. The `tedi-table--draggable` host modifier is added
+     * automatically; pair with `table-layout: fixed` so the drag preview
+     * preserves cell widths.
      * @default false
      */
-    draggableRows = input(false, { transform: booleanAttribute });
+    reorderableRows = input(false, { transform: booleanAttribute });
     /**
-     * Makes columns reorderable via drag-and-drop on the header row. Reorders
-     * the table's internal `columnOrder` state directly — no consumer wiring
-     * needed beyond persisting the state slice if desired.
+     * Makes columns reorderable by **mouse drag and keyboard** on the header row.
+     * Mouse: drag a header cell by its handle. Keyboard: `Tab` to a header,
+     * `Space`/`Enter` to pick up the column, Left/Right arrows to move it,
+     * `Space`/`Enter` to drop, `Escape` to cancel. Reorders the table's internal
+     * `columnOrder` state directly — no consumer wiring needed beyond persisting
+     * the state slice if desired.
      * @default false
      */
-    draggableColumns = input(false, { transform: booleanAttribute });
+    reorderableColumns = input(false, { transform: booleanAttribute });
     /**
      * Emits the full merged table state whenever any slice changes (sorting,
      * filters, pagination, selection, expansion, column visibility / order).
@@ -9243,6 +9330,26 @@ class TediTableComponent {
     rowDetailsLabel = this.translation.track("table.row-details");
     dragColumnLabel = this.translation.track("table.drag-column");
     dragRowLabel = this.translation.track("table.drag-row");
+    // ── Keyboard column-reorder state machine ──────────────────────────────────
+    /** Currently picked-up column id (during keyboard reordering), or `null`. */
+    _pickedUpColumnId = signal(null);
+    /** Column order snapshot captured when picking up — restored on cancel. */
+    _originalOrder = [];
+    /** Computed phase derived from whether a column is currently picked up. */
+    reorderPhase = computed(() => this._pickedUpColumnId() !== null ? "picked-up" : "idle");
+    /** Id of the column under keyboard focus for reordering. */
+    pickedUpColumnId = this._pickedUpColumnId.asReadonly();
+    // ── Keyboard row-reorder state machine ─────────────────────────────────────
+    // Tracked by the row's `original` data reference (not `row.id`, which is
+    // index-based by default and would change as rows reorder).
+    _pickedUpRow = signal(null);
+    /** Source `data` index of the picked-up row at pickup — used to restore on
+     *  cancel. */
+    _originalRowSourceIndex = -1;
+    /** The data item of the row currently picked up for keyboard reordering. */
+    pickedUpRow = this._pickedUpRow.asReadonly();
+    // Live-region id for announcing reorder events to screen readers.
+    liveRegionId = `tedi-table-live-${generateUUID()}`;
     persistence;
     tableState;
     SELECT_COLUMN_ID = SELECT_COLUMN_ID;
@@ -9326,7 +9433,7 @@ class TediTableComponent {
     augmentedColumns = computed(() => {
         const cols = this.columns();
         const leading = [];
-        if (this.draggableRows()) {
+        if (this.reorderableRows()) {
             leading.push({
                 id: DRAG_COLUMN_ID,
                 enableSorting: false,
@@ -9481,7 +9588,7 @@ class TediTableComponent {
             [this.fixedLayout(), "tedi-table--fixed-layout"],
             [this.interactive() || rowExpand, "tedi-table--clickable-rows"],
             [hoverEnabled, "tedi-table--row-hover"],
-            [this.draggableRows() || this.draggableColumns(), "tedi-table--draggable"],
+            [this.reorderableRows() || this.reorderableColumns(), "tedi-table--draggable"],
         ];
         const classes = ["tedi-table", `tedi-table--${this.size()}`];
         for (const [on, name] of flags)
@@ -9620,6 +9727,10 @@ class TediTableComponent {
         });
     }
     handleRowClick(row) {
+        // A click that ends a text drag-select shouldn't activate the row —
+        // otherwise copying cell text inadvertently fires the row action.
+        if (this.hasTextSelection())
+            return;
         if (this.expandTrigger() === "row" && row.getCanExpand()) {
             row.toggleExpanded();
         }
@@ -9627,6 +9738,21 @@ class TediTableComponent {
             this.rowClick.emit(row);
         }
     }
+    hasTextSelection() {
+        if (typeof window === "undefined")
+            return false;
+        const selection = window.getSelection();
+        return Boolean(selection &&
+            !selection.isCollapsed &&
+            selection.toString().trim().length > 0);
+    }
+    /** Accessible name for an interactive row, from `rowAriaLabel`. `null` when
+     *  the row is not interactive or no resolver is provided. */
+    rowAriaLabelFor(row) {
+        if (!this.interactive())
+            return null;
+        return this.rowAriaLabel()?.(row) ?? null;
+    }
     rowExpandsOnClick(row) {
         return this.expandTrigger() === "row" && row.getCanExpand();
     }
@@ -9718,6 +9844,128 @@ class TediTableComponent {
             currentIndex: currentSourceIndex,
         });
     }
+    // ── Keyboard row-reorder handlers ──────────────────────────────────────────
+    /** Stable id for a row's reorder handle button — used to restore keyboard
+     *  focus after a live move relocates it. */
+    rowReorderHandleId(rowId) {
+        return `${this.resolvedId()}-row-reorder-${rowId}`;
+    }
+    /** Emit a synthetic `(rowDrop)` carrying source `data` indices, matching the
+     *  shape consumers already handle with `moveItemInArray`. */
+    emitRowMove(previousSourceIndex, currentSourceIndex) {
+        if (previousSourceIndex === currentSourceIndex)
+            return;
+        this.rowDrop.emit({
+            previousIndex: previousSourceIndex,
+            currentIndex: currentSourceIndex,
+            item: null,
+            container: null,
+            previousContainer: null,
+            isPointerOverContainer: false,
+            distance: { x: 0, y: 0 },
+            dropPoint: { x: 0, y: 0 },
+            event: null,
+        });
+    }
+    handleRowReorderKeydown(event, row) {
+        if (!this.reorderableRows())
+            return;
+        const picked = this._pickedUpRow();
+        switch (event.key) {
+            case " ":
+            case "Enter":
+                event.preventDefault();
+                if (picked === null) {
+                    this.handleRowPickup(row);
+                }
+                else {
+                    this.handleRowReorderDrop();
+                }
+                break;
+            case "Escape":
+                if (picked !== null) {
+                    event.preventDefault();
+                    this.handleRowReorderCancel();
+                }
+                break;
+            case "ArrowUp":
+                if (picked !== null) {
+                    event.preventDefault();
+                    this.movePickedRow(-1);
+                }
+                break;
+            case "ArrowDown":
+                if (picked !== null) {
+                    event.preventDefault();
+                    this.movePickedRow(1);
+                }
+                break;
+        }
+    }
+    /** Pick up `row` for keyboard reordering. */
+    handleRowPickup(row) {
+        this._pickedUpRow.set(row.original);
+        this._originalRowSourceIndex = this.data().indexOf(row.original);
+        const position = this.rows().findIndex((r) => r.original === row.original) + 1;
+        this.announceReorder("table.row-reorder.pickup", position);
+    }
+    /**
+     * Move the picked-up row one position in `direction`, clamped to the current
+     * page's rendered rows. Emits the move through `(rowDrop)` (source indices)
+     * for the consumer to apply, so the reorder is visible while moving.
+     */
+    movePickedRow(direction) {
+        const picked = this._pickedUpRow();
+        if (picked === null)
+            return;
+        const rendered = this.rows();
+        const currentIndex = rendered.findIndex((r) => r.original === picked);
+        if (currentIndex < 0)
+            return;
+        const targetIndex = currentIndex + direction;
+        if (targetIndex < 0 || targetIndex >= rendered.length)
+            return;
+        const data = this.data();
+        const previousSourceIndex = data.indexOf(rendered[currentIndex].original);
+        const currentSourceIndex = data.indexOf(rendered[targetIndex].original);
+        if (previousSourceIndex < 0 || currentSourceIndex < 0)
+            return;
+        this.emitRowMove(previousSourceIndex, currentSourceIndex);
+        this.announceReorder("table.row-reorder.move", targetIndex + 1);
+        this.focusRowReorderHandle(picked);
+    }
+    /** Drop the picked-up row, keeping its already-applied live position. */
+    handleRowReorderDrop() {
+        const picked = this._pickedUpRow();
+        if (picked === null)
+            return;
+        const position = this.rows().findIndex((r) => r.original === picked) + 1;
+        this._pickedUpRow.set(null);
+        this._originalRowSourceIndex = -1;
+        this.announceReorder("table.row-reorder.drop", position);
+    }
+    /** Cancel the reorder, emitting a move that returns the row to its original
+     *  position captured at pickup. */
+    handleRowReorderCancel() {
+        const picked = this._pickedUpRow();
+        if (picked !== null && this._originalRowSourceIndex >= 0) {
+            const currentSourceIndex = this.data().indexOf(picked);
+            if (currentSourceIndex >= 0) {
+                this.emitRowMove(currentSourceIndex, this._originalRowSourceIndex);
+            }
+        }
+        this._pickedUpRow.set(null);
+        this._originalRowSourceIndex = -1;
+        this.announceReorder("table.row-reorder.cancel");
+    }
+    focusRowReorderHandle(picked) {
+        afterNextRender(() => {
+            const row = this.rows().find((r) => r.original === picked);
+            if (row) {
+                document.getElementById(this.rowReorderHandleId(row.id))?.focus();
+            }
+        }, { injector: this.injector });
+    }
     handleColumnDrop(event) {
         if (event.previousIndex === event.currentIndex)
             return;
@@ -9758,6 +10006,153 @@ class TediTableComponent {
             return fullOrder;
         }, (prev) => prev.columnOrder ?? [], (value) => ({ columnOrder: value }));
     }
+    // ── Keyboard column-reorder handlers ───────────────────────────────────────
+    /** Announce a message to the live region for screen-reader accessibility. */
+    announceReorder(messageKey, ...args) {
+        const msg = this.translation.translate(messageKey, ...args);
+        const region = document.getElementById(this.liveRegionId);
+        if (region)
+            region.textContent = msg;
+    }
+    /**
+     * Reorder the column at `targetIndex` to `sourceIndex` and persist the
+     * resulting order via TanStack's column-order patch. Returns the visible
+     * label of the moved column for use in ARIA announcements.
+     */
+    executeColumnReorder(sourceIndex, targetIndex) {
+        const visibleLeafIds = untracked(() => this.table.getVisibleLeafColumns().map((column) => column.id));
+        if (sourceIndex < 0 ||
+            sourceIndex >= visibleLeafIds.length ||
+            targetIndex < 0 ||
+            targetIndex >= visibleLeafIds.length) {
+            return "";
+        }
+        // Build the new full leaf order using the same algorithm as handleColumnDrop,
+        // but with the picked-up column moved from sourceIndex to targetIndex.
+        const reorderedVisible = [...visibleLeafIds];
+        const [moved] = reorderedVisible.splice(sourceIndex, 1);
+        reorderedVisible.splice(targetIndex, 0, moved);
+        this.applyPatch((prev) => {
+            // Seed from the full leaf list (not just visible ids) so hidden columns
+            // stay anchored in the persisted order — same source as handleColumnDrop.
+            const fullOrder = prev.length > 0
+                ? [...prev]
+                : untracked(() => this.table.getAllLeafColumns().map((c) => c.id));
+            const visibleSet = new Set(visibleLeafIds);
+            let visibleCursor = 0;
+            for (let i = 0; i < fullOrder.length; i++) {
+                if (visibleSet.has(fullOrder[i])) {
+                    fullOrder[i] = reorderedVisible[visibleCursor++];
+                }
+            }
+            for (const id of reorderedVisible) {
+                if (!fullOrder.includes(id))
+                    fullOrder.push(id);
+            }
+            return fullOrder;
+        }, (prev) => prev.columnOrder ?? [], (value) => ({ columnOrder: value }));
+        // Resolve the visible label of the moved column for ARIA announcements.
+        const col = this.table.getVisibleLeafColumns().find((c) => c.id === moved);
+        return col ? this.resolveColumnLabel(col) : moved;
+    }
+    /** Pick up the column at `header` for keyboard reordering. */
+    handlePickup(header) {
+        this._originalOrder = [...(this.tableState().columnOrder ?? [])];
+        this._pickedUpColumnId.set(header.column.id);
+        const label = this.resolveColumnLabel(header.column);
+        this.announceReorder("table.reorder.pickup", label);
+    }
+    /**
+     * Move the picked-up column one position in `direction` and apply it
+     * immediately, so the reorder is visible while moving rather than only on
+     * commit. Clamps at the visible-column boundaries.
+     */
+    movePickedColumn(direction, header) {
+        const pickedId = this.pickedUpColumnId();
+        if (pickedId === null)
+            return;
+        const visibleLeafIds = untracked(() => this.table.getVisibleLeafColumns().map((c) => c.id));
+        const currentIndex = visibleLeafIds.indexOf(pickedId);
+        if (currentIndex < 0)
+            return;
+        const targetIndex = currentIndex + direction;
+        if (targetIndex < 0 || targetIndex >= visibleLeafIds.length)
+            return;
+        const label = this.executeColumnReorder(currentIndex, targetIndex) ||
+            this.resolveColumnLabel(header.column);
+        this.announceReorder("table.reorder.move", label, targetIndex + 1);
+        // Reordering relocates the focused handle in the DOM; restore focus to it
+        // after the view updates so consecutive arrow presses keep moving the same
+        // column instead of stalling after one step.
+        afterNextRender(() => document.getElementById(this.reorderHandleId(pickedId))?.focus(), { injector: this.injector });
+    }
+    /** Stable id for a column's reorder handle button — used to restore keyboard
+     *  focus after a live move relocates it. */
+    reorderHandleId(columnId) {
+        return `${this.resolvedId()}-reorder-${columnId}`;
+    }
+    /** Drop the picked-up column, keeping its already-applied live position. */
+    handleDrop(header) {
+        const pickedId = this.pickedUpColumnId();
+        if (pickedId === null)
+            return;
+        const position = untracked(() => this.table.getVisibleLeafColumns().findIndex((c) => c.id === pickedId)) + 1;
+        this._pickedUpColumnId.set(null);
+        this._originalOrder = [];
+        this.announceReorder("table.reorder.drop", this.resolveColumnLabel(header.column), position);
+    }
+    /** Cancel the current reorder, restoring the order captured at pickup. */
+    handleCancel() {
+        const original = [...this._originalOrder];
+        this.applyPatch(() => original, (prev) => prev.columnOrder ?? [], (value) => ({ columnOrder: value }));
+        this._pickedUpColumnId.set(null);
+        this._originalOrder = [];
+        this.announceReorder("table.reorder.cancel");
+    }
+    handleHeaderKeydown(event, header) {
+        if (!this.reorderableColumns())
+            return;
+        // The keydown listener lives on the <th>, so Space/Enter from nested sort or
+        // filter controls bubbles here. Only act when the event originates from the
+        // drag handle (or the <th> itself) — otherwise bail so we don't
+        // preventDefault and hijack the nested button's activation.
+        const target = event.target;
+        const fromHandle = !!target?.closest(".tedi-table__drag-handle");
+        const fromHeaderCell = target === event.currentTarget;
+        if (!fromHandle && !fromHeaderCell)
+            return;
+        const picked = this.pickedUpColumnId();
+        switch (event.key) {
+            case " ":
+            case "Enter":
+                event.preventDefault();
+                if (picked === null) {
+                    this.handlePickup(header);
+                }
+                else {
+                    this.handleDrop(header);
+                }
+                break;
+            case "Escape":
+                if (picked !== null) {
+                    event.preventDefault();
+                    this.handleCancel();
+                }
+                break;
+            case "ArrowLeft":
+                if (picked !== null) {
+                    event.preventDefault();
+                    this.movePickedColumn(-1, header);
+                }
+                break;
+            case "ArrowRight":
+                if (picked !== null) {
+                    event.preventDefault();
+                    this.movePickedColumn(1, header);
+                }
+                break;
+        }
+    }
     handlePaginationPageChange(nextPage) {
         this.table.setPageIndex(nextPage - 1);
     }
@@ -10049,13 +10444,13 @@ class TediTableComponent {
         return value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TediTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TediTableComponent, isStandalone: true, selector: "tedi-table", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, verticalBorders: { classPropertyName: "verticalBorders", publicName: "verticalBorders", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, stickyFirstColumn: { classPropertyName: "stickyFirstColumn", publicName: "stickyFirstColumn", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, fixedLayout: { classPropertyName: "fixedLayout", publicName: "fixedLayout", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, activeRowId: { classPropertyName: "activeRowId", publicName: "activeRowId", isSignal: true, isRequired: false, transformFunction: null }, selectedRowHighlight: { classPropertyName: "selectedRowHighlight", publicName: "selectedRowHighlight", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, enableRowSelection: { classPropertyName: "enableRowSelection", publicName: "enableRowSelection", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, enableColumnFilters: { classPropertyName: "enableColumnFilters", publicName: "enableColumnFilters", isSignal: true, isRequired: false, transformFunction: null }, renderSubComponent: { classPropertyName: "renderSubComponent", publicName: "renderSubComponent", isSignal: true, isRequired: false, transformFunction: null }, getRowCanExpand: { classPropertyName: "getRowCanExpand", publicName: "getRowCanExpand", isSignal: true, isRequired: false, transformFunction: null }, expandTrigger: { classPropertyName: "expandTrigger", publicName: "expandTrigger", isSignal: true, isRequired: false, transformFunction: null }, expandButtonVariant: { classPropertyName: "expandButtonVariant", publicName: "expandButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, expandButtonLabel: { classPropertyName: "expandButtonLabel", publicName: "expandButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, getSubRows: { classPropertyName: "getSubRows", publicName: "getSubRows", isSignal: true, isRequired: false, transformFunction: null }, 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 }, draggableRows: { classPropertyName: "draggableRows", publicName: "draggableRows", isSignal: true, isRequired: false, transformFunction: null }, draggableColumns: { classPropertyName: "draggableColumns", publicName: "draggableColumns", 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: "19.2.15", type: TediTableComponent, isStandalone: true, selector: "tedi-table", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, verticalBorders: { classPropertyName: "verticalBorders", publicName: "verticalBorders", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, stickyFirstColumn: { classPropertyName: "stickyFirstColumn", publicName: "stickyFirstColumn", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, fixedLayout: { classPropertyName: "fixedLayout", publicName: "fixedLayout", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, activeRowId: { classPropertyName: "activeRowId", publicName: "activeRowId", isSignal: true, isRequired: false, transformFunction: null }, selectedRowHighlight: { classPropertyName: "selectedRowHighlight", publicName: "selectedRowHighlight", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, enableRowSelection: { classPropertyName: "enableRowSelection", publicName: "enableRowSelection", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, enableColumnFilters: { classPropertyName: "enableColumnFilters", publicName: "enableColumnFilters", isSignal: true, isRequired: false, transformFunction: null }, renderSubComponent: { classPropertyName: "renderSubComponent", publicName: "renderSubComponent", isSignal: true, isRequired: false, transformFunction: null }, getRowCanExpand: { classPropertyName: "getRowCanExpand", publicName: "getRowCanExpand", isSignal: true, isRequired: false, transformFunction: null }, expandTrigger: { classPropertyName: "expandTrigger", publicName: "expandTrigger", isSignal: true, isRequired: false, transformFunction: null }, expandButtonVariant: { classPropertyName: "expandButtonVariant", publicName: "expandButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, expandButtonLabel: { classPropertyName: "expandButtonLabel", publicName: "expandButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, getSubRows: { classPropertyName: "getSubRows", publicName: "getSubRows", isSignal: true, isRequired: false, transformFunction: null }, 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 }], ngImport: i0, template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n@if (resolvedTopSlot(); as top) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"top.boundaryCount\"\n      [siblingCount]=\"top.siblingCount\"\n      [labels]=\"top.labels\"\n      [background]=\"top.background\"\n      [dividerPosition]=\"top.dividerPosition\"\n      [hideResults]=\"top.hideResults\"\n      [hidePageSize]=\"top.hidePageSize\"\n      [hidePager]=\"top.hidePager\"\n      [hideArrows]=\"top.hideArrows\"\n      [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n      [arrowVariant]=\"top.arrowVariant\"\n      [showArrowLabels]=\"top.showArrowLabels\"\n      [previousIcon]=\"top.previousIcon\"\n      [nextIcon]=\"top.nextIcon\"\n      [showModalTitle]=\"top.showModalTitle\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (topResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n\n<div class=\"tedi-table__scroll\" [attr.style]=\"maxHeightStyle()\">\n  <table\n    class=\"tedi-table__table\"\n    [attr.id]=\"id() || null\"\n    [attr.aria-rowcount]=\"ariaRowCount()\"\n    [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n  >\n    @if (caption(); as cap) {\n      <caption class=\"tedi-table__caption\">\n        @if (isString(cap)) {\n          {{ cap }}\n        } @else {\n          <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n        }\n      </caption>\n    }\n\n    <thead class=\"tedi-table__head\">\n      @for (\n        headerGroup of headerGroups();\n        track headerGroup.id;\n        let rowIndex = $index\n      ) {\n        <tr\n          class=\"tedi-table__row\"\n          [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n          [cdkDropListDisabled]=\"!draggableColumns() || rowIndex > 0\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"handleColumnDrop($event)\"\n        >\n          @for (header of headerGroup.headers; track header.id) {\n            @if (shouldRenderHeader(header, rowIndex)) {\n              @let meta = getColumnMeta(header.column);\n              @let ariaSort = getHeaderAriaSort(header.column);\n              @let headerLabel = getHeaderLabel(header.column);\n              @let rowSpan = getHeaderRowSpan(header, rowIndex);\n              <th\n                scope=\"col\"\n                cdkDrag\n                [cdkDragDisabled]=\"\n                  !draggableColumns() ||\n                  rowIndex > 0 ||\n                  header.column.id === SELECT_COLUMN_ID ||\n                  header.column.id === EXPAND_COLUMN_ID\n                \"\n                cdkDragLockAxis=\"x\"\n                [class]=\"\n                  'tedi-table__header-cell' +\n                  (isHeaderGroup(header)\n                    ? ' tedi-table__header-cell--group'\n                    : '') +\n                  (meta?.align\n                    ? ' tedi-table__cell--align-' + meta?.align\n                    : '') +\n                  (meta?.vAlign\n                    ? ' tedi-table__cell--valign-' + meta?.vAlign\n                    : '')\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n                [attr.rowspan]=\"rowSpan\"\n                [attr.aria-sort]=\"ariaSort\"\n                [attr.aria-label]=\"headerLabel\"\n                [style.width.px]=\"headerCellWidth(header.column)\"\n                [style.min-width.px]=\"columnMinWidth(header.column)\"\n                [style.max-width.px]=\"columnMaxWidth(header.column)\"\n              >\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                      draggableColumns() &&\n                      rowIndex === 0 &&\n                      !isHeaderGroup(header)\n                    ) {\n                      <button\n                        type=\"button\"\n                        cdkDragHandle\n                        class=\"tedi-table__drag-handle\"\n                        [attr.aria-label]=\"dragColumnLabel()\"\n                      >\n                        <tedi-icon\n                          name=\"drag_indicator\"\n                          [size]=\"18\"\n                          color=\"inherit\"\n                        />\n                      </button>\n                    }\n                    <ng-container\n                      *flexRender=\"\n                        header.column.columnDef.header;\n                        props: header.getContext();\n                        let content\n                      \"\n                    >\n                      @if (shouldRenderSortableHeader(header.column, content)) {\n                        <button\n                          tedi-table-header-button\n                          [icon]=\"sortIcon(header.column)\"\n                          [selected]=\"!!header.column.getIsSorted()\"\n                          (click)=\"handleSortToggle(header.column)\"\n                        >\n                          {{ content }}\n                        </button>\n                      } @else if (isString(content) || isNumber(content)) {\n                        {{ content }}\n                      } @else {\n                        {{ content }}\n                      }\n                    </ng-container>\n                    @if (shouldRenderFilterButton(header.column)) {\n                      <tedi-popover\n                        #filterPopover\n                        class=\"tedi-table__filter-popover\"\n                        position=\"bottom-end\"\n                        [preventOverflow]=\"true\"\n                      >\n                        <button\n                          tedi-popover-trigger\n                          tedi-table-header-button\n                          icon=\"filter_alt\"\n                          [selected]=\"filterIsActive(header.column)\"\n                          [filled]=\"filterIsActive(header.column)\"\n                          [aria-label]=\"filterAriaLabel(header.column)\"\n                          (click)=\"handleFilterTriggerClick(header.column)\"\n                        ></button>\n                        <tedi-popover-content>\n                          <div class=\"tedi-table__filter\">\n                            <div class=\"tedi-table__filter-body\">\n                              @if (filterTemplateFor(header.column); as tpl) {\n                                <ng-container\n                                  *ngTemplateOutlet=\"\n                                    tpl;\n                                    context: filterContextFor(\n                                      header.column,\n                                      filterPopover\n                                    )\n                                  \"\n                                />\n                              }\n                            </div>\n                            <div class=\"tedi-table__filter-actions\">\n                              <button\n                                tedi-button\n                                variant=\"secondary\"\n                                size=\"small\"\n                                type=\"button\"\n                                (click)=\"\n                                  handleFilterClear(\n                                    header.column,\n                                    filterPopover\n                                  )\n                                \"\n                              >\n                                {{ filterClearLabel() }}\n                              </button>\n                              <button\n                                tedi-button\n                                variant=\"primary\"\n                                size=\"small\"\n                                type=\"button\"\n                                (click)=\"\n                                  handleFilterApply(\n                                    header.column,\n                                    filterPopover\n                                  )\n                                \"\n                              >\n                                {{ filterApplyLabel() }}\n                              </button>\n                            </div>\n                          </div>\n                        </tedi-popover-content>\n                      </tedi-popover>\n                    }\n                  </span>\n                }\n              </th>\n            }\n          }\n        </tr>\n      }\n      @if (enableColumnFilters()) {\n        <tr\n          class=\"tedi-table__row tedi-table__row--filter\"\n          [attr.aria-rowindex]=\"\n            ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n          \"\n        >\n          @for (column of leafColumns(); track column.id) {\n            @let filterId = resolvedId() + \"-filter-\" + column.id;\n            <th class=\"tedi-table__header-cell\" scope=\"col\">\n              @if (column.getCanFilter()) {\n                <tedi-form-field size=\"small\">\n                  <input\n                    tedi-text-field\n                    type=\"text\"\n                    [id]=\"filterId\"\n                    [name]=\"filterId\"\n                    [attr.aria-label]=\"filterLabel(column)\"\n                    [placeholder]=\"filterPlaceholder()\"\n                    [value]=\"getFilterValue(column)\"\n                    (input)=\"\n                      handleColumnFilter(column, $any($event.target).value)\n                    \"\n                  />\n                </tedi-form-field>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody\n      class=\"tedi-table__body\"\n      cdkDropList\n      [cdkDropListDisabled]=\"!draggableRows()\"\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]=\"!draggableRows()\"\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            \"\n            [attr.role]=\"interactive() ? 'button' : null\"\n            [attr.tabindex]=\"interactive() ? 0 : null\"\n            [attr.aria-rowindex]=\"ariaRowIndex\"\n            [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n            (click)=\"(interactive() || expandsOnClick) && handleRowClick(row)\"\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                  \"\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                      [attr.aria-label]=\"dragRowLabel()\"\n                      (click)=\"$event.stopPropagation()\"\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]=\"row.getIsSelected()\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        [indeterminate]=\"row.getIsSomeSelected()\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    } @else {\n                      <input\n                        tedi-radio\n                        type=\"radio\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-row'\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"row.getIsSelected()\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    }\n                  } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n                    <span\n                      class=\"tedi-table__expand-toggle\"\n                      [class.tedi-table__expand-toggle--icon-only]=\"\n                        !expandButtonHasLabel()\n                      \"\n                    >\n                      @if (row.getCanExpand()) {\n                        @let expandOpen = row.getIsExpanded();\n                        <button\n                          tedi-collapse-button\n                          [arrowType]=\"resolvedExpandVariant()\"\n                          [hideText]=\"!expandButtonHasLabel()\"\n                          [openText]=\"expandButtonOpenText()\"\n                          [closeText]=\"expandButtonCloseText()\"\n                          [open]=\"expandOpen\"\n                          [id]=\"resolvedId() + '-expand-' + row.id\"\n                          [ariaControls]=\"subRowId\"\n                          [ariaLabel]=\"\n                            expandButtonHasLabel()\n                              ? undefined\n                              : expandRowLabel(expandOpen)\n                          \"\n                          (openChange)=\"handleExpandToggle(row)\"\n                          (click)=\"$event.stopPropagation()\"\n                          (keydown)=\"handleExpandKeydown($event)\"\n                        ></button>\n                      }\n                    </span>\n                  } @else {\n                    <ng-container\n                      *flexRender=\"\n                        cell.column.columnDef.cell;\n                        props: cellContext;\n                        let content\n                      \"\n                    >\n                      {{ content }}\n                    </ng-container>\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (renderSubComponent(); as subTpl) {\n            @if (row.getCanExpand()) {\n              @let isExpanded = row.getIsExpanded();\n              <tr\n                [class]=\"\n                  'tedi-table__row tedi-table__row--sub-component' +\n                  (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n                \"\n              >\n                <td\n                  class=\"tedi-table__cell tedi-table__cell--sub-component\"\n                  [attr.id]=\"subRowId\"\n                  [attr.role]=\"isExpanded ? 'region' : null\"\n                  [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n                  [attr.inert]=\"isExpanded ? null : ''\"\n                  [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n                >\n                  <div class=\"tedi-table__sub-component-wrapper\">\n                    <div class=\"tedi-table__sub-component-content\">\n                      <ng-container\n                        *ngTemplateOutlet=\"subTpl; context: { $implicit: row }\"\n                      />\n                    </div>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        }\n      }\n    </tbody>\n\n    @if (hasFooter()) {\n      <tfoot class=\"tedi-table__foot\">\n        @for (group of footerGroups(); track group.id) {\n          <tr class=\"tedi-table__row\">\n            @for (header of group.headers; track header.id) {\n              @let footerMeta = getColumnMeta(header.column);\n              <td\n                [class]=\"\n                  'tedi-table__cell tedi-table__cell--footer' +\n                  (footerMeta?.align\n                    ? ' tedi-table__cell--align-' + footerMeta?.align\n                    : '') +\n                  (footerMeta?.vAlign\n                    ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n                    : '')\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n              >\n                @if (!header.isPlaceholder) {\n                  <ng-container\n                    *flexRender=\"\n                      header.column.columnDef.footer;\n                      props: header.getContext();\n                      let content\n                    \"\n                  >\n                    {{ content }}\n                  </ng-container>\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"bottom.boundaryCount\"\n      [siblingCount]=\"bottom.siblingCount\"\n      [labels]=\"bottom.labels\"\n      [background]=\"bottom.background\"\n      [dividerPosition]=\"bottom.dividerPosition\"\n      [hideResults]=\"bottom.hideResults\"\n      [hidePageSize]=\"bottom.hidePageSize\"\n      [hidePager]=\"bottom.hidePager\"\n      [hideArrows]=\"bottom.hideArrows\"\n      [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n      [arrowVariant]=\"bottom.arrowVariant\"\n      [showArrowLabels]=\"bottom.showArrowLabels\"\n      [previousIcon]=\"bottom.previousIcon\"\n      [nextIcon]=\"bottom.nextIcon\"\n      [showModalTitle]=\"bottom.showModalTitle\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (bottomResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.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)}.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__row{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row:last-child{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)}.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);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__cell--footer{color:var(--general-text-primary)}.tedi-table__row--selected{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--general-border-focus);outline-offset:calc(var(--tedi-borders-02) * -1)}.tedi-table__row--sub-component{background:var(--table-striped);border-bottom:0}.tedi-table__row--sub-component-open{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;padding:var(--table-data-padding-y) var(--table-data-padding-x);overflow:hidden}.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){background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__row>.tedi-table__header-cell:first-child{position:sticky;left:0;z-index:2;background:var(--table-default);box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__row>.tedi-table__cell:first-child{position:sticky;left:0;z-index:1;background:var(--table-default);box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell:first-child{background:var(--table-striped)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell:first-child{z-index:3;box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--fixed-layout .tedi-table__table,.tedi-table--draggable .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(--general-border-focus);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: PaginationComponent, selector: "tedi-pagination", inputs: ["pageCount", "page", "totalItems", "pageSize", "pageSizeOptions", "boundaryCount", "siblingCount", "labels", "background", "dividerPosition", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TediPaginationResultsDirective, selector: "[tediPaginationResults]" }, { kind: "component", type: TediTableHeaderButtonComponent, selector: "button[tedi-table-header-button]", inputs: ["icon", "filled", "selected", "disabled", "iconSize", "aria-label"] }, { kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "arrowsHidden"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "appendTo", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "customResultsTemplateRef", first: true, predicate: TediPaginationResultsDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n  <div\n    [id]=\"liveRegionId\"\n    aria-live=\"polite\"\n    aria-atomic=\"true\"\n    class=\"tedi-table__sr-only\"\n  ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"top.boundaryCount\"\n      [siblingCount]=\"top.siblingCount\"\n      [labels]=\"top.labels\"\n      [background]=\"top.background\"\n      [dividerPosition]=\"top.dividerPosition\"\n      [hideResults]=\"top.hideResults\"\n      [hidePageSize]=\"top.hidePageSize\"\n      [hidePager]=\"top.hidePager\"\n      [hideArrows]=\"top.hideArrows\"\n      [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n      [arrowVariant]=\"top.arrowVariant\"\n      [showArrowLabels]=\"top.showArrowLabels\"\n      [previousIcon]=\"top.previousIcon\"\n      [nextIcon]=\"top.nextIcon\"\n      [showModalTitle]=\"top.showModalTitle\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (topResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n\n<div class=\"tedi-table__scroll\" [attr.style]=\"maxHeightStyle()\" cdkScrollable>\n  <table\n    class=\"tedi-table__table\"\n    [attr.id]=\"id() || null\"\n    [attr.aria-rowcount]=\"ariaRowCount()\"\n    [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n  >\n    @if (caption(); as cap) {\n      <caption class=\"tedi-table__caption\">\n        @if (isString(cap)) {\n          {{ cap }}\n        } @else {\n          <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n        }\n      </caption>\n    }\n\n    <thead class=\"tedi-table__head\">\n      @for (\n        headerGroup of headerGroups();\n        track headerGroup.id;\n        let rowIndex = $index\n      ) {\n        <tr\n          class=\"tedi-table__row\"\n          [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n          [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          cdkDropListAutoScrollDisabled\n          (cdkDropListDropped)=\"handleColumnDrop($event)\"\n        >\n          @for (header of headerGroup.headers; track header.id) {\n            @if (shouldRenderHeader(header, rowIndex)) {\n              @let meta = getColumnMeta(header.column);\n              @let ariaSort = getHeaderAriaSort(header.column);\n              @let headerLabel = getHeaderLabel(header.column);\n              @let rowSpan = getHeaderRowSpan(header, rowIndex);\n              <th\n                scope=\"col\"\n                cdkDrag\n                [cdkDragDisabled]=\"\n                  !reorderableColumns() ||\n                  rowIndex > 0 ||\n                  header.column.id === SELECT_COLUMN_ID ||\n                  header.column.id === EXPAND_COLUMN_ID\n                \"\n                cdkDragLockAxis=\"x\"\n                (keydown)=\"handleHeaderKeydown($event, header)\"\n                [class]=\"\n                  'tedi-table__header-cell' +\n                  (isHeaderGroup(header)\n                    ? ' tedi-table__header-cell--group'\n                    : '') +\n                  (meta?.align\n                    ? ' tedi-table__cell--align-' + meta?.align\n                    : '') +\n                  (meta?.vAlign\n                    ? ' tedi-table__cell--valign-' + meta?.vAlign\n                    : '') +\n                  (pickedUpColumnId() === header.column.id\n                    ? ' tedi-table__header-cell--picked-up'\n                    : '')\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n                [attr.rowspan]=\"rowSpan\"\n                [attr.aria-sort]=\"ariaSort\"\n                [attr.aria-label]=\"headerLabel\"\n                [style.width.px]=\"headerCellWidth(header.column)\"\n                [style.min-width.px]=\"columnMinWidth(header.column)\"\n                [style.max-width.px]=\"columnMaxWidth(header.column)\"\n              >\n                @if (header.column.id === SELECT_COLUMN_ID) {\n                  @if (selectionMode() === \"multiple\") {\n                    <input\n                      tedi-checkbox\n                      type=\"checkbox\"\n                      [id]=\"resolvedId() + '-select-all'\"\n                      [name]=\"resolvedId() + '-select-all'\"\n                      [attr.aria-label]=\"selectAllLabel()\"\n                      [checked]=\"isAllPageRowsSelected()\"\n                      [indeterminate]=\"\n                        isSomePageRowsSelected() && !isAllPageRowsSelected()\n                      \"\n                      (change)=\"handleSelectAll($any($event.target).checked)\"\n                    />\n                  }\n                } @else if (header.column.id === EXPAND_COLUMN_ID) {\n                  <!-- empty -->\n                } @else if (header.column.id === DRAG_COLUMN_ID) {\n                  <!-- empty -->\n                } @else {\n                  <span class=\"tedi-table__header-content\">\n                    @if (\n                      reorderableColumns() &&\n                      rowIndex === 0 &&\n                      !isHeaderGroup(header)\n                    ) {\n                      <button\n                        type=\"button\"\n                        cdkDragHandle\n                        class=\"tedi-table__drag-handle\"\n                        [class.tedi-table__drag-handle--picked-up]=\"\n                          pickedUpColumnId() === header.column.id\n                        \"\n                        [id]=\"reorderHandleId(header.column.id)\"\n                        [attr.aria-label]=\"dragColumnLabel()\"\n                        [attr.aria-pressed]=\"\n                          reorderableColumns()\n                            ? pickedUpColumnId() === header.column.id\n                            : null\n                        \"\n                      >\n                        <tedi-icon\n                          name=\"drag_indicator\"\n                          [size]=\"18\"\n                          color=\"inherit\"\n                        />\n                      </button>\n                    }\n                    <ng-container\n                      *flexRender=\"\n                        header.column.columnDef.header;\n                        props: header.getContext();\n                        let content\n                      \"\n                    >\n                      @if (shouldRenderSortableHeader(header.column, content)) {\n                        <button\n                          tedi-table-header-button\n                          [icon]=\"sortIcon(header.column)\"\n                          [selected]=\"!!header.column.getIsSorted()\"\n                          (click)=\"handleSortToggle(header.column)\"\n                        >\n                          {{ content }}\n                        </button>\n                      } @else if (isString(content) || isNumber(content)) {\n                        {{ content }}\n                      } @else {\n                        {{ content }}\n                      }\n                    </ng-container>\n                    @if (shouldRenderFilterButton(header.column)) {\n                      <tedi-popover\n                        #filterPopover\n                        class=\"tedi-table__filter-popover\"\n                        position=\"bottom-end\"\n                        [preventOverflow]=\"true\"\n                      >\n                        <button\n                          tedi-popover-trigger\n                          tedi-table-header-button\n                          icon=\"filter_alt\"\n                          [selected]=\"filterIsActive(header.column)\"\n                          [filled]=\"filterIsActive(header.column)\"\n                          [aria-label]=\"filterAriaLabel(header.column)\"\n                          (click)=\"handleFilterTriggerClick(header.column)\"\n                        ></button>\n                        <tedi-popover-content>\n                          <div class=\"tedi-table__filter\">\n                            <div class=\"tedi-table__filter-body\">\n                              @if (filterTemplateFor(header.column); as tpl) {\n                                <ng-container\n                                  *ngTemplateOutlet=\"\n                                    tpl;\n                                    context: filterContextFor(\n                                      header.column,\n                                      filterPopover\n                                    )\n                                  \"\n                                />\n                              }\n                            </div>\n                            <div class=\"tedi-table__filter-actions\">\n                              <button\n                                tedi-button\n                                variant=\"secondary\"\n                                size=\"small\"\n                                type=\"button\"\n                                (click)=\"\n                                  handleFilterClear(\n                                    header.column,\n                                    filterPopover\n                                  )\n                                \"\n                              >\n                                {{ filterClearLabel() }}\n                              </button>\n                              <button\n                                tedi-button\n                                variant=\"primary\"\n                                size=\"small\"\n                                type=\"button\"\n                                (click)=\"\n                                  handleFilterApply(\n                                    header.column,\n                                    filterPopover\n                                  )\n                                \"\n                              >\n                                {{ filterApplyLabel() }}\n                              </button>\n                            </div>\n                          </div>\n                        </tedi-popover-content>\n                      </tedi-popover>\n                    }\n                  </span>\n                }\n              </th>\n            }\n          }\n        </tr>\n      }\n      @if (enableColumnFilters()) {\n        <tr\n          class=\"tedi-table__row tedi-table__row--filter\"\n          [attr.aria-rowindex]=\"\n            ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n          \"\n        >\n          @for (column of leafColumns(); track column.id) {\n            @let filterId = resolvedId() + \"-filter-\" + column.id;\n            <th class=\"tedi-table__header-cell\" scope=\"col\">\n              @if (column.getCanFilter()) {\n                <tedi-form-field size=\"small\">\n                  <input\n                    tedi-text-field\n                    type=\"text\"\n                    [id]=\"filterId\"\n                    [name]=\"filterId\"\n                    [attr.aria-label]=\"filterLabel(column)\"\n                    [placeholder]=\"filterPlaceholder()\"\n                    [value]=\"getFilterValue(column)\"\n                    (input)=\"\n                      handleColumnFilter(column, $any($event.target).value)\n                    \"\n                  />\n                </tedi-form-field>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody\n      class=\"tedi-table__body\"\n      cdkDropList\n      [cdkDropListDisabled]=\"!reorderableRows()\"\n      (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n    >\n      @if (rows().length === 0) {\n        <tr class=\"tedi-table__row\">\n          <td\n            class=\"tedi-table__cell tedi-table__cell--placeholder\"\n            [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n          >\n            @if (placeholder(); as pl) {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  @if (isString(pl)) {\n                    {{ pl }}\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                  }\n                </div>\n              } @else {\n                @if (isString(pl)) {\n                  {{ pl }}\n                } @else {\n                  <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                }\n              }\n            } @else {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  {{ placeholderLabel() }}\n                </div>\n              } @else {\n                {{ placeholderLabel() }}\n              }\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of rows(); track row.id) {\n          @let isActiveRow =\n            activeRowId() !== undefined && row.id === activeRowId();\n          @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n          @let subRowId = resolvedId() + \"-sub-\" + row.id;\n          @let expandsOnClick = rowExpandsOnClick(row);\n          <tr\n            cdkDrag\n            [cdkDragDisabled]=\"!reorderableRows()\"\n            cdkDragLockAxis=\"y\"\n            [class]=\"\n              'tedi-table__row' +\n              (this.selectedRowHighlight() && row.getIsSelected()\n                ? ' tedi-table__row--selected'\n                : '') +\n              (isActiveRow ? ' tedi-table__row--active' : '') +\n              (interactive() || expandsOnClick\n                ? ' tedi-table__row--clickable'\n                : '') +\n              (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n              (pickedUpRow() === row.original\n                ? ' tedi-table__row--picked-up'\n                : '')\n            \"\n            [attr.role]=\"interactive() ? 'button' : null\"\n            [attr.tabindex]=\"interactive() ? 0 : null\"\n            [attr.aria-label]=\"rowAriaLabelFor(row)\"\n            [attr.aria-rowindex]=\"ariaRowIndex\"\n            [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n            (click)=\"(interactive() || expandsOnClick) && handleRowClick(row)\"\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                  \"\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]=\"row.getIsSelected()\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        [indeterminate]=\"row.getIsSomeSelected()\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    } @else {\n                      <input\n                        tedi-radio\n                        type=\"radio\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-row'\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"row.getIsSelected()\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    }\n                  } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n                    <span\n                      class=\"tedi-table__expand-toggle\"\n                      [class.tedi-table__expand-toggle--icon-only]=\"\n                        !expandButtonHasLabel()\n                      \"\n                    >\n                      @if (row.getCanExpand()) {\n                        @let expandOpen = row.getIsExpanded();\n                        <button\n                          tedi-collapse-button\n                          [arrowType]=\"resolvedExpandVariant()\"\n                          [hideText]=\"!expandButtonHasLabel()\"\n                          [openText]=\"expandButtonOpenText()\"\n                          [closeText]=\"expandButtonCloseText()\"\n                          [open]=\"expandOpen\"\n                          [id]=\"resolvedId() + '-expand-' + row.id\"\n                          [ariaControls]=\"subRowId\"\n                          [ariaLabel]=\"\n                            expandButtonHasLabel()\n                              ? undefined\n                              : expandRowLabel(expandOpen)\n                          \"\n                          (openChange)=\"handleExpandToggle(row)\"\n                          (click)=\"$event.stopPropagation()\"\n                          (keydown)=\"handleExpandKeydown($event)\"\n                        ></button>\n                      }\n                    </span>\n                  } @else {\n                    <ng-container\n                      *flexRender=\"\n                        cell.column.columnDef.cell;\n                        props: cellContext;\n                        let content\n                      \"\n                    >\n                      {{ content }}\n                    </ng-container>\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (renderSubComponent(); as subTpl) {\n            @if (row.getCanExpand()) {\n              @let isExpanded = row.getIsExpanded();\n              <tr\n                [class]=\"\n                  'tedi-table__row tedi-table__row--sub-component' +\n                  (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n                \"\n              >\n                <td\n                  class=\"tedi-table__cell tedi-table__cell--sub-component\"\n                  [attr.id]=\"subRowId\"\n                  [attr.role]=\"isExpanded ? 'region' : null\"\n                  [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n                  [attr.inert]=\"isExpanded ? null : ''\"\n                  [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n                >\n                  <div class=\"tedi-table__sub-component-wrapper\">\n                    <div class=\"tedi-table__sub-component-content\">\n                      <div class=\"tedi-table__sub-component-inner\">\n                        <ng-container\n                          *ngTemplateOutlet=\"subTpl; context: { $implicit: row }\"\n                        />\n                      </div>\n                    </div>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        }\n      }\n    </tbody>\n\n    @if (hasFooter()) {\n      <tfoot class=\"tedi-table__foot\">\n        @for (group of footerGroups(); track group.id) {\n          <tr class=\"tedi-table__row\">\n            @for (header of group.headers; track header.id) {\n              @let footerMeta = getColumnMeta(header.column);\n              <td\n                [class]=\"\n                  'tedi-table__cell tedi-table__cell--footer' +\n                  (footerMeta?.align\n                    ? ' tedi-table__cell--align-' + footerMeta?.align\n                    : '') +\n                  (footerMeta?.vAlign\n                    ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n                    : '')\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n              >\n                @if (!header.isPlaceholder) {\n                  <ng-container\n                    *flexRender=\"\n                      header.column.columnDef.footer;\n                      props: header.getContext();\n                      let content\n                    \"\n                  >\n                    {{ content }}\n                  </ng-container>\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"bottom.boundaryCount\"\n      [siblingCount]=\"bottom.siblingCount\"\n      [labels]=\"bottom.labels\"\n      [background]=\"bottom.background\"\n      [dividerPosition]=\"bottom.dividerPosition\"\n      [hideResults]=\"bottom.hideResults\"\n      [hidePageSize]=\"bottom.hidePageSize\"\n      [hidePager]=\"bottom.hidePager\"\n      [hideArrows]=\"bottom.hideArrows\"\n      [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n      [arrowVariant]=\"bottom.arrowVariant\"\n      [showArrowLabels]=\"bottom.showArrowLabels\"\n      [previousIcon]=\"bottom.previousIcon\"\n      [nextIcon]=\"bottom.nextIcon\"\n      [showModalTitle]=\"bottom.showModalTitle\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (bottomResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.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)}.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__row{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row:last-child{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)}.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);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__cell--footer{color:var(--general-text-primary)}.tedi-table__row--selected{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__row--sub-component{background:var(--table-striped);border-bottom:0}.tedi-table__row--sub-component-open{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n){background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__row>.tedi-table__header-cell:first-child{position:sticky;left:0;z-index:2;background:var(--table-default);box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__row>.tedi-table__cell:first-child{position:sticky;left:0;z-index:1;background:var(--table-default);box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell:first-child{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell:first-child{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:first-child{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up:first-child{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell:first-child{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell:first-child{z-index:3;box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: PaginationComponent, selector: "tedi-pagination", inputs: ["pageCount", "page", "totalItems", "pageSize", "pageSizeOptions", "boundaryCount", "siblingCount", "labels", "background", "dividerPosition", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TediPaginationResultsDirective, selector: "[tediPaginationResults]" }, { kind: "component", type: TediTableHeaderButtonComponent, selector: "button[tedi-table-header-button]", inputs: ["icon", "filled", "selected", "disabled", "iconSize", "aria-label"] }, { kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "arrowsHidden"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "appendTo", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], 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: "19.2.15", ngImport: i0, type: TediTableComponent, decorators: [{
             type: Component,
@@ -10079,6 +10474,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         CdkDropList,
                         CdkDrag,
                         CdkDragHandle,
+                        CdkScrollable,
                     ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "[class]": "hostClasses()",
                         "data-name": "tedi-table",
@@ -10088,7 +10484,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             useFactory: (component) => component.contextValue,
                             deps: [TediTableComponent],
                         },
-                    ], template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n@if (resolvedTopSlot(); as top) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"top.boundaryCount\"\n      [siblingCount]=\"top.siblingCount\"\n      [labels]=\"top.labels\"\n      [background]=\"top.background\"\n      [dividerPosition]=\"top.dividerPosition\"\n      [hideResults]=\"top.hideResults\"\n      [hidePageSize]=\"top.hidePageSize\"\n      [hidePager]=\"top.hidePager\"\n      [hideArrows]=\"top.hideArrows\"\n      [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n      [arrowVariant]=\"top.arrowVariant\"\n      [showArrowLabels]=\"top.showArrowLabels\"\n      [previousIcon]=\"top.previousIcon\"\n      [nextIcon]=\"top.nextIcon\"\n      [showModalTitle]=\"top.showModalTitle\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (topResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n\n<div class=\"tedi-table__scroll\" [attr.style]=\"maxHeightStyle()\">\n  <table\n    class=\"tedi-table__table\"\n    [attr.id]=\"id() || null\"\n    [attr.aria-rowcount]=\"ariaRowCount()\"\n    [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n  >\n    @if (caption(); as cap) {\n      <caption class=\"tedi-table__caption\">\n        @if (isString(cap)) {\n          {{ cap }}\n        } @else {\n          <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n        }\n      </caption>\n    }\n\n    <thead class=\"tedi-table__head\">\n      @for (\n        headerGroup of headerGroups();\n        track headerGroup.id;\n        let rowIndex = $index\n      ) {\n        <tr\n          class=\"tedi-table__row\"\n          [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n          [cdkDropListDisabled]=\"!draggableColumns() || rowIndex > 0\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"handleColumnDrop($event)\"\n        >\n          @for (header of headerGroup.headers; track header.id) {\n            @if (shouldRenderHeader(header, rowIndex)) {\n              @let meta = getColumnMeta(header.column);\n              @let ariaSort = getHeaderAriaSort(header.column);\n              @let headerLabel = getHeaderLabel(header.column);\n              @let rowSpan = getHeaderRowSpan(header, rowIndex);\n              <th\n                scope=\"col\"\n                cdkDrag\n                [cdkDragDisabled]=\"\n                  !draggableColumns() ||\n                  rowIndex > 0 ||\n                  header.column.id === SELECT_COLUMN_ID ||\n                  header.column.id === EXPAND_COLUMN_ID\n                \"\n                cdkDragLockAxis=\"x\"\n                [class]=\"\n                  'tedi-table__header-cell' +\n                  (isHeaderGroup(header)\n                    ? ' tedi-table__header-cell--group'\n                    : '') +\n                  (meta?.align\n                    ? ' tedi-table__cell--align-' + meta?.align\n                    : '') +\n                  (meta?.vAlign\n                    ? ' tedi-table__cell--valign-' + meta?.vAlign\n                    : '')\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n                [attr.rowspan]=\"rowSpan\"\n                [attr.aria-sort]=\"ariaSort\"\n                [attr.aria-label]=\"headerLabel\"\n                [style.width.px]=\"headerCellWidth(header.column)\"\n                [style.min-width.px]=\"columnMinWidth(header.column)\"\n                [style.max-width.px]=\"columnMaxWidth(header.column)\"\n              >\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                      draggableColumns() &&\n                      rowIndex === 0 &&\n                      !isHeaderGroup(header)\n                    ) {\n                      <button\n                        type=\"button\"\n                        cdkDragHandle\n                        class=\"tedi-table__drag-handle\"\n                        [attr.aria-label]=\"dragColumnLabel()\"\n                      >\n                        <tedi-icon\n                          name=\"drag_indicator\"\n                          [size]=\"18\"\n                          color=\"inherit\"\n                        />\n                      </button>\n                    }\n                    <ng-container\n                      *flexRender=\"\n                        header.column.columnDef.header;\n                        props: header.getContext();\n                        let content\n                      \"\n                    >\n                      @if (shouldRenderSortableHeader(header.column, content)) {\n                        <button\n                          tedi-table-header-button\n                          [icon]=\"sortIcon(header.column)\"\n                          [selected]=\"!!header.column.getIsSorted()\"\n                          (click)=\"handleSortToggle(header.column)\"\n                        >\n                          {{ content }}\n                        </button>\n                      } @else if (isString(content) || isNumber(content)) {\n                        {{ content }}\n                      } @else {\n                        {{ content }}\n                      }\n                    </ng-container>\n                    @if (shouldRenderFilterButton(header.column)) {\n                      <tedi-popover\n                        #filterPopover\n                        class=\"tedi-table__filter-popover\"\n                        position=\"bottom-end\"\n                        [preventOverflow]=\"true\"\n                      >\n                        <button\n                          tedi-popover-trigger\n                          tedi-table-header-button\n                          icon=\"filter_alt\"\n                          [selected]=\"filterIsActive(header.column)\"\n                          [filled]=\"filterIsActive(header.column)\"\n                          [aria-label]=\"filterAriaLabel(header.column)\"\n                          (click)=\"handleFilterTriggerClick(header.column)\"\n                        ></button>\n                        <tedi-popover-content>\n                          <div class=\"tedi-table__filter\">\n                            <div class=\"tedi-table__filter-body\">\n                              @if (filterTemplateFor(header.column); as tpl) {\n                                <ng-container\n                                  *ngTemplateOutlet=\"\n                                    tpl;\n                                    context: filterContextFor(\n                                      header.column,\n                                      filterPopover\n                                    )\n                                  \"\n                                />\n                              }\n                            </div>\n                            <div class=\"tedi-table__filter-actions\">\n                              <button\n                                tedi-button\n                                variant=\"secondary\"\n                                size=\"small\"\n                                type=\"button\"\n                                (click)=\"\n                                  handleFilterClear(\n                                    header.column,\n                                    filterPopover\n                                  )\n                                \"\n                              >\n                                {{ filterClearLabel() }}\n                              </button>\n                              <button\n                                tedi-button\n                                variant=\"primary\"\n                                size=\"small\"\n                                type=\"button\"\n                                (click)=\"\n                                  handleFilterApply(\n                                    header.column,\n                                    filterPopover\n                                  )\n                                \"\n                              >\n                                {{ filterApplyLabel() }}\n                              </button>\n                            </div>\n                          </div>\n                        </tedi-popover-content>\n                      </tedi-popover>\n                    }\n                  </span>\n                }\n              </th>\n            }\n          }\n        </tr>\n      }\n      @if (enableColumnFilters()) {\n        <tr\n          class=\"tedi-table__row tedi-table__row--filter\"\n          [attr.aria-rowindex]=\"\n            ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n          \"\n        >\n          @for (column of leafColumns(); track column.id) {\n            @let filterId = resolvedId() + \"-filter-\" + column.id;\n            <th class=\"tedi-table__header-cell\" scope=\"col\">\n              @if (column.getCanFilter()) {\n                <tedi-form-field size=\"small\">\n                  <input\n                    tedi-text-field\n                    type=\"text\"\n                    [id]=\"filterId\"\n                    [name]=\"filterId\"\n                    [attr.aria-label]=\"filterLabel(column)\"\n                    [placeholder]=\"filterPlaceholder()\"\n                    [value]=\"getFilterValue(column)\"\n                    (input)=\"\n                      handleColumnFilter(column, $any($event.target).value)\n                    \"\n                  />\n                </tedi-form-field>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody\n      class=\"tedi-table__body\"\n      cdkDropList\n      [cdkDropListDisabled]=\"!draggableRows()\"\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]=\"!draggableRows()\"\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            \"\n            [attr.role]=\"interactive() ? 'button' : null\"\n            [attr.tabindex]=\"interactive() ? 0 : null\"\n            [attr.aria-rowindex]=\"ariaRowIndex\"\n            [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n            (click)=\"(interactive() || expandsOnClick) && handleRowClick(row)\"\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                  \"\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                      [attr.aria-label]=\"dragRowLabel()\"\n                      (click)=\"$event.stopPropagation()\"\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]=\"row.getIsSelected()\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        [indeterminate]=\"row.getIsSomeSelected()\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    } @else {\n                      <input\n                        tedi-radio\n                        type=\"radio\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-row'\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"row.getIsSelected()\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    }\n                  } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n                    <span\n                      class=\"tedi-table__expand-toggle\"\n                      [class.tedi-table__expand-toggle--icon-only]=\"\n                        !expandButtonHasLabel()\n                      \"\n                    >\n                      @if (row.getCanExpand()) {\n                        @let expandOpen = row.getIsExpanded();\n                        <button\n                          tedi-collapse-button\n                          [arrowType]=\"resolvedExpandVariant()\"\n                          [hideText]=\"!expandButtonHasLabel()\"\n                          [openText]=\"expandButtonOpenText()\"\n                          [closeText]=\"expandButtonCloseText()\"\n                          [open]=\"expandOpen\"\n                          [id]=\"resolvedId() + '-expand-' + row.id\"\n                          [ariaControls]=\"subRowId\"\n                          [ariaLabel]=\"\n                            expandButtonHasLabel()\n                              ? undefined\n                              : expandRowLabel(expandOpen)\n                          \"\n                          (openChange)=\"handleExpandToggle(row)\"\n                          (click)=\"$event.stopPropagation()\"\n                          (keydown)=\"handleExpandKeydown($event)\"\n                        ></button>\n                      }\n                    </span>\n                  } @else {\n                    <ng-container\n                      *flexRender=\"\n                        cell.column.columnDef.cell;\n                        props: cellContext;\n                        let content\n                      \"\n                    >\n                      {{ content }}\n                    </ng-container>\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (renderSubComponent(); as subTpl) {\n            @if (row.getCanExpand()) {\n              @let isExpanded = row.getIsExpanded();\n              <tr\n                [class]=\"\n                  'tedi-table__row tedi-table__row--sub-component' +\n                  (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n                \"\n              >\n                <td\n                  class=\"tedi-table__cell tedi-table__cell--sub-component\"\n                  [attr.id]=\"subRowId\"\n                  [attr.role]=\"isExpanded ? 'region' : null\"\n                  [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n                  [attr.inert]=\"isExpanded ? null : ''\"\n                  [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n                >\n                  <div class=\"tedi-table__sub-component-wrapper\">\n                    <div class=\"tedi-table__sub-component-content\">\n                      <ng-container\n                        *ngTemplateOutlet=\"subTpl; context: { $implicit: row }\"\n                      />\n                    </div>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        }\n      }\n    </tbody>\n\n    @if (hasFooter()) {\n      <tfoot class=\"tedi-table__foot\">\n        @for (group of footerGroups(); track group.id) {\n          <tr class=\"tedi-table__row\">\n            @for (header of group.headers; track header.id) {\n              @let footerMeta = getColumnMeta(header.column);\n              <td\n                [class]=\"\n                  'tedi-table__cell tedi-table__cell--footer' +\n                  (footerMeta?.align\n                    ? ' tedi-table__cell--align-' + footerMeta?.align\n                    : '') +\n                  (footerMeta?.vAlign\n                    ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n                    : '')\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n              >\n                @if (!header.isPlaceholder) {\n                  <ng-container\n                    *flexRender=\"\n                      header.column.columnDef.footer;\n                      props: header.getContext();\n                      let content\n                    \"\n                  >\n                    {{ content }}\n                  </ng-container>\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"bottom.boundaryCount\"\n      [siblingCount]=\"bottom.siblingCount\"\n      [labels]=\"bottom.labels\"\n      [background]=\"bottom.background\"\n      [dividerPosition]=\"bottom.dividerPosition\"\n      [hideResults]=\"bottom.hideResults\"\n      [hidePageSize]=\"bottom.hidePageSize\"\n      [hidePager]=\"bottom.hidePager\"\n      [hideArrows]=\"bottom.hideArrows\"\n      [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n      [arrowVariant]=\"bottom.arrowVariant\"\n      [showArrowLabels]=\"bottom.showArrowLabels\"\n      [previousIcon]=\"bottom.previousIcon\"\n      [nextIcon]=\"bottom.nextIcon\"\n      [showModalTitle]=\"bottom.showModalTitle\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (bottomResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.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)}.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__row{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row:last-child{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)}.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);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__cell--footer{color:var(--general-text-primary)}.tedi-table__row--selected{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--general-border-focus);outline-offset:calc(var(--tedi-borders-02) * -1)}.tedi-table__row--sub-component{background:var(--table-striped);border-bottom:0}.tedi-table__row--sub-component-open{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;padding:var(--table-data-padding-y) var(--table-data-padding-x);overflow:hidden}.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){background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__row>.tedi-table__header-cell:first-child{position:sticky;left:0;z-index:2;background:var(--table-default);box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__row>.tedi-table__cell:first-child{position:sticky;left:0;z-index:1;background:var(--table-default);box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell:first-child{background:var(--table-striped)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell:first-child{z-index:3;box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--fixed-layout .tedi-table__table,.tedi-table--draggable .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(--general-border-focus);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.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}\n"] }]
+                    ], template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n  <div\n    [id]=\"liveRegionId\"\n    aria-live=\"polite\"\n    aria-atomic=\"true\"\n    class=\"tedi-table__sr-only\"\n  ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"top.boundaryCount\"\n      [siblingCount]=\"top.siblingCount\"\n      [labels]=\"top.labels\"\n      [background]=\"top.background\"\n      [dividerPosition]=\"top.dividerPosition\"\n      [hideResults]=\"top.hideResults\"\n      [hidePageSize]=\"top.hidePageSize\"\n      [hidePager]=\"top.hidePager\"\n      [hideArrows]=\"top.hideArrows\"\n      [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n      [arrowVariant]=\"top.arrowVariant\"\n      [showArrowLabels]=\"top.showArrowLabels\"\n      [previousIcon]=\"top.previousIcon\"\n      [nextIcon]=\"top.nextIcon\"\n      [showModalTitle]=\"top.showModalTitle\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (topResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n\n<div class=\"tedi-table__scroll\" [attr.style]=\"maxHeightStyle()\" cdkScrollable>\n  <table\n    class=\"tedi-table__table\"\n    [attr.id]=\"id() || null\"\n    [attr.aria-rowcount]=\"ariaRowCount()\"\n    [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n  >\n    @if (caption(); as cap) {\n      <caption class=\"tedi-table__caption\">\n        @if (isString(cap)) {\n          {{ cap }}\n        } @else {\n          <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n        }\n      </caption>\n    }\n\n    <thead class=\"tedi-table__head\">\n      @for (\n        headerGroup of headerGroups();\n        track headerGroup.id;\n        let rowIndex = $index\n      ) {\n        <tr\n          class=\"tedi-table__row\"\n          [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n          [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          cdkDropListAutoScrollDisabled\n          (cdkDropListDropped)=\"handleColumnDrop($event)\"\n        >\n          @for (header of headerGroup.headers; track header.id) {\n            @if (shouldRenderHeader(header, rowIndex)) {\n              @let meta = getColumnMeta(header.column);\n              @let ariaSort = getHeaderAriaSort(header.column);\n              @let headerLabel = getHeaderLabel(header.column);\n              @let rowSpan = getHeaderRowSpan(header, rowIndex);\n              <th\n                scope=\"col\"\n                cdkDrag\n                [cdkDragDisabled]=\"\n                  !reorderableColumns() ||\n                  rowIndex > 0 ||\n                  header.column.id === SELECT_COLUMN_ID ||\n                  header.column.id === EXPAND_COLUMN_ID\n                \"\n                cdkDragLockAxis=\"x\"\n                (keydown)=\"handleHeaderKeydown($event, header)\"\n                [class]=\"\n                  'tedi-table__header-cell' +\n                  (isHeaderGroup(header)\n                    ? ' tedi-table__header-cell--group'\n                    : '') +\n                  (meta?.align\n                    ? ' tedi-table__cell--align-' + meta?.align\n                    : '') +\n                  (meta?.vAlign\n                    ? ' tedi-table__cell--valign-' + meta?.vAlign\n                    : '') +\n                  (pickedUpColumnId() === header.column.id\n                    ? ' tedi-table__header-cell--picked-up'\n                    : '')\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n                [attr.rowspan]=\"rowSpan\"\n                [attr.aria-sort]=\"ariaSort\"\n                [attr.aria-label]=\"headerLabel\"\n                [style.width.px]=\"headerCellWidth(header.column)\"\n                [style.min-width.px]=\"columnMinWidth(header.column)\"\n                [style.max-width.px]=\"columnMaxWidth(header.column)\"\n              >\n                @if (header.column.id === SELECT_COLUMN_ID) {\n                  @if (selectionMode() === \"multiple\") {\n                    <input\n                      tedi-checkbox\n                      type=\"checkbox\"\n                      [id]=\"resolvedId() + '-select-all'\"\n                      [name]=\"resolvedId() + '-select-all'\"\n                      [attr.aria-label]=\"selectAllLabel()\"\n                      [checked]=\"isAllPageRowsSelected()\"\n                      [indeterminate]=\"\n                        isSomePageRowsSelected() && !isAllPageRowsSelected()\n                      \"\n                      (change)=\"handleSelectAll($any($event.target).checked)\"\n                    />\n                  }\n                } @else if (header.column.id === EXPAND_COLUMN_ID) {\n                  <!-- empty -->\n                } @else if (header.column.id === DRAG_COLUMN_ID) {\n                  <!-- empty -->\n                } @else {\n                  <span class=\"tedi-table__header-content\">\n                    @if (\n                      reorderableColumns() &&\n                      rowIndex === 0 &&\n                      !isHeaderGroup(header)\n                    ) {\n                      <button\n                        type=\"button\"\n                        cdkDragHandle\n                        class=\"tedi-table__drag-handle\"\n                        [class.tedi-table__drag-handle--picked-up]=\"\n                          pickedUpColumnId() === header.column.id\n                        \"\n                        [id]=\"reorderHandleId(header.column.id)\"\n                        [attr.aria-label]=\"dragColumnLabel()\"\n                        [attr.aria-pressed]=\"\n                          reorderableColumns()\n                            ? pickedUpColumnId() === header.column.id\n                            : null\n                        \"\n                      >\n                        <tedi-icon\n                          name=\"drag_indicator\"\n                          [size]=\"18\"\n                          color=\"inherit\"\n                        />\n                      </button>\n                    }\n                    <ng-container\n                      *flexRender=\"\n                        header.column.columnDef.header;\n                        props: header.getContext();\n                        let content\n                      \"\n                    >\n                      @if (shouldRenderSortableHeader(header.column, content)) {\n                        <button\n                          tedi-table-header-button\n                          [icon]=\"sortIcon(header.column)\"\n                          [selected]=\"!!header.column.getIsSorted()\"\n                          (click)=\"handleSortToggle(header.column)\"\n                        >\n                          {{ content }}\n                        </button>\n                      } @else if (isString(content) || isNumber(content)) {\n                        {{ content }}\n                      } @else {\n                        {{ content }}\n                      }\n                    </ng-container>\n                    @if (shouldRenderFilterButton(header.column)) {\n                      <tedi-popover\n                        #filterPopover\n                        class=\"tedi-table__filter-popover\"\n                        position=\"bottom-end\"\n                        [preventOverflow]=\"true\"\n                      >\n                        <button\n                          tedi-popover-trigger\n                          tedi-table-header-button\n                          icon=\"filter_alt\"\n                          [selected]=\"filterIsActive(header.column)\"\n                          [filled]=\"filterIsActive(header.column)\"\n                          [aria-label]=\"filterAriaLabel(header.column)\"\n                          (click)=\"handleFilterTriggerClick(header.column)\"\n                        ></button>\n                        <tedi-popover-content>\n                          <div class=\"tedi-table__filter\">\n                            <div class=\"tedi-table__filter-body\">\n                              @if (filterTemplateFor(header.column); as tpl) {\n                                <ng-container\n                                  *ngTemplateOutlet=\"\n                                    tpl;\n                                    context: filterContextFor(\n                                      header.column,\n                                      filterPopover\n                                    )\n                                  \"\n                                />\n                              }\n                            </div>\n                            <div class=\"tedi-table__filter-actions\">\n                              <button\n                                tedi-button\n                                variant=\"secondary\"\n                                size=\"small\"\n                                type=\"button\"\n                                (click)=\"\n                                  handleFilterClear(\n                                    header.column,\n                                    filterPopover\n                                  )\n                                \"\n                              >\n                                {{ filterClearLabel() }}\n                              </button>\n                              <button\n                                tedi-button\n                                variant=\"primary\"\n                                size=\"small\"\n                                type=\"button\"\n                                (click)=\"\n                                  handleFilterApply(\n                                    header.column,\n                                    filterPopover\n                                  )\n                                \"\n                              >\n                                {{ filterApplyLabel() }}\n                              </button>\n                            </div>\n                          </div>\n                        </tedi-popover-content>\n                      </tedi-popover>\n                    }\n                  </span>\n                }\n              </th>\n            }\n          }\n        </tr>\n      }\n      @if (enableColumnFilters()) {\n        <tr\n          class=\"tedi-table__row tedi-table__row--filter\"\n          [attr.aria-rowindex]=\"\n            ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n          \"\n        >\n          @for (column of leafColumns(); track column.id) {\n            @let filterId = resolvedId() + \"-filter-\" + column.id;\n            <th class=\"tedi-table__header-cell\" scope=\"col\">\n              @if (column.getCanFilter()) {\n                <tedi-form-field size=\"small\">\n                  <input\n                    tedi-text-field\n                    type=\"text\"\n                    [id]=\"filterId\"\n                    [name]=\"filterId\"\n                    [attr.aria-label]=\"filterLabel(column)\"\n                    [placeholder]=\"filterPlaceholder()\"\n                    [value]=\"getFilterValue(column)\"\n                    (input)=\"\n                      handleColumnFilter(column, $any($event.target).value)\n                    \"\n                  />\n                </tedi-form-field>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody\n      class=\"tedi-table__body\"\n      cdkDropList\n      [cdkDropListDisabled]=\"!reorderableRows()\"\n      (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n    >\n      @if (rows().length === 0) {\n        <tr class=\"tedi-table__row\">\n          <td\n            class=\"tedi-table__cell tedi-table__cell--placeholder\"\n            [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n          >\n            @if (placeholder(); as pl) {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  @if (isString(pl)) {\n                    {{ pl }}\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                  }\n                </div>\n              } @else {\n                @if (isString(pl)) {\n                  {{ pl }}\n                } @else {\n                  <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                }\n              }\n            } @else {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  {{ placeholderLabel() }}\n                </div>\n              } @else {\n                {{ placeholderLabel() }}\n              }\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of rows(); track row.id) {\n          @let isActiveRow =\n            activeRowId() !== undefined && row.id === activeRowId();\n          @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n          @let subRowId = resolvedId() + \"-sub-\" + row.id;\n          @let expandsOnClick = rowExpandsOnClick(row);\n          <tr\n            cdkDrag\n            [cdkDragDisabled]=\"!reorderableRows()\"\n            cdkDragLockAxis=\"y\"\n            [class]=\"\n              'tedi-table__row' +\n              (this.selectedRowHighlight() && row.getIsSelected()\n                ? ' tedi-table__row--selected'\n                : '') +\n              (isActiveRow ? ' tedi-table__row--active' : '') +\n              (interactive() || expandsOnClick\n                ? ' tedi-table__row--clickable'\n                : '') +\n              (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n              (pickedUpRow() === row.original\n                ? ' tedi-table__row--picked-up'\n                : '')\n            \"\n            [attr.role]=\"interactive() ? 'button' : null\"\n            [attr.tabindex]=\"interactive() ? 0 : null\"\n            [attr.aria-label]=\"rowAriaLabelFor(row)\"\n            [attr.aria-rowindex]=\"ariaRowIndex\"\n            [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n            (click)=\"(interactive() || expandsOnClick) && handleRowClick(row)\"\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                  \"\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]=\"row.getIsSelected()\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        [indeterminate]=\"row.getIsSomeSelected()\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    } @else {\n                      <input\n                        tedi-radio\n                        type=\"radio\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-row'\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"row.getIsSelected()\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    }\n                  } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n                    <span\n                      class=\"tedi-table__expand-toggle\"\n                      [class.tedi-table__expand-toggle--icon-only]=\"\n                        !expandButtonHasLabel()\n                      \"\n                    >\n                      @if (row.getCanExpand()) {\n                        @let expandOpen = row.getIsExpanded();\n                        <button\n                          tedi-collapse-button\n                          [arrowType]=\"resolvedExpandVariant()\"\n                          [hideText]=\"!expandButtonHasLabel()\"\n                          [openText]=\"expandButtonOpenText()\"\n                          [closeText]=\"expandButtonCloseText()\"\n                          [open]=\"expandOpen\"\n                          [id]=\"resolvedId() + '-expand-' + row.id\"\n                          [ariaControls]=\"subRowId\"\n                          [ariaLabel]=\"\n                            expandButtonHasLabel()\n                              ? undefined\n                              : expandRowLabel(expandOpen)\n                          \"\n                          (openChange)=\"handleExpandToggle(row)\"\n                          (click)=\"$event.stopPropagation()\"\n                          (keydown)=\"handleExpandKeydown($event)\"\n                        ></button>\n                      }\n                    </span>\n                  } @else {\n                    <ng-container\n                      *flexRender=\"\n                        cell.column.columnDef.cell;\n                        props: cellContext;\n                        let content\n                      \"\n                    >\n                      {{ content }}\n                    </ng-container>\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (renderSubComponent(); as subTpl) {\n            @if (row.getCanExpand()) {\n              @let isExpanded = row.getIsExpanded();\n              <tr\n                [class]=\"\n                  'tedi-table__row tedi-table__row--sub-component' +\n                  (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n                \"\n              >\n                <td\n                  class=\"tedi-table__cell tedi-table__cell--sub-component\"\n                  [attr.id]=\"subRowId\"\n                  [attr.role]=\"isExpanded ? 'region' : null\"\n                  [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n                  [attr.inert]=\"isExpanded ? null : ''\"\n                  [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n                >\n                  <div class=\"tedi-table__sub-component-wrapper\">\n                    <div class=\"tedi-table__sub-component-content\">\n                      <div class=\"tedi-table__sub-component-inner\">\n                        <ng-container\n                          *ngTemplateOutlet=\"subTpl; context: { $implicit: row }\"\n                        />\n                      </div>\n                    </div>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        }\n      }\n    </tbody>\n\n    @if (hasFooter()) {\n      <tfoot class=\"tedi-table__foot\">\n        @for (group of footerGroups(); track group.id) {\n          <tr class=\"tedi-table__row\">\n            @for (header of group.headers; track header.id) {\n              @let footerMeta = getColumnMeta(header.column);\n              <td\n                [class]=\"\n                  'tedi-table__cell tedi-table__cell--footer' +\n                  (footerMeta?.align\n                    ? ' tedi-table__cell--align-' + footerMeta?.align\n                    : '') +\n                  (footerMeta?.vAlign\n                    ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n                    : '')\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n              >\n                @if (!header.isPlaceholder) {\n                  <ng-container\n                    *flexRender=\"\n                      header.column.columnDef.footer;\n                      props: header.getContext();\n                      let content\n                    \"\n                  >\n                    {{ content }}\n                  </ng-container>\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"bottom.boundaryCount\"\n      [siblingCount]=\"bottom.siblingCount\"\n      [labels]=\"bottom.labels\"\n      [background]=\"bottom.background\"\n      [dividerPosition]=\"bottom.dividerPosition\"\n      [hideResults]=\"bottom.hideResults\"\n      [hidePageSize]=\"bottom.hidePageSize\"\n      [hidePager]=\"bottom.hidePager\"\n      [hideArrows]=\"bottom.hideArrows\"\n      [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n      [arrowVariant]=\"bottom.arrowVariant\"\n      [showArrowLabels]=\"bottom.showArrowLabels\"\n      [previousIcon]=\"bottom.previousIcon\"\n      [nextIcon]=\"bottom.nextIcon\"\n      [showModalTitle]=\"bottom.showModalTitle\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (bottomResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.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)}.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__row{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row:last-child{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)}.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);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__cell--footer{color:var(--general-text-primary)}.tedi-table__row--selected{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__row--sub-component{background:var(--table-striped);border-bottom:0}.tedi-table__row--sub-component-open{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n){background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__row>.tedi-table__header-cell:first-child{position:sticky;left:0;z-index:2;background:var(--table-default);box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__row>.tedi-table__cell:first-child{position:sticky;left:0;z-index:1;background:var(--table-default);box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell:first-child{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell:first-child{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:first-child{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up:first-child{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell:first-child{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell:first-child{z-index:3;box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -11129,13 +11525,13 @@ class ScrollFadeComponent {
         this.fade.set({ top: !atTop, bottom: !atBottom });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ScrollFadeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: ScrollFadeComponent, isStandalone: true, selector: "tedi-scroll-fade", inputs: { fadeSize: { classPropertyName: "fadeSize", publicName: "fadeSize", isSignal: true, isRequired: false, transformFunction: null }, fadePosition: { classPropertyName: "fadePosition", publicName: "fadePosition", isSignal: true, isRequired: false, transformFunction: null }, scrollBar: { classPropertyName: "scrollBar", publicName: "scrollBar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrolledToTop: "scrolledToTop", scrolledToBottom: "scrolledToBottom" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "innerRef", first: true, predicate: ["inner"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #inner [class]=\"innerClasses()\" (scroll)=\"onScroll()\">\n  <ng-content />\n</div>\n", styles: [".tedi-scroll-fade{--_tedi-scroll-fade-top: 0%;--_tedi-scroll-fade-bottom: 0%;position:relative;display:flex;flex-direction:column;max-height:inherit;overflow:hidden}.tedi-scroll-fade__inner{flex:1;min-height:0;max-height:inherit;overflow:auto;mask-image:linear-gradient(to bottom,transparent 0%,black var(--_tedi-scroll-fade-top),black calc(100% - var(--_tedi-scroll-fade-bottom)),transparent 100%)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar{width:6px;background-color:var(--general-surface-primary)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-thumb{background:var(--general-border-primary);border-radius:100px}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--general-border-secondary)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-track{background-color:var(--general-surface-primary)}.tedi-scroll-fade--top-0{--_tedi-scroll-fade-top: 0% }.tedi-scroll-fade--bottom-0{--_tedi-scroll-fade-bottom: 0% }.tedi-scroll-fade--top-10{--_tedi-scroll-fade-top: 10% }.tedi-scroll-fade--bottom-10{--_tedi-scroll-fade-bottom: 10% }.tedi-scroll-fade--top-20{--_tedi-scroll-fade-top: 20% }.tedi-scroll-fade--bottom-20{--_tedi-scroll-fade-bottom: 20% }\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: ScrollFadeComponent, isStandalone: true, selector: "tedi-scroll-fade", inputs: { fadeSize: { classPropertyName: "fadeSize", publicName: "fadeSize", isSignal: true, isRequired: false, transformFunction: null }, fadePosition: { classPropertyName: "fadePosition", publicName: "fadePosition", isSignal: true, isRequired: false, transformFunction: null }, scrollBar: { classPropertyName: "scrollBar", publicName: "scrollBar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrolledToTop: "scrolledToTop", scrolledToBottom: "scrolledToBottom" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "innerRef", first: true, predicate: ["inner"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #inner cdkScrollable [class]=\"innerClasses()\" (scroll)=\"onScroll()\">\n  <ng-content />\n</div>\n", styles: [".tedi-scroll-fade{--_tedi-scroll-fade-top: 0%;--_tedi-scroll-fade-bottom: 0%;position:relative;display:flex;flex-direction:column;max-height:inherit;overflow:hidden}.tedi-scroll-fade__inner{flex:1;min-height:0;max-height:inherit;overflow:auto;mask-image:linear-gradient(to bottom,transparent 0%,black var(--_tedi-scroll-fade-top),black calc(100% - var(--_tedi-scroll-fade-bottom)),transparent 100%)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar{width:6px;background-color:var(--general-surface-primary)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-thumb{background:var(--general-border-primary);border-radius:100px}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--general-border-secondary)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-track{background-color:var(--general-surface-primary)}.tedi-scroll-fade--top-0{--_tedi-scroll-fade-top: 0% }.tedi-scroll-fade--bottom-0{--_tedi-scroll-fade-bottom: 0% }.tedi-scroll-fade--top-10{--_tedi-scroll-fade-top: 10% }.tedi-scroll-fade--bottom-10{--_tedi-scroll-fade-bottom: 10% }.tedi-scroll-fade--top-20{--_tedi-scroll-fade-top: 20% }.tedi-scroll-fade--bottom-20{--_tedi-scroll-fade-bottom: 20% }\n"], dependencies: [{ kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ScrollFadeComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: "tedi-scroll-fade", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ standalone: true, selector: "tedi-scroll-fade", imports: [CdkScrollable], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "[class]": "classes()",
-                    }, template: "<div #inner [class]=\"innerClasses()\" (scroll)=\"onScroll()\">\n  <ng-content />\n</div>\n", styles: [".tedi-scroll-fade{--_tedi-scroll-fade-top: 0%;--_tedi-scroll-fade-bottom: 0%;position:relative;display:flex;flex-direction:column;max-height:inherit;overflow:hidden}.tedi-scroll-fade__inner{flex:1;min-height:0;max-height:inherit;overflow:auto;mask-image:linear-gradient(to bottom,transparent 0%,black var(--_tedi-scroll-fade-top),black calc(100% - var(--_tedi-scroll-fade-bottom)),transparent 100%)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar{width:6px;background-color:var(--general-surface-primary)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-thumb{background:var(--general-border-primary);border-radius:100px}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--general-border-secondary)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-track{background-color:var(--general-surface-primary)}.tedi-scroll-fade--top-0{--_tedi-scroll-fade-top: 0% }.tedi-scroll-fade--bottom-0{--_tedi-scroll-fade-bottom: 0% }.tedi-scroll-fade--top-10{--_tedi-scroll-fade-top: 10% }.tedi-scroll-fade--bottom-10{--_tedi-scroll-fade-bottom: 10% }.tedi-scroll-fade--top-20{--_tedi-scroll-fade-top: 20% }.tedi-scroll-fade--bottom-20{--_tedi-scroll-fade-bottom: 20% }\n"] }]
+                    }, template: "<div #inner cdkScrollable [class]=\"innerClasses()\" (scroll)=\"onScroll()\">\n  <ng-content />\n</div>\n", styles: [".tedi-scroll-fade{--_tedi-scroll-fade-top: 0%;--_tedi-scroll-fade-bottom: 0%;position:relative;display:flex;flex-direction:column;max-height:inherit;overflow:hidden}.tedi-scroll-fade__inner{flex:1;min-height:0;max-height:inherit;overflow:auto;mask-image:linear-gradient(to bottom,transparent 0%,black var(--_tedi-scroll-fade-top),black calc(100% - var(--_tedi-scroll-fade-bottom)),transparent 100%)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar{width:6px;background-color:var(--general-surface-primary)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-thumb{background:var(--general-border-primary);border-radius:100px}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--general-border-secondary)}.tedi-scroll-fade__inner--custom-scroll::-webkit-scrollbar-track{background-color:var(--general-surface-primary)}.tedi-scroll-fade--top-0{--_tedi-scroll-fade-top: 0% }.tedi-scroll-fade--bottom-0{--_tedi-scroll-fade-bottom: 0% }.tedi-scroll-fade--top-10{--_tedi-scroll-fade-top: 10% }.tedi-scroll-fade--bottom-10{--_tedi-scroll-fade-bottom: 10% }.tedi-scroll-fade--top-20{--_tedi-scroll-fade-top: 20% }.tedi-scroll-fade--bottom-20{--_tedi-scroll-fade-bottom: 20% }\n"] }]
         }] });
 
 class TimelineComponent {