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

package/fesm2022/progress-kendo-angular-spreadsheet.mjs

@@ -4,7 +4,6 @@
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, Output, Inject, Optional, Component, Input, Directive, HostBinding, ElementRef, ViewChild, ViewChildren, HostListener, InjectionToken, forwardRef, ViewContainerRef, NgModule } from '@angular/core';
-import { NgFor, NgIf, NgStyle, NgSwitch, NgSwitchCase, NgForOf } from '@angular/common';
 import { Subject, Subscription } from 'rxjs';
 import { take, map } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -29,6 +28,7 @@ import { LabelComponent } from '@progress/kendo-angular-label';
 import { ButtonComponent, DropDownButtonComponent } from '@progress/kendo-angular-buttons';
 import { TabStripComponent, TabStripTabComponent, TabTemplateDirective } from '@progress/kendo-angular-layout';
 import { ComboBoxComponent, DropDownListComponent, ItemTemplateDirective } from '@progress/kendo-angular-dropdowns';
+import { NgStyle } from '@angular/common';
 import { saveAs } from '@progress/kendo-file-saver';
 import { Workbook } from '@progress/kendo-ooxml';
 import * as i4 from '@angular/forms';
@@ -43,8 +43,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1763729190,
-    version: '21.1.1-develop.2',
+    publishDate: 1764002272,
+    version: '21.2.0-develop.2',
     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',
 };
 
@@ -221,25 +221,27 @@ 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: 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,
@@ -247,25 +249,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: SpreadsheetService }, { type: i0.Renderer2 }], propDecorators: { maxHeight: [{
                 type: Input
@@ -744,50 +748,54 @@ 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$2.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$2.DialogRef }] });
 
@@ -802,9 +810,11 @@ 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;
@@ -997,6 +1007,7 @@ 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);
@@ -1052,65 +1063,66 @@ 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: SpreadsheetService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SpreadsheetLocalizationService }, { token: i1$2.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,
@@ -1118,62 +1130,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: SpreadsheetService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SpreadsheetLocalizationService }, { type: i1$2.DialogService }, { type: i0.NgZone }], propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -2193,92 +2206,102 @@ class DialogContentComponent extends DialogContentBase {
         this.componentType = args.componentType;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialogContentComponent, deps: [{ token: i1$2.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DialogContentComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-        <div 
-            [ngSwitch]="componentType"
-            class="k-d-flex k-align-items-center k-justify-content-center">
-            <kendo-spreadsheet-fontfamily-dropdownlist
-                *ngSwitchCase="'fontFamily'"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DialogContentComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+        <div
+          class="k-d-flex k-align-items-center k-justify-content-center">
+          @switch (componentType) {
+            @case ('fontFamily') {
+              <kendo-spreadsheet-fontfamily-dropdownlist
                 [data]="data"
                 [(value)]="value"
                 [attr.title]="title"
                 [tabindex]="tabindex"
                 [style.width.em]="13"
-                ></kendo-spreadsheet-fontfamily-dropdownlist>
-            <kendo-spreadsheet-fontsize-dropdownlist
-                *ngSwitchCase="'fontSize'"
+              ></kendo-spreadsheet-fontfamily-dropdownlist>
+            }
+            @case ('fontSize') {
+              <kendo-spreadsheet-fontsize-dropdownlist
                 [data]="data"
                 [(value)]="value"
                 [attr.title]="title"
                 [tabindex]="tabindex"
                 [style.width.em]="13"
-                ></kendo-spreadsheet-fontsize-dropdownlist>
-            <kendo-colorpicker
-                *ngSwitchCase="'color'"
+              ></kendo-spreadsheet-fontsize-dropdownlist>
+            }
+            @case ('color') {
+              <kendo-colorpicker
                 [attr.title]="title"
                 [format]="'hex'"
                 [(value)]="value"
                 [tabindex]="tabindex"
                 [clearButton]="false"
                 fillMode="flat"
-            ></kendo-colorpicker>
-            <kendo-colorpicker
-                *ngSwitchCase="'background'"
+              ></kendo-colorpicker>
+            }
+            @case ('background') {
+              <kendo-colorpicker
                 [attr.title]="title"
                 [format]="'hex'"
                 [(value)]="value"
                 [tabindex]="tabindex"
                 [clearButton]="false"
                 fillMode="flat"
-            ></kendo-colorpicker>
+              ></kendo-colorpicker>
+            }
+          }
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: FontFamilyDropDownListComponent, selector: "kendo-spreadsheet-fontfamily-dropdownlist" }, { kind: "component", type: FontSizeDropDownListComponent, selector: "kendo-spreadsheet-fontsize-dropdownlist" }, { kind: "component", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "adaptiveMode", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: FontFamilyDropDownListComponent, selector: "kendo-spreadsheet-fontfamily-dropdownlist" }, { kind: "component", type: FontSizeDropDownListComponent, selector: "kendo-spreadsheet-fontsize-dropdownlist" }, { kind: "component", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "adaptiveMode", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialogContentComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-        <div 
-            [ngSwitch]="componentType"
-            class="k-d-flex k-align-items-center k-justify-content-center">
-            <kendo-spreadsheet-fontfamily-dropdownlist
-                *ngSwitchCase="'fontFamily'"
+        <div
+          class="k-d-flex k-align-items-center k-justify-content-center">
+          @switch (componentType) {
+            @case ('fontFamily') {
+              <kendo-spreadsheet-fontfamily-dropdownlist
                 [data]="data"
                 [(value)]="value"
                 [attr.title]="title"
                 [tabindex]="tabindex"
                 [style.width.em]="13"
-                ></kendo-spreadsheet-fontfamily-dropdownlist>
-            <kendo-spreadsheet-fontsize-dropdownlist
-                *ngSwitchCase="'fontSize'"
+              ></kendo-spreadsheet-fontfamily-dropdownlist>
+            }
+            @case ('fontSize') {
+              <kendo-spreadsheet-fontsize-dropdownlist
                 [data]="data"
                 [(value)]="value"
                 [attr.title]="title"
                 [tabindex]="tabindex"
                 [style.width.em]="13"
-                ></kendo-spreadsheet-fontsize-dropdownlist>
-            <kendo-colorpicker
-                *ngSwitchCase="'color'"
+              ></kendo-spreadsheet-fontsize-dropdownlist>
+            }
+            @case ('color') {
+              <kendo-colorpicker
                 [attr.title]="title"
                 [format]="'hex'"
                 [(value)]="value"
                 [tabindex]="tabindex"
                 [clearButton]="false"
                 fillMode="flat"
-            ></kendo-colorpicker>
-            <kendo-colorpicker
-                *ngSwitchCase="'background'"
+              ></kendo-colorpicker>
+            }
+            @case ('background') {
+              <kendo-colorpicker
                 [attr.title]="title"
                 [format]="'hex'"
                 [(value)]="value"
                 [tabindex]="tabindex"
                 [clearButton]="false"
                 fillMode="flat"
-            ></kendo-colorpicker>
+              ></kendo-colorpicker>
+            }
+          }
         </div>
-    `,
+        `,
                     standalone: true,
-                    imports: [NgSwitch, NgSwitchCase, FontFamilyDropDownListComponent, FontSizeDropDownListComponent, ColorPickerComponent]
+                    imports: [FontFamilyDropDownListComponent, FontSizeDropDownListComponent, ColorPickerComponent]
                 }]
         }], ctorParameters: () => [{ type: i1$2.DialogRef }] });
 
@@ -2467,53 +2490,55 @@ class SpreadsheetBackColorComponent extends SpreadsheetDropDownToolBase {
         super('background', dialogService, localization, spreadsheetService, toolsService, toolbar);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpreadsheetBackColorComponent, deps: [{ token: i1$2.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SpreadsheetBackColorComponent, isStandalone: true, selector: "kendo-spreadsheet-backcolor-tool", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetBackColorComponent) }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SpreadsheetBackColorComponent, isStandalone: true, selector: "kendo-spreadsheet-backcolor-tool", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetBackColorComponent) }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
-            <div class="k-toolbar-item">
-                <kendo-colorpicker
-                    #element
-                    [attr.title]="messageFor(command)"
-                    [format]="'hex'"
-                    [(value)]="value"
-                    [tabindex]="tabindex"
-                    (valueChange)="onValueChange($event)"
-                    [clearButton]="false"
-                    fillMode="flat"
-                    [icon]="icon"
-                    [preview]="true"
-                    [svgIcon]="svgIcon"></kendo-colorpicker>
-            </div>
+          <div class="k-toolbar-item">
+            <kendo-colorpicker
+              #element
+              [attr.title]="messageFor(command)"
+              [format]="'hex'"
+              [(value)]="value"
+              [tabindex]="tabindex"
+              (valueChange)="onValueChange($event)"
+              [clearButton]="false"
+              fillMode="flat"
+              [icon]="icon"
+              [preview]="true"
+            [svgIcon]="svgIcon"></kendo-colorpicker>
+          </div>
         </ng-template>
         <ng-template #popupTemplate>
-            <div #popupButton
-                [tabindex]="tabindex"
-                role="menuitem"
-                class="k-item k-menu-item"
-                (click)="openDialog()">
-                <span
-                    class="k-link k-menu-link">
-                    <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
-                    <span *ngIf="messageFor(command)" class="k-menu-link-text">{{messageFor(command)}}</span>
-                </span>
-            </div>
+          <div #popupButton
+            [tabindex]="tabindex"
+            role="menuitem"
+            class="k-item k-menu-item"
+            (click)="openDialog()">
+            <span
+              class="k-link k-menu-link">
+              <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
+              @if (messageFor(command)) {
+                <span class="k-menu-link-text">{{messageFor(command)}}</span>
+              }
+            </span>
+          </div>
         </ng-template>
         <ng-template #sectionTemplate>
-            <div class="k-toolbar-item">
-                <kendo-colorpicker
-                    #element
-                    [attr.title]="messageFor(command)"
-                    [format]="'hex'"
-                    [(value)]="value"
-                    [tabindex]="tabindex"
-                    (valueChange)="onValueChange($event)"
-                    [clearButton]="false"
-                    fillMode="flat"
-                    [icon]="icon"
-                    [preview]="true"
-                    [svgIcon]="svgIcon"></kendo-colorpicker>
-            </div>
+          <div class="k-toolbar-item">
+            <kendo-colorpicker
+              #element
+              [attr.title]="messageFor(command)"
+              [format]="'hex'"
+              [(value)]="value"
+              [tabindex]="tabindex"
+              (valueChange)="onValueChange($event)"
+              [clearButton]="false"
+              fillMode="flat"
+              [icon]="icon"
+              [preview]="true"
+            [svgIcon]="svgIcon"></kendo-colorpicker>
+          </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "adaptiveMode", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "adaptiveMode", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { 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: SpreadsheetBackColorComponent, decorators: [{
             type: Component,
@@ -2522,53 +2547,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-spreadsheet-backcolor-tool',
                     template: `
         <ng-template #toolbarTemplate>
-            <div class="k-toolbar-item">
-                <kendo-colorpicker
-                    #element
-                    [attr.title]="messageFor(command)"
-                    [format]="'hex'"
-                    [(value)]="value"
-                    [tabindex]="tabindex"
-                    (valueChange)="onValueChange($event)"
-                    [clearButton]="false"
-                    fillMode="flat"
-                    [icon]="icon"
-                    [preview]="true"
-                    [svgIcon]="svgIcon"></kendo-colorpicker>
-            </div>
+          <div class="k-toolbar-item">
+            <kendo-colorpicker
+              #element
+              [attr.title]="messageFor(command)"
+              [format]="'hex'"
+              [(value)]="value"
+              [tabindex]="tabindex"
+              (valueChange)="onValueChange($event)"
+              [clearButton]="false"
+              fillMode="flat"
+              [icon]="icon"
+              [preview]="true"
+            [svgIcon]="svgIcon"></kendo-colorpicker>
+          </div>
         </ng-template>
         <ng-template #popupTemplate>
-            <div #popupButton
-                [tabindex]="tabindex"
-                role="menuitem"
-                class="k-item k-menu-item"
-                (click)="openDialog()">
-                <span
-                    class="k-link k-menu-link">
-                    <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
-                    <span *ngIf="messageFor(command)" class="k-menu-link-text">{{messageFor(command)}}</span>
-                </span>
-            </div>
+          <div #popupButton
+            [tabindex]="tabindex"
+            role="menuitem"
+            class="k-item k-menu-item"
+            (click)="openDialog()">
+            <span
+              class="k-link k-menu-link">
+              <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
+              @if (messageFor(command)) {
+                <span class="k-menu-link-text">{{messageFor(command)}}</span>
+              }
+            </span>
+          </div>
         </ng-template>
         <ng-template #sectionTemplate>
-            <div class="k-toolbar-item">
-                <kendo-colorpicker
-                    #element
-                    [attr.title]="messageFor(command)"
-                    [format]="'hex'"
-                    [(value)]="value"
-                    [tabindex]="tabindex"
-                    (valueChange)="onValueChange($event)"
-                    [clearButton]="false"
-                    fillMode="flat"
-                    [icon]="icon"
-                    [preview]="true"
-                    [svgIcon]="svgIcon"></kendo-colorpicker>
-            </div>
+          <div class="k-toolbar-item">
+            <kendo-colorpicker
+              #element
+              [attr.title]="messageFor(command)"
+              [format]="'hex'"
+              [(value)]="value"
+              [tabindex]="tabindex"
+              (valueChange)="onValueChange($event)"
+              [clearButton]="false"
+              fillMode="flat"
+              [icon]="icon"
+              [preview]="true"
+            [svgIcon]="svgIcon"></kendo-colorpicker>
+          </div>
         </ng-template>
-    `,
+        `,
                     standalone: true,
-                    imports: [ColorPickerComponent, IconWrapperComponent, NgIf]
+                    imports: [ColorPickerComponent, IconWrapperComponent]
                 }]
         }], ctorParameters: () => [{ type: i1$2.DialogService }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: i1$3.ToolBarComponent, decorators: [{
                     type: Inject,
@@ -2587,53 +2614,55 @@ class SpreadsheetForeColorComponent extends SpreadsheetDropDownToolBase {
         super('color', dialogService, localization, spreadsheetService, toolsService, toolbar);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpreadsheetForeColorComponent, deps: [{ token: i1$2.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SpreadsheetForeColorComponent, isStandalone: true, selector: "kendo-spreadsheet-forecolor-tool", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetForeColorComponent) }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SpreadsheetForeColorComponent, isStandalone: true, selector: "kendo-spreadsheet-forecolor-tool", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetForeColorComponent) }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
-            <div class="k-toolbar-item">
-                <kendo-colorpicker
-                    #element
-                    [attr.title]="messageFor(command)"
-                    [format]="'hex'"
-                    [(value)]="value"
-                    [tabindex]="tabindex"
-                    (valueChange)="onValueChange($event)"
-                    [clearButton]="false"
-                    fillMode="flat"
-                    [icon]="icon"
-                    [svgIcon]="svgIcon"
-                    [preview]="true"></kendo-colorpicker>
-            </div>
+          <div class="k-toolbar-item">
+            <kendo-colorpicker
+              #element
+              [attr.title]="messageFor(command)"
+              [format]="'hex'"
+              [(value)]="value"
+              [tabindex]="tabindex"
+              (valueChange)="onValueChange($event)"
+              [clearButton]="false"
+              fillMode="flat"
+              [icon]="icon"
+              [svgIcon]="svgIcon"
+            [preview]="true"></kendo-colorpicker>
+          </div>
         </ng-template>
         <ng-template #popupTemplate>
-            <div #popupButton
-                [tabindex]="tabindex"
-                role="menuitem"
-                class="k-item k-menu-item"
-                (click)="openDialog()">
-                <span
-                    class="k-link k-menu-link">
-                    <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
-                    <span *ngIf="messageFor(command)" class="k-menu-link-text">{{messageFor(command)}}</span>
-                </span>
-            </div>
+          <div #popupButton
+            [tabindex]="tabindex"
+            role="menuitem"
+            class="k-item k-menu-item"
+            (click)="openDialog()">
+            <span
+              class="k-link k-menu-link">
+              <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
+              @if (messageFor(command)) {
+                <span class="k-menu-link-text">{{messageFor(command)}}</span>
+              }
+            </span>
+          </div>
         </ng-template>
         <ng-template #sectionTemplate>
-            <div class="k-toolbar-item">
-                <kendo-colorpicker
-                    #element
-                    [attr.title]="messageFor(command)"
-                    [format]="'hex'"
-                    [(value)]="value"
-                    [tabindex]="tabindex"
-                    (valueChange)="onValueChange($event)"
-                    [clearButton]="false"
-                    fillMode="flat"
-                    [icon]="icon"
-                    [svgIcon]="svgIcon"
-                    [preview]="true"></kendo-colorpicker>
-            </div>
+          <div class="k-toolbar-item">
+            <kendo-colorpicker
+              #element
+              [attr.title]="messageFor(command)"
+              [format]="'hex'"
+              [(value)]="value"
+              [tabindex]="tabindex"
+              (valueChange)="onValueChange($event)"
+              [clearButton]="false"
+              fillMode="flat"
+              [icon]="icon"
+              [svgIcon]="svgIcon"
+            [preview]="true"></kendo-colorpicker>
+          </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "adaptiveMode", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "adaptiveMode", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { 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: SpreadsheetForeColorComponent, decorators: [{
             type: Component,
@@ -2642,53 +2671,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-spreadsheet-forecolor-tool',
                     template: `
         <ng-template #toolbarTemplate>
-            <div class="k-toolbar-item">
-                <kendo-colorpicker
-                    #element
-                    [attr.title]="messageFor(command)"
-                    [format]="'hex'"
-                    [(value)]="value"
-                    [tabindex]="tabindex"
-                    (valueChange)="onValueChange($event)"
-                    [clearButton]="false"
-                    fillMode="flat"
-                    [icon]="icon"
-                    [svgIcon]="svgIcon"
-                    [preview]="true"></kendo-colorpicker>
-            </div>
+          <div class="k-toolbar-item">
+            <kendo-colorpicker
+              #element
+              [attr.title]="messageFor(command)"
+              [format]="'hex'"
+              [(value)]="value"
+              [tabindex]="tabindex"
+              (valueChange)="onValueChange($event)"
+              [clearButton]="false"
+              fillMode="flat"
+              [icon]="icon"
+              [svgIcon]="svgIcon"
+            [preview]="true"></kendo-colorpicker>
+          </div>
         </ng-template>
         <ng-template #popupTemplate>
-            <div #popupButton
-                [tabindex]="tabindex"
-                role="menuitem"
-                class="k-item k-menu-item"
-                (click)="openDialog()">
-                <span
-                    class="k-link k-menu-link">
-                    <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
-                    <span *ngIf="messageFor(command)" class="k-menu-link-text">{{messageFor(command)}}</span>
-                </span>
-            </div>
+          <div #popupButton
+            [tabindex]="tabindex"
+            role="menuitem"
+            class="k-item k-menu-item"
+            (click)="openDialog()">
+            <span
+              class="k-link k-menu-link">
+              <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
+              @if (messageFor(command)) {
+                <span class="k-menu-link-text">{{messageFor(command)}}</span>
+              }
+            </span>
+          </div>
         </ng-template>
         <ng-template #sectionTemplate>
-            <div class="k-toolbar-item">
-                <kendo-colorpicker
-                    #element
-                    [attr.title]="messageFor(command)"
-                    [format]="'hex'"
-                    [(value)]="value"
-                    [tabindex]="tabindex"
-                    (valueChange)="onValueChange($event)"
-                    [clearButton]="false"
-                    fillMode="flat"
-                    [icon]="icon"
-                    [svgIcon]="svgIcon"
-                    [preview]="true"></kendo-colorpicker>
-            </div>
+          <div class="k-toolbar-item">
+            <kendo-colorpicker
+              #element
+              [attr.title]="messageFor(command)"
+              [format]="'hex'"
+              [(value)]="value"
+              [tabindex]="tabindex"
+              (valueChange)="onValueChange($event)"
+              [clearButton]="false"
+              fillMode="flat"
+              [icon]="icon"
+              [svgIcon]="svgIcon"
+            [preview]="true"></kendo-colorpicker>
+          </div>
         </ng-template>
-    `,
+        `,
                     standalone: true,
-                    imports: [ColorPickerComponent, IconWrapperComponent, NgIf]
+                    imports: [ColorPickerComponent, IconWrapperComponent]
                 }]
         }], ctorParameters: () => [{ type: i1$2.DialogService }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: i1$3.ToolBarComponent, decorators: [{
                     type: Inject,
@@ -2850,39 +2881,41 @@ class SpreadsheetFontSizeComponent extends SpreadsheetDropDownToolBase {
         super('fontSize', dialogService, localization, spreadsheetService, toolsService, toolbar);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpreadsheetFontSizeComponent, deps: [{ token: i1$2.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SpreadsheetFontSizeComponent, isStandalone: true, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetFontSizeComponent) }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SpreadsheetFontSizeComponent, isStandalone: true, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetFontSizeComponent) }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
-            <kendo-spreadsheet-fontsize-dropdownlist
-                #element
-                [data]="data"
-                [(value)]="value"
-                [title]="messageFor(command)"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"></kendo-spreadsheet-fontsize-dropdownlist>
+          <kendo-spreadsheet-fontsize-dropdownlist
+            #element
+            [data]="data"
+            [(value)]="value"
+            [title]="messageFor(command)"
+            [tabindex]="tabindex"
+          (valueChange)="onValueChange($event)"></kendo-spreadsheet-fontsize-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <div #popupButton
-                [tabindex]="tabindex"
-                role="menuitem"
-                class="k-item k-menu-item"
-                (click)="openDialog()">
-                <span
-                    class="k-link k-menu-link">
-                    <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
-                    <span *ngIf="messageFor(command)" class="k-menu-link-text">{{messageFor(command)}}</span>
-                </span>
-            </div>
+          <div #popupButton
+            [tabindex]="tabindex"
+            role="menuitem"
+            class="k-item k-menu-item"
+            (click)="openDialog()">
+            <span
+              class="k-link k-menu-link">
+              <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
+              @if (messageFor(command)) {
+                <span class="k-menu-link-text">{{messageFor(command)}}</span>
+              }
+            </span>
+          </div>
         </ng-template>
         <ng-template #sectionTemplate>
-            <kendo-spreadsheet-fontsize-dropdownlist
-                #element
-                [data]="data"
-                [(value)]="value"
-                [title]="messageFor(command)"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"></kendo-spreadsheet-fontsize-dropdownlist>
+          <kendo-spreadsheet-fontsize-dropdownlist
+            #element
+            [data]="data"
+            [(value)]="value"
+            [title]="messageFor(command)"
+            [tabindex]="tabindex"
+          (valueChange)="onValueChange($event)"></kendo-spreadsheet-fontsize-dropdownlist>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: FontSizeDropDownListComponent, selector: "kendo-spreadsheet-fontsize-dropdownlist" }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: FontSizeDropDownListComponent, selector: "kendo-spreadsheet-fontsize-dropdownlist" }, { 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: SpreadsheetFontSizeComponent, decorators: [{
             type: Component,
@@ -2891,39 +2924,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]',
                     template: `
         <ng-template #toolbarTemplate>
-            <kendo-spreadsheet-fontsize-dropdownlist
-                #element
-                [data]="data"
-                [(value)]="value"
-                [title]="messageFor(command)"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"></kendo-spreadsheet-fontsize-dropdownlist>
+          <kendo-spreadsheet-fontsize-dropdownlist
+            #element
+            [data]="data"
+            [(value)]="value"
+            [title]="messageFor(command)"
+            [tabindex]="tabindex"
+          (valueChange)="onValueChange($event)"></kendo-spreadsheet-fontsize-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <div #popupButton
-                [tabindex]="tabindex"
-                role="menuitem"
-                class="k-item k-menu-item"
-                (click)="openDialog()">
-                <span
-                    class="k-link k-menu-link">
-                    <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
-                    <span *ngIf="messageFor(command)" class="k-menu-link-text">{{messageFor(command)}}</span>
-                </span>
-            </div>
+          <div #popupButton
+            [tabindex]="tabindex"
+            role="menuitem"
+            class="k-item k-menu-item"
+            (click)="openDialog()">
+            <span
+              class="k-link k-menu-link">
+              <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
+              @if (messageFor(command)) {
+                <span class="k-menu-link-text">{{messageFor(command)}}</span>
+              }
+            </span>
+          </div>
         </ng-template>
         <ng-template #sectionTemplate>
-            <kendo-spreadsheet-fontsize-dropdownlist
-                #element
-                [data]="data"
-                [(value)]="value"
-                [title]="messageFor(command)"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"></kendo-spreadsheet-fontsize-dropdownlist>
+          <kendo-spreadsheet-fontsize-dropdownlist
+            #element
+            [data]="data"
+            [(value)]="value"
+            [title]="messageFor(command)"
+            [tabindex]="tabindex"
+          (valueChange)="onValueChange($event)"></kendo-spreadsheet-fontsize-dropdownlist>
         </ng-template>
-    `,
+        `,
                     standalone: true,
-                    imports: [FontSizeDropDownListComponent, IconWrapperComponent, NgIf]
+                    imports: [FontSizeDropDownListComponent, IconWrapperComponent]
                 }]
         }], ctorParameters: () => [{ type: i1$2.DialogService }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: i1$3.ToolBarComponent, decorators: [{
                     type: Inject,
@@ -2942,39 +2977,41 @@ class SpreadsheetFontFamilyComponent extends SpreadsheetDropDownToolBase {
         super('fontFamily', dialogService, localization, spreadsheetService, toolsService, toolbar);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpreadsheetFontFamilyComponent, deps: [{ token: i1$2.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SpreadsheetFontFamilyComponent, isStandalone: true, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetFontFamilyComponent) }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SpreadsheetFontFamilyComponent, isStandalone: true, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetFontFamilyComponent) }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
-            <kendo-spreadsheet-fontfamily-dropdownlist
-                #element
-                [data]="data"
-                [(value)]="value"
-                [title]="messageFor(command)"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"></kendo-spreadsheet-fontfamily-dropdownlist>
+          <kendo-spreadsheet-fontfamily-dropdownlist
+            #element
+            [data]="data"
+            [(value)]="value"
+            [title]="messageFor(command)"
+            [tabindex]="tabindex"
+          (valueChange)="onValueChange($event)"></kendo-spreadsheet-fontfamily-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <div #popupButton
-                [tabindex]="tabindex"
-                role="menuitem"
-                class="k-item k-menu-item"
-                (click)="openDialog()">
-                <span
-                    class="k-link k-menu-link">
-                    <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
-                    <span *ngIf="messageFor(command)" class="k-menu-link-text">{{messageFor(command)}}</span>
-                </span>
-            </div>
+          <div #popupButton
+            [tabindex]="tabindex"
+            role="menuitem"
+            class="k-item k-menu-item"
+            (click)="openDialog()">
+            <span
+              class="k-link k-menu-link">
+              <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
+              @if (messageFor(command)) {
+                <span class="k-menu-link-text">{{messageFor(command)}}</span>
+              }
+            </span>
+          </div>
         </ng-template>
         <ng-template #sectionTemplate>
-            <kendo-spreadsheet-fontfamily-dropdownlist
-                #element
-                [data]="data"
-                [(value)]="value"
-                [title]="messageFor(command)"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"></kendo-spreadsheet-fontfamily-dropdownlist>
+          <kendo-spreadsheet-fontfamily-dropdownlist
+            #element
+            [data]="data"
+            [(value)]="value"
+            [title]="messageFor(command)"
+            [tabindex]="tabindex"
+          (valueChange)="onValueChange($event)"></kendo-spreadsheet-fontfamily-dropdownlist>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: FontFamilyDropDownListComponent, selector: "kendo-spreadsheet-fontfamily-dropdownlist" }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: FontFamilyDropDownListComponent, selector: "kendo-spreadsheet-fontfamily-dropdownlist" }, { 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: SpreadsheetFontFamilyComponent, decorators: [{
             type: Component,
@@ -2983,39 +3020,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]',
                     template: `
         <ng-template #toolbarTemplate>
-            <kendo-spreadsheet-fontfamily-dropdownlist
-                #element
-                [data]="data"
-                [(value)]="value"
-                [title]="messageFor(command)"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"></kendo-spreadsheet-fontfamily-dropdownlist>
+          <kendo-spreadsheet-fontfamily-dropdownlist
+            #element
+            [data]="data"
+            [(value)]="value"
+            [title]="messageFor(command)"
+            [tabindex]="tabindex"
+          (valueChange)="onValueChange($event)"></kendo-spreadsheet-fontfamily-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <div #popupButton
-                [tabindex]="tabindex"
-                role="menuitem"
-                class="k-item k-menu-item"
-                (click)="openDialog()">
-                <span
-                    class="k-link k-menu-link">
-                    <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
-                    <span *ngIf="messageFor(command)" class="k-menu-link-text">{{messageFor(command)}}</span>
-                </span>
-            </div>
+          <div #popupButton
+            [tabindex]="tabindex"
+            role="menuitem"
+            class="k-item k-menu-item"
+            (click)="openDialog()">
+            <span
+              class="k-link k-menu-link">
+              <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
+              @if (messageFor(command)) {
+                <span class="k-menu-link-text">{{messageFor(command)}}</span>
+              }
+            </span>
+          </div>
         </ng-template>
         <ng-template #sectionTemplate>
-            <kendo-spreadsheet-fontfamily-dropdownlist
-                #element
-                [data]="data"
-                [(value)]="value"
-                [title]="messageFor(command)"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"></kendo-spreadsheet-fontfamily-dropdownlist>
+          <kendo-spreadsheet-fontfamily-dropdownlist
+            #element
+            [data]="data"
+            [(value)]="value"
+            [title]="messageFor(command)"
+            [tabindex]="tabindex"
+          (valueChange)="onValueChange($event)"></kendo-spreadsheet-fontfamily-dropdownlist>
         </ng-template>
-    `,
+        `,
                     standalone: true,
-                    imports: [FontFamilyDropDownListComponent, IconWrapperComponent, NgIf]
+                    imports: [FontFamilyDropDownListComponent, IconWrapperComponent]
                 }]
         }], ctorParameters: () => [{ type: i1$2.DialogService }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: i1$3.ToolBarComponent, decorators: [{
                     type: Inject,
@@ -4273,242 +4312,256 @@ class DataValidationDialogComponent extends DialogContentBase {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataValidationDialogComponent, deps: [{ token: i1.LocalizationService }, { token: SpreadsheetService }, { token: i0.NgZone }, { token: i1$2.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DataValidationDialogComponent, isStandalone: true, selector: "ng-component", outputs: { dialogAction: "dialogAction" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DataValidationDialogComponent, isStandalone: true, selector: "ng-component", outputs: { dialogAction: "dialogAction" }, usesInheritance: true, ngImport: i0, template: `
         <form class="k-form k-form-md" [formGroup]="validationFormGroup">
-            <div class="k-form-field">
-                <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationCellRange')" [for]="rangeInput"></kendo-label>
-                <div class="k-form-field-wrap">
-                    <kendo-textbox #rangeInput
-                        [clearButton]="true"
-                        [value]="cellRange"
-                        (valueChange)="onRangeChange($event, rangeInput)"
-                        formControlName="range">
-                    </kendo-textbox>
-                </div>
+          <div class="k-form-field">
+            <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationCellRange')" [for]="rangeInput"></kendo-label>
+            <div class="k-form-field-wrap">
+              <kendo-textbox #rangeInput
+                [clearButton]="true"
+                [value]="cellRange"
+                (valueChange)="onRangeChange($event, rangeInput)"
+                formControlName="range">
+              </kendo-textbox>
             </div>
-            <div class="k-form-field">
-                <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationCriteria')" [for]="criteriaInput"></kendo-label>
-                <div class="k-form-field-wrap">
-                    <kendo-dropdownlist #criteriaInput
-                        [data]="criteriaList"
-                        [value]="criteria"
-                        (selectionChange)="onSelectionChange($event, 'criteria')"
-                        textField="name"
-                        valueField="type">
-                    </kendo-dropdownlist>
-                </div>
+          </div>
+          <div class="k-form-field">
+            <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationCriteria')" [for]="criteriaInput"></kendo-label>
+            <div class="k-form-field-wrap">
+              <kendo-dropdownlist #criteriaInput
+                [data]="criteriaList"
+                [value]="criteria"
+                (selectionChange)="onSelectionChange($event, 'criteria')"
+                textField="name"
+                valueField="type">
+              </kendo-dropdownlist>
             </div>
-            <ng-container *ngIf="criteria.type !== 'any'">
-                <div class="k-form-field" *ngIf="showComparer">
-                    <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationComparer')" [for]="comparerInput"></kendo-label>
-                    <div class="k-form-field-wrap">
-                        <kendo-dropdownlist #comparerInput
-                            [data]="comparerList"
-                            [value]="comparer"
-                            (selectionChange)="onSelectionChange($event, 'comparer')"
-                            textField="name"
-                            valueField="type">
-                        </kendo-dropdownlist>
-                    </div>
-                </div>
-                <div class="k-form-field" *ngIf="singleValue; else betweenValues">
-                    <kendo-label class="k-label k-form-label" [text]="getValueLabel()" [for]="minInput"></kendo-label>
-                    <div class="k-form-field-wrap">
-                        <kendo-textbox #minInput [(value)]="from" formControlName="min"></kendo-textbox>
-                    </div>
-                </div>
-                <ng-template #betweenValues>
-                    <div class="k-form-field">
-                        <kendo-label class="k-form-label" [text]="getLocalizationMessage(criteria.type === 'date' ? 'validationStartValue' : 'validationMinValue')" [for]="betweenMinInput"></kendo-label>
-                        <div class="k-form-field-wrap">
-                            <kendo-textbox #betweenMinInput [(value)]="from" formControlName="min"></kendo-textbox>
-                        </div>
-                    </div>
-                    <div class="k-form-field">
-                        <kendo-label class="k-form-label" [text]="getLocalizationMessage(criteria.type === 'date' ? 'validationEndValue' : 'validationMaxValue')" [for]="betweenMaxInput"></kendo-label>
-                        <div class="k-form-field-wrap">
-                            <kendo-textbox #betweenMaxInput [(value)]="to" formControlName="max"></kendo-textbox>
-                        </div>
-                    </div>
-                </ng-template>
-                <div class="k-form-field" *ngIf="criteria.type === 'list'">
-                    <div class="k-form-field-wrap">
-                        <kendo-checkbox #showBtnCheckBox [(checkedState)]="showButton"></kendo-checkbox>
-                        <kendo-label class="k-checkbox-label" [for]="showBtnCheckBox" [text]="getLocalizationMessage('validationShowListButtonCheckbox')"></kendo-label>
-                    </div>
-                </div>
-                <div class="k-form-field">
-                    <div class="k-form-field-wrap">
-                        <kendo-checkbox #ignoreBlankCheckBox [(checkedState)]="ignoreBlank"></kendo-checkbox>
-                        <kendo-label class="k-checkbox-label" [for]="ignoreBlankCheckBox" [text]="getLocalizationMessage('validationIgnoreBlankCheckbox')"></kendo-label>
-                    </div>
+          </div>
+          @if (criteria.type !== 'any') {
+            @if (showComparer) {
+              <div class="k-form-field">
+                <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationComparer')" [for]="comparerInput"></kendo-label>
+                <div class="k-form-field-wrap">
+                  <kendo-dropdownlist #comparerInput
+                    [data]="comparerList"
+                    [value]="comparer"
+                    (selectionChange)="onSelectionChange($event, 'comparer')"
+                    textField="name"
+                    valueField="type">
+                  </kendo-dropdownlist>
                 </div>
-                <div class="k-form-field">
-                    <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationOnInvalidData')"></kendo-label>
-                    <div class="k-form-field-wrap">
-                        <ul class="k-radio-list k-list-vertical">
-                            <li class="k-radio-list-item">
-                                <kendo-radiobutton #rejectRadioBtn formControlName="onInvalidData" value="reject"></kendo-radiobutton>
-                                <kendo-label class="k-radio-label" [for]="rejectRadioBtn" [text]="getLocalizationMessage('validationRejectInput')"></kendo-label>
-                            </li>
-                            <li class="k-radio-list-item">
-                                <kendo-radiobutton #warningRadioBtn formControlName="onInvalidData" value="warning"></kendo-radiobutton>
-                                <kendo-label class="k-radio-label" [for]="warningRadioBtn" [text]="getLocalizationMessage('validationShowWarning')"></kendo-label>
-                            </li>
-                        </ul>
-                    </div>
+              </div>
+            }
+            @if (singleValue) {
+              <div class="k-form-field">
+                <kendo-label class="k-label k-form-label" [text]="getValueLabel()" [for]="minInput"></kendo-label>
+                <div class="k-form-field-wrap">
+                  <kendo-textbox #minInput [(value)]="from" formControlName="min"></kendo-textbox>
                 </div>
-                <div class="k-form-field">
-                    <div class="k-form-field-wrap">
-                        <kendo-checkbox #showHintCheckBox [(checkedState)]="showHint"></kendo-checkbox>
-                        <kendo-label class="k-checkbox-label" [for]="showHintCheckBox" [text]="getLocalizationMessage('validationShowHint')"></kendo-label>
-                    </div>
+              </div>
+            } @else {
+              <div class="k-form-field">
+                <kendo-label class="k-form-label" [text]="getLocalizationMessage(criteria.type === 'date' ? 'validationStartValue' : 'validationMinValue')" [for]="betweenMinInput"></kendo-label>
+                <div class="k-form-field-wrap">
+                  <kendo-textbox #betweenMinInput [(value)]="from" formControlName="min"></kendo-textbox>
                 </div>
-                <div class="k-form-field">
-                    <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationHintTitle')" [for]="hintTitleInput"></kendo-label>
-                    <div class="k-form-field-wrap">
-                        <kendo-textbox #hintTitleInput [(value)]="hintTitle"></kendo-textbox>
-                    </div>
+              </div>
+              <div class="k-form-field">
+                <kendo-label class="k-form-label" [text]="getLocalizationMessage(criteria.type === 'date' ? 'validationEndValue' : 'validationMaxValue')" [for]="betweenMaxInput"></kendo-label>
+                <div class="k-form-field-wrap">
+                  <kendo-textbox #betweenMaxInput [(value)]="to" formControlName="max"></kendo-textbox>
                 </div>
-                <div class="k-form-field">
-                    <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationHintMessage')" [for]="hintMessageInput"></kendo-label>
-                    <div class="k-form-field-wrap">
-                        <kendo-textbox #hintMessageInput [(value)]="hintMessage"></kendo-textbox>
-                    </div>
+              </div>
+            }
+            @if (criteria.type === 'list') {
+              <div class="k-form-field">
+                <div class="k-form-field-wrap">
+                  <kendo-checkbox #showBtnCheckBox [(checkedState)]="showButton"></kendo-checkbox>
+                  <kendo-label class="k-checkbox-label" [for]="showBtnCheckBox" [text]="getLocalizationMessage('validationShowListButtonCheckbox')"></kendo-label>
                 </div>
-            </ng-container>
+              </div>
+            }
+            <div class="k-form-field">
+              <div class="k-form-field-wrap">
+                <kendo-checkbox #ignoreBlankCheckBox [(checkedState)]="ignoreBlank"></kendo-checkbox>
+                <kendo-label class="k-checkbox-label" [for]="ignoreBlankCheckBox" [text]="getLocalizationMessage('validationIgnoreBlankCheckbox')"></kendo-label>
+              </div>
+            </div>
+            <div class="k-form-field">
+              <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationOnInvalidData')"></kendo-label>
+              <div class="k-form-field-wrap">
+                <ul class="k-radio-list k-list-vertical">
+                  <li class="k-radio-list-item">
+                    <kendo-radiobutton #rejectRadioBtn formControlName="onInvalidData" value="reject"></kendo-radiobutton>
+                    <kendo-label class="k-radio-label" [for]="rejectRadioBtn" [text]="getLocalizationMessage('validationRejectInput')"></kendo-label>
+                  </li>
+                  <li class="k-radio-list-item">
+                    <kendo-radiobutton #warningRadioBtn formControlName="onInvalidData" value="warning"></kendo-radiobutton>
+                    <kendo-label class="k-radio-label" [for]="warningRadioBtn" [text]="getLocalizationMessage('validationShowWarning')"></kendo-label>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="k-form-field">
+              <div class="k-form-field-wrap">
+                <kendo-checkbox #showHintCheckBox [(checkedState)]="showHint"></kendo-checkbox>
+                <kendo-label class="k-checkbox-label" [for]="showHintCheckBox" [text]="getLocalizationMessage('validationShowHint')"></kendo-label>
+              </div>
+            </div>
+            <div class="k-form-field">
+              <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationHintTitle')" [for]="hintTitleInput"></kendo-label>
+              <div class="k-form-field-wrap">
+                <kendo-textbox #hintTitleInput [(value)]="hintTitle"></kendo-textbox>
+              </div>
+            </div>
+            <div class="k-form-field">
+              <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationHintMessage')" [for]="hintMessageInput"></kendo-label>
+              <div class="k-form-field-wrap">
+                <kendo-textbox #hintMessageInput [(value)]="hintMessage"></kendo-textbox>
+              </div>
+            </div>
+          }
         </form>
         <kendo-dialog-actions layout="start" #dialogActions>
-            <button kendoButton themeColor="primary" [disabled]="validationFormGroup?.invalid" (click)="dialogAction.emit(getLocalizationMessage('dialogApply'))">
-                {{getLocalizationMessage('dialogApply')}}
-            </button>
-            <button kendoButton (click)="dialogAction.emit(getLocalizationMessage('dialogCancel'))">{{getLocalizationMessage('dialogCancel')}}</button>
-            <button kendoButton themeColor="error" fillMode="flat" *ngIf="validationPresent" (click)="dialogAction.emit(getLocalizationMessage('dialogRemove'))">
-                {{getLocalizationMessage('dialogRemove')}}
+          <button kendoButton themeColor="primary" [disabled]="validationFormGroup?.invalid" (click)="dialogAction.emit(getLocalizationMessage('dialogApply'))">
+            {{getLocalizationMessage('dialogApply')}}
+          </button>
+          <button kendoButton (click)="dialogAction.emit(getLocalizationMessage('dialogCancel'))">{{getLocalizationMessage('dialogCancel')}}</button>
+          @if (validationPresent) {
+            <button kendoButton themeColor="error" fillMode="flat" (click)="dialogAction.emit(getLocalizationMessage('dialogRemove'))">
+              {{getLocalizationMessage('dialogRemove')}}
             </button>
+          }
         </kendo-dialog-actions>
-    `, isInline: true, dependencies: [{ 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"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: RadioButtonComponent, selector: "kendo-radiobutton", inputs: ["checked"], outputs: ["checkedChange"], exportAs: ["kendoRadioButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { 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"] }] });
+        `, isInline: true, dependencies: [{ 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"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: RadioButtonComponent, selector: "kendo-radiobutton", inputs: ["checked"], outputs: ["checkedChange"], exportAs: ["kendoRadioButton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataValidationDialogComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
         <form class="k-form k-form-md" [formGroup]="validationFormGroup">
-            <div class="k-form-field">
-                <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationCellRange')" [for]="rangeInput"></kendo-label>
-                <div class="k-form-field-wrap">
-                    <kendo-textbox #rangeInput
-                        [clearButton]="true"
-                        [value]="cellRange"
-                        (valueChange)="onRangeChange($event, rangeInput)"
-                        formControlName="range">
-                    </kendo-textbox>
-                </div>
+          <div class="k-form-field">
+            <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationCellRange')" [for]="rangeInput"></kendo-label>
+            <div class="k-form-field-wrap">
+              <kendo-textbox #rangeInput
+                [clearButton]="true"
+                [value]="cellRange"
+                (valueChange)="onRangeChange($event, rangeInput)"
+                formControlName="range">
+              </kendo-textbox>
             </div>
-            <div class="k-form-field">
-                <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationCriteria')" [for]="criteriaInput"></kendo-label>
-                <div class="k-form-field-wrap">
-                    <kendo-dropdownlist #criteriaInput
-                        [data]="criteriaList"
-                        [value]="criteria"
-                        (selectionChange)="onSelectionChange($event, 'criteria')"
-                        textField="name"
-                        valueField="type">
-                    </kendo-dropdownlist>
-                </div>
+          </div>
+          <div class="k-form-field">
+            <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationCriteria')" [for]="criteriaInput"></kendo-label>
+            <div class="k-form-field-wrap">
+              <kendo-dropdownlist #criteriaInput
+                [data]="criteriaList"
+                [value]="criteria"
+                (selectionChange)="onSelectionChange($event, 'criteria')"
+                textField="name"
+                valueField="type">
+              </kendo-dropdownlist>
             </div>
-            <ng-container *ngIf="criteria.type !== 'any'">
-                <div class="k-form-field" *ngIf="showComparer">
-                    <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationComparer')" [for]="comparerInput"></kendo-label>
-                    <div class="k-form-field-wrap">
-                        <kendo-dropdownlist #comparerInput
-                            [data]="comparerList"
-                            [value]="comparer"
-                            (selectionChange)="onSelectionChange($event, 'comparer')"
-                            textField="name"
-                            valueField="type">
-                        </kendo-dropdownlist>
-                    </div>
-                </div>
-                <div class="k-form-field" *ngIf="singleValue; else betweenValues">
-                    <kendo-label class="k-label k-form-label" [text]="getValueLabel()" [for]="minInput"></kendo-label>
-                    <div class="k-form-field-wrap">
-                        <kendo-textbox #minInput [(value)]="from" formControlName="min"></kendo-textbox>
-                    </div>
-                </div>
-                <ng-template #betweenValues>
-                    <div class="k-form-field">
-                        <kendo-label class="k-form-label" [text]="getLocalizationMessage(criteria.type === 'date' ? 'validationStartValue' : 'validationMinValue')" [for]="betweenMinInput"></kendo-label>
-                        <div class="k-form-field-wrap">
-                            <kendo-textbox #betweenMinInput [(value)]="from" formControlName="min"></kendo-textbox>
-                        </div>
-                    </div>
-                    <div class="k-form-field">
-                        <kendo-label class="k-form-label" [text]="getLocalizationMessage(criteria.type === 'date' ? 'validationEndValue' : 'validationMaxValue')" [for]="betweenMaxInput"></kendo-label>
-                        <div class="k-form-field-wrap">
-                            <kendo-textbox #betweenMaxInput [(value)]="to" formControlName="max"></kendo-textbox>
-                        </div>
-                    </div>
-                </ng-template>
-                <div class="k-form-field" *ngIf="criteria.type === 'list'">
-                    <div class="k-form-field-wrap">
-                        <kendo-checkbox #showBtnCheckBox [(checkedState)]="showButton"></kendo-checkbox>
-                        <kendo-label class="k-checkbox-label" [for]="showBtnCheckBox" [text]="getLocalizationMessage('validationShowListButtonCheckbox')"></kendo-label>
-                    </div>
-                </div>
-                <div class="k-form-field">
-                    <div class="k-form-field-wrap">
-                        <kendo-checkbox #ignoreBlankCheckBox [(checkedState)]="ignoreBlank"></kendo-checkbox>
-                        <kendo-label class="k-checkbox-label" [for]="ignoreBlankCheckBox" [text]="getLocalizationMessage('validationIgnoreBlankCheckbox')"></kendo-label>
-                    </div>
+          </div>
+          @if (criteria.type !== 'any') {
+            @if (showComparer) {
+              <div class="k-form-field">
+                <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationComparer')" [for]="comparerInput"></kendo-label>
+                <div class="k-form-field-wrap">
+                  <kendo-dropdownlist #comparerInput
+                    [data]="comparerList"
+                    [value]="comparer"
+                    (selectionChange)="onSelectionChange($event, 'comparer')"
+                    textField="name"
+                    valueField="type">
+                  </kendo-dropdownlist>
                 </div>
-                <div class="k-form-field">
-                    <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationOnInvalidData')"></kendo-label>
-                    <div class="k-form-field-wrap">
-                        <ul class="k-radio-list k-list-vertical">
-                            <li class="k-radio-list-item">
-                                <kendo-radiobutton #rejectRadioBtn formControlName="onInvalidData" value="reject"></kendo-radiobutton>
-                                <kendo-label class="k-radio-label" [for]="rejectRadioBtn" [text]="getLocalizationMessage('validationRejectInput')"></kendo-label>
-                            </li>
-                            <li class="k-radio-list-item">
-                                <kendo-radiobutton #warningRadioBtn formControlName="onInvalidData" value="warning"></kendo-radiobutton>
-                                <kendo-label class="k-radio-label" [for]="warningRadioBtn" [text]="getLocalizationMessage('validationShowWarning')"></kendo-label>
-                            </li>
-                        </ul>
-                    </div>
+              </div>
+            }
+            @if (singleValue) {
+              <div class="k-form-field">
+                <kendo-label class="k-label k-form-label" [text]="getValueLabel()" [for]="minInput"></kendo-label>
+                <div class="k-form-field-wrap">
+                  <kendo-textbox #minInput [(value)]="from" formControlName="min"></kendo-textbox>
                 </div>
-                <div class="k-form-field">
-                    <div class="k-form-field-wrap">
-                        <kendo-checkbox #showHintCheckBox [(checkedState)]="showHint"></kendo-checkbox>
-                        <kendo-label class="k-checkbox-label" [for]="showHintCheckBox" [text]="getLocalizationMessage('validationShowHint')"></kendo-label>
-                    </div>
+              </div>
+            } @else {
+              <div class="k-form-field">
+                <kendo-label class="k-form-label" [text]="getLocalizationMessage(criteria.type === 'date' ? 'validationStartValue' : 'validationMinValue')" [for]="betweenMinInput"></kendo-label>
+                <div class="k-form-field-wrap">
+                  <kendo-textbox #betweenMinInput [(value)]="from" formControlName="min"></kendo-textbox>
                 </div>
-                <div class="k-form-field">
-                    <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationHintTitle')" [for]="hintTitleInput"></kendo-label>
-                    <div class="k-form-field-wrap">
-                        <kendo-textbox #hintTitleInput [(value)]="hintTitle"></kendo-textbox>
-                    </div>
+              </div>
+              <div class="k-form-field">
+                <kendo-label class="k-form-label" [text]="getLocalizationMessage(criteria.type === 'date' ? 'validationEndValue' : 'validationMaxValue')" [for]="betweenMaxInput"></kendo-label>
+                <div class="k-form-field-wrap">
+                  <kendo-textbox #betweenMaxInput [(value)]="to" formControlName="max"></kendo-textbox>
                 </div>
-                <div class="k-form-field">
-                    <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationHintMessage')" [for]="hintMessageInput"></kendo-label>
-                    <div class="k-form-field-wrap">
-                        <kendo-textbox #hintMessageInput [(value)]="hintMessage"></kendo-textbox>
-                    </div>
+              </div>
+            }
+            @if (criteria.type === 'list') {
+              <div class="k-form-field">
+                <div class="k-form-field-wrap">
+                  <kendo-checkbox #showBtnCheckBox [(checkedState)]="showButton"></kendo-checkbox>
+                  <kendo-label class="k-checkbox-label" [for]="showBtnCheckBox" [text]="getLocalizationMessage('validationShowListButtonCheckbox')"></kendo-label>
                 </div>
-            </ng-container>
+              </div>
+            }
+            <div class="k-form-field">
+              <div class="k-form-field-wrap">
+                <kendo-checkbox #ignoreBlankCheckBox [(checkedState)]="ignoreBlank"></kendo-checkbox>
+                <kendo-label class="k-checkbox-label" [for]="ignoreBlankCheckBox" [text]="getLocalizationMessage('validationIgnoreBlankCheckbox')"></kendo-label>
+              </div>
+            </div>
+            <div class="k-form-field">
+              <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationOnInvalidData')"></kendo-label>
+              <div class="k-form-field-wrap">
+                <ul class="k-radio-list k-list-vertical">
+                  <li class="k-radio-list-item">
+                    <kendo-radiobutton #rejectRadioBtn formControlName="onInvalidData" value="reject"></kendo-radiobutton>
+                    <kendo-label class="k-radio-label" [for]="rejectRadioBtn" [text]="getLocalizationMessage('validationRejectInput')"></kendo-label>
+                  </li>
+                  <li class="k-radio-list-item">
+                    <kendo-radiobutton #warningRadioBtn formControlName="onInvalidData" value="warning"></kendo-radiobutton>
+                    <kendo-label class="k-radio-label" [for]="warningRadioBtn" [text]="getLocalizationMessage('validationShowWarning')"></kendo-label>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="k-form-field">
+              <div class="k-form-field-wrap">
+                <kendo-checkbox #showHintCheckBox [(checkedState)]="showHint"></kendo-checkbox>
+                <kendo-label class="k-checkbox-label" [for]="showHintCheckBox" [text]="getLocalizationMessage('validationShowHint')"></kendo-label>
+              </div>
+            </div>
+            <div class="k-form-field">
+              <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationHintTitle')" [for]="hintTitleInput"></kendo-label>
+              <div class="k-form-field-wrap">
+                <kendo-textbox #hintTitleInput [(value)]="hintTitle"></kendo-textbox>
+              </div>
+            </div>
+            <div class="k-form-field">
+              <kendo-label class="k-form-label" [text]="getLocalizationMessage('validationHintMessage')" [for]="hintMessageInput"></kendo-label>
+              <div class="k-form-field-wrap">
+                <kendo-textbox #hintMessageInput [(value)]="hintMessage"></kendo-textbox>
+              </div>
+            </div>
+          }
         </form>
         <kendo-dialog-actions layout="start" #dialogActions>
-            <button kendoButton themeColor="primary" [disabled]="validationFormGroup?.invalid" (click)="dialogAction.emit(getLocalizationMessage('dialogApply'))">
-                {{getLocalizationMessage('dialogApply')}}
-            </button>
-            <button kendoButton (click)="dialogAction.emit(getLocalizationMessage('dialogCancel'))">{{getLocalizationMessage('dialogCancel')}}</button>
-            <button kendoButton themeColor="error" fillMode="flat" *ngIf="validationPresent" (click)="dialogAction.emit(getLocalizationMessage('dialogRemove'))">
-                {{getLocalizationMessage('dialogRemove')}}
+          <button kendoButton themeColor="primary" [disabled]="validationFormGroup?.invalid" (click)="dialogAction.emit(getLocalizationMessage('dialogApply'))">
+            {{getLocalizationMessage('dialogApply')}}
+          </button>
+          <button kendoButton (click)="dialogAction.emit(getLocalizationMessage('dialogCancel'))">{{getLocalizationMessage('dialogCancel')}}</button>
+          @if (validationPresent) {
+            <button kendoButton themeColor="error" fillMode="flat" (click)="dialogAction.emit(getLocalizationMessage('dialogRemove'))">
+              {{getLocalizationMessage('dialogRemove')}}
             </button>
+          }
         </kendo-dialog-actions>
-    `,
+        `,
                     standalone: true,
-                    imports: [TextBoxComponent, DropDownListComponent, CheckBoxComponent, RadioButtonComponent, NgIf, ReactiveFormsModule, LabelComponent, DialogActionsComponent, ButtonComponent]
+                    imports: [TextBoxComponent, DropDownListComponent, CheckBoxComponent, RadioButtonComponent, ReactiveFormsModule, LabelComponent, DialogActionsComponent, ButtonComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: SpreadsheetService }, { type: i0.NgZone }, { type: i1$2.DialogRef }], propDecorators: { dialogAction: [{
                 type: Output
@@ -4739,42 +4792,46 @@ class ListEditorComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListEditorComponent, deps: [{ token: i0.NgZone }, { token: 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: SpreadsheetService }], propDecorators: { itemSelect: [{
                 type: Output
@@ -5652,7 +5709,7 @@ class SpreadsheetComponent {
         return new Date(serialToDate(isPresent(sheet) ? sheet.range(validation.value.row, validation.value.col).value() : validation));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpreadsheetComponent, deps: [{ token: i0.NgZone }, { token: i1$4.IntlService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ErrorHandlingService }, { token: i1$2.DialogService }, { token: i1$1.PopupService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SpreadsheetComponent, isStandalone: true, selector: "kendo-spreadsheet", inputs: { menuItems: "menuItems", overflow: "overflow", formulaListMaxHeight: "formulaListMaxHeight", activeSheet: "activeSheet", sheets: "sheets", columns: "columns", columnWidth: "columnWidth", defaultCellStyle: "defaultCellStyle", headerHeight: "headerHeight", headerWidth: "headerWidth", rowHeight: "rowHeight", rows: "rows", cellEditors: "cellEditors", images: "images", excel: "excel" }, outputs: { change: "change", formatChange: "formatChange", selectionChange: "selectionChange", excelExport: "excelExport", excelImport: "excelImport", activeSheetChange: "activeSheetChange" }, host: { properties: { "class.k-spreadsheet": "this.hostClass", "attr.role": "this.role" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SpreadsheetComponent, isStandalone: true, selector: "kendo-spreadsheet", inputs: { menuItems: "menuItems", overflow: "overflow", formulaListMaxHeight: "formulaListMaxHeight", activeSheet: "activeSheet", sheets: "sheets", columns: "columns", columnWidth: "columnWidth", defaultCellStyle: "defaultCellStyle", headerHeight: "headerHeight", headerWidth: "headerWidth", rowHeight: "rowHeight", rows: "rows", cellEditors: "cellEditors", images: "images", excel: "excel" }, outputs: { change: "change", formatChange: "formatChange", selectionChange: "selectionChange", excelExport: "excelExport", excelImport: "excelImport", activeSheetChange: "activeSheetChange" }, host: { properties: { "class.k-spreadsheet": "this.hostClass", "attr.role": "this.role" } }, providers: [
             SpreadsheetLocalizationService,
             SpreadsheetService,
             {
@@ -5668,350 +5725,366 @@ class SpreadsheetComponent {
             ErrorHandlingService
         ], viewQueries: [{ propertyName: "formulaBarInputRef", first: true, predicate: ["formulaBar"], descendants: true, read: FormulaInputDirective }, { propertyName: "formulaCellInputRef", first: true, predicate: ["formulaCell"], descendants: true, read: FormulaInputDirective }, { propertyName: "nameBoxRef", first: true, predicate: ["nameBox"], descendants: true }, { propertyName: "dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], exportAs: ["kendo-spreadsheet"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container
-            kendoSpreadsheetLocalizedMessages
-            i18n-background="kendo.spreadsheet.background|The title of the tool that changes the text background color."
-            background="Background color"
-            i18n-color="kendo.spreadsheet.color|The title of the tool that changes the text font color."
-            color="Font color"
-            i18n-bold="kendo.spreadsheet.bold|The title of the Bold tool."
-            bold="Bold"
-            i18n-dataValidation="kendo.spreadsheet.dataValidation|The title of the Data Validation tool."
-            dataValidation="Data Validation"
-            i18n-validationCellRange="kendo.spreadsheet.validationCellRange|The text of the Cell Range label in the data validation dialog."
-            validationCellRange="Cell Range"
-            i18n-validationCriteria="kendo.spreadsheet.validationCriteria|The text of the Criteria dropdown list label in the data validation dialog."
-            validationCriteria="Criteria"
-            i18n-validationMinValue="kendo.spreadsheet.validationMinValue|The text of the Min value label in the data validation dialog."
-            validationMinValue="Min"
-            i18n-validationMaxValue="kendo.spreadsheet.validationMaxValue|The text of the Max value label in the data validation dialog."
-            validationMaxValue="Max"
-            i18n-validationStartValue="kendo.spreadsheet.validationStartValue|The text of the Start value label in the data validation dialog."
-            validationStartValue="Start"
-            i18n-validationEndValue="kendo.spreadsheet.validationEndValue|The text of the End value label in the data validation dialog."
-            validationEndValue="End"
-            i18n-validationValue="kendo.spreadsheet.validationValue|The text of the Value label in the data validation dialog."
-            validationValue="Text"
-            i18n-validationShowListButtonCheckbox="kendo.spreadsheet.validationShowListButtonCheckbox|The text for the Show list button checkbox label in the data validation dialog."
-            validationShowListButtonCheckbox="Display button to show list"
-            i18n-validationOnInvalidData="kendo.spreadsheet.validationOnInvalidData|The text for the On invalid data label in the data validation dialog."
-            validationOnInvalidData="On invalid data"
-            i18n-validationShowDateButtonCheckbox="kendo.spreadsheet.validationShowDateButtonCheckbox|The text for the Show date button checkbox label in the data validation dialog."
-            validationShowDateButtonCheckbox="Display button to show Calendar"
-            i18n-validationRejectInput="kendo.spreadsheet.validationRejectInput|The text for the Reject input radio button label in the data validation dialog."
-            validationRejectInput="Reject input"
-            i18n-validationShowWarning="kendo.spreadsheet.validationShowWarning|The text for the Show warning radio button label in the data validation dialog."
-            validationShowWarning="Show warning"
-            i18n-validationHintTitle="kendo.spreadsheet.validationHintTitle|The text for the Custom hint title input label in the data validation dialog."
-            validationHintTitle="Custom hint title"
-            i18n-validationHintMessage="kendo.spreadsheet.validationHintMessage|The text for the Custom hint input label in the data validation dialog."
-            validationHintMessage="Custom hint"
-            i18n-validationShowHint="kendo.spreadsheet.validationShowHint|The text for the Show hint radio button label in the data validation dialog."
-            validationShowHint="Show hint"
-            i18n-validationIgnoreBlankCheckbox="kendo.spreadsheet.validationIgnoreBlankCheckbox|The text for the Ignore blank checkbox label in the data validation dialog."
-            validationIgnoreBlankCheckbox="Ignore blank"
-            i18n-validationComparer="kendo.spreadsheet.validationComparer|The text of the Comparer dropdown list label in the data validation dialog."
-            validationComparer="Comparer"
-            i18n-anyValueValidationCriteria="kendo.spreadsheet.anyValueValidationCriteria|The text of the Any value validation criteria"
-            anyValueValidationCriteria="Any value"
-            i18n-numberValidationCriteria="kendo.spreadsheet.numberValidationCriteria|The text of the Number validation criteria"
-            numberValidationCriteria="Number"
-            i18n-textValidationCriteria="kendo.spreadsheet.textValidationCriteria|The text of the Text validation criteria"
-            textValidationCriteria="Text"
-            i18n-dateValidationCriteria="kendo.spreadsheet.dateValidationCriteria|The text of the Date validation criteria"
-            dateValidationCriteria="Date"
-            i18n-customFormulaValidationCriteria="kendo.spreadsheet.customFormulaValidationCriteria|The text of the Custom formula validation criteria"
-            customFormulaValidationCriteria="Custom Formula"
-            i18n-listValidationCriteria="kendo.spreadsheet.listValidationCriteria|The text of the List validation criteria"
-            listValidationCriteria="List"
-            i18n-greaterThanValidationComparer="kendo.spreadsheet.greaterThanValidationComparer|The text of the greater than validation comparer"
-            greaterThanValidationComparer="greater than"
-            i18n-lessThanValidationComparer="kendo.spreadsheet.lessThanValidationComparer|The text of the less than validation comparer"
-            lessThanValidationComparer="less than"
-            i18n-betweenValidationComparer="kendo.spreadsheet.betweenValidationComparer|The text of the between validation comparer"
-            betweenValidationComparer="between"
-            i18n-notBetweenValidationComparer="kendo.spreadsheet.notBetweenValidationComparer|The text of the not between validation comparer"
-            notBetweenValidationComparer="not between"
-            i18n-equalToValidationComparer="kendo.spreadsheet.equalToValidationComparer|The text of the equal to validation comparer"
-            equalToValidationComparer="equal to"
-            i18n-notEqualToValidationComparer="kendo.spreadsheet.notEqualToValidationComparer|The text of the not equal to validation comparer"
-            notEqualToValidationComparer="not equal to"
-            i18n-greaterThanOrEqualToValidationComparer="kendo.spreadsheet.greaterThanOrEqualToValidationComparer|The text of the greater than on equal to validation comparer"
-            greaterThanOrEqualToValidationComparer="greater than or equal to"
-            i18n-lessThanOrEqualToValidationComparer="kendo.spreadsheet.lessThanOrEqualToValidationComparer|The text of the less than on equal to validation comparer"
-            lessThanOrEqualToValidationComparer="less than or equal to"
-            i18n-italic="kendo.spreadsheet.italic|The title of the Italic tool."
-            italic="Italic"
-            i18n-underline="kendo.spreadsheet.underline|The title of the Underline tool."
-            underline="Underline"
-            i18n-loadFile="kendo.spreadsheet.loadFile|The title of the Load File tool."
-            loadFile="Open..."
-            i18n-saveFile="kendo.spreadsheet.saveFile|The title of the Save File tool."
-            saveFile="Export..."
-            i18n-format="kendo.spreadsheet.format|The text of the Format tool."
-            format="Custom format..."
-            i18n-fontFamily="kendo.spreadsheet.fontFamily|The text of the Font Family tool."
-            fontFamily="Font"
-            i18n-fontSize="kendo.spreadsheet.fontSize|The text of the Font Size tool."
-            fontSize="Font size"
-            i18n-home="kendo.spreadsheet.home|The text of the Home toolbar tab."
-            home="Home"
-            i18n-file="kendo.spreadsheet.file|The text of the File toolbar tab."
-            file="File"
-            i18n-insert="kendo.spreadsheet.insert|The text of the Insert toolbar tab."
-            insert="Insert"
-            i18n-formatTab="kendo.spreadsheet.formatTab|The text of the Format toolbar tab."
-            formatTab="Format"
-            i18n-dataTab="kendo.spreadsheet.dataTab|The text of the Data toolbar tab."
-            dataTab="Data"
-            i18n-view="kendo.spreadsheet.view|The text of the View toolbar tab."
-            view="View"
-            i18n-undo="kendo.spreadsheet.undo|The title of the Undo tool."
-            undo="Undo"
-            i18n-redo="kendo.spreadsheet.redo|The title of the Redo tool."
-            redo="Redo"
-            i18n-gridLines="kendo.spreadsheet.gridLines|The title of the Grid Lines tool."
-            gridLines="Toggle grid lines"
-            i18n-addColumnLeft="kendo.spreadsheet.addColumnLeft|The title of the tool that adds new column before currently selected column."
-            addColumnLeft="Add column left"
-            i18n-addColumnRight="kendo.spreadsheet.addColumnRight|The title of the tool that adds new column after currently selected column."
-            addColumnRight="Add column right"
-            i18n-addRowBelow="kendo.spreadsheet.addRowBelow|The title of the tool that adds new row below currently selected row."
-            addRowBelow="Add row below"
-            i18n-addRowAbove="kendo.spreadsheet.addRowAbove|The title of the tool that adds new row above currently selected row."
-            addRowAbove="Add row above"
-            i18n-deleteColumn="kendo.spreadsheet.deleteColumn|The title of the tool that deletes a column."
-            deleteColumn="Delete column"
-            i18n-deleteRow="kendo.spreadsheet.deleteRow|The title of the tool that deletes a row."
-            deleteRow="Delete row"
-            i18n-wrap="kendo.spreadsheet.wrap|The title of the Text Wrap tool."
-            wrap="Text wrap"
-            i18n-align="kendo.spreadsheet.align|The title of the Text Align tool."
-            align="Align"
-            i18n-alignHorizontal="kendo.spreadsheet.alignHorizontal|The title of the Text Align Horizontal tool."
-            alignHorizontal="Align horizontally"
-            i18n-alignVertical="kendo.spreadsheet.alignVertical|The title of the Text Align Vertical tool."
-            alignVertical="Align vertically"
-            i18n-alignLeft="kendo.spreadsheet.alignLeft|The title of the Text Align Left tool."
-            alignLeft="Align Left"
-            i18n-alignCenter="kendo.spreadsheet.alignCenter|The title of the Text Align Center tool."
-            alignCenter="Align Center"
-            i18n-alignRight="kendo.spreadsheet.alignRight|The title of the Text Align Right tool."
-            alignRight="Align Right"
-            i18n-alignJustify="kendo.spreadsheet.alignJustify|The title of the Text Align Justify tool."
-            alignJustify="Align Justify"
-            i18n-alignTop="kendo.spreadsheet.alignTop|The title of the Text Align Top tool."
-            alignTop="Align Top"
-            i18n-alignMiddle="kendo.spreadsheet.alignMiddle|The title of the Text Align Middle tool."
-            alignMiddle="Align Middle"
-            i18n-alignBottom="kendo.spreadsheet.alignBottom|The title of the Text Align Bottom tool."
-            alignBottom="Align Bottom"
-            i18n-merge="kendo.spreadsheet.merge|The title of the Cells Merge tool."
-            merge="Merge"
-            i18n-mergeAll="kendo.spreadsheet.mergeAll|The title of the Merge all tool."
-            mergeAll="Merge all"
-            i18n-mergeHorizontally="kendo.spreadsheet.mergeHorizontally|The title of the Merge horizontally tool."
-            mergeHorizontally="Merge horizontally"
-            i18n-mergeVertically="kendo.spreadsheet.mergeVertically|The title of the Merge vertically tool."
-            mergeVertically="Merge vertically"
-            i18n-unmerge="kendo.spreadsheet.unmerge|The title of the Unmerge tool."
-            unmerge="Unmerge"
-            i18n-insertLink="kendo.spreadsheet.insertLink|The title of the tool that inserts a link."
-            insertLink="Insert link"
-            i18n-decreaseDecimal="kendo.spreadsheet.decreaseDecimal|The title of the tool that decreases decimals."
-            decreaseDecimal="Decrease decimal"
-            i18n-increaseDecimal="kendo.spreadsheet.increaseDecimal|The title of the tool that increases decimals."
-            increaseDecimal="Increase decimal"
-            i18n-increaseFontSize="kendo.spreadsheet.increaseFontSize|The title of the tool that increases the cell font size."
-            increaseFontSize="Increase font size"
-            i18n-decreaseFontSize="kendo.spreadsheet.decreaseFontSize|The title of the tool that decreases the cell font size."
-            decreaseFontSize="Decrease font size"
-            i18n-dialogApply="kendo.spreadsheet.dialogApply|The text of the **Apply** button in all Spreadsheet dialogs."
-            dialogApply="Apply"
-            i18n-dialogCancel="kendo.spreadsheet.dialogCancel|The text of the **Cancel** button in all Spreadsheet dialogs."
-            dialogCancel="Cancel"
-            i18n-dialogDelete="kendo.spreadsheet.dialogDelete|The text of the **Delete** button in the Delete sheet dialog."
-            dialogDelete="Delete"
-            i18n-dialogRename="kendo.spreadsheet.dialogRename|The text of the **Rename** button in the Rename sheet dialog."
-            dialogRename="Rename"
-            i18n-dialogInsert="kendo.spreadsheet.dialogInsert|The text of the **Insert** button in all Spreadsheet dialogs."
-            dialogInsert="Insert"
-            i18n-dialogRemove="kendo.spreadsheet.dialogRemove|The text of the **Remove** button in all Spreadsheet dialogs."
-            dialogRemove="Remove"
-            i18n-dialogRemoveLink="kendo.spreadsheet.dialogRemoveLink|The text of the **Remove link** button in the Link tool dialog."
-            dialogRemoveLink="Remove link"
-            i18n-rename="kendo.spreadsheet.rename|The title of the Rename sheet dialog."
-            rename="Rename Sheet"
-            i18n-delete="kendo.spreadsheet.delete|The title of the Delete sheet dialog."
-            delete="Delete Sheet"
-            i18n-nameBox="kendo.spreadsheet.nameBox|The title of the Name Box input."
-            nameBox="Name Box"
-            i18n-formulaInput="kendo.spreadsheet.formulaInput|The title of the Formula input."
-            formulaInput="Formula Input"
-            i18n-addSheet="kendo.spreadsheet.addSheet|The title of the Add new sheet button."
-            addSheet="Add New Sheet"
-            i18n-sheetsMenu="kendo.spreadsheet.sheetsMenu|The title of the Sheets menu button."
-            sheetsMenu="All Sheets"
-            i18n-openUnsupported="kendo.spreadsheet.openUnsupported|The content of the dialog that warns about an unsupported file type."
-            openUnsupported="Unsupported format. Please select an .xlsx file."
-            i18n-modifyMerged="kendo.spreadsheet.modifyMerged|The content of the dialog that warns about modifying a merged cell."
-            modifyMerged="Cannot change part of a merged cell."
-            i18n-cannotModifyDisabled="kendo.spreadsheet.cannotModifyDisabled|The content of the dialog that warns about modifying a disabled cell."
-            cannotModifyDisabled="Cannot modify disabled cells."
-            i18n-dialogOk="kendo.spreadsheet.dialogOk|The text of the **OK** dialog button."
-            dialogOk="OK"
-            i18n-dialogError="kendo.spreadsheet.dialogError|The title of an error dialog."
-            dialogError="Error"
-            i18n-duplicateSheetName="kendo.spreadsheet.duplicateSheetName|The content of the dialog that warns about duplicated sheet name."
-            duplicateSheetName="There is an existing sheet with this name. Please enter another name."
-            i18n-copy="kendo.spreadsheet.copy|The Copy command text."
-            copy="Copy"
-            i18n-cut="kendo.spreadsheet.cut|The Cut command text."
-            cut="Cut"
-            i18n-paste="kendo.spreadsheet.paste|The Paste command text."
-            paste="Paste (use Ctrl/⌘ + V)"
-            i18n-hideRow="kendo.spreadsheet.hideRow|The Hide row command text."
-            hideRow="Hide"
-            i18n-unhideRow="kendo.spreadsheet.unhideRow|The Unhide row command text."
-            unhideRow="Unhide"
-            i18n-hideColumn="kendo.spreadsheet.hideColumn|The Hide column command text."
-            hideColumn="Hide"
-            i18n-unhideColumn="kendo.spreadsheet.unhideColumn|The Unhide column command text."
-            unhideColumn="Unhide"
-            i18n-sheetDelete="kendo.spreadsheet.sheetDelete|The text of the Sheet menu Delete option."
-            sheetDelete="Delete"
-            i18n-sheetRename="kendo.spreadsheet.sheetRename|The text of the Sheet menu Rename option."
-            sheetRename="Rename"
-            i18n-sheetDuplicate="kendo.spreadsheet.sheetDuplicate|The text of the Sheet menu Duplicate option."
-            sheetDuplicate="Duplicate"
-            i18n-sheetHide="kendo.spreadsheet.sheetHide|The text of the Sheet menu Hide option."
-            sheetHide="Hide"
-            i18n-sheetMoveLeft="kendo.spreadsheet.sheetMoveLeft|The text of the Sheet menu Move Left option."
-            sheetMoveLeft="Move Left"
-            i18n-sheetMoveRight="kendo.spreadsheet.sheetMoveRight|The text of the Sheet menu Move Right option."
-            sheetMoveRight="Move Right"
-            i18n-invalidNameError="kendo.spreadsheet.invalidNameError|The content of the dialog that warns about invalid name input."
-            invalidNameError="{{ 'Invalid name: {inputValue}' }}">
+          kendoSpreadsheetLocalizedMessages
+          i18n-background="kendo.spreadsheet.background|The title of the tool that changes the text background color."
+          background="Background color"
+          i18n-color="kendo.spreadsheet.color|The title of the tool that changes the text font color."
+          color="Font color"
+          i18n-bold="kendo.spreadsheet.bold|The title of the Bold tool."
+          bold="Bold"
+          i18n-dataValidation="kendo.spreadsheet.dataValidation|The title of the Data Validation tool."
+          dataValidation="Data Validation"
+          i18n-validationCellRange="kendo.spreadsheet.validationCellRange|The text of the Cell Range label in the data validation dialog."
+          validationCellRange="Cell Range"
+          i18n-validationCriteria="kendo.spreadsheet.validationCriteria|The text of the Criteria dropdown list label in the data validation dialog."
+          validationCriteria="Criteria"
+          i18n-validationMinValue="kendo.spreadsheet.validationMinValue|The text of the Min value label in the data validation dialog."
+          validationMinValue="Min"
+          i18n-validationMaxValue="kendo.spreadsheet.validationMaxValue|The text of the Max value label in the data validation dialog."
+          validationMaxValue="Max"
+          i18n-validationStartValue="kendo.spreadsheet.validationStartValue|The text of the Start value label in the data validation dialog."
+          validationStartValue="Start"
+          i18n-validationEndValue="kendo.spreadsheet.validationEndValue|The text of the End value label in the data validation dialog."
+          validationEndValue="End"
+          i18n-validationValue="kendo.spreadsheet.validationValue|The text of the Value label in the data validation dialog."
+          validationValue="Text"
+          i18n-validationShowListButtonCheckbox="kendo.spreadsheet.validationShowListButtonCheckbox|The text for the Show list button checkbox label in the data validation dialog."
+          validationShowListButtonCheckbox="Display button to show list"
+          i18n-validationOnInvalidData="kendo.spreadsheet.validationOnInvalidData|The text for the On invalid data label in the data validation dialog."
+          validationOnInvalidData="On invalid data"
+          i18n-validationShowDateButtonCheckbox="kendo.spreadsheet.validationShowDateButtonCheckbox|The text for the Show date button checkbox label in the data validation dialog."
+          validationShowDateButtonCheckbox="Display button to show Calendar"
+          i18n-validationRejectInput="kendo.spreadsheet.validationRejectInput|The text for the Reject input radio button label in the data validation dialog."
+          validationRejectInput="Reject input"
+          i18n-validationShowWarning="kendo.spreadsheet.validationShowWarning|The text for the Show warning radio button label in the data validation dialog."
+          validationShowWarning="Show warning"
+          i18n-validationHintTitle="kendo.spreadsheet.validationHintTitle|The text for the Custom hint title input label in the data validation dialog."
+          validationHintTitle="Custom hint title"
+          i18n-validationHintMessage="kendo.spreadsheet.validationHintMessage|The text for the Custom hint input label in the data validation dialog."
+          validationHintMessage="Custom hint"
+          i18n-validationShowHint="kendo.spreadsheet.validationShowHint|The text for the Show hint radio button label in the data validation dialog."
+          validationShowHint="Show hint"
+          i18n-validationIgnoreBlankCheckbox="kendo.spreadsheet.validationIgnoreBlankCheckbox|The text for the Ignore blank checkbox label in the data validation dialog."
+          validationIgnoreBlankCheckbox="Ignore blank"
+          i18n-validationComparer="kendo.spreadsheet.validationComparer|The text of the Comparer dropdown list label in the data validation dialog."
+          validationComparer="Comparer"
+          i18n-anyValueValidationCriteria="kendo.spreadsheet.anyValueValidationCriteria|The text of the Any value validation criteria"
+          anyValueValidationCriteria="Any value"
+          i18n-numberValidationCriteria="kendo.spreadsheet.numberValidationCriteria|The text of the Number validation criteria"
+          numberValidationCriteria="Number"
+          i18n-textValidationCriteria="kendo.spreadsheet.textValidationCriteria|The text of the Text validation criteria"
+          textValidationCriteria="Text"
+          i18n-dateValidationCriteria="kendo.spreadsheet.dateValidationCriteria|The text of the Date validation criteria"
+          dateValidationCriteria="Date"
+          i18n-customFormulaValidationCriteria="kendo.spreadsheet.customFormulaValidationCriteria|The text of the Custom formula validation criteria"
+          customFormulaValidationCriteria="Custom Formula"
+          i18n-listValidationCriteria="kendo.spreadsheet.listValidationCriteria|The text of the List validation criteria"
+          listValidationCriteria="List"
+          i18n-greaterThanValidationComparer="kendo.spreadsheet.greaterThanValidationComparer|The text of the greater than validation comparer"
+          greaterThanValidationComparer="greater than"
+          i18n-lessThanValidationComparer="kendo.spreadsheet.lessThanValidationComparer|The text of the less than validation comparer"
+          lessThanValidationComparer="less than"
+          i18n-betweenValidationComparer="kendo.spreadsheet.betweenValidationComparer|The text of the between validation comparer"
+          betweenValidationComparer="between"
+          i18n-notBetweenValidationComparer="kendo.spreadsheet.notBetweenValidationComparer|The text of the not between validation comparer"
+          notBetweenValidationComparer="not between"
+          i18n-equalToValidationComparer="kendo.spreadsheet.equalToValidationComparer|The text of the equal to validation comparer"
+          equalToValidationComparer="equal to"
+          i18n-notEqualToValidationComparer="kendo.spreadsheet.notEqualToValidationComparer|The text of the not equal to validation comparer"
+          notEqualToValidationComparer="not equal to"
+          i18n-greaterThanOrEqualToValidationComparer="kendo.spreadsheet.greaterThanOrEqualToValidationComparer|The text of the greater than on equal to validation comparer"
+          greaterThanOrEqualToValidationComparer="greater than or equal to"
+          i18n-lessThanOrEqualToValidationComparer="kendo.spreadsheet.lessThanOrEqualToValidationComparer|The text of the less than on equal to validation comparer"
+          lessThanOrEqualToValidationComparer="less than or equal to"
+          i18n-italic="kendo.spreadsheet.italic|The title of the Italic tool."
+          italic="Italic"
+          i18n-underline="kendo.spreadsheet.underline|The title of the Underline tool."
+          underline="Underline"
+          i18n-loadFile="kendo.spreadsheet.loadFile|The title of the Load File tool."
+          loadFile="Open..."
+          i18n-saveFile="kendo.spreadsheet.saveFile|The title of the Save File tool."
+          saveFile="Export..."
+          i18n-format="kendo.spreadsheet.format|The text of the Format tool."
+          format="Custom format..."
+          i18n-fontFamily="kendo.spreadsheet.fontFamily|The text of the Font Family tool."
+          fontFamily="Font"
+          i18n-fontSize="kendo.spreadsheet.fontSize|The text of the Font Size tool."
+          fontSize="Font size"
+          i18n-home="kendo.spreadsheet.home|The text of the Home toolbar tab."
+          home="Home"
+          i18n-file="kendo.spreadsheet.file|The text of the File toolbar tab."
+          file="File"
+          i18n-insert="kendo.spreadsheet.insert|The text of the Insert toolbar tab."
+          insert="Insert"
+          i18n-formatTab="kendo.spreadsheet.formatTab|The text of the Format toolbar tab."
+          formatTab="Format"
+          i18n-dataTab="kendo.spreadsheet.dataTab|The text of the Data toolbar tab."
+          dataTab="Data"
+          i18n-view="kendo.spreadsheet.view|The text of the View toolbar tab."
+          view="View"
+          i18n-undo="kendo.spreadsheet.undo|The title of the Undo tool."
+          undo="Undo"
+          i18n-redo="kendo.spreadsheet.redo|The title of the Redo tool."
+          redo="Redo"
+          i18n-gridLines="kendo.spreadsheet.gridLines|The title of the Grid Lines tool."
+          gridLines="Toggle grid lines"
+          i18n-addColumnLeft="kendo.spreadsheet.addColumnLeft|The title of the tool that adds new column before currently selected column."
+          addColumnLeft="Add column left"
+          i18n-addColumnRight="kendo.spreadsheet.addColumnRight|The title of the tool that adds new column after currently selected column."
+          addColumnRight="Add column right"
+          i18n-addRowBelow="kendo.spreadsheet.addRowBelow|The title of the tool that adds new row below currently selected row."
+          addRowBelow="Add row below"
+          i18n-addRowAbove="kendo.spreadsheet.addRowAbove|The title of the tool that adds new row above currently selected row."
+          addRowAbove="Add row above"
+          i18n-deleteColumn="kendo.spreadsheet.deleteColumn|The title of the tool that deletes a column."
+          deleteColumn="Delete column"
+          i18n-deleteRow="kendo.spreadsheet.deleteRow|The title of the tool that deletes a row."
+          deleteRow="Delete row"
+          i18n-wrap="kendo.spreadsheet.wrap|The title of the Text Wrap tool."
+          wrap="Text wrap"
+          i18n-align="kendo.spreadsheet.align|The title of the Text Align tool."
+          align="Align"
+          i18n-alignHorizontal="kendo.spreadsheet.alignHorizontal|The title of the Text Align Horizontal tool."
+          alignHorizontal="Align horizontally"
+          i18n-alignVertical="kendo.spreadsheet.alignVertical|The title of the Text Align Vertical tool."
+          alignVertical="Align vertically"
+          i18n-alignLeft="kendo.spreadsheet.alignLeft|The title of the Text Align Left tool."
+          alignLeft="Align Left"
+          i18n-alignCenter="kendo.spreadsheet.alignCenter|The title of the Text Align Center tool."
+          alignCenter="Align Center"
+          i18n-alignRight="kendo.spreadsheet.alignRight|The title of the Text Align Right tool."
+          alignRight="Align Right"
+          i18n-alignJustify="kendo.spreadsheet.alignJustify|The title of the Text Align Justify tool."
+          alignJustify="Align Justify"
+          i18n-alignTop="kendo.spreadsheet.alignTop|The title of the Text Align Top tool."
+          alignTop="Align Top"
+          i18n-alignMiddle="kendo.spreadsheet.alignMiddle|The title of the Text Align Middle tool."
+          alignMiddle="Align Middle"
+          i18n-alignBottom="kendo.spreadsheet.alignBottom|The title of the Text Align Bottom tool."
+          alignBottom="Align Bottom"
+          i18n-merge="kendo.spreadsheet.merge|The title of the Cells Merge tool."
+          merge="Merge"
+          i18n-mergeAll="kendo.spreadsheet.mergeAll|The title of the Merge all tool."
+          mergeAll="Merge all"
+          i18n-mergeHorizontally="kendo.spreadsheet.mergeHorizontally|The title of the Merge horizontally tool."
+          mergeHorizontally="Merge horizontally"
+          i18n-mergeVertically="kendo.spreadsheet.mergeVertically|The title of the Merge vertically tool."
+          mergeVertically="Merge vertically"
+          i18n-unmerge="kendo.spreadsheet.unmerge|The title of the Unmerge tool."
+          unmerge="Unmerge"
+          i18n-insertLink="kendo.spreadsheet.insertLink|The title of the tool that inserts a link."
+          insertLink="Insert link"
+          i18n-decreaseDecimal="kendo.spreadsheet.decreaseDecimal|The title of the tool that decreases decimals."
+          decreaseDecimal="Decrease decimal"
+          i18n-increaseDecimal="kendo.spreadsheet.increaseDecimal|The title of the tool that increases decimals."
+          increaseDecimal="Increase decimal"
+          i18n-increaseFontSize="kendo.spreadsheet.increaseFontSize|The title of the tool that increases the cell font size."
+          increaseFontSize="Increase font size"
+          i18n-decreaseFontSize="kendo.spreadsheet.decreaseFontSize|The title of the tool that decreases the cell font size."
+          decreaseFontSize="Decrease font size"
+          i18n-dialogApply="kendo.spreadsheet.dialogApply|The text of the **Apply** button in all Spreadsheet dialogs."
+          dialogApply="Apply"
+          i18n-dialogCancel="kendo.spreadsheet.dialogCancel|The text of the **Cancel** button in all Spreadsheet dialogs."
+          dialogCancel="Cancel"
+          i18n-dialogDelete="kendo.spreadsheet.dialogDelete|The text of the **Delete** button in the Delete sheet dialog."
+          dialogDelete="Delete"
+          i18n-dialogRename="kendo.spreadsheet.dialogRename|The text of the **Rename** button in the Rename sheet dialog."
+          dialogRename="Rename"
+          i18n-dialogInsert="kendo.spreadsheet.dialogInsert|The text of the **Insert** button in all Spreadsheet dialogs."
+          dialogInsert="Insert"
+          i18n-dialogRemove="kendo.spreadsheet.dialogRemove|The text of the **Remove** button in all Spreadsheet dialogs."
+          dialogRemove="Remove"
+          i18n-dialogRemoveLink="kendo.spreadsheet.dialogRemoveLink|The text of the **Remove link** button in the Link tool dialog."
+          dialogRemoveLink="Remove link"
+          i18n-rename="kendo.spreadsheet.rename|The title of the Rename sheet dialog."
+          rename="Rename Sheet"
+          i18n-delete="kendo.spreadsheet.delete|The title of the Delete sheet dialog."
+          delete="Delete Sheet"
+          i18n-nameBox="kendo.spreadsheet.nameBox|The title of the Name Box input."
+          nameBox="Name Box"
+          i18n-formulaInput="kendo.spreadsheet.formulaInput|The title of the Formula input."
+          formulaInput="Formula Input"
+          i18n-addSheet="kendo.spreadsheet.addSheet|The title of the Add new sheet button."
+          addSheet="Add New Sheet"
+          i18n-sheetsMenu="kendo.spreadsheet.sheetsMenu|The title of the Sheets menu button."
+          sheetsMenu="All Sheets"
+          i18n-openUnsupported="kendo.spreadsheet.openUnsupported|The content of the dialog that warns about an unsupported file type."
+          openUnsupported="Unsupported format. Please select an .xlsx file."
+          i18n-modifyMerged="kendo.spreadsheet.modifyMerged|The content of the dialog that warns about modifying a merged cell."
+          modifyMerged="Cannot change part of a merged cell."
+          i18n-cannotModifyDisabled="kendo.spreadsheet.cannotModifyDisabled|The content of the dialog that warns about modifying a disabled cell."
+          cannotModifyDisabled="Cannot modify disabled cells."
+          i18n-dialogOk="kendo.spreadsheet.dialogOk|The text of the **OK** dialog button."
+          dialogOk="OK"
+          i18n-dialogError="kendo.spreadsheet.dialogError|The title of an error dialog."
+          dialogError="Error"
+          i18n-duplicateSheetName="kendo.spreadsheet.duplicateSheetName|The content of the dialog that warns about duplicated sheet name."
+          duplicateSheetName="There is an existing sheet with this name. Please enter another name."
+          i18n-copy="kendo.spreadsheet.copy|The Copy command text."
+          copy="Copy"
+          i18n-cut="kendo.spreadsheet.cut|The Cut command text."
+          cut="Cut"
+          i18n-paste="kendo.spreadsheet.paste|The Paste command text."
+          paste="Paste (use Ctrl/⌘ + V)"
+          i18n-hideRow="kendo.spreadsheet.hideRow|The Hide row command text."
+          hideRow="Hide"
+          i18n-unhideRow="kendo.spreadsheet.unhideRow|The Unhide row command text."
+          unhideRow="Unhide"
+          i18n-hideColumn="kendo.spreadsheet.hideColumn|The Hide column command text."
+          hideColumn="Hide"
+          i18n-unhideColumn="kendo.spreadsheet.unhideColumn|The Unhide column command text."
+          unhideColumn="Unhide"
+          i18n-sheetDelete="kendo.spreadsheet.sheetDelete|The text of the Sheet menu Delete option."
+          sheetDelete="Delete"
+          i18n-sheetRename="kendo.spreadsheet.sheetRename|The text of the Sheet menu Rename option."
+          sheetRename="Rename"
+          i18n-sheetDuplicate="kendo.spreadsheet.sheetDuplicate|The text of the Sheet menu Duplicate option."
+          sheetDuplicate="Duplicate"
+          i18n-sheetHide="kendo.spreadsheet.sheetHide|The text of the Sheet menu Hide option."
+          sheetHide="Hide"
+          i18n-sheetMoveLeft="kendo.spreadsheet.sheetMoveLeft|The text of the Sheet menu Move Left option."
+          sheetMoveLeft="Move Left"
+          i18n-sheetMoveRight="kendo.spreadsheet.sheetMoveRight|The text of the Sheet menu Move Right option."
+          sheetMoveRight="Move Right"
+          i18n-invalidNameError="kendo.spreadsheet.invalidNameError|The content of the dialog that warns about invalid name input."
+          invalidNameError="{{ 'Invalid name: {inputValue}' }}">
         </ng-container>
         <div class="k-spreadsheet-header">
-            <kendo-menu kendoSpreadsheetMenu (select)="onMenuItemSelect($event)">
-                <kendo-menu-item *ngFor="let item of menuItems" [text]="item.text" [cssClass]="item.cssClass"></kendo-menu-item>
-            </kendo-menu>
-            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'file'"
-                [attr.aria-label]="messageFor('file')"
-                fillMode="flat"
-                class="k-spreadsheet-toolbar"
-                [overflow]="overflow">
-                <kendo-spreadsheet-load-file-tool></kendo-spreadsheet-load-file-tool>
-                <kendo-toolbar-button kendoSpreadsheetSaveFile></kendo-toolbar-button>
+          <kendo-menu kendoSpreadsheetMenu (select)="onMenuItemSelect($event)">
+            @for (item of menuItems; track item) {
+              <kendo-menu-item [text]="item.text" [cssClass]="item.cssClass"></kendo-menu-item>
+            }
+          </kendo-menu>
+          @if (selectedMenuItem?.active && selectedMenuItem.id === 'file') {
+            <kendo-toolbar
+              [attr.aria-label]="messageFor('file')"
+              fillMode="flat"
+              class="k-spreadsheet-toolbar"
+              [overflow]="overflow">
+              <kendo-spreadsheet-load-file-tool></kendo-spreadsheet-load-file-tool>
+              <kendo-toolbar-button kendoSpreadsheetSaveFile></kendo-toolbar-button>
             </kendo-toolbar>
-            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'home'"
-                [attr.aria-label]="messageFor('home')"
-                class="k-spreadsheet-toolbar"
-                fillMode="flat"
-                [overflow]="overflow">
-                <kendo-toolbar-button kendoSpreadsheetUndo></kendo-toolbar-button>
-                <kendo-toolbar-button kendoSpreadsheetRedo></kendo-toolbar-button>
-                <kendo-toolbar-separator></kendo-toolbar-separator>
-                <kendo-toolbar-dropdownlist kendoSpreadsheetFontFamily></kendo-toolbar-dropdownlist>
-                <kendo-toolbar-dropdownlist kendoSpreadsheetFontSize></kendo-toolbar-dropdownlist>
-                <kendo-toolbar-buttongroup fillMode="flat">
-                    <kendo-toolbar-button kendoSpreadsheetIncreaseFontSize></kendo-toolbar-button>
-                    <kendo-toolbar-button kendoSpreadsheetDecreaseFontSize></kendo-toolbar-button>
-                </kendo-toolbar-buttongroup>
-                <kendo-toolbar-separator></kendo-toolbar-separator>
-                <kendo-toolbar-buttongroup fillMode="flat">
-                    <kendo-toolbar-button kendoSpreadsheetBold></kendo-toolbar-button>
-                    <kendo-toolbar-button kendoSpreadsheetItalic></kendo-toolbar-button>
-                    <kendo-toolbar-button kendoSpreadsheetUnderline></kendo-toolbar-button>
-                </kendo-toolbar-buttongroup>
-                <kendo-spreadsheet-forecolor-tool></kendo-spreadsheet-forecolor-tool>
-                <kendo-toolbar-separator></kendo-toolbar-separator>
-                <kendo-spreadsheet-backcolor-tool></kendo-spreadsheet-backcolor-tool>
-                <kendo-toolbar-separator></kendo-toolbar-separator>
-                <kendo-toolbar-dropdownbutton kendoSpreadsheetHorizontalTextAlign></kendo-toolbar-dropdownbutton>
-                <kendo-toolbar-dropdownbutton kendoSpreadsheetVerticalTextAlign></kendo-toolbar-dropdownbutton>
-                <kendo-toolbar-button kendoSpreadsheetTextWrap></kendo-toolbar-button>
-                <kendo-toolbar-separator></kendo-toolbar-separator>
-                <kendo-toolbar-dropdownbutton kendoSpreadsheetFormat></kendo-toolbar-dropdownbutton>
+          }
+          @if (selectedMenuItem?.active && selectedMenuItem.id === 'home') {
+            <kendo-toolbar
+              [attr.aria-label]="messageFor('home')"
+              class="k-spreadsheet-toolbar"
+              fillMode="flat"
+              [overflow]="overflow">
+              <kendo-toolbar-button kendoSpreadsheetUndo></kendo-toolbar-button>
+              <kendo-toolbar-button kendoSpreadsheetRedo></kendo-toolbar-button>
+              <kendo-toolbar-separator></kendo-toolbar-separator>
+              <kendo-toolbar-dropdownlist kendoSpreadsheetFontFamily></kendo-toolbar-dropdownlist>
+              <kendo-toolbar-dropdownlist kendoSpreadsheetFontSize></kendo-toolbar-dropdownlist>
+              <kendo-toolbar-buttongroup fillMode="flat">
+                <kendo-toolbar-button kendoSpreadsheetIncreaseFontSize></kendo-toolbar-button>
+                <kendo-toolbar-button kendoSpreadsheetDecreaseFontSize></kendo-toolbar-button>
+              </kendo-toolbar-buttongroup>
+              <kendo-toolbar-separator></kendo-toolbar-separator>
+              <kendo-toolbar-buttongroup fillMode="flat">
+                <kendo-toolbar-button kendoSpreadsheetBold></kendo-toolbar-button>
+                <kendo-toolbar-button kendoSpreadsheetItalic></kendo-toolbar-button>
+                <kendo-toolbar-button kendoSpreadsheetUnderline></kendo-toolbar-button>
+              </kendo-toolbar-buttongroup>
+              <kendo-spreadsheet-forecolor-tool></kendo-spreadsheet-forecolor-tool>
+              <kendo-toolbar-separator></kendo-toolbar-separator>
+              <kendo-spreadsheet-backcolor-tool></kendo-spreadsheet-backcolor-tool>
+              <kendo-toolbar-separator></kendo-toolbar-separator>
+              <kendo-toolbar-dropdownbutton kendoSpreadsheetHorizontalTextAlign></kendo-toolbar-dropdownbutton>
+              <kendo-toolbar-dropdownbutton kendoSpreadsheetVerticalTextAlign></kendo-toolbar-dropdownbutton>
+              <kendo-toolbar-button kendoSpreadsheetTextWrap></kendo-toolbar-button>
+              <kendo-toolbar-separator></kendo-toolbar-separator>
+              <kendo-toolbar-dropdownbutton kendoSpreadsheetFormat></kendo-toolbar-dropdownbutton>
             </kendo-toolbar>
-            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'insert'"
-                [attr.aria-label]="messageFor('insert')"
-                fillMode="flat"
-                class="k-spreadsheet-toolbar"
-                [overflow]="overflow">
-                <kendo-toolbar-button kendoSpreadsheetInsertLink></kendo-toolbar-button>
-                <kendo-toolbar-separator></kendo-toolbar-separator>
-                <kendo-toolbar-button kendoSpreadsheetAddColumnLeftButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoSpreadsheetAddColumnRightButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoSpreadsheetAddRowBelowButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoSpreadsheetAddRowAboveButton></kendo-toolbar-button>
-                <kendo-toolbar-separator></kendo-toolbar-separator>
-                <kendo-toolbar-button kendoSpreadsheetDeleteColumnButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoSpreadsheetDeleteRowButton></kendo-toolbar-button>
+          }
+          @if (selectedMenuItem?.active && selectedMenuItem.id === 'insert') {
+            <kendo-toolbar
+              [attr.aria-label]="messageFor('insert')"
+              fillMode="flat"
+              class="k-spreadsheet-toolbar"
+              [overflow]="overflow">
+              <kendo-toolbar-button kendoSpreadsheetInsertLink></kendo-toolbar-button>
+              <kendo-toolbar-separator></kendo-toolbar-separator>
+              <kendo-toolbar-button kendoSpreadsheetAddColumnLeftButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoSpreadsheetAddColumnRightButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoSpreadsheetAddRowBelowButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoSpreadsheetAddRowAboveButton></kendo-toolbar-button>
+              <kendo-toolbar-separator></kendo-toolbar-separator>
+              <kendo-toolbar-button kendoSpreadsheetDeleteColumnButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoSpreadsheetDeleteRowButton></kendo-toolbar-button>
             </kendo-toolbar>
-            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'format'"
-                [attr.aria-label]="messageFor('formatTab')"
-                fillMode="flat"
-                class="k-spreadsheet-toolbar"
-                [overflow]="overflow">
-                <kendo-toolbar-button kendoSpreadsheetDecreaseDecimal></kendo-toolbar-button>
-                <kendo-toolbar-button kendoSpreadsheetIncreaseDecimal></kendo-toolbar-button>
+          }
+          @if (selectedMenuItem?.active && selectedMenuItem.id === 'format') {
+            <kendo-toolbar
+              [attr.aria-label]="messageFor('formatTab')"
+              fillMode="flat"
+              class="k-spreadsheet-toolbar"
+              [overflow]="overflow">
+              <kendo-toolbar-button kendoSpreadsheetDecreaseDecimal></kendo-toolbar-button>
+              <kendo-toolbar-button kendoSpreadsheetIncreaseDecimal></kendo-toolbar-button>
             </kendo-toolbar>
-            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'view'"
-                [attr.aria-label]="messageFor('view')"
-                fillMode="flat"
-                class="k-spreadsheet-toolbar"
-                [overflow]="overflow">
-                <kendo-toolbar-dropdownbutton kendoSpreadsheetMerge></kendo-toolbar-dropdownbutton>
-                <kendo-toolbar-separator></kendo-toolbar-separator>
-                <kendo-toolbar-button kendoSpreadsheetGridLines></kendo-toolbar-button>
+          }
+          @if (selectedMenuItem?.active && selectedMenuItem.id === 'view') {
+            <kendo-toolbar
+              [attr.aria-label]="messageFor('view')"
+              fillMode="flat"
+              class="k-spreadsheet-toolbar"
+              [overflow]="overflow">
+              <kendo-toolbar-dropdownbutton kendoSpreadsheetMerge></kendo-toolbar-dropdownbutton>
+              <kendo-toolbar-separator></kendo-toolbar-separator>
+              <kendo-toolbar-button kendoSpreadsheetGridLines></kendo-toolbar-button>
             </kendo-toolbar>
-            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'data'"
-                [attr.aria-label]="messageFor('dataTab')"
-                fillMode="flat"
-                class="k-spreadsheet-toolbar"
-                [overflow]="overflow">
-                <kendo-toolbar-button kendoSpreadsheetDataValidation></kendo-toolbar-button>
+          }
+          @if (selectedMenuItem?.active && selectedMenuItem.id === 'data') {
+            <kendo-toolbar
+              [attr.aria-label]="messageFor('dataTab')"
+              fillMode="flat"
+              class="k-spreadsheet-toolbar"
+              [overflow]="overflow">
+              <kendo-toolbar-button kendoSpreadsheetDataValidation></kendo-toolbar-button>
             </kendo-toolbar>
+          }
         </div>
         <div class="k-spreadsheet-action-bar">
-            <div #nameBox kendoSpreadsheetNameBox [spreadsheetWidget]="spreadsheetWidget"></div>
-            <div class="k-spreadsheet-formula-bar">
-                <span class="k-separator k-separator-vertical"></span>
-                <kendo-icon-wrapper
-                    name="formula-fx"
-                    [svgIcon]="formulaFxIcon">
-                </kendo-icon-wrapper>
-                <span class="k-separator k-separator-vertical"></span>
-                <div
-                    #formulaBar
-                    kendoSpreadsheetFormulaInput
-                    [formulaListMaxHeight]="formulaListMaxHeight"
-                    class="k-textbox k-input k-input-md k-input-flat k-rounded-md"></div>
-            </div>
+          <div #nameBox kendoSpreadsheetNameBox [spreadsheetWidget]="spreadsheetWidget"></div>
+          <div class="k-spreadsheet-formula-bar">
+            <span class="k-separator k-separator-vertical"></span>
+            <kendo-icon-wrapper
+              name="formula-fx"
+              [svgIcon]="formulaFxIcon">
+            </kendo-icon-wrapper>
+            <span class="k-separator k-separator-vertical"></span>
+            <div
+              #formulaBar
+              kendoSpreadsheetFormulaInput
+              [formulaListMaxHeight]="formulaListMaxHeight"
+            class="k-textbox k-input k-input-md k-input-flat k-rounded-md"></div>
+          </div>
         </div>
         <div class="k-spreadsheet-view">
-            <div class="k-spreadsheet-fixed-container"></div>
-                <div class="k-spreadsheet-scroller">
-                    <div class="k-spreadsheet-view-size"></div>
-                </div>
-            <div tabIndex="0" class="k-spreadsheet-clipboard" contentEditable="true"></div>
-            <div #formulaCell kendoSpreadsheetFormulaInput class="k-spreadsheet-cell-editor" data-role="formulainput"></div>
+          <div class="k-spreadsheet-fixed-container"></div>
+          <div class="k-spreadsheet-scroller">
+            <div class="k-spreadsheet-view-size"></div>
+          </div>
+          <div tabIndex="0" class="k-spreadsheet-clipboard" contentEditable="true"></div>
+          <div #formulaCell kendoSpreadsheetFormulaInput class="k-spreadsheet-cell-editor" data-role="formulainput"></div>
         </div>
         <div class="k-spreadsheet-sheets-bar"
-            kendoSpreadsheetSheetsBar
-            [sheets]="sheetsInfo"
-            [sheetDescriptors]="sheets">
+          kendoSpreadsheetSheetsBar
+          [sheets]="sheetsInfo"
+          [sheetDescriptors]="sheets">
         </div>
         <ng-container #dialogContainer></ng-container>
-
+        
         <kendo-contextmenu
-            #contextMenu
-            [items]="contextMenuItems"
-            (select)="onContextMenuSelect($event)"></kendo-contextmenu>
-
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoSpreadsheetLocalizedMessages]" }, { kind: "component", type: MenuComponent, selector: "kendo-menu", inputs: ["appendTo", "menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { kind: "directive", type: MainMenuDirective, selector: "[kendoSpreadsheetMenu]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MenuItemComponent, selector: "kendo-menu-item", inputs: ["text", "url", "disabled", "cssClass", "cssStyle", "icon", "svgIcon", "data", "separator"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex", "showIcon", "showText"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: SpreadsheetLoadFileComponent, selector: "kendo-spreadsheet-load-file-tool" }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "rounded", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "directive", type: SpreadsheetSaveFileDirective, selector: "[kendoSpreadsheetSaveFile]" }, { kind: "component", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "fillMode", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "directive", type: SpreadsheetUndoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]" }, { kind: "directive", type: SpreadsheetRedoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]" }, { kind: "component", type: ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { kind: "component", type: SpreadsheetFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]" }, { kind: "component", type: SpreadsheetFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]" }, { kind: "directive", type: SpreadsheetIncreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseFontSize]" }, { kind: "directive", type: SpreadsheetDecreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseFontSize]" }, { kind: "directive", type: SpreadsheetBoldDirective, selector: "kendo-toolbar-button[kendoSpreadsheetBold]" }, { kind: "directive", type: SpreadsheetItalicDirective, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]" }, { kind: "directive", type: SpreadsheetUnderlineDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]" }, { kind: "component", type: SpreadsheetForeColorComponent, selector: "kendo-spreadsheet-forecolor-tool" }, { kind: "component", type: SpreadsheetBackColorComponent, selector: "kendo-spreadsheet-backcolor-tool" }, { kind: "component", type: ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: ["arrowIcon", "title", "showText", "showIcon", "text", "icon", "svgIcon", "iconClass", "imageUrl", "popupSettings", "look", "primary", "fillMode", "themeColor", "buttonClass", "textField", "disabled", "data"], outputs: ["itemClick", "open", "close"], exportAs: ["kendoToolBarDropDownButton"] }, { kind: "directive", type: SpreadsheetHorizontalTextAlignDirective, selector: "[kendoSpreadsheetHorizontalTextAlign]" }, { kind: "directive", type: SpreadsheetVerticalTextAlignDirective, selector: "[kendoSpreadsheetVerticalTextAlign]" }, { kind: "directive", type: SpreadsheetTextWrapDirective, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]" }, { kind: "directive", type: SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]" }, { kind: "directive", type: SpreadsheetInsertLinkDirective, selector: "kendo-toolbar-button[kendoSpreadsheetInsertLink]" }, { kind: "directive", type: SpreadsheetAddColumnLeftButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]" }, { kind: "directive", type: SpreadsheetAddColumnRightButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]" }, { kind: "directive", type: SpreadsheetAddRowBelowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]" }, { kind: "directive", type: SpreadsheetAddRowAboveButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]" }, { kind: "directive", type: SpreadsheetDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]" }, { kind: "directive", type: SpreadsheetDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]" }, { kind: "directive", type: SpreadsheetDecreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseDecimal]" }, { kind: "directive", type: SpreadsheetIncreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseDecimal]" }, { kind: "directive", type: SpreadsheetMergeDirective, selector: "[kendoSpreadsheetMerge]" }, { kind: "directive", type: SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]" }, { kind: "component", type: NameBoxComponent, selector: "[kendoSpreadsheetNameBox]", inputs: ["data", "spreadsheetWidget"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]", inputs: ["formulaListMaxHeight"] }, { kind: "component", type: SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: ["sheets", "sheetDescriptors"] }, { kind: "component", type: ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }, { kind: "directive", type: SpreadsheetDataValidationDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDataValidation]" }] });
+          #contextMenu
+          [items]="contextMenuItems"
+        (select)="onContextMenuSelect($event)"></kendo-contextmenu>
+        
+        @if (showLicenseWatermark) {
+          <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoSpreadsheetLocalizedMessages]" }, { kind: "component", type: MenuComponent, selector: "kendo-menu", inputs: ["appendTo", "menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { kind: "directive", type: MainMenuDirective, selector: "[kendoSpreadsheetMenu]" }, { kind: "component", type: MenuItemComponent, selector: "kendo-menu-item", inputs: ["text", "url", "disabled", "cssClass", "cssStyle", "icon", "svgIcon", "data", "separator"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex", "showIcon", "showText"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: SpreadsheetLoadFileComponent, selector: "kendo-spreadsheet-load-file-tool" }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "rounded", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "directive", type: SpreadsheetSaveFileDirective, selector: "[kendoSpreadsheetSaveFile]" }, { kind: "component", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "fillMode", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "directive", type: SpreadsheetUndoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]" }, { kind: "directive", type: SpreadsheetRedoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]" }, { kind: "component", type: ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { kind: "component", type: SpreadsheetFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]" }, { kind: "component", type: SpreadsheetFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]" }, { kind: "directive", type: SpreadsheetIncreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseFontSize]" }, { kind: "directive", type: SpreadsheetDecreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseFontSize]" }, { kind: "directive", type: SpreadsheetBoldDirective, selector: "kendo-toolbar-button[kendoSpreadsheetBold]" }, { kind: "directive", type: SpreadsheetItalicDirective, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]" }, { kind: "directive", type: SpreadsheetUnderlineDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]" }, { kind: "component", type: SpreadsheetForeColorComponent, selector: "kendo-spreadsheet-forecolor-tool" }, { kind: "component", type: SpreadsheetBackColorComponent, selector: "kendo-spreadsheet-backcolor-tool" }, { kind: "component", type: ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: ["arrowIcon", "title", "showText", "showIcon", "text", "icon", "svgIcon", "iconClass", "imageUrl", "popupSettings", "look", "primary", "fillMode", "themeColor", "buttonClass", "textField", "disabled", "data"], outputs: ["itemClick", "open", "close"], exportAs: ["kendoToolBarDropDownButton"] }, { kind: "directive", type: SpreadsheetHorizontalTextAlignDirective, selector: "[kendoSpreadsheetHorizontalTextAlign]" }, { kind: "directive", type: SpreadsheetVerticalTextAlignDirective, selector: "[kendoSpreadsheetVerticalTextAlign]" }, { kind: "directive", type: SpreadsheetTextWrapDirective, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]" }, { kind: "directive", type: SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]" }, { kind: "directive", type: SpreadsheetInsertLinkDirective, selector: "kendo-toolbar-button[kendoSpreadsheetInsertLink]" }, { kind: "directive", type: SpreadsheetAddColumnLeftButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]" }, { kind: "directive", type: SpreadsheetAddColumnRightButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]" }, { kind: "directive", type: SpreadsheetAddRowBelowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]" }, { kind: "directive", type: SpreadsheetAddRowAboveButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]" }, { kind: "directive", type: SpreadsheetDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]" }, { kind: "directive", type: SpreadsheetDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]" }, { kind: "directive", type: SpreadsheetDecreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseDecimal]" }, { kind: "directive", type: SpreadsheetIncreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseDecimal]" }, { kind: "directive", type: SpreadsheetMergeDirective, selector: "[kendoSpreadsheetMerge]" }, { kind: "directive", type: SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]" }, { kind: "component", type: NameBoxComponent, selector: "[kendoSpreadsheetNameBox]", inputs: ["data", "spreadsheetWidget"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]", inputs: ["formulaListMaxHeight"] }, { kind: "component", type: SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: ["sheets", "sheetDescriptors"] }, { kind: "component", type: ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }, { kind: "directive", type: SpreadsheetDataValidationDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDataValidation]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpreadsheetComponent, decorators: [{
             type: Component,
@@ -6035,352 +6108,368 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     template: `
         <ng-container
-            kendoSpreadsheetLocalizedMessages
-            i18n-background="kendo.spreadsheet.background|The title of the tool that changes the text background color."
-            background="Background color"
-            i18n-color="kendo.spreadsheet.color|The title of the tool that changes the text font color."
-            color="Font color"
-            i18n-bold="kendo.spreadsheet.bold|The title of the Bold tool."
-            bold="Bold"
-            i18n-dataValidation="kendo.spreadsheet.dataValidation|The title of the Data Validation tool."
-            dataValidation="Data Validation"
-            i18n-validationCellRange="kendo.spreadsheet.validationCellRange|The text of the Cell Range label in the data validation dialog."
-            validationCellRange="Cell Range"
-            i18n-validationCriteria="kendo.spreadsheet.validationCriteria|The text of the Criteria dropdown list label in the data validation dialog."
-            validationCriteria="Criteria"
-            i18n-validationMinValue="kendo.spreadsheet.validationMinValue|The text of the Min value label in the data validation dialog."
-            validationMinValue="Min"
-            i18n-validationMaxValue="kendo.spreadsheet.validationMaxValue|The text of the Max value label in the data validation dialog."
-            validationMaxValue="Max"
-            i18n-validationStartValue="kendo.spreadsheet.validationStartValue|The text of the Start value label in the data validation dialog."
-            validationStartValue="Start"
-            i18n-validationEndValue="kendo.spreadsheet.validationEndValue|The text of the End value label in the data validation dialog."
-            validationEndValue="End"
-            i18n-validationValue="kendo.spreadsheet.validationValue|The text of the Value label in the data validation dialog."
-            validationValue="Text"
-            i18n-validationShowListButtonCheckbox="kendo.spreadsheet.validationShowListButtonCheckbox|The text for the Show list button checkbox label in the data validation dialog."
-            validationShowListButtonCheckbox="Display button to show list"
-            i18n-validationOnInvalidData="kendo.spreadsheet.validationOnInvalidData|The text for the On invalid data label in the data validation dialog."
-            validationOnInvalidData="On invalid data"
-            i18n-validationShowDateButtonCheckbox="kendo.spreadsheet.validationShowDateButtonCheckbox|The text for the Show date button checkbox label in the data validation dialog."
-            validationShowDateButtonCheckbox="Display button to show Calendar"
-            i18n-validationRejectInput="kendo.spreadsheet.validationRejectInput|The text for the Reject input radio button label in the data validation dialog."
-            validationRejectInput="Reject input"
-            i18n-validationShowWarning="kendo.spreadsheet.validationShowWarning|The text for the Show warning radio button label in the data validation dialog."
-            validationShowWarning="Show warning"
-            i18n-validationHintTitle="kendo.spreadsheet.validationHintTitle|The text for the Custom hint title input label in the data validation dialog."
-            validationHintTitle="Custom hint title"
-            i18n-validationHintMessage="kendo.spreadsheet.validationHintMessage|The text for the Custom hint input label in the data validation dialog."
-            validationHintMessage="Custom hint"
-            i18n-validationShowHint="kendo.spreadsheet.validationShowHint|The text for the Show hint radio button label in the data validation dialog."
-            validationShowHint="Show hint"
-            i18n-validationIgnoreBlankCheckbox="kendo.spreadsheet.validationIgnoreBlankCheckbox|The text for the Ignore blank checkbox label in the data validation dialog."
-            validationIgnoreBlankCheckbox="Ignore blank"
-            i18n-validationComparer="kendo.spreadsheet.validationComparer|The text of the Comparer dropdown list label in the data validation dialog."
-            validationComparer="Comparer"
-            i18n-anyValueValidationCriteria="kendo.spreadsheet.anyValueValidationCriteria|The text of the Any value validation criteria"
-            anyValueValidationCriteria="Any value"
-            i18n-numberValidationCriteria="kendo.spreadsheet.numberValidationCriteria|The text of the Number validation criteria"
-            numberValidationCriteria="Number"
-            i18n-textValidationCriteria="kendo.spreadsheet.textValidationCriteria|The text of the Text validation criteria"
-            textValidationCriteria="Text"
-            i18n-dateValidationCriteria="kendo.spreadsheet.dateValidationCriteria|The text of the Date validation criteria"
-            dateValidationCriteria="Date"
-            i18n-customFormulaValidationCriteria="kendo.spreadsheet.customFormulaValidationCriteria|The text of the Custom formula validation criteria"
-            customFormulaValidationCriteria="Custom Formula"
-            i18n-listValidationCriteria="kendo.spreadsheet.listValidationCriteria|The text of the List validation criteria"
-            listValidationCriteria="List"
-            i18n-greaterThanValidationComparer="kendo.spreadsheet.greaterThanValidationComparer|The text of the greater than validation comparer"
-            greaterThanValidationComparer="greater than"
-            i18n-lessThanValidationComparer="kendo.spreadsheet.lessThanValidationComparer|The text of the less than validation comparer"
-            lessThanValidationComparer="less than"
-            i18n-betweenValidationComparer="kendo.spreadsheet.betweenValidationComparer|The text of the between validation comparer"
-            betweenValidationComparer="between"
-            i18n-notBetweenValidationComparer="kendo.spreadsheet.notBetweenValidationComparer|The text of the not between validation comparer"
-            notBetweenValidationComparer="not between"
-            i18n-equalToValidationComparer="kendo.spreadsheet.equalToValidationComparer|The text of the equal to validation comparer"
-            equalToValidationComparer="equal to"
-            i18n-notEqualToValidationComparer="kendo.spreadsheet.notEqualToValidationComparer|The text of the not equal to validation comparer"
-            notEqualToValidationComparer="not equal to"
-            i18n-greaterThanOrEqualToValidationComparer="kendo.spreadsheet.greaterThanOrEqualToValidationComparer|The text of the greater than on equal to validation comparer"
-            greaterThanOrEqualToValidationComparer="greater than or equal to"
-            i18n-lessThanOrEqualToValidationComparer="kendo.spreadsheet.lessThanOrEqualToValidationComparer|The text of the less than on equal to validation comparer"
-            lessThanOrEqualToValidationComparer="less than or equal to"
-            i18n-italic="kendo.spreadsheet.italic|The title of the Italic tool."
-            italic="Italic"
-            i18n-underline="kendo.spreadsheet.underline|The title of the Underline tool."
-            underline="Underline"
-            i18n-loadFile="kendo.spreadsheet.loadFile|The title of the Load File tool."
-            loadFile="Open..."
-            i18n-saveFile="kendo.spreadsheet.saveFile|The title of the Save File tool."
-            saveFile="Export..."
-            i18n-format="kendo.spreadsheet.format|The text of the Format tool."
-            format="Custom format..."
-            i18n-fontFamily="kendo.spreadsheet.fontFamily|The text of the Font Family tool."
-            fontFamily="Font"
-            i18n-fontSize="kendo.spreadsheet.fontSize|The text of the Font Size tool."
-            fontSize="Font size"
-            i18n-home="kendo.spreadsheet.home|The text of the Home toolbar tab."
-            home="Home"
-            i18n-file="kendo.spreadsheet.file|The text of the File toolbar tab."
-            file="File"
-            i18n-insert="kendo.spreadsheet.insert|The text of the Insert toolbar tab."
-            insert="Insert"
-            i18n-formatTab="kendo.spreadsheet.formatTab|The text of the Format toolbar tab."
-            formatTab="Format"
-            i18n-dataTab="kendo.spreadsheet.dataTab|The text of the Data toolbar tab."
-            dataTab="Data"
-            i18n-view="kendo.spreadsheet.view|The text of the View toolbar tab."
-            view="View"
-            i18n-undo="kendo.spreadsheet.undo|The title of the Undo tool."
-            undo="Undo"
-            i18n-redo="kendo.spreadsheet.redo|The title of the Redo tool."
-            redo="Redo"
-            i18n-gridLines="kendo.spreadsheet.gridLines|The title of the Grid Lines tool."
-            gridLines="Toggle grid lines"
-            i18n-addColumnLeft="kendo.spreadsheet.addColumnLeft|The title of the tool that adds new column before currently selected column."
-            addColumnLeft="Add column left"
-            i18n-addColumnRight="kendo.spreadsheet.addColumnRight|The title of the tool that adds new column after currently selected column."
-            addColumnRight="Add column right"
-            i18n-addRowBelow="kendo.spreadsheet.addRowBelow|The title of the tool that adds new row below currently selected row."
-            addRowBelow="Add row below"
-            i18n-addRowAbove="kendo.spreadsheet.addRowAbove|The title of the tool that adds new row above currently selected row."
-            addRowAbove="Add row above"
-            i18n-deleteColumn="kendo.spreadsheet.deleteColumn|The title of the tool that deletes a column."
-            deleteColumn="Delete column"
-            i18n-deleteRow="kendo.spreadsheet.deleteRow|The title of the tool that deletes a row."
-            deleteRow="Delete row"
-            i18n-wrap="kendo.spreadsheet.wrap|The title of the Text Wrap tool."
-            wrap="Text wrap"
-            i18n-align="kendo.spreadsheet.align|The title of the Text Align tool."
-            align="Align"
-            i18n-alignHorizontal="kendo.spreadsheet.alignHorizontal|The title of the Text Align Horizontal tool."
-            alignHorizontal="Align horizontally"
-            i18n-alignVertical="kendo.spreadsheet.alignVertical|The title of the Text Align Vertical tool."
-            alignVertical="Align vertically"
-            i18n-alignLeft="kendo.spreadsheet.alignLeft|The title of the Text Align Left tool."
-            alignLeft="Align Left"
-            i18n-alignCenter="kendo.spreadsheet.alignCenter|The title of the Text Align Center tool."
-            alignCenter="Align Center"
-            i18n-alignRight="kendo.spreadsheet.alignRight|The title of the Text Align Right tool."
-            alignRight="Align Right"
-            i18n-alignJustify="kendo.spreadsheet.alignJustify|The title of the Text Align Justify tool."
-            alignJustify="Align Justify"
-            i18n-alignTop="kendo.spreadsheet.alignTop|The title of the Text Align Top tool."
-            alignTop="Align Top"
-            i18n-alignMiddle="kendo.spreadsheet.alignMiddle|The title of the Text Align Middle tool."
-            alignMiddle="Align Middle"
-            i18n-alignBottom="kendo.spreadsheet.alignBottom|The title of the Text Align Bottom tool."
-            alignBottom="Align Bottom"
-            i18n-merge="kendo.spreadsheet.merge|The title of the Cells Merge tool."
-            merge="Merge"
-            i18n-mergeAll="kendo.spreadsheet.mergeAll|The title of the Merge all tool."
-            mergeAll="Merge all"
-            i18n-mergeHorizontally="kendo.spreadsheet.mergeHorizontally|The title of the Merge horizontally tool."
-            mergeHorizontally="Merge horizontally"
-            i18n-mergeVertically="kendo.spreadsheet.mergeVertically|The title of the Merge vertically tool."
-            mergeVertically="Merge vertically"
-            i18n-unmerge="kendo.spreadsheet.unmerge|The title of the Unmerge tool."
-            unmerge="Unmerge"
-            i18n-insertLink="kendo.spreadsheet.insertLink|The title of the tool that inserts a link."
-            insertLink="Insert link"
-            i18n-decreaseDecimal="kendo.spreadsheet.decreaseDecimal|The title of the tool that decreases decimals."
-            decreaseDecimal="Decrease decimal"
-            i18n-increaseDecimal="kendo.spreadsheet.increaseDecimal|The title of the tool that increases decimals."
-            increaseDecimal="Increase decimal"
-            i18n-increaseFontSize="kendo.spreadsheet.increaseFontSize|The title of the tool that increases the cell font size."
-            increaseFontSize="Increase font size"
-            i18n-decreaseFontSize="kendo.spreadsheet.decreaseFontSize|The title of the tool that decreases the cell font size."
-            decreaseFontSize="Decrease font size"
-            i18n-dialogApply="kendo.spreadsheet.dialogApply|The text of the **Apply** button in all Spreadsheet dialogs."
-            dialogApply="Apply"
-            i18n-dialogCancel="kendo.spreadsheet.dialogCancel|The text of the **Cancel** button in all Spreadsheet dialogs."
-            dialogCancel="Cancel"
-            i18n-dialogDelete="kendo.spreadsheet.dialogDelete|The text of the **Delete** button in the Delete sheet dialog."
-            dialogDelete="Delete"
-            i18n-dialogRename="kendo.spreadsheet.dialogRename|The text of the **Rename** button in the Rename sheet dialog."
-            dialogRename="Rename"
-            i18n-dialogInsert="kendo.spreadsheet.dialogInsert|The text of the **Insert** button in all Spreadsheet dialogs."
-            dialogInsert="Insert"
-            i18n-dialogRemove="kendo.spreadsheet.dialogRemove|The text of the **Remove** button in all Spreadsheet dialogs."
-            dialogRemove="Remove"
-            i18n-dialogRemoveLink="kendo.spreadsheet.dialogRemoveLink|The text of the **Remove link** button in the Link tool dialog."
-            dialogRemoveLink="Remove link"
-            i18n-rename="kendo.spreadsheet.rename|The title of the Rename sheet dialog."
-            rename="Rename Sheet"
-            i18n-delete="kendo.spreadsheet.delete|The title of the Delete sheet dialog."
-            delete="Delete Sheet"
-            i18n-nameBox="kendo.spreadsheet.nameBox|The title of the Name Box input."
-            nameBox="Name Box"
-            i18n-formulaInput="kendo.spreadsheet.formulaInput|The title of the Formula input."
-            formulaInput="Formula Input"
-            i18n-addSheet="kendo.spreadsheet.addSheet|The title of the Add new sheet button."
-            addSheet="Add New Sheet"
-            i18n-sheetsMenu="kendo.spreadsheet.sheetsMenu|The title of the Sheets menu button."
-            sheetsMenu="All Sheets"
-            i18n-openUnsupported="kendo.spreadsheet.openUnsupported|The content of the dialog that warns about an unsupported file type."
-            openUnsupported="Unsupported format. Please select an .xlsx file."
-            i18n-modifyMerged="kendo.spreadsheet.modifyMerged|The content of the dialog that warns about modifying a merged cell."
-            modifyMerged="Cannot change part of a merged cell."
-            i18n-cannotModifyDisabled="kendo.spreadsheet.cannotModifyDisabled|The content of the dialog that warns about modifying a disabled cell."
-            cannotModifyDisabled="Cannot modify disabled cells."
-            i18n-dialogOk="kendo.spreadsheet.dialogOk|The text of the **OK** dialog button."
-            dialogOk="OK"
-            i18n-dialogError="kendo.spreadsheet.dialogError|The title of an error dialog."
-            dialogError="Error"
-            i18n-duplicateSheetName="kendo.spreadsheet.duplicateSheetName|The content of the dialog that warns about duplicated sheet name."
-            duplicateSheetName="There is an existing sheet with this name. Please enter another name."
-            i18n-copy="kendo.spreadsheet.copy|The Copy command text."
-            copy="Copy"
-            i18n-cut="kendo.spreadsheet.cut|The Cut command text."
-            cut="Cut"
-            i18n-paste="kendo.spreadsheet.paste|The Paste command text."
-            paste="Paste (use Ctrl/⌘ + V)"
-            i18n-hideRow="kendo.spreadsheet.hideRow|The Hide row command text."
-            hideRow="Hide"
-            i18n-unhideRow="kendo.spreadsheet.unhideRow|The Unhide row command text."
-            unhideRow="Unhide"
-            i18n-hideColumn="kendo.spreadsheet.hideColumn|The Hide column command text."
-            hideColumn="Hide"
-            i18n-unhideColumn="kendo.spreadsheet.unhideColumn|The Unhide column command text."
-            unhideColumn="Unhide"
-            i18n-sheetDelete="kendo.spreadsheet.sheetDelete|The text of the Sheet menu Delete option."
-            sheetDelete="Delete"
-            i18n-sheetRename="kendo.spreadsheet.sheetRename|The text of the Sheet menu Rename option."
-            sheetRename="Rename"
-            i18n-sheetDuplicate="kendo.spreadsheet.sheetDuplicate|The text of the Sheet menu Duplicate option."
-            sheetDuplicate="Duplicate"
-            i18n-sheetHide="kendo.spreadsheet.sheetHide|The text of the Sheet menu Hide option."
-            sheetHide="Hide"
-            i18n-sheetMoveLeft="kendo.spreadsheet.sheetMoveLeft|The text of the Sheet menu Move Left option."
-            sheetMoveLeft="Move Left"
-            i18n-sheetMoveRight="kendo.spreadsheet.sheetMoveRight|The text of the Sheet menu Move Right option."
-            sheetMoveRight="Move Right"
-            i18n-invalidNameError="kendo.spreadsheet.invalidNameError|The content of the dialog that warns about invalid name input."
-            invalidNameError="{{ 'Invalid name: {inputValue}' }}">
+          kendoSpreadsheetLocalizedMessages
+          i18n-background="kendo.spreadsheet.background|The title of the tool that changes the text background color."
+          background="Background color"
+          i18n-color="kendo.spreadsheet.color|The title of the tool that changes the text font color."
+          color="Font color"
+          i18n-bold="kendo.spreadsheet.bold|The title of the Bold tool."
+          bold="Bold"
+          i18n-dataValidation="kendo.spreadsheet.dataValidation|The title of the Data Validation tool."
+          dataValidation="Data Validation"
+          i18n-validationCellRange="kendo.spreadsheet.validationCellRange|The text of the Cell Range label in the data validation dialog."
+          validationCellRange="Cell Range"
+          i18n-validationCriteria="kendo.spreadsheet.validationCriteria|The text of the Criteria dropdown list label in the data validation dialog."
+          validationCriteria="Criteria"
+          i18n-validationMinValue="kendo.spreadsheet.validationMinValue|The text of the Min value label in the data validation dialog."
+          validationMinValue="Min"
+          i18n-validationMaxValue="kendo.spreadsheet.validationMaxValue|The text of the Max value label in the data validation dialog."
+          validationMaxValue="Max"
+          i18n-validationStartValue="kendo.spreadsheet.validationStartValue|The text of the Start value label in the data validation dialog."
+          validationStartValue="Start"
+          i18n-validationEndValue="kendo.spreadsheet.validationEndValue|The text of the End value label in the data validation dialog."
+          validationEndValue="End"
+          i18n-validationValue="kendo.spreadsheet.validationValue|The text of the Value label in the data validation dialog."
+          validationValue="Text"
+          i18n-validationShowListButtonCheckbox="kendo.spreadsheet.validationShowListButtonCheckbox|The text for the Show list button checkbox label in the data validation dialog."
+          validationShowListButtonCheckbox="Display button to show list"
+          i18n-validationOnInvalidData="kendo.spreadsheet.validationOnInvalidData|The text for the On invalid data label in the data validation dialog."
+          validationOnInvalidData="On invalid data"
+          i18n-validationShowDateButtonCheckbox="kendo.spreadsheet.validationShowDateButtonCheckbox|The text for the Show date button checkbox label in the data validation dialog."
+          validationShowDateButtonCheckbox="Display button to show Calendar"
+          i18n-validationRejectInput="kendo.spreadsheet.validationRejectInput|The text for the Reject input radio button label in the data validation dialog."
+          validationRejectInput="Reject input"
+          i18n-validationShowWarning="kendo.spreadsheet.validationShowWarning|The text for the Show warning radio button label in the data validation dialog."
+          validationShowWarning="Show warning"
+          i18n-validationHintTitle="kendo.spreadsheet.validationHintTitle|The text for the Custom hint title input label in the data validation dialog."
+          validationHintTitle="Custom hint title"
+          i18n-validationHintMessage="kendo.spreadsheet.validationHintMessage|The text for the Custom hint input label in the data validation dialog."
+          validationHintMessage="Custom hint"
+          i18n-validationShowHint="kendo.spreadsheet.validationShowHint|The text for the Show hint radio button label in the data validation dialog."
+          validationShowHint="Show hint"
+          i18n-validationIgnoreBlankCheckbox="kendo.spreadsheet.validationIgnoreBlankCheckbox|The text for the Ignore blank checkbox label in the data validation dialog."
+          validationIgnoreBlankCheckbox="Ignore blank"
+          i18n-validationComparer="kendo.spreadsheet.validationComparer|The text of the Comparer dropdown list label in the data validation dialog."
+          validationComparer="Comparer"
+          i18n-anyValueValidationCriteria="kendo.spreadsheet.anyValueValidationCriteria|The text of the Any value validation criteria"
+          anyValueValidationCriteria="Any value"
+          i18n-numberValidationCriteria="kendo.spreadsheet.numberValidationCriteria|The text of the Number validation criteria"
+          numberValidationCriteria="Number"
+          i18n-textValidationCriteria="kendo.spreadsheet.textValidationCriteria|The text of the Text validation criteria"
+          textValidationCriteria="Text"
+          i18n-dateValidationCriteria="kendo.spreadsheet.dateValidationCriteria|The text of the Date validation criteria"
+          dateValidationCriteria="Date"
+          i18n-customFormulaValidationCriteria="kendo.spreadsheet.customFormulaValidationCriteria|The text of the Custom formula validation criteria"
+          customFormulaValidationCriteria="Custom Formula"
+          i18n-listValidationCriteria="kendo.spreadsheet.listValidationCriteria|The text of the List validation criteria"
+          listValidationCriteria="List"
+          i18n-greaterThanValidationComparer="kendo.spreadsheet.greaterThanValidationComparer|The text of the greater than validation comparer"
+          greaterThanValidationComparer="greater than"
+          i18n-lessThanValidationComparer="kendo.spreadsheet.lessThanValidationComparer|The text of the less than validation comparer"
+          lessThanValidationComparer="less than"
+          i18n-betweenValidationComparer="kendo.spreadsheet.betweenValidationComparer|The text of the between validation comparer"
+          betweenValidationComparer="between"
+          i18n-notBetweenValidationComparer="kendo.spreadsheet.notBetweenValidationComparer|The text of the not between validation comparer"
+          notBetweenValidationComparer="not between"
+          i18n-equalToValidationComparer="kendo.spreadsheet.equalToValidationComparer|The text of the equal to validation comparer"
+          equalToValidationComparer="equal to"
+          i18n-notEqualToValidationComparer="kendo.spreadsheet.notEqualToValidationComparer|The text of the not equal to validation comparer"
+          notEqualToValidationComparer="not equal to"
+          i18n-greaterThanOrEqualToValidationComparer="kendo.spreadsheet.greaterThanOrEqualToValidationComparer|The text of the greater than on equal to validation comparer"
+          greaterThanOrEqualToValidationComparer="greater than or equal to"
+          i18n-lessThanOrEqualToValidationComparer="kendo.spreadsheet.lessThanOrEqualToValidationComparer|The text of the less than on equal to validation comparer"
+          lessThanOrEqualToValidationComparer="less than or equal to"
+          i18n-italic="kendo.spreadsheet.italic|The title of the Italic tool."
+          italic="Italic"
+          i18n-underline="kendo.spreadsheet.underline|The title of the Underline tool."
+          underline="Underline"
+          i18n-loadFile="kendo.spreadsheet.loadFile|The title of the Load File tool."
+          loadFile="Open..."
+          i18n-saveFile="kendo.spreadsheet.saveFile|The title of the Save File tool."
+          saveFile="Export..."
+          i18n-format="kendo.spreadsheet.format|The text of the Format tool."
+          format="Custom format..."
+          i18n-fontFamily="kendo.spreadsheet.fontFamily|The text of the Font Family tool."
+          fontFamily="Font"
+          i18n-fontSize="kendo.spreadsheet.fontSize|The text of the Font Size tool."
+          fontSize="Font size"
+          i18n-home="kendo.spreadsheet.home|The text of the Home toolbar tab."
+          home="Home"
+          i18n-file="kendo.spreadsheet.file|The text of the File toolbar tab."
+          file="File"
+          i18n-insert="kendo.spreadsheet.insert|The text of the Insert toolbar tab."
+          insert="Insert"
+          i18n-formatTab="kendo.spreadsheet.formatTab|The text of the Format toolbar tab."
+          formatTab="Format"
+          i18n-dataTab="kendo.spreadsheet.dataTab|The text of the Data toolbar tab."
+          dataTab="Data"
+          i18n-view="kendo.spreadsheet.view|The text of the View toolbar tab."
+          view="View"
+          i18n-undo="kendo.spreadsheet.undo|The title of the Undo tool."
+          undo="Undo"
+          i18n-redo="kendo.spreadsheet.redo|The title of the Redo tool."
+          redo="Redo"
+          i18n-gridLines="kendo.spreadsheet.gridLines|The title of the Grid Lines tool."
+          gridLines="Toggle grid lines"
+          i18n-addColumnLeft="kendo.spreadsheet.addColumnLeft|The title of the tool that adds new column before currently selected column."
+          addColumnLeft="Add column left"
+          i18n-addColumnRight="kendo.spreadsheet.addColumnRight|The title of the tool that adds new column after currently selected column."
+          addColumnRight="Add column right"
+          i18n-addRowBelow="kendo.spreadsheet.addRowBelow|The title of the tool that adds new row below currently selected row."
+          addRowBelow="Add row below"
+          i18n-addRowAbove="kendo.spreadsheet.addRowAbove|The title of the tool that adds new row above currently selected row."
+          addRowAbove="Add row above"
+          i18n-deleteColumn="kendo.spreadsheet.deleteColumn|The title of the tool that deletes a column."
+          deleteColumn="Delete column"
+          i18n-deleteRow="kendo.spreadsheet.deleteRow|The title of the tool that deletes a row."
+          deleteRow="Delete row"
+          i18n-wrap="kendo.spreadsheet.wrap|The title of the Text Wrap tool."
+          wrap="Text wrap"
+          i18n-align="kendo.spreadsheet.align|The title of the Text Align tool."
+          align="Align"
+          i18n-alignHorizontal="kendo.spreadsheet.alignHorizontal|The title of the Text Align Horizontal tool."
+          alignHorizontal="Align horizontally"
+          i18n-alignVertical="kendo.spreadsheet.alignVertical|The title of the Text Align Vertical tool."
+          alignVertical="Align vertically"
+          i18n-alignLeft="kendo.spreadsheet.alignLeft|The title of the Text Align Left tool."
+          alignLeft="Align Left"
+          i18n-alignCenter="kendo.spreadsheet.alignCenter|The title of the Text Align Center tool."
+          alignCenter="Align Center"
+          i18n-alignRight="kendo.spreadsheet.alignRight|The title of the Text Align Right tool."
+          alignRight="Align Right"
+          i18n-alignJustify="kendo.spreadsheet.alignJustify|The title of the Text Align Justify tool."
+          alignJustify="Align Justify"
+          i18n-alignTop="kendo.spreadsheet.alignTop|The title of the Text Align Top tool."
+          alignTop="Align Top"
+          i18n-alignMiddle="kendo.spreadsheet.alignMiddle|The title of the Text Align Middle tool."
+          alignMiddle="Align Middle"
+          i18n-alignBottom="kendo.spreadsheet.alignBottom|The title of the Text Align Bottom tool."
+          alignBottom="Align Bottom"
+          i18n-merge="kendo.spreadsheet.merge|The title of the Cells Merge tool."
+          merge="Merge"
+          i18n-mergeAll="kendo.spreadsheet.mergeAll|The title of the Merge all tool."
+          mergeAll="Merge all"
+          i18n-mergeHorizontally="kendo.spreadsheet.mergeHorizontally|The title of the Merge horizontally tool."
+          mergeHorizontally="Merge horizontally"
+          i18n-mergeVertically="kendo.spreadsheet.mergeVertically|The title of the Merge vertically tool."
+          mergeVertically="Merge vertically"
+          i18n-unmerge="kendo.spreadsheet.unmerge|The title of the Unmerge tool."
+          unmerge="Unmerge"
+          i18n-insertLink="kendo.spreadsheet.insertLink|The title of the tool that inserts a link."
+          insertLink="Insert link"
+          i18n-decreaseDecimal="kendo.spreadsheet.decreaseDecimal|The title of the tool that decreases decimals."
+          decreaseDecimal="Decrease decimal"
+          i18n-increaseDecimal="kendo.spreadsheet.increaseDecimal|The title of the tool that increases decimals."
+          increaseDecimal="Increase decimal"
+          i18n-increaseFontSize="kendo.spreadsheet.increaseFontSize|The title of the tool that increases the cell font size."
+          increaseFontSize="Increase font size"
+          i18n-decreaseFontSize="kendo.spreadsheet.decreaseFontSize|The title of the tool that decreases the cell font size."
+          decreaseFontSize="Decrease font size"
+          i18n-dialogApply="kendo.spreadsheet.dialogApply|The text of the **Apply** button in all Spreadsheet dialogs."
+          dialogApply="Apply"
+          i18n-dialogCancel="kendo.spreadsheet.dialogCancel|The text of the **Cancel** button in all Spreadsheet dialogs."
+          dialogCancel="Cancel"
+          i18n-dialogDelete="kendo.spreadsheet.dialogDelete|The text of the **Delete** button in the Delete sheet dialog."
+          dialogDelete="Delete"
+          i18n-dialogRename="kendo.spreadsheet.dialogRename|The text of the **Rename** button in the Rename sheet dialog."
+          dialogRename="Rename"
+          i18n-dialogInsert="kendo.spreadsheet.dialogInsert|The text of the **Insert** button in all Spreadsheet dialogs."
+          dialogInsert="Insert"
+          i18n-dialogRemove="kendo.spreadsheet.dialogRemove|The text of the **Remove** button in all Spreadsheet dialogs."
+          dialogRemove="Remove"
+          i18n-dialogRemoveLink="kendo.spreadsheet.dialogRemoveLink|The text of the **Remove link** button in the Link tool dialog."
+          dialogRemoveLink="Remove link"
+          i18n-rename="kendo.spreadsheet.rename|The title of the Rename sheet dialog."
+          rename="Rename Sheet"
+          i18n-delete="kendo.spreadsheet.delete|The title of the Delete sheet dialog."
+          delete="Delete Sheet"
+          i18n-nameBox="kendo.spreadsheet.nameBox|The title of the Name Box input."
+          nameBox="Name Box"
+          i18n-formulaInput="kendo.spreadsheet.formulaInput|The title of the Formula input."
+          formulaInput="Formula Input"
+          i18n-addSheet="kendo.spreadsheet.addSheet|The title of the Add new sheet button."
+          addSheet="Add New Sheet"
+          i18n-sheetsMenu="kendo.spreadsheet.sheetsMenu|The title of the Sheets menu button."
+          sheetsMenu="All Sheets"
+          i18n-openUnsupported="kendo.spreadsheet.openUnsupported|The content of the dialog that warns about an unsupported file type."
+          openUnsupported="Unsupported format. Please select an .xlsx file."
+          i18n-modifyMerged="kendo.spreadsheet.modifyMerged|The content of the dialog that warns about modifying a merged cell."
+          modifyMerged="Cannot change part of a merged cell."
+          i18n-cannotModifyDisabled="kendo.spreadsheet.cannotModifyDisabled|The content of the dialog that warns about modifying a disabled cell."
+          cannotModifyDisabled="Cannot modify disabled cells."
+          i18n-dialogOk="kendo.spreadsheet.dialogOk|The text of the **OK** dialog button."
+          dialogOk="OK"
+          i18n-dialogError="kendo.spreadsheet.dialogError|The title of an error dialog."
+          dialogError="Error"
+          i18n-duplicateSheetName="kendo.spreadsheet.duplicateSheetName|The content of the dialog that warns about duplicated sheet name."
+          duplicateSheetName="There is an existing sheet with this name. Please enter another name."
+          i18n-copy="kendo.spreadsheet.copy|The Copy command text."
+          copy="Copy"
+          i18n-cut="kendo.spreadsheet.cut|The Cut command text."
+          cut="Cut"
+          i18n-paste="kendo.spreadsheet.paste|The Paste command text."
+          paste="Paste (use Ctrl/⌘ + V)"
+          i18n-hideRow="kendo.spreadsheet.hideRow|The Hide row command text."
+          hideRow="Hide"
+          i18n-unhideRow="kendo.spreadsheet.unhideRow|The Unhide row command text."
+          unhideRow="Unhide"
+          i18n-hideColumn="kendo.spreadsheet.hideColumn|The Hide column command text."
+          hideColumn="Hide"
+          i18n-unhideColumn="kendo.spreadsheet.unhideColumn|The Unhide column command text."
+          unhideColumn="Unhide"
+          i18n-sheetDelete="kendo.spreadsheet.sheetDelete|The text of the Sheet menu Delete option."
+          sheetDelete="Delete"
+          i18n-sheetRename="kendo.spreadsheet.sheetRename|The text of the Sheet menu Rename option."
+          sheetRename="Rename"
+          i18n-sheetDuplicate="kendo.spreadsheet.sheetDuplicate|The text of the Sheet menu Duplicate option."
+          sheetDuplicate="Duplicate"
+          i18n-sheetHide="kendo.spreadsheet.sheetHide|The text of the Sheet menu Hide option."
+          sheetHide="Hide"
+          i18n-sheetMoveLeft="kendo.spreadsheet.sheetMoveLeft|The text of the Sheet menu Move Left option."
+          sheetMoveLeft="Move Left"
+          i18n-sheetMoveRight="kendo.spreadsheet.sheetMoveRight|The text of the Sheet menu Move Right option."
+          sheetMoveRight="Move Right"
+          i18n-invalidNameError="kendo.spreadsheet.invalidNameError|The content of the dialog that warns about invalid name input."
+          invalidNameError="{{ 'Invalid name: {inputValue}' }}">
         </ng-container>
         <div class="k-spreadsheet-header">
-            <kendo-menu kendoSpreadsheetMenu (select)="onMenuItemSelect($event)">
-                <kendo-menu-item *ngFor="let item of menuItems" [text]="item.text" [cssClass]="item.cssClass"></kendo-menu-item>
-            </kendo-menu>
-            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'file'"
-                [attr.aria-label]="messageFor('file')"
-                fillMode="flat"
-                class="k-spreadsheet-toolbar"
-                [overflow]="overflow">
-                <kendo-spreadsheet-load-file-tool></kendo-spreadsheet-load-file-tool>
-                <kendo-toolbar-button kendoSpreadsheetSaveFile></kendo-toolbar-button>
+          <kendo-menu kendoSpreadsheetMenu (select)="onMenuItemSelect($event)">
+            @for (item of menuItems; track item) {
+              <kendo-menu-item [text]="item.text" [cssClass]="item.cssClass"></kendo-menu-item>
+            }
+          </kendo-menu>
+          @if (selectedMenuItem?.active && selectedMenuItem.id === 'file') {
+            <kendo-toolbar
+              [attr.aria-label]="messageFor('file')"
+              fillMode="flat"
+              class="k-spreadsheet-toolbar"
+              [overflow]="overflow">
+              <kendo-spreadsheet-load-file-tool></kendo-spreadsheet-load-file-tool>
+              <kendo-toolbar-button kendoSpreadsheetSaveFile></kendo-toolbar-button>
             </kendo-toolbar>
-            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'home'"
-                [attr.aria-label]="messageFor('home')"
-                class="k-spreadsheet-toolbar"
-                fillMode="flat"
-                [overflow]="overflow">
-                <kendo-toolbar-button kendoSpreadsheetUndo></kendo-toolbar-button>
-                <kendo-toolbar-button kendoSpreadsheetRedo></kendo-toolbar-button>
-                <kendo-toolbar-separator></kendo-toolbar-separator>
-                <kendo-toolbar-dropdownlist kendoSpreadsheetFontFamily></kendo-toolbar-dropdownlist>
-                <kendo-toolbar-dropdownlist kendoSpreadsheetFontSize></kendo-toolbar-dropdownlist>
-                <kendo-toolbar-buttongroup fillMode="flat">
-                    <kendo-toolbar-button kendoSpreadsheetIncreaseFontSize></kendo-toolbar-button>
-                    <kendo-toolbar-button kendoSpreadsheetDecreaseFontSize></kendo-toolbar-button>
-                </kendo-toolbar-buttongroup>
-                <kendo-toolbar-separator></kendo-toolbar-separator>
-                <kendo-toolbar-buttongroup fillMode="flat">
-                    <kendo-toolbar-button kendoSpreadsheetBold></kendo-toolbar-button>
-                    <kendo-toolbar-button kendoSpreadsheetItalic></kendo-toolbar-button>
-                    <kendo-toolbar-button kendoSpreadsheetUnderline></kendo-toolbar-button>
-                </kendo-toolbar-buttongroup>
-                <kendo-spreadsheet-forecolor-tool></kendo-spreadsheet-forecolor-tool>
-                <kendo-toolbar-separator></kendo-toolbar-separator>
-                <kendo-spreadsheet-backcolor-tool></kendo-spreadsheet-backcolor-tool>
-                <kendo-toolbar-separator></kendo-toolbar-separator>
-                <kendo-toolbar-dropdownbutton kendoSpreadsheetHorizontalTextAlign></kendo-toolbar-dropdownbutton>
-                <kendo-toolbar-dropdownbutton kendoSpreadsheetVerticalTextAlign></kendo-toolbar-dropdownbutton>
-                <kendo-toolbar-button kendoSpreadsheetTextWrap></kendo-toolbar-button>
-                <kendo-toolbar-separator></kendo-toolbar-separator>
-                <kendo-toolbar-dropdownbutton kendoSpreadsheetFormat></kendo-toolbar-dropdownbutton>
+          }
+          @if (selectedMenuItem?.active && selectedMenuItem.id === 'home') {
+            <kendo-toolbar
+              [attr.aria-label]="messageFor('home')"
+              class="k-spreadsheet-toolbar"
+              fillMode="flat"
+              [overflow]="overflow">
+              <kendo-toolbar-button kendoSpreadsheetUndo></kendo-toolbar-button>
+              <kendo-toolbar-button kendoSpreadsheetRedo></kendo-toolbar-button>
+              <kendo-toolbar-separator></kendo-toolbar-separator>
+              <kendo-toolbar-dropdownlist kendoSpreadsheetFontFamily></kendo-toolbar-dropdownlist>
+              <kendo-toolbar-dropdownlist kendoSpreadsheetFontSize></kendo-toolbar-dropdownlist>
+              <kendo-toolbar-buttongroup fillMode="flat">
+                <kendo-toolbar-button kendoSpreadsheetIncreaseFontSize></kendo-toolbar-button>
+                <kendo-toolbar-button kendoSpreadsheetDecreaseFontSize></kendo-toolbar-button>
+              </kendo-toolbar-buttongroup>
+              <kendo-toolbar-separator></kendo-toolbar-separator>
+              <kendo-toolbar-buttongroup fillMode="flat">
+                <kendo-toolbar-button kendoSpreadsheetBold></kendo-toolbar-button>
+                <kendo-toolbar-button kendoSpreadsheetItalic></kendo-toolbar-button>
+                <kendo-toolbar-button kendoSpreadsheetUnderline></kendo-toolbar-button>
+              </kendo-toolbar-buttongroup>
+              <kendo-spreadsheet-forecolor-tool></kendo-spreadsheet-forecolor-tool>
+              <kendo-toolbar-separator></kendo-toolbar-separator>
+              <kendo-spreadsheet-backcolor-tool></kendo-spreadsheet-backcolor-tool>
+              <kendo-toolbar-separator></kendo-toolbar-separator>
+              <kendo-toolbar-dropdownbutton kendoSpreadsheetHorizontalTextAlign></kendo-toolbar-dropdownbutton>
+              <kendo-toolbar-dropdownbutton kendoSpreadsheetVerticalTextAlign></kendo-toolbar-dropdownbutton>
+              <kendo-toolbar-button kendoSpreadsheetTextWrap></kendo-toolbar-button>
+              <kendo-toolbar-separator></kendo-toolbar-separator>
+              <kendo-toolbar-dropdownbutton kendoSpreadsheetFormat></kendo-toolbar-dropdownbutton>
             </kendo-toolbar>
-            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'insert'"
-                [attr.aria-label]="messageFor('insert')"
-                fillMode="flat"
-                class="k-spreadsheet-toolbar"
-                [overflow]="overflow">
-                <kendo-toolbar-button kendoSpreadsheetInsertLink></kendo-toolbar-button>
-                <kendo-toolbar-separator></kendo-toolbar-separator>
-                <kendo-toolbar-button kendoSpreadsheetAddColumnLeftButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoSpreadsheetAddColumnRightButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoSpreadsheetAddRowBelowButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoSpreadsheetAddRowAboveButton></kendo-toolbar-button>
-                <kendo-toolbar-separator></kendo-toolbar-separator>
-                <kendo-toolbar-button kendoSpreadsheetDeleteColumnButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoSpreadsheetDeleteRowButton></kendo-toolbar-button>
+          }
+          @if (selectedMenuItem?.active && selectedMenuItem.id === 'insert') {
+            <kendo-toolbar
+              [attr.aria-label]="messageFor('insert')"
+              fillMode="flat"
+              class="k-spreadsheet-toolbar"
+              [overflow]="overflow">
+              <kendo-toolbar-button kendoSpreadsheetInsertLink></kendo-toolbar-button>
+              <kendo-toolbar-separator></kendo-toolbar-separator>
+              <kendo-toolbar-button kendoSpreadsheetAddColumnLeftButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoSpreadsheetAddColumnRightButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoSpreadsheetAddRowBelowButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoSpreadsheetAddRowAboveButton></kendo-toolbar-button>
+              <kendo-toolbar-separator></kendo-toolbar-separator>
+              <kendo-toolbar-button kendoSpreadsheetDeleteColumnButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoSpreadsheetDeleteRowButton></kendo-toolbar-button>
             </kendo-toolbar>
-            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'format'"
-                [attr.aria-label]="messageFor('formatTab')"
-                fillMode="flat"
-                class="k-spreadsheet-toolbar"
-                [overflow]="overflow">
-                <kendo-toolbar-button kendoSpreadsheetDecreaseDecimal></kendo-toolbar-button>
-                <kendo-toolbar-button kendoSpreadsheetIncreaseDecimal></kendo-toolbar-button>
+          }
+          @if (selectedMenuItem?.active && selectedMenuItem.id === 'format') {
+            <kendo-toolbar
+              [attr.aria-label]="messageFor('formatTab')"
+              fillMode="flat"
+              class="k-spreadsheet-toolbar"
+              [overflow]="overflow">
+              <kendo-toolbar-button kendoSpreadsheetDecreaseDecimal></kendo-toolbar-button>
+              <kendo-toolbar-button kendoSpreadsheetIncreaseDecimal></kendo-toolbar-button>
             </kendo-toolbar>
-            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'view'"
-                [attr.aria-label]="messageFor('view')"
-                fillMode="flat"
-                class="k-spreadsheet-toolbar"
-                [overflow]="overflow">
-                <kendo-toolbar-dropdownbutton kendoSpreadsheetMerge></kendo-toolbar-dropdownbutton>
-                <kendo-toolbar-separator></kendo-toolbar-separator>
-                <kendo-toolbar-button kendoSpreadsheetGridLines></kendo-toolbar-button>
+          }
+          @if (selectedMenuItem?.active && selectedMenuItem.id === 'view') {
+            <kendo-toolbar
+              [attr.aria-label]="messageFor('view')"
+              fillMode="flat"
+              class="k-spreadsheet-toolbar"
+              [overflow]="overflow">
+              <kendo-toolbar-dropdownbutton kendoSpreadsheetMerge></kendo-toolbar-dropdownbutton>
+              <kendo-toolbar-separator></kendo-toolbar-separator>
+              <kendo-toolbar-button kendoSpreadsheetGridLines></kendo-toolbar-button>
             </kendo-toolbar>
-            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'data'"
-                [attr.aria-label]="messageFor('dataTab')"
-                fillMode="flat"
-                class="k-spreadsheet-toolbar"
-                [overflow]="overflow">
-                <kendo-toolbar-button kendoSpreadsheetDataValidation></kendo-toolbar-button>
+          }
+          @if (selectedMenuItem?.active && selectedMenuItem.id === 'data') {
+            <kendo-toolbar
+              [attr.aria-label]="messageFor('dataTab')"
+              fillMode="flat"
+              class="k-spreadsheet-toolbar"
+              [overflow]="overflow">
+              <kendo-toolbar-button kendoSpreadsheetDataValidation></kendo-toolbar-button>
             </kendo-toolbar>
+          }
         </div>
         <div class="k-spreadsheet-action-bar">
-            <div #nameBox kendoSpreadsheetNameBox [spreadsheetWidget]="spreadsheetWidget"></div>
-            <div class="k-spreadsheet-formula-bar">
-                <span class="k-separator k-separator-vertical"></span>
-                <kendo-icon-wrapper
-                    name="formula-fx"
-                    [svgIcon]="formulaFxIcon">
-                </kendo-icon-wrapper>
-                <span class="k-separator k-separator-vertical"></span>
-                <div
-                    #formulaBar
-                    kendoSpreadsheetFormulaInput
-                    [formulaListMaxHeight]="formulaListMaxHeight"
-                    class="k-textbox k-input k-input-md k-input-flat k-rounded-md"></div>
-            </div>
+          <div #nameBox kendoSpreadsheetNameBox [spreadsheetWidget]="spreadsheetWidget"></div>
+          <div class="k-spreadsheet-formula-bar">
+            <span class="k-separator k-separator-vertical"></span>
+            <kendo-icon-wrapper
+              name="formula-fx"
+              [svgIcon]="formulaFxIcon">
+            </kendo-icon-wrapper>
+            <span class="k-separator k-separator-vertical"></span>
+            <div
+              #formulaBar
+              kendoSpreadsheetFormulaInput
+              [formulaListMaxHeight]="formulaListMaxHeight"
+            class="k-textbox k-input k-input-md k-input-flat k-rounded-md"></div>
+          </div>
         </div>
         <div class="k-spreadsheet-view">
-            <div class="k-spreadsheet-fixed-container"></div>
-                <div class="k-spreadsheet-scroller">
-                    <div class="k-spreadsheet-view-size"></div>
-                </div>
-            <div tabIndex="0" class="k-spreadsheet-clipboard" contentEditable="true"></div>
-            <div #formulaCell kendoSpreadsheetFormulaInput class="k-spreadsheet-cell-editor" data-role="formulainput"></div>
+          <div class="k-spreadsheet-fixed-container"></div>
+          <div class="k-spreadsheet-scroller">
+            <div class="k-spreadsheet-view-size"></div>
+          </div>
+          <div tabIndex="0" class="k-spreadsheet-clipboard" contentEditable="true"></div>
+          <div #formulaCell kendoSpreadsheetFormulaInput class="k-spreadsheet-cell-editor" data-role="formulainput"></div>
         </div>
         <div class="k-spreadsheet-sheets-bar"
-            kendoSpreadsheetSheetsBar
-            [sheets]="sheetsInfo"
-            [sheetDescriptors]="sheets">
+          kendoSpreadsheetSheetsBar
+          [sheets]="sheetsInfo"
+          [sheetDescriptors]="sheets">
         </div>
         <ng-container #dialogContainer></ng-container>
-
+        
         <kendo-contextmenu
-            #contextMenu
-            [items]="contextMenuItems"
-            (select)="onContextMenuSelect($event)"></kendo-contextmenu>
-
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
-    `,
+          #contextMenu
+          [items]="contextMenuItems"
+        (select)="onContextMenuSelect($event)"></kendo-contextmenu>
+        
+        @if (showLicenseWatermark) {
+          <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
+        `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, MenuComponent, MainMenuDirective, NgFor, MenuItemComponent, NgIf, ToolBarComponent, SpreadsheetLoadFileComponent, ToolBarButtonComponent, SpreadsheetSaveFileDirective, ToolBarButtonGroupComponent, SpreadsheetUndoDirective, SpreadsheetRedoDirective, ToolBarSeparatorComponent, SpreadsheetFontFamilyComponent, SpreadsheetFontSizeComponent, SpreadsheetIncreaseFontSizeDirective, SpreadsheetDecreaseFontSizeDirective, SpreadsheetBoldDirective, SpreadsheetItalicDirective, SpreadsheetUnderlineDirective, SpreadsheetForeColorComponent, SpreadsheetBackColorComponent, ToolBarDropDownButtonComponent, SpreadsheetHorizontalTextAlignDirective, SpreadsheetVerticalTextAlignDirective, SpreadsheetTextWrapDirective, SpreadsheetFormatDirective, SpreadsheetInsertLinkDirective, SpreadsheetAddColumnLeftButtonDirective, SpreadsheetAddColumnRightButtonDirective, SpreadsheetAddRowBelowButtonDirective, SpreadsheetAddRowAboveButtonDirective, SpreadsheetDeleteColumnButtonDirective, SpreadsheetDeleteRowButtonDirective, SpreadsheetDecreaseDecimalDirective, SpreadsheetIncreaseDecimalDirective, SpreadsheetMergeDirective, SpreadsheetGridLinesDirective, NameBoxComponent, IconWrapperComponent, FormulaInputDirective, SheetsBarComponent, ContextMenuComponent, WatermarkOverlayComponent, SpreadsheetDataValidationDirective]
+                    imports: [LocalizedMessagesDirective, MenuComponent, MainMenuDirective, MenuItemComponent, ToolBarComponent, SpreadsheetLoadFileComponent, ToolBarButtonComponent, SpreadsheetSaveFileDirective, ToolBarButtonGroupComponent, SpreadsheetUndoDirective, SpreadsheetRedoDirective, ToolBarSeparatorComponent, SpreadsheetFontFamilyComponent, SpreadsheetFontSizeComponent, SpreadsheetIncreaseFontSizeDirective, SpreadsheetDecreaseFontSizeDirective, SpreadsheetBoldDirective, SpreadsheetItalicDirective, SpreadsheetUnderlineDirective, SpreadsheetForeColorComponent, SpreadsheetBackColorComponent, ToolBarDropDownButtonComponent, SpreadsheetHorizontalTextAlignDirective, SpreadsheetVerticalTextAlignDirective, SpreadsheetTextWrapDirective, SpreadsheetFormatDirective, SpreadsheetInsertLinkDirective, SpreadsheetAddColumnLeftButtonDirective, SpreadsheetAddColumnRightButtonDirective, SpreadsheetAddRowBelowButtonDirective, SpreadsheetAddRowAboveButtonDirective, SpreadsheetDeleteColumnButtonDirective, SpreadsheetDeleteRowButtonDirective, SpreadsheetDecreaseDecimalDirective, SpreadsheetIncreaseDecimalDirective, SpreadsheetMergeDirective, SpreadsheetGridLinesDirective, NameBoxComponent, IconWrapperComponent, FormulaInputDirective, SheetsBarComponent, ContextMenuComponent, WatermarkOverlayComponent, SpreadsheetDataValidationDirective]
                 }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$4.IntlService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: ErrorHandlingService }, { type: i1$2.DialogService }, { type: i1$1.PopupService }, { type: i0.ViewContainerRef }], propDecorators: { formulaBarInputRef: [{
                 type: ViewChild,