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

package/fesm2015/kendo-angular-grid.js

@@ -1515,6 +1515,8 @@ 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) {
@@ -1527,6 +1529,12 @@ 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;
@@ -1542,7 +1550,8 @@ 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;
@@ -1718,6 +1727,10 @@ 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();
@@ -2822,7 +2835,7 @@ 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'
 };
@@ -7729,7 +7742,7 @@ class PagerComponent {
         return this._isFocused;
     }
     get pagerAriaLabel() {
-        return this.navigationService.enabled ? this.pagerLabel : undefined;
+        return this.navigationService.pagerEnabled ? this.pagerLabel : undefined;
     }
     /**
      * @hidden
@@ -7742,7 +7755,7 @@ 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;
@@ -7754,18 +7767,18 @@ 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();
         }
@@ -7807,7 +7820,7 @@ 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();
         }
     }
@@ -7860,7 +7873,7 @@ 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;
     }
@@ -7896,7 +7909,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"
@@ -7923,7 +7936,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"
@@ -7949,7 +7962,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"
@@ -7976,7 +7989,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"
@@ -10973,7 +10986,7 @@ 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 {
@@ -10984,7 +10997,7 @@ class FilterMenuComponent {
     }
     close() {
         this.popupService.destroy();
-        if (this.navigationService.enabled) {
+        if (this.navigationService.tableEnabled) {
             this.navigationService.focusCell(0, this.column.leafIndex);
         }
         else {
@@ -12558,7 +12571,7 @@ 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 {
@@ -12572,7 +12585,7 @@ 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 {
@@ -13488,13 +13501,13 @@ 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) {
@@ -13503,7 +13516,7 @@ class LogicalCellDirective {
         this.registerNoChanges();
     }
     ngOnChanges(changes) {
-        if (!this.navigationService.enabled) {
+        if (!this.navigationService.tableEnabled) {
             return;
         }
         const keys = Object.keys(changes);
@@ -17298,7 +17311,7 @@ class ListComponent {
         }
     }
     resetNavigationViewport() {
-        if (!this.container || !this.navigationService.enabled ||
+        if (!this.container || !this.navigationService.tableEnabled ||
             !this.navigationService.needsViewport() || this.data.length === 0) {
             return;
         }
@@ -18260,11 +18273,6 @@ 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`.
@@ -18440,6 +18448,7 @@ class GridComponent {
         this.cachedWindowWidth = 0;
         this._rowSelected = null;
         this._cellSelected = null;
+        this._navigable = [];
         this.rtl = false;
         this._rowClass = () => null;
         validatePackage(packageMetadata);
@@ -18571,6 +18580,21 @@ 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
      *
@@ -18794,6 +18818,9 @@ class GridComponent {
     get ariaColCount() {
         return this.columnsContainer.leafColumnsToRender.length;
     }
+    get navigation() {
+        return this.navigationService;
+    }
     get isVirtual() {
         return this.scrollable === 'virtual';
     }
@@ -18989,6 +19016,16 @@ class GridComponent {
         if (isChanged$1('groupable', changes, true)) {
             this.groupable = changes.groupable.currentValue;
         }
+        if (isChanged$1('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();
@@ -19008,8 +19045,8 @@ 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() {
@@ -19970,8 +20007,8 @@ 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() {
@@ -20337,8 +20374,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"
@@ -20392,7 +20429,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
@@ -20423,7 +20460,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">
@@ -20528,7 +20565,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"
@@ -20562,8 +20599,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"
@@ -20834,8 +20871,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"
@@ -20889,7 +20926,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
@@ -20920,7 +20957,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">
@@ -21025,7 +21062,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"
@@ -21059,8 +21096,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/grid.component.d.ts

@@ -73,6 +73,7 @@ import { GroupRowArgs } from './grouping/group-rows-args.interface';
 import { CellLoadingTemplateDirective } from './rendering/cell-loading.template.directive';
 import { ContextService } from './common/provider.service';
 import { LoadingTemplateDirective } from './rendering/loading-template.directive';
+import { GridNavigableSettings } from './navigation/navigable-settings';
 import * as i0 from "@angular/core";
 /**
  * Represents the Kendo UI Grid component for Angular.
@@ -306,14 +307,16 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
     /**
      * 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.
      */
-    navigable: boolean;
+    set navigable(value: GridNavigableSettings);
+    get navigable(): GridNavigableSettings;
     /**
      * @hidden
      *
      * An alias for `navigable` for users who migrate from Kendo UI for jQuery.
      */
-    set navigatable(value: boolean);
+    set navigatable(value: GridNavigableSettings);
     /**
      * Indicates whether the Grid columns will be resized during initialization so that
      * they fit their headers and row content. Defaults to `false`.
@@ -325,7 +328,7 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
     /**
      * @hidden
      */
-    get navigatable(): boolean;
+    get navigatable(): GridNavigableSettings;
     /**
      * Defines a function that is executed for every data row in the component.
      *
@@ -598,6 +601,7 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
     get showGroupFooters(): boolean;
     get ariaRowCount(): number;
     get ariaColCount(): number;
+    get navigation(): NavigationService;
     private shouldGenerateColumns;
     private direction;
     private _sort;
@@ -615,6 +619,7 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
     private _customToolbarTemplate;
     private leafViewportColumns;
     private viewportColumns;
+    private _navigable;
     get isVirtual(): boolean;
     get isScrollable(): boolean;
     get visibleColumns(): QueryList<ColumnBase>;

package/main.d.ts

@@ -145,6 +145,7 @@ export { ColumnReorderConfig } from './dragdrop/column-reorder-config';
 export { FocusableDirective } from './navigation/focusable.directive';
 export { NavigationCell } from './navigation/navigation-cell.interface';
 export { NavigationRow } from './navigation/navigation-row.interface';
+export { GridNavigableSettings, GridNavigableSection } from './navigation/navigable-settings';
 export { ColumnMenuSettings } from './column-menu/column-menu-settings.interface';
 export { ColumnVisibilityChangeEvent } from './column-menu/column-visibility-change-event';
 export { ExpandableColumnMenuItem } from './column-menu/column-menu-expandable-item.interface';

package/navigation/navigable-settings.d.ts

@@ -0,0 +1,12 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the possible navigable sections of the Grid.
+ */
+export declare type GridNavigableSection = 'pager' | 'table';
+/**
+ * Represents the type of the Grid [`navigable`]({% slug api_grid_gridcomponent %}#toc-navigable) option.
+ */
+export declare type GridNavigableSettings = boolean | GridNavigableSection[];

package/navigation/navigation.service.d.ts

@@ -19,6 +19,7 @@ import { GroupsService } from '../grouping/groups.service';
 import { PagerContextService } from '../pager/pager-context.service';
 import { DetailsService } from '../rendering/details/details.service';
 import { ScrollRequestService } from '../scrolling/scroll-request.service';
+import { GridNavigableSection } from './navigable-settings';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -50,6 +51,8 @@ export declare class NavigationService implements OnDestroy {
     set metadata(value: NavigationMetadata);
     get metadata(): NavigationMetadata;
     get enabled(): boolean;
+    get pagerEnabled(): boolean;
+    get tableEnabled(): boolean;
     get activeCell(): NavigationCell;
     get activeRow(): NavigationRow;
     viewport: NavigationViewport;
@@ -64,9 +67,11 @@ export declare class NavigationService implements OnDestroy {
     private subs;
     private pendingRowIndex;
     private virtualCell;
+    private pagerIsNavigable;
+    private tableIsNavigable;
     private get activeDataRow();
     constructor(zone: NgZone, domEvents: DomEventsService, pagerContextService: PagerContextService, scrollRequestService: ScrollRequestService, groupsService: GroupsService, detailsService: DetailsService, focusRoot: FocusRoot, editService: EditService, cd: ChangeDetectorRef, localization: LocalizationService, focusableParent: FocusableDirective);
-    init(meta: NavigationMetadata): void;
+    init(meta: NavigationMetadata, navigableOptions: GridNavigableSection[]): void;
     ngOnDestroy(): void;
     registerCell(cell: LogicalCell): void;
     registerCellOnCurrentRow(cell: LogicalCell): void;
@@ -88,6 +93,7 @@ export declare class NavigationService implements OnDestroy {
     toggle(active: boolean): void;
     hasFocus(): boolean;
     autoFocusCell(start: number, end: number): boolean;
+    setActiveSections(navigableOptions: GridNavigableSection[]): void;
     private focusAdjacentCell;
     private enterCell;
     private leaveCell;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-grid",
-  "version": "7.0.2-dev.202205230854",
+  "version": "7.1.0-dev.202205311232",
   "description": "Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",