@progress/kendo-angular-spreadsheet 14.0.0-develop.1 → 14.0.0-develop.11

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

@@ -3,7 +3,7 @@
 * 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 { Injectable, EventEmitter, Output, Inject, Optional, Component, HostBinding, Input, Directive, forwardRef, ElementRef, ViewChild, InjectionToken, HostListener, ViewChildren, 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';
@@ -13,7 +13,7 @@ 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 { isPresent, hasObservers, isDocumentAvailable, Keys, 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';
@@ -46,8 +46,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-spreadsheet',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1695995129,
-    version: '14.0.0-develop.1',
+    publishDate: 1696927504,
+    version: '14.0.0-develop.11',
     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',
 };
 
@@ -73,6 +73,9 @@ class SpreadsheetService {
     get formulaListId() {
         return `k-spreadsheet-${spreadsheetCounter}-formula-list`;
     }
+    get tablistId() {
+        return `k-spreadsheet-${spreadsheetCounter}-tablist`;
+    }
     notifySheetsChange(actionType, sheetInfo) {
         const sheets = this.spreadsheet.sheets();
         this.sheetsChanged.next({ sheets, sheet: sheetInfo, actionType });
@@ -262,7 +265,7 @@ class FormulaInputDirective {
         this.spreadsheetService = spreadsheetService;
         this.hostClasses = true;
         this.ariaHasPopup = 'menu';
-        this.ariaExpanded = null;
+        this.ariaExpanded = 'false';
         this.focusedItem = () => this.list?.element.nativeElement.querySelector('.k-focus');
         this.unfocus = () => {
             const focused = this.focusedItem();
@@ -289,7 +292,7 @@ class FormulaInputDirective {
         };
     }
     get ariaControls() {
-        return this.ariaExpanded ? this.spreadsheetService.formulaListId : null;
+        return this.ariaExpanded === 'true' ? this.spreadsheetService.formulaListId : null;
     }
     get listElement() {
         return this.list?.element.nativeElement.firstElementChild;
@@ -346,12 +349,12 @@ class FormulaInputDirective {
                     this.list = list;
                     list.data = this.data;
                     list.itemClick = this.handler;
-                    this.ariaExpanded = true;
+                    this.ariaExpanded = 'true';
                 },
                 close: () => {
                     this.popupRef && this.popupRef.close();
                     this.popupRef = null;
-                    this.ariaExpanded = null;
+                    this.ariaExpanded = 'false';
                 },
                 position: () => {
                     // contentKey++;
@@ -492,6 +495,9 @@ const commandSVGIcons = {
     fontFamily: fontFamilyIcon
 };
 
+/**
+ * @hidden
+ */
 class SpreadsheetLoadFileComponent extends ToolBarToolComponent {
     constructor(localization, spreadsheetService, toolbar) {
         super();
@@ -796,7 +802,7 @@ FontFamilyDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 </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"] }] });
+    `, isInline: true, components: [{ type: i1$3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], 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: [{
@@ -838,7 +844,7 @@ FontSizeDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             (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"] }] });
+    `, isInline: true, components: [{ type: i1$3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FontSizeDropDownListComponent, decorators: [{
             type: Component,
             args: [{
@@ -1431,9 +1437,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * @hidden
  */
 class NameBoxComponent {
-    constructor(ngZone, host) {
+    constructor(ngZone, host, localization) {
         this.ngZone = ngZone;
         this.host = host;
+        this.localization = localization;
         this.hostClass = true;
         this.valueNormalizer = (text) => text.pipe(map((content) => ({ name: content })));
     }
@@ -1459,6 +1466,9 @@ class NameBoxComponent {
             }
         };
     }
+    get title() {
+        return this.localization.get('nameBox');
+    }
     onSelectionChange(value) {
         const editor = this.spreadsheetWidget.view.nameEditor;
         if (editor && value) {
@@ -1477,7 +1487,7 @@ class NameBoxComponent {
     }
     ;
 }
-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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NameBoxComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: SpreadsheetLocalizationService }], 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'}"
@@ -1491,8 +1501,9 @@ NameBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             [value]="value"
             (open)="onOpen()"
             [valueNormalizer]="valueNormalizer"
+            [attr.title]="title"
         ></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"] }] });
+    `, isInline: true, components: [{ type: i1$3.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NameBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -1510,10 +1521,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [value]="value"
             (open)="onOpen()"
             [valueNormalizer]="valueNormalizer"
+            [attr.title]="title"
         ></kendo-combobox>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: SpreadsheetLocalizationService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-spreadsheet-name-editor']
             }], keyDownHandler: [{
@@ -1549,7 +1561,7 @@ ActionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <p>Are you sure you want to proceed?</p>
         </ng-container>
 
-        <form class="k-form k-form-md" *ngIf="commandName === 'rename'">
+        <form class="k-form k-form-md" *ngIf="commandName === 'rename'" method="dialog">
             <div class="k-form-field">
                 <label class="k-label k-form-label">Rename sheet</label>
                 <div class="k-form-field-wrap">
@@ -1571,7 +1583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <p>Are you sure you want to proceed?</p>
         </ng-container>
 
-        <form class="k-form k-form-md" *ngIf="commandName === 'rename'">
+        <form class="k-form k-form-md" *ngIf="commandName === 'rename'" method="dialog">
             <div class="k-form-field">
                 <label class="k-label k-form-label">Rename sheet</label>
                 <div class="k-form-field-wrap">
@@ -1615,9 +1627,16 @@ class SheetsBarComponent {
         };
         this.actionsCallback = {
             copy: (sheetInfo) => {
-                sheetInfo.copies ? sheetInfo.copies += 1 : sheetInfo.copies = 1;
+                let copies = 0;
+                const regex = this.getCopyRegex(sheetInfo.text);
+                this.sheets.forEach(sheet => {
+                    const isPresent = regex.test(sheet.text);
+                    if (isPresent) {
+                        copies += 1;
+                    }
+                });
                 const sheetToCopy = this.spreadsheetService.spreadsheet.sheets().find(s => s.name() === sheetInfo.text);
-                const newName = `${sheetToCopy.name()} (${sheetInfo.copies})`;
+                const newName = `${sheetInfo.text} (${copies + 1})`;
                 this.spreadsheetService.spreadsheet.insertSheet({ data: { ...sheetToCopy.toJSON(), name: newName }, index: sheetInfo.index + 1 });
                 this.selectSheet(newName);
             },
@@ -1636,14 +1655,25 @@ class SheetsBarComponent {
     get sheetsMenuList() {
         return this.sheets?.map(sheet => ({ text: sheet.text, icon: 'eye', svgIcon: this.eyeIcon }));
     }
+    get tablistId() {
+        return this.spreadsheetService.tablistId;
+    }
     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');
+        const tablist = this.element.nativeElement.querySelector('.k-tabstrip-items');
         this.renderer.addClass(prevBtn, 'k-order-1');
         this.renderer.addClass(nextBtn, 'k-order-2');
+        this.renderer.setAttribute(tablist, 'id', this.tablistId);
+        this.tabListSub = this.renderer.listen(tablist, 'keydown', this.onTabListKeyDown.bind(this));
+    }
+    ngOnDestroy() {
+        if (this.tabListSub) {
+            this.tabListSub();
+        }
     }
     onTabSelect(ev) {
         if (ev.title !== this.activeSheet) {
@@ -1658,6 +1688,8 @@ class SheetsBarComponent {
     }
     onClose() {
         this.openedDdb = null;
+        const activeTabIdx = this.sheets.findIndex(sheet => sheet.active);
+        this.tabstrip.selectTab(activeTabIdx);
     }
     onActionClick(dataItem, sheet) {
         if (dataItem.disabled) {
@@ -1674,16 +1706,19 @@ class SheetsBarComponent {
         const sheet = this.sheets.find(s => s.text === item.text);
         this.selectSheet(sheet.text);
     }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
     openDialog(dataItem, sheet) {
         const dialogSettings = {
             appendTo: this.spreadsheetService.dialogContainer,
-            title: this.localization.get(dataItem.commandName),
+            title: this.messageFor(dataItem.commandName),
             content: ActionDialogComponent,
             actions: [{
-                    text: this.localization.get(dataItem.dialogButton),
+                    text: this.messageFor(dataItem.dialogButton),
                     themeColor: 'primary'
                 }, {
-                    text: this.localization.get('dialogCancel')
+                    text: this.messageFor('dialogCancel')
                 }],
             actionsLayout: 'stretched',
             autoFocusedElement: '.k-textbox .k-input-inner, .k-button-solid-primary'
@@ -1692,7 +1727,7 @@ class SheetsBarComponent {
         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)) {
+            if (event.text === this.messageFor(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));
@@ -1706,6 +1741,11 @@ class SheetsBarComponent {
             commandName: dataItem.commandName
         });
     }
+    getCopyRegex(sheetName) {
+        const newName = sheetName.replaceAll('(', '\\(').replaceAll(')', '\\)');
+        const st = `(${newName})\\s?\\(`;
+        return new RegExp(st, 's');
+    }
     selectSheet(sheetName) {
         const spreadsheetSheet = this.spreadsheetService.spreadsheet.sheets().find(s => s.name() === sheetName);
         this.spreadsheetService.spreadsheet.activeSheet(spreadsheetSheet);
@@ -1713,11 +1753,25 @@ class SheetsBarComponent {
         this.spreadsheetService.activeSheetChanged.next(spreadsheetSheet);
         this.notifySheetsChange();
     }
+    onTabListKeyDown(ev) {
+        const buttonEl = ev.target.querySelector('.k-dropdown-button');
+        const index = Array.from(this.actionDdbRefs).findIndex(el => el.nativeElement === buttonEl);
+        const ddb = Array.from(this.actionDdbs)[index];
+        if (!ddb) {
+            return;
+        }
+        const altKey = ev.altKey;
+        const arrowDown = ev.keyCode === Keys.ArrowDown;
+        const shouldOpenDdb = altKey && arrowDown && !ddb.isOpen;
+        if (shouldOpenDdb) {
+            ev.preventDefault();
+            ddb.togglePopupVisibility();
+        }
+    }
     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,
@@ -1732,53 +1786,53 @@ class SheetsBarComponent {
     }
 }
 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"
+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" } }, viewQueries: [{ propertyName: "addButton", first: true, predicate: ["addButton"], descendants: true }, { propertyName: "menuButton", first: true, predicate: ["menuButton"], descendants: true }, { propertyName: "tabstrip", first: true, predicate: ["tabstrip"], descendants: true }, { propertyName: "actionDdbs", predicate: ["sheetDdb"], descendants: true }, { propertyName: "actionDdbRefs", predicate: ["sheetDdb"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+        <button kendoButton #addButton
+            [title]="messageFor('addSheet')"
             type="button"
             fillMode="flat"
             class="k-spreadsheet-sheet-add"
             icon="plus"
             [svgIcon]="plusIcon"
-            [kendoEventsOutsideAngular]="{click: onAddClick}">
+            [kendoEventsOutsideAngular]="{click: onAddClick}"
+            [attr.aria-controls]="tablistId">
         </button>
-        <kendo-dropdownbutton #menuDdb
+        <kendo-dropdownbutton #menuButton
             fillMode="flat"
             buttonClass="k-spreadsheet-sheets-menu"
             icon="menu"
             [svgIcon]="menuIcon"
             [data]="sheetsMenuList"
             (itemClick)="onMenuItemClick($event)"
-            (open)="onOpen(menuDdb)">
+            (open)="onOpen(menuButton)"
+            [buttonAttributes]="{title: messageFor('sheetsMenu')}"
+            [attr.aria-controls]="tablistId">
         </kendo-dropdownbutton>
-        <kendo-tabstrip
+        <kendo-tabstrip #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
+            (tabSelect)="onTabSelect($event)">
+            <kendo-tabstrip-tab *ngFor="let sheet of sheets"
                 [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>
+                <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>
         </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: [{
@@ -1786,52 +1840,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             args: [{
                     selector: '[kendoSpreadsheetSheetsBar]',
                     template: `
-        <button kendoButton
-            title="Add new sheet"
+        <button kendoButton #addButton
+            [title]="messageFor('addSheet')"
             type="button"
             fillMode="flat"
             class="k-spreadsheet-sheet-add"
             icon="plus"
             [svgIcon]="plusIcon"
-            [kendoEventsOutsideAngular]="{click: onAddClick}">
+            [kendoEventsOutsideAngular]="{click: onAddClick}"
+            [attr.aria-controls]="tablistId">
         </button>
-        <kendo-dropdownbutton #menuDdb
+        <kendo-dropdownbutton #menuButton
             fillMode="flat"
             buttonClass="k-spreadsheet-sheets-menu"
             icon="menu"
             [svgIcon]="menuIcon"
             [data]="sheetsMenuList"
             (itemClick)="onMenuItemClick($event)"
-            (open)="onOpen(menuDdb)">
+            (open)="onOpen(menuButton)"
+            [buttonAttributes]="{title: messageFor('sheetsMenu')}"
+            [attr.aria-controls]="tablistId">
         </kendo-dropdownbutton>
-        <kendo-tabstrip
+        <kendo-tabstrip #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
+            (tabSelect)="onTabSelect($event)">
+            <kendo-tabstrip-tab *ngFor="let sheet of sheets"
                 [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>
+                <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>
         </kendo-tabstrip>
     `
                 }]
@@ -1842,6 +1896,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], sheetDescriptors: [{
                 type: Input
+            }], addButton: [{
+                type: ViewChild,
+                args: ['addButton']
+            }], menuButton: [{
+                type: ViewChild,
+                args: ['menuButton']
+            }], tabstrip: [{
+                type: ViewChild,
+                args: ['tabstrip']
+            }], actionDdbs: [{
+                type: ViewChildren,
+                args: ['sheetDdb']
+            }], actionDdbRefs: [{
+                type: ViewChildren,
+                args: ['sheetDdb', { read: ElementRef }]
             }] } });
 
 /**
@@ -1850,7 +1919,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 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 });
+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", nameBox: "nameBox", addSheet: "addSheet", sheetsMenu: "sheetsMenu" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessagesDirective, decorators: [{
             type: Directive,
             args: [{
@@ -1916,6 +1985,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], rename: [{
                 type: Input
+            }], nameBox: [{
+                type: Input
+            }], addSheet: [{
+                type: Input
+            }], sheetsMenu: [{
+                type: Input
             }] } });
 
 /**
@@ -2010,8 +2085,6 @@ class SpreadsheetCommandBaseDirective {
         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';
@@ -2029,11 +2102,6 @@ class SpreadsheetCommandBaseDirective {
         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))));
@@ -2472,14 +2540,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Represents the [Kendo UI Spreadsheet component for Angular]({% slug overview_spreadsheet %}).
  */
 class SpreadsheetComponent {
-    constructor(ngZone, intl, host, localization, spreadsheetService, toolsService, renderer) {
+    constructor(ngZone, intl, host, localization, spreadsheetService, toolsService) {
         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';
         /**
@@ -2496,13 +2563,13 @@ class SpreadsheetComponent {
         /**
          * The initial column width in pixels.
          *
-         * @default 64
+         * @default 100
          */
         this.columnWidth = 100;
         /**
          * The height of the header row in pixels.
          *
-         * @default 20
+         * @default 30
          */
         this.headerHeight = 30;
         /**
@@ -2510,11 +2577,11 @@ class SpreadsheetComponent {
          *
          * @default 32
          */
-        this.headerWidth = 100;
+        this.headerWidth = 32;
         /**
          * The initial row height in pixels.
          *
-         * @default 20
+         * @default 30
          */
         this.rowHeight = 30;
         /**
@@ -2720,7 +2787,6 @@ class SpreadsheetComponent {
         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);
@@ -2743,9 +2809,8 @@ class SpreadsheetComponent {
             defaultCellStyle: this.defaultCellStyle,
             excel: this.excel,
             headerHeight: this.headerHeight,
-            headerWidth: this.headerHeight,
+            headerWidth: this.headerWidth,
             images: this.images,
-            names: this.names,
             rowHeight: this.rowHeight,
             rows: this.rows,
             formulaBarInputRef: { current: this.formulaBarInputRef.current },
@@ -2754,8 +2819,8 @@ class SpreadsheetComponent {
         };
     }
 }
-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: [
+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 }], 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", 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,
@@ -2829,7 +2894,13 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             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">
+            delete="Delete Sheet"
+            i18n-nameBox="kendo.spreadsheet.nameBox|The title of the Name Box input."
+            nameBox="Name Box"
+            i18n-addSheet="kendo.spreadsheet.addSheet|The title of the Add new sheet button."
+            addSheet="Add New Sheet"
+            i18n-sheetsMenu="kendo.spreadsheet.sheetsMenu|The title of the Sheets menu button."
+            sheetsMenu="All Sheets">
         </ng-container>
         <div class="k-spreadsheet-header">
             <kendo-menu kendoSpreadsheetMenu (select)="onMenuItemSelect($event)">
@@ -2886,14 +2957,12 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             <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>
+                <kendo-icon-wrapper
+                    name="formula-fx"
+                    [svgIcon]="formulaFxIcon">
+                </kendo-icon-wrapper>
                 <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">
@@ -2912,7 +2981,7 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         <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]" }] });
+    `, 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: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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: [{
@@ -2993,7 +3062,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             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">
+            delete="Delete Sheet"
+            i18n-nameBox="kendo.spreadsheet.nameBox|The title of the Name Box input."
+            nameBox="Name Box"
+            i18n-addSheet="kendo.spreadsheet.addSheet|The title of the Add new sheet button."
+            addSheet="Add New Sheet"
+            i18n-sheetsMenu="kendo.spreadsheet.sheetsMenu|The title of the Sheets menu button."
+            sheetsMenu="All Sheets">
         </ng-container>
         <div class="k-spreadsheet-header">
             <kendo-menu kendoSpreadsheetMenu (select)="onMenuItemSelect($event)">
@@ -3050,14 +3125,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <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>
+                <kendo-icon-wrapper
+                    name="formula-fx"
+                    [svgIcon]="formulaFxIcon">
+                </kendo-icon-wrapper>
                 <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">
@@ -3078,7 +3151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <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: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$5.IntlService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; }, propDecorators: { formulaBarInputRef: [{
                 type: ViewChild,
                 args: ['formulaBar', { read: FormulaInputDirective }]
             }], formulaCellInputRef: [{
@@ -3118,8 +3191,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], rows: [{
                 type: Input
-            }], names: [{
-                type: Input
             }], images: [{
                 type: Input
             }], excel: [{
@@ -3172,26 +3243,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], 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,
@@ -3226,8 +3277,7 @@ const DIRECTIVES = [
     FontSizeDropDownListComponent,
     DialogContentComponent,
     MainMenuDirective,
-    ActionDialogComponent,
-    RemoveDirective
+    ActionDialogComponent
 ];
 const EXPORTS = [
     SpreadsheetComponent,
@@ -3294,8 +3344,7 @@ SpreadsheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         FontSizeDropDownListComponent,
         DialogContentComponent,
         MainMenuDirective,
-        ActionDialogComponent,
-        RemoveDirective], imports: [CommonModule,
+        ActionDialogComponent], imports: [CommonModule,
         ButtonsModule,
         ComboBoxModule,
         DropDownListModule,
@@ -3378,5 +3427,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * 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 };
+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, SpreadsheetTextWrapDirective, SpreadsheetUnderlineDirective, SpreadsheetUndoDirective };