@progress/kendo-angular-pivotgrid 0.2.0-dev.202208181233 → 0.2.0-dev.202208250747

package/fesm2015/kendo-angular-pivotgrid.js

@@ -3,19 +3,27 @@
 * 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, ElementRef, ViewChild, Directive, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, Output, Component, HostBinding, Input, Directive, Optional, forwardRef, ElementRef, ViewChild, NgModule } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
-import * as i2$1 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, anyChanged, EventsModule } from '@progress/kendo-angular-common';
-import { toTree, toRows, toColumns, toData, HEADERS_ACTION, headersReducer, createDataTree, createLocalDataState, rootFields, fetchData, createDataState } from '@progress/kendo-pivotgrid-common';
+import * as i3 from '@progress/kendo-angular-common';
+import { isDocumentAvailable, PreventableEvent, hasObservers, anyChanged, EventsModule, DraggableModule } from '@progress/kendo-angular-common';
+import { toTree, toRows, toColumns, toData, configuratorReducer, PIVOT_CONFIGURATOR_ACTION, 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, fromEvent } from 'rxjs';
-import { merge } from 'rxjs/operators';
-import * as i2 from '@angular/common';
+import { BehaviorSubject, Subscription, from, of, fromEvent } from 'rxjs';
+import { mergeMap, merge } from 'rxjs/operators';
+import * as i2 from '@progress/kendo-angular-l10n';
+import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4 from '@progress/kendo-angular-indicators';
+import * as i5$1 from '@progress/kendo-angular-indicators';
 import { IndicatorsModule } from '@progress/kendo-angular-indicators';
-import { L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import * as i4 from '@progress/kendo-angular-treeview';
+import { TreeViewModule } from '@progress/kendo-angular-treeview';
+import * as i5 from '@progress/kendo-angular-buttons';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import * as i7 from '@progress/kendo-angular-inputs';
+import { InputsModule } from '@progress/kendo-angular-inputs';
+import { __awaiter } from 'tslib';
 
 /**
  * @hidden
@@ -24,7 +32,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-pivotgrid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1660825955,
+    publishDate: 1661413588,
     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'
 };
@@ -91,6 +99,54 @@ const syncWheel = (event, tables, prop, axis) => {
             tables[1][prop] += delta;
     }
 };
+/**
+ * @hidden
+ */
+function cloneTo(obj, result) {
+    for (let field in obj) {
+        if (obj.hasOwnProperty(field)) {
+            const value = obj[field];
+            if (Array.isArray(value)) {
+                result[field] = value.slice(0);
+            }
+            else if (value && typeof value === 'object' && !(value instanceof Date)) {
+                result[field] = result[field] || {};
+                cloneTo(value, result[field]);
+            }
+            else {
+                result[field] = value;
+            }
+        }
+    }
+}
+/**
+ * @hidden
+ */
+function clone(obj) {
+    const result = {};
+    cloneTo(obj, result);
+    return result;
+}
+/**
+ * @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
  */
@@ -114,6 +170,17 @@ const matchAriaAttributes = (wrapper) => {
         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;
+    const height = offsetHeight;
+    return { left, top, height };
+};
 /**
  * @hidden
  */
@@ -130,12 +197,16 @@ 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() {
@@ -165,6 +236,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { expandedStateChange: [{
                 type: Output
+            }], configuratorFieldChange: [{
+                type: Output
+            }], expandedFieldChange: [{
+                type: Output
             }] } });
 
 /**
@@ -220,7 +295,7 @@ PivotGridCellDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             [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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+            }"></span>{{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}`, isInline: true, directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridCellDirective, decorators: [{
             type: Component,
             args: [{
@@ -309,7 +384,7 @@ PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </tr>
             </tbody>
         </table>
-    `, isInline: true, components: [{ type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: ["kendoPivotGridCell", "tableType", "rowIndex", "colIndex"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: ["kendoPivotGridCell", "tableType", "rowIndex", "colIndex"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridTableComponent, decorators: [{
             type: Component,
             args: [{
@@ -357,19 +432,849 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
+/**
+ * @hidden
+ */
+class ConfiguratorService {
+    constructor() {
+        this.configuratorStateChange = new EventEmitter();
+    }
+    parseConfiguratorState(action) {
+        const newState = configuratorReducer({
+            filter: [],
+            sort: [],
+            rowAxes: this.state.rowAxes,
+            columnAxes: this.state.columnAxes,
+            measureAxes: this.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 = Object.assign(Object.assign({}, this.state), newState);
+        this.configuratorStateChange.emit(this.state);
+    }
+}
+ConfiguratorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfiguratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ConfiguratorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfiguratorService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfiguratorService, decorators: [{
+            type: Injectable
+        }], propDecorators: { configuratorStateChange: [{
+                type: Output
+            }] } });
+
+/**
+ * @hidden
+ */
+const append = (element) => {
+    let appended = false;
+    return () => {
+        if (!appended) {
+            document.body.appendChild(element);
+            appended = true;
+        }
+        return element;
+    };
+};
+/**
+ * @hidden
+ */
+class DropCueService {
+    create() {
+        this.dom = document.createElement('span');
+        this.dom.style.position = 'absolute';
+        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() {
+        return append(this.dom)();
+    }
+    remove() {
+        if (this.dom && this.dom.parentElement) {
+            document.body.removeChild(this.dom);
+            this.dom = null;
+        }
+    }
+    hide() {
+        this.dom.style.display = "none";
+    }
+    position({ left, top, height }) {
+        this.dom.style.display = 'block';
+        this.dom.style.height = height + 'px';
+        this.dom.style.top = top + 'px';
+        this.dom.style.zIndex = '1000';
+        const width = this.dom.offsetWidth / 2;
+        this.dom.style.left = left - width + 'px';
+    }
+}
+DropCueService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropCueService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DropCueService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropCueService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropCueService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @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 = element.nodeName === 'KENDO-CHIP' ? 'chip' : 'container';
+        this.zone.runOutsideAngular(() => {
+            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) {
+        if (this.configuratorService.state.dragItem) {
+            if (this.elementType === 'chip') {
+                this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropTarget, payload: this.item });
+                this.targetElement = event.target;
+                this.cue.position(position(event.target, this.configuratorService.state.dropDirection === 'before'));
+            }
+            this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropZone, payload: this.axes });
+        }
+    }
+    handleMouseMove($event) {
+        if (this.configuratorService.state.dragItem) {
+            if (this.elementType !== 'chip') {
+                return;
+            }
+            if (this.element.nativeElement) {
+                const rect = this.element.nativeElement.getBoundingClientRect();
+                const x = $event.clientX - rect.left;
+                const direction = x < rect.width / 2 ? 'before' : 'after';
+                if ((direction !== this.configuratorService.state.dropDirection) && this.targetElement) {
+                    this.cue.position(position(this.targetElement, direction === 'before'));
+                }
+                this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropDirection, payload: direction });
+            }
+        }
+    }
+    handleMouseLeave() {
+        if (this.elementType === 'chip') {
+            return;
+        }
+        if (this.configuratorService.state.dragItem) {
+            this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropZone, payload: null });
+        }
+    }
+}
+DropTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: { item: "item", axes: "axes" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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) {
+        this.draggable = draggable;
+        this.element = element;
+        this.zone = zone;
+        this.service = service;
+        this.cue = cue;
+        this.touchActions = 'none';
+        this.initialX = {};
+        this.initialY = {};
+        this.subs = new Subscription();
+    }
+    get pointerEvents() {
+        return this.drag ? 'none' : undefined;
+    }
+    ngOnInit() {
+        this.zone.runOutsideAngular(() => this.subs.add(this.draggable.kendoPress
+            .subscribe((event) => {
+            if (isDocumentAvailable()) {
+                this.cue.create();
+                this.cue.attach();
+                this.initialX.current = event.clientX;
+                this.initialY.current = event.clientY;
+            }
+        })));
+        this.zone.runOutsideAngular(() => this.subs.add(this.draggable.kendoDrag
+            .subscribe((event) => {
+            if (isDocumentAvailable()) {
+                if (Math.abs(this.initialX.current - event.clientX) < 10 &&
+                    Math.abs(this.initialY.current - event.clientY) < 10) {
+                    return;
+                }
+                if (this.element.nativeElement) {
+                    this.element.nativeElement.style.transform = `translate(${event.clientX - this.initialX.current}px, ${event.clientY - this.initialY.current}px)`;
+                }
+            }
+            this.drag = true;
+            this.service.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDragItem, payload: this.item });
+        })));
+        this.zone.runOutsideAngular(() => this.subs.add(this.draggable.kendoRelease
+            .subscribe(() => {
+            this.drag = false;
+            if (this.service.state.dragItem) {
+                if (isDocumentAvailable()) {
+                    if (this.element.nativeElement) {
+                        this.element.nativeElement.style.transform = '';
+                    }
+                    this.cue.remove();
+                }
+                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;
+            }
+        })));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+}
+DraggableChipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DraggableChipDirective, deps: [{ token: i3.DraggableDirective, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: ConfiguratorService }, { token: DropCueService }], target: i0.ɵɵFactoryTarget.Directive });
+DraggableChipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", 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 }]; }, propDecorators: { pointerEvents: [{
+                type: HostBinding,
+                args: ['style.pointerEvents']
+            }], touchActions: [{
+                type: HostBinding,
+                args: ['style.touch-action']
+            }], item: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ * Represents the Kendo UI PivotGrid Configurator component for Angular.
+ */
+class PivotGridConfiguratorComponent {
+    constructor(dataService, localization, configuratorService, cdr) {
+        this.dataService = dataService;
+        this.localization = localization;
+        this.configuratorService = configuratorService;
+        this.cdr = cdr;
+        this.hostClass = true;
+        this.horizontal = false;
+        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);
+        };
+    }
+    ngOnInit() {
+        this.subs.add(this.dataService.fields
+            .subscribe(res => {
+            this.fields = res;
+        }));
+        this.subs.add(this.dataService.configuredFields
+            .subscribe(res => {
+            this.originalState = clone(res);
+            this.setState(clone(res));
+            this.setChecked();
+        }));
+        this.subs.add(this.configuratorService.configuratorStateChange
+            .subscribe(res => {
+            this.state = res;
+            this.cdr.detectChanges();
+        }));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    getName(name) {
+        return name.toString();
+    }
+    setState(state) {
+        this.state = state;
+        this.configuratorService.state = state;
+    }
+    /**
+     * 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.state.columnAxes);
+    }
+    ;
+    /**
+     * Retrieves the 'Rows' section item names
+     */
+    get rowHierarchies() {
+        return this.extractDefaultFields(this.state.rowAxes);
+    }
+    ;
+    /**
+     * Retrieves the 'Value' section item names
+     */
+    get measureHierarchies() {
+        return this.extractDefaultFields(this.state.measureAxes);
+    }
+    ;
+    /**
+     * 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) {
+        var _a, _b;
+        const res = this.checked.some(s => node.defaultHierarchy
+            ? s.defaultHierarchy === node.defaultHierarchy
+            : s.uniqueName === node.uniqueName)
+            || (((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) && ((_b = node.children) === null || _b === void 0 ? void 0 : _b.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 !Boolean((!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);
+    }
+    handleSubmit() {
+        this.dataService.configuratorFieldChange.emit(this.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);
+    }
+    ;
+}
+PivotGridConfiguratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridConfiguratorComponent, deps: [{ token: PivotGridDataService }, { token: i2.LocalizationService }, { token: ConfiguratorService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: { horizontal: "horizontal" }, host: { properties: { "class.k-pivotgrid-configurator": "this.hostClass" } }, providers: [
+        ConfiguratorService,
+        DropCueService
+    ], ngImport: i0, template: `
+        <div 
+            class="k-pivotgrid-configurator-panel k-pivotgrid-configurator-push"
+            [ngClass]="{
+                'k-pivotgrid-configurator-horizontal': horizontal,
+                'k-pivotgrid-configurator-vertical': !horizontal
+            }"
+        >
+            <div class="k-pivotgrid-configurator-header">
+                <div class="k-pivotgrid-configurator-header-text">{{messageFor('configuratorHeaderText')}}</div>
+            </div>
+
+            <div class="k-pivotgrid-configurator-content">
+                <div class="k-form" [class.k-form-horizontal]="horizontal">
+                    <div class="k-form-field-wrapper">
+                        <div class="k-form-field">
+                            <span class="k-label">{{messageFor('configuratorFieldsText')}}</span>
+                        </div>
+
+                        <div class="k-form-field">
+                            <div class="k-fields-list-wrapper">
+                                <kendo-treeview
+                                    [nodes]="fields"
+                                    textField="caption"
+                                    [children]="children"
+                                    [hasChildren]="hasChildren"
+                                    kendoTreeViewExpandable
+                                    (childrenLoaded)="handleChildrenLoaded($event)"
+                                >
+                                <ng-template kendoTreeViewNodeTemplate let-dataItem>
+                                    <input kendoCheckBox
+                                        *ngIf="isSelectable(dataItem)"
+                                        type="checkbox" 
+                                        kendoCheckBox
+                                        [checked]="isItemChecked(dataItem)"
+                                        (change)="handleCheckedChange($event, dataItem)"/>
+                                    {{ dataItem.caption }}
+                                </ng-template>
+                                </kendo-treeview>
+
+                            </div>
+                        </div>
+                    </div>
+
+                    <div *ngIf="horizontal; else verticalTemplate" class="k-form-field-wrapper">
+                        <ng-container *ngTemplateOutlet="verticalTemplate"></ng-container>
+                    </div>
+
+                    <ng-template #verticalTemplate>
+                        <div class="k-form-field" kendoDropTarget axes="columnAxes">
+                            <span class="k-label">{{messageFor('configuratorColumnsText')}}</span>
+                        </div>
+
+                        <kendo-chiplist
+                            *ngIf="state.columnAxes && state.columnAxes.length; else noColumnAxes"
+                            kendoDropTarget
+                            axes="columnAxes"
+                        >
+                            <kendo-chip *ngFor="let item of state.columnAxes"
+                                kendoChipDraggable
+                                kendoDraggable
+                                kendoDropTarget
+                                [item]="item"
+                                axes="columnAxes"
+                                rounded="full"
+                                [removable]="true"
+                            >
+                                {{ getName(item.name) }}
+                            </kendo-chip>
+                        </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">
+                            <span class="k-label">{{messageFor('configuratorRowsText')}}</span>
+                        </div>
+
+                        <kendo-chiplist
+                            *ngIf="state.rowAxes && state.rowAxes.length; else noRowAxes"
+                            kendoDropTarget
+                            axes="rowAxes"
+                        >
+                            <kendo-chip *ngFor="let item of state.rowAxes"
+                                kendoChipDraggable
+                                kendoDraggable
+                                kendoDropTarget
+                                [item]="item"
+                                axes="rowAxes"
+                                rounded="full"
+                                [removable]="true"
+                            >
+                                {{ getName(item.name) }}
+                            </kendo-chip>
+                        </kendo-chiplist>
+
+                        <ng-template #noRowAxes>
+                            <div class="k-settings-description" kendoDropTarget axes="rowAxes">{{messageFor('configuratorEmptyRowsText')}}</div>
+                        </ng-template>
+                    </ng-template>
+
+                    <div *ngIf="horizontal; else elseTpl2" class="k-form-field-wrapper">
+                        <ng-container *ngTemplateOutlet="elseTpl2"></ng-container>
+                    </div>
+
+                    <ng-template #elseTpl2>
+                        <div class="k-form-field" kendoDropTarget axes="measureAxes">
+                            <span class="k-label">{{messageFor('configuratorValuesText')}}</span>
+                        </div>
+
+                        <kendo-chiplist
+                            *ngIf="state.measureAxes && state.measureAxes.length; else noMeasureAxes"
+                            kendoDropTarget
+                            axes="measureAxes"
+                        >
+                        <kendo-chip *ngFor="let item of state.measureAxes"
+                            kendoChipDraggable
+                            kendoDraggable
+                            kendoDropTarget
+                            [item]="item"
+                            axes="measureAxes"
+                            
+                            rounded="full"
+                            [removable]="true"
+                            >
+                            {{ 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", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i4.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { type: i6.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: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-pivotgrid-configurator',
+                    providers: [
+                        ConfiguratorService,
+                        DropCueService
+                    ],
+                    template: `
+        <div 
+            class="k-pivotgrid-configurator-panel k-pivotgrid-configurator-push"
+            [ngClass]="{
+                'k-pivotgrid-configurator-horizontal': horizontal,
+                'k-pivotgrid-configurator-vertical': !horizontal
+            }"
+        >
+            <div class="k-pivotgrid-configurator-header">
+                <div class="k-pivotgrid-configurator-header-text">{{messageFor('configuratorHeaderText')}}</div>
+            </div>
+
+            <div class="k-pivotgrid-configurator-content">
+                <div class="k-form" [class.k-form-horizontal]="horizontal">
+                    <div class="k-form-field-wrapper">
+                        <div class="k-form-field">
+                            <span class="k-label">{{messageFor('configuratorFieldsText')}}</span>
+                        </div>
+
+                        <div class="k-form-field">
+                            <div class="k-fields-list-wrapper">
+                                <kendo-treeview
+                                    [nodes]="fields"
+                                    textField="caption"
+                                    [children]="children"
+                                    [hasChildren]="hasChildren"
+                                    kendoTreeViewExpandable
+                                    (childrenLoaded)="handleChildrenLoaded($event)"
+                                >
+                                <ng-template kendoTreeViewNodeTemplate let-dataItem>
+                                    <input kendoCheckBox
+                                        *ngIf="isSelectable(dataItem)"
+                                        type="checkbox" 
+                                        kendoCheckBox
+                                        [checked]="isItemChecked(dataItem)"
+                                        (change)="handleCheckedChange($event, dataItem)"/>
+                                    {{ dataItem.caption }}
+                                </ng-template>
+                                </kendo-treeview>
+
+                            </div>
+                        </div>
+                    </div>
+
+                    <div *ngIf="horizontal; else verticalTemplate" class="k-form-field-wrapper">
+                        <ng-container *ngTemplateOutlet="verticalTemplate"></ng-container>
+                    </div>
+
+                    <ng-template #verticalTemplate>
+                        <div class="k-form-field" kendoDropTarget axes="columnAxes">
+                            <span class="k-label">{{messageFor('configuratorColumnsText')}}</span>
+                        </div>
+
+                        <kendo-chiplist
+                            *ngIf="state.columnAxes && state.columnAxes.length; else noColumnAxes"
+                            kendoDropTarget
+                            axes="columnAxes"
+                        >
+                            <kendo-chip *ngFor="let item of state.columnAxes"
+                                kendoChipDraggable
+                                kendoDraggable
+                                kendoDropTarget
+                                [item]="item"
+                                axes="columnAxes"
+                                rounded="full"
+                                [removable]="true"
+                            >
+                                {{ getName(item.name) }}
+                            </kendo-chip>
+                        </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">
+                            <span class="k-label">{{messageFor('configuratorRowsText')}}</span>
+                        </div>
+
+                        <kendo-chiplist
+                            *ngIf="state.rowAxes && state.rowAxes.length; else noRowAxes"
+                            kendoDropTarget
+                            axes="rowAxes"
+                        >
+                            <kendo-chip *ngFor="let item of state.rowAxes"
+                                kendoChipDraggable
+                                kendoDraggable
+                                kendoDropTarget
+                                [item]="item"
+                                axes="rowAxes"
+                                rounded="full"
+                                [removable]="true"
+                            >
+                                {{ getName(item.name) }}
+                            </kendo-chip>
+                        </kendo-chiplist>
+
+                        <ng-template #noRowAxes>
+                            <div class="k-settings-description" kendoDropTarget axes="rowAxes">{{messageFor('configuratorEmptyRowsText')}}</div>
+                        </ng-template>
+                    </ng-template>
+
+                    <div *ngIf="horizontal; else elseTpl2" class="k-form-field-wrapper">
+                        <ng-container *ngTemplateOutlet="elseTpl2"></ng-container>
+                    </div>
+
+                    <ng-template #elseTpl2>
+                        <div class="k-form-field" kendoDropTarget axes="measureAxes">
+                            <span class="k-label">{{messageFor('configuratorValuesText')}}</span>
+                        </div>
+
+                        <kendo-chiplist
+                            *ngIf="state.measureAxes && state.measureAxes.length; else noMeasureAxes"
+                            kendoDropTarget
+                            axes="measureAxes"
+                        >
+                        <kendo-chip *ngFor="let item of state.measureAxes"
+                            kendoChipDraggable
+                            kendoDraggable
+                            kendoDropTarget
+                            [item]="item"
+                            axes="measureAxes"
+                            
+                            rounded="full"
+                            [removable]="true"
+                            >
+                            {{ 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: i2.LocalizationService }, { type: ConfiguratorService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-pivotgrid-configurator']
+            }], horizontal: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class PivotGridMessages extends ComponentMessages {
+}
+PivotGridMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+PivotGridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", 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" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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
+            }] } });
+
+/**
+ * @hidden
+ */
+class LocalizedMessagesDirective extends PivotGridMessages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+}
+LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]", providers: [
+        {
+            provide: PivotGridMessages,
+            useExisting: forwardRef(() => LocalizedMessagesDirective)
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: PivotGridMessages,
+                            useExisting: forwardRef(() => LocalizedMessagesDirective)
+                        }
+                    ],
+                    selector: '[kendoPivotGridLocalizedMessages]'
+                }]
+        }], ctorParameters: function () { return [{ type: i2.LocalizationService }]; } });
+
 const DEFAULT_LOADER_SETTINGS = {
     type: 'converging-spinner',
     themeColor: 'primary',
     size: 'large'
 };
+const DEFAULT_CONFIGURATOR_SETTINGS = {
+    position: 'right',
+    horizontal: false
+};
 /**
  * Represents the Kendo UI PivotGrid component for Angular.
  */
 class PivotGridComponent {
-    constructor(hostEl, zone, dataService, _scrollbarWidthService) {
-        this.hostEl = hostEl;
+    constructor(hostEl, zone, dataService, localization, _scrollbarWidthService) {
         this.zone = zone;
         this.dataService = dataService;
+        this.localization = localization;
         this.hostClass = true;
         this.ariaRole = 'grid';
         /**
@@ -381,12 +1286,13 @@ class PivotGridComponent {
         this.resizeObservers = [];
         this._loaderSettings = DEFAULT_LOADER_SETTINGS;
         this.subs = new Subscription();
+        this.rtl = false;
         this.resizeContainer = (axis, element) => {
             const isRows = axis === 'Rows';
-            const wrapper = this.hostEl.nativeElement;
+            const table = this.table.nativeElement;
             const size = isRows ? 'offsetHeight' : 'offsetWidth';
-            wrapper.style[`gridTemplate${axis}`] = '';
-            wrapper.style[`gridTemplate${axis}`] = `${element[size]}px 1fr`;
+            table.style[`gridTemplate${axis}`] = '';
+            table.style[`gridTemplate${axis}`] = `${element[size]}px 1fr`;
         };
         this.handleScroll = (event) => {
             if (event.target === this.valuesTable.nativeElement) {
@@ -403,8 +1309,31 @@ class PivotGridComponent {
             }
         };
         validatePackage(packageMetadata);
+        this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.direction = this.rtl ? 'rtl' : 'ltr';
+        }));
         dataService.wrapper = hostEl.nativeElement;
     }
+    get rightPositionClass() {
+        var _a;
+        return ((_a = this.configuratorSettings) === null || _a === void 0 ? void 0 : _a.position) === 'right';
+    }
+    get leftPositionClass() {
+        var _a;
+        return ((_a = this.configuratorSettings) === null || _a === void 0 ? void 0 : _a.position) === 'left';
+    }
+    get bottomPositionClass() {
+        var _a;
+        return ((_a = this.configuratorSettings) === null || _a === void 0 ? void 0 : _a.position) === 'bottom';
+    }
+    get topPositionClass() {
+        var _a;
+        return ((_a = this.configuratorSettings) === null || _a === void 0 ? void 0 : _a.position) === 'top';
+    }
+    get dir() {
+        return this.direction;
+    }
     /**
      * Specify the type, size and color of the PivotGrid's loader.
      *
@@ -420,6 +1349,15 @@ class PivotGridComponent {
     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);
+    }
     ngAfterViewInit() {
         if (isDocumentAvailable()) {
             this.zone.runOutsideAngular(() => {
@@ -442,67 +1380,295 @@ class PivotGridComponent {
         this.resizeObservers.forEach(o => o.disconnect());
         this.subs.unsubscribe();
     }
+    /**
+     * @hidden
+     */
+    messageFor(localizationToken) {
+        return this.localization.get(localizationToken);
+    }
 }
-PivotGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PivotGridDataService }, { token: i2$1.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridComponent, selector: "kendo-pivotgrid", inputs: { loaderSettings: "loaderSettings", columnHeadersWidth: "columnHeadersWidth" }, host: { properties: { "class.k-pivotgrid": "this.hostClass", "attr.role": "this.ariaRole" } }, providers: [
-        PivotGridDataService
-    ], 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 }], ngImport: i0, template: `
-        <span class="k-pivotgrid-empty-cell"></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" class="k-loader">
-            <kendo-loader
-                [type]="loaderSettings?.type"
-                [themeColor]="loaderSettings?.themeColor"
-                [size]="loaderSettings?.size"
-            >
-            </kendo-loader>
+PivotGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PivotGridDataService }, { token: i2.LocalizationService }, { token: i3.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
+PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridComponent, selector: "kendo-pivotgrid", inputs: { loaderSettings: "loaderSettings", configurator: "configurator", columnHeadersWidth: "columnHeadersWidth" }, 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", "attr.role": "this.ariaRole" } }, providers: [
+        PivotGridDataService,
+        LocalizationService,
+        {
+            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 }], 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"></ng-container>
+
+        <div #table class="k-pivotgrid">
+            <span class="k-pivotgrid-empty-cell" [attr.aria-label]="messageFor('emptyCellLabel')"></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" class="k-loader">
+                <kendo-loader
+                    [type]="loaderSettings?.type"
+                    [themeColor]="loaderSettings?.themeColor"
+                    [size]="loaderSettings?.size"
+                >
+                </kendo-loader>
+                <span class="k-loading-text">{{ loadingText }}</span>
+            </div>
         </div>
-   `, isInline: true, styles: ["\n        /** TODO: Remove if added to themes */\n        div.k-loader {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n        }\n   "], components: [{ type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth"] }, { type: i4.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+
+        <kendo-pivotgrid-configurator
+            *ngIf="showConfigurator"
+            [horizontal]="configuratorSettings.horizontal">
+        </kendo-pivotgrid-configurator>
+
+        <div *ngIf="configurator"
+            class="k-pivotgrid-configurator-button"
+            (click)="showConfigurator = !showConfigurator">
+            <span>{{ messageFor('configuratorButtonText') }}<span class="k-icon k-i-gear k-color-inherit"></span>
+            </span>
+        </div>
+   `, isInline: true, styles: ["\n        /** TODO: Remove if added to themes */\n        div.k-loader {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n        }\n   "], 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: ["horizontal"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pivotgrid',
                     providers: [
-                        PivotGridDataService
+                        PivotGridDataService,
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.pivotgrid'
+                        }
                     ],
                     template: `
-        <span class="k-pivotgrid-empty-cell"></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" class="k-loader">
-            <kendo-loader
-                [type]="loaderSettings?.type"
-                [themeColor]="loaderSettings?.themeColor"
-                [size]="loaderSettings?.size"
-            >
-            </kendo-loader>
+        <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"></ng-container>
+
+        <div #table class="k-pivotgrid">
+            <span class="k-pivotgrid-empty-cell" [attr.aria-label]="messageFor('emptyCellLabel')"></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" class="k-loader">
+                <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
+            *ngIf="showConfigurator"
+            [horizontal]="configuratorSettings.horizontal">
+        </kendo-pivotgrid-configurator>
+
+        <div *ngIf="configurator"
+            class="k-pivotgrid-configurator-button"
+            (click)="showConfigurator = !showConfigurator">
+            <span>{{ messageFor('configuratorButtonText') }}<span class="k-icon k-i-gear k-color-inherit"></span>
+            </span>
         </div>
    `,
                     styles: [`
@@ -515,9 +1681,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }
    `]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: PivotGridDataService }, { type: i2$1.ScrollbarWidthService }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: PivotGridDataService }, { type: i2.LocalizationService }, { 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-pivotgrid']
+                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']
             }], ariaRole: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -530,12 +1714,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], valuesTable: [{
                 type: ViewChild,
                 args: ['valuesTable', { read: ElementRef }]
+            }], table: [{
+                type: ViewChild,
+                args: ['table', { read: ElementRef }]
             }], loaderSettings: [{
                 type: Input
+            }], configurator: [{
+                type: Input
             }], columnHeadersWidth: [{
                 type: Input
             }] } });
 
+/**
+ * @hidden
+ */
+class PivotGridState {
+    constructor(columnAxes, rowAxes, measureAxes) {
+        this.columnAxes = columnAxes;
+        this.rowAxes = rowAxes;
+        this.measureAxes = measureAxes;
+    }
+}
+
+/**
+ * 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.
@@ -556,11 +1784,33 @@ class PivotBaseBindingDirective {
          * Represents the measure axes configuration of the PivotGrid.
          */
         this.measureAxes = [];
-        this.expandedStateSub = new Subscription();
+        /**
+         * 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();
+    }
+    /**
+     * @hidden
+     */
+    get state() {
+        return new PivotGridState(this.columnAxes, this.rowAxes, this.measureAxes);
     }
     ngOnInit() {
-        this.loadData();
-        this.expandedStateSub = this.dataService.expandedStateChange.subscribe((state) => {
+        this.loadData(this.state);
+        this.loadFields();
+        this.subs.add(this.dataService.expandedStateChange.subscribe((state) => {
             this.zone.run(() => {
                 const isCol = state.tableType === 'columnHeader';
                 const axes = isCol ? 'columnAxes' : 'rowAxes';
@@ -568,10 +1818,35 @@ class PivotBaseBindingDirective {
                 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({
+                    columnAxes: state.columnAxes,
+                    rowAxes: state.rowAxes,
+                    measureAxes: state.measureAxes
+                });
+                this.loadData(state);
+            });
+        }));
+        this.subs.add(this.dataService.valuesRows.subscribe((data) => {
+            this.zone.run(() => {
+                if (hasObservers(this.dataLoaded)) {
+                    this.dataLoaded.emit(data);
+                }
+            });
+        }));
+        this.dataService.directive = this;
     }
     ngOnDestroy() {
-        this.expandedStateSub.unsubscribe();
+        this.subs.unsubscribe();
     }
     updateDataServiceFields() {
         this.dataService.normalizedData = this.dataState.data;
@@ -579,6 +1854,14 @@ class PivotBaseBindingDirective {
         this.dataService.columns = this.dataState.columns;
         this.dataService.updateRowsAndCols();
     }
+    updateConfiguratorFields() {
+        this.dataService.fields.next(this.configuratorFields);
+        this.dataService.configuredFields.next({
+            columnAxes: this.columnAxes,
+            rowAxes: this.rowAxes,
+            measureAxes: this.measureAxes
+        });
+    }
     updateHeaders(axes, tree, path) {
         // Action to determine expand/collapse state
         const action = {
@@ -587,15 +1870,23 @@ class PivotBaseBindingDirective {
         };
         // The `headersReducer` method is responsible for udpating
         // the expanded state based on the toggle action (expand/collapse)
-        const newHeaders = headersReducer(this[axes].slice(), Object.assign(Object.assign({}, action), { tree }));
         // Update axes and reload data
+        const newHeaders = headersReducer(this[axes].slice(), Object.assign(Object.assign({}, action), { tree }));
+        if (hasObservers(this.expandChange)) {
+            const newState = Object.assign(Object.assign({}, this.state), { [axes]: newHeaders });
+            const event = new ExpandChangeEvent(newState);
+            this.expandChange.emit(event);
+            if (event.isDefaultPrevented()) {
+                return;
+            }
+        }
         this[axes] = newHeaders;
-        this.loadData();
+        this.loadData(this.state);
     }
     ;
 }
 PivotBaseBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotBaseBindingDirective, deps: [{ token: PivotGridDataService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-PivotBaseBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: PivotBaseBindingDirective, selector: "kendo-base-binding-directive", inputs: { columnAxes: "columnAxes", rowAxes: "rowAxes", measureAxes: "measureAxes" }, ngImport: i0 });
+PivotBaseBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: PivotBaseBindingDirective, selector: "kendo-base-binding-directive", inputs: { columnAxes: "columnAxes", rowAxes: "rowAxes", measureAxes: "measureAxes" }, outputs: { expandChange: "expandChange", configurationChange: "configurationChange", dataLoaded: "dataLoaded" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotBaseBindingDirective, decorators: [{
             type: Directive,
             args: [{
@@ -607,6 +1898,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], measureAxes: [{
                 type: Input
+            }], expandChange: [{
+                type: Output
+            }], configurationChange: [{
+                type: Output
+            }], dataLoaded: [{
+                type: Output
             }] } });
 
 const dataField = 'aggregate';
@@ -619,26 +1916,38 @@ const stringSeparator = '&';
 class PivotLocalBindingDirective extends PivotBaseBindingDirective {
     constructor(dataService, zone) {
         super(dataService, zone);
+        this.type = 'local';
         this.createAxisSettings = (key) => (Object.assign({ key }, this.dimensions[key]));
     }
     ngOnChanges(changes) {
         if (anyChanged(['data', 'dimensions', 'columnAxes', 'rowAxes', 'measureAxes', 'measures'], changes)) {
-            this.loadData();
+            this.loadData(this.state);
         }
     }
-    loadData() {
-        const rootColumnAxes = this.getRootAxes(this.columnAxes);
-        const rootRowAxes = this.getRootAxes(this.rowAxes);
+    /**
+     * @hidden
+     */
+    fetchChildren(node) {
+        return node.children;
+    }
+    loadFields() {
+        this.configuratorFields = createFlatSchemaDimensions(this.dimensions, this.measures);
+        this.updateConfiguratorFields();
+    }
+    loadData(state) {
+        const { columnAxes, rowAxes, measureAxes } = 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 = this.measureAxes.map(m => this.measures.find(meas => String(meas.name) === String(m.name))).filter(Boolean);
+        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);
         this.dataState = createLocalDataState({
             dataTree,
             rowSettings,
             columnSettings,
-            rowAxes: this.rowAxes,
-            columnAxes: this.columnAxes,
+            rowAxes: rowAxes,
+            columnAxes: columnAxes,
             measures: measuresSettings,
             sort: [],
             fields: bindingFields
@@ -672,22 +1981,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 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.loadData(this.state);
+            this.loadFields();
         }
     }
-    loadData() {
+    loadData(state) {
+        const { columnAxes, rowAxes, measureAxes } = state;
         this.dataService.loading.next(true);
         const options = {
             connection: {
                 catalog: this.catalog,
                 cube: this.cube
             },
-            columnAxes: this.columnAxes,
-            rowAxes: this.rowAxes,
-            measureAxes: this.measureAxes
+            columnAxes: columnAxes,
+            rowAxes: rowAxes,
+            measureAxes: measureAxes
         };
         fetchData({ url: this.url }, JSON.parse(JSON.stringify(options)))
             .then(createDataState)
@@ -697,6 +2009,127 @@ class PivotOLAPBindingDirective extends PivotBaseBindingDirective {
             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();
+        });
+    }
+    updateFields(event, fields) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const newFields = fields.slice();
+            const field = this.getField(newFields, event);
+            if (field && field.uniqueName === '[KPIs]') {
+                const KPIs = this.normalizeKPIs(yield this.loadKPIs());
+                field.children = KPIs;
+            }
+            else if (field && field.type === 'kpi') {
+                field.children = buildKPIMeasures(field);
+            }
+            else if (field && !field.children) {
+                const additionalFields = yield this.loadAvailableFields(field);
+                field.children = additionalFields;
+            }
+            return field === null || field === void 0 ? void 0 : 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;
+            }
+            let result = this.getField(node.children, target);
+            if (result !== null) {
+                return result;
+            }
+        }
+        return null;
+    }
+    ;
+    loadKPIs() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const options = {
+                connection: {
+                    catalog: this.catalog,
+                    cube: this.cube
+                },
+                restrictions: {
+                    catalogName: this.catalog,
+                    cubeName: this.cube
+                },
+                command: 'schemaKPIs'
+            };
+            return fetchDiscover({ url: this.url }, options);
+        });
+    }
+    ;
+    loadAvailableFields(field) {
+        return __awaiter(this, void 0, void 0, function* () {
+            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: "12.2.16", ngImport: i0, type: PivotOLAPBindingDirective, deps: [{ token: PivotGridDataService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
 PivotOLAPBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: PivotOLAPBindingDirective, selector: "[kendoPivotOLAPBinding]", inputs: { url: "url", cube: "cube", catalog: "catalog" }, exportAs: ["kendoPivotOLAPBinding"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
@@ -714,17 +2147,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Custom component messages override default component messages
+ * ([see example]({% slug globalization_pivotgrid %}#toc-localization)).
+ */
+class CustomMessagesComponent extends PivotGridMessages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+}
+CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: PivotGridMessages,
+                            useExisting: forwardRef(() => CustomMessagesComponent)
+                        }
+                    ],
+                    selector: 'kendo-pivotgrid-messages',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i2.LocalizationService }]; } });
+
 const IMPORTED_MODULES = [
     CommonModule,
     EventsModule,
-    IndicatorsModule
+    IndicatorsModule,
+    ButtonsModule,
+    TreeViewModule,
+    InputsModule,
+    DraggableModule
 ];
 const DECLARATIONS = [
+    PivotGridComponent,
+    PivotGridTableComponent,
+    PivotGridConfiguratorComponent,
+    PivotGridCellDirective,
+    PivotLocalBindingDirective,
+    PivotOLAPBindingDirective,
+    DraggableChipDirective,
+    DropTargetDirective,
+    LocalizedMessagesDirective,
+    CustomMessagesComponent
+];
+const EXPORTS = [
     PivotGridComponent,
     PivotGridTableComponent,
     PivotGridCellDirective,
     PivotLocalBindingDirective,
-    PivotOLAPBindingDirective
+    PivotOLAPBindingDirective,
+    CustomMessagesComponent
 ];
 /**
  * Sample module
@@ -734,29 +2218,32 @@ class PivotGridModule {
 PivotGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 PivotGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridModule, declarations: [PivotGridComponent,
         PivotGridTableComponent,
+        PivotGridConfiguratorComponent,
         PivotGridCellDirective,
         PivotLocalBindingDirective,
-        PivotOLAPBindingDirective], imports: [CommonModule,
+        PivotOLAPBindingDirective,
+        DraggableChipDirective,
+        DropTargetDirective,
+        LocalizedMessagesDirective,
+        CustomMessagesComponent], imports: [CommonModule,
         EventsModule,
-        IndicatorsModule], exports: [PivotGridComponent,
+        IndicatorsModule,
+        ButtonsModule,
+        TreeViewModule,
+        InputsModule,
+        DraggableModule], exports: [PivotGridComponent,
         PivotGridTableComponent,
         PivotGridCellDirective,
         PivotLocalBindingDirective,
-        PivotOLAPBindingDirective] });
-PivotGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridModule, providers: [{
-            provide: L10N_PREFIX,
-            useValue: 'kendo.pivotgrid'
-        }], imports: [[...IMPORTED_MODULES]] });
+        PivotOLAPBindingDirective,
+        CustomMessagesComponent] });
+PivotGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridModule, imports: [[...IMPORTED_MODULES]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...IMPORTED_MODULES],
                     declarations: [...DECLARATIONS],
-                    exports: [...DECLARATIONS],
-                    providers: [{
-                            provide: L10N_PREFIX,
-                            useValue: 'kendo.pivotgrid'
-                        }]
+                    exports: [...EXPORTS]
                 }]
         }] });
 
@@ -764,5 +2251,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { PivotGridCellDirective, PivotGridComponent, PivotGridModule, PivotGridTableComponent, PivotLocalBindingDirective, PivotOLAPBindingDirective };
+export { ConfigurationChangeEvent, CustomMessagesComponent, DraggableChipDirective, DropTargetDirective, ExpandChangeEvent, PivotGridCellDirective, PivotGridComponent, PivotGridConfiguratorComponent, PivotGridModule, PivotGridTableComponent, PivotLocalBindingDirective, PivotOLAPBindingDirective };