@progress/kendo-angular-grid 7.0.1-dev.202205100915 → 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: 1652174049,
+    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"
@@ -8750,7 +8763,6 @@ const localizeOperators = operators => localization => Object.keys(operators).ma
 }));
 /**
  * An abstract base class for the filter-cell component ([see example]({% slug reusablecustomfilters_grid %}#toc-filter-row)).
- * @hidden
  */
 class BaseFilterCellComponent {
     constructor(filterService) {
@@ -10974,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 {
@@ -10985,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 {
@@ -12559,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 {
@@ -12573,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 {
@@ -13489,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) {
@@ -13504,7 +13516,7 @@ class LogicalCellDirective {
         this.registerNoChanges();
     }
     ngOnChanges(changes) {
-        if (!this.navigationService.enabled) {
+        if (!this.navigationService.tableEnabled) {
             return;
         }
         const keys = Object.keys(changes);
@@ -14717,21 +14729,11 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 [logicalSlaveCellsCount]="unlockedColumnsCount"
         ></tr>
     </ng-container>
-    `, isInline: true, styles: ["\n        .k-column-resizer {\n            cursor: col-resize;\n            display: block;\n            height: 1000%;\n            position: absolute;\n            top: 0;\n            width: .5em;\n        }\n    "], components: [{ type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }] });
+    `, isInline: true, components: [{ type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoGridHeader]',
-                    styles: [`
-        .k-column-resizer {
-            cursor: col-resize;
-            display: block;
-            height: 1000%;
-            position: absolute;
-            top: 0;
-            width: .5em;
-        }
-    `],
                     template: `
     <ng-container>
         <tr *ngFor="let i of columnLevels; let levelIndex = index"
@@ -17309,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;
         }
@@ -18271,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`.
@@ -18451,6 +18448,7 @@ class GridComponent {
         this.cachedWindowWidth = 0;
         this._rowSelected = null;
         this._cellSelected = null;
+        this._navigable = [];
         this.rtl = false;
         this._rowClass = () => null;
         validatePackage(packageMetadata);
@@ -18582,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
      *
@@ -18805,6 +18818,9 @@ class GridComponent {
     get ariaColCount() {
         return this.columnsContainer.leafColumnsToRender.length;
     }
+    get navigation() {
+        return this.navigationService;
+    }
     get isVirtual() {
         return this.scrollable === 'virtual';
     }
@@ -19000,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();
@@ -19019,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() {
@@ -19981,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() {
@@ -20348,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"
@@ -20403,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
@@ -20434,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">
@@ -20539,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"
@@ -20573,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"
@@ -20583,7 +20609,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             (pageChange)="notifyPageChange('pager', $event)">
         </kendo-pager>
         <kendo-grid-toolbar class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom" *ngIf="showBottomToolbar" position="bottom"></kendo-grid-toolbar>
-    `, isInline: true, styles: ["   .k-grid .k-grid-aria-root {\n            display: flex;\n            flex-direction: column;\n            flex: 1 1 auto;\n            overflow: hidden;\n        }\n\n        .k-grid .k-filter-row td {\n            white-space: nowrap;\n        }"], components: [{ type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position"] }, { type: PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "template"], outputs: ["pageChange"] }, { type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "groups"], outputs: ["change"] }, { type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate"] }, { type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex"] }, { type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position"] }, { type: PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "template"], outputs: ["pageChange"] }, { type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "groups"], outputs: ["change"] }, { type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate"] }, { type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex"] }, { type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
             args: [{
@@ -20632,19 +20658,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         ContextService
                     ],
                     selector: 'kendo-grid',
-                    styles: [
-                        // Styles for backwards compatibility with kendo-theme-default@v2.46.0 and earlier.
-                        `   .k-grid .k-grid-aria-root {
-            display: flex;
-            flex-direction: column;
-            flex: 1 1 auto;
-            overflow: hidden;
-        }
-
-        .k-grid .k-filter-row td {
-            white-space: nowrap;
-        }`
-                    ],
                     template: `
         <ng-container kendoGridLocalizedMessages
             i18n-groupPanelEmpty="kendo.grid.groupPanelEmpty|The label visible in the Grid group panel when it is empty"
@@ -20858,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"
@@ -20913,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
@@ -20944,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">
@@ -21049,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"
@@ -21083,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/filtering/base-filter-cell.component.d.ts

@@ -45,7 +45,6 @@ export declare const localizeOperators: (operators: any) => (localization: any)
 }[];
 /**
  * An abstract base class for the filter-cell component ([see example]({% slug reusablecustomfilters_grid %}#toc-filter-row)).
- * @hidden
  */
 export declare abstract class BaseFilterCellComponent implements AfterContentInit, OnDestroy {
     protected filterService: FilterService;

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.1-dev.202205100915",
+  "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",