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

package/esm2015/pivotgrid.component.js

@@ -12,7 +12,7 @@ import { cloneArray, 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 { ConfiguratorNavigation, PivotGridNavigation } from '@progress/kendo-pivotgrid-common';
 import { PivotLocalizationService } from './localization/pivot-localization.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./data-binding/pivotgrid-data.service";
@@ -86,7 +86,7 @@ export class PivotGridComponent {
             this.rtl = rtl;
             this.direction = this.rtl ? 'rtl' : 'ltr';
         }));
-        dataService.wrapper = hostEl.nativeElement;
+        dataService.wrapper = this.hostEl.nativeElement;
     }
     get rightPositionClass() {
         var _a;
@@ -179,10 +179,32 @@ export 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');
@@ -203,6 +225,21 @@ export 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: 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: [
@@ -213,7 +250,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"
@@ -337,19 +374,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: i4.PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth"] }, { type: i5.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { type: i6.PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["orientation", "sort", "filter"] }], directives: [{ type: i7.LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { type: i8.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: i4.PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth"] }, { type: i5.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { type: i6.PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["orientation", "sort", "filter", "navigation"], outputs: ["close"] }], directives: [{ type: i7.LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridComponent, decorators: [{
             type: Component,
             args: [{
@@ -487,15 +527,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>
@@ -546,6 +589,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: [{

package/esm2015/pivotgrid.module.js

@@ -18,6 +18,7 @@ import { DraggableChipDirective } from './configurator/draggable.directive';
 import { DropTargetDirective } from './configurator/drop-target.directive';
 import { ChipMenuModule } from './configurator/chip-menu/chip-menu.module';
 import { SharedModule } from './shared.module';
+import { ChipKeyboardNavigationDirective } from './configurator/chip-kb-nav.directive';
 import * as i0 from "@angular/core";
 const IMPORTED_MODULES = [
     EventsModule,
@@ -37,7 +38,8 @@ const DECLARATIONS = [
     DraggableChipDirective,
     DropTargetDirective,
     LocalizedMessagesDirective,
-    CustomMessagesComponent
+    CustomMessagesComponent,
+    ChipKeyboardNavigationDirective
 ];
 const EXPORTS = [
     PivotGridComponent,
@@ -62,7 +64,8 @@ PivotGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         DraggableChipDirective,
         DropTargetDirective,
         LocalizedMessagesDirective,
-        CustomMessagesComponent], imports: [EventsModule,
+        CustomMessagesComponent,
+        ChipKeyboardNavigationDirective], imports: [EventsModule,
         IndicatorsModule,
         TreeViewModule,
         DraggableModule,

package/esm2015/util.js

@@ -180,3 +180,11 @@ export function cloneValue(value, nextValue) {
 export function cloneArray(array) {
     return array.map(value => cloneValue(value, undefined));
 }
+/**
+ * @hidden
+ */
+export const swapItems = (arr, i1, i2) => {
+    let temp = arr[i1];
+    arr[i1] = arr[i2];
+    arr[i2] = temp;
+};