@nexterajs/ui 0.0.1

package/fesm2022/nexterajs-ui-grid.mjs

@@ -0,0 +1,4145 @@
+import { formatNumber, parseNumberFormat, parseDateValue, formatDisplay } from '@nexterajs/ui/intl';
+import * as i0 from '@angular/core';
+import { input, contentChildren, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, output, Directive, model, inject, ElementRef, ViewContainerRef, NgZone, contentChild, EventEmitter, afterRenderEffect, untracked, afterNextRender, linkedSignal, viewChild, Output } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
+import { nxePane } from '@nexterajs/ui/styling';
+import { Workbook, nxeSaveAs } from '@nexterajs/ui/excel';
+import { Overlay } from '@angular/cdk/overlay';
+import { NXE_DEFAULT_OPTIONS, NxeTemplateDirective } from '@nexterajs/ui/core';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// Shared value-formatting helpers for the nxe grid family — the single source of truth for how
+// a dx-style column/field `format` renders. Extracted from nxe-data-grid's private
+// `defaultFormat()`/`datePattern()` (the grid delegates here unchanged); the pivot resolves its
+// data-field formats through the same functions so both widgets can never drift apart.
+//
+// dx `{ type }` format objects resolve to the library's own LDML masks:
+//   { type: 'fixedPoint', precision: N } → '#,##0' + N decimals
+//   { type: 'currency',   precision: N } → the same mask — deliberately WITHOUT a currency
+//                                          symbol (recorded in DEFAULTS.md)
+//   { type: 'percent',    precision: N } → value × 100 + '%' (Excel's own '%' code multiplies,
+//                                          so the exported mask carries a bare '%')
+//   { type: '<date pattern>' }           → the pattern itself (the app's `Format.DATE`)
+//   { formatter }                        → the function's own text
+/** `precision: 2` → `'.00'`; absent/zero precision → `''` (dx defaults fixedPoint to 0). */
+function precisionDecimals(precision) {
+    return precision && precision > 0 ? '.' + '0'.repeat(precision) : '';
+}
+/** Resolve a `format` to a date display pattern — a `{ type }` object's `type` IS the pattern. */
+function nxeDatePattern(format, fallback = 'dd MMM yyyy') {
+    if (!format) {
+        return fallback;
+    }
+    return typeof format === 'string' ? format : format.type ?? fallback;
+}
+/**
+ * Resolve a `format` to the LDML number mask the library's number engine understands: string
+ * masks pass through; `{ type: 'fixedPoint' | 'currency', precision }` build a grouped mask
+ * (`currency` deliberately carries NO symbol — DEFAULTS.md). Anything else → `undefined`.
+ */
+function nxeNumberMask(format) {
+    if (!format) {
+        return undefined;
+    }
+    if (typeof format === 'string') {
+        return format;
+    }
+    if (format.type === 'fixedPoint' || format.type === 'currency') {
+        return '#,##0' + precisionDecimals(format.precision);
+    }
+    return undefined;
+}
+/**
+ * Format a numeric value per a dx-style `format` (string mask, `{ type }` object, or
+ * `{ formatter }`). No format / an unresolvable one → `String(value)` (the grid's untyped
+ * rendering).
+ */
+function nxeFormatNumberValue(value, format) {
+    if (format && typeof format === 'object') {
+        if (typeof format.formatter === 'function') {
+            return String(format.formatter(value));
+        }
+        if (format.type === 'percent') {
+            const mask = '#,##0' + precisionDecimals(format.precision) + '%';
+            return formatNumber(value * 100, parseNumberFormat(mask));
+        }
+    }
+    const mask = nxeNumberMask(format);
+    return mask ? formatNumber(value, parseNumberFormat(mask)) : String(value);
+}
+/**
+ * Derive the Excel `numFmt` mask for a `format`: string masks pass through, fixedPoint/currency
+ * come from {@link nxeNumberMask}, percent appends a bare `%` (Excel multiplies by 100 itself),
+ * and any other `{ type }` is a date pattern used as-is. `{ formatter }`-only objects →
+ * `undefined` (callers fall back to exporting the formatted text).
+ */
+function nxeExcelNumFmt(format) {
+    if (!format) {
+        return undefined;
+    }
+    if (typeof format === 'string') {
+        return format;
+    }
+    if (typeof format.formatter === 'function') {
+        return undefined;
+    }
+    if (format.type === 'percent') {
+        return '#,##0' + precisionDecimals(format.precision) + '%';
+    }
+    return nxeNumberMask(format) ?? format.type ?? undefined;
+}
+/**
+ * The data grid's default cell rendering (pure extraction of nxe-data-grid's `defaultFormat`):
+ * `dataType`/`format` → display text. Number cells honour string masks only — exactly the
+ * grid's pre-extraction behaviour.
+ */
+function nxeDefaultFormat(dataType, format, raw) {
+    if (raw == null || raw === '') {
+        return '';
+    }
+    switch (dataType) {
+        case 'number': {
+            const pattern = typeof format === 'string' ? format : undefined;
+            const num = typeof raw === 'number' ? raw : Number(raw);
+            return isNaN(num) ? String(raw) : formatNumber(num, parseNumberFormat(pattern));
+        }
+        case 'date': {
+            const dt = parseDateValue(raw);
+            return dt ? formatDisplay(dt, nxeDatePattern(format)) : String(raw);
+        }
+        case 'boolean':
+            return raw ? '✓' : '';
+        default:
+            return String(raw);
+    }
+}
+
+/**
+ * DOM lookups shared by the grid component and its drag/resize controllers.
+ *
+ * Both questions here used to be answered with `querySelector('.dx-header-row')`, which stopped
+ * being right once bands could add header rows above the leaves.
+ */
+/**
+ * The all-leaves header row of THIS grid.
+ *
+ * Two things have to be true at once. It must be the LAST `.dx-header-row` in the thead, because
+ * bands sit above the leaves and only the bottom row has one cell per data column. And it must
+ * belong to this grid rather than a nested master-detail grid — those live in the tbody, so the
+ * first `thead` in document order is always the outer grid's own.
+ */
+function nxeLeafHeaderRow(host) {
+    const thead = host.querySelector('.dx-datagrid-content > .dx-datagrid-table > thead');
+    const rows = thead?.querySelectorAll('.dx-header-row');
+    return rows && rows.length ? rows[rows.length - 1] : null;
+}
+/**
+ * The data cells of a header row, command columns removed.
+ *
+ * Indexing these by visible-column index is deliberate: command cells live in the FIRST header
+ * row and span downwards, so a banded grid's leaf row has none, and any fixed lead offset would
+ * be off by however many command columns the grid happens to show.
+ */
+function nxeHeaderDataCells(row) {
+    if (!row) {
+        return [];
+    }
+    return Array.from(row.cells).filter((td) => !td.classList.contains('dx-command-expand') &&
+        !td.classList.contains('dx-command-select') &&
+        !td.classList.contains('dx-command-edit'));
+}
+
+/**
+ * Pointer-based drag engines (drag-to-group parity with DevExtreme, baselined against the
+ * bright deployment 2026-07-27; gesture core shared with the pivot field panel since P3-C2).
+ *
+ * Deliberately NOT CDK DragDrop: the drop topologies are "header → group panel", "chip →
+ * anywhere outside = ungroup/remove", "chip ↔ chip = reorder" — not list-to-list — and the
+ * ghosts must be dx's exact clones (`.dx-datagrid-drag-header` for the grid,
+ * `.dx-pivotgrid-fields-container.dx-drag` for the pivot panel). Document-level listeners run
+ * outside the zone; Angular re-enters only on drop. No `setPointerCapture` (throws for
+ * synthetic pointerIds under Karma).
+ *
+ * dx baseline facts encoded here:
+ * - grid ghost: `div.dx-datagrid-drag-header.dx-datagrid-text-content.dx-widget.dx-datagrid-drag-action`
+ *   appended to <body>, caption text only, positioned near the cursor;
+ * - insertion indicator: `div.dx-block-separator` placed between panel chips;
+ * - chip drag highlights the header row with `dx-datagrid-drop-highlight`;
+ * - the source cell/chip stays in place, dimmed;
+ * - header→panel drop APPENDS as the last group level (indicator after the last chip).
+ */
+/** Movement (px) before a press becomes a drag — below this a release is a normal click. */
+const DRAG_START_DELTA = 5;
+/** Ghost offset from the pointer (px), tuned against the bright screenshots. */
+const GHOST_OFFSET = 8;
+/**
+ * One-shot suppression of the click a completed gesture is about to fire, shared by the drag and
+ * resize engines. Strictly gesture-scoped: clears once that trailing click has passed (even when
+ * it lands on an element without a consuming handler) and expires after 500ms, so a later genuine
+ * click is never eaten.
+ */
+class NxeGestureClickSuppression {
+    pending = false;
+    until = 0;
+    arm() {
+        this.pending = true;
+        this.until = performance.now() + 500;
+        // Capture runs before the bubble-phase consumers; the macrotask runs after dispatch.
+        document.addEventListener('click', () => setTimeout(() => (this.pending = false)), { capture: true, once: true });
+    }
+    consume() {
+        const suppress = this.pending && performance.now() < this.until;
+        this.pending = false;
+        return suppress;
+    }
+}
+/**
+ * The shared pointer-gesture core (extracted from the grid controller in P3-C2 so the pivot
+ * field panel reuses it rather than copy-pasting). Behavior is the audited 2026-07-27 gesture:
+ * press arms, 5px starts, Escape cancels (suppressing the held pointer's release click),
+ * pointercancel cancels silently, drop arms one-shot click suppression.
+ */
+class NxeDragGesture {
+    zone;
+    delegate;
+    active = null;
+    suppression = new NxeGestureClickSuppression();
+    onMove = (e) => this.pointerMove(e);
+    onUp = (e) => {
+        if (this.active && e.pointerId !== this.active.pointerId) {
+            return;
+        }
+        this.pointerUp();
+    };
+    onCancel = (e) => {
+        if (this.active && e.pointerId !== this.active.pointerId) {
+            return;
+        }
+        // pointercancel fires no trailing click — cancel WITHOUT arming click suppression.
+        this.cancel(false);
+    };
+    onKey = (e) => {
+        if (e.key === 'Escape') {
+            this.cancel(true); // the still-held pointer's release click will follow
+        }
+    };
+    constructor(zone, delegate) {
+        this.zone = zone;
+        this.delegate = delegate;
+    }
+    /** Arm a gesture on pointerdown. Returns false (payload must NOT be set) when refused. */
+    begin(event) {
+        if (event.button !== 0 || this.active) {
+            return false;
+        }
+        this.active = {
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            startY: event.clientY,
+            source: event.currentTarget,
+            started: false,
+            ghost: null,
+        };
+        this.zone.runOutsideAngular(() => {
+            document.addEventListener('pointermove', this.onMove);
+            document.addEventListener('pointerup', this.onUp);
+            document.addEventListener('pointercancel', this.onCancel);
+            document.addEventListener('keydown', this.onKey);
+        });
+        return true;
+    }
+    /**
+     * One-shot suppression of the click browsers fire right after a drag's pointerup — call at
+     * the top of header/chip/funnel click handlers so a drop never doubles as a click action.
+     */
+    consumeClick() {
+        return this.suppression.consume();
+    }
+    destroy() {
+        if (this.active) {
+            this.cancel(false);
+        }
+    }
+    pointerMove(e) {
+        const a = this.active;
+        if (!a || e.pointerId !== a.pointerId) {
+            return;
+        }
+        if (!a.started) {
+            if (Math.hypot(e.clientX - a.startX, e.clientY - a.startY) < DRAG_START_DELTA) {
+                return;
+            }
+            a.started = true;
+            a.ghost = this.mountGhost(a);
+            for (const cls of this.delegate.sourceDragClasses) {
+                a.source.classList.add(cls);
+            }
+            document.body.classList.add('nxe-grid-dragging');
+            this.delegate.dragStarted?.();
+        }
+        if (e.cancelable) {
+            e.preventDefault(); // no text selection / touch scroll mid-drag
+        }
+        if (a.ghost) {
+            a.ghost.style.left = `${e.clientX + GHOST_OFFSET}px`;
+            a.ghost.style.top = `${e.clientY + GHOST_OFFSET}px`;
+        }
+        this.delegate.dragMove(e.clientX, e.clientY);
+    }
+    mountGhost(a) {
+        const ghost = this.delegate.createGhost();
+        ghost.style.position = 'fixed';
+        ghost.style.left = `${a.startX + GHOST_OFFSET}px`;
+        ghost.style.top = `${a.startY + GHOST_OFFSET}px`;
+        ghost.style.pointerEvents = 'none';
+        ghost.style.zIndex = '10000';
+        document.body.appendChild(ghost);
+        return ghost;
+    }
+    pointerUp() {
+        const a = this.active;
+        this.detachListeners();
+        this.active = null;
+        if (!a) {
+            return;
+        }
+        if (!a.started) {
+            this.delegate.reset?.();
+            return; // plain click — let the click event do its job
+        }
+        this.suppression.arm();
+        // Imperative DOM must be gone BEFORE any signal write re-runs a drop zone's @for.
+        this.teardownVisuals(a);
+        this.zone.run(() => this.delegate.drop());
+        this.delegate.reset?.();
+    }
+    cancel(willClickFollow) {
+        const a = this.active;
+        this.detachListeners();
+        this.active = null;
+        if (!a) {
+            return;
+        }
+        if (a.started) {
+            if (willClickFollow) {
+                this.suppression.arm(); // Escape: the held pointer's release click still fires
+            }
+            this.teardownVisuals(a);
+        }
+        this.delegate.reset?.();
+    }
+    teardownVisuals(a) {
+        a.ghost?.remove();
+        a.ghost = null;
+        for (const cls of this.delegate.sourceDragClasses) {
+            a.source.classList.remove(cls);
+        }
+        document.body.classList.remove('nxe-grid-dragging');
+        this.delegate.clearDropVisuals();
+    }
+    detachListeners() {
+        document.removeEventListener('pointermove', this.onMove);
+        document.removeEventListener('pointerup', this.onUp);
+        document.removeEventListener('pointercancel', this.onCancel);
+        document.removeEventListener('keydown', this.onKey);
+    }
+}
+/** The data grid's drag controller — payload + drop topology over the shared gesture core. */
+class NxeGridDragController {
+    hooks;
+    drag = null;
+    gesture;
+    constructor(hooks) {
+        this.hooks = hooks;
+        this.gesture = new NxeDragGesture(hooks.zone, {
+            // Exact class list observed on bright's dx ghost + an nxe hook for fallback styling.
+            createGhost: () => {
+                const ghost = document.createElement('div');
+                ghost.className =
+                    'dx-datagrid-drag-header dx-datagrid-text-content dx-widget dx-datagrid-drag-action nxe-grid-drag-ghost';
+                const col = this.drag?.col;
+                ghost.textContent = col ? col.caption() || col.dataField() : '';
+                ghost.style.whiteSpace = 'nowrap';
+                return ghost;
+            },
+            sourceDragClasses: ['nxe-drag-source'],
+            dragStarted: () => {
+                if (this.drag?.kind === 'chip') {
+                    // dx: while a chip is dragged, the header row is the highlighted return target.
+                    this.headerRow()?.classList.add('dx-datagrid-drop-highlight');
+                }
+            },
+            dragMove: (x, y) => {
+                if (this.drag) {
+                    this.updateDropTarget(this.drag, x, y);
+                }
+            },
+            drop: () => this.completeDrop(),
+            clearDropVisuals: () => {
+                if (this.drag) {
+                    this.removeSeparator(this.drag);
+                    this.removeColIndicator(this.drag);
+                }
+                this.headerRow()?.classList.remove('dx-datagrid-drop-highlight');
+            },
+            reset: () => {
+                this.drag = null;
+            },
+        });
+    }
+    startHeaderDrag(col, visibleIndex, event) {
+        this.begin('header', col, visibleIndex, event);
+    }
+    startChipDrag(col, level, event) {
+        this.begin('chip', col, level, event);
+    }
+    /** See {@link NxeDragGesture.consumeClick}. */
+    consumeClick() {
+        return this.gesture.consumeClick();
+    }
+    destroy() {
+        this.gesture.destroy();
+    }
+    begin(kind, col, level, event) {
+        if (!this.gesture.begin(event)) {
+            return;
+        }
+        this.drag = {
+            kind,
+            col,
+            level,
+            separator: null,
+            colIndicator: null,
+            overPanel: false,
+            dropIndex: null,
+            headerSlot: null,
+        };
+    }
+    updateDropTarget(a, x, y) {
+        const panel = this.panel();
+        const rect = panel?.getBoundingClientRect();
+        a.overPanel = !!rect && x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+        if (!panel || !a.overPanel) {
+            a.dropIndex = null;
+            this.removeSeparator(a);
+            if (a.kind === 'header') {
+                this.updateHeaderReorderTarget(a, x, y);
+            }
+            return;
+        }
+        this.removeColIndicator(a);
+        a.headerSlot = null;
+        const chips = Array.from(panel.querySelectorAll('.dx-group-panel-item'));
+        if (a.kind === 'header') {
+            // dx appends on header→panel drop; the indicator sits after the last chip.
+            a.dropIndex = chips.length;
+            this.placeSeparator(a, panel, chips, chips.length);
+            return;
+        }
+        let index = chips.length;
+        for (let i = 0; i < chips.length; i++) {
+            const r = chips[i].getBoundingClientRect();
+            if (x < r.left + r.width / 2) {
+                index = i;
+                break;
+            }
+        }
+        a.dropIndex = index;
+        this.placeSeparator(a, panel, chips, index);
+    }
+    /** Header-row drop zone (only with `allowColumnReordering`): slot between data headers. */
+    updateHeaderReorderTarget(a, x, y) {
+        if (!this.hooks.reorderEnabled()) {
+            a.headerSlot = null;
+            this.removeColIndicator(a);
+            return;
+        }
+        const rowRect = this.headerRow()?.getBoundingClientRect();
+        if (!rowRect || x < rowRect.left || x > rowRect.right || y < rowRect.top || y > rowRect.bottom) {
+            a.headerSlot = null;
+            this.removeColIndicator(a);
+            return;
+        }
+        const cells = this.hooks.headerDataCells();
+        if (!cells.length) {
+            return;
+        }
+        let slot = cells.length;
+        for (let i = 0; i < cells.length; i++) {
+            const r = cells[i].getBoundingClientRect();
+            if (x < r.left + r.width / 2) {
+                slot = i;
+                break;
+            }
+        }
+        a.headerSlot = slot;
+        if (!a.colIndicator) {
+            a.colIndicator = document.createElement('div');
+            a.colIndicator.className = 'nxe-col-drop-indicator';
+            document.body.appendChild(a.colIndicator);
+        }
+        const edge = slot < cells.length
+            ? cells[slot].getBoundingClientRect().left
+            : cells[cells.length - 1].getBoundingClientRect().right;
+        a.colIndicator.style.left = `${edge - 1}px`;
+        a.colIndicator.style.top = `${rowRect.top}px`;
+        a.colIndicator.style.height = `${rowRect.height}px`;
+    }
+    removeColIndicator(a) {
+        a.colIndicator?.remove();
+        a.colIndicator = null;
+    }
+    completeDrop() {
+        const a = this.drag;
+        if (!a) {
+            return;
+        }
+        if (a.kind === 'header') {
+            if (a.overPanel) {
+                this.hooks.onGroupDrop(a.col);
+            }
+            else if (a.headerSlot != null) {
+                this.hooks.onColumnMove(a.level, a.headerSlot);
+            }
+            return;
+        }
+        if (!a.overPanel) {
+            this.hooks.onChipRemove(a.col);
+            return;
+        }
+        if (a.dropIndex != null) {
+            const target = a.dropIndex > a.level ? a.dropIndex - 1 : a.dropIndex;
+            if (target !== a.level) {
+                this.hooks.onChipMove(a.level, target);
+            }
+        }
+    }
+    placeSeparator(a, panel, chips, index) {
+        if (!a.separator) {
+            a.separator = document.createElement('div');
+            a.separator.className = 'dx-block-separator';
+            a.separator.textContent = ' '; // dx renders the separator as an &nbsp; block
+        }
+        const reference = chips[index] ?? null;
+        if (a.separator.parentElement !== panel || a.separator.nextElementSibling !== reference) {
+            panel.insertBefore(a.separator, reference);
+        }
+    }
+    removeSeparator(a) {
+        a.separator?.remove();
+        a.separator = null;
+    }
+    panel() {
+        return this.hooks.host().querySelector('.dx-datagrid-group-panel');
+    }
+    headerRow() {
+        return nxeLeafHeaderRow(this.hooks.host());
+    }
+}
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// Shared types for the nxe-data-grid family. Row data is `any` to mirror DevExtreme's untyped
+// grid (the app stores plain JS records and reads arbitrary fields off `key.data`).
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * `nxe-column` — drop-in replacement for DevExtreme `dxi-column`.
+ *
+ * A no-render config element collected by the parent `nxe-data-grid` via `contentChildren`.
+ * Carries the column's display/format/behaviour config as signals. Works inside `@for`/`@if`
+ * with full property binding (column sets are computed at render time; `dataField`/`caption`
+ * are sometimes expressions). There are no command-button columns or `calculate*` options here.
+ */
+class NxeColumnComponent {
+    caption = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+    /** Bound row field (supports dotted paths and bound/ternary expressions). */
+    dataField = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataField" }] : /* istanbul ignore next */ []));
+    dataType = input('string', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataType" }] : /* istanbul ignore next */ []));
+    /** px width — number (`[width]="150"`) or numeric string (`width="200"`). */
+    width = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    minWidth = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    alignment = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []));
+    /** Number-mask string (`#,##0.00`), date format string, or `{ type: 'dd MMM yyyy' }`. */
+    format = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /** `(info:{value}) => string` (e.g. `formatAccounting` for parenthesized negatives). */
+    customizeText = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customizeText" }] : /* istanbul ignore next */ []));
+    /** Name of a sibling `<ng-template nxeTemplate="...">` to render the cell. */
+    cellTemplate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * DevExtreme column `lookup` (orbit addition): raw values resolve to display text through
+     * `dataSource` (`{ lookup: { dataSource, valueExpr: 'lovCode', displayExpr: 'lovName' } }`).
+     * Inline cell editing renders a `<select>` over the same list.
+     */
+    lookup = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lookup" }] : /* istanbul ignore next */ []));
+    allowSorting = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowSorting" }] : /* istanbul ignore next */ []));
+    /** dx parity: whether the header can be dragged into the group panel (default true). */
+    allowGrouping = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowGrouping" }] : /* istanbul ignore next */ []));
+    /** dx parity: whether this column shows a resize handle when the grid allows resizing. */
+    allowResizing = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowResizing" }] : /* istanbul ignore next */ []));
+    allowFiltering = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowFiltering" }] : /* istanbul ignore next */ []));
+    allowEditing = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowEditing" }] : /* istanbul ignore next */ []));
+    allowExporting = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowExporting" }] : /* istanbul ignore next */ []));
+    allowSearch = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowSearch" }] : /* istanbul ignore next */ []));
+    allowHeaderFiltering = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowHeaderFiltering" }] : /* istanbul ignore next */ []));
+    visible = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    sortOrder = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortOrder" }] : /* istanbul ignore next */ []));
+    sortIndex = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortIndex" }] : /* istanbul ignore next */ []));
+    groupIndex = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupIndex" }] : /* istanbul ignore next */ []));
+    fixed = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fixed" }] : /* istanbul ignore next */ []));
+    filterValues = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterValues" }] : /* istanbul ignore next */ []));
+    /** Column `type` (only `type="date"` seen — a display hint, NOT a command column). */
+    type = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /**
+     * dx `cssClass` — extra classes on this column's header, filter and data cells. The escape
+     * hatch for one-off cell styling that does not warrant a `cellTemplate`.
+     */
+    cssClass = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cssClass" }] : /* istanbul ignore next */ []));
+    /**
+     * dx `editCellTemplate` — the sibling `<ng-template nxeTemplate="NAME">` rendered while this
+     * cell is being edited, in place of the built-in editor. Its context is a
+     * {@link NxeEditCellInfo}, whose `data` is the live row: a template that assigns
+     * `ctx.data.field = $event` writes straight through, which is how dx's own edit templates
+     * were used.
+     */
+    editCellTemplate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editCellTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * dx `groupCellTemplate` — replaces the `"Caption: value"` text in a group row's caption
+     * cell when this column is the one grouped by.
+     */
+    groupCellTemplate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupCellTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Child columns declared inside this one — dx's banded header. Empty for an ordinary column.
+     *
+     * `descendants: false` is explicit rather than relied upon: a band's grandchildren belong to
+     * its children, and flattening them here would collapse the very nesting the band expresses.
+     */
+    childColumns = contentChildren(NxeColumnComponent, { ...(ngDevMode ? { debugName: "childColumns" } : /* istanbul ignore next */ {}), descendants: false });
+    /** dx `isBand`: a column that groups other columns under a shared header instead of a field. */
+    isBand = computed(() => this.childColumns().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBand" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.5", type: NxeColumnComponent, isStandalone: true, selector: "nxe-column", inputs: { caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, dataField: { classPropertyName: "dataField", publicName: "dataField", isSignal: true, isRequired: false, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, customizeText: { classPropertyName: "customizeText", publicName: "customizeText", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, lookup: { classPropertyName: "lookup", publicName: "lookup", isSignal: true, isRequired: false, transformFunction: null }, allowSorting: { classPropertyName: "allowSorting", publicName: "allowSorting", isSignal: true, isRequired: false, transformFunction: null }, allowGrouping: { classPropertyName: "allowGrouping", publicName: "allowGrouping", isSignal: true, isRequired: false, transformFunction: null }, allowResizing: { classPropertyName: "allowResizing", publicName: "allowResizing", isSignal: true, isRequired: false, transformFunction: null }, allowFiltering: { classPropertyName: "allowFiltering", publicName: "allowFiltering", isSignal: true, isRequired: false, transformFunction: null }, allowEditing: { classPropertyName: "allowEditing", publicName: "allowEditing", isSignal: true, isRequired: false, transformFunction: null }, allowExporting: { classPropertyName: "allowExporting", publicName: "allowExporting", isSignal: true, isRequired: false, transformFunction: null }, allowSearch: { classPropertyName: "allowSearch", publicName: "allowSearch", isSignal: true, isRequired: false, transformFunction: null }, allowHeaderFiltering: { classPropertyName: "allowHeaderFiltering", publicName: "allowHeaderFiltering", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, sortIndex: { classPropertyName: "sortIndex", publicName: "sortIndex", isSignal: true, isRequired: false, transformFunction: null }, groupIndex: { classPropertyName: "groupIndex", publicName: "groupIndex", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, filterValues: { classPropertyName: "filterValues", publicName: "filterValues", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, editCellTemplate: { classPropertyName: "editCellTemplate", publicName: "editCellTemplate", isSignal: true, isRequired: false, transformFunction: null }, groupCellTemplate: { classPropertyName: "groupCellTemplate", publicName: "groupCellTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: none" }, queries: [{ propertyName: "childColumns", predicate: NxeColumnComponent, isSignal: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-column',
+                    standalone: true,
+                    template: '',
+                    host: { style: 'display: none' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], dataField: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataField", required: false }] }], dataType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataType", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], customizeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "customizeText", required: false }] }], cellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], lookup: [{ type: i0.Input, args: [{ isSignal: true, alias: "lookup", required: false }] }], allowSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSorting", required: false }] }], allowGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowGrouping", required: false }] }], allowResizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowResizing", required: false }] }], allowFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFiltering", required: false }] }], allowEditing: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEditing", required: false }] }], allowExporting: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowExporting", required: false }] }], allowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSearch", required: false }] }], allowHeaderFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowHeaderFiltering", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], sortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOrder", required: false }] }], sortIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortIndex", required: false }] }], groupIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupIndex", required: false }] }], fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }], filterValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterValues", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], editCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "editCellTemplate", required: false }] }], groupCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupCellTemplate", required: false }] }], childColumns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxeColumnComponent), { ...{ descendants: false }, isSignal: true }] }] } });
+
+/**
+ * `nxe-selection` — drop-in replacement for DevExtreme `dxo-selection` (grid child option).
+ *
+ * A no-render config element collected by `nxe-data-grid` via `contentChild`. The app only uses
+ * `mode` ("single" ×17 / "multiple" ×14, plain string attrs), `selectAllMode="page"`,
+ * `showCheckBoxesMode` ("always" ×11 shows the checkbox column; "false"/"none" hide it →
+ * selection by row click). `recursive` is tree-list-only (ignored here).
+ */
+class NxeSelectionComponent {
+    mode = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    selectAllMode = input('page', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectAllMode" }] : /* istanbul ignore next */ []));
+    /** "always" shows the checkbox column; anything else ("false"/"none"/"onClick") hides it. */
+    showCheckBoxesMode = input('onClick', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCheckBoxesMode" }] : /* istanbul ignore next */ []));
+    recursive = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "recursive" }] : /* istanbul ignore next */ []));
+    /** dx parity: row-body clicks toggle selection even when checkboxes are shown. */
+    selectByClick = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectByClick" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxeSelectionComponent, isStandalone: true, selector: "nxe-selection", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, selectAllMode: { classPropertyName: "selectAllMode", publicName: "selectAllMode", isSignal: true, isRequired: false, transformFunction: null }, showCheckBoxesMode: { classPropertyName: "showCheckBoxesMode", publicName: "showCheckBoxesMode", isSignal: true, isRequired: false, transformFunction: null }, recursive: { classPropertyName: "recursive", publicName: "recursive", isSignal: true, isRequired: false, transformFunction: null }, selectByClick: { classPropertyName: "selectByClick", publicName: "selectByClick", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: none" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeSelectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-selection',
+                    standalone: true,
+                    template: '',
+                    host: { style: 'display: none' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], selectAllMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllMode", required: false }] }], showCheckBoxesMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckBoxesMode", required: false }] }], recursive: [{ type: i0.Input, args: [{ isSignal: true, alias: "recursive", required: false }] }], selectByClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectByClick", required: false }] }] } });
+
+/**
+ * `nxe-header-filter` — drop-in replacement for DevExtreme `dxo-header-filter` (grid child option).
+ *
+ * Adds a funnel icon to each filterable column header; clicking it opens a popup of the column's
+ * distinct values (checkbox list + optional search) to filter the grid. The app uses essentially
+ * one shape: `[search]="{ enabled: true }" [visible]="true"` (60 files). Legacy `[allowSearch]`
+ * (1×) folds into `search.enabled`.
+ */
+class NxeHeaderFilterComponent {
+    visible = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    search = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+    /** Legacy alias for `search.enabled` (one holdout). */
+    allowSearch = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowSearch" }] : /* istanbul ignore next */ []));
+    /** Whether the in-popup search box shows.
+     *
+     * Defaults to **true**, matching the legacy DevExtreme deployment: a popup listing every
+     * distinct value in a column is close to unusable without one. 60 of the app's templates
+     * already opt in explicitly, so this only changes the handful that never said either way —
+     * and an explicit `[search]="{ enabled: false }"` still turns it off. */
+    searchEnabled() {
+        return this.search()?.enabled ?? this.allowSearch() ?? true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeHeaderFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxeHeaderFilterComponent, isStandalone: true, selector: "nxe-header-filter", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, allowSearch: { classPropertyName: "allowSearch", publicName: "allowSearch", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: none" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeHeaderFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-header-filter',
+                    standalone: true,
+                    template: '',
+                    host: { style: 'display: none' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], allowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSearch", required: false }] }] } });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * Header-filter state model — the draft/apply/search machinery extracted from
+ * `nxe-data-grid` (pivot parity Phase 3a) so the pivot's field panel can reuse it on pages
+ * that have no data grid. Pure signals/computeds, no Angular DI, ZERO behavior change:
+ * every computed/method body is a verbatim move from `nxe-data-grid.component.ts`.
+ *
+ * The model is generic over the column type `C` (the grid passes `NxeColumnComponent`; the
+ * pivot will pass its field descriptor) and reads rows/values through a
+ * {@link NxeHeaderFilterSource} adapter, so it owns only the frozen semantics:
+ * `(Blanks)` first, Yes/No boolean buckets, the date Year > Month > Day tree, dx search
+ * scoping of (Select All), check-on-open, and "everything checked = no filter" on apply.
+ */
+/**
+ * Header-filter key for blank-ish values (`null`/`undefined`/`''`) — dx lists them as one
+ * `(Blanks)` bucket, FIRST (bright audit). A symbol can never collide with data values.
+ */
+const NXE_HF_BLANKS = Symbol('nxe-hf-blanks');
+/**
+ * Normalizes a raw cell value to its header-filter key: blank-ish → the `(Blanks)` sentinel,
+ * date columns → a `yyyy-MM-dd` day key (the tree's leaf unit), else the raw value.
+ */
+function nxeHfKey(raw, isDate) {
+    if (raw == null || raw === '') {
+        return NXE_HF_BLANKS;
+    }
+    if (isDate) {
+        const dt = parseDateValue(raw);
+        return dt ? dt.toFormat('yyyy-MM-dd') : String(raw);
+    }
+    return raw;
+}
+class NxeHeaderFilterModel {
+    source;
+    static MONTH_NAMES = [
+        'January', 'February', 'March', 'April', 'May', 'June',
+        'July', 'August', 'September', 'October', 'November', 'December',
+    ];
+    /** The column whose popup is open (`null` = closed). */
+    column = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    /** The checked key set being edited in the popup (committed by the host on OK). */
+    draft = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    search = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+    expanded = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    constructor(source) {
+        this.source = source;
+    }
+    /** This column's header-filter key for a raw value. */
+    key(column, raw) {
+        return nxeHfKey(raw, this.source.isDate(column));
+    }
+    /** Distinct {key, text} for the open column — `(Blanks)` first, then Yes/No or values ascending. */
+    distinct = computed(() => {
+        const col = this.column();
+        if (!col) {
+            return [];
+        }
+        const seen = new Map();
+        for (const row of this.source.rows()) {
+            const raw = this.source.rawValue(col, row);
+            const key = this.key(col, raw);
+            if (!seen.has(key)) {
+                seen.set(key, {
+                    key,
+                    raw,
+                    text: key === NXE_HF_BLANKS
+                        ? '(Blanks)'
+                        : (this.source.boolLabel(col, raw) ?? this.source.displayText(col, row)),
+                });
+            }
+        }
+        // dx sorts lookup columns by display text, everything else by raw value.
+        const byDisplay = this.source.sortByDisplayText(col);
+        return [...seen.values()]
+            .sort((a, b) => {
+            if (a.key === NXE_HF_BLANKS) {
+                return -1;
+            }
+            if (b.key === NXE_HF_BLANKS) {
+                return 1;
+            }
+            const la = this.source.boolLabel(col, a.raw);
+            const lb = this.source.boolLabel(col, b.raw);
+            if (la && lb) {
+                return la === lb ? 0 : la === 'Yes' ? -1 : 1;
+            }
+            return byDisplay ? a.text.localeCompare(b.text) : this.source.compare(a.raw, b.raw);
+        })
+            .map(({ key, text }) => ({ key, text }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "distinct" }] : /* istanbul ignore next */ []));
+    distinctFiltered = computed(() => {
+        const q = this.search().trim().toLowerCase();
+        return q ? this.distinct().filter((d) => d.text.toLowerCase().includes(q)) : this.distinct();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "distinctFiltered" }] : /* istanbul ignore next */ []));
+    // --- Date-column header filter: Year > Month > Day tree (dx groupInterval default) ----------
+    isDate = computed(() => {
+        const col = this.column();
+        return !!col && this.source.isDate(col);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDate" }] : /* istanbul ignore next */ []));
+    dateTree = computed(() => {
+        const col = this.column();
+        if (!col || !this.source.isDate(col)) {
+            return [];
+        }
+        const days = new Set();
+        const unparseable = new Map();
+        let hasBlanks = false;
+        for (const row of this.source.rows()) {
+            const key = this.key(col, this.source.rawValue(col, row));
+            if (key === NXE_HF_BLANKS) {
+                hasBlanks = true;
+            }
+            else if (typeof key === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(key)) {
+                days.add(key);
+            }
+            else {
+                // nxeHfKey's String(raw) fallback for unparseable dates — a flat leaf, not Y>M>D
+                unparseable.set(String(key), key);
+            }
+        }
+        const out = [];
+        if (hasBlanks) {
+            out.push({ label: '(Blanks)', key: 'blanks', children: [], leafKeys: [NXE_HF_BLANKS] });
+        }
+        const byYear = new Map();
+        for (const day of [...days].sort()) {
+            const year = day.slice(0, 4);
+            const month = Number(day.slice(5, 7));
+            if (!byYear.has(year)) {
+                byYear.set(year, new Map());
+            }
+            const months = byYear.get(year);
+            if (!months.has(month)) {
+                months.set(month, []);
+            }
+            months.get(month).push(day);
+        }
+        for (const [year, months] of byYear) {
+            const monthNodes = [];
+            for (const [month, dayKeys] of months) {
+                monthNodes.push({
+                    label: NxeHeaderFilterModel.MONTH_NAMES[month - 1],
+                    key: `m:${year}-${month}`,
+                    children: dayKeys.map((d) => ({
+                        label: String(Number(d.slice(8, 10))),
+                        key: `d:${d}`,
+                        children: [],
+                        leafKeys: [d],
+                    })),
+                    leafKeys: dayKeys,
+                });
+            }
+            out.push({
+                label: year,
+                key: `y:${year}`,
+                children: monthNodes,
+                leafKeys: monthNodes.flatMap((m) => m.leafKeys),
+            });
+        }
+        for (const [label, key] of [...unparseable].sort((a, b) => a[0].localeCompare(b[0]))) {
+            out.push({ label, key: `o:${label}`, children: [], leafKeys: [key] });
+        }
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateTree" }] : /* istanbul ignore next */ []));
+    /**
+     * Search prunes the tree dx-style: a node stays if its label matches or a descendant does;
+     * a matched-label node with no matching descendants collapses to a leaf (keeps all its keys).
+     */
+    dateTreeFiltered = computed(() => {
+        const q = this.search().trim().toLowerCase();
+        if (!q) {
+            return this.dateTree();
+        }
+        const prune = (nodes) => nodes
+            .map((n) => {
+            const kids = prune(n.children);
+            if (kids.length) {
+                return { ...n, children: kids, leafKeys: kids.flatMap((k) => k.leafKeys) };
+            }
+            if (n.label.toLowerCase().includes(q)) {
+                return { ...n, children: [] };
+            }
+            return null;
+        })
+            .filter((n) => !!n);
+        return prune(this.dateTree());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateTreeFiltered" }] : /* istanbul ignore next */ []));
+    toggleExpand(key) {
+        this.expanded.update((set) => {
+            const next = new Set(set);
+            next.has(key) ? next.delete(key) : next.add(key);
+            return next;
+        });
+    }
+    /** While searching every surviving branch shows expanded (dx auto-expands matches). */
+    nodeExpanded(key) {
+        return this.search().trim() ? true : this.expanded().has(key);
+    }
+    nodeChecked(n) {
+        const draft = this.draft();
+        return n.leafKeys.length > 0 && n.leafKeys.every((k) => draft.has(k));
+    }
+    nodeIndeterminate(n) {
+        const draft = this.draft();
+        return !this.nodeChecked(n) && n.leafKeys.some((k) => draft.has(k));
+    }
+    toggleNode(n) {
+        const removing = this.nodeChecked(n);
+        this.draft.update((set) => {
+            const next = new Set(set);
+            for (const k of n.leafKeys) {
+                removing ? next.delete(k) : next.add(k);
+            }
+            return next;
+        });
+    }
+    /** Every selectable key of the open column (tree leaves for dates, list keys otherwise). */
+    allKeys = computed(() => this.isDate()
+        ? this.dateTree().flatMap((n) => n.leafKeys)
+        : this.distinct().map((d) => d.key), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allKeys" }] : /* istanbul ignore next */ []));
+    /** The keys currently shown in the popup — with a search active, only the matches. */
+    visibleKeys = computed(() => this.isDate()
+        ? this.dateTreeFiltered().flatMap((n) => n.leafKeys)
+        : this.distinctFiltered().map((d) => d.key), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleKeys" }] : /* istanbul ignore next */ []));
+    /** (Select All) state/toggle operate on the VISIBLE keys (dx: search scopes Select All). */
+    allChecked = computed(() => {
+        const all = this.visibleKeys();
+        const draft = this.draft();
+        return all.length > 0 && all.every((k) => draft.has(k));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allChecked" }] : /* istanbul ignore next */ []));
+    /** Whether every key of the whole column is checked — decides "no filter" on apply. */
+    fullChecked = computed(() => {
+        const all = this.allKeys();
+        const draft = this.draft();
+        return all.length > 0 && all.every((k) => draft.has(k));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullChecked" }] : /* istanbul ignore next */ []));
+    /**
+     * Reset the popup state for `column` (check-on-open — FROZEN, see DEFAULTS.md):
+     * no applied filter → everything checked; else start from the applied set.
+     */
+    open(column, applied) {
+        this.column.set(column);
+        this.search.set('');
+        this.expanded.set(new Set());
+        this.draft.set(applied ? new Set(applied) : new Set(this.allKeys()));
+    }
+    close() {
+        this.column.set(null);
+    }
+    toggleValue(value) {
+        this.draft.update((set) => {
+            const next = new Set(set);
+            next.has(value) ? next.delete(value) : next.add(value);
+            return next;
+        });
+    }
+    toggleAll() {
+        const visible = this.visibleKeys();
+        const removing = this.allChecked();
+        this.draft.update((set) => {
+            const next = new Set(set);
+            for (const k of visible) {
+                removing ? next.delete(k) : next.add(k);
+            }
+            return next;
+        });
+    }
+    /**
+     * The set the host stores on OK: everything checked (or nothing to choose from) =
+     * explicit "no filter" (`null` so a declarative seed can't resurrect); else the
+     * allowed-key set (empty = empty grid).
+     */
+    applyResult() {
+        const clear = this.fullChecked() || this.allKeys().length === 0;
+        return clear ? null : new Set(this.draft());
+    }
+}
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * The header-filter popup panel — the `.nxe-hf-*` chunk extracted from `nxe-data-grid`'s
+ * template (pivot parity Phase 3a) so the pivot can open the same popup on pages with no
+ * data grid. Same DOM, same FROZEN classes (`.nxe-hf-item`/`.nxe-hf-search`/… — DEFAULTS.md):
+ * the host element carries `dx-header-filter-menu nxe-hf-panel`, exactly where the old
+ * template's root `<div>` sat inside the overlay pane.
+ *
+ * Renders whatever {@link NxeHeaderFilterModel} it is given — checkbox list or the date
+ * Year > Month > Day tree — and emits `applied`/`cancelled` for the host to commit/close;
+ * the panel itself never touches the host's filter state.
+ */
+class NxeHeaderFilterPanelComponent {
+    model = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+    /** Live predicate (re-read every CD, like the grid template did) — a mid-open config
+        change to `search.enabled` still shows/hides the box. */
+    searchEnabled = input(() => true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchEnabled" }] : /* istanbul ignore next */ []));
+    /** OK — the host commits the draft and closes. */
+    applied = output();
+    /** Cancel — the host closes without committing. */
+    cancelled = output();
+    showSearch() {
+        return this.searchEnabled()();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeHeaderFilterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeHeaderFilterPanelComponent, isStandalone: true, selector: "nxe-header-filter-panel", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, searchEnabled: { classPropertyName: "searchEnabled", publicName: "searchEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { applied: "applied", cancelled: "cancelled" }, host: { classAttribute: "dx-header-filter-menu nxe-hf-panel" }, ngImport: i0, template: "@if (showSearch()) {\r\n    <input\r\n        class=\"nxe-hf-search\"\r\n        type=\"text\"\r\n        placeholder=\"Search\"\r\n        [value]=\"model().search()\"\r\n        (input)=\"model().search.set($any($event.target).value)\" />\r\n}\r\n<div class=\"nxe-hf-list\" [class.nxe-hf-tree]=\"model().isDate()\">\r\n    <label class=\"nxe-hf-item nxe-hf-selectall\">\r\n        <input type=\"checkbox\" [checked]=\"model().allChecked()\" (change)=\"model().toggleAll()\" />\r\n        <span>Select All</span>\r\n    </label>\r\n    @if (model().isDate()) {\r\n        <!-- dx date header filter: Year > Month > Day checkbox tree -->\r\n        <ng-container\r\n            [ngTemplateOutlet]=\"hfTreeNodes\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: model().dateTreeFiltered() }\" />\r\n    } @else {\r\n        @for (item of model().distinctFiltered(); track item.key) {\r\n            <label class=\"nxe-hf-item\">\r\n                <input\r\n                    type=\"checkbox\"\r\n                    [checked]=\"model().draft().has(item.key)\"\r\n                    (change)=\"model().toggleValue(item.key)\" />\r\n                <span>{{ item.text }}</span>\r\n            </label>\r\n        }\r\n    }\r\n</div>\r\n<div class=\"nxe-hf-actions\">\r\n    <button type=\"button\" class=\"nxe-hf-btn nxe-hf-ok\" (click)=\"applied.emit()\">OK</button>\r\n    <button type=\"button\" class=\"nxe-hf-btn\" (click)=\"cancelled.emit()\">Cancel</button>\r\n</div>\r\n\r\n<!-- Recursive date-tree nodes for the header-filter popup -->\r\n<ng-template #hfTreeNodes let-nodes>\r\n    @for (n of nodes; track n.key) {\r\n        <div class=\"nxe-hf-tree-node\">\r\n            @if (n.children.length) {\r\n                <span\r\n                    class=\"nxe-hf-tree-toggle\"\r\n                    [class.nxe-expanded]=\"model().nodeExpanded(n.key)\"\r\n                    (click)=\"model().toggleExpand(n.key)\"></span>\r\n            } @else {\r\n                <span class=\"nxe-hf-tree-toggle-stub\"></span>\r\n            }\r\n            <label class=\"nxe-hf-item\">\r\n                <input\r\n                    type=\"checkbox\"\r\n                    [checked]=\"model().nodeChecked(n)\"\r\n                    [indeterminate]=\"model().nodeIndeterminate(n)\"\r\n                    (change)=\"model().toggleNode(n)\" />\r\n                <span>{{ n.label }}</span>\r\n            </label>\r\n            @if (n.children.length && model().nodeExpanded(n.key)) {\r\n                <div class=\"nxe-hf-tree-children\">\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"hfTreeNodes\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: n.children }\" />\r\n                </div>\r\n            }\r\n        </div>\r\n    }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.nxe-hf-panel{display:flex;flex-direction:column;min-width:200px;max-width:320px;background:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 6px 12px #0000002d;color:#333}.nxe-hf-panel .nxe-hf-search{margin:6px;padding:5px 8px;border:1px solid #ddd;border-radius:3px;font:inherit;outline:none}.nxe-hf-panel .nxe-hf-search:focus{border-color:#30374c}.nxe-hf-panel .nxe-hf-list{max-height:260px;overflow-y:auto;padding:2px 0}.nxe-hf-panel .nxe-hf-item{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}.nxe-hf-panel .nxe-hf-item:hover{background:#f4f4f4}.nxe-hf-panel .nxe-hf-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nxe-hf-panel .nxe-hf-selectall{padding:12px 10px 8px;border-bottom:1px solid #ddd}.nxe-hf-panel .nxe-hf-actions{display:flex;justify-content:flex-end;gap:6px;padding:6px;border-top:1px solid #eee}.nxe-hf-panel .nxe-hf-btn{min-width:85px;padding:8px 12px;border:1px solid #ddd;border-radius:4px;background:transparent;color:inherit;cursor:pointer;font:inherit}.nxe-hf-panel .nxe-hf-btn:hover{background:#0000000a}.nxe-hf-panel input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:0 0 auto;position:relative;box-sizing:border-box;width:22px;height:22px;margin:0;border:1px solid #ddd;border-radius:2px;background:#fff;cursor:pointer}.nxe-hf-panel input[type=checkbox]:checked:after{content:\"\";position:absolute;left:7px;top:3px;width:6px;height:12px;border:solid #337ab7;border-width:0 2px 2px 0;transform:rotate(45deg)}.nxe-hf-panel input[type=checkbox]:indeterminate:after{content:\"\";position:absolute;left:4px;top:9px;width:12px;height:2px;background:#337ab7}.nxe-hf-panel input[type=checkbox]:hover{border-color:#265a87}.nxe-hf-panel input[type=checkbox]:focus-visible{outline:none;border-color:#337ab7}.nxe-hf-tree-node{display:block;white-space:nowrap}.nxe-hf-tree-children{padding-left:18px}.nxe-hf-tree-node .nxe-hf-item{display:inline-flex}.nxe-hf-tree-toggle{display:inline-block;position:relative;width:14px;height:14px;cursor:pointer;vertical-align:middle}.nxe-hf-tree-toggle:before{content:\"\";position:absolute;left:4px;top:4px;width:5px;height:5px;border-right:1.5px solid #555;border-bottom:1.5px solid #555;transform:rotate(-45deg)}.nxe-hf-tree-toggle.nxe-expanded:before{transform:rotate(45deg)}.nxe-hf-tree-toggle-stub{display:inline-block;width:14px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeHeaderFilterPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-header-filter-panel', standalone: true, imports: [NgTemplateOutlet], host: { class: 'dx-header-filter-menu nxe-hf-panel' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (showSearch()) {\r\n    <input\r\n        class=\"nxe-hf-search\"\r\n        type=\"text\"\r\n        placeholder=\"Search\"\r\n        [value]=\"model().search()\"\r\n        (input)=\"model().search.set($any($event.target).value)\" />\r\n}\r\n<div class=\"nxe-hf-list\" [class.nxe-hf-tree]=\"model().isDate()\">\r\n    <label class=\"nxe-hf-item nxe-hf-selectall\">\r\n        <input type=\"checkbox\" [checked]=\"model().allChecked()\" (change)=\"model().toggleAll()\" />\r\n        <span>Select All</span>\r\n    </label>\r\n    @if (model().isDate()) {\r\n        <!-- dx date header filter: Year > Month > Day checkbox tree -->\r\n        <ng-container\r\n            [ngTemplateOutlet]=\"hfTreeNodes\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: model().dateTreeFiltered() }\" />\r\n    } @else {\r\n        @for (item of model().distinctFiltered(); track item.key) {\r\n            <label class=\"nxe-hf-item\">\r\n                <input\r\n                    type=\"checkbox\"\r\n                    [checked]=\"model().draft().has(item.key)\"\r\n                    (change)=\"model().toggleValue(item.key)\" />\r\n                <span>{{ item.text }}</span>\r\n            </label>\r\n        }\r\n    }\r\n</div>\r\n<div class=\"nxe-hf-actions\">\r\n    <button type=\"button\" class=\"nxe-hf-btn nxe-hf-ok\" (click)=\"applied.emit()\">OK</button>\r\n    <button type=\"button\" class=\"nxe-hf-btn\" (click)=\"cancelled.emit()\">Cancel</button>\r\n</div>\r\n\r\n<!-- Recursive date-tree nodes for the header-filter popup -->\r\n<ng-template #hfTreeNodes let-nodes>\r\n    @for (n of nodes; track n.key) {\r\n        <div class=\"nxe-hf-tree-node\">\r\n            @if (n.children.length) {\r\n                <span\r\n                    class=\"nxe-hf-tree-toggle\"\r\n                    [class.nxe-expanded]=\"model().nodeExpanded(n.key)\"\r\n                    (click)=\"model().toggleExpand(n.key)\"></span>\r\n            } @else {\r\n                <span class=\"nxe-hf-tree-toggle-stub\"></span>\r\n            }\r\n            <label class=\"nxe-hf-item\">\r\n                <input\r\n                    type=\"checkbox\"\r\n                    [checked]=\"model().nodeChecked(n)\"\r\n                    [indeterminate]=\"model().nodeIndeterminate(n)\"\r\n                    (change)=\"model().toggleNode(n)\" />\r\n                <span>{{ n.label }}</span>\r\n            </label>\r\n            @if (n.children.length && model().nodeExpanded(n.key)) {\r\n                <div class=\"nxe-hf-tree-children\">\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"hfTreeNodes\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: n.children }\" />\r\n                </div>\r\n            }\r\n        </div>\r\n    }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.nxe-hf-panel{display:flex;flex-direction:column;min-width:200px;max-width:320px;background:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 6px 12px #0000002d;color:#333}.nxe-hf-panel .nxe-hf-search{margin:6px;padding:5px 8px;border:1px solid #ddd;border-radius:3px;font:inherit;outline:none}.nxe-hf-panel .nxe-hf-search:focus{border-color:#30374c}.nxe-hf-panel .nxe-hf-list{max-height:260px;overflow-y:auto;padding:2px 0}.nxe-hf-panel .nxe-hf-item{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}.nxe-hf-panel .nxe-hf-item:hover{background:#f4f4f4}.nxe-hf-panel .nxe-hf-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nxe-hf-panel .nxe-hf-selectall{padding:12px 10px 8px;border-bottom:1px solid #ddd}.nxe-hf-panel .nxe-hf-actions{display:flex;justify-content:flex-end;gap:6px;padding:6px;border-top:1px solid #eee}.nxe-hf-panel .nxe-hf-btn{min-width:85px;padding:8px 12px;border:1px solid #ddd;border-radius:4px;background:transparent;color:inherit;cursor:pointer;font:inherit}.nxe-hf-panel .nxe-hf-btn:hover{background:#0000000a}.nxe-hf-panel input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:0 0 auto;position:relative;box-sizing:border-box;width:22px;height:22px;margin:0;border:1px solid #ddd;border-radius:2px;background:#fff;cursor:pointer}.nxe-hf-panel input[type=checkbox]:checked:after{content:\"\";position:absolute;left:7px;top:3px;width:6px;height:12px;border:solid #337ab7;border-width:0 2px 2px 0;transform:rotate(45deg)}.nxe-hf-panel input[type=checkbox]:indeterminate:after{content:\"\";position:absolute;left:4px;top:9px;width:12px;height:2px;background:#337ab7}.nxe-hf-panel input[type=checkbox]:hover{border-color:#265a87}.nxe-hf-panel input[type=checkbox]:focus-visible{outline:none;border-color:#337ab7}.nxe-hf-tree-node{display:block;white-space:nowrap}.nxe-hf-tree-children{padding-left:18px}.nxe-hf-tree-node .nxe-hf-item{display:inline-flex}.nxe-hf-tree-toggle{display:inline-block;position:relative;width:14px;height:14px;cursor:pointer;vertical-align:middle}.nxe-hf-tree-toggle:before{content:\"\";position:absolute;left:4px;top:4px;width:5px;height:5px;border-right:1.5px solid #555;border-bottom:1.5px solid #555;transform:rotate(-45deg)}.nxe-hf-tree-toggle.nxe-expanded:before{transform:rotate(45deg)}.nxe-hf-tree-toggle-stub{display:inline-block;width:14px}\n"] }]
+        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], searchEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchEnabled", required: false }] }], applied: [{ type: i0.Output, args: ["applied"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
+
+/** Create + attach the header-filter popup; the caller keeps the ref to detach/dispose. */
+function openNxeHeaderFilterOverlay(options) {
+    const overlayRef = options.overlay.create({
+        positionStrategy: options.overlay
+            .position()
+            .flexibleConnectedTo(options.origin)
+            .withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
+        ]),
+        scrollStrategy: options.overlay.scrollStrategies.reposition(),
+        hasBackdrop: true,
+        backdropClass: 'cdk-overlay-transparent-backdrop',
+        panelClass: nxePane('nxe-hf-pane'),
+    });
+    overlayRef.backdropClick().subscribe(() => options.onClose());
+    // Escape closes the filter menu (dx). This subscription is also what makes CDK deliver the
+    // key here at all: OverlayKeyboardDispatcher dispatches to the topmost overlay that HAS a
+    // keydown observer, so without it Escape fell through to whatever overlay sits underneath —
+    // on the pivot that is the field chooser, which would close and strand this popup on a
+    // detached anchor.
+    overlayRef.keydownEvents().subscribe((event) => {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            options.onClose();
+        }
+    });
+    const panelRef = overlayRef.attach(new ComponentPortal(NxeHeaderFilterPanelComponent, options.viewContainerRef));
+    panelRef.setInput('model', options.model);
+    panelRef.setInput('searchEnabled', options.searchEnabled);
+    panelRef.instance.applied.subscribe(() => options.onApply());
+    panelRef.instance.cancelled.subscribe(() => options.onClose());
+    return overlayRef;
+}
+
+/** `dxo-grouping` — only `[autoExpandAll]="true"` is used (24 grids). */
+class NxeGroupingComponent {
+    autoExpandAll = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoExpandAll" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeGroupingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxeGroupingComponent, isStandalone: true, selector: "nxe-grouping", inputs: { autoExpandAll: { classPropertyName: "autoExpandAll", publicName: "autoExpandAll", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: none" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeGroupingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-grouping',
+                    standalone: true,
+                    template: '',
+                    host: { style: 'display: none' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { autoExpandAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoExpandAll", required: false }] }] } });
+/** `dxo-group-panel` — only `[visible]` is used (23 grids). */
+class NxeGroupPanelComponent {
+    visible = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeGroupPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxeGroupPanelComponent, isStandalone: true, selector: "nxe-group-panel", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: none" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeGroupPanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-group-panel',
+                    standalone: true,
+                    template: '',
+                    host: { style: 'display: none' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }] } });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/** Shared base for total/group summary items. The app only uses `summaryType="sum"`. */
+class NxeSummaryItemBase {
+    column = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    summaryType = input('sum', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "summaryType" }] : /* istanbul ignore next */ []));
+    /** Identifier passed to `calculateCustomSummary` for `summaryType='custom'` items. */
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Positional template; `{0}` is replaced by the customized/formatted value. */
+    displayFormat = input('{0}', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayFormat" }] : /* istanbul ignore next */ []));
+    customizeText = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customizeText" }] : /* istanbul ignore next */ []));
+    valueFormat = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
+    alignByColumn = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alignByColumn" }] : /* istanbul ignore next */ []));
+    /** Render this group aggregate in a footer row under the group instead of the group row. */
+    showInGroupFooter = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showInGroupFooter" }] : /* istanbul ignore next */ []));
+    showInColumn = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showInColumn" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeSummaryItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: NxeSummaryItemBase, isStandalone: true, inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, summaryType: { classPropertyName: "summaryType", publicName: "summaryType", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, customizeText: { classPropertyName: "customizeText", publicName: "customizeText", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, alignByColumn: { classPropertyName: "alignByColumn", publicName: "alignByColumn", isSignal: true, isRequired: false, transformFunction: null }, showInGroupFooter: { classPropertyName: "showInGroupFooter", publicName: "showInGroupFooter", isSignal: true, isRequired: false, transformFunction: null }, showInColumn: { classPropertyName: "showInColumn", publicName: "showInColumn", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeSummaryItemBase, decorators: [{
+            type: Directive
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], summaryType: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryType", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], customizeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "customizeText", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], alignByColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignByColumn", required: false }] }], showInGroupFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInGroupFooter", required: false }] }], showInColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInColumn", required: false }] }] } });
+/** `dxi-total-item` — a grand-total footer aggregate. */
+class NxeTotalItemComponent extends NxeSummaryItemBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTotalItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: NxeTotalItemComponent, isStandalone: true, selector: "nxe-total-item", host: { styleAttribute: "display: none" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTotalItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-total-item',
+                    standalone: true,
+                    template: '',
+                    host: { style: 'display: none' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }] });
+/** `dxi-group-item` — a per-group footer aggregate. */
+class NxeGroupItemComponent extends NxeSummaryItemBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeGroupItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: NxeGroupItemComponent, isStandalone: true, selector: "nxe-group-item", host: { styleAttribute: "display: none" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeGroupItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-group-item',
+                    standalone: true,
+                    template: '',
+                    host: { style: 'display: none' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }] });
+/** `dxo-summary` — container collecting `nxe-total-item` / `nxe-group-item` children. */
+class NxeSummaryComponent {
+    /**
+     * DevExtreme `calculateCustomSummary` (orbit addition): called with the dx protocol —
+     * `{name, summaryProcess:'start'}`, then `'calculate'` once per row (`options.value` = the
+     * row object), then `'finalize'`; the handler mutates `options.totalValue`.
+     */
+    calculateCustomSummary = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calculateCustomSummary" }] : /* istanbul ignore next */ []));
+    totalItems = contentChildren(NxeTotalItemComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
+    groupItems = contentChildren(NxeGroupItemComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupItems" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.5", type: NxeSummaryComponent, isStandalone: true, selector: "nxe-summary", inputs: { calculateCustomSummary: { classPropertyName: "calculateCustomSummary", publicName: "calculateCustomSummary", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "totalItems", predicate: NxeTotalItemComponent, isSignal: true }, { propertyName: "groupItems", predicate: NxeGroupItemComponent, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeSummaryComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-summary',
+                    standalone: true,
+                    template: '<ng-content />',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { calculateCustomSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "calculateCustomSummary", required: false }] }], totalItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxeTotalItemComponent), { isSignal: true }] }], groupItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxeGroupItemComponent), { isSignal: true }] }] } });
+
+/** `dxo-paging` — internal client paging. Presence enables paging; `[pageSize]`/`[pageIndex]` used. */
+class NxePagingComponent {
+    pageSize = input(20, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    pageIndex = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
+    enabled = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxePagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxePagingComponent, isStandalone: true, selector: "nxe-paging", inputs: { pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: none" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxePagingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-paging',
+                    standalone: true,
+                    template: '',
+                    host: { style: 'display: none' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }], enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "enabled", required: false }] }] } });
+/** `dxo-pager` — the pager UI config. */
+class NxePagerComponent {
+    visible = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    allowedPageSizes = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowedPageSizes" }] : /* istanbul ignore next */ []));
+    showPageSizeSelector = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPageSizeSelector" }] : /* istanbul ignore next */ []));
+    showNavigationButtons = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showNavigationButtons" }] : /* istanbul ignore next */ []));
+    showInfo = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showInfo" }] : /* istanbul ignore next */ []));
+    displayMode = input('adaptive', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayMode" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxePagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxePagerComponent, isStandalone: true, selector: "nxe-pager", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, allowedPageSizes: { classPropertyName: "allowedPageSizes", publicName: "allowedPageSizes", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, showNavigationButtons: { classPropertyName: "showNavigationButtons", publicName: "showNavigationButtons", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: none" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxePagerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-pager',
+                    standalone: true,
+                    template: '',
+                    host: { style: 'display: none' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], allowedPageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedPageSizes", required: false }] }], showPageSizeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelector", required: false }] }], showNavigationButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigationButtons", required: false }] }], showInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInfo", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }] } });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * `dxo-editing` — inline editing config. In this app editing is almost always template-driven
+ * (cell templates host `nxe-*` editors two-way-bound to `key.data.<field>`), so `mode="cell"` +
+ * `allowUpdating` are effectively decorative there. `mode="row"` with `[(changes)]`/`[(editRowKey)]`
+ * (autonumber-detail) and native cell editors (job-upsert) drive the grid's native inline editing.
+ */
+class NxeEditingComponent {
+    mode = input('cell', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    allowUpdating = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowUpdating" }] : /* istanbul ignore next */ []));
+    allowAdding = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowAdding" }] : /* istanbul ignore next */ []));
+    allowDeleting = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowDeleting" }] : /* istanbul ignore next */ []));
+    /** Two-way tracked changes (autonumber-detail's `Change<T>[]`). */
+    changes = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "changes" }] : /* istanbul ignore next */ []));
+    /** Two-way key of the row currently in edit mode (row mode). */
+    editRowKey = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editRowKey" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeEditingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxeEditingComponent, isStandalone: true, selector: "nxe-editing", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, allowUpdating: { classPropertyName: "allowUpdating", publicName: "allowUpdating", isSignal: true, isRequired: false, transformFunction: null }, allowAdding: { classPropertyName: "allowAdding", publicName: "allowAdding", isSignal: true, isRequired: false, transformFunction: null }, allowDeleting: { classPropertyName: "allowDeleting", publicName: "allowDeleting", isSignal: true, isRequired: false, transformFunction: null }, changes: { classPropertyName: "changes", publicName: "changes", isSignal: true, isRequired: false, transformFunction: null }, editRowKey: { classPropertyName: "editRowKey", publicName: "editRowKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changes: "changesChange", editRowKey: "editRowKeyChange" }, host: { styleAttribute: "display: none" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeEditingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-editing',
+                    standalone: true,
+                    template: '',
+                    host: { style: 'display: none' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], allowUpdating: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowUpdating", required: false }] }], allowAdding: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAdding", required: false }] }], allowDeleting: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDeleting", required: false }] }], changes: [{ type: i0.Input, args: [{ isSignal: true, alias: "changes", required: false }] }, { type: i0.Output, args: ["changesChange"] }], editRowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "editRowKey", required: false }] }, { type: i0.Output, args: ["editRowKeyChange"] }] } });
+
+/**
+ * `nxe-filter-row` — drop-in for DevExtreme `dxo-filter-row` (orbit addition; psak expressed
+ * the same config through the grid's `[filterRow]` object input, which remains supported).
+ * A no-render config element read by the parent `nxe-data-grid`.
+ */
+class NxeFilterRowComponent {
+    visible = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    /** DevExtreme parity (`auto`/`onClick`); the nxe filter row always applies on input. */
+    applyFilter = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "applyFilter" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeFilterRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxeFilterRowComponent, isStandalone: true, selector: "nxe-filter-row", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, applyFilter: { classPropertyName: "applyFilter", publicName: "applyFilter", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: none" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeFilterRowComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-filter-row',
+                    standalone: true,
+                    template: '',
+                    host: { style: 'display: none' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], applyFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyFilter", required: false }] }] } });
+
+/**
+ * `nxe-master-detail` — drop-in for DevExtreme `dxo-master-detail` (orbit addition).
+ *
+ * A no-render config element read by the parent `nxe-data-grid`. When `enabled`, the grid
+ * prepends a `dx-command-expand` column; expanding a row renders a
+ * `<tr class="dx-master-detail-row">` hosting the named sibling
+ * `<ng-template nxeTemplate="...">` with `{ data, rowIndex, key }` — instantiated ONLY while
+ * expanded, preserving the app's lazy nested-grid loading (`onRowExpanding` fires first).
+ */
+class NxeMasterDetailComponent {
+    enabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
+    /** Name of the sibling `nxeTemplate` rendered as the detail section (default `detail`). */
+    template = input('detail', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeMasterDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxeMasterDetailComponent, isStandalone: true, selector: "nxe-master-detail", inputs: { enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: none" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeMasterDetailComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-master-detail',
+                    standalone: true,
+                    template: '',
+                    host: { style: 'display: none' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "enabled", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }] } });
+
+/**
+ * `dxo-scrolling` — accepted for parity.
+ *
+ * Grid: the only usage is `rowRenderingMode="virtual"` (ledger-list), which renders only
+ * visible rows but loads all data; nxe-data-grid renders all rows (datasets are small
+ * enough), so it stays a no-op config there.
+ *
+ * Pivot (LIVE since W4 Lane 3): `NxePivotGridComponent` contentChild's this and
+ * `mode: 'virtual'` arms ROW WINDOWING — for `rowHeaderLayout: 'tree'` ONLY (the standard
+ * layout's rowspan-merged parent labels conflict with row slicing; DEFAULTS.md). Render-only:
+ * fixed 31px row pitch, spacer rows keep the scrollbar honest, and the model/export/chart
+ * always see every row. The DA page projects `mode="virtual"` but renders the standard
+ * layout → no-op there, dx-consistent with its pane-based virtual scrolling being a render
+ * optimization, never a data change.
+ */
+class NxeScrollingComponent {
+    mode = input('standard', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    rowRenderingMode = input('standard', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowRenderingMode" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeScrollingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxeScrollingComponent, isStandalone: true, selector: "nxe-scrolling", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, rowRenderingMode: { classPropertyName: "rowRenderingMode", publicName: "rowRenderingMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: none" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeScrollingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-scrolling',
+                    standalone: true,
+                    template: '',
+                    host: { style: 'display: none' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], rowRenderingMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowRenderingMode", required: false }] }] } });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function getRaw(row, field) {
+    if (!field || row == null) {
+        return undefined;
+    }
+    return field.includes('.') ? field.split('.').reduce((o, k) => o?.[k], row) : row[field];
+}
+/** A cell's exceljs value + optional number format. */
+function cellValue(row, col) {
+    const raw = getRaw(row, col.dataField);
+    if (raw == null || raw === '') {
+        return { value: '' };
+    }
+    switch (col.dataType) {
+        case 'number': {
+            const num = typeof raw === 'number' ? raw : Number(raw);
+            if (isNaN(num)) {
+                return { value: String(raw) };
+            }
+            // dx number masks ≈ exceljs numFmt; convert single-quoted literals to double-quoted.
+            const mask = typeof col.format === 'string' ? col.format.replace(/'/g, '"') : undefined;
+            return { value: num, numFmt: mask };
+        }
+        case 'date': {
+            const dt = parseDateValue(raw);
+            if (!dt) {
+                return { value: String(raw) };
+            }
+            // exceljs date codes are lowercase (dd mmm yyyy hh:mm).
+            return { value: dt.toJSDate(), numFmt: nxeDatePattern(col.format).toLowerCase() };
+        }
+        case 'boolean':
+            return { value: raw ? 'true' : 'false' };
+        default:
+            return { value: String(raw) };
+    }
+}
+/**
+ * Replacement for DevExtreme's `exportDataGrid({component, worksheet, autoFilterEnabled})`.
+ * Walks an {@link NxeGridInstance}'s currently-visible columns + filtered/sorted rows into an
+ * exceljs sheet (header row + autofilter + per-column numFmt), defaults the font to 'Calibri
+ * Light' (preserving the app's `formatExcel`), and saves via `nxeSaveAs` — matching the prior
+ * `report.helper.exportExcel` pipeline.
+ */
+async function exportNxeGridToExcel(grid, opts) {
+    const workbook = new Workbook();
+    const ws = workbook.addWorksheet(opts.sheetName);
+    const cols = grid.getVisibleColumns();
+    const rows = grid.getVisibleRows();
+    ws.addRow(cols.map((c) => c.caption));
+    for (const row of rows) {
+        const cells = cols.map((c) => cellValue(row, c));
+        const r = ws.addRow(cells.map((c) => c.value));
+        cells.forEach((c, i) => {
+            if (c.numFmt) {
+                r.getCell(i + 1).numFmt = c.numFmt;
+            }
+        });
+    }
+    if (opts.autoFilter !== false && cols.length > 0) {
+        ws.autoFilter = { from: { row: 1, column: 1 }, to: { row: 1, column: cols.length } };
+    }
+    if (opts.applyFont !== false) {
+        ws.eachRow((row) => row.eachCell((cell) => {
+            if (!cell.font?.name) {
+                cell.font = Object.assign(cell.font || {}, { name: 'Calibri Light' });
+            }
+        }));
+    }
+    const buffer = await workbook.xlsx.writeBuffer();
+    const fileName = opts.fileName.endsWith('.xlsx') ? opts.fileName : `${opts.fileName}.xlsx`;
+    nxeSaveAs(new Blob([buffer], { type: 'application/octet-stream' }), fileName);
+}
+/**
+ * Drop-in for DevExtreme's `exportDataGrid({component, worksheet, autoFilterEnabled})`
+ * (orbit addition): writes the grid's visible columns + rows into the CALLER's worksheet —
+ * the caller keeps ownership of the workbook, post-formatting, and saving
+ * (`report.helper.exportExcel` pipeline).
+ */
+async function exportDataGrid(opts) {
+    const ws = opts.worksheet;
+    const cols = opts.component.getVisibleColumns();
+    const rows = opts.component.getVisibleRows();
+    ws.addRow(cols.map((c) => c.caption));
+    for (const row of rows) {
+        const cells = cols.map((c) => cellValue(row, c));
+        const r = ws.addRow(cells.map((c) => c.value));
+        cells.forEach((c, i) => {
+            if (c.numFmt) {
+                r.getCell(i + 1).numFmt = c.numFmt;
+            }
+        });
+    }
+    if (opts.autoFilterEnabled && cols.length > 0) {
+        ws.autoFilter = { from: { row: 1, column: 1 }, to: { row: 1, column: cols.length } };
+    }
+}
+
+class NxeGridResizeController {
+    hooks;
+    active = null;
+    suppression = new NxeGestureClickSuppression();
+    onMove = (e) => this.pointerMove(e);
+    onUp = (e) => {
+        if (this.active && e.pointerId !== this.active.pointerId) {
+            return;
+        }
+        this.pointerUp();
+    };
+    onCancelEv = (e) => {
+        if (this.active && e.pointerId !== this.active.pointerId) {
+            return;
+        }
+        this.cancel();
+    };
+    onKey = (e) => {
+        if (e.key === 'Escape') {
+            this.cancel();
+        }
+    };
+    constructor(hooks) {
+        this.hooks = hooks;
+    }
+    /** `visibleIndex`/`lead` locate the header cell + `<col>`; `nextField` only in nextColumn mode. */
+    start(field, nextField, visibleIndex, lead, event) {
+        if (event.button !== 0 || this.active) {
+            return;
+        }
+        event.stopPropagation(); // the header td above would otherwise start a group drag
+        event.preventDefault();
+        const host = this.hooks.host();
+        const table = host.querySelector('.dx-datagrid-content > .dx-datagrid-table');
+        const headerRow = nxeLeafHeaderRow(host);
+        if (!table || !headerRow) {
+            return;
+        }
+        const cols = Array.from(table.querySelectorAll(':scope > colgroup > col'));
+        // The colgroup still counts command columns, so it keeps the lead offset; the header row
+        // does not, because with bands the command cells span down from the row above.
+        const headerCells = nxeHeaderDataCells(headerRow);
+        const colEl = cols[lead + visibleIndex];
+        const cell = headerCells[visibleIndex];
+        if (!colEl || !cell) {
+            return;
+        }
+        const nextColEl = nextField != null ? cols[lead + visibleIndex + 1] ?? null : null;
+        const nextCell = nextField != null ? headerCells[visibleIndex + 1] : null;
+        this.active = {
+            field,
+            nextField,
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            startW: cell.getBoundingClientRect().width,
+            startNextW: nextCell ? nextCell.getBoundingClientRect().width : 0,
+            colEl,
+            nextColEl,
+            tableEl: table,
+            startTableW: table.getBoundingClientRect().width,
+            prevColStyle: colEl.style.width,
+            prevNextStyle: nextColEl?.style.width ?? '',
+            prevTableStyle: table.style.width,
+            lastW: cell.getBoundingClientRect().width,
+            lastNextW: nextCell ? nextCell.getBoundingClientRect().width : 0,
+        };
+        this.hooks.onStart();
+        document.body.classList.add('nxe-grid-resizing');
+        this.hooks.zone.runOutsideAngular(() => {
+            document.addEventListener('pointermove', this.onMove);
+            document.addEventListener('pointerup', this.onUp);
+            document.addEventListener('pointercancel', this.onCancelEv);
+            document.addEventListener('keydown', this.onKey);
+        });
+    }
+    consumeClick() {
+        return this.suppression.consume();
+    }
+    destroy() {
+        if (this.active) {
+            this.cancel();
+        }
+    }
+    pointerMove(e) {
+        const a = this.active;
+        if (!a || e.pointerId !== a.pointerId) {
+            return;
+        }
+        const min = this.hooks.minWidth();
+        const delta = e.clientX - a.startX;
+        if (this.hooks.mode() === 'widget' || !a.nextColEl) {
+            const w = Math.max(min, a.startW + delta);
+            a.colEl.style.width = `${w}px`;
+            a.tableEl.style.width = `${a.startTableW + (w - a.startW)}px`;
+            a.lastW = w;
+            return;
+        }
+        // nextColumn: trade with the neighbor, both clamped, table width constant.
+        let w = Math.max(min, a.startW + delta);
+        let next = a.startNextW - (w - a.startW);
+        if (next < min) {
+            next = min;
+            w = a.startW + a.startNextW - min;
+        }
+        a.colEl.style.width = `${w}px`;
+        a.nextColEl.style.width = `${next}px`;
+        a.lastW = w;
+        a.lastNextW = next;
+    }
+    pointerUp() {
+        const a = this.active;
+        this.teardown();
+        if (!a) {
+            return;
+        }
+        this.suppression.arm();
+        // A zero-movement release is a plain click on the handle — no freeze, no no-op event.
+        if (a.lastW === a.startW && a.lastNextW === a.startNextW) {
+            this.hooks.zone.run(() => this.hooks.onCancel());
+            return;
+        }
+        const changes = [
+            { field: a.field, from: a.startW, to: a.lastW },
+        ];
+        if (a.nextField && a.lastNextW !== a.startNextW) {
+            changes.push({ field: a.nextField, from: a.startNextW, to: a.lastNextW });
+        }
+        this.hooks.zone.run(() => this.hooks.onCommit(changes));
+    }
+    cancel() {
+        const a = this.active;
+        this.teardown();
+        if (!a) {
+            return;
+        }
+        this.suppression.arm();
+        a.colEl.style.width = a.prevColStyle;
+        if (a.nextColEl) {
+            a.nextColEl.style.width = a.prevNextStyle;
+        }
+        a.tableEl.style.width = a.prevTableStyle;
+        this.hooks.zone.run(() => this.hooks.onCancel());
+    }
+    teardown() {
+        this.active = null;
+        document.body.classList.remove('nxe-grid-resizing');
+        document.removeEventListener('pointermove', this.onMove);
+        document.removeEventListener('pointerup', this.onUp);
+        document.removeEventListener('pointercancel', this.onCancelEv);
+        document.removeEventListener('keydown', this.onKey);
+    }
+}
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/** Classify a rendered `<tr>` for dx's `rowType`, or null for rows dx does not report. */
+function nxeRowTypeOf(tr) {
+    const c = tr.classList;
+    if (c.contains('dx-header-row')) {
+        return 'header';
+    }
+    if (c.contains('dx-datagrid-filter-row')) {
+        return 'filter';
+    }
+    if (c.contains('dx-data-row')) {
+        return 'data';
+    }
+    if (c.contains('dx-group-footer-row')) {
+        return 'groupFooter';
+    }
+    if (c.contains('dx-group-row')) {
+        return 'group';
+    }
+    if (tr.parentElement?.classList.contains('dx-datagrid-total-footer')) {
+        return 'totalFooter';
+    }
+    return null;
+}
+/** Depth-first leaves of a declared column tree: a band contributes its children, not itself. */
+function flattenLeafColumns(cols) {
+    const out = [];
+    for (const col of cols) {
+        if (col.isBand()) {
+            out.push(...flattenLeafColumns(col.childColumns()));
+        }
+        else {
+            out.push(col);
+        }
+    }
+    return out;
+}
+/**
+ * `nxe-data-grid` — drop-in replacement for DevExtreme `dx-data-grid` (read-only core, slice 9a).
+ *
+ * Renders a single `<table>` emitting the dx DOM-class contract (`dx-widget dx-datagrid`,
+ * `dx-row`/`dx-header-row`/`dx-data-row`/`dx-datagrid-headers`/`dx-datagrid-rowsview`, `td`s) so
+ * the globally-loaded `dx.light.css` + repo `_grid.scss` overrides style it pixel-for-pixel
+ * (4px cell padding, #f8fafc header, #525252 header text, row/hover/alt colours). Columns are
+ * collected from `nxe-column` content children; named `cellTemplate`s resolve to sibling
+ * `<ng-template nxeTemplate="name">` blocks rendered with `{ data, rowIndex, columnIndex, ... }`
+ * (the live row object, so in-cell `nxe-*` editors can write through `key.data.<field>`).
+ *
+ * The `.instance` facade exposes only what the app calls: `getSelectedRowsData()` (12 template
+ * sites), `refresh()` (13), `columnOption(field,'visible',bool)` (3). Selection UI, header-filter,
+ * grouping and summary land in slice 9b.
+ */
+class NxeDataGridComponent {
+    elementRef = inject((ElementRef));
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    ngZone = inject(NgZone);
+    defaults = inject(NXE_DEFAULT_OPTIONS);
+    /** Pointer drag engine: drag-to-group, chip drag-out (ungroup), chip/column reorder. */
+    drag = new NxeGridDragController({
+        zone: this.ngZone,
+        host: () => this.elementRef.nativeElement,
+        onGroupDrop: (col) => this.groupByColumn(col),
+        onChipRemove: (col) => this.ungroupColumn(col.dataField()),
+        onChipMove: (from, to) => this.moveGroup(from, to),
+        reorderEnabled: () => this.allowColumnReordering(),
+        onColumnMove: (from, slot) => this.moveColumnByVisible(from, slot),
+        headerDataCells: () => nxeHeaderDataCells(nxeLeafHeaderRow(this.elementRef.nativeElement)),
+    });
+    /** Pointer resize engine (dx allowColumnResizing). */
+    resize = new NxeGridResizeController({
+        zone: this.ngZone,
+        host: () => this.elementRef.nativeElement,
+        mode: () => this.columnResizingMode(),
+        minWidth: () => this.columnMinWidth() ?? 50,
+        onStart: () => (this.resizeActive = true),
+        onCancel: () => (this.resizeActive = false),
+        onCommit: (changes) => this.commitColumnResize(changes),
+    });
+    resizeActive = false;
+    /**
+     * Columns exactly as declared: top-level leaves and bands, bands still holding their children.
+     * Only the header model reads this — everything else wants leaves.
+     */
+    declaredColumns = contentChildren(NxeColumnComponent, { ...(ngDevMode ? { debugName: "declaredColumns" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * The data columns: bands flattened away, depth-first, in declaration order.
+     *
+     * Keeping `columns()` meaning "the columns that carry data" is what stops banded headers
+     * being a rewrite. Sorting, grouping, filtering, summaries, resize, export and the whole
+     * `<tbody>` are about leaves and continue to work untouched; bands exist only in `<thead>`.
+     */
+    columns = computed(() => flattenLeafColumns(this.declaredColumns()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** True when any declared column is a band, i.e. the header needs more than one row. */
+    hasBands = computed(() => this.declaredColumns().some((c) => c.isBand()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasBands" }] : /* istanbul ignore next */ []));
+    templates = contentChildren(NxeTemplateDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    selection = contentChild(NxeSelectionComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    headerFilter = contentChild(NxeHeaderFilterComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerFilter" }] : /* istanbul ignore next */ []));
+    grouping = contentChild(NxeGroupingComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "grouping" }] : /* istanbul ignore next */ []));
+    groupPanel = contentChild(NxeGroupPanelComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupPanel" }] : /* istanbul ignore next */ []));
+    summaryCmp = contentChild(NxeSummaryComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "summaryCmp" }] : /* istanbul ignore next */ []));
+    pagingCmp = contentChild(NxePagingComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagingCmp" }] : /* istanbul ignore next */ []));
+    pagerCmp = contentChild(NxePagerComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagerCmp" }] : /* istanbul ignore next */ []));
+    editingCmp = contentChild(NxeEditingComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editingCmp" }] : /* istanbul ignore next */ []));
+    filterRowCmp = contentChild(NxeFilterRowComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterRowCmp" }] : /* istanbul ignore next */ []));
+    masterDetail = contentChild(NxeMasterDetailComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "masterDetail" }] : /* istanbul ignore next */ []));
+    // --- Inputs (mirror dx-data-grid; object-literal inputs accepted as-is for drop-in parity) ---
+    dataSource = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+    keyExpr = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyExpr" }] : /* istanbul ignore next */ []));
+    // Presentation options resolve as `binding ?? NXE_DEFAULT_OPTIONS ?? literal`. The raw input
+    // is aliased so the element keeps its dx name, and the public member stays the resolved
+    // value — every read site, template included, goes through the cascade without knowing.
+    //
+    // The default has to be `undefined`, not `false`: "unset" is a distinct state from "set to
+    // false", and only the former defers to the token. A `booleanAttribute` transform here would
+    // fold one into the other and silently disable the middle rung.
+    hoverStateEnabledInput = input(undefined, { ...(ngDevMode ? { debugName: "hoverStateEnabledInput" } : /* istanbul ignore next */ {}), alias: 'hoverStateEnabled' });
+    showColumnLinesInput = input(undefined, { ...(ngDevMode ? { debugName: "showColumnLinesInput" } : /* istanbul ignore next */ {}), alias: 'showColumnLines' });
+    showRowLinesInput = input(undefined, { ...(ngDevMode ? { debugName: "showRowLinesInput" } : /* istanbul ignore next */ {}), alias: 'showRowLines' });
+    showBordersInput = input(undefined, { ...(ngDevMode ? { debugName: "showBordersInput" } : /* istanbul ignore next */ {}), alias: 'showBorders' });
+    wordWrapEnabledInput = input(undefined, { ...(ngDevMode ? { debugName: "wordWrapEnabledInput" } : /* istanbul ignore next */ {}), alias: 'wordWrapEnabled' });
+    columnAutoWidthInput = input(undefined, { ...(ngDevMode ? { debugName: "columnAutoWidthInput" } : /* istanbul ignore next */ {}), alias: 'columnAutoWidth' });
+    rowAlternationEnabledInput = input(undefined, { ...(ngDevMode ? { debugName: "rowAlternationEnabledInput" } : /* istanbul ignore next */ {}), alias: 'rowAlternationEnabled' });
+    /** dx resolves `nxe-tree-list` against the `treeList` slice, not `dataGrid`. */
+    widgetDefaults = computed(() => (this.treeMode ? this.defaults.treeList : this.defaults.dataGrid) ?? {}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widgetDefaults" }] : /* istanbul ignore next */ []));
+    hoverStateEnabled = computed(() => this.hoverStateEnabledInput() ?? this.widgetDefaults().hoverStateEnabled ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverStateEnabled" }] : /* istanbul ignore next */ []));
+    showColumnLines = computed(() => this.showColumnLinesInput() ?? this.widgetDefaults().showColumnLines ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showColumnLines" }] : /* istanbul ignore next */ []));
+    showRowLines = computed(() => this.showRowLinesInput() ?? this.widgetDefaults().showRowLines ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showRowLines" }] : /* istanbul ignore next */ []));
+    showBorders = computed(() => this.showBordersInput() ?? this.widgetDefaults().showBorders ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showBorders" }] : /* istanbul ignore next */ []));
+    wordWrapEnabled = computed(() => this.wordWrapEnabledInput() ?? this.widgetDefaults().wordWrapEnabled ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "wordWrapEnabled" }] : /* istanbul ignore next */ []));
+    columnAutoWidth = computed(() => this.columnAutoWidthInput() ?? this.widgetDefaults().columnAutoWidth ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnAutoWidth" }] : /* istanbul ignore next */ []));
+    rowAlternationEnabled = computed(() => this.rowAlternationEnabledInput() ?? this.widgetDefaults().rowAlternationEnabled ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowAlternationEnabled" }] : /* istanbul ignore next */ []));
+    remoteOperations = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "remoteOperations" }] : /* istanbul ignore next */ []));
+    /**
+     * dx `syncLookupFilterValues` — accepted, and deliberately inert. It asks dx to narrow a
+     * lookup column's header-filter list to the values still reachable under the other filters.
+     * This grid never cascades those lists for client arrays (see `hfBaseRows`), so `false` is
+     * already what it does; `true` is the option we do not honour.
+     * @nxeInert grid — parity/data-grid.yaml "syncLookupFilterValues".
+     */
+    syncLookupFilterValues = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "syncLookupFilterValues" }] : /* istanbul ignore next */ []));
+    columnMinWidth = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnMinWidth" }] : /* istanbul ignore next */ []));
+    noDataTextInput = input(undefined, { ...(ngDevMode ? { debugName: "noDataTextInput" } : /* istanbul ignore next */ {}), alias: 'noDataText' });
+    noDataText = computed(() => this.noDataTextInput() ?? this.widgetDefaults().noDataText ?? 'No data', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "noDataText" }] : /* istanbul ignore next */ []));
+    loadPanel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadPanel" }] : /* istanbul ignore next */ []));
+    paging = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paging" }] : /* istanbul ignore next */ []));
+    filterRow = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterRow" }] : /* istanbul ignore next */ []));
+    /** Object-input forms of the config elements (dx accepts both; orbit uses both styles). */
+    headerFilterOptions = input(undefined, { ...(ngDevMode ? { debugName: "headerFilterOptions" } : /* istanbul ignore next */ {}), alias: 'headerFilter' });
+    groupingOptions = input(undefined, { ...(ngDevMode ? { debugName: "groupingOptions" } : /* istanbul ignore next */ {}), alias: 'grouping' });
+    groupPanelOptions = input(undefined, { ...(ngDevMode ? { debugName: "groupPanelOptions" } : /* istanbul ignore next */ {}), alias: 'groupPanel' });
+    scrolling = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrolling" }] : /* istanbul ignore next */ []));
+    sorting = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sorting" }] : /* istanbul ignore next */ []));
+    allowColumnResizing = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowColumnResizing" }] : /* istanbul ignore next */ []));
+    /** dx columnResizingMode: 'nextColumn' (default) trades width; 'widget' grows the table. */
+    columnResizingMode = input('nextColumn', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnResizingMode" }] : /* istanbul ignore next */ []));
+    /** dx allowColumnReordering (default false — matches every dx-era template in this app). */
+    allowColumnReordering = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowColumnReordering" }] : /* istanbul ignore next */ []));
+    repaintChangesOnly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "repaintChangesOnly" }] : /* istanbul ignore next */ []));
+    showColumnHeaders = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showColumnHeaders" }] : /* istanbul ignore next */ []));
+    // --- Tree-list inputs (dx-tree-list) -------------------------------------------------------
+    parentIdExpr = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parentIdExpr" }] : /* istanbul ignore next */ []));
+    dataStructure = input('plain', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataStructure" }] : /* istanbul ignore next */ []));
+    rootValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootValue" }] : /* istanbul ignore next */ []));
+    autoExpandAll = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoExpandAll" }] : /* istanbul ignore next */ []));
+    expandedRowKeys = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandedRowKeys" }] : /* istanbul ignore next */ []));
+    /** Tree-list multi-select keys (`[(selectedRowKeys)]`); recursive via dxo-selection. */
+    selectedRowKeys = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedRowKeys" }] : /* istanbul ignore next */ []));
+    /**
+     * Declarative cell merge (orbit addition, replaces the legacy `onCellPrepared` DOM surgery):
+     * dataFields merged hierarchically left→right — consecutive rows with equal values render one
+     * cell with `rowspan`; a break in an earlier field breaks all later fields.
+     */
+    mergeColumns = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mergeColumns" }] : /* istanbul ignore next */ []));
+    onSelectionChanged = output();
+    onRowClick = output();
+    /** Fires after the rendered row set changes (dx parity; used for post-render DOM work). */
+    onContentReady = output();
+    /**
+     * dx parity: `{ fullName: 'paging.pageIndex', value }` for internal paging and
+     * `{ fullName: 'columns[<i>].groupIndex', previousValue, value }` for runtime grouping
+     * changes (one event per gesture — the contract generic-list's persistence handler expects).
+     */
+    onOptionChanged = output();
+    /** Extra CSS classes for a data row (replaces dx `onRowPrepared` class tweaks). */
+    rowClass = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
+    /**
+     * dx `onCellPrepared` / `onRowPrepared`, fired once per rendered cell and row after the DOM
+     * is written, with the real element for handlers that mutate it.
+     *
+     * Classic EventEmitters, NOT `output()`, for the same reason the pivot uses them: `.observed`
+     * gates a per-cell walk, so a grid that binds neither pays nothing. That gate is the whole
+     * cost model here — without it every grid would walk every cell on every render.
+     *
+     * `mergeColumns` and `rowClass` are the supported way to do what most handlers do; these
+     * exist because applications carry handlers that cannot be rewritten.
+     */
+    onCellPrepared = new EventEmitter();
+    onRowPrepared = new EventEmitter();
+    rowClassFor(row) {
+        return this.rowClass()?.(row) ?? '';
+    }
+    /** Master-detail expand lifecycle (fires before the detail template instantiates). */
+    onRowExpanding = output();
+    onRowExpanded = output();
+    /** Set imperatively by `app-data-pagination-wrapper` (a group-count summary). Stored for 9b. */
+    summary = undefined;
+    hoveredIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoveredIndex" }] : /* istanbul ignore next */ []));
+    sort = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+    sortInit = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortInit" }] : /* istanbul ignore next */ []));
+    visibilityOverride = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibilityOverride" }] : /* istanbul ignore next */ []));
+    /** Filter-row state per dataField (operation + typed text) — controlled editors read it back. */
+    filterRowState = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterRowState" }] : /* istanbul ignore next */ []));
+    /**
+     * Header-filter runtime overrides: field → allowed-key set, or `null` for "user explicitly
+     * cleared" (a declarative `filterValues` seed must NOT resurrect after Select All → OK).
+     * Absent field = untouched → the column's `filterValues` input seeds the filter (dx parity).
+     */
+    hfOverride = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hfOverride" }] : /* istanbul ignore next */ []));
+    selectedSet = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedSet" }] : /* istanbul ignore next */ []));
+    refreshTick = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "refreshTick" }] : /* istanbul ignore next */ []));
+    /**
+     * Header-filter popup working state — the draft/search/tree machinery lives in
+     * {@link NxeHeaderFilterModel} (extracted for pivot reuse, Phase 3a); the grid supplies
+     * its rows/columns through the source adapter and keeps the aliases the specs poke.
+     */
+    hf = new NxeHeaderFilterModel({
+        rows: () => this.hfBaseRows(),
+        rawValue: (col, row) => this.getRaw(row, col.dataField()),
+        displayText: (col, row) => this.cellText(col, row),
+        isDate: (col) => col.dataType() === 'date',
+        sortByDisplayText: (col) => !!col.lookup(),
+        boolLabel: (col, raw) => this.hfBoolLabel(col, raw),
+        compare: (a, b) => this.compare(a, b),
+    });
+    hfColumn = this.hf.column;
+    hfDraft = this.hf.draft;
+    hfOverlayRef;
+    // Internal paging (dxo-paging present) working state
+    pageIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
+    userPageSize = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userPageSize" }] : /* istanbul ignore next */ []));
+    /** DevExtreme `.instance` facade — `#gridAll.instance.<method>()`. */
+    facade = {
+        getSelectedRowsData: () => this.selectedRowsData(),
+        getSelectedRowKeys: () => this.rowKeys(this.selectedRowsData()),
+        refresh: () => this.refreshTick.update((v) => v + 1),
+        clearFilter: (filterName) => {
+            if (!filterName || filterName === 'row') {
+                this.filterRowState.set(new Map());
+            }
+            if (!filterName || filterName === 'header') {
+                // Explicit nulls so declarative `filterValues` seeds don't resurrect (dx clears
+                // column.filterValues even when configured declaratively).
+                const cleared = new Map();
+                for (const col of this.columns()) {
+                    if (col.filterValues()?.length) {
+                        cleared.set(col.dataField(), null);
+                    }
+                }
+                this.hfOverride.set(cleared);
+            }
+        },
+        columnOption: (field, optionName, value) => {
+            if (optionName === 'visible') {
+                this.setColumnVisible(field, value);
+            }
+        },
+        getVisibleColumns: () => this.visibleColumns().map((c) => ({
+            caption: c.caption(),
+            dataField: c.dataField(),
+            dataType: c.dataType(),
+            format: c.format(),
+        })),
+        getVisibleRows: () => this.displayRows(),
+        totalCount: () => this.displayRows().length,
+        getRootNode: () => ({
+            key: undefined,
+            data: undefined,
+            level: -1,
+            hasChildren: this.treeRoots().length > 0,
+            children: this.treeRoots(),
+        }),
+        updateDimensions: () => this.refreshTick.update((v) => v + 1),
+        clearGrouping: () => this.clearGroupingInternal(),
+        expandAll: () => {
+            this.groupExpandDefault.set(true);
+            this.groupExpandOverride.set(new Map());
+            if (this.treeMode) {
+                const keyF = this.keyExpr() ?? 'id';
+                const all = new Map();
+                for (const r of (this.dataSource() ?? [])) {
+                    all.set(r[keyF], true);
+                }
+                this.expandOverride.set(all);
+            }
+        },
+        saveEditData: () => {
+            const editing = this.editingCmp();
+            const key = editing?.editRowKey();
+            if (editing && key != null) {
+                const row = (this.dataSource() ?? []).find((r) => this.rowKey(r) === key);
+                if (row) {
+                    this.saveRowEdit(row, new Event('save'));
+                }
+            }
+        },
+        element: () => this.elementRef.nativeElement,
+        expandRow: (key) => {
+            // Symmetric with collapseRow for the tree list: writes the same override map the
+            // expander arrows use, so a programmatic reveal wins over an earlier manual collapse
+            // (the [expandedRowKeys] seed alone cannot — overrides take precedence over it).
+            if (this.treeMode) {
+                this.expandOverride.update((m) => new Map(m).set(key, true));
+            }
+        },
+        collapseRow: (key) => {
+            // Master-detail collapse by key; tree-list node collapse for tree mode.
+            this.expandedDetails.update((set) => {
+                const next = new Set(set);
+                next.delete(key);
+                return next;
+            });
+            if (this.treeMode) {
+                this.expandOverride.update((m) => new Map(m).set(key, false));
+            }
+            // dx grouped-grid form: collapseRow(['X','Y']) collapses that group path.
+            if (!this.treeMode && Array.isArray(key) && this.groupColumns().length) {
+                let groupKey = '';
+                key.forEach((value, level) => {
+                    groupKey = `${groupKey}/${level}:${typeof value}:${String(value)}`;
+                });
+                this.groupExpandOverride.update((m) => new Map(m).set(groupKey, false));
+            }
+        },
+    };
+    get instance() {
+        return this.facade;
+    }
+    /** Guards against a handler that schedules another render re-entering the walk. */
+    preparedDepth = 0;
+    constructor() {
+        // Registered before onContentReady so cells are prepared by the time it fires, as in dx.
+        afterRenderEffect(() => {
+            this.renderRows();
+            this.visibleColumns();
+            untracked(() => this.emitPreparedEvents());
+        });
+        // dx onContentReady parity: fire after the rendered row set reaches the DOM.
+        afterRenderEffect(() => {
+            this.renderRows();
+            this.onContentReady.emit({ component: this.facade, element: this.elementRef.nativeElement });
+        });
+        // dx columnAutoWidth parity: measure natural column widths after render, then apply
+        // fixed-layout pixel widths distributed like dx (explicit widths kept; free columns share
+        // the remaining container width proportionally to their max-content size).
+        afterRenderEffect(() => {
+            this.renderRows();
+            this.visibleColumns();
+            this.columnAutoWidth();
+            this.wordWrapEnabled();
+            this.containerW();
+            untracked(() => this.scheduleAutoWidthMeasure());
+        });
+        afterNextRender(() => {
+            const rv = this.elementRef.nativeElement.querySelector('.dx-datagrid-rowsview');
+            if (rv && typeof ResizeObserver !== 'undefined') {
+                this.resizeObserver = new ResizeObserver((entries) => {
+                    const w = Math.round(entries[0]?.contentRect?.width ?? 0);
+                    if (w > 0 && Math.abs(w - this.containerW()) > 1) {
+                        this.containerW.set(w);
+                    }
+                });
+                this.resizeObserver.observe(rv);
+            }
+        });
+    }
+    // --- Column auto-width engine (dx columnAutoWidth parity) ----------------------------------
+    autoWidths = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoWidths" }] : /* istanbul ignore next */ []));
+    containerW = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerW" }] : /* istanbul ignore next */ []));
+    resizeObserver = null;
+    autoWidthPending = false;
+    lastAutoWidthKey = '';
+    scheduleAutoWidthMeasure() {
+        // Frozen after a manual resize (dx stops redistributing), paused while a resize drag
+        // writes the colgroup directly.
+        if (!this.columnAutoWidth() || this.resizeActive || this.widthOverride().size) {
+            if (this.autoWidths() !== null) {
+                this.lastAutoWidthKey = '';
+                this.autoWidths.set(null);
+            }
+            return;
+        }
+        if (this.autoWidthPending) {
+            return;
+        }
+        this.autoWidthPending = true;
+        requestAnimationFrame(() => {
+            this.autoWidthPending = false;
+            this.measureAutoWidths();
+        });
+    }
+    measureAutoWidths() {
+        const host = this.elementRef.nativeElement;
+        const table = host.querySelector('.dx-datagrid-content > .dx-datagrid-table');
+        const rowsview = host.querySelector('.dx-datagrid-rowsview');
+        const headerRow = nxeLeafHeaderRow(host);
+        if (!table || !rowsview || !headerRow) {
+            return;
+        }
+        const cols = this.visibleColumns();
+        const lead = this.groupLevelCount() + (this.masterDetailEnabled() ? 1 : 0) + (this.showCheckboxes() ? 1 : 0);
+        // Indexed among data cells, not by a lead offset: command cells live in the FIRST header
+        // row and span down, so a banded grid's leaf row has none of them.
+        const cells = nxeHeaderDataCells(headerRow);
+        const container = rowsview.clientWidth;
+        if (cells.length !== cols.length || container <= 0) {
+            return;
+        }
+        // Measurement pass: natural max-content widths (no wrap), reverted before paint.
+        const colEls = Array.from(table.querySelectorAll(':scope > colgroup > col'))
+            .slice(lead, lead + cols.length);
+        const prevLayout = table.style.tableLayout;
+        const prevWidth = table.style.width;
+        const prevColWidths = colEls.map((c) => c.style.width);
+        table.style.tableLayout = 'auto';
+        table.style.width = 'max-content';
+        colEls.forEach((c) => (c.style.width = ''));
+        const measured = cells.map((c) => c.getBoundingClientRect().width);
+        table.style.tableLayout = prevLayout;
+        table.style.width = prevWidth;
+        colEls.forEach((c, i) => (c.style.width = prevColWidths[i]));
+        // dx-style distribution: explicit px widths kept; free columns get the remaining space
+        // proportionally to measured max-content (never below columnMinWidth; last col absorbs
+        // rounding). Over-constrained -> keep max-content and let the rowsview scroll.
+        const explicit = cols.map((c) => {
+            const w = this.colWidth(c);
+            if (w == null) {
+                return null;
+            }
+            const n = parseFloat(w);
+            return Number.isFinite(n) && (w.endsWith('px') || /^\d+(\.\d+)?$/.test(w)) ? n : null;
+        });
+        const specialSum = 30 * this.groupLevelCount() +
+            (this.masterDetailEnabled() ? 30 : 0) +
+            (this.showCheckboxes() ? 70 : 0) +
+            (this.rowEditCommandVisible() ? 100 : 0);
+        const fixedSum = explicit.reduce((s, w) => s + (w ?? 0), 0) + specialSum;
+        const freeIdx = explicit.map((w, i) => (w == null ? i : -1)).filter((i) => i >= 0);
+        const out = explicit.map((w) => (w == null ? null : `${w}px`));
+        const minW = this.columnMinWidth() ?? 50;
+        let total = fixedSum;
+        if (freeIdx.length) {
+            const freeSum = freeIdx.reduce((s, i) => s + measured[i], 0) || 1;
+            const avail = container - fixedSum;
+            if (avail >= freeSum) {
+                const scale = avail / freeSum;
+                let used = 0;
+                freeIdx.forEach((i, k) => {
+                    const w = k === freeIdx.length - 1
+                        ? Math.max(minW, avail - used)
+                        : Math.max(minW, Math.round(measured[i] * scale * 100) / 100);
+                    used += w;
+                    out[i] = `${w}px`;
+                });
+                total += used;
+            }
+            else {
+                freeIdx.forEach((i) => {
+                    const w = Math.max(minW, Math.ceil(measured[i]));
+                    total += w;
+                    out[i] = `${w}px`;
+                });
+            }
+        }
+        const tableWidth = total > container + 1 ? `${Math.ceil(total)}px` : '100%';
+        const key = `${out.join('|')}@${tableWidth}@${container}`;
+        if (key !== this.lastAutoWidthKey) {
+            this.lastAutoWidthKey = key;
+            this.autoWidths.set({ widths: out, tableWidth });
+        }
+    }
+    /**
+     * A column with no frozen/declared width appearing AFTER a manual resize froze the layout
+     * (ungrouped chip, re-shown via columnOption): give it dx's default column width instead of
+     * letting the pinned table width squeeze it to ~0.
+     */
+    frozenColWidth(col) {
+        const manual = this.widthOverride().get(col.dataField());
+        if (manual != null) {
+            return manual;
+        }
+        const declared = parseFloat(this.colWidth(col) ?? '');
+        return Number.isFinite(declared) ? declared : 100;
+    }
+    effectiveColWidth(col, idx) {
+        const aw = this.autoWidths();
+        if (aw && this.columnAutoWidth()) {
+            return aw.widths[idx] ?? this.colWidth(col);
+        }
+        const w = this.colWidth(col);
+        if (w == null && this.widthOverride().size) {
+            return `${this.frozenColWidth(col)}px`;
+        }
+        return w;
+    }
+    tableWidthStyle() {
+        // After a manual resize the layout is frozen: widget mode sizes the table to the sum of
+        // its columns (dx grows/shrinks the table); nextColumn keeps filling the container.
+        if (this.widthOverride().size && this.columnResizingMode() === 'widget') {
+            let total = 30 * this.groupLevelCount() +
+                (this.masterDetailEnabled() ? 30 : 0) +
+                (this.showCheckboxes() ? 40 : 0) +
+                (this.rowEditCommandVisible() ? 100 : 0);
+            for (const col of this.visibleColumns()) {
+                total += this.frozenColWidth(col);
+            }
+            return `${Math.round(total)}px`;
+        }
+        if (this.widthOverride().size) {
+            return '100%';
+        }
+        const aw = this.autoWidths();
+        return aw && this.columnAutoWidth() ? aw.tableWidth : '100%';
+    }
+    // --- Selection (dxo-selection) ---------------------------------------------------------------
+    selectionEnabled = computed(() => {
+        const s = this.selection();
+        return !!s && s.mode() !== 'none';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionEnabled" }] : /* istanbul ignore next */ []));
+    selectionMode = computed(() => this.selection()?.mode() ?? 'single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    showCheckboxes = computed(() => {
+        if (!this.selectionEnabled()) {
+            return false;
+        }
+        // Tree-list multiple selection shows checkboxes by default (dx behaviour).
+        return (this.selection()?.showCheckBoxesMode() === 'always' ||
+            (this.treeMode && this.selectionMode() === 'multiple'));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCheckboxes" }] : /* istanbul ignore next */ []));
+    /** Selected rows in dataSource order (stale refs from old data naturally filtered out). */
+    selectedRowsData = computed(() => {
+        if (this.treeMode) {
+            const keySet = new Set(this.selectedRowKeys());
+            return keySet.size === 0
+                ? []
+                : (this.dataSource() ?? []).filter((r) => keySet.has(this.rowKey(r)));
+        }
+        const set = this.selectedSet();
+        return set.size === 0 ? [] : (this.dataSource() ?? []).filter((r) => set.has(r));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedRowsData" }] : /* istanbul ignore next */ []));
+    allSelected = computed(() => {
+        if (this.treeMode) {
+            const rows = (this.dataSource() ?? []);
+            const keys = this.selectedRowKeys();
+            return rows.length > 0 && rows.every((r) => keys.includes(this.rowKey(r)));
+        }
+        const rows = this.displayRows();
+        const set = this.selectedSet();
+        return rows.length > 0 && rows.every((r) => set.has(r));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
+    someSelected = computed(() => this.treeMode
+        ? this.selectedRowKeys().length > 0
+        : this.displayRows().some((r) => this.selectedSet().has(r)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []));
+    rowKey(row) {
+        const k = this.keyExpr();
+        return k ? row?.[k] : row;
+    }
+    treeDescendantKeys(row) {
+        const start = this.rowKey(row);
+        const out = [];
+        const find = (nodes) => {
+            for (const n of nodes) {
+                if (n.key === start)
+                    return n;
+                const f = find(n.children);
+                if (f)
+                    return f;
+            }
+            return null;
+        };
+        const node = find(this.treeRoots());
+        const collect = (n) => {
+            out.push(n.key);
+            n.children.forEach(collect);
+        };
+        if (node)
+            collect(node);
+        return out.length ? out : [start];
+    }
+    toggleTreeSelection(row) {
+        const key = this.rowKey(row);
+        // dx parity: single mode REPLACES the selection, and re-clicking the selected row keeps
+        // it selected. A toggle here would immediately undo a key the host page just wrote into
+        // [(selectedRowKeys)] from its own onRowClick handler — the output fires before this
+        // runs, so the toggle would find the key present and delete it, ending every click with
+        // an empty selection.
+        if (this.selectionMode() !== 'multiple') {
+            const previous = this.selectedRowKeys();
+            const added = previous.includes(key) ? [] : [key];
+            const removed = previous.filter((k) => k !== key);
+            this.selectedRowKeys.set([key]);
+            this.emitTreeSelectionChanged([key], added, removed);
+            return;
+        }
+        const recursive = this.selection()?.recursive() ?? false;
+        const keys = new Set(this.selectedRowKeys());
+        const selecting = !keys.has(key);
+        const affected = recursive ? this.treeDescendantKeys(row) : [key];
+        for (const k of affected) {
+            selecting ? keys.add(k) : keys.delete(k);
+        }
+        const arr = [...keys];
+        this.selectedRowKeys.set(arr);
+        this.emitTreeSelectionChanged(arr, selecting ? affected : [], selecting ? [] : affected);
+    }
+    emitTreeSelectionChanged(allKeys, added, removed) {
+        const keySet = new Set(allKeys);
+        const data = (this.dataSource() ?? []).filter((r) => keySet.has(this.rowKey(r)));
+        this.onSelectionChanged.emit({
+            selectedRowsData: data,
+            selectedRowKeys: allKeys,
+            currentSelectedRowKeys: added,
+            currentDeselectedRowKeys: removed,
+            component: this.facade,
+            element: this.elementRef.nativeElement,
+        });
+    }
+    // --- Grouping + summary (dxo-grouping / dxo-group-panel / dxo-summary) ------------------------
+    /** `grouping.autoExpandAll` from the child element or object input; dx default is true. */
+    groupAutoExpand = computed(() => this.grouping()?.autoExpandAll() ?? this.groupingOptions()?.autoExpandAll ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupAutoExpand" }] : /* istanbul ignore next */ []));
+    /** The current expand default — `expandAll()` flips it to true; an input change resets it. */
+    groupExpandDefault = linkedSignal({ ...(ngDevMode ? { debugName: "groupExpandDefault" } : /* istanbul ignore next */ {}), source: () => this.groupAutoExpand(),
+        computation: (v) => v });
+    /**
+     * Per-groupKey manual toggles. Reset when the autoExpandAll option flips or the group
+     * configuration changes (dx repaints and re-applies the default; drag-created groups inherit it).
+     */
+    groupExpandOverride = linkedSignal({ ...(ngDevMode ? { debugName: "groupExpandOverride" } : /* istanbul ignore next */ {}), source: () => `${this.groupAutoExpand()}|${this.groupedFields().join('\u0000')}`,
+        computation: () => new Map() });
+    isGroupExpanded(groupKey) {
+        return this.groupExpandOverride().get(groupKey) ?? this.groupExpandDefault();
+    }
+    groupPanelVisible = computed(() => this.groupPanel()?.visible() === true || this.groupPanelOptions()?.visible === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupPanelVisible" }] : /* istanbul ignore next */ []));
+    isGrouped = computed(() => this.groupColumns().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isGrouped" }] : /* istanbul ignore next */ []));
+    totalItems = computed(() => this.summaryCmp()?.totalItems() ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
+    groupItems = computed(() => this.summaryCmp()?.groupItems() ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupItems" }] : /* istanbul ignore next */ []));
+    hasTotalFooter = computed(() => this.totalItems().length > 0 && this.displayRows().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasTotalFooter" }] : /* istanbul ignore next */ []));
+    /** Grand-total sums keyed by dataField → formatted text (alignByColumn placement). */
+    totalSums = computed(() => {
+        const map = new Map();
+        const rows = this.displayRows();
+        for (const item of this.totalItems()) {
+            map.set(item.column(), this.summaryText(item, rows));
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalSums" }] : /* istanbul ignore next */ []));
+    // --- Internal paging (dxo-paging) -----------------------------------------------------------
+    pagingEnabled = computed(() => !!this.pagingCmp() && this.pagingCmp().enabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagingEnabled" }] : /* istanbul ignore next */ []));
+    effectivePageSize = computed(() => this.userPageSize() ?? this.pagingCmp()?.pageSize() ?? 20, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectivePageSize" }] : /* istanbul ignore next */ []));
+    pageCount = computed(() => this.pagingEnabled() ? Math.max(1, Math.ceil(this.displayRows().length / this.effectivePageSize())) : 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []));
+    /** The filtered/sorted rows visible on the current page (all rows when paging is off). */
+    pagedRows = computed(() => {
+        const rows = this.displayRows();
+        if (!this.pagingEnabled()) {
+            return rows;
+        }
+        const ps = this.effectivePageSize();
+        const pi = Math.min(this.pageIndex(), this.pageCount() - 1);
+        return rows.slice(pi * ps, pi * ps + ps);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagedRows" }] : /* istanbul ignore next */ []));
+    pagerVisible = computed(() => {
+        const p = this.pagerCmp();
+        if (!p) {
+            return false;
+        }
+        return p.visible() === true || (p.visible() === 'auto' && this.pagingEnabled());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagerVisible" }] : /* istanbul ignore next */ []));
+    pageSizes = computed(() => {
+        const a = this.pagerCmp()?.allowedPageSizes();
+        return Array.isArray(a) ? a : [this.effectivePageSize()];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizes" }] : /* istanbul ignore next */ []));
+    pageNumbers = computed(() => Array.from({ length: this.pageCount() }, (_, i) => i), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageNumbers" }] : /* istanbul ignore next */ []));
+    // --- Tree-list hierarchy (dx-tree-list) -----------------------------------------------------
+    /** True when the host element is `<nxe-tree-list>` (vs `<nxe-data-grid>`). */
+    treeMode = this.elementRef.nativeElement.tagName.toLowerCase() === 'nxe-tree-list';
+    expandOverride = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandOverride" }] : /* istanbul ignore next */ []));
+    /** Tree assembled from the flat dataSource via keyExpr/parentIdExpr/rootValue. */
+    treeRoots = computed(() => {
+        if (!this.treeMode) {
+            return [];
+        }
+        const rows = (this.dataSource() ?? []);
+        const keyF = this.keyExpr() ?? 'id';
+        const parentF = this.parentIdExpr() ?? 'parentId';
+        const root = this.rootValue();
+        const byKey = new Map();
+        for (const r of rows) {
+            byKey.set(r[keyF], { key: r[keyF], data: r, children: [], level: 0, hasChildren: false });
+        }
+        const roots = [];
+        for (const r of rows) {
+            const node = byKey.get(r[keyF]);
+            const pk = r[parentF];
+            const parent = root !== undefined && pk === root ? undefined : byKey.get(pk);
+            if (parent && parent !== node) {
+                parent.children.push(node);
+                parent.hasChildren = true;
+            }
+            else {
+                roots.push(node);
+            }
+        }
+        const assign = (nodes, lvl) => {
+            for (const n of nodes) {
+                n.level = lvl;
+                assign(n.children, lvl + 1);
+            }
+        };
+        assign(roots, 0);
+        return roots;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "treeRoots" }] : /* istanbul ignore next */ []));
+    treeExpanded = computed(() => {
+        const override = this.expandOverride();
+        const expandAll = this.autoExpandAll();
+        const seeded = new Set(this.expandedRowKeys());
+        const out = new Set();
+        const walk = (nodes) => {
+            for (const n of nodes) {
+                if (n.hasChildren) {
+                    const def = expandAll || seeded.has(n.key);
+                    if (override.get(n.key) ?? def) {
+                        out.add(n.key);
+                    }
+                }
+                walk(n.children);
+            }
+        };
+        walk(this.treeRoots());
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "treeExpanded" }] : /* istanbul ignore next */ []));
+    toggleTreeNode(key, event) {
+        event.stopPropagation();
+        const expanded = this.treeExpanded().has(key);
+        this.expandOverride.update((m) => new Map(m).set(key, !expanded));
+    }
+    /** Flattened group + data render rows (tree hierarchy, then grouping, then flat). */
+    renderRows = computed(() => {
+        if (this.treeMode) {
+            this.refreshTick(); // role-tab mutates selectedRowKeys then calls .instance.refresh()
+            const expanded = this.treeExpanded();
+            const out = [];
+            let idx = 0;
+            const walk = (nodes) => {
+                for (const n of nodes) {
+                    out.push({
+                        kind: 'data',
+                        row: n.data,
+                        rowIndex: idx++,
+                        level: n.level,
+                        hasChildren: n.hasChildren,
+                        expanded: expanded.has(n.key),
+                        nodeKey: n.key,
+                    });
+                    if (n.hasChildren && expanded.has(n.key)) {
+                        walk(n.children);
+                    }
+                }
+            };
+            walk(this.treeRoots());
+            return out;
+        }
+        const groupCols = this.groupColumns();
+        const rows = this.pagedRows();
+        if (groupCols.length === 0) {
+            return rows.map((row, i) => ({ kind: 'data', row, rowIndex: i }));
+        }
+        const out = [];
+        const items = this.groupItems();
+        let dataIndex = 0;
+        const walk = (subset, level, parentKey) => {
+            const col = groupCols[level];
+            const field = col.dataField();
+            // Contiguous partition by group value — displayRows pre-sorts by the group chain, so
+            // first-seen bucket order IS the dx group order.
+            const buckets = new Map();
+            for (const r of subset) {
+                const v = this.getRaw(r, field);
+                if (!buckets.has(v)) {
+                    buckets.set(v, []);
+                }
+                buckets.get(v).push(r);
+            }
+            for (const [value, bucket] of buckets) {
+                const groupKey = `${parentKey}/${level}:${typeof value}:${String(value)}`;
+                const isCollapsed = !this.isGroupExpanded(groupKey);
+                // dx three-way split: footer items → group footer row; alignByColumn items →
+                // summary cells aligned under their column; the rest → "(a, b)" caption suffix.
+                const alignedSums = new Map();
+                const captionParts = [];
+                const footerSums = new Map();
+                for (const item of items) {
+                    const text = this.summaryText(item, bucket);
+                    if (item.showInGroupFooter()) {
+                        footerSums.set(item.column(), text);
+                    }
+                    else if (item.alignByColumn()) {
+                        alignedSums.set(item.showInColumn() ?? item.column(), text);
+                    }
+                    else {
+                        captionParts.push(text);
+                    }
+                }
+                out.push({
+                    kind: 'group',
+                    level,
+                    column: col,
+                    text: this.cellText(col, bucket[0]),
+                    value: this.getRaw(bucket[0], col.dataField()),
+                    rows: bucket,
+                    groupKey,
+                    collapsed: isCollapsed,
+                    alignedSums,
+                    captionSuffix: captionParts.length ? ` (${captionParts.join(', ')})` : '',
+                });
+                if (!isCollapsed) {
+                    if (level + 1 < groupCols.length) {
+                        walk(bucket, level + 1, groupKey);
+                    }
+                    else {
+                        for (const r of bucket) {
+                            out.push({ kind: 'data', row: r, rowIndex: dataIndex++ });
+                        }
+                    }
+                    if (footerSums.size) {
+                        out.push({ kind: 'groupFooter', level, sums: footerSums });
+                    }
+                }
+            }
+        };
+        walk(rows, 0, '');
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderRows" }] : /* istanbul ignore next */ []));
+    /** Computes + formats a summary item over a set of rows. */
+    summaryText(item, rows) {
+        const field = item.column();
+        let value;
+        switch (item.summaryType()) {
+            case 'custom':
+                value = this.customSummaryValue(item, rows);
+                break;
+            case 'count':
+                value = rows.length;
+                break;
+            case 'min':
+            case 'max':
+            case 'avg':
+            case 'sum':
+            default: {
+                const nums = rows
+                    .map((r) => Number(this.getRaw(r, field)))
+                    .filter((n) => !isNaN(n));
+                if (item.summaryType() === 'min')
+                    value = Math.min(...nums);
+                else if (item.summaryType() === 'max')
+                    value = Math.max(...nums);
+                else if (item.summaryType() === 'avg')
+                    value = nums.reduce((a, b) => a + b, 0) / (nums.length || 1);
+                else
+                    value = nums.reduce((a, b) => a + b, 0);
+            }
+        }
+        const fmt = item.valueFormat();
+        const valueText = typeof fmt === 'string' ? formatNumber(value, parseNumberFormat(fmt)) : String(value);
+        const ct = item.customizeText();
+        const text = ct ? ct({ value, valueText }) : valueText;
+        return item.displayFormat().replace('{0}', text);
+    }
+    /**
+     * DevExtreme `calculateCustomSummary` protocol replay (orbit addition): `start`, then
+     * `calculate` once per row (`options.value` = the row object, matching the app's
+     * `generateSummaryFunction` which reads row properties), then `finalize`.
+     */
+    customSummaryValue(item, rows) {
+        const fn = this.summaryCmp()?.calculateCustomSummary();
+        if (!fn) {
+            return 0;
+        }
+        const options = { name: item.name(), summaryProcess: 'start', totalValue: 0 };
+        fn(options);
+        options.summaryProcess = 'calculate';
+        for (const row of rows) {
+            options.value = row;
+            fn(options);
+        }
+        options.summaryProcess = 'finalize';
+        delete options.value;
+        fn(options);
+        return Number(options.totalValue) || 0;
+    }
+    toggleGroup(groupKey) {
+        const expanded = this.isGroupExpanded(groupKey);
+        this.groupExpandOverride.update((m) => new Map(m).set(groupKey, !expanded));
+    }
+    goToPage(index) {
+        const next = Math.max(0, Math.min(index, this.pageCount() - 1));
+        if (next !== this.pageIndex()) {
+            this.pageIndex.set(next);
+            this.onOptionChanged.emit({ name: 'paging', fullName: 'paging.pageIndex', value: next });
+        }
+    }
+    prevPage() {
+        this.goToPage(this.pageIndex() - 1);
+    }
+    nextPage() {
+        this.goToPage(this.pageIndex() + 1);
+    }
+    changePageSize(size) {
+        this.userPageSize.set(size);
+        this.pageIndex.set(0);
+    }
+    onPageSizeSelect(event) {
+        this.changePageSize(Number(event.target.value));
+    }
+    pageInfo = computed(() => {
+        const total = this.displayRows().length;
+        const ps = this.effectivePageSize();
+        const start = total === 0 ? 0 : this.pageIndex() * ps + 1;
+        const end = Math.min((this.pageIndex() + 1) * ps, total);
+        return `${start}-${end} of ${total}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageInfo" }] : /* istanbul ignore next */ []));
+    // --- Runtime group state (drag-to-group backbone) --------------------------------------------
+    static fieldArrayEqual = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
+    /**
+     * Declarative seed: ordered dataFields of columns declaring `groupIndex`. Custom equality so
+     * unrelated column-input churn (captions, widths, lookups) can never reset runtime drag state.
+     */
+    declaredGroupFields = computed(() => this.columns()
+        .filter((c) => c.groupIndex() != null)
+        .sort((a, b) => (a.groupIndex() ?? 0) - (b.groupIndex() ?? 0))
+        .map((c) => c.dataField()), { ...(ngDevMode ? { debugName: "declaredGroupFields" } : /* istanbul ignore next */ {}), equal: NxeDataGridComponent.fieldArrayEqual });
+    /**
+     * THE group state — array order == group level. Runtime gestures (drag-to-group, chip
+     * drag-out/reorder, clearGrouping) win until the declarative seed itself changes
+     * (generic-list re-seeds `groupIndex` from localStorage through `filterResource`).
+     */
+    groupedFields = linkedSignal({ ...(ngDevMode ? { debugName: "groupedFields" } : /* istanbul ignore next */ {}), source: () => this.declaredGroupFields(),
+        computation: (seed) => seed });
+    /**
+     * Per-grouped-column sort direction (dx: grouping a column sorts it ascending; clicking its
+     * group-panel chip cycles asc↔desc). Pruned to the currently grouped fields so a re-grouped
+     * column starts fresh at `asc`.
+     */
+    groupSortDir = linkedSignal({ ...(ngDevMode ? { debugName: "groupSortDir" } : /* istanbul ignore next */ {}), source: () => this.groupedFields(),
+        computation: (fields, previous) => {
+            const prev = previous?.value;
+            const next = new Map();
+            if (prev) {
+                for (const field of fields) {
+                    const dir = prev.get(field);
+                    if (dir) {
+                        next.set(field, dir);
+                    }
+                }
+            }
+            return next;
+        } });
+    /** Columns moved into group rows, in group-level order. */
+    groupColumns = computed(() => this.groupedFields()
+        .map((field) => this.columns().find((c) => c.dataField() === field))
+        .filter((c) => !!c), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupColumns" }] : /* istanbul ignore next */ []));
+    /** The active sort direction of a grouped column (chip indicator + group-order comparator). */
+    groupDir(col) {
+        return this.groupSortDir().get(col.dataField()) ?? col.sortOrder() ?? 'asc';
+    }
+    /** Chip click (dx): cycle the grouped column's sort asc↔desc — never back to none. */
+    sortGroupColumn(col) {
+        const field = col.dataField();
+        if (!this.groupedFields().includes(field)) {
+            return;
+        }
+        const next = this.groupDir(col) === 'asc' ? 'desc' : 'asc';
+        this.groupSortDir.update((m) => new Map(m).set(field, next));
+    }
+    /** Gesture: drag a header into the group panel — append as the last group level. */
+    groupByColumn(col) {
+        const field = col.dataField();
+        // allowGrouping guard here too: with allowColumnReordering on, headers are draggable
+        // even when the column refuses grouping — a panel drop must then be a no-op.
+        if (!field || !col.allowGrouping() || this.groupedFields().includes(field)) {
+            return;
+        }
+        const level = this.groupedFields().length;
+        // dx moves an active user sort on this column onto the group level (chip indicator).
+        const current = this.sortInit() ? this.sort() : null;
+        this.groupedFields.update((fields) => [...fields, field]);
+        if (current?.field === field) {
+            this.groupSortDir.update((m) => new Map(m).set(field, current.dir));
+            this.sort.set(null);
+        }
+        this.emitGroupIndexChange(this.columns().indexOf(col), null, level);
+    }
+    /** Gesture: drag a chip out of the group panel — remove that group level. */
+    ungroupColumn(field) {
+        const fields = this.groupedFields();
+        const level = fields.indexOf(field);
+        if (level === -1) {
+            return;
+        }
+        // dx keeps the column sorted when it leaves the group panel: restore its group direction
+        // as the header sort — unless another column already carries the active user sort.
+        const col = this.columns().find((c) => c.dataField() === field);
+        const dir = col ? this.groupDir(col) : 'asc';
+        this.groupedFields.set(fields.filter((f) => f !== field));
+        if (!this.effectiveSort()) {
+            this.sortInit.set(true);
+            this.sort.set({ field, dir });
+        }
+        this.emitGroupIndexChange(this.columns().findIndex((c) => c.dataField() === field), level, null);
+    }
+    /**
+     * Gesture: reorder chips within the group panel — move a group level.
+     *
+     * Emission contract: generic-list's frozen handler replays each event as a positional SWAP,
+     * while a chip drag is a MOVE. The two only coincide for adjacent positions, so a distance-n
+     * move emits n adjacent-swap events (each adjacent swap == the corresponding move step) —
+     * the replayed array converges to exactly the grid's order.
+     */
+    moveGroup(from, to) {
+        const fields = this.groupedFields();
+        if (from === to || from < 0 || to < 0 || from >= fields.length || to >= fields.length) {
+            return;
+        }
+        const next = [...fields];
+        const [moved] = next.splice(from, 1);
+        next.splice(to, 0, moved);
+        this.groupedFields.set(next);
+        const movedColumnIndex = this.columns().findIndex((c) => c.dataField() === moved);
+        const step = from < to ? 1 : -1;
+        for (let level = from; level !== to; level += step) {
+            this.emitGroupIndexChange(movedColumnIndex, level, level + step);
+        }
+    }
+    /**
+     * Real dx `clearGrouping()`: ungroup everything. Removal events fire in DESCENDING level
+     * order so generic-list's `splice(previousValue, 1)` replay converges to `[]`.
+     */
+    clearGroupingInternal() {
+        const fields = this.groupedFields();
+        if (!fields.length) {
+            return;
+        }
+        this.groupedFields.set([]);
+        for (let level = fields.length - 1; level >= 0; level--) {
+            this.emitGroupIndexChange(this.columns().findIndex((c) => c.dataField() === fields[level]), level, null);
+        }
+    }
+    emitGroupIndexChange(columnIndex, previousValue, value) {
+        this.onOptionChanged.emit({
+            name: 'columns',
+            fullName: `columns[${columnIndex}].groupIndex`,
+            previousValue,
+            value,
+        });
+    }
+    // --- Runtime column order (allowColumnReordering) + width (allowColumnResizing) overrides ----
+    declaredFieldOrder = computed(() => this.columns().map((c) => c.dataField()), { ...(ngDevMode ? { debugName: "declaredFieldOrder" } : /* istanbul ignore next */ {}), equal: NxeDataGridComponent.fieldArrayEqual });
+    /** Runtime column order; header drag-reorder wins until the declared column set changes. */
+    fieldOrder = linkedSignal({ ...(ngDevMode ? { debugName: "fieldOrder" } : /* istanbul ignore next */ {}), source: () => this.declaredFieldOrder(),
+        computation: (seed) => seed });
+    declaredWidthsKey = computed(() => this.columns()
+        .map((c) => `${c.dataField()}:${c.width() ?? ''}`)
+        .join('|'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "declaredWidthsKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Manual column widths (px). Populated on the first resize with a snapshot of every rendered
+     * width — freezing the layout like dx — and reset when declared widths change.
+     */
+    widthOverride = linkedSignal({ ...(ngDevMode ? { debugName: "widthOverride" } : /* istanbul ignore next */ {}), source: () => this.declaredWidthsKey(),
+        computation: () => new Map() });
+    /** Visible data columns: `visible`/`columnOption` honoured, grouped columns excluded. */
+    visibleColumns = computed(() => {
+        const grouped = new Set(this.groupColumns());
+        const filtered = this.columns().filter((c) => {
+            if (grouped.has(c)) {
+                return false;
+            }
+            const override = this.visibilityOverride().get(c.dataField());
+            return override ?? c.visible();
+        });
+        const pos = new Map();
+        this.fieldOrder().forEach((f, i) => pos.set(f, i));
+        return [...filtered].sort((a, b) => (pos.get(a.dataField()) ?? 0) - (pos.get(b.dataField()) ?? 0));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
+    /**
+     * How many header rows the band structure needs, counted over the VISIBLE tree.
+     *
+     * Pruning matters: a band whose every leaf is hidden or grouped away contributes no row, so
+     * a grid that loses its last band collapses back to a single header row rather than keeping
+     * an empty one.
+     */
+    headerDepth = computed(() => {
+        const visible = new Set(this.visibleColumns());
+        const depthOf = (cols) => {
+            let d = 0;
+            for (const col of cols) {
+                if (col.isBand()) {
+                    const inner = depthOf(col.childColumns());
+                    if (inner > 0) {
+                        d = Math.max(d, 1 + inner);
+                    }
+                }
+                else if (visible.has(col)) {
+                    d = Math.max(d, 1);
+                }
+            }
+            return d;
+        };
+        return Math.max(1, depthOf(this.declaredColumns()));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerDepth" }] : /* istanbul ignore next */ []));
+    /**
+     * The header as rows of cells: bands carry `colspan`, leaves above the bottom row carry
+     * `rowspan`, which is dx's own banded markup.
+     */
+    headerRows = computed(() => {
+        const visible = this.visibleColumns();
+        const visibleSet = new Set(visible);
+        const indexOfLeaf = new Map();
+        visible.forEach((c, i) => indexOfLeaf.set(c, i));
+        const visibleLeaves = (col) => col.isBand()
+            ? col.childColumns().reduce((n, c) => n + visibleLeaves(c), 0)
+            : visibleSet.has(col)
+                ? 1
+                : 0;
+        // Siblings render in visible-leaf order, not declaration order: a drag-reorder rewrites
+        // `visibleColumns()` and the header has to follow, or the body reorders under a header
+        // that did not. A band takes the position of its leftmost leaf.
+        const orderOf = (col) => {
+            if (!col.isBand()) {
+                return indexOfLeaf.get(col) ?? Number.MAX_SAFE_INTEGER;
+            }
+            return col.childColumns().reduce((min, c) => Math.min(min, orderOf(c)), Number.MAX_SAFE_INTEGER);
+        };
+        const depth = this.headerDepth();
+        const rows = Array.from({ length: depth }, () => []);
+        const walk = (cols, level) => {
+            for (const col of [...cols].sort((a, b) => orderOf(a) - orderOf(b))) {
+                const span = visibleLeaves(col);
+                if (span === 0) {
+                    continue;
+                }
+                if (col.isBand()) {
+                    rows[level].push({
+                        column: col,
+                        colspan: span,
+                        rowspan: 1,
+                        isBand: true,
+                        leafIndex: null,
+                    });
+                    walk(col.childColumns(), level + 1);
+                }
+                else {
+                    rows[level].push({
+                        column: col,
+                        colspan: 1,
+                        rowspan: depth - level,
+                        isBand: false,
+                        leafIndex: indexOfLeaf.get(col) ?? null,
+                    });
+                }
+            }
+        };
+        walk(this.declaredColumns(), 0);
+        return rows;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerRows" }] : /* istanbul ignore next */ []));
+    /** Drag-reorder drop: move visible column `fromVis` to insertion `slot` (dx visibleIndex). */
+    moveColumnByVisible(fromVis, slot) {
+        const vis = this.visibleColumns();
+        const moved = vis[fromVis]?.dataField();
+        if (!moved) {
+            return;
+        }
+        const target = slot > fromVis ? slot - 1 : slot;
+        if (target === fromVis) {
+            return;
+        }
+        const without = vis.filter((_, i) => i !== fromVis);
+        const anchor = without[target]?.dataField() ?? null;
+        const order = this.fieldOrder().filter((f) => f !== moved);
+        const idx = anchor ? order.indexOf(anchor) : order.length;
+        const next = [...order];
+        next.splice(idx, 0, moved);
+        this.fieldOrder.set(next);
+        this.onOptionChanged.emit({
+            name: 'columns',
+            fullName: `columns[${this.columns().findIndex((c) => c.dataField() === moved)}].visibleIndex`,
+            previousValue: fromVis,
+            value: target,
+        });
+    }
+    /** True when this header renders a resize handle on its right edge. */
+    resizeHandleVisible(col, ci) {
+        if (!this.allowColumnResizing() || !col.allowResizing()) {
+            return false;
+        }
+        return this.columnResizingMode() === 'widget' || ci < this.visibleColumns().length - 1;
+    }
+    startColumnResize(col, ci, event) {
+        const next = this.columnResizingMode() === 'nextColumn' ? this.visibleColumns()[ci + 1] ?? null : null;
+        this.resize.start(col.dataField(), next?.dataField() ?? null, ci, this.leadCellCount(), event);
+    }
+    /** Command columns preceding the data columns — the offset dx's 1-based aria-colindex counts from. */
+    leadCellCount() {
+        return (this.groupLevelCount() +
+            (this.masterDetailEnabled() ? 1 : 0) +
+            (this.showCheckboxes() ? 1 : 0));
+    }
+    /** Resize commit: freeze all rendered widths (dx post-resize behavior) + emit width events. */
+    commitColumnResize(changes) {
+        const map = new Map(this.widthOverride());
+        const headerRow = nxeLeafHeaderRow(this.elementRef.nativeElement);
+        if (headerRow) {
+            const cells = nxeHeaderDataCells(headerRow);
+            this.visibleColumns().forEach((c, i) => {
+                const cell = cells[i];
+                if (cell) {
+                    map.set(c.dataField(), Math.round(cell.getBoundingClientRect().width * 100) / 100);
+                }
+            });
+        }
+        for (const ch of changes) {
+            map.set(ch.field, Math.round(ch.to * 100) / 100);
+        }
+        this.resizeActive = false;
+        this.widthOverride.set(map);
+        for (const ch of changes) {
+            this.onOptionChanged.emit({
+                name: 'columns',
+                fullName: `columns[${this.columns().findIndex((c) => c.dataField() === ch.field)}].width`,
+                previousValue: ch.from,
+                value: ch.to,
+            });
+        }
+    }
+    filterRowVisible = computed(() => this.filterRow()?.visible === true || this.filterRowCmp()?.visible() === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterRowVisible" }] : /* istanbul ignore next */ []));
+    // --- Master-detail (dxo-master-detail, orbit addition) --------------------------------------
+    masterDetailEnabled = computed(() => this.masterDetail()?.enabled() === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "masterDetailEnabled" }] : /* istanbul ignore next */ []));
+    expandedDetails = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandedDetails" }] : /* istanbul ignore next */ []));
+    isDetailExpanded(row) {
+        return this.expandedDetails().has(this.rowKey(row));
+    }
+    toggleDetail(row, event) {
+        event.stopPropagation();
+        const key = this.rowKey(row);
+        const expanding = !this.expandedDetails().has(key);
+        if (expanding) {
+            this.onRowExpanding.emit({ key, component: this.facade });
+        }
+        this.expandedDetails.update((set) => {
+            const next = new Set(set);
+            expanding ? next.add(key) : next.delete(key);
+            return next;
+        });
+        if (expanding) {
+            this.onRowExpanded.emit({ key, component: this.facade });
+        }
+    }
+    detailTemplate() {
+        return this.templateFor(this.masterDetail()?.template());
+    }
+    detailContext(row, rowIndex) {
+        return { $implicit: { data: row, rowIndex, key: this.rowKey(row) } };
+    }
+    /** Group indent levels (dx renders one 30px command column per group level; grid mode only). */
+    groupLevelCount = computed(() => this.treeMode ? 0 : this.groupColumns().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupLevelCount" }] : /* istanbul ignore next */ []));
+    indents(count) {
+        return Array.from({ length: count }, (_, i) => i);
+    }
+    /** Visible columns from the first alignByColumn target onward — each gets its own summary td. */
+    groupRowTrailing(item) {
+        if (!item.alignedSums.size) {
+            return [];
+        }
+        const cols = this.visibleColumns();
+        const first = cols.findIndex((c) => item.alignedSums.has(c.dataField()));
+        if (first === -1) {
+            return [];
+        }
+        let trailing = cols.slice(first);
+        // The caption cell needs at least one column of room — trim leading trailing cells
+        // instead of letting the colspan clamp shift the summary alignment.
+        const maxTrailing = this.allColCount() - item.level - 2 - (this.rowEditCommandVisible() ? 1 : 0);
+        if (trailing.length > maxTrailing) {
+            trailing = trailing.slice(trailing.length - Math.max(0, maxTrailing));
+        }
+        return trailing;
+    }
+    /** dx group-cell span: everything after the expand cell not taken by aligned summary cells. */
+    groupCellColspan(item) {
+        const trailing = this.groupRowTrailing(item).length;
+        const editTd = trailing > 0 && this.rowEditCommandVisible() ? 1 : 0;
+        return Math.max(1, this.allColCount() - item.level - 1 - trailing - editTd);
+    }
+    /** Total column count including command columns (indents/checkbox/expand/edit) for colspans. */
+    allColCount = computed(() => (this.groupLevelCount() +
+        this.visibleColumns().length +
+        (this.showCheckboxes() ? 1 : 0) +
+        (this.masterDetailEnabled() ? 1 : 0) +
+        (this.rowEditCommandVisible() ? 1 : 0)) ||
+        1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allColCount" }] : /* istanbul ignore next */ []));
+    // --- Inline editing (dxo-editing, orbit addition) -------------------------------------------
+    cellEditingEnabled = computed(() => {
+        const e = this.editingCmp();
+        return !!e && e.mode() === 'cell' && e.allowUpdating();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellEditingEnabled" }] : /* istanbul ignore next */ []));
+    rowEditingEnabled = computed(() => {
+        const e = this.editingCmp();
+        return !!e && e.mode() === 'row' && e.allowUpdating();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowEditingEnabled" }] : /* istanbul ignore next */ []));
+    rowEditCommandVisible = computed(() => this.rowEditingEnabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowEditCommandVisible" }] : /* istanbul ignore next */ []));
+    /** The single cell in edit mode (`cell` mode): row ref + dataField. */
+    editingCell = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editingCell" }] : /* istanbul ignore next */ []));
+    /** Buffered values for the row in edit mode (`row` mode), keyed by dataField. */
+    rowEditBuffer = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowEditBuffer" }] : /* istanbul ignore next */ []));
+    isEditingCell(row, col) {
+        const c = this.editingCell();
+        return !!c && c.row === row && c.field === col.dataField();
+    }
+    isRowEditing(row) {
+        return this.rowEditingEnabled() && this.editingCmp()?.editRowKey() === this.rowKey(row);
+    }
+    editableCell(col) {
+        if (col.allowEditing() === false || !col.dataField()) {
+            return false;
+        }
+        // A `cellTemplate` cell renders its own content, so the built-in editor stays out of its
+        // way. Naming an `editCellTemplate` is an explicit request to edit it anyway — which is
+        // broker's dominant shape, where `customizeText`/`format` render the cell at rest and a
+        // projected editor takes over on click.
+        return !!col.editCellTemplate() || !col.cellTemplate();
+    }
+    onCellClick(row, col, event) {
+        if (!this.cellEditingEnabled() || !this.editableCell(col)) {
+            return;
+        }
+        event.stopPropagation();
+        this.editingCell.set({ row, field: col.dataField() });
+    }
+    /** dx cell-mode semantics: commit to the row on blur/Enter (client-side array write-through). */
+    commitCellEdit(row, col, rawInput) {
+        this.writeCell(row, col, rawInput);
+        this.editingCell.set(null);
+        this.refreshTick.update((v) => v + 1);
+    }
+    /** Write a cell value through the grid's own path, leaving edit state alone (dx `setValue`). */
+    writeCellValue(row, col, value) {
+        this.writeCell(row, col, value);
+        this.refreshTick.update((v) => v + 1);
+    }
+    cancelCellEdit() {
+        this.editingCell.set(null);
+    }
+    /**
+     * Leave cell-edit state when focus goes somewhere outside the cell.
+     *
+     * The built-in editor commits on its own blur, but a projected `editCellTemplate` has no such
+     * contract, so the cell needs to notice for itself. Nothing is committed here: those templates
+     * write through the live row object, so leaving edit state is purely a view change.
+     *
+     * A projected picker opens its panel in a CDK overlay appended to `<body>`, which means focus
+     * legitimately leaves the `<td>` while the edit is still going on — hence the second guard.
+     */
+    onEditCellFocusOut(row, col, event) {
+        if (!col.editCellTemplate() || !this.isEditingCell(row, col)) {
+            return;
+        }
+        const td = event.currentTarget;
+        const next = event.relatedTarget;
+        if (!td || (next && td.contains(next))) {
+            return;
+        }
+        if (document.querySelector('.cdk-overlay-container')?.hasChildNodes()) {
+            return;
+        }
+        this.editingCell.set(null);
+    }
+    writeCell(row, col, rawInput) {
+        const field = col.dataField();
+        let value = rawInput;
+        if (col.dataType() === 'number' && typeof rawInput === 'string') {
+            const n = Number(rawInput.replace(/,/g, ''));
+            value = rawInput.trim() === '' || isNaN(n) ? null : n;
+        }
+        if (field.includes('.')) {
+            const parts = field.split('.');
+            const last = parts.pop();
+            const target = parts.reduce((o, k) => (o == null ? o : o[k]), row);
+            if (target != null) {
+                target[last] = value;
+            }
+            return;
+        }
+        row[field] = value;
+    }
+    startRowEdit(row, event) {
+        event.stopPropagation();
+        this.editingCmp()?.editRowKey.set(this.rowKey(row));
+        this.rowEditBuffer.set({});
+    }
+    bufferRowEdit(col, rawInput) {
+        this.rowEditBuffer.update((b) => ({ ...b, [col.dataField()]: rawInput }));
+    }
+    /** dx row-mode Save: apply the buffer to the row and record an `update` change. */
+    saveRowEdit(row, event) {
+        event.stopPropagation();
+        const editing = this.editingCmp();
+        if (!editing) {
+            return;
+        }
+        const buffer = this.rowEditBuffer();
+        const data = {};
+        for (const [field, raw] of Object.entries(buffer)) {
+            const col = this.columns().find((c) => c.dataField() === field);
+            if (col) {
+                this.writeCell(row, col, raw);
+                data[field] = this.getRaw(row, field);
+            }
+        }
+        if (Object.keys(data).length) {
+            editing.changes.update((list) => [
+                ...list.filter((c) => !(c.type === 'update' && c.key === this.rowKey(row))),
+                { type: 'update', key: this.rowKey(row), data },
+            ]);
+        }
+        editing.editRowKey.set(null);
+        this.rowEditBuffer.set({});
+        this.refreshTick.update((v) => v + 1);
+    }
+    cancelRowEdit(event) {
+        event.stopPropagation();
+        this.editingCmp()?.editRowKey.set(null);
+        this.rowEditBuffer.set({});
+    }
+    editorInputValue(row, col) {
+        if (this.isRowEditing(row)) {
+            const buffered = this.rowEditBuffer()[col.dataField()];
+            if (buffered !== undefined) {
+                return String(buffered);
+            }
+        }
+        const raw = this.getRaw(row, col.dataField());
+        return raw == null ? '' : String(raw);
+    }
+    // --- Cell merge (`[mergeColumns]`, orbit addition) ------------------------------------------
+    /**
+     * Rowspan map over `renderRows`: `"<renderIndex>:<field>"` → span (>1 = merged head,
+     * 0 = suppressed continuation, absent = normal cell). Hierarchical: a value break in an
+     * earlier merge column breaks all later ones; group/detail rows break every run.
+     */
+    mergeSpans = computed(() => {
+        const fields = this.mergeColumns();
+        const map = new Map();
+        if (!fields.length) {
+            return map;
+        }
+        const rows = this.renderRows();
+        // runStart[f] = renderRows index where the current run for field f began.
+        const runStart = new Map();
+        const runLength = new Map();
+        const flush = (field) => {
+            const start = runStart.get(field);
+            const len = runLength.get(field) ?? 0;
+            if (start !== undefined && len > 1) {
+                map.set(`${start}:${field}`, len);
+                for (let i = start + 1; i < start + len; i++) {
+                    map.set(`${i}:${field}`, 0);
+                }
+            }
+            runStart.delete(field);
+            runLength.delete(field);
+        };
+        let prevRow = null;
+        rows.forEach((item, idx) => {
+            if (item.kind !== 'data') {
+                fields.forEach(flush);
+                prevRow = null;
+                return;
+            }
+            let broken = false;
+            for (const field of fields) {
+                const same = !broken &&
+                    prevRow != null &&
+                    this.getRaw(prevRow, field) === this.getRaw(item.row, field) &&
+                    this.getRaw(item.row, field) != null &&
+                    this.getRaw(item.row, field) !== '';
+                if (same) {
+                    runLength.set(field, (runLength.get(field) ?? 1) + 1);
+                }
+                else {
+                    broken = true;
+                    flush(field);
+                    runStart.set(field, idx);
+                    runLength.set(field, 1);
+                }
+            }
+            prevRow = item.row;
+        });
+        fields.forEach(flush);
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mergeSpans" }] : /* istanbul ignore next */ []));
+    mergeSpan(renderIndex, col) {
+        if (!this.mergeColumns().includes(col.dataField())) {
+            return null;
+        }
+        return this.mergeSpans().get(`${renderIndex}:${col.dataField()}`) ?? null;
+    }
+    isMergeSuppressed(renderIndex, col) {
+        return this.mergeSpan(renderIndex, col) === 0;
+    }
+    columnByField = computed(() => {
+        const map = new Map();
+        for (const c of this.columns()) {
+            map.set(c.dataField(), c);
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnByField" }] : /* istanbul ignore next */ []));
+    filterRowPredicate = computed(() => {
+        const state = this.filterRowState();
+        if (!state.size) {
+            return null;
+        }
+        const byField = this.columnByField();
+        const matchers = [];
+        for (const [field, entry] of state) {
+            const col = byField.get(field);
+            if (!col) {
+                continue;
+            }
+            const matcher = this.buildFilterRowMatcher(col, entry);
+            if (matcher) {
+                matchers.push(matcher);
+            }
+        }
+        return matchers.length ? (row) => matchers.every((m) => m(row)) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterRowPredicate" }] : /* istanbul ignore next */ []));
+    /** Builds one column's filter-row matcher; null when the entry has no effective value yet. */
+    buildFilterRowMatcher(col, entry) {
+        const kind = this.frEditorKind(col);
+        const t1 = entry.text.trim();
+        const t2 = (entry.text2 ?? '').trim();
+        if (!t1 && !t2) {
+            return null;
+        }
+        if (kind === 'lookup' || kind === 'boolean') {
+            // select editors: dx filters by '=' on the raw value; 'false' must NOT match blanks
+            return (row) => {
+                const raw = this.getRaw(row, col.dataField());
+                if (kind === 'boolean') {
+                    return t1 === 'true' ? raw === true : raw === false;
+                }
+                return String(raw ?? '') === t1;
+            };
+        }
+        if (kind === 'number') {
+            const v1 = t1 ? Number(t1.replace(/,/g, '')) : null;
+            const v2 = t2 ? Number(t2.replace(/,/g, '')) : null;
+            if ((t1 && Number.isNaN(v1)) || (t2 && Number.isNaN(v2))) {
+                return null; // dx applies nothing until the editor holds a valid number
+            }
+            return (row) => {
+                const raw = this.getRaw(row, col.dataField());
+                const n = raw == null || raw === '' ? null : Number(raw);
+                if (n == null || Number.isNaN(n)) {
+                    return entry.op === '<>';
+                }
+                return this.matchScalar(entry.op, n, v1, v2);
+            };
+        }
+        if (kind === 'date') {
+            const d1 = t1 ? this.dayKey(t1) : null;
+            const d2 = t2 ? this.dayKey(t2) : null;
+            if ((t1 && !d1) || (t2 && !d2)) {
+                return null;
+            }
+            return (row) => {
+                const raw = this.getRaw(row, col.dataField());
+                const day = raw == null || raw === '' ? null : this.dayKey(raw);
+                if (!day) {
+                    return entry.op === '<>';
+                }
+                // dx expands date '=' to the whole day — day keys compare lexicographically.
+                return this.matchScalar(entry.op, day, d1, d2);
+            };
+        }
+        // string operations, case-insensitive over the displayed text
+        const q = t1.toLowerCase();
+        return (row) => {
+            const text = this.cellText(col, row).toLowerCase();
+            switch (entry.op) {
+                case 'notcontains':
+                    return !text.includes(q);
+                case 'startswith':
+                    return text.startsWith(q);
+                case 'endswith':
+                    return text.endsWith(q);
+                case '=':
+                    return text === q;
+                case '<>':
+                    return text !== q;
+                default:
+                    return text.includes(q);
+            }
+        };
+    }
+    matchScalar(op, value, v1, v2) {
+        switch (op) {
+            case '<>':
+                return value !== v1;
+            case '<':
+                return v1 != null && value < v1;
+            case '<=':
+                return v1 != null && value <= v1;
+            case '>':
+                return v1 != null && value > v1;
+            case '>=':
+                return v1 != null && value >= v1;
+            case 'between':
+                return (v1 == null || value >= v1) && (v2 == null || value <= v2);
+            default:
+                return value === v1;
+        }
+    }
+    dayKey(raw) {
+        const dt = parseDateValue(raw);
+        return dt ? dt.toFormat('yyyy-MM-dd') : null;
+    }
+    /**
+     * The applied header filters: runtime overrides win; untouched columns fall back to their
+     * declarative `filterValues` seed. Values are normalized through `hfKey`.
+     */
+    effectiveHeaderFilters = computed(() => {
+        const out = new Map();
+        const override = this.hfOverride();
+        for (const col of this.columns()) {
+            const field = col.dataField();
+            if (!field || out.has(field)) {
+                continue;
+            }
+            if (override.has(field)) {
+                const set = override.get(field);
+                if (set) {
+                    out.set(field, set);
+                }
+            }
+            else {
+                const seed = col.filterValues();
+                if (seed?.length) {
+                    out.set(field, new Set(seed.map((v) => this.hfKey(col, v))));
+                }
+            }
+        }
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveHeaderFilters" }] : /* istanbul ignore next */ []));
+    headerFilterPredicate = computed(() => {
+        const hf = this.effectiveHeaderFilters();
+        if (!hf.size) {
+            return null;
+        }
+        const byField = this.columnByField();
+        const entries = [...hf].map(([field, set]) => ({ field, set, col: byField.get(field) }));
+        return (row) => entries.every(({ field, set, col }) => set.has(col ? this.hfKey(col, this.getRaw(row, field)) : this.getRaw(row, field)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerFilterPredicate" }] : /* istanbul ignore next */ []));
+    /** dataSource → filter-row filters → header filters (sorting happens in `displayRows`). */
+    filteredRows = computed(() => {
+        this.refreshTick();
+        let rows = (this.dataSource() ?? []);
+        const rowFilter = this.filterRowPredicate();
+        if (rowFilter) {
+            rows = rows.filter(rowFilter);
+        }
+        const hf = this.headerFilterPredicate();
+        if (hf) {
+            rows = rows.filter(hf);
+        }
+        return rows;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredRows" }] : /* istanbul ignore next */ []));
+    /**
+     * dx sort semantics: grouped columns lead the sort expression in level order (each by its
+     * group direction), then the user/declarative sort applies WITHIN the innermost groups.
+     * Ungrouped grids keep the single-column behavior unchanged.
+     */
+    displayRows = computed(() => {
+        const rows = this.filteredRows();
+        const chain = [];
+        if (!this.treeMode) {
+            for (const col of this.groupColumns()) {
+                chain.push({ field: col.dataField(), dir: this.groupDir(col) });
+            }
+        }
+        const user = this.effectiveSort();
+        if (user && !chain.some((s) => s.field === user.field)) {
+            chain.push(user);
+        }
+        if (!chain.length) {
+            return rows;
+        }
+        return [...rows].sort((a, b) => {
+            for (const s of chain) {
+                const r = this.compare(this.getRaw(a, s.field), this.getRaw(b, s.field));
+                if (r !== 0) {
+                    return s.dir === 'asc' ? r : -r;
+                }
+            }
+            return 0;
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayRows" }] : /* istanbul ignore next */ []));
+    loading = computed(() => this.dataSource() == null && this.loadPanel()?.enabled !== false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** The active sort: an explicit user click, else the first column declaring `sortOrder`. */
+    effectiveSort() {
+        if (this.sortInit()) {
+            return this.sort();
+        }
+        const sorted = this.columns().find((c) => c.sortOrder());
+        return sorted ? { field: sorted.dataField(), dir: sorted.sortOrder() } : null;
+    }
+    // --- Rendering helpers -----------------------------------------------------------------------
+    align(col) {
+        const a = col.alignment();
+        if (a) {
+            return a;
+        }
+        switch (col.dataType()) {
+            case 'number':
+                return 'right';
+            case 'boolean':
+                return 'center';
+            default:
+                return 'left';
+        }
+    }
+    colWidth(col) {
+        const manual = this.widthOverride().get(col.dataField());
+        if (manual != null) {
+            return `${manual}px`;
+        }
+        const w = col.width();
+        if (w == null) {
+            return null;
+        }
+        return typeof w === 'number' ? `${w}px` : /^\d+$/.test(w) ? `${w}px` : w;
+    }
+    getRaw(row, dataField) {
+        if (!dataField || row == null) {
+            return undefined;
+        }
+        if (dataField.includes('.')) {
+            return dataField.split('.').reduce((o, k) => (o == null ? o : o[k]), row);
+        }
+        return row[dataField];
+    }
+    /** Resolve the displayed cell text: lookup > customizeText > dataType/format > raw string. */
+    /** dx parity: boolean values render as read-only checkboxes (dx dataType inference did this). */
+    isBooleanCell(col, row) {
+        if (col.dataType() === 'boolean') {
+            return true;
+        }
+        const v = this.getRaw(row, col.dataField());
+        return v === true || v === false;
+    }
+    cellText(col, row) {
+        const raw = this.getRaw(row, col.dataField());
+        const valueText = this.lookupText(col, raw) ?? this.defaultFormat(col, raw);
+        const ct = col.customizeText();
+        return ct ? ct({ value: raw, valueText }) : valueText;
+    }
+    /** Column `lookup` resolution (orbit addition): raw value → display text via the lookup list. */
+    lookupText(col, raw) {
+        const lookup = col.lookup();
+        if (!lookup || raw == null) {
+            return null;
+        }
+        const valueExpr = lookup.valueExpr ?? 'lovCode';
+        const displayExpr = lookup.displayExpr ?? 'lovName';
+        const match = (lookup.dataSource ?? []).find((item) => item?.[valueExpr] === raw);
+        return match ? String(match[displayExpr] ?? raw) : String(raw);
+    }
+    defaultFormat(col, raw) {
+        return nxeDefaultFormat(col.dataType(), col.format(), raw);
+    }
+    templateFor(name) {
+        if (!name) {
+            return null;
+        }
+        return this.templates().find((t) => t.name() === name)?.templateRef ?? null;
+    }
+    cellContext(row, rowIndex, columnIndex, col) {
+        const value = this.getRaw(row, col.dataField());
+        return {
+            $implicit: {
+                data: row,
+                rowIndex,
+                columnIndex,
+                value,
+                displayValue: value,
+                text: this.cellText(col, row),
+                key: row,
+                column: { dataField: col.dataField(), caption: col.caption() },
+            },
+        };
+    }
+    editCellContext(row, rowIndex, columnIndex, col) {
+        const value = this.getRaw(row, col.dataField());
+        // Captured now rather than read inside setValue: which write path applies is decided by
+        // the state the template was rendered in, and `cell` mode clears `editingCell` on commit.
+        const cellMode = this.isEditingCell(row, col);
+        return {
+            $implicit: {
+                data: row,
+                key: this.rowKey(row),
+                value,
+                displayValue: value,
+                text: this.cellText(col, row),
+                rowIndex,
+                columnIndex,
+                column: {
+                    dataField: col.dataField(),
+                    caption: col.caption(),
+                    dataType: col.dataType(),
+                    format: col.format(),
+                },
+                // dx's setValue changes the cell value; it does not end the edit. The editor
+                // closes when focus leaves, which `onEditCellFocusOut` handles. Committing here
+                // instead would also fight the click that triggered it: clearing the edit state
+                // mid-dispatch lets the same event bubble to the cell and reopen it.
+                setValue: (newValue) => cellMode ? this.writeCellValue(row, col, newValue) : this.bufferRowEdit(col, newValue),
+                component: this.facade,
+            },
+        };
+    }
+    groupCellContext(item) {
+        return {
+            $implicit: {
+                data: [...item.rows],
+                key: item.value,
+                value: item.value,
+                displayValue: item.text,
+                // What the grid would have rendered, suffix included, so a template can decorate
+                // the default rather than having to rebuild it.
+                text: `${item.column.caption()}: ${item.text}${item.captionSuffix}`,
+                groupIndex: item.level,
+                columnIndex: this.columns().indexOf(item.column),
+                column: { dataField: item.column.dataField(), caption: item.column.caption() },
+                component: this.facade,
+            },
+        };
+    }
+    /**
+     * dx `onCellPrepared` / `onRowPrepared`.
+     *
+     * Emitted from a render hook rather than an effect, because the payload carries the real
+     * `<td>`: it cannot exist before the DOM does. `afterRenderEffect` is the sanctioned
+     * primitive for that here, and the walk runs inside `untracked()` so a handler that happens
+     * to read a signal cannot enrol it in this hook's dependency set — the invisible-dependency
+     * failure the `effect()` ban exists to prevent.
+     */
+    emitPreparedEvents() {
+        if (!this.onCellPrepared.observed && !this.onRowPrepared.observed) {
+            return;
+        }
+        // A handler that writes a signal schedules another render, and therefore another
+        // emission. dx re-fires on repaint too and the merge helpers are idempotent, but a
+        // pathological handler should fail safe rather than hang the tab.
+        if (this.preparedDepth > 0) {
+            return;
+        }
+        const host = this.elementRef.nativeElement;
+        const table = host.querySelector('.dx-datagrid-content > .dx-datagrid-table');
+        if (!table) {
+            return;
+        }
+        // Own rows only: a nested master-detail grid renders its own rows deeper inside a cell,
+        // and section.parentElement === table is what separates them.
+        const rows = Array.from(table.querySelectorAll('tr')).filter((tr) => tr.parentElement?.parentElement === table);
+        const cols = this.visibleColumns();
+        const dataItems = this.renderRows().filter((r) => r.kind === 'data');
+        const groupItems = this.renderRows().filter((r) => r.kind === 'group');
+        this.preparedDepth++;
+        try {
+            let dataSeen = 0;
+            let groupSeen = 0;
+            for (const tr of rows) {
+                const rowType = nxeRowTypeOf(tr);
+                if (!rowType) {
+                    continue;
+                }
+                let info;
+                if (rowType === 'data') {
+                    const item = dataItems[dataSeen++];
+                    info = {
+                        rowType,
+                        data: item?.row,
+                        key: item ? this.rowKey(item.row) : undefined,
+                        rowIndex: item?.rowIndex ?? -1,
+                        isSelected: item ? this.isSelected(item.row) : false,
+                    };
+                }
+                else if (rowType === 'group') {
+                    const item = groupItems[groupSeen++];
+                    info = {
+                        rowType,
+                        data: item?.rows,
+                        key: item?.value,
+                        rowIndex: -1,
+                        // dx handlers read one name or the other depending on vintage; supply both.
+                        groupIndex: item?.level,
+                        groupLevel: item?.level,
+                        isExpanded: item ? !item.collapsed : undefined,
+                    };
+                }
+                else {
+                    info = { rowType, data: undefined, key: undefined, rowIndex: -1 };
+                }
+                if (this.onRowPrepared.observed) {
+                    this.onRowPrepared.emit({
+                        ...info,
+                        rowElement: tr,
+                        columnCount: tr.cells.length,
+                        component: this.facade,
+                        element: host,
+                    });
+                }
+                if (!this.onCellPrepared.observed) {
+                    continue;
+                }
+                let colSeen = 0;
+                for (const td of Array.from(tr.cells)) {
+                    const isCommand = td.classList.contains('dx-command-expand') ||
+                        td.classList.contains('dx-command-select') ||
+                        td.classList.contains('dx-command-edit') ||
+                        td.classList.contains('dx-group-cell') ||
+                        td.classList.contains('nxe-band-cell');
+                    const col = isCommand ? undefined : cols[colSeen];
+                    const columnIndex = isCommand ? -1 : colSeen;
+                    if (!isCommand) {
+                        colSeen++;
+                    }
+                    const value = col && rowType === 'data' && info.data
+                        ? this.getRaw(info.data, col.dataField())
+                        : undefined;
+                    this.onCellPrepared.emit({
+                        data: info.data,
+                        key: info.key,
+                        value,
+                        displayValue: value,
+                        text: td.textContent ?? '',
+                        columnIndex,
+                        rowIndex: info.rowIndex,
+                        column: col
+                            ? {
+                                dataField: col.dataField(),
+                                caption: col.caption(),
+                                dataType: col.dataType(),
+                                index: columnIndex,
+                            }
+                            : null,
+                        row: info,
+                        rowType,
+                        cellElement: td,
+                        component: this.facade,
+                        element: host,
+                    });
+                }
+            }
+        }
+        finally {
+            this.preparedDepth--;
+        }
+    }
+    // --- Interaction -----------------------------------------------------------------------------
+    /** True when this header can start a drag gesture (to the group panel and/or a reorder). */
+    headerDraggable(col) {
+        if (this.treeMode || !col.dataField()) {
+            return false;
+        }
+        // Reordering is off for banded grids: dragging a leaf out of its band has no meaning in
+        // dx, and letting it happen here would tear the band apart. Grouping still works, and a
+        // band whose leaves are all grouped away simply disappears.
+        return ((this.groupPanelVisible() && col.allowGrouping()) ||
+            (this.allowColumnReordering() && !this.hasBands()));
+    }
+    onHeaderPointerDown(col, ci, event) {
+        if (this.headerDraggable(col)) {
+            this.drag.startHeaderDrag(col, ci, event);
+        }
+    }
+    onChipPointerDown(col, level, event) {
+        this.drag.startChipDrag(col, level, event);
+    }
+    /** Chip click (dx): toggle the grouped column's sort — unless this click ends a drag. */
+    onChipClick(col) {
+        if (this.drag.consumeClick()) {
+            return;
+        }
+        this.sortGroupColumn(col);
+    }
+    onHeaderClick(col) {
+        if (this.drag.consumeClick() || this.resize.consumeClick()) {
+            return; // this click is the tail of a drag/resize gesture, not a sort request
+        }
+        if (!col.allowSorting() || this.sorting()?.mode === 'none') {
+            return;
+        }
+        const field = col.dataField();
+        if (!field) {
+            return;
+        }
+        this.sortInit.set(true);
+        const current = this.effectiveSort();
+        if (!current || current.field !== field) {
+            this.sort.set({ field, dir: 'asc' });
+        }
+        else if (current.dir === 'asc') {
+            this.sort.set({ field, dir: 'desc' });
+        }
+        else {
+            this.sort.set(null);
+        }
+    }
+    sortDir(col) {
+        const s = this.effectiveSort();
+        return s && s.field === col.dataField() ? s.dir : null;
+    }
+    onRowEnter(index) {
+        if (this.hoverStateEnabled()) {
+            this.hoveredIndex.set(index);
+        }
+    }
+    onRowLeave() {
+        this.hoveredIndex.set(null);
+    }
+    isHovered(index) {
+        return this.hoveredIndex() === index;
+    }
+    isSelected(row) {
+        return this.treeMode
+            ? this.selectedRowKeys().includes(this.rowKey(row))
+            : this.selectedSet().has(row);
+    }
+    /** Row body click: single-select (LOV pickers) or toggle when checkboxes are hidden. */
+    onDataRowClick(row, rowIndex = 0) {
+        this.onRowClick.emit({ data: row, rowIndex, component: this.facade });
+        if (!this.selectionEnabled()) {
+            return;
+        }
+        if (this.selectionMode() === 'multiple' &&
+            this.showCheckboxes() &&
+            !this.selection()?.selectByClick()) {
+            return; // checkbox-driven; row click is a no-op
+        }
+        this.toggleRow(row);
+    }
+    onCheckboxClick(row, event) {
+        event.stopPropagation();
+        this.toggleRow(row);
+    }
+    toggleRow(row) {
+        if (this.treeMode) {
+            this.toggleTreeSelection(row);
+            return;
+        }
+        const set = new Set(this.selectedSet());
+        let currentSelected = [];
+        let currentDeselected = [];
+        if (this.selectionMode() === 'single') {
+            currentDeselected = [...set].filter((r) => r !== row);
+            set.clear();
+            set.add(row);
+            currentSelected = [row];
+        }
+        else if (set.has(row)) {
+            set.delete(row);
+            currentDeselected = [row];
+        }
+        else {
+            set.add(row);
+            currentSelected = [row];
+        }
+        this.selectedSet.set(set);
+        this.emitSelectionChanged(currentSelected, currentDeselected);
+    }
+    toggleSelectAll(event) {
+        event.stopPropagation();
+        if (this.treeMode) {
+            const allKeys = (this.dataSource() ?? []).map((r) => this.rowKey(r));
+            if (this.allSelected()) {
+                this.selectedRowKeys.set([]);
+                this.emitTreeSelectionChanged([], [], allKeys);
+            }
+            else {
+                this.selectedRowKeys.set(allKeys);
+                this.emitTreeSelectionChanged(allKeys, allKeys, []);
+            }
+            return;
+        }
+        const rows = this.displayRows();
+        if (this.allSelected()) {
+            this.selectedSet.set(new Set());
+            this.emitSelectionChanged([], rows);
+        }
+        else {
+            this.selectedSet.set(new Set(rows));
+            this.emitSelectionChanged(rows, []);
+        }
+    }
+    emitSelectionChanged(currentSelected, currentDeselected) {
+        const data = this.selectedRowsData();
+        this.onSelectionChanged.emit({
+            selectedRowsData: data,
+            selectedRowKeys: this.rowKeys(data),
+            currentSelectedRowKeys: this.rowKeys(currentSelected),
+            currentDeselectedRowKeys: this.rowKeys(currentDeselected),
+            component: this.facade,
+            element: this.elementRef.nativeElement,
+        });
+    }
+    rowKeys(rows) {
+        const key = this.keyExpr();
+        return key ? rows.map((r) => r?.[key]) : rows;
+    }
+    // --- Filter row (dxo-filter-row): typed editors + dx operation-chooser menu ------------------
+    static STRING_OPS = [
+        { op: 'contains', label: 'Contains' },
+        { op: 'notcontains', label: 'Does not contain' },
+        { op: 'startswith', label: 'Starts with' },
+        { op: 'endswith', label: 'Ends with' },
+        { op: '=', label: 'Equals' },
+        { op: '<>', label: 'Does not equal' },
+    ];
+    static SCALAR_OPS = [
+        { op: '=', label: 'Equals' },
+        { op: '<>', label: 'Does not equal' },
+        { op: '<', label: 'Less than' },
+        { op: '>', label: 'Greater than' },
+        { op: '<=', label: 'Less than or equal to' },
+        { op: '>=', label: 'Greater than or equal to' },
+        { op: 'between', label: 'Between' },
+    ];
+    static OP_ICON_SLUGS = {
+        contains: 'contains',
+        notcontains: 'not-contains',
+        startswith: 'starts-with',
+        endswith: 'ends-with',
+        '=': 'equals',
+        '<>': 'not-equals',
+        '<': 'less',
+        '<=': 'less-equal',
+        '>': 'greater',
+        '>=': 'greater-equal',
+        between: 'between',
+    };
+    frMenuColumn = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frMenuColumn" }] : /* istanbul ignore next */ []));
+    frMenuOverlayRef;
+    frMenuPanel = viewChild('frOpMenu', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frMenuPanel" }] : /* istanbul ignore next */ []));
+    /** Which editor a filter cell renders (mirrors dx: select for lookup/boolean, typed inputs). */
+    frEditorKind(col) {
+        if (col.lookup()) {
+            return 'lookup';
+        }
+        const type = col.dataType();
+        return type === 'boolean' || type === 'date' || type === 'number' ? type : 'text';
+    }
+    /** dx shows the operation-chooser magnifier only for typed (non-select) editors. */
+    frHasOpMenu(col) {
+        const kind = this.frEditorKind(col);
+        return kind !== 'lookup' && kind !== 'boolean';
+    }
+    frDefaultOp(col) {
+        return this.frEditorKind(col) === 'text' ? 'contains' : '=';
+    }
+    frOp(col) {
+        return this.filterRowState().get(col.dataField())?.op ?? this.frDefaultOp(col);
+    }
+    frText(col) {
+        return this.filterRowState().get(col.dataField())?.text ?? '';
+    }
+    frText2(col) {
+        return this.filterRowState().get(col.dataField())?.text2 ?? '';
+    }
+    frOpIconClass(col) {
+        return `dx-icon-filter-operation-${NxeDataGridComponent.OP_ICON_SLUGS[this.frOp(col)]}`;
+    }
+    opIconSlug(op) {
+        return NxeDataGridComponent.OP_ICON_SLUGS[op];
+    }
+    setFilterRowText(col, text, second = false) {
+        const field = col.dataField();
+        const next = new Map(this.filterRowState());
+        const prev = next.get(field) ?? { op: this.frDefaultOp(col), text: '' };
+        next.set(field, second ? { ...prev, text2: text } : { ...prev, text });
+        this.filterRowState.set(next);
+    }
+    openFilterOpMenu(col, event) {
+        event.stopPropagation();
+        this.frMenuColumn.set(col);
+        this.frMenuOverlayRef?.dispose();
+        const origin = event.currentTarget;
+        this.frMenuOverlayRef = this.overlay.create({
+            positionStrategy: this.overlay
+                .position()
+                .flexibleConnectedTo(origin)
+                .withPositions([
+                { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+                { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+            ]),
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            panelClass: nxePane('nxe-fr-op-pane'),
+        });
+        this.frMenuOverlayRef.backdropClick().subscribe(() => this.closeFilterOpMenu());
+        const panel = this.frMenuPanel();
+        if (panel) {
+            this.frMenuOverlayRef.attach(new TemplatePortal(panel, this.viewContainerRef));
+        }
+    }
+    frMenuOps() {
+        const col = this.frMenuColumn();
+        if (!col) {
+            return [];
+        }
+        return this.frEditorKind(col) === 'text'
+            ? NxeDataGridComponent.STRING_OPS
+            : NxeDataGridComponent.SCALAR_OPS;
+    }
+    selectFilterOp(op) {
+        const col = this.frMenuColumn();
+        if (col) {
+            const field = col.dataField();
+            const next = new Map(this.filterRowState());
+            const prev = next.get(field) ?? { op: this.frDefaultOp(col), text: '' };
+            next.set(field, { ...prev, op, ...(op !== 'between' ? { text2: undefined } : {}) });
+            this.filterRowState.set(next);
+        }
+        this.closeFilterOpMenu();
+    }
+    /** dx Reset menu item: restore the default operation and clear the editor. */
+    resetFilterRow() {
+        const col = this.frMenuColumn();
+        if (col) {
+            const next = new Map(this.filterRowState());
+            next.delete(col.dataField());
+            this.filterRowState.set(next);
+        }
+        this.closeFilterOpMenu();
+    }
+    closeFilterOpMenu() {
+        this.frMenuOverlayRef?.detach();
+        this.frMenuColumn.set(null);
+    }
+    // --- Header filter (dxo-header-filter) -------------------------------------------------------
+    headerFilterEnabled = computed(() => this.headerFilter()?.visible() === true || this.headerFilterOptions()?.visible === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerFilterEnabled" }] : /* istanbul ignore next */ []));
+    hasHeaderFilter(col) {
+        return this.effectiveHeaderFilters().has(col.dataField());
+    }
+    /** Whether this column shows a funnel — the grid has header filtering on AND the column opts in.
+        Named because the header cell asks three times (the caption's indicator class, the wrapper's
+        existence, the funnel itself) and the group-panel chip asks again. */
+    headerFilterVisible(col) {
+        return this.headerFilterEnabled() && col.allowHeaderFiltering();
+    }
+    /**
+     * Normalizes a raw cell value to its header-filter key: blank-ish → the `(Blanks)` sentinel,
+     * date columns → a `yyyy-MM-dd` day key (the tree's leaf unit), else the raw value.
+     */
+    hfKey(col, raw) {
+        return nxeHfKey(raw, col.dataType() === 'date');
+    }
+    /** dx does NOT cascade header-filter lists for client arrays (bright audit V6). */
+    hfBaseRows() {
+        return (this.dataSource() ?? []);
+    }
+    hfBoolLabel(col, raw) {
+        if (col.lookup()) {
+            return null;
+        }
+        if (raw === true) {
+            return 'Yes';
+        }
+        if (raw === false || col.dataType() === 'boolean') {
+            return 'No';
+        }
+        return null;
+    }
+    /** (Select All) checkbox state — spec-pinned alias of the model's computed
+        ((Select All) operates on the VISIBLE keys: dx scopes it to the search). */
+    hfAllChecked = this.hf.allChecked;
+    /** Default true — see NxeHeaderFilterComponent.searchEnabled. The two branches have to agree,
+        since a grid can be configured either by the content child or by the object input. */
+    hfSearchEnabled() {
+        return (this.headerFilter()?.searchEnabled() ??
+            this.headerFilterOptions()?.search?.enabled ??
+            true);
+    }
+    openHeaderFilter(col, event) {
+        event.stopPropagation();
+        if (this.drag.consumeClick()) {
+            return; // the funnel was merely the landing spot of an aborted drag
+        }
+        // No applied filter → everything checked; else start from the applied set.
+        this.hf.open(col, this.effectiveHeaderFilters().get(col.dataField()));
+        this.hfOverlayRef?.dispose();
+        this.hfOverlayRef = openNxeHeaderFilterOverlay({
+            overlay: this.overlay,
+            viewContainerRef: this.viewContainerRef,
+            origin: event.currentTarget,
+            model: this.hf,
+            searchEnabled: () => this.hfSearchEnabled(),
+            onApply: () => this.hfApply(),
+            onClose: () => this.closeHeaderFilter(),
+        });
+    }
+    hfApply() {
+        const col = this.hf.column();
+        if (col) {
+            const next = new Map(this.hfOverride());
+            // Everything checked (or nothing to choose from) = explicit "no filter" (`null` so a
+            // declarative seed can't resurrect); else the allowed-key set (empty = empty grid).
+            next.set(col.dataField(), this.hf.applyResult());
+            this.hfOverride.set(next);
+        }
+        this.closeHeaderFilter();
+    }
+    closeHeaderFilter() {
+        this.hfOverlayRef?.detach();
+        this.hf.close();
+    }
+    setColumnVisible(field, visible) {
+        this.visibilityOverride.update((m) => {
+            const next = new Map(m);
+            next.set(field, visible);
+            return next;
+        });
+    }
+    compare(a, b) {
+        if (a == null && b == null)
+            return 0;
+        if (a == null)
+            return -1;
+        if (b == null)
+            return 1;
+        if (typeof a === 'number' && typeof b === 'number')
+            return a - b;
+        const da = parseDateValue(a);
+        const db = parseDateValue(b);
+        if (da && db)
+            return da.toMillis() - db.toMillis();
+        return String(a).localeCompare(String(b));
+    }
+    ngOnDestroy() {
+        this.drag.destroy();
+        this.resize.destroy();
+        this.hfOverlayRef?.dispose();
+        this.frMenuOverlayRef?.dispose();
+        this.resizeObserver?.disconnect();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeDataGridComponent, isStandalone: true, selector: "nxe-data-grid, nxe-tree-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, keyExpr: { classPropertyName: "keyExpr", publicName: "keyExpr", isSignal: true, isRequired: false, transformFunction: null }, hoverStateEnabledInput: { classPropertyName: "hoverStateEnabledInput", publicName: "hoverStateEnabled", isSignal: true, isRequired: false, transformFunction: null }, showColumnLinesInput: { classPropertyName: "showColumnLinesInput", publicName: "showColumnLines", isSignal: true, isRequired: false, transformFunction: null }, showRowLinesInput: { classPropertyName: "showRowLinesInput", publicName: "showRowLines", isSignal: true, isRequired: false, transformFunction: null }, showBordersInput: { classPropertyName: "showBordersInput", publicName: "showBorders", isSignal: true, isRequired: false, transformFunction: null }, wordWrapEnabledInput: { classPropertyName: "wordWrapEnabledInput", publicName: "wordWrapEnabled", isSignal: true, isRequired: false, transformFunction: null }, columnAutoWidthInput: { classPropertyName: "columnAutoWidthInput", publicName: "columnAutoWidth", isSignal: true, isRequired: false, transformFunction: null }, rowAlternationEnabledInput: { classPropertyName: "rowAlternationEnabledInput", publicName: "rowAlternationEnabled", isSignal: true, isRequired: false, transformFunction: null }, remoteOperations: { classPropertyName: "remoteOperations", publicName: "remoteOperations", isSignal: true, isRequired: false, transformFunction: null }, syncLookupFilterValues: { classPropertyName: "syncLookupFilterValues", publicName: "syncLookupFilterValues", isSignal: true, isRequired: false, transformFunction: null }, columnMinWidth: { classPropertyName: "columnMinWidth", publicName: "columnMinWidth", isSignal: true, isRequired: false, transformFunction: null }, noDataTextInput: { classPropertyName: "noDataTextInput", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null }, loadPanel: { classPropertyName: "loadPanel", publicName: "loadPanel", isSignal: true, isRequired: false, transformFunction: null }, paging: { classPropertyName: "paging", publicName: "paging", isSignal: true, isRequired: false, transformFunction: null }, filterRow: { classPropertyName: "filterRow", publicName: "filterRow", isSignal: true, isRequired: false, transformFunction: null }, headerFilterOptions: { classPropertyName: "headerFilterOptions", publicName: "headerFilter", isSignal: true, isRequired: false, transformFunction: null }, groupingOptions: { classPropertyName: "groupingOptions", publicName: "grouping", isSignal: true, isRequired: false, transformFunction: null }, groupPanelOptions: { classPropertyName: "groupPanelOptions", publicName: "groupPanel", isSignal: true, isRequired: false, transformFunction: null }, scrolling: { classPropertyName: "scrolling", publicName: "scrolling", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, allowColumnResizing: { classPropertyName: "allowColumnResizing", publicName: "allowColumnResizing", isSignal: true, isRequired: false, transformFunction: null }, columnResizingMode: { classPropertyName: "columnResizingMode", publicName: "columnResizingMode", isSignal: true, isRequired: false, transformFunction: null }, allowColumnReordering: { classPropertyName: "allowColumnReordering", publicName: "allowColumnReordering", isSignal: true, isRequired: false, transformFunction: null }, repaintChangesOnly: { classPropertyName: "repaintChangesOnly", publicName: "repaintChangesOnly", isSignal: true, isRequired: false, transformFunction: null }, showColumnHeaders: { classPropertyName: "showColumnHeaders", publicName: "showColumnHeaders", isSignal: true, isRequired: false, transformFunction: null }, parentIdExpr: { classPropertyName: "parentIdExpr", publicName: "parentIdExpr", isSignal: true, isRequired: false, transformFunction: null }, dataStructure: { classPropertyName: "dataStructure", publicName: "dataStructure", isSignal: true, isRequired: false, transformFunction: null }, rootValue: { classPropertyName: "rootValue", publicName: "rootValue", isSignal: true, isRequired: false, transformFunction: null }, autoExpandAll: { classPropertyName: "autoExpandAll", publicName: "autoExpandAll", isSignal: true, isRequired: false, transformFunction: null }, expandedRowKeys: { classPropertyName: "expandedRowKeys", publicName: "expandedRowKeys", isSignal: true, isRequired: false, transformFunction: null }, selectedRowKeys: { classPropertyName: "selectedRowKeys", publicName: "selectedRowKeys", isSignal: true, isRequired: false, transformFunction: null }, mergeColumns: { classPropertyName: "mergeColumns", publicName: "mergeColumns", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedRowKeys: "expandedRowKeysChange", selectedRowKeys: "selectedRowKeysChange", onSelectionChanged: "onSelectionChanged", onRowClick: "onRowClick", onContentReady: "onContentReady", onOptionChanged: "onOptionChanged", onCellPrepared: "onCellPrepared", onRowPrepared: "onRowPrepared", onRowExpanding: "onRowExpanding", onRowExpanded: "onRowExpanded" }, host: { classAttribute: "nxe-widget nxe-data-grid" }, queries: [{ propertyName: "declaredColumns", predicate: NxeColumnComponent, isSignal: true }, { propertyName: "templates", predicate: NxeTemplateDirective, isSignal: true }, { propertyName: "selection", first: true, predicate: NxeSelectionComponent, descendants: true, isSignal: true }, { propertyName: "headerFilter", first: true, predicate: NxeHeaderFilterComponent, descendants: true, isSignal: true }, { propertyName: "grouping", first: true, predicate: NxeGroupingComponent, descendants: true, isSignal: true }, { propertyName: "groupPanel", first: true, predicate: NxeGroupPanelComponent, descendants: true, isSignal: true }, { propertyName: "summaryCmp", first: true, predicate: NxeSummaryComponent, descendants: true, isSignal: true }, { propertyName: "pagingCmp", first: true, predicate: NxePagingComponent, descendants: true, isSignal: true }, { propertyName: "pagerCmp", first: true, predicate: NxePagerComponent, descendants: true, isSignal: true }, { propertyName: "editingCmp", first: true, predicate: NxeEditingComponent, descendants: true, isSignal: true }, { propertyName: "filterRowCmp", first: true, predicate: NxeFilterRowComponent, descendants: true, isSignal: true }, { propertyName: "masterDetail", first: true, predicate: NxeMasterDetailComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "frMenuPanel", first: true, predicate: ["frOpMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"dx-widget dx-datagrid\" [class.dx-datagrid-borders]=\"showBorders()\">\r\n    <div class=\"dx-gridbase-container\">\r\n        @if (groupPanelVisible()) {\r\n            <div class=\"dx-datagrid-header-panel\">\r\n                <div class=\"dx-datagrid-group-panel\">\r\n                    @if (groupColumns().length === 0) {\r\n                        <span class=\"dx-group-panel-message\">Drag a column header here to group by that column</span>\r\n                    } @else {\r\n                        @for (col of groupColumns(); track col.dataField(); let li = $index) {\r\n                            <!-- dx chip DOM: caption + sort indicator + header-filter button (bright audit) -->\r\n                            <div\r\n                                class=\"dx-group-panel-item dx-datagrid-action dx-datagrid-drag-action\"\r\n                                tabindex=\"0\"\r\n                                (pointerdown)=\"onChipPointerDown(col, li, $event)\"\r\n                                (click)=\"onChipClick(col)\">{{ col.caption() }}<div class=\"dx-column-indicators\" role=\"presentation\"><span\r\n                                        class=\"dx-sort\"\r\n                                        [class.dx-sort-up]=\"groupDir(col) === 'asc'\"\r\n                                        [class.dx-sort-down]=\"groupDir(col) === 'desc'\"></span>@if (headerFilterVisible(col)) {<span\r\n                                        class=\"nxe-grid-hf-icon\"\r\n                                        [class.nxe-hf-active]=\"hasHeaderFilter(col)\"\r\n                                        (pointerdown)=\"$event.stopPropagation()\"\r\n                                        (click)=\"openHeaderFilter(col, $event)\"></span>}</div></div>\r\n                        }\r\n                    }\r\n                </div>\r\n            </div>\r\n        }\r\n        <div\r\n            class=\"dx-datagrid-rowsview dx-datagrid-after-headers\"\r\n            [class.dx-datagrid-nowrap]=\"!wordWrapEnabled()\">\r\n            <div class=\"dx-datagrid-content\">\r\n                <table class=\"dx-datagrid-table dx-datagrid-table-fixed\" [style.width]=\"tableWidthStyle()\">\r\n                    <colgroup>\r\n                        @for (i of indents(groupLevelCount()); track i) {\r\n                            <col style=\"width: 30px\" />\r\n                        }\r\n                        @if (masterDetailEnabled()) {\r\n                            <col style=\"width: 30px\" />\r\n                        }\r\n                        @if (showCheckboxes()) {\r\n                            <col style=\"width: 40px\" />\r\n                        }\r\n                        @for (col of visibleColumns(); track $index; let ci = $index) {\r\n                            <col [style.width]=\"effectiveColWidth(col, ci)\" />\r\n                        }\r\n                        @if (rowEditCommandVisible()) {\r\n                            <col style=\"width: 100px\" />\r\n                        }\r\n                    </colgroup>\r\n                    <thead class=\"dx-datagrid-headers\">\r\n                        <!-- Bands add header rows: a band cell spans its visible leaves with\r\n                             colspan, and a leaf above the bottom row spans down with rowspan.\r\n                             That is dx's own banded markup, and it keeps the LAST header row\r\n                             all-leaves - which the auto-width, resize and drag code relies on. -->\r\n                        @for (hrow of headerRows(); track $index; let hi = $index) {\r\n                            <tr class=\"dx-row dx-header-row\" [class.dx-column-lines]=\"showColumnLines()\">\r\n                                @if (hi === 0) {\r\n                                    @for (i of indents(groupLevelCount()); track i) {\r\n                                        <td\r\n                                            class=\"dx-command-expand dx-datagrid-group-space dx-cell-focus-disabled\"\r\n                                            [attr.rowspan]=\"headerDepth() > 1 ? headerDepth() : null\"></td>\r\n                                    }\r\n                                    @if (masterDetailEnabled()) {\r\n                                        <td\r\n                                            class=\"dx-command-expand\"\r\n                                            [attr.rowspan]=\"headerDepth() > 1 ? headerDepth() : null\"></td>\r\n                                    }\r\n                                    @if (showCheckboxes()) {\r\n                                        <td\r\n                                            class=\"dx-command-select\"\r\n                                            [attr.rowspan]=\"headerDepth() > 1 ? headerDepth() : null\">\r\n                                            @if (selectionMode() === 'multiple') {\r\n                                                <span\r\n                                                    class=\"dx-select-checkbox nxe-grid-checkbox\"\r\n                                                    [class.nxe-checked]=\"allSelected()\"\r\n                                                    [class.nxe-indeterminate]=\"someSelected() && !allSelected()\"\r\n                                                    (click)=\"toggleSelectAll($event)\">\r\n                                                    <span class=\"nxe-grid-checkbox-box\"></span>\r\n                                                </span>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n                                }\r\n                                @for (cell of hrow; track $index) {\r\n                                    @if (cell.isBand) {\r\n                                        <td\r\n                                            class=\"nxe-band-cell\"\r\n                                            [class]=\"cell.column.cssClass()\"\r\n                                            [attr.colspan]=\"cell.colspan > 1 ? cell.colspan : null\"\r\n                                            [style.text-align]=\"cell.column.alignment() ?? 'center'\">\r\n                                            <div class=\"dx-datagrid-text-content\">{{ cell.column.caption() }}</div>\r\n                                        </td>\r\n                                    } @else {\r\n                                        <td\r\n                                            [class]=\"cell.column.cssClass()\"\r\n                                            [attr.aria-colindex]=\"leadCellCount() + cell.leafIndex + 1\"\r\n                                            [attr.rowspan]=\"cell.rowspan > 1 ? cell.rowspan : null\"\r\n                                            [style.text-align]=\"align(cell.column)\"\r\n                                            [class.dx-cell-focus-disabled]=\"!cell.column.allowSorting()\"\r\n                                            [class.dx-datagrid-drag-action]=\"headerDraggable(cell.column)\"\r\n                                            (pointerdown)=\"onHeaderPointerDown(cell.column, cell.leafIndex, $event)\"\r\n                                            (click)=\"onHeaderClick(cell.column)\">\r\n                                            <!-- Both indicator classes are load-bearing, not decorative: they are what\r\n                                                 gate dx's caption max-widths (`.dx-header-row .dx-sort-indicator\r\n                                                 {max-width:calc(100% - 17px)}` and the .dx-header-filter-indicator\r\n                                                 family), i.e. the 17px-per-indicator budget that stops a long\r\n                                                 caption from colliding with the arrow and the funnel. -->\r\n                                            <div\r\n                                                class=\"dx-datagrid-text-content\"\r\n                                                [class.dx-sort-indicator]=\"!!sortDir(cell.column)\"\r\n                                                [class.dx-header-filter-indicator]=\"headerFilterVisible(cell.column)\">\r\n                                                {{ cell.column.caption() }}\r\n                                            </div>\r\n                                            <!-- dx wraps the arrow and the funnel in one indicator block, and the\r\n                                                 group-panel chip below already did. Matching it here means the two\r\n                                                 places share a single set of metrics instead of drifting. -->\r\n                                            @if (sortDir(cell.column) || headerFilterVisible(cell.column)) {\r\n                                                <div class=\"dx-column-indicators\" role=\"presentation\">\r\n                                                    @if (sortDir(cell.column); as dir) {\r\n                                                        <span\r\n                                                            class=\"dx-sort\"\r\n                                                            [class.dx-sort-up]=\"dir === 'asc'\"\r\n                                                            [class.dx-sort-down]=\"dir === 'desc'\"></span>\r\n                                                    }\r\n                                                    @if (headerFilterVisible(cell.column)) {\r\n                                                        <span\r\n                                                            class=\"nxe-grid-hf-icon\"\r\n                                                            [class.nxe-hf-active]=\"hasHeaderFilter(cell.column)\"\r\n                                                            (click)=\"openHeaderFilter(cell.column, $event)\"></span>\r\n                                                    }\r\n                                                </div>\r\n                                            }\r\n                                            @if (resizeHandleVisible(cell.column, cell.leafIndex)) {\r\n                                                <span\r\n                                                    class=\"nxe-col-resize-handle\"\r\n                                                    (pointerdown)=\"startColumnResize(cell.column, cell.leafIndex, $event)\"></span>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n                                }\r\n                                @if (hi === 0 && rowEditCommandVisible()) {\r\n                                    <td\r\n                                        class=\"dx-command-edit\"\r\n                                        [attr.rowspan]=\"headerDepth() > 1 ? headerDepth() : null\"></td>\r\n                                }\r\n                            </tr>\r\n                        }\r\n                        @if (filterRowVisible()) {\r\n                            <tr class=\"dx-row dx-datagrid-filter-row\">\r\n                                @for (i of indents(groupLevelCount()); track i) {\r\n                                    <td class=\"dx-command-expand dx-datagrid-group-space\"></td>\r\n                                }\r\n                                @if (masterDetailEnabled()) {\r\n                                    <td class=\"dx-command-expand\"></td>\r\n                                }\r\n                                @if (showCheckboxes()) {\r\n                                    <td class=\"dx-command-select\"></td>\r\n                                }\r\n                                @for (col of visibleColumns(); track $index) {\r\n                                    <!-- dx filter cell: td.dx-editor-cell > .dx-editor-with-menu >\r\n                                         [.dx-menu op chooser][typed editor] (dx-compat.css contract) -->\r\n                                    <td class=\"dx-editor-cell\" [class]=\"col.cssClass()\">\r\n                                        @if (col.allowFiltering()) {\r\n                                            @switch (frEditorKind(col)) {\r\n                                                @case ('lookup') {\r\n                                                    <select\r\n                                                        class=\"dx-texteditor-input nxe-grid-filter-input\"\r\n                                                        [value]=\"frText(col)\"\r\n                                                        (click)=\"$event.stopPropagation()\"\r\n                                                        (change)=\"setFilterRowText(col, $any($event.target).value)\">\r\n                                                        <option value=\"\">(All)</option>\r\n                                                        @for (item of col.lookup()!.dataSource; track $index) {\r\n                                                            <option [value]=\"item[col.lookup()!.valueExpr ?? 'lovCode']\">\r\n                                                                {{ item[col.lookup()!.displayExpr ?? 'lovName'] }}\r\n                                                            </option>\r\n                                                        }\r\n                                                    </select>\r\n                                                }\r\n                                                @case ('boolean') {\r\n                                                    <select\r\n                                                        class=\"dx-texteditor-input nxe-grid-filter-input\"\r\n                                                        [value]=\"frText(col)\"\r\n                                                        (click)=\"$event.stopPropagation()\"\r\n                                                        (change)=\"setFilterRowText(col, $any($event.target).value)\">\r\n                                                        <option value=\"\">(All)</option>\r\n                                                        <option value=\"true\">true</option>\r\n                                                        <option value=\"false\">false</option>\r\n                                                    </select>\r\n                                                }\r\n                                                @default {\r\n                                                    <div class=\"dx-editor-with-menu\">\r\n                                                        <div class=\"dx-menu dx-menu-base\">\r\n                                                            <ul class=\"dx-menu-horizontal\">\r\n                                                                <li>\r\n                                                                    <div\r\n                                                                        class=\"dx-menu-item\"\r\n                                                                        title=\"Filter operation\"\r\n                                                                        (click)=\"openFilterOpMenu(col, $event)\">\r\n                                                                        <div class=\"dx-menu-item-content\">\r\n                                                                            <span class=\"dx-icon\" [class]=\"frOpIconClass(col)\"></span>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </li>\r\n                                                            </ul>\r\n                                                        </div>\r\n                                                        <input\r\n                                                            class=\"dx-texteditor-input nxe-grid-filter-input\"\r\n                                                            [type]=\"frEditorKind(col) === 'date' ? 'date' : 'text'\"\r\n                                                            [attr.inputmode]=\"frEditorKind(col) === 'number' ? 'decimal' : null\"\r\n                                                            [value]=\"frText(col)\"\r\n                                                            (input)=\"setFilterRowText(col, $any($event.target).value)\"\r\n                                                            (click)=\"$event.stopPropagation()\" />\r\n                                                        @if (frOp(col) === 'between') {\r\n                                                            <input\r\n                                                                class=\"dx-texteditor-input nxe-grid-filter-input nxe-fr-second\"\r\n                                                                [type]=\"frEditorKind(col) === 'date' ? 'date' : 'text'\"\r\n                                                                [attr.inputmode]=\"frEditorKind(col) === 'number' ? 'decimal' : null\"\r\n                                                                [value]=\"frText2(col)\"\r\n                                                                (input)=\"setFilterRowText(col, $any($event.target).value, true)\"\r\n                                                                (click)=\"$event.stopPropagation()\" />\r\n                                                        }\r\n                                                    </div>\r\n                                                }\r\n                                            }\r\n                                        }\r\n                                    </td>\r\n                                }\r\n                                @if (rowEditCommandVisible()) {\r\n                                    <td class=\"dx-command-edit\"></td>\r\n                                }\r\n                            </tr>\r\n                        }\r\n                    </thead>\r\n                    <tbody>\r\n                        @for (item of renderRows(); track $index; let ri = $index) {\r\n                            @if (item.kind === 'group') {\r\n                                <!-- dx group-row anatomy (bright audit): [indent cells][expand chevron\r\n                                     cell][dx-group-cell colspan][alignByColumn summary cells] -->\r\n                                <tr\r\n                                    class=\"dx-row dx-group-row\"\r\n                                    [class.dx-column-lines]=\"showColumnLines()\"\r\n                                    [attr.aria-roledescription]=\"item.collapsed ? 'Collapsed row' : 'Expanded row'\">\r\n                                    @for (i of indents(item.level); track i) {\r\n                                        <td class=\"dx-command-expand dx-datagrid-group-space\"></td>\r\n                                    }\r\n                                    <td\r\n                                        class=\"dx-command-expand dx-datagrid-group-space dx-datagrid-expand dx-selection-disabled\"\r\n                                        [attr.aria-label]=\"item.collapsed ? 'Expand' : 'Collapse'\"\r\n                                        (click)=\"toggleGroup(item.groupKey)\">\r\n                                        <div\r\n                                            [class.dx-datagrid-group-opened]=\"!item.collapsed\"\r\n                                            [class.dx-datagrid-group-closed]=\"item.collapsed\"></div>\r\n                                    </td>\r\n                                    <td class=\"dx-group-cell\" [attr.colspan]=\"groupCellColspan(item)\">\r\n                                        @if (templateFor(item.column.groupCellTemplate()); as gtpl) {\r\n                                            <ng-container\r\n                                                [ngTemplateOutlet]=\"gtpl\"\r\n                                                [ngTemplateOutletContext]=\"groupCellContext(item)\" />\r\n                                        } @else {\r\n                                            {{ item.column.caption() }}: {{ item.text }}{{ item.captionSuffix }}\r\n                                        }\r\n                                    </td>\r\n                                    @for (col of groupRowTrailing(item); track col.dataField()) {\r\n                                        <td class=\"dx-datagrid-summary-item\" [style.text-align]=\"align(col)\">\r\n                                            {{ item.alignedSums.get(col.dataField()) || '' }}\r\n                                        </td>\r\n                                    }\r\n                                    @if (groupRowTrailing(item).length && rowEditCommandVisible()) {\r\n                                        <td class=\"dx-command-edit\"></td>\r\n                                    }\r\n                                </tr>\r\n                            } @else if (item.kind === 'groupFooter') {\r\n                                <tr\r\n                                    class=\"dx-row dx-group-footer-row nxe-group-footer-row\"\r\n                                    [class]=\"'nxe-group-footer-level-' + item.level\">\r\n                                    @for (i of indents(groupLevelCount()); track i) {\r\n                                        <td class=\"dx-datagrid-group-space\"></td>\r\n                                    }\r\n                                    @if (masterDetailEnabled()) {\r\n                                        <td class=\"dx-command-expand\"></td>\r\n                                    }\r\n                                    @if (showCheckboxes()) {\r\n                                        <td class=\"dx-command-select\"></td>\r\n                                    }\r\n                                    @for (col of visibleColumns(); track col.dataField()) {\r\n                                        <td class=\"dx-datagrid-summary-item\" [style.text-align]=\"align(col)\">\r\n                                            {{ item.sums.get(col.dataField()) || '' }}\r\n                                        </td>\r\n                                    }\r\n                                    @if (rowEditCommandVisible()) {\r\n                                        <td class=\"dx-command-edit\"></td>\r\n                                    }\r\n                                </tr>\r\n                            } @else {\r\n                                <tr\r\n                                    class=\"dx-row dx-data-row\"\r\n                                    [class]=\"rowClassFor(item.row)\"\r\n                                    [attr.aria-rowindex]=\"item.rowIndex + 1\"\r\n                                    [class.dx-row-lines]=\"showRowLines()\"\r\n                                    [class.dx-column-lines]=\"showColumnLines()\"\r\n                                    [class.dx-row-alt]=\"rowAlternationEnabled() && item.rowIndex % 2 === 1\"\r\n                                    [class.dx-selection]=\"isSelected(item.row)\"\r\n                                    [class.dx-state-hover]=\"isHovered(item.rowIndex)\"\r\n                                    [class.dx-edit-row]=\"isRowEditing(item.row)\"\r\n                                    (mouseenter)=\"onRowEnter(item.rowIndex)\"\r\n                                    (mouseleave)=\"onRowLeave()\"\r\n                                    (click)=\"onDataRowClick(item.row, item.rowIndex)\">\r\n                                    @for (i of indents(groupLevelCount()); track i) {\r\n                                        <td class=\"dx-datagrid-group-space\"></td>\r\n                                    }\r\n                                    @if (masterDetailEnabled()) {\r\n                                        <td class=\"dx-command-expand dx-datagrid-expand\">\r\n                                            <span\r\n                                                class=\"nxe-detail-expander\"\r\n                                                [class.nxe-expanded]=\"isDetailExpanded(item.row)\"\r\n                                                (click)=\"toggleDetail(item.row, $event)\"></span>\r\n                                        </td>\r\n                                    }\r\n                                    @if (showCheckboxes()) {\r\n                                        <td class=\"dx-command-select\">\r\n                                            <span\r\n                                                class=\"dx-select-checkbox nxe-grid-checkbox\"\r\n                                                [class.nxe-checked]=\"isSelected(item.row)\"\r\n                                                (click)=\"onCheckboxClick(item.row, $event)\">\r\n                                                <span class=\"nxe-grid-checkbox-box\"></span>\r\n                                            </span>\r\n                                        </td>\r\n                                    }\r\n                                    @for (col of visibleColumns(); track $index; let ci = $index) {\r\n                                        @if (!isMergeSuppressed(ri, col)) {\r\n                                            <td\r\n                                                [class]=\"col.cssClass()\"\r\n                                                [attr.aria-colindex]=\"leadCellCount() + ci + 1\"\r\n                                                [attr.aria-roledescription]=\"\r\n                                                    editableCell(col) && (cellEditingEnabled() || rowEditingEnabled())\r\n                                                        ? 'Editable'\r\n                                                        : null\r\n                                                \"\r\n                                                [style.text-align]=\"align(col)\"\r\n                                                [style.padding-left.px]=\"treeMode && ci === 0 ? (item.level || 0) * 18 + 4 : null\"\r\n                                                [attr.rowspan]=\"mergeSpan(ri, col)\"\r\n                                                [class.dx-editor-cell]=\"isEditingCell(item.row, col) || (isRowEditing(item.row) && editableCell(col))\"\r\n                                                (click)=\"onCellClick(item.row, col, $event)\"\r\n                                                (focusout)=\"onEditCellFocusOut(item.row, col, $event)\">\r\n                                                @if (treeMode && ci === 0) {\r\n                                                    @if (item.hasChildren) {\r\n                                                        <span\r\n                                                            class=\"nxe-tree-expander\"\r\n                                                            [class.nxe-collapsed]=\"!item.expanded\"\r\n                                                            (click)=\"toggleTreeNode(item.nodeKey, $event)\"></span>\r\n                                                    } @else {\r\n                                                        <span class=\"nxe-tree-expander-stub\"></span>\r\n                                                    }\r\n                                                }\r\n                                                @if (isEditingCell(item.row, col) || (isRowEditing(item.row) && editableCell(col))) {\r\n                                                    @if (templateFor(col.editCellTemplate()); as etpl) {\r\n                                                        <ng-container\r\n                                                            [ngTemplateOutlet]=\"etpl\"\r\n                                                            [ngTemplateOutletContext]=\"editCellContext(item.row, item.rowIndex, ci, col)\" />\r\n                                                    } @else if (isEditingCell(item.row, col)) {\r\n                                                        <ng-container\r\n                                                            [ngTemplateOutlet]=\"cellEditor\"\r\n                                                            [ngTemplateOutletContext]=\"{ row: item.row, col: col, mode: 'cell' }\" />\r\n                                                    } @else {\r\n                                                        <ng-container\r\n                                                            [ngTemplateOutlet]=\"cellEditor\"\r\n                                                            [ngTemplateOutletContext]=\"{ row: item.row, col: col, mode: 'row' }\" />\r\n                                                    }\r\n                                                } @else if (templateFor(col.cellTemplate()); as tpl) {\r\n                                                    <ng-container\r\n                                                        [ngTemplateOutlet]=\"tpl\"\r\n                                                        [ngTemplateOutletContext]=\"cellContext(item.row, item.rowIndex, ci, col)\" />\r\n                                                } @else if (isBooleanCell(col, item.row)) {\r\n                                                    <!-- dx parity: boolean cells render a read-only dx-style checkbox, not \"true\"/\"false\" -->\r\n                                                    <span\r\n                                                        class=\"nxe-grid-checkbox nxe-grid-checkbox-readonly\"\r\n                                                        [class.nxe-checked]=\"getRaw(item.row, col.dataField()) === true\">\r\n                                                        <span class=\"nxe-grid-checkbox-box\"></span>\r\n                                                    </span>\r\n                                                } @else {\r\n                                                    {{ cellText(col, item.row) }}\r\n                                                }\r\n                                            </td>\r\n                                        }\r\n                                    }\r\n                                    @if (rowEditCommandVisible()) {\r\n                                        <td class=\"dx-command-edit dx-datagrid-drag-action\">\r\n                                            @if (isRowEditing(item.row)) {\r\n                                                <a class=\"dx-link dx-link-save\" (click)=\"saveRowEdit(item.row, $event)\">Save</a>\r\n                                                <a class=\"dx-link dx-link-cancel\" (click)=\"cancelRowEdit($event)\">Cancel</a>\r\n                                            } @else {\r\n                                                <a class=\"dx-link dx-link-edit\" (click)=\"startRowEdit(item.row, $event)\">Edit</a>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n                                </tr>\r\n                                @if (masterDetailEnabled() && isDetailExpanded(item.row)) {\r\n                                    <tr class=\"dx-row dx-master-detail-row\">\r\n                                        <td [attr.colspan]=\"allColCount()\">\r\n                                            @if (detailTemplate(); as tpl) {\r\n                                                <ng-container\r\n                                                    [ngTemplateOutlet]=\"tpl\"\r\n                                                    [ngTemplateOutletContext]=\"detailContext(item.row, item.rowIndex)\" />\r\n                                            }\r\n                                        </td>\r\n                                    </tr>\r\n                                }\r\n                            }\r\n                        }\r\n                        <tr class=\"dx-row dx-freespace-row\">\r\n                            <td [attr.colspan]=\"allColCount()\"></td>\r\n                        </tr>\r\n                    </tbody>\r\n                    @if (hasTotalFooter()) {\r\n                        <tfoot class=\"dx-datagrid-total-footer\">\r\n                            <tr class=\"dx-row\">\r\n                                @for (i of indents(groupLevelCount()); track i) {\r\n                                    <td class=\"dx-datagrid-group-space\"></td>\r\n                                }\r\n                                @if (masterDetailEnabled()) {\r\n                                    <td class=\"dx-command-expand\"></td>\r\n                                }\r\n                                @if (showCheckboxes()) {\r\n                                    <td class=\"dx-command-select\"></td>\r\n                                }\r\n                                @for (col of visibleColumns(); track col.dataField()) {\r\n                                    <td class=\"dx-datagrid-summary-item\" [style.text-align]=\"align(col)\">\r\n                                        {{ totalSums().get(col.dataField()) || '' }}\r\n                                    </td>\r\n                                }\r\n                                @if (rowEditCommandVisible()) {\r\n                                    <td class=\"dx-command-edit\"></td>\r\n                                }\r\n                            </tr>\r\n                        </tfoot>\r\n                    }\r\n                </table>\r\n            </div>\r\n\r\n            @if (displayRows().length === 0 && !loading()) {\r\n                <div class=\"dx-datagrid-nodata\">{{ noDataText() }}</div>\r\n            }\r\n            @if (loading()) {\r\n                <div class=\"dx-datagrid-loadpanel\"><span class=\"nxe-grid-spinner\"></span></div>\r\n            }\r\n        </div>\r\n\r\n        @if (pagerVisible()) {\r\n            <div class=\"dx-datagrid-pager dx-pager nxe-grid-pager\">\r\n                @if (pagerCmp()?.showPageSizeSelector() && pageSizes().length > 1) {\r\n                    <select class=\"nxe-pager-size\" (change)=\"onPageSizeSelect($event)\">\r\n                        @for (s of pageSizes(); track s) {\r\n                            <option [value]=\"s\" [selected]=\"s === effectivePageSize()\">{{ s }}</option>\r\n                        }\r\n                    </select>\r\n                }\r\n                <div class=\"nxe-pager-pages\">\r\n                    @if (pagerCmp()?.showNavigationButtons()) {\r\n                        <button type=\"button\" class=\"nxe-pager-nav\" [disabled]=\"pageIndex() === 0\" (click)=\"prevPage()\">\u2039</button>\r\n                    }\r\n                    @for (p of pageNumbers(); track p) {\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"nxe-pager-page\"\r\n                            [class.nxe-active]=\"p === pageIndex()\"\r\n                            (click)=\"goToPage(p)\">\r\n                            {{ p + 1 }}\r\n                        </button>\r\n                    }\r\n                    @if (pagerCmp()?.showNavigationButtons()) {\r\n                        <button type=\"button\" class=\"nxe-pager-nav\" [disabled]=\"pageIndex() >= pageCount() - 1\" (click)=\"nextPage()\">\u203A</button>\r\n                    }\r\n                </div>\r\n                @if (pagerCmp()?.showInfo()) {\r\n                    <span class=\"nxe-pager-info\">{{ pageInfo() }}</span>\r\n                }\r\n            </div>\r\n        }\r\n    </div>\r\n</div>\r\n\r\n<!-- Inline cell/row editor (dxo-editing, orbit addition). `mode: 'cell'` commits on blur/Enter;\r\n     `mode: 'row'` buffers on input until the command column's Save. -->\r\n<ng-template #cellEditor let-row=\"row\" let-col=\"col\" let-mode=\"mode\">\r\n    @if (col.lookup(); as lookup) {\r\n        <select\r\n            class=\"dx-texteditor-input nxe-grid-cell-editor\"\r\n            [value]=\"editorInputValue(row, col)\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            (change)=\"\r\n                mode === 'cell'\r\n                    ? commitCellEdit(row, col, $any($event.target).value)\r\n                    : bufferRowEdit(col, $any($event.target).value)\r\n            \">\r\n            <option value=\"\"></option>\r\n            @for (item of lookup.dataSource; track $index) {\r\n                <option [value]=\"item[lookup.valueExpr ?? 'lovCode']\">\r\n                    {{ item[lookup.displayExpr ?? 'lovName'] }}\r\n                </option>\r\n            }\r\n        </select>\r\n    } @else if (col.dataType() === 'boolean') {\r\n        <input\r\n            type=\"checkbox\"\r\n            class=\"nxe-grid-cell-editor-check\"\r\n            [checked]=\"!!editorInputValue(row, col) && editorInputValue(row, col) !== 'false'\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            (change)=\"\r\n                mode === 'cell'\r\n                    ? commitCellEdit(row, col, $any($event.target).checked)\r\n                    : bufferRowEdit(col, $any($event.target).checked)\r\n            \" />\r\n    } @else {\r\n        <input\r\n            type=\"text\"\r\n            class=\"dx-texteditor-input nxe-grid-cell-editor\"\r\n            [value]=\"editorInputValue(row, col)\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            (keydown.enter)=\"mode === 'cell' && commitCellEdit(row, col, $any($event.target).value)\"\r\n            (keydown.escape)=\"mode === 'cell' && cancelCellEdit()\"\r\n            (blur)=\"mode === 'cell' && commitCellEdit(row, col, $any($event.target).value)\"\r\n            (input)=\"mode === 'row' && bufferRowEdit(col, $any($event.target).value)\" />\r\n    }\r\n</ng-template>\r\n\r\n<!-- The header-filter popup (#hfPanel) moved to nxe-header-filter-panel.component.html \u2014\r\n     openHeaderFilter attaches it through openNxeHeaderFilterOverlay (pivot parity Phase 3a). -->\r\n\r\n<!-- Filter-row operation-chooser dropdown (dx filter menu) -->\r\n<ng-template #frOpMenu>\r\n    <div class=\"nxe-fr-op-menu dx-datagrid\">\r\n        @for (item of frMenuOps(); track item.op) {\r\n            <div\r\n                class=\"dx-menu-item\"\r\n                [class.dx-menu-item-selected]=\"frMenuColumn() && frOp(frMenuColumn()!) === item.op\"\r\n                (click)=\"selectFilterOp(item.op)\">\r\n                <span class=\"dx-icon dx-icon-filter-operation-{{ opIconSlug(item.op) }}\"></span>\r\n                <span class=\"dx-menu-item-text\">{{ item.label }}</span>\r\n            </div>\r\n        }\r\n        <div class=\"dx-menu-item nxe-fr-reset\" (click)=\"resetFilterRow()\">\r\n            <span class=\"dx-icon\"></span>\r\n            <span class=\"dx-menu-item-text\">Reset</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n", styles: ["@charset \"UTF-8\";.nxe-data-grid{display:block}.nxe-data-grid .dx-datagrid{height:100%;position:relative}.nxe-data-grid .dx-gridbase-container{display:flex;flex-direction:column;height:100%}.nxe-data-grid .dx-datagrid-rowsview{position:relative;overflow:auto;flex:1 1 auto;min-height:0}.nxe-data-grid .dx-datagrid-content{display:block;min-height:100%}.nxe-data-grid table.dx-datagrid-table{display:table;width:100%;table-layout:fixed;border-collapse:collapse;margin:0}.nxe-data-grid .dx-datagrid-content .dx-datagrid-table{max-width:none}.nxe-data-grid .dx-datagrid-headers{display:table-header-group;position:sticky;top:0;z-index:1;background:#fff;border-bottom:0}.nxe-data-grid tbody{display:table-row-group}.nxe-data-grid .dx-row{display:table-row}.nxe-data-grid .dx-datagrid-headers .dx-header-row>td{border-bottom:1px solid #e2e8f0}.nxe-data-grid .dx-datagrid-nodata{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#333;font-size:17px;opacity:.7;pointer-events:none}.nxe-data-grid .dx-datagrid-loadpanel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffff80;z-index:2}.nxe-data-grid .nxe-grid-spinner{width:32px;height:32px;border:3px solid rgba(48,55,76,.2);border-top-color:#30374c;border-radius:50%;animation:nxe-grid-spin .8s linear infinite}.nxe-data-grid .dx-column-indicators{display:inline-block;vertical-align:top;white-space:nowrap}.nxe-data-grid .dx-sort{display:inline-block;position:relative;width:14px;height:14px;vertical-align:middle}.nxe-data-grid .dx-sort:after{content:\"\";position:absolute;left:50%;top:50%;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent}.nxe-data-grid .dx-sort.dx-sort-up:after{border-bottom:5px solid #757575;transform:translate(-50%,-50%)}.nxe-data-grid .dx-sort.dx-sort-down:after{border-top:5px solid #757575;transform:translate(-50%,-50%)}.nxe-data-grid .dx-header-row>td{cursor:default;-webkit-user-select:none;user-select:none;height:27px}.nxe-data-grid .dx-header-row>td{position:relative}.nxe-data-grid .nxe-grid-hf-icon{display:inline-block;position:relative;width:14px;height:14px;cursor:pointer;vertical-align:middle;opacity:.5}.nxe-data-grid .nxe-grid-hf-icon:before{content:\"\";position:absolute;inset:0;background-color:#757575;clip-path:polygon(0 0,100% 0,58% 50%,58% 100%,42% 85%,42% 50%)}.nxe-data-grid .nxe-grid-hf-icon:after{content:\"\";position:absolute;inset:0;margin:-7px}.nxe-data-grid .nxe-grid-hf-icon:hover{opacity:.75}.nxe-data-grid .nxe-grid-hf-icon.nxe-hf-active{opacity:1}.nxe-data-grid .nxe-grid-pager{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid #ddd}.nxe-data-grid .nxe-pager-size{padding:2px 6px;border:1px solid #ddd;border-radius:3px;font:inherit}.nxe-data-grid .nxe-pager-pages{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.nxe-data-grid .nxe-pager-page,.nxe-data-grid .nxe-pager-nav{min-width:24px;padding:3px 7px 4px;border:1px solid transparent;border-radius:3px;background:transparent;color:#333;cursor:pointer;font:inherit;line-height:1}.nxe-data-grid .nxe-pager-page:hover:not(:disabled),.nxe-data-grid .nxe-pager-nav:hover:not(:disabled){background:#f4f4f4}.nxe-data-grid .nxe-pager-page:disabled,.nxe-data-grid .nxe-pager-nav:disabled{opacity:.4;cursor:default}.nxe-data-grid .nxe-pager-page.nxe-active,.nxe-data-grid .nxe-pager-nav.nxe-active{background:#d4d4d4;border-color:transparent}.nxe-data-grid .nxe-pager-info{color:#757575;margin-left:auto}.nxe-data-grid .dx-datagrid-header-panel{padding:.5rem .75rem}.nxe-data-grid .dx-datagrid-group-panel{align-items:center;min-height:36px}.nxe-data-grid .nxe-tree-expander,.nxe-data-grid .nxe-tree-expander-stub{display:inline-block;width:16px;height:16px;flex:0 0 16px;vertical-align:middle;margin-right:2px}.nxe-data-grid .nxe-tree-expander{position:relative;cursor:pointer}.nxe-data-grid .nxe-tree-expander:before{content:\"\";position:absolute;left:4px;top:4px;width:6px;height:6px;border-right:1.5px solid #555;border-bottom:1.5px solid #555;transform:rotate(45deg)}.nxe-data-grid .nxe-tree-expander.nxe-collapsed:before{transform:rotate(-45deg)}.nxe-data-grid .dx-group-row>td{padding:4px 8px;background-color:#f7f7f7}.nxe-data-grid .dx-group-row>td.dx-group-cell{font-weight:700}.nxe-data-grid .dx-group-row>td.dx-datagrid-expand{cursor:pointer}.nxe-data-grid .dx-group-row>td.dx-datagrid-summary-item{font-weight:400;color:#333}.nxe-data-grid .dx-datagrid-group-opened,.nxe-data-grid .dx-datagrid-group-closed{display:inline-block;position:relative;width:14px;height:14px;cursor:pointer}.nxe-data-grid .dx-datagrid-group-opened:before,.nxe-data-grid .dx-datagrid-group-closed:before{content:\"\"!important;position:absolute;left:3px;right:auto;top:2px;width:6px;height:6px;border-right:1.5px solid #555;border-bottom:1.5px solid #555;transform:rotate(45deg)}.nxe-data-grid .dx-datagrid-group-closed:before{transform:rotate(-45deg)}.nxe-data-grid .dx-datagrid-total-footer>tr>td,.nxe-data-grid tfoot.dx-datagrid-total-footer td{border-top:1px solid #ddd;padding:6px 4px;font-weight:700;color:#959595}.nxe-data-grid .dx-datagrid-filter-row>td{padding:2px 4px}.nxe-data-grid .nxe-grid-filter-input{width:100%;box-sizing:border-box;padding:4px 6px;border:1px solid #ddd;border-radius:2px;font:inherit;outline:none}.nxe-data-grid .nxe-grid-filter-input:focus{border-color:#30374c}.nxe-data-grid .dx-command-select{width:40px;min-width:40px;max-width:40px;text-align:center;vertical-align:middle}.nxe-data-grid .nxe-grid-checkbox{display:inline-block;cursor:pointer;line-height:0}.nxe-data-grid .nxe-grid-checkbox .nxe-grid-checkbox-box{display:inline-block;position:relative;width:16px;height:16px;box-sizing:border-box;border:1px solid #ddd;border-radius:2px;background:#fff;vertical-align:middle}.nxe-data-grid .nxe-grid-checkbox.nxe-checked .nxe-grid-checkbox-box{border-color:#ddd;background:#fff}.nxe-data-grid .nxe-grid-checkbox.nxe-checked .nxe-grid-checkbox-box:after{content:\"\";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid #337ab7;border-width:0 2px 2px 0;transform:rotate(45deg)}.nxe-data-grid .nxe-grid-checkbox.nxe-indeterminate .nxe-grid-checkbox-box{border-color:#ddd}.nxe-data-grid .nxe-grid-checkbox.nxe-indeterminate .nxe-grid-checkbox-box:after{content:\"\";position:absolute;left:3px;top:3px;width:8px;height:8px;background:#337ab7}.nxe-data-grid .nxe-grid-checkbox.nxe-grid-checkbox-readonly{display:block;text-align:center;cursor:default;height:18px;line-height:18px}@keyframes nxe-grid-spin{to{transform:rotate(360deg)}}.nxe-data-grid .dx-command-expand{width:30px;text-align:center;cursor:pointer}.nxe-detail-expander{display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:6px solid #999;cursor:pointer;transition:transform .15s ease}.nxe-detail-expander.nxe-expanded{transform:rotate(90deg)}.nxe-data-grid .dx-master-detail-row>td{padding:8px 12px;background:#fafafa}.nxe-grid-cell-editor{width:100%;box-sizing:border-box;border:1px solid #337ab7;padding:2px 4px;font:inherit;background:#fff;outline:none}.nxe-data-grid .dx-command-edit{text-align:center;white-space:nowrap}.nxe-data-grid .dx-command-edit .dx-link{color:#337ab7;cursor:pointer;margin:0 4px;text-decoration:none}.nxe-data-grid .dx-command-edit .dx-link:hover{text-decoration:underline}.nxe-data-grid .dx-header-row td.dx-datagrid-drag-action,.nxe-data-grid .dx-group-panel-item{touch-action:none}.nxe-data-grid .nxe-drag-source{opacity:.5}.nxe-data-grid .dx-datagrid-filter-row .dx-menu ul{list-style:none;margin:0;padding:0}.nxe-data-grid .dx-datagrid-filter-row .dx-editor-with-menu{display:flex}.nxe-data-grid .dx-datagrid-filter-row .dx-editor-with-menu .nxe-grid-filter-input{flex:1 1 0;min-width:0}.nxe-data-grid .dx-datagrid-filter-row .dx-editor-with-menu .nxe-fr-second{padding-left:4px!important;border-left:1px solid #ddd}.nxe-data-grid .dx-datagrid-filter-row .dx-icon[class*=dx-icon-filter-operation-],.nxe-fr-op-menu .dx-icon[class*=dx-icon-filter-operation-]{font:600 12px/18px inherit!important;font-family:inherit!important;display:inline-block;width:18px;height:18px;text-align:center;color:#757575}.nxe-data-grid .dx-icon-filter-operation-contains:before,.nxe-fr-op-menu .dx-icon-filter-operation-contains:before{content:\"*\"!important}.nxe-data-grid .dx-icon-filter-operation-not-contains:before,.nxe-fr-op-menu .dx-icon-filter-operation-not-contains:before{content:\"!*\"!important}.nxe-data-grid .dx-icon-filter-operation-starts-with:before,.nxe-fr-op-menu .dx-icon-filter-operation-starts-with:before{content:\"a*\"!important}.nxe-data-grid .dx-icon-filter-operation-ends-with:before,.nxe-fr-op-menu .dx-icon-filter-operation-ends-with:before{content:\"*a\"!important}.nxe-data-grid .dx-icon-filter-operation-equals:before,.nxe-fr-op-menu .dx-icon-filter-operation-equals:before{content:\"=\"!important}.nxe-data-grid .dx-icon-filter-operation-not-equals:before,.nxe-fr-op-menu .dx-icon-filter-operation-not-equals:before{content:\"\\2260\"!important}.nxe-data-grid .dx-icon-filter-operation-less:before,.nxe-fr-op-menu .dx-icon-filter-operation-less:before{content:\"<\"!important}.nxe-data-grid .dx-icon-filter-operation-greater:before,.nxe-fr-op-menu .dx-icon-filter-operation-greater:before{content:\">\"!important}.nxe-data-grid .dx-icon-filter-operation-less-equal:before,.nxe-fr-op-menu .dx-icon-filter-operation-less-equal:before{content:\"\\2264\"!important}.nxe-data-grid .dx-icon-filter-operation-greater-equal:before,.nxe-fr-op-menu .dx-icon-filter-operation-greater-equal:before{content:\"\\2265\"!important}.nxe-data-grid .dx-icon-filter-operation-between:before,.nxe-fr-op-menu .dx-icon-filter-operation-between:before{content:\"\\2194\"!important}.nxe-fr-op-menu{background:#fff;border:1px solid #ddd;box-shadow:0 2px 6px #00000026;padding:4px 0;min-width:180px}.nxe-fr-op-menu .dx-menu-item{display:flex;align-items:center;gap:8px;padding:6px 24px 6px 8px;cursor:pointer;color:#333}.nxe-fr-op-menu .dx-menu-item:hover{background:#f0f0f0}.nxe-fr-op-menu .dx-menu-item.dx-menu-item-selected{background:#e6e6e6}.nxe-fr-op-menu .dx-menu-item .dx-icon{width:18px;text-align:center}.nxe-data-grid .nxe-col-resize-handle{position:absolute;right:-4px;top:0;bottom:0;width:8px;cursor:col-resize;z-index:2;touch-action:none}body.nxe-grid-resizing{cursor:col-resize;user-select:none;-webkit-user-select:none}.nxe-col-drop-indicator{position:fixed;width:2px;background:#337ab7;z-index:10000;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDataGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-data-grid, nxe-tree-list', standalone: true, imports: [NgTemplateOutlet], host: { class: 'nxe-widget nxe-data-grid' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"dx-widget dx-datagrid\" [class.dx-datagrid-borders]=\"showBorders()\">\r\n    <div class=\"dx-gridbase-container\">\r\n        @if (groupPanelVisible()) {\r\n            <div class=\"dx-datagrid-header-panel\">\r\n                <div class=\"dx-datagrid-group-panel\">\r\n                    @if (groupColumns().length === 0) {\r\n                        <span class=\"dx-group-panel-message\">Drag a column header here to group by that column</span>\r\n                    } @else {\r\n                        @for (col of groupColumns(); track col.dataField(); let li = $index) {\r\n                            <!-- dx chip DOM: caption + sort indicator + header-filter button (bright audit) -->\r\n                            <div\r\n                                class=\"dx-group-panel-item dx-datagrid-action dx-datagrid-drag-action\"\r\n                                tabindex=\"0\"\r\n                                (pointerdown)=\"onChipPointerDown(col, li, $event)\"\r\n                                (click)=\"onChipClick(col)\">{{ col.caption() }}<div class=\"dx-column-indicators\" role=\"presentation\"><span\r\n                                        class=\"dx-sort\"\r\n                                        [class.dx-sort-up]=\"groupDir(col) === 'asc'\"\r\n                                        [class.dx-sort-down]=\"groupDir(col) === 'desc'\"></span>@if (headerFilterVisible(col)) {<span\r\n                                        class=\"nxe-grid-hf-icon\"\r\n                                        [class.nxe-hf-active]=\"hasHeaderFilter(col)\"\r\n                                        (pointerdown)=\"$event.stopPropagation()\"\r\n                                        (click)=\"openHeaderFilter(col, $event)\"></span>}</div></div>\r\n                        }\r\n                    }\r\n                </div>\r\n            </div>\r\n        }\r\n        <div\r\n            class=\"dx-datagrid-rowsview dx-datagrid-after-headers\"\r\n            [class.dx-datagrid-nowrap]=\"!wordWrapEnabled()\">\r\n            <div class=\"dx-datagrid-content\">\r\n                <table class=\"dx-datagrid-table dx-datagrid-table-fixed\" [style.width]=\"tableWidthStyle()\">\r\n                    <colgroup>\r\n                        @for (i of indents(groupLevelCount()); track i) {\r\n                            <col style=\"width: 30px\" />\r\n                        }\r\n                        @if (masterDetailEnabled()) {\r\n                            <col style=\"width: 30px\" />\r\n                        }\r\n                        @if (showCheckboxes()) {\r\n                            <col style=\"width: 40px\" />\r\n                        }\r\n                        @for (col of visibleColumns(); track $index; let ci = $index) {\r\n                            <col [style.width]=\"effectiveColWidth(col, ci)\" />\r\n                        }\r\n                        @if (rowEditCommandVisible()) {\r\n                            <col style=\"width: 100px\" />\r\n                        }\r\n                    </colgroup>\r\n                    <thead class=\"dx-datagrid-headers\">\r\n                        <!-- Bands add header rows: a band cell spans its visible leaves with\r\n                             colspan, and a leaf above the bottom row spans down with rowspan.\r\n                             That is dx's own banded markup, and it keeps the LAST header row\r\n                             all-leaves - which the auto-width, resize and drag code relies on. -->\r\n                        @for (hrow of headerRows(); track $index; let hi = $index) {\r\n                            <tr class=\"dx-row dx-header-row\" [class.dx-column-lines]=\"showColumnLines()\">\r\n                                @if (hi === 0) {\r\n                                    @for (i of indents(groupLevelCount()); track i) {\r\n                                        <td\r\n                                            class=\"dx-command-expand dx-datagrid-group-space dx-cell-focus-disabled\"\r\n                                            [attr.rowspan]=\"headerDepth() > 1 ? headerDepth() : null\"></td>\r\n                                    }\r\n                                    @if (masterDetailEnabled()) {\r\n                                        <td\r\n                                            class=\"dx-command-expand\"\r\n                                            [attr.rowspan]=\"headerDepth() > 1 ? headerDepth() : null\"></td>\r\n                                    }\r\n                                    @if (showCheckboxes()) {\r\n                                        <td\r\n                                            class=\"dx-command-select\"\r\n                                            [attr.rowspan]=\"headerDepth() > 1 ? headerDepth() : null\">\r\n                                            @if (selectionMode() === 'multiple') {\r\n                                                <span\r\n                                                    class=\"dx-select-checkbox nxe-grid-checkbox\"\r\n                                                    [class.nxe-checked]=\"allSelected()\"\r\n                                                    [class.nxe-indeterminate]=\"someSelected() && !allSelected()\"\r\n                                                    (click)=\"toggleSelectAll($event)\">\r\n                                                    <span class=\"nxe-grid-checkbox-box\"></span>\r\n                                                </span>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n                                }\r\n                                @for (cell of hrow; track $index) {\r\n                                    @if (cell.isBand) {\r\n                                        <td\r\n                                            class=\"nxe-band-cell\"\r\n                                            [class]=\"cell.column.cssClass()\"\r\n                                            [attr.colspan]=\"cell.colspan > 1 ? cell.colspan : null\"\r\n                                            [style.text-align]=\"cell.column.alignment() ?? 'center'\">\r\n                                            <div class=\"dx-datagrid-text-content\">{{ cell.column.caption() }}</div>\r\n                                        </td>\r\n                                    } @else {\r\n                                        <td\r\n                                            [class]=\"cell.column.cssClass()\"\r\n                                            [attr.aria-colindex]=\"leadCellCount() + cell.leafIndex + 1\"\r\n                                            [attr.rowspan]=\"cell.rowspan > 1 ? cell.rowspan : null\"\r\n                                            [style.text-align]=\"align(cell.column)\"\r\n                                            [class.dx-cell-focus-disabled]=\"!cell.column.allowSorting()\"\r\n                                            [class.dx-datagrid-drag-action]=\"headerDraggable(cell.column)\"\r\n                                            (pointerdown)=\"onHeaderPointerDown(cell.column, cell.leafIndex, $event)\"\r\n                                            (click)=\"onHeaderClick(cell.column)\">\r\n                                            <!-- Both indicator classes are load-bearing, not decorative: they are what\r\n                                                 gate dx's caption max-widths (`.dx-header-row .dx-sort-indicator\r\n                                                 {max-width:calc(100% - 17px)}` and the .dx-header-filter-indicator\r\n                                                 family), i.e. the 17px-per-indicator budget that stops a long\r\n                                                 caption from colliding with the arrow and the funnel. -->\r\n                                            <div\r\n                                                class=\"dx-datagrid-text-content\"\r\n                                                [class.dx-sort-indicator]=\"!!sortDir(cell.column)\"\r\n                                                [class.dx-header-filter-indicator]=\"headerFilterVisible(cell.column)\">\r\n                                                {{ cell.column.caption() }}\r\n                                            </div>\r\n                                            <!-- dx wraps the arrow and the funnel in one indicator block, and the\r\n                                                 group-panel chip below already did. Matching it here means the two\r\n                                                 places share a single set of metrics instead of drifting. -->\r\n                                            @if (sortDir(cell.column) || headerFilterVisible(cell.column)) {\r\n                                                <div class=\"dx-column-indicators\" role=\"presentation\">\r\n                                                    @if (sortDir(cell.column); as dir) {\r\n                                                        <span\r\n                                                            class=\"dx-sort\"\r\n                                                            [class.dx-sort-up]=\"dir === 'asc'\"\r\n                                                            [class.dx-sort-down]=\"dir === 'desc'\"></span>\r\n                                                    }\r\n                                                    @if (headerFilterVisible(cell.column)) {\r\n                                                        <span\r\n                                                            class=\"nxe-grid-hf-icon\"\r\n                                                            [class.nxe-hf-active]=\"hasHeaderFilter(cell.column)\"\r\n                                                            (click)=\"openHeaderFilter(cell.column, $event)\"></span>\r\n                                                    }\r\n                                                </div>\r\n                                            }\r\n                                            @if (resizeHandleVisible(cell.column, cell.leafIndex)) {\r\n                                                <span\r\n                                                    class=\"nxe-col-resize-handle\"\r\n                                                    (pointerdown)=\"startColumnResize(cell.column, cell.leafIndex, $event)\"></span>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n                                }\r\n                                @if (hi === 0 && rowEditCommandVisible()) {\r\n                                    <td\r\n                                        class=\"dx-command-edit\"\r\n                                        [attr.rowspan]=\"headerDepth() > 1 ? headerDepth() : null\"></td>\r\n                                }\r\n                            </tr>\r\n                        }\r\n                        @if (filterRowVisible()) {\r\n                            <tr class=\"dx-row dx-datagrid-filter-row\">\r\n                                @for (i of indents(groupLevelCount()); track i) {\r\n                                    <td class=\"dx-command-expand dx-datagrid-group-space\"></td>\r\n                                }\r\n                                @if (masterDetailEnabled()) {\r\n                                    <td class=\"dx-command-expand\"></td>\r\n                                }\r\n                                @if (showCheckboxes()) {\r\n                                    <td class=\"dx-command-select\"></td>\r\n                                }\r\n                                @for (col of visibleColumns(); track $index) {\r\n                                    <!-- dx filter cell: td.dx-editor-cell > .dx-editor-with-menu >\r\n                                         [.dx-menu op chooser][typed editor] (dx-compat.css contract) -->\r\n                                    <td class=\"dx-editor-cell\" [class]=\"col.cssClass()\">\r\n                                        @if (col.allowFiltering()) {\r\n                                            @switch (frEditorKind(col)) {\r\n                                                @case ('lookup') {\r\n                                                    <select\r\n                                                        class=\"dx-texteditor-input nxe-grid-filter-input\"\r\n                                                        [value]=\"frText(col)\"\r\n                                                        (click)=\"$event.stopPropagation()\"\r\n                                                        (change)=\"setFilterRowText(col, $any($event.target).value)\">\r\n                                                        <option value=\"\">(All)</option>\r\n                                                        @for (item of col.lookup()!.dataSource; track $index) {\r\n                                                            <option [value]=\"item[col.lookup()!.valueExpr ?? 'lovCode']\">\r\n                                                                {{ item[col.lookup()!.displayExpr ?? 'lovName'] }}\r\n                                                            </option>\r\n                                                        }\r\n                                                    </select>\r\n                                                }\r\n                                                @case ('boolean') {\r\n                                                    <select\r\n                                                        class=\"dx-texteditor-input nxe-grid-filter-input\"\r\n                                                        [value]=\"frText(col)\"\r\n                                                        (click)=\"$event.stopPropagation()\"\r\n                                                        (change)=\"setFilterRowText(col, $any($event.target).value)\">\r\n                                                        <option value=\"\">(All)</option>\r\n                                                        <option value=\"true\">true</option>\r\n                                                        <option value=\"false\">false</option>\r\n                                                    </select>\r\n                                                }\r\n                                                @default {\r\n                                                    <div class=\"dx-editor-with-menu\">\r\n                                                        <div class=\"dx-menu dx-menu-base\">\r\n                                                            <ul class=\"dx-menu-horizontal\">\r\n                                                                <li>\r\n                                                                    <div\r\n                                                                        class=\"dx-menu-item\"\r\n                                                                        title=\"Filter operation\"\r\n                                                                        (click)=\"openFilterOpMenu(col, $event)\">\r\n                                                                        <div class=\"dx-menu-item-content\">\r\n                                                                            <span class=\"dx-icon\" [class]=\"frOpIconClass(col)\"></span>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </li>\r\n                                                            </ul>\r\n                                                        </div>\r\n                                                        <input\r\n                                                            class=\"dx-texteditor-input nxe-grid-filter-input\"\r\n                                                            [type]=\"frEditorKind(col) === 'date' ? 'date' : 'text'\"\r\n                                                            [attr.inputmode]=\"frEditorKind(col) === 'number' ? 'decimal' : null\"\r\n                                                            [value]=\"frText(col)\"\r\n                                                            (input)=\"setFilterRowText(col, $any($event.target).value)\"\r\n                                                            (click)=\"$event.stopPropagation()\" />\r\n                                                        @if (frOp(col) === 'between') {\r\n                                                            <input\r\n                                                                class=\"dx-texteditor-input nxe-grid-filter-input nxe-fr-second\"\r\n                                                                [type]=\"frEditorKind(col) === 'date' ? 'date' : 'text'\"\r\n                                                                [attr.inputmode]=\"frEditorKind(col) === 'number' ? 'decimal' : null\"\r\n                                                                [value]=\"frText2(col)\"\r\n                                                                (input)=\"setFilterRowText(col, $any($event.target).value, true)\"\r\n                                                                (click)=\"$event.stopPropagation()\" />\r\n                                                        }\r\n                                                    </div>\r\n                                                }\r\n                                            }\r\n                                        }\r\n                                    </td>\r\n                                }\r\n                                @if (rowEditCommandVisible()) {\r\n                                    <td class=\"dx-command-edit\"></td>\r\n                                }\r\n                            </tr>\r\n                        }\r\n                    </thead>\r\n                    <tbody>\r\n                        @for (item of renderRows(); track $index; let ri = $index) {\r\n                            @if (item.kind === 'group') {\r\n                                <!-- dx group-row anatomy (bright audit): [indent cells][expand chevron\r\n                                     cell][dx-group-cell colspan][alignByColumn summary cells] -->\r\n                                <tr\r\n                                    class=\"dx-row dx-group-row\"\r\n                                    [class.dx-column-lines]=\"showColumnLines()\"\r\n                                    [attr.aria-roledescription]=\"item.collapsed ? 'Collapsed row' : 'Expanded row'\">\r\n                                    @for (i of indents(item.level); track i) {\r\n                                        <td class=\"dx-command-expand dx-datagrid-group-space\"></td>\r\n                                    }\r\n                                    <td\r\n                                        class=\"dx-command-expand dx-datagrid-group-space dx-datagrid-expand dx-selection-disabled\"\r\n                                        [attr.aria-label]=\"item.collapsed ? 'Expand' : 'Collapse'\"\r\n                                        (click)=\"toggleGroup(item.groupKey)\">\r\n                                        <div\r\n                                            [class.dx-datagrid-group-opened]=\"!item.collapsed\"\r\n                                            [class.dx-datagrid-group-closed]=\"item.collapsed\"></div>\r\n                                    </td>\r\n                                    <td class=\"dx-group-cell\" [attr.colspan]=\"groupCellColspan(item)\">\r\n                                        @if (templateFor(item.column.groupCellTemplate()); as gtpl) {\r\n                                            <ng-container\r\n                                                [ngTemplateOutlet]=\"gtpl\"\r\n                                                [ngTemplateOutletContext]=\"groupCellContext(item)\" />\r\n                                        } @else {\r\n                                            {{ item.column.caption() }}: {{ item.text }}{{ item.captionSuffix }}\r\n                                        }\r\n                                    </td>\r\n                                    @for (col of groupRowTrailing(item); track col.dataField()) {\r\n                                        <td class=\"dx-datagrid-summary-item\" [style.text-align]=\"align(col)\">\r\n                                            {{ item.alignedSums.get(col.dataField()) || '' }}\r\n                                        </td>\r\n                                    }\r\n                                    @if (groupRowTrailing(item).length && rowEditCommandVisible()) {\r\n                                        <td class=\"dx-command-edit\"></td>\r\n                                    }\r\n                                </tr>\r\n                            } @else if (item.kind === 'groupFooter') {\r\n                                <tr\r\n                                    class=\"dx-row dx-group-footer-row nxe-group-footer-row\"\r\n                                    [class]=\"'nxe-group-footer-level-' + item.level\">\r\n                                    @for (i of indents(groupLevelCount()); track i) {\r\n                                        <td class=\"dx-datagrid-group-space\"></td>\r\n                                    }\r\n                                    @if (masterDetailEnabled()) {\r\n                                        <td class=\"dx-command-expand\"></td>\r\n                                    }\r\n                                    @if (showCheckboxes()) {\r\n                                        <td class=\"dx-command-select\"></td>\r\n                                    }\r\n                                    @for (col of visibleColumns(); track col.dataField()) {\r\n                                        <td class=\"dx-datagrid-summary-item\" [style.text-align]=\"align(col)\">\r\n                                            {{ item.sums.get(col.dataField()) || '' }}\r\n                                        </td>\r\n                                    }\r\n                                    @if (rowEditCommandVisible()) {\r\n                                        <td class=\"dx-command-edit\"></td>\r\n                                    }\r\n                                </tr>\r\n                            } @else {\r\n                                <tr\r\n                                    class=\"dx-row dx-data-row\"\r\n                                    [class]=\"rowClassFor(item.row)\"\r\n                                    [attr.aria-rowindex]=\"item.rowIndex + 1\"\r\n                                    [class.dx-row-lines]=\"showRowLines()\"\r\n                                    [class.dx-column-lines]=\"showColumnLines()\"\r\n                                    [class.dx-row-alt]=\"rowAlternationEnabled() && item.rowIndex % 2 === 1\"\r\n                                    [class.dx-selection]=\"isSelected(item.row)\"\r\n                                    [class.dx-state-hover]=\"isHovered(item.rowIndex)\"\r\n                                    [class.dx-edit-row]=\"isRowEditing(item.row)\"\r\n                                    (mouseenter)=\"onRowEnter(item.rowIndex)\"\r\n                                    (mouseleave)=\"onRowLeave()\"\r\n                                    (click)=\"onDataRowClick(item.row, item.rowIndex)\">\r\n                                    @for (i of indents(groupLevelCount()); track i) {\r\n                                        <td class=\"dx-datagrid-group-space\"></td>\r\n                                    }\r\n                                    @if (masterDetailEnabled()) {\r\n                                        <td class=\"dx-command-expand dx-datagrid-expand\">\r\n                                            <span\r\n                                                class=\"nxe-detail-expander\"\r\n                                                [class.nxe-expanded]=\"isDetailExpanded(item.row)\"\r\n                                                (click)=\"toggleDetail(item.row, $event)\"></span>\r\n                                        </td>\r\n                                    }\r\n                                    @if (showCheckboxes()) {\r\n                                        <td class=\"dx-command-select\">\r\n                                            <span\r\n                                                class=\"dx-select-checkbox nxe-grid-checkbox\"\r\n                                                [class.nxe-checked]=\"isSelected(item.row)\"\r\n                                                (click)=\"onCheckboxClick(item.row, $event)\">\r\n                                                <span class=\"nxe-grid-checkbox-box\"></span>\r\n                                            </span>\r\n                                        </td>\r\n                                    }\r\n                                    @for (col of visibleColumns(); track $index; let ci = $index) {\r\n                                        @if (!isMergeSuppressed(ri, col)) {\r\n                                            <td\r\n                                                [class]=\"col.cssClass()\"\r\n                                                [attr.aria-colindex]=\"leadCellCount() + ci + 1\"\r\n                                                [attr.aria-roledescription]=\"\r\n                                                    editableCell(col) && (cellEditingEnabled() || rowEditingEnabled())\r\n                                                        ? 'Editable'\r\n                                                        : null\r\n                                                \"\r\n                                                [style.text-align]=\"align(col)\"\r\n                                                [style.padding-left.px]=\"treeMode && ci === 0 ? (item.level || 0) * 18 + 4 : null\"\r\n                                                [attr.rowspan]=\"mergeSpan(ri, col)\"\r\n                                                [class.dx-editor-cell]=\"isEditingCell(item.row, col) || (isRowEditing(item.row) && editableCell(col))\"\r\n                                                (click)=\"onCellClick(item.row, col, $event)\"\r\n                                                (focusout)=\"onEditCellFocusOut(item.row, col, $event)\">\r\n                                                @if (treeMode && ci === 0) {\r\n                                                    @if (item.hasChildren) {\r\n                                                        <span\r\n                                                            class=\"nxe-tree-expander\"\r\n                                                            [class.nxe-collapsed]=\"!item.expanded\"\r\n                                                            (click)=\"toggleTreeNode(item.nodeKey, $event)\"></span>\r\n                                                    } @else {\r\n                                                        <span class=\"nxe-tree-expander-stub\"></span>\r\n                                                    }\r\n                                                }\r\n                                                @if (isEditingCell(item.row, col) || (isRowEditing(item.row) && editableCell(col))) {\r\n                                                    @if (templateFor(col.editCellTemplate()); as etpl) {\r\n                                                        <ng-container\r\n                                                            [ngTemplateOutlet]=\"etpl\"\r\n                                                            [ngTemplateOutletContext]=\"editCellContext(item.row, item.rowIndex, ci, col)\" />\r\n                                                    } @else if (isEditingCell(item.row, col)) {\r\n                                                        <ng-container\r\n                                                            [ngTemplateOutlet]=\"cellEditor\"\r\n                                                            [ngTemplateOutletContext]=\"{ row: item.row, col: col, mode: 'cell' }\" />\r\n                                                    } @else {\r\n                                                        <ng-container\r\n                                                            [ngTemplateOutlet]=\"cellEditor\"\r\n                                                            [ngTemplateOutletContext]=\"{ row: item.row, col: col, mode: 'row' }\" />\r\n                                                    }\r\n                                                } @else if (templateFor(col.cellTemplate()); as tpl) {\r\n                                                    <ng-container\r\n                                                        [ngTemplateOutlet]=\"tpl\"\r\n                                                        [ngTemplateOutletContext]=\"cellContext(item.row, item.rowIndex, ci, col)\" />\r\n                                                } @else if (isBooleanCell(col, item.row)) {\r\n                                                    <!-- dx parity: boolean cells render a read-only dx-style checkbox, not \"true\"/\"false\" -->\r\n                                                    <span\r\n                                                        class=\"nxe-grid-checkbox nxe-grid-checkbox-readonly\"\r\n                                                        [class.nxe-checked]=\"getRaw(item.row, col.dataField()) === true\">\r\n                                                        <span class=\"nxe-grid-checkbox-box\"></span>\r\n                                                    </span>\r\n                                                } @else {\r\n                                                    {{ cellText(col, item.row) }}\r\n                                                }\r\n                                            </td>\r\n                                        }\r\n                                    }\r\n                                    @if (rowEditCommandVisible()) {\r\n                                        <td class=\"dx-command-edit dx-datagrid-drag-action\">\r\n                                            @if (isRowEditing(item.row)) {\r\n                                                <a class=\"dx-link dx-link-save\" (click)=\"saveRowEdit(item.row, $event)\">Save</a>\r\n                                                <a class=\"dx-link dx-link-cancel\" (click)=\"cancelRowEdit($event)\">Cancel</a>\r\n                                            } @else {\r\n                                                <a class=\"dx-link dx-link-edit\" (click)=\"startRowEdit(item.row, $event)\">Edit</a>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n                                </tr>\r\n                                @if (masterDetailEnabled() && isDetailExpanded(item.row)) {\r\n                                    <tr class=\"dx-row dx-master-detail-row\">\r\n                                        <td [attr.colspan]=\"allColCount()\">\r\n                                            @if (detailTemplate(); as tpl) {\r\n                                                <ng-container\r\n                                                    [ngTemplateOutlet]=\"tpl\"\r\n                                                    [ngTemplateOutletContext]=\"detailContext(item.row, item.rowIndex)\" />\r\n                                            }\r\n                                        </td>\r\n                                    </tr>\r\n                                }\r\n                            }\r\n                        }\r\n                        <tr class=\"dx-row dx-freespace-row\">\r\n                            <td [attr.colspan]=\"allColCount()\"></td>\r\n                        </tr>\r\n                    </tbody>\r\n                    @if (hasTotalFooter()) {\r\n                        <tfoot class=\"dx-datagrid-total-footer\">\r\n                            <tr class=\"dx-row\">\r\n                                @for (i of indents(groupLevelCount()); track i) {\r\n                                    <td class=\"dx-datagrid-group-space\"></td>\r\n                                }\r\n                                @if (masterDetailEnabled()) {\r\n                                    <td class=\"dx-command-expand\"></td>\r\n                                }\r\n                                @if (showCheckboxes()) {\r\n                                    <td class=\"dx-command-select\"></td>\r\n                                }\r\n                                @for (col of visibleColumns(); track col.dataField()) {\r\n                                    <td class=\"dx-datagrid-summary-item\" [style.text-align]=\"align(col)\">\r\n                                        {{ totalSums().get(col.dataField()) || '' }}\r\n                                    </td>\r\n                                }\r\n                                @if (rowEditCommandVisible()) {\r\n                                    <td class=\"dx-command-edit\"></td>\r\n                                }\r\n                            </tr>\r\n                        </tfoot>\r\n                    }\r\n                </table>\r\n            </div>\r\n\r\n            @if (displayRows().length === 0 && !loading()) {\r\n                <div class=\"dx-datagrid-nodata\">{{ noDataText() }}</div>\r\n            }\r\n            @if (loading()) {\r\n                <div class=\"dx-datagrid-loadpanel\"><span class=\"nxe-grid-spinner\"></span></div>\r\n            }\r\n        </div>\r\n\r\n        @if (pagerVisible()) {\r\n            <div class=\"dx-datagrid-pager dx-pager nxe-grid-pager\">\r\n                @if (pagerCmp()?.showPageSizeSelector() && pageSizes().length > 1) {\r\n                    <select class=\"nxe-pager-size\" (change)=\"onPageSizeSelect($event)\">\r\n                        @for (s of pageSizes(); track s) {\r\n                            <option [value]=\"s\" [selected]=\"s === effectivePageSize()\">{{ s }}</option>\r\n                        }\r\n                    </select>\r\n                }\r\n                <div class=\"nxe-pager-pages\">\r\n                    @if (pagerCmp()?.showNavigationButtons()) {\r\n                        <button type=\"button\" class=\"nxe-pager-nav\" [disabled]=\"pageIndex() === 0\" (click)=\"prevPage()\">\u2039</button>\r\n                    }\r\n                    @for (p of pageNumbers(); track p) {\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"nxe-pager-page\"\r\n                            [class.nxe-active]=\"p === pageIndex()\"\r\n                            (click)=\"goToPage(p)\">\r\n                            {{ p + 1 }}\r\n                        </button>\r\n                    }\r\n                    @if (pagerCmp()?.showNavigationButtons()) {\r\n                        <button type=\"button\" class=\"nxe-pager-nav\" [disabled]=\"pageIndex() >= pageCount() - 1\" (click)=\"nextPage()\">\u203A</button>\r\n                    }\r\n                </div>\r\n                @if (pagerCmp()?.showInfo()) {\r\n                    <span class=\"nxe-pager-info\">{{ pageInfo() }}</span>\r\n                }\r\n            </div>\r\n        }\r\n    </div>\r\n</div>\r\n\r\n<!-- Inline cell/row editor (dxo-editing, orbit addition). `mode: 'cell'` commits on blur/Enter;\r\n     `mode: 'row'` buffers on input until the command column's Save. -->\r\n<ng-template #cellEditor let-row=\"row\" let-col=\"col\" let-mode=\"mode\">\r\n    @if (col.lookup(); as lookup) {\r\n        <select\r\n            class=\"dx-texteditor-input nxe-grid-cell-editor\"\r\n            [value]=\"editorInputValue(row, col)\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            (change)=\"\r\n                mode === 'cell'\r\n                    ? commitCellEdit(row, col, $any($event.target).value)\r\n                    : bufferRowEdit(col, $any($event.target).value)\r\n            \">\r\n            <option value=\"\"></option>\r\n            @for (item of lookup.dataSource; track $index) {\r\n                <option [value]=\"item[lookup.valueExpr ?? 'lovCode']\">\r\n                    {{ item[lookup.displayExpr ?? 'lovName'] }}\r\n                </option>\r\n            }\r\n        </select>\r\n    } @else if (col.dataType() === 'boolean') {\r\n        <input\r\n            type=\"checkbox\"\r\n            class=\"nxe-grid-cell-editor-check\"\r\n            [checked]=\"!!editorInputValue(row, col) && editorInputValue(row, col) !== 'false'\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            (change)=\"\r\n                mode === 'cell'\r\n                    ? commitCellEdit(row, col, $any($event.target).checked)\r\n                    : bufferRowEdit(col, $any($event.target).checked)\r\n            \" />\r\n    } @else {\r\n        <input\r\n            type=\"text\"\r\n            class=\"dx-texteditor-input nxe-grid-cell-editor\"\r\n            [value]=\"editorInputValue(row, col)\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            (keydown.enter)=\"mode === 'cell' && commitCellEdit(row, col, $any($event.target).value)\"\r\n            (keydown.escape)=\"mode === 'cell' && cancelCellEdit()\"\r\n            (blur)=\"mode === 'cell' && commitCellEdit(row, col, $any($event.target).value)\"\r\n            (input)=\"mode === 'row' && bufferRowEdit(col, $any($event.target).value)\" />\r\n    }\r\n</ng-template>\r\n\r\n<!-- The header-filter popup (#hfPanel) moved to nxe-header-filter-panel.component.html \u2014\r\n     openHeaderFilter attaches it through openNxeHeaderFilterOverlay (pivot parity Phase 3a). -->\r\n\r\n<!-- Filter-row operation-chooser dropdown (dx filter menu) -->\r\n<ng-template #frOpMenu>\r\n    <div class=\"nxe-fr-op-menu dx-datagrid\">\r\n        @for (item of frMenuOps(); track item.op) {\r\n            <div\r\n                class=\"dx-menu-item\"\r\n                [class.dx-menu-item-selected]=\"frMenuColumn() && frOp(frMenuColumn()!) === item.op\"\r\n                (click)=\"selectFilterOp(item.op)\">\r\n                <span class=\"dx-icon dx-icon-filter-operation-{{ opIconSlug(item.op) }}\"></span>\r\n                <span class=\"dx-menu-item-text\">{{ item.label }}</span>\r\n            </div>\r\n        }\r\n        <div class=\"dx-menu-item nxe-fr-reset\" (click)=\"resetFilterRow()\">\r\n            <span class=\"dx-icon\"></span>\r\n            <span class=\"dx-menu-item-text\">Reset</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n", styles: ["@charset \"UTF-8\";.nxe-data-grid{display:block}.nxe-data-grid .dx-datagrid{height:100%;position:relative}.nxe-data-grid .dx-gridbase-container{display:flex;flex-direction:column;height:100%}.nxe-data-grid .dx-datagrid-rowsview{position:relative;overflow:auto;flex:1 1 auto;min-height:0}.nxe-data-grid .dx-datagrid-content{display:block;min-height:100%}.nxe-data-grid table.dx-datagrid-table{display:table;width:100%;table-layout:fixed;border-collapse:collapse;margin:0}.nxe-data-grid .dx-datagrid-content .dx-datagrid-table{max-width:none}.nxe-data-grid .dx-datagrid-headers{display:table-header-group;position:sticky;top:0;z-index:1;background:#fff;border-bottom:0}.nxe-data-grid tbody{display:table-row-group}.nxe-data-grid .dx-row{display:table-row}.nxe-data-grid .dx-datagrid-headers .dx-header-row>td{border-bottom:1px solid #e2e8f0}.nxe-data-grid .dx-datagrid-nodata{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#333;font-size:17px;opacity:.7;pointer-events:none}.nxe-data-grid .dx-datagrid-loadpanel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffff80;z-index:2}.nxe-data-grid .nxe-grid-spinner{width:32px;height:32px;border:3px solid rgba(48,55,76,.2);border-top-color:#30374c;border-radius:50%;animation:nxe-grid-spin .8s linear infinite}.nxe-data-grid .dx-column-indicators{display:inline-block;vertical-align:top;white-space:nowrap}.nxe-data-grid .dx-sort{display:inline-block;position:relative;width:14px;height:14px;vertical-align:middle}.nxe-data-grid .dx-sort:after{content:\"\";position:absolute;left:50%;top:50%;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent}.nxe-data-grid .dx-sort.dx-sort-up:after{border-bottom:5px solid #757575;transform:translate(-50%,-50%)}.nxe-data-grid .dx-sort.dx-sort-down:after{border-top:5px solid #757575;transform:translate(-50%,-50%)}.nxe-data-grid .dx-header-row>td{cursor:default;-webkit-user-select:none;user-select:none;height:27px}.nxe-data-grid .dx-header-row>td{position:relative}.nxe-data-grid .nxe-grid-hf-icon{display:inline-block;position:relative;width:14px;height:14px;cursor:pointer;vertical-align:middle;opacity:.5}.nxe-data-grid .nxe-grid-hf-icon:before{content:\"\";position:absolute;inset:0;background-color:#757575;clip-path:polygon(0 0,100% 0,58% 50%,58% 100%,42% 85%,42% 50%)}.nxe-data-grid .nxe-grid-hf-icon:after{content:\"\";position:absolute;inset:0;margin:-7px}.nxe-data-grid .nxe-grid-hf-icon:hover{opacity:.75}.nxe-data-grid .nxe-grid-hf-icon.nxe-hf-active{opacity:1}.nxe-data-grid .nxe-grid-pager{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid #ddd}.nxe-data-grid .nxe-pager-size{padding:2px 6px;border:1px solid #ddd;border-radius:3px;font:inherit}.nxe-data-grid .nxe-pager-pages{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.nxe-data-grid .nxe-pager-page,.nxe-data-grid .nxe-pager-nav{min-width:24px;padding:3px 7px 4px;border:1px solid transparent;border-radius:3px;background:transparent;color:#333;cursor:pointer;font:inherit;line-height:1}.nxe-data-grid .nxe-pager-page:hover:not(:disabled),.nxe-data-grid .nxe-pager-nav:hover:not(:disabled){background:#f4f4f4}.nxe-data-grid .nxe-pager-page:disabled,.nxe-data-grid .nxe-pager-nav:disabled{opacity:.4;cursor:default}.nxe-data-grid .nxe-pager-page.nxe-active,.nxe-data-grid .nxe-pager-nav.nxe-active{background:#d4d4d4;border-color:transparent}.nxe-data-grid .nxe-pager-info{color:#757575;margin-left:auto}.nxe-data-grid .dx-datagrid-header-panel{padding:.5rem .75rem}.nxe-data-grid .dx-datagrid-group-panel{align-items:center;min-height:36px}.nxe-data-grid .nxe-tree-expander,.nxe-data-grid .nxe-tree-expander-stub{display:inline-block;width:16px;height:16px;flex:0 0 16px;vertical-align:middle;margin-right:2px}.nxe-data-grid .nxe-tree-expander{position:relative;cursor:pointer}.nxe-data-grid .nxe-tree-expander:before{content:\"\";position:absolute;left:4px;top:4px;width:6px;height:6px;border-right:1.5px solid #555;border-bottom:1.5px solid #555;transform:rotate(45deg)}.nxe-data-grid .nxe-tree-expander.nxe-collapsed:before{transform:rotate(-45deg)}.nxe-data-grid .dx-group-row>td{padding:4px 8px;background-color:#f7f7f7}.nxe-data-grid .dx-group-row>td.dx-group-cell{font-weight:700}.nxe-data-grid .dx-group-row>td.dx-datagrid-expand{cursor:pointer}.nxe-data-grid .dx-group-row>td.dx-datagrid-summary-item{font-weight:400;color:#333}.nxe-data-grid .dx-datagrid-group-opened,.nxe-data-grid .dx-datagrid-group-closed{display:inline-block;position:relative;width:14px;height:14px;cursor:pointer}.nxe-data-grid .dx-datagrid-group-opened:before,.nxe-data-grid .dx-datagrid-group-closed:before{content:\"\"!important;position:absolute;left:3px;right:auto;top:2px;width:6px;height:6px;border-right:1.5px solid #555;border-bottom:1.5px solid #555;transform:rotate(45deg)}.nxe-data-grid .dx-datagrid-group-closed:before{transform:rotate(-45deg)}.nxe-data-grid .dx-datagrid-total-footer>tr>td,.nxe-data-grid tfoot.dx-datagrid-total-footer td{border-top:1px solid #ddd;padding:6px 4px;font-weight:700;color:#959595}.nxe-data-grid .dx-datagrid-filter-row>td{padding:2px 4px}.nxe-data-grid .nxe-grid-filter-input{width:100%;box-sizing:border-box;padding:4px 6px;border:1px solid #ddd;border-radius:2px;font:inherit;outline:none}.nxe-data-grid .nxe-grid-filter-input:focus{border-color:#30374c}.nxe-data-grid .dx-command-select{width:40px;min-width:40px;max-width:40px;text-align:center;vertical-align:middle}.nxe-data-grid .nxe-grid-checkbox{display:inline-block;cursor:pointer;line-height:0}.nxe-data-grid .nxe-grid-checkbox .nxe-grid-checkbox-box{display:inline-block;position:relative;width:16px;height:16px;box-sizing:border-box;border:1px solid #ddd;border-radius:2px;background:#fff;vertical-align:middle}.nxe-data-grid .nxe-grid-checkbox.nxe-checked .nxe-grid-checkbox-box{border-color:#ddd;background:#fff}.nxe-data-grid .nxe-grid-checkbox.nxe-checked .nxe-grid-checkbox-box:after{content:\"\";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid #337ab7;border-width:0 2px 2px 0;transform:rotate(45deg)}.nxe-data-grid .nxe-grid-checkbox.nxe-indeterminate .nxe-grid-checkbox-box{border-color:#ddd}.nxe-data-grid .nxe-grid-checkbox.nxe-indeterminate .nxe-grid-checkbox-box:after{content:\"\";position:absolute;left:3px;top:3px;width:8px;height:8px;background:#337ab7}.nxe-data-grid .nxe-grid-checkbox.nxe-grid-checkbox-readonly{display:block;text-align:center;cursor:default;height:18px;line-height:18px}@keyframes nxe-grid-spin{to{transform:rotate(360deg)}}.nxe-data-grid .dx-command-expand{width:30px;text-align:center;cursor:pointer}.nxe-detail-expander{display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:6px solid #999;cursor:pointer;transition:transform .15s ease}.nxe-detail-expander.nxe-expanded{transform:rotate(90deg)}.nxe-data-grid .dx-master-detail-row>td{padding:8px 12px;background:#fafafa}.nxe-grid-cell-editor{width:100%;box-sizing:border-box;border:1px solid #337ab7;padding:2px 4px;font:inherit;background:#fff;outline:none}.nxe-data-grid .dx-command-edit{text-align:center;white-space:nowrap}.nxe-data-grid .dx-command-edit .dx-link{color:#337ab7;cursor:pointer;margin:0 4px;text-decoration:none}.nxe-data-grid .dx-command-edit .dx-link:hover{text-decoration:underline}.nxe-data-grid .dx-header-row td.dx-datagrid-drag-action,.nxe-data-grid .dx-group-panel-item{touch-action:none}.nxe-data-grid .nxe-drag-source{opacity:.5}.nxe-data-grid .dx-datagrid-filter-row .dx-menu ul{list-style:none;margin:0;padding:0}.nxe-data-grid .dx-datagrid-filter-row .dx-editor-with-menu{display:flex}.nxe-data-grid .dx-datagrid-filter-row .dx-editor-with-menu .nxe-grid-filter-input{flex:1 1 0;min-width:0}.nxe-data-grid .dx-datagrid-filter-row .dx-editor-with-menu .nxe-fr-second{padding-left:4px!important;border-left:1px solid #ddd}.nxe-data-grid .dx-datagrid-filter-row .dx-icon[class*=dx-icon-filter-operation-],.nxe-fr-op-menu .dx-icon[class*=dx-icon-filter-operation-]{font:600 12px/18px inherit!important;font-family:inherit!important;display:inline-block;width:18px;height:18px;text-align:center;color:#757575}.nxe-data-grid .dx-icon-filter-operation-contains:before,.nxe-fr-op-menu .dx-icon-filter-operation-contains:before{content:\"*\"!important}.nxe-data-grid .dx-icon-filter-operation-not-contains:before,.nxe-fr-op-menu .dx-icon-filter-operation-not-contains:before{content:\"!*\"!important}.nxe-data-grid .dx-icon-filter-operation-starts-with:before,.nxe-fr-op-menu .dx-icon-filter-operation-starts-with:before{content:\"a*\"!important}.nxe-data-grid .dx-icon-filter-operation-ends-with:before,.nxe-fr-op-menu .dx-icon-filter-operation-ends-with:before{content:\"*a\"!important}.nxe-data-grid .dx-icon-filter-operation-equals:before,.nxe-fr-op-menu .dx-icon-filter-operation-equals:before{content:\"=\"!important}.nxe-data-grid .dx-icon-filter-operation-not-equals:before,.nxe-fr-op-menu .dx-icon-filter-operation-not-equals:before{content:\"\\2260\"!important}.nxe-data-grid .dx-icon-filter-operation-less:before,.nxe-fr-op-menu .dx-icon-filter-operation-less:before{content:\"<\"!important}.nxe-data-grid .dx-icon-filter-operation-greater:before,.nxe-fr-op-menu .dx-icon-filter-operation-greater:before{content:\">\"!important}.nxe-data-grid .dx-icon-filter-operation-less-equal:before,.nxe-fr-op-menu .dx-icon-filter-operation-less-equal:before{content:\"\\2264\"!important}.nxe-data-grid .dx-icon-filter-operation-greater-equal:before,.nxe-fr-op-menu .dx-icon-filter-operation-greater-equal:before{content:\"\\2265\"!important}.nxe-data-grid .dx-icon-filter-operation-between:before,.nxe-fr-op-menu .dx-icon-filter-operation-between:before{content:\"\\2194\"!important}.nxe-fr-op-menu{background:#fff;border:1px solid #ddd;box-shadow:0 2px 6px #00000026;padding:4px 0;min-width:180px}.nxe-fr-op-menu .dx-menu-item{display:flex;align-items:center;gap:8px;padding:6px 24px 6px 8px;cursor:pointer;color:#333}.nxe-fr-op-menu .dx-menu-item:hover{background:#f0f0f0}.nxe-fr-op-menu .dx-menu-item.dx-menu-item-selected{background:#e6e6e6}.nxe-fr-op-menu .dx-menu-item .dx-icon{width:18px;text-align:center}.nxe-data-grid .nxe-col-resize-handle{position:absolute;right:-4px;top:0;bottom:0;width:8px;cursor:col-resize;z-index:2;touch-action:none}body.nxe-grid-resizing{cursor:col-resize;user-select:none;-webkit-user-select:none}.nxe-col-drop-indicator{position:fixed;width:2px;background:#337ab7;z-index:10000;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { declaredColumns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxeColumnComponent), { ...{ descendants: false }, isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxeTemplateDirective), { isSignal: true }] }], selection: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeSelectionComponent), { isSignal: true }] }], headerFilter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeHeaderFilterComponent), { isSignal: true }] }], grouping: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeGroupingComponent), { isSignal: true }] }], groupPanel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeGroupPanelComponent), { isSignal: true }] }], summaryCmp: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeSummaryComponent), { isSignal: true }] }], pagingCmp: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxePagingComponent), { isSignal: true }] }], pagerCmp: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxePagerComponent), { isSignal: true }] }], editingCmp: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeEditingComponent), { isSignal: true }] }], filterRowCmp: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeFilterRowComponent), { isSignal: true }] }], masterDetail: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeMasterDetailComponent), { isSignal: true }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], keyExpr: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExpr", required: false }] }], hoverStateEnabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverStateEnabled", required: false }] }], showColumnLinesInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnLines", required: false }] }], showRowLinesInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRowLines", required: false }] }], showBordersInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBorders", required: false }] }], wordWrapEnabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "wordWrapEnabled", required: false }] }], columnAutoWidthInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnAutoWidth", required: false }] }], rowAlternationEnabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowAlternationEnabled", required: false }] }], remoteOperations: [{ type: i0.Input, args: [{ isSignal: true, alias: "remoteOperations", required: false }] }], syncLookupFilterValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncLookupFilterValues", required: false }] }], columnMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnMinWidth", required: false }] }], noDataTextInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataText", required: false }] }], loadPanel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadPanel", required: false }] }], paging: [{ type: i0.Input, args: [{ isSignal: true, alias: "paging", required: false }] }], filterRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterRow", required: false }] }], headerFilterOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerFilter", required: false }] }], groupingOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouping", required: false }] }], groupPanelOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupPanel", required: false }] }], scrolling: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrolling", required: false }] }], sorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorting", required: false }] }], allowColumnResizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowColumnResizing", required: false }] }], columnResizingMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnResizingMode", required: false }] }], allowColumnReordering: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowColumnReordering", required: false }] }], repaintChangesOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "repaintChangesOnly", required: false }] }], showColumnHeaders: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnHeaders", required: false }] }], parentIdExpr: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentIdExpr", required: false }] }], dataStructure: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataStructure", required: false }] }], rootValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootValue", required: false }] }], autoExpandAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoExpandAll", required: false }] }], expandedRowKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRowKeys", required: false }] }, { type: i0.Output, args: ["expandedRowKeysChange"] }], selectedRowKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRowKeys", required: false }] }, { type: i0.Output, args: ["selectedRowKeysChange"] }], mergeColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "mergeColumns", required: false }] }], onSelectionChanged: [{ type: i0.Output, args: ["onSelectionChanged"] }], onRowClick: [{ type: i0.Output, args: ["onRowClick"] }], onContentReady: [{ type: i0.Output, args: ["onContentReady"] }], onOptionChanged: [{ type: i0.Output, args: ["onOptionChanged"] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], onCellPrepared: [{
+                type: Output
+            }], onRowPrepared: [{
+                type: Output
+            }], onRowExpanding: [{ type: i0.Output, args: ["onRowExpanding"] }], onRowExpanded: [{ type: i0.Output, args: ["onRowExpanded"] }], frMenuPanel: [{ type: i0.ViewChild, args: ['frOpMenu', { isSignal: true }] }] } });
+
+// @nexterajs/ui/grid — public API.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NXE_HF_BLANKS, NxeColumnComponent, NxeDataGridComponent, NxeDragGesture, NxeEditingComponent, NxeFilterRowComponent, NxeGestureClickSuppression, NxeGridDragController, NxeGroupItemComponent, NxeGroupPanelComponent, NxeGroupingComponent, NxeHeaderFilterComponent, NxeHeaderFilterModel, NxeHeaderFilterPanelComponent, NxeMasterDetailComponent, NxePagerComponent, NxePagingComponent, NxeScrollingComponent, NxeSelectionComponent, NxeSummaryComponent, NxeTotalItemComponent, exportDataGrid, exportNxeGridToExcel, nxeDatePattern, nxeDefaultFormat, nxeExcelNumFmt, nxeFormatNumberValue, nxeHfKey, nxeNumberMask, openNxeHeaderFilterOverlay };
+//# sourceMappingURL=nexterajs-ui-grid.mjs.map