@progress/kendo-angular-grid 7.0.2-dev.202205230854 → 7.1.0-dev.202205311232

package/esm2015/column-menu/column-menu.component.js

@@ -128,7 +128,7 @@ export class ColumnMenuComponent {
         this.expandedPosition = this.getExpandedState(this.settings.setColumnPosition);
         this.popupRef = this.popupService.open(anchor, template, this.popupRef, POPUP_CLASS);
         if (!this.popupRef) {
-            if (this.navigationService.enabled) {
+            if (this.navigationService.tableEnabled) {
                 this.navigationService.focusCell(0, this.column.leafIndex);
             }
             else {
@@ -142,7 +142,7 @@ export class ColumnMenuComponent {
     close() {
         this.popupService.destroy();
         this.popupRef = null;
-        if (this.navigationService.enabled) {
+        if (this.navigationService.tableEnabled) {
             this.navigationService.focusCell(0, this.column.leafIndex);
         }
         else {

package/esm2015/filtering/menu/filter-menu.component.js

@@ -37,7 +37,7 @@ export class FilterMenuComponent {
     toggle(anchor, template) {
         this.popupRef = this.popupService.open(anchor, template, this.popupRef);
         if (!this.popupRef) {
-            if (this.navigationService.enabled) {
+            if (this.navigationService.tableEnabled) {
                 this.navigationService.focusCell(0, this.column.leafIndex);
             }
             else {
@@ -48,7 +48,7 @@ export class FilterMenuComponent {
     }
     close() {
         this.popupService.destroy();
-        if (this.navigationService.enabled) {
+        if (this.navigationService.tableEnabled) {
             this.navigationService.focusCell(0, this.column.leafIndex);
         }
         else {

package/esm2015/grid.component.js

@@ -278,11 +278,6 @@ export class GridComponent {
          * By default, grouping is disabled ([see example]({% slug groupingbasics_grid %})).
          */
         this.groupable = false;
-        /**
-         * If set to `true`, the user can use dedicated shortcuts to interact with the Grid.
-         * By default, navigation is disabled and the Grid content is accessible in the normal tab sequence.
-         */
-        this.navigable = false;
         /**
          * Indicates whether the Grid columns will be resized during initialization so that
          * they fit their headers and row content. Defaults to `false`.
@@ -458,6 +453,7 @@ export class GridComponent {
         this.cachedWindowWidth = 0;
         this._rowSelected = null;
         this._cellSelected = null;
+        this._navigable = [];
         this.rtl = false;
         this._rowClass = () => null;
         validatePackage(packageMetadata);
@@ -589,6 +585,21 @@ export class GridComponent {
     get marqueeSelection() {
         return this.selectionService.enableMarquee || this.cellSelectionService.enableMarquee;
     }
+    /**
+     * If set to `true`, the user can use dedicated shortcuts to interact with the Grid.
+     * By default, navigation is disabled and the Grid content is accessible in the normal tab sequence.
+     * To enable navigation through separate Grid sections only, provide a [`GridNavigableSection`]({% slug api_grid_gridnavigablesection %}) array.
+     */
+    set navigable(value) {
+        if (typeof value === 'boolean') {
+            this._navigable = value ? ['table', 'pager'] : [];
+            return;
+        }
+        this._navigable = value;
+    }
+    get navigable() {
+        return this._navigable;
+    }
     /**
      * @hidden
      *
@@ -812,6 +823,9 @@ export class GridComponent {
     get ariaColCount() {
         return this.columnsContainer.leafColumnsToRender.length;
     }
+    get navigation() {
+        return this.navigationService;
+    }
     get isVirtual() {
         return this.scrollable === 'virtual';
     }
@@ -1007,6 +1021,16 @@ export class GridComponent {
         if (isChanged('groupable', changes, true)) {
             this.groupable = changes.groupable.currentValue;
         }
+        if (isChanged('navigable', changes, true)) {
+            if (this.navigationService.enabled) {
+                this.navigationService.setActiveSections(this.navigable);
+            }
+            else {
+                if (this.navigable.length) {
+                    this.navigationService.init(this.navigationMetadata(), this.navigable);
+                }
+            }
+        }
     }
     ngAfterViewInit() {
         this.attachScrollSync();
@@ -1026,8 +1050,8 @@ export class GridComponent {
         this.columnsChangeSubscription = this.columns.changes.subscribe(() => this.verifySettings());
     }
     ngOnInit() {
-        if (this.navigable) {
-            this.navigationService.init(this.navigationMetadata());
+        if (this.navigable.length) {
+            this.navigationService.init(this.navigationMetadata(), this.navigable);
         }
     }
     ngOnDestroy() {
@@ -1988,8 +2012,8 @@ export class GridComponent {
         this.columnResize.emit(args);
     }
     assertNavigable() {
-        if (isDevMode() && !this.navigable) {
-            throw new Error('The Grid should be configured as [navigable]="true" to control focus');
+        if (isDevMode() && !this.navigationService.enabled) {
+            throw new Error('The Grid should be configured as navigable to control focus');
         }
     }
     navigationMetadata() {
@@ -2355,8 +2379,8 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         <kendo-grid-toolbar class="k-toolbar k-grid-toolbar" *ngIf="showTopToolbar" position="top"></kendo-grid-toolbar>
         <kendo-pager
             *ngIf="showTopPager"
-            [tabindex]="navigable ? '0' : '-1'"
-            [attr.role]="navigable ? 'navigation' : undefined"
+            [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
+            [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
             class="k-grid-pager-top"
             [template]="pagerTemplate"
             [pageSize]="pageSize"
@@ -2410,7 +2434,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                             [columnMenuTemplate]="columnMenuTemplate"
                             [totalColumnsCount]="leafColumns.length"
                             [detailTemplate]="detailTemplate"
-                            [tabIndex]="navigable ? '-1' : '0'">
+                            [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
                         </thead>
                     </table>
                 </div><div #header class="k-grid-header-wrap" role="presentation" data-scrollable
@@ -2441,7 +2465,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                             [lockedColumnsCount]="lockedLeafColumns.length"
                             [totalColumnsCount]="leafColumns.length"
                             [detailTemplate]="detailTemplate"
-                            [tabIndex]="navigable ? '-1' : '0'">
+                            [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
                         </thead>
                     </table>
                     <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
@@ -2546,7 +2570,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     [columnMenu]="columnMenuOptions"
                     [columnMenuTemplate]="columnMenuTemplate"
                     [detailTemplate]="detailTemplate"
-                    [tabIndex]="navigable ? '-1' : '0'">
+                    [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
                 </thead>
                 <tbody kendoGridTableBody
                     [isLoading]="loading"
@@ -2580,8 +2604,8 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         </div>
         <kendo-pager
             *ngIf="showBottomPager"
-            [tabindex]="navigable ? '0' : '-1'"
-            [attr.role]="navigable ? 'navigation' : undefined"
+            [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
+            [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
             [template]="pagerTemplate"
             [pageSize]="pageSize"
             [total]="view.total"
@@ -2852,8 +2876,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <kendo-grid-toolbar class="k-toolbar k-grid-toolbar" *ngIf="showTopToolbar" position="top"></kendo-grid-toolbar>
         <kendo-pager
             *ngIf="showTopPager"
-            [tabindex]="navigable ? '0' : '-1'"
-            [attr.role]="navigable ? 'navigation' : undefined"
+            [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
+            [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
             class="k-grid-pager-top"
             [template]="pagerTemplate"
             [pageSize]="pageSize"
@@ -2907,7 +2931,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                             [columnMenuTemplate]="columnMenuTemplate"
                             [totalColumnsCount]="leafColumns.length"
                             [detailTemplate]="detailTemplate"
-                            [tabIndex]="navigable ? '-1' : '0'">
+                            [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
                         </thead>
                     </table>
                 </div><div #header class="k-grid-header-wrap" role="presentation" data-scrollable
@@ -2938,7 +2962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                             [lockedColumnsCount]="lockedLeafColumns.length"
                             [totalColumnsCount]="leafColumns.length"
                             [detailTemplate]="detailTemplate"
-                            [tabIndex]="navigable ? '-1' : '0'">
+                            [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
                         </thead>
                     </table>
                     <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
@@ -3043,7 +3067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [columnMenu]="columnMenuOptions"
                     [columnMenuTemplate]="columnMenuTemplate"
                     [detailTemplate]="detailTemplate"
-                    [tabIndex]="navigable ? '-1' : '0'">
+                    [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
                 </thead>
                 <tbody kendoGridTableBody
                     [isLoading]="loading"
@@ -3077,8 +3101,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </div>
         <kendo-pager
             *ngIf="showBottomPager"
-            [tabindex]="navigable ? '0' : '-1'"
-            [attr.role]="navigable ? 'navigation' : undefined"
+            [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
+            [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
             [template]="pagerTemplate"
             [pageSize]="pageSize"
             [total]="view.total"

package/esm2015/main.js

@@ -108,6 +108,7 @@ export { SuspendService } from './scrolling/suspend.service';
 export { GroupBindingDirective, slice, count } from './grouping/group-scroll-binding.directive';
 export { Skip } from './utils';
 export { ColumnReorderEvent } from './dragdrop/column-reorder-event';
+// KB Nav
 export { FocusableDirective } from './navigation/focusable.directive';
 export { ColumnVisibilityChangeEvent } from './column-menu/column-visibility-change-event';
 export { ColumnMenuComponent } from './column-menu/column-menu.component';

package/esm2015/navigation/logical-cell.directive.js

@@ -47,13 +47,13 @@ export class LogicalCellDirective {
         return this.logicalColIndex + 1;
     }
     ngOnInit() {
-        if (!this.navigationService.enabled) {
+        if (!this.navigationService.tableEnabled) {
             return;
         }
         this.navigationChange = this.navigationService.changes.subscribe((e) => this.onNavigationChange(e));
     }
     ngDoCheck() {
-        if (!this.navigationService.enabled || this.logicalColIndex === -1) {
+        if (!this.navigationService.tableEnabled || this.logicalColIndex === -1) {
             return;
         }
         if (this.cellContext) {
@@ -62,7 +62,7 @@ export class LogicalCellDirective {
         this.registerNoChanges();
     }
     ngOnChanges(changes) {
-        if (!this.navigationService.enabled) {
+        if (!this.navigationService.tableEnabled) {
             return;
         }
         const keys = Object.keys(changes);

package/esm2015/navigation/navigable-settings.js

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* 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/navigation/navigation.service.js

@@ -94,6 +94,8 @@ export class NavigationService {
         this.mode = 0 /* Standby */;
         this.model = new NavigationModel();
         this.cursor = new NavigationCursor(this.model);
+        this.pagerIsNavigable = false;
+        this.tableIsNavigable = false;
         this.changes = this.cursor.changes;
     }
     set metadata(value) {
@@ -106,6 +108,12 @@ export class NavigationService {
     get enabled() {
         return this.alive;
     }
+    get pagerEnabled() {
+        return this.alive && this.pagerIsNavigable;
+    }
+    get tableEnabled() {
+        return this.alive && this.tableIsNavigable;
+    }
     get activeCell() {
         if (this.mode !== 0 /* Standby */) {
             return this.cursor.cell;
@@ -121,7 +129,8 @@ export class NavigationService {
     get activeDataRow() {
         return Math.max(0, this.activeRowIndex - this.meta.headerRows);
     }
-    init(meta) {
+    init(meta, navigableOptions) {
+        this.setActiveSections(navigableOptions);
         this.alive = true;
         this.focusRoot.active = true;
         this.metadata = meta;
@@ -297,6 +306,10 @@ export class NavigationService {
     autoFocusCell(start, end) {
         return !this.meta.virtualColumns || end < this.meta.columns.lockedLeafColumns.length || this.columnViewport.intersects(start, end);
     }
+    setActiveSections(navigableOptions) {
+        this.pagerIsNavigable = navigableOptions.includes('pager');
+        this.tableIsNavigable = navigableOptions.includes('table');
+    }
     focusAdjacentCell(fwd, wrap) {
         this.focusCell();
         let success = fwd ? this.moveCursorFwd() : this.moveCursorBwd();

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1653295994,
+    publishDate: 1654000234,
     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/pager/pager.component.js

@@ -75,7 +75,7 @@ export class PagerComponent {
         return this._isFocused;
     }
     get pagerAriaLabel() {
-        return this.navigationService.enabled ? this.pagerLabel : undefined;
+        return this.navigationService.pagerEnabled ? this.pagerLabel : undefined;
     }
     /**
      * @hidden
@@ -88,7 +88,7 @@ export class PagerComponent {
         return this.focusGroup.isActive ? '0' : '-1';
     }
     onFocusIn(event) {
-        if (this.navigationService.enabled) {
+        if (this.navigationService.pagerEnabled) {
             const shouldFocusPager = event.target === this.element.nativeElement;
             if (shouldFocusPager) {
                 this._isFocused = true;
@@ -100,18 +100,18 @@ export class PagerComponent {
         }
     }
     onFocusOut() {
-        if (this.navigationService.enabled) {
+        if (this.navigationService.pagerEnabled) {
             this._isFocused = false;
         }
     }
     onEscape() {
-        if (this.navigationService.enabled) {
+        if (this.navigationService.pagerEnabled) {
             this.focusRoot.deactivate();
             this.element.nativeElement.focus();
         }
     }
     onEnter(event) {
-        if (this.navigationService.enabled && event.target === this.element.nativeElement) {
+        if (this.navigationService.pagerEnabled && event.target === this.element.nativeElement) {
             this.focusRoot.activate();
             this.focusFirstElement();
         }
@@ -153,7 +153,7 @@ export class PagerComponent {
     }
     ngOnInit() {
         this.subscriptions.add(this.pagerContext.pageChange.subscribe(this.changePage.bind(this)));
-        if (this.navigationService.enabled) {
+        if (this.navigationService.pagerEnabled) {
             this.focusRoot.deactivate();
         }
     }
@@ -206,7 +206,7 @@ export class PagerComponent {
         this.renderer.removeClass(element, 'k-pager-md');
     }
     shouldTriggerPageChange(target, condition) {
-        return this.navigationService.enabled &&
+        return this.navigationService.pagerEnabled &&
             target === this.element.nativeElement &&
             condition;
     }
@@ -242,7 +242,7 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             useClass: FocusGroup
         }], usesOnChanges: true, ngImport: i0, template: `
         <div
-            *ngIf="navigationService.enabled"
+            *ngIf="navigationService.pagerEnabled"
             class="k-sr-only"
             [tabindex]="focusTrapTabIndex"
             [attr.aria-hidden]="true"
@@ -269,7 +269,7 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             ></kendo-pager-page-sizes>
         </ng-container>
         <div
-            *ngIf="navigationService.enabled"
+            *ngIf="navigationService.pagerEnabled"
             class="k-sr-only"
             [tabindex]="focusTrapTabIndex"
             [attr.aria-hidden]="true"
@@ -295,7 +295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         }],
                     template: `
         <div
-            *ngIf="navigationService.enabled"
+            *ngIf="navigationService.pagerEnabled"
             class="k-sr-only"
             [tabindex]="focusTrapTabIndex"
             [attr.aria-hidden]="true"
@@ -322,7 +322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             ></kendo-pager-page-sizes>
         </ng-container>
         <div
-            *ngIf="navigationService.enabled"
+            *ngIf="navigationService.pagerEnabled"
             class="k-sr-only"
             [tabindex]="focusTrapTabIndex"
             [attr.aria-hidden]="true"

package/esm2015/rendering/list.component.js

@@ -409,7 +409,7 @@ export class ListComponent {
         }
     }
     resetNavigationViewport() {
-        if (!this.container || !this.navigationService.enabled ||
+        if (!this.container || !this.navigationService.tableEnabled ||
             !this.navigationService.needsViewport() || this.data.length === 0) {
             return;
         }