@progress/kendo-angular-pivotgrid 0.2.0-dev.202208181226 → 0.2.0-dev.202208190706

package/esm2015/pivotgrid.component.js

@@ -11,26 +11,35 @@ import { fromEvent, Subscription } from 'rxjs';
 import { syncScroll, syncWheel } from './util';
 // eslint-disable-next-line rxjs/ban-operators
 import { merge } from 'rxjs/operators';
+import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
 import * as i1 from "./data-binding/pivotgrid-data.service";
-import * as i2 from "@progress/kendo-angular-common";
-import * as i3 from "./rendering/pivotgrid-table.component";
-import * as i4 from "@progress/kendo-angular-indicators";
-import * as i5 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "@progress/kendo-angular-common";
+import * as i4 from "./rendering/pivotgrid-table.component";
+import * as i5 from "@progress/kendo-angular-indicators";
+import * as i6 from "./configurator/configurator.component";
+import * as i7 from "./localization/localized-messages.directive";
+import * as i8 from "@angular/common";
 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.
  */
 export 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';
         /**
          * Specify the width of the column header and data cells. Value is treated as pixels.
          *
@@ -40,12 +49,13 @@ export 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) {
@@ -62,6 +72,30 @@ export 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.
@@ -78,6 +112,15 @@ export 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(() => {
@@ -100,67 +143,295 @@ export 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: i1.PivotGridDataService }, { token: i2.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" } }, 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: i1.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: i3.PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth"] }, { type: i4.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }], directives: [{ type: i5.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: i4.PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth"] }, { type: i5.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { type: i6.PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["horizontal"] }], directives: [{ type: i7.LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { type: i8.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: [`
@@ -173,9 +444,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }
    `]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.PivotGridDataService }, { type: i2.ScrollbarWidthService }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.PivotGridDataService }, { type: i2.LocalizationService }, { type: i3.ScrollbarWidthService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
-                args: ['class.k-pivotgrid']
+                args: ['class.k-d-flex']
+            }, {
+                type: HostBinding,
+                args: ['class.k-pos-relative']
+            }], rightPositionClass: [{
+                type: HostBinding,
+                args: ['class.k-flex-row']
+            }], leftPositionClass: [{
+                type: HostBinding,
+                args: ['class.k-flex-row-reverse']
+            }], bottomPositionClass: [{
+                type: HostBinding,
+                args: ['class.k-flex-column']
+            }], topPositionClass: [{
+                type: HostBinding,
+                args: ['class.k-flex-column-reverse']
+            }], dir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], ariaRole: [{
+                type: HostBinding,
+                args: ['attr.role']
             }], colHeadersTable: [{
                 type: ViewChild,
                 args: ['colHeadersTable', { read: ElementRef }]
@@ -185,8 +477,13 @@ 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
             }] } });

package/esm2015/pivotgrid.module.js

@@ -4,26 +4,50 @@
 *-------------------------------------------------------------------------------------------*/
 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 { ButtonsModule } from "@progress/kendo-angular-buttons";
+import { TreeViewModule } from "@progress/kendo-angular-treeview";
 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 { DraggableModule, EventsModule } from '@progress/kendo-angular-common';
 import { PivotLocalBindingDirective } from './data-binding/local-binding.directive';
 import { PivotOLAPBindingDirective } from './data-binding/olap-binding.directive';
+import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
+import { CustomMessagesComponent } from './localization/custom-messages.component';
+import { PivotGridConfiguratorComponent } from './configurator/configurator.component';
+import { InputsModule } from '@progress/kendo-angular-inputs';
+import { DraggableChipDirective } from './configurator/draggable.directive';
+import { DropTargetDirective } from './configurator/drop-target.directive';
 import * as i0 from "@angular/core";
 const IMPORTED_MODULES = [
     CommonModule,
     EventsModule,
-    IndicatorsModule
+    IndicatorsModule,
+    ButtonsModule,
+    TreeViewModule,
+    InputsModule,
+    DraggableModule
 ];
 const DECLARATIONS = [
     PivotGridComponent,
     PivotGridTableComponent,
+    PivotGridConfiguratorComponent,
     PivotGridCellDirective,
     PivotLocalBindingDirective,
-    PivotOLAPBindingDirective
+    PivotOLAPBindingDirective,
+    DraggableChipDirective,
+    DropTargetDirective,
+    LocalizedMessagesDirective,
+    CustomMessagesComponent
+];
+const EXPORTS = [
+    PivotGridComponent,
+    PivotGridTableComponent,
+    PivotGridCellDirective,
+    PivotLocalBindingDirective,
+    PivotOLAPBindingDirective,
+    CustomMessagesComponent
 ];
 /**
  * Sample module
@@ -33,28 +57,31 @@ 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,
+        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]
                 }]
         }] });

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

@@ -29,15 +29,16 @@ export class PivotGridCellDirective {
         return ((_a = this.kendoPivotGridCell) === null || _a === void 0 ? void 0 : _a.hasChildren) && this.kendoPivotGridCell.children.length;
     }
     ngOnInit() {
+        var _a, _b, _c;
         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'
+            'k-pivotgrid-header-total': ((_a = this.kendoPivotGridCell) === null || _a === void 0 ? void 0 : _a.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-pivotgrid-header-root': ((_b = this.kendoPivotGridCell) === null || _b === void 0 ? void 0 : _b.levelNum) === 0,
+            'k-pivotgrid-expanded': ((_c = this.kendoPivotGridCell) === null || _c === void 0 ? void 0 : _c.hasChildren) && this.kendoPivotGridCell.children.length,
             'k-first': this.colIndex > 0
         };
         for (let prop in classesToAdd) {
@@ -52,6 +53,7 @@ PivotGridCellDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         <span 
             *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
             class="k-icon"
+            aria-hidden="true"
             [kendoEventsOutsideAngular]="{
                 click: handleClick
             }"
@@ -68,6 +70,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <span 
             *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
             class="k-icon"
+            aria-hidden="true"
             [kendoEventsOutsideAngular]="{
                 click: handleClick
             }"