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

package/esm2020/localization/custom-messages.component.mjs

@@ -0,0 +1,42 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, forwardRef } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { MessagesDirective } from './messages';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+/**
+ * Custom component messages override default component messages
+ * ([see example]({% slug globalization_spreadsheet %}#toc-localization)).
+ */
+export 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 }]; } });

package/esm2020/localization/localized-messages.directive.mjs

@@ -0,0 +1,33 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, forwardRef } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { MessagesDirective } from './messages';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+/**
+ * @hidden
+ */
+export 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 }]; } });

package/esm2020/localization/messages.mjs

@@ -0,0 +1,80 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Input } from '@angular/core';
+import { ComponentMessages } from '@progress/kendo-angular-l10n';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export 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
+            }] } });

package/esm2020/localization/spreadsheet-localization.service.mjs

@@ -0,0 +1,31 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Inject, Injectable, Optional } from '@angular/core';
+import { LocalizationService, L10N_PREFIX, MessageService, RTL } from '@progress/kendo-angular-l10n';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+/**
+ * @hidden
+ */
+export 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]
+                }] }]; } });

package/esm2020/models/events.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2020/models/index.mjs

@@ -0,0 +1,7 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export * from './sheet-info';
+export * from './main-menu-item';
+export * from './events';

package/esm2020/models/main-menu-item.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2020/models/sheet-info.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2020/package-metadata.mjs

@@ -0,0 +1,15 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export 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',
+};

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

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';

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

@@ -0,0 +1,68 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component } from '@angular/core';
+import { DialogRef, DialogContentBase } from '@progress/kendo-angular-dialog';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dialog";
+import * as i2 from "@progress/kendo-angular-inputs";
+import * as i3 from "@angular/common";
+/**
+ * @hidden
+ */
+export 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.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: i2.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: i3.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.DialogRef }]; } });

package/esm2020/sheets-bar/remove.directive.mjs

@@ -0,0 +1,25 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, HostBinding } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export 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']
+            }] } });

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

@@ -0,0 +1,278 @@
+/**-----------------------------------------------------------------------------------------
+* 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, HostBinding, Input, NgZone, Renderer2 } from '@angular/core';
+import { caretAltDownIcon, menuIcon, plusIcon, caretAltLeftIcon, caretAltRightIcon, eyeIcon } from '@progress/kendo-svg-icons';
+import { SpreadsheetService } from '../common/spreadsheet.service';
+import { isDocumentAvailable, isPresent } from '@progress/kendo-angular-common';
+import { DialogService } from '@progress/kendo-angular-dialog';
+import { SpreadsheetLocalizationService } from '../localization/spreadsheet-localization.service';
+import { take } from 'rxjs/operators';
+import { ActionDialogComponent } from './action-dialog.component';
+import { mapToSheetDescriptor } from '../utils';
+import { getSheetActions } from './utils';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/spreadsheet.service";
+import * as i2 from "../localization/spreadsheet-localization.service";
+import * as i3 from "@progress/kendo-angular-dialog";
+import * as i4 from "@progress/kendo-angular-buttons";
+import * as i5 from "@progress/kendo-angular-layout";
+import * as i6 from "@progress/kendo-angular-common";
+import * as i7 from "@angular/common";
+/**
+ * @hidden
+ */
+export 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: i1.SpreadsheetService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.SpreadsheetLocalizationService }, { token: i3.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.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i5.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }], directives: [{ type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.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: i1.SpreadsheetService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.SpreadsheetLocalizationService }, { type: i3.DialogService }, { type: i0.NgZone }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-spreadsheet-sheets-bar']
+            }], sheets: [{
+                type: Input
+            }], sheetDescriptors: [{
+                type: Input
+            }] } });