@progress/kendo-angular-spreadsheet 13.6.0-develop.6

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

@@ -0,0 +1,3382 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* 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, ElementRef, ViewChild, InjectionToken, HostListener, ViewContainerRef, NgModule } from '@angular/core';
+import { validatePackage } from '@progress/kendo-licensing';
+import { SpreadsheetWidget } from '@progress/kendo-spreadsheet-common';
+import * as i1$5 from '@progress/kendo-angular-intl';
+import { localeData, IntlModule } from '@progress/kendo-angular-intl';
+import { formulaFxIcon, trashIcon, copyIcon, pencilIcon, 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, plusIcon, menuIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, eyeIcon } from '@progress/kendo-svg-icons';
+import { Subject, Subscription } from 'rxjs';
+import * as i1 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 { isPresent, hasObservers, isDocumentAvailable, shouldShowValidationUI, EventsModule, WatermarkModule } from '@progress/kendo-angular-common';
+import * as i1$1 from '@progress/kendo-angular-popup';
+import { PopupService, PopupModule } from '@progress/kendo-angular-popup';
+import * as i6 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
+import * as i7 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { take, map } from 'rxjs/operators';
+import * as i5$2 from '@progress/kendo-angular-menu';
+import { MenuModule } from '@progress/kendo-angular-menu';
+import * as i1$2 from '@progress/kendo-angular-toolbar';
+import { ToolBarToolComponent, ToolBarComponent, ToolBarModule } from '@progress/kendo-angular-toolbar';
+import * as i4 from '@progress/kendo-angular-buttons';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import * as i1$4 from '@progress/kendo-angular-dialog';
+import { DialogContentBase, DialogModule } from '@progress/kendo-angular-dialog';
+import * as i1$3 from '@progress/kendo-angular-dropdowns';
+import { DropDownListComponent, ComboBoxModule, DropDownListModule } from '@progress/kendo-angular-dropdowns';
+import * as i5 from '@progress/kendo-angular-inputs';
+import { InputsModule } from '@progress/kendo-angular-inputs';
+import * as i5$1 from '@progress/kendo-angular-layout';
+import { TabStripModule } from '@progress/kendo-angular-layout';
+import { saveAs } from '@progress/kendo-file-saver';
+import { Workbook } from '@progress/kendo-ooxml';
+import { LabelModule } from '@progress/kendo-angular-label';
+
+/**
+ * @hidden
+ */
+const packageMetadata = {
+    name: '@progress/kendo-angular-spreadsheet',
+    productName: 'Kendo UI for Angular',
+    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
+    publishDate: 1695882759,
+    version: '13.6.0-develop.6',
+    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',
+};
+
+let spreadsheetCounter = 0;
+/**
+ * @hidden
+ */
+class SpreadsheetService {
+    constructor() {
+        this.sheetsChanged = new Subject();
+        this.activeSheetChanged = new Subject();
+        spreadsheetCounter++;
+    }
+    set currentActiveSheet(value) {
+        this._currentActiveSheet = value;
+    }
+    get currentActiveSheet() {
+        return this._currentActiveSheet;
+    }
+    get activeSheet() {
+        return this.spreadsheet.activeSheet()?.name();
+    }
+    get formulaListId() {
+        return `k-spreadsheet-${spreadsheetCounter}-formula-list`;
+    }
+    notifySheetsChange(actionType, sheetInfo) {
+        const sheets = this.spreadsheet.sheets();
+        this.sheetsChanged.next({ sheets, sheet: sheetInfo, actionType });
+    }
+}
+SpreadsheetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SpreadsheetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+/**
+ * @hidden
+ */
+class SpreadsheetToolsService {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.stateChange = new EventEmitter();
+        this.toolsFunctions = [
+            'bold',
+            'italic',
+            'underline',
+            'fontFamily',
+            'fontSize',
+            'color',
+            'background',
+            'textAlign',
+            'verticalAlign',
+            'wrap',
+            'gridLines',
+            'format'
+        ];
+        this._toolsState = {};
+        this.updateTools = (e) => {
+            this.ngZone.run(() => {
+                const state = {};
+                this.toolsFunctions.forEach(tool => {
+                    if (typeof e.range[tool] === 'function') {
+                        state[tool] = e.range[tool]();
+                    }
+                    else if (tool === 'gridLines') {
+                        state[tool] = e.range.sheet().showGridLines();
+                    }
+                });
+                if (this.toolsFunctions.some(k => state[k] !== this.toolsState[k])) {
+                    this.toolsState = state;
+                    this.stateChange.emit(state);
+                }
+            });
+        };
+    }
+    set toolsState(state) {
+        this._toolsState = state;
+    }
+    get toolsState() {
+        return this._toolsState;
+    }
+}
+SpreadsheetToolsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetToolsService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+SpreadsheetToolsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetToolsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetToolsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { stateChange: [{
+                type: Output
+            }] } });
+
+/**
+ * @hidden
+ */
+class SpreadsheetLocalizationService extends LocalizationService {
+    constructor(prefix, messageService, _rtl) {
+        super(prefix, messageService, _rtl);
+    }
+}
+SpreadsheetLocalizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+SpreadsheetLocalizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetLocalizationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetLocalizationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [L10N_PREFIX]
+                }] }, { type: i1.MessageService, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [RTL]
+                }] }]; } });
+
+/**
+ * @hidden
+ */
+const mapToSheetDescriptor = (sheetsArray) => {
+    return sheetsArray.map((sheet) => {
+        return {
+            activeCell: sheet.activeCell(),
+            columns: sheet._columns,
+            defaultCellStyle: sheet._defaultCellStyle,
+            drawings: sheet._drawings,
+            frozenColumns: sheet.frozenColumns,
+            frozenRows: sheet.frozenRows,
+            hyperlinks: sheet._hyperlinks,
+            mergedCells: sheet.mergedCells,
+            name: sheet.name(),
+            rows: sheet._rows,
+            selection: sheet.selection(),
+            showGridLines: sheet.showGridLines
+        };
+    });
+};
+
+/**
+ * @hidden
+ */
+class FormulaListComponent {
+    constructor(element, spreadsheetService) {
+        this.element = element;
+        this.spreadsheetService = spreadsheetService;
+        this.id = this.spreadsheetService.formulaListId;
+        this.data = [];
+        this.formulaFxIcon = formulaFxIcon;
+        this.handleMouseDown = (ev) => {
+            ev.preventDefault();
+        };
+    }
+}
+FormulaListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormulaListComponent, deps: [{ token: i0.ElementRef }, { token: SpreadsheetService }], target: i0.ɵɵFactoryTarget.Component });
+FormulaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FormulaListComponent, selector: "kendo-spreadsheet-formula-list", inputs: { 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"
+            [kendoEventsOutsideAngular]="{mousedown: handleMouseDown}">
+                <li *ngFor="let item of data"
+                    (click)="itemClick(item.text)"
+                    class="k-list-item"
+                    role="menuitem">
+                    <kendo-icon-wrapper
+                        [svgIcon]="formulaFxIcon"
+                        name="formula-fx"
+                    ></kendo-icon-wrapper>
+                    <span className="k-list-item-text">{{item.text}}</span>
+                </li>
+        </ul>
+    `, isInline: true, components: [{ type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormulaListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-spreadsheet-formula-list',
+                    template: `
+        <ul #ulRef
+            class="k-spreadsheet-formula-list k-list-ul k-list-md k-group k-reset"
+            role="menu"
+            [kendoEventsOutsideAngular]="{mousedown: handleMouseDown}">
+                <li *ngFor="let item of data"
+                    (click)="itemClick(item.text)"
+                    class="k-list-item"
+                    role="menuitem">
+                    <kendo-icon-wrapper
+                        [svgIcon]="formulaFxIcon"
+                        name="formula-fx"
+                    ></kendo-icon-wrapper>
+                    <span className="k-list-item-text">{{item.text}}</span>
+                </li>
+        </ul>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SpreadsheetService }]; }, propDecorators: { id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], data: [{
+                type: Input
+            }], itemClick: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class FormulaInputDirective {
+    constructor(element, popupService, spreadsheetService) {
+        this.element = element;
+        this.popupService = popupService;
+        this.spreadsheetService = spreadsheetService;
+        this.hostClasses = true;
+        this.ariaHasPopup = 'menu';
+        this.ariaExpanded = null;
+        this.focusedItem = () => this.list?.element.nativeElement.querySelector('.k-focus');
+        this.unfocus = () => {
+            const focused = this.focusedItem();
+            if (focused) {
+                focused.classList.remove('k-focus');
+            }
+        };
+        this.focusNext = (dir) => {
+            const element = this.list?.element.nativeElement.firstElementChild;
+            const items = Array.from((element && element.children) || []);
+            const focused = this.focusedItem();
+            let next;
+            if (focused) {
+                const index = items.indexOf(focused);
+                focused.classList.remove('k-focus');
+                next = items[index + dir] ? items[index + dir] : (dir === 1 ? items[0] : items[items.length - 1]);
+            }
+            else {
+                next = (dir === 1 ? items[0] : items[items.length - 1]);
+            }
+            if (next) {
+                next.classList.add('k-focus');
+            }
+        };
+    }
+    get ariaControls() {
+        return this.ariaExpanded ? this.spreadsheetService.formulaListId : null;
+    }
+    get listElement() {
+        return this.list?.element.nativeElement.firstElementChild;
+    }
+    get current() {
+        return {
+            element: this.element.nativeElement,
+            list: {
+                element: this.list?.element.nativeElement,
+                data: (d) => {
+                    if (d) {
+                        this.data = d;
+                        this.list && (this.list.data = d);
+                    }
+                    else {
+                        return this.data;
+                    }
+                },
+                itemClick: (handler) => {
+                    this.handler = handler;
+                },
+                value: () => { return {}; },
+                focus: () => {
+                    const items = Array.from(this.listElement?.children || []);
+                    return items.indexOf(this.focusedItem());
+                },
+                focusNext: () => this.focusNext(1),
+                focusPrev: () => this.focusNext(-1),
+                focusFirst: () => {
+                    const list = this.listElement;
+                    if (list && list.children.item(0)) {
+                        this.unfocus();
+                        list.children.item(0).classList.add('k-focus');
+                    }
+                },
+                focusLast: () => {
+                    const list = this.listElement;
+                    if (list && list.children.length) {
+                        this.unfocus();
+                        list.children.item(list.children.length - 1).classList.add('k-focus');
+                    }
+                },
+            },
+            popup: {
+                open: () => {
+                    this.popupRef && this.popupRef.close();
+                    this.popupRef = null;
+                    this.popupRef = this.popupService.open({
+                        anchor: this.element,
+                        content: FormulaListComponent,
+                        animate: { direction: 'down', duration: 100 }
+                    });
+                    const list = this.popupRef.content.instance;
+                    this.list = list;
+                    list.data = this.data;
+                    list.itemClick = this.handler;
+                    this.ariaExpanded = true;
+                },
+                close: () => {
+                    this.popupRef && this.popupRef.close();
+                    this.popupRef = null;
+                    this.ariaExpanded = null;
+                },
+                position: () => {
+                    // contentKey++;
+                },
+                visible: () => {
+                    return this.popupRef;
+                }
+            }
+        };
+    }
+}
+FormulaInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormulaInputDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.PopupService }, { token: SpreadsheetService }], target: i0.ɵɵFactoryTarget.Directive });
+FormulaInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]", host: { properties: { "class.k-spreadsheet-formula-input": "this.hostClasses", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-controls": "this.ariaControls" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormulaInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoSpreadsheetFormulaInput]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.PopupService }, { type: SpreadsheetService }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-spreadsheet-formula-input']
+            }], ariaHasPopup: [{
+                type: HostBinding,
+                args: ['attr.aria-haspopup']
+            }], ariaExpanded: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], ariaControls: [{
+                type: HostBinding,
+                args: ['attr.aria-controls']
+            }] } });
+
+/**
+ * @hidden
+ */
+const getSheetActions = (index, items) => {
+    return [{
+            text: 'Delete',
+            icon: 'trash',
+            svgIcon: trashIcon,
+            commandName: 'delete',
+            dialogButton: 'dialogDelete',
+            disabled: items.length === 1
+        },
+        {
+            text: 'Duplicate',
+            icon: 'copy',
+            svgIcon: copyIcon,
+            commandName: 'copy'
+        },
+        {
+            text: 'Rename',
+            icon: 'pencil',
+            svgIcon: pencilIcon,
+            commandName: 'rename',
+            dialogButton: 'dialogRename'
+        },
+        {
+            text: 'Move Right',
+            icon: 'arrow-right',
+            svgIcon: arrowRightIcon,
+            commandName: 'move',
+            disabled: index === items.length - 1
+        },
+        {
+            text: 'Move Left',
+            icon: 'arrow-left',
+            svgIcon: arrowLeftIcon,
+            commandName: 'move',
+            disabled: index === 0
+        }];
+};
+
+/**
+ * @hidden
+ */
+const commandIcons = {
+    alignCenter: 'align-center',
+    alignJustify: 'align-justify',
+    alignLeft: 'align-left',
+    alignRight: 'align-right',
+    alignTop: 'align-top',
+    alignMiddle: 'align-middle',
+    alignBottom: 'align-bottom',
+    align: 'align-left',
+    background: 'droplet',
+    bold: 'bold',
+    color: 'foreground-color',
+    italic: 'italic',
+    redo: 'arrow-rotate-cw',
+    underline: 'underline',
+    undo: 'arrow-rotate-ccw',
+    wrap: 'text-wrap',
+    addColumnLeft: 'table-column-insert-left',
+    addColumnRight: 'table-column-insert-right',
+    addRowAbove: 'table-row-insert-above',
+    addRowBelow: 'table-row-insert-below',
+    deleteRow: 'table-row-delete',
+    deleteColumn: 'table-column-delete',
+    gridLines: 'borders-none',
+    folderOpen: 'folder-open',
+    download: 'download',
+    format: 'custom-format',
+    fontSize: 'font-size',
+    fontFamily: 'font-family'
+};
+/**
+ * @hidden
+ */
+const commandSVGIcons = {
+    alignCenter: alignCenterIcon,
+    alignJustify: alignJustifyIcon,
+    alignLeft: alignLeftIcon,
+    alignRight: alignRightIcon,
+    alignTop: alignTopIcon,
+    alignMiddle: alignMiddleIcon,
+    alignBottom: alignBottomIcon,
+    align: alignLeftIcon,
+    background: dropletIcon,
+    bold: boldIcon,
+    color: foregroundColorIcon,
+    italic: italicIcon,
+    redo: arrowRotateCwIcon,
+    underline: underlineIcon,
+    undo: arrowRotateCcwIcon,
+    wrap: textWrapIcon,
+    addColumnLeft: tableColumnInsertLeftIcon,
+    addColumnRight: tableColumnInsertRightIcon,
+    addRowAbove: tableRowInsertAboveIcon,
+    addRowBelow: tableRowInsertBelowIcon,
+    deleteRow: tableRowDeleteIcon,
+    deleteColumn: tableColumnDeleteIcon,
+    gridLines: bordersNoneIcon,
+    folderOpen: folderOpenIcon,
+    download: downloadIcon,
+    format: customFormatIcon,
+    fontSize: fontSizeIcon,
+    fontFamily: fontFamilyIcon
+};
+
+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.fromFile(file);
+                e.target.value = null;
+            }
+        };
+    }
+    /**
+     * @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: "13.3.12", ngImport: i0, type: SpreadsheetLoadFileComponent, deps: [{ token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+SpreadsheetLoadFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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, components: [{ type: i4.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"] }, { type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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>
+    `
+                }]
+        }], 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']
+            }] } });
+
+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: 'align-left', svgIcon: commandSVGIcons.alignLeft, textKey: 'Align Left', commandName: 'textAlign', value: 'left', cssClass: '' },
+    { icon: 'align-center', svgIcon: commandSVGIcons.alignCenter, textKey: 'Align Center', commandName: 'textAlign', value: 'center', cssClass: '' },
+    { icon: 'align-right', svgIcon: commandSVGIcons.alignRight, textKey: 'Align Right', commandName: 'textAlign', value: 'right', cssClass: '' },
+    { icon: 'align-justify', svgIcon: commandSVGIcons.alignJustify, textKey: 'Align Justify', commandName: 'textAlign', value: 'justify', cssClass: '' },
+    { icon: 'align-top', svgIcon: commandSVGIcons.alignTop, textKey: 'Align Top', commandName: 'verticalAlign', value: 'top', cssClass: '' },
+    { icon: 'align-middle', svgIcon: commandSVGIcons.alignMiddle, textKey: 'Align Middle', commandName: 'verticalAlign', value: 'center', cssClass: '' },
+    { icon: 'align-bottom', svgIcon: commandSVGIcons.alignBottom, textKey: 'Align Bottom', commandName: 'verticalAlign', value: 'bottom', cssClass: '' }
+];
+/**
+ * @hidden
+ */
+const MY_TOKEN = new InjectionToken('COMMAND_TOKEN');
+
+/**
+ * @hidden
+ */
+function outerWidth(element) {
+    let width = element.offsetWidth;
+    const style = getComputedStyle(element);
+    width += parseFloat(style.marginLeft) || 0 + parseFloat(style.marginRight) || 0;
+    return width;
+}
+
+/**
+ * @hidden
+ */
+class DropDownListBase {
+    constructor() {
+        this.display = 'inline-flex';
+        this.fillMode = 'flat';
+        this.valueChange = new EventEmitter();
+    }
+    onValueChange(value) {
+        this.valueChange.emit(value);
+    }
+    focus() {
+        this.dropDownList.focus();
+    }
+}
+DropDownListBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropDownListBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DropDownListBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DropDownListBase, selector: "kendo-spreadsheet-dropdownlist-base", inputs: { data: "data", value: "value", title: "title", tabindex: "tabindex" }, outputs: { valueChange: "valueChange" }, host: { properties: { "style.display": "this.display" } }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }, { propertyName: "dropDownList", first: true, predicate: ["element"], descendants: true, read: DropDownListComponent, static: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropDownListBase, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-spreadsheet-dropdownlist-base'
+                }]
+        }], propDecorators: { display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], data: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], element: [{
+                type: ViewChild,
+                args: ['element', { static: true }]
+            }], dropDownList: [{
+                type: ViewChild,
+                args: ['element', { read: DropDownListComponent, static: true }]
+            }] } });
+
+/**
+ * @hidden
+ */
+class FontFamilyDropDownListComponent extends DropDownListBase {
+}
+FontFamilyDropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FontFamilyDropDownListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FontFamilyDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FontFamilyDropDownListComponent, 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"
+            [attr.title]="title">
+            <ng-template kendoDropDownListItemTemplate let-dataItem>
+                <span [ngStyle]="{ 'font-family': dataItem }">
+                    {{ dataItem }}
+                </span>
+            </ng-template>
+        </kendo-dropdownlist>
+    `, isInline: true, components: [{ type: i1$3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "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"] }], directives: [{ type: i1$3.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FontFamilyDropDownListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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"
+            [attr.title]="title">
+            <ng-template kendoDropDownListItemTemplate let-dataItem>
+                <span [ngStyle]="{ 'font-family': dataItem }">
+                    {{ dataItem }}
+                </span>
+            </ng-template>
+        </kendo-dropdownlist>
+    `
+                }]
+        }] });
+
+/**
+ * @hidden
+ */
+class FontSizeDropDownListComponent extends DropDownListBase {
+}
+FontSizeDropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FontSizeDropDownListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FontSizeDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FontSizeDropDownListComponent, 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"></kendo-dropdownlist>
+    `, isInline: true, components: [{ type: i1$3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "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: "13.3.12", ngImport: i0, type: FontSizeDropDownListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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"></kendo-dropdownlist>
+    `
+                }]
+        }] });
+
+/**
+ * @hidden
+ */
+class DialogContentComponent extends DialogContentBase {
+    constructor(dialog) {
+        super(dialog);
+        this.dialog = dialog;
+        this.data = [];
+    }
+    setData(args) {
+        this.data = args.data;
+        this.value = args.value;
+        this.tabindex = args.tabindex;
+        this.componentType = args.componentType;
+    }
+}
+DialogContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogContentComponent, deps: [{ token: i1$4.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
+DialogContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DialogContentComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+        <div 
+            [ngSwitch]="componentType"
+            class="k-d-flex k-align-items-center k-justify-content-center">
+            <kendo-spreadsheet-fontfamily-dropdownlist
+                *ngSwitchCase="'fontFamily'"
+                [data]="data"
+                [(value)]="value"
+                [attr.title]="title"
+                [tabindex]="tabindex"
+                [style.width.em]="13"
+                ></kendo-spreadsheet-fontfamily-dropdownlist>
+            <kendo-spreadsheet-fontsize-dropdownlist
+                *ngSwitchCase="'fontSize'"
+                [data]="data"
+                [(value)]="value"
+                [attr.title]="title"
+                [tabindex]="tabindex"
+                [style.width.em]="13"
+                ></kendo-spreadsheet-fontsize-dropdownlist>
+            <kendo-colorpicker
+                *ngSwitchCase="'color'"
+                [attr.title]="title"
+                [format]="'hex'"
+                [(value)]="value"
+                [tabindex]="tabindex"
+                [clearButton]="false"
+                fillMode="flat"
+            ></kendo-colorpicker>
+            <kendo-colorpicker
+                *ngSwitchCase="'background'"
+                [attr.title]="title"
+                [format]="'hex'"
+                [(value)]="value"
+                [tabindex]="tabindex"
+                [clearButton]="false"
+                fillMode="flat"
+            ></kendo-colorpicker>
+        </div>
+    `, isInline: true, components: [{ type: FontFamilyDropDownListComponent, selector: "kendo-spreadsheet-fontfamily-dropdownlist" }, { type: FontSizeDropDownListComponent, selector: "kendo-spreadsheet-fontsize-dropdownlist" }, { type: i5.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"] }], directives: [{ type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <div 
+            [ngSwitch]="componentType"
+            class="k-d-flex k-align-items-center k-justify-content-center">
+            <kendo-spreadsheet-fontfamily-dropdownlist
+                *ngSwitchCase="'fontFamily'"
+                [data]="data"
+                [(value)]="value"
+                [attr.title]="title"
+                [tabindex]="tabindex"
+                [style.width.em]="13"
+                ></kendo-spreadsheet-fontfamily-dropdownlist>
+            <kendo-spreadsheet-fontsize-dropdownlist
+                *ngSwitchCase="'fontSize'"
+                [data]="data"
+                [(value)]="value"
+                [attr.title]="title"
+                [tabindex]="tabindex"
+                [style.width.em]="13"
+                ></kendo-spreadsheet-fontsize-dropdownlist>
+            <kendo-colorpicker
+                *ngSwitchCase="'color'"
+                [attr.title]="title"
+                [format]="'hex'"
+                [(value)]="value"
+                [tabindex]="tabindex"
+                [clearButton]="false"
+                fillMode="flat"
+            ></kendo-colorpicker>
+            <kendo-colorpicker
+                *ngSwitchCase="'background'"
+                [attr.title]="title"
+                [format]="'hex'"
+                [(value)]="value"
+                [tabindex]="tabindex"
+                [clearButton]="false"
+                fillMode="flat"
+            ></kendo-colorpicker>
+        </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1$4.DialogRef }]; } });
+
+/**
+ * @hidden
+ */
+class SpreadsheetDropDownToolBase extends ToolBarToolComponent {
+    constructor(command, dialogService, localization, spreadsheetService, toolsService, toolbar) {
+        super();
+        this.command = command;
+        this.dialogService = dialogService;
+        this.localization = localization;
+        this.spreadsheetService = spreadsheetService;
+        this.toolsService = toolsService;
+        this.toolbar = toolbar;
+        /**
+         * Fires when the user updates the value of the drop-down list.
+         */
+        this.valueChange = new EventEmitter();
+        this.tabindex = -1;
+        this.svgIcon = commandSVGIcons[this.command];
+        this.icon = commandIcons[this.command];
+        this.value = DEFAULT_FONT_VALUES[this.command];
+        this.data = FONT_DATA[this.command];
+    }
+    ngOnInit() {
+        this.value = this.toolsService.toolsState[this.command];
+        this.subs = this.toolsService.stateChange.subscribe(state => {
+            this.value = state[this.command];
+        });
+    }
+    ngOnDestroy() {
+        if (this.subs) {
+            this.subs.unsubscribe();
+        }
+    }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    /**
+     * @hidden
+     */
+    onValueChange(ev) {
+        if (isPresent(ev)) {
+            if (hasObservers(this.valueChange)) {
+                this.valueChange.emit(ev);
+            }
+            const options = {
+                command: 'PropertyChangeCommand',
+                options: { property: this.command, value: ev || null }
+            };
+            this.spreadsheetService.spreadsheet.executeCommand(options);
+        }
+    }
+    /**
+     * @hidden
+     */
+    get outerWidth() {
+        if (this.element) {
+            return outerWidth(this.element.nativeElement);
+        }
+    }
+    /**
+     * @hidden
+     */
+    openDialog() {
+        const dialogSettings = {
+            appendTo: this.spreadsheetService.dialogContainer,
+            title: this.messageFor(this.command),
+            content: DialogContentComponent,
+            actions: [{
+                    text: this.messageFor('dialogApply'),
+                    themeColor: 'primary'
+                }, {
+                    text: this.messageFor('dialogCancel')
+                }],
+            actionsLayout: 'start',
+            width: 400,
+            autoFocusedElement: '.k-dropdownlist'
+        };
+        this.toolbar.toggle(false);
+        const dialog = this.dialogService.open(dialogSettings);
+        const dialogInstance = dialog.dialog.instance;
+        const dialogContent = dialog.content.instance;
+        dialogInstance.action.pipe(take(1)).subscribe((event) => {
+            if (event.text === this.messageFor('dialogApply')) {
+                const options = {
+                    command: 'PropertyChangeCommand',
+                    options: { property: this.command, value: dialogContent.value || null }
+                };
+                this.spreadsheetService.spreadsheet.executeCommand(options);
+            }
+            this.toolbar.toggle();
+        });
+        dialogInstance.close.pipe(take(1)).subscribe(() => {
+            this.toolbar.toggle();
+        });
+        dialogContent.setData({
+            data: this.data,
+            value: this.value,
+            tabindex: this.tabindex,
+            componentType: this.command,
+            title: this.localization.get(this.command)
+        });
+    }
+    /**
+     * @hidden
+     */
+    focus(e) {
+        this.tabindex = 0;
+        if (e instanceof PointerEvent) {
+            return;
+        }
+        if (this.overflows) {
+            this.popupButton.nativeElement.focus();
+        }
+        else {
+            this.dropDownListRef.focus();
+        }
+    }
+    /**
+     * @hidden
+     */
+    canFocus() {
+        return true;
+    }
+    /**
+     * @hidden
+     */
+    handleKey() {
+        this.tabindex = -1;
+        return false;
+    }
+}
+SpreadsheetDropDownToolBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetDropDownToolBase, deps: [{ token: MY_TOKEN }, { token: i1$4.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: i1$2.ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+SpreadsheetDropDownToolBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetDropDownToolBase, selector: "ng-component", outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "element", first: true, predicate: ["element"], descendants: true, read: ElementRef }, { propertyName: "dropDownListRef", first: true, predicate: ["element"], descendants: true }, { propertyName: "popupButton", first: true, predicate: ["popupButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetDropDownToolBase, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MY_TOKEN]
+                }] }, { type: i1$4.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: "13.3.12", ngImport: i0, type: SpreadsheetFontFamilyComponent, deps: [{ token: i1$4.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+SpreadsheetFontFamilyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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, components: [{ type: FontFamilyDropDownListComponent, selector: "kendo-spreadsheet-fontfamily-dropdownlist" }, { type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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$4.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: "13.3.12", ngImport: i0, type: SpreadsheetFontSizeComponent, deps: [{ token: i1$4.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+SpreadsheetFontSizeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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, components: [{ type: FontSizeDropDownListComponent, selector: "kendo-spreadsheet-fontsize-dropdownlist" }, { type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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$4.DialogService }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: i1$2.ToolBarComponent, decorators: [{
+                    type: Inject,
+                    args: [ToolBarComponent]
+                }] }]; } });
+
+/**
+ * A component which changes the color of the text ([more information](ToDo).
+ * @hidden
+ */
+class SpreadsheetForeColorComponent extends SpreadsheetDropDownToolBase {
+    constructor(dialogService, localization, spreadsheetService, toolsService, toolbar) {
+        super('color', dialogService, localization, spreadsheetService, toolsService, toolbar);
+    }
+}
+SpreadsheetForeColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetForeColorComponent, deps: [{ token: i1$4.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+SpreadsheetForeColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetForeColorComponent, selector: "kendo-spreadsheet-forecolor-tool", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetForeColorComponent) }], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #toolbarTemplate>
+            <kendo-colorpicker
+                #element
+                [attr.title]="messageFor(command)"
+                [format]="'hex'"
+                [(value)]="value"
+                [tabindex]="tabindex"
+                (valueChange)="onValueChange($event)"
+                [clearButton]="false"
+                fillMode="flat"
+                [icon]="icon"
+                [svgIcon]="svgIcon"
+                [preview]="true"></kendo-colorpicker>
+        </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, components: [{ type: i5.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"] }, { type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetForeColorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetForeColorComponent) }],
+                    selector: 'kendo-spreadsheet-forecolor-tool',
+                    template: `
+        <ng-template #toolbarTemplate>
+            <kendo-colorpicker
+                #element
+                [attr.title]="messageFor(command)"
+                [format]="'hex'"
+                [(value)]="value"
+                [tabindex]="tabindex"
+                (valueChange)="onValueChange($event)"
+                [clearButton]="false"
+                fillMode="flat"
+                [icon]="icon"
+                [svgIcon]="svgIcon"
+                [preview]="true"></kendo-colorpicker>
+        </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$4.DialogService }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: i1$2.ToolBarComponent, decorators: [{
+                    type: Inject,
+                    args: [ToolBarComponent]
+                }] }]; } });
+
+/**
+ * A component which changes the background color of the text ([more information](ToDo).
+ * @hidden
+ */
+class SpreadsheetBackColorComponent extends SpreadsheetDropDownToolBase {
+    constructor(dialogService, localization, spreadsheetService, toolsService, toolbar) {
+        super('background', dialogService, localization, spreadsheetService, toolsService, toolbar);
+    }
+}
+SpreadsheetBackColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetBackColorComponent, deps: [{ token: i1$4.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+SpreadsheetBackColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetBackColorComponent, selector: "kendo-spreadsheet-backcolor-tool", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetBackColorComponent) }], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #toolbarTemplate>
+            <kendo-colorpicker
+                #element
+                [attr.title]="messageFor(command)"
+                [format]="'hex'"
+                [(value)]="value"
+                [tabindex]="tabindex"
+                (valueChange)="onValueChange($event)"
+                [clearButton]="false"
+                fillMode="flat"
+                [icon]="icon"
+                [preview]="true"
+                [svgIcon]="svgIcon"></kendo-colorpicker>
+        </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, components: [{ type: i5.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"] }, { type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetBackColorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetBackColorComponent) }],
+                    selector: 'kendo-spreadsheet-backcolor-tool',
+                    template: `
+        <ng-template #toolbarTemplate>
+            <kendo-colorpicker
+                #element
+                [attr.title]="messageFor(command)"
+                [format]="'hex'"
+                [(value)]="value"
+                [tabindex]="tabindex"
+                (valueChange)="onValueChange($event)"
+                [clearButton]="false"
+                fillMode="flat"
+                [icon]="icon"
+                [preview]="true"
+                [svgIcon]="svgIcon"></kendo-colorpicker>
+        </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$4.DialogService }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: i1$2.ToolBarComponent, decorators: [{
+                    type: Inject,
+                    args: [ToolBarComponent]
+                }] }]; } });
+
+/**
+ * @hidden
+ */
+class NameBoxComponent {
+    constructor(ngZone, host) {
+        this.ngZone = ngZone;
+        this.host = host;
+        this.hostClass = true;
+        this.valueNormalizer = (text) => text.pipe(map((content) => ({ name: content })));
+    }
+    keyDownHandler() {
+        const editor = this.spreadsheetWidget.view.nameEditor;
+        if (editor) {
+            const name = this.host.nativeElement.querySelector('.k-input-inner').value;
+            editor.trigger('enter', { value: name });
+        }
+    }
+    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;
+                    });
+                }
+            }
+        };
+    }
+    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: "13.3.12", ngImport: i0, type: NameBoxComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+NameBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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"
+        ></kendo-combobox>
+    `, isInline: true, components: [{ type: i1$3.ComboBoxComponent, selector: "kendo-combobox", inputs: ["showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "iconClass", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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"
+        ></kendo-combobox>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }]; }, 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: "13.3.12", ngImport: i0, type: ActionDialogComponent, deps: [{ token: i1$4.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
+ActionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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'">
+            <div class="k-form-field">
+                <label class="k-label k-form-label">Rename sheet</label>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox
+                        autocomplete="off"
+                        placeholder="Sheet name"
+                        [(value)]="value">
+                    </kendo-textbox>
+                </div>
+            </div>
+        </form>
+    `, isInline: true, components: [{ type: i5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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'">
+            <div class="k-form-field">
+                <label class="k-label k-form-label">Rename sheet</label>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox
+                        autocomplete="off"
+                        placeholder="Sheet name"
+                        [(value)]="value">
+                    </kendo-textbox>
+                </div>
+            </div>
+        </form>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1$4.DialogRef }]; } });
+
+/**
+ * @hidden
+ */
+class SheetsBarComponent {
+    constructor(spreadsheetService, element, renderer, localization, dialogService, ngZone) {
+        this.spreadsheetService = spreadsheetService;
+        this.element = element;
+        this.renderer = renderer;
+        this.localization = localization;
+        this.dialogService = dialogService;
+        this.ngZone = ngZone;
+        this.hostClasses = true;
+        this.plusIcon = plusIcon;
+        this.menuIcon = menuIcon;
+        this.caretAltDownIcon = caretAltDownIcon;
+        this.caretAltLeftIcon = caretAltLeftIcon;
+        this.caretAltRightIcon = caretAltRightIcon;
+        this.selected = false;
+        this.openedDdb = null;
+        this.eyeIcon = eyeIcon;
+        this.onAddClick = () => {
+            if (this.spreadsheetService.spreadsheet) {
+                this.spreadsheetService.spreadsheet.view.sheetsbar.onAddSelect();
+                this.notifySheetsChange();
+            }
+        };
+        this.actionsCallback = {
+            copy: (sheetInfo) => {
+                sheetInfo.copies ? sheetInfo.copies += 1 : sheetInfo.copies = 1;
+                const sheetToCopy = this.spreadsheetService.spreadsheet.sheets().find(s => s.name() === sheetInfo.text);
+                const newName = `${sheetToCopy.name()} (${sheetInfo.copies})`;
+                this.spreadsheetService.spreadsheet.insertSheet({ data: { ...sheetToCopy.toJSON(), name: newName }, index: sheetInfo.index + 1 });
+                this.selectSheet(newName);
+            },
+            move: (sheetInfo, itemText) => {
+                const oldIndex = this.spreadsheetService.spreadsheet.sheets().findIndex(sheet => sheet.name() === sheetInfo.text);
+                const newIndex = itemText === 'Move Right' ? oldIndex + 1 : oldIndex - 1;
+                const sheetsBar = this.spreadsheetService.spreadsheet.view.sheetsbar;
+                sheetsBar.onSheetReorderEnd({ oldIndex, newIndex });
+                this.notifySheetsChange();
+            }
+        };
+    }
+    get activeSheet() {
+        return this.spreadsheetService.spreadsheet?.activeSheet()?.name();
+    }
+    get sheetsMenuList() {
+        return this.sheets?.map(sheet => ({ text: sheet.text, icon: 'eye', svgIcon: this.eyeIcon }));
+    }
+    ngAfterViewInit() {
+        if (!isDocumentAvailable() || !this.element.nativeElement) {
+            return;
+        }
+        const prevBtn = this.element.nativeElement.querySelector('.k-tabstrip-prev');
+        const nextBtn = this.element.nativeElement.querySelector('.k-tabstrip-next');
+        this.renderer.addClass(prevBtn, 'k-order-1');
+        this.renderer.addClass(nextBtn, 'k-order-2');
+    }
+    onTabSelect(ev) {
+        if (ev.title !== this.activeSheet) {
+            this.selectSheet(ev.title);
+        }
+    }
+    onOpen(ddb) {
+        if (isPresent(this.openedDdb) && this.openedDdb !== ddb) {
+            this.openedDdb.toggle(false);
+        }
+        this.openedDdb = ddb;
+    }
+    onClose() {
+        this.openedDdb = null;
+    }
+    onActionClick(dataItem, sheet) {
+        if (dataItem.disabled) {
+            return;
+        }
+        if (dataItem.commandName === 'delete' || dataItem.commandName === 'rename') {
+            this.openDialog(dataItem, sheet);
+        }
+        else {
+            this.actionsCallback[dataItem.commandName](sheet, dataItem.text);
+        }
+    }
+    onMenuItemClick(item) {
+        const sheet = this.sheets.find(s => s.text === item.text);
+        this.selectSheet(sheet.text);
+    }
+    openDialog(dataItem, sheet) {
+        const dialogSettings = {
+            appendTo: this.spreadsheetService.dialogContainer,
+            title: this.localization.get(dataItem.commandName),
+            content: ActionDialogComponent,
+            actions: [{
+                    text: this.localization.get(dataItem.dialogButton),
+                    themeColor: 'primary'
+                }, {
+                    text: this.localization.get('dialogCancel')
+                }],
+            actionsLayout: 'stretched',
+            autoFocusedElement: '.k-textbox .k-input-inner, .k-button-solid-primary'
+        };
+        const dialog = this.dialogService.open(dialogSettings);
+        const dialogInstance = dialog.dialog.instance;
+        const dialogContent = dialog.content.instance;
+        dialogInstance.action.pipe(take(1)).subscribe((event) => {
+            if (event.text === this.localization.get(dataItem.dialogButton)) {
+                const sheetsBar = this.spreadsheetService.spreadsheet.view.sheetsbar;
+                if (sheetsBar) {
+                    dataItem.commandName === 'delete' ? sheetsBar.onSheetRemove(sheet.text) : sheetsBar.onSheetRename(dialogContent.value, this.sheets.indexOf(sheet));
+                    this.notifySheetsChange();
+                }
+            }
+        });
+        dialogContent.setData({
+            value: sheet.text,
+            tabindex: -1,
+            commandName: dataItem.commandName
+        });
+    }
+    selectSheet(sheetName) {
+        const spreadsheetSheet = this.spreadsheetService.spreadsheet.sheets().find(s => s.name() === sheetName);
+        this.spreadsheetService.spreadsheet.activeSheet(spreadsheetSheet);
+        this.spreadsheetService.currentActiveSheet = sheetName;
+        this.spreadsheetService.activeSheetChanged.next(spreadsheetSheet);
+        this.notifySheetsChange();
+    }
+    notifySheetsChange() {
+        this.ngZone.run(() => {
+            const newSheets = this.spreadsheetService.spreadsheet.sheets();
+            const sheetDesc = mapToSheetDescriptor(newSheets);
+            console.log(newSheets, 'new');
+            this.sheets = sheetDesc.map((item, index, items) => ({
+                ...item,
+                inEdit: false,
+                first: index === 0,
+                last: index === items.length - 1,
+                text: item.name,
+                active: (item.name === this.activeSheet) || items.length === 1,
+                index,
+                sheetActions: getSheetActions(index, items)
+            }));
+        });
+    }
+}
+SheetsBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SheetsBarComponent, deps: [{ token: SpreadsheetService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SpreadsheetLocalizationService }, { token: i1$4.DialogService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: { sheets: "sheets", sheetDescriptors: "sheetDescriptors" }, host: { properties: { "class.k-spreadsheet-sheets-bar": "this.hostClasses" } }, ngImport: i0, template: `
+        <button kendoButton
+            title="Add new sheet"
+            type="button"
+            fillMode="flat"
+            class="k-spreadsheet-sheet-add"
+            icon="plus"
+            [svgIcon]="plusIcon"
+            [kendoEventsOutsideAngular]="{click: onAddClick}">
+        </button>
+        <kendo-dropdownbutton #menuDdb
+            fillMode="flat"
+            buttonClass="k-spreadsheet-sheets-menu"
+            icon="menu"
+            [svgIcon]="menuIcon"
+            [data]="sheetsMenuList"
+            (itemClick)="onMenuItemClick($event)"
+            (open)="onOpen(menuDdb)">
+        </kendo-dropdownbutton>
+        <kendo-tabstrip
+            [tabPosition]="'bottom'"
+            [showContentArea]="false"
+            [scrollable]="{prevButtonIcon: 'caret-alt-left', prevSVGButtonIcon: caretAltLeftIcon, nextButtonIcon: 'caret-alt-right', nextSVGButtonIcon: caretAltRightIcon}"
+            class="k-spreadsheet-sheets k-overflow-hidden"
+            (tabSelect)="onTabSelect($event)"
+            [keepTabContent]="true">
+            <ng-container *ngFor="let sheet of sheets">
+                <kendo-tabstrip-tab
+                [title]="sheet.text"
+                [selected]="sheet.text === activeSheet">
+                    <ng-template kendoTabTemplate>
+                        <span class="k-link">{{sheet.text}}</span>
+                        <kendo-dropdownbutton #sheetDdb
+                            fillMode="flat"
+                            icon="caret-alt-down"
+                            [svgIcon]="caretAltDownIcon"
+                            buttonClass="k-menu-button"
+                            [data]="sheet.sheetActions"
+                            [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
+                            (open)="onOpen(sheetDdb)"
+                            (close)="onClose()"
+                            (click)="$event.stopPropagation()"
+                            (itemClick)="onActionClick($event, sheet)">
+                        </kendo-dropdownbutton>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+            </ng-container>
+        </kendo-tabstrip>
+    `, isInline: true, components: [{ type: i4.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"] }, { type: i4.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i5$1.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i5$1.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }], directives: [{ type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.TabTemplateDirective, selector: "[kendoTabTemplate]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SheetsBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[kendoSpreadsheetSheetsBar]',
+                    template: `
+        <button kendoButton
+            title="Add new sheet"
+            type="button"
+            fillMode="flat"
+            class="k-spreadsheet-sheet-add"
+            icon="plus"
+            [svgIcon]="plusIcon"
+            [kendoEventsOutsideAngular]="{click: onAddClick}">
+        </button>
+        <kendo-dropdownbutton #menuDdb
+            fillMode="flat"
+            buttonClass="k-spreadsheet-sheets-menu"
+            icon="menu"
+            [svgIcon]="menuIcon"
+            [data]="sheetsMenuList"
+            (itemClick)="onMenuItemClick($event)"
+            (open)="onOpen(menuDdb)">
+        </kendo-dropdownbutton>
+        <kendo-tabstrip
+            [tabPosition]="'bottom'"
+            [showContentArea]="false"
+            [scrollable]="{prevButtonIcon: 'caret-alt-left', prevSVGButtonIcon: caretAltLeftIcon, nextButtonIcon: 'caret-alt-right', nextSVGButtonIcon: caretAltRightIcon}"
+            class="k-spreadsheet-sheets k-overflow-hidden"
+            (tabSelect)="onTabSelect($event)"
+            [keepTabContent]="true">
+            <ng-container *ngFor="let sheet of sheets">
+                <kendo-tabstrip-tab
+                [title]="sheet.text"
+                [selected]="sheet.text === activeSheet">
+                    <ng-template kendoTabTemplate>
+                        <span class="k-link">{{sheet.text}}</span>
+                        <kendo-dropdownbutton #sheetDdb
+                            fillMode="flat"
+                            icon="caret-alt-down"
+                            [svgIcon]="caretAltDownIcon"
+                            buttonClass="k-menu-button"
+                            [data]="sheet.sheetActions"
+                            [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
+                            (open)="onOpen(sheetDdb)"
+                            (close)="onClose()"
+                            (click)="$event.stopPropagation()"
+                            (itemClick)="onActionClick($event, sheet)">
+                        </kendo-dropdownbutton>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+            </ng-container>
+        </kendo-tabstrip>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: SpreadsheetService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SpreadsheetLocalizationService }, { type: i1$4.DialogService }, { type: i0.NgZone }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-spreadsheet-sheets-bar']
+            }], sheets: [{
+                type: Input
+            }], sheetDescriptors: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class MessagesDirective extends ComponentMessages {
+}
+MessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessagesDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+MessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: MessagesDirective, selector: "[kendoSpreadsheetMessages]", inputs: { home: "home", file: "file", insert: "insert", 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", dialogApply: "dialogApply", dialogCancel: "dialogCancel", dialogDelete: "dialogDelete", dialogRename: "dialogRename", delete: "delete", rename: "rename" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoSpreadsheetMessages]'
+                }]
+        }], propDecorators: { home: [{
+                type: Input
+            }], file: [{
+                type: Input
+            }], insert: [{
+                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
+            }], dialogApply: [{
+                type: Input
+            }], dialogCancel: [{
+                type: Input
+            }], dialogDelete: [{
+                type: Input
+            }], dialogRename: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }], rename: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class LocalizedMessagesDirective extends MessagesDirective {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+}
+LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LocalizedMessagesDirective, selector: "[kendoSpreadsheetLocalizedMessages]", providers: [{
+            provide: MessagesDirective,
+            useExisting: forwardRef(() => LocalizedMessagesDirective)
+        }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [{
+                            provide: MessagesDirective,
+                            useExisting: forwardRef(() => LocalizedMessagesDirective)
+                        }],
+                    selector: '[kendoSpreadsheetLocalizedMessages]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
+/**
+ * @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: "13.3.12", ngImport: i0, type: MainMenuDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+MainMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: MainMenuDirective, selector: "[kendoSpreadsheetMenu]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MainMenuDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[kendoSpreadsheetMenu]' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
+
+/**
+ * @hidden
+ */
+class SpreadsheetSaveFileDirective {
+    constructor(button, localization, spreadsheetService) {
+        this.button = button;
+        this.localization = localization;
+        this.spreadsheetService = spreadsheetService;
+        this.subs = new Subscription();
+    }
+    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
+                });
+            }
+        }));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+}
+SpreadsheetSaveFileDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetSaveFileDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetSaveFileDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetSaveFileDirective, selector: "[kendoSpreadsheetSaveFile]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetSaveFileDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[kendoSpreadsheetSaveFile]' }]
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }]; } });
+
+/**
+ * @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();
+        // this.toolsService.zone.runOutsideAngular(() => {
+        // setTimeout(() => {
+        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]);
+        }));
+        // this.toolsService.zone.run(() => {
+        //     this.toolsService.needsCheck.next();
+        // });
+        // });
+        //});
+    }
+    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();
+    }
+    clickHandler() { }
+    pointerdownHandler(_event) { }
+}
+SpreadsheetCommandBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetCommandBaseDirective, deps: [{ token: MY_TOKEN }, { token: i1$2.ToolBarButtonComponent }, { token: i1.LocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetCommandBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetCommandBaseDirective, selector: "[kendoSpreadsheetCommandBase]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetCommandBaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoSpreadsheetCommandBase]'
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MY_TOKEN]
+                }] }, { type: i1$2.ToolBarButtonComponent }, { type: i1.LocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
+
+/**
+ * @hidden
+ */
+class SpreadsheetCommandButton extends SpreadsheetCommandBaseDirective {
+    constructor(command, button, localization, spreadsheetService, toolsService, commandOptions) {
+        super(command, button, localization, spreadsheetService, toolsService);
+        this.command = command;
+        this.button = button;
+        this.localization = localization;
+        this.spreadsheetService = spreadsheetService;
+        this.toolsService = toolsService;
+        this.commandOptions = commandOptions;
+    }
+    clickHandler() {
+        if (this.commandOptions.command === 'PropertyChangeCommand') {
+            this.commandOptions.options.value = !this.toolsService.toolsState[this.command];
+        }
+        this.spreadsheetService.spreadsheet.executeCommand(this.commandOptions);
+    }
+}
+
+/**
+ * @hidden
+ */
+class SpreadsheetUndoDirective extends SpreadsheetCommandButton {
+    constructor(button, localization, spreadsheetService, toolsService) {
+        super('undo', button, localization, spreadsheetService, toolsService, {
+            options: { property: 'undo' }
+        });
+    }
+    clickHandler() {
+        this.spreadsheetService.spreadsheet.workbook.undoRedoStack['undo']();
+    }
+}
+SpreadsheetUndoDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetUndoDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetUndoDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetUndoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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' }
+        });
+    }
+    clickHandler() {
+        this.spreadsheetService.spreadsheet.workbook.undoRedoStack['redo']();
+    }
+}
+SpreadsheetRedoDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetRedoDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetRedoDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetRedoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetRedoDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetRedo]'
+                }]
+        }], 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
+            }
+        });
+    }
+}
+SpreadsheetBoldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetBoldDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetBoldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetBoldDirective, selector: "kendo-toolbar-button[kendoSpreadsheetBold]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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
+            }
+        });
+    }
+}
+SpreadsheetItalicDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetItalicDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetItalicDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetItalicDirective, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetItalicDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetItalic]'
+                }]
+        }], 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: "13.3.12", ngImport: i0, type: SpreadsheetUnderlineDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetUnderlineDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetUnderlineDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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 }]; } });
+
+/**
+ * @hidden
+ */
+class SpreadsheetTextAlignDirective {
+    constructor(host, localization, spreadsheetService, toolsService) {
+        this.host = host;
+        this.spreadsheetService = spreadsheetService;
+        this.toolsService = toolsService;
+        this.commandName = 'align';
+        this.subs = new Subscription();
+        host.svgIcon = commandSVGIcons[this.commandName];
+        host.icon = commandIcons[this.commandName];
+        host.arrowIcon = true;
+        host.fillMode = 'flat';
+        host.data = [...ALIGNS];
+        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);
+    }
+}
+SpreadsheetTextAlignDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetTextAlignDirective, deps: [{ token: i1$2.ToolBarDropDownButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetTextAlignDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetTextAlignDirective, selector: "[kendoSpreadsheetTextAlign]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetTextAlignDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoSpreadsheetTextAlign]',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarDropDownButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
+
+/**
+ * @hidden
+ */
+class SpreadsheetTextWrapDirective extends SpreadsheetCommandButton {
+    constructor(button, localization, spreadsheetService, toolsService) {
+        super('wrap', button, localization, spreadsheetService, toolsService, {
+            command: 'TextWrapCommand',
+            options: { property: 'wrap',
+                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: "13.3.12", ngImport: i0, type: SpreadsheetTextWrapDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetTextWrapDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetTextWrapDirective, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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 SpreadsheetFormatDirective {
+    constructor(host, localization, spreadsheetService, toolsService) {
+        this.host = host;
+        this.spreadsheetService = spreadsheetService;
+        this.toolsService = toolsService;
+        this.data = FORMATS;
+        this.commandName = 'format';
+        this.subs = new Subscription();
+        /**
+         * @hidden
+         */
+        this.onItemClick = (item) => {
+            const value = item.value || null;
+            const options = {
+                command: 'PropertyChangeCommand', options: { property: this.commandName, value }
+            };
+            this.spreadsheetService.spreadsheet.executeCommand(options);
+        };
+        host.svgIcon = commandSVGIcons[this.commandName];
+        host.icon = commandIcons[this.commandName];
+        host.arrowIcon = true;
+        host.fillMode = 'flat';
+        host.data = this.data;
+        this.subs.add(host.itemClick.subscribe((e) => this.onItemClick(e)));
+        host.title = localization.get(this.commandName);
+    }
+    ngOnInit() {
+        this.subs.add(this.toolsService.stateChange.subscribe(state => this.host.data.forEach(i => i.cssClass = i.value === state[this.commandName] ? 'k-selected' : '')));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+}
+SpreadsheetFormatDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetFormatDirective, deps: [{ token: i1$2.ToolBarDropDownButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetFormatDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetFormatDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoSpreadsheetFormat]',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarDropDownButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
+
+/**
+ * @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: "13.3.12", ngImport: i0, type: SpreadsheetGridLinesDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetGridLinesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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: "13.3.12", ngImport: i0, type: SpreadsheetAddColumnLeftButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetAddColumnLeftButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetAddColumnLeftButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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: "13.3.12", ngImport: i0, type: SpreadsheetAddColumnRightButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetAddColumnRightButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetAddColumnRightButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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 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: "13.3.12", ngImport: i0, type: SpreadsheetAddRowBelowButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetAddRowBelowButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetAddRowBelowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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 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: "13.3.12", ngImport: i0, type: SpreadsheetAddRowAboveButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetAddRowAboveButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetAddRowAboveButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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 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: "13.3.12", ngImport: i0, type: SpreadsheetDeleteColumnButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetDeleteColumnButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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: "13.3.12", ngImport: i0, type: SpreadsheetDeleteRowButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetDeleteRowButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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 }]; } });
+
+/**
+ * Represents the [Kendo UI Spreadsheet component for Angular]({% slug overview_spreadsheet %}).
+ */
+class SpreadsheetComponent {
+    constructor(ngZone, intl, host, localization, spreadsheetService, toolsService, renderer) {
+        this.ngZone = ngZone;
+        this.intl = intl;
+        this.host = host;
+        this.localization = localization;
+        this.spreadsheetService = spreadsheetService;
+        this.toolsService = toolsService;
+        this.renderer = renderer;
+        this.hostClass = true;
+        this.role = 'application';
+        /**
+         * Sets the overflow option of the built-in Toolbar components.
+         * @default false
+         */
+        this.overflow = false;
+        /**
+         * The number of columns in the document.
+         *
+         * @default 50
+         */
+        this.columns = 50;
+        /**
+         * The initial column width in pixels.
+         *
+         * @default 64
+         */
+        this.columnWidth = 100;
+        /**
+         * The height of the header row in pixels.
+         *
+         * @default 20
+         */
+        this.headerHeight = 30;
+        /**
+         * The width of the header column in pixels.
+         *
+         * @default 32
+         */
+        this.headerWidth = 100;
+        /**
+         * The initial row height in pixels.
+         *
+         * @default 20
+         */
+        this.rowHeight = 30;
+        /**
+         * The number of rows in the document.
+         *
+         * @default 200
+         */
+        this.rows = 200;
+        /**
+         * Fired when a value in the Spreadsheet is changed. Exposes the `SpreadsheetWidget` instance and the selected `Range` as event data.
+         */
+        this.change = new EventEmitter();
+        /**
+         * Fired when the selected range format is changed from the UI. Exposes the `SpreadsheetWidget` instance and the selected `Range` as event data.
+         */
+        this.formatChange = new EventEmitter();
+        /**
+         * Fired when the selection is changed by the end user. Exposes the `SpreadsheetWidget` instance and the selected `Range` as event data.
+         */
+        this.selectionChange = new EventEmitter();
+        /**
+         * Fired when the end user clicks the Export to Excel toolbar button.
+         * The event is preventable and exposes the `Workbook` object, a `preventDefault` method
+         * (if invoked, the generated file will not be saved), and the SpreadsheetWidget instance.
+         */
+        this.excelExport = new EventEmitter();
+        /**
+         * Fired when the end user clicks the Open toolbar button.
+         * The event is preventable and exposes the selected `File` or `Blob`, a `preventDefault` method
+         * (if invoked, the selected file will not be loaded), and the SpreadsheetWidget instance.
+         */
+        this.excelImport = new EventEmitter();
+        /**
+         * Fired when the active sheet is about to change.
+         * The event exposes the new active `Sheet` and the SpreadsheetWidget instance.
+         */
+        this.activeSheetChange = new EventEmitter();
+        this.formulaFxIcon = formulaFxIcon;
+        this.folderOpenIcon = folderOpenIcon;
+        this.downloadIcon = downloadIcon;
+        /**
+         * @hidden
+         */
+        this.showLicenseWatermark = false;
+        this.onChange = (e) => hasObservers(this.change) && this.change.emit(e);
+        this.onSelectionChange = (e) => hasObservers(this.selectionChange) && this.selectionChange.emit(e);
+        this.onChangeFormat = (e) => hasObservers(this.formatChange) && this.formatChange.emit(e);
+        this.onExcelExport = (e) => hasObservers(this.excelExport) && this.excelExport.emit(e);
+        this.onExcelImport = (e) => hasObservers(this.excelImport) && this.excelImport.emit(e);
+        this.onActiveSheetChanged = (sheet) => {
+            const eventArgs = { sender: this.spreadsheetService.spreadsheet, sheet };
+            hasObservers(this.activeSheetChange) && this.activeSheetChange.emit(eventArgs);
+        };
+        this.updateState = (e) => {
+            this.toolsService.updateTools(e);
+            if (e.reason?.sheetSelection) {
+                this.sheets = mapToSheetDescriptor(this.spreadsheetService.spreadsheet.sheets());
+            }
+        };
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
+        ngZone.onStable.pipe(take(1)).subscribe(() => {
+            if (!this.menuItems) {
+                this._menuItems = [{
+                        id: 'file',
+                        text: this.messageFor('file')
+                    }, {
+                        id: 'home',
+                        text: this.messageFor('home'),
+                        active: true,
+                        cssClass: 'k-active'
+                    }, {
+                        id: 'insert',
+                        text: this.messageFor('insert')
+                    }];
+            }
+            this.selectedMenuItem = this.menuItems[1];
+        });
+    }
+    /**
+     * The menu items configuration.
+     */
+    set menuItems(items) {
+        this._menuItems = [];
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            const normalizedItems = items.map(item => ({
+                active: item.active,
+                text: this.messageFor(item.id),
+                cssClass: item.active ? 'k-active' : null,
+                id: item.id
+            }));
+            this._menuItems = normalizedItems;
+            const activeItemIndex = this.menuItems.findIndex(item => item.active);
+            this.selectedMenuItem = this.menuItems[activeItemIndex > -1 ? activeItemIndex : 0];
+        });
+    }
+    get menuItems() {
+        return this._menuItems;
+    }
+    /**
+     * The name of the currently active sheet. Must match one of the sheet names.
+     */
+    set activeSheet(value) {
+        this._activeSheet = value;
+        this.spreadsheetService.spreadsheet?.view?.sheetsbar.onSheetSelect(this.activeSheet);
+    }
+    get activeSheet() {
+        return this._activeSheet || this.spreadsheetService.spreadsheet?.activeSheet()?.name();
+    }
+    /**
+     * An array which defines the document sheets and their content.
+     */
+    set sheets(value) {
+        const items = value.map((item, index, items) => ({
+            ...item,
+            inEdit: false,
+            first: index === 0,
+            last: index === items.length - 1,
+            text: item.name,
+            active: (item.name === this.activeSheet) || items.length === 1,
+            index,
+            sheetActions: getSheetActions(index, items)
+        }));
+        this._sheetsInfo = items;
+    }
+    get sheetsInfo() {
+        return this._sheetsInfo;
+    }
+    get spreadsheetWidget() {
+        return this.spreadsheetService.spreadsheet;
+    }
+    ngAfterViewInit() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            setTimeout(() => {
+                const spreadsheet = this.spreadsheetService.spreadsheet = new SpreadsheetWidget(this.host.nativeElement, this.options);
+                spreadsheet.bind('select', this.onSelectionChange);
+                spreadsheet.bind('change', this.onChange);
+                spreadsheet.bind('changeFormat', this.onChangeFormat);
+                spreadsheet.bind('excelImport', this.onExcelImport);
+                spreadsheet.bind('excelExport', this.onExcelExport);
+                spreadsheet.view.bind('update', this.updateState);
+                const sheet = spreadsheet.activeSheet();
+                if (sheet) {
+                    this.updateState({ range: sheet.range(sheet.activeCell()) });
+                }
+                this.updateActiveSheet(this.activeSheet || spreadsheet?.activeSheet()?.name());
+                if (!this.sheetsInfo) {
+                    this.ngZone.run(() => {
+                        const defaultSheetDescriptors = mapToSheetDescriptor([spreadsheet?.activeSheet()]);
+                        this._sheetsInfo = [{ text: this.spreadsheetService.currentActiveSheet, first: true, last: true, ...defaultSheetDescriptors, sheetActions: getSheetActions(0, defaultSheetDescriptors) }];
+                    });
+                }
+            });
+            this.spreadsheetService.sheetsChanged.subscribe(this.onSheetsChanged.bind(this));
+            this.spreadsheetService.activeSheetChanged.subscribe(this.onActiveSheetChanged.bind(this));
+            this.spreadsheetService.dialogContainer = this.dialogContainer;
+        });
+    }
+    ngOnChanges(changes) {
+        const dynamicOptions = [
+            'columns',
+            'columnWidth',
+            'defaultCellStyle',
+            'excel',
+            'headerHeight',
+            'headerWidth',
+            'images',
+            'names',
+            'rowHeight',
+            'rows'
+        ];
+        const changedDynamicOptions = dynamicOptions.filter(o => isPresent(changes[o] && !changes[o].firstChange));
+        if (this.spreadsheetWidget && changedDynamicOptions.length) {
+            const newOptions = this.spreadsheetWidget.toJSON();
+            changedDynamicOptions.forEach(o => newOptions[o] = changes[o].currentValue);
+            this.spreadsheetWidget.fromJSON(newOptions);
+        }
+    }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    /**
+     * @hidden
+     */
+    onMenuItemSelect(e) {
+        const selectedMenuItem = this.menuItems.find(item => item.text === e.item.text);
+        const previousSelectedItem = this.menuItems.find(item => item.active);
+        if (selectedMenuItem !== previousSelectedItem) {
+            this._menuItems.forEach((item, idx) => {
+                item.active = idx === +e.index;
+                item.cssClass = idx === +e.index ? 'k-active' : null;
+            });
+            this.selectedMenuItem = this.menuItems.find(item => item.active);
+        }
+    }
+    updateActiveSheet(name) {
+        this.ngZone.run(() => this.spreadsheetService.currentActiveSheet = name);
+    }
+    onSheetsChanged(e) {
+        console.log(e, 'sheet ch');
+        this.ngZone.run(() => {
+            this.sheets = mapToSheetDescriptor(e.sheets);
+            this.updateActiveSheet(this.spreadsheetService.activeSheet);
+        });
+    }
+    get options() {
+        return {
+            activeSheet: this.activeSheet,
+            ...{
+                sheets: this.sheetsInfo,
+                intl: {
+                    localeInfo: () => localeData(this.intl.localeId),
+                    parseDate: (value, fmt) => this.intl.parseDate(value, fmt),
+                    toString: (value, fmt) => this.intl.toString(value, fmt),
+                    format: (fmt, ...values) => this.intl.format(fmt, ...values)
+                }
+            },
+            columns: this.columns,
+            columnWidth: this.columnWidth,
+            defaultCellStyle: this.defaultCellStyle,
+            excel: this.excel,
+            headerHeight: this.headerHeight,
+            headerWidth: this.headerHeight,
+            images: this.images,
+            names: this.names,
+            rowHeight: this.rowHeight,
+            rows: this.rows,
+            formulaBarInputRef: { current: this.formulaBarInputRef.current },
+            formulaCellInputRef: { current: this.formulaCellInputRef.current },
+            nameBoxRef: { current: this.nameBoxRef.current }
+        };
+    }
+}
+SpreadsheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetComponent, deps: [{ token: i0.NgZone }, { token: i1$5.IntlService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetComponent, selector: "kendo-spreadsheet", inputs: { menuItems: "menuItems", overflow: "overflow", activeSheet: "activeSheet", sheets: "sheets", columns: "columns", columnWidth: "columnWidth", defaultCellStyle: "defaultCellStyle", headerHeight: "headerHeight", headerWidth: "headerWidth", rowHeight: "rowHeight", rows: "rows", names: "names", 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,
+        {
+            provide: LocalizationService,
+            useExisting: SpreadsheetLocalizationService
+        },
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.spreadsheet'
+        },
+        SpreadsheetToolsService,
+        PopupService
+    ], viewQueries: [{ propertyName: "formulaBarInputRef", first: true, predicate: ["formulaBar"], descendants: true, read: FormulaInputDirective }, { propertyName: "formulaCellInputRef", first: true, predicate: ["formulaCell"], descendants: true, read: FormulaInputDirective }, { propertyName: "nameBoxRef", first: true, predicate: ["nameBox"], descendants: true }, { propertyName: "dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true, read: ViewContainerRef }], exportAs: ["kendo-spreadsheet"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container
+            kendoSpreadsheetLocalizedMessages
+            i18n-background="kendo.spreadsheet.background|The title of the tool that changes the text background color."
+            background="Background color"
+            i18n-color="kendo.spreadsheet.color|The title of the tool that changes the text font color."
+            color="Font color"
+            i18n-bold="kendo.spreadsheet.bold|The title of the Bold tool."
+            bold="Bold"
+            i18n-italic="kendo.spreadsheet.italic|The title of the Italic tool."
+            italic="Italic"
+            i18n-underline="kendo.spreadsheet.underline|The title of the Underline tool."
+            underline="Underline"
+            i18n-loadFile="kendo.spreadsheet.loadFile|The title of the Load File tool."
+            loadFile="Open..."
+            i18n-saveFile="kendo.spreadsheet.saveFile|The title of the Save File tool."
+            saveFile="Export..."
+            i18n-format="kendo.spreadsheet.format|The text of the Format tool."
+            format="Custom format..."
+            i18n-fontFamily="kendo.spreadsheet.fontFamily|The text of the Font Family tool."
+            fontFamily="Font"
+            i18n-fontSize="kendo.spreadsheet.fontSize|The text of the Font Size tool."
+            fontSize="Font size"
+            i18n-home="kendo.spreadsheet.home|The text of the Home toolbar tab."
+            home="Home"
+            i18n-file="kendo.spreadsheet.file|The text of the File toolbar tab."
+            file="File"
+            i18n-insert="kendo.spreadsheet.insert|The text of the Insert toolbar tab."
+            insert="Insert"
+            i18n-undo="kendo.spreadsheet.undo|The title of the Undo tool."
+            undo="Undo"
+            i18n-redo="kendo.spreadsheet.redo|The title of the Redo tool."
+            redo="Redo"
+            i18n-gridLines="kendo.spreadsheet.gridLines|The title of the Grid Lines tool."
+            gridLines="Toggle grid lines"
+            i18n-addColumnLeft="kendo.spreadsheet.addColumnLeft|The title of the tool that adds new column before currently selected column."
+            addColumnLeft="Add column left"
+            i18n-addColumnRight="kendo.spreadsheet.addColumnRight|The title of the tool that adds new column after currently selected column."
+            addColumnRight="Add column right"
+            i18n-addRowBelow="kendo.spreadsheet.addRowBelow|The title of the tool that adds new row below currently selected row."
+            addRowBelow="Add row below"
+            i18n-addRowAbove="kendo.spreadsheet.addRowAbove|The title of the tool that adds new row above currently selected row."
+            addRowAbove="Add row above"
+            i18n-deleteColumn="kendo.spreadsheet.deleteColumn|The title of the tool that deletes a column."
+            deleteColumn="Delete column"
+            i18n-deleteRow="kendo.spreadsheet.deleteRow|The title of the tool that deletes a row."
+            deleteRow="Delete row"
+            i18n-wrap="kendo.spreadsheet.wrap|The title of the Text Wrap tool."
+            wrap="Text wrap"
+            i18n-align="kendo.spreadsheet.align|The title of the Text Align tool."
+            align="Align"
+            i18n-dialogApply="kendo.spreadsheet.dialogApply|The text of the **Apply** button in all Spreadsheet dialogs."
+            dialogApply="Apply"
+            i18n-dialogCancel="kendo.spreadsheet.dialogCancel|The text of the **Cancel** button in all Spreadsheet dialogs."
+            dialogCancel="Cancel"
+            i18n-dialogDelete="kendo.spreadsheet.dialogDelete|The text of the **Delete** button in the Delete sheet dialog."
+            dialogDelete="Delete"
+            i18n-dialogRename="kendo.spreadsheet.dialogRename|The text of the **Rename** button in the Rename sheet dialog."
+            dialogRename="Rename"
+            i18n-rename="kendo.spreadsheet.rename|The title of the Rename sheet dialog."
+            rename="Rename Sheet"
+            i18n-delete="kendo.spreadsheet.delete|The title of the Delete sheet dialog."
+            delete="Delete Sheet">
+        </ng-container>
+        <div class="k-spreadsheet-header">
+            <kendo-menu kendoSpreadsheetMenu (select)="onMenuItemSelect($event)">
+                <kendo-menu-item *ngFor="let item of menuItems" [text]="item.text" [cssClass]="item.cssClass"></kendo-menu-item>
+            </kendo-menu>
+            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'file'"
+                [attr.aria-label]="messageFor('file')"
+                class="k-spreadsheet-toolbar"
+                [overflow]="overflow">
+                <kendo-spreadsheet-load-file-tool></kendo-spreadsheet-load-file-tool>
+                <kendo-toolbar-button kendoSpreadsheetSaveFile></kendo-toolbar-button>
+            </kendo-toolbar>
+            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'home'"
+                [attr.aria-label]="messageFor('home')"
+                class="k-spreadsheet-toolbar"
+                [overflow]="overflow">
+                <kendo-toolbar-buttongroup>
+                    <kendo-toolbar-button kendoSpreadsheetUndo></kendo-toolbar-button>
+                    <kendo-toolbar-button kendoSpreadsheetRedo></kendo-toolbar-button>
+                </kendo-toolbar-buttongroup>
+                <kendo-toolbar-separator></kendo-toolbar-separator>
+                <kendo-toolbar-dropdownlist kendoSpreadsheetFontFamily></kendo-toolbar-dropdownlist>
+                <kendo-toolbar-dropdownlist kendoSpreadsheetFontSize></kendo-toolbar-dropdownlist>
+                <kendo-toolbar-buttongroup>
+                    <kendo-toolbar-button kendoSpreadsheetBold></kendo-toolbar-button>
+                    <kendo-toolbar-button kendoSpreadsheetItalic></kendo-toolbar-button>
+                    <kendo-toolbar-button kendoSpreadsheetUnderline></kendo-toolbar-button>
+                </kendo-toolbar-buttongroup>
+                <kendo-spreadsheet-forecolor-tool></kendo-spreadsheet-forecolor-tool>
+                <kendo-toolbar-separator></kendo-toolbar-separator>
+                <kendo-spreadsheet-backcolor-tool></kendo-spreadsheet-backcolor-tool>
+                <kendo-toolbar-separator></kendo-toolbar-separator>
+                <kendo-toolbar-dropdownbutton kendoSpreadsheetTextAlign></kendo-toolbar-dropdownbutton>
+                <kendo-toolbar-button kendoSpreadsheetTextWrap></kendo-toolbar-button>
+                <kendo-toolbar-separator></kendo-toolbar-separator>
+                <kendo-toolbar-dropdownbutton kendoSpreadsheetFormat></kendo-toolbar-dropdownbutton>
+                <kendo-toolbar-separator></kendo-toolbar-separator>
+                <kendo-toolbar-button kendoSpreadsheetGridLines></kendo-toolbar-button>
+            </kendo-toolbar>
+            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'insert'"
+                [attr.aria-label]="messageFor('insert')"
+                class="k-spreadsheet-toolbar"
+                [overflow]="overflow">
+                <kendo-toolbar-button kendoSpreadsheetAddColumnLeftButton></kendo-toolbar-button>
+                <kendo-toolbar-button kendoSpreadsheetAddColumnRightButton></kendo-toolbar-button>
+                <kendo-toolbar-button kendoSpreadsheetAddRowBelowButton></kendo-toolbar-button>
+                <kendo-toolbar-button kendoSpreadsheetAddRowAboveButton></kendo-toolbar-button>
+                <kendo-toolbar-separator></kendo-toolbar-separator>
+                <kendo-toolbar-button kendoSpreadsheetDeleteColumnButton></kendo-toolbar-button>
+                <kendo-toolbar-button kendoSpreadsheetDeleteRowButton></kendo-toolbar-button>
+            </kendo-toolbar>
+        </div>
+        <div class="k-spreadsheet-action-bar">
+            <div #nameBox kendoSpreadsheetNameBox [spreadsheetWidget]="spreadsheetWidget"></div>
+            <div class="k-spreadsheet-formula-bar">
+                <span class="k-separator k-separator-vertical"></span>
+                <button kendoButton
+                    icon="formula-fx"
+                    [svgIcon]="formulaFxIcon"
+                    [fillMode]="'flat'">
+                </button>
+                <span class="k-separator k-separator-vertical"></span>
+                <div #formulaBar kendoSpreadsheetFormulaInput class="k-textbox k-input k-input-md k-input-flat k-rounded-md"></div>
+                <div class="k-widget k-tooltip" style="position: absolute; display: none;">A1</div>
+            </div>
+        </div>
+        <div class="k-spreadsheet-view">
+            <div class="k-spreadsheet-fixed-container"></div>
+                <div class="k-spreadsheet-scroller">
+                    <div class="k-spreadsheet-view-size"></div>
+                </div>
+            <div tabIndex="0" class="k-spreadsheet-clipboard" contentEditable="true"></div>
+            <div #formulaCell kendoSpreadsheetFormulaInput class="k-spreadsheet-cell-editor" data-role="formulainput"></div>
+        </div>
+        <div class="k-spreadsheet-sheets-bar"
+            kendoSpreadsheetSheetsBar
+            [sheets]="sheetsInfo"
+            [sheetDescriptors]="sheets">
+        </div>
+        <ng-container #dialogContainer></ng-container>
+
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+    `, isInline: true, components: [{ type: i5$2.MenuComponent, selector: "kendo-menu", inputs: ["menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { type: i5$2.MenuItemComponent, selector: "kendo-menu-item", inputs: ["text", "url", "disabled", "cssClass", "cssStyle", "icon", "svgIcon", "data", "separator"] }, { type: i1$2.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: SpreadsheetLoadFileComponent, selector: "kendo-spreadsheet-load-file-tool" }, { 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"] }, { type: i1$2.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i1$2.ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { type: SpreadsheetFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]" }, { type: SpreadsheetFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]" }, { type: SpreadsheetForeColorComponent, selector: "kendo-spreadsheet-forecolor-tool" }, { type: SpreadsheetBackColorComponent, selector: "kendo-spreadsheet-backcolor-tool" }, { 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"] }, { type: NameBoxComponent, selector: "[kendoSpreadsheetNameBox]", inputs: ["data", "spreadsheetWidget"] }, { type: i4.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"] }, { type: SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: ["sheets", "sheetDescriptors"] }, { type: i3.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoSpreadsheetLocalizedMessages]" }, { type: MainMenuDirective, selector: "[kendoSpreadsheetMenu]" }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SpreadsheetSaveFileDirective, selector: "[kendoSpreadsheetSaveFile]" }, { type: SpreadsheetUndoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]" }, { type: SpreadsheetRedoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]" }, { type: SpreadsheetBoldDirective, selector: "kendo-toolbar-button[kendoSpreadsheetBold]" }, { type: SpreadsheetItalicDirective, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]" }, { type: SpreadsheetUnderlineDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]" }, { type: SpreadsheetTextAlignDirective, selector: "[kendoSpreadsheetTextAlign]" }, { type: SpreadsheetTextWrapDirective, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]" }, { type: SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]" }, { type: SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]" }, { type: SpreadsheetAddColumnLeftButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]" }, { type: SpreadsheetAddColumnRightButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]" }, { type: SpreadsheetAddRowBelowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]" }, { type: SpreadsheetAddRowAboveButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]" }, { type: SpreadsheetDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]" }, { type: SpreadsheetDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]" }, { type: FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendo-spreadsheet',
+                    selector: 'kendo-spreadsheet',
+                    providers: [
+                        SpreadsheetLocalizationService,
+                        {
+                            provide: LocalizationService,
+                            useExisting: SpreadsheetLocalizationService
+                        },
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.spreadsheet'
+                        },
+                        SpreadsheetToolsService,
+                        PopupService
+                    ],
+                    template: `
+        <ng-container
+            kendoSpreadsheetLocalizedMessages
+            i18n-background="kendo.spreadsheet.background|The title of the tool that changes the text background color."
+            background="Background color"
+            i18n-color="kendo.spreadsheet.color|The title of the tool that changes the text font color."
+            color="Font color"
+            i18n-bold="kendo.spreadsheet.bold|The title of the Bold tool."
+            bold="Bold"
+            i18n-italic="kendo.spreadsheet.italic|The title of the Italic tool."
+            italic="Italic"
+            i18n-underline="kendo.spreadsheet.underline|The title of the Underline tool."
+            underline="Underline"
+            i18n-loadFile="kendo.spreadsheet.loadFile|The title of the Load File tool."
+            loadFile="Open..."
+            i18n-saveFile="kendo.spreadsheet.saveFile|The title of the Save File tool."
+            saveFile="Export..."
+            i18n-format="kendo.spreadsheet.format|The text of the Format tool."
+            format="Custom format..."
+            i18n-fontFamily="kendo.spreadsheet.fontFamily|The text of the Font Family tool."
+            fontFamily="Font"
+            i18n-fontSize="kendo.spreadsheet.fontSize|The text of the Font Size tool."
+            fontSize="Font size"
+            i18n-home="kendo.spreadsheet.home|The text of the Home toolbar tab."
+            home="Home"
+            i18n-file="kendo.spreadsheet.file|The text of the File toolbar tab."
+            file="File"
+            i18n-insert="kendo.spreadsheet.insert|The text of the Insert toolbar tab."
+            insert="Insert"
+            i18n-undo="kendo.spreadsheet.undo|The title of the Undo tool."
+            undo="Undo"
+            i18n-redo="kendo.spreadsheet.redo|The title of the Redo tool."
+            redo="Redo"
+            i18n-gridLines="kendo.spreadsheet.gridLines|The title of the Grid Lines tool."
+            gridLines="Toggle grid lines"
+            i18n-addColumnLeft="kendo.spreadsheet.addColumnLeft|The title of the tool that adds new column before currently selected column."
+            addColumnLeft="Add column left"
+            i18n-addColumnRight="kendo.spreadsheet.addColumnRight|The title of the tool that adds new column after currently selected column."
+            addColumnRight="Add column right"
+            i18n-addRowBelow="kendo.spreadsheet.addRowBelow|The title of the tool that adds new row below currently selected row."
+            addRowBelow="Add row below"
+            i18n-addRowAbove="kendo.spreadsheet.addRowAbove|The title of the tool that adds new row above currently selected row."
+            addRowAbove="Add row above"
+            i18n-deleteColumn="kendo.spreadsheet.deleteColumn|The title of the tool that deletes a column."
+            deleteColumn="Delete column"
+            i18n-deleteRow="kendo.spreadsheet.deleteRow|The title of the tool that deletes a row."
+            deleteRow="Delete row"
+            i18n-wrap="kendo.spreadsheet.wrap|The title of the Text Wrap tool."
+            wrap="Text wrap"
+            i18n-align="kendo.spreadsheet.align|The title of the Text Align tool."
+            align="Align"
+            i18n-dialogApply="kendo.spreadsheet.dialogApply|The text of the **Apply** button in all Spreadsheet dialogs."
+            dialogApply="Apply"
+            i18n-dialogCancel="kendo.spreadsheet.dialogCancel|The text of the **Cancel** button in all Spreadsheet dialogs."
+            dialogCancel="Cancel"
+            i18n-dialogDelete="kendo.spreadsheet.dialogDelete|The text of the **Delete** button in the Delete sheet dialog."
+            dialogDelete="Delete"
+            i18n-dialogRename="kendo.spreadsheet.dialogRename|The text of the **Rename** button in the Rename sheet dialog."
+            dialogRename="Rename"
+            i18n-rename="kendo.spreadsheet.rename|The title of the Rename sheet dialog."
+            rename="Rename Sheet"
+            i18n-delete="kendo.spreadsheet.delete|The title of the Delete sheet dialog."
+            delete="Delete Sheet">
+        </ng-container>
+        <div class="k-spreadsheet-header">
+            <kendo-menu kendoSpreadsheetMenu (select)="onMenuItemSelect($event)">
+                <kendo-menu-item *ngFor="let item of menuItems" [text]="item.text" [cssClass]="item.cssClass"></kendo-menu-item>
+            </kendo-menu>
+            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'file'"
+                [attr.aria-label]="messageFor('file')"
+                class="k-spreadsheet-toolbar"
+                [overflow]="overflow">
+                <kendo-spreadsheet-load-file-tool></kendo-spreadsheet-load-file-tool>
+                <kendo-toolbar-button kendoSpreadsheetSaveFile></kendo-toolbar-button>
+            </kendo-toolbar>
+            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'home'"
+                [attr.aria-label]="messageFor('home')"
+                class="k-spreadsheet-toolbar"
+                [overflow]="overflow">
+                <kendo-toolbar-buttongroup>
+                    <kendo-toolbar-button kendoSpreadsheetUndo></kendo-toolbar-button>
+                    <kendo-toolbar-button kendoSpreadsheetRedo></kendo-toolbar-button>
+                </kendo-toolbar-buttongroup>
+                <kendo-toolbar-separator></kendo-toolbar-separator>
+                <kendo-toolbar-dropdownlist kendoSpreadsheetFontFamily></kendo-toolbar-dropdownlist>
+                <kendo-toolbar-dropdownlist kendoSpreadsheetFontSize></kendo-toolbar-dropdownlist>
+                <kendo-toolbar-buttongroup>
+                    <kendo-toolbar-button kendoSpreadsheetBold></kendo-toolbar-button>
+                    <kendo-toolbar-button kendoSpreadsheetItalic></kendo-toolbar-button>
+                    <kendo-toolbar-button kendoSpreadsheetUnderline></kendo-toolbar-button>
+                </kendo-toolbar-buttongroup>
+                <kendo-spreadsheet-forecolor-tool></kendo-spreadsheet-forecolor-tool>
+                <kendo-toolbar-separator></kendo-toolbar-separator>
+                <kendo-spreadsheet-backcolor-tool></kendo-spreadsheet-backcolor-tool>
+                <kendo-toolbar-separator></kendo-toolbar-separator>
+                <kendo-toolbar-dropdownbutton kendoSpreadsheetTextAlign></kendo-toolbar-dropdownbutton>
+                <kendo-toolbar-button kendoSpreadsheetTextWrap></kendo-toolbar-button>
+                <kendo-toolbar-separator></kendo-toolbar-separator>
+                <kendo-toolbar-dropdownbutton kendoSpreadsheetFormat></kendo-toolbar-dropdownbutton>
+                <kendo-toolbar-separator></kendo-toolbar-separator>
+                <kendo-toolbar-button kendoSpreadsheetGridLines></kendo-toolbar-button>
+            </kendo-toolbar>
+            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'insert'"
+                [attr.aria-label]="messageFor('insert')"
+                class="k-spreadsheet-toolbar"
+                [overflow]="overflow">
+                <kendo-toolbar-button kendoSpreadsheetAddColumnLeftButton></kendo-toolbar-button>
+                <kendo-toolbar-button kendoSpreadsheetAddColumnRightButton></kendo-toolbar-button>
+                <kendo-toolbar-button kendoSpreadsheetAddRowBelowButton></kendo-toolbar-button>
+                <kendo-toolbar-button kendoSpreadsheetAddRowAboveButton></kendo-toolbar-button>
+                <kendo-toolbar-separator></kendo-toolbar-separator>
+                <kendo-toolbar-button kendoSpreadsheetDeleteColumnButton></kendo-toolbar-button>
+                <kendo-toolbar-button kendoSpreadsheetDeleteRowButton></kendo-toolbar-button>
+            </kendo-toolbar>
+        </div>
+        <div class="k-spreadsheet-action-bar">
+            <div #nameBox kendoSpreadsheetNameBox [spreadsheetWidget]="spreadsheetWidget"></div>
+            <div class="k-spreadsheet-formula-bar">
+                <span class="k-separator k-separator-vertical"></span>
+                <button kendoButton
+                    icon="formula-fx"
+                    [svgIcon]="formulaFxIcon"
+                    [fillMode]="'flat'">
+                </button>
+                <span class="k-separator k-separator-vertical"></span>
+                <div #formulaBar kendoSpreadsheetFormulaInput class="k-textbox k-input k-input-md k-input-flat k-rounded-md"></div>
+                <div class="k-widget k-tooltip" style="position: absolute; display: none;">A1</div>
+            </div>
+        </div>
+        <div class="k-spreadsheet-view">
+            <div class="k-spreadsheet-fixed-container"></div>
+                <div class="k-spreadsheet-scroller">
+                    <div class="k-spreadsheet-view-size"></div>
+                </div>
+            <div tabIndex="0" class="k-spreadsheet-clipboard" contentEditable="true"></div>
+            <div #formulaCell kendoSpreadsheetFormulaInput class="k-spreadsheet-cell-editor" data-role="formulainput"></div>
+        </div>
+        <div class="k-spreadsheet-sheets-bar"
+            kendoSpreadsheetSheetsBar
+            [sheets]="sheetsInfo"
+            [sheetDescriptors]="sheets">
+        </div>
+        <ng-container #dialogContainer></ng-container>
+
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+    `,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$5.IntlService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: i0.Renderer2 }]; }, propDecorators: { formulaBarInputRef: [{
+                type: ViewChild,
+                args: ['formulaBar', { read: FormulaInputDirective }]
+            }], formulaCellInputRef: [{
+                type: ViewChild,
+                args: ['formulaCell', { read: FormulaInputDirective }]
+            }], nameBoxRef: [{
+                type: ViewChild,
+                args: ['nameBox']
+            }], dialogContainer: [{
+                type: ViewChild,
+                args: ['dialogContainer', { read: ViewContainerRef }]
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-spreadsheet']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], menuItems: [{
+                type: Input
+            }], overflow: [{
+                type: Input
+            }], activeSheet: [{
+                type: Input
+            }], sheets: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], columnWidth: [{
+                type: Input
+            }], defaultCellStyle: [{
+                type: Input
+            }], headerHeight: [{
+                type: Input
+            }], headerWidth: [{
+                type: Input
+            }], rowHeight: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], names: [{
+                type: Input
+            }], images: [{
+                type: Input
+            }], excel: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], formatChange: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], excelExport: [{
+                type: Output
+            }], excelImport: [{
+                type: Output
+            }], activeSheetChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Custom component messages override default component messages
+ * ([see example]({% slug globalization_spreadsheet %}#toc-localization)).
+ */
+class CustomMessagesComponent extends MessagesDirective {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+}
+CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+CustomMessagesComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: CustomMessagesComponent, selector: "kendo-spreadsheet-messages", providers: [
+        {
+            provide: MessagesDirective,
+            useExisting: forwardRef(() => CustomMessagesComponent)
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: MessagesDirective,
+                            useExisting: forwardRef(() => CustomMessagesComponent)
+                        }
+                    ],
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'kendo-spreadsheet-messages'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
+/**
+ * @hidden
+ */
+class RemoveDirective {
+    constructor() {
+        this.hostDisplay = 'none';
+    }
+}
+RemoveDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RemoveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+RemoveDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: RemoveDirective, selector: "[kendoRemoveDirective]", host: { properties: { "style.display": "this.hostDisplay" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RemoveDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoRemoveDirective]',
+                }]
+        }], propDecorators: { hostDisplay: [{
+                type: HostBinding,
+                args: ['style.display']
+            }] } });
+
+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,
+    RemoveDirective
+];
+const EXPORTS = [
+    SpreadsheetComponent,
+    CustomMessagesComponent,
+    SpreadsheetBoldDirective,
+    SpreadsheetItalicDirective,
+    SpreadsheetUnderlineDirective,
+    SpreadsheetLoadFileComponent,
+    SpreadsheetSaveFileDirective,
+    SpreadsheetFormatDirective,
+    SpreadsheetUndoDirective,
+    SpreadsheetRedoDirective,
+    SpreadsheetFontFamilyComponent,
+    SpreadsheetFontSizeComponent,
+    SpreadsheetBackColorComponent,
+    SpreadsheetForeColorComponent,
+    SpreadsheetGridLinesDirective,
+    SpreadsheetAddColumnLeftButtonDirective,
+    SpreadsheetAddColumnRightButtonDirective,
+    SpreadsheetAddRowAboveButtonDirective,
+    SpreadsheetAddRowBelowButtonDirective,
+    SpreadsheetDeleteColumnButtonDirective,
+    SpreadsheetDeleteRowButtonDirective,
+    SpreadsheetTextAlignDirective,
+    SpreadsheetTextWrapDirective
+];
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the Spreadsheet component.
+ */
+class SpreadsheetModule {
+}
+SpreadsheetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SpreadsheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", 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,
+        RemoveDirective], imports: [CommonModule,
+        ButtonsModule,
+        ComboBoxModule,
+        DropDownListModule,
+        DialogModule,
+        EventsModule,
+        IconsModule,
+        IntlModule,
+        MenuModule,
+        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] });
+SpreadsheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetModule, imports: [[
+            CommonModule,
+            ButtonsModule,
+            ComboBoxModule,
+            DropDownListModule,
+            DialogModule,
+            EventsModule,
+            IconsModule,
+            IntlModule,
+            MenuModule,
+            PopupModule,
+            TabStripModule,
+            ToolBarModule,
+            InputsModule,
+            WatermarkModule,
+            LabelModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DIRECTIVES],
+                    exports: [EXPORTS],
+                    imports: [
+                        CommonModule,
+                        ButtonsModule,
+                        ComboBoxModule,
+                        DropDownListModule,
+                        DialogModule,
+                        EventsModule,
+                        IconsModule,
+                        IntlModule,
+                        MenuModule,
+                        PopupModule,
+                        TabStripModule,
+                        ToolBarModule,
+                        InputsModule,
+                        WatermarkModule,
+                        LabelModule
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CustomMessagesComponent, FormulaInputDirective, FormulaListComponent, NameBoxComponent, SheetsBarComponent, SpreadsheetAddColumnLeftButtonDirective, SpreadsheetAddColumnRightButtonDirective, SpreadsheetAddRowAboveButtonDirective, SpreadsheetAddRowBelowButtonDirective, SpreadsheetBackColorComponent, SpreadsheetBoldDirective, SpreadsheetComponent, SpreadsheetDeleteColumnButtonDirective, SpreadsheetDeleteRowButtonDirective, SpreadsheetFontFamilyComponent, SpreadsheetFontSizeComponent, SpreadsheetForeColorComponent, SpreadsheetFormatDirective, SpreadsheetGridLinesDirective, SpreadsheetItalicDirective, SpreadsheetLoadFileComponent, SpreadsheetModule, SpreadsheetRedoDirective, SpreadsheetSaveFileDirective, SpreadsheetTextAlignDirective as SpreadsheetTextAlignComponent, SpreadsheetTextWrapDirective, SpreadsheetUnderlineDirective, SpreadsheetUndoDirective };
+