npm - @ethlete/components - Versions diffs - 1.0.0-next.56 → 1.0.0-next.57 - Mend

@ethlete/components 1.0.0-next.56 → 1.0.0-next.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/CHANGELOG.md +14 -0
package/fesm2022/ethlete-components.mjs +116 -102
package/fesm2022/ethlete-components.mjs.map +1 -1
package/package.json +1 -1
package/types/ethlete-components.d.ts +106 -98

package/fesm2022/ethlete-components.mjs CHANGED Viewed

@@ -15926,9 +15926,9 @@ class ScrollableDirective {
     constructor() {
         this.hostElement = injectHostElement();
         // --- Inputs ---
-        this.itemSize = input('auto', { ...(ngDevMode ? { debugName: "itemSize" } : /* istanbul ignore next */ {}), transform: typedBreakpointTransform() });
-        this.direction = input('horizontal', { ...(ngDevMode ? { debugName: "direction" } : /* istanbul ignore next */ {}), transform: typedBreakpointTransform() });
-        this.scrollMode = input('container', { ...(ngDevMode ? { debugName: "scrollMode" } : /* istanbul ignore next */ {}), transform: typedBreakpointTransform() });
+        this.itemSize = input('auto', { ...(ngDevMode ? { debugName: "itemSize" } : /* istanbul ignore next */ {}), transform: typedBreakpointTransform('auto') });
+        this.direction = input('horizontal', { ...(ngDevMode ? { debugName: "direction" } : /* istanbul ignore next */ {}), transform: typedBreakpointTransform('horizontal') });
+        this.scrollMode = input('container', { ...(ngDevMode ? { debugName: "scrollMode" } : /* istanbul ignore next */ {}), transform: typedBreakpointTransform('container') });
         this.scrollOrigin = input('auto', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "scrollOrigin" }] : /* istanbul ignore next */ []));
         this.scrollMargin = input(0, { ...(ngDevMode ? { debugName: "scrollMargin" } : /* istanbul ignore next */ {}), transform: numberAttribute });
@@ -19866,7 +19866,7 @@ const createFilterOverlay = (config) => {
         optional: true,
     });
     const labels = injectFilterOverlayLabels();
-    const draft = config.queryForm.branch();
+    const draft = config.queryForm.branch(inject(Injector));
     const maxCountedHits = config.maxCountedHits ?? 250;
     // Called here, inside the overlay's injection context, which is why `preview` is a factory: a query created at
     // config time would belong to the page and outlive the overlay.
@@ -51928,13 +51928,13 @@ class MasonryDirective {
          * Accepts a per-breakpoint map (`{ xs: 150, md: 240 }`) for a layout that wants coarser columns on a phone
          * than the container width alone would give. @default 250
          */
-        this.columnWidth = input(250, { ...(ngDevMode ? { debugName: "columnWidth" } : /* istanbul ignore next */ {}), transform: numberBreakpointTransform() });
+        this.columnWidth = input(250, { ...(ngDevMode ? { debugName: "columnWidth" } : /* istanbul ignore next */ {}), transform: numberBreakpointTransform(250) });
         /**
          * The space between columns and between stacked items, in px. Also accepts a per-breakpoint map. It is a
          * number rather than CSS `gap` because the items are positioned, not laid out - CSS never sees the
          * columns. @default 16
          */
-        this.gap = input(16, { ...(ngDevMode ? { debugName: "gap" } : /* istanbul ignore next */ {}), transform: numberBreakpointTransform() });
+        this.gap = input(16, { ...(ngDevMode ? { debugName: "gap" } : /* istanbul ignore next */ {}), transform: numberBreakpointTransform(16) });
         this.dimensions = signalHostElementDimensions();
         this.registeredItems = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "registeredItems" }] : /* istanbul ignore next */ []));
@@ -52909,12 +52909,13 @@ class NotificationComponent {
         ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
         this.resolvedSurface = computed(() => {
             const themes = this.surfaceThemes;
-            if (!themes)
+            const type = this.surfaceType();
+            if (!themes || !type)
                 return null;
             // The stack is appended to <body> and paints above every overlay, so a toast is a layer on the
             // page - elevation 1, the same level a dialog resolves to. It must not follow what is open
             // underneath it: that re-shaded every visible toast whenever an overlay came or went.
-            return resolveSurfaceByElevation(themes, this.surfaceType(), 1);
+            return resolveSurfaceByElevation(themes, type, 1);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resolvedSurface" }] : /* istanbul ignore next */ []));
         this.controlsColor = computed(() => {
@@ -57439,9 +57440,9 @@ class StreamConsentComponent {
         this.HEADING_ID = `et-stream-consent-heading-${nextHeadingId++}`;
         this.cardSurface = computed(() => {
             const themes = this.surfaceThemes;
-            if (!themes)
-                return null;
             const type = this.surfaceType();
+            if (!themes || !type)
+                return null;
             const elevation = (this.parentSurfaceProvider?.elevation() ?? 0) + 1;
             return resolveSurfaceByElevation(themes, type, elevation)?.name ?? null;
         }, /* @ts-ignore */
@@ -57521,9 +57522,9 @@ class StreamPlayerErrorComponent {
         this.surfaceThemes = injectSurfaceThemes({ optional: true });
         this.cardSurface = computed(() => {
             const themes = this.surfaceThemes;
-            if (!themes)
-                return null;
             const type = this.surfaceType();
+            if (!themes || !type)
+                return null;
             const elevation = (this.parentSurfaceProvider?.elevation() ?? 0) + 1;
             return resolveSurfaceByElevation(themes, type, elevation)?.name ?? null;
         }, /* @ts-ignore */
@@ -59361,9 +59362,9 @@ class PipSlotPlaceholderComponent {
         ...(ngDevMode ? [{ debugName: "bringBackDir" }] : /* istanbul ignore next */ []));
         this.cardSurface = computed(() => {
             const themes = this.surfaceThemes;
-            if (!themes)
-                return null;
             const type = this.surfaceType();
+            if (!themes || !type)
+                return null;
             const elevation = (this.parentSurfaceProvider?.elevation() ?? 0) + 1;
             return resolveSurfaceByElevation(themes, type, elevation)?.name ?? null;
         }, /* @ts-ignore */
@@ -59764,9 +59765,9 @@ class StreamPlayerSlotDirective {
         ...(ngDevMode ? [undefined, { debugName: "streamSlotOnPipBack" }] : /* istanbul ignore next */ []));
         this.resolvedSurface = computed(() => {
             const themes = this.surfaceThemes;
-            if (!themes)
-                return null;
             const type = this.surfaceType();
+            if (!themes || !type)
+                return null;
             const elevation = (this.parentSurfaceProvider?.elevation() ?? 0) + 1;
             return resolveSurfaceByElevation(themes, type, elevation);
         }, /* @ts-ignore */
@@ -62699,6 +62700,7 @@ class TableComponent {
         this.destroyRef = inject(DestroyRef);
         this.document = inject(DOCUMENT$1);
         this.injectedLabels = injectTableLabels();
+        this.renderer = injectRenderer();
         /** The rows to render. */
         this.data = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
@@ -62862,6 +62864,10 @@ class TableComponent {
         ...(ngDevMode ? [{ debugName: "footerSlot" }] : /* istanbul ignore next */ []));
         this.gridRef = viewChild('grid', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "gridRef" }] : /* istanbul ignore next */ []));
+        this.headerGridRef = viewChild('headerGrid', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerGridRef" }] : /* istanbul ignore next */ []));
+        this.scrollerRef = viewChild('scroller', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollerRef" }] : /* istanbul ignore next */ []));
         this.headerCells = viewChildren('headerCell', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerCells" }] : /* istanbul ignore next */ []));
         // Every rendered body cell (tagged with `data-col-key`); the first drives virtual-window
@@ -62926,6 +62932,10 @@ class TableComponent {
         // Rows a feature renders above the column headers (the spanning group-header row).
         this.headerRowList = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerRowList" }] : /* istanbul ignore next */ []));
+        this.pageStickyHeaderList = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageStickyHeaderList" }] : /* istanbul ignore next */ []));
+        this.pageStickyHeader = computed(() => this.pageStickyHeaderList().find((header) => header.enabled()) !== undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageStickyHeader" }] : /* istanbul ignore next */ []));
         this.headerRows = computed(() => this.headerRowList().filter((row) => row.enabled?.() ?? true), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerRows" }] : /* istanbul ignore next */ []));
         // How a feature pins columns (etTableStickyColumns). Null until one registers, which is what keeps
@@ -63147,6 +63157,10 @@ class TableComponent {
         /** The `grid-template-columns` value for the visible columns (plus a leading expander track when expandable). */
         this.templateColumns = computed(() => this.columnTracks().template, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "templateColumns" }] : /* istanbul ignore next */ []));
+        this.resolvedPageHeaderColumns = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedPageHeaderColumns" }] : /* istanbul ignore next */ []));
+        this.pageHeaderColumns = computed(() => this.resolvedPageHeaderColumns() ?? this.templateColumns(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageHeaderColumns" }] : /* istanbul ignore next */ []));
         /**
          * Whether a trailing filler track is in play. It carries an empty cell in every row so the header
          * band, row dividers and vertical rules run to the panel's edge instead of stopping at the last
@@ -63491,11 +63505,12 @@ class TableComponent {
         effect(() => {
             this.hostDimensions();
             this.templateColumns();
+            this.pageStickyHeader();
             afterNextRender({ read: () => this.syncScrollState() }, { injector: this.injector });
         });
     }
     syncScrollState() {
-        const element = this.elementRef.nativeElement;
+        const element = this.scrollElement();
         // `scrollLeft` counts down from 0 in RTL, so compare distances rather than raw offsets.
         const offset = Math.abs(element.scrollLeft);
         const remaining = element.scrollWidth - element.clientWidth - offset;
@@ -63512,6 +63527,7 @@ class TableComponent {
         if (shadows.blockStart !== currentShadows.blockStart || shadows.blockEnd !== currentShadows.blockEnd) {
             this.blockScrollShadows.set(shadows);
         }
+        this.syncPageHeaderScroll(element);
         this.syncObscuredColumns();
     }
     /**
@@ -63591,6 +63607,10 @@ class TableComponent {
     registerHeaderRow(row) {
         this.headerRowList.update((rows) => [...rows, row]);
     }
+    /** Use the split page-sticky header layout. Part of the feature contract; consumers never call this. */
+    registerPageStickyHeader(header) {
+        this.pageStickyHeaderList.update((headers) => [...headers, header]);
+    }
     /**
      * Called by an opt-in feature to render the loading body (`etTableSkeleton`). Part of the feature
      * contract; consumers never call this.
@@ -63743,7 +63763,7 @@ class TableComponent {
     /** How many rows fit the scroll viewport. Part of the feature contract - the PageUp/PageDown step. */
     rowsPerPage() {
         const rowHeight = this.firstBodyCellElement()?.offsetHeight ?? 0;
-        const viewport = this.elementRef.nativeElement.clientHeight;
+        const viewport = this.scrollElement().clientHeight;
         if (!rowHeight || !viewport)
             return 1;
         return Math.max(1, Math.floor(viewport / rowHeight) - 1);
@@ -63914,6 +63934,10 @@ class TableComponent {
     get element() {
         return this.elementRef.nativeElement;
     }
+    /** The active scroll viewport. Part of the feature contract. */
+    scrollElement() {
+        return this.scrollerRef()?.nativeElement ?? this.elementRef.nativeElement;
+    }
     /** The visible columns, in render order. Part of the feature contract. */
     visibleColumnsMeta() {
         return this.visibleColumns();
@@ -63922,6 +63946,16 @@ class TableComponent {
     gridElement() {
         return this.gridRef()?.nativeElement ?? null;
     }
+    /** The separate page-sticky header grid. Part of the feature contract. */
+    pageHeaderGridElement() {
+        return this.headerGridRef()?.nativeElement ?? null;
+    }
+    /** Use the body grid's resolved column tracks for the page-sticky header. Part of the feature contract. */
+    setPageHeaderColumns(columns) {
+        if (columns === this.resolvedPageHeaderColumns())
+            return;
+        this.resolvedPageHeaderColumns.set(columns);
+    }
     /** The rendered header cells, ordered like {@link visibleColumnsMeta}. Part of the feature contract. */
     headerCellElements() {
         return this.headerCells().map((ref) => ref.nativeElement);
@@ -63965,7 +63999,7 @@ class TableComponent {
      * strange state. Stored in `state()` so it round-trips. Part of the feature contract.
      */
     setColumnWidth(key, width) {
-        const max = this.elementRef.nativeElement.clientWidth || Number.MAX_SAFE_INTEGER;
+        const max = this.scrollElement().clientWidth || Number.MAX_SAFE_INTEGER;
         const clamped = Math.min(max, Math.max(this.minWidthOf(key), Math.round(width)));
         this.columnWidths.update((widths) => ({ ...widths, [key]: clamped }));
     }
@@ -63990,11 +64024,12 @@ class TableComponent {
         const measurable = keys.filter((key) => this.columnsByKey().has(key));
         if (!measurable.length)
             return;
+        this.resolvedPageHeaderColumns.set(null);
         this.autosizing.set(new Set(measurable));
         afterNextRender({
             read: () => {
                 // Read every width before writing any, so committing the first doesn't reflow the rest.
-                const measured = measurable.map((key) => [key, Math.ceil(this.renderedColumnWidth(key))]);
+                const measured = measurable.map((key) => [key, Math.ceil(Math.max(this.renderedColumnWidth(key), this.renderedBodyColumnWidth(key)))]);
                 this.autosizing.set(new Set());
                 for (const [key, width] of measured) {
                     if (width > 0)
@@ -64021,6 +64056,19 @@ class TableComponent {
             return next;
         });
     }
+    // Must stay a same-tick write on the header grid. A requestAnimationFrame hop defers it past the
+    // paint the body already moved in, so the header trails a whole frame; and the property inherits,
+    // so writing it on the host recalculates style for every row cell, which only the header reads.
+    syncPageHeaderScroll(scroller) {
+        const header = this.headerGridRef()?.nativeElement;
+        if (!header)
+            return;
+        this.renderer?.setCssProperties(header, { '--_et-table-inline-scroll': `${scroller.scrollLeft}px` });
+    }
+    renderedBodyColumnWidth(key) {
+        const cell = this.bodyCells().find((ref) => ref.nativeElement.getAttribute('data-col-key') === key);
+        return cell?.nativeElement.getBoundingClientRect().width ?? 0;
+    }
     // Which columns have scrolled behind a pinned one. Their cells are hidden by the pinned cells' own
     // opaque fill, but anything a feature hangs off a header cell in a portal - a filter menu, a column
     // menu - is not: it floats over the pinned column, anchored to a cell nobody can see. floating-ui's
@@ -64037,7 +64085,7 @@ class TableComponent {
         const columns = this.visibleColumns();
         // One live read per scroll tick over the header row only, which is what this has to compare against
         // the pinned edges - `signalElementDimensions` observes a single element and never sees a scroll.
-        const host = this.elementRef.nativeElement.getBoundingClientRect();
+        const host = this.scrollElement().getBoundingClientRect();
         const startEdge = host.left + inset.start;
         const endEdge = host.right - inset.end;
         const next = new Set();
@@ -64098,10 +64146,10 @@ class TableComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TableComponent, isStandalone: true, selector: "et-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, rowsSource: { classPropertyName: "rowsSource", publicName: "rowsSource", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, errorTemplate: { classPropertyName: "errorTemplate", publicName: "errorTemplate", isSignal: true, isRequired: false, transformFunction: null }, cellState: { classPropertyName: "cellState", publicName: "cellState", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowInteractive: { classPropertyName: "rowInteractive", publicName: "rowInteractive", isSignal: true, isRequired: false, transformFunction: null }, rowLink: { classPropertyName: "rowLink", publicName: "rowLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", filters: "filtersChange", rowClick: "rowClick" }, host: { listeners: { "scroll": "syncScrollState()" }, properties: { "attr.data-appearance": "appearance()", "attr.data-density": "density()", "attr.aria-busy": "resolvedLoading() ? \"true\" : null", "class.et-table-host--scrolled-block-start": "blockScrollShadows().blockStart", "class.et-table-host--scrolled-block-end": "blockScrollShadows().blockEnd", "class.et-table-host--scrolled-inline-start": "scrollFades().start", "class.et-table-host--scrolled-inline-end": "scrollFades().end", "class.et-table-host--header-adornments": "headerAdornments().length > 0", "style.--_et-table-viewport-inline-size.px": "viewportInlineSize()" }, classAttribute: "et-table-host" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TableComponent, isStandalone: true, selector: "et-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, rowsSource: { classPropertyName: "rowsSource", publicName: "rowsSource", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, errorTemplate: { classPropertyName: "errorTemplate", publicName: "errorTemplate", isSignal: true, isRequired: false, transformFunction: null }, cellState: { classPropertyName: "cellState", publicName: "cellState", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowInteractive: { classPropertyName: "rowInteractive", publicName: "rowInteractive", isSignal: true, isRequired: false, transformFunction: null }, rowLink: { classPropertyName: "rowLink", publicName: "rowLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", filters: "filtersChange", rowClick: "rowClick" }, host: { listeners: { "scroll": "syncScrollState()" }, properties: { "attr.data-appearance": "appearance()", "attr.data-density": "density()", "attr.aria-busy": "resolvedLoading() ? \"true\" : null", "attr.role": "pageStickyHeader() ? \"grid\" : null", "class.et-table-host--scrolled-block-start": "blockScrollShadows().blockStart", "class.et-table-host--scrolled-block-end": "blockScrollShadows().blockEnd", "class.et-table-host--scrolled-inline-start": "scrollFades().start", "class.et-table-host--scrolled-inline-end": "scrollFades().end", "class.et-table-host--header-adornments": "headerAdornments().length > 0", "style.--_et-table-viewport-inline-size.px": "viewportInlineSize()" }, classAttribute: "et-table-host" }, providers: [
             { provide: TABLE_FEATURE_HOST, useExisting: TableComponent },
             provideIcons(ARROW_UP_ICON, TRIANGLE_EXCLAMATION_ICON),
-        ], queries: [{ propertyName: "footerSlot", first: true, predicate: TableFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "headerCells", predicate: ["headerCell"], descendants: true, isSignal: true }, { propertyName: "bodyCells", predicate: ["bodyCell"], descendants: true, isSignal: true }, { propertyName: "leadHeaderCells", predicate: ["leadHeaderCell"], descendants: true, isSignal: true }, { propertyName: "trailHeaderCells", predicate: ["trailHeaderCell"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n     methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"grid\">\n  <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n       is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n  @for (headerRow of headerRows(); track $index) {\n    <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n  }\n\n  <div class=\"et-table-header-row\" role=\"row\">\n    <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n         table owns the cell chrome; the feature only supplies what goes inside. -->\n    @for (lead of leadCells(); track lead.key) {\n      <div\n        #leadHeaderCell\n        [class]=\"lead.cellClass\"\n        [class.et-table-sticky-start]=\"lead.sticky\"\n        [style.inset-inline-start.px]=\"lead.offset\"\n        [attr.aria-hidden]=\"lead.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (lead.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n        }\n      </div>\n    }\n    @for (cell of headerCellVms(); track cell.key) {\n      <div\n        #headerCell\n        [attr.data-align]=\"cell.align\"\n        [attr.data-col-key]=\"cell.key\"\n        [attr.data-disabled]=\"cell.disabled || null\"\n        [attr.aria-sort]=\"cell.ariaSort\"\n        [class.et-table-sticky-start]=\"cell.stickyStart\"\n        [class.et-table-sticky-end]=\"cell.stickyEnd\"\n        [style.inset-inline-start.px]=\"cell.offsetStart\"\n        [style.inset-inline-end.px]=\"cell.offsetEnd\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n             one button, and the only sort affordance is the direction arrow, which appears once the\n             column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n        @if (cell.sortable) {\n          <button\n            [attr.aria-label]=\"cell.sortLabel\"\n            [disabled]=\"cell.disabled\"\n            (click)=\"toggleSort(cell.key)\"\n            class=\"et-table-header-label et-table-header-label--sortable\"\n            type=\"button\"\n          >\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n              @if (cell.direction; as direction) {\n                <!-- Flipping direction keeps this element mounted, so the arrow turns over rather than\n                     swapping; only appearing and disappearing are the fade, and only for a sort the user\n                     just asked for (see sortIndicatorEnter). -->\n                <i\n                  [attr.data-direction]=\"direction\"\n                  [animate.enter]=\"sortIndicatorEnter()\"\n                  [animate.leave]=\"sortIndicatorLeave()\"\n                  class=\"et-table-sort-indicator\"\n                  etIcon=\"et-arrow-up\"\n                ></i>\n              }\n            </span>\n          </button>\n        } @else {\n          <span class=\"et-table-header-label\">\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n            </span>\n          </span>\n        }\n\n        <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n             registerHeaderAdornment. Renders nothing when no feature is imported.\n\n             Dropped once the column is covered by a pinned one: an adornment's menu is a portal, so it\n             would go on floating over the pinned column, anchored to a cell nobody can see. Unmounting\n             the trigger is what closes it. -->\n        @if (!cell.obscured && headerAdornments().length) {\n          <div class=\"et-table-header-adornments\">\n            @for (adornment of headerAdornments(); track $index) {\n              <ng-container\n                *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n              />\n            }\n          </div>\n        }\n      </div>\n    }\n    <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n         panel's edge when every column is a rigid width. -->\n    @if (hasFiller()) {\n      <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n    }\n    <!-- Trailing utility columns (a selection column moved to this edge). Same chrome as the leading\n         ones, pinned to the trailing edge instead - see TableLeadColumn.side. -->\n    @for (trail of trailCells(); track trail.key) {\n      <div\n        #trailHeaderCell\n        [class]=\"trail.cellClass\"\n        [class.et-table-sticky-end]=\"trail.sticky\"\n        [style.inset-inline-end.px]=\"trail.offset\"\n        [attr.aria-hidden]=\"trail.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (trail.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n       so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n       table takes no component dependencies, and this is 2px of chrome, not a control. -->\n  @if (showBusyBar()) {\n    <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n         vanishes reads as a flicker rather than as work happening. -->\n    <div\n      class=\"et-table-busy-bar\"\n      animate.enter=\"et-table-busy-bar--enter\"\n      animate.leave=\"et-table-busy-bar--leave\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  @if (hasError()) {\n    <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n    <div class=\"et-table-message-row\" role=\"row\">\n      <div class=\"et-table-error-cell\" role=\"gridcell\" aria-live=\"polite\">\n        @if (errorTemplate(); as template) {\n          <ng-container *ngTemplateOutlet=\"template; context: { $implicit: error() }\" />\n        } @else {\n          <ng-content select=\"[etTableError]\">\n            <i [etProvideColor]=\"errorColorTheme\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n            <span>{{ resolvedLabels().error }}</span>\n          </ng-content>\n        }\n      </div>\n    </div>\n  } @else if (showPlaceholderRows()) {\n    <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n         (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n         than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n    @if (bodyPlaceholder(); as placeholder) {\n      <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n    }\n  } @else {\n    @for (rowVm of bodyRows(); track rowVm.key) {\n      <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n      <div\n        [class]=\"rowVm.classes\"\n        [class.et-table-row--stripe]=\"rowVm.stripe\"\n        [class.et-table-row--last]=\"rowVm.last\"\n        [class.et-table-row--interactive]=\"rowInteractive()\"\n        [class.et-table-row--box]=\"rowBox()\"\n        [class.et-table-row--card]=\"cardRows()\"\n        [class.et-table-row--link]=\"rowVm.href !== null\"\n        [etTableCardSurface]=\"cardRows()\"\n        [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n        (click)=\"activateRow(rowVm.row, $event)\"\n        (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n        (keydown.space)=\"activateRow(rowVm.row, $event)\"\n        class=\"et-table-row\"\n        role=\"row\"\n      >\n        @for (lead of rowVm.leads; track lead.key) {\n          <div\n            [class]=\"lead.cellClass\"\n            [class.et-table-sticky-start]=\"lead.sticky\"\n            [style.inset-inline-start.px]=\"lead.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n            />\n          </div>\n        }\n        @for (cell of rowVm.cells; track cell.key) {\n          <div\n            #bodyCell\n            [attr.data-align]=\"cell.align\"\n            [attr.data-col-key]=\"cell.key\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [attr.data-state]=\"cell.state\"\n            [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n            [class.et-table-cell--interactive]=\"cell.interactive\"\n            [class.et-table-cell--editing]=\"cell.edit\"\n            [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n            [class.et-table-sticky-start]=\"cell.stickyStart\"\n            [class.et-table-sticky-end]=\"cell.stickyEnd\"\n            [style.inset-inline-start.px]=\"cell.offsetStart\"\n            [style.inset-inline-end.px]=\"cell.offsetEnd\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            @if (cell.edit; as edit) {\n              <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n                   editing feature's own context (the draft field). See registerCellEditing. -->\n              <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n            } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n              <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n                   instead of its value; the row around it stays readable. Without one the value stays put\n                   and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n              <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n            } @else {\n              @if (cell.state === 'error') {\n                @if (cellErrorMark(); as mark) {\n                  <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n                       only ships when a table actually wants a tooltip. -->\n                  <ng-container\n                    *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n                  />\n                } @else {\n                  <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n                       as an error, and a provider per errored cell is cheap where one per cell would not\n                       be. The message rides along as `title`, which costs nothing. -->\n                  <i\n                    [etProvideColor]=\"errorColorTheme\"\n                    [attr.title]=\"cell.message\"\n                    [attr.aria-label]=\"cell.message\"\n                    [attr.aria-hidden]=\"cell.message ? null : 'true'\"\n                    class=\"et-table-cell-error-icon\"\n                    etIcon=\"et-triangle-exclamation\"\n                  ></i>\n                }\n              }\n              @if (cell.template; as bodyTemplate) {\n                <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n              }\n            }\n          </div>\n        }\n        @if (hasFiller()) {\n          <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n        @for (trail of rowVm.trails; track trail.key) {\n          <div\n            [class]=\"trail.cellClass\"\n            [class.et-table-sticky-end]=\"trail.sticky\"\n            [style.inset-inline-end.px]=\"trail.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n            />\n          </div>\n        }\n\n        @if (rowVm.href !== null) {\n          <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n               wrapping any content, so the cells stay exactly as a table without links renders them.\n               It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n               resolves to that cell's content, which is the row's identity.\n\n               A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n               therefore be the anchor's containing block, shrinking the row's hit area to that one\n               column. The row box is the containing block that spans every cell. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- the rule's\n               allowList knows `aria-label` but not `aria-labelledby`, which names it just as well. -->\n          <a\n            [attr.href]=\"rowVm.href\"\n            [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n            (click)=\"activateRowLink(rowVm.link, $event)\"\n            class=\"et-table-row-link\"\n          ></a>\n        }\n\n        @if (cardRows()) {\n          <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n      </div>\n\n      <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n           its animation belong to the feature, so a table that never expands carries none of them. -->\n      @if (rowVm.detail; as detail) {\n        <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n      }\n    } @empty {\n      <div class=\"et-table-message-row\" role=\"row\">\n        <div class=\"et-table-empty-cell\" role=\"gridcell\">\n          @if (emptyTemplate(); as template) {\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n          } @else {\n            <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n       already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n       the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n       their place with `position: sticky` for the entire scroll range. -->\n  <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n    <div\n      [style.inset-inline-start.px]=\"fadeInset().start\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n    ></div>\n    <div\n      [style.inset-inline-end.px]=\"fadeInset().end\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n    ></div>\n  </div>\n\n  @if (hasFooter()) {\n    <div class=\"et-table-footer-row\" role=\"row\">\n      @for (lead of leadCells(); track lead.key) {\n        <div\n          [class]=\"lead.cellClass\"\n          [class.et-table-sticky-start]=\"lead.sticky\"\n          [style.inset-inline-start.px]=\"lead.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n      @for (cell of footerCells(); track cell.key) {\n        <div\n          [attr.data-align]=\"cell.align\"\n          [class.et-table-sticky-start]=\"cell.stickyStart\"\n          [class.et-table-sticky-end]=\"cell.stickyEnd\"\n          [style.inset-inline-start.px]=\"cell.offsetStart\"\n          [style.inset-inline-end.px]=\"cell.offsetEnd\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n        >\n          @if (cell.template; as footerTemplate) {\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n          }\n        </div>\n      }\n      @if (hasFiller()) {\n        <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n      @for (trail of trailCells(); track trail.key) {\n        <div\n          [class]=\"trail.cellClass\"\n          [class.et-table-sticky-end]=\"trail.sticky\"\n          [style.inset-inline-end.px]=\"trail.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n     Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n  <div class=\"et-table-footer\">\n    <ng-content select=\"[etTableFooter]\" />\n  </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n     feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n  <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-table-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-header-adornment-size: 2.4rem;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-hover-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-hover-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-row-hover: var(--_et-table-hover-tint);--_et-table-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-pressed-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent);--_et-table-pressed-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-surface) );--_et-table-row-pressed: var(--_et-table-pressed-tint);--_et-table-row-pressed-solid: var(--_et-table-pressed-tint-solid);--_et-table-inert-row-hover: var(--_et-table-hover-tint);--_et-table-inert-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-row-gap-block: 0px;--_et-table-row-paint: transparent;--_et-table-row-corner: 0px;--_et-table-header-gap-block: 0px;--_et-table-cell-rule: 0;--_et-table-sticky-clip: none;--_et-table-busy-margin-block-start: 0px;--_et-table-busy-margin-block-end: -2px;--_et-table-detail-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:10px}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000f}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-cell-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-row-gap-block: var(--et-table-row-gap, 8px);--_et-table-row-corner: var(--et-table-row-radius, 10px);--_et-table-header-gap-block: var(--et-table-row-gap, 8px);--_et-table-sticky-clip: inset(0 -24px);--_et-table-busy-margin-block-start: calc((var(--et-table-row-gap, 8px) + 2px) / -2);--_et-table-busy-margin-block-end: calc((var(--et-table-row-gap, 8px) - 2px) / 2);--_et-table-detail-rule: 0;--_et-table-inert-row-hover: transparent;--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-header-cell.et-table-filler-cell,.et-table-cell.et-table-filler-cell,.et-table-footer-cell.et-table-filler-cell,.et-table-group-cell.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-surface-color-muted-solid, CanvasText);background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-adornments{display:flex;align-items:center;flex:none}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: var(--_et-table-header-adornment-size);--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-host--header-adornments .et-table-header-cell{min-block-size:calc(max(var(--_et-table-header-adornment-size),24px) + 2 * var(--et-table-cell-padding-block) + 1px)}.et-table-cell{border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-header-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-start)}.et-table-header-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-end)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-footer-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-start)}.et-table-footer-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-header-cell,.et-table-cell{border-inline-end:var(--_et-table-cell-rule)}.et-table-header-row .et-table-header-cell:last-child,.et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-sticky-start,.et-table-sticky-end{position:sticky;z-index:1}.et-table-sticky-start{box-shadow:var(--_et-table-edge-start)}.et-table-sticky-end{box-shadow:var(--_et-table-edge-end)}.et-table-sticky-start:has(~.et-table-sticky-start){--_et-table-edge-start: 0 0 transparent}.et-table-sticky-end~.et-table-sticky-end{--_et-table-edge-end: 0 0 transparent}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--_et-table-row-surface)}.et-table-row--stripe .et-table-cell.et-table-sticky-start,.et-table-row--stripe .et-table-cell.et-table-sticky-end{background:var(--_et-table-stripe-solid)}@media(hover:hover){.et-table-row:hover .et-table-cell.et-table-sticky-start,.et-table-row:hover .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-hover-solid)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-start,.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-pressed-solid)}.et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end),.et-table-footer-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:3}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell{background:var(--_et-table-row-pressed)}.et-table-row--box{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;position:relative;z-index:0}.et-table-row-link{position:absolute;inset:0;z-index:2;cursor:pointer}.et-table-header-label:focus-visible,.et-table-expander:focus-visible,.et-table-cell:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-table-header-label{border-radius:4px}.et-table-row-link:focus-visible{outline:none}.et-table-row--box:has(.et-table-row-link:focus-visible):before{content:\"\";position:absolute;inset:4px;z-index:5;border:2px solid var(--et-theme-color-primary-solid, currentColor);border-radius:max(0px,calc(var(--_et-table-row-corner, 0px) - 4px));pointer-events:none}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive,.et-table-cell--editing){z-index:3}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive,.et-table-cell--editing):not(.et-table-sticky-start,.et-table-sticky-end){position:relative}.et-table-row{margin-block-end:var(--_et-table-row-gap-block);background:var(--_et-table-row-paint);border-radius:var(--_et-table-row-corner)}.et-table-row--card{--_et-table-row-paint: var(--et-surface-background-solid, Canvas);--_et-table-row-surface: var(--_et-table-row-paint);--_et-table-stripe-solid: var(--_et-table-row-paint);--_et-table-row-hover-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-paint) );--_et-table-row-pressed-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-paint) );--_et-table-inert-row-hover-solid: var(--_et-table-row-paint);color:var(--et-surface-color-solid, CanvasText)}.et-table-row--card:where(.et-table-row--card-tint){--_et-table-row-paint: var(--_et-table-band)}.et-table-host:where([data-appearance=cards]) .et-table-row--box:after{content:\"\";position:absolute;inset:0;z-index:4;border:1px solid var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / .3)));border-radius:inherit;pointer-events:none}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){clip-path:var(--_et-table-sticky-clip)}.et-table-header-cell{margin-block-end:var(--_et-table-header-gap-block)}.et-table-row:not(.et-table-row--interactive,.et-table-row--link){--_et-table-row-hover: var(--_et-table-inert-row-hover);--_et-table-row-hover-solid: var(--_et-table-inert-row-hover-solid)}.et-table-row>:first-child{border-start-start-radius:inherit;border-end-start-radius:inherit}.et-table-row>.et-table-cell:nth-last-child(1 of.et-table-cell){border-start-end-radius:inherit;border-end-end-radius:inherit}.et-table-row-link{border-radius:var(--_et-table-row-corner)}.et-table-card-corners{position:absolute;inset:0;z-index:5;display:flex;justify-content:space-between;pointer-events:none}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:before,.et-table-host:where([data-appearance=cards]) .et-table-card-corners:after{--_et-table-card-radius: var(--et-table-row-radius, 10px);--_et-table-card-edge: var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / .3)));content:\"\";flex:0 0 auto;inline-size:var(--_et-table-card-radius)}.et-table-row:has(.et-table-sticky-start) .et-table-card-corners:before{position:sticky;inset-inline-start:0}.et-table-row:has(.et-table-sticky-end) .et-table-card-corners:after{position:sticky;inset-inline-end:0}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:before{background:radial-gradient(circle at 100% 100%,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 0 / 100% var(--_et-table-card-radius) no-repeat,radial-gradient(circle at 100% 0,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 100% / 100% var(--_et-table-card-radius) no-repeat,linear-gradient(var(--_et-table-card-edge),var(--_et-table-card-edge)) 0 0 / 1px 100% no-repeat}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:after{background:radial-gradient(circle at 0 100%,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 0 / 100% var(--_et-table-card-radius) no-repeat,radial-gradient(circle at 0 0,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 100% / 100% var(--_et-table-card-radius) no-repeat,linear-gradient(var(--_et-table-card-edge),var(--_et-table-card-edge)) 100% 0 / 1px 100% no-repeat}.et-table-header-label{display:flex;align-items:center;flex:1;min-inline-size:0;margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none}.et-table-header-label-box{display:flex;align-items:center;gap:4px;min-inline-size:0;padding:4px;margin:-4px;border-radius:4px}.et-table-header-label:where(.et-table-header-label--sortable){cursor:pointer}.et-table-header-label--sortable .et-table-header-label-box{background-color:var(--_et-table-header-label-tint, transparent);transition:background-color .12s var(--ease-out-5, ease)}@media(hover:hover){.et-table-header-label--sortable:hover:not(:disabled){--_et-table-header-label-tint: var(--_et-table-hover-tint)}}.et-table-header-label--sortable:active:not(:disabled){--_et-table-header-label-tint: var(--_et-table-pressed-tint)}.et-table-header-cell:where([data-disabled]) .et-table-header-label{opacity:var(--et-table-opacity-disabled)}.et-table-header-label:where(.et-table-header-label--sortable:disabled){cursor:not-allowed}.et-table-header-cell:where([data-align=center]) .et-table-header-label{justify-content:center}.et-table-header-cell:where([data-align=end]) .et-table-header-label{justify-content:flex-end}.et-table-sort-indicator{flex:none;inline-size:1.15em;block-size:1.15em;transform:translateY(-.045em);color:var(--et-theme-color-primary-solid, currentColor);transition:transform .2s var(--ease-out-5, ease)}.et-table-sort-indicator:where([data-direction=desc]){transform:translateY(-.045em) rotate(180deg)}.et-table-sort-indicator.et-table-sort-indicator--enter{animation:et-table-sort-in .15s ease}.et-table-sort-indicator.et-table-sort-indicator--leave{animation:et-table-sort-in .12s ease reverse forwards}@keyframes et-table-sort-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.et-table-sort-indicator{transition:none}.et-table-sort-indicator.et-table-sort-indicator--enter,.et-table-sort-indicator.et-table-sort-indicator--leave{animation:none}}.et-table-message-row{display:contents}.et-table-empty-cell,.et-table-error-cell{grid-column:1 / -1;position:sticky;inset-inline-start:0;inline-size:var(--_et-table-viewport-inline-size, 100%);padding:32px var(--et-table-cell-padding-inline);color:var(--et-surface-color-muted-solid, CanvasText);text-align:center}.et-table-empty-cell{display:grid;place-content:center;justify-items:center}.et-table-error-cell{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:8px}.et-table-error-icon{flex:none;inline-size:16px;block-size:16px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=error]){gap:6px}.et-table-cell-error-icon{flex:none;inline-size:14px;block-size:14px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=loading]){display:flex}.et-table-busy-bar{grid-column:1 / -1;block-size:2px;margin-block-start:var(--_et-table-busy-margin-block-start);margin-block-end:var(--_et-table-busy-margin-block-end);overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-table-busy-bar.et-table-busy-bar--enter{animation:et-table-busy-fade .15s ease}.et-table-busy-bar.et-table-busy-bar--leave{animation:et-table-busy-fade .25s ease reverse forwards}@keyframes et-table-busy-fade{0%{opacity:0}to{opacity:1}}.et-table-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-table-busy-sweep 1.1s ease-in-out infinite}@keyframes et-table-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media(prefers-reduced-motion:reduce){.et-table-busy-bar:after{inline-size:100%;animation:none}.et-table-busy-bar.et-table-busy-bar--enter,.et-table-busy-bar.et-table-busy-bar--leave{animation:none}}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "directive", type: TableCardSurfaceDirective, selector: "[etTableCardSurface]", inputs: ["etTableCardSurface"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "footerSlot", first: true, predicate: TableFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "headerGridRef", first: true, predicate: ["headerGrid"], descendants: true, isSignal: true }, { propertyName: "scrollerRef", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "headerCells", predicate: ["headerCell"], descendants: true, isSignal: true }, { propertyName: "bodyCells", predicate: ["bodyCell"], descendants: true, isSignal: true }, { propertyName: "leadHeaderCells", predicate: ["leadHeaderCell"], descendants: true, isSignal: true }, { propertyName: "trailHeaderCells", predicate: ["trailHeaderCell"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n     methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<ng-template #headerContent>\n  <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n       is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n  @for (headerRow of headerRows(); track $index) {\n    <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n  }\n\n  <div class=\"et-table-header-row\" role=\"row\">\n    <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n         table owns the cell chrome; the feature only supplies what goes inside. -->\n    @for (lead of leadCells(); track lead.key) {\n      <div\n        #leadHeaderCell\n        [class]=\"lead.cellClass\"\n        [class.et-table-sticky-start]=\"lead.sticky\"\n        [style.inset-inline-start.px]=\"pageStickyHeader() ? null : lead.offset\"\n        [attr.aria-hidden]=\"lead.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (lead.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n        }\n      </div>\n    }\n    @for (cell of headerCellVms(); track cell.key) {\n      <div\n        #headerCell\n        [attr.data-align]=\"cell.align\"\n        [attr.data-col-key]=\"cell.key\"\n        [attr.data-disabled]=\"cell.disabled || null\"\n        [attr.aria-sort]=\"cell.ariaSort\"\n        [class.et-table-sticky-start]=\"cell.stickyStart\"\n        [class.et-table-sticky-end]=\"cell.stickyEnd\"\n        [style.inset-inline-start.px]=\"pageStickyHeader() ? null : cell.offsetStart\"\n        [style.inset-inline-end.px]=\"pageStickyHeader() ? null : cell.offsetEnd\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n             one button, and the only sort affordance is the direction arrow, which appears once the\n             column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n        @if (cell.sortable) {\n          <button\n            [attr.aria-label]=\"cell.sortLabel\"\n            [disabled]=\"cell.disabled\"\n            (click)=\"toggleSort(cell.key)\"\n            class=\"et-table-header-label et-table-header-label--sortable\"\n            type=\"button\"\n          >\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n              @if (cell.direction; as direction) {\n                <!-- Flipping direction keeps this element mounted, so the arrow turns over rather than\n                     swapping; only appearing and disappearing are the fade, and only for a sort the user\n                     just asked for (see sortIndicatorEnter). -->\n                <i\n                  [attr.data-direction]=\"direction\"\n                  [animate.enter]=\"sortIndicatorEnter()\"\n                  [animate.leave]=\"sortIndicatorLeave()\"\n                  class=\"et-table-sort-indicator\"\n                  etIcon=\"et-arrow-up\"\n                ></i>\n              }\n            </span>\n          </button>\n        } @else {\n          <span class=\"et-table-header-label\">\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n            </span>\n          </span>\n        }\n\n        <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n             registerHeaderAdornment. Renders nothing when no feature is imported.\n\n             Dropped once the column is covered by a pinned one: an adornment's menu is a portal, so it\n             would go on floating over the pinned column, anchored to a cell nobody can see. Unmounting\n             the trigger is what closes it. -->\n        @if (!cell.obscured && headerAdornments().length) {\n          <div class=\"et-table-header-adornments\">\n            @for (adornment of headerAdornments(); track $index) {\n              <ng-container\n                *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n              />\n            }\n          </div>\n        }\n      </div>\n    }\n    <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n         panel's edge when every column is a rigid width. -->\n    @if (hasFiller()) {\n      <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n    }\n    <!-- Trailing utility columns (a selection column moved to this edge). Same chrome as the leading\n         ones, pinned to the trailing edge instead - see TableLeadColumn.side. -->\n    @for (trail of trailCells(); track trail.key) {\n      <div\n        #trailHeaderCell\n        [class]=\"trail.cellClass\"\n        [class.et-table-sticky-end]=\"trail.sticky\"\n        [style.inset-inline-end.px]=\"pageStickyHeader() ? null : trail.offset\"\n        [attr.aria-hidden]=\"trail.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (trail.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #bodyContent>\n  <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n       so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n       table takes no component dependencies, and this is 2px of chrome, not a control. -->\n  @if (showBusyBar()) {\n    <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n         vanishes reads as a flicker rather than as work happening. -->\n    <div\n      class=\"et-table-busy-bar\"\n      animate.enter=\"et-table-busy-bar--enter\"\n      animate.leave=\"et-table-busy-bar--leave\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  @if (hasError()) {\n    <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n    <div class=\"et-table-message-row\" role=\"row\">\n      <div class=\"et-table-error-cell\" role=\"gridcell\" aria-live=\"polite\">\n        @if (errorTemplate(); as template) {\n          <ng-container *ngTemplateOutlet=\"template; context: { $implicit: error() }\" />\n        } @else {\n          <ng-content select=\"[etTableError]\">\n            <i [etProvideColor]=\"errorColorTheme\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n            <span>{{ resolvedLabels().error }}</span>\n          </ng-content>\n        }\n      </div>\n    </div>\n  } @else if (showPlaceholderRows()) {\n    <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n         (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n         than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n    @if (bodyPlaceholder(); as placeholder) {\n      <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n    }\n  } @else {\n    @for (rowVm of bodyRows(); track rowVm.key) {\n      <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n      <div\n        [class]=\"rowVm.classes\"\n        [class.et-table-row--stripe]=\"rowVm.stripe\"\n        [class.et-table-row--last]=\"rowVm.last\"\n        [class.et-table-row--interactive]=\"rowInteractive()\"\n        [class.et-table-row--box]=\"rowBox()\"\n        [class.et-table-row--card]=\"cardRows()\"\n        [class.et-table-row--link]=\"rowVm.href !== null\"\n        [etTableCardSurface]=\"cardRows()\"\n        [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n        (click)=\"activateRow(rowVm.row, $event)\"\n        (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n        (keydown.space)=\"activateRow(rowVm.row, $event)\"\n        class=\"et-table-row\"\n        role=\"row\"\n      >\n        @for (lead of rowVm.leads; track lead.key) {\n          <div\n            [class]=\"lead.cellClass\"\n            [class.et-table-sticky-start]=\"lead.sticky\"\n            [style.inset-inline-start.px]=\"lead.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n            />\n          </div>\n        }\n        @for (cell of rowVm.cells; track cell.key) {\n          <div\n            #bodyCell\n            [attr.data-align]=\"cell.align\"\n            [attr.data-col-key]=\"cell.key\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [attr.data-state]=\"cell.state\"\n            [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n            [class.et-table-cell--interactive]=\"cell.interactive\"\n            [class.et-table-cell--editing]=\"cell.edit\"\n            [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n            [class.et-table-sticky-start]=\"cell.stickyStart\"\n            [class.et-table-sticky-end]=\"cell.stickyEnd\"\n            [style.inset-inline-start.px]=\"cell.offsetStart\"\n            [style.inset-inline-end.px]=\"cell.offsetEnd\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            @if (cell.edit; as edit) {\n              <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n                   editing feature's own context (the draft field). See registerCellEditing. -->\n              <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n            } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n              <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n                   instead of its value; the row around it stays readable. Without one the value stays put\n                   and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n              <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n            } @else {\n              @if (cell.state === 'error') {\n                @if (cellErrorMark(); as mark) {\n                  <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n                       only ships when a table actually wants a tooltip. -->\n                  <ng-container\n                    *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n                  />\n                } @else {\n                  <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n                       as an error, and a provider per errored cell is cheap where one per cell would not\n                       be. The message rides along as `title`, which costs nothing. -->\n                  <i\n                    [etProvideColor]=\"errorColorTheme\"\n                    [attr.title]=\"cell.message\"\n                    [attr.aria-label]=\"cell.message\"\n                    [attr.aria-hidden]=\"cell.message ? null : 'true'\"\n                    class=\"et-table-cell-error-icon\"\n                    etIcon=\"et-triangle-exclamation\"\n                  ></i>\n                }\n              }\n              @if (cell.template; as bodyTemplate) {\n                <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n              }\n            }\n          </div>\n        }\n        @if (hasFiller()) {\n          <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n        @for (trail of rowVm.trails; track trail.key) {\n          <div\n            [class]=\"trail.cellClass\"\n            [class.et-table-sticky-end]=\"trail.sticky\"\n            [style.inset-inline-end.px]=\"trail.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n            />\n          </div>\n        }\n\n        @if (rowVm.href !== null) {\n          <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n               wrapping any content, so the cells stay exactly as a table without links renders them.\n               It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n               resolves to that cell's content, which is the row's identity.\n\n               A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n               therefore be the anchor's containing block, shrinking the row's hit area to that one\n               column. The row box is the containing block that spans every cell. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- the rule's\n               allowList knows `aria-label` but not `aria-labelledby`, which names it just as well. -->\n          <a\n            [attr.href]=\"rowVm.href\"\n            [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n            (click)=\"activateRowLink(rowVm.link, $event)\"\n            class=\"et-table-row-link\"\n          ></a>\n        }\n\n        @if (cardRows()) {\n          <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n      </div>\n\n      <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n           its animation belong to the feature, so a table that never expands carries none of them. -->\n      @if (rowVm.detail; as detail) {\n        <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n      }\n    } @empty {\n      <div class=\"et-table-message-row\" role=\"row\">\n        <div class=\"et-table-empty-cell\" role=\"gridcell\">\n          @if (emptyTemplate(); as template) {\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n          } @else {\n            <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n       already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n       the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n       their place with `position: sticky` for the entire scroll range. -->\n  <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n    <div\n      [style.inset-inline-start.px]=\"fadeInset().start\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n    ></div>\n    <div\n      [style.inset-inline-end.px]=\"fadeInset().end\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n    ></div>\n  </div>\n\n  @if (hasFooter()) {\n    <div class=\"et-table-footer-row\" role=\"row\">\n      @for (lead of leadCells(); track lead.key) {\n        <div\n          [class]=\"lead.cellClass\"\n          [class.et-table-sticky-start]=\"lead.sticky\"\n          [style.inset-inline-start.px]=\"lead.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n      @for (cell of footerCells(); track cell.key) {\n        <div\n          [attr.data-align]=\"cell.align\"\n          [class.et-table-sticky-start]=\"cell.stickyStart\"\n          [class.et-table-sticky-end]=\"cell.stickyEnd\"\n          [style.inset-inline-start.px]=\"cell.offsetStart\"\n          [style.inset-inline-end.px]=\"cell.offsetEnd\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n        >\n          @if (cell.template; as footerTemplate) {\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n          }\n        </div>\n      }\n      @if (hasFiller()) {\n        <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n      @for (trail of trailCells(); track trail.key) {\n        <div\n          [class]=\"trail.cellClass\"\n          [class.et-table-sticky-end]=\"trail.sticky\"\n          [style.inset-inline-end.px]=\"trail.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n    </div>\n  }\n</ng-template>\n\n@if (pageStickyHeader()) {\n  <div class=\"et-table-header-strip\">\n    <div\n      #headerGrid\n      [style.grid-template-columns]=\"pageHeaderColumns()\"\n      class=\"et-table et-table-header\"\n      role=\"rowgroup\"\n    >\n      <ng-container *ngTemplateOutlet=\"headerContent\" />\n    </div>\n  </div>\n  <div #scroller (scroll)=\"syncScrollState()\" class=\"et-table-scroller\">\n    <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"rowgroup\">\n      <ng-container *ngTemplateOutlet=\"bodyContent\" />\n    </div>\n  </div>\n} @else {\n  <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"grid\">\n    <ng-container *ngTemplateOutlet=\"headerContent\" />\n    <ng-container *ngTemplateOutlet=\"bodyContent\" />\n  </div>\n}\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n     Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n  <div class=\"et-table-footer\">\n    <ng-content select=\"[etTableFooter]\" />\n  </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n     feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n  <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-table-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-header-adornment-size: 2.4rem;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-hover-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-hover-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-row-hover: var(--_et-table-hover-tint);--_et-table-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-pressed-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent);--_et-table-pressed-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-surface) );--_et-table-row-pressed: var(--_et-table-pressed-tint);--_et-table-row-pressed-solid: var(--_et-table-pressed-tint-solid);--_et-table-inert-row-hover: var(--_et-table-hover-tint);--_et-table-inert-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-row-gap-block: 0px;--_et-table-row-paint: transparent;--_et-table-row-corner: 0px;--_et-table-header-gap-block: 0px;--_et-table-cell-rule: 0;--_et-table-sticky-clip: none;--_et-table-busy-margin-block-start: 0px;--_et-table-busy-margin-block-end: -2px;--_et-table-detail-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:10px}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000f}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-cell-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-row-gap-block: var(--et-table-row-gap, 8px);--_et-table-row-corner: var(--et-table-row-radius, 10px);--_et-table-header-gap-block: var(--et-table-row-gap, 8px);--_et-table-sticky-clip: inset(0 -24px);--_et-table-busy-margin-block-start: calc((var(--et-table-row-gap, 8px) + 2px) / -2);--_et-table-busy-margin-block-end: calc((var(--et-table-row-gap, 8px) - 2px) / 2);--_et-table-detail-rule: 0;--_et-table-inert-row-hover: transparent;--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-header-cell.et-table-filler-cell,.et-table-cell.et-table-filler-cell,.et-table-footer-cell.et-table-filler-cell,.et-table-group-cell.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-surface-color-muted-solid, CanvasText);background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-adornments{display:flex;align-items:center;flex:none}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: var(--_et-table-header-adornment-size);--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-host--header-adornments .et-table-header-cell{min-block-size:calc(max(var(--_et-table-header-adornment-size),24px) + 2 * var(--et-table-cell-padding-block) + 1px)}.et-table-cell{border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-header-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-start)}.et-table-header-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-end)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-footer-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-start)}.et-table-footer-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-header-cell,.et-table-cell{border-inline-end:var(--_et-table-cell-rule)}.et-table-header-row .et-table-header-cell:last-child,.et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-sticky-start,.et-table-sticky-end{position:sticky;z-index:1}.et-table-sticky-start{box-shadow:var(--_et-table-edge-start)}.et-table-sticky-end{box-shadow:var(--_et-table-edge-end)}.et-table-sticky-start:has(~.et-table-sticky-start){--_et-table-edge-start: 0 0 transparent}.et-table-sticky-end~.et-table-sticky-end{--_et-table-edge-end: 0 0 transparent}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--_et-table-row-surface)}.et-table-row--stripe .et-table-cell.et-table-sticky-start,.et-table-row--stripe .et-table-cell.et-table-sticky-end{background:var(--_et-table-stripe-solid)}@media(hover:hover){.et-table-row:hover .et-table-cell.et-table-sticky-start,.et-table-row:hover .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-hover-solid)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-start,.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-pressed-solid)}.et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end),.et-table-footer-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:3}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell{background:var(--_et-table-row-pressed)}.et-table-row--box{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;position:relative;z-index:0}.et-table-row-link{position:absolute;inset:0;z-index:2;cursor:pointer}.et-table-header-label:focus-visible,.et-table-expander:focus-visible,.et-table-cell:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-table-header-label{border-radius:4px}.et-table-row-link:focus-visible{outline:none}.et-table-row--box:has(.et-table-row-link:focus-visible):before{content:\"\";position:absolute;inset:4px;z-index:5;border:2px solid var(--et-theme-color-primary-solid, currentColor);border-radius:max(0px,calc(var(--_et-table-row-corner, 0px) - 4px));pointer-events:none}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive,.et-table-cell--editing){z-index:3}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive,.et-table-cell--editing):not(.et-table-sticky-start,.et-table-sticky-end){position:relative}.et-table-row{margin-block-end:var(--_et-table-row-gap-block);background:var(--_et-table-row-paint);border-radius:var(--_et-table-row-corner)}.et-table-row--card{--_et-table-row-paint: var(--et-surface-background-solid, Canvas);--_et-table-row-surface: var(--_et-table-row-paint);--_et-table-stripe-solid: var(--_et-table-row-paint);--_et-table-row-hover-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-paint) );--_et-table-row-pressed-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-paint) );--_et-table-inert-row-hover-solid: var(--_et-table-row-paint);color:var(--et-surface-color-solid, CanvasText)}.et-table-row--card:where(.et-table-row--card-tint){--_et-table-row-paint: var(--_et-table-band)}.et-table-host:where([data-appearance=cards]) .et-table-row--box:after{content:\"\";position:absolute;inset:0;z-index:4;border:1px solid var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / .3)));border-radius:inherit;pointer-events:none}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){clip-path:var(--_et-table-sticky-clip)}.et-table-header-cell{margin-block-end:var(--_et-table-header-gap-block)}.et-table-row:not(.et-table-row--interactive,.et-table-row--link){--_et-table-row-hover: var(--_et-table-inert-row-hover);--_et-table-row-hover-solid: var(--_et-table-inert-row-hover-solid)}.et-table-row>:first-child{border-start-start-radius:inherit;border-end-start-radius:inherit}.et-table-row>.et-table-cell:nth-last-child(1 of.et-table-cell){border-start-end-radius:inherit;border-end-end-radius:inherit}.et-table-row-link{border-radius:var(--_et-table-row-corner)}.et-table-card-corners{position:absolute;inset:0;z-index:5;display:flex;justify-content:space-between;pointer-events:none}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:before,.et-table-host:where([data-appearance=cards]) .et-table-card-corners:after{--_et-table-card-radius: var(--et-table-row-radius, 10px);--_et-table-card-edge: var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / .3)));content:\"\";flex:0 0 auto;inline-size:var(--_et-table-card-radius)}.et-table-row:has(.et-table-sticky-start) .et-table-card-corners:before{position:sticky;inset-inline-start:0}.et-table-row:has(.et-table-sticky-end) .et-table-card-corners:after{position:sticky;inset-inline-end:0}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:before{background:radial-gradient(circle at 100% 100%,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 0 / 100% var(--_et-table-card-radius) no-repeat,radial-gradient(circle at 100% 0,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 100% / 100% var(--_et-table-card-radius) no-repeat,linear-gradient(var(--_et-table-card-edge),var(--_et-table-card-edge)) 0 0 / 1px 100% no-repeat}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:after{background:radial-gradient(circle at 0 100%,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 0 / 100% var(--_et-table-card-radius) no-repeat,radial-gradient(circle at 0 0,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 100% / 100% var(--_et-table-card-radius) no-repeat,linear-gradient(var(--_et-table-card-edge),var(--_et-table-card-edge)) 100% 0 / 1px 100% no-repeat}.et-table-header-label{display:flex;align-items:center;flex:1;min-inline-size:0;margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none}.et-table-header-label-box{display:flex;align-items:center;gap:4px;min-inline-size:0;padding:4px;margin:-4px;border-radius:4px}.et-table-header-label:where(.et-table-header-label--sortable){cursor:pointer}.et-table-header-label--sortable .et-table-header-label-box{background-color:var(--_et-table-header-label-tint, transparent);transition:background-color .12s var(--ease-out-5, ease)}@media(hover:hover){.et-table-header-label--sortable:hover:not(:disabled){--_et-table-header-label-tint: var(--_et-table-hover-tint)}}.et-table-header-label--sortable:active:not(:disabled){--_et-table-header-label-tint: var(--_et-table-pressed-tint)}.et-table-header-cell:where([data-disabled]) .et-table-header-label{opacity:var(--et-table-opacity-disabled)}.et-table-header-label:where(.et-table-header-label--sortable:disabled){cursor:not-allowed}.et-table-header-cell:where([data-align=center]) .et-table-header-label{justify-content:center}.et-table-header-cell:where([data-align=end]) .et-table-header-label{justify-content:flex-end}.et-table-sort-indicator{flex:none;inline-size:1.15em;block-size:1.15em;transform:translateY(-.045em);color:var(--et-theme-color-primary-solid, currentColor);transition:transform .2s var(--ease-out-5, ease)}.et-table-sort-indicator:where([data-direction=desc]){transform:translateY(-.045em) rotate(180deg)}.et-table-sort-indicator.et-table-sort-indicator--enter{animation:et-table-sort-in .15s ease}.et-table-sort-indicator.et-table-sort-indicator--leave{animation:et-table-sort-in .12s ease reverse forwards}@keyframes et-table-sort-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.et-table-sort-indicator{transition:none}.et-table-sort-indicator.et-table-sort-indicator--enter,.et-table-sort-indicator.et-table-sort-indicator--leave{animation:none}}.et-table-message-row{display:contents}.et-table-empty-cell,.et-table-error-cell{grid-column:1 / -1;position:sticky;inset-inline-start:0;inline-size:var(--_et-table-viewport-inline-size, 100%);padding:32px var(--et-table-cell-padding-inline);color:var(--et-surface-color-muted-solid, CanvasText);text-align:center}.et-table-empty-cell{display:grid;place-content:center;justify-items:center}.et-table-error-cell{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:8px}.et-table-error-icon{flex:none;inline-size:16px;block-size:16px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=error]){gap:6px}.et-table-cell-error-icon{flex:none;inline-size:14px;block-size:14px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=loading]){display:flex}.et-table-busy-bar{grid-column:1 / -1;block-size:2px;margin-block-start:var(--_et-table-busy-margin-block-start);margin-block-end:var(--_et-table-busy-margin-block-end);overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-table-busy-bar.et-table-busy-bar--enter{animation:et-table-busy-fade .15s ease}.et-table-busy-bar.et-table-busy-bar--leave{animation:et-table-busy-fade .25s ease reverse forwards}@keyframes et-table-busy-fade{0%{opacity:0}to{opacity:1}}.et-table-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-table-busy-sweep 1.1s ease-in-out infinite}@keyframes et-table-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media(prefers-reduced-motion:reduce){.et-table-busy-bar:after{inline-size:100%;animation:none}.et-table-busy-bar.et-table-busy-bar--enter,.et-table-busy-bar.et-table-busy-bar--leave{animation:none}}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "directive", type: TableCardSurfaceDirective, selector: "[etTableCardSurface]", inputs: ["etTableCardSurface"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -64113,6 +64161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[attr.data-appearance]': 'appearance()',
                         '[attr.data-density]': 'density()',
                         '[attr.aria-busy]': 'resolvedLoading() ? "true" : null',
+                        '[attr.role]': 'pageStickyHeader() ? "grid" : null',
                         '[class.et-table-host--scrolled-block-start]': 'blockScrollShadows().blockStart',
                         '[class.et-table-host--scrolled-block-end]': 'blockScrollShadows().blockEnd',
                         '[class.et-table-host--scrolled-inline-start]': 'scrollFades().start',
@@ -64120,8 +64169,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[class.et-table-host--header-adornments]': 'headerAdornments().length > 0',
                         '[style.--_et-table-viewport-inline-size.px]': 'viewportInlineSize()',
                         '(scroll)': 'syncScrollState()',
-                    }, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n     methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"grid\">\n  <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n       is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n  @for (headerRow of headerRows(); track $index) {\n    <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n  }\n\n  <div class=\"et-table-header-row\" role=\"row\">\n    <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n         table owns the cell chrome; the feature only supplies what goes inside. -->\n    @for (lead of leadCells(); track lead.key) {\n      <div\n        #leadHeaderCell\n        [class]=\"lead.cellClass\"\n        [class.et-table-sticky-start]=\"lead.sticky\"\n        [style.inset-inline-start.px]=\"lead.offset\"\n        [attr.aria-hidden]=\"lead.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (lead.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n        }\n      </div>\n    }\n    @for (cell of headerCellVms(); track cell.key) {\n      <div\n        #headerCell\n        [attr.data-align]=\"cell.align\"\n        [attr.data-col-key]=\"cell.key\"\n        [attr.data-disabled]=\"cell.disabled || null\"\n        [attr.aria-sort]=\"cell.ariaSort\"\n        [class.et-table-sticky-start]=\"cell.stickyStart\"\n        [class.et-table-sticky-end]=\"cell.stickyEnd\"\n        [style.inset-inline-start.px]=\"cell.offsetStart\"\n        [style.inset-inline-end.px]=\"cell.offsetEnd\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n             one button, and the only sort affordance is the direction arrow, which appears once the\n             column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n        @if (cell.sortable) {\n          <button\n            [attr.aria-label]=\"cell.sortLabel\"\n            [disabled]=\"cell.disabled\"\n            (click)=\"toggleSort(cell.key)\"\n            class=\"et-table-header-label et-table-header-label--sortable\"\n            type=\"button\"\n          >\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n              @if (cell.direction; as direction) {\n                <!-- Flipping direction keeps this element mounted, so the arrow turns over rather than\n                     swapping; only appearing and disappearing are the fade, and only for a sort the user\n                     just asked for (see sortIndicatorEnter). -->\n                <i\n                  [attr.data-direction]=\"direction\"\n                  [animate.enter]=\"sortIndicatorEnter()\"\n                  [animate.leave]=\"sortIndicatorLeave()\"\n                  class=\"et-table-sort-indicator\"\n                  etIcon=\"et-arrow-up\"\n                ></i>\n              }\n            </span>\n          </button>\n        } @else {\n          <span class=\"et-table-header-label\">\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n            </span>\n          </span>\n        }\n\n        <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n             registerHeaderAdornment. Renders nothing when no feature is imported.\n\n             Dropped once the column is covered by a pinned one: an adornment's menu is a portal, so it\n             would go on floating over the pinned column, anchored to a cell nobody can see. Unmounting\n             the trigger is what closes it. -->\n        @if (!cell.obscured && headerAdornments().length) {\n          <div class=\"et-table-header-adornments\">\n            @for (adornment of headerAdornments(); track $index) {\n              <ng-container\n                *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n              />\n            }\n          </div>\n        }\n      </div>\n    }\n    <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n         panel's edge when every column is a rigid width. -->\n    @if (hasFiller()) {\n      <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n    }\n    <!-- Trailing utility columns (a selection column moved to this edge). Same chrome as the leading\n         ones, pinned to the trailing edge instead - see TableLeadColumn.side. -->\n    @for (trail of trailCells(); track trail.key) {\n      <div\n        #trailHeaderCell\n        [class]=\"trail.cellClass\"\n        [class.et-table-sticky-end]=\"trail.sticky\"\n        [style.inset-inline-end.px]=\"trail.offset\"\n        [attr.aria-hidden]=\"trail.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (trail.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n       so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n       table takes no component dependencies, and this is 2px of chrome, not a control. -->\n  @if (showBusyBar()) {\n    <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n         vanishes reads as a flicker rather than as work happening. -->\n    <div\n      class=\"et-table-busy-bar\"\n      animate.enter=\"et-table-busy-bar--enter\"\n      animate.leave=\"et-table-busy-bar--leave\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  @if (hasError()) {\n    <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n    <div class=\"et-table-message-row\" role=\"row\">\n      <div class=\"et-table-error-cell\" role=\"gridcell\" aria-live=\"polite\">\n        @if (errorTemplate(); as template) {\n          <ng-container *ngTemplateOutlet=\"template; context: { $implicit: error() }\" />\n        } @else {\n          <ng-content select=\"[etTableError]\">\n            <i [etProvideColor]=\"errorColorTheme\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n            <span>{{ resolvedLabels().error }}</span>\n          </ng-content>\n        }\n      </div>\n    </div>\n  } @else if (showPlaceholderRows()) {\n    <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n         (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n         than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n    @if (bodyPlaceholder(); as placeholder) {\n      <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n    }\n  } @else {\n    @for (rowVm of bodyRows(); track rowVm.key) {\n      <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n      <div\n        [class]=\"rowVm.classes\"\n        [class.et-table-row--stripe]=\"rowVm.stripe\"\n        [class.et-table-row--last]=\"rowVm.last\"\n        [class.et-table-row--interactive]=\"rowInteractive()\"\n        [class.et-table-row--box]=\"rowBox()\"\n        [class.et-table-row--card]=\"cardRows()\"\n        [class.et-table-row--link]=\"rowVm.href !== null\"\n        [etTableCardSurface]=\"cardRows()\"\n        [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n        (click)=\"activateRow(rowVm.row, $event)\"\n        (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n        (keydown.space)=\"activateRow(rowVm.row, $event)\"\n        class=\"et-table-row\"\n        role=\"row\"\n      >\n        @for (lead of rowVm.leads; track lead.key) {\n          <div\n            [class]=\"lead.cellClass\"\n            [class.et-table-sticky-start]=\"lead.sticky\"\n            [style.inset-inline-start.px]=\"lead.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n            />\n          </div>\n        }\n        @for (cell of rowVm.cells; track cell.key) {\n          <div\n            #bodyCell\n            [attr.data-align]=\"cell.align\"\n            [attr.data-col-key]=\"cell.key\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [attr.data-state]=\"cell.state\"\n            [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n            [class.et-table-cell--interactive]=\"cell.interactive\"\n            [class.et-table-cell--editing]=\"cell.edit\"\n            [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n            [class.et-table-sticky-start]=\"cell.stickyStart\"\n            [class.et-table-sticky-end]=\"cell.stickyEnd\"\n            [style.inset-inline-start.px]=\"cell.offsetStart\"\n            [style.inset-inline-end.px]=\"cell.offsetEnd\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            @if (cell.edit; as edit) {\n              <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n                   editing feature's own context (the draft field). See registerCellEditing. -->\n              <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n            } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n              <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n                   instead of its value; the row around it stays readable. Without one the value stays put\n                   and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n              <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n            } @else {\n              @if (cell.state === 'error') {\n                @if (cellErrorMark(); as mark) {\n                  <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n                       only ships when a table actually wants a tooltip. -->\n                  <ng-container\n                    *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n                  />\n                } @else {\n                  <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n                       as an error, and a provider per errored cell is cheap where one per cell would not\n                       be. The message rides along as `title`, which costs nothing. -->\n                  <i\n                    [etProvideColor]=\"errorColorTheme\"\n                    [attr.title]=\"cell.message\"\n                    [attr.aria-label]=\"cell.message\"\n                    [attr.aria-hidden]=\"cell.message ? null : 'true'\"\n                    class=\"et-table-cell-error-icon\"\n                    etIcon=\"et-triangle-exclamation\"\n                  ></i>\n                }\n              }\n              @if (cell.template; as bodyTemplate) {\n                <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n              }\n            }\n          </div>\n        }\n        @if (hasFiller()) {\n          <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n        @for (trail of rowVm.trails; track trail.key) {\n          <div\n            [class]=\"trail.cellClass\"\n            [class.et-table-sticky-end]=\"trail.sticky\"\n            [style.inset-inline-end.px]=\"trail.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n            />\n          </div>\n        }\n\n        @if (rowVm.href !== null) {\n          <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n               wrapping any content, so the cells stay exactly as a table without links renders them.\n               It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n               resolves to that cell's content, which is the row's identity.\n\n               A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n               therefore be the anchor's containing block, shrinking the row's hit area to that one\n               column. The row box is the containing block that spans every cell. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- the rule's\n               allowList knows `aria-label` but not `aria-labelledby`, which names it just as well. -->\n          <a\n            [attr.href]=\"rowVm.href\"\n            [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n            (click)=\"activateRowLink(rowVm.link, $event)\"\n            class=\"et-table-row-link\"\n          ></a>\n        }\n\n        @if (cardRows()) {\n          <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n      </div>\n\n      <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n           its animation belong to the feature, so a table that never expands carries none of them. -->\n      @if (rowVm.detail; as detail) {\n        <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n      }\n    } @empty {\n      <div class=\"et-table-message-row\" role=\"row\">\n        <div class=\"et-table-empty-cell\" role=\"gridcell\">\n          @if (emptyTemplate(); as template) {\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n          } @else {\n            <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n       already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n       the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n       their place with `position: sticky` for the entire scroll range. -->\n  <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n    <div\n      [style.inset-inline-start.px]=\"fadeInset().start\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n    ></div>\n    <div\n      [style.inset-inline-end.px]=\"fadeInset().end\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n    ></div>\n  </div>\n\n  @if (hasFooter()) {\n    <div class=\"et-table-footer-row\" role=\"row\">\n      @for (lead of leadCells(); track lead.key) {\n        <div\n          [class]=\"lead.cellClass\"\n          [class.et-table-sticky-start]=\"lead.sticky\"\n          [style.inset-inline-start.px]=\"lead.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n      @for (cell of footerCells(); track cell.key) {\n        <div\n          [attr.data-align]=\"cell.align\"\n          [class.et-table-sticky-start]=\"cell.stickyStart\"\n          [class.et-table-sticky-end]=\"cell.stickyEnd\"\n          [style.inset-inline-start.px]=\"cell.offsetStart\"\n          [style.inset-inline-end.px]=\"cell.offsetEnd\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n        >\n          @if (cell.template; as footerTemplate) {\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n          }\n        </div>\n      }\n      @if (hasFiller()) {\n        <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n      @for (trail of trailCells(); track trail.key) {\n        <div\n          [class]=\"trail.cellClass\"\n          [class.et-table-sticky-end]=\"trail.sticky\"\n          [style.inset-inline-end.px]=\"trail.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n     Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n  <div class=\"et-table-footer\">\n    <ng-content select=\"[etTableFooter]\" />\n  </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n     feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n  <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-table-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-header-adornment-size: 2.4rem;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-hover-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-hover-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-row-hover: var(--_et-table-hover-tint);--_et-table-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-pressed-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent);--_et-table-pressed-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-surface) );--_et-table-row-pressed: var(--_et-table-pressed-tint);--_et-table-row-pressed-solid: var(--_et-table-pressed-tint-solid);--_et-table-inert-row-hover: var(--_et-table-hover-tint);--_et-table-inert-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-row-gap-block: 0px;--_et-table-row-paint: transparent;--_et-table-row-corner: 0px;--_et-table-header-gap-block: 0px;--_et-table-cell-rule: 0;--_et-table-sticky-clip: none;--_et-table-busy-margin-block-start: 0px;--_et-table-busy-margin-block-end: -2px;--_et-table-detail-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:10px}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000f}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-cell-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-row-gap-block: var(--et-table-row-gap, 8px);--_et-table-row-corner: var(--et-table-row-radius, 10px);--_et-table-header-gap-block: var(--et-table-row-gap, 8px);--_et-table-sticky-clip: inset(0 -24px);--_et-table-busy-margin-block-start: calc((var(--et-table-row-gap, 8px) + 2px) / -2);--_et-table-busy-margin-block-end: calc((var(--et-table-row-gap, 8px) - 2px) / 2);--_et-table-detail-rule: 0;--_et-table-inert-row-hover: transparent;--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-header-cell.et-table-filler-cell,.et-table-cell.et-table-filler-cell,.et-table-footer-cell.et-table-filler-cell,.et-table-group-cell.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-surface-color-muted-solid, CanvasText);background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-adornments{display:flex;align-items:center;flex:none}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: var(--_et-table-header-adornment-size);--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-host--header-adornments .et-table-header-cell{min-block-size:calc(max(var(--_et-table-header-adornment-size),24px) + 2 * var(--et-table-cell-padding-block) + 1px)}.et-table-cell{border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-header-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-start)}.et-table-header-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-end)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-footer-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-start)}.et-table-footer-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-header-cell,.et-table-cell{border-inline-end:var(--_et-table-cell-rule)}.et-table-header-row .et-table-header-cell:last-child,.et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-sticky-start,.et-table-sticky-end{position:sticky;z-index:1}.et-table-sticky-start{box-shadow:var(--_et-table-edge-start)}.et-table-sticky-end{box-shadow:var(--_et-table-edge-end)}.et-table-sticky-start:has(~.et-table-sticky-start){--_et-table-edge-start: 0 0 transparent}.et-table-sticky-end~.et-table-sticky-end{--_et-table-edge-end: 0 0 transparent}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--_et-table-row-surface)}.et-table-row--stripe .et-table-cell.et-table-sticky-start,.et-table-row--stripe .et-table-cell.et-table-sticky-end{background:var(--_et-table-stripe-solid)}@media(hover:hover){.et-table-row:hover .et-table-cell.et-table-sticky-start,.et-table-row:hover .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-hover-solid)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-start,.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-pressed-solid)}.et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end),.et-table-footer-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:3}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell{background:var(--_et-table-row-pressed)}.et-table-row--box{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;position:relative;z-index:0}.et-table-row-link{position:absolute;inset:0;z-index:2;cursor:pointer}.et-table-header-label:focus-visible,.et-table-expander:focus-visible,.et-table-cell:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-table-header-label{border-radius:4px}.et-table-row-link:focus-visible{outline:none}.et-table-row--box:has(.et-table-row-link:focus-visible):before{content:\"\";position:absolute;inset:4px;z-index:5;border:2px solid var(--et-theme-color-primary-solid, currentColor);border-radius:max(0px,calc(var(--_et-table-row-corner, 0px) - 4px));pointer-events:none}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive,.et-table-cell--editing){z-index:3}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive,.et-table-cell--editing):not(.et-table-sticky-start,.et-table-sticky-end){position:relative}.et-table-row{margin-block-end:var(--_et-table-row-gap-block);background:var(--_et-table-row-paint);border-radius:var(--_et-table-row-corner)}.et-table-row--card{--_et-table-row-paint: var(--et-surface-background-solid, Canvas);--_et-table-row-surface: var(--_et-table-row-paint);--_et-table-stripe-solid: var(--_et-table-row-paint);--_et-table-row-hover-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-paint) );--_et-table-row-pressed-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-paint) );--_et-table-inert-row-hover-solid: var(--_et-table-row-paint);color:var(--et-surface-color-solid, CanvasText)}.et-table-row--card:where(.et-table-row--card-tint){--_et-table-row-paint: var(--_et-table-band)}.et-table-host:where([data-appearance=cards]) .et-table-row--box:after{content:\"\";position:absolute;inset:0;z-index:4;border:1px solid var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / .3)));border-radius:inherit;pointer-events:none}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){clip-path:var(--_et-table-sticky-clip)}.et-table-header-cell{margin-block-end:var(--_et-table-header-gap-block)}.et-table-row:not(.et-table-row--interactive,.et-table-row--link){--_et-table-row-hover: var(--_et-table-inert-row-hover);--_et-table-row-hover-solid: var(--_et-table-inert-row-hover-solid)}.et-table-row>:first-child{border-start-start-radius:inherit;border-end-start-radius:inherit}.et-table-row>.et-table-cell:nth-last-child(1 of.et-table-cell){border-start-end-radius:inherit;border-end-end-radius:inherit}.et-table-row-link{border-radius:var(--_et-table-row-corner)}.et-table-card-corners{position:absolute;inset:0;z-index:5;display:flex;justify-content:space-between;pointer-events:none}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:before,.et-table-host:where([data-appearance=cards]) .et-table-card-corners:after{--_et-table-card-radius: var(--et-table-row-radius, 10px);--_et-table-card-edge: var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / .3)));content:\"\";flex:0 0 auto;inline-size:var(--_et-table-card-radius)}.et-table-row:has(.et-table-sticky-start) .et-table-card-corners:before{position:sticky;inset-inline-start:0}.et-table-row:has(.et-table-sticky-end) .et-table-card-corners:after{position:sticky;inset-inline-end:0}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:before{background:radial-gradient(circle at 100% 100%,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 0 / 100% var(--_et-table-card-radius) no-repeat,radial-gradient(circle at 100% 0,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 100% / 100% var(--_et-table-card-radius) no-repeat,linear-gradient(var(--_et-table-card-edge),var(--_et-table-card-edge)) 0 0 / 1px 100% no-repeat}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:after{background:radial-gradient(circle at 0 100%,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 0 / 100% var(--_et-table-card-radius) no-repeat,radial-gradient(circle at 0 0,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 100% / 100% var(--_et-table-card-radius) no-repeat,linear-gradient(var(--_et-table-card-edge),var(--_et-table-card-edge)) 100% 0 / 1px 100% no-repeat}.et-table-header-label{display:flex;align-items:center;flex:1;min-inline-size:0;margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none}.et-table-header-label-box{display:flex;align-items:center;gap:4px;min-inline-size:0;padding:4px;margin:-4px;border-radius:4px}.et-table-header-label:where(.et-table-header-label--sortable){cursor:pointer}.et-table-header-label--sortable .et-table-header-label-box{background-color:var(--_et-table-header-label-tint, transparent);transition:background-color .12s var(--ease-out-5, ease)}@media(hover:hover){.et-table-header-label--sortable:hover:not(:disabled){--_et-table-header-label-tint: var(--_et-table-hover-tint)}}.et-table-header-label--sortable:active:not(:disabled){--_et-table-header-label-tint: var(--_et-table-pressed-tint)}.et-table-header-cell:where([data-disabled]) .et-table-header-label{opacity:var(--et-table-opacity-disabled)}.et-table-header-label:where(.et-table-header-label--sortable:disabled){cursor:not-allowed}.et-table-header-cell:where([data-align=center]) .et-table-header-label{justify-content:center}.et-table-header-cell:where([data-align=end]) .et-table-header-label{justify-content:flex-end}.et-table-sort-indicator{flex:none;inline-size:1.15em;block-size:1.15em;transform:translateY(-.045em);color:var(--et-theme-color-primary-solid, currentColor);transition:transform .2s var(--ease-out-5, ease)}.et-table-sort-indicator:where([data-direction=desc]){transform:translateY(-.045em) rotate(180deg)}.et-table-sort-indicator.et-table-sort-indicator--enter{animation:et-table-sort-in .15s ease}.et-table-sort-indicator.et-table-sort-indicator--leave{animation:et-table-sort-in .12s ease reverse forwards}@keyframes et-table-sort-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.et-table-sort-indicator{transition:none}.et-table-sort-indicator.et-table-sort-indicator--enter,.et-table-sort-indicator.et-table-sort-indicator--leave{animation:none}}.et-table-message-row{display:contents}.et-table-empty-cell,.et-table-error-cell{grid-column:1 / -1;position:sticky;inset-inline-start:0;inline-size:var(--_et-table-viewport-inline-size, 100%);padding:32px var(--et-table-cell-padding-inline);color:var(--et-surface-color-muted-solid, CanvasText);text-align:center}.et-table-empty-cell{display:grid;place-content:center;justify-items:center}.et-table-error-cell{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:8px}.et-table-error-icon{flex:none;inline-size:16px;block-size:16px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=error]){gap:6px}.et-table-cell-error-icon{flex:none;inline-size:14px;block-size:14px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=loading]){display:flex}.et-table-busy-bar{grid-column:1 / -1;block-size:2px;margin-block-start:var(--_et-table-busy-margin-block-start);margin-block-end:var(--_et-table-busy-margin-block-end);overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-table-busy-bar.et-table-busy-bar--enter{animation:et-table-busy-fade .15s ease}.et-table-busy-bar.et-table-busy-bar--leave{animation:et-table-busy-fade .25s ease reverse forwards}@keyframes et-table-busy-fade{0%{opacity:0}to{opacity:1}}.et-table-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-table-busy-sweep 1.1s ease-in-out infinite}@keyframes et-table-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media(prefers-reduced-motion:reduce){.et-table-busy-bar:after{inline-size:100%;animation:none}.et-table-busy-bar.et-table-busy-bar--enter,.et-table-busy-bar.et-table-busy-bar--leave{animation:none}}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], rowsSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsSource", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], errorTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTemplate", required: false }] }], cellState: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellState", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], multiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSort", required: false }] }], sortMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortMode", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], expandedRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRowTemplate", required: false }] }], rowInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowInteractive", required: false }] }], rowLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLink", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TableFooterDirective), { isSignal: true }] }], gridRef: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }], headerCells: [{ type: i0.ViewChildren, args: ['headerCell', { isSignal: true }] }], bodyCells: [{ type: i0.ViewChildren, args: ['bodyCell', { isSignal: true }] }], leadHeaderCells: [{ type: i0.ViewChildren, args: ['leadHeaderCell', { isSignal: true }] }], trailHeaderCells: [{ type: i0.ViewChildren, args: ['trailHeaderCell', { isSignal: true }] }] } });
+                    }, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n     methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<ng-template #headerContent>\n  <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n       is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n  @for (headerRow of headerRows(); track $index) {\n    <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n  }\n\n  <div class=\"et-table-header-row\" role=\"row\">\n    <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n         table owns the cell chrome; the feature only supplies what goes inside. -->\n    @for (lead of leadCells(); track lead.key) {\n      <div\n        #leadHeaderCell\n        [class]=\"lead.cellClass\"\n        [class.et-table-sticky-start]=\"lead.sticky\"\n        [style.inset-inline-start.px]=\"pageStickyHeader() ? null : lead.offset\"\n        [attr.aria-hidden]=\"lead.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (lead.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n        }\n      </div>\n    }\n    @for (cell of headerCellVms(); track cell.key) {\n      <div\n        #headerCell\n        [attr.data-align]=\"cell.align\"\n        [attr.data-col-key]=\"cell.key\"\n        [attr.data-disabled]=\"cell.disabled || null\"\n        [attr.aria-sort]=\"cell.ariaSort\"\n        [class.et-table-sticky-start]=\"cell.stickyStart\"\n        [class.et-table-sticky-end]=\"cell.stickyEnd\"\n        [style.inset-inline-start.px]=\"pageStickyHeader() ? null : cell.offsetStart\"\n        [style.inset-inline-end.px]=\"pageStickyHeader() ? null : cell.offsetEnd\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n             one button, and the only sort affordance is the direction arrow, which appears once the\n             column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n        @if (cell.sortable) {\n          <button\n            [attr.aria-label]=\"cell.sortLabel\"\n            [disabled]=\"cell.disabled\"\n            (click)=\"toggleSort(cell.key)\"\n            class=\"et-table-header-label et-table-header-label--sortable\"\n            type=\"button\"\n          >\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n              @if (cell.direction; as direction) {\n                <!-- Flipping direction keeps this element mounted, so the arrow turns over rather than\n                     swapping; only appearing and disappearing are the fade, and only for a sort the user\n                     just asked for (see sortIndicatorEnter). -->\n                <i\n                  [attr.data-direction]=\"direction\"\n                  [animate.enter]=\"sortIndicatorEnter()\"\n                  [animate.leave]=\"sortIndicatorLeave()\"\n                  class=\"et-table-sort-indicator\"\n                  etIcon=\"et-arrow-up\"\n                ></i>\n              }\n            </span>\n          </button>\n        } @else {\n          <span class=\"et-table-header-label\">\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n            </span>\n          </span>\n        }\n\n        <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n             registerHeaderAdornment. Renders nothing when no feature is imported.\n\n             Dropped once the column is covered by a pinned one: an adornment's menu is a portal, so it\n             would go on floating over the pinned column, anchored to a cell nobody can see. Unmounting\n             the trigger is what closes it. -->\n        @if (!cell.obscured && headerAdornments().length) {\n          <div class=\"et-table-header-adornments\">\n            @for (adornment of headerAdornments(); track $index) {\n              <ng-container\n                *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n              />\n            }\n          </div>\n        }\n      </div>\n    }\n    <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n         panel's edge when every column is a rigid width. -->\n    @if (hasFiller()) {\n      <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n    }\n    <!-- Trailing utility columns (a selection column moved to this edge). Same chrome as the leading\n         ones, pinned to the trailing edge instead - see TableLeadColumn.side. -->\n    @for (trail of trailCells(); track trail.key) {\n      <div\n        #trailHeaderCell\n        [class]=\"trail.cellClass\"\n        [class.et-table-sticky-end]=\"trail.sticky\"\n        [style.inset-inline-end.px]=\"pageStickyHeader() ? null : trail.offset\"\n        [attr.aria-hidden]=\"trail.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (trail.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #bodyContent>\n  <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n       so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n       table takes no component dependencies, and this is 2px of chrome, not a control. -->\n  @if (showBusyBar()) {\n    <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n         vanishes reads as a flicker rather than as work happening. -->\n    <div\n      class=\"et-table-busy-bar\"\n      animate.enter=\"et-table-busy-bar--enter\"\n      animate.leave=\"et-table-busy-bar--leave\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  @if (hasError()) {\n    <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n    <div class=\"et-table-message-row\" role=\"row\">\n      <div class=\"et-table-error-cell\" role=\"gridcell\" aria-live=\"polite\">\n        @if (errorTemplate(); as template) {\n          <ng-container *ngTemplateOutlet=\"template; context: { $implicit: error() }\" />\n        } @else {\n          <ng-content select=\"[etTableError]\">\n            <i [etProvideColor]=\"errorColorTheme\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n            <span>{{ resolvedLabels().error }}</span>\n          </ng-content>\n        }\n      </div>\n    </div>\n  } @else if (showPlaceholderRows()) {\n    <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n         (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n         than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n    @if (bodyPlaceholder(); as placeholder) {\n      <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n    }\n  } @else {\n    @for (rowVm of bodyRows(); track rowVm.key) {\n      <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n      <div\n        [class]=\"rowVm.classes\"\n        [class.et-table-row--stripe]=\"rowVm.stripe\"\n        [class.et-table-row--last]=\"rowVm.last\"\n        [class.et-table-row--interactive]=\"rowInteractive()\"\n        [class.et-table-row--box]=\"rowBox()\"\n        [class.et-table-row--card]=\"cardRows()\"\n        [class.et-table-row--link]=\"rowVm.href !== null\"\n        [etTableCardSurface]=\"cardRows()\"\n        [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n        (click)=\"activateRow(rowVm.row, $event)\"\n        (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n        (keydown.space)=\"activateRow(rowVm.row, $event)\"\n        class=\"et-table-row\"\n        role=\"row\"\n      >\n        @for (lead of rowVm.leads; track lead.key) {\n          <div\n            [class]=\"lead.cellClass\"\n            [class.et-table-sticky-start]=\"lead.sticky\"\n            [style.inset-inline-start.px]=\"lead.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n            />\n          </div>\n        }\n        @for (cell of rowVm.cells; track cell.key) {\n          <div\n            #bodyCell\n            [attr.data-align]=\"cell.align\"\n            [attr.data-col-key]=\"cell.key\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [attr.data-state]=\"cell.state\"\n            [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n            [class.et-table-cell--interactive]=\"cell.interactive\"\n            [class.et-table-cell--editing]=\"cell.edit\"\n            [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n            [class.et-table-sticky-start]=\"cell.stickyStart\"\n            [class.et-table-sticky-end]=\"cell.stickyEnd\"\n            [style.inset-inline-start.px]=\"cell.offsetStart\"\n            [style.inset-inline-end.px]=\"cell.offsetEnd\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            @if (cell.edit; as edit) {\n              <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n                   editing feature's own context (the draft field). See registerCellEditing. -->\n              <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n            } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n              <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n                   instead of its value; the row around it stays readable. Without one the value stays put\n                   and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n              <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n            } @else {\n              @if (cell.state === 'error') {\n                @if (cellErrorMark(); as mark) {\n                  <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n                       only ships when a table actually wants a tooltip. -->\n                  <ng-container\n                    *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n                  />\n                } @else {\n                  <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n                       as an error, and a provider per errored cell is cheap where one per cell would not\n                       be. The message rides along as `title`, which costs nothing. -->\n                  <i\n                    [etProvideColor]=\"errorColorTheme\"\n                    [attr.title]=\"cell.message\"\n                    [attr.aria-label]=\"cell.message\"\n                    [attr.aria-hidden]=\"cell.message ? null : 'true'\"\n                    class=\"et-table-cell-error-icon\"\n                    etIcon=\"et-triangle-exclamation\"\n                  ></i>\n                }\n              }\n              @if (cell.template; as bodyTemplate) {\n                <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n              }\n            }\n          </div>\n        }\n        @if (hasFiller()) {\n          <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n        @for (trail of rowVm.trails; track trail.key) {\n          <div\n            [class]=\"trail.cellClass\"\n            [class.et-table-sticky-end]=\"trail.sticky\"\n            [style.inset-inline-end.px]=\"trail.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n            />\n          </div>\n        }\n\n        @if (rowVm.href !== null) {\n          <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n               wrapping any content, so the cells stay exactly as a table without links renders them.\n               It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n               resolves to that cell's content, which is the row's identity.\n\n               A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n               therefore be the anchor's containing block, shrinking the row's hit area to that one\n               column. The row box is the containing block that spans every cell. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- the rule's\n               allowList knows `aria-label` but not `aria-labelledby`, which names it just as well. -->\n          <a\n            [attr.href]=\"rowVm.href\"\n            [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n            (click)=\"activateRowLink(rowVm.link, $event)\"\n            class=\"et-table-row-link\"\n          ></a>\n        }\n\n        @if (cardRows()) {\n          <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n      </div>\n\n      <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n           its animation belong to the feature, so a table that never expands carries none of them. -->\n      @if (rowVm.detail; as detail) {\n        <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n      }\n    } @empty {\n      <div class=\"et-table-message-row\" role=\"row\">\n        <div class=\"et-table-empty-cell\" role=\"gridcell\">\n          @if (emptyTemplate(); as template) {\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n          } @else {\n            <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n       already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n       the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n       their place with `position: sticky` for the entire scroll range. -->\n  <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n    <div\n      [style.inset-inline-start.px]=\"fadeInset().start\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n    ></div>\n    <div\n      [style.inset-inline-end.px]=\"fadeInset().end\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n    ></div>\n  </div>\n\n  @if (hasFooter()) {\n    <div class=\"et-table-footer-row\" role=\"row\">\n      @for (lead of leadCells(); track lead.key) {\n        <div\n          [class]=\"lead.cellClass\"\n          [class.et-table-sticky-start]=\"lead.sticky\"\n          [style.inset-inline-start.px]=\"lead.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n      @for (cell of footerCells(); track cell.key) {\n        <div\n          [attr.data-align]=\"cell.align\"\n          [class.et-table-sticky-start]=\"cell.stickyStart\"\n          [class.et-table-sticky-end]=\"cell.stickyEnd\"\n          [style.inset-inline-start.px]=\"cell.offsetStart\"\n          [style.inset-inline-end.px]=\"cell.offsetEnd\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n        >\n          @if (cell.template; as footerTemplate) {\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n          }\n        </div>\n      }\n      @if (hasFiller()) {\n        <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n      @for (trail of trailCells(); track trail.key) {\n        <div\n          [class]=\"trail.cellClass\"\n          [class.et-table-sticky-end]=\"trail.sticky\"\n          [style.inset-inline-end.px]=\"trail.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n    </div>\n  }\n</ng-template>\n\n@if (pageStickyHeader()) {\n  <div class=\"et-table-header-strip\">\n    <div\n      #headerGrid\n      [style.grid-template-columns]=\"pageHeaderColumns()\"\n      class=\"et-table et-table-header\"\n      role=\"rowgroup\"\n    >\n      <ng-container *ngTemplateOutlet=\"headerContent\" />\n    </div>\n  </div>\n  <div #scroller (scroll)=\"syncScrollState()\" class=\"et-table-scroller\">\n    <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"rowgroup\">\n      <ng-container *ngTemplateOutlet=\"bodyContent\" />\n    </div>\n  </div>\n} @else {\n  <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"grid\">\n    <ng-container *ngTemplateOutlet=\"headerContent\" />\n    <ng-container *ngTemplateOutlet=\"bodyContent\" />\n  </div>\n}\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n     Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n  <div class=\"et-table-footer\">\n    <ng-content select=\"[etTableFooter]\" />\n  </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n     feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n  <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-table-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-header-adornment-size: 2.4rem;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-hover-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-hover-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-row-hover: var(--_et-table-hover-tint);--_et-table-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-pressed-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent);--_et-table-pressed-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-surface) );--_et-table-row-pressed: var(--_et-table-pressed-tint);--_et-table-row-pressed-solid: var(--_et-table-pressed-tint-solid);--_et-table-inert-row-hover: var(--_et-table-hover-tint);--_et-table-inert-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-row-gap-block: 0px;--_et-table-row-paint: transparent;--_et-table-row-corner: 0px;--_et-table-header-gap-block: 0px;--_et-table-cell-rule: 0;--_et-table-sticky-clip: none;--_et-table-busy-margin-block-start: 0px;--_et-table-busy-margin-block-end: -2px;--_et-table-detail-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:10px}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000f}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-cell-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-row-gap-block: var(--et-table-row-gap, 8px);--_et-table-row-corner: var(--et-table-row-radius, 10px);--_et-table-header-gap-block: var(--et-table-row-gap, 8px);--_et-table-sticky-clip: inset(0 -24px);--_et-table-busy-margin-block-start: calc((var(--et-table-row-gap, 8px) + 2px) / -2);--_et-table-busy-margin-block-end: calc((var(--et-table-row-gap, 8px) - 2px) / 2);--_et-table-detail-rule: 0;--_et-table-inert-row-hover: transparent;--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-header-cell.et-table-filler-cell,.et-table-cell.et-table-filler-cell,.et-table-footer-cell.et-table-filler-cell,.et-table-group-cell.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-surface-color-muted-solid, CanvasText);background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-adornments{display:flex;align-items:center;flex:none}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: var(--_et-table-header-adornment-size);--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-host--header-adornments .et-table-header-cell{min-block-size:calc(max(var(--_et-table-header-adornment-size),24px) + 2 * var(--et-table-cell-padding-block) + 1px)}.et-table-cell{border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-header-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-start)}.et-table-header-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-end)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-footer-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-start)}.et-table-footer-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-header-cell,.et-table-cell{border-inline-end:var(--_et-table-cell-rule)}.et-table-header-row .et-table-header-cell:last-child,.et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-sticky-start,.et-table-sticky-end{position:sticky;z-index:1}.et-table-sticky-start{box-shadow:var(--_et-table-edge-start)}.et-table-sticky-end{box-shadow:var(--_et-table-edge-end)}.et-table-sticky-start:has(~.et-table-sticky-start){--_et-table-edge-start: 0 0 transparent}.et-table-sticky-end~.et-table-sticky-end{--_et-table-edge-end: 0 0 transparent}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--_et-table-row-surface)}.et-table-row--stripe .et-table-cell.et-table-sticky-start,.et-table-row--stripe .et-table-cell.et-table-sticky-end{background:var(--_et-table-stripe-solid)}@media(hover:hover){.et-table-row:hover .et-table-cell.et-table-sticky-start,.et-table-row:hover .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-hover-solid)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-start,.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-pressed-solid)}.et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end),.et-table-footer-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:3}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell{background:var(--_et-table-row-pressed)}.et-table-row--box{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;position:relative;z-index:0}.et-table-row-link{position:absolute;inset:0;z-index:2;cursor:pointer}.et-table-header-label:focus-visible,.et-table-expander:focus-visible,.et-table-cell:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-table-header-label{border-radius:4px}.et-table-row-link:focus-visible{outline:none}.et-table-row--box:has(.et-table-row-link:focus-visible):before{content:\"\";position:absolute;inset:4px;z-index:5;border:2px solid var(--et-theme-color-primary-solid, currentColor);border-radius:max(0px,calc(var(--_et-table-row-corner, 0px) - 4px));pointer-events:none}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive,.et-table-cell--editing){z-index:3}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive,.et-table-cell--editing):not(.et-table-sticky-start,.et-table-sticky-end){position:relative}.et-table-row{margin-block-end:var(--_et-table-row-gap-block);background:var(--_et-table-row-paint);border-radius:var(--_et-table-row-corner)}.et-table-row--card{--_et-table-row-paint: var(--et-surface-background-solid, Canvas);--_et-table-row-surface: var(--_et-table-row-paint);--_et-table-stripe-solid: var(--_et-table-row-paint);--_et-table-row-hover-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-paint) );--_et-table-row-pressed-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-paint) );--_et-table-inert-row-hover-solid: var(--_et-table-row-paint);color:var(--et-surface-color-solid, CanvasText)}.et-table-row--card:where(.et-table-row--card-tint){--_et-table-row-paint: var(--_et-table-band)}.et-table-host:where([data-appearance=cards]) .et-table-row--box:after{content:\"\";position:absolute;inset:0;z-index:4;border:1px solid var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / .3)));border-radius:inherit;pointer-events:none}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){clip-path:var(--_et-table-sticky-clip)}.et-table-header-cell{margin-block-end:var(--_et-table-header-gap-block)}.et-table-row:not(.et-table-row--interactive,.et-table-row--link){--_et-table-row-hover: var(--_et-table-inert-row-hover);--_et-table-row-hover-solid: var(--_et-table-inert-row-hover-solid)}.et-table-row>:first-child{border-start-start-radius:inherit;border-end-start-radius:inherit}.et-table-row>.et-table-cell:nth-last-child(1 of.et-table-cell){border-start-end-radius:inherit;border-end-end-radius:inherit}.et-table-row-link{border-radius:var(--_et-table-row-corner)}.et-table-card-corners{position:absolute;inset:0;z-index:5;display:flex;justify-content:space-between;pointer-events:none}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:before,.et-table-host:where([data-appearance=cards]) .et-table-card-corners:after{--_et-table-card-radius: var(--et-table-row-radius, 10px);--_et-table-card-edge: var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / .3)));content:\"\";flex:0 0 auto;inline-size:var(--_et-table-card-radius)}.et-table-row:has(.et-table-sticky-start) .et-table-card-corners:before{position:sticky;inset-inline-start:0}.et-table-row:has(.et-table-sticky-end) .et-table-card-corners:after{position:sticky;inset-inline-end:0}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:before{background:radial-gradient(circle at 100% 100%,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 0 / 100% var(--_et-table-card-radius) no-repeat,radial-gradient(circle at 100% 0,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 100% / 100% var(--_et-table-card-radius) no-repeat,linear-gradient(var(--_et-table-card-edge),var(--_et-table-card-edge)) 0 0 / 1px 100% no-repeat}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:after{background:radial-gradient(circle at 0 100%,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 0 / 100% var(--_et-table-card-radius) no-repeat,radial-gradient(circle at 0 0,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 100% / 100% var(--_et-table-card-radius) no-repeat,linear-gradient(var(--_et-table-card-edge),var(--_et-table-card-edge)) 100% 0 / 1px 100% no-repeat}.et-table-header-label{display:flex;align-items:center;flex:1;min-inline-size:0;margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none}.et-table-header-label-box{display:flex;align-items:center;gap:4px;min-inline-size:0;padding:4px;margin:-4px;border-radius:4px}.et-table-header-label:where(.et-table-header-label--sortable){cursor:pointer}.et-table-header-label--sortable .et-table-header-label-box{background-color:var(--_et-table-header-label-tint, transparent);transition:background-color .12s var(--ease-out-5, ease)}@media(hover:hover){.et-table-header-label--sortable:hover:not(:disabled){--_et-table-header-label-tint: var(--_et-table-hover-tint)}}.et-table-header-label--sortable:active:not(:disabled){--_et-table-header-label-tint: var(--_et-table-pressed-tint)}.et-table-header-cell:where([data-disabled]) .et-table-header-label{opacity:var(--et-table-opacity-disabled)}.et-table-header-label:where(.et-table-header-label--sortable:disabled){cursor:not-allowed}.et-table-header-cell:where([data-align=center]) .et-table-header-label{justify-content:center}.et-table-header-cell:where([data-align=end]) .et-table-header-label{justify-content:flex-end}.et-table-sort-indicator{flex:none;inline-size:1.15em;block-size:1.15em;transform:translateY(-.045em);color:var(--et-theme-color-primary-solid, currentColor);transition:transform .2s var(--ease-out-5, ease)}.et-table-sort-indicator:where([data-direction=desc]){transform:translateY(-.045em) rotate(180deg)}.et-table-sort-indicator.et-table-sort-indicator--enter{animation:et-table-sort-in .15s ease}.et-table-sort-indicator.et-table-sort-indicator--leave{animation:et-table-sort-in .12s ease reverse forwards}@keyframes et-table-sort-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.et-table-sort-indicator{transition:none}.et-table-sort-indicator.et-table-sort-indicator--enter,.et-table-sort-indicator.et-table-sort-indicator--leave{animation:none}}.et-table-message-row{display:contents}.et-table-empty-cell,.et-table-error-cell{grid-column:1 / -1;position:sticky;inset-inline-start:0;inline-size:var(--_et-table-viewport-inline-size, 100%);padding:32px var(--et-table-cell-padding-inline);color:var(--et-surface-color-muted-solid, CanvasText);text-align:center}.et-table-empty-cell{display:grid;place-content:center;justify-items:center}.et-table-error-cell{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:8px}.et-table-error-icon{flex:none;inline-size:16px;block-size:16px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=error]){gap:6px}.et-table-cell-error-icon{flex:none;inline-size:14px;block-size:14px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=loading]){display:flex}.et-table-busy-bar{grid-column:1 / -1;block-size:2px;margin-block-start:var(--_et-table-busy-margin-block-start);margin-block-end:var(--_et-table-busy-margin-block-end);overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-table-busy-bar.et-table-busy-bar--enter{animation:et-table-busy-fade .15s ease}.et-table-busy-bar.et-table-busy-bar--leave{animation:et-table-busy-fade .25s ease reverse forwards}@keyframes et-table-busy-fade{0%{opacity:0}to{opacity:1}}.et-table-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-table-busy-sweep 1.1s ease-in-out infinite}@keyframes et-table-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media(prefers-reduced-motion:reduce){.et-table-busy-bar:after{inline-size:100%;animation:none}.et-table-busy-bar.et-table-busy-bar--enter,.et-table-busy-bar.et-table-busy-bar--leave{animation:none}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], rowsSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsSource", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], errorTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTemplate", required: false }] }], cellState: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellState", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], multiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSort", required: false }] }], sortMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortMode", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], expandedRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRowTemplate", required: false }] }], rowInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowInteractive", required: false }] }], rowLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLink", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TableFooterDirective), { isSignal: true }] }], gridRef: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }], headerGridRef: [{ type: i0.ViewChild, args: ['headerGrid', { isSignal: true }] }], scrollerRef: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }], headerCells: [{ type: i0.ViewChildren, args: ['headerCell', { isSignal: true }] }], bodyCells: [{ type: i0.ViewChildren, args: ['bodyCell', { isSignal: true }] }], leadHeaderCells: [{ type: i0.ViewChildren, args: ['leadHeaderCell', { isSignal: true }] }], trailHeaderCells: [{ type: i0.ViewChildren, args: ['trailHeaderCell', { isSignal: true }] }] } });
 /**
  * Opt-in persistence for a table's setup - column order, visibility, widths, sort, filters, expanded
@@ -64824,9 +64873,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * the table must not pan instead: dragging in a sub table would scroll the list under it. One that fits
  * its content scrolls nothing, so it is left to the table.
  */
-const hasOwnScroller = (target, host) => {
+const hasOwnScroller = ({ target, host, tableScroller, }) => {
     let element = target instanceof Element ? target : null;
-    while (element !== null && element !== host) {
+    while (element !== null && element !== host && element !== tableScroller) {
         const style = getComputedStyle(element);
         const scrollsInline = /^(auto|scroll)$/.test(style.overflowX) && element.scrollWidth > element.clientWidth;
         const scrollsBlock = /^(auto|scroll)$/.test(style.overflowY) && element.scrollHeight > element.clientHeight;
@@ -64860,7 +64909,6 @@ const isTextGesture = (target) => target instanceof HTMLInputElement ||
 class TableDragScrollDirective {
     constructor() {
         this.table = injectTableFeatureHost('etTableDragScroll');
-        // The feature is a directive on the table, so its host *is* the table's scroll container.
         this.elementRef = inject(ElementRef);
         this.destroyRef = inject(DestroyRef);
         this.injector = inject(Injector);
@@ -64887,8 +64935,8 @@ class TableDragScrollDirective {
         });
     }
     syncScrollable() {
-        const host = this.elementRef.nativeElement;
-        const scrollable = this.enabled() && (host.scrollWidth > host.clientWidth || host.scrollHeight > host.clientHeight);
+        const scroller = this.table.scrollElement();
+        const scrollable = this.enabled() && (scroller.scrollWidth > scroller.clientWidth || scroller.scrollHeight > scroller.clientHeight);
         if (scrollable !== this.scrollable())
             this.scrollable.set(scrollable);
     }
@@ -64909,10 +64957,11 @@ class TableDragScrollDirective {
         if (!this.scrollable() || isTextGesture(event.target))
             return;
         const host = this.elementRef.nativeElement;
-        if (hasOwnScroller(event.target, host))
+        const scroller = this.table.scrollElement();
+        if (hasOwnScroller({ target: event.target, host, tableScroller: scroller }))
             return;
-        const startLeft = host.scrollLeft;
-        const startTop = host.scrollTop;
+        const startLeft = scroller.scrollLeft;
+        const startTop = scroller.scrollTop;
         dragGestureFrom(event, host)
             .pipe(
         // Column reorder starts from this same pointerdown and claims the gesture in that handler, so
@@ -64927,8 +64976,8 @@ class TableDragScrollDirective {
                 this.table.claimPointerGesture(event, 'etTableDragScroll');
             }
             if (gesture.type === 'move') {
-                host.scrollLeft = startLeft - gesture.data.totalDx;
-                host.scrollTop = startTop - gesture.data.totalDy;
+                scroller.scrollLeft = startLeft - gesture.data.totalDx;
+                scroller.scrollTop = startTop - gesture.data.totalDy;
             }
             if (gesture.type === 'end' || gesture.type === 'cancelled')
                 this.swallowNextClick();
@@ -66046,53 +66095,34 @@ const injectHostTable = () => {
 };
 /**
- * The travelling header row, as a styles-only component mounted by `etTablePageStickyHeader` - see
+ * The split page-sticky header layout, as a styles-only component mounted by `etTablePageStickyHeader` - see
  * `TableDragScrollStylesComponent` for the same pattern.
  *
  * @internal
  */
 class TablePageStickyHeaderStylesComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TablePageStickyHeaderStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: TablePageStickyHeaderStylesComponent, isStandalone: true, selector: "et-table-page-sticky-header-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-table-sticky-header-offset{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-page-header-travel{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-page-header-from{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-page-header-to{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@keyframes et-table-page-header-travel{to{transform:translateY(var(--_et-table-page-header-travel))}}@supports (animation-timeline: scroll()){.et-table-host--page-sticky-header .et-table-header-cell{z-index:4;animation:et-table-page-header-travel linear both;animation-timeline:scroll(root block);animation-range:var(--_et-table-page-header-from) var(--_et-table-page-header-to)}.et-table-host--page-sticky-header .et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:6}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: TablePageStickyHeaderStylesComponent, isStandalone: true, selector: "et-table-page-sticky-header-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-table-sticky-header-offset{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-inline-scroll{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-inline-max-scroll{syntax: \"<length>\"; inherits: true; initial-value: 0px;}.et-table-host--page-sticky-header{grid-template-rows:none;overflow:visible;position:relative}.et-table-header-strip{position:sticky;inset-block-start:var(--et-table-sticky-header-offset);min-inline-size:0;overflow:clip;z-index:4}.et-table-header{transform:translate(calc(-1 * var(--_et-table-inline-scroll)))}.et-table-header .et-table-header-cell{position:relative;inset-block-start:auto;margin-block-end:0}.et-table-scroller{padding-block-start:var(--_et-table-header-gap-block);overflow-x:auto;scrollbar-width:inherit}.et-table-header .et-table-header-cell.et-table-sticky-start{transform:translate(var(--_et-table-inline-scroll))}.et-table-header .et-table-header-cell.et-table-sticky-end{transform:translate(calc(var(--_et-table-inline-scroll) - var(--_et-table-inline-max-scroll)))}.et-table-host--page-sticky-header:dir(rtl) .et-table-header .et-table-header-cell.et-table-sticky-end{transform:translate(calc(var(--_et-table-inline-scroll) + var(--_et-table-inline-max-scroll)))}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TablePageStickyHeaderStylesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'et-table-page-sticky-header-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-table-sticky-header-offset{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-page-header-travel{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-page-header-from{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-page-header-to{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@keyframes et-table-page-header-travel{to{transform:translateY(var(--_et-table-page-header-travel))}}@supports (animation-timeline: scroll()){.et-table-host--page-sticky-header .et-table-header-cell{z-index:4;animation:et-table-page-header-travel linear both;animation-timeline:scroll(root block);animation-range:var(--_et-table-page-header-from) var(--_et-table-page-header-to)}.et-table-host--page-sticky-header .et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:6}}}\n"] }]
+            args: [{ selector: 'et-table-page-sticky-header-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-table-sticky-header-offset{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-inline-scroll{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-inline-max-scroll{syntax: \"<length>\"; inherits: true; initial-value: 0px;}.et-table-host--page-sticky-header{grid-template-rows:none;overflow:visible;position:relative}.et-table-header-strip{position:sticky;inset-block-start:var(--et-table-sticky-header-offset);min-inline-size:0;overflow:clip;z-index:4}.et-table-header{transform:translate(calc(-1 * var(--_et-table-inline-scroll)))}.et-table-header .et-table-header-cell{position:relative;inset-block-start:auto;margin-block-end:0}.et-table-scroller{padding-block-start:var(--_et-table-header-gap-block);overflow-x:auto;scrollbar-width:inherit}.et-table-header .et-table-header-cell.et-table-sticky-start{transform:translate(var(--_et-table-inline-scroll))}.et-table-header .et-table-header-cell.et-table-sticky-end{transform:translate(calc(var(--_et-table-inline-scroll) - var(--_et-table-inline-max-scroll)))}.et-table-host--page-sticky-header:dir(rtl) .et-table-header .et-table-header-cell.et-table-sticky-end{transform:translate(calc(var(--_et-table-inline-scroll) + var(--_et-table-inline-max-scroll)))}}\n"] }]
         }] });
 /**
- * Keeps the header row of a page-scrolled `et-table` at the top of the viewport. Use it on a table that
- * has no height of its own - one that grows to its rows while the document scrolls - where the header
- * would otherwise leave with the page.
- *
- * The table's own sticky header pins to the host, which is the table's horizontal scroll container, so
- * it can only ever stop at the host's top edge. This travels the header row down the grid instead, by
- * exactly the distance the page has scrolled past the table, and stops it at the last row. The row keeps
- * its place in the grid throughout, so the tracks, the pinned columns and the resize grips are untouched
- * and the header still scrolls sideways with the columns.
- *
- * The travel runs on a scroll timeline, so it is the compositor's work and the header never falls behind
- * the page. This directive only measures: it writes the distance and the two page offsets it runs
- * between whenever the layout changes, and nothing at all while scrolling.
- *
- * Set `--et-table-sticky-header-offset` on the table to stop the header lower than the top of the
- * viewport - under a page header or a toolbar that is pinned there itself.
+ * Keeps the header rows of an unbounded, page-scrolled `et-table` at the top of the viewport.
+ * The header stays horizontally aligned with the body and stops at the end of the table.
  *
- * Not for a bounded table: one with a height of its own already pins its header, and one that virtual
- * scrolls needs the bounded height to do it.
+ * Not for bounded or virtualized tables, which already pin their header inside their own scroll viewport.
  *
  * @example
- * <et-table [data]="rows()" [columns]="COLUMNS" style="--et-table-sticky-header-offset: 64px" etTablePageStickyHeader />
+ * <et-table [data]="rows()" [columns]="COLUMNS" etTablePageStickyHeader />
  */
 class TablePageStickyHeaderDirective {
     constructor() {
         this.table = injectTableFeatureHost('etTablePageStickyHeader');
-        // The feature is a directive on the table, so its host *is* the table's scroll container.
-        this.elementRef = inject(ElementRef);
         this.injector = inject(Injector);
         this.renderer = injectRenderer();
-        // The offset is a length, so a media query can change it at a width the table itself does not resize at.
-        this.viewportSize = injectViewportSize();
         /** See {@link TablePageStickyHeaderConfig}. */
         this.config = input({}, { ...(ngDevMode ? { debugName: "config" } : /* istanbul ignore next */ {}), alias: 'etTablePageStickyHeader',
             transform: (tableFeatureConfig) });
@@ -66100,53 +66130,36 @@ class TablePageStickyHeaderDirective {
         this.enabled = computed(() => this.config().enabled ?? true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
         injectStyleManager().mount(TablePageStickyHeaderStylesComponent);
-        // Everything the travel is made of comes out of the layout, so it is re-measured whenever the layout
-        // can have changed: the host resized, a column was resized, columns came or went, the config was
-        // rebound. Never on scroll - scrolling is the timeline's job, and reading geometry there is what
-        // makes a pinned header lag behind the page.
+        this.table.registerPageStickyHeader({ enabled: this.enabled });
         effect(() => {
             this.hostDimensions();
-            this.viewportSize();
             this.enabled();
-            this.config();
             this.table.columnWidths();
             this.table.visibleColumnsMeta();
+            this.table.leadColumnsMeta();
+            this.table.trailColumnsMeta();
             afterNextRender({ read: () => this.measure() }, { injector: this.injector });
         });
     }
     measure() {
-        const host = this.elementRef.nativeElement;
+        const host = this.table.element;
         const grid = this.table.gridElement();
-        const headerCell = this.table.headerCellElements()[0] ?? this.table.leadHeaderCellElements()[0];
+        const headerGrid = this.table.pageHeaderGridElement();
+        const scroller = this.table.scrollElement();
         const view = host.ownerDocument.defaultView;
-        if (!this.enabled() || !grid || !headerCell || !view) {
-            this.write(host, { travel: 0, from: 0, to: 0 });
-            return;
-        }
-        // Layout offsets, not the header's own rect: the rect carries the travel the timeline has already
-        // applied, and reading it back would fold that into the next measurement.
-        const headerTop = headerCell.offsetTop;
-        const travel = Math.max(0, grid.offsetHeight - headerTop - headerCell.offsetHeight);
-        // Where the header rests, in page coordinates, so the two ends of the range are page scroll offsets.
-        const restingTop = grid.getBoundingClientRect().top + view.scrollY + headerTop;
-        const from = Math.max(0, restingTop - this.resolveOffset(host));
-        this.write(host, { travel, from, to: from + travel });
-    }
-    resolveOffset(host) {
-        const raw = getComputedStyle(host).getPropertyValue('--et-table-sticky-header-offset');
-        const parsed = Number.parseFloat(raw);
-        // Registered as a `<length>` (see the stylesheet), so the computed value is always in px.
-        return this.config().offset ?? (Number.isFinite(parsed) ? parsed : 0);
-    }
-    write(host, values) {
-        this.renderer?.setCssProperties(host, {
-            '--_et-table-page-header-travel': `${values.travel}px`,
-            '--_et-table-page-header-from': `${values.from}px`,
-            '--_et-table-page-header-to': `${values.to}px`,
-        });
+        if (!this.enabled() || !grid || !headerGrid || !view) {
+            this.table.setPageHeaderColumns(null);
+            this.writeMaxScroll(host, 0);
+            return;
+        }
+        this.table.setPageHeaderColumns(view.getComputedStyle(grid).gridTemplateColumns);
+        this.writeMaxScroll(host, Math.max(0, scroller.scrollWidth - scroller.clientWidth));
+    }
+    writeMaxScroll(host, maxScroll) {
+        this.renderer?.setCssProperties(host, { '--_et-table-inline-max-scroll': `${maxScroll}px` });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TablePageStickyHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: TablePageStickyHeaderDirective, isStandalone: true, selector: "[etTablePageStickyHeader]", inputs: { config: { classPropertyName: "config", publicName: "etTablePageStickyHeader", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.et-table-host--page-sticky-header": "enabled()" } }, exportAs: ["etTablePageStickyHeader"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: TablePageStickyHeaderDirective, isStandalone: true, selector: "[etTablePageStickyHeader]", inputs: { config: { classPropertyName: "config", publicName: "etTablePageStickyHeader", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.et-table-host--page-sticky-header": "enabled()", "style.--et-table-sticky-header-offset.px": "config().offset ?? null" } }, exportAs: ["etTablePageStickyHeader"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TablePageStickyHeaderDirective, decorators: [{
             type: Directive,
@@ -66155,6 +66168,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     exportAs: 'etTablePageStickyHeader',
                     host: {
                         '[class.et-table-host--page-sticky-header]': 'enabled()',
+                        '[style.--et-table-sticky-header-offset.px]': 'config().offset ?? null',
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "etTablePageStickyHeader", required: false }] }] } });
@@ -66343,7 +66357,7 @@ class TableReorderDirective {
      * drag has to travel all the way past the pinned column before the table moves at all.
      */
     syncAutoScroll(clientX) {
-        const bounds = this.table.element.getBoundingClientRect();
+        const bounds = this.table.scrollElement().getBoundingClientRect();
         const frozen = this.table.frozenInsets();
         const intoStart = AUTO_SCROLL_ZONE_PX - (clientX - (bounds.left + frozen.start));
         const intoEnd = AUTO_SCROLL_ZONE_PX - (bounds.right - frozen.end - clientX);
@@ -66358,11 +66372,11 @@ class TableReorderDirective {
             this.stepAutoScroll();
     }
     stepAutoScroll() {
-        const host = this.table.element;
-        const before = host.scrollLeft;
-        host.scrollLeft = before + this.autoScrollStep;
+        const scroller = this.table.scrollElement();
+        const before = scroller.scrollLeft;
+        scroller.scrollLeft = before + this.autoScrollStep;
         // The table is already at that end, so stop rather than run a frame per tick doing nothing.
-        if (host.scrollLeft === before) {
+        if (scroller.scrollLeft === before) {
             this.stopAutoScroll();
             return;
         }
@@ -67347,7 +67361,7 @@ class TableVirtualScrollDirective {
         this.config = input({}, { ...(ngDevMode ? { debugName: "config" } : /* istanbul ignore next */ {}), alias: 'etTableVirtualScroll',
             transform: (tableFeatureConfig) });
         this.window = createVirtualWindow({
-            container: computed(() => this.table.element),
+            container: computed(() => this.table.scrollElement()),
             itemCount: computed(() => this.table.rows().length),
             estimateItemHeight: computed(() => this.config().estimateRowHeight ?? 48),
             overscan: computed(() => this.config().overscan ?? 6),
@@ -69515,7 +69529,7 @@ const TREE_IMPORTS = [TreeComponent, TreeDirective, TreeNodeDirective, TreeNodeD
 // Generated from package.json by tools/scripts/generate-version.js - do not edit.
 /** The version of `@ethlete/components` this build was cut from. */
-const COMPONENTS_VERSION = '1.0.0-next.56';
+const COMPONENTS_VERSION = '1.0.0-next.57';
 /**
  * Generated bundle index. Do not edit.