@progress/kendo-angular-pivotgrid 1.0.2 → 1.1.0-dev.202210190858

package/fesm2015/kendo-angular-pivotgrid.js

@@ -7,7 +7,7 @@ import { EventEmitter, Injectable, Output, Component, HostBinding, Input, Direct
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i3 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, PreventableEvent, Keys, isChanged, 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';
+import { toTree, toRows, toColumns, toData, configuratorReducer, PIVOT_CONFIGURATOR_ACTION, PivotGridNavigation, ConfiguratorNavigation, 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, Subject, from, of, fromEvent } from 'rxjs';
 import { take, mergeMap, merge } from 'rxjs/operators';
@@ -17,9 +17,9 @@ import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i5$1 from '@progress/kendo-angular-indicators';
 import { IndicatorsModule } from '@progress/kendo-angular-indicators';
-import * as i1$1 from '@progress/kendo-angular-popup';
 import * as i4 from '@progress/kendo-angular-treeview';
-import { TreeViewModule } from '@progress/kendo-angular-treeview';
+import { TreeViewComponent, TreeViewModule } from '@progress/kendo-angular-treeview';
+import * as i1$1 from '@progress/kendo-angular-popup';
 import * as i5 from '@progress/kendo-angular-buttons';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import { trigger, state, style, transition, animate } from '@angular/animations';
@@ -38,7 +38,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-pivotgrid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1664197863,
+    publishDate: 1666169839,
     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'
 };
@@ -221,6 +221,14 @@ function cloneValue(value, nextValue) {
 function cloneArray(array) {
     return array.map(value => cloneValue(value, undefined));
 }
+/**
+ * @hidden
+ */
+const swapItems = (arr, i1, i2) => {
+    let temp = arr[i1];
+    arr[i1] = arr[i2];
+    arr[i2] = temp;
+};
 
 /**
  * @hidden
@@ -1593,7 +1601,7 @@ class ChipMenuComponent {
     close() {
         this.popupService.destroy();
         this.popupRef = null;
-        this.anchor.nativeElement.focus();
+        this.anchor.nativeElement.closest('.k-chip').focus();
     }
     get chipMenuTitle() {
         const localizationMsg = this.localization.get('chipMenuIconTitle') || '';
@@ -1946,19 +1954,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
+/**
+ * @hidden
+ */
+class ChipKeyboardNavigationDirective {
+    constructor(host, renderer, ngZone) {
+        this.host = host;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.keydownSub = new Subscription();
+        this.reorder = new EventEmitter();
+    }
+    ngOnInit() {
+        const chipElement = this.host.element.nativeElement;
+        this.ngZone.runOutsideAngular(() => {
+            this.keydownSub.add(this.renderer.listen(chipElement, 'keydown', (ev) => {
+                const isDeleteOrBackspace = ev.keyCode === Keys.Delete || ev.keyCode === Keys.Backspace;
+                const isAltDown = ev.keyCode === Keys.ArrowDown && ev.altKey;
+                const menuIcon = this.host.element.nativeElement.querySelector('.k-i-more-vertical');
+                const shiftAndMeta = ev.shiftKey && ev.metaKey;
+                const isArrow = [Keys.ArrowLeft, Keys.ArrowRight, Keys.ArrowDown, Keys.ArrowUp].includes(ev.keyCode);
+                const isReorderAction = shiftAndMeta && isArrow;
+                if (isDeleteOrBackspace) {
+                    this.ngZone.run(() => {
+                        this.host.remove.emit({ sender: this.host, originalEvent: ev });
+                    });
+                }
+                else if (isAltDown && menuIcon) {
+                    menuIcon.click();
+                }
+                else if (isReorderAction) {
+                    const direction = {
+                        [Keys.ArrowDown]: 'down',
+                        [Keys.ArrowUp]: 'up',
+                        [Keys.ArrowRight]: 'right',
+                        [Keys.ArrowLeft]: 'left'
+                    }[ev.keyCode];
+                    this.reorder.emit({
+                        direction,
+                        sender: this.host
+                    });
+                }
+            }));
+        });
+    }
+}
+ChipKeyboardNavigationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipKeyboardNavigationDirective, deps: [{ token: i5.ChipComponent }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+ChipKeyboardNavigationDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ChipKeyboardNavigationDirective, selector: "[kendoChipKeyboardNavigation]", outputs: { reorder: "reorder" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipKeyboardNavigationDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[kendoChipKeyboardNavigation]' }]
+        }], ctorParameters: function () { return [{ type: i5.ChipComponent }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { reorder: [{
+                type: Output
+            }] } });
+
 /**
  * @hidden
  * Represents the Kendo UI PivotGrid Configurator component for Angular.
  */
 class PivotGridConfiguratorComponent {
-    constructor(dataService, localization, configuratorService, cdr) {
+    constructor(dataService, localization, configuratorService, cdr, zone) {
         this.dataService = dataService;
         this.localization = localization;
         this.configuratorService = configuratorService;
         this.cdr = cdr;
+        this.zone = zone;
         this.hostClass = true;
+        this.hostAriaRole = 'dialog';
         this.orientation = 'vertical';
         this.sort = new Array();
+        this.close = new EventEmitter();
         this.checked = [];
         this.subs = new Subscription();
         /**
@@ -1976,6 +2041,9 @@ class PivotGridConfiguratorComponent {
             return of(node.children);
         };
     }
+    get headerTextId() {
+        return `k-pivotgrid-${this.dataService.pivotGridId}-configurator-header`;
+    }
     get isHorizontal() {
         return this.orientation === 'horizontal';
     }
@@ -2004,6 +2072,9 @@ class PivotGridConfiguratorComponent {
             this.cdr.detectChanges();
         }));
     }
+    ngAfterViewInit() {
+        this.treeView.focus();
+    }
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
@@ -2015,6 +2086,9 @@ class PivotGridConfiguratorComponent {
     getName(name) {
         return name.toString();
     }
+    contentLabelId(section) {
+        return `k-pivotgrid-${this.dataService.pivotGridId}-configurator-${section}`;
+    }
     setState(state) {
         this.dataService.state = {
             columnAxes: state.columnAxes,
@@ -2025,6 +2099,60 @@ class PivotGridConfiguratorComponent {
         };
         this.state = this.configuratorService.state = state;
     }
+    onReorder(ev, name, item) {
+        var _a, _b;
+        console.log(name, ev.direction);
+        const currentCollection = this.state[`${name}Axes`];
+        const itemIndex = currentCollection.indexOf(item);
+        switch (ev.direction) {
+            case 'right':
+                if (itemIndex !== currentCollection.length - 1) {
+                    swapItems(currentCollection, itemIndex, itemIndex + 1);
+                    this.dataService.state[`${name}Axes`] = currentCollection;
+                    const newState = Object.assign(Object.assign({}, this.state), this.dataService.state);
+                    this.setState(newState);
+                }
+                break;
+            case 'left':
+                if (itemIndex !== 0) {
+                    swapItems(currentCollection, itemIndex, itemIndex - 1);
+                    this.dataService.state[`${name}Axes`] = currentCollection;
+                    const newState = Object.assign(Object.assign({}, this.state), this.dataService.state);
+                    this.setState(newState);
+                    this.cdr.detectChanges();
+                    ev.sender.focus();
+                }
+                break;
+            case 'up':
+                if (name === 'row') {
+                    currentCollection.splice(itemIndex, 1);
+                    const columnAxes = this.state.columnAxes;
+                    columnAxes.push(item);
+                    this.dataService.state[`${name}Axes`] = currentCollection;
+                    this.dataService.state[`columnAxes`] = columnAxes;
+                    const newState = Object.assign(Object.assign({}, this.state), this.dataService.state);
+                    this.setState(newState);
+                    this.cdr.detectChanges();
+                    (_a = this.columnsList) === null || _a === void 0 ? void 0 : _a.chips.last.focus();
+                }
+                break;
+            case 'down':
+                if (name === 'column') {
+                    currentCollection.splice(itemIndex, 1);
+                    const rowAxes = this.state.rowAxes;
+                    rowAxes.push(item);
+                    this.dataService.state[`${name}Axes`] = currentCollection;
+                    this.dataService.state[`rowAxes`] = rowAxes;
+                    const newState = Object.assign(Object.assign({}, this.state), this.dataService.state);
+                    this.setState(newState);
+                    this.cdr.detectChanges();
+                    (_b = this.rowsList) === null || _b === void 0 ? void 0 : _b.chips.last.focus();
+                }
+                break;
+            default:
+                break;
+        }
+    }
     /**
      * Returns the localized message for a given token
      */
@@ -2056,12 +2184,18 @@ class PivotGridConfiguratorComponent {
      * Updates the respective axis configuration of the current state
      * when a chip is deleted from the UI
      */
-    onChipRemove(item, section) {
+    onChipRemove(ev, item, section) {
         const filteredItems = this.dataService.state[`${section}Axes`].filter(descriptor => descriptor !== item);
         this.dataService.state[`${section}Axes`] = filteredItems;
         const newState = Object.assign(Object.assign({}, this.state), this.dataService.state);
         this.checked = this.checked.filter(checkedItem => checkedItem.uniqueName !== item.name[0]);
         this.setState(newState);
+        if (!this.navigation) {
+            return;
+        }
+        ;
+        const targetIndex = this.navigation.elements.indexOf(ev.sender.element.nativeElement);
+        this.zone.runOutsideAngular(() => setTimeout(() => this.navigation.focusElement(this.navigation.elements[targetIndex - 1], this.navigation.elements[targetIndex])));
     }
     /**
      * Constructs an array with all selected fields.
@@ -2121,6 +2255,19 @@ class PivotGridConfiguratorComponent {
             payload: item
         };
         this.configuratorService.parseConfiguratorState(action);
+        const closestItem = event.target.closest('.k-treeview-item');
+        this.zone.runOutsideAngular(() => setTimeout(() => closestItem.focus()));
+    }
+    onTreeViewSelect(ev) {
+        var _a;
+        const closestItem = ev.target.closest('.k-treeview-item');
+        if (closestItem) {
+            (_a = closestItem.querySelector('.k-checkbox')) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    }
+    onTreeViewEscape(ev) {
+        ev.stopImmediatePropagation();
+        this.close.emit();
     }
     handleSubmit() {
         this.dataService.configuratorFieldChange.emit(this.dataService.state);
@@ -2154,12 +2301,12 @@ class PivotGridConfiguratorComponent {
     }
     ;
 }
-PivotGridConfiguratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridConfiguratorComponent, deps: [{ token: PivotGridDataService }, { token: i1.LocalizationService }, { token: ConfiguratorService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: { orientation: "orientation", sort: "sort", filter: "filter" }, host: { properties: { "class.k-pivotgrid-configurator": "this.hostClass" } }, providers: [
+PivotGridConfiguratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridConfiguratorComponent, deps: [{ token: PivotGridDataService }, { token: i1.LocalizationService }, { token: ConfiguratorService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: { orientation: "orientation", sort: "sort", filter: "filter", navigation: "navigation" }, outputs: { close: "close" }, host: { properties: { "class.k-pivotgrid-configurator": "this.hostClass", "attr.role": "this.hostAriaRole", "attr.aria-labelledby": "this.headerTextId" } }, providers: [
         ConfiguratorService,
         DropCueService,
         SinglePopupService
-    ], usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "treeView", first: true, predicate: TreeViewComponent, descendants: true }, { propertyName: "columnsList", first: true, predicate: ["columnsChiplist"], descendants: true }, { propertyName: "rowsList", first: true, predicate: ["rowsChiplist"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div 
             class="k-pivotgrid-configurator-panel k-pivotgrid-configurator-push"
             [ngClass]="{
@@ -2168,31 +2315,36 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             }"
         >
             <div class="k-pivotgrid-configurator-header">
-                <div class="k-pivotgrid-configurator-header-text">{{messageFor('configuratorHeaderText')}}</div>
+                <div
+                    [id]="headerTextId" 
+                    class="k-pivotgrid-configurator-header-text">{{messageFor('configuratorHeaderText')}}</div>
             </div>
 
             <div class="k-pivotgrid-configurator-content">
                 <div class="k-form" [class.k-form-horizontal]="isHorizontal">
                     <div class="k-form-field-wrapper">
                         <div class="k-form-field">
-                            <span class="k-label">{{messageFor('configuratorFieldsText')}}</span>
+                            <span [id]="contentLabelId('fields')" class="k-label">{{messageFor('configuratorFieldsText')}}</span>
                         </div>
-
                         <div class="k-form-field">
                             <div class="k-fields-list-wrapper">
                                 <kendo-treeview
+                                    #treeview
+                                    [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('fields')"
+                                    (focus)="treeview.focus()"
                                     [nodes]="fields"
                                     textField="caption"
                                     [children]="children"
                                     [hasChildren]="hasChildren"
                                     kendoTreeViewExpandable
                                     (childrenLoaded)="handleChildrenLoaded($event)"
-                                >
+                                    (keydown.space)="onTreeViewSelect($event)">
                                 <ng-template kendoTreeViewNodeTemplate let-dataItem>
                                     <input kendoCheckBox
                                         *ngIf="isSelectable(dataItem)"
                                         type="checkbox" 
                                         kendoCheckBox
+                                        tabindex="-1"
                                         [checked]="isItemChecked(dataItem)"
                                         (change)="handleCheckedChange($event, dataItem)"/>
                                     {{ dataItem.caption }}
@@ -2209,24 +2361,28 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
 
                     <ng-template #verticalTemplate>
                         <div class="k-form-field" kendoDropTarget axes="columnAxes">
-                            <span class="k-label">{{messageFor('configuratorColumnsText')}}</span>
+                            <span [id]="contentLabelId('columns')" class="k-label">{{messageFor('configuratorColumnsText')}}</span>
                         </div>
 
                         <kendo-chiplist
                             *ngIf="state.columnAxes && state.columnAxes.length; else noColumnAxes"
+                            #columnsChiplist
                             kendoDropTarget
                             axes="columnAxes"
+                            [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
                         >
-                            <ng-container *ngFor="let item of state.columnAxes">
+                            <ng-container *ngFor="let item of state.columnAxes; let i = index;">
                                 <kendo-chip *ngIf="item.name.length === 1"
                                     kendoChipDraggable
                                     kendoDraggable
                                     kendoDropTarget
+                                    kendoChipKeyboardNavigation
                                     [item]="item"
                                     axes="columnAxes"
                                     rounded="full"
                                     [removable]="true"
-                                    (remove)="onChipRemove(item, 'column')"
+                                    (remove)="onChipRemove($event, item, 'column')"
+                                    (reorder)="onReorder($event, 'column', item)"
                                 >{{ getName(item.name) }}
                                     <kendo-pivot-chip-menu
                                         [chip]="item">
@@ -2240,24 +2396,28 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                         </ng-template>
 
                         <div class="k-form-field" kendoDropTarget axes="rowAxes">
-                            <span class="k-label">{{messageFor('configuratorRowsText')}}</span>
+                            <span [id]="contentLabelId('rows')" class="k-label">{{messageFor('configuratorRowsText')}}</span>
                         </div>
 
                         <kendo-chiplist
                             *ngIf="state.rowAxes && state.rowAxes.length; else noRowAxes"
+                            #rowsChiplist
                             kendoDropTarget
                             axes="rowAxes"
+                            [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('rows')"
                         >
                             <ng-container *ngFor="let item of state.rowAxes">
                                 <kendo-chip *ngIf="item.name.length === 1"
                                     kendoChipDraggable
                                     kendoDraggable
                                     kendoDropTarget
+                                    kendoChipKeyboardNavigation
                                     [item]="item"
                                     axes="rowAxes"
                                     rounded="full"
                                     [removable]="true"
-                                    (remove)="onChipRemove(item, 'row')"
+                                    (remove)="onChipRemove($event, item, 'row')"
+                                    (reorder)="onReorder($event, 'row', item)"
                                 >
                                     {{ getName(item.name) }}
     
@@ -2279,23 +2439,26 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
 
                     <ng-template #verticalMeasuresTemplate>
                         <div class="k-form-field" kendoDropTarget axes="measureAxes">
-                            <span class="k-label">{{messageFor('configuratorValuesText')}}</span>
+                            <span [id]="contentLabelId('values')" class="k-label">{{messageFor('configuratorValuesText')}}</span>
                         </div>
 
                         <kendo-chiplist
                             *ngIf="state.measureAxes && state.measureAxes.length; else noMeasureAxes"
                             kendoDropTarget
                             axes="measureAxes"
+                            [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('values')"
                         >
                             <kendo-chip *ngFor="let item of state.measureAxes"
                                 kendoChipDraggable
                                 kendoDraggable
                                 kendoDropTarget
+                                kendoChipKeyboardNavigation
                                 [item]="item"
                                 axes="measureAxes"
                                 rounded="full"
                                 [removable]="true"
-                                (remove)="onChipRemove(item, 'measure')"
+                                (remove)="onChipRemove($event, item, 'measure')"
+                                (reorder)="onReorder($event, 'measure', item)"
                                 >
                                 {{ getName(item.name) }}
                             </kendo-chip>
@@ -2313,7 +2476,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 <button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
             </div>
         </div>
-   `, isInline: true, styles: ["\n        .k-form .k-chip-list {\n            width: 100%;\n        }\n\n        .k-form .k-form-field,\n        .k-form .k-settings-description {\n            padding-top: 1em;\n            margin-top: 0;\n        }\n\n        .k-form.k-form-horizontal .k-form-field,\n        .k-form.k-form-horizontal .k-chip-list {\n            padding-top: 0;\n            padding-left: 16px;\n        }\n\n        .k-form.k-form-horizontal .k-form-field-wrapper {\n            padding-left: 0;\n        }\n   "], components: [{ type: i4.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i5.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i5.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }, { type: ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: ["chip", "tabIndex"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i4.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+   `, isInline: true, styles: ["\n        .k-form .k-chip-list {\n            width: 100%;\n        }\n\n        .k-form .k-form-field,\n        .k-form .k-settings-description {\n            padding-top: 1em;\n            margin-top: 0;\n        }\n\n        .k-form.k-form-horizontal .k-form-field,\n        .k-form.k-form-horizontal .k-chip-list {\n            padding-top: 0;\n            padding-left: 16px;\n        }\n\n        .k-form.k-form-horizontal .k-form-field-wrapper {\n            padding-left: 0;\n        }\n   "], components: [{ type: i4.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i5.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i5.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }, { type: ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: ["chip", "tabIndex"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i4.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: ChipKeyboardNavigationDirective, selector: "[kendoChipKeyboardNavigation]", outputs: ["reorder"] }, { type: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
             type: Component,
             args: [{
@@ -2332,31 +2495,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }"
         >
             <div class="k-pivotgrid-configurator-header">
-                <div class="k-pivotgrid-configurator-header-text">{{messageFor('configuratorHeaderText')}}</div>
+                <div
+                    [id]="headerTextId" 
+                    class="k-pivotgrid-configurator-header-text">{{messageFor('configuratorHeaderText')}}</div>
             </div>
 
             <div class="k-pivotgrid-configurator-content">
                 <div class="k-form" [class.k-form-horizontal]="isHorizontal">
                     <div class="k-form-field-wrapper">
                         <div class="k-form-field">
-                            <span class="k-label">{{messageFor('configuratorFieldsText')}}</span>
+                            <span [id]="contentLabelId('fields')" class="k-label">{{messageFor('configuratorFieldsText')}}</span>
                         </div>
-
                         <div class="k-form-field">
                             <div class="k-fields-list-wrapper">
                                 <kendo-treeview
+                                    #treeview
+                                    [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('fields')"
+                                    (focus)="treeview.focus()"
                                     [nodes]="fields"
                                     textField="caption"
                                     [children]="children"
                                     [hasChildren]="hasChildren"
                                     kendoTreeViewExpandable
                                     (childrenLoaded)="handleChildrenLoaded($event)"
-                                >
+                                    (keydown.space)="onTreeViewSelect($event)">
                                 <ng-template kendoTreeViewNodeTemplate let-dataItem>
                                     <input kendoCheckBox
                                         *ngIf="isSelectable(dataItem)"
                                         type="checkbox" 
                                         kendoCheckBox
+                                        tabindex="-1"
                                         [checked]="isItemChecked(dataItem)"
                                         (change)="handleCheckedChange($event, dataItem)"/>
                                     {{ dataItem.caption }}
@@ -2373,24 +2541,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
                     <ng-template #verticalTemplate>
                         <div class="k-form-field" kendoDropTarget axes="columnAxes">
-                            <span class="k-label">{{messageFor('configuratorColumnsText')}}</span>
+                            <span [id]="contentLabelId('columns')" class="k-label">{{messageFor('configuratorColumnsText')}}</span>
                         </div>
 
                         <kendo-chiplist
                             *ngIf="state.columnAxes && state.columnAxes.length; else noColumnAxes"
+                            #columnsChiplist
                             kendoDropTarget
                             axes="columnAxes"
+                            [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
                         >
-                            <ng-container *ngFor="let item of state.columnAxes">
+                            <ng-container *ngFor="let item of state.columnAxes; let i = index;">
                                 <kendo-chip *ngIf="item.name.length === 1"
                                     kendoChipDraggable
                                     kendoDraggable
                                     kendoDropTarget
+                                    kendoChipKeyboardNavigation
                                     [item]="item"
                                     axes="columnAxes"
                                     rounded="full"
                                     [removable]="true"
-                                    (remove)="onChipRemove(item, 'column')"
+                                    (remove)="onChipRemove($event, item, 'column')"
+                                    (reorder)="onReorder($event, 'column', item)"
                                 >{{ getName(item.name) }}
                                     <kendo-pivot-chip-menu
                                         [chip]="item">
@@ -2404,24 +2576,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         </ng-template>
 
                         <div class="k-form-field" kendoDropTarget axes="rowAxes">
-                            <span class="k-label">{{messageFor('configuratorRowsText')}}</span>
+                            <span [id]="contentLabelId('rows')" class="k-label">{{messageFor('configuratorRowsText')}}</span>
                         </div>
 
                         <kendo-chiplist
                             *ngIf="state.rowAxes && state.rowAxes.length; else noRowAxes"
+                            #rowsChiplist
                             kendoDropTarget
                             axes="rowAxes"
+                            [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('rows')"
                         >
                             <ng-container *ngFor="let item of state.rowAxes">
                                 <kendo-chip *ngIf="item.name.length === 1"
                                     kendoChipDraggable
                                     kendoDraggable
                                     kendoDropTarget
+                                    kendoChipKeyboardNavigation
                                     [item]="item"
                                     axes="rowAxes"
                                     rounded="full"
                                     [removable]="true"
-                                    (remove)="onChipRemove(item, 'row')"
+                                    (remove)="onChipRemove($event, item, 'row')"
+                                    (reorder)="onReorder($event, 'row', item)"
                                 >
                                     {{ getName(item.name) }}
     
@@ -2443,23 +2619,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
                     <ng-template #verticalMeasuresTemplate>
                         <div class="k-form-field" kendoDropTarget axes="measureAxes">
-                            <span class="k-label">{{messageFor('configuratorValuesText')}}</span>
+                            <span [id]="contentLabelId('values')" class="k-label">{{messageFor('configuratorValuesText')}}</span>
                         </div>
 
                         <kendo-chiplist
                             *ngIf="state.measureAxes && state.measureAxes.length; else noMeasureAxes"
                             kendoDropTarget
                             axes="measureAxes"
+                            [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('values')"
                         >
                             <kendo-chip *ngFor="let item of state.measureAxes"
                                 kendoChipDraggable
                                 kendoDraggable
                                 kendoDropTarget
+                                kendoChipKeyboardNavigation
                                 [item]="item"
                                 axes="measureAxes"
                                 rounded="full"
                                 [removable]="true"
-                                (remove)="onChipRemove(item, 'measure')"
+                                (remove)="onChipRemove($event, item, 'measure')"
+                                (reorder)="onReorder($event, 'measure', item)"
                                 >
                                 {{ getName(item.name) }}
                             </kendo-chip>
@@ -2500,15 +2679,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }
    `]
                 }]
-        }], ctorParameters: function () { return [{ type: PivotGridDataService }, { type: i1.LocalizationService }, { type: ConfiguratorService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: PivotGridDataService }, { type: i1.LocalizationService }, { type: ConfiguratorService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-pivotgrid-configurator']
+            }], hostAriaRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], headerTextId: [{
+                type: HostBinding,
+                args: ['attr.aria-labelledby']
             }], orientation: [{
                 type: Input
             }], sort: [{
                 type: Input
             }], filter: [{
                 type: Input
+            }], navigation: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }], treeView: [{
+                type: ViewChild,
+                args: [TreeViewComponent]
+            }], columnsList: [{
+                type: ViewChild,
+                args: ['columnsChiplist']
+            }], rowsList: [{
+                type: ViewChild,
+                args: ['rowsChiplist']
             }] } });
 
 /**
@@ -2676,7 +2874,7 @@ class PivotGridComponent {
             this.rtl = rtl;
             this.direction = this.rtl ? 'rtl' : 'ltr';
         }));
-        dataService.wrapper = hostEl.nativeElement;
+        dataService.wrapper = this.hostEl.nativeElement;
     }
     get rightPositionClass() {
         var _a;
@@ -2769,10 +2967,32 @@ class PivotGridComponent {
     messageFor(localizationToken) {
         return this.localization.get(localizationToken);
     }
+    /**
+     * @hidden
+     */
+    toggleConfigurator() {
+        this.showConfigurator = !this.showConfigurator;
+        if (!this.navigable) {
+            return;
+        }
+        if (this.showConfigurator) {
+            this.zone.runOutsideAngular(() => setTimeout(() => this.initConfiguratorNavigation()));
+        }
+        else {
+            this.stopConfiguratorNavigation();
+            const el = this.navigation.current;
+            if (el) {
+                this.zone.runOutsideAngular(() => {
+                    setTimeout(() => this.navigation.focusElement(el, null));
+                });
+            }
+            ;
+        }
+    }
     initNavigation() {
         this.stopNavigation();
         this.navigation = new PivotGridNavigation({ tabIndex: 0 });
-        this.navigation.start(this.hostEl.nativeElement);
+        this.navigation.start(this.table.nativeElement);
         const firstCell = this.navigation.first;
         if (firstCell) {
             firstCell.setAttribute('tabindex', '0');
@@ -2793,6 +3013,21 @@ class PivotGridComponent {
             this.navigation.stop();
         }
     }
+    initConfiguratorNavigation() {
+        this.stopConfiguratorNavigation();
+        this.configuratorNavigation = new ConfiguratorNavigation({ tabIndex: 0 });
+        this.configuratorNavigation.start(this.configuratorWrapper.nativeElement);
+        this.configuratorNavigation.first.setAttribute('tabindex', '0');
+    }
+    stopConfiguratorNavigation() {
+        if (this.configuratorNavigation) {
+            const lastFocusedEl = this.configuratorNavigation.elements.find(el => el.hasAttribute('tabindex'));
+            if (lastFocusedEl) {
+                this.renderer.removeAttribute(lastFocusedEl, 'tabindex');
+            }
+            this.configuratorNavigation.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: i1.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: [
@@ -2803,7 +3038,7 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             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 }], usesOnChanges: true, 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 }, { propertyName: "configuratorWrapper", first: true, predicate: ["configurator"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoPivotGridLocalizedMessages
         i18n-loading="kendo.pivotgrid.loading|The loading text"
         loading="Loading"
@@ -2927,19 +3162,22 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 <span class="k-loading-text">{{ loadingText }}</span>
             </div>
         </div>
-
         <kendo-pivotgrid-configurator
+            #configurator
             *ngIf="showConfigurator"
-            [orientation]="configuratorSettings.orientation">
+            [navigation]="configuratorNavigation"
+            [orientation]="configuratorSettings.orientation"
+            (close)="toggleConfigurator()">
         </kendo-pivotgrid-configurator>
-
         <div *ngIf="configurator"
+            #configuratorButton
             class="k-pivotgrid-configurator-button"
-            (click)="showConfigurator = !showConfigurator">
+            aria-hidden="true"
+            (click)="toggleConfigurator()">
             <span>{{messageFor('configuratorButtonText')}}<span class="k-icon k-i-gear k-color-inherit"></span>
             </span>
         </div>
-   `, isInline: true, styles: ["\n        /** TODO: Remove if added to themes */\n        div.k-loader {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n        }\n   "], components: [{ type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth"] }, { type: i5$1.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["orientation", "sort", "filter"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+   `, isInline: true, styles: ["\n        /** TODO: Remove if added to themes */\n        div.k-loader {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n        }\n   "], components: [{ type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth"] }, { type: i5$1.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["orientation", "sort", "filter", "navigation"], outputs: ["close"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { type: i7.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: [{
@@ -3077,15 +3315,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 <span class="k-loading-text">{{ loadingText }}</span>
             </div>
         </div>
-
         <kendo-pivotgrid-configurator
+            #configurator
             *ngIf="showConfigurator"
-            [orientation]="configuratorSettings.orientation">
+            [navigation]="configuratorNavigation"
+            [orientation]="configuratorSettings.orientation"
+            (close)="toggleConfigurator()">
         </kendo-pivotgrid-configurator>
-
         <div *ngIf="configurator"
+            #configuratorButton
             class="k-pivotgrid-configurator-button"
-            (click)="showConfigurator = !showConfigurator">
+            aria-hidden="true"
+            (click)="toggleConfigurator()">
             <span>{{messageFor('configuratorButtonText')}}<span class="k-icon k-i-gear k-color-inherit"></span>
             </span>
         </div>
@@ -3136,6 +3377,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], table: [{
                 type: ViewChild,
                 args: ['table', { read: ElementRef }]
+            }], configuratorWrapper: [{
+                type: ViewChild,
+                args: ['configurator', { read: ElementRef }]
             }], loaderSettings: [{
                 type: Input
             }], configurator: [{
@@ -3245,6 +3489,7 @@ class PivotBaseBindingDirective {
         this.subs.add(this.dataService.valuesRows.subscribe((data) => {
             this.zone.run(() => {
                 this.dataService.aggregateData = data;
+                this.dataLoaded.emit(data);
             });
         }));
         this.dataService.directive = this;
@@ -3557,7 +3802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 /**
  * Custom component messages override default component messages
- * ([see example]({% slug globalization_pivotgrid %}#toc-localization)).
+ * ([see example]({% slug globalization_pivotgrid %}#toc-custom-messages)).
  */
 class CustomMessagesComponent extends PivotGridMessages {
     constructor(service) {
@@ -3704,7 +3949,8 @@ const DECLARATIONS = [
     DraggableChipDirective,
     DropTargetDirective,
     LocalizedMessagesDirective,
-    CustomMessagesComponent
+    CustomMessagesComponent,
+    ChipKeyboardNavigationDirective
 ];
 const EXPORTS = [
     PivotGridComponent,
@@ -3729,7 +3975,8 @@ PivotGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         DraggableChipDirective,
         DropTargetDirective,
         LocalizedMessagesDirective,
-        CustomMessagesComponent], imports: [EventsModule,
+        CustomMessagesComponent,
+        ChipKeyboardNavigationDirective], imports: [EventsModule,
         IndicatorsModule,
         TreeViewModule,
         DraggableModule,