@progress/kendo-angular-spreadsheet 14.0.2-develop.9 → 14.1.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$5 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, plusIcon, menuIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, eyeIcon } from '@progress/kendo-svg-icons';
+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, plusIcon, menuIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, eyeIcon } from '@progress/kendo-svg-icons';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages } from '@progress/kendo-angular-l10n';
 import * as i3 from '@progress/kendo-angular-common';
@@ -46,8 +46,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-spreadsheet',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1698069142,
-    version: '14.0.2-develop.9',
+    publishDate: 1699437600,
+    version: '14.1.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',
 };
 
@@ -162,6 +162,7 @@ class SpreadsheetService {
     constructor() {
         this.sheetsChanged = new Subject();
         this.activeSheetChanged = new Subject();
+        this.selectionChanged = new Subject();
         spreadsheetCounter++;
     }
     set currentActiveSheet(value) {
@@ -466,7 +467,12 @@ const commandIcons = {
     download: 'download',
     format: 'custom-format',
     fontSize: 'font-size',
-    fontFamily: 'font-family'
+    fontFamily: 'font-family',
+    merge: 'cells-merge',
+    mergeAll: 'cells-merge',
+    mergeHorizontally: 'cells-merge-horizontally',
+    mergeVertically: 'cells-merge-vertically',
+    unmerge: 'table-unmerge'
 };
 /**
  * @hidden
@@ -499,7 +505,12 @@ const commandSVGIcons = {
     download: downloadIcon,
     format: customFormatIcon,
     fontSize: fontSizeIcon,
-    fontFamily: fontFamilyIcon
+    fontFamily: fontFamilyIcon,
+    merge: cellsMergeIcon,
+    mergeAll: cellsMergeIcon,
+    mergeHorizontally: cellsMergeHorizontallyIcon,
+    mergeVertically: cellsMergeVerticallyIcon,
+    unmerge: tableUnmergeIcon
 };
 
 /**
@@ -721,13 +732,22 @@ const FORMATS = [
  * @hidden
  */
 const ALIGNS = [
-    { icon: 'align-left', svgIcon: commandSVGIcons.alignLeft, textKey: 'Align Left', commandName: 'textAlign', value: 'left', cssClass: '' },
-    { icon: 'align-center', svgIcon: commandSVGIcons.alignCenter, textKey: 'Align Center', commandName: 'textAlign', value: 'center', cssClass: '' },
-    { icon: 'align-right', svgIcon: commandSVGIcons.alignRight, textKey: 'Align Right', commandName: 'textAlign', value: 'right', cssClass: '' },
-    { icon: 'align-justify', svgIcon: commandSVGIcons.alignJustify, textKey: 'Align Justify', commandName: 'textAlign', value: 'justify', cssClass: '' },
-    { icon: 'align-top', svgIcon: commandSVGIcons.alignTop, textKey: 'Align Top', commandName: 'verticalAlign', value: 'top', cssClass: '' },
-    { icon: 'align-middle', svgIcon: commandSVGIcons.alignMiddle, textKey: 'Align Middle', commandName: 'verticalAlign', value: 'center', cssClass: '' },
-    { icon: 'align-bottom', svgIcon: commandSVGIcons.alignBottom, textKey: 'Align Bottom', commandName: 'verticalAlign', value: 'bottom', cssClass: '' }
+    { icon: commandIcons.alignLeft, svgIcon: commandSVGIcons.alignLeft, textKey: 'Align Left', commandName: 'textAlign', value: 'left', cssClass: '' },
+    { icon: commandIcons.alignCenter, svgIcon: commandSVGIcons.alignCenter, textKey: 'Align Center', commandName: 'textAlign', value: 'center', cssClass: '' },
+    { icon: commandIcons.alignRight, svgIcon: commandSVGIcons.alignRight, textKey: 'Align Right', commandName: 'textAlign', value: 'right', cssClass: '' },
+    { icon: commandIcons.alignJustify, svgIcon: commandSVGIcons.alignJustify, textKey: 'Align Justify', commandName: 'textAlign', value: 'justify', cssClass: '' },
+    { icon: commandIcons.alignTop, svgIcon: commandSVGIcons.alignTop, textKey: 'Align Top', commandName: 'verticalAlign', value: 'top', cssClass: '' },
+    { icon: commandIcons.alignMiddle, svgIcon: commandSVGIcons.alignMiddle, textKey: 'Align Middle', commandName: 'verticalAlign', value: 'center', cssClass: '' },
+    { icon: commandIcons.alignBottom, svgIcon: commandSVGIcons.alignBottom, textKey: 'Align Bottom', commandName: 'verticalAlign', value: 'bottom', cssClass: '' }
+];
+/**
+ * @hidden
+ */
+const MERGE = [
+    { icon: commandIcons.mergeAll, svgIcon: commandSVGIcons.mergeAll, textKey: 'Merge all', commandName: 'cells', value: 'cells', disabled: false },
+    { icon: commandIcons.mergeHorizontally, svgIcon: commandSVGIcons.mergeHorizontally, textKey: 'Merge horizontally', commandName: 'horizontally', value: 'horizontally', disabled: false },
+    { icon: commandIcons.mergeVertically, svgIcon: commandSVGIcons.mergeVertically, textKey: 'Merge vertically', commandName: 'vertically', value: 'vertically', disabled: false },
+    { icon: commandIcons.unmerge, svgIcon: commandSVGIcons.unmerge, textKey: 'Unmerge', commandName: 'unmerge', value: 'unmerge', disabled: false }
 ];
 /**
  * @hidden
@@ -1931,7 +1951,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", 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", dialogApply: "dialogApply", dialogCancel: "dialogCancel", dialogDelete: "dialogDelete", dialogRename: "dialogRename", delete: "delete", rename: "rename", nameBox: "nameBox", addSheet: "addSheet", sheetsMenu: "sheetsMenu" }, 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", 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", dialogApply: "dialogApply", dialogCancel: "dialogCancel", dialogDelete: "dialogDelete", dialogRename: "dialogRename", delete: "delete", rename: "rename", nameBox: "nameBox", addSheet: "addSheet", sheetsMenu: "sheetsMenu", view: "view", merge: "merge" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessagesDirective, decorators: [{
             type: Directive,
             args: [{
@@ -2003,6 +2023,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], sheetsMenu: [{
                 type: Input
+            }], view: [{
+                type: Input
+            }], merge: [{
+                type: Input
             }] } });
 
 /**
@@ -2387,38 +2411,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 SpreadsheetGridLinesDirective extends SpreadsheetCommandButton {
-    constructor(button, localization, spreadsheetService, toolsService) {
-        super('gridLines', button, localization, spreadsheetService, toolsService, {
-            command: 'GridLinesChangeCommand',
-            options: { property: 'gridLines',
-                value: !button.selected
-            }
-        });
-    }
-    clickHandler() {
-        const sheet = this.spreadsheetService.spreadsheet.activeSheet();
-        if (sheet) {
-            const value = !sheet.showGridLines();
-            const options = {
-                command: 'GridLinesChangeCommand', options: { property: 'gridLines', value }
-            };
-            this.spreadsheetService.spreadsheet.executeCommand(options);
-        }
-    }
-}
-SpreadsheetGridLinesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetGridLinesDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetGridLinesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetGridLinesDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kendo-toolbar-button[kendoSpreadsheetGridLines]'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
-
 /**
  * @hidden
  */
@@ -2547,6 +2539,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
 
+/**
+ * @hidden
+ */
+class SpreadsheetMergeDirective {
+    constructor(host, localization, spreadsheetService) {
+        this.host = host;
+        this.spreadsheetService = spreadsheetService;
+        this.commandName = 'merge';
+        this.subs = new Subscription();
+        host.svgIcon = commandSVGIcons[this.commandName];
+        host.icon = commandIcons[this.commandName];
+        host.arrowIcon = true;
+        host.fillMode = 'flat';
+        host.data = [...MERGE];
+        this.subs.add(host.itemClick.subscribe((e) => this.onItemClick(e)));
+        host.title = localization.get(this.commandName);
+        host.textField = 'textKey';
+    }
+    ngOnInit() {
+        this.subs.add(this.host.open.subscribe(() => {
+            const sheet = this.spreadsheetService.spreadsheet.activeSheet();
+            const isMergedCellWithinRange = this.hasMergedCells(sheet);
+            const unmergeItem = this.host.data.find(i => i.commandName === 'unmerge');
+            unmergeItem.disabled = !isMergedCellWithinRange;
+        }));
+        this.subs.add(this.spreadsheetService.selectionChanged.subscribe(range => this.selectedRange = range));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    onItemClick(item) {
+        if (item.disabled) {
+            return;
+        }
+        const value = item.value || null;
+        const options = {
+            command: 'MergeCellCommand', options: { property: item.commandName, value }
+        };
+        this.spreadsheetService.spreadsheet.executeCommand(options);
+    }
+    hasMergedCells(sheet) {
+        const range = sheet._ref(this.selectedRange);
+        return sheet._getMergedCells(range).hasMerged;
+    }
+}
+SpreadsheetMergeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetMergeDirective, deps: [{ token: i1$2.ToolBarDropDownButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetMergeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetMergeDirective, selector: "[kendoSpreadsheetMerge]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetMergeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoSpreadsheetMerge]',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarDropDownButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }]; } });
+
+/**
+ * @hidden
+ */
+class SpreadsheetGridLinesDirective extends SpreadsheetCommandButton {
+    constructor(button, localization, spreadsheetService, toolsService) {
+        super('gridLines', button, localization, spreadsheetService, toolsService, {
+            command: 'GridLinesChangeCommand',
+            options: { property: 'gridLines',
+                value: !button.selected
+            }
+        });
+    }
+    clickHandler() {
+        const sheet = this.spreadsheetService.spreadsheet.activeSheet();
+        if (sheet) {
+            const value = !sheet.showGridLines();
+            const options = {
+                command: 'GridLinesChangeCommand', options: { property: 'gridLines', value }
+            };
+            this.spreadsheetService.spreadsheet.executeCommand(options);
+        }
+    }
+}
+SpreadsheetGridLinesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetGridLinesDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetGridLinesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetGridLinesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetGridLines]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.ToolBarButtonComponent }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }]; } });
+
 /**
  * Represents the [Kendo UI Spreadsheet component for Angular]({% slug overview_spreadsheet %}).
  */
@@ -2638,7 +2716,10 @@ class SpreadsheetComponent {
          */
         this.showLicenseWatermark = false;
         this.onChange = (e) => hasObservers(this.change) && this.change.emit(e);
-        this.onSelectionChange = (e) => hasObservers(this.selectionChange) && this.selectionChange.emit(e);
+        this.onSelectionChange = (e) => {
+            hasObservers(this.selectionChange) && this.selectionChange.emit(e);
+            this.spreadsheetService.selectionChanged.next(e.range);
+        };
         this.onChangeFormat = (e) => hasObservers(this.formatChange) && this.formatChange.emit(e);
         this.onExcelExport = (e) => hasObservers(this.excelExport) && this.excelExport.emit(e);
         this.onExcelImport = (e) => hasObservers(this.excelImport) && this.excelImport.emit(e);
@@ -2668,6 +2749,9 @@ class SpreadsheetComponent {
                     }, {
                         id: 'insert',
                         text: this.messageFor('insert')
+                    }, {
+                        id: 'view',
+                        text: this.messageFor('view')
                     }];
             }
             this.selectedMenuItem = this.menuItems[1];
@@ -2852,6 +2936,8 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             file="File"
             i18n-insert="kendo.spreadsheet.insert|The text of the Insert toolbar tab."
             insert="Insert"
+            i18n-view="kendo.spreadsheet.view|The text of the View toolbar tab."
+            view="View"
             i18n-undo="kendo.spreadsheet.undo|The title of the Undo tool."
             undo="Undo"
             i18n-redo="kendo.spreadsheet.redo|The title of the Redo tool."
@@ -2874,6 +2960,8 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             wrap="Text wrap"
             i18n-align="kendo.spreadsheet.align|The title of the Text Align tool."
             align="Align"
+            i18n-merge="kendo.spreadsheet.merge|The title of the Cells Merge tool."
+            merge="Merge"
             i18n-dialogApply="kendo.spreadsheet.dialogApply|The text of the **Apply** button in all Spreadsheet dialogs."
             dialogApply="Apply"
             i18n-dialogCancel="kendo.spreadsheet.dialogCancel|The text of the **Cancel** button in all Spreadsheet dialogs."
@@ -2928,8 +3016,6 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 <kendo-toolbar-button kendoSpreadsheetTextWrap></kendo-toolbar-button>
                 <kendo-toolbar-separator></kendo-toolbar-separator>
                 <kendo-toolbar-dropdownbutton kendoSpreadsheetFormat></kendo-toolbar-dropdownbutton>
-                <kendo-toolbar-separator></kendo-toolbar-separator>
-                <kendo-toolbar-button kendoSpreadsheetGridLines></kendo-toolbar-button>
             </kendo-toolbar>
             <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'insert'"
                 [attr.aria-label]="messageFor('insert')"
@@ -2943,6 +3029,14 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 <kendo-toolbar-button kendoSpreadsheetDeleteColumnButton></kendo-toolbar-button>
                 <kendo-toolbar-button kendoSpreadsheetDeleteRowButton></kendo-toolbar-button>
             </kendo-toolbar>
+            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'view'"
+                [attr.aria-label]="messageFor('view')"
+                class="k-spreadsheet-toolbar"
+                [overflow]="overflow">
+                <kendo-toolbar-dropdownbutton kendoSpreadsheetMerge></kendo-toolbar-dropdownbutton>
+                <kendo-toolbar-separator></kendo-toolbar-separator>
+                <kendo-toolbar-button kendoSpreadsheetGridLines></kendo-toolbar-button>
+            </kendo-toolbar>
         </div>
         <div class="k-spreadsheet-action-bar">
             <div #nameBox kendoSpreadsheetNameBox [spreadsheetWidget]="spreadsheetWidget"></div>
@@ -2972,7 +3066,7 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         <ng-container #dialogContainer></ng-container>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, components: [{ type: i5$2.MenuComponent, selector: "kendo-menu", inputs: ["menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { type: i5$2.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: SpreadsheetBoldDirective, selector: "kendo-toolbar-button[kendoSpreadsheetBold]" }, { type: SpreadsheetItalicDirective, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]" }, { type: SpreadsheetUnderlineDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]" }, { type: SpreadsheetTextAlignDirective, selector: "[kendoSpreadsheetTextAlign]" }, { type: SpreadsheetTextWrapDirective, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]" }, { type: SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]" }, { type: SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]" }, { 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: FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]" }] });
+    `, isInline: true, components: [{ type: i5$2.MenuComponent, selector: "kendo-menu", inputs: ["menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { type: i5$2.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: SpreadsheetBoldDirective, selector: "kendo-toolbar-button[kendoSpreadsheetBold]" }, { type: SpreadsheetItalicDirective, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]" }, { type: SpreadsheetUnderlineDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]" }, { type: SpreadsheetTextAlignDirective, selector: "[kendoSpreadsheetTextAlign]" }, { type: SpreadsheetTextWrapDirective, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]" }, { type: SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]" }, { 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: SpreadsheetMergeDirective, selector: "[kendoSpreadsheetMerge]" }, { type: SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]" }, { type: FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetComponent, decorators: [{
             type: Component,
             args: [{
@@ -3020,6 +3114,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             file="File"
             i18n-insert="kendo.spreadsheet.insert|The text of the Insert toolbar tab."
             insert="Insert"
+            i18n-view="kendo.spreadsheet.view|The text of the View toolbar tab."
+            view="View"
             i18n-undo="kendo.spreadsheet.undo|The title of the Undo tool."
             undo="Undo"
             i18n-redo="kendo.spreadsheet.redo|The title of the Redo tool."
@@ -3042,6 +3138,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             wrap="Text wrap"
             i18n-align="kendo.spreadsheet.align|The title of the Text Align tool."
             align="Align"
+            i18n-merge="kendo.spreadsheet.merge|The title of the Cells Merge tool."
+            merge="Merge"
             i18n-dialogApply="kendo.spreadsheet.dialogApply|The text of the **Apply** button in all Spreadsheet dialogs."
             dialogApply="Apply"
             i18n-dialogCancel="kendo.spreadsheet.dialogCancel|The text of the **Cancel** button in all Spreadsheet dialogs."
@@ -3096,8 +3194,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 <kendo-toolbar-button kendoSpreadsheetTextWrap></kendo-toolbar-button>
                 <kendo-toolbar-separator></kendo-toolbar-separator>
                 <kendo-toolbar-dropdownbutton kendoSpreadsheetFormat></kendo-toolbar-dropdownbutton>
-                <kendo-toolbar-separator></kendo-toolbar-separator>
-                <kendo-toolbar-button kendoSpreadsheetGridLines></kendo-toolbar-button>
             </kendo-toolbar>
             <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'insert'"
                 [attr.aria-label]="messageFor('insert')"
@@ -3111,6 +3207,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 <kendo-toolbar-button kendoSpreadsheetDeleteColumnButton></kendo-toolbar-button>
                 <kendo-toolbar-button kendoSpreadsheetDeleteRowButton></kendo-toolbar-button>
             </kendo-toolbar>
+            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'view'"
+                [attr.aria-label]="messageFor('view')"
+                class="k-spreadsheet-toolbar"
+                [overflow]="overflow">
+                <kendo-toolbar-dropdownbutton kendoSpreadsheetMerge></kendo-toolbar-dropdownbutton>
+                <kendo-toolbar-separator></kendo-toolbar-separator>
+                <kendo-toolbar-button kendoSpreadsheetGridLines></kendo-toolbar-button>
+            </kendo-toolbar>
         </div>
         <div class="k-spreadsheet-action-bar">
             <div #nameBox kendoSpreadsheetNameBox [spreadsheetWidget]="spreadsheetWidget"></div>
@@ -3268,7 +3372,8 @@ const DIRECTIVES = [
     FontSizeDropDownListComponent,
     DialogContentComponent,
     MainMenuDirective,
-    ActionDialogComponent
+    ActionDialogComponent,
+    SpreadsheetMergeDirective
 ];
 const EXPORTS = [
     SpreadsheetComponent,
@@ -3293,7 +3398,8 @@ const EXPORTS = [
     SpreadsheetDeleteColumnButtonDirective,
     SpreadsheetDeleteRowButtonDirective,
     SpreadsheetTextAlignDirective,
-    SpreadsheetTextWrapDirective
+    SpreadsheetTextWrapDirective,
+    SpreadsheetMergeDirective
 ];
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -3335,7 +3441,8 @@ SpreadsheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         FontSizeDropDownListComponent,
         DialogContentComponent,
         MainMenuDirective,
-        ActionDialogComponent], imports: [CommonModule,
+        ActionDialogComponent,
+        SpreadsheetMergeDirective], imports: [CommonModule,
         ButtonsModule,
         ComboBoxModule,
         DropDownListModule,
@@ -3371,7 +3478,8 @@ SpreadsheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         SpreadsheetDeleteColumnButtonDirective,
         SpreadsheetDeleteRowButtonDirective,
         SpreadsheetTextAlignDirective,
-        SpreadsheetTextWrapDirective] });
+        SpreadsheetTextWrapDirective,
+        SpreadsheetMergeDirective] });
 SpreadsheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetModule, imports: [[
             CommonModule,
             ButtonsModule,
@@ -3418,5 +3526,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CustomMessagesComponent, FormulaInputDirective, FormulaListComponent, NameBoxComponent, SheetsBarComponent, SpreadsheetAddColumnLeftButtonDirective, SpreadsheetAddColumnRightButtonDirective, SpreadsheetAddRowAboveButtonDirective, SpreadsheetAddRowBelowButtonDirective, SpreadsheetBackColorComponent, SpreadsheetBoldDirective, SpreadsheetComponent, SpreadsheetDeleteColumnButtonDirective, SpreadsheetDeleteRowButtonDirective, SpreadsheetFontFamilyComponent, SpreadsheetFontSizeComponent, SpreadsheetForeColorComponent, SpreadsheetFormatDirective, SpreadsheetGridLinesDirective, SpreadsheetItalicDirective, SpreadsheetLoadFileComponent, SpreadsheetModule, SpreadsheetRedoDirective, SpreadsheetSaveFileDirective, SpreadsheetTextAlignDirective, SpreadsheetTextWrapDirective, SpreadsheetUnderlineDirective, SpreadsheetUndoDirective };
+export { CustomMessagesComponent, FormulaInputDirective, FormulaListComponent, NameBoxComponent, SheetsBarComponent, SpreadsheetAddColumnLeftButtonDirective, SpreadsheetAddColumnRightButtonDirective, SpreadsheetAddRowAboveButtonDirective, SpreadsheetAddRowBelowButtonDirective, SpreadsheetBackColorComponent, SpreadsheetBoldDirective, SpreadsheetComponent, SpreadsheetDeleteColumnButtonDirective, SpreadsheetDeleteRowButtonDirective, SpreadsheetFontFamilyComponent, SpreadsheetFontSizeComponent, SpreadsheetForeColorComponent, SpreadsheetFormatDirective, SpreadsheetGridLinesDirective, SpreadsheetItalicDirective, SpreadsheetLoadFileComponent, SpreadsheetMergeDirective, SpreadsheetModule, SpreadsheetRedoDirective, SpreadsheetSaveFileDirective, SpreadsheetTextAlignDirective, SpreadsheetTextWrapDirective, SpreadsheetUnderlineDirective, SpreadsheetUndoDirective };