@tedi-design-system/angular 10.0.0-rc.5 → 10.0.0-rc.7

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

@@ -1293,7 +1293,7 @@ class DropdownContentComponent {
                 provide: DROPDOWN_CONTENT_API,
                 useExisting: forwardRef(() => DropdownContentComponent),
             },
-        ], queries: [{ propertyName: "items", predicate: DropdownItemComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n<ul\n  class=\"tedi-dropdown-content__list\"\n  [class.tedi-dropdown-content__list--plain]=\"!isWidget()\"\n  [id]=\"containerId()\"\n  [attr.role]=\"dropdownRole()\"\n  [attr.aria-labelledby]=\"containerId() + '_trigger'\"\n>\n  <ng-content select=\"li[tedi-dropdown-item]\" />\n</ul>\n", styles: [".tedi-dropdown-content{display:flex;flex-direction:column;width:max-content;min-width:var(--_tedi-dropdown-trigger-width);overflow:auto;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px #0003}.tedi-dropdown-content__list{padding:0;margin:0;list-style:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "items", predicate: DropdownItemComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n<ul\n  class=\"tedi-dropdown-content__list\"\n  [class.tedi-dropdown-content__list--plain]=\"!isWidget()\"\n  [id]=\"containerId()\"\n  [attr.role]=\"dropdownRole()\"\n  [attr.aria-labelledby]=\"containerId() + '_trigger'\"\n>\n  <ng-content select=\"li[tedi-dropdown-item]\" />\n</ul>\n", styles: [".tedi-dropdown-content{display:flex;flex-direction:column;width:max-content;min-width:var(--_tedi-dropdown-trigger-width);overflow:auto;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px #0003}.tedi-dropdown-content .tedi-dropdown-content__list{padding:0;margin:0;list-style:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownContentComponent, decorators: [{
             type: Component,
@@ -1305,7 +1305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                             provide: DROPDOWN_CONTENT_API,
                             useExisting: forwardRef(() => DropdownContentComponent),
                         },
-                    ], template: "<ng-content />\n<ul\n  class=\"tedi-dropdown-content__list\"\n  [class.tedi-dropdown-content__list--plain]=\"!isWidget()\"\n  [id]=\"containerId()\"\n  [attr.role]=\"dropdownRole()\"\n  [attr.aria-labelledby]=\"containerId() + '_trigger'\"\n>\n  <ng-content select=\"li[tedi-dropdown-item]\" />\n</ul>\n", styles: [".tedi-dropdown-content{display:flex;flex-direction:column;width:max-content;min-width:var(--_tedi-dropdown-trigger-width);overflow:auto;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px #0003}.tedi-dropdown-content__list{padding:0;margin:0;list-style:none}\n"] }]
+                    ], template: "<ng-content />\n<ul\n  class=\"tedi-dropdown-content__list\"\n  [class.tedi-dropdown-content__list--plain]=\"!isWidget()\"\n  [id]=\"containerId()\"\n  [attr.role]=\"dropdownRole()\"\n  [attr.aria-labelledby]=\"containerId() + '_trigger'\"\n>\n  <ng-content select=\"li[tedi-dropdown-item]\" />\n</ul>\n", styles: [".tedi-dropdown-content{display:flex;flex-direction:column;width:max-content;min-width:var(--_tedi-dropdown-trigger-width);overflow:auto;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:var(--form-select-area-radius);box-shadow:0 1px 5px #0003}.tedi-dropdown-content .tedi-dropdown-content__list{padding:0;margin:0;list-style:none}\n"] }]
         }], propDecorators: { dropdownRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownRole", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DropdownItemComponent), { isSignal: true }] }] } });
 
 /**
@@ -5023,7 +5023,7 @@ class AccordionItemContentComponent {
     contentId = this.item.contentId;
     expanded = this.item.expanded;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: AccordionItemContentComponent, isStandalone: true, selector: "tedi-accordion-item-content", inputs: { contentClass: { classPropertyName: "contentClass", publicName: "contentClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-item-content": "true", "class.tedi-accordion-item-content--with-icon-card": "item.showIconCard()", "class": "contentClass() ?? ''", "id": "contentId", "attr.role": "expanded() ? 'region' : null", "attr.aria-labelledby": "headerId", "attr.aria-hidden": "!expanded()", "attr.inert": "!expanded() ? '' : null" } }, ngImport: i0, template: "<div class=\"tedi-accordion-item-content__inner\">\n  <ng-content></ng-content>\n</div>\n", styles: [".tedi-accordion-item-content{grid-row:2;grid-column:2;overflow:hidden;background:var(--card-background-primary)}.tedi-accordion-item-content__inner{padding:var(--card-padding-md-default)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: AccordionItemContentComponent, isStandalone: true, selector: "tedi-accordion-item-content", inputs: { contentClass: { classPropertyName: "contentClass", publicName: "contentClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-accordion-item-content": "true", "class.tedi-accordion-item-content--with-icon-card": "item.showIconCard()", "class": "contentClass() ?? ''", "id": "contentId", "attr.role": "expanded() ? 'region' : null", "attr.aria-labelledby": "headerId", "attr.aria-hidden": "!expanded()", "attr.inert": "!expanded() ? '' : null" } }, ngImport: i0, template: "<div class=\"tedi-accordion-item-content__inner\">\n  <ng-content></ng-content>\n</div>\n", styles: [".tedi-accordion-item-content{position:relative;grid-row:2;grid-column:2;overflow:hidden;background:var(--card-background-primary)}.tedi-accordion-item-content__inner{padding:var(--card-padding-md-default)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionItemContentComponent, decorators: [{
             type: Component,
@@ -5036,7 +5036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         "[attr.aria-labelledby]": "headerId",
                         "[attr.aria-hidden]": "!expanded()",
                         "[attr.inert]": "!expanded() ? '' : null",
-                    }, template: "<div class=\"tedi-accordion-item-content__inner\">\n  <ng-content></ng-content>\n</div>\n", styles: [".tedi-accordion-item-content{grid-row:2;grid-column:2;overflow:hidden;background:var(--card-background-primary)}.tedi-accordion-item-content__inner{padding:var(--card-padding-md-default)}\n"] }]
+                    }, template: "<div class=\"tedi-accordion-item-content__inner\">\n  <ng-content></ng-content>\n</div>\n", styles: [".tedi-accordion-item-content{position:relative;grid-row:2;grid-column:2;overflow:hidden;background:var(--card-background-primary)}.tedi-accordion-item-content__inner{padding:var(--card-padding-md-default)}\n"] }]
         }], propDecorators: { contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }] } });
 
 function getCardBorderPlacementColor(border) {
@@ -5474,11 +5474,11 @@ class CollapseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: CollapseComponent, isStandalone: true, selector: "tedi-collapse", inputs: { openText: { classPropertyName: "openText", publicName: "openText", isSignal: true, isRequired: false, transformFunction: null }, closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, hideCollapseText: { classPropertyName: "hideCollapseText", publicName: "hideCollapseText", isSignal: true, isRequired: false, transformFunction: null }, arrowType: { classPropertyName: "arrowType", publicName: "arrowType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"tedi-collapse\"\n  [class.tedi-collapse--open]=\"isOpen() === true\"\n  [class.tedi-collapse--inverted]=\"isInvertedActive()\"\n>\n  <button\n    tedi-collapse-button\n    [open]=\"isOpen()\"\n    [openText]=\"openText()\"\n    [closeText]=\"closeText()\"\n    [hideText]=\"hideCollapseText()\"\n    [arrowType]=\"arrowType()\"\n    [size]=\"size()\"\n    [inverted]=\"inverted()\"\n    [ariaControls]=\"collapseContentId\"\n    (openChange)=\"isOpen.set($event)\"\n  ></button>\n  <div class=\"tedi-collapse__content\" [id]=\"collapseContentId\">\n    <div class=\"tedi-collapse__extender\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.tedi-collapse--inverted{color:var(--general-text-white)}.tedi-collapse__extender{visibility:hidden;min-height:0;padding-top:var(--tedi-dimensions-05);transition:visibility .3s}.tedi-collapse__content{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s}.tedi-collapse--open>.tedi-collapse__content{grid-template-rows:1fr}.tedi-collapse--open>.tedi-collapse__content .tedi-collapse__extender{visibility:visible}@media print{.tedi-collapse__content,.tedi-collapse__extender{transition:none}.tedi-collapse__content{grid-template-rows:1fr;overflow:visible}.tedi-collapse__extender{visibility:visible}}\n"], dependencies: [{ kind: "component", type: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "underline", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: CollapseComponent, isStandalone: true, selector: "tedi-collapse", inputs: { openText: { classPropertyName: "openText", publicName: "openText", isSignal: true, isRequired: false, transformFunction: null }, closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, hideCollapseText: { classPropertyName: "hideCollapseText", publicName: "hideCollapseText", isSignal: true, isRequired: false, transformFunction: null }, arrowType: { classPropertyName: "arrowType", publicName: "arrowType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"tedi-collapse\"\n  [class.tedi-collapse--open]=\"isOpen() === true\"\n  [class.tedi-collapse--inverted]=\"isInvertedActive()\"\n>\n  <button\n    tedi-collapse-button\n    [open]=\"isOpen()\"\n    [openText]=\"openText()\"\n    [closeText]=\"closeText()\"\n    [hideText]=\"hideCollapseText()\"\n    [arrowType]=\"arrowType()\"\n    [size]=\"size()\"\n    [inverted]=\"inverted()\"\n    [ariaControls]=\"collapseContentId\"\n    (openChange)=\"isOpen.set($event)\"\n  ></button>\n  <div class=\"tedi-collapse__content\" [id]=\"collapseContentId\">\n    <div class=\"tedi-collapse__extender\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.tedi-collapse--inverted{color:var(--general-text-white)}.tedi-collapse__extender{visibility:hidden;min-height:0;padding-top:var(--tedi-dimensions-05);transition:visibility .3s}.tedi-collapse__content{position:relative;display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s}.tedi-collapse--open>.tedi-collapse__content{grid-template-rows:1fr}.tedi-collapse--open>.tedi-collapse__content .tedi-collapse__extender{visibility:visible}@media print{.tedi-collapse__content,.tedi-collapse__extender{transition:none}.tedi-collapse__content{grid-template-rows:1fr;overflow:visible}.tedi-collapse__extender{visibility:visible}}\n"], dependencies: [{ kind: "component", type: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "underline", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CollapseComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: "tedi-collapse", imports: [CollapseButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"tedi-collapse\"\n  [class.tedi-collapse--open]=\"isOpen() === true\"\n  [class.tedi-collapse--inverted]=\"isInvertedActive()\"\n>\n  <button\n    tedi-collapse-button\n    [open]=\"isOpen()\"\n    [openText]=\"openText()\"\n    [closeText]=\"closeText()\"\n    [hideText]=\"hideCollapseText()\"\n    [arrowType]=\"arrowType()\"\n    [size]=\"size()\"\n    [inverted]=\"inverted()\"\n    [ariaControls]=\"collapseContentId\"\n    (openChange)=\"isOpen.set($event)\"\n  ></button>\n  <div class=\"tedi-collapse__content\" [id]=\"collapseContentId\">\n    <div class=\"tedi-collapse__extender\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.tedi-collapse--inverted{color:var(--general-text-white)}.tedi-collapse__extender{visibility:hidden;min-height:0;padding-top:var(--tedi-dimensions-05);transition:visibility .3s}.tedi-collapse__content{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s}.tedi-collapse--open>.tedi-collapse__content{grid-template-rows:1fr}.tedi-collapse--open>.tedi-collapse__content .tedi-collapse__extender{visibility:visible}@media print{.tedi-collapse__content,.tedi-collapse__extender{transition:none}.tedi-collapse__content{grid-template-rows:1fr;overflow:visible}.tedi-collapse__extender{visibility:visible}}\n"] }]
+            args: [{ standalone: true, selector: "tedi-collapse", imports: [CollapseButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"tedi-collapse\"\n  [class.tedi-collapse--open]=\"isOpen() === true\"\n  [class.tedi-collapse--inverted]=\"isInvertedActive()\"\n>\n  <button\n    tedi-collapse-button\n    [open]=\"isOpen()\"\n    [openText]=\"openText()\"\n    [closeText]=\"closeText()\"\n    [hideText]=\"hideCollapseText()\"\n    [arrowType]=\"arrowType()\"\n    [size]=\"size()\"\n    [inverted]=\"inverted()\"\n    [ariaControls]=\"collapseContentId\"\n    (openChange)=\"isOpen.set($event)\"\n  ></button>\n  <div class=\"tedi-collapse__content\" [id]=\"collapseContentId\">\n    <div class=\"tedi-collapse__extender\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.tedi-collapse--inverted{color:var(--general-text-white)}.tedi-collapse__extender{visibility:hidden;min-height:0;padding-top:var(--tedi-dimensions-05);transition:visibility .3s}.tedi-collapse__content{position:relative;display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s}.tedi-collapse--open>.tedi-collapse__content{grid-template-rows:1fr}.tedi-collapse--open>.tedi-collapse__content .tedi-collapse__extender{visibility:visible}@media print{.tedi-collapse__content,.tedi-collapse__extender{transition:none}.tedi-collapse__content{grid-template-rows:1fr;overflow:visible}.tedi-collapse__extender{visibility:visible}}\n"] }]
         }], propDecorators: { openText: [{ type: i0.Input, args: [{ isSignal: true, alias: "openText", required: false }] }], closeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeText", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], hideCollapseText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCollapseText", required: false }] }], arrowType: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowType", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inverted: [{ type: i0.Input, args: [{ isSignal: true, alias: "inverted", required: false }] }] } });
 
 /**
@@ -14918,7 +14918,7 @@ class TediTableComponent {
                 useFactory: (component) => component.contextValue,
                 deps: [TediTableComponent],
             },
-        ], queries: [{ propertyName: "customResultsTemplateRef", first: true, predicate: TediPaginationResultsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "tableElement", first: true, predicate: ["tableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n  <div\n    [id]=\"liveRegionId\"\n    aria-live=\"polite\"\n    aria-atomic=\"true\"\n    class=\"sr-only\"\n  ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"top.boundaryCount\"\n      [siblingCount]=\"top.siblingCount\"\n      [labels]=\"top.labels\"\n      [background]=\"top.background\"\n      [align]=\"top.align\"\n      [dividerPosition]=\"top.dividerPosition\"\n      [hideResults]=\"top.hideResults\"\n      [hidePageSize]=\"top.hidePageSize\"\n      [hidePager]=\"top.hidePager\"\n      [hideArrows]=\"top.hideArrows\"\n      [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n      [arrowVariant]=\"top.arrowVariant\"\n      [showArrowLabels]=\"top.showArrowLabels\"\n      [previousIcon]=\"top.previousIcon\"\n      [nextIcon]=\"top.nextIcon\"\n      [showModalTitle]=\"top.showModalTitle\"\n      [xs]=\"top.xs\"\n      [sm]=\"top.sm\"\n      [md]=\"top.md\"\n      [lg]=\"top.lg\"\n      [xl]=\"top.xl\"\n      [xxl]=\"top.xxl\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (topResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n\n<div\n  #scrollContainer\n  class=\"tedi-table__scroll\"\n  [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n  [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n  [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n  [attr.style]=\"maxHeightStyle()\"\n  cdkScrollable\n  tabindex=\"0\"\n  role=\"group\"\n  [attr.aria-label]=\"scrollRegionLabel()\"\n  (scroll)=\"onHorizontalScroll()\"\n>\n  <table\n    #tableElement\n    class=\"tedi-table__table\"\n    [attr.id]=\"id() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [attr.aria-rowcount]=\"ariaRowCount()\"\n    [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n  >\n    @if (caption(); as cap) {\n      <caption class=\"tedi-table__caption\">\n        @if (isString(cap)) {\n          {{ cap }}\n        } @else {\n          <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n        }\n      </caption>\n    }\n\n    <thead class=\"tedi-table__head\">\n      @for (\n        headerGroup of headerGroups();\n        track headerGroup.id;\n        let rowIndex = $index\n      ) {\n        <tr\n          class=\"tedi-table__row\"\n          [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n          [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          cdkDropListAutoScrollDisabled\n          (cdkDropListDropped)=\"handleColumnDrop($event)\"\n        >\n          @for (header of headerGroup.headers; track header.id) {\n            @if (shouldRenderHeader(header, rowIndex)) {\n              @let meta = getColumnMeta(header.column);\n              @let ariaSort = getHeaderAriaSort(header.column);\n              @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n              @let rowSpan = getHeaderRowSpan(header, rowIndex);\n              @let headerAlign = meta?.headerAlign ?? meta?.align;\n              <th\n                scope=\"col\"\n                cdkDrag\n                [cdkDragDisabled]=\"\n                  !reorderableColumns() ||\n                  rowIndex > 0 ||\n                  header.column.id === SELECT_COLUMN_ID ||\n                  header.column.id === EXPAND_COLUMN_ID\n                \"\n                cdkDragLockAxis=\"x\"\n                (keydown)=\"handleHeaderKeydown($event, header)\"\n                [class]=\"\n                  'tedi-table__header-cell' +\n                  (isHeaderGroup(header)\n                    ? ' tedi-table__header-cell--group'\n                    : '') +\n                  (headerAlign\n                    ? ' tedi-table__cell--align-' + headerAlign\n                    : '') +\n                  (meta?.vAlign\n                    ? ' tedi-table__cell--valign-' + meta?.vAlign\n                    : '') +\n                  (pickedUpColumnId() === header.column.id\n                    ? ' tedi-table__header-cell--picked-up'\n                    : '') +\n                  controlCellClass(header.column.id) +\n                  stickyLeftClass(header.column.id) +\n                  stickyRightClass(header.column.id)\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n                [attr.rowspan]=\"rowSpan\"\n                [attr.aria-sort]=\"ariaSort\"\n                [style.width.px]=\"headerCellWidth(header.column)\"\n                [style.min-width.px]=\"columnMinWidth(header.column)\"\n                [style.max-width.px]=\"columnMaxWidth(header.column)\"\n                [style.left.px]=\"stickyLeft(header.column.id)\"\n                [style.right.px]=\"stickyRight(header.column.id)\"\n              >\n                @if (srHeaderLabel) {\n                  <span class=\"sr-only\">{{ srHeaderLabel }}</span>\n                }\n                @if (header.column.id === SELECT_COLUMN_ID) {\n                  @if (selectionMode() === \"multiple\") {\n                    <input\n                      tedi-checkbox\n                      type=\"checkbox\"\n                      [id]=\"resolvedId() + '-select-all'\"\n                      [name]=\"resolvedId() + '-select-all'\"\n                      [attr.aria-label]=\"selectAllLabel()\"\n                      [checked]=\"isAllPageRowsSelected()\"\n                      [indeterminate]=\"\n                        isSomePageRowsSelected() && !isAllPageRowsSelected()\n                      \"\n                      (change)=\"handleSelectAll($any($event.target).checked)\"\n                    />\n                  }\n                } @else if (header.column.id === EXPAND_COLUMN_ID) {\n                  <!-- empty -->\n                } @else if (header.column.id === DRAG_COLUMN_ID) {\n                  <!-- empty -->\n                } @else {\n                  <span class=\"tedi-table__header-content\">\n                    @if (\n                      reorderableColumns() &&\n                      rowIndex === 0 &&\n                      !isHeaderGroup(header)\n                    ) {\n                      <button\n                        type=\"button\"\n                        cdkDragHandle\n                        class=\"tedi-table__drag-handle\"\n                        [class.tedi-table__drag-handle--picked-up]=\"\n                          pickedUpColumnId() === header.column.id\n                        \"\n                        [id]=\"reorderHandleId(header.column.id)\"\n                        [attr.aria-label]=\"dragColumnLabel()\"\n                        [attr.aria-pressed]=\"\n                          reorderableColumns()\n                            ? pickedUpColumnId() === header.column.id\n                            : null\n                        \"\n                      >\n                        <tedi-icon\n                          name=\"drag_indicator\"\n                          [size]=\"18\"\n                          color=\"inherit\"\n                        />\n                      </button>\n                    }\n                    <ng-container\n                      *flexRender=\"\n                        header.column.columnDef.header;\n                        props: header.getContext();\n                        let content\n                      \"\n                    >\n                      @if (shouldRenderSortableHeader(header.column, content)) {\n                        <button\n                          tedi-table-header-button\n                          [icon]=\"sortIcon(header.column)\"\n                          [selected]=\"!!header.column.getIsSorted()\"\n                          (click)=\"handleSortToggle(header.column)\"\n                        >\n                          {{ content }}\n                        </button>\n                      } @else if (isString(content) || isNumber(content)) {\n                        {{ content }}\n                      } @else {\n                        {{ content }}\n                      }\n                    </ng-container>\n                    @if (shouldRenderFilterButton(header.column)) {\n                      @if (filterUsesModal()) {\n                        <button\n                          tedi-table-header-button\n                          icon=\"filter_alt\"\n                          [selected]=\"filterIsActive(header.column)\"\n                          [filled]=\"filterIsActive(header.column)\"\n                          [aria-label]=\"filterAriaLabel(header.column)\"\n                          (click)=\"openFilterModal(header.column)\"\n                        ></button>\n                      } @else {\n                        <tedi-popover\n                          #filterPopover\n                          class=\"tedi-table__filter-popover\"\n                          position=\"bottom-end\"\n                          [preventOverflow]=\"true\"\n                        >\n                          <button\n                            tedi-popover-trigger\n                            tedi-table-header-button\n                            icon=\"filter_alt\"\n                            [selected]=\"filterIsActive(header.column)\"\n                            [filled]=\"filterIsActive(header.column)\"\n                            [aria-label]=\"filterAriaLabel(header.column)\"\n                            (click)=\"handleFilterTriggerClick(header.column)\"\n                          ></button>\n                          <tedi-popover-content\n                            [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n                          >\n                            <div class=\"tedi-table__filter\">\n                              <div class=\"tedi-table__filter-body\">\n                                @if (filterTemplateFor(header.column); as tpl) {\n                                  <ng-container\n                                    *ngTemplateOutlet=\"\n                                      tpl;\n                                      context: filterContextFor(\n                                        header.column,\n                                        filterPopover\n                                      )\n                                    \"\n                                  />\n                                }\n                              </div>\n                              <div class=\"tedi-table__filter-actions\">\n                                <button\n                                  tedi-button\n                                  variant=\"secondary\"\n                                  size=\"small\"\n                                  type=\"button\"\n                                  (click)=\"\n                                    handleFilterClear(\n                                      header.column,\n                                      filterPopover\n                                    )\n                                  \"\n                                >\n                                  {{ filterClearLabel() }}\n                                </button>\n                                <button\n                                  tedi-button\n                                  variant=\"primary\"\n                                  size=\"small\"\n                                  type=\"button\"\n                                  (click)=\"\n                                    handleFilterApply(\n                                      header.column,\n                                      filterPopover\n                                    )\n                                  \"\n                                >\n                                  {{ filterApplyLabel() }}\n                                </button>\n                              </div>\n                            </div>\n                          </tedi-popover-content>\n                        </tedi-popover>\n                      }\n                    }\n                  </span>\n                }\n              </th>\n            }\n          }\n        </tr>\n      }\n      @if (enableColumnFilters()) {\n        <tr\n          class=\"tedi-table__row tedi-table__row--filter\"\n          [attr.aria-rowindex]=\"\n            ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n          \"\n        >\n          @for (column of leafColumns(); track column.id) {\n            @let filterId = resolvedId() + \"-filter-\" + column.id;\n            <th class=\"tedi-table__header-cell\" scope=\"col\">\n              @if (column.getCanFilter()) {\n                <tedi-form-field size=\"small\">\n                  <input\n                    tedi-text-field\n                    type=\"text\"\n                    [id]=\"filterId\"\n                    [name]=\"filterId\"\n                    [attr.aria-label]=\"filterLabel(column)\"\n                    [placeholder]=\"filterPlaceholder()\"\n                    [value]=\"getFilterValue(column)\"\n                    (input)=\"\n                      handleColumnFilter(column, $any($event.target).value)\n                    \"\n                    (clear)=\"handleColumnFilter(column, '')\"\n                  />\n                </tedi-form-field>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody\n      class=\"tedi-table__body\"\n      cdkDropList\n      [cdkDropListDisabled]=\"!reorderableRows()\"\n      (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n    >\n      @if (rows().length === 0) {\n        <tr class=\"tedi-table__row\">\n          <td\n            class=\"tedi-table__cell tedi-table__cell--placeholder\"\n            [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n          >\n            @if (placeholder(); as pl) {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  @if (isString(pl)) {\n                    {{ pl }}\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                  }\n                </div>\n              } @else {\n                @if (isString(pl)) {\n                  {{ pl }}\n                } @else {\n                  <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                }\n              }\n            } @else {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  {{ placeholderLabel() }}\n                </div>\n              } @else {\n                {{ placeholderLabel() }}\n              }\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of rows(); track row.id) {\n          @let isActiveRow =\n            activeRowId() !== undefined && row.id === activeRowId();\n          @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n          @let subRowId = resolvedId() + \"-sub-\" + row.id;\n          @let expandsOnClick = rowExpandsOnClick(row);\n          <tr\n            cdkDrag\n            [cdkDragDisabled]=\"!reorderableRows()\"\n            cdkDragLockAxis=\"y\"\n            [class]=\"\n              'tedi-table__row' +\n              (this.selectedRowHighlight() && row.getIsSelected()\n                ? ' tedi-table__row--selected'\n                : '') +\n              (isActiveRow ? ' tedi-table__row--active' : '') +\n              (interactive() || expandsOnClick\n                ? ' tedi-table__row--clickable'\n                : '') +\n              (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n              (groupStartRowIds().has(row.id)\n                ? ' tedi-table__row--group-start'\n                : '') +\n              (pickedUpRow() === row.original\n                ? ' tedi-table__row--picked-up'\n                : '')\n            \"\n            [attr.role]=\"\n              interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n            \"\n            [attr.tabindex]=\"interactive() ? 0 : null\"\n            [attr.aria-label]=\"rowAriaLabelFor(row)\"\n            [attr.aria-rowindex]=\"ariaRowIndex\"\n            [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n            (click)=\"handleRowClick($event, 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                    controlCellClass(cell.column.id) +\n                    stickyLeftClass(cell.column.id) +\n                    stickyRightClass(cell.column.id)\n                  \"\n                  [style.left.px]=\"stickyLeft(cell.column.id)\"\n                  [style.right.px]=\"stickyRight(cell.column.id)\"\n                  [attr.rowspan]=\"\n                    resolvedSpan !== null && resolvedSpan > 1\n                      ? resolvedSpan\n                      : null\n                  \"\n                >\n                  @if (cell.column.id === DRAG_COLUMN_ID) {\n                    <button\n                      type=\"button\"\n                      cdkDragHandle\n                      class=\"tedi-table__drag-handle\"\n                      [class.tedi-table__drag-handle--picked-up]=\"\n                        pickedUpRow() === row.original\n                      \"\n                      [id]=\"rowReorderHandleId(row.id)\"\n                      [attr.aria-label]=\"dragRowLabel()\"\n                      [attr.aria-pressed]=\"\n                        reorderableRows()\n                          ? pickedUpRow() === row.original\n                          : null\n                      \"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown)=\"handleRowReorderKeydown($event, row)\"\n                    >\n                      <tedi-icon\n                        name=\"drag_indicator\"\n                        [size]=\"18\"\n                        color=\"inherit\"\n                      />\n                    </button>\n                  } @else if (cell.column.id === SELECT_COLUMN_ID) {\n                    @if (selectionMode() === \"multiple\") {\n                      <input\n                        tedi-checkbox\n                        type=\"checkbox\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-' + row.id\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"isRowSelected(row)\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        [indeterminate]=\"isRowIndeterminate(row)\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    } @else {\n                      <input\n                        tedi-radio\n                        type=\"radio\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-row'\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"row.getIsSelected()\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    }\n                  } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n                    <span\n                      class=\"tedi-table__expand-toggle\"\n                      [class.tedi-table__expand-toggle--icon-only]=\"\n                        !expandButtonHasLabel()\n                      \"\n                    >\n                      @if (row.getCanExpand()) {\n                        @let expandOpen = row.getIsExpanded();\n                        <button\n                          tedi-collapse-button\n                          [arrowType]=\"resolvedExpandVariant()\"\n                          [hideText]=\"!expandButtonHasLabel()\"\n                          [openText]=\"expandButtonOpenText()\"\n                          [closeText]=\"expandButtonCloseText()\"\n                          [open]=\"expandOpen\"\n                          [id]=\"resolvedId() + '-expand-' + row.id\"\n                          [ariaControls]=\"\n                            renderSubComponent() ? subRowId : undefined\n                          \"\n                          [ariaLabel]=\"\n                            expandButtonHasLabel()\n                              ? undefined\n                              : expandRowLabel(expandOpen)\n                          \"\n                          (openChange)=\"handleExpandToggle(row)\"\n                          (click)=\"$event.stopPropagation()\"\n                          (keydown)=\"handleExpandKeydown($event)\"\n                        ></button>\n                      }\n                    </span>\n                  } @else {\n                    <ng-container\n                      *flexRender=\"\n                        cell.column.columnDef.cell;\n                        props: cellContext;\n                        let content\n                      \"\n                    >\n                      {{ content }}\n                    </ng-container>\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (renderSubComponent(); as subTpl) {\n            @if (row.getCanExpand()) {\n              @let isExpanded = row.getIsExpanded();\n              <tr\n                [class]=\"\n                  'tedi-table__row tedi-table__row--sub-component' +\n                  (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n                \"\n              >\n                <!-- No region role: one landmark per open row would pile up\n                     (axe landmark-unique). The toggle's aria-controls points here. -->\n                <td\n                  class=\"tedi-table__cell tedi-table__cell--sub-component\"\n                  [attr.id]=\"subRowId\"\n                  [attr.inert]=\"isExpanded ? null : ''\"\n                  [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n                >\n                  <div class=\"tedi-table__sub-component-wrapper\">\n                    <div class=\"tedi-table__sub-component-content\">\n                      <div class=\"tedi-table__sub-component-inner\">\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            subTpl;\n                            context: { $implicit: row }\n                          \"\n                        />\n                      </div>\n                    </div>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        }\n      }\n    </tbody>\n\n    @if (hasFooter()) {\n      <tfoot class=\"tedi-table__foot\">\n        @for (group of footerGroups(); track group.id) {\n          <tr class=\"tedi-table__row\">\n            @for (header of group.headers; track header.id) {\n              @let footerMeta = getColumnMeta(header.column);\n              <td\n                [class]=\"\n                  'tedi-table__cell tedi-table__cell--footer' +\n                  (footerMeta?.align\n                    ? ' tedi-table__cell--align-' + footerMeta?.align\n                    : '') +\n                  (footerMeta?.vAlign\n                    ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n                    : '')\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n              >\n                @if (!header.isPlaceholder) {\n                  <ng-container\n                    *flexRender=\"\n                      header.column.columnDef.footer;\n                      props: header.getContext();\n                      let content\n                    \"\n                  >\n                    {{ content }}\n                  </ng-container>\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"bottom.boundaryCount\"\n      [siblingCount]=\"bottom.siblingCount\"\n      [labels]=\"bottom.labels\"\n      [background]=\"bottom.background\"\n      [align]=\"bottom.align\"\n      [dividerPosition]=\"bottom.dividerPosition\"\n      [hideResults]=\"bottom.hideResults\"\n      [hidePageSize]=\"bottom.hidePageSize\"\n      [hidePager]=\"bottom.hidePager\"\n      [hideArrows]=\"bottom.hideArrows\"\n      [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n      [arrowVariant]=\"bottom.arrowVariant\"\n      [showArrowLabels]=\"bottom.showArrowLabels\"\n      [previousIcon]=\"bottom.previousIcon\"\n      [nextIcon]=\"bottom.nextIcon\"\n      [showModalTitle]=\"bottom.showModalTitle\"\n      [xs]=\"bottom.xs\"\n      [sm]=\"bottom.sm\"\n      [md]=\"bottom.md\"\n      [lg]=\"bottom.lg\"\n      [xl]=\"bottom.xl\"\n      [xxl]=\"bottom.xxl\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (bottomResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open>.tedi-table__cell--sub-component>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>thead>tr:first-child>.tedi-table__header-cell:last-child,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless>.tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom>.tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top>.tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless>.tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column>.tedi-table__scroll--shadow-start>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column>.tedi-table__scroll--shadow-end>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head{border-bottom:0}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header>.tedi-table__scroll--shadow-header>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout>:where(.tedi-table__scroll)>.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)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: PaginationComponent, selector: "tedi-pagination", inputs: ["pageCount", "page", "totalItems", "pageSize", "pageSizeOptions", "boundaryCount", "siblingCount", "labels", "background", "dividerPosition", "align", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle", "xs", "sm", "md", "lg", "xl", "xxl"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TediPaginationResultsDirective, selector: "[tediPaginationResults]" }, { kind: "component", type: TediTableHeaderButtonComponent, selector: "button[tedi-table-header-button]", inputs: ["icon", "filled", "selected", "disabled", "iconSize", "aria-label"] }, { kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled", "readonly", "readOnly"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "underline", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay", "offset"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose", "padding"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "customResultsTemplateRef", first: true, predicate: TediPaginationResultsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "tableElement", first: true, predicate: ["tableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n  <div\n    [id]=\"liveRegionId\"\n    aria-live=\"polite\"\n    aria-atomic=\"true\"\n    class=\"sr-only\"\n  ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"top.boundaryCount\"\n      [siblingCount]=\"top.siblingCount\"\n      [labels]=\"top.labels\"\n      [background]=\"top.background\"\n      [align]=\"top.align\"\n      [dividerPosition]=\"top.dividerPosition\"\n      [hideResults]=\"top.hideResults\"\n      [hidePageSize]=\"top.hidePageSize\"\n      [hidePager]=\"top.hidePager\"\n      [hideArrows]=\"top.hideArrows\"\n      [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n      [arrowVariant]=\"top.arrowVariant\"\n      [showArrowLabels]=\"top.showArrowLabels\"\n      [previousIcon]=\"top.previousIcon\"\n      [nextIcon]=\"top.nextIcon\"\n      [showModalTitle]=\"top.showModalTitle\"\n      [xs]=\"top.xs\"\n      [sm]=\"top.sm\"\n      [md]=\"top.md\"\n      [lg]=\"top.lg\"\n      [xl]=\"top.xl\"\n      [xxl]=\"top.xxl\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (topResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n\n<div\n  #scrollContainer\n  class=\"tedi-table__scroll\"\n  [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n  [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n  [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n  [attr.style]=\"maxHeightStyle()\"\n  cdkScrollable\n  tabindex=\"0\"\n  role=\"group\"\n  [attr.aria-label]=\"scrollRegionLabel()\"\n  (scroll)=\"onHorizontalScroll()\"\n>\n  <table\n    #tableElement\n    class=\"tedi-table__table\"\n    [attr.id]=\"id() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [attr.aria-rowcount]=\"ariaRowCount()\"\n    [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n  >\n    @if (caption(); as cap) {\n      <caption class=\"tedi-table__caption\">\n        @if (isString(cap)) {\n          {{ cap }}\n        } @else {\n          <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n        }\n      </caption>\n    }\n\n    <thead class=\"tedi-table__head\">\n      @for (\n        headerGroup of headerGroups();\n        track headerGroup.id;\n        let rowIndex = $index\n      ) {\n        <tr\n          class=\"tedi-table__row\"\n          [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n          [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          cdkDropListAutoScrollDisabled\n          (cdkDropListDropped)=\"handleColumnDrop($event)\"\n        >\n          @for (header of headerGroup.headers; track header.id) {\n            @if (shouldRenderHeader(header, rowIndex)) {\n              @let meta = getColumnMeta(header.column);\n              @let ariaSort = getHeaderAriaSort(header.column);\n              @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n              @let rowSpan = getHeaderRowSpan(header, rowIndex);\n              @let headerAlign = meta?.headerAlign ?? meta?.align;\n              <th\n                scope=\"col\"\n                cdkDrag\n                [cdkDragDisabled]=\"\n                  !reorderableColumns() ||\n                  rowIndex > 0 ||\n                  header.column.id === SELECT_COLUMN_ID ||\n                  header.column.id === EXPAND_COLUMN_ID\n                \"\n                cdkDragLockAxis=\"x\"\n                (keydown)=\"handleHeaderKeydown($event, header)\"\n                [class]=\"\n                  'tedi-table__header-cell' +\n                  (isHeaderGroup(header)\n                    ? ' tedi-table__header-cell--group'\n                    : '') +\n                  (headerAlign\n                    ? ' tedi-table__cell--align-' + headerAlign\n                    : '') +\n                  (meta?.vAlign\n                    ? ' tedi-table__cell--valign-' + meta?.vAlign\n                    : '') +\n                  (pickedUpColumnId() === header.column.id\n                    ? ' tedi-table__header-cell--picked-up'\n                    : '') +\n                  controlCellClass(header.column.id) +\n                  stickyLeftClass(header.column.id) +\n                  stickyRightClass(header.column.id)\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n                [attr.rowspan]=\"rowSpan\"\n                [attr.aria-sort]=\"ariaSort\"\n                [style.width.px]=\"headerCellWidth(header.column)\"\n                [style.min-width.px]=\"columnMinWidth(header.column)\"\n                [style.max-width.px]=\"columnMaxWidth(header.column)\"\n                [style.left.px]=\"stickyLeft(header.column.id)\"\n                [style.right.px]=\"stickyRight(header.column.id)\"\n              >\n                @if (srHeaderLabel) {\n                  <span class=\"sr-only\">{{ srHeaderLabel }}</span>\n                }\n                @if (header.column.id === SELECT_COLUMN_ID) {\n                  @if (selectionMode() === \"multiple\") {\n                    <input\n                      tedi-checkbox\n                      type=\"checkbox\"\n                      [id]=\"resolvedId() + '-select-all'\"\n                      [name]=\"resolvedId() + '-select-all'\"\n                      [attr.aria-label]=\"selectAllLabel()\"\n                      [checked]=\"isAllPageRowsSelected()\"\n                      [indeterminate]=\"\n                        isSomePageRowsSelected() && !isAllPageRowsSelected()\n                      \"\n                      (change)=\"handleSelectAll($any($event.target).checked)\"\n                    />\n                  }\n                } @else if (header.column.id === EXPAND_COLUMN_ID) {\n                  <!-- empty -->\n                } @else if (header.column.id === DRAG_COLUMN_ID) {\n                  <!-- empty -->\n                } @else {\n                  <span class=\"tedi-table__header-content\">\n                    @if (\n                      reorderableColumns() &&\n                      rowIndex === 0 &&\n                      !isHeaderGroup(header)\n                    ) {\n                      <button\n                        type=\"button\"\n                        cdkDragHandle\n                        class=\"tedi-table__drag-handle\"\n                        [class.tedi-table__drag-handle--picked-up]=\"\n                          pickedUpColumnId() === header.column.id\n                        \"\n                        [id]=\"reorderHandleId(header.column.id)\"\n                        [attr.aria-label]=\"dragColumnLabel()\"\n                        [attr.aria-pressed]=\"\n                          reorderableColumns()\n                            ? pickedUpColumnId() === header.column.id\n                            : null\n                        \"\n                      >\n                        <tedi-icon\n                          name=\"drag_indicator\"\n                          [size]=\"18\"\n                          color=\"inherit\"\n                        />\n                      </button>\n                    }\n                    <ng-container\n                      *flexRender=\"\n                        header.column.columnDef.header;\n                        props: header.getContext();\n                        let content\n                      \"\n                    >\n                      @if (shouldRenderSortableHeader(header.column, content)) {\n                        <button\n                          tedi-table-header-button\n                          [icon]=\"sortIcon(header.column)\"\n                          [selected]=\"!!header.column.getIsSorted()\"\n                          (click)=\"handleSortToggle(header.column)\"\n                        >\n                          {{ content }}\n                        </button>\n                      } @else if (isString(content) || isNumber(content)) {\n                        {{ content }}\n                      } @else {\n                        {{ content }}\n                      }\n                    </ng-container>\n                    @if (shouldRenderFilterButton(header.column)) {\n                      @if (filterUsesModal()) {\n                        <button\n                          tedi-table-header-button\n                          icon=\"filter_alt\"\n                          [selected]=\"filterIsActive(header.column)\"\n                          [filled]=\"filterIsActive(header.column)\"\n                          [aria-label]=\"filterAriaLabel(header.column)\"\n                          (click)=\"openFilterModal(header.column)\"\n                        ></button>\n                      } @else {\n                        <tedi-popover\n                          #filterPopover\n                          class=\"tedi-table__filter-popover\"\n                          position=\"bottom-end\"\n                          [preventOverflow]=\"true\"\n                        >\n                          <button\n                            tedi-popover-trigger\n                            tedi-table-header-button\n                            icon=\"filter_alt\"\n                            [selected]=\"filterIsActive(header.column)\"\n                            [filled]=\"filterIsActive(header.column)\"\n                            [aria-label]=\"filterAriaLabel(header.column)\"\n                            (click)=\"handleFilterTriggerClick(header.column)\"\n                          ></button>\n                          <tedi-popover-content\n                            [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n                          >\n                            <div class=\"tedi-table__filter\">\n                              <div class=\"tedi-table__filter-body\">\n                                @if (filterTemplateFor(header.column); as tpl) {\n                                  <ng-container\n                                    *ngTemplateOutlet=\"\n                                      tpl;\n                                      context: filterContextFor(\n                                        header.column,\n                                        filterPopover\n                                      )\n                                    \"\n                                  />\n                                }\n                              </div>\n                              <div class=\"tedi-table__filter-actions\">\n                                <button\n                                  tedi-button\n                                  variant=\"secondary\"\n                                  size=\"small\"\n                                  type=\"button\"\n                                  (click)=\"\n                                    handleFilterClear(\n                                      header.column,\n                                      filterPopover\n                                    )\n                                  \"\n                                >\n                                  {{ filterClearLabel() }}\n                                </button>\n                                <button\n                                  tedi-button\n                                  variant=\"primary\"\n                                  size=\"small\"\n                                  type=\"button\"\n                                  (click)=\"\n                                    handleFilterApply(\n                                      header.column,\n                                      filterPopover\n                                    )\n                                  \"\n                                >\n                                  {{ filterApplyLabel() }}\n                                </button>\n                              </div>\n                            </div>\n                          </tedi-popover-content>\n                        </tedi-popover>\n                      }\n                    }\n                  </span>\n                }\n              </th>\n            }\n          }\n        </tr>\n      }\n      @if (enableColumnFilters()) {\n        <tr\n          class=\"tedi-table__row tedi-table__row--filter\"\n          [attr.aria-rowindex]=\"\n            ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n          \"\n        >\n          @for (column of leafColumns(); track column.id) {\n            @let filterId = resolvedId() + \"-filter-\" + column.id;\n            <th class=\"tedi-table__header-cell\" scope=\"col\">\n              @if (column.getCanFilter()) {\n                <tedi-form-field size=\"small\">\n                  <input\n                    tedi-text-field\n                    type=\"text\"\n                    [id]=\"filterId\"\n                    [name]=\"filterId\"\n                    [attr.aria-label]=\"filterLabel(column)\"\n                    [placeholder]=\"filterPlaceholder()\"\n                    [value]=\"getFilterValue(column)\"\n                    (input)=\"\n                      handleColumnFilter(column, $any($event.target).value)\n                    \"\n                    (clear)=\"handleColumnFilter(column, '')\"\n                  />\n                </tedi-form-field>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody\n      class=\"tedi-table__body\"\n      cdkDropList\n      [cdkDropListDisabled]=\"!reorderableRows()\"\n      (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n    >\n      @if (rows().length === 0) {\n        <tr class=\"tedi-table__row\">\n          <td\n            class=\"tedi-table__cell tedi-table__cell--placeholder\"\n            [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n          >\n            @if (placeholder(); as pl) {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  @if (isString(pl)) {\n                    {{ pl }}\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                  }\n                </div>\n              } @else {\n                @if (isString(pl)) {\n                  {{ pl }}\n                } @else {\n                  <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                }\n              }\n            } @else {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  {{ placeholderLabel() }}\n                </div>\n              } @else {\n                {{ placeholderLabel() }}\n              }\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of rows(); track row.id) {\n          @let isActiveRow =\n            activeRowId() !== undefined && row.id === activeRowId();\n          @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n          @let subRowId = resolvedId() + \"-sub-\" + row.id;\n          @let expandsOnClick = rowExpandsOnClick(row);\n          <tr\n            cdkDrag\n            [cdkDragDisabled]=\"!reorderableRows()\"\n            cdkDragLockAxis=\"y\"\n            [class]=\"\n              'tedi-table__row' +\n              (this.selectedRowHighlight() && row.getIsSelected()\n                ? ' tedi-table__row--selected'\n                : '') +\n              (isActiveRow ? ' tedi-table__row--active' : '') +\n              (interactive() || expandsOnClick\n                ? ' tedi-table__row--clickable'\n                : '') +\n              (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n              (groupStartRowIds().has(row.id)\n                ? ' tedi-table__row--group-start'\n                : '') +\n              (pickedUpRow() === row.original\n                ? ' tedi-table__row--picked-up'\n                : '')\n            \"\n            [attr.role]=\"\n              interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n            \"\n            [attr.tabindex]=\"interactive() ? 0 : null\"\n            [attr.aria-label]=\"rowAriaLabelFor(row)\"\n            [attr.aria-rowindex]=\"ariaRowIndex\"\n            [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n            (click)=\"handleRowClick($event, 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                    controlCellClass(cell.column.id) +\n                    stickyLeftClass(cell.column.id) +\n                    stickyRightClass(cell.column.id)\n                  \"\n                  [style.left.px]=\"stickyLeft(cell.column.id)\"\n                  [style.right.px]=\"stickyRight(cell.column.id)\"\n                  [attr.rowspan]=\"\n                    resolvedSpan !== null && resolvedSpan > 1\n                      ? resolvedSpan\n                      : null\n                  \"\n                >\n                  @if (cell.column.id === DRAG_COLUMN_ID) {\n                    <button\n                      type=\"button\"\n                      cdkDragHandle\n                      class=\"tedi-table__drag-handle\"\n                      [class.tedi-table__drag-handle--picked-up]=\"\n                        pickedUpRow() === row.original\n                      \"\n                      [id]=\"rowReorderHandleId(row.id)\"\n                      [attr.aria-label]=\"dragRowLabel()\"\n                      [attr.aria-pressed]=\"\n                        reorderableRows()\n                          ? pickedUpRow() === row.original\n                          : null\n                      \"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown)=\"handleRowReorderKeydown($event, row)\"\n                    >\n                      <tedi-icon\n                        name=\"drag_indicator\"\n                        [size]=\"18\"\n                        color=\"inherit\"\n                      />\n                    </button>\n                  } @else if (cell.column.id === SELECT_COLUMN_ID) {\n                    @if (selectionMode() === \"multiple\") {\n                      <input\n                        tedi-checkbox\n                        type=\"checkbox\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-' + row.id\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"isRowSelected(row)\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        [indeterminate]=\"isRowIndeterminate(row)\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    } @else {\n                      <input\n                        tedi-radio\n                        type=\"radio\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-row'\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"row.getIsSelected()\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    }\n                  } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n                    <span\n                      class=\"tedi-table__expand-toggle\"\n                      [class.tedi-table__expand-toggle--icon-only]=\"\n                        !expandButtonHasLabel()\n                      \"\n                    >\n                      @if (row.getCanExpand()) {\n                        @let expandOpen = row.getIsExpanded();\n                        <button\n                          tedi-collapse-button\n                          [arrowType]=\"resolvedExpandVariant()\"\n                          [hideText]=\"!expandButtonHasLabel()\"\n                          [openText]=\"expandButtonOpenText()\"\n                          [closeText]=\"expandButtonCloseText()\"\n                          [open]=\"expandOpen\"\n                          [id]=\"resolvedId() + '-expand-' + row.id\"\n                          [ariaControls]=\"\n                            renderSubComponent() ? subRowId : undefined\n                          \"\n                          [ariaLabel]=\"\n                            expandButtonHasLabel()\n                              ? undefined\n                              : expandRowLabel(expandOpen)\n                          \"\n                          (openChange)=\"handleExpandToggle(row)\"\n                          (click)=\"$event.stopPropagation()\"\n                          (keydown)=\"handleExpandKeydown($event)\"\n                        ></button>\n                      }\n                    </span>\n                  } @else {\n                    <ng-container\n                      *flexRender=\"\n                        cell.column.columnDef.cell;\n                        props: cellContext;\n                        let content\n                      \"\n                    >\n                      {{ content }}\n                    </ng-container>\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (renderSubComponent(); as subTpl) {\n            @if (row.getCanExpand()) {\n              @let isExpanded = row.getIsExpanded();\n              <tr\n                [class]=\"\n                  'tedi-table__row tedi-table__row--sub-component' +\n                  (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n                \"\n              >\n                <!-- No region role: one landmark per open row would pile up\n                     (axe landmark-unique). The toggle's aria-controls points here. -->\n                <td\n                  class=\"tedi-table__cell tedi-table__cell--sub-component\"\n                  [attr.id]=\"subRowId\"\n                  [attr.inert]=\"isExpanded ? null : ''\"\n                  [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n                >\n                  <div class=\"tedi-table__sub-component-wrapper\">\n                    <div class=\"tedi-table__sub-component-content\">\n                      <div class=\"tedi-table__sub-component-inner\">\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            subTpl;\n                            context: { $implicit: row }\n                          \"\n                        />\n                      </div>\n                    </div>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        }\n      }\n    </tbody>\n\n    @if (hasFooter()) {\n      <tfoot class=\"tedi-table__foot\">\n        @for (group of footerGroups(); track group.id) {\n          <tr class=\"tedi-table__row\">\n            @for (header of group.headers; track header.id) {\n              @let footerMeta = getColumnMeta(header.column);\n              <td\n                [class]=\"\n                  'tedi-table__cell tedi-table__cell--footer' +\n                  (footerMeta?.align\n                    ? ' tedi-table__cell--align-' + footerMeta?.align\n                    : '') +\n                  (footerMeta?.vAlign\n                    ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n                    : '')\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n              >\n                @if (!header.isPlaceholder) {\n                  <ng-container\n                    *flexRender=\"\n                      header.column.columnDef.footer;\n                      props: header.getContext();\n                      let content\n                    \"\n                  >\n                    {{ content }}\n                  </ng-container>\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"bottom.boundaryCount\"\n      [siblingCount]=\"bottom.siblingCount\"\n      [labels]=\"bottom.labels\"\n      [background]=\"bottom.background\"\n      [align]=\"bottom.align\"\n      [dividerPosition]=\"bottom.dividerPosition\"\n      [hideResults]=\"bottom.hideResults\"\n      [hidePageSize]=\"bottom.hidePageSize\"\n      [hidePager]=\"bottom.hidePager\"\n      [hideArrows]=\"bottom.hideArrows\"\n      [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n      [arrowVariant]=\"bottom.arrowVariant\"\n      [showArrowLabels]=\"bottom.showArrowLabels\"\n      [previousIcon]=\"bottom.previousIcon\"\n      [nextIcon]=\"bottom.nextIcon\"\n      [showModalTitle]=\"bottom.showModalTitle\"\n      [xs]=\"bottom.xs\"\n      [sm]=\"bottom.sm\"\n      [md]=\"bottom.md\"\n      [lg]=\"bottom.lg\"\n      [xl]=\"bottom.xl\"\n      [xxl]=\"bottom.xxl\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (bottomResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open>.tedi-table__cell--sub-component>.tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{position:relative;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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>thead>tr:first-child>.tedi-table__header-cell:last-child,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless>.tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom>.tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top>.tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless>.tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column>.tedi-table__scroll--shadow-start>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column>.tedi-table__scroll--shadow-end>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head{border-bottom:0}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header>.tedi-table__scroll--shadow-header>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout>:where(.tedi-table__scroll)>.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)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: PaginationComponent, selector: "tedi-pagination", inputs: ["pageCount", "page", "totalItems", "pageSize", "pageSizeOptions", "boundaryCount", "siblingCount", "labels", "background", "dividerPosition", "align", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle", "xs", "sm", "md", "lg", "xl", "xxl"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TediPaginationResultsDirective, selector: "[tediPaginationResults]" }, { kind: "component", type: TediTableHeaderButtonComponent, selector: "button[tedi-table-header-button]", inputs: ["icon", "filled", "selected", "disabled", "iconSize", "aria-label"] }, { kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled", "readonly", "readOnly"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "underline", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay", "offset"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose", "padding"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TediTableComponent, decorators: [{
             type: Component,
@@ -14952,7 +14952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                             useFactory: (component) => component.contextValue,
                             deps: [TediTableComponent],
                         },
-                    ], template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n  <div\n    [id]=\"liveRegionId\"\n    aria-live=\"polite\"\n    aria-atomic=\"true\"\n    class=\"sr-only\"\n  ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"top.boundaryCount\"\n      [siblingCount]=\"top.siblingCount\"\n      [labels]=\"top.labels\"\n      [background]=\"top.background\"\n      [align]=\"top.align\"\n      [dividerPosition]=\"top.dividerPosition\"\n      [hideResults]=\"top.hideResults\"\n      [hidePageSize]=\"top.hidePageSize\"\n      [hidePager]=\"top.hidePager\"\n      [hideArrows]=\"top.hideArrows\"\n      [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n      [arrowVariant]=\"top.arrowVariant\"\n      [showArrowLabels]=\"top.showArrowLabels\"\n      [previousIcon]=\"top.previousIcon\"\n      [nextIcon]=\"top.nextIcon\"\n      [showModalTitle]=\"top.showModalTitle\"\n      [xs]=\"top.xs\"\n      [sm]=\"top.sm\"\n      [md]=\"top.md\"\n      [lg]=\"top.lg\"\n      [xl]=\"top.xl\"\n      [xxl]=\"top.xxl\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (topResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n\n<div\n  #scrollContainer\n  class=\"tedi-table__scroll\"\n  [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n  [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n  [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n  [attr.style]=\"maxHeightStyle()\"\n  cdkScrollable\n  tabindex=\"0\"\n  role=\"group\"\n  [attr.aria-label]=\"scrollRegionLabel()\"\n  (scroll)=\"onHorizontalScroll()\"\n>\n  <table\n    #tableElement\n    class=\"tedi-table__table\"\n    [attr.id]=\"id() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [attr.aria-rowcount]=\"ariaRowCount()\"\n    [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n  >\n    @if (caption(); as cap) {\n      <caption class=\"tedi-table__caption\">\n        @if (isString(cap)) {\n          {{ cap }}\n        } @else {\n          <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n        }\n      </caption>\n    }\n\n    <thead class=\"tedi-table__head\">\n      @for (\n        headerGroup of headerGroups();\n        track headerGroup.id;\n        let rowIndex = $index\n      ) {\n        <tr\n          class=\"tedi-table__row\"\n          [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n          [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          cdkDropListAutoScrollDisabled\n          (cdkDropListDropped)=\"handleColumnDrop($event)\"\n        >\n          @for (header of headerGroup.headers; track header.id) {\n            @if (shouldRenderHeader(header, rowIndex)) {\n              @let meta = getColumnMeta(header.column);\n              @let ariaSort = getHeaderAriaSort(header.column);\n              @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n              @let rowSpan = getHeaderRowSpan(header, rowIndex);\n              @let headerAlign = meta?.headerAlign ?? meta?.align;\n              <th\n                scope=\"col\"\n                cdkDrag\n                [cdkDragDisabled]=\"\n                  !reorderableColumns() ||\n                  rowIndex > 0 ||\n                  header.column.id === SELECT_COLUMN_ID ||\n                  header.column.id === EXPAND_COLUMN_ID\n                \"\n                cdkDragLockAxis=\"x\"\n                (keydown)=\"handleHeaderKeydown($event, header)\"\n                [class]=\"\n                  'tedi-table__header-cell' +\n                  (isHeaderGroup(header)\n                    ? ' tedi-table__header-cell--group'\n                    : '') +\n                  (headerAlign\n                    ? ' tedi-table__cell--align-' + headerAlign\n                    : '') +\n                  (meta?.vAlign\n                    ? ' tedi-table__cell--valign-' + meta?.vAlign\n                    : '') +\n                  (pickedUpColumnId() === header.column.id\n                    ? ' tedi-table__header-cell--picked-up'\n                    : '') +\n                  controlCellClass(header.column.id) +\n                  stickyLeftClass(header.column.id) +\n                  stickyRightClass(header.column.id)\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n                [attr.rowspan]=\"rowSpan\"\n                [attr.aria-sort]=\"ariaSort\"\n                [style.width.px]=\"headerCellWidth(header.column)\"\n                [style.min-width.px]=\"columnMinWidth(header.column)\"\n                [style.max-width.px]=\"columnMaxWidth(header.column)\"\n                [style.left.px]=\"stickyLeft(header.column.id)\"\n                [style.right.px]=\"stickyRight(header.column.id)\"\n              >\n                @if (srHeaderLabel) {\n                  <span class=\"sr-only\">{{ srHeaderLabel }}</span>\n                }\n                @if (header.column.id === SELECT_COLUMN_ID) {\n                  @if (selectionMode() === \"multiple\") {\n                    <input\n                      tedi-checkbox\n                      type=\"checkbox\"\n                      [id]=\"resolvedId() + '-select-all'\"\n                      [name]=\"resolvedId() + '-select-all'\"\n                      [attr.aria-label]=\"selectAllLabel()\"\n                      [checked]=\"isAllPageRowsSelected()\"\n                      [indeterminate]=\"\n                        isSomePageRowsSelected() && !isAllPageRowsSelected()\n                      \"\n                      (change)=\"handleSelectAll($any($event.target).checked)\"\n                    />\n                  }\n                } @else if (header.column.id === EXPAND_COLUMN_ID) {\n                  <!-- empty -->\n                } @else if (header.column.id === DRAG_COLUMN_ID) {\n                  <!-- empty -->\n                } @else {\n                  <span class=\"tedi-table__header-content\">\n                    @if (\n                      reorderableColumns() &&\n                      rowIndex === 0 &&\n                      !isHeaderGroup(header)\n                    ) {\n                      <button\n                        type=\"button\"\n                        cdkDragHandle\n                        class=\"tedi-table__drag-handle\"\n                        [class.tedi-table__drag-handle--picked-up]=\"\n                          pickedUpColumnId() === header.column.id\n                        \"\n                        [id]=\"reorderHandleId(header.column.id)\"\n                        [attr.aria-label]=\"dragColumnLabel()\"\n                        [attr.aria-pressed]=\"\n                          reorderableColumns()\n                            ? pickedUpColumnId() === header.column.id\n                            : null\n                        \"\n                      >\n                        <tedi-icon\n                          name=\"drag_indicator\"\n                          [size]=\"18\"\n                          color=\"inherit\"\n                        />\n                      </button>\n                    }\n                    <ng-container\n                      *flexRender=\"\n                        header.column.columnDef.header;\n                        props: header.getContext();\n                        let content\n                      \"\n                    >\n                      @if (shouldRenderSortableHeader(header.column, content)) {\n                        <button\n                          tedi-table-header-button\n                          [icon]=\"sortIcon(header.column)\"\n                          [selected]=\"!!header.column.getIsSorted()\"\n                          (click)=\"handleSortToggle(header.column)\"\n                        >\n                          {{ content }}\n                        </button>\n                      } @else if (isString(content) || isNumber(content)) {\n                        {{ content }}\n                      } @else {\n                        {{ content }}\n                      }\n                    </ng-container>\n                    @if (shouldRenderFilterButton(header.column)) {\n                      @if (filterUsesModal()) {\n                        <button\n                          tedi-table-header-button\n                          icon=\"filter_alt\"\n                          [selected]=\"filterIsActive(header.column)\"\n                          [filled]=\"filterIsActive(header.column)\"\n                          [aria-label]=\"filterAriaLabel(header.column)\"\n                          (click)=\"openFilterModal(header.column)\"\n                        ></button>\n                      } @else {\n                        <tedi-popover\n                          #filterPopover\n                          class=\"tedi-table__filter-popover\"\n                          position=\"bottom-end\"\n                          [preventOverflow]=\"true\"\n                        >\n                          <button\n                            tedi-popover-trigger\n                            tedi-table-header-button\n                            icon=\"filter_alt\"\n                            [selected]=\"filterIsActive(header.column)\"\n                            [filled]=\"filterIsActive(header.column)\"\n                            [aria-label]=\"filterAriaLabel(header.column)\"\n                            (click)=\"handleFilterTriggerClick(header.column)\"\n                          ></button>\n                          <tedi-popover-content\n                            [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n                          >\n                            <div class=\"tedi-table__filter\">\n                              <div class=\"tedi-table__filter-body\">\n                                @if (filterTemplateFor(header.column); as tpl) {\n                                  <ng-container\n                                    *ngTemplateOutlet=\"\n                                      tpl;\n                                      context: filterContextFor(\n                                        header.column,\n                                        filterPopover\n                                      )\n                                    \"\n                                  />\n                                }\n                              </div>\n                              <div class=\"tedi-table__filter-actions\">\n                                <button\n                                  tedi-button\n                                  variant=\"secondary\"\n                                  size=\"small\"\n                                  type=\"button\"\n                                  (click)=\"\n                                    handleFilterClear(\n                                      header.column,\n                                      filterPopover\n                                    )\n                                  \"\n                                >\n                                  {{ filterClearLabel() }}\n                                </button>\n                                <button\n                                  tedi-button\n                                  variant=\"primary\"\n                                  size=\"small\"\n                                  type=\"button\"\n                                  (click)=\"\n                                    handleFilterApply(\n                                      header.column,\n                                      filterPopover\n                                    )\n                                  \"\n                                >\n                                  {{ filterApplyLabel() }}\n                                </button>\n                              </div>\n                            </div>\n                          </tedi-popover-content>\n                        </tedi-popover>\n                      }\n                    }\n                  </span>\n                }\n              </th>\n            }\n          }\n        </tr>\n      }\n      @if (enableColumnFilters()) {\n        <tr\n          class=\"tedi-table__row tedi-table__row--filter\"\n          [attr.aria-rowindex]=\"\n            ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n          \"\n        >\n          @for (column of leafColumns(); track column.id) {\n            @let filterId = resolvedId() + \"-filter-\" + column.id;\n            <th class=\"tedi-table__header-cell\" scope=\"col\">\n              @if (column.getCanFilter()) {\n                <tedi-form-field size=\"small\">\n                  <input\n                    tedi-text-field\n                    type=\"text\"\n                    [id]=\"filterId\"\n                    [name]=\"filterId\"\n                    [attr.aria-label]=\"filterLabel(column)\"\n                    [placeholder]=\"filterPlaceholder()\"\n                    [value]=\"getFilterValue(column)\"\n                    (input)=\"\n                      handleColumnFilter(column, $any($event.target).value)\n                    \"\n                    (clear)=\"handleColumnFilter(column, '')\"\n                  />\n                </tedi-form-field>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody\n      class=\"tedi-table__body\"\n      cdkDropList\n      [cdkDropListDisabled]=\"!reorderableRows()\"\n      (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n    >\n      @if (rows().length === 0) {\n        <tr class=\"tedi-table__row\">\n          <td\n            class=\"tedi-table__cell tedi-table__cell--placeholder\"\n            [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n          >\n            @if (placeholder(); as pl) {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  @if (isString(pl)) {\n                    {{ pl }}\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                  }\n                </div>\n              } @else {\n                @if (isString(pl)) {\n                  {{ pl }}\n                } @else {\n                  <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                }\n              }\n            } @else {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  {{ placeholderLabel() }}\n                </div>\n              } @else {\n                {{ placeholderLabel() }}\n              }\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of rows(); track row.id) {\n          @let isActiveRow =\n            activeRowId() !== undefined && row.id === activeRowId();\n          @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n          @let subRowId = resolvedId() + \"-sub-\" + row.id;\n          @let expandsOnClick = rowExpandsOnClick(row);\n          <tr\n            cdkDrag\n            [cdkDragDisabled]=\"!reorderableRows()\"\n            cdkDragLockAxis=\"y\"\n            [class]=\"\n              'tedi-table__row' +\n              (this.selectedRowHighlight() && row.getIsSelected()\n                ? ' tedi-table__row--selected'\n                : '') +\n              (isActiveRow ? ' tedi-table__row--active' : '') +\n              (interactive() || expandsOnClick\n                ? ' tedi-table__row--clickable'\n                : '') +\n              (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n              (groupStartRowIds().has(row.id)\n                ? ' tedi-table__row--group-start'\n                : '') +\n              (pickedUpRow() === row.original\n                ? ' tedi-table__row--picked-up'\n                : '')\n            \"\n            [attr.role]=\"\n              interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n            \"\n            [attr.tabindex]=\"interactive() ? 0 : null\"\n            [attr.aria-label]=\"rowAriaLabelFor(row)\"\n            [attr.aria-rowindex]=\"ariaRowIndex\"\n            [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n            (click)=\"handleRowClick($event, 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                    controlCellClass(cell.column.id) +\n                    stickyLeftClass(cell.column.id) +\n                    stickyRightClass(cell.column.id)\n                  \"\n                  [style.left.px]=\"stickyLeft(cell.column.id)\"\n                  [style.right.px]=\"stickyRight(cell.column.id)\"\n                  [attr.rowspan]=\"\n                    resolvedSpan !== null && resolvedSpan > 1\n                      ? resolvedSpan\n                      : null\n                  \"\n                >\n                  @if (cell.column.id === DRAG_COLUMN_ID) {\n                    <button\n                      type=\"button\"\n                      cdkDragHandle\n                      class=\"tedi-table__drag-handle\"\n                      [class.tedi-table__drag-handle--picked-up]=\"\n                        pickedUpRow() === row.original\n                      \"\n                      [id]=\"rowReorderHandleId(row.id)\"\n                      [attr.aria-label]=\"dragRowLabel()\"\n                      [attr.aria-pressed]=\"\n                        reorderableRows()\n                          ? pickedUpRow() === row.original\n                          : null\n                      \"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown)=\"handleRowReorderKeydown($event, row)\"\n                    >\n                      <tedi-icon\n                        name=\"drag_indicator\"\n                        [size]=\"18\"\n                        color=\"inherit\"\n                      />\n                    </button>\n                  } @else if (cell.column.id === SELECT_COLUMN_ID) {\n                    @if (selectionMode() === \"multiple\") {\n                      <input\n                        tedi-checkbox\n                        type=\"checkbox\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-' + row.id\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"isRowSelected(row)\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        [indeterminate]=\"isRowIndeterminate(row)\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    } @else {\n                      <input\n                        tedi-radio\n                        type=\"radio\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-row'\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"row.getIsSelected()\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    }\n                  } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n                    <span\n                      class=\"tedi-table__expand-toggle\"\n                      [class.tedi-table__expand-toggle--icon-only]=\"\n                        !expandButtonHasLabel()\n                      \"\n                    >\n                      @if (row.getCanExpand()) {\n                        @let expandOpen = row.getIsExpanded();\n                        <button\n                          tedi-collapse-button\n                          [arrowType]=\"resolvedExpandVariant()\"\n                          [hideText]=\"!expandButtonHasLabel()\"\n                          [openText]=\"expandButtonOpenText()\"\n                          [closeText]=\"expandButtonCloseText()\"\n                          [open]=\"expandOpen\"\n                          [id]=\"resolvedId() + '-expand-' + row.id\"\n                          [ariaControls]=\"\n                            renderSubComponent() ? subRowId : undefined\n                          \"\n                          [ariaLabel]=\"\n                            expandButtonHasLabel()\n                              ? undefined\n                              : expandRowLabel(expandOpen)\n                          \"\n                          (openChange)=\"handleExpandToggle(row)\"\n                          (click)=\"$event.stopPropagation()\"\n                          (keydown)=\"handleExpandKeydown($event)\"\n                        ></button>\n                      }\n                    </span>\n                  } @else {\n                    <ng-container\n                      *flexRender=\"\n                        cell.column.columnDef.cell;\n                        props: cellContext;\n                        let content\n                      \"\n                    >\n                      {{ content }}\n                    </ng-container>\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (renderSubComponent(); as subTpl) {\n            @if (row.getCanExpand()) {\n              @let isExpanded = row.getIsExpanded();\n              <tr\n                [class]=\"\n                  'tedi-table__row tedi-table__row--sub-component' +\n                  (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n                \"\n              >\n                <!-- No region role: one landmark per open row would pile up\n                     (axe landmark-unique). The toggle's aria-controls points here. -->\n                <td\n                  class=\"tedi-table__cell tedi-table__cell--sub-component\"\n                  [attr.id]=\"subRowId\"\n                  [attr.inert]=\"isExpanded ? null : ''\"\n                  [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n                >\n                  <div class=\"tedi-table__sub-component-wrapper\">\n                    <div class=\"tedi-table__sub-component-content\">\n                      <div class=\"tedi-table__sub-component-inner\">\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            subTpl;\n                            context: { $implicit: row }\n                          \"\n                        />\n                      </div>\n                    </div>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        }\n      }\n    </tbody>\n\n    @if (hasFooter()) {\n      <tfoot class=\"tedi-table__foot\">\n        @for (group of footerGroups(); track group.id) {\n          <tr class=\"tedi-table__row\">\n            @for (header of group.headers; track header.id) {\n              @let footerMeta = getColumnMeta(header.column);\n              <td\n                [class]=\"\n                  'tedi-table__cell tedi-table__cell--footer' +\n                  (footerMeta?.align\n                    ? ' tedi-table__cell--align-' + footerMeta?.align\n                    : '') +\n                  (footerMeta?.vAlign\n                    ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n                    : '')\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n              >\n                @if (!header.isPlaceholder) {\n                  <ng-container\n                    *flexRender=\"\n                      header.column.columnDef.footer;\n                      props: header.getContext();\n                      let content\n                    \"\n                  >\n                    {{ content }}\n                  </ng-container>\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"bottom.boundaryCount\"\n      [siblingCount]=\"bottom.siblingCount\"\n      [labels]=\"bottom.labels\"\n      [background]=\"bottom.background\"\n      [align]=\"bottom.align\"\n      [dividerPosition]=\"bottom.dividerPosition\"\n      [hideResults]=\"bottom.hideResults\"\n      [hidePageSize]=\"bottom.hidePageSize\"\n      [hidePager]=\"bottom.hidePager\"\n      [hideArrows]=\"bottom.hideArrows\"\n      [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n      [arrowVariant]=\"bottom.arrowVariant\"\n      [showArrowLabels]=\"bottom.showArrowLabels\"\n      [previousIcon]=\"bottom.previousIcon\"\n      [nextIcon]=\"bottom.nextIcon\"\n      [showModalTitle]=\"bottom.showModalTitle\"\n      [xs]=\"bottom.xs\"\n      [sm]=\"bottom.sm\"\n      [md]=\"bottom.md\"\n      [lg]=\"bottom.lg\"\n      [xl]=\"bottom.xl\"\n      [xxl]=\"bottom.xxl\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (bottomResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open>.tedi-table__cell--sub-component>.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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>thead>tr:first-child>.tedi-table__header-cell:last-child,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless>.tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom>.tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top>.tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless>.tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column>.tedi-table__scroll--shadow-start>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column>.tedi-table__scroll--shadow-end>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head{border-bottom:0}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header>.tedi-table__scroll--shadow-header>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout>:where(.tedi-table__scroll)>.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)}\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=\"sr-only\"\n  ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"top.boundaryCount\"\n      [siblingCount]=\"top.siblingCount\"\n      [labels]=\"top.labels\"\n      [background]=\"top.background\"\n      [align]=\"top.align\"\n      [dividerPosition]=\"top.dividerPosition\"\n      [hideResults]=\"top.hideResults\"\n      [hidePageSize]=\"top.hidePageSize\"\n      [hidePager]=\"top.hidePager\"\n      [hideArrows]=\"top.hideArrows\"\n      [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n      [arrowVariant]=\"top.arrowVariant\"\n      [showArrowLabels]=\"top.showArrowLabels\"\n      [previousIcon]=\"top.previousIcon\"\n      [nextIcon]=\"top.nextIcon\"\n      [showModalTitle]=\"top.showModalTitle\"\n      [xs]=\"top.xs\"\n      [sm]=\"top.sm\"\n      [md]=\"top.md\"\n      [lg]=\"top.lg\"\n      [xl]=\"top.xl\"\n      [xxl]=\"top.xxl\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (topResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n\n<div\n  #scrollContainer\n  class=\"tedi-table__scroll\"\n  [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n  [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n  [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n  [attr.style]=\"maxHeightStyle()\"\n  cdkScrollable\n  tabindex=\"0\"\n  role=\"group\"\n  [attr.aria-label]=\"scrollRegionLabel()\"\n  (scroll)=\"onHorizontalScroll()\"\n>\n  <table\n    #tableElement\n    class=\"tedi-table__table\"\n    [attr.id]=\"id() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [attr.aria-rowcount]=\"ariaRowCount()\"\n    [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n  >\n    @if (caption(); as cap) {\n      <caption class=\"tedi-table__caption\">\n        @if (isString(cap)) {\n          {{ cap }}\n        } @else {\n          <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n        }\n      </caption>\n    }\n\n    <thead class=\"tedi-table__head\">\n      @for (\n        headerGroup of headerGroups();\n        track headerGroup.id;\n        let rowIndex = $index\n      ) {\n        <tr\n          class=\"tedi-table__row\"\n          [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n          [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          cdkDropListAutoScrollDisabled\n          (cdkDropListDropped)=\"handleColumnDrop($event)\"\n        >\n          @for (header of headerGroup.headers; track header.id) {\n            @if (shouldRenderHeader(header, rowIndex)) {\n              @let meta = getColumnMeta(header.column);\n              @let ariaSort = getHeaderAriaSort(header.column);\n              @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n              @let rowSpan = getHeaderRowSpan(header, rowIndex);\n              @let headerAlign = meta?.headerAlign ?? meta?.align;\n              <th\n                scope=\"col\"\n                cdkDrag\n                [cdkDragDisabled]=\"\n                  !reorderableColumns() ||\n                  rowIndex > 0 ||\n                  header.column.id === SELECT_COLUMN_ID ||\n                  header.column.id === EXPAND_COLUMN_ID\n                \"\n                cdkDragLockAxis=\"x\"\n                (keydown)=\"handleHeaderKeydown($event, header)\"\n                [class]=\"\n                  'tedi-table__header-cell' +\n                  (isHeaderGroup(header)\n                    ? ' tedi-table__header-cell--group'\n                    : '') +\n                  (headerAlign\n                    ? ' tedi-table__cell--align-' + headerAlign\n                    : '') +\n                  (meta?.vAlign\n                    ? ' tedi-table__cell--valign-' + meta?.vAlign\n                    : '') +\n                  (pickedUpColumnId() === header.column.id\n                    ? ' tedi-table__header-cell--picked-up'\n                    : '') +\n                  controlCellClass(header.column.id) +\n                  stickyLeftClass(header.column.id) +\n                  stickyRightClass(header.column.id)\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n                [attr.rowspan]=\"rowSpan\"\n                [attr.aria-sort]=\"ariaSort\"\n                [style.width.px]=\"headerCellWidth(header.column)\"\n                [style.min-width.px]=\"columnMinWidth(header.column)\"\n                [style.max-width.px]=\"columnMaxWidth(header.column)\"\n                [style.left.px]=\"stickyLeft(header.column.id)\"\n                [style.right.px]=\"stickyRight(header.column.id)\"\n              >\n                @if (srHeaderLabel) {\n                  <span class=\"sr-only\">{{ srHeaderLabel }}</span>\n                }\n                @if (header.column.id === SELECT_COLUMN_ID) {\n                  @if (selectionMode() === \"multiple\") {\n                    <input\n                      tedi-checkbox\n                      type=\"checkbox\"\n                      [id]=\"resolvedId() + '-select-all'\"\n                      [name]=\"resolvedId() + '-select-all'\"\n                      [attr.aria-label]=\"selectAllLabel()\"\n                      [checked]=\"isAllPageRowsSelected()\"\n                      [indeterminate]=\"\n                        isSomePageRowsSelected() && !isAllPageRowsSelected()\n                      \"\n                      (change)=\"handleSelectAll($any($event.target).checked)\"\n                    />\n                  }\n                } @else if (header.column.id === EXPAND_COLUMN_ID) {\n                  <!-- empty -->\n                } @else if (header.column.id === DRAG_COLUMN_ID) {\n                  <!-- empty -->\n                } @else {\n                  <span class=\"tedi-table__header-content\">\n                    @if (\n                      reorderableColumns() &&\n                      rowIndex === 0 &&\n                      !isHeaderGroup(header)\n                    ) {\n                      <button\n                        type=\"button\"\n                        cdkDragHandle\n                        class=\"tedi-table__drag-handle\"\n                        [class.tedi-table__drag-handle--picked-up]=\"\n                          pickedUpColumnId() === header.column.id\n                        \"\n                        [id]=\"reorderHandleId(header.column.id)\"\n                        [attr.aria-label]=\"dragColumnLabel()\"\n                        [attr.aria-pressed]=\"\n                          reorderableColumns()\n                            ? pickedUpColumnId() === header.column.id\n                            : null\n                        \"\n                      >\n                        <tedi-icon\n                          name=\"drag_indicator\"\n                          [size]=\"18\"\n                          color=\"inherit\"\n                        />\n                      </button>\n                    }\n                    <ng-container\n                      *flexRender=\"\n                        header.column.columnDef.header;\n                        props: header.getContext();\n                        let content\n                      \"\n                    >\n                      @if (shouldRenderSortableHeader(header.column, content)) {\n                        <button\n                          tedi-table-header-button\n                          [icon]=\"sortIcon(header.column)\"\n                          [selected]=\"!!header.column.getIsSorted()\"\n                          (click)=\"handleSortToggle(header.column)\"\n                        >\n                          {{ content }}\n                        </button>\n                      } @else if (isString(content) || isNumber(content)) {\n                        {{ content }}\n                      } @else {\n                        {{ content }}\n                      }\n                    </ng-container>\n                    @if (shouldRenderFilterButton(header.column)) {\n                      @if (filterUsesModal()) {\n                        <button\n                          tedi-table-header-button\n                          icon=\"filter_alt\"\n                          [selected]=\"filterIsActive(header.column)\"\n                          [filled]=\"filterIsActive(header.column)\"\n                          [aria-label]=\"filterAriaLabel(header.column)\"\n                          (click)=\"openFilterModal(header.column)\"\n                        ></button>\n                      } @else {\n                        <tedi-popover\n                          #filterPopover\n                          class=\"tedi-table__filter-popover\"\n                          position=\"bottom-end\"\n                          [preventOverflow]=\"true\"\n                        >\n                          <button\n                            tedi-popover-trigger\n                            tedi-table-header-button\n                            icon=\"filter_alt\"\n                            [selected]=\"filterIsActive(header.column)\"\n                            [filled]=\"filterIsActive(header.column)\"\n                            [aria-label]=\"filterAriaLabel(header.column)\"\n                            (click)=\"handleFilterTriggerClick(header.column)\"\n                          ></button>\n                          <tedi-popover-content\n                            [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n                          >\n                            <div class=\"tedi-table__filter\">\n                              <div class=\"tedi-table__filter-body\">\n                                @if (filterTemplateFor(header.column); as tpl) {\n                                  <ng-container\n                                    *ngTemplateOutlet=\"\n                                      tpl;\n                                      context: filterContextFor(\n                                        header.column,\n                                        filterPopover\n                                      )\n                                    \"\n                                  />\n                                }\n                              </div>\n                              <div class=\"tedi-table__filter-actions\">\n                                <button\n                                  tedi-button\n                                  variant=\"secondary\"\n                                  size=\"small\"\n                                  type=\"button\"\n                                  (click)=\"\n                                    handleFilterClear(\n                                      header.column,\n                                      filterPopover\n                                    )\n                                  \"\n                                >\n                                  {{ filterClearLabel() }}\n                                </button>\n                                <button\n                                  tedi-button\n                                  variant=\"primary\"\n                                  size=\"small\"\n                                  type=\"button\"\n                                  (click)=\"\n                                    handleFilterApply(\n                                      header.column,\n                                      filterPopover\n                                    )\n                                  \"\n                                >\n                                  {{ filterApplyLabel() }}\n                                </button>\n                              </div>\n                            </div>\n                          </tedi-popover-content>\n                        </tedi-popover>\n                      }\n                    }\n                  </span>\n                }\n              </th>\n            }\n          }\n        </tr>\n      }\n      @if (enableColumnFilters()) {\n        <tr\n          class=\"tedi-table__row tedi-table__row--filter\"\n          [attr.aria-rowindex]=\"\n            ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n          \"\n        >\n          @for (column of leafColumns(); track column.id) {\n            @let filterId = resolvedId() + \"-filter-\" + column.id;\n            <th class=\"tedi-table__header-cell\" scope=\"col\">\n              @if (column.getCanFilter()) {\n                <tedi-form-field size=\"small\">\n                  <input\n                    tedi-text-field\n                    type=\"text\"\n                    [id]=\"filterId\"\n                    [name]=\"filterId\"\n                    [attr.aria-label]=\"filterLabel(column)\"\n                    [placeholder]=\"filterPlaceholder()\"\n                    [value]=\"getFilterValue(column)\"\n                    (input)=\"\n                      handleColumnFilter(column, $any($event.target).value)\n                    \"\n                    (clear)=\"handleColumnFilter(column, '')\"\n                  />\n                </tedi-form-field>\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody\n      class=\"tedi-table__body\"\n      cdkDropList\n      [cdkDropListDisabled]=\"!reorderableRows()\"\n      (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n    >\n      @if (rows().length === 0) {\n        <tr class=\"tedi-table__row\">\n          <td\n            class=\"tedi-table__cell tedi-table__cell--placeholder\"\n            [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n          >\n            @if (placeholder(); as pl) {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  @if (isString(pl)) {\n                    {{ pl }}\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                  }\n                </div>\n              } @else {\n                @if (isString(pl)) {\n                  {{ pl }}\n                } @else {\n                  <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n                }\n              }\n            } @else {\n              @if (placeholderRole()) {\n                <div [attr.role]=\"placeholderRole()\">\n                  {{ placeholderLabel() }}\n                </div>\n              } @else {\n                {{ placeholderLabel() }}\n              }\n            }\n          </td>\n        </tr>\n      } @else {\n        @for (row of rows(); track row.id) {\n          @let isActiveRow =\n            activeRowId() !== undefined && row.id === activeRowId();\n          @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n          @let subRowId = resolvedId() + \"-sub-\" + row.id;\n          @let expandsOnClick = rowExpandsOnClick(row);\n          <tr\n            cdkDrag\n            [cdkDragDisabled]=\"!reorderableRows()\"\n            cdkDragLockAxis=\"y\"\n            [class]=\"\n              'tedi-table__row' +\n              (this.selectedRowHighlight() && row.getIsSelected()\n                ? ' tedi-table__row--selected'\n                : '') +\n              (isActiveRow ? ' tedi-table__row--active' : '') +\n              (interactive() || expandsOnClick\n                ? ' tedi-table__row--clickable'\n                : '') +\n              (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n              (groupStartRowIds().has(row.id)\n                ? ' tedi-table__row--group-start'\n                : '') +\n              (pickedUpRow() === row.original\n                ? ' tedi-table__row--picked-up'\n                : '')\n            \"\n            [attr.role]=\"\n              interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n            \"\n            [attr.tabindex]=\"interactive() ? 0 : null\"\n            [attr.aria-label]=\"rowAriaLabelFor(row)\"\n            [attr.aria-rowindex]=\"ariaRowIndex\"\n            [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n            (click)=\"handleRowClick($event, 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                    controlCellClass(cell.column.id) +\n                    stickyLeftClass(cell.column.id) +\n                    stickyRightClass(cell.column.id)\n                  \"\n                  [style.left.px]=\"stickyLeft(cell.column.id)\"\n                  [style.right.px]=\"stickyRight(cell.column.id)\"\n                  [attr.rowspan]=\"\n                    resolvedSpan !== null && resolvedSpan > 1\n                      ? resolvedSpan\n                      : null\n                  \"\n                >\n                  @if (cell.column.id === DRAG_COLUMN_ID) {\n                    <button\n                      type=\"button\"\n                      cdkDragHandle\n                      class=\"tedi-table__drag-handle\"\n                      [class.tedi-table__drag-handle--picked-up]=\"\n                        pickedUpRow() === row.original\n                      \"\n                      [id]=\"rowReorderHandleId(row.id)\"\n                      [attr.aria-label]=\"dragRowLabel()\"\n                      [attr.aria-pressed]=\"\n                        reorderableRows()\n                          ? pickedUpRow() === row.original\n                          : null\n                      \"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown)=\"handleRowReorderKeydown($event, row)\"\n                    >\n                      <tedi-icon\n                        name=\"drag_indicator\"\n                        [size]=\"18\"\n                        color=\"inherit\"\n                      />\n                    </button>\n                  } @else if (cell.column.id === SELECT_COLUMN_ID) {\n                    @if (selectionMode() === \"multiple\") {\n                      <input\n                        tedi-checkbox\n                        type=\"checkbox\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-' + row.id\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"isRowSelected(row)\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        [indeterminate]=\"isRowIndeterminate(row)\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    } @else {\n                      <input\n                        tedi-radio\n                        type=\"radio\"\n                        [id]=\"resolvedId() + '-select-' + row.id\"\n                        [name]=\"resolvedId() + '-select-row'\"\n                        [attr.aria-label]=\"selectRowLabel(row)\"\n                        [checked]=\"row.getIsSelected()\"\n                        [disabled]=\"!row.getCanSelect()\"\n                        (change)=\"\n                          handleSelectRow(row, $any($event.target).checked)\n                        \"\n                        (click)=\"$event.stopPropagation()\"\n                      />\n                    }\n                  } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n                    <span\n                      class=\"tedi-table__expand-toggle\"\n                      [class.tedi-table__expand-toggle--icon-only]=\"\n                        !expandButtonHasLabel()\n                      \"\n                    >\n                      @if (row.getCanExpand()) {\n                        @let expandOpen = row.getIsExpanded();\n                        <button\n                          tedi-collapse-button\n                          [arrowType]=\"resolvedExpandVariant()\"\n                          [hideText]=\"!expandButtonHasLabel()\"\n                          [openText]=\"expandButtonOpenText()\"\n                          [closeText]=\"expandButtonCloseText()\"\n                          [open]=\"expandOpen\"\n                          [id]=\"resolvedId() + '-expand-' + row.id\"\n                          [ariaControls]=\"\n                            renderSubComponent() ? subRowId : undefined\n                          \"\n                          [ariaLabel]=\"\n                            expandButtonHasLabel()\n                              ? undefined\n                              : expandRowLabel(expandOpen)\n                          \"\n                          (openChange)=\"handleExpandToggle(row)\"\n                          (click)=\"$event.stopPropagation()\"\n                          (keydown)=\"handleExpandKeydown($event)\"\n                        ></button>\n                      }\n                    </span>\n                  } @else {\n                    <ng-container\n                      *flexRender=\"\n                        cell.column.columnDef.cell;\n                        props: cellContext;\n                        let content\n                      \"\n                    >\n                      {{ content }}\n                    </ng-container>\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (renderSubComponent(); as subTpl) {\n            @if (row.getCanExpand()) {\n              @let isExpanded = row.getIsExpanded();\n              <tr\n                [class]=\"\n                  'tedi-table__row tedi-table__row--sub-component' +\n                  (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n                \"\n              >\n                <!-- No region role: one landmark per open row would pile up\n                     (axe landmark-unique). The toggle's aria-controls points here. -->\n                <td\n                  class=\"tedi-table__cell tedi-table__cell--sub-component\"\n                  [attr.id]=\"subRowId\"\n                  [attr.inert]=\"isExpanded ? null : ''\"\n                  [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n                >\n                  <div class=\"tedi-table__sub-component-wrapper\">\n                    <div class=\"tedi-table__sub-component-content\">\n                      <div class=\"tedi-table__sub-component-inner\">\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            subTpl;\n                            context: { $implicit: row }\n                          \"\n                        />\n                      </div>\n                    </div>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        }\n      }\n    </tbody>\n\n    @if (hasFooter()) {\n      <tfoot class=\"tedi-table__foot\">\n        @for (group of footerGroups(); track group.id) {\n          <tr class=\"tedi-table__row\">\n            @for (header of group.headers; track header.id) {\n              @let footerMeta = getColumnMeta(header.column);\n              <td\n                [class]=\"\n                  'tedi-table__cell tedi-table__cell--footer' +\n                  (footerMeta?.align\n                    ? ' tedi-table__cell--align-' + footerMeta?.align\n                    : '') +\n                  (footerMeta?.vAlign\n                    ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n                    : '')\n                \"\n                [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n              >\n                @if (!header.isPlaceholder) {\n                  <ng-container\n                    *flexRender=\"\n                      header.column.columnDef.footer;\n                      props: header.getContext();\n                      let content\n                    \"\n                  >\n                    {{ content }}\n                  </ng-container>\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tfoot>\n    }\n  </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n  <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n    <tedi-pagination\n      [pageCount]=\"paginationPageCount()\"\n      [page]=\"paginationPage()\"\n      [totalItems]=\"paginationTotalItems()\"\n      [pageSize]=\"paginationPageSize()\"\n      [pageSizeOptions]=\"paginationPageSizeOptions()\"\n      [boundaryCount]=\"bottom.boundaryCount\"\n      [siblingCount]=\"bottom.siblingCount\"\n      [labels]=\"bottom.labels\"\n      [background]=\"bottom.background\"\n      [align]=\"bottom.align\"\n      [dividerPosition]=\"bottom.dividerPosition\"\n      [hideResults]=\"bottom.hideResults\"\n      [hidePageSize]=\"bottom.hidePageSize\"\n      [hidePager]=\"bottom.hidePager\"\n      [hideArrows]=\"bottom.hideArrows\"\n      [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n      [arrowVariant]=\"bottom.arrowVariant\"\n      [showArrowLabels]=\"bottom.showArrowLabels\"\n      [previousIcon]=\"bottom.previousIcon\"\n      [nextIcon]=\"bottom.nextIcon\"\n      [showModalTitle]=\"bottom.showModalTitle\"\n      [xs]=\"bottom.xs\"\n      [sm]=\"bottom.sm\"\n      [md]=\"bottom.md\"\n      [lg]=\"bottom.lg\"\n      [xl]=\"bottom.xl\"\n      [xxl]=\"bottom.xxl\"\n      (pageChange)=\"handlePaginationPageChange($event)\"\n      (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n    >\n      @if (bottomResultsTemplate(); as tpl) {\n        <span tediPaginationResults>\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </span>\n      }\n    </tedi-pagination>\n  </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open>.tedi-table__cell--sub-component>.tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{position:relative;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>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>thead>tr:first-child>.tedi-table__header-cell:last-child,.tedi-table--vertical-borders>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless>.tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom>.tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top>.tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless>.tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column>.tedi-table__scroll--shadow-start>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column>.tedi-table__scroll--shadow-end>:where(.tedi-table__table)>*>*>.tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__body>.tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>*>.tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head{border-bottom:0}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column>:where(.tedi-table__scroll)>:where(.tedi-table__table)>.tedi-table__head>*>.tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header>.tedi-table__scroll--shadow-header>:where(.tedi-table__table)>.tedi-table__head>.tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout>:where(.tedi-table__scroll)>.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)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], verticalBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalBorders", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], stickyFirstColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyFirstColumn", required: false }] }], stickyLastColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyLastColumn", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], fixedLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedLayout", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], activeRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRowId", required: false }] }], selectedRowHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRowHighlight", required: false }] }], rowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHover", required: false }] }], enableRowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableRowSelection", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], enableColumnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnFilters", required: false }] }], renderSubComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderSubComponent", required: false }] }], getRowCanExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowCanExpand", required: false }] }], expandTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandTrigger", required: false }] }], expandButtonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandButtonVariant", required: false }] }], expandButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandButtonLabel", required: false }] }], getSubRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "getSubRows", required: false }] }], getRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowId", required: false }] }], groupRowsBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupRowsBy", required: false }] }], rowGroupDividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowGroupDividers", required: false }] }], controlColumnOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlColumnOrder", required: false }] }], filterModalBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModalBreakpoint", required: false }] }], filterModalFullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModalFullscreen", required: false }] }], filterPopoverWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPopoverWidth", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], paginationTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationTop", required: false }] }], manualPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualPagination", required: false }] }], manualSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualSorting", required: false }] }], manualFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualFiltering", required: false }] }], pageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageCount", required: false }] }], rowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowCount", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], defaultState: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultState", required: false }] }], persist: [{ type: i0.Input, args: [{ isSignal: true, alias: "persist", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placeholderRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderRole", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], rowAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowAriaLabel", required: false }] }], reorderableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableRows", required: false }] }], reorderableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableColumns", required: false }] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDrop: [{ type: i0.Output, args: ["rowDrop"] }], customResultsTemplateRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TediPaginationResultsDirective), { ...{ read: TemplateRef }, isSignal: true }] }], scrollContainer: [{ type: i0.ViewChild, args: ["scrollContainer", { isSignal: true }] }], tableElement: [{ type: i0.ViewChild, args: ["tableElement", { isSignal: true }] }] } });
 
 class TediTableToolbarComponent {
@@ -20289,8 +20289,18 @@ class TimeFieldComponent {
         optional: true,
     });
     derived = deriveControlState();
+    /**
+     * `aria-describedby` ids for the input — the wrapping form-field's feedback
+     * text, plus any set on `<tedi-time-field>` itself.
+     */
+    describedBy = controlDescribedBy();
     /** Unique ID for label association and accessibility. */
     inputId = input.required(...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    /**
+     * `name` attribute of the input, used by native form submission. Omitted
+     * from the DOM when not set.
+     */
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
     /** Selected time in `HH:mm` format. Two-way bindable. */
     value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
     /** Placeholder shown when the input is empty. */
@@ -20436,6 +20446,9 @@ class TimeFieldComponent {
     setDisabledState(disabled) {
         this.formDisabled.set(disabled);
     }
+    setDescribedBy(ids) {
+        this.describedBy.set(ids);
+    }
     handleInput(event) {
         const value = event.target.value;
         this.inputValue.set(value);
@@ -20629,7 +20642,7 @@ class TimeFieldComponent {
             this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TimeFieldComponent, isStandalone: true, selector: "tedi-time-field", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", 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 }, pickerVariant: { classPropertyName: "pickerVariant", publicName: "pickerVariant", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, pickerTrigger: { classPropertyName: "pickerTrigger", publicName: "pickerTrigger", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, timeSlots: { classPropertyName: "timeSlots", publicName: "timeSlots", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, showSlotIndicator: { classPropertyName: "showSlotIndicator", publicName: "showSlotIndicator", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.tedi-time-field--small": "resolvedSize() === 'small'", "class.tedi-time-field--large": "resolvedSize() === 'large'" }, classAttribute: "tedi-time-field" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TimeFieldComponent, isStandalone: true, selector: "tedi-time-field", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", 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 }, pickerVariant: { classPropertyName: "pickerVariant", publicName: "pickerVariant", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, pickerTrigger: { classPropertyName: "pickerTrigger", publicName: "pickerTrigger", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, timeSlots: { classPropertyName: "timeSlots", publicName: "timeSlots", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, showSlotIndicator: { classPropertyName: "showSlotIndicator", publicName: "showSlotIndicator", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.tedi-time-field--small": "resolvedSize() === 'small'", "class.tedi-time-field--large": "resolvedSize() === 'large'" }, classAttribute: "tedi-time-field" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TimeFieldComponent),
@@ -20639,7 +20652,7 @@ class TimeFieldComponent {
                 provide: TEDI_FORM_FIELD_CONTROL,
                 useExisting: forwardRef(() => TimeFieldComponent),
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (usePopover()) {\n  <!--\n    The field wrapper is the popover anchor + trigger, so the picker matches the\n    input width. Button-trigger mode disables clicks on everything but the icon\n    (see SCSS); input-trigger mode opens from anywhere in the field.\n  -->\n  <tedi-popover\n    #popover\n    class=\"tedi-time-field__popover\"\n    [position]=\"popoverPosition()\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <div\n      #fieldEl\n      tedi-popover-trigger\n      [interactive]=\"false\"\n      class=\"tedi-time-field__field\"\n      [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n      [class.tedi-field-surface]=\"paintsSurface()\"\n      [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n      [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n      [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n      [attr.tabindex]=\"-1\"\n      (focus)=\"onFieldFocus($event)\"\n      (click)=\"onFieldClick()\"\n    >\n      <ng-container *ngTemplateOutlet=\"timeInput\" />\n      <div class=\"tedi-time-field__actions\">\n        <ng-container *ngTemplateOutlet=\"clearButton\" />\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [attr.aria-expanded]=\"popoverIsOpen() || null\"\n          aria-haspopup=\"dialog\"\n          (click)=\"onIconClick()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      </div>\n    </div>\n    <tedi-popover-content\n      class=\"tedi-time-field__popover-content\"\n      maxWidth=\"none\"\n    >\n      <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n    </tedi-popover-content>\n  </tedi-popover>\n} @else {\n  <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n  <div\n    #fieldEl\n    class=\"tedi-time-field__field\"\n    [class.tedi-field-surface]=\"paintsSurface()\"\n    [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n    [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n    [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n  >\n    <ng-container *ngTemplateOutlet=\"timeInput\" />\n    <div class=\"tedi-time-field__actions\">\n      <ng-container *ngTemplateOutlet=\"clearButton\" />\n      @if (hasNativePicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openNativePicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else if (hasPicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openPicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else {\n        <span\n          class=\"tedi-time-field__icon tedi-time-field__icon--static\"\n          aria-hidden=\"true\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </span>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #timeInput>\n  <input\n    #inputElement\n    class=\"tedi-time-field__input\"\n    inputmode=\"numeric\"\n    [type]=\"inputType()\"\n    [id]=\"inputId()\"\n    [attr.placeholder]=\"placeholder()\"\n    [value]=\"inputValue()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"inputIsTrigger()\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    (click)=\"onInputClick($event)\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n\n<ng-template #clearButton>\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-time-field__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n      (click)=\"onClearClick($event)\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n</ng-template>\n\n<ng-template #pickerWheel>\n  <tedi-time-picker\n    #timePicker\n    [value]=\"value()\"\n    [variant]=\"customPickerVariant()\"\n    [timeSlots]=\"timeSlots()\"\n    [columns]=\"columns()\"\n    [showSlotIndicator]=\"showSlotIndicator()\"\n    [minuteStep]=\"minuteStep()\"\n    [trapFocus]=\"true\"\n    [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n    (valueChange)=\"onPickerValueChange($event)\"\n    (selectionCommitted)=\"onPickerSelectionCommitted()\"\n    (closeRequested)=\"closePopover()\"\n  />\n</ng-template>\n", styles: [".tedi-time-field{display:flex;flex:1;min-width:0}.tedi-time-field--small .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-time-field--large .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-time-field__field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay", "offset"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose", "padding"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "component", type: TimePickerComponent, selector: "tedi-time-picker", inputs: ["value", "variant", "timeSlots", "columns", "showSlotIndicator", "minuteStep", "disabled", "border", "trapFocus"], outputs: ["valueChange", "closeRequested", "selectionCommitted"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (usePopover()) {\n  <!--\n    The field wrapper is the popover anchor + trigger, so the picker matches the\n    input width. Button-trigger mode disables clicks on everything but the icon\n    (see SCSS); input-trigger mode opens from anywhere in the field.\n  -->\n  <tedi-popover\n    #popover\n    class=\"tedi-time-field__popover\"\n    [position]=\"popoverPosition()\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <div\n      #fieldEl\n      tedi-popover-trigger\n      [interactive]=\"false\"\n      class=\"tedi-time-field__field\"\n      [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n      [class.tedi-field-surface]=\"paintsSurface()\"\n      [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n      [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n      [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n      [attr.tabindex]=\"-1\"\n      (focus)=\"onFieldFocus($event)\"\n      (click)=\"onFieldClick()\"\n    >\n      <ng-container *ngTemplateOutlet=\"timeInput\" />\n      <div class=\"tedi-time-field__actions\">\n        <ng-container *ngTemplateOutlet=\"clearButton\" />\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [attr.aria-expanded]=\"popoverIsOpen() || null\"\n          aria-haspopup=\"dialog\"\n          (click)=\"onIconClick()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      </div>\n    </div>\n    <tedi-popover-content\n      class=\"tedi-time-field__popover-content\"\n      maxWidth=\"none\"\n    >\n      <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n    </tedi-popover-content>\n  </tedi-popover>\n} @else {\n  <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n  <div\n    #fieldEl\n    class=\"tedi-time-field__field\"\n    [class.tedi-field-surface]=\"paintsSurface()\"\n    [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n    [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n    [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n  >\n    <ng-container *ngTemplateOutlet=\"timeInput\" />\n    <div class=\"tedi-time-field__actions\">\n      <ng-container *ngTemplateOutlet=\"clearButton\" />\n      @if (hasNativePicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openNativePicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else if (hasPicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openPicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else {\n        <span\n          class=\"tedi-time-field__icon tedi-time-field__icon--static\"\n          aria-hidden=\"true\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </span>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #timeInput>\n  <input\n    #inputElement\n    class=\"tedi-time-field__input\"\n    inputmode=\"numeric\"\n    [type]=\"inputType()\"\n    [id]=\"inputId()\"\n    [attr.name]=\"name()\"\n    [attr.placeholder]=\"placeholder()\"\n    [value]=\"inputValue()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"inputIsTrigger()\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    [attr.aria-describedby]=\"describedBy.attribute()\"\n    (click)=\"onInputClick($event)\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n\n<ng-template #clearButton>\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-time-field__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n      (click)=\"onClearClick($event)\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n</ng-template>\n\n<ng-template #pickerWheel>\n  <tedi-time-picker\n    #timePicker\n    [value]=\"value()\"\n    [variant]=\"customPickerVariant()\"\n    [timeSlots]=\"timeSlots()\"\n    [columns]=\"columns()\"\n    [showSlotIndicator]=\"showSlotIndicator()\"\n    [minuteStep]=\"minuteStep()\"\n    [trapFocus]=\"true\"\n    [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n    (valueChange)=\"onPickerValueChange($event)\"\n    (selectionCommitted)=\"onPickerSelectionCommitted()\"\n    (closeRequested)=\"closePopover()\"\n  />\n</ng-template>\n", styles: [".tedi-time-field{display:flex;flex:1;min-width:0}.tedi-time-field--small .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-time-field--large .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-time-field__field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay", "offset"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose", "padding"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "component", type: TimePickerComponent, selector: "tedi-time-picker", inputs: ["value", "variant", "timeSlots", "columns", "showSlotIndicator", "minuteStep", "disabled", "border", "trapFocus"], outputs: ["valueChange", "closeRequested", "selectionCommitted"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimeFieldComponent, decorators: [{
             type: Component,
@@ -20668,8 +20681,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         class: "tedi-time-field",
                         "[class.tedi-time-field--small]": "resolvedSize() === 'small'",
                         "[class.tedi-time-field--large]": "resolvedSize() === 'large'",
-                    }, template: "@if (usePopover()) {\n  <!--\n    The field wrapper is the popover anchor + trigger, so the picker matches the\n    input width. Button-trigger mode disables clicks on everything but the icon\n    (see SCSS); input-trigger mode opens from anywhere in the field.\n  -->\n  <tedi-popover\n    #popover\n    class=\"tedi-time-field__popover\"\n    [position]=\"popoverPosition()\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <div\n      #fieldEl\n      tedi-popover-trigger\n      [interactive]=\"false\"\n      class=\"tedi-time-field__field\"\n      [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n      [class.tedi-field-surface]=\"paintsSurface()\"\n      [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n      [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n      [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n      [attr.tabindex]=\"-1\"\n      (focus)=\"onFieldFocus($event)\"\n      (click)=\"onFieldClick()\"\n    >\n      <ng-container *ngTemplateOutlet=\"timeInput\" />\n      <div class=\"tedi-time-field__actions\">\n        <ng-container *ngTemplateOutlet=\"clearButton\" />\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [attr.aria-expanded]=\"popoverIsOpen() || null\"\n          aria-haspopup=\"dialog\"\n          (click)=\"onIconClick()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      </div>\n    </div>\n    <tedi-popover-content\n      class=\"tedi-time-field__popover-content\"\n      maxWidth=\"none\"\n    >\n      <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n    </tedi-popover-content>\n  </tedi-popover>\n} @else {\n  <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n  <div\n    #fieldEl\n    class=\"tedi-time-field__field\"\n    [class.tedi-field-surface]=\"paintsSurface()\"\n    [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n    [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n    [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n  >\n    <ng-container *ngTemplateOutlet=\"timeInput\" />\n    <div class=\"tedi-time-field__actions\">\n      <ng-container *ngTemplateOutlet=\"clearButton\" />\n      @if (hasNativePicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openNativePicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else if (hasPicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openPicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else {\n        <span\n          class=\"tedi-time-field__icon tedi-time-field__icon--static\"\n          aria-hidden=\"true\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </span>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #timeInput>\n  <input\n    #inputElement\n    class=\"tedi-time-field__input\"\n    inputmode=\"numeric\"\n    [type]=\"inputType()\"\n    [id]=\"inputId()\"\n    [attr.placeholder]=\"placeholder()\"\n    [value]=\"inputValue()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"inputIsTrigger()\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    (click)=\"onInputClick($event)\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n\n<ng-template #clearButton>\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-time-field__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n      (click)=\"onClearClick($event)\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n</ng-template>\n\n<ng-template #pickerWheel>\n  <tedi-time-picker\n    #timePicker\n    [value]=\"value()\"\n    [variant]=\"customPickerVariant()\"\n    [timeSlots]=\"timeSlots()\"\n    [columns]=\"columns()\"\n    [showSlotIndicator]=\"showSlotIndicator()\"\n    [minuteStep]=\"minuteStep()\"\n    [trapFocus]=\"true\"\n    [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n    (valueChange)=\"onPickerValueChange($event)\"\n    (selectionCommitted)=\"onPickerSelectionCommitted()\"\n    (closeRequested)=\"closePopover()\"\n  />\n</ng-template>\n", styles: [".tedi-time-field{display:flex;flex:1;min-width:0}.tedi-time-field--small .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-time-field--large .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-time-field__field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], pickerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerVariant", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], pickerTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTrigger", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], timeSlots: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeSlots", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], showSlotIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSlotIndicator", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], inputElement: [{ type: i0.ViewChild, args: ["inputElement", { isSignal: true }] }], fieldEl: [{ type: i0.ViewChild, args: ["fieldEl", { isSignal: true }] }], popover: [{ type: i0.ViewChild, args: ["popover", { isSignal: true }] }], timePicker: [{ type: i0.ViewChild, args: ["timePicker", { isSignal: true }] }] } });
+                    }, template: "@if (usePopover()) {\n  <!--\n    The field wrapper is the popover anchor + trigger, so the picker matches the\n    input width. Button-trigger mode disables clicks on everything but the icon\n    (see SCSS); input-trigger mode opens from anywhere in the field.\n  -->\n  <tedi-popover\n    #popover\n    class=\"tedi-time-field__popover\"\n    [position]=\"popoverPosition()\"\n    [withArrow]=\"false\"\n    [preventOverflow]=\"true\"\n  >\n    <div\n      #fieldEl\n      tedi-popover-trigger\n      [interactive]=\"false\"\n      class=\"tedi-time-field__field\"\n      [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n      [class.tedi-field-surface]=\"paintsSurface()\"\n      [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n      [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n      [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n      [attr.tabindex]=\"-1\"\n      (focus)=\"onFieldFocus($event)\"\n      (click)=\"onFieldClick()\"\n    >\n      <ng-container *ngTemplateOutlet=\"timeInput\" />\n      <div class=\"tedi-time-field__actions\">\n        <ng-container *ngTemplateOutlet=\"clearButton\" />\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [attr.aria-expanded]=\"popoverIsOpen() || null\"\n          aria-haspopup=\"dialog\"\n          (click)=\"onIconClick()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      </div>\n    </div>\n    <tedi-popover-content\n      class=\"tedi-time-field__popover-content\"\n      maxWidth=\"none\"\n    >\n      <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n    </tedi-popover-content>\n  </tedi-popover>\n} @else {\n  <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n  <div\n    #fieldEl\n    class=\"tedi-time-field__field\"\n    [class.tedi-field-surface]=\"paintsSurface()\"\n    [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n    [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n    [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n  >\n    <ng-container *ngTemplateOutlet=\"timeInput\" />\n    <div class=\"tedi-time-field__actions\">\n      <ng-container *ngTemplateOutlet=\"clearButton\" />\n      @if (hasNativePicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openNativePicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else if (hasPicker()) {\n        <button\n          tedi-button\n          type=\"button\"\n          variant=\"neutral\"\n          size=\"small\"\n          class=\"tedi-time-field__icon\"\n          [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"openPicker()\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </button>\n      } @else {\n        <span\n          class=\"tedi-time-field__icon tedi-time-field__icon--static\"\n          aria-hidden=\"true\"\n        >\n          <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n        </span>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #timeInput>\n  <input\n    #inputElement\n    class=\"tedi-time-field__input\"\n    inputmode=\"numeric\"\n    [type]=\"inputType()\"\n    [id]=\"inputId()\"\n    [attr.name]=\"name()\"\n    [attr.placeholder]=\"placeholder()\"\n    [value]=\"inputValue()\"\n    [disabled]=\"isDisabled()\"\n    [readOnly]=\"inputIsTrigger()\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    [attr.aria-describedby]=\"describedBy.attribute()\"\n    (click)=\"onInputClick($event)\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n  />\n</ng-template>\n\n<ng-template #clearButton>\n  @if (showClear()) {\n    <button\n      tedi-closing-button\n      type=\"button\"\n      size=\"small\"\n      class=\"tedi-time-field__clear\"\n      [iconSize]=\"18\"\n      [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n      (click)=\"onClearClick($event)\"\n    ></button>\n    <tedi-separator axis=\"vertical\" size=\"1rem\" />\n  }\n</ng-template>\n\n<ng-template #pickerWheel>\n  <tedi-time-picker\n    #timePicker\n    [value]=\"value()\"\n    [variant]=\"customPickerVariant()\"\n    [timeSlots]=\"timeSlots()\"\n    [columns]=\"columns()\"\n    [showSlotIndicator]=\"showSlotIndicator()\"\n    [minuteStep]=\"minuteStep()\"\n    [trapFocus]=\"true\"\n    [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n    (valueChange)=\"onPickerValueChange($event)\"\n    (selectionCommitted)=\"onPickerSelectionCommitted()\"\n    (closeRequested)=\"closePopover()\"\n  />\n</ng-template>\n", styles: [".tedi-time-field{display:flex;flex:1;min-width:0}.tedi-time-field--small .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-time-field--large .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-time-field__field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], pickerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerVariant", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], pickerTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTrigger", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], timeSlots: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeSlots", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], showSlotIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSlotIndicator", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], inputElement: [{ type: i0.ViewChild, args: ["inputElement", { isSignal: true }] }], fieldEl: [{ type: i0.ViewChild, args: ["fieldEl", { isSignal: true }] }], popover: [{ type: i0.ViewChild, args: ["popover", { isSignal: true }] }], timePicker: [{ type: i0.ViewChild, args: ["timePicker", { isSignal: true }] }] } });
 
 class ProgressBarComponent {
     /**
@@ -23850,7 +23863,11 @@ class TabsComponent {
     value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
     /** Initial active tab id for uncontrolled usage. */
     defaultValue = input("", ...(ngDevMode ? [{ debugName: "defaultValue" }] : []));
-    /** Emitted when the active tab changes. */
+    /**
+     * Emitted with the id of the tab the user selected. In controlled mode the
+     * active tab changes once the bound `value` is updated. With anchor triggers
+     * the link already navigates, so don't navigate from this event.
+     */
     valueChange = output();
     /** Currently active tab id, read by the list, triggers and panels. */
     activeTab = signal("", ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
@@ -23973,6 +23990,14 @@ class TabsTriggerComponent {
             inline: "nearest",
         });
     }
+    /** Activates the tab the way a click on it does: an anchor follows its link, a button selects its panel. */
+    activate() {
+        if (this.isAnchor) {
+            this.host.nativeElement.click();
+            return;
+        }
+        this.tabs.select(this.id());
+    }
     handleClick(event) {
         if (this.disabled()) {
             // Buttons are inert via the disabled attribute; a disabled anchor is kept
@@ -24167,7 +24192,13 @@ class TabsListComponent {
         this.resizeObserver?.disconnect();
     }
     selectTab(id) {
-        this.tabs.select(id);
+        const trigger = this.triggers().find((t) => t.id() === id);
+        if (trigger) {
+            trigger.activate();
+        }
+        else {
+            this.tabs.select(id);
+        }
     }
     // Horizontal fade is implemented inline because the shared ScrollFadeComponent
     // only supports a vertical (top/bottom) axis.