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

package/esm2020/spreadsheet.component.mjs

@@ -0,0 +1,725 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2, ViewChild, ViewContainerRef } from '@angular/core';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from './package-metadata';
+import { SpreadsheetWidget } from '@progress/kendo-spreadsheet-common';
+import { localeData, IntlService } from '@progress/kendo-angular-intl';
+import { downloadIcon, folderOpenIcon, formulaFxIcon } from '@progress/kendo-svg-icons';
+import { SpreadsheetService } from './common/spreadsheet.service';
+import { SpreadsheetToolsService } from './tools/tools.service';
+import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
+import { SpreadsheetLocalizationService } from './localization/spreadsheet-localization.service';
+import { hasObservers, isDocumentAvailable, isPresent, shouldShowValidationUI } from '@progress/kendo-angular-common';
+import { mapToSheetDescriptor } from './utils';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { FormulaInputDirective } from './action-bar/formula-input.directive';
+import { take } from 'rxjs/operators';
+import { getSheetActions } from './sheets-bar/utils';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-intl";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "./common/spreadsheet.service";
+import * as i4 from "./tools/tools.service";
+import * as i5 from "@progress/kendo-angular-menu";
+import * as i6 from "@progress/kendo-angular-toolbar";
+import * as i7 from "./tools/load-file.component";
+import * as i8 from "./tools/font-family/spreadsheet-fontfamily-tool.component";
+import * as i9 from "./tools/font-size/spreadsheet-fontsize-tool.component";
+import * as i10 from "./tools/colorpicker/spreadsheet-forecolor.component";
+import * as i11 from "./tools/colorpicker/spreadsheet-backcolor.component";
+import * as i12 from "./action-bar/namebox.component";
+import * as i13 from "@progress/kendo-angular-buttons";
+import * as i14 from "./sheets-bar/sheets-bar.component";
+import * as i15 from "@progress/kendo-angular-common";
+import * as i16 from "./localization/localized-messages.directive";
+import * as i17 from "./common/main-menu.directive";
+import * as i18 from "@angular/common";
+import * as i19 from "./tools/save-file-tool.directive";
+import * as i20 from "./tools/history/undo-tool";
+import * as i21 from "./tools/history/redo-tool";
+import * as i22 from "./tools/typographical-emphasis/bold-tool.directive";
+import * as i23 from "./tools/typographical-emphasis/italic-tool.directive";
+import * as i24 from "./tools/typographical-emphasis/underline-tool.directive";
+import * as i25 from "./tools/align-tool.directive";
+import * as i26 from "./tools/text-wrap-tool.directive";
+import * as i27 from "./tools/format-tool.directive";
+import * as i28 from "./tools/gridlines-tool.directive";
+import * as i29 from "./tools/tables/add-column-left-button.directive";
+import * as i30 from "./tools/tables/add-column-right-button.directive";
+import * as i31 from "./tools/tables/add-row-below-button.directive";
+import * as i32 from "./tools/tables/add-row-above-button.directive";
+import * as i33 from "./tools/tables/delete-column-button.directive";
+import * as i34 from "./tools/tables/delete-row-button.directive";
+import * as i35 from "./action-bar/formula-input.directive";
+/**
+ * Represents the [Kendo UI Spreadsheet component for Angular]({% slug overview_spreadsheet %}).
+ */
+export 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.IntlService }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: i3.SpreadsheetService }, { token: i4.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.MenuComponent, selector: "kendo-menu", inputs: ["menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { type: i5.MenuItemComponent, selector: "kendo-menu-item", inputs: ["text", "url", "disabled", "cssClass", "cssStyle", "icon", "svgIcon", "data", "separator"] }, { type: i6.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i7.SpreadsheetLoadFileComponent, selector: "kendo-spreadsheet-load-file-tool" }, { type: i6.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: i6.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i6.ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { type: i8.SpreadsheetFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]" }, { type: i9.SpreadsheetFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]" }, { type: i10.SpreadsheetForeColorComponent, selector: "kendo-spreadsheet-forecolor-tool" }, { type: i11.SpreadsheetBackColorComponent, selector: "kendo-spreadsheet-backcolor-tool" }, { type: i6.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: i12.NameBoxComponent, selector: "[kendoSpreadsheetNameBox]", inputs: ["data", "spreadsheetWidget"] }, { type: i13.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: i14.SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: ["sheets", "sheetDescriptors"] }, { type: i15.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: i16.LocalizedMessagesDirective, selector: "[kendoSpreadsheetLocalizedMessages]" }, { type: i17.MainMenuDirective, selector: "[kendoSpreadsheetMenu]" }, { type: i18.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i18.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i19.SpreadsheetSaveFileDirective, selector: "[kendoSpreadsheetSaveFile]" }, { type: i20.SpreadsheetUndoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]" }, { type: i21.SpreadsheetRedoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]" }, { type: i22.SpreadsheetBoldDirective, selector: "kendo-toolbar-button[kendoSpreadsheetBold]" }, { type: i23.SpreadsheetItalicDirective, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]" }, { type: i24.SpreadsheetUnderlineDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]" }, { type: i25.SpreadsheetTextAlignDirective, selector: "[kendoSpreadsheetTextAlign]" }, { type: i26.SpreadsheetTextWrapDirective, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]" }, { type: i27.SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]" }, { type: i28.SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]" }, { type: i29.SpreadsheetAddColumnLeftButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]" }, { type: i30.SpreadsheetAddColumnRightButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]" }, { type: i31.SpreadsheetAddRowBelowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]" }, { type: i32.SpreadsheetAddRowAboveButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]" }, { type: i33.SpreadsheetDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]" }, { type: i34.SpreadsheetDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]" }, { type: i35.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.IntlService }, { type: i0.ElementRef }, { type: i2.LocalizationService }, { type: i3.SpreadsheetService }, { type: i4.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
+            }] } });