@nexterajs/ui 0.0.2 → 0.1.0

package/fesm2022/nexterajs-ui-grid.mjs

@@ -1,12 +1,15 @@
 import { NXE_EN_US_SEPARATORS, formatNumber, parseNumberFormat, parseDateValue, formatDisplay, NXE_NUMBER_SEPARATORS } from '@nexterajs/ui/intl';
 import * as i0 from '@angular/core';
-import { input, ViewEncapsulation, ChangeDetectionStrategy, Component, contentChildren, contentChild, computed, signal, output, viewChild, Directive, model, inject, ElementRef, ViewContainerRef, NgZone, DestroyRef, EventEmitter, linkedSignal, afterRenderEffect, untracked, afterNextRender, 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, nxeResolveExpr, nxeResolveText } 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
@@ -196,7 +199,7 @@ function nxeNumberValue(raw) {
  * 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, separators = NXE_EN_US_SEPARATORS) {
+function nxeDefaultFormat(dataType, format, raw, separators = NXE_EN_US_SEPARATORS, locale) {
     if (raw == null || raw === '') {
         return '';
     }
@@ -207,7 +210,7 @@ function nxeDefaultFormat(dataType, format, raw, separators = NXE_EN_US_SEPARATO
         }
         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 ? '✓' : '';
@@ -898,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 */ []));
@@ -914,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) {
@@ -940,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)),
                 });
             }
         }
@@ -999,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()) {
@@ -1018,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))),
@@ -1190,6 +1204,8 @@ class NxeHeaderFilterModel {
  * 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
@@ -1212,11 +1228,11 @@ class NxeHeaderFilterPanelComponent {
         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: "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            placeholder=\"Search\"\r\n            aria-label=\"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                aria-label=\"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>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 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()\">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. 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:#337ab766}.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:#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 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 });
+    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: '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            placeholder=\"Search\"\r\n            aria-label=\"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                aria-label=\"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>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 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()\">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. 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:#337ab766}.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:#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 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"] }]
+            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. */
@@ -1427,7 +1443,7 @@ class NxePagerComponent {
     infoText = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "infoText" }] : /* istanbul ignore next */ []));
     /** dx `pager.label`: the pager's accessible name. */
-    label = input('Page navigation', /* @ts-ignore */
+    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 }, 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 });
@@ -1672,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;
@@ -1720,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,
@@ -1736,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');
@@ -1762,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;
         }
@@ -1798,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;
@@ -1807,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() {
@@ -1824,98 +2349,38 @@ 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');
+}
 /**
- * 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.
+ * 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 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;
+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';
         }
-        else {
-            start = pageIndex - 1;
+        if (state !== 'none') {
+            out.set(node.key, state);
         }
-        // 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] : [];
+        return state;
+    };
+    roots.forEach((r) => walk(r, false));
+    return out;
 }
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /** Classify a rendered `<tr>` for dx's `rowType`, or null for rows dx does not report. */
 function nxeRowTypeOf(tr) {
     const c = tr.classList;
@@ -1993,6 +2458,11 @@ class NxeDataGridComponent {
     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,
@@ -2009,6 +2479,7 @@ class NxeDataGridComponent {
         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),
@@ -2055,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 */
@@ -2073,11 +2549,19 @@ 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 */ []));
+    /**
+     * 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
@@ -2096,8 +2580,37 @@ class NxeDataGridComponent {
     ...(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.
@@ -2121,7 +2634,7 @@ class NxeDataGridComponent {
     }, /* @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 */ []));
@@ -2251,6 +2764,11 @@ class NxeDataGridComponent {
         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;
@@ -2263,15 +2781,25 @@ class NxeDataGridComponent {
      * 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(() => this.pagingCmp()?.pageIndex() ?? 0, /* @ts-ignore */
+    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());
@@ -2304,7 +2832,7 @@ class NxeDataGridComponent {
             };
         }),
         getVisibleRows: () => this.displayRows(),
-        totalCount: () => this.displayRows().length,
+        totalCount: () => this.remote()?.totalCount() ?? this.displayRows().length,
         getRootNode: () => ({
             key: undefined,
             data: undefined,
@@ -2320,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);
@@ -2330,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'));
                 }
@@ -2371,6 +2899,18 @@ 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();
@@ -2465,7 +3005,7 @@ class NxeDataGridComponent {
             return;
         }
         const cols = this.visibleColumns();
-        const lead = this.groupLevelCount() + (this.masterDetailEnabled() ? 1 : 0) + (this.showCheckboxes() ? 1 : 0);
+        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);
@@ -2507,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);
@@ -2562,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%';
@@ -2604,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)));
         }
@@ -2627,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) {
@@ -2672,20 +3301,53 @@ 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 ? affected : [], selecting ? [] : affected);
+        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.dataSource() ?? []).filter((r) => keySet.has(this.rowKey(r)));
+        const data = this.sourceRows().filter((r) => keySet.has(this.rowKey(r)));
         this.onSelectionChanged.emit({
             selectedRowsData: data,
             selectedRowKeys: allKeys,
@@ -2731,24 +3393,308 @@ class NxeDataGridComponent {
         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, []);
+        }
+    }
+    emitRemoteSelectionChanged(keys, added, removed) {
+        this.onSelectionChanged.emit({
+            selectedRowsData: this.selectedRowsData(),
+            selectedRowKeys: keys,
+            currentSelectedRowKeys: added,
+            currentDeselectedRowKeys: removed,
+            component: this.facade,
+            element: this.elementRef.nativeElement,
+        });
+    }
     // --- 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(() => Math.max(0, Math.min(this.pageIndex(), this.pageCount() - 1)), /* @ts-ignore */
+    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();
@@ -2801,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();
@@ -3036,6 +3982,9 @@ class NxeDataGridComponent {
             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 });
         }
     }
@@ -3048,12 +3997,16 @@ class NxeDataGridComponent {
     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));
     }
     /** dx's info text, `Page {0} of {1} ({2} items)` unless `infoText` says otherwise (pagination/info.js). */
-    pageInfo = computed(() => nxePagerInfoText(this.pagerCmp()?.infoText() ?? NXE_PAGER_INFO_TEXT, this.currentPage(), this.pageCount(), this.displayRows().length), /* @ts-ignore */
+    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]);
@@ -3123,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);
     }
@@ -3140,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);
     }
@@ -3347,7 +4299,7 @@ class NxeDataGridComponent {
     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
@@ -3378,6 +4330,11 @@ class NxeDataGridComponent {
         }
         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',
@@ -3453,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 */
@@ -3876,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);
@@ -3901,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);
         }
@@ -3919,8 +4879,17 @@ 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.
@@ -4078,7 +5047,7 @@ class NxeDataGridComponent {
      */
     inferredTypes = linkedSignal({ ...(ngDevMode ? { debugName: "inferredTypes" } : /* istanbul ignore next */ {}), source: () => {
             this.refreshTick();
-            return { rows: this.dataSource() ?? [], cols: this.columns() };
+            return { rows: this.sourceRows(), cols: this.columns() };
         },
         computation: ({ rows, cols }, previous) => {
             const out = new Map();
@@ -4148,11 +5117,29 @@ class NxeDataGridComponent {
     }
     /** 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 -----------------------------------------------------------------------
     /**
@@ -4288,7 +5275,8 @@ class NxeDataGridComponent {
         return match ? nxeResolveText(displayExpr, match) || String(raw) : String(raw);
     }
     defaultFormat(col, raw) {
-        return nxeDefaultFormat(this.colType(col), col.format(), raw, this.separators);
+        // 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) {
@@ -4702,16 +5690,15 @@ class NxeDataGridComponent {
         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) {
@@ -4768,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);
@@ -4790,6 +5783,10 @@ class NxeDataGridComponent {
         this.toggleRow(row);
     }
     toggleRow(row) {
+        if (this.remote()) {
+            this.toggleRemoteSelection(row);
+            return;
+        }
         if (this.treeMode) {
             this.toggleTreeSelection(row);
             return;
@@ -4816,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);
@@ -4838,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({
@@ -4850,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',
@@ -4927,6 +5961,7 @@ class NxeDataGridComponent {
         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: '' };
@@ -4962,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();
@@ -5017,7 +6050,7 @@ class NxeDataGridComponent {
     }
     /** 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()) {
@@ -5102,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 }, 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: { 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\">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=\"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-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-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 (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=\"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 (showCheckboxes()) {\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                                            (pointerdown)=\"onHeaderPointerDown(cell.column, cell.leafIndex, $event)\"\r\n                                            (click)=\"onHeaderClick(cell.column)\">\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 (showCheckboxes()) {\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=\"\">(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=\"\">(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=\"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                                                                        title=\"Filter 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 ? 'Collapsed row' : 'Expanded row'\">\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 ? 'Expand' : '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 (showCheckboxes()) {\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) ? 'Collapse' : '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 (showCheckboxes()) {\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                                                        ? 'Editable'\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\">\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                                                    </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)\">Save</a>\r\n                                                <a class=\"nxe-link nxe-link-cancel\" (click)=\"cancelRowEdit($event)\">Cancel</a>\r\n                                            } @else {\r\n                                                <a class=\"nxe-link nxe-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                                    <!-- 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 (showCheckboxes()) {\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 (showCheckboxes()) {\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 (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 (!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()\">\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\" aria-label=\"Page size\" (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]=\"'Items per page: ' + 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                                aria-label=\"Previous page\"\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]=\"'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                                aria-label=\"Next page\"\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\">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}.nxe-data-grid .nxe-gridbase-container{display:flex;flex-direction:column;height:100%}.nxe-data-grid .nxe-datagrid-rowsview{position:relative;overflow:auto;flex:1 1 auto;min-height:0;background-color:#fff}.nxe-data-grid .nxe-datagrid-content{display:block;min-height:100%}.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:#757575;font-weight:400;background:#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:#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 #e6e6e6;border-bottom:var(--nxe-ui-grid-line-width, 1px) solid #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:#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:#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 .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}.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:#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:#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:#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:2px solid #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:#333;border-color:transparent;background-color:#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 #ddd;border-radius:3px;font:inherit}.nxe-data-grid .nxe-datagrid-header-panel{padding:.5rem .75rem}.nxe-data-grid .nxe-datagrid-group-panel{align-items:center;min-height:36px}.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-expander{height:18px;margin-right:4px;color:#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:#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:#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>tr>td,.nxe-data-grid tfoot.nxe-datagrid-total-footer td{border-top:1px solid #ddd;padding:6px 4px;font-weight:700;color:#959595}.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 #ddd;border-radius:2px;font:inherit;color:#333;outline:none}.nxe-data-grid .nxe-grid-filter-input:focus{border-color:#30374c}.nxe-data-grid .nxe-datagrid-filter-row select.nxe-grid-filter-input{appearance:none;background:#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 #ddd;border-radius:2px;background:#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:#f4f4f4;background-color:#fff}@keyframes nxe-grid-spin{to{transform:rotate(360deg)}}.nxe-datagrid-rowsview .nxe-datagrid-table .nxe-row.nxe-freespace-row{border-top:0;border-bottom:0}.nxe-datagrid-rowsview .nxe-datagrid-table .nxe-row.nxe-freespace-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:#e6e6e6;color:#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:#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 .nxe-command-edit{text-align:center;white-space:nowrap}.nxe-datagrid .nxe-link{text-decoration:underline;cursor:pointer;color:#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 #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:#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:#fff;border:1px solid #ddd;box-shadow:0 2px 6px #00000026;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:#333}.nxe-fr-op-menu .nxe-menu-item:hover{background:#f0f0f0}.nxe-fr-op-menu .nxe-menu-item.nxe-menu-item-selected{background:#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:#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\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\">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=\"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-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-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 (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=\"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 (showCheckboxes()) {\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                                            (pointerdown)=\"onHeaderPointerDown(cell.column, cell.leafIndex, $event)\"\r\n                                            (click)=\"onHeaderClick(cell.column)\">\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 (showCheckboxes()) {\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=\"\">(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=\"\">(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=\"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                                                                        title=\"Filter 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 ? 'Collapsed row' : 'Expanded row'\">\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 ? 'Expand' : '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 (showCheckboxes()) {\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) ? 'Collapse' : '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 (showCheckboxes()) {\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                                                        ? 'Editable'\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\">\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                                                    </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)\">Save</a>\r\n                                                <a class=\"nxe-link nxe-link-cancel\" (click)=\"cancelRowEdit($event)\">Cancel</a>\r\n                                            } @else {\r\n                                                <a class=\"nxe-link nxe-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                                    <!-- 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 (showCheckboxes()) {\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 (showCheckboxes()) {\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 (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 (!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()\">\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\" aria-label=\"Page size\" (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]=\"'Items per page: ' + 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                                aria-label=\"Previous page\"\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]=\"'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                                aria-label=\"Next page\"\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\">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}.nxe-data-grid .nxe-gridbase-container{display:flex;flex-direction:column;height:100%}.nxe-data-grid .nxe-datagrid-rowsview{position:relative;overflow:auto;flex:1 1 auto;min-height:0;background-color:#fff}.nxe-data-grid .nxe-datagrid-content{display:block;min-height:100%}.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:#757575;font-weight:400;background:#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:#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 #e6e6e6;border-bottom:var(--nxe-ui-grid-line-width, 1px) solid #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:#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:#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 .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}.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:#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:#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:#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:2px solid #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:#333;border-color:transparent;background-color:#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 #ddd;border-radius:3px;font:inherit}.nxe-data-grid .nxe-datagrid-header-panel{padding:.5rem .75rem}.nxe-data-grid .nxe-datagrid-group-panel{align-items:center;min-height:36px}.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-expander{height:18px;margin-right:4px;color:#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:#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:#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>tr>td,.nxe-data-grid tfoot.nxe-datagrid-total-footer td{border-top:1px solid #ddd;padding:6px 4px;font-weight:700;color:#959595}.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 #ddd;border-radius:2px;font:inherit;color:#333;outline:none}.nxe-data-grid .nxe-grid-filter-input:focus{border-color:#30374c}.nxe-data-grid .nxe-datagrid-filter-row select.nxe-grid-filter-input{appearance:none;background:#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 #ddd;border-radius:2px;background:#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:#f4f4f4;background-color:#fff}@keyframes nxe-grid-spin{to{transform:rotate(360deg)}}.nxe-datagrid-rowsview .nxe-datagrid-table .nxe-row.nxe-freespace-row{border-top:0;border-bottom:0}.nxe-datagrid-rowsview .nxe-datagrid-table .nxe-row.nxe-freespace-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:#e6e6e6;color:#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:#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 .nxe-command-edit{text-align:center;white-space:nowrap}.nxe-datagrid .nxe-link{text-decoration:underline;cursor:pointer;color:#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 #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:#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:#fff;border:1px solid #ddd;box-shadow:0 2px 6px #00000026;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:#333}.nxe-fr-op-menu .nxe-menu-item:hover{background:#f0f0f0}.nxe-fr-op-menu .nxe-menu-item.nxe-menu-item-selected{background:#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:#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 }] }], 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: [{
+            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
@@ -5121,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, nxeExcelNumberMask, nxeFormatNumberValue, nxeHfKey, nxeNumberMask, nxeNumberValue, nxeValueDataType, 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