@progress/kendo-angular-spreadsheet 14.3.0-develop.3 → 14.3.0-develop.5

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

@@ -8,7 +8,7 @@ import { validatePackage } from '@progress/kendo-licensing';
 import { SpreadsheetWidget } from '@progress/kendo-spreadsheet-common';
 import * as i1$4 from '@progress/kendo-angular-intl';
 import { localeData, IntlModule } from '@progress/kendo-angular-intl';
-import { formulaFxIcon, trashIcon, copyIcon, pencilIcon, arrowRightIcon, arrowLeftIcon, alignCenterIcon, alignJustifyIcon, alignLeftIcon, alignRightIcon, alignTopIcon, alignMiddleIcon, alignBottomIcon, dropletIcon, boldIcon, foregroundColorIcon, italicIcon, arrowRotateCwIcon, underlineIcon, arrowRotateCcwIcon, textWrapIcon, tableColumnInsertLeftIcon, tableColumnInsertRightIcon, tableRowInsertAboveIcon, tableRowInsertBelowIcon, tableRowDeleteIcon, tableColumnDeleteIcon, bordersNoneIcon, folderOpenIcon, downloadIcon, customFormatIcon, fontSizeIcon, fontFamilyIcon, cellsMergeIcon, cellsMergeHorizontallyIcon, cellsMergeVerticallyIcon, tableUnmergeIcon, linkIcon, fontGrowIcon, fontShrinkIcon, decimalDecreaseIcon, decimalIncreaseIcon, cutIcon, clipboardIcon, eyeSlashIcon, eyeIcon, plusIcon, menuIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
+import { formulaFxIcon, trashIcon, copyIcon, pencilIcon, eyeSlashIcon, arrowRightIcon, arrowLeftIcon, alignCenterIcon, alignJustifyIcon, alignLeftIcon, alignRightIcon, alignTopIcon, alignMiddleIcon, alignBottomIcon, dropletIcon, boldIcon, foregroundColorIcon, italicIcon, arrowRotateCwIcon, underlineIcon, arrowRotateCcwIcon, textWrapIcon, tableColumnInsertLeftIcon, tableColumnInsertRightIcon, tableRowInsertAboveIcon, tableRowInsertBelowIcon, tableRowDeleteIcon, tableColumnDeleteIcon, bordersNoneIcon, folderOpenIcon, downloadIcon, customFormatIcon, fontSizeIcon, fontFamilyIcon, cellsMergeIcon, cellsMergeHorizontallyIcon, cellsMergeVerticallyIcon, tableUnmergeIcon, linkIcon, fontGrowIcon, fontShrinkIcon, decimalDecreaseIcon, decimalIncreaseIcon, cutIcon, clipboardIcon, eyeIcon, plusIcon, menuIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
 import * as i2 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages } from '@progress/kendo-angular-l10n';
 import * as i3 from '@progress/kendo-angular-common';
@@ -47,8 +47,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-spreadsheet',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1701764808,
-    version: '14.3.0-develop.3',
+    publishDate: 1701781986,
+    version: '14.3.0-develop.5',
     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',
 };
 
@@ -150,7 +150,8 @@ const mapToSheetDescriptor = (sheetsArray) => {
             name: sheet.name(),
             rows: sheet._rows,
             selection: sheet.selection(),
-            showGridLines: sheet.showGridLines
+            showGridLines: sheet.showGridLines,
+            state: sheet.state()
         };
     });
 };
@@ -162,6 +163,7 @@ let spreadsheetCounter = 0;
 class SpreadsheetService {
     constructor() {
         this.sheetsChanged = new Subject();
+        this.onSheetsBarFocus = new Subject();
         this.activeSheetChanged = new Subject();
         this.selectionChanged = new Subject();
         spreadsheetCounter++;
@@ -410,41 +412,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * @hidden
  */
-const getSheetActions = (index, items) => {
+const getSheetActions = (items, item) => {
+    const visibleItems = items.filter(item => item.state === 'visible');
+    const itemIndex = item ? visibleItems.findIndex(i => i === item) : 0;
     return [{
-            text: 'Delete',
+            messageKey: 'sheetDelete',
             icon: 'trash',
             svgIcon: trashIcon,
             commandName: 'delete',
             dialogButton: 'dialogDelete',
-            disabled: items.length === 1
-        },
-        {
-            text: 'Duplicate',
+            disabled: visibleItems.length === 1
+        }, {
+            messageKey: 'sheetDuplicate',
             icon: 'copy',
             svgIcon: copyIcon,
             commandName: 'copy'
-        },
-        {
-            text: 'Rename',
+        }, {
+            messageKey: 'sheetRename',
             icon: 'pencil',
             svgIcon: pencilIcon,
             commandName: 'rename',
             dialogButton: 'dialogRename'
-        },
-        {
-            text: 'Move Right',
+        }, {
+            messageKey: 'sheetHide',
+            icon: 'eye-slash',
+            svgIcon: eyeSlashIcon,
+            commandName: 'hide',
+            disabled: visibleItems.length === 1
+        }, {
+            messageKey: 'sheetMoveRight',
             icon: 'arrow-right',
             svgIcon: arrowRightIcon,
             commandName: 'move',
-            disabled: index === items.length - 1
-        },
-        {
-            text: 'Move Left',
+            disabled: visibleItems.length === 1 || itemIndex === visibleItems.length - 1
+        }, {
+            messageKey: 'sheetMoveLeft',
             icon: 'arrow-left',
             svgIcon: arrowLeftIcon,
             commandName: 'move',
-            disabled: index === 0
+            disabled: visibleItems.length === 1 || itemIndex === 0
         }];
 };
 
@@ -1799,14 +1805,23 @@ class SheetsBarComponent {
         this.dialogService = dialogService;
         this.ngZone = ngZone;
         this.hostClasses = true;
+        this.subs = new Subscription();
         this.plusIcon = plusIcon;
         this.menuIcon = menuIcon;
         this.caretAltDownIcon = caretAltDownIcon;
         this.caretAltLeftIcon = caretAltLeftIcon;
         this.caretAltRightIcon = caretAltRightIcon;
         this.selected = false;
+        this.sheetsMenuList = [];
         this.openedDdb = null;
-        this.eyeIcon = eyeIcon;
+        this.hiddenStateIcons = {
+            hidden: 'eye-slash',
+            visible: 'eye'
+        };
+        this.hiddenStateSVGIcons = {
+            hidden: eyeSlashIcon,
+            visible: eyeIcon
+        };
         this.onAddClick = () => {
             if (this.spreadsheetService.spreadsheet) {
                 this.spreadsheetService.spreadsheet.view.sheetsbar.onAddSelect();
@@ -1828,23 +1843,53 @@ class SheetsBarComponent {
                 this.spreadsheetService.spreadsheet.insertSheet({ data: Object.assign(Object.assign({}, sheetToCopy.toJSON()), { name: newName }), index: sheetInfo.index + 1 });
                 this.selectSheet(newName);
             },
-            move: (sheetInfo, itemText) => {
-                const oldIndex = this.spreadsheetService.spreadsheet.sheets().findIndex(sheet => sheet.name() === sheetInfo.text);
-                const newIndex = itemText === 'Move Right' ? oldIndex + 1 : oldIndex - 1;
+            move: (sheetInfo, itemKey) => {
+                const isMoveRight = itemKey === 'sheetMoveRight';
+                let oldIndex = -1;
+                let newIndex = -1;
+                if (isMoveRight) {
+                    for (let i = 0; i < this.sheets.length; i++) {
+                        if (this.sheets[i].text === sheetInfo.text) {
+                            oldIndex = i;
+                        }
+                        if (oldIndex > -1 && i > oldIndex && this.sheets[i].state === 'visible') {
+                            newIndex = i;
+                            break;
+                        }
+                    }
+                }
+                else {
+                    for (let i = this.sheets.length - 1; i >= 0; i--) {
+                        if (this.sheets[i].text === sheetInfo.text) {
+                            oldIndex = i;
+                        }
+                        if (oldIndex > -1 && i < oldIndex && this.sheets[i].state === 'visible') {
+                            newIndex = i;
+                            break;
+                        }
+                    }
+                }
                 const sheetsBar = this.spreadsheetService.spreadsheet.view.sheetsbar;
                 sheetsBar.onSheetReorderEnd({ oldIndex, newIndex });
                 this.notifySheetsChange();
+            },
+            hide: (sheet) => {
+                sheet.state = 'hidden';
+                const sheets = this.spreadsheetService.spreadsheet.sheets();
+                const sheetIndex = sheets.findIndex(s => s.name() === sheet.text);
+                sheets[sheetIndex]._state('hidden');
+                const newSelectedIndex = sheetIndex < sheets.length - 1 ? sheetIndex + 1 : 0;
+                const sheetToSelect = sheets[newSelectedIndex].name();
+                this.selectSheet(sheetToSelect);
+                this.notifySheetsChange();
             }
         };
+        this.subs.add(spreadsheetService.onSheetsBarFocus.subscribe(() => ngZone.run(() => this.tabstrip.selectTab(this.sheets.findIndex(sh => sh.text === spreadsheetService.currentActiveSheet)))));
     }
     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();
     }
-    get sheetsMenuList() {
-        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;
     }
@@ -1860,10 +1905,24 @@ class SheetsBarComponent {
         this.renderer.setAttribute(tablist, 'id', this.tablistId);
         this.tabListSub = this.renderer.listen(tablist, 'keydown', this.onTabListKeyDown.bind(this));
     }
+    ngOnChanges(changes) {
+        var _a, _b;
+        if (changes['sheets']) {
+            this.sheetsMenuList = (_a = this.sheets) === null || _a === void 0 ? void 0 : _a.map(sheet => ({
+                text: sheet.text,
+                icon: this.hiddenStateIcons[sheet.state],
+                svgIcon: this.hiddenStateSVGIcons[sheet.state]
+            }));
+            this.sheets = (_b = changes['sheets'].currentValue) === null || _b === void 0 ? void 0 : _b.map((sheet, _, items) => (Object.assign(Object.assign({}, sheet), { sheetActions: getSheetActions(items, sheet)
+                    .map(item => (Object.assign(Object.assign({}, item), { text: this.messageFor(item.messageKey) }))) })));
+        }
+        ;
+    }
     ngOnDestroy() {
         if (this.tabListSub) {
             this.tabListSub();
         }
+        this.subs.unsubscribe();
     }
     onTabSelect(ev) {
         if (ev.title !== this.activeSheet) {
@@ -1889,11 +1948,13 @@ class SheetsBarComponent {
             this.openDialog(dataItem, sheet);
         }
         else {
-            this.actionsCallback[dataItem.commandName](sheet, dataItem.text);
+            this.actionsCallback[dataItem.commandName](sheet, dataItem.messageKey);
         }
     }
     onMenuItemClick(item) {
         const sheet = this.sheets.find(s => s.text === item.text);
+        sheet.state = 'visible';
+        this.spreadsheetService.spreadsheet.sheets().find(sh => sh.name() === sheet.text)._state('visible');
         this.selectSheet(sheet.text);
     }
     messageFor(key) {
@@ -1960,14 +2021,23 @@ class SheetsBarComponent {
     }
     notifySheetsChange() {
         this.ngZone.run(() => {
+            var _a;
             const newSheets = this.spreadsheetService.spreadsheet.sheets();
             const sheetDesc = mapToSheetDescriptor(newSheets);
-            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) })));
+            this.sheets = sheetDesc
+                .flatMap((item, index, items) => item.state === 'visible' ? [Object.assign(Object.assign({}, item), { state: item.state || 'visible', inEdit: false, first: index === 0, last: index === items.length - 1, text: item.name, active: (item.name === this.activeSheet) || items.length === 1, index, sheetActions: getSheetActions(items, item)
+                        .map(item => (Object.assign(Object.assign({}, item), { text: this.messageFor(item.messageKey) }))) })] : []);
+            this.sheetsMenuList = (_a = this.sheets) === null || _a === void 0 ? void 0 : _a.map(sheet => ({
+                text: sheet.text,
+                icon: this.hiddenStateIcons[sheet.state],
+                svgIcon: this.hiddenStateSVGIcons[sheet.state]
+            }));
         });
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.spreadsheetService.spreadsheet.view.clipboard.focus());
     }
 }
 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$1.DialogService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: { sheets: "sheets", sheetDescriptors: "sheetDescriptors" }, host: { properties: { "class.k-spreadsheet-sheets-bar": "this.hostClasses" } }, 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: `
+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 }], usesOnChanges: true, ngImport: i0, template: `
         <button kendoButton #addButton
             [title]="messageFor('addSheet')"
             type="button"
@@ -1995,27 +2065,30 @@ SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             [scrollable]="{prevButtonIcon: 'caret-alt-left', prevSVGButtonIcon: caretAltLeftIcon, nextButtonIcon: 'caret-alt-right', nextSVGButtonIcon: caretAltRightIcon}"
             class="k-spreadsheet-sheets k-overflow-hidden"
             (tabSelect)="onTabSelect($event)">
-            <kendo-tabstrip-tab *ngFor="let sheet of sheets"
-                [title]="sheet.text"
-                [selected]="sheet.text === activeSheet">
-                <ng-template kendoTabTemplate>
-                    <span class="k-link">{{sheet.text}}</span>
-                    <kendo-dropdownbutton #sheetDdb
-                        fillMode="flat"
-                        icon="caret-alt-down"
-                        [svgIcon]="caretAltDownIcon"
-                        buttonClass="k-menu-button"
-                        [data]="sheet.sheetActions"
-                        [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
-                        (open)="onOpen(sheetDdb)"
-                        (close)="onClose()"
-                        (click)="$event.stopPropagation()"
-                        (itemClick)="onActionClick($event, sheet)">
-                    </kendo-dropdownbutton>
-                </ng-template>
-            </kendo-tabstrip-tab>
+            <ng-container *ngFor="let sheet of sheets">
+                <kendo-tabstrip-tab
+                    *ngIf="sheet.state === 'visible'"
+                    [title]="sheet.text"
+                    [selected]="sheet.text === activeSheet">
+                    <ng-template kendoTabTemplate>
+                        <span class="k-link">{{sheet.text}}</span>
+                        <kendo-dropdownbutton #sheetDdb
+                            fillMode="flat"
+                            icon="caret-alt-down"
+                            [svgIcon]="caretAltDownIcon"
+                            buttonClass="k-menu-button"
+                            [data]="sheet.sheetActions"
+                            [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
+                            (open)="onOpen(sheetDdb)"
+                            (close)="onClose()"
+                            (click)="$event.stopPropagation()"
+                            (itemClick)="onActionClick($event, sheet)">
+                        </kendo-dropdownbutton>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+            </ng-container>
         </kendo-tabstrip>
-    `, isInline: true, components: [{ type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i4.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i5$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]" }] });
+    `, 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: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.TabTemplateDirective, selector: "[kendoTabTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SheetsBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -2048,25 +2121,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [scrollable]="{prevButtonIcon: 'caret-alt-left', prevSVGButtonIcon: caretAltLeftIcon, nextButtonIcon: 'caret-alt-right', nextSVGButtonIcon: caretAltRightIcon}"
             class="k-spreadsheet-sheets k-overflow-hidden"
             (tabSelect)="onTabSelect($event)">
-            <kendo-tabstrip-tab *ngFor="let sheet of sheets"
-                [title]="sheet.text"
-                [selected]="sheet.text === activeSheet">
-                <ng-template kendoTabTemplate>
-                    <span class="k-link">{{sheet.text}}</span>
-                    <kendo-dropdownbutton #sheetDdb
-                        fillMode="flat"
-                        icon="caret-alt-down"
-                        [svgIcon]="caretAltDownIcon"
-                        buttonClass="k-menu-button"
-                        [data]="sheet.sheetActions"
-                        [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
-                        (open)="onOpen(sheetDdb)"
-                        (close)="onClose()"
-                        (click)="$event.stopPropagation()"
-                        (itemClick)="onActionClick($event, sheet)">
-                    </kendo-dropdownbutton>
-                </ng-template>
-            </kendo-tabstrip-tab>
+            <ng-container *ngFor="let sheet of sheets">
+                <kendo-tabstrip-tab
+                    *ngIf="sheet.state === 'visible'"
+                    [title]="sheet.text"
+                    [selected]="sheet.text === activeSheet">
+                    <ng-template kendoTabTemplate>
+                        <span class="k-link">{{sheet.text}}</span>
+                        <kendo-dropdownbutton #sheetDdb
+                            fillMode="flat"
+                            icon="caret-alt-down"
+                            [svgIcon]="caretAltDownIcon"
+                            buttonClass="k-menu-button"
+                            [data]="sheet.sheetActions"
+                            [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
+                            (open)="onOpen(sheetDdb)"
+                            (close)="onClose()"
+                            (click)="$event.stopPropagation()"
+                            (itemClick)="onActionClick($event, sheet)">
+                        </kendo-dropdownbutton>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+            </ng-container>
         </kendo-tabstrip>
     `
                 }]
@@ -2100,7 +2176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class MessagesDirective extends ComponentMessages {
 }
 MessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessagesDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-MessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: MessagesDirective, selector: "[kendoSpreadsheetMessages]", inputs: { home: "home", file: "file", insert: "insert", formatTab: "formatTab", saveFile: "saveFile", loadFile: "loadFile", bold: "bold", italic: "italic", underline: "underline", format: "format", fontFamily: "fontFamily", fontSize: "fontSize", undo: "undo", redo: "redo", background: "background", color: "color", gridLines: "gridLines", addColumnLeft: "addColumnLeft", addColumnRight: "addColumnRight", addRowBelow: "addRowBelow", addRowAbove: "addRowAbove", deleteColumn: "deleteColumn", deleteRow: "deleteRow", wrap: "wrap", align: "align", alignHorizontal: "alignHorizontal", alignVertical: "alignVertical", alignLeft: "alignLeft", alignCenter: "alignCenter", alignRight: "alignRight", alignJustify: "alignJustify", alignTop: "alignTop", alignMiddle: "alignMiddle", alignBottom: "alignBottom", dialogApply: "dialogApply", dialogCancel: "dialogCancel", dialogDelete: "dialogDelete", dialogRename: "dialogRename", dialogInsert: "dialogInsert", dialogRemoveLink: "dialogRemoveLink", delete: "delete", rename: "rename", nameBox: "nameBox", formulaInput: "formulaInput", addSheet: "addSheet", sheetsMenu: "sheetsMenu", view: "view", merge: "merge", mergeHorizontally: "mergeHorizontally", mergeVertically: "mergeVertically", mergeAll: "mergeAll", unmerge: "unmerge", insertLink: "insertLink", increaseDecimal: "increaseDecimal", decreaseDecimal: "decreaseDecimal", increaseFontSize: "increaseFontSize", decreaseFontSize: "decreaseFontSize", openUnsupported: "openUnsupported", modifyMerged: "modifyMerged", cannotModifyDisabled: "cannotModifyDisabled", dialogOk: "dialogOk", dialogError: "dialogError", duplicateSheetName: "duplicateSheetName", copy: "copy", cut: "cut", paste: "paste", hideRow: "hideRow", unhideRow: "unhideRow", hideColumn: "hideColumn", unhideColumn: "unhideColumn" }, usesInheritance: true, ngImport: i0 });
+MessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: MessagesDirective, selector: "[kendoSpreadsheetMessages]", inputs: { home: "home", file: "file", insert: "insert", formatTab: "formatTab", saveFile: "saveFile", loadFile: "loadFile", bold: "bold", italic: "italic", underline: "underline", format: "format", fontFamily: "fontFamily", fontSize: "fontSize", undo: "undo", redo: "redo", background: "background", color: "color", gridLines: "gridLines", addColumnLeft: "addColumnLeft", addColumnRight: "addColumnRight", addRowBelow: "addRowBelow", addRowAbove: "addRowAbove", deleteColumn: "deleteColumn", deleteRow: "deleteRow", wrap: "wrap", align: "align", alignHorizontal: "alignHorizontal", alignVertical: "alignVertical", alignLeft: "alignLeft", alignCenter: "alignCenter", alignRight: "alignRight", alignJustify: "alignJustify", alignTop: "alignTop", alignMiddle: "alignMiddle", alignBottom: "alignBottom", dialogApply: "dialogApply", dialogCancel: "dialogCancel", dialogDelete: "dialogDelete", dialogRename: "dialogRename", dialogInsert: "dialogInsert", dialogRemoveLink: "dialogRemoveLink", delete: "delete", rename: "rename", nameBox: "nameBox", formulaInput: "formulaInput", addSheet: "addSheet", sheetsMenu: "sheetsMenu", view: "view", merge: "merge", mergeHorizontally: "mergeHorizontally", mergeVertically: "mergeVertically", mergeAll: "mergeAll", unmerge: "unmerge", insertLink: "insertLink", increaseDecimal: "increaseDecimal", decreaseDecimal: "decreaseDecimal", increaseFontSize: "increaseFontSize", decreaseFontSize: "decreaseFontSize", openUnsupported: "openUnsupported", modifyMerged: "modifyMerged", cannotModifyDisabled: "cannotModifyDisabled", dialogOk: "dialogOk", dialogError: "dialogError", duplicateSheetName: "duplicateSheetName", copy: "copy", cut: "cut", paste: "paste", hideRow: "hideRow", unhideRow: "unhideRow", hideColumn: "hideColumn", unhideColumn: "unhideColumn", sheetDelete: "sheetDelete", sheetRename: "sheetRename", sheetHide: "sheetHide", sheetDuplicate: "sheetDuplicate", sheetMoveLeft: "sheetMoveLeft", sheetMoveRight: "sheetMoveRight" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessagesDirective, decorators: [{
             type: Directive,
             args: [{
@@ -2246,6 +2322,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], unhideColumn: [{
                 type: Input
+            }], sheetDelete: [{
+                type: Input
+            }], sheetRename: [{
+                type: Input
+            }], sheetHide: [{
+                type: Input
+            }], sheetDuplicate: [{
+                type: Input
+            }], sheetMoveLeft: [{
+                type: Input
+            }], sheetMoveRight: [{
+                type: Input
             }] } });
 
 /**
@@ -2594,9 +2682,7 @@ class SpreadsheetHorizontalTextAlignDirective {
         host.icon = commandIcons[this.commandName];
         host.arrowIcon = true;
         host.fillMode = 'flat';
-        host.data = ALIGNS
-            .filter(value => value.commandName === 'textAlign')
-            .map(item => (Object.assign(Object.assign({}, item), { textKey: localization.get(item.commandId) })));
+        host.data = ALIGNS.flatMap(item => item.commandName === 'textAlign' ? [Object.assign(Object.assign({}, item), { textKey: localization.get(item.commandId) })] : []);
         this.subs.add(host.itemClick.subscribe((e) => this.onItemClick(e)));
         host.title = localization.get(this.commandName);
         host.textField = 'textKey';
@@ -2638,9 +2724,7 @@ class SpreadsheetVerticalTextAlignDirective {
         host.icon = commandIcons[this.commandName];
         host.arrowIcon = true;
         host.fillMode = 'flat';
-        host.data = ALIGNS
-            .filter(value => value.commandName === 'verticalAlign')
-            .map(item => (Object.assign(Object.assign({}, item), { textKey: localization.get(item.commandId) })));
+        host.data = ALIGNS.flatMap(item => item.commandName === 'verticalAlign' ? [Object.assign(Object.assign({}, item), { textKey: localization.get(item.commandId) })] : []);
         this.subs.add(host.itemClick.subscribe((e) => this.onItemClick(e)));
         host.title = localization.get(this.commandName);
         host.textField = 'textKey';
@@ -3179,6 +3263,16 @@ class SpreadsheetComponent {
         this.showLicenseWatermark = false;
         this.contextMenuItems = [];
         this.subs = new Subscription();
+        /**
+         * @hidden
+         */
+        this.onKeyDown = (e) => {
+            const isCtrl = e.ctrlKey || e.metaKey;
+            const shift = e.shiftKey;
+            if (isCtrl && shift && e.keyCode === Keys.KeyS) {
+                this.spreadsheetService.onSheetsBarFocus.next();
+            }
+        };
         this.onChange = (e) => {
             hasObservers(this.change) && this.change.emit(e);
             this.spreadsheetService.selectionChanged.next(e.range);
@@ -3273,7 +3367,7 @@ class SpreadsheetComponent {
      * An array which defines the document sheets and their content.
      */
     set sheets(value) {
-        const items = value.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) })));
+        const items = value.map((item, index, items) => (Object.assign(Object.assign({}, item), { state: item.state || 'visible', inEdit: false, first: index === 0, last: index === items.length - 1, text: item.name, active: (item.name === this.activeSheet) || items.length === 1, index })));
         this._sheetsInfo = items;
     }
     get sheetsInfo() {
@@ -3295,6 +3389,7 @@ class SpreadsheetComponent {
                 spreadsheet.bind('changeFormat', this.onChangeFormat);
                 spreadsheet.bind('excelImport', this.onExcelImport);
                 spreadsheet.bind('excelExport', this.onExcelExport);
+                spreadsheet.bind('keydown', this.onKeyDown);
                 spreadsheet.view.bind('update', this.updateState);
                 spreadsheet.view.bind('message', this.onMessage);
                 spreadsheet.bind('contextmenu', this.onContextMenu.bind(this));
@@ -3306,7 +3401,7 @@ class SpreadsheetComponent {
                 if (!this.sheetsInfo) {
                     this.ngZone.run(() => {
                         const defaultSheetDescriptors = mapToSheetDescriptor([spreadsheet === null || spreadsheet === void 0 ? void 0 : spreadsheet.activeSheet()]);
-                        this._sheetsInfo = [Object.assign(Object.assign({ text: this.spreadsheetService.currentActiveSheet, first: true, last: true }, defaultSheetDescriptors), { sheetActions: getSheetActions(0, defaultSheetDescriptors) })];
+                        this._sheetsInfo = [Object.assign(Object.assign({ text: this.spreadsheetService.currentActiveSheet, first: true, last: true, state: 'visible' }, defaultSheetDescriptors), { sheetActions: getSheetActions(defaultSheetDescriptors).map(item => (Object.assign(Object.assign({}, item), { text: this.messageFor(item.messageKey) }))) })];
                     });
                 }
             });
@@ -3767,7 +3862,19 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             i18n-hideColumn="kendo.spreadsheet.hideColumn|The Hide column command text."
             hideColumn="Hide"
             i18n-unhideColumn="kendo.spreadsheet.unhideColumn|The Unhide column command text."
-            unhideColumn="Unhide">
+            unhideColumn="Unhide"
+            i18n-sheetDelete="kendo.spreadsheet.sheetDelete|The text of the Sheet menu Delete option."
+            sheetDelete="Delete"
+            i18n-sheetRename="kendo.spreadsheet.sheetRename|The text of the Sheet menu Rename option."
+            sheetRename="Rename"
+            i18n-sheetDuplicate="kendo.spreadsheet.sheetDuplicate|The text of the Sheet menu Duplicate option."
+            sheetDuplicate="Duplicate"
+            i18n-sheetHide="kendo.spreadsheet.sheetHide|The text of the Sheet menu Hide option."
+            sheetHide="Hide"
+            i18n-sheetMoveLeft="kendo.spreadsheet.sheetMoveLeft|The text of the Sheet menu Move Left option."
+            sheetMoveLeft="Move Left"
+            i18n-sheetMoveRight="kendo.spreadsheet.sheetMoveRight|The text of the Sheet menu Move Right option."
+            sheetMoveRight="Move Right">
         </ng-container>
         <div class="k-spreadsheet-header">
             <kendo-menu kendoSpreadsheetMenu (select)="onMenuItemSelect($event)">
@@ -4034,7 +4141,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             i18n-hideColumn="kendo.spreadsheet.hideColumn|The Hide column command text."
             hideColumn="Hide"
             i18n-unhideColumn="kendo.spreadsheet.unhideColumn|The Unhide column command text."
-            unhideColumn="Unhide">
+            unhideColumn="Unhide"
+            i18n-sheetDelete="kendo.spreadsheet.sheetDelete|The text of the Sheet menu Delete option."
+            sheetDelete="Delete"
+            i18n-sheetRename="kendo.spreadsheet.sheetRename|The text of the Sheet menu Rename option."
+            sheetRename="Rename"
+            i18n-sheetDuplicate="kendo.spreadsheet.sheetDuplicate|The text of the Sheet menu Duplicate option."
+            sheetDuplicate="Duplicate"
+            i18n-sheetHide="kendo.spreadsheet.sheetHide|The text of the Sheet menu Hide option."
+            sheetHide="Hide"
+            i18n-sheetMoveLeft="kendo.spreadsheet.sheetMoveLeft|The text of the Sheet menu Move Left option."
+            sheetMoveLeft="Move Left"
+            i18n-sheetMoveRight="kendo.spreadsheet.sheetMoveRight|The text of the Sheet menu Move Right option."
+            sheetMoveRight="Move Right">
         </ng-container>
         <div class="k-spreadsheet-header">
             <kendo-menu kendoSpreadsheetMenu (select)="onMenuItemSelect($event)">