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

package/fesm2020/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 { Subject, Subscription } from 'rxjs';
 import * as i2 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages } from '@progress/kendo-angular-l10n';
@@ -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',
 };
 
@@ -59,6 +59,7 @@ let spreadsheetCounter = 0;
 class SpreadsheetService {
     constructor() {
         this.sheetsChanged = new Subject();
+        this.onSheetsBarFocus = new Subject();
         this.activeSheetChanged = new Subject();
         this.selectionChanged = new Subject();
         spreadsheetCounter++;
@@ -188,7 +189,8 @@ const mapToSheetDescriptor = (sheetsArray) => {
             name: sheet.name(),
             rows: sheet._rows,
             selection: sheet.selection(),
-            showGridLines: sheet.showGridLines
+            showGridLines: sheet.showGridLines,
+            state: sheet.state()
         };
     });
 };
@@ -403,41 +405,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
         }];
 };
 
@@ -1778,14 +1784,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();
@@ -1807,21 +1822,52 @@ class SheetsBarComponent {
                 this.spreadsheetService.spreadsheet.insertSheet({ data: { ...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() {
         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;
     }
@@ -1837,10 +1883,26 @@ class SheetsBarComponent {
         this.renderer.setAttribute(tablist, 'id', this.tablistId);
         this.tabListSub = this.renderer.listen(tablist, 'keydown', this.onTabListKeyDown.bind(this));
     }
+    ngOnChanges(changes) {
+        if (changes['sheets']) {
+            this.sheetsMenuList = this.sheets?.map(sheet => ({
+                text: sheet.text,
+                icon: this.hiddenStateIcons[sheet.state],
+                svgIcon: this.hiddenStateSVGIcons[sheet.state]
+            }));
+            this.sheets = changes['sheets'].currentValue?.map((sheet, _, items) => ({
+                ...sheet,
+                sheetActions: getSheetActions(items, sheet)
+                    .map(item => ({ ...item, text: this.messageFor(item.messageKey) }))
+            }));
+        }
+        ;
+    }
     ngOnDestroy() {
         if (this.tabListSub) {
             this.tabListSub();
         }
+        this.subs.unsubscribe();
     }
     onTabSelect(ev) {
         if (ev.title !== this.activeSheet) {
@@ -1866,11 +1928,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) {
@@ -1939,21 +2003,30 @@ class SheetsBarComponent {
         this.ngZone.run(() => {
             const newSheets = this.spreadsheetService.spreadsheet.sheets();
             const sheetDesc = mapToSheetDescriptor(newSheets);
-            this.sheets = sheetDesc.map((item, index, items) => ({
-                ...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' ? [{
+                    ...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 => ({ ...item, text: this.messageFor(item.messageKey) }))
+                }] : []);
+            this.sheetsMenuList = this.sheets?.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"
@@ -1981,27 +2054,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: [{
@@ -2034,25 +2110,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>
     `
                 }]
@@ -2086,7 +2165,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: [{
@@ -2232,6 +2311,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
             }] } });
 
 /**
@@ -2581,9 +2672,7 @@ class SpreadsheetHorizontalTextAlignDirective {
         host.icon = commandIcons[this.commandName];
         host.arrowIcon = true;
         host.fillMode = 'flat';
-        host.data = ALIGNS
-            .filter(value => value.commandName === 'textAlign')
-            .map(item => ({ ...item, textKey: localization.get(item.commandId) }));
+        host.data = ALIGNS.flatMap(item => item.commandName === 'textAlign' ? [{ ...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';
@@ -2625,9 +2714,7 @@ class SpreadsheetVerticalTextAlignDirective {
         host.icon = commandIcons[this.commandName];
         host.arrowIcon = true;
         host.fillMode = 'flat';
-        host.data = ALIGNS
-            .filter(value => value.commandName === 'verticalAlign')
-            .map(item => ({ ...item, textKey: localization.get(item.commandId) }));
+        host.data = ALIGNS.flatMap(item => item.commandName === 'verticalAlign' ? [{ ...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';
@@ -3165,6 +3252,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);
@@ -3258,13 +3355,13 @@ class SpreadsheetComponent {
     set sheets(value) {
         const items = value.map((item, index, items) => ({
             ...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(index, items)
+            index
         }));
         this._sheetsInfo = items;
     }
@@ -3286,6 +3383,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));
@@ -3297,7 +3395,13 @@ class SpreadsheetComponent {
                 if (!this.sheetsInfo) {
                     this.ngZone.run(() => {
                         const defaultSheetDescriptors = mapToSheetDescriptor([spreadsheet?.activeSheet()]);
-                        this._sheetsInfo = [{ text: this.spreadsheetService.currentActiveSheet, first: true, last: true, ...defaultSheetDescriptors, sheetActions: getSheetActions(0, defaultSheetDescriptors) }];
+                        this._sheetsInfo = [{
+                                text: this.spreadsheetService.currentActiveSheet,
+                                first: true, last: true,
+                                state: 'visible',
+                                ...defaultSheetDescriptors,
+                                sheetActions: getSheetActions(defaultSheetDescriptors).map(item => ({ ...item, text: this.messageFor(item.messageKey) }))
+                            }];
                     });
                 }
             });
@@ -3772,7 +3876,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)">
@@ -4039,7 +4155,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)">

package/localization/messages.d.ts

@@ -288,6 +288,30 @@ export declare class MessagesDirective extends ComponentMessages {
      * The Unhide column command text
      */
     unhideColumn: string;
+    /**
+     * The text of the Sheet menu Delete option
+     */
+    sheetDelete: string;
+    /**
+     * The text of the Sheet menu Rename option
+     */
+    sheetRename: string;
+    /**
+     * The text of the Sheet menu Hide option
+     */
+    sheetHide: string;
+    /**
+     * The text of the Sheet menu Duplicate option
+     */
+    sheetDuplicate: string;
+    /**
+     * The text of the Sheet menu Move Left option
+     */
+    sheetMoveLeft: string;
+    /**
+     * The text of the Sheet menu Move Right option
+     */
+    sheetMoveRight: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessagesDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MessagesDirective, "[kendoSpreadsheetMessages]", never, { "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"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MessagesDirective, "[kendoSpreadsheetMessages]", never, { "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"; }, {}, never>;
 }

package/models/sheet-info.d.ts

@@ -10,6 +10,7 @@ import { ListItemModel } from '@progress/kendo-angular-buttons';
 export declare type SheetAction = ListItemModel & {
     commandName: string;
     dialogButton?: string;
+    messageKey?: string;
 };
 /**
  * @hidden

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-spreadsheet",
-  "version": "14.3.0-develop.3",
+  "version": "14.3.0-develop.5",
   "description": "A Spreadsheet Component for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -23,22 +23,22 @@
     "@angular/core": "13 - 17",
     "@angular/platform-browser": "13 - 17",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "14.3.0-develop.3",
-    "@progress/kendo-angular-common": "14.3.0-develop.3",
-    "@progress/kendo-angular-dialog": "14.3.0-develop.3",
-    "@progress/kendo-angular-dropdowns": "14.3.0-develop.3",
-    "@progress/kendo-angular-icons": "14.3.0-develop.3",
-    "@progress/kendo-angular-l10n": "14.3.0-develop.3",
-    "@progress/kendo-angular-layout": "14.3.0-develop.3",
-    "@progress/kendo-angular-menu": "14.3.0-develop.3",
-    "@progress/kendo-angular-popup": "14.3.0-develop.3",
-    "@progress/kendo-angular-toolbar": "14.3.0-develop.3",
-    "@progress/kendo-angular-intl": "14.3.0-develop.3",
+    "@progress/kendo-angular-buttons": "14.3.0-develop.5",
+    "@progress/kendo-angular-common": "14.3.0-develop.5",
+    "@progress/kendo-angular-dialog": "14.3.0-develop.5",
+    "@progress/kendo-angular-dropdowns": "14.3.0-develop.5",
+    "@progress/kendo-angular-icons": "14.3.0-develop.5",
+    "@progress/kendo-angular-l10n": "14.3.0-develop.5",
+    "@progress/kendo-angular-layout": "14.3.0-develop.5",
+    "@progress/kendo-angular-menu": "14.3.0-develop.5",
+    "@progress/kendo-angular-popup": "14.3.0-develop.5",
+    "@progress/kendo-angular-toolbar": "14.3.0-develop.5",
+    "@progress/kendo-angular-intl": "14.3.0-develop.5",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "14.3.0-develop.3",
+    "@progress/kendo-angular-schematics": "14.3.0-develop.5",
     "@progress/jszip-esm": "^1.0.3",
     "@progress/kendo-common": "^0.2.2",
     "@progress/kendo-date-math": "^1.5.10",