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

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: 1654506318,
     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'
 };
@@ -6722,14 +6735,11 @@ class PagerElementComponent {
         }
     }
 }
-PagerElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerElementComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PagerElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PagerElementComponent, selector: "kendo-pager-element-base", ngImport: i0, template: ``, isInline: true });
+PagerElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerElementComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+PagerElementComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: PagerElementComponent, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerElementComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-pager-element-base',
-                    template: ``
-                }]
+            type: Directive,
+            args: [{}]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
@@ -6928,7 +6938,6 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
 }
 PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
 PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, host: { properties: { "class.k-pager-numbers-wrap": "this.numbersWrapClass" } }, usesInheritance: true, ngImport: i0, template: `
-        <!-- updated to address https://docs.angular.lat/guide/ivy-compatibility-examples#cannot-bind-to-value-property-of-select-with-ngfor -->
         <select
             class="k-dropdownlist k-pager-nav"
             kendoGridFocusable
@@ -6996,7 +7005,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-pager-numeric-buttons',
                     template: `
-        <!-- updated to address https://docs.angular.lat/guide/ivy-compatibility-examples#cannot-bind-to-value-property-of-select-with-ngfor -->
         <select
             class="k-dropdownlist k-pager-nav"
             kendoGridFocusable
@@ -7729,7 +7737,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 +7750,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 +7762,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 +7815,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 +7868,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 +7904,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 +7931,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 +7957,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 +7984,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"
@@ -8808,14 +8816,11 @@ class BaseFilterCellComponent {
         this.filterService.filter(filter);
     }
 }
-BaseFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseFilterCellComponent, deps: [{ token: FilterService }], target: i0.ɵɵFactoryTarget.Component });
-BaseFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BaseFilterCellComponent, selector: "kendo-grid-base-filter-cell", inputs: { operators: "operators" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, queries: [{ propertyName: "operatorList", predicate: FilterOperatorBase }], ngImport: i0, template: ``, isInline: true });
+BaseFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseFilterCellComponent, deps: [{ token: FilterService }], target: i0.ɵɵFactoryTarget.Directive });
+BaseFilterCellComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: BaseFilterCellComponent, inputs: { operators: "operators" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, queries: [{ propertyName: "operatorList", predicate: FilterOperatorBase }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseFilterCellComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-grid-base-filter-cell',
-                    template: ``
-                }]
+            type: Directive,
+            args: [{}]
         }], ctorParameters: function () { return [{ type: FilterService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-filtercell']
@@ -8996,14 +9001,11 @@ class StringFilterComponent extends BaseFilterCellComponent {
         }
     }
 }
-StringFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StringFilterComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-StringFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: StringFilterComponent, selector: "kendo-grid-string-filter-base", inputs: { column: "column", filter: "filter", operator: "operator" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+StringFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StringFilterComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+StringFilterComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: StringFilterComponent, inputs: { column: "column", filter: "filter", operator: "operator" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: StringFilterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-grid-string-filter-base',
-                    template: ``
-                }]
+            type: Directive,
+            args: [{}]
         }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }]; }, propDecorators: { column: [{
                 type: Input
             }], filter: [{
@@ -9190,14 +9192,11 @@ class FilterInputWrapperComponent extends BaseFilterCellComponent {
         }
     }
 }
-FilterInputWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterInputWrapperComponent, deps: [{ token: FilterService }], target: i0.ɵɵFactoryTarget.Component });
-FilterInputWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterInputWrapperComponent, selector: "kendo-grid-filter-input-wrapper-base", inputs: { column: "column", filter: "filter", defaultOperator: "defaultOperator" }, queries: [{ propertyName: "input", first: true, predicate: FilterInputDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: ``, isInline: true });
+FilterInputWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterInputWrapperComponent, deps: [{ token: FilterService }], target: i0.ɵɵFactoryTarget.Directive });
+FilterInputWrapperComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FilterInputWrapperComponent, inputs: { column: "column", filter: "filter", defaultOperator: "defaultOperator" }, queries: [{ propertyName: "input", first: true, predicate: FilterInputDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterInputWrapperComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-grid-filter-input-wrapper-base',
-                    template: ``
-                }]
+            type: Directive,
+            args: [{}]
         }], ctorParameters: function () { return [{ type: FilterService }]; }, propDecorators: { column: [{
                 type: Input
             }], filter: [{
@@ -9640,14 +9639,11 @@ class NumericFilterComponent extends BaseFilterCellComponent {
         }
     }
 }
-NumericFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumericFilterComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-NumericFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NumericFilterComponent, selector: "kendo-grid-numeric-filter-component-base", inputs: { column: "column", filter: "filter", operator: "operator", step: "step", min: "min", max: "max", spinners: "spinners", decimals: "decimals", format: "format" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+NumericFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumericFilterComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+NumericFilterComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: NumericFilterComponent, inputs: { column: "column", filter: "filter", operator: "operator", step: "step", min: "min", max: "max", spinners: "spinners", decimals: "decimals", format: "format" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumericFilterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-grid-numeric-filter-component-base',
-                    template: ``
-                }]
+            type: Directive,
+            args: [{}]
         }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }]; }, propDecorators: { column: [{
                 type: Input
             }], filter: [{
@@ -10973,7 +10969,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 +10980,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 +12554,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 +12568,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 +13484,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 +13499,7 @@ class LogicalCellDirective {
         this.registerNoChanges();
     }
     ngOnChanges(changes) {
-        if (!this.navigationService.enabled) {
+        if (!this.navigationService.tableEnabled) {
             return;
         }
         const keys = Object.keys(changes);
@@ -17298,7 +17294,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 +18256,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 +18431,7 @@ class GridComponent {
         this.cachedWindowWidth = 0;
         this._rowSelected = null;
         this._cellSelected = null;
+        this._navigable = [];
         this.rtl = false;
         this._rowClass = () => null;
         validatePackage(packageMetadata);
@@ -18571,6 +18563,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 +18801,9 @@ class GridComponent {
     get ariaColCount() {
         return this.columnsContainer.leafColumnsToRender.length;
     }
+    get navigation() {
+        return this.navigationService;
+    }
     get isVirtual() {
         return this.scrollable === 'virtual';
     }
@@ -18989,6 +18999,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 +19028,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 +19990,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 +20357,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 +20412,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 +20443,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 +20548,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 +20582,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 +20854,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 +20909,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 +20940,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 +21045,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 +21079,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"
@@ -25329,5 +25349,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddCommandDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BodyModule, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, CancelCommandDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellTemplateDirective, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnLockedChangeEvent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, CommandColumnComponent, ContainsFilterOperatorComponent, CustomMessagesComponent, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DoesNotContainFilterOperatorComponent, EditCommandDirective, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuModule, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusableDirective, FooterComponent, FooterModule, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridComponent, GridModule, GridSpacerComponent, GroupBindingDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupIndicatorComponent, GroupModule, GroupPanelComponent, HeaderComponent, HeaderModule, HeaderTemplateDirective, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PagerComponent, PagerDropDownListDirective, PagerInfoComponent, PagerInputComponent, PagerInputDirective, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, RowEditingDirectiveBase, RowFilterModule, SaveCommandDirective, SelectAllCheckboxDirective, SelectionCheckboxDirective, SelectionDirective, SharedFilterModule, SharedModule, SinglePopupService, Skip, SpanColumnComponent, StartsWithFilterOperatorComponent, StringFilterCellComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateContextDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, count, defaultTrackBy, hasFilterMenu, hasFilterRow, isFilterable, slice };
+export { AddCommandDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BodyModule, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, CancelCommandDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellTemplateDirective, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnLockedChangeEvent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, CustomMessagesComponent, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DoesNotContainFilterOperatorComponent, EditCommandDirective, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuModule, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusableDirective, FooterComponent, FooterModule, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridComponent, GridModule, GridSpacerComponent, GroupBindingDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupIndicatorComponent, GroupModule, GroupPanelComponent, HeaderComponent, HeaderModule, HeaderTemplateDirective, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PagerComponent, PagerDropDownListDirective, PagerInfoComponent, PagerInputComponent, PagerInputDirective, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, RowEditingDirectiveBase, RowFilterModule, SaveCommandDirective, SelectAllCheckboxDirective, SelectionCheckboxDirective, SelectionDirective, SharedFilterModule, SharedModule, SinglePopupService, Skip, SpanColumnComponent, StartsWithFilterOperatorComponent, StringFilterCellComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateContextDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, count, defaultTrackBy, hasFilterMenu, hasFilterRow, isFilterable, slice };
 

package/filtering/base-filter-cell.component.d.ts

@@ -68,5 +68,5 @@ export declare abstract class BaseFilterCellComponent implements AfterContentIni
     protected updateFilter(filter: FilterDescriptor): CompositeFilterDescriptor;
     protected applyFilter(filter: CompositeFilterDescriptor): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseFilterCellComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BaseFilterCellComponent, "kendo-grid-base-filter-cell", never, { "operators": "operators"; }, {}, ["operatorList"], never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseFilterCellComponent, never, never, { "operators": "operators"; }, {}, ["operatorList"]>;
 }

package/filtering/filter-input-wrapper.component.d.ts

@@ -36,5 +36,5 @@ export declare abstract class FilterInputWrapperComponent extends BaseFilterCell
         [propertyName: string]: SimpleChange;
     }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FilterInputWrapperComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FilterInputWrapperComponent, "kendo-grid-filter-input-wrapper-base", never, { "column": "column"; "filter": "filter"; "defaultOperator": "defaultOperator"; }, {}, ["input"], never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FilterInputWrapperComponent, never, never, { "column": "column"; "filter": "filter"; "defaultOperator": "defaultOperator"; }, {}, ["input"]>;
 }

package/filtering/numeric-filter.component.d.ts

@@ -91,5 +91,5 @@ export declare abstract class NumericFilterComponent extends BaseFilterCellCompo
     ngOnDestroy(): void;
     protected localizationChange(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NumericFilterComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NumericFilterComponent, "kendo-grid-numeric-filter-component-base", never, { "column": "column"; "filter": "filter"; "operator": "operator"; "step": "step"; "min": "min"; "max": "max"; "spinners": "spinners"; "decimals": "decimals"; "format": "format"; }, {}, never, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NumericFilterComponent, never, never, { "column": "column"; "filter": "filter"; "operator": "operator"; "step": "step"; "min": "min"; "max": "max"; "spinners": "spinners"; "decimals": "decimals"; "format": "format"; }, {}, never>;
 }

package/filtering/string-filter.component.d.ts

@@ -51,5 +51,5 @@ export declare abstract class StringFilterComponent extends BaseFilterCellCompon
     ngOnDestroy(): void;
     protected localizationChange(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<StringFilterComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<StringFilterComponent, "kendo-grid-string-filter-base", never, { "column": "column"; "filter": "filter"; "operator": "operator"; }, {}, never, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<StringFilterComponent, never, never, { "column": "column"; "filter": "filter"; "operator": "operator"; }, {}, never>;
 }

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

@@ -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';
@@ -133,6 +134,7 @@ export { CellClickEvent } from './common/cell-click-event-args.interface';
 export { CellCloseEvent } from './editing/cell-close-event';
 export { CreateFormGroup } from './common/create-form-group';
 export { RemoveConfirmationCallback } from './common/remove-confirmation';
+export { ColumnInfoService } from './common/column-info.service';
 export { ScrollBottomEvent } from './scrolling/scroll-bottom-event';
 export { ContentScrollEvent } from './scrolling/content-scroll-event';
 export { SuspendService } from './scrolling/suspend.service';
@@ -145,6 +147,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';