@progress/kendo-angular-grid 14.1.0-develop.9 → 14.1.1-develop.1

package/esm2020/grouping/group-panel.component.mjs

@@ -2,27 +2,32 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output, QueryList, ViewChildren, ChangeDetectorRef } from '@angular/core';
-import { Subscription, from, merge } from "rxjs";
-import { and, isNullOrEmptyString, observe, or } from '../utils';
+import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output, QueryList, ViewChildren, ChangeDetectorRef, NgZone, ViewChild, TemplateRef, Renderer2 } from '@angular/core';
+import { Subscription, from, fromEvent, merge } from "rxjs";
+import { and, isNullOrEmptyString, isUniversal, observe, or } from '../utils';
 import { GroupInfoService } from './group-info.service';
 import { DropTargetDirective } from '../dragdrop/drop-target.directive';
 import { DragHintService } from '../dragdrop/drag-hint.service';
 import { DropCueService } from '../dragdrop/drop-cue.service';
 import { position, isTargetBefore } from '../dragdrop/common';
 import { tap, filter, switchMapTo, takeUntil } from 'rxjs/operators';
-import { sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
+import { arrowLeftIcon, arrowRightIcon, sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
 import { ContextService } from '../common/provider.service';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { closest } from '../rendering/common/dom-queries';
+import { Keys } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 import * as i1 from "../dragdrop/drag-hint.service";
 import * as i2 from "../dragdrop/drop-cue.service";
 import * as i3 from "./group-info.service";
 import * as i4 from "../common/provider.service";
-import * as i5 from "@progress/kendo-angular-buttons";
-import * as i6 from "@angular/common";
-import * as i7 from "../dragdrop/drop-target.directive";
-import * as i8 from "../dragdrop/draggable-column.directive";
-import * as i9 from "@progress/kendo-angular-common";
+import * as i5 from "@progress/kendo-angular-popup";
+import * as i6 from "@progress/kendo-angular-buttons";
+import * as i7 from "@progress/kendo-angular-icons";
+import * as i8 from "@angular/common";
+import * as i9 from "../dragdrop/drop-target.directive";
+import * as i10 from "../dragdrop/draggable-column.directive";
+import * as i11 from "@progress/kendo-angular-common";
 const withoutField = ({ field }) => isNullOrEmptyString(field);
 const alreadyGrouped = ({ groups, field }) => groups.some(group => group.field === field);
 const overSameTarget = ({ target, field }) => target.field === field;
@@ -35,17 +40,53 @@ const indicatorRules = or(overSameTarget, and(overLastTarget, isLastGroup));
  * @hidden
  */
 export 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;
@@ -56,13 +97,17 @@ export class GroupPanelComponent {
     get text() {
         return this.emptyText ? this.emptyText : this.ctx.localization.get('groupPanelEmpty');
     }
+    get gridId() {
+        return this.ctx.grid?.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])) {
@@ -77,6 +122,7 @@ export class GroupPanelComponent {
         if (this.targetSubscription) {
             this.targetSubscription.unsubscribe();
         }
+        this.destroyMenu();
     }
     messageFor(token) {
         return this.ctx.localization.get(token);
@@ -106,6 +152,42 @@ export 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
@@ -128,7 +210,10 @@ export 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();
@@ -147,9 +232,47 @@ export 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: i1.DragHintService }, { token: i2.DropCueService }, { token: i3.GroupInfoService }, { token: i4.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: i1.DragHintService }, { token: i2.DropCueService }, { token: i3.GroupInfoService }, { token: i4.ContextService }, { token: i0.ChangeDetectorRef }, { token: i5.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"
@@ -166,7 +289,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
@@ -175,14 +299,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>
@@ -195,7 +326,31 @@ GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             }"
             kendoDropTarget
         >&nbsp;</div>
-    `, isInline: true, components: [{ type: i5.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size", "role", "navigable"], outputs: ["selectedChange", "remove"] }, { type: i5.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "removeSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i9.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: i6.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size", "role", "navigable"], outputs: ["selectedChange", "remove"] }, { type: i6.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: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i11.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i11.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: [{
@@ -218,7 +373,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
@@ -227,14 +383,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>
@@ -247,9 +410,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: i1.DragHintService }, { type: i2.DropCueService }, { type: i3.GroupInfoService }, { type: i4.ContextService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { change: [{
+        }], ctorParameters: function () { return [{ type: i1.DragHintService }, { type: i2.DropCueService }, { type: i3.GroupInfoService }, { type: i4.ContextService }, { type: i0.ChangeDetectorRef }, { type: i5.PopupService }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { change: [{
                 type: Output
             }], groupHeaderClass: [{
                 type: HostBinding,
@@ -263,4 +450,7 @@ 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 }]
             }] } });

package/esm2020/grouping/group.module.mjs

@@ -12,13 +12,14 @@ import { GroupPanelComponent } from './group-panel.component';
 import { SharedModule } from "../shared.module";
 import { DragAndDropModule } from '../dragdrop/drag-and-drop.module';
 import { ChipModule } from '@progress/kendo-angular-buttons';
+import { PopupModule } from '@progress/kendo-angular-popup';
 import * as i0 from "@angular/core";
 const exportedModules = [
     GroupHeaderTemplateDirective,
     GroupHeaderColumnTemplateDirective,
     GroupFooterTemplateDirective,
     GroupHeaderComponent,
-    GroupPanelComponent
+    GroupPanelComponent,
 ];
 /**
  * @hidden
@@ -37,17 +38,17 @@ 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],
+                    declarations: [...exportedModules],
                     exports: [exportedModules],
-                    imports: [CommonModule, SharedModule, DragAndDropModule, ChipModule]
+                    imports: [CommonModule, SharedModule, DragAndDropModule, ChipModule, PopupModule]
                 }]
         }] });

package/esm2020/localization/messages.mjs

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 export 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: [{
@@ -180,4 +180,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], columnMenuColumnsTabTitle: [{
                 type: Input
+            }], groupChipMenuPrevious: [{
+                type: Input
+            }], groupChipMenuNext: [{
+                type: Input
             }] } });

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1699436265,
-    version: '14.1.0-develop.9',
+    publishDate: 1699865049,
+    version: '14.1.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/pager/pager.component.mjs

@@ -154,21 +154,25 @@ export class PagerComponent {
         }
     }
     navigateToPreviousPage(e) {
+        e.preventDefault();
         if (this.shouldTriggerPageChange(e.target, this.currentPage > 1)) {
             this.pagerContext.prevPage();
         }
     }
     navigateToNextPage(e) {
+        e.preventDefault();
         if (this.shouldTriggerPageChange(e.target, this.currentPage < this.totalPages)) {
             this.pagerContext.nextPage();
         }
     }
     navigateToFirstPage(e) {
+        e.preventDefault();
         if (this.shouldTriggerPageChange(e.target, this.currentPage > 1)) {
             this.pagerContext.changePage(0);
         }
     }
     navigateToLastPage(e) {
+        e.preventDefault();
         if (this.shouldTriggerPageChange(e.target, this.currentPage < this.totalPages)) {
             this.pagerContext.changePage(this.totalPages - 1);
         }