@progress/kendo-angular-pivotgrid 0.1.0

package/esm2015/pivotgrid.component.js

@@ -0,0 +1,152 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, Input } from '@angular/core';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from './package-metadata';
+import { scrollbarWidth } from './util';
+import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { PivotGridDataService } from './data-binding/pivotgrid-data.service';
+import { Subscription } from 'rxjs';
+import * as i0 from "@angular/core";
+import * as i1 from "./data-binding/pivotgrid-data.service";
+import * as i2 from "./rendering/pivotgrid-table.component";
+import * as i3 from "@progress/kendo-angular-indicators";
+import * as i4 from "@angular/common";
+const DEFAULT_LOADER_SETTINGS = {
+    type: 'converging-spinner',
+    themeColor: 'primary',
+    size: 'large'
+};
+/**
+ * A sample component
+ */
+export 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: i1.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: i2.PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType"] }, { type: i3.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }], directives: [{ type: i4.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: i1.PivotGridDataService }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-pivotgrid']
+            }], scrollbarWidth: [{
+                type: HostBinding,
+                args: ['style.--kendo-scrollbar-width']
+            }], loaderSettings: [{
+                type: Input
+            }] } });

package/esm2015/pivotgrid.module.js

@@ -0,0 +1,60 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { IndicatorsModule } from "@progress/kendo-angular-indicators";
+import { PivotGridComponent } from './pivotgrid.component';
+import { PivotGridCellDirective } from './rendering/pivotgrid-cell.directive';
+import { PivotGridTableComponent } from './rendering/pivotgrid-table.component';
+import { EventsModule } from '@progress/kendo-angular-common';
+import { PivotLocalBindingDirective } from './data-binding/local-binding.directive';
+import { PivotOLAPBindingDirective } from './data-binding/olap-binding.directive';
+import * as i0 from "@angular/core";
+const IMPORTED_MODULES = [
+    CommonModule,
+    EventsModule,
+    IndicatorsModule
+];
+const DECLARATIONS = [
+    PivotGridComponent,
+    PivotGridTableComponent,
+    PivotGridCellDirective,
+    PivotLocalBindingDirective,
+    PivotOLAPBindingDirective
+];
+/**
+ * Sample module
+ */
+export 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'
+                        }]
+                }]
+        }] });

package/esm2015/rendering/pivotgrid-cell.directive.js

@@ -0,0 +1,90 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../data-binding/pivotgrid-data.service";
+import * as i2 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-common";
+/**
+ * @hidden
+ */
+export 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: i1.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: i1.PivotGridDataService }]; }, propDecorators: { cellClass: [{
+                type: HostBinding,
+                args: ['class.k-pivotgrid-cell']
+            }], kendoPivotGridCell: [{
+                type: Input
+            }], tableType: [{
+                type: Input
+            }], rowIndex: [{
+                type: Input
+            }], colIndex: [{
+                type: Input
+            }] } });

package/esm2015/rendering/pivotgrid-table.component.js

@@ -0,0 +1,89 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input } from '@angular/core';
+import { Subscription } from 'rxjs';
+import * as i0 from "@angular/core";
+import * as i1 from "../data-binding/pivotgrid-data.service";
+import * as i2 from "./pivotgrid-cell.directive";
+import * as i3 from "@angular/common";
+/**
+ * @hidden
+ */
+export 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: i1.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: i2.PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: ["kendoPivotGridCell", "tableType", "rowIndex", "colIndex"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.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: i1.PivotGridDataService }]; }, propDecorators: { tableType: [{
+                type: Input
+            }] } });

package/esm2015/util.js

@@ -0,0 +1,49 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { isDocumentAvailable } from "@progress/kendo-angular-common";
+/**
+ * @hidden
+ */
+const canCreateElement = () => isDocumentAvailable() && document.createElement;
+/**
+ * @hidden
+ */
+let cachedScrollbarWidth = null;
+/**
+ * @hidden
+ */
+export 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
+ */
+export const isPresent = (value) => value !== null && value !== undefined;
+/**
+ * @hidden
+ * Returns whether two arrays contain the same values.
+ * Assumes array elements are primitive types
+ */
+export 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;
+};