@nexterajs/ui 0.0.2 → 0.1.0

package/fesm2022/nexterajs-ui-pivot.mjs

@@ -7,6 +7,8 @@ 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';
 
@@ -2330,12 +2332,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 // `.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
 // `nxe-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',
+/** 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
@@ -2409,6 +2411,7 @@ class NxePivotFieldPanelComponent {
     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 */ []));
@@ -2500,7 +2503,7 @@ class NxePivotFieldPanelComponent {
     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() {
@@ -2610,11 +2613,11 @@ 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=\"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:#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.nxe-data-header,nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr>td.nxe-column-header{background-color:#ddd3}nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr>td.nxe-data-header{border-right:1px solid #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 });
+    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=\"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:#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.nxe-data-header,nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr>td.nxe-column-header{background-color:#ddd3}nxe-pivot-field-panel .nxe-pivot-field-panel-table>tbody>tr>td.nxe-data-header{border-right:1px solid #ddd}nxe-pivot-field-panel .nxe-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 */
@@ -2671,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 = {
@@ -2719,7 +2722,15 @@ 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 */ []));
@@ -2880,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,
         };
@@ -3022,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 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      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, 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                    placeholder=\"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                                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=\"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:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 6px 12px #0000002d;color:#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 #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:#0000000a}nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:focus-visible{background-color:#00000014}nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:active{background-color:#0000003d}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:#ddd3}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 #ddd;border-radius:4px;background:#fff;color:#333;font:inherit;outline:0}nxe-pivot-field-chooser .nxe-treeview-search .nxe-texteditor-input:focus{border-color:#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:#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 });
+    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 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      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, 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                    placeholder=\"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                                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=\"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:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 6px 12px #0000002d;color:#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 #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:#0000000a}nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:focus-visible{background-color:#00000014}nxe-pivot-field-chooser .nxe-popup-title .nxe-closebutton:active{background-color:#0000003d}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:#ddd3}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 #ddd;border-radius:4px;background:#fff;color:#333;font:inherit;outline:0}nxe-pivot-field-chooser .nxe-treeview-search .nxe-texteditor-input:focus{border-color:#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:#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"] }]
+            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 */
@@ -3298,6 +3309,8 @@ class NxePivotGridComponent {
     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 */ []));
@@ -3395,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 */
@@ -4011,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. */
@@ -4549,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.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      title=\"Show Field Chooser\"\r\n      aria-label=\"Show Field Chooser\"\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 });
+    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,
@@ -4563,7 +4588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         // 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      title=\"Show Field Chooser\"\r\n      aria-label=\"Show Field Chooser\"\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"] }]
+                    }, 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: [{
@@ -4752,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.