@progress/kendo-angular-spreadsheet 14.3.0-develop.1 → 14.3.0-develop.11

package/action-bar/formula-input.directive.d.ts

@@ -22,6 +22,7 @@ export declare class FormulaInputDirective {
     ariaHasPopup: string;
     ariaExpanded: string;
     get ariaControls(): string;
+    formulaListMaxHeight: string;
     list: FormulaListComponent;
     data: any[];
     constructor(element: ElementRef, popupService: PopupService, spreadsheetService: SpreadsheetService, localization: SpreadsheetLocalizationService);
@@ -33,5 +34,5 @@ export declare class FormulaInputDirective {
     private unfocus;
     private focusNext;
     static ɵfac: i0.ɵɵFactoryDeclaration<FormulaInputDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<FormulaInputDirective, "[kendoSpreadsheetFormulaInput]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FormulaInputDirective, "[kendoSpreadsheetFormulaInput]", never, { "formulaListMaxHeight": "formulaListMaxHeight"; }, {}, never>;
 }

package/action-bar/list.component.d.ts

@@ -13,11 +13,12 @@ export declare class FormulaListComponent {
     element: ElementRef;
     private spreadsheetService;
     id: string;
+    maxHeight: string;
     data: any[];
     itemClick: (value: any) => void;
     formulaFxIcon: SVGIcon;
     constructor(element: ElementRef, spreadsheetService: SpreadsheetService);
     handleMouseDown: (ev: MouseEvent) => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FormulaListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FormulaListComponent, "kendo-spreadsheet-formula-list", never, { "data": "data"; "itemClick": "itemClick"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormulaListComponent, "kendo-spreadsheet-formula-list", never, { "maxHeight": "maxHeight"; "data": "data"; "itemClick": "itemClick"; }, {}, never, never>;
 }

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/action-bar/formula-input.directive.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive, ElementRef, HostBinding } from '@angular/core';
+import { Directive, ElementRef, HostBinding, Input } from '@angular/core';
 import { FormulaListComponent } from './list.component';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { SpreadsheetService } from '../common/spreadsheet.service';
@@ -46,6 +46,23 @@ export class FormulaInputDirective {
             }
             if (next) {
                 next.classList.add('k-focus');
+                const { offsetTop, offsetHeight, parentElement } = next;
+                if (dir > 0) {
+                    if (offsetTop + offsetHeight >= parentElement.offsetHeight + parentElement.scrollTop) {
+                        parentElement.scrollTop = Math.min(parentElement.scrollTop + offsetHeight, parentElement.scrollHeight - parentElement.offsetHeight);
+                    }
+                    if (next === items[0]) {
+                        next.scrollIntoView();
+                    }
+                }
+                else {
+                    if (offsetTop <= parentElement.scrollTop) {
+                        parentElement.scrollTop = Math.max(parentElement.scrollTop - offsetHeight, 0);
+                    }
+                    if (next === items[items.length - 1]) {
+                        next.scrollIntoView();
+                    }
+                }
             }
         };
     }
@@ -110,6 +127,7 @@ export class FormulaInputDirective {
                     this.list = list;
                     list.data = this.data;
                     list.itemClick = this.handler;
+                    list.maxHeight = this.formulaListMaxHeight;
                     this.ariaExpanded = 'true';
                 },
                 close: () => {
@@ -128,7 +146,7 @@ export class FormulaInputDirective {
     }
 }
 FormulaInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormulaInputDirective, deps: [{ token: i0.ElementRef }, { token: i1.PopupService }, { token: i2.SpreadsheetService }, { token: i3.SpreadsheetLocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-FormulaInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]", host: { properties: { "class.k-spreadsheet-formula-input": "this.hostClasses", "attr.title": "this.title", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-controls": "this.ariaControls" } }, ngImport: i0 });
+FormulaInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]", inputs: { formulaListMaxHeight: "formulaListMaxHeight" }, host: { properties: { "class.k-spreadsheet-formula-input": "this.hostClasses", "attr.title": "this.title", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-controls": "this.ariaControls" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormulaInputDirective, decorators: [{
             type: Directive,
             args: [{
@@ -152,4 +170,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], ariaControls: [{
                 type: HostBinding,
                 args: ['attr.aria-controls']
+            }], formulaListMaxHeight: [{
+                type: Input
             }] } });

package/esm2020/action-bar/list.component.mjs

@@ -26,10 +26,12 @@ export class FormulaListComponent {
     }
 }
 FormulaListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormulaListComponent, deps: [{ token: i0.ElementRef }, { token: i1.SpreadsheetService }], target: i0.ɵɵFactoryTarget.Component });
-FormulaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FormulaListComponent, selector: "kendo-spreadsheet-formula-list", inputs: { data: "data", itemClick: "itemClick" }, host: { properties: { "attr.id": "this.id" } }, ngImport: i0, template: `
+FormulaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FormulaListComponent, selector: "kendo-spreadsheet-formula-list", inputs: { maxHeight: "maxHeight", data: "data", itemClick: "itemClick" }, host: { properties: { "attr.id": "this.id" } }, ngImport: i0, template: `
         <ul #ulRef
             class="k-spreadsheet-formula-list k-list-ul k-list-md k-group k-reset"
             role="menu"
+            [style.overflowY]="'auto'"
+            [style.maxHeight]="maxHeight"
             [kendoEventsOutsideAngular]="{mousedown: handleMouseDown}">
                 <li *ngFor="let item of data"
                     (click)="itemClick(item.text)"
@@ -51,6 +53,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <ul #ulRef
             class="k-spreadsheet-formula-list k-list-ul k-list-md k-group k-reset"
             role="menu"
+            [style.overflowY]="'auto'"
+            [style.maxHeight]="maxHeight"
             [kendoEventsOutsideAngular]="{mousedown: handleMouseDown}">
                 <li *ngFor="let item of data"
                     (click)="itemClick(item.text)"
@@ -68,6 +72,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.SpreadsheetService }]; }, propDecorators: { id: [{
                 type: HostBinding,
                 args: ['attr.id']
+            }], maxHeight: [{
+                type: Input
             }], data: [{
                 type: Input
             }], itemClick: [{

package/esm2020/common/error-handling.service.mjs

@@ -8,6 +8,7 @@ import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs';
 import { SpreadsheetService } from './spreadsheet.service';
 import { take } from 'rxjs/operators';
+import { replaceMessagePlaceholder } from '../utils';
 import * as i0 from "@angular/core";
 import * as i1 from "./spreadsheet.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -41,10 +42,22 @@ export class ErrorHandlingService {
         this.openDialog(messageData);
     }
     openDialog(messageData) {
+        let dialogContent;
+        if (messageData.name === 'message') {
+            const localizationMsg = this.messageFor('invalidNameError');
+            let inputValue = messageData.text.split(' ').pop();
+            if (messageData.text.startsWith('Parse')) {
+                inputValue = inputValue.substring(0, inputValue.length - 1);
+            }
+            dialogContent = replaceMessagePlaceholder(localizationMsg, 'inputValue', inputValue);
+        }
+        else {
+            dialogContent = this.messageFor(messageData.name);
+        }
         const dialogSettings = {
             appendTo: this.spreadsheetService.dialogContainer,
             title: this.messageFor('dialogError'),
-            content: this.messageFor(messageData.name),
+            content: dialogContent,
             actions: [{
                     text: this.messageFor('dialogOk'),
                     themeColor: 'primary'

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", invalidNameError: "invalidNameError" }, 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,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
+            }], invalidNameError: [{
+                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: 1701695065,
-    version: '14.3.0-develop.1',
+    publishDate: 1702311309,
+    version: '14.3.0-develop.11',
     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/action-dialog.component.mjs

@@ -42,7 +42,7 @@ ActionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </div>
             </div>
         </form>
-    `, isInline: true, components: [{ type: i2.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ActionDialogComponent, decorators: [{
             type: Component,
             args: [{

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,54 @@ 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;
+                const sheets = this.spreadsheetService.spreadsheet.sheets();
+                if (isMoveRight) {
+                    for (let i = 0; i < sheets.length; i++) {
+                        if (sheets[i].name() === sheetInfo.text) {
+                            oldIndex = i;
+                        }
+                        if (oldIndex > -1 && i > oldIndex && sheets[i]._state() === 'visible') {
+                            newIndex = i;
+                            break;
+                        }
+                    }
+                }
+                else {
+                    for (let i = sheets.length - 1; i >= 0; i--) {
+                        if (sheets[i].name() === sheetInfo.text) {
+                            oldIndex = i;
+                        }
+                        if (oldIndex > -1 && (i < oldIndex) && sheets[i]._state() === 'visible') {
+                            newIndex = i;
+                            break;
+                        }
+                    }
+                }
                 const sheetsBar = this.spreadsheetService.spreadsheet.view.sheetsbar;
                 sheetsBar.onSheetReorderEnd({ oldIndex, newIndex });
+                this.selectSheet(sheetInfo.text);
+                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 +136,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 +181,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) {
@@ -153,7 +214,9 @@ export class SheetsBarComponent {
             if (event.text === this.messageFor(dataItem.dialogButton)) {
                 const sheetsBar = this.spreadsheetService.spreadsheet.view.sheetsbar;
                 if (sheetsBar) {
-                    dataItem.commandName === 'delete' ? sheetsBar.onSheetRemove(sheet.text) : sheetsBar.onSheetRename(dialogContent.value, this.sheets.indexOf(sheet));
+                    const allSheets = this.spreadsheetService.spreadsheet.sheets();
+                    const sheetIndex = allSheets.findIndex(s => s.name() === sheet.text);
+                    dataItem.commandName === 'delete' ? sheetsBar.onSheetRemove(sheet.text) : sheetsBar.onSheetRename(dialogContent.value, sheetIndex);
                     this.notifySheetsChange();
                 }
             }
@@ -195,21 +258,29 @@ 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,
+                    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 +308,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 +364,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
         }];
 };