@progress/kendo-angular-grid 13.4.0-develop.1 → 13.4.0-develop.11

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

@@ -3,7 +3,7 @@
 * 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, HostListener, ChangeDetectionStrategy, ViewChild, 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, ElementRef, ViewChild, ViewChildren, Self, TemplateRef, Pipe, ViewEncapsulation, NgModule } from '@angular/core';
 import * as i1$1 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, Keys, isPresent as isPresent$1, 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';
@@ -24,17 +24,17 @@ import { IconsModule } from '@progress/kendo-angular-icons';
 import { plusIcon, cancelIcon, lockIcon, unlockIcon, insertMiddleIcon, caretAltLeftIcon, caretAltToLeftIcon, caretAltRightIcon, caretAltToRightIcon, sortDescSmallIcon, sortAscSmallIcon, filterIcon, stickIcon, unstickIcon, setColumnPositionIcon, columnsIcon, maxWidthIcon, displayInlineFlexIcon, slidersIcon, moreVerticalIcon, filterClearIcon, reorderIcon, caretAltDownIcon, minusIcon } from '@progress/kendo-svg-icons';
 import * as i41 from '@progress/kendo-angular-utils';
 import { DragTargetContainerDirective, DropTargetContainerDirective, DragAndDropModule as DragAndDropModule$1 } from '@progress/kendo-angular-utils';
-import * as i4$1 from '@progress/kendo-angular-buttons';
-import { ButtonModule, ChipModule, Button } from '@progress/kendo-angular-buttons';
-import * as i3$1 from '@progress/kendo-angular-inputs';
-import { NumericTextBoxComponent, InputsModule, NumericTextBoxModule } from '@progress/kendo-angular-inputs';
 import * as i1$4 from '@progress/kendo-angular-dropdowns';
 import { DropDownListComponent, DropDownListModule, AutoCompleteModule, DropDownsModule } from '@progress/kendo-angular-dropdowns';
 import * as i5 from '@progress/kendo-angular-label';
 import { LabelModule } from '@progress/kendo-angular-label';
+import * as i4$1 from '@progress/kendo-angular-buttons';
+import { ButtonModule, ChipModule, Button } from '@progress/kendo-angular-buttons';
+import * as i3$1 from '@progress/kendo-angular-inputs';
+import { NumericTextBoxComponent, InputsModule, NumericTextBoxModule } from '@progress/kendo-angular-inputs';
 import * as i4$3 from '@progress/kendo-angular-dateinputs';
 import { DatePickerModule } from '@progress/kendo-angular-dateinputs';
-import * as i16 from '@progress/kendo-angular-layout';
+import * as i17 from '@progress/kendo-angular-layout';
 import { TabStripComponent, TabStripModule } from '@progress/kendo-angular-layout';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { getter } from '@progress/kendo-common';
@@ -4442,8 +4442,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1692286635,
-    version: '13.4.0-develop.1',
+    publishDate: 1693036824,
+    version: '13.4.0-develop.11',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -7059,23 +7059,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
+// eslint-disable no-access-missing-member
 /**
- * Displays buttons for navigating to the first and to the previous page ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
+ * Displays information about the current page and the total number of records ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
  */
-class PagerPrevButtonsComponent extends PagerElementComponent {
-    constructor(ctx, pagerContext, cd, navigationService) {
+class PagerInfoComponent extends PagerElementComponent {
+    constructor(ctx, cd, pagerContext) {
         super(ctx, pagerContext, cd);
-        this.navigationService = navigationService;
+        this.pagerContext = pagerContext;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {number}
+     * @memberOf PagerInfoComponent
+     */
+    get maxItems() {
+        return Math.min(this.currentPage * this.pageSize, this.total);
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {number}
+     * @memberOf PagerInfoComponent
+     */
+    get currentPageText() {
+        return this.total ?
+            (this.currentPage - 1) * this.pageSize + 1 :
+            0;
     }
     /**
      * @hidden
      *
      * @readonly
      * @type {boolean}
-     * @memberOf PagerPrevButtonsComponent
+     * @memberOf PagerInfoComponent
      */
-    get disabled() {
-        return this.currentPage === 1 || !this.total;
+    get classes() {
+        return true;
     }
     onChanges({ total, skip, pageSize }) {
         this.total = total;
@@ -7084,168 +7107,266 @@ class PagerPrevButtonsComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: ContextService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerPrevButtonsComponent, selector: "kendo-pager-prev-buttons", usesInheritance: true, ngImport: i0, template: `
-        <button
-            [kendoGridFocusable]="!disabled"
-            kendoButton
-            type="button"
-            [title]="textFor('pagerFirstPage')"
-            [attr.aria-label]="textFor('pagerFirstPage')"
-            (click)="currentPage !== 1 ? changePage(0) : false"
-            role="button"
-            [icon]="prevArrowIcons[0]"
-            [svgIcon]="prevArrowSVGIcons[0]"
-            class="k-pager-nav k-pager-first"
-            [disabled]="disabled"
-            fillMode="flat"
-            rounded="none"
-            [size]="size">
-        </button>
-        <button
-            kendoButton
-            [kendoGridFocusable]="!disabled"
-            type="button"
-            class="k-pager-nav"
-            [disabled]="disabled"
-            [icon]="prevArrowIcons[1]"
-            [svgIcon]="prevArrowSVGIcons[1]"
-            fillMode="flat"
-            rounded="none"
-            [size]="size"
-            [title]="textFor('pagerPreviousPage')"
-            [attr.aria-label]="textFor('pagerPreviousPage')"
-            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
-        </button>
-    `, isInline: true, components: [{ type: i4$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
+PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInfoComponent, deps: [{ token: ContextService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
+PagerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerInfoComponent, selector: "kendo-pager-info", host: { properties: { "class.k-pager-info": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{currentPageText}} - {{maxItems}} {{textFor('pagerOf')}} {{total}} {{textFor('pagerItems')}}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInfoComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'kendo-pager-prev-buttons',
-                    template: `
-        <button
-            [kendoGridFocusable]="!disabled"
-            kendoButton
-            type="button"
-            [title]="textFor('pagerFirstPage')"
-            [attr.aria-label]="textFor('pagerFirstPage')"
-            (click)="currentPage !== 1 ? changePage(0) : false"
-            role="button"
-            [icon]="prevArrowIcons[0]"
-            [svgIcon]="prevArrowSVGIcons[0]"
-            class="k-pager-nav k-pager-first"
-            [disabled]="disabled"
-            fillMode="flat"
-            rounded="none"
-            [size]="size">
-        </button>
-        <button
-            kendoButton
-            [kendoGridFocusable]="!disabled"
-            type="button"
-            class="k-pager-nav"
-            [disabled]="disabled"
-            [icon]="prevArrowIcons[1]"
-            [svgIcon]="prevArrowSVGIcons[1]"
-            fillMode="flat"
-            rounded="none"
-            [size]="size"
-            [title]="textFor('pagerPreviousPage')"
-            [attr.aria-label]="textFor('pagerPreviousPage')"
-            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
-        </button>
-    `
+                    selector: 'kendo-pager-info',
+                    template: `{{currentPageText}} - {{maxItems}} {{textFor('pagerOf')}} {{total}} {{textFor('pagerItems')}}`
                 }]
-        }], ctorParameters: function () { return [{ type: ContextService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { classes: [{
+                type: HostBinding,
+                args: ["class.k-pager-info"]
+            }, {
+                type: HostBinding,
+                args: ["class.k-label"]
+            }] } });
 
 /**
- * Displays numeric buttons to enable navigation between the pages ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
+ * @hidden
  */
-class PagerNumericButtonsComponent extends PagerElementComponent {
-    constructor(ctx, cd, pagerContext) {
+class PagerDropDownListDirective {
+    constructor(host) {
+        this.host = host;
+        this.keydownHandler = (e) => {
+            if (e.keyCode === Keys.Escape && this.host.isOpen) {
+                e.stopPropagation();
+                this.host.toggle(false);
+            }
+        };
+    }
+    ngAfterViewInit() {
+        const wrapperElement = this.host.wrapper.nativeElement;
+        wrapperElement.addEventListener('keydown', this.keydownHandler, true);
+    }
+    ngOnDestroy() {
+        this.host.wrapper.nativeElement.removeEventListener('keydown', this.keydownHandler);
+    }
+}
+PagerDropDownListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerDropDownListDirective, deps: [{ token: i1$4.DropDownListComponent }], target: i0.ɵɵFactoryTarget.Directive });
+PagerDropDownListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerDropDownListDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[kendoGridPagerDropDown]' }]
+        }], ctorParameters: function () { return [{ type: i1$4.DropDownListComponent }]; } });
+
+/**
+ * Displays a drop-down list for the page size selection ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
+ */
+class PagerPageSizesComponent extends PagerElementComponent {
+    constructor(ctx, cd, pagerContext, navigationService) {
         super(ctx, pagerContext, cd);
         this.pagerContext = pagerContext;
-        this.numbersWrapClass = true;
+        this.navigationService = navigationService;
+        this._pageSizes = [];
     }
     /**
-     * @hidden
-     *
-     * @readonly
-     * @type {number[]}
-     * @memberOf PagerNumericButtonsComponent
+     * The page sizes collection. Can be an Array of numbers and/or [`PageSizeItem`](slug:api_grid_pagesizeitem) objects
+     * ([see example]({% slug paging_grid %}#toc-pager-templates))
      */
-    get buttons() {
-        const result = [];
-        for (let idx = this.start; idx <= this.end; idx++) {
-            result.push(idx);
+    set pageSizes(pageSizes) {
+        let normalizedItems = [];
+        pageSizes.forEach(item => {
+            if (typeof item === 'number') {
+                normalizedItems.push({
+                    text: item.toString(),
+                    value: item
+                });
+            }
+            else {
+                normalizedItems.push(item);
+            }
+        });
+        if (this.pageSize && !normalizedItems.some(item => item.value === this.pageSize)) {
+            normalizedItems = [{ text: this.pageSize.toString(), value: this.pageSize }, ...normalizedItems];
         }
-        return result;
+        this._pageSizes = normalizedItems;
+    }
+    get pageSizes() {
+        return this._pageSizes;
     }
     /**
      * @hidden
+     *
+     * @readonly
      */
-    get end() {
-        return Math.min((this.start + this.buttonCount) - 1, this.totalPages);
+    get classes() {
+        return true;
     }
     /**
      * @hidden
+     *
+     * @readonly
      */
-    get start() {
-        const page = this.currentPage;
-        const buttonCount = this.buttonCount;
-        if (page > buttonCount) {
-            const reminder = (page % buttonCount);
-            return (reminder === 0) ? (page - buttonCount) + 1 : (page - reminder) + 1;
-        }
-        return 1;
+    get showInitialPageSize() {
+        return this.pageSizes
+            .filter(item => {
+            if (typeof item.value === 'number') {
+                return item.value === Number(this.pageSize);
+            }
+            return this.total === Number(this.pageSize);
+        })
+            .length === 0;
     }
     /**
      * @hidden
      */
-    pageLabel(num) {
-        const pageText = this.textFor('pagerPage');
-        if (pageText) {
-            return pageText + ' ' + num;
-        }
-        return num.toString();
+    pageSizeChange(value) {
+        this.pageSize = typeof value === 'number' ? value : this.total;
+        this.pagerContext.changePageSize(this.pageSize);
     }
     /**
      * @hidden
      */
-    onSelectChange(e) {
-        const target = e.target;
-        const valueAsNumber = Number(target.value);
-        if (!Number.isNaN(valueAsNumber)) {
-            this.changePage(valueAsNumber - 1);
-        }
-        else {
-            if (target.value === 'previousButtons') {
-                this.changePage(this.start - 2);
-            }
-            else {
-                this.changePage(this.end);
-            }
-        }
+    getValue(page) {
+        return typeof page.value === 'number' ? page.value : this.total;
     }
     onChanges({ total, skip, pageSize }) {
         this.total = total;
         this.skip = skip;
-        this.pageSize = pageSize;
+        this.pageSize = typeof pageSize === 'number' ? pageSize : this.total;
         this.cd.markForCheck();
     }
 }
-PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: ContextService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, host: { properties: { "class.k-pager-numbers-wrap": "this.numbersWrapClass" } }, usesInheritance: true, ngImport: i0, template: `
-        <select
-            class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
-            kendoGridFocusable
-            [attr.title]="textFor('selectPage')"
-            [attr.aria-label]="textFor('selectPage')"
-            [ngClass]="{
-                'k-picker-sm': size === 'small',
-                'k-picker-md': size === 'medium' || !size
-            }"
+PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: ContextService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerPageSizesComponent, selector: "kendo-pager-page-sizes", inputs: { pageSizes: "pageSizes" }, host: { properties: { "class.k-pager-sizes": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-dropdownlist
+            class="k-dropdown"
+            #dropdownlist
+            [size]="size"
+            kendoGridPagerDropDown
+            [tabindex]="0"
+            kendoGridFocusable
+            [data]="pageSizes"
+            textField="text"
+            valueField="value"
+            [valuePrimitive]="true"
+            [value]="pageSize"
+            (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
+        <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
+    `, isInline: true, components: [{ type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }], directives: [{ type: PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]" }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'kendo-pager-page-sizes',
+                    template: `
+        <kendo-dropdownlist
+            class="k-dropdown"
+            #dropdownlist
+            [size]="size"
+            kendoGridPagerDropDown
+            [tabindex]="0"
+            kendoGridFocusable
+            [data]="pageSizes"
+            textField="text"
+            valueField="value"
+            [valuePrimitive]="true"
+            [value]="pageSize"
+            (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
+        <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }, { type: NavigationService }]; }, propDecorators: { pageSizes: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['class.k-pager-sizes']
+            }, {
+                type: HostBinding,
+                args: ['class.k-label']
+            }] } });
+
+/**
+ * Displays numeric buttons to enable navigation between the pages ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
+ */
+class PagerNumericButtonsComponent extends PagerElementComponent {
+    constructor(ctx, cd, pagerContext) {
+        super(ctx, pagerContext, cd);
+        this.pagerContext = pagerContext;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {number[]}
+     * @memberOf PagerNumericButtonsComponent
+     */
+    get buttons() {
+        const result = [];
+        for (let idx = this.start; idx <= this.end; idx++) {
+            result.push(idx);
+        }
+        return result;
+    }
+    /**
+     * @hidden
+     */
+    get end() {
+        return Math.min((this.start + this.buttonCount) - 1, this.totalPages);
+    }
+    /**
+     * @hidden
+     */
+    get start() {
+        const page = this.currentPage;
+        const buttonCount = this.buttonCount;
+        if (page > buttonCount) {
+            const reminder = (page % buttonCount);
+            return (reminder === 0) ? (page - buttonCount) + 1 : (page - reminder) + 1;
+        }
+        return 1;
+    }
+    /**
+     * @hidden
+     */
+    pageLabel(num) {
+        const pageText = this.textFor('pagerPage');
+        if (pageText) {
+            return pageText + ' ' + num;
+        }
+        return num.toString();
+    }
+    /**
+     * @hidden
+     */
+    onSelectChange(e) {
+        const target = e.target;
+        const valueAsNumber = Number(target.value);
+        if (!Number.isNaN(valueAsNumber)) {
+            this.changePage(valueAsNumber - 1);
+        }
+        else {
+            if (target.value === 'previousButtons') {
+                this.changePage(this.start - 2);
+            }
+            else {
+                this.changePage(this.end);
+            }
+        }
+    }
+    onChanges({ total, skip, pageSize }) {
+        this.total = total;
+        this.skip = skip;
+        this.pageSize = pageSize;
+        this.cd.markForCheck();
+    }
+}
+PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: ContextService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
+PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, read: ElementRef }, { propertyName: "numbersElement", first: true, predicate: ["numbers"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
+        <select
+            #select
+            class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
+            kendoGridFocusable
+            [style.display]="'none'"
+            [attr.title]="textFor('selectPage')"
+            [attr.aria-label]="textFor('selectPage')"
+            [ngClass]="{
+                'k-picker-sm': size === 'small',
+                'k-picker-md': size === 'medium' || !size
+            }"
             (change)="onSelectChange($event)">
             <option *ngIf="start > 1"
                 value="previousButtons"
@@ -7266,7 +7387,7 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 [attr.aria-label]="pageLabel(end + 1)">...
             </option>
         </select>
-        <div class="k-pager-numbers">
+        <div class="k-pager-numbers" #numbers>
             <button *ngIf="start > 1"
                 type="button"
                 kendoGridFocusable
@@ -7316,8 +7437,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-pager-numeric-buttons',
                     template: `
         <select
+            #select
             class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
             kendoGridFocusable
+            [style.display]="'none'"
             [attr.title]="textFor('selectPage')"
             [attr.aria-label]="textFor('selectPage')"
             [ngClass]="{
@@ -7344,7 +7467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [attr.aria-label]="pageLabel(end + 1)">...
             </option>
         </select>
-        <div class="k-pager-numbers">
+        <div class="k-pager-numbers" #numbers>
             <button *ngIf="start > 1"
                 type="button"
                 kendoGridFocusable
@@ -7388,13 +7511,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { numbersWrapClass: [{
-                type: HostBinding,
-                args: ['class.k-pager-numbers-wrap']
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { selectElement: [{
+                type: ViewChild,
+                args: ['select', { read: ElementRef }]
+            }], numbersElement: [{
+                type: ViewChild,
+                args: ['numbers', { read: ElementRef }]
             }], buttonCount: [{
                 type: Input
             }] } });
 
+/**
+ * Displays buttons for navigating to the first and to the previous page ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
+ */
+class PagerPrevButtonsComponent extends PagerElementComponent {
+    constructor(ctx, pagerContext, cd, navigationService) {
+        super(ctx, pagerContext, cd);
+        this.navigationService = navigationService;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {boolean}
+     * @memberOf PagerPrevButtonsComponent
+     */
+    get disabled() {
+        return this.currentPage === 1 || !this.total;
+    }
+    onChanges({ total, skip, pageSize }) {
+        this.total = total;
+        this.skip = skip;
+        this.pageSize = pageSize;
+        this.cd.markForCheck();
+    }
+}
+PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: ContextService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerPrevButtonsComponent, selector: "kendo-pager-prev-buttons", usesInheritance: true, ngImport: i0, template: `
+        <button
+            [kendoGridFocusable]="!disabled"
+            kendoButton
+            type="button"
+            [title]="textFor('pagerFirstPage')"
+            [attr.aria-label]="textFor('pagerFirstPage')"
+            (click)="currentPage !== 1 ? changePage(0) : false"
+            role="button"
+            [icon]="prevArrowIcons[0]"
+            [svgIcon]="prevArrowSVGIcons[0]"
+            class="k-pager-nav k-pager-first"
+            [disabled]="disabled"
+            fillMode="flat"
+            rounded="none"
+            [size]="size">
+        </button>
+        <button
+            kendoButton
+            [kendoGridFocusable]="!disabled"
+            type="button"
+            class="k-pager-nav"
+            [disabled]="disabled"
+            [icon]="prevArrowIcons[1]"
+            [svgIcon]="prevArrowSVGIcons[1]"
+            fillMode="flat"
+            rounded="none"
+            [size]="size"
+            [title]="textFor('pagerPreviousPage')"
+            [attr.aria-label]="textFor('pagerPreviousPage')"
+            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
+        </button>
+    `, isInline: true, components: [{ type: i4$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'kendo-pager-prev-buttons',
+                    template: `
+        <button
+            [kendoGridFocusable]="!disabled"
+            kendoButton
+            type="button"
+            [title]="textFor('pagerFirstPage')"
+            [attr.aria-label]="textFor('pagerFirstPage')"
+            (click)="currentPage !== 1 ? changePage(0) : false"
+            role="button"
+            [icon]="prevArrowIcons[0]"
+            [svgIcon]="prevArrowSVGIcons[0]"
+            class="k-pager-nav k-pager-first"
+            [disabled]="disabled"
+            fillMode="flat"
+            rounded="none"
+            [size]="size">
+        </button>
+        <button
+            kendoButton
+            [kendoGridFocusable]="!disabled"
+            type="button"
+            class="k-pager-nav"
+            [disabled]="disabled"
+            [icon]="prevArrowIcons[1]"
+            [svgIcon]="prevArrowSVGIcons[1]"
+            fillMode="flat"
+            rounded="none"
+            [size]="size"
+            [title]="textFor('pagerPreviousPage')"
+            [attr.aria-label]="textFor('pagerPreviousPage')"
+            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
+        </button>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; } });
+
 /**
  * @hidden
  */
@@ -7566,296 +7792,76 @@ class PagerNextButtonsComponent extends PagerElementComponent {
 }
 PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: ContextService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
 PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerNextButtonsComponent, selector: "kendo-pager-next-buttons", usesInheritance: true, ngImport: i0, template: `
-        <button
-            kendoButton
-            [kendoGridFocusable]="!disabled"
-            type="button"
-            [size]="size"
-            [icon]="nextArrowIcons[0]"
-            [svgIcon]="nextArrowSVGIcons[0]"
-            fillMode="flat"
-            rounded="none"
-            class="k-pager-nav"
-            [disabled]="disabled"
-            [title]="textFor('pagerNextPage')"
-            [attr.aria-label]="textFor('pagerNextPage')"
-            (click)="currentPage !== totalPages ? changePage(currentPage) : false">
-        </button>
-        <button
-            kendoButton
-            [kendoGridFocusable]="!disabled"
-            type="button"
-            [size]="size"
-            [icon]="nextArrowIcons[1]"
-            [svgIcon]="nextArrowSVGIcons[1]"
-            fillMode="flat"
-            rounded="none"
-            class="k-pager-nav k-pager-last"
-            [disabled]="disabled"
-            [title]="textFor('pagerLastPage')"
-            [attr.aria-label]="textFor('pagerLastPage')"
-            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
-        </button>
-    `, isInline: true, components: [{ type: i4$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'kendo-pager-next-buttons',
-                    template: `
-        <button
-            kendoButton
-            [kendoGridFocusable]="!disabled"
-            type="button"
-            [size]="size"
-            [icon]="nextArrowIcons[0]"
-            [svgIcon]="nextArrowSVGIcons[0]"
-            fillMode="flat"
-            rounded="none"
-            class="k-pager-nav"
-            [disabled]="disabled"
-            [title]="textFor('pagerNextPage')"
-            [attr.aria-label]="textFor('pagerNextPage')"
-            (click)="currentPage !== totalPages ? changePage(currentPage) : false">
-        </button>
-        <button
-            kendoButton
-            [kendoGridFocusable]="!disabled"
-            type="button"
-            [size]="size"
-            [icon]="nextArrowIcons[1]"
-            [svgIcon]="nextArrowSVGIcons[1]"
-            fillMode="flat"
-            rounded="none"
-            class="k-pager-nav k-pager-last"
-            [disabled]="disabled"
-            [title]="textFor('pagerLastPage')"
-            [attr.aria-label]="textFor('pagerLastPage')"
-            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
-        </button>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: ContextService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; } });
-
-// eslint-disable no-access-missing-member
-/**
- * Displays information about the current page and the total number of records ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
- */
-class PagerInfoComponent extends PagerElementComponent {
-    constructor(ctx, cd, pagerContext) {
-        super(ctx, pagerContext, cd);
-        this.pagerContext = pagerContext;
-    }
-    /**
-     * @hidden
-     *
-     * @readonly
-     * @type {number}
-     * @memberOf PagerInfoComponent
-     */
-    get maxItems() {
-        return Math.min(this.currentPage * this.pageSize, this.total);
-    }
-    /**
-     * @hidden
-     *
-     * @readonly
-     * @type {number}
-     * @memberOf PagerInfoComponent
-     */
-    get currentPageText() {
-        return this.total ?
-            (this.currentPage - 1) * this.pageSize + 1 :
-            0;
-    }
-    /**
-     * @hidden
-     *
-     * @readonly
-     * @type {boolean}
-     * @memberOf PagerInfoComponent
-     */
-    get classes() {
-        return true;
-    }
-    onChanges({ total, skip, pageSize }) {
-        this.total = total;
-        this.skip = skip;
-        this.pageSize = pageSize;
-        this.cd.markForCheck();
-    }
-}
-PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInfoComponent, deps: [{ token: ContextService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-PagerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerInfoComponent, selector: "kendo-pager-info", host: { properties: { "class.k-pager-info": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{currentPageText}} - {{maxItems}} {{textFor('pagerOf')}} {{total}} {{textFor('pagerItems')}}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInfoComponent, decorators: [{
-            type: Component,
-            args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'kendo-pager-info',
-                    template: `{{currentPageText}} - {{maxItems}} {{textFor('pagerOf')}} {{total}} {{textFor('pagerItems')}}`
-                }]
-        }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { classes: [{
-                type: HostBinding,
-                args: ["class.k-pager-info"]
-            }, {
-                type: HostBinding,
-                args: ["class.k-label"]
-            }] } });
-
-/**
- * @hidden
- */
-class PagerDropDownListDirective {
-    constructor(host) {
-        this.host = host;
-        this.keydownHandler = (e) => {
-            if (e.keyCode === Keys.Escape && this.host.isOpen) {
-                e.stopPropagation();
-                this.host.toggle(false);
-            }
-        };
-    }
-    ngAfterViewInit() {
-        const wrapperElement = this.host.wrapper.nativeElement;
-        wrapperElement.addEventListener('keydown', this.keydownHandler, true);
-    }
-    ngOnDestroy() {
-        this.host.wrapper.nativeElement.removeEventListener('keydown', this.keydownHandler);
-    }
-}
-PagerDropDownListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerDropDownListDirective, deps: [{ token: i1$4.DropDownListComponent }], target: i0.ɵɵFactoryTarget.Directive });
-PagerDropDownListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerDropDownListDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[kendoGridPagerDropDown]' }]
-        }], ctorParameters: function () { return [{ type: i1$4.DropDownListComponent }]; } });
-
-/**
- * Displays a drop-down list for the page size selection ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
- */
-class PagerPageSizesComponent extends PagerElementComponent {
-    constructor(ctx, cd, pagerContext, navigationService) {
-        super(ctx, pagerContext, cd);
-        this.pagerContext = pagerContext;
-        this.navigationService = navigationService;
-        this._pageSizes = [];
-    }
-    /**
-     * The page sizes collection. Can be an Array of numbers and/or [`PageSizeItem`](slug:api_grid_pagesizeitem) objects
-     * ([see example]({% slug paging_grid %}#toc-pager-templates))
-     */
-    set pageSizes(pageSizes) {
-        let normalizedItems = [];
-        pageSizes.forEach(item => {
-            if (typeof item === 'number') {
-                normalizedItems.push({
-                    text: item.toString(),
-                    value: item
-                });
-            }
-            else {
-                normalizedItems.push(item);
-            }
-        });
-        if (this.pageSize && !normalizedItems.some(item => item.value === this.pageSize)) {
-            normalizedItems = [{ text: this.pageSize.toString(), value: this.pageSize }, ...normalizedItems];
-        }
-        this._pageSizes = normalizedItems;
-    }
-    get pageSizes() {
-        return this._pageSizes;
-    }
-    /**
-     * @hidden
-     *
-     * @readonly
-     */
-    get classes() {
-        return true;
-    }
-    /**
-     * @hidden
-     *
-     * @readonly
-     */
-    get showInitialPageSize() {
-        return this.pageSizes
-            .filter(item => {
-            if (typeof item.value === 'number') {
-                return item.value === Number(this.pageSize);
-            }
-            return this.total === Number(this.pageSize);
-        })
-            .length === 0;
-    }
-    /**
-     * @hidden
-     */
-    pageSizeChange(value) {
-        this.pageSize = typeof value === 'number' ? value : this.total;
-        this.pagerContext.changePageSize(this.pageSize);
-    }
-    /**
-     * @hidden
-     */
-    getValue(page) {
-        return typeof page.value === 'number' ? page.value : this.total;
-    }
-    onChanges({ total, skip, pageSize }) {
-        this.total = total;
-        this.skip = skip;
-        this.pageSize = typeof pageSize === 'number' ? pageSize : this.total;
-        this.cd.markForCheck();
-    }
-}
-PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: ContextService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerPageSizesComponent, selector: "kendo-pager-page-sizes", inputs: { pageSizes: "pageSizes" }, host: { properties: { "class.k-pager-sizes": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `
-        <kendo-dropdownlist
-            class="k-dropdown"
-            #dropdownlist
+        <button
+            kendoButton
+            [kendoGridFocusable]="!disabled"
+            type="button"
             [size]="size"
-            kendoGridPagerDropDown
-            [tabindex]="0"
-            kendoGridFocusable
-            [data]="pageSizes"
-            textField="text"
-            valueField="value"
-            [valuePrimitive]="true"
-            [value]="pageSize"
-            (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
-        <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
-    `, isInline: true, components: [{ type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }], directives: [{ type: PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]" }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
+            [icon]="nextArrowIcons[0]"
+            [svgIcon]="nextArrowSVGIcons[0]"
+            fillMode="flat"
+            rounded="none"
+            class="k-pager-nav"
+            [disabled]="disabled"
+            [title]="textFor('pagerNextPage')"
+            [attr.aria-label]="textFor('pagerNextPage')"
+            (click)="currentPage !== totalPages ? changePage(currentPage) : false">
+        </button>
+        <button
+            kendoButton
+            [kendoGridFocusable]="!disabled"
+            type="button"
+            [size]="size"
+            [icon]="nextArrowIcons[1]"
+            [svgIcon]="nextArrowSVGIcons[1]"
+            fillMode="flat"
+            rounded="none"
+            class="k-pager-nav k-pager-last"
+            [disabled]="disabled"
+            [title]="textFor('pagerLastPage')"
+            [attr.aria-label]="textFor('pagerLastPage')"
+            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
+        </button>
+    `, isInline: true, components: [{ type: i4$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'kendo-pager-page-sizes',
+                    selector: 'kendo-pager-next-buttons',
                     template: `
-        <kendo-dropdownlist
-            class="k-dropdown"
-            #dropdownlist
+        <button
+            kendoButton
+            [kendoGridFocusable]="!disabled"
+            type="button"
             [size]="size"
-            kendoGridPagerDropDown
-            [tabindex]="0"
-            kendoGridFocusable
-            [data]="pageSizes"
-            textField="text"
-            valueField="value"
-            [valuePrimitive]="true"
-            [value]="pageSize"
-            (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
-        <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
+            [icon]="nextArrowIcons[0]"
+            [svgIcon]="nextArrowSVGIcons[0]"
+            fillMode="flat"
+            rounded="none"
+            class="k-pager-nav"
+            [disabled]="disabled"
+            [title]="textFor('pagerNextPage')"
+            [attr.aria-label]="textFor('pagerNextPage')"
+            (click)="currentPage !== totalPages ? changePage(currentPage) : false">
+        </button>
+        <button
+            kendoButton
+            [kendoGridFocusable]="!disabled"
+            type="button"
+            [size]="size"
+            [icon]="nextArrowIcons[1]"
+            [svgIcon]="nextArrowSVGIcons[1]"
+            fillMode="flat"
+            rounded="none"
+            class="k-pager-nav k-pager-last"
+            [disabled]="disabled"
+            [title]="textFor('pagerLastPage')"
+            [attr.aria-label]="textFor('pagerLastPage')"
+            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
+        </button>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }, { type: NavigationService }]; }, propDecorators: { pageSizes: [{
-                type: Input
-            }], classes: [{
-                type: HostBinding,
-                args: ['class.k-pager-sizes']
-            }, {
-                type: HostBinding,
-                args: ['class.k-label']
-            }] } });
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; } });
 
 /**
  * @hidden
@@ -7886,18 +7892,33 @@ class PagerComponent {
             if (this.template || !element) {
                 return;
             }
-            const width = element.offsetWidth;
-            if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
-                this.renderer.removeClass(element, 'k-pager-mobile-md');
-                this.renderer.addClass(element, 'k-pager-mobile-sm');
-            }
-            else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
-                this.renderer.addClass(element, 'k-pager-mobile-md');
-                this.renderer.removeClass(element, 'k-pager-mobile-sm');
-            }
-            else {
-                this.clearResponsiveClasses();
-            }
+            this.zone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    const width = element.offsetWidth;
+                    if (this.numericButtons) {
+                        const selectElement = this.numericButtons.selectElement.nativeElement;
+                        const numbersElement = this.numericButtons.numbersElement.nativeElement;
+                        this.renderer.removeStyle(numbersElement, 'display');
+                        this.renderer.setStyle(selectElement, 'display', 'none');
+                        if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
+                            this.renderer.removeStyle(selectElement, 'display');
+                            this.renderer.setStyle(numbersElement, 'display', 'none');
+                        }
+                    }
+                    if (this.pagerInfo) {
+                        this.renderer.removeStyle(this.pagerInfo.nativeElement, 'display');
+                        if (width < RESPONSIVE_BREAKPOINT_LARGE) {
+                            this.renderer.setStyle(this.pagerInfo.nativeElement, 'display', 'none');
+                        }
+                    }
+                    if (this.pagerPageSizes) {
+                        this.renderer.removeStyle(this.pagerPageSizes.nativeElement, 'display');
+                        if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
+                            this.renderer.setStyle(this.pagerPageSizes.nativeElement, 'display', 'none');
+                        }
+                    }
+                });
+            });
         };
     }
     set options(value) {
@@ -8016,12 +8037,10 @@ class PagerComponent {
         }
         const changesInTemplate = changes['template'];
         if (changesInTemplate) {
-            // eslint-disable-next-line no-unused-expressions
-            changesInTemplate.currentValue ? this.clearResponsiveClasses() : this.resizeHandler();
+            changesInTemplate.currentValue ? this.clearResponsiveStyling() : this.resizeHandler();
         }
         if (changes['options']) {
-            // eslint-disable-next-line no-unused-expressions
-            this.settings.responsive ? this.resizeHandler() : this.clearResponsiveClasses();
+            this.settings.responsive ? this.resizeHandler() : this.clearResponsiveStyling();
         }
     }
     ngOnDestroy() {
@@ -8047,11 +8066,6 @@ class PagerComponent {
             }
         });
     }
-    clearResponsiveClasses() {
-        const element = this.element.nativeElement;
-        this.renderer.removeClass(element, 'k-pager-mobile-sm');
-        this.renderer.removeClass(element, 'k-pager-mobile-md');
-    }
     shouldTriggerPageChange(target, condition) {
         return this.navigationService.pagerEnabled &&
             target === this.element.nativeElement &&
@@ -8074,6 +8088,18 @@ class PagerComponent {
             this.cellContext.focusGroup = this.focusGroup;
         }
     }
+    clearResponsiveStyling() {
+        this.zone.runOutsideAngular(() => {
+            setTimeout(() => {
+                if (this.numericButtons) {
+                    this.renderer.removeStyle(this.numericButtons.numbersElement.nativeElement, 'display');
+                    this.renderer.setStyle(this.numericButtons.selectElement.nativeElement, 'display', 'none');
+                }
+                this.pagerInfo && this.renderer.removeStyle(this.pagerInfo.nativeElement, 'display');
+                this.pagerPageSizes && this.renderer.removeStyle(this.pagerPageSizes.nativeElement, 'display');
+            });
+        });
+    }
 }
 PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerComponent, deps: [{ token: PagerContextService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: ContextService }, { token: CELL_CONTEXT, optional: true }, { token: FocusRoot }, { token: FocusGroup }], target: i0.ɵɵFactoryTarget.Component });
 PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerComponent, selector: "kendo-pager", inputs: { total: "total", skip: "skip", pageSize: "pageSize", options: "options", size: "size", template: "template" }, outputs: { pageChange: "pageChange" }, host: { listeners: { "focusin": "onFocusIn($event)", "focusout": "onFocusOut()", "keydown.escape": "onEscape()", "keydown.enter": "onEnter($event)", "keydown.arrowleft": "navigateToPreviousPage($event)", "keydown.pageup": "navigateToPreviousPage($event)", "keydown.arrowright": "navigateToNextPage($event)", "keydown.pagedown": "navigateToNextPage($event)", "keydown.home": "navigateToFirstPage($event)", "keydown.end": "navigateToLastPage($event)" }, properties: { "class.k-pager-wrap": "this.pagerWrapClass", "class.k-grid-pager": "this.gridPagerClass", "class.k-pager-sm": "this.sizeSmallClass", "class.k-pager-md": "this.sizeMediumClass", "class.k-focus": "this.isFocused", "attr.aria-label": "this.pagerAriaLabel" } }, providers: [{
@@ -8087,7 +8113,7 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             provide: FocusGroup,
             deps: [FocusRoot],
             useClass: FocusGroup
-        }], usesOnChanges: true, ngImport: i0, template: `
+        }], viewQueries: [{ propertyName: "pagerInfo", first: true, predicate: PagerInfoComponent, descendants: true, read: ElementRef }, { propertyName: "pagerPageSizes", first: true, predicate: PagerPageSizesComponent, descendants: true, read: ElementRef }, { propertyName: "numericButtons", first: true, predicate: PagerNumericButtonsComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div
             *ngIf="navigationService.pagerEnabled"
             class="k-sr-only"
@@ -8101,20 +8127,21 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
         <ng-container *ngIf="!template?.templateRef">
-            <kendo-pager-prev-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
-            <kendo-pager-numeric-buttons
-                [size]="size"
-                *ngIf="settings.type === 'numeric'"
-                [buttonCount]="settings.buttonCount">
-            </kendo-pager-numeric-buttons>
-            <kendo-pager-input [size]="size" *ngIf="settings.type === 'input'"></kendo-pager-input>
-            <kendo-pager-next-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-next-buttons>
+            <div class="k-pager-numbers-wrap">
+                <kendo-pager-prev-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
+                <kendo-pager-numeric-buttons
+                    [size]="size"
+                    *ngIf="settings.type === 'numeric'"
+                    [buttonCount]="settings.buttonCount">
+                </kendo-pager-numeric-buttons>
+                <kendo-pager-input [size]="size" *ngIf="settings.type === 'input'"></kendo-pager-input>
+                <kendo-pager-next-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-next-buttons>
+            </div>
             <kendo-pager-info *ngIf='settings.info'></kendo-pager-info>
             <kendo-pager-page-sizes
                 [size]="size"
                 *ngIf="settings.pageSizes"
                 [pageSizes]="$any(settings.pageSizes)"
-                #pageSizes
             ></kendo-pager-page-sizes>
         </ng-container>
         <div
@@ -8156,20 +8183,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
         <ng-container *ngIf="!template?.templateRef">
-            <kendo-pager-prev-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
-            <kendo-pager-numeric-buttons
-                [size]="size"
-                *ngIf="settings.type === 'numeric'"
-                [buttonCount]="settings.buttonCount">
-            </kendo-pager-numeric-buttons>
-            <kendo-pager-input [size]="size" *ngIf="settings.type === 'input'"></kendo-pager-input>
-            <kendo-pager-next-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-next-buttons>
+            <div class="k-pager-numbers-wrap">
+                <kendo-pager-prev-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
+                <kendo-pager-numeric-buttons
+                    [size]="size"
+                    *ngIf="settings.type === 'numeric'"
+                    [buttonCount]="settings.buttonCount">
+                </kendo-pager-numeric-buttons>
+                <kendo-pager-input [size]="size" *ngIf="settings.type === 'input'"></kendo-pager-input>
+                <kendo-pager-next-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-next-buttons>
+            </div>
             <kendo-pager-info *ngIf='settings.info'></kendo-pager-info>
             <kendo-pager-page-sizes
                 [size]="size"
                 *ngIf="settings.pageSizes"
                 [pageSizes]="$any(settings.pageSizes)"
-                #pageSizes
             ></kendo-pager-page-sizes>
         </ng-container>
         <div
@@ -8187,7 +8215,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }, {
                     type: Inject,
                     args: [CELL_CONTEXT]
-                }] }, { type: FocusRoot }, { type: FocusGroup }]; }, propDecorators: { total: [{
+                }] }, { type: FocusRoot }, { type: FocusGroup }]; }, propDecorators: { pagerInfo: [{
+                type: ViewChild,
+                args: [PagerInfoComponent, { read: ElementRef }]
+            }], pagerPageSizes: [{
+                type: ViewChild,
+                args: [PagerPageSizesComponent, { read: ElementRef }]
+            }], numericButtons: [{
+                type: ViewChild,
+                args: [PagerNumericButtonsComponent]
+            }], total: [{
                 type: Input
             }], skip: [{
                 type: Input
@@ -9528,7 +9565,7 @@ FilterMenuInputWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
             (keydown.shift.tab)="onShiftTab($event)">
         </kendo-dropdownlist>
         <ng-content></ng-content>
-    `, isInline: true, components: [{ type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
+    `, isInline: true, components: [{ type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuInputWrapperComponent, decorators: [{
             type: Component,
             args: [{
@@ -9724,7 +9761,7 @@ StringFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [filter]="filter"
             [menuTabbingService]="menuTabbingService">
         </kendo-grid-string-filter-menu-input>
-    `, isInline: true, components: [{ type: StringFilterMenuInputComponent, selector: "kendo-grid-string-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "isFirstDropDown", "menuTabbingService"] }, { type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
+    `, isInline: true, components: [{ type: StringFilterMenuInputComponent, selector: "kendo-grid-string-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "isFirstDropDown", "menuTabbingService"] }, { type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -10130,7 +10167,7 @@ NumericFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             [menuTabbingService]="menuTabbingService"
             >
         </kendo-grid-numeric-filter-menu-input>
-    `, isInline: true, components: [{ type: NumericFilterMenuInputComponent, selector: "kendo-grid-numeric-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "filterDelay", "isFirstDropDown", "menuTabbingService", "step", "min", "max", "spinners", "decimals", "format"] }, { type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
+    `, isInline: true, components: [{ type: NumericFilterMenuInputComponent, selector: "kendo-grid-numeric-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "filterDelay", "isFirstDropDown", "menuTabbingService", "step", "min", "max", "spinners", "decimals", "format"] }, { type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -10585,7 +10622,7 @@ DateFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [menuTabbingService]="menuTabbingService"
             >
         </kendo-grid-date-filter-menu-input>
-    `, isInline: true, components: [{ type: DateFilterMenuInputComponent, selector: "kendo-grid-date-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "menuTabbingService", "format", "formatPlaceholder", "placeholder", "min", "max", "activeView", "bottomView", "topView", "weekNumber", "isFirstDropDown"] }, { type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
+    `, isInline: true, components: [{ type: DateFilterMenuInputComponent, selector: "kendo-grid-date-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "menuTabbingService", "format", "formatPlaceholder", "placeholder", "min", "max", "activeView", "bottomView", "topView", "weekNumber", "isFirstDropDown"] }, { type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateFilterMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -11060,10 +11097,10 @@ class FilterMenuContainerComponent {
             e.preventDefault();
             if (buttonType === 'reset') {
                 // eslint-disable-next-line no-unused-expressions
-                this.disabled ? this.menuTabbingService.firstFocusable.focus() : this.filterButton.nativeElement.focus();
+                this.menuTabbingService.firstFocusable.focus();
             }
             else {
-                this.menuTabbingService.firstFocusable.focus();
+                this.disabled ? this.menuTabbingService.firstFocusable.focus() : this.resetButton.nativeElement.focus();
             }
         }
     }
@@ -11187,15 +11224,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['filterButton', { static: false }]
             }] } });
 
+let id$3 = 0;
+const getId$1 = (gridId) => `${gridId}-filter-menu-${id$3++}`;
 /**
  * @hidden
  */
 class FilterMenuComponent {
-    constructor(filterService, popupService, ctx, navigationService) {
+    constructor(filterService, popupService, ctx, navigationService, renderer, cdr, idService) {
         this.filterService = filterService;
         this.popupService = popupService;
         this.ctx = ctx;
         this.navigationService = navigationService;
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.idService = idService;
         this.filterIcon = filterIcon;
         this.tabIndex = '-1';
     }
@@ -11210,9 +11252,35 @@ class FilterMenuComponent {
         const columnName = this.column.title || this.column.field;
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
+    /**
+     * @hidden
+     */
+    get isNavigable() {
+        return this.navigationService.tableEnabled;
+    }
     toggle(anchor, template) {
         this.popupRef = this.popupService.open(anchor, template, this.popupRef);
-        if (!this.popupRef) {
+        // Needed as changes to 'popupRef' are not reflected
+        // automatically when the Popup is closed by clicking outside the anchor
+        const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
+        if (this.popupRef) {
+            this.popupRef.popup.instance.close.pipe(take(1)).subscribe(() => {
+                this.popupRef = null;
+                const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
+                ariaRoot && this.renderer.removeAttribute(ariaRoot, 'aria-controls');
+                ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'false');
+            });
+            const popupAriaElement = this.popupRef.popupElement.querySelector('.k-grid-filter-popup');
+            if (popupAriaElement) {
+                const popupId = getId$1(this.idService?.gridId());
+                this.renderer.setAttribute(popupAriaElement, 'id', popupId);
+                this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
+                this.renderer.setAttribute(popupAriaElement, 'aria-label', this.filterLabel);
+                ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-controls', popupId);
+                ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'true');
+            }
+        }
+        else {
             if (this.navigationService.tableEnabled) {
                 this.navigationService.focusCell(0, this.column.leafIndex);
             }
@@ -11224,6 +11292,8 @@ class FilterMenuComponent {
     }
     close() {
         this.popupService.destroy();
+        this.popupRef = null;
+        this.cdr.markForCheck();
         if (this.navigationService.tableEnabled) {
             this.navigationService.focusCell(0, this.column.leafIndex);
         }
@@ -11232,7 +11302,7 @@ class FilterMenuComponent {
         }
     }
 }
-FilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuComponent, deps: [{ token: FilterService }, { token: SinglePopupService }, { token: ContextService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+FilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuComponent, deps: [{ token: FilterService }, { token: SinglePopupService }, { token: ContextService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: { column: "column", filter: "filter", tabIndex: "tabIndex" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, static: true }, { propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
         <a #anchor
             class="k-grid-filter-menu k-grid-header-menu"
@@ -11241,7 +11311,9 @@ FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             (click)="toggle(anchor, template)"
             (keydown.enter)="$event.stopImmediatePropagation()"
             href="#"
-            [attr.title]="filterLabel">
+            [attr.title]="filterLabel"
+            [attr.aria-haspopup]="isNavigable ? undefined : 'dialog'"
+            [attr.aria-expanded]="isNavigable ? undefined : false">
             <kendo-icon-wrapper
                 name="filter"
                 [svgIcon]="filterIcon"></kendo-icon-wrapper>
@@ -11269,7 +11341,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             (click)="toggle(anchor, template)"
             (keydown.enter)="$event.stopImmediatePropagation()"
             href="#"
-            [attr.title]="filterLabel">
+            [attr.title]="filterLabel"
+            [attr.aria-haspopup]="isNavigable ? undefined : 'dialog'"
+            [attr.aria-expanded]="isNavigable ? undefined : false">
             <kendo-icon-wrapper
                 name="filter"
                 [svgIcon]="filterIcon"></kendo-icon-wrapper>
@@ -11286,7 +11360,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: SinglePopupService }, { type: ContextService }, { type: NavigationService }]; }, propDecorators: { column: [{
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: SinglePopupService }, { type: ContextService }, { type: NavigationService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: IdService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { column: [{
                 type: Input
             }], filter: [{
                 type: Input
@@ -11344,7 +11420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * @hidden
  */
-const ColunnMenuErrorMessages = {
+const ColumnMenuErrorMessages = {
     autoSizeColumn: 'The auto size column does not work with enabled virtual columns',
     autoSizeAllColumns: 'The auto size all columns does not work with enabled virtual columns'
 };
@@ -11450,6 +11526,9 @@ class ColumnMenuItemComponent {
         this.collapse = new EventEmitter();
         this.contentState = 'collapsed';
     }
+    ngAfterViewInit() {
+        this.contentTemplate && (this.contentId = `k-${guid()}`);
+    }
     ngOnChanges(changes) {
         if (changes.expanded) {
             this.updateContentState();
@@ -11484,13 +11563,14 @@ ColumnMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [class.k-selected]="selected"
             [class.k-disabled]="disabled"
             role="button"
-            [attr.aria-expanded]="expanded">
+            [attr.aria-expanded]="expanded"
+            [attr.aria-controls]="expanded ? contentId : undefined">
             <kendo-icon-wrapper
                 [name]="icon"
                 [svgIcon]="svgIcon"></kendo-icon-wrapper>
             {{ text }}
         </div>
-        <div *ngIf="contentTemplate" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
+        <div *ngIf="contentTemplate" [attr.id]="contentId" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
             <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
             </ng-container>
         <div>
@@ -11552,13 +11632,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [class.k-selected]="selected"
             [class.k-disabled]="disabled"
             role="button"
-            [attr.aria-expanded]="expanded">
+            [attr.aria-expanded]="expanded"
+            [attr.aria-controls]="expanded ? contentId : undefined">
             <kendo-icon-wrapper
                 [name]="icon"
                 [svgIcon]="svgIcon"></kendo-icon-wrapper>
             {{ text }}
         </div>
-        <div *ngIf="contentTemplate" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
+        <div *ngIf="contentTemplate" [attr.id]="contentId" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
             <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
             </ng-container>
         <div>
@@ -11934,14 +12015,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * @hidden
+ */
+class ColumnListKeyboardNavigation {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.activeIndex = 0;
+    }
+    next() {
+        this.toggle(this.activeIndex, false);
+        this.activeIndex = Math.min(this.activeIndex + 1, this.items.length - 1);
+        this.toggle(this.activeIndex, true);
+    }
+    prev() {
+        this.toggle(this.activeIndex, false);
+        this.activeIndex = Math.max(this.activeIndex - 1, 0);
+        this.toggle(this.activeIndex, true);
+    }
+    toggle(index, active) {
+        const element = this.items[index]?.host.nativeElement;
+        element && this.renderer.setAttribute(this.items[index].host.nativeElement, 'tabindex', active ? '0' : '-1');
+        active && element && element.focus();
+    }
+    toggleCheckedState() {
+        this.items[this.activeIndex].host.nativeElement.firstElementChild.click();
+    }
+}
+ColumnListKeyboardNavigation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListKeyboardNavigation, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+ColumnListKeyboardNavigation.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListKeyboardNavigation });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListKeyboardNavigation, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
+
+/**
+ * @hidden
+ */
+class ColumnMenuChooserItemCheckedDirective {
+    constructor(host, renderer) {
+        this.host = host;
+        this.renderer = renderer;
+        this.checkedChangeSub = new Subscription();
+    }
+    ngAfterViewInit() {
+        this.checkedChangeSub.add(this.renderer.listen(this.host.nativeElement.firstElementChild, 'change', (e) => {
+            this.kendoColumnMenuChooserItemChecked = e.target.checked;
+        }));
+    }
+    ngOnDestroy() {
+        this.checkedChangeSub.unsubscribe();
+    }
+}
+ColumnMenuChooserItemCheckedDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuChooserItemCheckedDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+ColumnMenuChooserItemCheckedDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ColumnMenuChooserItemCheckedDirective, selector: "[kendoColumnMenuChooserItemChecked]", inputs: { kendoColumnMenuChooserItemChecked: "kendoColumnMenuChooserItemChecked" }, host: { properties: { "attr.aria-checked": "this.kendoColumnMenuChooserItemChecked" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuChooserItemCheckedDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[kendoColumnMenuChooserItemChecked]' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { kendoColumnMenuChooserItemChecked: [{
+                type: HostBinding,
+                args: ['attr.aria-checked']
+            }, {
+                type: Input
+            }] } });
+
 /**
  * @hidden
  */
 class ColumnListComponent {
-    constructor(element, ngZone, renderer) {
+    constructor(element, ngZone, renderer, listNavigationService) {
         this.element = element;
         this.ngZone = ngZone;
         this.renderer = renderer;
+        this.listNavigationService = listNavigationService;
         this.reset = new EventEmitter();
         this.apply = new EventEmitter();
         this.columnChange = new EventEmitter();
@@ -11949,10 +12094,28 @@ class ColumnListComponent {
         this.allowHideAll = false;
         this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this.unlockedCount = 0;
+        this.domSubscriptions = new Subscription();
+        this.onKeydown = (e) => {
+            if (e.keyCode !== Keys.Tab) {
+                e.preventDefault();
+            }
+            if (e.keyCode === Keys.ArrowDown) {
+                this.listNavigationService.next();
+            }
+            else if (e.keyCode === Keys.ArrowUp) {
+                this.listNavigationService.prev();
+            }
+            else if (e.keyCode === Keys.Space && e.target.classList.contains('k-column-list-item')) {
+                this.listNavigationService.toggleCheckedState();
+            }
+        };
     }
     get className() {
         return true;
     }
+    isChecked(checkbox) {
+        return checkbox.checked;
+    }
     set columns(value) {
         this._columns = value.filter(column => column.includeInChooser !== false);
         this.allColumns = value;
@@ -11970,12 +12133,21 @@ class ColumnListComponent {
             return;
         }
         this.ngZone.runOutsideAngular(() => {
-            this.domSubscriptions = this.renderer.listen(this.element.nativeElement, 'click', (e) => {
-                if (hasClasses(e.target, 'k-checkbox')) {
+            this.domSubscriptions.add(this.renderer.listen(this.element.nativeElement, 'click', (e) => {
+                const closestItem = e.target.closest('.k-column-list-item');
+                if (closestItem) {
+                    const checkbox = closestItem.querySelector('.k-checkbox');
+                    const index = parseInt(checkbox.getAttribute('data-index'), 10);
+                    if (e.target === checkbox) {
+                        closestItem.focus();
+                    }
+                    else {
+                        e.preventDefault();
+                        checkbox.checked = !checkbox.checked;
+                    }
                     if (this.autoSync) {
-                        const index = parseInt(e.target.getAttribute('data-index'), 10);
                         const column = this.columns[index];
-                        const hidden = !e.target.checked;
+                        const hidden = !checkbox.checked;
                         if (Boolean(column.hidden) !== hidden) {
                             this.ngZone.run(() => {
                                 column.hidden = hidden;
@@ -11986,10 +12158,20 @@ class ColumnListComponent {
                     else {
                         this.updateDisabled();
                     }
+                    if (index !== this.listNavigationService.activeIndex) {
+                        this.listNavigationService.toggle(this.listNavigationService.activeIndex, false);
+                        this.listNavigationService.activeIndex = index;
+                        this.listNavigationService.toggle(index, true);
+                    }
                 }
-            });
+            }));
+            this.domSubscriptions.add(this.renderer.listen(this.element.nativeElement, 'keydown', this.onKeydown));
         });
     }
+    ngAfterViewInit() {
+        this.listNavigationService.items = this.options.toArray();
+        this.listNavigationService.toggle(0, true);
+    }
     ngOnChanges(changes) {
         if (!this.service) {
             return;
@@ -12002,9 +12184,7 @@ class ColumnListComponent {
         }
     }
     ngOnDestroy() {
-        if (this.domSubscriptions) {
-            this.domSubscriptions();
-        }
+        this.domSubscriptions.unsubscribe();
     }
     cancelChanges() {
         this.forEachCheckBox((element, index) => {
@@ -12032,6 +12212,9 @@ class ColumnListComponent {
             if (this.service) {
                 this.service.menuTabbingService.firstFocusable.focus();
             }
+            else {
+                this.listNavigationService.toggle(this.listNavigationService.activeIndex, true);
+            }
         }
     }
     forEachCheckBox(callback) {
@@ -12078,35 +12261,94 @@ class ColumnListComponent {
         }
     }
 }
-ColumnListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: { columns: "columns", autoSync: "autoSync", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className" } }, viewQueries: [{ propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-        <div class="k-column-list">
-            <label *ngFor="let column of columns; let index = index;" class='k-column-list-item'>
-                <input class="k-checkbox k-checkbox-md k-rounded-md" type="checkbox" [attr.data-index]="index" [checked]="!column.hidden" [disabled]="isDisabled(column)" /><span class="k-checkbox-label">{{ column.displayTitle }}</span>
+ColumnListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: ColumnListKeyboardNavigation }], target: i0.ɵɵFactoryTarget.Component });
+ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: { columns: "columns", autoSync: "autoSync", ariaLabel: "ariaLabel", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className" } }, providers: [ColumnListKeyboardNavigation], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }, { propertyName: "options", predicate: ColumnMenuChooserItemCheckedDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+        <div 
+            class="k-column-list"
+            role="listbox"
+            aria-multiselectable="true"
+            [attr.aria-label]="ariaLabel">
+            <label 
+                *ngFor="let column of columns; let index = index;" 
+                class='k-column-list-item'
+                [kendoColumnMenuChooserItemChecked]="!column.hidden"
+                role="option">
+                <input 
+                    class="k-checkbox k-checkbox-md k-rounded-md" 
+                    type="checkbox" 
+                    [attr.data-index]="index" 
+                    [checked]="!column.hidden" 
+                    tabindex="-1"
+                    [attr.aria-hidden]="true"
+                    [disabled]="isDisabled(column)" />
+                <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
-            <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
-            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
+            <button
+                #applyButton
+                type="button"
+                class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="applyChanges()"
+                (keydown.enter)="$event.preventDefault(); $event.stopPropagation; applyChanges();"
+                (keydown.space)="$event.preventDefault(); $event.stopPropagation; applyChanges();">{{ applyText }}</button>
+            <button
+                #resetButton
+                type="button"
+                (keydown.tab)="onTab($event)"
+                class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="cancelChanges()"
+                (keydown.enter)="$event.preventDefault(); $event.stopPropagation; cancelChanges();"
+                (keydown.space)="$event.preventDefault(); $event.stopPropagation; cancelChanges();">{{ resetText }}</button>
         </div>
-    `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ColumnMenuChooserItemCheckedDirective, selector: "[kendoColumnMenuChooserItemChecked]", inputs: ["kendoColumnMenuChooserItemChecked"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-columnlist',
+                    providers: [ColumnListKeyboardNavigation],
                     template: `
-        <div class="k-column-list">
-            <label *ngFor="let column of columns; let index = index;" class='k-column-list-item'>
-                <input class="k-checkbox k-checkbox-md k-rounded-md" type="checkbox" [attr.data-index]="index" [checked]="!column.hidden" [disabled]="isDisabled(column)" /><span class="k-checkbox-label">{{ column.displayTitle }}</span>
+        <div 
+            class="k-column-list"
+            role="listbox"
+            aria-multiselectable="true"
+            [attr.aria-label]="ariaLabel">
+            <label 
+                *ngFor="let column of columns; let index = index;" 
+                class='k-column-list-item'
+                [kendoColumnMenuChooserItemChecked]="!column.hidden"
+                role="option">
+                <input 
+                    class="k-checkbox k-checkbox-md k-rounded-md" 
+                    type="checkbox" 
+                    [attr.data-index]="index" 
+                    [checked]="!column.hidden" 
+                    tabindex="-1"
+                    [attr.aria-hidden]="true"
+                    [disabled]="isDisabled(column)" />
+                <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
-            <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
-            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
+            <button
+                #applyButton
+                type="button"
+                class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="applyChanges()"
+                (keydown.enter)="$event.preventDefault(); $event.stopPropagation; applyChanges();"
+                (keydown.space)="$event.preventDefault(); $event.stopPropagation; applyChanges();">{{ applyText }}</button>
+            <button
+                #resetButton
+                type="button"
+                (keydown.tab)="onTab($event)"
+                class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                (click)="cancelChanges()"
+                (keydown.enter)="$event.preventDefault(); $event.stopPropagation; cancelChanges();"
+                (keydown.space)="$event.preventDefault(); $event.stopPropagation; cancelChanges();">{{ resetText }}</button>
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { className: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: ColumnListKeyboardNavigation }]; }, propDecorators: { className: [{
                 type: HostBinding,
                 args: ["class.k-column-list-wrapper"]
             }], reset: [{
@@ -12119,6 +12361,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], autoSync: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input
             }], allowHideAll: [{
                 type: Input
             }], applyText: [{
@@ -12133,9 +12377,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], service: [{
                 type: Input
+            }], resetButton: [{
+                type: ViewChild,
+                args: ['resetButton', { static: false }]
             }], applyButton: [{
                 type: ViewChild,
                 args: ['applyButton', { static: false }]
+            }], options: [{
+                type: ViewChildren,
+                args: [ColumnMenuChooserItemCheckedDirective]
             }] } });
 
 /**
@@ -12228,6 +12478,7 @@ ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 <kendo-grid-columnlist
                     [applyText]="ctx.localization.get('columnsApply')"
                     [resetText]="ctx.localization.get('columnsReset')"
+                    [ariaLabel]="ctx.localization.get('columns')"
                     [columns]="columns"
                     [autoSync]="false"
                     [allowHideAll]="false"
@@ -12239,7 +12490,7 @@ ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </kendo-grid-columnlist>
             </ng-template>
         </kendo-grid-columnmenu-item>
-    `, isInline: true, components: [{ type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
+    `, isInline: true, components: [{ type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuChooserComponent, decorators: [{
             type: Component,
             args: [{
@@ -12256,6 +12507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 <kendo-grid-columnlist
                     [applyText]="ctx.localization.get('columnsApply')"
                     [resetText]="ctx.localization.get('columnsReset')"
+                    [ariaLabel]="ctx.localization.get('columns')"
                     [columns]="columns"
                     [autoSync]="false"
                     [allowHideAll]="false"
@@ -12659,7 +12911,7 @@ class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
     ngOnInit() {
         const isVirtualColumns = this.ctx.grid.columnMenuTemplate && this.ctx.grid.virtualColumns;
         if (isVirtualColumns && isDevMode()) {
-            console.warn(ColunnMenuErrorMessages.autoSizeColumn);
+            console.warn(ColumnMenuErrorMessages.autoSizeColumn);
         }
     }
     /**
@@ -12726,7 +12978,7 @@ class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase {
     ngOnInit() {
         const isVirtualColumns = this.ctx.grid.columnMenuTemplate && this.ctx.grid.virtualColumns;
         if (isVirtualColumns && isDevMode()) {
-            console.warn(ColunnMenuErrorMessages.autoSizeAllColumns);
+            console.warn(ColumnMenuErrorMessages.autoSizeAllColumns);
         }
     }
     /**
@@ -12763,6 +13015,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: ContextService }]; } });
 
 const POPUP_CLASS = 'k-grid-columnmenu-popup';
+let id$2 = 0;
+const getId = (gridId) => `${gridId}-column-menu-${id$2++}`;
 /**
  * Represents the [column menu](slug:columnmenu_grid#toc-customizing-the-position) component.
  *
@@ -12775,7 +13029,7 @@ const POPUP_CLASS = 'k-grid-columnmenu-popup';
  * </kendo-grid>
  */
 class ColumnMenuComponent {
-    constructor(navigationService, popupService, service, ctx, renderer, cdr, columnInfoService) {
+    constructor(navigationService, popupService, service, ctx, renderer, cdr, columnInfoService, idService) {
         this.navigationService = navigationService;
         this.popupService = popupService;
         this.service = service;
@@ -12783,6 +13037,7 @@ class ColumnMenuComponent {
         this.renderer = renderer;
         this.cdr = cdr;
         this.columnInfoService = columnInfoService;
+        this.idService = idService;
         /**
          * @hidden
          */
@@ -12828,7 +13083,7 @@ class ColumnMenuComponent {
          */
         this.expandedPosition = false;
         this.moreVerticalIcon = moreVerticalIcon;
-        this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this));
+        this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this, true));
     }
     /**
      * @hidden
@@ -12854,6 +13109,12 @@ class ColumnMenuComponent {
     get hasFilter() {
         return hasFilter(this.settings, this.column);
     }
+    /**
+     * @hidden
+     */
+    get isNavigable() {
+        return this.navigationService.tableEnabled;
+    }
     /**
      * @hidden
      */
@@ -12870,7 +13131,7 @@ class ColumnMenuComponent {
      * @hidden
      */
     onApply(changed) {
-        this.close();
+        this.close(true);
         if (changed.length) {
             this.cdr.markForCheck();
             this.columnInfoService.changeVisibility(changed);
@@ -12916,11 +13177,11 @@ class ColumnMenuComponent {
         if (this.ctx.grid.virtualColumns && isDevMode()) {
             if (this.settings.autoSizeAllColumns) {
                 this.settings.autoSizeAllColumns = false;
-                console.warn(ColunnMenuErrorMessages.autoSizeAllColumns);
+                console.warn(ColumnMenuErrorMessages.autoSizeAllColumns);
             }
             if (this.settings.autoSizeColumn) {
                 this.settings.autoSizeColumn = false;
-                console.warn(ColunnMenuErrorMessages.autoSizeColumn);
+                console.warn(ColumnMenuErrorMessages.autoSizeColumn);
             }
         }
         this.service.menuTabbingService.isTabbedInterface = this.settings.view === 'tabbed' ? true : false;
@@ -12947,12 +13208,32 @@ class ColumnMenuComponent {
         this.expandedColumns = this.getExpandedState(this.settings.columnChooser);
         this.expandedPosition = this.getExpandedState(this.settings.setColumnPosition);
         this.popupRef = this.popupService.open(anchor, template, this.popupRef, POPUP_CLASS);
-        if (this.popupRef && this.settings.view === 'tabbed') {
-            this.renderer.addClass(this.popupRef.popupElement.firstChild, 'k-column-menu-tabbed');
-            this.cdr.detectChanges();
-            this.tabStrip?.selectTab(0);
+        // Needed as changes to 'popupRef' and 'popupId' are not reflected
+        // automatically when the Popup is closed by clicking outside the anchor
+        const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
+        if (this.popupRef) {
+            this.popupRef.popup.instance.close.pipe(take(1)).subscribe(() => {
+                this.popupRef = null;
+                const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
+                ariaRoot && this.renderer.removeAttribute(ariaRoot, 'aria-controls');
+                ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'false');
+            });
+            const popupAriaElement = this.popupRef.popupElement.querySelector('.k-grid-columnmenu-popup');
+            if (popupAriaElement) {
+                const popupId = getId(this.idService?.gridId());
+                this.renderer.setAttribute(popupAriaElement, 'id', popupId);
+                this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
+                this.renderer.setAttribute(popupAriaElement, 'aria-label', this.columnMenuTitle);
+                ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-controls', popupId);
+                ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'true');
+            }
+            if (this.settings.view === 'tabbed') {
+                this.renderer.addClass(this.popupRef.popupElement.querySelector('.k-grid-columnmenu-popup'), 'k-column-menu-tabbed');
+                this.cdr.detectChanges();
+                this.tabStrip?.selectTab(0);
+            }
         }
-        if (!this.popupRef) {
+        else {
             if (this.navigationService.tableEnabled) {
                 this.navigationService.focusCell(0, this.column.leafIndex);
             }
@@ -12964,9 +13245,13 @@ class ColumnMenuComponent {
     /**
      * @hidden
      */
-    close() {
+    close(triggerFocus = false) {
         this.popupService.destroy();
         this.popupRef = null;
+        this.cdr.markForCheck();
+        if (!triggerFocus) {
+            return;
+        }
         if (this.navigationService.tableEnabled) {
             this.navigationService.focusCell(0, this.column.leafIndex);
         }
@@ -12986,7 +13271,7 @@ class ColumnMenuComponent {
         return typeof (menuItemSettings) === 'object' ? menuItemSettings.expanded : false;
     }
 }
-ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: NavigationService }, { token: SinglePopupService }, { token: ColumnMenuService }, { token: ContextService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: NavigationService }, { token: SinglePopupService }, { token: ColumnMenuService }, { token: ContextService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: ColumnInfoService }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: { standalone: "standalone", column: "column", settings: "settings", sort: "sort", filter: "filter", sortable: "sortable", columnMenuTemplate: "columnMenuTemplate", tabIndex: "tabIndex" }, host: { properties: { "class.k-grid-column-menu-standalone": "this.standalone" } }, providers: [
         ColumnMenuService,
         MenuTabbingService
@@ -12998,7 +13283,9 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             (keydown.enter)="$event.stopImmediatePropagation()"
             href="#"
             [tabindex]="tabIndex"
-            [attr.title]="columnMenuTitle">
+            [attr.title]="columnMenuTitle"
+            [attr.aria-expanded]="isNavigable ? undefined: false"
+            [attr.aria-haspopup]="isNavigable ? undefined : 'dialog'">
             <kendo-icon-wrapper
                 name="more-vertical"
                 [svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
@@ -13011,7 +13298,7 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </ng-template>
         <ng-template #defaultTemplate>
             <kendo-grid-columnmenu-container
-                (keydown.escape)="close()"
+                (keydown.escape)="close(true)"
                 (keydown.enter)="$event.stopImmediatePropagation()">
                 <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="service">
                 </kendo-grid-columnmenu-sort>
@@ -13063,7 +13350,7 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </kendo-grid-columnmenu-container>
         </ng-template>
         <ng-template #tabbedInterfaceTemplate>
-            <kendo-tabstrip #tabstrip (keydown.escape)="close()">
+            <kendo-tabstrip #tabstrip (keydown.escape)="close(true)">
                 <kendo-tabstrip-tab *ngIf="hasFilter">
                     <ng-template kendoTabTitle>
                         <kendo-icon-wrapper
@@ -13150,7 +13437,7 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-tabstrip-tab>
             </kendo-tabstrip>
         </ng-template>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: i16.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i16.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { type: i16.TabTitleDirective, selector: "[kendoTabTitle]" }, { type: i16.TabContentDirective, selector: "[kendoTabContent]" }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: i17.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i17.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { type: i17.TabTitleDirective, selector: "[kendoTabTitle]" }, { type: i17.TabContentDirective, selector: "[kendoTabContent]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -13167,7 +13454,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             (keydown.enter)="$event.stopImmediatePropagation()"
             href="#"
             [tabindex]="tabIndex"
-            [attr.title]="columnMenuTitle">
+            [attr.title]="columnMenuTitle"
+            [attr.aria-expanded]="isNavigable ? undefined: false"
+            [attr.aria-haspopup]="isNavigable ? undefined : 'dialog'">
             <kendo-icon-wrapper
                 name="more-vertical"
                 [svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
@@ -13180,7 +13469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-template>
         <ng-template #defaultTemplate>
             <kendo-grid-columnmenu-container
-                (keydown.escape)="close()"
+                (keydown.escape)="close(true)"
                 (keydown.enter)="$event.stopImmediatePropagation()">
                 <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="service">
                 </kendo-grid-columnmenu-sort>
@@ -13232,7 +13521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </kendo-grid-columnmenu-container>
         </ng-template>
         <ng-template #tabbedInterfaceTemplate>
-            <kendo-tabstrip #tabstrip (keydown.escape)="close()">
+            <kendo-tabstrip #tabstrip (keydown.escape)="close(true)">
                 <kendo-tabstrip-tab *ngIf="hasFilter">
                     <ng-template kendoTabTitle>
                         <kendo-icon-wrapper
@@ -13321,7 +13610,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: NavigationService }, { type: SinglePopupService }, { type: ColumnMenuService }, { type: ContextService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: ColumnInfoService }]; }, propDecorators: { standalone: [{
+        }], ctorParameters: function () { return [{ type: NavigationService }, { type: SinglePopupService }, { type: ColumnMenuService }, { type: ContextService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: ColumnInfoService }, { type: IdService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { standalone: [{
                 type: HostBinding,
                 args: ['class.k-grid-column-menu-standalone']
             }, {
@@ -13491,7 +13782,7 @@ FilterCellOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             [size]="size"
             (click)="clearClick()"
             (keydown)="clearKeydown($event)"></button>
-    `, isInline: true, components: [{ type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i4$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }] });
+    `, isInline: true, components: [{ type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i4$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterCellOperatorsComponent, decorators: [{
             type: Component,
             args: [{
@@ -13896,7 +14187,7 @@ BooleanFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 [value]="currentFilter?.value">
             </kendo-dropdownlist>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }] });
+    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BooleanFilterCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -14264,7 +14555,7 @@ class LogicalCellDirective {
                 this.renderer.addClass(el, 'k-focus');
             }
             if (this.headerLabelText) {
-                el.setAttribute('aria-label', '');
+                el.removeAttribute('aria-label');
             }
         }
         else {
@@ -14956,7 +15247,7 @@ const modifierKeys = ['alt', 'ctrl', 'shift', 'meta'];
  * @hidden
  */
 class HeaderComponent {
-    constructor(popupService, hint, cue, reorderService, idService, sortService, columnInfoService, cd, contextService) {
+    constructor(popupService, hint, cue, reorderService, idService, sortService, columnInfoService, cd, contextService, navigationService) {
         this.popupService = popupService;
         this.hint = hint;
         this.cue = cue;
@@ -14966,6 +15257,7 @@ class HeaderComponent {
         this.columnInfoService = columnInfoService;
         this.cd = cd;
         this.contextService = contextService;
+        this.navigationService = navigationService;
         this.columns = [];
         this.groups = [];
         this.sort = new Array();
@@ -15100,6 +15392,9 @@ class HeaderComponent {
             return 'descending';
         }
     }
+    get isNavigable() {
+        return this.navigationService.tableEnabled;
+    }
     /**
      *
      * @param column
@@ -15210,7 +15505,7 @@ class HeaderComponent {
     }
     addStickyStyles(column) {
         const stickyStyles = this.columnInfoService.stickyColumnsStyles(column);
-        return { ...column.style, ...stickyStyles };
+        return { ...column.headerStyle, ...stickyStyles };
     }
     toggleDirection(field, allowUnsort, initialDirection) {
         const descriptor = this.sortDescriptor(field);
@@ -15327,7 +15622,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: ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: ContextService }], 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: ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: ContextService }, { token: NavigationService }], 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", totalColumns: "totalColumns", 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"
@@ -15379,7 +15674,9 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                     [ngStyle]="column.sticky ? addStickyStyles(column) : column.headerStyle"
                     [attr.rowspan]="column.rowspan(totalColumnLevels)"
                     [attr.colspan]="column.colspan"
-                    [attr.aria-haspopup]="(showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined">
+                    [attr.aria-haspopup]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
+                    [attr.aria-expanded]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? false : undefined"
+                    [attr.aria-keyshortcuts]="isNavigable ? 'Alt + ArrowDown' : undefined">
 
                     <ng-container *ngIf="!isSortable(getColumnComponent(column))">
                         <span class="k-cell-inner">
@@ -15601,7 +15898,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [ngStyle]="column.sticky ? addStickyStyles(column) : column.headerStyle"
                     [attr.rowspan]="column.rowspan(totalColumnLevels)"
                     [attr.colspan]="column.colspan"
-                    [attr.aria-haspopup]="(showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined">
+                    [attr.aria-haspopup]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
+                    [attr.aria-expanded]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? false : undefined"
+                    [attr.aria-keyshortcuts]="isNavigable ? 'Alt + ArrowDown' : undefined">
 
                     <ng-container *ngIf="!isSortable(getColumnComponent(column))">
                         <span class="k-cell-inner">
@@ -15769,7 +16068,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: ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: ContextService }]; }, propDecorators: { totalColumnLevels: [{
+        }], ctorParameters: function () { return [{ type: SinglePopupService }, { type: DragHintService }, { type: DropCueService }, { type: ColumnReorderService }, { type: IdService }, { type: SortService }, { type: ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: ContextService }, { type: NavigationService }]; }, propDecorators: { totalColumnLevels: [{
                 type: Input
             }], columns: [{
                 type: Input
@@ -18735,7 +19034,7 @@ class FooterComponent {
     }
     addStickyStyles(column) {
         const stickyStyles = this.columnInfoService.stickyColumnsStyles(column);
-        return { ...column.style, ...stickyStyles };
+        return { ...column.footerStyle, ...stickyStyles };
     }
 }
 FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FooterComponent, deps: [{ token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
@@ -22850,7 +23149,15 @@ class ExpandGroupDirective {
             this.expandedGroupKeys.push(key);
         }
         else {
-            const index = this.expandedGroupKeys.indexOf(key);
+            const index = this.expandedGroupKeys.findIndex(group => {
+                if (this.expandGroupBy) {
+                    return group === key;
+                }
+                else if (key.parentGroupKeys?.length === 0) {
+                    return group.value === key.value;
+                }
+                return JSON.stringify(group) === JSON.stringify(key);
+            });
             this.expandedGroupKeys.splice(index, 1);
         }
         this.expandedGroupKeysChange.emit(this.expandedGroupKeys.slice());
@@ -22968,7 +23275,7 @@ AutoCompleteFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 [value]="currentFilter?.value">
             </kendo-autocomplete>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i1$4.AutoCompleteComponent, selector: "kendo-autocomplete", inputs: ["highlightFirst", "focusableId", "data", "value", "valueField", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "clearButton", "suggest", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoAutoComplete"] }], directives: [{ type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
+    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i1$4.AutoCompleteComponent, selector: "kendo-autocomplete", inputs: ["highlightFirst", "showStickyHeader", "focusableId", "data", "value", "valueField", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "clearButton", "suggest", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoAutoComplete"] }], directives: [{ type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteFilterCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -24088,13 +24395,30 @@ class ColumnChooserComponent {
                 anchorAlign: { vertical: 'bottom', horizontal: direction },
                 popupAlign: { vertical: 'top', horizontal: direction }
             });
-            this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.ctx.localization.rtl ? 'rtl' : 'ltr');
+            const popupElement = this.popupRef?.popupElement;
+            if (popupElement) {
+                const popupId = `k-${guid()}`;
+                const popupAriaElement = popupElement.querySelector('.k-popup');
+                this.ngZone.runOutsideAngular(() => {
+                    this.escapeListener = this.renderer.listen(popupAriaElement, 'keydown', (e) => {
+                        if (e.keyCode === Keys.Escape) {
+                            this.close(true);
+                        }
+                    });
+                });
+                this.renderer.setAttribute(popupElement, 'dir', this.ctx.localization.rtl ? 'rtl' : 'ltr');
+                this.renderer.setAttribute(popupAriaElement, 'id', popupId);
+                this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
+                this.popupId = popupId;
+            }
             if (!isDocumentAvailable()) {
                 return;
             }
             this.ngZone.runOutsideAngular(() => this.closeClick = this.renderer.listen('document', 'click', ({ target }) => {
                 if (!closest(target, node => node === this.popupRef.popupElement || node === anchor.element)) {
-                    this.close();
+                    this.ngZone.run(() => {
+                        this.close();
+                    });
                 }
             }));
         }
@@ -24106,7 +24430,7 @@ class ColumnChooserComponent {
      * @hidden
      */
     onApply(changed) {
-        this.close();
+        this.close(true);
         if (changed.length) {
             this.changeDetector.markForCheck();
             this.columnInfoService.changeVisibility(changed);
@@ -24119,12 +24443,24 @@ class ColumnChooserComponent {
         this.changeDetector.markForCheck();
         this.columnInfoService.changeVisibility(changed);
     }
-    close() {
+    /**
+     * @hidden
+     */
+    onShiftTab(e) {
+        if (e.target.matches('.k-column-list-item')) {
+            e.preventDefault();
+            this.columnList.resetButton.nativeElement.focus();
+        }
+    }
+    close(focusAnchor = false) {
         if (this.popupRef) {
             this.popupRef.close();
             this.popupRef = null;
+            this.changeDetector.markForCheck();
+            this.escapeListener && this.escapeListener();
         }
         this.detachClose();
+        focusAnchor && this.anchor.element.focus();
     }
     detachClose() {
         if (this.closeClick) {
@@ -24134,7 +24470,7 @@ class ColumnChooserComponent {
     }
 }
 ColumnChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnChooserComponent, deps: [{ token: ContextService }, { token: ColumnInfoService }, { token: i1$2.PopupService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ColumnChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnChooserComponent, selector: "kendo-grid-column-chooser", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll" }, ngImport: i0, template: `
+ColumnChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnChooserComponent, selector: "kendo-grid-column-chooser", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true }, { propertyName: "columnList", first: true, predicate: ["columnList"], descendants: true }], ngImport: i0, template: `
         <button #anchor
             kendoButton
             type="button"
@@ -24142,20 +24478,27 @@ ColumnChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             fillMode="flat"
             [attr.title]="ctx.localization.get('columns')"
             icon="columns"
-            [svgIcon]="columnsIcon"></button>
+            [svgIcon]="columnsIcon"
+            [attr.aria-haspopup]="'dialog'"
+            [attr.aria-expanded]="!!(popupRef)"
+            [attr.aria-controls]="!!(popupRef) ? popupId : undefined"></button>
         <ng-template #template>
             <span class='k-column-chooser-title'>{{ ctx.localization.get('columns') }}</span>
             <kendo-grid-columnlist
+                #columnList
                 [columns]="columns"
+                [ariaLabel]="ctx.localization.get('columns')"
+                [isLast]="true"
                 [applyText]="ctx.localization.get('columnsApply')"
                 [resetText]="ctx.localization.get('columnsReset')"
                 [autoSync]="autoSync"
                 [allowHideAll]="allowHideAll"
                 (apply)="onApply($event)"
-                (columnChange)="onChange($event)">
+                (columnChange)="onChange($event)"
+                (keydown.shift.tab)="onShiftTab($event)">
             </kendo-grid-columnlist>
         </ng-template>
-    `, isInline: true, components: [{ type: i4$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
+    `, isInline: true, components: [{ type: i4$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnChooserComponent, decorators: [{
             type: Component,
             args: [{
@@ -24168,17 +24511,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             fillMode="flat"
             [attr.title]="ctx.localization.get('columns')"
             icon="columns"
-            [svgIcon]="columnsIcon"></button>
+            [svgIcon]="columnsIcon"
+            [attr.aria-haspopup]="'dialog'"
+            [attr.aria-expanded]="!!(popupRef)"
+            [attr.aria-controls]="!!(popupRef) ? popupId : undefined"></button>
         <ng-template #template>
             <span class='k-column-chooser-title'>{{ ctx.localization.get('columns') }}</span>
             <kendo-grid-columnlist
+                #columnList
                 [columns]="columns"
+                [ariaLabel]="ctx.localization.get('columns')"
+                [isLast]="true"
                 [applyText]="ctx.localization.get('columnsApply')"
                 [resetText]="ctx.localization.get('columnsReset')"
                 [autoSync]="autoSync"
                 [allowHideAll]="allowHideAll"
                 (apply)="onApply($event)"
-                (columnChange)="onChange($event)">
+                (columnChange)="onChange($event)"
+                (keydown.shift.tab)="onShiftTab($event)">
             </kendo-grid-columnlist>
         </ng-template>
     `
@@ -24187,9 +24537,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], allowHideAll: [{
                 type: Input
+            }], anchor: [{
+                type: ViewChild,
+                args: ['anchor']
+            }], columnList: [{
+                type: ViewChild,
+                args: ['columnList']
             }] } });
 
 const COMPONENTS = [
+    ColumnMenuChooserItemCheckedDirective,
     ColumnListComponent,
     ColumnChooserComponent,
     ColumnMenuChooserComponent,
@@ -24232,7 +24589,8 @@ class ColumnMenuModule {
     }
 }
 ColumnMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ColumnMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuModule, declarations: [ColumnListComponent,
+ColumnMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuModule, declarations: [ColumnMenuChooserItemCheckedDirective,
+        ColumnListComponent,
         ColumnChooserComponent,
         ColumnMenuChooserComponent,
         ColumnMenuFilterComponent,
@@ -24247,7 +24605,8 @@ ColumnMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         ColumnMenuStickComponent,
         ColumnMenuPositionComponent,
         ColumnMenuAutoSizeColumnComponent,
-        ColumnMenuAutoSizeAllColumnsComponent], imports: [CommonModule, FilterMenuModule, ButtonModule, TabStripModule], exports: [ColumnListComponent,
+        ColumnMenuAutoSizeAllColumnsComponent], imports: [CommonModule, FilterMenuModule, ButtonModule, TabStripModule], exports: [ColumnMenuChooserItemCheckedDirective,
+        ColumnListComponent,
         ColumnChooserComponent,
         ColumnMenuChooserComponent,
         ColumnMenuFilterComponent,