@progress/kendo-angular-pivotgrid 1.1.2-dev.202211281013 → 11.0.0-develop.79

package/fesm2020/progress-kendo-angular-pivotgrid.mjs

@@ -0,0 +1,3952 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as i0 from '@angular/core';
+import { EventEmitter, Injectable, Output, Component, HostBinding, Input, Directive, ContentChildren, isDevMode, Optional, ContentChild, forwardRef, ViewChild, ElementRef, NgModule } from '@angular/core';
+import { validatePackage } from '@progress/kendo-licensing';
+import * as i3 from '@progress/kendo-angular-common';
+import { isDocumentAvailable, PreventableEvent, Keys, isChanged, hasObservers, anyChanged, EventsModule, DraggableModule } from '@progress/kendo-angular-common';
+import { toTree, toRows, toColumns, toData, configuratorReducer, PIVOT_CONFIGURATOR_ACTION, PivotGridNavigation, ConfiguratorNavigation, HEADERS_ACTION, headersReducer, createFlatSchemaDimensions, createDataTree, createLocalDataState, rootFields, fetchData, createDataState, fetchDiscover, addKPI, buildKPIMeasures } from '@progress/kendo-pivotgrid-common';
+export { averageAggregate, maxAggregate, minAggregate, sumAggregate } from '@progress/kendo-pivotgrid-common';
+import { BehaviorSubject, Subscription, Subject, from, of, fromEvent } from 'rxjs';
+import { take, mergeMap, merge } from 'rxjs/operators';
+import * as i1 from '@progress/kendo-angular-l10n';
+import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import * as i7 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i5$1 from '@progress/kendo-angular-indicators';
+import { IndicatorsModule } from '@progress/kendo-angular-indicators';
+import * as i4 from '@progress/kendo-angular-treeview';
+import { TreeViewComponent, TreeViewModule } from '@progress/kendo-angular-treeview';
+import * as i1$1 from '@progress/kendo-angular-popup';
+import * as i5 from '@progress/kendo-angular-buttons';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i3$1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i1$2 from '@progress/kendo-angular-dropdowns';
+import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
+import * as i6 from '@progress/kendo-angular-inputs';
+import { InputsModule } from '@progress/kendo-angular-inputs';
+
+/**
+ * @hidden
+ */
+const packageMetadata = {
+    name: '@progress/kendo-angular-pivotgrid',
+    productName: 'Kendo UI for Angular',
+    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
+    publishDate: 1672320916,
+    version: '',
+    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
+};
+
+const EMPTY_REGEX = /^\s*$/;
+/**
+ * @hidden
+ */
+const isPresent = (value) => value !== null && value !== undefined;
+/**
+ * @hidden
+ */
+const isBlank = (value) => value === null || value === undefined;
+/**
+ * @hidden
+ */
+const isNullOrEmptyString = (value) => isBlank(value) || EMPTY_REGEX.test(value);
+/**
+ * @hidden
+ * Returns whether two arrays contain the same values.
+ * Assumes array elements are primitive types
+ */
+const areSameArrays = (a1, a2) => {
+    const areArrays = (isPresent(a1) && Array.isArray(a1) && isPresent(a2) && Array.isArray(a2));
+    const areOfEqualLength = a1.length === a2.length;
+    if (!areArrays || !areOfEqualLength) {
+        return false;
+    }
+    for (let i = 0; i < a1.length; i++) {
+        if (a1[i] !== a2[i]) {
+            return false;
+        }
+    }
+    return true;
+};
+/**
+ * @hidden
+ */
+const wheelDelta = (e, axis) => {
+    const delta = e[`wheelDelta${axis}`];
+    if (e.wheelDelta && (delta === undefined || delta)) {
+        return e.wheelDelta;
+    }
+    if (e.detail && e.axis === e[axis === 'X' ? 'HORIZONTAL_AXIS' : 'VERTICAL_AXIS']) {
+        return (-e.detail) * 10;
+    }
+    return 0;
+};
+/**
+ * @hidden
+ */
+const syncScroll = (source, targets) => {
+    const sourceScrollTop = source.scrollTop;
+    const sourceScrollLeft = source.scrollLeft;
+    const targetScrollTop = targets[0].scrollTop;
+    const targetScrollLeft = targets[1].scrollLeft;
+    const syncVertically = sourceScrollTop !== targetScrollTop;
+    const syncHorizontally = sourceScrollLeft !== targetScrollLeft;
+    if (syncVertically) {
+        targets[0].scrollTop = sourceScrollTop;
+    }
+    else if (syncHorizontally) {
+        targets[1].scrollLeft = sourceScrollLeft;
+    }
+};
+/**
+ * @hidden
+ */
+const syncWheel = (event, tables, prop, axis) => {
+    const delta = axis === 'Y' ? -(wheelDelta(event, axis)) : wheelDelta(event, axis);
+    if (delta) {
+        tables[0][prop] =
+            tables[1][prop] += delta;
+    }
+};
+/**
+ * @hidden
+ */
+const getDocument = element => element.ownerDocument.documentElement;
+/**
+ * @hidden
+ */
+const getWindow = element => element.ownerDocument.defaultView;
+/**
+ * @hidden
+ */
+const offset = element => {
+    const { clientTop, clientLeft } = getDocument(element);
+    const { pageYOffset, pageXOffset } = getWindow(element);
+    const { top, left } = element.getBoundingClientRect();
+    return {
+        top: top + pageYOffset - clientTop,
+        left: left + pageXOffset - clientLeft
+    };
+};
+/**
+ * @hidden
+ */
+const matchAriaAttributes = (wrapper) => {
+    const rowHeaderRows = wrapper.querySelectorAll('.k-pivotgrid-row-headers .k-pivotgrid-row');
+    const colHeaderCells = wrapper.querySelectorAll('.k-pivotgrid-column-headers th');
+    const valueTableCells = wrapper.querySelectorAll('.k-pivotgrid-values td');
+    rowHeaderRows.forEach((row, index) => {
+        const valueCellsIds = filterAndMap(Array.from(valueTableCells), c => c.getAttribute('id').split('-')[4] === (index + 1).toString(), c => c.getAttribute('id'));
+        row.setAttribute('aria-owns', valueCellsIds.join(' '));
+    });
+    valueTableCells.forEach(cell => {
+        const cellColIndex = +cell.getAttribute('id').split('-')[5];
+        const colHeaderCellsIds = filterAndMap(Array.from(colHeaderCells), c => {
+            const headerCellColIndex = +c.getAttribute('id').split('-')[5];
+            const headerCellColspan = +c.getAttribute('colspan');
+            const colIndexIsEqual = cellColIndex === headerCellColIndex;
+            const cellColIndexIsWithinHeaderCellRange = headerCellColspan > 1 && (headerCellColIndex + headerCellColspan - 1 >= cellColIndex);
+            return colIndexIsEqual || cellColIndexIsWithinHeaderCellRange;
+        }, c => c.getAttribute('id'));
+        cell.setAttribute('aria-describedby', colHeaderCellsIds.join(' '));
+    });
+};
+/**
+ * @hidden
+ */
+const position = (target, before) => {
+    const targetRect = offset(target);
+    const { offsetWidth, offsetHeight } = target;
+    const left = targetRect.left + (before ? 0 : offsetWidth);
+    const top = targetRect.top + offsetHeight / 2;
+    return { left, top };
+};
+/**
+ * @hidden
+ */
+const filterAndMap = (arr, predicate, mapper) => arr.reduce((acc, curr) => predicate(curr) ? [...acc, mapper(curr)] : acc, []);
+/**
+ * @hidden
+ */
+const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);
+/**
+ * @hidden
+ */
+const cloneDate = (date) => date ? new Date(date.getTime()) : null;
+/**
+ * @hidden
+ */
+function clone(obj) {
+    const result = {};
+    cloneObject(obj, result);
+    return result;
+}
+/**
+ * @hidden
+ */
+function cloneObject(obj, result) {
+    for (const field in obj) {
+        if (obj.hasOwnProperty(field)) {
+            const value = obj[field];
+            result[field] = cloneValue(value, result[field]);
+        }
+    }
+}
+/**
+ * @hidden
+ */
+function cloneValue(value, nextValue) {
+    if (Array.isArray(value)) {
+        return cloneArray(value);
+    }
+    else if (value instanceof Date) {
+        return cloneDate(value);
+    }
+    else if (value && typeof value === 'object') {
+        const newNextValue = nextValue || {};
+        cloneObject(value, newNextValue);
+        return newNextValue;
+    }
+    return value;
+}
+/**
+ * @hidden
+ */
+function cloneArray(array) {
+    return array.map(value => cloneValue(value, undefined));
+}
+/**
+ * @hidden
+ */
+const swapItems = (arr, i1, i2) => {
+    const temp = arr[i1];
+    arr[i1] = arr[i2];
+    arr[i2] = temp;
+};
+
+/**
+ * @hidden
+ */
+let nextPivotGridId = 0;
+/**
+ * @hidden
+ */
+class PivotGridDataService {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.expandedStateChange = new EventEmitter();
+        this.configuratorFieldChange = new EventEmitter();
+        this.expandedFieldChange = new EventEmitter();
+        this.columnHeaderRows = new BehaviorSubject([]);
+        this.columnHeaderCols = new BehaviorSubject([]);
+        this.rowHeaderCols = new BehaviorSubject([]);
+        this.rowHeaderRows = new BehaviorSubject([]);
+        this.valuesRows = new BehaviorSubject([]);
+        this.loading = new BehaviorSubject(false);
+        this.fields = new BehaviorSubject([]);
+        this.configuredFields = new BehaviorSubject([]);
+        this.pivotGridId = nextPivotGridId++;
+    }
+    updateRowsAndCols() {
+        const rowsTree = toTree((this.rows || []).slice());
+        const [rowHeaderRows, rowHeaderLeaves, rowHeaderDepth, rowHeaderBreadth] = toRows(rowsTree);
+        const columnsTree = toTree((this.columns || []).slice());
+        const [columnHeaderRows, columnHeaderLeaves, columnHeaderBreadth] = toColumns(columnsTree);
+        this.columnHeaderLeaves = columnHeaderLeaves;
+        this.columnHeaderCols.next(columnHeaderLeaves);
+        this.columnHeaderRows.next(columnHeaderRows);
+        this.rowHeaderLeaves = rowHeaderLeaves;
+        this.rowHeaderCols.next(new Array(rowHeaderBreadth).fill({}));
+        this.rowHeaderRows.next(rowHeaderRows);
+        this.valuesRows.next(toData((this.normalizedData || []).slice(), columnHeaderLeaves, rowHeaderLeaves, columnHeaderBreadth, rowHeaderDepth));
+        if (isDocumentAvailable()) {
+            this.ngZone.runOutsideAngular(() => {
+                // needed because all tables need to be rendered in accordance with the new settings
+                // before applying the required DOM attributes
+                setTimeout(() => matchAriaAttributes(this.wrapper));
+            });
+        }
+    }
+}
+PivotGridDataService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridDataService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+PivotGridDataService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridDataService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridDataService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { expandedStateChange: [{
+                type: Output
+            }], configuratorFieldChange: [{
+                type: Output
+            }], expandedFieldChange: [{
+                type: Output
+            }] } });
+
+/**
+ * @hidden
+ *
+ * Needed to keep the Pivot's LocalizationService reference and be able to use it inside the ChipList component.
+ */
+class PivotLocalizationService {
+    constructor(localization) {
+        this.localization = localization;
+    }
+    get(token) {
+        return this.localization.get(token);
+    }
+    get rtl() {
+        return this.localization.rtl;
+    }
+}
+PivotLocalizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotLocalizationService, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+PivotLocalizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotLocalizationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotLocalizationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
+/**
+ * @hidden
+ */
+class PivotGridCellDirective {
+    constructor(hostEl, renderer, dataService) {
+        this.hostEl = hostEl;
+        this.renderer = renderer;
+        this.dataService = dataService;
+        this.cellClass = true;
+        this.handleClick = () => {
+            this.dataService.expandedStateChange.emit({
+                action: this.expanded ? 'collapse' : 'expand',
+                cell: this.kendoPivotGridCell,
+                tableType: this.tableType
+            });
+        };
+    }
+    get expanded() {
+        return this.kendoPivotGridCell?.hasChildren && this.kendoPivotGridCell.children.length;
+    }
+    ngOnInit() {
+        const nativeElement = this.hostEl.nativeElement;
+        this.renderer.setAttribute(nativeElement, 'rowspan', this.kendoPivotGridCell.rowSpan || 1);
+        this.renderer.setAttribute(nativeElement, 'colspan', this.kendoPivotGridCell.colSpan || 1);
+        const classesToAdd = {
+            'k-pivotgrid-header-total': this.kendoPivotGridCell?.total || (this.tableType === 'values'
+                && (this.dataService.rowHeaderLeaves[this.rowIndex].total ||
+                    this.dataService.columnHeaderLeaves[this.colIndex].total)),
+            'k-pivotgrid-header-root': this.kendoPivotGridCell?.levelNum === 0,
+            'k-pivotgrid-expanded': this.kendoPivotGridCell?.hasChildren && this.kendoPivotGridCell.children.length,
+            'k-first': this.colIndex > 0
+        };
+        for (const prop in classesToAdd) {
+            if (classesToAdd[prop]) {
+                this.renderer.addClass(nativeElement, prop);
+            }
+        }
+    }
+}
+PivotGridCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridCellDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: PivotGridDataService }], target: i0.ɵɵFactoryTarget.Component });
+PivotGridCellDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: { kendoPivotGridCell: "kendoPivotGridCell", tableType: "tableType", rowIndex: "rowIndex", colIndex: "colIndex" }, host: { properties: { "class.k-pivotgrid-cell": "this.cellClass" } }, ngImport: i0, template: `
+        <span 
+            *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
+            class="k-icon"
+            aria-hidden="true"
+            [kendoEventsOutsideAngular]="{
+                click: handleClick
+            }"
+            [ngClass]="{
+                'k-i-arrow-chevron-up': expanded,
+                'k-i-arrow-chevron-down': !expanded
+            }"></span>{{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}`, isInline: true, directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridCellDirective, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoPivotGridCell]',
+                    template: `
+        <span 
+            *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
+            class="k-icon"
+            aria-hidden="true"
+            [kendoEventsOutsideAngular]="{
+                click: handleClick
+            }"
+            [ngClass]="{
+                'k-i-arrow-chevron-up': expanded,
+                'k-i-arrow-chevron-down': !expanded
+            }"></span>{{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}`
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: PivotGridDataService }]; }, propDecorators: { cellClass: [{
+                type: HostBinding,
+                args: ['class.k-pivotgrid-cell']
+            }], kendoPivotGridCell: [{
+                type: Input
+            }], tableType: [{
+                type: Input
+            }], rowIndex: [{
+                type: Input
+            }], colIndex: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class PivotGridTableComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.dataChangeSubs = new Subscription();
+    }
+    get pivotGridId() {
+        return `kendo-pivotgrid-${this.dataService.pivotGridId}-`;
+    }
+    ngOnInit() {
+        this.dataChangeSubs.add(this.dataService[`${this.tableType}Rows`].subscribe(rows => this.rows = rows));
+        this.dataChangeSubs.add(this.tableType === 'values' ?
+            this.dataService.columnHeaderCols.subscribe(cols => this.headerItems = cols) :
+            this.dataService[`${this.tableType}Cols`].subscribe(cols => this.headerItems = cols));
+    }
+    ngOnDestroy() {
+        this.dataChangeSubs.unsubscribe();
+    }
+}
+PivotGridTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridTableComponent, deps: [{ token: PivotGridDataService }], target: i0.ɵɵFactoryTarget.Component });
+PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: { tableType: "tableType", colWidth: "colWidth" }, ngImport: i0, template: `
+        <table
+            class="k-pivotgrid-table"
+            role="presentation">
+            <colgroup>
+                <col 
+                    *ngFor="let item of headerItems;"
+                    [style.width]="tableType !== 'rowHeader' ? colWidth >= 0 ? colWidth + 'px' : '200px' : undefined" />
+            </colgroup>
+            <tbody class="k-pivotgrid-tbody" [attr.role]="tableType === 'values' ? 'none' : 'rowgroup'">
+                <tr *ngFor="let row of rows; index as rowIndex"
+                    class="k-pivotgrid-row"
+                    [attr.role]="tableType === 'values' ? 'none' : 'row'">
+                    <ng-container *ngFor="let cell of row.cells; index as colIndex">
+                        <th
+                            *ngIf="cell && tableType !== 'values'" 
+                            [kendoPivotGridCell]="cell"
+                            [tableType]="tableType"
+                            [colIndex]="colIndex"
+                            [rowIndex]="rowIndex"
+                            [attr.aria-expanded]="cell.hasChildren && cell.children.length ? 'true' : 'false'"
+                            [attr.role]="tableType === 'columnHeader' ? 'columnheader' : tableType === 'rowHeader' ? 'rowheader' : 'none'"
+                            [attr.id]="pivotGridId + (tableType === 'columnHeader' ? 'ch-' : 'rh-') + (rowIndex + 1) + '-' + (colIndex + 1)"></th>
+                        <td
+                            *ngIf="cell && tableType === 'values'"
+                            [kendoPivotGridCell]="cell"
+                            tableType="values"
+                            [colIndex]="colIndex"
+                            [rowIndex]="rowIndex"
+                            role="gridcell"
+                            [attr.id]="pivotGridId + 'cell-' + (rowIndex + 1) + '-' + (colIndex + 1)"></td>
+                    </ng-container>
+                </tr>
+            </tbody>
+        </table>
+    `, isInline: true, components: [{ type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: ["kendoPivotGridCell", "tableType", "rowIndex", "colIndex"] }], directives: [{ type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridTableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-pivotgrid-table',
+                    template: `
+        <table
+            class="k-pivotgrid-table"
+            role="presentation">
+            <colgroup>
+                <col 
+                    *ngFor="let item of headerItems;"
+                    [style.width]="tableType !== 'rowHeader' ? colWidth >= 0 ? colWidth + 'px' : '200px' : undefined" />
+            </colgroup>
+            <tbody class="k-pivotgrid-tbody" [attr.role]="tableType === 'values' ? 'none' : 'rowgroup'">
+                <tr *ngFor="let row of rows; index as rowIndex"
+                    class="k-pivotgrid-row"
+                    [attr.role]="tableType === 'values' ? 'none' : 'row'">
+                    <ng-container *ngFor="let cell of row.cells; index as colIndex">
+                        <th
+                            *ngIf="cell && tableType !== 'values'" 
+                            [kendoPivotGridCell]="cell"
+                            [tableType]="tableType"
+                            [colIndex]="colIndex"
+                            [rowIndex]="rowIndex"
+                            [attr.aria-expanded]="cell.hasChildren && cell.children.length ? 'true' : 'false'"
+                            [attr.role]="tableType === 'columnHeader' ? 'columnheader' : tableType === 'rowHeader' ? 'rowheader' : 'none'"
+                            [attr.id]="pivotGridId + (tableType === 'columnHeader' ? 'ch-' : 'rh-') + (rowIndex + 1) + '-' + (colIndex + 1)"></th>
+                        <td
+                            *ngIf="cell && tableType === 'values'"
+                            [kendoPivotGridCell]="cell"
+                            tableType="values"
+                            [colIndex]="colIndex"
+                            [rowIndex]="rowIndex"
+                            role="gridcell"
+                            [attr.id]="pivotGridId + 'cell-' + (rowIndex + 1) + '-' + (colIndex + 1)"></td>
+                    </ng-container>
+                </tr>
+            </tbody>
+        </table>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: PivotGridDataService }]; }, propDecorators: { tableType: [{
+                type: Input
+            }], colWidth: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class PivotGridState {
+    constructor(columnAxes, rowAxes, measureAxes, sort, filter) {
+        this.columnAxes = columnAxes;
+        this.rowAxes = rowAxes;
+        this.measureAxes = measureAxes;
+        this.sort = sort;
+        this.filter = filter;
+    }
+}
+
+/**
+ * @hidden
+ */
+class ConfiguratorService {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.configuratorStateChange = new EventEmitter();
+    }
+    parseConfiguratorState(action) {
+        const newState = configuratorReducer({
+            filter: this.dataService.state.filter,
+            sort: this.dataService.state.sort,
+            rowAxes: this.dataService.state.rowAxes,
+            columnAxes: this.dataService.state.columnAxes,
+            measureAxes: this.dataService.state.measureAxes,
+            dragItem: this.state.dragItem,
+            dropDirection: this.state.dropDirection,
+            dropTarget: this.state.dropTarget,
+            dropZone: this.state.dropZone
+        }, action);
+        Object.keys(newState).forEach(key => newState[key] === undefined && delete newState[key]);
+        this.state = { ...this.state, ...newState };
+        this.dataService.state = new PivotGridState(this.state.columnAxes, this.state.rowAxes, this.state.measureAxes, this.state.sort, this.state.filter);
+        this.configuratorStateChange.emit(this.state);
+    }
+}
+ConfiguratorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ConfiguratorService, deps: [{ token: PivotGridDataService }], target: i0.ɵɵFactoryTarget.Injectable });
+ConfiguratorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ConfiguratorService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ConfiguratorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: PivotGridDataService }]; }, propDecorators: { configuratorStateChange: [{
+                type: Output
+            }] } });
+
+/**
+ * @hidden
+ */
+const append = (element, container) => {
+    let appended = false;
+    return () => {
+        if (!appended) {
+            container.appendChild(element);
+            appended = true;
+        }
+        return element;
+    };
+};
+/**
+ * @hidden
+ */
+class DropCueService {
+    create() {
+        this.dom = document.createElement('span');
+        const wrapper = document.createElement('div');
+        wrapper.classList.add('k-drop-hint', 'k-drop-hint-v');
+        const hintStart = document.createElement('div');
+        hintStart.classList.add('k-drop-hint-start');
+        const hintLine = document.createElement('div');
+        hintLine.classList.add('k-drop-hint-line');
+        const hintEnd = document.createElement('div');
+        hintEnd.classList.add('k-drop-hint-end');
+        wrapper.append(hintStart, hintLine, hintEnd);
+        this.dom.append(wrapper);
+        this.hide();
+    }
+    attach(container) {
+        return append(this.dom, container)();
+    }
+    remove(container) {
+        if (this.dom && this.dom.parentElement && container.contains(this.dom)) {
+            container.removeChild(this.dom);
+            this.dom = null;
+        }
+    }
+    hide() {
+        this.dom.style.display = 'none';
+    }
+    show(direction, container, target) {
+        if (!this.dom) {
+            this.create();
+        }
+        if (direction === 'before') {
+            container.insertBefore(this.dom, target);
+        }
+        else {
+            if (target.classList.contains('k-chip') && target.matches(':last-child')) {
+                container.insertBefore(this.dom, target);
+                return;
+            }
+            // eslint-disable-next-line no-unused-expressions
+            target.classList.contains('k-chip') ? target.after(this.dom) : container.appendChild(this.dom);
+        }
+        this.dom.style.display = '';
+    }
+}
+DropCueService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropCueService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DropCueService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropCueService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropCueService, decorators: [{
+            type: Injectable
+        }] });
+
+const contains = (node, predicate) => {
+    while (node) {
+        if (predicate(node)) {
+            return true;
+        }
+        node = node.parentNode;
+    }
+    return false;
+};
+/**
+ * @hidden
+ * Arguments for the `close` event of the chip-menu popup.
+ */
+class PopupCloseEvent extends PreventableEvent {
+    constructor(e) {
+        super();
+        this.originalEvent = e;
+    }
+}
+const DEFAULT_POPUP_CLASS = 'k-grid-filter-popup';
+/**
+ * @hidden
+ * The service that is used for the popups of the chip menus.
+ */
+class SinglePopupService {
+    constructor(popupService, renderer, ngZone, localization) {
+        this.popupService = popupService;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.localization = localization;
+        /**
+         * Fires when the chip menus are about to close because the user clicked outside their popups.
+         * Used to prevent the popup from closing.
+         */
+        this.onClose = new Subject();
+        this.pointerEventsSub = new Subscription();
+        this.scrollSubscription = new Subscription();
+    }
+    open(anchor, template, popupRef, popupClass = DEFAULT_POPUP_CLASS) {
+        const toggle = isPresent(popupRef) && this.popupRef === popupRef;
+        this.destroy();
+        if (!toggle) {
+            const direction = this.localization.rtl ? 'right' : 'left';
+            this.popupRef = this.popupService.open({
+                anchorAlign: { vertical: 'bottom', horizontal: direction },
+                popupAlign: { vertical: 'top', horizontal: direction },
+                anchor: anchor,
+                popupClass: popupClass,
+                content: template,
+                positionMode: "absolute"
+            });
+            this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.localization.rtl ? 'rtl' : 'ltr');
+            this.attachClose(anchor);
+        }
+        const popupEl = this.popupRef?.popupElement;
+        if (popupEl) {
+            this.attachMouseListeners(popupEl);
+        }
+        return this.popupRef;
+    }
+    destroy() {
+        if (this.popupRef) {
+            this.detachClose();
+            this.pointerEventsSub.unsubscribe();
+            this.pointerEventsSub = null;
+            this.popupRef.close();
+            this.popupRef = null;
+        }
+    }
+    ngOnDestroy() {
+        this.destroy();
+        this.scrollSubscription.unsubscribe();
+    }
+    detachClose() {
+        if (this.removeClick) {
+            this.removeClick();
+        }
+    }
+    attachClose(skipElement) {
+        this.detachClose();
+        this.ngZone.runOutsideAngular(() => this.removeClick = this.renderer.listen('document', 'click', (e) => {
+            if (!contains(e.target, x => this.popupRef.popupElement === x || x === skipElement)) {
+                const args = new PopupCloseEvent(e);
+                this.onClose.next(args);
+                if (!args.isDefaultPrevented() && this.canClosePopup) {
+                    this.destroy();
+                }
+                this.canClosePopup = true;
+            }
+        }));
+    }
+    attachMouseListeners(el) {
+        this.pointerEventsSub = new Subscription();
+        this.ngZone.runOutsideAngular(() => {
+            this.pointerEventsSub.add(this.renderer.listen(el, 'pointerdown', (e) => {
+                e.stopImmediatePropagation();
+                this.canClosePopup = false;
+            }));
+            this.pointerEventsSub.add(this.renderer.listen(el, 'pointerup', () => {
+                this.canClosePopup = true;
+            }));
+        });
+    }
+}
+SinglePopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SinglePopupService, deps: [{ token: i1$1.PopupService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: PivotLocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+SinglePopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SinglePopupService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SinglePopupService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$1.PopupService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: PivotLocalizationService }]; } });
+
+/**
+ * @hidden
+ */
+class MenuTabbingService {
+    constructor() {
+        this.isColumnMenu = false;
+        this.isPopupOpen = false;
+    }
+}
+MenuTabbingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuTabbingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MenuTabbingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuTabbingService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuTabbingService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @hidden
+ * Represents the service that is passed to the ChipMenuFilterComponent and ChipMenuSortComponent.
+ */
+class ChipMenuService {
+    constructor(menuTabbingService) {
+        this.closeMenu = new EventEmitter();
+        this.menuTabbingService = menuTabbingService;
+    }
+    /**
+     * Closes the chip menu.
+     */
+    close() {
+        this.closeMenu.emit();
+    }
+}
+ChipMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuService, deps: [{ token: MenuTabbingService }], target: i0.ɵɵFactoryTarget.Injectable });
+ChipMenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: MenuTabbingService }]; } });
+
+/**
+ * @hidden
+ */
+class ChipMenuItemDirective {
+    constructor(hostElement, renderer, ngZone) {
+        this.hostElement = hostElement;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this._isFirst = false;
+        this._isLast = false;
+        this.subs = new Subscription();
+        this.onTab = (e) => {
+            if (e.keyCode !== Keys.Tab) {
+                return;
+            }
+            if (this.isFirst && e.shiftKey && e.target === this.chipMenuItems[0]) {
+                e.preventDefault();
+                this.menuItemComponent.service.menuTabbingService.lastFocusable.focus();
+            }
+            if (this.isLast && !e.shiftKey) {
+                const lastColumnMenuItem = this.getLastColumnMenuItem();
+                const isExpanded = this.menuItemComponent.expanded;
+                if (lastColumnMenuItem === e.target && !isExpanded) {
+                    e.preventDefault();
+                    this.menuItemComponent.service.menuTabbingService.firstFocusable.focus();
+                }
+            }
+        };
+    }
+    set isFirst(value) {
+        if (value) {
+            const focusableElement = this.chipMenuItems[0];
+            this.menuItemComponent.service.menuTabbingService.firstFocusable = focusableElement;
+            this.ngZone.runOutsideAngular(() => {
+                const firstItemKeydownSub = this.renderer.listen(focusableElement, 'keydown', this.onTab);
+                this.subs.add(firstItemKeydownSub);
+            });
+        }
+        this._isFirst = value;
+    }
+    get isFirst() {
+        return this._isFirst;
+    }
+    set isLast(value) {
+        if (!this.chipMenuItems) {
+            return;
+        }
+        if (value) {
+            const lastFocusableElement = this.getLastColumnMenuItem();
+            this.menuItemComponent.service.menuTabbingService.lastFocusable = lastFocusableElement;
+            this.ngZone.runOutsideAngular(() => {
+                const lastItemKeydownSub = this.renderer.listen(lastFocusableElement, 'keydown', this.onTab);
+                this.subs.add(lastItemKeydownSub);
+            });
+        }
+        this._isLast = value;
+    }
+    get isLast() {
+        return this._isLast;
+    }
+    ngAfterViewInit() {
+        this.chipMenuItems = this.hostElement.nativeElement.querySelectorAll('.k-columnmenu-item');
+        this.chipMenuItems.forEach(el => this.renderer.setAttribute(el, 'tabindex', '0'));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    getLastColumnMenuItem() {
+        return (this.chipMenuItems.length === 1 ? this.chipMenuItems[0] : this.chipMenuItems[1]);
+    }
+}
+ChipMenuItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuItemDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+ChipMenuItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ChipMenuItemDirective, selector: "[kendoPivotChipMenuItem]", inputs: { menuItemComponent: ["kendoPivotChipMenuItem", "menuItemComponent"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuItemDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[kendoPivotChipMenuItem]' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { menuItemComponent: [{
+                type: Input,
+                args: ['kendoPivotChipMenuItem']
+            }] } });
+
+/**
+ * @hidden
+ */
+class ChipMenuContainerComponent {
+    constructor(service, ngZone) {
+        this.service = service;
+        this.ngZone = ngZone;
+        this.hostClass = true;
+    }
+    ngAfterViewInit() {
+        if (!this.chipMenuItems.length) {
+            return;
+        }
+        this.chipMenuItems.first.isFirst = true;
+        this.chipMenuItems.last.isLast = true;
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.service.menuTabbingService.firstFocusable.focus());
+    }
+}
+ChipMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuContainerComponent, deps: [{ token: ChipMenuService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ChipMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ChipMenuContainerComponent, selector: "kendo-pivot-chipmenu-container", host: { properties: { "class.k-grid-columnmenu-popup": "this.hostClass" } }, queries: [{ propertyName: "chipMenuItems", predicate: ChipMenuItemDirective, descendants: true }], ngImport: i0, template: `
+        <ng-content></ng-content>
+    `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-pivot-chipmenu-container',
+                    template: `
+        <ng-content></ng-content>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: ChipMenuService }, { type: i0.NgZone }]; }, propDecorators: { chipMenuItems: [{
+                type: ContentChildren,
+                args: [ChipMenuItemDirective, { descendants: true }]
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-grid-columnmenu-popup']
+            }] } });
+
+/**
+ * @hidden
+ */
+class ChipMenuItemBase {
+    constructor() {
+        this.hostClass = true;
+    }
+    ngOnInit() {
+        if (isDevMode() && !this.service) {
+            throw new Error('The service input of the host chip menu components (e.g. ChipMenuSortComponent) is mandatory.');
+        }
+    }
+    close() {
+        this.service.close();
+    }
+}
+ChipMenuItemBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuItemBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ChipMenuItemBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ChipMenuItemBase, selector: "kendo-pivot-chip-menu-item-base", inputs: { service: "service" }, host: { properties: { "class.k-columnmenu-item-wrapper": "this.hostClass" } }, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuItemBase, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-pivot-chip-menu-item-base',
+                    template: ``
+                }]
+        }], propDecorators: { service: [{
+                type: Input
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-columnmenu-item-wrapper']
+            }] } });
+
+/**
+ * @hidden
+ *
+ * Represents the content template of the ChipMenuItemComponent.
+ * Provides an option for specifying the content of a chip menu item..
+ */
+class ChipMenuItemContentTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ChipMenuItemContentTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuItemContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ChipMenuItemContentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ChipMenuItemContentTemplateDirective, selector: "[kendoPivotChipMenuItemContentTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuItemContentTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoPivotChipMenuItemContentTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * @hidden
+ *
+ */
+class ChipMenuItemComponent {
+    constructor() {
+        /**
+         * Fires when the item is clicked.
+         */
+        this.itemClick = new EventEmitter();
+        /**
+         * Fires when the content is expanded.
+         */
+        this.expand = new EventEmitter();
+        /**
+         * Fires when the content is collapsed.
+         */
+        this.collapse = new EventEmitter();
+        this.contentState = 'collapsed';
+    }
+    get iconClass() {
+        return `k-i-${this.icon}`;
+    }
+    ngOnChanges(changes) {
+        if (changes.expanded) {
+            this.updateContentState();
+        }
+    }
+    onClick(e) {
+        this.itemClick.emit(e);
+        if (this.contentTemplate) {
+            this.expanded = !this.expanded;
+            this.updateContentState();
+            if (this.expanded) {
+                this.expand.emit();
+            }
+            else {
+                this.collapse.emit();
+            }
+        }
+    }
+    updateContentState() {
+        this.contentState = this.expanded ? 'expanded' : 'collapsed';
+    }
+}
+ChipMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ChipMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: { icon: "icon", text: "text", selected: "selected", expanded: "expanded" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ChipMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+        <div
+            class="k-columnmenu-item"
+            (click)="onClick($event)"
+            (keydown.enter)="onClick($event)"
+            [class.k-selected]="selected"
+            role="button"
+            [attr.aria-expanded]="expanded">
+           <span *ngIf="icon" class="k-icon" [ngClass]="iconClass">
+           </span>
+           {{ text }}
+        </div>
+        <div *ngIf="contentTemplate" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
+            <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
+            </ng-container>
+        <div>
+    `, isInline: true, directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+        trigger('state', [
+            state('collapsed', style({ display: 'none' })),
+            state('expanded', style({ display: 'block' })),
+            transition('collapsed => expanded', [
+                style({
+                    height: '0px',
+                    display: 'block'
+                }),
+                animate('100ms ease-in', style({
+                    height: '*'
+                }))
+            ]),
+            transition('expanded => collapsed', [
+                style({
+                    height: '*'
+                }),
+                animate('100ms ease-in', style({
+                    height: '0px'
+                }))
+            ])
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    animations: [
+                        trigger('state', [
+                            state('collapsed', style({ display: 'none' })),
+                            state('expanded', style({ display: 'block' })),
+                            transition('collapsed => expanded', [
+                                style({
+                                    height: '0px',
+                                    display: 'block'
+                                }),
+                                animate('100ms ease-in', style({
+                                    height: '*'
+                                }))
+                            ]),
+                            transition('expanded => collapsed', [
+                                style({
+                                    height: '*'
+                                }),
+                                animate('100ms ease-in', style({
+                                    height: '0px'
+                                }))
+                            ])
+                        ])
+                    ],
+                    selector: 'kendo-pivot-chipmenu-item',
+                    template: `
+        <div
+            class="k-columnmenu-item"
+            (click)="onClick($event)"
+            (keydown.enter)="onClick($event)"
+            [class.k-selected]="selected"
+            role="button"
+            [attr.aria-expanded]="expanded">
+           <span *ngIf="icon" class="k-icon" [ngClass]="iconClass">
+           </span>
+           {{ text }}
+        </div>
+        <div *ngIf="contentTemplate" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
+            <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
+            </ng-container>
+        <div>
+    `
+                }]
+        }], propDecorators: { itemClick: [{
+                type: Output
+            }], expand: [{
+                type: Output
+            }], collapse: [{
+                type: Output
+            }], icon: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], contentTemplate: [{
+                type: ContentChild,
+                args: [ChipMenuItemContentTemplateDirective, { static: false }]
+            }] } });
+
+/**
+ * @hidden
+ *
+ * Represents a chip-menu item for sorting PivotGrid fields.
+ * Allows the user to sort the PivotGrid.
+ */
+class ChipMenuSortComponent extends ChipMenuItemBase {
+    constructor(localization, renderer, configuratorService) {
+        super();
+        this.localization = localization;
+        this.renderer = renderer;
+        this.configuratorService = configuratorService;
+    }
+    get sortedAsc() {
+        const descriptor = this.descriptor;
+        return descriptor && (!descriptor.dir || descriptor.dir === 'asc');
+    }
+    get sortedDesc() {
+        const descriptor = this.descriptor;
+        return descriptor && descriptor.dir === 'desc';
+    }
+    /**
+     * Returns the localized message for a given token
+     */
+    messageFor(localizationToken) {
+        return this.localization.get(localizationToken);
+    }
+    toggleSort(dir) {
+        const field = this.chip.name.toString();
+        const descriptor = this.descriptor;
+        const sort = this.configuratorService.state.sort.filter(s => s.field !== field);
+        if (!descriptor || descriptor.dir !== dir) {
+            sort.push({ field, dir });
+        }
+        this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setSort, payload: sort });
+        this.close();
+    }
+    get descriptor() {
+        return [].concat(this.configuratorService.state.sort || []).find(s => s.field === this.chip.name.toString());
+    }
+}
+ChipMenuSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuSortComponent, deps: [{ token: PivotLocalizationService }, { token: i0.Renderer2 }, { token: ConfiguratorService }], target: i0.ɵɵFactoryTarget.Component });
+ChipMenuSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ChipMenuSortComponent, selector: "kendo-pivot-chipmenu-sort", inputs: { chip: "chip" }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-pivot-chipmenu-item
+            [text]="messageFor('fieldMenuSortAscendingItemLabel')"
+            icon="sort-asc-small"
+            (itemClick)="toggleSort('asc')"
+            [selected]="sortedAsc">
+        </kendo-pivot-chipmenu-item>
+        <kendo-pivot-chipmenu-item
+            [text]="messageFor('fieldMenuSortDescendingItemLabel')"
+            icon="sort-desc-small"
+            (itemClick)="toggleSort('desc')"
+            [selected]="sortedDesc">
+        </kendo-pivot-chipmenu-item>
+    `, isInline: true, components: [{ type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "text", "selected", "expanded"], outputs: ["itemClick", "expand", "collapse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuSortComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-pivot-chipmenu-sort',
+                    template: `
+        <kendo-pivot-chipmenu-item
+            [text]="messageFor('fieldMenuSortAscendingItemLabel')"
+            icon="sort-asc-small"
+            (itemClick)="toggleSort('asc')"
+            [selected]="sortedAsc">
+        </kendo-pivot-chipmenu-item>
+        <kendo-pivot-chipmenu-item
+            [text]="messageFor('fieldMenuSortDescendingItemLabel')"
+            icon="sort-desc-small"
+            (itemClick)="toggleSort('desc')"
+            [selected]="sortedDesc">
+        </kendo-pivot-chipmenu-item>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: PivotLocalizationService }, { type: i0.Renderer2 }, { type: ConfiguratorService }]; }, propDecorators: { chip: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class FilterMenuDropDownListDirective {
+    constructor(host) {
+        this.host = host;
+        this.keydownHandler = (e) => {
+            if (e.keyCode === Keys.Escape && this.host.isOpen) {
+                e.stopPropagation();
+                this.host.toggle(false);
+            }
+        };
+    }
+    ngAfterViewInit() {
+        const wrapperElement = this.host.wrapper.nativeElement;
+        wrapperElement.setAttribute('aria-label', this.filterMenuDropDownLabel);
+        wrapperElement.addEventListener('keydown', this.keydownHandler, true);
+    }
+    ngOnDestroy() {
+        this.host.wrapper.nativeElement.removeEventListener('keydown', this.keydownHandler);
+    }
+}
+FilterMenuDropDownListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterMenuDropDownListDirective, deps: [{ token: i1$2.DropDownListComponent }], target: i0.ɵɵFactoryTarget.Directive });
+FilterMenuDropDownListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: { filterMenuDropDownLabel: "filterMenuDropDownLabel" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterMenuDropDownListDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[kendoFilterMenuDropDown]' }]
+        }], ctorParameters: function () { return [{ type: i1$2.DropDownListComponent }]; }, propDecorators: { filterMenuDropDownLabel: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+const localizeOperators = operators => localization => Object.keys(operators).map(key => ({
+    text: localization.get(key),
+    value: operators[key]
+}));
+const stringOperators = localizeOperators({
+    "filterEqOperator": "eq",
+    "filterNotEqOperator": "neq",
+    "filterContainsOperator": "contains",
+    "filterNotContainsOperator": "doesnotcontain",
+    "filterStartsWithOperator": "startswith",
+    "filterEndsWithOperator": "endswith",
+    "filterIsNullOperator": "isnull",
+    "filterIsNotNullOperator": "isnotnull",
+    "filterIsEmptyOperator": "isempty",
+    "filterIsNotEmptyOperator": "isnotempty"
+});
+/**
+ * @hidden
+ *
+ * Represents a string-filter menu component.
+ */
+class StringFilterMenuComponent {
+    constructor(localization, configuratorService, fb) {
+        this.localization = localization;
+        this.configuratorService = configuratorService;
+        this.fb = fb;
+        this.subscription = new Subscription();
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouched = () => { };
+    }
+    get currentFilter() {
+        const filterValue = this.configuratorService.state.filter?.filter(x => x.field === this.chip.name.toString());
+        return filterValue && filterValue[0];
+    }
+    registerOnChange(fn) {
+        this.filterFormGroup.valueChanges.subscribe(fn);
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(val) {
+        if (val) {
+            this.filterFormGroup.setValue(val, { emitEvent: false });
+        }
+    }
+    get filterMenuDropDownLabel() {
+        const localizationMsg = this.localization.get('filterOperatorsDropDownLabel') || '';
+        const chipName = this.chip.name.toString();
+        return replaceMessagePlaceholder(localizationMsg, 'fields', chipName);
+    }
+    ngOnInit() {
+        this.filterFormGroup = this.fb.group({
+            operator: [this.currentFilter ? this.currentFilter.operator : ''],
+            value: [this.currentFilter ? this.currentFilter.value : '']
+        });
+        this.operators = stringOperators(this.localization);
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+}
+StringFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringFilterMenuComponent, deps: [{ token: PivotLocalizationService }, { token: ConfiguratorService }, { token: i3$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+StringFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StringFilterMenuComponent, selector: "kendo-pivot-string-filter-menu", inputs: { chip: "chip", menuTabbingService: "menuTabbingService" }, providers: [{
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => StringFilterMenuComponent),
+            multi: true
+        }], ngImport: i0, template: `
+        <ng-container [formGroup]="filterFormGroup">
+            <kendo-dropdownlist
+                    kendoFilterMenuDropDown
+                    [filterMenuDropDownLabel]="filterMenuDropDownLabel"
+                    [data]="operators"
+                    formControlName="operator"
+                    [valuePrimitive]="true"
+                    textField="text"
+                    valueField="value">
+                </kendo-dropdownlist>
+                <input
+                    kendoTextBox
+                    formControlName="value"
+                />
+        </ng-container>
+    `, isInline: true, components: [{ type: i1$2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringFilterMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-pivot-string-filter-menu',
+                    providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => StringFilterMenuComponent),
+                            multi: true
+                        }],
+                    template: `
+        <ng-container [formGroup]="filterFormGroup">
+            <kendo-dropdownlist
+                    kendoFilterMenuDropDown
+                    [filterMenuDropDownLabel]="filterMenuDropDownLabel"
+                    [data]="operators"
+                    formControlName="operator"
+                    [valuePrimitive]="true"
+                    textField="text"
+                    valueField="value">
+                </kendo-dropdownlist>
+                <input
+                    kendoTextBox
+                    formControlName="value"
+                />
+        </ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: PivotLocalizationService }, { type: ConfiguratorService }, { type: i3$1.FormBuilder }]; }, propDecorators: { chip: [{
+                type: Input
+            }], menuTabbingService: [{
+                type: Input
+            }] } });
+
+const isNoValueOperator = operator => (operator === "isnull"
+    || operator === "isnotnull"
+    || operator === "isempty"
+    || operator === "isnotempty");
+const validFilter = ({ value, operator }) => !isNullOrEmptyString(value) || isNoValueOperator(operator);
+/**
+ * @hidden
+ */
+class FilterMenuContainerComponent {
+    constructor(localization, cd, menuTabbingService, configuratorService) {
+        this.localization = localization;
+        this.cd = cd;
+        this.configuratorService = configuratorService;
+        this.close = new EventEmitter();
+        this.actionsClass = 'k-action-buttons k-button-group';
+        this.menuTabbingService = menuTabbingService;
+    }
+    ngAfterViewChecked() {
+        if (!this.menuTabbingService.isColumnMenu || (this.isLast && this.isExpanded)) {
+            this.menuTabbingService.lastFocusable = this.disabled ?
+                this.resetButton.nativeElement : this.filterButton.nativeElement;
+        }
+    }
+    ngOnDestroy() {
+        this.menuTabbingService.lastFocusable = null;
+    }
+    get disabled() {
+        return !(this.filterDescriptorValue && validFilter(this.filterDescriptorValue));
+    }
+    submit() {
+        const filterDescriptor = {
+            field: this.chip.name.toString(),
+            ...this.filterDescriptorValue
+        };
+        const payload = !this.configuratorService.state.filter ?
+            [filterDescriptor] :
+            [
+                ...this.configuratorService.state.filter.filter(descriptor => descriptor.field !== filterDescriptor.field),
+                filterDescriptor
+            ];
+        this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setFilter, payload: payload });
+        this.close.emit();
+        return false;
+    }
+    reset() {
+        const filters = this.configuratorService.state.filter.filter(descriptor => descriptor.field !== this.chip.name.toString());
+        this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setFilter, payload: filters });
+        this.close.emit();
+    }
+    onTab(e, buttonType) {
+        if (this.menuTabbingService.firstFocusable && (!this.menuTabbingService.isColumnMenu || this.isLast)) {
+            e.preventDefault();
+            if (buttonType === 'reset') {
+                // eslint-disable-next-line no-unused-expressions
+                this.disabled ? this.menuTabbingService.firstFocusable.focus() : this.filterButton.nativeElement.focus();
+            }
+            else {
+                this.menuTabbingService.firstFocusable.focus();
+            }
+        }
+    }
+    /**
+     * Returns the localized message for a given token
+     */
+    messageFor(localizationToken) {
+        return this.localization.get(localizationToken);
+    }
+}
+FilterMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterMenuContainerComponent, deps: [{ token: PivotLocalizationService }, { token: i0.ChangeDetectorRef }, { token: MenuTabbingService }, { token: ConfiguratorService }], target: i0.ɵɵFactoryTarget.Component });
+FilterMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FilterMenuContainerComponent, selector: "kendo-pivot-filter-menu-container", inputs: { chip: "chip", isLast: "isLast", isExpanded: "isExpanded", menuTabbingService: "menuTabbingService", actionsClass: "actionsClass" }, outputs: { close: "close" }, providers: [
+        MenuTabbingService
+    ], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "filterButton", first: true, predicate: ["filterButton"], descendants: true }], ngImport: i0, template: `
+        <form (submit)="submit()" (reset)="reset()"
+            class="k-filter-menu k-group k-reset k-state-border-up">
+            <div class="k-filter-menu-container">
+                <kendo-pivot-string-filter-menu
+                    [style]="'display: flex; flex-flow: column nowrap; align-items: stretch; gap: 8px;'"
+                    [(ngModel)]="filterDescriptorValue"
+                    name="'filterDescriptorValue'"
+                    [chip]="chip"
+                    [menuTabbingService]="menuTabbingService">
+                </kendo-pivot-string-filter-menu>
+                <div [ngClass]="actionsClass">
+                    <button
+                        #resetButton
+                        type="reset"
+                        kendoButton
+                        (keydown.tab)="onTab($event, 'reset')">{{messageFor('filterClearButton')}}</button>
+                    <button #filterButton
+                        type="submit"
+                        [disabled]="disabled"
+                        kendoButton
+                        themeColor="primary"
+                        (keydown.tab)="onTab($event, 'filter')">{{messageFor('filterFilterButton')}}</button>
+                </div>
+            </div>
+        </form>
+    `, isInline: true, components: [{ type: StringFilterMenuComponent, selector: "kendo-pivot-string-filter-menu", inputs: ["chip", "menuTabbingService"] }, { type: i5.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterMenuContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        MenuTabbingService
+                    ],
+                    selector: 'kendo-pivot-filter-menu-container',
+                    template: `
+        <form (submit)="submit()" (reset)="reset()"
+            class="k-filter-menu k-group k-reset k-state-border-up">
+            <div class="k-filter-menu-container">
+                <kendo-pivot-string-filter-menu
+                    [style]="'display: flex; flex-flow: column nowrap; align-items: stretch; gap: 8px;'"
+                    [(ngModel)]="filterDescriptorValue"
+                    name="'filterDescriptorValue'"
+                    [chip]="chip"
+                    [menuTabbingService]="menuTabbingService">
+                </kendo-pivot-string-filter-menu>
+                <div [ngClass]="actionsClass">
+                    <button
+                        #resetButton
+                        type="reset"
+                        kendoButton
+                        (keydown.tab)="onTab($event, 'reset')">{{messageFor('filterClearButton')}}</button>
+                    <button #filterButton
+                        type="submit"
+                        [disabled]="disabled"
+                        kendoButton
+                        themeColor="primary"
+                        (keydown.tab)="onTab($event, 'filter')">{{messageFor('filterFilterButton')}}</button>
+                </div>
+            </div>
+        </form>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: PivotLocalizationService }, { type: i0.ChangeDetectorRef }, { type: MenuTabbingService }, { type: ConfiguratorService }]; }, propDecorators: { close: [{
+                type: Output
+            }], chip: [{
+                type: Input
+            }], isLast: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], menuTabbingService: [{
+                type: Input
+            }], actionsClass: [{
+                type: Input
+            }], resetButton: [{
+                type: ViewChild,
+                args: ['resetButton']
+            }], filterButton: [{
+                type: ViewChild,
+                args: ['filterButton']
+            }] } });
+
+/**
+ * @hidden
+ * Represents the component for setting field filters in the PivotGrid.
+ */
+class ChipMenuFilterComponent extends ChipMenuItemBase {
+    constructor(localization, hostElement) {
+        super();
+        this.localization = localization;
+        this.hostElement = hostElement;
+        /**
+         * Fires when the content is expanded.
+         */
+        this.expand = new EventEmitter();
+        /**
+         * Fires when the content is collapsed.
+         */
+        this.collapse = new EventEmitter();
+        /**
+         * Specifies if the content is expanded.
+         */
+        this.expanded = false;
+        this.isLast = false;
+        this.actionsClass = 'k-columnmenu-actions';
+    }
+    onCollapse() {
+        this.expanded = false;
+        if (this.isLast) {
+            this.service.menuTabbingService.lastFocusable = this.hostElement.nativeElement.querySelector('.k-columnmenu-item');
+        }
+        this.collapse.emit();
+    }
+    onExpand() {
+        this.expanded = true;
+        this.expand.emit();
+    }
+    /**
+     * Returns the localized message for a given token
+     */
+    messageFor(localizationToken) {
+        return this.localization.get(localizationToken);
+    }
+}
+ChipMenuFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuFilterComponent, deps: [{ token: PivotLocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ChipMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ChipMenuFilterComponent, selector: "kendo-pivot-chipmenu-filter", inputs: { chip: "chip", expanded: "expanded", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-pivot-chipmenu-item
+            classs="k-widget k-expander"
+            [text]="messageFor('fieldMenuFilterItemLabel')"
+            icon="filter"
+            [expanded]="expanded"
+            (collapse)="onCollapse()"
+            (expand)="onExpand()">
+            <ng-template kendoPivotChipMenuItemContentTemplate>
+                <kendo-pivot-filter-menu-container
+                    [chip]="chip"
+                    [menuTabbingService]="service.menuTabbingService"
+                    [actionsClass]="actionsClass"
+                    [isLast]="isLast"
+                    [isExpanded]="expanded"
+                    (keydown.shift.tab)="$event.stopImmediatePropagation()"
+                    (close)="close()">
+                </kendo-pivot-filter-menu-container>
+            </ng-template>
+        </kendo-pivot-chipmenu-item>
+    `, isInline: true, components: [{ type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "text", "selected", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: FilterMenuContainerComponent, selector: "kendo-pivot-filter-menu-container", inputs: ["chip", "isLast", "isExpanded", "menuTabbingService", "actionsClass"], outputs: ["close"] }], directives: [{ type: ChipMenuItemContentTemplateDirective, selector: "[kendoPivotChipMenuItemContentTemplate]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-pivot-chipmenu-filter',
+                    template: `
+        <kendo-pivot-chipmenu-item
+            classs="k-widget k-expander"
+            [text]="messageFor('fieldMenuFilterItemLabel')"
+            icon="filter"
+            [expanded]="expanded"
+            (collapse)="onCollapse()"
+            (expand)="onExpand()">
+            <ng-template kendoPivotChipMenuItemContentTemplate>
+                <kendo-pivot-filter-menu-container
+                    [chip]="chip"
+                    [menuTabbingService]="service.menuTabbingService"
+                    [actionsClass]="actionsClass"
+                    [isLast]="isLast"
+                    [isExpanded]="expanded"
+                    (keydown.shift.tab)="$event.stopImmediatePropagation()"
+                    (close)="close()">
+                </kendo-pivot-filter-menu-container>
+            </ng-template>
+        </kendo-pivot-chipmenu-item>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: PivotLocalizationService }, { type: i0.ElementRef }]; }, propDecorators: { expand: [{
+                type: Output
+            }], collapse: [{
+                type: Output
+            }], chip: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], isLast: [{
+                type: Input
+            }] } });
+
+const POPUP_CLASS = 'k-column-menu';
+/**
+ * @hidden
+ *
+ * Represents the field chip menu component.
+ */
+class ChipMenuComponent {
+    constructor(popupService, localization, service) {
+        this.popupService = popupService;
+        this.localization = localization;
+        this.service = service;
+        this.tabIndex = '-1';
+        this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this));
+    }
+    ngOnDestroy() {
+        this.close();
+        this.closeSubscription.unsubscribe();
+    }
+    toggle(e, anchor, template) {
+        if (e) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+        }
+        this.popupRef = this.popupService.open(anchor, template, this.popupRef, POPUP_CLASS);
+        if (!this.popupRef) {
+            this.anchor.nativeElement.focus();
+        }
+    }
+    close() {
+        this.popupService.destroy();
+        this.popupRef = null;
+        this.anchor.nativeElement.closest('.k-chip').focus();
+    }
+    get chipMenuTitle() {
+        const localizationMsg = this.localization.get('chipMenuIconTitle') || '';
+        const chipName = this.chip.name.toString();
+        return replaceMessagePlaceholder(localizationMsg, 'fieldName', chipName);
+    }
+}
+ChipMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuComponent, deps: [{ token: SinglePopupService }, { token: PivotLocalizationService }, { token: ChipMenuService }], target: i0.ɵɵFactoryTarget.Component });
+ChipMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: { chip: "chip", tabIndex: "tabIndex" }, providers: [
+        ChipMenuService,
+        MenuTabbingService
+    ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, static: true }], ngImport: i0, template: `
+        <span #anchor
+            class="k-icon k-i-more-vertical"
+            (click)="toggle($event, anchor, template)"
+            [tabindex]="tabIndex"
+            [attr.title]="chipMenuTitle">
+        </span>
+        <ng-template #template>
+            <kendo-pivot-chipmenu-container
+                (keydown.escape)="close()"
+                (keydown.enter)="$event.stopImmediatePropagation()">
+                <kendo-pivot-chipmenu-sort
+                    #sortItem
+                    [chip]="chip"
+                    [kendoPivotChipMenuItem]="sortItem"
+                    [service]="service">
+                </kendo-pivot-chipmenu-sort>
+
+                <kendo-pivot-chipmenu-filter
+                    #filterItem
+                    [chip]="chip"
+                    [kendoPivotChipMenuItem]="filterItem"
+                    [service]="service">
+                </kendo-pivot-chipmenu-filter>
+            </kendo-pivot-chipmenu-container>
+        </ng-template>
+    `, isInline: true, components: [{ type: ChipMenuContainerComponent, selector: "kendo-pivot-chipmenu-container" }, { type: ChipMenuSortComponent, selector: "kendo-pivot-chipmenu-sort", inputs: ["chip"] }, { type: ChipMenuFilterComponent, selector: "kendo-pivot-chipmenu-filter", inputs: ["chip", "expanded", "isLast"], outputs: ["expand", "collapse"] }], directives: [{ type: ChipMenuItemDirective, selector: "[kendoPivotChipMenuItem]", inputs: ["kendoPivotChipMenuItem"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        ChipMenuService,
+                        MenuTabbingService
+                    ],
+                    selector: 'kendo-pivot-chip-menu',
+                    template: `
+        <span #anchor
+            class="k-icon k-i-more-vertical"
+            (click)="toggle($event, anchor, template)"
+            [tabindex]="tabIndex"
+            [attr.title]="chipMenuTitle">
+        </span>
+        <ng-template #template>
+            <kendo-pivot-chipmenu-container
+                (keydown.escape)="close()"
+                (keydown.enter)="$event.stopImmediatePropagation()">
+                <kendo-pivot-chipmenu-sort
+                    #sortItem
+                    [chip]="chip"
+                    [kendoPivotChipMenuItem]="sortItem"
+                    [service]="service">
+                </kendo-pivot-chipmenu-sort>
+
+                <kendo-pivot-chipmenu-filter
+                    #filterItem
+                    [chip]="chip"
+                    [kendoPivotChipMenuItem]="filterItem"
+                    [service]="service">
+                </kendo-pivot-chipmenu-filter>
+            </kendo-pivot-chipmenu-container>
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: SinglePopupService }, { type: PivotLocalizationService }, { type: ChipMenuService }]; }, propDecorators: { chip: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], anchor: [{
+                type: ViewChild,
+                args: ['anchor', { static: true }]
+            }] } });
+
+/**
+ * @hidden
+ */
+class DropTargetDirective {
+    constructor(element, configuratorService, cue, renderer, zone) {
+        this.element = element;
+        this.configuratorService = configuratorService;
+        this.cue = cue;
+        this.renderer = renderer;
+        this.zone = zone;
+        this.subs = new Subscription();
+    }
+    ngOnInit() {
+        const element = this.element.nativeElement;
+        this.elementType = this.getElementType(element);
+        this.elementSectionType = element.getAttribute('axes')?.split('Axes')[0];
+        this.subs.add(this.renderer.listen(element, 'mouseenter', this.handleMouseEnter.bind(this)));
+        this.subs.add(this.renderer.listen(element, 'mousemove', this.handleMouseMove.bind(this)));
+        this.subs.add(this.renderer.listen(element, 'mouseleave', this.handleMouseLeave.bind(this)));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    handleMouseEnter(event) {
+        this.zone.runOutsideAngular(() => {
+            if (this.configuratorService.state.dragItem) {
+                this.configuratorService.dropTargetElement = this.element.nativeElement;
+                if (this.configuratorService.draggedElement && !this.isDropAllowed(this.configuratorService.draggedElement.fromSection)) {
+                    return;
+                }
+                this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropTarget, payload: this.item });
+                this.targetElement = this.elementType === 'header' ? event.target.nextElementSibling : event.target;
+                // eslint-disable-next-line no-unused-expressions
+                this.cue.dom && this.cue.remove(this.getCueContainer());
+                this.cue.create();
+                this.cue.attach(this.getCueContainer());
+                this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropZone, payload: this.axes });
+            }
+        });
+    }
+    handleMouseMove(event) {
+        this.zone.runOutsideAngular(() => {
+            event.stopImmediatePropagation();
+            if (this.configuratorService.state.dragItem) {
+                if (this.configuratorService.draggedElement && !this.isDropAllowed(this.configuratorService.draggedElement.fromSection)) {
+                    this.renderer.setStyle(this.element.nativeElement, 'cursor', 'not-allowed');
+                    return;
+                }
+                this.renderer.setStyle(this.element.nativeElement, 'cursor', 'pointer');
+                const singleOrNoChip = this.targetElement?.querySelectorAll('.k-chip').length < 2;
+                const isInOwnContainer = this.elementSectionType === this.configuratorService.draggedElement.fromSection;
+                if (!this.targetElement) {
+                    return;
+                }
+                switch (this.elementType) {
+                    case 'chip': {
+                        const rect = this.element.nativeElement.getBoundingClientRect();
+                        const x = event.clientX - rect.left;
+                        const direction = x < rect.width / 2 ? 'before' : 'after';
+                        this.cue.show(direction, this.configuratorService.cueContainer, this.targetElement);
+                        if (direction !== this.configuratorService.state.dropDirection) {
+                            this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropDirection, payload: direction });
+                        }
+                        break;
+                    }
+                    case 'container':
+                    case 'header':
+                        if (singleOrNoChip && isInOwnContainer) {
+                            return;
+                        }
+                        if (isInOwnContainer) {
+                            const draggedElement = this.configuratorService.draggedElement.element;
+                            const nextChip = this.getNextChip(draggedElement);
+                            if (!nextChip) {
+                                this.cue.show('before', this.configuratorService.cueContainer, draggedElement);
+                                if (this.configuratorService.state.dropDirection !== 'before') {
+                                    this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropDirection, payload: 'before' });
+                                }
+                                return;
+                            }
+                            const isVertical = this.configuratorService.orientation === 'vertical';
+                            if (!isPresent(this.nextChipOffset)) {
+                                this.nextChipOffset = isVertical ? nextChip.getBoundingClientRect().left : nextChip.getBoundingClientRect().top;
+                            }
+                            const isBefore = isVertical ? event.clientX < this.nextChipOffset : event.clientY < this.nextChipOffset;
+                            if (isBefore) {
+                                this.cue.show('after', this.configuratorService.cueContainer, draggedElement);
+                                return;
+                            }
+                        }
+                        if (this.configuratorService.state.dropDirection !== 'after') {
+                            this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropDirection, payload: 'after' });
+                        }
+                        this.cue.show('after', this.configuratorService.cueContainer, this.targetElement);
+                        break;
+                    default:
+                }
+            }
+        });
+    }
+    handleMouseLeave(event) {
+        this.renderer.removeStyle(this.element.nativeElement, 'cursor');
+        if (!this.configuratorService.draggedElement) {
+            return;
+        }
+        this.zone.runOutsideAngular(() => {
+            event.stopImmediatePropagation();
+            this.configuratorService.dropTargetElement = null;
+            this.cue.remove(this.getCueContainer());
+            if (this.elementType === 'chip') {
+                return;
+            }
+            if (this.configuratorService.state.dragItem) {
+                this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropZone, payload: null });
+            }
+        });
+    }
+    isDropAllowed(fromSection) {
+        const element = this.element.nativeElement;
+        const fromRowsOrColsToMeasures = (fromSection === 'row' || fromSection === 'column') && element.closest('[axes=measureAxes]');
+        const fromMeasuresToRowsOrCols = fromSection === 'measure' && (element.closest('[axes=rowAxes]') || element.closest('[axes=columnAxes]'));
+        return !(fromRowsOrColsToMeasures || fromMeasuresToRowsOrCols);
+    }
+    getElementType(element) {
+        return {
+            'KENDO-CHIP': 'chip',
+            'KENDO-CHIPLIST': 'container',
+            'DIV': 'header'
+        }[element.tagName];
+    }
+    getCueContainer() {
+        const element = this.element.nativeElement;
+        const cueContainer = {
+            chip: element.parentElement,
+            container: element,
+            header: element.classList.contains('k-settings-description') ? element : element.nextElementSibling
+        }[this.elementType];
+        this.configuratorService.cueContainer = cueContainer;
+        return cueContainer;
+    }
+    getNextChip(draggedElement) {
+        let nextChip = draggedElement.nextElementSibling;
+        if (nextChip && nextChip.matches('.k-chip')) {
+            return nextChip;
+        }
+        while (nextChip) {
+            nextChip = nextChip.nextElementSibling;
+            if (nextChip === null || nextChip.matches('.k-chip')) {
+                return nextChip;
+            }
+        }
+    }
+}
+DropTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropTargetDirective, deps: [{ token: i0.ElementRef }, { token: ConfiguratorService }, { token: DropCueService }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+DropTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: { item: "item", axes: "axes" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropTargetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoDropTarget]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ConfiguratorService }, { type: DropCueService }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { item: [{
+                type: Input
+            }], axes: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class DraggableChipDirective {
+    constructor(draggable, element, zone, service, cue, renderer) {
+        this.draggable = draggable;
+        this.element = element;
+        this.zone = zone;
+        this.service = service;
+        this.cue = cue;
+        this.renderer = renderer;
+        this.touchActions = 'none';
+        this.initialX = {};
+        this.initialY = {};
+        this.subs = new Subscription();
+    }
+    get pointerEvents() {
+        return this.drag ? 'none' : undefined;
+    }
+    ngOnInit() {
+        this.subs.add(this.draggable.kendoPress
+            .subscribe((event) => {
+            this.zone.runOutsideAngular(() => {
+                if (isDocumentAvailable()) {
+                    this.initialX.current = event.clientX;
+                    this.initialY.current = event.clientY;
+                    const element = this.element.nativeElement;
+                    this.renderer.setStyle(element, 'z-index', 1);
+                    this.service.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDragItem, payload: this.item });
+                    this.service.draggedElement = {
+                        element,
+                        fromSection: element.closest('.k-chip-list').getAttribute('axes').split('Axes')[0]
+                    };
+                }
+            });
+        }));
+        this.subs.add(this.draggable.kendoDrag
+            .subscribe((event) => {
+            this.zone.runOutsideAngular(() => {
+                if (isDocumentAvailable()) {
+                    const isDragging = Math.abs(this.initialX.current - event.clientX) > 5 ||
+                        Math.abs(this.initialY.current - event.clientY) > 5;
+                    if (!isDragging) {
+                        return;
+                    }
+                    this.drag = true;
+                    if (!document.elementFromPoint(event.clientX, event.clientY)?.closest('.k-pivotgrid-configurator [kendodroptarget]')) {
+                        return;
+                    }
+                    this.renderer.setStyle(this.element.nativeElement, 'transform', `translate(${event.clientX - this.initialX.current}px, ${event.clientY - this.initialY.current}px)`);
+                }
+            });
+        }));
+        this.subs.add(this.draggable.kendoRelease
+            .subscribe(() => {
+            this.zone.runOutsideAngular(() => {
+                this.drag = false;
+                if (this.service.state.dragItem) {
+                    const element = this.element.nativeElement;
+                    if (isDocumentAvailable()) {
+                        this.renderer.removeStyle(element, 'transform');
+                        this.cue.remove(this.service.cueContainer);
+                    }
+                    this.service.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.drop, payload: this.item });
+                    this.service.state.dragItem = null;
+                    this.service.state.dropDirection = null;
+                    this.service.state.dropTarget = null;
+                    this.service.state.dropZone = null;
+                    this.renderer.removeStyle(element, 'z-index');
+                    this.service.draggedElement = null;
+                    if (this.service.dropTargetElement) {
+                        this.renderer.removeStyle(this.service.dropTargetElement, 'cursor');
+                        this.service.dropTargetElement = null;
+                    }
+                }
+            });
+        }));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+}
+DraggableChipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DraggableChipDirective, deps: [{ token: i3.DraggableDirective, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: ConfiguratorService }, { token: DropCueService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+DraggableChipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: { item: "item" }, host: { properties: { "style.pointerEvents": "this.pointerEvents", "style.touch-action": "this.touchActions" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DraggableChipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoChipDraggable]'
+                }]
+        }], ctorParameters: function () { return [{ type: i3.DraggableDirective, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: ConfiguratorService }, { type: DropCueService }, { type: i0.Renderer2 }]; }, propDecorators: { pointerEvents: [{
+                type: HostBinding,
+                args: ['style.pointerEvents']
+            }], touchActions: [{
+                type: HostBinding,
+                args: ['style.touch-action']
+            }], item: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class ChipKeyboardNavigationDirective {
+    constructor(host, renderer, ngZone) {
+        this.host = host;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.keydownSub = new Subscription();
+        this.reorder = new EventEmitter();
+    }
+    ngOnInit() {
+        const chipElement = this.host.element.nativeElement;
+        this.ngZone.runOutsideAngular(() => {
+            this.keydownSub.add(this.renderer.listen(chipElement, 'keydown', (ev) => {
+                const isAltDown = ev.keyCode === Keys.ArrowDown && ev.altKey;
+                const menuIcon = this.host.element.nativeElement.querySelector('.k-i-more-vertical');
+                const shiftAndMeta = ev.shiftKey && ev.metaKey;
+                const isArrow = [Keys.ArrowLeft, Keys.ArrowRight, Keys.ArrowDown, Keys.ArrowUp].includes(ev.keyCode);
+                const isReorderAction = shiftAndMeta && isArrow;
+                if (isAltDown && menuIcon) {
+                    menuIcon.click();
+                }
+                else if (isReorderAction) {
+                    const direction = {
+                        [Keys.ArrowDown]: 'down',
+                        [Keys.ArrowUp]: 'up',
+                        [Keys.ArrowRight]: 'right',
+                        [Keys.ArrowLeft]: 'left'
+                    }[ev.keyCode];
+                    this.reorder.emit({
+                        direction,
+                        sender: this.host
+                    });
+                }
+            }));
+        });
+    }
+    ngOnDestroy() {
+        this.keydownSub.unsubscribe();
+    }
+}
+ChipKeyboardNavigationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipKeyboardNavigationDirective, deps: [{ token: i5.ChipComponent }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+ChipKeyboardNavigationDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ChipKeyboardNavigationDirective, selector: "[kendoChipKeyboardNavigation]", outputs: { reorder: "reorder" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipKeyboardNavigationDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[kendoChipKeyboardNavigation]' }]
+        }], ctorParameters: function () { return [{ type: i5.ChipComponent }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { reorder: [{
+                type: Output
+            }] } });
+
+/**
+ * @hidden
+ * Represents the Kendo UI PivotGrid Configurator component for Angular.
+ */
+class PivotGridConfiguratorComponent {
+    constructor(dataService, localization, configuratorService, cdr, zone) {
+        this.dataService = dataService;
+        this.localization = localization;
+        this.configuratorService = configuratorService;
+        this.cdr = cdr;
+        this.zone = zone;
+        this.hostClass = true;
+        this.hostAriaRole = 'dialog';
+        this.orientation = 'vertical';
+        this.sort = new Array();
+        this.close = new EventEmitter();
+        this.checked = [];
+        this.subs = new Subscription();
+        /**
+         * A function which determines if a specific node has child nodes.
+         */
+        this.hasChildren = (node) => !('hierarchyUniqueName' in node) && !('aggregator' in node);
+        /**
+         * A function which provides the child nodes for a given parent node.
+         */
+        this.children = (node) => {
+            if (this.dataService.directive.type === 'olap') {
+                const observable = from(this.dataService.directive.fetchChildren(node, this.fields));
+                return observable.pipe(mergeMap(value => of(value)));
+            }
+            return of(node.children);
+        };
+    }
+    get headerTextId() {
+        return `k-pivotgrid-${this.dataService.pivotGridId}-configurator-header`;
+    }
+    get isHorizontal() {
+        return this.orientation === 'horizontal';
+    }
+    ngOnInit() {
+        this.subs.add(this.dataService.fields
+            .subscribe(res => {
+            this.fields = res;
+        }));
+        this.subs.add(this.dataService.configuredFields
+            .subscribe(res => {
+            const normalizedState = clone({ ...this.dataService.state, dragItem: res.dragItem, dropTarget: res.dropTarget, dropZone: res.dropZone, dropDirection: res.dropDirection });
+            this.originalState = normalizedState;
+            this.setState(normalizedState);
+            this.setChecked();
+        }));
+        this.subs.add(this.configuratorService.configuratorStateChange
+            .subscribe(res => {
+            this.state = res;
+            this.dataService.state = {
+                columnAxes: res.columnAxes,
+                rowAxes: res.rowAxes,
+                measureAxes: res.measureAxes,
+                sort: res.sort,
+                filter: res.filter
+            };
+            this.cdr.detectChanges();
+        }));
+    }
+    ngAfterViewInit() {
+        this.treeView.focus();
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    ngOnChanges(changes) {
+        if (changes['orientation']) {
+            this.configuratorService.orientation = this.orientation;
+        }
+    }
+    getName(name) {
+        return name.toString();
+    }
+    contentLabelId(section) {
+        return `k-pivotgrid-${this.dataService.pivotGridId}-configurator-${section}`;
+    }
+    setState(state) {
+        this.dataService.state = {
+            columnAxes: state.columnAxes,
+            rowAxes: state.rowAxes,
+            measureAxes: state.measureAxes,
+            sort: state.sort,
+            filter: state.filter
+        };
+        this.state = this.configuratorService.state = state;
+    }
+    onReorder(ev, name, item) {
+        const currentCollection = this.state[`${name}Axes`];
+        const itemIndex = currentCollection.indexOf(item);
+        switch (ev.direction) {
+            case 'right':
+                if (itemIndex !== currentCollection.length - 1) {
+                    this.swapChips(currentCollection, itemIndex, ev.direction, name);
+                }
+                break;
+            case 'left':
+                if (itemIndex !== 0) {
+                    this.swapChips(currentCollection, itemIndex, ev.direction, name);
+                    ev.sender.focus();
+                }
+                break;
+            case 'up':
+                if (name === 'row') {
+                    this.moveChip(currentCollection, item, itemIndex, name);
+                }
+                break;
+            case 'down':
+                if (name === 'column') {
+                    this.moveChip(currentCollection, item, itemIndex, name);
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    /**
+     * Returns the localized message for a given token
+     */
+    messageFor(localizationToken) {
+        return this.localization.get(localizationToken);
+    }
+    /**
+     * Retrieves the 'Columns' section item names
+     */
+    get columnHierarchies() {
+        return this.extractDefaultFields(this.dataService.state.columnAxes);
+    }
+    ;
+    /**
+     * Retrieves the 'Rows' section item names
+     */
+    get rowHierarchies() {
+        return this.extractDefaultFields(this.dataService.state.rowAxes);
+    }
+    ;
+    /**
+     * Retrieves the 'Value' section item names
+     */
+    get measureHierarchies() {
+        return this.extractDefaultFields(this.dataService.state.measureAxes);
+    }
+    ;
+    /**
+     * Updates the respective axis configuration of the current state
+     * when a chip is deleted from the UI
+     */
+    onChipRemove(ev, item, section) {
+        const filteredItems = this.dataService.state[`${section}Axes`].filter(descriptor => descriptor !== item);
+        this.dataService.state[`${section}Axes`] = filteredItems;
+        const newState = { ...this.state, ...this.dataService.state };
+        this.checked = this.checked.filter(checkedItem => checkedItem.uniqueName !== item.name[0]);
+        this.setState(newState);
+        if (!this.navigation) {
+            return;
+        }
+        ;
+        const targetIndex = this.navigation.elements.indexOf(ev.sender.element.nativeElement);
+        this.zone.runOutsideAngular(() => setTimeout(() => this.navigation.focusElement(this.navigation.elements[targetIndex - 1], this.navigation.elements[targetIndex])));
+    }
+    /**
+     * Constructs an array with all selected fields.
+     * @param fields - used for when child nodes are loaded on demand.
+     * Child nodes are concatinated to the root level nodes.
+     */
+    setChecked(fields = []) {
+        const allFields = [...this.fields, ...fields];
+        const checked = this.getFieldsFlatMap(allFields).filter((f) => [
+            ...this.columnHierarchies,
+            ...this.rowHierarchies,
+            ...this.measureHierarchies
+        ].some((h) => (h === f.uniqueName || h === f.defaultHierarchy)));
+        this.checked = checked;
+    }
+    /**
+     * A function which determines if a specific node is checked/
+     */
+    isItemChecked(node) {
+        const res = this.checked.some(s => node.defaultHierarchy
+            ? s.defaultHierarchy === node.defaultHierarchy
+            : s.uniqueName === node.uniqueName)
+            || (node.children?.length && node.children?.every((c) => c.checked));
+        return res || null;
+    }
+    /**
+     * Determines if a checkbox should be rendered.
+     */
+    isSelectable(node) {
+        const hasChildren = !('hierarchyUniqueName' in node) && !('aggregator' in node);
+        return !((!hasChildren && !node.aggregator && !node.measure)
+            || (node.type === 2)
+            || node.uniqueName === '[KPIs]');
+    }
+    /**
+     * Check if the newly loaded child nodes have checked items.
+     * (Only for OLAP data-binding directive)
+     */
+    handleChildrenLoaded(event) {
+        if (this.dataService.directive.type === 'local') {
+            return;
+        }
+        const fields = event.children.map(item => item.dataItem);
+        this.setChecked(fields);
+    }
+    handleCheckedChange(event, item) {
+        if (event.target.checked) {
+            this.checked = [...this.checked, item];
+        }
+        else {
+            const itemIndex = this.checked.findIndex(checkedItem => checkedItem.uniqueName === item.uniqueName);
+            this.checked.splice(itemIndex, 1);
+        }
+        const action = {
+            type: 'PIVOT_CONFIGURATOR_ACTION_TOGGLE_SELECTION',
+            payload: item
+        };
+        this.configuratorService.parseConfiguratorState(action);
+        const closestItem = event.target.closest('.k-treeview-item');
+        this.zone.runOutsideAngular(() => setTimeout(() => closestItem.focus()));
+    }
+    onTreeViewSelect(ev) {
+        const closestItem = ev.target.closest('.k-treeview-item');
+        if (closestItem) {
+            closestItem.querySelector('.k-checkbox')?.click();
+        }
+    }
+    onTreeViewEscape(ev) {
+        ev.stopImmediatePropagation();
+        this.close.emit();
+    }
+    handleSubmit() {
+        this.dataService.configuratorFieldChange.emit(this.dataService.state);
+    }
+    /**
+     * Reset the configurator to the last saved state
+     */
+    handleReset() {
+        this.setState(clone(this.originalState));
+        this.setChecked();
+    }
+    /**
+     * Flattens all available fields.
+     */
+    getFieldsFlatMap(nodes = []) {
+        let result = [...nodes];
+        (nodes || []).forEach((child) => {
+            result = result.concat(this.getFieldsFlatMap(child.children));
+        });
+        return result;
+    }
+    /**
+     * Creates an array containing only the field names, e.g. '[Date].[Calendar]' or 'Product'
+     */
+    extractDefaultFields(columns = []) {
+        const result = new Set();
+        columns.forEach((column) => {
+            result.add(String(column.name));
+        });
+        return Array.from(result);
+    }
+    ;
+    /**
+     * Swaps chips within the same ChipList
+     */
+    swapChips(collection, itemIndex, direction, name) {
+        const targetIndex = itemIndex + (direction === 'right' ? 1 : -1);
+        swapItems(collection, itemIndex, targetIndex);
+        this.dataService.state[`${name}Axes`] = collection;
+        const newState = { ...this.state, ...this.dataService.state };
+        this.setState(newState);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Moves a chip from one ChipList to another
+     */
+    moveChip(collection, item, itemIndex, name) {
+        collection.splice(itemIndex, 1);
+        const targetCollectionName = name === 'row' ? 'column' : 'row';
+        const axes = this.state[`${targetCollectionName}Axes`];
+        axes.push(item);
+        this.dataService.state[`${name}Axes`] = collection;
+        this.dataService.state[targetCollectionName] = axes;
+        const newState = { ...this.state, ...this.dataService.state };
+        this.setState(newState);
+        this.cdr.detectChanges();
+        this[`${targetCollectionName}sList`]?.chips.last.focus();
+    }
+}
+PivotGridConfiguratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridConfiguratorComponent, deps: [{ token: PivotGridDataService }, { token: i1.LocalizationService }, { token: ConfiguratorService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: { orientation: "orientation", sort: "sort", filter: "filter", navigation: "navigation" }, outputs: { close: "close" }, host: { properties: { "class.k-pivotgrid-configurator": "this.hostClass", "attr.role": "this.hostAriaRole", "attr.aria-labelledby": "this.headerTextId" } }, providers: [
+        ConfiguratorService,
+        DropCueService,
+        SinglePopupService
+    ], viewQueries: [{ propertyName: "treeView", first: true, predicate: TreeViewComponent, descendants: true }, { propertyName: "columnsList", first: true, predicate: ["columnsChiplist"], descendants: true }, { propertyName: "rowsList", first: true, predicate: ["rowsChiplist"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+        <div 
+            class="k-pivotgrid-configurator-panel k-pivotgrid-configurator-push"
+            [ngClass]="{
+                'k-pivotgrid-configurator-horizontal': isHorizontal,
+                'k-pivotgrid-configurator-vertical': !isHorizontal
+            }"
+        >
+            <div class="k-pivotgrid-configurator-header">
+                <div
+                    [id]="headerTextId" 
+                    class="k-pivotgrid-configurator-header-text">{{messageFor('configuratorHeaderText')}}</div>
+            </div>
+
+            <div class="k-pivotgrid-configurator-content">
+                <div class="k-form" [class.k-form-horizontal]="isHorizontal">
+                    <div class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null">
+                        <div class="k-form-field" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
+                            <span [id]="contentLabelId('fields')" class="k-label">{{messageFor('configuratorFieldsText')}}</span>
+                        </div>
+                        <div class="k-form-field" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
+                            <div class="k-fields-list-wrapper">
+                                <kendo-treeview
+                                    #treeview
+                                    [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('fields')"
+                                    (focus)="treeview.focus()"
+                                    [nodes]="fields"
+                                    textField="caption"
+                                    [children]="children"
+                                    [hasChildren]="hasChildren"
+                                    kendoTreeViewExpandable
+                                    (childrenLoaded)="handleChildrenLoaded($event)"
+                                    (keydown.space)="onTreeViewSelect($event)">
+                                <ng-template kendoTreeViewNodeTemplate let-dataItem>
+                                    <input kendoCheckBox
+                                        *ngIf="isSelectable(dataItem)"
+                                        type="checkbox" 
+                                        kendoCheckBox
+                                        tabindex="-1"
+                                        [checked]="isItemChecked(dataItem)"
+                                        (change)="handleCheckedChange($event, dataItem)"/>
+                                    {{ dataItem.caption }}
+                                </ng-template>
+                                </kendo-treeview>
+
+                            </div>
+                        </div>
+                    </div>
+
+                    <div *ngIf="isHorizontal; else verticalTemplate" class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null">
+                        <ng-container *ngTemplateOutlet="verticalTemplate"></ng-container>
+                    </div>
+
+                    <ng-template #verticalTemplate>
+                        <div class="k-form-field" kendoDropTarget axes="columnAxes" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
+                            <span [id]="contentLabelId('columns')" class="k-label">{{messageFor('configuratorColumnsText')}}</span>
+                        </div>
+
+                        <kendo-chiplist
+                            *ngIf="state.columnAxes && state.columnAxes.length; else noColumnAxes"
+                            #columnsChiplist
+                            kendoDropTarget
+                            axes="columnAxes"
+                            [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
+                            [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
+                        >
+                            <ng-container *ngFor="let item of state.columnAxes">
+                                <kendo-chip *ngIf="item.name.length === 1"
+                                    kendoChipDraggable
+                                    kendoDraggable
+                                    kendoDropTarget
+                                    kendoChipKeyboardNavigation
+                                    [item]="item"
+                                    axes="columnAxes"
+                                    rounded="full"
+                                    [removable]="true"
+                                    (remove)="onChipRemove($event, item, 'column')"
+                                    (reorder)="onReorder($event, 'column', item)"
+                                >{{ getName(item.name) }}
+                                    <kendo-pivot-chip-menu
+                                        [chip]="item">
+                                    </kendo-pivot-chip-menu>
+                                </kendo-chip>
+                            </ng-container>
+                        </kendo-chiplist>
+
+                        <ng-template #noColumnAxes>
+                            <div class="k-settings-description" kendoDropTarget axes="columnAxes">{{messageFor('configuratorEmptyColumnsText')}}</div>
+                        </ng-template>
+
+                        <div class="k-form-field" kendoDropTarget axes="rowAxes" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
+                            <span [id]="contentLabelId('rows')" class="k-label">{{messageFor('configuratorRowsText')}}</span>
+                        </div>
+
+                        <kendo-chiplist
+                            *ngIf="state.rowAxes && state.rowAxes.length; else noRowAxes"
+                            #rowsChiplist
+                            kendoDropTarget
+                            axes="rowAxes"
+                            [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('rows')"
+                            [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
+                        >
+                            <ng-container *ngFor="let item of state.rowAxes">
+                                <kendo-chip *ngIf="item.name.length === 1"
+                                    kendoChipDraggable
+                                    kendoDraggable
+                                    kendoDropTarget
+                                    kendoChipKeyboardNavigation
+                                    [item]="item"
+                                    axes="rowAxes"
+                                    rounded="full"
+                                    [removable]="true"
+                                    (remove)="onChipRemove($event, item, 'row')"
+                                    (reorder)="onReorder($event, 'row', item)"
+                                >
+                                    {{ getName(item.name) }}
+    
+                                    <kendo-pivot-chip-menu
+                                        [chip]="item">
+                                    </kendo-pivot-chip-menu>
+                                </kendo-chip>
+                            </ng-container>
+                        </kendo-chiplist>
+
+                        <ng-template #noRowAxes>
+                            <div class="k-settings-description" kendoDropTarget axes="rowAxes">{{messageFor('configuratorEmptyRowsText')}}</div>
+                        </ng-template>
+                    </ng-template>
+
+                    <div *ngIf="isHorizontal; else verticalMeasuresTemplate" class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null" >
+                        <ng-container *ngTemplateOutlet="verticalMeasuresTemplate"></ng-container>
+                    </div>
+
+                    <ng-template #verticalMeasuresTemplate>
+                        <div class="k-form-field" kendoDropTarget axes="measureAxes" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
+                            <span [id]="contentLabelId('values')" class="k-label">{{messageFor('configuratorValuesText')}}</span>
+                        </div>
+
+                        <kendo-chiplist
+                            *ngIf="state.measureAxes && state.measureAxes.length; else noMeasureAxes"
+                            kendoDropTarget
+                            axes="measureAxes"
+                            [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('values')"
+                            [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
+                        >
+                            <kendo-chip *ngFor="let item of state.measureAxes"
+                                kendoChipDraggable
+                                kendoDraggable
+                                kendoDropTarget
+                                kendoChipKeyboardNavigation
+                                [item]="item"
+                                axes="measureAxes"
+                                rounded="full"
+                                [removable]="true"
+                                (remove)="onChipRemove($event, item, 'measure')"
+                                (reorder)="onReorder($event, 'measure', item)"
+                                >
+                                {{ getName(item.name) }}
+                            </kendo-chip>
+                        </kendo-chiplist>
+
+                        <ng-template #noMeasureAxes>
+                            <div class="k-settings-description" kendoDropTarget axes="measureAxes">{{messageFor('configuratorEmptyMeasuresText')}}</div>
+                        </ng-template>
+                    </ng-template>
+                    
+                </div>
+            </div>
+            <div class="k-pivotgrid-configurator-actions k-actions k-hstack k-justify-content-end">
+                <button kendoButton type="button" (click)="handleReset()">{{messageFor('configuratorCancelButtonText')}}</button>
+                <button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
+            </div>
+        </div>
+   `, isInline: true, components: [{ type: i4.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i5.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i5.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "removeSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }, { type: ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: ["chip", "tabIndex"] }, { type: i5.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i4.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: ChipKeyboardNavigationDirective, selector: "[kendoChipKeyboardNavigation]", outputs: ["reorder"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-pivotgrid-configurator',
+                    providers: [
+                        ConfiguratorService,
+                        DropCueService,
+                        SinglePopupService
+                    ],
+                    template: `
+        <div 
+            class="k-pivotgrid-configurator-panel k-pivotgrid-configurator-push"
+            [ngClass]="{
+                'k-pivotgrid-configurator-horizontal': isHorizontal,
+                'k-pivotgrid-configurator-vertical': !isHorizontal
+            }"
+        >
+            <div class="k-pivotgrid-configurator-header">
+                <div
+                    [id]="headerTextId" 
+                    class="k-pivotgrid-configurator-header-text">{{messageFor('configuratorHeaderText')}}</div>
+            </div>
+
+            <div class="k-pivotgrid-configurator-content">
+                <div class="k-form" [class.k-form-horizontal]="isHorizontal">
+                    <div class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null">
+                        <div class="k-form-field" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
+                            <span [id]="contentLabelId('fields')" class="k-label">{{messageFor('configuratorFieldsText')}}</span>
+                        </div>
+                        <div class="k-form-field" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
+                            <div class="k-fields-list-wrapper">
+                                <kendo-treeview
+                                    #treeview
+                                    [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('fields')"
+                                    (focus)="treeview.focus()"
+                                    [nodes]="fields"
+                                    textField="caption"
+                                    [children]="children"
+                                    [hasChildren]="hasChildren"
+                                    kendoTreeViewExpandable
+                                    (childrenLoaded)="handleChildrenLoaded($event)"
+                                    (keydown.space)="onTreeViewSelect($event)">
+                                <ng-template kendoTreeViewNodeTemplate let-dataItem>
+                                    <input kendoCheckBox
+                                        *ngIf="isSelectable(dataItem)"
+                                        type="checkbox" 
+                                        kendoCheckBox
+                                        tabindex="-1"
+                                        [checked]="isItemChecked(dataItem)"
+                                        (change)="handleCheckedChange($event, dataItem)"/>
+                                    {{ dataItem.caption }}
+                                </ng-template>
+                                </kendo-treeview>
+
+                            </div>
+                        </div>
+                    </div>
+
+                    <div *ngIf="isHorizontal; else verticalTemplate" class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null">
+                        <ng-container *ngTemplateOutlet="verticalTemplate"></ng-container>
+                    </div>
+
+                    <ng-template #verticalTemplate>
+                        <div class="k-form-field" kendoDropTarget axes="columnAxes" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
+                            <span [id]="contentLabelId('columns')" class="k-label">{{messageFor('configuratorColumnsText')}}</span>
+                        </div>
+
+                        <kendo-chiplist
+                            *ngIf="state.columnAxes && state.columnAxes.length; else noColumnAxes"
+                            #columnsChiplist
+                            kendoDropTarget
+                            axes="columnAxes"
+                            [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
+                            [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
+                        >
+                            <ng-container *ngFor="let item of state.columnAxes">
+                                <kendo-chip *ngIf="item.name.length === 1"
+                                    kendoChipDraggable
+                                    kendoDraggable
+                                    kendoDropTarget
+                                    kendoChipKeyboardNavigation
+                                    [item]="item"
+                                    axes="columnAxes"
+                                    rounded="full"
+                                    [removable]="true"
+                                    (remove)="onChipRemove($event, item, 'column')"
+                                    (reorder)="onReorder($event, 'column', item)"
+                                >{{ getName(item.name) }}
+                                    <kendo-pivot-chip-menu
+                                        [chip]="item">
+                                    </kendo-pivot-chip-menu>
+                                </kendo-chip>
+                            </ng-container>
+                        </kendo-chiplist>
+
+                        <ng-template #noColumnAxes>
+                            <div class="k-settings-description" kendoDropTarget axes="columnAxes">{{messageFor('configuratorEmptyColumnsText')}}</div>
+                        </ng-template>
+
+                        <div class="k-form-field" kendoDropTarget axes="rowAxes" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
+                            <span [id]="contentLabelId('rows')" class="k-label">{{messageFor('configuratorRowsText')}}</span>
+                        </div>
+
+                        <kendo-chiplist
+                            *ngIf="state.rowAxes && state.rowAxes.length; else noRowAxes"
+                            #rowsChiplist
+                            kendoDropTarget
+                            axes="rowAxes"
+                            [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('rows')"
+                            [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
+                        >
+                            <ng-container *ngFor="let item of state.rowAxes">
+                                <kendo-chip *ngIf="item.name.length === 1"
+                                    kendoChipDraggable
+                                    kendoDraggable
+                                    kendoDropTarget
+                                    kendoChipKeyboardNavigation
+                                    [item]="item"
+                                    axes="rowAxes"
+                                    rounded="full"
+                                    [removable]="true"
+                                    (remove)="onChipRemove($event, item, 'row')"
+                                    (reorder)="onReorder($event, 'row', item)"
+                                >
+                                    {{ getName(item.name) }}
+    
+                                    <kendo-pivot-chip-menu
+                                        [chip]="item">
+                                    </kendo-pivot-chip-menu>
+                                </kendo-chip>
+                            </ng-container>
+                        </kendo-chiplist>
+
+                        <ng-template #noRowAxes>
+                            <div class="k-settings-description" kendoDropTarget axes="rowAxes">{{messageFor('configuratorEmptyRowsText')}}</div>
+                        </ng-template>
+                    </ng-template>
+
+                    <div *ngIf="isHorizontal; else verticalMeasuresTemplate" class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null" >
+                        <ng-container *ngTemplateOutlet="verticalMeasuresTemplate"></ng-container>
+                    </div>
+
+                    <ng-template #verticalMeasuresTemplate>
+                        <div class="k-form-field" kendoDropTarget axes="measureAxes" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
+                            <span [id]="contentLabelId('values')" class="k-label">{{messageFor('configuratorValuesText')}}</span>
+                        </div>
+
+                        <kendo-chiplist
+                            *ngIf="state.measureAxes && state.measureAxes.length; else noMeasureAxes"
+                            kendoDropTarget
+                            axes="measureAxes"
+                            [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('values')"
+                            [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
+                        >
+                            <kendo-chip *ngFor="let item of state.measureAxes"
+                                kendoChipDraggable
+                                kendoDraggable
+                                kendoDropTarget
+                                kendoChipKeyboardNavigation
+                                [item]="item"
+                                axes="measureAxes"
+                                rounded="full"
+                                [removable]="true"
+                                (remove)="onChipRemove($event, item, 'measure')"
+                                (reorder)="onReorder($event, 'measure', item)"
+                                >
+                                {{ getName(item.name) }}
+                            </kendo-chip>
+                        </kendo-chiplist>
+
+                        <ng-template #noMeasureAxes>
+                            <div class="k-settings-description" kendoDropTarget axes="measureAxes">{{messageFor('configuratorEmptyMeasuresText')}}</div>
+                        </ng-template>
+                    </ng-template>
+                    
+                </div>
+            </div>
+            <div class="k-pivotgrid-configurator-actions k-actions k-hstack k-justify-content-end">
+                <button kendoButton type="button" (click)="handleReset()">{{messageFor('configuratorCancelButtonText')}}</button>
+                <button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
+            </div>
+        </div>
+   `
+                }]
+        }], ctorParameters: function () { return [{ type: PivotGridDataService }, { type: i1.LocalizationService }, { type: ConfiguratorService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-pivotgrid-configurator']
+            }], hostAriaRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], headerTextId: [{
+                type: HostBinding,
+                args: ['attr.aria-labelledby']
+            }], orientation: [{
+                type: Input
+            }], sort: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], navigation: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }], treeView: [{
+                type: ViewChild,
+                args: [TreeViewComponent]
+            }], columnsList: [{
+                type: ViewChild,
+                args: ['columnsChiplist']
+            }], rowsList: [{
+                type: ViewChild,
+                args: ['rowsChiplist']
+            }] } });
+
+/**
+ * @hidden
+ */
+class PivotGridMessages extends ComponentMessages {
+}
+PivotGridMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+PivotGridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: PivotGridMessages, inputs: { fieldMenuFilterItemLabel: "fieldMenuFilterItemLabel", fieldMenuSortAscendingItemLabel: "fieldMenuSortAscendingItemLabel", fieldMenuSortDescendingItemLabel: "fieldMenuSortDescendingItemLabel", filterInputLabel: "filterInputLabel", filterOperatorsDropDownLabel: "filterOperatorsDropDownLabel", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", loading: "loading", emptyCellLabel: "emptyCellLabel", configuratorButtonText: "configuratorButtonText", configuratorHeaderText: "configuratorHeaderText", configuratorFieldsText: "configuratorFieldsText", configuratorColumnsText: "configuratorColumnsText", configuratorRowsText: "configuratorRowsText", configuratorValuesText: "configuratorValuesText", configuratorCancelButtonText: "configuratorCancelButtonText", configuratorApplyButtonText: "configuratorApplyButtonText", configuratorEmptyRowsText: "configuratorEmptyRowsText", configuratorEmptyColumnsText: "configuratorEmptyColumnsText", configuratorEmptyMeasuresText: "configuratorEmptyMeasuresText", chipMenuIconTitle: "chipMenuIconTitle" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridMessages, decorators: [{
+            type: Directive
+        }], propDecorators: { fieldMenuFilterItemLabel: [{
+                type: Input
+            }], fieldMenuSortAscendingItemLabel: [{
+                type: Input
+            }], fieldMenuSortDescendingItemLabel: [{
+                type: Input
+            }], filterInputLabel: [{
+                type: Input
+            }], filterOperatorsDropDownLabel: [{
+                type: Input
+            }], filterEqOperator: [{
+                type: Input
+            }], filterNotEqOperator: [{
+                type: Input
+            }], filterIsNullOperator: [{
+                type: Input
+            }], filterIsNotNullOperator: [{
+                type: Input
+            }], filterIsEmptyOperator: [{
+                type: Input
+            }], filterIsNotEmptyOperator: [{
+                type: Input
+            }], filterStartsWithOperator: [{
+                type: Input
+            }], filterContainsOperator: [{
+                type: Input
+            }], filterNotContainsOperator: [{
+                type: Input
+            }], filterEndsWithOperator: [{
+                type: Input
+            }], filterFilterButton: [{
+                type: Input
+            }], filterClearButton: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], emptyCellLabel: [{
+                type: Input
+            }], configuratorButtonText: [{
+                type: Input
+            }], configuratorHeaderText: [{
+                type: Input
+            }], configuratorFieldsText: [{
+                type: Input
+            }], configuratorColumnsText: [{
+                type: Input
+            }], configuratorRowsText: [{
+                type: Input
+            }], configuratorValuesText: [{
+                type: Input
+            }], configuratorCancelButtonText: [{
+                type: Input
+            }], configuratorApplyButtonText: [{
+                type: Input
+            }], configuratorEmptyRowsText: [{
+                type: Input
+            }], configuratorEmptyColumnsText: [{
+                type: Input
+            }], configuratorEmptyMeasuresText: [{
+                type: Input
+            }], chipMenuIconTitle: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class LocalizedMessagesDirective extends PivotGridMessages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+}
+LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]", providers: [
+        {
+            provide: PivotGridMessages,
+            useExisting: forwardRef(() => LocalizedMessagesDirective)
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: PivotGridMessages,
+                            useExisting: forwardRef(() => LocalizedMessagesDirective)
+                        }
+                    ],
+                    selector: '[kendoPivotGridLocalizedMessages]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
+const DEFAULT_LOADER_SETTINGS = {
+    type: 'converging-spinner',
+    themeColor: 'primary',
+    size: 'large'
+};
+const DEFAULT_CONFIGURATOR_SETTINGS = {
+    position: 'right',
+    orientation: 'vertical'
+};
+/**
+ * Represents the Kendo UI PivotGrid component for Angular.
+ */
+class PivotGridComponent {
+    constructor(hostEl, zone, dataService, localization, renderer, _scrollbarWidthService) {
+        this.hostEl = hostEl;
+        this.zone = zone;
+        this.dataService = dataService;
+        this.localization = localization;
+        this.renderer = renderer;
+        this.hostClass = true;
+        /**
+         * Specify the width of the column header and data cells. Value is treated as pixels [(see example)]({% slug appearance_pivotgrid %}#toc-column-headers-width).
+         *
+         * @default 200
+         */
+        this.columnHeadersWidth = 200;
+        /**
+         * If set to true, the user can use dedicated shortcuts to interact with the PivotGrid. By default, navigation is disabled.
+         *
+         * @default false
+         */
+        this.navigable = false;
+        this.resizeObservers = [];
+        this._loaderSettings = DEFAULT_LOADER_SETTINGS;
+        this.subs = new Subscription();
+        this.rtl = false;
+        this.resizeContainer = (axis, element) => {
+            const isRows = axis === 'Rows';
+            const table = this.table.nativeElement;
+            const size = isRows ? 'offsetHeight' : 'offsetWidth';
+            table.style[`gridTemplate${axis}`] = '';
+            table.style[`gridTemplate${axis}`] = `${element[size]}px 1fr`;
+        };
+        this.handleScroll = (event) => {
+            if (event.target === this.valuesTable.nativeElement) {
+                syncScroll(event.target, [
+                    this.rowHeadersTable.nativeElement,
+                    this.colHeadersTable.nativeElement
+                ]);
+            }
+            else if (event.target.closest('.k-pivotgrid-row-headers')) {
+                syncWheel(event, [this.valuesTable.nativeElement, this.rowHeadersTable.nativeElement], 'scrollTop', 'Y');
+            }
+            else if (event.target.closest('.k-pivotgrid-column-headers')) {
+                syncWheel(event, [this.valuesTable.nativeElement, this.colHeadersTable.nativeElement], 'scrollLeft', 'X');
+            }
+        };
+        validatePackage(packageMetadata);
+        this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.direction = this.rtl ? 'rtl' : 'ltr';
+        }));
+        dataService.wrapper = this.hostEl.nativeElement;
+    }
+    get rightPositionClass() {
+        return this.configuratorSettings?.position === 'right';
+    }
+    get leftPositionClass() {
+        return this.configuratorSettings?.position === 'left';
+    }
+    get bottomPositionClass() {
+        return this.configuratorSettings?.position === 'bottom';
+    }
+    get topPositionClass() {
+        return this.configuratorSettings?.position === 'top';
+    }
+    get dir() {
+        return this.direction;
+    }
+    /**
+     * Specify the type, size and color of the PivotGrid's loader.
+     *
+     * The default settings are:
+     * * type: `converging-spinner`
+     * * color: `primary`
+     * * size: `large`
+     */
+    set loaderSettings(settings) {
+        this._loaderSettings = Object.assign({}, DEFAULT_LOADER_SETTINGS, settings);
+    }
+    ;
+    get loaderSettings() {
+        return this._loaderSettings;
+    }
+    /**
+     * @hidden
+     */
+    get loadingText() {
+        return this.localization.get('loading');
+    }
+    get configuratorSettings() {
+        return this.configurator && Object.assign({}, DEFAULT_CONFIGURATOR_SETTINGS, this.configurator);
+    }
+    /**
+     * Holds the displayed aggregated PivotGrid values.
+     */
+    get aggregateData() {
+        return cloneArray(this.dataService.aggregateData);
+    }
+    ngAfterViewInit() {
+        if (isDocumentAvailable()) {
+            this.zone.runOutsideAngular(() => {
+                const rowHeadersTable = this.rowHeadersTable.nativeElement.firstElementChild;
+                const headerColsResizeObserver = new ResizeObserver(() => this.resizeContainer('Columns', rowHeadersTable));
+                headerColsResizeObserver.observe(rowHeadersTable);
+                const colHeadersTable = this.colHeadersTable.nativeElement.firstElementChild;
+                const headerRowsResizeObserver = new ResizeObserver(() => this.resizeContainer('Rows', colHeadersTable));
+                headerRowsResizeObserver.observe(colHeadersTable);
+                this.resizeObservers = [headerColsResizeObserver, headerRowsResizeObserver];
+                this.subs.add(fromEvent(rowHeadersTable, 'wheel')
+                    .pipe(merge(fromEvent(colHeadersTable, 'wheel'), fromEvent(this.valuesTable.nativeElement, 'scroll'))).subscribe((ev) => this.handleScroll(ev)));
+                if (this.navigable) {
+                    this.initNavigation();
+                }
+            });
+        }
+    }
+    ngAfterContentInit() {
+        this.subs.add(this.dataService.loading.subscribe(state => this.loading = state));
+    }
+    ngOnChanges(changes) {
+        if (isChanged('navigable', changes)) {
+            if (this.navigable) {
+                this.initNavigation();
+            }
+            else {
+                this.stopNavigation();
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.resizeObservers.forEach(o => o.disconnect());
+        this.subs.unsubscribe();
+        this.stopNavigation();
+    }
+    /**
+     * @hidden
+     */
+    messageFor(localizationToken) {
+        return this.localization.get(localizationToken);
+    }
+    /**
+     * @hidden
+     */
+    toggleConfigurator() {
+        this.showConfigurator = !this.showConfigurator;
+        if (!this.navigable) {
+            return;
+        }
+        if (this.showConfigurator) {
+            this.zone.runOutsideAngular(() => setTimeout(() => this.initConfiguratorNavigation()));
+        }
+        else {
+            this.stopConfiguratorNavigation();
+            const el = this.navigation.current;
+            if (el) {
+                this.zone.runOutsideAngular(() => {
+                    setTimeout(() => this.navigation.focusElement(el, null));
+                });
+            }
+            ;
+        }
+    }
+    initNavigation() {
+        this.stopNavigation();
+        this.navigation = new PivotGridNavigation({ tabIndex: 0 });
+        this.navigation.start(this.table.nativeElement);
+        const firstCell = this.navigation.first;
+        if (firstCell) {
+            firstCell.setAttribute('tabindex', '0');
+        }
+        if (!this.navigationSubs) {
+            this.navigationSubs = this.dataService.directive.expandChange.pipe(merge(this.dataService.directive.configurationChange)).subscribe(() => this.zone.runOutsideAngular(() => {
+                setTimeout(() => this.navigation.update());
+            }));
+            this.subs.add(this.navigationSubs);
+        }
+    }
+    stopNavigation() {
+        if (this.navigation) {
+            const lastFocusedEl = this.navigation.elements.find(el => el.hasAttribute('tabindex'));
+            if (lastFocusedEl) {
+                this.renderer.removeAttribute(lastFocusedEl, 'tabindex');
+            }
+            this.navigation.stop();
+        }
+    }
+    initConfiguratorNavigation() {
+        this.stopConfiguratorNavigation();
+        this.configuratorNavigation = new ConfiguratorNavigation({ tabIndex: 0 });
+        this.configuratorNavigation.start(this.configuratorWrapper.nativeElement);
+        this.configuratorNavigation.first.setAttribute('tabindex', '0');
+    }
+    stopConfiguratorNavigation() {
+        if (this.configuratorNavigation) {
+            const lastFocusedEl = this.configuratorNavigation.elements.find(el => el.hasAttribute('tabindex'));
+            if (lastFocusedEl) {
+                this.renderer.removeAttribute(lastFocusedEl, 'tabindex');
+            }
+            this.configuratorNavigation.stop();
+        }
+    }
+}
+PivotGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PivotGridDataService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i3.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
+PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PivotGridComponent, selector: "kendo-pivotgrid", inputs: { loaderSettings: "loaderSettings", configurator: "configurator", columnHeadersWidth: "columnHeadersWidth", navigable: "navigable" }, host: { properties: { "class.k-d-flex": "this.hostClass", "class.k-pos-relative": "this.hostClass", "class.k-flex-row": "this.rightPositionClass", "class.k-flex-row-reverse": "this.leftPositionClass", "class.k-flex-column": "this.bottomPositionClass", "class.k-flex-column-reverse": "this.topPositionClass", "attr.dir": "this.dir" } }, providers: [
+        PivotGridDataService,
+        LocalizationService,
+        PivotLocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.pivotgrid'
+        }
+    ], viewQueries: [{ propertyName: "colHeadersTable", first: true, predicate: ["colHeadersTable"], descendants: true, read: ElementRef }, { propertyName: "rowHeadersTable", first: true, predicate: ["rowHeadersTable"], descendants: true, read: ElementRef }, { propertyName: "valuesTable", first: true, predicate: ["valuesTable"], descendants: true, read: ElementRef }, { propertyName: "table", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "configuratorWrapper", first: true, predicate: ["configurator"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container kendoPivotGridLocalizedMessages
+        i18n-loading="kendo.pivotgrid.loading|The loading text"
+        loading="Loading"
+        
+        i18n-emptyCellLabel="kendo.pivotgrid.emptyCellLabel|The value of the aria-label attribute placed on the focusable empty cell element"
+        emptyCellLabel="PivotGrid Empty Cell"
+        
+        i18n-fieldMenuFilterItemLabel="kendo.pivotgrid.fieldMenuFilterItemLabel|The text content of the filter item in the column and row fields menu"
+        fieldMenuFilterItemLabel="Filter"
+
+        i18n-fieldMenuSortAscendingItemLabel="kendo.pivotgrid.fieldMenuSortAscendingItemLabel|The text content of the sort ascending item in the column and row fields menu"
+        fieldMenuSortAscendingItemLabel="Sort ascending"
+
+        i18n-fieldMenuSortDescendingItemLabel="kendo.pivotgrid.fieldMenuSortDescendingItemLabel|The text content of the sort descending item in the column and row fields menu"
+        fieldMenuSortDescendingItemLabel="Sort descending"
+
+        i18n-filterInputLabel="kendo.pivotgrid.filterInputLabel|The label of the filter input"
+        filterInputLabel="{{ '{fields} Filter' }}"
+
+        i18n-filterOperatorsDropDownLabel="kendo.pivotgrid.filterOperatorsDropDownLabel|The label of the filter operators DropDownList"
+        filterOperatorsDropDownLabel="{{ '{fields} Filter Operators' }}"
+
+        i18n-filterEqOperator="kendo.pivotgrid.filterEqOperator|The text of the equal filter operator"
+        filterEqOperator="Is equal to"
+
+        i18n-filterNotEqOperator="kendo.pivotgrid.filterNotEqOperator|The text of the not equal filter operator"
+        filterNotEqOperator="Is not equal to"
+
+        i18n-filterIsNullOperator="kendo.pivotgrid.filterIsNullOperator|The text of the is null filter operator"
+        filterIsNullOperator="Is null"
+
+        i18n-filterIsNotNullOperator="kendo.pivotgrid.filterIsNotNullOperator|The text of the is not null filter operator"
+        filterIsNotNullOperator="Is not null"
+
+        i18n-filterIsEmptyOperator="kendo.pivotgrid.filterIsEmptyOperator|The text of the is empty filter operator"
+        filterIsEmptyOperator="Is empty"
+
+        i18n-filterIsNotEmptyOperator="kendo.pivotgrid.filterIsNotEmptyOperator|The text of the is not empty filter operator"
+        filterIsNotEmptyOperator="Is not empty"
+
+        i18n-filterStartsWithOperator="kendo.pivotgrid.filterStartsWithOperator|The text of the starts with filter operator"
+        filterStartsWithOperator="Starts with"
+
+        i18n-filterContainsOperator="kendo.pivotgrid.filterContainsOperator|The text of the contains filter operator"
+        filterContainsOperator="Contains"
+
+        i18n-filterNotContainsOperator="kendo.pivotgrid.filterNotContainsOperator|The text of the does not contain filter operator"
+        filterNotContainsOperator="Does not contain"
+
+        i18n-filterEndsWithOperator="kendo.pivotgrid.filterEndsWithOperator|The text of the ends with filter operator"
+        filterEndsWithOperator="Ends with"
+
+        i18n-filterFilterButton="kendo.pivotgrid.filterFilterButton|The text of the filter button"
+        filterFilterButton="Filter"
+
+        i18n-filterClearButton="kendo.pivotgrid.filterClearButton|The text of the clear filter button"
+        filterClearButton="Clear"
+
+        i18n-configuratorButtonText="kendo.pivotgrid.configuratorButtonText|The text content of the button that opens and closes the PivotGrid configurator"
+        configuratorButtonText="Change Settings"
+
+        i18n-configuratorHeaderText="kendo.pivotgrid.configuratorHeaderText|The text content of the PivotGrid configurator title element"
+        configuratorHeaderText="Settings"
+
+        i18n-configuratorFieldsText="kendo.pivotgrid.configuratorFieldsText|The text content of the PivotGrid configurator fields section title element"
+        configuratorFieldsText="Fields"
+
+        i18n-configuratorColumnsText="kendo.pivotgrid.configuratorColumnsText|The text content of the PivotGrid configurator columns section title element"
+        configuratorColumnsText="Columns"
+
+        i18n-configuratorRowsText="kendo.pivotgrid.configuratorRowsText|The text content of the PivotGrid configurator rows section title element"
+        configuratorRowsText="Rows"
+
+        i18n-configuratorValuesText="kendo.pivotgrid.configuratorValuesText|The text content of the PivotGrid configurator values section title element"
+        configuratorValuesText="Values"
+
+        i18n-configuratorCancelButtonText="kendo.pivotgrid.configuratorCancelButtonText|The text content of the PivotGrid configurator configurator Cancel button"
+        configuratorCancelButtonText="Cancel"
+
+        i18n-configuratorApplyButtonText="kendo.pivotgrid.configuratorApplyButtonText|The text content of the PivotGrid configurator configurator Apply button"
+        configuratorApplyButtonText="Apply"
+        
+        i18n-configuratorEmptyRowsText="kendo.pivotgrid.configuratorEmptyRowsText|The text content of the PivotGrid configurator empty rows container"
+        configuratorEmptyRowsText="Select some fields to begin setup"
+        
+        i18n-configuratorEmptyColumnsText="kendo.pivotgrid.configuratorEmptyColumnsText|The text content of the PivotGrid configurator empty columns container"
+        configuratorEmptyColumnsText="Select some fields to begin setup"
+        
+        i18n-configuratorEmptyMeasuresText="kendo.pivotgrid.configuratorEmptyMeasuresText|The text content of the PivotGrid configurator empty measures container"
+        configuratorEmptyMeasuresText="Select some fields to begin setup"
+        
+        i18n-chipMenuIconTitle="kendo.grid.chipMenuIconTitle|The title of the field menu icon"
+        chipMenuIconTitle="{{ '{fieldName} Field Menu' }}"></ng-container>
+
+        <div #table class="k-pivotgrid" role="grid">
+            <span class="k-pivotgrid-empty-cell">
+                <span class="k-sr-only">{{messageFor('emptyCellLabel')}}</span>
+            </span>
+            <kendo-pivotgrid-table
+                #colHeadersTable
+                [colWidth]="columnHeadersWidth"
+                class="k-pivotgrid-column-headers"
+                tableType="columnHeader"></kendo-pivotgrid-table>
+            <kendo-pivotgrid-table
+                #rowHeadersTable
+                class="k-pivotgrid-row-headers"
+                tableType="rowHeader"></kendo-pivotgrid-table>
+            <kendo-pivotgrid-table
+                #valuesTable
+                [colWidth]="columnHeadersWidth"
+                class="k-pivotgrid-values"
+                tableType="values"></kendo-pivotgrid-table>
+    
+            <div *ngIf="loading" [style]="'position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);'">
+                <kendo-loader
+                    [type]="loaderSettings?.type"
+                    [themeColor]="loaderSettings?.themeColor"
+                    [size]="loaderSettings?.size"
+                >
+                </kendo-loader>
+                <span class="k-loading-text">{{ loadingText }}</span>
+            </div>
+        </div>
+        <kendo-pivotgrid-configurator
+            #configurator
+            *ngIf="showConfigurator"
+            [navigation]="configuratorNavigation"
+            [orientation]="configuratorSettings.orientation"
+            (close)="toggleConfigurator()">
+        </kendo-pivotgrid-configurator>
+        <div *ngIf="configurator"
+            #configuratorButton
+            class="k-pivotgrid-configurator-button"
+            aria-hidden="true"
+            (click)="toggleConfigurator()">
+            <span>{{messageFor('configuratorButtonText')}}<span class="k-icon k-i-gear k-color-inherit"></span>
+            </span>
+        </div>
+   `, isInline: true, components: [{ type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth"] }, { type: i5$1.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["orientation", "sort", "filter", "navigation"], outputs: ["close"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-pivotgrid',
+                    providers: [
+                        PivotGridDataService,
+                        LocalizationService,
+                        PivotLocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.pivotgrid'
+                        }
+                    ],
+                    template: `
+        <ng-container kendoPivotGridLocalizedMessages
+        i18n-loading="kendo.pivotgrid.loading|The loading text"
+        loading="Loading"
+        
+        i18n-emptyCellLabel="kendo.pivotgrid.emptyCellLabel|The value of the aria-label attribute placed on the focusable empty cell element"
+        emptyCellLabel="PivotGrid Empty Cell"
+        
+        i18n-fieldMenuFilterItemLabel="kendo.pivotgrid.fieldMenuFilterItemLabel|The text content of the filter item in the column and row fields menu"
+        fieldMenuFilterItemLabel="Filter"
+
+        i18n-fieldMenuSortAscendingItemLabel="kendo.pivotgrid.fieldMenuSortAscendingItemLabel|The text content of the sort ascending item in the column and row fields menu"
+        fieldMenuSortAscendingItemLabel="Sort ascending"
+
+        i18n-fieldMenuSortDescendingItemLabel="kendo.pivotgrid.fieldMenuSortDescendingItemLabel|The text content of the sort descending item in the column and row fields menu"
+        fieldMenuSortDescendingItemLabel="Sort descending"
+
+        i18n-filterInputLabel="kendo.pivotgrid.filterInputLabel|The label of the filter input"
+        filterInputLabel="{{ '{fields} Filter' }}"
+
+        i18n-filterOperatorsDropDownLabel="kendo.pivotgrid.filterOperatorsDropDownLabel|The label of the filter operators DropDownList"
+        filterOperatorsDropDownLabel="{{ '{fields} Filter Operators' }}"
+
+        i18n-filterEqOperator="kendo.pivotgrid.filterEqOperator|The text of the equal filter operator"
+        filterEqOperator="Is equal to"
+
+        i18n-filterNotEqOperator="kendo.pivotgrid.filterNotEqOperator|The text of the not equal filter operator"
+        filterNotEqOperator="Is not equal to"
+
+        i18n-filterIsNullOperator="kendo.pivotgrid.filterIsNullOperator|The text of the is null filter operator"
+        filterIsNullOperator="Is null"
+
+        i18n-filterIsNotNullOperator="kendo.pivotgrid.filterIsNotNullOperator|The text of the is not null filter operator"
+        filterIsNotNullOperator="Is not null"
+
+        i18n-filterIsEmptyOperator="kendo.pivotgrid.filterIsEmptyOperator|The text of the is empty filter operator"
+        filterIsEmptyOperator="Is empty"
+
+        i18n-filterIsNotEmptyOperator="kendo.pivotgrid.filterIsNotEmptyOperator|The text of the is not empty filter operator"
+        filterIsNotEmptyOperator="Is not empty"
+
+        i18n-filterStartsWithOperator="kendo.pivotgrid.filterStartsWithOperator|The text of the starts with filter operator"
+        filterStartsWithOperator="Starts with"
+
+        i18n-filterContainsOperator="kendo.pivotgrid.filterContainsOperator|The text of the contains filter operator"
+        filterContainsOperator="Contains"
+
+        i18n-filterNotContainsOperator="kendo.pivotgrid.filterNotContainsOperator|The text of the does not contain filter operator"
+        filterNotContainsOperator="Does not contain"
+
+        i18n-filterEndsWithOperator="kendo.pivotgrid.filterEndsWithOperator|The text of the ends with filter operator"
+        filterEndsWithOperator="Ends with"
+
+        i18n-filterFilterButton="kendo.pivotgrid.filterFilterButton|The text of the filter button"
+        filterFilterButton="Filter"
+
+        i18n-filterClearButton="kendo.pivotgrid.filterClearButton|The text of the clear filter button"
+        filterClearButton="Clear"
+
+        i18n-configuratorButtonText="kendo.pivotgrid.configuratorButtonText|The text content of the button that opens and closes the PivotGrid configurator"
+        configuratorButtonText="Change Settings"
+
+        i18n-configuratorHeaderText="kendo.pivotgrid.configuratorHeaderText|The text content of the PivotGrid configurator title element"
+        configuratorHeaderText="Settings"
+
+        i18n-configuratorFieldsText="kendo.pivotgrid.configuratorFieldsText|The text content of the PivotGrid configurator fields section title element"
+        configuratorFieldsText="Fields"
+
+        i18n-configuratorColumnsText="kendo.pivotgrid.configuratorColumnsText|The text content of the PivotGrid configurator columns section title element"
+        configuratorColumnsText="Columns"
+
+        i18n-configuratorRowsText="kendo.pivotgrid.configuratorRowsText|The text content of the PivotGrid configurator rows section title element"
+        configuratorRowsText="Rows"
+
+        i18n-configuratorValuesText="kendo.pivotgrid.configuratorValuesText|The text content of the PivotGrid configurator values section title element"
+        configuratorValuesText="Values"
+
+        i18n-configuratorCancelButtonText="kendo.pivotgrid.configuratorCancelButtonText|The text content of the PivotGrid configurator configurator Cancel button"
+        configuratorCancelButtonText="Cancel"
+
+        i18n-configuratorApplyButtonText="kendo.pivotgrid.configuratorApplyButtonText|The text content of the PivotGrid configurator configurator Apply button"
+        configuratorApplyButtonText="Apply"
+        
+        i18n-configuratorEmptyRowsText="kendo.pivotgrid.configuratorEmptyRowsText|The text content of the PivotGrid configurator empty rows container"
+        configuratorEmptyRowsText="Select some fields to begin setup"
+        
+        i18n-configuratorEmptyColumnsText="kendo.pivotgrid.configuratorEmptyColumnsText|The text content of the PivotGrid configurator empty columns container"
+        configuratorEmptyColumnsText="Select some fields to begin setup"
+        
+        i18n-configuratorEmptyMeasuresText="kendo.pivotgrid.configuratorEmptyMeasuresText|The text content of the PivotGrid configurator empty measures container"
+        configuratorEmptyMeasuresText="Select some fields to begin setup"
+        
+        i18n-chipMenuIconTitle="kendo.grid.chipMenuIconTitle|The title of the field menu icon"
+        chipMenuIconTitle="{{ '{fieldName} Field Menu' }}"></ng-container>
+
+        <div #table class="k-pivotgrid" role="grid">
+            <span class="k-pivotgrid-empty-cell">
+                <span class="k-sr-only">{{messageFor('emptyCellLabel')}}</span>
+            </span>
+            <kendo-pivotgrid-table
+                #colHeadersTable
+                [colWidth]="columnHeadersWidth"
+                class="k-pivotgrid-column-headers"
+                tableType="columnHeader"></kendo-pivotgrid-table>
+            <kendo-pivotgrid-table
+                #rowHeadersTable
+                class="k-pivotgrid-row-headers"
+                tableType="rowHeader"></kendo-pivotgrid-table>
+            <kendo-pivotgrid-table
+                #valuesTable
+                [colWidth]="columnHeadersWidth"
+                class="k-pivotgrid-values"
+                tableType="values"></kendo-pivotgrid-table>
+    
+            <div *ngIf="loading" [style]="'position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);'">
+                <kendo-loader
+                    [type]="loaderSettings?.type"
+                    [themeColor]="loaderSettings?.themeColor"
+                    [size]="loaderSettings?.size"
+                >
+                </kendo-loader>
+                <span class="k-loading-text">{{ loadingText }}</span>
+            </div>
+        </div>
+        <kendo-pivotgrid-configurator
+            #configurator
+            *ngIf="showConfigurator"
+            [navigation]="configuratorNavigation"
+            [orientation]="configuratorSettings.orientation"
+            (close)="toggleConfigurator()">
+        </kendo-pivotgrid-configurator>
+        <div *ngIf="configurator"
+            #configuratorButton
+            class="k-pivotgrid-configurator-button"
+            aria-hidden="true"
+            (click)="toggleConfigurator()">
+            <span>{{messageFor('configuratorButtonText')}}<span class="k-icon k-i-gear k-color-inherit"></span>
+            </span>
+        </div>
+   `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: PivotGridDataService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i3.ScrollbarWidthService }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-d-flex']
+            }, {
+                type: HostBinding,
+                args: ['class.k-pos-relative']
+            }], rightPositionClass: [{
+                type: HostBinding,
+                args: ['class.k-flex-row']
+            }], leftPositionClass: [{
+                type: HostBinding,
+                args: ['class.k-flex-row-reverse']
+            }], bottomPositionClass: [{
+                type: HostBinding,
+                args: ['class.k-flex-column']
+            }], topPositionClass: [{
+                type: HostBinding,
+                args: ['class.k-flex-column-reverse']
+            }], dir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], colHeadersTable: [{
+                type: ViewChild,
+                args: ['colHeadersTable', { read: ElementRef }]
+            }], rowHeadersTable: [{
+                type: ViewChild,
+                args: ['rowHeadersTable', { read: ElementRef }]
+            }], valuesTable: [{
+                type: ViewChild,
+                args: ['valuesTable', { read: ElementRef }]
+            }], table: [{
+                type: ViewChild,
+                args: ['table', { read: ElementRef }]
+            }], configuratorWrapper: [{
+                type: ViewChild,
+                args: ['configurator', { read: ElementRef }]
+            }], loaderSettings: [{
+                type: Input
+            }], configurator: [{
+                type: Input
+            }], columnHeadersWidth: [{
+                type: Input
+            }], navigable: [{
+                type: Input
+            }] } });
+
+/**
+ * The event data for the ExpandChangeEvent
+ */
+class ExpandChangeEvent extends PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        super();
+        Object.assign(this, args);
+    }
+}
+;
+
+/**
+ * The event data for the ConfigurationChangeEvent
+ */
+class ConfigurationChangeEvent extends PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        super();
+        Object.assign(this, args);
+    }
+}
+;
+
+/**
+ * @hidden
+ * A directive which binds the PivotGrid to an array of objects.
+ */
+class PivotBaseBindingDirective {
+    constructor(dataService, zone) {
+        this.dataService = dataService;
+        this.zone = zone;
+        /**
+         * Represents the column axes configuration of the PivotGrid.
+         */
+        this.columnAxes = [];
+        /**
+         * Represents the row axes configuration of the PivotGrid.
+         */
+        this.rowAxes = [];
+        /**
+         * Represents the measure axes configuration of the PivotGrid.
+         */
+        this.measureAxes = [];
+        /**
+         * Represents the initial sorted state of the PivotGrid.
+         */
+        this.sort = [];
+        /**
+         * Fires each time a row or column header gets expanded or collapsed by the end user. The event is preventable.
+         * If you prevent the event, the PivotGrid will not be rerendered with the new state, resulting from the end user interaction.
+         */
+        this.expandChange = new EventEmitter();
+        /**
+         * Fires when the Configurator Apply button is pressed. The event is preventable.
+         * If you prevent the event, the PivotGrid will not be rerendered with the new state, resulting from the configuration changes, applied through the configurator interface.
+         */
+        this.configurationChange = new EventEmitter();
+        /**
+         * Fires each time when new data is loaded and transformed to show aggregated values.
+         * The event fires upon initialization and on user interaction that changes the state of the PivotGrid.
+         */
+        this.dataLoaded = new EventEmitter();
+        this.subs = new Subscription();
+    }
+    ngOnInit() {
+        this.dataService.state = new PivotGridState(this.columnAxes, this.rowAxes, this.measureAxes, this.sort, this.filter);
+        this.loadData(this.dataService.state);
+        this.loadFields();
+        this.subs.add(this.dataService.expandedStateChange.subscribe((state) => {
+            this.zone.run(() => {
+                const isCol = state.tableType === 'columnHeader';
+                const axes = isCol ? 'columnAxes' : 'rowAxes';
+                // Converts current rows state to a tree-like structure (using the PivotGrid Common pkg)
+                const tree = toTree((isCol ? this.dataService.columns : this.dataService.rows || []).slice());
+                this.updateHeaders(axes, tree, state.cell.path);
+            });
+        }));
+        this.subs.add(this.dataService.configuratorFieldChange.subscribe((state) => {
+            this.zone.run(() => {
+                if (hasObservers(this.configurationChange)) {
+                    const event = new ConfigurationChangeEvent(state);
+                    this.configurationChange.emit(event);
+                    if (event.isDefaultPrevented()) {
+                        return;
+                    }
+                }
+                this.dataService.configuredFields.next(this.dataService.state);
+                this.loadData(state);
+                this.dataService.state = state;
+            });
+        }));
+        this.subs.add(this.dataService.valuesRows.subscribe((data) => {
+            this.zone.run(() => {
+                this.dataService.aggregateData = data;
+                this.dataLoaded.emit(data);
+            });
+        }));
+        this.dataService.directive = this;
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    updateDataServiceFields() {
+        this.dataService.normalizedData = this.dataState.data;
+        this.dataService.rows = this.dataState.rows;
+        this.dataService.columns = this.dataState.columns;
+        this.dataService.updateRowsAndCols();
+    }
+    updateConfiguratorFields() {
+        this.dataService.fields.next(this.configuratorFields);
+        this.dataService.configuredFields.next(this.dataService.state);
+    }
+    updateHeaders(axes, tree, path) {
+        // Action to determine expand/collapse state
+        const action = {
+            type: HEADERS_ACTION.toggle,
+            payload: path
+        };
+        // The `headersReducer` method is responsible for udpating
+        // the expanded state based on the toggle action (expand/collapse)
+        // Update axes and reload data
+        const newHeaders = headersReducer(this[axes].slice(), { ...action, tree });
+        const newState = { ...this.dataService.state, ...{ [axes]: newHeaders } };
+        this.dataService.state = newState;
+        if (hasObservers(this.expandChange)) {
+            const event = new ExpandChangeEvent(newState);
+            this.expandChange.emit(event);
+            if (event.isDefaultPrevented()) {
+                return;
+            }
+        }
+        this.dataService.configuredFields.next(this.dataService.state);
+        this[axes] = newHeaders;
+        this.loadData(this.dataService.state);
+    }
+    ;
+}
+PivotBaseBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotBaseBindingDirective, deps: [{ token: PivotGridDataService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+PivotBaseBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: PivotBaseBindingDirective, selector: "kendo-base-binding-directive", inputs: { columnAxes: "columnAxes", rowAxes: "rowAxes", measureAxes: "measureAxes", sort: "sort", filter: "filter" }, outputs: { expandChange: "expandChange", configurationChange: "configurationChange", dataLoaded: "dataLoaded" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotBaseBindingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-base-binding-directive'
+                }]
+        }], ctorParameters: function () { return [{ type: PivotGridDataService }, { type: i0.NgZone }]; }, propDecorators: { columnAxes: [{
+                type: Input
+            }], rowAxes: [{
+                type: Input
+            }], measureAxes: [{
+                type: Input
+            }], sort: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], expandChange: [{
+                type: Output
+            }], configurationChange: [{
+                type: Output
+            }], dataLoaded: [{
+                type: Output
+            }] } });
+
+const dataField = 'aggregate';
+const columnsData = 'columns';
+const bindingFields = { dataField, columnsData };
+const stringSeparator = '&';
+/**
+ * A directive which binds the PivotGrid to local data ([see example]({% slug directives_databinding_local_pivotgrid %})).
+ */
+class PivotLocalBindingDirective extends PivotBaseBindingDirective {
+    constructor(dataService, zone) {
+        super(dataService, zone);
+        this.type = 'local';
+        this.createAxisSettings = (key) => ({ key, ...this.dimensions[key] });
+    }
+    ngOnChanges(changes) {
+        if (anyChanged(['data', 'dimensions', 'columnAxes', 'rowAxes', 'measureAxes', 'measures'], changes)) {
+            this.loadData(this.dataService.state);
+        }
+    }
+    /**
+     * @hidden
+     */
+    fetchChildren(node) {
+        return node.children;
+    }
+    loadFields() {
+        this.configuratorFields = createFlatSchemaDimensions(this.dimensions, this.measures);
+        this.updateConfiguratorFields();
+    }
+    loadData(state) {
+        const { columnAxes, rowAxes, measureAxes, sort, filter } = state;
+        const rootColumnAxes = this.getRootAxes(columnAxes);
+        const rootRowAxes = this.getRootAxes(rowAxes);
+        const columnSettings = rootColumnAxes.split(stringSeparator).map(this.createAxisSettings);
+        const rowSettings = rootRowAxes.split(stringSeparator).map(this.createAxisSettings);
+        const measuresSettings = measureAxes.map(m => this.measures.find(meas => String(meas.name) === String(m.name))).filter(Boolean);
+        const dataTree = createDataTree(this.data, rowSettings, columnSettings, measuresSettings, bindingFields, filter);
+        this.dataState = createLocalDataState({
+            dataTree,
+            rowSettings,
+            columnSettings,
+            rowAxes: rowAxes,
+            columnAxes: columnAxes,
+            measures: measuresSettings,
+            sort: sort,
+            fields: bindingFields
+        });
+        this.updateDataServiceFields();
+    }
+    getRootAxes(axes) {
+        return Array.from(rootFields(axes).keys()).join(stringSeparator);
+    }
+}
+PivotLocalBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotLocalBindingDirective, deps: [{ token: PivotGridDataService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+PivotLocalBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: PivotLocalBindingDirective, selector: "[kendoPivotLocalBinding]", inputs: { data: ["kendoPivotLocalBinding", "data"], dimensions: "dimensions", measures: "measures" }, exportAs: ["kendoPivotLocalBinding"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotLocalBindingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoPivotLocalBinding]',
+                    exportAs: 'kendoPivotLocalBinding'
+                }]
+        }], ctorParameters: function () { return [{ type: PivotGridDataService }, { type: i0.NgZone }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['kendoPivotLocalBinding']
+            }], dimensions: [{
+                type: Input
+            }], measures: [{
+                type: Input
+            }] } });
+
+/**
+ * A directive which binds the PivotGrid to data using an Online Analytical Processing (OLAP) service ([see example]({% slug directives_databinding_remote_pivotgrid %})).
+ */
+class PivotOLAPBindingDirective extends PivotBaseBindingDirective {
+    constructor(dataService, zone) {
+        super(dataService, zone);
+        this.type = 'olap';
+    }
+    ngOnChanges(changes) {
+        if (anyChanged(['url', 'cube', 'catalog', 'columnAxes', 'rowAxes', 'measureAxes'], changes)) {
+            this.loadData(this.dataService.state);
+            this.loadFields();
+        }
+    }
+    loadData(state) {
+        const { columnAxes, rowAxes, measureAxes, sort, filter } = state;
+        this.dataService.loading.next(true);
+        const options = {
+            connection: {
+                catalog: this.catalog,
+                cube: this.cube
+            },
+            columnAxes,
+            rowAxes,
+            measureAxes,
+            sort,
+            filter
+        };
+        fetchData({ url: this.url }, clone(options))
+            .then(createDataState)
+            .then(newDataState => {
+            this.dataState = newDataState;
+            this.updateDataServiceFields();
+            this.dataService.loading.next(false);
+        });
+    }
+    loadFields() {
+        const options = {
+            connection: {
+                catalog: this.catalog,
+                cube: this.cube
+            },
+            restrictions: {
+                catalogName: this.catalog,
+                cubeName: this.cube
+            },
+            command: 'schemaDimensions'
+        };
+        fetchDiscover({ url: this.url }, options)
+            .then((newFields) => {
+            addKPI(newFields);
+            this.configuratorFields = newFields;
+            this.updateConfiguratorFields();
+        });
+    }
+    async updateFields(event, fields) {
+        const newFields = fields.slice();
+        const field = this.getField(newFields, event);
+        if (field && field.uniqueName === '[KPIs]') {
+            const KPIs = this.normalizeKPIs(await this.loadKPIs());
+            field.children = KPIs;
+        }
+        else if (field && field.type === 'kpi') {
+            field.children = buildKPIMeasures(field);
+        }
+        else if (field && !field.children) {
+            const additionalFields = await this.loadAvailableFields(field);
+            field.children = additionalFields;
+        }
+        return field?.children;
+    }
+    /**
+     * @hidden
+     */
+    fetchChildren(event, fields) {
+        return this.updateFields(event, fields);
+    }
+    normalizeKPIs(data) {
+        for (let idx = 0, length = data.length; idx < length; idx++) {
+            data[idx].uniqueName = data[idx].name;
+            data[idx].type = 'kpi';
+        }
+        return data;
+    }
+    ;
+    getField(nodes = [], target) {
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            if (node.uniqueName === target.uniqueName) {
+                return node;
+            }
+            const result = this.getField(node.children, target);
+            if (result !== null) {
+                return result;
+            }
+        }
+        return null;
+    }
+    ;
+    async loadKPIs() {
+        const options = {
+            connection: {
+                catalog: this.catalog,
+                cube: this.cube
+            },
+            restrictions: {
+                catalogName: this.catalog,
+                cubeName: this.cube
+            },
+            command: 'schemaKPIs'
+        };
+        return fetchDiscover({ url: this.url }, options);
+    }
+    ;
+    async loadAvailableFields(field) {
+        let command;
+        let dimensionUniqueName;
+        let hierarchyUniqueName;
+        let levelUniqueName;
+        let memberUniqueName;
+        let treeOp;
+        if (field.type === 2) {
+            command = 'schemaMeasures';
+        }
+        else if (field.dimensionUniqueName) {
+            command = 'schemaLevels';
+            hierarchyUniqueName = field.uniqueName;
+        }
+        else {
+            command = 'schemaHierarchies';
+            dimensionUniqueName = field.uniqueName;
+        }
+        const options = {
+            connection: {
+                catalog: this.catalog,
+                cube: this.cube
+            },
+            restrictions: {
+                catalogName: this.catalog,
+                cubeName: this.cube,
+                hierarchyUniqueName,
+                dimensionUniqueName,
+                levelUniqueName,
+                memberUniqueName,
+                treeOp
+            },
+            command
+        };
+        return fetchDiscover({ url: this.url }, options);
+    }
+    ;
+}
+PivotOLAPBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotOLAPBindingDirective, deps: [{ token: PivotGridDataService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+PivotOLAPBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: PivotOLAPBindingDirective, selector: "[kendoPivotOLAPBinding]", inputs: { url: "url", cube: "cube", catalog: "catalog" }, exportAs: ["kendoPivotOLAPBinding"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotOLAPBindingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoPivotOLAPBinding]',
+                    exportAs: 'kendoPivotOLAPBinding'
+                }]
+        }], ctorParameters: function () { return [{ type: PivotGridDataService }, { type: i0.NgZone }]; }, propDecorators: { url: [{
+                type: Input
+            }], cube: [{
+                type: Input
+            }], catalog: [{
+                type: Input
+            }] } });
+
+/**
+ * Custom component messages override default component messages
+ * ([see example]({% slug globalization_pivotgrid %}#toc-custom-messages)).
+ */
+class CustomMessagesComponent extends PivotGridMessages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+}
+CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CustomMessagesComponent, selector: "kendo-pivotgrid-messages", providers: [
+        {
+            provide: PivotGridMessages,
+            useExisting: forwardRef(() => CustomMessagesComponent)
+        }
+    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: PivotGridMessages,
+                            useExisting: forwardRef(() => CustomMessagesComponent)
+                        }
+                    ],
+                    selector: 'kendo-pivotgrid-messages',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
+const MODULES = [
+    CommonModule,
+    DropDownsModule,
+    InputsModule,
+    ButtonsModule
+];
+/**
+ * @hidden
+ */
+class SharedModule {
+}
+SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, imports: [CommonModule,
+        DropDownsModule,
+        InputsModule,
+        ButtonsModule], exports: [CommonModule,
+        DropDownsModule,
+        InputsModule,
+        ButtonsModule] });
+SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, imports: [[MODULES], CommonModule,
+        DropDownsModule,
+        InputsModule,
+        ButtonsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [MODULES],
+                    exports: [MODULES]
+                }]
+        }] });
+
+const COMPONENTS = [
+    ChipMenuItemComponent,
+    ChipMenuSortComponent,
+    ChipMenuComponent,
+    ChipMenuFilterComponent,
+    ChipMenuItemContentTemplateDirective,
+    FilterMenuContainerComponent,
+    StringFilterMenuComponent,
+    FilterMenuDropDownListDirective,
+    ChipMenuContainerComponent,
+    ChipMenuItemDirective
+];
+/**
+ * @hidden
+ */
+class ChipMenuModule {
+    static exports() {
+        return [
+            ChipMenuItemComponent,
+            ChipMenuSortComponent,
+            ChipMenuContainerComponent,
+            ChipMenuItemDirective,
+            ChipMenuComponent
+        ];
+    }
+}
+ChipMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ChipMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuModule, declarations: [ChipMenuItemComponent,
+        ChipMenuSortComponent,
+        ChipMenuComponent,
+        ChipMenuFilterComponent,
+        ChipMenuItemContentTemplateDirective,
+        FilterMenuContainerComponent,
+        StringFilterMenuComponent,
+        FilterMenuDropDownListDirective,
+        ChipMenuContainerComponent,
+        ChipMenuItemDirective], imports: [SharedModule,
+        ReactiveFormsModule,
+        FormsModule], exports: [ChipMenuItemComponent,
+        ChipMenuSortComponent,
+        ChipMenuComponent,
+        ChipMenuFilterComponent,
+        ChipMenuItemContentTemplateDirective,
+        FilterMenuContainerComponent,
+        StringFilterMenuComponent,
+        FilterMenuDropDownListDirective,
+        ChipMenuContainerComponent,
+        ChipMenuItemDirective] });
+ChipMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuModule, imports: [[
+            SharedModule,
+            ReactiveFormsModule,
+            FormsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [COMPONENTS],
+                    imports: [
+                        SharedModule,
+                        ReactiveFormsModule,
+                        FormsModule
+                    ],
+                    exports: [COMPONENTS]
+                }]
+        }] });
+
+const IMPORTED_MODULES = [
+    EventsModule,
+    IndicatorsModule,
+    TreeViewModule,
+    DraggableModule,
+    ChipMenuModule,
+    SharedModule
+];
+const DECLARATIONS = [
+    PivotGridComponent,
+    PivotGridTableComponent,
+    PivotGridConfiguratorComponent,
+    PivotGridCellDirective,
+    PivotLocalBindingDirective,
+    PivotOLAPBindingDirective,
+    DraggableChipDirective,
+    DropTargetDirective,
+    LocalizedMessagesDirective,
+    CustomMessagesComponent,
+    ChipKeyboardNavigationDirective
+];
+const EXPORTS = [
+    PivotGridComponent,
+    PivotGridTableComponent,
+    PivotGridCellDirective,
+    PivotLocalBindingDirective,
+    PivotOLAPBindingDirective,
+    CustomMessagesComponent
+];
+/**
+ * Sample module
+ */
+class PivotGridModule {
+}
+PivotGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PivotGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridModule, declarations: [PivotGridComponent,
+        PivotGridTableComponent,
+        PivotGridConfiguratorComponent,
+        PivotGridCellDirective,
+        PivotLocalBindingDirective,
+        PivotOLAPBindingDirective,
+        DraggableChipDirective,
+        DropTargetDirective,
+        LocalizedMessagesDirective,
+        CustomMessagesComponent,
+        ChipKeyboardNavigationDirective], imports: [EventsModule,
+        IndicatorsModule,
+        TreeViewModule,
+        DraggableModule,
+        ChipMenuModule,
+        SharedModule], exports: [PivotGridComponent,
+        PivotGridTableComponent,
+        PivotGridCellDirective,
+        PivotLocalBindingDirective,
+        PivotOLAPBindingDirective,
+        CustomMessagesComponent] });
+PivotGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridModule, imports: [[...IMPORTED_MODULES]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PivotGridModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...IMPORTED_MODULES],
+                    declarations: [...DECLARATIONS],
+                    exports: [...EXPORTS]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ConfigurationChangeEvent, CustomMessagesComponent, DraggableChipDirective, DropTargetDirective, ExpandChangeEvent, PivotGridCellDirective, PivotGridComponent, PivotGridConfiguratorComponent, PivotGridModule, PivotGridTableComponent, PivotLocalBindingDirective, PivotOLAPBindingDirective };
+