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

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

@@ -8,7 +8,7 @@ import { validatePackage } from '@progress/kendo-licensing';
 import { SpreadsheetWidget } from '@progress/kendo-spreadsheet-common';
 import * as i1$4 from '@progress/kendo-angular-intl';
 import { localeData, IntlModule } from '@progress/kendo-angular-intl';
-import { formulaFxIcon, trashIcon, copyIcon, pencilIcon, arrowRightIcon, arrowLeftIcon, alignCenterIcon, alignJustifyIcon, alignLeftIcon, alignRightIcon, alignTopIcon, alignMiddleIcon, alignBottomIcon, dropletIcon, boldIcon, foregroundColorIcon, italicIcon, arrowRotateCwIcon, underlineIcon, arrowRotateCcwIcon, textWrapIcon, tableColumnInsertLeftIcon, tableColumnInsertRightIcon, tableRowInsertAboveIcon, tableRowInsertBelowIcon, tableRowDeleteIcon, tableColumnDeleteIcon, bordersNoneIcon, folderOpenIcon, downloadIcon, customFormatIcon, fontSizeIcon, fontFamilyIcon, cellsMergeIcon, cellsMergeHorizontallyIcon, cellsMergeVerticallyIcon, tableUnmergeIcon, linkIcon, fontGrowIcon, fontShrinkIcon, decimalDecreaseIcon, decimalIncreaseIcon, plusIcon, menuIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, eyeIcon } from '@progress/kendo-svg-icons';
+import { formulaFxIcon, trashIcon, copyIcon, pencilIcon, eyeSlashIcon, arrowRightIcon, arrowLeftIcon, alignCenterIcon, alignJustifyIcon, alignLeftIcon, alignRightIcon, alignTopIcon, alignMiddleIcon, alignBottomIcon, dropletIcon, boldIcon, foregroundColorIcon, italicIcon, arrowRotateCwIcon, underlineIcon, arrowRotateCcwIcon, textWrapIcon, tableColumnInsertLeftIcon, tableColumnInsertRightIcon, tableRowInsertAboveIcon, tableRowInsertBelowIcon, tableRowDeleteIcon, tableColumnDeleteIcon, bordersNoneIcon, folderOpenIcon, downloadIcon, customFormatIcon, fontSizeIcon, fontFamilyIcon, cellsMergeIcon, cellsMergeHorizontallyIcon, cellsMergeVerticallyIcon, tableUnmergeIcon, linkIcon, fontGrowIcon, fontShrinkIcon, decimalDecreaseIcon, decimalIncreaseIcon, cutIcon, clipboardIcon, eyeIcon, plusIcon, menuIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
 import * as i2 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages } from '@progress/kendo-angular-l10n';
 import * as i3 from '@progress/kendo-angular-common';
@@ -23,18 +23,18 @@ import { CommonModule } from '@angular/common';
 import { take, map } from 'rxjs/operators';
 import * as i1$1 from '@progress/kendo-angular-dialog';
 import { DialogContentBase, DialogModule } from '@progress/kendo-angular-dialog';
-import * as i6$1 from '@progress/kendo-angular-menu';
-import { MenuModule } from '@progress/kendo-angular-menu';
+import * as i2$1 from '@progress/kendo-angular-label';
+import { LabelModule } from '@progress/kendo-angular-label';
+import * as i5 from '@progress/kendo-angular-inputs';
+import { InputsModule } from '@progress/kendo-angular-inputs';
+import * as i7$1 from '@progress/kendo-angular-menu';
+import { MenusModule } from '@progress/kendo-angular-menu';
 import * as i1$2 from '@progress/kendo-angular-toolbar';
 import { ToolBarToolComponent, ToolBarComponent, ToolBarModule } from '@progress/kendo-angular-toolbar';
 import * as i4 from '@progress/kendo-angular-buttons';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import * as i1$3 from '@progress/kendo-angular-dropdowns';
 import { DropDownListComponent, ComboBoxModule, DropDownListModule } from '@progress/kendo-angular-dropdowns';
-import * as i5 from '@progress/kendo-angular-inputs';
-import { InputsModule } from '@progress/kendo-angular-inputs';
-import * as i2$1 from '@progress/kendo-angular-label';
-import { LabelModule } from '@progress/kendo-angular-label';
 import * as i5$1 from '@progress/kendo-angular-layout';
 import { TabStripModule } from '@progress/kendo-angular-layout';
 import { saveAs } from '@progress/kendo-file-saver';
@@ -47,8 +47,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-spreadsheet',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1701342735,
-    version: '14.2.1-develop.1',
+    publishDate: 1702298332,
+    version: '14.3.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning',
 };
 
@@ -150,10 +150,15 @@ const mapToSheetDescriptor = (sheetsArray) => {
             name: sheet.name(),
             rows: sheet._rows,
             selection: sheet.selection(),
-            showGridLines: sheet.showGridLines
+            showGridLines: sheet.showGridLines,
+            state: sheet.state()
         };
     });
 };
+/**
+ * @hidden
+ */
+const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);
 
 let spreadsheetCounter = 0;
 /**
@@ -162,6 +167,7 @@ let spreadsheetCounter = 0;
 class SpreadsheetService {
     constructor() {
         this.sheetsChanged = new Subject();
+        this.onSheetsBarFocus = new Subject();
         this.activeSheetChanged = new Subject();
         this.selectionChanged = new Subject();
         spreadsheetCounter++;
@@ -212,10 +218,12 @@ class FormulaListComponent {
     }
 }
 FormulaListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormulaListComponent, deps: [{ token: i0.ElementRef }, { token: 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)"
@@ -237,6 +245,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)"
@@ -254,6 +264,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SpreadsheetService }]; }, propDecorators: { id: [{
                 type: HostBinding,
                 args: ['attr.id']
+            }], maxHeight: [{
+                type: Input
             }], data: [{
                 type: Input
             }], itemClick: [{
@@ -296,6 +308,23 @@ 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();
+                    }
+                }
             }
         };
     }
@@ -363,6 +392,7 @@ class FormulaInputDirective {
                     this.list = list;
                     list.data = this.data;
                     list.itemClick = this.handler;
+                    list.maxHeight = this.formulaListMaxHeight;
                     this.ariaExpanded = 'true';
                 },
                 close: () => {
@@ -381,7 +411,7 @@ 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: SpreadsheetService }, { token: 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: [{
@@ -405,46 +435,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], ariaControls: [{
                 type: HostBinding,
                 args: ['attr.aria-controls']
+            }], formulaListMaxHeight: [{
+                type: Input
             }] } });
 
 /**
  * @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
         }];
 };
 
@@ -479,10 +515,22 @@ class ErrorHandlingService {
     }
     openDialog(messageData) {
         var _a;
+        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'
@@ -554,7 +602,14 @@ const commandIcons = {
     increaseFontSize: 'font-grow',
     decreaseFontSize: 'font-shrink',
     increaseDecimal: 'decimal-increase',
-    decreaseDecimal: 'decimal-decrease'
+    decreaseDecimal: 'decimal-decrease',
+    copy: 'copy',
+    cut: 'cut',
+    paste: 'clipboard',
+    hideRow: 'eye-slash',
+    unhideRow: 'eye',
+    hideColumn: 'eye-slash',
+    unhideColumn: 'eye'
 };
 /**
  * @hidden
@@ -599,9 +654,56 @@ const commandSVGIcons = {
     increaseFontSize: fontGrowIcon,
     decreaseFontSize: fontShrinkIcon,
     decreaseDecimal: decimalDecreaseIcon,
-    increaseDecimal: decimalIncreaseIcon
+    increaseDecimal: decimalIncreaseIcon,
+    copy: copyIcon,
+    cut: cutIcon,
+    paste: clipboardIcon,
+    hideRow: eyeSlashIcon,
+    unhideRow: eyeIcon,
+    hideColumn: eyeSlashIcon,
+    unhideColumn: eyeIcon
 };
 
+/**
+ * @hidden
+ */
+class InsertLinkDialogComponent extends DialogContentBase {
+    constructor(dialog) {
+        super(dialog);
+        this.dialog = dialog;
+        this.urlLink = '';
+    }
+    setData(args) {
+        this.urlLink = args.link;
+    }
+}
+InsertLinkDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: InsertLinkDialogComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
+InsertLinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: InsertLinkDialogComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <form class="k-form k-form-md" method="dialog">
+        <div class="k-form-field">
+            <kendo-label [for]="textbox" text="URL"></kendo-label>
+                <kendo-textbox #textbox
+                    [(value)]="urlLink">
+                </kendo-textbox>
+        </div>
+    </form>
+    `, isInline: true, components: [{ type: i2$1.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { type: i5.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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: InsertLinkDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <form class="k-form k-form-md" method="dialog">
+        <div class="k-form-field">
+            <kendo-label [for]="textbox" text="URL"></kendo-label>
+                <kendo-textbox #textbox
+                    [(value)]="urlLink">
+                </kendo-textbox>
+        </div>
+    </form>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.DialogRef }]; } });
+
 /**
  * @hidden
  */
@@ -1707,7 +1809,7 @@ ActionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </div>
             </div>
         </form>
-    `, isInline: true, components: [{ type: i2$1.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { type: i5.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: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2$1.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { type: i5.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: i7.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: [{
@@ -1745,14 +1847,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();
@@ -1774,23 +1885,55 @@ class SheetsBarComponent {
                 this.spreadsheetService.spreadsheet.insertSheet({ data: Object.assign(Object.assign({}, sheetToCopy.toJSON()), { name: newName }), index: sheetInfo.index + 1 });
                 this.selectSheet(newName);
             },
-            move: (sheetInfo, itemText) => {
-                const oldIndex = this.spreadsheetService.spreadsheet.sheets().findIndex(sheet => sheet.name() === sheetInfo.text);
-                const newIndex = itemText === 'Move Right' ? oldIndex + 1 : oldIndex - 1;
+            move: (sheetInfo, itemKey) => {
+                const isMoveRight = itemKey === 'sheetMoveRight';
+                let oldIndex = -1;
+                let newIndex = -1;
+                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() {
         var _a, _b;
         return (_b = (_a = this.spreadsheetService.spreadsheet) === null || _a === void 0 ? void 0 : _a.activeSheet()) === null || _b === void 0 ? void 0 : _b.name();
     }
-    get sheetsMenuList() {
-        var _a;
-        return (_a = this.sheets) === null || _a === void 0 ? void 0 : _a.map(sheet => ({ text: sheet.text, icon: 'eye', svgIcon: this.eyeIcon }));
-    }
     get tablistId() {
         return this.spreadsheetService.tablistId;
     }
@@ -1806,10 +1949,24 @@ class SheetsBarComponent {
         this.renderer.setAttribute(tablist, 'id', this.tablistId);
         this.tabListSub = this.renderer.listen(tablist, 'keydown', this.onTabListKeyDown.bind(this));
     }
+    ngOnChanges(changes) {
+        var _a, _b;
+        if (changes['sheets']) {
+            this.sheetsMenuList = (_a = this.sheets) === null || _a === void 0 ? void 0 : _a.map(sheet => ({
+                text: sheet.text,
+                icon: this.hiddenStateIcons[sheet.state],
+                svgIcon: this.hiddenStateSVGIcons[sheet.state]
+            }));
+            this.sheets = (_b = changes['sheets'].currentValue) === null || _b === void 0 ? void 0 : _b.map((sheet, _, items) => (Object.assign(Object.assign({}, sheet), { sheetActions: getSheetActions(items, sheet)
+                    .map(item => (Object.assign(Object.assign({}, item), { text: this.messageFor(item.messageKey) }))) })));
+        }
+        ;
+    }
     ngOnDestroy() {
         if (this.tabListSub) {
             this.tabListSub();
         }
+        this.subs.unsubscribe();
     }
     onTabSelect(ev) {
         if (ev.title !== this.activeSheet) {
@@ -1835,11 +1992,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) {
@@ -1866,7 +2025,9 @@ 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();
                 }
             }
@@ -1906,14 +2067,23 @@ class SheetsBarComponent {
     }
     notifySheetsChange() {
         this.ngZone.run(() => {
+            var _a;
             const newSheets = this.spreadsheetService.spreadsheet.sheets();
             const sheetDesc = mapToSheetDescriptor(newSheets);
-            this.sheets = sheetDesc.map((item, index, items) => (Object.assign(Object.assign({}, item), { inEdit: false, first: index === 0, last: index === items.length - 1, text: item.name, active: (item.name === this.activeSheet) || items.length === 1, index, sheetActions: getSheetActions(index, items) })));
+            this.sheets = sheetDesc
+                .flatMap((item, index, items) => item.state === 'visible' ? [Object.assign(Object.assign({}, item), { inEdit: false, first: index === 0, last: index === items.length - 1, text: item.name, active: (item.name === this.activeSheet) || items.length === 1, index, sheetActions: getSheetActions(items, item)
+                        .map(item => (Object.assign(Object.assign({}, item), { text: this.messageFor(item.messageKey) }))) })] : []);
+            this.sheetsMenuList = (_a = this.sheets) === null || _a === void 0 ? void 0 : _a.map(sheet => ({
+                text: sheet.text,
+                icon: this.hiddenStateIcons[sheet.state],
+                svgIcon: this.hiddenStateSVGIcons[sheet.state]
+            }));
         });
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.spreadsheetService.spreadsheet.view.clipboard.focus());
     }
 }
 SheetsBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SheetsBarComponent, deps: [{ token: SpreadsheetService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SpreadsheetLocalizationService }, { token: i1$1.DialogService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: { sheets: "sheets", sheetDescriptors: "sheetDescriptors" }, host: { properties: { "class.k-spreadsheet-sheets-bar": "this.hostClasses" } }, viewQueries: [{ propertyName: "addButton", first: true, predicate: ["addButton"], descendants: true }, { propertyName: "menuButton", first: true, predicate: ["menuButton"], descendants: true }, { propertyName: "tabstrip", first: true, predicate: ["tabstrip"], descendants: true }, { propertyName: "actionDdbs", predicate: ["sheetDdb"], descendants: true }, { propertyName: "actionDdbRefs", predicate: ["sheetDdb"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: { sheets: "sheets", sheetDescriptors: "sheetDescriptors" }, host: { properties: { "class.k-spreadsheet-sheets-bar": "this.hostClasses" } }, viewQueries: [{ propertyName: "addButton", first: true, predicate: ["addButton"], descendants: true }, { propertyName: "menuButton", first: true, predicate: ["menuButton"], descendants: true }, { propertyName: "tabstrip", first: true, predicate: ["tabstrip"], descendants: true }, { propertyName: "actionDdbs", predicate: ["sheetDdb"], descendants: true }, { propertyName: "actionDdbRefs", predicate: ["sheetDdb"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
         <button kendoButton #addButton
             [title]="messageFor('addSheet')"
             type="button"
@@ -1941,27 +2111,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: [{
@@ -1994,25 +2167,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>
     `
                 }]
@@ -2046,7 +2222,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" }, 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: [{
@@ -2178,6 +2354,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], duplicateSheetName: [{
                 type: Input
+            }], copy: [{
+                type: Input
+            }], cut: [{
+                type: Input
+            }], paste: [{
+                type: Input
+            }], hideRow: [{
+                type: Input
+            }], unhideRow: [{
+                type: Input
+            }], hideColumn: [{
+                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
             }] } });
 
 /**
@@ -2526,9 +2730,7 @@ class SpreadsheetHorizontalTextAlignDirective {
         host.icon = commandIcons[this.commandName];
         host.arrowIcon = true;
         host.fillMode = 'flat';
-        host.data = ALIGNS
-            .filter(value => value.commandName === 'textAlign')
-            .map(item => (Object.assign(Object.assign({}, item), { textKey: localization.get(item.commandId) })));
+        host.data = ALIGNS.flatMap(item => item.commandName === 'textAlign' ? [Object.assign(Object.assign({}, item), { textKey: localization.get(item.commandId) })] : []);
         this.subs.add(host.itemClick.subscribe((e) => this.onItemClick(e)));
         host.title = localization.get(this.commandName);
         host.textField = 'textKey';
@@ -2570,9 +2772,7 @@ class SpreadsheetVerticalTextAlignDirective {
         host.icon = commandIcons[this.commandName];
         host.arrowIcon = true;
         host.fillMode = 'flat';
-        host.data = ALIGNS
-            .filter(value => value.commandName === 'verticalAlign')
-            .map(item => (Object.assign(Object.assign({}, item), { textKey: localization.get(item.commandId) })));
+        host.data = ALIGNS.flatMap(item => item.commandName === 'verticalAlign' ? [Object.assign(Object.assign({}, item), { textKey: localization.get(item.commandId) })] : []);
         this.subs.add(host.itemClick.subscribe((e) => this.onItemClick(e)));
         host.title = localization.get(this.commandName);
         host.textField = 'textKey';
@@ -2678,46 +2878,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$2.ToolBarDropDownButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
 
-/**
- * @hidden
- */
-class InsertLinkDialogComponent extends DialogContentBase {
-    constructor(dialog) {
-        super(dialog);
-        this.dialog = dialog;
-        this.urlLink = '';
-    }
-    setData(args) {
-        this.urlLink = args.link;
-    }
-}
-InsertLinkDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: InsertLinkDialogComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
-InsertLinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: InsertLinkDialogComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    <form class="k-form k-form-md" method="dialog">
-        <div class="k-form-field">
-            <kendo-label [for]="textbox" text="URL"></kendo-label>
-                <kendo-textbox #textbox
-                    [(value)]="urlLink">
-                </kendo-textbox>
-        </div>
-    </form>
-    `, isInline: true, components: [{ type: i2$1.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { type: i5.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: InsertLinkDialogComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: `
-    <form class="k-form k-form-md" method="dialog">
-        <div class="k-form-field">
-            <kendo-label [for]="textbox" text="URL"></kendo-label>
-                <kendo-textbox #textbox
-                    [(value)]="urlLink">
-                </kendo-textbox>
-        </div>
-    </form>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.DialogRef }]; } });
-
 /**
  * @hidden
  */
@@ -2727,7 +2887,10 @@ class SpreadsheetInsertLinkDirective extends SpreadsheetCommandButton {
             command: 'HyperlinkCommand'
         });
         this.dialogService = dialogService;
-        spreadsheetService.selectionChanged.subscribe(range => this.currentRange = range);
+        this.subs.add(spreadsheetService.selectionChanged.subscribe(range => this.currentRange = range));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
     }
     clickHandler() {
         const sheet = this.spreadsheetService.spreadsheet.activeSheet();
@@ -3061,7 +3224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Represents the [Kendo UI Spreadsheet component for Angular]({% slug overview_spreadsheet %}).
  */
 class SpreadsheetComponent {
-    constructor(ngZone, intl, host, localization, spreadsheetService, toolsService, errorService) {
+    constructor(ngZone, intl, host, localization, spreadsheetService, toolsService, errorService, dialogService) {
         this.ngZone = ngZone;
         this.intl = intl;
         this.host = host;
@@ -3069,6 +3232,7 @@ class SpreadsheetComponent {
         this.spreadsheetService = spreadsheetService;
         this.toolsService = toolsService;
         this.errorService = errorService;
+        this.dialogService = dialogService;
         this.hostClass = true;
         this.role = 'application';
         /**
@@ -3076,6 +3240,13 @@ class SpreadsheetComponent {
          * @default false
          */
         this.overflow = false;
+        /**
+         * Sets the height of the formula list container.
+         * Accepts same values as the CSS [`style.height`](https://developer.mozilla.org/en-US/docs/Web/CSS/height) property.
+         *
+         * @default '300px'
+         */
+        this.formulaListMaxHeight = '300px';
         /**
          * The number of columns in the document.
          *
@@ -3144,10 +3315,19 @@ class SpreadsheetComponent {
         this.formulaFxIcon = formulaFxIcon;
         this.folderOpenIcon = folderOpenIcon;
         this.downloadIcon = downloadIcon;
+        this.showLicenseWatermark = false;
+        this.contextMenuItems = [];
+        this.subs = new Subscription();
         /**
          * @hidden
          */
-        this.showLicenseWatermark = false;
+        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);
@@ -3242,7 +3422,7 @@ class SpreadsheetComponent {
      * An array which defines the document sheets and their content.
      */
     set sheets(value) {
-        const items = value.map((item, index, items) => (Object.assign(Object.assign({}, item), { inEdit: false, first: index === 0, last: index === items.length - 1, text: item.name, active: (item.name === this.activeSheet) || items.length === 1, index, sheetActions: getSheetActions(index, items) })));
+        const items = value.map((item, index, items) => (Object.assign(Object.assign({}, item), { state: item.state || 'visible', inEdit: false, first: index === 0, last: index === items.length - 1, text: item.name, active: (item.name === this.activeSheet) || items.length === 1, index })));
         this._sheetsInfo = items;
     }
     get sheetsInfo() {
@@ -3264,8 +3444,10 @@ 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));
                 const sheet = spreadsheet.activeSheet();
                 if (sheet) {
                     this.updateState({ range: sheet.range(sheet.activeCell()) });
@@ -3274,12 +3456,13 @@ class SpreadsheetComponent {
                 if (!this.sheetsInfo) {
                     this.ngZone.run(() => {
                         const defaultSheetDescriptors = mapToSheetDescriptor([spreadsheet === null || spreadsheet === void 0 ? void 0 : spreadsheet.activeSheet()]);
-                        this._sheetsInfo = [Object.assign(Object.assign({ text: this.spreadsheetService.currentActiveSheet, first: true, last: true }, defaultSheetDescriptors), { sheetActions: getSheetActions(0, defaultSheetDescriptors) })];
+                        this._sheetsInfo = [Object.assign(Object.assign({ text: this.spreadsheetService.currentActiveSheet, first: true, last: true, state: 'visible' }, defaultSheetDescriptors), { sheetActions: getSheetActions(defaultSheetDescriptors).map(item => (Object.assign(Object.assign({}, item), { text: this.messageFor(item.messageKey) }))) })];
                     });
                 }
             });
-            this.spreadsheetService.sheetsChanged.subscribe(this.onSheetsChanged.bind(this));
-            this.spreadsheetService.activeSheetChanged.subscribe(this.onActiveSheetChanged.bind(this));
+            this.subs.add(this.spreadsheetService.sheetsChanged.subscribe(this.onSheetsChanged.bind(this)));
+            this.subs.add(this.spreadsheetService.activeSheetChanged.subscribe(this.onActiveSheetChanged.bind(this)));
+            this.subs.add(this.spreadsheetService.selectionChanged.subscribe(range => this.currentRange = range));
             this.spreadsheetService.dialogContainer = this.dialogContainer;
         });
     }
@@ -3303,6 +3486,85 @@ class SpreadsheetComponent {
             this.spreadsheetWidget.fromJSON(newOptions);
         }
     }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    /**
+     * @hidden
+     */
+    onContextMenu(e) {
+        if (e.targetType === 'topcorner') {
+            return;
+        }
+        const selection = this.spreadsheetWidget.activeSheet().select();
+        const { topLeft, bottomRight } = selection;
+        const isRange = e.targetType === 'cell' && (topLeft.row !== bottomRight.row || topLeft.col !== bottomRight.col);
+        const targetType = isRange ? 'range' : e.targetType;
+        this.contextMenuItems = this.contextMenuItemsForTarget(targetType, e.showUnhide, e.showUnmerge);
+        this.contextMenu.show({ top: e.originalEvent.pageY, left: e.originalEvent.pageX });
+    }
+    /**
+     * @hidden
+     */
+    onContextMenuSelect(e) {
+        let command;
+        switch (e.item.id) {
+            case 'cut':
+                command = { command: 'ToolbarCutCommand', options: { workbook: this.spreadsheetWidget.workbook } };
+                break;
+            case 'copy':
+                command = { command: 'ToolbarCopyCommand', options: { workbook: this.spreadsheetWidget.workbook } };
+                break;
+            case 'unmerge':
+                command = { command: 'MergeCellCommand', options: { value: 'unmerge' } };
+                break;
+            case 'mergeAll':
+                command = { command: 'MergeCellCommand', options: { value: 'cells' } };
+                break;
+            case 'mergeHorizontally':
+                command = { command: 'MergeCellCommand', options: { value: 'horizontally' } };
+                break;
+            case 'mergeVertically':
+                command = { command: 'MergeCellCommand', options: { value: 'vertically' } };
+                break;
+            case 'hideRow':
+                command = { command: 'HideLineCommand', options: { axis: 'row' } };
+                break;
+            case 'hideColumn':
+                command = { command: 'HideLineCommand', options: { axis: 'column' } };
+                break;
+            case 'unhideRow':
+                command = { command: 'UnHideLineCommand', options: { axis: 'row' } };
+                break;
+            case 'unhideColumn':
+                command = { command: 'UnHideLineCommand', options: { axis: 'column' } };
+                break;
+            case 'deleteRow':
+                command = { command: 'DeleteRowCommand' };
+                break;
+            case 'deleteColumn':
+                command = { command: 'DeleteColumnCommand' };
+                break;
+            case 'insertLink':
+                this.openLinkDialog();
+                break;
+            case 'addRowAbove':
+                command = { command: 'AddRowCommand', options: { value: 'above' } };
+                break;
+            case 'addRowBelow':
+                command = { command: 'AddRowCommand', options: { value: 'below' } };
+                break;
+            case 'addColumnLeft':
+                command = { command: 'AddColumnCommand', options: { value: 'left' } };
+                break;
+            case 'addColumnRight':
+                command = { command: 'AddColumnCommand', options: { value: 'right' } };
+                break;
+        }
+        if (command) {
+            this.spreadsheetWidget.executeCommand(command);
+        }
+    }
     /**
      * @hidden
      */
@@ -3343,9 +3605,164 @@ class SpreadsheetComponent {
             }
         }), { columns: this.columns, columnWidth: this.columnWidth, defaultCellStyle: this.defaultCellStyle, excel: this.excel, headerHeight: this.headerHeight, headerWidth: this.headerWidth, images: this.images, rowHeight: this.rowHeight, rows: this.rows, formulaBarInputRef: { current: this.formulaBarInputRef.current }, formulaCellInputRef: { current: this.formulaCellInputRef.current }, nameBoxRef: { current: this.nameBoxRef.current } });
     }
+    contextMenuItemsForTarget(target, unhide, unmerge) {
+        const commonItems = [{
+                text: this.messageFor('copy'),
+                icon: commandIcons.copy,
+                svgIcon: commandSVGIcons.copy,
+                id: 'copy'
+            }, {
+                text: this.messageFor('cut'),
+                icon: commandIcons.cut,
+                svgIcon: commandSVGIcons.cut,
+                id: 'cut'
+            }, {
+                text: this.messageFor('paste'),
+                icon: commandIcons.paste,
+                svgIcon: commandSVGIcons.paste,
+                id: 'paste',
+                disabled: true
+            }, {
+                separator: true
+            }, {
+                text: this.messageFor('mergeAll'),
+                icon: commandIcons.mergeAll,
+                svgIcon: commandSVGIcons.mergeAll,
+                id: 'mergeAll',
+            }, {
+                text: this.messageFor('mergeHorizontally'),
+                icon: commandIcons.mergeHorizontally,
+                svgIcon: commandSVGIcons.mergeHorizontally,
+                id: 'mergeHorizontally',
+            }, {
+                text: this.messageFor('mergeVertically'),
+                icon: commandIcons.mergeVertically,
+                svgIcon: commandSVGIcons.mergeVertically,
+                id: 'mergeVertically',
+            }, {
+                text: this.messageFor('unmerge'),
+                icon: commandIcons.unmerge,
+                svgIcon: commandSVGIcons.unmerge,
+                id: 'unmerge',
+                disabled: !unmerge
+            }, {
+                separator: true
+            }, {
+                text: this.messageFor('insertLink'),
+                icon: commandIcons.insertLink,
+                svgIcon: commandSVGIcons.insertLink,
+                id: 'insertLink'
+            }];
+        if (target === 'rowheader') {
+            commonItems.push({
+                separator: true
+            }, {
+                text: this.messageFor('addRowAbove'),
+                icon: commandIcons.addRowAbove,
+                svgIcon: commandSVGIcons.addRowAbove,
+                id: 'addRowAbove',
+            }, {
+                text: this.messageFor('addRowBelow'),
+                icon: commandIcons.addRowBelow,
+                svgIcon: commandSVGIcons.addRowBelow,
+                id: 'addRowBelow',
+            }, {
+                text: this.messageFor('deleteRow'),
+                icon: commandIcons.deleteRow,
+                svgIcon: commandSVGIcons.deleteRow,
+                id: 'deleteRow',
+            }, {
+                text: this.messageFor('hideRow'),
+                icon: commandIcons.hideRow,
+                svgIcon: commandSVGIcons.hideRow,
+                id: 'hideRow',
+            }, {
+                text: this.messageFor('unhideRow'),
+                icon: commandIcons.unhideRow,
+                svgIcon: commandSVGIcons.unhideRow,
+                id: 'unhideRow',
+                disabled: !unhide
+            });
+        }
+        if (target === 'columnheader') {
+            commonItems.push({
+                separator: true
+            }, {
+                text: this.messageFor('addColumnLeft'),
+                icon: commandIcons.addColumnLeft,
+                svgIcon: commandSVGIcons.addColumnLeft,
+                id: 'addColumnLeft',
+            }, {
+                text: this.messageFor('addColumnRight'),
+                icon: commandIcons.addColumnRight,
+                svgIcon: commandSVGIcons.addColumnRight,
+                id: 'addColumnRight',
+            }, {
+                text: this.messageFor('deleteColumn'),
+                icon: commandIcons.deleteColumn,
+                svgIcon: commandSVGIcons.deleteColumn,
+                id: 'deleteColumn',
+            }, {
+                text: this.messageFor('hideColumn'),
+                icon: commandIcons.hideColumn,
+                svgIcon: commandSVGIcons.hideColumn,
+                id: 'hideColumn',
+            }, {
+                text: this.messageFor('unhideColumn'),
+                icon: commandIcons.unhideColumn,
+                svgIcon: commandSVGIcons.unhideColumn,
+                id: 'unhideColumn',
+                disabled: !unhide
+            });
+        }
+        return commonItems;
+    }
+    openLinkDialog() {
+        var _a, _b;
+        const hasLink = isPresent((_a = this.currentRange) === null || _a === void 0 ? void 0 : _a.link());
+        const dialogSettings = {
+            appendTo: this.spreadsheetService.dialogContainer,
+            title: this.localization.get('insertLink'),
+            content: InsertLinkDialogComponent,
+            actions: [{
+                    text: this.localization.get('dialogInsert'),
+                    themeColor: 'primary'
+                }, {
+                    text: this.localization.get('dialogCancel')
+                },
+                'spacer', {
+                    text: this.localization.get('dialogRemoveLink'),
+                    themeColor: 'primary',
+                    fillMode: 'clear',
+                    cssClass: hasLink ? '' : 'k-disabled'
+                }],
+            actionsLayout: 'start',
+            width: 400,
+            autoFocusedElement: '.k-textbox > .k-input-inner'
+        };
+        const dialog = this.dialogService.open(dialogSettings);
+        const dialogInstance = dialog.dialog.instance;
+        const dialogContent = dialog.content.instance;
+        if (hasLink) {
+            dialogContent.setData({ link: (_b = this.currentRange) === null || _b === void 0 ? void 0 : _b.link() });
+        }
+        dialogInstance.action.pipe(take(1)).subscribe((event) => {
+            if (event.text === this.localization.get('dialogCancel')) {
+                return;
+            }
+            let link = null;
+            if (event.text === this.localization.get('dialogInsert')) {
+                link = dialogContent.urlLink || null;
+            }
+            this.spreadsheetService.spreadsheet.executeCommand({
+                command: 'HyperlinkCommand',
+                options: { link }
+            });
+        });
+    }
 }
-SpreadsheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetComponent, deps: [{ token: i0.NgZone }, { token: i1$4.IntlService }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ErrorHandlingService }], target: i0.ɵɵFactoryTarget.Component });
-SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetComponent, selector: "kendo-spreadsheet", inputs: { menuItems: "menuItems", overflow: "overflow", activeSheet: "activeSheet", sheets: "sheets", columns: "columns", columnWidth: "columnWidth", defaultCellStyle: "defaultCellStyle", headerHeight: "headerHeight", headerWidth: "headerWidth", rowHeight: "rowHeight", rows: "rows", images: "images", excel: "excel" }, outputs: { change: "change", formatChange: "formatChange", selectionChange: "selectionChange", excelExport: "excelExport", excelImport: "excelImport", activeSheetChange: "activeSheetChange" }, host: { properties: { "class.k-spreadsheet": "this.hostClass", "attr.role": "this.role" } }, providers: [
+SpreadsheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetComponent, deps: [{ token: i0.NgZone }, { token: i1$4.IntlService }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ErrorHandlingService }, { token: i1$1.DialogService }], target: i0.ɵɵFactoryTarget.Component });
+SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetComponent, selector: "kendo-spreadsheet", inputs: { menuItems: "menuItems", overflow: "overflow", formulaListMaxHeight: "formulaListMaxHeight", activeSheet: "activeSheet", sheets: "sheets", columns: "columns", columnWidth: "columnWidth", defaultCellStyle: "defaultCellStyle", headerHeight: "headerHeight", headerWidth: "headerWidth", rowHeight: "rowHeight", rows: "rows", images: "images", excel: "excel" }, outputs: { change: "change", formatChange: "formatChange", selectionChange: "selectionChange", excelExport: "excelExport", excelImport: "excelImport", activeSheetChange: "activeSheetChange" }, host: { properties: { "class.k-spreadsheet": "this.hostClass", "attr.role": "this.role" } }, providers: [
         SpreadsheetLocalizationService,
         {
             provide: LocalizationService,
@@ -3358,7 +3775,7 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         SpreadsheetToolsService,
         PopupService,
         ErrorHandlingService
-    ], viewQueries: [{ propertyName: "formulaBarInputRef", first: true, predicate: ["formulaBar"], descendants: true, read: FormulaInputDirective }, { propertyName: "formulaCellInputRef", first: true, predicate: ["formulaCell"], descendants: true, read: FormulaInputDirective }, { propertyName: "nameBoxRef", first: true, predicate: ["nameBox"], descendants: true }, { propertyName: "dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true, read: ViewContainerRef }], exportAs: ["kendo-spreadsheet"], usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "formulaBarInputRef", first: true, predicate: ["formulaBar"], descendants: true, read: FormulaInputDirective }, { propertyName: "formulaCellInputRef", first: true, predicate: ["formulaCell"], descendants: true, read: FormulaInputDirective }, { propertyName: "nameBoxRef", first: true, predicate: ["nameBox"], descendants: true }, { propertyName: "dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], exportAs: ["kendo-spreadsheet"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container
             kendoSpreadsheetLocalizedMessages
             i18n-background="kendo.spreadsheet.background|The title of the tool that changes the text background color."
@@ -3487,7 +3904,34 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             dialogError="Error"
             i18n-duplicateSheetName="kendo.spreadsheet.duplicateSheetName|The content of the dialog that warns about duplicated sheet name."
             duplicateSheetName="There is an existing sheet with this name. Please enter another name."
-            >
+            i18n-copy="kendo.spreadsheet.copy|The Copy command text."
+            copy="Copy"
+            i18n-cut="kendo.spreadsheet.cut|The Cut command text."
+            cut="Cut"
+            i18n-paste="kendo.spreadsheet.paste|The Paste command text."
+            paste="Paste (use Ctrl/⌘ + V)"
+            i18n-hideRow="kendo.spreadsheet.hideRow|The Hide row command text."
+            hideRow="Hide"
+            i18n-unhideRow="kendo.spreadsheet.unhideRow|The Unhide row command text."
+            unhideRow="Unhide"
+            i18n-hideColumn="kendo.spreadsheet.hideColumn|The Hide column command text."
+            hideColumn="Hide"
+            i18n-unhideColumn="kendo.spreadsheet.unhideColumn|The Unhide column command text."
+            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"
+            i18n-invalidNameError="kendo.spreadsheet.invalidNameError|The content of the dialog that warns about invalid name input."
+            invalidNameError="{{ 'Invalid name: {inputValue}' }}">
         </ng-container>
         <div class="k-spreadsheet-header">
             <kendo-menu kendoSpreadsheetMenu (select)="onMenuItemSelect($event)">
@@ -3568,7 +4012,11 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                     [svgIcon]="formulaFxIcon">
                 </kendo-icon-wrapper>
                 <span class="k-separator k-separator-vertical"></span>
-                <div #formulaBar kendoSpreadsheetFormulaInput class="k-textbox k-input k-input-md k-input-flat k-rounded-md"></div>
+                <div
+                    #formulaBar
+                    kendoSpreadsheetFormulaInput
+                    [formulaListMaxHeight]="formulaListMaxHeight"
+                    class="k-textbox k-input k-input-md k-input-flat k-rounded-md"></div>
             </div>
         </div>
         <div class="k-spreadsheet-view">
@@ -3586,8 +4034,13 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </div>
         <ng-container #dialogContainer></ng-container>
 
+        <kendo-contextmenu
+            #contextMenu
+            [items]="contextMenuItems"
+            (select)="onContextMenuSelect($event)"></kendo-contextmenu>
+
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, components: [{ type: i6$1.MenuComponent, selector: "kendo-menu", inputs: ["menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { type: i6$1.MenuItemComponent, selector: "kendo-menu-item", inputs: ["text", "url", "disabled", "cssClass", "cssStyle", "icon", "svgIcon", "data", "separator"] }, { type: i1$2.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: SpreadsheetLoadFileComponent, selector: "kendo-spreadsheet-load-file-tool" }, { type: i1$2.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { type: i1$2.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i1$2.ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { type: SpreadsheetFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]" }, { type: SpreadsheetFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]" }, { type: SpreadsheetForeColorComponent, selector: "kendo-spreadsheet-forecolor-tool" }, { type: SpreadsheetBackColorComponent, selector: "kendo-spreadsheet-backcolor-tool" }, { type: i1$2.ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: ["arrowIcon", "title", "showText", "showIcon", "text", "icon", "svgIcon", "iconClass", "imageUrl", "popupSettings", "look", "primary", "fillMode", "themeColor", "buttonClass", "textField", "disabled", "data"], outputs: ["itemClick", "open", "close"], exportAs: ["kendoToolBarDropDownButton"] }, { type: NameBoxComponent, selector: "[kendoSpreadsheetNameBox]", inputs: ["data", "spreadsheetWidget"] }, { type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: ["sheets", "sheetDescriptors"] }, { type: i3.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoSpreadsheetLocalizedMessages]" }, { type: MainMenuDirective, selector: "[kendoSpreadsheetMenu]" }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SpreadsheetSaveFileDirective, selector: "[kendoSpreadsheetSaveFile]" }, { type: SpreadsheetUndoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]" }, { type: SpreadsheetRedoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]" }, { type: SpreadsheetIncreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseFontSize]" }, { type: SpreadsheetDecreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseFontSize]" }, { type: SpreadsheetBoldDirective, selector: "kendo-toolbar-button[kendoSpreadsheetBold]" }, { type: SpreadsheetItalicDirective, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]" }, { type: SpreadsheetUnderlineDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]" }, { type: SpreadsheetHorizontalTextAlignDirective, selector: "[kendoSpreadsheetHorizontalTextAlign]" }, { type: SpreadsheetVerticalTextAlignDirective, selector: "[kendoSpreadsheetVerticalTextAlign]" }, { type: SpreadsheetTextWrapDirective, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]" }, { type: SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]" }, { type: SpreadsheetInsertLinkDirective, selector: "kendo-toolbar-button[kendoSpreadsheetInsertLink]" }, { type: SpreadsheetAddColumnLeftButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]" }, { type: SpreadsheetAddColumnRightButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]" }, { type: SpreadsheetAddRowBelowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]" }, { type: SpreadsheetAddRowAboveButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]" }, { type: SpreadsheetDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]" }, { type: SpreadsheetDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]" }, { type: SpreadsheetDecreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseDecimal]" }, { type: SpreadsheetIncreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseDecimal]" }, { type: SpreadsheetMergeDirective, selector: "[kendoSpreadsheetMerge]" }, { type: SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]" }, { type: FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]" }] });
+    `, isInline: true, components: [{ type: i7$1.MenuComponent, selector: "kendo-menu", inputs: ["menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { type: i7$1.MenuItemComponent, selector: "kendo-menu-item", inputs: ["text", "url", "disabled", "cssClass", "cssStyle", "icon", "svgIcon", "data", "separator"] }, { type: i1$2.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: SpreadsheetLoadFileComponent, selector: "kendo-spreadsheet-load-file-tool" }, { type: i1$2.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { type: i1$2.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i1$2.ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { type: SpreadsheetFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]" }, { type: SpreadsheetFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]" }, { type: SpreadsheetForeColorComponent, selector: "kendo-spreadsheet-forecolor-tool" }, { type: SpreadsheetBackColorComponent, selector: "kendo-spreadsheet-backcolor-tool" }, { type: i1$2.ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: ["arrowIcon", "title", "showText", "showIcon", "text", "icon", "svgIcon", "iconClass", "imageUrl", "popupSettings", "look", "primary", "fillMode", "themeColor", "buttonClass", "textField", "disabled", "data"], outputs: ["itemClick", "open", "close"], exportAs: ["kendoToolBarDropDownButton"] }, { type: NameBoxComponent, selector: "[kendoSpreadsheetNameBox]", inputs: ["data", "spreadsheetWidget"] }, { type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: ["sheets", "sheetDescriptors"] }, { type: i7$1.ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { type: i3.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoSpreadsheetLocalizedMessages]" }, { type: MainMenuDirective, selector: "[kendoSpreadsheetMenu]" }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SpreadsheetSaveFileDirective, selector: "[kendoSpreadsheetSaveFile]" }, { type: SpreadsheetUndoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]" }, { type: SpreadsheetRedoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]" }, { type: SpreadsheetIncreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseFontSize]" }, { type: SpreadsheetDecreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseFontSize]" }, { type: SpreadsheetBoldDirective, selector: "kendo-toolbar-button[kendoSpreadsheetBold]" }, { type: SpreadsheetItalicDirective, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]" }, { type: SpreadsheetUnderlineDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]" }, { type: SpreadsheetHorizontalTextAlignDirective, selector: "[kendoSpreadsheetHorizontalTextAlign]" }, { type: SpreadsheetVerticalTextAlignDirective, selector: "[kendoSpreadsheetVerticalTextAlign]" }, { type: SpreadsheetTextWrapDirective, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]" }, { type: SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]" }, { type: SpreadsheetInsertLinkDirective, selector: "kendo-toolbar-button[kendoSpreadsheetInsertLink]" }, { type: SpreadsheetAddColumnLeftButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]" }, { type: SpreadsheetAddColumnRightButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]" }, { type: SpreadsheetAddRowBelowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]" }, { type: SpreadsheetAddRowAboveButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]" }, { type: SpreadsheetDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]" }, { type: SpreadsheetDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]" }, { type: SpreadsheetDecreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseDecimal]" }, { type: SpreadsheetIncreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseDecimal]" }, { type: SpreadsheetMergeDirective, selector: "[kendoSpreadsheetMerge]" }, { type: SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]" }, { type: FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]", inputs: ["formulaListMaxHeight"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetComponent, decorators: [{
             type: Component,
             args: [{
@@ -3736,7 +4189,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             dialogError="Error"
             i18n-duplicateSheetName="kendo.spreadsheet.duplicateSheetName|The content of the dialog that warns about duplicated sheet name."
             duplicateSheetName="There is an existing sheet with this name. Please enter another name."
-            >
+            i18n-copy="kendo.spreadsheet.copy|The Copy command text."
+            copy="Copy"
+            i18n-cut="kendo.spreadsheet.cut|The Cut command text."
+            cut="Cut"
+            i18n-paste="kendo.spreadsheet.paste|The Paste command text."
+            paste="Paste (use Ctrl/⌘ + V)"
+            i18n-hideRow="kendo.spreadsheet.hideRow|The Hide row command text."
+            hideRow="Hide"
+            i18n-unhideRow="kendo.spreadsheet.unhideRow|The Unhide row command text."
+            unhideRow="Unhide"
+            i18n-hideColumn="kendo.spreadsheet.hideColumn|The Hide column command text."
+            hideColumn="Hide"
+            i18n-unhideColumn="kendo.spreadsheet.unhideColumn|The Unhide column command text."
+            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"
+            i18n-invalidNameError="kendo.spreadsheet.invalidNameError|The content of the dialog that warns about invalid name input."
+            invalidNameError="{{ 'Invalid name: {inputValue}' }}">
         </ng-container>
         <div class="k-spreadsheet-header">
             <kendo-menu kendoSpreadsheetMenu (select)="onMenuItemSelect($event)">
@@ -3817,7 +4297,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [svgIcon]="formulaFxIcon">
                 </kendo-icon-wrapper>
                 <span class="k-separator k-separator-vertical"></span>
-                <div #formulaBar kendoSpreadsheetFormulaInput class="k-textbox k-input k-input-md k-input-flat k-rounded-md"></div>
+                <div
+                    #formulaBar
+                    kendoSpreadsheetFormulaInput
+                    [formulaListMaxHeight]="formulaListMaxHeight"
+                    class="k-textbox k-input k-input-md k-input-flat k-rounded-md"></div>
             </div>
         </div>
         <div class="k-spreadsheet-view">
@@ -3835,10 +4319,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </div>
         <ng-container #dialogContainer></ng-container>
 
+        <kendo-contextmenu
+            #contextMenu
+            [items]="contextMenuItems"
+            (select)="onContextMenuSelect($event)"></kendo-contextmenu>
+
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
     `,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$4.IntlService }, { type: i0.ElementRef }, { type: i2.LocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: ErrorHandlingService }]; }, propDecorators: { formulaBarInputRef: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$4.IntlService }, { type: i0.ElementRef }, { type: i2.LocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: ErrorHandlingService }, { type: i1$1.DialogService }]; }, propDecorators: { formulaBarInputRef: [{
                 type: ViewChild,
                 args: ['formulaBar', { read: FormulaInputDirective }]
             }], formulaCellInputRef: [{
@@ -3850,6 +4339,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], dialogContainer: [{
                 type: ViewChild,
                 args: ['dialogContainer', { read: ViewContainerRef }]
+            }], contextMenu: [{
+                type: ViewChild,
+                args: ['contextMenu']
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-spreadsheet']
@@ -3860,6 +4352,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], overflow: [{
                 type: Input
+            }], formulaListMaxHeight: [{
+                type: Input
             }], activeSheet: [{
                 type: Input
             }], sheets: [{
@@ -4107,7 +4601,7 @@ SpreadsheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         EventsModule,
         IconsModule,
         IntlModule,
-        MenuModule,
+        MenusModule,
         PopupModule,
         TabStripModule,
         ToolBarModule,
@@ -4153,7 +4647,7 @@ SpreadsheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versi
             EventsModule,
             IconsModule,
             IntlModule,
-            MenuModule,
+            MenusModule,
             PopupModule,
             TabStripModule,
             ToolBarModule,
@@ -4175,7 +4669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         EventsModule,
                         IconsModule,
                         IntlModule,
-                        MenuModule,
+                        MenusModule,
                         PopupModule,
                         TabStripModule,
                         ToolBarModule,