@progress/kendo-angular-grid 21.1.1-develop.2 → 21.2.0-develop.10

package/esm2022/grouping/group-header.component.mjs

@@ -12,7 +12,7 @@ import { caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon } from '@progress
 import { FieldAccessorPipe } from '../rendering/common/field-accessor.pipe';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { LogicalCellDirective } from '../navigation/logical-cell.directive';
-import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { TemplateContextDirective } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 import * as i1 from "./groups.service";
@@ -118,13 +118,16 @@ export class GroupHeaderComponent {
         return this.ctx.grid?.isStacked;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GroupHeaderComponent, deps: [{ token: i1.GroupsService }, { token: i2.GroupInfoService }, { token: i3.ContextService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: GroupHeaderComponent, isStandalone: true, selector: "[kendoGridGroupHeader]", inputs: { rowIndex: "rowIndex", logicalRowIndex: "logicalRowIndex", item: "item", skipGroupDecoration: "skipGroupDecoration", hasDetails: "hasDetails", totalColumnsCount: "totalColumnsCount", hasGroupHeaderColumn: "hasGroupHeaderColumn", groupHeaderColumns: "groupHeaderColumns", columns: "columns", groups: "groups" }, host: { properties: { "class.k-grouping-row": "this.groupItemClass", "class.k-table-group-row": "this.tableGroupRowClass" } }, ngImport: i0, template: `
-        <ng-container *ngIf="!skipGroupDecoration">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GroupHeaderComponent, isStandalone: true, selector: "[kendoGridGroupHeader]", inputs: { rowIndex: "rowIndex", logicalRowIndex: "logicalRowIndex", item: "item", skipGroupDecoration: "skipGroupDecoration", hasDetails: "hasDetails", totalColumnsCount: "totalColumnsCount", hasGroupHeaderColumn: "hasGroupHeaderColumn", groupHeaderColumns: "groupHeaderColumns", columns: "columns", groups: "groups" }, host: { properties: { "class.k-grouping-row": "this.groupItemClass", "class.k-table-group-row": "this.tableGroupRowClass" } }, ngImport: i0, template: `
+        @if (!skipGroupDecoration) {
+          @for (g of prefixGroupCell(item); track $index) {
             <td class="k-group-cell k-table-td k-table-group-td"
-                role="presentation"
-                *ngFor="let g of prefixGroupCell(item)"></td>
-        </ng-container>
-        <td [attr.colspan]="groupSpan(item)" *ngIf="!(skipGroupDecoration && hasGroupHeaderColumn)"
+              role="presentation"
+            ></td>
+          }
+        }
+        @if (!(skipGroupDecoration && hasGroupHeaderColumn)) {
+          <td [attr.colspan]="groupSpan(item)"
             [attr.role]="ariaRole()"
             aria-selected="false"
             class="k-table-td"
@@ -136,19 +139,19 @@ export class GroupHeaderComponent {
             [groupItem]="item"
             [colSpan]="logicalColSpan()">
             <p class="k-reset">
-                <ng-container *ngIf="!skipGroupDecoration">
-                    <a href="#" tabindex="-1" (click)="toggleGroup(item, $event)"
-                        role="presentation"
-                        [attr.title]="groupButtonTitle"
-                        [attr.aria-label]="groupButtonTitle">
-                        <kendo-icon-wrapper
-                            [name]="arrowIcon"
-                            [svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
-                    </a>
-                    <ng-container *ngIf="!groupHeaderTemplate(item)">
-                        {{groupTitle(item)}}: {{item.data | valueOf:"value": formatForGroup(item)}}
-                    </ng-container>
-                    <ng-template
+              @if (!skipGroupDecoration) {
+                <a href="#" tabindex="-1" (click)="toggleGroup(item, $event)"
+                  role="presentation"
+                  [attr.title]="groupButtonTitle"
+                  [attr.aria-label]="groupButtonTitle">
+                  <kendo-icon-wrapper
+                    [name]="arrowIcon"
+                  [svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
+                </a>
+                @if (!groupHeaderTemplate(item)) {
+                  {{groupTitle(item)}}: {{item.data | valueOf:"value": formatForGroup(item)}}
+                }
+                <ng-template
                         [templateContext]="{
                             templateRef: groupHeaderTemplate(item),
                             group: item.data,
@@ -159,13 +162,15 @@ export class GroupHeaderComponent {
                             expanded: isExpanded,
                             $implicit: item.data
                             }">
-                    </ng-template>
-                </ng-container>
+                </ng-template>
+              }
             </p>
-            <div class="k-grid-column-template" *ngIf="isStacked">
-                <ng-container *ngFor="let column of groupHeaderColumns; let index = index">
-                    <div class="k-column-template-item" *ngIf="column.groupHeaderColumnTemplateRef">
-                        <ng-template [ngTemplateOutlet]="column.groupHeaderColumnTemplateRef"
+            @if (isStacked) {
+              <div class="k-grid-column-template">
+                @for (column of groupHeaderColumns; track column; let index = $index) {
+                  @if (column.groupHeaderColumnTemplateRef) {
+                    <div class="k-column-template-item">
+                      <ng-template [ngTemplateOutlet]="column.groupHeaderColumnTemplateRef"
                             [ngTemplateOutletContext]="{
                                 group: item.data,
                                 aggregates: item.data?.aggregates,
@@ -174,24 +179,29 @@ export class GroupHeaderComponent {
                                 index: item.index,
                                 $implicit: item.data
                                 }">
-                        </ng-template>
+                      </ng-template>
                     </div>
-                </ng-container>
-            </div>
-        </td>
-        <ng-container *ngIf="hasGroupHeaderColumn && !isStacked">
-            <td *ngFor="let column of groupHeaderColumns; let index = index"
-                role="gridcell"
-                class="k-table-td"
-                aria-selected="false"
-                kendoGridLogicalCell
-                [logicalRowIndex]="logicalRowIndex"
-                [logicalColIndex]="index + 1"
-                [logicalSlaveCell]="false"
-                [groupItem]="item"
-                [colSpan]="1"
-            >
-                <ng-template *ngIf="column.groupHeaderColumnTemplateRef" [ngTemplateOutlet]="column.groupHeaderColumnTemplateRef"
+                  }
+                }
+              </div>
+            }
+          </td>
+        }
+        @if (hasGroupHeaderColumn && !isStacked) {
+          @for (column of groupHeaderColumns; track column; let index = $index) {
+            <td
+              role="gridcell"
+              class="k-table-td"
+              aria-selected="false"
+              kendoGridLogicalCell
+              [logicalRowIndex]="logicalRowIndex"
+              [logicalColIndex]="index + 1"
+              [logicalSlaveCell]="false"
+              [groupItem]="item"
+              [colSpan]="1"
+              >
+              @if (column.groupHeaderColumnTemplateRef) {
+                <ng-template [ngTemplateOutlet]="column.groupHeaderColumnTemplateRef"
                     [ngTemplateOutletContext]="{
                         group: item.data,
                         aggregates: item.data?.aggregates,
@@ -201,21 +211,26 @@ export class GroupHeaderComponent {
                         $implicit: item.data
                         }">
                 </ng-template>
+              }
             </td>
-        </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: FieldAccessorPipe, name: "valueOf" }] });
+          }
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: FieldAccessorPipe, name: "valueOf" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GroupHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoGridGroupHeader]',
                     template: `
-        <ng-container *ngIf="!skipGroupDecoration">
+        @if (!skipGroupDecoration) {
+          @for (g of prefixGroupCell(item); track $index) {
             <td class="k-group-cell k-table-td k-table-group-td"
-                role="presentation"
-                *ngFor="let g of prefixGroupCell(item)"></td>
-        </ng-container>
-        <td [attr.colspan]="groupSpan(item)" *ngIf="!(skipGroupDecoration && hasGroupHeaderColumn)"
+              role="presentation"
+            ></td>
+          }
+        }
+        @if (!(skipGroupDecoration && hasGroupHeaderColumn)) {
+          <td [attr.colspan]="groupSpan(item)"
             [attr.role]="ariaRole()"
             aria-selected="false"
             class="k-table-td"
@@ -227,19 +242,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [groupItem]="item"
             [colSpan]="logicalColSpan()">
             <p class="k-reset">
-                <ng-container *ngIf="!skipGroupDecoration">
-                    <a href="#" tabindex="-1" (click)="toggleGroup(item, $event)"
-                        role="presentation"
-                        [attr.title]="groupButtonTitle"
-                        [attr.aria-label]="groupButtonTitle">
-                        <kendo-icon-wrapper
-                            [name]="arrowIcon"
-                            [svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
-                    </a>
-                    <ng-container *ngIf="!groupHeaderTemplate(item)">
-                        {{groupTitle(item)}}: {{item.data | valueOf:"value": formatForGroup(item)}}
-                    </ng-container>
-                    <ng-template
+              @if (!skipGroupDecoration) {
+                <a href="#" tabindex="-1" (click)="toggleGroup(item, $event)"
+                  role="presentation"
+                  [attr.title]="groupButtonTitle"
+                  [attr.aria-label]="groupButtonTitle">
+                  <kendo-icon-wrapper
+                    [name]="arrowIcon"
+                  [svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
+                </a>
+                @if (!groupHeaderTemplate(item)) {
+                  {{groupTitle(item)}}: {{item.data | valueOf:"value": formatForGroup(item)}}
+                }
+                <ng-template
                         [templateContext]="{
                             templateRef: groupHeaderTemplate(item),
                             group: item.data,
@@ -250,13 +265,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             expanded: isExpanded,
                             $implicit: item.data
                             }">
-                    </ng-template>
-                </ng-container>
+                </ng-template>
+              }
             </p>
-            <div class="k-grid-column-template" *ngIf="isStacked">
-                <ng-container *ngFor="let column of groupHeaderColumns; let index = index">
-                    <div class="k-column-template-item" *ngIf="column.groupHeaderColumnTemplateRef">
-                        <ng-template [ngTemplateOutlet]="column.groupHeaderColumnTemplateRef"
+            @if (isStacked) {
+              <div class="k-grid-column-template">
+                @for (column of groupHeaderColumns; track column; let index = $index) {
+                  @if (column.groupHeaderColumnTemplateRef) {
+                    <div class="k-column-template-item">
+                      <ng-template [ngTemplateOutlet]="column.groupHeaderColumnTemplateRef"
                             [ngTemplateOutletContext]="{
                                 group: item.data,
                                 aggregates: item.data?.aggregates,
@@ -265,24 +282,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                                 index: item.index,
                                 $implicit: item.data
                                 }">
-                        </ng-template>
+                      </ng-template>
                     </div>
-                </ng-container>
-            </div>
-        </td>
-        <ng-container *ngIf="hasGroupHeaderColumn && !isStacked">
-            <td *ngFor="let column of groupHeaderColumns; let index = index"
-                role="gridcell"
-                class="k-table-td"
-                aria-selected="false"
-                kendoGridLogicalCell
-                [logicalRowIndex]="logicalRowIndex"
-                [logicalColIndex]="index + 1"
-                [logicalSlaveCell]="false"
-                [groupItem]="item"
-                [colSpan]="1"
-            >
-                <ng-template *ngIf="column.groupHeaderColumnTemplateRef" [ngTemplateOutlet]="column.groupHeaderColumnTemplateRef"
+                  }
+                }
+              </div>
+            }
+          </td>
+        }
+        @if (hasGroupHeaderColumn && !isStacked) {
+          @for (column of groupHeaderColumns; track column; let index = $index) {
+            <td
+              role="gridcell"
+              class="k-table-td"
+              aria-selected="false"
+              kendoGridLogicalCell
+              [logicalRowIndex]="logicalRowIndex"
+              [logicalColIndex]="index + 1"
+              [logicalSlaveCell]="false"
+              [groupItem]="item"
+              [colSpan]="1"
+              >
+              @if (column.groupHeaderColumnTemplateRef) {
+                <ng-template [ngTemplateOutlet]="column.groupHeaderColumnTemplateRef"
                     [ngTemplateOutletContext]="{
                         group: item.data,
                         aggregates: item.data?.aggregates,
@@ -292,11 +314,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         $implicit: item.data
                         }">
                 </ng-template>
+              }
             </td>
-        </ng-container>
-    `,
+          }
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, NgFor, LogicalCellDirective, IconWrapperComponent, TemplateContextDirective, NgTemplateOutlet, FieldAccessorPipe]
+                    imports: [LogicalCellDirective, IconWrapperComponent, TemplateContextDirective, NgTemplateOutlet, FieldAccessorPipe]
                 }]
         }], ctorParameters: () => [{ type: i1.GroupsService }, { type: i2.GroupInfoService }, { type: i3.ContextService }], propDecorators: { rowIndex: [{
                 type: Input

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

@@ -16,10 +16,9 @@ import { ContextService } from '../common/provider.service';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { ChipComponent, ChipListComponent } from '@progress/kendo-angular-buttons';
 import { closest } from '../rendering/common/dom-queries';
-import { DraggableDirective, EventsOutsideAngularDirective, Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
+import { DraggableDirective, EventsOutsideAngularDirective, Keys, normalizeKeys } from '@progress/kendo-angular-common';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { DraggableColumnDirective } from '../dragdrop/draggable-column.directive';
-import { NgIf, NgFor } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "../dragdrop/drag-hint.service";
 import * as i2 from "../dragdrop/drop-cue.service";
@@ -176,7 +175,7 @@ export class GroupPanelComponent {
         });
     }
     handleKeyDown = (e) => {
-        const code = normalizeNumpadKeys(e);
+        const code = normalizeKeys(e);
         if (code === Keys.ArrowDown || code === Keys.ArrowUp) {
             e.preventDefault();
             const relatedItemType = e.target.matches(':first-child') ? 'next' : 'previous';
@@ -289,26 +288,27 @@ export class GroupPanelComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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 });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: GroupPanelComponent, isStandalone: true, 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"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GroupPanelComponent, isStandalone: true, 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: `
+        @if (groups.length === 0) {
+          <div
             class="k-grouping-drop-container"
             [context]="{
                 lastTarget: true
             }"
             kendoDropTarget
-        >
+            >
             {{ text }}
-        </div>
-
-        <kendo-chiplist
-            *ngIf="groups.length !== 0"
+          </div>
+        }
+        
+        @if (groups.length !== 0) {
+          <kendo-chiplist
             [navigable]="navigable"
             role="none"
             [orientation]="null"
-        >
-            <kendo-chip
-                *ngFor="let group of groups; let index = index; let first = first; let last = last;"
+            >
+            @for (group of groups; track group; let index = $index; let first = $first; let last = $last) {
+              <kendo-chip
                 #chip
                 kendoDropTarget
                 kendoDraggableColumn
@@ -333,43 +333,46 @@ export class GroupPanelComponent {
                 (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>
-
-        <div
-            *ngIf="groups.length !== 0"
+                >
+              </kendo-chip>
+            }
+          </kendo-chiplist>
+        }
+        
+        @if (groups.length !== 0) {
+          <div
             class="k-grouping-drop-container"
             [context]="{
                 lastTarget: true
             }"
             kendoDropTarget
-        >&nbsp;</div>
-
+          >&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>
+            <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, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "component", type: ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["orientation", "selection", "size", "role", "navigable"], outputs: ["selectedChange", "remove"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarSettings", "selected", "removable", "removeIcon", "removeSvgIcon", "hasMenu", "menuIcon", "menuSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "menuToggle", "contentClick"] }, { kind: "directive", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        `, isInline: true, dependencies: [{ kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "component", type: ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["orientation", "selection", "size", "role", "navigable"], outputs: ["selectedChange", "remove"] }, { kind: "component", type: ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarSettings", "selected", "removable", "removeIcon", "removeSvgIcon", "hasMenu", "menuIcon", "menuSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "menuToggle", "contentClick"] }, { kind: "directive", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GroupPanelComponent, decorators: [{
             type: Component,
@@ -377,25 +380,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-grid-group-panel',
                     template: `
-        <div
-            *ngIf="groups.length === 0"
+        @if (groups.length === 0) {
+          <div
             class="k-grouping-drop-container"
             [context]="{
                 lastTarget: true
             }"
             kendoDropTarget
-        >
+            >
             {{ text }}
-        </div>
-
-        <kendo-chiplist
-            *ngIf="groups.length !== 0"
+          </div>
+        }
+        
+        @if (groups.length !== 0) {
+          <kendo-chiplist
             [navigable]="navigable"
             role="none"
             [orientation]="null"
-        >
-            <kendo-chip
-                *ngFor="let group of groups; let index = index; let first = first; let last = last;"
+            >
+            @for (group of groups; track group; let index = $index; let first = $first; let last = $last) {
+              <kendo-chip
                 #chip
                 kendoDropTarget
                 kendoDraggableColumn
@@ -420,45 +424,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 (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>
-
-        <div
-            *ngIf="groups.length !== 0"
+                >
+              </kendo-chip>
+            }
+          </kendo-chiplist>
+        }
+        
+        @if (groups.length !== 0) {
+          <div
             class="k-grouping-drop-container"
             [context]="{
                 lastTarget: true
             }"
             kendoDropTarget
-        >&nbsp;</div>
-
+          >&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>
+            <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>
-    `,
+        `,
                     standalone: true,
-                    imports: [NgIf, DropTargetDirective, ChipListComponent, NgFor, ChipComponent, DraggableColumnDirective, DraggableDirective, EventsOutsideAngularDirective, IconWrapperComponent]
+                    imports: [DropTargetDirective, ChipListComponent, ChipComponent, DraggableColumnDirective, DraggableDirective, EventsOutsideAngularDirective, IconWrapperComponent]
                 }]
         }], ctorParameters: () => [{ 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

package/esm2022/index.mjs

@@ -218,3 +218,4 @@ export { GridTableDirective } from './rendering/grid-table.directive';
 // Needed as it is an optional injection of the FilterService
 export { MenuTabbingService } from './filtering/menu/menu-tabbing.service';
 export * from './rendering/toolbar/tools/ai-assistant/models';
+export { AdaptiveGridService } from './common/adaptiveness.service';

package/esm2022/navigation/navigation.service.mjs

@@ -11,7 +11,7 @@ import { GridFocusableElement } from './grid-focusable-element';
 import { NavigationCursor } from './navigation-cursor';
 import { NavigationModel } from './navigation-model';
 import { DomEventsService } from '../common/dom-events.service';
-import { hasClasses, isDocumentAvailable, isPresent, Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
+import { hasClasses, isDocumentAvailable, isPresent, Keys, normalizeKeys } from '@progress/kendo-angular-common';
 import { EditService } from '../editing/edit.service';
 import { GroupsService } from '../grouping/groups.service';
 import { PagerContextService } from '@progress/kendo-angular-pager';
@@ -510,7 +510,7 @@ export class NavigationService {
         }
         const row = this.cursor.row;
         // on some keyboards arrow keys, PageUp/Down, and Home/End are mapped to Numpad keys
-        const code = normalizeNumpadKeys(args);
+        const code = normalizeKeys(args);
         // Handle row reordering keyboard shortcuts (Ctrl/Cmd + Shift + Up/Down Arrow)
         if (modifier && args.shiftKey && (code === Keys.ArrowUp || code === Keys.ArrowDown)) {
             if (this.handleRowReorderKeyboard(args, code, row)) {
@@ -704,7 +704,7 @@ export class NavigationService {
             return;
         }
         // on some keyboards arrow keys, PageUp/Down, and Home/End are mapped to Numpad keys
-        const code = normalizeNumpadKeys(args);
+        const code = normalizeKeys(args);
         const confirm = !args.defaultPrevented && code === Keys.Enter && isTextInput(args.target);
         if (code === Keys.Escape || code === Keys.F2 || confirm) {
             if (this.tableCellEntered && code === Keys.F2 && this.activeRow.dataRowIndex > -1) {
@@ -728,7 +728,7 @@ export class NavigationService {
     onCellKeydown(args) {
         if (this.editService.isEditingCell()) {
             // on some keyboards arrow keys, PageUp/Down, and Home/End are mapped to Numpad keys
-            const code = normalizeNumpadKeys(args);
+            const code = normalizeKeys(args);
             const confirm = code === Keys.Enter;
             const cancel = code === Keys.Escape;
             const navigate = isNavigationKey(code);

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1763729253,
-    version: '21.1.1-develop.2',
+    publishDate: 1764593065,
+    version: '21.2.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };