@progress/kendo-angular-grid 17.0.0-develop.3 → 17.0.0-develop.31

package/{esm2020 → esm2022}/column-menu/column-menu-chooser.component.mjs

@@ -30,37 +30,41 @@ import * as i2 from "../common/column-info.service";
  * ```
  */
 export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
+    ctx;
+    columnInfoService;
+    changeDetector;
+    hostElement;
+    /**
+     * Fires when the content is expanded.
+     */
+    expand = new EventEmitter();
+    /**
+     * Fires when the content is collapsed.
+     */
+    collapse = new EventEmitter();
+    /**
+     * Specifies if the content is expanded.
+     * @default false
+     */
+    expanded = false;
+    /**
+     * @hidden
+     */
+    isLast = false;
+    /**
+     * @hidden
+     */
+    actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
+    get columns() {
+        return this.columnInfoService.leafNamedColumns;
+    }
+    columnsIcon = columnsIcon;
     constructor(ctx, columnInfoService, changeDetector, hostElement) {
         super();
         this.ctx = ctx;
         this.columnInfoService = columnInfoService;
         this.changeDetector = changeDetector;
         this.hostElement = hostElement;
-        /**
-         * Fires when the content is expanded.
-         */
-        this.expand = new EventEmitter();
-        /**
-         * Fires when the content is collapsed.
-         */
-        this.collapse = new EventEmitter();
-        /**
-         * Specifies if the content is expanded.
-         * @default false
-         */
-        this.expanded = false;
-        /**
-         * @hidden
-         */
-        this.isLast = false;
-        /**
-         * @hidden
-         */
-        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
-        this.columnsIcon = columnsIcon;
-    }
-    get columns() {
-        return this.columnInfoService.leafNamedColumns;
     }
     /**
      * @hidden
@@ -89,9 +93,8 @@ export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
         this.expanded = true;
         this.expand.emit();
     }
-}
-ColumnMenuChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuChooserComponent, deps: [{ token: i1.ContextService }, { token: i2.ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuChooserComponent, isStandalone: true, selector: "kendo-grid-columnmenu-chooser", inputs: { expanded: "expanded", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserComponent, deps: [{ token: i1.ContextService }, { token: i2.ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuChooserComponent, isStandalone: true, selector: "kendo-grid-columnmenu-chooser", inputs: { expanded: "expanded", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-columnmenu-item
             [text]="ctx.localization.get('columns')"
             icon="columns"
@@ -116,7 +119,8 @@ ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
             </ng-template>
         </kendo-grid-columnmenu-item>
     `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { kind: "component", 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: "15.2.10", ngImport: i0, type: ColumnMenuChooserComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-columnmenu-chooser',

package/{esm2020 → esm2022}/column-menu/column-menu-container.component.mjs

@@ -12,10 +12,13 @@ import * as i1 from "./column-menu.service";
  * @hidden
  */
 export class ColumnMenuContainerComponent {
+    service;
+    ngZone;
+    columnMenuItems;
+    templateMenuItems = [];
     constructor(service, ngZone) {
         this.service = service;
         this.ngZone = ngZone;
-        this.templateMenuItems = [];
         service.columnMenuContainer = this;
     }
     ngAfterViewInit() {
@@ -32,12 +35,12 @@ export class ColumnMenuContainerComponent {
         }
         this.ngZone.onStable.pipe(take(1)).subscribe(() => this.service.menuTabbingService.firstFocusable.focus());
     }
-}
-ColumnMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuContainerComponent, deps: [{ token: i1.ColumnMenuService }, { token: NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ColumnMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuContainerComponent, isStandalone: true, selector: "kendo-grid-columnmenu-container", queries: [{ propertyName: "columnMenuItems", predicate: ColumnMenuItemDirective, descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuContainerComponent, deps: [{ token: i1.ColumnMenuService }, { token: NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuContainerComponent, isStandalone: true, selector: "kendo-grid-columnmenu-container", queries: [{ propertyName: "columnMenuItems", predicate: ColumnMenuItemDirective, descendants: true }], ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuContainerComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-columnmenu-container',

package/{esm2020 → esm2022}/column-menu/column-menu-filter.component.mjs

@@ -29,32 +29,34 @@ import * as i1 from "../common/provider.service";
  * ```
  */
 export class ColumnMenuFilterComponent extends ColumnMenuItemBase {
+    ctx;
+    hostElement;
+    /**
+     * Fires when the content is expanded.
+     */
+    expand = new EventEmitter();
+    /**
+     * Fires when the content is collapsed.
+     */
+    collapse = new EventEmitter();
+    /**
+     * Specifies if the content is expanded.
+     * @default false
+     */
+    expanded = false;
+    /**
+     * @hidden
+     */
+    isLast = false;
+    /**
+     * @hidden
+     */
+    actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
+    filterIcon = filterIcon;
     constructor(ctx, hostElement) {
         super();
         this.ctx = ctx;
         this.hostElement = hostElement;
-        /**
-         * Fires when the content is expanded.
-         */
-        this.expand = new EventEmitter();
-        /**
-         * Fires when the content is collapsed.
-         */
-        this.collapse = new EventEmitter();
-        /**
-         * Specifies if the content is expanded.
-         * @default false
-         */
-        this.expanded = false;
-        /**
-         * @hidden
-         */
-        this.isLast = false;
-        /**
-         * @hidden
-         */
-        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
-        this.filterIcon = filterIcon;
     }
     /**
      * @hidden
@@ -73,9 +75,8 @@ export class ColumnMenuFilterComponent extends ColumnMenuItemBase {
         this.expanded = true;
         this.expand.emit();
     }
-}
-ColumnMenuFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuFilterComponent, deps: [{ token: i1.ContextService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ColumnMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuFilterComponent, isStandalone: true, selector: "kendo-grid-columnmenu-filter", inputs: { expanded: "expanded", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuFilterComponent, deps: [{ token: i1.ContextService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuFilterComponent, isStandalone: true, selector: "kendo-grid-columnmenu-filter", inputs: { expanded: "expanded", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-columnmenu-item
             [text]="ctx.localization.get('filter')"
             icon="filter"
@@ -97,7 +98,8 @@ ColumnMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             </ng-template>
         </kendo-grid-columnmenu-item>
     `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuFilterComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-columnmenu-filter',

package/{esm2020 → esm2022}/column-menu/column-menu-item-base.mjs

@@ -10,9 +10,12 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class ColumnMenuItemBase {
-    constructor() {
-        this.hostClass = true;
-    }
+    /**
+     * Represents the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) class.
+     * Requires a mandatory input.
+     */
+    service;
+    hostClass = true;
     ngOnInit() {
         if (isDevMode() && !this.service) {
             throw new Error(ColumnMenuErrorMessages.serviceInput);
@@ -24,10 +27,10 @@ export class ColumnMenuItemBase {
     close() {
         this.service.close();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuItemBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuItemBase, selector: "kendo-grid-column-menu-item-base", inputs: { service: "service" }, host: { properties: { "class.k-columnmenu-item-wrapper": "this.hostClass" } }, ngImport: i0, template: ``, isInline: true });
 }
-ColumnMenuItemBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuItemBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColumnMenuItemBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuItemBase, selector: "kendo-grid-column-menu-item-base", inputs: { service: "service" }, host: { properties: { "class.k-columnmenu-item-wrapper": "this.hostClass" } }, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuItemBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuItemBase, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-column-menu-item-base',

package/{esm2020 → esm2022}/column-menu/column-menu-item-content-template.directive.mjs

@@ -27,13 +27,14 @@ import * as i0 from "@angular/core";
  * ```
  */
 export class ColumnMenuItemContentTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuItemContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuItemContentTemplateDirective, isStandalone: true, selector: "[kendoGridColumnMenuItemContentTemplate]", ngImport: i0 });
 }
-ColumnMenuItemContentTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuItemContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ColumnMenuItemContentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuItemContentTemplateDirective, isStandalone: true, selector: "[kendoGridColumnMenuItemContentTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuItemContentTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuItemContentTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGridColumnMenuItemContentTemplate]',

package/{esm2020 → esm2022}/column-menu/column-menu-item.component.mjs

@@ -25,23 +25,54 @@ import * as i0 from "@angular/core";
  * ```
  */
 export class ColumnMenuItemComponent {
-    constructor() {
-        /**
-         * Fires when the item is clicked.
-         */
-        this.itemClick = new EventEmitter();
-        /**
-         * Fires when the content is expanded.
-         */
-        this.expand = new EventEmitter();
-        /**
-         * Fires when the content is collapsed.
-         */
-        this.collapse = new EventEmitter();
-        this.contentState = 'collapsed';
-        this.chevronUpIcon = chevronUpIcon;
-        this.chevronDownIcon = chevronDownIcon;
-    }
+    /**
+     * Fires when the item is clicked.
+     */
+    itemClick = new EventEmitter();
+    /**
+     * Fires when the content is expanded.
+     */
+    expand = new EventEmitter();
+    /**
+     * Fires when the content is collapsed.
+     */
+    collapse = new EventEmitter();
+    /**
+     * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons)
+     * that will be rendered for the item.
+     */
+    icon;
+    /**
+     * Specifies the name of the [SVG icon]({% slug svgicon_list %})
+     * that will be rendered for the item.
+     */
+    svgIcon;
+    /**
+     * Specifies the item text.
+     */
+    text;
+    /**
+     * Specifies if the item is selected.
+     */
+    selected;
+    /**
+     * Specifies if the item is disabled.
+     */
+    disabled;
+    /**
+     * Specifies if the item is expanded.
+     */
+    expanded;
+    /**
+     * Represents the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) class.
+     * Required to include the item in the column menu keyboard navigation sequence.
+     */
+    service;
+    contentTemplate;
+    contentState = 'collapsed';
+    contentId;
+    chevronUpIcon = chevronUpIcon;
+    chevronDownIcon = chevronDownIcon;
     get expandedIcon() {
         return this.expanded ? 'arrow-chevron-up' : 'arrow-chevron-down';
     }
@@ -75,9 +106,8 @@ export class ColumnMenuItemComponent {
     updateContentState() {
         this.contentState = this.expanded ? 'expanded' : 'collapsed';
     }
-}
-ColumnMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColumnMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuItemComponent, isStandalone: true, selector: "kendo-grid-columnmenu-item", inputs: { icon: "icon", svgIcon: "svgIcon", text: "text", selected: "selected", disabled: "disabled", expanded: "expanded", service: "service" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ColumnMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuItemComponent, isStandalone: true, selector: "kendo-grid-columnmenu-item", inputs: { icon: "icon", svgIcon: "svgIcon", text: "text", selected: "selected", disabled: "disabled", expanded: "expanded", service: "service" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ColumnMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div *ngIf="contentTemplate; else content" class="k-expander">
             <ng-container [ngTemplateOutlet]="content"></ng-container>
         </div>
@@ -110,29 +140,30 @@ ColumnMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             </div>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
-        trigger('state', [
-            state('collapsed', style({ display: 'none' })),
-            state('expanded', style({ display: 'block' })),
-            transition('collapsed => expanded', [
-                style({
-                    height: '0px',
-                    display: 'block'
-                }),
-                animate('100ms ease-in', style({
-                    height: '*'
-                }))
-            ]),
-            transition('expanded => collapsed', [
-                style({
-                    height: '*'
-                }),
-                animate('100ms ease-in', style({
-                    height: '0px'
-                }))
+            trigger('state', [
+                state('collapsed', style({ display: 'none' })),
+                state('expanded', style({ display: 'block' })),
+                transition('collapsed => expanded', [
+                    style({
+                        height: '0px',
+                        display: 'block'
+                    }),
+                    animate('100ms ease-in', style({
+                        height: '*'
+                    }))
+                ]),
+                transition('expanded => collapsed', [
+                    style({
+                        height: '*'
+                    }),
+                    animate('100ms ease-in', style({
+                        height: '0px'
+                    }))
+                ])
             ])
-        ])
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuItemComponent, decorators: [{
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuItemComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [

package/{esm2020 → esm2022}/column-menu/column-menu-item.directive.mjs

@@ -10,31 +10,15 @@ import { ColumnMenuChooserComponent } from './column-menu-chooser.component';
 import { ColumnMenuFilterComponent } from './column-menu-filter.component';
 import * as i0 from "@angular/core";
 export class ColumnMenuItemDirective {
-    constructor(hostElement, renderer, ngZone) {
-        this.hostElement = hostElement;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        this._isFirst = false;
-        this._isLast = false;
-        this.subs = new Subscription();
-        this.onTab = (e) => {
-            if (e.keyCode !== Keys.Tab) {
-                return;
-            }
-            if (this.isFirst && e.shiftKey && e.target === this.columnMenuItems[0]) {
-                e.preventDefault();
-                this.menuItemComponent.service.menuTabbingService.lastFocusable.focus();
-            }
-            if (this.isLast && !e.shiftKey) {
-                const lastColumnMenuItem = this.getLastColumnMenuItem();
-                const isExpanded = this.menuItemComponent.expanded;
-                if (lastColumnMenuItem === e.target && !isExpanded) {
-                    e.preventDefault();
-                    this.menuItemComponent.service.menuTabbingService.firstFocusable.focus();
-                }
-            }
-        };
-    }
+    hostElement;
+    renderer;
+    ngZone;
+    /**
+     * The reference to the Grid column menu item. Required to include the item in the built-in keyboard navigation.
+     */
+    menuItemComponent;
+    firstFocusableElement;
+    lastFocusableElement;
     /**
      * @hidden
      */
@@ -81,6 +65,15 @@ export class ColumnMenuItemDirective {
     get isLast() {
         return this._isLast;
     }
+    _isFirst = false;
+    _isLast = false;
+    columnMenuItems;
+    subs = new Subscription();
+    constructor(hostElement, renderer, ngZone) {
+        this.hostElement = hostElement;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+    }
     ngAfterViewInit() {
         this.columnMenuItems = this.hostElement.nativeElement.querySelectorAll('.k-columnmenu-item');
         [].slice.apply(this.columnMenuItems).forEach(el => this.renderer.setAttribute(el, 'tabindex', '0'));
@@ -94,6 +87,23 @@ export class ColumnMenuItemDirective {
             this.subs.unsubscribe();
         }
     }
+    onTab = (e) => {
+        if (e.keyCode !== Keys.Tab) {
+            return;
+        }
+        if (this.isFirst && e.shiftKey && e.target === this.columnMenuItems[0]) {
+            e.preventDefault();
+            this.menuItemComponent.service.menuTabbingService.lastFocusable.focus();
+        }
+        if (this.isLast && !e.shiftKey) {
+            const lastColumnMenuItem = this.getLastColumnMenuItem();
+            const isExpanded = this.menuItemComponent.expanded;
+            if (lastColumnMenuItem === e.target && !isExpanded) {
+                e.preventDefault();
+                this.menuItemComponent.service.menuTabbingService.firstFocusable.focus();
+            }
+        }
+    };
     getLastColumnMenuItem() {
         return (this.columnMenuItems.length === 1 ? this.columnMenuItems[0] : this.columnMenuItems[1]);
     }
@@ -102,10 +112,10 @@ export class ColumnMenuItemDirective {
             this.menuItemComponent instanceof ColumnMenuChooserComponent ||
             this.menuItemComponent instanceof ColumnMenuPositionComponent;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuItemDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuItemDirective, isStandalone: true, selector: "[kendoGridColumnMenuItem]", inputs: { menuItemComponent: ["kendoGridColumnMenuItem", "menuItemComponent"] }, ngImport: i0 });
 }
-ColumnMenuItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuItemDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-ColumnMenuItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuItemDirective, isStandalone: true, selector: "[kendoGridColumnMenuItem]", inputs: { menuItemComponent: ["kendoGridColumnMenuItem", "menuItemComponent"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGridColumnMenuItem]',

package/{esm2020 → esm2022}/column-menu/column-menu-lock.component.mjs

@@ -29,13 +29,14 @@ import * as i2 from "../common/column-info.service";
  * ```
  */
 export class ColumnMenuLockComponent extends ColumnMenuItemBase {
+    ctx;
+    columnInfoService;
+    changeDetector;
     constructor(ctx, columnInfoService, changeDetector) {
         super();
         this.ctx = ctx;
         this.columnInfoService = columnInfoService;
         this.changeDetector = changeDetector;
-        this.unlockIcon = unlockIcon;
-        this.lockIcon = lockIcon;
     }
     get text() {
         return this.ctx.localization.get(this.locked ? 'unlock' : 'lock');
@@ -43,6 +44,8 @@ export class ColumnMenuLockComponent extends ColumnMenuItemBase {
     get icon() {
         return this.locked ? 'unlock' : 'lock';
     }
+    unlockIcon = unlockIcon;
+    lockIcon = lockIcon;
     get svgIcon() {
         return this.locked ? this.unlockIcon : this.lockIcon;
     }
@@ -77,9 +80,8 @@ export class ColumnMenuLockComponent extends ColumnMenuItemBase {
     get locked() {
         return this.service.column.locked;
     }
-}
-ColumnMenuLockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuLockComponent, deps: [{ token: i1.ContextService }, { token: i2.ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ColumnMenuLockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuLockComponent, isStandalone: true, selector: "kendo-grid-columnmenu-lock", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuLockComponent, deps: [{ token: i1.ContextService }, { token: i2.ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuLockComponent, isStandalone: true, selector: "kendo-grid-columnmenu-lock", usesInheritance: true, ngImport: i0, template: `
        <kendo-grid-columnmenu-item
             [text]="text"
             [icon]="icon"
@@ -88,7 +90,8 @@ ColumnMenuLockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             [disabled]="disabled">
        </kendo-grid-columnmenu-item>
     `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuLockComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuLockComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-columnmenu-lock',

package/{esm2020 → esm2022}/column-menu/column-menu-position.component.mjs

@@ -31,30 +31,33 @@ import * as i1 from "../common/provider.service";
  * ```
  */
 export class ColumnMenuPositionComponent extends ColumnMenuItemBase {
-    constructor(ctx, hostElement) {
-        super();
-        this.ctx = ctx;
-        this.hostElement = hostElement;
-        /**
-         * Fires when the content is expanded.
-         */
-        this.expand = new EventEmitter();
-        /**
-         * Fires when the content is collapsed.
-         */
-        this.collapse = new EventEmitter();
-        /**
-         * Specifies if the content is expanded.
-         * @default false
-         */
-        this.expanded = false;
-        /**
-         * @hidden
-         */
-        this.actionsClass = 'k-actions';
-        this.setColumnPositionIcon = setColumnPositionIcon;
-        this._isLast = false;
-    }
+    ctx;
+    hostElement;
+    /**
+     * Fires when the content is expanded.
+     */
+    expand = new EventEmitter();
+    /**
+     * Fires when the content is collapsed.
+     */
+    collapse = new EventEmitter();
+    /**
+     * Specifies if the content is expanded.
+     * @default false
+     */
+    expanded = false;
+    /**
+     * Specifies if the lock column item is displayed.
+     */
+    showLock;
+    /**
+     * Specifies if the stick column item is displayed.
+     */
+    showStick;
+    /**
+     * @hidden
+     */
+    actionsClass = 'k-actions';
     /**
      * @hidden
      */
@@ -68,6 +71,13 @@ export class ColumnMenuPositionComponent extends ColumnMenuItemBase {
     get isLast() {
         return this._isLast;
     }
+    setColumnPositionIcon = setColumnPositionIcon;
+    _isLast = false;
+    constructor(ctx, hostElement) {
+        super();
+        this.ctx = ctx;
+        this.hostElement = hostElement;
+    }
     /**
      * @hidden
      */
@@ -105,9 +115,8 @@ export class ColumnMenuPositionComponent extends ColumnMenuItemBase {
         const lastFocusableIndex = this.expanded ? menuItems.length - 1 : 0;
         return menuItems[lastFocusableIndex];
     }
-}
-ColumnMenuPositionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuPositionComponent, deps: [{ token: i1.ContextService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ColumnMenuPositionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuPositionComponent, isStandalone: true, selector: "kendo-grid-columnmenu-position", inputs: { expanded: "expanded", showLock: "showLock", showStick: "showStick", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuPositionComponent, deps: [{ token: i1.ContextService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuPositionComponent, isStandalone: true, selector: "kendo-grid-columnmenu-position", inputs: { expanded: "expanded", showLock: "showLock", showStick: "showStick", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-columnmenu-item
             [text]="ctx.localization.get('setColumnPosition')"
             icon="set-column-position"
@@ -130,7 +139,8 @@ ColumnMenuPositionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
             </ng-template>
         </kendo-grid-columnmenu-item>
     `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuPositionComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuPositionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-columnmenu-position',