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

package/esm2020/spreadsheet.component.mjs

@@ -12,62 +12,68 @@ import { SpreadsheetService } from './common/spreadsheet.service';
 import { SpreadsheetToolsService } from './tools/tools.service';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { SpreadsheetLocalizationService } from './localization/spreadsheet-localization.service';
-import { hasObservers, isDocumentAvailable, isPresent, shouldShowValidationUI } from '@progress/kendo-angular-common';
+import { Keys, hasObservers, isDocumentAvailable, isPresent, shouldShowValidationUI } from '@progress/kendo-angular-common';
 import { mapToSheetDescriptor } from './utils';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { FormulaInputDirective } from './action-bar/formula-input.directive';
 import { take } from 'rxjs/operators';
 import { getSheetActions } from './sheets-bar/utils';
 import { ErrorHandlingService } from './common/error-handling.service';
+import { ContextMenuComponent } from '@progress/kendo-angular-menu';
+import { commandIcons, commandSVGIcons } from './tools/shared/command-icons';
+import { Subscription } from 'rxjs';
+import { DialogService } from '@progress/kendo-angular-dialog';
+import { InsertLinkDialogComponent } from './tools/insert/insert-link-dialog.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-intl";
 import * as i2 from "@progress/kendo-angular-l10n";
 import * as i3 from "./common/spreadsheet.service";
 import * as i4 from "./tools/tools.service";
 import * as i5 from "./common/error-handling.service";
-import * as i6 from "@progress/kendo-angular-menu";
-import * as i7 from "@progress/kendo-angular-toolbar";
-import * as i8 from "./tools/load-file.component";
-import * as i9 from "./tools/font-family/spreadsheet-fontfamily-tool.component";
-import * as i10 from "./tools/font-size/spreadsheet-fontsize-tool.component";
-import * as i11 from "./tools/colorpicker/spreadsheet-forecolor.component";
-import * as i12 from "./tools/colorpicker/spreadsheet-backcolor.component";
-import * as i13 from "./action-bar/namebox.component";
-import * as i14 from "@progress/kendo-angular-icons";
-import * as i15 from "./sheets-bar/sheets-bar.component";
-import * as i16 from "@progress/kendo-angular-common";
-import * as i17 from "./localization/localized-messages.directive";
-import * as i18 from "./common/main-menu.directive";
-import * as i19 from "@angular/common";
-import * as i20 from "./tools/save-file-tool.directive";
-import * as i21 from "./tools/history/undo-tool";
-import * as i22 from "./tools/history/redo-tool";
-import * as i23 from "./tools/font-size/increase-font-tool.directive";
-import * as i24 from "./tools/font-size/decrease-font-tool.directive";
-import * as i25 from "./tools/typographical-emphasis/bold-tool.directive";
-import * as i26 from "./tools/typographical-emphasis/italic-tool.directive";
-import * as i27 from "./tools/typographical-emphasis/underline-tool.directive";
-import * as i28 from "./tools/align/horizontal-align-tool.directive";
-import * as i29 from "./tools/align/vertical-align-tool.directive";
-import * as i30 from "./tools/text-wrap-tool.directive";
-import * as i31 from "./tools/format-tool.directive";
-import * as i32 from "./tools/insert/insert-link-tool.directive";
-import * as i33 from "./tools/tables/add-column-left-button.directive";
-import * as i34 from "./tools/tables/add-column-right-button.directive";
-import * as i35 from "./tools/tables/add-row-below-button.directive";
-import * as i36 from "./tools/tables/add-row-above-button.directive";
-import * as i37 from "./tools/tables/delete-column-button.directive";
-import * as i38 from "./tools/tables/delete-row-button.directive";
-import * as i39 from "./tools/decrease-decimal-tool.directive";
-import * as i40 from "./tools/increase-decimal-tool.directive";
-import * as i41 from "./tools/tables/merge-tool.directive";
-import * as i42 from "./tools/gridlines-tool.directive";
-import * as i43 from "./action-bar/formula-input.directive";
+import * as i6 from "@progress/kendo-angular-dialog";
+import * as i7 from "@progress/kendo-angular-menu";
+import * as i8 from "@progress/kendo-angular-toolbar";
+import * as i9 from "./tools/load-file.component";
+import * as i10 from "./tools/font-family/spreadsheet-fontfamily-tool.component";
+import * as i11 from "./tools/font-size/spreadsheet-fontsize-tool.component";
+import * as i12 from "./tools/colorpicker/spreadsheet-forecolor.component";
+import * as i13 from "./tools/colorpicker/spreadsheet-backcolor.component";
+import * as i14 from "./action-bar/namebox.component";
+import * as i15 from "@progress/kendo-angular-icons";
+import * as i16 from "./sheets-bar/sheets-bar.component";
+import * as i17 from "@progress/kendo-angular-common";
+import * as i18 from "./localization/localized-messages.directive";
+import * as i19 from "./common/main-menu.directive";
+import * as i20 from "@angular/common";
+import * as i21 from "./tools/save-file-tool.directive";
+import * as i22 from "./tools/history/undo-tool";
+import * as i23 from "./tools/history/redo-tool";
+import * as i24 from "./tools/font-size/increase-font-tool.directive";
+import * as i25 from "./tools/font-size/decrease-font-tool.directive";
+import * as i26 from "./tools/typographical-emphasis/bold-tool.directive";
+import * as i27 from "./tools/typographical-emphasis/italic-tool.directive";
+import * as i28 from "./tools/typographical-emphasis/underline-tool.directive";
+import * as i29 from "./tools/align/horizontal-align-tool.directive";
+import * as i30 from "./tools/align/vertical-align-tool.directive";
+import * as i31 from "./tools/text-wrap-tool.directive";
+import * as i32 from "./tools/format-tool.directive";
+import * as i33 from "./tools/insert/insert-link-tool.directive";
+import * as i34 from "./tools/tables/add-column-left-button.directive";
+import * as i35 from "./tools/tables/add-column-right-button.directive";
+import * as i36 from "./tools/tables/add-row-below-button.directive";
+import * as i37 from "./tools/tables/add-row-above-button.directive";
+import * as i38 from "./tools/tables/delete-column-button.directive";
+import * as i39 from "./tools/tables/delete-row-button.directive";
+import * as i40 from "./tools/decrease-decimal-tool.directive";
+import * as i41 from "./tools/increase-decimal-tool.directive";
+import * as i42 from "./tools/tables/merge-tool.directive";
+import * as i43 from "./tools/gridlines-tool.directive";
+import * as i44 from "./action-bar/formula-input.directive";
 /**
  * Represents the [Kendo UI Spreadsheet component for Angular]({% slug overview_spreadsheet %}).
  */
 export 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;
@@ -75,6 +81,7 @@ export class SpreadsheetComponent {
         this.spreadsheetService = spreadsheetService;
         this.toolsService = toolsService;
         this.errorService = errorService;
+        this.dialogService = dialogService;
         this.hostClass = true;
         this.role = 'application';
         /**
@@ -82,6 +89,13 @@ export 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.
          *
@@ -150,10 +164,19 @@ export 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);
@@ -247,13 +270,13 @@ export class SpreadsheetComponent {
     set sheets(value) {
         const items = value.map((item, index, items) => ({
             ...item,
+            state: item.state || 'visible',
             inEdit: false,
             first: index === 0,
             last: index === items.length - 1,
             text: item.name,
             active: (item.name === this.activeSheet) || items.length === 1,
-            index,
-            sheetActions: getSheetActions(index, items)
+            index
         }));
         this._sheetsInfo = items;
     }
@@ -275,8 +298,10 @@ export class SpreadsheetComponent {
                 spreadsheet.bind('changeFormat', this.onChangeFormat);
                 spreadsheet.bind('excelImport', this.onExcelImport);
                 spreadsheet.bind('excelExport', this.onExcelExport);
+                spreadsheet.bind('keydown', this.onKeyDown);
                 spreadsheet.view.bind('update', this.updateState);
                 spreadsheet.view.bind('message', this.onMessage);
+                spreadsheet.bind('contextmenu', this.onContextMenu.bind(this));
                 const sheet = spreadsheet.activeSheet();
                 if (sheet) {
                     this.updateState({ range: sheet.range(sheet.activeCell()) });
@@ -285,12 +310,19 @@ export class SpreadsheetComponent {
                 if (!this.sheetsInfo) {
                     this.ngZone.run(() => {
                         const defaultSheetDescriptors = mapToSheetDescriptor([spreadsheet?.activeSheet()]);
-                        this._sheetsInfo = [{ text: this.spreadsheetService.currentActiveSheet, first: true, last: true, ...defaultSheetDescriptors, sheetActions: getSheetActions(0, defaultSheetDescriptors) }];
+                        this._sheetsInfo = [{
+                                text: this.spreadsheetService.currentActiveSheet,
+                                first: true, last: true,
+                                state: 'visible',
+                                ...defaultSheetDescriptors,
+                                sheetActions: getSheetActions(defaultSheetDescriptors).map(item => ({ ...item, text: this.messageFor(item.messageKey) }))
+                            }];
                     });
                 }
             });
-            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;
         });
     }
@@ -314,6 +346,85 @@ export 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
      */
@@ -369,9 +480,163 @@ export class SpreadsheetComponent {
             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() {
+        const hasLink = isPresent(this.currentRange?.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: this.currentRange?.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.IntlService }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }, { token: i5.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.IntlService }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }, { token: i5.ErrorHandlingService }, { token: i6.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,
@@ -384,7 +649,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."
@@ -513,7 +778,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)">
@@ -594,7 +886,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">
@@ -612,8 +908,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.MenuComponent, selector: "kendo-menu", inputs: ["menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { type: i6.MenuItemComponent, selector: "kendo-menu-item", inputs: ["text", "url", "disabled", "cssClass", "cssStyle", "icon", "svgIcon", "data", "separator"] }, { type: i7.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i8.SpreadsheetLoadFileComponent, selector: "kendo-spreadsheet-load-file-tool" }, { type: i7.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: i7.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i7.ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { type: i9.SpreadsheetFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]" }, { type: i10.SpreadsheetFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]" }, { type: i11.SpreadsheetForeColorComponent, selector: "kendo-spreadsheet-forecolor-tool" }, { type: i12.SpreadsheetBackColorComponent, selector: "kendo-spreadsheet-backcolor-tool" }, { type: i7.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: i13.NameBoxComponent, selector: "[kendoSpreadsheetNameBox]", inputs: ["data", "spreadsheetWidget"] }, { type: i14.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i15.SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: ["sheets", "sheetDescriptors"] }, { type: i16.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: i17.LocalizedMessagesDirective, selector: "[kendoSpreadsheetLocalizedMessages]" }, { type: i18.MainMenuDirective, selector: "[kendoSpreadsheetMenu]" }, { type: i19.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i19.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i20.SpreadsheetSaveFileDirective, selector: "[kendoSpreadsheetSaveFile]" }, { type: i21.SpreadsheetUndoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]" }, { type: i22.SpreadsheetRedoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]" }, { type: i23.SpreadsheetIncreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseFontSize]" }, { type: i24.SpreadsheetDecreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseFontSize]" }, { type: i25.SpreadsheetBoldDirective, selector: "kendo-toolbar-button[kendoSpreadsheetBold]" }, { type: i26.SpreadsheetItalicDirective, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]" }, { type: i27.SpreadsheetUnderlineDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]" }, { type: i28.SpreadsheetHorizontalTextAlignDirective, selector: "[kendoSpreadsheetHorizontalTextAlign]" }, { type: i29.SpreadsheetVerticalTextAlignDirective, selector: "[kendoSpreadsheetVerticalTextAlign]" }, { type: i30.SpreadsheetTextWrapDirective, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]" }, { type: i31.SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]" }, { type: i32.SpreadsheetInsertLinkDirective, selector: "kendo-toolbar-button[kendoSpreadsheetInsertLink]" }, { type: i33.SpreadsheetAddColumnLeftButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]" }, { type: i34.SpreadsheetAddColumnRightButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]" }, { type: i35.SpreadsheetAddRowBelowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]" }, { type: i36.SpreadsheetAddRowAboveButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]" }, { type: i37.SpreadsheetDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]" }, { type: i38.SpreadsheetDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]" }, { type: i39.SpreadsheetDecreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseDecimal]" }, { type: i40.SpreadsheetIncreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseDecimal]" }, { type: i41.SpreadsheetMergeDirective, selector: "[kendoSpreadsheetMerge]" }, { type: i42.SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]" }, { type: i43.FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]" }] });
+    `, isInline: true, components: [{ type: i7.MenuComponent, selector: "kendo-menu", inputs: ["menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { type: i7.MenuItemComponent, selector: "kendo-menu-item", inputs: ["text", "url", "disabled", "cssClass", "cssStyle", "icon", "svgIcon", "data", "separator"] }, { type: i8.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i9.SpreadsheetLoadFileComponent, selector: "kendo-spreadsheet-load-file-tool" }, { type: i8.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: i8.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i8.ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { type: i10.SpreadsheetFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]" }, { type: i11.SpreadsheetFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]" }, { type: i12.SpreadsheetForeColorComponent, selector: "kendo-spreadsheet-forecolor-tool" }, { type: i13.SpreadsheetBackColorComponent, selector: "kendo-spreadsheet-backcolor-tool" }, { type: i8.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: i14.NameBoxComponent, selector: "[kendoSpreadsheetNameBox]", inputs: ["data", "spreadsheetWidget"] }, { type: i15.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i16.SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: ["sheets", "sheetDescriptors"] }, { type: i7.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: i17.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: i18.LocalizedMessagesDirective, selector: "[kendoSpreadsheetLocalizedMessages]" }, { type: i19.MainMenuDirective, selector: "[kendoSpreadsheetMenu]" }, { type: i20.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i20.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i21.SpreadsheetSaveFileDirective, selector: "[kendoSpreadsheetSaveFile]" }, { type: i22.SpreadsheetUndoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]" }, { type: i23.SpreadsheetRedoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]" }, { type: i24.SpreadsheetIncreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseFontSize]" }, { type: i25.SpreadsheetDecreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseFontSize]" }, { type: i26.SpreadsheetBoldDirective, selector: "kendo-toolbar-button[kendoSpreadsheetBold]" }, { type: i27.SpreadsheetItalicDirective, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]" }, { type: i28.SpreadsheetUnderlineDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]" }, { type: i29.SpreadsheetHorizontalTextAlignDirective, selector: "[kendoSpreadsheetHorizontalTextAlign]" }, { type: i30.SpreadsheetVerticalTextAlignDirective, selector: "[kendoSpreadsheetVerticalTextAlign]" }, { type: i31.SpreadsheetTextWrapDirective, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]" }, { type: i32.SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]" }, { type: i33.SpreadsheetInsertLinkDirective, selector: "kendo-toolbar-button[kendoSpreadsheetInsertLink]" }, { type: i34.SpreadsheetAddColumnLeftButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]" }, { type: i35.SpreadsheetAddColumnRightButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]" }, { type: i36.SpreadsheetAddRowBelowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]" }, { type: i37.SpreadsheetAddRowAboveButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]" }, { type: i38.SpreadsheetDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]" }, { type: i39.SpreadsheetDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]" }, { type: i40.SpreadsheetDecreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseDecimal]" }, { type: i41.SpreadsheetIncreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseDecimal]" }, { type: i42.SpreadsheetMergeDirective, selector: "[kendoSpreadsheetMerge]" }, { type: i43.SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]" }, { type: i44.FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]", inputs: ["formulaListMaxHeight"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetComponent, decorators: [{
             type: Component,
             args: [{
@@ -762,7 +1063,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)">
@@ -843,7 +1171,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">
@@ -861,10 +1193,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.IntlService }, { type: i0.ElementRef }, { type: i2.LocalizationService }, { type: i3.SpreadsheetService }, { type: i4.SpreadsheetToolsService }, { type: i5.ErrorHandlingService }]; }, propDecorators: { formulaBarInputRef: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.IntlService }, { type: i0.ElementRef }, { type: i2.LocalizationService }, { type: i3.SpreadsheetService }, { type: i4.SpreadsheetToolsService }, { type: i5.ErrorHandlingService }, { type: i6.DialogService }]; }, propDecorators: { formulaBarInputRef: [{
                 type: ViewChild,
                 args: ['formulaBar', { read: FormulaInputDirective }]
             }], formulaCellInputRef: [{
@@ -876,6 +1213,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']
@@ -886,6 +1226,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], overflow: [{
                 type: Input
+            }], formulaListMaxHeight: [{
+                type: Input
             }], activeSheet: [{
                 type: Input
             }], sheets: [{