@cdevhub/ngx-tw 0.5.0 → 0.6.1

package/fesm2022/cdevhub-ngx-tw-table.mjs

@@ -71,6 +71,7 @@ const DEFAULT_TABLE_LABELS = {
     expandRowLabel: 'Expand row',
     collapseRowLabel: 'Collapse row',
     selectAllLabel: 'Select all rows',
+    selectionColumnLabel: 'Selection',
     selectRowLabel: 'Select row {index}',
 };
 // ── tv() config ──────────────────────────────────────────────────────
@@ -106,6 +107,7 @@ const tableVariants = tv({
         paginationSlot: 'empty:hidden border-t border-border px-2 py-2',
         expansionRow: 'bg-surface-sunken',
         expansionCell: 'p-0',
+        dataRow: '',
         // The leading `_selection` column hosts checkboxes only — override the standard
         // text alignment + padding so the control stays centered in a narrow column.
         selectionHeader: 'w-12 text-center align-middle',
@@ -172,6 +174,16 @@ const tableVariants = tv({
             true: { table: '[&>tbody]:opacity-60 [&>tbody]:pointer-events-none' },
             false: {},
         },
+        // Data rows only become a keyboard target when the consumer opts in via
+        // `clickableRows`. A static table must not put every row in the tab
+        // order, so the affordance and the focus ring are gated on the same flag
+        // that adds `tabindex` and the keydown handler.
+        clickableRows: {
+            true: {
+                dataRow: 'cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+            },
+            false: {},
+        },
     },
     compoundVariants: [
         {
@@ -195,6 +207,7 @@ const tableVariants = tv({
         stickyHeader: false,
         stickyFooter: false,
         loading: false,
+        clickableRows: false,
     },
 }, { twMerge: true });
 // ── Static class maps (Tailwind v4 JIT requires literal class strings) ──
@@ -329,7 +342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         }] });
 /** Structural directive on an `<ng-template>` declaring the row-expansion template. Requires `[multiTemplateRows]="true"` on the parent `<tw-table>`. */
 class RowExpansionDirective {
-    /** Optional predicate that decides whether this expansion renders for a given row. Defaults to `undefined` (render for every expanded row). */
+    /** Optional predicate that decides whether this expansion renders for a given row. Defaults to `undefined` (render for every expanded row). Alias: `twRowExpansionWhen`. */
     predicate = input(undefined, { ...(ngDevMode ? { debugName: "predicate" } : /* istanbul ignore next */ {}), alias: 'twRowExpansionWhen' });
     /** @internal */
     template = inject((TemplateRef));
@@ -565,18 +578,26 @@ class TableComponent {
     /** Whether multiple row templates may render per data object. Required for `*twRowExpansion` and advanced `*twRowDef [when]` usage. Defaults to `false`. */
     multiTemplateRows = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "multiTemplateRows" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether data rows are activatable. Set this whenever you bind `(rowClicked)` — it is what puts
+     * each row in the tab order, wires Enter / Space to the same handler as a click, and paints the
+     * focus ring. Left `false`, `(rowClicked)` stays pointer-only, which keeps a static table out of
+     * the tab order. Defaults to `false`.
+     */
+    clickableRows = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clickableRows" }] : /* istanbul ignore next */ []));
     /** Overrides for user-facing strings. Unset keys fall back to the English defaults. Defaults to `{}`. */
     labels = input({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
-    /** Accessible name for the `<table>`. Required when no visible `<caption slot="caption">` is provided. */
+    /** Accessible name for the `<table>`. Required when no visible `<caption slot="caption">` is provided. Defaults to `undefined`. Alias: `aria-label`. */
     ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
-    /** Id of an external element labelling the table. Mirrored to `aria-labelledby` on the `<table>`. */
+    /** Id of an external element labelling the table. Mirrored to `aria-labelledby` on the `<table>`. Defaults to `undefined`. */
     ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
     // ── Models (two-way) ──
-    /** Two-way bound set of rows currently expanded. Immutable — set a new `Set` on every change; do not mutate in place. */
+    /** Two-way bound set of rows currently expanded. Immutable — set a new `Set` on every change; do not mutate in place. Defaults to an empty set. */
     expandedRows = model(new Set(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "expandedRows" }] : /* istanbul ignore next */ []));
-    /** Two-way bound list of selected rows. Set a new array on every change; do not mutate. Only used when `selection.enabled` is `true`. */
+    /** Two-way bound list of selected rows. Set a new array on every change; do not mutate. Only used when `selection.enabled` is `true`. Defaults to an empty array. */
     selected = model([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     // ── Outputs ──
@@ -653,11 +674,19 @@ class TableComponent {
     /** @internal Whether the error overlay should render. */
     shouldRenderErrorOverlay = computed(() => this.error() !== null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "shouldRenderErrorOverlay" }] : /* istanbul ignore next */ []));
-    /** @internal Resolved table labels (defaults merged with input overrides). */
-    resolvedLabels = computed(() => ({
-        ...DEFAULT_TABLE_LABELS,
-        ...this.labels(),
-    }), /* @ts-ignore */
+    /**
+     * @internal Resolved table labels (defaults merged with input overrides).
+     *
+     * Explicitly-undefined keys are dropped before merging: a plain spread lets
+     * `{ selectionColumnLabel: undefined }` overwrite the default with undefined,
+     * which renders an empty `sr-only` span and reinstates the
+     * `empty-table-header` failure the label exists to prevent. `Required<>`
+     * then guarantees the template a string for every label.
+     */
+    resolvedLabels = computed(() => {
+        const overrides = Object.fromEntries(Object.entries(this.labels() ?? {}).filter(([, value]) => value !== undefined));
+        return { ...DEFAULT_TABLE_LABELS, ...overrides };
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedLabels" }] : /* istanbul ignore next */ []));
     /** @internal Computed error message for the default error overlay. Empty when no error is set. */
     errorMessage = computed(() => {
@@ -710,6 +739,7 @@ class TableComponent {
             stickyHeader: stickyCfg.header,
             stickyFooter: stickyCfg.footer,
             loading: this.loading(),
+            clickableRows: this.clickableRows(),
         });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_variantResult" }] : /* istanbul ignore next */ []));
@@ -765,6 +795,8 @@ class TableComponent {
     ...(ngDevMode ? [{ debugName: "footerSlotClasses" }] : /* istanbul ignore next */ []));
     paginationSlotClasses = computed(() => this._variantResult().paginationSlot(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "paginationSlotClasses" }] : /* istanbul ignore next */ []));
+    dataRowClasses = computed(() => this._variantResult().dataRow(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataRowClasses" }] : /* istanbul ignore next */ []));
     expansionRowClasses = computed(() => this._variantResult().expansionRow(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "expansionRowClasses" }] : /* istanbul ignore next */ []));
     expansionCellClasses = computed(() => this._variantResult().expansionCell(), /* @ts-ignore */
@@ -894,6 +926,13 @@ class TableComponent {
         });
         // Loading announcement.
         //
+        // This is the *only* announcement channel for the loading state. The
+        // loading overlay in table.html carries no `role="status"` / `aria-live`
+        // on purpose — it used to, and screen readers announced the same string
+        // twice per fetch. A pre-existing live region receiving text (what
+        // `LiveAnnouncer` does) is also the reliable pattern; an `@if`-inserted
+        // region whose content arrives in the same tick is not.
+        //
         // The effect tracks `this.loading()` only; reads of labels / rows are wrapped
         // in `untracked()` so unrelated upstream signals (label updates, row mutations
         // that don't toggle loading) don't re-announce. The announcement should fire
@@ -931,6 +970,28 @@ class TableComponent {
         }
         this.rowClicked.emit({ row, index, event });
     }
+    /**
+     * @internal Keyboard counterpart to `handleRowClick`. Only reachable when `clickableRows` is
+     * `true`, because that is the only state in which the `<tr>` carries `tabindex`.
+     *
+     * The `target !== currentTarget` guard is what keeps Enter on a button *inside* a cell from also
+     * activating the row: that keystroke's target is the button, and its own click already bubbles
+     * into `handleRowClick`, which suppresses it. Reusing the `composedPath()` walk here would let
+     * the row fire a second time.
+     */
+    handleRowKeydown(row, index, event) {
+        if (!this.clickableRows())
+            return;
+        if (event.target !== event.currentTarget)
+            return;
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        event.preventDefault();
+        this.rowClicked.emit({ row, index, event });
+    }
+    /** @internal `tabindex` for a data row — present only while rows are activatable. */
+    rowTabIndex = computed(() => (this.clickableRows() ? 0 : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowTabIndex" }] : /* istanbul ignore next */ []));
     /** @internal Whether a row is currently expanded. */
     isRowExpanded(row) {
         const expanded = this.expandedRows();
@@ -1125,14 +1186,14 @@ class TableComponent {
         return formatLabel(this.resolvedLabels().selectRowLabel, { index: rowIndex + 1 });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TableComponent, isStandalone: true, selector: "tw-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", 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 }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, multiTemplateRows: { classPropertyName: "multiTemplateRows", publicName: "multiTemplateRows", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedRows: "expandedRowsChange", selected: "selectedChange", rowClicked: "rowClicked", selectionChange: "selectionChange", expansionChange: "expansionChange" }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "columns", predicate: (ColumnComponent), descendants: true, isSignal: true }, { propertyName: "noDataRow", first: true, predicate: NoDataRowDirective, descendants: true, isSignal: true }, { propertyName: "expansionTemplate", first: true, predicate: (RowExpansionDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "cdkTable", first: true, predicate: ["cdkTable"], descendants: true, isSignal: true }], exportAs: ["twTable"], ngImport: i0, template: "<!-- Toolbar slot \u2014 hidden when empty via `empty:hidden` in the slot class. -->\n<div [class]=\"toolbarClasses()\">\n  <ng-content select=\"[slot='toolbar']\" />\n</div>\n\n<!-- Scroll wrapper \u2014 also hosts the loading overlay as an absolutely-positioned child. -->\n<div [class]=\"scrollWrapperClasses()\">\n  <div [class]=\"scrollContainerClasses()\" [style.max-height]=\"maxHeightStyle()\">\n    <table\n      #cdkTable=\"cdkTable\"\n      cdk-table\n      [class]=\"tableClasses()\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n    >\n      <ng-content select=\"[slot='caption']\" />\n\n      <!--\n        Emit one <ng-container cdkColumnDef> per visible column. CdkColumnDef's\n        @ContentChildren(CdkCellDef / CdkHeaderCellDef / CdkFooterCellDef)\n        resolves the <th *cdkHeaderCellDef> / <td *cdkCellDef> / <td *cdkFooterCellDef>\n        below \u2014 those renderers delegate to the consumer's projected templates\n        (col.cellDef() / col.headerCellDef() / col.footerCellDef()) via\n        ngTemplateOutlet.\n      -->\n      @for (col of visibleColumns(); track col.name()) {\n        <ng-container\n          [cdkColumnDef]=\"col.name()\"\n          [sticky]=\"col.stickyStart()\"\n          [stickyEnd]=\"col.stickyEnd()\"\n        >\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [class]=\"col.headerCellClasses()\"\n            [style.width]=\"col.resolvedWidth()\"\n            [attr.aria-sort]=\"col.ariaSort()\"\n            [attr.data-column]=\"col.name()\"\n            scope=\"col\"\n          >\n            @if (col.headerCellDef(); as hdef) {\n              <ng-container\n                [ngTemplateOutlet]=\"hdef.template\"\n                [ngTemplateOutletContext]=\"col.headerContext()\"\n              />\n            } @else if (col.headerLabel()) {\n              {{ col.headerLabel() }}\n            }\n          </th>\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row; let i = index; let c = count; let f = first; let l = last; let e = even; let o = odd\"\n            [class]=\"col.cellClasses()\"\n            [style.width]=\"col.resolvedWidth()\"\n            [attr.data-label]=\"col.stackDataLabel()\"\n            [attr.data-column]=\"col.name()\"\n          >\n            @if (col.cellDef(); as cdef) {\n              <ng-container\n                [ngTemplateOutlet]=\"cdef.template\"\n                [ngTemplateOutletContext]=\"col.buildCellContext(row, i, c, f, l, e, o)\"\n              />\n            }\n          </td>\n          @if (col.footerCellDef()) {\n            <td\n              cdk-footer-cell\n              *cdkFooterCellDef\n              [class]=\"col.footerCellClasses()\"\n              [style.width]=\"col.resolvedWidth()\"\n              [attr.data-column]=\"col.name()\"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"col.footerCellDef()!.template\"\n                [ngTemplateOutletContext]=\"col.footerContext()\"\n              />\n            </td>\n          }\n        </ng-container>\n      }\n\n      <!-- Selection pseudo-column emitted as a leading column when `selection.enabled` is true.\n           Hosts the master \"select all\" checkbox in the header and per-row checkboxes in the body.\n           The role=\"checkbox\" host on <tw-checkbox> is allowlisted by the row-click suppression\n           helper so clicking it does NOT also emit `rowClicked`. -->\n      @if (resolvedSelection().enabled) {\n        <ng-container cdkColumnDef=\"_selection\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [class]=\"selectionHeaderClasses()\"\n            scope=\"col\"\n          >\n            <!-- Select-all needs a full row snapshot, which only the array\n                 data-source path can produce. Rendering it for an Observable /\n                 DataSource input gave a checkbox that looked functional, never\n                 reflected state, and did nothing on click. -->\n            @if (dataIsArray()) {\n              <tw-checkbox\n                size=\"sm\"\n                [checked]=\"masterChecked()\"\n                [indeterminate]=\"masterIndeterminate()\"\n                (change)=\"toggleMasterSelection($event)\"\n                [aria-label]=\"resolvedLabels().selectAllLabel\"\n              />\n            }\n          </th>\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row; let i = index\"\n            [class]=\"selectionCellClasses()\"\n          >\n            <tw-checkbox\n              size=\"sm\"\n              [checked]=\"isSelected(row)\"\n              (change)=\"setSelected(row, $event)\"\n              [aria-label]=\"selectRowLabel(i)\"\n            />\n          </td>\n        </ng-container>\n      }\n\n      <!-- Auto-generated row defs driven by visibleColumnNames(). -->\n      @if (visibleColumnNames().length > 0) {\n        <tr\n          cdk-header-row\n          *cdkHeaderRowDef=\"visibleColumnNames(); sticky: stickyHeader()\"\n        ></tr>\n        <tr\n          cdk-row\n          *cdkRowDef=\"let row; let i = dataIndex; columns: visibleColumnNames()\"\n          (click)=\"handleRowClick(row, i, $event)\"\n          [attr.aria-selected]=\"rowAriaSelected(row)\"\n        ></tr>\n        @if (hasFooterRow()) {\n          <tr\n            cdk-footer-row\n            *cdkFooterRowDef=\"visibleColumnNames(); sticky: stickyFooter()\"\n          ></tr>\n        }\n      }\n\n      <!-- Expansion pseudo-column + extra row def. -->\n      @if (hasExpansion()) {\n        <ng-container cdkColumnDef=\"_tw_expansion\">\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row; let i = dataIndex\"\n            [attr.colspan]=\"expansionColspan()\"\n            [class]=\"expansionCellClasses()\"\n          >\n            @if (expansionTemplate(); as tpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"expansionContext(row, i)\"\n              />\n            }\n          </td>\n        </ng-container>\n        <tr\n          cdk-row\n          *cdkRowDef=\"let row; columns: ['_tw_expansion']; when: expansionWhen\"\n          [class]=\"expansionRowClasses()\"\n        ></tr>\n      }\n\n      <!-- Consumer-projected content: tw-column metadata components and ng-template-based\n           directives (*twNoDataRow, *twRowExpansion). The tw-column hosts are display:none\n           so they are harmless inside the <table>. -->\n      <ng-content />\n    </table>\n\n    <!-- Empty-state fallback overlay (hidden when a *twNoDataRow is projected; hidden when loading/error). -->\n    @if (shouldRenderEmptyOverlay()) {\n      <div [class]=\"emptyStateClasses()\">\n        <ng-content select=\"[slot='empty']\">\n          <svg\n            [class]=\"emptyIconClasses()\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661l-2.4-8.022A2.25 2.25 0 0 0 17.128 3.5H6.873a2.25 2.25 0 0 0-2.122 1.655l-2.4 8.022a2.25 2.25 0 0 0-.1.661Z\"\n            />\n          </svg>\n          <p [class]=\"emptyMessageClasses()\">{{ resolvedLabels().empty }}</p>\n        </ng-content>\n      </div>\n    }\n\n    <!-- Error-state overlay. -->\n    @if (shouldRenderErrorOverlay()) {\n      <div [class]=\"errorStateClasses()\" role=\"alert\">\n        <ng-content select=\"[slot='error']\">\n          <svg\n            [class]=\"errorIconClasses()\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z\"\n            />\n          </svg>\n          <p [class]=\"errorMessageClasses()\">{{ errorMessage() }}</p>\n        </ng-content>\n      </div>\n    }\n\n    <!-- Loading overlay (absolute-positioned inside scroll wrapper). -->\n    @if (loading()) {\n      <div\n        [class]=\"loadingOverlayClasses()\"\n        role=\"status\"\n        aria-live=\"polite\"\n        animate.enter=\"fade-in\"\n        animate.leave=\"fade-out\"\n      >\n        <ng-content select=\"[slot='loading']\">\n          <svg\n            class=\"size-5 shrink-0 animate-spin motion-reduce:animate-none text-fg-muted\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n          >\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              stroke-width=\"3\"\n              opacity=\"0.2\"\n            />\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              stroke-width=\"3\"\n              stroke-linecap=\"round\"\n              stroke-dasharray=\"60\"\n              stroke-dashoffset=\"40\"\n            />\n          </svg>\n          <span [class]=\"loadingMessageClasses()\">{{ resolvedLabels().loading }}</span>\n        </ng-content>\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Footer slot \u2014 hidden when empty via `empty:hidden` in the slot class. -->\n<div [class]=\"footerSlotClasses()\">\n  <ng-content select=\"[slot='footer']\" />\n</div>\n\n<!-- Pagination slot \u2014 hidden when empty via `empty:hidden` in the slot class. -->\n<div [class]=\"paginationSlotClasses()\">\n  <ng-content select=\"[slot='pagination']\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: CdkTableModule }, { kind: "component", type: i1.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout", "recycleRows"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i1.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i1.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i1.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i1.CdkFooterCellDef, selector: "[cdkFooterCellDef]" }, { kind: "directive", type: i1.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i1.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i1.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i1.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: i1.CdkFooterCell, selector: "cdk-footer-cell, td[cdk-footer-cell]" }, { kind: "component", type: i1.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i1.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: i1.CdkFooterRow, selector: "cdk-footer-row, tr[cdk-footer-row]" }, { kind: "directive", type: i1.CdkFooterRowDef, selector: "[cdkFooterRowDef]", inputs: ["cdkFooterRowDef", "cdkFooterRowDefSticky"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckboxComponent, selector: "tw-checkbox", inputs: ["color", "size", "variant", "disabled", "required", "label", "description", "labelPosition", "name", "id", "aria-label", "aria-labelledby", "aria-describedby", "errorStateMatcher", "checked", "indeterminate"], outputs: ["checkedChange", "indeterminateChange", "change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TableComponent, isStandalone: true, selector: "tw-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", 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 }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, multiTemplateRows: { classPropertyName: "multiTemplateRows", publicName: "multiTemplateRows", isSignal: true, isRequired: false, transformFunction: null }, clickableRows: { classPropertyName: "clickableRows", publicName: "clickableRows", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedRows: "expandedRowsChange", selected: "selectedChange", rowClicked: "rowClicked", selectionChange: "selectionChange", expansionChange: "expansionChange" }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "columns", predicate: (ColumnComponent), descendants: true, isSignal: true }, { propertyName: "noDataRow", first: true, predicate: NoDataRowDirective, descendants: true, isSignal: true }, { propertyName: "expansionTemplate", first: true, predicate: (RowExpansionDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "cdkTable", first: true, predicate: ["cdkTable"], descendants: true, isSignal: true }], exportAs: ["twTable"], ngImport: i0, template: "<!-- Toolbar slot \u2014 hidden when empty via `empty:hidden` in the slot class. -->\n<div [class]=\"toolbarClasses()\">\n  <ng-content select=\"[slot='toolbar']\" />\n</div>\n\n<!-- Scroll wrapper \u2014 also hosts the loading overlay as an absolutely-positioned child. -->\n<div [class]=\"scrollWrapperClasses()\">\n  <div [class]=\"scrollContainerClasses()\" [style.max-height]=\"maxHeightStyle()\">\n    <table\n      #cdkTable=\"cdkTable\"\n      cdk-table\n      [class]=\"tableClasses()\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n    >\n      <ng-content select=\"[slot='caption']\" />\n\n      <!--\n        Emit one <ng-container cdkColumnDef> per visible column. CdkColumnDef's\n        @ContentChildren(CdkCellDef / CdkHeaderCellDef / CdkFooterCellDef)\n        resolves the <th *cdkHeaderCellDef> / <td *cdkCellDef> / <td *cdkFooterCellDef>\n        below \u2014 those renderers delegate to the consumer's projected templates\n        (col.cellDef() / col.headerCellDef() / col.footerCellDef()) via\n        ngTemplateOutlet.\n      -->\n      @for (col of visibleColumns(); track col.name()) {\n        <ng-container\n          [cdkColumnDef]=\"col.name()\"\n          [sticky]=\"col.stickyStart()\"\n          [stickyEnd]=\"col.stickyEnd()\"\n        >\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [class]=\"col.headerCellClasses()\"\n            [style.width]=\"col.resolvedWidth()\"\n            [attr.aria-sort]=\"col.ariaSort()\"\n            [attr.data-column]=\"col.name()\"\n            scope=\"col\"\n          >\n            @if (col.headerCellDef(); as hdef) {\n              <ng-container\n                [ngTemplateOutlet]=\"hdef.template\"\n                [ngTemplateOutletContext]=\"col.headerContext()\"\n              />\n            } @else if (col.headerLabel()) {\n              {{ col.headerLabel() }}\n            }\n          </th>\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row; let i = index; let c = count; let f = first; let l = last; let e = even; let o = odd\"\n            [class]=\"col.cellClasses()\"\n            [style.width]=\"col.resolvedWidth()\"\n            [attr.data-label]=\"col.stackDataLabel()\"\n            [attr.data-column]=\"col.name()\"\n          >\n            @if (col.cellDef(); as cdef) {\n              <ng-container\n                [ngTemplateOutlet]=\"cdef.template\"\n                [ngTemplateOutletContext]=\"col.buildCellContext(row, i, c, f, l, e, o)\"\n              />\n            }\n          </td>\n          @if (col.footerCellDef()) {\n            <td\n              cdk-footer-cell\n              *cdkFooterCellDef\n              [class]=\"col.footerCellClasses()\"\n              [style.width]=\"col.resolvedWidth()\"\n              [attr.data-column]=\"col.name()\"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"col.footerCellDef()!.template\"\n                [ngTemplateOutletContext]=\"col.footerContext()\"\n              />\n            </td>\n          }\n        </ng-container>\n      }\n\n      <!-- Selection pseudo-column emitted as a leading column when `selection.enabled` is true.\n           Hosts the master \"select all\" checkbox in the header and per-row checkboxes in the body.\n           The role=\"checkbox\" host on <tw-checkbox> is allowlisted by the row-click suppression\n           helper so clicking it does NOT also emit `rowClicked`. -->\n      @if (resolvedSelection().enabled) {\n        <ng-container cdkColumnDef=\"_selection\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [class]=\"selectionHeaderClasses()\"\n            scope=\"col\"\n          >\n            <!-- Select-all needs a full row snapshot, which only the array\n                 data-source path can produce. Rendering it for an Observable /\n                 DataSource input gave a checkbox that looked functional, never\n                 reflected state, and did nothing on click. -->\n            @if (dataIsArray()) {\n              <tw-checkbox\n                size=\"sm\"\n                [checked]=\"masterChecked()\"\n                [indeterminate]=\"masterIndeterminate()\"\n                (change)=\"toggleMasterSelection($event)\"\n                [aria-label]=\"resolvedLabels().selectAllLabel\"\n              />\n            } @else {\n              <!-- Without the master checkbox this header cell would be\n                   literally empty, which axe reports as `empty-table-header`\n                   and which leaves the column unnamed in a screen reader's\n                   table summary. -->\n              <span class=\"sr-only\">{{ resolvedLabels().selectionColumnLabel }}</span>\n            }\n          </th>\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row; let i = index\"\n            [class]=\"selectionCellClasses()\"\n          >\n            <tw-checkbox\n              size=\"sm\"\n              [checked]=\"isSelected(row)\"\n              (change)=\"setSelected(row, $event)\"\n              [aria-label]=\"selectRowLabel(i)\"\n            />\n          </td>\n        </ng-container>\n      }\n\n      <!-- Auto-generated row defs driven by visibleColumnNames(). -->\n      @if (visibleColumnNames().length > 0) {\n        <tr\n          cdk-header-row\n          *cdkHeaderRowDef=\"visibleColumnNames(); sticky: stickyHeader()\"\n        ></tr>\n        <!-- Both index context variables are captured on purpose. CDK's\n             `CdkTable` sets `dataIndex` ONLY when `multiTemplateDataRows` is\n             enabled (row expansion); otherwise it sets `index` and leaves\n             `dataIndex` undefined. Reading just one gives `undefined` in the\n             other mode \u2014 which shipped as `rowClicked` emitting\n             `index: undefined` for every table without row expansion. -->\n        <!-- `tabindex` / `(keydown)` / the focus ring are all gated on\n             `clickableRows`. A static table must not put every row in the tab\n             order, and Angular gives no way to ask whether `(rowClicked)` has a\n             subscriber \u2014 so the consumer declares it. Deliberately NO `role`\n             override: a `<tr>` is a `row`, and retagging it `button` breaks the\n             table's structural role contract for its own cells. -->\n        <tr\n          cdk-row\n          *cdkRowDef=\"\n            let row;\n            let i = index;\n            let di = dataIndex;\n            columns: visibleColumnNames()\n          \"\n          [class]=\"dataRowClasses()\"\n          (click)=\"handleRowClick(row, di ?? i, $event)\"\n          (keydown)=\"handleRowKeydown(row, di ?? i, $event)\"\n          [attr.tabindex]=\"rowTabIndex()\"\n          [attr.aria-selected]=\"rowAriaSelected(row)\"\n        ></tr>\n        @if (hasFooterRow()) {\n          <tr\n            cdk-footer-row\n            *cdkFooterRowDef=\"visibleColumnNames(); sticky: stickyFooter()\"\n          ></tr>\n        }\n      }\n\n      <!-- Expansion pseudo-column + extra row def. -->\n      @if (hasExpansion()) {\n        <ng-container cdkColumnDef=\"_tw_expansion\">\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row; let i = dataIndex\"\n            [attr.colspan]=\"expansionColspan()\"\n            [class]=\"expansionCellClasses()\"\n          >\n            @if (expansionTemplate(); as tpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"expansionContext(row, i)\"\n              />\n            }\n          </td>\n        </ng-container>\n        <tr\n          cdk-row\n          *cdkRowDef=\"let row; columns: ['_tw_expansion']; when: expansionWhen\"\n          [class]=\"expansionRowClasses()\"\n        ></tr>\n      }\n\n      <!-- Consumer-projected content: tw-column metadata components and ng-template-based\n           directives (*twNoDataRow, *twRowExpansion). The tw-column hosts are display:none\n           so they are harmless inside the <table>. -->\n      <ng-content />\n    </table>\n\n    <!-- Empty-state fallback overlay (hidden when a *twNoDataRow is projected; hidden when loading/error). -->\n    @if (shouldRenderEmptyOverlay()) {\n      <div [class]=\"emptyStateClasses()\">\n        <ng-content select=\"[slot='empty']\">\n          <svg\n            [class]=\"emptyIconClasses()\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661l-2.4-8.022A2.25 2.25 0 0 0 17.128 3.5H6.873a2.25 2.25 0 0 0-2.122 1.655l-2.4 8.022a2.25 2.25 0 0 0-.1.661Z\"\n            />\n          </svg>\n          <p [class]=\"emptyMessageClasses()\">{{ resolvedLabels().empty }}</p>\n        </ng-content>\n      </div>\n    }\n\n    <!-- Error-state overlay. -->\n    @if (shouldRenderErrorOverlay()) {\n      <div [class]=\"errorStateClasses()\" role=\"alert\">\n        <ng-content select=\"[slot='error']\">\n          <svg\n            [class]=\"errorIconClasses()\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z\"\n            />\n          </svg>\n          <p [class]=\"errorMessageClasses()\">{{ errorMessage() }}</p>\n        </ng-content>\n      </div>\n    }\n\n    <!--\n      Loading overlay (absolute-positioned inside scroll wrapper).\n\n      Deliberately NOT a live region. The loading string is announced by\n      `LiveAnnouncer` from the effect in table.ts; carrying `role=\"status\"`\n      (which implies `aria-live=\"polite\"`) here as well made screen readers\n      announce the same text twice on every fetch. The visible text stays \u2014\n      it is the sighted user's loading affordance \u2014 it just no longer\n      announces itself.\n    -->\n    @if (loading()) {\n      <div\n        [class]=\"loadingOverlayClasses()\"\n        data-tw-table-loading\n        animate.enter=\"fade-in\"\n        animate.leave=\"fade-out\"\n      >\n        <ng-content select=\"[slot='loading']\">\n          <svg\n            class=\"size-5 shrink-0 animate-spin motion-reduce:animate-none text-fg-muted\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n          >\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              stroke-width=\"3\"\n              opacity=\"0.2\"\n            />\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              stroke-width=\"3\"\n              stroke-linecap=\"round\"\n              stroke-dasharray=\"60\"\n              stroke-dashoffset=\"40\"\n            />\n          </svg>\n          <span [class]=\"loadingMessageClasses()\">{{ resolvedLabels().loading }}</span>\n        </ng-content>\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Footer slot \u2014 hidden when empty via `empty:hidden` in the slot class. -->\n<div [class]=\"footerSlotClasses()\">\n  <ng-content select=\"[slot='footer']\" />\n</div>\n\n<!-- Pagination slot \u2014 hidden when empty via `empty:hidden` in the slot class. -->\n<div [class]=\"paginationSlotClasses()\">\n  <ng-content select=\"[slot='pagination']\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: CdkTableModule }, { kind: "component", type: i1.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout", "recycleRows"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i1.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i1.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i1.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i1.CdkFooterCellDef, selector: "[cdkFooterCellDef]" }, { kind: "directive", type: i1.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i1.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i1.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i1.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: i1.CdkFooterCell, selector: "cdk-footer-cell, td[cdk-footer-cell]" }, { kind: "component", type: i1.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i1.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: i1.CdkFooterRow, selector: "cdk-footer-row, tr[cdk-footer-row]" }, { kind: "directive", type: i1.CdkFooterRowDef, selector: "[cdkFooterRowDef]", inputs: ["cdkFooterRowDef", "cdkFooterRowDefSticky"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckboxComponent, selector: "tw-checkbox", inputs: ["color", "size", "variant", "disabled", "required", "label", "description", "labelPosition", "name", "id", "aria-label", "aria-labelledby", "aria-describedby", "errorStateMatcher", "checked", "indeterminate"], outputs: ["checkedChange", "indeterminateChange", "change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tw-table', exportAs: 'twTable', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkTableModule, NgTemplateOutlet, CheckboxComponent], host: {
                         '[class]': 'hostClasses()',
-                    }, template: "<!-- Toolbar slot \u2014 hidden when empty via `empty:hidden` in the slot class. -->\n<div [class]=\"toolbarClasses()\">\n  <ng-content select=\"[slot='toolbar']\" />\n</div>\n\n<!-- Scroll wrapper \u2014 also hosts the loading overlay as an absolutely-positioned child. -->\n<div [class]=\"scrollWrapperClasses()\">\n  <div [class]=\"scrollContainerClasses()\" [style.max-height]=\"maxHeightStyle()\">\n    <table\n      #cdkTable=\"cdkTable\"\n      cdk-table\n      [class]=\"tableClasses()\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n    >\n      <ng-content select=\"[slot='caption']\" />\n\n      <!--\n        Emit one <ng-container cdkColumnDef> per visible column. CdkColumnDef's\n        @ContentChildren(CdkCellDef / CdkHeaderCellDef / CdkFooterCellDef)\n        resolves the <th *cdkHeaderCellDef> / <td *cdkCellDef> / <td *cdkFooterCellDef>\n        below \u2014 those renderers delegate to the consumer's projected templates\n        (col.cellDef() / col.headerCellDef() / col.footerCellDef()) via\n        ngTemplateOutlet.\n      -->\n      @for (col of visibleColumns(); track col.name()) {\n        <ng-container\n          [cdkColumnDef]=\"col.name()\"\n          [sticky]=\"col.stickyStart()\"\n          [stickyEnd]=\"col.stickyEnd()\"\n        >\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [class]=\"col.headerCellClasses()\"\n            [style.width]=\"col.resolvedWidth()\"\n            [attr.aria-sort]=\"col.ariaSort()\"\n            [attr.data-column]=\"col.name()\"\n            scope=\"col\"\n          >\n            @if (col.headerCellDef(); as hdef) {\n              <ng-container\n                [ngTemplateOutlet]=\"hdef.template\"\n                [ngTemplateOutletContext]=\"col.headerContext()\"\n              />\n            } @else if (col.headerLabel()) {\n              {{ col.headerLabel() }}\n            }\n          </th>\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row; let i = index; let c = count; let f = first; let l = last; let e = even; let o = odd\"\n            [class]=\"col.cellClasses()\"\n            [style.width]=\"col.resolvedWidth()\"\n            [attr.data-label]=\"col.stackDataLabel()\"\n            [attr.data-column]=\"col.name()\"\n          >\n            @if (col.cellDef(); as cdef) {\n              <ng-container\n                [ngTemplateOutlet]=\"cdef.template\"\n                [ngTemplateOutletContext]=\"col.buildCellContext(row, i, c, f, l, e, o)\"\n              />\n            }\n          </td>\n          @if (col.footerCellDef()) {\n            <td\n              cdk-footer-cell\n              *cdkFooterCellDef\n              [class]=\"col.footerCellClasses()\"\n              [style.width]=\"col.resolvedWidth()\"\n              [attr.data-column]=\"col.name()\"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"col.footerCellDef()!.template\"\n                [ngTemplateOutletContext]=\"col.footerContext()\"\n              />\n            </td>\n          }\n        </ng-container>\n      }\n\n      <!-- Selection pseudo-column emitted as a leading column when `selection.enabled` is true.\n           Hosts the master \"select all\" checkbox in the header and per-row checkboxes in the body.\n           The role=\"checkbox\" host on <tw-checkbox> is allowlisted by the row-click suppression\n           helper so clicking it does NOT also emit `rowClicked`. -->\n      @if (resolvedSelection().enabled) {\n        <ng-container cdkColumnDef=\"_selection\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [class]=\"selectionHeaderClasses()\"\n            scope=\"col\"\n          >\n            <!-- Select-all needs a full row snapshot, which only the array\n                 data-source path can produce. Rendering it for an Observable /\n                 DataSource input gave a checkbox that looked functional, never\n                 reflected state, and did nothing on click. -->\n            @if (dataIsArray()) {\n              <tw-checkbox\n                size=\"sm\"\n                [checked]=\"masterChecked()\"\n                [indeterminate]=\"masterIndeterminate()\"\n                (change)=\"toggleMasterSelection($event)\"\n                [aria-label]=\"resolvedLabels().selectAllLabel\"\n              />\n            }\n          </th>\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row; let i = index\"\n            [class]=\"selectionCellClasses()\"\n          >\n            <tw-checkbox\n              size=\"sm\"\n              [checked]=\"isSelected(row)\"\n              (change)=\"setSelected(row, $event)\"\n              [aria-label]=\"selectRowLabel(i)\"\n            />\n          </td>\n        </ng-container>\n      }\n\n      <!-- Auto-generated row defs driven by visibleColumnNames(). -->\n      @if (visibleColumnNames().length > 0) {\n        <tr\n          cdk-header-row\n          *cdkHeaderRowDef=\"visibleColumnNames(); sticky: stickyHeader()\"\n        ></tr>\n        <tr\n          cdk-row\n          *cdkRowDef=\"let row; let i = dataIndex; columns: visibleColumnNames()\"\n          (click)=\"handleRowClick(row, i, $event)\"\n          [attr.aria-selected]=\"rowAriaSelected(row)\"\n        ></tr>\n        @if (hasFooterRow()) {\n          <tr\n            cdk-footer-row\n            *cdkFooterRowDef=\"visibleColumnNames(); sticky: stickyFooter()\"\n          ></tr>\n        }\n      }\n\n      <!-- Expansion pseudo-column + extra row def. -->\n      @if (hasExpansion()) {\n        <ng-container cdkColumnDef=\"_tw_expansion\">\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row; let i = dataIndex\"\n            [attr.colspan]=\"expansionColspan()\"\n            [class]=\"expansionCellClasses()\"\n          >\n            @if (expansionTemplate(); as tpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"expansionContext(row, i)\"\n              />\n            }\n          </td>\n        </ng-container>\n        <tr\n          cdk-row\n          *cdkRowDef=\"let row; columns: ['_tw_expansion']; when: expansionWhen\"\n          [class]=\"expansionRowClasses()\"\n        ></tr>\n      }\n\n      <!-- Consumer-projected content: tw-column metadata components and ng-template-based\n           directives (*twNoDataRow, *twRowExpansion). The tw-column hosts are display:none\n           so they are harmless inside the <table>. -->\n      <ng-content />\n    </table>\n\n    <!-- Empty-state fallback overlay (hidden when a *twNoDataRow is projected; hidden when loading/error). -->\n    @if (shouldRenderEmptyOverlay()) {\n      <div [class]=\"emptyStateClasses()\">\n        <ng-content select=\"[slot='empty']\">\n          <svg\n            [class]=\"emptyIconClasses()\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661l-2.4-8.022A2.25 2.25 0 0 0 17.128 3.5H6.873a2.25 2.25 0 0 0-2.122 1.655l-2.4 8.022a2.25 2.25 0 0 0-.1.661Z\"\n            />\n          </svg>\n          <p [class]=\"emptyMessageClasses()\">{{ resolvedLabels().empty }}</p>\n        </ng-content>\n      </div>\n    }\n\n    <!-- Error-state overlay. -->\n    @if (shouldRenderErrorOverlay()) {\n      <div [class]=\"errorStateClasses()\" role=\"alert\">\n        <ng-content select=\"[slot='error']\">\n          <svg\n            [class]=\"errorIconClasses()\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z\"\n            />\n          </svg>\n          <p [class]=\"errorMessageClasses()\">{{ errorMessage() }}</p>\n        </ng-content>\n      </div>\n    }\n\n    <!-- Loading overlay (absolute-positioned inside scroll wrapper). -->\n    @if (loading()) {\n      <div\n        [class]=\"loadingOverlayClasses()\"\n        role=\"status\"\n        aria-live=\"polite\"\n        animate.enter=\"fade-in\"\n        animate.leave=\"fade-out\"\n      >\n        <ng-content select=\"[slot='loading']\">\n          <svg\n            class=\"size-5 shrink-0 animate-spin motion-reduce:animate-none text-fg-muted\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n          >\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              stroke-width=\"3\"\n              opacity=\"0.2\"\n            />\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              stroke-width=\"3\"\n              stroke-linecap=\"round\"\n              stroke-dasharray=\"60\"\n              stroke-dashoffset=\"40\"\n            />\n          </svg>\n          <span [class]=\"loadingMessageClasses()\">{{ resolvedLabels().loading }}</span>\n        </ng-content>\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Footer slot \u2014 hidden when empty via `empty:hidden` in the slot class. -->\n<div [class]=\"footerSlotClasses()\">\n  <ng-content select=\"[slot='footer']\" />\n</div>\n\n<!-- Pagination slot \u2014 hidden when empty via `empty:hidden` in the slot class. -->\n<div [class]=\"paginationSlotClasses()\">\n  <ng-content select=\"[slot='pagination']\" />\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], multiTemplateRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiTemplateRows", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], expandedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRows", required: false }] }, { type: i0.Output, args: ["expandedRowsChange"] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], expansionChange: [{ type: i0.Output, args: ["expansionChange"] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ColumnComponent), { ...{ descendants: true }, isSignal: true }] }], noDataRow: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NoDataRowDirective), { ...{ descendants: true }, isSignal: true }] }], expansionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RowExpansionDirective), { ...{ descendants: true }, isSignal: true }] }], cdkTable: [{ type: i0.ViewChild, args: ['cdkTable', { isSignal: true }] }] } });
+                    }, template: "<!-- Toolbar slot \u2014 hidden when empty via `empty:hidden` in the slot class. -->\n<div [class]=\"toolbarClasses()\">\n  <ng-content select=\"[slot='toolbar']\" />\n</div>\n\n<!-- Scroll wrapper \u2014 also hosts the loading overlay as an absolutely-positioned child. -->\n<div [class]=\"scrollWrapperClasses()\">\n  <div [class]=\"scrollContainerClasses()\" [style.max-height]=\"maxHeightStyle()\">\n    <table\n      #cdkTable=\"cdkTable\"\n      cdk-table\n      [class]=\"tableClasses()\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n    >\n      <ng-content select=\"[slot='caption']\" />\n\n      <!--\n        Emit one <ng-container cdkColumnDef> per visible column. CdkColumnDef's\n        @ContentChildren(CdkCellDef / CdkHeaderCellDef / CdkFooterCellDef)\n        resolves the <th *cdkHeaderCellDef> / <td *cdkCellDef> / <td *cdkFooterCellDef>\n        below \u2014 those renderers delegate to the consumer's projected templates\n        (col.cellDef() / col.headerCellDef() / col.footerCellDef()) via\n        ngTemplateOutlet.\n      -->\n      @for (col of visibleColumns(); track col.name()) {\n        <ng-container\n          [cdkColumnDef]=\"col.name()\"\n          [sticky]=\"col.stickyStart()\"\n          [stickyEnd]=\"col.stickyEnd()\"\n        >\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [class]=\"col.headerCellClasses()\"\n            [style.width]=\"col.resolvedWidth()\"\n            [attr.aria-sort]=\"col.ariaSort()\"\n            [attr.data-column]=\"col.name()\"\n            scope=\"col\"\n          >\n            @if (col.headerCellDef(); as hdef) {\n              <ng-container\n                [ngTemplateOutlet]=\"hdef.template\"\n                [ngTemplateOutletContext]=\"col.headerContext()\"\n              />\n            } @else if (col.headerLabel()) {\n              {{ col.headerLabel() }}\n            }\n          </th>\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row; let i = index; let c = count; let f = first; let l = last; let e = even; let o = odd\"\n            [class]=\"col.cellClasses()\"\n            [style.width]=\"col.resolvedWidth()\"\n            [attr.data-label]=\"col.stackDataLabel()\"\n            [attr.data-column]=\"col.name()\"\n          >\n            @if (col.cellDef(); as cdef) {\n              <ng-container\n                [ngTemplateOutlet]=\"cdef.template\"\n                [ngTemplateOutletContext]=\"col.buildCellContext(row, i, c, f, l, e, o)\"\n              />\n            }\n          </td>\n          @if (col.footerCellDef()) {\n            <td\n              cdk-footer-cell\n              *cdkFooterCellDef\n              [class]=\"col.footerCellClasses()\"\n              [style.width]=\"col.resolvedWidth()\"\n              [attr.data-column]=\"col.name()\"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"col.footerCellDef()!.template\"\n                [ngTemplateOutletContext]=\"col.footerContext()\"\n              />\n            </td>\n          }\n        </ng-container>\n      }\n\n      <!-- Selection pseudo-column emitted as a leading column when `selection.enabled` is true.\n           Hosts the master \"select all\" checkbox in the header and per-row checkboxes in the body.\n           The role=\"checkbox\" host on <tw-checkbox> is allowlisted by the row-click suppression\n           helper so clicking it does NOT also emit `rowClicked`. -->\n      @if (resolvedSelection().enabled) {\n        <ng-container cdkColumnDef=\"_selection\">\n          <th\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [class]=\"selectionHeaderClasses()\"\n            scope=\"col\"\n          >\n            <!-- Select-all needs a full row snapshot, which only the array\n                 data-source path can produce. Rendering it for an Observable /\n                 DataSource input gave a checkbox that looked functional, never\n                 reflected state, and did nothing on click. -->\n            @if (dataIsArray()) {\n              <tw-checkbox\n                size=\"sm\"\n                [checked]=\"masterChecked()\"\n                [indeterminate]=\"masterIndeterminate()\"\n                (change)=\"toggleMasterSelection($event)\"\n                [aria-label]=\"resolvedLabels().selectAllLabel\"\n              />\n            } @else {\n              <!-- Without the master checkbox this header cell would be\n                   literally empty, which axe reports as `empty-table-header`\n                   and which leaves the column unnamed in a screen reader's\n                   table summary. -->\n              <span class=\"sr-only\">{{ resolvedLabels().selectionColumnLabel }}</span>\n            }\n          </th>\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row; let i = index\"\n            [class]=\"selectionCellClasses()\"\n          >\n            <tw-checkbox\n              size=\"sm\"\n              [checked]=\"isSelected(row)\"\n              (change)=\"setSelected(row, $event)\"\n              [aria-label]=\"selectRowLabel(i)\"\n            />\n          </td>\n        </ng-container>\n      }\n\n      <!-- Auto-generated row defs driven by visibleColumnNames(). -->\n      @if (visibleColumnNames().length > 0) {\n        <tr\n          cdk-header-row\n          *cdkHeaderRowDef=\"visibleColumnNames(); sticky: stickyHeader()\"\n        ></tr>\n        <!-- Both index context variables are captured on purpose. CDK's\n             `CdkTable` sets `dataIndex` ONLY when `multiTemplateDataRows` is\n             enabled (row expansion); otherwise it sets `index` and leaves\n             `dataIndex` undefined. Reading just one gives `undefined` in the\n             other mode \u2014 which shipped as `rowClicked` emitting\n             `index: undefined` for every table without row expansion. -->\n        <!-- `tabindex` / `(keydown)` / the focus ring are all gated on\n             `clickableRows`. A static table must not put every row in the tab\n             order, and Angular gives no way to ask whether `(rowClicked)` has a\n             subscriber \u2014 so the consumer declares it. Deliberately NO `role`\n             override: a `<tr>` is a `row`, and retagging it `button` breaks the\n             table's structural role contract for its own cells. -->\n        <tr\n          cdk-row\n          *cdkRowDef=\"\n            let row;\n            let i = index;\n            let di = dataIndex;\n            columns: visibleColumnNames()\n          \"\n          [class]=\"dataRowClasses()\"\n          (click)=\"handleRowClick(row, di ?? i, $event)\"\n          (keydown)=\"handleRowKeydown(row, di ?? i, $event)\"\n          [attr.tabindex]=\"rowTabIndex()\"\n          [attr.aria-selected]=\"rowAriaSelected(row)\"\n        ></tr>\n        @if (hasFooterRow()) {\n          <tr\n            cdk-footer-row\n            *cdkFooterRowDef=\"visibleColumnNames(); sticky: stickyFooter()\"\n          ></tr>\n        }\n      }\n\n      <!-- Expansion pseudo-column + extra row def. -->\n      @if (hasExpansion()) {\n        <ng-container cdkColumnDef=\"_tw_expansion\">\n          <td\n            cdk-cell\n            *cdkCellDef=\"let row; let i = dataIndex\"\n            [attr.colspan]=\"expansionColspan()\"\n            [class]=\"expansionCellClasses()\"\n          >\n            @if (expansionTemplate(); as tpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.template\"\n                [ngTemplateOutletContext]=\"expansionContext(row, i)\"\n              />\n            }\n          </td>\n        </ng-container>\n        <tr\n          cdk-row\n          *cdkRowDef=\"let row; columns: ['_tw_expansion']; when: expansionWhen\"\n          [class]=\"expansionRowClasses()\"\n        ></tr>\n      }\n\n      <!-- Consumer-projected content: tw-column metadata components and ng-template-based\n           directives (*twNoDataRow, *twRowExpansion). The tw-column hosts are display:none\n           so they are harmless inside the <table>. -->\n      <ng-content />\n    </table>\n\n    <!-- Empty-state fallback overlay (hidden when a *twNoDataRow is projected; hidden when loading/error). -->\n    @if (shouldRenderEmptyOverlay()) {\n      <div [class]=\"emptyStateClasses()\">\n        <ng-content select=\"[slot='empty']\">\n          <svg\n            [class]=\"emptyIconClasses()\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661l-2.4-8.022A2.25 2.25 0 0 0 17.128 3.5H6.873a2.25 2.25 0 0 0-2.122 1.655l-2.4 8.022a2.25 2.25 0 0 0-.1.661Z\"\n            />\n          </svg>\n          <p [class]=\"emptyMessageClasses()\">{{ resolvedLabels().empty }}</p>\n        </ng-content>\n      </div>\n    }\n\n    <!-- Error-state overlay. -->\n    @if (shouldRenderErrorOverlay()) {\n      <div [class]=\"errorStateClasses()\" role=\"alert\">\n        <ng-content select=\"[slot='error']\">\n          <svg\n            [class]=\"errorIconClasses()\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z\"\n            />\n          </svg>\n          <p [class]=\"errorMessageClasses()\">{{ errorMessage() }}</p>\n        </ng-content>\n      </div>\n    }\n\n    <!--\n      Loading overlay (absolute-positioned inside scroll wrapper).\n\n      Deliberately NOT a live region. The loading string is announced by\n      `LiveAnnouncer` from the effect in table.ts; carrying `role=\"status\"`\n      (which implies `aria-live=\"polite\"`) here as well made screen readers\n      announce the same text twice on every fetch. The visible text stays \u2014\n      it is the sighted user's loading affordance \u2014 it just no longer\n      announces itself.\n    -->\n    @if (loading()) {\n      <div\n        [class]=\"loadingOverlayClasses()\"\n        data-tw-table-loading\n        animate.enter=\"fade-in\"\n        animate.leave=\"fade-out\"\n      >\n        <ng-content select=\"[slot='loading']\">\n          <svg\n            class=\"size-5 shrink-0 animate-spin motion-reduce:animate-none text-fg-muted\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n          >\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              stroke-width=\"3\"\n              opacity=\"0.2\"\n            />\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              stroke-width=\"3\"\n              stroke-linecap=\"round\"\n              stroke-dasharray=\"60\"\n              stroke-dashoffset=\"40\"\n            />\n          </svg>\n          <span [class]=\"loadingMessageClasses()\">{{ resolvedLabels().loading }}</span>\n        </ng-content>\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Footer slot \u2014 hidden when empty via `empty:hidden` in the slot class. -->\n<div [class]=\"footerSlotClasses()\">\n  <ng-content select=\"[slot='footer']\" />\n</div>\n\n<!-- Pagination slot \u2014 hidden when empty via `empty:hidden` in the slot class. -->\n<div [class]=\"paginationSlotClasses()\">\n  <ng-content select=\"[slot='pagination']\" />\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], multiTemplateRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiTemplateRows", required: false }] }], clickableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickableRows", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], expandedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRows", required: false }] }, { type: i0.Output, args: ["expandedRowsChange"] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], expansionChange: [{ type: i0.Output, args: ["expansionChange"] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ColumnComponent), { ...{ descendants: true }, isSignal: true }] }], noDataRow: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NoDataRowDirective), { ...{ descendants: true }, isSignal: true }] }], expansionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RowExpansionDirective), { ...{ descendants: true }, isSignal: true }] }], cdkTable: [{ type: i0.ViewChild, args: ['cdkTable', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.