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

package/common/spreadsheet.service.d.ts

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { ViewContainerRef } from '@angular/core';
-import { Sheet, SpreadsheetWidget } from '@progress/kendo-spreadsheet-common';
+import { Range, Sheet, SpreadsheetWidget } from '@progress/kendo-spreadsheet-common';
 import { Subject } from 'rxjs';
 import { SheetsChanges } from './sheet-changes';
 import { SheetInfo } from '../models';
@@ -15,6 +15,7 @@ export declare class SpreadsheetService {
     spreadsheet: SpreadsheetWidget;
     sheetsChanged: Subject<SheetsChanges>;
     activeSheetChanged: Subject<Sheet>;
+    selectionChanged: Subject<Range>;
     dialogContainer: ViewContainerRef;
     constructor();
     set currentActiveSheet(value: string);

package/esm2020/common/spreadsheet.service.mjs

@@ -13,6 +13,7 @@ export class SpreadsheetService {
     constructor() {
         this.sheetsChanged = new Subject();
         this.activeSheetChanged = new Subject();
+        this.selectionChanged = new Subject();
         spreadsheetCounter++;
     }
     set currentActiveSheet(value) {

package/esm2020/localization/messages.mjs

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 export class MessagesDirective extends ComponentMessages {
 }
 MessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessagesDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-MessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: MessagesDirective, selector: "[kendoSpreadsheetMessages]", inputs: { home: "home", file: "file", insert: "insert", 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: [{
@@ -83,4 +83,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], sheetsMenu: [{
                 type: Input
+            }], view: [{
+                type: Input
+            }], merge: [{
+                type: Input
             }] } });

package/esm2020/package-metadata.mjs

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

package/esm2020/spreadsheet.component.mjs

@@ -46,14 +46,15 @@ import * as i24 from "./tools/typographical-emphasis/underline-tool.directive";
 import * as i25 from "./tools/align-tool.directive";
 import * as i26 from "./tools/text-wrap-tool.directive";
 import * as i27 from "./tools/format-tool.directive";
-import * as i28 from "./tools/gridlines-tool.directive";
-import * as i29 from "./tools/tables/add-column-left-button.directive";
-import * as i30 from "./tools/tables/add-column-right-button.directive";
-import * as i31 from "./tools/tables/add-row-below-button.directive";
-import * as i32 from "./tools/tables/add-row-above-button.directive";
-import * as i33 from "./tools/tables/delete-column-button.directive";
-import * as i34 from "./tools/tables/delete-row-button.directive";
-import * as i35 from "./action-bar/formula-input.directive";
+import * as i28 from "./tools/tables/add-column-left-button.directive";
+import * as i29 from "./tools/tables/add-column-right-button.directive";
+import * as i30 from "./tools/tables/add-row-below-button.directive";
+import * as i31 from "./tools/tables/add-row-above-button.directive";
+import * as i32 from "./tools/tables/delete-column-button.directive";
+import * as i33 from "./tools/tables/delete-row-button.directive";
+import * as i34 from "./tools/tables/merge-tool.directive";
+import * as i35 from "./tools/gridlines-tool.directive";
+import * as i36 from "./action-bar/formula-input.directive";
 /**
  * Represents the [Kendo UI Spreadsheet component for Angular]({% slug overview_spreadsheet %}).
  */
@@ -145,7 +146,10 @@ export 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);
@@ -174,6 +178,9 @@ export class SpreadsheetComponent {
                     }, {
                         id: 'insert',
                         text: this.messageFor('insert')
+                    }, {
+                        id: 'view',
+                        text: this.messageFor('view')
                     }];
             }
             this.selectedMenuItem = this.menuItems[1];
@@ -379,6 +386,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."
@@ -401,6 +410,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."
@@ -455,8 +466,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')"
@@ -470,6 +479,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>
@@ -499,7 +516,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.MenuComponent, selector: "kendo-menu", inputs: ["menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { type: i5.MenuItemComponent, selector: "kendo-menu-item", inputs: ["text", "url", "disabled", "cssClass", "cssStyle", "icon", "svgIcon", "data", "separator"] }, { type: i6.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i7.SpreadsheetLoadFileComponent, selector: "kendo-spreadsheet-load-file-tool" }, { type: i6.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: i6.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i6.ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { type: i8.SpreadsheetFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]" }, { type: i9.SpreadsheetFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]" }, { type: i10.SpreadsheetForeColorComponent, selector: "kendo-spreadsheet-forecolor-tool" }, { type: i11.SpreadsheetBackColorComponent, selector: "kendo-spreadsheet-backcolor-tool" }, { type: i6.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: i12.NameBoxComponent, selector: "[kendoSpreadsheetNameBox]", inputs: ["data", "spreadsheetWidget"] }, { type: i13.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i14.SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: ["sheets", "sheetDescriptors"] }, { type: i15.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: i16.LocalizedMessagesDirective, selector: "[kendoSpreadsheetLocalizedMessages]" }, { type: i17.MainMenuDirective, selector: "[kendoSpreadsheetMenu]" }, { type: i18.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i18.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i19.SpreadsheetSaveFileDirective, selector: "[kendoSpreadsheetSaveFile]" }, { type: i20.SpreadsheetUndoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]" }, { type: i21.SpreadsheetRedoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]" }, { type: i22.SpreadsheetBoldDirective, selector: "kendo-toolbar-button[kendoSpreadsheetBold]" }, { type: i23.SpreadsheetItalicDirective, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]" }, { type: i24.SpreadsheetUnderlineDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]" }, { type: i25.SpreadsheetTextAlignDirective, selector: "[kendoSpreadsheetTextAlign]" }, { type: i26.SpreadsheetTextWrapDirective, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]" }, { type: i27.SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]" }, { type: i28.SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]" }, { type: i29.SpreadsheetAddColumnLeftButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]" }, { type: i30.SpreadsheetAddColumnRightButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]" }, { type: i31.SpreadsheetAddRowBelowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]" }, { type: i32.SpreadsheetAddRowAboveButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]" }, { type: i33.SpreadsheetDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]" }, { type: i34.SpreadsheetDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]" }, { type: i35.FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]" }] });
+    `, isInline: true, components: [{ type: i5.MenuComponent, selector: "kendo-menu", inputs: ["menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { type: i5.MenuItemComponent, selector: "kendo-menu-item", inputs: ["text", "url", "disabled", "cssClass", "cssStyle", "icon", "svgIcon", "data", "separator"] }, { type: i6.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i7.SpreadsheetLoadFileComponent, selector: "kendo-spreadsheet-load-file-tool" }, { type: i6.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: i6.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i6.ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { type: i8.SpreadsheetFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]" }, { type: i9.SpreadsheetFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]" }, { type: i10.SpreadsheetForeColorComponent, selector: "kendo-spreadsheet-forecolor-tool" }, { type: i11.SpreadsheetBackColorComponent, selector: "kendo-spreadsheet-backcolor-tool" }, { type: i6.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: i12.NameBoxComponent, selector: "[kendoSpreadsheetNameBox]", inputs: ["data", "spreadsheetWidget"] }, { type: i13.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i14.SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: ["sheets", "sheetDescriptors"] }, { type: i15.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: i16.LocalizedMessagesDirective, selector: "[kendoSpreadsheetLocalizedMessages]" }, { type: i17.MainMenuDirective, selector: "[kendoSpreadsheetMenu]" }, { type: i18.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i18.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i19.SpreadsheetSaveFileDirective, selector: "[kendoSpreadsheetSaveFile]" }, { type: i20.SpreadsheetUndoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]" }, { type: i21.SpreadsheetRedoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]" }, { type: i22.SpreadsheetBoldDirective, selector: "kendo-toolbar-button[kendoSpreadsheetBold]" }, { type: i23.SpreadsheetItalicDirective, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]" }, { type: i24.SpreadsheetUnderlineDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]" }, { type: i25.SpreadsheetTextAlignDirective, selector: "[kendoSpreadsheetTextAlign]" }, { type: i26.SpreadsheetTextWrapDirective, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]" }, { type: i27.SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]" }, { type: i28.SpreadsheetAddColumnLeftButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]" }, { type: i29.SpreadsheetAddColumnRightButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]" }, { type: i30.SpreadsheetAddRowBelowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]" }, { type: i31.SpreadsheetAddRowAboveButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]" }, { type: i32.SpreadsheetDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]" }, { type: i33.SpreadsheetDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]" }, { type: i34.SpreadsheetMergeDirective, selector: "[kendoSpreadsheetMerge]" }, { type: i35.SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]" }, { type: i36.FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetComponent, decorators: [{
             type: Component,
             args: [{
@@ -547,6 +564,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."
@@ -569,6 +588,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."
@@ -623,8 +644,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')"
@@ -638,6 +657,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>

package/esm2020/spreadsheet.module.mjs

@@ -50,6 +50,7 @@ import { DialogContentComponent } from './tools/shared/dialog-content.component'
 import { MenuModule } from '@progress/kendo-angular-menu';
 import { MainMenuDirective } from './common/main-menu.directive';
 import { ActionDialogComponent } from './sheets-bar/action-dialog.component';
+import { SpreadsheetMergeDirective } from './tools/tables/merge-tool.directive';
 import * as i0 from "@angular/core";
 const DIRECTIVES = [
     SpreadsheetComponent,
@@ -85,7 +86,8 @@ const DIRECTIVES = [
     FontSizeDropDownListComponent,
     DialogContentComponent,
     MainMenuDirective,
-    ActionDialogComponent
+    ActionDialogComponent,
+    SpreadsheetMergeDirective
 ];
 const EXPORTS = [
     SpreadsheetComponent,
@@ -110,7 +112,8 @@ const EXPORTS = [
     SpreadsheetDeleteColumnButtonDirective,
     SpreadsheetDeleteRowButtonDirective,
     SpreadsheetTextAlignDirective,
-    SpreadsheetTextWrapDirective
+    SpreadsheetTextWrapDirective,
+    SpreadsheetMergeDirective
 ];
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -152,7 +155,8 @@ SpreadsheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         FontSizeDropDownListComponent,
         DialogContentComponent,
         MainMenuDirective,
-        ActionDialogComponent], imports: [CommonModule,
+        ActionDialogComponent,
+        SpreadsheetMergeDirective], imports: [CommonModule,
         ButtonsModule,
         ComboBoxModule,
         DropDownListModule,
@@ -188,7 +192,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,

package/esm2020/tools/shared/command-icons.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { alignCenterIcon, alignJustifyIcon, alignLeftIcon, alignRightIcon, boldIcon, dropletIcon, foregroundColorIcon, italicIcon, tableColumnDeleteIcon, tableColumnInsertLeftIcon, tableColumnInsertRightIcon, tableRowDeleteIcon, tableRowInsertAboveIcon, tableRowInsertBelowIcon, underlineIcon, arrowRotateCcwIcon, arrowRotateCwIcon, bordersNoneIcon, alignTopIcon, alignMiddleIcon, alignBottomIcon, textWrapIcon, folderOpenIcon, downloadIcon, customFormatIcon, fontSizeIcon, fontFamilyIcon } from '@progress/kendo-svg-icons';
+import { alignCenterIcon, alignJustifyIcon, alignLeftIcon, alignRightIcon, boldIcon, dropletIcon, foregroundColorIcon, italicIcon, tableColumnDeleteIcon, tableColumnInsertLeftIcon, tableColumnInsertRightIcon, tableRowDeleteIcon, tableRowInsertAboveIcon, tableRowInsertBelowIcon, underlineIcon, arrowRotateCcwIcon, arrowRotateCwIcon, bordersNoneIcon, alignTopIcon, alignMiddleIcon, alignBottomIcon, textWrapIcon, folderOpenIcon, downloadIcon, customFormatIcon, fontSizeIcon, fontFamilyIcon, cellsMergeHorizontallyIcon, cellsMergeIcon, cellsMergeVerticallyIcon, tableUnmergeIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -34,7 +34,12 @@ export 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
@@ -67,5 +72,10 @@ export const commandSVGIcons = {
     download: downloadIcon,
     format: customFormatIcon,
     fontSize: fontSizeIcon,
-    fontFamily: fontFamilyIcon
+    fontFamily: fontFamilyIcon,
+    merge: cellsMergeIcon,
+    mergeAll: cellsMergeIcon,
+    mergeHorizontally: cellsMergeHorizontallyIcon,
+    mergeVertically: cellsMergeVerticallyIcon,
+    unmerge: tableUnmergeIcon
 };

package/esm2020/tools/shared/constants.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { InjectionToken } from "@angular/core";
-import { commandSVGIcons } from './command-icons';
+import { commandIcons, commandSVGIcons } from './command-icons';
 const DEFAULT_FONT_FAMILY = 'Arial';
 const DEFAULT_FONT_SIZE = 12;
 /**
@@ -47,13 +47,22 @@ export const FORMATS = [
  * @hidden
  */
 export 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
+ */
+export 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

package/esm2020/tools/tables/index.mjs

@@ -8,3 +8,4 @@ export { SpreadsheetAddRowAboveButtonDirective } from './add-row-above-button.di
 export { SpreadsheetAddRowBelowButtonDirective } from './add-row-below-button.directive';
 export { SpreadsheetDeleteColumnButtonDirective } from './delete-column-button.directive';
 export { SpreadsheetDeleteRowButtonDirective } from './delete-row-button.directive';
+export { SpreadsheetMergeDirective } from './merge-tool.directive';

package/esm2020/tools/tables/merge-tool.directive.mjs

@@ -0,0 +1,68 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { ToolBarDropDownButtonComponent } from '@progress/kendo-angular-toolbar';
+import { SpreadsheetLocalizationService } from '../../localization/spreadsheet-localization.service';
+import { SpreadsheetService } from '../../common/spreadsheet.service';
+import { commandIcons, commandSVGIcons } from '../shared/command-icons';
+import { MERGE } from '../shared/constants';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-toolbar";
+import * as i2 from "../../localization/spreadsheet-localization.service";
+import * as i3 from "../../common/spreadsheet.service";
+/**
+ * @hidden
+ */
+export 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.ToolBarDropDownButtonComponent }, { token: i2.SpreadsheetLocalizationService }, { token: i3.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.ToolBarDropDownButtonComponent }, { type: i2.SpreadsheetLocalizationService }, { type: i3.SpreadsheetService }]; } });