@cdevhub/ngx-tw 0.2.0

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

@@ -0,0 +1,994 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, contentChild, signal, computed, ChangeDetectionStrategy, Component, model, output, contentChildren, viewChild, ElementRef, DestroyRef, effect, untracked, isDevMode, afterNextRender } from '@angular/core';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import * as i1 from '@angular/cdk/table';
+import { CdkNoDataRow, CdkTableModule } from '@angular/cdk/table';
+import { tv } from 'tailwind-variants';
+import { CheckboxComponent } from '@cdevhub/ngx-tw/checkbox';
+import { TW_SORT_HANDLE } from '@cdevhub/ngx-tw/core';
+export { DataSource } from '@angular/cdk/collections';
+
+/*
+ * tw-table — wraps Angular CDK's CdkTable with a declarative <tw-column> API,
+ * slot-based chrome (caption, toolbar, empty, loading, error, footer, pagination),
+ * responsive (scroll / stack / hide) + sticky + layout controls, and typed
+ * template contexts per cell/row/footer/expansion.
+ *
+ * v2 input shape — visual/behavioral concerns are grouped into config objects:
+ *   - `appearance`  { variant, density, size, layout, rowAnimations }
+ *   - `sticky`      { header, footer, scrollHeight }
+ *   - `responsive`  { mode, stackBelow }
+ *   - `selection`   { enabled }
+ *   - `<tw-column>` `display` { sticky, align, numeric, hideBelow, width }
+ *
+ * Each config input accepts a partial object; unset keys fall back to the documented
+ * defaults (see `APPEARANCE_DEFAULTS`, etc.). Data, state, mechanical mode flags, i18n
+ * and a11y attributes stay flat.
+ *
+ * Out of scope for v1:
+ *   - Column resize, drag-reorder
+ *   - CDK virtual scroll viewport integration
+ *   - Inline cell editing
+ *   - Filter UI primitives
+ *   - Arrow-key "grid" pattern keyboard navigation (APG)
+ */
+// ── Resolved-default constants ───────────────────────────────────────
+const APPEARANCE_DEFAULTS = {
+    variant: 'default',
+    density: 'comfortable',
+    size: 'md',
+    layout: 'auto',
+    rowAnimations: false,
+};
+const STICKY_DEFAULTS = {
+    header: false,
+    footer: false,
+    scrollHeight: null,
+};
+const RESPONSIVE_DEFAULTS = {
+    mode: 'scroll',
+    stackBelow: 'md',
+};
+const SELECTION_DEFAULTS = {
+    enabled: false,
+};
+const DISPLAY_DEFAULTS = {
+    sticky: false,
+    align: 'start',
+    numeric: false,
+    hideBelow: null,
+    width: null,
+};
+/** Default English labels for the table. */
+const DEFAULT_TABLE_LABELS = {
+    ariaLabel: 'Data table',
+    empty: 'No data',
+    loading: 'Loading…',
+    errorPrefix: 'Error: ',
+    rowsUpdatedAnnouncement: '{count} rows loaded',
+    selectionAnnouncement: '{count} rows selected',
+    expandRowLabel: 'Expand row',
+    collapseRowLabel: 'Collapse row',
+    selectAllLabel: 'Select all rows',
+    selectRowLabel: 'Select row {index}',
+};
+// ── tv() config ──────────────────────────────────────────────────────
+// CDK renders `<thead>` / `<tbody>` / `<tfoot>` inside its native-table template;
+// we can't set classes on those elements directly. Instead, we style them via
+// arbitrary descendant selectors on the `<table>` element itself (`[&>thead]:…`,
+// `[&>tbody>tr]:…`, etc.) — the full class strings stay statically present in
+// source so Tailwind v4's JIT scanner picks them up.
+const tableVariants = tv({
+    slots: {
+        root: 'relative block w-full',
+        toolbar: 'empty:hidden flex items-center justify-between gap-3 px-4 py-3 border-b border-border',
+        scrollWrapper: 'relative',
+        scrollContainer: 'overflow-x-auto w-full',
+        // `border-separate` + `border-spacing-0` is required for `position: sticky` on
+        // `<th>` / `<td>` (CDK's sticky mechanism) to work reliably across browsers.
+        // In border-collapse mode, Firefox (and historically Chrome) fails to stick
+        // individual cells. Consequence: borders on row groups (`<thead>`, `<tfoot>`,
+        // `<tr>`) don't render — all separators must be applied to cells directly.
+        table: 'w-full border-separate border-spacing-0 text-start align-middle [&>thead>tr>th]:font-semibold [&>thead>tr>th]:text-fg [&>thead>tr>th]:tracking-tight [&>tbody>tr]:transition-colors [&>tbody>tr]:duration-normal [&>tbody>tr]:motion-reduce:transition-none [&>tfoot>tr>td]:border-t [&>tfoot>tr>td]:border-border',
+        th: 'text-start font-semibold text-fg tracking-tight align-middle',
+        td: 'text-fg align-middle',
+        footerTd: 'text-fg font-medium align-middle',
+        emptyState: 'flex flex-col items-center justify-center gap-2 px-4 py-12 text-center',
+        emptyIcon: 'size-10 shrink-0 text-fg-subtle',
+        emptyMessage: 'text-sm text-fg-muted',
+        loadingOverlay: 'absolute inset-0 flex items-center justify-center gap-3 bg-surface/70 backdrop-blur-sm z-20 pointer-events-auto',
+        loadingMessage: 'text-sm text-fg-muted',
+        errorState: 'flex flex-col items-center justify-center gap-2 px-4 py-12 text-center',
+        errorIcon: 'size-10 shrink-0 text-error-500',
+        errorMessage: 'text-sm text-error-700',
+        footerSlot: 'empty:hidden px-4 py-2 border-t border-border text-sm text-fg-muted',
+        paginationSlot: 'empty:hidden border-t border-border px-2 py-2',
+        expansionRow: 'bg-surface-sunken',
+        expansionCell: 'p-0',
+        // The leading `_selection` column hosts checkboxes only — override the standard
+        // text alignment + padding so the control stays centered in a narrow column.
+        selectionHeader: 'w-12 text-center align-middle',
+        selectionCell: 'w-12 text-center align-middle',
+    },
+    variants: {
+        variant: {
+            default: {
+                table: '[&>thead>tr>th]:bg-surface-muted [&>tbody>tr:not(:last-child)>td]:border-b [&>tbody>tr:not(:last-child)>td]:border-border [&>tbody>tr:hover]:bg-surface-sunken',
+            },
+            striped: {
+                table: '[&>thead>tr>th]:bg-surface-muted [&>tbody>tr:nth-child(even)]:bg-surface-sunken [&>tbody>tr:hover]:bg-surface-muted',
+            },
+            bordered: {
+                root: 'rounded-lg border border-border-strong overflow-hidden',
+                table: '[&>thead>tr>th]:bg-surface-muted [&>thead>tr>th]:border-b [&>thead>tr>th]:border-border [&>tbody>tr:hover]:bg-surface-sunken',
+                th: 'border-r border-border last:border-r-0',
+                td: 'border-r border-border last:border-r-0',
+                footerTd: 'border-r border-border last:border-r-0',
+            },
+        },
+        density: {
+            comfortable: {
+                th: 'px-4 py-3',
+                td: 'px-4 py-3',
+                footerTd: 'px-4 py-3',
+            },
+            compact: {
+                th: 'px-3 py-1.5',
+                td: 'px-3 py-1.5',
+                footerTd: 'px-3 py-1.5',
+            },
+        },
+        size: {
+            xs: { table: 'text-xs' },
+            sm: { table: 'text-sm' },
+            md: { table: 'text-sm' },
+            lg: { table: 'text-base' },
+            xl: { table: 'text-base' },
+        },
+        layout: {
+            auto: { table: 'table-auto' },
+            fixed: { table: 'table-fixed' },
+        },
+        stickyHeader: {
+            // Apply `position: sticky` to `<thead>` directly in addition to CDK's
+            // per-cell sticky. Group-level sticky on row groups is well supported
+            // across Chrome/Firefox/Safari and keeps the header visible reliably
+            // regardless of table layout (`border-separate` vs `border-collapse`)
+            // or consumer-supplied scroll ancestors. Cells still get their own bg
+            // so they stay opaque over scrolled rows.
+            true: {
+                table: '[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-20 [&>thead>tr>th]:bg-surface-raised [&>thead>tr>th]:z-10',
+            },
+            false: {},
+        },
+        stickyFooter: {
+            true: {
+                table: '[&>tfoot]:sticky [&>tfoot]:bottom-0 [&>tfoot]:z-20 [&>tfoot>tr>td]:bg-surface-raised [&>tfoot>tr>td]:z-10',
+            },
+            false: {},
+        },
+        loading: {
+            true: { table: '[&>tbody]:opacity-60 [&>tbody]:pointer-events-none' },
+            false: {},
+        },
+    },
+    compoundVariants: [
+        {
+            variant: 'bordered',
+            density: 'compact',
+            class: { th: 'text-xs', td: 'text-xs', footerTd: 'text-xs' },
+        },
+        {
+            stickyHeader: true,
+            variant: 'striped',
+            class: {
+                table: '[&>thead>tr>th]:shadow-table-sticky',
+            },
+        },
+    ],
+    defaultVariants: {
+        variant: 'default',
+        density: 'comfortable',
+        size: 'md',
+        layout: 'auto',
+        stickyHeader: false,
+        stickyFooter: false,
+        loading: false,
+    },
+}, { twMerge: true });
+// ── Static class maps (Tailwind v4 JIT requires literal class strings) ──
+const ALIGN_CLASSES = {
+    start: 'text-start',
+    center: 'text-center',
+    end: 'text-end',
+};
+const HIDE_BELOW_UTILITIES = {
+    sm: 'max-sm:hidden',
+    md: 'max-md:hidden',
+    lg: 'max-lg:hidden',
+    xl: 'max-xl:hidden',
+};
+/**
+ * Stack mode: CSS-only transform that makes each data row read like a labelled card
+ * below the chosen breakpoint. Applied to `<table>` via arbitrary descendant selectors
+ * because CDK owns the `<thead>` / `<tbody>` / `<tr>` elements.
+ *
+ * Every class is written in full so Tailwind v4's JIT scanner picks it up.
+ */
+const STACK_TABLE_UTILITIES = {
+    sm: '[&>thead]:max-sm:hidden [&>tbody>tr]:max-sm:block [&>tbody>tr]:max-sm:border [&>tbody>tr]:max-sm:border-border [&>tbody>tr]:max-sm:rounded-lg [&>tbody>tr]:max-sm:p-3 [&>tbody>tr]:max-sm:mb-2 [&>tbody>tr]:max-sm:bg-surface-raised',
+    md: '[&>thead]:max-md:hidden [&>tbody>tr]:max-md:block [&>tbody>tr]:max-md:border [&>tbody>tr]:max-md:border-border [&>tbody>tr]:max-md:rounded-lg [&>tbody>tr]:max-md:p-3 [&>tbody>tr]:max-md:mb-2 [&>tbody>tr]:max-md:bg-surface-raised',
+    lg: '[&>thead]:max-lg:hidden [&>tbody>tr]:max-lg:block [&>tbody>tr]:max-lg:border [&>tbody>tr]:max-lg:border-border [&>tbody>tr]:max-lg:rounded-lg [&>tbody>tr]:max-lg:p-3 [&>tbody>tr]:max-lg:mb-2 [&>tbody>tr]:max-lg:bg-surface-raised',
+    xl: '[&>thead]:max-xl:hidden [&>tbody>tr]:max-xl:block [&>tbody>tr]:max-xl:border [&>tbody>tr]:max-xl:border-border [&>tbody>tr]:max-xl:rounded-lg [&>tbody>tr]:max-xl:p-3 [&>tbody>tr]:max-xl:mb-2 [&>tbody>tr]:max-xl:bg-surface-raised',
+};
+/** Stack mode per-cell decoration (applied to `<td>` directly via column classes). */
+const STACK_CELL_UTILITIES = {
+    sm: 'max-sm:flex max-sm:justify-between max-sm:gap-3 max-sm:py-1 max-sm:border-0 max-sm:before:content-[attr(data-label)] max-sm:before:font-semibold max-sm:before:text-fg-muted max-sm:before:mr-4',
+    md: 'max-md:flex max-md:justify-between max-md:gap-3 max-md:py-1 max-md:border-0 max-md:before:content-[attr(data-label)] max-md:before:font-semibold max-md:before:text-fg-muted max-md:before:mr-4',
+    lg: 'max-lg:flex max-lg:justify-between max-lg:gap-3 max-lg:py-1 max-lg:border-0 max-lg:before:content-[attr(data-label)] max-lg:before:font-semibold max-lg:before:text-fg-muted max-lg:before:mr-4',
+    xl: 'max-xl:flex max-xl:justify-between max-xl:gap-3 max-xl:py-1 max-xl:border-0 max-xl:before:content-[attr(data-label)] max-xl:before:font-semibold max-xl:before:text-fg-muted max-xl:before:mr-4',
+};
+// CDK handles `position: sticky` + left/right offsets via its sticky styler.
+// We only add the decorative background + z-index so overlapping cells stay opaque,
+// plus a hairline shadow on the inner edge so the pinned column reads as floating
+// over scrolled content. Direction follows the pinned edge:
+//   sticky-start (pinned left)  → 1px shadow on the right side
+//   sticky-end   (pinned right) → 1px shadow on the left side
+const STICKY_CELL_ZINDEX = 'z-[5]';
+const STICKY_START_SHADOW = 'shadow-table-sticky-cell-start';
+const STICKY_END_SHADOW = 'shadow-table-sticky-cell-end';
+const INTERACTIVE_TAGS = new Set([
+    'BUTTON',
+    'A',
+    'INPUT',
+    'SELECT',
+    'OPTION',
+    'TEXTAREA',
+    'LABEL',
+    'SUMMARY',
+]);
+// ── Helpers ──────────────────────────────────────────────────────────
+function formatLabel(template, vars) {
+    return template.replace(/\{(\w+)\}/g, (match, key) => Object.prototype.hasOwnProperty.call(vars, key) ? String(vars[key]) : match);
+}
+function coerceCssSize(value) {
+    if (value === null || value === undefined || value === '')
+        return null;
+    return typeof value === 'number' ? `${value}px` : value;
+}
+// ── Cell/Header/Footer template directives ────────────────────────────
+//
+// These DO NOT extend the CDK counterparts. The ColumnComponent renders its
+// own <td cdk-cell *cdkCellDef>…</td> internally and forwards the consumer's
+// TemplateRef via ngTemplateOutlet with a typed context. Decoupling from CDK
+// here keeps our cell contexts strongly typed with extra fields (`columnIndex`,
+// `column`, `row`) that CDK's `CdkCellOutletRowContext` lacks.
+/** Structural directive on an `<ng-template>` (or a star-directive host) defining a column's data-cell template. Typed as `TwCellContext<T>`. */
+class CellDefDirective {
+    /** @internal */
+    template = inject((TemplateRef));
+    /** @internal */
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CellDefDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[twCellDef]' }]
+        }] });
+/** Structural directive defining a column's header-cell template. Typed as `TwHeaderCellContext`. */
+class HeaderCellDefDirective {
+    /** @internal */
+    template = inject((TemplateRef));
+    /** @internal */
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: HeaderCellDefDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[twHeaderCellDef]' }]
+        }] });
+/** Structural directive defining a column's footer-cell template. Typed as `TwFooterCellContext<T>`. */
+class FooterCellDefDirective {
+    /** @internal */
+    template = inject((TemplateRef));
+    /** @internal */
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FooterCellDefDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[twFooterCellDef]' }]
+        }] });
+// ── No-data row + expansion directives ───────────────────────────────
+//
+// Row / header-row / footer-row defs are auto-generated inline in the
+// `<tw-table>` template based on `<tw-column>` declarations. `*twNoDataRow`
+// and `*twRowExpansion` remain as consumer-facing directives because they
+// 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NoDataRowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[twNoDataRow]',
+                    providers: [{ provide: CdkNoDataRow, useExisting: NoDataRowDirective }],
+                }]
+        }] });
+/** Structural directive on an `<ng-template>` declaring the row-expansion template. Requires `[multiTemplateRows]="true"` on the parent `<tw-table>`. */
+class RowExpansionDirective {
+    /** Optional predicate that decides whether this expansion renders for a given row. Defaults to `undefined` (render for every expanded row). */
+    predicate = input(undefined, { ...(ngDevMode ? { debugName: "predicate" } : /* istanbul ignore next */ {}), alias: 'twRowExpansionWhen' });
+    /** @internal */
+    template = inject((TemplateRef));
+    /** @internal */
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RowExpansionDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[twRowExpansion]' }]
+        }], propDecorators: { predicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "twRowExpansionWhen", required: false }] }] } });
+// ── ColumnComponent ───────────────────────────────────────────────────
+//
+// `<tw-column>` is a pure metadata component — it holds the column's inputs
+// and collects the consumer's header/data/footer cell templates via
+// `contentChild`. The actual `<ng-container cdkColumnDef>` + cell renderers
+// are emitted inline in `<tw-table>`'s template via a `@for` loop. This keeps
+// every CDK defn (column, row, header-row, footer-row) inside CdkTable's
+// DIRECT content, so its `@ContentChildren` queries resolve them on first
+// render without our having to wire programmatic `addColumnDef` + deal with
+// its timing quirks.
+let nextColumnId = 0;
+/**
+ * Declares a single column of a `<tw-table>`. Pure-metadata component — its
+ * host element is `display: none`; the column's `<th>` / `<td>` / `<tfoot>`
+ * renderers are emitted by the parent `<tw-table>` using the projected cell
+ * templates (`*twHeaderCellDef`, `*twCellDef`, `*twFooterCellDef`).
+ */
+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 */ []));
+    /** 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 */ []));
+    /** When true, removes this column from the visible column set. Defaults to `false`. */
+    hidden = input(false, ...(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 */ []));
+    /** Plain text header label. Used when no `*twHeaderCellDef` template is projected. Defaults to `undefined`. */
+    headerLabel = input(undefined, ...(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 */ []));
+    /**
+     * 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`
+     * token — the column is treated as active when the directive's `active` id matches this column's
+     * `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 */ []));
+    /** @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 */ []));
+    /** @internal Consumer-projected data-cell template. */
+    cellDef = contentChild((CellDefDirective), ...(ngDevMode ? [{ debugName: "cellDef" }] : /* istanbul ignore next */ []));
+    /** @internal Consumer-projected footer-cell template (optional). */
+    footerCellDef = contentChild((FooterCellDefDirective), ...(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 */ []));
+    /** @internal Row snapshot pushed by the parent for footer-cell contexts. */
+    rowsSnapshot = signal([], ...(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 */ []));
+    /** Resolved display config — partial input merged with `DISPLAY_DEFAULTS`. */
+    resolvedDisplay = computed(() => ({
+        ...DISPLAY_DEFAULTS,
+        ...this.display(),
+    }), ...(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 */ []));
+    /** @internal Convenience accessor for the cdkColumnDef `[stickyEnd]` binding. */
+    stickyEnd = computed(() => this.resolvedDisplay().sticky === 'end', ...(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 */ []));
+    /** @internal CSS width string applied to cells. */
+    resolvedWidth = computed(() => coerceCssSize(this.resolvedDisplay().width), ...(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 */ []));
+    /** @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 */ []));
+    /**
+     * @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`
+     * when no sort is wired or the column is not the active sort, so the attribute is omitted.
+     */
+    ariaSort = computed(() => {
+        const explicit = this.sortState();
+        if (explicit !== null)
+            return explicit;
+        const handle = this.sortHandle;
+        if (!handle)
+            return null;
+        if (handle.active() !== this.name())
+            return null;
+        const direction = handle.direction();
+        if (direction === 'asc')
+            return 'ascending';
+        if (direction === 'desc')
+            return 'descending';
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "ariaSort" }] : /* istanbul ignore next */ []));
+    headerContext = computed(() => ({
+        $implicit: this.name(),
+        column: this.name(),
+        columnIndex: this.columnIndex(),
+    }), ...(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 */ []));
+    /** @internal Builds the per-cell template context from CDK-provided row variables. */
+    buildCellContext(row, index, count, first, last, even, odd) {
+        return {
+            $implicit: row,
+            row,
+            column: this.name(),
+            index,
+            columnIndex: this.columnIndex(),
+            first,
+            last,
+            even,
+            odd,
+            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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-column',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '',
+                    host: {
+                        'style': 'display: none',
+                    },
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: false }] }], headerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerLabel", required: false }] }], stackLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackLabel", required: false }] }], sortState: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortState", required: false }] }], headerCellDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HeaderCellDefDirective), { isSignal: true }] }], cellDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CellDefDirective), { isSignal: true }] }], footerCellDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FooterCellDefDirective), { isSignal: true }] }] } });
+// ── TableComponent ────────────────────────────────────────────────────
+let nextTableId = 0;
+/**
+ * A highly customizable data-table component wrapping `@angular/cdk/table`.
+ *
+ * Composes with other ngx-tw primitives:
+ * - Sortable headers: place `[twSort]` on `<tw-table>` and `[tw-sort-header]` inside `*twHeaderCellDef`.
+ * - Pagination: project `<tw-paginator slot="pagination">` as a child.
+ * - Loading spinner: project `<tw-spinner slot="loading">` or rely on the built-in fallback.
+ */
+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 */ []));
+    /** 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 */ []));
+    /** When non-null, renders the error slot in place of the body. Defaults to `null`. */
+    error = input(null, ...(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 */ []));
+    /** Sticky configuration — `header`, `footer`, `scrollHeight`. Accepts a partial; unset keys fall back to the defaults. */
+    sticky = input({}, ...(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 */ []));
+    /** Selection configuration — `enabled`. Accepts a partial; unset keys fall back to the defaults. */
+    selection = input({}, ...(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 */ []));
+    /** Overrides for user-facing strings. Unset keys fall back to the English defaults. Defaults to `{}`. */
+    labels = input({}, ...(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 */ []));
+    /** 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 */ []));
+    // ── Outputs ──
+    /** Fires when a row is clicked. Suppressed when the click originated inside an interactive descendant (button, link, input, etc.). */
+    rowClicked = output();
+    /** Fires after `selected` changes via user interaction (not on programmatic writes). */
+    selectionChange = output();
+    /** Fires after a row is expanded or collapsed by user interaction. */
+    expansionChange = output();
+    // ── Content queries ──
+    /** @internal Projected columns. */
+    columns = contentChildren((ColumnComponent), { ...(ngDevMode ? { debugName: "columns" } : /* istanbul ignore next */ {}), descendants: true });
+    /** @internal Projected custom no-data row (takes precedence over the fallback empty state). */
+    noDataRow = contentChild(NoDataRowDirective, { ...(ngDevMode ? { debugName: "noDataRow" } : /* istanbul ignore next */ {}), descendants: true });
+    /** @internal Projected expansion row template. */
+    expansionTemplate = contentChild((RowExpansionDirective), { ...(ngDevMode ? { debugName: "expansionTemplate" } : /* istanbul ignore next */ {}), descendants: true });
+    // ── View children ──
+    /** @internal The CDK table inside our view. */
+    cdkTable = viewChild.required('cdkTable');
+    // ── Injected services ──
+    _liveAnnouncer = inject(LiveAnnouncer);
+    _elementRef = inject((ElementRef));
+    _destroyRef = inject(DestroyRef);
+    // ── Identifiers ──
+    /** Unique per-instance id used to scope row/expansion DOM ids. */
+    hostId = `tw-table-${nextTableId++}`;
+    /** Returns the DOM id used for the expansion row of the given data row at the given index. Useful for wiring `aria-controls` from a trigger cell. */
+    expansionId = (_row, index) => `${this.hostId}-expansion-${index}`;
+    // ── Resolved config (partial input merged with defaults) ──
+    /** @internal Resolved visual configuration. */
+    resolvedAppearance = computed(() => ({
+        ...APPEARANCE_DEFAULTS,
+        ...this.appearance(),
+    }), ...(ngDevMode ? [{ debugName: "resolvedAppearance" }] : /* istanbul ignore next */ []));
+    /** @internal Resolved sticky configuration. */
+    resolvedSticky = computed(() => ({
+        ...STICKY_DEFAULTS,
+        ...this.sticky(),
+    }), ...(ngDevMode ? [{ debugName: "resolvedSticky" }] : /* istanbul ignore next */ []));
+    /** @internal Resolved responsive configuration. */
+    resolvedResponsive = computed(() => ({
+        ...RESPONSIVE_DEFAULTS,
+        ...this.responsive(),
+    }), ...(ngDevMode ? [{ debugName: "resolvedResponsive" }] : /* istanbul ignore next */ []));
+    /** @internal Resolved selection configuration. */
+    resolvedSelection = computed(() => ({
+        ...SELECTION_DEFAULTS,
+        ...this.selection(),
+    }), ...(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 */ []));
+    /** @internal Whether the data input is a plain array. */
+    dataIsArray = computed(() => Array.isArray(this.data()), ...(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 */ []));
+    /** @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 */ []));
+    /** @internal Whether the error overlay should render. */
+    shouldRenderErrorOverlay = computed(() => this.error() !== null, ...(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 */ []));
+    /** @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 */ []));
+    /** @internal CSS max-height string for the scroll container. */
+    maxHeightStyle = computed(() => coerceCssSize(this.resolvedSticky().scrollHeight), ...(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 */ []));
+    /** @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 */ []));
+    /** @internal Whether any column has a projected footer-cell template. */
+    hasFooterRow = computed(() => this.visibleColumns().some((c) => !!c.footerCellDef()), ...(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 */ []));
+    /** @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 */ []));
+    /** @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 */ []));
+    // ── Variant class computation ──
+    _variantResult = computed(() => {
+        const appearance = this.resolvedAppearance();
+        const stickyCfg = this.resolvedSticky();
+        return tableVariants({
+            variant: appearance.variant,
+            density: appearance.density,
+            size: appearance.size,
+            layout: appearance.layout,
+            stickyHeader: stickyCfg.header,
+            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 */ []));
+    scrollContainerClasses = computed(() => {
+        const base = this._variantResult().scrollContainer();
+        return this.maxHeightStyle() ? `${base} overflow-y-auto` : base;
+    }, ...(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 */ []));
+    tdClasses = computed(() => {
+        const base = this._variantResult().td();
+        const responsive = this.resolvedResponsive();
+        if (responsive.mode === 'stack') {
+            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 */ []));
+    selectionHeaderClasses = computed(() => {
+        const base = this._variantResult().selectionHeader();
+        return [base, this.thClasses()].filter(Boolean).join(' ');
+    }, ...(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 */ []));
+    // ── CdkTable wiring ──
+    //
+    // All CdkColumnDefs + row defs are rendered INLINE in our template (see
+    // `table.html`), so CdkTable's own @ContentChildren queries resolve them on
+    // first render without our having to programmatically register anything.
+    //
+    // The noDataRow and expansion template are projected by consumers — we bridge
+    // those to CdkTable via `setNoDataRow` (expansion uses an inline fallback
+    // column + row def in the template).
+    constructor() {
+        // Forward dataSource / trackBy / multiTemplateRows / fixedLayout to the CDK
+        // table whenever the inputs change.
+        effect(() => {
+            const table = this.cdkTable();
+            if (!table)
+                return;
+            table.dataSource = this.data();
+            const tb = this.trackBy();
+            if (tb)
+                table.trackBy = tb;
+            table.multiTemplateDataRows = this.multiTemplateRows();
+            table.fixedLayout = this.resolvedAppearance().layout === 'fixed';
+        });
+        // Bridge the projected no-data row to CdkTable.
+        let registeredNoDataRow = null;
+        effect(() => {
+            const table = this.cdkTable();
+            const noDataRow = this.noDataRow() ?? null;
+            if (!table)
+                return;
+            if (registeredNoDataRow !== noDataRow) {
+                table.setNoDataRow(noDataRow);
+                registeredNoDataRow = noDataRow;
+            }
+        });
+        // Expansion-set changes don't mutate `data`, so CdkTable's internal differ
+        // doesn't know to re-evaluate row `when` predicates. Trigger a manual render
+        // whenever the expansion set changes.
+        effect(() => {
+            this.expandedRows();
+            const table = untracked(() => this.cdkTable());
+            if (table)
+                queueMicrotask(() => table.renderRows());
+        });
+        // Update each column's extra-class signals + columnIndex on relevant input changes.
+        // Pushes the table-level `th` / `td` / `footerTd` classes plus per-column decorations
+        // (sticky, hideBelow). ColumnComponent combines these with its own align/numeric bits.
+        effect(() => {
+            const visible = this.visibleColumns();
+            const responsiveMode = this.resolvedResponsive().mode;
+            const thCls = this.thClasses();
+            const tdCls = this.tdClasses();
+            const footerCls = this.footerTdClasses();
+            untracked(() => {
+                const allCols = this.columns();
+                allCols.forEach((col) => {
+                    const visibleIndex = visible.indexOf(col);
+                    col.columnIndex.set(Math.max(0, visibleIndex));
+                    const display = col.resolvedDisplay();
+                    const decor = [];
+                    if (display.sticky === 'start') {
+                        decor.push(STICKY_CELL_ZINDEX, 'bg-surface-raised', STICKY_START_SHADOW);
+                    }
+                    else if (display.sticky === 'end') {
+                        decor.push(STICKY_CELL_ZINDEX, 'bg-surface-raised', STICKY_END_SHADOW);
+                    }
+                    if (display.hideBelow && responsiveMode === 'hide') {
+                        decor.push(HIDE_BELOW_UTILITIES[display.hideBelow]);
+                    }
+                    const decorCls = decor.join(' ');
+                    col.extraHeaderClass.set(`${thCls} ${decorCls}`.trim());
+                    col.extraCellClass.set(`${tdCls} ${decorCls}`.trim());
+                    col.extraFooterClass.set(`${footerCls} ${decorCls}`.trim());
+                });
+            });
+        });
+        // Push row snapshot into each column for footer-cell contexts.
+        effect(() => {
+            const rows = this.resolvedRows();
+            const cols = this.columns();
+            untracked(() => cols.forEach((c) => c.rowsSnapshot.set(rows)));
+        });
+        // Dev-mode: duplicate column name guard.
+        effect(() => {
+            if (!isDevMode())
+                return;
+            const names = this.columns().map((c) => c.name());
+            const seen = new Set();
+            for (const n of names) {
+                if (seen.has(n)) {
+                    throw new Error(`[tw-table] duplicate column name '${n}'. Every <tw-column> must have a unique \`name\`.`);
+                }
+                seen.add(n);
+            }
+        });
+        // Dev-mode: require multiTemplateRows when row-expansion is declared.
+        effect(() => {
+            if (!isDevMode())
+                return;
+            const tpl = this.expansionTemplate();
+            if (tpl && !this.multiTemplateRows()) {
+                throw new Error('[tw-table] *twRowExpansion requires [multiTemplateRows]="true" on <tw-table>.');
+            }
+        });
+        // Dev-mode: accessible-name warning, once mounted.
+        afterNextRender(() => {
+            if (!isDevMode())
+                return;
+            const hasCaption = !!this._elementRef.nativeElement.querySelector('caption');
+            if (!hasCaption && !this.ariaLabel() && !this.ariaLabelledby()) {
+                console.warn('[tw-table] no accessible name provided. Add a `<caption slot="caption">`, `[aria-label]`, or `[aria-labelledby]`.');
+            }
+        });
+        // Loading announcement.
+        //
+        // The effect tracks `this.loading()` only; reads of labels / rows are wrapped
+        // in `untracked()` so unrelated upstream signals (label updates, row mutations
+        // that don't toggle loading) don't re-announce. The announcement should fire
+        // once per loading-state transition, never on incidental data changes.
+        effect(() => {
+            const loading = this.loading();
+            const labels = untracked(() => this.resolvedLabels());
+            if (loading) {
+                this._liveAnnouncer.announce(labels.loading, 'polite');
+            }
+            else {
+                const count = untracked(() => this.dataIsArray() ? this.resolvedRows().length : 0);
+                if (count > 0) {
+                    this._liveAnnouncer.announce(formatLabel(labels.rowsUpdatedAnnouncement, { count }), 'polite');
+                }
+            }
+        });
+    }
+    // ── Row-click + expansion + selection helpers ──
+    /** @internal Called by the template when a data row is clicked. */
+    handleRowClick(row, index, event) {
+        const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
+        for (const node of path) {
+            if (!(node instanceof HTMLElement))
+                continue;
+            if (node === event.currentTarget)
+                break;
+            if (INTERACTIVE_TAGS.has(node.tagName))
+                return;
+            if (node.hasAttribute('tabindex') && node.tabIndex >= 0 && node.tagName !== 'TR')
+                return;
+            const role = node.getAttribute('role');
+            if (role === 'button' || role === 'link' || role === 'checkbox')
+                return;
+        }
+        this.rowClicked.emit({ row, index, event });
+    }
+    /** @internal Whether a row is currently expanded. */
+    isRowExpanded(row) {
+        return this.expandedRows().has(row);
+    }
+    /** @internal CDK `when` predicate used for the auto-generated expansion row. */
+    expansionWhen = (index, row) => {
+        if (!this.hasExpansion())
+            return false;
+        if (!this.expandedRows().has(row))
+            return false;
+        const pred = this.expansionTemplate()?.predicate();
+        if (typeof pred === 'function' && !pred(row, index))
+            return false;
+        return true;
+    };
+    /** @internal Context object for the expansion template. */
+    expansionContext(row, index) {
+        return {
+            $implicit: row,
+            row,
+            index,
+            collapse: () => this.collapse(row),
+        };
+    }
+    /** Expands the given row if not already expanded and emits `expansionChange`. */
+    expand(row) {
+        if (this.isRowExpanded(row))
+            return;
+        const next = new Set(this.expandedRows());
+        next.add(row);
+        this.expandedRows.set(next);
+        this.expansionChange.emit({ row, expanded: true, expandedRows: next });
+    }
+    /** Collapses the given row if currently expanded and emits `expansionChange`. */
+    collapse(row) {
+        if (!this.isRowExpanded(row))
+            return;
+        const next = new Set(this.expandedRows());
+        next.delete(row);
+        this.expandedRows.set(next);
+        this.expansionChange.emit({ row, expanded: false, expandedRows: next });
+    }
+    /** Toggles the expansion state of the given row. */
+    toggleExpansion(row) {
+        if (this.isRowExpanded(row))
+            this.collapse(row);
+        else
+            this.expand(row);
+    }
+    /** Whether a given row is currently in the `selected` list. */
+    isSelected(row) {
+        return this.selected().includes(row);
+    }
+    /** Selects or deselects a row and emits `selectionChange`. */
+    setSelected(row, nextSelected) {
+        const previous = this.selected();
+        const isAlreadySelected = previous.includes(row);
+        if (isAlreadySelected === nextSelected)
+            return;
+        const next = nextSelected ? [...previous, row] : previous.filter((r) => r !== row);
+        this.selected.set(next);
+        this.selectionChange.emit({
+            selected: next,
+            added: nextSelected ? [row] : [],
+            removed: nextSelected ? [] : [row],
+            previous,
+        });
+    }
+    /**
+     * Adds every row in the current data snapshot to `selected` that isn't already selected.
+     * Emits `selectionChange` if anything changed. Only the array data-source path can compute a
+     * full snapshot — for `Observable<T[]>` or `DataSource<T>` data inputs this is a no-op.
+     */
+    selectAll() {
+        const rows = this.resolvedRows();
+        if (rows.length === 0)
+            return;
+        const previous = this.selected();
+        const previousSet = new Set(previous);
+        const added = [];
+        for (const row of rows) {
+            if (!previousSet.has(row))
+                added.push(row);
+        }
+        if (added.length === 0)
+            return;
+        const next = [...previous, ...added];
+        this.selected.set(next);
+        this.selectionChange.emit({ selected: next, added, removed: [], previous });
+    }
+    /** Clears every currently-selected row. Emits `selectionChange` if anything was selected. */
+    clearSelection() {
+        const previous = this.selected();
+        if (previous.length === 0)
+            return;
+        this.selected.set([]);
+        this.selectionChange.emit({ selected: [], added: [], removed: previous, previous });
+    }
+    /** @internal Returns `aria-selected` for a data row, or `null` to omit the attribute when selection is disabled. */
+    rowAriaSelected(row) {
+        if (!this.resolvedSelection().enabled)
+            return null;
+        return this.isSelected(row) ? 'true' : 'false';
+    }
+    /**
+     * @internal Tri-state summary of the current selection vs. the visible data snapshot.
+     * `'none'` — nothing selected; `'some'` — partial; `'all'` — every snapshot row is selected.
+     */
+    masterSelectionState = computed(() => {
+        const rows = this.resolvedRows();
+        if (rows.length === 0)
+            return 'none';
+        const selected = this.selected();
+        if (selected.length === 0)
+            return 'none';
+        const selectedSet = new Set(selected);
+        for (const row of rows) {
+            if (!selectedSet.has(row))
+                return 'some';
+        }
+        return 'all';
+    }, ...(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 */ []));
+    /** @internal Whether the master "select all" checkbox should render indeterminate. */
+    masterIndeterminate = computed(() => this.masterSelectionState() === 'some', ...(ngDevMode ? [{ debugName: "masterIndeterminate" }] : /* istanbul ignore next */ []));
+    /** @internal Wires the master checkbox change event to `selectAll` / `clearSelection`. */
+    toggleMasterSelection(checked) {
+        if (checked)
+            this.selectAll();
+        else
+            this.clearSelection();
+    }
+    /** @internal Formatted accessible label for a per-row selection checkbox. */
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", 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" }]
+        }], 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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CellDefDirective, ColumnComponent, DEFAULT_TABLE_LABELS, FooterCellDefDirective, HeaderCellDefDirective, NoDataRowDirective, RowExpansionDirective, TableComponent };
+//# sourceMappingURL=cdevhub-ngx-tw-table.mjs.map