@progress/kendo-angular-grid 14.1.0-develop.10 → 14.1.0-develop.11

package/fesm2015/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, Directive, Optional, QueryList, isDevMode, ContentChildren, ContentChild, forwardRef, SkipSelf, Host, Inject, Output, SecurityContext, HostListener, ChangeDetectionStrategy, ElementRef, ViewChild, ViewChildren, Self, TemplateRef, Pipe, ViewEncapsulation, NgModule } from '@angular/core';
+import { InjectionToken, Component, HostBinding, Input, EventEmitter, Injectable, Directive, Optional, QueryList, isDevMode, ContentChildren, ContentChild, forwardRef, SkipSelf, Host, Inject, Output, SecurityContext, HostListener, ChangeDetectionStrategy, ElementRef, ViewChild, TemplateRef, ViewChildren, Self, NgZone, 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, shouldShowValidationUI, DraggableModule, EventsModule, ResizeSensorModule, WatermarkModule } from '@progress/kendo-angular-common';
 import { merge, of, Subject, from, Subscription, interval, fromEvent, zip as zip$1, BehaviorSubject, Observable } from 'rxjs';
@@ -18,7 +18,7 @@ import { NG_VALUE_ACCESSOR, FormControl, FormGroup, ReactiveFormsModule, FormsMo
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
-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 { plusIcon, cancelIcon, lockIcon, unlockIcon, insertMiddleIcon, caretAltLeftIcon, caretAltToLeftIcon, caretAltRightIcon, caretAltToRightIcon, arrowLeftIcon, arrowRightIcon, sortDescSmallIcon, sortAscSmallIcon, filterIcon, stickIcon, unstickIcon, setColumnPositionIcon, columnsIcon, maxWidthIcon, displayInlineFlexIcon, slidersIcon, moreVerticalIcon, filterClearIcon, reorderIcon, caretAltDownIcon, minusIcon } from '@progress/kendo-svg-icons';
 import * as i1$3 from '@angular/platform-browser';
 import * as i3 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
@@ -4474,8 +4474,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1699437635,
-    version: '14.1.0-develop.10',
+    publishDate: 1699450724,
+    version: '14.1.0-develop.11',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -8523,17 +8523,53 @@ const indicatorRules = or(overSameTarget, and(overLastTarget, isLastGroup));
  * @hidden
  */
 class GroupPanelComponent {
-    constructor(hint, cue, groupInfoService, ctx, cd) {
+    constructor(hint, cue, groupInfoService, ctx, cd, popupService, ngZone, renderer) {
         this.hint = hint;
         this.cue = cue;
         this.groupInfoService = groupInfoService;
         this.ctx = ctx;
         this.cd = cd;
+        this.popupService = popupService;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
         this.change = new EventEmitter();
         this.groups = [];
         this.dropTargets = new QueryList();
         this.groupTitles = [];
-        this.subscription = new Subscription();
+        this.isChipMenuOpen = false;
+        this.rtl = false;
+        this.arrowLeftIcon = arrowLeftIcon;
+        this.arrowRightIcon = arrowRightIcon;
+        this.handleKeyDown = (e) => {
+            if (e.keyCode === Keys.ArrowDown || e.keyCode === Keys.ArrowUp) {
+                e.preventDefault();
+                const relatedItemType = e.target.matches(':first-child') ? 'next' : 'previous';
+                this.activateMenuItem(e.target, relatedItemType);
+            }
+            else if (e.keyCode === Keys.Escape) {
+                this.destroyMenu(true);
+            }
+            else if (e.keyCode === Keys.Tab) {
+                this.destroyMenu(true);
+            }
+            else if (e.keyCode === Keys.Space || e.keyCode === Keys.Enter) {
+                this.handleMenuClick(e);
+            }
+        };
+        this.handleClick = (e) => {
+            e.preventDefault();
+            const menuItemEl = e.target.closest('.k-menu-item');
+            if (!menuItemEl.matches('[aria-disabled="true"]')) {
+                this.handleMenuClick(e);
+                return;
+            }
+            if (menuItemEl.getAttribute('tabindex') === '0') {
+                return;
+            }
+            const activeMenuItem = menuItemEl.closest('.k-menu-group').querySelector('[tabindex="0"]');
+            const relatedItemType = activeMenuItem.matches(':first-child') ? 'next' : 'previous';
+            this.activateMenuItem(activeMenuItem, relatedItemType);
+        };
     }
     get groupHeaderClass() {
         return true;
@@ -8544,13 +8580,18 @@ class GroupPanelComponent {
     get text() {
         return this.emptyText ? this.emptyText : this.ctx.localization.get('groupPanelEmpty');
     }
+    get gridId() {
+        var _a;
+        return (_a = this.ctx.grid) === null || _a === void 0 ? void 0 : _a.ariaRootId;
+    }
     ngAfterViewInit() {
+        this.subscription = this.ctx.localization.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.cd.markForCheck();
+        });
         this.subscription.add(observe(this.dropTargets)
             .subscribe(this.attachTargets.bind(this)));
     }
-    ngOnInit() {
-        this.subscription.add(this.ctx.localization.changes.subscribe(() => this.cd.markForCheck()));
-    }
     ngDoCheck() {
         const currentTitles = this.groups.map(group => this.groupInfoService.groupTitle(group));
         if (currentTitles.length !== this.groupTitles.length || currentTitles.some((current, idx) => current !== this.groupTitles[idx])) {
@@ -8565,6 +8606,7 @@ class GroupPanelComponent {
         if (this.targetSubscription) {
             this.targetSubscription.unsubscribe();
         }
+        this.destroyMenu();
     }
     messageFor(token) {
         return this.ctx.localization.get(token);
@@ -8594,6 +8636,42 @@ class GroupPanelComponent {
     remove(group) {
         this.change.emit(this.groups.filter(x => x.field !== group.field));
     }
+    toggleMenu(chip, first, last, field) {
+        const anchor = chip.element.nativeElement.querySelector('.k-chip-action');
+        if (this.popupRef) {
+            const popupAnchor = this.popupRef.popup.instance.anchor;
+            this.destroyMenu();
+            if (anchor === popupAnchor) {
+                return;
+            }
+        }
+        this.first = first;
+        this.last = last;
+        const direction = this.ctx.localization.rtl ? 'right' : 'left';
+        this.popupRef = this.popupService.open({
+            anchor: anchor,
+            content: this.defaultTemplate,
+            anchorAlign: { vertical: 'bottom', horizontal: direction },
+            popupAlign: { vertical: 'top', horizontal: direction },
+            positionMode: 'absolute'
+        });
+        this.activeItem = this.dropTargets.find(dt => dt.context.field === field);
+        this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.ctx.localization.rtl ? 'rtl' : 'ltr');
+        const menuItems = Array.from(this.popupRef.popupElement.querySelectorAll('.k-menu-item'));
+        this.activateMenuItem(menuItems[1], 'previous');
+        this.popupSubs = this.popupRef.popupAnchorViewportLeave.subscribe(() => {
+            this.destroyMenu(true);
+        });
+        if (isUniversal()) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            this.popupSubs.add(fromEvent(document, 'click')
+                .pipe(filter((event) => !closest(event.target, (node) => node === this.popupRef.popupElement || (node.matches && node.matches('.k-chip-action'))))).subscribe(() => {
+                this.destroyMenu();
+            }));
+        });
+    }
     canDrop(draggable, target) {
         const isIndicator = draggable.type === 'groupIndicator';
         const rules = isIndicator
@@ -8616,7 +8694,10 @@ class GroupPanelComponent {
             .reduce((acc, target) => merge(acc, target.leave), from([]));
         const dropStream = this.dropTargets
             .reduce((acc, target) => merge(acc, target.drop), from([]));
-        this.targetSubscription.add(enterStream.pipe(tap(_ => this.hint.removeLock()), filter(({ draggable, target }) => this.canDrop(draggable.context, target.context)), tap(this.enter.bind(this)), switchMapTo(dropStream.pipe(takeUntil(leaveStream.pipe(tap(this.leave.bind(this))))))).subscribe(this.drop.bind(this)));
+        this.targetSubscription.add(enterStream.pipe(tap(_ => {
+            this.hint.removeLock();
+            this.destroyMenu();
+        }), filter(({ draggable, target }) => this.canDrop(draggable.context, target.context)), tap(this.enter.bind(this)), switchMapTo(dropStream.pipe(takeUntil(leaveStream.pipe(tap(this.leave.bind(this))))))).subscribe(this.drop.bind(this)));
     }
     enter({ draggable, target }) {
         this.hint.enable();
@@ -8635,9 +8716,47 @@ class GroupPanelComponent {
         const index = this.dropTargets.toArray().indexOf(target);
         this.insert(field, index);
     }
+    destroyMenu(focusAnchor) {
+        if (this.popupRef) {
+            this.popupRef.close();
+            this.popupRef = null;
+            this.popupSubs && this.popupSubs.unsubscribe();
+            focusAnchor && this.activeItem.context.target.focus();
+        }
+    }
+    activateMenuItem(item, relatedItemType) {
+        this.renderer.setAttribute(item, 'tabindex', '-1');
+        this.renderer.removeClass(item, 'k-focus');
+        const relatedItem = item[`${relatedItemType}ElementSibling`];
+        this.renderer.setAttribute(relatedItem, 'tabindex', '0');
+        this.renderer.addClass(relatedItem, 'k-focus');
+        this.ngZone.runOutsideAngular(() => setTimeout(() => relatedItem.focus()));
+    }
+    handleMenuClick(e) {
+        e.preventDefault();
+        if (e.target.getAttribute('aria-disabled') !== 'true') {
+            const chips = this.dropTargets.toArray().slice(0, this.dropTargets.length - 1);
+            let groupChip, groupChipIndex;
+            for (let i = 0; i < chips.length; i++) {
+                if (chips[i].element.nativeElement === this.popupRef.popup.instance.anchor.closest('.k-chip')) {
+                    groupChip = chips[i];
+                    groupChipIndex = i;
+                    break;
+                }
+            }
+            const isPrev = e.target.closest('.k-menu-item').matches(':first-child');
+            if (isPrev && groupChipIndex > 0) {
+                this.insert(groupChip.context.field, groupChipIndex - 1);
+            }
+            else if (!isPrev && groupChipIndex < chips.length - 1) {
+                this.insert(groupChip.context.field, groupChipIndex + 1);
+            }
+            this.destroyMenu(true);
+        }
+    }
 }
-GroupPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupPanelComponent, deps: [{ token: DragHintService }, { token: DropCueService }, { token: GroupInfoService }, { token: ContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: { text: "text", navigable: "navigable", groups: "groups" }, outputs: { change: "change" }, host: { properties: { "class.k-grouping-header": "this.groupHeaderClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }], ngImport: i0, template: `
+GroupPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupPanelComponent, deps: [{ token: DragHintService }, { token: DropCueService }, { token: GroupInfoService }, { token: ContextService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: { text: "text", navigable: "navigable", groups: "groups" }, outputs: { change: "change" }, host: { properties: { "class.k-grouping-header": "this.groupHeaderClass" } }, viewQueries: [{ propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }], ngImport: i0, template: `
         <div
             *ngIf="groups.length === 0"
             class="k-grouping-drop-container"
@@ -8654,7 +8773,8 @@ GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [navigable]="navigable"
             role="none">
             <kendo-chip
-                *ngFor="let group of groups; let index = index;"
+                *ngFor="let group of groups; let index = index; let first = first; let last = last;"
+                #chip
                 kendoDropTarget
                 kendoDraggableColumn
                 kendoDraggable
@@ -8663,14 +8783,21 @@ GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 [context]="{
                     field: group.field,
                     type: 'groupIndicator',
-                    hint:  groupTitles[index]
+                    hint:  groupTitles[index],
+                    target: chip
                 }"
                 [label]="groupTitles[index]"
                 [removable]="true"
+                [hasMenu]="true"
                 [icon]="getDirectionIcon(group)"
                 [svgIcon]="getDirectionSvgIcon(group)"
+                [attr.aria-haspopup]="'menu'"
+                [attr.aria-expanded]="isChipMenuOpen"
+                [attr.aria-controls]="gridId"
                 (contentClick)="directionChange(group)"
                 (remove)="remove(group)"
+                (menuToggle)="toggleMenu(chip, first, last, group.field)"
+                (keydown.alt.arrowdown)="$event.preventDefault(); toggleMenu(chip, first, last, group.field)"
             >
             </kendo-chip>
         </kendo-chiplist>
@@ -8683,7 +8810,31 @@ GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             }"
             kendoDropTarget
         >&nbsp;</div>
-    `, isInline: true, components: [{ type: i4$1.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size", "role", "navigable"], outputs: ["selectedChange", "remove"] }, { type: i4$1.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "removeSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+
+        <ng-template #defaultTemplate>
+            <ul unselectable="on" role="menu" class="k-group k-menu-group k-reset k-menu-group-md" [kendoEventsOutsideAngular]="{
+                keydown: handleKeyDown,
+                click: handleClick
+            }">
+                <li role="menuitem" unselectable="on" class="k-item k-menu-item" [attr.aria-disabled]="first">
+                    <span class="k-link k-menu-link" [class.k-disabled]="first">
+                        <kendo-icon-wrapper
+                            [name]="rtl ? 'arrow-right' : 'arrow-left'"
+                            [svgIcon]="rtl ? arrowRightIcon : arrowLeftIcon"></kendo-icon-wrapper>
+                        <span class="k-menu-link-text">{{messageFor('groupChipMenuPrevious')}}</span>
+                    </span>
+                </li>
+                <li role="menuitem" unselectable="on" class="k-item k-menu-item" [attr.aria-disabled]="last">
+                    <span class="k-link k-menu-link" [class.k-disabled]="last">
+                        <kendo-icon-wrapper
+                            [name]="rtl ? 'arrow-left' : 'arrow-right'"
+                            [svgIcon]="rtl ? arrowLeftIcon : arrowRightIcon"></kendo-icon-wrapper>
+                        <span class="k-menu-link-text">{{messageFor('groupChipMenuNext')}}</span>
+                    </span>
+                </li>
+            </ul>
+        </ng-template>
+    `, isInline: true, components: [{ type: i4$1.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size", "role", "navigable"], outputs: ["selectedChange", "remove"] }, { type: i4$1.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "removeSvgIcon", "hasMenu", "menuIcon", "menuSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "menuToggle", "contentClick"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i1$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupPanelComponent, decorators: [{
             type: Component,
             args: [{
@@ -8706,7 +8857,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [navigable]="navigable"
             role="none">
             <kendo-chip
-                *ngFor="let group of groups; let index = index;"
+                *ngFor="let group of groups; let index = index; let first = first; let last = last;"
+                #chip
                 kendoDropTarget
                 kendoDraggableColumn
                 kendoDraggable
@@ -8715,14 +8867,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [context]="{
                     field: group.field,
                     type: 'groupIndicator',
-                    hint:  groupTitles[index]
+                    hint:  groupTitles[index],
+                    target: chip
                 }"
                 [label]="groupTitles[index]"
                 [removable]="true"
+                [hasMenu]="true"
                 [icon]="getDirectionIcon(group)"
                 [svgIcon]="getDirectionSvgIcon(group)"
+                [attr.aria-haspopup]="'menu'"
+                [attr.aria-expanded]="isChipMenuOpen"
+                [attr.aria-controls]="gridId"
                 (contentClick)="directionChange(group)"
                 (remove)="remove(group)"
+                (menuToggle)="toggleMenu(chip, first, last, group.field)"
+                (keydown.alt.arrowdown)="$event.preventDefault(); toggleMenu(chip, first, last, group.field)"
             >
             </kendo-chip>
         </kendo-chiplist>
@@ -8735,9 +8894,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }"
             kendoDropTarget
         >&nbsp;</div>
+
+        <ng-template #defaultTemplate>
+            <ul unselectable="on" role="menu" class="k-group k-menu-group k-reset k-menu-group-md" [kendoEventsOutsideAngular]="{
+                keydown: handleKeyDown,
+                click: handleClick
+            }">
+                <li role="menuitem" unselectable="on" class="k-item k-menu-item" [attr.aria-disabled]="first">
+                    <span class="k-link k-menu-link" [class.k-disabled]="first">
+                        <kendo-icon-wrapper
+                            [name]="rtl ? 'arrow-right' : 'arrow-left'"
+                            [svgIcon]="rtl ? arrowRightIcon : arrowLeftIcon"></kendo-icon-wrapper>
+                        <span class="k-menu-link-text">{{messageFor('groupChipMenuPrevious')}}</span>
+                    </span>
+                </li>
+                <li role="menuitem" unselectable="on" class="k-item k-menu-item" [attr.aria-disabled]="last">
+                    <span class="k-link k-menu-link" [class.k-disabled]="last">
+                        <kendo-icon-wrapper
+                            [name]="rtl ? 'arrow-left' : 'arrow-right'"
+                            [svgIcon]="rtl ? arrowLeftIcon : arrowRightIcon"></kendo-icon-wrapper>
+                        <span class="k-menu-link-text">{{messageFor('groupChipMenuNext')}}</span>
+                    </span>
+                </li>
+            </ul>
+        </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: DragHintService }, { type: DropCueService }, { type: GroupInfoService }, { type: ContextService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { change: [{
+        }], ctorParameters: function () { return [{ type: DragHintService }, { type: DropCueService }, { type: GroupInfoService }, { type: ContextService }, { type: i0.ChangeDetectorRef }, { type: i1$2.PopupService }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { change: [{
                 type: Output
             }], groupHeaderClass: [{
                 type: HostBinding,
@@ -8751,6 +8934,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], dropTargets: [{
                 type: ViewChildren,
                 args: [DropTargetDirective]
+            }], defaultTemplate: [{
+                type: ViewChild,
+                args: ['defaultTemplate', { static: true, read: TemplateRef }]
             }] } });
 
 /**
@@ -11615,7 +11801,7 @@ class ColumnMenuItemComponent {
     }
 }
 ColumnMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColumnMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: { icon: "icon", svgIcon: "svgIcon", text: "text", selected: "selected", disabled: "disabled", expanded: "expanded" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ColumnMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+ColumnMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnMenuItemComponent, 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
             class="k-columnmenu-item"
             (click)="onClick($event)"
@@ -11723,6 +11909,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], expanded: [{
                 type: Input
+            }], service: [{
+                type: Input
             }], contentTemplate: [{
                 type: ContentChild,
                 args: [ColumnMenuItemContentTemplateDirective]
@@ -11804,7 +11992,7 @@ ColumnMenuLockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             (itemClick)="toggleColumn()"
             [disabled]="disabled">
        </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"] }] });
+    `, isInline: true, components: [{ 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: "13.3.12", ngImport: i0, type: ColumnMenuLockComponent, decorators: [{
             type: Component,
             args: [{
@@ -11899,7 +12087,7 @@ ColumnMenuStickComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
            (itemClick)="toggleColumn()"
            [disabled]="disabled">
         </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"] }] });
+    `, isInline: true, components: [{ 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: "13.3.12", ngImport: i0, type: ColumnMenuStickComponent, decorators: [{
             type: Component,
             args: [{
@@ -12032,7 +12220,7 @@ ColumnMenuPositionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 </kendo-grid-columnmenu-stick>
             </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: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }], directives: [{ type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }, { type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }], directives: [{ type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuPositionComponent, decorators: [{
             type: Component,
             args: [{
@@ -12551,7 +12739,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", "ariaLabel", "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", "service"], 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: [{
@@ -12677,7 +12865,7 @@ ColumnMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                 </kendo-grid-filter-menu-container>
             </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: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }], directives: [{ type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
+    `, isInline: true, components: [{ type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }, { type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }], directives: [{ type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuFilterComponent, decorators: [{
             type: Component,
             args: [{
@@ -12715,9 +12903,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
-/**
- * @hidden
- */
 class ColumnMenuItemDirective {
     constructor(hostElement, renderer, ngZone) {
         this.hostElement = hostElement;
@@ -12744,6 +12929,9 @@ class ColumnMenuItemDirective {
             }
         };
     }
+    /**
+     * @hidden
+     */
     set isFirst(value) {
         if (value) {
             const focusableElement = this.columnMenuItems[0];
@@ -12755,9 +12943,15 @@ class ColumnMenuItemDirective {
         }
         this._isFirst = value;
     }
+    /**
+     * @hidden
+     */
     get isFirst() {
         return this._isFirst;
     }
+    /**
+     * @hidden
+     */
     set isLast(value) {
         if (!this.columnMenuItems) {
             return;
@@ -12775,15 +12969,20 @@ class ColumnMenuItemDirective {
         }
         this._isLast = value;
     }
+    /**
+     * @hidden
+     */
     get isLast() {
         return this._isLast;
     }
     ngAfterViewInit() {
+        var _a;
         this.columnMenuItems = this.hostElement.nativeElement.querySelectorAll('.k-columnmenu-item');
         [].slice.apply(this.columnMenuItems).forEach(el => this.renderer.setAttribute(el, 'tabindex', '0'));
         if (this.menuItemComponent instanceof ColumnMenuFilterComponent) {
             this.menuItemComponent.service.menuTabbingService.isColumnMenu = true;
         }
+        (_a = this.menuItemComponent.service) === null || _a === void 0 ? void 0 : _a.columnMenuContainer.templateMenuItems.push(this);
     }
     ngOnDestroy() {
         if (this.subs) {
@@ -12816,17 +13015,25 @@ class ColumnMenuContainerComponent {
     constructor(service, ngZone) {
         this.service = service;
         this.ngZone = ngZone;
+        this.templateMenuItems = [];
+        service.columnMenuContainer = this;
     }
-    ngAfterContentInit() {
-        if (!this.columnMenuItems.length) {
+    ngAfterViewInit() {
+        if (this.columnMenuItems.length) {
+            this.columnMenuItems.first.isFirst = true;
+            this.columnMenuItems.last.isLast = true;
+        }
+        else if (this.templateMenuItems.length) {
+            this.templateMenuItems[0].isFirst = true;
+            this.templateMenuItems[this.templateMenuItems.length - 1].isLast = true;
+        }
+        else {
             return;
         }
-        this.columnMenuItems.first.isFirst = true;
-        this.columnMenuItems.last.isLast = true;
         this.ngZone.onStable.pipe(take(1)).subscribe(() => this.service.menuTabbingService.firstFocusable.focus());
     }
 }
-ColumnMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuContainerComponent, deps: [{ token: ColumnMenuService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuContainerComponent, deps: [{ token: ColumnMenuService }, { token: NgZone }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container", queries: [{ propertyName: "columnMenuItems", predicate: ColumnMenuItemDirective, descendants: true }], ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
@@ -12838,7 +13045,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <ng-content></ng-content>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: ColumnMenuService }, { type: i0.NgZone }]; }, propDecorators: { columnMenuItems: [{
+        }], ctorParameters: function () {
+        return [{ type: ColumnMenuService }, { type: i0.NgZone, decorators: [{
+                        type: Inject,
+                        args: [NgZone]
+                    }] }];
+    }, propDecorators: { columnMenuItems: [{
                 type: ContentChildren,
                 args: [ColumnMenuItemDirective, { descendants: true }]
             }] } });
@@ -12920,7 +13132,7 @@ ColumnMenuSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             (itemClick)="toggleSort('desc')"
             [selected]="sortedDesc">
         </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"] }] });
+    `, isInline: true, components: [{ 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: "13.3.12", ngImport: i0, type: ColumnMenuSortComponent, decorators: [{
             type: Component,
             args: [{
@@ -12992,7 +13204,7 @@ ColumnMenuAutoSizeColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
             [svgIcon]="maxWidthIcon"
             (itemClick)="autoSizeColumn()"
         ></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"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuAutoSizeColumnComponent, decorators: [{
             type: Component,
             args: [{
@@ -13058,7 +13270,7 @@ ColumnMenuAutoSizeAllColumnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVer
             [svgIcon]="displayInlineFlexIcon"
             (itemClick)="autoSizeAllColumns()"
         ></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"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuAutoSizeAllColumnsComponent, decorators: [{
             type: Component,
             args: [{
@@ -13353,10 +13565,14 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 [svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
         </a>
         <ng-template #template>
-            <ng-container
-                [ngTemplateOutlet]="this.column.columnMenuTemplateRef || this.columnMenuTemplate || (this.settings.view === 'tabbed' ? this.tabbedInterfaceTemplate : this.defaultTemplate)"
-                [ngTemplateOutletContext]="{ service: service, column: column }">
-            </ng-container>
+            <kendo-grid-columnmenu-container
+                (keydown.escape)="close(true)"
+                (keydown.enter)="$event.stopImmediatePropagation()">
+                <ng-container
+                    [ngTemplateOutlet]="this.column.columnMenuTemplateRef || this.columnMenuTemplate || (this.settings.view === 'tabbed' ? this.tabbedInterfaceTemplate : this.defaultTemplate)"
+                    [ngTemplateOutletContext]="{ service: service, column: column }">
+                </ng-container>
+            </kendo-grid-columnmenu-container>
         </ng-template>
         <ng-template #defaultTemplate>
             <kendo-grid-columnmenu-container
@@ -13524,10 +13740,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
         </a>
         <ng-template #template>
-            <ng-container
-                [ngTemplateOutlet]="this.column.columnMenuTemplateRef || this.columnMenuTemplate || (this.settings.view === 'tabbed' ? this.tabbedInterfaceTemplate : this.defaultTemplate)"
-                [ngTemplateOutletContext]="{ service: service, column: column }">
-            </ng-container>
+            <kendo-grid-columnmenu-container
+                (keydown.escape)="close(true)"
+                (keydown.enter)="$event.stopImmediatePropagation()">
+                <ng-container
+                    [ngTemplateOutlet]="this.column.columnMenuTemplateRef || this.columnMenuTemplate || (this.settings.view === 'tabbed' ? this.tabbedInterfaceTemplate : this.defaultTemplate)"
+                    [ngTemplateOutletContext]="{ service: service, column: column }">
+                </ng-container>
+            </kendo-grid-columnmenu-container>
         </ng-template>
         <ng-template #defaultTemplate>
             <kendo-grid-columnmenu-container
@@ -19338,7 +19558,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class GridMessages extends ComponentMessages {
 }
 GridMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-GridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", selectPage: "selectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterCellOperatorLabel: "filterCellOperatorLabel", booleanFilterCellLabel: "booleanFilterCellLabel", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", groupPanelLabel: "groupPanelLabel", dragRowHandleLabel: "dragRowHandleLabel", columnMenuFilterTabTitle: "columnMenuFilterTabTitle", columnMenuGeneralTabTitle: "columnMenuGeneralTabTitle", columnMenuColumnsTabTitle: "columnMenuColumnsTabTitle" }, usesInheritance: true, ngImport: i0 });
+GridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", selectPage: "selectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterCellOperatorLabel: "filterCellOperatorLabel", booleanFilterCellLabel: "booleanFilterCellLabel", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", groupPanelLabel: "groupPanelLabel", dragRowHandleLabel: "dragRowHandleLabel", columnMenuFilterTabTitle: "columnMenuFilterTabTitle", columnMenuGeneralTabTitle: "columnMenuGeneralTabTitle", columnMenuColumnsTabTitle: "columnMenuColumnsTabTitle", groupChipMenuPrevious: "groupChipMenuPrevious", groupChipMenuNext: "groupChipMenuNext" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMessages, decorators: [{
             type: Directive,
             args: [{
@@ -19507,6 +19727,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], columnMenuColumnsTabTitle: [{
                 type: Input
+            }], groupChipMenuPrevious: [{
+                type: Input
+            }], groupChipMenuNext: [{
+                type: Input
             }] } });
 
 /**
@@ -21634,6 +21858,12 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             i18n-sortedDefault="kendo.grid.sortedDefault|The status announcement when a column is no longer sorted"
             sortedDefault="Not Sorted"
 
+            i18n-sortedAscending="kendo.grid.sortedAscending|The title of the Group Chip indicating the ascending sorting order of the groups"
+            sortedAscending="Sorted Ascending"
+            
+            i18n-sortedDescending="kendo.grid.sortedDescending|The title of the Group Chip indicating the descending sorting order of the groups"
+            sortedDescending="Sorted Descending"
+
             i18n-columnsApply="kendo.grid.columnsApply|The text shown in the column menu or column chooser for the columns apply button"
             columnsApply="Apply"
 
@@ -21693,6 +21923,12 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
 
             i18n-columnMenuColumnsTabTitle="kendo.grid.columnMenuColumnsTabTitle|The title for the column menu Columns tab"
             columnMenuColumnsTabTitle="Columns"
+
+            i18n-groupChipMenuPrevious="kendo.grid.groupChipMenuPrevious|The text for the Group pane Chip Menu Move as previous item"
+            groupChipMenuPrevious="Move as previous"
+
+            i18n-groupChipMenuNext="kendo.grid.groupChipMenuNext|The text for the Group pane Chip Menu Move as next item"
+            groupChipMenuNext="Move as next"
         >
         </ng-container>
         <kendo-grid-toolbar
@@ -22252,6 +22488,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             i18n-sortedDefault="kendo.grid.sortedDefault|The status announcement when a column is no longer sorted"
             sortedDefault="Not Sorted"
 
+            i18n-sortedAscending="kendo.grid.sortedAscending|The title of the Group Chip indicating the ascending sorting order of the groups"
+            sortedAscending="Sorted Ascending"
+            
+            i18n-sortedDescending="kendo.grid.sortedDescending|The title of the Group Chip indicating the descending sorting order of the groups"
+            sortedDescending="Sorted Descending"
+
             i18n-columnsApply="kendo.grid.columnsApply|The text shown in the column menu or column chooser for the columns apply button"
             columnsApply="Apply"
 
@@ -22311,6 +22553,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-columnMenuColumnsTabTitle="kendo.grid.columnMenuColumnsTabTitle|The title for the column menu Columns tab"
             columnMenuColumnsTabTitle="Columns"
+
+            i18n-groupChipMenuPrevious="kendo.grid.groupChipMenuPrevious|The text for the Group pane Chip Menu Move as previous item"
+            groupChipMenuPrevious="Move as previous"
+
+            i18n-groupChipMenuNext="kendo.grid.groupChipMenuNext|The text for the Group pane Chip Menu Move as next item"
+            groupChipMenuNext="Move as next"
         >
         </ng-container>
         <kendo-grid-toolbar
@@ -24319,7 +24567,7 @@ const exportedModules$4 = [
     GroupHeaderColumnTemplateDirective,
     GroupFooterTemplateDirective,
     GroupHeaderComponent,
-    GroupPanelComponent
+    GroupPanelComponent,
 ];
 /**
  * @hidden
@@ -24338,18 +24586,18 @@ GroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         GroupHeaderColumnTemplateDirective,
         GroupFooterTemplateDirective,
         GroupHeaderComponent,
-        GroupPanelComponent], imports: [CommonModule, SharedModule, DragAndDropModule, ChipModule], exports: [GroupHeaderTemplateDirective,
+        GroupPanelComponent], imports: [CommonModule, SharedModule, DragAndDropModule, ChipModule, PopupModule], exports: [GroupHeaderTemplateDirective,
         GroupHeaderColumnTemplateDirective,
         GroupFooterTemplateDirective,
         GroupHeaderComponent,
         GroupPanelComponent] });
-GroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupModule, imports: [[CommonModule, SharedModule, DragAndDropModule, ChipModule]] });
+GroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupModule, imports: [[CommonModule, SharedModule, DragAndDropModule, ChipModule, PopupModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [exportedModules$4],
+                    declarations: [...exportedModules$4],
                     exports: [exportedModules$4],
-                    imports: [CommonModule, SharedModule, DragAndDropModule, ChipModule]
+                    imports: [CommonModule, SharedModule, DragAndDropModule, ChipModule, PopupModule]
                 }]
         }] });