@progress/kendo-angular-spreadsheet 16.5.0 → 16.6.0-develop.1

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

@@ -3,40 +3,31 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, Inject, Optional, Component, HostBinding, Input, Directive, forwardRef, HostListener, ViewChild, ElementRef, ViewChildren, InjectionToken, ViewContainerRef, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Output, Inject, Optional, Component, HostBinding, Input, Directive, ElementRef, ViewChild, ViewChildren, HostListener, InjectionToken, forwardRef, ViewContainerRef, NgModule } from '@angular/core';
+import { NgFor, NgIf, NgStyle, NgSwitch, NgSwitchCase } from '@angular/common';
+import { Subject, Subscription } from 'rxjs';
+import { take, map } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
 import { SpreadsheetWidget } from '@progress/kendo-spreadsheet-common';
 import * as i1$3 from '@progress/kendo-angular-intl';
-import { localeData, IntlModule } from '@progress/kendo-angular-intl';
+import { localeData } from '@progress/kendo-angular-intl';
 import { formulaFxIcon, trashIcon, copyIcon, pencilIcon, eyeSlashIcon, arrowRightIcon, arrowLeftIcon, alignCenterIcon, alignJustifyIcon, alignLeftIcon, alignRightIcon, alignTopIcon, alignMiddleIcon, alignBottomIcon, dropletIcon, boldIcon, foregroundColorIcon, italicIcon, arrowRotateCwIcon, underlineIcon, arrowRotateCcwIcon, textWrapIcon, tableColumnInsertLeftIcon, tableColumnInsertRightIcon, tableRowInsertAboveIcon, tableRowInsertBelowIcon, tableRowDeleteIcon, tableColumnDeleteIcon, bordersNoneIcon, folderOpenIcon, downloadIcon, customFormatIcon, fontSizeIcon, fontFamilyIcon, cellsMergeIcon, cellsMergeHorizontallyIcon, cellsMergeVerticallyIcon, tableUnmergeIcon, linkIcon, fontGrowIcon, fontShrinkIcon, decimalDecreaseIcon, decimalIncreaseIcon, cutIcon, clipboardIcon, eyeIcon, plusIcon, menuIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
-import { Subject, Subscription } from 'rxjs';
 import * as i2 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages } from '@progress/kendo-angular-l10n';
-import * as i3 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, isPresent, Keys, hasObservers, shouldShowValidationUI, EventsModule, WatermarkModule } from '@progress/kendo-angular-common';
 import * as i1 from '@progress/kendo-angular-popup';
-import { PopupService, PopupModule } from '@progress/kendo-angular-popup';
-import * as i2$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i6 from '@progress/kendo-angular-icons';
-import { IconsModule } from '@progress/kendo-angular-icons';
-import { take, map } from 'rxjs/operators';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { MenuComponent, MenuItemComponent, ContextMenuComponent } from '@progress/kendo-angular-menu';
+import { EventsOutsideAngularDirective, isDocumentAvailable, isPresent, Keys, hasObservers, shouldShowValidationUI, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
 import * as i1$1 from '@progress/kendo-angular-dialog';
-import { DialogContentBase, DialogModule } from '@progress/kendo-angular-dialog';
-import * as i9 from '@progress/kendo-angular-menu';
-import { MenusModule } from '@progress/kendo-angular-menu';
-import * as i3$1 from '@progress/kendo-angular-inputs';
-import { InputsModule } from '@progress/kendo-angular-inputs';
-import * as i3$2 from '@progress/kendo-angular-label';
-import { LabelModule } from '@progress/kendo-angular-label';
+import { DialogContentBase, DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
+import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
 import * as i1$2 from '@progress/kendo-angular-toolbar';
-import { ToolBarToolComponent, ToolBarComponent, ToolBarModule } from '@progress/kendo-angular-toolbar';
-import * as i2$2 from '@progress/kendo-angular-dropdowns';
-import { DropDownListComponent, ComboBoxModule, DropDownListModule } from '@progress/kendo-angular-dropdowns';
-import * as i5 from '@progress/kendo-angular-buttons';
-import { ButtonsModule } from '@progress/kendo-angular-buttons';
-import * as i7 from '@progress/kendo-angular-layout';
-import { TabStripModule } from '@progress/kendo-angular-layout';
+import { ToolBarToolComponent, ToolBarComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarSeparatorComponent, ToolBarDropDownButtonComponent } from '@progress/kendo-angular-toolbar';
+import { TextBoxComponent, ColorPickerComponent } from '@progress/kendo-angular-inputs';
+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 { saveAs } from '@progress/kendo-file-saver';
 import { Workbook } from '@progress/kendo-ooxml';
 
@@ -47,8 +38,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-spreadsheet',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1721814203,
-    version: '16.5.0',
+    publishDate: 1721827825,
+    version: '16.6.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning',
 };
 
@@ -212,7 +203,7 @@ class FormulaListComponent {
     }
 }
 FormulaListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormulaListComponent, deps: [{ token: i0.ElementRef }, { token: SpreadsheetService }], target: i0.ɵɵFactoryTarget.Component });
-FormulaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FormulaListComponent, selector: "kendo-spreadsheet-formula-list", inputs: { maxHeight: "maxHeight", data: "data", itemClick: "itemClick" }, host: { properties: { "attr.id": "this.id" } }, ngImport: i0, template: `
+FormulaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FormulaListComponent, isStandalone: true, selector: "kendo-spreadsheet-formula-list", inputs: { maxHeight: "maxHeight", data: "data", itemClick: "itemClick" }, host: { properties: { "attr.id": "this.id" } }, ngImport: i0, template: `
         <ul #ulRef
             class="k-spreadsheet-formula-list k-list-ul k-list-md k-group k-reset"
             role="menu"
@@ -230,7 +221,7 @@ FormulaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                     <span className="k-list-item-text">{{item.text}}</span>
                 </li>
         </ul>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i6.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: "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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormulaListComponent, decorators: [{
             type: Component,
             args: [{
@@ -253,7 +244,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     <span className="k-list-item-text">{{item.text}}</span>
                 </li>
         </ul>
-    `
+    `,
+                    standalone: true,
+                    imports: [EventsOutsideAngularDirective, NgFor, IconWrapperComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SpreadsheetService }]; }, propDecorators: { id: [{
                 type: HostBinding,
@@ -401,11 +394,12 @@ class FormulaInputDirective {
     }
 }
 FormulaInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormulaInputDirective, deps: [{ token: i0.ElementRef }, { token: i1.PopupService }, { token: SpreadsheetService }, { token: SpreadsheetLocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-FormulaInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]", inputs: { formulaListMaxHeight: "formulaListMaxHeight" }, host: { properties: { "class.k-spreadsheet-formula-input": "this.hostClasses", "attr.title": "this.title", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-controls": "this.ariaControls" } }, ngImport: i0 });
+FormulaInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FormulaInputDirective, isStandalone: true, selector: "[kendoSpreadsheetFormulaInput]", inputs: { formulaListMaxHeight: "formulaListMaxHeight" }, host: { properties: { "class.k-spreadsheet-formula-input": "this.hostClasses", "attr.title": "this.title", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-controls": "this.ariaControls" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormulaInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSpreadsheetFormulaInput]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PopupService }, { type: SpreadsheetService }, { type: SpreadsheetLocalizationService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -666,7 +660,7 @@ class InsertLinkDialogComponent extends DialogContentBase {
     }
 }
 InsertLinkDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InsertLinkDialogComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
-InsertLinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: InsertLinkDialogComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+InsertLinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: InsertLinkDialogComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <form class="k-form k-form-md" method="dialog">
         <div class="k-form-field">
             <kendo-label [for]="textbox" text="URL"></kendo-label>
@@ -675,7 +669,7 @@ InsertLinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
                 </kendo-textbox>
         </div>
     </form>
-    `, isInline: true, dependencies: [{ kind: "component", type: i3$1.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: i3$2.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }] });
+    `, 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: "15.2.10", ngImport: i0, type: InsertLinkDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -688,383 +682,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </kendo-textbox>
         </div>
     </form>
-    `
+    `,
+                    standalone: true,
+                    imports: [LabelComponent, TextBoxComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.DialogRef }]; } });
 
 /**
  * @hidden
  */
-class MessagesDirective extends ComponentMessages {
-}
-MessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessagesDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-MessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: MessagesDirective, selector: "[kendoSpreadsheetMessages]", inputs: { home: "home", file: "file", insert: "insert", formatTab: "formatTab", saveFile: "saveFile", loadFile: "loadFile", bold: "bold", italic: "italic", underline: "underline", format: "format", fontFamily: "fontFamily", fontSize: "fontSize", undo: "undo", redo: "redo", background: "background", color: "color", gridLines: "gridLines", addColumnLeft: "addColumnLeft", addColumnRight: "addColumnRight", addRowBelow: "addRowBelow", addRowAbove: "addRowAbove", deleteColumn: "deleteColumn", deleteRow: "deleteRow", wrap: "wrap", align: "align", alignHorizontal: "alignHorizontal", alignVertical: "alignVertical", alignLeft: "alignLeft", alignCenter: "alignCenter", alignRight: "alignRight", alignJustify: "alignJustify", alignTop: "alignTop", alignMiddle: "alignMiddle", alignBottom: "alignBottom", dialogApply: "dialogApply", dialogCancel: "dialogCancel", dialogDelete: "dialogDelete", dialogRename: "dialogRename", dialogInsert: "dialogInsert", dialogRemoveLink: "dialogRemoveLink", delete: "delete", rename: "rename", nameBox: "nameBox", formulaInput: "formulaInput", addSheet: "addSheet", sheetsMenu: "sheetsMenu", view: "view", merge: "merge", mergeHorizontally: "mergeHorizontally", mergeVertically: "mergeVertically", mergeAll: "mergeAll", unmerge: "unmerge", insertLink: "insertLink", increaseDecimal: "increaseDecimal", decreaseDecimal: "decreaseDecimal", increaseFontSize: "increaseFontSize", decreaseFontSize: "decreaseFontSize", openUnsupported: "openUnsupported", modifyMerged: "modifyMerged", cannotModifyDisabled: "cannotModifyDisabled", dialogOk: "dialogOk", dialogError: "dialogError", duplicateSheetName: "duplicateSheetName", copy: "copy", cut: "cut", paste: "paste", hideRow: "hideRow", unhideRow: "unhideRow", hideColumn: "hideColumn", unhideColumn: "unhideColumn", sheetDelete: "sheetDelete", sheetRename: "sheetRename", sheetHide: "sheetHide", sheetDuplicate: "sheetDuplicate", sheetMoveLeft: "sheetMoveLeft", sheetMoveRight: "sheetMoveRight", invalidNameError: "invalidNameError" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessagesDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoSpreadsheetMessages]'
-                }]
-        }], propDecorators: { home: [{
-                type: Input
-            }], file: [{
-                type: Input
-            }], insert: [{
-                type: Input
-            }], formatTab: [{
-                type: Input
-            }], saveFile: [{
-                type: Input
-            }], loadFile: [{
-                type: Input
-            }], bold: [{
-                type: Input
-            }], italic: [{
-                type: Input
-            }], underline: [{
-                type: Input
-            }], format: [{
-                type: Input
-            }], fontFamily: [{
-                type: Input
-            }], fontSize: [{
-                type: Input
-            }], undo: [{
-                type: Input
-            }], redo: [{
-                type: Input
-            }], background: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], gridLines: [{
-                type: Input
-            }], addColumnLeft: [{
-                type: Input
-            }], addColumnRight: [{
-                type: Input
-            }], addRowBelow: [{
-                type: Input
-            }], addRowAbove: [{
-                type: Input
-            }], deleteColumn: [{
-                type: Input
-            }], deleteRow: [{
-                type: Input
-            }], wrap: [{
-                type: Input
-            }], align: [{
-                type: Input
-            }], alignHorizontal: [{
-                type: Input
-            }], alignVertical: [{
-                type: Input
-            }], alignLeft: [{
-                type: Input
-            }], alignCenter: [{
-                type: Input
-            }], alignRight: [{
-                type: Input
-            }], alignJustify: [{
-                type: Input
-            }], alignTop: [{
-                type: Input
-            }], alignMiddle: [{
-                type: Input
-            }], alignBottom: [{
-                type: Input
-            }], dialogApply: [{
-                type: Input
-            }], dialogCancel: [{
-                type: Input
-            }], dialogDelete: [{
-                type: Input
-            }], dialogRename: [{
-                type: Input
-            }], dialogInsert: [{
-                type: Input
-            }], dialogRemoveLink: [{
-                type: Input
-            }], delete: [{
-                type: Input
-            }], rename: [{
-                type: Input
-            }], nameBox: [{
-                type: Input
-            }], formulaInput: [{
-                type: Input
-            }], addSheet: [{
-                type: Input
-            }], sheetsMenu: [{
-                type: Input
-            }], view: [{
-                type: Input
-            }], merge: [{
-                type: Input
-            }], mergeHorizontally: [{
-                type: Input
-            }], mergeVertically: [{
-                type: Input
-            }], mergeAll: [{
-                type: Input
-            }], unmerge: [{
-                type: Input
-            }], insertLink: [{
-                type: Input
-            }], increaseDecimal: [{
-                type: Input
-            }], decreaseDecimal: [{
-                type: Input
-            }], increaseFontSize: [{
-                type: Input
-            }], decreaseFontSize: [{
-                type: Input
-            }], openUnsupported: [{
-                type: Input
-            }], modifyMerged: [{
-                type: Input
-            }], cannotModifyDisabled: [{
-                type: Input
-            }], dialogOk: [{
-                type: Input
-            }], dialogError: [{
-                type: Input
-            }], duplicateSheetName: [{
-                type: Input
-            }], copy: [{
-                type: Input
-            }], cut: [{
-                type: Input
-            }], paste: [{
-                type: Input
-            }], hideRow: [{
-                type: Input
-            }], unhideRow: [{
-                type: Input
-            }], hideColumn: [{
-                type: Input
-            }], unhideColumn: [{
-                type: Input
-            }], sheetDelete: [{
-                type: Input
-            }], sheetRename: [{
-                type: Input
-            }], sheetHide: [{
-                type: Input
-            }], sheetDuplicate: [{
-                type: Input
-            }], sheetMoveLeft: [{
-                type: Input
-            }], sheetMoveRight: [{
-                type: Input
-            }], invalidNameError: [{
-                type: Input
-            }] } });
-
-/**
- * @hidden
- */
-class LocalizedMessagesDirective extends MessagesDirective {
-    constructor(service) {
-        super();
-        this.service = service;
+class ActionDialogComponent extends DialogContentBase {
+    constructor(dialog) {
+        super(dialog);
+        this.dialog = dialog;
+    }
+    setData(args) {
+        this.value = args.value;
+        this.tabindex = args.tabindex;
+        this.commandName = args.commandName;
     }
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, selector: "[kendoSpreadsheetLocalizedMessages]", providers: [{
-            provide: MessagesDirective,
-            useExisting: forwardRef(() => LocalizedMessagesDirective)
-        }], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
-            type: Directive,
+ActionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionDialogComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
+ActionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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">
+            <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>
+            </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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionDialogComponent, decorators: [{
+            type: Component,
             args: [{
-                    providers: [{
-                            provide: MessagesDirective,
-                            useExisting: forwardRef(() => LocalizedMessagesDirective)
-                        }],
-                    selector: '[kendoSpreadsheetLocalizedMessages]'
+                    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">
+            <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>
+            </div>
+        </form>
+    `,
+                    standalone: true,
+                    imports: [NgIf, LabelComponent, TextBoxComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i2.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.DialogRef }]; } });
 
 /**
  * @hidden
  */
-class NameBoxComponent {
-    constructor(ngZone, host, localization, renderer) {
-        this.ngZone = ngZone;
-        this.host = host;
-        this.localization = localization;
-        this.renderer = renderer;
-        this.hostClass = true;
-        this.valueNormalizer = (text) => text.pipe(map((content) => ({ name: content })));
-    }
-    keyDownHandler() {
-        const editor = this.spreadsheetWidget.view.nameEditor;
-        if (editor) {
-            const name = this.inputElement.value;
-            editor.trigger('enter', { value: name });
-        }
-    }
-    ngAfterViewInit() {
-        this.renderer.setAttribute(this.inputElement, 'title', this.title);
-        this.renderer.setAttribute(this.inputElement, 'aria-label', this.title);
-    }
-    get inputElement() {
-        return this.host.nativeElement.querySelector('.k-input-inner');
-    }
-    get current() {
-        return {
-            value: (val) => {
-                if (val === undefined) {
-                    const item = this.combobox && this.combobox.value;
-                    return item ? (item.name || item) : item;
-                }
-                else {
-                    this.ngZone.run(() => {
-                        this.value = { name: val } || null;
-                    });
-                }
-            }
-        };
-    }
-    get title() {
-        return this.localization.get('nameBox');
-    }
-    onSelectionChange(value) {
-        const editor = this.spreadsheetWidget.view.nameEditor;
-        if (editor && value) {
-            const name = value.name;
-            if (name !== this.value.name) {
-                editor.trigger('select', { name });
-                this.value = { name };
-            }
-        }
-    }
-    onOpen() {
-        const editor = this.spreadsheetWidget.view.nameEditor;
-        if (editor) {
-            this.data = editor.readData();
-        }
-    }
-}
-NameBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NameBoxComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: SpreadsheetLocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-NameBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NameBoxComponent, selector: "[kendoSpreadsheetNameBox]", inputs: { data: "data", spreadsheetWidget: "spreadsheetWidget" }, host: { listeners: { "keydown.enter": "keyDownHandler()" }, properties: { "class.k-spreadsheet-name-editor": "this.hostClass" } }, viewQueries: [{ propertyName: "combobox", first: true, predicate: ["combobox"], descendants: true }], ngImport: i0, template: `
-        <kendo-combobox #combobox
-            [popupSettings]="{popupClass: 'k-spreadsheet-names-popup'}"
-            fillMode="flat"
-            [clearButton]="false"
-            textField="name"
-            valueField="name"
-            [data]="data"
-            [allowCustom]="true"
-            (selectionChange)="onSelectionChange($event)"
-            [value]="value"
-            (open)="onOpen()"
-            [valueNormalizer]="valueNormalizer"
-            [attr.title]="title"
-        ></kendo-combobox>
-    `, isInline: true, dependencies: [{ kind: "component", type: i2$2.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NameBoxComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[kendoSpreadsheetNameBox]',
-                    template: `
-        <kendo-combobox #combobox
-            [popupSettings]="{popupClass: 'k-spreadsheet-names-popup'}"
-            fillMode="flat"
-            [clearButton]="false"
-            textField="name"
-            valueField="name"
-            [data]="data"
-            [allowCustom]="true"
-            (selectionChange)="onSelectionChange($event)"
-            [value]="value"
-            (open)="onOpen()"
-            [valueNormalizer]="valueNormalizer"
-            [attr.title]="title"
-        ></kendo-combobox>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: SpreadsheetLocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class.k-spreadsheet-name-editor']
-            }], keyDownHandler: [{
-                type: HostListener,
-                args: ['keydown.enter']
-            }], combobox: [{
-                type: ViewChild,
-                args: ['combobox']
-            }], data: [{
-                type: Input
-            }], spreadsheetWidget: [{
-                type: Input
-            }] } });
-
-/**
- * @hidden
- */
-class ActionDialogComponent extends DialogContentBase {
-    constructor(dialog) {
-        super(dialog);
-        this.dialog = dialog;
-    }
-    setData(args) {
-        this.value = args.value;
-        this.tabindex = args.tabindex;
-        this.commandName = args.commandName;
-    }
-}
-ActionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionDialogComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
-ActionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ActionDialogComponent, 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">
-            <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>
-            </div>
-        </form>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.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: i3$2.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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">
-            <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>
-            </div>
-        </form>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.DialogRef }]; } });
-
-/**
- * @hidden
- */
-class SheetsBarComponent {
-    constructor(spreadsheetService, element, renderer, localization, dialogService, ngZone) {
-        this.spreadsheetService = spreadsheetService;
-        this.element = element;
+class SheetsBarComponent {
+    constructor(spreadsheetService, element, renderer, localization, dialogService, ngZone) {
+        this.spreadsheetService = spreadsheetService;
+        this.element = element;
         this.renderer = renderer;
         this.localization = localization;
         this.dialogService = dialogService;
@@ -1314,7 +1005,7 @@ class SheetsBarComponent {
     }
 }
 SheetsBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SheetsBarComponent, deps: [{ token: SpreadsheetService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SpreadsheetLocalizationService }, { token: i1$1.DialogService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SheetsBarComponent, 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: `
+SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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"
@@ -1365,7 +1056,7 @@ SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
                 </kendo-tabstrip-tab>
             </ng-container>
         </kendo-tabstrip>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i5.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "directive", type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i7.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: i7.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i7.TabTemplateDirective, selector: "[kendoTabTemplate]" }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "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", "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]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SheetsBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -1421,7 +1112,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </kendo-tabstrip-tab>
             </ng-container>
         </kendo-tabstrip>
-    `
+    `,
+                    standalone: true,
+                    imports: [ButtonComponent, EventsOutsideAngularDirective, DropDownButtonComponent, TabStripComponent, NgFor, NgIf, TabStripTabComponent, TabTemplateDirective]
                 }]
         }], ctorParameters: function () { return [{ type: SpreadsheetService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SpreadsheetLocalizationService }, { type: i1$1.DialogService }, { type: i0.NgZone }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -1447,103 +1140,219 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: ['sheetDdb', { read: ElementRef }]
             }] } });
 
-const DEFAULT_FONT_FAMILY = 'Arial';
-const DEFAULT_FONT_SIZE = 12;
-/**
- * @hidden
- */
-const DEFAULT_FONT_VALUES = {
-    fontSize: DEFAULT_FONT_SIZE,
-    fontFamily: DEFAULT_FONT_FAMILY
-};
-/**
- * @hidden
- */
-const FONT_FAMILIES = ['Arial', 'Courier New', 'Georgia', 'Times New Roman', 'Trebuchet MS', 'Verdana'];
-/**
- * @hidden
- */
-const FONT_SIZES = [8, 9, 10, 11, 12, 13, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72];
-/**
- * @hidden
- */
-const FONT_DATA = {
-    fontFamily: FONT_FAMILIES,
-    fontSize: FONT_SIZES
-};
-/**
- * @hidden
- */
-const FORMATS = [
-    { text: 'Automatic', value: null },
-    { text: 'Text', value: '@' },
-    { text: 'Number', value: '#,0.00' },
-    { text: 'Percent', value: '0.00%' },
-    { text: 'Financial', value: '_("$"* #,##0.00_);_("$"* (#,##0.00);_("$"* "-"??_);_(@_)' },
-    { text: 'Currency', value: '$#,##0.00;[Red]$#,##0.00' },
-    { text: 'Date', value: 'm/d/yyyy' },
-    { text: 'Time', value: 'h:mm:ss AM/PM' },
-    { text: 'Date time', value: 'm/d/yyyy h:mm' },
-    { text: 'Duration', value: '[h]:mm:ss' }
-];
-/**
- * @hidden
- */
-const ALIGNS = [
-    { icon: commandIcons.alignLeft, svgIcon: commandSVGIcons.alignLeft, textKey: 'Align Left', commandName: 'textAlign', value: 'left', cssClass: '', commandId: 'alignLeft' },
-    { icon: commandIcons.alignCenter, svgIcon: commandSVGIcons.alignCenter, textKey: 'Align Center', commandName: 'textAlign', value: 'center', cssClass: '', commandId: 'alignCenter' },
-    { icon: commandIcons.alignRight, svgIcon: commandSVGIcons.alignRight, textKey: 'Align Right', commandName: 'textAlign', value: 'right', cssClass: '', commandId: 'alignRight' },
-    { icon: commandIcons.alignJustify, svgIcon: commandSVGIcons.alignJustify, textKey: 'Align Justify', commandName: 'textAlign', value: 'justify', cssClass: '', commandId: 'alignJustify' },
-    { icon: commandIcons.alignTop, svgIcon: commandSVGIcons.alignTop, textKey: 'Align Top', commandName: 'verticalAlign', value: 'top', cssClass: '', commandId: 'alignTop' },
-    { icon: commandIcons.alignMiddle, svgIcon: commandSVGIcons.alignMiddle, textKey: 'Align Middle', commandName: 'verticalAlign', value: 'center', cssClass: '', commandId: 'alignMiddle' },
-    { icon: commandIcons.alignBottom, svgIcon: commandSVGIcons.alignBottom, textKey: 'Align Bottom', commandName: 'verticalAlign', value: 'bottom', cssClass: '', commandId: 'alignBottom' }
-];
-/**
- * @hidden
- */
-const MERGE = [
-    { icon: commandIcons.mergeAll, svgIcon: commandSVGIcons.mergeAll, textKey: 'Merge all', commandName: 'cells', value: 'cells', disabled: false, commandId: 'mergeAll' },
-    { icon: commandIcons.mergeHorizontally, svgIcon: commandSVGIcons.mergeHorizontally, textKey: 'Merge horizontally', commandName: 'horizontally', value: 'horizontally', disabled: false, commandId: 'mergeHorizontally' },
-    { icon: commandIcons.mergeVertically, svgIcon: commandSVGIcons.mergeVertically, textKey: 'Merge vertically', commandName: 'vertically', value: 'vertically', disabled: false, commandId: 'mergeVertically' },
-    { icon: commandIcons.unmerge, svgIcon: commandSVGIcons.unmerge, textKey: 'Unmerge', commandName: 'unmerge', value: 'unmerge', disabled: false, commandId: 'unmerge' }
-];
-/**
- * @hidden
- */
-const MY_TOKEN = new InjectionToken('COMMAND_TOKEN');
-
 /**
  * @hidden
  */
-class SpreadsheetCommandBaseDirective {
-    constructor(command, button, localization, spreadsheetService, toolsService) {
-        this.command = command;
-        this.button = button;
+class NameBoxComponent {
+    constructor(ngZone, host, localization, renderer) {
+        this.ngZone = ngZone;
+        this.host = host;
         this.localization = localization;
-        this.spreadsheetService = spreadsheetService;
-        this.toolsService = toolsService;
-        this.subs = new Subscription();
-        const text = this.localization.get(this.command);
-        if (text) {
-            this.button.showText = 'overflow';
-            this.button.showIcon = 'both';
-            this.button.text = text;
-        }
-        if (!this.button.toolbarOptions.icon) {
-            this.button.icon = commandIcons[this.command];
-        }
-        if (!this.button.toolbarOptions.svgIcon) {
-            this.button.svgIcon = commandSVGIcons[this.command];
-        }
-        this.button.title = text;
-        this.button.fillMode = 'flat';
-        this.subs.add(this.toolsService.stateChange.subscribe(state => {
-            this.toolsService.ngZone.onStable.pipe(take(1)).subscribe(() => this.button.selected = state[command]);
-        }));
-    }
-    ngOnInit() {
-        this.subs.add(this.button.click.subscribe((this.clickHandler.bind(this))));
-        this.subs.add(this.button.pointerdown.subscribe((this.pointerdownHandler.bind(this))));
+        this.renderer = renderer;
+        this.hostClass = true;
+        this.valueNormalizer = (text) => text.pipe(map((content) => ({ name: content })));
+    }
+    keyDownHandler() {
+        const editor = this.spreadsheetWidget.view.nameEditor;
+        if (editor) {
+            const name = this.inputElement.value;
+            editor.trigger('enter', { value: name });
+        }
+    }
+    ngAfterViewInit() {
+        this.renderer.setAttribute(this.inputElement, 'title', this.title);
+        this.renderer.setAttribute(this.inputElement, 'aria-label', this.title);
+    }
+    get inputElement() {
+        return this.host.nativeElement.querySelector('.k-input-inner');
+    }
+    get current() {
+        return {
+            value: (val) => {
+                if (val === undefined) {
+                    const item = this.combobox && this.combobox.value;
+                    return item ? (item.name || item) : item;
+                }
+                else {
+                    this.ngZone.run(() => {
+                        this.value = { name: val } || null;
+                    });
+                }
+            }
+        };
+    }
+    get title() {
+        return this.localization.get('nameBox');
+    }
+    onSelectionChange(value) {
+        const editor = this.spreadsheetWidget.view.nameEditor;
+        if (editor && value) {
+            const name = value.name;
+            if (name !== this.value.name) {
+                editor.trigger('select', { name });
+                this.value = { name };
+            }
+        }
+    }
+    onOpen() {
+        const editor = this.spreadsheetWidget.view.nameEditor;
+        if (editor) {
+            this.data = editor.readData();
+        }
+    }
+}
+NameBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NameBoxComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: SpreadsheetLocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+NameBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NameBoxComponent, isStandalone: true, selector: "[kendoSpreadsheetNameBox]", inputs: { data: "data", spreadsheetWidget: "spreadsheetWidget" }, host: { listeners: { "keydown.enter": "keyDownHandler()" }, properties: { "class.k-spreadsheet-name-editor": "this.hostClass" } }, viewQueries: [{ propertyName: "combobox", first: true, predicate: ["combobox"], descendants: true }], ngImport: i0, template: `
+        <kendo-combobox #combobox
+            [popupSettings]="{popupClass: 'k-spreadsheet-names-popup'}"
+            fillMode="flat"
+            [clearButton]="false"
+            textField="name"
+            valueField="name"
+            [data]="data"
+            [allowCustom]="true"
+            (selectionChange)="onSelectionChange($event)"
+            [value]="value"
+            (open)="onOpen()"
+            [valueNormalizer]="valueNormalizer"
+            [attr.title]="title"
+        ></kendo-combobox>
+    `, isInline: true, dependencies: [{ kind: "component", type: ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NameBoxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[kendoSpreadsheetNameBox]',
+                    template: `
+        <kendo-combobox #combobox
+            [popupSettings]="{popupClass: 'k-spreadsheet-names-popup'}"
+            fillMode="flat"
+            [clearButton]="false"
+            textField="name"
+            valueField="name"
+            [data]="data"
+            [allowCustom]="true"
+            (selectionChange)="onSelectionChange($event)"
+            [value]="value"
+            (open)="onOpen()"
+            [valueNormalizer]="valueNormalizer"
+            [attr.title]="title"
+        ></kendo-combobox>
+    `,
+                    standalone: true,
+                    imports: [ComboBoxComponent]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: SpreadsheetLocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-spreadsheet-name-editor']
+            }], keyDownHandler: [{
+                type: HostListener,
+                args: ['keydown.enter']
+            }], combobox: [{
+                type: ViewChild,
+                args: ['combobox']
+            }], data: [{
+                type: Input
+            }], spreadsheetWidget: [{
+                type: Input
+            }] } });
+
+const DEFAULT_FONT_FAMILY = 'Arial';
+const DEFAULT_FONT_SIZE = 12;
+/**
+ * @hidden
+ */
+const DEFAULT_FONT_VALUES = {
+    fontSize: DEFAULT_FONT_SIZE,
+    fontFamily: DEFAULT_FONT_FAMILY
+};
+/**
+ * @hidden
+ */
+const FONT_FAMILIES = ['Arial', 'Courier New', 'Georgia', 'Times New Roman', 'Trebuchet MS', 'Verdana'];
+/**
+ * @hidden
+ */
+const FONT_SIZES = [8, 9, 10, 11, 12, 13, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72];
+/**
+ * @hidden
+ */
+const FONT_DATA = {
+    fontFamily: FONT_FAMILIES,
+    fontSize: FONT_SIZES
+};
+/**
+ * @hidden
+ */
+const FORMATS = [
+    { text: 'Automatic', value: null },
+    { text: 'Text', value: '@' },
+    { text: 'Number', value: '#,0.00' },
+    { text: 'Percent', value: '0.00%' },
+    { text: 'Financial', value: '_("$"* #,##0.00_);_("$"* (#,##0.00);_("$"* "-"??_);_(@_)' },
+    { text: 'Currency', value: '$#,##0.00;[Red]$#,##0.00' },
+    { text: 'Date', value: 'm/d/yyyy' },
+    { text: 'Time', value: 'h:mm:ss AM/PM' },
+    { text: 'Date time', value: 'm/d/yyyy h:mm' },
+    { text: 'Duration', value: '[h]:mm:ss' }
+];
+/**
+ * @hidden
+ */
+const ALIGNS = [
+    { icon: commandIcons.alignLeft, svgIcon: commandSVGIcons.alignLeft, textKey: 'Align Left', commandName: 'textAlign', value: 'left', cssClass: '', commandId: 'alignLeft' },
+    { icon: commandIcons.alignCenter, svgIcon: commandSVGIcons.alignCenter, textKey: 'Align Center', commandName: 'textAlign', value: 'center', cssClass: '', commandId: 'alignCenter' },
+    { icon: commandIcons.alignRight, svgIcon: commandSVGIcons.alignRight, textKey: 'Align Right', commandName: 'textAlign', value: 'right', cssClass: '', commandId: 'alignRight' },
+    { icon: commandIcons.alignJustify, svgIcon: commandSVGIcons.alignJustify, textKey: 'Align Justify', commandName: 'textAlign', value: 'justify', cssClass: '', commandId: 'alignJustify' },
+    { icon: commandIcons.alignTop, svgIcon: commandSVGIcons.alignTop, textKey: 'Align Top', commandName: 'verticalAlign', value: 'top', cssClass: '', commandId: 'alignTop' },
+    { icon: commandIcons.alignMiddle, svgIcon: commandSVGIcons.alignMiddle, textKey: 'Align Middle', commandName: 'verticalAlign', value: 'center', cssClass: '', commandId: 'alignMiddle' },
+    { icon: commandIcons.alignBottom, svgIcon: commandSVGIcons.alignBottom, textKey: 'Align Bottom', commandName: 'verticalAlign', value: 'bottom', cssClass: '', commandId: 'alignBottom' }
+];
+/**
+ * @hidden
+ */
+const MERGE = [
+    { icon: commandIcons.mergeAll, svgIcon: commandSVGIcons.mergeAll, textKey: 'Merge all', commandName: 'cells', value: 'cells', disabled: false, commandId: 'mergeAll' },
+    { icon: commandIcons.mergeHorizontally, svgIcon: commandSVGIcons.mergeHorizontally, textKey: 'Merge horizontally', commandName: 'horizontally', value: 'horizontally', disabled: false, commandId: 'mergeHorizontally' },
+    { icon: commandIcons.mergeVertically, svgIcon: commandSVGIcons.mergeVertically, textKey: 'Merge vertically', commandName: 'vertically', value: 'vertically', disabled: false, commandId: 'mergeVertically' },
+    { icon: commandIcons.unmerge, svgIcon: commandSVGIcons.unmerge, textKey: 'Unmerge', commandName: 'unmerge', value: 'unmerge', disabled: false, commandId: 'unmerge' }
+];
+/**
+ * @hidden
+ */
+const MY_TOKEN = new InjectionToken('COMMAND_TOKEN');
+
+/**
+ * @hidden
+ */
+class SpreadsheetCommandBaseDirective {
+    constructor(command, button, localization, spreadsheetService, toolsService) {
+        this.command = command;
+        this.button = button;
+        this.localization = localization;
+        this.spreadsheetService = spreadsheetService;
+        this.toolsService = toolsService;
+        this.subs = new Subscription();
+        const text = this.localization.get(this.command);
+        if (text) {
+            this.button.showText = 'overflow';
+            this.button.showIcon = 'both';
+            this.button.text = text;
+        }
+        if (!this.button.toolbarOptions.icon) {
+            this.button.icon = commandIcons[this.command];
+        }
+        if (!this.button.toolbarOptions.svgIcon) {
+            this.button.svgIcon = commandSVGIcons[this.command];
+        }
+        this.button.title = text;
+        this.button.fillMode = 'flat';
+        this.subs.add(this.toolsService.stateChange.subscribe(state => {
+            this.toolsService.ngZone.onStable.pipe(take(1)).subscribe(() => this.button.selected = state[command]);
+        }));
+    }
+    ngOnInit() {
+        this.subs.add(this.button.click.subscribe((this.clickHandler.bind(this))));
+        this.subs.add(this.button.pointerdown.subscribe((this.pointerdownHandler.bind(this))));
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
@@ -1587,279 +1396,354 @@ class SpreadsheetCommandButton extends SpreadsheetCommandBaseDirective {
 /**
  * @hidden
  */
-class SpreadsheetBoldDirective extends SpreadsheetCommandButton {
+class SpreadsheetGridLinesDirective extends SpreadsheetCommandButton {
     constructor(button, localization, spreadsheetService, toolsService) {
-        super('bold', button, localization, spreadsheetService, toolsService, {
-            command: 'PropertyChangeCommand',
-            options: { property: 'bold',
+        super('gridLines', button, localization, spreadsheetService, toolsService, {
+            command: 'GridLinesChangeCommand',
+            options: { property: 'gridLines',
                 value: !button.selected
             }
         });
     }
-}
-SpreadsheetBoldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetBoldDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetBoldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetBoldDirective, selector: "kendo-toolbar-button[kendoSpreadsheetBold]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetBoldDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kendo-toolbar-button[kendoSpreadsheetBold]'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
-
-/**
- * @hidden
- */
-class SpreadsheetItalicDirective extends SpreadsheetCommandButton {
-    constructor(button, localization, spreadsheetService, toolsService) {
-        super('italic', button, localization, spreadsheetService, toolsService, {
-            command: 'PropertyChangeCommand',
-            options: { property: 'italic',
-                value: !button.selected
-            }
-        });
+    clickHandler() {
+        const sheet = this.spreadsheetService.spreadsheet.activeSheet();
+        if (sheet) {
+            const value = !sheet.showGridLines();
+            const options = {
+                command: 'GridLinesChangeCommand', options: { property: 'gridLines', value }
+            };
+            this.spreadsheetService.spreadsheet.executeCommand(options);
+        }
     }
 }
-SpreadsheetItalicDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetItalicDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetItalicDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetItalicDirective, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetItalicDirective, decorators: [{
+SpreadsheetGridLinesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetGridLinesDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetGridLinesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetGridLinesDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetGridLinesDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'kendo-toolbar-button[kendoSpreadsheetItalic]'
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetGridLines]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
 
 /**
  * @hidden
  */
-class SpreadsheetUnderlineDirective extends SpreadsheetCommandButton {
-    constructor(button, localization, spreadsheetService, toolsService) {
-        super('underline', button, localization, spreadsheetService, toolsService, {
-            command: 'PropertyChangeCommand',
-            options: { property: 'underline',
-                value: !button.selected
-            }
-        });
-    }
-}
-SpreadsheetUnderlineDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetUnderlineDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetUnderlineDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetUnderlineDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetUnderlineDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kendo-toolbar-button[kendoSpreadsheetUnderline]'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
-
-/**
+class SpreadsheetMergeDirective {
+    constructor(host, localization, spreadsheetService) {
+        this.host = host;
+        this.spreadsheetService = spreadsheetService;
+        this.commandName = 'merge';
+        this.subs = new Subscription();
+        host.svgIcon = commandSVGIcons[this.commandName];
+        host.icon = commandIcons[this.commandName];
+        host.arrowIcon = true;
+        host.fillMode = 'flat';
+        host.data = MERGE.map(item => ({ ...item, textKey: localization.get(item.commandId) }));
+        this.subs.add(host.itemClick.subscribe((e) => this.onItemClick(e)));
+        host.title = localization.get(this.commandName);
+        host.textField = 'textKey';
+    }
+    ngOnInit() {
+        this.subs.add(this.host.open.subscribe(() => {
+            const sheet = this.spreadsheetService.spreadsheet.activeSheet();
+            const isMergedCellWithinRange = this.hasMergedCells(sheet);
+            const unmergeItem = this.host.data.find(i => i.commandName === 'unmerge');
+            unmergeItem.disabled = !isMergedCellWithinRange;
+        }));
+        this.subs.add(this.spreadsheetService.selectionChanged.subscribe(range => this.selectedRange = range));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    onItemClick(item) {
+        if (item.disabled) {
+            return;
+        }
+        const value = item.value || null;
+        const options = {
+            command: 'MergeCellCommand', options: { property: item.commandName, value }
+        };
+        this.spreadsheetService.spreadsheet.executeCommand(options);
+    }
+    hasMergedCells(sheet) {
+        const range = sheet._ref(this.selectedRange);
+        return sheet._getMergedCells(range).hasMerged;
+    }
+}
+SpreadsheetMergeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetMergeDirective, deps: [{ token: i1$2.ToolBarDropDownButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetMergeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetMergeDirective, isStandalone: true, selector: "[kendoSpreadsheetMerge]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetMergeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoSpreadsheetMerge]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarDropDownButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }]; } });
+
+/**
  * @hidden
  */
-class SpreadsheetLoadFileComponent extends ToolBarToolComponent {
-    constructor(localization, spreadsheetService, toolbar) {
-        super();
-        this.localization = localization;
-        this.spreadsheetService = spreadsheetService;
-        this.toolbar = toolbar;
-        this.icon = commandIcons['folderOpen'];
-        this.svgIcon = commandSVGIcons['folderOpen'];
-        this.tabindex = -1;
-        this.onFileSelect = (e) => {
-            const file = e.target.files[0];
-            if (file) {
-                this.spreadsheetService.spreadsheet.executeCommand({ command: 'OpenCommand', options: { file } });
-                e.target.value = null;
-            }
+class SpreadsheetIncreaseDecimalDirective extends SpreadsheetCommandButton {
+    constructor(button, localization, spreadsheetService, toolsService) {
+        super('increaseDecimal', button, localization, spreadsheetService, toolsService, {
+            command: 'AdjustDecimalsCommand'
+        });
+    }
+    clickHandler() {
+        const options = {
+            command: 'AdjustDecimalsCommand',
+            options: { value: 1 }
         };
+        this.spreadsheetService.spreadsheet.executeCommand(options);
     }
-    /**
-     * @hidden
-     */
-    messageFor(key) {
-        return this.localization.get(key);
+}
+SpreadsheetIncreaseDecimalDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetIncreaseDecimalDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetIncreaseDecimalDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetIncreaseDecimalDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseDecimal]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetIncreaseDecimalDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetIncreaseDecimal]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
+
+/**
+ * @hidden
+ */
+class SpreadsheetDecreaseDecimalDirective extends SpreadsheetCommandButton {
+    constructor(button, localization, spreadsheetService, toolsService) {
+        super('decreaseDecimal', button, localization, spreadsheetService, toolsService, {
+            command: 'AdjustDecimalsCommand'
+        });
     }
-    /**
-     * @hidden
-     */
-    canFocus() {
-        return true;
+    clickHandler() {
+        const options = {
+            command: 'AdjustDecimalsCommand',
+            options: { value: -1 }
+        };
+        this.spreadsheetService.spreadsheet.executeCommand(options);
     }
-    /**
-     * @hidden
-     */
-    focus() {
-        this.tabindex = 0;
-        if (this.overflows) {
-            this.overflowButtonElement.nativeElement.focus();
-        }
-        else {
-            this.button.focus();
-        }
+}
+SpreadsheetDecreaseDecimalDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDecreaseDecimalDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetDecreaseDecimalDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetDecreaseDecimalDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseDecimal]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDecreaseDecimalDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetDecreaseDecimal]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
+
+/**
+ * @hidden
+ */
+class SpreadsheetDeleteRowButtonDirective extends SpreadsheetCommandButton {
+    constructor(button, localization, spreadsheetService, toolsService) {
+        super('deleteRow', button, localization, spreadsheetService, toolsService, {
+            command: 'DeleteRowCommand',
+            options: { property: 'deleteRow' }
+        });
     }
-    /**
-     * @hidden
-     */
-    handleKey() {
-        this.tabindex = -1;
-        return false;
+}
+SpreadsheetDeleteRowButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDeleteRowButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetDeleteRowButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetDeleteRowButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDeleteRowButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
+
+/**
+ * @hidden
+ */
+class SpreadsheetDeleteColumnButtonDirective extends SpreadsheetCommandButton {
+    constructor(button, localization, spreadsheetService, toolsService) {
+        super('deleteColumn', button, localization, spreadsheetService, toolsService, {
+            command: 'DeleteColumnCommand',
+            options: { property: 'deleteColumn' }
+        });
     }
 }
-SpreadsheetLoadFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetLoadFileComponent, deps: [{ token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-SpreadsheetLoadFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetLoadFileComponent, selector: "kendo-spreadsheet-load-file-tool", providers: [
-        {
-            provide: ToolBarToolComponent,
-            useExisting: forwardRef(() => SpreadsheetLoadFileComponent),
-        },
-    ], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }, { propertyName: "button", first: true, predicate: ["button"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <ng-template #toolbarTemplate>
-            <button
-                #button
-                type="button"
-                kendoButton
-                [title]="messageFor('loadFile')"
-                fillMode="flat"
-                [icon]="icon"
-                [svgIcon]="svgIcon"
-                (click)="fileSelectEl.click()"></button>
-            <input
-                #fileSelectEl
-                type="file"
-                (change)="onFileSelect($event)"
-                [style.display]="'none'"
-                aria-hidden="true"
-                accept=".xlsx,.XLSX" />
-        </ng-template>
-        <ng-template #popupTemplate>
-            <div
-                #overflowButton
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                (click)="toolbar.toggle(false); popupFileSelectEl.click()">
-                <span
-                    class="k-link k-menu-link">
-                    <kendo-icon-wrapper
-                        [name]="icon"
-                        [svgIcon]="svgIcon"
-                    ></kendo-icon-wrapper>
-                    <span class="k-menu-link-text">{{messageFor('loadFile')}}</span>
-                </span>
-                <input
-                    #popupFileSelectEl
-                    type="file"
-                    (change)="onFileSelect($event)"
-                    [style.display]="'none'"
-                    aria-hidden="true"
-                    accept=".xlsx,.XLSX" />
-            </div>
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: i5.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetLoadFileComponent, decorators: [{
-            type: Component,
+SpreadsheetDeleteColumnButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDeleteColumnButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetDeleteColumnButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetDeleteColumnButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDeleteColumnButtonDirective, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'kendo-spreadsheet-load-file-tool',
-                    providers: [
-                        {
-                            provide: ToolBarToolComponent,
-                            useExisting: forwardRef(() => SpreadsheetLoadFileComponent),
-                        },
-                    ],
-                    template: `
-        <ng-template #toolbarTemplate>
-            <button
-                #button
-                type="button"
-                kendoButton
-                [title]="messageFor('loadFile')"
-                fillMode="flat"
-                [icon]="icon"
-                [svgIcon]="svgIcon"
-                (click)="fileSelectEl.click()"></button>
-            <input
-                #fileSelectEl
-                type="file"
-                (change)="onFileSelect($event)"
-                [style.display]="'none'"
-                aria-hidden="true"
-                accept=".xlsx,.XLSX" />
-        </ng-template>
-        <ng-template #popupTemplate>
-            <div
-                #overflowButton
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                (click)="toolbar.toggle(false); popupFileSelectEl.click()">
-                <span
-                    class="k-link k-menu-link">
-                    <kendo-icon-wrapper
-                        [name]="icon"
-                        [svgIcon]="svgIcon"
-                    ></kendo-icon-wrapper>
-                    <span class="k-menu-link-text">{{messageFor('loadFile')}}</span>
-                </span>
-                <input
-                    #popupFileSelectEl
-                    type="file"
-                    (change)="onFileSelect($event)"
-                    [style.display]="'none'"
-                    aria-hidden="true"
-                    accept=".xlsx,.XLSX" />
-            </div>
-        </ng-template>
-    `
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
+
+/**
+ * @hidden
+ */
+class SpreadsheetAddRowAboveButtonDirective extends SpreadsheetCommandButton {
+    constructor(button, localization, spreadsheetService, toolsService) {
+        super('addRowAbove', button, localization, spreadsheetService, toolsService, {
+            command: 'AddRowCommand',
+            options: { property: 'addRowAbove',
+                value: 'above'
+            }
+        });
+    }
+}
+SpreadsheetAddRowAboveButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddRowAboveButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetAddRowAboveButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetAddRowAboveButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddRowAboveButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]',
+                    standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: i1$2.ToolBarComponent, decorators: [{
-                    type: Inject,
-                    args: [ToolBarComponent]
-                }] }]; }, propDecorators: { toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
-            }], overflowButtonElement: [{
-                type: ViewChild,
-                args: ['overflowButton', { read: ElementRef, static: false }]
-            }], button: [{
-                type: ViewChild,
-                args: ['button']
-            }] } });
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
 
 /**
  * @hidden
  */
-class SpreadsheetSaveFileDirective {
-    constructor(button, localization, spreadsheetService) {
-        this.button = button;
-        this.localization = localization;
-        this.spreadsheetService = spreadsheetService;
-        this.subs = new Subscription();
+class SpreadsheetAddRowBelowButtonDirective extends SpreadsheetCommandButton {
+    constructor(button, localization, spreadsheetService, toolsService) {
+        super('addRowBelow', button, localization, spreadsheetService, toolsService, {
+            command: 'AddRowCommand',
+            options: { property: 'addRowBelow',
+                value: 'below'
+            }
+        });
     }
-    ngOnInit() {
-        this.button.title = this.localization.get('saveFile');
-        this.button.icon = commandIcons['download'];
-        this.button.svgIcon = commandSVGIcons['download'];
-        this.button.fillMode = 'flat';
-        this.subs.add(this.button.click.subscribe(() => {
-            const spreadsheet = this.spreadsheetService.spreadsheet;
-            if (spreadsheet) {
-                spreadsheet.saveAsExcel({
-                    ...spreadsheet.options.excel,
-                    saveAs,
-                    Workbook
-                });
+}
+SpreadsheetAddRowBelowButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddRowBelowButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetAddRowBelowButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetAddRowBelowButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddRowBelowButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
+
+/**
+ * @hidden
+ */
+class SpreadsheetAddColumnRightButtonDirective extends SpreadsheetCommandButton {
+    constructor(button, localization, spreadsheetService, toolsService) {
+        super('addColumnRight', button, localization, spreadsheetService, toolsService, {
+            command: 'AddColumnCommand',
+            options: { property: 'addColumnRight',
+                value: 'right'
             }
-        }));
+        });
+    }
+}
+SpreadsheetAddColumnRightButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddColumnRightButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetAddColumnRightButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetAddColumnRightButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddColumnRightButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
+
+/**
+ * @hidden
+ */
+class SpreadsheetAddColumnLeftButtonDirective extends SpreadsheetCommandButton {
+    constructor(button, localization, spreadsheetService, toolsService) {
+        super('addColumnLeft', button, localization, spreadsheetService, toolsService, {
+            command: 'AddColumnCommand',
+            options: { property: 'addColumnLeft',
+                value: 'left'
+            }
+        });
+    }
+}
+SpreadsheetAddColumnLeftButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddColumnLeftButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetAddColumnLeftButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetAddColumnLeftButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddColumnLeftButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
+
+/**
+ * @hidden
+ */
+class SpreadsheetInsertLinkDirective extends SpreadsheetCommandButton {
+    constructor(button, localization, spreadsheetService, toolsService, dialogService) {
+        super('insertLink', button, localization, spreadsheetService, toolsService, {
+            command: 'HyperlinkCommand'
+        });
+        this.dialogService = dialogService;
+        this.subs.add(spreadsheetService.selectionChanged.subscribe(range => this.currentRange = range));
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
+    clickHandler() {
+        const sheet = this.spreadsheetService.spreadsheet.activeSheet();
+        if (sheet) {
+            this.openDialog();
+        }
+    }
+    /**
+     * @hidden
+     */
+    openDialog() {
+        const hasLink = isPresent(this.currentRange?.link());
+        const dialogSettings = {
+            appendTo: this.spreadsheetService.dialogContainer,
+            title: this.localization.get(this.command),
+            content: InsertLinkDialogComponent,
+            actions: [{
+                    text: this.localization.get('dialogInsert'),
+                    themeColor: 'primary'
+                }, {
+                    text: this.localization.get('dialogCancel')
+                },
+                'spacer', {
+                    text: this.localization.get('dialogRemoveLink'),
+                    themeColor: 'primary',
+                    fillMode: 'clear',
+                    cssClass: hasLink ? '' : 'k-disabled'
+                }],
+            actionsLayout: 'start',
+            width: 400,
+            autoFocusedElement: '.k-textbox > .k-input-inner'
+        };
+        const dialog = this.dialogService.open(dialogSettings);
+        const dialogInstance = dialog.dialog.instance;
+        const dialogContent = dialog.content.instance;
+        if (hasLink) {
+            dialogContent.setData({ link: this.currentRange?.link() });
+        }
+        dialogInstance.action.pipe(take(1)).subscribe((event) => {
+            if (event.text === this.localization.get('dialogCancel')) {
+                return;
+            }
+            let link = null;
+            if (event.text === this.localization.get('dialogInsert')) {
+                link = dialogContent.urlLink || null;
+            }
+            this.spreadsheetService.spreadsheet.executeCommand({
+                command: 'HyperlinkCommand',
+                options: { link }
+            });
+        });
+    }
 }
-SpreadsheetSaveFileDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetSaveFileDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetSaveFileDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetSaveFileDirective, selector: "[kendoSpreadsheetSaveFile]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetSaveFileDirective, decorators: [{
+SpreadsheetInsertLinkDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetInsertLinkDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: i1$1.DialogService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetInsertLinkDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetInsertLinkDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetInsertLink]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetInsertLinkDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[kendoSpreadsheetSaveFile]' }]
-        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }]; } });
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetInsertLink]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: i1$1.DialogService }]; } });
 
 /**
  * @hidden
@@ -1898,57 +1782,134 @@ class SpreadsheetFormatDirective {
     }
 }
 SpreadsheetFormatDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetFormatDirective, deps: [{ token: i1$2.ToolBarDropDownButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetFormatDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]", ngImport: i0 });
+SpreadsheetFormatDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetFormatDirective, isStandalone: true, selector: "[kendoSpreadsheetFormat]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetFormatDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSpreadsheetFormat]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1$2.ToolBarDropDownButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
 
 /**
  * @hidden
  */
-class SpreadsheetUndoDirective extends SpreadsheetCommandButton {
+class SpreadsheetTextWrapDirective extends SpreadsheetCommandButton {
     constructor(button, localization, spreadsheetService, toolsService) {
-        super('undo', button, localization, spreadsheetService, toolsService, {
-            options: { property: 'undo' }
+        super('wrap', button, localization, spreadsheetService, toolsService, {
+            command: 'TextWrapCommand',
+            options: { property: 'wrap',
+                value: !button.selected
+            }
         });
     }
-    clickHandler() {
-        this.spreadsheetService.spreadsheet.workbook.undoRedoStack['undo']();
+    clickHandler() {
+        const sheet = this.spreadsheetService.spreadsheet.activeSheet();
+        if (sheet) {
+            const range = sheet.range(sheet.activeCell());
+            const value = !range.wrap();
+            const options = {
+                command: 'TextWrapCommand', options: { property: 'wrap', value }
+            };
+            this.spreadsheetService.spreadsheet.executeCommand(options);
+        }
+    }
+}
+SpreadsheetTextWrapDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetTextWrapDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetTextWrapDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetTextWrapDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetTextWrapDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetTextWrap]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
+
+/**
+ * @hidden
+ */
+class SpreadsheetVerticalTextAlignDirective {
+    constructor(host, localization, spreadsheetService, toolsService) {
+        this.host = host;
+        this.spreadsheetService = spreadsheetService;
+        this.toolsService = toolsService;
+        this.commandName = 'alignVertical';
+        this.subs = new Subscription();
+        host.svgIcon = commandSVGIcons[this.commandName];
+        host.icon = commandIcons[this.commandName];
+        host.arrowIcon = true;
+        host.fillMode = 'flat';
+        host.data = ALIGNS.flatMap(item => item.commandName === 'verticalAlign' ? [{ ...item, textKey: localization.get(item.commandId) }] : []);
+        this.subs.add(host.itemClick.subscribe((e) => this.onItemClick(e)));
+        host.title = localization.get(this.commandName);
+        host.textField = 'textKey';
+    }
+    ngOnInit() {
+        this.subs.add(this.toolsService.stateChange.subscribe(state => this.host.data.forEach(i => i.cssClass = i.value === state[i.commandName] ? 'k-selected' : '')));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    onItemClick(item) {
+        const value = item.value || null;
+        const options = {
+            command: 'PropertyChangeCommand', options: { property: item.commandName, value }
+        };
+        this.spreadsheetService.spreadsheet.executeCommand(options);
+    }
+}
+SpreadsheetVerticalTextAlignDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetVerticalTextAlignDirective, deps: [{ token: i1$2.ToolBarDropDownButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetVerticalTextAlignDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetVerticalTextAlignDirective, isStandalone: true, selector: "[kendoSpreadsheetVerticalTextAlign]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetVerticalTextAlignDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoSpreadsheetVerticalTextAlign]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarDropDownButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
+
+/**
+ * @hidden
+ */
+class SpreadsheetHorizontalTextAlignDirective {
+    constructor(host, localization, spreadsheetService, toolsService) {
+        this.host = host;
+        this.spreadsheetService = spreadsheetService;
+        this.toolsService = toolsService;
+        this.commandName = 'alignHorizontal';
+        this.subs = new Subscription();
+        host.svgIcon = commandSVGIcons[this.commandName];
+        host.icon = commandIcons[this.commandName];
+        host.arrowIcon = true;
+        host.fillMode = 'flat';
+        host.data = ALIGNS.flatMap(item => item.commandName === 'textAlign' ? [{ ...item, textKey: localization.get(item.commandId) }] : []);
+        this.subs.add(host.itemClick.subscribe((e) => this.onItemClick(e)));
+        host.title = localization.get(this.commandName);
+        host.textField = 'textKey';
+    }
+    ngOnInit() {
+        this.subs.add(this.toolsService.stateChange.subscribe(state => this.host.data.forEach(i => i.cssClass = i.value === state[i.commandName] ? 'k-selected' : '')));
     }
-}
-SpreadsheetUndoDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetUndoDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetUndoDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetUndoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetUndoDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kendo-toolbar-button[kendoSpreadsheetUndo]'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
-
-/**
- * @hidden
- */
-class SpreadsheetRedoDirective extends SpreadsheetCommandButton {
-    constructor(button, localization, spreadsheetService, toolsService) {
-        super('redo', button, localization, spreadsheetService, toolsService, {
-            options: { property: 'redo' }
-        });
+    ngOnDestroy() {
+        this.subs.unsubscribe();
     }
-    clickHandler() {
-        this.spreadsheetService.spreadsheet.workbook.undoRedoStack['redo']();
+    onItemClick(item) {
+        const value = item.value || null;
+        const options = {
+            command: 'PropertyChangeCommand', options: { property: item.commandName, value }
+        };
+        this.spreadsheetService.spreadsheet.executeCommand(options);
     }
 }
-SpreadsheetRedoDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetRedoDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetRedoDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetRedoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetRedoDirective, decorators: [{
+SpreadsheetHorizontalTextAlignDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetHorizontalTextAlignDirective, deps: [{ token: i1$2.ToolBarDropDownButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetHorizontalTextAlignDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetHorizontalTextAlignDirective, isStandalone: true, selector: "[kendoSpreadsheetHorizontalTextAlign]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetHorizontalTextAlignDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'kendo-toolbar-button[kendoSpreadsheetRedo]'
+                    selector: '[kendoSpreadsheetHorizontalTextAlign]',
+                    standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarDropDownButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
 
 /**
  * @hidden
@@ -2007,82 +1968,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 /**
  * @hidden
  */
-class FontFamilyDropDownListComponent extends DropDownListBase {
+class FontSizeDropDownListComponent extends DropDownListBase {
 }
-FontFamilyDropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FontFamilyDropDownListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FontFamilyDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FontFamilyDropDownListComponent, selector: "kendo-spreadsheet-fontfamily-dropdownlist", usesInheritance: true, ngImport: i0, template: `
+FontSizeDropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FontSizeDropDownListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FontSizeDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FontSizeDropDownListComponent, isStandalone: true, selector: "kendo-spreadsheet-fontsize-dropdownlist", usesInheritance: true, ngImport: i0, template: `
         <kendo-dropdownlist
             #element
             [data]="data"
             [(value)]="value"
+            [attr.title]="title"
             [tabindex]="tabindex"
             (valueChange)="onValueChange($event)"
             [leftRightArrowsNavigation]="false"
-            [fillMode]="fillMode"
-            [attr.title]="title">
-            <ng-template kendoDropDownListItemTemplate let-dataItem>
-                <span [ngStyle]="{ 'font-family': dataItem }">
-                    {{ dataItem }}
-                </span>
-            </ng-template>
-        </kendo-dropdownlist>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: i2$2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FontFamilyDropDownListComponent, decorators: [{
+            [fillMode]="fillMode"></kendo-dropdownlist>
+    `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FontSizeDropDownListComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'kendo-spreadsheet-fontfamily-dropdownlist',
+                    selector: 'kendo-spreadsheet-fontsize-dropdownlist',
                     template: `
         <kendo-dropdownlist
             #element
             [data]="data"
             [(value)]="value"
+            [attr.title]="title"
             [tabindex]="tabindex"
             (valueChange)="onValueChange($event)"
             [leftRightArrowsNavigation]="false"
-            [fillMode]="fillMode"
-            [attr.title]="title">
-            <ng-template kendoDropDownListItemTemplate let-dataItem>
-                <span [ngStyle]="{ 'font-family': dataItem }">
-                    {{ dataItem }}
-                </span>
-            </ng-template>
-        </kendo-dropdownlist>
-    `
+            [fillMode]="fillMode"></kendo-dropdownlist>
+    `,
+                    standalone: true,
+                    imports: [DropDownListComponent]
                 }]
         }] });
 
 /**
  * @hidden
  */
-class FontSizeDropDownListComponent extends DropDownListBase {
+class FontFamilyDropDownListComponent extends DropDownListBase {
 }
-FontSizeDropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FontSizeDropDownListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FontSizeDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FontSizeDropDownListComponent, selector: "kendo-spreadsheet-fontsize-dropdownlist", usesInheritance: true, ngImport: i0, template: `
+FontFamilyDropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FontFamilyDropDownListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FontFamilyDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FontFamilyDropDownListComponent, isStandalone: true, selector: "kendo-spreadsheet-fontfamily-dropdownlist", usesInheritance: true, ngImport: i0, template: `
         <kendo-dropdownlist
             #element
             [data]="data"
             [(value)]="value"
-            [attr.title]="title"
             [tabindex]="tabindex"
             (valueChange)="onValueChange($event)"
             [leftRightArrowsNavigation]="false"
-            [fillMode]="fillMode"></kendo-dropdownlist>
-    `, isInline: true, dependencies: [{ kind: "component", type: i2$2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FontSizeDropDownListComponent, decorators: [{
+            [fillMode]="fillMode"
+            [attr.title]="title">
+            <ng-template kendoDropDownListItemTemplate let-dataItem>
+                <span [ngStyle]="{ 'font-family': dataItem }">
+                    {{ dataItem }}
+                </span>
+            </ng-template>
+        </kendo-dropdownlist>
+    `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "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: "directive", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FontFamilyDropDownListComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'kendo-spreadsheet-fontsize-dropdownlist',
+                    selector: 'kendo-spreadsheet-fontfamily-dropdownlist',
                     template: `
         <kendo-dropdownlist
             #element
             [data]="data"
             [(value)]="value"
-            [attr.title]="title"
             [tabindex]="tabindex"
             (valueChange)="onValueChange($event)"
             [leftRightArrowsNavigation]="false"
-            [fillMode]="fillMode"></kendo-dropdownlist>
-    `
+            [fillMode]="fillMode"
+            [attr.title]="title">
+            <ng-template kendoDropDownListItemTemplate let-dataItem>
+                <span [ngStyle]="{ 'font-family': dataItem }">
+                    {{ dataItem }}
+                </span>
+            </ng-template>
+        </kendo-dropdownlist>
+    `,
+                    standalone: true,
+                    imports: [DropDownListComponent, ItemTemplateDirective, NgStyle]
                 }]
         }] });
 
@@ -2103,7 +2068,7 @@ class DialogContentComponent extends DialogContentBase {
     }
 }
 DialogContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogContentComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
-DialogContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialogContentComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+DialogContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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">
@@ -2142,7 +2107,7 @@ DialogContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 fillMode="flat"
             ></kendo-colorpicker>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3$1.ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { kind: "component", type: FontFamilyDropDownListComponent, selector: "kendo-spreadsheet-fontfamily-dropdownlist" }, { kind: "component", type: FontSizeDropDownListComponent, selector: "kendo-spreadsheet-fontsize-dropdownlist" }] });
+    `, 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", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "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: "15.2.10", ngImport: i0, type: DialogContentComponent, decorators: [{
             type: Component,
             args: [{
@@ -2185,7 +2150,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 fillMode="flat"
             ></kendo-colorpicker>
         </div>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgSwitch, NgSwitchCase, FontFamilyDropDownListComponent, FontSizeDropDownListComponent, ColorPickerComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.DialogRef }]; } });
 
@@ -2332,171 +2299,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
-                    args: [MY_TOKEN]
-                }] }, { type: i1$1.DialogService }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: i1$2.ToolBarComponent }]; }, propDecorators: { toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
-            }], element: [{
-                type: ViewChild,
-                args: ['element', { read: ElementRef }]
-            }], dropDownListRef: [{
-                type: ViewChild,
-                args: ['element']
-            }], popupButton: [{
-                type: ViewChild,
-                args: ['popupButton', { read: ElementRef }]
-            }], valueChange: [{
-                type: Output
-            }] } });
-
-/**
- * A component which configures an existing `DropDownListComponent` as a Spreadsheet tool
- * ([see example](ToDo).
- * The component associates a `kendo-toolbar-dropdownlist` with a Spreadsheet command that changes the font family of a content block and
- * automatically defines the options of the drop-down list and sets its values ([see example](ToDo).
- *
- * @hidden
- */
-class SpreadsheetFontFamilyComponent extends SpreadsheetDropDownToolBase {
-    constructor(dialogService, localization, spreadsheetService, toolsService, toolbar) {
-        super('fontFamily', dialogService, localization, spreadsheetService, toolsService, toolbar);
-    }
-}
-SpreadsheetFontFamilyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetFontFamilyComponent, deps: [{ token: i1$1.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-SpreadsheetFontFamilyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetFontFamilyComponent, 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>
-        </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>
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: FontFamilyDropDownListComponent, selector: "kendo-spreadsheet-fontfamily-dropdownlist" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetFontFamilyComponent, decorators: [{
-            type: Component,
-            args: [{
-                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetFontFamilyComponent) }],
-                    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>
-        </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>
-        </ng-template>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.DialogService }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: i1$2.ToolBarComponent, decorators: [{
-                    type: Inject,
-                    args: [ToolBarComponent]
-                }] }]; } });
-
-/**
- * A component which configures an existing `DropDownListComponent` as a Spreadsheet tool
- * ([see example](ToDo).
- * The component associates a `kendo-toolbar-dropdownlist` with a Spreadsheet command that changes the font size of a content block and
- * automatically defines the options of the drop-down list and sets its values ([see example](ToDo).
- *
- * @hidden
- */
-class SpreadsheetFontSizeComponent extends SpreadsheetDropDownToolBase {
-    constructor(dialogService, localization, spreadsheetService, toolsService, toolbar) {
-        super('fontSize', dialogService, localization, spreadsheetService, toolsService, toolbar);
-    }
-}
-SpreadsheetFontSizeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetFontSizeComponent, deps: [{ token: i1$1.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-SpreadsheetFontSizeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetFontSizeComponent, 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>
-        </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>
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: FontSizeDropDownListComponent, selector: "kendo-spreadsheet-fontsize-dropdownlist" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetFontSizeComponent, decorators: [{
-            type: Component,
-            args: [{
-                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetFontSizeComponent) }],
-                    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>
-        </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>
-        </ng-template>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.DialogService }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: i1$2.ToolBarComponent, decorators: [{
-                    type: Inject,
-                    args: [ToolBarComponent]
-                }] }]; } });
+                    args: [MY_TOKEN]
+                }] }, { type: i1$1.DialogService }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: i1$2.ToolBarComponent }]; }, propDecorators: { toolbarTemplate: [{
+                type: ViewChild,
+                args: ['toolbarTemplate', { static: true }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], element: [{
+                type: ViewChild,
+                args: ['element', { read: ElementRef }]
+            }], dropDownListRef: [{
+                type: ViewChild,
+                args: ['element']
+            }], popupButton: [{
+                type: ViewChild,
+                args: ['popupButton', { read: ElementRef }]
+            }], valueChange: [{
+                type: Output
+            }] } });
 
 /**
  * A component which changes the background color of the text ([more information](ToDo).
@@ -2508,7 +2329,7 @@ class SpreadsheetBackColorComponent extends SpreadsheetDropDownToolBase {
     }
 }
 SpreadsheetBackColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetBackColorComponent, deps: [{ token: i1$1.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-SpreadsheetBackColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetBackColorComponent, selector: "kendo-spreadsheet-backcolor-tool", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetBackColorComponent) }], usesInheritance: true, ngImport: i0, template: `
+SpreadsheetBackColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetBackColorComponent, isStandalone: true, selector: "kendo-spreadsheet-backcolor-tool", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetBackColorComponent) }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-colorpicker
                 #element
@@ -2536,7 +2357,7 @@ SpreadsheetBackColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
                 </span>
             </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i3$1.ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "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: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetBackColorComponent, decorators: [{
             type: Component,
             args: [{
@@ -2570,7 +2391,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </span>
             </div>
         </ng-template>
-    `
+    `,
+                    standalone: true,
+                    imports: [ColorPickerComponent, IconWrapperComponent, NgIf]
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.DialogService }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: i1$2.ToolBarComponent, decorators: [{
                     type: Inject,
@@ -2587,7 +2410,7 @@ class SpreadsheetForeColorComponent extends SpreadsheetDropDownToolBase {
     }
 }
 SpreadsheetForeColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetForeColorComponent, deps: [{ token: i1$1.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-SpreadsheetForeColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetForeColorComponent, selector: "kendo-spreadsheet-forecolor-tool", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetForeColorComponent) }], usesInheritance: true, ngImport: i0, template: `
+SpreadsheetForeColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetForeColorComponent, isStandalone: true, selector: "kendo-spreadsheet-forecolor-tool", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetForeColorComponent) }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-colorpicker
                 #element
@@ -2615,7 +2438,7 @@ SpreadsheetForeColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
                 </span>
             </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i3$1.ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "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: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetForeColorComponent, decorators: [{
             type: Component,
             args: [{
@@ -2649,7 +2472,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </span>
             </div>
         </ng-template>
-    `
+    `,
+                    standalone: true,
+                    imports: [ColorPickerComponent, IconWrapperComponent, NgIf]
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.DialogService }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: i1$2.ToolBarComponent, decorators: [{
                     type: Inject,
@@ -2659,357 +2484,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 /**
  * @hidden
  */
-class SpreadsheetGridLinesDirective extends SpreadsheetCommandButton {
-    constructor(button, localization, spreadsheetService, toolsService) {
-        super('gridLines', button, localization, spreadsheetService, toolsService, {
-            command: 'GridLinesChangeCommand',
-            options: { property: 'gridLines',
-                value: !button.selected
-            }
-        });
-    }
-    clickHandler() {
-        const sheet = this.spreadsheetService.spreadsheet.activeSheet();
-        if (sheet) {
-            const value = !sheet.showGridLines();
-            const options = {
-                command: 'GridLinesChangeCommand', options: { property: 'gridLines', value }
-            };
-            this.spreadsheetService.spreadsheet.executeCommand(options);
-        }
-    }
-}
-SpreadsheetGridLinesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetGridLinesDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetGridLinesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetGridLinesDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kendo-toolbar-button[kendoSpreadsheetGridLines]'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
-
-/**
- * @hidden
- */
-class SpreadsheetAddColumnLeftButtonDirective extends SpreadsheetCommandButton {
-    constructor(button, localization, spreadsheetService, toolsService) {
-        super('addColumnLeft', button, localization, spreadsheetService, toolsService, {
-            command: 'AddColumnCommand',
-            options: { property: 'addColumnLeft',
-                value: 'left'
-            }
-        });
-    }
-}
-SpreadsheetAddColumnLeftButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddColumnLeftButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetAddColumnLeftButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetAddColumnLeftButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddColumnLeftButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
-
-/**
- * @hidden
- */
-class SpreadsheetAddColumnRightButtonDirective extends SpreadsheetCommandButton {
-    constructor(button, localization, spreadsheetService, toolsService) {
-        super('addColumnRight', button, localization, spreadsheetService, toolsService, {
-            command: 'AddColumnCommand',
-            options: { property: 'addColumnRight',
-                value: 'right'
-            }
-        });
-    }
-}
-SpreadsheetAddColumnRightButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddColumnRightButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetAddColumnRightButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetAddColumnRightButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddColumnRightButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
-
-/**
- * @hidden
- */
-class SpreadsheetAddRowAboveButtonDirective extends SpreadsheetCommandButton {
-    constructor(button, localization, spreadsheetService, toolsService) {
-        super('addRowAbove', button, localization, spreadsheetService, toolsService, {
-            command: 'AddRowCommand',
-            options: { property: 'addRowAbove',
-                value: 'above'
-            }
-        });
-    }
-}
-SpreadsheetAddRowAboveButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddRowAboveButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetAddRowAboveButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetAddRowAboveButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddRowAboveButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
-
-/**
- * @hidden
- */
-class SpreadsheetAddRowBelowButtonDirective extends SpreadsheetCommandButton {
-    constructor(button, localization, spreadsheetService, toolsService) {
-        super('addRowBelow', button, localization, spreadsheetService, toolsService, {
-            command: 'AddRowCommand',
-            options: { property: 'addRowBelow',
-                value: 'below'
-            }
-        });
-    }
-}
-SpreadsheetAddRowBelowButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddRowBelowButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetAddRowBelowButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetAddRowBelowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddRowBelowButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
-
-/**
- * @hidden
- */
-class SpreadsheetDeleteColumnButtonDirective extends SpreadsheetCommandButton {
-    constructor(button, localization, spreadsheetService, toolsService) {
-        super('deleteColumn', button, localization, spreadsheetService, toolsService, {
-            command: 'DeleteColumnCommand',
-            options: { property: 'deleteColumn' }
-        });
-    }
-}
-SpreadsheetDeleteColumnButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDeleteColumnButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetDeleteColumnButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDeleteColumnButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
-
-/**
- * @hidden
- */
-class SpreadsheetDeleteRowButtonDirective extends SpreadsheetCommandButton {
-    constructor(button, localization, spreadsheetService, toolsService) {
-        super('deleteRow', button, localization, spreadsheetService, toolsService, {
-            command: 'DeleteRowCommand',
-            options: { property: 'deleteRow' }
-        });
-    }
-}
-SpreadsheetDeleteRowButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDeleteRowButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetDeleteRowButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDeleteRowButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
-
-/**
- * @hidden
- */
-class SpreadsheetTextWrapDirective extends SpreadsheetCommandButton {
+class SpreadsheetUnderlineDirective extends SpreadsheetCommandButton {
     constructor(button, localization, spreadsheetService, toolsService) {
-        super('wrap', button, localization, spreadsheetService, toolsService, {
-            command: 'TextWrapCommand',
-            options: { property: 'wrap',
+        super('underline', button, localization, spreadsheetService, toolsService, {
+            command: 'PropertyChangeCommand',
+            options: { property: 'underline',
                 value: !button.selected
             }
-        });
-    }
-    clickHandler() {
-        const sheet = this.spreadsheetService.spreadsheet.activeSheet();
-        if (sheet) {
-            const range = sheet.range(sheet.activeCell());
-            const value = !range.wrap();
-            const options = {
-                command: 'TextWrapCommand', options: { property: 'wrap', value }
-            };
-            this.spreadsheetService.spreadsheet.executeCommand(options);
-        }
-    }
-}
-SpreadsheetTextWrapDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetTextWrapDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetTextWrapDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetTextWrapDirective, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetTextWrapDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kendo-toolbar-button[kendoSpreadsheetTextWrap]'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
-
-/**
- * @hidden
- */
-class MainMenuDirective {
-    constructor(host, renderer) {
-        this.host = host;
-        this.renderer = renderer;
-    }
-    ngAfterViewInit() {
-        isDocumentAvailable() && this.renderer.addClass(this.host.nativeElement.firstElementChild, 'k-spreadsheet-menu');
-    }
-}
-MainMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MainMenuDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-MainMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: MainMenuDirective, selector: "[kendoSpreadsheetMenu]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MainMenuDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[kendoSpreadsheetMenu]' }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
-
-/**
- * @hidden
- */
-class SpreadsheetMergeDirective {
-    constructor(host, localization, spreadsheetService) {
-        this.host = host;
-        this.spreadsheetService = spreadsheetService;
-        this.commandName = 'merge';
-        this.subs = new Subscription();
-        host.svgIcon = commandSVGIcons[this.commandName];
-        host.icon = commandIcons[this.commandName];
-        host.arrowIcon = true;
-        host.fillMode = 'flat';
-        host.data = MERGE.map(item => ({ ...item, textKey: localization.get(item.commandId) }));
-        this.subs.add(host.itemClick.subscribe((e) => this.onItemClick(e)));
-        host.title = localization.get(this.commandName);
-        host.textField = 'textKey';
-    }
-    ngOnInit() {
-        this.subs.add(this.host.open.subscribe(() => {
-            const sheet = this.spreadsheetService.spreadsheet.activeSheet();
-            const isMergedCellWithinRange = this.hasMergedCells(sheet);
-            const unmergeItem = this.host.data.find(i => i.commandName === 'unmerge');
-            unmergeItem.disabled = !isMergedCellWithinRange;
-        }));
-        this.subs.add(this.spreadsheetService.selectionChanged.subscribe(range => this.selectedRange = range));
-    }
-    ngOnDestroy() {
-        this.subs.unsubscribe();
-    }
-    onItemClick(item) {
-        if (item.disabled) {
-            return;
-        }
-        const value = item.value || null;
-        const options = {
-            command: 'MergeCellCommand', options: { property: item.commandName, value }
-        };
-        this.spreadsheetService.spreadsheet.executeCommand(options);
-    }
-    hasMergedCells(sheet) {
-        const range = sheet._ref(this.selectedRange);
-        return sheet._getMergedCells(range).hasMerged;
+        });
     }
 }
-SpreadsheetMergeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetMergeDirective, deps: [{ token: i1$2.ToolBarDropDownButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetMergeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetMergeDirective, selector: "[kendoSpreadsheetMerge]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetMergeDirective, decorators: [{
+SpreadsheetUnderlineDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetUnderlineDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetUnderlineDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetUnderlineDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetUnderlineDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoSpreadsheetMerge]',
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetUnderline]',
+                    standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.ToolBarDropDownButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
 
 /**
  * @hidden
  */
-class SpreadsheetInsertLinkDirective extends SpreadsheetCommandButton {
-    constructor(button, localization, spreadsheetService, toolsService, dialogService) {
-        super('insertLink', button, localization, spreadsheetService, toolsService, {
-            command: 'HyperlinkCommand'
+class SpreadsheetItalicDirective extends SpreadsheetCommandButton {
+    constructor(button, localization, spreadsheetService, toolsService) {
+        super('italic', button, localization, spreadsheetService, toolsService, {
+            command: 'PropertyChangeCommand',
+            options: { property: 'italic',
+                value: !button.selected
+            }
         });
-        this.dialogService = dialogService;
-        this.subs.add(spreadsheetService.selectionChanged.subscribe(range => this.currentRange = range));
-    }
-    ngOnDestroy() {
-        this.subs.unsubscribe();
     }
-    clickHandler() {
-        const sheet = this.spreadsheetService.spreadsheet.activeSheet();
-        if (sheet) {
-            this.openDialog();
-        }
-    }
-    /**
-     * @hidden
-     */
-    openDialog() {
-        const hasLink = isPresent(this.currentRange?.link());
-        const dialogSettings = {
-            appendTo: this.spreadsheetService.dialogContainer,
-            title: this.localization.get(this.command),
-            content: InsertLinkDialogComponent,
-            actions: [{
-                    text: this.localization.get('dialogInsert'),
-                    themeColor: 'primary'
-                }, {
-                    text: this.localization.get('dialogCancel')
-                },
-                'spacer', {
-                    text: this.localization.get('dialogRemoveLink'),
-                    themeColor: 'primary',
-                    fillMode: 'clear',
-                    cssClass: hasLink ? '' : 'k-disabled'
-                }],
-            actionsLayout: 'start',
-            width: 400,
-            autoFocusedElement: '.k-textbox > .k-input-inner'
-        };
-        const dialog = this.dialogService.open(dialogSettings);
-        const dialogInstance = dialog.dialog.instance;
-        const dialogContent = dialog.content.instance;
-        if (hasLink) {
-            dialogContent.setData({ link: this.currentRange?.link() });
-        }
-        dialogInstance.action.pipe(take(1)).subscribe((event) => {
-            if (event.text === this.localization.get('dialogCancel')) {
-                return;
-            }
-            let link = null;
-            if (event.text === this.localization.get('dialogInsert')) {
-                link = dialogContent.urlLink || null;
+}
+SpreadsheetItalicDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetItalicDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetItalicDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetItalicDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetItalicDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetItalic]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
+
+/**
+ * @hidden
+ */
+class SpreadsheetBoldDirective extends SpreadsheetCommandButton {
+    constructor(button, localization, spreadsheetService, toolsService) {
+        super('bold', button, localization, spreadsheetService, toolsService, {
+            command: 'PropertyChangeCommand',
+            options: { property: 'bold',
+                value: !button.selected
             }
-            this.spreadsheetService.spreadsheet.executeCommand({
-                command: 'HyperlinkCommand',
-                options: { link }
-            });
         });
     }
 }
-SpreadsheetInsertLinkDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetInsertLinkDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: i1$1.DialogService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetInsertLinkDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetInsertLinkDirective, selector: "kendo-toolbar-button[kendoSpreadsheetInsertLink]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetInsertLinkDirective, decorators: [{
+SpreadsheetBoldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetBoldDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetBoldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetBoldDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetBold]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetBoldDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'kendo-toolbar-button[kendoSpreadsheetInsertLink]'
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetBold]',
+                    standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: i1$1.DialogService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
 
 /**
  * @hidden
  */
-class SpreadsheetIncreaseFontSizeDirective extends SpreadsheetCommandButton {
+class SpreadsheetDecreaseFontSizeDirective extends SpreadsheetCommandButton {
     constructor(button, localization, spreadsheetService, toolsService) {
-        super('increaseFontSize', button, localization, spreadsheetService, toolsService, {
+        super('decreaseFontSize', button, localization, spreadsheetService, toolsService, {
             command: 'PropertyChangeCommand',
             options: { property: 'fontSize' }
         });
         this.value = DEFAULT_FONT_VALUES.fontSize;
     }
     clickHandler() {
-        const newValue = this.value + 1;
+        const newValue = this.value - 1;
         const options = {
             command: 'PropertyChangeCommand',
             options: { property: 'fontSize', value: newValue || null }
@@ -3023,28 +2576,29 @@ class SpreadsheetIncreaseFontSizeDirective extends SpreadsheetCommandButton {
         }));
     }
 }
-SpreadsheetIncreaseFontSizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetIncreaseFontSizeDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetIncreaseFontSizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetIncreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseFontSize]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetIncreaseFontSizeDirective, decorators: [{
+SpreadsheetDecreaseFontSizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDecreaseFontSizeDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetDecreaseFontSizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetDecreaseFontSizeDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseFontSize]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDecreaseFontSizeDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'kendo-toolbar-button[kendoSpreadsheetIncreaseFontSize]'
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetDecreaseFontSize]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
 
 /**
  * @hidden
  */
-class SpreadsheetDecreaseFontSizeDirective extends SpreadsheetCommandButton {
+class SpreadsheetIncreaseFontSizeDirective extends SpreadsheetCommandButton {
     constructor(button, localization, spreadsheetService, toolsService) {
-        super('decreaseFontSize', button, localization, spreadsheetService, toolsService, {
+        super('increaseFontSize', button, localization, spreadsheetService, toolsService, {
             command: 'PropertyChangeCommand',
             options: { property: 'fontSize' }
         });
         this.value = DEFAULT_FONT_VALUES.fontSize;
     }
     clickHandler() {
-        const newValue = this.value - 1;
+        const newValue = this.value + 1;
         const options = {
             command: 'PropertyChangeCommand',
             options: { property: 'fontSize', value: newValue || null }
@@ -3058,150 +2612,644 @@ class SpreadsheetDecreaseFontSizeDirective extends SpreadsheetCommandButton {
         }));
     }
 }
-SpreadsheetDecreaseFontSizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDecreaseFontSizeDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetDecreaseFontSizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetDecreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseFontSize]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDecreaseFontSizeDirective, decorators: [{
+SpreadsheetIncreaseFontSizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetIncreaseFontSizeDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetIncreaseFontSizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetIncreaseFontSizeDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseFontSize]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetIncreaseFontSizeDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'kendo-toolbar-button[kendoSpreadsheetDecreaseFontSize]'
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetIncreaseFontSize]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
 
+/**
+ * A component which configures an existing `DropDownListComponent` as a Spreadsheet tool
+ * ([see example](ToDo).
+ * The component associates a `kendo-toolbar-dropdownlist` with a Spreadsheet command that changes the font size of a content block and
+ * automatically defines the options of the drop-down list and sets its values ([see example](ToDo).
+ *
+ * @hidden
+ */
+class SpreadsheetFontSizeComponent extends SpreadsheetDropDownToolBase {
+    constructor(dialogService, localization, spreadsheetService, toolsService, toolbar) {
+        super('fontSize', dialogService, localization, spreadsheetService, toolsService, toolbar);
+    }
+}
+SpreadsheetFontSizeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetFontSizeComponent, deps: [{ token: i1$1.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+SpreadsheetFontSizeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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>
+        </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>
+        </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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetFontSizeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetFontSizeComponent) }],
+                    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>
+        </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>
+        </ng-template>
+    `,
+                    standalone: true,
+                    imports: [FontSizeDropDownListComponent, IconWrapperComponent, NgIf]
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.DialogService }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: i1$2.ToolBarComponent, decorators: [{
+                    type: Inject,
+                    args: [ToolBarComponent]
+                }] }]; } });
+
+/**
+ * A component which configures an existing `DropDownListComponent` as a Spreadsheet tool
+ * ([see example](ToDo).
+ * The component associates a `kendo-toolbar-dropdownlist` with a Spreadsheet command that changes the font family of a content block and
+ * automatically defines the options of the drop-down list and sets its values ([see example](ToDo).
+ *
+ * @hidden
+ */
+class SpreadsheetFontFamilyComponent extends SpreadsheetDropDownToolBase {
+    constructor(dialogService, localization, spreadsheetService, toolsService, toolbar) {
+        super('fontFamily', dialogService, localization, spreadsheetService, toolsService, toolbar);
+    }
+}
+SpreadsheetFontFamilyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetFontFamilyComponent, deps: [{ token: i1$1.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+SpreadsheetFontFamilyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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>
+        </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>
+        </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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetFontFamilyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetFontFamilyComponent) }],
+                    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>
+        </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>
+        </ng-template>
+    `,
+                    standalone: true,
+                    imports: [FontFamilyDropDownListComponent, IconWrapperComponent, NgIf]
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.DialogService }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: i1$2.ToolBarComponent, decorators: [{
+                    type: Inject,
+                    args: [ToolBarComponent]
+                }] }]; } });
+
 /**
  * @hidden
  */
-class SpreadsheetIncreaseDecimalDirective extends SpreadsheetCommandButton {
+class SpreadsheetRedoDirective extends SpreadsheetCommandButton {
     constructor(button, localization, spreadsheetService, toolsService) {
-        super('increaseDecimal', button, localization, spreadsheetService, toolsService, {
-            command: 'AdjustDecimalsCommand'
+        super('redo', button, localization, spreadsheetService, toolsService, {
+            options: { property: 'redo' }
         });
     }
     clickHandler() {
-        const options = {
-            command: 'AdjustDecimalsCommand',
-            options: { value: 1 }
-        };
-        this.spreadsheetService.spreadsheet.executeCommand(options);
+        this.spreadsheetService.spreadsheet.workbook.undoRedoStack['redo']();
     }
 }
-SpreadsheetIncreaseDecimalDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetIncreaseDecimalDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetIncreaseDecimalDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetIncreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseDecimal]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetIncreaseDecimalDirective, decorators: [{
+SpreadsheetRedoDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetRedoDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetRedoDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetRedoDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetRedoDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'kendo-toolbar-button[kendoSpreadsheetIncreaseDecimal]'
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetRedo]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
 
 /**
  * @hidden
  */
-class SpreadsheetDecreaseDecimalDirective extends SpreadsheetCommandButton {
+class SpreadsheetUndoDirective extends SpreadsheetCommandButton {
     constructor(button, localization, spreadsheetService, toolsService) {
-        super('decreaseDecimal', button, localization, spreadsheetService, toolsService, {
-            command: 'AdjustDecimalsCommand'
+        super('undo', button, localization, spreadsheetService, toolsService, {
+            options: { property: 'undo' }
         });
     }
     clickHandler() {
-        const options = {
-            command: 'AdjustDecimalsCommand',
-            options: { value: -1 }
-        };
-        this.spreadsheetService.spreadsheet.executeCommand(options);
+        this.spreadsheetService.spreadsheet.workbook.undoRedoStack['undo']();
     }
 }
-SpreadsheetDecreaseDecimalDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDecreaseDecimalDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetDecreaseDecimalDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetDecreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseDecimal]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDecreaseDecimalDirective, decorators: [{
+SpreadsheetUndoDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetUndoDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetUndoDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetUndoDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetUndoDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'kendo-toolbar-button[kendoSpreadsheetDecreaseDecimal]'
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetUndo]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
 
 /**
  * @hidden
  */
-class SpreadsheetHorizontalTextAlignDirective {
-    constructor(host, localization, spreadsheetService, toolsService) {
-        this.host = host;
+class SpreadsheetSaveFileDirective {
+    constructor(button, localization, spreadsheetService) {
+        this.button = button;
+        this.localization = localization;
         this.spreadsheetService = spreadsheetService;
-        this.toolsService = toolsService;
-        this.commandName = 'alignHorizontal';
         this.subs = new Subscription();
-        host.svgIcon = commandSVGIcons[this.commandName];
-        host.icon = commandIcons[this.commandName];
-        host.arrowIcon = true;
-        host.fillMode = 'flat';
-        host.data = ALIGNS.flatMap(item => item.commandName === 'textAlign' ? [{ ...item, textKey: localization.get(item.commandId) }] : []);
-        this.subs.add(host.itemClick.subscribe((e) => this.onItemClick(e)));
-        host.title = localization.get(this.commandName);
-        host.textField = 'textKey';
     }
     ngOnInit() {
-        this.subs.add(this.toolsService.stateChange.subscribe(state => this.host.data.forEach(i => i.cssClass = i.value === state[i.commandName] ? 'k-selected' : '')));
+        this.button.title = this.localization.get('saveFile');
+        this.button.icon = commandIcons['download'];
+        this.button.svgIcon = commandSVGIcons['download'];
+        this.button.fillMode = 'flat';
+        this.subs.add(this.button.click.subscribe(() => {
+            const spreadsheet = this.spreadsheetService.spreadsheet;
+            if (spreadsheet) {
+                spreadsheet.saveAsExcel({
+                    ...spreadsheet.options.excel,
+                    saveAs,
+                    Workbook
+                });
+            }
+        }));
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
-    onItemClick(item) {
-        const value = item.value || null;
-        const options = {
-            command: 'PropertyChangeCommand', options: { property: item.commandName, value }
+}
+SpreadsheetSaveFileDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetSaveFileDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetSaveFileDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetSaveFileDirective, isStandalone: true, selector: "[kendoSpreadsheetSaveFile]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetSaveFileDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoSpreadsheetSaveFile]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }]; } });
+
+/**
+ * @hidden
+ */
+class SpreadsheetLoadFileComponent extends ToolBarToolComponent {
+    constructor(localization, spreadsheetService, toolbar) {
+        super();
+        this.localization = localization;
+        this.spreadsheetService = spreadsheetService;
+        this.toolbar = toolbar;
+        this.icon = commandIcons['folderOpen'];
+        this.svgIcon = commandSVGIcons['folderOpen'];
+        this.tabindex = -1;
+        this.onFileSelect = (e) => {
+            const file = e.target.files[0];
+            if (file) {
+                this.spreadsheetService.spreadsheet.executeCommand({ command: 'OpenCommand', options: { file } });
+                e.target.value = null;
+            }
         };
-        this.spreadsheetService.spreadsheet.executeCommand(options);
+    }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    /**
+     * @hidden
+     */
+    canFocus() {
+        return true;
+    }
+    /**
+     * @hidden
+     */
+    focus() {
+        this.tabindex = 0;
+        if (this.overflows) {
+            this.overflowButtonElement.nativeElement.focus();
+        }
+        else {
+            this.button.focus();
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleKey() {
+        this.tabindex = -1;
+        return false;
+    }
+}
+SpreadsheetLoadFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetLoadFileComponent, deps: [{ token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+SpreadsheetLoadFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetLoadFileComponent, isStandalone: true, selector: "kendo-spreadsheet-load-file-tool", providers: [
+        {
+            provide: ToolBarToolComponent,
+            useExisting: forwardRef(() => SpreadsheetLoadFileComponent),
+        },
+    ], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }, { propertyName: "button", first: true, predicate: ["button"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #toolbarTemplate>
+            <button
+                #button
+                type="button"
+                kendoButton
+                [title]="messageFor('loadFile')"
+                fillMode="flat"
+                [icon]="icon"
+                [svgIcon]="svgIcon"
+                (click)="fileSelectEl.click()"></button>
+            <input
+                #fileSelectEl
+                type="file"
+                (change)="onFileSelect($event)"
+                [style.display]="'none'"
+                aria-hidden="true"
+                accept=".xlsx,.XLSX" />
+        </ng-template>
+        <ng-template #popupTemplate>
+            <div
+                #overflowButton
+                tabindex="-1"
+                role="menuitem"
+                class="k-item k-menu-item"
+                (click)="toolbar.toggle(false); popupFileSelectEl.click()">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper
+                        [name]="icon"
+                        [svgIcon]="svgIcon"
+                    ></kendo-icon-wrapper>
+                    <span class="k-menu-link-text">{{messageFor('loadFile')}}</span>
+                </span>
+                <input
+                    #popupFileSelectEl
+                    type="file"
+                    (change)="onFileSelect($event)"
+                    [style.display]="'none'"
+                    aria-hidden="true"
+                    accept=".xlsx,.XLSX" />
+            </div>
+        </ng-template>
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetLoadFileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-spreadsheet-load-file-tool',
+                    providers: [
+                        {
+                            provide: ToolBarToolComponent,
+                            useExisting: forwardRef(() => SpreadsheetLoadFileComponent),
+                        },
+                    ],
+                    template: `
+        <ng-template #toolbarTemplate>
+            <button
+                #button
+                type="button"
+                kendoButton
+                [title]="messageFor('loadFile')"
+                fillMode="flat"
+                [icon]="icon"
+                [svgIcon]="svgIcon"
+                (click)="fileSelectEl.click()"></button>
+            <input
+                #fileSelectEl
+                type="file"
+                (change)="onFileSelect($event)"
+                [style.display]="'none'"
+                aria-hidden="true"
+                accept=".xlsx,.XLSX" />
+        </ng-template>
+        <ng-template #popupTemplate>
+            <div
+                #overflowButton
+                tabindex="-1"
+                role="menuitem"
+                class="k-item k-menu-item"
+                (click)="toolbar.toggle(false); popupFileSelectEl.click()">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper
+                        [name]="icon"
+                        [svgIcon]="svgIcon"
+                    ></kendo-icon-wrapper>
+                    <span class="k-menu-link-text">{{messageFor('loadFile')}}</span>
+                </span>
+                <input
+                    #popupFileSelectEl
+                    type="file"
+                    (change)="onFileSelect($event)"
+                    [style.display]="'none'"
+                    aria-hidden="true"
+                    accept=".xlsx,.XLSX" />
+            </div>
+        </ng-template>
+    `,
+                    standalone: true,
+                    imports: [ButtonComponent, IconWrapperComponent]
+                }]
+        }], ctorParameters: function () { return [{ type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: i1$2.ToolBarComponent, decorators: [{
+                    type: Inject,
+                    args: [ToolBarComponent]
+                }] }]; }, propDecorators: { toolbarTemplate: [{
+                type: ViewChild,
+                args: ['toolbarTemplate', { static: true }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], overflowButtonElement: [{
+                type: ViewChild,
+                args: ['overflowButton', { read: ElementRef, static: false }]
+            }], button: [{
+                type: ViewChild,
+                args: ['button']
+            }] } });
+
+/**
+ * @hidden
+ */
+class MainMenuDirective {
+    constructor(host, renderer) {
+        this.host = host;
+        this.renderer = renderer;
+    }
+    ngAfterViewInit() {
+        isDocumentAvailable() && this.renderer.addClass(this.host.nativeElement.firstElementChild, 'k-spreadsheet-menu');
     }
 }
-SpreadsheetHorizontalTextAlignDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetHorizontalTextAlignDirective, deps: [{ token: i1$2.ToolBarDropDownButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetHorizontalTextAlignDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetHorizontalTextAlignDirective, selector: "[kendoSpreadsheetHorizontalTextAlign]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetHorizontalTextAlignDirective, decorators: [{
+MainMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MainMenuDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+MainMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: MainMenuDirective, isStandalone: true, selector: "[kendoSpreadsheetMenu]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MainMenuDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoSpreadsheetHorizontalTextAlign]',
+                    selector: '[kendoSpreadsheetMenu]',
+                    standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.ToolBarDropDownButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
 
 /**
  * @hidden
  */
-class SpreadsheetVerticalTextAlignDirective {
-    constructor(host, localization, spreadsheetService, toolsService) {
-        this.host = host;
-        this.spreadsheetService = spreadsheetService;
-        this.toolsService = toolsService;
-        this.commandName = 'alignVertical';
-        this.subs = new Subscription();
-        host.svgIcon = commandSVGIcons[this.commandName];
-        host.icon = commandIcons[this.commandName];
-        host.arrowIcon = true;
-        host.fillMode = 'flat';
-        host.data = ALIGNS.flatMap(item => item.commandName === 'verticalAlign' ? [{ ...item, textKey: localization.get(item.commandId) }] : []);
-        this.subs.add(host.itemClick.subscribe((e) => this.onItemClick(e)));
-        host.title = localization.get(this.commandName);
-        host.textField = 'textKey';
-    }
-    ngOnInit() {
-        this.subs.add(this.toolsService.stateChange.subscribe(state => this.host.data.forEach(i => i.cssClass = i.value === state[i.commandName] ? 'k-selected' : '')));
-    }
-    ngOnDestroy() {
-        this.subs.unsubscribe();
-    }
-    onItemClick(item) {
-        const value = item.value || null;
-        const options = {
-            command: 'PropertyChangeCommand', options: { property: item.commandName, value }
-        };
-        this.spreadsheetService.spreadsheet.executeCommand(options);
+class MessagesDirective extends ComponentMessages {
+}
+MessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessagesDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+MessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: MessagesDirective, isStandalone: true, selector: "[kendoSpreadsheetMessages]", inputs: { home: "home", file: "file", insert: "insert", formatTab: "formatTab", saveFile: "saveFile", loadFile: "loadFile", bold: "bold", italic: "italic", underline: "underline", format: "format", fontFamily: "fontFamily", fontSize: "fontSize", undo: "undo", redo: "redo", background: "background", color: "color", gridLines: "gridLines", addColumnLeft: "addColumnLeft", addColumnRight: "addColumnRight", addRowBelow: "addRowBelow", addRowAbove: "addRowAbove", deleteColumn: "deleteColumn", deleteRow: "deleteRow", wrap: "wrap", align: "align", alignHorizontal: "alignHorizontal", alignVertical: "alignVertical", alignLeft: "alignLeft", alignCenter: "alignCenter", alignRight: "alignRight", alignJustify: "alignJustify", alignTop: "alignTop", alignMiddle: "alignMiddle", alignBottom: "alignBottom", dialogApply: "dialogApply", dialogCancel: "dialogCancel", dialogDelete: "dialogDelete", dialogRename: "dialogRename", dialogInsert: "dialogInsert", dialogRemoveLink: "dialogRemoveLink", delete: "delete", rename: "rename", nameBox: "nameBox", formulaInput: "formulaInput", addSheet: "addSheet", sheetsMenu: "sheetsMenu", view: "view", merge: "merge", mergeHorizontally: "mergeHorizontally", mergeVertically: "mergeVertically", mergeAll: "mergeAll", unmerge: "unmerge", insertLink: "insertLink", increaseDecimal: "increaseDecimal", decreaseDecimal: "decreaseDecimal", increaseFontSize: "increaseFontSize", decreaseFontSize: "decreaseFontSize", openUnsupported: "openUnsupported", modifyMerged: "modifyMerged", cannotModifyDisabled: "cannotModifyDisabled", dialogOk: "dialogOk", dialogError: "dialogError", duplicateSheetName: "duplicateSheetName", copy: "copy", cut: "cut", paste: "paste", hideRow: "hideRow", unhideRow: "unhideRow", hideColumn: "hideColumn", unhideColumn: "unhideColumn", sheetDelete: "sheetDelete", sheetRename: "sheetRename", sheetHide: "sheetHide", sheetDuplicate: "sheetDuplicate", sheetMoveLeft: "sheetMoveLeft", sheetMoveRight: "sheetMoveRight", invalidNameError: "invalidNameError" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoSpreadsheetMessages]',
+                    standalone: true
+                }]
+        }], propDecorators: { home: [{
+                type: Input
+            }], file: [{
+                type: Input
+            }], insert: [{
+                type: Input
+            }], formatTab: [{
+                type: Input
+            }], saveFile: [{
+                type: Input
+            }], loadFile: [{
+                type: Input
+            }], bold: [{
+                type: Input
+            }], italic: [{
+                type: Input
+            }], underline: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], fontFamily: [{
+                type: Input
+            }], fontSize: [{
+                type: Input
+            }], undo: [{
+                type: Input
+            }], redo: [{
+                type: Input
+            }], background: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], gridLines: [{
+                type: Input
+            }], addColumnLeft: [{
+                type: Input
+            }], addColumnRight: [{
+                type: Input
+            }], addRowBelow: [{
+                type: Input
+            }], addRowAbove: [{
+                type: Input
+            }], deleteColumn: [{
+                type: Input
+            }], deleteRow: [{
+                type: Input
+            }], wrap: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], alignHorizontal: [{
+                type: Input
+            }], alignVertical: [{
+                type: Input
+            }], alignLeft: [{
+                type: Input
+            }], alignCenter: [{
+                type: Input
+            }], alignRight: [{
+                type: Input
+            }], alignJustify: [{
+                type: Input
+            }], alignTop: [{
+                type: Input
+            }], alignMiddle: [{
+                type: Input
+            }], alignBottom: [{
+                type: Input
+            }], dialogApply: [{
+                type: Input
+            }], dialogCancel: [{
+                type: Input
+            }], dialogDelete: [{
+                type: Input
+            }], dialogRename: [{
+                type: Input
+            }], dialogInsert: [{
+                type: Input
+            }], dialogRemoveLink: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }], rename: [{
+                type: Input
+            }], nameBox: [{
+                type: Input
+            }], formulaInput: [{
+                type: Input
+            }], addSheet: [{
+                type: Input
+            }], sheetsMenu: [{
+                type: Input
+            }], view: [{
+                type: Input
+            }], merge: [{
+                type: Input
+            }], mergeHorizontally: [{
+                type: Input
+            }], mergeVertically: [{
+                type: Input
+            }], mergeAll: [{
+                type: Input
+            }], unmerge: [{
+                type: Input
+            }], insertLink: [{
+                type: Input
+            }], increaseDecimal: [{
+                type: Input
+            }], decreaseDecimal: [{
+                type: Input
+            }], increaseFontSize: [{
+                type: Input
+            }], decreaseFontSize: [{
+                type: Input
+            }], openUnsupported: [{
+                type: Input
+            }], modifyMerged: [{
+                type: Input
+            }], cannotModifyDisabled: [{
+                type: Input
+            }], dialogOk: [{
+                type: Input
+            }], dialogError: [{
+                type: Input
+            }], duplicateSheetName: [{
+                type: Input
+            }], copy: [{
+                type: Input
+            }], cut: [{
+                type: Input
+            }], paste: [{
+                type: Input
+            }], hideRow: [{
+                type: Input
+            }], unhideRow: [{
+                type: Input
+            }], hideColumn: [{
+                type: Input
+            }], unhideColumn: [{
+                type: Input
+            }], sheetDelete: [{
+                type: Input
+            }], sheetRename: [{
+                type: Input
+            }], sheetHide: [{
+                type: Input
+            }], sheetDuplicate: [{
+                type: Input
+            }], sheetMoveLeft: [{
+                type: Input
+            }], sheetMoveRight: [{
+                type: Input
+            }], invalidNameError: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class LocalizedMessagesDirective extends MessagesDirective {
+    constructor(service) {
+        super();
+        this.service = service;
     }
 }
-SpreadsheetVerticalTextAlignDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetVerticalTextAlignDirective, deps: [{ token: i1$2.ToolBarDropDownButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetVerticalTextAlignDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetVerticalTextAlignDirective, selector: "[kendoSpreadsheetVerticalTextAlign]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetVerticalTextAlignDirective, decorators: [{
+LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoSpreadsheetLocalizedMessages]", providers: [{
+            provide: MessagesDirective,
+            useExisting: forwardRef(() => LocalizedMessagesDirective)
+        }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoSpreadsheetVerticalTextAlign]',
+                    providers: [{
+                            provide: MessagesDirective,
+                            useExisting: forwardRef(() => LocalizedMessagesDirective)
+                        }],
+                    selector: '[kendoSpreadsheetLocalizedMessages]',
+                    standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.ToolBarDropDownButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
+        }], ctorParameters: function () { return [{ type: i2.LocalizationService }]; } });
 
 /**
  * Represents the [Kendo UI Spreadsheet component for Angular]({% slug overview_spreadsheet %}).
@@ -3770,7 +3818,7 @@ class SpreadsheetComponent {
     }
 }
 SpreadsheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetComponent, deps: [{ token: i0.NgZone }, { token: i1$3.IntlService }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ErrorHandlingService }, { token: i1$1.DialogService }], target: i0.ɵɵFactoryTarget.Component });
-SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetComponent, 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", 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: [
+SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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", 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,
         {
@@ -4049,7 +4097,7 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             (select)="onContextMenuSelect($event)"></kendo-contextmenu>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i9.MenuComponent, selector: "kendo-menu", inputs: ["appendTo", "menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { kind: "component", type: i9.MenuItemComponent, selector: "kendo-menu-item", inputs: ["text", "url", "disabled", "cssClass", "cssStyle", "icon", "svgIcon", "data", "separator"] }, { kind: "component", type: i9.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: i1$2.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: i1$2.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "component", type: i1$2.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "component", type: i1$2.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: "component", type: i1$2.ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { kind: "component", type: i3.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoSpreadsheetLocalizedMessages]" }, { kind: "directive", type: FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]", inputs: ["formulaListMaxHeight"] }, { kind: "component", type: NameBoxComponent, selector: "[kendoSpreadsheetNameBox]", inputs: ["data", "spreadsheetWidget"] }, { kind: "component", type: SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: ["sheets", "sheetDescriptors"] }, { 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: SpreadsheetLoadFileComponent, selector: "kendo-spreadsheet-load-file-tool" }, { kind: "directive", type: SpreadsheetSaveFileDirective, selector: "[kendoSpreadsheetSaveFile]" }, { kind: "directive", type: SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]" }, { kind: "directive", type: SpreadsheetUndoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]" }, { kind: "directive", type: SpreadsheetRedoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]" }, { kind: "component", type: SpreadsheetFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]" }, { kind: "component", type: SpreadsheetFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]" }, { kind: "component", type: SpreadsheetBackColorComponent, selector: "kendo-spreadsheet-backcolor-tool" }, { kind: "component", type: SpreadsheetForeColorComponent, selector: "kendo-spreadsheet-forecolor-tool" }, { kind: "directive", type: SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]" }, { kind: "directive", type: SpreadsheetAddColumnLeftButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]" }, { kind: "directive", type: SpreadsheetAddColumnRightButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]" }, { kind: "directive", type: SpreadsheetAddRowAboveButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]" }, { kind: "directive", type: SpreadsheetAddRowBelowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]" }, { kind: "directive", type: SpreadsheetDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]" }, { kind: "directive", type: SpreadsheetDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]" }, { kind: "directive", type: SpreadsheetTextWrapDirective, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]" }, { kind: "directive", type: MainMenuDirective, selector: "[kendoSpreadsheetMenu]" }, { kind: "directive", type: SpreadsheetMergeDirective, selector: "[kendoSpreadsheetMerge]" }, { kind: "directive", type: SpreadsheetInsertLinkDirective, selector: "kendo-toolbar-button[kendoSpreadsheetInsertLink]" }, { kind: "directive", type: SpreadsheetIncreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseFontSize]" }, { kind: "directive", type: SpreadsheetDecreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseFontSize]" }, { kind: "directive", type: SpreadsheetIncreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseDecimal]" }, { kind: "directive", type: SpreadsheetDecreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseDecimal]" }, { kind: "directive", type: SpreadsheetHorizontalTextAlignDirective, selector: "[kendoSpreadsheetHorizontalTextAlign]" }, { kind: "directive", type: SpreadsheetVerticalTextAlignDirective, selector: "[kendoSpreadsheetVerticalTextAlign]" }] });
+    `, 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", "tabindex", "size", "tabIndex"], 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", "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", "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]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetComponent, decorators: [{
             type: Component,
             args: [{
@@ -4336,6 +4384,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></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]
                 }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$3.IntlService }, { type: i0.ElementRef }, { type: i2.LocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: ErrorHandlingService }, { type: i1$1.DialogService }]; }, propDecorators: { formulaBarInputRef: [{
                 type: ViewChild,
@@ -4413,7 +4463,7 @@ class CustomMessagesComponent extends MessagesDirective {
     }
 }
 CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-CustomMessagesComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, selector: "kendo-spreadsheet-messages", providers: [
+CustomMessagesComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-spreadsheet-messages", providers: [
         {
             provide: MessagesDirective,
             useExisting: forwardRef(() => CustomMessagesComponent)
@@ -4429,7 +4479,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         }
                     ],
                     // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'kendo-spreadsheet-messages'
+                    selector: 'kendo-spreadsheet-messages',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i2.LocalizationService }]; } });
 
@@ -4467,60 +4518,19 @@ class SpreadsheetTextAlignDirective {
     }
 }
 SpreadsheetTextAlignDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetTextAlignDirective, deps: [{ token: i1$2.ToolBarDropDownButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetTextAlignDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetTextAlignDirective, selector: "[kendoSpreadsheetTextAlign]", ngImport: i0 });
+SpreadsheetTextAlignDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetTextAlignDirective, isStandalone: true, selector: "[kendoSpreadsheetTextAlign]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetTextAlignDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSpreadsheetTextAlign]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1$2.ToolBarDropDownButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
 
-const DIRECTIVES = [
-    SpreadsheetComponent,
-    MessagesDirective,
-    LocalizedMessagesDirective,
-    CustomMessagesComponent,
-    FormulaListComponent,
-    FormulaInputDirective,
-    NameBoxComponent,
-    SheetsBarComponent,
-    SpreadsheetBoldDirective,
-    SpreadsheetItalicDirective,
-    SpreadsheetUnderlineDirective,
-    SpreadsheetLoadFileComponent,
-    SpreadsheetSaveFileDirective,
-    SpreadsheetFormatDirective,
-    SpreadsheetUndoDirective,
-    SpreadsheetRedoDirective,
-    SpreadsheetFontFamilyComponent,
-    SpreadsheetFontSizeComponent,
-    SpreadsheetBackColorComponent,
-    SpreadsheetForeColorComponent,
-    SpreadsheetGridLinesDirective,
-    SpreadsheetAddColumnLeftButtonDirective,
-    SpreadsheetAddColumnRightButtonDirective,
-    SpreadsheetAddRowAboveButtonDirective,
-    SpreadsheetAddRowBelowButtonDirective,
-    SpreadsheetDeleteColumnButtonDirective,
-    SpreadsheetDeleteRowButtonDirective,
-    SpreadsheetTextAlignDirective,
-    SpreadsheetTextWrapDirective,
-    FontFamilyDropDownListComponent,
-    FontSizeDropDownListComponent,
-    DialogContentComponent,
-    MainMenuDirective,
-    ActionDialogComponent,
-    SpreadsheetMergeDirective,
-    SpreadsheetInsertLinkDirective,
-    InsertLinkDialogComponent,
-    SpreadsheetIncreaseFontSizeDirective,
-    SpreadsheetDecreaseFontSizeDirective,
-    SpreadsheetIncreaseDecimalDirective,
-    SpreadsheetDecreaseDecimalDirective,
-    SpreadsheetHorizontalTextAlignDirective,
-    SpreadsheetVerticalTextAlignDirective
-];
-const EXPORTS = [
+/**
+* Utility array that contains all `@progress/kendo-angular-spreadsheet` related components and directives.
+*/
+const KENDO_SPREADSHEET = [
     SpreadsheetComponent,
     CustomMessagesComponent,
     SpreadsheetBoldDirective,
@@ -4553,6 +4563,8 @@ const EXPORTS = [
     SpreadsheetHorizontalTextAlignDirective,
     SpreadsheetVerticalTextAlignDirective
 ];
+
+// IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Spreadsheet component.
@@ -4560,130 +4572,14 @@ const EXPORTS = [
 class SpreadsheetModule {
 }
 SpreadsheetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SpreadsheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetModule, declarations: [SpreadsheetComponent,
-        MessagesDirective,
-        LocalizedMessagesDirective,
-        CustomMessagesComponent,
-        FormulaListComponent,
-        FormulaInputDirective,
-        NameBoxComponent,
-        SheetsBarComponent,
-        SpreadsheetBoldDirective,
-        SpreadsheetItalicDirective,
-        SpreadsheetUnderlineDirective,
-        SpreadsheetLoadFileComponent,
-        SpreadsheetSaveFileDirective,
-        SpreadsheetFormatDirective,
-        SpreadsheetUndoDirective,
-        SpreadsheetRedoDirective,
-        SpreadsheetFontFamilyComponent,
-        SpreadsheetFontSizeComponent,
-        SpreadsheetBackColorComponent,
-        SpreadsheetForeColorComponent,
-        SpreadsheetGridLinesDirective,
-        SpreadsheetAddColumnLeftButtonDirective,
-        SpreadsheetAddColumnRightButtonDirective,
-        SpreadsheetAddRowAboveButtonDirective,
-        SpreadsheetAddRowBelowButtonDirective,
-        SpreadsheetDeleteColumnButtonDirective,
-        SpreadsheetDeleteRowButtonDirective,
-        SpreadsheetTextAlignDirective,
-        SpreadsheetTextWrapDirective,
-        FontFamilyDropDownListComponent,
-        FontSizeDropDownListComponent,
-        DialogContentComponent,
-        MainMenuDirective,
-        ActionDialogComponent,
-        SpreadsheetMergeDirective,
-        SpreadsheetInsertLinkDirective,
-        InsertLinkDialogComponent,
-        SpreadsheetIncreaseFontSizeDirective,
-        SpreadsheetDecreaseFontSizeDirective,
-        SpreadsheetIncreaseDecimalDirective,
-        SpreadsheetDecreaseDecimalDirective,
-        SpreadsheetHorizontalTextAlignDirective,
-        SpreadsheetVerticalTextAlignDirective], imports: [CommonModule,
-        ButtonsModule,
-        ComboBoxModule,
-        DropDownListModule,
-        DialogModule,
-        EventsModule,
-        IconsModule,
-        IntlModule,
-        MenusModule,
-        PopupModule,
-        TabStripModule,
-        ToolBarModule,
-        InputsModule,
-        WatermarkModule,
-        LabelModule], exports: [SpreadsheetComponent,
-        CustomMessagesComponent,
-        SpreadsheetBoldDirective,
-        SpreadsheetItalicDirective,
-        SpreadsheetUnderlineDirective,
-        SpreadsheetLoadFileComponent,
-        SpreadsheetSaveFileDirective,
-        SpreadsheetFormatDirective,
-        SpreadsheetUndoDirective,
-        SpreadsheetRedoDirective,
-        SpreadsheetFontFamilyComponent,
-        SpreadsheetFontSizeComponent,
-        SpreadsheetBackColorComponent,
-        SpreadsheetForeColorComponent,
-        SpreadsheetGridLinesDirective,
-        SpreadsheetAddColumnLeftButtonDirective,
-        SpreadsheetAddColumnRightButtonDirective,
-        SpreadsheetAddRowAboveButtonDirective,
-        SpreadsheetAddRowBelowButtonDirective,
-        SpreadsheetDeleteColumnButtonDirective,
-        SpreadsheetDeleteRowButtonDirective,
-        SpreadsheetTextAlignDirective,
-        SpreadsheetTextWrapDirective,
-        SpreadsheetMergeDirective,
-        SpreadsheetInsertLinkDirective,
-        SpreadsheetIncreaseFontSizeDirective,
-        SpreadsheetDecreaseFontSizeDirective,
-        SpreadsheetIncreaseDecimalDirective,
-        SpreadsheetDecreaseDecimalDirective,
-        SpreadsheetHorizontalTextAlignDirective,
-        SpreadsheetVerticalTextAlignDirective] });
-SpreadsheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetModule, imports: [CommonModule,
-        ButtonsModule,
-        ComboBoxModule,
-        DropDownListModule,
-        DialogModule,
-        EventsModule,
-        IconsModule,
-        IntlModule,
-        MenusModule,
-        PopupModule,
-        TabStripModule,
-        ToolBarModule,
-        InputsModule,
-        WatermarkModule,
-        LabelModule] });
+SpreadsheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetModule, imports: [SpreadsheetComponent, CustomMessagesComponent, SpreadsheetBoldDirective, SpreadsheetItalicDirective, SpreadsheetUnderlineDirective, SpreadsheetLoadFileComponent, SpreadsheetSaveFileDirective, SpreadsheetFormatDirective, SpreadsheetUndoDirective, SpreadsheetRedoDirective, SpreadsheetFontFamilyComponent, SpreadsheetFontSizeComponent, SpreadsheetBackColorComponent, SpreadsheetForeColorComponent, SpreadsheetGridLinesDirective, SpreadsheetAddColumnLeftButtonDirective, SpreadsheetAddColumnRightButtonDirective, SpreadsheetAddRowAboveButtonDirective, SpreadsheetAddRowBelowButtonDirective, SpreadsheetDeleteColumnButtonDirective, SpreadsheetDeleteRowButtonDirective, SpreadsheetTextAlignDirective, SpreadsheetTextWrapDirective, SpreadsheetMergeDirective, SpreadsheetInsertLinkDirective, SpreadsheetIncreaseFontSizeDirective, SpreadsheetDecreaseFontSizeDirective, SpreadsheetIncreaseDecimalDirective, SpreadsheetDecreaseDecimalDirective, SpreadsheetHorizontalTextAlignDirective, SpreadsheetVerticalTextAlignDirective], exports: [SpreadsheetComponent, CustomMessagesComponent, SpreadsheetBoldDirective, SpreadsheetItalicDirective, SpreadsheetUnderlineDirective, SpreadsheetLoadFileComponent, SpreadsheetSaveFileDirective, SpreadsheetFormatDirective, SpreadsheetUndoDirective, SpreadsheetRedoDirective, SpreadsheetFontFamilyComponent, SpreadsheetFontSizeComponent, SpreadsheetBackColorComponent, SpreadsheetForeColorComponent, SpreadsheetGridLinesDirective, SpreadsheetAddColumnLeftButtonDirective, SpreadsheetAddColumnRightButtonDirective, SpreadsheetAddRowAboveButtonDirective, SpreadsheetAddRowBelowButtonDirective, SpreadsheetDeleteColumnButtonDirective, SpreadsheetDeleteRowButtonDirective, SpreadsheetTextAlignDirective, SpreadsheetTextWrapDirective, SpreadsheetMergeDirective, SpreadsheetInsertLinkDirective, SpreadsheetIncreaseFontSizeDirective, SpreadsheetDecreaseFontSizeDirective, SpreadsheetIncreaseDecimalDirective, SpreadsheetDecreaseDecimalDirective, SpreadsheetHorizontalTextAlignDirective, SpreadsheetVerticalTextAlignDirective] });
+SpreadsheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [SpreadsheetComponent, SpreadsheetLoadFileComponent, SpreadsheetFontFamilyComponent, SpreadsheetFontSizeComponent, SpreadsheetBackColorComponent, SpreadsheetForeColorComponent] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [DIRECTIVES],
-                    exports: [EXPORTS],
-                    imports: [
-                        CommonModule,
-                        ButtonsModule,
-                        ComboBoxModule,
-                        DropDownListModule,
-                        DialogModule,
-                        EventsModule,
-                        IconsModule,
-                        IntlModule,
-                        MenusModule,
-                        PopupModule,
-                        TabStripModule,
-                        ToolBarModule,
-                        InputsModule,
-                        WatermarkModule,
-                        LabelModule
-                    ]
+                    exports: [...KENDO_SPREADSHEET],
+                    imports: [...KENDO_SPREADSHEET],
+                    providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService]
                 }]
         }] });