@ngneers/controls 0.0.1-next.0

package/fesm2022/ngneers-controls-table.mjs

@@ -0,0 +1,2634 @@
+import * as i0 from '@angular/core';
+import { signal, computed, afterRenderEffect, input, inject, ElementRef, effect, Directive, contentChild, Component, viewChild, model, booleanAttribute, afterNextRender, Renderer2, ViewContainerRef, viewChildren, EnvironmentInjector, ApplicationRef, createComponent, NgModule } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { elementSizeSignal, injectThemeTemplate, templateTypesFn, NgnTemplate, domEventHandler, setComponentInput } from '@ngneers/controls/api/ng';
+import { NgnBase, NgnPt, provideSelf, getNearestNgnInstance, getNearestNgnInstanceSig } from '@ngneers/controls/base';
+import { I18n } from '@ngneers/controls/i18n';
+import { NgnIcon } from '@ngneers/controls/icon';
+import { NgnPaginator } from '@ngneers/controls/paginator';
+import { NgnScrollShadow } from '@ngneers/controls/scroll-shadow';
+import { NgnScrollerItem, NgnScroller } from '@ngneers/controls/scroller';
+import { tableControlTemplate } from '@ngneers/controls-themes/templates/table';
+import { ResizeEngine, getResizeLimitInPx } from '@ngneers/controls/api/resize';
+import { toggleClass, NgnError } from '@ngneers/controls/utils';
+import { setInputSignalValue } from '@ngneers/controls/utils-ng';
+import { executeMultiFilter } from '@ngneers/controls/api';
+import { openMenuAt } from '@ngneers/controls/menu';
+import { NgnActionButton } from '@ngneers/controls/button';
+import { NgnCheckbox } from '@ngneers/controls/checkbox';
+import { NgnFilter } from '@ngneers/controls/filter';
+
+/**
+ * Default minimum column width in pixels for table columns.
+ * Enforced as an absolute floor even when a relative min-size (e.g. `5%`) resolves smaller.
+ */
+const TABLE_MIN_COLUMN_WIDTH_PX = 50;
+/** Splits a CSS grid-template-columns string into individual track values, handling minmax(). */
+const GRID_TRACK_RE = /(?:minmax\([^)]+\)|[^\s]+)/g;
+/**
+ * Owns all column geometry for {@link NgnTable}: effective order, widths (via the wrapped
+ * {@link ResizeEngine}), sticky columns, reorder gestures, auto-sizing, and the composed
+ * `grid-template-columns`. Reads table flags through injected signals; writes only its own
+ * state and the injected `columnOrder` model.
+ */
+class TableColumnLayoutModel {
+    _deps;
+    _registeredHeaderCells = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_registeredHeaderCells" }] : /* istanbul ignore next */ []));
+    _stickyColumns = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_stickyColumns" }] : /* istanbul ignore next */ []));
+    _hasSelectionColumn = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasSelectionColumn" }] : /* istanbul ignore next */ []));
+    _isReordering = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isReordering" }] : /* istanbul ignore next */ []));
+    _reorderSourceColumnId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_reorderSourceColumnId" }] : /* istanbul ignore next */ []));
+    _dropIndicatorState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dropIndicatorState" }] : /* istanbul ignore next */ []));
+    _reorderTargetIndex = -1;
+    _tableElementSize;
+    _resizeEngine;
+    hasSelectionColumn = this._hasSelectionColumn.asReadonly();
+    isReordering = this._isReordering.asReadonly();
+    dropIndicatorState = this._dropIndicatorState.asReadonly();
+    isDragging = () => this._resizeEngine.isDragging();
+    columnCount = computed(() => this._registeredHeaderCells().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnCount" }] : /* istanbul ignore next */ []));
+    /**
+     * Effective column order: merges user-provided `columnOrder` with registered header cells.
+     * If `columnOrder` is empty, falls back to registration order.
+     * Unknown keys are filtered; new columns not in the order are appended.
+     */
+    _effectiveColumnOrder = computed(() => {
+        const cells = this._registeredHeaderCells();
+        const cellIds = cells.map(c => c.ngnTableTh());
+        const userOrder = this._deps.columnOrder();
+        if (!userOrder.length) {
+            return cellIds;
+        }
+        // Filter to valid keys and append any new columns not in the order
+        const validOrder = userOrder.filter(id => cellIds.includes(id));
+        const missing = cellIds.filter(id => !validOrder.includes(id));
+        return [...validOrder, ...missing];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_effectiveColumnOrder" }] : /* istanbul ignore next */ []));
+    stickyStartColumns = computed(() => {
+        const stickyMap = this._stickyColumns();
+        const order = this._effectiveColumnOrder();
+        const contiguous = [];
+        for (const id of order) {
+            if (stickyMap.get(id) === 'start') {
+                contiguous.push(id);
+            }
+            else {
+                break;
+            }
+        }
+        return contiguous;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stickyStartColumns" }] : /* istanbul ignore next */ []));
+    stickyEndColumns = computed(() => {
+        const stickyMap = this._stickyColumns();
+        const order = this._effectiveColumnOrder();
+        const contiguous = [];
+        for (let i = order.length - 1; i >= 0; i--) {
+            if (stickyMap.get(order[i]) === 'end') {
+                contiguous.unshift(order[i]);
+            }
+            else {
+                break;
+            }
+        }
+        return contiguous;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stickyEndColumns" }] : /* istanbul ignore next */ []));
+    /**
+     * Maps column ID → 1-based visual position.
+     */
+    columnOrderMap = computed(() => {
+        const order = this._effectiveColumnOrder();
+        const map = new Map();
+        for (let i = 0; i < order.length; i++) {
+            map.set(order[i], i + 1);
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnOrderMap" }] : /* istanbul ignore next */ []));
+    /**
+     * Grid template columns computed from the resize engine when resizable,
+     * otherwise falls back to the standard equal-width repeat.
+     */
+    gridTemplateColumns;
+    constructor(_deps) {
+        this._deps = _deps;
+        this._tableElementSize = elementSizeSignal(this._deps.element);
+        // Create engine eagerly in constructor (outside reactive context) to avoid NG0602
+        this._resizeEngine = new ResizeEngine({
+            items: computed(() => this._registeredHeaderCells()),
+            containerSize: computed(() => {
+                // Subscribe to the size signal for reactivity, but use clientWidth
+                // to exclude vertical scrollbar width and avoid horizontal overflow.
+                this._tableElementSize();
+                const tableEl = this._deps.element.nativeElement.querySelector('table');
+                const total = tableEl?.clientWidth ?? 0;
+                if (!this._hasSelectionColumn())
+                    return total;
+                // Subtract the selection column width so the resize engine only distributes
+                // the remaining space among data columns.
+                const selCol = this._deps.element.nativeElement.querySelector(`.${this._deps.themeClass('selection-column')}`);
+                return total - (selCol?.getBoundingClientRect().width ?? 0);
+            }),
+            gapSizes: signal([]),
+            distributionMode: computed(() => this._deps.resizeMode()),
+            containerConstrained: computed(() => this._deps.resizeMode() !== 'push'),
+            lockSizes: computed(() => this._deps.lockSizes()),
+            minItemSizePx: TABLE_MIN_COLUMN_WIDTH_PX,
+            resolveItemSizes: () => this._registeredHeaderCells().map(cell => cell.element.nativeElement.getBoundingClientRect().width),
+        });
+        this.gridTemplateColumns = computed(() => {
+            const checkboxCol = this._hasSelectionColumn() ? 'min-content ' : '';
+            if (this._deps.resizable()) {
+                const rawSizes = this._resizeEngine.gridTemplateSizes();
+                // When reorderable, permute grid track sizes to match visual column order
+                if (this._deps.reorderable()) {
+                    return `${checkboxCol}${this._permuteGridSizes(rawSizes)}`;
+                }
+                return `${checkboxCol}${rawSizes}`;
+            }
+            return `${checkboxCol}repeat(${this.columnCount()}, 1fr)`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "gridTemplateColumns" }] : /* istanbul ignore next */ []));
+        afterRenderEffect(() => {
+            const startCols = this.stickyStartColumns();
+            const endCols = this.stickyEndColumns();
+            if (startCols.length === 0 && endCols.length === 0)
+                return;
+            if (this._resizeEngine.isDragging())
+                return;
+            this._tableElementSize();
+            const tableEl = this._deps.element.nativeElement.querySelector(':scope > table');
+            if (!tableEl)
+                return;
+            const cells = this._registeredHeaderCells();
+            let selectionWidth = 0;
+            if (this._hasSelectionColumn()) {
+                const selCol = tableEl.querySelector(`.${this._deps.themeClass('selection-column')}`);
+                selectionWidth = selCol?.getBoundingClientRect().width ?? 0;
+            }
+            let cumulativeLeft = selectionWidth;
+            for (let i = 0; i < startCols.length; i++) {
+                tableEl.style.setProperty(`--ngn-sticky-start-offset-${i}`, `${cumulativeLeft}px`);
+                const cell = cells.find(c => c.ngnTableTh() === startCols[i]);
+                cumulativeLeft += cell?.element.nativeElement.getBoundingClientRect().width ?? 0;
+            }
+            let cumulativeRight = 0;
+            for (let i = endCols.length - 1; i >= 0; i--) {
+                tableEl.style.setProperty(`--ngn-sticky-end-offset-${i}`, `${cumulativeRight}px`);
+                const cell = cells.find(c => c.ngnTableTh() === endCols[i]);
+                cumulativeRight += cell?.element.nativeElement.getBoundingClientRect().width ?? 0;
+            }
+        });
+    }
+    /**
+     * Returns the 1-based visual column index for a given 0-based logical (DOM) index.
+     */
+    getVisualColumnIndex(logicalIndex) {
+        const cells = this._registeredHeaderCells();
+        const cell = cells[logicalIndex];
+        if (!cell)
+            return logicalIndex + 1;
+        return this.columnOrderMap().get(cell.ngnTableTh()) ?? logicalIndex + 1;
+    }
+    registerSelectionColumn() {
+        this._hasSelectionColumn.set(true);
+    }
+    unregisterSelectionColumn() {
+        this._hasSelectionColumn.set(false);
+    }
+    registerHeaderCell(cell) {
+        this._registeredHeaderCells.update(cells => [...cells, cell]);
+    }
+    unregisterHeaderCell(cell) {
+        this._registeredHeaderCells.update(cells => cells.filter(c => c !== cell));
+    }
+    getRegisteredHeaderCells() {
+        return this._registeredHeaderCells();
+    }
+    registerStickyColumn(columnId, side) {
+        this._stickyColumns.update(map => {
+            const next = new Map(map);
+            next.set(columnId, side);
+            return next;
+        });
+    }
+    unregisterStickyColumn(columnId) {
+        this._stickyColumns.update(map => {
+            const next = new Map(map);
+            next.delete(columnId);
+            return next;
+        });
+    }
+    getStickyInfo(columnId) {
+        const startCols = this.stickyStartColumns();
+        const endCols = this.stickyEndColumns();
+        const startIndex = startCols.indexOf(columnId);
+        if (startIndex >= 0) {
+            return { side: 'start', index: startIndex, isEdge: startIndex === startCols.length - 1 };
+        }
+        const endIndex = endCols.indexOf(columnId);
+        if (endIndex >= 0) {
+            return { side: 'end', index: endIndex, isEdge: endIndex === 0 };
+        }
+        return null;
+    }
+    // --- Resize operations (called by NgnTableTh) ---
+    startColumnResize(columnIndex, event) {
+        if (!this._deps.resizable())
+            return;
+        this._resizeEngine.startDrag(columnIndex, event.clientX);
+    }
+    dragColumnResize(columnIndex, event) {
+        if (!this._deps.resizable())
+            return;
+        this._resizeEngine.drag(columnIndex, event.clientX);
+    }
+    endColumnResize(columnIndex, cancel) {
+        if (!this._deps.resizable())
+            return;
+        this._resizeEngine.endDrag(columnIndex, cancel);
+    }
+    // --- Reorder operations (called by NgnTableReorderableColumn) ---
+    getReorderBounds(columnId) {
+        const order = this._effectiveColumnOrder();
+        const startCols = this.stickyStartColumns();
+        const endCols = this.stickyEndColumns();
+        const side = this._stickyColumns().get(columnId);
+        if (side === 'start') {
+            return { min: 0, max: startCols.length };
+        }
+        else if (side === 'end') {
+            return { min: order.length - endCols.length, max: order.length };
+        }
+        else {
+            return { min: startCols.length, max: order.length - endCols.length };
+        }
+    }
+    startColumnReorder(columnId) {
+        if (!this._deps.reorderable())
+            return;
+        this._isReordering.set(true);
+        this._reorderSourceColumnId.set(columnId);
+        this._reorderTargetIndex = -1;
+    }
+    dragColumnReorder(event) {
+        if (!this._deps.reorderable() || !this._isReordering())
+            return;
+        const cells = this._registeredHeaderCells();
+        const effectiveOrder = this._effectiveColumnOrder();
+        const sourceId = this._reorderSourceColumnId();
+        if (!sourceId)
+            return;
+        // Find drop target by comparing cursor X to header cell midpoints (in visual order)
+        const cursorX = event.clientX;
+        let targetIndex = effectiveOrder.length;
+        // Build visual-order cells with their bounding boxes
+        const visualCells = effectiveOrder
+            .map(id => cells.find(c => c.ngnTableTh() === id))
+            .filter((c) => !!c);
+        for (let i = 0; i < visualCells.length; i++) {
+            const rect = visualCells[i].element.nativeElement.getBoundingClientRect();
+            const midX = rect.left + rect.width / 2;
+            if (cursorX < midX) {
+                targetIndex = i;
+                break;
+            }
+        }
+        const bounds = this.getReorderBounds(sourceId);
+        targetIndex = Math.max(bounds.min, Math.min(bounds.max, targetIndex));
+        this._reorderTargetIndex = targetIndex;
+        // Compute indicator position relative to the table element
+        const tableEl = this._deps.element.nativeElement.querySelector(':scope > table');
+        if (!tableEl)
+            return;
+        const tableRect = tableEl.getBoundingClientRect();
+        // Use the first header cell's height for the indicator
+        const firstCellRect = visualCells[0]?.element.nativeElement.getBoundingClientRect();
+        const indicatorHeight = firstCellRect?.height ?? 40;
+        let indicatorLeftPx;
+        if (targetIndex === 0) {
+            const firstCell = visualCells[0];
+            if (!firstCell)
+                return;
+            const rect = firstCell.element.nativeElement.getBoundingClientRect();
+            indicatorLeftPx = rect.left - tableRect.left;
+        }
+        else if (targetIndex >= visualCells.length) {
+            const lastCell = visualCells[visualCells.length - 1];
+            if (!lastCell)
+                return;
+            const rect = lastCell.element.nativeElement.getBoundingClientRect();
+            indicatorLeftPx = rect.right - tableRect.left;
+        }
+        else {
+            const prevCell = visualCells[targetIndex - 1];
+            const nextCell = visualCells[targetIndex];
+            const prevRect = prevCell.element.nativeElement.getBoundingClientRect();
+            const nextRect = nextCell.element.nativeElement.getBoundingClientRect();
+            indicatorLeftPx = (prevRect.right + nextRect.left) / 2 - tableRect.left;
+        }
+        // Clamp so the 3px-wide indicator stays within the visible content area
+        // (use clientWidth to exclude scrollbar width from the boundary)
+        const maxLeft = tableEl.clientWidth - 3;
+        indicatorLeftPx = Math.max(0, Math.min(indicatorLeftPx, maxLeft));
+        this._dropIndicatorState.set({
+            leftPx: indicatorLeftPx,
+            topPx: tableEl.scrollTop,
+            heightPx: indicatorHeight,
+        });
+    }
+    endColumnReorder(cancel) {
+        if (!this._deps.reorderable())
+            return;
+        if (!cancel && this._reorderTargetIndex >= 0) {
+            const sourceId = this._reorderSourceColumnId();
+            if (sourceId) {
+                const effectiveOrder = [...this._effectiveColumnOrder()];
+                const sourceIndex = effectiveOrder.indexOf(sourceId);
+                if (sourceIndex >= 0) {
+                    // Remove source from its current position
+                    effectiveOrder.splice(sourceIndex, 1);
+                    // Adjust target index if source was before target
+                    let insertAt = this._reorderTargetIndex;
+                    if (sourceIndex < this._reorderTargetIndex) {
+                        insertAt--;
+                    }
+                    // Insert at new position
+                    effectiveOrder.splice(insertAt, 0, sourceId);
+                    this._deps.columnOrder.set(effectiveOrder);
+                }
+            }
+        }
+        this._isReordering.set(false);
+        this._reorderSourceColumnId.set(null);
+        this._dropIndicatorState.set(null);
+        this._reorderTargetIndex = -1;
+    }
+    getReorderSourceColumnId() {
+        return this._reorderSourceColumnId();
+    }
+    /**
+     * Permutes grid template sizes from logical (registration) order to visual (column order) order.
+     */
+    _permuteGridSizes(rawSizes) {
+        const tracks = rawSizes.match(GRID_TRACK_RE) ?? [];
+        const cells = this._registeredHeaderCells();
+        const effectiveOrder = this._effectiveColumnOrder();
+        if (tracks.length !== cells.length) {
+            return rawSizes; // Mismatch — don't permute
+        }
+        // Build map: column ID → track size (logical order)
+        const sizeByColumnId = new Map();
+        for (let i = 0; i < cells.length; i++) {
+            sizeByColumnId.set(cells[i].ngnTableTh(), tracks[i]);
+        }
+        // Emit sizes in visual order
+        return effectiveOrder.map(id => sizeByColumnId.get(id) ?? '1fr').join(' ');
+    }
+    /**
+     * Auto-sizes the column at `columnIndex` to fit its visible content.
+     * Uses `Canvas.measureText()` for fast, reflow-free text measurement since
+     * grid-constrained cells (`min-width: 0`) don't report natural content width
+     * via `scrollWidth`.
+     */
+    autoSizeColumn(columnIndex) {
+        if (!this._deps.resizable())
+            return;
+        const cells = this._registeredHeaderCells();
+        const headerCell = cells[columnIndex];
+        if (!headerCell)
+            return;
+        const tableEl = this._deps.element.nativeElement.querySelector('table');
+        if (!tableEl)
+            return;
+        const headerEl = headerCell.element.nativeElement;
+        const ctx = autoSizeCanvasCtx();
+        // Measure header: text width + non-text siblings (icons, controls) + flex gap.
+        // The header cell is a flex container with: cell-text, spacer, filter/sort icons, resize handle.
+        const cellTextClass = this._deps.themeClass('cell-text');
+        const headerTextEl = headerEl.querySelector(`.${cellTextClass}`);
+        let headerRequiredWidth = 0;
+        if (headerTextEl) {
+            ctx.font = getCssFont(headerEl);
+            const text = headerTextEl.textContent ?? '';
+            headerRequiredWidth = Math.ceil(ctx.measureText(text).width);
+        }
+        // Add width of visible non-text siblings (filter icon, sort icon, etc.)
+        const headerStyle = getComputedStyle(headerEl);
+        const headerGap = parseFloat(headerStyle.gap) || 0;
+        let visibleSiblingCount = 0;
+        for (let i = 0; i < headerEl.children.length; i++) {
+            const child = headerEl.children[i];
+            if (child === headerTextEl)
+                continue;
+            // Skip spacer (zero intrinsic width) and hidden resize handle
+            if (child.offsetWidth > 0 && getComputedStyle(child).flexGrow === '0') {
+                headerRequiredWidth += child.offsetWidth;
+                visibleSiblingCount++;
+            }
+        }
+        // Add flex gaps between visible items
+        if (visibleSiblingCount > 0) {
+            headerRequiredWidth += headerGap * visibleSiblingCount;
+        }
+        let maxContentWidth = headerRequiredWidth;
+        // Measure visible body cells (nth-child is 1-indexed, offset by selection column)
+        const selectionOffset = this._hasSelectionColumn() ? 1 : 0;
+        const bodyCells = Array.from(tableEl.querySelectorAll(`tbody tr td:nth-child(${columnIndex + selectionOffset + 1})`));
+        if (bodyCells.length > 0) {
+            ctx.font = getCssFont(bodyCells[0]);
+            for (let i = 0; i < bodyCells.length; i++) {
+                const text = bodyCells[i].textContent ?? '';
+                maxContentWidth = Math.max(maxContentWidth, Math.ceil(ctx.measureText(text).width));
+            }
+        }
+        // Add cell horizontal padding
+        const paddingLeft = parseFloat(headerStyle.paddingLeft) || 0;
+        const paddingRight = parseFloat(headerStyle.paddingRight) || 0;
+        const totalWidth = maxContentWidth + paddingLeft + paddingRight;
+        // Clamp to min/max constraints
+        const containerSize = this._tableElementSize().width;
+        const minPx = Math.max(TABLE_MIN_COLUMN_WIDTH_PX, getResizeLimitInPx(headerCell.minSize(), containerSize));
+        const maxPx = getResizeLimitInPx(headerCell.maxSize(), containerSize);
+        const clampedWidth = Math.max(minPx, Math.min(maxPx, totalWidth));
+        this._resizeEngine.setItemSize(headerCell, `${clampedWidth}px`);
+        this._resizeEngine.hasBeenResized.set(true);
+    }
+}
+// --- Auto-size helpers ---
+/** Lazily created canvas context for text measurement (no DOM reflows). */
+let _autoSizeCtx = null;
+function autoSizeCanvasCtx() {
+    if (!_autoSizeCtx) {
+        _autoSizeCtx = document.createElement('canvas').getContext('2d');
+    }
+    return _autoSizeCtx;
+}
+/** Builds the CSS font shorthand from an element's computed style. */
+function getCssFont(el) {
+    const s = getComputedStyle(el);
+    return `${s.fontStyle} ${s.fontWeight} ${s.fontSize} ${s.fontFamily}`;
+}
+
+class NgnTableGroupHeaderTr extends NgnScrollerItem {
+    /** The group-header row this `<tr>` renders. */
+    ngnTableGroupHeaderTr = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ngnTableGroupHeaderTr" }] : /* istanbul ignore next */ []));
+    /** The item bound to the underlying scroller entry; kept in sync with {@link ngnTableGroupHeaderTr}. */
+    ngnScrollerItem = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ngnScrollerItem" }] : /* istanbul ignore next */ []));
+    _element = inject((ElementRef));
+    theme = injectThemeTemplate(tableControlTemplate);
+    constructor() {
+        super();
+        effect(() => {
+            const row = this.ngnTableGroupHeaderTr();
+            setInputSignalValue(this.ngnScrollerItem, row);
+        });
+        this.prepareDom();
+    }
+    prepareDom() {
+        toggleClass(this._element.nativeElement, this.theme.class('row'), true);
+        toggleClass(this._element.nativeElement, this.theme.class('group-header-row'), true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableGroupHeaderTr, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: NgnTableGroupHeaderTr, isStandalone: true, selector: "[ngnTableGroupHeaderTr]", inputs: { ngnTableGroupHeaderTr: { classPropertyName: "ngnTableGroupHeaderTr", publicName: "ngnTableGroupHeaderTr", isSignal: true, isRequired: true, transformFunction: null }, ngnScrollerItem: { classPropertyName: "ngnScrollerItem", publicName: "ngnScrollerItem", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-rowindex": "ngnTableGroupHeaderTr().index + 2", "style.--ngn-table-row-index": "ngnTableGroupHeaderTr().index + 2" } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableGroupHeaderTr, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngnTableGroupHeaderTr]',
+                    host: {
+                        '[attr.aria-rowindex]': 'ngnTableGroupHeaderTr().index + 2',
+                        '[style.--ngn-table-row-index]': 'ngnTableGroupHeaderTr().index + 2',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { ngnTableGroupHeaderTr: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTableGroupHeaderTr", required: true }] }], ngnScrollerItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnScrollerItem", required: false }] }] } });
+
+/** Applies the active multi-column filter set. Returns the input untouched when no filters are set. */
+function filterRows(rows, filters) {
+    if (!filters) {
+        return rows;
+    }
+    return executeMultiFilter(rows, filters);
+}
+/**
+ * Default comparator: nulls sort first on `asc` / last on `desc`; numbers compare
+ * numerically; everything else compares via `localeCompare` on the stringified value.
+ */
+function defaultSortComparator(a, b, sort) {
+    const { column, direction } = sort;
+    // Mirrors the existing index access in groupRows / the original inline comparator.
+    const aValue = a[column];
+    const bValue = b[column];
+    if (aValue == null && bValue != null) {
+        return direction === 'asc' ? -1 : 1;
+    }
+    if (aValue != null && bValue == null) {
+        return direction === 'asc' ? 1 : -1;
+    }
+    if (aValue == null && bValue == null) {
+        return 0;
+    }
+    return typeof aValue === 'number' && typeof bValue === 'number'
+        ? direction === 'asc'
+            ? aValue - bValue
+            : bValue - aValue
+        : direction === 'asc'
+            ? String(aValue).localeCompare(String(bValue))
+            : String(bValue).localeCompare(String(aValue));
+}
+/** Sorts rows without mutating the input. Returns the input untouched when no sort is set. */
+function sortRows(rows, sort, comparator = defaultSortComparator) {
+    if (!sort) {
+        return rows;
+    }
+    return rows.toSorted((a, b) => comparator(a, b, sort));
+}
+/**
+ * Builds a flat row list with group headers interleaved, preserving the incoming
+ * (already filtered + sorted) order. Data rows appear only under expanded groups.
+ */
+function groupRows(rows, groupBy, fieldId, expanded) {
+    const groupMap = new Map();
+    for (const row of rows) {
+        const key = row[groupBy];
+        let group = groupMap.get(key);
+        if (!group) {
+            group = [];
+            groupMap.set(key, group);
+        }
+        group.push(row);
+    }
+    const result = [];
+    let index = 0;
+    for (const [groupKey, members] of groupMap) {
+        const isExpanded = expanded.has(groupKey);
+        result.push({
+            kind: 'group-header',
+            id: `group-${String(groupKey)}`,
+            groupKey,
+            groupValue: groupKey,
+            count: members.length,
+            expanded: isExpanded,
+            index: index++,
+        });
+        if (isExpanded) {
+            for (const data of members) {
+                result.push({
+                    kind: 'data',
+                    id: data[fieldId],
+                    data,
+                    index: index++,
+                });
+            }
+        }
+    }
+    return result;
+}
+/** Slices a formatted row list to the current page. Returns `[]` when there is no page state. */
+function paginateRows(rows, pageState) {
+    if (!pageState) {
+        return [];
+    }
+    return rows.slice(pageState.slice.skip, pageState.slice.take + pageState.slice.skip);
+}
+
+/**
+ * Roving keyboard model for row actions, reconciled onto the table's single
+ * current-row index ({@link RowNavigationDeps.focusedRowIndex}). The single
+ * tab stop lives on the table host; ArrowRight enters the action bar and
+ * ArrowLeft/Right move between actions, ArrowLeft off the first action
+ * returns to row navigation. ContextMenu and Shift+F10 always open the
+ * context menu on the current row, regardless of selection mode.
+ *
+ * When {@link RowNavigationDeps.selectionMode} is set and focus is not in
+ * the action bar, this model deliberately does **not** handle
+ * ArrowUp/Down/Enter/Space itself — it returns `false` so the table's own
+ * `onKeyDown` falls through to
+ * {@link import('./table-selection-model').TableSelectionModel#onKeyDown},
+ * which already resolves the start row correctly (including the
+ * null-`focusedRowIndex` → currently-selected-row fallback after a mouse
+ * click). Recomputing that start index here would silently diverge from the
+ * selection model's resolution — that's exactly the bug this delegation
+ * avoids. When `selectionMode` is `null`, this model owns ArrowUp/Down
+ * itself (moves `focusedRowIndex`) and Enter opens the context menu. Only
+ * claims keys when at least one row has registered actions (see
+ * {@link RowNavigationDeps.hasActions}), so tables without row actions keep
+ * selection's keyboard behavior untouched.
+ */
+class TableRowNavigationModel {
+    _deps;
+    /** Whether DOM focus is currently inside the current row's action bar (as opposed to on the row itself). */
+    inActions = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inActions" }] : /* istanbul ignore next */ []));
+    constructor(_deps) {
+        this._deps = _deps;
+    }
+    /** Returns true when the event was handled (caller should stop propagation to other handlers). */
+    onKeyDown(event) {
+        if (!this._deps.hasActions())
+            return false;
+        const rows = this._deps.viewRows();
+        if (rows.length === 0)
+            return false;
+        const current = this._deps.focusedRowIndex();
+        const mode = this._deps.selectionMode();
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                return this._moveRow(event, rows.length, current, mode);
+            case 'ArrowRight':
+                return this._moveRight(event, current);
+            case 'ArrowLeft':
+                return this._moveLeft(event, current);
+            case 'Enter':
+            case ' ':
+                return this._activate(event, current, mode);
+            case 'ContextMenu':
+                return this._openMenu(event, current);
+            case 'F10':
+                return event.shiftKey ? this._openMenu(event, current) : false;
+            case 'Escape':
+                // Back out of the action bar to the row (standard roving-toolbar exit),
+                // mirroring ArrowLeft off the first action.
+                if (!this.inActions())
+                    return false;
+                this.inActions.set(false);
+                this._deps.focusHost();
+                event.preventDefault();
+                return true;
+            default:
+                return false;
+        }
+    }
+    _moveRow(event, rowCount, current, mode) {
+        // While focus is inside the action bar, ArrowUp/Down must not move the
+        // current row (and must not fall through to selection) — swallow them.
+        if (this.inActions()) {
+            event.preventDefault();
+            return true;
+        }
+        if (mode) {
+            // Delegate entirely to TableSelectionModel.onKeyDown — it already
+            // resolves the start index (including the null-focus → selected-row
+            // fallback) and applies the move/select/scroll side-effects. Returning
+            // `false` here lets the table's onKeyDown fall through to it, so the
+            // combined single/multi-select + actions behavior stays byte-identical
+            // to the no-actions case.
+            return false;
+        }
+        const start = current ?? -1;
+        const next = event.key === 'ArrowDown' ? Math.min(start + 1, rowCount - 1) : Math.max(start - 1, 0);
+        this._deps.focusedRowIndex.set(next);
+        this._deps.scrollToIndex(next);
+        event.preventDefault();
+        return true;
+    }
+    _moveRight(event, current) {
+        if (current === null)
+            return false;
+        if (this.inActions()) {
+            this._deps.moveAction(current, 1);
+            event.preventDefault();
+            return true;
+        }
+        if (!this._deps.enterActions(current))
+            return false;
+        this.inActions.set(true);
+        event.preventDefault();
+        return true;
+    }
+    _moveLeft(event, current) {
+        if (current === null || !this.inActions())
+            return false;
+        const stayed = this._deps.moveAction(current, -1);
+        if (!stayed) {
+            this.inActions.set(false); // fell off the first action → back to row navigation
+            this._deps.focusHost();
+        }
+        event.preventDefault();
+        return true;
+    }
+    _activate(event, current, mode) {
+        // Let the focused native <button> handle Enter/Space itself — do not
+        // preventDefault, do not open the menu.
+        if (this.inActions())
+            return false;
+        // Delegate entirely to TableSelectionModel.onKeyDown when selection is
+        // active — same rationale as the ArrowUp/Down case in `_moveRow`: it
+        // reads the same `focusedRowIndex`, but keeping a single handler avoids
+        // this model silently drifting from the selection model's semantics.
+        if (mode)
+            return false;
+        if (current === null)
+            return false;
+        if (event.key !== 'Enter')
+            return false; // Space is a no-op without selection
+        return this._openMenu(event, current);
+    }
+    _openMenu(event, current) {
+        if (current === null || this.inActions())
+            return false;
+        if (!this._deps.openMenu(current))
+            return false;
+        event.preventDefault();
+        return true;
+    }
+}
+
+/**
+ * Owns row selection, the selection anchor, keyboard navigation, and the derived
+ * select-all / indeterminate state for {@link NgnTable}. Reads the view rows through an
+ * injected signal and writes only the selection + focus state passed in.
+ */
+class TableSelectionModel {
+    _deps;
+    constructor(_deps) {
+        this._deps = _deps;
+    }
+    /** Anchor index for Shift+click range selection (index in viewRows). */
+    _selectionAnchor = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_selectionAnchor" }] : /* istanbul ignore next */ []));
+    selectionSet = computed(() => new Set(this._deps.selection()), { ...(ngDevMode ? { debugName: "selectionSet" } : /* istanbul ignore next */ {}), equal: (a, b) => a.size === b.size && [...a].every(v => b.has(v)) });
+    isAllSelected = computed(() => {
+        const rows = this._deps.viewRows();
+        const selSet = this.selectionSet();
+        return rows.length > 0 && rows.every(row => selSet.has(row.id));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAllSelected" }] : /* istanbul ignore next */ []));
+    isIndeterminate = computed(() => {
+        const selSet = this.selectionSet();
+        return selSet.size > 0 && !this.isAllSelected();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : /* istanbul ignore next */ []));
+    headerCheckboxValue = computed(() => {
+        if (this.isAllSelected())
+            return true;
+        if (this.isIndeterminate())
+            return null;
+        return false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerCheckboxValue" }] : /* istanbul ignore next */ []));
+    isRowSelected(id) {
+        return this.selectionSet().has(id);
+    }
+    handleRowClick(row, event) {
+        const mode = this._deps.selectionMode();
+        if (!mode)
+            return;
+        const id = row.id;
+        const rowIndex = this._deps.viewRows().findIndex(r => r.id === row.id);
+        if (mode === 'single') {
+            this._deps.selection.set([id]);
+            this._selectionAnchor.set(rowIndex);
+            this._deps.focusedRowIndex.set(null);
+            return;
+        }
+        if (event.shiftKey && this._selectionAnchor() !== null) {
+            this._selectRange(this._selectionAnchor(), rowIndex);
+        }
+        else if (event.ctrlKey || event.metaKey) {
+            this._toggleRowInSelection(id);
+        }
+        else {
+            this._toggleRowInSelection(id);
+        }
+        this._selectionAnchor.set(rowIndex);
+        this._deps.focusedRowIndex.set(null);
+    }
+    handleCheckboxChange(row) {
+        const id = row.id;
+        this._toggleRowInSelection(id);
+        const rowIndex = this._deps.viewRows().findIndex(r => r.id === row.id);
+        this._selectionAnchor.set(rowIndex);
+        this._deps.focusedRowIndex.set(null);
+    }
+    toggleSelectAll() {
+        if (this.isAllSelected()) {
+            this._deps.selection.set([]);
+        }
+        else {
+            const dataRows = this._deps
+                .viewRows()
+                .filter((r) => r.kind === 'data');
+            this._deps.selection.set(dataRows.map(r => r.id));
+        }
+    }
+    _toggleRowInSelection(id) {
+        const current = this._deps.selection();
+        if (this.selectionSet().has(id)) {
+            this._deps.selection.set(current.filter(v => v !== id));
+        }
+        else {
+            this._deps.selection.set([...current, id]);
+        }
+    }
+    _selectRange(fromIndex, toIndex) {
+        const rows = this._deps.viewRows();
+        const start = Math.min(fromIndex, toIndex);
+        const end = Math.max(fromIndex, toIndex);
+        const rangeIds = rows
+            .slice(start, end + 1)
+            .filter((r) => r.kind === 'data')
+            .map(r => r.id);
+        const currentSet = new Set(this._deps.selection());
+        for (const id of rangeIds) {
+            currentSet.add(id);
+        }
+        this._deps.selection.set([...currentSet]);
+    }
+    onKeyDown(event) {
+        const mode = this._deps.selectionMode();
+        if (!mode)
+            return;
+        const rows = this._deps.viewRows();
+        if (rows.length === 0)
+            return;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            event.stopPropagation();
+            let currentIndex = this._deps.focusedRowIndex();
+            if (currentIndex === null && mode === 'single') {
+                const sel = this._deps.selection();
+                if (sel.length > 0) {
+                    currentIndex = rows.findIndex(r => r.id === sel[0]);
+                }
+            }
+            currentIndex ??= -1;
+            const nextIndex = event.key === 'ArrowDown'
+                ? Math.min(currentIndex + 1, rows.length - 1)
+                : Math.max(currentIndex - 1, 0);
+            this._deps.focusedRowIndex.set(nextIndex);
+            this._deps.scrollToIndex(nextIndex);
+            this.applyArrowMove(nextIndex, event.shiftKey);
+        }
+        else if (event.key === ' ' || event.key === 'Enter') {
+            if (mode === 'multi') {
+                const focusIdx = this._deps.focusedRowIndex();
+                if (focusIdx !== null && rows[focusIdx]) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.toggleCurrentRow(focusIdx);
+                }
+            }
+        }
+    }
+    /**
+     * Applies the selection side-effects of an arrow-key move that already set
+     * `focusedRowIndex` to `nextIndex` — single mode selects the row and resets
+     * the anchor, multi mode with `shiftKey` extends the range from the anchor,
+     * multi mode alone only moves focus (a no-op here). No-ops when
+     * {@link TableSelectionModelDeps.selectionMode} is `null`. Only called from
+     * {@link onKeyDown} — {@link TableRowNavigationModel} deliberately does not
+     * recompute or replicate this (it would risk diverging from this model's
+     * null-`focusedRowIndex` start-index resolution), and instead defers
+     * ArrowUp/Down entirely to {@link onKeyDown} when a row-actions table also
+     * has a `selectionMode`.
+     */
+    applyArrowMove(nextIndex, shiftKey) {
+        const mode = this._deps.selectionMode();
+        if (!mode)
+            return;
+        const rows = this._deps.viewRows();
+        const row = rows[nextIndex];
+        if (!row)
+            return;
+        if (mode === 'single') {
+            this._deps.selection.set([row.id]);
+            this._selectionAnchor.set(nextIndex);
+        }
+        else if (shiftKey) {
+            const anchor = this._selectionAnchor() ?? nextIndex;
+            this._selectRange(anchor, nextIndex);
+        }
+    }
+    /**
+     * Toggles selection of the row at `index` and sets it as the new anchor —
+     * the multi-mode Enter/Space behavior. Only called from {@link onKeyDown};
+     * {@link TableRowNavigationModel} defers Enter/Space to it for the same
+     * reason as {@link applyArrowMove}.
+     */
+    toggleCurrentRow(index) {
+        const rows = this._deps.viewRows();
+        const row = rows[index];
+        if (!row)
+            return;
+        this._toggleRowInSelection(row.id);
+        this._selectionAnchor.set(index);
+    }
+}
+
+class NgnTableTemplates extends NgnBase {
+    _headerTemplate = contentChild('header', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_headerTemplate" }] : /* istanbul ignore next */ []));
+    _bodyTemplate = contentChild('body', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_bodyTemplate" }] : /* istanbul ignore next */ []));
+    _groupHeaderTemplate = contentChild('groupHeader', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_groupHeaderTemplate" }] : /* istanbul ignore next */ []));
+    headerTemplate = this._headerTemplate;
+    bodyTemplate = this._bodyTemplate;
+    groupHeaderTemplate = this._groupHeaderTemplate;
+    /**
+     * Types for the table templates.
+     */
+    templateTypes = templateTypesFn();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableTemplates, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: NgnTableTemplates, isStandalone: true, selector: "ng-component", queries: [{ propertyName: "_headerTemplate", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "_bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "_groupHeaderTemplate", first: true, predicate: ["groupHeader"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableTemplates, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                }]
+        }], propDecorators: { _headerTemplate: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], _bodyTemplate: [{ type: i0.ContentChild, args: ['body', { isSignal: true }] }], _groupHeaderTemplate: [{ type: i0.ContentChild, args: ['groupHeader', { isSignal: true }] }] } });
+
+/**
+ * @category control
+ */
+class NgnTable extends NgnTableTemplates {
+    theme = this.injectThemeTemplate(tableControlTemplate, {
+        root: true,
+        virtual: () => this.virtual(),
+        resizing: () => this._columns?.isDragging() ?? false,
+        selectable: () => !!this.selectionMode(),
+        reorderable: () => this.reorderable(),
+        reordering: () => this._columns?.isReordering() ?? false,
+    });
+    _scroller = viewChild.required(NgnScroller);
+    /** The data rows to render. */
+    rows = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    /**
+     * When {@link virtual} is enabled, this defines the height of each row in pixels.
+     */
+    rowHeight = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "rowHeight" }] : /* istanbul ignore next */ []));
+    /** The key of the property that uniquely identifies each row. */
+    fieldId = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldId" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the table is virtualized. When enabled, provide {@link rowHeight}.
+     * @default false
+     */
+    virtual = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtual" }] : /* istanbul ignore next */ []));
+    /**
+     * When {@link virtual} is enabled, the number of extra rows to render above and below the viewport.
+     * @default 2
+     */
+    virtualPadding = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualPadding" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to apply alternating background colors to rows.
+     * @default false
+     */
+    striped = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "striped" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to render a paginator and page the rows.
+     * @default false
+     */
+    paginator = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paginator" }] : /* istanbul ignore next */ []));
+    /**
+     * The selection mode for the table.
+     * - `'single'`: Only one row can be selected at a time.
+     * - `'multi'`: Multiple rows can be selected (with Ctrl/Shift click or checkboxes).
+     * - `null`: Selection is disabled.
+     * @default null
+     */
+    selectionMode = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    /**
+     * The selected row IDs. Two-way bindable via `[(selection)]`.
+     * @default []
+     */
+    selection = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    /**
+     * Column key to group rows by. Rows with the same value in this column
+     * are collected under a collapsible group header.
+     * @default null (no grouping)
+     */
+    groupBy = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupBy" }] : /* istanbul ignore next */ []));
+    /**
+     * Two-way model tracking which groups are currently expanded, identified
+     * by their column value. Defaults to `[]` (all collapsed).
+     * Pass all group values to start with all groups expanded.
+     *
+     * Type-safe: when `groupBy` is set, this is typed as `T[G][]` where G
+     * is the groupBy column key (inferred by Angular's template type checker).
+     */
+    expandedGroups = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandedGroups" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether column resizing is enabled.
+     * @default false
+     */
+    resizable = input(false, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The resize distribution mode.
+     * - `'adjacent'`: Only columns adjacent to the resize handle change. Total width stays the same.
+     * - `'push'`: Column grows/shrinks independently, total width changes (enables horizontal scrolling).
+     * @default 'adjacent'
+     */
+    resizeMode = input('adjacent', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizeMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to lock affected columns to fixed `px` values after a resize completes.
+     *
+     * - **`proportional` mode**: when `true`, the resized column stays as `px` (locked);
+     *   when `false`, it is converted back to `fr` and continues to flex with the container.
+     * - **`adjacent` / `push` modes**: when `true`, columns whose size changed are converted
+     *   to `px`; when `false`, columns keep their original units.
+     *
+     * @default false
+     */
+    lockSizes = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lockSizes" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether column reordering is enabled.
+     * @default false
+     */
+    reorderable = input(false, { ...(ngDevMode ? { debugName: "reorderable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The current column order as an array of column identifiers.
+     * When empty, the natural registration order (DOM order) is used.
+     * Supports two-way binding for persistence.
+     */
+    columnOrder = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnOrder" }] : /* istanbul ignore next */ []));
+    trackById = (item) => item[this.fieldId()];
+    /**
+     * The active sort descriptor (column + direction), or `null` when unsorted. Two-way bindable.
+     * @default null
+     */
+    sort = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional custom comparator used when `sort` is active. Receives the two rows and the
+     * active sort descriptor. When omitted, a default comparator is used (nulls-first on asc,
+     * numeric for numbers, `localeCompare` otherwise).
+     */
+    sortComparator = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortComparator" }] : /* istanbul ignore next */ []));
+    /**
+     * The active per-column filter configuration, keyed by column, or `null` when unfiltered. Two-way bindable.
+     * @default null
+     */
+    filters = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
+    pageState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageState" }] : /* istanbul ignore next */ []));
+    i18n = inject(I18n).translations;
+    /**
+     * Polite live-region text announcing sort / filter / pagination / selection
+     * changes to assistive tech. Populated by an effect in the constructor.
+     */
+    liveAnnouncement = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "liveAnnouncement" }] : /* istanbul ignore next */ []));
+    // --- Column layout (geometry, sticky, resize, reorder, auto-size) ---
+    _columns = new TableColumnLayoutModel({
+        element: this.element,
+        resizable: this.resizable,
+        reorderable: this.reorderable,
+        resizeMode: this.resizeMode,
+        lockSizes: this.lockSizes,
+        columnOrder: this.columnOrder,
+        themeClass: name => this.theme.class(name),
+    });
+    /**
+     * Whether a selection column directive is present in the template.
+     * Set automatically by `NgnTableSelectionColumn` — do not set manually.
+     */
+    showCheckboxes = this._columns.hasSelectionColumn;
+    dropIndicatorState = this._columns.dropIndicatorState;
+    columnOrderMap = computed(() => this._columns.columnOrderMap(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnOrderMap" }] : /* istanbul ignore next */ []));
+    /**
+     * Grid template columns computed from the resize engine when resizable,
+     * otherwise falls back to the standard equal-width repeat.
+     */
+    get gridTemplateColumns() {
+        return this._columns.gridTemplateColumns;
+    }
+    // --- Selection state ---
+    /**
+     * The single current-row index (index in {@link formattedRows}) for
+     * keyboard navigation. Shared by {@link NgnTable}'s selection keyboard
+     * handling and row-actions keyboard navigation — arrows move it, and (when
+     * {@link selectionMode} is set) selection follows it. Cleared whenever
+     * {@link formattedRows} changes identity (sort/filter/rows replaced) so it
+     * never points at a stale row.
+     */
+    focusedRowIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedRowIndex" }] : /* istanbul ignore next */ []));
+    _selection;
+    headerCheckboxValue;
+    // --- Row actions registry + keyboard navigation ---
+    _rowActions = new Map();
+    _rowNav;
+    /**
+     * Total column count including the selection checkbox column.
+     */
+    totalColumnCount = computed(() => this._columns.columnCount() + (this._columns.hasSelectionColumn() ? 1 : 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalColumnCount" }] : /* istanbul ignore next */ []));
+    formattedRows = computed(() => {
+        const groupBy = this.groupBy();
+        if (groupBy) {
+            return this._groupedRows();
+        }
+        const rows = this._sortedRows();
+        return rows.map((data, index) => ({
+            kind: 'data',
+            id: data[this.fieldId()],
+            data,
+            index,
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formattedRows" }] : /* istanbul ignore next */ []));
+    _groupedRows = computed(() => {
+        const groupBy = this.groupBy();
+        if (!groupBy)
+            return [];
+        return groupRows(this._sortedRows(), groupBy, this.fieldId(), new Set(this.expandedGroups()));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_groupedRows" }] : /* istanbul ignore next */ []));
+    pagedRows = computed(() => {
+        if (!this.paginator()) {
+            return this.formattedRows();
+        }
+        return [...paginateRows(this.formattedRows(), this.pageState())];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagedRows" }] : /* istanbul ignore next */ []));
+    _filteredRows = computed(() => filterRows(this.rows(), this.filters()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_filteredRows" }] : /* istanbul ignore next */ []));
+    _sortedRows = computed(() => sortRows(this._filteredRows(), this.sort(), this.sortComparator()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_sortedRows" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        this._selection = new TableSelectionModel({
+            viewRows: this.formattedRows,
+            selectionMode: this.selectionMode,
+            fieldId: this.fieldId,
+            selection: this.selection,
+            focusedRowIndex: this.focusedRowIndex,
+            scrollToIndex: index => this._scroller().scrollToIndex(index),
+        });
+        this._rowNav = new TableRowNavigationModel({
+            viewRows: this.formattedRows,
+            hasActions: () => this._rowActions.size > 0,
+            focusedRowIndex: this.focusedRowIndex,
+            selectionMode: this.selectionMode,
+            scrollToIndex: index => this._scroller().scrollToIndex(index),
+            enterActions: index => this.getRowActions(index)?.focusFirstAction() ?? false,
+            moveAction: (index, delta) => this.getRowActions(index)?.moveAction(delta) ?? false,
+            openMenu: index => this.getRowActions(index)?.openMenuFromKeyboard() ?? false,
+            focusHost: () => this.element.nativeElement.focus(),
+        });
+        this.headerCheckboxValue = computed(() => this._selection.headerCheckboxValue(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerCheckboxValue" }] : /* istanbul ignore next */ []));
+        // Minor #3: clear the current-row highlight whenever the underlying row
+        // set changes identity (sort/filter/rows replaced), so it never lingers
+        // on a stale index. Only reads `formattedRows` as a dependency — the
+        // writes below must not be read here, or this effect would re-run on its
+        // own writes and clobber every keyboard row move.
+        effect(() => {
+            this.formattedRows();
+            this.focusedRowIndex.set(null);
+            this._rowNav.inActions.set(false);
+        });
+        // A11y: announce sort / filter / pagination / selection changes through a
+        // polite live region — none of these are otherwise conveyed to assistive
+        // tech. Only the aspect that actually changed is announced (checked in
+        // priority order), and the first run only seeds the baselines. Writes only
+        // `liveAnnouncement`, which it never reads, so it cannot re-trigger itself.
+        let seeded = false;
+        let prevSort = '';
+        let prevFilterCount = 0;
+        let prevPageKey = '';
+        let prevSelCount = 0;
+        effect(() => {
+            const sort = this.sort();
+            const filterCount = this._filteredRows().length;
+            const page = this.pageState();
+            const selCount = this.selection().length;
+            const sortKey = sort ? `${sort.column}:${sort.direction}` : '';
+            const pageKey = page ? `${page.page.current}/${page.page.size}` : '';
+            if (!seeded) {
+                seeded = true;
+                [prevSort, prevFilterCount, prevPageKey, prevSelCount] = [
+                    sortKey,
+                    filterCount,
+                    pageKey,
+                    selCount,
+                ];
+                return;
+            }
+            let message = '';
+            if (filterCount !== prevFilterCount) {
+                message = this.i18n['table_resultCount']({ count: filterCount });
+            }
+            else if (sortKey !== prevSort) {
+                message = sort
+                    ? this.i18n['table_sortedBy']({
+                        column: sort.column,
+                        direction: this.i18n[sort.direction === 'asc' ? 'table_sortAscending' : 'table_sortDescending'](),
+                    })
+                    : this.i18n['table_sortCleared']();
+            }
+            else if (pageKey !== prevPageKey) {
+                const size = page?.page.size ?? 0;
+                const pages = size > 0 ? Math.ceil(filterCount / size) : 1;
+                message = this.i18n['table_page']({ page: (page?.page.current ?? 0) + 1, pages });
+            }
+            else if (selCount !== prevSelCount) {
+                message = this.i18n['table_selectedCount']({ count: selCount, total: this.rows().length });
+            }
+            [prevSort, prevFilterCount, prevPageKey, prevSelCount] = [
+                sortKey,
+                filterCount,
+                pageKey,
+                selCount,
+            ];
+            if (message) {
+                this.liveAnnouncement.set(message);
+            }
+        });
+    }
+    pageChanged(event) {
+        this.pageState.set(event);
+    }
+    column(column) {
+        return column;
+    }
+    // --- Column registration / geometry (delegated to TableColumnLayoutModel) ---
+    getVisualColumnIndex(logicalIndex) {
+        return this._columns.getVisualColumnIndex(logicalIndex);
+    }
+    getRegisteredHeaderCells() {
+        return this._columns.getRegisteredHeaderCells();
+    }
+    getStickyInfo(columnId) {
+        return this._columns.getStickyInfo(columnId);
+    }
+    registerHeaderCell(cell) {
+        this._columns.registerHeaderCell(cell);
+    }
+    unregisterHeaderCell(cell) {
+        this._columns.unregisterHeaderCell(cell);
+    }
+    registerSelectionColumn() {
+        this._columns.registerSelectionColumn();
+    }
+    unregisterSelectionColumn() {
+        this._columns.unregisterSelectionColumn();
+    }
+    registerStickyColumn(columnId, side) {
+        this._columns.registerStickyColumn(columnId, side);
+    }
+    unregisterStickyColumn(columnId) {
+        this._columns.unregisterStickyColumn(columnId);
+    }
+    // --- Resize operations (called by NgnTableTh) ---
+    startColumnResize(columnIndex, event) {
+        this._columns.startColumnResize(columnIndex, event);
+    }
+    dragColumnResize(columnIndex, event) {
+        this._columns.dragColumnResize(columnIndex, event);
+    }
+    endColumnResize(columnIndex, cancel) {
+        this._columns.endColumnResize(columnIndex, cancel);
+    }
+    autoSizeColumn(columnIndex) {
+        this._columns.autoSizeColumn(columnIndex);
+    }
+    // --- Reorder operations (called by NgnTableReorderableColumn) ---
+    getReorderBounds(columnId) {
+        return this._columns.getReorderBounds(columnId);
+    }
+    startColumnReorder(columnId) {
+        this._columns.startColumnReorder(columnId);
+    }
+    dragColumnReorder(event) {
+        this._columns.dragColumnReorder(event);
+    }
+    endColumnReorder(cancel) {
+        this._columns.endColumnReorder(cancel);
+    }
+    getReorderSourceColumnId() {
+        return this._columns.getReorderSourceColumnId();
+    }
+    // --- Selection operations ---
+    isRowSelected(id) {
+        return this._selection.isRowSelected(id);
+    }
+    handleRowClick(row, event) {
+        this._selection.handleRowClick(row, event);
+    }
+    handleCheckboxChange(row) {
+        this._selection.handleCheckboxChange(row);
+    }
+    toggleSelectAll() {
+        this._selection.toggleSelectAll();
+    }
+    // --- Row actions registry ---
+    /**
+     * Registers a row's {@link NgnTableRowActions} directive keyed by its row
+     * index, so keyboard navigation can look up the active row's actions.
+     * Called by `NgnTableRowActions`; not intended for manual use.
+     */
+    registerRowActions(index, dir) {
+        this._rowActions.set(index, dir);
+    }
+    /**
+     * Unregisters a row's actions directive. Called by `NgnTableRowActions`.
+     * Only removes the entry if `dir` is still the registered owner for
+     * `index`, so a stale unregister (e.g. after row recycling re-registered
+     * a different instance at the same index) cannot clobber it.
+     */
+    unregisterRowActions(index, dir) {
+        if (this._rowActions.get(index) === dir)
+            this._rowActions.delete(index);
+    }
+    /** Looks up the registered actions directive for a row index, if any. */
+    getRowActions(index) {
+        return this._rowActions.get(index);
+    }
+    /**
+     * Whether keyboard focus is currently inside the action bar of the row at
+     * `index` — i.e. this row is both the current row and
+     * {@link TableRowNavigationModel.inActions}. Drives the `active-row`
+     * highlight in {@link NgnTableBodyTr}.
+     */
+    isRowInActions(index) {
+        return this._rowNav.inActions() && this.focusedRowIndex() === index;
+    }
+    // --- Keyboard navigation ---
+    onKeyDown(event) {
+        if (this._rowNav.onKeyDown(event))
+            return;
+        if (this._rowNav.inActions())
+            return; // focus is in a row's action bar — selection must not handle keys
+        this._selection.onKeyDown(event);
+    }
+    // --- Row grouping ---
+    /**
+     * Toggle the expanded state of a group identified by its column value.
+     */
+    toggleGroup(groupKey) {
+        const current = this.expandedGroups();
+        if (current.includes(groupKey)) {
+            this.expandedGroups.set(current.filter(k => k !== groupKey));
+        }
+        else {
+            this.expandedGroups.set([...current, groupKey]);
+        }
+    }
+    /**
+     * Toggle a group from a group-header row. Used in the template where
+     * the scroller item type cannot carry the `G` generic.
+     * @internal
+     */
+    toggleGroupFromRow(row) {
+        this.toggleGroup(row.groupKey);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NgnTable, isStandalone: true, selector: "ngn-table", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: true, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, virtualPadding: { classPropertyName: "virtualPadding", publicName: "virtualPadding", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, expandedGroups: { classPropertyName: "expandedGroups", publicName: "expandedGroups", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, resizeMode: { classPropertyName: "resizeMode", publicName: "resizeMode", isSignal: true, isRequired: false, transformFunction: null }, lockSizes: { classPropertyName: "lockSizes", publicName: "lockSizes", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, columnOrder: { classPropertyName: "columnOrder", publicName: "columnOrder", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, sortComparator: { classPropertyName: "sortComparator", publicName: "sortComparator", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", expandedGroups: "expandedGroupsChange", columnOrder: "columnOrderChange", sort: "sortChange", filters: "filtersChange" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "onKeyDown($event)" } }, providers: [provideSelf(NgnTable)], viewQueries: [{ propertyName: "_scroller", first: true, predicate: NgnScroller, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<span\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n  style=\"\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    white-space: nowrap;\n    border: 0;\n  \"\n  >{{ liveAnnouncement() }}</span\n>\n<table\n  #scrollContainer\n  role=\"grid\"\n  ngnScrollShadow=\"horizontal\"\n  [ptInt]=\"this\"\n  [ptClass]=\"{ table: true, striped: striped() }\"\n  [attr.aria-multiselectable]=\"selectionMode() === 'multi' ? true : null\"\n  [attr.aria-rowcount]=\"formattedRows().length\"\n  [style.--ngn-table-column-count]=\"totalColumnCount()\"\n  [style.--ngn-table-selection-offset]=\"showCheckboxes() ? 1 : 0\"\n  [style.grid-template-columns]=\"gridTemplateColumns()\"\n  [style.--ngn-table-row-height.px]=\"rowHeight()\"\n>\n  <thead role=\"rowgroup\" [ptInt]=\"this\" [ptClass]=\"'head'\">\n    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n  </thead>\n  @if (dropIndicatorState()) {\n    <div\n      [ptInt]=\"this\"\n      [ptClass]=\"'drop-indicator'\"\n      [style.left.px]=\"dropIndicatorState()!.leftPx\"\n      [style.top.px]=\"dropIndicatorState()!.topPx\"\n      [style.height.px]=\"dropIndicatorState()!.heightPx\"\n    ></div>\n  }\n\n  <tbody\n    role=\"rowgroup\"\n    [ptInt]=\"this\"\n    [ptClass]=\"'body'\"\n    [ptDep]=\"'scroller'\"\n    ngn-scroller\n    #scroller\n    [scrollContainer]=\"scrollContainer\"\n    [virtual]=\"virtual()\"\n    [items]=\"pagedRows()\"\n    [fieldId]=\"'id'\"\n    [itemHeight]=\"rowHeight() || 0\"\n    [virtualPadding]=\"virtualPadding()\"\n    [style.--ngn-table-item-start-index]=\"scroller.itemStartIndex()\"\n  >\n    <ng-template #item [ngnTemplate]=\"scroller.templateTypes.item\" let-item let-index=\"index\">\n      @if (item.kind === 'group-header') {\n        @if (groupHeaderTemplate(); as customGroupHeader) {\n          <ng-container\n            [ngTemplateOutlet]=\"customGroupHeader\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: {\n                groupKey: item.groupKey,\n                groupValue: item.groupValue,\n                count: item.count,\n                expanded: item.expanded,\n              },\n            }\"\n          ></ng-container>\n        } @else {\n          <tr\n            [ngnTableGroupHeaderTr]=\"item\"\n            [class]=\"theme.classes({ 'group-expanded': item.expanded })\"\n            [attr.aria-expanded]=\"item.expanded\"\n            role=\"row\"\n            (click)=\"toggleGroupFromRow(item)\"\n          >\n            <td [class]=\"theme.class('group-header-cell')\" role=\"gridcell\">\n              <ngn-icon\n                [ptInt]=\"this\"\n                [ptClass]=\"'group-toggle'\"\n                [ptDep]=\"'group-toggle-icon'\"\n                [defaultIcon]=\"'table-group-toggle'\"\n              />\n              <span>{{ item.groupValue }}</span>\n              <span>({{ item.count }})</span>\n            </td>\n          </tr>\n        }\n      } @else {\n        <ng-container\n          [ngTemplateOutlet]=\"bodyTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\n        ></ng-container>\n      }\n    </ng-template>\n  </tbody>\n</table>\n@if (paginator()) {\n  <ngn-paginator\n    [ptInt]=\"this\"\n    [ptDep]=\"'paginator'\"\n    [totalItems]=\"rows().length\"\n    (value)=\"pageChanged($event)\"\n  />\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgnScroller, selector: "ngn-scroller, [ngn-scroller]", inputs: ["items", "fieldId", "virtual", "itemHeight", "virtualPadding", "focusable", "fieldSticky"] }, { kind: "component", type: NgnPaginator, selector: "ngn-paginator", inputs: ["totalItems", "pageSize", "possiblePageSizes", "fixedPageSize", "page"], outputs: ["pageSizeChange", "value", "pageChange"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }, { kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }, { kind: "directive", type: NgnTableGroupHeaderTr, selector: "[ngnTableGroupHeaderTr]", inputs: ["ngnTableGroupHeaderTr", "ngnScrollerItem"] }, { kind: "directive", type: NgnScrollShadow, selector: "[ngnScrollShadow]", inputs: ["ngnScrollShadow", "scrollShadowTarget"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTable, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-table', imports: [
+                        NgTemplateOutlet,
+                        NgnScroller,
+                        NgnPaginator,
+                        NgnTemplate,
+                        NgnPt,
+                        NgnIcon,
+                        NgnTableGroupHeaderTr,
+                        NgnScrollShadow,
+                    ], providers: [provideSelf(NgnTable)], host: {
+                        tabindex: '0',
+                        '(keydown)': 'onKeyDown($event)',
+                    }, template: "<span\n  aria-live=\"polite\"\n  aria-atomic=\"true\"\n  style=\"\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    white-space: nowrap;\n    border: 0;\n  \"\n  >{{ liveAnnouncement() }}</span\n>\n<table\n  #scrollContainer\n  role=\"grid\"\n  ngnScrollShadow=\"horizontal\"\n  [ptInt]=\"this\"\n  [ptClass]=\"{ table: true, striped: striped() }\"\n  [attr.aria-multiselectable]=\"selectionMode() === 'multi' ? true : null\"\n  [attr.aria-rowcount]=\"formattedRows().length\"\n  [style.--ngn-table-column-count]=\"totalColumnCount()\"\n  [style.--ngn-table-selection-offset]=\"showCheckboxes() ? 1 : 0\"\n  [style.grid-template-columns]=\"gridTemplateColumns()\"\n  [style.--ngn-table-row-height.px]=\"rowHeight()\"\n>\n  <thead role=\"rowgroup\" [ptInt]=\"this\" [ptClass]=\"'head'\">\n    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n  </thead>\n  @if (dropIndicatorState()) {\n    <div\n      [ptInt]=\"this\"\n      [ptClass]=\"'drop-indicator'\"\n      [style.left.px]=\"dropIndicatorState()!.leftPx\"\n      [style.top.px]=\"dropIndicatorState()!.topPx\"\n      [style.height.px]=\"dropIndicatorState()!.heightPx\"\n    ></div>\n  }\n\n  <tbody\n    role=\"rowgroup\"\n    [ptInt]=\"this\"\n    [ptClass]=\"'body'\"\n    [ptDep]=\"'scroller'\"\n    ngn-scroller\n    #scroller\n    [scrollContainer]=\"scrollContainer\"\n    [virtual]=\"virtual()\"\n    [items]=\"pagedRows()\"\n    [fieldId]=\"'id'\"\n    [itemHeight]=\"rowHeight() || 0\"\n    [virtualPadding]=\"virtualPadding()\"\n    [style.--ngn-table-item-start-index]=\"scroller.itemStartIndex()\"\n  >\n    <ng-template #item [ngnTemplate]=\"scroller.templateTypes.item\" let-item let-index=\"index\">\n      @if (item.kind === 'group-header') {\n        @if (groupHeaderTemplate(); as customGroupHeader) {\n          <ng-container\n            [ngTemplateOutlet]=\"customGroupHeader\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: {\n                groupKey: item.groupKey,\n                groupValue: item.groupValue,\n                count: item.count,\n                expanded: item.expanded,\n              },\n            }\"\n          ></ng-container>\n        } @else {\n          <tr\n            [ngnTableGroupHeaderTr]=\"item\"\n            [class]=\"theme.classes({ 'group-expanded': item.expanded })\"\n            [attr.aria-expanded]=\"item.expanded\"\n            role=\"row\"\n            (click)=\"toggleGroupFromRow(item)\"\n          >\n            <td [class]=\"theme.class('group-header-cell')\" role=\"gridcell\">\n              <ngn-icon\n                [ptInt]=\"this\"\n                [ptClass]=\"'group-toggle'\"\n                [ptDep]=\"'group-toggle-icon'\"\n                [defaultIcon]=\"'table-group-toggle'\"\n              />\n              <span>{{ item.groupValue }}</span>\n              <span>({{ item.count }})</span>\n            </td>\n          </tr>\n        }\n      } @else {\n        <ng-container\n          [ngTemplateOutlet]=\"bodyTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\n        ></ng-container>\n      }\n    </ng-template>\n  </tbody>\n</table>\n@if (paginator()) {\n  <ngn-paginator\n    [ptInt]=\"this\"\n    [ptDep]=\"'paginator'\"\n    [totalItems]=\"rows().length\"\n    (value)=\"pageChanged($event)\"\n  />\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { _scroller: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgnScroller), { isSignal: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], fieldId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldId", required: true }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], virtualPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualPadding", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], expandedGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedGroups", required: false }] }, { type: i0.Output, args: ["expandedGroupsChange"] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], resizeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeMode", required: false }] }], lockSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockSizes", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], columnOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnOrder", required: false }] }, { type: i0.Output, args: ["columnOrderChange"] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], sortComparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortComparator", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }] } });
+
+/**
+ * Lightweight body-cell directive. Deliberately does **not** extend `NgnBase`:
+ * a `<td>` is instantiated once per cell (thousands per table), so it avoids the
+ * per-control overhead (kind/color effects, `viewChildren` query, theme kind/color
+ * injection, leave-animation hooks). It only does what a cell needs — apply the
+ * `cell` class, expose its visual column index, and mirror sticky positioning.
+ */
+class NgnTableTd {
+    _element = inject(ElementRef);
+    theme = injectThemeTemplate(tableControlTemplate);
+    _table = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_table" }] : /* istanbul ignore next */ []));
+    /** 0-based logical (DOM) index of this cell within its row. */
+    _logicalIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_logicalIndex" }] : /* istanbul ignore next */ []));
+    /** 1-based visual column index, remapped through the table's column order. */
+    _visualColumnIndex = computed(() => {
+        const logicalIndex = this._logicalIndex();
+        const table = this._table();
+        if (table) {
+            // Subtract the selection column offset so DOM index aligns with registered header cells.
+            const offset = table.showCheckboxes() ? 1 : 0;
+            return table.getVisualColumnIndex(logicalIndex - offset);
+        }
+        return logicalIndex + 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_visualColumnIndex" }] : /* istanbul ignore next */ []));
+    _columnId = computed(() => {
+        const table = this._table();
+        if (!table)
+            return null;
+        const offset = table.showCheckboxes() ? 1 : 0;
+        const logicalIndex = this._logicalIndex() - offset;
+        const cells = table.getRegisteredHeaderCells();
+        return cells[logicalIndex]?.ngnTableTh() ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_columnId" }] : /* istanbul ignore next */ []));
+    _stickyInfo = computed(() => {
+        const table = this._table();
+        const columnId = this._columnId();
+        if (!table || !columnId)
+            return null;
+        return table.getStickyInfo(columnId);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_stickyInfo" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.prepareDom();
+        const el = this._element.nativeElement;
+        const parent = el.parentElement?.children;
+        if (parent) {
+            const index = Array.from(parent).findIndex(child => child === el);
+            this._logicalIndex.set(index);
+        }
+        afterNextRender(() => {
+            const table = getNearestNgnInstance(el, NgnTable);
+            this._table.set(table);
+        });
+        afterRenderEffect(() => {
+            const info = this._stickyInfo();
+            const el = this._element.nativeElement;
+            toggleClass(el, this.theme.class('sticky-start'), info?.side === 'start');
+            toggleClass(el, this.theme.class('sticky-end'), info?.side === 'end');
+            toggleClass(el, this.theme.class('sticky-start-edge'), info?.side === 'start' && info.isEdge);
+            toggleClass(el, this.theme.class('sticky-end-edge'), info?.side === 'end' && info.isEdge);
+            if (info) {
+                el.style.position = 'sticky';
+                if (info.side === 'start') {
+                    el.style.left = `var(--ngn-sticky-start-offset-${info.index})`;
+                    el.style.removeProperty('right');
+                }
+                else {
+                    el.style.right = `var(--ngn-sticky-end-offset-${info.index})`;
+                    el.style.removeProperty('left');
+                }
+            }
+            else {
+                el.style.removeProperty('position');
+                el.style.removeProperty('left');
+                el.style.removeProperty('right');
+            }
+        });
+    }
+    prepareDom() {
+        toggleClass(this._element.nativeElement, this.theme.class('cell'), true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableTd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: NgnTableTd, isStandalone: true, selector: "[ngnTableTd]", host: { attributes: { "role": "gridcell" }, properties: { "style.--ngn-table-column-index": "_visualColumnIndex()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableTd, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngnTableTd]',
+                    host: { role: 'gridcell', '[style.--ngn-table-column-index]': '_visualColumnIndex()' },
+                }]
+        }], ctorParameters: () => [] });
+
+class NgnTableTh extends NgnBase {
+    theme = this.injectThemeTemplate(tableControlTemplate);
+    _table;
+    _tableSignal = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tableSignal" }] : /* istanbul ignore next */ []));
+    _resizeHandle;
+    /** The unique column identifier for this header cell, used for sorting, filtering, sticky, and reorder. */
+    ngnTableTh = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ngnTableTh" }] : /* istanbul ignore next */ []));
+    /**
+     * The size of this column (e.g. '1fr', '200px', '25%').
+     * @default '1fr'
+     */
+    size = model('1fr', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * The minimum size constraint for this column.
+     * @default '50px'
+     */
+    minSize = input('50px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []));
+    /**
+     * The maximum size constraint for this column.
+     * @default '100%'
+     */
+    maxSize = input('100%', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this column is resizable. Computed from the parent table's `resizable` input.
+     */
+    resizable = computed(() => this._table?.resizable() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the resize handle should be shown. Hidden for the last column in adjacent
+     * and proportional modes since it is implicitly resized via the previous column's handle.
+     * Push mode shows handles on all columns since each column grows independently.
+     */
+    _showHandle = computed(() => {
+        if (!this._table?.resizable())
+            return false;
+        if (this._table.resizeMode() === 'push')
+            return true;
+        // Adjacent & proportional: hide handle on last column
+        const cells = this._table.getRegisteredHeaderCells();
+        return cells.indexOf(this) < cells.length - 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showHandle" }] : /* istanbul ignore next */ []));
+    /**
+     * 1-based visual column index, derived from the table's column order map.
+     * Falls back to registration index + 1 when no reordering is active.
+     */
+    _visualColumnIndex = computed(() => {
+        if (!this._table)
+            return undefined;
+        const map = this._table.columnOrderMap();
+        return map.get(this.ngnTableTh()) ?? this.getColumnIndex() + 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_visualColumnIndex" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        this.prepareDom();
+        const renderer = inject(Renderer2);
+        const elRef = inject(ElementRef);
+        afterNextRender(() => {
+            // Wrap existing content in a text container for ellipsis support
+            const textWrapper = renderer.createElement('span');
+            textWrapper.classList.add(this.theme.class('cell-text'));
+            const el = elRef.nativeElement;
+            while (el.firstChild) {
+                textWrapper.appendChild(el.firstChild);
+            }
+            el.appendChild(textWrapper);
+            // Move dynamically-created controls back out of the text wrapper
+            // so they participate in the header cell's flex layout (order: 2, 3)
+            const filterControl = textWrapper.querySelector(`.${this.theme.class('filter-control')}`);
+            if (filterControl)
+                el.appendChild(filterControl);
+            const sortControl = textWrapper.querySelector(`.${this.theme.class('sort-control')}`);
+            if (sortControl)
+                el.appendChild(sortControl);
+            // Spacer div for flex layout
+            const spacer = renderer.createElement('div');
+            spacer.classList.add(this.theme.class('spacer'));
+            elRef.nativeElement.appendChild(spacer);
+            // Resize handle
+            this._resizeHandle = renderer.createElement('div');
+            this._resizeHandle.classList.add(this.theme.class('resize-handle'));
+            this._resizeHandle.addEventListener('pointerdown', this.onResizePointerDown);
+            this._resizeHandle.addEventListener('dblclick', this.onResizeDblClick);
+            elRef.nativeElement.appendChild(this._resizeHandle);
+        });
+        // Toggle handle visibility based on mode and column position
+        afterRenderEffect(() => {
+            const show = this._showHandle();
+            if (this._resizeHandle) {
+                this._resizeHandle.style.display = show ? '' : 'none';
+            }
+        });
+        // Sticky column classes and offsets
+        afterRenderEffect(() => {
+            const table = this._tableSignal();
+            if (!table)
+                return;
+            const info = table.getStickyInfo(this.ngnTableTh());
+            const el = this.element.nativeElement;
+            toggleClass(el, this.theme.class('sticky-start'), info?.side === 'start');
+            toggleClass(el, this.theme.class('sticky-end'), info?.side === 'end');
+            toggleClass(el, this.theme.class('sticky-start-edge'), info?.side === 'start' && info.isEdge);
+            toggleClass(el, this.theme.class('sticky-end-edge'), info?.side === 'end' && info.isEdge);
+            if (info) {
+                el.style.position = 'sticky';
+                if (info.side === 'start') {
+                    el.style.left = `var(--ngn-sticky-start-offset-${info.index})`;
+                    el.style.removeProperty('right');
+                }
+                else {
+                    el.style.right = `var(--ngn-sticky-end-offset-${info.index})`;
+                    el.style.removeProperty('left');
+                }
+            }
+            else {
+                el.style.removeProperty('position');
+                el.style.removeProperty('left');
+                el.style.removeProperty('right');
+            }
+        });
+    }
+    ngOnInit() {
+        const table = getNearestNgnInstance(this.element.nativeElement, (NgnTable));
+        if (!table) {
+            throw new NgnError('ngnTableTh', 'ngnTableTh must be used within an NgnTable component');
+        }
+        this._table = table;
+        this._tableSignal.set(table);
+        this._table.registerHeaderCell(this);
+    }
+    ngOnDestroy() {
+        this._table?.unregisterHeaderCell(this);
+        this._resizeHandle?.removeEventListener('pointerdown', this.onResizePointerDown);
+        this._resizeHandle?.removeEventListener('dblclick', this.onResizeDblClick);
+    }
+    prepareDom() {
+        toggleClass(this.element.nativeElement, this.theme.class('cell'), true);
+        toggleClass(this.element.nativeElement, this.theme.class('resizable'), true);
+    }
+    onResizeDblClick = (event) => {
+        if (!this._table?.resizable())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const columnIndex = this.getColumnIndex();
+        if (columnIndex < 0)
+            return;
+        this._table.autoSizeColumn(columnIndex);
+    };
+    onResizePointerDown = (event) => {
+        if (!this._table?.resizable())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const target = event.target;
+        try {
+            target.setPointerCapture(event.pointerId);
+        }
+        catch {
+            // Ignore
+        }
+        const columnIndex = this.getColumnIndex();
+        if (columnIndex < 0)
+            return;
+        this._table.startColumnResize(columnIndex, event);
+        const onPointerMove = (e) => {
+            this._table.dragColumnResize(columnIndex, e);
+        };
+        const cleanup = (cancel) => {
+            this._table.endColumnResize(columnIndex, cancel);
+            target.removeEventListener('pointermove', onPointerMove);
+            target.removeEventListener('pointerup', onPointerUp);
+            target.removeEventListener('pointercancel', onPointerCancel);
+        };
+        const onPointerUp = () => cleanup(false);
+        const onPointerCancel = () => cleanup(true);
+        target.addEventListener('pointermove', onPointerMove);
+        target.addEventListener('pointerup', onPointerUp);
+        target.addEventListener('pointercancel', onPointerCancel);
+    };
+    getColumnIndex() {
+        if (!this._table)
+            return -1;
+        const cells = this._table.getRegisteredHeaderCells();
+        return cells.indexOf(this);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableTh, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: NgnTableTh, isStandalone: true, selector: "[ngnTableTh]", inputs: { ngnTableTh: { classPropertyName: "ngnTableTh", publicName: "ngnTableTh", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, host: { attributes: { "role": "columnheader" }, properties: { "style.--ngn-table-column-index": "_visualColumnIndex()" } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableTh, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngnTableTh]',
+                    host: {
+                        role: 'columnheader',
+                        '[style.--ngn-table-column-index]': '_visualColumnIndex()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { ngnTableTh: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTableTh", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }] } });
+
+class NgnTableHeadTr extends NgnBase {
+    theme = this.injectThemeTemplate(tableControlTemplate);
+    _element = inject((ElementRef));
+    constructor() {
+        super();
+        this.prepareDom();
+    }
+    prepareDom() {
+        toggleClass(this._element.nativeElement, this.theme.class('row'), true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableHeadTr, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: NgnTableHeadTr, isStandalone: true, selector: "[ngnTableHeadTr]", host: { attributes: { "role": "row" }, properties: { "attr.aria-rowindex": "1" } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableHeadTr, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ngnTableHeadTr]', host: { role: 'row', '[attr.aria-rowindex]': '1' } }]
+        }], ctorParameters: () => [] });
+
+/** Minimum distance in pixels before a drag is initiated. */
+const REORDER_DEAD_ZONE_PX = 5;
+/**
+ * @category directive
+ */
+class NgnTableReorderableColumn {
+    theme = injectThemeTemplate(tableControlTemplate);
+    _element = inject(ElementRef);
+    _headerCell = inject(NgnTableTh);
+    _columnId = this._headerCell.ngnTableTh;
+    _table = getNearestNgnInstanceSig(this._element.nativeElement, NgnTable);
+    _isDragging = false;
+    _startX = 0;
+    _startY = 0;
+    _pointerId = null;
+    _boundOnPointerMove = null;
+    _boundOnPointerUp = null;
+    _boundOnPointerCancel = null;
+    _boundOnKeyDown = null;
+    constructor() {
+        afterNextRender(() => {
+            const el = this._element.nativeElement;
+            el.addEventListener('pointerdown', this.onPointerDown);
+        });
+    }
+    ngOnDestroy() {
+        this._element.nativeElement.removeEventListener('pointerdown', this.onPointerDown);
+        this.cleanup();
+    }
+    onPointerDown = (event) => {
+        const table = this._table();
+        if (!table?.reorderable())
+            return;
+        // Don't intercept resize handle clicks
+        const target = event.target;
+        if (target.classList.contains(this.theme.class('resize-handle')))
+            return;
+        event.preventDefault();
+        this._startX = event.clientX;
+        this._startY = event.clientY;
+        this._isDragging = false;
+        this._pointerId = event.pointerId;
+        try {
+            this._element.nativeElement.setPointerCapture(event.pointerId);
+        }
+        catch {
+            // Ignore
+        }
+        this._boundOnPointerMove = (e) => this.onPointerMove(e);
+        this._boundOnPointerUp = () => this.onPointerUp();
+        this._boundOnPointerCancel = () => this.onPointerCancel();
+        this._boundOnKeyDown = (e) => this.onKeyDown(e);
+        this._element.nativeElement.addEventListener('pointermove', this._boundOnPointerMove);
+        this._element.nativeElement.addEventListener('pointerup', this._boundOnPointerUp);
+        this._element.nativeElement.addEventListener('pointercancel', this._boundOnPointerCancel);
+        document.addEventListener('keydown', this._boundOnKeyDown);
+    };
+    onPointerMove(event) {
+        if (!this._isDragging) {
+            const deltaX = event.clientX - this._startX;
+            const deltaY = event.clientY - this._startY;
+            const distance = Math.sqrt(deltaX ** 2 + deltaY ** 2);
+            if (distance < REORDER_DEAD_ZONE_PX)
+                return;
+            // Start dragging
+            this._isDragging = true;
+            const table = this._table();
+            table?.startColumnReorder(this._columnId());
+            toggleClass(this._element.nativeElement, this.theme.class('drag-source'), true);
+        }
+        this._table()?.dragColumnReorder(event);
+    }
+    onPointerUp() {
+        if (this._isDragging) {
+            this._table()?.endColumnReorder(false);
+            toggleClass(this._element.nativeElement, this.theme.class('drag-source'), false);
+        }
+        this.cleanup();
+    }
+    onPointerCancel() {
+        if (this._isDragging) {
+            this._table()?.endColumnReorder(true);
+            toggleClass(this._element.nativeElement, this.theme.class('drag-source'), false);
+        }
+        this.cleanup();
+    }
+    onKeyDown(event) {
+        if (event.key === 'Escape' && this._isDragging) {
+            this._table()?.endColumnReorder(true);
+            toggleClass(this._element.nativeElement, this.theme.class('drag-source'), false);
+            this.cleanup();
+        }
+    }
+    cleanup() {
+        this._isDragging = false;
+        if (this._pointerId != null) {
+            try {
+                this._element.nativeElement.releasePointerCapture(this._pointerId);
+            }
+            catch {
+                // Ignore — capture may already be released
+            }
+            this._pointerId = null;
+        }
+        if (this._boundOnPointerMove) {
+            this._element.nativeElement.removeEventListener('pointermove', this._boundOnPointerMove);
+            this._boundOnPointerMove = null;
+        }
+        if (this._boundOnPointerUp) {
+            this._element.nativeElement.removeEventListener('pointerup', this._boundOnPointerUp);
+            this._boundOnPointerUp = null;
+        }
+        if (this._boundOnPointerCancel) {
+            this._element.nativeElement.removeEventListener('pointercancel', this._boundOnPointerCancel);
+            this._boundOnPointerCancel = null;
+        }
+        if (this._boundOnKeyDown) {
+            document.removeEventListener('keydown', this._boundOnKeyDown);
+            this._boundOnKeyDown = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableReorderableColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: NgnTableReorderableColumn, isStandalone: true, selector: "[ngnTableReorderableColumn]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableReorderableColumn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngnTableReorderableColumn]',
+                }]
+        }], ctorParameters: () => [] });
+
+class NgnTableBodyTr extends NgnScrollerItem {
+    /** The formatted data row this `<tr>` renders. */
+    ngnTableBodyTr = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ngnTableBodyTr" }] : /* istanbul ignore next */ []));
+    /** The item bound to the underlying scroller entry; kept in sync with {@link ngnTableBodyTr}. */
+    ngnScrollerItem = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ngnScrollerItem" }] : /* istanbul ignore next */ []));
+    _element = inject((ElementRef));
+    theme = injectThemeTemplate(tableControlTemplate);
+    _table = getNearestNgnInstanceSig(this._element.nativeElement, NgnTable);
+    selectable = computed(() => !!this._table()?.selectionMode(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
+    selected = computed(() => {
+        const table = this._table();
+        if (!table || !table.selectionMode())
+            return false;
+        const row = this.ngnTableBodyTr();
+        return table.isRowSelected(row.id);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this row is the table's single current-row for keyboard
+     * navigation ({@link NgnTable.focusedRowIndex}). Tracks selection keyboard
+     * nav when {@link NgnTable.selectionMode} is set, and also tracks
+     * row-actions keyboard nav on non-selectable tables that have row actions,
+     * so a keyboard user always sees which row is current.
+     */
+    focused = computed(() => {
+        const table = this._table();
+        if (!table)
+            return false;
+        return table.focusedRowIndex() === this.ngnTableBodyTr().index;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    /** Whether this row's action bar currently has DOM focus. */
+    active = computed(() => {
+        const table = this._table();
+        if (!table)
+            return false;
+        return table.isRowInActions(this.ngnTableBodyTr().index);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        effect(() => {
+            const row = this.ngnTableBodyTr();
+            setInputSignalValue(this.ngnScrollerItem, row);
+        });
+        this.prepareDom();
+    }
+    prepareDom() {
+        toggleClass(this._element.nativeElement, this.theme.class('row'), true);
+    }
+    onRowClick(event) {
+        const table = this._table();
+        if (!table || !table.selectionMode())
+            return;
+        table.handleRowClick(this.ngnTableBodyTr(), event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableBodyTr, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: NgnTableBodyTr, isStandalone: true, selector: "[ngnTableBodyTr]", inputs: { ngnTableBodyTr: { classPropertyName: "ngnTableBodyTr", publicName: "ngnTableBodyTr", isSignal: true, isRequired: true, transformFunction: null }, ngnScrollerItem: { classPropertyName: "ngnScrollerItem", publicName: "ngnScrollerItem", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "row" }, listeners: { "click": "onRowClick($event)" }, properties: { "attr.aria-rowindex": "ngnTableBodyTr().index + 2", "style.--ngn-table-row-index": "ngnTableBodyTr().index + 2", "class": "theme.classes({\n      'even': ngnTableBodyTr().index % 2 === 0,\n      'selected-row': selected(),\n      'focused-row': focused(),\n      'active-row': active()\n    })", "attr.aria-selected": "selectable() ? selected() : null" } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableBodyTr, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngnTableBodyTr]',
+                    host: {
+                        '[attr.aria-rowindex]': 'ngnTableBodyTr().index + 2',
+                        '[style.--ngn-table-row-index]': 'ngnTableBodyTr().index + 2',
+                        '[class]': `theme.classes({
+      'even': ngnTableBodyTr().index % 2 === 0,
+      'selected-row': selected(),
+      'focused-row': focused(),
+      'active-row': active()
+    })`,
+                        '[attr.aria-selected]': 'selectable() ? selected() : null',
+                        role: 'row',
+                        '(click)': 'onRowClick($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { ngnTableBodyTr: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTableBodyTr", required: true }] }], ngnScrollerItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnScrollerItem", required: false }] }] } });
+
+/** Whether an action opens a submenu rather than firing a leaf callback. */
+function hasChildren(item) {
+    return !!item.children && item.children.length > 0;
+}
+/**
+ * Adapts an {@link NgnActionItem} (the context-menu shape) to the
+ * {@link NgnActionButtonConfig} that `ngn-action-button` consumes. Icon-only
+ * rendering (`kind: 'icon'`) is chosen when the item has an icon, so the label
+ * becomes the button's tooltip / accessible name.
+ */
+function actionItemToButtonConfig(item) {
+    return {
+        label: item.label,
+        value: item.id,
+        icon: item.icon,
+        kind: item.icon ? 'icon' : undefined,
+        disabled: item.disabled,
+        testId: item.testId,
+        action: () => item.callback?.(),
+    };
+}
+
+/**
+ * Inline row-actions bar: renders each {@link NgnActionItem} as an
+ * `ngn-action-button`. An action with `children` opens a submenu popover
+ * anchored to its own button — the anchor is resolved from the rendered
+ * button element itself, never from a `testId` lookup, so it keeps working
+ * even when an action has no `testId`. Positioning/visibility is applied by
+ * the table theme via the `row-actions` class; this component only renders
+ * the buttons.
+ */
+class NgnTableRowActionsBar {
+    theme = injectThemeTemplate(tableControlTemplate);
+    _vcr = inject(ViewContainerRef);
+    _element = inject(ElementRef);
+    _menu;
+    // One host `ElementRef` per rendered `ngn-action-button`, in the same order
+    // as `barActions()`. Reading the native `<button>` off these refs is the
+    // robust anchor for the submenu popover — it doesn't depend on the action
+    // having a `testId`. The accessible name itself is owned by `NgnTooltip`
+    // (via `ngnTooltipAutoAriaMode="label"` on `action-button.html`), not this
+    // component.
+    _buttonHosts = viewChildren(NgnActionButton, { ...(ngDevMode ? { debugName: "_buttonHosts" } : /* istanbul ignore next */ {}), read: ElementRef });
+    /**
+     * The actions to render as buttons. Used for standalone consumers that bind
+     * an array directly. When {@link actionsSource} is provided (the directive
+     * mounts the bar imperatively), that signal takes precedence.
+     */
+    actions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    /**
+     * A reactive source of actions. Preferred over {@link actions} when set:
+     * the host directive passes its own `actions` input signal here so the bar
+     * reads it lazily during its own change detection. This avoids the directive
+     * imperatively re-pushing the array every change-detection pass — which, when
+     * a consumer binds a fresh array each pass (e.g. `actionsFor(row)`), would
+     * otherwise loop into infinite change detection (NG0103).
+     * @internal
+     */
+    actionsSource = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionsSource" }] : /* istanbul ignore next */ []));
+    barActions = computed(() => {
+        const source = this.actionsSource();
+        const items = source ? source() : this.actions();
+        return items.map(item => ({
+            item,
+            config: actionItemToButtonConfig(item),
+            hasChildren: hasChildren(item),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "barActions" }] : /* istanbul ignore next */ []));
+    ngOnDestroy() {
+        this._menu?.destroy();
+    }
+    // Single source of truth for the rendered `<button>` elements, in bar order:
+    // derived from the `_buttonHosts()` view query (same as the submenu anchor
+    // uses), rather than a parallel `querySelectorAll` — so focus navigation and
+    // anchoring can never drift apart.
+    _buttons = () => this._buttonHosts()
+        .map(host => this._buttonElement(host))
+        .filter((b) => b !== null);
+    /** Focuses the first enabled action button. Returns whether one was focused. */
+    focusFirst() {
+        const btn = this._buttons().find(b => !b.disabled);
+        btn?.focus();
+        return !!btn;
+    }
+    /**
+     * Moves focus by `delta` among the rendered action buttons. Returns whether
+     * focus stayed within the bar — `false` when the move would go past the
+     * first/last button, in which case focus is left unchanged.
+     */
+    move(delta) {
+        const buttons = this._buttons();
+        const active = document.activeElement;
+        const idx = buttons.findIndex(b => b === active);
+        const next = idx + delta;
+        if (next < 0 || next >= buttons.length)
+            return false;
+        buttons[next]?.focus();
+        return true;
+    }
+    /**
+     * Stops a native button click (mouse or Space/Enter key activation) from
+     * bubbling to the row's own click handler — otherwise, on a table with
+     * `selectionMode` set, activating an action would also select/toggle the
+     * row it lives in. Mirrors {@link import('./table-selection-column').NgnTableSelectionColumn}'s
+     * click guard for the same reason.
+     */
+    onBarClick(event) {
+        event.stopPropagation();
+    }
+    onClicked(action) {
+        if (!action.hasChildren)
+            return;
+        const index = this.barActions().indexOf(action);
+        const host = index >= 0 ? this._buttonHosts()[index] : undefined;
+        const anchor = (host && this._buttonElement(host)) ?? this._element.nativeElement;
+        this._menu = openMenuAt(this._vcr, this._menu, action.item.children ?? [], anchor, 'bottom-end');
+    }
+    _buttonElement(host) {
+        return host.nativeElement.querySelector('button');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableRowActionsBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NgnTableRowActionsBar, isStandalone: true, selector: "ngn-table-row-actions-bar", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, actionsSource: { classPropertyName: "actionsSource", publicName: "actionsSource", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, listeners: { "click": "onBarClick($event)" }, properties: { "class": "theme.class('row-actions')" } }, viewQueries: [{ propertyName: "_buttonHosts", predicate: NgnActionButton, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+    @for (action of barActions(); track action.item.id) {
+      <ngn-action-button
+        [config]="action.config"
+        [inline]="true"
+        [attr.aria-haspopup]="action.hasChildren ? 'menu' : null"
+        (clicked)="onClicked(action)"
+      />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NgnActionButton, selector: "ngn-action-button", inputs: ["config", "inline"], outputs: ["clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableRowActionsBar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngn-table-row-actions-bar',
+                    imports: [NgnActionButton],
+                    template: `
+    @for (action of barActions(); track action.item.id) {
+      <ngn-action-button
+        [config]="action.config"
+        [inline]="true"
+        [attr.aria-haspopup]="action.hasChildren ? 'menu' : null"
+        (clicked)="onClicked(action)"
+      />
+    }
+  `,
+                    host: {
+                        '[class]': `theme.class('row-actions')`,
+                        role: 'presentation',
+                        '(click)': 'onBarClick($event)',
+                    },
+                }]
+        }], propDecorators: { _buttonHosts: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => NgnActionButton), { ...{ read: ElementRef }, isSignal: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], actionsSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsSource", required: false }] }] } });
+
+/**
+ * Per-row actions for the table body `<tr>`. Exposes the same `NgnActionItem[]`
+ * as a right-click context menu ({@link context}) and/or an inline hover
+ * button-bar ({@link inline}). Both modes are on by default and independent.
+ */
+class NgnTableRowActions {
+    _element = inject(ElementRef);
+    _vcr = inject(ViewContainerRef);
+    _renderer = inject(Renderer2);
+    _row = inject(NgnTableBodyTr, { optional: true });
+    _table = getNearestNgnInstanceSig(this._element.nativeElement, NgnTable);
+    _menu;
+    _bar;
+    /** The actions available on this row. */
+    actions = input.required({ ...(ngDevMode ? { debugName: "actions" } : /* istanbul ignore next */ {}), alias: 'ngnTableRowActions' });
+    /**
+     * Whether right-clicking the row opens a context menu of the actions.
+     * @default true
+     */
+    context = input(true, { ...(ngDevMode ? { debugName: "context" } : /* istanbul ignore next */ {}), transform: booleanAttribute,
+        alias: 'ngnTableRowActionsContext' });
+    /**
+     * Whether an inline button-bar is rendered at the row's right edge, revealed
+     * on hover or keyboard focus.
+     * @default true
+     */
+    inline = input(true, { ...(ngDevMode ? { debugName: "inline" } : /* istanbul ignore next */ {}), transform: booleanAttribute,
+        alias: 'ngnTableRowActionsInline' });
+    constructor() {
+        domEventHandler(this._element, 'contextmenu', e => this._onContextMenu(e));
+        effect(() => {
+            if (this.inline()) {
+                this._mountBar();
+            }
+            else {
+                this._unmountBar();
+            }
+        });
+        // Register with the nearest table keyed by this row's index, so the
+        // table's keyboard navigation model can reach this directive.
+        effect(onCleanup => {
+            const table = this._table();
+            const row = this._row;
+            if (!table || !row)
+                return;
+            const index = row.ngnTableBodyTr().index;
+            table.registerRowActions(index, this);
+            onCleanup(() => table.unregisterRowActions(index, this));
+        });
+    }
+    ngOnDestroy() {
+        this._menu?.destroy();
+        this._unmountBar();
+    }
+    /**
+     * Opens the context menu anchored to the row element (keyboard trigger:
+     * Enter, ContextMenu, or Shift+F10). Deliberately independent of
+     * {@link context} — that input only toggles the right-click affordance,
+     * not the keyboard one, so keyboard users can always reach a row's menu.
+     */
+    openMenuFromKeyboard() {
+        this._menu = openMenuAt(this._vcr, this._menu, this.actions(), this._element.nativeElement, 'bottom-start');
+        return true;
+    }
+    /** Focuses the first enabled action button in the inline bar. Returns whether one was focused. */
+    focusFirstAction() {
+        return this._bar?.instance.focusFirst() ?? false;
+    }
+    /** Moves focus by `delta` among the inline bar's action buttons. Returns whether focus stayed within the bar. */
+    moveAction(delta) {
+        return this._bar?.instance.move(delta) ?? false;
+    }
+    _onContextMenu(event) {
+        // A `contextmenu` event is by definition a context-menu request (right-click
+        // or the keyboard menu key), so no mouse-button check is needed — and
+        // `event.button` is not reliably `2` across browsers (e.g. WebKit/Firefox),
+        // which would otherwise suppress the menu there.
+        if (!this.context())
+            return;
+        if (this._menu?.instance.open())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this._menu = openMenuAt(this._vcr, this._menu, this.actions(), {
+            x: event.clientX,
+            y: event.clientY,
+        });
+    }
+    _mountBar() {
+        if (this._bar)
+            return;
+        this._bar = this._vcr.createComponent(NgnTableRowActionsBar);
+        // Move the bar's host element inside the <tr> so it joins the row's
+        // subgrid and the table's horizontal scroll container. Use Renderer2 so the
+        // move stays platform-agnostic (SSR / non-DOM renderers).
+        this._renderer.appendChild(this._element.nativeElement, this._bar.location.nativeElement);
+        // Pass the actions SIGNAL (not its current value) once. The bar reads it
+        // reactively in its own change detection, so we never re-push the array
+        // here. Reading `this.actions()` inside this effect-driven method would
+        // make the effect re-run on every actions change — and when a consumer
+        // binds a fresh array each change-detection pass, re-pushing it would loop
+        // into infinite change detection (NG0103).
+        setComponentInput(this._bar, 'actionsSource', this.actions);
+    }
+    _unmountBar() {
+        this._bar?.destroy();
+        this._bar = undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableRowActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: NgnTableRowActions, isStandalone: true, selector: "[ngnTableRowActions]", inputs: { actions: { classPropertyName: "actions", publicName: "ngnTableRowActions", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "ngnTableRowActionsContext", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "ngnTableRowActionsInline", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableRowActions, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ngnTableRowActions]' }]
+        }], ctorParameters: () => [], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTableRowActions", required: true }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTableRowActionsContext", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTableRowActionsInline", required: false }] }] } });
+
+/**
+ * Directive that turns a `<th>` or `<td>` into a selection checkbox column.
+ *
+ * **Header usage** — renders a "select all / none" checkbox:
+ * ```html
+ * <th ngnTableSelectionColumn></th>
+ * ```
+ *
+ * **Body usage** — renders a per-row checkbox (must be inside a `[ngnTableBodyTr]`):
+ * ```html
+ * <td ngnTableSelectionColumn></td>
+ * ```
+ *
+ * @category directive
+ */
+class NgnTableSelectionColumn {
+    theme = injectThemeTemplate(tableControlTemplate);
+    _element = inject(ElementRef);
+    _envInjector = inject(EnvironmentInjector);
+    _appRef = inject(ApplicationRef);
+    _i18n = inject(I18n).translations;
+    _table = getNearestNgnInstanceSig(this._element.nativeElement, NgnTable);
+    /** Non-null only when used inside a body row (`<td>`). */
+    _bodyTr = inject(NgnTableBodyTr, { optional: true });
+    _isHeader = this._element.nativeElement.tagName === 'TH';
+    /**
+     * NgnCheckbox created at the application level via `createComponent` + `EnvironmentInjector`.
+     * This keeps it outside Angular's view tree so `@for` reconciliation cannot destroy it.
+     */
+    _checkboxRef;
+    selected = computed(() => {
+        if (this._isHeader)
+            return false;
+        const table = this._table();
+        const row = this._bodyTr?.ngnTableBodyTr();
+        if (!table || !row)
+            return false;
+        return table.isRowSelected(row.id);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    focused = computed(() => {
+        if (this._isHeader)
+            return false;
+        const table = this._table();
+        const row = this._bodyTr?.ngnTableBodyTr();
+        if (!table || !row)
+            return false;
+        return table.focusedRowIndex() === row.index;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this._prepareDom();
+        this._createCheckbox();
+        if (this._isHeader) {
+            this._setupHeaderEffects();
+            // Name the select-all checkbox, kept in sync with the active language
+            // (translations load asynchronously, so this cannot be set once at init).
+            effect(() => {
+                setComponentInput(this._checkboxRef, 'label', this._i18n['table_selectAllRows']());
+            });
+            // Register the selection column once the table signal resolves
+            effect(() => {
+                const table = this._table();
+                if (table) {
+                    table.registerSelectionColumn();
+                }
+            });
+        }
+        else {
+            this._setupBodyEffects();
+            // Mirror the header: name the per-row checkbox, kept in sync with language.
+            effect(() => {
+                setComponentInput(this._checkboxRef, 'label', this._i18n['table_selectRow']());
+            });
+        }
+    }
+    ngOnDestroy() {
+        if (this._isHeader) {
+            this._table()?.unregisterSelectionColumn();
+        }
+        this._appRef.detachView(this._checkboxRef.hostView);
+        this._checkboxRef.destroy();
+    }
+    _prepareDom() {
+        const el = this._element.nativeElement;
+        // Mirror the grid roles that ngnTableTh/ngnTableTd set, so the selection column
+        // stays inside the table's `role="grid"` semantics instead of being an orphan cell.
+        el.setAttribute('role', this._isHeader ? 'columnheader' : 'gridcell');
+        toggleClass(el, this.theme.class('cell'), true);
+        toggleClass(el, this.theme.class('selection-column'), true);
+    }
+    /**
+     * Creates an NgnCheckbox via `createComponent` + `EnvironmentInjector`.
+     * The component is attached to `ApplicationRef` (not a ViewContainerRef),
+     * so Angular's `@for` block reconciliation cannot destroy it.
+     */
+    _createCheckbox() {
+        this._checkboxRef = createComponent(NgnCheckbox, {
+            environmentInjector: this._envInjector,
+        });
+        this._appRef.attachView(this._checkboxRef.hostView);
+        const cbEl = this._checkboxRef.location.nativeElement;
+        cbEl.classList.add(this.theme.class('selection-checkbox'));
+        if (this._isHeader) {
+            setComponentInput(this._checkboxRef, 'allowIndeterminate', true);
+        }
+        this._element.nativeElement.appendChild(cbEl);
+    }
+    // --- Header (select-all) ---
+    _setupHeaderEffects() {
+        effect(() => {
+            const table = this._table();
+            if (!table)
+                return;
+            setComponentInput(this._checkboxRef, 'value', table.headerCheckboxValue());
+        });
+    }
+    // --- Body (per-row) ---
+    _setupBodyEffects() {
+        effect(() => {
+            const isSelected = this.selected();
+            const isFocused = this.focused();
+            const row = this._bodyTr?.ngnTableBodyTr();
+            const el = this._element.nativeElement;
+            setComponentInput(this._checkboxRef, 'value', isSelected);
+            if (row) {
+                el.style.setProperty('--ngn-table-row-index', String(row.index + 2));
+            }
+            toggleClass(el, this.theme.class('selected-row-cell'), isSelected);
+            toggleClass(el, this.theme.class('focused-row-cell'), isFocused);
+        });
+    }
+    // --- Click handling ---
+    onClick(event) {
+        event.stopPropagation();
+        const table = this._table();
+        if (!table)
+            return;
+        if (this._isHeader) {
+            table.toggleSelectAll();
+        }
+        else {
+            const row = this._bodyTr?.ngnTableBodyTr();
+            if (row) {
+                table.handleCheckboxChange(row);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableSelectionColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: NgnTableSelectionColumn, isStandalone: true, selector: "[ngnTableSelectionColumn]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableSelectionColumn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngnTableSelectionColumn]',
+                    host: {
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+class NgnTableStickyColumn {
+    _element = inject(ElementRef);
+    _headerCell = inject(NgnTableTh);
+    _columnId = this._headerCell.ngnTableTh;
+    /** Which edge the column sticks to: `'start'` (left) or `'end'` (right). */
+    ngnTableStickyColumn = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ngnTableStickyColumn" }] : /* istanbul ignore next */ []));
+    _table = getNearestNgnInstanceSig(this._element.nativeElement, NgnTable);
+    constructor() {
+        afterNextRender(() => {
+            const table = this._table();
+            if (table) {
+                table.registerStickyColumn(this._columnId(), this.ngnTableStickyColumn());
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._table()?.unregisterStickyColumn(this._columnId());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableStickyColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: NgnTableStickyColumn, isStandalone: true, selector: "[ngnTableStickyColumn]", inputs: { ngnTableStickyColumn: { classPropertyName: "ngnTableStickyColumn", publicName: "ngnTableStickyColumn", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableStickyColumn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngnTableStickyColumn]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { ngnTableStickyColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTableStickyColumn", required: true }] }] } });
+
+class NgnTableModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: NgnTableModule, imports: [NgnTable,
+            NgnTableBodyTr,
+            NgnTableTd,
+            NgnTableTh,
+            NgnTableHeadTr,
+            NgnTableGroupHeaderTr,
+            NgnTableReorderableColumn,
+            NgnTableRowActions,
+            NgnTableRowActionsBar,
+            NgnTableSelectionColumn,
+            NgnTableStickyColumn], exports: [NgnTable,
+            NgnTableBodyTr,
+            NgnTableTd,
+            NgnTableTh,
+            NgnTableHeadTr,
+            NgnTableGroupHeaderTr,
+            NgnTableReorderableColumn,
+            NgnTableRowActions,
+            NgnTableRowActionsBar,
+            NgnTableSelectionColumn,
+            NgnTableStickyColumn] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableModule, imports: [NgnTable,
+            NgnTableRowActionsBar] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        NgnTable,
+                        NgnTableBodyTr,
+                        NgnTableTd,
+                        NgnTableTh,
+                        NgnTableHeadTr,
+                        NgnTableGroupHeaderTr,
+                        NgnTableReorderableColumn,
+                        NgnTableRowActions,
+                        NgnTableRowActionsBar,
+                        NgnTableSelectionColumn,
+                        NgnTableStickyColumn,
+                    ],
+                    exports: [
+                        NgnTable,
+                        NgnTableBodyTr,
+                        NgnTableTd,
+                        NgnTableTh,
+                        NgnTableHeadTr,
+                        NgnTableGroupHeaderTr,
+                        NgnTableReorderableColumn,
+                        NgnTableRowActions,
+                        NgnTableRowActionsBar,
+                        NgnTableSelectionColumn,
+                        NgnTableStickyColumn,
+                    ],
+                }]
+        }] });
+
+/**
+ * @category directive
+ */
+class NgnTableFilterableColumn {
+    theme = injectThemeTemplate(tableControlTemplate);
+    _element = inject(ElementRef);
+    _columnId = inject(NgnTableTh).ngnTableTh;
+    /** Enables filtering on this column. The directive selector; its value is unused. */
+    ngnTableFilterableColumn = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ngnTableFilterableColumn" }] : /* istanbul ignore next */ []));
+    _ngnActionButton;
+    _ngnFilter;
+    _table = getNearestNgnInstanceSig(this._element.nativeElement, NgnTable);
+    _rows = computed(() => {
+        return this._table()?.rows() || [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_rows" }] : /* istanbul ignore next */ []));
+    filter = computed(() => {
+        const tableFilter = this._table()?.filters()?.[this._columnId()];
+        return tableFilter;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    /** The data type of the column, which determines the available filter operators and UI. */
+    ngnTableFilterableColumnType = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ngnTableFilterableColumnType" }] : /* istanbul ignore next */ []));
+    /** For list-based filters, the set of selectable option values to offer. */
+    ngnTableFilterableColumnItems = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ngnTableFilterableColumnItems" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this._ngnActionButton = inject(ViewContainerRef).createComponent((NgnActionButton));
+        this._ngnFilter = inject(ViewContainerRef).createComponent(NgnFilter);
+        this._element.nativeElement.appendChild(this._ngnActionButton.location.nativeElement);
+        this._element.nativeElement.appendChild(this._ngnFilter.location.nativeElement);
+        this._ngnActionButton.location.nativeElement.classList.add(this.theme.class('filter-control'));
+        setComponentInput(this._ngnActionButton, 'kind', 'icon');
+        setComponentInput(this._ngnActionButton, 'inline', true);
+        setComponentInput(this._ngnFilter, 'anchor', this._ngnActionButton.location.nativeElement);
+        setComponentInput(this._ngnFilter, 'mode', 'headless');
+        setComponentInput(this._ngnFilter, 'allowMultiple', true);
+        const cfg = computed(() => ({
+            label: 'Filter',
+            value: null,
+            kind: 'icon',
+            defaultIcon: this.filter() ? 'filter-active' : 'filter-inactive',
+            action: event => {
+                event.stopPropagation();
+                this._ngnFilter.instance.show();
+            },
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cfg" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            setComponentInput(this._ngnActionButton, 'config', cfg());
+        });
+        effect(() => {
+            setComponentInput(this._ngnFilter, 'data', this._rows().map(row => row[this._columnId()]));
+        });
+        effect(() => {
+            setComponentInput(this._ngnFilter, 'dataType', this.ngnTableFilterableColumnType());
+        });
+        effect(() => {
+            setComponentInput(this._ngnFilter, 'listOptions', this.ngnTableFilterableColumnItems());
+        });
+        this._ngnFilter.instance.filterChange.subscribe(cfg => {
+            const table = this._table();
+            const currentFilters = table?.filters() || {};
+            table?.filters.set({ ...currentFilters, [this._columnId()]: cfg ?? undefined });
+        });
+    }
+    ngOnDestroy() {
+        this._ngnActionButton.destroy();
+        this._ngnFilter.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableFilterableColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: NgnTableFilterableColumn, isStandalone: true, selector: "[ngnTableFilterableColumn]", inputs: { ngnTableFilterableColumn: { classPropertyName: "ngnTableFilterableColumn", publicName: "ngnTableFilterableColumn", isSignal: true, isRequired: false, transformFunction: null }, ngnTableFilterableColumnType: { classPropertyName: "ngnTableFilterableColumnType", publicName: "ngnTableFilterableColumnType", isSignal: true, isRequired: true, transformFunction: null }, ngnTableFilterableColumnItems: { classPropertyName: "ngnTableFilterableColumnItems", publicName: "ngnTableFilterableColumnItems", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme.classes({'filterable-column': true, 'filtered-column': !!filter() })" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableFilterableColumn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngnTableFilterableColumn]',
+                    host: {
+                        '[class]': `theme.classes({'filterable-column': true, 'filtered-column': !!filter() })`,
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { ngnTableFilterableColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTableFilterableColumn", required: false }] }], ngnTableFilterableColumnType: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTableFilterableColumnType", required: true }] }], ngnTableFilterableColumnItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTableFilterableColumnItems", required: false }] }] } });
+
+/**
+ * @category directive
+ */
+class NgnTableSortableColumn {
+    theme = injectThemeTemplate(tableControlTemplate);
+    _element = inject(ElementRef);
+    /** Enables sorting on this column. The directive selector; its value is unused. */
+    ngnTableSortableColumn = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ngnTableSortableColumn" }] : /* istanbul ignore next */ []));
+    _table = getNearestNgnInstanceSig(this._element.nativeElement, NgnTable);
+    sort = computed(() => {
+        const tableSort = this._table()?.sort();
+        if (tableSort?.column === this.columnId()) {
+            return tableSort.direction;
+        }
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+    columnId = inject(NgnTableTh).ngnTableTh;
+    _ngnIcon;
+    constructor() {
+        this._ngnIcon = inject(ViewContainerRef).createComponent(NgnIcon);
+        this._element.nativeElement.appendChild(this._ngnIcon.location.nativeElement);
+        this._ngnIcon.location.nativeElement.classList.add(this.theme.class('sort-control'));
+        effect(() => {
+            const sort = this.sort();
+            setComponentInput(this._ngnIcon, 'defaultIcon', sort === 'asc' ? 'sort-ascending' : sort === 'desc' ? 'sort-descending' : 'sort-neutral');
+        });
+    }
+    ngOnDestroy() {
+        this._ngnIcon.destroy();
+    }
+    onHostClick(event) {
+        const target = event.target;
+        if (target.classList.contains(this.theme.class('resize-handle')))
+            return;
+        this.toggleSort();
+    }
+    toggleSort() {
+        const currentSort = this.sort();
+        const table = this._table();
+        table?.sort.set(currentSort === null
+            ? { column: this.columnId(), direction: 'asc' }
+            : currentSort === 'asc'
+                ? { column: this.columnId(), direction: 'desc' }
+                : null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableSortableColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: NgnTableSortableColumn, isStandalone: true, selector: "[ngnTableSortableColumn]", inputs: { ngnTableSortableColumn: { classPropertyName: "ngnTableSortableColumn", publicName: "ngnTableSortableColumn", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "theme.classes({'sortable-column': true, 'sorted-column': !!sort() })", "attr.aria-sort": "sort() === 'asc' ? 'ascending' : sort() === 'desc' ? 'descending' : 'none'" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTableSortableColumn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngnTableSortableColumn]',
+                    host: {
+                        '[class]': `theme.classes({'sortable-column': true, 'sorted-column': !!sort() })`,
+                        '[attr.aria-sort]': `sort() === 'asc' ? 'ascending' : sort() === 'desc' ? 'descending' : 'none'`,
+                        '(click)': `onHostClick($event)`,
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { ngnTableSortableColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTableSortableColumn", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnTable, NgnTableBodyTr, NgnTableFilterableColumn, NgnTableGroupHeaderTr, NgnTableHeadTr, NgnTableModule, NgnTableReorderableColumn, NgnTableRowActions, NgnTableRowActionsBar, NgnTableSelectionColumn, NgnTableSortableColumn, NgnTableStickyColumn, NgnTableTd, NgnTableTemplates, NgnTableTh, defaultSortComparator, filterRows, groupRows, paginateRows, sortRows };
+//# sourceMappingURL=ngneers-controls-table.mjs.map