@cdevhub/ngx-tw 0.2.1 → 0.4.0

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

@@ -272,10 +272,10 @@ class CellDefDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CellDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: CellDefDirective, isStandalone: true, selector: "[twCellDef]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CellDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: CellDefDirective, isStandalone: true, selector: "[twCellDef]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CellDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CellDefDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[twCellDef]' }]
         }] });
@@ -287,10 +287,10 @@ class HeaderCellDefDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: HeaderCellDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: HeaderCellDefDirective, isStandalone: true, selector: "[twHeaderCellDef]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HeaderCellDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HeaderCellDefDirective, isStandalone: true, selector: "[twHeaderCellDef]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: HeaderCellDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HeaderCellDefDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[twHeaderCellDef]' }]
         }] });
@@ -302,10 +302,10 @@ class FooterCellDefDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FooterCellDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: FooterCellDefDirective, isStandalone: true, selector: "[twFooterCellDef]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FooterCellDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: FooterCellDefDirective, isStandalone: true, selector: "[twFooterCellDef]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FooterCellDefDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FooterCellDefDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[twFooterCellDef]' }]
         }] });
@@ -317,10 +317,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 // carry custom templates the consumer projects.
 /** Structural directive on an `<ng-template>` declaring the no-data row fallback. Takes precedence over `[slot="empty"]` when both are present. */
 class NoDataRowDirective extends CdkNoDataRow {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NoDataRowDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: NoDataRowDirective, isStandalone: true, selector: "ng-template[twNoDataRow]", providers: [{ provide: CdkNoDataRow, useExisting: NoDataRowDirective }], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NoDataRowDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: NoDataRowDirective, isStandalone: true, selector: "ng-template[twNoDataRow]", providers: [{ provide: CdkNoDataRow, useExisting: NoDataRowDirective }], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NoDataRowDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NoDataRowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[twNoDataRow]',
@@ -337,10 +337,10 @@ class RowExpansionDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RowExpansionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: RowExpansionDirective, isStandalone: true, selector: "ng-template[twRowExpansion]", inputs: { predicate: { classPropertyName: "predicate", publicName: "twRowExpansionWhen", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RowExpansionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: RowExpansionDirective, isStandalone: true, selector: "ng-template[twRowExpansion]", inputs: { predicate: { classPropertyName: "predicate", publicName: "twRowExpansionWhen", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RowExpansionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RowExpansionDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[twRowExpansion]' }]
         }], propDecorators: { predicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "twRowExpansionWhen", required: false }] }] } });
@@ -363,17 +363,23 @@ let nextColumnId = 0;
  */
 class ColumnComponent {
     /** Unique identifier for this column. Required — referenced by `*twRowDef` / `*twHeaderRowDef` and used as the CDK `cdkColumnDef` name. */
-    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    name = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     /** Visual configuration: sticky, align, numeric, hideBelow, width. Accepts any subset; unset keys fall back to the defaults. */
-    display = input({}, ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+    display = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
     /** When true, removes this column from the visible column set. Defaults to `false`. */
-    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    hidden = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
     /** Ordering hint for the default visible-columns list when no `*twRowDef` is declared. Lower renders first. Defaults to `0`. */
-    priority = input(0, ...(ngDevMode ? [{ debugName: "priority" }] : /* istanbul ignore next */ []));
+    priority = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "priority" }] : /* istanbul ignore next */ []));
     /** Plain text header label. Used when no `*twHeaderCellDef` template is projected. Defaults to `undefined`. */
-    headerLabel = input(undefined, ...(ngDevMode ? [{ debugName: "headerLabel" }] : /* istanbul ignore next */ []));
+    headerLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerLabel" }] : /* istanbul ignore next */ []));
     /** Label used as `data-label` on cells in responsive `'stack'` mode. Falls back to `headerLabel`, then `name`. Defaults to `undefined`. */
-    stackLabel = input(undefined, ...(ngDevMode ? [{ debugName: "stackLabel" }] : /* istanbul ignore next */ []));
+    stackLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stackLabel" }] : /* istanbul ignore next */ []));
     /**
      * Explicit override for the column header's `aria-sort` attribute. When unset (the default),
      * the column derives its `aria-sort` from a parent `[twSort]` directive via the `TW_SORT_HANDLE`
@@ -381,53 +387,72 @@ class ColumnComponent {
      * `name`. Set explicitly to `'ascending'` / `'descending'` / `'none'` to override; `null` disables
      * the attribute entirely. Defaults to `null`.
      */
-    sortState = input(null, ...(ngDevMode ? [{ debugName: "sortState" }] : /* istanbul ignore next */ []));
+    sortState = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortState" }] : /* istanbul ignore next */ []));
     /** @internal Stable identifier used for DOM `data-*` hooks. */
     columnId = `tw-column-${nextColumnId++}`;
     sortHandle = inject(TW_SORT_HANDLE, { optional: true });
     /** @internal Consumer-projected header-cell template (optional). */
-    headerCellDef = contentChild(HeaderCellDefDirective, ...(ngDevMode ? [{ debugName: "headerCellDef" }] : /* istanbul ignore next */ []));
+    headerCellDef = contentChild(HeaderCellDefDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerCellDef" }] : /* istanbul ignore next */ []));
     /** @internal Consumer-projected data-cell template. */
-    cellDef = contentChild((CellDefDirective), ...(ngDevMode ? [{ debugName: "cellDef" }] : /* istanbul ignore next */ []));
+    cellDef = contentChild((CellDefDirective), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellDef" }] : /* istanbul ignore next */ []));
     /** @internal Consumer-projected footer-cell template (optional). */
-    footerCellDef = contentChild((FooterCellDefDirective), ...(ngDevMode ? [{ debugName: "footerCellDef" }] : /* istanbul ignore next */ []));
+    footerCellDef = contentChild((FooterCellDefDirective), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerCellDef" }] : /* istanbul ignore next */ []));
     /** @internal Index in the visible column set — pushed by the parent table. */
-    columnIndex = signal(0, ...(ngDevMode ? [{ debugName: "columnIndex" }] : /* istanbul ignore next */ []));
+    columnIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnIndex" }] : /* istanbul ignore next */ []));
     /** @internal Row snapshot pushed by the parent for footer-cell contexts. */
-    rowsSnapshot = signal([], ...(ngDevMode ? [{ debugName: "rowsSnapshot" }] : /* istanbul ignore next */ []));
+    rowsSnapshot = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowsSnapshot" }] : /* istanbul ignore next */ []));
     /** @internal Table-pushed extra classes (sticky / hide-below / responsive decorations). */
-    extraCellClass = signal('', ...(ngDevMode ? [{ debugName: "extraCellClass" }] : /* istanbul ignore next */ []));
-    extraHeaderClass = signal('', ...(ngDevMode ? [{ debugName: "extraHeaderClass" }] : /* istanbul ignore next */ []));
-    extraFooterClass = signal('', ...(ngDevMode ? [{ debugName: "extraFooterClass" }] : /* istanbul ignore next */ []));
+    extraCellClass = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "extraCellClass" }] : /* istanbul ignore next */ []));
+    extraHeaderClass = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "extraHeaderClass" }] : /* istanbul ignore next */ []));
+    extraFooterClass = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "extraFooterClass" }] : /* istanbul ignore next */ []));
     /** Resolved display config — partial input merged with `DISPLAY_DEFAULTS`. */
     resolvedDisplay = computed(() => ({
         ...DISPLAY_DEFAULTS,
         ...this.display(),
-    }), ...(ngDevMode ? [{ debugName: "resolvedDisplay" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDisplay" }] : /* istanbul ignore next */ []));
     /** @internal Convenience accessor for the cdkColumnDef `[sticky]` binding. */
-    stickyStart = computed(() => this.resolvedDisplay().sticky === 'start', ...(ngDevMode ? [{ debugName: "stickyStart" }] : /* istanbul ignore next */ []));
+    stickyStart = computed(() => this.resolvedDisplay().sticky === 'start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stickyStart" }] : /* istanbul ignore next */ []));
     /** @internal Convenience accessor for the cdkColumnDef `[stickyEnd]` binding. */
-    stickyEnd = computed(() => this.resolvedDisplay().sticky === 'end', ...(ngDevMode ? [{ debugName: "stickyEnd" }] : /* istanbul ignore next */ []));
+    stickyEnd = computed(() => this.resolvedDisplay().sticky === 'end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stickyEnd" }] : /* istanbul ignore next */ []));
     /** @internal Effective align — `numeric` forces `'end'` unless `align` is explicitly set to a non-default value. */
     effectiveAlign = computed(() => {
         const display = this.resolvedDisplay();
         if (display.align === 'start' && display.numeric)
             return 'end';
         return display.align;
-    }, ...(ngDevMode ? [{ debugName: "effectiveAlign" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveAlign" }] : /* istanbul ignore next */ []));
     /** @internal CSS width string applied to cells. */
-    resolvedWidth = computed(() => coerceCssSize(this.resolvedDisplay().width), ...(ngDevMode ? [{ debugName: "resolvedWidth" }] : /* istanbul ignore next */ []));
+    resolvedWidth = computed(() => coerceCssSize(this.resolvedDisplay().width), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedWidth" }] : /* istanbul ignore next */ []));
     /** @internal `data-label` emitted on cells in stack mode. */
-    stackDataLabel = computed(() => this.stackLabel() ?? this.headerLabel() ?? this.name(), ...(ngDevMode ? [{ debugName: "stackDataLabel" }] : /* istanbul ignore next */ []));
+    stackDataLabel = computed(() => this.stackLabel() ?? this.headerLabel() ?? this.name(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stackDataLabel" }] : /* istanbul ignore next */ []));
     /** @internal Align class plus tabular-numerals when `numeric` is true — shared by data and footer cells. */
     dataCellPrefix = computed(() => {
         const align = ALIGN_CLASSES[this.effectiveAlign()];
         const numeric = this.resolvedDisplay().numeric ? '[font-variant-numeric:tabular-nums]' : '';
         return numeric ? `${align} ${numeric}` : align;
-    }, ...(ngDevMode ? [{ debugName: "dataCellPrefix" }] : /* istanbul ignore next */ []));
-    cellClasses = computed(() => [this.dataCellPrefix(), this.extraCellClass()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "cellClasses" }] : /* istanbul ignore next */ []));
-    headerCellClasses = computed(() => [ALIGN_CLASSES[this.effectiveAlign()], this.extraHeaderClass()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "headerCellClasses" }] : /* istanbul ignore next */ []));
-    footerCellClasses = computed(() => [this.dataCellPrefix(), this.extraFooterClass()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "footerCellClasses" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataCellPrefix" }] : /* istanbul ignore next */ []));
+    cellClasses = computed(() => [this.dataCellPrefix(), this.extraCellClass()].filter(Boolean).join(' '), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellClasses" }] : /* istanbul ignore next */ []));
+    headerCellClasses = computed(() => [ALIGN_CLASSES[this.effectiveAlign()], this.extraHeaderClass()].filter(Boolean).join(' '), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerCellClasses" }] : /* istanbul ignore next */ []));
+    footerCellClasses = computed(() => [this.dataCellPrefix(), this.extraFooterClass()].filter(Boolean).join(' '), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerCellClasses" }] : /* istanbul ignore next */ []));
     /**
      * @internal `aria-sort` value for the column's `<th>`. Explicit `sortState` wins; otherwise the
      * column auto-resolves against a parent `[twSort]` directive (`TW_SORT_HANDLE`). Returns `null`
@@ -448,18 +473,21 @@ class ColumnComponent {
         if (direction === 'desc')
             return 'descending';
         return null;
-    }, ...(ngDevMode ? [{ debugName: "ariaSort" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSort" }] : /* istanbul ignore next */ []));
     headerContext = computed(() => ({
         $implicit: this.name(),
         column: this.name(),
         columnIndex: this.columnIndex(),
-    }), ...(ngDevMode ? [{ debugName: "headerContext" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerContext" }] : /* istanbul ignore next */ []));
     footerContext = computed(() => ({
         $implicit: this.name(),
         column: this.name(),
         columnIndex: this.columnIndex(),
         rows: this.rowsSnapshot(),
-    }), ...(ngDevMode ? [{ debugName: "footerContext" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerContext" }] : /* istanbul ignore next */ []));
     /** @internal Builds the per-cell template context from CDK-provided row variables. */
     buildCellContext(row, index, count, first, last, even, odd) {
         return {
@@ -475,10 +503,10 @@ class ColumnComponent {
             count,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: ColumnComponent, isStandalone: true, selector: "tw-column", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null }, headerLabel: { classPropertyName: "headerLabel", publicName: "headerLabel", isSignal: true, isRequired: false, transformFunction: null }, stackLabel: { classPropertyName: "stackLabel", publicName: "stackLabel", isSignal: true, isRequired: false, transformFunction: null }, sortState: { classPropertyName: "sortState", publicName: "sortState", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: none" }, queries: [{ propertyName: "headerCellDef", first: true, predicate: HeaderCellDefDirective, descendants: true, isSignal: true }, { propertyName: "cellDef", first: true, predicate: (CellDefDirective), descendants: true, isSignal: true }, { propertyName: "footerCellDef", first: true, predicate: (FooterCellDefDirective), descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: ColumnComponent, isStandalone: true, selector: "tw-column", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null }, headerLabel: { classPropertyName: "headerLabel", publicName: "headerLabel", isSignal: true, isRequired: false, transformFunction: null }, stackLabel: { classPropertyName: "stackLabel", publicName: "stackLabel", isSignal: true, isRequired: false, transformFunction: null }, sortState: { classPropertyName: "sortState", publicName: "sortState", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: none" }, queries: [{ propertyName: "headerCellDef", first: true, predicate: HeaderCellDefDirective, descendants: true, isSignal: true }, { propertyName: "cellDef", first: true, predicate: (CellDefDirective), descendants: true, isSignal: true }, { propertyName: "footerCellDef", first: true, predicate: (FooterCellDefDirective), descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tw-column',
@@ -502,34 +530,55 @@ let nextTableId = 0;
 class TableComponent {
     // ── Inputs ──
     /** The table's rows. Accepts a plain array, an `Observable<readonly T[]>`, or a CDK `DataSource<T>`. Wired directly to `CdkTable.dataSource`. Defaults to an empty array. */
-    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    /** Tracking function used by CDK to identify rows across data changes. When unset, CDK uses identity. */
-    trackBy = input(undefined, ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
+    data = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /**
+     * Tracking function used to identify rows across data changes. When unset, rows are identified by
+     * object reference.
+     *
+     * This drives **selection and expansion membership** as well as CDK's DOM diffing. Supply it when
+     * the data source re-emits equal-but-new objects — an HTTP refetch, an immutable store — or the
+     * user's selection empties on every refresh with no event and no error. It is called with `-1` as
+     * the index for membership lookups, so return a value derived from the row alone (`row.id`), not
+     * from the index.
+     */
+    trackBy = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
     /** When true, renders the loading slot as an overlay and applies `opacity-60 pointer-events-none` to the body. Defaults to `false`. */
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     /** When non-null, renders the error slot in place of the body. Defaults to `null`. */
-    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    error = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
     /** Visual configuration — `variant`, `density`, `size`, `layout`, `rowAnimations`. Accepts a partial; unset keys fall back to the defaults. */
-    appearance = input({}, ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    appearance = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
     /** Sticky configuration — `header`, `footer`, `scrollHeight`. Accepts a partial; unset keys fall back to the defaults. */
-    sticky = input({}, ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+    sticky = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
     /** Responsive configuration — `mode`, `stackBelow`. Accepts a partial; unset keys fall back to the defaults. */
-    responsive = input({}, ...(ngDevMode ? [{ debugName: "responsive" }] : /* istanbul ignore next */ []));
+    responsive = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "responsive" }] : /* istanbul ignore next */ []));
     /** Selection configuration — `enabled`. Accepts a partial; unset keys fall back to the defaults. */
-    selection = input({}, ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    selection = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
     /** Whether multiple row templates may render per data object. Required for `*twRowExpansion` and advanced `*twRowDef [when]` usage. Defaults to `false`. */
-    multiTemplateRows = input(false, ...(ngDevMode ? [{ debugName: "multiTemplateRows" }] : /* istanbul ignore next */ []));
+    multiTemplateRows = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiTemplateRows" }] : /* istanbul ignore next */ []));
     /** Overrides for user-facing strings. Unset keys fall back to the English defaults. Defaults to `{}`. */
-    labels = input({}, ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    labels = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
     /** Accessible name for the `<table>`. Required when no visible `<caption slot="caption">` is provided. */
     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>`. */
     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. */
-    expandedRows = model(new Set(), ...(ngDevMode ? [{ debugName: "expandedRows" }] : /* istanbul ignore next */ []));
+    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`. */
-    selected = model([], ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    selected = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     // ── Outputs ──
     /** Fires when a row is clicked. Suppressed when the click originated inside an interactive descendant (button, link, input, etc.). */
     rowClicked = output();
@@ -546,7 +595,8 @@ class TableComponent {
     expansionTemplate = contentChild((RowExpansionDirective), { ...(ngDevMode ? { debugName: "expansionTemplate" } : /* istanbul ignore next */ {}), descendants: true });
     // ── View children ──
     /** @internal The CDK table inside our view. */
-    cdkTable = viewChild.required('cdkTable');
+    cdkTable = viewChild.required('cdkTable', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cdkTable" }] : /* istanbul ignore next */ []));
     // ── Injected services ──
     _liveAnnouncer = inject(LiveAnnouncer);
     _elementRef = inject((ElementRef));
@@ -561,74 +611,93 @@ class TableComponent {
     resolvedAppearance = computed(() => ({
         ...APPEARANCE_DEFAULTS,
         ...this.appearance(),
-    }), ...(ngDevMode ? [{ debugName: "resolvedAppearance" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAppearance" }] : /* istanbul ignore next */ []));
     /** @internal Resolved sticky configuration. */
     resolvedSticky = computed(() => ({
         ...STICKY_DEFAULTS,
         ...this.sticky(),
-    }), ...(ngDevMode ? [{ debugName: "resolvedSticky" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSticky" }] : /* istanbul ignore next */ []));
     /** @internal Resolved responsive configuration. */
     resolvedResponsive = computed(() => ({
         ...RESPONSIVE_DEFAULTS,
         ...this.responsive(),
-    }), ...(ngDevMode ? [{ debugName: "resolvedResponsive" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedResponsive" }] : /* istanbul ignore next */ []));
     /** @internal Resolved selection configuration. */
     resolvedSelection = computed(() => ({
         ...SELECTION_DEFAULTS,
         ...this.selection(),
-    }), ...(ngDevMode ? [{ debugName: "resolvedSelection" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSelection" }] : /* istanbul ignore next */ []));
     // ── Derived state ──
     /** @internal Snapshot of the data array (for footer-cell context). Empty array for async data sources. */
     resolvedRows = computed(() => {
         const d = this.data();
         return Array.isArray(d) ? d : [];
-    }, ...(ngDevMode ? [{ debugName: "resolvedRows" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedRows" }] : /* istanbul ignore next */ []));
     /** @internal Whether the data input is a plain array. */
-    dataIsArray = computed(() => Array.isArray(this.data()), ...(ngDevMode ? [{ debugName: "dataIsArray" }] : /* istanbul ignore next */ []));
+    dataIsArray = computed(() => Array.isArray(this.data()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataIsArray" }] : /* istanbul ignore next */ []));
     /** @internal Snapshot-based empty check; `false` for async sources (we can't know without subscribing). */
-    isEmptySnapshot = computed(() => this.dataIsArray() && this.resolvedRows().length === 0, ...(ngDevMode ? [{ debugName: "isEmptySnapshot" }] : /* istanbul ignore next */ []));
+    isEmptySnapshot = computed(() => this.dataIsArray() && this.resolvedRows().length === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEmptySnapshot" }] : /* istanbul ignore next */ []));
     /** @internal Whether the empty overlay fallback should render (no no-data-row projected). */
     shouldRenderEmptyOverlay = computed(() => this.isEmptySnapshot() &&
         !this.loading() &&
         this.error() === null &&
-        !this.noDataRow(), ...(ngDevMode ? [{ debugName: "shouldRenderEmptyOverlay" }] : /* istanbul ignore next */ []));
+        !this.noDataRow(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shouldRenderEmptyOverlay" }] : /* istanbul ignore next */ []));
     /** @internal Whether the error overlay should render. */
-    shouldRenderErrorOverlay = computed(() => this.error() !== null, ...(ngDevMode ? [{ debugName: "shouldRenderErrorOverlay" }] : /* istanbul ignore next */ []));
+    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(),
-    }), ...(ngDevMode ? [{ debugName: "resolvedLabels" }] : /* istanbul ignore next */ []));
+    }), /* @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(() => {
         const err = this.error();
         if (err == null)
             return '';
         return `${this.resolvedLabels().errorPrefix}${String(err)}`;
-    }, ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     /** @internal CSS max-height string for the scroll container. */
-    maxHeightStyle = computed(() => coerceCssSize(this.resolvedSticky().scrollHeight), ...(ngDevMode ? [{ debugName: "maxHeightStyle" }] : /* istanbul ignore next */ []));
+    maxHeightStyle = computed(() => coerceCssSize(this.resolvedSticky().scrollHeight), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxHeightStyle" }] : /* istanbul ignore next */ []));
     /** @internal The visible (non-hidden) columns in render order (by ascending `priority`). */
     visibleColumns = computed(() => this.columns()
         .filter((c) => !c.hidden())
-        .sort((a, b) => a.priority() - b.priority()), ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
+        .sort((a, b) => a.priority() - b.priority()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
     /** @internal Column names of the visible set, prefixed with `_selection` when `selection.enabled === true`. */
     visibleColumnNames = computed(() => {
         const names = this.visibleColumns().map((c) => c.name());
         return this.resolvedSelection().enabled ? ['_selection', ...names] : names;
-    }, ...(ngDevMode ? [{ debugName: "visibleColumnNames" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleColumnNames" }] : /* istanbul ignore next */ []));
     /** @internal Whether any column has a projected footer-cell template. */
-    hasFooterRow = computed(() => this.visibleColumns().some((c) => !!c.footerCellDef()), ...(ngDevMode ? [{ debugName: "hasFooterRow" }] : /* istanbul ignore next */ []));
+    hasFooterRow = computed(() => this.visibleColumns().some((c) => !!c.footerCellDef()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasFooterRow" }] : /* istanbul ignore next */ []));
     /** @internal Whether an expansion template has been declared and multi-template rows are enabled. */
-    hasExpansion = computed(() => this.multiTemplateRows() && !!this.expansionTemplate(), ...(ngDevMode ? [{ debugName: "hasExpansion" }] : /* istanbul ignore next */ []));
+    hasExpansion = computed(() => this.multiTemplateRows() && !!this.expansionTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasExpansion" }] : /* istanbul ignore next */ []));
     /** @internal Colspan to use for the expansion `<td>`. */
     expansionColspan = computed(() => {
         const cols = this.visibleColumns().length;
         return Math.max(1, cols + (this.resolvedSelection().enabled ? 1 : 0));
-    }, ...(ngDevMode ? [{ debugName: "expansionColspan" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expansionColspan" }] : /* istanbul ignore next */ []));
     /** @internal Pulled by the template for the `*cdkHeaderRowDef`/`*cdkFooterRowDef` `sticky:` field. */
-    stickyHeader = computed(() => this.resolvedSticky().header, ...(ngDevMode ? [{ debugName: "stickyHeader" }] : /* istanbul ignore next */ []));
-    stickyFooter = computed(() => this.resolvedSticky().footer, ...(ngDevMode ? [{ debugName: "stickyFooter" }] : /* istanbul ignore next */ []));
+    stickyHeader = computed(() => this.resolvedSticky().header, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stickyHeader" }] : /* istanbul ignore next */ []));
+    stickyFooter = computed(() => this.resolvedSticky().footer, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stickyFooter" }] : /* istanbul ignore next */ []));
     // ── Variant class computation ──
     _variantResult = computed(() => {
         const appearance = this.resolvedAppearance();
@@ -642,22 +711,29 @@ class TableComponent {
             stickyFooter: stickyCfg.footer,
             loading: this.loading(),
         });
-    }, ...(ngDevMode ? [{ debugName: "_variantResult" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => this._variantResult().root(), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    toolbarClasses = computed(() => this._variantResult().toolbar(), ...(ngDevMode ? [{ debugName: "toolbarClasses" }] : /* istanbul ignore next */ []));
-    scrollWrapperClasses = computed(() => this._variantResult().scrollWrapper(), ...(ngDevMode ? [{ debugName: "scrollWrapperClasses" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_variantResult" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => this._variantResult().root(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    toolbarClasses = computed(() => this._variantResult().toolbar(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbarClasses" }] : /* istanbul ignore next */ []));
+    scrollWrapperClasses = computed(() => this._variantResult().scrollWrapper(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollWrapperClasses" }] : /* istanbul ignore next */ []));
     scrollContainerClasses = computed(() => {
         const base = this._variantResult().scrollContainer();
         return this.maxHeightStyle() ? `${base} overflow-y-auto` : base;
-    }, ...(ngDevMode ? [{ debugName: "scrollContainerClasses" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollContainerClasses" }] : /* istanbul ignore next */ []));
     tableClasses = computed(() => {
         const base = this._variantResult().table();
         const responsive = this.resolvedResponsive();
         if (responsive.mode !== 'stack')
             return base;
         return `${base} ${STACK_TABLE_UTILITIES[responsive.stackBelow]}`;
-    }, ...(ngDevMode ? [{ debugName: "tableClasses" }] : /* istanbul ignore next */ []));
-    thClasses = computed(() => this._variantResult().th(), ...(ngDevMode ? [{ debugName: "thClasses" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tableClasses" }] : /* istanbul ignore next */ []));
+    thClasses = computed(() => this._variantResult().th(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "thClasses" }] : /* istanbul ignore next */ []));
     tdClasses = computed(() => {
         const base = this._variantResult().td();
         const responsive = this.resolvedResponsive();
@@ -665,28 +741,44 @@ class TableComponent {
             return `${base} ${STACK_CELL_UTILITIES[responsive.stackBelow]}`;
         }
         return base;
-    }, ...(ngDevMode ? [{ debugName: "tdClasses" }] : /* istanbul ignore next */ []));
-    footerTdClasses = computed(() => this._variantResult().footerTd(), ...(ngDevMode ? [{ debugName: "footerTdClasses" }] : /* istanbul ignore next */ []));
-    emptyStateClasses = computed(() => this._variantResult().emptyState(), ...(ngDevMode ? [{ debugName: "emptyStateClasses" }] : /* istanbul ignore next */ []));
-    emptyIconClasses = computed(() => this._variantResult().emptyIcon(), ...(ngDevMode ? [{ debugName: "emptyIconClasses" }] : /* istanbul ignore next */ []));
-    emptyMessageClasses = computed(() => this._variantResult().emptyMessage(), ...(ngDevMode ? [{ debugName: "emptyMessageClasses" }] : /* istanbul ignore next */ []));
-    loadingOverlayClasses = computed(() => this._variantResult().loadingOverlay(), ...(ngDevMode ? [{ debugName: "loadingOverlayClasses" }] : /* istanbul ignore next */ []));
-    loadingMessageClasses = computed(() => this._variantResult().loadingMessage(), ...(ngDevMode ? [{ debugName: "loadingMessageClasses" }] : /* istanbul ignore next */ []));
-    errorStateClasses = computed(() => this._variantResult().errorState(), ...(ngDevMode ? [{ debugName: "errorStateClasses" }] : /* istanbul ignore next */ []));
-    errorIconClasses = computed(() => this._variantResult().errorIcon(), ...(ngDevMode ? [{ debugName: "errorIconClasses" }] : /* istanbul ignore next */ []));
-    errorMessageClasses = computed(() => this._variantResult().errorMessage(), ...(ngDevMode ? [{ debugName: "errorMessageClasses" }] : /* istanbul ignore next */ []));
-    footerSlotClasses = computed(() => this._variantResult().footerSlot(), ...(ngDevMode ? [{ debugName: "footerSlotClasses" }] : /* istanbul ignore next */ []));
-    paginationSlotClasses = computed(() => this._variantResult().paginationSlot(), ...(ngDevMode ? [{ debugName: "paginationSlotClasses" }] : /* istanbul ignore next */ []));
-    expansionRowClasses = computed(() => this._variantResult().expansionRow(), ...(ngDevMode ? [{ debugName: "expansionRowClasses" }] : /* istanbul ignore next */ []));
-    expansionCellClasses = computed(() => this._variantResult().expansionCell(), ...(ngDevMode ? [{ debugName: "expansionCellClasses" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tdClasses" }] : /* istanbul ignore next */ []));
+    footerTdClasses = computed(() => this._variantResult().footerTd(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerTdClasses" }] : /* istanbul ignore next */ []));
+    emptyStateClasses = computed(() => this._variantResult().emptyState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyStateClasses" }] : /* istanbul ignore next */ []));
+    emptyIconClasses = computed(() => this._variantResult().emptyIcon(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyIconClasses" }] : /* istanbul ignore next */ []));
+    emptyMessageClasses = computed(() => this._variantResult().emptyMessage(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyMessageClasses" }] : /* istanbul ignore next */ []));
+    loadingOverlayClasses = computed(() => this._variantResult().loadingOverlay(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingOverlayClasses" }] : /* istanbul ignore next */ []));
+    loadingMessageClasses = computed(() => this._variantResult().loadingMessage(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingMessageClasses" }] : /* istanbul ignore next */ []));
+    errorStateClasses = computed(() => this._variantResult().errorState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorStateClasses" }] : /* istanbul ignore next */ []));
+    errorIconClasses = computed(() => this._variantResult().errorIcon(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorIconClasses" }] : /* istanbul ignore next */ []));
+    errorMessageClasses = computed(() => this._variantResult().errorMessage(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorMessageClasses" }] : /* istanbul ignore next */ []));
+    footerSlotClasses = computed(() => this._variantResult().footerSlot(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerSlotClasses" }] : /* istanbul ignore next */ []));
+    paginationSlotClasses = computed(() => this._variantResult().paginationSlot(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paginationSlotClasses" }] : /* istanbul ignore next */ []));
+    expansionRowClasses = computed(() => this._variantResult().expansionRow(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expansionRowClasses" }] : /* istanbul ignore next */ []));
+    expansionCellClasses = computed(() => this._variantResult().expansionCell(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expansionCellClasses" }] : /* istanbul ignore next */ []));
     selectionHeaderClasses = computed(() => {
         const base = this._variantResult().selectionHeader();
         return [base, this.thClasses()].filter(Boolean).join(' ');
-    }, ...(ngDevMode ? [{ debugName: "selectionHeaderClasses" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionHeaderClasses" }] : /* istanbul ignore next */ []));
     selectionCellClasses = computed(() => {
         const base = this._variantResult().selectionCell();
         return [base, this.tdClasses()].filter(Boolean).join(' ');
-    }, ...(ngDevMode ? [{ debugName: "selectionCellClasses" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionCellClasses" }] : /* istanbul ignore next */ []));
     // ── CdkTable wiring ──
     //
     // All CdkColumnDefs + row defs are rendered INLINE in our template (see
@@ -841,7 +933,23 @@ class TableComponent {
     }
     /** @internal Whether a row is currently expanded. */
     isRowExpanded(row) {
-        return this.expandedRows().has(row);
+        const expanded = this.expandedRows();
+        if (expanded.has(row))
+            return true;
+        // `expandedRows` is a public `model<ReadonlySet<T>>`, and a JS Set cannot
+        // take custom equality — so unlike selection this cannot be a keyed Set
+        // without a breaking API change. A scan is acceptable here: expansion
+        // holds a handful of rows, not the whole page. Skipped entirely when no
+        // `trackBy` is supplied, since the reference check above is then complete.
+        const track = this.trackBy();
+        if (!track)
+            return false;
+        const key = this.rowKey(row);
+        for (const candidate of expanded) {
+            if (this.rowKey(candidate) === key)
+                return true;
+        }
+        return false;
     }
     /** @internal CDK `when` predicate used for the auto-generated expansion row. */
     expansionWhen = (index, row) => {
@@ -877,7 +985,17 @@ class TableComponent {
         if (!this.isRowExpanded(row))
             return;
         const next = new Set(this.expandedRows());
-        next.delete(row);
+        if (!next.delete(row)) {
+            // Row was matched by key rather than by reference — find and drop the
+            // instance actually held in the set.
+            const key = this.rowKey(row);
+            for (const candidate of next) {
+                if (this.rowKey(candidate) === key) {
+                    next.delete(candidate);
+                    break;
+                }
+            }
+        }
         this.expandedRows.set(next);
         this.expansionChange.emit({ row, expanded: false, expandedRows: next });
     }
@@ -888,17 +1006,44 @@ class TableComponent {
         else
             this.expand(row);
     }
+    /**
+     * @internal Identity key for a row.
+     *
+     * Selection and expansion are membership questions, and answering them by
+     * object reference breaks the moment a data source re-emits equal-but-new
+     * objects — an HTTP refetch, an immutable store, `signal.set([...mapped])`.
+     * The user's selection empties with no event and no error.
+     *
+     * `trackBy` is already the consumer's declaration of row identity, so it is
+     * reused here rather than adding a second, redundant input. With no `trackBy`
+     * the key IS the row, i.e. reference identity — the same default CDK uses.
+     *
+     * Note this must be a *key* function, not a comparator: a comparator would fix
+     * identity but leave membership as an O(rows x selected) scan, and a
+     * reference-keyed Set would fix the scan but ignore custom identity. Only a
+     * key fixes both.
+     */
+    rowKey(row) {
+        const track = this.trackBy();
+        return track ? track(-1, row) : row;
+    }
+    /** @internal O(1) membership lookup for the current selection, keyed by `rowKey`. */
+    selectedKeys = computed(() => new Set(this.selected().map((row) => this.rowKey(row))), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
     /** Whether a given row is currently in the `selected` list. */
     isSelected(row) {
-        return this.selected().includes(row);
+        return this.selectedKeys().has(this.rowKey(row));
     }
     /** Selects or deselects a row and emits `selectionChange`. */
     setSelected(row, nextSelected) {
         const previous = this.selected();
-        const isAlreadySelected = previous.includes(row);
+        const key = this.rowKey(row);
+        const isAlreadySelected = this.selectedKeys().has(key);
         if (isAlreadySelected === nextSelected)
             return;
-        const next = nextSelected ? [...previous, row] : previous.filter((r) => r !== row);
+        const next = nextSelected
+            ? [...previous, row]
+            : previous.filter((r) => this.rowKey(r) !== key);
         this.selected.set(next);
         this.selectionChange.emit({
             selected: next,
@@ -917,10 +1062,10 @@ class TableComponent {
         if (rows.length === 0)
             return;
         const previous = this.selected();
-        const previousSet = new Set(previous);
+        const previousKeys = this.selectedKeys();
         const added = [];
         for (const row of rows) {
-            if (!previousSet.has(row))
+            if (!previousKeys.has(this.rowKey(row)))
                 added.push(row);
         }
         if (added.length === 0)
@@ -954,17 +1099,20 @@ class TableComponent {
         const selected = this.selected();
         if (selected.length === 0)
             return 'none';
-        const selectedSet = new Set(selected);
+        const selectedKeys = this.selectedKeys();
         for (const row of rows) {
-            if (!selectedSet.has(row))
+            if (!selectedKeys.has(this.rowKey(row)))
                 return 'some';
         }
         return 'all';
-    }, ...(ngDevMode ? [{ debugName: "masterSelectionState" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "masterSelectionState" }] : /* istanbul ignore next */ []));
     /** @internal Whether the master "select all" checkbox should render checked. */
-    masterChecked = computed(() => this.masterSelectionState() === 'all', ...(ngDevMode ? [{ debugName: "masterChecked" }] : /* istanbul ignore next */ []));
+    masterChecked = computed(() => this.masterSelectionState() === 'all', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "masterChecked" }] : /* istanbul ignore next */ []));
     /** @internal Whether the master "select all" checkbox should render indeterminate. */
-    masterIndeterminate = computed(() => this.masterSelectionState() === 'some', ...(ngDevMode ? [{ debugName: "masterIndeterminate" }] : /* istanbul ignore next */ []));
+    masterIndeterminate = computed(() => this.masterSelectionState() === 'some', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "masterIndeterminate" }] : /* istanbul ignore next */ []));
     /** @internal Wires the master checkbox change event to `selectAll` / `clearSelection`. */
     toggleMasterSelection(checked) {
         if (checked)
@@ -976,14 +1124,14 @@ class TableComponent {
     selectRowLabel(rowIndex) {
         return formatLabel(this.resolvedLabels().selectRowLabel, { index: rowIndex + 1 });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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            <tw-checkbox\n              size=\"sm\"\n              [checked]=\"masterChecked()\"\n              [indeterminate]=\"masterIndeterminate()\"\n              (change)=\"toggleMasterSelection($event)\"\n              [aria-label]=\"resolvedLabels().selectAllLabel\"\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 ɵ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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableComponent, decorators: [{
+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            <tw-checkbox\n              size=\"sm\"\n              [checked]=\"masterChecked()\"\n              [indeterminate]=\"masterIndeterminate()\"\n              (change)=\"toggleMasterSelection($event)\"\n              [aria-label]=\"resolvedLabels().selectAllLabel\"\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" }]
+                    }, 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 }] }] } });
 
 /**