@progress/kendo-angular-grid 11.4.0-develop.5 → 11.4.0-develop.6

package/fesm2015/progress-kendo-angular-grid.mjs

@@ -3,9 +3,9 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, HostBinding, Input, EventEmitter, Injectable, Optional, Inject, Directive, SkipSelf, QueryList, isDevMode, ContentChildren, ContentChild, forwardRef, Host, Output, SecurityContext, ChangeDetectionStrategy, ViewChild, HostListener, ViewChildren, Self, TemplateRef, Pipe, ViewEncapsulation, NgModule } from '@angular/core';
+import { InjectionToken, Component, HostBinding, Input, EventEmitter, Injectable, Optional, Inject, Directive, SkipSelf, QueryList, isDevMode, ContentChildren, ContentChild, forwardRef, Host, Output, SecurityContext, HostListener, ChangeDetectionStrategy, ViewChild, ViewChildren, Self, TemplateRef, Pipe, ViewEncapsulation, NgModule } from '@angular/core';
 import * as i1$1 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, Keys, anyChanged, isChanged as isChanged$1, KendoInput, guid, hasObservers, ResizeSensorComponent, DraggableModule, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, Keys, closest as closest$1, isFocusable as isFocusable$1, anyChanged, isChanged as isChanged$1, KendoInput, guid, hasObservers, ResizeSensorComponent, DraggableModule, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { merge, of, Subject, from, Subscription, interval, fromEvent, zip as zip$1, BehaviorSubject, Observable } from 'rxjs';
 import { switchMap, take, map, filter, takeUntil, switchMapTo, delay, auditTime, distinctUntilChanged, tap, throttleTime, debounceTime, bufferCount } from 'rxjs/operators';
 import * as i1 from '@progress/kendo-angular-l10n';
@@ -1528,6 +1528,7 @@ class NavigationService {
         this.cursor = new NavigationCursor(this.model);
         this.pagerIsNavigable = false;
         this.tableIsNavigable = false;
+        this.toolbarIsNavigable = false;
         this.changes = this.cursor.changes;
     }
     set metadata(value) {
@@ -1546,6 +1547,9 @@ class NavigationService {
     get tableEnabled() {
         return this.alive && this.tableIsNavigable;
     }
+    get toolbarEnabled() {
+        return this.alive && this.toolbarIsNavigable;
+    }
     get activeCell() {
         if (this.mode !== 0 /* Standby */) {
             return this.cursor.cell;
@@ -1741,6 +1745,7 @@ class NavigationService {
     setActiveSections(navigableOptions) {
         this.pagerIsNavigable = navigableOptions.includes('pager');
         this.tableIsNavigable = navigableOptions.includes('table');
+        this.toolbarIsNavigable = navigableOptions.includes('toolbar');
     }
     focusAdjacentCell(fwd, wrap) {
         this.focusCell();
@@ -2856,8 +2861,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1678461656,
-    version: '11.4.0-develop.5',
+    publishDate: 1678518322,
+    version: '11.4.0-develop.6',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -4923,6 +4928,54 @@ class PairSet {
     }
 }
 
+/**
+ * @hidden
+ */
+class GridToolbarNavigationService {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.navigableElements = [];
+        this.currentActiveIndex = 0;
+        this.defaultFocusableSelector = `
+        [kendogridtoolbarfocusable],
+        [kendogridaddcommand],
+        [kendogridcancelcommand],
+        [kendogrideditcommand],
+        [kendogridremovecommand],
+        [kendogridsavecommand],
+        [kendogridexcelcommand],
+        [kendogridpdfcommand]
+    `;
+    }
+    notify() {
+        // ensure focusable elements are in the same order as in the DOM
+        this.navigableElements = this.navigableElements.length && Array.from(this.navigableElements[0].parentElement.querySelectorAll(this.defaultFocusableSelector)) || [];
+        this.currentActiveIndex = 0;
+        this.updateFocus();
+    }
+    focus() {
+        var _a;
+        (_a = this.navigableElements[this.currentActiveIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    updateFocus() {
+        if (!this.navigableElements.length) {
+            return;
+        }
+        this.navigableElements.forEach(el => {
+            this.renderer.setAttribute(el, 'tabindex', '-1');
+        });
+        this.renderer.setAttribute(this.navigableElements[this.currentActiveIndex], 'tabindex', '0');
+        if (isDocumentAvailable() && document.activeElement.closest('.k-toolbar')) {
+            this.navigableElements[this.currentActiveIndex].focus();
+        }
+    }
+}
+GridToolbarNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarNavigationService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+GridToolbarNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarNavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarNavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
+
 /**
  * @hidden
  *
@@ -4933,12 +4986,17 @@ class PairSet {
  * and a avoids dependency cycles between components.
  */
 class ContextService {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.topToolbarNavigation = new GridToolbarNavigationService(this.renderer);
+        this.bottomToolbarNavigation = new GridToolbarNavigationService(this.renderer);
+    }
 }
-ContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
 ContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
 
 /**
  * @hidden
@@ -5765,7 +5823,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class ToolbarTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
-        this._position = "top";
+        this._position = 'top';
     }
     /**
      * The position of the toolbar ([see example]({% slug toolbartemplate_grid %})).
@@ -6672,7 +6730,9 @@ class ToolbarComponent {
         this.ctx = ctx;
         this.wrapper = wrapper;
         this.context = {};
+        this.role = 'toolbar';
         this._size = 'medium';
+        this.navigationService = this.ctx[`${this.wrapper.nativeElement.getAttribute('position')}ToolbarNavigation`];
     }
     get sizeSmallClass() {
         return this.size === 'small';
@@ -6693,18 +6753,62 @@ class ToolbarComponent {
     get size() {
         return this._size;
     }
+    clickHandler(ev) {
+        if (this.navigable && isDocumentAvailable()) {
+            const closestFocusable = closest$1(ev.target, isFocusable$1);
+            const targetIndex = this.navigationService.navigableElements.indexOf(closestFocusable);
+            if (targetIndex > -1) {
+                this.navigationService.currentActiveIndex = targetIndex;
+            }
+            this.navigationService.updateFocus();
+            if (ev.target === this.wrapper.nativeElement) {
+                this.navigationService.focus();
+            }
+        }
+    }
+    ;
+    arrowLeftListener() {
+        if (this.navigable && isDocumentAvailable() && this.navigationService.navigableElements.length) {
+            this.navigationService.currentActiveIndex--;
+            if (this.navigationService.currentActiveIndex < 0) {
+                this.navigationService.currentActiveIndex = this.navigationService.navigableElements.length - 1;
+            }
+            this.navigationService.updateFocus();
+        }
+    }
+    arrowRightListener() {
+        if (this.navigable && isDocumentAvailable() && this.navigationService.navigableElements.length) {
+            this.navigationService.currentActiveIndex++;
+            if (this.navigationService.currentActiveIndex >= this.navigationService.navigableElements.length) {
+                this.navigationService.currentActiveIndex = 0;
+            }
+            this.navigationService.updateFocus();
+        }
+    }
+    homeKeyListener(e) {
+        if (this.navigable && isDocumentAvailable() && this.navigationService.navigableElements.length) {
+            e.preventDefault();
+            this.navigationService.currentActiveIndex = 0;
+            this.navigationService.updateFocus();
+        }
+    }
+    endKeyListener(e) {
+        if (this.navigable && isDocumentAvailable() && this.navigationService.navigableElements.length) {
+            e.preventDefault();
+            this.navigationService.currentActiveIndex = this.navigationService.navigableElements.length - 1;
+            this.navigationService.updateFocus();
+        }
+    }
     get toolbarTemplateRef() {
         return this.ctx.grid.toolbarTemplate ? this.ctx.grid.toolbarTemplate.templateRef : undefined;
     }
 }
 ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: ContextService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: { position: "position", size: "size" }, host: { properties: { "class.k-toolbar-sm": "this.sizeSmallClass", "class.k-toolbar-md": "this.sizeMediumClass" } }, ngImport: i0, template: `
+ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: { position: "position", size: "size", navigable: "navigable" }, host: { listeners: { "click": "clickHandler($event)", "keydown.arrowleft": "arrowLeftListener($event)", "keydown.arrowright": "arrowRightListener($event)", "keydown.home": "homeKeyListener($event)", "keydown.end": "endKeyListener($event)" }, properties: { "attr.role": "this.role", "class.k-toolbar-sm": "this.sizeSmallClass", "class.k-toolbar-md": "this.sizeMediumClass" } }, ngImport: i0, template: `
         <ng-template
             *ngIf="toolbarTemplateRef"
             [ngTemplateOutlet]="toolbarTemplateRef"
-            [ngTemplateOutletContext]="context"
-            >
-        </ng-template>
+            [ngTemplateOutletContext]="context"></ng-template>
     `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
@@ -6714,12 +6818,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <ng-template
             *ngIf="toolbarTemplateRef"
             [ngTemplateOutlet]="toolbarTemplateRef"
-            [ngTemplateOutletContext]="context"
-            >
-        </ng-template>
+            [ngTemplateOutletContext]="context"></ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ElementRef }]; }, propDecorators: { sizeSmallClass: [{
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ElementRef }]; }, propDecorators: { role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], sizeSmallClass: [{
                 type: HostBinding,
                 args: ['class.k-toolbar-sm']
             }], sizeMediumClass: [{
@@ -6729,6 +6834,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], size: [{
                 type: Input
+            }], clickHandler: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], arrowLeftListener: [{
+                type: HostListener,
+                args: ['keydown.arrowleft', ['$event']]
+            }], arrowRightListener: [{
+                type: HostListener,
+                args: ['keydown.arrowright', ['$event']]
+            }], homeKeyListener: [{
+                type: HostListener,
+                args: ['keydown.home', ['$event']]
+            }], endKeyListener: [{
+                type: HostListener,
+                args: ['keydown.end', ['$event']]
+            }], navigable: [{
+                type: Input
             }] } });
 
 /**
@@ -8460,6 +8582,12 @@ class GroupPanelComponent {
             this.targetSubscription.unsubscribe();
         }
     }
+    messageFor(token) {
+        return this.localization.get(token);
+    }
+    getTitle(group) {
+        return this.messageFor(group.dir === 'desc' ? 'sortedDescending' : 'sortedAscending');
+    }
     getDirectionIcon(group) {
         return group.dir === 'desc' ? 'sort-desc-sm' : 'sort-asc-sm';
     }
@@ -8525,7 +8653,7 @@ class GroupPanelComponent {
     }
 }
 GroupPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupPanelComponent, deps: [{ token: DragHintService }, { token: DropCueService }, { token: GroupInfoService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: { text: "text", groups: "groups" }, outputs: { change: "change" }, host: { properties: { "class.k-grouping-header": "this.groupHeaderClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }], ngImport: i0, template: `
+GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: { text: "text", navigable: "navigable", groups: "groups" }, outputs: { change: "change" }, host: { properties: { "class.k-grouping-header": "this.groupHeaderClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }], ngImport: i0, template: `
         <div
             *ngIf="groups.length === 0"
             class="k-grouping-drop-container"
@@ -8539,12 +8667,14 @@ GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
 
         <kendo-chiplist
             *ngIf="groups.length !== 0"
-        >
+            [navigable]="navigable"
+            role="none">
             <kendo-chip
                 *ngFor="let group of groups; let index = index;"
                 kendoDropTarget
                 kendoDraggableColumn
                 kendoDraggable
+                [title]="getTitle(group)"
                 [enableDrag]="true"
                 [context]="{
                     field: group.field,
@@ -8569,7 +8699,7 @@ GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             }"
             kendoDropTarget
         >&nbsp;</div>
-    `, isInline: true, components: [{ type: i4$1.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i4$1.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "removeSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i4$1.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size", "role", "navigable"], outputs: ["selectedChange", "remove"] }, { type: i4$1.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "removeSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupPanelComponent, decorators: [{
             type: Component,
             args: [{
@@ -8589,12 +8719,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
         <kendo-chiplist
             *ngIf="groups.length !== 0"
-        >
+            [navigable]="navigable"
+            role="none">
             <kendo-chip
                 *ngFor="let group of groups; let index = index;"
                 kendoDropTarget
                 kendoDraggableColumn
                 kendoDraggable
+                [title]="getTitle(group)"
                 [enableDrag]="true"
                 [context]="{
                     field: group.field,
@@ -8628,6 +8760,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ["class.k-grouping-header"]
             }], text: [{
                 type: Input
+            }], navigable: [{
+                type: Input
             }], groups: [{
                 type: Input
             }], dropTargets: [{
@@ -13894,6 +14028,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  */
 class FilterCellComponent {
     constructor() {
+        this.hostRole = 'gridcell';
         this.size = 'medium';
         this._templateContext = {};
     }
@@ -13917,7 +14052,7 @@ class FilterCellComponent {
     }
 }
 FilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterCellComponent, selector: "[kendoGridFilterCell]", inputs: { column: "column", filter: "filter", size: "size" }, ngImport: i0, template: `
+FilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterCellComponent, selector: "[kendoGridFilterCell]", inputs: { column: "column", filter: "filter", size: "size" }, host: { properties: { "attr.role": "this.hostRole" } }, ngImport: i0, template: `
         <ng-container *ngIf="isFilterable">
             <ng-container [ngSwitch]="hasTemplate">
                 <ng-container *ngSwitchCase="false">
@@ -13954,7 +14089,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-container>
     `
                 }]
-        }], propDecorators: { column: [{
+        }], propDecorators: { hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], column: [{
                 type: Input
             }], filter: [{
                 type: Input
@@ -14710,7 +14848,7 @@ const modifierKeys = ['alt', 'ctrl', 'shift', 'meta'];
  * @hidden
  */
 class HeaderComponent {
-    constructor(popupService, hint, cue, reorderService, idService, sortService, localization, columnInfoService, cd) {
+    constructor(popupService, hint, cue, reorderService, idService, sortService, localization, columnInfoService, cd, contextService) {
         this.popupService = popupService;
         this.hint = hint;
         this.cue = cue;
@@ -14720,6 +14858,7 @@ class HeaderComponent {
         this.localization = localization;
         this.columnInfoService = columnInfoService;
         this.cd = cd;
+        this.contextService = contextService;
         this.columns = [];
         this.groups = [];
         this.sort = new Array();
@@ -14776,12 +14915,50 @@ class HeaderComponent {
             args.stopImmediatePropagation();
             const filterMenu = this.filterMenus.find(fm => fm.column === column);
             filterMenu.toggle(filterMenu.anchor.nativeElement, filterMenu.template);
+            return;
         }
         if (args.keyCode === Keys.ArrowDown && args.altKey && this.showColumnMenu(column)) {
             args.preventDefault();
             args.stopImmediatePropagation();
             const columnMenu = this.columnMenus.find(cm => cm.column === column);
             columnMenu.toggle(null, columnMenu.anchor.nativeElement, columnMenu.template);
+            return;
+        }
+        const isCtrlOrMeta = args.ctrlKey || args.metaKey;
+        const isGroupingKeyShortcut = (args.keyCode === Keys.Enter || args.keyCode === Keys.Space) && isCtrlOrMeta;
+        if (isGroupingKeyShortcut && this.isGroupable(column)) {
+            args.preventDefault();
+            args.stopImmediatePropagation();
+            const isGroupedByField = this.groups.some(gr => gr.field === column.field);
+            if (isGroupedByField) {
+                this.groups = this.groups.filter(gr => gr.field !== column.field);
+            }
+            else {
+                this.groups.push({
+                    field: column.field
+                });
+            }
+            this.contextService.grid.groupChange.emit(this.groups);
+            return;
+        }
+        const isLeftOrRightArrow = args.keyCode === Keys.ArrowLeft || args.keyCode === Keys.ArrowRight;
+        const isReorderingKeyShortcut = isLeftOrRightArrow && isCtrlOrMeta;
+        if (isReorderingKeyShortcut && this.isReorderable(column)) {
+            args.preventDefault();
+            const columnsCount = this.columnInfoService.leafNamedColumns.length;
+            const reorderDirection = args.keyCode === Keys.ArrowLeft ? -1 : 1;
+            const rtlMultiplier = this.localization.rtl ? -1 : 1;
+            const reorderDirectionOffset = reorderDirection * rtlMultiplier;
+            const newIndex = column.leafIndex + reorderDirectionOffset;
+            const normalizedNewIndex = Math.min(Math.max(0, newIndex), columnsCount - 1);
+            const gridInstance = this.contextService.grid;
+            gridInstance.reorderColumn(column, normalizedNewIndex, { before: reorderDirectionOffset < 0 });
+            gridInstance.columnReorder.emit(new ColumnReorderEvent({
+                column,
+                newIndex: normalizedNewIndex,
+                oldIndex: column.leafIndex
+            }));
+            return;
         }
         if (!this.sortable || args.defaultPrevented || column.sortable === false) {
             return;
@@ -14921,11 +15098,11 @@ class HeaderComponent {
         return this.reorderable && rules({ draggable, target });
     }
     shouldActivate(column) {
-        const canReorder = this.reorderable && column.reorderable;
+        const canReorder = this.isReorderable(column);
         if (!canReorder && !isColumnComponent(column)) {
             return false;
         }
-        const groupable = this.groupable && isColumnComponent(column) && column.groupable !== false;
+        const groupable = this.isGroupable(column);
         return groupable || canReorder;
     }
     isSortable(column) {
@@ -14970,6 +15147,12 @@ class HeaderComponent {
     get leafColumns() {
         return this._leafColumns;
     }
+    isReorderable(column) {
+        return this.reorderable && column.reorderable;
+    }
+    isGroupable(column) {
+        return this.groupable && isColumnComponent(column) && column.groupable !== false;
+    }
     attachTargets() {
         if (this.targetSubscription) {
             this.targetSubscription.unsubscribe();
@@ -15051,7 +15234,7 @@ class HeaderComponent {
         });
     }
 }
-HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, deps: [{ token: SinglePopupService }, { token: DragHintService }, { token: DropCueService }, { token: ColumnReorderService }, { token: IdService }, { token: SortService }, { token: i1.LocalizationService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, deps: [{ token: SinglePopupService }, { token: DragHintService }, { token: DropCueService }, { token: ColumnReorderService }, { token: IdService }, { token: SortService }, { token: i1.LocalizationService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", groupable: "groupable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount", tabIndex: "tabIndex", size: "size" }, host: { properties: { "class.k-grid-header": "this.headerClass", "class.k-table-thead": "this.hostClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }, { propertyName: "filterMenus", predicate: FilterMenuComponent, descendants: true }, { propertyName: "columnMenus", predicate: ColumnMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <ng-container>
         <tr *ngFor="let i of columnLevels; let levelIndex = index"
@@ -15105,7 +15288,8 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                     [ngClass]="column.headerClass"
                     [ngStyle]="column.sticky ? addStickyStyles(column) : column.headerStyle"
                     [attr.rowspan]="column.rowspan(totalColumnLevels)"
-                    [attr.colspan]="column.colspan">
+                    [attr.colspan]="column.colspan"
+                    [attr.aria-haspopup]="(showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined">
 
                     <ng-container *ngIf="!isSortable(getColumnComponent(column))">
                         <span class="k-cell-inner">
@@ -15334,7 +15518,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [ngClass]="column.headerClass"
                     [ngStyle]="column.sticky ? addStickyStyles(column) : column.headerStyle"
                     [attr.rowspan]="column.rowspan(totalColumnLevels)"
-                    [attr.colspan]="column.colspan">
+                    [attr.colspan]="column.colspan"
+                    [attr.aria-haspopup]="(showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined">
 
                     <ng-container *ngIf="!isSortable(getColumnComponent(column))">
                         <span class="k-cell-inner">
@@ -15507,7 +15692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
     </ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: SinglePopupService }, { type: DragHintService }, { type: DropCueService }, { type: ColumnReorderService }, { type: IdService }, { type: SortService }, { type: i1.LocalizationService }, { type: ColumnInfoService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { totalColumnLevels: [{
+        }], ctorParameters: function () { return [{ type: SinglePopupService }, { type: DragHintService }, { type: DropCueService }, { type: ColumnReorderService }, { type: IdService }, { type: SortService }, { type: i1.LocalizationService }, { type: ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: ContextService }]; }, propDecorators: { totalColumnLevels: [{
                 type: Input
             }], columns: [{
                 type: Input
@@ -16926,7 +17111,7 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             </td>
         </tr>
     </ng-container>
-    <tr *ngIf="data?.length === 0 || data === null" class="k-grid-norecords">
+    <tr *ngIf="data?.length === 0 || data === null" class="k-grid-norecords" role="row">
         <td [attr.colspan]="colSpan" class="k-table-td">
             <ng-template
                 *ngIf="noRecordsTemplate?.templateRef"
@@ -16972,6 +17157,7 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
+            [attr.aria-selected]="isSelectable() && isRowSelected(item)"
             [attr.data-kendo-grid-item-index]="$any(item).index"
             [class.k-selected]="isSelectable() && isRowSelected(item)">
             <ng-container *ngIf="!skipGroupDecoration">
@@ -17151,7 +17337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </td>
         </tr>
     </ng-container>
-    <tr *ngIf="data?.length === 0 || data === null" class="k-grid-norecords">
+    <tr *ngIf="data?.length === 0 || data === null" class="k-grid-norecords" role="row">
         <td [attr.colspan]="colSpan" class="k-table-td">
             <ng-template
                 *ngIf="noRecordsTemplate?.templateRef"
@@ -17197,6 +17383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
+            [attr.aria-selected]="isSelectable() && isRowSelected(item)"
             [attr.data-kendo-grid-item-index]="$any(item).index"
             [class.k-selected]="isSelectable() && isRowSelected(item)">
             <ng-container *ngIf="!skipGroupDecoration">
@@ -17672,6 +17859,8 @@ class ListComponent {
         this.changeDetector = changeDetector;
         this.pdfService = pdfService;
         this.columnInfo = columnInfo;
+        this.hostClass = true;
+        this.hostRole = 'presentation';
         this.groups = [];
         this.skip = 0;
         this.columns = new ColumnsContainer(() => []);
@@ -17693,12 +17882,6 @@ class ListComponent {
         this.subscriptions = detailsService.changes.subscribe(x => this.detailExpand(x));
         this.subscriptions.add(scrollRequestService.requests.subscribe(x => this.scrollTo(x)));
     }
-    get hostClass() {
-        return true;
-    }
-    get hostRole() {
-        return 'presentation';
-    }
     get showFooter() {
         return this.groupable && this.groupable.showFooter;
     }
@@ -17762,7 +17945,7 @@ class ListComponent {
             this.skipScroll = true;
             this.container.nativeElement.scrollTop = this.rowHeightService.offset(this.skip);
         }
-        if (anyChanged(["total", "take"], changes)) {
+        if (anyChanged(['total', 'take'], changes)) {
             this.init();
         }
         this.rebind = false;
@@ -17870,7 +18053,7 @@ class ListComponent {
                 });
             })).subscribe(this.dispatcher));
         });
-        this.scrollSyncService.registerEmitter(this.container.nativeElement, "body");
+        this.scrollSyncService.registerEmitter(this.container.nativeElement, 'body');
     }
     createScroller() {
         this.cleanupScroller();
@@ -18223,7 +18406,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     [sort]="sort">
                 </colgroup>
                 <tbody kendoGridTableBody
-                    role="presentation"
+                    role="rowgroup"
                     [skipGroupDecoration]="isLocked"
                     [data]="data"
                     [groups]="groups"
@@ -18342,7 +18525,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [sort]="sort">
                 </colgroup>
                 <tbody kendoGridTableBody
-                    role="presentation"
+                    role="rowgroup"
                     [skipGroupDecoration]="isLocked"
                     [data]="data"
                     [groups]="groups"
@@ -18384,10 +18567,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     }] }, { type: DetailsService }, { type: ChangeNotificationService }, { type: SuspendService }, { type: GroupsService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: ScrollSyncService }, { type: ResizeService }, { type: EditService }, { type: BrowserSupportService }, { type: NavigationService }, { type: ScrollRequestService }, { type: i1.LocalizationService }, { type: ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: PDFService }, { type: ColumnInfoService }];
     }, propDecorators: { hostClass: [{
                 type: HostBinding,
-                args: ["class.k-grid-container"]
+                args: ['class.k-grid-container']
             }], hostRole: [{
                 type: HostBinding,
-                args: ["attr.role"]
+                args: ['attr.role']
             }], data: [{
                 type: Input
             }], groups: [{
@@ -18470,6 +18653,7 @@ class FooterComponent {
         this.lockedColumnsCount = 0;
         this.logicalRowIndex = 0;
         this.hostClass = true;
+        this.hostRole = 'rowgroup';
     }
     get footerClass() {
         return !this.scrollable;
@@ -18490,7 +18674,7 @@ class FooterComponent {
     }
 }
 FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FooterComponent, deps: [{ token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
-FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FooterComponent, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex" }, host: { properties: { "class.k-grid-footer": "this.footerClass", "class.k-table-tfoot": "this.hostClass" } }, ngImport: i0, template: `
+FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FooterComponent, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex" }, host: { properties: { "class.k-grid-footer": "this.footerClass", "class.k-table-tfoot": "this.hostClass", "attr.role": "this.hostRole" } }, ngImport: i0, template: `
     <ng-container>
         <tr
             [class.k-footer-template]="true"
@@ -18516,7 +18700,7 @@ FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 class="k-table-td"
                     [logicalRowIndex]="logicalRowIndex"
                     [logicalColIndex]="logicalColumnIndex(column)"
-                    role="columnfooter"
+                    role="gridcell"
                     aria-selected="false"
                 [class.k-grid-footer-sticky]="column.sticky"
                 [ngClass]="column.footerClass"
@@ -18563,7 +18747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 class="k-table-td"
                     [logicalRowIndex]="logicalRowIndex"
                     [logicalColIndex]="logicalColumnIndex(column)"
-                    role="columnfooter"
+                    role="gridcell"
                     aria-selected="false"
                 [class.k-grid-footer-sticky]="column.sticky"
                 [ngClass]="column.footerClass"
@@ -18599,6 +18783,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-table-tfoot']
+            }], hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
             }] } });
 
 /**
@@ -18650,7 +18837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class GridMessages extends ComponentMessages {
 }
 GridMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-GridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", selectPage: "selectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand" }, usesInheritance: true, ngImport: i0 });
+GridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", selectPage: "selectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", groupPanelLabel: "groupPanelLabel" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMessages, decorators: [{
             type: Directive,
             args: [{
@@ -18801,6 +18988,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], groupExpand: [{
                 type: Input
+            }], topToolbarLabel: [{
+                type: Input
+            }], bottomToolbarLabel: [{
+                type: Input
+            }], groupPanelLabel: [{
+                type: Input
             }] } });
 
 /**
@@ -19166,6 +19359,7 @@ class GridComponent {
         this.hostClass = true;
         this.footer = new QueryList();
         this.selectionDirective = false;
+        this.ariaRootId = `k-${guid()}`;
         this.columnsContainer = new ColumnsContainer(() => this.columnList.filterHierarchy(column => {
             if (!isUniversal()) {
                 column.matchesMedia = this.matchesMedia(column);
@@ -19335,7 +19529,7 @@ class GridComponent {
      */
     set navigable(value) {
         if (typeof value === 'boolean') {
-            this._navigable = value ? ['table', 'pager'] : [];
+            this._navigable = value ? ['table', 'pager', 'toolbar'] : [];
             return;
         }
         this._navigable = value;
@@ -19898,6 +20092,12 @@ class GridComponent {
     get ariaLabel() {
         return this.localization.get('gridLabel');
     }
+    /**
+     * @hidden
+     */
+    messageFor(token) {
+        return this.localization.get(token);
+    }
     /**
      * Switches the specified table row in the edit mode ([see example]({% slug inline_editing_grid %}#toc-editing-records-1)).
      *
@@ -21129,12 +21329,24 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
 
             i18n-selectPage="kendo.grid.selectPage|The text of the title and aria-label attributes applied to the page chooser in the Grid Pager"
             selectPage="Select page"
+
+            i18n-topToolbarLabel="kendo.grid.topToolbarLabel|The label for the Grid top toolbar"
+            topToolbarLabel="Top toolbar"
+
+            i18n-bottomToolbarLabel="kendo.grid.bottomToolbarLabel|The label for the Grid bottom toolbar"
+            bottomToolbarLabel="Bottom toolbar"
+
+            i18n-groupPanelLabel="kendo.grid.groupPanelLabel|The label for the Grid group panel toolbar"
+            groupPanelLabel="Group panel"
         >
         </ng-container>
         <kendo-grid-toolbar
             class="k-toolbar k-grid-toolbar"
             *ngIf="showTopToolbar"
             [size]="size"
+            [attr.aria-label]="messageFor('topToolbarLabel')"
+            [navigable]="navigation.toolbarEnabled"
+            [attr.aria-controls]="ariaRootId"
             position="top"></kendo-grid-toolbar>
         <kendo-pager
             *ngIf="showTopPager"
@@ -21151,13 +21363,18 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         </kendo-pager>
         <kendo-grid-group-panel
             *ngIf="showGroupPanel"
+            [navigable]="navigation.toolbarEnabled"
             [text]="groupableEmptyText"
             [groups]="group"
+            role="toolbar"
+            [attr.aria-label]="messageFor('groupPanelLabel')"
+            [attr.aria-controls]="ariaRootId"
             (change)="groupChange.emit($event)">
         </kendo-grid-group-panel>
         <div #ariaRoot
             class="k-grid-aria-root"
             role="grid"
+            [id]="ariaRootId"
             [attr.aria-label]="ariaLabel"
             [attr.aria-rowcount]="ariaRowCount"
             [attr.aria-colcount]="ariaColCount">
@@ -21185,6 +21402,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                             [detailTemplate]="detailTemplate">
                         </colgroup>
                         <thead kendoGridHeader
+                            role="rowgroup"
                             [resizable]="resizable"
                             [scrollable]="true"
                             [columns]="$any(lockedColumns)"
@@ -21222,7 +21440,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                         </colgroup>
                         <thead kendoGridHeader
                             [resizable]="resizable"
-                            role="presentation"
+                            role="rowgroup"
                             [scrollable]="true"
                             [columns]="headerColumns"
                             [totalColumnLevels]="totalColumnLevels"
@@ -21409,8 +21627,11 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom"
             *ngIf="showBottomToolbar"
             [size]="size"
+            [navigable]="navigation.toolbarEnabled"
+            [attr.aria-label]="messageFor('bottomToolbarLabel')"
+            [attr.aria-controls]="ariaRootId"
             position="bottom"></kendo-grid-toolbar>
-    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size"] }, { type: PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "groups"], outputs: ["change"] }, { type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex", "size"] }, { 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", "sort", "size"], 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: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { 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", "size", "navigable"] }, { type: PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex", "size"] }, { 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", "sort", "size"], 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: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { 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: "13.3.12", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
             args: [{
@@ -21677,12 +21898,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-selectPage="kendo.grid.selectPage|The text of the title and aria-label attributes applied to the page chooser in the Grid Pager"
             selectPage="Select page"
+
+            i18n-topToolbarLabel="kendo.grid.topToolbarLabel|The label for the Grid top toolbar"
+            topToolbarLabel="Top toolbar"
+
+            i18n-bottomToolbarLabel="kendo.grid.bottomToolbarLabel|The label for the Grid bottom toolbar"
+            bottomToolbarLabel="Bottom toolbar"
+
+            i18n-groupPanelLabel="kendo.grid.groupPanelLabel|The label for the Grid group panel toolbar"
+            groupPanelLabel="Group panel"
         >
         </ng-container>
         <kendo-grid-toolbar
             class="k-toolbar k-grid-toolbar"
             *ngIf="showTopToolbar"
             [size]="size"
+            [attr.aria-label]="messageFor('topToolbarLabel')"
+            [navigable]="navigation.toolbarEnabled"
+            [attr.aria-controls]="ariaRootId"
             position="top"></kendo-grid-toolbar>
         <kendo-pager
             *ngIf="showTopPager"
@@ -21699,13 +21932,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </kendo-pager>
         <kendo-grid-group-panel
             *ngIf="showGroupPanel"
+            [navigable]="navigation.toolbarEnabled"
             [text]="groupableEmptyText"
             [groups]="group"
+            role="toolbar"
+            [attr.aria-label]="messageFor('groupPanelLabel')"
+            [attr.aria-controls]="ariaRootId"
             (change)="groupChange.emit($event)">
         </kendo-grid-group-panel>
         <div #ariaRoot
             class="k-grid-aria-root"
             role="grid"
+            [id]="ariaRootId"
             [attr.aria-label]="ariaLabel"
             [attr.aria-rowcount]="ariaRowCount"
             [attr.aria-colcount]="ariaColCount">
@@ -21733,6 +21971,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             [detailTemplate]="detailTemplate">
                         </colgroup>
                         <thead kendoGridHeader
+                            role="rowgroup"
                             [resizable]="resizable"
                             [scrollable]="true"
                             [columns]="$any(lockedColumns)"
@@ -21770,7 +22009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         </colgroup>
                         <thead kendoGridHeader
                             [resizable]="resizable"
-                            role="presentation"
+                            role="rowgroup"
                             [scrollable]="true"
                             [columns]="headerColumns"
                             [totalColumnLevels]="totalColumnLevels"
@@ -21957,6 +22196,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom"
             *ngIf="showBottomToolbar"
             [size]="size"
+            [navigable]="navigation.toolbarEnabled"
+            [attr.aria-label]="messageFor('bottomToolbarLabel')"
+            [attr.aria-controls]="ariaRootId"
             position="bottom"></kendo-grid-toolbar>
     `
                 }]
@@ -25404,6 +25646,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * A directive applied to all toolbar elements that need to be a part of the Grid
+ * keyboard navigation.
+ */
+class GridToolbarFocusableDirective {
+    constructor(host, ctx) {
+        this.host = host;
+        this.ctx = ctx;
+    }
+    /**
+     * @hidden
+     */
+    get element() {
+        return this.host.nativeElement;
+    }
+    /**
+     * @hidden
+     */
+    get toolbarPosition() {
+        var _a;
+        return isDocumentAvailable() && ((_a = this.host.nativeElement.closest('.k-toolbar')) === null || _a === void 0 ? void 0 : _a.getAttribute('position'));
+    }
+    ngAfterViewInit() {
+        var _a, _b;
+        if (!isDocumentAvailable() || !this.toolbarPosition) {
+            return;
+        }
+        (_a = this.ctx[`${this.toolbarPosition}ToolbarNavigation`]) === null || _a === void 0 ? void 0 : _a.navigableElements.push(this.element);
+        (_b = this.ctx[`${this.toolbarPosition}ToolbarNavigation`]) === null || _b === void 0 ? void 0 : _b.notify();
+    }
+    ngOnDestroy() {
+        if (!isDocumentAvailable() || !this.toolbarPosition) {
+            return;
+        }
+        const elements = this.ctx[`${this.toolbarPosition}ToolbarNavigation`].navigableElements;
+        this.ctx[`${this.toolbarPosition}ToolbarNavigation`].navigableElements = elements.filter(el => el !== this.element);
+        this.ctx[`${this.toolbarPosition}ToolbarNavigation`].notify();
+    }
+}
+GridToolbarFocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarFocusableDirective, deps: [{ token: i0.ElementRef }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Directive });
+GridToolbarFocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GridToolbarFocusableDirective, selector: "\n        [kendoGridToolbarFocusable],\n        [kendoGridAddCommand],\n        [kendoGridCancelCommand],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridExcelCommand],\n        [kendoGridPDFCommand]\n    ", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridToolbarFocusableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+        [kendoGridToolbarFocusable],
+        [kendoGridAddCommand],
+        [kendoGridCancelCommand],
+        [kendoGridEditCommand],
+        [kendoGridRemoveCommand],
+        [kendoGridSaveCommand],
+        [kendoGridExcelCommand],
+        [kendoGridPDFCommand]
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ContextService }]; } });
+
 const exportedModules$1 = [
     GridComponent,
     ToolbarTemplateDirective,
@@ -25418,6 +25717,7 @@ const exportedModules$1 = [
     InCellEditingDirective,
     ExpandDetailsDirective,
     ExpandGroupDirective,
+    GridToolbarFocusableDirective,
     ...GroupModule.exports(),
     ...SharedModule.exports(),
     ...BodyModule.exports(),
@@ -25444,7 +25744,8 @@ const declarations$2 = [
     ExpandGroupDirective,
     GroupBindingDirective,
     GridMarqueeDirective,
-    GridSpacerComponent
+    GridSpacerComponent,
+    GridToolbarFocusableDirective
 ];
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -25495,7 +25796,8 @@ GridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         ExpandGroupDirective,
         GroupBindingDirective,
         GridMarqueeDirective,
-        GridSpacerComponent], imports: [CommonModule,
+        GridSpacerComponent,
+        GridToolbarFocusableDirective], imports: [CommonModule,
         GroupModule,
         SharedModule,
         BodyModule,
@@ -25517,7 +25819,8 @@ GridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         ReactiveEditingDirective,
         InCellEditingDirective,
         ExpandDetailsDirective,
-        ExpandGroupDirective, GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, ColumnComponent, SpanColumnComponent, ColumnGroupComponent, FooterTemplateDirective, DetailTemplateDirective, FocusableDirective, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, NoRecordsTemplateDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, HeaderTemplateDirective, SelectAllCheckboxDirective, PagerComponent, PagerPrevButtonsComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerInfoComponent, PagerPageSizesComponent, PagerTemplateDirective, PagerDropDownListDirective, PagerInputDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, FilterCellOperatorsComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, ColumnChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuChooserComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent] });
+        ExpandGroupDirective,
+        GridToolbarFocusableDirective, GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, ColumnComponent, SpanColumnComponent, ColumnGroupComponent, FooterTemplateDirective, DetailTemplateDirective, FocusableDirective, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, NoRecordsTemplateDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, HeaderTemplateDirective, SelectAllCheckboxDirective, PagerComponent, PagerPrevButtonsComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerInfoComponent, PagerPageSizesComponent, PagerTemplateDirective, PagerDropDownListDirective, PagerInputDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, FilterCellOperatorsComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, ColumnChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuChooserComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent] });
 GridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridModule, imports: [[
             CommonModule,
             GroupModule,
@@ -26441,5 +26744,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddCommandDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BodyModule, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnListComponent, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditService, 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, FocusRoot, FocusableDirective, FooterComponent, FooterModule, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GroupBindingDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupInfoService, GroupModule, GroupPanelComponent, GroupsService, HeaderComponent, HeaderModule, HeaderTemplateDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PagerComponent, PagerContextService, PagerDropDownListDirective, PagerInfoComponent, PagerInputComponent, PagerInputDirective, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowEditingDirectiveBase, RowFilterModule, SaveCommandDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectionCheckboxDirective, SelectionDirective, SelectionService, SharedFilterModule, SharedModule, SinglePopupService, SizingOptionsService, Skip, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StringFilterCellComponent, StringFilterComponent, 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, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnListComponent, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditService, 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, FocusRoot, FocusableDirective, FooterComponent, FooterModule, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GridToolbarFocusableDirective, GridToolbarNavigationService, GroupBindingDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupInfoService, GroupModule, GroupPanelComponent, GroupsService, HeaderComponent, HeaderModule, HeaderTemplateDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PagerComponent, PagerContextService, PagerDropDownListDirective, PagerInfoComponent, PagerInputComponent, PagerInputDirective, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowEditingDirectiveBase, RowFilterModule, SaveCommandDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectionCheckboxDirective, SelectionDirective, SelectionService, SharedFilterModule, SharedModule, SinglePopupService, SizingOptionsService, Skip, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateContextDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, count, defaultTrackBy, hasFilterMenu, hasFilterRow, isFilterable, slice };