@nexterajs/ui 0.0.1 → 0.1.0

package/fesm2022/nexterajs-ui-grid.mjs

@@ -1,12 +1,15 @@
-import { formatNumber, parseNumberFormat, parseDateValue, formatDisplay } from '@nexterajs/ui/intl';
+import { NXE_EN_US_SEPARATORS, formatNumber, parseNumberFormat, parseDateValue, formatDisplay, NXE_NUMBER_SEPARATORS } 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 { input, ViewEncapsulation, ChangeDetectionStrategy, Component, contentChildren, contentChild, computed, signal, inject, output, viewChild, Directive, model, ElementRef, Injector, numberAttribute, booleanAttribute, linkedSignal, afterNextRender, ViewContainerRef, NgZone, DestroyRef, EventEmitter, untracked, afterRenderEffect, Output } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
+import { NxeMessageService, NXE_DEFAULT_OPTIONS, NxeTemplateDirective, nxeResolveExpr, nxeResolveText } from '@nexterajs/ui/core';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { nxePane } from '@nexterajs/ui/styling';
 import { Workbook, nxeSaveAs } from '@nexterajs/ui/excel';
+import { isObservable, debounce, of, timer } from 'rxjs';
 import { Overlay } from '@angular/cdk/overlay';
-import { NXE_DEFAULT_OPTIONS, NxeTemplateDirective } from '@nexterajs/ui/core';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { DateTime, Info } from 'luxon';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // Shared value-formatting helpers for the nxe grid family — the single source of truth for how
@@ -55,21 +58,22 @@ function nxeNumberMask(format) {
  * `{ formatter }`). No format / an unresolvable one → `String(value)` (the grid's untyped
  * rendering).
  */
-function nxeFormatNumberValue(value, format) {
+function nxeFormatNumberValue(value, format, separators = NXE_EN_US_SEPARATORS) {
     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));
+            return formatNumber(value * 100, parseNumberFormat(mask), separators);
         }
     }
     const mask = nxeNumberMask(format);
-    return mask ? formatNumber(value, parseNumberFormat(mask)) : String(value);
+    return mask ? formatNumber(value, parseNumberFormat(mask), separators) : String(value);
 }
 /**
- * Derive the Excel `numFmt` mask for a `format`: string masks pass through, fixedPoint/currency
+ * Derive the Excel `numFmt` mask for a `format`: string masks go through
+ * {@link nxeExcelNumberMask} (the same conversion the grid export uses), 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).
@@ -79,7 +83,7 @@ function nxeExcelNumFmt(format) {
         return undefined;
     }
     if (typeof format === 'string') {
-        return format;
+        return nxeExcelNumberMask(format);
     }
     if (typeof format.formatter === 'function') {
         return undefined;
@@ -89,65 +93,175 @@ function nxeExcelNumFmt(format) {
     }
     return nxeNumberMask(format) ?? format.type ?? undefined;
 }
+/** Excel's digit placeholders. */
+const NXE_DIGIT_PLACEHOLDERS = new Set(['0', '#', '?']);
+/**
+ * Excel `numFmt` for a dx LDML string mask.
+ *
+ * The two languages disagree on one character. In Excel an unquoted comma after the last digit
+ * placeholder SCALES the value by 1/1000, while dx's LDML engine ignores it (see the golden
+ * transcript in `@nexterajs/ui/intl`). The consumer percent mask `#,##0.00,'%'` therefore
+ * exported 100 as "0.10%". Dropped here, per `;` section: every unquoted comma after the
+ * section's decimal point, and a comma that follows a digit placeholder with no placeholder
+ * after it before the section's decimal point or end (`#,##0,'%'`, `#,##0,.00`) — none of them
+ * ever meant anything to dx. Grouping commas between integer placeholders stay, and
+ * single-quoted literals become Excel's double-quoted ones.
+ */
+function nxeExcelNumberMask(mask) {
+    const chars = Array.from(mask);
+    // Whether each character is part of a single-quoted literal (its quotes included).
+    const quoted = [];
+    let inQuote = false;
+    for (const ch of chars) {
+        if (ch === "'") {
+            inQuote = !inQuote;
+            quoted.push(true);
+        }
+        else {
+            quoted.push(inQuote);
+        }
+    }
+    /** A digit placeholder follows the comma at `i` in its section's integer part: it groups. */
+    const groups = (i) => {
+        for (let j = i + 1; j < chars.length; j++) {
+            if (quoted[j]) {
+                continue;
+            }
+            if (chars[j] === '.' || chars[j] === ';') {
+                return false;
+            }
+            if (NXE_DIGIT_PLACEHOLDERS.has(chars[j])) {
+                return true;
+            }
+        }
+        return false;
+    };
+    let out = '';
+    let afterPoint = false;
+    // The last unquoted character that was not a comma, within the current section.
+    let prev = '';
+    for (let i = 0; i < chars.length; i++) {
+        const ch = chars[i];
+        if (ch === "'") {
+            out += '"';
+            continue;
+        }
+        if (!quoted[i]) {
+            if (ch === ';') {
+                afterPoint = false;
+                prev = '';
+                out += ch;
+                continue;
+            }
+            if (ch === '.') {
+                afterPoint = true;
+            }
+            if (ch === ',') {
+                if (afterPoint || (NXE_DIGIT_PLACEHOLDERS.has(prev) && !groups(i))) {
+                    continue;
+                }
+            }
+            else {
+                prev = ch;
+            }
+        }
+        out += ch;
+    }
+    return out;
+}
+/**
+ * dx `getValueDataType` (m_columns_controller_utils.js:230-236): the type a value contributes
+ * to column type inference. `null`, arrays and functions contribute nothing.
+ */
+function nxeValueDataType(v) {
+    if (v == null || Array.isArray(v)) {
+        return undefined;
+    }
+    if (v instanceof Date) {
+        return 'date';
+    }
+    const t = typeof v;
+    return t === 'string' || t === 'number' || t === 'boolean' || t === 'object' ? t : undefined;
+}
+/**
+ * dx's number-column deserializer (m_columns_controller_utils.js:263 `updateSerializers`):
+ * `parseFloat`, so "20.5" is 20.5 and "1,234" is 1 exactly as dx shows it. `NaN` when the
+ * value is not numeric at all, which callers render raw.
+ */
+function nxeNumberValue(raw) {
+    return typeof raw === 'number' ? raw : parseFloat(String(raw));
+}
 /**
  * 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.
+ * `dataType`/`format` → display text.
+ *
+ * dx's format_helper (format_helper.js:23-43) formats by the VALUE, not by the column type: any
+ * JS number meets any valid `format`, whatever the column declared. So a number in an untyped
+ * or string column still takes its mask, and a number column honours object formats as well.
  */
-function nxeDefaultFormat(dataType, format, raw) {
+function nxeDefaultFormat(dataType, format, raw, separators = NXE_EN_US_SEPARATORS, locale) {
     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));
+            const num = nxeNumberValue(raw);
+            return isNaN(num) ? String(raw) : nxeFormatNumberValue(num, format, separators);
         }
         case 'date': {
             const dt = parseDateValue(raw);
-            return dt ? formatDisplay(dt, nxeDatePattern(format)) : String(raw);
+            return dt ? formatDisplay(dt, nxeDatePattern(format), locale) : String(raw);
         }
         case 'boolean':
             return raw ? '✓' : '';
         default:
-            return String(raw);
+            // No format (or an unresolvable one) leaves the number as String(value), as dx does.
+            return typeof raw === 'number' ? nxeFormatNumberValue(raw, format, separators) : 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
+ * Both questions here used to be answered with `querySelector('.nxe-header-row')`, which stopped
  * being right once bands could add header rows above the leaves.
  */
 /**
- * The all-leaves header row of THIS grid.
+ * The bottom `.nxe-header-row` of THIS grid.
+ *
+ * Used for header-strip geometry — the drop highlight and the drag indicator's vertical extent.
+ * 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.
  *
- * 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.
+ * It is NOT one cell per column — see {@link nxeHeaderLeafCells}.
  */
 function nxeLeafHeaderRow(host) {
-    const thead = host.querySelector('.dx-datagrid-content > .dx-datagrid-table > thead');
-    const rows = thead?.querySelectorAll('.dx-header-row');
+    const thead = host.querySelector('.nxe-datagrid-content > .nxe-datagrid-table > thead');
+    const rows = thead?.querySelectorAll('.nxe-header-row');
     return rows && rows.length ? rows[rows.length - 1] : null;
 }
 /**
- * The data cells of a header row, command columns removed.
+ * The header cell of each visible data column, in visible-column order.
  *
- * 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.
+ * Deliberately not "the cells of the bottom header row". A top-level column in a banded grid is
+ * emitted in the FIRST header row with a rowspan reaching the bottom, so the bottom row holds
+ * only the leaves that sit under a band: `Name | Shared(Gross, Comm) | Total` puts Name and Total
+ * in row 0 and just Gross and Comm in row 1. Reading the bottom row loses half the columns, and
+ * everything that indexes these by visible position — auto-width, resize, reorder, keyboard
+ * focus — then addresses the wrong column.
+ *
+ * `role="columnheader"` plus `aria-colindex` is the discriminator: every leaf header cell carries
+ * both, a band is a column header without a number, and a command cell (group indent, detail
+ * expander, select-all, edit) is numbered, as dx numbers it, but is no column header
+ * (m_column_headers.js:193). The number already accounts for the lead command columns, so sorting
+ * on it recovers visible order across however many rows the header happens to have.
  */
-function nxeHeaderDataCells(row) {
-    if (!row) {
+function nxeHeaderLeafCells(host) {
+    const thead = host.querySelector('.nxe-datagrid-content > .nxe-datagrid-table > thead');
+    if (!thead) {
         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'));
+    return Array.from(thead.querySelectorAll('.nxe-header-row > [role="columnheader"][aria-colindex]')).sort((a, b) => Number(a.getAttribute('aria-colindex')) - Number(b.getAttribute('aria-colindex')));
 }
 
 /**
@@ -156,16 +270,16 @@ function nxeHeaderDataCells(row) {
  *
  * 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
+ * ghosts must be dx's exact clones (`.nxe-datagrid-drag-header` for the grid,
+ * `.nxe-pivotgrid-fields-container.nxe-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`
+ * - grid ghost: `div.nxe-datagrid-drag-header.nxe-datagrid-text-content.nxe-widget.nxe-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`;
+ * - insertion indicator: `div.nxe-block-separator` placed between panel chips;
+ * - chip drag highlights the header row with `nxe-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).
  */
@@ -357,7 +471,7 @@ class NxeGridDragController {
             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';
+                    'nxe-datagrid-drag-header nxe-datagrid-text-content nxe-widget nxe-datagrid-drag-action nxe-grid-drag-ghost';
                 const col = this.drag?.col;
                 ghost.textContent = col ? col.caption() || col.dataField() : '';
                 ghost.style.whiteSpace = 'nowrap';
@@ -367,7 +481,7 @@ class NxeGridDragController {
             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');
+                    this.headerRow()?.classList.add('nxe-datagrid-drop-highlight');
                 }
             },
             dragMove: (x, y) => {
@@ -381,7 +495,7 @@ class NxeGridDragController {
                     this.removeSeparator(this.drag);
                     this.removeColIndicator(this.drag);
                 }
-                this.headerRow()?.classList.remove('dx-datagrid-drop-highlight');
+                this.headerRow()?.classList.remove('nxe-datagrid-drop-highlight');
             },
             reset: () => {
                 this.drag = null;
@@ -430,7 +544,7 @@ class NxeGridDragController {
         }
         this.removeColIndicator(a);
         a.headerSlot = null;
-        const chips = Array.from(panel.querySelectorAll('.dx-group-panel-item'));
+        const chips = Array.from(panel.querySelectorAll('.nxe-group-panel-item'));
         if (a.kind === 'header') {
             // dx appends on header→panel drop; the indicator sits after the last chip.
             a.dropIndex = chips.length;
@@ -518,7 +632,7 @@ class NxeGridDragController {
     placeSeparator(a, panel, chips, index) {
         if (!a.separator) {
             a.separator = document.createElement('div');
-            a.separator.className = 'dx-block-separator';
+            a.separator.className = 'nxe-block-separator';
             a.separator.textContent = ' '; // dx renders the separator as an &nbsp; block
         }
         const reference = chips[index] ?? null;
@@ -531,7 +645,7 @@ class NxeGridDragController {
         a.separator = null;
     }
     panel() {
-        return this.hooks.host().querySelector('.dx-datagrid-group-panel');
+        return this.hooks.host().querySelector('.nxe-datagrid-group-panel');
     }
     headerRow() {
         return nxeLeafHeaderRow(this.hooks.host());
@@ -542,6 +656,52 @@ class NxeGridDragController {
 // 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`).
 
+/**
+ * `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 */ []));
+    /**
+     * dx `headerFilter.dataSource` — a fixed `{ text, value }` list shown instead of the values
+     * derived from the rows.
+     */
+    dataSource = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataSource" }] : /* 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 }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", 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 }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }] } });
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * `nxe-column` — drop-in replacement for DevExtreme `dxi-column`.
@@ -557,7 +717,11 @@ class NxeColumnComponent {
     /** 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 */
+    /**
+     * Unset = dx: inferred from the loaded data (m_columns_controller.js:914-975), so a numeric
+     * column nobody typed still right-aligns and honours its `format`. Declaring it wins.
+     */
+    dataType = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dataType" }] : /* istanbul ignore next */ []));
     /** px width — number (`[width]="150"`) or numeric string (`width="200"`). */
     width = input(undefined, /* @ts-ignore */
@@ -643,11 +807,17 @@ class NxeColumnComponent {
      * 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 });
+    /**
+     * A `<nxe-header-filter>` declared inside this column, dx's per-column `headerFilter`
+     * config. Only its `dataSource` is read here; visibility and search stay grid-level.
+     */
+    headerFilterConfig = contentChild(NxeHeaderFilterComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerFilterConfig" }] : /* istanbul ignore next */ []));
     /** 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 });
+    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 }, { propertyName: "headerFilterConfig", first: true, predicate: NxeHeaderFilterComponent, descendants: true, 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,
@@ -659,7 +829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     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 }] }] } });
+        }], 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 }] }], headerFilterConfig: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeHeaderFilterComponent), { isSignal: true }] }] } });
 
 /**
  * `nxe-selection` — drop-in replacement for DevExtreme `dxo-selection` (grid child option).
@@ -697,46 +867,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                 }]
         }], 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
@@ -749,6 +879,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
  * {@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.
+ * (Select All)'s indeterminate state ({@link NxeHeaderFilterModel.someChecked}) is derived
+ * from the same draft and search scope, and changes none of these rules.
  */
 /**
  * Header-filter key for blank-ish values (`null`/`undefined`/`''`) — dx lists them as one
@@ -769,12 +901,18 @@ function nxeHfKey(raw, isDate) {
     }
     return raw;
 }
-class NxeHeaderFilterModel {
-    source;
-    static MONTH_NAMES = [
+const NXE_HF_ENGLISH_LABELS = {
+    blanks: () => '(Blanks)',
+    yes: () => 'Yes',
+    no: () => 'No',
+    month: (month) => [
         'January', 'February', 'March', 'April', 'May', 'June',
         'July', 'August', 'September', 'October', 'November', 'December',
-    ];
+    ][month - 1],
+};
+class NxeHeaderFilterModel {
+    source;
+    labels;
     /** The column whose popup is open (`null` = closed). */
     column = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
@@ -785,8 +923,13 @@ class NxeHeaderFilterModel {
     ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
     expanded = signal(new Set(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
-    constructor(source) {
+    constructor(source, labels = NXE_HF_ENGLISH_LABELS) {
         this.source = source;
+        this.labels = labels;
+    }
+    /** The popup's wording for a boolean bucket. */
+    boolText(label) {
+        return label === null ? null : label === 'Yes' ? this.labels.yes() : this.labels.no();
     }
     /** This column's header-filter key for a raw value. */
     key(column, raw) {
@@ -798,6 +941,10 @@ class NxeHeaderFilterModel {
         if (!col) {
             return [];
         }
+        const fixed = this.source.fixedItems?.(col);
+        if (fixed) {
+            return fixed;
+        }
         const seen = new Map();
         for (const row of this.source.rows()) {
             const raw = this.source.rawValue(col, row);
@@ -807,8 +954,8 @@ class NxeHeaderFilterModel {
                     key,
                     raw,
                     text: key === NXE_HF_BLANKS
-                        ? '(Blanks)'
-                        : (this.source.boolLabel(col, raw) ?? this.source.displayText(col, row)),
+                        ? this.labels.blanks()
+                        : (this.boolText(this.source.boolLabel(col, raw)) ?? this.source.displayText(col, row)),
                 });
             }
         }
@@ -866,7 +1013,7 @@ class NxeHeaderFilterModel {
         }
         const out = [];
         if (hasBlanks) {
-            out.push({ label: '(Blanks)', key: 'blanks', children: [], leafKeys: [NXE_HF_BLANKS] });
+            out.push({ label: this.labels.blanks(), key: 'blanks', children: [], leafKeys: [NXE_HF_BLANKS] });
         }
         const byYear = new Map();
         for (const day of [...days].sort()) {
@@ -885,7 +1032,7 @@ class NxeHeaderFilterModel {
             const monthNodes = [];
             for (const [month, dayKeys] of months) {
                 monthNodes.push({
-                    label: NxeHeaderFilterModel.MONTH_NAMES[month - 1],
+                    label: this.labels.month(month),
                     key: `m:${year}-${month}`,
                     children: dayKeys.map((d) => ({
                         label: String(Number(d.slice(8, 10))),
@@ -979,6 +1126,20 @@ class NxeHeaderFilterModel {
         return all.length > 0 && all.every((k) => draft.has(k));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "allChecked" }] : /* istanbul ignore next */ []));
+    /**
+     * (Select All)'s third state: some visible keys checked, but not all. dx shows it as the
+     * indeterminate square (the select-all dxCheckBox's `value: undefined`). It is never true
+     * together with {@link allChecked}, so check-on-open, which checks everything when no filter
+     * is applied, always opens on a fully checked box and never on a half-checked one.
+     */
+    someChecked = computed(() => {
+        if (this.allChecked()) {
+            return false;
+        }
+        const draft = this.draft();
+        return this.visibleKeys().some((k) => draft.has(k));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "someChecked" }] : /* istanbul ignore next */ []));
     /** Whether every key of the whole column is checked — decides "no filter" on apply. */
     fullChecked = computed(() => {
         const all = this.allKeys();
@@ -1033,14 +1194,18 @@ class NxeHeaderFilterModel {
  * 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.
+ * the host element carries `nxe-header-filter-menu nxe-hf-panel`, exactly where the old
+ * template's root `<div>` sat inside the overlay pane. The dx-parity pass only added to that DOM:
+ * the `input.nxe-hf-search` now sits in a `.nxe-hf-searchbox` with its magnifier and clear
+ * button, and rows also carry `.nxe-hf-list-item` / `.nxe-hf-tree-item`.
  *
  * 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 {
+    /** The library's runtime-switchable messages. */
+    messages = inject(NxeMessageService);
     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
@@ -1051,16 +1216,24 @@ class NxeHeaderFilterPanelComponent {
     applied = output();
     /** Cancel — the host closes without committing. */
     cancelled = output();
+    searchInput = viewChild('searchInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []));
     showSearch() {
         return this.searchEnabled()();
     }
+    /** The search box's clear button (dx search mode forces `showClearButton`): empties the
+        search and keeps the caret in the box, as dx's clear does. */
+    clearSearch() {
+        this.model().search.set('');
+        this.searchInput()?.nativeElement.focus();
+    }
     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 });
+    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: "nxe-header-filter-menu nxe-hf-panel" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (showSearch()) {\r\n    <!-- dx builds this as a dxTextBox in mode 'search' (the list/tree searchEnabled option), which\r\n         forces showClearButton: a magnifier in a 34px slot inside the left border, and a clear\r\n         button in a 34px area inside the right border that only exists while there is text to\r\n         clear. Both glyphs are drawn here from primitives; the DXIcons font is not used. -->\r\n    <div class=\"nxe-hf-searchbox\">\r\n        <!-- The magnifier both search boxes share (dx draws them with one rule,\r\n             .dx-searchbox .dx-icon-search): a r4.75 ring and a 45deg handle, 1.9px strokes. Keep\r\n             it identical to the tree view's (nxe-tree-view.component.html). -->\r\n        <svg class=\"nxe-hf-search-icon\" viewBox=\"0 0 34 34\" aria-hidden=\"true\" focusable=\"false\">\r\n            <circle cx=\"15\" cy=\"15\" r=\"4.75\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" />\r\n            <path d=\"M18.5 18.5 23.5 23.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" />\r\n        </svg>\r\n        <input\r\n            #searchInput\r\n            class=\"nxe-hf-search\"\r\n            type=\"text\"\r\n            [attr.placeholder]=\"messages.t('common.search')\"\r\n            [attr.aria-label]=\"messages.t('common.search')\"\r\n            [value]=\"model().search()\"\r\n            (input)=\"model().search.set($any($event.target).value)\" />\r\n        @if (model().search()) {\r\n            <button\r\n                class=\"nxe-hf-search-clear\"\r\n                type=\"button\"\r\n                tabindex=\"-1\"\r\n                [attr.aria-label]=\"messages.t('common.clear')\"\r\n                (mousedown)=\"$event.preventDefault()\"\r\n                (click)=\"clearSearch()\">\r\n                <!-- The editors' clear glyph: a 16px disc with a 2px x cut out, two 2px bars\r\n                     each running corner to corner of the 8px square centred on the disc, drawn as\r\n                     a plus and turned 45deg. -->\r\n                <svg viewBox=\"0 0 18 18\" aria-hidden=\"true\" focusable=\"false\">\r\n                    <path\r\n                        fill=\"currentColor\"\r\n                        fill-rule=\"evenodd\"\r\n                        transform=\"rotate(45 9 9)\"\r\n                        d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\r\n                </svg>\r\n            </button>\r\n        }\r\n    </div>\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\r\n            type=\"checkbox\"\r\n            [checked]=\"model().allChecked()\"\r\n            [indeterminate]=\"model().someChecked()\"\r\n            (change)=\"model().toggleAll()\" />\r\n        <span>{{ messages.t('common.selectAll') }}</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 nxe-hf-list-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()\">{{ messages.t('common.ok') }}</button>\r\n    <button type=\"button\" class=\"nxe-hf-btn\" (click)=\"cancelled.emit()\">{{ messages.t('common.cancel') }}</button>\r\n</div>\r\n\r\n<!-- Recursive date-tree nodes for the header-filter popup. Each node's first grid row is dx's\r\n     .dx-treeview-item: the toggle (or its stub) and the label share it, the label spanning the\r\n     whole row so its hover paints the full row, as dx's does. -->\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 nxe-hf-tree-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;box-sizing:border-box;width:252px;height:325px;min-width:var(--nxe-ui-header-filter-min-width, 0px);padding:20px 0 0;background:var(--nxe-ui-surface, #fff);border:1px solid var(--nxe-ui-border, #ddd);border-radius:var(--nxe-ui-popup-radius, 6px);box-shadow:var(--nxe-ui-popup-shadow, 0 6px 12px rgba(0, 0, 0, .175));color:var(--nxe-ui-text, #333)}.nxe-hf-panel .nxe-hf-searchbox{position:relative;display:flex;flex:0 0 auto;box-sizing:border-box;margin:0 20px 5px;padding:0;border:1px solid var(--nxe-ui-border, #ddd);border-radius:var(--nxe-ui-radius, 4px);background:var(--nxe-ui-surface, #fff)}.nxe-hf-panel .nxe-hf-searchbox:hover{border-color:var(--nxe-ui-accent-faded, rgba(51, 122, 183, .4))}.nxe-hf-panel .nxe-hf-searchbox:focus-within{border-color:var(--nxe-ui-accent, #337ab7)}.nxe-hf-panel .nxe-hf-search{-webkit-appearance:none;appearance:none;flex:1 1 auto;min-width:0;width:100%;box-sizing:border-box;min-height:34px;margin:0;padding:7px 9px 8px;padding-inline-start:34px;border:0;border-radius:var(--nxe-ui-radius, 4px);outline:0;background:transparent;color:var(--nxe-ui-text, #333);font:inherit}.nxe-hf-panel .nxe-hf-search::placeholder{color:var(--nxe-ui-text-muted, #999);opacity:1}.nxe-hf-panel .nxe-hf-search-icon{position:absolute;top:50%;left:0;display:block;box-sizing:border-box;width:34px;height:34px;margin-top:-17px;color:var(--nxe-ui-text-muted, #999);pointer-events:none}.nxe-hf-panel .nxe-hf-search-clear{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 34px;box-sizing:border-box;width:34px;min-width:34px;margin:0;padding:0;border:0;background:transparent;color:var(--nxe-ui-text-muted, #999);cursor:pointer}.nxe-hf-panel .nxe-hf-search-clear svg{display:block;width:18px;height:18px}.nxe-hf-panel .nxe-hf-list{flex:1 1 auto;min-height:0;margin:0 20px 20px;padding:0;overflow-x:hidden;overflow-y:auto}.nxe-hf-panel .nxe-hf-item{box-sizing:border-box;margin:0;cursor:pointer}.nxe-hf-panel .nxe-hf-item>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nxe-hf-panel .nxe-hf-list-item{display:flex;align-items:center;padding:0}.nxe-hf-panel .nxe-hf-list-item>input[type=checkbox]{margin:-1px 0 -3px;margin-inline:10px -1px}.nxe-hf-panel .nxe-hf-list-item>span{flex:1 1 auto;min-width:0;padding:10px}.nxe-hf-panel .nxe-hf-list-item+.nxe-hf-list-item{border-top:1px solid var(--nxe-ui-border, #ddd)}.nxe-hf-panel .nxe-hf-selectall{display:block;padding:9px 0 8px;border-bottom:1px solid var(--nxe-ui-border, #ddd);white-space:nowrap}.nxe-hf-panel .nxe-hf-selectall>input[type=checkbox]{float:inline-start;margin:-1px 0 -3px;margin-inline:10px 0}.nxe-hf-panel .nxe-hf-selectall>span{display:inline-block;box-sizing:border-box;max-width:calc(100% - 32px);margin-top:1px;padding:0 10px;line-height:17px;vertical-align:baseline}.nxe-hf-panel .nxe-hf-list-item:hover>input[type=checkbox]:not(:focus-visible),.nxe-hf-panel .nxe-hf-selectall:hover>input[type=checkbox]:not(:focus-visible){border-color:var(--nxe-ui-checkbox-hover-border, #265a87)}.nxe-hf-panel .nxe-hf-tree>.nxe-hf-selectall{display:flex;align-items:center;padding:9px 40px 11px}.nxe-hf-panel .nxe-hf-tree>.nxe-hf-selectall>input[type=checkbox]{float:none;margin:0}.nxe-hf-panel .nxe-hf-tree>.nxe-hf-selectall>span{display:block;flex:0 1 auto;min-width:0;max-width:none;margin:0;padding:0;padding-inline-start:8px;line-height:inherit}.nxe-hf-panel .nxe-hf-tree-node{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;white-space:nowrap}.nxe-hf-panel .nxe-hf-tree-toggle,.nxe-hf-panel .nxe-hf-tree-toggle-stub{grid-area:1/1;justify-self:end;position:relative;display:block;box-sizing:border-box;width:22px;height:22px}.nxe-hf-panel .nxe-hf-tree-toggle{color:var(--nxe-ui-text, #333);cursor:pointer}.nxe-hf-panel .nxe-hf-tree-toggle:before{content:\"\";position:absolute;left:50%;top:50%;box-sizing:border-box;width:0;height:0;margin:-4px 0 0 -2px;border-style:solid;border-width:4px 0 4px 4px;border-color:transparent transparent transparent currentColor;transform:none}.nxe-hf-panel .nxe-hf-tree-toggle.nxe-expanded:before{margin:-2px 0 0 -4px;border-width:4px 4px 0;border-color:currentColor transparent transparent}.nxe-hf-panel .nxe-hf-tree-toggle-stub{pointer-events:none}.nxe-hf-panel .nxe-hf-tree-item{grid-area:1/1/2/3;display:flex;align-items:center;gap:8px;padding:5px 10px;padding-inline-start:40px;pointer-events:none}.nxe-hf-panel .nxe-hf-tree-item>input[type=checkbox],.nxe-hf-panel .nxe-hf-tree-item>span{pointer-events:auto}.nxe-hf-panel .nxe-hf-tree-item>span{flex:0 1 auto;min-width:0}.nxe-hf-panel .nxe-hf-tree-children{grid-area:2/1/3/3;padding-inline-start:15px}.nxe-hf-panel .nxe-hf-tree-node:hover:not(:has(>.nxe-hf-tree-children:hover))>.nxe-hf-tree-item{background-color:var(--nxe-ui-hover-bg, rgba(0, 0, 0, .04));color:var(--nxe-ui-text, #333)}.nxe-hf-panel .nxe-hf-actions{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:10px;box-sizing:content-box;height:36px;padding:20px}.nxe-hf-panel .nxe-hf-btn{box-sizing:border-box;min-width:100px;padding:8px 12px;border:1px solid var(--nxe-ui-border, #ddd);border-radius:var(--nxe-ui-radius, 4px);background:transparent;color:inherit;cursor:pointer;font:inherit;line-height:1.2858}.nxe-hf-panel .nxe-hf-btn:hover{background:var(--nxe-ui-hover-bg, rgba(0, 0, 0, .04))}.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 var(--nxe-ui-border, #ddd);border-radius:2px;background:var(--nxe-ui-surface, #fff);color:var(--nxe-ui-accent, #337ab7);cursor:pointer}.nxe-hf-panel input[type=checkbox]:checked:not(:indeterminate):after{content:\"\";position:absolute;left:50%;top:50%;box-sizing:border-box;width:7.5px;height:13.25px;margin:-8.1px 0 0 -3.75px;border:solid currentColor;border-width:0 2px 2px 0;border-radius:0;background:none;transform:rotate(45deg)}.nxe-hf-panel input[type=checkbox]:indeterminate:after{content:\"\";position:absolute;left:50%;top:50%;box-sizing:border-box;width:12px;height:12px;margin:-6px 0 0 -6px;border:0;border-radius:2px;background:currentColor;transform:none}@media(forced-colors:active){.nxe-hf-panel input[type=checkbox]:indeterminate:after{forced-color-adjust:none;background-color:CanvasText}}.nxe-hf-panel input[type=checkbox]:hover{border-color:var(--nxe-ui-checkbox-hover-border, #265a87)}.nxe-hf-panel input[type=checkbox]:focus-visible{outline:none;border-color:var(--nxe-ui-accent, #337ab7)}\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"] }] } });
+            args: [{ selector: 'nxe-header-filter-panel', standalone: true, imports: [NgTemplateOutlet], host: { class: 'nxe-header-filter-menu nxe-hf-panel' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (showSearch()) {\r\n    <!-- dx builds this as a dxTextBox in mode 'search' (the list/tree searchEnabled option), which\r\n         forces showClearButton: a magnifier in a 34px slot inside the left border, and a clear\r\n         button in a 34px area inside the right border that only exists while there is text to\r\n         clear. Both glyphs are drawn here from primitives; the DXIcons font is not used. -->\r\n    <div class=\"nxe-hf-searchbox\">\r\n        <!-- The magnifier both search boxes share (dx draws them with one rule,\r\n             .dx-searchbox .dx-icon-search): a r4.75 ring and a 45deg handle, 1.9px strokes. Keep\r\n             it identical to the tree view's (nxe-tree-view.component.html). -->\r\n        <svg class=\"nxe-hf-search-icon\" viewBox=\"0 0 34 34\" aria-hidden=\"true\" focusable=\"false\">\r\n            <circle cx=\"15\" cy=\"15\" r=\"4.75\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" />\r\n            <path d=\"M18.5 18.5 23.5 23.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" />\r\n        </svg>\r\n        <input\r\n            #searchInput\r\n            class=\"nxe-hf-search\"\r\n            type=\"text\"\r\n            [attr.placeholder]=\"messages.t('common.search')\"\r\n            [attr.aria-label]=\"messages.t('common.search')\"\r\n            [value]=\"model().search()\"\r\n            (input)=\"model().search.set($any($event.target).value)\" />\r\n        @if (model().search()) {\r\n            <button\r\n                class=\"nxe-hf-search-clear\"\r\n                type=\"button\"\r\n                tabindex=\"-1\"\r\n                [attr.aria-label]=\"messages.t('common.clear')\"\r\n                (mousedown)=\"$event.preventDefault()\"\r\n                (click)=\"clearSearch()\">\r\n                <!-- The editors' clear glyph: a 16px disc with a 2px x cut out, two 2px bars\r\n                     each running corner to corner of the 8px square centred on the disc, drawn as\r\n                     a plus and turned 45deg. -->\r\n                <svg viewBox=\"0 0 18 18\" aria-hidden=\"true\" focusable=\"false\">\r\n                    <path\r\n                        fill=\"currentColor\"\r\n                        fill-rule=\"evenodd\"\r\n                        transform=\"rotate(45 9 9)\"\r\n                        d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\r\n                </svg>\r\n            </button>\r\n        }\r\n    </div>\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\r\n            type=\"checkbox\"\r\n            [checked]=\"model().allChecked()\"\r\n            [indeterminate]=\"model().someChecked()\"\r\n            (change)=\"model().toggleAll()\" />\r\n        <span>{{ messages.t('common.selectAll') }}</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 nxe-hf-list-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()\">{{ messages.t('common.ok') }}</button>\r\n    <button type=\"button\" class=\"nxe-hf-btn\" (click)=\"cancelled.emit()\">{{ messages.t('common.cancel') }}</button>\r\n</div>\r\n\r\n<!-- Recursive date-tree nodes for the header-filter popup. Each node's first grid row is dx's\r\n     .dx-treeview-item: the toggle (or its stub) and the label share it, the label spanning the\r\n     whole row so its hover paints the full row, as dx's does. -->\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 nxe-hf-tree-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;box-sizing:border-box;width:252px;height:325px;min-width:var(--nxe-ui-header-filter-min-width, 0px);padding:20px 0 0;background:var(--nxe-ui-surface, #fff);border:1px solid var(--nxe-ui-border, #ddd);border-radius:var(--nxe-ui-popup-radius, 6px);box-shadow:var(--nxe-ui-popup-shadow, 0 6px 12px rgba(0, 0, 0, .175));color:var(--nxe-ui-text, #333)}.nxe-hf-panel .nxe-hf-searchbox{position:relative;display:flex;flex:0 0 auto;box-sizing:border-box;margin:0 20px 5px;padding:0;border:1px solid var(--nxe-ui-border, #ddd);border-radius:var(--nxe-ui-radius, 4px);background:var(--nxe-ui-surface, #fff)}.nxe-hf-panel .nxe-hf-searchbox:hover{border-color:var(--nxe-ui-accent-faded, rgba(51, 122, 183, .4))}.nxe-hf-panel .nxe-hf-searchbox:focus-within{border-color:var(--nxe-ui-accent, #337ab7)}.nxe-hf-panel .nxe-hf-search{-webkit-appearance:none;appearance:none;flex:1 1 auto;min-width:0;width:100%;box-sizing:border-box;min-height:34px;margin:0;padding:7px 9px 8px;padding-inline-start:34px;border:0;border-radius:var(--nxe-ui-radius, 4px);outline:0;background:transparent;color:var(--nxe-ui-text, #333);font:inherit}.nxe-hf-panel .nxe-hf-search::placeholder{color:var(--nxe-ui-text-muted, #999);opacity:1}.nxe-hf-panel .nxe-hf-search-icon{position:absolute;top:50%;left:0;display:block;box-sizing:border-box;width:34px;height:34px;margin-top:-17px;color:var(--nxe-ui-text-muted, #999);pointer-events:none}.nxe-hf-panel .nxe-hf-search-clear{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 34px;box-sizing:border-box;width:34px;min-width:34px;margin:0;padding:0;border:0;background:transparent;color:var(--nxe-ui-text-muted, #999);cursor:pointer}.nxe-hf-panel .nxe-hf-search-clear svg{display:block;width:18px;height:18px}.nxe-hf-panel .nxe-hf-list{flex:1 1 auto;min-height:0;margin:0 20px 20px;padding:0;overflow-x:hidden;overflow-y:auto}.nxe-hf-panel .nxe-hf-item{box-sizing:border-box;margin:0;cursor:pointer}.nxe-hf-panel .nxe-hf-item>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nxe-hf-panel .nxe-hf-list-item{display:flex;align-items:center;padding:0}.nxe-hf-panel .nxe-hf-list-item>input[type=checkbox]{margin:-1px 0 -3px;margin-inline:10px -1px}.nxe-hf-panel .nxe-hf-list-item>span{flex:1 1 auto;min-width:0;padding:10px}.nxe-hf-panel .nxe-hf-list-item+.nxe-hf-list-item{border-top:1px solid var(--nxe-ui-border, #ddd)}.nxe-hf-panel .nxe-hf-selectall{display:block;padding:9px 0 8px;border-bottom:1px solid var(--nxe-ui-border, #ddd);white-space:nowrap}.nxe-hf-panel .nxe-hf-selectall>input[type=checkbox]{float:inline-start;margin:-1px 0 -3px;margin-inline:10px 0}.nxe-hf-panel .nxe-hf-selectall>span{display:inline-block;box-sizing:border-box;max-width:calc(100% - 32px);margin-top:1px;padding:0 10px;line-height:17px;vertical-align:baseline}.nxe-hf-panel .nxe-hf-list-item:hover>input[type=checkbox]:not(:focus-visible),.nxe-hf-panel .nxe-hf-selectall:hover>input[type=checkbox]:not(:focus-visible){border-color:var(--nxe-ui-checkbox-hover-border, #265a87)}.nxe-hf-panel .nxe-hf-tree>.nxe-hf-selectall{display:flex;align-items:center;padding:9px 40px 11px}.nxe-hf-panel .nxe-hf-tree>.nxe-hf-selectall>input[type=checkbox]{float:none;margin:0}.nxe-hf-panel .nxe-hf-tree>.nxe-hf-selectall>span{display:block;flex:0 1 auto;min-width:0;max-width:none;margin:0;padding:0;padding-inline-start:8px;line-height:inherit}.nxe-hf-panel .nxe-hf-tree-node{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;white-space:nowrap}.nxe-hf-panel .nxe-hf-tree-toggle,.nxe-hf-panel .nxe-hf-tree-toggle-stub{grid-area:1/1;justify-self:end;position:relative;display:block;box-sizing:border-box;width:22px;height:22px}.nxe-hf-panel .nxe-hf-tree-toggle{color:var(--nxe-ui-text, #333);cursor:pointer}.nxe-hf-panel .nxe-hf-tree-toggle:before{content:\"\";position:absolute;left:50%;top:50%;box-sizing:border-box;width:0;height:0;margin:-4px 0 0 -2px;border-style:solid;border-width:4px 0 4px 4px;border-color:transparent transparent transparent currentColor;transform:none}.nxe-hf-panel .nxe-hf-tree-toggle.nxe-expanded:before{margin:-2px 0 0 -4px;border-width:4px 4px 0;border-color:currentColor transparent transparent}.nxe-hf-panel .nxe-hf-tree-toggle-stub{pointer-events:none}.nxe-hf-panel .nxe-hf-tree-item{grid-area:1/1/2/3;display:flex;align-items:center;gap:8px;padding:5px 10px;padding-inline-start:40px;pointer-events:none}.nxe-hf-panel .nxe-hf-tree-item>input[type=checkbox],.nxe-hf-panel .nxe-hf-tree-item>span{pointer-events:auto}.nxe-hf-panel .nxe-hf-tree-item>span{flex:0 1 auto;min-width:0}.nxe-hf-panel .nxe-hf-tree-children{grid-area:2/1/3/3;padding-inline-start:15px}.nxe-hf-panel .nxe-hf-tree-node:hover:not(:has(>.nxe-hf-tree-children:hover))>.nxe-hf-tree-item{background-color:var(--nxe-ui-hover-bg, rgba(0, 0, 0, .04));color:var(--nxe-ui-text, #333)}.nxe-hf-panel .nxe-hf-actions{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:10px;box-sizing:content-box;height:36px;padding:20px}.nxe-hf-panel .nxe-hf-btn{box-sizing:border-box;min-width:100px;padding:8px 12px;border:1px solid var(--nxe-ui-border, #ddd);border-radius:var(--nxe-ui-radius, 4px);background:transparent;color:inherit;cursor:pointer;font:inherit;line-height:1.2858}.nxe-hf-panel .nxe-hf-btn:hover{background:var(--nxe-ui-hover-bg, rgba(0, 0, 0, .04))}.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 var(--nxe-ui-border, #ddd);border-radius:2px;background:var(--nxe-ui-surface, #fff);color:var(--nxe-ui-accent, #337ab7);cursor:pointer}.nxe-hf-panel input[type=checkbox]:checked:not(:indeterminate):after{content:\"\";position:absolute;left:50%;top:50%;box-sizing:border-box;width:7.5px;height:13.25px;margin:-8.1px 0 0 -3.75px;border:solid currentColor;border-width:0 2px 2px 0;border-radius:0;background:none;transform:rotate(45deg)}.nxe-hf-panel input[type=checkbox]:indeterminate:after{content:\"\";position:absolute;left:50%;top:50%;box-sizing:border-box;width:12px;height:12px;margin:-6px 0 0 -6px;border:0;border-radius:2px;background:currentColor;transform:none}@media(forced-colors:active){.nxe-hf-panel input[type=checkbox]:indeterminate:after{forced-color-adjust:none;background-color:CanvasText}}.nxe-hf-panel input[type=checkbox]:hover{border-color:var(--nxe-ui-checkbox-hover-border, #265a87)}.nxe-hf-panel input[type=checkbox]:focus-visible{outline:none;border-color:var(--nxe-ui-accent, #337ab7)}\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"] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
 
 /** Create + attach the header-filter popup; the caller keeps the ref to detach/dispose. */
 function openNxeHeaderFilterOverlay(options) {
@@ -1227,12 +1400,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 class NxePagingComponent {
     pageSize = input(20, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
-    pageIndex = input(0, /* @ts-ignore */
+    /** Two-way: dx supports `[(pageIndex)]`, and a consumer drives the pager from outside with it. */
+    pageIndex = model(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 });
+    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 } }, outputs: { pageIndex: "pageIndexChange" }, 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,
@@ -1244,11 +1418,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     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 }] }] } });
+        }], propDecorators: { pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }], enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "enabled", required: false }] }] } });
 /** `dxo-pager` — the pager UI config. */
 class NxePagerComponent {
+    /** `'auto'` shows the pager only when there is more than one page (dx `isVisible`). */
     visible = input('auto', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    /** `'auto'` offers half, the same and double the page size (dx `getPageSizes`). */
     allowedPageSizes = input('auto', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "allowedPageSizes" }] : /* istanbul ignore next */ []));
     showPageSizeSelector = input(false, /* @ts-ignore */
@@ -1257,10 +1433,20 @@ class NxePagerComponent {
     ...(ngDevMode ? [{ debugName: "showNavigationButtons" }] : /* istanbul ignore next */ []));
     showInfo = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showInfo" }] : /* istanbul ignore next */ []));
+    /**
+     * `'full'` and `'adaptive'` list the page sizes as buttons; `'compact'` uses a drop-down and
+     * always shows the navigation buttons, as dx's small mode does.
+     */
     displayMode = input('adaptive', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayMode" }] : /* istanbul ignore next */ []));
+    /** dx `pager.infoText`: `{0}` the page, `{1}` the page count, `{2}` the item count. */
+    infoText = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "infoText" }] : /* istanbul ignore next */ []));
+    /** dx `pager.label`: the pager's accessible name. */
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* 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 });
+    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 }, infoText: { classPropertyName: "infoText", publicName: "infoText", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", 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,
@@ -1272,7 +1458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     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 }] }] } });
+        }], 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 }] }], infoText: [{ type: i0.Input, args: [{ isSignal: true, alias: "infoText", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
@@ -1341,8 +1527,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
  * `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
+ * prepends a `nxe-command-expand` column; expanding a row renders a
+ * `<tr class="nxe-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).
  */
@@ -1417,12 +1603,14 @@ function cellValue(row, col) {
     }
     switch (col.dataType) {
         case 'number': {
-            const num = typeof raw === 'number' ? raw : Number(raw);
+            // The same parseFloat deserializer the cell display uses, so a cell exports the number
+            // it shows. dx exports that raw number too (exceljs/export.js:207-221).
+            const num = nxeNumberValue(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;
+            // dx number masks ≈ exceljs numFmt, minus the scaling commas Excel reads differently.
+            const mask = typeof col.format === 'string' ? nxeExcelNumberMask(col.format) : undefined;
             return { value: num, numFmt: mask };
         }
         case 'date': {
@@ -1500,6 +1688,476 @@ async function exportDataGrid(opts) {
     }
 }
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/** The default page size of a source (and of a remote grid with no `nxe-paging`). */
+const NXE_REMOTE_DEFAULT_PAGE_SIZE = 20;
+/** Structural equality of two queries; what keeps a re-stated, unchanged query from reloading. */
+function nxeSameQuery(a, b) {
+    return (a.pageIndex === b.pageIndex &&
+        a.pageSize === b.pageSize &&
+        JSON.stringify(a.sort) === JSON.stringify(b.sort) &&
+        JSON.stringify(a.filter) === JSON.stringify(b.filter));
+}
+/** Builds the load options for a query. */
+function nxeLoadOptions(query) {
+    const pageSize = Math.max(1, Math.floor(query.pageSize));
+    const pageIndex = Math.max(0, Math.floor(query.pageIndex));
+    return {
+        pageIndex,
+        pageSize,
+        skip: pageIndex * pageSize,
+        take: pageSize,
+        sort: query.sort.map((s) => ({ selector: s.selector, desc: s.desc })),
+        filter: query.filter,
+        requireTotalCount: true,
+    };
+}
+const FILTER_OPERATORS = new Set([
+    '=',
+    '<>',
+    '<',
+    '<=',
+    '>',
+    '>=',
+    'contains',
+    'notcontains',
+    'startswith',
+    'endswith',
+]);
+function isCondition(expr) {
+    return (Array.isArray(expr) &&
+        expr.length === 3 &&
+        typeof expr[0] === 'string' &&
+        typeof expr[1] === 'string' &&
+        FILTER_OPERATORS.has(expr[1]));
+}
+/**
+ * Flattens the AND-chain a grid builds into simple conditions, for endpoints that take a flat
+ * parameter list (`status=sent,confirmed&supplierId=123`). An OR of `=` on one field becomes one
+ * `in` condition. `exact` is `false` when part of the expression could not be flattened (a `!`, or
+ * an OR across fields); those parts are left out of `conditions`, so an adapter that cannot take
+ * `exact: false` should send the expression as JSON instead.
+ */
+function nxeFlattenFilter(filter) {
+    const conditions = [];
+    let exact = true;
+    const walk = (expr) => {
+        if (isCondition(expr)) {
+            conditions.push({ field: expr[0], operator: expr[1], value: expr[2] });
+            return;
+        }
+        if (Array.isArray(expr) && expr.length >= 3 && expr.length % 2 === 1) {
+            const connectors = new Set(expr.filter((_, i) => i % 2 === 1));
+            if (connectors.size === 1 && connectors.has('and')) {
+                for (let i = 0; i < expr.length; i += 2) {
+                    walk(expr[i]);
+                }
+                return;
+            }
+            if (connectors.size === 1 && connectors.has('or')) {
+                const parts = expr.filter((_, i) => i % 2 === 0);
+                if (parts.every((p) => isCondition(p) && p[1] === '=' && p[0] === parts[0][0])) {
+                    conditions.push({
+                        field: parts[0][0],
+                        operator: 'in',
+                        value: parts.map((p) => p[2]),
+                    });
+                    return;
+                }
+            }
+        }
+        exact = false;
+    };
+    if (filter && filter.length) {
+        walk(filter);
+    }
+    return { conditions, exact };
+}
+function nxeFilterJoin(connector, parts) {
+    const present = parts.filter((p) => !!p && p.length > 0);
+    if (present.length === 0) {
+        return null;
+    }
+    if (present.length === 1) {
+        return present[0];
+    }
+    return present.flatMap((p, i) => (i === 0 ? [p] : [connector, p]));
+}
+/** Combines expressions with AND; `null` and empty ones are dropped, a single one is returned as is. */
+function nxeFilterAnd(...parts) {
+    return nxeFilterJoin('and', parts);
+}
+/** Combines expressions with OR, as {@link nxeFilterAnd} does with AND. */
+function nxeFilterOr(...parts) {
+    return nxeFilterJoin('or', parts);
+}
+/**
+ * A server-backed list for `nxe-data-grid` and `nxe-paginator`. It holds one page at a time:
+ * the grid (or the app) states a query, the source asks the server for exactly that page, and the
+ * result lands in signals.
+ *
+ * ```ts
+ * readonly orders = new NxeRemoteDataSource<Order>(
+ *     (o, { signal }) => this.http.get<OrderList>('/api/orders', { params: toParams(o) }).pipe(map(toResult)),
+ *     { key: 'id' },
+ * );
+ * ```
+ *
+ * A request still in flight is aborted (its `AbortSignal` fires, or its observable is
+ * unsubscribed) when a newer one starts, and a late response that slips past is ignored, so the
+ * rows on screen always belong to the latest query.
+ *
+ * The source is lazy: nothing loads until {@link setOptions} or {@link reload} is called, which a
+ * grid bound to it does on its own.
+ */
+class NxeRemoteDataSource {
+    loadFn;
+    /** The row key field, when the source was given one. */
+    key;
+    /** Milliseconds a grid waits after the last filter-row keystroke before asking. */
+    filterDebounce;
+    itemsState = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemsState" }] : /* istanbul ignore next */ []));
+    totalCountState = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalCountState" }] : /* istanbul ignore next */ []));
+    loadingState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingState" }] : /* istanbul ignore next */ []));
+    errorState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    loadedState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadedState" }] : /* istanbul ignore next */ []));
+    queryState;
+    optionsState;
+    /** The rows of the current page. Kept (not cleared) while the next page loads. */
+    items = this.itemsState.asReadonly();
+    /** Rows matching the filter across every page, as the last successful response said. */
+    totalCount = this.totalCountState.asReadonly();
+    /** A request is in flight. */
+    loading = this.loadingState.asReadonly();
+    /** The last request's failure, or `null` after a success or while a retry runs. */
+    error = this.errorState.asReadonly();
+    /** A response has arrived at least once. */
+    loaded = this.loadedState.asReadonly();
+    /** The query and the `skip`/`take` of the page the next (or current) request uses. */
+    options;
+    started = false;
+    seq = 0;
+    controller = null;
+    unsubscribe = null;
+    constructor(loadFn, config = {}) {
+        this.loadFn = loadFn;
+        this.key = config.key;
+        this.filterDebounce = config.filterDebounce ?? 300;
+        const initial = {
+            pageIndex: config.initial?.pageIndex ?? 0,
+            pageSize: config.initial?.pageSize ?? NXE_REMOTE_DEFAULT_PAGE_SIZE,
+            sort: config.initial?.sort ?? [],
+            filter: config.initial?.filter ?? null,
+        };
+        this.queryState = signal(initial, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "queryState" }] : /* istanbul ignore next */ []));
+        this.optionsState = signal(nxeLoadOptions(initial), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionsState" }] : /* istanbul ignore next */ []));
+        this.options = this.optionsState.asReadonly();
+    }
+    /**
+     * States a new query (any of its parts) and loads it. Nothing happens when it is the query
+     * already stated, so a caller can re-state its inputs freely. The first call starts the source.
+     */
+    setOptions(patch) {
+        const current = this.queryState();
+        const next = {
+            pageIndex: patch.pageIndex ?? current.pageIndex,
+            pageSize: patch.pageSize ?? current.pageSize,
+            sort: patch.sort ?? current.sort,
+            filter: patch.filter === undefined ? current.filter : patch.filter,
+        };
+        if (this.started && nxeSameQuery(current, next)) {
+            return;
+        }
+        this.queryState.set(next);
+        this.optionsState.set(nxeLoadOptions(next));
+        this.run();
+    }
+    /** Loads the current query again (after an edit, or as a retry). */
+    reload() {
+        this.run();
+    }
+    /** Aborts the request in flight and ignores its response. */
+    cancel() {
+        this.seq++;
+        this.abort();
+        this.loadingState.set(false);
+    }
+    abort() {
+        this.controller?.abort();
+        this.controller = null;
+        this.unsubscribe?.();
+        this.unsubscribe = null;
+    }
+    run() {
+        this.started = true;
+        this.abort();
+        const seq = ++this.seq;
+        const controller = new AbortController();
+        this.controller = controller;
+        this.loadingState.set(true);
+        this.errorState.set(null);
+        const options = nxeLoadOptions(this.queryState());
+        let pending;
+        try {
+            const result = this.loadFn(options, { signal: controller.signal });
+            pending = isObservable(result) ? this.fromObservable(result, controller.signal) : Promise.resolve(result);
+        }
+        catch (error) {
+            pending = Promise.reject(error);
+        }
+        pending.then((result) => {
+            if (seq !== this.seq) {
+                return; // superseded: a newer query owns the signals now
+            }
+            const page = Array.isArray(result)
+                ? { data: result, totalCount: result.length }
+                : result;
+            const data = page.data ?? [];
+            this.itemsState.set(data);
+            this.totalCountState.set(Number.isFinite(page.totalCount) ? page.totalCount : data.length);
+            this.loadedState.set(true);
+            this.loadingState.set(false);
+        }, (error) => {
+            if (seq !== this.seq) {
+                return;
+            }
+            this.itemsState.set([]);
+            this.errorState.set(error ?? new Error('Load failed'));
+            this.loadingState.set(false);
+        });
+    }
+    /** The last value an observable emits; rejects when it errors or completes empty. */
+    fromObservable(source, abortSignal) {
+        return new Promise((resolve, reject) => {
+            let last = null;
+            const subscription = source.subscribe({
+                next: (value) => (last = { value }),
+                error: reject,
+                complete: () => (last ? resolve(last.value) : reject(new Error('Load completed without a value'))),
+            });
+            this.unsubscribe = () => subscription.unsubscribe();
+            abortSignal.addEventListener('abort', () => subscription.unsubscribe(), { once: true });
+        });
+    }
+}
+/** True for an object with a `load` function that is not an array or a {@link NxeRemoteDataSource}. */
+function nxeIsStoreLike(value) {
+    return (!!value &&
+        typeof value === 'object' &&
+        !Array.isArray(value) &&
+        !(value instanceof NxeRemoteDataSource) &&
+        typeof value.load === 'function');
+}
+
+/**
+ * The pager's page list and info text, as DevExtreme 24.2.3's pagination builds them.
+ *
+ * Pure functions, so the grid holds the only state (the sliding window, carried between renders
+ * by a linkedSignal) and the rules can be specced without rendering a grid.
+ */
+/** dx `maxPagesCount` (grid_core/pager/m_pager.js): up to this many pages are all listed. */
+const NXE_PAGER_MAX_PAGES = 10;
+/** dx `PAGES_LIMITER` (pagination/pages/large.js): the pages kept around the current one. */
+const WINDOW = 4;
+/** dx's `dxPagination-infoText` message. */
+const NXE_PAGER_INFO_TEXT = 'Page {0} of {1} ({2} items)';
+const pageItem = (page) => ({ key: String(page), page, separator: false });
+const separatorItem = (key) => ({ key, page: -1, separator: true });
+/**
+ * The page list for `pageIndex` of `pageCount`, given the previous render's window.
+ *
+ * dx `PagesLarge` (pagination/pages/large.js). Ten pages or fewer are all listed. Beyond that the
+ * list is the first page, a window of four, the last page, and a `. . .` separator wherever pages
+ * are skipped. The window stays put while the new page is one of its inner pages (so clicking
+ * through it does not scroll the numbers under the pointer), and otherwise moves so the page
+ * lands one in from its edge.
+ */
+function nxePagerWindow(pageCount, pageIndex, prev) {
+    const slide = prev?.window ?? [];
+    const reuse = prev?.reuse ?? [];
+    if (pageCount <= NXE_PAGER_MAX_PAGES) {
+        // dx leaves its window state untouched here, so it resumes if the count grows again.
+        return { window: slide, reuse, items: Array.from({ length: pageCount }, (_, i) => pageItem(i)) };
+    }
+    const last = pageCount - 1;
+    const reusable = reuse.length > 0 && reuse[reuse.length - 1] < last && reuse.includes(pageIndex);
+    let next = slide;
+    let nextReuse = reuse;
+    if (!reusable) {
+        let start;
+        if (pageIndex === slide[0]) {
+            start = pageIndex - 1;
+        }
+        else if (pageIndex === slide[slide.length - 1]) {
+            start = pageIndex + 2 - WINDOW;
+        }
+        else if (pageIndex < WINDOW) {
+            start = 1;
+        }
+        else if (pageIndex >= pageCount - WINDOW) {
+            start = pageCount - WINDOW - 1;
+        }
+        else {
+            start = pageIndex - 1;
+        }
+        // Only a window left over from a different page count can land outside 1..last-4; dx
+        // would list pages that do not exist, so keep it inside the list.
+        start = Math.min(Math.max(start, 1), pageCount - WINDOW - 1);
+        next = Array.from({ length: WINDOW }, (_, i) => start + i);
+    }
+    const start = next[0];
+    const kind = start === 1 ? 'high' : start + WINDOW === last ? 'low' : 'both';
+    if (!reusable) {
+        nextReuse = kind === 'both' ? next.slice(1, -1) : kind === 'high' ? next.slice(0, -1) : next.slice(1);
+    }
+    const items = [pageItem(0)];
+    if (kind !== 'high') {
+        items.push(separatorItem('low'));
+    }
+    items.push(...next.map(pageItem));
+    if (kind !== 'low') {
+        items.push(separatorItem('high'));
+    }
+    items.push(pageItem(last));
+    return { window: next, reuse: nextReuse, items };
+}
+/**
+ * dx's info text: `{0}` is the 1-based page, `{1}` the page count and `{2}` the item count
+ * (pagination/info.js, formatted by core/utils/string `format`).
+ */
+function nxePagerInfoText(template, pageIndex, pageCount, itemCount) {
+    const values = [String(pageIndex + 1), String(pageCount), String(itemCount)];
+    return template.replace(/\{(\d+)\}/g, (match, i) => values[Number(i)] ?? match);
+}
+/**
+ * dx `getPageSizes` (grid_core/pager/m_pager.js): an explicit list as given; `'auto'` offers half,
+ * the same and double the configured page size, and nothing when that size is 1 or less.
+ */
+function nxePagerPageSizes(allowed, pageSize) {
+    if (Array.isArray(allowed)) {
+        return [...allowed];
+    }
+    return allowed === 'auto' && pageSize > 1 ? [Math.floor(pageSize / 2), pageSize, 2 * pageSize] : [];
+}
+/** A page or item count with the locale's group separator (`100,000`, or `100.000` under `id`). */
+function nxePagerCount(value, separators) {
+    return formatNumber(value, parseNumberFormat('#,##0'), separators);
+}
+
+/**
+ * A page navigator that stands on its own: page buttons with the grid pager's sliding window,
+ * previous/next, a page-size selector and the total. Use it beside any list, or bind it to the same
+ * state a remote grid pages with.
+ *
+ * ```html
+ * <nxe-paginator [(pageIndex)]="page" [(pageSize)]="size" [totalCount]="orders.totalCount()" />
+ * ```
+ *
+ * Text comes from `NxeMessageService`, so it follows the language. The nav is a labelled
+ * `navigation` landmark; the current page carries `aria-current="page"`. With focus on a page
+ * button, Left/Right move to the previous/next page and Home/End to the first/last.
+ */
+class NxePaginatorComponent {
+    messages = inject(NxeMessageService);
+    separators = inject(NXE_NUMBER_SEPARATORS);
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    /** The 0-based current page. Two-way. */
+    pageIndex = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
+    /** Rows per page. Two-way; changing it returns to the first page. */
+    pageSize = model(20, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    /** Rows across every page. */
+    totalCount = input(0, { ...(ngDevMode ? { debugName: "totalCount" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** The sizes the selector offers. The current size is always offered too. */
+    pageSizes = input([10, 20, 50, 100], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizes" }] : /* istanbul ignore next */ []));
+    showPageSizeSelector = input(true, { ...(ngDevMode ? { debugName: "showPageSizeSelector" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    showInfo = input(true, { ...(ngDevMode ? { debugName: "showInfo" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Greys the controls out and ignores clicks, e.g. while a page loads. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The navigation landmark's accessible name; default is the `grid.pager.navigation` message. */
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    t(key, ...args) {
+        return this.messages.t(key, ...args);
+    }
+    pageCount = computed(() => Math.max(1, Math.ceil(Math.max(0, this.totalCount()) / Math.max(1, this.pageSize()))), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []));
+    /** The page shown: `pageIndex` held inside the page count. */
+    currentPage = computed(() => Math.max(0, Math.min(this.pageIndex(), this.pageCount() - 1)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+    window = linkedSignal({ ...(ngDevMode ? { debugName: "window" } : /* istanbul ignore next */ {}), source: () => ({ count: this.pageCount(), index: this.currentPage() }),
+        computation: (src, prev) => nxePagerWindow(src.count, src.index, prev?.value) });
+    items = computed(() => this.window().items, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    sizes = computed(() => {
+        const sizes = new Set(this.pageSizes());
+        sizes.add(this.pageSize());
+        return [...sizes].sort((a, b) => a - b);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizes" }] : /* istanbul ignore next */ []));
+    info = computed(() => this.t('grid.pager.info', nxePagerCount(this.currentPage() + 1, this.separators), nxePagerCount(this.pageCount(), this.separators), nxePagerCount(this.totalCount(), this.separators)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "info" }] : /* istanbul ignore next */ []));
+    total = computed(() => this.t('grid.pager.total', nxePagerCount(this.totalCount(), this.separators)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    go(index) {
+        if (this.disabled()) {
+            return;
+        }
+        const next = Math.max(0, Math.min(index, this.pageCount() - 1));
+        if (next !== this.pageIndex()) {
+            this.pageIndex.set(next);
+        }
+    }
+    onSizeChange(event) {
+        const size = Number(event.target.value);
+        if (size > 0 && size !== this.pageSize()) {
+            this.pageSize.set(size);
+            this.pageIndex.set(0);
+        }
+    }
+    onKeydown(event) {
+        if (!event.target.classList.contains('nxe-paginator-page')) {
+            return;
+        }
+        const last = this.pageCount() - 1;
+        const current = this.currentPage();
+        const target = event.key === 'ArrowLeft'
+            ? current - 1
+            : event.key === 'ArrowRight'
+                ? current + 1
+                : event.key === 'Home'
+                    ? 0
+                    : event.key === 'End'
+                        ? last
+                        : null;
+        if (target === null) {
+            return;
+        }
+        event.preventDefault();
+        this.go(target);
+        // The page buttons are re-rendered by key, so the old one keeps focus; move it to the new page.
+        afterNextRender(() => this.host.nativeElement
+            .querySelector('.nxe-paginator-page[aria-current="page"]')
+            ?.focus(), { injector: this.injector });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxePaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxePaginatorComponent, isStandalone: true, selector: "nxe-paginator", inputs: { pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, totalCount: { classPropertyName: "totalCount", publicName: "totalCount", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageIndex: "pageIndexChange", pageSize: "pageSizeChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, classAttribute: "nxe-paginator" }, ngImport: i0, template: "<nav class=\"nxe-paginator-nav\" [attr.aria-label]=\"label() ?? t('grid.pager.navigation')\" [attr.aria-busy]=\"disabled() ? 'true' : null\">\r\n    @if (showPageSizeSelector()) {\r\n        <label class=\"nxe-paginator-sizes\">\r\n            <span class=\"nxe-paginator-sizes-label\">{{ t('grid.pager.pageSize') }}</span>\r\n            <select class=\"nxe-paginator-size\" [disabled]=\"disabled()\" (change)=\"onSizeChange($event)\">\r\n                @for (size of sizes(); track size) {\r\n                    <option [value]=\"size\" [selected]=\"size === pageSize()\">{{ size }}</option>\r\n                }\r\n            </select>\r\n        </label>\r\n    }\r\n    <span class=\"nxe-paginator-spacer\"></span>\r\n    <span class=\"nxe-paginator-info\" role=\"status\">{{ showInfo() ? info() : total() }}</span>\r\n    <div class=\"nxe-paginator-pages\">\r\n        <button\r\n            type=\"button\"\r\n            class=\"nxe-paginator-nav-button nxe-paginator-prev\"\r\n            [attr.aria-label]=\"t('grid.pager.previous')\"\r\n            [attr.aria-disabled]=\"disabled() || currentPage() === 0 ? 'true' : null\"\r\n            (click)=\"go(currentPage() - 1)\"></button>\r\n        @for (item of items(); track item.key) {\r\n            @if (item.separator) {\r\n                <span class=\"nxe-paginator-separator\" aria-hidden=\"true\">. . .</span>\r\n            } @else {\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"nxe-paginator-page\"\r\n                    [class.nxe-paginator-current]=\"item.page === currentPage()\"\r\n                    [attr.aria-label]=\"t('grid.pager.page', item.page + 1)\"\r\n                    [attr.aria-current]=\"item.page === currentPage() ? 'page' : null\"\r\n                    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n                    (click)=\"go(item.page)\">{{ item.page + 1 }}</button>\r\n            }\r\n        }\r\n        <button\r\n            type=\"button\"\r\n            class=\"nxe-paginator-nav-button nxe-paginator-next\"\r\n            [attr.aria-label]=\"t('grid.pager.next')\"\r\n            [attr.aria-disabled]=\"disabled() || currentPage() >= pageCount() - 1 ? 'true' : null\"\r\n            (click)=\"go(currentPage() + 1)\"></button>\r\n    </div>\r\n</nav>\r\n", styles: ["nxe-paginator{display:block}nxe-paginator .nxe-paginator-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--nxe-ui-space-2, 8px) var(--nxe-ui-space-3, 12px);color:var(--nxe-ui-text, #333);font-size:var(--nxe-ui-font-size-sm, 13px);line-height:var(--nxe-ui-line-height-sm, 18px)}nxe-paginator .nxe-paginator-spacer{flex:1 1 auto}nxe-paginator .nxe-paginator-sizes{display:inline-flex;align-items:center;gap:var(--nxe-ui-space-2, 8px)}nxe-paginator .nxe-paginator-size{height:32px;padding:0 var(--nxe-ui-space-2, 8px);border:1px solid var(--nxe-ui-border, #ddd);border-radius:var(--nxe-ui-radius, 4px);background:var(--nxe-ui-surface, #fff);color:inherit;font:inherit}nxe-paginator .nxe-paginator-info{color:var(--nxe-ui-text-muted, #999)}nxe-paginator .nxe-paginator-pages{display:inline-flex;align-items:center;gap:var(--nxe-ui-space-1, 4px)}nxe-paginator .nxe-paginator-page,nxe-paginator .nxe-paginator-nav-button{min-width:32px;height:32px;padding:0 var(--nxe-ui-space-2, 8px);border:1px solid transparent;border-radius:var(--nxe-ui-radius, 4px);background:transparent;color:inherit;font:inherit;cursor:pointer}nxe-paginator .nxe-paginator-page:hover,nxe-paginator .nxe-paginator-nav-button:hover{background:var(--nxe-ui-hover-bg, rgba(0, 0, 0, .04))}nxe-paginator .nxe-paginator-page:focus-visible,nxe-paginator .nxe-paginator-nav-button:focus-visible{outline:none;box-shadow:var(--nxe-ui-focus-ring, 0 0 0 2px rgba(0, 92, 170, .5))}nxe-paginator .nxe-paginator-page[aria-disabled=true],nxe-paginator .nxe-paginator-nav-button[aria-disabled=true]{opacity:var(--nxe-ui-disabled-opacity, .5);cursor:default;pointer-events:none}nxe-paginator .nxe-paginator-current{background:var(--nxe-ui-selected-bg, rgba(0, 0, 0, .1));cursor:default}nxe-paginator .nxe-paginator-nav-button{position:relative}nxe-paginator .nxe-paginator-nav-button:before{content:\"\";position:absolute;inset:0;margin:auto;width:8px;height:8px;border-style:solid;border-color:currentColor;border-width:0 0 2px 2px}nxe-paginator .nxe-paginator-prev:before{transform:translate(2px) rotate(45deg)}nxe-paginator .nxe-paginator-next:before{transform:translate(-2px) rotate(-135deg)}nxe-paginator .nxe-paginator-separator{padding:0 var(--nxe-ui-space-1, 4px);opacity:.7}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxePaginatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-paginator', host: { class: 'nxe-paginator', '(keydown)': 'onKeydown($event)' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<nav class=\"nxe-paginator-nav\" [attr.aria-label]=\"label() ?? t('grid.pager.navigation')\" [attr.aria-busy]=\"disabled() ? 'true' : null\">\r\n    @if (showPageSizeSelector()) {\r\n        <label class=\"nxe-paginator-sizes\">\r\n            <span class=\"nxe-paginator-sizes-label\">{{ t('grid.pager.pageSize') }}</span>\r\n            <select class=\"nxe-paginator-size\" [disabled]=\"disabled()\" (change)=\"onSizeChange($event)\">\r\n                @for (size of sizes(); track size) {\r\n                    <option [value]=\"size\" [selected]=\"size === pageSize()\">{{ size }}</option>\r\n                }\r\n            </select>\r\n        </label>\r\n    }\r\n    <span class=\"nxe-paginator-spacer\"></span>\r\n    <span class=\"nxe-paginator-info\" role=\"status\">{{ showInfo() ? info() : total() }}</span>\r\n    <div class=\"nxe-paginator-pages\">\r\n        <button\r\n            type=\"button\"\r\n            class=\"nxe-paginator-nav-button nxe-paginator-prev\"\r\n            [attr.aria-label]=\"t('grid.pager.previous')\"\r\n            [attr.aria-disabled]=\"disabled() || currentPage() === 0 ? 'true' : null\"\r\n            (click)=\"go(currentPage() - 1)\"></button>\r\n        @for (item of items(); track item.key) {\r\n            @if (item.separator) {\r\n                <span class=\"nxe-paginator-separator\" aria-hidden=\"true\">. . .</span>\r\n            } @else {\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"nxe-paginator-page\"\r\n                    [class.nxe-paginator-current]=\"item.page === currentPage()\"\r\n                    [attr.aria-label]=\"t('grid.pager.page', item.page + 1)\"\r\n                    [attr.aria-current]=\"item.page === currentPage() ? 'page' : null\"\r\n                    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n                    (click)=\"go(item.page)\">{{ item.page + 1 }}</button>\r\n            }\r\n        }\r\n        <button\r\n            type=\"button\"\r\n            class=\"nxe-paginator-nav-button nxe-paginator-next\"\r\n            [attr.aria-label]=\"t('grid.pager.next')\"\r\n            [attr.aria-disabled]=\"disabled() || currentPage() >= pageCount() - 1 ? 'true' : null\"\r\n            (click)=\"go(currentPage() + 1)\"></button>\r\n    </div>\r\n</nav>\r\n", styles: ["nxe-paginator{display:block}nxe-paginator .nxe-paginator-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--nxe-ui-space-2, 8px) var(--nxe-ui-space-3, 12px);color:var(--nxe-ui-text, #333);font-size:var(--nxe-ui-font-size-sm, 13px);line-height:var(--nxe-ui-line-height-sm, 18px)}nxe-paginator .nxe-paginator-spacer{flex:1 1 auto}nxe-paginator .nxe-paginator-sizes{display:inline-flex;align-items:center;gap:var(--nxe-ui-space-2, 8px)}nxe-paginator .nxe-paginator-size{height:32px;padding:0 var(--nxe-ui-space-2, 8px);border:1px solid var(--nxe-ui-border, #ddd);border-radius:var(--nxe-ui-radius, 4px);background:var(--nxe-ui-surface, #fff);color:inherit;font:inherit}nxe-paginator .nxe-paginator-info{color:var(--nxe-ui-text-muted, #999)}nxe-paginator .nxe-paginator-pages{display:inline-flex;align-items:center;gap:var(--nxe-ui-space-1, 4px)}nxe-paginator .nxe-paginator-page,nxe-paginator .nxe-paginator-nav-button{min-width:32px;height:32px;padding:0 var(--nxe-ui-space-2, 8px);border:1px solid transparent;border-radius:var(--nxe-ui-radius, 4px);background:transparent;color:inherit;font:inherit;cursor:pointer}nxe-paginator .nxe-paginator-page:hover,nxe-paginator .nxe-paginator-nav-button:hover{background:var(--nxe-ui-hover-bg, rgba(0, 0, 0, .04))}nxe-paginator .nxe-paginator-page:focus-visible,nxe-paginator .nxe-paginator-nav-button:focus-visible{outline:none;box-shadow:var(--nxe-ui-focus-ring, 0 0 0 2px rgba(0, 92, 170, .5))}nxe-paginator .nxe-paginator-page[aria-disabled=true],nxe-paginator .nxe-paginator-nav-button[aria-disabled=true]{opacity:var(--nxe-ui-disabled-opacity, .5);cursor:default;pointer-events:none}nxe-paginator .nxe-paginator-current{background:var(--nxe-ui-selected-bg, rgba(0, 0, 0, .1));cursor:default}nxe-paginator .nxe-paginator-nav-button{position:relative}nxe-paginator .nxe-paginator-nav-button:before{content:\"\";position:absolute;inset:0;margin:auto;width:8px;height:8px;border-style:solid;border-color:currentColor;border-width:0 0 2px 2px}nxe-paginator .nxe-paginator-prev:before{transform:translate(2px) rotate(45deg)}nxe-paginator .nxe-paginator-next:before{transform:translate(-2px) rotate(-135deg)}nxe-paginator .nxe-paginator-separator{padding:0 var(--nxe-ui-space-1, 4px);opacity:.7}\n"] }]
+        }], propDecorators: { pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], totalCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalCount", required: false }] }], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }], showPageSizeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelector", required: false }] }], showInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInfo", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
 class NxeGridResizeController {
     hooks;
     active = null;
@@ -1533,15 +2191,14 @@ class NxeGridResizeController {
         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) {
+        const table = host.querySelector('.nxe-datagrid-content > .nxe-datagrid-table');
+        if (!table) {
             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);
+        // The colgroup still counts command columns, so it keeps the lead offset; the header
+        // cells do not, because they are gathered by column rather than by cell position.
+        const headerCells = nxeHeaderLeafCells(host);
         const colEl = cols[lead + visibleIndex];
         const cell = headerCells[visibleIndex];
         if (!colEl || !cell) {
@@ -1549,6 +2206,17 @@ class NxeGridResizeController {
         }
         const nextColEl = nextField != null ? cols[lead + visibleIndex + 1] ?? null : null;
         const nextCell = nextField != null ? headerCells[visibleIndex + 1] : null;
+        const trailingColEl = cols[lead + headerCells.length - 1];
+        const trailingCell = headerCells[headerCells.length - 1];
+        const rowsView = table.closest('.nxe-datagrid-rowsview');
+        const fill = this.hooks.mode() === 'widget' && this.hooks.fillsGrid() && trailingColEl && trailingCell && rowsView
+            ? {
+                colEl: trailingColEl,
+                startW: trailingCell.getBoundingClientRect().width,
+                prevStyle: trailingColEl.style.width,
+                roomW: rowsView.clientWidth,
+            }
+            : null;
         this.active = {
             field,
             nextField,
@@ -1565,6 +2233,7 @@ class NxeGridResizeController {
             prevTableStyle: table.style.width,
             lastW: cell.getBoundingClientRect().width,
             lastNextW: nextCell ? nextCell.getBoundingClientRect().width : 0,
+            fill,
         };
         this.hooks.onStart();
         document.body.classList.add('nxe-grid-resizing');
@@ -1591,9 +2260,22 @@ class NxeGridResizeController {
         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);
+            let w = Math.max(min, a.startW + delta);
+            let tableW = a.startTableW + (w - a.startW);
+            // fillsGrid: hand what the table comes out short of the rows view to the trailing
+            // column now, as the commit will, so the release lands where the drag already is.
+            if (a.fill) {
+                const slack = Math.max(0, a.fill.roomW - tableW);
+                if (a.fill.colEl === a.colEl) {
+                    w += slack;
+                }
+                else {
+                    a.fill.colEl.style.width = `${a.fill.startW + slack}px`;
+                }
+                tableW += slack;
+            }
             a.colEl.style.width = `${w}px`;
-            a.tableEl.style.width = `${a.startTableW + (w - a.startW)}px`;
+            a.tableEl.style.width = `${tableW}px`;
             a.lastW = w;
             return;
         }
@@ -1627,7 +2309,25 @@ class NxeGridResizeController {
         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));
+        this.hooks.zone.run(() => {
+            // The commit measures the cells as the drag left them, so it goes first.
+            this.hooks.onCommit(changes);
+            // Then the DOM goes back to what the [style.width] bindings last wrote. Angular only
+            // rewrites a binding whose value changed, and a second resize often commits the same
+            // value (the trailing column's width, a table at 100%): the drag's leftovers would stay
+            // on screen. Restored, the next render lands the committed layout either way.
+            this.restore(a);
+        });
+    }
+    restore(a) {
+        a.colEl.style.width = a.prevColStyle;
+        if (a.nextColEl) {
+            a.nextColEl.style.width = a.prevNextStyle;
+        }
+        if (a.fill && a.fill.colEl !== a.colEl) {
+            a.fill.colEl.style.width = a.fill.prevStyle;
+        }
+        a.tableEl.style.width = a.prevTableStyle;
     }
     cancel() {
         const a = this.active;
@@ -1636,11 +2336,7 @@ class NxeGridResizeController {
             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.restore(a);
         this.hooks.zone.run(() => this.hooks.onCancel());
     }
     teardown() {
@@ -1654,25 +2350,56 @@ class NxeGridResizeController {
 }
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
+/** The day after a `yyyy-MM-dd` day key. */
+function nxeNextDay(day) {
+    return DateTime.fromISO(day).plus({ days: 1 }).toFormat('yyyy-MM-dd');
+}
+/**
+ * Recursive tree selection state per node key: `all` when the node's key or an ancestor's is in
+ * `keys`, or when every child is `all`; `some` when only part of its subtree is; absent otherwise.
+ */
+function nxeTreeCheckState(roots, keys) {
+    const out = new Map();
+    const walk = (node, forced) => {
+        const self = forced || keys.has(node.key);
+        let state = self ? 'all' : 'none';
+        if (node.children.length) {
+            let every = true;
+            let any = false;
+            for (const child of node.children) {
+                const s = walk(child, self);
+                every &&= s === 'all';
+                any ||= s !== 'none';
+            }
+            state = every ? 'all' : any ? 'some' : 'none';
+        }
+        if (state !== 'none') {
+            out.set(node.key, state);
+        }
+        return state;
+    };
+    roots.forEach((r) => walk(r, false));
+    return out;
+}
 /** 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')) {
+    if (c.contains('nxe-header-row')) {
         return 'header';
     }
-    if (c.contains('dx-datagrid-filter-row')) {
+    if (c.contains('nxe-datagrid-filter-row')) {
         return 'filter';
     }
-    if (c.contains('dx-data-row')) {
+    if (c.contains('nxe-data-row')) {
         return 'data';
     }
-    if (c.contains('dx-group-footer-row')) {
+    if (c.contains('nxe-group-footer-row')) {
         return 'groupFooter';
     }
-    if (c.contains('dx-group-row')) {
+    if (c.contains('nxe-group-row')) {
         return 'group';
     }
-    if (tr.parentElement?.classList.contains('dx-datagrid-total-footer')) {
+    if (tr.parentElement?.classList.contains('nxe-datagrid-total-footer')) {
         return 'totalFooter';
     }
     return null;
@@ -1690,13 +2417,30 @@ function flattenLeafColumns(cols) {
     }
     return out;
 }
+/**
+ * A row's side of a collapsed border: the widest top or bottom border across the `<tr>` and its
+ * cells, as computed (a `none` border computes to 0). Null, or anything but a row, has none.
+ */
+function nxeRowEdge(row, side) {
+    if (!(row instanceof HTMLTableRowElement)) {
+        return 0;
+    }
+    const prop = `border-${side}-width`;
+    let width = parseFloat(getComputedStyle(row).getPropertyValue(prop)) || 0;
+    for (const cell of Array.from(row.cells)) {
+        width = Math.max(width, parseFloat(getComputedStyle(cell).getPropertyValue(prop)) || 0);
+    }
+    return width;
+}
 /**
  * `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
+ * Renders a single `<table>` under the library's own class namespace (`nxe-widget nxe-datagrid`,
+ * `nxe-row`/`nxe-header-row`/`nxe-data-row`/`nxe-datagrid-headers`/`nxe-datagrid-rowsview`, `td`s).
+ * The structure still mirrors dx's, name for name, so the visual contract carries over
+ * (4px cell padding, #f8fafc header, #525252 header text, row/hover/alt colours) — but the
+ * `dx-` prefix is gone; `provideNxeDxCompat()` re-emits it for stylesheets not yet migrated.
+ * 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>`).
@@ -1710,7 +2454,15 @@ class NxeDataGridComponent {
     overlay = inject(Overlay);
     viewContainerRef = inject(ViewContainerRef);
     ngZone = inject(NgZone);
+    destroyRef = inject(DestroyRef);
     defaults = inject(NXE_DEFAULT_OPTIONS);
+    /** Locale separators for every number this grid renders — cells, summaries and group text. */
+    separators = inject(NXE_NUMBER_SEPARATORS);
+    messages = inject(NxeMessageService);
+    /** One library message for the active language; reading it in a template re-renders on a switch. */
+    t(key, ...args) {
+        return this.messages.t(key, ...args);
+    }
     /** Pointer drag engine: drag-to-group, chip drag-out (ungroup), chip/column reorder. */
     drag = new NxeGridDragController({
         zone: this.ngZone,
@@ -1720,13 +2472,14 @@ class NxeDataGridComponent {
         onChipMove: (from, to) => this.moveGroup(from, to),
         reorderEnabled: () => this.allowColumnReordering(),
         onColumnMove: (from, slot) => this.moveColumnByVisible(from, slot),
-        headerDataCells: () => nxeHeaderDataCells(nxeLeafHeaderRow(this.elementRef.nativeElement)),
+        headerDataCells: () => nxeHeaderLeafCells(this.elementRef.nativeElement),
     });
     /** Pointer resize engine (dx allowColumnResizing). */
     resize = new NxeGridResizeController({
         zone: this.ngZone,
         host: () => this.elementRef.nativeElement,
         mode: () => this.columnResizingMode(),
+        fillsGrid: () => this.resizeFillsGrid(),
         minWidth: () => this.columnMinWidth() ?? 50,
         onStart: () => (this.resizeActive = true),
         onCancel: () => (this.resizeActive = false),
@@ -1773,6 +2526,11 @@ class NxeDataGridComponent {
     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) ---
+    /**
+     * The rows: a plain array (paged, sorted and filtered here), a {@link NxeRemoteDataSource}
+     * (paged, sorted and filtered by the server; the grid holds one page), or, with
+     * `remoteOperations` on, a `CustomStore`-shaped `{ load, key? }`.
+     */
     dataSource = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
     keyExpr = input(undefined, /* @ts-ignore */
@@ -1791,25 +2549,68 @@ class NxeDataGridComponent {
     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' });
+    resizeFillsGridInput = input(undefined, { ...(ngDevMode ? { debugName: "resizeFillsGridInput" } : /* istanbul ignore next */ {}), alias: 'resizeFillsGrid' });
     /** 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 */
+    /**
+     * Widget-mode resizing that never leaves a blank strip: the trailing column takes whatever a
+     * narrowed layout leaves of the grid's width. Not dx - dx lets the table end short - so off
+     * unless bound or set app-wide through `NXE_DEFAULT_OPTIONS`.
+     */
+    resizeFillsGrid = computed(() => this.resizeFillsGridInput() ?? this.widgetDefaults().resizeFillsGrid ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizeFillsGrid" }] : /* istanbul ignore next */ []));
+    // The literals are DevExtreme 24.2.3's generic defaults: showColumnLines true, showRowLines
+    // false and wordWrapEnabled false (m_rows_view.js:1180-1182), showBorders false
+    // (m_grid_view.js:743). dxTreeList shares them and changes them only for the Material themes
+    // (tree_list/m_widget_base.js:39-52), so both hosts use the same literals. The library shipped
+    // column lines off and row lines and wrapping on, the reverse of dx, so every grid that bound
+    // neither option drew the wrong lines.
+    showColumnLines = computed(() => this.showColumnLinesInput() ?? this.widgetDefaults().showColumnLines ?? true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showColumnLines" }] : /* istanbul ignore next */ []));
-    showRowLines = computed(() => this.showRowLinesInput() ?? this.widgetDefaults().showRowLines ?? true, /* @ts-ignore */
+    showRowLines = computed(() => this.showRowLinesInput() ?? this.widgetDefaults().showRowLines ?? false, /* @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 */
+    wordWrapEnabled = computed(() => this.wordWrapEnabledInput() ?? this.widgetDefaults().wordWrapEnabled ?? false, /* @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 */ []));
+    /**
+     * dx `remoteOperations`. With a `{ load }` store as the `dataSource`, any truthy value makes the
+     * grid page, sort and filter on the server (`{ paging, sorting, filtering }` is read as all or
+     * nothing). A {@link NxeRemoteDataSource} is remote whatever this says.
+     */
     remoteOperations = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "remoteOperations" }] : /* istanbul ignore next */ []));
+    // Controlled state, for binding to URL query params. `undefined` = not controlled: the grid
+    // keeps its own state. A remote grid always writes them back, so `[(pageIndex)]` follows the
+    // user; a client-side grid writes back only the ones that are bound.
+    /** The 0-based page. Two-way. */
+    pageIndexModel = model(undefined, { ...(ngDevMode ? { debugName: "pageIndexModel" } : /* istanbul ignore next */ {}), alias: 'pageIndex' });
+    /** Rows per page. Two-way. */
+    pageSizeModel = model(undefined, { ...(ngDevMode ? { debugName: "pageSizeModel" } : /* istanbul ignore next */ {}), alias: 'pageSize' });
+    /** The sort, `[{ selector, desc }]`. Two-way; a header click writes its single level here. */
+    sortModel = model(undefined, { ...(ngDevMode ? { debugName: "sortModel" } : /* istanbul ignore next */ {}), alias: 'sort' });
+    /**
+     * A filter the application owns (a filter bar, a status tab), in {@link NxeFilterExpression}
+     * form. A remote grid ANDs it with the filter row and header filter and sends the lot to the
+     * server. Changing it returns the grid to the first page.
+     */
+    // The annotation is explicit on purpose: the library compiles without strictNullChecks, which erases
+    // `| null | undefined` from an inferred type, so the built .d.ts would otherwise say non-null.
+    filter = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    /**
+     * The options of every request a remote grid hands its source: page, size, sort and the
+     * combined filter. One emission per distinct request, after filter-row typing settles. This is
+     * where an application mirrors the grid's state into the URL.
+     */
+    optionsChange = output();
     /**
      * 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.
@@ -1821,8 +2622,19 @@ class NxeDataGridComponent {
     ...(ngDevMode ? [{ debugName: "syncLookupFilterValues" }] : /* istanbul ignore next */ []));
     columnMinWidth = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "columnMinWidth" }] : /* istanbul ignore next */ []));
+    /** dx `height` — a bare number means px, anything else passes through. */
+    height = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    heightStyle = computed(() => {
+        const h = this.height();
+        if (h === undefined || h === null || h === '') {
+            return null;
+        }
+        return /^-?\d+(\.\d+)?$/.test(String(h)) ? `${h}px` : String(h);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heightStyle" }] : /* 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 */
+    noDataText = computed(() => this.noDataTextInput() ?? this.widgetDefaults().noDataText ?? this.messages.t('grid.noData'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "noDataText" }] : /* istanbul ignore next */ []));
     loadPanel = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "loadPanel" }] : /* istanbul ignore next */ []));
@@ -1836,6 +2648,10 @@ class NxeDataGridComponent {
     groupPanelOptions = input(undefined, { ...(ngDevMode ? { debugName: "groupPanelOptions" } : /* istanbul ignore next */ {}), alias: 'groupPanel' });
     scrolling = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "scrolling" }] : /* istanbul ignore next */ []));
+    /**
+     * dx `sorting`. Unbound means dx's default mode 'single'. `false` and `null` are accepted as dx
+     * reads them - no mode, so headers keep their sort slot but a click never sorts.
+     */
     sorting = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sorting" }] : /* istanbul ignore next */ []));
     allowColumnResizing = input(false, /* @ts-ignore */
@@ -1934,26 +2750,56 @@ class NxeDataGridComponent {
      */
     hf = new NxeHeaderFilterModel({
         rows: () => this.hfBaseRows(),
+        fixedItems: (col) => {
+            const items = col.headerFilterConfig()?.dataSource();
+            // dx uses a supplied list verbatim: declared order, no (Blanks), and values that do
+            // not occur in the data still offered - which is the reason to supply one.
+            return items
+                ? items.map((i) => ({ key: i.value, text: String(i.text ?? i.value ?? '') }))
+                : null;
+        },
         rawValue: (col, row) => this.getRaw(row, col.dataField()),
         displayText: (col, row) => this.cellText(col, row),
-        isDate: (col) => col.dataType() === 'date',
+        isDate: (col) => this.colType(col) === 'date',
         sortByDisplayText: (col) => !!col.lookup(),
         boolLabel: (col, raw) => this.hfBoolLabel(col, raw),
         compare: (a, b) => this.compare(a, b),
+    }, {
+        blanks: () => this.messages.t('common.blanks'),
+        yes: () => this.messages.t('common.yes'),
+        no: () => this.messages.t('common.no'),
+        month: (month) => Info.months('long', { locale: this.messages.locale() })[month - 1],
     });
     hfColumn = this.hf.column;
     hfDraft = this.hf.draft;
     hfOverlayRef;
-    // Internal paging (dxo-paging present) working state
-    pageIndex = signal(0, /* @ts-ignore */
+    /**
+     * The current page.
+     *
+     * A `linkedSignal` over `nxe-paging`'s own `pageIndex` so the binding is genuinely two-way:
+     * a host that sets `[(pageIndex)]` moves the grid, and `goToPage` writes back. Declaring the
+     * input without this would satisfy an audit while doing nothing — the option would resolve
+     * and be ignored, which is worse than not accepting it.
+     */
+    pageIndex = linkedSignal(() => {
+        const remote = this.remote();
+        return (this.pageIndexModel() ??
+            this.pagingCmp()?.pageIndex() ??
+            (remote ? untracked(() => remote.options().pageIndex) : 0));
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
-    userPageSize = signal(null, /* @ts-ignore */
+    userPageSize = linkedSignal(() => this.pageSizeModel() ?? 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),
+        getSelectedRowKeys: () => (this.remote() ? this.selectedRowKeys() : this.rowKeys(this.selectedRowsData())),
+        clearSelection: () => this.deselectRows(null),
+        deselectAll: () => this.deselectRows(this.treeMode ? null : this.displayRows()),
+        refresh: () => {
+            this.refreshTick.update((v) => v + 1);
+            this.remote()?.reload();
+        },
         clearFilter: (filterName) => {
             if (!filterName || filterName === 'row') {
                 this.filterRowState.set(new Map());
@@ -1975,14 +2821,18 @@ class NxeDataGridComponent {
                 this.setColumnVisible(field, value);
             }
         },
-        getVisibleColumns: () => this.visibleColumns().map((c) => ({
-            caption: c.caption(),
-            dataField: c.dataField(),
-            dataType: c.dataType(),
-            format: c.format(),
-        })),
+        getVisibleColumns: () => this.visibleColumns().map((c) => {
+            const type = this.colType(c);
+            return {
+                caption: c.caption(),
+                dataField: c.dataField(),
+                // An inferred 'object' column exports as text, as an untyped one always did.
+                dataType: type === 'object' ? 'string' : type,
+                format: c.format(),
+            };
+        }),
         getVisibleRows: () => this.displayRows(),
-        totalCount: () => this.displayRows().length,
+        totalCount: () => this.remote()?.totalCount() ?? this.displayRows().length,
         getRootNode: () => ({
             key: undefined,
             data: undefined,
@@ -1998,7 +2848,7 @@ class NxeDataGridComponent {
             if (this.treeMode) {
                 const keyF = this.keyExpr() ?? 'id';
                 const all = new Map();
-                for (const r of (this.dataSource() ?? [])) {
+                for (const r of this.sourceRows()) {
                     all.set(r[keyF], true);
                 }
                 this.expandOverride.set(all);
@@ -2008,7 +2858,7 @@ class NxeDataGridComponent {
             const editing = this.editingCmp();
             const key = editing?.editRowKey();
             if (editing && key != null) {
-                const row = (this.dataSource() ?? []).find((r) => this.rowKey(r) === key);
+                const row = this.sourceRows().find((r) => this.rowKey(r) === key);
                 if (row) {
                     this.saveRowEdit(row, new Event('save'));
                 }
@@ -2049,12 +2899,32 @@ class NxeDataGridComponent {
     /** Guards against a handler that schedules another render re-entering the walk. */
     preparedDepth = 0;
     constructor() {
+        // Server-side data: the request is a computed over exactly the state it is made of, and
+        // this stream (explicitly those signals, nothing a callee reads) hands each distinct one to
+        // the source, waiting out filter-row typing first.
+        toObservable(this.remoteRequest)
+            .pipe(debounce(() => {
+            if (!this.remoteTyping) {
+                return of(0);
+            }
+            this.remoteTyping = false;
+            return timer(this.remote()?.filterDebounce ?? 0);
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe((request) => request && this.dispatchRemote(request));
         // Registered before onContentReady so cells are prepared by the time it fires, as in dx.
         afterRenderEffect(() => {
             this.renderRows();
             this.visibleColumns();
             untracked(() => this.emitPreparedEvents());
         });
+        // A cellTemplate that draws a check box centres its column, header and cells, the way a
+        // boolean column is centred. Only the rendered cells can say what a template draws, so
+        // this reads them after render; the DOM walk is untracked, like emitPreparedEvents.
+        afterRenderEffect(() => {
+            this.renderRows();
+            this.visibleColumns();
+            untracked(() => this.detectTemplateCheckboxColumns());
+        });
         // dx onContentReady parity: fire after the rendered row set reaches the DOM.
         afterRenderEffect(() => {
             this.renderRows();
@@ -2072,7 +2942,7 @@ class NxeDataGridComponent {
             untracked(() => this.scheduleAutoWidthMeasure());
         });
         afterNextRender(() => {
-            const rv = this.elementRef.nativeElement.querySelector('.dx-datagrid-rowsview');
+            const rv = this.elementRef.nativeElement.querySelector('.nxe-datagrid-rowsview');
             if (rv && typeof ResizeObserver !== 'undefined') {
                 this.resizeObserver = new ResizeObserver((entries) => {
                     const w = Math.round(entries[0]?.contentRect?.width ?? 0);
@@ -2083,6 +2953,22 @@ class NxeDataGridComponent {
                 this.resizeObserver.observe(rv);
             }
         });
+        // The free-space row: re-read whenever the rows view (the grid's height) or its table (the
+        // rows) changes size. The paged case needs no reading beyond the row height, so a page
+        // change that keeps the table's height still resolves through `freeSpace` alone.
+        afterNextRender(() => {
+            const host = this.elementRef.nativeElement;
+            // This grid's own elements: a nested master-detail grid's come later in the document.
+            const rv = host.querySelector('.nxe-datagrid-rowsview');
+            const table = rv?.querySelector(':scope > .nxe-datagrid-content > .nxe-datagrid-table');
+            if (!rv || !table || typeof ResizeObserver === 'undefined') {
+                return;
+            }
+            const observer = new ResizeObserver(() => this.measureFreeSpace(rv, table));
+            observer.observe(rv);
+            observer.observe(table);
+            this.destroyRef.onDestroy(() => observer.disconnect());
+        });
     }
     // --- Column auto-width engine (dx columnAutoWidth parity) ----------------------------------
     autoWidths = signal(null, /* @ts-ignore */
@@ -2113,17 +2999,16 @@ class NxeDataGridComponent {
     }
     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) {
+        const table = host.querySelector('.nxe-datagrid-content > .nxe-datagrid-table');
+        const rowsview = host.querySelector('.nxe-datagrid-rowsview');
+        if (!table || !rowsview) {
             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 lead = this.groupLevelCount() + (this.masterDetailEnabled() ? 1 : 0) + (this.selectColumnVisible() ? 1 : 0);
+        // One cell per visible column, gathered across the header rows: with bands a top-level
+        // column sits in the first row and spans down, so no single row holds them all.
+        const cells = nxeHeaderLeafCells(host);
         const container = rowsview.clientWidth;
         if (cells.length !== cols.length || container <= 0) {
             return;
@@ -2134,10 +3019,18 @@ class NxeDataGridComponent {
         const prevLayout = table.style.tableLayout;
         const prevWidth = table.style.width;
         const prevColWidths = colEls.map((c) => c.style.width);
+        // dx's best-fit pass moves the header tbody into the rows table as `dx-header
+        // dx-datagrid-best-fit` (m_grid_view.js:187-206). Its rules unfloat the indicator block and
+        // show every `dx-sort-none` placeholder at 14px, so each sortable column measures 17px wider
+        // (34px centred, with the hidden mirror) whether sorted or not - and sorting never changes a
+        // width. The class goes on our thead, which is that tbody's counterpart.
+        const thead = table.querySelector(':scope > thead');
+        thead?.classList.add('nxe-datagrid-best-fit');
         table.style.tableLayout = 'auto';
         table.style.width = 'max-content';
         colEls.forEach((c) => (c.style.width = ''));
         const measured = cells.map((c) => c.getBoundingClientRect().width);
+        thead?.classList.remove('nxe-datagrid-best-fit');
         table.style.tableLayout = prevLayout;
         table.style.width = prevWidth;
         colEls.forEach((c, i) => (c.style.width = prevColWidths[i]));
@@ -2154,7 +3047,7 @@ class NxeDataGridComponent {
         });
         const specialSum = 30 * this.groupLevelCount() +
             (this.masterDetailEnabled() ? 30 : 0) +
-            (this.showCheckboxes() ? 70 : 0) +
+            (this.selectColumnVisible() ? 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);
@@ -2209,24 +3102,51 @@ class NxeDataGridComponent {
         if (aw && this.columnAutoWidth()) {
             return aw.widths[idx] ?? this.colWidth(col);
         }
+        const slack = this.frozenSlack();
+        if (slack > 0 && idx === this.visibleColumns().length - 1) {
+            return `${Math.round(this.frozenColWidth(col) + slack)}px`;
+        }
+        // A manual resize froze every visible column at a measured width, and that width - not the
+        // declared one - is what the column now has. (A declared width used to win here, and only a
+        // stale inline style left by the drag kept a resized column at its new width.)
+        if (this.widthOverride().has(col.dataField())) {
+            return `${this.frozenColWidth(col)}px`;
+        }
         const w = this.colWidth(col);
         if (w == null && this.widthOverride().size) {
             return `${this.frozenColWidth(col)}px`;
         }
         return w;
     }
+    /** What a frozen layout's columns add up to, the command columns included. */
+    frozenTableWidth() {
+        let total = 30 * this.groupLevelCount() +
+            (this.masterDetailEnabled() ? 30 : 0) +
+            (this.selectColumnVisible() ? 40 : 0) +
+            (this.rowEditCommandVisible() ? 100 : 0);
+        for (const col of this.visibleColumns()) {
+            total += this.frozenColWidth(col);
+        }
+        return total;
+    }
+    /**
+     * With `resizeFillsGrid`, the room a frozen widget-mode layout leaves on the right, which the
+     * trailing column takes. 0 when the columns fill or overflow the grid - that table scrolls.
+     */
+    frozenSlack = computed(() => {
+        if (!this.resizeFillsGrid() || !this.widthOverride().size || this.columnResizingMode() !== 'widget') {
+            return 0;
+        }
+        const container = this.containerW();
+        return container > 0 ? Math.max(0, Math.round(container - this.frozenTableWidth())) : 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frozenSlack" }] : /* istanbul ignore next */ []));
     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`;
+            // The trailing column already holds the slack, so the columns add up to the grid.
+            return this.frozenSlack() > 0 ? '100%' : `${Math.round(this.frozenTableWidth())}px`;
         }
         if (this.widthOverride().size) {
             return '100%';
@@ -2251,21 +3171,76 @@ class NxeDataGridComponent {
             (this.treeMode && this.selectionMode() === 'multiple'));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showCheckboxes" }] : /* istanbul ignore next */ []));
+    /**
+     * The detached checkbox column. A tree list has none: dx draws its row checkbox in the first
+     * cell, after the expander, and its select-all in the first column's header.
+     */
+    selectColumnVisible = computed(() => this.showCheckboxes() && !this.treeMode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectColumnVisible" }] : /* istanbul ignore next */ []));
+    treeSelectAll = computed(() => this.treeMode && this.showCheckboxes() && this.selectionMode() === 'multiple', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "treeSelectAll" }] : /* istanbul ignore next */ []));
+    recursiveTreeSelection = computed(() => this.treeMode && this.selectionMode() === 'multiple' && (this.selection()?.recursive() ?? false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "recursiveTreeSelection" }] : /* istanbul ignore next */ []));
+    /**
+     * Each node's recursive selection state as dx draws it: `all` when its key is selected or an
+     * ancestor's is, or when every child is; `some` when only some descendants are; absent for none.
+     * Keys hold the selection, so the hierarchy - not the key list - decides what a parent shows.
+     */
+    treeCheckState = computed(() => this.recursiveTreeSelection()
+        ? nxeTreeCheckState(this.treeRoots(), new Set(this.selectedRowKeys()))
+        : new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "treeCheckState" }] : /* istanbul ignore next */ []));
+    /** Parent of each tree node, for settling ancestors after a recursive toggle. */
+    treeParents = computed(() => {
+        const parents = new Map();
+        const walk = (nodes) => {
+            for (const n of nodes) {
+                n.children.forEach((c) => parents.set(c.key, n));
+                walk(n.children);
+            }
+        };
+        walk(this.treeRoots());
+        return parents;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "treeParents" }] : /* istanbul ignore next */ []));
     /** Selected rows in dataSource order (stale refs from old data naturally filtered out). */
     selectedRowsData = computed(() => {
+        if (this.remote()) {
+            // Keyed, and across pages: the row object is the page's when it is on screen, else the
+            // one remembered from when it was selected.
+            const page = new Map(this.sourceRows().map((r) => [this.rowKey(r), r]));
+            return this.selectedRowKeys().flatMap((key) => {
+                const row = page.get(key) ?? this.remoteRowCache.get(key);
+                if (row === undefined) {
+                    return [];
+                }
+                this.remoteRowCache.set(key, row);
+                return [row];
+            });
+        }
         if (this.treeMode) {
             const keySet = new Set(this.selectedRowKeys());
             return keySet.size === 0
                 ? []
-                : (this.dataSource() ?? []).filter((r) => keySet.has(this.rowKey(r)));
+                : this.sourceRows().filter((r) => keySet.has(this.rowKey(r)));
         }
         const set = this.selectedSet();
-        return set.size === 0 ? [] : (this.dataSource() ?? []).filter((r) => set.has(r));
+        return set.size === 0 ? [] : this.sourceRows().filter((r) => set.has(r));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedRowsData" }] : /* istanbul ignore next */ []));
     allSelected = computed(() => {
+        if (this.remote()) {
+            const rows = this.displayRows();
+            const keys = this.selectedKeySet();
+            return rows.length > 0 && rows.every((r) => keys.has(this.rowKey(r)));
+        }
+        if (this.recursiveTreeSelection()) {
+            const roots = this.treeRoots();
+            const state = this.treeCheckState();
+            return roots.length > 0 && roots.every((n) => state.get(n.key) === 'all');
+        }
         if (this.treeMode) {
-            const rows = (this.dataSource() ?? []);
+            const rows = this.sourceRows();
             const keys = this.selectedRowKeys();
             return rows.length > 0 && rows.every((r) => keys.includes(this.rowKey(r)));
         }
@@ -2274,12 +3249,19 @@ class NxeDataGridComponent {
         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 */
+    someSelected = computed(() => this.remote()
+        ? this.displayRows().some((r) => this.selectedKeySet().has(this.rowKey(r)))
+        : this.recursiveTreeSelection()
+            ? this.treeCheckState().size > 0
+            : this.treeMode
+                ? this.selectedRowKeys().length > 0
+                : this.displayRows().some((r) => this.selectedSet().has(r)), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []));
+    /** The key field: the bound `keyExpr`, else the remote source's own `key`. */
+    keyField = computed(() => this.keyExpr() ?? this.remote()?.key, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyField" }] : /* istanbul ignore next */ []));
     rowKey(row) {
-        const k = this.keyExpr();
+        const k = this.keyField();
         return k ? row?.[k] : row;
     }
     treeDescendantKeys(row) {
@@ -2319,98 +3301,442 @@ class NxeDataGridComponent {
             this.emitTreeSelectionChanged([key], added, removed);
             return;
         }
-        const recursive = this.selection()?.recursive() ?? false;
+        if (this.recursiveTreeSelection()) {
+            this.toggleRecursiveTreeSelection(row, key);
+            return;
+        }
         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);
+        selecting ? keys.add(key) : keys.delete(key);
+        const arr = [...keys];
+        this.selectedRowKeys.set(arr);
+        this.emitTreeSelectionChanged(arr, selecting ? [key] : [], selecting ? [] : [key]);
+    }
+    /**
+     * dx recursive selection. Clicking a node that is not fully checked (unchecked, or a parent
+     * showing indeterminate) selects its whole subtree; clicking a checked one clears it. Then its
+     * ancestors follow their children, checked once all of them are and cleared as soon as one is
+     * not, so deselecting one child leaves its parent indeterminate rather than still ticked.
+     *
+     * The key list is rewritten as every checked node, which dx's `getSelectedRowKeys('all')`
+     * also reports. The event's current keys are what changed on screen.
+     */
+    toggleRecursiveTreeSelection(row, key) {
+        const before = this.treeCheckState();
+        const checked = new Set();
+        before.forEach((state, k) => state === 'all' && checked.add(k));
+        const selecting = before.get(key) !== 'all';
+        for (const k of this.treeDescendantKeys(row)) {
+            selecting ? checked.add(k) : checked.delete(k);
+        }
+        const parents = this.treeParents();
+        for (let parent = parents.get(key); parent; parent = parents.get(parent.key)) {
+            parent.children.every((c) => checked.has(c.key)) ? checked.add(parent.key) : checked.delete(parent.key);
+        }
+        const previous = this.selectedRowKeys();
+        const kept = previous.filter((k) => checked.has(k));
+        const keptSet = new Set(kept);
+        const next = [...kept, ...[...checked].filter((k) => !keptSet.has(k))];
+        const wasChecked = (k) => before.get(k) === 'all';
+        this.selectedRowKeys.set(next);
+        this.emitTreeSelectionChanged(next, next.filter((k) => !wasChecked(k)), [...before.keys()].filter((k) => wasChecked(k) && !checked.has(k)));
+    }
+    /** A recursive tree list's parent with only some descendants selected (dx's indeterminate box). */
+    isTreeIndeterminate(row) {
+        return this.treeCheckState().get(this.rowKey(row)) === 'some';
+    }
+    emitTreeSelectionChanged(allKeys, added, removed) {
+        const keySet = new Set(allKeys);
+        const data = this.sourceRows().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 */ []));
+    // --- Server-side data (NxeRemoteDataSource) -------------------------------------------------
+    /** A `{ load }` store handed to `dataSource` with `remoteOperations`, wrapped once per store. */
+    storeWrappers = new WeakMap();
+    wrapped = null;
+    remoteWarnings = new Set();
+    /** Rows picked on earlier pages, by key, so `selectedRowsData` still has them. */
+    remoteRowCache = new Map();
+    /** Set by filter-row typing; the next request waits `filterDebounce` before it is sent. */
+    remoteTyping = false;
+    /** What the last request was for, to tell a changed filter, sort or size from a changed page. */
+    remoteSignature = null;
+    warnOnce(key, message) {
+        if (!this.remoteWarnings.has(key)) {
+            this.remoteWarnings.add(key);
+            console.warn(`[nxe-data-grid] ${message}`);
+        }
+    }
+    /**
+     * The source the grid pages through, or `null` for a client-side array. An
+     * {@link NxeRemoteDataSource} is used as it is; a `{ load }` store becomes one when
+     * `remoteOperations` is on.
+     */
+    remote = computed(() => {
+        const source = this.dataSource();
+        if (this.treeMode) {
+            if (source instanceof NxeRemoteDataSource || nxeIsStoreLike(source)) {
+                this.warnOnce('tree', 'nxe-tree-list does not support server-side data; the source is ignored.');
+            }
+            return null;
+        }
+        if (source instanceof NxeRemoteDataSource) {
+            return source;
+        }
+        if (!nxeIsStoreLike(source)) {
+            return null;
+        }
+        if (!this.remoteOperations()) {
+            this.warnOnce('store', 'A { load } dataSource needs [remoteOperations]="true"; without it the grid shows no rows.');
+            return null;
+        }
+        let wrapper = this.storeWrappers.get(source);
+        if (!wrapper) {
+            wrapper = new NxeRemoteDataSource((options, context) => source.load(options, context), {
+                key: source.key,
+            });
+            this.storeWrappers.set(source, wrapper);
+        }
+        this.wrapped = wrapper;
+        return wrapper;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "remote" }] : /* istanbul ignore next */ []));
+    /** The rows every client-side computed reads: the array, or the remote source's current page. */
+    sourceRows = computed(() => {
+        const remote = this.remote();
+        if (remote) {
+            return remote.items();
+        }
+        const source = this.dataSource();
+        return Array.isArray(source) ? source : [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceRows" }] : /* istanbul ignore next */ []));
+    selectedKeySet = computed(() => new Set(this.selectedRowKeys()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedKeySet" }] : /* istanbul ignore next */ []));
+    /** The sort a request carries: the controlled `sort`, else the header sort. */
+    remoteSort = computed(() => {
+        const bound = this.sortModel();
+        if (bound !== undefined) {
+            return bound.map((s) => ({ selector: s.selector, desc: s.desc }));
+        }
+        const sort = this.effectiveSort();
+        return sort ? [{ selector: sort.field, desc: sort.dir === 'desc' }] : [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "remoteSort" }] : /* istanbul ignore next */ []));
+    /** The filter a request carries: filter row AND header filters AND the application's `filter`. */
+    remoteFilter = computed(() => {
+        if (!this.remote()) {
+            return null;
+        }
+        return nxeFilterAnd(this.remoteFilterRowExpression(), this.remoteHeaderFilterExpression(), this.filter());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "remoteFilter" }] : /* istanbul ignore next */ []));
+    /** The request the remote source should be showing, or `null` for a client-side grid. */
+    remoteRequest = computed(() => {
+        const source = this.remote();
+        if (!source) {
+            return null;
+        }
+        return {
+            source,
+            query: {
+                pageIndex: this.currentPage(),
+                pageSize: this.effectivePageSize(),
+                sort: this.remoteSort(),
+                filter: this.remoteFilter(),
+            },
+        };
+    }, { ...(ngDevMode ? { debugName: "remoteRequest" } : /* istanbul ignore next */ {}), 
+        // The page index is clamped by the source's total, so every response re-derives the
+        // request; an unchanged one must not be a new value, or it would reload forever.
+        equal: (a, b) => a === b || (!!a && !!b && a.source === b.source && nxeSameQuery(a.query, b.query)) });
+    dispatchRemote(request) {
+        const { source, query } = request;
+        const key = JSON.stringify([query.pageSize, query.sort, query.filter]);
+        const last = this.remoteSignature;
+        this.remoteSignature = { source, key };
+        if (last && last.source === source && last.key !== key && query.pageIndex !== 0) {
+            // A new filter, sort or page size means a new result set: back to its first page. The
+            // move restates the request, which is what loads.
+            this.goToPage(0);
+            return;
+        }
+        if (this.groupColumns().length) {
+            this.warnOnce('group', 'Grouping is not supported with server-side data: rows are grouped within the current page only.');
+        }
+        if (this.summaryCmp()) {
+            this.warnOnce('summary', 'Summaries are not supported with server-side data: they are computed over the current page only.');
+        }
+        const before = source.options();
+        source.setOptions(query);
+        if (source.options() !== before) {
+            this.optionsChange.emit(source.options());
+        }
+    }
+    // Filter row -> expression. The matcher in `buildFilterRowMatcher` is the client-side reading
+    // of the same state; keep the two in step.
+    remoteFilterRowExpression() {
+        const byField = this.columnByField();
+        const parts = [];
+        for (const [field, entry] of this.filterRowState()) {
+            const col = byField.get(field);
+            const expr = col ? this.filterRowCondition(col, entry) : null;
+            if (expr) {
+                parts.push(expr);
+            }
+        }
+        return nxeFilterAnd(...parts);
+    }
+    filterRowCondition(col, entry) {
+        const field = col.dataField();
+        const kind = this.frEditorKind(col);
+        const t1 = entry.text.trim();
+        const t2 = (entry.text2 ?? '').trim();
+        if (!t1 && !t2) {
+            return null;
+        }
+        if (kind === 'boolean') {
+            return [field, '=', t1 === 'true'];
+        }
+        if (kind === 'lookup') {
+            const lookup = col.lookup();
+            const valueOf = (i) => nxeResolveExpr(lookup.valueExpr ?? 'lovCode', i);
+            const item = (lookup.dataSource ?? []).find((i) => String(valueOf(i) ?? '') === t1);
+            return [field, '=', item ? valueOf(item) : t1];
+        }
+        const between = (lo, hi, hiOp) => nxeFilterAnd(lo == null ? null : [field, '>=', lo], hi == null ? null : [field, hiOp, hi]);
+        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; // nothing applies until the editor holds a valid number
+            }
+            if (entry.op === 'between') {
+                return between(v1, v2, '<=');
+            }
+            const op = ['<>', '<', '<=', '>', '>='].find((o) => o === entry.op) ?? '=';
+            return v1 == null ? null : [field, op, v1];
+        }
+        if (kind === 'date') {
+            const d1 = t1 ? this.dayKey(t1) : null;
+            const d2 = t2 ? this.dayKey(t2) : null;
+            if ((t1 && !d1) || (t2 && !d2)) {
+                return null;
+            }
+            // A date is a whole day, as in dx: '=' is [day, next day), '<=' ends before the next day.
+            const next = (day) => nxeNextDay(day);
+            switch (entry.op) {
+                case 'between':
+                    return between(d1, d2 ? next(d2) : null, '<');
+                case '<>':
+                    return d1 ? nxeFilterOr([field, '<', d1], [field, '>=', next(d1)]) : null;
+                case '<':
+                    return d1 ? [field, '<', d1] : null;
+                case '<=':
+                    return d1 ? [field, '<', next(d1)] : null;
+                case '>':
+                    return d1 ? [field, '>=', next(d1)] : null;
+                case '>=':
+                    return d1 ? [field, '>=', d1] : null;
+                default:
+                    return d1 ? between(d1, next(d1), '<') : null;
+            }
+        }
+        // Text: the operation as chosen. Case is the server's business; the client matcher ignores it.
+        const textOps = ['notcontains', 'startswith', 'endswith', '=', '<>'];
+        return [field, textOps.find((o) => o === entry.op) ?? 'contains', t1];
+    }
+    remoteHeaderFilterExpression() {
+        const byField = this.columnByField();
+        const parts = [];
+        for (const [field, keys] of this.effectiveHeaderFilters()) {
+            const isDate = (byField.get(field) ? this.colType(byField.get(field)) : undefined) === 'date';
+            const values = [...keys].map((key) => {
+                if (key === NXE_HF_BLANKS) {
+                    return [field, '=', null];
+                }
+                if (isDate && typeof key === 'string') {
+                    return [[field, '>=', key], 'and', [field, '<', nxeNextDay(key)]];
+                }
+                return [field, '=', key];
+            });
+            // An empty selection is an empty grid: a condition nothing satisfies.
+            parts.push(nxeFilterOr(...values) ?? [[field, '=', null], 'and', [field, '<>', null]]);
+        }
+        return nxeFilterAnd(...parts);
+    }
+    toggleRemoteSelection(row) {
+        const key = this.rowKey(row);
+        const previous = this.selectedRowKeys();
+        let next;
+        let added = [];
+        let removed = [];
+        if (this.selectionMode() !== 'multiple') {
+            added = previous.includes(key) ? [] : [key];
+            removed = previous.filter((k) => k !== key);
+            next = [key];
+        }
+        else if (previous.includes(key)) {
+            next = previous.filter((k) => k !== key);
+            removed = [key];
+        }
+        else {
+            next = [...previous, key];
+            added = [key];
+        }
+        this.remoteRowCache.set(key, row);
+        this.selectedRowKeys.set(next);
+        this.emitRemoteSelectionChanged(next, added, removed);
+    }
+    toggleRemoteSelectAll() {
+        const pageKeys = this.displayRows().map((r) => this.rowKey(r));
+        for (const row of this.displayRows()) {
+            this.remoteRowCache.set(this.rowKey(row), row);
+        }
+        const previous = this.selectedRowKeys();
+        if (this.allSelected()) {
+            const drop = new Set(pageKeys);
+            const next = previous.filter((k) => !drop.has(k));
+            this.selectedRowKeys.set(next);
+            this.emitRemoteSelectionChanged(next, [], pageKeys);
+        }
+        else {
+            const have = new Set(previous);
+            const added = pageKeys.filter((k) => !have.has(k));
+            const next = [...previous, ...added];
+            this.selectedRowKeys.set(next);
+            this.emitRemoteSelectionChanged(next, added, []);
         }
-        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)));
+    emitRemoteSelectionChanged(keys, added, removed) {
         this.onSelectionChanged.emit({
-            selectedRowsData: data,
-            selectedRowKeys: allKeys,
+            selectedRowsData: this.selectedRowsData(),
+            selectedRowKeys: keys,
             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 */
+    pagingEnabled = computed(() => !!this.remote() || (!!this.pagingCmp() && this.pagingCmp().enabled()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pagingEnabled" }] : /* istanbul ignore next */ []));
-    effectivePageSize = computed(() => this.userPageSize() ?? this.pagingCmp()?.pageSize() ?? 20, /* @ts-ignore */
+    effectivePageSize = computed(() => this.userPageSize() ??
+        this.pagingCmp()?.pageSize() ??
+        this.remote()?.options().pageSize ??
+        NXE_REMOTE_DEFAULT_PAGE_SIZE, /* @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 */
+    pageCount = computed(() => {
+        const remote = this.remote();
+        if (remote) {
+            return Math.max(1, Math.ceil(remote.totalCount() / this.effectivePageSize()));
+        }
+        return this.pagingEnabled() ? Math.max(1, Math.ceil(this.displayRows().length / this.effectivePageSize())) : 1;
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []));
+    /**
+     * The page shown: `pageIndex` held inside the page count. A filter can leave the bound index
+     * past the last page; dx moves it back (m_data_source_adapter.js:454), and the rows, the
+     * pager's selected button, its info text and prev/next all read this one value.
+     */
+    currentPage = computed(() => {
+        const remote = this.remote();
+        // Until the first response there is no total to hold the index inside.
+        if (remote && !remote.loaded()) {
+            return Math.max(0, this.pageIndex());
+        }
+        return Math.max(0, Math.min(this.pageIndex(), this.pageCount() - 1));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentPage" }] : /* 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()) {
+        if (!this.pagingEnabled() || this.remote()) {
             return rows;
         }
         const ps = this.effectivePageSize();
-        const pi = Math.min(this.pageIndex(), this.pageCount() - 1);
+        const pi = this.currentPage();
         return rows.slice(pi * ps, pi * ps + ps);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pagedRows" }] : /* istanbul ignore next */ []));
+    /**
+     * dx `PagerView.isVisible` (m_pager.js): `true` always, `'auto'` only while there is more than
+     * one page to move between, and never under virtual or infinite scrolling.
+     */
     pagerVisible = computed(() => {
         const p = this.pagerCmp();
         if (!p) {
             return false;
         }
-        return p.visible() === true || (p.visible() === 'auto' && this.pagingEnabled());
+        const mode = this.scrolling()?.mode;
+        return (p.visible() === true ||
+            (p.visible() === 'auto' &&
+                this.pagingEnabled() &&
+                this.pageCount() > 1 &&
+                mode !== 'virtual' &&
+                mode !== 'infinite'));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pagerVisible" }] : /* istanbul ignore next */ []));
-    pageSizes = computed(() => {
-        const a = this.pagerCmp()?.allowedPageSizes();
-        return Array.isArray(a) ? a : [this.effectivePageSize()];
-    }, /* @ts-ignore */
+    pageSizes = computed(() => nxePagerPageSizes(this.pagerCmp()?.allowedPageSizes(), this.pagingCmp()?.pageSize() ?? 20), /* @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 */ []));
+    /** dx's small mode: a page-size drop-down, and the navigation buttons whatever the option says. */
+    pagerCompact = computed(() => this.pagerCmp()?.displayMode() === 'compact', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagerCompact" }] : /* istanbul ignore next */ []));
+    /** dx `getRenderPrevButton` (pages/page_index_selector.js): `!isLargeDisplayMode || showNavigationButtons`. */
+    pagerNavVisible = computed(() => this.pagerCompact() || !!this.pagerCmp()?.showNavigationButtons(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagerNavVisible" }] : /* istanbul ignore next */ []));
+    /**
+     * The page buttons and `. . .` separators. A linkedSignal because dx's list keeps a sliding
+     * window between renders (pages/large.js): the previous window decides whether the next one
+     * moves.
+     */
+    pagerWindow = linkedSignal({ ...(ngDevMode ? { debugName: "pagerWindow" } : /* istanbul ignore next */ {}), source: () => ({ count: this.pageCount(), index: this.currentPage() }),
+        computation: (src, prev) => nxePagerWindow(src.count, src.index, prev?.value) });
+    pageItems = computed(() => this.pagerWindow().items, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageItems" }] : /* 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';
@@ -2421,7 +3747,7 @@ class NxeDataGridComponent {
         if (!this.treeMode) {
             return [];
         }
-        const rows = (this.dataSource() ?? []);
+        const rows = this.sourceRows();
         const keyF = this.keyExpr() ?? 'id';
         const parentF = this.parentIdExpr() ?? 'parentId';
         const root = this.rootValue();
@@ -2535,10 +3861,10 @@ class NxeDataGridComponent {
                 for (const item of items) {
                     const text = this.summaryText(item, bucket);
                     if (item.showInGroupFooter()) {
-                        footerSums.set(item.column(), text);
+                        footerSums.set(this.summaryTarget(item), text);
                     }
                     else if (item.alignByColumn()) {
-                        alignedSums.set(item.showInColumn() ?? item.column(), text);
+                        alignedSums.set(this.summaryTarget(item), text);
                     }
                     else {
                         captionParts.push(text);
@@ -2575,6 +3901,18 @@ class NxeDataGridComponent {
         return out;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "renderRows" }] : /* istanbul ignore next */ []));
+    /**
+     * The dataField a group summary renders under: dx `_calculateSummaryCells` (m_summary.js:443)
+     * takes `showInColumn` when it names a column, else the item's own `column`.
+     *
+     * Keying footers on `column()` alone put an item that names only `showInColumn` (broker's
+     * `name="totalSumInsured" showInColumn="totalSumInsured" summaryType="custom"`) under its
+     * empty `column` - i.e. in whichever column happens to have no dataField.
+     */
+    summaryTarget(item) {
+        const target = item.showInColumn();
+        return target && this.columnByField().has(target) ? target : item.column();
+    }
     /** Computes + formats a summary item over a set of rows. */
     summaryText(item, rows) {
         const field = item.column();
@@ -2605,7 +3943,9 @@ class NxeDataGridComponent {
             }
         }
         const fmt = item.valueFormat();
-        const valueText = typeof fmt === 'string' ? formatNumber(value, parseNumberFormat(fmt)) : String(value);
+        const valueText = typeof fmt === 'string'
+            ? formatNumber(value, parseNumberFormat(fmt), this.separators)
+            : String(value);
         const ct = item.customizeText();
         const text = ct ? ct({ value, valueText }) : valueText;
         return item.displayFormat().replace('{0}', text);
@@ -2640,29 +3980,33 @@ class NxeDataGridComponent {
         const next = Math.max(0, Math.min(index, this.pageCount() - 1));
         if (next !== this.pageIndex()) {
             this.pageIndex.set(next);
+            // Write back so `[(pageIndex)]` reflects a page the grid moved to itself.
+            this.pagingCmp()?.pageIndex.set(next);
+            if (this.pageIndexModel() !== undefined || this.remote()) {
+                this.pageIndexModel.set(next);
+            }
             this.onOptionChanged.emit({ name: 'paging', fullName: 'paging.pageIndex', value: next });
         }
     }
     prevPage() {
-        this.goToPage(this.pageIndex() - 1);
+        this.goToPage(this.currentPage() - 1);
     }
     nextPage() {
-        this.goToPage(this.pageIndex() + 1);
+        this.goToPage(this.currentPage() + 1);
     }
     changePageSize(size) {
         this.userPageSize.set(size);
         this.pageIndex.set(0);
+        if (this.pageSizeModel() !== undefined || this.remote()) {
+            this.pageSizeModel.set(size);
+            this.pageIndexModel.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 */
+    /** dx's info text, `Page {0} of {1} ({2} items)` unless `infoText` says otherwise (pagination/info.js). */
+    pageInfo = computed(() => nxePagerInfoText(this.pagerCmp()?.infoText() ?? this.messages.t('grid.pager.info'), this.currentPage(), this.remote() ? nxePagerCount(this.pageCount(), this.separators) : this.pageCount(), this.remote() ? nxePagerCount(this.remote().totalCount(), this.separators) : this.displayRows().length), /* @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]);
@@ -2732,7 +4076,7 @@ class NxeDataGridComponent {
         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.setSort(null);
         }
         this.emitGroupIndexChange(this.columns().indexOf(col), null, level);
     }
@@ -2749,8 +4093,7 @@ class NxeDataGridComponent {
         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.setSort({ field, dir });
         }
         this.emitGroupIndexChange(this.columns().findIndex((c) => c.dataField() === field), level, null);
     }
@@ -2948,30 +4291,50 @@ class NxeDataGridComponent {
         const next = this.columnResizingMode() === 'nextColumn' ? this.visibleColumns()[ci + 1] ?? null : null;
         this.resize.start(col.dataField(), next?.dataField() ?? null, ci, this.leadCellCount(), event);
     }
+    /** A visible column's position, for cells rendered outside the main `@for` index. */
+    visibleIndexOf(col) {
+        return this.visibleColumns().indexOf(col);
+    }
     /** 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));
-    }
+            (this.selectColumnVisible() ? 1 : 0));
+    }
+    // dx numbers every cell of a rows-view row, command cells included (`_setCellAriaAttributes`,
+    // m_columns_view.js:681-693): the group indents are 1..n, then the master-detail expander, the
+    // selection column, the data columns and the edit column. Apps address cells by it - bright's
+    // merge helper lifts `td[aria-colindex="1"]` out of a merged row, which in a grouped grid is
+    // the indent cell - so the command cells carry it too.
+    /** The master-detail expander's aria-colindex: straight after the group indents. */
+    expandColIndex = computed(() => this.groupLevelCount() + 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandColIndex" }] : /* istanbul ignore next */ []));
+    /** The selection column's aria-colindex: after the indents and the expander. */
+    selectColIndex = computed(() => this.groupLevelCount() + (this.masterDetailEnabled() ? 1 : 0) + 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectColIndex" }] : /* istanbul ignore next */ []));
+    /** The row-edit command column's aria-colindex: after the last data column. */
+    editColIndex = computed(() => this.leadCellCount() + this.visibleColumns().length + 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editColIndex" }] : /* istanbul ignore next */ []));
     /** 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);
-                }
-            });
-        }
+        const cells = nxeHeaderLeafCells(this.elementRef.nativeElement);
+        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);
+        // dx stops redistributing after a manual resize. The auto-width pass would drop its result
+        // on its next run, but nothing that run tracks has changed, so drop it now - left in place,
+        // it outranks the frozen widths and the column snaps back to its auto width on release.
+        this.autoWidths.set(null);
+        this.lastAutoWidthKey = '';
         for (const ch of changes) {
             this.onOptionChanged.emit({
                 name: 'columns',
@@ -3047,7 +4410,7 @@ class NxeDataGridComponent {
     /** Total column count including command columns (indents/checkbox/expand/edit) for colspans. */
     allColCount = computed(() => (this.groupLevelCount() +
         this.visibleColumns().length +
-        (this.showCheckboxes() ? 1 : 0) +
+        (this.selectColumnVisible() ? 1 : 0) +
         (this.masterDetailEnabled() ? 1 : 0) +
         (this.rowEditCommandVisible() ? 1 : 0)) ||
         1, /* @ts-ignore */
@@ -3093,8 +4456,51 @@ class NxeDataGridComponent {
             return;
         }
         event.stopPropagation();
+        // A boolean cell already shows its editor (dx showEditorAlways); only its checkbox
+        // toggles, so a click beside the box does not swap anything in.
+        if (this.booleanInPlace(col)) {
+            return;
+        }
         this.editingCell.set({ row, field: col.dataField() });
     }
+    /**
+     * dx `readOnly: !options.setValue` (m_editing.js:210): a grid checkbox is editable only where
+     * dx gives the cell a setValue - cell mode on an editable column (m_editing.js:1832-1847). Row
+     * mode's resting rows stay read-only; the row being edited renders the editor instead.
+     */
+    booleanReadOnly(col) {
+        return !(this.cellEditingEnabled() && this.editableCell(col));
+    }
+    /**
+     * A boolean cell that is its own editor: cell mode, editable, and no editCellTemplate asking
+     * to take over. The resting checkbox toggles in place, as dx's always-shown dxCheckBox does.
+     */
+    booleanInPlace(col) {
+        return this.isBooleanCell(col) && !this.booleanReadOnly(col) && !col.editCellTemplate();
+    }
+    /** A resting boolean checkbox was clicked: toggle it when it is editable, else let it be. */
+    onBooleanCellClick(row, col, event) {
+        if (!this.booleanInPlace(col)) {
+            return;
+        }
+        event.stopPropagation();
+        this.commitCellEdit(row, col, this.getRaw(row, col.dataField()) !== true);
+    }
+    /**
+     * The checkbox editor's state: the buffered value in the row being edited, else the row's.
+     * Read as the native editor it replaces read it - any value but '' and 'false' is checked.
+     */
+    editorChecked(row, col) {
+        const text = this.editorInputValue(row, col);
+        return !!text && text !== 'false';
+    }
+    /** A click or Space on the checkbox editor. Space must not scroll the page or reach the grid. */
+    toggleEditorCheck(row, col, mode, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const next = !this.editorChecked(row, col);
+        mode === 'cell' ? this.commitCellEdit(row, col, next) : this.bufferRowEdit(col, next);
+    }
     /** 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);
@@ -3136,7 +4542,7 @@ class NxeDataGridComponent {
     writeCell(row, col, rawInput) {
         const field = col.dataField();
         let value = rawInput;
-        if (col.dataType() === 'number' && typeof rawInput === 'string') {
+        if (this.colType(col) === 'number' && typeof rawInput === 'string') {
             const n = Number(rawInput.replace(/,/g, ''));
             value = rawInput.trim() === '' || isNaN(n) ? null : n;
         }
@@ -3427,7 +4833,10 @@ class NxeDataGridComponent {
     /** dataSource → filter-row filters → header filters (sorting happens in `displayRows`). */
     filteredRows = computed(() => {
         this.refreshTick();
-        let rows = (this.dataSource() ?? []);
+        let rows = this.sourceRows();
+        if (this.remote()) {
+            return rows; // the server has filtered
+        }
         const rowFilter = this.filterRowPredicate();
         if (rowFilter) {
             rows = rows.filter(rowFilter);
@@ -3452,7 +4861,7 @@ class NxeDataGridComponent {
                 chain.push({ field: col.dataField(), dir: this.groupDir(col) });
             }
         }
-        const user = this.effectiveSort();
+        const user = this.remote() ? null : this.effectiveSort(); // a remote source arrives sorted
         if (user && !chain.some((s) => s.field === user.field)) {
             chain.push(user);
         }
@@ -3470,23 +4879,338 @@ class NxeDataGridComponent {
         });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayRows" }] : /* istanbul ignore next */ []));
-    loading = computed(() => this.dataSource() == null && this.loadPanel()?.enabled !== false, /* @ts-ignore */
+    loading = computed(() => (this.dataSource() == null || this.remote()?.loading() === true) &&
+        this.loadPanel()?.enabled !== false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** A remote request is in flight over rows already on screen: the overlay, not the empty-body spinner. */
+    remoteBusy = computed(() => !!this.remote() && this.loading() && !this.isEmpty(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "remoteBusy" }] : /* istanbul ignore next */ []));
+    remoteFailed = computed(() => this.remote()?.error() != null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "remoteFailed" }] : /* istanbul ignore next */ []));
+    retryRemote() {
+        this.remote()?.reload();
+    }
+    /**
+     * dx `isEmpty()` = `!items().length` (m_data_controller.js:1044-1046), toggled as `dx-empty`
+     * on the rows view in `_renderCore` (m_rows_view.js:710) whether loading or not.
+     *
+     * Keyed on `renderRows` - what the `<tbody>` iterates, dx's `items()` - not `displayRows`. The
+     * two agree for flat and grouped grids (`pagedRows` clamps the page), but a tree list builds
+     * `renderRows` from the unfiltered source while `displayRows` applies the filters, so a tree
+     * whose filter matches nothing still renders rows and must not also show an empty body.
+     */
+    isEmpty = computed(() => this.renderRows().length === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    // --- Free-space row (dx m_rows_view.js updateFreeSpaceRowHeight, :816-861) --------------------
+    /**
+     * What the last reading of this grid's own layout found.
+     *
+     * - `bounded` is dx's `hasHeight`: the rows view is sized by the grid, not by its rows.
+     * - `room` is dx's `elementHeightWithoutScrollbar - contentHeight` (m_rows_view.js:840-842): the
+     *   rows view's inner height less the table as it stands with the free-space row empty and the
+     *   last row keeping its line. Neither the row's height nor the last-row-border state changes
+     *   it, so what it decides cannot change the next reading.
+     * - `fill` is dx's `resultHeight` (:844-848): the height that leaves the table 1px short of
+     *   the rows view (`_getHeightCorrection`, 1 in Chrome).
+     * - `rowHeight` is dx's `_rowHeight`, the average rendered row. It sizes the gap that a short
+     *   last page leaves.
+     */
+    freeSpaceMeasure = signal({ bounded: false, room: 0, fill: 0, rowHeight: 0 }, { ...(ngDevMode ? { debugName: "freeSpaceMeasure" } : /* istanbul ignore next */ {}), equal: (a, b) => a.bounded === b.bounded &&
+            Math.abs(a.room - b.room) < 0.01 &&
+            Math.abs(a.fill - b.fill) < 0.01 &&
+            Math.abs(a.rowHeight - b.rowHeight) < 0.01 });
+    /**
+     * dx's three cases, in its order:
+     * - no rows: the row shows at 0px, so the last row keeps no border to lose (:857-860);
+     * - a bounded grid whose rows leave room: the row fills it, less the 1px dx subtracts in
+     *   Chrome (`_getHeightCorrection`), and column lines run to the bottom (:837-855);
+     * - an unbounded grid on a short page of several: the row holds the missing rows' height, so
+     *   the grid keeps its height from page to page (:823-835).
+     *
+     * `visible` drives the last row's border in a bordered grid (`_updateLastRowBorder`, :931-937).
+     */
+    freeSpace = computed(() => {
+        if (this.isEmpty()) {
+            return { height: 0, visible: true };
+        }
+        const m = this.freeSpaceMeasure();
+        if (m.bounded) {
+            return m.room > 0
+                ? { height: Math.max(0, m.fill), visible: true }
+                : { height: 0, visible: false };
+        }
+        const missing = this.effectivePageSize() - this.pagedRows().length;
+        const mode = this.scrolling()?.mode;
+        if (!this.treeMode &&
+            this.pagingEnabled() &&
+            missing > 0 &&
+            this.pageCount() > 1 &&
+            mode !== 'virtual' &&
+            mode !== 'infinite') {
+            return { height: missing * m.rowHeight, visible: true };
+        }
+        return { height: 0, visible: false };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "freeSpace" }] : /* istanbul ignore next */ []));
+    freeSpaceHeight = computed(() => this.freeSpace().height, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "freeSpaceHeight" }] : /* istanbul ignore next */ []));
+    freeSpaceVisible = computed(() => this.freeSpace().visible, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "freeSpaceVisible" }] : /* istanbul ignore next */ []));
+    /**
+     * One reading of the rows view, from the ResizeObserver that watches it and its table.
+     *
+     * dx hides the free-space row and then measures (m_rows_view.js:837-848). This reading cannot
+     * hide it - that would shrink the document and could clamp its scroll position - so it takes
+     * the row's part of the table back out arithmetically, from quantities that do not move with
+     * what the reading decides:
+     *
+     * - The row's box comes out whole: the height it was given, or with none, its halves of the
+     *   collapsed borders above and below it (0.5px under a last row with a 1px frame).
+     * - With no free space shown, a bordered grid's last row gives its line to the box
+     *   (`nxe-last-row-border`, `border-bottom-width:0`), which makes the table a line shorter.
+     *   That line is put back, at the grid's line width, so the answer is the same either way.
+     *
+     * Read naively off the table, either one feeds back: the half-line reads as room, which shows
+     * the row, which gives the line back, which removes the room - a flip every frame - and a
+     * filled row in a rows view that hugs its table reads as its own room, 1px less each time.
+     *
+     * The second case gets its own rule. A rows view that hugs its table while the row adds height
+     * of its own is sized by that row, so it has no room, whatever `height` says: the row lets go
+     * at once. (A bounded grid resized to exactly its table height less the 1px lands here too, and
+     * fills again on the next reading.)
+     *
+     * Whether the grid is bounded (dx `hasHeight`): an explicit `height` other than 'auto' always
+     * is (m_grid_view.js:597-604, `isHeightSpecified`), even a percentage that resolves to auto,
+     * and then has no room while its rows view hugs. Otherwise a rows view that does not hug is
+     * bounded by CSS, and one that hugs while the row holds free space is not, so a grid that
+     * loses its height lets go of the space. When they coincide with no free space held (an exact
+     * fit), the previous answer stands.
+     */
+    measureFreeSpace(rowsView, table) {
+        const tbody = table.tBodies[0];
+        const fsRow = tbody?.lastElementChild;
+        if (!(fsRow instanceof HTMLTableRowElement) ||
+            !fsRow.classList.contains('nxe-freespace-row') ||
+            this.isEmpty()) {
+            return;
+        }
+        const prev = this.freeSpaceMeasure();
+        const last = fsRow.previousElementSibling;
+        // The collapsed borders above and below the row: the last row's line, and the total
+        // footer's top line when there is one (the table's own edge otherwise, which has none).
+        const above = Math.max(nxeRowEdge(last, 'bottom'), nxeRowEdge(fsRow, 'top'));
+        const below = Math.max(nxeRowEdge(fsRow, 'bottom'), nxeRowEdge(table.tFoot?.rows[0], 'top'));
+        // The last row's line as it is with free space shown. The last-row-border rule strips it
+        // to 0 only on a data row; it is drawn at the grid's line width.
+        let line = above;
+        if (rowsView.classList.contains('nxe-last-row-border') && last?.classList.contains('nxe-data-row')) {
+            const token = parseFloat(getComputedStyle(rowsView).getPropertyValue('--nxe-ui-grid-line-width'));
+            line = Number.isFinite(token) ? token : 1;
+        }
+        const fsHeight = fsRow.getBoundingClientRect().height;
+        // The row adds height of its own, beyond its halves of the borders around it.
+        const holding = fsHeight > (above + below) / 2 + 0.01;
+        const tableHeight = table.getBoundingClientRect().height;
+        // Everything but the free-space row, the last row keeping its line: dx's `rowsHeight`.
+        const rowsHeight = tableHeight - fsHeight - above / 2 + line / 2;
+        // And with the row empty: dx's `contentHeight`.
+        const contentHeight = rowsHeight + (line + below) / 2;
+        // Less borders and a horizontal scrollbar: dx's `elementHeightWithoutScrollbar`.
+        const inner = rowsView.getBoundingClientRect().height - (rowsView.offsetHeight - rowsView.clientHeight);
+        const h = this.heightStyle();
+        const hugging = Math.abs(inner - tableHeight) < 0.5;
+        const bounded = (h !== null && h !== 'auto') || (hugging ? prev.bounded && !holding : true);
+        const rows = tbody.rows.length - 1;
+        this.freeSpaceMeasure.set({
+            bounded,
+            room: hugging && holding ? 0 : inner - contentHeight,
+            fill: inner - rowsHeight - 1,
+            rowHeight: rows > 0 ? (tbody.getBoundingClientRect().height - fsHeight) / rows : prev.rowHeight,
+        });
+    }
+    /**
+     * dx `updateColumnDataTypes` (m_columns_controller.js:914-977): a column with no declared
+     * `dataType` takes the type of its values, and mixed values make it 'string'.
+     *
+     * A lookup column is typed by its DISPLAY values - dx's `lookup.dataType`, which is what dx
+     * aligns, formats and edits a lookup by (:901) - and a value with no lookup match contributes
+     * nothing: dx's `lookup.calculateCellValue` returns `valueMap[value]`, undefined for a missing
+     * key, so `getValueDataType` skips it (:946). A not-yet-loaded list must not type the column.
+     *
+     * Once inferred, a type sticks. dx infers only while `dataType` is unset (:935) and stops once
+     * every column is typed (:289), so a later load of mixed values cannot flip a column; the
+     * previous value of this linkedSignal carries that. The refresh tick is in the source because
+     * rows mutated in place (inline editing, `refresh()`) can type a column that was all blanks.
+     *
+     * dx samples the loaded page (or the first group's leaves); this scans the client array,
+     * which only differs when the types are mixed beyond that sample.
+     */
+    inferredTypes = linkedSignal({ ...(ngDevMode ? { debugName: "inferredTypes" } : /* istanbul ignore next */ {}), source: () => {
+            this.refreshTick();
+            return { rows: this.sourceRows(), cols: this.columns() };
+        },
+        computation: ({ rows, cols }, previous) => {
+            const out = new Map();
+            for (const col of cols) {
+                const kept = previous?.value.get(col);
+                // A rebound dataField is a different column as far as its values are concerned.
+                if (kept && kept.field === col.dataField()) {
+                    out.set(col, kept);
+                }
+            }
+            if (!rows.length) {
+                return out;
+            }
+            for (const col of cols) {
+                const field = col.dataField();
+                if (out.has(col) || col.dataType() || !field) {
+                    continue;
+                }
+                const display = this.lookupDisplayMap(col);
+                let type;
+                for (const row of rows) {
+                    let value = this.getRaw(row, field);
+                    if (display) {
+                        if (!display.has(value)) {
+                            continue;
+                        }
+                        value = display.get(value);
+                    }
+                    const valueType = nxeValueDataType(value);
+                    type = type ?? valueType;
+                    if (type && valueType && type !== valueType) {
+                        type = 'string';
+                        break;
+                    }
+                }
+                if (type) {
+                    out.set(col, { field, type });
+                }
+            }
+            return out;
+        } });
+    /** A lookup's value → raw display value, first match winning as in `lookupText`; null without one. */
+    lookupDisplayMap(col) {
+        const lookup = col.lookup();
+        if (!lookup) {
+            return null;
+        }
+        const valueExpr = lookup.valueExpr ?? 'lovCode';
+        const displayExpr = lookup.displayExpr ?? 'lovName';
+        const map = new Map();
+        for (const item of lookup.dataSource ?? []) {
+            const key = nxeResolveExpr(valueExpr, item);
+            if (!map.has(key)) {
+                map.set(key, nxeResolveExpr(displayExpr, item));
+            }
+        }
+        return map;
+    }
+    /**
+     * The column's effective type - its declared `dataType`, else the inferred one - which is what
+     * dx's `column.dataType` holds after inference. Every type-driven decision reads this, never
+     * `col.dataType()` directly, or an undeclared column would behave as text in one place and
+     * as a number in the next.
+     */
+    colType(col) {
+        return col.dataType() ?? this.inferredTypes().get(col)?.type;
+    }
     /** The active sort: an explicit user click, else the first column declaring `sortOrder`. */
     effectiveSort() {
+        const bound = this.sortModel();
+        if (bound !== undefined) {
+            const first = bound[0];
+            return first ? { field: first.selector, dir: first.desc ? 'desc' : 'asc' } : null;
+        }
         if (this.sortInit()) {
             return this.sort();
         }
         const sorted = this.columns().find((c) => c.sortOrder());
-        return sorted ? { field: sorted.dataField(), dir: sorted.sortOrder() } : null;
+        if (sorted) {
+            return { field: sorted.dataField(), dir: sorted.sortOrder() };
+        }
+        const remote = this.remote();
+        const initial = remote ? untracked(() => remote.options().sort[0]) : undefined;
+        return initial ? { field: initial.selector, dir: initial.desc ? 'desc' : 'asc' } : null;
+    }
+    /** A user sort change: the grid's own state, and the controlled `sort` when it is in play. */
+    setSort(next) {
+        this.sortInit.set(true);
+        this.sort.set(next);
+        if (this.sortModel() !== undefined || this.remote()) {
+            this.sortModel.set(next ? [{ selector: next.field, desc: next.dir === 'desc' }] : []);
+        }
     }
     // --- Rendering helpers -----------------------------------------------------------------------
+    /**
+     * dx `getAlignmentByDataType` (m_columns_controller_utils.js) over the effective type:
+     * number right, boolean centre, everything else left. A lookup aligns by its display text
+     * (dx `lookup.dataType`, :901), which is text - so left, even over numeric codes.
+     */
+    /**
+     * Columns whose cellTemplate draws a check box (nxe-check-box, mat-checkbox, a native
+     * checkbox input or anything with role=checkbox). align() centres them like a boolean column,
+     * header and cells, unless the column asks for center or right. dx centres only by dataType,
+     * so a template check box over non-boolean data (or no dataField) would sit at the left there;
+     * a check box reads as a boolean whatever feeds it, so here it is centred too.
+     *
+     * Sticky, as an inferred type is: a column that drew a check box keeps its alignment when a
+     * filter or an empty page leaves no row to look at. A column that goes away drops out.
+     */
+    templateCheckboxColumns = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateCheckboxColumns" }] : /* istanbul ignore next */ []));
+    detectTemplateCheckboxColumns() {
+        const cols = this.visibleColumns();
+        const current = this.templateCheckboxColumns();
+        let next = null;
+        for (const col of current) {
+            if (!cols.includes(col)) {
+                (next ??= new Set(current)).delete(col);
+            }
+        }
+        const candidates = cols.filter((c) => !!c.cellTemplate() && !current.has(c));
+        if (candidates.length) {
+            const host = this.elementRef.nativeElement;
+            // This grid's own table and rows: a nested master-detail grid's come later, and its
+            // rows live in a master-detail row, never in one of these data rows' cells' place.
+            const table = host.querySelector('.nxe-datagrid-content > .nxe-datagrid-table');
+            // A few rows are enough to know what a template draws, and keep this cheap on long pages.
+            const rows = table
+                ? Array.from(table.querySelectorAll(':scope > tbody > tr.nxe-data-row')).slice(0, 20)
+                : [];
+            const lead = this.leadCellCount();
+            for (const col of candidates) {
+                const index = lead + cols.indexOf(col) + 1;
+                const drawsCheckbox = rows.some((tr) => tr.querySelector(`:scope > td[aria-colindex="${index}"] :is(nxe-check-box, mat-checkbox, input[type="checkbox"], [role="checkbox"])`));
+                if (drawsCheckbox) {
+                    (next ??= new Set(current)).add(col);
+                }
+            }
+        }
+        if (next) {
+            this.templateCheckboxColumns.set(next);
+        }
+    }
+    /** Boolean data (declared or inferred) or a cellTemplate seen drawing a check box. */
+    isCheckboxColumn(col) {
+        return (this.colType(col) === 'boolean' && !col.lookup()) || this.templateCheckboxColumns().has(col);
+    }
     align(col) {
         const a = col.alignment();
+        // A check box column - boolean data, or a cellTemplate that draws a check box - is centred,
+        // header and cells, unless it asks for center or right. 'left' counts as the default here:
+        // apps bind alignment="left" onto every column that has none of its own (Bright's generic
+        // list does), and that must not pin a check box to the left.
+        if (a !== 'center' && a !== 'right' && this.isCheckboxColumn(col)) {
+            return 'center';
+        }
         if (a) {
             return a;
         }
-        switch (col.dataType()) {
+        if (col.lookup()) {
+            return 'left';
+        }
+        switch (this.colType(col)) {
             case 'number':
                 return 'right';
             case 'boolean':
@@ -3495,6 +5219,14 @@ class NxeDataGridComponent {
                 return 'left';
         }
     }
+    /**
+     * The filter cell's text-align: dx sets the filter editor's input to the column alignment
+     * unless it is centre (m_filter_row.js:390-395).
+     */
+    filterCellAlign(col) {
+        const a = this.align(col);
+        return a === 'center' ? null : a;
+    }
     colWidth(col) {
         const manual = this.widthOverride().get(col.dataField());
         if (manual != null) {
@@ -3515,15 +5247,16 @@ class NxeDataGridComponent {
         }
         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;
+    /**
+     * dx `showEditorAlways` (m_columns_controller.js:912): a boolean-typed column - declared or
+     * inferred - renders a checkbox, unless it is a lookup or has its own cellTemplate. Decided
+     * per column, not per value: a column whose values are mixed infers 'string' and shows text,
+     * as in dx.
+     */
+    isBooleanCell(col) {
+        return this.colType(col) === 'boolean' && !col.lookup() && !col.cellTemplate();
     }
+    /** Resolve the displayed cell text: lookup > customizeText > dataType/format > raw string. */
     cellText(col, row) {
         const raw = this.getRaw(row, col.dataField());
         const valueText = this.lookupText(col, raw) ?? this.defaultFormat(col, raw);
@@ -3538,11 +5271,12 @@ class NxeDataGridComponent {
         }
         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);
+        const match = (lookup.dataSource ?? []).find((item) => nxeResolveExpr(valueExpr, item) === raw);
+        return match ? nxeResolveText(displayExpr, match) || String(raw) : String(raw);
     }
     defaultFormat(col, raw) {
-        return nxeDefaultFormat(col.dataType(), col.format(), raw);
+        // The locale is read here so a language switch re-renders date cells (month names).
+        return nxeDefaultFormat(this.colType(col), col.format(), raw, this.separators, this.messages.locale());
     }
     templateFor(name) {
         if (!name) {
@@ -3582,7 +5316,7 @@ class NxeDataGridComponent {
                 column: {
                     dataField: col.dataField(),
                     caption: col.caption(),
-                    dataType: col.dataType(),
+                    dataType: this.colType(col),
                     format: col.format(),
                 },
                 // dx's setValue changes the cell value; it does not end the edit. The editor
@@ -3631,7 +5365,7 @@ class NxeDataGridComponent {
             return;
         }
         const host = this.elementRef.nativeElement;
-        const table = host.querySelector('.dx-datagrid-content > .dx-datagrid-table');
+        const table = host.querySelector('.nxe-datagrid-content > .nxe-datagrid-table');
         if (!table) {
             return;
         }
@@ -3689,18 +5423,30 @@ class NxeDataGridComponent {
                 if (!this.onCellPrepared.observed) {
                     continue;
                 }
-                let colSeen = 0;
+                const lead = this.leadCellCount();
                 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++;
-                    }
+                    // Read the column off `aria-colindex` rather than counting cells.
+                    //
+                    // Counting was wrong in four separate ways, all silent, and every one of them
+                    // the shape this event exists to serve. A data row's grouping indent cells
+                    // carry only `nxe-datagrid-group-space`, which no class test here listed, so
+                    // in a grouped grid every cell reported the column one place to its left per
+                    // group level and the last column was never reported at all. `mergeColumns`
+                    // deletes the covered `<td>`s, so a continuation row is short and shifts the
+                    // other way. A band adds a header row whose cells are not leaves. And the
+                    // counter restarted per `<tr>`, so a banded header row numbered from zero.
+                    //
+                    // `aria-colindex` numbers every data cell, leaf header cell, filter cell and
+                    // summary cell, and already includes the lead command columns, so it survives
+                    // all four. Command cells carry it too, as dx's do, but their numbers fall
+                    // outside the data columns' range (at or below the lead count, or past the last
+                    // column). Those, the cells without one (a band) and the group caption - dx
+                    // numbers it as the cell after its toggle, which can be a data column's number
+                    // - are not columns and are reported with `column: null` and index -1.
+                    const colAttr = td.classList.contains('nxe-group-cell') ? null : td.getAttribute('aria-colindex');
+                    const at = colAttr ? Number(colAttr) - 1 - lead : -1;
+                    const col = at >= 0 ? cols[at] : undefined;
+                    const columnIndex = col ? at : -1;
                     const value = col && rowType === 'data' && info.data
                         ? this.getRaw(info.data, col.dataField())
                         : undefined;
@@ -3716,7 +5462,7 @@ class NxeDataGridComponent {
                             ? {
                                 dataField: col.dataField(),
                                 caption: col.caption(),
-                                dataType: col.dataType(),
+                                dataType: this.colType(col),
                                 index: columnIndex,
                             }
                             : null,
@@ -3733,6 +5479,176 @@ class NxeDataGridComponent {
             this.preparedDepth--;
         }
     }
+    // --- Keyboard navigation (WAI-ARIA grid pattern) ---------------------------------------------
+    /**
+     * The single cell holding the grid's tab stop.
+     *
+     * A grid is one stop in the tab order, not one per cell — a 200-row table would otherwise be
+     * 1,400 tab presses to get past. Row `-1` is the header, so ArrowUp from the first data row
+     * reaches the column headers rather than stopping dead.
+     */
+    focusedCell = signal({ row: -1, col: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedCell" }] : /* istanbul ignore next */ []));
+    /**
+     * The rows the keyboard and `aria-rowindex` address: the data rows actually RENDERED.
+     *
+     * Emphatically not `pagedRows()`. That is the page's data BEFORE grouping and tree collapse
+     * take rows out of the DOM, while `renderRows` renumbers densely over what it emits - so with
+     * one group collapsed `pagedRows()` counts three rows where two have a cell to focus. Every
+     * consumer of the count is then wrong in a different way: `aria-rowcount` claims a row a
+     * reader cannot reach, Ctrl+End targets an index with no DOM behind it and movement silently
+     * does nothing, and Enter and Space read `pagedRows()[row]` - which is a DIFFERENT row than
+     * the one under the cursor, so Space selects something the user is not looking at.
+     */
+    navigableRows = computed(() => this.renderRows()
+        .filter((r) => r.kind === 'data')
+        .map((r) => r.row), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navigableRows" }] : /* istanbul ignore next */ []));
+    isCellTabStop(row, col) {
+        const cell = this.focusedCell();
+        return cell.row === row && cell.col === col;
+    }
+    focusCell(row, col) {
+        this.focusedCell.set({ row, col });
+    }
+    /** dx marks the sorted column for assistive tech as well as with the arrow glyph. */
+    ariaSort(col) {
+        if (!col.allowSorting()) {
+            return null;
+        }
+        const dir = this.sortDir(col);
+        return dir === 'asc' ? 'ascending' : dir === 'desc' ? 'descending' : null;
+    }
+    /**
+     * The DOM cell at a logical position, addressed by `aria-colindex` rather than by offset.
+     *
+     * Offsets break twice over. A band cell carries `role="columnheader"` too, so counting
+     * header cells finds bands as well as leaves; and `mergeColumns` deletes the covered `<td>`s,
+     * so a data row can be short. `aria-colindex` is emitted on every cell and already includes
+     * the lead command columns, so it names the position exactly rather than by counting.
+     *
+     * Both lookups stay inside this grid's own table: a master-detail grid renders a whole second
+     * grid into a `<td>`, and its rows would otherwise answer to the outer grid's arrow keys.
+     */
+    cellAt(row, col) {
+        const host = this.elementRef.nativeElement;
+        const colIndex = this.leadCellCount() + col + 1;
+        if (row < 0) {
+            return nxeHeaderLeafCells(host)[col] ?? null;
+        }
+        const tbody = host.querySelector('.nxe-datagrid-content > .nxe-datagrid-table > tbody');
+        return (tbody?.querySelector(`:scope > .nxe-data-row[aria-rowindex="${row + 1}"] > [aria-colindex="${colIndex}"]`) ?? null);
+    }
+    /** Move the tab stop and put real DOM focus on the cell that now holds it. */
+    moveFocus(row, col) {
+        const maxRow = this.navigableRows().length - 1;
+        const maxCol = this.visibleColumns().length - 1;
+        const targetRow = Math.max(-1, Math.min(row, maxRow));
+        const nextCol = Math.max(0, Math.min(col, maxCol));
+        // A merged cell's rowspan removes the `<td>`s beneath it, so a position can have no cell
+        // of its own. Keep going the way we were headed until one does — landing on the covering
+        // cell instead would make ArrowDown into a merged block a dead end.
+        const step = targetRow > this.focusedCell().row ? 1 : -1;
+        let probe = targetRow;
+        let cell = this.cellAt(probe, nextCol);
+        while (!cell && probe + step >= -1 && probe + step <= maxRow) {
+            probe += step;
+            cell = this.cellAt(probe, nextCol);
+        }
+        if (!cell) {
+            return;
+        }
+        this.focusedCell.set({ row: probe, col: nextCol });
+        cell.focus();
+    }
+    /**
+     * Arrow-key movement over cells.
+     *
+     * Deliberately not bound to the rowsview: a projected editor inside a cell needs its own
+     * arrow keys, so anything originating inside an editor is left alone.
+     */
+    onGridKeydown(event) {
+        const target = event.target;
+        if (target &&
+            target.closest('input, textarea, select, [contenteditable="true"], .nxe-grid-cell-editor-check')) {
+            return;
+        }
+        const { row, col } = this.focusedCell();
+        const rows = this.navigableRows();
+        const lastRow = rows.length - 1;
+        const lastCol = this.visibleColumns().length - 1;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                this.moveFocus(row, col + 1);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.moveFocus(row, col - 1);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.moveFocus(row + 1, col);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.moveFocus(row - 1, col);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.moveFocus(event.ctrlKey ? -1 : row, 0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.moveFocus(event.ctrlKey ? lastRow : row, lastCol);
+                break;
+            case 'PageDown':
+                event.preventDefault();
+                this.pagingEnabled() ? this.nextPage() : this.moveFocus(lastRow, col);
+                break;
+            case 'PageUp':
+                event.preventDefault();
+                this.pagingEnabled() ? this.prevPage() : this.moveFocus(-1, col);
+                break;
+            case 'Enter':
+            case 'F2': {
+                if (row < 0) {
+                    // On a header, Enter sorts — the same thing a click does.
+                    event.preventDefault();
+                    const col0 = this.visibleColumns()[col];
+                    if (col0) {
+                        this.onHeaderClick(col0);
+                    }
+                    break;
+                }
+                const rowData = rows[row];
+                const column = this.visibleColumns()[col];
+                if (rowData && column && this.cellEditingEnabled() && this.editableCell(column)) {
+                    event.preventDefault();
+                    if (this.booleanInPlace(column)) {
+                        // The checkbox is already the editor, and it takes no focus of its own:
+                        // Enter does what a click on it does.
+                        this.commitCellEdit(rowData, column, this.getRaw(rowData, column.dataField()) !== true);
+                        break;
+                    }
+                    this.editingCell.set({ row: rowData, field: column.dataField() });
+                }
+                break;
+            }
+            case ' ': {
+                if (row < 0 || this.selectionMode() === 'none') {
+                    break;
+                }
+                event.preventDefault();
+                const rowData = rows[row];
+                if (rowData) {
+                    this.toggleRow(rowData);
+                }
+                break;
+            }
+            default:
+        }
+    }
     // --- Interaction -----------------------------------------------------------------------------
     /** True when this header can start a drag gesture (to the group panel and/or a reorder). */
     headerDraggable(col) {
@@ -3753,9 +5669,12 @@ class NxeDataGridComponent {
     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. */
+    /**
+     * Chip click (dx): toggle the grouped column's sort — unless this click ends a drag. dx sends
+     * it through the same changeSortOrder as a header click (m_sorting.js:134), so the same gate.
+     */
     onChipClick(col) {
-        if (this.drag.consumeClick()) {
+        if (this.drag.consumeClick() || !this.clickSorts(col)) {
             return;
         }
         this.sortGroupColumn(col);
@@ -3764,29 +5683,66 @@ class NxeDataGridComponent {
         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') {
+        if (!this.clickSorts(col)) {
             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' });
+            this.setSort({ field, dir: 'asc' });
         }
         else if (current.dir === 'asc') {
-            this.sort.set({ field, dir: 'desc' });
+            this.setSort({ field, dir: 'desc' });
         }
         else {
-            this.sort.set(null);
+            this.setSort(null);
         }
     }
     sortDir(col) {
         const s = this.effectiveSort();
         return s && s.field === col.dataField() ? s.dir : null;
     }
+    /**
+     * `sorting.mode` as dx's sorting code reads the option: unbound is dx's default 'single', an
+     * object gives its `mode` (default 'single'), and anything else - `[sorting]="false"` or
+     * `null` - has no mode at all.
+     */
+    sortingMode() {
+        const s = this.sorting();
+        if (s === undefined) {
+            return 'single';
+        }
+        return s ? (s.mode ?? 'single') : undefined;
+    }
+    /**
+     * dx changeSortOrder (m_columns_controller.js:758-766) acts only in mode 'single' or
+     * 'multiple', and only on a column that allows sorting. `[sorting]="false"` still renders the
+     * sort slot, but a header or chip click never sorts.
+     */
+    clickSorts(col) {
+        const mode = this.sortingMode();
+        return col.allowSorting() && (mode === 'single' || mode === 'multiple');
+    }
+    /**
+     * dx `isSortingAllowed` (m_sorting_mixin.js:37): a sortable column, unless the mode is
+     * literally 'none'. A column with no dataField is never sortable (m_columns_controller.js:
+     * 1383-1388). Gates the `nxe-datagrid-action` class, and the sort slot of an unsorted column.
+     */
+    sortAllowed(col) {
+        const s = this.sorting();
+        return col.allowSorting() && !!col.dataField() && (s ? s.mode : undefined) !== 'none';
+    }
+    /**
+     * Whether the header renders dx's sort span: always for the sorted column, and as an empty
+     * `nxe-sort-none` placeholder for any other sortable one (m_sorting_mixin.js:38-46). The
+     * placeholder is display:none in the fixed table and 14px wide in the best-fit pass.
+     */
+    sortSlot(col) {
+        return this.sortDir(col) !== null || this.sortAllowed(col);
+    }
     onRowEnter(index) {
         if (this.hoverStateEnabled()) {
             this.hoveredIndex.set(index);
@@ -3799,6 +5755,12 @@ class NxeDataGridComponent {
         return this.hoveredIndex() === index;
     }
     isSelected(row) {
+        if (this.remote()) {
+            return this.selectedKeySet().has(this.rowKey(row));
+        }
+        if (this.recursiveTreeSelection()) {
+            return this.treeCheckState().get(this.rowKey(row)) === 'all';
+        }
         return this.treeMode
             ? this.selectedRowKeys().includes(this.rowKey(row))
             : this.selectedSet().has(row);
@@ -3821,6 +5783,10 @@ class NxeDataGridComponent {
         this.toggleRow(row);
     }
     toggleRow(row) {
+        if (this.remote()) {
+            this.toggleRemoteSelection(row);
+            return;
+        }
         if (this.treeMode) {
             this.toggleTreeSelection(row);
             return;
@@ -3847,8 +5813,12 @@ class NxeDataGridComponent {
     }
     toggleSelectAll(event) {
         event.stopPropagation();
+        if (this.remote()) {
+            this.toggleRemoteSelectAll();
+            return;
+        }
         if (this.treeMode) {
-            const allKeys = (this.dataSource() ?? []).map((r) => this.rowKey(r));
+            const allKeys = this.sourceRows().map((r) => this.rowKey(r));
             if (this.allSelected()) {
                 this.selectedRowKeys.set([]);
                 this.emitTreeSelectionChanged([], [], allKeys);
@@ -3869,6 +5839,39 @@ class NxeDataGridComponent {
             this.emitSelectionChanged(rows, []);
         }
     }
+    /**
+     * `clearSelection()` (`scope` null: every selected row) and `deselectAll()` (`scope`: the rows
+     * on show). One `onSelectionChanged` with the dropped keys as deselected, none when nothing
+     * was selected.
+     */
+    deselectRows(scope) {
+        if (this.remote() || this.treeMode) {
+            const previous = this.selectedRowKeys();
+            const drop = scope ? new Set(scope.map((r) => this.rowKey(r))) : null;
+            const removed = drop ? previous.filter((k) => drop.has(k)) : previous;
+            if (!removed.length) {
+                return;
+            }
+            const next = drop ? previous.filter((k) => !drop.has(k)) : [];
+            this.selectedRowKeys.set(next);
+            if (this.remote()) {
+                this.emitRemoteSelectionChanged(next, [], removed);
+            }
+            else {
+                this.emitTreeSelectionChanged(next, [], removed);
+            }
+            return;
+        }
+        const previous = this.selectedSet();
+        const removed = scope ? scope.filter((r) => previous.has(r)) : [...previous];
+        if (!removed.length) {
+            return;
+        }
+        const next = new Set(previous);
+        removed.forEach((r) => next.delete(r));
+        this.selectedSet.set(next);
+        this.emitSelectionChanged([], removed);
+    }
     emitSelectionChanged(currentSelected, currentDeselected) {
         const data = this.selectedRowsData();
         this.onSelectionChanged.emit({
@@ -3881,26 +5884,26 @@ class NxeDataGridComponent {
         });
     }
     rowKeys(rows) {
-        const key = this.keyExpr();
+        const key = this.keyField();
         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' },
+        { op: 'contains', label: 'grid.op.contains' },
+        { op: 'notcontains', label: 'grid.op.notContains' },
+        { op: 'startswith', label: 'grid.op.startsWith' },
+        { op: 'endswith', label: 'grid.op.endsWith' },
+        { op: '=', label: 'grid.op.equals' },
+        { op: '<>', label: 'grid.op.notEquals' },
     ];
     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' },
+        { op: '=', label: 'grid.op.equals' },
+        { op: '<>', label: 'grid.op.notEquals' },
+        { op: '<', label: 'grid.op.lessThan' },
+        { op: '>', label: 'grid.op.greaterThan' },
+        { op: '<=', label: 'grid.op.lessThanOrEqual' },
+        { op: '>=', label: 'grid.op.greaterThanOrEqual' },
+        { op: 'between', label: 'grid.op.between' },
     ];
     static OP_ICON_SLUGS = {
         contains: 'contains',
@@ -3925,7 +5928,7 @@ class NxeDataGridComponent {
         if (col.lookup()) {
             return 'lookup';
         }
-        const type = col.dataType();
+        const type = this.colType(col);
         return type === 'boolean' || type === 'date' || type === 'number' ? type : 'text';
     }
     /** dx shows the operation-chooser magnifier only for typed (non-select) editors. */
@@ -3945,13 +5948,20 @@ class NxeDataGridComponent {
     frText2(col) {
         return this.filterRowState().get(col.dataField())?.text2 ?? '';
     }
-    frOpIconClass(col) {
-        return `dx-icon-filter-operation-${NxeDataGridComponent.OP_ICON_SLUGS[this.frOp(col)]}`;
+    /**
+     * The chooser glyph: dx's magnifier ('default') until an operation is picked from the menu,
+     * then that operation's own. Only the slug varies - the template emits `nxe-icon-filter-operation-*`
+     * and nothing prefixed `dx-`, which the compat mirror would strip for want of an nxe twin.
+     */
+    frOpIconSlug(col) {
+        const entry = this.filterRowState().get(col.dataField());
+        return entry?.chosen ? NxeDataGridComponent.OP_ICON_SLUGS[entry.op] : 'default';
     }
     opIconSlug(op) {
         return NxeDataGridComponent.OP_ICON_SLUGS[op];
     }
     setFilterRowText(col, text, second = false) {
+        this.remoteTyping = true;
         const field = col.dataField();
         const next = new Map(this.filterRowState());
         const prev = next.get(field) ?? { op: this.frDefaultOp(col), text: '' };
@@ -3987,9 +5997,7 @@ class NxeDataGridComponent {
         if (!col) {
             return [];
         }
-        return this.frEditorKind(col) === 'text'
-            ? NxeDataGridComponent.STRING_OPS
-            : NxeDataGridComponent.SCALAR_OPS;
+        return (this.frEditorKind(col) === 'text' ? NxeDataGridComponent.STRING_OPS : NxeDataGridComponent.SCALAR_OPS).map(({ op, label }) => ({ op, label: this.messages.t(label) }));
     }
     selectFilterOp(op) {
         const col = this.frMenuColumn();
@@ -3997,7 +6005,12 @@ class NxeDataGridComponent {
             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 } : {}) });
+            next.set(field, {
+                ...prev,
+                op,
+                chosen: true,
+                ...(op !== 'between' ? { text2: undefined } : {}),
+            });
             this.filterRowState.set(next);
         }
         this.closeFilterOpMenu();
@@ -4033,11 +6046,11 @@ class NxeDataGridComponent {
      * 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');
+        return nxeHfKey(raw, this.colType(col) === 'date');
     }
     /** dx does NOT cascade header-filter lists for client arrays (bright audit V6). */
     hfBaseRows() {
-        return (this.dataSource() ?? []);
+        return this.sourceRows();
     }
     hfBoolLabel(col, raw) {
         if (col.lookup()) {
@@ -4046,7 +6059,7 @@ class NxeDataGridComponent {
         if (raw === true) {
             return 'Yes';
         }
-        if (raw === false || col.dataType() === 'boolean') {
+        if (raw === false || this.colType(col) === 'boolean') {
             return 'No';
         }
         return null;
@@ -4122,14 +6135,15 @@ class NxeDataGridComponent {
         this.hfOverlayRef?.dispose();
         this.frMenuOverlayRef?.dispose();
         this.resizeObserver?.disconnect();
+        this.wrapped?.cancel();
     }
     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 });
+    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 }, resizeFillsGridInput: { classPropertyName: "resizeFillsGridInput", publicName: "resizeFillsGrid", isSignal: true, isRequired: false, transformFunction: null }, remoteOperations: { classPropertyName: "remoteOperations", publicName: "remoteOperations", isSignal: true, isRequired: false, transformFunction: null }, pageIndexModel: { classPropertyName: "pageIndexModel", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSizeModel: { classPropertyName: "pageSizeModel", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, sortModel: { classPropertyName: "sortModel", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", 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 }, height: { classPropertyName: "height", publicName: "height", 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: { pageIndexModel: "pageIndexChange", pageSizeModel: "pageSizeChange", sortModel: "sortChange", optionsChange: "optionsChange", 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\r\n    class=\"nxe-widget nxe-datagrid\"\r\n    [class.nxe-datagrid-borders]=\"showBorders()\"\r\n    [style.height]=\"heightStyle()\">\r\n    <div class=\"nxe-gridbase-container\">\r\n        @if (groupPanelVisible()) {\r\n            <div class=\"nxe-datagrid-header-panel\">\r\n                <div class=\"nxe-datagrid-group-panel\">\r\n                    @if (groupColumns().length === 0) {\r\n                        <span class=\"nxe-group-panel-message\">{{ t('grid.groupPanel') }}</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=\"nxe-group-panel-item nxe-datagrid-action nxe-datagrid-drag-action\"\r\n                                tabindex=\"0\"\r\n                                (pointerdown)=\"onChipPointerDown(col, li, $event)\"\r\n                                (click)=\"onChipClick(col)\">{{ col.caption() }}<div class=\"nxe-column-indicators\" role=\"presentation\"><span\r\n                                        class=\"nxe-sort\"\r\n                                        [class.nxe-sort-up]=\"groupDir(col) === 'asc'\"\r\n                                        [class.nxe-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        <!-- dx drops the last row's bottom line in a bordered grid when no free-space row follows\r\n             it, so the rows view's own border is the only line there (m_rows_view.js:931-937). -->\r\n        <div\r\n            class=\"nxe-datagrid-rowsview nxe-datagrid-after-headers\"\r\n            [class.nxe-datagrid-nowrap]=\"!wordWrapEnabled()\"\r\n            [class.nxe-empty]=\"isEmpty()\"\r\n            [class.nxe-remote-busy]=\"remoteBusy()\"\r\n            [class.nxe-last-row-border]=\"showBorders() && !freeSpaceVisible()\">\r\n            <div class=\"nxe-datagrid-content\">\r\n                <!-- role=grid (treegrid when hierarchical) rather than the implicit table role:\r\n                     this is an interactive widget with a single tab stop and arrow-key movement,\r\n                     not a static table.\r\n\r\n                     aria-rowcount counts the PAGE, because aria-rowindex is page-relative and the\r\n                     two have to agree. Making the index absolute would be more literally correct\r\n                     for a paged grid, but consuming code addresses cells through it\r\n                     (`tr[aria-rowindex=N] > td[aria-colindex=M]`), so the index is a contract. -->\r\n                <table\r\n                    class=\"nxe-datagrid-table nxe-datagrid-table-fixed\"\r\n                    [attr.role]=\"treeMode ? 'treegrid' : 'grid'\"\r\n                    [attr.aria-rowcount]=\"navigableRows().length\"\r\n                    [attr.aria-busy]=\"remoteBusy() ? 'true' : null\"\r\n                    [attr.aria-colcount]=\"visibleColumns().length + leadCellCount() + (rowEditCommandVisible() ? 1 : 0)\"\r\n                    [style.width]=\"tableWidthStyle()\"\r\n                    (keydown)=\"onGridKeydown($event)\">\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 (selectColumnVisible()) {\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=\"nxe-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\r\n                                class=\"nxe-row nxe-header-row\"\r\n                                role=\"row\"\r\n                                [class.nxe-column-lines]=\"showColumnLines()\">\r\n                                @if (hi === 0) {\r\n                                    <!-- dx numbers the header's command cells like the body's\r\n                                         (m_columns_view.js:681-693); they are not role=columnheader\r\n                                         (m_column_headers.js:193), which keeps them out of the leaf\r\n                                         header list (nxeHeaderLeafCells). -->\r\n                                    @for (i of indents(groupLevelCount()); track i) {\r\n                                        <td\r\n                                            class=\"nxe-command-expand nxe-datagrid-group-space nxe-cell-focus-disabled\"\r\n                                            [attr.aria-colindex]=\"i + 1\"\r\n                                            [attr.rowspan]=\"headerDepth() > 1 ? headerDepth() : null\"></td>\r\n                                    }\r\n                                    @if (masterDetailEnabled()) {\r\n                                        <!-- dx gives every cell of an 'expand' command column the\r\n                                             group-space class (m_columns_view.js:290-293), which drops\r\n                                             the column line between it and the next cell. -->\r\n                                        <td\r\n                                            class=\"nxe-command-expand nxe-datagrid-group-space\"\r\n                                            [attr.aria-colindex]=\"expandColIndex()\"\r\n                                            [attr.rowspan]=\"headerDepth() > 1 ? headerDepth() : null\"></td>\r\n                                    }\r\n                                    @if (selectColumnVisible()) {\r\n                                        <td\r\n                                            class=\"nxe-command-select\"\r\n                                            [attr.aria-colindex]=\"selectColIndex()\"\r\n                                            [attr.rowspan]=\"headerDepth() > 1 ? headerDepth() : null\">\r\n                                            @if (selectionMode() === 'multiple') {\r\n                                                <span\r\n                                                    class=\"nxe-select-checkbox nxe-grid-checkbox nxe-checkbox nxe-datagrid-checkbox-size\"\r\n                                                    role=\"checkbox\"\r\n                                                    [attr.aria-checked]=\"allSelected() ? 'true' : someSelected() ? 'mixed' : 'false'\"\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                                        <!-- dx gives a band the alignment of any column: left unless set\r\n                                             (a band has no dataType to right-align or centre it by). -->\r\n                                        <td\r\n                                            class=\"nxe-band-cell\"\r\n                                            role=\"columnheader\"\r\n                                            [class]=\"cell.column.cssClass()\"\r\n                                            [attr.colspan]=\"cell.colspan > 1 ? cell.colspan : null\"\r\n                                            [style.text-align]=\"align(cell.column)\">\r\n                                            <div class=\"nxe-datagrid-text-content\">{{ cell.column.caption() }}</div>\r\n                                        </td>\r\n                                    } @else {\r\n                                        @let hDir = sortDir(cell.column);\r\n                                        @let hHf = headerFilterVisible(cell.column);\r\n                                        @let hSortSlot = sortSlot(cell.column);\r\n                                        @let hInd = hSortSlot || hHf;\r\n                                        @let hAlign = align(cell.column);\r\n                                        <!-- dx places the indicator block before the caption when column lines are\r\n                                             on or the column is right-aligned (m_column_headers.js createCellContent,\r\n                                             m_column_state_mixin.js _applyColumnState), floated to the cell edge\r\n                                             only with column lines: right, or left for a right-aligned column. -->\r\n                                        @let hLead = hInd && (showColumnLines() || hAlign === 'right');\r\n                                        @let hFloat = showColumnLines() ? (hAlign === 'right' ? 'left' : 'right') : null;\r\n                                        <td\r\n                                            [class]=\"cell.column.cssClass()\"\r\n                                            role=\"columnheader\"\r\n                                            [attr.aria-colindex]=\"leadCellCount() + cell.leafIndex + 1\"\r\n                                            [attr.aria-sort]=\"ariaSort(cell.column)\"\r\n                                            [attr.tabindex]=\"isCellTabStop(-1, cell.leafIndex) ? 0 : -1\"\r\n                                            (focus)=\"focusCell(-1, cell.leafIndex)\"\r\n                                            [attr.rowspan]=\"cell.rowspan > 1 ? cell.rowspan : null\"\r\n                                            [style.text-align]=\"hAlign\"\r\n                                            [class.nxe-cell-focus-disabled]=\"!cell.column.allowSorting()\"\r\n                                            [class.nxe-datagrid-action]=\"sortAllowed(cell.column)\"\r\n                                            [class.nxe-datagrid-drag-action]=\"headerDraggable(cell.column)\"\r\n                                            [class.nxe-tree-select-all]=\"treeSelectAll() && cell.leafIndex === 0\"\r\n                                            (pointerdown)=\"onHeaderPointerDown(cell.column, cell.leafIndex, $event)\"\r\n                                            (click)=\"onHeaderClick(cell.column)\">\r\n                                            @if (treeSelectAll() && cell.leafIndex === 0) {\r\n                                                <!-- dx's tree list puts select-all in the first column's header. -->\r\n                                                <span\r\n                                                    class=\"nxe-select-checkbox nxe-grid-checkbox nxe-checkbox nxe-datagrid-checkbox-size\"\r\n                                                    role=\"checkbox\"\r\n                                                    [attr.aria-label]=\"t('common.selectAll')\"\r\n                                                    [attr.aria-checked]=\"allSelected() ? 'true' : someSelected() ? 'mixed' : 'false'\"\r\n                                                    [class.nxe-checked]=\"allSelected()\"\r\n                                                    [class.nxe-indeterminate]=\"someSelected() && !allSelected()\"\r\n                                                    (pointerdown)=\"$event.stopPropagation()\"\r\n                                                    (click)=\"toggleSelectAll($event)\">\r\n                                                    <span class=\"nxe-grid-checkbox-box\"></span>\r\n                                                </span>\r\n                                            }\r\n                                            @if (hLead) {\r\n                                                <ng-container\r\n                                                    [ngTemplateOutlet]=\"headerIndicators\"\r\n                                                    [ngTemplateOutletContext]=\"{ $implicit: cell.column, dir: hDir, sortSlot: hSortSlot, hf: hHf, hfFirst: hAlign === 'right', float: hFloat }\" />\r\n                                            }\r\n                                            <!-- dx _alignCaptionByCenter: a centred caption gets an unfloated,\r\n                                                 invisible copy of the indicator block on its other side, so the\r\n                                                 caption centres on the cell rather than caption + arrow centring\r\n                                                 as a group. Spacers only: no sort or funnel classes (specs and\r\n                                                 apps pick funnels by index) and no handlers - a click there falls\r\n                                                 through to the cell and sorts, as dx's hidden clone lets it. -->\r\n                                            @if (hInd && hAlign === 'center') {\r\n                                                <div\r\n                                                    class=\"nxe-column-indicators nxe-visibility-hidden\"\r\n                                                    role=\"presentation\"\r\n                                                    aria-hidden=\"true\">\r\n                                                    @if (hSortSlot) {\r\n                                                        <span\r\n                                                            class=\"nxe-column-indicator-spacer\"\r\n                                                            [class.nxe-column-indicator-spacer-none]=\"!hDir\"></span>\r\n                                                    }\r\n                                                    @if (hHf) {\r\n                                                        <span class=\"nxe-column-indicator-spacer\"></span>\r\n                                                    }\r\n                                                </div>\r\n                                            }\r\n                                            <!-- The indicator classes are load-bearing, not decorative: they gate dx's\r\n                                                 caption budget (`.dx-header-row .dx-sort-indicator{max-width:calc(100%\r\n                                                 - 17px)}` and family) and, with the alignment classes, the 3px gap to\r\n                                                 the block. dx sets alignment-left for left and centre columns and\r\n                                                 alignment-right for right and centre ones, whenever the cell has an\r\n                                                 indicator slot at all - even an unsorted, hidden one. -->\r\n                                            <div\r\n                                                class=\"nxe-datagrid-text-content\"\r\n                                                [class.nxe-text-content-alignment-left]=\"hInd && hAlign !== 'right'\"\r\n                                                [class.nxe-text-content-alignment-right]=\"hInd && hAlign !== 'left'\"\r\n                                                [class.nxe-sort-indicator]=\"hDir !== null\"\r\n                                                [class.nxe-header-filter-indicator]=\"hHf\">\r\n                                                {{ cell.column.caption() }}\r\n                                            </div>\r\n                                            @if (hInd && !hLead) {\r\n                                                <ng-container\r\n                                                    [ngTemplateOutlet]=\"headerIndicators\"\r\n                                                    [ngTemplateOutletContext]=\"{ $implicit: cell.column, dir: hDir, sortSlot: hSortSlot, hf: hHf, hfFirst: hAlign === 'right', float: null }\" />\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=\"nxe-command-edit\"\r\n                                        [attr.aria-colindex]=\"editColIndex()\"\r\n                                        [attr.rowspan]=\"headerDepth() > 1 ? headerDepth() : null\"></td>\r\n                                }\r\n                            </tr>\r\n                        }\r\n                        @if (filterRowVisible()) {\r\n                            <!-- The headers view toggles column lines on every row it renders, the\r\n                                 filter row included (m_column_headers.js:205-207). -->\r\n                            <!-- Every filter-row cell is numbered, as the headers view numbers it\r\n                                 (m_columns_view.js:681-693). -->\r\n                            <tr class=\"nxe-row nxe-datagrid-filter-row\" [class.nxe-column-lines]=\"showColumnLines()\">\r\n                                @for (i of indents(groupLevelCount()); track i) {\r\n                                    <td class=\"nxe-command-expand nxe-datagrid-group-space\" [attr.aria-colindex]=\"i + 1\"></td>\r\n                                }\r\n                                @if (masterDetailEnabled()) {\r\n                                    <td class=\"nxe-command-expand nxe-datagrid-group-space\" [attr.aria-colindex]=\"expandColIndex()\"></td>\r\n                                }\r\n                                @if (selectColumnVisible()) {\r\n                                    <td class=\"nxe-command-select\" [attr.aria-colindex]=\"selectColIndex()\"></td>\r\n                                }\r\n                                @for (col of visibleColumns(); track $index; let ci = $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\r\n                                        class=\"nxe-editor-cell\"\r\n                                        [class]=\"col.cssClass()\"\r\n                                        [attr.aria-colindex]=\"leadCellCount() + ci + 1\">\r\n                                        @if (col.allowFiltering()) {\r\n                                            @switch (frEditorKind(col)) {\r\n                                                @case ('lookup') {\r\n                                                    <select\r\n                                                        class=\"nxe-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=\"\">{{ t('common.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=\"nxe-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=\"\">{{ t('common.all') }}</option>\r\n                                                        <option value=\"true\">{{ t('grid.filterRow.true') }}</option>\r\n                                                        <option value=\"false\">{{ t('grid.filterRow.false') }}</option>\r\n                                                    </select>\r\n                                                }\r\n                                                @default {\r\n                                                    <div class=\"nxe-editor-with-menu\">\r\n                                                        <div class=\"nxe-menu nxe-menu-base\">\r\n                                                            <ul class=\"nxe-menu-horizontal\">\r\n                                                                <li>\r\n                                                                    <div\r\n                                                                        class=\"nxe-menu-item\"\r\n                                                                        [attr.title]=\"t('grid.filterRow.operation')\"\r\n                                                                        (click)=\"openFilterOpMenu(col, $event)\">\r\n                                                                        <div class=\"nxe-menu-item-content\">\r\n                                                                            <span\r\n                                                                                class=\"nxe-icon nxe-icon-filter-operation-{{ frOpIconSlug(col) }}\"></span>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </li>\r\n                                                            </ul>\r\n                                                        </div>\r\n                                                        <!-- dx sets the FIRST input's text-align to the column\r\n                                                             alignment inline, unless centre (m_filter_row.js:390-395). -->\r\n                                                        <input\r\n                                                            class=\"nxe-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                                                            [style.text-align]=\"filterCellAlign(col)\"\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=\"nxe-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=\"nxe-command-edit\" [attr.aria-colindex]=\"editColIndex()\"></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]. dx numbers\r\n                                     every cell of a rows-view row, command cells included\r\n                                     (m_columns_view.js:681-693), and the caption as the cell after the\r\n                                     toggle (m_rows_view.js:626-635, columnIndex groupIndex + 1). That\r\n                                     number can be a data column's, so dx looks group rows up with\r\n                                     `:not(.dx-group-cell)` (m_columns_view.js:942), and onCellPrepared\r\n                                     reports the caption as no column. -->\r\n                                <tr\r\n                                    class=\"nxe-row nxe-group-row\"\r\n                                    [class.nxe-column-lines]=\"showColumnLines()\"\r\n                                    [attr.aria-roledescription]=\"item.collapsed ? t('grid.collapsedRow') : t('grid.expandedRow')\">\r\n                                    @for (i of indents(item.level); track i) {\r\n                                        <td class=\"nxe-command-expand nxe-datagrid-group-space\" [attr.aria-colindex]=\"i + 1\"></td>\r\n                                    }\r\n                                    <td\r\n                                        class=\"nxe-command-expand nxe-datagrid-group-space nxe-datagrid-expand nxe-selection-disabled\"\r\n                                        [attr.aria-colindex]=\"item.level + 1\"\r\n                                        [attr.aria-label]=\"item.collapsed ? t('grid.expand') : t('grid.collapse')\"\r\n                                        (click)=\"toggleGroup(item.groupKey)\">\r\n                                        <div\r\n                                            [class.nxe-datagrid-group-opened]=\"!item.collapsed\"\r\n                                            [class.nxe-datagrid-group-closed]=\"item.collapsed\"></div>\r\n                                    </td>\r\n                                    <td\r\n                                        class=\"nxe-group-cell\"\r\n                                        [attr.aria-colindex]=\"item.level + 2\"\r\n                                        [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\r\n                                            class=\"nxe-datagrid-summary-item\"\r\n                                            [attr.aria-colindex]=\"leadCellCount() + visibleIndexOf(col) + 1\"\r\n                                            [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=\"nxe-command-edit\" [attr.aria-colindex]=\"editColIndex()\"></td>\r\n                                    }\r\n                                </tr>\r\n                            } @else if (item.kind === 'groupFooter') {\r\n                                <!-- dx's group footer: dx-datagrid-group-footer, and column lines like\r\n                                     any row the rows view renders (m_rows_view.js:222-229). Row lines are\r\n                                     data rows' only (:228); the line under a footer is the column-lines\r\n                                     rule's. -->\r\n                                <tr\r\n                                    class=\"nxe-row nxe-group-footer-row nxe-datagrid-group-footer\"\r\n                                    [class]=\"'nxe-group-footer-level-' + item.level\"\r\n                                    [class.nxe-column-lines]=\"showColumnLines()\">\r\n                                    @for (i of indents(groupLevelCount()); track i) {\r\n                                        <td class=\"nxe-command-expand nxe-datagrid-group-space\" [attr.aria-colindex]=\"i + 1\"></td>\r\n                                    }\r\n                                    @if (masterDetailEnabled()) {\r\n                                        <td class=\"nxe-command-expand nxe-datagrid-group-space\" [attr.aria-colindex]=\"expandColIndex()\"></td>\r\n                                    }\r\n                                    @if (selectColumnVisible()) {\r\n                                        <td class=\"nxe-command-select\" [attr.aria-colindex]=\"selectColIndex()\"></td>\r\n                                    }\r\n                                    @for (col of visibleColumns(); track col.dataField()) {\r\n                                        <td\r\n                                            class=\"nxe-datagrid-summary-item\"\r\n                                            [attr.aria-colindex]=\"leadCellCount() + visibleIndexOf(col) + 1\"\r\n                                            [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=\"nxe-command-edit\" [attr.aria-colindex]=\"editColIndex()\"></td>\r\n                                    }\r\n                                </tr>\r\n                            } @else {\r\n                                <tr\r\n                                    class=\"nxe-row nxe-data-row\"\r\n                                    role=\"row\"\r\n                                    [class]=\"rowClassFor(item.row)\"\r\n                                    [attr.aria-rowindex]=\"item.rowIndex + 1\"\r\n                                    [attr.aria-selected]=\"selectionMode() === 'none' ? null : isSelected(item.row)\"\r\n                                    [class.nxe-row-lines]=\"showRowLines()\"\r\n                                    [class.nxe-column-lines]=\"showColumnLines()\"\r\n                                    [class.nxe-row-alt]=\"rowAlternationEnabled() && item.rowIndex % 2 === 1\"\r\n                                    [class.nxe-selection]=\"isSelected(item.row)\"\r\n                                    [class.nxe-state-hover]=\"isHovered(item.rowIndex)\"\r\n                                    [class.nxe-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=\"nxe-command-expand nxe-datagrid-group-space\" [attr.aria-colindex]=\"i + 1\"></td>\r\n                                    }\r\n                                    @if (masterDetailEnabled()) {\r\n                                        <!-- dx reuses the group row's toggle for the detail row\r\n                                             (m_master_detail.js:33-43, m_utils.js:462-474), and any click\r\n                                             in the cell toggles (m_grouping.js:523-532 `closest('.dx-datagrid-expand')`).\r\n                                             toggleDetail stops the click there, as dx-selection-disabled does. -->\r\n                                        <td\r\n                                            class=\"nxe-command-expand nxe-datagrid-group-space nxe-datagrid-expand nxe-selection-disabled\"\r\n                                            [attr.aria-colindex]=\"expandColIndex()\"\r\n                                            [attr.aria-label]=\"isDetailExpanded(item.row) ? t('grid.collapse') : t('grid.expand')\"\r\n                                            (click)=\"toggleDetail(item.row, $event)\">\r\n                                            <div\r\n                                                [class.nxe-datagrid-group-opened]=\"isDetailExpanded(item.row)\"\r\n                                                [class.nxe-datagrid-group-closed]=\"!isDetailExpanded(item.row)\"></div>\r\n                                        </td>\r\n                                    }\r\n                                    @if (selectColumnVisible()) {\r\n                                        <td class=\"nxe-command-select\" [attr.aria-colindex]=\"selectColIndex()\">\r\n                                            <span\r\n                                                class=\"nxe-select-checkbox nxe-grid-checkbox nxe-checkbox nxe-datagrid-checkbox-size\"\r\n                                                role=\"checkbox\"\r\n                                                [attr.aria-checked]=\"isSelected(item.row)\"\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                                                role=\"gridcell\"\r\n                                                [attr.aria-colindex]=\"leadCellCount() + ci + 1\"\r\n                                                [attr.tabindex]=\"isCellTabStop(item.rowIndex, ci) ? 0 : -1\"\r\n                                                (focus)=\"focusCell(item.rowIndex, ci)\"\r\n                                                [attr.aria-roledescription]=\"\r\n                                                    editableCell(col) && (cellEditingEnabled() || rowEditingEnabled())\r\n                                                        ? t('grid.editableCell')\r\n                                                        : null\r\n                                                \"\r\n                                                [style.text-align]=\"align(col)\"\r\n                                                [attr.rowspan]=\"mergeSpan(ri, col)\"\r\n                                                [class.nxe-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                                                    <!-- dx's tree icons (dx-treelist-icon-container): one 14px slot\r\n                                                         per level, then the 14x18 toggle or, on a leaf, one more slot.\r\n                                                         Floated as dx floats it in the fixed table, so the text\r\n                                                         wraps beside it and starts flush after it. Not named\r\n                                                         nxe-treelist-*: the dx mirror would hand it to an app's\r\n                                                         newer-dx tree layout (18px slots). -->\r\n                                                    <span class=\"nxe-tree-icons\" [class.nxe-tree-icons-select]=\"showCheckboxes()\">\r\n                                                        @for (i of indents(item.level || 0); track i) {\r\n                                                            <span class=\"nxe-tree-expander-stub\"></span>\r\n                                                        }\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                                                        <!-- dx draws a tree list's row checkbox here, in the icon\r\n                                                             container after the toggle, not in a command column. -->\r\n                                                        @if (showCheckboxes()) {\r\n                                                            <span\r\n                                                                class=\"nxe-select-checkbox nxe-grid-checkbox nxe-checkbox nxe-datagrid-checkbox-size nxe-tree-checkbox\"\r\n                                                                role=\"checkbox\"\r\n                                                                [attr.aria-checked]=\"isTreeIndeterminate(item.row) ? 'mixed' : isSelected(item.row)\"\r\n                                                                [class.nxe-checked]=\"isSelected(item.row)\"\r\n                                                                [class.nxe-indeterminate]=\"isTreeIndeterminate(item.row)\"\r\n                                                                (click)=\"onCheckboxClick(item.row, $event)\">\r\n                                                                <span class=\"nxe-grid-checkbox-box\"></span>\r\n                                                            </span>\r\n                                                        }\r\n                                                    </span>\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)) {\r\n                                                    <!-- dx showEditorAlways: a boolean cell is a dx checkbox, not\r\n                                                         \"true\"/\"false\". It is read-only unless the grid edits cells\r\n                                                         and the column is editable (m_editing.js:210, 1832-1847);\r\n                                                         then one click toggles the value in place. -->\r\n                                                    <span\r\n                                                        class=\"nxe-grid-checkbox nxe-grid-checkbox-readonly nxe-checkbox nxe-datagrid-checkbox-size\"\r\n                                                        role=\"checkbox\"\r\n                                                        [class.nxe-grid-checkbox-left]=\"align(col) === 'left'\"\r\n                                                        [class.nxe-grid-checkbox-right]=\"align(col) === 'right'\"\r\n                                                        [class.nxe-checked]=\"getRaw(item.row, col.dataField()) === true\"\r\n                                                        [class.nxe-state-readonly]=\"booleanReadOnly(col)\"\r\n                                                        [attr.aria-checked]=\"getRaw(item.row, col.dataField()) === true\"\r\n                                                        [attr.aria-readonly]=\"booleanReadOnly(col) ? 'true' : null\"\r\n                                                        (click)=\"onBooleanCellClick(item.row, col, $event)\">\r\n                                                        <span class=\"nxe-grid-checkbox-box\"></span>\r\n                                                    </span>\r\n                                                } @else {\r\n                                                    <!-- In an ng-container so the text node carries no padding space:\r\n                                                         after the tree icons one would render as a 3px gap. -->\r\n                                                    <ng-container>{{ cellText(col, item.row) }}</ng-container>\r\n                                                }\r\n                                            </td>\r\n                                        }\r\n                                    }\r\n                                    @if (rowEditCommandVisible()) {\r\n                                        <td class=\"nxe-command-edit nxe-datagrid-drag-action\" [attr.aria-colindex]=\"editColIndex()\">\r\n                                            @if (isRowEditing(item.row)) {\r\n                                                <a class=\"nxe-link nxe-link-save\" (click)=\"saveRowEdit(item.row, $event)\">{{ t('grid.save') }}</a>\r\n                                                <a class=\"nxe-link nxe-link-cancel\" (click)=\"cancelRowEdit($event)\">{{ t('grid.cancel') }}</a>\r\n                                            } @else {\r\n                                                <a class=\"nxe-link nxe-link-edit\" (click)=\"startRowEdit(item.row, $event)\">{{ t('grid.edit') }}</a>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n                                </tr>\r\n                                @if (masterDetailEnabled() && isDetailExpanded(item.row)) {\r\n                                    <!-- dx's detail row takes row lines as well as column lines, and its one\r\n                                         cell is dx-master-detail-cell (m_master_detail.js:290-294, :325),\r\n                                         rendered as column 0 - so aria-colindex 1. -->\r\n                                    <tr\r\n                                        class=\"nxe-row nxe-master-detail-row\"\r\n                                        [class.nxe-row-lines]=\"showRowLines()\"\r\n                                        [class.nxe-column-lines]=\"showColumnLines()\">\r\n                                        <td class=\"nxe-master-detail-cell nxe-cell-focus-disabled\" aria-colindex=\"1\" [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                        <!-- dx's free-space row (m_rows_view.js:448-466): one cell per column, so the\r\n                             column lines run on through the space it fills. The row is\r\n                             role=\"presentation\", as dx's `_createEmptyRow` makes it, so assistive tech\r\n                             inside role=grid does not meet a row of empty gridcells; its cells take\r\n                             no role and no aria-colindex: nothing that addresses cells may count them. -->\r\n                        <tr\r\n                            role=\"presentation\"\r\n                            class=\"nxe-row nxe-freespace-row\"\r\n                            [class.nxe-column-lines]=\"showColumnLines()\"\r\n                            [style.height.px]=\"freeSpaceHeight() || null\">\r\n                            @for (i of indents(groupLevelCount()); track i) {\r\n                                <td class=\"nxe-command-expand nxe-datagrid-group-space\"></td>\r\n                            }\r\n                            @if (masterDetailEnabled()) {\r\n                                <td class=\"nxe-command-expand nxe-datagrid-group-space\"></td>\r\n                            }\r\n                            @if (selectColumnVisible()) {\r\n                                <td class=\"nxe-command-select\"></td>\r\n                            }\r\n                            @for (col of visibleColumns(); track $index) {\r\n                                <td [class]=\"col.cssClass()\"></td>\r\n                            }\r\n                            @if (rowEditCommandVisible()) {\r\n                                <td class=\"nxe-command-edit\"></td>\r\n                            }\r\n                        </tr>\r\n                    </tbody>\r\n                    @if (hasTotalFooter()) {\r\n                        <tfoot class=\"nxe-datagrid-total-footer\">\r\n                            <tr class=\"nxe-row\">\r\n                                @for (i of indents(groupLevelCount()); track i) {\r\n                                    <td class=\"nxe-command-expand nxe-datagrid-group-space\" [attr.aria-colindex]=\"i + 1\"></td>\r\n                                }\r\n                                @if (masterDetailEnabled()) {\r\n                                    <td class=\"nxe-command-expand nxe-datagrid-group-space\" [attr.aria-colindex]=\"expandColIndex()\"></td>\r\n                                }\r\n                                @if (selectColumnVisible()) {\r\n                                    <td class=\"nxe-command-select\" [attr.aria-colindex]=\"selectColIndex()\"></td>\r\n                                }\r\n                                @for (col of visibleColumns(); track col.dataField()) {\r\n                                    <td\r\n                                            class=\"nxe-datagrid-summary-item\"\r\n                                            [attr.aria-colindex]=\"leadCellCount() + visibleIndexOf(col) + 1\"\r\n                                            [style.text-align]=\"align(col)\">\r\n                                        {{ totalSums().get(col.dataField()) || '' }}\r\n                                    </td>\r\n                                }\r\n                                @if (rowEditCommandVisible()) {\r\n                                    <td class=\"nxe-command-edit\" [attr.aria-colindex]=\"editColIndex()\"></td>\r\n                                }\r\n                            </tr>\r\n                        </tfoot>\r\n                    }\r\n                </table>\r\n            </div>\r\n\r\n            @if (remoteBusy()) {\r\n                <!-- Server-side data: a request is in flight over the rows already on screen. -->\r\n                <div class=\"nxe-datagrid-loadpanel nxe-datagrid-remote-busy\" role=\"status\" [attr.aria-label]=\"t('grid.remote.loading')\">\r\n                    <span class=\"nxe-grid-spinner\"></span>\r\n                </div>\r\n            }\r\n\r\n            @if (isEmpty()) {\r\n                <!-- dx `.dx-datagrid-rowsview.dx-empty{height:100px}`: our rows view also holds the\r\n                     <thead>, so the empty body is its own box after the table. dx appends the nodata\r\n                     span to the rows view outside its scrollable (m_utils.js:206-210) and positions the\r\n                     load panel `of:` the rows view, header excluded (m_rows_view.js:1023) - both live\r\n                     in this box. The load panel can: loading() implies a null source, hence no rows.\r\n                     If the total footer is ever shown for empty data (dx m_summary.js:487-503), this\r\n                     box has to move between the <tbody> and the <tfoot>. -->\r\n                <div class=\"nxe-datagrid-empty-body\">\r\n                    @if (remoteFailed()) {\r\n                        <div class=\"nxe-datagrid-remote-error\" role=\"alert\">\r\n                            <span class=\"nxe-datagrid-remote-error-text\">{{ t('grid.remote.error') }}</span>\r\n                            <button type=\"button\" class=\"nxe-datagrid-remote-retry\" (click)=\"retryRemote()\">{{ t('grid.remote.retry') }}</button>\r\n                        </div>\r\n                    } @else if (!loading()) {\r\n                        <span class=\"nxe-datagrid-nodata\">{{ noDataText() }}</span>\r\n                    } @else {\r\n                        <div class=\"nxe-datagrid-loadpanel\"><span class=\"nxe-grid-spinner\"></span></div>\r\n                    }\r\n                </div>\r\n            }\r\n        </div>\r\n\r\n        @if (pagerVisible()) {\r\n            <!-- dx's pager (pagination/content.js) under dx's class names: the page sizes float left;\r\n                 the pages float right - the info text, then prev, the page buttons and next. dx\r\n                 renders div[role=button]s; these are real buttons with dx's labels. The prev/next\r\n                 buttons are empty: the chevron is drawn by CSS. At either end dx only takes the\r\n                 button out of the tab order (page_index_selector.js), so it keeps focus rather than\r\n                 dropping it as a disabled button would; a click there is a no-op (goToPage clamps). -->\r\n            <div\r\n                class=\"nxe-datagrid-pager nxe-pager nxe-grid-pager\"\r\n                role=\"navigation\"\r\n                [attr.aria-label]=\"pagerCmp()?.label() ?? t('grid.pager.navigation')\">\r\n                @if (pagerCmp()?.showPageSizeSelector()) {\r\n                    <div class=\"nxe-page-sizes\">\r\n                        @if (pagerCompact()) {\r\n                            @if (pageSizes().length) {\r\n                                <select class=\"nxe-pager-size\" [attr.aria-label]=\"t('grid.pager.pageSize')\" (change)=\"onPageSizeSelect($event)\">\r\n                                    @for (s of pageSizes(); track $index) {\r\n                                        <option [value]=\"s\" [selected]=\"s === effectivePageSize()\">{{ s }}</option>\r\n                                    }\r\n                                </select>\r\n                            }\r\n                        } @else {\r\n                            @for (s of pageSizes(); track $index; let first = $first) {\r\n                                <button\r\n                                    type=\"button\"\r\n                                    class=\"nxe-page-size\"\r\n                                    [class.nxe-selection]=\"s === effectivePageSize()\"\r\n                                    [class.nxe-first-child]=\"first\"\r\n                                    [attr.aria-label]=\"t('grid.pager.itemsPerPage', s)\"\r\n                                    (click)=\"changePageSize(s)\">{{ s }}</button>\r\n                            }\r\n                        }\r\n                    </div>\r\n                }\r\n                <div class=\"nxe-pages\">\r\n                    @if (pagerCmp()?.showInfo()) {\r\n                        <div class=\"nxe-info nxe-pager-info\">{{ pageInfo() }}</div>\r\n                    }\r\n                    <div class=\"nxe-page-indexes nxe-pager-pages\">\r\n                        @if (pagerNavVisible()) {\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"nxe-navigate-button nxe-prev-button nxe-pager-nav\"\r\n                                [class.nxe-button-disable]=\"currentPage() === 0\"\r\n                                [attr.aria-disabled]=\"currentPage() === 0 ? 'true' : null\"\r\n                                [attr.tabindex]=\"currentPage() === 0 ? -1 : null\"\r\n                                [attr.aria-label]=\"t('grid.pager.previous')\"\r\n                                (click)=\"prevPage()\"></button>\r\n                        }\r\n                        @for (item of pageItems(); track item.key) {\r\n                            @if (item.separator) {\r\n                                <div class=\"nxe-separator\">. . .</div>\r\n                            } @else {\r\n                                <button\r\n                                    type=\"button\"\r\n                                    class=\"nxe-page nxe-pager-page\"\r\n                                    [class.nxe-selection]=\"item.page === currentPage()\"\r\n                                    [class.nxe-active]=\"item.page === currentPage()\"\r\n                                    [attr.aria-label]=\"t('grid.pager.page', item.page + 1)\"\r\n                                    [attr.aria-current]=\"item.page === currentPage() ? 'page' : null\"\r\n                                    (click)=\"goToPage(item.page)\">{{ item.page + 1 }}</button>\r\n                            }\r\n                        }\r\n                        @if (pagerNavVisible()) {\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"nxe-navigate-button nxe-next-button nxe-pager-nav\"\r\n                                [class.nxe-button-disable]=\"currentPage() >= pageCount() - 1\"\r\n                                [attr.aria-disabled]=\"currentPage() >= pageCount() - 1 ? 'true' : null\"\r\n                                [attr.tabindex]=\"currentPage() >= pageCount() - 1 ? -1 : null\"\r\n                                [attr.aria-label]=\"t('grid.pager.next')\"\r\n                                (click)=\"nextPage()\"></button>\r\n                        }\r\n                    </div>\r\n                </div>\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=\"nxe-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 (colType(col) === 'boolean') {\r\n        <!-- dx's checkbox editor, the same box as the resting boolean cell (never the browser's\r\n             native checkbox). Cell mode toggles resting cells in place and never gets here; this\r\n             is the row being edited, and a click or Space only buffers until Save. It takes focus\r\n             as dx's dxCheckBox does (tabIndex 0, Space toggles: check_box.js:125), so Tab reaches\r\n             it with the row's other editors. -->\r\n        <span\r\n            class=\"nxe-grid-checkbox nxe-grid-checkbox-readonly nxe-checkbox nxe-datagrid-checkbox-size nxe-grid-cell-editor-check\"\r\n            role=\"checkbox\"\r\n            tabindex=\"0\"\r\n            [class.nxe-grid-checkbox-left]=\"align(col) === 'left'\"\r\n            [class.nxe-grid-checkbox-right]=\"align(col) === 'right'\"\r\n            [class.nxe-checked]=\"editorChecked(row, col)\"\r\n            [attr.aria-checked]=\"editorChecked(row, col)\"\r\n            (click)=\"toggleEditorCheck(row, col, mode, $event)\"\r\n            (keydown.space)=\"toggleEditorCheck(row, col, mode, $event)\">\r\n            <span class=\"nxe-grid-checkbox-box\"></span>\r\n        </span>\r\n    } @else {\r\n        <input\r\n            type=\"text\"\r\n            class=\"nxe-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<!-- A header cell's indicator block (dx .dx-column-indicators). dx creates the sort span first and\r\n     the funnel second; the funnel is prepended when the column is right-aligned\r\n     (m_header_filter_core.js _renderIndicator), so a right-aligned column reads [funnel][sort] and\r\n     every other [sort][funnel]. An unsorted sortable column keeps an empty `nxe-sort-none` span, as\r\n     dx does: hidden in the fixed table, measured by the best-fit pass. -->\r\n<ng-template\r\n    #headerIndicators\r\n    let-col\r\n    let-dir=\"dir\"\r\n    let-sortSlot=\"sortSlot\"\r\n    let-hf=\"hf\"\r\n    let-hfFirst=\"hfFirst\"\r\n    let-float=\"float\">\r\n    <div class=\"nxe-column-indicators\" role=\"presentation\" [style.float]=\"float\">\r\n        @for (kind of hfFirst ? ['funnel', 'sort'] : ['sort', 'funnel']; track kind) {\r\n            @if (kind === 'funnel') {\r\n                @if (hf) {\r\n                    <span\r\n                        class=\"nxe-grid-hf-icon\"\r\n                        [class.nxe-hf-active]=\"hasHeaderFilter(col)\"\r\n                        (click)=\"openHeaderFilter(col, $event)\"></span>\r\n                }\r\n            } @else if (sortSlot) {\r\n                <span\r\n                    class=\"nxe-sort\"\r\n                    [class.nxe-sort-none]=\"!dir\"\r\n                    [class.nxe-sort-up]=\"dir === 'asc'\"\r\n                    [class.nxe-sort-down]=\"dir === 'desc'\"></span>\r\n            }\r\n        }\r\n    </div>\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 nxe-datagrid\">\r\n        @for (item of frMenuOps(); track item.op) {\r\n            <div\r\n                class=\"nxe-menu-item\"\r\n                [class.nxe-menu-item-selected]=\"frMenuColumn() && frOp(frMenuColumn()!) === item.op\"\r\n                (click)=\"selectFilterOp(item.op)\">\r\n                <span class=\"nxe-icon nxe-icon-filter-operation-{{ opIconSlug(item.op) }}\"></span>\r\n                <span class=\"nxe-menu-item-text\">{{ item.label }}</span>\r\n            </div>\r\n        }\r\n        <!-- dx draws Reset with the chooser's own magnifier. -->\r\n        <div class=\"nxe-menu-item nxe-fr-reset\" (click)=\"resetFilterRow()\">\r\n            <span class=\"nxe-icon nxe-icon-filter-operation-default\"></span>\r\n            <span class=\"nxe-menu-item-text\">{{ t('grid.filterRow.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 .nxe-datagrid{height:100%;position:relative;white-space:normal;cursor:default;color:var(--nxe-ui-text, #333)}.nxe-data-grid .nxe-gridbase-container{display:flex;flex-direction:column;height:100%;line-height:inherit;min-height:inherit;max-height:inherit}.nxe-data-grid .nxe-gridbase-container>*{flex:0 0 auto}.nxe-data-grid .nxe-datagrid-rowsview{position:relative;overflow:auto;flex:1 1 auto;min-height:0;background-color:var(--nxe-ui-surface, #fff)}.nxe-data-grid .nxe-datagrid-content{display:block;position:relative;min-height:100%}.nxe-data-grid .nxe-datagrid-rowsview .nxe-datagrid-content{overflow-anchor:none}.nxe-data-grid .nxe-datagrid-rowsview.nxe-empty{display:flex;flex-direction:column;height:auto}.nxe-data-grid .nxe-datagrid-rowsview.nxe-empty>.nxe-datagrid-content{flex:none;min-height:0}.nxe-data-grid .nxe-datagrid-rowsview.nxe-empty>.nxe-datagrid-empty-body{position:sticky;inset-inline-start:0;flex:1 1 var(--nxe-ui-grid-empty-height, 100px);min-height:0}.nxe-data-grid table.nxe-datagrid-table{display:table;width:100%;table-layout:fixed;border-collapse:collapse;margin:0;overflow-x:clip}.nxe-data-grid .nxe-datagrid-content .nxe-datagrid-table{max-width:none}.nxe-data-grid .nxe-datagrid-headers{display:table-header-group;position:sticky;top:0;z-index:1;color:var(--nxe-ui-neutral-600, #757575);font-weight:400;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pinch-zoom;background:var(--nxe-ui-surface, #fff);border-bottom:0}.nxe-data-grid tbody{display:table-row-group}.nxe-data-grid .nxe-row{display:table-row}.nxe-data-grid .nxe-datagrid-rowsview tbody>.nxe-row{border-top:var(--nxe-ui-grid-line-width, 1px) solid transparent;border-bottom:var(--nxe-ui-grid-line-width, 1px) solid transparent}.nxe-data-grid .nxe-datagrid-headers>.nxe-row{border-top:0;border-bottom:0}.nxe-data-grid .nxe-datagrid-headers:before{content:none}.nxe-data-grid .nxe-datagrid-headers>.nxe-row>td{border-bottom:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-header-line-color, #ddd)}.nxe-data-grid .nxe-datagrid-rowsview.nxe-datagrid-after-headers{border-top:0}.nxe-data-grid .nxe-datagrid .nxe-row-lines>td{border-bottom:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-row-line-color, #ddd)}.nxe-data-grid .nxe-datagrid-rowsview .nxe-row.nxe-row-lines:first-child,.nxe-data-grid .nxe-datagrid-rowsview .nxe-row.nxe-row-lines:first-child>td{border-top:none}.nxe-data-grid .nxe-datagrid .nxe-column-lines>td{border-left:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-column-line-color, #ddd);border-right:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-column-line-color, #ddd)}.nxe-data-grid .nxe-datagrid .nxe-column-lines>td:first-child{border-left:none}.nxe-data-grid .nxe-datagrid .nxe-column-lines>td:last-child{border-right:none}.nxe-data-grid .nxe-datagrid-content .nxe-datagrid-table .nxe-row>td:first-child{border-left:0}.nxe-data-grid .nxe-datagrid-content .nxe-datagrid-table .nxe-row>td.nxe-datagrid-group-space{border-right:none}.nxe-data-grid .nxe-datagrid-content .nxe-datagrid-table .nxe-row>td.nxe-datagrid-group-space+td{border-left:none}.nxe-data-grid .nxe-datagrid-rowsview .nxe-row.nxe-group-row>td{border-top:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-row-line-color, #ddd);border-bottom:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-row-line-color, #ddd)}.nxe-data-grid .nxe-datagrid-rowsview .nxe-row.nxe-group-row:first-child,.nxe-data-grid .nxe-datagrid-rowsview .nxe-row.nxe-group-row:first-child>td{border-top:none}.nxe-data-grid .nxe-datagrid-rowsview .nxe-group-row.nxe-row>td{border-left-color:transparent;border-right-color:transparent}.nxe-data-grid .nxe-row.nxe-datagrid-group-footer>td{border-top:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-row-line-color, #ddd);background-color:var(--nxe-ui-surface, #fff);border-left-width:0;border-right-width:0}.nxe-data-grid .nxe-row.nxe-datagrid-group-footer.nxe-column-lines{border-bottom:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-row-line-color, #ddd)}.nxe-data-grid .nxe-datagrid-rowsview .nxe-row.nxe-edit-row>td{border-top:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-row-line-color, #ddd);border-bottom:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-row-line-color, #ddd)}.nxe-data-grid .nxe-datagrid-rowsview .nxe-row.nxe-edit-row:first-child>td{border-top-width:0;border-bottom:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-row-line-color, #ddd)}.nxe-data-grid .nxe-datagrid-rowsview .nxe-selection.nxe-row:not(.nxe-row-focused):not(.nxe-row-lines)>td,.nxe-data-grid .nxe-datagrid-rowsview .nxe-selection.nxe-row:not(.nxe-row-focused):hover:not(.nxe-row-lines)>td{border-top:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-neutral-150, #e6e6e6);border-bottom:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-neutral-150, #e6e6e6)}.nxe-data-grid .nxe-datagrid-rowsview .nxe-selection.nxe-row:not(.nxe-row-focused).nxe-column-lines>td,.nxe-data-grid .nxe-datagrid-rowsview .nxe-selection.nxe-row:not(.nxe-row-focused):hover.nxe-column-lines>td{border-left-color:var(--nxe-ui-grid-column-line-color, #ddd);border-right-color:var(--nxe-ui-grid-column-line-color, #ddd)}.nxe-data-grid .nxe-datagrid-rowsview .nxe-selection.nxe-row:not(.nxe-row-focused).nxe-row-lines>td,.nxe-data-grid .nxe-datagrid-rowsview .nxe-selection.nxe-row:not(.nxe-row-focused):hover.nxe-row-lines>td{border-bottom-color:var(--nxe-ui-grid-row-line-color, #ddd)}.nxe-data-grid .nxe-datagrid .nxe-row-alt>td{background-color:var(--nxe-ui-grid-alt-row-bg, #f5f5f5)}.nxe-data-grid .nxe-datagrid .nxe-row-alt.nxe-row:not(.nxe-row-removed){border-bottom-color:transparent}.nxe-data-grid .nxe-datagrid-borders>.nxe-gridbase-container>.nxe-datagrid-rowsview{border:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-border-color, #ddd)}.nxe-data-grid .nxe-datagrid-borders>.nxe-gridbase-container>.nxe-datagrid-header-panel{border-bottom:0}.nxe-data-grid .nxe-datagrid-borders>.nxe-gridbase-container>.nxe-grid-pager{margin-top:-1px}.nxe-data-grid .nxe-datagrid-borders>.nxe-gridbase-container>.nxe-datagrid-rowsview.nxe-last-row-border>.nxe-datagrid-content>.nxe-datagrid-table>tbody>.nxe-data-row:nth-last-child(2),.nxe-data-grid .nxe-datagrid-borders>.nxe-gridbase-container>.nxe-datagrid-rowsview.nxe-last-row-border>.nxe-datagrid-content>.nxe-datagrid-table>tbody>.nxe-data-row:nth-last-child(2)>td{border-bottom-width:0}.nxe-data-grid .nxe-datagrid-nodata{position:absolute;top:50%;left:50%;width:100%;text-align:center;transform:translate(-50%,-50%);color:var(--nxe-ui-text, #333);font-size:var(--nxe-ui-grid-nodata-font-size, 17px);opacity:.7;pointer-events:none}.nxe-data-grid .nxe-datagrid-loadpanel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--nxe-ui-scrim, rgba(255, 255, 255, .5));z-index:2}.nxe-data-grid .nxe-datagrid-remote-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--nxe-ui-space-2, 8px);color:var(--nxe-ui-invalid, #d9534f)}.nxe-data-grid .nxe-datagrid-remote-retry{padding:var(--nxe-ui-space-1, 4px) var(--nxe-ui-space-3, 12px);border:1px solid var(--nxe-ui-border, #ddd);border-radius:var(--nxe-ui-radius, 4px);background:var(--nxe-ui-surface, #fff);color:var(--nxe-ui-text, #333);font:inherit;cursor:pointer}.nxe-data-grid .nxe-grid-spinner{width:32px;height:32px;border:3px solid var(--nxe-ui-spinner-track, rgba(48, 55, 76, .2));border-top-color:var(--nxe-ui-ink-strong, #30374c);border-radius:50%;animation:nxe-grid-spin .8s linear infinite}.nxe-data-grid .nxe-header-row>td{position:relative;cursor:default;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:clip;overflow-clip-margin:4px}.nxe-data-grid .nxe-header-row>td.nxe-datagrid-action{cursor:pointer}.nxe-data-grid .nxe-header-row>td>.nxe-datagrid-text-content{display:inline-block;vertical-align:top;white-space:normal;overflow:hidden;text-overflow:ellipsis}.nxe-data-grid .nxe-datagrid-nowrap .nxe-header-row>td>.nxe-datagrid-text-content{white-space:nowrap}.nxe-data-grid .nxe-header-row>td>.nxe-datagrid-text-content:not(.nxe-sort-indicator):not(.nxe-header-filter-indicator){max-width:100%}.nxe-data-grid .nxe-header-row .nxe-sort-indicator,.nxe-data-grid .nxe-header-row .nxe-header-filter-indicator{max-width:calc(100% - 17px)}.nxe-data-grid .nxe-header-row .nxe-sort-indicator.nxe-text-content-alignment-left,.nxe-data-grid .nxe-header-row .nxe-header-filter-indicator.nxe-text-content-alignment-left{margin-right:3px}.nxe-data-grid .nxe-header-row .nxe-sort-indicator.nxe-text-content-alignment-right,.nxe-data-grid .nxe-header-row .nxe-header-filter-indicator.nxe-text-content-alignment-right{margin-left:3px}.nxe-data-grid .nxe-header-row .nxe-sort-indicator.nxe-text-content-alignment-left.nxe-text-content-alignment-right,.nxe-data-grid .nxe-header-row .nxe-header-filter-indicator.nxe-text-content-alignment-left.nxe-text-content-alignment-right{max-width:calc(100% - 34px)}.nxe-data-grid .nxe-header-row .nxe-sort-indicator.nxe-header-filter-indicator{max-width:calc(100% - 31px)}.nxe-data-grid .nxe-header-row .nxe-sort-indicator.nxe-header-filter-indicator.nxe-text-content-alignment-left.nxe-text-content-alignment-right{max-width:calc(100% - 62px)}.nxe-data-grid .nxe-column-indicators{display:inline-block;vertical-align:top;white-space:nowrap;scale:var(--nxe-ui-grid-indicator-scale, 1);padding-top:var(--nxe-ui-grid-indicator-offset, 0px)}.nxe-data-grid .nxe-column-indicators.nxe-visibility-hidden{visibility:hidden}.nxe-data-grid .nxe-column-indicator-spacer{display:inline-block;width:14px;height:14px;vertical-align:top}.nxe-data-grid .nxe-datagrid-table-fixed .nxe-column-indicators .nxe-sort.nxe-sort-none,.nxe-data-grid .nxe-datagrid-table-fixed .nxe-column-indicators .nxe-column-indicator-spacer-none{display:none}.nxe-data-grid .nxe-datagrid-best-fit .nxe-column-indicators{float:none!important}.nxe-data-grid .nxe-datagrid-best-fit .nxe-column-indicators>span{width:14px}.nxe-data-grid .nxe-datagrid-best-fit .nxe-column-indicators .nxe-sort.nxe-sort-none,.nxe-data-grid .nxe-datagrid-best-fit .nxe-column-indicators .nxe-column-indicator-spacer-none{display:inline-block!important}.nxe-data-grid .nxe-datagrid-best-fit .nxe-header-row .nxe-datagrid-text-content{max-width:none!important}.nxe-data-grid .nxe-datagrid-best-fit .nxe-text-content-alignment-left{margin-right:3px}.nxe-data-grid .nxe-datagrid-best-fit .nxe-text-content-alignment-right{margin-left:3px}.nxe-data-grid .nxe-sort{display:inline-block;position:relative;width:14px;height:14px;vertical-align:top}.nxe-data-grid .nxe-sort:after{content:\"\";position:absolute;left:0;top:0;width:14px;height:14px;background-color:currentColor}@media(forced-colors:active){.nxe-data-grid .nxe-sort:after{forced-color-adjust:none;background-color:CanvasText}}.nxe-data-grid .nxe-sort.nxe-sort-up:after{clip-path:polygon(6.5px 0,9px 3px,7px 3px,7px 14px,6px 14px,6px 3px,4px 3px)}.nxe-data-grid .nxe-sort.nxe-sort-down:after{clip-path:polygon(6px 0,7px 0,7px 11px,9px 11px,6.5px 14px,4px 11px,6px 11px)}.nxe-data-grid .nxe-sort.nxe-sort-none:after{content:none}.nxe-data-grid .nxe-datagrid-group-panel .nxe-sort{color:var(--nxe-ui-neutral-600, #757575)}.nxe-data-grid .nxe-datagrid-group-panel .nxe-group-panel-item .nxe-sort{margin-left:6px}.nxe-data-grid .nxe-grid-hf-icon{display:inline-block;position:relative;width:14px;height:14px;cursor:pointer;vertical-align:top;opacity:.5}.nxe-data-grid .nxe-grid-hf-icon:before{content:\"\";position:absolute;inset:0;background-color:var(--nxe-ui-neutral-600, #757575);clip-path:polygon(0 0,14px 0,14px 3px,9px 8px,9px 14px,5px 14px,5px 8px,0 3px)}@media(forced-colors:active){.nxe-data-grid .nxe-grid-hf-icon:before{forced-color-adjust:none;background-color:CanvasText}}.nxe-data-grid .nxe-grid-hf-icon:after{content:\"\";position:absolute;inset:0;margin:-7px}.nxe-data-grid .nxe-grid-hf-icon.nxe-hf-active{opacity:1}.nxe-data-grid .nxe-grid-pager{display:block;flex:none;overflow:hidden;width:100%;padding:9px 0;border-top:1px solid var(--nxe-ui-grid-border-color, #ddd);color:var(--nxe-ui-text, #333);line-height:normal;-webkit-user-select:none;user-select:none}.nxe-data-grid .nxe-grid-pager .nxe-page-sizes{float:left}.nxe-data-grid .nxe-grid-pager .nxe-pages{float:right;white-space:nowrap}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-info{display:inline-block;margin-right:9px;opacity:.7}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-page-indexes{display:inline-block}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-navigate-button,.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-page,.nxe-data-grid .nxe-grid-pager .nxe-page-sizes .nxe-page-size{appearance:none;margin:0;background:transparent;color:inherit;font:inherit;text-align:center;outline:0;cursor:pointer}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-navigate-button:focus-visible,.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-page:focus-visible,.nxe-data-grid .nxe-grid-pager .nxe-page-sizes .nxe-page-size:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--nxe-ui-focus-ring-color, #5c95c5);outline-offset:-2px}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-page{display:inline-block;margin:0 1px 0 5px;padding:7px 9px 8px;border:1px solid transparent;border-radius:3px}.nxe-data-grid .nxe-grid-pager .nxe-page-sizes .nxe-page-size{display:inline-block;margin:0 1px 0 4px;padding:7px 9px 8px 10px;border:1px solid transparent;border-radius:3px}.nxe-data-grid .nxe-grid-pager .nxe-page-sizes .nxe-page-size.nxe-first-child,.nxe-data-grid .nxe-grid-pager .nxe-page-sizes .nxe-page-size:first-child{margin-left:1px}.nxe-data-grid .nxe-grid-pager .nxe-page-sizes .nxe-selection,.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-selection{cursor:inherit;text-shadow:none;color:var(--nxe-ui-text, #333);border-color:transparent;background-color:var(--nxe-ui-neutral-230, #d4d4d4)}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-separator{display:inline-block;padding:0 8px}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-navigate-button{position:relative;display:inline-block;box-sizing:content-box;width:9px;height:17px;padding:9px 13px;border:0;vertical-align:top}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-navigate-button:before{content:\"\";position:absolute;display:block;box-sizing:border-box;top:50%;left:50%;width:21px;height:21px;margin:-10.5px 0 0 -10.5px;background-color:currentColor}@media(forced-colors:active){.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-navigate-button:before{forced-color-adjust:none;background-color:CanvasText}}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-navigate-button.nxe-button-disable{opacity:.3;cursor:inherit}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-prev-button:before{clip-path:polygon(5.75px 10.25px,13.75px 2.25px,15.25px 3.75px,8.75px 10.25px,15.25px 16.75px,13.75px 18.25px)}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-next-button:before{clip-path:polygon(15.25px 10.25px,7.25px 2.25px,5.75px 3.75px,12.25px 10.25px,5.75px 16.75px,7.25px 18.25px)}.nxe-data-grid .nxe-grid-pager .nxe-pager-size{padding:2px 6px;border:1px solid var(--nxe-ui-border, #ddd);border-radius:3px;font:inherit}.nxe-data-grid .nxe-datagrid-header-panel{padding:.5rem .75rem;text-align:left;border-bottom:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-border, #ddd)}.nxe-data-grid .nxe-datagrid-group-panel{display:flex;align-items:center;width:100%;min-height:36px;white-space:nowrap;font-size:var(--nxe-ui-font-size, 14px);touch-action:pinch-zoom}.nxe-data-grid .nxe-datagrid-group-panel .nxe-group-panel-message{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--nxe-ui-neutral-600, #757575);font-weight:400;padding:7px;border-top:1px solid transparent;border-bottom:1px solid transparent;line-height:1.2858}.nxe-data-grid .nxe-datagrid-group-panel .nxe-group-panel-item{display:inline-block;min-width:30px;white-space:nowrap;margin-right:10px;color:var(--nxe-ui-neutral-600, #757575);font-weight:400;border:1px solid var(--nxe-ui-border, #ddd);padding:7px}.nxe-data-grid .nxe-datagrid-group-panel .nxe-block-separator{position:relative;margin-right:10px;border-radius:3px;background-color:var(--nxe-ui-accent, #337ab7)}.nxe-data-grid .nxe-tree-icons{display:inline-block;float:left;white-space:nowrap;vertical-align:top;line-height:1}.nxe-data-grid .nxe-tree-expander,.nxe-data-grid .nxe-tree-expander-stub{display:inline-block;position:relative;width:14px;height:14px;vertical-align:top}.nxe-data-grid .nxe-tree-icons-select{position:relative;padding-right:23px}.nxe-data-grid .nxe-tree-icons .nxe-tree-checkbox{position:absolute;top:50%;right:7px;margin:-8px 0 0}.nxe-data-grid .nxe-header-row>.nxe-tree-select-all{position:relative;padding-left:44px}.nxe-data-grid .nxe-header-row>.nxe-tree-select-all>.nxe-grid-checkbox{position:absolute;left:21px;margin:1px 0 0}.nxe-data-grid .nxe-tree-expander{height:18px;margin-right:4px;color:var(--nxe-ui-neutral-450, #959595);cursor:pointer}.nxe-data-grid .nxe-tree-expander:before{content:\"\";position:absolute;left:0;top:8px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor}.nxe-data-grid .nxe-tree-expander.nxe-collapsed:before{left:1px;top:6px;border-top:4px solid transparent;border-right:0;border-bottom:4px solid transparent;border-left:4px solid currentColor}.nxe-data-grid .nxe-group-row{font-weight:700;color:var(--nxe-ui-grid-group-row-color, #222)}.nxe-data-grid .nxe-group-row>td{background-color:var(--nxe-ui-neutral-60, #f7f7f7)}.nxe-data-grid .nxe-group-row>td.nxe-group-cell{font-weight:700}.nxe-data-grid .nxe-group-row>td.nxe-datagrid-summary-item,.nxe-data-grid .nxe-group-footer-row>td.nxe-datagrid-summary-item{font-weight:700;color:var(--nxe-ui-grid-summary-color, rgba(51, 51, 51, .7))}.nxe-data-grid .nxe-datagrid-group-opened,.nxe-data-grid .nxe-datagrid-group-closed{display:block;position:relative;width:100%;height:18px;padding:0;color:var(--nxe-ui-neutral-450, #959595);cursor:pointer}.nxe-data-grid .nxe-datagrid-group-opened:before,.nxe-data-grid .nxe-datagrid-group-closed:before{content:\"\"!important;position:absolute;left:50%;right:auto;width:0;height:0}.nxe-data-grid .nxe-datagrid-group-opened:before{top:7px;margin-left:-4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor}.nxe-data-grid .nxe-datagrid-group-closed:before{top:5px;margin-left:-2px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:4px solid currentColor}.nxe-data-grid .nxe-datagrid-total-footer{position:relative}.nxe-data-grid .nxe-datagrid-total-footer>tr>td,.nxe-data-grid tfoot.nxe-datagrid-total-footer td{border-top:1px solid var(--nxe-ui-border, #ddd);padding:6px 4px;font-weight:700;color:var(--nxe-ui-neutral-450, rgb(149, 149, 149))}.nxe-data-grid .nxe-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 var(--nxe-ui-border, #ddd);border-radius:2px;font:inherit;color:var(--nxe-ui-text, #333);outline:none}.nxe-data-grid .nxe-grid-filter-input:focus{border-color:var(--nxe-ui-ink-strong, #30374c)}.nxe-data-grid .nxe-datagrid-filter-row select.nxe-grid-filter-input{appearance:none;background:var(--nxe-ui-surface, #fff) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4'%3E%3Cpath d='M0 0h8L4 4z' fill='%23333'/%3E%3C/svg%3E\") no-repeat right 12px center/8px 4px;padding-right:34px!important}.nxe-data-grid .nxe-command-select{width:40px;min-width:40px;max-width:40px;text-align:center;vertical-align:middle}.nxe-data-grid .nxe-grid-checkbox{display:block;width:16px;margin:0 auto;padding-bottom:2px;line-height:0;cursor:pointer}.nxe-data-grid .nxe-grid-checkbox.nxe-grid-checkbox-left{margin-left:0}.nxe-data-grid .nxe-grid-checkbox.nxe-grid-checkbox-right{margin-right:0}.nxe-data-grid .nxe-grid-checkbox:focus{outline:none}.nxe-data-grid .nxe-grid-checkbox:focus .nxe-grid-checkbox-box{border-color:var(--nxe-ui-accent, #337ab7)}.nxe-data-grid .nxe-grid-checkbox .nxe-grid-checkbox-box{display:block;position:relative;width:16px;height:16px;box-sizing:border-box;border:1px solid var(--nxe-ui-border, #ddd);border-radius:2px;background:var(--nxe-ui-surface, #fff)}.nxe-data-grid .nxe-grid-checkbox:not(.nxe-state-readonly):hover .nxe-grid-checkbox-box{border-color:var(--nxe-ui-checkbox-hover-border, #265a87)}.nxe-data-grid .nxe-grid-checkbox.nxe-checked .nxe-grid-checkbox-box:after{content:\"\";position:absolute;inset:-1px;background-color:var(--nxe-ui-accent, #337ab7);clip-path:polygon(6.75px 12px,2.5px 7.75px,3.5px 6.75px,6.75px 10px,12.75px 4px,13.75px 5px)}@media(forced-colors:active){.nxe-data-grid .nxe-grid-checkbox.nxe-checked .nxe-grid-checkbox-box:after{forced-color-adjust:none;background-color:CanvasText}}.nxe-data-grid .nxe-grid-checkbox.nxe-indeterminate .nxe-grid-checkbox-box:after{content:\"\";position:absolute;left:4px;top:4px;width:6px;height:6px;background-color:var(--nxe-ui-accent, #337ab7)}@media(forced-colors:active){.nxe-data-grid .nxe-grid-checkbox.nxe-indeterminate .nxe-grid-checkbox-box:after{forced-color-adjust:none;background-color:CanvasText}}.nxe-data-grid .nxe-grid-checkbox.nxe-state-readonly{cursor:default}.nxe-data-grid .nxe-grid-checkbox.nxe-state-readonly .nxe-grid-checkbox-box{border-color:var(--nxe-ui-neutral-80, #f4f4f4);background-color:var(--nxe-ui-surface, #fff)}@keyframes nxe-grid-spin{to{transform:rotate(360deg)}}:where(.nxe-data-grid .nxe-row)>td{padding:var(--nxe-ui-grid-cell-padding, 7px);vertical-align:var(--nxe-ui-grid-cell-vertical-align, middle)}:where(.nxe-data-grid .nxe-row)>td:first-child{padding-left:var(--nxe-ui-grid-edge-padding, var(--nxe-ui-grid-cell-padding, 7px))}:where(.nxe-data-grid .nxe-row)>td:last-child{padding-right:var(--nxe-ui-grid-edge-padding, var(--nxe-ui-grid-cell-padding, 7px))}:where(.nxe-data-grid) .nxe-header-row{background-color:var(--nxe-ui-grid-header-bg, transparent);color:var(--nxe-ui-grid-header-color, inherit)}.nxe-datagrid-rowsview .nxe-row{border-top:1px solid transparent;border-bottom:1px solid transparent}.nxe-datagrid-rowsview .nxe-datagrid-table .nxe-row.nxe-freespace-row,.nxe-datagrid-rowsview .nxe-datagrid-table .nxe-row.nxe-virtual-row{border-top:0;border-bottom:0}.nxe-datagrid-rowsview .nxe-datagrid-table .nxe-row.nxe-freespace-row>td,.nxe-datagrid-rowsview .nxe-datagrid-table .nxe-row.nxe-virtual-row>td{padding-top:0;padding-bottom:0}.nxe-datagrid-nowrap{white-space:nowrap}.nxe-datagrid-rowsview :where(tbody)>.nxe-row>td{overflow:hidden;text-overflow:ellipsis}.nxe-datagrid-rowsview .nxe-selection.nxe-row:not(.nxe-row-focused)>td,.nxe-datagrid-rowsview .nxe-selection.nxe-row:not(.nxe-row-focused):hover>td{background-color:var(--nxe-ui-neutral-150, #e6e6e6);color:var(--nxe-ui-text, #333)}.nxe-data-grid .nxe-data-row>td.nxe-editor-cell input:not([type=hidden]){text-align:inherit}.nxe-datagrid-content .nxe-datagrid-table .nxe-row .nxe-command-expand{padding:0;width:30px;min-width:30px;max-width:30px;-webkit-user-select:none;user-select:none}.nxe-datagrid-table .nxe-row .nxe-command-expand.nxe-datagrid-group-space{padding-top:var(--nxe-ui-grid-expand-offset, 7px)}.nxe-datagrid-content .nxe-datagrid-table .nxe-row>td.nxe-datagrid-group-space{vertical-align:top}.nxe-datagrid-content .nxe-datagrid-table .nxe-row .nxe-command-select{padding:0}.nxe-datagrid-rowsview .nxe-master-detail-row>.nxe-master-detail-cell{padding:20px}.nxe-datagrid-rowsview .nxe-master-detail-row .nxe-master-detail-cell:not(.nxe-row-lines){border-top:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-row-line-color, #ddd);border-bottom:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-row-line-color, #ddd)}.nxe-datagrid-rowsview .nxe-master-detail-row:not(.nxe-datagrid-edit-form) .nxe-master-detail-cell{background-color:var(--nxe-ui-neutral-50, #fafafa)}.nxe-grid-cell-editor{width:100%;box-sizing:border-box;border:1px solid var(--nxe-ui-accent, #337ab7);padding:2px 4px;font:inherit;background:var(--nxe-ui-surface, #fff);outline:none}.nxe-data-grid .nxe-command-edit{text-align:center;white-space:nowrap}.nxe-datagrid .nxe-link{text-decoration:underline;cursor:pointer;color:var(--nxe-ui-accent, #337ab7)}.nxe-datagrid-content .nxe-datagrid-table .nxe-row .nxe-command-edit .nxe-link{display:inline-block}.nxe-datagrid .nxe-datagrid-content .nxe-datagrid-table .nxe-row .nxe-command-edit .nxe-link:not(.nxe-link-icon){margin:0 2px;min-width:20px}.nxe-data-row.nxe-state-hover:not(.nxe-selection):not(.nxe-row-modified):not(.nxe-row-inserted):not(.nxe-row-removed):not(.nxe-edit-row)>td:not(.nxe-focused) .nxe-link,.nxe-datagrid-rowsview .nxe-selection.nxe-row:hover>td .nxe-link,.nxe-datagrid-rowsview .nxe-selection>td .nxe-link{color:inherit}.nxe-data-grid .nxe-header-row td.nxe-datagrid-drag-action,.nxe-data-grid .nxe-group-panel-item{touch-action:none}.nxe-data-grid .nxe-drag-source{opacity:.5}.nxe-data-grid .nxe-datagrid-filter-row .nxe-menu ul{list-style:none;margin:0;padding:0}.nxe-data-grid .nxe-datagrid-filter-row .nxe-editor-with-menu{display:flex;position:relative}.nxe-data-grid .nxe-datagrid-filter-row .nxe-editor-with-menu>.nxe-menu{position:absolute;top:0;left:0;bottom:0;height:auto;z-index:1;cursor:pointer}.nxe-data-grid .nxe-datagrid-filter-row .nxe-editor-with-menu>.nxe-menu ul,.nxe-data-grid .nxe-datagrid-filter-row .nxe-editor-with-menu>.nxe-menu li{height:100%}.nxe-data-grid .nxe-datagrid-filter-row .nxe-editor-with-menu>.nxe-menu .nxe-menu-item{display:flex;align-items:center;box-sizing:border-box;height:100%;padding:1px 8px 0}.nxe-data-grid .nxe-datagrid-filter-row .nxe-editor-with-menu>.nxe-menu .nxe-menu-item-content{display:flex;align-items:center;padding:0}.nxe-data-grid .nxe-datagrid-filter-row .nxe-editor-with-menu .nxe-grid-filter-input{flex:1 1 0;min-width:0}.nxe-data-grid .nxe-datagrid-filter-row .nxe-editor-with-menu>.nxe-grid-filter-input:not(.nxe-fr-second){padding-left:32px!important}.nxe-data-grid .nxe-datagrid-filter-row .nxe-editor-with-menu .nxe-fr-second{padding-left:4px!important;border-left:1px solid var(--nxe-ui-border, #ddd)}.nxe-data-grid .nxe-datagrid-filter-row .nxe-menu-item-content .nxe-icon,.nxe-fr-op-menu .nxe-menu-item .nxe-icon{display:block;flex:0 0 14px;width:14px;height:14px;margin:0;padding:0;font-size:0;line-height:0;color:var(--nxe-ui-neutral-500, #898989);background-color:currentColor;-webkit-mask:var(--nxe-ui-grid-fr-op-glyph, linear-gradient(transparent, transparent)) center/14px 14px no-repeat;mask:var(--nxe-ui-grid-fr-op-glyph, linear-gradient(transparent, transparent)) center/14px 14px no-repeat}@media(forced-colors:active){.nxe-data-grid .nxe-datagrid-filter-row .nxe-menu-item-content .nxe-icon,.nxe-fr-op-menu .nxe-menu-item .nxe-icon{forced-color-adjust:none;background-color:CanvasText}}.nxe-data-grid .nxe-datagrid-filter-row .nxe-menu-item-content .nxe-icon:not(.nxe-icon-filter-operation-default),.nxe-fr-op-menu .nxe-menu-item .nxe-icon:not(.nxe-icon-filter-operation-default){position:relative;top:-1px}.nxe-data-grid .nxe-datagrid-filter-row .nxe-menu-item-content .nxe-icon:before,.nxe-fr-op-menu .nxe-menu-item .nxe-icon:before{content:none}.nxe-icon-filter-operation-default{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='5.5' cy='5.5' r='4'/%3E%3Cpath d='M8.5 8.5l4 4'/%3E%3C/g%3E%3C/svg%3E\")}.nxe-icon-filter-operation-contains{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cmask id='m'%3E%3Crect width='14' height='14' fill='%23fff'/%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='7' cy='9.25' r='1.75'/%3E%3Cpath d='M5.25 3.5v8'/%3E%3C/g%3E%3C/mask%3E%3Crect x='4.5' y='2.5' width='5' height='9.5' mask='url(%23m)'/%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='2.25' cy='9.25' r='1.75'/%3E%3Cpath d='M4 7v4.5'/%3E%3Cpath d='M13.4 7.9A1.75 1.75 0 1 0 13.4 10.6'/%3E%3C/g%3E%3C/svg%3E\")}.nxe-icon-filter-operation-not-contains{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cmask id='m'%3E%3Crect width='14' height='14' fill='%23fff'/%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='2.25' cy='9.25' r='1.75'/%3E%3Cpath d='M4 7v4.5'/%3E%3Ccircle cx='7' cy='9.25' r='1.75'/%3E%3Cpath d='M5.25 3.5v8'/%3E%3Cpath d='M13.4 7.9A1.75 1.75 0 1 0 13.4 10.6'/%3E%3C/g%3E%3Crect y='8.75' width='14' height='1'/%3E%3C/mask%3E%3Crect x='0' y='2.5' width='14' height='9.5' mask='url(%23m)'/%3E%3C/svg%3E\")}.nxe-icon-filter-operation-starts-with{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cmask id='m'%3E%3Crect width='14' height='14' fill='%23fff'/%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='2.25' cy='9.25' r='1.75'/%3E%3Cpath d='M4 7v4.5'/%3E%3Ccircle cx='7' cy='9.25' r='1.75'/%3E%3Cpath d='M5.25 3.5v8'/%3E%3C/g%3E%3C/mask%3E%3Crect x='0' y='2.5' width='9.5' height='9.5' mask='url(%23m)'/%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath d='M13.4 7.9A1.75 1.75 0 1 0 13.4 10.6'/%3E%3C/g%3E%3C/svg%3E\")}.nxe-icon-filter-operation-ends-with{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='2.25' cy='9.25' r='1.75'/%3E%3Cpath d='M4 7v4.5'/%3E%3C/g%3E%3Cmask id='m'%3E%3Crect width='14' height='14' fill='%23fff'/%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='7' cy='9.25' r='1.75'/%3E%3Cpath d='M5.25 3.5v8'/%3E%3Cpath d='M13.4 7.9A1.75 1.75 0 1 0 13.4 10.6'/%3E%3C/g%3E%3C/mask%3E%3Crect x='4.5' y='2.5' width='9.5' height='9.5' mask='url(%23m)'/%3E%3C/svg%3E\")}.nxe-icon-filter-operation-equals{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 5h10v1H2zM2 8h10v1H2z'/%3E%3C/svg%3E\")}.nxe-icon-filter-operation-not-equals{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 5h10v1H2zM2 8h10v1H2zM9.3 2h1.4l-6 10H3.3z'/%3E%3C/svg%3E\")}.nxe-icon-filter-operation-less{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M10.75 3.5 3.75 7l7 3.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E\")}.nxe-icon-filter-operation-greater{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.25 3.5l7 3.5-7 3.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E\")}.nxe-icon-filter-operation-less-equal{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M10.75 2 3.75 5.5l7 3.5M3.75 8.5l7 3.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E\")}.nxe-icon-filter-operation-greater-equal{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.25 2l7 3.5-7 3.5M10.25 8.5l-7 3.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E\")}.nxe-icon-filter-operation-between{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 5h1v5H2zM11 5h1v5h-1zM3 7h8v1H3z'/%3E%3C/svg%3E\")}.nxe-fr-op-menu{background:var(--nxe-ui-surface, #fff);border:1px solid var(--nxe-ui-border, #ddd);box-shadow:var(--nxe-ui-shadow-sm, 0 2px 6px rgba(0, 0, 0, .15));padding:4px 0;min-width:180px}.nxe-fr-op-menu .nxe-menu-item{display:flex;align-items:center;gap:5px;box-sizing:border-box;height:31px;padding:0 24px 0 5px;cursor:pointer;color:var(--nxe-ui-text, #333)}.nxe-fr-op-menu .nxe-menu-item:hover{background:var(--nxe-ui-neutral-100, #f0f0f0)}.nxe-fr-op-menu .nxe-menu-item.nxe-menu-item-selected{background:var(--nxe-ui-neutral-150, #e6e6e6)}.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:var(--nxe-ui-accent, #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: [{
+            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\r\n    class=\"nxe-widget nxe-datagrid\"\r\n    [class.nxe-datagrid-borders]=\"showBorders()\"\r\n    [style.height]=\"heightStyle()\">\r\n    <div class=\"nxe-gridbase-container\">\r\n        @if (groupPanelVisible()) {\r\n            <div class=\"nxe-datagrid-header-panel\">\r\n                <div class=\"nxe-datagrid-group-panel\">\r\n                    @if (groupColumns().length === 0) {\r\n                        <span class=\"nxe-group-panel-message\">{{ t('grid.groupPanel') }}</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=\"nxe-group-panel-item nxe-datagrid-action nxe-datagrid-drag-action\"\r\n                                tabindex=\"0\"\r\n                                (pointerdown)=\"onChipPointerDown(col, li, $event)\"\r\n                                (click)=\"onChipClick(col)\">{{ col.caption() }}<div class=\"nxe-column-indicators\" role=\"presentation\"><span\r\n                                        class=\"nxe-sort\"\r\n                                        [class.nxe-sort-up]=\"groupDir(col) === 'asc'\"\r\n                                        [class.nxe-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        <!-- dx drops the last row's bottom line in a bordered grid when no free-space row follows\r\n             it, so the rows view's own border is the only line there (m_rows_view.js:931-937). -->\r\n        <div\r\n            class=\"nxe-datagrid-rowsview nxe-datagrid-after-headers\"\r\n            [class.nxe-datagrid-nowrap]=\"!wordWrapEnabled()\"\r\n            [class.nxe-empty]=\"isEmpty()\"\r\n            [class.nxe-remote-busy]=\"remoteBusy()\"\r\n            [class.nxe-last-row-border]=\"showBorders() && !freeSpaceVisible()\">\r\n            <div class=\"nxe-datagrid-content\">\r\n                <!-- role=grid (treegrid when hierarchical) rather than the implicit table role:\r\n                     this is an interactive widget with a single tab stop and arrow-key movement,\r\n                     not a static table.\r\n\r\n                     aria-rowcount counts the PAGE, because aria-rowindex is page-relative and the\r\n                     two have to agree. Making the index absolute would be more literally correct\r\n                     for a paged grid, but consuming code addresses cells through it\r\n                     (`tr[aria-rowindex=N] > td[aria-colindex=M]`), so the index is a contract. -->\r\n                <table\r\n                    class=\"nxe-datagrid-table nxe-datagrid-table-fixed\"\r\n                    [attr.role]=\"treeMode ? 'treegrid' : 'grid'\"\r\n                    [attr.aria-rowcount]=\"navigableRows().length\"\r\n                    [attr.aria-busy]=\"remoteBusy() ? 'true' : null\"\r\n                    [attr.aria-colcount]=\"visibleColumns().length + leadCellCount() + (rowEditCommandVisible() ? 1 : 0)\"\r\n                    [style.width]=\"tableWidthStyle()\"\r\n                    (keydown)=\"onGridKeydown($event)\">\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 (selectColumnVisible()) {\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=\"nxe-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\r\n                                class=\"nxe-row nxe-header-row\"\r\n                                role=\"row\"\r\n                                [class.nxe-column-lines]=\"showColumnLines()\">\r\n                                @if (hi === 0) {\r\n                                    <!-- dx numbers the header's command cells like the body's\r\n                                         (m_columns_view.js:681-693); they are not role=columnheader\r\n                                         (m_column_headers.js:193), which keeps them out of the leaf\r\n                                         header list (nxeHeaderLeafCells). -->\r\n                                    @for (i of indents(groupLevelCount()); track i) {\r\n                                        <td\r\n                                            class=\"nxe-command-expand nxe-datagrid-group-space nxe-cell-focus-disabled\"\r\n                                            [attr.aria-colindex]=\"i + 1\"\r\n                                            [attr.rowspan]=\"headerDepth() > 1 ? headerDepth() : null\"></td>\r\n                                    }\r\n                                    @if (masterDetailEnabled()) {\r\n                                        <!-- dx gives every cell of an 'expand' command column the\r\n                                             group-space class (m_columns_view.js:290-293), which drops\r\n                                             the column line between it and the next cell. -->\r\n                                        <td\r\n                                            class=\"nxe-command-expand nxe-datagrid-group-space\"\r\n                                            [attr.aria-colindex]=\"expandColIndex()\"\r\n                                            [attr.rowspan]=\"headerDepth() > 1 ? headerDepth() : null\"></td>\r\n                                    }\r\n                                    @if (selectColumnVisible()) {\r\n                                        <td\r\n                                            class=\"nxe-command-select\"\r\n                                            [attr.aria-colindex]=\"selectColIndex()\"\r\n                                            [attr.rowspan]=\"headerDepth() > 1 ? headerDepth() : null\">\r\n                                            @if (selectionMode() === 'multiple') {\r\n                                                <span\r\n                                                    class=\"nxe-select-checkbox nxe-grid-checkbox nxe-checkbox nxe-datagrid-checkbox-size\"\r\n                                                    role=\"checkbox\"\r\n                                                    [attr.aria-checked]=\"allSelected() ? 'true' : someSelected() ? 'mixed' : 'false'\"\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                                        <!-- dx gives a band the alignment of any column: left unless set\r\n                                             (a band has no dataType to right-align or centre it by). -->\r\n                                        <td\r\n                                            class=\"nxe-band-cell\"\r\n                                            role=\"columnheader\"\r\n                                            [class]=\"cell.column.cssClass()\"\r\n                                            [attr.colspan]=\"cell.colspan > 1 ? cell.colspan : null\"\r\n                                            [style.text-align]=\"align(cell.column)\">\r\n                                            <div class=\"nxe-datagrid-text-content\">{{ cell.column.caption() }}</div>\r\n                                        </td>\r\n                                    } @else {\r\n                                        @let hDir = sortDir(cell.column);\r\n                                        @let hHf = headerFilterVisible(cell.column);\r\n                                        @let hSortSlot = sortSlot(cell.column);\r\n                                        @let hInd = hSortSlot || hHf;\r\n                                        @let hAlign = align(cell.column);\r\n                                        <!-- dx places the indicator block before the caption when column lines are\r\n                                             on or the column is right-aligned (m_column_headers.js createCellContent,\r\n                                             m_column_state_mixin.js _applyColumnState), floated to the cell edge\r\n                                             only with column lines: right, or left for a right-aligned column. -->\r\n                                        @let hLead = hInd && (showColumnLines() || hAlign === 'right');\r\n                                        @let hFloat = showColumnLines() ? (hAlign === 'right' ? 'left' : 'right') : null;\r\n                                        <td\r\n                                            [class]=\"cell.column.cssClass()\"\r\n                                            role=\"columnheader\"\r\n                                            [attr.aria-colindex]=\"leadCellCount() + cell.leafIndex + 1\"\r\n                                            [attr.aria-sort]=\"ariaSort(cell.column)\"\r\n                                            [attr.tabindex]=\"isCellTabStop(-1, cell.leafIndex) ? 0 : -1\"\r\n                                            (focus)=\"focusCell(-1, cell.leafIndex)\"\r\n                                            [attr.rowspan]=\"cell.rowspan > 1 ? cell.rowspan : null\"\r\n                                            [style.text-align]=\"hAlign\"\r\n                                            [class.nxe-cell-focus-disabled]=\"!cell.column.allowSorting()\"\r\n                                            [class.nxe-datagrid-action]=\"sortAllowed(cell.column)\"\r\n                                            [class.nxe-datagrid-drag-action]=\"headerDraggable(cell.column)\"\r\n                                            [class.nxe-tree-select-all]=\"treeSelectAll() && cell.leafIndex === 0\"\r\n                                            (pointerdown)=\"onHeaderPointerDown(cell.column, cell.leafIndex, $event)\"\r\n                                            (click)=\"onHeaderClick(cell.column)\">\r\n                                            @if (treeSelectAll() && cell.leafIndex === 0) {\r\n                                                <!-- dx's tree list puts select-all in the first column's header. -->\r\n                                                <span\r\n                                                    class=\"nxe-select-checkbox nxe-grid-checkbox nxe-checkbox nxe-datagrid-checkbox-size\"\r\n                                                    role=\"checkbox\"\r\n                                                    [attr.aria-label]=\"t('common.selectAll')\"\r\n                                                    [attr.aria-checked]=\"allSelected() ? 'true' : someSelected() ? 'mixed' : 'false'\"\r\n                                                    [class.nxe-checked]=\"allSelected()\"\r\n                                                    [class.nxe-indeterminate]=\"someSelected() && !allSelected()\"\r\n                                                    (pointerdown)=\"$event.stopPropagation()\"\r\n                                                    (click)=\"toggleSelectAll($event)\">\r\n                                                    <span class=\"nxe-grid-checkbox-box\"></span>\r\n                                                </span>\r\n                                            }\r\n                                            @if (hLead) {\r\n                                                <ng-container\r\n                                                    [ngTemplateOutlet]=\"headerIndicators\"\r\n                                                    [ngTemplateOutletContext]=\"{ $implicit: cell.column, dir: hDir, sortSlot: hSortSlot, hf: hHf, hfFirst: hAlign === 'right', float: hFloat }\" />\r\n                                            }\r\n                                            <!-- dx _alignCaptionByCenter: a centred caption gets an unfloated,\r\n                                                 invisible copy of the indicator block on its other side, so the\r\n                                                 caption centres on the cell rather than caption + arrow centring\r\n                                                 as a group. Spacers only: no sort or funnel classes (specs and\r\n                                                 apps pick funnels by index) and no handlers - a click there falls\r\n                                                 through to the cell and sorts, as dx's hidden clone lets it. -->\r\n                                            @if (hInd && hAlign === 'center') {\r\n                                                <div\r\n                                                    class=\"nxe-column-indicators nxe-visibility-hidden\"\r\n                                                    role=\"presentation\"\r\n                                                    aria-hidden=\"true\">\r\n                                                    @if (hSortSlot) {\r\n                                                        <span\r\n                                                            class=\"nxe-column-indicator-spacer\"\r\n                                                            [class.nxe-column-indicator-spacer-none]=\"!hDir\"></span>\r\n                                                    }\r\n                                                    @if (hHf) {\r\n                                                        <span class=\"nxe-column-indicator-spacer\"></span>\r\n                                                    }\r\n                                                </div>\r\n                                            }\r\n                                            <!-- The indicator classes are load-bearing, not decorative: they gate dx's\r\n                                                 caption budget (`.dx-header-row .dx-sort-indicator{max-width:calc(100%\r\n                                                 - 17px)}` and family) and, with the alignment classes, the 3px gap to\r\n                                                 the block. dx sets alignment-left for left and centre columns and\r\n                                                 alignment-right for right and centre ones, whenever the cell has an\r\n                                                 indicator slot at all - even an unsorted, hidden one. -->\r\n                                            <div\r\n                                                class=\"nxe-datagrid-text-content\"\r\n                                                [class.nxe-text-content-alignment-left]=\"hInd && hAlign !== 'right'\"\r\n                                                [class.nxe-text-content-alignment-right]=\"hInd && hAlign !== 'left'\"\r\n                                                [class.nxe-sort-indicator]=\"hDir !== null\"\r\n                                                [class.nxe-header-filter-indicator]=\"hHf\">\r\n                                                {{ cell.column.caption() }}\r\n                                            </div>\r\n                                            @if (hInd && !hLead) {\r\n                                                <ng-container\r\n                                                    [ngTemplateOutlet]=\"headerIndicators\"\r\n                                                    [ngTemplateOutletContext]=\"{ $implicit: cell.column, dir: hDir, sortSlot: hSortSlot, hf: hHf, hfFirst: hAlign === 'right', float: null }\" />\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=\"nxe-command-edit\"\r\n                                        [attr.aria-colindex]=\"editColIndex()\"\r\n                                        [attr.rowspan]=\"headerDepth() > 1 ? headerDepth() : null\"></td>\r\n                                }\r\n                            </tr>\r\n                        }\r\n                        @if (filterRowVisible()) {\r\n                            <!-- The headers view toggles column lines on every row it renders, the\r\n                                 filter row included (m_column_headers.js:205-207). -->\r\n                            <!-- Every filter-row cell is numbered, as the headers view numbers it\r\n                                 (m_columns_view.js:681-693). -->\r\n                            <tr class=\"nxe-row nxe-datagrid-filter-row\" [class.nxe-column-lines]=\"showColumnLines()\">\r\n                                @for (i of indents(groupLevelCount()); track i) {\r\n                                    <td class=\"nxe-command-expand nxe-datagrid-group-space\" [attr.aria-colindex]=\"i + 1\"></td>\r\n                                }\r\n                                @if (masterDetailEnabled()) {\r\n                                    <td class=\"nxe-command-expand nxe-datagrid-group-space\" [attr.aria-colindex]=\"expandColIndex()\"></td>\r\n                                }\r\n                                @if (selectColumnVisible()) {\r\n                                    <td class=\"nxe-command-select\" [attr.aria-colindex]=\"selectColIndex()\"></td>\r\n                                }\r\n                                @for (col of visibleColumns(); track $index; let ci = $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\r\n                                        class=\"nxe-editor-cell\"\r\n                                        [class]=\"col.cssClass()\"\r\n                                        [attr.aria-colindex]=\"leadCellCount() + ci + 1\">\r\n                                        @if (col.allowFiltering()) {\r\n                                            @switch (frEditorKind(col)) {\r\n                                                @case ('lookup') {\r\n                                                    <select\r\n                                                        class=\"nxe-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=\"\">{{ t('common.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=\"nxe-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=\"\">{{ t('common.all') }}</option>\r\n                                                        <option value=\"true\">{{ t('grid.filterRow.true') }}</option>\r\n                                                        <option value=\"false\">{{ t('grid.filterRow.false') }}</option>\r\n                                                    </select>\r\n                                                }\r\n                                                @default {\r\n                                                    <div class=\"nxe-editor-with-menu\">\r\n                                                        <div class=\"nxe-menu nxe-menu-base\">\r\n                                                            <ul class=\"nxe-menu-horizontal\">\r\n                                                                <li>\r\n                                                                    <div\r\n                                                                        class=\"nxe-menu-item\"\r\n                                                                        [attr.title]=\"t('grid.filterRow.operation')\"\r\n                                                                        (click)=\"openFilterOpMenu(col, $event)\">\r\n                                                                        <div class=\"nxe-menu-item-content\">\r\n                                                                            <span\r\n                                                                                class=\"nxe-icon nxe-icon-filter-operation-{{ frOpIconSlug(col) }}\"></span>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </li>\r\n                                                            </ul>\r\n                                                        </div>\r\n                                                        <!-- dx sets the FIRST input's text-align to the column\r\n                                                             alignment inline, unless centre (m_filter_row.js:390-395). -->\r\n                                                        <input\r\n                                                            class=\"nxe-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                                                            [style.text-align]=\"filterCellAlign(col)\"\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=\"nxe-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=\"nxe-command-edit\" [attr.aria-colindex]=\"editColIndex()\"></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]. dx numbers\r\n                                     every cell of a rows-view row, command cells included\r\n                                     (m_columns_view.js:681-693), and the caption as the cell after the\r\n                                     toggle (m_rows_view.js:626-635, columnIndex groupIndex + 1). That\r\n                                     number can be a data column's, so dx looks group rows up with\r\n                                     `:not(.dx-group-cell)` (m_columns_view.js:942), and onCellPrepared\r\n                                     reports the caption as no column. -->\r\n                                <tr\r\n                                    class=\"nxe-row nxe-group-row\"\r\n                                    [class.nxe-column-lines]=\"showColumnLines()\"\r\n                                    [attr.aria-roledescription]=\"item.collapsed ? t('grid.collapsedRow') : t('grid.expandedRow')\">\r\n                                    @for (i of indents(item.level); track i) {\r\n                                        <td class=\"nxe-command-expand nxe-datagrid-group-space\" [attr.aria-colindex]=\"i + 1\"></td>\r\n                                    }\r\n                                    <td\r\n                                        class=\"nxe-command-expand nxe-datagrid-group-space nxe-datagrid-expand nxe-selection-disabled\"\r\n                                        [attr.aria-colindex]=\"item.level + 1\"\r\n                                        [attr.aria-label]=\"item.collapsed ? t('grid.expand') : t('grid.collapse')\"\r\n                                        (click)=\"toggleGroup(item.groupKey)\">\r\n                                        <div\r\n                                            [class.nxe-datagrid-group-opened]=\"!item.collapsed\"\r\n                                            [class.nxe-datagrid-group-closed]=\"item.collapsed\"></div>\r\n                                    </td>\r\n                                    <td\r\n                                        class=\"nxe-group-cell\"\r\n                                        [attr.aria-colindex]=\"item.level + 2\"\r\n                                        [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\r\n                                            class=\"nxe-datagrid-summary-item\"\r\n                                            [attr.aria-colindex]=\"leadCellCount() + visibleIndexOf(col) + 1\"\r\n                                            [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=\"nxe-command-edit\" [attr.aria-colindex]=\"editColIndex()\"></td>\r\n                                    }\r\n                                </tr>\r\n                            } @else if (item.kind === 'groupFooter') {\r\n                                <!-- dx's group footer: dx-datagrid-group-footer, and column lines like\r\n                                     any row the rows view renders (m_rows_view.js:222-229). Row lines are\r\n                                     data rows' only (:228); the line under a footer is the column-lines\r\n                                     rule's. -->\r\n                                <tr\r\n                                    class=\"nxe-row nxe-group-footer-row nxe-datagrid-group-footer\"\r\n                                    [class]=\"'nxe-group-footer-level-' + item.level\"\r\n                                    [class.nxe-column-lines]=\"showColumnLines()\">\r\n                                    @for (i of indents(groupLevelCount()); track i) {\r\n                                        <td class=\"nxe-command-expand nxe-datagrid-group-space\" [attr.aria-colindex]=\"i + 1\"></td>\r\n                                    }\r\n                                    @if (masterDetailEnabled()) {\r\n                                        <td class=\"nxe-command-expand nxe-datagrid-group-space\" [attr.aria-colindex]=\"expandColIndex()\"></td>\r\n                                    }\r\n                                    @if (selectColumnVisible()) {\r\n                                        <td class=\"nxe-command-select\" [attr.aria-colindex]=\"selectColIndex()\"></td>\r\n                                    }\r\n                                    @for (col of visibleColumns(); track col.dataField()) {\r\n                                        <td\r\n                                            class=\"nxe-datagrid-summary-item\"\r\n                                            [attr.aria-colindex]=\"leadCellCount() + visibleIndexOf(col) + 1\"\r\n                                            [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=\"nxe-command-edit\" [attr.aria-colindex]=\"editColIndex()\"></td>\r\n                                    }\r\n                                </tr>\r\n                            } @else {\r\n                                <tr\r\n                                    class=\"nxe-row nxe-data-row\"\r\n                                    role=\"row\"\r\n                                    [class]=\"rowClassFor(item.row)\"\r\n                                    [attr.aria-rowindex]=\"item.rowIndex + 1\"\r\n                                    [attr.aria-selected]=\"selectionMode() === 'none' ? null : isSelected(item.row)\"\r\n                                    [class.nxe-row-lines]=\"showRowLines()\"\r\n                                    [class.nxe-column-lines]=\"showColumnLines()\"\r\n                                    [class.nxe-row-alt]=\"rowAlternationEnabled() && item.rowIndex % 2 === 1\"\r\n                                    [class.nxe-selection]=\"isSelected(item.row)\"\r\n                                    [class.nxe-state-hover]=\"isHovered(item.rowIndex)\"\r\n                                    [class.nxe-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=\"nxe-command-expand nxe-datagrid-group-space\" [attr.aria-colindex]=\"i + 1\"></td>\r\n                                    }\r\n                                    @if (masterDetailEnabled()) {\r\n                                        <!-- dx reuses the group row's toggle for the detail row\r\n                                             (m_master_detail.js:33-43, m_utils.js:462-474), and any click\r\n                                             in the cell toggles (m_grouping.js:523-532 `closest('.dx-datagrid-expand')`).\r\n                                             toggleDetail stops the click there, as dx-selection-disabled does. -->\r\n                                        <td\r\n                                            class=\"nxe-command-expand nxe-datagrid-group-space nxe-datagrid-expand nxe-selection-disabled\"\r\n                                            [attr.aria-colindex]=\"expandColIndex()\"\r\n                                            [attr.aria-label]=\"isDetailExpanded(item.row) ? t('grid.collapse') : t('grid.expand')\"\r\n                                            (click)=\"toggleDetail(item.row, $event)\">\r\n                                            <div\r\n                                                [class.nxe-datagrid-group-opened]=\"isDetailExpanded(item.row)\"\r\n                                                [class.nxe-datagrid-group-closed]=\"!isDetailExpanded(item.row)\"></div>\r\n                                        </td>\r\n                                    }\r\n                                    @if (selectColumnVisible()) {\r\n                                        <td class=\"nxe-command-select\" [attr.aria-colindex]=\"selectColIndex()\">\r\n                                            <span\r\n                                                class=\"nxe-select-checkbox nxe-grid-checkbox nxe-checkbox nxe-datagrid-checkbox-size\"\r\n                                                role=\"checkbox\"\r\n                                                [attr.aria-checked]=\"isSelected(item.row)\"\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                                                role=\"gridcell\"\r\n                                                [attr.aria-colindex]=\"leadCellCount() + ci + 1\"\r\n                                                [attr.tabindex]=\"isCellTabStop(item.rowIndex, ci) ? 0 : -1\"\r\n                                                (focus)=\"focusCell(item.rowIndex, ci)\"\r\n                                                [attr.aria-roledescription]=\"\r\n                                                    editableCell(col) && (cellEditingEnabled() || rowEditingEnabled())\r\n                                                        ? t('grid.editableCell')\r\n                                                        : null\r\n                                                \"\r\n                                                [style.text-align]=\"align(col)\"\r\n                                                [attr.rowspan]=\"mergeSpan(ri, col)\"\r\n                                                [class.nxe-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                                                    <!-- dx's tree icons (dx-treelist-icon-container): one 14px slot\r\n                                                         per level, then the 14x18 toggle or, on a leaf, one more slot.\r\n                                                         Floated as dx floats it in the fixed table, so the text\r\n                                                         wraps beside it and starts flush after it. Not named\r\n                                                         nxe-treelist-*: the dx mirror would hand it to an app's\r\n                                                         newer-dx tree layout (18px slots). -->\r\n                                                    <span class=\"nxe-tree-icons\" [class.nxe-tree-icons-select]=\"showCheckboxes()\">\r\n                                                        @for (i of indents(item.level || 0); track i) {\r\n                                                            <span class=\"nxe-tree-expander-stub\"></span>\r\n                                                        }\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                                                        <!-- dx draws a tree list's row checkbox here, in the icon\r\n                                                             container after the toggle, not in a command column. -->\r\n                                                        @if (showCheckboxes()) {\r\n                                                            <span\r\n                                                                class=\"nxe-select-checkbox nxe-grid-checkbox nxe-checkbox nxe-datagrid-checkbox-size nxe-tree-checkbox\"\r\n                                                                role=\"checkbox\"\r\n                                                                [attr.aria-checked]=\"isTreeIndeterminate(item.row) ? 'mixed' : isSelected(item.row)\"\r\n                                                                [class.nxe-checked]=\"isSelected(item.row)\"\r\n                                                                [class.nxe-indeterminate]=\"isTreeIndeterminate(item.row)\"\r\n                                                                (click)=\"onCheckboxClick(item.row, $event)\">\r\n                                                                <span class=\"nxe-grid-checkbox-box\"></span>\r\n                                                            </span>\r\n                                                        }\r\n                                                    </span>\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)) {\r\n                                                    <!-- dx showEditorAlways: a boolean cell is a dx checkbox, not\r\n                                                         \"true\"/\"false\". It is read-only unless the grid edits cells\r\n                                                         and the column is editable (m_editing.js:210, 1832-1847);\r\n                                                         then one click toggles the value in place. -->\r\n                                                    <span\r\n                                                        class=\"nxe-grid-checkbox nxe-grid-checkbox-readonly nxe-checkbox nxe-datagrid-checkbox-size\"\r\n                                                        role=\"checkbox\"\r\n                                                        [class.nxe-grid-checkbox-left]=\"align(col) === 'left'\"\r\n                                                        [class.nxe-grid-checkbox-right]=\"align(col) === 'right'\"\r\n                                                        [class.nxe-checked]=\"getRaw(item.row, col.dataField()) === true\"\r\n                                                        [class.nxe-state-readonly]=\"booleanReadOnly(col)\"\r\n                                                        [attr.aria-checked]=\"getRaw(item.row, col.dataField()) === true\"\r\n                                                        [attr.aria-readonly]=\"booleanReadOnly(col) ? 'true' : null\"\r\n                                                        (click)=\"onBooleanCellClick(item.row, col, $event)\">\r\n                                                        <span class=\"nxe-grid-checkbox-box\"></span>\r\n                                                    </span>\r\n                                                } @else {\r\n                                                    <!-- In an ng-container so the text node carries no padding space:\r\n                                                         after the tree icons one would render as a 3px gap. -->\r\n                                                    <ng-container>{{ cellText(col, item.row) }}</ng-container>\r\n                                                }\r\n                                            </td>\r\n                                        }\r\n                                    }\r\n                                    @if (rowEditCommandVisible()) {\r\n                                        <td class=\"nxe-command-edit nxe-datagrid-drag-action\" [attr.aria-colindex]=\"editColIndex()\">\r\n                                            @if (isRowEditing(item.row)) {\r\n                                                <a class=\"nxe-link nxe-link-save\" (click)=\"saveRowEdit(item.row, $event)\">{{ t('grid.save') }}</a>\r\n                                                <a class=\"nxe-link nxe-link-cancel\" (click)=\"cancelRowEdit($event)\">{{ t('grid.cancel') }}</a>\r\n                                            } @else {\r\n                                                <a class=\"nxe-link nxe-link-edit\" (click)=\"startRowEdit(item.row, $event)\">{{ t('grid.edit') }}</a>\r\n                                            }\r\n                                        </td>\r\n                                    }\r\n                                </tr>\r\n                                @if (masterDetailEnabled() && isDetailExpanded(item.row)) {\r\n                                    <!-- dx's detail row takes row lines as well as column lines, and its one\r\n                                         cell is dx-master-detail-cell (m_master_detail.js:290-294, :325),\r\n                                         rendered as column 0 - so aria-colindex 1. -->\r\n                                    <tr\r\n                                        class=\"nxe-row nxe-master-detail-row\"\r\n                                        [class.nxe-row-lines]=\"showRowLines()\"\r\n                                        [class.nxe-column-lines]=\"showColumnLines()\">\r\n                                        <td class=\"nxe-master-detail-cell nxe-cell-focus-disabled\" aria-colindex=\"1\" [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                        <!-- dx's free-space row (m_rows_view.js:448-466): one cell per column, so the\r\n                             column lines run on through the space it fills. The row is\r\n                             role=\"presentation\", as dx's `_createEmptyRow` makes it, so assistive tech\r\n                             inside role=grid does not meet a row of empty gridcells; its cells take\r\n                             no role and no aria-colindex: nothing that addresses cells may count them. -->\r\n                        <tr\r\n                            role=\"presentation\"\r\n                            class=\"nxe-row nxe-freespace-row\"\r\n                            [class.nxe-column-lines]=\"showColumnLines()\"\r\n                            [style.height.px]=\"freeSpaceHeight() || null\">\r\n                            @for (i of indents(groupLevelCount()); track i) {\r\n                                <td class=\"nxe-command-expand nxe-datagrid-group-space\"></td>\r\n                            }\r\n                            @if (masterDetailEnabled()) {\r\n                                <td class=\"nxe-command-expand nxe-datagrid-group-space\"></td>\r\n                            }\r\n                            @if (selectColumnVisible()) {\r\n                                <td class=\"nxe-command-select\"></td>\r\n                            }\r\n                            @for (col of visibleColumns(); track $index) {\r\n                                <td [class]=\"col.cssClass()\"></td>\r\n                            }\r\n                            @if (rowEditCommandVisible()) {\r\n                                <td class=\"nxe-command-edit\"></td>\r\n                            }\r\n                        </tr>\r\n                    </tbody>\r\n                    @if (hasTotalFooter()) {\r\n                        <tfoot class=\"nxe-datagrid-total-footer\">\r\n                            <tr class=\"nxe-row\">\r\n                                @for (i of indents(groupLevelCount()); track i) {\r\n                                    <td class=\"nxe-command-expand nxe-datagrid-group-space\" [attr.aria-colindex]=\"i + 1\"></td>\r\n                                }\r\n                                @if (masterDetailEnabled()) {\r\n                                    <td class=\"nxe-command-expand nxe-datagrid-group-space\" [attr.aria-colindex]=\"expandColIndex()\"></td>\r\n                                }\r\n                                @if (selectColumnVisible()) {\r\n                                    <td class=\"nxe-command-select\" [attr.aria-colindex]=\"selectColIndex()\"></td>\r\n                                }\r\n                                @for (col of visibleColumns(); track col.dataField()) {\r\n                                    <td\r\n                                            class=\"nxe-datagrid-summary-item\"\r\n                                            [attr.aria-colindex]=\"leadCellCount() + visibleIndexOf(col) + 1\"\r\n                                            [style.text-align]=\"align(col)\">\r\n                                        {{ totalSums().get(col.dataField()) || '' }}\r\n                                    </td>\r\n                                }\r\n                                @if (rowEditCommandVisible()) {\r\n                                    <td class=\"nxe-command-edit\" [attr.aria-colindex]=\"editColIndex()\"></td>\r\n                                }\r\n                            </tr>\r\n                        </tfoot>\r\n                    }\r\n                </table>\r\n            </div>\r\n\r\n            @if (remoteBusy()) {\r\n                <!-- Server-side data: a request is in flight over the rows already on screen. -->\r\n                <div class=\"nxe-datagrid-loadpanel nxe-datagrid-remote-busy\" role=\"status\" [attr.aria-label]=\"t('grid.remote.loading')\">\r\n                    <span class=\"nxe-grid-spinner\"></span>\r\n                </div>\r\n            }\r\n\r\n            @if (isEmpty()) {\r\n                <!-- dx `.dx-datagrid-rowsview.dx-empty{height:100px}`: our rows view also holds the\r\n                     <thead>, so the empty body is its own box after the table. dx appends the nodata\r\n                     span to the rows view outside its scrollable (m_utils.js:206-210) and positions the\r\n                     load panel `of:` the rows view, header excluded (m_rows_view.js:1023) - both live\r\n                     in this box. The load panel can: loading() implies a null source, hence no rows.\r\n                     If the total footer is ever shown for empty data (dx m_summary.js:487-503), this\r\n                     box has to move between the <tbody> and the <tfoot>. -->\r\n                <div class=\"nxe-datagrid-empty-body\">\r\n                    @if (remoteFailed()) {\r\n                        <div class=\"nxe-datagrid-remote-error\" role=\"alert\">\r\n                            <span class=\"nxe-datagrid-remote-error-text\">{{ t('grid.remote.error') }}</span>\r\n                            <button type=\"button\" class=\"nxe-datagrid-remote-retry\" (click)=\"retryRemote()\">{{ t('grid.remote.retry') }}</button>\r\n                        </div>\r\n                    } @else if (!loading()) {\r\n                        <span class=\"nxe-datagrid-nodata\">{{ noDataText() }}</span>\r\n                    } @else {\r\n                        <div class=\"nxe-datagrid-loadpanel\"><span class=\"nxe-grid-spinner\"></span></div>\r\n                    }\r\n                </div>\r\n            }\r\n        </div>\r\n\r\n        @if (pagerVisible()) {\r\n            <!-- dx's pager (pagination/content.js) under dx's class names: the page sizes float left;\r\n                 the pages float right - the info text, then prev, the page buttons and next. dx\r\n                 renders div[role=button]s; these are real buttons with dx's labels. The prev/next\r\n                 buttons are empty: the chevron is drawn by CSS. At either end dx only takes the\r\n                 button out of the tab order (page_index_selector.js), so it keeps focus rather than\r\n                 dropping it as a disabled button would; a click there is a no-op (goToPage clamps). -->\r\n            <div\r\n                class=\"nxe-datagrid-pager nxe-pager nxe-grid-pager\"\r\n                role=\"navigation\"\r\n                [attr.aria-label]=\"pagerCmp()?.label() ?? t('grid.pager.navigation')\">\r\n                @if (pagerCmp()?.showPageSizeSelector()) {\r\n                    <div class=\"nxe-page-sizes\">\r\n                        @if (pagerCompact()) {\r\n                            @if (pageSizes().length) {\r\n                                <select class=\"nxe-pager-size\" [attr.aria-label]=\"t('grid.pager.pageSize')\" (change)=\"onPageSizeSelect($event)\">\r\n                                    @for (s of pageSizes(); track $index) {\r\n                                        <option [value]=\"s\" [selected]=\"s === effectivePageSize()\">{{ s }}</option>\r\n                                    }\r\n                                </select>\r\n                            }\r\n                        } @else {\r\n                            @for (s of pageSizes(); track $index; let first = $first) {\r\n                                <button\r\n                                    type=\"button\"\r\n                                    class=\"nxe-page-size\"\r\n                                    [class.nxe-selection]=\"s === effectivePageSize()\"\r\n                                    [class.nxe-first-child]=\"first\"\r\n                                    [attr.aria-label]=\"t('grid.pager.itemsPerPage', s)\"\r\n                                    (click)=\"changePageSize(s)\">{{ s }}</button>\r\n                            }\r\n                        }\r\n                    </div>\r\n                }\r\n                <div class=\"nxe-pages\">\r\n                    @if (pagerCmp()?.showInfo()) {\r\n                        <div class=\"nxe-info nxe-pager-info\">{{ pageInfo() }}</div>\r\n                    }\r\n                    <div class=\"nxe-page-indexes nxe-pager-pages\">\r\n                        @if (pagerNavVisible()) {\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"nxe-navigate-button nxe-prev-button nxe-pager-nav\"\r\n                                [class.nxe-button-disable]=\"currentPage() === 0\"\r\n                                [attr.aria-disabled]=\"currentPage() === 0 ? 'true' : null\"\r\n                                [attr.tabindex]=\"currentPage() === 0 ? -1 : null\"\r\n                                [attr.aria-label]=\"t('grid.pager.previous')\"\r\n                                (click)=\"prevPage()\"></button>\r\n                        }\r\n                        @for (item of pageItems(); track item.key) {\r\n                            @if (item.separator) {\r\n                                <div class=\"nxe-separator\">. . .</div>\r\n                            } @else {\r\n                                <button\r\n                                    type=\"button\"\r\n                                    class=\"nxe-page nxe-pager-page\"\r\n                                    [class.nxe-selection]=\"item.page === currentPage()\"\r\n                                    [class.nxe-active]=\"item.page === currentPage()\"\r\n                                    [attr.aria-label]=\"t('grid.pager.page', item.page + 1)\"\r\n                                    [attr.aria-current]=\"item.page === currentPage() ? 'page' : null\"\r\n                                    (click)=\"goToPage(item.page)\">{{ item.page + 1 }}</button>\r\n                            }\r\n                        }\r\n                        @if (pagerNavVisible()) {\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"nxe-navigate-button nxe-next-button nxe-pager-nav\"\r\n                                [class.nxe-button-disable]=\"currentPage() >= pageCount() - 1\"\r\n                                [attr.aria-disabled]=\"currentPage() >= pageCount() - 1 ? 'true' : null\"\r\n                                [attr.tabindex]=\"currentPage() >= pageCount() - 1 ? -1 : null\"\r\n                                [attr.aria-label]=\"t('grid.pager.next')\"\r\n                                (click)=\"nextPage()\"></button>\r\n                        }\r\n                    </div>\r\n                </div>\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=\"nxe-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 (colType(col) === 'boolean') {\r\n        <!-- dx's checkbox editor, the same box as the resting boolean cell (never the browser's\r\n             native checkbox). Cell mode toggles resting cells in place and never gets here; this\r\n             is the row being edited, and a click or Space only buffers until Save. It takes focus\r\n             as dx's dxCheckBox does (tabIndex 0, Space toggles: check_box.js:125), so Tab reaches\r\n             it with the row's other editors. -->\r\n        <span\r\n            class=\"nxe-grid-checkbox nxe-grid-checkbox-readonly nxe-checkbox nxe-datagrid-checkbox-size nxe-grid-cell-editor-check\"\r\n            role=\"checkbox\"\r\n            tabindex=\"0\"\r\n            [class.nxe-grid-checkbox-left]=\"align(col) === 'left'\"\r\n            [class.nxe-grid-checkbox-right]=\"align(col) === 'right'\"\r\n            [class.nxe-checked]=\"editorChecked(row, col)\"\r\n            [attr.aria-checked]=\"editorChecked(row, col)\"\r\n            (click)=\"toggleEditorCheck(row, col, mode, $event)\"\r\n            (keydown.space)=\"toggleEditorCheck(row, col, mode, $event)\">\r\n            <span class=\"nxe-grid-checkbox-box\"></span>\r\n        </span>\r\n    } @else {\r\n        <input\r\n            type=\"text\"\r\n            class=\"nxe-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<!-- A header cell's indicator block (dx .dx-column-indicators). dx creates the sort span first and\r\n     the funnel second; the funnel is prepended when the column is right-aligned\r\n     (m_header_filter_core.js _renderIndicator), so a right-aligned column reads [funnel][sort] and\r\n     every other [sort][funnel]. An unsorted sortable column keeps an empty `nxe-sort-none` span, as\r\n     dx does: hidden in the fixed table, measured by the best-fit pass. -->\r\n<ng-template\r\n    #headerIndicators\r\n    let-col\r\n    let-dir=\"dir\"\r\n    let-sortSlot=\"sortSlot\"\r\n    let-hf=\"hf\"\r\n    let-hfFirst=\"hfFirst\"\r\n    let-float=\"float\">\r\n    <div class=\"nxe-column-indicators\" role=\"presentation\" [style.float]=\"float\">\r\n        @for (kind of hfFirst ? ['funnel', 'sort'] : ['sort', 'funnel']; track kind) {\r\n            @if (kind === 'funnel') {\r\n                @if (hf) {\r\n                    <span\r\n                        class=\"nxe-grid-hf-icon\"\r\n                        [class.nxe-hf-active]=\"hasHeaderFilter(col)\"\r\n                        (click)=\"openHeaderFilter(col, $event)\"></span>\r\n                }\r\n            } @else if (sortSlot) {\r\n                <span\r\n                    class=\"nxe-sort\"\r\n                    [class.nxe-sort-none]=\"!dir\"\r\n                    [class.nxe-sort-up]=\"dir === 'asc'\"\r\n                    [class.nxe-sort-down]=\"dir === 'desc'\"></span>\r\n            }\r\n        }\r\n    </div>\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 nxe-datagrid\">\r\n        @for (item of frMenuOps(); track item.op) {\r\n            <div\r\n                class=\"nxe-menu-item\"\r\n                [class.nxe-menu-item-selected]=\"frMenuColumn() && frOp(frMenuColumn()!) === item.op\"\r\n                (click)=\"selectFilterOp(item.op)\">\r\n                <span class=\"nxe-icon nxe-icon-filter-operation-{{ opIconSlug(item.op) }}\"></span>\r\n                <span class=\"nxe-menu-item-text\">{{ item.label }}</span>\r\n            </div>\r\n        }\r\n        <!-- dx draws Reset with the chooser's own magnifier. -->\r\n        <div class=\"nxe-menu-item nxe-fr-reset\" (click)=\"resetFilterRow()\">\r\n            <span class=\"nxe-icon nxe-icon-filter-operation-default\"></span>\r\n            <span class=\"nxe-menu-item-text\">{{ t('grid.filterRow.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 .nxe-datagrid{height:100%;position:relative;white-space:normal;cursor:default;color:var(--nxe-ui-text, #333)}.nxe-data-grid .nxe-gridbase-container{display:flex;flex-direction:column;height:100%;line-height:inherit;min-height:inherit;max-height:inherit}.nxe-data-grid .nxe-gridbase-container>*{flex:0 0 auto}.nxe-data-grid .nxe-datagrid-rowsview{position:relative;overflow:auto;flex:1 1 auto;min-height:0;background-color:var(--nxe-ui-surface, #fff)}.nxe-data-grid .nxe-datagrid-content{display:block;position:relative;min-height:100%}.nxe-data-grid .nxe-datagrid-rowsview .nxe-datagrid-content{overflow-anchor:none}.nxe-data-grid .nxe-datagrid-rowsview.nxe-empty{display:flex;flex-direction:column;height:auto}.nxe-data-grid .nxe-datagrid-rowsview.nxe-empty>.nxe-datagrid-content{flex:none;min-height:0}.nxe-data-grid .nxe-datagrid-rowsview.nxe-empty>.nxe-datagrid-empty-body{position:sticky;inset-inline-start:0;flex:1 1 var(--nxe-ui-grid-empty-height, 100px);min-height:0}.nxe-data-grid table.nxe-datagrid-table{display:table;width:100%;table-layout:fixed;border-collapse:collapse;margin:0;overflow-x:clip}.nxe-data-grid .nxe-datagrid-content .nxe-datagrid-table{max-width:none}.nxe-data-grid .nxe-datagrid-headers{display:table-header-group;position:sticky;top:0;z-index:1;color:var(--nxe-ui-neutral-600, #757575);font-weight:400;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pinch-zoom;background:var(--nxe-ui-surface, #fff);border-bottom:0}.nxe-data-grid tbody{display:table-row-group}.nxe-data-grid .nxe-row{display:table-row}.nxe-data-grid .nxe-datagrid-rowsview tbody>.nxe-row{border-top:var(--nxe-ui-grid-line-width, 1px) solid transparent;border-bottom:var(--nxe-ui-grid-line-width, 1px) solid transparent}.nxe-data-grid .nxe-datagrid-headers>.nxe-row{border-top:0;border-bottom:0}.nxe-data-grid .nxe-datagrid-headers:before{content:none}.nxe-data-grid .nxe-datagrid-headers>.nxe-row>td{border-bottom:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-header-line-color, #ddd)}.nxe-data-grid .nxe-datagrid-rowsview.nxe-datagrid-after-headers{border-top:0}.nxe-data-grid .nxe-datagrid .nxe-row-lines>td{border-bottom:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-row-line-color, #ddd)}.nxe-data-grid .nxe-datagrid-rowsview .nxe-row.nxe-row-lines:first-child,.nxe-data-grid .nxe-datagrid-rowsview .nxe-row.nxe-row-lines:first-child>td{border-top:none}.nxe-data-grid .nxe-datagrid .nxe-column-lines>td{border-left:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-column-line-color, #ddd);border-right:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-column-line-color, #ddd)}.nxe-data-grid .nxe-datagrid .nxe-column-lines>td:first-child{border-left:none}.nxe-data-grid .nxe-datagrid .nxe-column-lines>td:last-child{border-right:none}.nxe-data-grid .nxe-datagrid-content .nxe-datagrid-table .nxe-row>td:first-child{border-left:0}.nxe-data-grid .nxe-datagrid-content .nxe-datagrid-table .nxe-row>td.nxe-datagrid-group-space{border-right:none}.nxe-data-grid .nxe-datagrid-content .nxe-datagrid-table .nxe-row>td.nxe-datagrid-group-space+td{border-left:none}.nxe-data-grid .nxe-datagrid-rowsview .nxe-row.nxe-group-row>td{border-top:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-row-line-color, #ddd);border-bottom:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-row-line-color, #ddd)}.nxe-data-grid .nxe-datagrid-rowsview .nxe-row.nxe-group-row:first-child,.nxe-data-grid .nxe-datagrid-rowsview .nxe-row.nxe-group-row:first-child>td{border-top:none}.nxe-data-grid .nxe-datagrid-rowsview .nxe-group-row.nxe-row>td{border-left-color:transparent;border-right-color:transparent}.nxe-data-grid .nxe-row.nxe-datagrid-group-footer>td{border-top:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-row-line-color, #ddd);background-color:var(--nxe-ui-surface, #fff);border-left-width:0;border-right-width:0}.nxe-data-grid .nxe-row.nxe-datagrid-group-footer.nxe-column-lines{border-bottom:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-row-line-color, #ddd)}.nxe-data-grid .nxe-datagrid-rowsview .nxe-row.nxe-edit-row>td{border-top:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-row-line-color, #ddd);border-bottom:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-row-line-color, #ddd)}.nxe-data-grid .nxe-datagrid-rowsview .nxe-row.nxe-edit-row:first-child>td{border-top-width:0;border-bottom:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-row-line-color, #ddd)}.nxe-data-grid .nxe-datagrid-rowsview .nxe-selection.nxe-row:not(.nxe-row-focused):not(.nxe-row-lines)>td,.nxe-data-grid .nxe-datagrid-rowsview .nxe-selection.nxe-row:not(.nxe-row-focused):hover:not(.nxe-row-lines)>td{border-top:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-neutral-150, #e6e6e6);border-bottom:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-neutral-150, #e6e6e6)}.nxe-data-grid .nxe-datagrid-rowsview .nxe-selection.nxe-row:not(.nxe-row-focused).nxe-column-lines>td,.nxe-data-grid .nxe-datagrid-rowsview .nxe-selection.nxe-row:not(.nxe-row-focused):hover.nxe-column-lines>td{border-left-color:var(--nxe-ui-grid-column-line-color, #ddd);border-right-color:var(--nxe-ui-grid-column-line-color, #ddd)}.nxe-data-grid .nxe-datagrid-rowsview .nxe-selection.nxe-row:not(.nxe-row-focused).nxe-row-lines>td,.nxe-data-grid .nxe-datagrid-rowsview .nxe-selection.nxe-row:not(.nxe-row-focused):hover.nxe-row-lines>td{border-bottom-color:var(--nxe-ui-grid-row-line-color, #ddd)}.nxe-data-grid .nxe-datagrid .nxe-row-alt>td{background-color:var(--nxe-ui-grid-alt-row-bg, #f5f5f5)}.nxe-data-grid .nxe-datagrid .nxe-row-alt.nxe-row:not(.nxe-row-removed){border-bottom-color:transparent}.nxe-data-grid .nxe-datagrid-borders>.nxe-gridbase-container>.nxe-datagrid-rowsview{border:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-border-color, #ddd)}.nxe-data-grid .nxe-datagrid-borders>.nxe-gridbase-container>.nxe-datagrid-header-panel{border-bottom:0}.nxe-data-grid .nxe-datagrid-borders>.nxe-gridbase-container>.nxe-grid-pager{margin-top:-1px}.nxe-data-grid .nxe-datagrid-borders>.nxe-gridbase-container>.nxe-datagrid-rowsview.nxe-last-row-border>.nxe-datagrid-content>.nxe-datagrid-table>tbody>.nxe-data-row:nth-last-child(2),.nxe-data-grid .nxe-datagrid-borders>.nxe-gridbase-container>.nxe-datagrid-rowsview.nxe-last-row-border>.nxe-datagrid-content>.nxe-datagrid-table>tbody>.nxe-data-row:nth-last-child(2)>td{border-bottom-width:0}.nxe-data-grid .nxe-datagrid-nodata{position:absolute;top:50%;left:50%;width:100%;text-align:center;transform:translate(-50%,-50%);color:var(--nxe-ui-text, #333);font-size:var(--nxe-ui-grid-nodata-font-size, 17px);opacity:.7;pointer-events:none}.nxe-data-grid .nxe-datagrid-loadpanel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--nxe-ui-scrim, rgba(255, 255, 255, .5));z-index:2}.nxe-data-grid .nxe-datagrid-remote-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--nxe-ui-space-2, 8px);color:var(--nxe-ui-invalid, #d9534f)}.nxe-data-grid .nxe-datagrid-remote-retry{padding:var(--nxe-ui-space-1, 4px) var(--nxe-ui-space-3, 12px);border:1px solid var(--nxe-ui-border, #ddd);border-radius:var(--nxe-ui-radius, 4px);background:var(--nxe-ui-surface, #fff);color:var(--nxe-ui-text, #333);font:inherit;cursor:pointer}.nxe-data-grid .nxe-grid-spinner{width:32px;height:32px;border:3px solid var(--nxe-ui-spinner-track, rgba(48, 55, 76, .2));border-top-color:var(--nxe-ui-ink-strong, #30374c);border-radius:50%;animation:nxe-grid-spin .8s linear infinite}.nxe-data-grid .nxe-header-row>td{position:relative;cursor:default;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:clip;overflow-clip-margin:4px}.nxe-data-grid .nxe-header-row>td.nxe-datagrid-action{cursor:pointer}.nxe-data-grid .nxe-header-row>td>.nxe-datagrid-text-content{display:inline-block;vertical-align:top;white-space:normal;overflow:hidden;text-overflow:ellipsis}.nxe-data-grid .nxe-datagrid-nowrap .nxe-header-row>td>.nxe-datagrid-text-content{white-space:nowrap}.nxe-data-grid .nxe-header-row>td>.nxe-datagrid-text-content:not(.nxe-sort-indicator):not(.nxe-header-filter-indicator){max-width:100%}.nxe-data-grid .nxe-header-row .nxe-sort-indicator,.nxe-data-grid .nxe-header-row .nxe-header-filter-indicator{max-width:calc(100% - 17px)}.nxe-data-grid .nxe-header-row .nxe-sort-indicator.nxe-text-content-alignment-left,.nxe-data-grid .nxe-header-row .nxe-header-filter-indicator.nxe-text-content-alignment-left{margin-right:3px}.nxe-data-grid .nxe-header-row .nxe-sort-indicator.nxe-text-content-alignment-right,.nxe-data-grid .nxe-header-row .nxe-header-filter-indicator.nxe-text-content-alignment-right{margin-left:3px}.nxe-data-grid .nxe-header-row .nxe-sort-indicator.nxe-text-content-alignment-left.nxe-text-content-alignment-right,.nxe-data-grid .nxe-header-row .nxe-header-filter-indicator.nxe-text-content-alignment-left.nxe-text-content-alignment-right{max-width:calc(100% - 34px)}.nxe-data-grid .nxe-header-row .nxe-sort-indicator.nxe-header-filter-indicator{max-width:calc(100% - 31px)}.nxe-data-grid .nxe-header-row .nxe-sort-indicator.nxe-header-filter-indicator.nxe-text-content-alignment-left.nxe-text-content-alignment-right{max-width:calc(100% - 62px)}.nxe-data-grid .nxe-column-indicators{display:inline-block;vertical-align:top;white-space:nowrap;scale:var(--nxe-ui-grid-indicator-scale, 1);padding-top:var(--nxe-ui-grid-indicator-offset, 0px)}.nxe-data-grid .nxe-column-indicators.nxe-visibility-hidden{visibility:hidden}.nxe-data-grid .nxe-column-indicator-spacer{display:inline-block;width:14px;height:14px;vertical-align:top}.nxe-data-grid .nxe-datagrid-table-fixed .nxe-column-indicators .nxe-sort.nxe-sort-none,.nxe-data-grid .nxe-datagrid-table-fixed .nxe-column-indicators .nxe-column-indicator-spacer-none{display:none}.nxe-data-grid .nxe-datagrid-best-fit .nxe-column-indicators{float:none!important}.nxe-data-grid .nxe-datagrid-best-fit .nxe-column-indicators>span{width:14px}.nxe-data-grid .nxe-datagrid-best-fit .nxe-column-indicators .nxe-sort.nxe-sort-none,.nxe-data-grid .nxe-datagrid-best-fit .nxe-column-indicators .nxe-column-indicator-spacer-none{display:inline-block!important}.nxe-data-grid .nxe-datagrid-best-fit .nxe-header-row .nxe-datagrid-text-content{max-width:none!important}.nxe-data-grid .nxe-datagrid-best-fit .nxe-text-content-alignment-left{margin-right:3px}.nxe-data-grid .nxe-datagrid-best-fit .nxe-text-content-alignment-right{margin-left:3px}.nxe-data-grid .nxe-sort{display:inline-block;position:relative;width:14px;height:14px;vertical-align:top}.nxe-data-grid .nxe-sort:after{content:\"\";position:absolute;left:0;top:0;width:14px;height:14px;background-color:currentColor}@media(forced-colors:active){.nxe-data-grid .nxe-sort:after{forced-color-adjust:none;background-color:CanvasText}}.nxe-data-grid .nxe-sort.nxe-sort-up:after{clip-path:polygon(6.5px 0,9px 3px,7px 3px,7px 14px,6px 14px,6px 3px,4px 3px)}.nxe-data-grid .nxe-sort.nxe-sort-down:after{clip-path:polygon(6px 0,7px 0,7px 11px,9px 11px,6.5px 14px,4px 11px,6px 11px)}.nxe-data-grid .nxe-sort.nxe-sort-none:after{content:none}.nxe-data-grid .nxe-datagrid-group-panel .nxe-sort{color:var(--nxe-ui-neutral-600, #757575)}.nxe-data-grid .nxe-datagrid-group-panel .nxe-group-panel-item .nxe-sort{margin-left:6px}.nxe-data-grid .nxe-grid-hf-icon{display:inline-block;position:relative;width:14px;height:14px;cursor:pointer;vertical-align:top;opacity:.5}.nxe-data-grid .nxe-grid-hf-icon:before{content:\"\";position:absolute;inset:0;background-color:var(--nxe-ui-neutral-600, #757575);clip-path:polygon(0 0,14px 0,14px 3px,9px 8px,9px 14px,5px 14px,5px 8px,0 3px)}@media(forced-colors:active){.nxe-data-grid .nxe-grid-hf-icon:before{forced-color-adjust:none;background-color:CanvasText}}.nxe-data-grid .nxe-grid-hf-icon:after{content:\"\";position:absolute;inset:0;margin:-7px}.nxe-data-grid .nxe-grid-hf-icon.nxe-hf-active{opacity:1}.nxe-data-grid .nxe-grid-pager{display:block;flex:none;overflow:hidden;width:100%;padding:9px 0;border-top:1px solid var(--nxe-ui-grid-border-color, #ddd);color:var(--nxe-ui-text, #333);line-height:normal;-webkit-user-select:none;user-select:none}.nxe-data-grid .nxe-grid-pager .nxe-page-sizes{float:left}.nxe-data-grid .nxe-grid-pager .nxe-pages{float:right;white-space:nowrap}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-info{display:inline-block;margin-right:9px;opacity:.7}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-page-indexes{display:inline-block}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-navigate-button,.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-page,.nxe-data-grid .nxe-grid-pager .nxe-page-sizes .nxe-page-size{appearance:none;margin:0;background:transparent;color:inherit;font:inherit;text-align:center;outline:0;cursor:pointer}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-navigate-button:focus-visible,.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-page:focus-visible,.nxe-data-grid .nxe-grid-pager .nxe-page-sizes .nxe-page-size:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--nxe-ui-focus-ring-color, #5c95c5);outline-offset:-2px}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-page{display:inline-block;margin:0 1px 0 5px;padding:7px 9px 8px;border:1px solid transparent;border-radius:3px}.nxe-data-grid .nxe-grid-pager .nxe-page-sizes .nxe-page-size{display:inline-block;margin:0 1px 0 4px;padding:7px 9px 8px 10px;border:1px solid transparent;border-radius:3px}.nxe-data-grid .nxe-grid-pager .nxe-page-sizes .nxe-page-size.nxe-first-child,.nxe-data-grid .nxe-grid-pager .nxe-page-sizes .nxe-page-size:first-child{margin-left:1px}.nxe-data-grid .nxe-grid-pager .nxe-page-sizes .nxe-selection,.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-selection{cursor:inherit;text-shadow:none;color:var(--nxe-ui-text, #333);border-color:transparent;background-color:var(--nxe-ui-neutral-230, #d4d4d4)}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-separator{display:inline-block;padding:0 8px}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-navigate-button{position:relative;display:inline-block;box-sizing:content-box;width:9px;height:17px;padding:9px 13px;border:0;vertical-align:top}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-navigate-button:before{content:\"\";position:absolute;display:block;box-sizing:border-box;top:50%;left:50%;width:21px;height:21px;margin:-10.5px 0 0 -10.5px;background-color:currentColor}@media(forced-colors:active){.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-navigate-button:before{forced-color-adjust:none;background-color:CanvasText}}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-navigate-button.nxe-button-disable{opacity:.3;cursor:inherit}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-prev-button:before{clip-path:polygon(5.75px 10.25px,13.75px 2.25px,15.25px 3.75px,8.75px 10.25px,15.25px 16.75px,13.75px 18.25px)}.nxe-data-grid .nxe-grid-pager .nxe-pages .nxe-next-button:before{clip-path:polygon(15.25px 10.25px,7.25px 2.25px,5.75px 3.75px,12.25px 10.25px,5.75px 16.75px,7.25px 18.25px)}.nxe-data-grid .nxe-grid-pager .nxe-pager-size{padding:2px 6px;border:1px solid var(--nxe-ui-border, #ddd);border-radius:3px;font:inherit}.nxe-data-grid .nxe-datagrid-header-panel{padding:.5rem .75rem;text-align:left;border-bottom:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-border, #ddd)}.nxe-data-grid .nxe-datagrid-group-panel{display:flex;align-items:center;width:100%;min-height:36px;white-space:nowrap;font-size:var(--nxe-ui-font-size, 14px);touch-action:pinch-zoom}.nxe-data-grid .nxe-datagrid-group-panel .nxe-group-panel-message{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--nxe-ui-neutral-600, #757575);font-weight:400;padding:7px;border-top:1px solid transparent;border-bottom:1px solid transparent;line-height:1.2858}.nxe-data-grid .nxe-datagrid-group-panel .nxe-group-panel-item{display:inline-block;min-width:30px;white-space:nowrap;margin-right:10px;color:var(--nxe-ui-neutral-600, #757575);font-weight:400;border:1px solid var(--nxe-ui-border, #ddd);padding:7px}.nxe-data-grid .nxe-datagrid-group-panel .nxe-block-separator{position:relative;margin-right:10px;border-radius:3px;background-color:var(--nxe-ui-accent, #337ab7)}.nxe-data-grid .nxe-tree-icons{display:inline-block;float:left;white-space:nowrap;vertical-align:top;line-height:1}.nxe-data-grid .nxe-tree-expander,.nxe-data-grid .nxe-tree-expander-stub{display:inline-block;position:relative;width:14px;height:14px;vertical-align:top}.nxe-data-grid .nxe-tree-icons-select{position:relative;padding-right:23px}.nxe-data-grid .nxe-tree-icons .nxe-tree-checkbox{position:absolute;top:50%;right:7px;margin:-8px 0 0}.nxe-data-grid .nxe-header-row>.nxe-tree-select-all{position:relative;padding-left:44px}.nxe-data-grid .nxe-header-row>.nxe-tree-select-all>.nxe-grid-checkbox{position:absolute;left:21px;margin:1px 0 0}.nxe-data-grid .nxe-tree-expander{height:18px;margin-right:4px;color:var(--nxe-ui-neutral-450, #959595);cursor:pointer}.nxe-data-grid .nxe-tree-expander:before{content:\"\";position:absolute;left:0;top:8px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor}.nxe-data-grid .nxe-tree-expander.nxe-collapsed:before{left:1px;top:6px;border-top:4px solid transparent;border-right:0;border-bottom:4px solid transparent;border-left:4px solid currentColor}.nxe-data-grid .nxe-group-row{font-weight:700;color:var(--nxe-ui-grid-group-row-color, #222)}.nxe-data-grid .nxe-group-row>td{background-color:var(--nxe-ui-neutral-60, #f7f7f7)}.nxe-data-grid .nxe-group-row>td.nxe-group-cell{font-weight:700}.nxe-data-grid .nxe-group-row>td.nxe-datagrid-summary-item,.nxe-data-grid .nxe-group-footer-row>td.nxe-datagrid-summary-item{font-weight:700;color:var(--nxe-ui-grid-summary-color, rgba(51, 51, 51, .7))}.nxe-data-grid .nxe-datagrid-group-opened,.nxe-data-grid .nxe-datagrid-group-closed{display:block;position:relative;width:100%;height:18px;padding:0;color:var(--nxe-ui-neutral-450, #959595);cursor:pointer}.nxe-data-grid .nxe-datagrid-group-opened:before,.nxe-data-grid .nxe-datagrid-group-closed:before{content:\"\"!important;position:absolute;left:50%;right:auto;width:0;height:0}.nxe-data-grid .nxe-datagrid-group-opened:before{top:7px;margin-left:-4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor}.nxe-data-grid .nxe-datagrid-group-closed:before{top:5px;margin-left:-2px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:4px solid currentColor}.nxe-data-grid .nxe-datagrid-total-footer{position:relative}.nxe-data-grid .nxe-datagrid-total-footer>tr>td,.nxe-data-grid tfoot.nxe-datagrid-total-footer td{border-top:1px solid var(--nxe-ui-border, #ddd);padding:6px 4px;font-weight:700;color:var(--nxe-ui-neutral-450, rgb(149, 149, 149))}.nxe-data-grid .nxe-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 var(--nxe-ui-border, #ddd);border-radius:2px;font:inherit;color:var(--nxe-ui-text, #333);outline:none}.nxe-data-grid .nxe-grid-filter-input:focus{border-color:var(--nxe-ui-ink-strong, #30374c)}.nxe-data-grid .nxe-datagrid-filter-row select.nxe-grid-filter-input{appearance:none;background:var(--nxe-ui-surface, #fff) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4'%3E%3Cpath d='M0 0h8L4 4z' fill='%23333'/%3E%3C/svg%3E\") no-repeat right 12px center/8px 4px;padding-right:34px!important}.nxe-data-grid .nxe-command-select{width:40px;min-width:40px;max-width:40px;text-align:center;vertical-align:middle}.nxe-data-grid .nxe-grid-checkbox{display:block;width:16px;margin:0 auto;padding-bottom:2px;line-height:0;cursor:pointer}.nxe-data-grid .nxe-grid-checkbox.nxe-grid-checkbox-left{margin-left:0}.nxe-data-grid .nxe-grid-checkbox.nxe-grid-checkbox-right{margin-right:0}.nxe-data-grid .nxe-grid-checkbox:focus{outline:none}.nxe-data-grid .nxe-grid-checkbox:focus .nxe-grid-checkbox-box{border-color:var(--nxe-ui-accent, #337ab7)}.nxe-data-grid .nxe-grid-checkbox .nxe-grid-checkbox-box{display:block;position:relative;width:16px;height:16px;box-sizing:border-box;border:1px solid var(--nxe-ui-border, #ddd);border-radius:2px;background:var(--nxe-ui-surface, #fff)}.nxe-data-grid .nxe-grid-checkbox:not(.nxe-state-readonly):hover .nxe-grid-checkbox-box{border-color:var(--nxe-ui-checkbox-hover-border, #265a87)}.nxe-data-grid .nxe-grid-checkbox.nxe-checked .nxe-grid-checkbox-box:after{content:\"\";position:absolute;inset:-1px;background-color:var(--nxe-ui-accent, #337ab7);clip-path:polygon(6.75px 12px,2.5px 7.75px,3.5px 6.75px,6.75px 10px,12.75px 4px,13.75px 5px)}@media(forced-colors:active){.nxe-data-grid .nxe-grid-checkbox.nxe-checked .nxe-grid-checkbox-box:after{forced-color-adjust:none;background-color:CanvasText}}.nxe-data-grid .nxe-grid-checkbox.nxe-indeterminate .nxe-grid-checkbox-box:after{content:\"\";position:absolute;left:4px;top:4px;width:6px;height:6px;background-color:var(--nxe-ui-accent, #337ab7)}@media(forced-colors:active){.nxe-data-grid .nxe-grid-checkbox.nxe-indeterminate .nxe-grid-checkbox-box:after{forced-color-adjust:none;background-color:CanvasText}}.nxe-data-grid .nxe-grid-checkbox.nxe-state-readonly{cursor:default}.nxe-data-grid .nxe-grid-checkbox.nxe-state-readonly .nxe-grid-checkbox-box{border-color:var(--nxe-ui-neutral-80, #f4f4f4);background-color:var(--nxe-ui-surface, #fff)}@keyframes nxe-grid-spin{to{transform:rotate(360deg)}}:where(.nxe-data-grid .nxe-row)>td{padding:var(--nxe-ui-grid-cell-padding, 7px);vertical-align:var(--nxe-ui-grid-cell-vertical-align, middle)}:where(.nxe-data-grid .nxe-row)>td:first-child{padding-left:var(--nxe-ui-grid-edge-padding, var(--nxe-ui-grid-cell-padding, 7px))}:where(.nxe-data-grid .nxe-row)>td:last-child{padding-right:var(--nxe-ui-grid-edge-padding, var(--nxe-ui-grid-cell-padding, 7px))}:where(.nxe-data-grid) .nxe-header-row{background-color:var(--nxe-ui-grid-header-bg, transparent);color:var(--nxe-ui-grid-header-color, inherit)}.nxe-datagrid-rowsview .nxe-row{border-top:1px solid transparent;border-bottom:1px solid transparent}.nxe-datagrid-rowsview .nxe-datagrid-table .nxe-row.nxe-freespace-row,.nxe-datagrid-rowsview .nxe-datagrid-table .nxe-row.nxe-virtual-row{border-top:0;border-bottom:0}.nxe-datagrid-rowsview .nxe-datagrid-table .nxe-row.nxe-freespace-row>td,.nxe-datagrid-rowsview .nxe-datagrid-table .nxe-row.nxe-virtual-row>td{padding-top:0;padding-bottom:0}.nxe-datagrid-nowrap{white-space:nowrap}.nxe-datagrid-rowsview :where(tbody)>.nxe-row>td{overflow:hidden;text-overflow:ellipsis}.nxe-datagrid-rowsview .nxe-selection.nxe-row:not(.nxe-row-focused)>td,.nxe-datagrid-rowsview .nxe-selection.nxe-row:not(.nxe-row-focused):hover>td{background-color:var(--nxe-ui-neutral-150, #e6e6e6);color:var(--nxe-ui-text, #333)}.nxe-data-grid .nxe-data-row>td.nxe-editor-cell input:not([type=hidden]){text-align:inherit}.nxe-datagrid-content .nxe-datagrid-table .nxe-row .nxe-command-expand{padding:0;width:30px;min-width:30px;max-width:30px;-webkit-user-select:none;user-select:none}.nxe-datagrid-table .nxe-row .nxe-command-expand.nxe-datagrid-group-space{padding-top:var(--nxe-ui-grid-expand-offset, 7px)}.nxe-datagrid-content .nxe-datagrid-table .nxe-row>td.nxe-datagrid-group-space{vertical-align:top}.nxe-datagrid-content .nxe-datagrid-table .nxe-row .nxe-command-select{padding:0}.nxe-datagrid-rowsview .nxe-master-detail-row>.nxe-master-detail-cell{padding:20px}.nxe-datagrid-rowsview .nxe-master-detail-row .nxe-master-detail-cell:not(.nxe-row-lines){border-top:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-row-line-color, #ddd);border-bottom:var(--nxe-ui-grid-line-width, 1px) solid var(--nxe-ui-grid-row-line-color, #ddd)}.nxe-datagrid-rowsview .nxe-master-detail-row:not(.nxe-datagrid-edit-form) .nxe-master-detail-cell{background-color:var(--nxe-ui-neutral-50, #fafafa)}.nxe-grid-cell-editor{width:100%;box-sizing:border-box;border:1px solid var(--nxe-ui-accent, #337ab7);padding:2px 4px;font:inherit;background:var(--nxe-ui-surface, #fff);outline:none}.nxe-data-grid .nxe-command-edit{text-align:center;white-space:nowrap}.nxe-datagrid .nxe-link{text-decoration:underline;cursor:pointer;color:var(--nxe-ui-accent, #337ab7)}.nxe-datagrid-content .nxe-datagrid-table .nxe-row .nxe-command-edit .nxe-link{display:inline-block}.nxe-datagrid .nxe-datagrid-content .nxe-datagrid-table .nxe-row .nxe-command-edit .nxe-link:not(.nxe-link-icon){margin:0 2px;min-width:20px}.nxe-data-row.nxe-state-hover:not(.nxe-selection):not(.nxe-row-modified):not(.nxe-row-inserted):not(.nxe-row-removed):not(.nxe-edit-row)>td:not(.nxe-focused) .nxe-link,.nxe-datagrid-rowsview .nxe-selection.nxe-row:hover>td .nxe-link,.nxe-datagrid-rowsview .nxe-selection>td .nxe-link{color:inherit}.nxe-data-grid .nxe-header-row td.nxe-datagrid-drag-action,.nxe-data-grid .nxe-group-panel-item{touch-action:none}.nxe-data-grid .nxe-drag-source{opacity:.5}.nxe-data-grid .nxe-datagrid-filter-row .nxe-menu ul{list-style:none;margin:0;padding:0}.nxe-data-grid .nxe-datagrid-filter-row .nxe-editor-with-menu{display:flex;position:relative}.nxe-data-grid .nxe-datagrid-filter-row .nxe-editor-with-menu>.nxe-menu{position:absolute;top:0;left:0;bottom:0;height:auto;z-index:1;cursor:pointer}.nxe-data-grid .nxe-datagrid-filter-row .nxe-editor-with-menu>.nxe-menu ul,.nxe-data-grid .nxe-datagrid-filter-row .nxe-editor-with-menu>.nxe-menu li{height:100%}.nxe-data-grid .nxe-datagrid-filter-row .nxe-editor-with-menu>.nxe-menu .nxe-menu-item{display:flex;align-items:center;box-sizing:border-box;height:100%;padding:1px 8px 0}.nxe-data-grid .nxe-datagrid-filter-row .nxe-editor-with-menu>.nxe-menu .nxe-menu-item-content{display:flex;align-items:center;padding:0}.nxe-data-grid .nxe-datagrid-filter-row .nxe-editor-with-menu .nxe-grid-filter-input{flex:1 1 0;min-width:0}.nxe-data-grid .nxe-datagrid-filter-row .nxe-editor-with-menu>.nxe-grid-filter-input:not(.nxe-fr-second){padding-left:32px!important}.nxe-data-grid .nxe-datagrid-filter-row .nxe-editor-with-menu .nxe-fr-second{padding-left:4px!important;border-left:1px solid var(--nxe-ui-border, #ddd)}.nxe-data-grid .nxe-datagrid-filter-row .nxe-menu-item-content .nxe-icon,.nxe-fr-op-menu .nxe-menu-item .nxe-icon{display:block;flex:0 0 14px;width:14px;height:14px;margin:0;padding:0;font-size:0;line-height:0;color:var(--nxe-ui-neutral-500, #898989);background-color:currentColor;-webkit-mask:var(--nxe-ui-grid-fr-op-glyph, linear-gradient(transparent, transparent)) center/14px 14px no-repeat;mask:var(--nxe-ui-grid-fr-op-glyph, linear-gradient(transparent, transparent)) center/14px 14px no-repeat}@media(forced-colors:active){.nxe-data-grid .nxe-datagrid-filter-row .nxe-menu-item-content .nxe-icon,.nxe-fr-op-menu .nxe-menu-item .nxe-icon{forced-color-adjust:none;background-color:CanvasText}}.nxe-data-grid .nxe-datagrid-filter-row .nxe-menu-item-content .nxe-icon:not(.nxe-icon-filter-operation-default),.nxe-fr-op-menu .nxe-menu-item .nxe-icon:not(.nxe-icon-filter-operation-default){position:relative;top:-1px}.nxe-data-grid .nxe-datagrid-filter-row .nxe-menu-item-content .nxe-icon:before,.nxe-fr-op-menu .nxe-menu-item .nxe-icon:before{content:none}.nxe-icon-filter-operation-default{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='5.5' cy='5.5' r='4'/%3E%3Cpath d='M8.5 8.5l4 4'/%3E%3C/g%3E%3C/svg%3E\")}.nxe-icon-filter-operation-contains{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cmask id='m'%3E%3Crect width='14' height='14' fill='%23fff'/%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='7' cy='9.25' r='1.75'/%3E%3Cpath d='M5.25 3.5v8'/%3E%3C/g%3E%3C/mask%3E%3Crect x='4.5' y='2.5' width='5' height='9.5' mask='url(%23m)'/%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='2.25' cy='9.25' r='1.75'/%3E%3Cpath d='M4 7v4.5'/%3E%3Cpath d='M13.4 7.9A1.75 1.75 0 1 0 13.4 10.6'/%3E%3C/g%3E%3C/svg%3E\")}.nxe-icon-filter-operation-not-contains{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cmask id='m'%3E%3Crect width='14' height='14' fill='%23fff'/%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='2.25' cy='9.25' r='1.75'/%3E%3Cpath d='M4 7v4.5'/%3E%3Ccircle cx='7' cy='9.25' r='1.75'/%3E%3Cpath d='M5.25 3.5v8'/%3E%3Cpath d='M13.4 7.9A1.75 1.75 0 1 0 13.4 10.6'/%3E%3C/g%3E%3Crect y='8.75' width='14' height='1'/%3E%3C/mask%3E%3Crect x='0' y='2.5' width='14' height='9.5' mask='url(%23m)'/%3E%3C/svg%3E\")}.nxe-icon-filter-operation-starts-with{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cmask id='m'%3E%3Crect width='14' height='14' fill='%23fff'/%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='2.25' cy='9.25' r='1.75'/%3E%3Cpath d='M4 7v4.5'/%3E%3Ccircle cx='7' cy='9.25' r='1.75'/%3E%3Cpath d='M5.25 3.5v8'/%3E%3C/g%3E%3C/mask%3E%3Crect x='0' y='2.5' width='9.5' height='9.5' mask='url(%23m)'/%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath d='M13.4 7.9A1.75 1.75 0 1 0 13.4 10.6'/%3E%3C/g%3E%3C/svg%3E\")}.nxe-icon-filter-operation-ends-with{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='2.25' cy='9.25' r='1.75'/%3E%3Cpath d='M4 7v4.5'/%3E%3C/g%3E%3Cmask id='m'%3E%3Crect width='14' height='14' fill='%23fff'/%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='7' cy='9.25' r='1.75'/%3E%3Cpath d='M5.25 3.5v8'/%3E%3Cpath d='M13.4 7.9A1.75 1.75 0 1 0 13.4 10.6'/%3E%3C/g%3E%3C/mask%3E%3Crect x='4.5' y='2.5' width='9.5' height='9.5' mask='url(%23m)'/%3E%3C/svg%3E\")}.nxe-icon-filter-operation-equals{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 5h10v1H2zM2 8h10v1H2z'/%3E%3C/svg%3E\")}.nxe-icon-filter-operation-not-equals{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 5h10v1H2zM2 8h10v1H2zM9.3 2h1.4l-6 10H3.3z'/%3E%3C/svg%3E\")}.nxe-icon-filter-operation-less{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M10.75 3.5 3.75 7l7 3.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E\")}.nxe-icon-filter-operation-greater{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.25 3.5l7 3.5-7 3.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E\")}.nxe-icon-filter-operation-less-equal{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M10.75 2 3.75 5.5l7 3.5M3.75 8.5l7 3.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E\")}.nxe-icon-filter-operation-greater-equal{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.25 2l7 3.5-7 3.5M10.25 8.5l-7 3.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E\")}.nxe-icon-filter-operation-between{--nxe-ui-grid-fr-op-glyph: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 5h1v5H2zM11 5h1v5h-1zM3 7h8v1H3z'/%3E%3C/svg%3E\")}.nxe-fr-op-menu{background:var(--nxe-ui-surface, #fff);border:1px solid var(--nxe-ui-border, #ddd);box-shadow:var(--nxe-ui-shadow-sm, 0 2px 6px rgba(0, 0, 0, .15));padding:4px 0;min-width:180px}.nxe-fr-op-menu .nxe-menu-item{display:flex;align-items:center;gap:5px;box-sizing:border-box;height:31px;padding:0 24px 0 5px;cursor:pointer;color:var(--nxe-ui-text, #333)}.nxe-fr-op-menu .nxe-menu-item:hover{background:var(--nxe-ui-neutral-100, #f0f0f0)}.nxe-fr-op-menu .nxe-menu-item.nxe-menu-item-selected{background:var(--nxe-ui-neutral-150, #e6e6e6)}.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:var(--nxe-ui-accent, #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 }] }], resizeFillsGridInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeFillsGrid", required: false }] }], remoteOperations: [{ type: i0.Input, args: [{ isSignal: true, alias: "remoteOperations", required: false }] }], pageIndexModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }], pageSizeModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], sortModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], optionsChange: [{ type: i0.Output, args: ["optionsChange"] }], syncLookupFilterValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncLookupFilterValues", required: false }] }], columnMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnMinWidth", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", 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
@@ -4141,5 +6155,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
  * 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 };
+export { NXE_HF_BLANKS, NXE_REMOTE_DEFAULT_PAGE_SIZE, NxeColumnComponent, NxeDataGridComponent, NxeDragGesture, NxeEditingComponent, NxeFilterRowComponent, NxeGestureClickSuppression, NxeGridDragController, NxeGroupItemComponent, NxeGroupPanelComponent, NxeGroupingComponent, NxeHeaderFilterComponent, NxeHeaderFilterModel, NxeHeaderFilterPanelComponent, NxeMasterDetailComponent, NxePagerComponent, NxePaginatorComponent, NxePagingComponent, NxeRemoteDataSource, NxeScrollingComponent, NxeSelectionComponent, NxeSummaryComponent, NxeTotalItemComponent, exportDataGrid, exportNxeGridToExcel, nxeDatePattern, nxeDefaultFormat, nxeExcelNumFmt, nxeExcelNumberMask, nxeFilterAnd, nxeFilterOr, nxeFlattenFilter, nxeFormatNumberValue, nxeHfKey, nxeIsStoreLike, nxeLoadOptions, nxeNumberMask, nxeNumberValue, nxeSameQuery, nxeValueDataType, openNxeHeaderFilterOverlay };
 //# sourceMappingURL=nexterajs-ui-grid.mjs.map