@malva-ui/core 0.1.12

package/esm2022/data-table/lib/data-table/data-table.js

@@ -0,0 +1,1846 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, ViewEncapsulation, afterNextRender, computed, contentChildren, inject, Injector, input, model, NgZone, numberAttribute, output, signal, effect, untracked, viewChild, viewChildren, } from '@angular/core';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { Grid, GridRow, GridCell, GridCellWidget } from '@angular/aria/grid';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { CdkVirtualScrollViewport, ScrollingModule, } from '@angular/cdk/scrolling';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { LucideArrowUp, LucideArrowDown, LucideChevronsUpDown, LucideChevronRight, LucideFilter, LucideTable2, LucideFunnel, LucidePencil, LucideCheck, LucideX, LucidePlus, LucidePin, LucidePinOff, LucideEye, LucideTriangleAlert, } from '@lucide/angular';
+import { MlvLoader } from '@malva-ui/core/loader';
+import { MlvCheckbox } from '@malva-ui/core/checkbox';
+import { MlvPagination } from '@malva-ui/core/pagination';
+import { MlvSearchField } from '@malva-ui/core/search-field';
+import { MlvResizeObserverService } from '@malva-ui/cdk/utils';
+import { MlvInfiniteScroll } from '@malva-ui/cdk/infinite-scroll';
+import { MlvButton, MlvButtonIcon } from '@malva-ui/core/button';
+import { MlvBadge } from '@malva-ui/core/badge';
+import { MlvEmptyState } from '@malva-ui/core/empty-state';
+import { MlvDensityDirective, MLV_DENSITY_ELEMENT, } from '@malva-ui/cdk/density';
+import { MLV_DATA_TABLE_I18N, MlvI18nResolverService } from '@malva-ui/i18n';
+import { MlvDataSource, MlvArrayDataSource } from '../data-source';
+import { MlvDataTableEditingService } from './services/data-table-editing.service';
+import { MlvDataTableColumnVisibilityService } from './services/data-table-column-visibility.service';
+import { MlvDataTablePinningService } from './services/data-table-pinning.service';
+import { MlvDataTableCell } from '../data-table-cell';
+import { MlvDataTableEditCell } from '../data-table-edit-cell';
+import { MlvDataTableNoData } from '../data-table-no-data';
+import { MlvDataTableError } from '../data-table-error';
+import { MlvDataTableFooter } from '../data-table-footer';
+import { MlvFilterDropdown } from '../filter-dropdown/filter-dropdown';
+import { MlvPopup, MlvPopupContent, MlvPopupTrigger, } from '@malva-ui/core/popup';
+import { columnCellStyles, columnWidthStyles, flattenRows, isColumnVisible, originalRow, parsePixelWidth, } from './data-table-layout';
+import * as i0 from "@angular/core";
+import * as i1 from "@malva-ui/cdk/density";
+import * as i2 from "@angular/cdk/scrolling";
+const DEFAULT_COLUMN_WIDTH = 150;
+const DEFAULT_COLUMN_MIN_WIDTH = 60;
+const DEFAULT_COLUMN_MAX_WIDTH = 2000;
+const DEFAULT_SELECTION_COLUMN_WIDTH = 40;
+const DEFAULT_ACTIONS_COLUMN_WIDTH = 80;
+const COLUMN_RESIZE_KEYBOARD_STEP = 8;
+const COLUMN_RESIZE_KEYBOARD_LARGE_STEP = 32;
+export class MlvDataTable {
+    /** @protected Injected i18n translations for the data table. */
+    _i18n = inject(MLV_DATA_TABLE_I18N);
+    // ---- Inputs ----------------------------------------------------------------
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    data = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    rowHeight = input(40, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowHeight" }] : /* istanbul ignore next */ []));
+    /** Enable CDK virtual scroll for large datasets. */
+    virtualScroll = input(false, { ...(ngDevMode ? { debugName: "virtualScroll" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Alternating row shading. */
+    striped = input(false, { ...(ngDevMode ? { debugName: "striped" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Cell border lines. */
+    bordered = input(false, { ...(ngDevMode ? { debugName: "bordered" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Sticky table header on scroll. */
+    stickyHeader = input(true, { ...(ngDevMode ? { debugName: "stickyHeader" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Maximum height of the scrollable table area (e.g. `'28rem'`, `'400px'`). Enables vertical scroll. */
+    maxHeight = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    /** Column group definitions for multi-row headers. */
+    columnGroups = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnGroups" }] : /* istanbul ignore next */ []));
+    /** Enable editable mode on the table. */
+    editable = input(false, { ...(ngDevMode ? { debugName: "editable" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Edit granularity: `'row'` edits entire rows, `'cell'` edits individual cells. */
+    editMode = input('row', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
+    /** Show an "Add row" button in the toolbar when editable. */
+    addRow = input(false, { ...(ngDevMode ? { debugName: "addRow" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Show a loading overlay on top of the table. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Failed-request state. `false` (default) renders normally; `true` renders the
+     * error block with the localized default message; a non-empty string renders
+     * that string as the message.
+     *
+     * While set — and while {@link loading} is falsy — the error block replaces the
+     * table body, taking precedence over both the rows and the `mlvDataTableNoData`
+     * template so a failed request is never mistaken for an empty result set.
+     * Project `<ng-template mlvDataTableError>` to replace the default block.
+     */
+    error = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Row selection mode: `'single'`, `'multi'`, or `false` to disable. */
+    selectable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name for the trailing actions column header (rendered when
+     * {@link editable} is on). The actions `<th>` has no visible label, so this
+     * string is exposed to assistive tech via visually-hidden text to satisfy the
+     * `empty-table-header` requirement. Defaults to `'Actions'`.
+     *
+     * NB: this is a plain English default input rather than a `MLV_DATA_TABLE_I18N`
+     * token entry — adding an i18n string is a follow-up (see `libs-data-table.md`).
+     */
+    actionsHeaderLabel = input('Actions', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionsHeaderLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * **Experimental.** Opt into full cell-level keyboard navigation backed by the
+     * `@angular/aria` grid pattern (`ngGrid`/`ngGridRow`/`ngGridCell`/`ngGridCellWidget`).
+     *
+     * When `false` (default), the table keeps its stable **row-level** roving
+     * navigation (ArrowUp/Down move between rows, Home/End jump, Space/Enter toggle
+     * row selection). When `true`, arrow keys move focus between individual **cells**
+     * (Arrow keys in both axes, Home/End within a row), interactive cells expose an
+     * `ngGridCellWidget` so Enter pauses grid navigation to interact (edit inputs,
+     * action buttons), and Escape returns to grid navigation.
+     *
+     * Limitations of the current prototype (see `libs-data-table.md`):
+     * - **Requires non-virtual mode.** Cell navigation is inert while
+     *   {@link virtualScroll} is `true` — CDK row recycling and the split
+     *   header/body/footer tables are incompatible with the grid's DOM-registered
+     *   cell/row collection. `virtualScroll` wins; the table falls back to
+     *   row-level roving.
+     * - Row selection stays row-level (via the checkbox widget); the aria grid's
+     *   own cell-selection model is intentionally not wired.
+     */
+    cellNavigation = input(false, { ...(ngDevMode ? { debugName: "cellNavigation" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Pagination strategy.
+     * - `'paged'` (default) — renders the classic paginator footer and swaps rows per page.
+     * - `'infinite'` — hides the paginator and emits `loadMore` when the user scrolls near the bottom of the scroll container. Consumers should append the new page's rows to the existing data source.
+     */
+    paginationMode = input('paged', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paginationMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether more data is available to load. Only consulted in `paginationMode: 'infinite'`.
+     * Bind this to the consumer's own "has more pages" flag to stop the directive from
+     * firing once the backing data source has been exhausted.
+     */
+    hasMore = input(true, { ...(ngDevMode ? { debugName: "hasMore" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Distance in px from the bottom of the scrollable area at which `loadMore` fires.
+     * Only consulted in `paginationMode: 'infinite'`. Defaults to `200`.
+     */
+    infiniteScrollThreshold = input(200, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "infiniteScrollThreshold" }] : /* istanbul ignore next */ []));
+    /** Where table-owned filter controls are displayed. */
+    filterDisplay = input('toolbar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterDisplay" }] : /* istanbul ignore next */ []));
+    /** Whether the built-in global-search field is rendered in the toolbar. */
+    showSearch = input(true, { ...(ngDevMode ? { debugName: "showSearch" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Whether global search executes as the user types or only on submit. */
+    searchTrigger = input('live', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchTrigger" }] : /* istanbul ignore next */ []));
+    /** Delay in milliseconds used by live global search. */
+    searchDebounce = input(200, { ...(ngDevMode ? { debugName: "searchDebounce" } : /* istanbul ignore next */ {}), transform: (value) => Math.max(0, numberAttribute(value, 200)) });
+    // ---- Outputs ----------------------------------------------------------------
+    /** Emits when a row enters edit mode. */
+    rowEditStart = output();
+    /** Emits when the user confirms edits on a row. */
+    rowEditSave = output();
+    /** Emits when the user cancels editing a row. */
+    rowEditCancel = output();
+    /** Emits when the user clicks "Add row". Consumer is responsible for adding the row. */
+    rowAdd = output();
+    /** Emits when the user clicks a data row. */
+    rowClick = output();
+    /** Emits when the row selection changes. */
+    selectionChange = output();
+    /**
+     * Emits when the user activates the error block's retry control (the default
+     * "Retry" button, or `retry()` from a custom `mlvDataTableError` template).
+     * The consumer owns the refetch and is responsible for clearing {@link error}.
+     */
+    retry = output();
+    /**
+     * Emits after a pointer or keyboard interaction commits a column width, or
+     * after a reset removes a user width override.
+     */
+    columnResize = output();
+    /**
+     * Emits in `paginationMode: 'infinite'` when the user scrolls near the bottom
+     * of the scroll container. The payload carries the next page number,
+     * current per-page size, and remaining scroll distance.
+     */
+    loadMore = output();
+    /** Two-way bindable set of selected rows. */
+    selectedRows = model(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedRows" }] : /* istanbul ignore next */ []));
+    /** Applied global-search query. Submit-mode drafts are committed here on search. */
+    searchQuery = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    // ---- Content children -------------------------------------------------------
+    cellTemplates = contentChildren(MlvDataTableCell, { ...(ngDevMode ? { debugName: "cellTemplates" } : /* istanbul ignore next */ {}), descendants: true });
+    editCellTemplates = contentChildren(MlvDataTableEditCell, { ...(ngDevMode ? { debugName: "editCellTemplates" } : /* istanbul ignore next */ {}), descendants: true });
+    noDataTemplate = contentChildren(MlvDataTableNoData, { ...(ngDevMode ? { debugName: "noDataTemplate" } : /* istanbul ignore next */ {}), descendants: true });
+    errorTemplate = contentChildren(MlvDataTableError, { ...(ngDevMode ? { debugName: "errorTemplate" } : /* istanbul ignore next */ {}), descendants: true });
+    footerTemplate = contentChildren(MlvDataTableFooter, { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), descendants: true });
+    // ---- View children ----------------------------------------------------------
+    tableWrapperRef = viewChild('tableWrapper', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tableWrapperRef" }] : /* istanbul ignore next */ []));
+    tableRef = viewChild('tableEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tableRef" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Rendered resize separators. Used after rendering to measure
+     * non-pixel CSS widths for accurate initial ARIA values.
+     */
+    _resizeHandleRefs = viewChildren('resizeHandle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resizeHandleRefs" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Toolbar "Filters" trigger button. Focus is returned here when the
+     * filter dialog popup closes, matching the overlay focus-restore pattern.
+     */
+    _filterTriggerRef = viewChild('filterBtn', { ...(ngDevMode ? { debugName: "_filterTriggerRef" } : /* istanbul ignore next */ {}), read: ElementRef });
+    /** @private CDK virtual-scroll viewport (only present in virtual-scroll mode). */
+    _virtualViewportRef = viewChild(CdkVirtualScrollViewport, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_virtualViewportRef" }] : /* istanbul ignore next */ []));
+    // ---- Services ---------------------------------------------------------------
+    /** @private DestroyRef used for observable cleanup. */
+    _destroyRef = inject(DestroyRef);
+    /** @private Shared resize-observer service used to track the host width. */
+    _resizeService = inject(MlvResizeObserverService);
+    /** @private Owning document for pointer fallback listeners and DOM queries. */
+    _document = inject(DOCUMENT);
+    /** @private Host element ref, observed for width and used for row focus queries. */
+    _el = inject(ElementRef);
+    /** @private Injector used to schedule `afterNextRender` from imperative handlers. */
+    _injector = inject(Injector);
+    /** @private Angular zone — column-resize drag listeners run outside it so pointer moves don't trigger a full CD tick per event (see {@link onResizeStart}). */
+    _ngZone = inject(NgZone);
+    /** @private Resolver for ICU parameterized i18n strings. */
+    _resolver = inject(MlvI18nResolverService);
+    /**
+     * @protected Flat-rows index of the data row that currently owns the roving
+     * `tabindex="0"`. All other data rows are `tabindex="-1"`, giving the row grid
+     * a single tab stop. Clamped in a constructor effect when `flatRows` changes.
+     */
+    _focusedRowIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_focusedRowIndex" }] : /* istanbul ignore next */ []));
+    // ---- Internal state ---------------------------------------------------------
+    containerWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerWidth" }] : /* istanbul ignore next */ []));
+    activeFilters = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeFilters" }] : /* istanbul ignore next */ []));
+    /** @protected Search text currently shown in the toolbar, including submit-mode drafts. */
+    _searchDraft = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_searchDraft" }] : /* istanbul ignore next */ []));
+    currentSort = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentSort" }] : /* istanbul ignore next */ []));
+    currentPage = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+    currentPerPage = signal(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentPerPage" }] : /* istanbul ignore next */ []));
+    /** @private Set of currently expanded tree rows (by original row reference). */
+    _expanded = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_expanded" }] : /* istanbul ignore next */ []));
+    /** @private User-resized column widths keyed by column key (px). Committed once per completed pointer drag. */
+    _columnWidths = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_columnWidths" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Live width (px) of the column currently being drag-resized, applied
+     * optimistically during the drag before the committed {@link _columnWidths} map is
+     * updated on pointer release. `null` when no resize is in progress. Kept separate from
+     * {@link _columnWidths} so a move updates a single lightweight signal instead of
+     * cloning the whole widths map every frame.
+     */
+    _liveResize = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_liveResize" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Last DOM-resolved bounds for each resize handle. CSS lengths such
+     * as `rem` can be resolved to pixels from the rendered header during an
+     * interaction and then reused by the separator's ARIA attributes.
+     */
+    _resolvedResizeBounds = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedResizeBounds" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Rendered header widths keyed by column. This supplies accurate
+     * separator values when a column's declared width uses `rem`, `%`, or layout.
+     */
+    _measuredColumnWidths = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_measuredColumnWidths" }] : /* istanbul ignore next */ []));
+    /** @private Rendered widths of the optional selection and actions columns. */
+    _measuredAuxiliaryWidths = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_measuredAuxiliaryWidths" }] : /* istanbul ignore next */ []));
+    /** @protected Native vertical-scrollbar width inside the virtual viewport. */
+    _virtualScrollbarGutter = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_virtualScrollbarGutter" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Inert outer scroll width that reproduces the virtual viewport's
+     * native horizontal range without changing any split table's layout.
+     */
+    _virtualHorizontalScrollExtent = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_virtualHorizontalScrollExtent" }] : /* istanbul ignore next */ []));
+    /** @private Whether table geometry is currently frozen to explicit pixel widths. */
+    _columnLayoutFrozen = computed(() => this._liveResize() !== null || this._columnWidths().size > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_columnLayoutFrozen" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Exact measured utility-column styles used once data columns are
+     * frozen. Keeping selection/actions cells and their `<col>` elements on the
+     * same widths prevents fixed table layout from redistributing data columns.
+     */
+    _auxiliaryColumnStyles = computed(() => {
+        const measured = this._measuredAuxiliaryWidths();
+        if (!this._columnLayoutFrozen()) {
+            return { selection: null, actions: null };
+        }
+        return {
+            selection: this._fixedColumnWidthStyles(measured.selection),
+            actions: this._fixedColumnWidthStyles(measured.actions),
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_auxiliaryColumnStyles" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Per-row cache of the cell-template `ngTemplateOutletContext`, keyed by the
+     * flattened row object identity (see {@link getCellContext}). A `WeakMap` so entries
+     * for rows dropped by a `flatRows()` recompute are reclaimed automatically.
+     */
+    _cellContextCache = new WeakMap();
+    /** @private Stable one-column arrays used by repeated header filter editors. */
+    _columnFilterLists = new Map();
+    /** @private Editing state moved to MlvDataTableEditingService. */
+    _editing = inject((MlvDataTableEditingService));
+    /** @private Column visibility state moved to MlvDataTableColumnVisibilityService. */
+    _visibility = inject(MlvDataTableColumnVisibilityService);
+    /** @private Pin override state moved to MlvDataTablePinningService. */
+    _pinning = inject(MlvDataTablePinningService);
+    // ---- Derived state ----------------------------------------------------------
+    effectiveDataSource = computed(() => {
+        const d = this.data();
+        if (d instanceof MlvDataSource) {
+            return d;
+        }
+        const rows = Array.isArray(d) ? d : [];
+        return new MlvArrayDataSource(rows);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDataSource" }] : /* istanbul ignore next */ []));
+    displayRows = computed(() => {
+        const ds = this.effectiveDataSource();
+        return ds.connect()();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayRows" }] : /* istanbul ignore next */ []));
+    flatRows = computed(() => {
+        const rows = this.displayRows();
+        const expanded = this._expanded();
+        return flattenRows(rows, expanded);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flatRows" }] : /* istanbul ignore next */ []));
+    totalItems = computed(() => this.effectiveDataSource().totalItems(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
+    shownItems = computed(() => this.flatRows().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shownItems" }] : /* istanbul ignore next */ []));
+    visibleColumns = computed(() => {
+        const cols = this.columns();
+        const containerW = this.containerWidth();
+        const widths = this._columnWidths();
+        const live = this._liveResize();
+        const measured = this._measuredColumnWidths();
+        const freezeLayout = this._columnLayoutFrozen();
+        const pinOverrides = this._pinning.overrides();
+        const hidden = this._visibility.hiddenColumns();
+        return cols
+            .map((col) => {
+            const visible = isColumnVisible(col, containerW);
+            // During a drag the live width wins over the committed map value so the
+            // column tracks the pointer before the map is updated on pointer release.
+            const w = live && live.key === col.key ? live.width : widths.get(col.key);
+            const override = pinOverrides.get(col.key);
+            return {
+                ...col,
+                pinned: override ? override.pinned : col.pinned,
+                pinSide: override ? override.pinSide : col.pinSide,
+                _currentWidth: w ??
+                    (freezeLayout
+                        ? (measured.get(col.key) ?? parsePixelWidth(col.width))
+                        : undefined),
+                _visible: visible,
+            };
+        })
+            .filter((c) => c._visible !== false && !hidden.has(c.key))
+            .sort((a, b) => {
+            const order = (col) => {
+                if (col.pinned && col.pinSide !== 'right')
+                    return 0;
+                if (!col.pinned)
+                    return 1;
+                return 2; // pinned right
+            };
+            return order(a) - order(b);
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
+    pinnedLeftColumns = computed(() => this.visibleColumns().filter((c) => c.pinned && c.pinSide !== 'right'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pinnedLeftColumns" }] : /* istanbul ignore next */ []));
+    pinnedRightColumns = computed(() => this.visibleColumns().filter((c) => c.pinned && c.pinSide === 'right'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pinnedRightColumns" }] : /* istanbul ignore next */ []));
+    columnOffsets = computed(() => {
+        const map = new Map();
+        const leftWidths = [];
+        for (const col of this.pinnedLeftColumns()) {
+            map.set(col.key + '_left', this._sumCssLengths(leftWidths));
+            leftWidths.push(this._columnOffsetWidth(col));
+        }
+        const rightWidths = [];
+        const rightCols = [...this.pinnedRightColumns()].reverse();
+        for (const col of rightCols) {
+            map.set(col.key + '_right', this._sumCssLengths(rightWidths));
+            rightWidths.push(this._columnOffsetWidth(col));
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnOffsets" }] : /* istanbul ignore next */ []));
+    /**
+     * Exact table width used while at least one column has a live or committed
+     * user override. Freezing every measured column and the table to the same
+     * pixel sum prevents `width: 100%` table layout from redistributing the
+     * committed width. All virtual split tables and their viewport consume this
+     * same value.
+     */
+    resizedTableWidth = computed(() => {
+        if (!this._columnLayoutFrozen())
+            return null;
+        const measured = this._measuredColumnWidths();
+        const auxiliary = this._measuredAuxiliaryWidths();
+        let total = 0;
+        for (const col of this.visibleColumns()) {
+            total +=
+                col._currentWidth ??
+                    measured.get(col.key) ??
+                    parsePixelWidth(col.width) ??
+                    DEFAULT_COLUMN_WIDTH;
+        }
+        if (this.selectable()) {
+            total += auxiliary.selection ?? DEFAULT_SELECTION_COLUMN_WIDTH;
+        }
+        if (this.editable()) {
+            total += auxiliary.actions ?? DEFAULT_ACTIONS_COLUMN_WIDTH;
+        }
+        return this._roundColumnWidth(total);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizedTableWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Memoized inline `[style]` object per visible column, keyed by column key.
+     * Rebuilt only when {@link visibleColumns} or {@link columnOffsets} change (width /
+     * pin / visibility / responsive / live-resize changes). Cell `[style]` bindings read
+     * this map through {@link getCellStyle} so they receive a *stable* object reference
+     * across change-detection cycles instead of a freshly allocated `Record` per cell per
+     * CD; the header and body cells of a column share one object.
+     */
+    _columnStyles = computed(() => {
+        const offsets = this.columnOffsets();
+        const map = new Map();
+        for (const col of this.visibleColumns()) {
+            map.set(col.key, columnCellStyles(col, offsets));
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_columnStyles" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Display cell templates resolved to a `Map<columnKey, TemplateRef>`, rebuilt
+     * only when the projected {@link cellTemplates} set changes. Replaces a per-cell
+     * `Array.find()` on every CD ({@link getTemplate}). First registration wins for
+     * duplicate keys, preserving the previous `find()` (first-match) semantics.
+     */
+    _cellTemplateMap = computed(() => {
+        const map = new Map();
+        for (const t of this.cellTemplates()) {
+            const key = t.columnKey();
+            if (!map.has(key))
+                map.set(key, t.templateRef);
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_cellTemplateMap" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Edit-mode cell templates resolved to a `Map<columnKey, TemplateRef>`,
+     * rebuilt only when the projected {@link editCellTemplates} set changes. Replaces a
+     * per-cell `Array.find()` on every CD ({@link getEditTemplate}). First registration
+     * wins for duplicate keys.
+     */
+    _editCellTemplateMap = computed(() => {
+        const map = new Map();
+        for (const t of this.editCellTemplates()) {
+            const key = t.columnKey();
+            if (!map.has(key))
+                map.set(key, t.templateRef);
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_editCellTemplateMap" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Whether the experimental aria cell-level grid navigation is
+     * active. Gated to non-virtual mode: `virtualScroll` recycles rows out of the
+     * DOM, which the aria grid's DOM-registered row/cell collection cannot track,
+     * so cell navigation yields to the stable row-roving path when virtual scroll
+     * is on.
+     */
+    _cellNav = computed(() => this.cellNavigation() && !this.virtualScroll(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_cellNav" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the error block replaces the table body. An in-flight refetch wins:
+     * while `loading` is truthy the previous error is suppressed so the loader is
+     * not competing with a stale failure message.
+     */
+    showError = computed(() => {
+        const error = this.error();
+        if (this.loading())
+            return false;
+        return typeof error === 'string' ? error.trim().length > 0 : error === true;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    /**
+     * Message rendered by the error block: the `error` string when one was
+     * supplied, otherwise the localized `errorMessage` default.
+     */
+    errorMessage = computed(() => {
+        const error = this.error();
+        return typeof error === 'string' && error.trim().length > 0
+            ? error
+            : this._i18n().errorMessage;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Stable `retry()` callback handed to the `mlvDataTableError`
+     * template context, so the context object identity only changes with the
+     * message.
+     */
+    _emitRetry = () => this.onRetry();
+    /**
+     * @protected `ngTemplateOutletContext` for a projected `mlvDataTableError`
+     * template.
+     */
+    _errorContext = computed(() => ({
+        $implicit: this.errorMessage(),
+        retry: this._emitRetry,
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_errorContext" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Per-column raw-value → label lookup, memoized from
+     * `visibleColumns()`. Falls back to `filterConfig.options` when a column
+     * declares no explicit `valueLabels`. Keys are stringified raw values.
+     */
+    _columnValueLabels = computed(() => {
+        const map = new Map();
+        for (const col of this.visibleColumns()) {
+            const source = col.valueLabels ?? col.filterConfig?.options;
+            if (!source)
+                continue;
+            const labels = new Map();
+            if (Array.isArray(source)) {
+                for (const option of source) {
+                    labels.set(String(option.value), option.label);
+                }
+            }
+            else {
+                for (const [value, label] of Object.entries(source)) {
+                    labels.set(value, label);
+                }
+            }
+            if (labels.size > 0)
+                map.set(col.key, labels);
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_columnValueLabels" }] : /* istanbul ignore next */ []));
+    hasFilters = computed(() => this.activeFilters().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasFilters" }] : /* istanbul ignore next */ []));
+    /** Columns included in the global query, independent of responsive visibility. */
+    searchableColumns = computed(() => this.columns().filter((column) => column.searchable), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchableColumns" }] : /* istanbul ignore next */ []));
+    /** Stable key list passed to the data source for OR-across-columns search. */
+    searchableColumnKeys = computed(() => this.searchableColumns().map((column) => column.key), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchableColumnKeys" }] : /* istanbul ignore next */ []));
+    /** Whether a global search field belongs in the toolbar. */
+    hasSearchableColumns = computed(() => this.searchableColumns().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSearchableColumns" }] : /* istanbul ignore next */ []));
+    /** Whether any configured column supports filtering. */
+    hasFilterableColumns = computed(() => this.columns().some((column) => column.filterable), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasFilterableColumns" }] : /* istanbul ignore next */ []));
+    /** Localized active-filter summary announced when the committed set changes. */
+    activeFilterLabel = computed(() => this._resolver.resolve(this._i18n(), 'activeFilterCount', { count: this.activeFilters().length }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeFilterLabel" }] : /* istanbul ignore next */ []));
+    /** Total number of rendered columns (visible + selection checkbox + actions). */
+    totalColumnCount = computed(() => {
+        let count = this.visibleColumns().length;
+        if (this.selectable())
+            count++;
+        if (this.editable())
+            count++;
+        return count;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalColumnCount" }] : /* istanbul ignore next */ []));
+    /**
+     * Pixel/CSS height applied to the `cdk-virtual-scroll-viewport` when `virtualScroll` is on.
+     * Falls back to `'24rem'` if `maxHeight` is not provided. The viewport requires an explicit
+     * height because `cdk-virtual-scroll-viewport` does not derive its size from its content.
+     */
+    virtualViewportHeight = computed(() => this.maxHeight() ?? '24rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualViewportHeight" }] : /* istanbul ignore next */ []));
+    /** Whether any column has `hideable: true`. */
+    hasHideableColumns = computed(() => this.columns().some((c) => c.hideable), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasHideableColumns" }] : /* istanbul ignore next */ []));
+    /** Whether the toolbar has a visible control or table-owned status to render. */
+    hasToolbarContent = computed(() => (this.showSearch() && this.hasSearchableColumns()) ||
+        (this.filterDisplay() !== 'none' && this.hasFilters()) ||
+        (this.editable() && this.addRow()) ||
+        this.hasHideableColumns() ||
+        (this.filterDisplay() === 'toolbar' && this.hasFilterableColumns()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasToolbarContent" }] : /* istanbul ignore next */ []));
+    /** All columns (for column visibility popup). */
+    allColumns = computed(() => this.columns(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allColumns" }] : /* istanbul ignore next */ []));
+    /** Whether all visible rows are selected. */
+    allRowsSelected = computed(() => {
+        const rows = this.flatRows();
+        const selected = this.selectedRows();
+        return rows.length > 0 && rows.every((r) => selected.has(this._ref(r)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allRowsSelected" }] : /* istanbul ignore next */ []));
+    /** Whether some (but not all) rows are selected. */
+    someRowsSelected = computed(() => {
+        const rows = this.flatRows();
+        const selected = this.selectedRows();
+        const count = rows.filter((r) => selected.has(this._ref(r))).length;
+        return count > 0 && count < rows.length;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "someRowsSelected" }] : /* istanbul ignore next */ []));
+    /** Whether the table has multi-row column groups defined. */
+    hasColumnGroups = computed(() => this.columnGroups().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasColumnGroups" }] : /* istanbul ignore next */ []));
+    /**
+     * Computes the group header row layout.
+     * Columns covered by a group get colspan in the group row.
+     * Standalone columns (not in any group) get rowspan="2" in the main header row.
+     */
+    headerLayout = computed(() => {
+        const groups = this.columnGroups();
+        const visible = this.visibleColumns();
+        if (groups.length === 0)
+            return null;
+        const groupedKeys = new Set(groups.flatMap((g) => g.columns));
+        // Build group header cells
+        const groupCells = [];
+        const standaloneKeys = new Set();
+        // Track which visible columns belong to which group
+        let colIndex = 0;
+        while (colIndex < visible.length) {
+            const col = visible[colIndex];
+            const group = groups.find((g) => g.columns.includes(col.key));
+            if (group) {
+                // Count how many consecutive visible columns belong to this group
+                const span = visible.filter((c) => group.columns.includes(c.key)).length;
+                groupCells.push({ type: 'group', group, colspan: span });
+                // Skip all columns in this group
+                colIndex += span;
+            }
+            else {
+                standaloneKeys.add(col.key);
+                colIndex++;
+            }
+        }
+        return { groupCells, standaloneKeys, groupedKeys };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerLayout" }] : /* istanbul ignore next */ []));
+    // ---- Lifecycle --------------------------------------------------------------
+    constructor() {
+        // Detach any in-flight column-resize drag listeners if the table is destroyed
+        // mid-drag (e.g. a route change while the user is resizing a column) so the dead
+        // component's document listeners can't keep firing.
+        this._destroyRef.onDestroy(() => this._cleanupResize());
+        effect(() => {
+            const ds = this.effectiveDataSource();
+            ds.setSort(this.currentSort());
+        });
+        effect(() => {
+            const ds = this.effectiveDataSource();
+            const filters = this.activeFilters();
+            ds.setFilters(filters);
+            untracked(() => {
+                if (this.currentPage() !== 1)
+                    this.currentPage.set(1);
+            });
+        });
+        effect(() => {
+            const ds = this.effectiveDataSource();
+            const query = this.searchQuery();
+            const keys = this.searchableColumnKeys();
+            ds.setSearch(query.trim() && keys.length ? { query, keys } : null);
+            untracked(() => {
+                if (this._searchDraft() !== query)
+                    this._searchDraft.set(query);
+                if (this.currentPage() !== 1)
+                    this.currentPage.set(1);
+            });
+        });
+        effect(() => {
+            const ds = this.effectiveDataSource();
+            // In infinite or virtual-scroll mode the consumer hands over the entire
+            // row set up front, so the internal data source must stay on page 1 at
+            // all times — pagination is disabled in both modes.
+            const unpaged = this.paginationMode() === 'infinite' || this.virtualScroll();
+            ds.setPage(unpaged ? 1 : this.currentPage());
+        });
+        effect(() => {
+            const ds = this.effectiveDataSource();
+            // In infinite or virtual-scroll mode disable internal per-page slicing
+            // so every row the consumer has provided gets rendered. Virtual scroll
+            // then renders only the visible slice of that full list via CDK.
+            const unpaged = this.paginationMode() === 'infinite' || this.virtualScroll();
+            ds.setPerPage(unpaged ? Number.MAX_SAFE_INTEGER : this.currentPerPage());
+        });
+        // Keep the roving row index in range as the visible rows change
+        // (filtering, sorting, paging, tree expand/collapse, data replacement).
+        effect(() => {
+            const count = this.flatRows().length;
+            const current = untracked(this._focusedRowIndex);
+            if (count === 0) {
+                if (current !== 0)
+                    this._focusedRowIndex.set(0);
+            }
+            else if (current > count - 1) {
+                this._focusedRowIndex.set(count - 1);
+            }
+        });
+        effect(() => {
+            const handles = this._resizeHandleRefs();
+            if (!handles.length)
+                return;
+            afterNextRender(() => this._measureHeaderWidths(), {
+                injector: this._injector,
+            });
+        });
+        effect((onCleanup) => {
+            if (!this.virtualScroll())
+                return;
+            const wrapper = this.tableWrapperRef()?.nativeElement;
+            const viewport = this._virtualViewportRef()?.elementRef.nativeElement;
+            if (!wrapper || !viewport)
+                return;
+            let synchronizing = false;
+            const measureVirtualGeometry = () => {
+                this._updateVirtualScrollGeometry(wrapper, viewport);
+            };
+            const syncFromWrapper = () => {
+                if (synchronizing || viewport.scrollLeft === wrapper.scrollLeft)
+                    return;
+                synchronizing = true;
+                try {
+                    viewport.scrollLeft = wrapper.scrollLeft;
+                }
+                finally {
+                    synchronizing = false;
+                }
+            };
+            const syncFromViewport = () => {
+                if (synchronizing || wrapper.scrollLeft === viewport.scrollLeft)
+                    return;
+                synchronizing = true;
+                try {
+                    wrapper.scrollLeft = viewport.scrollLeft;
+                    const acceptedScrollLeft = wrapper.scrollLeft;
+                    if (viewport.scrollLeft !== acceptedScrollLeft) {
+                        viewport.scrollLeft = acceptedScrollLeft;
+                    }
+                }
+                finally {
+                    synchronizing = false;
+                }
+            };
+            this._ngZone.runOutsideAngular(() => {
+                wrapper.addEventListener('scroll', syncFromWrapper, {
+                    passive: true,
+                });
+                viewport.addEventListener('scroll', syncFromViewport, {
+                    passive: true,
+                });
+                measureVirtualGeometry();
+                syncFromWrapper();
+            });
+            const viewportResize = this._resizeService
+                .observe(viewport)
+                .subscribe(() => {
+                measureVirtualGeometry();
+                syncFromWrapper();
+            });
+            onCleanup(() => {
+                wrapper.removeEventListener('scroll', syncFromWrapper);
+                viewport.removeEventListener('scroll', syncFromViewport);
+                viewportResize.unsubscribe();
+            });
+        });
+        effect(() => {
+            if (!this.virtualScroll())
+                return;
+            this.resizedTableWidth();
+            this.visibleColumns();
+            this._virtualScrollbarGutter();
+            afterNextRender(() => this._syncVirtualHorizontalScroll(), {
+                injector: this._injector,
+            });
+        });
+        afterNextRender(() => {
+            const el = this._el.nativeElement;
+            this._resizeService
+                .observe(el)
+                .pipe(takeUntilDestroyed(this._destroyRef))
+                .subscribe((entries) => {
+                const width = entries[0]?.contentRect?.width ?? el.offsetWidth;
+                this.containerWidth.set(width);
+                afterNextRender(() => this._measureHeaderWidths(), {
+                    injector: this._injector,
+                });
+            });
+            this.containerWidth.set(el.offsetWidth);
+            this._measureHeaderWidths();
+        });
+    }
+    // ---- Template helpers -------------------------------------------------------
+    /** Resolves the custom display template for a column key (if any). */
+    getTemplate(key) {
+        return this._cellTemplateMap().get(key) ?? null;
+    }
+    getNoDataTemplate() {
+        const list = this.noDataTemplate();
+        return list.length > 0 ? list[0].templateRef : null;
+    }
+    /**
+     * `ngTemplateOutletContext` for a data cell's custom/edit template. Returns a
+     * *stable* per-row object so the outlet's context does not churn (fresh object +
+     * `NgTemplateOutlet.ngOnChanges`) every change-detection cycle. `flatRows()` rebuilds
+     * its row objects on every data / sort / filter / expand change, so a cached entry's
+     * `index` always matches that row's current position and stale entries (whose row
+     * objects are no longer referenced) are garbage-collected.
+     */
+    getCellContext(row, index) {
+        let ctx = this._cellContextCache.get(row);
+        if (!ctx) {
+            ctx = { $implicit: row, row, index };
+            this._cellContextCache.set(row, ctx);
+        }
+        return ctx;
+    }
+    getCellValue(row, key) {
+        return row[key];
+    }
+    /**
+     * Value rendered by the **default** cell renderer. Maps the raw value through
+     * the column's `valueLabels` (or its `filterConfig.options` fallback) when a
+     * label exists; otherwise returns the raw value unchanged. Custom
+     * `mlvDataTableCell` templates bypass this entirely.
+     */
+    getCellDisplayValue(row, col) {
+        const raw = this.getCellValue(row, col.key);
+        if (raw === null || raw === undefined)
+            return raw;
+        const labels = this._columnValueLabels().get(col.key);
+        if (!labels)
+            return raw;
+        return labels.get(String(raw)) ?? raw;
+    }
+    /**
+     * Resolves the semantic tone for one default-rendered cell. Returns `null`
+     * when the column declares no `tone` (or its resolver opted this row out), in
+     * which case the cell renders as plain text instead of a badge.
+     */
+    getCellTone(row, col) {
+        const tone = col.tone;
+        if (!tone)
+            return null;
+        if (typeof tone === 'function') {
+            return tone(row) ?? null;
+        }
+        return tone;
+    }
+    /** Retrieves the projected error template, if the consumer supplied one. */
+    getErrorTemplate() {
+        const list = this.errorTemplate();
+        return list.length > 0 ? list[0].templateRef : null;
+    }
+    /** Emits `retry` so the consumer can refetch the failed request. */
+    onRetry() {
+        this.retry.emit();
+    }
+    /** Resolves the edit-mode template for a column key (if any). */
+    getEditTemplate(key) {
+        return this._editCellTemplateMap().get(key) ?? null;
+    }
+    /** Whether a given row index is currently being edited. */
+    isEditing(index) {
+        return this._editing.isEditing(index);
+    }
+    /** Enter edit mode for a row. Clones the row for rollback. */
+    startEdit(row, index) {
+        this._editing.start(row, index);
+        this.rowEditStart.emit({ row, index });
+    }
+    /** Confirm edits for a row. Emits save event with original and modified row. */
+    saveEdit(row, index) {
+        const originalRow = this._editing.save(row, index);
+        this.rowEditSave.emit({ row, index, originalRow });
+    }
+    /** Cancel editing. Emits cancel event. */
+    cancelEdit(row, index) {
+        this._editing.cancel(index);
+        this.rowEditCancel.emit({ row, index });
+    }
+    /** Emit add-row event. Consumer is responsible for appending the new row. */
+    onAddRow() {
+        this.rowAdd.emit();
+    }
+    // ---- Row click ---------------------------------------------------------------
+    /** Handle click on a data row. */
+    onRowClick(row, index, event) {
+        this._focusedRowIndex.set(index);
+        this.rowClick.emit({ row, index, event });
+    }
+    // ---- Row keyboard navigation (grid row-focus model) --------------------------
+    /**
+     * @protected Roving tabindex for a data row: `0` for the focused row, `-1`
+     * otherwise, so the row grid exposes a single tab stop.
+     */
+    _rowTabIndex(index) {
+        return index === this._focusedRowIndex() ? 0 : -1;
+    }
+    /**
+     * @protected Sync the roving row index when a row receives focus (via Tab or
+     * a click that focuses the `<tr>`).
+     */
+    _onRowFocus(index) {
+        this._focusedRowIndex.set(index);
+    }
+    /**
+     * @protected Row-level keyboard navigation for the `role="grid"` table.
+     * Active only when the `<tr>` itself holds focus — keys originating from an
+     * interactive cell widget (checkbox, button, edit input) are left alone.
+     *
+     * - `ArrowUp` / `ArrowDown` — move row focus by one (clamped)
+     * - `Home` / `End` — jump to the first / last row
+     * - `Space` / `Enter` — toggle selection of the focused row when selectable
+     */
+    _onRowKeydown(index, row, event) {
+        if (event.target !== event.currentTarget)
+            return;
+        const lastIndex = this.flatRows().length - 1;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this._moveRowFocus(Math.min(index + 1, lastIndex));
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this._moveRowFocus(Math.max(index - 1, 0));
+                break;
+            case 'Home':
+                event.preventDefault();
+                this._moveRowFocus(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this._moveRowFocus(lastIndex);
+                break;
+            case ' ':
+            case 'Enter':
+                if (this.selectable()) {
+                    event.preventDefault();
+                    this.toggleRowSelection(row);
+                }
+                break;
+        }
+    }
+    /**
+     * @private Move the roving tabindex and DOM focus to the row at `targetIndex`.
+     * In virtual-scroll mode the target may be recycled out of the DOM, so it is
+     * scrolled into view first and focused after the next render.
+     */
+    _moveRowFocus(targetIndex) {
+        if (targetIndex < 0)
+            return;
+        this._focusedRowIndex.set(targetIndex);
+        if (this.virtualScroll()) {
+            this._virtualViewportRef()?.scrollToIndex(targetIndex, 'smooth');
+        }
+        afterNextRender(() => this._focusRowElement(targetIndex), {
+            injector: this._injector,
+        });
+    }
+    /** @private Focus the rendered `<tr>` for the given flat-rows index, if present. */
+    _focusRowElement(index) {
+        const host = this._el.nativeElement;
+        const rowEl = host.querySelector(`[data-row-index="${index}"]`);
+        rowEl?.focus();
+    }
+    // ---- Infinite scroll ---------------------------------------------------------
+    /**
+     * Handler wired to `MlvInfiniteScroll.loadMore` when `paginationMode === 'infinite'`.
+     * Increments the tracked page counter and emits a table-level `MlvLoadMoreEvent`
+     * whose `page` field tells the consumer which page to fetch next.
+     */
+    onInfiniteScrollLoadMore(trigger) {
+        const nextPage = this.currentPage() + 1;
+        this.currentPage.set(nextPage);
+        this.loadMore.emit({
+            page: nextPage,
+            perPage: this.currentPerPage(),
+            distance: trigger.distance,
+        });
+    }
+    // ---- Row selection -----------------------------------------------------------
+    /** Whether a specific row is currently selected. */
+    isRowSelected(row) {
+        return this.selectedRows().has(this._ref(row));
+    }
+    /** Toggle selection for a single row. */
+    toggleRowSelection(row) {
+        const ref = this._ref(row);
+        const current = this.selectedRows();
+        const next = new Set(current);
+        const mode = this.selectable();
+        if (mode === 'single') {
+            if (next.has(ref)) {
+                next.clear();
+            }
+            else {
+                next.clear();
+                next.add(ref);
+            }
+        }
+        else if (mode === 'multi') {
+            if (next.has(ref)) {
+                next.delete(ref);
+            }
+            else {
+                next.add(ref);
+            }
+        }
+        this.selectedRows.set(next);
+        this.selectionChange.emit({ selectedRows: next, row: ref });
+    }
+    /** Toggle select-all / deselect-all. */
+    toggleSelectAll() {
+        const rows = this.flatRows();
+        const allSelected = this.allRowsSelected();
+        const next = new Set();
+        if (!allSelected) {
+            for (const row of rows) {
+                next.add(this._ref(row));
+            }
+        }
+        this.selectedRows.set(next);
+        this.selectionChange.emit({ selectedRows: next });
+    }
+    // ---- Column visibility -------------------------------------------------------
+    /** Whether a column is currently hidden by the user. */
+    isColumnHidden(key) {
+        return this._visibility.isHidden(key);
+    }
+    /** Toggle visibility of a hideable column. */
+    toggleColumnVisibility(key) {
+        this._visibility.toggle(key);
+    }
+    /**
+     * @protected Returns focus to the toolbar "Filters" trigger when the filter
+     * dialog popup closes (Apply / Clear / Escape / backdrop), so keyboard focus
+     * is never stranded on a destroyed overlay control.
+     */
+    _onFiltersClosed() {
+        this._filterTriggerRef()?.nativeElement.focus();
+    }
+    /** Commits a search-field event and resets table pagination. */
+    onSearch(query) {
+        this.searchQuery.set(query);
+        this.currentPage.set(1);
+    }
+    /** Whether a column currently has a committed filter. */
+    isColumnFiltered(key) {
+        return this.activeFilters().some((filter) => filter.key === key);
+    }
+    /** Accessible label for a column filter trigger. */
+    getFilterLabel(col) {
+        return this._resolver.resolve(this._i18n(), this.isColumnFiltered(col.key) ? 'filterColumnActive' : 'filterColumn', { column: col.title ?? col.key });
+    }
+    /**
+     * Merges a scoped editor result against the table's current committed state.
+     * The table remains authoritative here because an overlay may hold an older
+     * input snapshot while another column is committed.
+     */
+    onColumnFiltersChange(key, scopedFilters) {
+        this.activeFilters.update((current) => [
+            ...current.filter((filter) => filter.key !== key),
+            ...scopedFilters
+                .filter((filter) => filter.key === key)
+                .map((filter) => ({
+                ...filter,
+                value: Array.isArray(filter.value) ? [...filter.value] : filter.value,
+            })),
+        ]);
+    }
+    /** Single-column list consumed by the scoped filter editor. */
+    getColumnFilterColumns(col) {
+        const cached = this._columnFilterLists.get(col.key);
+        if (cached?.[0] === col)
+            return cached;
+        const next = [col];
+        this._columnFilterLists.set(col.key, next);
+        return next;
+    }
+    /** Restores focus to the header filter trigger for a popup that just closed. */
+    focusColumnFilterTrigger(key) {
+        const host = this._el.nativeElement;
+        const triggers = host.querySelectorAll('.mlv-data-table__column-filter');
+        for (const trigger of triggers) {
+            if (trigger.dataset['columnKey'] === key) {
+                trigger.focus();
+                return;
+            }
+        }
+    }
+    // ---- Footer template ----------------------------------------------------------
+    /** Retrieves the footer summary template. */
+    getFooterTemplate() {
+        const list = this.footerTemplate();
+        return list.length > 0 ? list[0].templateRef : null;
+    }
+    // ---- Pin/Unpin ---------------------------------------------------------------
+    /**
+     * Returns the list of sides the user may pin a column to, based on `col.pinnable`.
+     * - `true` → `['left', 'right']`
+     * - `'left'` / `'right'` → single-element list
+     * - `MlvPinSide[]` → the list as provided (duplicates preserved by caller)
+     * - falsy → `[]` (not user-pinnable)
+     */
+    getPinnableSides(col) {
+        return this._pinning.getPinnableSides(col);
+    }
+    /** Pin a column to the given side, or unpin if it is already pinned. */
+    togglePin(col, side = 'left') {
+        this._pinning.togglePin(col, side);
+    }
+    /** Pin a column to a specific side, overriding any current pin state. */
+    pinTo(col, side) {
+        this._pinning.pinTo(col, side);
+    }
+    /** Explicitly unpin a column, regardless of its current side. */
+    unpin(col) {
+        this._pinning.unpin(col);
+    }
+    /** Whether a column is currently pinned (accounting for overrides). */
+    isColumnPinned(col) {
+        return this._pinning.isPinned(col);
+    }
+    /** Returns the current pin side for a column (considering overrides), or `null` if it is not pinned. */
+    getColumnPinSide(col) {
+        return this._pinning.getPinSide(col);
+    }
+    isRowExpanded(row) {
+        return this._expanded().has(this._ref(row));
+    }
+    hasChildren(row) {
+        const original = this._ref(row);
+        return (Array.isArray(original['_mlvChildren']) &&
+            original['_mlvChildren'].length > 0);
+    }
+    getDepth(row) {
+        return row['_mlvDepth'] ?? 0;
+    }
+    toggleExpand(row, event) {
+        event.stopPropagation();
+        const original = this._ref(row);
+        const current = this._expanded();
+        const next = new Set(current);
+        if (next.has(original)) {
+            next.delete(original);
+        }
+        else {
+            next.add(original);
+        }
+        this._expanded.set(next);
+    }
+    // ---- Sorting ----------------------------------------------------------------
+    onSortClick(col) {
+        if (!col.sortable)
+            return;
+        const current = this.currentSort();
+        if (!current || current.key !== col.key) {
+            this.currentSort.set({ key: col.key, direction: 'asc' });
+        }
+        else if (current.direction === 'asc') {
+            this.currentSort.set({ key: col.key, direction: 'desc' });
+        }
+        else {
+            this.currentSort.set(null);
+        }
+        this.currentPage.set(1);
+    }
+    getSortDirection(col) {
+        const s = this.currentSort();
+        return s && s.key === col.key ? s.direction : null;
+    }
+    /**
+     * Accessible label for a sortable column header button. Resolves the
+     * `sortByColumn` ICU string ("Sort by {column}") — describing intent rather
+     * than a mouse-specific "click to sort" instruction.
+     */
+    getSortLabel(col) {
+        return this._resolver.resolve(this._i18n(), 'sortByColumn', { column: col.title ?? col.key });
+    }
+    // ---- Column styles ----------------------------------------------------------
+    getColStyle(col) {
+        return columnWidthStyles(col);
+    }
+    /**
+     * Returns the value to apply to a `<col>` element's `width` style.
+     * Used by the shared `<colgroup>` template to keep column widths in sync between the
+     * three split tables in virtual scroll mode (header / body / footer).
+     */
+    getColWidth(col) {
+        if (col._currentWidth !== undefined)
+            return col._currentWidth + 'px';
+        if (col.width)
+            return col.width;
+        return null;
+    }
+    /** Exact frozen width styles for a selection or actions utility column. */
+    getAuxiliaryColumnStyle(kind) {
+        return this._auxiliaryColumnStyles()[kind];
+    }
+    /** Exact frozen `<col>` width for a selection or actions utility column. */
+    getAuxiliaryColumnWidth(kind) {
+        return this._auxiliaryColumnStyles()[kind]?.['width'] ?? null;
+    }
+    /**
+     * trackBy used by `*cdkVirtualFor` in virtual scroll mode. Falls back to the row index
+     * for plain row references and to `_mlvRef` identity for tree rows so expanded children
+     * are reconciled correctly when the user scrolls.
+     */
+    trackByRow = (index, row) => {
+        return row['_mlvRef'] ?? index;
+    };
+    /**
+     * Inline `[style]` object (width / min-width, plus sticky offsets for pinned columns)
+     * for a column's header and body cells. Reads the memoized {@link _columnStyles} map
+     * so the returned reference is stable across change-detection cycles (no per-cell
+     * allocation). Every visible column is present in the map; the on-the-fly fallback is
+     * a defensive path for a column outside the current visible set.
+     */
+    getCellStyle(col) {
+        return (this._columnStyles().get(col.key) ??
+            columnCellStyles(col, this.columnOffsets()));
+    }
+    getAlignClass(col) {
+        return col.align ? `mlv-data-table__cell--align-${col.align}` : '';
+    }
+    // ---- Column resize ----------------------------------------------------------
+    /**
+     * @private In-flight pointer resize state. The originating pointer id prevents
+     * secondary touches or unrelated pointers from moving or ending the drag.
+     */
+    _resizeState = null;
+    /**
+     * @private rAF handle coalescing live-width signal writes to one per frame
+     * during a pointer drag.
+     */
+    _resizeRafId = 0;
+    /**
+     * @private Bound pointer-move handler retained so add/removeEventListener use
+     * the same function reference.
+     */
+    _onResizeMoveBound = (event) => {
+        this._onResizeMove(event);
+    };
+    /**
+     * @private Bound pointer-up handler retained so add/removeEventListener use
+     * the same function reference.
+     */
+    _onResizeEndBound = (event) => {
+        this._onResizeEnd(event);
+    };
+    /**
+     * @private Bound pointer-cancel handler. Cancellation restores the previously
+     * committed width and never emits a commit event.
+     */
+    _onResizeCancelBound = (event) => {
+        this._onResizeCancel(event);
+    };
+    /**
+     * @private Cancels an active drag if the browser unexpectedly revokes the
+     * initiating handle's pointer capture.
+     */
+    _onResizeLostCaptureBound = (event) => {
+        this._onResizeLostCapture(event);
+    };
+    /**
+     * Starts a column resize with Pointer Events and captures the initiating
+     * pointer on the separator. The rendered header width is measured instead of
+     * trusting the declared CSS width, so `rem`, `%`, and flex/table layout widths
+     * begin without a jump.
+     */
+    onResizeStart(col, event) {
+        if (event.button !== 0 || this._resizeState)
+            return;
+        const target = event.currentTarget;
+        if (!(target instanceof HTMLElement))
+            return;
+        event.preventDefault();
+        this._measureHeaderWidths();
+        const bounds = this._resolveColumnResizeBounds(col, target);
+        this._cacheColumnResizeBounds(col.key, bounds);
+        const startWidth = this._clampColumnWidth(this._measureHeaderWidth(col, target), bounds);
+        this._resizeState = {
+            key: col.key,
+            pointerId: event.pointerId,
+            target,
+            startX: event.clientX,
+            startWidth,
+            latestWidth: startWidth,
+            moved: false,
+            ...bounds,
+        };
+        this._ngZone.runOutsideAngular(() => {
+            this._document.addEventListener('pointermove', this._onResizeMoveBound);
+            this._document.addEventListener('pointerup', this._onResizeEndBound);
+            this._document.addEventListener('pointercancel', this._onResizeCancelBound);
+            target.addEventListener('lostpointercapture', this._onResizeLostCaptureBound);
+            if (typeof target.setPointerCapture === 'function') {
+                try {
+                    target.setPointerCapture(event.pointerId);
+                }
+                catch {
+                    // Document listeners preserve drag/end behavior when capture is
+                    // unavailable, rejected, or exercised by a synthetic event.
+                }
+            }
+        });
+    }
+    /**
+     * Handles keyboard resizing for the focusable separator. ArrowLeft/ArrowRight
+     * use an 8px step (32px with Shift); Home/End jump to the resolved bounds.
+     */
+    onColumnResizeKeydown(col, event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.resetColumnWidth(col.key);
+            return;
+        }
+        const supported = event.key === 'ArrowLeft' ||
+            event.key === 'ArrowRight' ||
+            event.key === 'Home' ||
+            event.key === 'End';
+        if (!supported)
+            return;
+        const target = event.currentTarget instanceof HTMLElement
+            ? event.currentTarget
+            : undefined;
+        this._measureHeaderWidths();
+        const bounds = this._resolveColumnResizeBounds(col, target);
+        this._cacheColumnResizeBounds(col.key, bounds);
+        const currentWidth = this._clampColumnWidth(this._measureHeaderWidth(col, target), bounds);
+        const step = event.shiftKey
+            ? COLUMN_RESIZE_KEYBOARD_LARGE_STEP
+            : COLUMN_RESIZE_KEYBOARD_STEP;
+        let nextWidth = currentWidth;
+        if (event.key === 'Home')
+            nextWidth = bounds.min;
+        if (event.key === 'End')
+            nextWidth = bounds.max;
+        if (event.key === 'ArrowLeft')
+            nextWidth = currentWidth - step;
+        if (event.key === 'ArrowRight')
+            nextWidth = currentWidth + step;
+        event.preventDefault();
+        this._commitColumnWidth(col.key, this._clampColumnWidth(nextWidth, bounds), 'keyboard');
+    }
+    /** Localized accessible name for a column's resize separator. */
+    getColumnResizeLabel(col) {
+        return this._resolver.resolve(this._i18n(), 'resizeColumn', { column: col.title ?? col.key });
+    }
+    /** Current separator value in CSS pixels for ARIA. */
+    getColumnResizeValue(col) {
+        const bounds = this._columnResizeBounds(col);
+        const active = this._resizeState?.key === col.key
+            ? this._resizeState.latestWidth
+            : undefined;
+        const measured = this._measuredColumnWidths().get(col.key);
+        return this._normalizeColumnWidth(active ??
+            col._currentWidth ??
+            measured ??
+            parsePixelWidth(col.width) ??
+            DEFAULT_COLUMN_WIDTH, bounds);
+    }
+    /** Minimum separator value in CSS pixels for ARIA and Home. */
+    getColumnResizeMin(col) {
+        return this._roundColumnWidth(this._columnResizeBounds(col).min);
+    }
+    /** Maximum separator value in CSS pixels for ARIA and End. */
+    getColumnResizeMax(col) {
+        return this._roundColumnWidth(this._columnResizeBounds(col).max);
+    }
+    /** Localized text alternative that makes the separator's pixel unit explicit. */
+    getColumnResizeValueText(col) {
+        return this._resolver.resolve(this._i18n(), 'columnWidthPixels', { width: this.getColumnResizeValue(col) });
+    }
+    /**
+     * Removes committed user widths. Passing a key resets that column and emits a
+     * reset even when no override exists (useful for clearing persisted state);
+     * omitting it resets every currently overridden column.
+     */
+    resetColumnWidth(key) {
+        const active = this._resizeState;
+        if (active && (key === undefined || active.key === key)) {
+            this._cleanupResize();
+            this._liveResize.set(null);
+        }
+        const widths = this._columnWidths();
+        if (key !== undefined) {
+            if (!this.columns().some((column) => column.key === key))
+                return;
+            if (widths.has(key)) {
+                const updated = new Map(widths);
+                updated.delete(key);
+                this._columnWidths.set(updated);
+            }
+            this.columnResize.emit({ key, width: null, source: 'reset' });
+            afterNextRender(() => this._measureHeaderWidths(), {
+                injector: this._injector,
+            });
+            return;
+        }
+        const resetKeys = [...widths.keys()];
+        if (!resetKeys.length)
+            return;
+        this._columnWidths.set(new Map());
+        for (const resetKey of resetKeys) {
+            this.columnResize.emit({
+                key: resetKey,
+                width: null,
+                source: 'reset',
+            });
+        }
+        afterNextRender(() => this._measureHeaderWidths(), {
+            injector: this._injector,
+        });
+    }
+    /**
+     * @private Pointer-move handler (outside Angular). It synchronously updates
+     * the latest bounded value, then publishes at most one live signal update per
+     * animation frame.
+     */
+    _onResizeMove(event) {
+        const state = this._resizeState;
+        if (!state || event.pointerId !== state.pointerId)
+            return;
+        const delta = event.clientX - state.startX;
+        if (delta !== 0)
+            state.moved = true;
+        state.latestWidth = this._clampColumnWidth(state.startWidth + delta, state);
+        if (!state.moved)
+            return;
+        if (this._resizeRafId)
+            return;
+        this._resizeRafId = requestAnimationFrame(() => {
+            this._resizeRafId = 0;
+            const s = this._resizeState;
+            if (!s || s.pointerId !== event.pointerId)
+                return;
+            this._ngZone.run(() => this._liveResize.set({ key: s.key, width: s.latestWidth }));
+        });
+    }
+    /**
+     * @private Pointer-up handler that commits exactly once for the initiating
+     * pointer. A press/release without movement remains a no-op, which keeps a
+     * double-click reset from producing intermediate resize commits.
+     */
+    _onResizeEnd(event) {
+        const state = this._resizeState;
+        if (!state || event.pointerId !== state.pointerId)
+            return;
+        this._cleanupResize();
+        if (!state.moved) {
+            this._ngZone.run(() => this._liveResize.set(null));
+            return;
+        }
+        this._commitColumnWidth(state.key, state.latestWidth, 'pointer');
+    }
+    /**
+     * @private Cancels only the matching active pointer, dropping the optimistic
+     * live width while preserving the last committed map entry.
+     */
+    _onResizeCancel(event) {
+        const state = this._resizeState;
+        if (!state || event.pointerId !== state.pointerId)
+            return;
+        this._cleanupResize();
+        this._ngZone.run(() => this._liveResize.set(null));
+    }
+    /**
+     * @private Treats unexpected capture loss as cancellation. Normal cleanup
+     * removes this listener before explicitly releasing capture, so pointer-up
+     * commits cannot be mistaken for cancellation.
+     */
+    _onResizeLostCapture(event) {
+        const state = this._resizeState;
+        if (!state || event.pointerId !== state.pointerId)
+            return;
+        this._cleanupResize();
+        this._ngZone.run(() => this._liveResize.set(null));
+    }
+    /**
+     * @private Commits a bounded pixel width with one map clone and emits the
+     * public persistence event in the same Angular-zone turn.
+     */
+    _commitColumnWidth(key, width, source) {
+        const col = this.columns().find((column) => column.key === key);
+        const bounds = col
+            ? this._columnResizeBounds(col)
+            : {
+                min: DEFAULT_COLUMN_MIN_WIDTH,
+                max: DEFAULT_COLUMN_MAX_WIDTH,
+            };
+        const committedWidth = this._normalizeColumnWidth(width, bounds);
+        this._ngZone.run(() => {
+            const updated = new Map(this._columnWidths());
+            updated.set(key, committedWidth);
+            this._columnWidths.set(updated);
+            this._liveResize.set(null);
+            this.columnResize.emit({ key, width: committedWidth, source });
+        });
+    }
+    /**
+     * @private Returns the latest DOM-resolved bounds when available, otherwise
+     * resolves strict pixel metadata with safe finite defaults.
+     */
+    _columnResizeBounds(col) {
+        return (this._resolvedResizeBounds().get(col.key) ??
+            this._resolveColumnResizeBounds(col));
+    }
+    /** @private Stores DOM-resolved bounds with a signal-safe map replacement. */
+    _cacheColumnResizeBounds(key, bounds) {
+        this._resolvedResizeBounds.update((current) => {
+            const updated = new Map(current);
+            updated.set(key, bounds);
+            return updated;
+        });
+    }
+    /**
+     * @private Resolves resize bounds. Non-pixel metadata is read back from the
+     * rendered header's computed style where the browser exposes a pixel value.
+     */
+    _resolveColumnResizeBounds(col, target) {
+        const headerCell = target?.closest('th');
+        let min = this._resolveColumnBound(col.minWidth, headerCell);
+        let max = this._resolveColumnBound(col.maxWidth, headerCell);
+        if (headerCell &&
+            ((col.minWidth && min === undefined) ||
+                (col.maxWidth && max === undefined))) {
+            const computedStyle = headerCell.ownerDocument.defaultView?.getComputedStyle(headerCell);
+            if (computedStyle && col.minWidth && min === undefined) {
+                min = parsePixelWidth(computedStyle.minWidth);
+            }
+            if (computedStyle && col.maxWidth && max === undefined) {
+                max = parsePixelWidth(computedStyle.maxWidth);
+            }
+        }
+        const resolvedMin = this._roundColumnWidth(min ?? DEFAULT_COLUMN_MIN_WIDTH);
+        const resolvedMax = this._roundColumnWidth(Math.max(resolvedMin, max ?? DEFAULT_COLUMN_MAX_WIDTH));
+        return { min: resolvedMin, max: resolvedMax };
+    }
+    /**
+     * @private Resolves a declared bound to CSS pixels. Complete pixel values are
+     * direct; complete percentages use the rendered header table width, matching
+     * the containing table against which cell percentages are laid out.
+     */
+    _resolveColumnBound(value, headerCell) {
+        const pixels = parsePixelWidth(value);
+        if (pixels !== undefined)
+            return pixels;
+        const percentage = this._parseCssPercentage(value);
+        if (percentage === undefined || !headerCell)
+            return undefined;
+        const table = headerCell.closest('table');
+        const tableRectWidth = table?.getBoundingClientRect().width ?? 0;
+        const referenceWidth = tableRectWidth > 0 ? tableRectWidth : (table?.clientWidth ?? 0);
+        if (!Number.isFinite(referenceWidth) || referenceWidth <= 0) {
+            return undefined;
+        }
+        return this._roundColumnWidth(referenceWidth * percentage);
+    }
+    /** @private Parses a complete, non-negative CSS percentage as a fraction. */
+    _parseCssPercentage(value) {
+        if (!value)
+            return undefined;
+        const match = value.trim().match(/^(?:\d+(?:\.\d+)?|\.\d+)%$/);
+        if (!match)
+            return undefined;
+        const parsed = Number.parseFloat(match[0]);
+        return Number.isFinite(parsed) ? parsed / 100 : undefined;
+    }
+    /**
+     * @private Re-applies outer horizontal position after virtual DOM/geometry
+     * changes that do not themselves emit another wrapper scroll event.
+     */
+    _syncVirtualHorizontalScroll() {
+        const wrapper = this.tableWrapperRef()?.nativeElement;
+        const viewport = this._virtualViewportRef()?.elementRef.nativeElement;
+        if (!wrapper || !viewport)
+            return;
+        if (viewport.scrollLeft !== wrapper.scrollLeft) {
+            viewport.scrollLeft = wrapper.scrollLeft;
+        }
+        this._updateVirtualScrollGeometry(wrapper, viewport);
+    }
+    /**
+     * @private Publishes both the native vertical-scrollbar width and an inert
+     * outer extent whose maximum scroll position exactly matches the viewport.
+     */
+    _updateVirtualScrollGeometry(wrapper, viewport) {
+        const gutter = Math.max(0, viewport.offsetWidth - viewport.clientWidth);
+        const horizontalRange = Math.max(0, viewport.scrollWidth - viewport.clientWidth);
+        const extent = wrapper.clientWidth + horizontalRange;
+        const gutterChanged = gutter !== untracked(this._virtualScrollbarGutter);
+        const extentChanged = extent !== untracked(this._virtualHorizontalScrollExtent);
+        if (!gutterChanged && !extentChanged)
+            return;
+        this._ngZone.run(() => {
+            if (gutterChanged)
+                this._virtualScrollbarGutter.set(gutter);
+            if (extentChanged)
+                this._virtualHorizontalScrollExtent.set(extent);
+        });
+    }
+    /**
+     * @private Measures the actual rendered header cell width and falls back to
+     * the current strict-pixel state only in non-layout environments such as
+     * server rendering and jsdom.
+     */
+    _measureHeaderWidth(col, target) {
+        const headerCell = target?.closest('th');
+        const rectWidth = headerCell?.getBoundingClientRect().width ?? 0;
+        if (Number.isFinite(rectWidth) && rectWidth > 0)
+            return rectWidth;
+        const offsetWidth = headerCell?.offsetWidth ?? 0;
+        if (offsetWidth > 0)
+            return offsetWidth;
+        return (col._currentWidth ?? parsePixelWidth(col.width) ?? DEFAULT_COLUMN_WIDTH);
+    }
+    /**
+     * @private Measures the rendered header once per layout change. Before the
+     * first user override these values track responsive/table layout; while the
+     * table is frozen, existing baselines are preserved so reset restores the
+     * original widths rather than another column's resized layout.
+     */
+    _measureHeaderWidths() {
+        const host = this._el.nativeElement;
+        const header = host.querySelector('thead');
+        if (!header)
+            return;
+        const preserveBaseline = this._liveResize() !== null || this._columnWidths().size > 0;
+        const measured = preserveBaseline
+            ? new Map(this._measuredColumnWidths())
+            : new Map();
+        const resolvedBounds = preserveBaseline
+            ? new Map(this._resolvedResizeBounds())
+            : new Map();
+        for (const cell of header.querySelectorAll('th[data-mlv-column-key]')) {
+            const key = cell.getAttribute('data-mlv-column-key');
+            if (!key)
+                continue;
+            const width = cell.getBoundingClientRect().width;
+            if ((!preserveBaseline || !measured.has(key)) &&
+                Number.isFinite(width) &&
+                width > 0) {
+                measured.set(key, this._roundColumnWidth(width));
+            }
+            const column = this.columns().find((candidate) => candidate.key === key);
+            if (column?.resizable) {
+                resolvedBounds.set(key, this._resolveColumnResizeBounds(column, cell));
+            }
+        }
+        const selectionWidth = header
+            .querySelector('.mlv-data-table__cell--select')
+            ?.getBoundingClientRect().width;
+        const actionsWidth = header
+            .querySelector('.mlv-data-table__cell--actions')
+            ?.getBoundingClientRect().width;
+        const auxiliary = preserveBaseline
+            ? { ...this._measuredAuxiliaryWidths() }
+            : {};
+        if (selectionWidth !== undefined &&
+            Number.isFinite(selectionWidth) &&
+            selectionWidth > 0) {
+            auxiliary.selection = this._roundColumnWidth(selectionWidth);
+        }
+        if (actionsWidth !== undefined &&
+            Number.isFinite(actionsWidth) &&
+            actionsWidth > 0) {
+            auxiliary.actions = this._roundColumnWidth(actionsWidth);
+        }
+        this._measuredColumnWidths.set(measured);
+        this._resolvedResizeBounds.set(resolvedBounds);
+        this._measuredAuxiliaryWidths.set(auxiliary);
+    }
+    /**
+     * @private CSS length used by a sticky offset. A rendered measurement is more
+     * accurate than declared CSS under table redistribution; the declaration
+     * remains the pre-render/SSR fallback.
+     */
+    _columnOffsetWidth(col) {
+        if (col._currentWidth !== undefined)
+            return `${col._currentWidth}px`;
+        const measured = this._measuredColumnWidths().get(col.key);
+        if (measured !== undefined)
+            return `${this._roundColumnWidth(measured)}px`;
+        if (col.width)
+            return col.width;
+        return `${DEFAULT_COLUMN_WIDTH}px`;
+    }
+    /** @private Adds heterogeneous CSS lengths without converting their units. */
+    _sumCssLengths(widths) {
+        if (!widths.length)
+            return '0px';
+        if (widths.length === 1)
+            return widths[0];
+        return `calc(${widths.join(' + ')})`;
+    }
+    /** @private Rounds pixel values to hundredths without changing their bounds. */
+    _roundColumnWidth(width) {
+        return Math.round(width * 100) / 100;
+    }
+    /** @private Creates immutable exact width/min/max styles for a measured column. */
+    _fixedColumnWidthStyles(width) {
+        if (width === undefined || !Number.isFinite(width) || width < 0)
+            return null;
+        const value = `${this._roundColumnWidth(width)}px`;
+        return {
+            width: value,
+            'min-width': value,
+            'max-width': value,
+        };
+    }
+    /** @private Rounds and clamps a width against normalized finite bounds. */
+    _normalizeColumnWidth(width, bounds) {
+        return this._clampColumnWidth(this._roundColumnWidth(width), bounds);
+    }
+    /** @private Clamps a width to finite normalized resize bounds. */
+    _clampColumnWidth(width, bounds) {
+        const finiteWidth = Number.isFinite(width) ? width : DEFAULT_COLUMN_WIDTH;
+        return Math.min(bounds.max, Math.max(bounds.min, finiteWidth));
+    }
+    /**
+     * @private Detaches active pointer listeners, releases capture, cancels a
+     * pending animation frame, and clears the drag state. Idempotent for pointer
+     * up, pointer cancel, reset, and component destruction.
+     */
+    _cleanupResize() {
+        const state = this._resizeState;
+        if (state) {
+            this._document.removeEventListener('pointermove', this._onResizeMoveBound);
+            this._document.removeEventListener('pointerup', this._onResizeEndBound);
+            this._document.removeEventListener('pointercancel', this._onResizeCancelBound);
+            state.target.removeEventListener('lostpointercapture', this._onResizeLostCaptureBound);
+            const canRelease = typeof state.target.hasPointerCapture !== 'function' ||
+                state.target.hasPointerCapture(state.pointerId);
+            if (canRelease &&
+                typeof state.target.releasePointerCapture === 'function') {
+                try {
+                    state.target.releasePointerCapture(state.pointerId);
+                }
+                catch {
+                    // Capture may already have been released implicitly by the browser.
+                }
+            }
+        }
+        if (this._resizeRafId) {
+            cancelAnimationFrame(this._resizeRafId);
+            this._resizeRafId = 0;
+        }
+        this._resizeState = null;
+    }
+    // ---- Private helpers --------------------------------------------------------
+    /** Returns the original (pre-spread) row reference for expand tracking. */
+    _ref(row) {
+        return originalRow(row);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvDataTable, isStandalone: true, selector: "mlv-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, columnGroups: { classPropertyName: "columnGroups", publicName: "columnGroups", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, addRow: { classPropertyName: "addRow", publicName: "addRow", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, actionsHeaderLabel: { classPropertyName: "actionsHeaderLabel", publicName: "actionsHeaderLabel", isSignal: true, isRequired: false, transformFunction: null }, cellNavigation: { classPropertyName: "cellNavigation", publicName: "cellNavigation", isSignal: true, isRequired: false, transformFunction: null }, paginationMode: { classPropertyName: "paginationMode", publicName: "paginationMode", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrollThreshold: { classPropertyName: "infiniteScrollThreshold", publicName: "infiniteScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, filterDisplay: { classPropertyName: "filterDisplay", publicName: "filterDisplay", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchTrigger: { classPropertyName: "searchTrigger", publicName: "searchTrigger", isSignal: true, isRequired: false, transformFunction: null }, searchDebounce: { classPropertyName: "searchDebounce", publicName: "searchDebounce", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, activeFilters: { classPropertyName: "activeFilters", publicName: "activeFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowEditStart: "rowEditStart", rowEditSave: "rowEditSave", rowEditCancel: "rowEditCancel", rowAdd: "rowAdd", rowClick: "rowClick", selectionChange: "selectionChange", retry: "retry", columnResize: "columnResize", loadMore: "loadMore", selectedRows: "selectedRowsChange", searchQuery: "searchQueryChange", activeFilters: "activeFiltersChange" }, host: { classAttribute: "mlv-data-table" }, providers: [
+            { provide: MLV_DENSITY_ELEMENT, useValue: 'data-table' },
+            MlvDataTableEditingService,
+            MlvDataTableColumnVisibilityService,
+            MlvDataTablePinningService,
+        ], queries: [{ propertyName: "cellTemplates", predicate: MlvDataTableCell, descendants: true, isSignal: true }, { propertyName: "editCellTemplates", predicate: MlvDataTableEditCell, descendants: true, isSignal: true }, { propertyName: "noDataTemplate", predicate: MlvDataTableNoData, descendants: true, isSignal: true }, { propertyName: "errorTemplate", predicate: MlvDataTableError, descendants: true, isSignal: true }, { propertyName: "footerTemplate", predicate: MlvDataTableFooter, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableWrapperRef", first: true, predicate: ["tableWrapper"], descendants: true, isSignal: true }, { propertyName: "tableRef", first: true, predicate: ["tableEl"], descendants: true, isSignal: true }, { propertyName: "_resizeHandleRefs", predicate: ["resizeHandle"], descendants: true, isSignal: true }, { propertyName: "_filterTriggerRef", first: true, predicate: ["filterBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_virtualViewportRef", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.MlvDensityDirective, inputs: ["mlvDensity", "mlvDensity"] }], ngImport: i0, template: "@if (hasToolbarContent()) {\n<div class=\"mlv-data-table__toolbar\">\n  @if (showSearch() && hasSearchableColumns()) {\n  <mlv-search-field\n    class=\"mlv-data-table__search\"\n    [value]=\"_searchDraft()\"\n    (valueChange)=\"_searchDraft.set($event)\"\n    [trigger]=\"searchTrigger()\"\n    [debounce]=\"searchDebounce()\"\n    [loading]=\"loading()\"\n    [placeholder]=\"_i18n().searchPlaceholder\"\n    [ariaLabel]=\"_i18n().searchLabel\"\n    (search)=\"onSearch($event)\"\n  />\n  } @if (filterDisplay() !== 'none' && hasFilters()) {\n  <span class=\"mlv-data-table__filter-badge\" aria-live=\"polite\">\n    {{ activeFilterLabel() }}\n  </span>\n  }\n  <div class=\"mlv-data-table__toolbar-actions\">\n    @if (editable() && addRow()) {\n    <button\n      mlvButton\n      variant=\"secondary\"\n      mlvDensity=\"compact\"\n      type=\"button\"\n      (click)=\"onAddRow()\"\n      [attr.aria-label]=\"_i18n().addNewRow\"\n    >\n      <svg lucidePlus mlvButtonIcon [size]=\"14\" />\n      {{ _i18n().addRow }}\n    </button>\n    } @if (hasHideableColumns()) {\n    <button\n      mlvButton\n      [variant]=\"columnsPopup.opened() ? 'primary' : 'secondary'\"\n      mlvDensity=\"compact\"\n      type=\"button\"\n      [mlvPopupTrigger]=\"columnsPopup\"\n      #columnsTrigger=\"mlvPopupTrigger\"\n      [attr.aria-label]=\"_i18n().toggleColumnVisibility\"\n    >\n      <svg mlvButtonIcon lucideEye [size]=\"14\" />\n      {{ _i18n().columns }}\n    </button>\n\n    <mlv-popup #columnsPopup>\n      <div *mlvPopupContent class=\"mlv-data-table__columns-dropdown\">\n        @for (col of allColumns(); track col.key) { @if (col.hideable) {\n        <div class=\"mlv-data-table__columns-item\">\n          <mlv-checkbox\n            [checked]=\"!isColumnHidden(col.key)\"\n            (checkedChange)=\"toggleColumnVisibility(col.key)\"\n          />\n          <span>{{ col.title ?? col.key }}</span>\n        </div>\n        } }\n      </div>\n    </mlv-popup>\n    } @if (filterDisplay() === 'toolbar' && hasFilterableColumns()) {\n    <button\n      #filterBtn\n      mlvButton\n      [variant]=\"filtersPopup.opened() ? 'primary' : 'secondary'\"\n      mlvDensity=\"compact\"\n      type=\"button\"\n      [mlvPopupTrigger]=\"filtersPopup\"\n      #trigger=\"mlvPopupTrigger\"\n      [ariaHasPopup]=\"'dialog'\"\n      [attr.aria-label]=\"_i18n().toggleFilters\"\n    >\n      <svg lucideFilter mlvButtonIcon [size]=\"14\" />\n      {{ _i18n().filters }} @if (hasFilters()) {\n      <mlv-badge tone=\"primary\" rounded>{{ activeFilters().length }}</mlv-badge>\n      }\n    </button>\n\n    <mlv-popup\n      #filtersPopup\n      panelRole=\"dialog\"\n      [ariaLabel]=\"_i18n().filters\"\n      (afterClosed)=\"_onFiltersClosed()\"\n    >\n      <mlv-dt-filter-dropdown\n        *mlvPopupContent\n        [columns]=\"columns()\"\n        [(activeFilters)]=\"activeFilters\"\n        (closed)=\"trigger.close()\"\n      />\n    </mlv-popup>\n    }\n  </div>\n</div>\n}\n\n<div\n  class=\"mlv-data-table__wrapper\"\n  [class.mlv-data-table__wrapper--virtual]=\"virtualScroll()\"\n  [style.max-height]=\"virtualScroll() ? null : maxHeight()\"\n  [style.--mlv-dt-virtual-scrollbar-gutter]=\"\n    virtualScroll() ? _virtualScrollbarGutter() + 'px' : null\n  \"\n  #tableWrapper\n  mlvInfiniteScroll\n  [disabled]=\"paginationMode() !== 'infinite' || virtualScroll()\"\n  [threshold]=\"infiniteScrollThreshold()\"\n  [loading]=\"!!loading()\"\n  [hasMore]=\"!!hasMore()\"\n  (loadMore)=\"onInfiniteScrollLoadMore($event)\"\n>\n  @if (virtualScroll()) {\n  <!-- ==================== Virtual scroll mode ==================== -->\n  <!-- Header table \u2014 sits naturally at the top of the wrapper, outside the viewport -->\n  <table\n    class=\"mlv-data-table__table mlv-data-table__table--virtual mlv-data-table__table--virtual-header\"\n    [class.mlv-data-table__table--bordered]=\"bordered()\"\n    [style.width.px]=\"resizedTableWidth()\"\n    [style.flex]=\"resizedTableWidth() === null ? null : '0 0 auto'\"\n    role=\"grid\"\n  >\n    <ng-container [ngTemplateOutlet]=\"colgroupTpl\" />\n    <thead class=\"mlv-data-table__head\">\n      <ng-container [ngTemplateOutlet]=\"headRowsTpl\" />\n    </thead>\n  </table>\n\n  <!-- CDK virtual scroll viewport \u2014 owns the only vertical scroll surface in this mode.\n         Infinite scroll is intentionally disabled in virtual mode: virtual scrolling is the\n         rendering optimisation for already-loaded data, and the two strategies are mutually\n         exclusive in this component. -->\n  <cdk-virtual-scroll-viewport\n    class=\"mlv-data-table__virtual-viewport\"\n    [itemSize]=\"rowHeight()\"\n    [style.height]=\"virtualViewportHeight()\"\n  >\n    <table\n      class=\"mlv-data-table__table mlv-data-table__table--virtual mlv-data-table__table--virtual-body\"\n      [class.mlv-data-table__table--striped]=\"striped()\"\n      [class.mlv-data-table__table--bordered]=\"bordered()\"\n      [style.width.px]=\"resizedTableWidth()\"\n      role=\"presentation\"\n    >\n      <ng-container [ngTemplateOutlet]=\"colgroupTpl\" />\n      <tbody class=\"mlv-data-table__body\">\n        @if (showError()) {\n        <ng-container [ngTemplateOutlet]=\"errorRowTpl\" />\n        } @else if (flatRows().length === 0) {\n        <ng-container [ngTemplateOutlet]=\"noDataRowTpl\" />\n        } @else {\n        <tr\n          *cdkVirtualFor=\"\n                let row of flatRows();\n                let i = index;\n                trackBy: trackByRow\n              \"\n          class=\"mlv-data-table__row mlv-data-table__row--data\"\n          [class.mlv-data-table__row--expanded]=\"isRowExpanded(row)\"\n          [class.mlv-data-table__row--editing]=\"isEditing(i)\"\n          [class.mlv-data-table__row--selected]=\"isRowSelected(row)\"\n          [style.height.px]=\"rowHeight()\"\n          [attr.aria-level]=\"getDepth(row) > 0 ? getDepth(row) + 1 : null\"\n          [attr.aria-selected]=\"selectable() ? isRowSelected(row) : null\"\n          [attr.tabindex]=\"_rowTabIndex(i)\"\n          [attr.data-row-index]=\"i\"\n          (click)=\"onRowClick(row, i, $event)\"\n          (focus)=\"_onRowFocus(i)\"\n          (keydown)=\"_onRowKeydown(i, row, $event)\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"rowCellsTpl\"\n            [ngTemplateOutletContext]=\"getCellContext(row, i)\"\n          />\n        </tr>\n        }\n      </tbody>\n    </table>\n  </cdk-virtual-scroll-viewport>\n\n  <!-- Footer summary table \u2014 only when a footer template is projected -->\n  @if (getFooterTemplate(); as footerTpl) {\n  <table\n    class=\"mlv-data-table__table mlv-data-table__table--virtual mlv-data-table__table--virtual-footer\"\n    [class.mlv-data-table__table--bordered]=\"bordered()\"\n    [style.width.px]=\"resizedTableWidth()\"\n    [style.flex]=\"resizedTableWidth() === null ? null : '0 0 auto'\"\n    role=\"presentation\"\n  >\n    <ng-container [ngTemplateOutlet]=\"colgroupTpl\" />\n    <tfoot class=\"mlv-data-table__foot\">\n      <tr class=\"mlv-data-table__row mlv-data-table__row--footer\">\n        <ng-container\n          [ngTemplateOutlet]=\"footerTpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: visibleColumns() }\"\n        />\n      </tr>\n    </tfoot>\n  </table>\n  }\n\n  <!-- Extends only the outer horizontal scroll range to match the viewport's\n         native range, including a classic vertical scrollbar gutter. -->\n  <div\n    class=\"mlv-data-table__virtual-horizontal-sizer\"\n    [style.width.px]=\"_virtualHorizontalScrollExtent()\"\n    aria-hidden=\"true\"\n  ></div>\n  } @else if (_cellNav()) {\n  <!-- ========= Experimental cell-level grid navigation (aria ngGrid) ========= -->\n  <!--\n      Opt-in via [cellNavigation]=\"true\" (non-virtual only). The aria Grid pattern owns\n      roving focus, arrow/Home/End navigation across cells, and aria-activedescendant.\n      Only the data <tbody> rows/cells are registered as grid rows/cells; header cells\n      stay outside grid navigation. Interactive cells (edit inputs, action buttons)\n      expose an ngGridCellWidget so Enter pauses grid nav to interact and Escape resumes.\n    -->\n  <table\n    ngGrid\n    rowWrap=\"nowrap\"\n    colWrap=\"nowrap\"\n    class=\"mlv-data-table__table\"\n    [class.mlv-data-table__table--striped]=\"striped()\"\n    [class.mlv-data-table__table--bordered]=\"bordered()\"\n    [style.width.px]=\"resizedTableWidth()\"\n    [style.table-layout]=\"resizedTableWidth() === null ? null : 'fixed'\"\n    role=\"grid\"\n    #tableEl\n  >\n    <ng-container [ngTemplateOutlet]=\"colgroupTpl\" />\n    <thead\n      class=\"mlv-data-table__head\"\n      [class.mlv-data-table__head--sticky]=\"stickyHeader()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"headRowsTpl\" />\n    </thead>\n\n    <tbody class=\"mlv-data-table__body\">\n      @if (showError()) {\n      <ng-container [ngTemplateOutlet]=\"errorRowTpl\" />\n      } @else if (flatRows().length === 0) {\n      <ng-container [ngTemplateOutlet]=\"noDataRowTpl\" />\n      } @else { @for (row of flatRows(); track $index; let i = $index) {\n      <tr\n        ngGridRow\n        class=\"mlv-data-table__row mlv-data-table__row--data\"\n        [class.mlv-data-table__row--expanded]=\"isRowExpanded(row)\"\n        [class.mlv-data-table__row--editing]=\"isEditing(i)\"\n        [class.mlv-data-table__row--selected]=\"isRowSelected(row)\"\n        [attr.aria-level]=\"getDepth(row) > 0 ? getDepth(row) + 1 : null\"\n        [attr.aria-selected]=\"selectable() ? isRowSelected(row) : null\"\n        [attr.data-row-index]=\"i\"\n        (click)=\"onRowClick(row, i, $event)\"\n      >\n        @if (selectable()) {\n        <td\n          ngGridCell\n          class=\"mlv-data-table__cell mlv-data-table__cell--data mlv-data-table__cell--select\"\n          [style]=\"getAuxiliaryColumnStyle('selection')\"\n        >\n          <mlv-checkbox\n            [checked]=\"isRowSelected(row)\"\n            [tabbable]=\"false\"\n            (checkedChange)=\"toggleRowSelection(row)\"\n            (click)=\"$event.stopPropagation()\"\n            [ariaLabel]=\"'Select row ' + (i + 1)\"\n          />\n        </td>\n        } @for (col of visibleColumns(); track col.key; let ci = $index) {\n        <td\n          ngGridCell\n          class=\"mlv-data-table__cell mlv-data-table__cell--data\"\n          [class.mlv-data-table__cell--pinned]=\"col.pinned\"\n          [class.mlv-data-table__cell--pinned-left]=\"\n                    col.pinned && col.pinSide !== 'right'\n                  \"\n          [class.mlv-data-table__cell--pinned-right]=\"\n                    col.pinned && col.pinSide === 'right'\n                  \"\n          [class]=\"getAlignClass(col)\"\n          [style]=\"getCellStyle(col)\"\n        >\n          @if ( editable() && isEditing(i) && getEditTemplate(col.key); as\n          editTpl ) {\n          <div\n            ngGridCellWidget\n            widgetType=\"editable\"\n            class=\"mlv-data-table__cell-content\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"editTpl\"\n              [ngTemplateOutletContext]=\"getCellContext(row, i)\"\n            />\n          </div>\n          } @else {\n          <ng-container\n            [ngTemplateOutlet]=\"cellContentTpl\"\n            [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        index: i,\n                        col: col,\n                        ci: ci,\n                      }\"\n          />\n          }\n        </td>\n        } @if (editable()) {\n        <td\n          ngGridCell\n          class=\"mlv-data-table__cell mlv-data-table__cell--data mlv-data-table__cell--actions\"\n          [style]=\"getAuxiliaryColumnStyle('actions')\"\n        >\n          <div\n            ngGridCellWidget\n            widgetType=\"complex\"\n            class=\"mlv-data-table__cell-content mlv-data-table__actions\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"actionsButtonsTpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n            />\n          </div>\n        </td>\n        }\n      </tr>\n      } }\n    </tbody>\n\n    @if (getFooterTemplate(); as footerTpl) {\n    <tfoot\n      class=\"mlv-data-table__foot\"\n      [class.mlv-data-table__foot--sticky]=\"stickyHeader()\"\n    >\n      <tr class=\"mlv-data-table__row mlv-data-table__row--footer\">\n        <ng-container\n          [ngTemplateOutlet]=\"footerTpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: visibleColumns() }\"\n        />\n      </tr>\n    </tfoot>\n    }\n  </table>\n\n  @if (paginationMode() === 'infinite' && loading()) {\n  <div\n    class=\"mlv-data-table__loading-bottom\"\n    aria-live=\"polite\"\n    aria-busy=\"true\"\n  >\n    <mlv-loader\n      variant=\"circle\"\n      [indeterminate]=\"true\"\n      [size]=\"24\"\n      ariaLabel=\"Loading more rows\"\n    />\n  </div>\n  } } @else {\n  <!-- ==================== Standard (non-virtual) mode ==================== -->\n  <table\n    class=\"mlv-data-table__table\"\n    [class.mlv-data-table__table--striped]=\"striped()\"\n    [class.mlv-data-table__table--bordered]=\"bordered()\"\n    [style.width.px]=\"resizedTableWidth()\"\n    [style.table-layout]=\"resizedTableWidth() === null ? null : 'fixed'\"\n    role=\"grid\"\n    #tableEl\n  >\n    <ng-container [ngTemplateOutlet]=\"colgroupTpl\" />\n    <thead\n      class=\"mlv-data-table__head\"\n      [class.mlv-data-table__head--sticky]=\"stickyHeader()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"headRowsTpl\" />\n    </thead>\n\n    <tbody class=\"mlv-data-table__body\">\n      @if (showError()) {\n      <ng-container [ngTemplateOutlet]=\"errorRowTpl\" />\n      } @else if (flatRows().length === 0) {\n      <ng-container [ngTemplateOutlet]=\"noDataRowTpl\" />\n      } @else { @for (row of flatRows(); track $index; let i = $index) {\n      <tr\n        class=\"mlv-data-table__row mlv-data-table__row--data\"\n        [class.mlv-data-table__row--expanded]=\"isRowExpanded(row)\"\n        [class.mlv-data-table__row--editing]=\"isEditing(i)\"\n        [class.mlv-data-table__row--selected]=\"isRowSelected(row)\"\n        [attr.aria-level]=\"getDepth(row) > 0 ? getDepth(row) + 1 : null\"\n        [attr.aria-selected]=\"selectable() ? isRowSelected(row) : null\"\n        [attr.tabindex]=\"_rowTabIndex(i)\"\n        [attr.data-row-index]=\"i\"\n        (click)=\"onRowClick(row, i, $event)\"\n        (focus)=\"_onRowFocus(i)\"\n        (keydown)=\"_onRowKeydown(i, row, $event)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"rowCellsTpl\"\n          [ngTemplateOutletContext]=\"getCellContext(row, i)\"\n        />\n      </tr>\n      } }\n    </tbody>\n\n    @if (getFooterTemplate(); as footerTpl) {\n    <tfoot\n      class=\"mlv-data-table__foot\"\n      [class.mlv-data-table__foot--sticky]=\"stickyHeader()\"\n    >\n      <tr class=\"mlv-data-table__row mlv-data-table__row--footer\">\n        <ng-container\n          [ngTemplateOutlet]=\"footerTpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: visibleColumns() }\"\n        />\n      </tr>\n    </tfoot>\n    }\n  </table>\n\n  @if (paginationMode() === 'infinite' && loading()) {\n  <div\n    class=\"mlv-data-table__loading-bottom\"\n    aria-live=\"polite\"\n    aria-busy=\"true\"\n  >\n    <mlv-loader\n      variant=\"circle\"\n      [indeterminate]=\"true\"\n      [size]=\"24\"\n      ariaLabel=\"Loading more rows\"\n    />\n  </div>\n  } }\n</div>\n\n@if (paginationMode() === 'paged' && !virtualScroll()) {\n<div class=\"mlv-data-table__footer\">\n  <mlv-pagination\n    [totalItems]=\"totalItems()\"\n    [(currentPage)]=\"currentPage\"\n    [(itemsPerPage)]=\"currentPerPage\"\n  />\n</div>\n} @if (paginationMode() === 'paged' && loading()) {\n<div\n  class=\"mlv-data-table__loading-overlay\"\n  aria-live=\"polite\"\n  aria-busy=\"true\"\n>\n  <mlv-loader\n    variant=\"circle\"\n    [indeterminate]=\"true\"\n    [size]=\"48\"\n    ariaLabel=\"Loading table data\"\n  />\n</div>\n}\n\n<!-- ==================== Reusable templates ==================== -->\n\n<!--\n  Shared <colgroup> template \u2014 used by both the standard table and the three split tables in\n  virtual mode (header / body / footer). Keeping the colgroup definitions identical and combining\n  it with `table-layout: fixed` keeps column widths in sync between the split tables in virtual mode.\n-->\n<ng-template #colgroupTpl>\n  <colgroup>\n    @if (selectable() === 'multi' || selectable() === 'single') {\n    <col\n      class=\"mlv-data-table__col--select\"\n      [style.width]=\"getAuxiliaryColumnWidth('selection')\"\n    />\n    } @for (col of visibleColumns(); track col.key) {\n    <col [style.width]=\"getColWidth(col)\" />\n    } @if (editable()) {\n    <col\n      class=\"mlv-data-table__col--actions\"\n      [style.width]=\"getAuxiliaryColumnWidth('actions')\"\n    />\n    }\n  </colgroup>\n</ng-template>\n\n<!-- Header rows \u2014 emits the same content the original `<thead>` did. -->\n<ng-template #headRowsTpl>\n  @if (hasColumnGroups()) {\n  <!-- Group header row -->\n  <tr class=\"mlv-data-table__row mlv-data-table__row--group-header\">\n    @if (selectable() === 'multi') {\n    <th\n      class=\"mlv-data-table__cell mlv-data-table__cell--header mlv-data-table__cell--select\"\n      [style]=\"getAuxiliaryColumnStyle('selection')\"\n      rowspan=\"2\"\n    >\n      <mlv-checkbox\n        [checked]=\"allRowsSelected()\"\n        [indeterminate]=\"someRowsSelected()\"\n        (checkedChange)=\"toggleSelectAll()\"\n        [ariaLabel]=\"_i18n().selectAllRows\"\n      />\n    </th>\n    } @else if (selectable() === 'single') {\n    <th\n      class=\"mlv-data-table__cell mlv-data-table__cell--header mlv-data-table__cell--select\"\n      [style]=\"getAuxiliaryColumnStyle('selection')\"\n      rowspan=\"2\"\n    ></th>\n    } @for (col of visibleColumns(); track col.key) { @if (headerLayout(); as\n    layout) { @if (layout.standaloneKeys.has(col.key)) {\n    <!-- Standalone column spans both header rows -->\n    <th\n      class=\"mlv-data-table__cell mlv-data-table__cell--header mlv-data-table__cell--standalone\"\n      [class.mlv-data-table__cell--sortable]=\"col.sortable\"\n      [class.mlv-data-table__cell--pinned]=\"col.pinned\"\n      [class.mlv-data-table__cell--pinned-left]=\"\n                col.pinned && col.pinSide !== 'right'\n              \"\n      [class.mlv-data-table__cell--pinned-right]=\"\n                col.pinned && col.pinSide === 'right'\n              \"\n      [class]=\"getAlignClass(col)\"\n      [style]=\"getCellStyle(col)\"\n      [attr.data-mlv-column-key]=\"col.key\"\n      rowspan=\"2\"\n      scope=\"col\"\n      [attr.aria-sort]=\"\n                col.sortable\n                  ? getSortDirection(col) === 'asc'\n                    ? 'ascending'\n                    : getSortDirection(col) === 'desc'\n                      ? 'descending'\n                      : 'none'\n                  : null\n              \"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"headerCellInnerTpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: col }\"\n      />\n    </th>\n    } @else {\n    <!-- Check if this column is the first column of a group -->\n    @for (group of columnGroups(); track group.title) { @if (group.columns[0]\n    === col.key) {\n    <th\n      class=\"mlv-data-table__cell mlv-data-table__cell--header mlv-data-table__cell--group-header\"\n      [class.mlv-data-table__cell--align-left]=\"\n                    group.align === 'left'\n                  \"\n      [class.mlv-data-table__cell--align-center]=\"\n                    group.align === 'center' || !group.align\n                  \"\n      [class.mlv-data-table__cell--align-right]=\"\n                    group.align === 'right'\n                  \"\n      [attr.colspan]=\"group.columns.length\"\n      scope=\"colgroup\"\n    >\n      {{ group.title }}\n    </th>\n    } } } } } @if (editable()) {\n    <th\n      class=\"mlv-data-table__cell mlv-data-table__cell--header mlv-data-table__cell--actions\"\n      [style]=\"getAuxiliaryColumnStyle('actions')\"\n      rowspan=\"2\"\n    >\n      <span class=\"mlv-data-table__visually-hidden\"\n        >{{ actionsHeaderLabel() }}</span\n      >\n    </th>\n    }\n  </tr>\n  <!-- Sub-header row for grouped columns -->\n  <tr class=\"mlv-data-table__row mlv-data-table__row--header\">\n    @for (col of visibleColumns(); track col.key) { @if (headerLayout(); as\n    layout) { @if (layout.groupedKeys.has(col.key)) {\n    <th\n      class=\"mlv-data-table__cell mlv-data-table__cell--header\"\n      [class.mlv-data-table__cell--sortable]=\"col.sortable\"\n      [class.mlv-data-table__cell--pinned]=\"col.pinned\"\n      [class.mlv-data-table__cell--pinned-left]=\"\n                col.pinned && col.pinSide !== 'right'\n              \"\n      [class.mlv-data-table__cell--pinned-right]=\"\n                col.pinned && col.pinSide === 'right'\n              \"\n      [class]=\"getAlignClass(col)\"\n      [style]=\"getCellStyle(col)\"\n      [attr.data-mlv-column-key]=\"col.key\"\n      scope=\"col\"\n      [attr.aria-sort]=\"\n                col.sortable\n                  ? getSortDirection(col) === 'asc'\n                    ? 'ascending'\n                    : getSortDirection(col) === 'desc'\n                      ? 'descending'\n                      : 'none'\n                  : null\n              \"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"headerCellInnerTpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: col }\"\n      />\n    </th>\n    } } }\n  </tr>\n  } @else {\n  <!-- Standard single-row header -->\n  <tr class=\"mlv-data-table__row mlv-data-table__row--header\">\n    @if (selectable() === 'multi') {\n    <th\n      class=\"mlv-data-table__cell mlv-data-table__cell--header mlv-data-table__cell--select\"\n      [style]=\"getAuxiliaryColumnStyle('selection')\"\n    >\n      <mlv-checkbox\n        [checked]=\"allRowsSelected()\"\n        [indeterminate]=\"someRowsSelected()\"\n        (checkedChange)=\"toggleSelectAll()\"\n        [ariaLabel]=\"_i18n().selectAllRows\"\n      />\n    </th>\n    } @else if (selectable() === 'single') {\n    <th\n      class=\"mlv-data-table__cell mlv-data-table__cell--header mlv-data-table__cell--select\"\n      [style]=\"getAuxiliaryColumnStyle('selection')\"\n    ></th>\n    } @for (col of visibleColumns(); track col.key) {\n    <th\n      class=\"mlv-data-table__cell mlv-data-table__cell--header\"\n      [class.mlv-data-table__cell--sortable]=\"col.sortable\"\n      [class.mlv-data-table__cell--pinned]=\"col.pinned\"\n      [class.mlv-data-table__cell--pinned-left]=\"\n            col.pinned && col.pinSide !== 'right'\n          \"\n      [class.mlv-data-table__cell--pinned-right]=\"\n            col.pinned && col.pinSide === 'right'\n          \"\n      [class]=\"getAlignClass(col)\"\n      [style]=\"getCellStyle(col)\"\n      [attr.data-mlv-column-key]=\"col.key\"\n      [attr.aria-sort]=\"\n            col.sortable\n              ? getSortDirection(col) === 'asc'\n                ? 'ascending'\n                : getSortDirection(col) === 'desc'\n                  ? 'descending'\n                  : 'none'\n              : null\n          \"\n      scope=\"col\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"headerCellInnerTpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: col }\"\n      />\n    </th>\n    } @if (editable()) {\n    <th\n      class=\"mlv-data-table__cell mlv-data-table__cell--header mlv-data-table__cell--actions\"\n      [style]=\"getAuxiliaryColumnStyle('actions')\"\n    >\n      <span class=\"mlv-data-table__visually-hidden\"\n        >{{ actionsHeaderLabel() }}</span\n      >\n    </th>\n    }\n  </tr>\n  }\n</ng-template>\n\n<!--\n  Shared inner content for a single header cell. Context: { $implicit: col }.\n  Sortable columns wrap the label + sort icon in ONE native <button> (APG grid\n  sort pattern) so the <th> stays a non-interactive cell carrying only aria-sort;\n  the pin button is a sibling of the sort button, never nested inside it, so no\n  interactive control is nested within another (avoids axe `nested-interactive`).\n-->\n<ng-template #headerCellInnerTpl let-col>\n  <div class=\"mlv-data-table__cell-inner\">\n    @if (col.sortable) {\n    <button\n      type=\"button\"\n      class=\"mlv-data-table__sort-button\"\n      [attr.aria-label]=\"getSortLabel(col)\"\n      (click)=\"onSortClick(col)\"\n    >\n      <span class=\"mlv-data-table__header-title\"\n        >{{ col.title ?? col.key }}</span\n      >\n      <span class=\"mlv-data-table__sort-icon\" aria-hidden=\"true\">\n        @if (getSortDirection(col) === 'asc') {\n        <svg lucideArrowUp />\n        } @else if (getSortDirection(col) === 'desc') {\n        <svg lucideArrowDown />\n        } @else {\n        <svg lucideChevronsUpDown class=\"mlv-data-table__sort-icon--inactive\" />\n        }\n      </span>\n    </button>\n    } @else {\n    <span class=\"mlv-data-table__header-title\">{{ col.title ?? col.key }}</span>\n    } @if (col.pinnable) {\n    <ng-container\n      [ngTemplateOutlet]=\"pinButtonTpl\"\n      [ngTemplateOutletContext]=\"{ $implicit: col }\"\n    />\n    } @if (filterDisplay() === 'column' && col.filterable) {\n    <button\n      mlvButton\n      class=\"mlv-data-table__column-filter\"\n      [class.mlv-data-table__column-filter--active]=\"\n          isColumnFiltered(col.key)\n        \"\n      [variant]=\"\n          columnFilterPopup.opened() || isColumnFiltered(col.key)\n            ? 'primary'\n            : 'transparent'\n        \"\n      shape=\"square\"\n      mlvDensity=\"tight\"\n      type=\"button\"\n      [attr.data-column-key]=\"col.key\"\n      [mlvPopupTrigger]=\"columnFilterPopup\"\n      #columnFilterTrigger=\"mlvPopupTrigger\"\n      [ariaHasPopup]=\"'dialog'\"\n      [attr.aria-label]=\"getFilterLabel(col)\"\n    >\n      <svg lucideFunnel mlvButtonIcon [size]=\"14\" />\n    </button>\n\n    <mlv-popup\n      #columnFilterPopup\n      panelRole=\"dialog\"\n      [ariaLabel]=\"getFilterLabel(col)\"\n      (afterClosed)=\"focusColumnFilterTrigger(col.key)\"\n    >\n      <mlv-dt-filter-dropdown\n        *mlvPopupContent\n        [columns]=\"getColumnFilterColumns(col)\"\n        [activeFilters]=\"activeFilters()\"\n        (activeFiltersChange)=\"onColumnFiltersChange(col.key, $event)\"\n        (closed)=\"columnFilterTrigger.close()\"\n      />\n    </mlv-popup>\n    }\n  </div>\n  @if (col.resizable) {\n  <div\n    #resizeHandle\n    class=\"mlv-data-table__resize-handle\"\n    [attr.data-column-key]=\"col.key\"\n    role=\"separator\"\n    tabindex=\"0\"\n    aria-orientation=\"vertical\"\n    [attr.aria-label]=\"getColumnResizeLabel(col)\"\n    [attr.aria-valuenow]=\"getColumnResizeValue(col)\"\n    [attr.aria-valuemin]=\"getColumnResizeMin(col)\"\n    [attr.aria-valuemax]=\"getColumnResizeMax(col)\"\n    [attr.aria-valuetext]=\"getColumnResizeValueText(col)\"\n    (pointerdown)=\"onResizeStart(col, $event)\"\n    (keydown)=\"onColumnResizeKeydown(col, $event)\"\n    (dblclick)=\"resetColumnWidth(col.key)\"\n  ></div>\n  }\n</ng-template>\n\n<!-- No-data fallback row, used by both rendering paths. -->\n<ng-template #noDataRowTpl>\n  <tr class=\"mlv-data-table__row mlv-data-table__row--no-data\">\n    <td\n      class=\"mlv-data-table__cell mlv-data-table__cell--no-data\"\n      [attr.colspan]=\"totalColumnCount()\"\n    >\n      @if (getNoDataTemplate()) {\n      <ng-container [ngTemplateOutlet]=\"getNoDataTemplate()!\" />\n      } @else {\n      <div class=\"mlv-data-table__no-data-default\">\n        <svg lucideTable2 [size]=\"40\" aria-hidden=\"true\" />\n        <span>No data available</span>\n      </div>\n      }\n    </td>\n  </tr>\n</ng-template>\n\n<!--\n  Failed-request row, used by all three rendering paths. Takes precedence over both the\n  data rows and #noDataRowTpl so a failed request never reads as an empty result set.\n  The region is announced as an alert; the default block is an mlv-empty-state with a\n  danger-toned icon and a Retry button wired to the (retry) output.\n-->\n<ng-template #errorRowTpl>\n  <tr class=\"mlv-data-table__row mlv-data-table__row--error\">\n    <td\n      class=\"mlv-data-table__cell mlv-data-table__cell--error\"\n      [attr.colspan]=\"totalColumnCount()\"\n    >\n      <div class=\"mlv-data-table__error\" role=\"alert\" aria-live=\"assertive\">\n        @if (getErrorTemplate(); as errorTpl) {\n        <ng-container\n          [ngTemplateOutlet]=\"errorTpl\"\n          [ngTemplateOutletContext]=\"_errorContext()\"\n        />\n        } @else {\n        <mlv-empty-state>\n          <svg\n            mlvEmptyStateIcon\n            lucideTriangleAlert\n            class=\"mlv-data-table__error-icon\"\n            [size]=\"40\"\n            aria-hidden=\"true\"\n          />\n          <span mlvEmptyStateTitle>{{ _i18n().errorTitle }}</span>\n          <span mlvEmptyStateDescription>{{ errorMessage() }}</span>\n          <button\n            mlvEmptyStateActions\n            mlvButton\n            variant=\"secondary\"\n            type=\"button\"\n            class=\"mlv-data-table__error-retry\"\n            (click)=\"onRetry()\"\n          >\n            {{ _i18n().retry }}\n          </button>\n        </mlv-empty-state>\n        }\n      </div>\n    </td>\n  </tr>\n</ng-template>\n\n<!--\n  Per-row data cells. Emits the selection cell, the data cells, and the actions cell.\n  The owning <tr> stays at the consumer site (either inside `@for` for the standard mode\n  or `*cdkVirtualFor` inside the CDK viewport in virtual mode), so each rendering path can\n  control its own row-level host bindings.\n-->\n<ng-template #rowCellsTpl let-row let-i=\"index\">\n  @if (selectable()) {\n  <td\n    class=\"mlv-data-table__cell mlv-data-table__cell--data mlv-data-table__cell--select\"\n    [style]=\"getAuxiliaryColumnStyle('selection')\"\n  >\n    <!--\n        [tabbable]=\"false\" keeps this checkbox out of the tab order so the row is\n        the single tab stop: the row's Space/Enter toggles selection, and the\n        checkbox stays operable via the mouse. Avoids a per-row double tab stop.\n      -->\n    <mlv-checkbox\n      [checked]=\"isRowSelected(row)\"\n      [tabbable]=\"false\"\n      (checkedChange)=\"toggleRowSelection(row)\"\n      (click)=\"$event.stopPropagation()\"\n      [ariaLabel]=\"'Select row ' + (i + 1)\"\n    />\n  </td>\n  } @for (col of visibleColumns(); track col.key; let ci = $index) {\n  <td\n    class=\"mlv-data-table__cell mlv-data-table__cell--data\"\n    [class.mlv-data-table__cell--pinned]=\"col.pinned\"\n    [class.mlv-data-table__cell--pinned-left]=\"\n        col.pinned && col.pinSide !== 'right'\n      \"\n    [class.mlv-data-table__cell--pinned-right]=\"\n        col.pinned && col.pinSide === 'right'\n      \"\n    [class]=\"getAlignClass(col)\"\n    [style]=\"getCellStyle(col)\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"cellContentTpl\"\n      [ngTemplateOutletContext]=\"{\n          $implicit: row,\n          index: i,\n          col: col,\n          ci: ci,\n        }\"\n    />\n  </td>\n  } @if (editable()) {\n  <td\n    class=\"mlv-data-table__cell mlv-data-table__cell--data mlv-data-table__cell--actions\"\n    [style]=\"getAuxiliaryColumnStyle('actions')\"\n  >\n    <div class=\"mlv-data-table__cell-content mlv-data-table__actions\">\n      <ng-container\n        [ngTemplateOutlet]=\"actionsButtonsTpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n      />\n    </div>\n  </td>\n  }\n</ng-template>\n\n<!--\n  Shared edit/save/cancel action buttons for the actions column. Context: { $implicit: row, index: i }.\n-->\n<ng-template #actionsButtonsTpl let-row let-i=\"index\">\n  @if (isEditing(i)) {\n  <button\n    mlvButton\n    variant=\"transparent\"\n    shape=\"square\"\n    mlvDensity=\"tight\"\n    type=\"button\"\n    (click)=\"saveEdit(row, i)\"\n    [attr.aria-label]=\"_i18n().saveChanges\"\n  >\n    <svg lucideCheck mlvButtonIcon />\n  </button>\n  <button\n    mlvButton\n    variant=\"transparent\"\n    shape=\"square\"\n    mlvDensity=\"tight\"\n    type=\"button\"\n    (click)=\"cancelEdit(row, i)\"\n    [attr.aria-label]=\"_i18n().cancelEditing\"\n  >\n    <svg lucideX mlvButtonIcon />\n  </button>\n  } @else {\n  <button\n    mlvButton\n    variant=\"transparent\"\n    shape=\"square\"\n    mlvDensity=\"tight\"\n    type=\"button\"\n    (click)=\"startEdit(row, i)\"\n    [attr.aria-label]=\"_i18n().editRow\"\n  >\n    <svg lucidePencil mlvButtonIcon />\n  </button>\n  }\n</ng-template>\n\n<!--\n  Shared inner content of a data cell (indent, expand button, edit/display template, raw value).\n  Extracted so both the standard `#rowCellsTpl` `<td>` and the experimental cell-navigation grid\n  `<td ngGridCell>` render identical content. Purely presentational \u2014 contains no aria grid\n  directives \u2014 so it is safe to project via ngTemplateOutlet across the grid-cell boundary.\n  Context: { $implicit: row, index: i, col, ci }.\n-->\n<ng-template #cellContentTpl let-row let-i=\"index\" let-col=\"col\" let-ci=\"ci\">\n  <div class=\"mlv-data-table__cell-content\">\n    @if (ci === 0 && getDepth(row) > 0) {\n    <span\n      class=\"mlv-data-table__indent\"\n      [style.padding-left.rem]=\"getDepth(row) * 1.25\"\n      aria-hidden=\"true\"\n    ></span>\n    } @if (ci === 0 && hasChildren(row)) {\n    <button\n      mlvButton\n      variant=\"transparent\"\n      shape=\"square\"\n      mlvDensity=\"tight\"\n      type=\"button\"\n      class=\"mlv-data-table__expand-btn\"\n      (click)=\"toggleExpand(row, $event)\"\n      [attr.aria-expanded]=\"isRowExpanded(row)\"\n      [attr.aria-label]=\"\n          isRowExpanded(row) ? _i18n().collapseRow : _i18n().expandRow\n        \"\n    >\n      <svg\n        lucideChevronRight\n        mlvButtonIcon\n        class=\"mlv-data-table__expand-icon\"\n        [class.mlv-data-table__expand-icon--open]=\"isRowExpanded(row)\"\n      />\n    </button>\n    } @if (editable() && isEditing(i) && getEditTemplate(col.key); as editTpl) {\n    <ng-container\n      [ngTemplateOutlet]=\"editTpl\"\n      [ngTemplateOutletContext]=\"getCellContext(row, i)\"\n    />\n    } @else if (getTemplate(col.key); as tpl) {\n    <ng-container\n      [ngTemplateOutlet]=\"tpl\"\n      [ngTemplateOutletContext]=\"getCellContext(row, i)\"\n    />\n    } @else {\n    <!--\n        Default cell renderer. `valueLabels` (or the `filterConfig.options` fallback)\n        maps the raw value to a label; `tone` promotes the cell to a muted badge.\n      -->\n    @if (getCellTone(row, col); as tone) {\n    <mlv-badge [tone]=\"tone\" muted\n      >{{ getCellDisplayValue(row, col) }}</mlv-badge\n    >\n    } @else { {{ getCellDisplayValue(row, col) }} } }\n  </div>\n</ng-template>\n\n<!-- Reusable pin button template. Rendered via ngTemplateOutlet from every header cell that supports pinning. -->\n<ng-template #pinButtonTpl let-col>\n  @if (getPinnableSides(col); as sides) { @if (sides.length > 1) {\n  <button\n    class=\"mlv-data-table__pin-btn\"\n    [class.mlv-data-table__pin-btn--active]=\"isColumnPinned(col)\"\n    type=\"button\"\n    [mlvPopupTrigger]=\"pinPopup\"\n    #pinTrigger=\"mlvPopupTrigger\"\n    (click)=\"$event.stopPropagation()\"\n    [attr.aria-label]=\"\n          isColumnPinned(col) ? _i18n().changePinSide : _i18n().pinColumn\n        \"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"pinPopup.opened()\"\n    [attr.aria-pressed]=\"isColumnPinned(col)\"\n  >\n    @if (isColumnPinned(col)) {\n    <svg lucidePinOff />\n    } @else {\n    <svg lucidePin />\n    }\n  </button>\n  <mlv-popup #pinPopup>\n    <div *mlvPopupContent class=\"mlv-data-table__pin-popup\" role=\"menu\">\n      @for (side of sides; track side) {\n      <button\n        type=\"button\"\n        role=\"menuitemradio\"\n        class=\"mlv-data-table__pin-popup-item\"\n        [class.mlv-data-table__pin-popup-item--active]=\"\n                getColumnPinSide(col) === side\n              \"\n        [attr.aria-checked]=\"getColumnPinSide(col) === side\"\n        (click)=\"\n                pinTo(col, side); pinTrigger.close(); $event.stopPropagation()\n              \"\n      >\n        <svg lucidePin [size]=\"14\" />\n        @if (side === 'left') {\n        <span>Pin left</span>\n        } @else {\n        <span>Pin right</span>\n        }\n      </button>\n      } @if (isColumnPinned(col)) {\n      <button\n        type=\"button\"\n        role=\"menuitem\"\n        class=\"mlv-data-table__pin-popup-item mlv-data-table__pin-popup-item--unpin\"\n        (click)=\"unpin(col); pinTrigger.close(); $event.stopPropagation()\"\n      >\n        <svg lucidePinOff [size]=\"14\" />\n        <span>{{ _i18n().unpin }}</span>\n      </button>\n      }\n    </div>\n  </mlv-popup>\n  } @else {\n  <button\n    class=\"mlv-data-table__pin-btn\"\n    [class.mlv-data-table__pin-btn--active]=\"isColumnPinned(col)\"\n    type=\"button\"\n    (click)=\"togglePin(col, sides[0]); $event.stopPropagation()\"\n    [attr.aria-label]=\"\n          isColumnPinned(col) ? _i18n().unpinColumn : _i18n().pinColumn\n        \"\n    [attr.aria-pressed]=\"isColumnPinned(col)\"\n  >\n    @if (isColumnPinned(col)) {\n    <svg lucidePinOff />\n    } @else {\n    <svg lucidePin />\n    }\n  </button>\n  } }\n</ng-template>\n", styles: [".mlv-data-table{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-dt-font-size)}.mlv-data-table *{box-sizing:border-box}.mlv-data-table{--mlv-dt-row-height: 3.5rem;--mlv-dt-cell-padding-x: 1.25rem;--mlv-dt-header-height: 3rem;--mlv-dt-font-size: var(--mlv-font-size-m);--mlv-dt-header-font-size: var(--mlv-font-size-m);--mlv-dt-icon-size: 1rem;--mlv-dt-toolbar-gap: .5rem;--mlv-dt-toolbar-padding: .75rem 0;display:flex;flex-direction:column;width:100%;position:relative;color:var(--mlv-text-primary)}[class*=--tight] .mlv-data-table:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-data-table[class*=--tight]{--mlv-dt-row-height: 2.5rem;--mlv-dt-cell-padding-x: .75rem;--mlv-dt-header-height: 2.25rem;--mlv-dt-font-size: var(--mlv-font-size-s);--mlv-dt-header-font-size: var(--mlv-font-size-s);--mlv-dt-icon-size: .75rem;--mlv-dt-toolbar-gap: .25rem;--mlv-dt-toolbar-padding: .375rem 0}[class*=--compact] .mlv-data-table:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-data-table[class*=--compact]{--mlv-dt-row-height: 3rem;--mlv-dt-cell-padding-x: 1rem;--mlv-dt-header-height: 2.5rem;--mlv-dt-font-size: var(--mlv-font-size-s);--mlv-dt-header-font-size: var(--mlv-font-size-s);--mlv-dt-icon-size: .875rem;--mlv-dt-toolbar-gap: .375rem;--mlv-dt-toolbar-padding: .5rem 0}[class*=--spacious] .mlv-data-table:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-data-table[class*=--spacious]{--mlv-dt-row-height: 4.25rem;--mlv-dt-cell-padding-x: 1.5rem;--mlv-dt-header-height: 3.25rem;--mlv-dt-font-size: var(--mlv-font-size-l);--mlv-dt-header-font-size: var(--mlv-font-size-l);--mlv-dt-icon-size: 1.125rem;--mlv-dt-toolbar-gap: .75rem;--mlv-dt-toolbar-padding: .75rem 0}[class*=--airy] .mlv-data-table:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-data-table[class*=--airy]{--mlv-dt-row-height: 5rem;--mlv-dt-cell-padding-x: 1.75rem;--mlv-dt-header-height: 3.75rem;--mlv-dt-font-size: var(--mlv-font-size-l);--mlv-dt-header-font-size: var(--mlv-font-size-l);--mlv-dt-icon-size: 1.25rem;--mlv-dt-toolbar-gap: 1rem;--mlv-dt-toolbar-padding: 1rem 0}.mlv-data-table__toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--mlv-dt-toolbar-gap);padding:var(--mlv-dt-toolbar-padding);position:relative}.mlv-data-table__search{flex:1 1 16rem;width:min(100%,24rem);max-width:24rem}.mlv-data-table__toolbar-actions{display:flex;gap:var(--mlv-dt-toolbar-gap);margin-left:auto}.mlv-data-table__filter-badge{font-size:var(--mlv-dt-font-size);color:var(--mlv-text-secondary)}.mlv-data-table__wrapper{width:100%;overflow-x:auto;overflow-y:auto;position:relative}.mlv-data-table__wrapper--virtual{overflow-y:visible;display:flex;flex-direction:column}.mlv-data-table__virtual-viewport{display:block;width:100%;min-width:0;max-width:100%;flex:0 0 auto;position:sticky;left:0;border-bottom:.0625rem solid var(--mlv-border-subtle)}.mlv-data-table__virtual-viewport.cdk-virtual-scrollable{overflow-x:hidden;overflow-y:auto}.mlv-data-table__virtual-horizontal-sizer{width:0;height:0;min-height:0;flex:0 0 0;align-self:flex-start;pointer-events:none}.mlv-data-table__table--virtual-header,.mlv-data-table__table--virtual-footer{--mlv-dt-pinned-right-correction: var( --mlv-dt-virtual-scrollbar-gutter, 0px )}.mlv-data-table__loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--mlv-background-base) 70%,transparent);-webkit-backdrop-filter:blur(.0625rem);backdrop-filter:blur(.0625rem);z-index:20;pointer-events:all}.mlv-data-table__loading-bottom{display:flex;align-items:center;justify-content:center;padding:1rem 0;color:var(--mlv-text-secondary)}.mlv-data-table__table{width:100%;border-collapse:collapse;table-layout:auto;font-size:var(--mlv-dt-font-size);color:var(--mlv-text-primary)}.mlv-data-table__table--striped .mlv-data-table__row--data:nth-child(2n){background:var(--mlv-background-sunken)}.mlv-data-table__table--striped .mlv-data-table__row--data:nth-child(2n) .mlv-data-table__cell--pinned{background:var(--mlv-background-sunken)}.mlv-data-table__table--bordered .mlv-data-table__cell{border-right:.0625rem solid var(--mlv-border-subtle)}.mlv-data-table__table--bordered .mlv-data-table__cell:last-child{border-right:none}.mlv-data-table__table--virtual{table-layout:fixed}.mlv-data-table__head--sticky{position:sticky;top:var(--mlv-dt-sticky-top, 0);z-index:3;background:var(--mlv-background-base)}.mlv-data-table__head--sticky .mlv-data-table__cell--pinned{z-index:4}.mlv-data-table__cell{padding:0;border-bottom:.0625rem solid var(--mlv-border-subtle);vertical-align:middle;background:inherit}.mlv-data-table__cell-content{display:flex;align-items:center;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mlv-data-table__cell--header{font-weight:var(--mlv-font-weight-medium);font-size:var(--mlv-dt-header-font-size);color:color-mix(in srgb,var(--mlv-text-action) 65%,var(--mlv-text-secondary));position:relative;-webkit-user-select:none;user-select:none;border-bottom:.0625rem solid var(--mlv-border-normal)}.mlv-data-table__cell--sortable{cursor:pointer}.mlv-data-table__cell--sortable:hover .mlv-data-table__cell-inner{color:var(--mlv-text-action)}.mlv-data-table__cell--data{padding:0 var(--mlv-dt-cell-padding-x);height:var(--mlv-dt-row-height);font-size:var(--mlv-dt-font-size)}.mlv-data-table__cell--pinned{background:var(--mlv-background-base);z-index:1;transition:background var(--mlv-duration-normal) var(--mlv-ease-default)}.mlv-data-table__cell--pinned:after{content:\"\";position:absolute;top:0;bottom:0;width:.5rem;pointer-events:none}.mlv-data-table__cell--pinned-left:after{right:-.5rem;background:linear-gradient(to right,rgba(0,0,0,.04),transparent)}.mlv-data-table__cell--pinned-right:after{left:-.5rem;background:linear-gradient(to left,rgba(0,0,0,.04),transparent)}.mlv-data-table__cell--no-data,.mlv-data-table__cell--error{padding:3rem var(--mlv-dt-cell-padding-x);text-align:center}.mlv-data-table__cell--align-left{text-align:left}.mlv-data-table__cell--align-center{text-align:center}.mlv-data-table__cell--align-right{text-align:right}.mlv-data-table__cell-inner{display:flex;align-items:center;gap:.375rem;padding:0 var(--mlv-dt-cell-padding-x);height:var(--mlv-dt-header-height);transition:color var(--mlv-duration-normal) var(--mlv-ease-default);border-radius:var(--mlv-radius-s)}.mlv-data-table__sort-button{display:inline-flex;align-items:center;gap:.375rem;flex:1;min-width:0;margin:0;padding:0;border:none;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:var(--mlv-radius-s)}.mlv-data-table__sort-button:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:.125rem}.mlv-data-table__visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}.mlv-data-table__header-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.mlv-data-table__column-filter{flex:0 0 auto}.mlv-data-table__column-filter--active{color:var(--mlv-text-action)}.mlv-data-table__sort-icon{display:inline-flex;flex-shrink:0;color:var(--mlv-text-action)}.mlv-data-table__sort-icon svg{width:var(--mlv-dt-icon-size);height:var(--mlv-dt-icon-size)}.mlv-data-table__sort-icon--inactive{opacity:0;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-default)}.mlv-data-table__cell--sortable:hover .mlv-data-table__sort-icon--inactive{opacity:.5}.mlv-data-table__pin-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;border:none;background:none;cursor:pointer;color:var(--mlv-text-tertiary);opacity:0;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-default),color var(--mlv-duration-normal) var(--mlv-ease-default)}.mlv-data-table__pin-btn svg{width:var(--mlv-dt-icon-size);height:var(--mlv-dt-icon-size)}.mlv-data-table__cell--header:hover .mlv-data-table__pin-btn{opacity:.6}.mlv-data-table__pin-btn:hover{opacity:1!important;color:var(--mlv-text-action)}.mlv-data-table__pin-btn--active{opacity:1;color:var(--mlv-text-action)}.mlv-data-table__cell--header:hover .mlv-data-table__pin-btn--active{opacity:1}.mlv-data-table__resize-handle{position:absolute;top:0;right:-.5rem;width:1rem;height:100%;cursor:col-resize;background:transparent;z-index:5;touch-action:none;-webkit-user-select:none;user-select:none}.mlv-data-table__resize-handle:after{content:\"\";position:absolute;top:.75rem;bottom:.75rem;left:50%;width:.0625rem;border-radius:var(--mlv-radius-full);background-color:var(--mlv-text-secondary);transform:translate(-50%);transition:background-color var(--mlv-duration-fast) var(--mlv-ease-default),width var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-data-table__resize-handle:hover:after{width:.125rem;background-color:var(--mlv-text-primary)}.mlv-data-table__resize-handle:active:after,.mlv-data-table__resize-handle:focus-visible:after{width:.125rem;background-color:var(--mlv-background-accent-1)}.mlv-data-table__resize-handle:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:-.125rem}@media(pointer:coarse){.mlv-data-table__resize-handle{right:-.75rem;width:1.5rem}}.mlv-data-table__row{transition:background var(--mlv-duration-normal) var(--mlv-ease-default)}.mlv-data-table__row--data:hover,.mlv-data-table__row--data:hover .mlv-data-table__cell--pinned,.mlv-data-table__row--expanded,.mlv-data-table__row--expanded .mlv-data-table__cell--pinned{background:var(--mlv-background-sunken)}.mlv-data-table__indent{display:inline-block}.mlv-data-table__expand-btn{margin-right:.25rem;vertical-align:middle;flex-shrink:0}.mlv-data-table__expand-icon{width:var(--mlv-dt-icon-size);height:var(--mlv-dt-icon-size);transition:transform var(--mlv-duration-normal) var(--mlv-ease-default)}.mlv-data-table__expand-icon--open{transform:rotate(90deg)}.mlv-data-table__no-data-default{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:3rem 0;color:var(--mlv-text-tertiary)}.mlv-data-table__no-data-default svg{opacity:.2}.mlv-data-table__no-data-default span{font-size:var(--mlv-dt-font-size)}.mlv-data-table__error{display:block;text-align:initial}.mlv-data-table__error-icon{color:var(--mlv-text-negative)}.mlv-data-table__row--group-header .mlv-data-table__cell--group-header{font-weight:var(--mlv-font-weight-medium);font-size:var(--mlv-dt-header-font-size);color:color-mix(in srgb,var(--mlv-text-action) 65%,var(--mlv-text-secondary));text-align:center;padding:0 var(--mlv-dt-cell-padding-x);height:var(--mlv-dt-header-height);border-bottom:.0625rem solid var(--mlv-border-subtle);vertical-align:middle}.mlv-data-table__row--group-header .mlv-data-table__cell--standalone{vertical-align:middle}.mlv-data-table__cell--actions{width:1%;white-space:nowrap;padding:0 var(--mlv-dt-cell-padding-x)!important}.mlv-data-table__actions{display:flex;align-items:center;gap:.25rem;justify-content:flex-end}.mlv-data-table__row--editing,.mlv-data-table__row--editing .mlv-data-table__cell--pinned{background:var(--mlv-background-sunken)}.mlv-data-table__cell--select{width:2.5rem;min-width:2.5rem;max-width:2.5rem;padding:0 .5rem!important;text-align:center}.mlv-data-table__col--select{width:2.5rem}.mlv-data-table__col--actions{width:5rem}.mlv-data-table__row--selected,.mlv-data-table__row--selected .mlv-data-table__cell--pinned{background:color-mix(in srgb,var(--mlv-background-accent-1) 8%,var(--mlv-background-base))}.mlv-data-table__pin-popup{display:flex;flex-direction:column;gap:.125rem;padding:.25rem;min-width:8rem}.mlv-data-table__pin-popup-item{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;border:none;background:none;border-radius:var(--mlv-radius-s);cursor:pointer;font:inherit;font-size:var(--mlv-dt-font-size);color:var(--mlv-text-primary);text-align:left}.mlv-data-table__pin-popup-item svg{color:var(--mlv-text-secondary);flex-shrink:0}.mlv-data-table__pin-popup-item:hover{background:var(--mlv-background-sunken)}.mlv-data-table__pin-popup-item--active{color:var(--mlv-text-action)}.mlv-data-table__pin-popup-item--active svg{color:var(--mlv-text-action)}.mlv-data-table__pin-popup-item--unpin{color:var(--mlv-text-negative);border-top:.0625rem solid var(--mlv-border-subtle);margin-top:.125rem;padding-top:.5rem;border-radius:0 0 var(--mlv-radius-s) var(--mlv-radius-s)}.mlv-data-table__pin-popup-item--unpin svg{color:var(--mlv-text-negative)}.mlv-data-table__pin-popup-item--unpin:hover{background:color-mix(in srgb,var(--mlv-text-negative) 8%,transparent)}.mlv-data-table__columns-dropdown{display:flex;flex-direction:column;gap:.25rem;padding:.5rem;min-width:10rem}.mlv-data-table__columns-item{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;border-radius:var(--mlv-radius-s);cursor:pointer;font-size:var(--mlv-dt-font-size)}.mlv-data-table__columns-item:hover{background:var(--mlv-background-sunken)}.mlv-data-table__foot{font-weight:var(--mlv-font-weight-medium);font-size:var(--mlv-dt-font-size);background:var(--mlv-background-base)}.mlv-data-table__foot--sticky{position:sticky;bottom:0;z-index:3}.mlv-data-table__foot .mlv-data-table__cell--pinned,.mlv-data-table__row--footer{background:inherit}.mlv-data-table__row--footer>:where(td,th){box-sizing:border-box;padding:0 var(--mlv-dt-cell-padding-x);height:var(--mlv-dt-header-height);border-top:.125rem solid var(--mlv-border-normal);border-bottom:0;vertical-align:middle;background:inherit;font-size:inherit;font-weight:inherit}.mlv-data-table__table--bordered .mlv-data-table__row--footer>:where(td,th){border-right:.0625rem solid var(--mlv-border-subtle)}.mlv-data-table__table--bordered .mlv-data-table__row--footer>:where(td,th):last-child{border-right:none}.mlv-data-table__footer{padding-top:.75rem}@media(prefers-reduced-motion:reduce){.mlv-data-table,.mlv-data-table *,.mlv-data-table:before,.mlv-data-table:after,[class^=mlv-data-table__],[class*=\" mlv-data-table__\"],[class^=mlv-data-table--],[class*=\" mlv-data-table--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: MlvPagination, selector: "mlv-pagination", inputs: ["id", "mobile", "totalItems", "itemsPerPage", "perPageOptions", "displayTotalItems", "currentPage", "mlvDensity"], outputs: ["itemsPerPageChange", "currentPageChange"] }, { kind: "component", type: MlvSearchField, selector: "mlv-search-field", inputs: ["value", "trigger", "debounce", "placeholder", "ariaLabel", "disabled", "loading", "showSubmit", "clearable", "commitOnClear", "presentation", "overlay", "role", "ariaControls", "ariaActiveDescendant", "ariaAutocomplete", "ariaExpanded"], outputs: ["valueChange", "search", "navigate", "commit"] }, { kind: "component", type: MlvFilterDropdown, selector: "mlv-dt-filter-dropdown", inputs: ["columns", "activeFilters"], outputs: ["activeFiltersChange", "closed"] }, { kind: "component", type: MlvButton, selector: "button[mlvButton], a[mlvButton]", inputs: ["variant", "shape", "disabled", "loading"] }, { kind: "component", type: MlvBadge, selector: "mlv-badge", inputs: ["tone", "rounded", "muted"] }, { kind: "component", type: LucideArrowUp, selector: "svg[lucideArrowUp]" }, { kind: "component", type: LucideArrowDown, selector: "svg[lucideArrowDown]" }, { kind: "component", type: LucideChevronsUpDown, selector: "svg[lucideChevronsUpDown]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideFilter, selector: "svg[lucideFunnel], svg[lucideFilter]" }, { kind: "component", type: LucideTable2, selector: "svg[lucideTable2]" }, { kind: "component", type: LucidePencil, selector: "svg[lucidePencil]" }, { kind: "component", type: LucideCheck, selector: "svg[lucideCheck]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucidePlus, selector: "svg[lucidePlus]" }, { kind: "component", type: LucidePin, selector: "svg[lucidePin]" }, { kind: "component", type: LucidePinOff, selector: "svg[lucidePinOff]" }, { kind: "component", type: LucideEye, selector: "svg[lucideEye]" }, { kind: "component", type: LucideTriangleAlert, selector: "svg[lucideTriangleAlert], svg[lucideAlertTriangle]" }, { kind: "component", type: MlvEmptyState, selector: "mlv-empty-state" }, { kind: "component", type: MlvLoader, selector: "mlv-loader", inputs: ["variant", "tone", "value", "max", "indeterminate", "size", "strokeWidth", "ariaLabel", "showHint", "color", "trackColor", "glow"] }, { kind: "component", type: MlvCheckbox, selector: "mlv-checkbox", inputs: ["ariaLabelledBy", "checked", "indeterminate", "tabbable"], outputs: ["checkedChange"] }, { kind: "directive", type: MlvPopupTrigger, selector: "[mlvPopupTrigger]", inputs: ["mlvPopupTrigger", "triggerOn", "ariaHasPopup"], exportAs: ["mlvPopupTrigger"] }, { kind: "component", type: MlvPopup, selector: "mlv-popup", inputs: ["position", "positions", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "hasArrow", "hasShadow", "class", "mlvDensity", "flexibleDimensions", "scrollStrategy", "hasBackdrop", "restrictPosition", "panelRole", "modal", "ariaLabel", "dismissExcludeElements", "mobileMode", "mobileBreakpoint", "mobileTitle", "mobileCloseLabel", "opened"], outputs: ["openedChange", "afterOpened", "afterClosed"] }, { kind: "directive", type: MlvPopupContent, selector: "[mlvPopupContent]" }, { kind: "directive", type: MlvInfiniteScroll, selector: "[mlvInfiniteScroll]", inputs: ["threshold", "loading", "hasMore", "disabled", "orientation", "scrollContainer"], outputs: ["loadMore"], exportAs: ["mlvInfiniteScroll"] }, { kind: "directive", type: MlvButtonIcon, selector: "[mlvButtonIcon]" }, { kind: "directive", type: Grid, selector: "[ngGrid]", inputs: ["enableSelection", "disabled", "softDisabled", "focusMode", "rowWrap", "colWrap", "multi", "selectionMode", "tabindex"], exportAs: ["ngGrid"] }, { kind: "directive", type: GridRow, selector: "[ngGridRow]", inputs: ["rowIndex"], exportAs: ["ngGridRow"] }, { kind: "directive", type: GridCell, selector: "[ngGridCell]", inputs: ["id", "role", "rowSpan", "colSpan", "rowIndex", "colIndex", "disabled", "selected", "selectable", "tabindex"], outputs: ["selectedChange"], exportAs: ["ngGridCell"] }, { kind: "directive", type: GridCellWidget, selector: "[ngGridCellWidget]", inputs: ["id", "widgetType", "disabled", "focusTarget", "tabindex"], outputs: ["activated", "deactivated"], exportAs: ["ngGridCellWidget"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDataTable, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-data-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgTemplateOutlet,
+                        ScrollingModule,
+                        MlvPagination,
+                        MlvSearchField,
+                        MlvFilterDropdown,
+                        MlvButton,
+                        MlvBadge,
+                        LucideArrowUp,
+                        LucideArrowDown,
+                        LucideChevronsUpDown,
+                        LucideChevronRight,
+                        LucideFilter,
+                        LucideTable2,
+                        LucideFunnel,
+                        LucidePencil,
+                        LucideCheck,
+                        LucideX,
+                        LucidePlus,
+                        LucidePin,
+                        LucidePinOff,
+                        LucideEye,
+                        LucideTriangleAlert,
+                        MlvEmptyState,
+                        MlvLoader,
+                        MlvCheckbox,
+                        MlvPopupTrigger,
+                        MlvPopup,
+                        MlvPopupContent,
+                        MlvInfiniteScroll,
+                        MlvButtonIcon,
+                        Grid,
+                        GridRow,
+                        GridCell,
+                        GridCellWidget,
+                    ], providers: [
+                        { provide: MLV_DENSITY_ELEMENT, useValue: 'data-table' },
+                        MlvDataTableEditingService,
+                        MlvDataTableColumnVisibilityService,
+                        MlvDataTablePinningService,
+                    ], hostDirectives: [
+                        {
+                            directive: MlvDensityDirective,
+                            inputs: ['mlvDensity'],
+                        },
+                    ], host: {
+                        class: 'mlv-data-table',
+                    }, template: "@if (hasToolbarContent()) {\n<div class=\"mlv-data-table__toolbar\">\n  @if (showSearch() && hasSearchableColumns()) {\n  <mlv-search-field\n    class=\"mlv-data-table__search\"\n    [value]=\"_searchDraft()\"\n    (valueChange)=\"_searchDraft.set($event)\"\n    [trigger]=\"searchTrigger()\"\n    [debounce]=\"searchDebounce()\"\n    [loading]=\"loading()\"\n    [placeholder]=\"_i18n().searchPlaceholder\"\n    [ariaLabel]=\"_i18n().searchLabel\"\n    (search)=\"onSearch($event)\"\n  />\n  } @if (filterDisplay() !== 'none' && hasFilters()) {\n  <span class=\"mlv-data-table__filter-badge\" aria-live=\"polite\">\n    {{ activeFilterLabel() }}\n  </span>\n  }\n  <div class=\"mlv-data-table__toolbar-actions\">\n    @if (editable() && addRow()) {\n    <button\n      mlvButton\n      variant=\"secondary\"\n      mlvDensity=\"compact\"\n      type=\"button\"\n      (click)=\"onAddRow()\"\n      [attr.aria-label]=\"_i18n().addNewRow\"\n    >\n      <svg lucidePlus mlvButtonIcon [size]=\"14\" />\n      {{ _i18n().addRow }}\n    </button>\n    } @if (hasHideableColumns()) {\n    <button\n      mlvButton\n      [variant]=\"columnsPopup.opened() ? 'primary' : 'secondary'\"\n      mlvDensity=\"compact\"\n      type=\"button\"\n      [mlvPopupTrigger]=\"columnsPopup\"\n      #columnsTrigger=\"mlvPopupTrigger\"\n      [attr.aria-label]=\"_i18n().toggleColumnVisibility\"\n    >\n      <svg mlvButtonIcon lucideEye [size]=\"14\" />\n      {{ _i18n().columns }}\n    </button>\n\n    <mlv-popup #columnsPopup>\n      <div *mlvPopupContent class=\"mlv-data-table__columns-dropdown\">\n        @for (col of allColumns(); track col.key) { @if (col.hideable) {\n        <div class=\"mlv-data-table__columns-item\">\n          <mlv-checkbox\n            [checked]=\"!isColumnHidden(col.key)\"\n            (checkedChange)=\"toggleColumnVisibility(col.key)\"\n          />\n          <span>{{ col.title ?? col.key }}</span>\n        </div>\n        } }\n      </div>\n    </mlv-popup>\n    } @if (filterDisplay() === 'toolbar' && hasFilterableColumns()) {\n    <button\n      #filterBtn\n      mlvButton\n      [variant]=\"filtersPopup.opened() ? 'primary' : 'secondary'\"\n      mlvDensity=\"compact\"\n      type=\"button\"\n      [mlvPopupTrigger]=\"filtersPopup\"\n      #trigger=\"mlvPopupTrigger\"\n      [ariaHasPopup]=\"'dialog'\"\n      [attr.aria-label]=\"_i18n().toggleFilters\"\n    >\n      <svg lucideFilter mlvButtonIcon [size]=\"14\" />\n      {{ _i18n().filters }} @if (hasFilters()) {\n      <mlv-badge tone=\"primary\" rounded>{{ activeFilters().length }}</mlv-badge>\n      }\n    </button>\n\n    <mlv-popup\n      #filtersPopup\n      panelRole=\"dialog\"\n      [ariaLabel]=\"_i18n().filters\"\n      (afterClosed)=\"_onFiltersClosed()\"\n    >\n      <mlv-dt-filter-dropdown\n        *mlvPopupContent\n        [columns]=\"columns()\"\n        [(activeFilters)]=\"activeFilters\"\n        (closed)=\"trigger.close()\"\n      />\n    </mlv-popup>\n    }\n  </div>\n</div>\n}\n\n<div\n  class=\"mlv-data-table__wrapper\"\n  [class.mlv-data-table__wrapper--virtual]=\"virtualScroll()\"\n  [style.max-height]=\"virtualScroll() ? null : maxHeight()\"\n  [style.--mlv-dt-virtual-scrollbar-gutter]=\"\n    virtualScroll() ? _virtualScrollbarGutter() + 'px' : null\n  \"\n  #tableWrapper\n  mlvInfiniteScroll\n  [disabled]=\"paginationMode() !== 'infinite' || virtualScroll()\"\n  [threshold]=\"infiniteScrollThreshold()\"\n  [loading]=\"!!loading()\"\n  [hasMore]=\"!!hasMore()\"\n  (loadMore)=\"onInfiniteScrollLoadMore($event)\"\n>\n  @if (virtualScroll()) {\n  <!-- ==================== Virtual scroll mode ==================== -->\n  <!-- Header table \u2014 sits naturally at the top of the wrapper, outside the viewport -->\n  <table\n    class=\"mlv-data-table__table mlv-data-table__table--virtual mlv-data-table__table--virtual-header\"\n    [class.mlv-data-table__table--bordered]=\"bordered()\"\n    [style.width.px]=\"resizedTableWidth()\"\n    [style.flex]=\"resizedTableWidth() === null ? null : '0 0 auto'\"\n    role=\"grid\"\n  >\n    <ng-container [ngTemplateOutlet]=\"colgroupTpl\" />\n    <thead class=\"mlv-data-table__head\">\n      <ng-container [ngTemplateOutlet]=\"headRowsTpl\" />\n    </thead>\n  </table>\n\n  <!-- CDK virtual scroll viewport \u2014 owns the only vertical scroll surface in this mode.\n         Infinite scroll is intentionally disabled in virtual mode: virtual scrolling is the\n         rendering optimisation for already-loaded data, and the two strategies are mutually\n         exclusive in this component. -->\n  <cdk-virtual-scroll-viewport\n    class=\"mlv-data-table__virtual-viewport\"\n    [itemSize]=\"rowHeight()\"\n    [style.height]=\"virtualViewportHeight()\"\n  >\n    <table\n      class=\"mlv-data-table__table mlv-data-table__table--virtual mlv-data-table__table--virtual-body\"\n      [class.mlv-data-table__table--striped]=\"striped()\"\n      [class.mlv-data-table__table--bordered]=\"bordered()\"\n      [style.width.px]=\"resizedTableWidth()\"\n      role=\"presentation\"\n    >\n      <ng-container [ngTemplateOutlet]=\"colgroupTpl\" />\n      <tbody class=\"mlv-data-table__body\">\n        @if (showError()) {\n        <ng-container [ngTemplateOutlet]=\"errorRowTpl\" />\n        } @else if (flatRows().length === 0) {\n        <ng-container [ngTemplateOutlet]=\"noDataRowTpl\" />\n        } @else {\n        <tr\n          *cdkVirtualFor=\"\n                let row of flatRows();\n                let i = index;\n                trackBy: trackByRow\n              \"\n          class=\"mlv-data-table__row mlv-data-table__row--data\"\n          [class.mlv-data-table__row--expanded]=\"isRowExpanded(row)\"\n          [class.mlv-data-table__row--editing]=\"isEditing(i)\"\n          [class.mlv-data-table__row--selected]=\"isRowSelected(row)\"\n          [style.height.px]=\"rowHeight()\"\n          [attr.aria-level]=\"getDepth(row) > 0 ? getDepth(row) + 1 : null\"\n          [attr.aria-selected]=\"selectable() ? isRowSelected(row) : null\"\n          [attr.tabindex]=\"_rowTabIndex(i)\"\n          [attr.data-row-index]=\"i\"\n          (click)=\"onRowClick(row, i, $event)\"\n          (focus)=\"_onRowFocus(i)\"\n          (keydown)=\"_onRowKeydown(i, row, $event)\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"rowCellsTpl\"\n            [ngTemplateOutletContext]=\"getCellContext(row, i)\"\n          />\n        </tr>\n        }\n      </tbody>\n    </table>\n  </cdk-virtual-scroll-viewport>\n\n  <!-- Footer summary table \u2014 only when a footer template is projected -->\n  @if (getFooterTemplate(); as footerTpl) {\n  <table\n    class=\"mlv-data-table__table mlv-data-table__table--virtual mlv-data-table__table--virtual-footer\"\n    [class.mlv-data-table__table--bordered]=\"bordered()\"\n    [style.width.px]=\"resizedTableWidth()\"\n    [style.flex]=\"resizedTableWidth() === null ? null : '0 0 auto'\"\n    role=\"presentation\"\n  >\n    <ng-container [ngTemplateOutlet]=\"colgroupTpl\" />\n    <tfoot class=\"mlv-data-table__foot\">\n      <tr class=\"mlv-data-table__row mlv-data-table__row--footer\">\n        <ng-container\n          [ngTemplateOutlet]=\"footerTpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: visibleColumns() }\"\n        />\n      </tr>\n    </tfoot>\n  </table>\n  }\n\n  <!-- Extends only the outer horizontal scroll range to match the viewport's\n         native range, including a classic vertical scrollbar gutter. -->\n  <div\n    class=\"mlv-data-table__virtual-horizontal-sizer\"\n    [style.width.px]=\"_virtualHorizontalScrollExtent()\"\n    aria-hidden=\"true\"\n  ></div>\n  } @else if (_cellNav()) {\n  <!-- ========= Experimental cell-level grid navigation (aria ngGrid) ========= -->\n  <!--\n      Opt-in via [cellNavigation]=\"true\" (non-virtual only). The aria Grid pattern owns\n      roving focus, arrow/Home/End navigation across cells, and aria-activedescendant.\n      Only the data <tbody> rows/cells are registered as grid rows/cells; header cells\n      stay outside grid navigation. Interactive cells (edit inputs, action buttons)\n      expose an ngGridCellWidget so Enter pauses grid nav to interact and Escape resumes.\n    -->\n  <table\n    ngGrid\n    rowWrap=\"nowrap\"\n    colWrap=\"nowrap\"\n    class=\"mlv-data-table__table\"\n    [class.mlv-data-table__table--striped]=\"striped()\"\n    [class.mlv-data-table__table--bordered]=\"bordered()\"\n    [style.width.px]=\"resizedTableWidth()\"\n    [style.table-layout]=\"resizedTableWidth() === null ? null : 'fixed'\"\n    role=\"grid\"\n    #tableEl\n  >\n    <ng-container [ngTemplateOutlet]=\"colgroupTpl\" />\n    <thead\n      class=\"mlv-data-table__head\"\n      [class.mlv-data-table__head--sticky]=\"stickyHeader()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"headRowsTpl\" />\n    </thead>\n\n    <tbody class=\"mlv-data-table__body\">\n      @if (showError()) {\n      <ng-container [ngTemplateOutlet]=\"errorRowTpl\" />\n      } @else if (flatRows().length === 0) {\n      <ng-container [ngTemplateOutlet]=\"noDataRowTpl\" />\n      } @else { @for (row of flatRows(); track $index; let i = $index) {\n      <tr\n        ngGridRow\n        class=\"mlv-data-table__row mlv-data-table__row--data\"\n        [class.mlv-data-table__row--expanded]=\"isRowExpanded(row)\"\n        [class.mlv-data-table__row--editing]=\"isEditing(i)\"\n        [class.mlv-data-table__row--selected]=\"isRowSelected(row)\"\n        [attr.aria-level]=\"getDepth(row) > 0 ? getDepth(row) + 1 : null\"\n        [attr.aria-selected]=\"selectable() ? isRowSelected(row) : null\"\n        [attr.data-row-index]=\"i\"\n        (click)=\"onRowClick(row, i, $event)\"\n      >\n        @if (selectable()) {\n        <td\n          ngGridCell\n          class=\"mlv-data-table__cell mlv-data-table__cell--data mlv-data-table__cell--select\"\n          [style]=\"getAuxiliaryColumnStyle('selection')\"\n        >\n          <mlv-checkbox\n            [checked]=\"isRowSelected(row)\"\n            [tabbable]=\"false\"\n            (checkedChange)=\"toggleRowSelection(row)\"\n            (click)=\"$event.stopPropagation()\"\n            [ariaLabel]=\"'Select row ' + (i + 1)\"\n          />\n        </td>\n        } @for (col of visibleColumns(); track col.key; let ci = $index) {\n        <td\n          ngGridCell\n          class=\"mlv-data-table__cell mlv-data-table__cell--data\"\n          [class.mlv-data-table__cell--pinned]=\"col.pinned\"\n          [class.mlv-data-table__cell--pinned-left]=\"\n                    col.pinned && col.pinSide !== 'right'\n                  \"\n          [class.mlv-data-table__cell--pinned-right]=\"\n                    col.pinned && col.pinSide === 'right'\n                  \"\n          [class]=\"getAlignClass(col)\"\n          [style]=\"getCellStyle(col)\"\n        >\n          @if ( editable() && isEditing(i) && getEditTemplate(col.key); as\n          editTpl ) {\n          <div\n            ngGridCellWidget\n            widgetType=\"editable\"\n            class=\"mlv-data-table__cell-content\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"editTpl\"\n              [ngTemplateOutletContext]=\"getCellContext(row, i)\"\n            />\n          </div>\n          } @else {\n          <ng-container\n            [ngTemplateOutlet]=\"cellContentTpl\"\n            [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        index: i,\n                        col: col,\n                        ci: ci,\n                      }\"\n          />\n          }\n        </td>\n        } @if (editable()) {\n        <td\n          ngGridCell\n          class=\"mlv-data-table__cell mlv-data-table__cell--data mlv-data-table__cell--actions\"\n          [style]=\"getAuxiliaryColumnStyle('actions')\"\n        >\n          <div\n            ngGridCellWidget\n            widgetType=\"complex\"\n            class=\"mlv-data-table__cell-content mlv-data-table__actions\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"actionsButtonsTpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n            />\n          </div>\n        </td>\n        }\n      </tr>\n      } }\n    </tbody>\n\n    @if (getFooterTemplate(); as footerTpl) {\n    <tfoot\n      class=\"mlv-data-table__foot\"\n      [class.mlv-data-table__foot--sticky]=\"stickyHeader()\"\n    >\n      <tr class=\"mlv-data-table__row mlv-data-table__row--footer\">\n        <ng-container\n          [ngTemplateOutlet]=\"footerTpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: visibleColumns() }\"\n        />\n      </tr>\n    </tfoot>\n    }\n  </table>\n\n  @if (paginationMode() === 'infinite' && loading()) {\n  <div\n    class=\"mlv-data-table__loading-bottom\"\n    aria-live=\"polite\"\n    aria-busy=\"true\"\n  >\n    <mlv-loader\n      variant=\"circle\"\n      [indeterminate]=\"true\"\n      [size]=\"24\"\n      ariaLabel=\"Loading more rows\"\n    />\n  </div>\n  } } @else {\n  <!-- ==================== Standard (non-virtual) mode ==================== -->\n  <table\n    class=\"mlv-data-table__table\"\n    [class.mlv-data-table__table--striped]=\"striped()\"\n    [class.mlv-data-table__table--bordered]=\"bordered()\"\n    [style.width.px]=\"resizedTableWidth()\"\n    [style.table-layout]=\"resizedTableWidth() === null ? null : 'fixed'\"\n    role=\"grid\"\n    #tableEl\n  >\n    <ng-container [ngTemplateOutlet]=\"colgroupTpl\" />\n    <thead\n      class=\"mlv-data-table__head\"\n      [class.mlv-data-table__head--sticky]=\"stickyHeader()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"headRowsTpl\" />\n    </thead>\n\n    <tbody class=\"mlv-data-table__body\">\n      @if (showError()) {\n      <ng-container [ngTemplateOutlet]=\"errorRowTpl\" />\n      } @else if (flatRows().length === 0) {\n      <ng-container [ngTemplateOutlet]=\"noDataRowTpl\" />\n      } @else { @for (row of flatRows(); track $index; let i = $index) {\n      <tr\n        class=\"mlv-data-table__row mlv-data-table__row--data\"\n        [class.mlv-data-table__row--expanded]=\"isRowExpanded(row)\"\n        [class.mlv-data-table__row--editing]=\"isEditing(i)\"\n        [class.mlv-data-table__row--selected]=\"isRowSelected(row)\"\n        [attr.aria-level]=\"getDepth(row) > 0 ? getDepth(row) + 1 : null\"\n        [attr.aria-selected]=\"selectable() ? isRowSelected(row) : null\"\n        [attr.tabindex]=\"_rowTabIndex(i)\"\n        [attr.data-row-index]=\"i\"\n        (click)=\"onRowClick(row, i, $event)\"\n        (focus)=\"_onRowFocus(i)\"\n        (keydown)=\"_onRowKeydown(i, row, $event)\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"rowCellsTpl\"\n          [ngTemplateOutletContext]=\"getCellContext(row, i)\"\n        />\n      </tr>\n      } }\n    </tbody>\n\n    @if (getFooterTemplate(); as footerTpl) {\n    <tfoot\n      class=\"mlv-data-table__foot\"\n      [class.mlv-data-table__foot--sticky]=\"stickyHeader()\"\n    >\n      <tr class=\"mlv-data-table__row mlv-data-table__row--footer\">\n        <ng-container\n          [ngTemplateOutlet]=\"footerTpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: visibleColumns() }\"\n        />\n      </tr>\n    </tfoot>\n    }\n  </table>\n\n  @if (paginationMode() === 'infinite' && loading()) {\n  <div\n    class=\"mlv-data-table__loading-bottom\"\n    aria-live=\"polite\"\n    aria-busy=\"true\"\n  >\n    <mlv-loader\n      variant=\"circle\"\n      [indeterminate]=\"true\"\n      [size]=\"24\"\n      ariaLabel=\"Loading more rows\"\n    />\n  </div>\n  } }\n</div>\n\n@if (paginationMode() === 'paged' && !virtualScroll()) {\n<div class=\"mlv-data-table__footer\">\n  <mlv-pagination\n    [totalItems]=\"totalItems()\"\n    [(currentPage)]=\"currentPage\"\n    [(itemsPerPage)]=\"currentPerPage\"\n  />\n</div>\n} @if (paginationMode() === 'paged' && loading()) {\n<div\n  class=\"mlv-data-table__loading-overlay\"\n  aria-live=\"polite\"\n  aria-busy=\"true\"\n>\n  <mlv-loader\n    variant=\"circle\"\n    [indeterminate]=\"true\"\n    [size]=\"48\"\n    ariaLabel=\"Loading table data\"\n  />\n</div>\n}\n\n<!-- ==================== Reusable templates ==================== -->\n\n<!--\n  Shared <colgroup> template \u2014 used by both the standard table and the three split tables in\n  virtual mode (header / body / footer). Keeping the colgroup definitions identical and combining\n  it with `table-layout: fixed` keeps column widths in sync between the split tables in virtual mode.\n-->\n<ng-template #colgroupTpl>\n  <colgroup>\n    @if (selectable() === 'multi' || selectable() === 'single') {\n    <col\n      class=\"mlv-data-table__col--select\"\n      [style.width]=\"getAuxiliaryColumnWidth('selection')\"\n    />\n    } @for (col of visibleColumns(); track col.key) {\n    <col [style.width]=\"getColWidth(col)\" />\n    } @if (editable()) {\n    <col\n      class=\"mlv-data-table__col--actions\"\n      [style.width]=\"getAuxiliaryColumnWidth('actions')\"\n    />\n    }\n  </colgroup>\n</ng-template>\n\n<!-- Header rows \u2014 emits the same content the original `<thead>` did. -->\n<ng-template #headRowsTpl>\n  @if (hasColumnGroups()) {\n  <!-- Group header row -->\n  <tr class=\"mlv-data-table__row mlv-data-table__row--group-header\">\n    @if (selectable() === 'multi') {\n    <th\n      class=\"mlv-data-table__cell mlv-data-table__cell--header mlv-data-table__cell--select\"\n      [style]=\"getAuxiliaryColumnStyle('selection')\"\n      rowspan=\"2\"\n    >\n      <mlv-checkbox\n        [checked]=\"allRowsSelected()\"\n        [indeterminate]=\"someRowsSelected()\"\n        (checkedChange)=\"toggleSelectAll()\"\n        [ariaLabel]=\"_i18n().selectAllRows\"\n      />\n    </th>\n    } @else if (selectable() === 'single') {\n    <th\n      class=\"mlv-data-table__cell mlv-data-table__cell--header mlv-data-table__cell--select\"\n      [style]=\"getAuxiliaryColumnStyle('selection')\"\n      rowspan=\"2\"\n    ></th>\n    } @for (col of visibleColumns(); track col.key) { @if (headerLayout(); as\n    layout) { @if (layout.standaloneKeys.has(col.key)) {\n    <!-- Standalone column spans both header rows -->\n    <th\n      class=\"mlv-data-table__cell mlv-data-table__cell--header mlv-data-table__cell--standalone\"\n      [class.mlv-data-table__cell--sortable]=\"col.sortable\"\n      [class.mlv-data-table__cell--pinned]=\"col.pinned\"\n      [class.mlv-data-table__cell--pinned-left]=\"\n                col.pinned && col.pinSide !== 'right'\n              \"\n      [class.mlv-data-table__cell--pinned-right]=\"\n                col.pinned && col.pinSide === 'right'\n              \"\n      [class]=\"getAlignClass(col)\"\n      [style]=\"getCellStyle(col)\"\n      [attr.data-mlv-column-key]=\"col.key\"\n      rowspan=\"2\"\n      scope=\"col\"\n      [attr.aria-sort]=\"\n                col.sortable\n                  ? getSortDirection(col) === 'asc'\n                    ? 'ascending'\n                    : getSortDirection(col) === 'desc'\n                      ? 'descending'\n                      : 'none'\n                  : null\n              \"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"headerCellInnerTpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: col }\"\n      />\n    </th>\n    } @else {\n    <!-- Check if this column is the first column of a group -->\n    @for (group of columnGroups(); track group.title) { @if (group.columns[0]\n    === col.key) {\n    <th\n      class=\"mlv-data-table__cell mlv-data-table__cell--header mlv-data-table__cell--group-header\"\n      [class.mlv-data-table__cell--align-left]=\"\n                    group.align === 'left'\n                  \"\n      [class.mlv-data-table__cell--align-center]=\"\n                    group.align === 'center' || !group.align\n                  \"\n      [class.mlv-data-table__cell--align-right]=\"\n                    group.align === 'right'\n                  \"\n      [attr.colspan]=\"group.columns.length\"\n      scope=\"colgroup\"\n    >\n      {{ group.title }}\n    </th>\n    } } } } } @if (editable()) {\n    <th\n      class=\"mlv-data-table__cell mlv-data-table__cell--header mlv-data-table__cell--actions\"\n      [style]=\"getAuxiliaryColumnStyle('actions')\"\n      rowspan=\"2\"\n    >\n      <span class=\"mlv-data-table__visually-hidden\"\n        >{{ actionsHeaderLabel() }}</span\n      >\n    </th>\n    }\n  </tr>\n  <!-- Sub-header row for grouped columns -->\n  <tr class=\"mlv-data-table__row mlv-data-table__row--header\">\n    @for (col of visibleColumns(); track col.key) { @if (headerLayout(); as\n    layout) { @if (layout.groupedKeys.has(col.key)) {\n    <th\n      class=\"mlv-data-table__cell mlv-data-table__cell--header\"\n      [class.mlv-data-table__cell--sortable]=\"col.sortable\"\n      [class.mlv-data-table__cell--pinned]=\"col.pinned\"\n      [class.mlv-data-table__cell--pinned-left]=\"\n                col.pinned && col.pinSide !== 'right'\n              \"\n      [class.mlv-data-table__cell--pinned-right]=\"\n                col.pinned && col.pinSide === 'right'\n              \"\n      [class]=\"getAlignClass(col)\"\n      [style]=\"getCellStyle(col)\"\n      [attr.data-mlv-column-key]=\"col.key\"\n      scope=\"col\"\n      [attr.aria-sort]=\"\n                col.sortable\n                  ? getSortDirection(col) === 'asc'\n                    ? 'ascending'\n                    : getSortDirection(col) === 'desc'\n                      ? 'descending'\n                      : 'none'\n                  : null\n              \"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"headerCellInnerTpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: col }\"\n      />\n    </th>\n    } } }\n  </tr>\n  } @else {\n  <!-- Standard single-row header -->\n  <tr class=\"mlv-data-table__row mlv-data-table__row--header\">\n    @if (selectable() === 'multi') {\n    <th\n      class=\"mlv-data-table__cell mlv-data-table__cell--header mlv-data-table__cell--select\"\n      [style]=\"getAuxiliaryColumnStyle('selection')\"\n    >\n      <mlv-checkbox\n        [checked]=\"allRowsSelected()\"\n        [indeterminate]=\"someRowsSelected()\"\n        (checkedChange)=\"toggleSelectAll()\"\n        [ariaLabel]=\"_i18n().selectAllRows\"\n      />\n    </th>\n    } @else if (selectable() === 'single') {\n    <th\n      class=\"mlv-data-table__cell mlv-data-table__cell--header mlv-data-table__cell--select\"\n      [style]=\"getAuxiliaryColumnStyle('selection')\"\n    ></th>\n    } @for (col of visibleColumns(); track col.key) {\n    <th\n      class=\"mlv-data-table__cell mlv-data-table__cell--header\"\n      [class.mlv-data-table__cell--sortable]=\"col.sortable\"\n      [class.mlv-data-table__cell--pinned]=\"col.pinned\"\n      [class.mlv-data-table__cell--pinned-left]=\"\n            col.pinned && col.pinSide !== 'right'\n          \"\n      [class.mlv-data-table__cell--pinned-right]=\"\n            col.pinned && col.pinSide === 'right'\n          \"\n      [class]=\"getAlignClass(col)\"\n      [style]=\"getCellStyle(col)\"\n      [attr.data-mlv-column-key]=\"col.key\"\n      [attr.aria-sort]=\"\n            col.sortable\n              ? getSortDirection(col) === 'asc'\n                ? 'ascending'\n                : getSortDirection(col) === 'desc'\n                  ? 'descending'\n                  : 'none'\n              : null\n          \"\n      scope=\"col\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"headerCellInnerTpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: col }\"\n      />\n    </th>\n    } @if (editable()) {\n    <th\n      class=\"mlv-data-table__cell mlv-data-table__cell--header mlv-data-table__cell--actions\"\n      [style]=\"getAuxiliaryColumnStyle('actions')\"\n    >\n      <span class=\"mlv-data-table__visually-hidden\"\n        >{{ actionsHeaderLabel() }}</span\n      >\n    </th>\n    }\n  </tr>\n  }\n</ng-template>\n\n<!--\n  Shared inner content for a single header cell. Context: { $implicit: col }.\n  Sortable columns wrap the label + sort icon in ONE native <button> (APG grid\n  sort pattern) so the <th> stays a non-interactive cell carrying only aria-sort;\n  the pin button is a sibling of the sort button, never nested inside it, so no\n  interactive control is nested within another (avoids axe `nested-interactive`).\n-->\n<ng-template #headerCellInnerTpl let-col>\n  <div class=\"mlv-data-table__cell-inner\">\n    @if (col.sortable) {\n    <button\n      type=\"button\"\n      class=\"mlv-data-table__sort-button\"\n      [attr.aria-label]=\"getSortLabel(col)\"\n      (click)=\"onSortClick(col)\"\n    >\n      <span class=\"mlv-data-table__header-title\"\n        >{{ col.title ?? col.key }}</span\n      >\n      <span class=\"mlv-data-table__sort-icon\" aria-hidden=\"true\">\n        @if (getSortDirection(col) === 'asc') {\n        <svg lucideArrowUp />\n        } @else if (getSortDirection(col) === 'desc') {\n        <svg lucideArrowDown />\n        } @else {\n        <svg lucideChevronsUpDown class=\"mlv-data-table__sort-icon--inactive\" />\n        }\n      </span>\n    </button>\n    } @else {\n    <span class=\"mlv-data-table__header-title\">{{ col.title ?? col.key }}</span>\n    } @if (col.pinnable) {\n    <ng-container\n      [ngTemplateOutlet]=\"pinButtonTpl\"\n      [ngTemplateOutletContext]=\"{ $implicit: col }\"\n    />\n    } @if (filterDisplay() === 'column' && col.filterable) {\n    <button\n      mlvButton\n      class=\"mlv-data-table__column-filter\"\n      [class.mlv-data-table__column-filter--active]=\"\n          isColumnFiltered(col.key)\n        \"\n      [variant]=\"\n          columnFilterPopup.opened() || isColumnFiltered(col.key)\n            ? 'primary'\n            : 'transparent'\n        \"\n      shape=\"square\"\n      mlvDensity=\"tight\"\n      type=\"button\"\n      [attr.data-column-key]=\"col.key\"\n      [mlvPopupTrigger]=\"columnFilterPopup\"\n      #columnFilterTrigger=\"mlvPopupTrigger\"\n      [ariaHasPopup]=\"'dialog'\"\n      [attr.aria-label]=\"getFilterLabel(col)\"\n    >\n      <svg lucideFunnel mlvButtonIcon [size]=\"14\" />\n    </button>\n\n    <mlv-popup\n      #columnFilterPopup\n      panelRole=\"dialog\"\n      [ariaLabel]=\"getFilterLabel(col)\"\n      (afterClosed)=\"focusColumnFilterTrigger(col.key)\"\n    >\n      <mlv-dt-filter-dropdown\n        *mlvPopupContent\n        [columns]=\"getColumnFilterColumns(col)\"\n        [activeFilters]=\"activeFilters()\"\n        (activeFiltersChange)=\"onColumnFiltersChange(col.key, $event)\"\n        (closed)=\"columnFilterTrigger.close()\"\n      />\n    </mlv-popup>\n    }\n  </div>\n  @if (col.resizable) {\n  <div\n    #resizeHandle\n    class=\"mlv-data-table__resize-handle\"\n    [attr.data-column-key]=\"col.key\"\n    role=\"separator\"\n    tabindex=\"0\"\n    aria-orientation=\"vertical\"\n    [attr.aria-label]=\"getColumnResizeLabel(col)\"\n    [attr.aria-valuenow]=\"getColumnResizeValue(col)\"\n    [attr.aria-valuemin]=\"getColumnResizeMin(col)\"\n    [attr.aria-valuemax]=\"getColumnResizeMax(col)\"\n    [attr.aria-valuetext]=\"getColumnResizeValueText(col)\"\n    (pointerdown)=\"onResizeStart(col, $event)\"\n    (keydown)=\"onColumnResizeKeydown(col, $event)\"\n    (dblclick)=\"resetColumnWidth(col.key)\"\n  ></div>\n  }\n</ng-template>\n\n<!-- No-data fallback row, used by both rendering paths. -->\n<ng-template #noDataRowTpl>\n  <tr class=\"mlv-data-table__row mlv-data-table__row--no-data\">\n    <td\n      class=\"mlv-data-table__cell mlv-data-table__cell--no-data\"\n      [attr.colspan]=\"totalColumnCount()\"\n    >\n      @if (getNoDataTemplate()) {\n      <ng-container [ngTemplateOutlet]=\"getNoDataTemplate()!\" />\n      } @else {\n      <div class=\"mlv-data-table__no-data-default\">\n        <svg lucideTable2 [size]=\"40\" aria-hidden=\"true\" />\n        <span>No data available</span>\n      </div>\n      }\n    </td>\n  </tr>\n</ng-template>\n\n<!--\n  Failed-request row, used by all three rendering paths. Takes precedence over both the\n  data rows and #noDataRowTpl so a failed request never reads as an empty result set.\n  The region is announced as an alert; the default block is an mlv-empty-state with a\n  danger-toned icon and a Retry button wired to the (retry) output.\n-->\n<ng-template #errorRowTpl>\n  <tr class=\"mlv-data-table__row mlv-data-table__row--error\">\n    <td\n      class=\"mlv-data-table__cell mlv-data-table__cell--error\"\n      [attr.colspan]=\"totalColumnCount()\"\n    >\n      <div class=\"mlv-data-table__error\" role=\"alert\" aria-live=\"assertive\">\n        @if (getErrorTemplate(); as errorTpl) {\n        <ng-container\n          [ngTemplateOutlet]=\"errorTpl\"\n          [ngTemplateOutletContext]=\"_errorContext()\"\n        />\n        } @else {\n        <mlv-empty-state>\n          <svg\n            mlvEmptyStateIcon\n            lucideTriangleAlert\n            class=\"mlv-data-table__error-icon\"\n            [size]=\"40\"\n            aria-hidden=\"true\"\n          />\n          <span mlvEmptyStateTitle>{{ _i18n().errorTitle }}</span>\n          <span mlvEmptyStateDescription>{{ errorMessage() }}</span>\n          <button\n            mlvEmptyStateActions\n            mlvButton\n            variant=\"secondary\"\n            type=\"button\"\n            class=\"mlv-data-table__error-retry\"\n            (click)=\"onRetry()\"\n          >\n            {{ _i18n().retry }}\n          </button>\n        </mlv-empty-state>\n        }\n      </div>\n    </td>\n  </tr>\n</ng-template>\n\n<!--\n  Per-row data cells. Emits the selection cell, the data cells, and the actions cell.\n  The owning <tr> stays at the consumer site (either inside `@for` for the standard mode\n  or `*cdkVirtualFor` inside the CDK viewport in virtual mode), so each rendering path can\n  control its own row-level host bindings.\n-->\n<ng-template #rowCellsTpl let-row let-i=\"index\">\n  @if (selectable()) {\n  <td\n    class=\"mlv-data-table__cell mlv-data-table__cell--data mlv-data-table__cell--select\"\n    [style]=\"getAuxiliaryColumnStyle('selection')\"\n  >\n    <!--\n        [tabbable]=\"false\" keeps this checkbox out of the tab order so the row is\n        the single tab stop: the row's Space/Enter toggles selection, and the\n        checkbox stays operable via the mouse. Avoids a per-row double tab stop.\n      -->\n    <mlv-checkbox\n      [checked]=\"isRowSelected(row)\"\n      [tabbable]=\"false\"\n      (checkedChange)=\"toggleRowSelection(row)\"\n      (click)=\"$event.stopPropagation()\"\n      [ariaLabel]=\"'Select row ' + (i + 1)\"\n    />\n  </td>\n  } @for (col of visibleColumns(); track col.key; let ci = $index) {\n  <td\n    class=\"mlv-data-table__cell mlv-data-table__cell--data\"\n    [class.mlv-data-table__cell--pinned]=\"col.pinned\"\n    [class.mlv-data-table__cell--pinned-left]=\"\n        col.pinned && col.pinSide !== 'right'\n      \"\n    [class.mlv-data-table__cell--pinned-right]=\"\n        col.pinned && col.pinSide === 'right'\n      \"\n    [class]=\"getAlignClass(col)\"\n    [style]=\"getCellStyle(col)\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"cellContentTpl\"\n      [ngTemplateOutletContext]=\"{\n          $implicit: row,\n          index: i,\n          col: col,\n          ci: ci,\n        }\"\n    />\n  </td>\n  } @if (editable()) {\n  <td\n    class=\"mlv-data-table__cell mlv-data-table__cell--data mlv-data-table__cell--actions\"\n    [style]=\"getAuxiliaryColumnStyle('actions')\"\n  >\n    <div class=\"mlv-data-table__cell-content mlv-data-table__actions\">\n      <ng-container\n        [ngTemplateOutlet]=\"actionsButtonsTpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n      />\n    </div>\n  </td>\n  }\n</ng-template>\n\n<!--\n  Shared edit/save/cancel action buttons for the actions column. Context: { $implicit: row, index: i }.\n-->\n<ng-template #actionsButtonsTpl let-row let-i=\"index\">\n  @if (isEditing(i)) {\n  <button\n    mlvButton\n    variant=\"transparent\"\n    shape=\"square\"\n    mlvDensity=\"tight\"\n    type=\"button\"\n    (click)=\"saveEdit(row, i)\"\n    [attr.aria-label]=\"_i18n().saveChanges\"\n  >\n    <svg lucideCheck mlvButtonIcon />\n  </button>\n  <button\n    mlvButton\n    variant=\"transparent\"\n    shape=\"square\"\n    mlvDensity=\"tight\"\n    type=\"button\"\n    (click)=\"cancelEdit(row, i)\"\n    [attr.aria-label]=\"_i18n().cancelEditing\"\n  >\n    <svg lucideX mlvButtonIcon />\n  </button>\n  } @else {\n  <button\n    mlvButton\n    variant=\"transparent\"\n    shape=\"square\"\n    mlvDensity=\"tight\"\n    type=\"button\"\n    (click)=\"startEdit(row, i)\"\n    [attr.aria-label]=\"_i18n().editRow\"\n  >\n    <svg lucidePencil mlvButtonIcon />\n  </button>\n  }\n</ng-template>\n\n<!--\n  Shared inner content of a data cell (indent, expand button, edit/display template, raw value).\n  Extracted so both the standard `#rowCellsTpl` `<td>` and the experimental cell-navigation grid\n  `<td ngGridCell>` render identical content. Purely presentational \u2014 contains no aria grid\n  directives \u2014 so it is safe to project via ngTemplateOutlet across the grid-cell boundary.\n  Context: { $implicit: row, index: i, col, ci }.\n-->\n<ng-template #cellContentTpl let-row let-i=\"index\" let-col=\"col\" let-ci=\"ci\">\n  <div class=\"mlv-data-table__cell-content\">\n    @if (ci === 0 && getDepth(row) > 0) {\n    <span\n      class=\"mlv-data-table__indent\"\n      [style.padding-left.rem]=\"getDepth(row) * 1.25\"\n      aria-hidden=\"true\"\n    ></span>\n    } @if (ci === 0 && hasChildren(row)) {\n    <button\n      mlvButton\n      variant=\"transparent\"\n      shape=\"square\"\n      mlvDensity=\"tight\"\n      type=\"button\"\n      class=\"mlv-data-table__expand-btn\"\n      (click)=\"toggleExpand(row, $event)\"\n      [attr.aria-expanded]=\"isRowExpanded(row)\"\n      [attr.aria-label]=\"\n          isRowExpanded(row) ? _i18n().collapseRow : _i18n().expandRow\n        \"\n    >\n      <svg\n        lucideChevronRight\n        mlvButtonIcon\n        class=\"mlv-data-table__expand-icon\"\n        [class.mlv-data-table__expand-icon--open]=\"isRowExpanded(row)\"\n      />\n    </button>\n    } @if (editable() && isEditing(i) && getEditTemplate(col.key); as editTpl) {\n    <ng-container\n      [ngTemplateOutlet]=\"editTpl\"\n      [ngTemplateOutletContext]=\"getCellContext(row, i)\"\n    />\n    } @else if (getTemplate(col.key); as tpl) {\n    <ng-container\n      [ngTemplateOutlet]=\"tpl\"\n      [ngTemplateOutletContext]=\"getCellContext(row, i)\"\n    />\n    } @else {\n    <!--\n        Default cell renderer. `valueLabels` (or the `filterConfig.options` fallback)\n        maps the raw value to a label; `tone` promotes the cell to a muted badge.\n      -->\n    @if (getCellTone(row, col); as tone) {\n    <mlv-badge [tone]=\"tone\" muted\n      >{{ getCellDisplayValue(row, col) }}</mlv-badge\n    >\n    } @else { {{ getCellDisplayValue(row, col) }} } }\n  </div>\n</ng-template>\n\n<!-- Reusable pin button template. Rendered via ngTemplateOutlet from every header cell that supports pinning. -->\n<ng-template #pinButtonTpl let-col>\n  @if (getPinnableSides(col); as sides) { @if (sides.length > 1) {\n  <button\n    class=\"mlv-data-table__pin-btn\"\n    [class.mlv-data-table__pin-btn--active]=\"isColumnPinned(col)\"\n    type=\"button\"\n    [mlvPopupTrigger]=\"pinPopup\"\n    #pinTrigger=\"mlvPopupTrigger\"\n    (click)=\"$event.stopPropagation()\"\n    [attr.aria-label]=\"\n          isColumnPinned(col) ? _i18n().changePinSide : _i18n().pinColumn\n        \"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"pinPopup.opened()\"\n    [attr.aria-pressed]=\"isColumnPinned(col)\"\n  >\n    @if (isColumnPinned(col)) {\n    <svg lucidePinOff />\n    } @else {\n    <svg lucidePin />\n    }\n  </button>\n  <mlv-popup #pinPopup>\n    <div *mlvPopupContent class=\"mlv-data-table__pin-popup\" role=\"menu\">\n      @for (side of sides; track side) {\n      <button\n        type=\"button\"\n        role=\"menuitemradio\"\n        class=\"mlv-data-table__pin-popup-item\"\n        [class.mlv-data-table__pin-popup-item--active]=\"\n                getColumnPinSide(col) === side\n              \"\n        [attr.aria-checked]=\"getColumnPinSide(col) === side\"\n        (click)=\"\n                pinTo(col, side); pinTrigger.close(); $event.stopPropagation()\n              \"\n      >\n        <svg lucidePin [size]=\"14\" />\n        @if (side === 'left') {\n        <span>Pin left</span>\n        } @else {\n        <span>Pin right</span>\n        }\n      </button>\n      } @if (isColumnPinned(col)) {\n      <button\n        type=\"button\"\n        role=\"menuitem\"\n        class=\"mlv-data-table__pin-popup-item mlv-data-table__pin-popup-item--unpin\"\n        (click)=\"unpin(col); pinTrigger.close(); $event.stopPropagation()\"\n      >\n        <svg lucidePinOff [size]=\"14\" />\n        <span>{{ _i18n().unpin }}</span>\n      </button>\n      }\n    </div>\n  </mlv-popup>\n  } @else {\n  <button\n    class=\"mlv-data-table__pin-btn\"\n    [class.mlv-data-table__pin-btn--active]=\"isColumnPinned(col)\"\n    type=\"button\"\n    (click)=\"togglePin(col, sides[0]); $event.stopPropagation()\"\n    [attr.aria-label]=\"\n          isColumnPinned(col) ? _i18n().unpinColumn : _i18n().pinColumn\n        \"\n    [attr.aria-pressed]=\"isColumnPinned(col)\"\n  >\n    @if (isColumnPinned(col)) {\n    <svg lucidePinOff />\n    } @else {\n    <svg lucidePin />\n    }\n  </button>\n  } }\n</ng-template>\n", styles: [".mlv-data-table{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-dt-font-size)}.mlv-data-table *{box-sizing:border-box}.mlv-data-table{--mlv-dt-row-height: 3.5rem;--mlv-dt-cell-padding-x: 1.25rem;--mlv-dt-header-height: 3rem;--mlv-dt-font-size: var(--mlv-font-size-m);--mlv-dt-header-font-size: var(--mlv-font-size-m);--mlv-dt-icon-size: 1rem;--mlv-dt-toolbar-gap: .5rem;--mlv-dt-toolbar-padding: .75rem 0;display:flex;flex-direction:column;width:100%;position:relative;color:var(--mlv-text-primary)}[class*=--tight] .mlv-data-table:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-data-table[class*=--tight]{--mlv-dt-row-height: 2.5rem;--mlv-dt-cell-padding-x: .75rem;--mlv-dt-header-height: 2.25rem;--mlv-dt-font-size: var(--mlv-font-size-s);--mlv-dt-header-font-size: var(--mlv-font-size-s);--mlv-dt-icon-size: .75rem;--mlv-dt-toolbar-gap: .25rem;--mlv-dt-toolbar-padding: .375rem 0}[class*=--compact] .mlv-data-table:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-data-table[class*=--compact]{--mlv-dt-row-height: 3rem;--mlv-dt-cell-padding-x: 1rem;--mlv-dt-header-height: 2.5rem;--mlv-dt-font-size: var(--mlv-font-size-s);--mlv-dt-header-font-size: var(--mlv-font-size-s);--mlv-dt-icon-size: .875rem;--mlv-dt-toolbar-gap: .375rem;--mlv-dt-toolbar-padding: .5rem 0}[class*=--spacious] .mlv-data-table:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-data-table[class*=--spacious]{--mlv-dt-row-height: 4.25rem;--mlv-dt-cell-padding-x: 1.5rem;--mlv-dt-header-height: 3.25rem;--mlv-dt-font-size: var(--mlv-font-size-l);--mlv-dt-header-font-size: var(--mlv-font-size-l);--mlv-dt-icon-size: 1.125rem;--mlv-dt-toolbar-gap: .75rem;--mlv-dt-toolbar-padding: .75rem 0}[class*=--airy] .mlv-data-table:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-data-table[class*=--airy]{--mlv-dt-row-height: 5rem;--mlv-dt-cell-padding-x: 1.75rem;--mlv-dt-header-height: 3.75rem;--mlv-dt-font-size: var(--mlv-font-size-l);--mlv-dt-header-font-size: var(--mlv-font-size-l);--mlv-dt-icon-size: 1.25rem;--mlv-dt-toolbar-gap: 1rem;--mlv-dt-toolbar-padding: 1rem 0}.mlv-data-table__toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--mlv-dt-toolbar-gap);padding:var(--mlv-dt-toolbar-padding);position:relative}.mlv-data-table__search{flex:1 1 16rem;width:min(100%,24rem);max-width:24rem}.mlv-data-table__toolbar-actions{display:flex;gap:var(--mlv-dt-toolbar-gap);margin-left:auto}.mlv-data-table__filter-badge{font-size:var(--mlv-dt-font-size);color:var(--mlv-text-secondary)}.mlv-data-table__wrapper{width:100%;overflow-x:auto;overflow-y:auto;position:relative}.mlv-data-table__wrapper--virtual{overflow-y:visible;display:flex;flex-direction:column}.mlv-data-table__virtual-viewport{display:block;width:100%;min-width:0;max-width:100%;flex:0 0 auto;position:sticky;left:0;border-bottom:.0625rem solid var(--mlv-border-subtle)}.mlv-data-table__virtual-viewport.cdk-virtual-scrollable{overflow-x:hidden;overflow-y:auto}.mlv-data-table__virtual-horizontal-sizer{width:0;height:0;min-height:0;flex:0 0 0;align-self:flex-start;pointer-events:none}.mlv-data-table__table--virtual-header,.mlv-data-table__table--virtual-footer{--mlv-dt-pinned-right-correction: var( --mlv-dt-virtual-scrollbar-gutter, 0px )}.mlv-data-table__loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--mlv-background-base) 70%,transparent);-webkit-backdrop-filter:blur(.0625rem);backdrop-filter:blur(.0625rem);z-index:20;pointer-events:all}.mlv-data-table__loading-bottom{display:flex;align-items:center;justify-content:center;padding:1rem 0;color:var(--mlv-text-secondary)}.mlv-data-table__table{width:100%;border-collapse:collapse;table-layout:auto;font-size:var(--mlv-dt-font-size);color:var(--mlv-text-primary)}.mlv-data-table__table--striped .mlv-data-table__row--data:nth-child(2n){background:var(--mlv-background-sunken)}.mlv-data-table__table--striped .mlv-data-table__row--data:nth-child(2n) .mlv-data-table__cell--pinned{background:var(--mlv-background-sunken)}.mlv-data-table__table--bordered .mlv-data-table__cell{border-right:.0625rem solid var(--mlv-border-subtle)}.mlv-data-table__table--bordered .mlv-data-table__cell:last-child{border-right:none}.mlv-data-table__table--virtual{table-layout:fixed}.mlv-data-table__head--sticky{position:sticky;top:var(--mlv-dt-sticky-top, 0);z-index:3;background:var(--mlv-background-base)}.mlv-data-table__head--sticky .mlv-data-table__cell--pinned{z-index:4}.mlv-data-table__cell{padding:0;border-bottom:.0625rem solid var(--mlv-border-subtle);vertical-align:middle;background:inherit}.mlv-data-table__cell-content{display:flex;align-items:center;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mlv-data-table__cell--header{font-weight:var(--mlv-font-weight-medium);font-size:var(--mlv-dt-header-font-size);color:color-mix(in srgb,var(--mlv-text-action) 65%,var(--mlv-text-secondary));position:relative;-webkit-user-select:none;user-select:none;border-bottom:.0625rem solid var(--mlv-border-normal)}.mlv-data-table__cell--sortable{cursor:pointer}.mlv-data-table__cell--sortable:hover .mlv-data-table__cell-inner{color:var(--mlv-text-action)}.mlv-data-table__cell--data{padding:0 var(--mlv-dt-cell-padding-x);height:var(--mlv-dt-row-height);font-size:var(--mlv-dt-font-size)}.mlv-data-table__cell--pinned{background:var(--mlv-background-base);z-index:1;transition:background var(--mlv-duration-normal) var(--mlv-ease-default)}.mlv-data-table__cell--pinned:after{content:\"\";position:absolute;top:0;bottom:0;width:.5rem;pointer-events:none}.mlv-data-table__cell--pinned-left:after{right:-.5rem;background:linear-gradient(to right,rgba(0,0,0,.04),transparent)}.mlv-data-table__cell--pinned-right:after{left:-.5rem;background:linear-gradient(to left,rgba(0,0,0,.04),transparent)}.mlv-data-table__cell--no-data,.mlv-data-table__cell--error{padding:3rem var(--mlv-dt-cell-padding-x);text-align:center}.mlv-data-table__cell--align-left{text-align:left}.mlv-data-table__cell--align-center{text-align:center}.mlv-data-table__cell--align-right{text-align:right}.mlv-data-table__cell-inner{display:flex;align-items:center;gap:.375rem;padding:0 var(--mlv-dt-cell-padding-x);height:var(--mlv-dt-header-height);transition:color var(--mlv-duration-normal) var(--mlv-ease-default);border-radius:var(--mlv-radius-s)}.mlv-data-table__sort-button{display:inline-flex;align-items:center;gap:.375rem;flex:1;min-width:0;margin:0;padding:0;border:none;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:var(--mlv-radius-s)}.mlv-data-table__sort-button:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:.125rem}.mlv-data-table__visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}.mlv-data-table__header-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.mlv-data-table__column-filter{flex:0 0 auto}.mlv-data-table__column-filter--active{color:var(--mlv-text-action)}.mlv-data-table__sort-icon{display:inline-flex;flex-shrink:0;color:var(--mlv-text-action)}.mlv-data-table__sort-icon svg{width:var(--mlv-dt-icon-size);height:var(--mlv-dt-icon-size)}.mlv-data-table__sort-icon--inactive{opacity:0;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-default)}.mlv-data-table__cell--sortable:hover .mlv-data-table__sort-icon--inactive{opacity:.5}.mlv-data-table__pin-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;border:none;background:none;cursor:pointer;color:var(--mlv-text-tertiary);opacity:0;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-default),color var(--mlv-duration-normal) var(--mlv-ease-default)}.mlv-data-table__pin-btn svg{width:var(--mlv-dt-icon-size);height:var(--mlv-dt-icon-size)}.mlv-data-table__cell--header:hover .mlv-data-table__pin-btn{opacity:.6}.mlv-data-table__pin-btn:hover{opacity:1!important;color:var(--mlv-text-action)}.mlv-data-table__pin-btn--active{opacity:1;color:var(--mlv-text-action)}.mlv-data-table__cell--header:hover .mlv-data-table__pin-btn--active{opacity:1}.mlv-data-table__resize-handle{position:absolute;top:0;right:-.5rem;width:1rem;height:100%;cursor:col-resize;background:transparent;z-index:5;touch-action:none;-webkit-user-select:none;user-select:none}.mlv-data-table__resize-handle:after{content:\"\";position:absolute;top:.75rem;bottom:.75rem;left:50%;width:.0625rem;border-radius:var(--mlv-radius-full);background-color:var(--mlv-text-secondary);transform:translate(-50%);transition:background-color var(--mlv-duration-fast) var(--mlv-ease-default),width var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-data-table__resize-handle:hover:after{width:.125rem;background-color:var(--mlv-text-primary)}.mlv-data-table__resize-handle:active:after,.mlv-data-table__resize-handle:focus-visible:after{width:.125rem;background-color:var(--mlv-background-accent-1)}.mlv-data-table__resize-handle:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:-.125rem}@media(pointer:coarse){.mlv-data-table__resize-handle{right:-.75rem;width:1.5rem}}.mlv-data-table__row{transition:background var(--mlv-duration-normal) var(--mlv-ease-default)}.mlv-data-table__row--data:hover,.mlv-data-table__row--data:hover .mlv-data-table__cell--pinned,.mlv-data-table__row--expanded,.mlv-data-table__row--expanded .mlv-data-table__cell--pinned{background:var(--mlv-background-sunken)}.mlv-data-table__indent{display:inline-block}.mlv-data-table__expand-btn{margin-right:.25rem;vertical-align:middle;flex-shrink:0}.mlv-data-table__expand-icon{width:var(--mlv-dt-icon-size);height:var(--mlv-dt-icon-size);transition:transform var(--mlv-duration-normal) var(--mlv-ease-default)}.mlv-data-table__expand-icon--open{transform:rotate(90deg)}.mlv-data-table__no-data-default{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:3rem 0;color:var(--mlv-text-tertiary)}.mlv-data-table__no-data-default svg{opacity:.2}.mlv-data-table__no-data-default span{font-size:var(--mlv-dt-font-size)}.mlv-data-table__error{display:block;text-align:initial}.mlv-data-table__error-icon{color:var(--mlv-text-negative)}.mlv-data-table__row--group-header .mlv-data-table__cell--group-header{font-weight:var(--mlv-font-weight-medium);font-size:var(--mlv-dt-header-font-size);color:color-mix(in srgb,var(--mlv-text-action) 65%,var(--mlv-text-secondary));text-align:center;padding:0 var(--mlv-dt-cell-padding-x);height:var(--mlv-dt-header-height);border-bottom:.0625rem solid var(--mlv-border-subtle);vertical-align:middle}.mlv-data-table__row--group-header .mlv-data-table__cell--standalone{vertical-align:middle}.mlv-data-table__cell--actions{width:1%;white-space:nowrap;padding:0 var(--mlv-dt-cell-padding-x)!important}.mlv-data-table__actions{display:flex;align-items:center;gap:.25rem;justify-content:flex-end}.mlv-data-table__row--editing,.mlv-data-table__row--editing .mlv-data-table__cell--pinned{background:var(--mlv-background-sunken)}.mlv-data-table__cell--select{width:2.5rem;min-width:2.5rem;max-width:2.5rem;padding:0 .5rem!important;text-align:center}.mlv-data-table__col--select{width:2.5rem}.mlv-data-table__col--actions{width:5rem}.mlv-data-table__row--selected,.mlv-data-table__row--selected .mlv-data-table__cell--pinned{background:color-mix(in srgb,var(--mlv-background-accent-1) 8%,var(--mlv-background-base))}.mlv-data-table__pin-popup{display:flex;flex-direction:column;gap:.125rem;padding:.25rem;min-width:8rem}.mlv-data-table__pin-popup-item{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;border:none;background:none;border-radius:var(--mlv-radius-s);cursor:pointer;font:inherit;font-size:var(--mlv-dt-font-size);color:var(--mlv-text-primary);text-align:left}.mlv-data-table__pin-popup-item svg{color:var(--mlv-text-secondary);flex-shrink:0}.mlv-data-table__pin-popup-item:hover{background:var(--mlv-background-sunken)}.mlv-data-table__pin-popup-item--active{color:var(--mlv-text-action)}.mlv-data-table__pin-popup-item--active svg{color:var(--mlv-text-action)}.mlv-data-table__pin-popup-item--unpin{color:var(--mlv-text-negative);border-top:.0625rem solid var(--mlv-border-subtle);margin-top:.125rem;padding-top:.5rem;border-radius:0 0 var(--mlv-radius-s) var(--mlv-radius-s)}.mlv-data-table__pin-popup-item--unpin svg{color:var(--mlv-text-negative)}.mlv-data-table__pin-popup-item--unpin:hover{background:color-mix(in srgb,var(--mlv-text-negative) 8%,transparent)}.mlv-data-table__columns-dropdown{display:flex;flex-direction:column;gap:.25rem;padding:.5rem;min-width:10rem}.mlv-data-table__columns-item{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;border-radius:var(--mlv-radius-s);cursor:pointer;font-size:var(--mlv-dt-font-size)}.mlv-data-table__columns-item:hover{background:var(--mlv-background-sunken)}.mlv-data-table__foot{font-weight:var(--mlv-font-weight-medium);font-size:var(--mlv-dt-font-size);background:var(--mlv-background-base)}.mlv-data-table__foot--sticky{position:sticky;bottom:0;z-index:3}.mlv-data-table__foot .mlv-data-table__cell--pinned,.mlv-data-table__row--footer{background:inherit}.mlv-data-table__row--footer>:where(td,th){box-sizing:border-box;padding:0 var(--mlv-dt-cell-padding-x);height:var(--mlv-dt-header-height);border-top:.125rem solid var(--mlv-border-normal);border-bottom:0;vertical-align:middle;background:inherit;font-size:inherit;font-weight:inherit}.mlv-data-table__table--bordered .mlv-data-table__row--footer>:where(td,th){border-right:.0625rem solid var(--mlv-border-subtle)}.mlv-data-table__table--bordered .mlv-data-table__row--footer>:where(td,th):last-child{border-right:none}.mlv-data-table__footer{padding-top:.75rem}@media(prefers-reduced-motion:reduce){.mlv-data-table,.mlv-data-table *,.mlv-data-table:before,.mlv-data-table:after,[class^=mlv-data-table__],[class*=\" mlv-data-table__\"],[class^=mlv-data-table--],[class*=\" mlv-data-table--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], columnGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnGroups", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], addRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "addRow", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], actionsHeaderLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsHeaderLabel", required: false }] }], cellNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellNavigation", required: false }] }], paginationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationMode", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], infiniteScrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScrollThreshold", required: false }] }], filterDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterDisplay", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTrigger", required: false }] }], searchDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounce", required: false }] }], rowEditStart: [{ type: i0.Output, args: ["rowEditStart"] }], rowEditSave: [{ type: i0.Output, args: ["rowEditSave"] }], rowEditCancel: [{ type: i0.Output, args: ["rowEditCancel"] }], rowAdd: [{ type: i0.Output, args: ["rowAdd"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], retry: [{ type: i0.Output, args: ["retry"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], selectedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRows", required: false }] }, { type: i0.Output, args: ["selectedRowsChange"] }], searchQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchQuery", required: false }] }, { type: i0.Output, args: ["searchQueryChange"] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MlvDataTableCell), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }], editCellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MlvDataTableEditCell), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MlvDataTableNoData), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }], errorTemplate: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MlvDataTableError), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MlvDataTableFooter), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }], tableWrapperRef: [{ type: i0.ViewChild, args: ['tableWrapper', { isSignal: true }] }], tableRef: [{ type: i0.ViewChild, args: ['tableEl', { isSignal: true }] }], _resizeHandleRefs: [{ type: i0.ViewChildren, args: ['resizeHandle', { isSignal: true }] }], _filterTriggerRef: [{ type: i0.ViewChild, args: ['filterBtn', { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }], _virtualViewportRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], activeFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeFilters", required: false }] }, { type: i0.Output, args: ["activeFiltersChange"] }] } });
+//# sourceMappingURL=data-table.js.map