@progress/kendo-angular-spreadsheet 21.1.1-develop.1 → 21.2.0-develop.1

package/esm2022/action-bar/list.component.mjs

@@ -3,7 +3,6 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, ElementRef, Input, Renderer2 } from '@angular/core';
-import { NgFor } from '@angular/common';
 import { formulaFxIcon } from '@progress/kendo-svg-icons';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { EventsOutsideAngularDirective } from '@progress/kendo-angular-common';
@@ -33,25 +32,27 @@ export class FormulaListComponent {
         ev.preventDefault();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormulaListComponent, deps: [{ token: i0.ElementRef }, { token: i1.SpreadsheetService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormulaListComponent, isStandalone: true, selector: "kendo-spreadsheet-formula-list", inputs: { maxHeight: "maxHeight", data: "data", itemClick: "itemClick" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FormulaListComponent, isStandalone: true, selector: "kendo-spreadsheet-formula-list", inputs: { maxHeight: "maxHeight", data: "data", itemClick: "itemClick" }, ngImport: i0, template: `
         <ul #ulRef
-            class="k-spreadsheet-formula-list k-list-ul k-list-md k-group k-reset"
-            role="menu"
-            [style.overflowY]="'auto'"
-            [style.maxHeight]="maxHeight"
-            [kendoEventsOutsideAngular]="{mousedown: handleMouseDown}">
-                <li *ngFor="let item of data"
-                    (click)="itemClick(item.text)"
-                    class="k-list-item"
-                    role="menuitem">
-                    <kendo-icon-wrapper
-                        [svgIcon]="formulaFxIcon"
-                        name="formula-fx"
-                    ></kendo-icon-wrapper>
-                    <span className="k-list-item-text">{{item.text}}</span>
-                </li>
+          class="k-spreadsheet-formula-list k-list-ul k-list-md k-group k-reset"
+          role="menu"
+          [style.overflowY]="'auto'"
+          [style.maxHeight]="maxHeight"
+          [kendoEventsOutsideAngular]="{mousedown: handleMouseDown}">
+          @for (item of data; track item) {
+            <li
+              (click)="itemClick(item.text)"
+              class="k-list-item"
+              role="menuitem">
+              <kendo-icon-wrapper
+                [svgIcon]="formulaFxIcon"
+                name="formula-fx"
+              ></kendo-icon-wrapper>
+              <span className="k-list-item-text">{{item.text}}</span>
+            </li>
+          }
         </ul>
-    `, isInline: true, dependencies: [{ kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+        `, isInline: true, dependencies: [{ 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormulaListComponent, decorators: [{
             type: Component,
@@ -59,25 +60,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-spreadsheet-formula-list',
                     template: `
         <ul #ulRef
-            class="k-spreadsheet-formula-list k-list-ul k-list-md k-group k-reset"
-            role="menu"
-            [style.overflowY]="'auto'"
-            [style.maxHeight]="maxHeight"
-            [kendoEventsOutsideAngular]="{mousedown: handleMouseDown}">
-                <li *ngFor="let item of data"
-                    (click)="itemClick(item.text)"
-                    class="k-list-item"
-                    role="menuitem">
-                    <kendo-icon-wrapper
-                        [svgIcon]="formulaFxIcon"
-                        name="formula-fx"
-                    ></kendo-icon-wrapper>
-                    <span className="k-list-item-text">{{item.text}}</span>
-                </li>
+          class="k-spreadsheet-formula-list k-list-ul k-list-md k-group k-reset"
+          role="menu"
+          [style.overflowY]="'auto'"
+          [style.maxHeight]="maxHeight"
+          [kendoEventsOutsideAngular]="{mousedown: handleMouseDown}">
+          @for (item of data; track item) {
+            <li
+              (click)="itemClick(item.text)"
+              class="k-list-item"
+              role="menuitem">
+              <kendo-icon-wrapper
+                [svgIcon]="formulaFxIcon"
+                name="formula-fx"
+              ></kendo-icon-wrapper>
+              <span className="k-list-item-text">{{item.text}}</span>
+            </li>
+          }
         </ul>
-    `,
+        `,
                     standalone: true,
-                    imports: [EventsOutsideAngularDirective, NgFor, IconWrapperComponent]
+                    imports: [EventsOutsideAngularDirective, IconWrapperComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.SpreadsheetService }, { type: i0.Renderer2 }], propDecorators: { maxHeight: [{
                 type: Input

package/esm2022/common/list-editor.component.mjs

@@ -2,7 +2,6 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { NgForOf } from '@angular/common';
 import { Component, EventEmitter, Output, ViewChildren, QueryList, ElementRef, NgZone } from '@angular/core';
 import { Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
 import { SpreadsheetService } from './spreadsheet.service';
@@ -96,42 +95,46 @@ export class ListEditorComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListEditorComponent, deps: [{ token: i0.NgZone }, { token: i1.SpreadsheetService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ListEditorComponent, isStandalone: true, selector: "ng-component", outputs: { itemSelect: "itemSelect", close: "close" }, viewQueries: [{ propertyName: "listItems", predicate: ["listItem"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListEditorComponent, isStandalone: true, selector: "ng-component", outputs: { itemSelect: "itemSelect", close: "close" }, viewQueries: [{ propertyName: "listItems", predicate: ["listItem"], descendants: true, read: ElementRef }], ngImport: i0, template: `
         <ul class="k-list k-reset k-list-ul" role="listbox">
-            <li *ngFor="let item of data; let i = index"
-                role="option"
-                class="k-list-item"
-                [class.k-focus]="i === focusedIndex"
-                [attr.aria-selected]="i === focusedIndex"
-                [attr.tabindex]="i === focusedIndex ? 0 : -1"
-                (click)="onItemClick(item)"
-                (keydown)="onKeyDown($event, i)"
-                #listItem>
-                <span class="k-list-item-text">{{item.value}}</span>
+          @for (item of data; track item; let i = $index) {
+            <li
+              role="option"
+              class="k-list-item"
+              [class.k-focus]="i === focusedIndex"
+              [attr.aria-selected]="i === focusedIndex"
+              [attr.tabindex]="i === focusedIndex ? 0 : -1"
+              (click)="onItemClick(item)"
+              (keydown)="onKeyDown($event, i)"
+              #listItem>
+              <span class="k-list-item-text">{{item.value}}</span>
             </li>
+          }
         </ul>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+        `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListEditorComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
         <ul class="k-list k-reset k-list-ul" role="listbox">
-            <li *ngFor="let item of data; let i = index"
-                role="option"
-                class="k-list-item"
-                [class.k-focus]="i === focusedIndex"
-                [attr.aria-selected]="i === focusedIndex"
-                [attr.tabindex]="i === focusedIndex ? 0 : -1"
-                (click)="onItemClick(item)"
-                (keydown)="onKeyDown($event, i)"
-                #listItem>
-                <span class="k-list-item-text">{{item.value}}</span>
+          @for (item of data; track item; let i = $index) {
+            <li
+              role="option"
+              class="k-list-item"
+              [class.k-focus]="i === focusedIndex"
+              [attr.aria-selected]="i === focusedIndex"
+              [attr.tabindex]="i === focusedIndex ? 0 : -1"
+              (click)="onItemClick(item)"
+              (keydown)="onKeyDown($event, i)"
+              #listItem>
+              <span class="k-list-item-text">{{item.value}}</span>
             </li>
+          }
         </ul>
-    `,
+        `,
                     standalone: true,
-                    imports: [NgForOf]
+                    imports: []
                 }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.SpreadsheetService }], propDecorators: { itemSelect: [{
                 type: Output

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1763645661,
-    version: '21.1.1-develop.1',
+    publishDate: 1763998296,
+    version: '21.2.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning',
 };

package/esm2022/sheets-bar/action-dialog.component.mjs

@@ -3,7 +3,6 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component } from '@angular/core';
-import { NgIf } from '@angular/common';
 import { DialogRef, DialogContentBase } from '@progress/kendo-angular-dialog';
 import { TextBoxComponent } from '@progress/kendo-angular-inputs';
 import { LabelComponent } from '@progress/kendo-angular-label';
@@ -27,49 +26,53 @@ export class ActionDialogComponent extends DialogContentBase {
         this.commandName = args.commandName;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionDialogComponent, deps: [{ token: i1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ActionDialogComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-        <ng-container *ngIf="commandName === 'delete'">
-            <p>The deleted sheet data will be lost.</p>
-            <p>Are you sure you want to proceed?</p>
-        </ng-container>
-
-        <form class="k-form k-form-md" *ngIf="commandName === 'rename'" method="dialog">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ActionDialogComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+        @if (commandName === 'delete') {
+          <p>The deleted sheet data will be lost.</p>
+          <p>Are you sure you want to proceed?</p>
+        }
+        
+        @if (commandName === 'rename') {
+          <form class="k-form k-form-md" method="dialog">
             <div class="k-form-field">
-                <kendo-label [for]="textbox" text="Rename sheet"></kendo-label>
-                <div class="k-form-field-wrap">
-                    <kendo-textbox #textbox
-                        autocomplete="off"
-                        placeholder="Sheet name"
-                        [(value)]="value">
-                    </kendo-textbox>
-                </div>
+              <kendo-label [for]="textbox" text="Rename sheet"></kendo-label>
+              <div class="k-form-field-wrap">
+                <kendo-textbox #textbox
+                  autocomplete="off"
+                  placeholder="Sheet name"
+                  [(value)]="value">
+                </kendo-textbox>
+              </div>
             </div>
-        </form>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }] });
+          </form>
+        }
+        `, isInline: true, dependencies: [{ kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionDialogComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-        <ng-container *ngIf="commandName === 'delete'">
-            <p>The deleted sheet data will be lost.</p>
-            <p>Are you sure you want to proceed?</p>
-        </ng-container>
-
-        <form class="k-form k-form-md" *ngIf="commandName === 'rename'" method="dialog">
+        @if (commandName === 'delete') {
+          <p>The deleted sheet data will be lost.</p>
+          <p>Are you sure you want to proceed?</p>
+        }
+        
+        @if (commandName === 'rename') {
+          <form class="k-form k-form-md" method="dialog">
             <div class="k-form-field">
-                <kendo-label [for]="textbox" text="Rename sheet"></kendo-label>
-                <div class="k-form-field-wrap">
-                    <kendo-textbox #textbox
-                        autocomplete="off"
-                        placeholder="Sheet name"
-                        [(value)]="value">
-                    </kendo-textbox>
-                </div>
+              <kendo-label [for]="textbox" text="Rename sheet"></kendo-label>
+              <div class="k-form-field-wrap">
+                <kendo-textbox #textbox
+                  autocomplete="off"
+                  placeholder="Sheet name"
+                  [(value)]="value">
+                </kendo-textbox>
+              </div>
             </div>
-        </form>
-    `,
+          </form>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, LabelComponent, TextBoxComponent]
+                    imports: [LabelComponent, TextBoxComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.DialogRef }] });

package/esm2022/sheets-bar/sheets-bar.component.mjs

@@ -3,7 +3,6 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, ElementRef, HostBinding, Input, NgZone, QueryList, Renderer2, ViewChild, ViewChildren } from '@angular/core';
-import { NgFor, NgIf } from '@angular/common';
 import { Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { ButtonComponent, DropDownButtonComponent } from '@progress/kendo-angular-buttons';
@@ -31,9 +30,11 @@ export class SheetsBarComponent {
     dialogService;
     ngZone;
     hostClasses = true;
+    trackByItemKey = (index, item) => this.hiding ? item : index;
     sheets;
     sheetDescriptors;
     subs = new Subscription();
+    hiding = false;
     constructor(spreadsheetService, element, renderer, localization, dialogService, ngZone) {
         this.spreadsheetService = spreadsheetService;
         this.element = element;
@@ -226,6 +227,7 @@ export class SheetsBarComponent {
             this.notifySheetsChange();
         },
         hide: (sheet) => {
+            this.hiding = true;
             sheet.state = 'hidden';
             const sheets = this.spreadsheetService.spreadsheet.sheets();
             const sheetIndex = sheets.findIndex(s => s.name() === sheet.text);
@@ -281,65 +283,66 @@ export class SheetsBarComponent {
                 svgIcon: this.hiddenStateSVGIcons[sheet.state]
             }));
         });
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.spreadsheetService.spreadsheet.view.clipboard.focus());
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => { this.spreadsheetService.spreadsheet.view.clipboard.focus(); this.hiding = false; });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SheetsBarComponent, deps: [{ token: i1.SpreadsheetService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.SpreadsheetLocalizationService }, { token: i3.DialogService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SheetsBarComponent, isStandalone: true, selector: "[kendoSpreadsheetSheetsBar]", inputs: { sheets: "sheets", sheetDescriptors: "sheetDescriptors" }, host: { properties: { "class.k-spreadsheet-sheets-bar": "this.hostClasses" } }, viewQueries: [{ propertyName: "addButton", first: true, predicate: ["addButton"], descendants: true }, { propertyName: "menuButton", first: true, predicate: ["menuButton"], descendants: true }, { propertyName: "tabstrip", first: true, predicate: ["tabstrip"], descendants: true }, { propertyName: "actionDdbs", predicate: ["sheetDdb"], descendants: true }, { propertyName: "actionDdbRefs", predicate: ["sheetDdb"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SheetsBarComponent, isStandalone: true, selector: "[kendoSpreadsheetSheetsBar]", inputs: { sheets: "sheets", sheetDescriptors: "sheetDescriptors" }, host: { properties: { "class.k-spreadsheet-sheets-bar": "this.hostClasses" } }, viewQueries: [{ propertyName: "addButton", first: true, predicate: ["addButton"], descendants: true }, { propertyName: "menuButton", first: true, predicate: ["menuButton"], descendants: true }, { propertyName: "tabstrip", first: true, predicate: ["tabstrip"], descendants: true }, { propertyName: "actionDdbs", predicate: ["sheetDdb"], descendants: true }, { propertyName: "actionDdbRefs", predicate: ["sheetDdb"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
         <button kendoButton #addButton
-            [title]="messageFor('addSheet')"
-            type="button"
-            fillMode="flat"
-            class="k-spreadsheet-sheet-add"
-            icon="plus"
-            [svgIcon]="plusIcon"
-            [kendoEventsOutsideAngular]="{click: onAddClick}"
-            [attr.aria-controls]="tablistId">
+          [title]="messageFor('addSheet')"
+          type="button"
+          fillMode="flat"
+          class="k-spreadsheet-sheet-add"
+          icon="plus"
+          [svgIcon]="plusIcon"
+          [kendoEventsOutsideAngular]="{click: onAddClick}"
+          [attr.aria-controls]="tablistId">
         </button>
         <kendo-dropdownbutton #menuButton
-            fillMode="flat"
-            buttonClass="k-spreadsheet-sheets-menu"
-            icon="menu"
-            [svgIcon]="menuIcon"
-            [data]="sheetsMenuList"
-            (itemClick)="onMenuItemClick($event)"
-            (open)="onOpen(menuButton)"
-            [buttonAttributes]="{title: messageFor('sheetsMenu')}"
-            [attr.aria-controls]="tablistId">
+          fillMode="flat"
+          buttonClass="k-spreadsheet-sheets-menu"
+          icon="menu"
+          [svgIcon]="menuIcon"
+          [data]="sheetsMenuList"
+          (itemClick)="onMenuItemClick($event)"
+          (open)="onOpen(menuButton)"
+          [buttonAttributes]="{title: messageFor('sheetsMenu')}"
+          [attr.aria-controls]="tablistId">
         </kendo-dropdownbutton>
         <kendo-tabstrip #tabstrip
-            [tabPosition]="'bottom'"
-            [showContentArea]="false"
-            [scrollable]="{ scrollButtonsPosition: 'end', mouseScroll: false }"
-            class="k-spreadsheet-sheets"
-            (tabSelect)="onTabSelect($event)">
-            <ng-container *ngFor="let sheet of sheets">
-                <kendo-tabstrip-tab
-                    *ngIf="sheet.state === 'visible'"
-                    [title]="sheet.text"
-                    [selected]="sheet.text === activeSheet">
-                    <ng-template kendoTabTemplate>
-                        <span class="k-link">
-                            <span class="k-link-text">{{sheet.text}}</span>
-                        </span>
-                        <span class="k-item-actions">
-                            <kendo-dropdownbutton #sheetDdb
-                                fillMode="flat"
-                                icon="caret-alt-down"
-                                [svgIcon]="caretAltDownIcon"
-                                buttonClass="k-menu-button"
-                                [data]="sheet.sheetActions"
-                                [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
-                                (open)="onOpen(sheetDdb)"
-                                (close)="onClose()"
-                                (click)="$event.stopPropagation()"
-                                (itemClick)="onActionClick($event, sheet)">
-                            </kendo-dropdownbutton>
-                        </span>
-                    </ng-template>
-                </kendo-tabstrip-tab>
-            </ng-container>
+          [tabPosition]="'bottom'"
+          [showContentArea]="false"
+          [scrollable]="{ scrollButtonsPosition: 'end', mouseScroll: false }"
+          class="k-spreadsheet-sheets"
+          (tabSelect)="onTabSelect($event)">
+          @for (sheet of sheets; track trackByItemKey($index, sheet)) {
+            @if (sheet.state === 'visible') {
+              <kendo-tabstrip-tab
+                [title]="sheet.text"
+                [selected]="sheet.text === activeSheet">
+                <ng-template kendoTabTemplate>
+                  <span class="k-link">
+                    <span class="k-link-text">{{sheet.text}}</span>
+                  </span>
+                  <span class="k-item-actions">
+                    <kendo-dropdownbutton #sheetDdb
+                      fillMode="flat"
+                      icon="caret-alt-down"
+                      [svgIcon]="caretAltDownIcon"
+                      buttonClass="k-menu-button"
+                      [data]="sheet.sheetActions"
+                      [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
+                      (open)="onOpen(sheetDdb)"
+                      (close)="onClose()"
+                      (click)="$event.stopPropagation()"
+                      (itemClick)="onActionClick($event, sheet)">
+                    </kendo-dropdownbutton>
+                  </span>
+                </ng-template>
+              </kendo-tabstrip-tab>
+            }
+          }
         </kendo-tabstrip>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTemplateDirective, selector: "[kendoTabTemplate]" }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTemplateDirective, selector: "[kendoTabTemplate]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SheetsBarComponent, decorators: [{
             type: Component,
@@ -347,62 +350,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: '[kendoSpreadsheetSheetsBar]',
                     template: `
         <button kendoButton #addButton
-            [title]="messageFor('addSheet')"
-            type="button"
-            fillMode="flat"
-            class="k-spreadsheet-sheet-add"
-            icon="plus"
-            [svgIcon]="plusIcon"
-            [kendoEventsOutsideAngular]="{click: onAddClick}"
-            [attr.aria-controls]="tablistId">
+          [title]="messageFor('addSheet')"
+          type="button"
+          fillMode="flat"
+          class="k-spreadsheet-sheet-add"
+          icon="plus"
+          [svgIcon]="plusIcon"
+          [kendoEventsOutsideAngular]="{click: onAddClick}"
+          [attr.aria-controls]="tablistId">
         </button>
         <kendo-dropdownbutton #menuButton
-            fillMode="flat"
-            buttonClass="k-spreadsheet-sheets-menu"
-            icon="menu"
-            [svgIcon]="menuIcon"
-            [data]="sheetsMenuList"
-            (itemClick)="onMenuItemClick($event)"
-            (open)="onOpen(menuButton)"
-            [buttonAttributes]="{title: messageFor('sheetsMenu')}"
-            [attr.aria-controls]="tablistId">
+          fillMode="flat"
+          buttonClass="k-spreadsheet-sheets-menu"
+          icon="menu"
+          [svgIcon]="menuIcon"
+          [data]="sheetsMenuList"
+          (itemClick)="onMenuItemClick($event)"
+          (open)="onOpen(menuButton)"
+          [buttonAttributes]="{title: messageFor('sheetsMenu')}"
+          [attr.aria-controls]="tablistId">
         </kendo-dropdownbutton>
         <kendo-tabstrip #tabstrip
-            [tabPosition]="'bottom'"
-            [showContentArea]="false"
-            [scrollable]="{ scrollButtonsPosition: 'end', mouseScroll: false }"
-            class="k-spreadsheet-sheets"
-            (tabSelect)="onTabSelect($event)">
-            <ng-container *ngFor="let sheet of sheets">
-                <kendo-tabstrip-tab
-                    *ngIf="sheet.state === 'visible'"
-                    [title]="sheet.text"
-                    [selected]="sheet.text === activeSheet">
-                    <ng-template kendoTabTemplate>
-                        <span class="k-link">
-                            <span class="k-link-text">{{sheet.text}}</span>
-                        </span>
-                        <span class="k-item-actions">
-                            <kendo-dropdownbutton #sheetDdb
-                                fillMode="flat"
-                                icon="caret-alt-down"
-                                [svgIcon]="caretAltDownIcon"
-                                buttonClass="k-menu-button"
-                                [data]="sheet.sheetActions"
-                                [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
-                                (open)="onOpen(sheetDdb)"
-                                (close)="onClose()"
-                                (click)="$event.stopPropagation()"
-                                (itemClick)="onActionClick($event, sheet)">
-                            </kendo-dropdownbutton>
-                        </span>
-                    </ng-template>
-                </kendo-tabstrip-tab>
-            </ng-container>
+          [tabPosition]="'bottom'"
+          [showContentArea]="false"
+          [scrollable]="{ scrollButtonsPosition: 'end', mouseScroll: false }"
+          class="k-spreadsheet-sheets"
+          (tabSelect)="onTabSelect($event)">
+          @for (sheet of sheets; track trackByItemKey($index, sheet)) {
+            @if (sheet.state === 'visible') {
+              <kendo-tabstrip-tab
+                [title]="sheet.text"
+                [selected]="sheet.text === activeSheet">
+                <ng-template kendoTabTemplate>
+                  <span class="k-link">
+                    <span class="k-link-text">{{sheet.text}}</span>
+                  </span>
+                  <span class="k-item-actions">
+                    <kendo-dropdownbutton #sheetDdb
+                      fillMode="flat"
+                      icon="caret-alt-down"
+                      [svgIcon]="caretAltDownIcon"
+                      buttonClass="k-menu-button"
+                      [data]="sheet.sheetActions"
+                      [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
+                      (open)="onOpen(sheetDdb)"
+                      (close)="onClose()"
+                      (click)="$event.stopPropagation()"
+                      (itemClick)="onActionClick($event, sheet)">
+                    </kendo-dropdownbutton>
+                  </span>
+                </ng-template>
+              </kendo-tabstrip-tab>
+            }
+          }
         </kendo-tabstrip>
-    `,
+        `,
                     standalone: true,
-                    imports: [ButtonComponent, EventsOutsideAngularDirective, DropDownButtonComponent, TabStripComponent, NgFor, NgIf, TabStripTabComponent, TabTemplateDirective]
+                    imports: [ButtonComponent, EventsOutsideAngularDirective, DropDownButtonComponent, TabStripComponent, TabStripTabComponent, TabTemplateDirective]
                 }]
         }], ctorParameters: () => [{ type: i1.SpreadsheetService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.SpreadsheetLocalizationService }, { type: i3.DialogService }, { type: i0.NgZone }], propDecorators: { hostClasses: [{
                 type: HostBinding,