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

package/fesm2015/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 { EventEmitter, Injectable, Output, Inject, Optional, Component, HostBinding, Input, Directive, forwardRef, ElementRef, ViewChild, InjectionToken, HostListener, ViewContainerRef, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, 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';
@@ -12,7 +12,7 @@ import { formulaFxIcon, trashIcon, copyIcon, pencilIcon, arrowRightIcon, arrowLe
 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, Keys, 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 { Subject, Subscription } from 'rxjs';
@@ -46,8 +46,8 @@ 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',
 };
 
@@ -177,6 +177,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 });
@@ -265,7 +268,7 @@ class FormulaInputDirective {
         this.spreadsheetService = spreadsheetService;
         this.hostClasses = true;
         this.ariaHasPopup = 'menu';
-        this.ariaExpanded = null;
+        this.ariaExpanded = 'false';
         this.focusedItem = () => { var _a; return (_a = this.list) === null || _a === void 0 ? void 0 : _a.element.nativeElement.querySelector('.k-focus'); };
         this.unfocus = () => {
             const focused = this.focusedItem();
@@ -293,7 +296,7 @@ class FormulaInputDirective {
         };
     }
     get ariaControls() {
-        return this.ariaExpanded ? this.spreadsheetService.formulaListId : null;
+        return this.ariaExpanded === 'true' ? this.spreadsheetService.formulaListId : null;
     }
     get listElement() {
         var _a;
@@ -353,12 +356,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++;
@@ -499,6 +502,9 @@ const commandSVGIcons = {
     fontFamily: fontFamilyIcon
 };
 
+/**
+ * @hidden
+ */
 class SpreadsheetLoadFileComponent extends ToolBarToolComponent {
     constructor(localization, spreadsheetService, toolbar) {
         super();
@@ -1612,57 +1618,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$4.DialogRef }]; } });
 
-/**
- * @hidden
- */
-class SpreadsheetTabStripDirective {
-    constructor(host) {
-        this.host = host;
-        this.navigationEnd = new EventEmitter();
-    }
-    ngAfterViewInit() {
-        this.host.tablist.nativeElement.addEventListener('keydown', this.onKeyDown.bind(this), true);
-    }
-    ngOnDestroy() {
-        this.host.tablist.nativeElement.removeEventListener('keydown', this.onKeyDown.bind(this), true);
-    }
-    get isLastActive() {
-        const lastIndex = this.host.tabs.length - 1;
-        return Array.from(this.host.tabs)[lastIndex].selected;
-    }
-    get isFirstActive() {
-        return Array.from(this.host.tabs)[0].selected;
-    }
-    onKeyDown(ev) {
-        switch (ev.keyCode) {
-            case Keys.ArrowLeft:
-                if (this.isFirstActive) {
-                    ev.stopImmediatePropagation();
-                    this.navigationEnd.emit('first');
-                }
-                break;
-            case Keys.ArrowRight:
-                if (this.isLastActive) {
-                    ev.stopImmediatePropagation();
-                    this.navigationEnd.emit('last');
-                }
-                break;
-            default:
-                break;
-        }
-    }
-}
-SpreadsheetTabStripDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetTabStripDirective, deps: [{ token: i5$1.TabStripComponent }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetTabStripDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetTabStripDirective, selector: "[kendoSpreadsheetTabStrip]", outputs: { navigationEnd: "navigationEnd" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetTabStripDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoSpreadsheetTabStrip]',
-                }]
-        }], ctorParameters: function () { return [{ type: i5$1.TabStripComponent }]; }, propDecorators: { navigationEnd: [{
-                type: Output
-            }] } });
-
 /**
  * @hidden
  */
@@ -1683,7 +1638,6 @@ 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();
@@ -1692,9 +1646,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: Object.assign(Object.assign({}, sheetToCopy.toJSON()), { name: newName }), index: sheetInfo.index + 1 });
                 this.selectSheet(newName);
             },
@@ -1707,14 +1668,6 @@ class SheetsBarComponent {
             }
         };
     }
-    /**
-     * @hidden
-     */
-    onFocus() {
-        this.renderer.setAttribute(this.element.nativeElement, 'tabindex', '-1');
-        this.addButton.focus();
-        this.focusedEl = this.addButton;
-    }
     get activeSheet() {
         var _a, _b;
         return (_b = (_a = this.spreadsheetService.spreadsheet) === null || _a === void 0 ? void 0 : _a.activeSheet()) === null || _b === void 0 ? void 0 : _b.name();
@@ -1723,30 +1676,24 @@ class SheetsBarComponent {
         var _a;
         return (_a = this.sheets) === null || _a === void 0 ? void 0 : _a.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) {
@@ -1762,6 +1709,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) {
@@ -1813,6 +1762,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);
@@ -1820,6 +1774,21 @@ 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();
@@ -1827,60 +1796,9 @@ class SheetsBarComponent {
             this.sheets = sheetDesc.map((item, index, items) => (Object.assign(Object.assign({}, 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) })));
         });
     }
-    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: 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: { 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"
@@ -1889,7 +1807,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"
@@ -1899,16 +1817,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">
@@ -1929,7 +1845,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$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: SpreadsheetTabStripDirective, selector: "[kendoSpreadsheetTabStrip]", outputs: ["navigationEnd"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.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$1.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i5$1.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }], directives: [{ type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.TabTemplateDirective, selector: "[kendoTabTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SheetsBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -1943,7 +1859,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"
@@ -1953,16 +1869,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">
@@ -1992,9 +1906,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']
@@ -2004,6 +1915,12 @@ 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 }]
             }] } });
 
 /**
@@ -2632,14 +2549,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';
         /**
@@ -2656,13 +2572,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;
         /**
@@ -2670,11 +2586,11 @@ class SpreadsheetComponent {
          *
          * @default 32
          */
-        this.headerWidth = 100;
+        this.headerWidth = 32;
         /**
          * The initial row height in pixels.
          *
-         * @default 20
+         * @default 30
          */
         this.rowHeight = 30;
         /**
@@ -2889,11 +2805,11 @@ class SpreadsheetComponent {
                 toString: (value, fmt) => this.intl.toString(value, fmt),
                 format: (fmt, ...values) => this.intl.format(fmt, ...values)
             }
-        }), { columns: this.columns, columnWidth: this.columnWidth, defaultCellStyle: this.defaultCellStyle, excel: this.excel, headerHeight: this.headerHeight, headerWidth: this.headerHeight, images: this.images, names: this.names, rowHeight: this.rowHeight, rows: this.rows, formulaBarInputRef: { current: this.formulaBarInputRef.current }, formulaCellInputRef: { current: this.formulaCellInputRef.current }, nameBoxRef: { current: this.nameBoxRef.current } });
+        }), { columns: this.columns, columnWidth: this.columnWidth, defaultCellStyle: this.defaultCellStyle, excel: this.excel, headerHeight: this.headerHeight, headerWidth: this.headerWidth, images: this.images, rowHeight: this.rowHeight, rows: this.rows, formulaBarInputRef: { current: this.formulaBarInputRef.current }, formulaCellInputRef: { current: this.formulaCellInputRef.current }, nameBoxRef: { current: this.nameBoxRef.current } });
     }
 }
-SpreadsheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetComponent, deps: [{ token: i0.NgZone }, { token: i1$5.IntlService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetComponent, selector: "kendo-spreadsheet", inputs: { menuItems: "menuItems", overflow: "overflow", activeSheet: "activeSheet", sheets: "sheets", columns: "columns", columnWidth: "columnWidth", defaultCellStyle: "defaultCellStyle", headerHeight: "headerHeight", headerWidth: "headerWidth", rowHeight: "rowHeight", rows: "rows", names: "names", images: "images", excel: "excel" }, outputs: { change: "change", formatChange: "formatChange", selectionChange: "selectionChange", excelExport: "excelExport", excelImport: "excelImport", activeSheetChange: "activeSheetChange" }, host: { properties: { "class.k-spreadsheet": "this.hostClass", "attr.role": "this.role" } }, providers: [
+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,
@@ -3224,7 +3140,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: [{
@@ -3264,8 +3180,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], rows: [{
                 type: Input
-            }], names: [{
-                type: Input
             }], images: [{
                 type: Input
             }], excel: [{
@@ -3352,8 +3266,7 @@ const DIRECTIVES = [
     FontSizeDropDownListComponent,
     DialogContentComponent,
     MainMenuDirective,
-    ActionDialogComponent,
-    SpreadsheetTabStripDirective
+    ActionDialogComponent
 ];
 const EXPORTS = [
     SpreadsheetComponent,
@@ -3420,8 +3333,7 @@ SpreadsheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         FontSizeDropDownListComponent,
         DialogContentComponent,
         MainMenuDirective,
-        ActionDialogComponent,
-        SpreadsheetTabStripDirective], imports: [CommonModule,
+        ActionDialogComponent], imports: [CommonModule,
         ButtonsModule,
         ComboBoxModule,
         DropDownListModule,
@@ -3504,5 +3416,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 };