@progress/kendo-angular-grid 7.0.1 → 7.1.0-dev.202206011456

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/base-filter-cell.component.js

@@ -85,7 +85,6 @@ export const localizeOperators = operators => localization => Object.keys(operat
 }));
 /**
  * An abstract base class for the filter-cell component ([see example]({% slug reusablecustomfilters_grid %}#toc-filter-row)).
- * @hidden
  */
 export class BaseFilterCellComponent {
     constructor(filterService) {

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"
@@ -2590,7 +2614,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: i23.ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position"] }, { type: i24.PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "template"], outputs: ["pageChange"] }, { type: i25.GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "groups"], outputs: ["change"] }, { type: i26.ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate"] }, { type: i27.HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex"] }, { type: i28.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: i29.FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: i30.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: i31.LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }], directives: [{ type: i32.LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i33.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i34.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i35.ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i36.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i37.GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, components: [{ type: i23.ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position"] }, { type: i24.PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "template"], outputs: ["pageChange"] }, { type: i25.GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "groups"], outputs: ["change"] }, { type: i26.ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate"] }, { type: i27.HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex"] }, { type: i28.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: i29.FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: i30.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: i31.LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }], directives: [{ type: i32.LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i33.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i34.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i35.ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i36.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i37.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: [{
@@ -2639,19 +2663,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"
@@ -2865,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"
@@ -2920,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
@@ -2951,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">
@@ -3056,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"
@@ -3090,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

@@ -5,6 +5,7 @@
 export { GridModule } from './grid.module';
 export { SharedModule } from './shared.module';
 export { GridComponent } from './grid.component';
+export { ColumnsContainer } from './columns/columns-container';
 export { ColumnBase } from './columns/column-base';
 export { ColumnComponent } from './columns/column.component';
 export { CommandColumnComponent } from './columns/command-column.component';
@@ -104,10 +105,12 @@ export { ExcelComponent } from './excel/excel.component';
 export { ExcelService } from './excel/excel.service';
 export { ExcelExportEvent } from './excel/excel-export-event';
 export { CellCloseEvent } from './editing/cell-close-event';
+export { ColumnInfoService } from './common/column-info.service';
 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: 1652253736,
+    publishDate: 1654095302,
     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/header/header.component.js

@@ -615,21 +615,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: i9.FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: i10.ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: i11.FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i15.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i16.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i17.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i18.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i19.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: i20.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i21.ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }] });
+    `, isInline: true, components: [{ type: i9.FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: i10.ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: i11.FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i15.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i16.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i17.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i18.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i19.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: i20.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i21.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"

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;
         }