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

package/esm2022/rendering/common/col-group.component.mjs

@@ -7,7 +7,6 @@ import { DetailTemplateDirective } from '../details/detail-template.directive';
 import { ColumnBase } from "../../columns/column-base";
 import { columnsToRender } from '../../columns/column-common';
 import { isNullOrEmptyString, isTruthy } from '../../utils';
-import { NgFor, NgIf } from '@angular/common';
 import { ContextService } from '../../common/provider.service';
 import { isPresent } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
@@ -51,15 +50,21 @@ export class ColGroupComponent {
         return this.sort.find(item => item.field === field) || { field };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColGroupComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ColGroupComponent, isStandalone: true, selector: "[kendoGridColGroup]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", sort: "sort" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ColGroupComponent, isStandalone: true, selector: "[kendoGridColGroup]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", sort: "sort" }, ngImport: i0, template: `
     <ng-container>
-        <col [class.k-group-col]="true" *ngFor="let g of groups" />
-        <col [class.k-hierarchy-col]="true" *ngIf="detailTemplate?.templateRef && !isStacked"/>
-        <col *ngFor="let column of columnsToRender; trackBy: trackBy;"
-            [style.width]="getColumnWidth(column)"
-            [class.k-sorted]="isSorted(getColumnComponent(column))"/>
+      @for (g of groups; track g) {
+        <col [class.k-group-col]="true" />
+      }
+      @if (detailTemplate?.templateRef && !isStacked) {
+        <col [class.k-hierarchy-col]="true"/>
+      }
+      @for (column of columnsToRender; track $index) {
+        <col
+          [style.width]="getColumnWidth(column)"
+          [class.k-sorted]="isSorted(getColumnComponent(column))"/>
+      }
     </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColGroupComponent, decorators: [{
             type: Component,
@@ -67,15 +72,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: '[kendoGridColGroup]',
                     template: `
     <ng-container>
-        <col [class.k-group-col]="true" *ngFor="let g of groups" />
-        <col [class.k-hierarchy-col]="true" *ngIf="detailTemplate?.templateRef && !isStacked"/>
-        <col *ngFor="let column of columnsToRender; trackBy: trackBy;"
-            [style.width]="getColumnWidth(column)"
-            [class.k-sorted]="isSorted(getColumnComponent(column))"/>
+      @for (g of groups; track g) {
+        <col [class.k-group-col]="true" />
+      }
+      @if (detailTemplate?.templateRef && !isStacked) {
+        <col [class.k-hierarchy-col]="true"/>
+      }
+      @for (column of columnsToRender; track $index) {
+        <col
+          [style.width]="getColumnWidth(column)"
+          [class.k-sorted]="isSorted(getColumnComponent(column))"/>
+      }
     </ng-container>
     `,
-                    standalone: true,
-                    imports: [NgFor, NgIf]
+                    standalone: true
                 }]
         }], ctorParameters: () => [{ type: i1.ContextService }], propDecorators: { columns: [{
                 type: Input

package/esm2022/rendering/common/loading.component.mjs

@@ -5,7 +5,7 @@
 import { Component, HostBinding, Input } from '@angular/core';
 import { ContextService } from '../../common/provider.service';
 import { LoadingTemplateDirective } from '../loading-template.directive';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "../../common/provider.service";
 /**
@@ -22,31 +22,35 @@ export class LoadingComponent {
         this.ctx = ctx;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LoadingComponent, isStandalone: true, selector: "[kendoGridLoading]", inputs: { loadingTemplate: "loadingTemplate" }, host: { properties: { "class.k-loading-mask": "this.hostClass" } }, ngImport: i0, template: `
-        <ng-container *ngIf="!loadingTemplate">
-            <span class="k-loading-text">{{ loadingText }}</span>
-            <div class="k-loading-image"></div>
-            <div class="k-loading-color"></div>
-        </ng-container>
-        <ng-template *ngIf="loadingTemplate" [ngTemplateOutlet]="loadingTemplate?.templateRef">
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LoadingComponent, isStandalone: true, selector: "[kendoGridLoading]", inputs: { loadingTemplate: "loadingTemplate" }, host: { properties: { "class.k-loading-mask": "this.hostClass" } }, ngImport: i0, template: `
+        @if (!loadingTemplate) {
+          <span class="k-loading-text">{{ loadingText }}</span>
+          <div class="k-loading-image"></div>
+          <div class="k-loading-color"></div>
+        }
+        @if (loadingTemplate) {
+          <ng-template [ngTemplateOutlet]="loadingTemplate?.templateRef">
+          </ng-template>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoGridLoading]',
                     template: `
-        <ng-container *ngIf="!loadingTemplate">
-            <span class="k-loading-text">{{ loadingText }}</span>
-            <div class="k-loading-image"></div>
-            <div class="k-loading-color"></div>
-        </ng-container>
-        <ng-template *ngIf="loadingTemplate" [ngTemplateOutlet]="loadingTemplate?.templateRef">
-        </ng-template>
-    `,
+        @if (!loadingTemplate) {
+          <span class="k-loading-text">{{ loadingText }}</span>
+          <div class="k-loading-image"></div>
+          <div class="k-loading-color"></div>
+        }
+        @if (loadingTemplate) {
+          <ng-template [ngTemplateOutlet]="loadingTemplate?.templateRef">
+          </ng-template>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, NgTemplateOutlet]
+                    imports: [NgTemplateOutlet]
                 }]
         }], ctorParameters: () => [{ type: i1.ContextService }], propDecorators: { hostClass: [{
                 type: HostBinding,

package/esm2022/rendering/details/detail-template.directive.mjs

@@ -14,10 +14,12 @@ import * as i0 from "@angular/core";
  * <kendo-grid [data]="data" selectable="true" style="height: 160px">
  *    <kendo-grid-column field="ProductName"></kendo-grid-column>
  *    <ng-template kendoGridDetailTemplate let-dataItem>
- *       <div *ngIf="dataItem.Category">
- *          <header>{{dataItem.Category?.CategoryName}}</header>
- *          span>{{dataItem.Category?.Description}}</span>
- *       </div>
+ *       @if (dataItem.Category) {
+ *         <div>
+ *            <header>{{dataItem.Category?.CategoryName}}</header>
+ *            <span>{{dataItem.Category?.Description}}</span>
+ *         </div>
+ *       }
  *    </ng-template>
  * </kendo-grid>
  * ```

package/esm2022/rendering/footer/footer.component.mjs

@@ -10,7 +10,7 @@ import { isPresent } from '../../utils';
 import { ColumnsContainer } from '../../columns/columns-container';
 import { isColumnGroupComponent } from '../../columns/column-group.component';
 import { LogicalCellDirective } from '../../navigation/logical-cell.directive';
-import { NgFor, NgIf, NgClass, NgStyle } from '@angular/common';
+import { NgClass, NgStyle } from '@angular/common';
 import { LogicalRowDirective } from '../../navigation/logical-row.directive';
 import { TemplateContextDirective } from '@progress/kendo-angular-common';
 import { ContextService } from '../../common/provider.service';
@@ -68,79 +68,87 @@ export class FooterComponent {
         return this.ctx.grid?.isStacked;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FooterComponent, deps: [{ token: i1.ColumnInfoService }, { token: i2.ContextService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FooterComponent, isStandalone: true, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex", totalColumns: "totalColumns", totalColumnsCount: "totalColumnsCount" }, host: { properties: { "class.k-grid-footer": "this.footerClass", "class.k-table-tfoot": "this.hostClass", "attr.role": "this.hostRole" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FooterComponent, isStandalone: true, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex", totalColumns: "totalColumns", totalColumnsCount: "totalColumnsCount" }, host: { properties: { "class.k-grid-footer": "this.footerClass", "class.k-table-tfoot": "this.hostClass", "attr.role": "this.hostRole" } }, ngImport: i0, template: `
     <ng-container>
-        <tr
-            class="k-footer-template"
-            kendoGridLogicalRow
-                [logicalRowIndex]="logicalRowIndex"
-                [logicalSlaveRow]="lockedColumnsCount > 0 && !isStacked"
-                [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount"
-                [totalColumns]="totalColumns"
-            >
-            <ng-container *ngIf="!isStacked">
-                <td
-                    class="k-table-td k-group-cell k-table-group-td"
-                    role="presentation"
-                    *ngFor="let g of groups">
-                </td>
-            </ng-container>
+      <tr
+        class="k-footer-template"
+        kendoGridLogicalRow
+        [logicalRowIndex]="logicalRowIndex"
+        [logicalSlaveRow]="lockedColumnsCount > 0 && !isStacked"
+        [logicalCellsCount]="columns.length"
+        [logicalSlaveCellsCount]="unlockedColumnsCount"
+        [totalColumns]="totalColumns"
+        >
+        @if (!isStacked) {
+          @for (g of groups; track g) {
             <td
-                role="presentation"
-                class="k-table-td k-hierarchy-cell"
-                *ngIf="detailTemplate?.templateRef && !isStacked">
+              class="k-table-td k-group-cell k-table-group-td"
+              role="presentation"
+              >
             </td>
-            <ng-container *ngIf="!isStacked">
-                <ng-container *ngFor="let column of columnsToRender; let columnIndex = index; trackBy: trackByIndex;">
-                    <td *ngIf="!isColumnGroupComponent(column)"
-                        kendoGridLogicalCell
-                        class="k-table-td"
-                            [logicalRowIndex]="logicalRowIndex"
-                            [logicalColIndex]="logicalColumnIndex(column)"
-                            role="gridcell"
-                            aria-selected="false"
-                        [class.k-grid-footer-sticky]="column.sticky"
-                        [ngClass]="column.footerClass"
-                        [ngStyle]="column.sticky ? addStickyStyles(column) : column.footerStyle">
-                        <ng-template
+          }
+        }
+        @if (detailTemplate?.templateRef && !isStacked) {
+          <td
+            role="presentation"
+            class="k-table-td k-hierarchy-cell"
+            >
+          </td>
+        }
+        @if (!isStacked) {
+          @for (column of columnsToRender; track $index; let columnIndex = $index) {
+            @if (!isColumnGroupComponent(column)) {
+              <td
+                kendoGridLogicalCell
+                class="k-table-td"
+                [logicalRowIndex]="logicalRowIndex"
+                [logicalColIndex]="logicalColumnIndex(column)"
+                role="gridcell"
+                aria-selected="false"
+                [class.k-grid-footer-sticky]="column.sticky"
+                [ngClass]="column.footerClass"
+                [ngStyle]="column.sticky ? addStickyStyles(column) : column.footerStyle">
+                <ng-template
                             [templateContext]="{
                                 templateRef: column.footerTemplateRef,
                                 columnIndex: column.leafIndex,
                                 column: column,
                                 $implicit: column
                             }">
-                        </ng-template>
-                    </td>
-                </ng-container>
-            </ng-container>
+                </ng-template>
+              </td>
+            }
+          }
+        }
 
-            <ng-container *ngIf="isStacked">
-                <td kendoGridLogicalCell
-                    class="k-table-td"
-                    [logicalRowIndex]="logicalRowIndex"
-                    [logicalColIndex]="detailTemplate ? 1 : 0"
-                    role="gridcell"
-                    aria-selected="false">
-                    <div class="k-grid-column-template">
-                        <ng-container *ngFor="let column of columnsToRender; trackBy: trackByIndex;">
-                            <div class="k-column-template-item" *ngIf="column.footerTemplateRef">
-                                <ng-template
+        @if (isStacked) {
+          <td kendoGridLogicalCell
+            class="k-table-td"
+            [logicalRowIndex]="logicalRowIndex"
+            [logicalColIndex]="detailTemplate ? 1 : 0"
+            role="gridcell"
+            aria-selected="false">
+            <div class="k-grid-column-template">
+              @for (column of columnsToRender; track $index) {
+                @if (column.footerTemplateRef) {
+                  <div class="k-column-template-item">
+                    <ng-template
                                     [templateContext]="{
                                         templateRef: column.footerTemplateRef,
                                         columnIndex: column.leafIndex,
                                         column: column,
                                         $implicit: column
                                     }">
-                                </ng-template>
-                            </div>
-                        </ng-container>
-                    </div>
-                </td>
-            </ng-container>
-        </tr>
+                    </ng-template>
+                  </div>
+                }
+              }
+            </div>
+          </td>
+        }
+      </tr>
     </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FooterComponent, decorators: [{
             type: Component,
@@ -148,79 +156,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: '[kendoGridFooter]',
                     template: `
     <ng-container>
-        <tr
-            class="k-footer-template"
-            kendoGridLogicalRow
-                [logicalRowIndex]="logicalRowIndex"
-                [logicalSlaveRow]="lockedColumnsCount > 0 && !isStacked"
-                [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount"
-                [totalColumns]="totalColumns"
-            >
-            <ng-container *ngIf="!isStacked">
-                <td
-                    class="k-table-td k-group-cell k-table-group-td"
-                    role="presentation"
-                    *ngFor="let g of groups">
-                </td>
-            </ng-container>
+      <tr
+        class="k-footer-template"
+        kendoGridLogicalRow
+        [logicalRowIndex]="logicalRowIndex"
+        [logicalSlaveRow]="lockedColumnsCount > 0 && !isStacked"
+        [logicalCellsCount]="columns.length"
+        [logicalSlaveCellsCount]="unlockedColumnsCount"
+        [totalColumns]="totalColumns"
+        >
+        @if (!isStacked) {
+          @for (g of groups; track g) {
             <td
-                role="presentation"
-                class="k-table-td k-hierarchy-cell"
-                *ngIf="detailTemplate?.templateRef && !isStacked">
+              class="k-table-td k-group-cell k-table-group-td"
+              role="presentation"
+              >
             </td>
-            <ng-container *ngIf="!isStacked">
-                <ng-container *ngFor="let column of columnsToRender; let columnIndex = index; trackBy: trackByIndex;">
-                    <td *ngIf="!isColumnGroupComponent(column)"
-                        kendoGridLogicalCell
-                        class="k-table-td"
-                            [logicalRowIndex]="logicalRowIndex"
-                            [logicalColIndex]="logicalColumnIndex(column)"
-                            role="gridcell"
-                            aria-selected="false"
-                        [class.k-grid-footer-sticky]="column.sticky"
-                        [ngClass]="column.footerClass"
-                        [ngStyle]="column.sticky ? addStickyStyles(column) : column.footerStyle">
-                        <ng-template
+          }
+        }
+        @if (detailTemplate?.templateRef && !isStacked) {
+          <td
+            role="presentation"
+            class="k-table-td k-hierarchy-cell"
+            >
+          </td>
+        }
+        @if (!isStacked) {
+          @for (column of columnsToRender; track $index; let columnIndex = $index) {
+            @if (!isColumnGroupComponent(column)) {
+              <td
+                kendoGridLogicalCell
+                class="k-table-td"
+                [logicalRowIndex]="logicalRowIndex"
+                [logicalColIndex]="logicalColumnIndex(column)"
+                role="gridcell"
+                aria-selected="false"
+                [class.k-grid-footer-sticky]="column.sticky"
+                [ngClass]="column.footerClass"
+                [ngStyle]="column.sticky ? addStickyStyles(column) : column.footerStyle">
+                <ng-template
                             [templateContext]="{
                                 templateRef: column.footerTemplateRef,
                                 columnIndex: column.leafIndex,
                                 column: column,
                                 $implicit: column
                             }">
-                        </ng-template>
-                    </td>
-                </ng-container>
-            </ng-container>
+                </ng-template>
+              </td>
+            }
+          }
+        }
 
-            <ng-container *ngIf="isStacked">
-                <td kendoGridLogicalCell
-                    class="k-table-td"
-                    [logicalRowIndex]="logicalRowIndex"
-                    [logicalColIndex]="detailTemplate ? 1 : 0"
-                    role="gridcell"
-                    aria-selected="false">
-                    <div class="k-grid-column-template">
-                        <ng-container *ngFor="let column of columnsToRender; trackBy: trackByIndex;">
-                            <div class="k-column-template-item" *ngIf="column.footerTemplateRef">
-                                <ng-template
+        @if (isStacked) {
+          <td kendoGridLogicalCell
+            class="k-table-td"
+            [logicalRowIndex]="logicalRowIndex"
+            [logicalColIndex]="detailTemplate ? 1 : 0"
+            role="gridcell"
+            aria-selected="false">
+            <div class="k-grid-column-template">
+              @for (column of columnsToRender; track $index) {
+                @if (column.footerTemplateRef) {
+                  <div class="k-column-template-item">
+                    <ng-template
                                     [templateContext]="{
                                         templateRef: column.footerTemplateRef,
                                         columnIndex: column.leafIndex,
                                         column: column,
                                         $implicit: column
                                     }">
-                                </ng-template>
-                            </div>
-                        </ng-container>
-                    </div>
-                </td>
-            </ng-container>
-        </tr>
+                    </ng-template>
+                  </div>
+                }
+              }
+            </div>
+          </td>
+        }
+      </tr>
     </ng-container>
     `,
                     standalone: true,
-                    imports: [LogicalRowDirective, NgFor, NgIf, LogicalCellDirective, NgClass, NgStyle, TemplateContextDirective]
+                    imports: [LogicalRowDirective, LogicalCellDirective, NgClass, NgStyle, TemplateContextDirective]
                 }]
         }], ctorParameters: () => [{ type: i1.ColumnInfoService }, { type: i2.ContextService }], propDecorators: { columns: [{
                 type: Input