@progress/kendo-angular-spreadsheet 14.0.0-develop.5 → 14.0.0-develop.7

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, 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 * 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: 1696239772,
-    version: '14.0.0-develop.5',
+    publishDate: 1696412890,
+    version: '14.0.0-develop.7',
     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();
@@ -1593,57 +1599,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
  */
@@ -1664,7 +1619,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();
@@ -1673,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);
             },
@@ -1688,44 +1649,30 @@ 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) {
@@ -1741,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) {
@@ -1792,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);
@@ -1799,6 +1753,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();
@@ -1815,60 +1784,9 @@ 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: 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"
@@ -1877,7 +1795,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"
@@ -1887,16 +1805,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">
@@ -1917,7 +1833,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: [{
@@ -1931,7 +1847,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"
@@ -1941,16 +1857,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">
@@ -1980,9 +1894,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']
@@ -1992,6 +1903,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 }]
             }] } });
 
 /**
@@ -2621,14 +2538,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';
         /**
@@ -2645,13 +2561,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;
         /**
@@ -2659,11 +2575,11 @@ class SpreadsheetComponent {
          *
          * @default 32
          */
-        this.headerWidth = 100;
+        this.headerWidth = 32;
         /**
          * The initial row height in pixels.
          *
-         * @default 20
+         * @default 30
          */
         this.rowHeight = 30;
         /**
@@ -2891,9 +2807,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 },
@@ -2902,8 +2817,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,
@@ -3234,7 +3149,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: [{
@@ -3274,8 +3189,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], rows: [{
                 type: Input
-            }], names: [{
-                type: Input
             }], images: [{
                 type: Input
             }], excel: [{
@@ -3362,8 +3275,7 @@ const DIRECTIVES = [
     FontSizeDropDownListComponent,
     DialogContentComponent,
     MainMenuDirective,
-    ActionDialogComponent,
-    SpreadsheetTabStripDirective
+    ActionDialogComponent
 ];
 const EXPORTS = [
     SpreadsheetComponent,
@@ -3430,8 +3342,7 @@ SpreadsheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         FontSizeDropDownListComponent,
         DialogContentComponent,
         MainMenuDirective,
-        ActionDialogComponent,
-        SpreadsheetTabStripDirective], imports: [CommonModule,
+        ActionDialogComponent], imports: [CommonModule,
         ButtonsModule,
         ComboBoxModule,
         DropDownListModule,
@@ -3514,5 +3425,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 };
 

package/models/sheet-info.d.ts

@@ -19,7 +19,6 @@ export declare type SheetInfo = SheetDescriptor & {
     first: boolean;
     text: string;
     sheetActions: SheetAction[];
-    copies?: number;
     inEdit?: boolean;
     active?: boolean;
     index?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-spreadsheet",
-  "version": "14.0.0-develop.5",
+  "version": "14.0.0-develop.7",
   "description": "A Spreadsheet Component for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -23,22 +23,22 @@
     "@angular/core": "13 - 16",
     "@angular/platform-browser": "13 - 16",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "14.0.0-develop.5",
-    "@progress/kendo-angular-common": "14.0.0-develop.5",
-    "@progress/kendo-angular-dialog": "14.0.0-develop.5",
-    "@progress/kendo-angular-dropdowns": "14.0.0-develop.5",
-    "@progress/kendo-angular-icons": "14.0.0-develop.5",
-    "@progress/kendo-angular-l10n": "14.0.0-develop.5",
-    "@progress/kendo-angular-layout": "14.0.0-develop.5",
-    "@progress/kendo-angular-menu": "14.0.0-develop.5",
-    "@progress/kendo-angular-popup": "14.0.0-develop.5",
-    "@progress/kendo-angular-toolbar": "14.0.0-develop.5",
-    "@progress/kendo-angular-intl": "14.0.0-develop.5",
+    "@progress/kendo-angular-buttons": "14.0.0-develop.7",
+    "@progress/kendo-angular-common": "14.0.0-develop.7",
+    "@progress/kendo-angular-dialog": "14.0.0-develop.7",
+    "@progress/kendo-angular-dropdowns": "14.0.0-develop.7",
+    "@progress/kendo-angular-icons": "14.0.0-develop.7",
+    "@progress/kendo-angular-l10n": "14.0.0-develop.7",
+    "@progress/kendo-angular-layout": "14.0.0-develop.7",
+    "@progress/kendo-angular-menu": "14.0.0-develop.7",
+    "@progress/kendo-angular-popup": "14.0.0-develop.7",
+    "@progress/kendo-angular-toolbar": "14.0.0-develop.7",
+    "@progress/kendo-angular-intl": "14.0.0-develop.7",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "14.0.0-develop.5",
+    "@progress/kendo-angular-schematics": "14.0.0-develop.7",
     "@progress/kendo-spreadsheet-common": "1.0.0-develop.13"
   },
   "schematics": "./schematics/collection.json",

package/schematics/ngAdd/index.js

@@ -6,7 +6,7 @@ function default_1(options) {
             // Peer dependency of icons
             '@progress/kendo-svg-icons': '^1.0.0',
             // peer dep of the dropdowns
-            '@progress/kendo-angular-treeview': '14.0.0-develop.5'
+            '@progress/kendo-angular-treeview': '14.0.0-develop.7'
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }

package/sheets-bar/sheets-bar.component.d.ts

@@ -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 { AfterViewInit, ElementRef, NgZone, OnDestroy, Renderer2 } from '@angular/core';
+import { AfterViewInit, ElementRef, NgZone, OnDestroy, QueryList, Renderer2 } from '@angular/core';
 import { SVGIcon } from '@progress/kendo-svg-icons';
 import { SheetInfo } from '../models/sheet-info';
 import { SpreadsheetService } from '../common/spreadsheet.service';
@@ -26,14 +26,12 @@ export declare class SheetsBarComponent implements AfterViewInit, OnDestroy {
     hostClasses: boolean;
     sheets: SheetInfo[];
     sheetDescriptors: SheetDescriptor[];
-    /**
-     * @hidden
-     */
-    onFocus(): void;
     constructor(spreadsheetService: SpreadsheetService, element: ElementRef, renderer: Renderer2, localization: SpreadsheetLocalizationService, dialogService: DialogService, ngZone: NgZone);
     addButton: ButtonComponent;
     menuButton: DropDownButtonComponent;
     tabstrip: TabStripComponent;
+    actionDdbs: QueryList<DropDownButtonComponent>;
+    actionDdbRefs: QueryList<ElementRef>;
     get activeSheet(): string;
     plusIcon: SVGIcon;
     menuIcon: SVGIcon;
@@ -43,12 +41,11 @@ export declare class SheetsBarComponent implements AfterViewInit, OnDestroy {
     selected: boolean;
     private openedDdb;
     private eyeIcon;
-    private hostKeyDownSub;
-    private focusedEl;
+    private tabListSub;
     get sheetsMenuList(): any[];
+    get tablistId(): string;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    onTabStripNavigationEnd(ev: string): void;
     onAddClick: () => void;
     onTabSelect(ev: SelectEvent): void;
     onOpen(ddb: DropDownButtonComponent): void;
@@ -57,13 +54,11 @@ export declare class SheetsBarComponent implements AfterViewInit, OnDestroy {
     onMenuItemClick(item: any): void;
     messageFor(key: string): string;
     private openDialog;
+    private getCopyRegex;
     private actionsCallback;
     private selectSheet;
+    private onTabListKeyDown;
     private notifySheetsChange;
-    private onHostKeyDown;
-    private focusNext;
-    private focusPrev;
-    private resetNavigation;
     static ɵfac: i0.ɵɵFactoryDeclaration<SheetsBarComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SheetsBarComponent, "[kendoSpreadsheetSheetsBar]", never, { "sheets": "sheets"; "sheetDescriptors": "sheetDescriptors"; }, {}, never, never>;
 }