@progress/kendo-angular-pivotgrid 0.2.0-dev.202208181339 → 0.2.0-dev.202209020712

package/esm2015/models/data-row-item.js

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+;
+export {};

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-pivotgrid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1660829909,
+    publishDate: 1662102713,
     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'
 };

package/esm2015/pivotgrid.component.js

@@ -5,13 +5,14 @@
 import { Component, ElementRef, HostBinding, Input, ViewChild } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
-import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { isChanged, isDocumentAvailable } from '@progress/kendo-angular-common';
 import { PivotGridDataService } from './data-binding/pivotgrid-data.service';
 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 { PivotGridNavigation } from '@progress/kendo-pivotgrid-common';
 import * as i0 from "@angular/core";
 import * as i1 from "./data-binding/pivotgrid-data.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -34,10 +35,12 @@ const DEFAULT_CONFIGURATOR_SETTINGS = {
  * Represents the Kendo UI PivotGrid component for Angular.
  */
 export class PivotGridComponent {
-    constructor(hostEl, zone, dataService, localization, _scrollbarWidthService) {
+    constructor(hostEl, zone, dataService, localization, renderer, _scrollbarWidthService) {
+        this.hostEl = hostEl;
         this.zone = zone;
         this.dataService = dataService;
         this.localization = localization;
+        this.renderer = renderer;
         this.hostClass = true;
         this.ariaRole = 'grid';
         /**
@@ -46,6 +49,12 @@ export class PivotGridComponent {
          * @default 200
          */
         this.columnHeadersWidth = 200;
+        /**
+         * If set to true, the user can use dedicated shortcuts to interact with the PivotGrid. By default, navigation is disabled.
+         *
+         * @default false
+         */
+        this.navigable = false;
         this.resizeObservers = [];
         this._loaderSettings = DEFAULT_LOADER_SETTINGS;
         this.subs = new Subscription();
@@ -133,15 +142,29 @@ export class PivotGridComponent {
                 this.resizeObservers = [headerColsResizeObserver, headerRowsResizeObserver];
                 this.subs.add(fromEvent(rowHeadersTable, 'wheel')
                     .pipe(merge(fromEvent(colHeadersTable, 'wheel'), fromEvent(this.valuesTable.nativeElement, 'scroll'))).subscribe((ev) => this.handleScroll(ev)));
+                if (this.navigable) {
+                    this.initNavigation();
+                }
             });
         }
     }
     ngAfterContentInit() {
         this.subs.add(this.dataService.loading.subscribe(state => this.loading = state));
     }
+    ngOnChanges(changes) {
+        if (isChanged('navigable', changes)) {
+            if (this.navigable) {
+                this.initNavigation();
+            }
+            else {
+                this.stopNavigation();
+            }
+        }
+    }
     ngOnDestroy() {
         this.resizeObservers.forEach(o => o.disconnect());
         this.subs.unsubscribe();
+        this.stopNavigation();
     }
     /**
      * @hidden
@@ -149,16 +172,37 @@ export class PivotGridComponent {
     messageFor(localizationToken) {
         return this.localization.get(localizationToken);
     }
+    initNavigation() {
+        this.stopNavigation();
+        this.navigation = new PivotGridNavigation({ tabIndex: 0 });
+        this.navigation.start(this.hostEl.nativeElement);
+        const firstCell = this.navigation.first;
+        if (firstCell) {
+            firstCell.setAttribute('tabindex', '0');
+        }
+        this.subs.add(this.dataService.directive.expandChange.pipe(merge(this.dataService.directive.configurationChange)).subscribe(() => this.zone.runOutsideAngular(() => {
+            setTimeout(() => this.navigation.update());
+        })));
+    }
+    stopNavigation() {
+        if (this.navigation) {
+            const lastFocusedEl = this.navigation.elements.find(el => el.hasAttribute('tabindex'));
+            if (lastFocusedEl) {
+                this.renderer.removeAttribute(lastFocusedEl, 'tabindex');
+            }
+            this.navigation.stop();
+        }
+    }
 }
-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: [
+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: i0.Renderer2 }, { 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", navigable: "navigable" }, host: { properties: { "class.k-d-flex": "this.hostClass", "class.k-pos-relative": "this.hostClass", "class.k-flex-row": "this.rightPositionClass", "class.k-flex-row-reverse": "this.leftPositionClass", "class.k-flex-column": "this.bottomPositionClass", "class.k-flex-column-reverse": "this.topPositionClass", "attr.dir": "this.dir", "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: `
+    ], 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 }], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoPivotGridLocalizedMessages
         i18n-loading="kendo.pivotgrid.loading|The loading text"
         loading="Loading"
@@ -239,10 +283,21 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
         configuratorCancelButtonText="Cancel"
 
         i18n-configuratorApplyButtonText="kendo.pivotgrid.configuratorApplyButtonText|The text content of the PivotGrid configurator configurator Apply button"
-        configuratorApplyButtonText="Apply"></ng-container>
+        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>
+            <span class="k-pivotgrid-empty-cell">
+                <span class="k-sr-only">{{messageFor('emptyCellLabel')}}</span>
+            </span>
             <kendo-pivotgrid-table
                 #colHeadersTable
                 [colWidth]="columnHeadersWidth"
@@ -374,10 +429,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         configuratorCancelButtonText="Cancel"
 
         i18n-configuratorApplyButtonText="kendo.pivotgrid.configuratorApplyButtonText|The text content of the PivotGrid configurator configurator Apply button"
-        configuratorApplyButtonText="Apply"></ng-container>
+        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>
+            <span class="k-pivotgrid-empty-cell">
+                <span class="k-sr-only">{{messageFor('emptyCellLabel')}}</span>
+            </span>
             <kendo-pivotgrid-table
                 #colHeadersTable
                 [colWidth]="columnHeadersWidth"
@@ -426,7 +492,7 @@ 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.LocalizationService }, { type: i3.ScrollbarWidthService }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.PivotGridDataService }, { type: i2.LocalizationService }, { type: i0.Renderer2 }, { type: i3.ScrollbarWidthService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-d-flex']
             }, {
@@ -468,4 +534,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], columnHeadersWidth: [{
                 type: Input
+            }], navigable: [{
+                type: Input
             }] } });

package/fesm2015/kendo-angular-pivotgrid.js

@@ -6,8 +6,8 @@ import * as i0 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 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';
+import { isDocumentAvailable, isChanged, PreventableEvent, hasObservers, anyChanged, EventsModule, DraggableModule } from '@progress/kendo-angular-common';
+import { toTree, toRows, toColumns, toData, configuratorReducer, PIVOT_CONFIGURATOR_ACTION, PivotGridNavigation, 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, from, of, fromEvent } from 'rxjs';
 import { mergeMap, merge } from 'rxjs/operators';
@@ -32,7 +32,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-pivotgrid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1660829909,
+    publishDate: 1662102713,
     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'
 };
@@ -928,9 +928,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                         </kendo-chiplist>
 
                         <ng-template #noColumnAxes>
-                            <div class="k-settings-description" kendoDropTarget axes="columnAxes">
-                                Select some fields to begin setup
-                            </div>
+                            <div class="k-settings-description" kendoDropTarget axes="columnAxes">{{messageFor('configuratorEmptyColumnsText')}}</div>
                         </ng-template>
 
                         <div class="k-form-field" kendoDropTarget axes="rowAxes">
@@ -956,9 +954,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                         </kendo-chiplist>
 
                         <ng-template #noRowAxes>
-                            <div class="k-settings-description" kendoDropTarget axes="rowAxes">
-                                Select some fields to begin setup
-                            </div>
+                            <div class="k-settings-description" kendoDropTarget axes="rowAxes">{{messageFor('configuratorEmptyRowsText')}}</div>
                         </ng-template>
                     </ng-template>
 
@@ -991,9 +987,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                         </kendo-chiplist>
 
                         <ng-template #noMeasureAxes>
-                            <div class="k-settings-description" kendoDropTarget axes="measureAxes">
-                                Select some fields to begin setup
-                            </div>
+                            <div class="k-settings-description" kendoDropTarget axes="measureAxes">{{messageFor('configuratorEmptyMeasuresText')}}</div>
                         </ng-template>
                     </ng-template>
                     
@@ -1085,9 +1079,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         </kendo-chiplist>
 
                         <ng-template #noColumnAxes>
-                            <div class="k-settings-description" kendoDropTarget axes="columnAxes">
-                                Select some fields to begin setup
-                            </div>
+                            <div class="k-settings-description" kendoDropTarget axes="columnAxes">{{messageFor('configuratorEmptyColumnsText')}}</div>
                         </ng-template>
 
                         <div class="k-form-field" kendoDropTarget axes="rowAxes">
@@ -1113,9 +1105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         </kendo-chiplist>
 
                         <ng-template #noRowAxes>
-                            <div class="k-settings-description" kendoDropTarget axes="rowAxes">
-                                Select some fields to begin setup
-                            </div>
+                            <div class="k-settings-description" kendoDropTarget axes="rowAxes">{{messageFor('configuratorEmptyRowsText')}}</div>
                         </ng-template>
                     </ng-template>
 
@@ -1148,9 +1138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         </kendo-chiplist>
 
                         <ng-template #noMeasureAxes>
-                            <div class="k-settings-description" kendoDropTarget axes="measureAxes">
-                                Select some fields to begin setup
-                            </div>
+                            <div class="k-settings-description" kendoDropTarget axes="measureAxes">{{messageFor('configuratorEmptyMeasuresText')}}</div>
                         </ng-template>
                     </ng-template>
                     
@@ -1176,7 +1164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 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" }, usesInheritance: true, ngImport: i0 });
+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: [{
@@ -1233,6 +1221,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], configuratorApplyButtonText: [{
                 type: Input
+            }], configuratorEmptyRowsText: [{
+                type: Input
+            }], configuratorEmptyColumnsText: [{
+                type: Input
+            }], configuratorEmptyMeasuresText: [{
+                type: Input
             }] } });
 
 /**
@@ -1277,10 +1271,12 @@ const DEFAULT_CONFIGURATOR_SETTINGS = {
  * Represents the Kendo UI PivotGrid component for Angular.
  */
 class PivotGridComponent {
-    constructor(hostEl, zone, dataService, localization, _scrollbarWidthService) {
+    constructor(hostEl, zone, dataService, localization, renderer, _scrollbarWidthService) {
+        this.hostEl = hostEl;
         this.zone = zone;
         this.dataService = dataService;
         this.localization = localization;
+        this.renderer = renderer;
         this.hostClass = true;
         this.ariaRole = 'grid';
         /**
@@ -1289,6 +1285,12 @@ class PivotGridComponent {
          * @default 200
          */
         this.columnHeadersWidth = 200;
+        /**
+         * If set to true, the user can use dedicated shortcuts to interact with the PivotGrid. By default, navigation is disabled.
+         *
+         * @default false
+         */
+        this.navigable = false;
         this.resizeObservers = [];
         this._loaderSettings = DEFAULT_LOADER_SETTINGS;
         this.subs = new Subscription();
@@ -1376,15 +1378,29 @@ class PivotGridComponent {
                 this.resizeObservers = [headerColsResizeObserver, headerRowsResizeObserver];
                 this.subs.add(fromEvent(rowHeadersTable, 'wheel')
                     .pipe(merge(fromEvent(colHeadersTable, 'wheel'), fromEvent(this.valuesTable.nativeElement, 'scroll'))).subscribe((ev) => this.handleScroll(ev)));
+                if (this.navigable) {
+                    this.initNavigation();
+                }
             });
         }
     }
     ngAfterContentInit() {
         this.subs.add(this.dataService.loading.subscribe(state => this.loading = state));
     }
+    ngOnChanges(changes) {
+        if (isChanged('navigable', changes)) {
+            if (this.navigable) {
+                this.initNavigation();
+            }
+            else {
+                this.stopNavigation();
+            }
+        }
+    }
     ngOnDestroy() {
         this.resizeObservers.forEach(o => o.disconnect());
         this.subs.unsubscribe();
+        this.stopNavigation();
     }
     /**
      * @hidden
@@ -1392,16 +1408,37 @@ class PivotGridComponent {
     messageFor(localizationToken) {
         return this.localization.get(localizationToken);
     }
+    initNavigation() {
+        this.stopNavigation();
+        this.navigation = new PivotGridNavigation({ tabIndex: 0 });
+        this.navigation.start(this.hostEl.nativeElement);
+        const firstCell = this.navigation.first;
+        if (firstCell) {
+            firstCell.setAttribute('tabindex', '0');
+        }
+        this.subs.add(this.dataService.directive.expandChange.pipe(merge(this.dataService.directive.configurationChange)).subscribe(() => this.zone.runOutsideAngular(() => {
+            setTimeout(() => this.navigation.update());
+        })));
+    }
+    stopNavigation() {
+        if (this.navigation) {
+            const lastFocusedEl = this.navigation.elements.find(el => el.hasAttribute('tabindex'));
+            if (lastFocusedEl) {
+                this.renderer.removeAttribute(lastFocusedEl, 'tabindex');
+            }
+            this.navigation.stop();
+        }
+    }
 }
-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: [
+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: i0.Renderer2 }, { 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", navigable: "navigable" }, host: { properties: { "class.k-d-flex": "this.hostClass", "class.k-pos-relative": "this.hostClass", "class.k-flex-row": "this.rightPositionClass", "class.k-flex-row-reverse": "this.leftPositionClass", "class.k-flex-column": "this.bottomPositionClass", "class.k-flex-column-reverse": "this.topPositionClass", "attr.dir": "this.dir", "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: `
+    ], 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 }], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoPivotGridLocalizedMessages
         i18n-loading="kendo.pivotgrid.loading|The loading text"
         loading="Loading"
@@ -1482,10 +1519,21 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
         configuratorCancelButtonText="Cancel"
 
         i18n-configuratorApplyButtonText="kendo.pivotgrid.configuratorApplyButtonText|The text content of the PivotGrid configurator configurator Apply button"
-        configuratorApplyButtonText="Apply"></ng-container>
+        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>
+            <span class="k-pivotgrid-empty-cell">
+                <span class="k-sr-only">{{messageFor('emptyCellLabel')}}</span>
+            </span>
             <kendo-pivotgrid-table
                 #colHeadersTable
                 [colWidth]="columnHeadersWidth"
@@ -1617,10 +1665,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         configuratorCancelButtonText="Cancel"
 
         i18n-configuratorApplyButtonText="kendo.pivotgrid.configuratorApplyButtonText|The text content of the PivotGrid configurator configurator Apply button"
-        configuratorApplyButtonText="Apply"></ng-container>
+        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>
+            <span class="k-pivotgrid-empty-cell">
+                <span class="k-sr-only">{{messageFor('emptyCellLabel')}}</span>
+            </span>
             <kendo-pivotgrid-table
                 #colHeadersTable
                 [colWidth]="columnHeadersWidth"
@@ -1669,7 +1728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }
    `]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: PivotGridDataService }, { type: i2.LocalizationService }, { type: i3.ScrollbarWidthService }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: PivotGridDataService }, { type: i2.LocalizationService }, { type: i0.Renderer2 }, { type: i3.ScrollbarWidthService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-d-flex']
             }, {
@@ -1711,6 +1770,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], columnHeadersWidth: [{
                 type: Input
+            }], navigable: [{
+                type: Input
             }] } });
 
 /**
@@ -1782,6 +1843,11 @@ class PivotBaseBindingDirective {
          * 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();
     }
     /**
@@ -1819,6 +1885,13 @@ class PivotBaseBindingDirective {
                 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() {
@@ -1862,7 +1935,7 @@ class PivotBaseBindingDirective {
     ;
 }
 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" }, outputs: { expandChange: "expandChange", configurationChange: "configurationChange" }, 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: [{
@@ -1878,6 +1951,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], configurationChange: [{
                 type: Output
+            }], dataLoaded: [{
+                type: Output
             }] } });
 
 const dataField = 'aggregate';

package/localization/messages.d.ts

@@ -155,6 +155,18 @@ export declare class PivotGridMessages extends ComponentMessages {
      * The text content of the PivotGrid configurator Apply button.
      */
     configuratorApplyButtonText: string;
+    /**
+     * The text content of the PivotGrid configurator empty rows container.
+     */
+    configuratorEmptyRowsText: string;
+    /**
+     * The text content of the PivotGrid configurator empty columns container.
+     */
+    configuratorEmptyColumnsText: string;
+    /**
+     * The text content of the PivotGrid configurator empty measures container.
+     */
+    configuratorEmptyMeasuresText: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<PivotGridMessages, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PivotGridMessages, never, never, { "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"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PivotGridMessages, never, never, { "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"; }, {}, never>;
 }

package/main.d.ts

@@ -14,4 +14,5 @@ export { DraggableChipDirective } from './configurator/draggable.directive';
 export { DropTargetDirective } from './configurator/drop-target.directive';
 export { ExpandChangeEvent } from './models/expanded-change-event';
 export { ConfigurationChangeEvent } from './models/configuration-change-event';
+export { PivotDataRowItem } from './models/data-row-item';
 export { PivotGridAxis, PivotGridField, AxisDataItem, DimensionField, HierarchyField, KPIField, KPIMeasureField, LevelField, MeasureField, MemberField, PivotDataItem, sumAggregate, averageAggregate, minAggregate, maxAggregate, Aggregate, Dimension, Measure } from '@progress/kendo-pivotgrid-common';

package/models/data-row-item.d.ts

@@ -0,0 +1,18 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PivotDataItem } from "@progress/kendo-pivotgrid-common";
+/**
+ * The event data for DataLoadedEvent.
+ */
+export interface PivotDataRowItem {
+    /**
+     * The row hierarchy.
+     */
+    row: string[];
+    /**
+     * The aggregated cell data.
+     */
+    cells: PivotDataItem[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-pivotgrid",
-  "version": "0.2.0-dev.202208181339",
+  "version": "0.2.0-dev.202209020712",
   "description": "PivotGrid package for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -21,9 +21,9 @@
     "friendlyName": "PivotGrid"
   },
   "dependencies": {
-    "@progress/kendo-pivotgrid-common": "0.2.1",
-    "@telerik/kendo-draggable": "^2.0.0",
+    "@progress/kendo-pivotgrid-common": "0.4.0",
     "@progress/kendo-schematics": "^3.0.0",
+    "@telerik/kendo-draggable": "^2.0.0",
     "tslib": "^2.3.1"
   },
   "peerDependencies": {