forty-cdk 0.2.0 → 0.3.0

package/fesm2022/forty-cdk-table.mjs

@@ -0,0 +1,1518 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, booleanAttribute, inject, signal, computed, input, model, ElementRef, Directive, DestroyRef, numberAttribute, output, effect, PLATFORM_ID, afterNextRender, DOCUMENT } from '@angular/core';
+import { SelectionModel, injectTextDirection, injectElementSize, Collection, RovingTabindex, firstEnabledHost, computeFlatHierarchy, reconcileRovingActive, resolveTreegridExpandCollapse, resolveGridNavigation, moveGridIndex, registerHandle, startPointerResize, clampToRange, translateWindowReorder, LiveAnnouncer, createKeyboardDragMediator, createDefaults } from 'forty-cdk/core';
+import * as i1 from 'forty-cdk/drag-drop';
+import { FOR_DRAGGABLE_CONTEXT, ForDropList, moveItemInArray, FOR_DROP_LIST_DEFAULT_ORIENTATION, FOR_DRAG_DROP_DEFAULTS } from 'forty-cdk/drag-drop';
+import { isPlatformBrowser } from '@angular/common';
+
+const FOR_TABLE_CONTEXT = new InjectionToken('FOR_TABLE_CONTEXT');
+const FOR_TABLE_ROW_CONTEXT = new InjectionToken('FOR_TABLE_ROW_CONTEXT');
+/**
+ * Coerces the `sticky` input value for header and data cells.
+ * The string `'end'` pins the cell to the end edge; any other truthy value
+ * (including the empty string from a bare `sticky` attribute) pins it to the
+ * start edge; a falsy value means not sticky.
+ */
+function coerceSticky(value) {
+    return value === 'end' ? 'end' : booleanAttribute(value);
+}
+function injectTableContext(piece) {
+    const ctx = inject(FOR_TABLE_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/table] ${piece} must be used inside a [forTable] element.`);
+    }
+    return ctx;
+}
+function injectTableRowContext(piece) {
+    const ctx = inject(FOR_TABLE_ROW_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/table] ${piece} must be used inside a [forTableRow] element.`);
+    }
+    return ctx;
+}
+
+/**
+ * Row-selection sub-model for `ForTable`. Owns the `SelectionModel`, the range
+ * anchor, and the toggle / replace / range / select-all algorithms, decoupled
+ * from the table root.
+ *
+ * Internal — not re-exported from `table/index.ts` or `public-api.ts`.
+ */
+class TableRowSelection {
+    #selectionMode;
+    #selectionBehavior;
+    #compareWith;
+    #aggregateValues;
+    #model;
+    #anchor = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#anchor" }] : /* istanbul ignore next */ []));
+    /** Aggregate selection state across all selectable rows (`'none'` / `'some'` / `'all'`). */
+    selectAllState = computed(() => {
+        const values = this.#aggregateValues();
+        if (values.length === 0) {
+            return 'none';
+        }
+        let count = 0;
+        for (const v of values) {
+            if (this.#model.isSelected(v)) {
+                count += 1;
+            }
+        }
+        if (count === 0) {
+            return 'none';
+        }
+        return count === values.length ? 'all' : 'some';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectAllState" }] : /* istanbul ignore next */ []));
+    constructor(deps) {
+        this.#selectionMode = deps.selectionMode;
+        this.#selectionBehavior = deps.selectionBehavior;
+        this.#compareWith = deps.compareWith;
+        this.#aggregateValues = deps.aggregateValues;
+        this.#model = new SelectionModel(deps.selection, {
+            multiple: computed(() => deps.selectionMode() === 'multiple'),
+            compareWith: (a, b) => deps.compareWith()(a, b),
+        });
+    }
+    /** Whether `value` is currently in the selection. */
+    isSelected(value) {
+        return this.#model.isSelected(value);
+    }
+    /** Toggles `value` in or out of the selection and re-anchors. No-op in `'none'` mode. */
+    toggle(value) {
+        if (this.#selectionMode() === 'none') {
+            return;
+        }
+        this.#model.toggle(value);
+        this.#anchor.set(value);
+    }
+    /**
+     * Applies a row selection click with optional modifier keys, honoring
+     * `selectionBehavior`: `'toggle'` always flips; `'replace'` replaces (Ctrl/Cmd
+     * toggles a single item, Shift extends a range in multiple mode).
+     */
+    select(value, modifiers) {
+        const mode = this.#selectionMode();
+        if (mode === 'none') {
+            return;
+        }
+        if (this.#selectionBehavior() === 'toggle') {
+            this.#model.toggle(value);
+            this.#anchor.set(value);
+            return;
+        }
+        const multiple = mode === 'multiple';
+        if (multiple && modifiers?.shiftKey) {
+            this.#selectRange(value);
+            return;
+        }
+        if (multiple && (modifiers?.ctrlKey || modifiers?.metaKey)) {
+            this.#model.toggle(value);
+            this.#anchor.set(value);
+            return;
+        }
+        this.#model.setSelection(value);
+        this.#anchor.set(value);
+    }
+    /** Selects all selectable rows when not all are selected; clears when all are. No-op outside `'multiple'` mode. */
+    toggleSelectAll() {
+        if (this.#selectionMode() !== 'multiple') {
+            return;
+        }
+        if (this.selectAllState() === 'all') {
+            this.#model.clear();
+        }
+        else {
+            this.#model.select(...this.#aggregateValues());
+        }
+    }
+    #selectRange(toValue) {
+        const values = this.#aggregateValues();
+        const equals = this.#compareWith();
+        const toIdx = values.findIndex((v) => equals(v, toValue));
+        if (toIdx < 0) {
+            return;
+        }
+        const anchor = this.#anchor();
+        const anchorIdx = anchor === undefined ? -1 : values.findIndex((v) => equals(v, anchor));
+        const start = anchorIdx < 0 ? toIdx : anchorIdx;
+        const [lo, hi] = start <= toIdx ? [start, toIdx] : [toIdx, start];
+        this.#model.setSelection(...values.slice(lo, hi + 1));
+    }
+}
+
+/**
+ * Treegrid expansion sub-model for `ForTable`. Owns the membership and mutation
+ * algorithm for the `[(expanded)]` open-rows set, decoupled from the table root.
+ *
+ * Internal — not re-exported from `table/index.ts` or `public-api.ts`.
+ */
+class TableExpansion {
+    #expanded;
+    #compareWith;
+    constructor(deps) {
+        this.#expanded = deps.expanded;
+        this.#compareWith = deps.compareWith;
+    }
+    /** Whether `value` is currently in the open-rows set. */
+    isExpanded(value) {
+        return this.#expanded().some((v) => this.#compareWith()(v, value));
+    }
+    /**
+     * Sets a parent row's expansion in or out of the open-rows set. No-op when
+     * `value` is undefined or already in the requested state.
+     */
+    setExpanded(value, open) {
+        if (value === undefined) {
+            return;
+        }
+        const current = this.#expanded();
+        const has = this.isExpanded(value);
+        if (open && !has) {
+            this.#expanded.set([...current, value]);
+        }
+        else if (!open && has) {
+            this.#expanded.set(current.filter((v) => !this.#compareWith()(v, value)));
+        }
+    }
+    /** Toggles a parent row's expansion. No-op when `value` is undefined. */
+    toggle(value) {
+        if (value === undefined) {
+            return;
+        }
+        this.setExpanded(value, !this.isExpanded(value));
+    }
+}
+
+/** Grid actions whose target may lie on a row outside the rendered virtualized window. */
+const ROW_CROSSING_ACTIONS = new Set([
+    'next-row',
+    'prev-row',
+    'first',
+    'last',
+]);
+/**
+ * Root of the Table primitive. Sets the ARIA `role` from `mode`, reflects
+ * writing direction, and publishes the `--for-table-header-height` CSS custom
+ * property (driven by a `ResizeObserver` on the first registered header row)
+ * so consumers can `position: sticky` header cells without hard-coding offsets.
+ *
+ * Implements the [WAI-ARIA Table pattern](https://www.w3.org/WAI/ARIA/apg/patterns/table/)
+ * and the [WAI-ARIA Grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).
+ *
+ * Use `mode="grid"` or `mode="treegrid"` for interactive grid semantics: a
+ * single-tab-stop roving group with 2D arrow navigation over data cells.
+ * The default `mode="table"` is the static read-only structure.
+ */
+class ForTable {
+    /**
+     * ARIA role emitted on the host. `'table'` is the default static read-only
+     * structure. `'grid'` and `'treegrid'` provide single-tab-stop roving + 2D
+     * arrow navigation over data cells.
+     */
+    mode = input('table', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible label for the table. When set, reflected as `aria-label`.
+     * Consumers with a visible caption should prefer pointing native
+     * `aria-labelledby` at it instead; this input is the reactive convenience
+     * hook for cases where no visible label element exists.
+     */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Writing direction. When unset (default `null`), the inherited ambient
+     * direction is resolved from the nearest ancestor carrying a `dir` attribute
+     * (or `<html dir>`), defaulting to `'ltr'`. An explicit `[dir]` always wins.
+     * The resolved value is reflected to the host `dir` attribute.
+     */
+    _dirInput = input(null, { ...(ngDevMode ? { debugName: "_dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
+    dir = injectTextDirection(this._dirInput);
+    /**
+     * True total number of data rows for `aria-rowcount`, e.g. for a server-paged or
+     * (later) virtualized table that renders only a window of rows. Defaults to the
+     * rendered data-row count. Ignored in `mode="table"`.
+     */
+    rowCount = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "rowCount" }] : /* istanbul ignore next */ []));
+    /**
+     * True total number of columns for `aria-colcount`. Defaults to the rendered
+     * column count (the cells of the first data row). Ignored in `mode="table"`.
+     */
+    colCount = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "colCount" }] : /* istanbul ignore next */ []));
+    /** Row selection mode. `'none'` (default) disables selection entirely. */
+    selectionMode = input('none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    /**
+     * How a row click changes the selection. `'toggle'` (default) flips the clicked
+     * row. `'replace'` replaces the selection with the clicked row; Ctrl/Cmd-click
+     * toggles a single row and Shift-click extends a range (multiple mode only).
+     */
+    selectionBehavior = input('toggle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionBehavior" }] : /* istanbul ignore next */ []));
+    /**
+     * Two-way bindable selected row values (each row's `[value]`). Single mode keeps
+     * 0–1 entries. The implicit `selectionChange` fires only on internal mutations
+     * (selector / row click / Space / select-all), never on consumer writes.
+     */
+    selection = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    /** Equality comparator for row values. Defaults to `===`; supply id-based for objects. */
+    compareWith = input((a, b) => a === b, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    /**
+     * Full ordered set of selectable row values (each row's `[value]`), for a
+     * virtualized or server-paged table whose aggregate selection operations must
+     * span rows beyond the rendered window. When `null` (default), the select-all
+     * tri-state, `toggleSelectAll`, and Shift-click range selection compute against
+     * the registered (rendered) rows only. When supplied, they use this set as the
+     * universe of selectable values, so a range can span unmounted rows and the
+     * tri-state reflects the true dataset. Per-row selection is unaffected.
+     */
+    selectableValues = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectableValues" }] : /* istanbul ignore next */ []));
+    /**
+     * Two-way bindable open parent-row values (each row's `[value]`), for
+     * `mode="treegrid"`. The implicit `expandedChange` fires only on internal
+     * expand/collapse (ArrowRight/ArrowLeft, `toggleRowExpansion`), never on
+     * consumer writes through `[(expanded)]`. Ignored outside `treegrid` mode.
+     */
+    expanded = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    #rootEl = inject(ElementRef).nativeElement;
+    #headerRowEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#headerRowEl" }] : /* istanbul ignore next */ []));
+    headerSize = injectElementSize(this.#headerRowEl);
+    #rows = new Collection();
+    #roving = new RovingTabindex();
+    /** Live registered data rows, exposed to `[forTableVirtualized]`'s cross-window navigation bridge. */
+    rows = this.#rows.items;
+    #virtualNav = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#virtualNav" }] : /* istanbul ignore next */ []));
+    #reorderingRow = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#reorderingRow" }] : /* istanbul ignore next */ []));
+    /**
+     * Absolute index of the row currently being pointer-reordered, or `null`. Set by
+     * `[forTableRowReorder]` and read by `[forTableVirtualized]` to keep the lifted
+     * row mounted across recycling during a drag.
+     */
+    reorderingRowIndex = this.#reorderingRow.asReadonly();
+    virtualRowNavigation = this.#virtualNav.asReadonly();
+    #flatCells = computed(() => this.#rows.items().flatMap((row) => row.cells()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#flatCells" }] : /* istanbul ignore next */ []));
+    #cols = computed(() => this.#rows.items()[0]?.cells().length ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#cols" }] : /* istanbul ignore next */ []));
+    #firstEnabledCell = computed(() => firstEnabledHost(this.#flatCells()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#firstEnabledCell" }] : /* istanbul ignore next */ []));
+    #registeredValues = computed(() => this.#rows
+        .items()
+        .map((row) => row.value())
+        .filter((v) => v !== undefined), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#registeredValues" }] : /* istanbul ignore next */ []));
+    #aggregateValues = computed(() => this.selectableValues() ?? this.#registeredValues(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#aggregateValues" }] : /* istanbul ignore next */ []));
+    #selection = new TableRowSelection({
+        selection: this.selection,
+        selectionMode: this.selectionMode,
+        selectionBehavior: this.selectionBehavior,
+        compareWith: this.compareWith,
+        aggregateValues: this.#aggregateValues,
+    });
+    selectAllState = this.#selection.selectAllState;
+    #expansion = new TableExpansion({
+        expanded: this.expanded,
+        compareWith: this.compareWith,
+    });
+    #rowHierarchy = computed(() => computeFlatHierarchy(this.#rows.items().map((row) => row.level())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#rowHierarchy" }] : /* istanbul ignore next */ []));
+    #rowOfCell(cellHost) {
+        return this.#rows.items().find((row) => row.cells().some((cell) => cell.host === cellHost));
+    }
+    /**
+     * Absolute index of the row that owns the currently roving-focused cell, or `null`
+     * when no cell is focused (or the focused row carries no `virtualIndex`). Used by
+     * `[forTableVirtualized]` to keep the focused row mounted across recycling.
+     */
+    focusedRowIndex = computed(() => {
+        const active = this.#roving.active();
+        if (active === null) {
+            return null;
+        }
+        return this.#rowOfCell(active)?.virtualIndex() ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedRowIndex" }] : /* istanbul ignore next */ []));
+    rowCountAttr = computed(() => this.mode() === 'table' ? null : (this.rowCount() ?? this.#rows.items().length), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowCountAttr" }] : /* istanbul ignore next */ []));
+    colCountAttr = computed(() => this.mode() === 'table' ? null : (this.colCount() ?? this.#cols()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colCountAttr" }] : /* istanbul ignore next */ []));
+    constructor() {
+        reconcileRovingActive(this.#roving, this.#flatCells);
+    }
+    registerHeaderRow(el) {
+        this.#headerRowEl.set(el);
+    }
+    setColumnWidth(column, width) {
+        this.#rootEl.style.setProperty(`--for-table-col-${column}-width`, `${width}px`);
+    }
+    isRowExpanded(value) {
+        return this.#expansion.isExpanded(value);
+    }
+    toggleRowExpansion(value) {
+        this.#expansion.toggle(value);
+    }
+    rowPosinset(host) {
+        const index = this.#rows.indexOfHost(host);
+        return index < 0 ? 1 : (this.#rowHierarchy()[index]?.posinset ?? 1);
+    }
+    rowSetsize(host) {
+        const index = this.#rows.indexOfHost(host);
+        return index < 0 ? 1 : (this.#rowHierarchy()[index]?.setsize ?? 1);
+    }
+    unregisterHeaderRow(el) {
+        if (this.#headerRowEl() === el) {
+            this.#headerRowEl.set(null);
+        }
+    }
+    registerVirtualNavigation(navigation) {
+        this.#virtualNav.set(navigation);
+    }
+    setReorderingRow(index) {
+        this.#reorderingRow.set(index);
+    }
+    registerRow(handle) {
+        this.#rows.register(handle);
+    }
+    unregisterRow(handle) {
+        this.#rows.unregister(handle);
+    }
+    rowIndexOf(host) {
+        return this.#rows.indexOfHost(host);
+    }
+    cellTabIndex(host) {
+        if (this.#roving.hasActive()) {
+            return this.#roving.tabindexFor(host);
+        }
+        return this.#firstEnabledCell() === host ? 0 : -1;
+    }
+    isCellHighlighted(host) {
+        return this.#roving.active() === host;
+    }
+    activateCell(host) {
+        if (this.mode() !== 'table') {
+            this.#roving.setActive(host);
+        }
+    }
+    isRowSelected(value) {
+        return this.#selection.isSelected(value);
+    }
+    toggleRowSelection(value) {
+        this.#selection.toggle(value);
+    }
+    selectRow(value, modifiers) {
+        this.#selection.select(value, modifiers);
+    }
+    toggleSelectAll() {
+        this.#selection.toggleSelectAll();
+    }
+    #rowValueOfCell(cellHost) {
+        for (const row of this.#rows.items()) {
+            if (row.cells().some((cell) => cell.host === cellHost)) {
+                return row.value();
+            }
+        }
+        return undefined;
+    }
+    handleCellKeydown(event, host) {
+        if (this.mode() === 'table') {
+            return;
+        }
+        if (this.#handleSelectionKeydown(event, host)) {
+            return;
+        }
+        if (this.#handleExpansionKeydown(event, host)) {
+            return;
+        }
+        this.#handleGridNavigationKeydown(event, host);
+    }
+    #handleSelectionKeydown(event, host) {
+        if (event.key !== ' ' || event.target !== host || this.selectionMode() === 'none') {
+            return false;
+        }
+        const value = this.#rowValueOfCell(host);
+        if (value === undefined) {
+            return false;
+        }
+        event.preventDefault();
+        this.#selection.toggle(value);
+        return true;
+    }
+    #handleExpansionKeydown(event, host) {
+        if (this.mode() !== 'treegrid') {
+            return false;
+        }
+        const intent = resolveTreegridExpandCollapse(event, this.dir());
+        if (intent === null) {
+            return false;
+        }
+        const row = this.#rowOfCell(host);
+        if (!row?.expandable()) {
+            return false;
+        }
+        const value = row.value();
+        const open = this.#expansion.isExpanded(value);
+        if (intent === 'expand' && !open) {
+            event.preventDefault();
+            this.#expansion.setExpanded(value, true);
+            return true;
+        }
+        if (intent === 'collapse' && open) {
+            event.preventDefault();
+            this.#expansion.setExpanded(value, false);
+            return true;
+        }
+        return false;
+    }
+    #handleGridNavigationKeydown(event, host) {
+        const cols = this.#cols();
+        const cells = this.#flatCells();
+        if (cols === 0 || cells.length === 0) {
+            return;
+        }
+        const action = resolveGridNavigation(event, {
+            cols,
+            dir: this.dir(),
+            pageKeys: true,
+        });
+        if (action === null) {
+            return;
+        }
+        event.preventDefault();
+        const currentIndex = cells.findIndex((cell) => cell.host === host);
+        const navigation = this.#virtualNav();
+        const fromRow = this.focusedRowIndex();
+        const total = this.rowCount();
+        if (navigation !== null &&
+            total !== undefined &&
+            fromRow !== null &&
+            ROW_CROSSING_ACTIONS.has(action)) {
+            const col = currentIndex < 0 ? 0 : currentIndex % cols;
+            const target = resolveCrossWindowRowTarget(action, fromRow, col, total, cols);
+            if (target !== null) {
+                navigation.navigateTo(target.row, target.col);
+            }
+            return;
+        }
+        const next = moveGridIndex(currentIndex < 0 ? 0 : currentIndex, cells.length, action, {
+            cols,
+            isDisabled: (i) => cells[i].disabled(),
+        });
+        if (next === null) {
+            return;
+        }
+        this.#roving.focusActive(cells[next].host);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForTable, isStandalone: true, selector: "[forTable]", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, _dirInput: { classPropertyName: "_dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, rowCount: { classPropertyName: "rowCount", publicName: "rowCount", isSignal: true, isRequired: false, transformFunction: null }, colCount: { classPropertyName: "colCount", publicName: "colCount", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, selectableValues: { classPropertyName: "selectableValues", publicName: "selectableValues", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", expanded: "expandedChange" }, host: { properties: { "attr.role": "mode()", "attr.aria-label": "ariaLabel() || null", "attr.dir": "dir()", "attr.data-mode": "mode()", "style.--for-table-header-height.px": "headerSize()?.height ?? null", "attr.aria-rowcount": "rowCountAttr()", "attr.aria-colcount": "colCountAttr()", "attr.aria-multiselectable": "selectionMode() === \"multiple\" ? \"true\" : null" } }, providers: [{ provide: FOR_TABLE_CONTEXT, useExisting: ForTable }], exportAs: ["forTable"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTable, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTable]',
+                    exportAs: 'forTable',
+                    host: {
+                        '[attr.role]': 'mode()',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.dir]': 'dir()',
+                        '[attr.data-mode]': 'mode()',
+                        '[style.--for-table-header-height.px]': 'headerSize()?.height ?? null',
+                        '[attr.aria-rowcount]': 'rowCountAttr()',
+                        '[attr.aria-colcount]': 'colCountAttr()',
+                        '[attr.aria-multiselectable]': 'selectionMode() === "multiple" ? "true" : null',
+                    },
+                    providers: [{ provide: FOR_TABLE_CONTEXT, useExisting: ForTable }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], _dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], rowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowCount", required: false }] }], colCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "colCount", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], selectableValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableValues", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
+/**
+ * Resolves the absolute `(row, 0-based column)` target for a row-crossing grid
+ * action against the true `total` row count. Arrow row-moves preserve the
+ * current column; `first` / `last` jump to the first / last cell of the whole
+ * grid. Returns `null` when the move would step past the dataset bounds.
+ */
+function resolveCrossWindowRowTarget(action, fromRow, col, total, cols) {
+    switch (action) {
+        case 'next-row':
+            return fromRow + 1 < total ? { row: fromRow + 1, col } : null;
+        case 'prev-row':
+            return fromRow - 1 >= 0 ? { row: fromRow - 1, col } : null;
+        case 'first':
+            return { row: 0, col: 0 };
+        case 'last':
+            return { row: total - 1, col: cols - 1 };
+        default:
+            return null;
+    }
+}
+
+/**
+ * Marks the header row of the table (`role="row"`). Registers its host
+ * element with the root so `ForTable` can measure the header's height and
+ * publish `--for-table-header-height` for sticky-cell CSS.
+ */
+class ForTableHeaderRow {
+    ctx = injectTableContext('ForTableHeaderRow');
+    #host = inject(ElementRef);
+    constructor() {
+        const el = this.#host.nativeElement;
+        this.ctx.registerHeaderRow(el);
+        inject(DestroyRef).onDestroy(() => this.ctx.unregisterHeaderRow(el));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableHeaderRow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForTableHeaderRow, isStandalone: true, selector: "[forTableHeaderRow]", host: { attributes: { "role": "row" } }, exportAs: ["forTableHeaderRow"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableHeaderRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTableHeaderRow]',
+                    exportAs: 'forTableHeaderRow',
+                    host: {
+                        role: 'row',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Marks a data row (`role="row"`). Owns the registry of its data cells (for
+ * `aria-colindex`) and registers itself with the root so it joins the row index
+ * space (`aria-rowindex`, 1-based over data rows in `grid`/`treegrid` mode) and
+ * the 2D navigation grid.
+ */
+class ForTableRow {
+    ctx = injectTableContext('ForTableRow');
+    #host = inject(ElementRef).nativeElement;
+    #cells = new Collection();
+    /** This row's selection identity, written into the table's `[(selection)]`. Leave unset for non-selectable rows. */
+    value = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    /** 1-based tree depth for `aria-level` in `mode="treegrid"`. Ignored in other modes. */
+    level = input(1, { ...(ngDevMode ? { debugName: "level" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Marks this row as an expandable parent — emits `aria-expanded` + `data-state`. */
+    expandable = input(false, { ...(ngDevMode ? { debugName: "expandable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Absolute 0-based index of this row in the full virtualized dataset. Set by the
+     * consumer when rendering a window via `[forTableVirtualized]`; drives the absolute
+     * `aria-rowindex` and keeps the focused row mounted across recycling. Leave unset
+     * (default `null`) for non-virtualized tables. Ignored in `mode="table"`.
+     */
+    virtualIndex = input(null, { ...(ngDevMode ? { debugName: "virtualIndex" } : /* istanbul ignore next */ {}), transform: (v) => (v == null ? null : numberAttribute(v)) });
+    rowIndex = computed(() => {
+        if (this.ctx.mode() === 'table') {
+            return null;
+        }
+        const vi = this.virtualIndex();
+        return vi !== null ? vi + 1 : this.ctx.rowIndexOf(this.#host) + 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowIndex" }] : /* istanbul ignore next */ []));
+    selectionMode = this.ctx.selectionMode;
+    selected = computed(() => {
+        const v = this.value();
+        return v !== undefined && this.ctx.isRowSelected(v);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    ariaSelected = computed(() => this.ctx.selectionMode() === 'none' ? null : this.selected() ? 'true' : 'false', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSelected" }] : /* istanbul ignore next */ []));
+    /** Whether this expandable row is currently open. False for non-expandable rows. */
+    expanded = computed(() => {
+        const v = this.value();
+        return v !== undefined && this.ctx.isRowExpanded(v);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    /** Toggles this row's expansion. No-op when the row is not expandable or has no `[value]`. */
+    toggleExpanded() {
+        if (this.expandable()) {
+            this.ctx.toggleRowExpansion(this.value());
+        }
+    }
+    ariaLevel = computed(() => this.ctx.mode() === 'treegrid' ? this.level() : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLevel" }] : /* istanbul ignore next */ []));
+    posinset = computed(() => this.ctx.mode() === 'treegrid' ? this.ctx.rowPosinset(this.#host) : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "posinset" }] : /* istanbul ignore next */ []));
+    setsize = computed(() => this.ctx.mode() === 'treegrid' ? this.ctx.rowSetsize(this.#host) : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "setsize" }] : /* istanbul ignore next */ []));
+    ariaExpanded = computed(() => this.ctx.mode() === 'treegrid' && this.expandable()
+        ? this.expanded()
+            ? 'true'
+            : 'false'
+        : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaExpanded" }] : /* istanbul ignore next */ []));
+    expandState = computed(() => this.ctx.mode() === 'treegrid' && this.expandable()
+        ? this.expanded()
+            ? 'open'
+            : 'closed'
+        : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandState" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const handle = {
+            host: this.#host,
+            cells: this.#cells.items,
+            value: this.value,
+            level: this.level,
+            expandable: this.expandable,
+            virtualIndex: this.virtualIndex,
+        };
+        registerHandle(handle, (h) => this.ctx.registerRow(h), (h) => this.ctx.unregisterRow(h));
+    }
+    registerCell(handle) {
+        this.#cells.register(handle);
+    }
+    unregisterCell(handle) {
+        this.#cells.unregister(handle);
+    }
+    cellIndexOf(host) {
+        return this.#cells.indexOfHost(host);
+    }
+    toggleSelected() {
+        const v = this.value();
+        if (v !== undefined) {
+            this.ctx.toggleRowSelection(v);
+        }
+    }
+    onClick(event) {
+        const v = this.value();
+        if (this.ctx.selectionMode() === 'none' || v === undefined) {
+            return;
+        }
+        this.ctx.selectRow(v, {
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+            shiftKey: event.shiftKey,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableRow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForTableRow, isStandalone: true, selector: "[forTableRow]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, virtualIndex: { classPropertyName: "virtualIndex", publicName: "virtualIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "row" }, listeners: { "click": "onClick($event)" }, properties: { "attr.aria-rowindex": "rowIndex()", "attr.aria-selected": "ariaSelected()", "attr.data-selected": "selected() ? \"\" : null", "attr.aria-level": "ariaLevel()", "attr.aria-posinset": "posinset()", "attr.aria-setsize": "setsize()", "attr.aria-expanded": "ariaExpanded()", "attr.data-state": "expandState()" } }, providers: [{ provide: FOR_TABLE_ROW_CONTEXT, useExisting: ForTableRow }], exportAs: ["forTableRow"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTableRow]',
+                    exportAs: 'forTableRow',
+                    host: {
+                        role: 'row',
+                        '[attr.aria-rowindex]': 'rowIndex()',
+                        '[attr.aria-selected]': 'ariaSelected()',
+                        '[attr.data-selected]': 'selected() ? "" : null',
+                        '[attr.aria-level]': 'ariaLevel()',
+                        '[attr.aria-posinset]': 'posinset()',
+                        '[attr.aria-setsize]': 'setsize()',
+                        '[attr.aria-expanded]': 'ariaExpanded()',
+                        '[attr.data-state]': 'expandState()',
+                        '(click)': 'onClick($event)',
+                    },
+                    providers: [{ provide: FOR_TABLE_ROW_CONTEXT, useExisting: ForTableRow }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], virtualIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualIndex", required: false }] }] } });
+
+/**
+ * Marks a header cell (`role="columnheader"`). Requires a `name` input that
+ * identifies the column — reflected as `data-column` for later phases (sort,
+ * resize, reorder) to key off. Optionally sticky via the `sticky` input.
+ */
+class ForTableHeaderCell {
+    ctx = injectTableContext('ForTableHeaderCell');
+    /** Column identifier, reflected as `data-column`. Required by later phases (sort, resize, reorder). */
+    name = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * Sticky placement for this header cell. `true` (or the bare `sticky`
+     * attribute) pins to the start edge; `'end'` pins to the end edge; `false`
+     * (default) is not sticky. The consumer applies `position: sticky` and the
+     * appropriate `top` / `left` / `right` offset in CSS — this input only
+     * provides the `data-sticky` hook.
+     */
+    sticky = input(false, { ...(ngDevMode ? { debugName: "sticky" } : /* istanbul ignore next */ {}), transform: coerceSticky });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableHeaderCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForTableHeaderCell, isStandalone: true, selector: "[forTableHeaderCell]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "columnheader" }, properties: { "attr.data-column": "name()", "attr.data-sticky": "sticky() ? (sticky() === 'end' ? 'end' : '') : null" } }, exportAs: ["forTableHeaderCell"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableHeaderCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTableHeaderCell]',
+                    exportAs: 'forTableHeaderCell',
+                    host: {
+                        role: 'columnheader',
+                        '[attr.data-column]': 'name()',
+                        '[attr.data-sticky]': "sticky() ? (sticky() === 'end' ? 'end' : '') : null",
+                    },
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }] } });
+
+/**
+ * Marks a data cell. The `role` is derived from the root's `mode`: `'cell'` in
+ * `table` mode and `'gridcell'` in `grid` / `treegrid` mode. In grid / treegrid
+ * mode the cell is a roving-tabindex target — the single active cell carries
+ * `tabindex="0"` (others `-1`), reflects `data-highlighted` when focused, and
+ * carries a 1-based `aria-colindex`. Arrow / Home / End / Ctrl+Home / Ctrl+End /
+ * PageUp / PageDown move focus between cells. Requires a `name` input that
+ * identifies the column — reflected as `data-column`. Optionally sticky and
+ * optionally disabled (disabled cells are skipped during navigation).
+ */
+class ForTableCell {
+    ctx = injectTableContext('ForTableCell');
+    rowCtx = injectTableRowContext('ForTableCell');
+    #host = inject(ElementRef).nativeElement;
+    role = computed(() => (this.ctx.mode() === 'table' ? 'cell' : 'gridcell'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    /** Column identifier, reflected as `data-column`. Required by later phases (sort, resize, reorder). */
+    name = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * Sticky placement for this data cell. `true` (or the bare `sticky` attribute)
+     * pins to the start edge; `'end'` pins to the end edge; `false` (default) is not
+     * sticky. The consumer applies `position: sticky` and the offsets in CSS — this
+     * input only provides the `data-sticky` hook.
+     */
+    sticky = input(false, { ...(ngDevMode ? { debugName: "sticky" } : /* istanbul ignore next */ {}), transform: coerceSticky });
+    /**
+     * Whether this data cell is disabled. Disabled cells are skipped during arrow-key
+     * navigation, drop out of the tab order, and reflect `aria-disabled` / `data-disabled`.
+     * Only meaningful in `grid` / `treegrid` mode.
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    tabindex = computed(() => {
+        if (this.ctx.mode() === 'table') {
+            return null;
+        }
+        if (this.disabled()) {
+            return -1;
+        }
+        return this.ctx.cellTabIndex(this.#host);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
+    colIndex = computed(() => this.ctx.mode() === 'table' ? null : this.rowCtx.cellIndexOf(this.#host) + 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colIndex" }] : /* istanbul ignore next */ []));
+    highlighted = computed(() => this.ctx.mode() !== 'table' && this.ctx.isCellHighlighted(this.#host), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const handle = { host: this.#host, disabled: this.disabled };
+        registerHandle(handle, (h) => this.rowCtx.registerCell(h), (h) => this.rowCtx.unregisterCell(h));
+    }
+    onFocus() {
+        this.ctx.activateCell(this.#host);
+    }
+    onKeyDown(event) {
+        this.ctx.handleCellKeydown(event, this.#host);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForTableCell, isStandalone: true, selector: "[forTableCell]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "onFocus()", "keydown": "onKeyDown($event)" }, properties: { "attr.role": "role()", "attr.tabindex": "tabindex()", "attr.aria-colindex": "colIndex()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.data-column": "name()", "attr.data-sticky": "sticky() ? (sticky() === 'end' ? 'end' : '') : null", "attr.data-highlighted": "highlighted() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null" } }, exportAs: ["forTableCell"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTableCell]',
+                    exportAs: 'forTableCell',
+                    host: {
+                        '[attr.role]': 'role()',
+                        '[attr.tabindex]': 'tabindex()',
+                        '[attr.aria-colindex]': 'colIndex()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.data-column]': 'name()',
+                        '[attr.data-sticky]': "sticky() ? (sticky() === 'end' ? 'end' : '') : null",
+                        '[attr.data-highlighted]': 'highlighted() ? "" : null',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '(focus)': 'onFocus()',
+                        '(keydown)': 'onKeyDown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Decorative per-row selection affordance inside a `[forTableRow]`. Clicking it
+ * toggles the row's selection; the enclosing row owns the announced
+ * `aria-selected`, so this element is `aria-hidden` and reflects
+ * `data-state="checked" | "unchecked"` for styling only. Place a glyph inside.
+ */
+class ForTableRowSelector {
+    row = injectTableRowContext('ForTableRowSelector');
+    dataState = computed(() => (this.row.selected() ? 'checked' : 'unchecked'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        event.stopPropagation();
+        this.row.toggleSelected();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableRowSelector, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForTableRowSelector, isStandalone: true, selector: "[forTableRowSelector]", host: { attributes: { "aria-hidden": "true" }, listeners: { "click": "onClick($event)" }, properties: { "attr.data-state": "dataState()" } }, exportAs: ["forTableRowSelector"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableRowSelector, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTableRowSelector]',
+                    exportAs: 'forTableRowSelector',
+                    host: {
+                        'aria-hidden': 'true',
+                        '[attr.data-state]': 'dataState()',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }] });
+
+/**
+ * Header "select all" checkbox for a `[forTable]` in `selectionMode="multiple"`.
+ * Reflects `aria-checked="true" | "false" | "mixed"` and
+ * `data-state="checked" | "unchecked" | "indeterminate"` derived from how many
+ * selectable rows are selected. Clicking (or Space / Enter) selects all rows
+ * when none/some are selected, and clears when all are. No-op outside multiple
+ * mode. Apply on a focusable element (e.g. a `<span>` you make tabbable, or a
+ * `<button type="button">`).
+ */
+class ForTableSelectAll {
+    ctx = injectTableContext('ForTableSelectAll');
+    /** Accessible label for the control (e.g. "Select all rows"). Truthy-only. */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaChecked = computed(() => {
+        const state = this.ctx.selectAllState();
+        return state === 'all' ? 'true' : state === 'some' ? 'mixed' : 'false';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaChecked" }] : /* istanbul ignore next */ []));
+    dataState = computed(() => {
+        const state = this.ctx.selectAllState();
+        return state === 'all' ? 'checked' : state === 'some' ? 'indeterminate' : 'unchecked';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
+    onClick() {
+        this.ctx.toggleSelectAll();
+    }
+    onKeyDown(event) {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.ctx.toggleSelectAll();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableSelectAll, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForTableSelectAll, isStandalone: true, selector: "[forTableSelectAll]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "checkbox", "tabindex": "0" }, listeners: { "click": "onClick()", "keydown": "onKeyDown($event)" }, properties: { "attr.aria-checked": "ariaChecked()", "attr.aria-label": "ariaLabel() || null", "attr.data-state": "dataState()" } }, exportAs: ["forTableSelectAll"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableSelectAll, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTableSelectAll]',
+                    exportAs: 'forTableSelectAll',
+                    host: {
+                        role: 'checkbox',
+                        tabindex: '0',
+                        '[attr.aria-checked]': 'ariaChecked()',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.data-state]': 'dataState()',
+                        '(click)': 'onClick()',
+                        '(keydown)': 'onKeyDown($event)',
+                    },
+                }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Turns a `[forTableHeaderCell]` into a sortable affordance that emits `aria-sort`
+ * and fires `sortChange` on activation (click, Enter, Space). The directive is
+ * **self-contained**: it owns only its own `direction` state and does NOT register
+ * with the table context or auto-reset sibling headers. The "one sorted column at a
+ * time" guarantee is the consumer's responsibility — hold a single sort descriptor
+ * signal and derive each header's `direction` from it. Apply this directive on the
+ * same element as `[forTableHeaderCell]`.
+ *
+ * When a `[forDraggable]` (column reorder) shares the same host cell, this directive
+ * yields its `tabindex` to the draggable's roving tab stop so the two never collide on
+ * the host attribute; `aria-sort` / `data-sorted` and click / keyboard activation stay
+ * on the cell.
+ *
+ * Cycle (default `firstClickDirection='ascending'`): `none → ascending → descending → none`.
+ * With `disableClear`: `none → ascending → descending → ascending`.
+ *
+ * `firstClickDirection='descending'` flips the entry pole, so a freshly activated
+ * column starts descending: `none → descending → ascending → none` (and with
+ * `disableClear`: `none → descending → ascending → descending`) — the descending-first
+ * behavior used by single-always-active sort descriptors.
+ */
+class ForTableSortHeader {
+    ctx = injectTableContext('ForTableSortHeader');
+    #draggable = inject(FOR_DRAGGABLE_CONTEXT, { self: true, optional: true });
+    /** Column identity included in the `sortChange` payload. */
+    column = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    /**
+     * Current sort direction. Acts as both the controlled value and the initial value.
+     * Its implicit `directionChange` output fires on every internal update (via
+     * `[(direction)]`). `sortChange` is the primary column-aware event consumers bind:
+     * it carries a `{ column, direction }` descriptor and fires on every activation,
+     * regardless of whether the consumer uses two-way binding.
+     */
+    direction = model('none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /**
+     * When `true`, the cycle skips the `'none'` step: `ascending → descending → ascending`.
+     * Useful when clearing the sort is not allowed.
+     */
+    disableClear = input(false, { ...(ngDevMode ? { debugName: "disableClear" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Direction a previously-unsorted column enters on its first activation (the
+     * `'none' → ?` step of the cycle). Defaults to `'ascending'`. Set to `'descending'`
+     * for descending-first columns. The toggle between the two sorted directions and the
+     * optional `'none'` step (`disableClear`) are unchanged.
+     */
+    firstClickDirection = input('ascending', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstClickDirection" }] : /* istanbul ignore next */ []));
+    /**
+     * When `false`, the header is fully inert: no `tabindex`, no `aria-sort`, and click /
+     * keyboard handlers are no-ops. Defaults to `true`.
+     */
+    sortable = input(true, { ...(ngDevMode ? { debugName: "sortable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Fires on every activation with the column identity and the new direction.
+     * Consumers bind this to update their own sort descriptor and reorder rows.
+     */
+    sortChange = output();
+    /**
+     * Truthy-only `aria-sort` / `data-sorted` value: `'ascending'` or `'descending'`
+     * while sorted, `null` (absent) when `direction` is `'none'` or `sortable` is `false`.
+     */
+    activeDirection = computed(() => this.sortable() && this.direction() !== 'none' ? this.direction() : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeDirection" }] : /* istanbul ignore next */ []));
+    tabindex = computed(() => !this.#draggable && this.sortable() ? '0' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
+    /** Activates the sort: computes the next direction, updates the model, and emits `sortChange`. */
+    activate() {
+        if (!this.sortable())
+            return;
+        const next = this.#next(this.direction());
+        this.direction.set(next);
+        this.sortChange.emit({ column: this.column(), direction: next });
+    }
+    /** Handles Enter and Space keyboard events, forwarding to `activate()`. */
+    onKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.activate();
+        }
+    }
+    #next(current) {
+        const first = this.firstClickDirection();
+        const second = first === 'ascending' ? 'descending' : 'ascending';
+        if (current === 'none')
+            return first;
+        if (current === first)
+            return second;
+        return this.disableClear() ? first : 'none';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableSortHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForTableSortHeader, isStandalone: true, selector: "[forTableSortHeader]", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, disableClear: { classPropertyName: "disableClear", publicName: "disableClear", isSignal: true, isRequired: false, transformFunction: null }, firstClickDirection: { classPropertyName: "firstClickDirection", publicName: "firstClickDirection", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { direction: "directionChange", sortChange: "sortChange" }, host: { listeners: { "click": "activate()", "keydown": "onKeyDown($event)" }, properties: { "attr.aria-sort": "activeDirection()", "attr.data-sorted": "activeDirection()", "attr.tabindex": "tabindex()" } }, exportAs: ["forTableSortHeader"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableSortHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTableSortHeader]',
+                    exportAs: 'forTableSortHeader',
+                    host: {
+                        '[attr.aria-sort]': 'activeDirection()',
+                        '[attr.data-sorted]': 'activeDirection()',
+                        '[attr.tabindex]': 'tabindex()',
+                        '(click)': 'activate()',
+                        '(keydown)': 'onKeyDown($event)',
+                    },
+                }]
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }, { type: i0.Output, args: ["directionChange"] }], disableClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableClear", required: false }] }], firstClickDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstClickDirection", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }] } });
+
+/**
+ * Turns a focusable element inside a `[forTableHeaderCell]` into a column-resize
+ * handle. Supports pointer drag (with a dead-zone so a plain click is a no-op) and
+ * `ArrowLeft` / `ArrowRight` keyboard resize, both constrained to `[min, max]`.
+ *
+ * On every change it publishes the resolved width as the CSS custom property
+ * `--for-table-col-<column>-width` on the table root, so the consumer can apply it
+ * to their layout (`grid-template-columns` in `<div>` mode, a `<col>` / cell width
+ * in native `<table>` mode). **It never lays out columns itself and never resizes
+ * data** — it owns the affordance, accessibility, and the published width only.
+ *
+ * Reflects `data-resizing` (empty string) while a pointer drag is active. Carries
+ * `role="separator"` with `aria-orientation="vertical"` and live `aria-value*`,
+ * mirroring `[forPaneResizer]`. The consumer supplies `aria-label`. Before the first
+ * gesture, `aria-valuenow` falls back to the header-cell width measured once on mount
+ * (browser-only), so a separator with no `[width]` is never announced without a
+ * current value; an explicit `[width]` always takes precedence.
+ *
+ * @example
+ * ```html
+ * <th forTableHeaderCell name="name">
+ *   Name
+ *   <button forTableColumnResizer column="name" [(width)]="nameWidth"
+ *           aria-label="Resize Name column"></button>
+ * </th>
+ * ```
+ */
+class ForTableColumnResizer {
+    ctx = injectTableContext('ForTableColumnResizer');
+    #host = inject(ElementRef).nativeElement;
+    /** Column identity; included in the `resizeCommit` payload and the published CSS var name. */
+    column = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    /**
+     * Current column width in pixels. Two-way bindable via `[(width)]`. Acts as both
+     * the controlled value and the base a pointer drag / arrow step is applied to.
+     * When unset, the base for the first gesture is measured from the header cell.
+     * Its implicit `widthChange` fires on every live update (drag tick, arrow press);
+     * `resizeCommit` is the distinct column-aware gesture-end event.
+     */
+    width = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+    /** Minimum width in pixels. Default `0`. */
+    min = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Maximum width in pixels. Default `Infinity` (no upper bound). */
+    max = input(Infinity, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Pixels applied per `ArrowLeft` / `ArrowRight` press. Default `10`. */
+    step = input(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /**
+     * Fires once per resize gesture — at pointer-up after a drag, and on every arrow
+     * press — with the column identity and its committed width. Bind it to persist
+     * the width; live updates during a drag come through `[(width)]` / `widthChange`.
+     */
+    resizeCommit = output();
+    /** `aria-valuemax`, omitted when `max` is non-finite (the default unbounded case). */
+    ariaValueMax = computed(() => Number.isFinite(this.max()) ? this.max() : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaValueMax" }] : /* istanbul ignore next */ []));
+    #resizing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#resizing" }] : /* istanbul ignore next */ []));
+    /** Whether a pointer drag is currently active (drives `data-resizing`). */
+    resizing = this.#resizing.asReadonly();
+    #measuredWidth = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#measuredWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Header-cell width measured once on mount (browser-only). Backs `aria-valuenow`
+     * before any explicit `[width]` so the focusable separator never ships without a
+     * current value on the measured-fallback path; an explicit `[width]` still wins.
+     */
+    measuredWidth = this.#measuredWidth.asReadonly();
+    #disposePointer = null;
+    constructor() {
+        inject(DestroyRef).onDestroy(() => this.#disposePointer?.());
+        effect(() => {
+            const w = this.width();
+            if (w != null) {
+                this.ctx.setColumnWidth(this.column(), w);
+            }
+        });
+        if (isPlatformBrowser(inject(PLATFORM_ID))) {
+            afterNextRender(() => this.#measuredWidth.set(this.#measureBaseWidth()));
+        }
+    }
+    onPointerDown(event) {
+        if (event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const ltr = this.ctx.dir() !== 'rtl';
+        this.#disposePointer = startPointerResize(event, {
+            host: this.#host,
+            axis: 'x',
+            startValue: this.width() ?? this.#measureBaseWidth(),
+            invert: !ltr,
+            constrain: (n) => clampToRange(n, this.min(), this.max()),
+            onResize: (w) => {
+                this.#resizing.set(true);
+                this.width.set(w);
+            },
+            onCommit: (w) => {
+                this.#resizing.set(false);
+                this.resizeCommit.emit({ column: this.column(), width: w });
+            },
+        });
+    }
+    onKeyDown(event) {
+        const ltr = this.ctx.dir() !== 'rtl';
+        const base = this.width() ?? this.#measureBaseWidth();
+        let next;
+        if (event.key === 'ArrowRight') {
+            next = clampToRange(base + (ltr ? this.step() : -this.step()), this.min(), this.max());
+        }
+        else if (event.key === 'ArrowLeft') {
+            next = clampToRange(base + (ltr ? -this.step() : this.step()), this.min(), this.max());
+        }
+        else {
+            return;
+        }
+        event.preventDefault();
+        if (next === this.width()) {
+            return;
+        }
+        this.width.set(next);
+        this.resizeCommit.emit({ column: this.column(), width: next });
+    }
+    onClick(event) {
+        event.stopPropagation();
+    }
+    #measureBaseWidth() {
+        const cell = this.#host.closest('[forTableHeaderCell]');
+        return (cell ?? this.#host).getBoundingClientRect().width;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableColumnResizer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForTableColumnResizer, isStandalone: true, selector: "[forTableColumnResizer]", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { width: "widthChange", resizeCommit: "resizeCommit" }, host: { attributes: { "role": "separator", "aria-orientation": "vertical" }, listeners: { "pointerdown": "onPointerDown($event)", "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "attr.tabindex": "\"0\"", "attr.aria-valuenow": "width() ?? measuredWidth() ?? null", "attr.aria-valuemin": "min()", "attr.aria-valuemax": "ariaValueMax()", "attr.data-resizing": "resizing() ? \"\" : null" } }, exportAs: ["forTableColumnResizer"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableColumnResizer, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTableColumnResizer]',
+                    exportAs: 'forTableColumnResizer',
+                    host: {
+                        role: 'separator',
+                        'aria-orientation': 'vertical',
+                        '[attr.tabindex]': '"0"',
+                        '[attr.aria-valuenow]': 'width() ?? measuredWidth() ?? null',
+                        '[attr.aria-valuemin]': 'min()',
+                        '[attr.aria-valuemax]': 'ariaValueMax()',
+                        '[attr.data-resizing]': 'resizing() ? "" : null',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], resizeCommit: [{ type: i0.Output, args: ["resizeCommit"] }] } });
+
+/**
+ * Opt-in **column reordering** for `ForTable`, composed over the drag-drop primitive.
+ *
+ * Apply on the `[forTableHeaderRow]` element. It wraps `[forDropList]` (via
+ * `hostDirectives`) so the header cells become a reorderable list, then translates
+ * drag-drop's generic drop into the table-friendly `columnReorder` output. Mark each
+ * `[forTableHeaderCell]` as `[forDraggable]` with `[dragData]` set to the column name.
+ * On a committed drop (pointer or keyboard) it emits the previous / new index and the
+ * new column-name order; the consumer applies it to their own column array. **It never
+ * reorders columns itself** (BYO-data).
+ *
+ * The wrapped list defaults to `orientation="horizontal"` (a column reorder is always along
+ * the row axis), so no `orientation` binding is needed. Bind `orientation="vertical"` to
+ * override for the rare case.
+ *
+ * @example
+ * ```html
+ * <div forTableHeaderRow forTableColumnReorder (columnReorder)="columns.set($event.columns)">
+ *   @for (col of columns(); track col) {
+ *     <div forTableHeaderCell [name]="col" forDraggable [dragData]="col">{{ col }}</div>
+ *   }
+ * </div>
+ * ```
+ */
+class ForTableColumnReorder {
+    ctx = injectTableContext('ForTableColumnReorder');
+    #list = inject(ForDropList);
+    /**
+     * Fires once per committed reorder gesture (pointer drop or keyboard drop) with the
+     * previous / new column index and the full column-name order after the move.
+     */
+    columnReorder = output();
+    constructor() {
+        const sub = this.#list.dragDrop.subscribe((event) => this.#emit(event));
+        inject(DestroyRef).onDestroy(() => sub.unsubscribe());
+    }
+    #emit(event) {
+        const names = this.#list.items().map((handle) => String(handle.data()));
+        const columns = moveItemInArray(names, event.previousIndex, event.currentIndex);
+        this.columnReorder.emit({ from: event.previousIndex, to: event.currentIndex, columns });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableColumnReorder, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForTableColumnReorder, isStandalone: true, selector: "[forTableColumnReorder]", outputs: { columnReorder: "columnReorder" }, providers: [{ provide: FOR_DROP_LIST_DEFAULT_ORIENTATION, useValue: 'horizontal' }], exportAs: ["forTableColumnReorder"], hostDirectives: [{ directive: i1.ForDropList, inputs: ["orientation", "orientation", "dir", "dir", "disabled", "disabled", "autoScroll", "autoScroll", "animateReorder", "animateReorder", "liveSort", "liveSort", "boundary", "boundary", "lockAxis", "lockAxis"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableColumnReorder, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTableColumnReorder]',
+                    exportAs: 'forTableColumnReorder',
+                    providers: [{ provide: FOR_DROP_LIST_DEFAULT_ORIENTATION, useValue: 'horizontal' }],
+                    hostDirectives: [
+                        {
+                            directive: ForDropList,
+                            inputs: [
+                                'orientation',
+                                'dir',
+                                'disabled',
+                                'autoScroll',
+                                'animateReorder',
+                                'liveSort',
+                                'boundary',
+                                'lockAxis',
+                            ],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { columnReorder: [{ type: i0.Output, args: ["columnReorder"] }] } });
+
+/**
+ * Translates a drop-list's window-relative `previousIndex` / `currentIndex` into
+ * absolute dataset indices, so a virtualized table's consumer can apply
+ * `moveItemInArray` over the **full** row array. `windowIndices` holds the
+ * absolute `virtualIndex` of every rendered draggable row, in DOM (ascending)
+ * order. Thin table-facing wrapper over the shared
+ * {@link translateWindowReorder} helper, which owns the post-removal index math.
+ */
+function translateRowReorderIndices(windowIndices, previousIndex, currentIndex) {
+    return translateWindowReorder(windowIndices, previousIndex, currentIndex);
+}
+/**
+ * Opt-in **row reordering** for `ForTable`, composed over the drag-drop primitive.
+ *
+ * Apply on the rowgroup element that wraps the data rows (`<div role="rowgroup">` in
+ * `<div>` mode, `<tbody>` in native `<table>` mode). It wraps `[forDropList]` (via
+ * `hostDirectives`, vertical by default) so the rows become a reorderable list, then
+ * translates drag-drop's generic drop into the table-friendly `rowReorder` output. Mark
+ * each `[forTableRow]` as `[forDraggable]` with a `[dragData]`. On a committed drop it
+ * emits the previous / new index; the consumer applies the move to their own row array
+ * (e.g. `moveItemInArray`). **It never reorders rows itself** (BYO-data).
+ *
+ * Under `[forTableVirtualized]`, `rowReorder` emits **absolute** dataset indices
+ * (derived from each rendered row's `virtualIndex`) so `moveItemInArray` over the full
+ * array moves the right row. Pointer drag works within the rendered window and reaches
+ * rows beyond it via auto-scroll (the lifted row is kept mounted for the drag); keyboard
+ * reorder steps the target across the entire dataset (scrolling unmounted rows into view).
+ * A non-virtualized table emits rendered-order indices unchanged.
+ *
+ * @example
+ * ```html
+ * <div role="rowgroup" forTableRowReorder (rowReorder)="onReorder($event)">
+ *   @for (row of rows(); track row.id) {
+ *     <div forTableRow [value]="row.id" forDraggable [dragData]="row.id">…</div>
+ *   }
+ * </div>
+ * ```
+ */
+class ForTableRowReorder {
+    ctx = injectTableContext('ForTableRowReorder');
+    #list = inject(ForDropList);
+    #host = inject(ElementRef).nativeElement;
+    #document = inject(DOCUMENT);
+    #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    #announcer = inject(LiveAnnouncer);
+    #dragDefaults = inject(FOR_DRAG_DROP_DEFAULTS);
+    #kbLiftedHost = null;
+    #kbFrom = 0;
+    #kbTarget = 0;
+    /** Fires once per committed reorder gesture with the previous / new row index. */
+    rowReorder = output();
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        const sub = this.#list.dragDrop.subscribe((event) => this.rowReorder.emit(this.#resolveDescriptor(event)));
+        destroyRef.onDestroy(() => sub.unsubscribe());
+        if (this.#isBrowser) {
+            const onPointerDown = (event) => this.#pinFromPointer(event);
+            const onPointerEnd = () => this.ctx.setReorderingRow(null);
+            this.#host.addEventListener('pointerdown', onPointerDown, { capture: true });
+            this.#document.addEventListener('pointerup', onPointerEnd, { capture: true });
+            this.#document.addEventListener('pointercancel', onPointerEnd, { capture: true });
+            createKeyboardDragMediator({
+                host: this.#host,
+                isBrowser: this.#isBrowser,
+                destroyRef,
+                isLifted: () => this.#kbLiftedHost !== null,
+                onIdleKeydown: (event) => this.#onIdleKeydown(event),
+                onLiftedKeydown: (event) => this.#onLiftedKeydown(event),
+                onFocusOut: (event) => {
+                    if (this.#kbLiftedHost !== null && event.target === this.#kbLiftedHost) {
+                        this.#kbCancel();
+                    }
+                },
+            });
+            destroyRef.onDestroy(() => {
+                this.#host.removeEventListener('pointerdown', onPointerDown, { capture: true });
+                this.#document.removeEventListener('pointerup', onPointerEnd, { capture: true });
+                this.#document.removeEventListener('pointercancel', onPointerEnd, { capture: true });
+                if (this.#kbLiftedHost !== null) {
+                    this.#kbCancel();
+                }
+                this.ctx.setReorderingRow(null);
+            });
+        }
+    }
+    #onLiftedKeydown(event) {
+        if (this.ctx.virtualRowNavigation() === null) {
+            return;
+        }
+        const key = event.key;
+        if (key === ' ' || key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.#kbCommit();
+        }
+        else if (key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.#kbCancel();
+        }
+        else if (key === 'ArrowDown') {
+            this.#setTarget(this.#kbTarget + 1);
+            event.preventDefault();
+            event.stopPropagation();
+            this.#kbApplyTarget();
+        }
+        else if (key === 'ArrowUp') {
+            this.#setTarget(this.#kbTarget - 1);
+            event.preventDefault();
+            event.stopPropagation();
+            this.#kbApplyTarget();
+        }
+        else if (key === 'Home') {
+            this.#setTarget(0);
+            event.preventDefault();
+            event.stopPropagation();
+            this.#kbApplyTarget();
+        }
+        else if (key === 'End') {
+            this.#setTarget(this.#count() - 1);
+            event.preventDefault();
+            event.stopPropagation();
+            this.#kbApplyTarget();
+        }
+        else if (key === 'PageDown') {
+            this.#setTarget(this.#kbTarget + this.#page());
+            event.preventDefault();
+            event.stopPropagation();
+            this.#kbApplyTarget();
+        }
+        else if (key === 'PageUp') {
+            this.#setTarget(this.#kbTarget - this.#page());
+            event.preventDefault();
+            event.stopPropagation();
+            this.#kbApplyTarget();
+        }
+    }
+    #onIdleKeydown(event) {
+        if (this.ctx.virtualRowNavigation() === null) {
+            return;
+        }
+        const key = event.key;
+        if (key !== ' ' && key !== 'Enter') {
+            return;
+        }
+        const draggable = this.#list.items().find((h) => h.host === event.target);
+        if (draggable === undefined || draggable.disabled()) {
+            return;
+        }
+        const handle = this.ctx.rows().find((r) => r.host === event.target);
+        const vi = handle?.virtualIndex() ?? null;
+        if (vi === null) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.#kbLift(event.target, vi);
+    }
+    #kbLift(host, vi) {
+        this.#kbLiftedHost = host;
+        this.#kbFrom = vi;
+        this.#kbTarget = vi;
+        this.ctx.setReorderingRow(vi);
+        const total = this.#count();
+        this.#announcer.announce(this.#dragDefaults.announceLift(this.#label(), vi + 1, total), 'assertive');
+    }
+    #kbApplyTarget() {
+        this.ctx.virtualRowNavigation()?.scrollToRow(this.#kbTarget);
+        this.#announcer.announce(this.#dragDefaults.announceMove(this.#label(), this.#kbTarget + 1, this.#count()), 'polite');
+    }
+    #kbCommit() {
+        this.rowReorder.emit({ from: this.#kbFrom, to: this.#kbTarget });
+        this.#announcer.announce(this.#dragDefaults.announceDrop(this.#label(), this.#kbTarget + 1, this.#count()), 'assertive');
+        this.#kbTeardown();
+    }
+    #kbCancel() {
+        this.#announcer.announce(this.#dragDefaults.announceCancel(this.#label()), 'assertive');
+        this.#kbTeardown();
+    }
+    #kbTeardown() {
+        this.#kbLiftedHost = null;
+        this.#kbFrom = 0;
+        this.#kbTarget = 0;
+        this.ctx.setReorderingRow(null);
+    }
+    #count() {
+        return this.ctx.rowCount() ?? this.#list.items().length;
+    }
+    #page() {
+        return Math.max(1, this.#list.items().length);
+    }
+    #label() {
+        return (this.#kbLiftedHost?.textContent ?? '').trim();
+    }
+    #setTarget(value) {
+        this.#kbTarget = Math.max(0, Math.min(this.#count() - 1, value));
+    }
+    #pinFromPointer(event) {
+        const target = event.target;
+        if (!(target instanceof HTMLElement)) {
+            return;
+        }
+        const rowHost = target.closest('[forTableRow]');
+        if (rowHost === null) {
+            return;
+        }
+        const handle = this.ctx.rows().find((r) => r.host === rowHost);
+        this.ctx.setReorderingRow(handle?.virtualIndex() ?? null);
+    }
+    #resolveDescriptor(event) {
+        const fallback = {
+            from: event.previousIndex,
+            to: event.currentIndex,
+        };
+        if (event.container !== event.previousContainer) {
+            return fallback;
+        }
+        const rowByHost = new Map(this.ctx.rows().map((r) => [r.host, r]));
+        const windowIndices = [];
+        for (const item of this.#list.items()) {
+            const index = rowByHost.get(item.host)?.virtualIndex() ?? null;
+            if (index === null) {
+                return fallback;
+            }
+            windowIndices.push(index);
+        }
+        return translateRowReorderIndices(windowIndices, event.previousIndex, event.currentIndex);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableRowReorder, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForTableRowReorder, isStandalone: true, selector: "[forTableRowReorder]", outputs: { rowReorder: "rowReorder" }, exportAs: ["forTableRowReorder"], hostDirectives: [{ directive: i1.ForDropList, inputs: ["dir", "dir", "disabled", "disabled", "autoScroll", "autoScroll", "animateReorder", "animateReorder", "liveSort", "liveSort", "boundary", "boundary", "lockAxis", "lockAxis"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTableRowReorder, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTableRowReorder]',
+                    exportAs: 'forTableRowReorder',
+                    hostDirectives: [
+                        {
+                            directive: ForDropList,
+                            inputs: [
+                                'dir',
+                                'disabled',
+                                'autoScroll',
+                                'animateReorder',
+                                'liveSort',
+                                'boundary',
+                                'lockAxis',
+                            ],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { rowReorder: [{ type: i0.Output, args: ["rowReorder"] }] } });
+
+const FALLBACK = {};
+const { token, provideDefaults } = createDefaults('FOR_TABLE_DEFAULTS', FALLBACK);
+/** Token holding the resolved table defaults for the current scope. */
+const FOR_TABLE_DEFAULTS = token;
+/**
+ * Configures forty-cdk table defaults for this injector scope. Partial
+ * overrides inherit unspecified keys from the parent scope (or library
+ * defaults at the root).
+ */
+function provideForTableDefaults(defaults = {}) {
+    return provideDefaults(defaults);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FOR_TABLE_CONTEXT, FOR_TABLE_DEFAULTS, ForTable, ForTableCell, ForTableColumnReorder, ForTableColumnResizer, ForTableHeaderCell, ForTableHeaderRow, ForTableRow, ForTableRowReorder, ForTableRowSelector, ForTableSelectAll, ForTableSortHeader, provideForTableDefaults };
+//# sourceMappingURL=forty-cdk-table.mjs.map