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

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

@@ -19,7 +19,6 @@ import { closest } from '../rendering/common/dom-queries';
 import { DraggableDirective, EventsOutsideAngularDirective, Keys, normalizeNumpadKeys } 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";
@@ -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/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: 1764002331,
+    version: '21.2.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/pdf/pdf-command.directive.mjs

@@ -7,7 +7,7 @@ import { Button } from '@progress/kendo-angular-buttons';
 import { ContextService } from '../common/provider.service';
 import { PDFService } from './pdf.service';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
-import { NgIf, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "./pdf.service";
 import * as i2 from "../common/provider.service";
@@ -47,37 +47,47 @@ export class PDFCommandDirective extends Button {
         this.ngZone = ngZone;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PDFCommandDirective, deps: [{ token: i1.PDFService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.ContextService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PDFCommandDirective, isStandalone: true, selector: "[kendoGridPDFCommand]", host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-grid-pdf": "this.pdfClass" } }, usesInheritance: true, ngImport: i0, template: `
-        <kendo-icon-wrapper
-            *ngIf="icon || svgIcon"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PDFCommandDirective, isStandalone: true, selector: "[kendoGridPDFCommand]", host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-grid-pdf": "this.pdfClass" } }, usesInheritance: true, ngImport: i0, template: `
+        @if (icon || svgIcon) {
+          <kendo-icon-wrapper
             innerCssClass="k-button-icon"
             [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        <span *ngIf="imageUrl" class="k-button-icon k-icon">
+          [svgIcon]="svgIcon"></kendo-icon-wrapper>
+        }
+        @if (imageUrl) {
+          <span class="k-button-icon k-icon">
             <img [src]="imageUrl" class="k-image" role="presentation" />
-        </span>
-        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
+          </span>
+        }
+        @if (iconClass) {
+          <span class="k-button-icon" [ngClass]="iconClass"></span>
+        }
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PDFCommandDirective, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoGridPDFCommand]',
                     template: `
-        <kendo-icon-wrapper
-            *ngIf="icon || svgIcon"
+        @if (icon || svgIcon) {
+          <kendo-icon-wrapper
             innerCssClass="k-button-icon"
             [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        <span *ngIf="imageUrl" class="k-button-icon k-icon">
+          [svgIcon]="svgIcon"></kendo-icon-wrapper>
+        }
+        @if (imageUrl) {
+          <span class="k-button-icon k-icon">
             <img [src]="imageUrl" class="k-image" role="presentation" />
-        </span>
-        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
+          </span>
+        }
+        @if (iconClass) {
+          <span class="k-button-icon" [ngClass]="iconClass"></span>
+        }
         <span class="k-button-text"><ng-content></ng-content></span>
-    `,
+        `,
                     standalone: true,
-                    imports: [NgIf, IconWrapperComponent, NgClass]
+                    imports: [IconWrapperComponent, NgClass]
                 }]
         }], ctorParameters: () => [{ type: i1.PDFService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.ContextService }, { type: i0.NgZone }], propDecorators: { onClick: [{
                 type: HostListener,