@progress/kendo-angular-pivotgrid 0.1.0

package/fesm2015/kendo-angular-pivotgrid.js

@@ -0,0 +1,639 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as i0 from '@angular/core';
+import { EventEmitter, Injectable, Output, Component, HostBinding, Input, Directive, NgModule } from '@angular/core';
+import { validatePackage } from '@progress/kendo-licensing';
+import * as i3 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';
+export { averageAggregate, maxAggregate, minAggregate, sumAggregate } from '@progress/kendo-pivotgrid-common';
+import { BehaviorSubject, Subscription } from 'rxjs';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3$1 from '@progress/kendo-angular-indicators';
+import { IndicatorsModule } from '@progress/kendo-angular-indicators';
+import { L10N_PREFIX } from '@progress/kendo-angular-l10n';
+
+/**
+ * @hidden
+ */
+const packageMetadata = {
+    name: '@progress/kendo-angular-pivotgrid',
+    productName: 'Kendo UI for Angular',
+    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
+    publishDate: 1652189168,
+    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'
+};
+
+/**
+ * @hidden
+ */
+const canCreateElement = () => isDocumentAvailable() && document.createElement;
+/**
+ * @hidden
+ */
+let cachedScrollbarWidth = null;
+/**
+ * @hidden
+ */
+const scrollbarWidth = () => {
+    if (cachedScrollbarWidth === null && canCreateElement()) {
+        const div = document.createElement("div");
+        div.style.cssText = "overflow:scroll;overflow-x:hidden;zoom:1;clear:both;display:block";
+        div.innerHTML = " ";
+        document.body.appendChild(div);
+        cachedScrollbarWidth = div.offsetWidth - div.scrollWidth;
+        document.body.removeChild(div);
+    }
+    return cachedScrollbarWidth;
+};
+/**
+ * @hidden
+ */
+const isPresent = (value) => value !== null && value !== undefined;
+/**
+ * @hidden
+ * Returns whether two arrays contain the same values.
+ * Assumes array elements are primitive types
+ */
+const areSameArrays = (a1, a2) => {
+    const areArrays = (isPresent(a1) && Array.isArray(a1) && isPresent(a2) && Array.isArray(a2));
+    const areOfEqualLength = a1.length === a2.length;
+    if (!areArrays || !areOfEqualLength) {
+        return false;
+    }
+    for (let i = 0; i < a1.length; i++) {
+        if (a1[i] !== a2[i]) {
+            return false;
+        }
+    }
+    return true;
+};
+
+/**
+ * @hidden
+ */
+class PivotGridDataService {
+    constructor() {
+        this.expandedStateChange = 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);
+    }
+    updateRowsAndCols() {
+        const rowsTree = toTree((this.rows || []).slice());
+        const [rowHeaderRows, rowHeaderLeaves, rowHeaderDepth, rowHeaderBreadth] = toRows(rowsTree);
+        const columnsTree = toTree((this.columns || []).slice());
+        const [columnHeaderRows, columnHeaderLeaves, columnHeaderBreadth] = toColumns(columnsTree);
+        this.columnHeaderLeaves = columnHeaderLeaves;
+        this.columnHeaderCols.next(new Array(columnHeaderBreadth).fill({}));
+        this.columnHeaderRows.next(columnHeaderRows);
+        this.rowHeaderLeaves = rowHeaderLeaves;
+        this.rowHeaderCols.next(new Array(rowHeaderBreadth).fill({}));
+        this.rowHeaderRows.next(rowHeaderRows);
+        this.valuesRows.next(toData((this.normalizedData || []).slice(), columnHeaderLeaves, rowHeaderLeaves, columnHeaderBreadth, rowHeaderDepth));
+    }
+}
+PivotGridDataService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PivotGridDataService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridDataService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridDataService, decorators: [{
+            type: Injectable
+        }], propDecorators: { expandedStateChange: [{
+                type: Output
+            }] } });
+
+/**
+ * @hidden
+ */
+class PivotGridCellDirective {
+    constructor(hostEl, renderer, dataService) {
+        this.hostEl = hostEl;
+        this.renderer = renderer;
+        this.dataService = dataService;
+        this.cellClass = true;
+        this.handleClick = () => {
+            this.dataService.expandedStateChange.emit({
+                action: this.expanded ? 'collapse' : 'expand',
+                cell: this.kendoPivotGridCell,
+                tableType: this.tableType
+            });
+        };
+    }
+    get expanded() {
+        var _a;
+        return ((_a = this.kendoPivotGridCell) === null || _a === void 0 ? void 0 : _a.hasChildren) && this.kendoPivotGridCell.children.length;
+    }
+    ngOnInit() {
+        const nativeElement = this.hostEl.nativeElement;
+        this.renderer.setAttribute(nativeElement, 'rowspan', this.kendoPivotGridCell.rowSpan || 1);
+        this.renderer.setAttribute(nativeElement, 'colspan', this.kendoPivotGridCell.colSpan || 1);
+        const classesToAdd = {
+            'k-pivotgrid-header-total': this.kendoPivotGridCell.total || (this.tableType === 'values'
+                && (this.dataService.rowHeaderLeaves[this.rowIndex].total ||
+                    this.dataService.columnHeaderLeaves[this.colIndex].total)),
+            'k-pivotgrid-header-root': this.kendoPivotGridCell.levelNum === 0,
+            'k-pivotgrid-expanded': this.kendoPivotGridCell.hasChildren && this.kendoPivotGridCell.children.length,
+            'k-first': this.colIndex === 1
+        };
+        for (let prop in classesToAdd) {
+            if (classesToAdd[prop]) {
+                this.renderer.addClass(nativeElement, prop);
+            }
+        }
+    }
+}
+PivotGridCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridCellDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: PivotGridDataService }], target: i0.ɵɵFactoryTarget.Component });
+PivotGridCellDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: { kendoPivotGridCell: "kendoPivotGridCell", tableType: "tableType", rowIndex: "rowIndex", colIndex: "colIndex" }, host: { properties: { "class.k-pivotgrid-cell": "this.cellClass" } }, ngImport: i0, template: `
+        <span 
+            *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
+            class="k-icon"
+            [kendoEventsOutsideAngular]="{
+                click: handleClick
+            }"
+            [ngClass]="{
+                'k-i-arrow-chevron-up': expanded,
+                'k-i-arrow-chevron-down': !expanded
+            }"></span>{{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}`, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridCellDirective, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoPivotGridCell]',
+                    template: `
+        <span 
+            *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
+            class="k-icon"
+            [kendoEventsOutsideAngular]="{
+                click: handleClick
+            }"
+            [ngClass]="{
+                'k-i-arrow-chevron-up': expanded,
+                'k-i-arrow-chevron-down': !expanded
+            }"></span>{{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}`
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: PivotGridDataService }]; }, propDecorators: { cellClass: [{
+                type: HostBinding,
+                args: ['class.k-pivotgrid-cell']
+            }], kendoPivotGridCell: [{
+                type: Input
+            }], tableType: [{
+                type: Input
+            }], rowIndex: [{
+                type: Input
+            }], colIndex: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class PivotGridTableComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.dataChangeSubs = new Subscription();
+    }
+    ngOnInit() {
+        this.dataChangeSubs.add(this.dataService[`${this.tableType}Rows`].subscribe(rows => this.rows = rows));
+        this.dataChangeSubs.add(this.tableType === 'values' ?
+            this.dataService.columnHeaderCols.subscribe(cols => this.headerItems = cols) :
+            this.dataService[`${this.tableType}Cols`].subscribe(cols => this.headerItems = cols));
+    }
+    ngOnDestroy() {
+        this.dataChangeSubs.unsubscribe();
+    }
+}
+PivotGridTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridTableComponent, deps: [{ token: PivotGridDataService }], target: i0.ɵɵFactoryTarget.Component });
+PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: { tableType: "tableType" }, ngImport: i0, template: `
+        <table class="k-pivotgrid-table">
+            <colgroup>
+                <col *ngFor="let item of headerItems;" />
+            </colgroup>
+            <tbody class="k-pivotgrid-tbody">
+                <tr *ngFor="let row of rows; index as rowIndex"
+                    class="k-pivotgrid-row">
+                    <ng-container *ngFor="let cell of row.cells; index as colIndex">
+                        <th
+                            *ngIf="cell && tableType !== 'values'" 
+                            [kendoPivotGridCell]="cell"
+                            [tableType]="tableType"
+                            [colIndex]="colIndex"
+                            [rowIndex]="rowIndex"></th>
+                        <td
+                            *ngIf="cell && tableType === 'values'"
+                            [kendoPivotGridCell]="cell"
+                            tableType="values"
+                            [colIndex]="colIndex"
+                            [rowIndex]="rowIndex"></td>
+                    </ng-container>
+                </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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridTableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-pivotgrid-table',
+                    template: `
+        <table class="k-pivotgrid-table">
+            <colgroup>
+                <col *ngFor="let item of headerItems;" />
+            </colgroup>
+            <tbody class="k-pivotgrid-tbody">
+                <tr *ngFor="let row of rows; index as rowIndex"
+                    class="k-pivotgrid-row">
+                    <ng-container *ngFor="let cell of row.cells; index as colIndex">
+                        <th
+                            *ngIf="cell && tableType !== 'values'" 
+                            [kendoPivotGridCell]="cell"
+                            [tableType]="tableType"
+                            [colIndex]="colIndex"
+                            [rowIndex]="rowIndex"></th>
+                        <td
+                            *ngIf="cell && tableType === 'values'"
+                            [kendoPivotGridCell]="cell"
+                            tableType="values"
+                            [colIndex]="colIndex"
+                            [rowIndex]="rowIndex"></td>
+                    </ng-container>
+                </tr>
+            </tbody>
+        </table>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: PivotGridDataService }]; }, propDecorators: { tableType: [{
+                type: Input
+            }] } });
+
+const DEFAULT_LOADER_SETTINGS = {
+    type: 'converging-spinner',
+    themeColor: 'primary',
+    size: 'large'
+};
+/**
+ * A sample component
+ */
+class PivotGridComponent {
+    constructor(hostEl, zone, dataService) {
+        this.hostEl = hostEl;
+        this.zone = zone;
+        this.dataService = dataService;
+        this.hostClass = true;
+        this.resizeObservers = [];
+        this._loaderSettings = DEFAULT_LOADER_SETTINGS;
+        this.loadingSubscription = new Subscription();
+        this.resizeContainer = (axis, element) => {
+            const isRows = axis === 'Rows';
+            const wrapper = this.hostEl.nativeElement;
+            const size = isRows ? 'offsetHeight' : 'offsetWidth';
+            wrapper.style[`gridTemplate${axis}`] = '';
+            wrapper.style[`gridTemplate${axis}`] = `${element[size]}px 1fr`;
+        };
+        validatePackage(packageMetadata);
+    }
+    get scrollbarWidth() {
+        return `${scrollbarWidth()}px`;
+    }
+    /**
+     * Specify the type, size and color of the PivotGrid's loader.
+     *
+     * The default settings are:
+     * * type: `converging-spinner`
+     * * color: `primary`
+     * * size: `large`
+     */
+    set loaderSettings(settings) {
+        this._loaderSettings = Object.assign({}, DEFAULT_LOADER_SETTINGS, settings);
+    }
+    ;
+    get loaderSettings() {
+        return this._loaderSettings;
+    }
+    ngAfterViewInit() {
+        if (isDocumentAvailable()) {
+            this.zone.runOutsideAngular(() => {
+                const rowHeadersTable = document.querySelector('.k-pivotgrid-row-headers .k-pivotgrid-table');
+                const headerColsResizeObserver = new ResizeObserver(() => this.resizeContainer('Columns', rowHeadersTable));
+                headerColsResizeObserver.observe(rowHeadersTable);
+                const colHeadersTable = document.querySelector('.k-pivotgrid-column-headers .k-pivotgrid-table');
+                const headerRowsResizeObserver = new ResizeObserver(() => this.resizeContainer('Rows', colHeadersTable));
+                headerRowsResizeObserver.observe(colHeadersTable);
+                this.resizeObservers = [headerColsResizeObserver, headerRowsResizeObserver];
+            });
+        }
+    }
+    ngAfterContentInit() {
+        this.loadingSubscription.add(this.dataService.loading.subscribe(state => this.loading = state));
+    }
+    ngOnDestroy() {
+        this.resizeObservers.forEach(o => o.disconnect());
+        this.loadingSubscription.unsubscribe();
+    }
+}
+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 }], target: i0.ɵɵFactoryTarget.Component });
+PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridComponent, selector: "kendo-pivotgrid", inputs: { loaderSettings: "loaderSettings" }, host: { properties: { "class.k-pivotgrid": "this.hostClass", "style.--kendo-scrollbar-width": "this.scrollbarWidth" } }, providers: [
+        PivotGridDataService
+    ], ngImport: i0, template: `
+        <span class="k-pivotgrid-empty-cell"></span>
+        <kendo-pivotgrid-table
+            class="k-pivotgrid-column-headers"
+            tableType="columnHeader"></kendo-pivotgrid-table>
+        <kendo-pivotgrid-table
+            class="k-pivotgrid-row-headers"
+            tableType="rowHeader"></kendo-pivotgrid-table>
+        <kendo-pivotgrid-table
+            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>
+        </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"] }, { type: i3$1.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }], directives: [{ type: i2.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
+                    ],
+                    template: `
+        <span class="k-pivotgrid-empty-cell"></span>
+        <kendo-pivotgrid-table
+            class="k-pivotgrid-column-headers"
+            tableType="columnHeader"></kendo-pivotgrid-table>
+        <kendo-pivotgrid-table
+            class="k-pivotgrid-row-headers"
+            tableType="rowHeader"></kendo-pivotgrid-table>
+        <kendo-pivotgrid-table
+            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>
+        </div>
+   `,
+                    styles: [`
+        /** TODO: Remove if added to themes */
+        div.k-loader {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+   `]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: PivotGridDataService }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-pivotgrid']
+            }], scrollbarWidth: [{
+                type: HostBinding,
+                args: ['style.--kendo-scrollbar-width']
+            }], loaderSettings: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ * A directive which binds the PivotGrid to an array of objects.
+ */
+class PivotBaseBindingDirective {
+    constructor(dataService, zone) {
+        this.dataService = dataService;
+        this.zone = zone;
+        /**
+         * Represents the column axes configuration of the PivotGrid.
+         */
+        this.columnAxes = [];
+        /**
+         * Represents the row axes configuration of the PivotGrid.
+         */
+        this.rowAxes = [];
+        /**
+         * Represents the measure axes configuration of the PivotGrid.
+         */
+        this.measureAxes = [];
+        this.expandedStateSub = new Subscription();
+    }
+    ngOnInit() {
+        this.loadData();
+        this.expandedStateSub = this.dataService.expandedStateChange.subscribe((state) => {
+            this.zone.run(() => {
+                const isCol = state.tableType === 'columnHeader';
+                const axes = isCol ? 'columnAxes' : 'rowAxes';
+                // Converts current rows state to a tree-like structure (using the PivotGrid Common pkg)
+                const tree = toTree((isCol ? this.dataService.columns : this.dataService.rows || []).slice());
+                this.updateHeaders(axes, tree, state.cell.path);
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.expandedStateSub.unsubscribe();
+    }
+    updateDataServiceFields() {
+        this.dataService.normalizedData = this.dataState.data;
+        this.dataService.rows = this.dataState.rows;
+        this.dataService.columns = this.dataState.columns;
+        this.dataService.updateRowsAndCols();
+    }
+    updateHeaders(axes, tree, path) {
+        // Action to determine expand/collapse state
+        const action = {
+            type: HEADERS_ACTION.toggle,
+            payload: path
+        };
+        // The `headersReducer` method is responsible for udpating
+        // the expanded state based on the toggle action (expand/collapse)
+        const newHeaders = headersReducer(this[axes].slice(), Object.assign(Object.assign({}, action), { tree }));
+        // Update axes and reload data
+        this[axes] = newHeaders;
+        this.loadData();
+    }
+    ;
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotBaseBindingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-base-binding-directive'
+                }]
+        }], ctorParameters: function () { return [{ type: PivotGridDataService }, { type: i0.NgZone }]; }, propDecorators: { columnAxes: [{
+                type: Input
+            }], rowAxes: [{
+                type: Input
+            }], measureAxes: [{
+                type: Input
+            }] } });
+
+const dataField = 'aggregate';
+const columnsData = 'columns';
+const bindingFields = { dataField, columnsData };
+const stringSeparator = '&';
+/**
+ * A directive which binds the PivotGrid to local data ([see example]({% slug directives_databinding_local_pivotgrid %})).
+ */
+class PivotLocalBindingDirective extends PivotBaseBindingDirective {
+    constructor(dataService, zone) {
+        super(dataService, zone);
+        this.createAxisSettings = (key) => (Object.assign({ key }, this.dimensions[key]));
+    }
+    ngOnChanges(changes) {
+        if (anyChanged(['data', 'dimensions', 'columnAxes', 'rowAxes', 'measureAxes', 'measures'], changes)) {
+            this.loadData();
+        }
+    }
+    loadData() {
+        const rootColumnAxes = this.getRootAxes(this.columnAxes);
+        const rootRowAxes = this.getRootAxes(this.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 dataTree = createDataTree(this.data, rowSettings, columnSettings, measuresSettings, bindingFields);
+        this.dataState = createLocalDataState({
+            dataTree,
+            rowSettings,
+            columnSettings,
+            rowAxes: this.rowAxes,
+            columnAxes: this.columnAxes,
+            measures: measuresSettings,
+            sort: [],
+            fields: bindingFields
+        });
+        this.updateDataServiceFields();
+    }
+    getRootAxes(axes) {
+        return Array.from(rootFields(axes).keys()).join(stringSeparator);
+    }
+}
+PivotLocalBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotLocalBindingDirective, deps: [{ token: PivotGridDataService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+PivotLocalBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: PivotLocalBindingDirective, selector: "[kendoPivotLocalBinding]", inputs: { data: ["kendoPivotLocalBinding", "data"], dimensions: "dimensions", measures: "measures" }, exportAs: ["kendoPivotLocalBinding"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotLocalBindingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoPivotLocalBinding]',
+                    exportAs: 'kendoPivotLocalBinding'
+                }]
+        }], ctorParameters: function () { return [{ type: PivotGridDataService }, { type: i0.NgZone }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['kendoPivotLocalBinding']
+            }], dimensions: [{
+                type: Input
+            }], measures: [{
+                type: Input
+            }] } });
+
+/**
+ * A directive which binds the PivotGrid to data using an Online Analytical Processing (OLAP) service ([see example]({% slug directives_databinding_remote_pivotgrid %})).
+ */
+class PivotOLAPBindingDirective extends PivotBaseBindingDirective {
+    constructor(dataService, zone) {
+        super(dataService, zone);
+    }
+    ngOnChanges(changes) {
+        if (anyChanged(['url', 'cube', 'catalog', 'columnAxes', 'rowAxes', 'measureAxes'], changes)) {
+            this.loadData();
+        }
+    }
+    loadData() {
+        this.dataService.loading.next(true);
+        const options = {
+            connection: {
+                catalog: this.catalog,
+                cube: this.cube
+            },
+            columnAxes: this.columnAxes,
+            rowAxes: this.rowAxes,
+            measureAxes: this.measureAxes
+        };
+        fetchData({ url: this.url }, JSON.parse(JSON.stringify(options)))
+            .then(createDataState)
+            .then(newDataState => {
+            this.dataState = newDataState;
+            this.updateDataServiceFields();
+            this.dataService.loading.next(false);
+        });
+    }
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotOLAPBindingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoPivotOLAPBinding]',
+                    exportAs: 'kendoPivotOLAPBinding'
+                }]
+        }], ctorParameters: function () { return [{ type: PivotGridDataService }, { type: i0.NgZone }]; }, propDecorators: { url: [{
+                type: Input
+            }], cube: [{
+                type: Input
+            }], catalog: [{
+                type: Input
+            }] } });
+
+const IMPORTED_MODULES = [
+    CommonModule,
+    EventsModule,
+    IndicatorsModule
+];
+const DECLARATIONS = [
+    PivotGridComponent,
+    PivotGridTableComponent,
+    PivotGridCellDirective,
+    PivotLocalBindingDirective,
+    PivotOLAPBindingDirective
+];
+/**
+ * Sample module
+ */
+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,
+        PivotGridCellDirective,
+        PivotLocalBindingDirective,
+        PivotOLAPBindingDirective], imports: [CommonModule,
+        EventsModule,
+        IndicatorsModule], 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]] });
+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'
+                        }]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PivotGridCellDirective, PivotGridComponent, PivotGridModule, PivotGridTableComponent, PivotLocalBindingDirective, PivotOLAPBindingDirective };
+

package/kendo-angular-pivotgrid.d.ts

@@ -0,0 +1,9 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@progress/kendo-angular-pivotgrid" />
+export * from './main';

package/main.d.ts

@@ -0,0 +1,11 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export { PivotGridComponent } from './pivotgrid.component';
+export { PivotGridModule } from './pivotgrid.module';
+export { PivotGridCellDirective } from './rendering/pivotgrid-cell.directive';
+export { PivotGridTableComponent } from './rendering/pivotgrid-table.component';
+export { PivotLocalBindingDirective } from './data-binding/local-binding.directive';
+export { PivotOLAPBindingDirective } from './data-binding/olap-binding.directive';
+export { Dimension, Measure, PivotGridAxis, Aggregate, PivotGridField, averageAggregate, maxAggregate, minAggregate, sumAggregate } from '@progress/kendo-pivotgrid-common';

package/models/expanded-state-action.d.ts

@@ -0,0 +1,16 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export declare type ExpandedStateAction = 'expand' | 'collapse';
+/**
+ * @hidden
+ */
+export declare type ExpandedStateChangeEvent = {
+    action: ExpandedStateAction;
+    cell: any;
+    tableType: string;
+};