@nexterajs/ui 0.0.1 → 0.1.0

package/fesm2022/nexterajs-ui-pivot.mjs

@@ -1,12 +1,14 @@
 import * as i0 from '@angular/core';
 import { Injectable, input, ViewEncapsulation, ChangeDetectionStrategy, Component, output, viewChild, inject, ElementRef, NgZone, computed, signal, EventEmitter, contentChild, ViewContainerRef, linkedSignal, afterRenderEffect, Output } from '@angular/core';
 import { exportNxeGridToExcel, nxeDatePattern, nxeFormatNumberValue, nxeExcelNumFmt, NxeDragGesture, NxeScrollingComponent, NxeHeaderFilterModel, openNxeHeaderFilterOverlay, NXE_HF_BLANKS } from '@nexterajs/ui/grid';
-import { parseDateValue, formatDisplay } from '@nexterajs/ui/intl';
+import { parseDateValue, formatDisplay, NXE_NUMBER_SEPARATORS } from '@nexterajs/ui/intl';
 import { NgTemplateOutlet } from '@angular/common';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { combineLatest, filter, take, pairwise } from 'rxjs';
+import { NxeMessageService } from '@nexterajs/ui/core';
+import { Info } from 'luxon';
 import { nxePane } from '@nexterajs/ui/styling';
 import { Workbook, nxeSaveAs } from '@nexterajs/ui/excel';
 
@@ -206,7 +208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // Types for the nxe-pivot-grid + nxe-chart subsystem — an in-house 2D cross-tab engine that
-// replaces DevExtreme's `dx-pivot-grid` / `PivotGridDataSource`. Per plan deviation #6 this
+// replaces DevExtreme's `nxe-pivot-grid` / `PivotGridDataSource`. Per plan deviation #6 this
 // implements the simplified surface the app actually uses: ≤2 row levels, 1 column level,
 // data fields nested as the inner column level (`dataFieldArea` defaults to `'column'`), and
 // `sum`/`count`/`min`/`max`/`avg` aggregation (the app only uses `sum`).
@@ -1065,14 +1067,16 @@ function fieldText(field, raw) {
     return text;
 }
 /** Format an aggregated numeric value per the data field's number format / customizeText. */
-function dataText(field, value) {
+function dataText(field, value, separators) {
     if (value == null) {
         return '';
     }
     // W4 Lane 4: a `summaryType: 'custom'` cell holds whatever `totalValue` the callback left
     // — dx renders non-numeric values as-is (its formatter no-ops on them), so strings (and
     // anything else non-numeric) pass through unformatted; the number mask applies to numbers.
-    const formatted = typeof value === 'number' ? nxeFormatNumberValue(value, field.format) : String(value);
+    const formatted = typeof value === 'number'
+        ? nxeFormatNumberValue(value, field.format, separators)
+        : String(value);
     if (field.customizeText) {
         return field.customizeText({ value, valueText: formatted });
     }
@@ -1181,9 +1185,9 @@ class NxePivotDataSource {
             const step = field.dataType === 'number' ? numericGroupInterval(field) : null;
             if (step && !field.customizeText && typeof field.selector !== 'function') {
                 field.customizeText = (ci) => {
-                    const secondText = nxeFormatNumberValue(ci.value + step, field.format);
+                    const secondText = nxeFormatNumberValue(ci.value + step, field.format, this.options.separators);
                     const firstText = typeof ci.value === 'number'
-                        ? nxeFormatNumberValue(ci.value, field.format)
+                        ? nxeFormatNumberValue(ci.value, field.format, this.options.separators)
                         : ci.valueText;
                     return firstText && secondText ? `${firstText} - ${secondText}` : '';
                 };
@@ -1527,7 +1531,7 @@ class NxePivotDataSource {
         return this.valueAt(rowPath, leaf.colPath, leaf.dataIndex);
     }
     text(rowPath, leaf) {
-        return dataText(this.dataFields[leaf.dataIndex], this.cell(rowPath, leaf));
+        return dataText(this.dataFields[leaf.dataIndex], this.cell(rowPath, leaf), this.options.separators);
     }
     numFmt(dataIndex) {
         return nxeExcelNumFmt(this.dataFields[dataIndex]?.format);
@@ -1578,7 +1582,7 @@ class NxePivotDataSource {
         const grandTotalCells = !measuresOnRows && opts.showRowGrandTotals && this.visibleDataFields.length > 0
             ? leaves.map((leaf) => {
                 const value = resolveValue([], leaf.colPath, leaf.dataIndex);
-                return { value, text: dataText(this.dataFields[leaf.dataIndex], value) };
+                return { value, text: dataText(this.dataFields[leaf.dataIndex], value, this.options.separators) };
             })
             : null;
         // Measures-on-rows: the grand-total footer splits into one row per VISIBLE measure,
@@ -1591,7 +1595,7 @@ class NxePivotDataSource {
                     caption: df.caption ?? df.dataField ?? '',
                     cells: leaves.map((leaf) => {
                         const value = resolveValue([], leaf.colPath, di);
-                        return { value, text: dataText(df, value) };
+                        return { value, text: dataText(df, value, this.options.separators) };
                     }),
                 };
             })
@@ -1616,7 +1620,7 @@ class NxePivotDataSource {
         // everything else (grand-total path `[]`, hidden paths, leaves from an older model).
         // With measures on rows the ROW carries the data index; otherwise the leaf does.
         const matrix = rows.map((row) => leaves.map((leaf) => resolveValue(row.path, leaf.colPath, row.dataIndex ?? leaf.dataIndex)));
-        const textMatrix = matrix.map((mr, ri) => mr.map((v, li) => dataText(this.dataFields[rows[ri].dataIndex ?? leaves[li].dataIndex], v)));
+        const textMatrix = matrix.map((mr, ri) => mr.map((v, li) => dataText(this.dataFields[rows[ri].dataIndex ?? leaves[li].dataIndex], v, this.options.separators)));
         const rowIndexByPath = new Map();
         rows.forEach((row, ri) => {
             const key = pathKeyOf(row.path);
@@ -2229,23 +2233,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 // nxe-pivot-field-chip — the SHARED dx field chip (P3-C3). One rendering for every place a
 // field chip appears: the field panel's area bands / corner row area (P3-C2, table cells) and
 // the field chooser popup's four group areas (P3-C3, stacked divs). Attribute selector so the
-// HOST element stays the caller's own `<div>` carrying dx's exact `.dx-area-field.dx-area-box`
+// HOST element stays the caller's own `<div>` carrying dx's exact `.nxe-area-field.nxe-area-box`
 // classes (fixtures/fields-panel.html and fixtures/field-chooser.html agree on the chip
-// subtree: `.dx-area-field-content` + optional `.dx-column-indicators`).
+// subtree: `.nxe-area-field-content` + optional `.nxe-column-indicators`).
 //
-// P3-C4: the header-filter funnel (`span.dx-header-filter`) renders beside the sort arrow —
+// P3-C4: the header-filter funnel (`span.nxe-header-filter`) renders beside the sort arrow —
 // dx FieldChooserBase.renderField applies the sort state first, then the headerFilter state,
-// appending both into ONE `.dx-column-indicators` container (m_column_state_mixin reuses the
-// container; ltr 'left' alignment appends, so the funnel sits AFTER the arrow). The funnel is
-// clip-path-drawn (the grid's exact `.nxe-grid-hf-icon` pattern — DXIcons stays neutralised)
-// in #757575: 50% alpha while no filter is applied (`.dx-header-filter-empty`,
-// m_header_filter_core `_isHeaderFilterEmpty`: no/empty filterValues), full alpha when one is
-// (oracle §c funnel colors). A funnel click must NOT sort: dx's chip click handler branches on
-// `$(e.target).hasClass('dx-header-filter')` (m_field_chooser_base subscribeToEvents), so the
-// funnel handler stops propagation before the host's own (click) fires.
+// appending both into ONE `.nxe-column-indicators` container (m_column_state_mixin reuses the
+// container; ltr 'left' alignment appends, so the funnel sits AFTER the arrow). A funnel click
+// must NOT sort: dx's chip click handler branches on `$(e.target).hasClass('nxe-header-filter')`
+// (m_field_chooser_base subscribeToEvents), so the funnel handler stops propagation before the
+// host's own (click) fires.
+//
+// WHERE the indicator block goes follows dx's showColumnLines rule
+// (m_column_state_mixin `_applyColumnState`): renderField(field, showColumnLines) PREPENDS the
+// block and floats it right (inline `float: right`, as dx sets it) when showColumnLines is on —
+// the field chooser (`renderField(field, true)`, m_field_chooser.js:465) and the panel's ROW area
+// (`renderField(field, "row" === field.area)`, m_fields_area.js:120). Everywhere else (panel
+// column / filter / data chips) it is APPENDED after the caption, inline, unfloated. The caller
+// says which through `floatIndicators`.
+//
+// The arrow and funnel are the library's own drawings (clip-path polygons written from round
+// pixel metrics — the DXIcons font is not used) in dx's 14px glyph box: `.dx-sort` #959595,
+// `.dx-header-filter` #757575 with the `-empty` state at 50% alpha
+// (`.dx-pivotgrid-fields-container .dx-header-filter-empty{color:rgba(117,117,117,.5)}`). An
+// app that shrinks `.nxe-column-indicators` (bright's `scale: .7`) shrinks them as it did dx's.
 class NxePivotFieldChipComponent {
     chip = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "chip" }] : /* istanbul ignore next */ []));
+    /** dx showColumnLines for this chip's surface: true in the field chooser and the panel's
+     *  ROW area — the indicators come FIRST and float right; false (panel column / filter /
+     *  data areas) — they follow the caption inline. */
+    floatIndicators = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatIndicators" }] : /* istanbul ignore next */ []));
     /** Raw pointerdown — the host decides whether a drag gesture may begin. */
     chipPointerDown = output();
     /** Chip click (the host consults its gesture's click suppression before sorting). */
@@ -2259,38 +2279,46 @@ class NxePivotFieldChipComponent {
         this.chipFilterClick.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxePivotFieldChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxePivotFieldChipComponent, isStandalone: true, selector: "div[nxePivotFieldChip]", inputs: { chip: { classPropertyName: "chip", publicName: "chip", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { chipPointerDown: "chipPointerDown", chipClick: "chipClick", chipFilterClick: "chipFilterClick" }, host: { listeners: { "pointerdown": "chipPointerDown.emit($event)", "click": "chipClick.emit()" }, classAttribute: "dx-area-field dx-area-box" }, ngImport: i0, template: `<div class="dx-area-field-content">{{ chip().caption }}</div>@if (chip().sortable || chip().filterable) {<div class="dx-column-indicators">@if (chip().sortable) {<span
-        class="dx-sort"
-        [class.dx-sort-up]="chip().sortOrder === 'asc'"
-        [class.dx-sort-down]="chip().sortOrder === 'desc'"></span>}@if (chip().filterable) {<span
-        class="dx-header-filter"
-        [class.dx-header-filter-empty]="!chip().filterActive"
-        (click)="onFunnelClick($event)"></span>}</div>}`, isInline: true, styles: [".dx-pivotgrid-fields-container .dx-header-filter{display:inline-block;position:relative;width:14px;height:14px;vertical-align:middle;cursor:pointer}.dx-pivotgrid-fields-container .dx-header-filter:before{content:\"\";position:absolute;inset:0;background-color:#757575;clip-path:polygon(0 0,100% 0,58% 50%,58% 100%,42% 85%,42% 50%)}.dx-pivotgrid-fields-container .dx-header-filter:after{content:\"\";position:absolute;inset:0;margin:-7px}.dx-pivotgrid-fields-container .dx-header-filter.dx-header-filter-empty{opacity:.5}.dx-pivotgrid-fields-container .dx-header-filter.dx-header-filter-empty:hover{opacity:.75}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxePivotFieldChipComponent, isStandalone: true, selector: "div[nxePivotFieldChip]", inputs: { chip: { classPropertyName: "chip", publicName: "chip", isSignal: true, isRequired: true, transformFunction: null }, floatIndicators: { classPropertyName: "floatIndicators", publicName: "floatIndicators", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chipPointerDown: "chipPointerDown", chipClick: "chipClick", chipFilterClick: "chipFilterClick" }, host: { listeners: { "pointerdown": "chipPointerDown.emit($event)", "click": "chipClick.emit()" }, classAttribute: "nxe-area-field nxe-area-box" }, ngImport: i0, template: `@if (floatIndicators()) {<ng-container *ngTemplateOutlet="indicators" />}<div class="nxe-area-field-content">{{ chip().caption }}</div>@if (!floatIndicators()) {<ng-container *ngTemplateOutlet="indicators" />}
+        <ng-template #indicators>@if (chip().sortable || chip().filterable) {<div
+            class="nxe-column-indicators"
+            role="presentation"
+            [style.float]="floatIndicators() ? 'right' : null">@if (chip().sortable) {<span
+                class="nxe-sort"
+                [class.nxe-sort-up]="chip().sortOrder === 'asc'"
+                [class.nxe-sort-down]="chip().sortOrder === 'desc'"></span>}@if (chip().filterable) {<span
+                class="nxe-header-filter"
+                [class.nxe-header-filter-empty]="!chip().filterActive"
+                (click)="onFunnelClick($event)"></span>}</div>}</ng-template>`, isInline: true, styles: [".nxe-pivotgrid-fields-container .nxe-area-fields{position:relative}.nxe-pivotgrid-fields-container .nxe-area-field{cursor:pointer}.nxe-pivotgrid-fields-container .nxe-area-field.nxe-area-box{box-sizing:border-box;margin-bottom:4px;padding:7px 10px;border:1px solid var(--nxe-ui-border, #ddd);background-color:var(--nxe-ui-surface, #fff)}.nxe-pivotgrid .nxe-area-field.nxe-area-box{margin-bottom:0}.nxe-pivotgrid-fields-container .nxe-area-field-content{overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}.nxe-pivotgrid .nxe-area-field-content,.nxe-pivotgrid .nxe-column-indicators{display:inline-block}.nxe-pivotgrid .nxe-area-field,.nxe-pivotgrid .nxe-area-field-content{white-space:nowrap}.nxe-pivotgrid-fields-container .nxe-column-indicators{margin-left:6px;line-height:19px;vertical-align:bottom;white-space:nowrap}.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-sort,.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-header-filter{display:inline-block;position:relative;box-sizing:border-box;width:14px;height:14px;vertical-align:-.875px}.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-sort:before,.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-header-filter:before{content:\"\";position:absolute;inset:0;box-sizing:border-box;background-color:currentColor}.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-sort:after,.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-header-filter:after{content:none}.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-sort{color:#959595}.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-sort-up:before{clip-path:polygon(6.5px 0,9px 3px,7px 3px,7px 14px,6px 14px,6px 3px,4px 3px)}.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-sort-down:before{clip-path:polygon(6px 0,7px 0,7px 11px,9px 11px,6.5px 14px,4px 11px,6px 11px)}.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-header-filter{color:#757575;cursor:pointer}.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-header-filter-empty{color:#75757580}.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-header-filter:before{clip-path:polygon(0 0,14px 0,14px 3px,9px 8px,9px 14px,5px 14px,5px 8px,0 3px)}@media(forced-colors:active){.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-sort:before,.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-header-filter:before{forced-color-adjust:none;background-color:CanvasText}}.nxe-pivotgrid-fields-container.nxe-drag{opacity:.8}.nxe-pivotgrid-fields-container.nxe-drag .nxe-area-field.nxe-area-box{border:1px solid rgba(51,122,183,.5);box-shadow:0 0 1px #0000001a,0 1px 3px #0003}.nxe-pivotgrid-fields-container.nxe-drag .nxe-area-field-content{display:inline-block}.nxe-pivotgrid-fields-container.nxe-drag .nxe-column-indicators{display:inline-block;float:none}.nxe-pivotgrid-fields-container .nxe-drag-source{opacity:.5}.nxe-pivotgrid-fields-container .nxe-position-indicator{background-color:gray}.nxe-pivotgrid-fields-container .nxe-position-indicator.nxe-position-indicator-vertical{height:2px;margin-top:-4px;margin-left:-1px}.nxe-pivotgrid-fields-container .nxe-position-indicator.nxe-position-indicator-vertical.nxe-position-indicator-last{margin-top:-3px}.nxe-pivotgrid-fields-container .nxe-position-indicator.nxe-position-indicator-horizontal{width:2px;margin-left:-3px}.nxe-pivotgrid-fields-container .nxe-position-indicator.nxe-position-indicator-horizontal.nxe-position-indicator-last{margin-left:3px}\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: NxePivotFieldChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'div[nxePivotFieldChip]', standalone: true, template: `<div class="dx-area-field-content">{{ chip().caption }}</div>@if (chip().sortable || chip().filterable) {<div class="dx-column-indicators">@if (chip().sortable) {<span
-        class="dx-sort"
-        [class.dx-sort-up]="chip().sortOrder === 'asc'"
-        [class.dx-sort-down]="chip().sortOrder === 'desc'"></span>}@if (chip().filterable) {<span
-        class="dx-header-filter"
-        [class.dx-header-filter-empty]="!chip().filterActive"
-        (click)="onFunnelClick($event)"></span>}</div>}`, host: {
-                        class: 'dx-area-field dx-area-box',
+            args: [{ selector: 'div[nxePivotFieldChip]', standalone: true, template: `@if (floatIndicators()) {<ng-container *ngTemplateOutlet="indicators" />}<div class="nxe-area-field-content">{{ chip().caption }}</div>@if (!floatIndicators()) {<ng-container *ngTemplateOutlet="indicators" />}
+        <ng-template #indicators>@if (chip().sortable || chip().filterable) {<div
+            class="nxe-column-indicators"
+            role="presentation"
+            [style.float]="floatIndicators() ? 'right' : null">@if (chip().sortable) {<span
+                class="nxe-sort"
+                [class.nxe-sort-up]="chip().sortOrder === 'asc'"
+                [class.nxe-sort-down]="chip().sortOrder === 'desc'"></span>}@if (chip().filterable) {<span
+                class="nxe-header-filter"
+                [class.nxe-header-filter-empty]="!chip().filterActive"
+                (click)="onFunnelClick($event)"></span>}</div>}</ng-template>`, imports: [NgTemplateOutlet], host: {
+                        class: 'nxe-area-field nxe-area-box',
                         '(pointerdown)': 'chipPointerDown.emit($event)',
                         '(click)': 'chipClick.emit()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".dx-pivotgrid-fields-container .dx-header-filter{display:inline-block;position:relative;width:14px;height:14px;vertical-align:middle;cursor:pointer}.dx-pivotgrid-fields-container .dx-header-filter:before{content:\"\";position:absolute;inset:0;background-color:#757575;clip-path:polygon(0 0,100% 0,58% 50%,58% 100%,42% 85%,42% 50%)}.dx-pivotgrid-fields-container .dx-header-filter:after{content:\"\";position:absolute;inset:0;margin:-7px}.dx-pivotgrid-fields-container .dx-header-filter.dx-header-filter-empty{opacity:.5}.dx-pivotgrid-fields-container .dx-header-filter.dx-header-filter-empty:hover{opacity:.75}\n"] }]
-        }], propDecorators: { chip: [{ type: i0.Input, args: [{ isSignal: true, alias: "chip", required: true }] }], chipPointerDown: [{ type: i0.Output, args: ["chipPointerDown"] }], chipClick: [{ type: i0.Output, args: ["chipClick"] }], chipFilterClick: [{ type: i0.Output, args: ["chipFilterClick"] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".nxe-pivotgrid-fields-container .nxe-area-fields{position:relative}.nxe-pivotgrid-fields-container .nxe-area-field{cursor:pointer}.nxe-pivotgrid-fields-container .nxe-area-field.nxe-area-box{box-sizing:border-box;margin-bottom:4px;padding:7px 10px;border:1px solid var(--nxe-ui-border, #ddd);background-color:var(--nxe-ui-surface, #fff)}.nxe-pivotgrid .nxe-area-field.nxe-area-box{margin-bottom:0}.nxe-pivotgrid-fields-container .nxe-area-field-content{overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}.nxe-pivotgrid .nxe-area-field-content,.nxe-pivotgrid .nxe-column-indicators{display:inline-block}.nxe-pivotgrid .nxe-area-field,.nxe-pivotgrid .nxe-area-field-content{white-space:nowrap}.nxe-pivotgrid-fields-container .nxe-column-indicators{margin-left:6px;line-height:19px;vertical-align:bottom;white-space:nowrap}.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-sort,.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-header-filter{display:inline-block;position:relative;box-sizing:border-box;width:14px;height:14px;vertical-align:-.875px}.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-sort:before,.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-header-filter:before{content:\"\";position:absolute;inset:0;box-sizing:border-box;background-color:currentColor}.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-sort:after,.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-header-filter:after{content:none}.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-sort{color:#959595}.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-sort-up:before{clip-path:polygon(6.5px 0,9px 3px,7px 3px,7px 14px,6px 14px,6px 3px,4px 3px)}.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-sort-down:before{clip-path:polygon(6px 0,7px 0,7px 11px,9px 11px,6.5px 14px,4px 11px,6px 11px)}.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-header-filter{color:#757575;cursor:pointer}.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-header-filter-empty{color:#75757580}.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-header-filter:before{clip-path:polygon(0 0,14px 0,14px 3px,9px 8px,9px 14px,5px 14px,5px 8px,0 3px)}@media(forced-colors:active){.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-sort:before,.nxe-pivotgrid-fields-container .nxe-column-indicators .nxe-header-filter:before{forced-color-adjust:none;background-color:CanvasText}}.nxe-pivotgrid-fields-container.nxe-drag{opacity:.8}.nxe-pivotgrid-fields-container.nxe-drag .nxe-area-field.nxe-area-box{border:1px solid rgba(51,122,183,.5);box-shadow:0 0 1px #0000001a,0 1px 3px #0003}.nxe-pivotgrid-fields-container.nxe-drag .nxe-area-field-content{display:inline-block}.nxe-pivotgrid-fields-container.nxe-drag .nxe-column-indicators{display:inline-block;float:none}.nxe-pivotgrid-fields-container .nxe-drag-source{opacity:.5}.nxe-pivotgrid-fields-container .nxe-position-indicator{background-color:gray}.nxe-pivotgrid-fields-container .nxe-position-indicator.nxe-position-indicator-vertical{height:2px;margin-top:-4px;margin-left:-1px}.nxe-pivotgrid-fields-container .nxe-position-indicator.nxe-position-indicator-vertical.nxe-position-indicator-last{margin-top:-3px}.nxe-pivotgrid-fields-container .nxe-position-indicator.nxe-position-indicator-horizontal{width:2px;margin-left:-3px}.nxe-pivotgrid-fields-container .nxe-position-indicator.nxe-position-indicator-horizontal.nxe-position-indicator-last{margin-left:3px}\n"] }]
+        }], propDecorators: { chip: [{ type: i0.Input, args: [{ isSignal: true, alias: "chip", required: true }] }], floatIndicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatIndicators", required: false }] }], chipPointerDown: [{ type: i0.Output, args: ["chipPointerDown"] }], chipClick: [{ type: i0.Output, args: ["chipClick"] }], chipFilterClick: [{ type: i0.Output, args: ["chipFilterClick"] }] } });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // nxe-pivot-field-panel — the dx field panel (dxo-field-panel), P3-C2. Renders the
-// `.dx-pivotgrid-fields-area` blocks harvested from the live broker reference
+// `.nxe-pivotgrid-fields-area` blocks harvested from the live broker reference
 // (tools/visual-parity/reference/pivot/fixtures/fields-panel.html, ORACLE.md §c): filter strip
 // on top, then data + column header cells side by side. The ROW area is NOT a band of this
-// panel: dx hosts it inside the cross-tab's corner `.dx-area-description-cell`
+// panel: dx hosts it inside the cross-tab's corner `.nxe-area-description-cell`
 // (views/0/initial-full-page.png — the 'Lob' chip sits in the corner, no caption text), so it
 // is exposed as `rowAreaTemplate` and NxePivotGridComponent outlets it into its corner cell.
-// Chips are `.dx-area-field.dx-area-box > .dx-area-field-content`; an empty area shows dx's
+// Chips are `.nxe-area-field.nxe-area-box > .nxe-area-field-content`; an empty area shows dx's
 // exact localization string ("Drop Filter Fields Here" etc. — dx fieldPanel.texts defaults).
 //
 // The panel is DUMB about field state: it reads chips off the pivot's engine (which already has
@@ -2300,16 +2328,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 //
 // Dragging reuses the shared NxeDragGesture core extracted from the grid controller (same 5px
 // threshold / Escape / click-suppression semantics the group-drag audit pinned); the ghost is
-// dx's `.dx-pivotgrid-fields-container.dx-drag` chip clone, the insertion mark dx's
-// `.dx-position-indicator` 2px bar. Drop zones are hit-tested from the PIVOT root (the row area
+// dx's `.nxe-pivotgrid-fields-container.nxe-drag` chip clone, the insertion mark dx's
+// `.nxe-position-indicator` 2px bar. Drop zones are hit-tested from the PIVOT root (the row area
 // lives in the cross-tab corner): the whole corner cell is the row drop target and carries the
-// `dx-drag-target` highlight; the other areas highlight their fields-area element.
-/** dx `fieldPanel.texts` defaults (dxPivotGrid docs; the filter string matches the fixture). */
-const EMPTY_AREA_TEXTS = {
-    filter: 'Drop Filter Fields Here',
-    data: 'Drop Data Fields Here',
-    column: 'Drop Column Fields Here',
-    row: 'Drop Row Fields Here',
+// `nxe-drag-target` highlight; the other areas highlight their fields-area element.
+/** dx `fieldPanel.texts` (dxPivotGrid docs; the English filter string matches the fixture), as message keys. */
+const EMPTY_AREA_TEXT_KEYS = {
+    filter: 'pivot.panel.dropFilter',
+    data: 'pivot.panel.dropData',
+    column: 'pivot.panel.dropColumn',
+    row: 'pivot.panel.dropRow',
 };
 /**
  * One chip's model, shared by the panel and the chooser (P3-C4). Per-field flag precedence is
@@ -2357,10 +2385,10 @@ class NxePivotFieldPanelComponent {
     allowFiltering = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "allowFiltering" }] : /* istanbul ignore next */ []));
     /** Widget `showBorders`: the panel bands sit INSIDE the border box (dx draws the outer
-     *  border around the filter/chip bands — `.dx-pivotgrid-border .dx-filter-header` et al). */
+     *  border around the filter/chip bands — `.nxe-pivotgrid-border .nxe-filter-header` et al). */
     showBorders = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showBorders" }] : /* istanbul ignore next */ []));
-    /** P3-C3: the pivot's `.dx-pivotgrid-toolbar` template (field-chooser button) — rendered
+    /** P3-C3: the pivot's `.nxe-pivotgrid-toolbar` template (field-chooser button) — rendered
      *  where dx prepends its toolbar container (m_widget.js `_renderDescriptionArea`). */
     toolbarTemplate = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "toolbarTemplate" }] : /* istanbul ignore next */ []));
@@ -2379,10 +2407,11 @@ class NxePivotFieldPanelComponent {
     /** A chip's funnel was clicked — the pivot opens the header-filter panel (P3-C4). */
     filterOpen = output();
     /** The ROW fields area — NxePivotGridComponent outlets this into its corner cell (dx hosts
-     *  the row chips inside `.dx-area-description-cell`, never in a band of their own). */
+     *  the row chips inside `.nxe-area-description-cell`, never in a band of their own). */
     rowAreaTemplate = viewChild('rowAreaTpl', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rowAreaTemplate" }] : /* istanbul ignore next */ []));
     elementRef = inject((ElementRef));
+    messages = inject(NxeMessageService);
     zone = inject(NgZone);
     filterArea = computed(() => this.buildArea('filter'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterArea" }] : /* istanbul ignore next */ []));
@@ -2398,26 +2427,26 @@ class NxePivotFieldPanelComponent {
     // --- Dragging -----------------------------------------------------------------------------
     drag = null;
     gesture = new NxeDragGesture(this.zone, {
-        // dx ghost: the fields-container drag clone — `.dx-drag` opacity .8, chip re-bordered
-        // rgba(51,122,183,.5) with the drag shadow (dx-compat chip-chrome block). `nxe-widget`
+        // dx ghost: the fields-container drag clone — `.nxe-drag` opacity .8, chip re-bordered
+        // rgba(51,122,183,.5) with the drag shadow (nxe-pivot-field-chip's styles). `nxe-widget`
         // carries the 12.24px widget font stack across the <body> boundary, exactly as the
         // library's overlay panes do (styling/_widget.scss) — without it the ghost renders in
         // the page's body font.
         createGhost: () => {
             const ghost = document.createElement('div');
             ghost.className =
-                'nxe-widget dx-pivotgrid-fields-container dx-drag nxe-pivot-drag-ghost';
+                'nxe-widget nxe-pivotgrid-fields-container nxe-drag nxe-pivot-drag-ghost';
             const chip = document.createElement('div');
-            chip.className = 'dx-area-field dx-area-box';
+            chip.className = 'nxe-area-field nxe-area-box';
             const content = document.createElement('div');
-            content.className = 'dx-area-field-content';
+            content.className = 'nxe-area-field-content';
             content.textContent = this.drag?.chip.caption ?? '';
             chip.appendChild(content);
             ghost.appendChild(chip);
             return ghost;
         },
-        // dx dims the source chip with `dx-drag-source` (opacity .5 via the container scope).
-        sourceDragClasses: ['dx-drag-source'],
+        // dx dims the source chip with `nxe-drag-source` (opacity .5 via the container scope).
+        sourceDragClasses: ['nxe-drag-source'],
         dragMove: (x, y) => this.trackPointer(x, y),
         drop: () => this.completeDrop(),
         clearDropVisuals: () => {
@@ -2428,8 +2457,8 @@ class NxePivotFieldPanelComponent {
                 d.targetEl = null;
             }
             this.dragRoot()
-                .querySelectorAll('.dx-drag-target')
-                .forEach((el) => el.classList.remove('dx-drag-target'));
+                .querySelectorAll('.nxe-drag-target')
+                .forEach((el) => el.classList.remove('nxe-drag-target'));
         },
         reset: () => {
             this.drag = null;
@@ -2467,14 +2496,14 @@ class NxePivotFieldPanelComponent {
         if (this.gesture.consumeClick()) {
             return; // a drag released over the funnel must not also open the popup
         }
-        const origin = event.target?.closest('.dx-area-field') ??
+        const origin = event.target?.closest('.nxe-area-field') ??
             event.target;
         this.filterOpen.emit({ fieldIndex: chip.fieldIndex, origin });
     }
     buildArea(group) {
         const engine = this.engine();
         const chips = (engine ? engine.areaFields(group) : []).map(({ fieldIndex, field }) => buildChip(fieldIndex, field, group, this.allowSorting(), this.allowFiltering()));
-        return { group, chips, emptyText: EMPTY_AREA_TEXTS[group] };
+        return { group, chips, emptyText: this.messages.t(EMPTY_AREA_TEXT_KEYS[group]) };
     }
     /** Hit-test root: the whole pivot — the row area lives in the cross-tab corner cell. */
     dragRoot() {
@@ -2483,14 +2512,14 @@ class NxePivotFieldPanelComponent {
     }
     /**
      * Drop zones. For filter/data/column the fields-area element is both hit rect and highlight
-     * target; for ROW the enclosing corner cell (`th.dx-area-description-cell`) is — dx's row
+     * target; for ROW the enclosing corner cell (`th.nxe-area-description-cell`) is — dx's row
      * area IS the corner, so a drop anywhere on it must land in rows, not read as "outside".
      */
     dropZones() {
-        return Array.from(this.dragRoot().querySelectorAll('.dx-pivotgrid-fields-area[group]')).map((areaEl) => {
+        return Array.from(this.dragRoot().querySelectorAll('.nxe-pivotgrid-fields-area[group]')).map((areaEl) => {
             const group = areaEl.getAttribute('group');
             const corner = group === 'row'
-                ? areaEl.closest('th.dx-area-description-cell')
+                ? areaEl.closest('th.nxe-area-description-cell')
                 : null;
             return { group, hitEl: corner ?? areaEl, areaEl };
         });
@@ -2505,7 +2534,7 @@ class NxePivotFieldPanelComponent {
             return x >= r.left && x <= r.right && y >= r.top && y <= r.bottom;
         }) ?? null;
         if (d.targetEl && d.targetEl !== hit?.hitEl) {
-            d.targetEl.classList.remove('dx-drag-target');
+            d.targetEl.classList.remove('nxe-drag-target');
         }
         if (!hit) {
             // Outside every area: no drop target — releasing here is a snap-back NO-OP
@@ -2517,10 +2546,10 @@ class NxePivotFieldPanelComponent {
             d.indicator = null;
             return;
         }
-        hit.hitEl.classList.add('dx-drag-target');
+        hit.hitEl.classList.add('nxe-drag-target');
         d.targetEl = hit.hitEl;
         d.targetArea = hit.group;
-        const chips = Array.from(hit.areaEl.querySelectorAll('.dx-area-field.dx-area-box'));
+        const chips = Array.from(hit.areaEl.querySelectorAll('.nxe-area-field.nxe-area-box'));
         let slot = chips.length;
         for (let i = 0; i < chips.length; i++) {
             const r = chips[i].getBoundingClientRect();
@@ -2532,7 +2561,7 @@ class NxePivotFieldPanelComponent {
         d.slot = slot;
         this.placeIndicator(d, hit.areaEl, chips, slot);
     }
-    /** dx `.dx-position-indicator`: a 2px gray bar between chips, inside the (positioned) area. */
+    /** dx `.nxe-position-indicator`: a 2px gray bar between chips, inside the (positioned) area. */
     placeIndicator(d, areaEl, chips, slot) {
         if (!chips.length) {
             // Empty area: the dx-drag-target state marks the whole area; no bar to place.
@@ -2545,8 +2574,8 @@ class NxePivotFieldPanelComponent {
         }
         const last = slot >= chips.length;
         d.indicator.className =
-            'dx-position-indicator dx-position-indicator-horizontal' +
-                (last ? ' dx-position-indicator-last' : '');
+            'nxe-position-indicator nxe-position-indicator-horizontal' +
+                (last ? ' nxe-position-indicator-last' : '');
         const areaRect = areaEl.getBoundingClientRect();
         const ref = last ? chips[chips.length - 1] : chips[slot];
         const refRect = ref.getBoundingClientRect();
@@ -2584,20 +2613,20 @@ class NxePivotFieldPanelComponent {
         this.fieldMove.emit({ fieldIndex: d.chip.fieldIndex, area: d.targetArea, areaIndex: slot });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxePivotFieldPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxePivotFieldPanelComponent, isStandalone: true, selector: "nxe-pivot-field-panel", inputs: { engine: { classPropertyName: "engine", publicName: "engine", isSignal: true, isRequired: false, transformFunction: null }, showFilterFields: { classPropertyName: "showFilterFields", publicName: "showFilterFields", isSignal: true, isRequired: false, transformFunction: null }, showDataFields: { classPropertyName: "showDataFields", publicName: "showDataFields", isSignal: true, isRequired: false, transformFunction: null }, showColumnFields: { classPropertyName: "showColumnFields", publicName: "showColumnFields", isSignal: true, isRequired: false, transformFunction: null }, showRowFields: { classPropertyName: "showRowFields", publicName: "showRowFields", isSignal: true, isRequired: false, transformFunction: null }, allowFieldDragging: { classPropertyName: "allowFieldDragging", publicName: "allowFieldDragging", isSignal: true, isRequired: false, transformFunction: null }, allowSorting: { classPropertyName: "allowSorting", publicName: "allowSorting", isSignal: true, isRequired: false, transformFunction: null }, allowFiltering: { classPropertyName: "allowFiltering", publicName: "allowFiltering", isSignal: true, isRequired: false, transformFunction: null }, showBorders: { classPropertyName: "showBorders", publicName: "showBorders", isSignal: true, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: true, isRequired: false, transformFunction: null }, toolbarArea: { classPropertyName: "toolbarArea", publicName: "toolbarArea", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldMove: "fieldMove", sortToggle: "sortToggle", filterOpen: "filterOpen" }, host: { classAttribute: "nxe-pivot-field-panel" }, viewQueries: [{ propertyName: "rowAreaTemplate", first: true, predicate: ["rowAreaTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Area subtree mirrors fixtures/fields-panel.html verbatim: .dx-pivotgrid-fields-area >\r\n     table.dx-area-field-container > colgroup + thead.dx-pivotgrid-fields-area-head > tr > td\r\n     chips (.dx-area-field.dx-area-box > .dx-area-field-content) / .dx-empty-area-text.\r\n     The row area carries dx's inline width:100% (fixture line for group=\"row\"). -->\r\n<ng-template #areaTpl let-area=\"area\">\r\n  <div\r\n    class=\"dx-pivotgrid-fields-area dx-area-fields\"\r\n    [class.dx-pivotgrid-drag-action]=\"allowFieldDragging()\"\r\n    [style.width]=\"area.group === 'row' ? '100%' : null\"\r\n    [attr.group]=\"area.group\">\r\n    <table class=\"dx-area-field-container\">\r\n      <colgroup></colgroup>\r\n      <thead class=\"dx-pivotgrid-fields-area-head\">\r\n        <tr>\r\n          @if (area.chips.length === 0) {\r\n            <td><div class=\"dx-empty-area-text\">{{ area.emptyText }}</div></td>\r\n          } @else {\r\n            @for (chip of area.chips; track chip.fieldIndex) {\r\n              <!-- Chip subtree lives in the SHARED NxePivotFieldChipComponent (P3-C3) \u2014 the\r\n                   chooser renders the identical chips; the host div here keeps the fixture's\r\n                   exact .dx-area-field.dx-area-box classes. -->\r\n              <td>\r\n                <div\r\n                  nxePivotFieldChip\r\n                  [chip]=\"chip\"\r\n                  (chipPointerDown)=\"onChipPointerDown(chip, area.group, $event)\"\r\n                  (chipClick)=\"onChipClick(chip)\"\r\n                  (chipFilterClick)=\"onChipFilterClick(chip, $event)\"></div>\r\n              </td>\r\n            }\r\n          }\r\n        </tr>\r\n      </thead>\r\n    </table>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- The ROW fields area is NOT a band here: dx hosts it inside the cross-tab's corner\r\n     `.dx-area-description-cell` (oracle \u00A7c \"hosts the ROW field chips\", initial-full-page.png)\r\n     \u2014 NxePivotGridComponent outlets this template into its corner cell. -->\r\n<ng-template #rowAreaTpl>\r\n  @if (showRowFields()) {\r\n    <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: rowArea() }\" />\r\n  }\r\n</ng-template>\r\n\r\n<!-- dx main-table area cells (ORACLE.md \u00A7d): filter header strip, then data + column header\r\n     cells. With showBorders the bands sit INSIDE the widget border (dx .dx-pivotgrid-border\r\n     draws top/left/right on these band cells). -->\r\n@if (showFilterFields() || showDataFields() || showColumnFields()) {\r\n  <table class=\"nxe-pivot-field-panel-table\" [class.nxe-panel-bordered]=\"showBorders()\">\r\n    <tbody>\r\n      @if (showFilterFields()) {\r\n        <tr>\r\n          <td class=\"dx-filter-header\" colspan=\"2\">\r\n            <!-- P3-C3: the pivot's `.dx-pivotgrid-toolbar` (field-chooser button) \u2014 dx PREPENDS\r\n                 the toolbar to this cell and floats it right (oracle \u00A7c; m_widget.js\r\n                 `$toolbarContainer.prependTo($targetContainer)` + dx.light float:right). -->\r\n            @if (toolbarArea() === 'filter' && toolbarTemplate(); as tb) {\r\n              <ng-container *ngTemplateOutlet=\"tb\" />\r\n            }\r\n            <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: filterArea() }\" />\r\n          </td>\r\n        </tr>\r\n      }\r\n      @if (showDataFields() || showColumnFields()) {\r\n        <tr>\r\n          @if (showDataFields()) {\r\n            <td class=\"dx-data-header\" [attr.colspan]=\"showColumnFields() || columnToolbar() ? null : 2\">\r\n              <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: dataArea() }\" />\r\n            </td>\r\n          }\r\n          @if (showColumnFields() || columnToolbar()) {\r\n            <!-- dx's middle toolbar branch (m_widget.js): with the filter band off, the\r\n                 toolbar prepends into the always-present $columnHeader cell \u2014 rendered here\r\n                 even when showColumnFields is off (the cell then holds only the toolbar). -->\r\n            <td class=\"dx-column-header\" [attr.colspan]=\"showDataFields() ? null : 2\">\r\n              @if (columnToolbar() && toolbarTemplate(); as tb) {\r\n                <ng-container *ngTemplateOutlet=\"tb\" />\r\n              }\r\n              @if (showColumnFields()) {\r\n                <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: columnArea() }\" />\r\n              }\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n}\r\n", styles: ["nxe-pivot-field-panel{display:block;color:#333}nxe-pivot-field-panel .nxe-pivot-field-panel-table{width:100%;border-collapse:collapse;background:#fff}nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr>td{padding:0;vertical-align:top;border-bottom:1px solid #ddd}nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr:last-child>td{border-bottom:none}nxe-pivot-field-panel .nxe-pivot-field-panel-table.nxe-panel-bordered{border-top:1px solid #ddd;border-left:1px solid #ddd;border-right:1px solid #ddd}nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr>td.dx-data-header,nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr>td.dx-column-header{background-color:#ddd3}nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr>td.dx-data-header{border-right:1px solid #ddd}nxe-pivot-field-panel .dx-area-field-container{border-collapse:collapse}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NxePivotFieldChipComponent, selector: "div[nxePivotFieldChip]", inputs: ["chip"], outputs: ["chipPointerDown", "chipClick", "chipFilterClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxePivotFieldPanelComponent, isStandalone: true, selector: "nxe-pivot-field-panel", inputs: { engine: { classPropertyName: "engine", publicName: "engine", isSignal: true, isRequired: false, transformFunction: null }, showFilterFields: { classPropertyName: "showFilterFields", publicName: "showFilterFields", isSignal: true, isRequired: false, transformFunction: null }, showDataFields: { classPropertyName: "showDataFields", publicName: "showDataFields", isSignal: true, isRequired: false, transformFunction: null }, showColumnFields: { classPropertyName: "showColumnFields", publicName: "showColumnFields", isSignal: true, isRequired: false, transformFunction: null }, showRowFields: { classPropertyName: "showRowFields", publicName: "showRowFields", isSignal: true, isRequired: false, transformFunction: null }, allowFieldDragging: { classPropertyName: "allowFieldDragging", publicName: "allowFieldDragging", isSignal: true, isRequired: false, transformFunction: null }, allowSorting: { classPropertyName: "allowSorting", publicName: "allowSorting", isSignal: true, isRequired: false, transformFunction: null }, allowFiltering: { classPropertyName: "allowFiltering", publicName: "allowFiltering", isSignal: true, isRequired: false, transformFunction: null }, showBorders: { classPropertyName: "showBorders", publicName: "showBorders", isSignal: true, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: true, isRequired: false, transformFunction: null }, toolbarArea: { classPropertyName: "toolbarArea", publicName: "toolbarArea", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldMove: "fieldMove", sortToggle: "sortToggle", filterOpen: "filterOpen" }, host: { classAttribute: "nxe-pivot-field-panel" }, viewQueries: [{ propertyName: "rowAreaTemplate", first: true, predicate: ["rowAreaTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Area subtree mirrors fixtures/fields-panel.html verbatim: .dx-pivotgrid-fields-area >\r\n     table.dx-area-field-container > colgroup + thead.dx-pivotgrid-fields-area-head > tr > td\r\n     chips (.dx-area-field.dx-area-box > .dx-area-field-content) / .dx-empty-area-text.\r\n     The row area carries dx's inline width:100% (fixture line for group=\"row\"). -->\r\n<ng-template #areaTpl let-area=\"area\">\r\n  <div\r\n    class=\"nxe-pivotgrid-fields-area nxe-area-fields\"\r\n    [class.nxe-pivotgrid-drag-action]=\"allowFieldDragging()\"\r\n    [style.width]=\"area.group === 'row' ? '100%' : null\"\r\n    [attr.group]=\"area.group\">\r\n    <table class=\"nxe-area-field-container\">\r\n      <colgroup></colgroup>\r\n      <thead class=\"nxe-pivotgrid-fields-area-head\">\r\n        <tr>\r\n          @if (area.chips.length === 0) {\r\n            <td><div class=\"nxe-empty-area-text\">{{ area.emptyText }}</div></td>\r\n          } @else {\r\n            @for (chip of area.chips; track chip.fieldIndex) {\r\n              <!-- Chip subtree lives in the SHARED NxePivotFieldChipComponent (P3-C3) \u2014 the\r\n                   chooser renders the identical chips; the host div here keeps the fixture's\r\n                   exact .dx-area-field.dx-area-box classes. dx renders panel chips with\r\n                   showColumnLines = (area is row) (m_fields_area.js:120): only the ROW chips\r\n                   float their indicators right; the other bands append them inline. -->\r\n              <td>\r\n                <div\r\n                  nxePivotFieldChip\r\n                  [chip]=\"chip\"\r\n                  [floatIndicators]=\"area.group === 'row'\"\r\n                  (chipPointerDown)=\"onChipPointerDown(chip, area.group, $event)\"\r\n                  (chipClick)=\"onChipClick(chip)\"\r\n                  (chipFilterClick)=\"onChipFilterClick(chip, $event)\"></div>\r\n              </td>\r\n            }\r\n          }\r\n        </tr>\r\n      </thead>\r\n    </table>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- The ROW fields area is NOT a band here: dx hosts it inside the cross-tab's corner\r\n     `.dx-area-description-cell` (oracle \u00A7c \"hosts the ROW field chips\", initial-full-page.png)\r\n     \u2014 NxePivotGridComponent outlets this template into its corner cell. -->\r\n<ng-template #rowAreaTpl>\r\n  @if (showRowFields()) {\r\n    <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: rowArea() }\" />\r\n  }\r\n</ng-template>\r\n\r\n<!-- dx main-table area cells (ORACLE.md \u00A7d): filter header strip, then data + column header\r\n     cells. With showBorders the bands sit INSIDE the widget border (dx .dx-pivotgrid-border\r\n     draws top/left/right on these band cells). -->\r\n@if (showFilterFields() || showDataFields() || showColumnFields()) {\r\n  <table class=\"nxe-pivot-field-panel-table\" [class.nxe-panel-bordered]=\"showBorders()\">\r\n    <tbody>\r\n      @if (showFilterFields()) {\r\n        <tr>\r\n          <td class=\"nxe-filter-header\" colspan=\"2\">\r\n            <!-- P3-C3: the pivot's `.dx-pivotgrid-toolbar` (field-chooser button) \u2014 dx PREPENDS\r\n                 the toolbar to this cell and floats it right (oracle \u00A7c; m_widget.js\r\n                 `$toolbarContainer.prependTo($targetContainer)` + dx.light float:right). -->\r\n            @if (toolbarArea() === 'filter' && toolbarTemplate(); as tb) {\r\n              <ng-container *ngTemplateOutlet=\"tb\" />\r\n            }\r\n            <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: filterArea() }\" />\r\n          </td>\r\n        </tr>\r\n      }\r\n      @if (showDataFields() || showColumnFields()) {\r\n        <tr>\r\n          @if (showDataFields()) {\r\n            <td class=\"nxe-data-header\" [attr.colspan]=\"showColumnFields() || columnToolbar() ? null : 2\">\r\n              <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: dataArea() }\" />\r\n            </td>\r\n          }\r\n          @if (showColumnFields() || columnToolbar()) {\r\n            <!-- dx's middle toolbar branch (m_widget.js): with the filter band off, the\r\n                 toolbar prepends into the always-present $columnHeader cell \u2014 rendered here\r\n                 even when showColumnFields is off (the cell then holds only the toolbar). -->\r\n            <td class=\"nxe-column-header\" [attr.colspan]=\"showDataFields() ? null : 2\">\r\n              @if (columnToolbar() && toolbarTemplate(); as tb) {\r\n                <ng-container *ngTemplateOutlet=\"tb\" />\r\n              }\r\n              @if (showColumnFields()) {\r\n                <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: columnArea() }\" />\r\n              }\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n}\r\n", styles: ["nxe-pivot-field-panel{display:block;color:var(--nxe-ui-text, #333)}nxe-pivot-field-panel .nxe-pivot-field-panel-table{width:100%;border-collapse:collapse;background:var(--nxe-ui-surface, #fff)}nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr>td{padding:0;vertical-align:top;border-bottom:1px solid var(--nxe-ui-border, #ddd)}nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr:last-child>td{border-bottom:none}nxe-pivot-field-panel .nxe-pivot-field-panel-table.nxe-panel-bordered{border-top:1px solid var(--nxe-ui-border, #ddd);border-left:1px solid var(--nxe-ui-border, #ddd);border-right:1px solid var(--nxe-ui-border, #ddd)}nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr>td.nxe-data-header,nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr>td.nxe-column-header{background-color:var(--nxe-ui-border-faded, rgba(221, 221, 221, .2))}nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr>td.nxe-data-header{border-right:1px solid var(--nxe-ui-border, #ddd)}nxe-pivot-field-panel .nxe-area-field-container{border-collapse:collapse}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NxePivotFieldChipComponent, selector: "div[nxePivotFieldChip]", inputs: ["chip", "floatIndicators"], outputs: ["chipPointerDown", "chipClick", "chipFilterClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxePivotFieldPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nxe-pivot-field-panel', standalone: true, imports: [NgTemplateOutlet, NxePivotFieldChipComponent], host: { class: 'nxe-pivot-field-panel' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- Area subtree mirrors fixtures/fields-panel.html verbatim: .dx-pivotgrid-fields-area >\r\n     table.dx-area-field-container > colgroup + thead.dx-pivotgrid-fields-area-head > tr > td\r\n     chips (.dx-area-field.dx-area-box > .dx-area-field-content) / .dx-empty-area-text.\r\n     The row area carries dx's inline width:100% (fixture line for group=\"row\"). -->\r\n<ng-template #areaTpl let-area=\"area\">\r\n  <div\r\n    class=\"dx-pivotgrid-fields-area dx-area-fields\"\r\n    [class.dx-pivotgrid-drag-action]=\"allowFieldDragging()\"\r\n    [style.width]=\"area.group === 'row' ? '100%' : null\"\r\n    [attr.group]=\"area.group\">\r\n    <table class=\"dx-area-field-container\">\r\n      <colgroup></colgroup>\r\n      <thead class=\"dx-pivotgrid-fields-area-head\">\r\n        <tr>\r\n          @if (area.chips.length === 0) {\r\n            <td><div class=\"dx-empty-area-text\">{{ area.emptyText }}</div></td>\r\n          } @else {\r\n            @for (chip of area.chips; track chip.fieldIndex) {\r\n              <!-- Chip subtree lives in the SHARED NxePivotFieldChipComponent (P3-C3) \u2014 the\r\n                   chooser renders the identical chips; the host div here keeps the fixture's\r\n                   exact .dx-area-field.dx-area-box classes. -->\r\n              <td>\r\n                <div\r\n                  nxePivotFieldChip\r\n                  [chip]=\"chip\"\r\n                  (chipPointerDown)=\"onChipPointerDown(chip, area.group, $event)\"\r\n                  (chipClick)=\"onChipClick(chip)\"\r\n                  (chipFilterClick)=\"onChipFilterClick(chip, $event)\"></div>\r\n              </td>\r\n            }\r\n          }\r\n        </tr>\r\n      </thead>\r\n    </table>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- The ROW fields area is NOT a band here: dx hosts it inside the cross-tab's corner\r\n     `.dx-area-description-cell` (oracle \u00A7c \"hosts the ROW field chips\", initial-full-page.png)\r\n     \u2014 NxePivotGridComponent outlets this template into its corner cell. -->\r\n<ng-template #rowAreaTpl>\r\n  @if (showRowFields()) {\r\n    <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: rowArea() }\" />\r\n  }\r\n</ng-template>\r\n\r\n<!-- dx main-table area cells (ORACLE.md \u00A7d): filter header strip, then data + column header\r\n     cells. With showBorders the bands sit INSIDE the widget border (dx .dx-pivotgrid-border\r\n     draws top/left/right on these band cells). -->\r\n@if (showFilterFields() || showDataFields() || showColumnFields()) {\r\n  <table class=\"nxe-pivot-field-panel-table\" [class.nxe-panel-bordered]=\"showBorders()\">\r\n    <tbody>\r\n      @if (showFilterFields()) {\r\n        <tr>\r\n          <td class=\"dx-filter-header\" colspan=\"2\">\r\n            <!-- P3-C3: the pivot's `.dx-pivotgrid-toolbar` (field-chooser button) \u2014 dx PREPENDS\r\n                 the toolbar to this cell and floats it right (oracle \u00A7c; m_widget.js\r\n                 `$toolbarContainer.prependTo($targetContainer)` + dx.light float:right). -->\r\n            @if (toolbarArea() === 'filter' && toolbarTemplate(); as tb) {\r\n              <ng-container *ngTemplateOutlet=\"tb\" />\r\n            }\r\n            <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: filterArea() }\" />\r\n          </td>\r\n        </tr>\r\n      }\r\n      @if (showDataFields() || showColumnFields()) {\r\n        <tr>\r\n          @if (showDataFields()) {\r\n            <td class=\"dx-data-header\" [attr.colspan]=\"showColumnFields() || columnToolbar() ? null : 2\">\r\n              <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: dataArea() }\" />\r\n            </td>\r\n          }\r\n          @if (showColumnFields() || columnToolbar()) {\r\n            <!-- dx's middle toolbar branch (m_widget.js): with the filter band off, the\r\n                 toolbar prepends into the always-present $columnHeader cell \u2014 rendered here\r\n                 even when showColumnFields is off (the cell then holds only the toolbar). -->\r\n            <td class=\"dx-column-header\" [attr.colspan]=\"showDataFields() ? null : 2\">\r\n              @if (columnToolbar() && toolbarTemplate(); as tb) {\r\n                <ng-container *ngTemplateOutlet=\"tb\" />\r\n              }\r\n              @if (showColumnFields()) {\r\n                <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: columnArea() }\" />\r\n              }\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n}\r\n", styles: ["nxe-pivot-field-panel{display:block;color:#333}nxe-pivot-field-panel .nxe-pivot-field-panel-table{width:100%;border-collapse:collapse;background:#fff}nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr>td{padding:0;vertical-align:top;border-bottom:1px solid #ddd}nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr:last-child>td{border-bottom:none}nxe-pivot-field-panel .nxe-pivot-field-panel-table.nxe-panel-bordered{border-top:1px solid #ddd;border-left:1px solid #ddd;border-right:1px solid #ddd}nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr>td.dx-data-header,nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr>td.dx-column-header{background-color:#ddd3}nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr>td.dx-data-header{border-right:1px solid #ddd}nxe-pivot-field-panel .dx-area-field-container{border-collapse:collapse}\n"] }]
+            args: [{ selector: 'nxe-pivot-field-panel', standalone: true, imports: [NgTemplateOutlet, NxePivotFieldChipComponent], host: { class: 'nxe-pivot-field-panel' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- Area subtree mirrors fixtures/fields-panel.html verbatim: .dx-pivotgrid-fields-area >\r\n     table.dx-area-field-container > colgroup + thead.dx-pivotgrid-fields-area-head > tr > td\r\n     chips (.dx-area-field.dx-area-box > .dx-area-field-content) / .dx-empty-area-text.\r\n     The row area carries dx's inline width:100% (fixture line for group=\"row\"). -->\r\n<ng-template #areaTpl let-area=\"area\">\r\n  <div\r\n    class=\"nxe-pivotgrid-fields-area nxe-area-fields\"\r\n    [class.nxe-pivotgrid-drag-action]=\"allowFieldDragging()\"\r\n    [style.width]=\"area.group === 'row' ? '100%' : null\"\r\n    [attr.group]=\"area.group\">\r\n    <table class=\"nxe-area-field-container\">\r\n      <colgroup></colgroup>\r\n      <thead class=\"nxe-pivotgrid-fields-area-head\">\r\n        <tr>\r\n          @if (area.chips.length === 0) {\r\n            <td><div class=\"nxe-empty-area-text\">{{ area.emptyText }}</div></td>\r\n          } @else {\r\n            @for (chip of area.chips; track chip.fieldIndex) {\r\n              <!-- Chip subtree lives in the SHARED NxePivotFieldChipComponent (P3-C3) \u2014 the\r\n                   chooser renders the identical chips; the host div here keeps the fixture's\r\n                   exact .dx-area-field.dx-area-box classes. dx renders panel chips with\r\n                   showColumnLines = (area is row) (m_fields_area.js:120): only the ROW chips\r\n                   float their indicators right; the other bands append them inline. -->\r\n              <td>\r\n                <div\r\n                  nxePivotFieldChip\r\n                  [chip]=\"chip\"\r\n                  [floatIndicators]=\"area.group === 'row'\"\r\n                  (chipPointerDown)=\"onChipPointerDown(chip, area.group, $event)\"\r\n                  (chipClick)=\"onChipClick(chip)\"\r\n                  (chipFilterClick)=\"onChipFilterClick(chip, $event)\"></div>\r\n              </td>\r\n            }\r\n          }\r\n        </tr>\r\n      </thead>\r\n    </table>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- The ROW fields area is NOT a band here: dx hosts it inside the cross-tab's corner\r\n     `.dx-area-description-cell` (oracle \u00A7c \"hosts the ROW field chips\", initial-full-page.png)\r\n     \u2014 NxePivotGridComponent outlets this template into its corner cell. -->\r\n<ng-template #rowAreaTpl>\r\n  @if (showRowFields()) {\r\n    <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: rowArea() }\" />\r\n  }\r\n</ng-template>\r\n\r\n<!-- dx main-table area cells (ORACLE.md \u00A7d): filter header strip, then data + column header\r\n     cells. With showBorders the bands sit INSIDE the widget border (dx .dx-pivotgrid-border\r\n     draws top/left/right on these band cells). -->\r\n@if (showFilterFields() || showDataFields() || showColumnFields()) {\r\n  <table class=\"nxe-pivot-field-panel-table\" [class.nxe-panel-bordered]=\"showBorders()\">\r\n    <tbody>\r\n      @if (showFilterFields()) {\r\n        <tr>\r\n          <td class=\"nxe-filter-header\" colspan=\"2\">\r\n            <!-- P3-C3: the pivot's `.dx-pivotgrid-toolbar` (field-chooser button) \u2014 dx PREPENDS\r\n                 the toolbar to this cell and floats it right (oracle \u00A7c; m_widget.js\r\n                 `$toolbarContainer.prependTo($targetContainer)` + dx.light float:right). -->\r\n            @if (toolbarArea() === 'filter' && toolbarTemplate(); as tb) {\r\n              <ng-container *ngTemplateOutlet=\"tb\" />\r\n            }\r\n            <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: filterArea() }\" />\r\n          </td>\r\n        </tr>\r\n      }\r\n      @if (showDataFields() || showColumnFields()) {\r\n        <tr>\r\n          @if (showDataFields()) {\r\n            <td class=\"nxe-data-header\" [attr.colspan]=\"showColumnFields() || columnToolbar() ? null : 2\">\r\n              <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: dataArea() }\" />\r\n            </td>\r\n          }\r\n          @if (showColumnFields() || columnToolbar()) {\r\n            <!-- dx's middle toolbar branch (m_widget.js): with the filter band off, the\r\n                 toolbar prepends into the always-present $columnHeader cell \u2014 rendered here\r\n                 even when showColumnFields is off (the cell then holds only the toolbar). -->\r\n            <td class=\"nxe-column-header\" [attr.colspan]=\"showDataFields() ? null : 2\">\r\n              @if (columnToolbar() && toolbarTemplate(); as tb) {\r\n                <ng-container *ngTemplateOutlet=\"tb\" />\r\n              }\r\n              @if (showColumnFields()) {\r\n                <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: columnArea() }\" />\r\n              }\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n}\r\n", styles: ["nxe-pivot-field-panel{display:block;color:var(--nxe-ui-text, #333)}nxe-pivot-field-panel .nxe-pivot-field-panel-table{width:100%;border-collapse:collapse;background:var(--nxe-ui-surface, #fff)}nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr>td{padding:0;vertical-align:top;border-bottom:1px solid var(--nxe-ui-border, #ddd)}nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr:last-child>td{border-bottom:none}nxe-pivot-field-panel .nxe-pivot-field-panel-table.nxe-panel-bordered{border-top:1px solid var(--nxe-ui-border, #ddd);border-left:1px solid var(--nxe-ui-border, #ddd);border-right:1px solid var(--nxe-ui-border, #ddd)}nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr>td.nxe-data-header,nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr>td.nxe-column-header{background-color:var(--nxe-ui-border-faded, rgba(221, 221, 221, .2))}nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr>td.nxe-data-header{border-right:1px solid var(--nxe-ui-border, #ddd)}nxe-pivot-field-panel .nxe-area-field-container{border-collapse:collapse}\n"] }]
         }], propDecorators: { engine: [{ type: i0.Input, args: [{ isSignal: true, alias: "engine", required: false }] }], showFilterFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilterFields", required: false }] }], showDataFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDataFields", required: false }] }], showColumnFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnFields", required: false }] }], showRowFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRowFields", required: false }] }], allowFieldDragging: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFieldDragging", required: false }] }], allowSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSorting", required: false }] }], allowFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFiltering", required: false }] }], showBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBorders", required: false }] }], toolbarTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarTemplate", required: false }] }], toolbarArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarArea", required: false }] }], fieldMove: [{ type: i0.Output, args: ["fieldMove"] }], sortToggle: [{ type: i0.Output, args: ["sortToggle"] }], filterOpen: [{ type: i0.Output, args: ["filterOpen"] }], rowAreaTemplate: [{ type: i0.ViewChild, args: ['rowAreaTpl', { isSignal: true }] }] } });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // nxe-pivot-field-chooser — the dx field chooser popup (dxo-field-chooser), P3-C3. Renders the
 // popup CONTENT the pivot opens in a CDK overlay: dx popup title bar ("Field Chooser" + close X,
 // dxPivotGrid fieldChooser defaults, m_widget.js `_renderFieldChooser`) over the exact
-// `.dx-pivotgridfieldchooser` DOM harvested from the live broker
-// (tools/visual-parity/reference/pivot/fixtures/field-chooser.html): layout 0 = two `.dx-row`s
-// of two `.dx-col`s — [All Fields tree | Row+Column areas] over [Filter | Data]
+// `.nxe-pivotgridfieldchooser` DOM harvested from the live broker
+// (tools/visual-parity/reference/pivot/fixtures/field-chooser.html): layout 0 = two `.nxe-row`s
+// of two `.nxe-col`s — [All Fields tree | Row+Column areas] over [Filter | Data]
 // (m_field_chooser.js `_renderLayout0`). Chips reuse the panel's shared
 // NxePivotFieldChipComponent; the All Fields tree mirrors the fixture's dx-treeview markup
 // (flat leaves — the app's local fields have no dimension/displayFolder groups).
@@ -2624,7 +2653,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 //      so FieldChooserBase's own default (true) applies regardless of fieldPanel settings.
 //  - DROP targets (sortable/m_sortable.js `getTargetGroup` + the drag-end handler's
 //      `if ($targetGroup)` guard): onChanged fires ONLY when the release lands inside a
-//      group's `.dx-area-fields` box. The All-Fields TREE box is a group WITHOUT a `group`
+//      group's `.nxe-area-fields` box. The All-Fields TREE box is a group WITHOUT a `group`
 //      attr, so a drop there resolves `targetGroup` undefined -> `_applyChanges({area:
 //      undefined})` = the one drag-remove path (with the dx-drag-target hover highlight,
 //      like any group). A release anywhere else — title bar, captions, paddings, outside
@@ -2634,9 +2663,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 //      `getCompareFunction`) — the fixture's alphabetical list.
 //
 // Geometry (oracle/chooser-probe.json vs config height 400): dx applies fieldChooser
-// width/height to the popup's `.dx-overlay-content` BOX — 600x400 with 1px borders. Inside:
+// width/height to the popup's `.nxe-overlay-content` BOX — 600x400 with 1px borders. Inside:
 // the 49px title bar (6px padding x2 + 36px toolbar row + 1px rule) and the remaining 349px
-// `.dx-popup-content.dx-pivotgridfieldchooser` (20px padding -> dx stamps inline height:309px;
+// `.nxe-popup-content.nxe-pivotgridfieldchooser` (20px padding -> dx stamps inline height:309px;
 // here flexbox yields the same box). 598x349 measured = 600x400 minus borders minus title.
 //
 // Known deviations (DEFAULTS.md, P3-C3 rows): no popup drag/resize; no cross-widget drag
@@ -2645,14 +2674,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 // add via checkbox only. dx-true (NOT deviations): no backdrop — an outside click neither
 // closes nor blocks, the pivot behind stays interactive (dx shading:false +
 // hideOnOutsideClick:false); close via title-bar X or Escape only.
-/** dx fieldChooser texts defaults (m_field_chooser.js `_getDefaultOptions` messages). */
-const CHOOSER_TEXTS = {
-    allFields: 'All Fields',
-    rowFields: 'Row Fields',
-    columnFields: 'Column Fields',
-    filterFields: 'Filter Fields',
-    dataFields: 'Data Fields',
-    title: 'Field Chooser',
+/** dx fieldChooser texts (m_field_chooser.js `_getDefaultOptions` messages), as library message keys. */
+const CHOOSER_TEXT_KEYS = {
+    allFields: 'pivot.chooser.allFields',
+    rowFields: 'pivot.chooser.rowFields',
+    columnFields: 'pivot.chooser.columnFields',
+    filterFields: 'pivot.chooser.filterFields',
+    dataFields: 'pivot.chooser.dataFields',
+    title: 'pivot.chooser.title',
 };
 /** dx `_renderArea` icon names per area (m_field_chooser const.ICONS). */
 const AREA_ICONS = {
@@ -2693,13 +2722,21 @@ class NxePivotFieldChooserComponent {
     filterOpen = output();
     /** The title-bar X — the pivot disposes the overlay (Escape/backdrop close there too). */
     closed = output();
-    texts = CHOOSER_TEXTS;
+    messages = inject(NxeMessageService);
+    /** The chooser's captions in the active language; read in the template, so a switch re-renders. */
+    get texts() {
+        const out = {};
+        for (const [name, key] of Object.entries(CHOOSER_TEXT_KEYS)) {
+            out[name] = this.messages.t(key);
+        }
+        return out;
+    }
     allIcon = AREA_ICONS.all;
     searchText = signal('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
     elementRef = inject((ElementRef));
     zone = inject(NgZone);
-    /** Popup box size — dx puts fieldChooser.width/height on `.dx-overlay-content` (600 dflt). */
+    /** Popup box size — dx puts fieldChooser.width/height on `.nxe-overlay-content` (600 dflt). */
     boxWidth = computed(() => `${this.width() ?? 600}px`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "boxWidth" }] : /* istanbul ignore next */ []));
     boxHeight = computed(() => `${this.height() ?? 600}px`, /* @ts-ignore */
@@ -2782,13 +2819,13 @@ class NxePivotFieldChooserComponent {
         if (this.gesture.consumeClick()) {
             return; // a drag released over the funnel must not also open the popup
         }
-        const origin = event.target?.closest('.dx-area-field') ??
+        const origin = event.target?.closest('.nxe-area-field') ??
             event.target;
         this.filterOpen.emit({ fieldIndex: chip.fieldIndex, origin });
     }
     // --- Dragging between chooser areas --------------------------------------------------------
     // Chips stack VERTICALLY here (unlike the panel's horizontal bands): slots hit-test on the
-    // Y midpoint and the insertion mark is dx's `.dx-position-indicator-vertical` 2px bar.
+    // Y midpoint and the insertion mark is dx's `.nxe-position-indicator-vertical` 2px bar.
     // Drop targets are dx m_sortable's groups — the four `[group]` fields boxes AND the
     // All-Fields tree box (a group WITHOUT a `group` attr, so a drop there resolves to
     // `area: undefined` = REMOVE, with the same dx-drag-target hover highlight). A release
@@ -2800,17 +2837,17 @@ class NxePivotFieldChooserComponent {
         createGhost: () => {
             const ghost = document.createElement('div');
             ghost.className =
-                'nxe-widget dx-pivotgrid-fields-container dx-drag nxe-pivot-drag-ghost';
+                'nxe-widget nxe-pivotgrid-fields-container nxe-drag nxe-pivot-drag-ghost';
             const chip = document.createElement('div');
-            chip.className = 'dx-area-field dx-area-box';
+            chip.className = 'nxe-area-field nxe-area-box';
             const content = document.createElement('div');
-            content.className = 'dx-area-field-content';
+            content.className = 'nxe-area-field-content';
             content.textContent = this.drag?.chip.caption ?? '';
             chip.appendChild(content);
             ghost.appendChild(chip);
             return ghost;
         },
-        sourceDragClasses: ['dx-drag-source'],
+        sourceDragClasses: ['nxe-drag-source'],
         dragMove: (x, y) => this.trackPointer(x, y),
         drop: () => this.completeDrop(),
         clearDropVisuals: () => {
@@ -2821,8 +2858,8 @@ class NxePivotFieldChooserComponent {
                 d.targetEl = null;
             }
             this.host()
-                .querySelectorAll('.dx-drag-target')
-                .forEach((el) => el.classList.remove('dx-drag-target'));
+                .querySelectorAll('.nxe-drag-target')
+                .forEach((el) => el.classList.remove('nxe-drag-target'));
         },
         reset: () => {
             this.drag = null;
@@ -2854,7 +2891,7 @@ class NxePivotFieldChooserComponent {
         const chips = (engine ? engine.areaFields(group) : []).map(({ fieldIndex, field }) => buildChip(fieldIndex, field, group, this.allowSorting(), this.allowFiltering()));
         return {
             group,
-            caption: CHOOSER_TEXTS[`${group}Fields`],
+            caption: this.messages.t(CHOOSER_TEXT_KEYS[`${group}Fields`]),
             icon: AREA_ICONS[group],
             chips,
         };
@@ -2884,10 +2921,10 @@ class NxePivotFieldChooserComponent {
             const r = el.getBoundingClientRect();
             return x >= r.left && x <= r.right && y >= r.top && y <= r.bottom;
         };
-        const zones = Array.from(this.host().querySelectorAll('.dx-area-fields[group]'));
+        const zones = Array.from(this.host().querySelectorAll('.nxe-area-fields[group]'));
         const hitEl = zones.find(inRect) ?? null;
         if (d.targetEl && d.targetEl !== hitEl) {
-            d.targetEl.classList.remove('dx-drag-target');
+            d.targetEl.classList.remove('nxe-drag-target');
             d.targetEl = null;
         }
         if (!hitEl) {
@@ -2898,9 +2935,9 @@ class NxePivotFieldChooserComponent {
             d.indicator = null;
             // The All-Fields tree box is dx's REMOVE zone (a sortable group without a
             // `group` attr) and gets the same hover highlight as any target group.
-            const treeEl = this.host().querySelector('.dx-all-fields .dx-area-fields');
+            const treeEl = this.host().querySelector('.nxe-all-fields .nxe-area-fields');
             if (treeEl && inRect(treeEl)) {
-                treeEl.classList.add('dx-drag-target');
+                treeEl.classList.add('nxe-drag-target');
                 d.targetEl = treeEl;
                 d.overTree = true;
                 return;
@@ -2921,11 +2958,11 @@ class NxePivotFieldChooserComponent {
             d.indicator = null;
             return;
         }
-        hitEl.classList.add('dx-drag-target');
+        hitEl.classList.add('nxe-drag-target');
         d.targetEl = hitEl;
         d.targetArea = group;
         d.invalid = false;
-        const chips = Array.from(hitEl.querySelectorAll('.dx-area-field.dx-area-box'));
+        const chips = Array.from(hitEl.querySelectorAll('.nxe-area-field.nxe-area-box'));
         let slot = chips.length;
         for (let i = 0; i < chips.length; i++) {
             const r = chips[i].getBoundingClientRect();
@@ -2937,7 +2974,7 @@ class NxePivotFieldChooserComponent {
         d.slot = slot;
         this.placeIndicator(d, hitEl, chips, slot);
     }
-    /** dx `.dx-position-indicator-vertical`: a 2px bar between the stacked chips. */
+    /** dx `.nxe-position-indicator-vertical`: a 2px bar between the stacked chips. */
     placeIndicator(d, areaEl, chips, slot) {
         if (!chips.length) {
             d.indicator?.remove();
@@ -2949,8 +2986,8 @@ class NxePivotFieldChooserComponent {
         }
         const last = slot >= chips.length;
         d.indicator.className =
-            'dx-position-indicator dx-position-indicator-vertical' +
-                (last ? ' dx-position-indicator-last' : '');
+            'nxe-position-indicator nxe-position-indicator-vertical' +
+                (last ? ' nxe-position-indicator-last' : '');
         const areaRect = areaEl.getBoundingClientRect();
         const ref = last ? chips[chips.length - 1] : chips[slot];
         const refRect = ref.getBoundingClientRect();
@@ -2996,11 +3033,11 @@ class NxePivotFieldChooserComponent {
         this.fieldMove.emit({ fieldIndex: d.chip.fieldIndex, area: d.targetArea, areaIndex: slot });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxePivotFieldChooserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxePivotFieldChooserComponent, isStandalone: true, selector: "nxe-pivot-field-chooser", inputs: { engine: { classPropertyName: "engine", publicName: "engine", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, allowSearch: { classPropertyName: "allowSearch", publicName: "allowSearch", isSignal: true, isRequired: false, transformFunction: null }, allowSorting: { classPropertyName: "allowSorting", publicName: "allowSorting", isSignal: true, isRequired: false, transformFunction: null }, allowFiltering: { classPropertyName: "allowFiltering", publicName: "allowFiltering", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldMove: "fieldMove", sortToggle: "sortToggle", filterOpen: "filterOpen", closed: "closed" }, host: { classAttribute: "nxe-widget nxe-pivot-field-chooser-popup dx-fieldchooser-popup" }, ngImport: i0, template: "<!-- dx popup box: fieldChooser width/height land on `.dx-overlay-content` (m_widget.js popup\r\n     options; 600x400 -> 598x349 content once the 1px borders + 49px title bar are taken out \u2014\r\n     oracle/chooser-probe.json reconciliation in the component header). Title bar per the\r\n     full-page capture: \"Field Chooser\" left, X right, 1px rule beneath, popup centered. -->\r\n<div\r\n  class=\"dx-overlay-content dx-popup-normal\"\r\n  [style.width]=\"boxWidth()\"\r\n  [style.height]=\"boxHeight()\">\r\n  <div class=\"dx-popup-title dx-has-close-button\">\r\n    <span class=\"dx-toolbar-label\">{{ texts.title }}</span>\r\n    <span\r\n      class=\"dx-closebutton\"\r\n      role=\"button\"\r\n      tabindex=\"0\"\r\n      aria-label=\"Close\"\r\n      (click)=\"closed.emit()\"\r\n      (keydown.enter)=\"closed.emit()\"></span>\r\n  </div>\r\n\r\n  <!-- fixtures/field-chooser.html verbatim from here down: the chooser root carries\r\n       dx-popup-content + dx-pivotgridfieldchooser + dx-pivotgrid-fields-container (the class\r\n       that arms the shared chip chrome in dx-compat.css), then layout 0's two rows. -->\r\n  <div class=\"dx-popup-content dx-widget dx-pivotgridfieldchooser dx-pivotgrid-fields-container\">\r\n    <div class=\"dx-pivotgridfieldchooser-container dx-layout-0\">\r\n      <div class=\"dx-row\">\r\n        <div class=\"dx-col\">\r\n          <!-- All Fields: dx-treeview of EVERY defined field, checkbox = has an area. -->\r\n          <div class=\"dx-area dx-all-fields\">\r\n            <div class=\"dx-area-fields-header\">\r\n              <span class=\"dx-area-icon dx-icon-{{ allIcon }}\"></span><span>&nbsp;</span><span class=\"dx-area-caption\">{{ texts.allFields }}</span>\r\n            </div>\r\n            <div\r\n              class=\"dx-area-fields dx-pivotgrid-drag-action dx-treeview-border-visible dx-widget dx-collection dx-treeview\"\r\n              tabindex=\"0\"\r\n              role=\"tree\">\r\n              @if (allowSearch()) {\r\n                <!-- dx allowSearch: the treeview search editor (dx-compat gives it margin:5px);\r\n                     default FALSE \u2014 the broker capture has no search box (oracle \u00A7c). -->\r\n                <div class=\"dx-treeview-search dx-texteditor dx-searchbox\">\r\n                  <input\r\n                    class=\"dx-texteditor-input\"\r\n                    type=\"text\"\r\n                    placeholder=\"Search\"\r\n                    [value]=\"searchText()\"\r\n                    (input)=\"onSearchInput($event)\" />\r\n                </div>\r\n              }\r\n              <div class=\"dx-scrollable dx-scrollable-vertical\">\r\n                <div class=\"dx-scrollable-wrapper\">\r\n                  <div class=\"dx-scrollable-container\">\r\n                    <div class=\"dx-scrollable-content\">\r\n                      <ul class=\"dx-treeview-node-container\" role=\"group\">\r\n                        @for (item of treeItems(); track item.fieldIndex) {\r\n                          <li\r\n                            class=\"dx-treeview-node dx-treeview-item-with-checkbox dx-treeview-root-node dx-treeview-node-is-leaf\"\r\n                            [class.dx-state-selected]=\"item.selected\"\r\n                            [attr.data-item-id]=\"$index + 1\"\r\n                            role=\"treeitem\"\r\n                            [attr.aria-label]=\"item.caption\"\r\n                            aria-level=\"1\"\r\n                            [attr.aria-selected]=\"item.selected\">\r\n                            <div class=\"dx-item dx-treeview-item\">\r\n                              <div class=\"dx-item-content dx-treeview-item-content\">\r\n                                <div class=\"dx-area-field\" tree-view-item=\"true\"><span>{{ item.caption }}</span></div>\r\n                              </div>\r\n                              <div\r\n                                class=\"dx-widget dx-checkbox\"\r\n                                [class.dx-checkbox-checked]=\"item.selected\"\r\n                                role=\"checkbox\"\r\n                                tabindex=\"0\"\r\n                                [attr.aria-checked]=\"item.selected\"\r\n                                aria-label=\"Check state\"\r\n                                (click)=\"onCheckboxClick(item)\"\r\n                                (keydown.space)=\"onCheckboxClick(item)\">\r\n                                <input type=\"hidden\" [value]=\"item.selected\" />\r\n                                <div class=\"dx-checkbox-container\"><span class=\"dx-checkbox-icon\"></span></div>\r\n                              </div>\r\n                              <div class=\"dx-treeview-expander-icon-stub\"></div>\r\n                            </div>\r\n                          </li>\r\n                        }\r\n                      </ul>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"dx-col\">\r\n          <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: rowArea() }\" />\r\n          <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: columnArea() }\" />\r\n        </div>\r\n      </div>\r\n      <div class=\"dx-row\">\r\n        <div class=\"dx-col\">\r\n          <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: filterArea() }\" />\r\n        </div>\r\n        <div class=\"dx-col\">\r\n          <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: dataArea() }\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- One group area (dx `_renderArea`): header (icon + caption), then the bordered fields box\r\n     with the stacked chips. An EMPTY area shows nothing \u2014 the chooser has no\r\n     \"Drop \u2026 Fields Here\" strings (fixture: the filter area's field container is empty). -->\r\n<ng-template #areaTpl let-area=\"area\">\r\n  <div class=\"dx-area\">\r\n    <div class=\"dx-area-fields-header\">\r\n      <span class=\"dx-area-icon dx-icon-{{ area.icon }}\"></span><span>&nbsp;</span><span class=\"dx-area-caption\">{{ area.caption }}</span>\r\n    </div>\r\n    <div\r\n      class=\"dx-area-fields dx-pivotgrid-drag-action dx-scrollable dx-scrollable-vertical\"\r\n      [attr.group]=\"area.group\"\r\n      allow-scrolling=\"true\">\r\n      <div class=\"dx-scrollable-wrapper\">\r\n        <div class=\"dx-scrollable-container\" tabindex=\"0\">\r\n          <div class=\"dx-scrollable-content\">\r\n            <div class=\"dx-area-field-container\">\r\n              @for (chip of area.chips; track chip.fieldIndex) {\r\n                <div\r\n                  nxePivotFieldChip\r\n                  [chip]=\"chip\"\r\n                  (chipPointerDown)=\"onChipPointerDown(chip, area.group, $event)\"\r\n                  (chipClick)=\"onChipClick(chip)\"\r\n                  (chipFilterClick)=\"onChipFilterClick(chip, $event)\"></div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";nxe-pivot-field-chooser{display:block}nxe-pivot-field-chooser>.dx-overlay-content{display:flex;flex-direction:column;box-sizing:border-box;min-width:400px;min-height:250px;max-width:95vw;max-height:95vh;background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 6px 12px #0000002d;color:#333;overflow:hidden}nxe-pivot-field-chooser .dx-popup-title{flex:0 0 auto;display:flex;align-items:center;padding:6px 20px;border-bottom:1px solid #ddd}nxe-pivot-field-chooser .dx-popup-title .dx-toolbar-label{flex:1 1 auto;font-size:20px;line-height:36px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nxe-pivot-field-chooser .dx-popup-title .dx-closebutton{position:relative;flex:0 0 auto;width:14px;height:14px;margin:9px 0 9px 9px;cursor:pointer;color:#999}nxe-pivot-field-chooser .dx-popup-title .dx-closebutton:before,nxe-pivot-field-chooser .dx-popup-title .dx-closebutton:after{content:\"\";position:absolute;left:50%;top:50%;width:15px;height:1.5px;background:currentColor}nxe-pivot-field-chooser .dx-popup-title .dx-closebutton:before{transform:translate(-50%,-50%) rotate(45deg)}nxe-pivot-field-chooser .dx-popup-title .dx-closebutton:after{transform:translate(-50%,-50%) rotate(-45deg)}nxe-pivot-field-chooser .dx-popup-title .dx-closebutton:hover{color:#333}nxe-pivot-field-chooser .dx-popup-content.dx-pivotgridfieldchooser{flex:1 1 auto;min-height:0;box-sizing:border-box;padding:20px}nxe-pivot-field-chooser .dx-scrollable-container{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;outline:0}nxe-pivot-field-chooser .dx-scrollable-wrapper{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}nxe-pivot-field-chooser .dx-treeview-search{flex:0 0 auto}nxe-pivot-field-chooser .dx-treeview-search .dx-texteditor-input{box-sizing:border-box;width:100%;padding:7px 9px;border:1px solid #ddd;border-radius:4px;background:#fff;color:#333;font:inherit;outline:0}nxe-pivot-field-chooser .dx-treeview-search .dx-texteditor-input:focus{border-color:#337ab7}nxe-pivot-field-chooser .dx-area-icon{position:relative;color:#333}nxe-pivot-field-chooser .dx-area-icon:before{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box}nxe-pivot-field-chooser .dx-icon-smalliconslayout:before{width:3px;height:3px;left:3px;top:3px;transform:none;background:currentColor;box-shadow:5px 0 0 currentColor,10px 0 0 currentColor,0 5px 0 currentColor,5px 5px 0 currentColor,10px 5px 0 currentColor,0 10px 0 currentColor,5px 10px 0 currentColor,10px 10px 0 currentColor}nxe-pivot-field-chooser .dx-icon-rowfield:before{width:14px;height:12px;border:1px solid currentColor;background:linear-gradient(90deg,currentColor 0 4px,transparent 4px)}nxe-pivot-field-chooser .dx-icon-columnfield:before{width:14px;height:12px;border:1px solid currentColor;background:linear-gradient(180deg,currentColor 0 4px,transparent 4px)}nxe-pivot-field-chooser .dx-icon-filter:before{width:12px;height:12px;background:currentColor;clip-path:polygon(0 0,100% 0,62% 46%,62% 100%,38% 100%,38% 46%)}nxe-pivot-field-chooser .dx-icon-formula:before{content:\"\\3a3\";font-size:14px;line-height:1;font-weight:400}nxe-pivot-field-chooser .dx-checkbox-checked .dx-checkbox-icon:after{content:\"\";position:absolute;left:7px;top:3px;width:6px;height:11px;box-sizing:border-box;border:solid #337ab7;border-width:0 2px 2px 0;transform:rotate(45deg)}.nxe-fieldchooser-pane{pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NxePivotFieldChipComponent, selector: "div[nxePivotFieldChip]", inputs: ["chip"], outputs: ["chipPointerDown", "chipClick", "chipFilterClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxePivotFieldChooserComponent, isStandalone: true, selector: "nxe-pivot-field-chooser", inputs: { engine: { classPropertyName: "engine", publicName: "engine", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, allowSearch: { classPropertyName: "allowSearch", publicName: "allowSearch", isSignal: true, isRequired: false, transformFunction: null }, allowSorting: { classPropertyName: "allowSorting", publicName: "allowSorting", isSignal: true, isRequired: false, transformFunction: null }, allowFiltering: { classPropertyName: "allowFiltering", publicName: "allowFiltering", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldMove: "fieldMove", sortToggle: "sortToggle", filterOpen: "filterOpen", closed: "closed" }, host: { classAttribute: "nxe-widget nxe-pivot-field-chooser-popup nxe-fieldchooser-popup" }, ngImport: i0, template: "<!-- dx popup box: fieldChooser width/height land on `.dx-overlay-content` (m_widget.js popup\r\n     options; 600x400 -> 598x349 content once the 1px borders + 49px title bar are taken out \u2014\r\n     oracle/chooser-probe.json reconciliation in the component header). Title bar per the\r\n     full-page capture: \"Field Chooser\" left, X right, 1px rule beneath, popup centered. -->\r\n<div\r\n  class=\"nxe-overlay-content nxe-popup-normal\"\r\n  [style.width]=\"boxWidth()\"\r\n  [style.height]=\"boxHeight()\">\r\n  <div class=\"nxe-popup-title nxe-has-close-button\">\r\n    <span class=\"nxe-toolbar-label\">{{ texts.title }}</span>\r\n    <span\r\n      class=\"nxe-closebutton\"\r\n      role=\"button\"\r\n      tabindex=\"0\"\r\n      [attr.aria-label]=\"messages.t('common.close')\"\r\n      (click)=\"closed.emit()\"\r\n      (keydown.enter)=\"closed.emit()\"></span>\r\n  </div>\r\n\r\n  <!-- fixtures/field-chooser.html verbatim from here down: the chooser root carries\r\n       dx-popup-content + dx-pivotgridfieldchooser + dx-pivotgrid-fields-container (the class\r\n       that arms the shared chip chrome, nxe-pivot-field-chip), then layout 0's two rows. -->\r\n  <div class=\"nxe-popup-content nxe-widget nxe-pivotgridfieldchooser nxe-pivotgrid-fields-container\">\r\n    <div class=\"nxe-pivotgridfieldchooser-container nxe-layout-0\">\r\n      <div class=\"nxe-row\">\r\n        <div class=\"nxe-col\">\r\n          <!-- All Fields: dx-treeview of EVERY defined field, checkbox = has an area. -->\r\n          <div class=\"nxe-area nxe-all-fields\">\r\n            <div class=\"nxe-area-fields-header\">\r\n              <span class=\"nxe-area-icon nxe-icon-{{ allIcon }}\"></span><span>&nbsp;</span><span class=\"nxe-area-caption\">{{ texts.allFields }}</span>\r\n            </div>\r\n            <div\r\n              class=\"nxe-area-fields nxe-pivotgrid-drag-action nxe-treeview-border-visible nxe-widget nxe-collection nxe-treeview\"\r\n              tabindex=\"0\"\r\n              role=\"tree\">\r\n              @if (allowSearch()) {\r\n                <!-- dx allowSearch: the treeview search editor (dx margin:5px, in the scss);\r\n                     default FALSE \u2014 the broker capture has no search box (oracle \u00A7c). -->\r\n                <div class=\"nxe-treeview-search nxe-texteditor nxe-searchbox\">\r\n                  <input\r\n                    class=\"nxe-texteditor-input\"\r\n                    type=\"text\"\r\n                    [attr.placeholder]=\"messages.t('common.search')\"\r\n                    [value]=\"searchText()\"\r\n                    (input)=\"onSearchInput($event)\" />\r\n                </div>\r\n              }\r\n              <div class=\"nxe-scrollable nxe-scrollable-vertical\">\r\n                <div class=\"nxe-scrollable-wrapper\">\r\n                  <div class=\"nxe-scrollable-container\">\r\n                    <div class=\"nxe-scrollable-content\">\r\n                      <ul class=\"nxe-treeview-node-container\" role=\"group\">\r\n                        @for (item of treeItems(); track item.fieldIndex) {\r\n                          <li\r\n                            class=\"nxe-treeview-node nxe-treeview-item-with-checkbox nxe-treeview-root-node nxe-treeview-node-is-leaf\"\r\n                            [class.nxe-state-selected]=\"item.selected\"\r\n                            [attr.data-item-id]=\"$index + 1\"\r\n                            role=\"treeitem\"\r\n                            [attr.aria-label]=\"item.caption\"\r\n                            aria-level=\"1\"\r\n                            [attr.aria-selected]=\"item.selected\">\r\n                            <div class=\"nxe-item nxe-treeview-item\">\r\n                              <div class=\"nxe-item-content nxe-treeview-item-content\">\r\n                                <div class=\"nxe-area-field\" tree-view-item=\"true\"><span>{{ item.caption }}</span></div>\r\n                              </div>\r\n                              <div\r\n                                class=\"nxe-widget nxe-checkbox\"\r\n                                [class.nxe-checkbox-checked]=\"item.selected\"\r\n                                role=\"checkbox\"\r\n                                tabindex=\"0\"\r\n                                [attr.aria-checked]=\"item.selected\"\r\n                                [attr.aria-label]=\"messages.t('pivot.chooser.checkState')\"\r\n                                (click)=\"onCheckboxClick(item)\"\r\n                                (keydown.space)=\"onCheckboxClick(item)\">\r\n                                <input type=\"hidden\" [value]=\"item.selected\" />\r\n                                <div class=\"nxe-checkbox-container\"><span class=\"nxe-checkbox-icon\"></span></div>\r\n                              </div>\r\n                              <div class=\"nxe-treeview-expander-icon-stub\"></div>\r\n                            </div>\r\n                          </li>\r\n                        }\r\n                      </ul>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"nxe-col\">\r\n          <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: rowArea() }\" />\r\n          <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: columnArea() }\" />\r\n        </div>\r\n      </div>\r\n      <div class=\"nxe-row\">\r\n        <div class=\"nxe-col\">\r\n          <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: filterArea() }\" />\r\n        </div>\r\n        <div class=\"nxe-col\">\r\n          <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: dataArea() }\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- One group area (dx `_renderArea`): header (icon + caption), then the bordered fields box\r\n     with the stacked chips. An EMPTY area shows nothing \u2014 the chooser has no\r\n     \"Drop \u2026 Fields Here\" strings (fixture: the filter area's field container is empty). -->\r\n<ng-template #areaTpl let-area=\"area\">\r\n  <div class=\"nxe-area\">\r\n    <div class=\"nxe-area-fields-header\">\r\n      <span class=\"nxe-area-icon nxe-icon-{{ area.icon }}\"></span><span>&nbsp;</span><span class=\"nxe-area-caption\">{{ area.caption }}</span>\r\n    </div>\r\n    <div\r\n      class=\"nxe-area-fields nxe-pivotgrid-drag-action nxe-scrollable nxe-scrollable-vertical\"\r\n      [attr.group]=\"area.group\"\r\n      allow-scrolling=\"true\">\r\n      <div class=\"nxe-scrollable-wrapper\">\r\n        <div class=\"nxe-scrollable-container\" tabindex=\"0\">\r\n          <div class=\"nxe-scrollable-content\">\r\n            <div class=\"nxe-area-field-container\">\r\n              @for (chip of area.chips; track chip.fieldIndex) {\r\n                <!-- dx renderField(field, true) (m_field_chooser.js:465): showColumnLines on,\r\n                     so the indicators float right ahead of the caption. -->\r\n                <div\r\n                  nxePivotFieldChip\r\n                  [chip]=\"chip\"\r\n                  [floatIndicators]=\"true\"\r\n                  (chipPointerDown)=\"onChipPointerDown(chip, area.group, $event)\"\r\n                  (chipClick)=\"onChipClick(chip)\"\r\n                  (chipFilterClick)=\"onChipFilterClick(chip, $event)\"></div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["nxe-pivot-field-chooser{display:block}nxe-pivot-field-chooser>.nxe-overlay-content{display:flex;flex-direction:column;box-sizing:border-box;min-width:max(250px,var(--nxe-ui-fieldchooser-min-width, 0px));min-height:250px;max-width:95vw;max-height:95vh;background:var(--nxe-ui-surface, #fff);border:1px solid var(--nxe-ui-border, #ddd);border-radius:6px;box-shadow:var(--nxe-ui-popup-shadow, 0 6px 12px rgba(0, 0, 0, .176));color:var(--nxe-ui-text, #333);overflow:hidden}nxe-pivot-field-chooser .nxe-popup-title{flex:0 0 auto;display:flex;align-items:center;padding:6px 20px;border-bottom:1px solid var(--nxe-ui-border, #ddd)}nxe-pivot-field-chooser .nxe-popup-title .nxe-toolbar-label{flex:1 1 auto;font-size:20px;line-height:36px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton{position:relative;inset-inline-start:10px;flex:0 0 auto;box-sizing:border-box;width:36px;height:36px;margin:0;margin-inline-start:30px;border:1px solid transparent;border-radius:var(--nxe-ui-radius, 4px);background-color:transparent;color:var(--nxe-ui-text, #333);cursor:pointer;outline:0}nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:before,nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:after{content:\"\";position:absolute;left:50%;top:50%;box-sizing:border-box;width:17px;height:2px;margin:-1px 0 0 -8.5px;background-color:currentColor}@media(forced-colors:active){nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:before,nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:after{forced-color-adjust:none;background-color:CanvasText}}nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:before{transform:rotate(45deg)}nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:after{transform:rotate(-45deg)}nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:hover{background-color:var(--nxe-ui-hover-bg, rgba(0, 0, 0, .04))}nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:focus-visible{background-color:var(--nxe-ui-focus-bg, rgba(0, 0, 0, .08))}nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:active{background-color:var(--nxe-ui-active-bg, rgba(0, 0, 0, .24))}nxe-pivot-field-chooser .nxe-popup-content.nxe-pivotgridfieldchooser{flex:1 1 auto;min-height:0;box-sizing:border-box;padding:20px}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser{position:relative;background-color:var(--nxe-ui-surface, #fff)}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-pivotgridfieldchooser-container{display:flex;overflow:hidden;height:100%}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-pivotgridfieldchooser-container.nxe-layout-0{flex-direction:column}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-pivotgridfieldchooser-container .nxe-row:first-child{flex-grow:2}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-pivotgridfieldchooser-container .nxe-row:nth-child(2){flex-grow:1}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-row{display:flex;flex-direction:row;height:0;min-height:0}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-col{display:flex;flex-direction:column;width:50%;min-height:0}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area{display:flex;flex-direction:column;flex-grow:1;min-height:0;padding:5px}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area-fields{overflow:hidden}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area .nxe-area-fields{display:flex;flex-direction:column;height:0;margin-top:3px;border:1px solid var(--nxe-ui-border, #ddd)}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area-fields[group]{display:flex;padding:5px;background-color:var(--nxe-ui-border-faded, rgba(221, 221, 221, .2))}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area-fields.nxe-drag-target{border-color:var(--nxe-ui-accent, #337ab7)}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area>.nxe-scrollable,nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area>.nxe-scrollable>.nxe-scrollable-wrapper,nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area>.nxe-treeview,nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area>.nxe-treeview>.nxe-scrollable,nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area>.nxe-treeview>.nxe-scrollable>.nxe-scrollable-wrapper{display:flex;flex-direction:column;flex-grow:1;height:0;min-height:0}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area-fields-header .nxe-area-caption{align-self:center}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area .nxe-area-caption{vertical-align:middle}nxe-pivot-field-chooser .nxe-scrollable-container{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;outline:0}nxe-pivot-field-chooser .nxe-scrollable-wrapper{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}nxe-pivot-field-chooser .nxe-treeview-search{flex:0 0 auto;margin:5px}nxe-pivot-field-chooser .nxe-treeview-search .nxe-texteditor-input{box-sizing:border-box;width:100%;padding:7px 9px;border:1px solid var(--nxe-ui-border, #ddd);border-radius:4px;background:var(--nxe-ui-surface, #fff);color:var(--nxe-ui-text, #333);font:inherit;outline:0}nxe-pivot-field-chooser .nxe-treeview-search .nxe-texteditor-input:focus{border-color:var(--nxe-ui-accent, #337ab7)}nxe-pivot-field-chooser .nxe-treeview :focus{outline:0}nxe-pivot-field-chooser .nxe-treeview-node-container{display:block;margin:0;padding:0;overflow:hidden;list-style-position:inside}nxe-pivot-field-chooser .nxe-treeview-border-visible .nxe-scrollable-content>.nxe-treeview-node-container{padding:1px 1px 1px 7px}nxe-pivot-field-chooser .nxe-treeview-node{list-style-type:none;padding-inline-start:15px;-webkit-user-select:none;user-select:none}nxe-pivot-field-chooser .nxe-treeview-node.nxe-treeview-root-node{padding-inline-start:0}nxe-pivot-field-chooser .nxe-treeview-node .nxe-checkbox{order:1;margin:0}nxe-pivot-field-chooser .nxe-treeview-item{display:flex;align-items:center;gap:8px;margin:0;padding:5px 10px;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-pivot-field-chooser .nxe-treeview-item:hover{background-color:var(--nxe-ui-hover-bg, rgba(0, 0, 0, .04))}nxe-pivot-field-chooser .nxe-treeview-item .nxe-treeview-item-content{flex:1 1 auto;order:2}nxe-pivot-field-chooser .nxe-treeview-expander-icon-stub{display:flex;flex-shrink:0;width:22px;height:22px}nxe-pivot-field-chooser .nxe-checkbox{display:inline-block;line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none}nxe-pivot-field-chooser .nxe-checkbox .nxe-checkbox-container{display:flex;align-items:center;justify-content:center;width:22px;height:22px;overflow:hidden}nxe-pivot-field-chooser .nxe-checkbox .nxe-checkbox-icon{display:block;position:relative;flex-shrink:0;box-sizing:border-box;width:22px;height:22px;border:1px solid var(--nxe-ui-border, #ddd);border-radius:2px;background-color:var(--nxe-ui-surface, #fff)}nxe-pivot-field-chooser .nxe-checkbox:hover .nxe-checkbox-icon{border-color:var(--nxe-ui-accent-strong, #265a87)}nxe-pivot-field-chooser .nxe-checkbox:focus-visible .nxe-checkbox-icon{border-color:var(--nxe-ui-accent, #337ab7)}nxe-pivot-field-chooser .nxe-checkbox-checked .nxe-checkbox-icon{color:var(--nxe-ui-accent, #337ab7)}nxe-pivot-field-chooser .nxe-checkbox-checked .nxe-checkbox-icon: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;transform:rotate(45deg)}nxe-pivot-field-chooser .nxe-area-icon{display:inline-block;position:relative;box-sizing:border-box;width:18px;height:18px;vertical-align:middle;color:var(--nxe-ui-text, #333)}nxe-pivot-field-chooser .nxe-area-icon:before,nxe-pivot-field-chooser .nxe-area-icon:after{content:none;position:absolute;box-sizing:border-box}@media(forced-colors:active){nxe-pivot-field-chooser .nxe-area-icon:before,nxe-pivot-field-chooser .nxe-area-icon:after{forced-color-adjust:none;color:CanvasText}}nxe-pivot-field-chooser .nxe-icon-smalliconslayout:before{content:\"\";left:2px;top:2px;width:4px;height:4px;background-color:currentColor;box-shadow:5px 0 currentColor,10px 0 currentColor,0 5px currentColor,5px 5px currentColor,10px 5px currentColor,0 10px currentColor,5px 10px currentColor,10px 10px currentColor}nxe-pivot-field-chooser .nxe-icon-rowfield:before{content:\"\";left:2px;top:2px;width:4px;height:4px;background-color:currentColor;box-shadow:5px 0 currentColor,10px 0 currentColor,0 10px currentColor,5px 10px currentColor,10px 10px currentColor}nxe-pivot-field-chooser .nxe-icon-rowfield:after{content:\"\";left:2px;top:7px;width:14px;height:4px;border:1px solid currentColor}nxe-pivot-field-chooser .nxe-icon-columnfield:before{content:\"\";left:2px;top:2px;width:4px;height:4px;background-color:currentColor;box-shadow:0 5px currentColor,0 10px currentColor,10px 0 currentColor,10px 5px currentColor,10px 10px currentColor}nxe-pivot-field-chooser .nxe-icon-columnfield:after{content:\"\";left:7px;top:2px;width:4px;height:14px;border:1px solid currentColor}nxe-pivot-field-chooser .nxe-icon-filter:before{content:\"\";inset:0;background-color:currentColor;clip-path:polygon(0 0,18px 0,18px 4px,11.5px 10.5px,11.5px 18px,6.5px 18px,6.5px 10.5px,0 4px)}nxe-pivot-field-chooser .nxe-icon-formula:before{content:\"\";left:4px;top:2px;width:10px;height:14px;background-color:currentColor;clip-path:polygon(0 0,10px 0,10px 2px,3.3px 2px,6.4px 7px,3.3px 12px,10px 12px,10px 14px,0 14px,0 13.53px,4.05px 7px,0 .47px)}.nxe-fieldchooser-pane{pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NxePivotFieldChipComponent, selector: "div[nxePivotFieldChip]", inputs: ["chip", "floatIndicators"], outputs: ["chipPointerDown", "chipClick", "chipFilterClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxePivotFieldChooserComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nxe-pivot-field-chooser', standalone: true, imports: [NgTemplateOutlet, NxePivotFieldChipComponent], host: { class: 'nxe-widget nxe-pivot-field-chooser-popup dx-fieldchooser-popup' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- dx popup box: fieldChooser width/height land on `.dx-overlay-content` (m_widget.js popup\r\n     options; 600x400 -> 598x349 content once the 1px borders + 49px title bar are taken out \u2014\r\n     oracle/chooser-probe.json reconciliation in the component header). Title bar per the\r\n     full-page capture: \"Field Chooser\" left, X right, 1px rule beneath, popup centered. -->\r\n<div\r\n  class=\"dx-overlay-content dx-popup-normal\"\r\n  [style.width]=\"boxWidth()\"\r\n  [style.height]=\"boxHeight()\">\r\n  <div class=\"dx-popup-title dx-has-close-button\">\r\n    <span class=\"dx-toolbar-label\">{{ texts.title }}</span>\r\n    <span\r\n      class=\"dx-closebutton\"\r\n      role=\"button\"\r\n      tabindex=\"0\"\r\n      aria-label=\"Close\"\r\n      (click)=\"closed.emit()\"\r\n      (keydown.enter)=\"closed.emit()\"></span>\r\n  </div>\r\n\r\n  <!-- fixtures/field-chooser.html verbatim from here down: the chooser root carries\r\n       dx-popup-content + dx-pivotgridfieldchooser + dx-pivotgrid-fields-container (the class\r\n       that arms the shared chip chrome in dx-compat.css), then layout 0's two rows. -->\r\n  <div class=\"dx-popup-content dx-widget dx-pivotgridfieldchooser dx-pivotgrid-fields-container\">\r\n    <div class=\"dx-pivotgridfieldchooser-container dx-layout-0\">\r\n      <div class=\"dx-row\">\r\n        <div class=\"dx-col\">\r\n          <!-- All Fields: dx-treeview of EVERY defined field, checkbox = has an area. -->\r\n          <div class=\"dx-area dx-all-fields\">\r\n            <div class=\"dx-area-fields-header\">\r\n              <span class=\"dx-area-icon dx-icon-{{ allIcon }}\"></span><span>&nbsp;</span><span class=\"dx-area-caption\">{{ texts.allFields }}</span>\r\n            </div>\r\n            <div\r\n              class=\"dx-area-fields dx-pivotgrid-drag-action dx-treeview-border-visible dx-widget dx-collection dx-treeview\"\r\n              tabindex=\"0\"\r\n              role=\"tree\">\r\n              @if (allowSearch()) {\r\n                <!-- dx allowSearch: the treeview search editor (dx-compat gives it margin:5px);\r\n                     default FALSE \u2014 the broker capture has no search box (oracle \u00A7c). -->\r\n                <div class=\"dx-treeview-search dx-texteditor dx-searchbox\">\r\n                  <input\r\n                    class=\"dx-texteditor-input\"\r\n                    type=\"text\"\r\n                    placeholder=\"Search\"\r\n                    [value]=\"searchText()\"\r\n                    (input)=\"onSearchInput($event)\" />\r\n                </div>\r\n              }\r\n              <div class=\"dx-scrollable dx-scrollable-vertical\">\r\n                <div class=\"dx-scrollable-wrapper\">\r\n                  <div class=\"dx-scrollable-container\">\r\n                    <div class=\"dx-scrollable-content\">\r\n                      <ul class=\"dx-treeview-node-container\" role=\"group\">\r\n                        @for (item of treeItems(); track item.fieldIndex) {\r\n                          <li\r\n                            class=\"dx-treeview-node dx-treeview-item-with-checkbox dx-treeview-root-node dx-treeview-node-is-leaf\"\r\n                            [class.dx-state-selected]=\"item.selected\"\r\n                            [attr.data-item-id]=\"$index + 1\"\r\n                            role=\"treeitem\"\r\n                            [attr.aria-label]=\"item.caption\"\r\n                            aria-level=\"1\"\r\n                            [attr.aria-selected]=\"item.selected\">\r\n                            <div class=\"dx-item dx-treeview-item\">\r\n                              <div class=\"dx-item-content dx-treeview-item-content\">\r\n                                <div class=\"dx-area-field\" tree-view-item=\"true\"><span>{{ item.caption }}</span></div>\r\n                              </div>\r\n                              <div\r\n                                class=\"dx-widget dx-checkbox\"\r\n                                [class.dx-checkbox-checked]=\"item.selected\"\r\n                                role=\"checkbox\"\r\n                                tabindex=\"0\"\r\n                                [attr.aria-checked]=\"item.selected\"\r\n                                aria-label=\"Check state\"\r\n                                (click)=\"onCheckboxClick(item)\"\r\n                                (keydown.space)=\"onCheckboxClick(item)\">\r\n                                <input type=\"hidden\" [value]=\"item.selected\" />\r\n                                <div class=\"dx-checkbox-container\"><span class=\"dx-checkbox-icon\"></span></div>\r\n                              </div>\r\n                              <div class=\"dx-treeview-expander-icon-stub\"></div>\r\n                            </div>\r\n                          </li>\r\n                        }\r\n                      </ul>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"dx-col\">\r\n          <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: rowArea() }\" />\r\n          <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: columnArea() }\" />\r\n        </div>\r\n      </div>\r\n      <div class=\"dx-row\">\r\n        <div class=\"dx-col\">\r\n          <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: filterArea() }\" />\r\n        </div>\r\n        <div class=\"dx-col\">\r\n          <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: dataArea() }\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- One group area (dx `_renderArea`): header (icon + caption), then the bordered fields box\r\n     with the stacked chips. An EMPTY area shows nothing \u2014 the chooser has no\r\n     \"Drop \u2026 Fields Here\" strings (fixture: the filter area's field container is empty). -->\r\n<ng-template #areaTpl let-area=\"area\">\r\n  <div class=\"dx-area\">\r\n    <div class=\"dx-area-fields-header\">\r\n      <span class=\"dx-area-icon dx-icon-{{ area.icon }}\"></span><span>&nbsp;</span><span class=\"dx-area-caption\">{{ area.caption }}</span>\r\n    </div>\r\n    <div\r\n      class=\"dx-area-fields dx-pivotgrid-drag-action dx-scrollable dx-scrollable-vertical\"\r\n      [attr.group]=\"area.group\"\r\n      allow-scrolling=\"true\">\r\n      <div class=\"dx-scrollable-wrapper\">\r\n        <div class=\"dx-scrollable-container\" tabindex=\"0\">\r\n          <div class=\"dx-scrollable-content\">\r\n            <div class=\"dx-area-field-container\">\r\n              @for (chip of area.chips; track chip.fieldIndex) {\r\n                <div\r\n                  nxePivotFieldChip\r\n                  [chip]=\"chip\"\r\n                  (chipPointerDown)=\"onChipPointerDown(chip, area.group, $event)\"\r\n                  (chipClick)=\"onChipClick(chip)\"\r\n                  (chipFilterClick)=\"onChipFilterClick(chip, $event)\"></div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";nxe-pivot-field-chooser{display:block}nxe-pivot-field-chooser>.dx-overlay-content{display:flex;flex-direction:column;box-sizing:border-box;min-width:400px;min-height:250px;max-width:95vw;max-height:95vh;background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 6px 12px #0000002d;color:#333;overflow:hidden}nxe-pivot-field-chooser .dx-popup-title{flex:0 0 auto;display:flex;align-items:center;padding:6px 20px;border-bottom:1px solid #ddd}nxe-pivot-field-chooser .dx-popup-title .dx-toolbar-label{flex:1 1 auto;font-size:20px;line-height:36px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nxe-pivot-field-chooser .dx-popup-title .dx-closebutton{position:relative;flex:0 0 auto;width:14px;height:14px;margin:9px 0 9px 9px;cursor:pointer;color:#999}nxe-pivot-field-chooser .dx-popup-title .dx-closebutton:before,nxe-pivot-field-chooser .dx-popup-title .dx-closebutton:after{content:\"\";position:absolute;left:50%;top:50%;width:15px;height:1.5px;background:currentColor}nxe-pivot-field-chooser .dx-popup-title .dx-closebutton:before{transform:translate(-50%,-50%) rotate(45deg)}nxe-pivot-field-chooser .dx-popup-title .dx-closebutton:after{transform:translate(-50%,-50%) rotate(-45deg)}nxe-pivot-field-chooser .dx-popup-title .dx-closebutton:hover{color:#333}nxe-pivot-field-chooser .dx-popup-content.dx-pivotgridfieldchooser{flex:1 1 auto;min-height:0;box-sizing:border-box;padding:20px}nxe-pivot-field-chooser .dx-scrollable-container{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;outline:0}nxe-pivot-field-chooser .dx-scrollable-wrapper{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}nxe-pivot-field-chooser .dx-treeview-search{flex:0 0 auto}nxe-pivot-field-chooser .dx-treeview-search .dx-texteditor-input{box-sizing:border-box;width:100%;padding:7px 9px;border:1px solid #ddd;border-radius:4px;background:#fff;color:#333;font:inherit;outline:0}nxe-pivot-field-chooser .dx-treeview-search .dx-texteditor-input:focus{border-color:#337ab7}nxe-pivot-field-chooser .dx-area-icon{position:relative;color:#333}nxe-pivot-field-chooser .dx-area-icon:before{content:\"\";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box}nxe-pivot-field-chooser .dx-icon-smalliconslayout:before{width:3px;height:3px;left:3px;top:3px;transform:none;background:currentColor;box-shadow:5px 0 0 currentColor,10px 0 0 currentColor,0 5px 0 currentColor,5px 5px 0 currentColor,10px 5px 0 currentColor,0 10px 0 currentColor,5px 10px 0 currentColor,10px 10px 0 currentColor}nxe-pivot-field-chooser .dx-icon-rowfield:before{width:14px;height:12px;border:1px solid currentColor;background:linear-gradient(90deg,currentColor 0 4px,transparent 4px)}nxe-pivot-field-chooser .dx-icon-columnfield:before{width:14px;height:12px;border:1px solid currentColor;background:linear-gradient(180deg,currentColor 0 4px,transparent 4px)}nxe-pivot-field-chooser .dx-icon-filter:before{width:12px;height:12px;background:currentColor;clip-path:polygon(0 0,100% 0,62% 46%,62% 100%,38% 100%,38% 46%)}nxe-pivot-field-chooser .dx-icon-formula:before{content:\"\\3a3\";font-size:14px;line-height:1;font-weight:400}nxe-pivot-field-chooser .dx-checkbox-checked .dx-checkbox-icon:after{content:\"\";position:absolute;left:7px;top:3px;width:6px;height:11px;box-sizing:border-box;border:solid #337ab7;border-width:0 2px 2px 0;transform:rotate(45deg)}.nxe-fieldchooser-pane{pointer-events:auto}\n"] }]
+            args: [{ selector: 'nxe-pivot-field-chooser', standalone: true, imports: [NgTemplateOutlet, NxePivotFieldChipComponent], host: { class: 'nxe-widget nxe-pivot-field-chooser-popup nxe-fieldchooser-popup' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- dx popup box: fieldChooser width/height land on `.dx-overlay-content` (m_widget.js popup\r\n     options; 600x400 -> 598x349 content once the 1px borders + 49px title bar are taken out \u2014\r\n     oracle/chooser-probe.json reconciliation in the component header). Title bar per the\r\n     full-page capture: \"Field Chooser\" left, X right, 1px rule beneath, popup centered. -->\r\n<div\r\n  class=\"nxe-overlay-content nxe-popup-normal\"\r\n  [style.width]=\"boxWidth()\"\r\n  [style.height]=\"boxHeight()\">\r\n  <div class=\"nxe-popup-title nxe-has-close-button\">\r\n    <span class=\"nxe-toolbar-label\">{{ texts.title }}</span>\r\n    <span\r\n      class=\"nxe-closebutton\"\r\n      role=\"button\"\r\n      tabindex=\"0\"\r\n      [attr.aria-label]=\"messages.t('common.close')\"\r\n      (click)=\"closed.emit()\"\r\n      (keydown.enter)=\"closed.emit()\"></span>\r\n  </div>\r\n\r\n  <!-- fixtures/field-chooser.html verbatim from here down: the chooser root carries\r\n       dx-popup-content + dx-pivotgridfieldchooser + dx-pivotgrid-fields-container (the class\r\n       that arms the shared chip chrome, nxe-pivot-field-chip), then layout 0's two rows. -->\r\n  <div class=\"nxe-popup-content nxe-widget nxe-pivotgridfieldchooser nxe-pivotgrid-fields-container\">\r\n    <div class=\"nxe-pivotgridfieldchooser-container nxe-layout-0\">\r\n      <div class=\"nxe-row\">\r\n        <div class=\"nxe-col\">\r\n          <!-- All Fields: dx-treeview of EVERY defined field, checkbox = has an area. -->\r\n          <div class=\"nxe-area nxe-all-fields\">\r\n            <div class=\"nxe-area-fields-header\">\r\n              <span class=\"nxe-area-icon nxe-icon-{{ allIcon }}\"></span><span>&nbsp;</span><span class=\"nxe-area-caption\">{{ texts.allFields }}</span>\r\n            </div>\r\n            <div\r\n              class=\"nxe-area-fields nxe-pivotgrid-drag-action nxe-treeview-border-visible nxe-widget nxe-collection nxe-treeview\"\r\n              tabindex=\"0\"\r\n              role=\"tree\">\r\n              @if (allowSearch()) {\r\n                <!-- dx allowSearch: the treeview search editor (dx margin:5px, in the scss);\r\n                     default FALSE \u2014 the broker capture has no search box (oracle \u00A7c). -->\r\n                <div class=\"nxe-treeview-search nxe-texteditor nxe-searchbox\">\r\n                  <input\r\n                    class=\"nxe-texteditor-input\"\r\n                    type=\"text\"\r\n                    [attr.placeholder]=\"messages.t('common.search')\"\r\n                    [value]=\"searchText()\"\r\n                    (input)=\"onSearchInput($event)\" />\r\n                </div>\r\n              }\r\n              <div class=\"nxe-scrollable nxe-scrollable-vertical\">\r\n                <div class=\"nxe-scrollable-wrapper\">\r\n                  <div class=\"nxe-scrollable-container\">\r\n                    <div class=\"nxe-scrollable-content\">\r\n                      <ul class=\"nxe-treeview-node-container\" role=\"group\">\r\n                        @for (item of treeItems(); track item.fieldIndex) {\r\n                          <li\r\n                            class=\"nxe-treeview-node nxe-treeview-item-with-checkbox nxe-treeview-root-node nxe-treeview-node-is-leaf\"\r\n                            [class.nxe-state-selected]=\"item.selected\"\r\n                            [attr.data-item-id]=\"$index + 1\"\r\n                            role=\"treeitem\"\r\n                            [attr.aria-label]=\"item.caption\"\r\n                            aria-level=\"1\"\r\n                            [attr.aria-selected]=\"item.selected\">\r\n                            <div class=\"nxe-item nxe-treeview-item\">\r\n                              <div class=\"nxe-item-content nxe-treeview-item-content\">\r\n                                <div class=\"nxe-area-field\" tree-view-item=\"true\"><span>{{ item.caption }}</span></div>\r\n                              </div>\r\n                              <div\r\n                                class=\"nxe-widget nxe-checkbox\"\r\n                                [class.nxe-checkbox-checked]=\"item.selected\"\r\n                                role=\"checkbox\"\r\n                                tabindex=\"0\"\r\n                                [attr.aria-checked]=\"item.selected\"\r\n                                [attr.aria-label]=\"messages.t('pivot.chooser.checkState')\"\r\n                                (click)=\"onCheckboxClick(item)\"\r\n                                (keydown.space)=\"onCheckboxClick(item)\">\r\n                                <input type=\"hidden\" [value]=\"item.selected\" />\r\n                                <div class=\"nxe-checkbox-container\"><span class=\"nxe-checkbox-icon\"></span></div>\r\n                              </div>\r\n                              <div class=\"nxe-treeview-expander-icon-stub\"></div>\r\n                            </div>\r\n                          </li>\r\n                        }\r\n                      </ul>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"nxe-col\">\r\n          <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: rowArea() }\" />\r\n          <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: columnArea() }\" />\r\n        </div>\r\n      </div>\r\n      <div class=\"nxe-row\">\r\n        <div class=\"nxe-col\">\r\n          <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: filterArea() }\" />\r\n        </div>\r\n        <div class=\"nxe-col\">\r\n          <ng-container *ngTemplateOutlet=\"areaTpl; context: { area: dataArea() }\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- One group area (dx `_renderArea`): header (icon + caption), then the bordered fields box\r\n     with the stacked chips. An EMPTY area shows nothing \u2014 the chooser has no\r\n     \"Drop \u2026 Fields Here\" strings (fixture: the filter area's field container is empty). -->\r\n<ng-template #areaTpl let-area=\"area\">\r\n  <div class=\"nxe-area\">\r\n    <div class=\"nxe-area-fields-header\">\r\n      <span class=\"nxe-area-icon nxe-icon-{{ area.icon }}\"></span><span>&nbsp;</span><span class=\"nxe-area-caption\">{{ area.caption }}</span>\r\n    </div>\r\n    <div\r\n      class=\"nxe-area-fields nxe-pivotgrid-drag-action nxe-scrollable nxe-scrollable-vertical\"\r\n      [attr.group]=\"area.group\"\r\n      allow-scrolling=\"true\">\r\n      <div class=\"nxe-scrollable-wrapper\">\r\n        <div class=\"nxe-scrollable-container\" tabindex=\"0\">\r\n          <div class=\"nxe-scrollable-content\">\r\n            <div class=\"nxe-area-field-container\">\r\n              @for (chip of area.chips; track chip.fieldIndex) {\r\n                <!-- dx renderField(field, true) (m_field_chooser.js:465): showColumnLines on,\r\n                     so the indicators float right ahead of the caption. -->\r\n                <div\r\n                  nxePivotFieldChip\r\n                  [chip]=\"chip\"\r\n                  [floatIndicators]=\"true\"\r\n                  (chipPointerDown)=\"onChipPointerDown(chip, area.group, $event)\"\r\n                  (chipClick)=\"onChipClick(chip)\"\r\n                  (chipFilterClick)=\"onChipFilterClick(chip, $event)\"></div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["nxe-pivot-field-chooser{display:block}nxe-pivot-field-chooser>.nxe-overlay-content{display:flex;flex-direction:column;box-sizing:border-box;min-width:max(250px,var(--nxe-ui-fieldchooser-min-width, 0px));min-height:250px;max-width:95vw;max-height:95vh;background:var(--nxe-ui-surface, #fff);border:1px solid var(--nxe-ui-border, #ddd);border-radius:6px;box-shadow:var(--nxe-ui-popup-shadow, 0 6px 12px rgba(0, 0, 0, .176));color:var(--nxe-ui-text, #333);overflow:hidden}nxe-pivot-field-chooser .nxe-popup-title{flex:0 0 auto;display:flex;align-items:center;padding:6px 20px;border-bottom:1px solid var(--nxe-ui-border, #ddd)}nxe-pivot-field-chooser .nxe-popup-title .nxe-toolbar-label{flex:1 1 auto;font-size:20px;line-height:36px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton{position:relative;inset-inline-start:10px;flex:0 0 auto;box-sizing:border-box;width:36px;height:36px;margin:0;margin-inline-start:30px;border:1px solid transparent;border-radius:var(--nxe-ui-radius, 4px);background-color:transparent;color:var(--nxe-ui-text, #333);cursor:pointer;outline:0}nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:before,nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:after{content:\"\";position:absolute;left:50%;top:50%;box-sizing:border-box;width:17px;height:2px;margin:-1px 0 0 -8.5px;background-color:currentColor}@media(forced-colors:active){nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:before,nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:after{forced-color-adjust:none;background-color:CanvasText}}nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:before{transform:rotate(45deg)}nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:after{transform:rotate(-45deg)}nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:hover{background-color:var(--nxe-ui-hover-bg, rgba(0, 0, 0, .04))}nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:focus-visible{background-color:var(--nxe-ui-focus-bg, rgba(0, 0, 0, .08))}nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:active{background-color:var(--nxe-ui-active-bg, rgba(0, 0, 0, .24))}nxe-pivot-field-chooser .nxe-popup-content.nxe-pivotgridfieldchooser{flex:1 1 auto;min-height:0;box-sizing:border-box;padding:20px}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser{position:relative;background-color:var(--nxe-ui-surface, #fff)}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-pivotgridfieldchooser-container{display:flex;overflow:hidden;height:100%}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-pivotgridfieldchooser-container.nxe-layout-0{flex-direction:column}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-pivotgridfieldchooser-container .nxe-row:first-child{flex-grow:2}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-pivotgridfieldchooser-container .nxe-row:nth-child(2){flex-grow:1}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-row{display:flex;flex-direction:row;height:0;min-height:0}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-col{display:flex;flex-direction:column;width:50%;min-height:0}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area{display:flex;flex-direction:column;flex-grow:1;min-height:0;padding:5px}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area-fields{overflow:hidden}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area .nxe-area-fields{display:flex;flex-direction:column;height:0;margin-top:3px;border:1px solid var(--nxe-ui-border, #ddd)}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area-fields[group]{display:flex;padding:5px;background-color:var(--nxe-ui-border-faded, rgba(221, 221, 221, .2))}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area-fields.nxe-drag-target{border-color:var(--nxe-ui-accent, #337ab7)}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area>.nxe-scrollable,nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area>.nxe-scrollable>.nxe-scrollable-wrapper,nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area>.nxe-treeview,nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area>.nxe-treeview>.nxe-scrollable,nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area>.nxe-treeview>.nxe-scrollable>.nxe-scrollable-wrapper{display:flex;flex-direction:column;flex-grow:1;height:0;min-height:0}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area-fields-header .nxe-area-caption{align-self:center}nxe-pivot-field-chooser .nxe-pivotgridfieldchooser .nxe-area .nxe-area-caption{vertical-align:middle}nxe-pivot-field-chooser .nxe-scrollable-container{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;outline:0}nxe-pivot-field-chooser .nxe-scrollable-wrapper{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}nxe-pivot-field-chooser .nxe-treeview-search{flex:0 0 auto;margin:5px}nxe-pivot-field-chooser .nxe-treeview-search .nxe-texteditor-input{box-sizing:border-box;width:100%;padding:7px 9px;border:1px solid var(--nxe-ui-border, #ddd);border-radius:4px;background:var(--nxe-ui-surface, #fff);color:var(--nxe-ui-text, #333);font:inherit;outline:0}nxe-pivot-field-chooser .nxe-treeview-search .nxe-texteditor-input:focus{border-color:var(--nxe-ui-accent, #337ab7)}nxe-pivot-field-chooser .nxe-treeview :focus{outline:0}nxe-pivot-field-chooser .nxe-treeview-node-container{display:block;margin:0;padding:0;overflow:hidden;list-style-position:inside}nxe-pivot-field-chooser .nxe-treeview-border-visible .nxe-scrollable-content>.nxe-treeview-node-container{padding:1px 1px 1px 7px}nxe-pivot-field-chooser .nxe-treeview-node{list-style-type:none;padding-inline-start:15px;-webkit-user-select:none;user-select:none}nxe-pivot-field-chooser .nxe-treeview-node.nxe-treeview-root-node{padding-inline-start:0}nxe-pivot-field-chooser .nxe-treeview-node .nxe-checkbox{order:1;margin:0}nxe-pivot-field-chooser .nxe-treeview-item{display:flex;align-items:center;gap:8px;margin:0;padding:5px 10px;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-pivot-field-chooser .nxe-treeview-item:hover{background-color:var(--nxe-ui-hover-bg, rgba(0, 0, 0, .04))}nxe-pivot-field-chooser .nxe-treeview-item .nxe-treeview-item-content{flex:1 1 auto;order:2}nxe-pivot-field-chooser .nxe-treeview-expander-icon-stub{display:flex;flex-shrink:0;width:22px;height:22px}nxe-pivot-field-chooser .nxe-checkbox{display:inline-block;line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none}nxe-pivot-field-chooser .nxe-checkbox .nxe-checkbox-container{display:flex;align-items:center;justify-content:center;width:22px;height:22px;overflow:hidden}nxe-pivot-field-chooser .nxe-checkbox .nxe-checkbox-icon{display:block;position:relative;flex-shrink:0;box-sizing:border-box;width:22px;height:22px;border:1px solid var(--nxe-ui-border, #ddd);border-radius:2px;background-color:var(--nxe-ui-surface, #fff)}nxe-pivot-field-chooser .nxe-checkbox:hover .nxe-checkbox-icon{border-color:var(--nxe-ui-accent-strong, #265a87)}nxe-pivot-field-chooser .nxe-checkbox:focus-visible .nxe-checkbox-icon{border-color:var(--nxe-ui-accent, #337ab7)}nxe-pivot-field-chooser .nxe-checkbox-checked .nxe-checkbox-icon{color:var(--nxe-ui-accent, #337ab7)}nxe-pivot-field-chooser .nxe-checkbox-checked .nxe-checkbox-icon: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;transform:rotate(45deg)}nxe-pivot-field-chooser .nxe-area-icon{display:inline-block;position:relative;box-sizing:border-box;width:18px;height:18px;vertical-align:middle;color:var(--nxe-ui-text, #333)}nxe-pivot-field-chooser .nxe-area-icon:before,nxe-pivot-field-chooser .nxe-area-icon:after{content:none;position:absolute;box-sizing:border-box}@media(forced-colors:active){nxe-pivot-field-chooser .nxe-area-icon:before,nxe-pivot-field-chooser .nxe-area-icon:after{forced-color-adjust:none;color:CanvasText}}nxe-pivot-field-chooser .nxe-icon-smalliconslayout:before{content:\"\";left:2px;top:2px;width:4px;height:4px;background-color:currentColor;box-shadow:5px 0 currentColor,10px 0 currentColor,0 5px currentColor,5px 5px currentColor,10px 5px currentColor,0 10px currentColor,5px 10px currentColor,10px 10px currentColor}nxe-pivot-field-chooser .nxe-icon-rowfield:before{content:\"\";left:2px;top:2px;width:4px;height:4px;background-color:currentColor;box-shadow:5px 0 currentColor,10px 0 currentColor,0 10px currentColor,5px 10px currentColor,10px 10px currentColor}nxe-pivot-field-chooser .nxe-icon-rowfield:after{content:\"\";left:2px;top:7px;width:14px;height:4px;border:1px solid currentColor}nxe-pivot-field-chooser .nxe-icon-columnfield:before{content:\"\";left:2px;top:2px;width:4px;height:4px;background-color:currentColor;box-shadow:0 5px currentColor,0 10px currentColor,10px 0 currentColor,10px 5px currentColor,10px 10px currentColor}nxe-pivot-field-chooser .nxe-icon-columnfield:after{content:\"\";left:7px;top:2px;width:4px;height:14px;border:1px solid currentColor}nxe-pivot-field-chooser .nxe-icon-filter:before{content:\"\";inset:0;background-color:currentColor;clip-path:polygon(0 0,18px 0,18px 4px,11.5px 10.5px,11.5px 18px,6.5px 18px,6.5px 10.5px,0 4px)}nxe-pivot-field-chooser .nxe-icon-formula:before{content:\"\";left:4px;top:2px;width:10px;height:14px;background-color:currentColor;clip-path:polygon(0 0,10px 0,10px 2px,3.3px 2px,6.4px 7px,3.3px 12px,10px 12px,10px 14px,0 14px,0 13.53px,4.05px 7px,0 .47px)}.nxe-fieldchooser-pane{pointer-events:auto}\n"] }]
         }], propDecorators: { engine: [{ type: i0.Input, args: [{ isSignal: true, alias: "engine", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], allowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSearch", required: false }] }], allowSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSorting", required: false }] }], allowFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFiltering", required: false }] }], fieldMove: [{ type: i0.Output, args: ["fieldMove"] }], sortToggle: [{ type: i0.Output, args: ["sortToggle"] }], filterOpen: [{ type: i0.Output, args: ["filterOpen"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -3056,7 +3093,7 @@ function mergeFieldOverrides(fields, overrides) {
     });
 }
 /** `dxo-field-chooser` — LIVE since P3-C3: with `enabled` the pivot renders the
- *  `.dx-pivotgrid-field-chooser-button` toolbar button and opens the chooser popup
+ *  `.nxe-pivotgrid-field-chooser-button` toolbar button and opens the chooser popup
  *  (nxe-pivot-field-chooser) in a CDK overlay. Defaults are dxPivotGrid's `fieldChooser`
  *  defaults (m_widget.js): enabled true, width/height 600, allowSearch false,
  *  applyChangesMode 'instantly' (no OK/Cancel — changes hit the pivot live). */
@@ -3088,7 +3125,7 @@ class NxePivotGridComponent {
     dataSource = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
     /** dx `allowFiltering` (default false) — LIVE since P3-C4: filterable dimension chips
-     *  (panel AND chooser) render the `.dx-header-filter` funnel and open the shared
+     *  (panel AND chooser) render the `.nxe-header-filter` funnel and open the shared
      *  header-filter panel; per-field `field.allowFiltering` overrides the widget flag
      *  (dx m_widget `_updateCalculatedOptions`). */
     allowFiltering = input(false, /* @ts-ignore */
@@ -3105,7 +3142,7 @@ class NxePivotGridComponent {
     ...(ngDevMode ? [{ debugName: "allowExpandAll" }] : /* istanbul ignore next */ []));
     showBorders = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showBorders" }] : /* istanbul ignore next */ []));
-    /** dx default TRUE (m_widget.js defaultOptions): `dx-word-wrap` on the table lets header
+    /** dx default TRUE (m_widget.js defaultOptions): `nxe-word-wrap` on the table lets header
      *  cells wrap; data cells stay nowrap either way (dx.light's direct td rule). */
     wordWrapEnabled = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "wordWrapEnabled" }] : /* istanbul ignore next */ []));
@@ -3135,7 +3172,7 @@ class NxePivotGridComponent {
     dataFieldArea = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dataFieldArea" }] : /* istanbul ignore next */ []));
     /** dx `allowSorting` (default false, P3-C2): field-panel chips toggle their field's
-     *  sortOrder on click and carry the `.dx-sort` arrow in `.dx-column-indicators`. */
+     *  sortOrder on click and carry the `.nxe-sort` arrow in `.nxe-column-indicators`. */
     allowSorting = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "allowSorting" }] : /* istanbul ignore next */ []));
     // --- W4 Lane 2: facade `option(name, value)` overrides + dx-shaped outputs ------------------
@@ -3227,20 +3264,21 @@ class NxePivotGridComponent {
     panelCmp = viewChild(NxePivotFieldPanelComponent, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelCmp" }] : /* istanbul ignore next */ []));
     /** The ROW fields area, outletted into the corner cell (dx hosts the row chips inside
-     *  `.dx-area-description-cell` — oracle §c; the corner shows NO caption text then). */
+     *  `.nxe-area-description-cell` — oracle §c; the corner shows NO caption text then). */
     panelRowAreaTpl = computed(() => this.panelCmp()?.rowAreaTemplate() ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelRowAreaTpl" }] : /* istanbul ignore next */ []));
     // --- Field chooser (P3-C3) -----------------------------------------------------------------
-    /** The `.dx-pivotgrid-field-chooser-button` renders only when an `nxe-field-chooser` is
+    /** The `.nxe-pivotgrid-field-chooser-button` renders only when an `nxe-field-chooser` is
      *  projected with `enabled` not false (the DA page passes [enabled]="true"). */
     chooserEnabled = computed(() => this.fieldChooser() != null && this.fieldChooser().enabled() !== false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "chooserEnabled" }] : /* istanbul ignore next */ []));
     /** dx toolbar placement (m_widget.js `_renderDescriptionArea`, verbatim branch order):
-     *  (a) panel visible && showFilterFields -> the `.dx-filter-header` band;
-     *  (b) panel visible && (showDataFields || showColumnFields) -> the `.dx-column-header`
+     *  (a) panel visible && showFilterFields -> the `.nxe-filter-header` band;
+     *  (b) panel visible && (showDataFields || showColumnFields) -> the `.nxe-column-header`
      *      band (dx-compat's dormant column-header button rules go live);
-     *  (c) else -> the cross-tab corner `.dx-area-description-cell`, where the
-     *      transparent-until-hover button rules (dx-compat ~1113-1118) apply. */
+     *  (c) else -> the cross-tab corner `.nxe-area-description-cell`, where the button is
+     *      transparent until hover and the corner drops its caption (the library's own rules,
+     *      nxe-pivot-grid.component.scss — dx.light's description-cell toolbar rules). */
     chooserToolbarHost = computed(() => {
         if (!this.chooserEnabled()) {
             return null;
@@ -3269,6 +3307,10 @@ class NxePivotGridComponent {
     overlay = inject(Overlay);
     viewContainerRef = inject(ViewContainerRef);
     elementRef = inject((ElementRef));
+    /** Locale separators for every number the pivot renders; threaded into the data source. */
+    separators = inject(NXE_NUMBER_SEPARATORS);
+    /** The library's runtime-switchable messages. */
+    messages = inject(NxeMessageService);
     /** Bumped by `getDataSource().reload()` to force a re-aggregate. */
     reloadTick = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "reloadTick" }] : /* istanbul ignore next */ []));
@@ -3318,12 +3360,13 @@ class NxePivotGridComponent {
         if (overrides.size && explicit.length) {
             return new NxePivotDataSource({
                 ...opts,
+                separators: this.separators,
                 fields: mergeFieldOverrides(explicit, overrides),
             });
         }
         // No explicit fields → store-derived fields are all AREA-LESS: no chips exist, so the
         // panel can never have produced overrides for this data source.
-        return new NxePivotDataSource(opts);
+        return new NxePivotDataSource({ ...opts, separators: this.separators });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "engine" }] : /* istanbul ignore next */ []));
     /**
@@ -3365,7 +3408,14 @@ class NxePivotGridComponent {
             showRowTotals: this.showRowTotalsEff(),
             showColumnTotals: this.showColumnTotalsEff(),
             showTotalsPrior: this.showTotalsPriorEff(),
-            texts: this.textsEff(),
+            // The bundle's wording under whatever the host passed, so a language switch rebuilds
+            // the model (and with it Grand Total / Total / No data) without touching the engine.
+            texts: {
+                grandTotal: this.messages.t('pivot.grandTotal'),
+                total: this.messages.t('pivot.total'),
+                noData: this.messages.t('pivot.noData'),
+                ...this.textsEff(),
+            },
             dataFieldArea: this.dataFieldAreaEff(),
         });
     }, /* @ts-ignore */
@@ -3471,7 +3521,7 @@ class NxePivotGridComponent {
         this.scrollTop.set(event.target.scrollTop);
     }
     /**
-     * dx `.dx-pivotgrid-nodata` (gridCoreUtils.renderNoDataText): shown when the data source
+     * dx `.nxe-pivotgrid-nodata` (gridCoreUtils.renderNoDataText): shown when the data source
      * `isEmpty()` — no VISIBLE data field or nothing aggregated (empty/fully-filtered store);
      * text `texts.noData` (dx default "No data"). The reloadTick read re-checks after an
      * in-place instance reload.
@@ -3526,11 +3576,11 @@ class NxePivotGridComponent {
             // per model change / repaint / updateDimensions — dx re-layouts on the same).
             const scrollEl = host.querySelector('.nxe-pivotgrid-scroll');
             this.viewportHeight.set(scrollEl?.clientHeight ?? 0);
-            const dataTd = host.querySelector('.nxe-pivot-field-panel-table td.dx-data-header');
+            const dataTd = host.querySelector('.nxe-pivot-field-panel-table td.nxe-data-header');
             if (!dataTd) {
                 return;
             }
-            const corner = host.querySelector('.nxe-pivotgrid-table th.dx-area-description-cell');
+            const corner = host.querySelector('.nxe-pivotgrid-table th.nxe-area-description-cell');
             dataTd.style.width = corner
                 ? `${corner.getBoundingClientRect().width}px`
                 : '';
@@ -3981,6 +4031,11 @@ class NxePivotGridComponent {
             }
             return String(a).localeCompare(String(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],
     });
     hfOverlayRef = null;
     /** A chip funnel was clicked (panel or chooser) — open the shared header-filter popup. */
@@ -4519,7 +4574,7 @@ class NxePivotGridComponent {
         return this.facade;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxePivotGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxePivotGridComponent, isStandalone: true, selector: "nxe-pivot-grid", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, allowFiltering: { classPropertyName: "allowFiltering", publicName: "allowFiltering", isSignal: true, isRequired: false, transformFunction: null }, allowSortingBySummary: { classPropertyName: "allowSortingBySummary", publicName: "allowSortingBySummary", isSignal: true, isRequired: false, transformFunction: null }, allowExpandAll: { classPropertyName: "allowExpandAll", publicName: "allowExpandAll", isSignal: true, isRequired: false, transformFunction: null }, showBorders: { classPropertyName: "showBorders", publicName: "showBorders", isSignal: true, isRequired: false, transformFunction: null }, wordWrapEnabled: { classPropertyName: "wordWrapEnabled", publicName: "wordWrapEnabled", isSignal: true, isRequired: false, transformFunction: null }, rowHeaderLayout: { classPropertyName: "rowHeaderLayout", publicName: "rowHeaderLayout", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: false, transformFunction: null }, showColumnTotals: { classPropertyName: "showColumnTotals", publicName: "showColumnTotals", isSignal: true, isRequired: false, transformFunction: null }, showRowTotals: { classPropertyName: "showRowTotals", publicName: "showRowTotals", isSignal: true, isRequired: false, transformFunction: null }, showColumnGrandTotals: { classPropertyName: "showColumnGrandTotals", publicName: "showColumnGrandTotals", isSignal: true, isRequired: false, transformFunction: null }, showRowGrandTotals: { classPropertyName: "showRowGrandTotals", publicName: "showRowGrandTotals", isSignal: true, isRequired: false, transformFunction: null }, showTotalsPrior: { classPropertyName: "showTotalsPrior", publicName: "showTotalsPrior", isSignal: true, isRequired: false, transformFunction: null }, dataFieldArea: { classPropertyName: "dataFieldArea", publicName: "dataFieldArea", isSignal: true, isRequired: false, transformFunction: null }, allowSorting: { classPropertyName: "allowSorting", publicName: "allowSorting", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCellClick: "onCellClick", onCellPrepared: "onCellPrepared", onContentReady: "onContentReady", onOptionChanged: "onOptionChanged", onExporting: "onExporting" }, host: { properties: { "style.height": "hostHeight()", "class.dx-pivotgrid": "panelVisible() || chooserInCorner()", "class.dx-pivotgrid-fields-container": "panelVisible() || chooserInCorner()" }, classAttribute: "nxe-widget nxe-pivot-grid" }, queries: [{ propertyName: "fieldChooser", first: true, predicate: NxeFieldChooserComponent, descendants: true, isSignal: true }, { propertyName: "fieldPanel", first: true, predicate: NxeFieldPanelComponent, descendants: true, isSignal: true }, { propertyName: "stateStoring", first: true, predicate: NxeStateStoringComponent, descendants: true, isSignal: true }, { propertyName: "scrolling", first: true, predicate: NxeScrollingComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelCmp", first: true, predicate: NxePivotFieldPanelComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- P3-C3: the dx `.dx-pivotgrid-toolbar` with the field-chooser button (m_widget.js\r\n     `_renderDescriptionArea` + dx.light float:right chrome). Placement per dx's branch order:\r\n     the panel's filter-header band when it shows, else the panel's column-header band when\r\n     the data/column band row shows, else the cross-tab corner cell, where the dormant\r\n     dx-compat rules (~1113-1118) keep it transparent until hover. Renders only when the\r\n     projected nxe-field-chooser config is enabled. -->\r\n<ng-template #chooserToolbarTpl>\r\n  <div class=\"dx-pivotgrid-toolbar\">\r\n    <div\r\n      class=\"dx-pivotgrid-field-chooser-button nxe-pivot-field-chooser-button dx-widget dx-button dx-button-mode-contained dx-button-normal dx-button-has-icon\"\r\n      role=\"button\"\r\n      tabindex=\"0\"\r\n      title=\"Show Field Chooser\"\r\n      aria-label=\"Show Field Chooser\"\r\n      (click)=\"toggleFieldChooser()\"\r\n      (keydown.enter)=\"toggleFieldChooser()\">\r\n      <div class=\"dx-button-content\"><i class=\"dx-icon dx-icon-columnchooser\"></i></div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n@if (model(); as m) {\r\n  <!-- P3-C2: the dx field panel (dxo-field-panel). dx default visible=false \u2014 nothing renders\r\n       unless the projected nxe-field-panel opts in (the calc tabs project none). `undefined`\r\n       bound into a flag (report-output-pivot binds panelConfig()?.\u2026) falls back to the dx\r\n       default: hidden for `visible`, shown for the five area/drag flags. The ROW area is not\r\n       in this block \u2014 the panel exposes it as a template and the corner cell below hosts it\r\n       (dx: the corner .dx-area-description-cell holds the row chips). -->\r\n  @if (fieldPanel(); as fp) {\r\n    @if (fp.visible()) {\r\n      <nxe-pivot-field-panel\r\n        [engine]=\"engine()\"\r\n        [showFilterFields]=\"fp.showFilterFields() !== false\"\r\n        [showDataFields]=\"fp.showDataFields() !== false\"\r\n        [showColumnFields]=\"fp.showColumnFields() !== false\"\r\n        [showRowFields]=\"fp.showRowFields() !== false\"\r\n        [allowFieldDragging]=\"fp.allowFieldDragging() !== false\"\r\n        [allowSorting]=\"allowSortingEff()\"\r\n        [allowFiltering]=\"allowFilteringEff()\"\r\n        [showBorders]=\"showBordersEff()\"\r\n        [toolbarTemplate]=\"chooserToolbarTpl\"\r\n        [toolbarArea]=\"panelToolbarArea()\"\r\n        (fieldMove)=\"onPanelFieldMove($event)\"\r\n        (sortToggle)=\"onPanelSortToggle($event)\"\r\n        (filterOpen)=\"openPivotHeaderFilter($event)\" />\r\n    }\r\n  }\r\n  <div class=\"nxe-pivotgrid-scroll\" (scroll)=\"onPivotScroll($event)\">\r\n    <table\r\n      class=\"nxe-pivotgrid-table\"\r\n      role=\"grid\"\r\n      [class.nxe-pivotgrid-bordered]=\"showBordersEff()\"\r\n      [class.dx-word-wrap]=\"wordWrapEnabledEff()\"\r\n      [class.nxe-pivot-layout-tree]=\"m.rowHeaderLayout === 'tree'\">\r\n      <colgroup>\r\n        @for (w of m.colWidths; track $index) {\r\n          <col [style.width.px]=\"w\" />\r\n        }\r\n      </colgroup>\r\n      <thead>\r\n        @for (hr of m.columnHeaderRows; track $index; let first = $first) {\r\n          <tr role=\"row\">\r\n            @if (first) {\r\n              <!-- Corner: with the field panel VISIBLE dx hosts the ROW-field chips here and\r\n                   renders NO caption text (oracle \u00A7c \"hosts the ROW field chips\";\r\n                   views/0/initial-full-page.png). The caption is the panel-hidden rendering\r\n                   only (accepted deviation \u2014 dx shows an empty corner then). -->\r\n              <th\r\n                class=\"nxe-pivot-corner dx-area-description-cell\"\r\n                role=\"columnheader\"\r\n                [class.nxe-pivot-corner-fields]=\"panelVisible()\"\r\n                [attr.rowspan]=\"m.columnHeaderRows.length\"\r\n                [attr.colspan]=\"m.rowHeaderColCount > 1 ? m.rowHeaderColCount : null\">@if (chooserInCorner()) {<ng-container *ngTemplateOutlet=\"chooserToolbarTpl\" />}@if (panelVisible()) {<ng-container *ngTemplateOutlet=\"panelRowAreaTpl()\" />} @else {{{ m.cornerText }}}</th>\r\n            }\r\n            @for (cell of hr; track $index) {\r\n              <th\r\n                class=\"nxe-pivot-col-header\"\r\n                role=\"columnheader\"\r\n                [class.nxe-pivot-grandtotal]=\"cell.isGrandTotal\"\r\n                [class.nxe-pivot-total]=\"cell.isTotal\"\r\n                [class.dx-row-total]=\"cell.isGrandTotal || cell.isTotal\"\r\n                [class.dx-grandtotal]=\"cell.isGrandTotal\"\r\n                [class.dx-total]=\"cell.isTotal\"\r\n                [class.dx-pivotgrid-expanded]=\"cell.expandable && cell.expanded\"\r\n                [class.dx-pivotgrid-collapsed]=\"cell.expandable && !cell.expanded\"\r\n                [attr.colspan]=\"cell.colspan\"\r\n                [attr.rowspan]=\"cell.rowspan && cell.rowspan > 1 ? cell.rowspan : null\"\r\n                [attr.tabindex]=\"cell.expandable ? 0 : null\"\r\n                [attr.aria-expanded]=\"cell.expandable ? cell.expanded === true : null\"\r\n                (click)=\"onColHeaderCellClick($event, cell)\"\r\n                (keydown.enter)=\"cell.expandable && onExpandKey($event, cell.pathKey ?? '', cell.expanded === true)\"\r\n                (keydown.space)=\"cell.expandable && onExpandKey($event, cell.pathKey ?? '', cell.expanded === true)\">\r\n                @if (cell.expandable) {\r\n                  <span\r\n                    class=\"nxe-pivot-expand dx-expand-icon-container\"\r\n                    [class.nxe-pivot-expanded]=\"cell.expanded\"\r\n                    (click)=\"onColExpandClick($event, cell)\"><span class=\"dx-expand\">{{ cell.expanded ? '\u2212' : '+' }}</span></span>\r\n                }<span class=\"nxe-pivot-col-label\">{{ cell.text }}</span></th>\r\n            }\r\n          </tr>\r\n        }\r\n      </thead>\r\n      <tbody>\r\n        <!-- W4 Lane 3: `viewRows()` is the rendered row window ({row, ri} with ri = MODEL row\r\n             index \u2014 matrix addressing must not shift). All rows unless nxe-scrolling\r\n             mode=\"virtual\" arms tree-scoped windowing; the spacer rows stand in for the\r\n             unrendered rows so the scrollbar geometry stays true. -->\r\n        @if (topSpacerH() > 0) {\r\n          <tr class=\"nxe-pivot-vspacer\" aria-hidden=\"true\"><td [attr.colspan]=\"totalColCount()\" [style.height.px]=\"topSpacerH()\"></td></tr>\r\n        }\r\n        @for (entry of viewRows(); track entry.row.trackKey ?? entry.row.pathKey) {\r\n          @let row = entry.row;\r\n          @let ri = entry.ri;\r\n          <tr class=\"nxe-pivot-row\" role=\"row\" [class.nxe-pivot-total-row]=\"row.kind === 'T'\">\r\n            @if (m.rowHeaderLayout === 'tree') {\r\n              @if (row.measureRowspan !== 0) {\r\n                <th\r\n                  class=\"nxe-pivot-row-header\"\r\n                  role=\"rowheader\"\r\n                  [attr.rowspan]=\"row.measureRowspan && row.measureRowspan > 1 ? row.measureRowspan : null\"\r\n                  [style.padding-left.px]=\"10 + row.level * 16\"\r\n                  [attr.tabindex]=\"row.hasChildren ? 0 : null\"\r\n                  [attr.aria-expanded]=\"row.hasChildren ? row.expanded : null\"\r\n                  (click)=\"onRowHeaderCellClick($event, row, null)\"\r\n                  (keydown.enter)=\"row.hasChildren && onExpandKey($event, row.pathKey, row.expanded)\"\r\n                  (keydown.space)=\"row.hasChildren && onExpandKey($event, row.pathKey, row.expanded)\">\r\n                  @if (row.hasChildren) {\r\n                    <span\r\n                      class=\"nxe-pivot-expand dx-expand-icon-container\"\r\n                      [class.nxe-pivot-expanded]=\"row.expanded\"\r\n                      (click)=\"onRowExpandClick($event, row, null)\"><span class=\"dx-expand\">{{ row.expanded ? '\u2212' : '+' }}</span></span>\r\n                  }\r\n                  <span class=\"nxe-pivot-row-label\">{{ row.label }}</span>\r\n                </th>\r\n              }\r\n              @if (row.measureCaption !== undefined) {\r\n                <th\r\n                  class=\"nxe-pivot-row-header nxe-pivot-measure-header\"\r\n                  role=\"rowheader\"\r\n                  [class.nxe-pivot-total]=\"row.kind === 'T'\"\r\n                  [class.dx-row-total]=\"row.kind === 'T'\"\r\n                  [class.dx-total]=\"row.kind === 'T'\"\r\n                  (click)=\"onMeasureCellClick($event, row)\">{{ row.measureCaption }}</th>\r\n              }\r\n            } @else {\r\n              @for (hc of row.headerCells; track $index) {\r\n                <th\r\n                  class=\"nxe-pivot-row-header\"\r\n                  role=\"rowheader\"\r\n                  [class.nxe-pivot-total]=\"hc.isTotal\"\r\n                  [class.dx-row-total]=\"hc.isTotal\"\r\n                  [class.dx-total]=\"hc.isTotal\"\r\n                  [class.dx-pivotgrid-expanded]=\"hc.expandable && hc.expanded\"\r\n                  [class.dx-pivotgrid-collapsed]=\"hc.expandable && !hc.expanded\"\r\n                  [attr.rowspan]=\"hc.rowspan > 1 ? hc.rowspan : null\"\r\n                  [attr.colspan]=\"hc.colspan > 1 ? hc.colspan : null\"\r\n                  [attr.tabindex]=\"hc.expandable ? 0 : null\"\r\n                  [attr.aria-expanded]=\"hc.expandable ? hc.expanded : null\"\r\n                  (click)=\"onRowHeaderCellClick($event, row, hc)\"\r\n                  (keydown.enter)=\"hc.expandable && onExpandKey($event, hc.pathKey, hc.expanded)\"\r\n                  (keydown.space)=\"hc.expandable && onExpandKey($event, hc.pathKey, hc.expanded)\">\r\n                  @if (hc.expandable) {\r\n                    <span\r\n                      class=\"nxe-pivot-expand dx-expand-icon-container\"\r\n                      [class.nxe-pivot-expanded]=\"hc.expanded\"\r\n                      (click)=\"onRowExpandClick($event, row, hc)\"><span class=\"dx-expand\">{{ hc.expanded ? '\u2212' : '+' }}</span></span>\r\n                  }\r\n                  @if (hc.isTotal) {\r\n                    {{ hc.text }}\r\n                  } @else {\r\n                    <span class=\"nxe-pivot-row-label\">{{ hc.text }}</span>\r\n                  }\r\n                </th>\r\n              }\r\n            }\r\n            @for (leaf of m.leaves; track $index; let li = $index) {\r\n              <td\r\n                class=\"nxe-pivot-data\"\r\n                role=\"gridcell\"\r\n                [class.nxe-pivot-total]=\"row.kind === 'T' || leaf.kind === 'T'\"\r\n                [class.dx-total]=\"row.kind === 'T' || leaf.kind === 'T'\"\r\n                [class.dx-row-total]=\"row.kind === 'T'\"\r\n                [class.nxe-pivot-grandtotal]=\"leaf.isGrandTotal\"\r\n                [class.dx-grandtotal]=\"leaf.isGrandTotal\"\r\n                (click)=\"onDataCellClick($event, ri, li)\">{{ m.textMatrix[ri][li] }}</td>\r\n            }\r\n          </tr>\r\n        }\r\n        @if (bottomSpacerH() > 0) {\r\n          <tr class=\"nxe-pivot-vspacer\" aria-hidden=\"true\"><td [attr.colspan]=\"totalColCount()\" [style.height.px]=\"bottomSpacerH()\"></td></tr>\r\n        }\r\n        @if (m.grandTotalRows; as gtr) {\r\n          @for (g of gtr; track g.dataIndex; let first = $first) {\r\n            <tr class=\"nxe-pivot-row nxe-pivot-grandtotal-row\" role=\"row\">\r\n              @if (first) {\r\n                <th\r\n                  class=\"nxe-pivot-row-header nxe-pivot-grandtotal dx-row-total dx-grandtotal\"\r\n                  role=\"rowheader\"\r\n                  [attr.rowspan]=\"gtr.length > 1 ? gtr.length : null\"\r\n                  [attr.colspan]=\"m.rowHeaderColCount - 1 > 1 ? m.rowHeaderColCount - 1 : null\"\r\n                  (click)=\"onGtHeaderCellClick($event, m.texts.grandTotal)\">{{ m.texts.grandTotal }}</th>\r\n              }\r\n              <th\r\n                class=\"nxe-pivot-row-header nxe-pivot-measure-header nxe-pivot-grandtotal dx-row-total dx-grandtotal\"\r\n                role=\"rowheader\"\r\n                (click)=\"onGtHeaderCellClick($event, g.caption)\">{{ g.caption }}</th>\r\n              @for (gc of g.cells; track $index; let li = $index) {\r\n                <td\r\n                  class=\"nxe-pivot-data nxe-pivot-grandtotal dx-grandtotal dx-row-total\"\r\n                  role=\"gridcell\"\r\n                  [class.dx-total]=\"m.leaves[li].kind === 'T'\"\r\n                  (click)=\"onGtDataCellClick($event, li, g.dataIndex, gc.value, gc.text)\">{{ gc.text }}</td>\r\n              }\r\n            </tr>\r\n          }\r\n        } @else if (m.grandTotalCells; as gt) {\r\n          <tr class=\"nxe-pivot-row nxe-pivot-grandtotal-row\" role=\"row\">\r\n            <th\r\n              class=\"nxe-pivot-row-header nxe-pivot-grandtotal dx-row-total dx-grandtotal\"\r\n              role=\"rowheader\"\r\n              [attr.colspan]=\"m.rowHeaderColCount > 1 ? m.rowHeaderColCount : null\"\r\n              (click)=\"onGtHeaderCellClick($event, m.texts.grandTotal)\">{{ m.texts.grandTotal }}</th>\r\n            @for (gc of gt; track $index; let li = $index) {\r\n              <td\r\n                class=\"nxe-pivot-data nxe-pivot-grandtotal dx-grandtotal dx-row-total\"\r\n                role=\"gridcell\"\r\n                [class.dx-total]=\"m.leaves[li].kind === 'T'\"\r\n                (click)=\"onGtDataCellClick($event, li, m.leaves[li].dataIndex, gc.value, gc.text)\">{{ gc.text }}</td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n    <!-- dx `.dx-pivotgrid-nodata` (gridCoreUtils.renderNoDataText): a <span>, shown when the\r\n         data source isEmpty(), centered over the widget by the dx.light absolute rule. -->\r\n    @if (showNoData()) {\r\n      <span class=\"dx-pivotgrid-nodata\">{{ m.texts.noData }}</span>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"nxe-pivotgrid-empty\"></div>\r\n}\r\n", styles: ["nxe-pivot-grid{display:block;position:relative;color:#333}nxe-pivot-grid .nxe-pivotgrid-scroll{overflow:auto;width:100%;height:100%}nxe-pivot-grid .nxe-pivotgrid-table{border-collapse:collapse;table-layout:auto;background:#fff}nxe-pivot-grid .nxe-pivotgrid-table th,nxe-pivot-grid .nxe-pivotgrid-table td{border:1px solid #ddd;padding:7px 10px;white-space:nowrap;vertical-align:top;font-weight:400}nxe-pivot-grid .nxe-pivot-corner{background-color:#ddd3;color:#333;text-align:left}nxe-pivot-grid .nxe-pivot-corner.nxe-pivot-corner-fields{padding:0;vertical-align:bottom}nxe-pivot-grid .nxe-pivot-corner.nxe-pivot-corner-fields .dx-pivotgrid-fields-area{position:relative}nxe-pivot-grid .nxe-pivot-col-header{color:#959595;text-align:center}nxe-pivot-grid .nxe-pivot-row-header{color:#959595;text-align:left}nxe-pivot-grid .dx-word-wrap .nxe-pivot-col-header,nxe-pivot-grid .dx-word-wrap .nxe-pivot-row-header{white-space:normal}nxe-pivot-grid .dx-word-wrap .dx-pivotgrid-expanded,nxe-pivot-grid .dx-word-wrap .dx-pivotgrid-collapsed{white-space:nowrap}nxe-pivot-grid .dx-word-wrap .dx-pivotgrid-expanded .nxe-pivot-row-label,nxe-pivot-grid .dx-word-wrap .dx-pivotgrid-expanded .nxe-pivot-col-label,nxe-pivot-grid .dx-word-wrap .dx-pivotgrid-collapsed .nxe-pivot-row-label,nxe-pivot-grid .dx-word-wrap .dx-pivotgrid-collapsed .nxe-pivot-col-label{white-space:normal;display:inline-flex}nxe-pivot-grid .nxe-pivot-layout-tree .nxe-pivot-corner{position:sticky;left:0;z-index:2;background-color:#f8f8f8}nxe-pivot-grid .nxe-pivot-layout-tree .nxe-pivot-row-header{position:sticky;left:0;z-index:1;background-color:#fff}nxe-pivot-grid .nxe-pivot-expand{display:inline-block;width:14px;height:14px;line-height:12px;text-align:center;margin-right:6px;border:1px solid #b3b3b3;border-radius:2px;font-size:11px;cursor:pointer;-webkit-user-select:none;user-select:none;color:#959595;background:#fff}nxe-pivot-grid .nxe-pivot-expand:hover{border-color:#5c94c5;color:#5c94c5}nxe-pivot-grid .nxe-pivot-data{text-align:right;color:#333}nxe-pivot-grid .nxe-pivot-total{background-color:#ddd3}nxe-pivot-grid .nxe-pivot-grandtotal{background-color:#f5f5f5!important}nxe-pivot-grid .nxe-pivotgrid-bordered{border:1px solid #ddd}nxe-pivot-grid .nxe-pivotgrid-empty{min-height:1px}nxe-pivot-grid .nxe-pivot-vspacer td{padding:0;border-left:0;border-right:0}nxe-pivot-grid .nxe-pivotgrid-table th[tabindex]:focus-visible{outline:1px dotted rgb(149,149,149);outline-offset:-2px}nxe-pivot-grid .dx-pivotgrid-nodata{position:absolute;top:50%;left:50%;width:100%;text-align:center;transform:translate(-50%,-50%)}.grid-fit-h>nxe-pivot-grid{position:absolute;height:100%;width:100%}\n"], dependencies: [{ kind: "component", type: NxePivotFieldPanelComponent, selector: "nxe-pivot-field-panel", inputs: ["engine", "showFilterFields", "showDataFields", "showColumnFields", "showRowFields", "allowFieldDragging", "allowSorting", "allowFiltering", "showBorders", "toolbarTemplate", "toolbarArea"], outputs: ["fieldMove", "sortToggle", "filterOpen"] }, { 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: NxePivotGridComponent, isStandalone: true, selector: "nxe-pivot-grid", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, allowFiltering: { classPropertyName: "allowFiltering", publicName: "allowFiltering", isSignal: true, isRequired: false, transformFunction: null }, allowSortingBySummary: { classPropertyName: "allowSortingBySummary", publicName: "allowSortingBySummary", isSignal: true, isRequired: false, transformFunction: null }, allowExpandAll: { classPropertyName: "allowExpandAll", publicName: "allowExpandAll", isSignal: true, isRequired: false, transformFunction: null }, showBorders: { classPropertyName: "showBorders", publicName: "showBorders", isSignal: true, isRequired: false, transformFunction: null }, wordWrapEnabled: { classPropertyName: "wordWrapEnabled", publicName: "wordWrapEnabled", isSignal: true, isRequired: false, transformFunction: null }, rowHeaderLayout: { classPropertyName: "rowHeaderLayout", publicName: "rowHeaderLayout", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: false, transformFunction: null }, showColumnTotals: { classPropertyName: "showColumnTotals", publicName: "showColumnTotals", isSignal: true, isRequired: false, transformFunction: null }, showRowTotals: { classPropertyName: "showRowTotals", publicName: "showRowTotals", isSignal: true, isRequired: false, transformFunction: null }, showColumnGrandTotals: { classPropertyName: "showColumnGrandTotals", publicName: "showColumnGrandTotals", isSignal: true, isRequired: false, transformFunction: null }, showRowGrandTotals: { classPropertyName: "showRowGrandTotals", publicName: "showRowGrandTotals", isSignal: true, isRequired: false, transformFunction: null }, showTotalsPrior: { classPropertyName: "showTotalsPrior", publicName: "showTotalsPrior", isSignal: true, isRequired: false, transformFunction: null }, dataFieldArea: { classPropertyName: "dataFieldArea", publicName: "dataFieldArea", isSignal: true, isRequired: false, transformFunction: null }, allowSorting: { classPropertyName: "allowSorting", publicName: "allowSorting", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCellClick: "onCellClick", onCellPrepared: "onCellPrepared", onContentReady: "onContentReady", onOptionChanged: "onOptionChanged", onExporting: "onExporting" }, host: { properties: { "style.height": "hostHeight()", "class.nxe-pivotgrid": "panelVisible() || chooserInCorner()", "class.nxe-pivotgrid-fields-container": "panelVisible() || chooserInCorner()" }, classAttribute: "nxe-widget nxe-pivot-grid" }, queries: [{ propertyName: "fieldChooser", first: true, predicate: NxeFieldChooserComponent, descendants: true, isSignal: true }, { propertyName: "fieldPanel", first: true, predicate: NxeFieldPanelComponent, descendants: true, isSignal: true }, { propertyName: "stateStoring", first: true, predicate: NxeStateStoringComponent, descendants: true, isSignal: true }, { propertyName: "scrolling", first: true, predicate: NxeScrollingComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelCmp", first: true, predicate: NxePivotFieldPanelComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- P3-C3: the dx `.dx-pivotgrid-toolbar` with the field-chooser button (m_widget.js\r\n     `_renderDescriptionArea` + dx.light float:right chrome). Placement per dx's branch order:\r\n     the panel's filter-header band when it shows, else the panel's column-header band when\r\n     the data/column band row shows, else the cross-tab corner cell, where the button stays\r\n     transparent until hover. Renders only when the projected nxe-field-chooser config is\r\n     enabled. The button chrome is the library's own (nxe-pivot-grid.component.scss). -->\r\n<ng-template #chooserToolbarTpl>\r\n  <div class=\"nxe-pivotgrid-toolbar\">\r\n    <div\r\n      class=\"nxe-pivotgrid-field-chooser-button nxe-pivot-field-chooser-button nxe-widget nxe-button nxe-button-mode-contained nxe-button-normal nxe-button-has-icon\"\r\n      role=\"button\"\r\n      tabindex=\"0\"\r\n      [attr.title]=\"messages.t('pivot.showFieldChooser')\"\r\n      [attr.aria-label]=\"messages.t('pivot.showFieldChooser')\"\r\n      (click)=\"toggleFieldChooser()\"\r\n      (keydown.enter)=\"toggleFieldChooser()\">\r\n      <!-- dx's 18px `.dx-icon-columnchooser` glyph, redrawn from rectangles (the DXIcons font is\r\n           not used): a window with a 2px frame (12 x 12) behind a solid 8 x 11 list panel with\r\n           three 4 x 1 slots, unioned into one even-odd path so the slots stay open where the\r\n           panel covers the frame. The span keeps the class the specs query but not `nxe-icon`,\r\n           whose mask layer would hide an inline SVG. -->\r\n      <div class=\"nxe-button-content\"><span class=\"nxe-icon-columnchooser nxe-pivot-chooser-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 18 18\" width=\"18\" height=\"18\" focusable=\"false\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M1 2h12v4h4v11H9v-3H1zM3 4v8h6V6h2V4zM11 8v1h4V8zM11 11v1h4v-1zM11 14v1h4v-1z\" /></svg></span></div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n@if (model(); as m) {\r\n  <!-- P3-C2: the dx field panel (dxo-field-panel). dx default visible=false \u2014 nothing renders\r\n       unless the projected nxe-field-panel opts in (the calc tabs project none). `undefined`\r\n       bound into a flag (report-output-pivot binds panelConfig()?.\u2026) falls back to the dx\r\n       default: hidden for `visible`, shown for the five area/drag flags. The ROW area is not\r\n       in this block \u2014 the panel exposes it as a template and the corner cell below hosts it\r\n       (dx: the corner .dx-area-description-cell holds the row chips). -->\r\n  @if (fieldPanel(); as fp) {\r\n    @if (fp.visible()) {\r\n      <nxe-pivot-field-panel\r\n        [engine]=\"engine()\"\r\n        [showFilterFields]=\"fp.showFilterFields() !== false\"\r\n        [showDataFields]=\"fp.showDataFields() !== false\"\r\n        [showColumnFields]=\"fp.showColumnFields() !== false\"\r\n        [showRowFields]=\"fp.showRowFields() !== false\"\r\n        [allowFieldDragging]=\"fp.allowFieldDragging() !== false\"\r\n        [allowSorting]=\"allowSortingEff()\"\r\n        [allowFiltering]=\"allowFilteringEff()\"\r\n        [showBorders]=\"showBordersEff()\"\r\n        [toolbarTemplate]=\"chooserToolbarTpl\"\r\n        [toolbarArea]=\"panelToolbarArea()\"\r\n        (fieldMove)=\"onPanelFieldMove($event)\"\r\n        (sortToggle)=\"onPanelSortToggle($event)\"\r\n        (filterOpen)=\"openPivotHeaderFilter($event)\" />\r\n    }\r\n  }\r\n  <div class=\"nxe-pivotgrid-scroll\" (scroll)=\"onPivotScroll($event)\">\r\n    <table\r\n      class=\"nxe-pivotgrid-table\"\r\n      role=\"grid\"\r\n      [class.nxe-pivotgrid-bordered]=\"showBordersEff()\"\r\n      [class.nxe-word-wrap]=\"wordWrapEnabledEff()\"\r\n      [class.nxe-pivot-layout-tree]=\"m.rowHeaderLayout === 'tree'\">\r\n      <colgroup>\r\n        @for (w of m.colWidths; track $index) {\r\n          <col [style.width.px]=\"w\" />\r\n        }\r\n      </colgroup>\r\n      <thead>\r\n        @for (hr of m.columnHeaderRows; track $index; let first = $first) {\r\n          <tr role=\"row\">\r\n            @if (first) {\r\n              <!-- Corner: with the field panel VISIBLE dx hosts the ROW-field chips here and\r\n                   renders NO caption text (oracle \u00A7c \"hosts the ROW field chips\";\r\n                   views/0/initial-full-page.png). The caption is the panel-hidden rendering\r\n                   only (accepted deviation \u2014 dx shows an empty corner then). When the\r\n                   field-chooser toolbar lives here the corner is dx's exactly: the button at\r\n                   its top-left (0 cell padding + the button's 1px margin) and no caption,\r\n                   which the button would otherwise sit on top of. -->\r\n              <th\r\n                class=\"nxe-pivot-corner nxe-area-description-cell\"\r\n                role=\"columnheader\"\r\n                [class.nxe-pivot-corner-fields]=\"panelVisible()\"\r\n                [class.nxe-pivot-corner-toolbar]=\"chooserInCorner()\"\r\n                [attr.rowspan]=\"m.columnHeaderRows.length\"\r\n                [attr.colspan]=\"m.rowHeaderColCount > 1 ? m.rowHeaderColCount : null\">@if (chooserInCorner()) {<ng-container *ngTemplateOutlet=\"chooserToolbarTpl\" />}@if (panelVisible()) {<ng-container *ngTemplateOutlet=\"panelRowAreaTpl()\" />} @else if (!chooserInCorner()) {{{ m.cornerText }}}</th>\r\n            }\r\n            @for (cell of hr; track $index) {\r\n              <th\r\n                class=\"nxe-pivot-col-header\"\r\n                role=\"columnheader\"\r\n                [class.nxe-pivot-grandtotal]=\"cell.isGrandTotal\"\r\n                [class.nxe-pivot-total]=\"cell.isTotal\"\r\n                [class.nxe-row-total]=\"cell.isGrandTotal || cell.isTotal\"\r\n                [class.nxe-grandtotal]=\"cell.isGrandTotal\"\r\n                [class.nxe-total]=\"cell.isTotal\"\r\n                [class.nxe-pivotgrid-expanded]=\"cell.expandable && cell.expanded\"\r\n                [class.nxe-pivotgrid-collapsed]=\"cell.expandable && !cell.expanded\"\r\n                [attr.colspan]=\"cell.colspan\"\r\n                [attr.rowspan]=\"cell.rowspan && cell.rowspan > 1 ? cell.rowspan : null\"\r\n                [attr.tabindex]=\"cell.expandable ? 0 : null\"\r\n                [attr.aria-expanded]=\"cell.expandable ? cell.expanded === true : null\"\r\n                (click)=\"onColHeaderCellClick($event, cell)\"\r\n                (keydown.enter)=\"cell.expandable && onExpandKey($event, cell.pathKey ?? '', cell.expanded === true)\"\r\n                (keydown.space)=\"cell.expandable && onExpandKey($event, cell.pathKey ?? '', cell.expanded === true)\">\r\n                @if (cell.expandable) {\r\n                  <span\r\n                    class=\"nxe-pivot-expand nxe-expand-icon-container\"\r\n                    [class.nxe-pivot-expanded]=\"cell.expanded\"\r\n                    (click)=\"onColExpandClick($event, cell)\"><span class=\"nxe-expand\" aria-hidden=\"true\"></span></span>\r\n                }<span class=\"nxe-pivot-col-label\">{{ cell.text }}</span></th>\r\n            }\r\n          </tr>\r\n        }\r\n      </thead>\r\n      <tbody>\r\n        <!-- W4 Lane 3: `viewRows()` is the rendered row window ({row, ri} with ri = MODEL row\r\n             index \u2014 matrix addressing must not shift). All rows unless nxe-scrolling\r\n             mode=\"virtual\" arms tree-scoped windowing; the spacer rows stand in for the\r\n             unrendered rows so the scrollbar geometry stays true. -->\r\n        @if (topSpacerH() > 0) {\r\n          <tr class=\"nxe-pivot-vspacer\" aria-hidden=\"true\"><td [attr.colspan]=\"totalColCount()\" [style.height.px]=\"topSpacerH()\"></td></tr>\r\n        }\r\n        @for (entry of viewRows(); track entry.row.trackKey ?? entry.row.pathKey) {\r\n          @let row = entry.row;\r\n          @let ri = entry.ri;\r\n          <tr class=\"nxe-pivot-row\" role=\"row\" [class.nxe-pivot-total-row]=\"row.kind === 'T'\">\r\n            @if (m.rowHeaderLayout === 'tree') {\r\n              @if (row.measureRowspan !== 0) {\r\n                <th\r\n                  class=\"nxe-pivot-row-header\"\r\n                  role=\"rowheader\"\r\n                  [attr.rowspan]=\"row.measureRowspan && row.measureRowspan > 1 ? row.measureRowspan : null\"\r\n                  [style.padding-left.px]=\"10 + row.level * 16\"\r\n                  [attr.tabindex]=\"row.hasChildren ? 0 : null\"\r\n                  [attr.aria-expanded]=\"row.hasChildren ? row.expanded : null\"\r\n                  (click)=\"onRowHeaderCellClick($event, row, null)\"\r\n                  (keydown.enter)=\"row.hasChildren && onExpandKey($event, row.pathKey, row.expanded)\"\r\n                  (keydown.space)=\"row.hasChildren && onExpandKey($event, row.pathKey, row.expanded)\">\r\n                  @if (row.hasChildren) {\r\n                    <span\r\n                      class=\"nxe-pivot-expand nxe-expand-icon-container\"\r\n                      [class.nxe-pivot-expanded]=\"row.expanded\"\r\n                      (click)=\"onRowExpandClick($event, row, null)\"><span class=\"nxe-expand\" aria-hidden=\"true\"></span></span>\r\n                  }\r\n                  <span class=\"nxe-pivot-row-label\">{{ row.label }}</span>\r\n                </th>\r\n              }\r\n              @if (row.measureCaption !== undefined) {\r\n                <th\r\n                  class=\"nxe-pivot-row-header nxe-pivot-measure-header\"\r\n                  role=\"rowheader\"\r\n                  [class.nxe-pivot-total]=\"row.kind === 'T'\"\r\n                  [class.nxe-row-total]=\"row.kind === 'T'\"\r\n                  [class.nxe-total]=\"row.kind === 'T'\"\r\n                  (click)=\"onMeasureCellClick($event, row)\">{{ row.measureCaption }}</th>\r\n              }\r\n            } @else {\r\n              @for (hc of row.headerCells; track $index) {\r\n                <th\r\n                  class=\"nxe-pivot-row-header\"\r\n                  role=\"rowheader\"\r\n                  [class.nxe-pivot-total]=\"hc.isTotal\"\r\n                  [class.nxe-row-total]=\"hc.isTotal\"\r\n                  [class.nxe-total]=\"hc.isTotal\"\r\n                  [class.nxe-pivotgrid-expanded]=\"hc.expandable && hc.expanded\"\r\n                  [class.nxe-pivotgrid-collapsed]=\"hc.expandable && !hc.expanded\"\r\n                  [attr.rowspan]=\"hc.rowspan > 1 ? hc.rowspan : null\"\r\n                  [attr.colspan]=\"hc.colspan > 1 ? hc.colspan : null\"\r\n                  [attr.tabindex]=\"hc.expandable ? 0 : null\"\r\n                  [attr.aria-expanded]=\"hc.expandable ? hc.expanded : null\"\r\n                  (click)=\"onRowHeaderCellClick($event, row, hc)\"\r\n                  (keydown.enter)=\"hc.expandable && onExpandKey($event, hc.pathKey, hc.expanded)\"\r\n                  (keydown.space)=\"hc.expandable && onExpandKey($event, hc.pathKey, hc.expanded)\">\r\n                  @if (hc.expandable) {\r\n                    <span\r\n                      class=\"nxe-pivot-expand nxe-expand-icon-container\"\r\n                      [class.nxe-pivot-expanded]=\"hc.expanded\"\r\n                      (click)=\"onRowExpandClick($event, row, hc)\"><span class=\"nxe-expand\" aria-hidden=\"true\"></span></span>\r\n                  }\r\n                  @if (hc.isTotal) {\r\n                    {{ hc.text }}\r\n                  } @else {\r\n                    <span class=\"nxe-pivot-row-label\">{{ hc.text }}</span>\r\n                  }\r\n                </th>\r\n              }\r\n            }\r\n            @for (leaf of m.leaves; track $index; let li = $index) {\r\n              <td\r\n                class=\"nxe-pivot-data\"\r\n                role=\"gridcell\"\r\n                [class.nxe-pivot-total]=\"row.kind === 'T' || leaf.kind === 'T'\"\r\n                [class.nxe-total]=\"row.kind === 'T' || leaf.kind === 'T'\"\r\n                [class.nxe-row-total]=\"row.kind === 'T'\"\r\n                [class.nxe-pivot-grandtotal]=\"leaf.isGrandTotal\"\r\n                [class.nxe-grandtotal]=\"leaf.isGrandTotal\"\r\n                (click)=\"onDataCellClick($event, ri, li)\">{{ m.textMatrix[ri][li] }}</td>\r\n            }\r\n          </tr>\r\n        }\r\n        @if (bottomSpacerH() > 0) {\r\n          <tr class=\"nxe-pivot-vspacer\" aria-hidden=\"true\"><td [attr.colspan]=\"totalColCount()\" [style.height.px]=\"bottomSpacerH()\"></td></tr>\r\n        }\r\n        @if (m.grandTotalRows; as gtr) {\r\n          @for (g of gtr; track g.dataIndex; let first = $first) {\r\n            <tr class=\"nxe-pivot-row nxe-pivot-grandtotal-row\" role=\"row\">\r\n              @if (first) {\r\n                <th\r\n                  class=\"nxe-pivot-row-header nxe-pivot-grandtotal nxe-row-total nxe-grandtotal\"\r\n                  role=\"rowheader\"\r\n                  [attr.rowspan]=\"gtr.length > 1 ? gtr.length : null\"\r\n                  [attr.colspan]=\"m.rowHeaderColCount - 1 > 1 ? m.rowHeaderColCount - 1 : null\"\r\n                  (click)=\"onGtHeaderCellClick($event, m.texts.grandTotal)\">{{ m.texts.grandTotal }}</th>\r\n              }\r\n              <th\r\n                class=\"nxe-pivot-row-header nxe-pivot-measure-header nxe-pivot-grandtotal nxe-row-total nxe-grandtotal\"\r\n                role=\"rowheader\"\r\n                (click)=\"onGtHeaderCellClick($event, g.caption)\">{{ g.caption }}</th>\r\n              @for (gc of g.cells; track $index; let li = $index) {\r\n                <td\r\n                  class=\"nxe-pivot-data nxe-pivot-grandtotal nxe-grandtotal nxe-row-total\"\r\n                  role=\"gridcell\"\r\n                  [class.nxe-total]=\"m.leaves[li].kind === 'T'\"\r\n                  (click)=\"onGtDataCellClick($event, li, g.dataIndex, gc.value, gc.text)\">{{ gc.text }}</td>\r\n              }\r\n            </tr>\r\n          }\r\n        } @else if (m.grandTotalCells; as gt) {\r\n          <tr class=\"nxe-pivot-row nxe-pivot-grandtotal-row\" role=\"row\">\r\n            <th\r\n              class=\"nxe-pivot-row-header nxe-pivot-grandtotal nxe-row-total nxe-grandtotal\"\r\n              role=\"rowheader\"\r\n              [attr.colspan]=\"m.rowHeaderColCount > 1 ? m.rowHeaderColCount : null\"\r\n              (click)=\"onGtHeaderCellClick($event, m.texts.grandTotal)\">{{ m.texts.grandTotal }}</th>\r\n            @for (gc of gt; track $index; let li = $index) {\r\n              <td\r\n                class=\"nxe-pivot-data nxe-pivot-grandtotal nxe-grandtotal nxe-row-total\"\r\n                role=\"gridcell\"\r\n                [class.nxe-total]=\"m.leaves[li].kind === 'T'\"\r\n                (click)=\"onGtDataCellClick($event, li, m.leaves[li].dataIndex, gc.value, gc.text)\">{{ gc.text }}</td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n    <!-- dx `.dx-pivotgrid-nodata` (gridCoreUtils.renderNoDataText): a <span>, shown when the\r\n         data source isEmpty(), centered over the widget by the dx.light absolute rule. -->\r\n    @if (showNoData()) {\r\n      <span class=\"nxe-pivotgrid-nodata\">{{ m.texts.noData }}</span>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"nxe-pivotgrid-empty\"></div>\r\n}\r\n", styles: ["nxe-pivot-grid{display:block;position:relative;color:#333}nxe-pivot-grid .nxe-pivotgrid-scroll{overflow:auto;width:100%;height:100%}nxe-pivot-grid .nxe-pivotgrid-table{border-collapse:collapse;table-layout:auto;background:#fff}nxe-pivot-grid .nxe-pivotgrid-table th,nxe-pivot-grid .nxe-pivotgrid-table td{border:1px solid #ddd;padding:7px 10px;white-space:nowrap;vertical-align:top;font-weight:400}nxe-pivot-grid .nxe-pivot-corner{background-color:#ddd3;color:#333;text-align:left}nxe-pivot-grid .nxe-pivot-corner.nxe-pivot-corner-fields{padding:0;vertical-align:bottom}nxe-pivot-grid .nxe-pivot-corner.nxe-pivot-corner-fields .nxe-pivotgrid-fields-area{position:relative}nxe-pivot-grid.nxe-pivotgrid .nxe-pivotgrid-fields-area-head td{position:relative;border:none;padding:10px 2px}nxe-pivot-grid.nxe-pivotgrid .nxe-pivotgrid-fields-area-head tr>td:first-child{padding-left:10px}nxe-pivot-grid.nxe-pivotgrid .nxe-pivotgrid-fields-area-head tr>td:last-child{padding-right:10px}nxe-pivot-grid.nxe-pivotgrid .nxe-column-header .nxe-pivotgrid-fields-area-head tr>td:first-child{padding-left:0}nxe-pivot-grid.nxe-pivotgrid .nxe-filter-header .nxe-area-field-container{border-spacing:8px 8px;border-collapse:separate}nxe-pivot-grid.nxe-pivotgrid .nxe-filter-header .nxe-pivotgrid-fields-area-head td{padding:2px}nxe-pivot-grid.nxe-pivotgrid .nxe-filter-header .nxe-pivotgrid-fields-area-head tr>td:first-child{padding-left:2px}nxe-pivot-grid.nxe-pivotgrid .nxe-pivotgrid-fields-area-head .nxe-empty-area-text{padding:7px 0;border:1px solid transparent;color:#525252;white-space:nowrap}nxe-pivot-grid.nxe-pivotgrid .nxe-column-header .nxe-pivotgrid-fields-area,nxe-pivot-grid.nxe-pivotgrid .nxe-filter-header .nxe-pivotgrid-fields-area{overflow:hidden}nxe-pivot-grid .nxe-pivot-corner.nxe-pivot-corner-toolbar{padding:0}nxe-pivot-grid .nxe-pivot-corner.nxe-pivot-corner-toolbar:not(.nxe-pivot-corner-fields){vertical-align:top}nxe-pivot-grid .nxe-pivot-col-header{color:#959595;text-align:center}nxe-pivot-grid .nxe-pivot-col-header.nxe-pivotgrid-expanded,nxe-pivot-grid .nxe-pivot-col-header.nxe-pivotgrid-collapsed{text-align:left}nxe-pivot-grid .nxe-pivotgrid-expanded,nxe-pivot-grid .nxe-pivotgrid-collapsed{cursor:pointer}nxe-pivot-grid .nxe-pivot-row-header{color:#959595;text-align:left}nxe-pivot-grid .nxe-word-wrap .nxe-pivot-col-header,nxe-pivot-grid .nxe-word-wrap .nxe-pivot-row-header{white-space:normal}nxe-pivot-grid .nxe-word-wrap .nxe-pivotgrid-expanded,nxe-pivot-grid .nxe-word-wrap .nxe-pivotgrid-collapsed{white-space:nowrap}nxe-pivot-grid .nxe-word-wrap .nxe-pivotgrid-expanded .nxe-pivot-row-label,nxe-pivot-grid .nxe-word-wrap .nxe-pivotgrid-expanded .nxe-pivot-col-label,nxe-pivot-grid .nxe-word-wrap .nxe-pivotgrid-collapsed .nxe-pivot-row-label,nxe-pivot-grid .nxe-word-wrap .nxe-pivotgrid-collapsed .nxe-pivot-col-label{white-space:normal;display:inline-flex}nxe-pivot-grid .nxe-pivot-layout-tree .nxe-pivot-corner{position:sticky;left:0;z-index:2;background-color:#f8f8f8}nxe-pivot-grid .nxe-pivot-layout-tree .nxe-pivot-row-header{position:sticky;left:0;z-index:1;background-color:#fff}nxe-pivot-grid .nxe-pivot-expand{position:relative;display:inline-block;box-sizing:border-box;width:14px;height:14px;margin:0;margin-inline:-5px 0;padding:0;border:0;background:none;vertical-align:top;cursor:pointer;-webkit-user-select:none;user-select:none;color:#959595}nxe-pivot-grid .nxe-pivot-expand .nxe-expand{display:inline-block;vertical-align:top}nxe-pivot-grid .nxe-pivot-expand .nxe-expand:before{content:\"\";position:absolute;left:50%;top:50%;box-sizing:content-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}nxe-pivot-grid .nxe-pivot-expand.nxe-pivot-expanded .nxe-expand:before{margin:-2px 0 0 -4px;border-width:4px 4px 0;border-color:currentColor transparent transparent}nxe-pivot-grid .nxe-pivotgrid-field-chooser-button{display:inline-flex;box-sizing:border-box;max-width:100%;overflow:hidden;margin:0;border:1px solid var(--nxe-ui-border, #ddd);border-radius:var(--nxe-ui-radius, 4px);background-color:var(--nxe-ui-surface, #fff);color:var(--nxe-ui-text, #333);text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;outline:0}nxe-pivot-grid .nxe-pivotgrid-field-chooser-button .nxe-button-content{display:flex;flex:1 1 auto;align-items:center;justify-content:center;box-sizing:border-box;height:100%;padding:5px;line-height:var(--nxe-ui-line-height, 1.35715)}nxe-pivot-grid .nxe-pivotgrid-field-chooser-button:hover{background-color:#f5f5f5}nxe-pivot-grid .nxe-pivotgrid-field-chooser-button:focus-visible{background-color:#ebebeb}nxe-pivot-grid .nxe-pivotgrid-field-chooser-button:active{background-color:#c2c2c2}nxe-pivot-grid .nxe-pivotgrid-toolbar .nxe-icon-columnchooser{display:flex;flex:0 0 auto;width:18px;height:18px}nxe-pivot-grid .nxe-pivotgrid-toolbar .nxe-icon-columnchooser>svg{display:block;width:18px;height:18px}nxe-pivot-grid .nxe-pivotgrid-toolbar .nxe-icon-columnchooser:before,nxe-pivot-grid .nxe-pivotgrid-toolbar .nxe-icon-columnchooser:after{content:none}nxe-pivot-grid .nxe-filter-header .nxe-pivotgrid-toolbar,nxe-pivot-grid .nxe-column-header .nxe-pivotgrid-toolbar{display:inline-block;float:right;margin-right:10px}nxe-pivot-grid .nxe-filter-header .nxe-pivotgrid-toolbar .nxe-pivotgrid-field-chooser-button,nxe-pivot-grid .nxe-column-header .nxe-pivotgrid-toolbar .nxe-pivotgrid-field-chooser-button{margin-top:12px;margin-right:4px}nxe-pivot-grid .nxe-area-description-cell .nxe-pivotgrid-toolbar{display:block;float:none;margin:0}nxe-pivot-grid .nxe-area-description-cell .nxe-pivotgrid-toolbar .nxe-pivotgrid-field-chooser-button{margin:1px}nxe-pivot-grid .nxe-area-description-cell .nxe-pivotgrid-toolbar .nxe-pivotgrid-field-chooser-button:not(:hover):not(:active){border-color:transparent;background-color:transparent;box-shadow:none}nxe-pivot-grid .nxe-pivot-data{text-align:right;color:#333}nxe-pivot-grid .nxe-pivot-total{background-color:#ddd3}nxe-pivot-grid .nxe-pivot-grandtotal{background-color:#f5f5f5!important}nxe-pivot-grid .nxe-pivotgrid-bordered{border:1px solid #ddd}nxe-pivot-grid .nxe-pivotgrid-empty{min-height:1px}nxe-pivot-grid .nxe-pivot-vspacer td{padding:0;border-left:0;border-right:0}nxe-pivot-grid .nxe-pivotgrid-table th[tabindex]:focus-visible{outline:1px dotted rgb(149,149,149);outline-offset:-2px}nxe-pivot-grid .nxe-pivotgrid-nodata{position:absolute;top:50%;left:50%;width:100%;text-align:center;transform:translate(-50%,-50%)}.grid-fit-h>nxe-pivot-grid{position:absolute;height:100%;width:100%}\n"], dependencies: [{ kind: "component", type: NxePivotFieldPanelComponent, selector: "nxe-pivot-field-panel", inputs: ["engine", "showFilterFields", "showDataFields", "showColumnFields", "showRowFields", "allowFieldDragging", "allowSorting", "allowFiltering", "showBorders", "toolbarTemplate", "toolbarArea"], outputs: ["fieldMove", "sortToggle", "filterOpen"] }, { 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: NxePivotGridComponent, decorators: [{
             type: Component,
@@ -4527,13 +4582,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         class: 'nxe-widget nxe-pivot-grid',
                         '[style.height]': 'hostHeight()',
                         // dx puts these marker classes on the widget root; here they arm while the field
-                        // panel renders — or while the corner hosts the field-chooser toolbar (P3-C3: the
-                        // dormant description-cell button rules in dx-compat ~1113-1118 key on them) — so the
-                        // dormant dx-compat chip-chrome rules reach the panel bands AND the corner-hosted row
-                        // area without touching the panel-less cross-tab chrome.
-                        '[class.dx-pivotgrid]': 'panelVisible() || chooserInCorner()',
-                        '[class.dx-pivotgrid-fields-container]': 'panelVisible() || chooserInCorner()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- P3-C3: the dx `.dx-pivotgrid-toolbar` with the field-chooser button (m_widget.js\r\n     `_renderDescriptionArea` + dx.light float:right chrome). Placement per dx's branch order:\r\n     the panel's filter-header band when it shows, else the panel's column-header band when\r\n     the data/column band row shows, else the cross-tab corner cell, where the dormant\r\n     dx-compat rules (~1113-1118) keep it transparent until hover. Renders only when the\r\n     projected nxe-field-chooser config is enabled. -->\r\n<ng-template #chooserToolbarTpl>\r\n  <div class=\"dx-pivotgrid-toolbar\">\r\n    <div\r\n      class=\"dx-pivotgrid-field-chooser-button nxe-pivot-field-chooser-button dx-widget dx-button dx-button-mode-contained dx-button-normal dx-button-has-icon\"\r\n      role=\"button\"\r\n      tabindex=\"0\"\r\n      title=\"Show Field Chooser\"\r\n      aria-label=\"Show Field Chooser\"\r\n      (click)=\"toggleFieldChooser()\"\r\n      (keydown.enter)=\"toggleFieldChooser()\">\r\n      <div class=\"dx-button-content\"><i class=\"dx-icon dx-icon-columnchooser\"></i></div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n@if (model(); as m) {\r\n  <!-- P3-C2: the dx field panel (dxo-field-panel). dx default visible=false \u2014 nothing renders\r\n       unless the projected nxe-field-panel opts in (the calc tabs project none). `undefined`\r\n       bound into a flag (report-output-pivot binds panelConfig()?.\u2026) falls back to the dx\r\n       default: hidden for `visible`, shown for the five area/drag flags. The ROW area is not\r\n       in this block \u2014 the panel exposes it as a template and the corner cell below hosts it\r\n       (dx: the corner .dx-area-description-cell holds the row chips). -->\r\n  @if (fieldPanel(); as fp) {\r\n    @if (fp.visible()) {\r\n      <nxe-pivot-field-panel\r\n        [engine]=\"engine()\"\r\n        [showFilterFields]=\"fp.showFilterFields() !== false\"\r\n        [showDataFields]=\"fp.showDataFields() !== false\"\r\n        [showColumnFields]=\"fp.showColumnFields() !== false\"\r\n        [showRowFields]=\"fp.showRowFields() !== false\"\r\n        [allowFieldDragging]=\"fp.allowFieldDragging() !== false\"\r\n        [allowSorting]=\"allowSortingEff()\"\r\n        [allowFiltering]=\"allowFilteringEff()\"\r\n        [showBorders]=\"showBordersEff()\"\r\n        [toolbarTemplate]=\"chooserToolbarTpl\"\r\n        [toolbarArea]=\"panelToolbarArea()\"\r\n        (fieldMove)=\"onPanelFieldMove($event)\"\r\n        (sortToggle)=\"onPanelSortToggle($event)\"\r\n        (filterOpen)=\"openPivotHeaderFilter($event)\" />\r\n    }\r\n  }\r\n  <div class=\"nxe-pivotgrid-scroll\" (scroll)=\"onPivotScroll($event)\">\r\n    <table\r\n      class=\"nxe-pivotgrid-table\"\r\n      role=\"grid\"\r\n      [class.nxe-pivotgrid-bordered]=\"showBordersEff()\"\r\n      [class.dx-word-wrap]=\"wordWrapEnabledEff()\"\r\n      [class.nxe-pivot-layout-tree]=\"m.rowHeaderLayout === 'tree'\">\r\n      <colgroup>\r\n        @for (w of m.colWidths; track $index) {\r\n          <col [style.width.px]=\"w\" />\r\n        }\r\n      </colgroup>\r\n      <thead>\r\n        @for (hr of m.columnHeaderRows; track $index; let first = $first) {\r\n          <tr role=\"row\">\r\n            @if (first) {\r\n              <!-- Corner: with the field panel VISIBLE dx hosts the ROW-field chips here and\r\n                   renders NO caption text (oracle \u00A7c \"hosts the ROW field chips\";\r\n                   views/0/initial-full-page.png). The caption is the panel-hidden rendering\r\n                   only (accepted deviation \u2014 dx shows an empty corner then). -->\r\n              <th\r\n                class=\"nxe-pivot-corner dx-area-description-cell\"\r\n                role=\"columnheader\"\r\n                [class.nxe-pivot-corner-fields]=\"panelVisible()\"\r\n                [attr.rowspan]=\"m.columnHeaderRows.length\"\r\n                [attr.colspan]=\"m.rowHeaderColCount > 1 ? m.rowHeaderColCount : null\">@if (chooserInCorner()) {<ng-container *ngTemplateOutlet=\"chooserToolbarTpl\" />}@if (panelVisible()) {<ng-container *ngTemplateOutlet=\"panelRowAreaTpl()\" />} @else {{{ m.cornerText }}}</th>\r\n            }\r\n            @for (cell of hr; track $index) {\r\n              <th\r\n                class=\"nxe-pivot-col-header\"\r\n                role=\"columnheader\"\r\n                [class.nxe-pivot-grandtotal]=\"cell.isGrandTotal\"\r\n                [class.nxe-pivot-total]=\"cell.isTotal\"\r\n                [class.dx-row-total]=\"cell.isGrandTotal || cell.isTotal\"\r\n                [class.dx-grandtotal]=\"cell.isGrandTotal\"\r\n                [class.dx-total]=\"cell.isTotal\"\r\n                [class.dx-pivotgrid-expanded]=\"cell.expandable && cell.expanded\"\r\n                [class.dx-pivotgrid-collapsed]=\"cell.expandable && !cell.expanded\"\r\n                [attr.colspan]=\"cell.colspan\"\r\n                [attr.rowspan]=\"cell.rowspan && cell.rowspan > 1 ? cell.rowspan : null\"\r\n                [attr.tabindex]=\"cell.expandable ? 0 : null\"\r\n                [attr.aria-expanded]=\"cell.expandable ? cell.expanded === true : null\"\r\n                (click)=\"onColHeaderCellClick($event, cell)\"\r\n                (keydown.enter)=\"cell.expandable && onExpandKey($event, cell.pathKey ?? '', cell.expanded === true)\"\r\n                (keydown.space)=\"cell.expandable && onExpandKey($event, cell.pathKey ?? '', cell.expanded === true)\">\r\n                @if (cell.expandable) {\r\n                  <span\r\n                    class=\"nxe-pivot-expand dx-expand-icon-container\"\r\n                    [class.nxe-pivot-expanded]=\"cell.expanded\"\r\n                    (click)=\"onColExpandClick($event, cell)\"><span class=\"dx-expand\">{{ cell.expanded ? '\u2212' : '+' }}</span></span>\r\n                }<span class=\"nxe-pivot-col-label\">{{ cell.text }}</span></th>\r\n            }\r\n          </tr>\r\n        }\r\n      </thead>\r\n      <tbody>\r\n        <!-- W4 Lane 3: `viewRows()` is the rendered row window ({row, ri} with ri = MODEL row\r\n             index \u2014 matrix addressing must not shift). All rows unless nxe-scrolling\r\n             mode=\"virtual\" arms tree-scoped windowing; the spacer rows stand in for the\r\n             unrendered rows so the scrollbar geometry stays true. -->\r\n        @if (topSpacerH() > 0) {\r\n          <tr class=\"nxe-pivot-vspacer\" aria-hidden=\"true\"><td [attr.colspan]=\"totalColCount()\" [style.height.px]=\"topSpacerH()\"></td></tr>\r\n        }\r\n        @for (entry of viewRows(); track entry.row.trackKey ?? entry.row.pathKey) {\r\n          @let row = entry.row;\r\n          @let ri = entry.ri;\r\n          <tr class=\"nxe-pivot-row\" role=\"row\" [class.nxe-pivot-total-row]=\"row.kind === 'T'\">\r\n            @if (m.rowHeaderLayout === 'tree') {\r\n              @if (row.measureRowspan !== 0) {\r\n                <th\r\n                  class=\"nxe-pivot-row-header\"\r\n                  role=\"rowheader\"\r\n                  [attr.rowspan]=\"row.measureRowspan && row.measureRowspan > 1 ? row.measureRowspan : null\"\r\n                  [style.padding-left.px]=\"10 + row.level * 16\"\r\n                  [attr.tabindex]=\"row.hasChildren ? 0 : null\"\r\n                  [attr.aria-expanded]=\"row.hasChildren ? row.expanded : null\"\r\n                  (click)=\"onRowHeaderCellClick($event, row, null)\"\r\n                  (keydown.enter)=\"row.hasChildren && onExpandKey($event, row.pathKey, row.expanded)\"\r\n                  (keydown.space)=\"row.hasChildren && onExpandKey($event, row.pathKey, row.expanded)\">\r\n                  @if (row.hasChildren) {\r\n                    <span\r\n                      class=\"nxe-pivot-expand dx-expand-icon-container\"\r\n                      [class.nxe-pivot-expanded]=\"row.expanded\"\r\n                      (click)=\"onRowExpandClick($event, row, null)\"><span class=\"dx-expand\">{{ row.expanded ? '\u2212' : '+' }}</span></span>\r\n                  }\r\n                  <span class=\"nxe-pivot-row-label\">{{ row.label }}</span>\r\n                </th>\r\n              }\r\n              @if (row.measureCaption !== undefined) {\r\n                <th\r\n                  class=\"nxe-pivot-row-header nxe-pivot-measure-header\"\r\n                  role=\"rowheader\"\r\n                  [class.nxe-pivot-total]=\"row.kind === 'T'\"\r\n                  [class.dx-row-total]=\"row.kind === 'T'\"\r\n                  [class.dx-total]=\"row.kind === 'T'\"\r\n                  (click)=\"onMeasureCellClick($event, row)\">{{ row.measureCaption }}</th>\r\n              }\r\n            } @else {\r\n              @for (hc of row.headerCells; track $index) {\r\n                <th\r\n                  class=\"nxe-pivot-row-header\"\r\n                  role=\"rowheader\"\r\n                  [class.nxe-pivot-total]=\"hc.isTotal\"\r\n                  [class.dx-row-total]=\"hc.isTotal\"\r\n                  [class.dx-total]=\"hc.isTotal\"\r\n                  [class.dx-pivotgrid-expanded]=\"hc.expandable && hc.expanded\"\r\n                  [class.dx-pivotgrid-collapsed]=\"hc.expandable && !hc.expanded\"\r\n                  [attr.rowspan]=\"hc.rowspan > 1 ? hc.rowspan : null\"\r\n                  [attr.colspan]=\"hc.colspan > 1 ? hc.colspan : null\"\r\n                  [attr.tabindex]=\"hc.expandable ? 0 : null\"\r\n                  [attr.aria-expanded]=\"hc.expandable ? hc.expanded : null\"\r\n                  (click)=\"onRowHeaderCellClick($event, row, hc)\"\r\n                  (keydown.enter)=\"hc.expandable && onExpandKey($event, hc.pathKey, hc.expanded)\"\r\n                  (keydown.space)=\"hc.expandable && onExpandKey($event, hc.pathKey, hc.expanded)\">\r\n                  @if (hc.expandable) {\r\n                    <span\r\n                      class=\"nxe-pivot-expand dx-expand-icon-container\"\r\n                      [class.nxe-pivot-expanded]=\"hc.expanded\"\r\n                      (click)=\"onRowExpandClick($event, row, hc)\"><span class=\"dx-expand\">{{ hc.expanded ? '\u2212' : '+' }}</span></span>\r\n                  }\r\n                  @if (hc.isTotal) {\r\n                    {{ hc.text }}\r\n                  } @else {\r\n                    <span class=\"nxe-pivot-row-label\">{{ hc.text }}</span>\r\n                  }\r\n                </th>\r\n              }\r\n            }\r\n            @for (leaf of m.leaves; track $index; let li = $index) {\r\n              <td\r\n                class=\"nxe-pivot-data\"\r\n                role=\"gridcell\"\r\n                [class.nxe-pivot-total]=\"row.kind === 'T' || leaf.kind === 'T'\"\r\n                [class.dx-total]=\"row.kind === 'T' || leaf.kind === 'T'\"\r\n                [class.dx-row-total]=\"row.kind === 'T'\"\r\n                [class.nxe-pivot-grandtotal]=\"leaf.isGrandTotal\"\r\n                [class.dx-grandtotal]=\"leaf.isGrandTotal\"\r\n                (click)=\"onDataCellClick($event, ri, li)\">{{ m.textMatrix[ri][li] }}</td>\r\n            }\r\n          </tr>\r\n        }\r\n        @if (bottomSpacerH() > 0) {\r\n          <tr class=\"nxe-pivot-vspacer\" aria-hidden=\"true\"><td [attr.colspan]=\"totalColCount()\" [style.height.px]=\"bottomSpacerH()\"></td></tr>\r\n        }\r\n        @if (m.grandTotalRows; as gtr) {\r\n          @for (g of gtr; track g.dataIndex; let first = $first) {\r\n            <tr class=\"nxe-pivot-row nxe-pivot-grandtotal-row\" role=\"row\">\r\n              @if (first) {\r\n                <th\r\n                  class=\"nxe-pivot-row-header nxe-pivot-grandtotal dx-row-total dx-grandtotal\"\r\n                  role=\"rowheader\"\r\n                  [attr.rowspan]=\"gtr.length > 1 ? gtr.length : null\"\r\n                  [attr.colspan]=\"m.rowHeaderColCount - 1 > 1 ? m.rowHeaderColCount - 1 : null\"\r\n                  (click)=\"onGtHeaderCellClick($event, m.texts.grandTotal)\">{{ m.texts.grandTotal }}</th>\r\n              }\r\n              <th\r\n                class=\"nxe-pivot-row-header nxe-pivot-measure-header nxe-pivot-grandtotal dx-row-total dx-grandtotal\"\r\n                role=\"rowheader\"\r\n                (click)=\"onGtHeaderCellClick($event, g.caption)\">{{ g.caption }}</th>\r\n              @for (gc of g.cells; track $index; let li = $index) {\r\n                <td\r\n                  class=\"nxe-pivot-data nxe-pivot-grandtotal dx-grandtotal dx-row-total\"\r\n                  role=\"gridcell\"\r\n                  [class.dx-total]=\"m.leaves[li].kind === 'T'\"\r\n                  (click)=\"onGtDataCellClick($event, li, g.dataIndex, gc.value, gc.text)\">{{ gc.text }}</td>\r\n              }\r\n            </tr>\r\n          }\r\n        } @else if (m.grandTotalCells; as gt) {\r\n          <tr class=\"nxe-pivot-row nxe-pivot-grandtotal-row\" role=\"row\">\r\n            <th\r\n              class=\"nxe-pivot-row-header nxe-pivot-grandtotal dx-row-total dx-grandtotal\"\r\n              role=\"rowheader\"\r\n              [attr.colspan]=\"m.rowHeaderColCount > 1 ? m.rowHeaderColCount : null\"\r\n              (click)=\"onGtHeaderCellClick($event, m.texts.grandTotal)\">{{ m.texts.grandTotal }}</th>\r\n            @for (gc of gt; track $index; let li = $index) {\r\n              <td\r\n                class=\"nxe-pivot-data nxe-pivot-grandtotal dx-grandtotal dx-row-total\"\r\n                role=\"gridcell\"\r\n                [class.dx-total]=\"m.leaves[li].kind === 'T'\"\r\n                (click)=\"onGtDataCellClick($event, li, m.leaves[li].dataIndex, gc.value, gc.text)\">{{ gc.text }}</td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n    <!-- dx `.dx-pivotgrid-nodata` (gridCoreUtils.renderNoDataText): a <span>, shown when the\r\n         data source isEmpty(), centered over the widget by the dx.light absolute rule. -->\r\n    @if (showNoData()) {\r\n      <span class=\"dx-pivotgrid-nodata\">{{ m.texts.noData }}</span>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"nxe-pivotgrid-empty\"></div>\r\n}\r\n", styles: ["nxe-pivot-grid{display:block;position:relative;color:#333}nxe-pivot-grid .nxe-pivotgrid-scroll{overflow:auto;width:100%;height:100%}nxe-pivot-grid .nxe-pivotgrid-table{border-collapse:collapse;table-layout:auto;background:#fff}nxe-pivot-grid .nxe-pivotgrid-table th,nxe-pivot-grid .nxe-pivotgrid-table td{border:1px solid #ddd;padding:7px 10px;white-space:nowrap;vertical-align:top;font-weight:400}nxe-pivot-grid .nxe-pivot-corner{background-color:#ddd3;color:#333;text-align:left}nxe-pivot-grid .nxe-pivot-corner.nxe-pivot-corner-fields{padding:0;vertical-align:bottom}nxe-pivot-grid .nxe-pivot-corner.nxe-pivot-corner-fields .dx-pivotgrid-fields-area{position:relative}nxe-pivot-grid .nxe-pivot-col-header{color:#959595;text-align:center}nxe-pivot-grid .nxe-pivot-row-header{color:#959595;text-align:left}nxe-pivot-grid .dx-word-wrap .nxe-pivot-col-header,nxe-pivot-grid .dx-word-wrap .nxe-pivot-row-header{white-space:normal}nxe-pivot-grid .dx-word-wrap .dx-pivotgrid-expanded,nxe-pivot-grid .dx-word-wrap .dx-pivotgrid-collapsed{white-space:nowrap}nxe-pivot-grid .dx-word-wrap .dx-pivotgrid-expanded .nxe-pivot-row-label,nxe-pivot-grid .dx-word-wrap .dx-pivotgrid-expanded .nxe-pivot-col-label,nxe-pivot-grid .dx-word-wrap .dx-pivotgrid-collapsed .nxe-pivot-row-label,nxe-pivot-grid .dx-word-wrap .dx-pivotgrid-collapsed .nxe-pivot-col-label{white-space:normal;display:inline-flex}nxe-pivot-grid .nxe-pivot-layout-tree .nxe-pivot-corner{position:sticky;left:0;z-index:2;background-color:#f8f8f8}nxe-pivot-grid .nxe-pivot-layout-tree .nxe-pivot-row-header{position:sticky;left:0;z-index:1;background-color:#fff}nxe-pivot-grid .nxe-pivot-expand{display:inline-block;width:14px;height:14px;line-height:12px;text-align:center;margin-right:6px;border:1px solid #b3b3b3;border-radius:2px;font-size:11px;cursor:pointer;-webkit-user-select:none;user-select:none;color:#959595;background:#fff}nxe-pivot-grid .nxe-pivot-expand:hover{border-color:#5c94c5;color:#5c94c5}nxe-pivot-grid .nxe-pivot-data{text-align:right;color:#333}nxe-pivot-grid .nxe-pivot-total{background-color:#ddd3}nxe-pivot-grid .nxe-pivot-grandtotal{background-color:#f5f5f5!important}nxe-pivot-grid .nxe-pivotgrid-bordered{border:1px solid #ddd}nxe-pivot-grid .nxe-pivotgrid-empty{min-height:1px}nxe-pivot-grid .nxe-pivot-vspacer td{padding:0;border-left:0;border-right:0}nxe-pivot-grid .nxe-pivotgrid-table th[tabindex]:focus-visible{outline:1px dotted rgb(149,149,149);outline-offset:-2px}nxe-pivot-grid .dx-pivotgrid-nodata{position:absolute;top:50%;left:50%;width:100%;text-align:center;transform:translate(-50%,-50%)}.grid-fit-h>nxe-pivot-grid{position:absolute;height:100%;width:100%}\n"] }]
+                        // panel renders — or while the corner hosts the field-chooser toolbar — so the chip
+                        // and area-head chrome (the library's own, nxe-pivot-field-chip + this component's
+                        // scss; an app's dx-prefixed copies under the class mirror) reach the panel bands AND
+                        // the corner-hosted row area without touching the panel-less cross-tab chrome.
+                        '[class.nxe-pivotgrid]': 'panelVisible() || chooserInCorner()',
+                        '[class.nxe-pivotgrid-fields-container]': 'panelVisible() || chooserInCorner()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- P3-C3: the dx `.dx-pivotgrid-toolbar` with the field-chooser button (m_widget.js\r\n     `_renderDescriptionArea` + dx.light float:right chrome). Placement per dx's branch order:\r\n     the panel's filter-header band when it shows, else the panel's column-header band when\r\n     the data/column band row shows, else the cross-tab corner cell, where the button stays\r\n     transparent until hover. Renders only when the projected nxe-field-chooser config is\r\n     enabled. The button chrome is the library's own (nxe-pivot-grid.component.scss). -->\r\n<ng-template #chooserToolbarTpl>\r\n  <div class=\"nxe-pivotgrid-toolbar\">\r\n    <div\r\n      class=\"nxe-pivotgrid-field-chooser-button nxe-pivot-field-chooser-button nxe-widget nxe-button nxe-button-mode-contained nxe-button-normal nxe-button-has-icon\"\r\n      role=\"button\"\r\n      tabindex=\"0\"\r\n      [attr.title]=\"messages.t('pivot.showFieldChooser')\"\r\n      [attr.aria-label]=\"messages.t('pivot.showFieldChooser')\"\r\n      (click)=\"toggleFieldChooser()\"\r\n      (keydown.enter)=\"toggleFieldChooser()\">\r\n      <!-- dx's 18px `.dx-icon-columnchooser` glyph, redrawn from rectangles (the DXIcons font is\r\n           not used): a window with a 2px frame (12 x 12) behind a solid 8 x 11 list panel with\r\n           three 4 x 1 slots, unioned into one even-odd path so the slots stay open where the\r\n           panel covers the frame. The span keeps the class the specs query but not `nxe-icon`,\r\n           whose mask layer would hide an inline SVG. -->\r\n      <div class=\"nxe-button-content\"><span class=\"nxe-icon-columnchooser nxe-pivot-chooser-icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 18 18\" width=\"18\" height=\"18\" focusable=\"false\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M1 2h12v4h4v11H9v-3H1zM3 4v8h6V6h2V4zM11 8v1h4V8zM11 11v1h4v-1zM11 14v1h4v-1z\" /></svg></span></div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n@if (model(); as m) {\r\n  <!-- P3-C2: the dx field panel (dxo-field-panel). dx default visible=false \u2014 nothing renders\r\n       unless the projected nxe-field-panel opts in (the calc tabs project none). `undefined`\r\n       bound into a flag (report-output-pivot binds panelConfig()?.\u2026) falls back to the dx\r\n       default: hidden for `visible`, shown for the five area/drag flags. The ROW area is not\r\n       in this block \u2014 the panel exposes it as a template and the corner cell below hosts it\r\n       (dx: the corner .dx-area-description-cell holds the row chips). -->\r\n  @if (fieldPanel(); as fp) {\r\n    @if (fp.visible()) {\r\n      <nxe-pivot-field-panel\r\n        [engine]=\"engine()\"\r\n        [showFilterFields]=\"fp.showFilterFields() !== false\"\r\n        [showDataFields]=\"fp.showDataFields() !== false\"\r\n        [showColumnFields]=\"fp.showColumnFields() !== false\"\r\n        [showRowFields]=\"fp.showRowFields() !== false\"\r\n        [allowFieldDragging]=\"fp.allowFieldDragging() !== false\"\r\n        [allowSorting]=\"allowSortingEff()\"\r\n        [allowFiltering]=\"allowFilteringEff()\"\r\n        [showBorders]=\"showBordersEff()\"\r\n        [toolbarTemplate]=\"chooserToolbarTpl\"\r\n        [toolbarArea]=\"panelToolbarArea()\"\r\n        (fieldMove)=\"onPanelFieldMove($event)\"\r\n        (sortToggle)=\"onPanelSortToggle($event)\"\r\n        (filterOpen)=\"openPivotHeaderFilter($event)\" />\r\n    }\r\n  }\r\n  <div class=\"nxe-pivotgrid-scroll\" (scroll)=\"onPivotScroll($event)\">\r\n    <table\r\n      class=\"nxe-pivotgrid-table\"\r\n      role=\"grid\"\r\n      [class.nxe-pivotgrid-bordered]=\"showBordersEff()\"\r\n      [class.nxe-word-wrap]=\"wordWrapEnabledEff()\"\r\n      [class.nxe-pivot-layout-tree]=\"m.rowHeaderLayout === 'tree'\">\r\n      <colgroup>\r\n        @for (w of m.colWidths; track $index) {\r\n          <col [style.width.px]=\"w\" />\r\n        }\r\n      </colgroup>\r\n      <thead>\r\n        @for (hr of m.columnHeaderRows; track $index; let first = $first) {\r\n          <tr role=\"row\">\r\n            @if (first) {\r\n              <!-- Corner: with the field panel VISIBLE dx hosts the ROW-field chips here and\r\n                   renders NO caption text (oracle \u00A7c \"hosts the ROW field chips\";\r\n                   views/0/initial-full-page.png). The caption is the panel-hidden rendering\r\n                   only (accepted deviation \u2014 dx shows an empty corner then). When the\r\n                   field-chooser toolbar lives here the corner is dx's exactly: the button at\r\n                   its top-left (0 cell padding + the button's 1px margin) and no caption,\r\n                   which the button would otherwise sit on top of. -->\r\n              <th\r\n                class=\"nxe-pivot-corner nxe-area-description-cell\"\r\n                role=\"columnheader\"\r\n                [class.nxe-pivot-corner-fields]=\"panelVisible()\"\r\n                [class.nxe-pivot-corner-toolbar]=\"chooserInCorner()\"\r\n                [attr.rowspan]=\"m.columnHeaderRows.length\"\r\n                [attr.colspan]=\"m.rowHeaderColCount > 1 ? m.rowHeaderColCount : null\">@if (chooserInCorner()) {<ng-container *ngTemplateOutlet=\"chooserToolbarTpl\" />}@if (panelVisible()) {<ng-container *ngTemplateOutlet=\"panelRowAreaTpl()\" />} @else if (!chooserInCorner()) {{{ m.cornerText }}}</th>\r\n            }\r\n            @for (cell of hr; track $index) {\r\n              <th\r\n                class=\"nxe-pivot-col-header\"\r\n                role=\"columnheader\"\r\n                [class.nxe-pivot-grandtotal]=\"cell.isGrandTotal\"\r\n                [class.nxe-pivot-total]=\"cell.isTotal\"\r\n                [class.nxe-row-total]=\"cell.isGrandTotal || cell.isTotal\"\r\n                [class.nxe-grandtotal]=\"cell.isGrandTotal\"\r\n                [class.nxe-total]=\"cell.isTotal\"\r\n                [class.nxe-pivotgrid-expanded]=\"cell.expandable && cell.expanded\"\r\n                [class.nxe-pivotgrid-collapsed]=\"cell.expandable && !cell.expanded\"\r\n                [attr.colspan]=\"cell.colspan\"\r\n                [attr.rowspan]=\"cell.rowspan && cell.rowspan > 1 ? cell.rowspan : null\"\r\n                [attr.tabindex]=\"cell.expandable ? 0 : null\"\r\n                [attr.aria-expanded]=\"cell.expandable ? cell.expanded === true : null\"\r\n                (click)=\"onColHeaderCellClick($event, cell)\"\r\n                (keydown.enter)=\"cell.expandable && onExpandKey($event, cell.pathKey ?? '', cell.expanded === true)\"\r\n                (keydown.space)=\"cell.expandable && onExpandKey($event, cell.pathKey ?? '', cell.expanded === true)\">\r\n                @if (cell.expandable) {\r\n                  <span\r\n                    class=\"nxe-pivot-expand nxe-expand-icon-container\"\r\n                    [class.nxe-pivot-expanded]=\"cell.expanded\"\r\n                    (click)=\"onColExpandClick($event, cell)\"><span class=\"nxe-expand\" aria-hidden=\"true\"></span></span>\r\n                }<span class=\"nxe-pivot-col-label\">{{ cell.text }}</span></th>\r\n            }\r\n          </tr>\r\n        }\r\n      </thead>\r\n      <tbody>\r\n        <!-- W4 Lane 3: `viewRows()` is the rendered row window ({row, ri} with ri = MODEL row\r\n             index \u2014 matrix addressing must not shift). All rows unless nxe-scrolling\r\n             mode=\"virtual\" arms tree-scoped windowing; the spacer rows stand in for the\r\n             unrendered rows so the scrollbar geometry stays true. -->\r\n        @if (topSpacerH() > 0) {\r\n          <tr class=\"nxe-pivot-vspacer\" aria-hidden=\"true\"><td [attr.colspan]=\"totalColCount()\" [style.height.px]=\"topSpacerH()\"></td></tr>\r\n        }\r\n        @for (entry of viewRows(); track entry.row.trackKey ?? entry.row.pathKey) {\r\n          @let row = entry.row;\r\n          @let ri = entry.ri;\r\n          <tr class=\"nxe-pivot-row\" role=\"row\" [class.nxe-pivot-total-row]=\"row.kind === 'T'\">\r\n            @if (m.rowHeaderLayout === 'tree') {\r\n              @if (row.measureRowspan !== 0) {\r\n                <th\r\n                  class=\"nxe-pivot-row-header\"\r\n                  role=\"rowheader\"\r\n                  [attr.rowspan]=\"row.measureRowspan && row.measureRowspan > 1 ? row.measureRowspan : null\"\r\n                  [style.padding-left.px]=\"10 + row.level * 16\"\r\n                  [attr.tabindex]=\"row.hasChildren ? 0 : null\"\r\n                  [attr.aria-expanded]=\"row.hasChildren ? row.expanded : null\"\r\n                  (click)=\"onRowHeaderCellClick($event, row, null)\"\r\n                  (keydown.enter)=\"row.hasChildren && onExpandKey($event, row.pathKey, row.expanded)\"\r\n                  (keydown.space)=\"row.hasChildren && onExpandKey($event, row.pathKey, row.expanded)\">\r\n                  @if (row.hasChildren) {\r\n                    <span\r\n                      class=\"nxe-pivot-expand nxe-expand-icon-container\"\r\n                      [class.nxe-pivot-expanded]=\"row.expanded\"\r\n                      (click)=\"onRowExpandClick($event, row, null)\"><span class=\"nxe-expand\" aria-hidden=\"true\"></span></span>\r\n                  }\r\n                  <span class=\"nxe-pivot-row-label\">{{ row.label }}</span>\r\n                </th>\r\n              }\r\n              @if (row.measureCaption !== undefined) {\r\n                <th\r\n                  class=\"nxe-pivot-row-header nxe-pivot-measure-header\"\r\n                  role=\"rowheader\"\r\n                  [class.nxe-pivot-total]=\"row.kind === 'T'\"\r\n                  [class.nxe-row-total]=\"row.kind === 'T'\"\r\n                  [class.nxe-total]=\"row.kind === 'T'\"\r\n                  (click)=\"onMeasureCellClick($event, row)\">{{ row.measureCaption }}</th>\r\n              }\r\n            } @else {\r\n              @for (hc of row.headerCells; track $index) {\r\n                <th\r\n                  class=\"nxe-pivot-row-header\"\r\n                  role=\"rowheader\"\r\n                  [class.nxe-pivot-total]=\"hc.isTotal\"\r\n                  [class.nxe-row-total]=\"hc.isTotal\"\r\n                  [class.nxe-total]=\"hc.isTotal\"\r\n                  [class.nxe-pivotgrid-expanded]=\"hc.expandable && hc.expanded\"\r\n                  [class.nxe-pivotgrid-collapsed]=\"hc.expandable && !hc.expanded\"\r\n                  [attr.rowspan]=\"hc.rowspan > 1 ? hc.rowspan : null\"\r\n                  [attr.colspan]=\"hc.colspan > 1 ? hc.colspan : null\"\r\n                  [attr.tabindex]=\"hc.expandable ? 0 : null\"\r\n                  [attr.aria-expanded]=\"hc.expandable ? hc.expanded : null\"\r\n                  (click)=\"onRowHeaderCellClick($event, row, hc)\"\r\n                  (keydown.enter)=\"hc.expandable && onExpandKey($event, hc.pathKey, hc.expanded)\"\r\n                  (keydown.space)=\"hc.expandable && onExpandKey($event, hc.pathKey, hc.expanded)\">\r\n                  @if (hc.expandable) {\r\n                    <span\r\n                      class=\"nxe-pivot-expand nxe-expand-icon-container\"\r\n                      [class.nxe-pivot-expanded]=\"hc.expanded\"\r\n                      (click)=\"onRowExpandClick($event, row, hc)\"><span class=\"nxe-expand\" aria-hidden=\"true\"></span></span>\r\n                  }\r\n                  @if (hc.isTotal) {\r\n                    {{ hc.text }}\r\n                  } @else {\r\n                    <span class=\"nxe-pivot-row-label\">{{ hc.text }}</span>\r\n                  }\r\n                </th>\r\n              }\r\n            }\r\n            @for (leaf of m.leaves; track $index; let li = $index) {\r\n              <td\r\n                class=\"nxe-pivot-data\"\r\n                role=\"gridcell\"\r\n                [class.nxe-pivot-total]=\"row.kind === 'T' || leaf.kind === 'T'\"\r\n                [class.nxe-total]=\"row.kind === 'T' || leaf.kind === 'T'\"\r\n                [class.nxe-row-total]=\"row.kind === 'T'\"\r\n                [class.nxe-pivot-grandtotal]=\"leaf.isGrandTotal\"\r\n                [class.nxe-grandtotal]=\"leaf.isGrandTotal\"\r\n                (click)=\"onDataCellClick($event, ri, li)\">{{ m.textMatrix[ri][li] }}</td>\r\n            }\r\n          </tr>\r\n        }\r\n        @if (bottomSpacerH() > 0) {\r\n          <tr class=\"nxe-pivot-vspacer\" aria-hidden=\"true\"><td [attr.colspan]=\"totalColCount()\" [style.height.px]=\"bottomSpacerH()\"></td></tr>\r\n        }\r\n        @if (m.grandTotalRows; as gtr) {\r\n          @for (g of gtr; track g.dataIndex; let first = $first) {\r\n            <tr class=\"nxe-pivot-row nxe-pivot-grandtotal-row\" role=\"row\">\r\n              @if (first) {\r\n                <th\r\n                  class=\"nxe-pivot-row-header nxe-pivot-grandtotal nxe-row-total nxe-grandtotal\"\r\n                  role=\"rowheader\"\r\n                  [attr.rowspan]=\"gtr.length > 1 ? gtr.length : null\"\r\n                  [attr.colspan]=\"m.rowHeaderColCount - 1 > 1 ? m.rowHeaderColCount - 1 : null\"\r\n                  (click)=\"onGtHeaderCellClick($event, m.texts.grandTotal)\">{{ m.texts.grandTotal }}</th>\r\n              }\r\n              <th\r\n                class=\"nxe-pivot-row-header nxe-pivot-measure-header nxe-pivot-grandtotal nxe-row-total nxe-grandtotal\"\r\n                role=\"rowheader\"\r\n                (click)=\"onGtHeaderCellClick($event, g.caption)\">{{ g.caption }}</th>\r\n              @for (gc of g.cells; track $index; let li = $index) {\r\n                <td\r\n                  class=\"nxe-pivot-data nxe-pivot-grandtotal nxe-grandtotal nxe-row-total\"\r\n                  role=\"gridcell\"\r\n                  [class.nxe-total]=\"m.leaves[li].kind === 'T'\"\r\n                  (click)=\"onGtDataCellClick($event, li, g.dataIndex, gc.value, gc.text)\">{{ gc.text }}</td>\r\n              }\r\n            </tr>\r\n          }\r\n        } @else if (m.grandTotalCells; as gt) {\r\n          <tr class=\"nxe-pivot-row nxe-pivot-grandtotal-row\" role=\"row\">\r\n            <th\r\n              class=\"nxe-pivot-row-header nxe-pivot-grandtotal nxe-row-total nxe-grandtotal\"\r\n              role=\"rowheader\"\r\n              [attr.colspan]=\"m.rowHeaderColCount > 1 ? m.rowHeaderColCount : null\"\r\n              (click)=\"onGtHeaderCellClick($event, m.texts.grandTotal)\">{{ m.texts.grandTotal }}</th>\r\n            @for (gc of gt; track $index; let li = $index) {\r\n              <td\r\n                class=\"nxe-pivot-data nxe-pivot-grandtotal nxe-grandtotal nxe-row-total\"\r\n                role=\"gridcell\"\r\n                [class.nxe-total]=\"m.leaves[li].kind === 'T'\"\r\n                (click)=\"onGtDataCellClick($event, li, m.leaves[li].dataIndex, gc.value, gc.text)\">{{ gc.text }}</td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n    <!-- dx `.dx-pivotgrid-nodata` (gridCoreUtils.renderNoDataText): a <span>, shown when the\r\n         data source isEmpty(), centered over the widget by the dx.light absolute rule. -->\r\n    @if (showNoData()) {\r\n      <span class=\"nxe-pivotgrid-nodata\">{{ m.texts.noData }}</span>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"nxe-pivotgrid-empty\"></div>\r\n}\r\n", styles: ["nxe-pivot-grid{display:block;position:relative;color:#333}nxe-pivot-grid .nxe-pivotgrid-scroll{overflow:auto;width:100%;height:100%}nxe-pivot-grid .nxe-pivotgrid-table{border-collapse:collapse;table-layout:auto;background:#fff}nxe-pivot-grid .nxe-pivotgrid-table th,nxe-pivot-grid .nxe-pivotgrid-table td{border:1px solid #ddd;padding:7px 10px;white-space:nowrap;vertical-align:top;font-weight:400}nxe-pivot-grid .nxe-pivot-corner{background-color:#ddd3;color:#333;text-align:left}nxe-pivot-grid .nxe-pivot-corner.nxe-pivot-corner-fields{padding:0;vertical-align:bottom}nxe-pivot-grid .nxe-pivot-corner.nxe-pivot-corner-fields .nxe-pivotgrid-fields-area{position:relative}nxe-pivot-grid.nxe-pivotgrid .nxe-pivotgrid-fields-area-head td{position:relative;border:none;padding:10px 2px}nxe-pivot-grid.nxe-pivotgrid .nxe-pivotgrid-fields-area-head tr>td:first-child{padding-left:10px}nxe-pivot-grid.nxe-pivotgrid .nxe-pivotgrid-fields-area-head tr>td:last-child{padding-right:10px}nxe-pivot-grid.nxe-pivotgrid .nxe-column-header .nxe-pivotgrid-fields-area-head tr>td:first-child{padding-left:0}nxe-pivot-grid.nxe-pivotgrid .nxe-filter-header .nxe-area-field-container{border-spacing:8px 8px;border-collapse:separate}nxe-pivot-grid.nxe-pivotgrid .nxe-filter-header .nxe-pivotgrid-fields-area-head td{padding:2px}nxe-pivot-grid.nxe-pivotgrid .nxe-filter-header .nxe-pivotgrid-fields-area-head tr>td:first-child{padding-left:2px}nxe-pivot-grid.nxe-pivotgrid .nxe-pivotgrid-fields-area-head .nxe-empty-area-text{padding:7px 0;border:1px solid transparent;color:#525252;white-space:nowrap}nxe-pivot-grid.nxe-pivotgrid .nxe-column-header .nxe-pivotgrid-fields-area,nxe-pivot-grid.nxe-pivotgrid .nxe-filter-header .nxe-pivotgrid-fields-area{overflow:hidden}nxe-pivot-grid .nxe-pivot-corner.nxe-pivot-corner-toolbar{padding:0}nxe-pivot-grid .nxe-pivot-corner.nxe-pivot-corner-toolbar:not(.nxe-pivot-corner-fields){vertical-align:top}nxe-pivot-grid .nxe-pivot-col-header{color:#959595;text-align:center}nxe-pivot-grid .nxe-pivot-col-header.nxe-pivotgrid-expanded,nxe-pivot-grid .nxe-pivot-col-header.nxe-pivotgrid-collapsed{text-align:left}nxe-pivot-grid .nxe-pivotgrid-expanded,nxe-pivot-grid .nxe-pivotgrid-collapsed{cursor:pointer}nxe-pivot-grid .nxe-pivot-row-header{color:#959595;text-align:left}nxe-pivot-grid .nxe-word-wrap .nxe-pivot-col-header,nxe-pivot-grid .nxe-word-wrap .nxe-pivot-row-header{white-space:normal}nxe-pivot-grid .nxe-word-wrap .nxe-pivotgrid-expanded,nxe-pivot-grid .nxe-word-wrap .nxe-pivotgrid-collapsed{white-space:nowrap}nxe-pivot-grid .nxe-word-wrap .nxe-pivotgrid-expanded .nxe-pivot-row-label,nxe-pivot-grid .nxe-word-wrap .nxe-pivotgrid-expanded .nxe-pivot-col-label,nxe-pivot-grid .nxe-word-wrap .nxe-pivotgrid-collapsed .nxe-pivot-row-label,nxe-pivot-grid .nxe-word-wrap .nxe-pivotgrid-collapsed .nxe-pivot-col-label{white-space:normal;display:inline-flex}nxe-pivot-grid .nxe-pivot-layout-tree .nxe-pivot-corner{position:sticky;left:0;z-index:2;background-color:#f8f8f8}nxe-pivot-grid .nxe-pivot-layout-tree .nxe-pivot-row-header{position:sticky;left:0;z-index:1;background-color:#fff}nxe-pivot-grid .nxe-pivot-expand{position:relative;display:inline-block;box-sizing:border-box;width:14px;height:14px;margin:0;margin-inline:-5px 0;padding:0;border:0;background:none;vertical-align:top;cursor:pointer;-webkit-user-select:none;user-select:none;color:#959595}nxe-pivot-grid .nxe-pivot-expand .nxe-expand{display:inline-block;vertical-align:top}nxe-pivot-grid .nxe-pivot-expand .nxe-expand:before{content:\"\";position:absolute;left:50%;top:50%;box-sizing:content-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}nxe-pivot-grid .nxe-pivot-expand.nxe-pivot-expanded .nxe-expand:before{margin:-2px 0 0 -4px;border-width:4px 4px 0;border-color:currentColor transparent transparent}nxe-pivot-grid .nxe-pivotgrid-field-chooser-button{display:inline-flex;box-sizing:border-box;max-width:100%;overflow:hidden;margin:0;border:1px solid var(--nxe-ui-border, #ddd);border-radius:var(--nxe-ui-radius, 4px);background-color:var(--nxe-ui-surface, #fff);color:var(--nxe-ui-text, #333);text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;outline:0}nxe-pivot-grid .nxe-pivotgrid-field-chooser-button .nxe-button-content{display:flex;flex:1 1 auto;align-items:center;justify-content:center;box-sizing:border-box;height:100%;padding:5px;line-height:var(--nxe-ui-line-height, 1.35715)}nxe-pivot-grid .nxe-pivotgrid-field-chooser-button:hover{background-color:#f5f5f5}nxe-pivot-grid .nxe-pivotgrid-field-chooser-button:focus-visible{background-color:#ebebeb}nxe-pivot-grid .nxe-pivotgrid-field-chooser-button:active{background-color:#c2c2c2}nxe-pivot-grid .nxe-pivotgrid-toolbar .nxe-icon-columnchooser{display:flex;flex:0 0 auto;width:18px;height:18px}nxe-pivot-grid .nxe-pivotgrid-toolbar .nxe-icon-columnchooser>svg{display:block;width:18px;height:18px}nxe-pivot-grid .nxe-pivotgrid-toolbar .nxe-icon-columnchooser:before,nxe-pivot-grid .nxe-pivotgrid-toolbar .nxe-icon-columnchooser:after{content:none}nxe-pivot-grid .nxe-filter-header .nxe-pivotgrid-toolbar,nxe-pivot-grid .nxe-column-header .nxe-pivotgrid-toolbar{display:inline-block;float:right;margin-right:10px}nxe-pivot-grid .nxe-filter-header .nxe-pivotgrid-toolbar .nxe-pivotgrid-field-chooser-button,nxe-pivot-grid .nxe-column-header .nxe-pivotgrid-toolbar .nxe-pivotgrid-field-chooser-button{margin-top:12px;margin-right:4px}nxe-pivot-grid .nxe-area-description-cell .nxe-pivotgrid-toolbar{display:block;float:none;margin:0}nxe-pivot-grid .nxe-area-description-cell .nxe-pivotgrid-toolbar .nxe-pivotgrid-field-chooser-button{margin:1px}nxe-pivot-grid .nxe-area-description-cell .nxe-pivotgrid-toolbar .nxe-pivotgrid-field-chooser-button:not(:hover):not(:active){border-color:transparent;background-color:transparent;box-shadow:none}nxe-pivot-grid .nxe-pivot-data{text-align:right;color:#333}nxe-pivot-grid .nxe-pivot-total{background-color:#ddd3}nxe-pivot-grid .nxe-pivot-grandtotal{background-color:#f5f5f5!important}nxe-pivot-grid .nxe-pivotgrid-bordered{border:1px solid #ddd}nxe-pivot-grid .nxe-pivotgrid-empty{min-height:1px}nxe-pivot-grid .nxe-pivot-vspacer td{padding:0;border-left:0;border-right:0}nxe-pivot-grid .nxe-pivotgrid-table th[tabindex]:focus-visible{outline:1px dotted rgb(149,149,149);outline-offset:-2px}nxe-pivot-grid .nxe-pivotgrid-nodata{position:absolute;top:50%;left:50%;width:100%;text-align:center;transform:translate(-50%,-50%)}.grid-fit-h>nxe-pivot-grid{position:absolute;height:100%;width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], allowFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFiltering", required: false }] }], allowSortingBySummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSortingBySummary", required: false }] }], allowExpandAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowExpandAll", required: false }] }], showBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBorders", required: false }] }], wordWrapEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "wordWrapEnabled", required: false }] }], rowHeaderLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeaderLayout", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], texts: [{ type: i0.Input, args: [{ isSignal: true, alias: "texts", required: false }] }], showColumnTotals: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnTotals", required: false }] }], showRowTotals: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRowTotals", required: false }] }], showColumnGrandTotals: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnGrandTotals", required: false }] }], showRowGrandTotals: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRowGrandTotals", required: false }] }], showTotalsPrior: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotalsPrior", required: false }] }], dataFieldArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataFieldArea", required: false }] }], allowSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSorting", required: false }] }], onCellClick: [{
                 type: Output
             }], onCellPrepared: [{
@@ -4722,11 +4777,11 @@ class NxeChartComponent {
         return this.facade;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeChartComponent, isStandalone: true, selector: "nxe-chart", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "nxe-widget nxe-chart" }, queries: [{ propertyName: "commonSeries", first: true, predicate: NxeCommonSeriesSettingsComponent, descendants: true, isSignal: true }, { propertyName: "size", first: true, predicate: NxeSizeComponent, descendants: true, isSignal: true }, { propertyName: "adaptiveLayout", first: true, predicate: NxeAdaptiveLayoutComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"nxe-chart-host\" [style.height.px]=\"chartHeight()\">\r\n  @if (hasData()) {\r\n    <div class=\"nxe-chart-plot\">\r\n      <svg\r\n        [attr.width]=\"chartWidth()\"\r\n        [attr.height]=\"chartHeight()\"\r\n        [attr.viewBox]=\"'0 0 ' + chartWidth() + ' ' + chartHeight()\"\r\n        class=\"nxe-chart-svg\">\r\n        <!-- baseline -->\r\n        <line\r\n          [attr.x1]=\"axisLeft()\"\r\n          [attr.x2]=\"axisRight()\"\r\n          [attr.y1]=\"baselineY()\"\r\n          [attr.y2]=\"baselineY()\"\r\n          class=\"nxe-chart-axis\" />\r\n        @for (b of bars(); track $index) {\r\n          <rect [attr.x]=\"b.x\" [attr.y]=\"b.y\" [attr.width]=\"b.w\" [attr.height]=\"b.h\" [attr.fill]=\"b.fill\" />\r\n        }\r\n      </svg>\r\n    </div>\r\n    <div class=\"nxe-chart-legend\">\r\n      @for (item of legend(); track $index) {\r\n        <span class=\"nxe-chart-legend-item\">\r\n          <span class=\"nxe-chart-legend-swatch\" [style.background]=\"item.fill\"></span>\r\n          {{ item.name }}\r\n        </span>\r\n      }\r\n    </div>\r\n  } @else {\r\n    <div class=\"nxe-chart-empty\"></div>\r\n  }\r\n</div>\r\n", styles: ["nxe-chart{display:block;width:100%}nxe-chart .nxe-chart-host{display:flex;flex-direction:column;width:100%;overflow-x:auto}nxe-chart .nxe-chart-plot{flex:1 1 auto;min-height:0}nxe-chart .nxe-chart-svg{display:block}nxe-chart .nxe-chart-axis{stroke:#d3d3d3;stroke-width:1}nxe-chart .nxe-chart-legend{display:flex;flex-wrap:wrap;gap:4px 16px;padding:6px 8px 0;font-size:12px;color:#333}nxe-chart .nxe-chart-legend-item{display:inline-flex;align-items:center}nxe-chart .nxe-chart-legend-swatch{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px}nxe-chart .nxe-chart-empty{flex:1 1 auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeChartComponent, isStandalone: true, selector: "nxe-chart", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "nxe-widget nxe-chart" }, queries: [{ propertyName: "commonSeries", first: true, predicate: NxeCommonSeriesSettingsComponent, descendants: true, isSignal: true }, { propertyName: "size", first: true, predicate: NxeSizeComponent, descendants: true, isSignal: true }, { propertyName: "adaptiveLayout", first: true, predicate: NxeAdaptiveLayoutComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"nxe-chart-host\" [style.height.px]=\"chartHeight()\">\r\n  @if (hasData()) {\r\n    <div class=\"nxe-chart-plot\">\r\n      <svg\r\n        [attr.width]=\"chartWidth()\"\r\n        [attr.height]=\"chartHeight()\"\r\n        [attr.viewBox]=\"'0 0 ' + chartWidth() + ' ' + chartHeight()\"\r\n        class=\"nxe-chart-svg\">\r\n        <!-- baseline -->\r\n        <line\r\n          [attr.x1]=\"axisLeft()\"\r\n          [attr.x2]=\"axisRight()\"\r\n          [attr.y1]=\"baselineY()\"\r\n          [attr.y2]=\"baselineY()\"\r\n          class=\"nxe-chart-axis\" />\r\n        @for (b of bars(); track $index) {\r\n          <rect [attr.x]=\"b.x\" [attr.y]=\"b.y\" [attr.width]=\"b.w\" [attr.height]=\"b.h\" [attr.fill]=\"b.fill\" />\r\n        }\r\n      </svg>\r\n    </div>\r\n    <div class=\"nxe-chart-legend\">\r\n      @for (item of legend(); track $index) {\r\n        <span class=\"nxe-chart-legend-item\">\r\n          <span class=\"nxe-chart-legend-swatch\" [style.background]=\"item.fill\"></span>\r\n          {{ item.name }}\r\n        </span>\r\n      }\r\n    </div>\r\n  } @else {\r\n    <div class=\"nxe-chart-empty\"></div>\r\n  }\r\n</div>\r\n", styles: ["nxe-chart{display:block;width:100%}nxe-chart .nxe-chart-host{display:flex;flex-direction:column;width:100%;overflow-x:auto}nxe-chart .nxe-chart-plot{flex:1 1 auto;min-height:0}nxe-chart .nxe-chart-svg{display:block}nxe-chart .nxe-chart-axis{stroke:var(--nxe-ui-neutral-240, #d3d3d3);stroke-width:1}nxe-chart .nxe-chart-legend{display:flex;flex-wrap:wrap;gap:4px 16px;padding:6px 8px 0;font-size:12px;color:var(--nxe-ui-text, #333)}nxe-chart .nxe-chart-legend-item{display:inline-flex;align-items:center}nxe-chart .nxe-chart-legend-swatch{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px}nxe-chart .nxe-chart-empty{flex:1 1 auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nxe-chart', standalone: true, host: { class: 'nxe-widget nxe-chart' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-chart-host\" [style.height.px]=\"chartHeight()\">\r\n  @if (hasData()) {\r\n    <div class=\"nxe-chart-plot\">\r\n      <svg\r\n        [attr.width]=\"chartWidth()\"\r\n        [attr.height]=\"chartHeight()\"\r\n        [attr.viewBox]=\"'0 0 ' + chartWidth() + ' ' + chartHeight()\"\r\n        class=\"nxe-chart-svg\">\r\n        <!-- baseline -->\r\n        <line\r\n          [attr.x1]=\"axisLeft()\"\r\n          [attr.x2]=\"axisRight()\"\r\n          [attr.y1]=\"baselineY()\"\r\n          [attr.y2]=\"baselineY()\"\r\n          class=\"nxe-chart-axis\" />\r\n        @for (b of bars(); track $index) {\r\n          <rect [attr.x]=\"b.x\" [attr.y]=\"b.y\" [attr.width]=\"b.w\" [attr.height]=\"b.h\" [attr.fill]=\"b.fill\" />\r\n        }\r\n      </svg>\r\n    </div>\r\n    <div class=\"nxe-chart-legend\">\r\n      @for (item of legend(); track $index) {\r\n        <span class=\"nxe-chart-legend-item\">\r\n          <span class=\"nxe-chart-legend-swatch\" [style.background]=\"item.fill\"></span>\r\n          {{ item.name }}\r\n        </span>\r\n      }\r\n    </div>\r\n  } @else {\r\n    <div class=\"nxe-chart-empty\"></div>\r\n  }\r\n</div>\r\n", styles: ["nxe-chart{display:block;width:100%}nxe-chart .nxe-chart-host{display:flex;flex-direction:column;width:100%;overflow-x:auto}nxe-chart .nxe-chart-plot{flex:1 1 auto;min-height:0}nxe-chart .nxe-chart-svg{display:block}nxe-chart .nxe-chart-axis{stroke:#d3d3d3;stroke-width:1}nxe-chart .nxe-chart-legend{display:flex;flex-wrap:wrap;gap:4px 16px;padding:6px 8px 0;font-size:12px;color:#333}nxe-chart .nxe-chart-legend-item{display:inline-flex;align-items:center}nxe-chart .nxe-chart-legend-swatch{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px}nxe-chart .nxe-chart-empty{flex:1 1 auto}\n"] }]
+            args: [{ selector: 'nxe-chart', standalone: true, host: { class: 'nxe-widget nxe-chart' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-chart-host\" [style.height.px]=\"chartHeight()\">\r\n  @if (hasData()) {\r\n    <div class=\"nxe-chart-plot\">\r\n      <svg\r\n        [attr.width]=\"chartWidth()\"\r\n        [attr.height]=\"chartHeight()\"\r\n        [attr.viewBox]=\"'0 0 ' + chartWidth() + ' ' + chartHeight()\"\r\n        class=\"nxe-chart-svg\">\r\n        <!-- baseline -->\r\n        <line\r\n          [attr.x1]=\"axisLeft()\"\r\n          [attr.x2]=\"axisRight()\"\r\n          [attr.y1]=\"baselineY()\"\r\n          [attr.y2]=\"baselineY()\"\r\n          class=\"nxe-chart-axis\" />\r\n        @for (b of bars(); track $index) {\r\n          <rect [attr.x]=\"b.x\" [attr.y]=\"b.y\" [attr.width]=\"b.w\" [attr.height]=\"b.h\" [attr.fill]=\"b.fill\" />\r\n        }\r\n      </svg>\r\n    </div>\r\n    <div class=\"nxe-chart-legend\">\r\n      @for (item of legend(); track $index) {\r\n        <span class=\"nxe-chart-legend-item\">\r\n          <span class=\"nxe-chart-legend-swatch\" [style.background]=\"item.fill\"></span>\r\n          {{ item.name }}\r\n        </span>\r\n      }\r\n    </div>\r\n  } @else {\r\n    <div class=\"nxe-chart-empty\"></div>\r\n  }\r\n</div>\r\n", styles: ["nxe-chart{display:block;width:100%}nxe-chart .nxe-chart-host{display:flex;flex-direction:column;width:100%;overflow-x:auto}nxe-chart .nxe-chart-plot{flex:1 1 auto;min-height:0}nxe-chart .nxe-chart-svg{display:block}nxe-chart .nxe-chart-axis{stroke:var(--nxe-ui-neutral-240, #d3d3d3);stroke-width:1}nxe-chart .nxe-chart-legend{display:flex;flex-wrap:wrap;gap:4px 16px;padding:6px 8px 0;font-size:12px;color:var(--nxe-ui-text, #333)}nxe-chart .nxe-chart-legend-item{display:inline-flex;align-items:center}nxe-chart .nxe-chart-legend-swatch{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px}nxe-chart .nxe-chart-empty{flex:1 1 auto}\n"] }]
         }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], commonSeries: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeCommonSeriesSettingsComponent), { isSignal: true }] }], size: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeSizeComponent), { isSignal: true }] }], adaptiveLayout: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeAdaptiveLayoutComponent), { isSignal: true }] }] } });
 
 // @nexterajs/ui/pivot — public API.