@progress/kendo-angular-spreadsheet 14.0.0-develop.4 → 14.0.0-develop.6

package/action-bar/formula-input.directive.d.ts

@@ -16,7 +16,7 @@ export declare class FormulaInputDirective {
     private spreadsheetService;
     hostClasses: boolean;
     ariaHasPopup: string;
-    ariaExpanded: any;
+    ariaExpanded: string;
     get ariaControls(): string;
     list: FormulaListComponent;
     data: any[];

package/common/spreadsheet.service.d.ts

@@ -21,6 +21,7 @@ export declare class SpreadsheetService {
     get currentActiveSheet(): string;
     get activeSheet(): string;
     get formulaListId(): string;
+    get tablistId(): string;
     private _currentActiveSheet;
     notifySheetsChange(actionType: string, sheetInfo?: SheetInfo): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SpreadsheetService, never>;

package/esm2020/action-bar/formula-input.directive.mjs

@@ -19,7 +19,7 @@ export 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();
@@ -46,7 +46,7 @@ export 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;
@@ -103,12 +103,12 @@ export 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++;

package/esm2020/common/spreadsheet.service.mjs

@@ -27,6 +27,9 @@ export 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 });

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-spreadsheet',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1696225092,
-    version: '14.0.0-develop.4',
+    publishDate: 1696405867,
+    version: '14.0.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/sheets-bar/sheets-bar.component.mjs

@@ -2,7 +2,7 @@
 * 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, HostListener, Input, NgZone, Renderer2, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostBinding, Input, NgZone, QueryList, Renderer2, ViewChild, ViewChildren } from '@angular/core';
 import { caretAltDownIcon, menuIcon, plusIcon, caretAltLeftIcon, caretAltRightIcon, eyeIcon } from '@progress/kendo-svg-icons';
 import { SpreadsheetService } from '../common/spreadsheet.service';
 import { ButtonComponent, DropDownButtonComponent } from '@progress/kendo-angular-buttons';
@@ -21,8 +21,7 @@ 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 "./spreadsheet-tabstrip.directive";
-import * as i8 from "@angular/common";
+import * as i7 from "@angular/common";
 /**
  * @hidden
  */
@@ -43,7 +42,6 @@ export class SheetsBarComponent {
         this.selected = false;
         this.openedDdb = null;
         this.eyeIcon = eyeIcon;
-        this.focusedEl = null;
         this.onAddClick = () => {
             if (this.spreadsheetService.spreadsheet) {
                 this.spreadsheetService.spreadsheet.view.sheetsbar.onAddSelect();
@@ -52,9 +50,16 @@ export 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);
             },
@@ -67,44 +72,30 @@ export class SheetsBarComponent {
             }
         };
     }
-    /**
-     * @hidden
-     */
-    onFocus() {
-        this.renderer.setAttribute(this.element.nativeElement, 'tabindex', '-1');
-        this.addButton.focus();
-        this.focusedEl = this.addButton;
-    }
     get activeSheet() {
         return this.spreadsheetService.spreadsheet?.activeSheet()?.name();
     }
     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(this.element.nativeElement, 'tabindex', '0');
-        this.hostKeyDownSub = this.renderer.listen(this.element.nativeElement, 'keydown', (ev) => this.onHostKeyDown(ev));
+        this.renderer.setAttribute(tablist, 'id', this.tablistId);
+        this.tabListSub = this.renderer.listen(tablist, 'keydown', this.onTabListKeyDown.bind(this));
     }
     ngOnDestroy() {
-        if (this.hostKeyDownSub) {
-            this.hostKeyDownSub();
-        }
-    }
-    onTabStripNavigationEnd(ev) {
-        if (ev === 'last') {
-            this.addButton.focus();
-            this.focusedEl = this.addButton;
-        }
-        else {
-            this.menuButton.focus();
-            this.focusedEl = this.menuButton;
+        if (this.tabListSub) {
+            this.tabListSub();
         }
     }
     onTabSelect(ev) {
@@ -120,6 +111,8 @@ export class SheetsBarComponent {
     }
     onClose() {
         this.openedDdb = null;
+        const activeTabIdx = this.sheets.findIndex(sheet => sheet.active);
+        this.tabstrip.selectTab(activeTabIdx);
     }
     onActionClick(dataItem, sheet) {
         if (dataItem.disabled) {
@@ -171,6 +164,11 @@ export 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);
@@ -178,6 +176,21 @@ export 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();
@@ -194,60 +207,9 @@ export class SheetsBarComponent {
             }));
         });
     }
-    onHostKeyDown(ev) {
-        const activeSheetIndex = this.sheets.find(s => s.name === this.activeSheet).index;
-        switch (ev.keyCode) {
-            case Keys.ArrowRight:
-                this.focusNext(activeSheetIndex);
-                break;
-            case Keys.ArrowLeft:
-                this.focusPrev(activeSheetIndex);
-                break;
-            case Keys.Tab:
-                this.resetNavigation();
-                break;
-            default:
-                break;
-        }
-    }
-    focusNext(sheetIndex) {
-        switch (this.focusedEl) {
-            case this.addButton:
-                this.menuButton.focus();
-                this.focusedEl = this.menuButton;
-                break;
-            case this.menuButton:
-                this.tabstrip.selectTab(sheetIndex);
-                this.focusedEl = this.tabstrip;
-                break;
-            default:
-                break;
-        }
-    }
-    focusPrev(sheetIndex) {
-        switch (this.focusedEl) {
-            case this.addButton:
-                this.tabstrip.selectTab(sheetIndex);
-                this.focusedEl = this.tabstrip;
-                break;
-            case this.menuButton:
-                this.addButton.focus();
-                this.focusedEl = this.addButton;
-                break;
-            default:
-                break;
-        }
-    }
-    resetNavigation() {
-        if (this.focusedEl !== this.tabstrip) {
-            this.focusedEl.blur();
-        }
-        this.focusedEl = null;
-        this.renderer.setAttribute(this.element.nativeElement, 'tabindex', '0');
-    }
 }
 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: { listeners: { "focus": "onFocus()" }, 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 }], ngImport: i0, template: `
+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"
@@ -256,7 +218,7 @@ SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             icon="plus"
             [svgIcon]="plusIcon"
             [kendoEventsOutsideAngular]="{click: onAddClick}"
-            [tabIndex]="-1">
+            [attr.aria-controls]="tablistId">
         </button>
         <kendo-dropdownbutton #menuButton
             fillMode="flat"
@@ -266,16 +228,14 @@ SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             [data]="sheetsMenuList"
             (itemClick)="onMenuItemClick($event)"
             (open)="onOpen(menuButton)"
-            [buttonAttributes]="{title: messageFor('sheetsMenu')}"
-            [tabIndex]="-1">
+            [buttonAttributes]="{title: messageFor('sheetsMenu'), ariaControls: tablistId}">
         </kendo-dropdownbutton>
-        <kendo-tabstrip #tabstrip kendoSpreadsheetTabStrip
+        <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)"
-            (navigationEnd)="onTabStripNavigationEnd($event)">
+            (tabSelect)="onTabSelect($event)">
             <kendo-tabstrip-tab *ngFor="let sheet of sheets"
                 [title]="sheet.text"
                 [selected]="sheet.text === activeSheet">
@@ -296,7 +256,7 @@ SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 </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.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.SpreadsheetTabStripDirective, selector: "[kendoSpreadsheetTabStrip]", outputs: ["navigationEnd"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.TabTemplateDirective, selector: "[kendoTabTemplate]" }] });
+    `, 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: [{
@@ -310,7 +270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             icon="plus"
             [svgIcon]="plusIcon"
             [kendoEventsOutsideAngular]="{click: onAddClick}"
-            [tabIndex]="-1">
+            [attr.aria-controls]="tablistId">
         </button>
         <kendo-dropdownbutton #menuButton
             fillMode="flat"
@@ -320,16 +280,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [data]="sheetsMenuList"
             (itemClick)="onMenuItemClick($event)"
             (open)="onOpen(menuButton)"
-            [buttonAttributes]="{title: messageFor('sheetsMenu')}"
-            [tabIndex]="-1">
+            [buttonAttributes]="{title: messageFor('sheetsMenu'), ariaControls: tablistId}">
         </kendo-dropdownbutton>
-        <kendo-tabstrip #tabstrip kendoSpreadsheetTabStrip
+        <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)"
-            (navigationEnd)="onTabStripNavigationEnd($event)">
+            (tabSelect)="onTabSelect($event)">
             <kendo-tabstrip-tab *ngFor="let sheet of sheets"
                 [title]="sheet.text"
                 [selected]="sheet.text === activeSheet">
@@ -359,9 +317,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], sheetDescriptors: [{
                 type: Input
-            }], onFocus: [{
-                type: HostListener,
-                args: ['focus']
             }], addButton: [{
                 type: ViewChild,
                 args: ['addButton']
@@ -371,4 +326,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], tabstrip: [{
                 type: ViewChild,
                 args: ['tabstrip']
+            }], actionDdbs: [{
+                type: ViewChildren,
+                args: ['sheetDdb']
+            }], actionDdbRefs: [{
+                type: ViewChildren,
+                args: ['sheetDdb', { read: ElementRef }]
             }] } });

package/esm2020/spreadsheet.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, ViewChild, ViewContainerRef } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
 import { SpreadsheetWidget } from '@progress/kendo-spreadsheet-common';
@@ -58,14 +58,13 @@ import * as i35 from "./action-bar/formula-input.directive";
  * Represents the [Kendo UI Spreadsheet component for Angular]({% slug overview_spreadsheet %}).
  */
 export class SpreadsheetComponent {
-    constructor(ngZone, intl, host, localization, spreadsheetService, toolsService, renderer) {
+    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';
         /**
@@ -82,13 +81,13 @@ export 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;
         /**
@@ -96,11 +95,11 @@ export class SpreadsheetComponent {
          *
          * @default 32
          */
-        this.headerWidth = 100;
+        this.headerWidth = 32;
         /**
          * The initial row height in pixels.
          *
-         * @default 20
+         * @default 30
          */
         this.rowHeight = 30;
         /**
@@ -328,9 +327,8 @@ export 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 },
@@ -339,8 +337,8 @@ export class SpreadsheetComponent {
         };
     }
 }
-SpreadsheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetComponent, deps: [{ token: i0.NgZone }, { token: i1.IntlService }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetComponent, selector: "kendo-spreadsheet", inputs: { menuItems: "menuItems", overflow: "overflow", activeSheet: "activeSheet", sheets: "sheets", columns: "columns", columnWidth: "columnWidth", defaultCellStyle: "defaultCellStyle", headerHeight: "headerHeight", headerWidth: "headerWidth", rowHeight: "rowHeight", rows: "rows", names: "names", images: "images", excel: "excel" }, outputs: { change: "change", formatChange: "formatChange", selectionChange: "selectionChange", excelExport: "excelExport", excelImport: "excelImport", activeSheetChange: "activeSheetChange" }, host: { properties: { "class.k-spreadsheet": "this.hostClass", "attr.role": "this.role" } }, providers: [
+SpreadsheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetComponent, deps: [{ token: i0.NgZone }, { token: i1.IntlService }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }], 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,
@@ -671,7 +669,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.IntlService }, { type: i0.ElementRef }, { type: i2.LocalizationService }, { type: i3.SpreadsheetService }, { type: i4.SpreadsheetToolsService }, { type: i0.Renderer2 }]; }, propDecorators: { formulaBarInputRef: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.IntlService }, { type: i0.ElementRef }, { type: i2.LocalizationService }, { type: i3.SpreadsheetService }, { type: i4.SpreadsheetToolsService }]; }, propDecorators: { formulaBarInputRef: [{
                 type: ViewChild,
                 args: ['formulaBar', { read: FormulaInputDirective }]
             }], formulaCellInputRef: [{
@@ -711,8 +709,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], rows: [{
                 type: Input
-            }], names: [{
-                type: Input
             }], images: [{
                 type: Input
             }], excel: [{

package/esm2020/spreadsheet.module.mjs

@@ -50,7 +50,6 @@ import { DialogContentComponent } from './tools/shared/dialog-content.component'
 import { MenuModule } from '@progress/kendo-angular-menu';
 import { MainMenuDirective } from './common/main-menu.directive';
 import { ActionDialogComponent } from './sheets-bar/action-dialog.component';
-import { SpreadsheetTabStripDirective } from './sheets-bar/spreadsheet-tabstrip.directive';
 import * as i0 from "@angular/core";
 const DIRECTIVES = [
     SpreadsheetComponent,
@@ -86,8 +85,7 @@ const DIRECTIVES = [
     FontSizeDropDownListComponent,
     DialogContentComponent,
     MainMenuDirective,
-    ActionDialogComponent,
-    SpreadsheetTabStripDirective
+    ActionDialogComponent
 ];
 const EXPORTS = [
     SpreadsheetComponent,
@@ -154,8 +152,7 @@ SpreadsheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         FontSizeDropDownListComponent,
         DialogContentComponent,
         MainMenuDirective,
-        ActionDialogComponent,
-        SpreadsheetTabStripDirective], imports: [CommonModule,
+        ActionDialogComponent], imports: [CommonModule,
         ButtonsModule,
         ComboBoxModule,
         DropDownListModule,

package/esm2020/tools/index.mjs

@@ -11,7 +11,7 @@ export { SpreadsheetUndoDirective } from './history/undo-tool';
 export { SpreadsheetBoldDirective } from './typographical-emphasis/bold-tool.directive';
 export { SpreadsheetItalicDirective } from './typographical-emphasis/italic-tool.directive';
 export { SpreadsheetUnderlineDirective } from './typographical-emphasis/underline-tool.directive';
-export { SpreadsheetTextAlignDirective as SpreadsheetTextAlignComponent } from './align-tool.directive';
+export { SpreadsheetTextAlignDirective } from './align-tool.directive';
 export { SpreadsheetFormatDirective } from './format-tool.directive';
 export { SpreadsheetGridLinesDirective } from './gridlines-tool.directive';
 export { SpreadsheetLoadFileComponent } from './load-file.component';

package/esm2020/tools/load-file.component.mjs

@@ -14,6 +14,9 @@ import * as i2 from "../common/spreadsheet.service";
 import * as i3 from "@progress/kendo-angular-buttons";
 import * as i4 from "@progress/kendo-angular-icons";
 import * as i5 from "@progress/kendo-angular-toolbar";
+/**
+ * @hidden
+ */
 export class SpreadsheetLoadFileComponent extends ToolBarToolComponent {
     constructor(localization, spreadsheetService, toolbar) {
         super();