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

package/common/spreadsheet.service.d.ts

@@ -14,6 +14,7 @@ import * as i0 from "@angular/core";
 export declare class SpreadsheetService {
     spreadsheet: SpreadsheetWidget;
     sheetsChanged: Subject<SheetsChanges>;
+    onSheetsBarFocus: Subject<any>;
     activeSheetChanged: Subject<Sheet>;
     selectionChanged: Subject<Range>;
     dialogContainer: ViewContainerRef;

package/esm2020/common/spreadsheet.service.mjs

@@ -12,6 +12,7 @@ let spreadsheetCounter = 0;
 export class SpreadsheetService {
     constructor() {
         this.sheetsChanged = new Subject();
+        this.onSheetsBarFocus = new Subject();
         this.activeSheetChanged = new Subject();
         this.selectionChanged = new Subject();
         spreadsheetCounter++;

package/esm2020/localization/messages.mjs

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 export 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: [{
@@ -157,4 +157,16 @@ 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
             }] } });

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-spreadsheet',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1701764808,
-    version: '14.3.0-develop.3',
+    publishDate: 1701780650,
+    version: '14.3.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning',
 };

package/esm2020/sheets-bar/sheets-bar.component.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, ElementRef, HostBinding, Input, NgZone, QueryList, Renderer2, ViewChild, ViewChildren } from '@angular/core';
-import { caretAltDownIcon, menuIcon, plusIcon, caretAltLeftIcon, caretAltRightIcon, eyeIcon } from '@progress/kendo-svg-icons';
+import { caretAltDownIcon, menuIcon, plusIcon, caretAltLeftIcon, caretAltRightIcon, eyeIcon, eyeSlashIcon } from '@progress/kendo-svg-icons';
 import { SpreadsheetService } from '../common/spreadsheet.service';
 import { ButtonComponent, DropDownButtonComponent } from '@progress/kendo-angular-buttons';
 import { Keys, isDocumentAvailable, isPresent } from '@progress/kendo-angular-common';
@@ -14,6 +14,7 @@ import { ActionDialogComponent } from './action-dialog.component';
 import { TabStripComponent } from '@progress/kendo-angular-layout';
 import { mapToSheetDescriptor } from '../utils';
 import { getSheetActions } from './utils';
+import { Subscription } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "../common/spreadsheet.service";
 import * as i2 from "../localization/spreadsheet-localization.service";
@@ -34,14 +35,23 @@ export 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();
@@ -63,21 +73,52 @@ export 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;
     }
@@ -93,10 +134,26 @@ export 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) {
@@ -122,11 +179,13 @@ export 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) {
@@ -195,21 +254,30 @@ export 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: i1.SpreadsheetService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.SpreadsheetLocalizationService }, { token: i3.DialogService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: { sheets: "sheets", sheetDescriptors: "sheetDescriptors" }, host: { 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"
@@ -237,27 +305,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.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i5.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }], directives: [{ type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.TabTemplateDirective, selector: "[kendoTabTemplate]" }] });
+    `, isInline: true, components: [{ type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i4.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i5.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i5.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }], directives: [{ type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.TabTemplateDirective, selector: "[kendoTabTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SheetsBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -290,25 +361,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>
     `
                 }]

package/esm2020/sheets-bar/utils.mjs

@@ -2,44 +2,48 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { trashIcon, pencilIcon, copyIcon, arrowRightIcon, arrowLeftIcon } from '@progress/kendo-svg-icons';
+import { trashIcon, pencilIcon, copyIcon, arrowRightIcon, arrowLeftIcon, eyeSlashIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
-export const getSheetActions = (index, items) => {
+export 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
         }];
 };

package/esm2020/spreadsheet.component.mjs

@@ -12,7 +12,7 @@ import { SpreadsheetService } from './common/spreadsheet.service';
 import { SpreadsheetToolsService } from './tools/tools.service';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { SpreadsheetLocalizationService } from './localization/spreadsheet-localization.service';
-import { hasObservers, isDocumentAvailable, isPresent, shouldShowValidationUI } from '@progress/kendo-angular-common';
+import { Keys, hasObservers, isDocumentAvailable, isPresent, shouldShowValidationUI } from '@progress/kendo-angular-common';
 import { mapToSheetDescriptor } from './utils';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { FormulaInputDirective } from './action-bar/formula-input.directive';
@@ -160,6 +160,16 @@ export 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);
@@ -253,13 +263,13 @@ export 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;
     }
@@ -281,6 +291,7 @@ export 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));
@@ -292,7 +303,13 @@ export 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) }))
+                            }];
                     });
                 }
             });
@@ -767,7 +784,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)">
@@ -1034,7 +1063,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/esm2020/tools/align/horizontal-align-tool.directive.mjs

@@ -29,9 +29,7 @@ export 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';

package/esm2020/tools/align/vertical-align-tool.directive.mjs

@@ -29,9 +29,7 @@ export 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';

package/esm2020/utils.mjs

@@ -19,7 +19,8 @@ export const mapToSheetDescriptor = (sheetsArray) => {
             name: sheet.name(),
             rows: sheet._rows,
             selection: sheet.selection(),
-            showGridLines: sheet.showGridLines
+            showGridLines: sheet.showGridLines,
+            state: sheet.state()
         };
     });
 };