@progress/kendo-angular-spreadsheet 17.0.0-develop.4 → 17.0.0-develop.41

package/{fesm2020 → fesm2022}/progress-kendo-angular-spreadsheet.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, Inject, Optional, Component, HostBinding, Input, Directive, ElementRef, ViewChild, ViewChildren, HostListener, InjectionToken, forwardRef, ViewContainerRef, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Output, Inject, Optional, Component, Input, Directive, HostBinding, ElementRef, ViewChild, ViewChildren, HostListener, InjectionToken, forwardRef, ViewContainerRef, NgModule } from '@angular/core';
 import { NgFor, NgIf, NgStyle, NgSwitch, NgSwitchCase } from '@angular/common';
 import { Subject, Subscription } from 'rxjs';
 import { take, map } from 'rxjs/operators';
@@ -38,8 +38,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-spreadsheet',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1728985215,
-    version: '17.0.0-develop.4',
+    publishDate: 1730818370,
+    version: '17.0.0-develop.41',
     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',
 };
 
@@ -48,11 +48,13 @@ let spreadsheetCounter = 0;
  * @hidden
  */
 class SpreadsheetService {
+    spreadsheet;
+    sheetsChanged = new Subject();
+    onSheetsBarFocus = new Subject();
+    activeSheetChanged = new Subject();
+    selectionChanged = new Subject();
+    dialogContainer;
     constructor() {
-        this.sheetsChanged = new Subject();
-        this.onSheetsBarFocus = new Subject();
-        this.activeSheetChanged = new Subject();
-        this.selectionChanged = new Subject();
         spreadsheetCounter++;
     }
     set currentActiveSheet(value) {
@@ -70,14 +72,15 @@ class SpreadsheetService {
     get tablistId() {
         return `k-spreadsheet-${spreadsheetCounter}-tablist`;
     }
+    _currentActiveSheet;
     notifySheetsChange(actionType, sheetInfo) {
         const sheets = this.spreadsheet.sheets();
         this.sheetsChanged.next({ sheets, sheet: sheetInfo, actionType });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetService });
 }
-SpreadsheetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SpreadsheetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -85,52 +88,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class SpreadsheetToolsService {
-    constructor(ngZone) {
-        this.ngZone = ngZone;
-        this.stateChange = new EventEmitter();
-        this.toolsFunctions = [
-            'bold',
-            'italic',
-            'underline',
-            'fontFamily',
-            'fontSize',
-            'color',
-            'background',
-            'textAlign',
-            'verticalAlign',
-            'wrap',
-            'gridLines',
-            'format'
-        ];
-        this._toolsState = {};
-        this.updateTools = (e) => {
-            this.ngZone.run(() => {
-                const state = {};
-                this.toolsFunctions.forEach(tool => {
-                    if (typeof e.range[tool] === 'function') {
-                        state[tool] = e.range[tool]();
-                    }
-                    else if (tool === 'gridLines') {
-                        state[tool] = e.range.sheet().showGridLines();
-                    }
-                });
-                if (this.toolsFunctions.some(k => state[k] !== this.toolsState[k])) {
-                    this.toolsState = state;
-                    this.stateChange.emit(state);
-                }
-            });
-        };
-    }
+    ngZone;
+    stateChange = new EventEmitter();
     set toolsState(state) {
         this._toolsState = state;
     }
     get toolsState() {
         return this._toolsState;
     }
+    toolsFunctions = [
+        'bold',
+        'italic',
+        'underline',
+        'fontFamily',
+        'fontSize',
+        'color',
+        'background',
+        'textAlign',
+        'verticalAlign',
+        'wrap',
+        'gridLines',
+        'format'
+    ];
+    _toolsState = {};
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+    }
+    updateTools = (e) => {
+        this.ngZone.run(() => {
+            const state = {};
+            this.toolsFunctions.forEach(tool => {
+                if (typeof e.range[tool] === 'function') {
+                    state[tool] = e.range[tool]();
+                }
+                else if (tool === 'gridLines') {
+                    state[tool] = e.range.sheet().showGridLines();
+                }
+            });
+            if (this.toolsFunctions.some(k => state[k] !== this.toolsState[k])) {
+                this.toolsState = state;
+                this.stateChange.emit(state);
+            }
+        });
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetToolsService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetToolsService });
 }
-SpreadsheetToolsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetToolsService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-SpreadsheetToolsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetToolsService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetToolsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetToolsService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { stateChange: [{
                 type: Output
@@ -143,10 +147,10 @@ class SpreadsheetLocalizationService extends LocalizationService {
     constructor(prefix, messageService, _rtl) {
         super(prefix, messageService, _rtl);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i2.MessageService, optional: true }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetLocalizationService });
 }
-SpreadsheetLocalizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i2.MessageService, optional: true }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-SpreadsheetLocalizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetLocalizationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetLocalizationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetLocalizationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
@@ -191,19 +195,26 @@ const replaceMessagePlaceholder = (message, name, value) => message.replace(new
  * @hidden
  */
 class FormulaListComponent {
-    constructor(element, spreadsheetService) {
+    element;
+    spreadsheetService;
+    renderer;
+    maxHeight;
+    data = [];
+    itemClick;
+    formulaFxIcon = formulaFxIcon;
+    constructor(element, spreadsheetService, renderer) {
         this.element = element;
         this.spreadsheetService = spreadsheetService;
-        this.id = this.spreadsheetService.formulaListId;
-        this.data = [];
-        this.formulaFxIcon = formulaFxIcon;
-        this.handleMouseDown = (ev) => {
-            ev.preventDefault();
-        };
+        this.renderer = renderer;
     }
-}
-FormulaListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormulaListComponent, deps: [{ token: i0.ElementRef }, { token: SpreadsheetService }], target: i0.ɵɵFactoryTarget.Component });
-FormulaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FormulaListComponent, isStandalone: true, selector: "kendo-spreadsheet-formula-list", inputs: { maxHeight: "maxHeight", data: "data", itemClick: "itemClick" }, host: { properties: { "attr.id": "this.id" } }, ngImport: i0, template: `
+    ngOnInit() {
+        this.renderer.setAttribute(this.element.nativeElement, 'id', this.spreadsheetService.formulaListId);
+    }
+    handleMouseDown = (ev) => {
+        ev.preventDefault();
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormulaListComponent, deps: [{ token: i0.ElementRef }, { token: SpreadsheetService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormulaListComponent, isStandalone: true, selector: "kendo-spreadsheet-formula-list", inputs: { maxHeight: "maxHeight", data: "data", itemClick: "itemClick" }, ngImport: i0, template: `
         <ul #ulRef
             class="k-spreadsheet-formula-list k-list-ul k-list-md k-group k-reset"
             role="menu"
@@ -222,7 +233,8 @@ FormulaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                 </li>
         </ul>
     `, isInline: true, dependencies: [{ kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormulaListComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormulaListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-spreadsheet-formula-list',
@@ -248,10 +260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     standalone: true,
                     imports: [EventsOutsideAngularDirective, NgFor, IconWrapperComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SpreadsheetService }]; }, propDecorators: { id: [{
-                type: HostBinding,
-                args: ['attr.id']
-            }], maxHeight: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SpreadsheetService }, { type: i0.Renderer2 }]; }, propDecorators: { maxHeight: [{
                 type: Input
             }], data: [{
                 type: Input
@@ -263,63 +272,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class FormulaInputDirective {
-    constructor(element, popupService, spreadsheetService, localization) {
-        this.element = element;
-        this.popupService = popupService;
-        this.spreadsheetService = spreadsheetService;
-        this.localization = localization;
-        this.hostClasses = true;
-        this.role = 'combobox';
-        this.ariaHasPopup = 'menu';
-        this.ariaExpanded = 'false';
-        this.focusedItem = () => this.list?.element.nativeElement.querySelector('.k-focus');
-        this.unfocus = () => {
-            const focused = this.focusedItem();
-            if (focused) {
-                focused.classList.remove('k-focus');
-            }
-        };
-        this.focusNext = (dir) => {
-            const element = this.list?.element.nativeElement.firstElementChild;
-            const items = Array.from((element && element.children) || []);
-            const focused = this.focusedItem();
-            let next;
-            if (focused) {
-                const index = items.indexOf(focused);
-                focused.classList.remove('k-focus');
-                next = items[index + dir] ? items[index + dir] : (dir === 1 ? items[0] : items[items.length - 1]);
-            }
-            else {
-                next = (dir === 1 ? items[0] : items[items.length - 1]);
-            }
-            if (next) {
-                next.classList.add('k-focus');
-                const { offsetTop, offsetHeight, parentElement } = next;
-                if (dir > 0) {
-                    if (offsetTop + offsetHeight >= parentElement.offsetHeight + parentElement.scrollTop) {
-                        parentElement.scrollTop = Math.min(parentElement.scrollTop + offsetHeight, parentElement.scrollHeight - parentElement.offsetHeight);
-                    }
-                    if (next === items[0]) {
-                        next.scrollIntoView();
-                    }
-                }
-                else {
-                    if (offsetTop <= parentElement.scrollTop) {
-                        parentElement.scrollTop = Math.max(parentElement.scrollTop - offsetHeight, 0);
-                    }
-                    if (next === items[items.length - 1]) {
-                        next.scrollIntoView();
-                    }
-                }
-            }
-        };
-    }
+    element;
+    popupService;
+    spreadsheetService;
+    localization;
+    hostClasses = true;
     get title() {
         return this.localization.get('formulaInput');
     }
+    role = 'combobox';
+    ariaHasPopup = 'menu';
+    ariaExpanded = 'false';
     get ariaControls() {
         return this.ariaExpanded === 'true' ? this.spreadsheetService.formulaListId : null;
     }
+    formulaListMaxHeight;
+    list;
+    data;
+    constructor(element, popupService, spreadsheetService, localization) {
+        this.element = element;
+        this.popupService = popupService;
+        this.spreadsheetService = spreadsheetService;
+        this.localization = localization;
+    }
+    popupRef;
+    handler;
     get listElement() {
         return this.list?.element.nativeElement.firstElementChild;
     }
@@ -392,10 +369,51 @@ class FormulaInputDirective {
             }
         };
     }
+    focusedItem = () => this.list?.element.nativeElement.querySelector('.k-focus');
+    unfocus = () => {
+        const focused = this.focusedItem();
+        if (focused) {
+            focused.classList.remove('k-focus');
+        }
+    };
+    focusNext = (dir) => {
+        const element = this.list?.element.nativeElement.firstElementChild;
+        const items = Array.from((element && element.children) || []);
+        const focused = this.focusedItem();
+        let next;
+        if (focused) {
+            const index = items.indexOf(focused);
+            focused.classList.remove('k-focus');
+            next = items[index + dir] ? items[index + dir] : (dir === 1 ? items[0] : items[items.length - 1]);
+        }
+        else {
+            next = (dir === 1 ? items[0] : items[items.length - 1]);
+        }
+        if (next) {
+            next.classList.add('k-focus');
+            const { offsetTop, offsetHeight, parentElement } = next;
+            if (dir > 0) {
+                if (offsetTop + offsetHeight >= parentElement.offsetHeight + parentElement.scrollTop) {
+                    parentElement.scrollTop = Math.min(parentElement.scrollTop + offsetHeight, parentElement.scrollHeight - parentElement.offsetHeight);
+                }
+                if (next === items[0]) {
+                    next.scrollIntoView();
+                }
+            }
+            else {
+                if (offsetTop <= parentElement.scrollTop) {
+                    parentElement.scrollTop = Math.max(parentElement.scrollTop - offsetHeight, 0);
+                }
+                if (next === items[items.length - 1]) {
+                    next.scrollIntoView();
+                }
+            }
+        }
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormulaInputDirective, deps: [{ token: i0.ElementRef }, { token: i1.PopupService }, { token: SpreadsheetService }, { token: SpreadsheetLocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FormulaInputDirective, isStandalone: true, selector: "[kendoSpreadsheetFormulaInput]", inputs: { formulaListMaxHeight: "formulaListMaxHeight" }, host: { properties: { "class.k-spreadsheet-formula-input": "this.hostClasses", "attr.title": "this.title", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-controls": "this.ariaControls" } }, ngImport: i0 });
 }
-FormulaInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormulaInputDirective, deps: [{ token: i0.ElementRef }, { token: i1.PopupService }, { token: SpreadsheetService }, { token: SpreadsheetLocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-FormulaInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FormulaInputDirective, isStandalone: true, selector: "[kendoSpreadsheetFormulaInput]", inputs: { formulaListMaxHeight: "formulaListMaxHeight" }, host: { properties: { "class.k-spreadsheet-formula-input": "this.hostClasses", "attr.title": "this.title", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-controls": "this.ariaControls" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormulaInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormulaInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSpreadsheetFormulaInput]',
@@ -472,13 +490,18 @@ const getSheetActions = (items, item) => {
  * @hidden
  */
 class ErrorHandlingService {
+    spreadsheetService;
+    localization;
+    dialogService;
+    spreadsheet;
+    sheetsChanged = new Subject();
+    activeSheetChanged = new Subject();
+    selectionChanged = new Subject();
+    dialogContainer;
     constructor(spreadsheetService, localization, dialogService) {
         this.spreadsheetService = spreadsheetService;
         this.localization = localization;
         this.dialogService = dialogService;
-        this.sheetsChanged = new Subject();
-        this.activeSheetChanged = new Subject();
-        this.selectionChanged = new Subject();
     }
     set currentActiveSheet(value) {
         this._currentActiveSheet = value;
@@ -489,6 +512,7 @@ class ErrorHandlingService {
     get activeSheet() {
         return this.spreadsheet.activeSheet()?.name();
     }
+    _currentActiveSheet;
     notifySheetsChange(actionType, sheetInfo) {
         const sheets = this.spreadsheet.sheets();
         this.sheetsChanged.next({ sheets, sheet: sheetInfo, actionType });
@@ -534,10 +558,10 @@ class ErrorHandlingService {
     messageFor(text) {
         return this.localization.get(text);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ErrorHandlingService, deps: [{ token: SpreadsheetService }, { token: i2.LocalizationService }, { token: i1$1.DialogService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ErrorHandlingService });
 }
-ErrorHandlingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ErrorHandlingService, deps: [{ token: SpreadsheetService }, { token: i2.LocalizationService }, { token: i1$1.DialogService }], target: i0.ɵɵFactoryTarget.Injectable });
-ErrorHandlingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ErrorHandlingService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ErrorHandlingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ErrorHandlingService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: SpreadsheetService }, { type: i2.LocalizationService }, { type: i1$1.DialogService }]; } });
 
@@ -650,17 +674,18 @@ const commandSVGIcons = {
  * @hidden
  */
 class InsertLinkDialogComponent extends DialogContentBase {
+    dialog;
+    urlLink = '';
+    title;
     constructor(dialog) {
         super(dialog);
         this.dialog = dialog;
-        this.urlLink = '';
     }
     setData(args) {
         this.urlLink = args.link;
     }
-}
-InsertLinkDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InsertLinkDialogComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
-InsertLinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: InsertLinkDialogComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InsertLinkDialogComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InsertLinkDialogComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <form class="k-form k-form-md" method="dialog">
         <div class="k-form-field">
             <kendo-label [for]="textbox" text="URL"></kendo-label>
@@ -670,7 +695,8 @@ InsertLinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
         </div>
     </form>
     `, isInline: true, dependencies: [{ kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InsertLinkDialogComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InsertLinkDialogComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -692,6 +718,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class ActionDialogComponent extends DialogContentBase {
+    dialog;
+    commandName;
+    value;
+    tabindex;
     constructor(dialog) {
         super(dialog);
         this.dialog = dialog;
@@ -701,9 +731,8 @@ class ActionDialogComponent extends DialogContentBase {
         this.tabindex = args.tabindex;
         this.commandName = args.commandName;
     }
-}
-ActionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionDialogComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
-ActionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ActionDialogComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionDialogComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionDialogComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
         <ng-container *ngIf="commandName === 'delete'">
             <p>The deleted sheet data will be lost.</p>
             <p>Are you sure you want to proceed?</p>
@@ -722,7 +751,8 @@ ActionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             </div>
         </form>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ActionDialogComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionDialogComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -753,6 +783,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class SheetsBarComponent {
+    spreadsheetService;
+    element;
+    renderer;
+    localization;
+    dialogService;
+    ngZone;
+    hostClasses = true;
+    sheets;
+    sheetDescriptors;
+    subs = new Subscription();
     constructor(spreadsheetService, element, renderer, localization, dialogService, ngZone) {
         this.spreadsheetService = spreadsheetService;
         this.element = element;
@@ -760,93 +800,33 @@ class SheetsBarComponent {
         this.localization = localization;
         this.dialogService = dialogService;
         this.ngZone = ngZone;
-        this.hostClasses = true;
-        this.subs = new Subscription();
-        this.plusIcon = plusIcon;
-        this.menuIcon = menuIcon;
-        this.caretAltDownIcon = caretAltDownIcon;
-        this.caretAltLeftIcon = caretAltLeftIcon;
-        this.caretAltRightIcon = caretAltRightIcon;
-        this.selected = false;
-        this.sheetsMenuList = [];
-        this.openedDdb = null;
-        this.hiddenStateIcons = {
-            hidden: 'eye-slash',
-            visible: 'eye'
-        };
-        this.hiddenStateSVGIcons = {
-            hidden: eyeSlashIcon,
-            visible: eyeIcon
-        };
-        this.onAddClick = () => {
-            if (this.spreadsheetService.spreadsheet) {
-                this.spreadsheetService.spreadsheet.view.sheetsbar.onAddSelect();
-                this.notifySheetsChange();
-            }
-        };
-        this.actionsCallback = {
-            copy: (sheetInfo) => {
-                let copies = 0;
-                const regex = this.getCopyRegex(sheetInfo.text);
-                this.sheets.forEach(sheet => {
-                    const isPresent = regex.test(sheet.text);
-                    if (isPresent) {
-                        copies += 1;
-                    }
-                });
-                const sheetToCopy = this.spreadsheetService.spreadsheet.sheets().find(s => s.name() === sheetInfo.text);
-                const newName = `${sheetInfo.text} (${copies + 1})`;
-                this.spreadsheetService.spreadsheet.insertSheet({ data: { ...sheetToCopy.toJSON(), name: newName }, index: sheetInfo.index + 1 });
-                this.selectSheet(newName);
-            },
-            move: (sheetInfo, itemKey) => {
-                const isMoveRight = itemKey === 'sheetMoveRight';
-                let oldIndex = -1;
-                let newIndex = -1;
-                const sheets = this.spreadsheetService.spreadsheet.sheets();
-                if (isMoveRight) {
-                    for (let i = 0; i < sheets.length; i++) {
-                        if (sheets[i].name() === sheetInfo.text) {
-                            oldIndex = i;
-                        }
-                        if (oldIndex > -1 && i > oldIndex && sheets[i]._state() === 'visible') {
-                            newIndex = i;
-                            break;
-                        }
-                    }
-                }
-                else {
-                    for (let i = sheets.length - 1; i >= 0; i--) {
-                        if (sheets[i].name() === sheetInfo.text) {
-                            oldIndex = i;
-                        }
-                        if (oldIndex > -1 && (i < oldIndex) && sheets[i]._state() === 'visible') {
-                            newIndex = i;
-                            break;
-                        }
-                    }
-                }
-                const sheetsBar = this.spreadsheetService.spreadsheet.view.sheetsbar;
-                sheetsBar.onSheetReorderEnd({ oldIndex, newIndex });
-                this.selectSheet(sheetInfo.text);
-                this.notifySheetsChange();
-            },
-            hide: (sheet) => {
-                sheet.state = 'hidden';
-                const sheets = this.spreadsheetService.spreadsheet.sheets();
-                const sheetIndex = sheets.findIndex(s => s.name() === sheet.text);
-                sheets[sheetIndex]._state('hidden');
-                const newSelectedIndex = sheetIndex < sheets.length - 1 ? sheetIndex + 1 : 0;
-                const sheetToSelect = sheets[newSelectedIndex].name();
-                this.selectSheet(sheetToSelect);
-                this.notifySheetsChange();
-            }
-        };
         this.subs.add(spreadsheetService.onSheetsBarFocus.subscribe(() => ngZone.run(() => this.tabstrip.selectTab(this.sheets.findIndex(sh => sh.text === spreadsheetService.currentActiveSheet)))));
     }
+    addButton;
+    menuButton;
+    tabstrip;
+    actionDdbs;
+    actionDdbRefs;
     get activeSheet() {
         return this.spreadsheetService.spreadsheet?.activeSheet()?.name();
     }
+    plusIcon = plusIcon;
+    menuIcon = menuIcon;
+    caretAltDownIcon = caretAltDownIcon;
+    caretAltLeftIcon = caretAltLeftIcon;
+    caretAltRightIcon = caretAltRightIcon;
+    selected = false;
+    sheetsMenuList = [];
+    openedDdb = null;
+    tabListSub;
+    hiddenStateIcons = {
+        hidden: 'eye-slash',
+        visible: 'eye'
+    };
+    hiddenStateSVGIcons = {
+        hidden: eyeSlashIcon,
+        visible: eyeIcon
+    };
     get tablistId() {
         return this.spreadsheetService.tablistId;
     }
@@ -882,6 +862,12 @@ class SheetsBarComponent {
         }
         this.subs.unsubscribe();
     }
+    onAddClick = () => {
+        if (this.spreadsheetService.spreadsheet) {
+            this.spreadsheetService.spreadsheet.view.sheetsbar.onAddSelect();
+            this.notifySheetsChange();
+        }
+    };
     onTabSelect(ev) {
         if (ev.title !== this.activeSheet) {
             this.selectSheet(ev.title);
@@ -957,6 +943,64 @@ class SheetsBarComponent {
         const st = `(${newName})\\s?\\(`;
         return new RegExp(st, 's');
     }
+    actionsCallback = {
+        copy: (sheetInfo) => {
+            let copies = 0;
+            const regex = this.getCopyRegex(sheetInfo.text);
+            this.sheets.forEach(sheet => {
+                const isPresent = regex.test(sheet.text);
+                if (isPresent) {
+                    copies += 1;
+                }
+            });
+            const sheetToCopy = this.spreadsheetService.spreadsheet.sheets().find(s => s.name() === sheetInfo.text);
+            const newName = `${sheetInfo.text} (${copies + 1})`;
+            this.spreadsheetService.spreadsheet.insertSheet({ data: { ...sheetToCopy.toJSON(), name: newName }, index: sheetInfo.index + 1 });
+            this.selectSheet(newName);
+        },
+        move: (sheetInfo, itemKey) => {
+            const isMoveRight = itemKey === 'sheetMoveRight';
+            let oldIndex = -1;
+            let newIndex = -1;
+            const sheets = this.spreadsheetService.spreadsheet.sheets();
+            if (isMoveRight) {
+                for (let i = 0; i < sheets.length; i++) {
+                    if (sheets[i].name() === sheetInfo.text) {
+                        oldIndex = i;
+                    }
+                    if (oldIndex > -1 && i > oldIndex && sheets[i]._state() === 'visible') {
+                        newIndex = i;
+                        break;
+                    }
+                }
+            }
+            else {
+                for (let i = sheets.length - 1; i >= 0; i--) {
+                    if (sheets[i].name() === sheetInfo.text) {
+                        oldIndex = i;
+                    }
+                    if (oldIndex > -1 && (i < oldIndex) && sheets[i]._state() === 'visible') {
+                        newIndex = i;
+                        break;
+                    }
+                }
+            }
+            const sheetsBar = this.spreadsheetService.spreadsheet.view.sheetsbar;
+            sheetsBar.onSheetReorderEnd({ oldIndex, newIndex });
+            this.selectSheet(sheetInfo.text);
+            this.notifySheetsChange();
+        },
+        hide: (sheet) => {
+            sheet.state = 'hidden';
+            const sheets = this.spreadsheetService.spreadsheet.sheets();
+            const sheetIndex = sheets.findIndex(s => s.name() === sheet.text);
+            sheets[sheetIndex]._state('hidden');
+            const newSelectedIndex = sheetIndex < sheets.length - 1 ? sheetIndex + 1 : 0;
+            const sheetToSelect = sheets[newSelectedIndex].name();
+            this.selectSheet(sheetToSelect);
+            this.notifySheetsChange();
+        }
+    };
     selectSheet(sheetName) {
         const spreadsheetSheet = this.spreadsheetService.spreadsheet.sheets().find(s => s.name() === sheetName);
         this.spreadsheetService.spreadsheet.activeSheet(spreadsheetSheet);
@@ -965,7 +1009,7 @@ class SheetsBarComponent {
         this.notifySheetsChange();
     }
     onTabListKeyDown(ev) {
-        const buttonEl = ev.target.querySelector('.k-dropdown-button');
+        const buttonEl = ev.target.querySelector('kendo-dropdownbutton');
         const index = Array.from(this.actionDdbRefs).findIndex(el => el.nativeElement === buttonEl);
         const ddb = Array.from(this.actionDdbs)[index];
         if (!ddb) {
@@ -1003,9 +1047,8 @@ class SheetsBarComponent {
         });
         this.ngZone.onStable.pipe(take(1)).subscribe(() => this.spreadsheetService.spreadsheet.view.clipboard.focus());
     }
-}
-SheetsBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SheetsBarComponent, deps: [{ token: SpreadsheetService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SpreadsheetLocalizationService }, { token: i1$1.DialogService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SheetsBarComponent, isStandalone: true, selector: "[kendoSpreadsheetSheetsBar]", inputs: { sheets: "sheets", sheetDescriptors: "sheetDescriptors" }, host: { properties: { "class.k-spreadsheet-sheets-bar": "this.hostClasses" } }, viewQueries: [{ propertyName: "addButton", first: true, predicate: ["addButton"], descendants: true }, { propertyName: "menuButton", first: true, predicate: ["menuButton"], descendants: true }, { propertyName: "tabstrip", first: true, predicate: ["tabstrip"], descendants: true }, { propertyName: "actionDdbs", predicate: ["sheetDdb"], descendants: true }, { propertyName: "actionDdbRefs", predicate: ["sheetDdb"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SheetsBarComponent, deps: [{ token: SpreadsheetService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SpreadsheetLocalizationService }, { token: i1$1.DialogService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SheetsBarComponent, isStandalone: true, selector: "[kendoSpreadsheetSheetsBar]", inputs: { sheets: "sheets", sheetDescriptors: "sheetDescriptors" }, host: { properties: { "class.k-spreadsheet-sheets-bar": "this.hostClasses" } }, viewQueries: [{ propertyName: "addButton", first: true, predicate: ["addButton"], descendants: true }, { propertyName: "menuButton", first: true, predicate: ["menuButton"], descendants: true }, { propertyName: "tabstrip", first: true, predicate: ["tabstrip"], descendants: true }, { propertyName: "actionDdbs", predicate: ["sheetDdb"], descendants: true }, { propertyName: "actionDdbRefs", predicate: ["sheetDdb"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
         <button kendoButton #addButton
             [title]="messageFor('addSheet')"
             type="button"
@@ -1031,7 +1074,7 @@ SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
             [tabPosition]="'bottom'"
             [showContentArea]="false"
             [scrollable]="{prevButtonIcon: 'caret-alt-left', prevSVGButtonIcon: caretAltLeftIcon, nextButtonIcon: 'caret-alt-right', nextSVGButtonIcon: caretAltRightIcon}"
-            class="k-spreadsheet-sheets k-overflow-hidden"
+            class="k-spreadsheet-sheets"
             (tabSelect)="onTabSelect($event)">
             <ng-container *ngFor="let sheet of sheets">
                 <kendo-tabstrip-tab
@@ -1039,25 +1082,30 @@ SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
                     [title]="sheet.text"
                     [selected]="sheet.text === activeSheet">
                     <ng-template kendoTabTemplate>
-                        <span class="k-link">{{sheet.text}}</span>
-                        <kendo-dropdownbutton #sheetDdb
-                            fillMode="flat"
-                            icon="caret-alt-down"
-                            [svgIcon]="caretAltDownIcon"
-                            buttonClass="k-menu-button"
-                            [data]="sheet.sheetActions"
-                            [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
-                            (open)="onOpen(sheetDdb)"
-                            (close)="onClose()"
-                            (click)="$event.stopPropagation()"
-                            (itemClick)="onActionClick($event, sheet)">
-                        </kendo-dropdownbutton>
+                        <span class="k-link">
+                            <span class="k-link-text">{{sheet.text}}</span>
+                        </span>
+                        <span class="k-item-actions">
+                            <kendo-dropdownbutton #sheetDdb
+                                fillMode="flat"
+                                icon="caret-alt-down"
+                                [svgIcon]="caretAltDownIcon"
+                                buttonClass="k-menu-button"
+                                [data]="sheet.sheetActions"
+                                [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
+                                (open)="onOpen(sheetDdb)"
+                                (close)="onClose()"
+                                (click)="$event.stopPropagation()"
+                                (itemClick)="onActionClick($event, sheet)">
+                            </kendo-dropdownbutton>
+                        </span>
                     </ng-template>
                 </kendo-tabstrip-tab>
             </ng-container>
         </kendo-tabstrip>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTemplateDirective, selector: "[kendoTabTemplate]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SheetsBarComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTemplateDirective, selector: "[kendoTabTemplate]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SheetsBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoSpreadsheetSheetsBar]',
@@ -1087,7 +1135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [tabPosition]="'bottom'"
             [showContentArea]="false"
             [scrollable]="{prevButtonIcon: 'caret-alt-left', prevSVGButtonIcon: caretAltLeftIcon, nextButtonIcon: 'caret-alt-right', nextSVGButtonIcon: caretAltRightIcon}"
-            class="k-spreadsheet-sheets k-overflow-hidden"
+            class="k-spreadsheet-sheets"
             (tabSelect)="onTabSelect($event)">
             <ng-container *ngFor="let sheet of sheets">
                 <kendo-tabstrip-tab
@@ -1095,19 +1143,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     [title]="sheet.text"
                     [selected]="sheet.text === activeSheet">
                     <ng-template kendoTabTemplate>
-                        <span class="k-link">{{sheet.text}}</span>
-                        <kendo-dropdownbutton #sheetDdb
-                            fillMode="flat"
-                            icon="caret-alt-down"
-                            [svgIcon]="caretAltDownIcon"
-                            buttonClass="k-menu-button"
-                            [data]="sheet.sheetActions"
-                            [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
-                            (open)="onOpen(sheetDdb)"
-                            (close)="onClose()"
-                            (click)="$event.stopPropagation()"
-                            (itemClick)="onActionClick($event, sheet)">
-                        </kendo-dropdownbutton>
+                        <span class="k-link">
+                            <span class="k-link-text">{{sheet.text}}</span>
+                        </span>
+                        <span class="k-item-actions">
+                            <kendo-dropdownbutton #sheetDdb
+                                fillMode="flat"
+                                icon="caret-alt-down"
+                                [svgIcon]="caretAltDownIcon"
+                                buttonClass="k-menu-button"
+                                [data]="sheet.sheetActions"
+                                [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
+                                (open)="onOpen(sheetDdb)"
+                                (close)="onClose()"
+                                (click)="$event.stopPropagation()"
+                                (itemClick)="onActionClick($event, sheet)">
+                            </kendo-dropdownbutton>
+                        </span>
                     </ng-template>
                 </kendo-tabstrip-tab>
             </ng-container>
@@ -1144,14 +1196,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class NameBoxComponent {
-    constructor(ngZone, host, localization, renderer) {
-        this.ngZone = ngZone;
-        this.host = host;
-        this.localization = localization;
-        this.renderer = renderer;
-        this.hostClass = true;
-        this.valueNormalizer = (text) => text.pipe(map((content) => ({ name: content })));
-    }
+    ngZone;
+    host;
+    localization;
+    renderer;
+    hostClass = true;
     keyDownHandler() {
         const editor = this.spreadsheetWidget.view.nameEditor;
         if (editor) {
@@ -1159,10 +1208,20 @@ class NameBoxComponent {
             editor.trigger('enter', { value: name });
         }
     }
+    combobox;
+    data;
+    spreadsheetWidget;
+    constructor(ngZone, host, localization, renderer) {
+        this.ngZone = ngZone;
+        this.host = host;
+        this.localization = localization;
+        this.renderer = renderer;
+    }
     ngAfterViewInit() {
         this.renderer.setAttribute(this.inputElement, 'title', this.title);
         this.renderer.setAttribute(this.inputElement, 'aria-label', this.title);
     }
+    value;
     get inputElement() {
         return this.host.nativeElement.querySelector('.k-input-inner');
     }
@@ -1200,9 +1259,9 @@ class NameBoxComponent {
             this.data = editor.readData();
         }
     }
-}
-NameBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NameBoxComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: SpreadsheetLocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-NameBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NameBoxComponent, isStandalone: true, selector: "[kendoSpreadsheetNameBox]", inputs: { data: "data", spreadsheetWidget: "spreadsheetWidget" }, host: { listeners: { "keydown.enter": "keyDownHandler()" }, properties: { "class.k-spreadsheet-name-editor": "this.hostClass" } }, viewQueries: [{ propertyName: "combobox", first: true, predicate: ["combobox"], descendants: true }], ngImport: i0, template: `
+    valueNormalizer = (text) => text.pipe(map((content) => ({ name: content })));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NameBoxComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: SpreadsheetLocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NameBoxComponent, isStandalone: true, selector: "[kendoSpreadsheetNameBox]", inputs: { data: "data", spreadsheetWidget: "spreadsheetWidget" }, host: { listeners: { "keydown.enter": "keyDownHandler()" }, properties: { "class.k-spreadsheet-name-editor": "this.hostClass" } }, viewQueries: [{ propertyName: "combobox", first: true, predicate: ["combobox"], descendants: true }], ngImport: i0, template: `
         <kendo-combobox #combobox
             [popupSettings]="{popupClass: 'k-spreadsheet-names-popup'}"
             fillMode="flat"
@@ -1218,7 +1277,8 @@ NameBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
             [attr.title]="title"
         ></kendo-combobox>
     `, isInline: true, dependencies: [{ kind: "component", type: ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NameBoxComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NameBoxComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoSpreadsheetNameBox]',
@@ -1325,13 +1385,18 @@ const MY_TOKEN = new InjectionToken('COMMAND_TOKEN');
  * @hidden
  */
 class SpreadsheetCommandBaseDirective {
+    command;
+    button;
+    localization;
+    spreadsheetService;
+    toolsService;
+    subs = new Subscription();
     constructor(command, button, localization, spreadsheetService, toolsService) {
         this.command = command;
         this.button = button;
         this.localization = localization;
         this.spreadsheetService = spreadsheetService;
         this.toolsService = toolsService;
-        this.subs = new Subscription();
         const text = this.localization.get(this.command);
         if (text) {
             this.button.showText = 'overflow';
@@ -1359,10 +1424,10 @@ class SpreadsheetCommandBaseDirective {
     }
     clickHandler() { }
     pointerdownHandler(_event) { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetCommandBaseDirective, deps: [{ token: MY_TOKEN }, { token: i1$2.ToolBarButtonComponent }, { token: i2.LocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetCommandBaseDirective, selector: "[kendoSpreadsheetCommandBase]", ngImport: i0 });
 }
-SpreadsheetCommandBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetCommandBaseDirective, deps: [{ token: MY_TOKEN }, { token: i1$2.ToolBarButtonComponent }, { token: i2.LocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetCommandBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetCommandBaseDirective, selector: "[kendoSpreadsheetCommandBase]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetCommandBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetCommandBaseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSpreadsheetCommandBase]'
@@ -1376,6 +1441,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class SpreadsheetCommandButton extends SpreadsheetCommandBaseDirective {
+    command;
+    button;
+    localization;
+    spreadsheetService;
+    toolsService;
+    commandOptions;
     constructor(command, button, localization, spreadsheetService, toolsService, commandOptions) {
         super(command, button, localization, spreadsheetService, toolsService);
         this.command = command;
@@ -1415,10 +1486,10 @@ class SpreadsheetGridLinesDirective extends SpreadsheetCommandButton {
             this.spreadsheetService.spreadsheet.executeCommand(options);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetGridLinesDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetGridLinesDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]", usesInheritance: true, ngImport: i0 });
 }
-SpreadsheetGridLinesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetGridLinesDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetGridLinesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetGridLinesDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetGridLinesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetGridLinesDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoSpreadsheetGridLines]',
@@ -1430,11 +1501,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class SpreadsheetMergeDirective {
+    host;
+    spreadsheetService;
+    commandName = 'merge';
+    subs = new Subscription();
+    selectedRange;
     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;
@@ -1470,10 +1544,10 @@ class SpreadsheetMergeDirective {
         const range = sheet._ref(this.selectedRange);
         return sheet._getMergedCells(range).hasMerged;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetMergeDirective, deps: [{ token: i1$2.ToolBarDropDownButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetMergeDirective, isStandalone: true, selector: "[kendoSpreadsheetMerge]", ngImport: i0 });
 }
-SpreadsheetMergeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetMergeDirective, deps: [{ token: i1$2.ToolBarDropDownButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetMergeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetMergeDirective, isStandalone: true, selector: "[kendoSpreadsheetMerge]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetMergeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetMergeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSpreadsheetMerge]',
@@ -1497,10 +1571,10 @@ class SpreadsheetIncreaseDecimalDirective extends SpreadsheetCommandButton {
         };
         this.spreadsheetService.spreadsheet.executeCommand(options);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetIncreaseDecimalDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetIncreaseDecimalDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseDecimal]", usesInheritance: true, ngImport: i0 });
 }
-SpreadsheetIncreaseDecimalDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetIncreaseDecimalDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetIncreaseDecimalDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetIncreaseDecimalDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseDecimal]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetIncreaseDecimalDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetIncreaseDecimalDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoSpreadsheetIncreaseDecimal]',
@@ -1524,10 +1598,10 @@ class SpreadsheetDecreaseDecimalDirective extends SpreadsheetCommandButton {
         };
         this.spreadsheetService.spreadsheet.executeCommand(options);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetDecreaseDecimalDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetDecreaseDecimalDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseDecimal]", usesInheritance: true, ngImport: i0 });
 }
-SpreadsheetDecreaseDecimalDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDecreaseDecimalDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetDecreaseDecimalDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetDecreaseDecimalDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseDecimal]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDecreaseDecimalDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetDecreaseDecimalDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoSpreadsheetDecreaseDecimal]',
@@ -1545,10 +1619,10 @@ class SpreadsheetDeleteRowButtonDirective extends SpreadsheetCommandButton {
             options: { property: 'deleteRow' }
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetDeleteRowButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetDeleteRowButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]", usesInheritance: true, ngImport: i0 });
 }
-SpreadsheetDeleteRowButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDeleteRowButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetDeleteRowButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetDeleteRowButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDeleteRowButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetDeleteRowButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]',
@@ -1566,10 +1640,10 @@ class SpreadsheetDeleteColumnButtonDirective extends SpreadsheetCommandButton {
             options: { property: 'deleteColumn' }
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetDeleteColumnButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetDeleteColumnButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]", usesInheritance: true, ngImport: i0 });
 }
-SpreadsheetDeleteColumnButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDeleteColumnButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetDeleteColumnButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetDeleteColumnButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDeleteColumnButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetDeleteColumnButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]',
@@ -1589,10 +1663,10 @@ class SpreadsheetAddRowAboveButtonDirective extends SpreadsheetCommandButton {
             }
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetAddRowAboveButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetAddRowAboveButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]", usesInheritance: true, ngImport: i0 });
 }
-SpreadsheetAddRowAboveButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddRowAboveButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetAddRowAboveButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetAddRowAboveButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddRowAboveButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetAddRowAboveButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]',
@@ -1612,10 +1686,10 @@ class SpreadsheetAddRowBelowButtonDirective extends SpreadsheetCommandButton {
             }
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetAddRowBelowButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetAddRowBelowButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]", usesInheritance: true, ngImport: i0 });
 }
-SpreadsheetAddRowBelowButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddRowBelowButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetAddRowBelowButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetAddRowBelowButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddRowBelowButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetAddRowBelowButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]',
@@ -1635,10 +1709,10 @@ class SpreadsheetAddColumnRightButtonDirective extends SpreadsheetCommandButton
             }
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetAddColumnRightButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetAddColumnRightButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]", usesInheritance: true, ngImport: i0 });
 }
-SpreadsheetAddColumnRightButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddColumnRightButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetAddColumnRightButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetAddColumnRightButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddColumnRightButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetAddColumnRightButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]',
@@ -1658,10 +1732,10 @@ class SpreadsheetAddColumnLeftButtonDirective extends SpreadsheetCommandButton {
             }
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetAddColumnLeftButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetAddColumnLeftButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]", usesInheritance: true, ngImport: i0 });
 }
-SpreadsheetAddColumnLeftButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddColumnLeftButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetAddColumnLeftButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetAddColumnLeftButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetAddColumnLeftButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetAddColumnLeftButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]',
@@ -1673,6 +1747,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class SpreadsheetInsertLinkDirective extends SpreadsheetCommandButton {
+    dialogService;
+    currentRange;
     constructor(button, localization, spreadsheetService, toolsService, dialogService) {
         super('insertLink', button, localization, spreadsheetService, toolsService, {
             command: 'HyperlinkCommand'
@@ -1734,10 +1810,10 @@ class SpreadsheetInsertLinkDirective extends SpreadsheetCommandButton {
             });
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetInsertLinkDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: i1$1.DialogService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetInsertLinkDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetInsertLink]", usesInheritance: true, ngImport: i0 });
 }
-SpreadsheetInsertLinkDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetInsertLinkDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: i1$1.DialogService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetInsertLinkDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetInsertLinkDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetInsertLink]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetInsertLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetInsertLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoSpreadsheetInsertLink]',
@@ -1749,23 +1825,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class SpreadsheetFormatDirective {
+    host;
+    spreadsheetService;
+    toolsService;
+    data = FORMATS;
+    commandName = 'format';
+    subs = new Subscription();
     constructor(host, localization, spreadsheetService, toolsService) {
         this.host = host;
         this.spreadsheetService = spreadsheetService;
         this.toolsService = toolsService;
-        this.data = FORMATS;
-        this.commandName = 'format';
-        this.subs = new Subscription();
-        /**
-         * @hidden
-         */
-        this.onItemClick = (item) => {
-            const value = item.value || null;
-            const options = {
-                command: 'PropertyChangeCommand', options: { property: this.commandName, value }
-            };
-            this.spreadsheetService.spreadsheet.executeCommand(options);
-        };
         host.svgIcon = commandSVGIcons[this.commandName];
         host.icon = commandIcons[this.commandName];
         host.arrowIcon = true;
@@ -1780,10 +1849,20 @@ class SpreadsheetFormatDirective {
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
+    /**
+     * @hidden
+     */
+    onItemClick = (item) => {
+        const value = item.value || null;
+        const options = {
+            command: 'PropertyChangeCommand', options: { property: this.commandName, value }
+        };
+        this.spreadsheetService.spreadsheet.executeCommand(options);
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetFormatDirective, deps: [{ token: i1$2.ToolBarDropDownButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetFormatDirective, isStandalone: true, selector: "[kendoSpreadsheetFormat]", ngImport: i0 });
 }
-SpreadsheetFormatDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetFormatDirective, deps: [{ token: i1$2.ToolBarDropDownButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetFormatDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetFormatDirective, isStandalone: true, selector: "[kendoSpreadsheetFormat]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetFormatDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetFormatDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSpreadsheetFormat]',
@@ -1814,10 +1893,10 @@ class SpreadsheetTextWrapDirective extends SpreadsheetCommandButton {
             this.spreadsheetService.spreadsheet.executeCommand(options);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetTextWrapDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetTextWrapDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]", usesInheritance: true, ngImport: i0 });
 }
-SpreadsheetTextWrapDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetTextWrapDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetTextWrapDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetTextWrapDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetTextWrapDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetTextWrapDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoSpreadsheetTextWrap]',
@@ -1829,12 +1908,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class SpreadsheetVerticalTextAlignDirective {
+    host;
+    spreadsheetService;
+    toolsService;
+    commandName = 'alignVertical';
+    subs = new Subscription();
     constructor(host, localization, spreadsheetService, toolsService) {
         this.host = host;
         this.spreadsheetService = spreadsheetService;
         this.toolsService = toolsService;
-        this.commandName = 'alignVertical';
-        this.subs = new Subscription();
         host.svgIcon = commandSVGIcons[this.commandName];
         host.icon = commandIcons[this.commandName];
         host.arrowIcon = true;
@@ -1857,10 +1939,10 @@ class SpreadsheetVerticalTextAlignDirective {
         };
         this.spreadsheetService.spreadsheet.executeCommand(options);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetVerticalTextAlignDirective, deps: [{ token: i1$2.ToolBarDropDownButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetVerticalTextAlignDirective, isStandalone: true, selector: "[kendoSpreadsheetVerticalTextAlign]", ngImport: i0 });
 }
-SpreadsheetVerticalTextAlignDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetVerticalTextAlignDirective, deps: [{ token: i1$2.ToolBarDropDownButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetVerticalTextAlignDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetVerticalTextAlignDirective, isStandalone: true, selector: "[kendoSpreadsheetVerticalTextAlign]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetVerticalTextAlignDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetVerticalTextAlignDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSpreadsheetVerticalTextAlign]',
@@ -1872,12 +1954,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class SpreadsheetHorizontalTextAlignDirective {
+    host;
+    spreadsheetService;
+    toolsService;
+    commandName = 'alignHorizontal';
+    subs = new Subscription();
     constructor(host, localization, spreadsheetService, toolsService) {
         this.host = host;
         this.spreadsheetService = spreadsheetService;
         this.toolsService = toolsService;
-        this.commandName = 'alignHorizontal';
-        this.subs = new Subscription();
         host.svgIcon = commandSVGIcons[this.commandName];
         host.icon = commandIcons[this.commandName];
         host.arrowIcon = true;
@@ -1900,10 +1985,10 @@ class SpreadsheetHorizontalTextAlignDirective {
         };
         this.spreadsheetService.spreadsheet.executeCommand(options);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetHorizontalTextAlignDirective, deps: [{ token: i1$2.ToolBarDropDownButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetHorizontalTextAlignDirective, isStandalone: true, selector: "[kendoSpreadsheetHorizontalTextAlign]", ngImport: i0 });
 }
-SpreadsheetHorizontalTextAlignDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetHorizontalTextAlignDirective, deps: [{ token: i1$2.ToolBarDropDownButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetHorizontalTextAlignDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetHorizontalTextAlignDirective, isStandalone: true, selector: "[kendoSpreadsheetHorizontalTextAlign]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetHorizontalTextAlignDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetHorizontalTextAlignDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSpreadsheetHorizontalTextAlign]',
@@ -1925,21 +2010,25 @@ function outerWidth(element) {
  * @hidden
  */
 class DropDownListBase {
-    constructor() {
-        this.display = 'inline-flex';
-        this.fillMode = 'flat';
-        this.valueChange = new EventEmitter();
-    }
+    display = 'inline-flex';
+    data;
+    value;
+    title;
+    tabindex;
+    fillMode = 'flat';
+    valueChange = new EventEmitter();
+    element;
+    dropDownList;
     onValueChange(value) {
         this.valueChange.emit(value);
     }
     focus() {
         this.dropDownList.focus();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownListBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DropDownListBase, selector: "kendo-spreadsheet-dropdownlist-base", inputs: { data: "data", value: "value", title: "title", tabindex: "tabindex" }, outputs: { valueChange: "valueChange" }, host: { properties: { "style.display": "this.display" } }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }, { propertyName: "dropDownList", first: true, predicate: ["element"], descendants: true, read: DropDownListComponent, static: true }], ngImport: i0 });
 }
-DropDownListBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownListBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-DropDownListBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DropDownListBase, selector: "kendo-spreadsheet-dropdownlist-base", inputs: { data: "data", value: "value", title: "title", tabindex: "tabindex" }, outputs: { valueChange: "valueChange" }, host: { properties: { "style.display": "this.display" } }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }, { propertyName: "dropDownList", first: true, predicate: ["element"], descendants: true, read: DropDownListComponent, static: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownListBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownListBase, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-spreadsheet-dropdownlist-base'
@@ -1969,11 +2058,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class FontSizeDropDownListComponent extends DropDownListBase {
-}
-FontSizeDropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FontSizeDropDownListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FontSizeDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FontSizeDropDownListComponent, isStandalone: true, selector: "kendo-spreadsheet-fontsize-dropdownlist", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FontSizeDropDownListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FontSizeDropDownListComponent, isStandalone: true, selector: "kendo-spreadsheet-fontsize-dropdownlist", usesInheritance: true, ngImport: i0, template: `
         <kendo-dropdownlist
             #element
+            class="k-toolbar-dropdownlist"
             [data]="data"
             [(value)]="value"
             [attr.title]="title"
@@ -1982,13 +2071,15 @@ FontSizeDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             [leftRightArrowsNavigation]="false"
             [fillMode]="fillMode"></kendo-dropdownlist>
     `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FontSizeDropDownListComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FontSizeDropDownListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-spreadsheet-fontsize-dropdownlist',
                     template: `
         <kendo-dropdownlist
             #element
+            class="k-toolbar-dropdownlist"
             [data]="data"
             [(value)]="value"
             [attr.title]="title"
@@ -2006,11 +2097,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class FontFamilyDropDownListComponent extends DropDownListBase {
-}
-FontFamilyDropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FontFamilyDropDownListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FontFamilyDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FontFamilyDropDownListComponent, isStandalone: true, selector: "kendo-spreadsheet-fontfamily-dropdownlist", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FontFamilyDropDownListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FontFamilyDropDownListComponent, isStandalone: true, selector: "kendo-spreadsheet-fontfamily-dropdownlist", usesInheritance: true, ngImport: i0, template: `
         <kendo-dropdownlist
             #element
+            class="k-toolbar-dropdownlist"
             [data]="data"
             [(value)]="value"
             [tabindex]="tabindex"
@@ -2025,13 +2116,15 @@ FontFamilyDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
             </ng-template>
         </kendo-dropdownlist>
     `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FontFamilyDropDownListComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FontFamilyDropDownListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-spreadsheet-fontfamily-dropdownlist',
                     template: `
         <kendo-dropdownlist
             #element
+            class="k-toolbar-dropdownlist"
             [data]="data"
             [(value)]="value"
             [tabindex]="tabindex"
@@ -2055,10 +2148,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class DialogContentComponent extends DialogContentBase {
+    dialog;
+    data = [];
+    value;
+    tabindex;
+    componentType;
+    title;
     constructor(dialog) {
         super(dialog);
         this.dialog = dialog;
-        this.data = [];
     }
     setData(args) {
         this.data = args.data;
@@ -2066,9 +2164,8 @@ class DialogContentComponent extends DialogContentBase {
         this.tabindex = args.tabindex;
         this.componentType = args.componentType;
     }
-}
-DialogContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogContentComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
-DialogContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialogContentComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogContentComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogContentComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
         <div 
             [ngSwitch]="componentType"
             class="k-d-flex k-align-items-center k-justify-content-center">
@@ -2108,7 +2205,8 @@ DialogContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             ></kendo-colorpicker>
         </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: FontFamilyDropDownListComponent, selector: "kendo-spreadsheet-fontfamily-dropdownlist" }, { kind: "component", type: FontSizeDropDownListComponent, selector: "kendo-spreadsheet-fontsize-dropdownlist" }, { kind: "component", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogContentComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogContentComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -2160,6 +2258,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class SpreadsheetDropDownToolBase extends ToolBarToolComponent {
+    command;
+    dialogService;
+    localization;
+    spreadsheetService;
+    toolsService;
+    toolbar;
+    element;
+    dropDownListRef;
+    popupButton;
+    data;
     constructor(command, dialogService, localization, spreadsheetService, toolsService, toolbar) {
         super();
         this.command = command;
@@ -2168,17 +2276,20 @@ class SpreadsheetDropDownToolBase extends ToolBarToolComponent {
         this.spreadsheetService = spreadsheetService;
         this.toolsService = toolsService;
         this.toolbar = toolbar;
-        /**
-         * Fires when the user updates the value of the drop-down list.
-         */
-        this.valueChange = new EventEmitter();
-        this.tabindex = -1;
-        this.svgIcon = commandSVGIcons[this.command];
-        this.icon = commandIcons[this.command];
         this.value = DEFAULT_FONT_VALUES[this.command];
         this.data = FONT_DATA[this.command];
         this.isBuiltInTool = true;
     }
+    /**
+     * Fires when the user updates the value of the drop-down list.
+     */
+    valueChange = new EventEmitter();
+    value;
+    tabindex = -1;
+    itemDisabled;
+    svgIcon = commandSVGIcons[this.command];
+    icon = commandIcons[this.command];
+    subs;
     ngOnInit() {
         this.value = this.toolsService.toolsState[this.command];
         this.subs = this.toolsService.stateChange.subscribe(state => {
@@ -2290,10 +2401,10 @@ class SpreadsheetDropDownToolBase extends ToolBarToolComponent {
         this.tabindex = -1;
         return false;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetDropDownToolBase, deps: [{ token: MY_TOKEN }, { token: i1$1.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: i1$2.ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetDropDownToolBase, selector: "ng-component", outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, read: ElementRef }, { propertyName: "dropDownListRef", first: true, predicate: ["element"], descendants: true }, { propertyName: "popupButton", first: true, predicate: ["popupButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-SpreadsheetDropDownToolBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDropDownToolBase, deps: [{ token: MY_TOKEN }, { token: i1$1.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: i1$2.ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-SpreadsheetDropDownToolBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetDropDownToolBase, selector: "ng-component", outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "element", first: true, predicate: ["element"], descendants: true, read: ElementRef }, { propertyName: "dropDownListRef", first: true, predicate: ["element"], descendants: true }, { propertyName: "popupButton", first: true, predicate: ["popupButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDropDownToolBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetDropDownToolBase, decorators: [{
             type: Component,
             args: [{
                     template: ``
@@ -2301,13 +2412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MY_TOKEN]
-                }] }, { type: i1$1.DialogService }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: i1$2.ToolBarComponent }]; }, propDecorators: { toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
-            }], element: [{
+                }] }, { type: i1$1.DialogService }, { type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: SpreadsheetToolsService }, { type: i1$2.ToolBarComponent }]; }, propDecorators: { element: [{
                 type: ViewChild,
                 args: ['element', { read: ElementRef }]
             }], dropDownListRef: [{
@@ -2328,22 +2433,23 @@ class SpreadsheetBackColorComponent extends SpreadsheetDropDownToolBase {
     constructor(dialogService, localization, spreadsheetService, toolsService, toolbar) {
         super('background', dialogService, localization, spreadsheetService, toolsService, toolbar);
     }
-}
-SpreadsheetBackColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetBackColorComponent, deps: [{ token: i1$1.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-SpreadsheetBackColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetBackColorComponent, isStandalone: true, selector: "kendo-spreadsheet-backcolor-tool", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetBackColorComponent) }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetBackColorComponent, deps: [{ token: i1$1.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetBackColorComponent, isStandalone: true, selector: "kendo-spreadsheet-backcolor-tool", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetBackColorComponent) }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
-            <kendo-colorpicker
-                #element
-                [attr.title]="messageFor(command)"
-                [format]="'hex'"
-                [(value)]="value"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"
-                [clearButton]="false"
-                fillMode="flat"
-                [icon]="icon"
-                [preview]="true"
-                [svgIcon]="svgIcon"></kendo-colorpicker>
+            <div class="k-toolbar-item">
+                <kendo-colorpicker
+                    #element
+                    [attr.title]="messageFor(command)"
+                    [format]="'hex'"
+                    [(value)]="value"
+                    [tabindex]="tabindex"
+                    (valueChange)="onValueChange($event)"
+                    [clearButton]="false"
+                    fillMode="flat"
+                    [icon]="icon"
+                    [preview]="true"
+                    [svgIcon]="svgIcon"></kendo-colorpicker>
+            </div>
         </ng-template>
         <ng-template #popupTemplate>
             <div #popupButton
@@ -2359,25 +2465,28 @@ SpreadsheetBackColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             </div>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetBackColorComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetBackColorComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetBackColorComponent) }],
                     selector: 'kendo-spreadsheet-backcolor-tool',
                     template: `
         <ng-template #toolbarTemplate>
-            <kendo-colorpicker
-                #element
-                [attr.title]="messageFor(command)"
-                [format]="'hex'"
-                [(value)]="value"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"
-                [clearButton]="false"
-                fillMode="flat"
-                [icon]="icon"
-                [preview]="true"
-                [svgIcon]="svgIcon"></kendo-colorpicker>
+            <div class="k-toolbar-item">
+                <kendo-colorpicker
+                    #element
+                    [attr.title]="messageFor(command)"
+                    [format]="'hex'"
+                    [(value)]="value"
+                    [tabindex]="tabindex"
+                    (valueChange)="onValueChange($event)"
+                    [clearButton]="false"
+                    fillMode="flat"
+                    [icon]="icon"
+                    [preview]="true"
+                    [svgIcon]="svgIcon"></kendo-colorpicker>
+            </div>
         </ng-template>
         <ng-template #popupTemplate>
             <div #popupButton
@@ -2409,22 +2518,23 @@ class SpreadsheetForeColorComponent extends SpreadsheetDropDownToolBase {
     constructor(dialogService, localization, spreadsheetService, toolsService, toolbar) {
         super('color', dialogService, localization, spreadsheetService, toolsService, toolbar);
     }
-}
-SpreadsheetForeColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetForeColorComponent, deps: [{ token: i1$1.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-SpreadsheetForeColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetForeColorComponent, isStandalone: true, selector: "kendo-spreadsheet-forecolor-tool", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetForeColorComponent) }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetForeColorComponent, deps: [{ token: i1$1.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetForeColorComponent, isStandalone: true, selector: "kendo-spreadsheet-forecolor-tool", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetForeColorComponent) }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
-            <kendo-colorpicker
-                #element
-                [attr.title]="messageFor(command)"
-                [format]="'hex'"
-                [(value)]="value"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"
-                [clearButton]="false"
-                fillMode="flat"
-                [icon]="icon"
-                [svgIcon]="svgIcon"
-                [preview]="true"></kendo-colorpicker>
+            <div class="k-toolbar-item">
+                <kendo-colorpicker
+                    #element
+                    [attr.title]="messageFor(command)"
+                    [format]="'hex'"
+                    [(value)]="value"
+                    [tabindex]="tabindex"
+                    (valueChange)="onValueChange($event)"
+                    [clearButton]="false"
+                    fillMode="flat"
+                    [icon]="icon"
+                    [svgIcon]="svgIcon"
+                    [preview]="true"></kendo-colorpicker>
+            </div>
         </ng-template>
         <ng-template #popupTemplate>
             <div #popupButton
@@ -2440,25 +2550,28 @@ SpreadsheetForeColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             </div>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetForeColorComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetForeColorComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetForeColorComponent) }],
                     selector: 'kendo-spreadsheet-forecolor-tool',
                     template: `
         <ng-template #toolbarTemplate>
-            <kendo-colorpicker
-                #element
-                [attr.title]="messageFor(command)"
-                [format]="'hex'"
-                [(value)]="value"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"
-                [clearButton]="false"
-                fillMode="flat"
-                [icon]="icon"
-                [svgIcon]="svgIcon"
-                [preview]="true"></kendo-colorpicker>
+            <div class="k-toolbar-item">
+                <kendo-colorpicker
+                    #element
+                    [attr.title]="messageFor(command)"
+                    [format]="'hex'"
+                    [(value)]="value"
+                    [tabindex]="tabindex"
+                    (valueChange)="onValueChange($event)"
+                    [clearButton]="false"
+                    fillMode="flat"
+                    [icon]="icon"
+                    [svgIcon]="svgIcon"
+                    [preview]="true"></kendo-colorpicker>
+            </div>
         </ng-template>
         <ng-template #popupTemplate>
             <div #popupButton
@@ -2494,10 +2607,10 @@ class SpreadsheetUnderlineDirective extends SpreadsheetCommandButton {
             }
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetUnderlineDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetUnderlineDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]", usesInheritance: true, ngImport: i0 });
 }
-SpreadsheetUnderlineDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetUnderlineDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetUnderlineDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetUnderlineDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetUnderlineDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetUnderlineDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoSpreadsheetUnderline]',
@@ -2517,10 +2630,10 @@ class SpreadsheetItalicDirective extends SpreadsheetCommandButton {
             }
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetItalicDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetItalicDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]", usesInheritance: true, ngImport: i0 });
 }
-SpreadsheetItalicDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetItalicDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetItalicDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetItalicDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetItalicDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetItalicDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoSpreadsheetItalic]',
@@ -2540,10 +2653,10 @@ class SpreadsheetBoldDirective extends SpreadsheetCommandButton {
             }
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetBoldDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetBoldDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetBold]", usesInheritance: true, ngImport: i0 });
 }
-SpreadsheetBoldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetBoldDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetBoldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetBoldDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetBold]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetBoldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetBoldDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoSpreadsheetBold]',
@@ -2555,6 +2668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class SpreadsheetDecreaseFontSizeDirective extends SpreadsheetCommandButton {
+    value;
     constructor(button, localization, spreadsheetService, toolsService) {
         super('decreaseFontSize', button, localization, spreadsheetService, toolsService, {
             command: 'PropertyChangeCommand',
@@ -2576,10 +2690,10 @@ class SpreadsheetDecreaseFontSizeDirective extends SpreadsheetCommandButton {
             this.value = state['fontSize'];
         }));
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetDecreaseFontSizeDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetDecreaseFontSizeDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseFontSize]", usesInheritance: true, ngImport: i0 });
 }
-SpreadsheetDecreaseFontSizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDecreaseFontSizeDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetDecreaseFontSizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetDecreaseFontSizeDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseFontSize]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetDecreaseFontSizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetDecreaseFontSizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoSpreadsheetDecreaseFontSize]',
@@ -2591,6 +2705,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class SpreadsheetIncreaseFontSizeDirective extends SpreadsheetCommandButton {
+    value;
     constructor(button, localization, spreadsheetService, toolsService) {
         super('increaseFontSize', button, localization, spreadsheetService, toolsService, {
             command: 'PropertyChangeCommand',
@@ -2612,10 +2727,10 @@ class SpreadsheetIncreaseFontSizeDirective extends SpreadsheetCommandButton {
             this.value = state['fontSize'];
         }));
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetIncreaseFontSizeDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetIncreaseFontSizeDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseFontSize]", usesInheritance: true, ngImport: i0 });
 }
-SpreadsheetIncreaseFontSizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetIncreaseFontSizeDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetIncreaseFontSizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetIncreaseFontSizeDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseFontSize]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetIncreaseFontSizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetIncreaseFontSizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoSpreadsheetIncreaseFontSize]',
@@ -2635,9 +2750,8 @@ class SpreadsheetFontSizeComponent extends SpreadsheetDropDownToolBase {
     constructor(dialogService, localization, spreadsheetService, toolsService, toolbar) {
         super('fontSize', dialogService, localization, spreadsheetService, toolsService, toolbar);
     }
-}
-SpreadsheetFontSizeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetFontSizeComponent, deps: [{ token: i1$1.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-SpreadsheetFontSizeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetFontSizeComponent, isStandalone: true, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetFontSizeComponent) }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetFontSizeComponent, deps: [{ token: i1$1.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetFontSizeComponent, isStandalone: true, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetFontSizeComponent) }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-spreadsheet-fontsize-dropdownlist
                 #element
@@ -2661,7 +2775,8 @@ SpreadsheetFontSizeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
             </div>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: FontSizeDropDownListComponent, selector: "kendo-spreadsheet-fontsize-dropdownlist" }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetFontSizeComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetFontSizeComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetFontSizeComponent) }],
@@ -2710,9 +2825,8 @@ class SpreadsheetFontFamilyComponent extends SpreadsheetDropDownToolBase {
     constructor(dialogService, localization, spreadsheetService, toolsService, toolbar) {
         super('fontFamily', dialogService, localization, spreadsheetService, toolsService, toolbar);
     }
-}
-SpreadsheetFontFamilyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetFontFamilyComponent, deps: [{ token: i1$1.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-SpreadsheetFontFamilyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetFontFamilyComponent, isStandalone: true, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetFontFamilyComponent) }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetFontFamilyComponent, deps: [{ token: i1$1.DialogService }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetFontFamilyComponent, isStandalone: true, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetFontFamilyComponent) }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-spreadsheet-fontfamily-dropdownlist
                 #element
@@ -2736,7 +2850,8 @@ SpreadsheetFontFamilyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             </div>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: FontFamilyDropDownListComponent, selector: "kendo-spreadsheet-fontfamily-dropdownlist" }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetFontFamilyComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetFontFamilyComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetFontFamilyComponent) }],
@@ -2785,10 +2900,10 @@ class SpreadsheetRedoDirective extends SpreadsheetCommandButton {
     clickHandler() {
         this.spreadsheetService.spreadsheet.workbook.undoRedoStack['redo']();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetRedoDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetRedoDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]", usesInheritance: true, ngImport: i0 });
 }
-SpreadsheetRedoDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetRedoDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetRedoDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetRedoDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetRedoDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetRedoDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoSpreadsheetRedo]',
@@ -2808,10 +2923,10 @@ class SpreadsheetUndoDirective extends SpreadsheetCommandButton {
     clickHandler() {
         this.spreadsheetService.spreadsheet.workbook.undoRedoStack['undo']();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetUndoDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetUndoDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]", usesInheritance: true, ngImport: i0 });
 }
-SpreadsheetUndoDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetUndoDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetUndoDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetUndoDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetUndoDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetUndoDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoSpreadsheetUndo]',
@@ -2823,11 +2938,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class SpreadsheetSaveFileDirective {
+    button;
+    localization;
+    spreadsheetService;
+    subs = new Subscription();
     constructor(button, localization, spreadsheetService) {
         this.button = button;
         this.localization = localization;
         this.spreadsheetService = spreadsheetService;
-        this.subs = new Subscription();
     }
     ngOnInit() {
         this.button.title = this.localization.get('saveFile');
@@ -2848,10 +2966,10 @@ class SpreadsheetSaveFileDirective {
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetSaveFileDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetSaveFileDirective, isStandalone: true, selector: "[kendoSpreadsheetSaveFile]", ngImport: i0 });
 }
-SpreadsheetSaveFileDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetSaveFileDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetSaveFileDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetSaveFileDirective, isStandalone: true, selector: "[kendoSpreadsheetSaveFile]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetSaveFileDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetSaveFileDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSpreadsheetSaveFile]',
@@ -2863,21 +2981,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class SpreadsheetLoadFileComponent extends ToolBarToolComponent {
+    localization;
+    spreadsheetService;
+    toolbar;
+    overflowButtonElement;
+    button;
+    icon = commandIcons['folderOpen'];
+    svgIcon = commandSVGIcons['folderOpen'];
+    tabindex = -1;
     constructor(localization, spreadsheetService, toolbar) {
         super();
         this.localization = localization;
         this.spreadsheetService = spreadsheetService;
         this.toolbar = toolbar;
-        this.icon = commandIcons['folderOpen'];
-        this.svgIcon = commandSVGIcons['folderOpen'];
-        this.tabindex = -1;
-        this.onFileSelect = (e) => {
-            const file = e.target.files[0];
-            if (file) {
-                this.spreadsheetService.spreadsheet.executeCommand({ command: 'OpenCommand', options: { file } });
-                e.target.value = null;
-            }
-        };
         this.isBuiltInTool = true;
     }
     /**
@@ -2886,6 +3002,13 @@ class SpreadsheetLoadFileComponent extends ToolBarToolComponent {
     messageFor(key) {
         return this.localization.get(key);
     }
+    onFileSelect = (e) => {
+        const file = e.target.files[0];
+        if (file) {
+            this.spreadsheetService.spreadsheet.executeCommand({ command: 'OpenCommand', options: { file } });
+            e.target.value = null;
+        }
+    };
     /**
      * @hidden
      */
@@ -2911,14 +3034,13 @@ class SpreadsheetLoadFileComponent extends ToolBarToolComponent {
         this.tabindex = -1;
         return false;
     }
-}
-SpreadsheetLoadFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetLoadFileComponent, deps: [{ token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-SpreadsheetLoadFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetLoadFileComponent, isStandalone: true, selector: "kendo-spreadsheet-load-file-tool", providers: [
-        {
-            provide: ToolBarToolComponent,
-            useExisting: forwardRef(() => SpreadsheetLoadFileComponent),
-        },
-    ], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }, { propertyName: "button", first: true, predicate: ["button"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetLoadFileComponent, deps: [{ token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetLoadFileComponent, isStandalone: true, selector: "kendo-spreadsheet-load-file-tool", providers: [
+            {
+                provide: ToolBarToolComponent,
+                useExisting: forwardRef(() => SpreadsheetLoadFileComponent),
+            },
+        ], viewQueries: [{ propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }, { propertyName: "button", first: true, predicate: ["button"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <button
                 #button
@@ -2961,8 +3083,9 @@ SpreadsheetLoadFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
                     accept=".xlsx,.XLSX" />
             </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetLoadFileComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetLoadFileComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-spreadsheet-load-file-tool',
@@ -3022,13 +3145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         }], ctorParameters: function () { return [{ type: SpreadsheetLocalizationService }, { type: SpreadsheetService }, { type: i1$2.ToolBarComponent, decorators: [{
                     type: Inject,
                     args: [ToolBarComponent]
-                }] }]; }, propDecorators: { toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
-            }], overflowButtonElement: [{
+                }] }]; }, propDecorators: { overflowButtonElement: [{
                 type: ViewChild,
                 args: ['overflowButton', { read: ElementRef, static: false }]
             }], button: [{
@@ -3040,6 +3157,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class MainMenuDirective {
+    host;
+    renderer;
     constructor(host, renderer) {
         this.host = host;
         this.renderer = renderer;
@@ -3047,10 +3166,10 @@ class MainMenuDirective {
     ngAfterViewInit() {
         isDocumentAvailable() && this.renderer.addClass(this.host.nativeElement.firstElementChild, 'k-spreadsheet-menu');
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MainMenuDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MainMenuDirective, isStandalone: true, selector: "[kendoSpreadsheetMenu]", ngImport: i0 });
 }
-MainMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MainMenuDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-MainMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: MainMenuDirective, isStandalone: true, selector: "[kendoSpreadsheetMenu]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MainMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MainMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSpreadsheetMenu]',
@@ -3062,10 +3181,329 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class MessagesDirective extends ComponentMessages {
+    /* Tabs */
+    /**
+     * The name of the "Home" toolbar tab
+     */
+    home;
+    /**
+     * The name of the "File" toolbar tab
+     */
+    file;
+    /**
+     * The name of the "Insert" toolbar tab
+     */
+    insert;
+    /**
+     * The name of the "Format" toolbar tab
+     */
+    formatTab;
+    /* Section of Tools Messages */
+    /**
+     * The title of the Save File tool
+     */
+    saveFile;
+    /**
+     * The title of the Load File tool
+     */
+    loadFile;
+    /**
+     * The title of the Bold tool
+     */
+    bold;
+    /**
+     * The title of the Italic tool
+     */
+    italic;
+    /**
+     * The title of the Underline tool
+     */
+    underline;
+    /**
+     * The title of the Format tool
+     */
+    format;
+    /**
+     * The title of the Font Family tool
+     */
+    fontFamily;
+    /**
+     * The title of the Font Size tool
+     */
+    fontSize;
+    /**
+     * The title of the Undo tool
+     */
+    undo;
+    /**
+     * The title of the Redo tool
+     */
+    redo;
+    /**
+     * The title of the tool that changes the text background color
+     */
+    background;
+    /**
+     * The title of the tool that changes the text font color
+     */
+    color;
+    /**
+     * The title of the Grid Lines tool
+     */
+    gridLines;
+    /**
+     * The title of the tool that adds new column before currently selected column
+     */
+    addColumnLeft;
+    /**
+     * The title of the tool that adds new column after currently selected column
+     */
+    addColumnRight;
+    /**
+     * The title of the tool that adds new row below currently selected row
+     */
+    addRowBelow;
+    /**
+     * The title of the tool that adds new row above currently selected row
+     */
+    addRowAbove;
+    /**
+     * The title of the tool that deletes a column
+     */
+    deleteColumn;
+    /**
+     * The title of the tool that deletes a row
+     */
+    deleteRow;
+    /**
+     * The title of the Text Wrap tool
+     */
+    wrap;
+    /**
+     * The title of the Text Align tool
+     */
+    align;
+    /**
+     * The title of the Text Align Horizontal tool
+     */
+    alignHorizontal;
+    /**
+     * The title of the Text Align Vertical tool
+     */
+    alignVertical;
+    /**
+     * The title of the Text Align Left tool
+     */
+    alignLeft;
+    /**
+     * The title of the Text Align Center tool
+     */
+    alignCenter;
+    /**
+     * The title of the Text Align Right tool
+     */
+    alignRight;
+    /**
+     * The title of the Text Align Justify tool
+     */
+    alignJustify;
+    /**
+     * The title of the Text Align Top tool
+     */
+    alignTop;
+    /**
+     * The title of the Text Align Middle tool
+     */
+    alignMiddle;
+    /**
+     * The title of the Text Align Bottom tool
+     */
+    alignBottom;
+    /* Dialogs */
+    /**
+     * The text of the Apply button in all Spreadsheet dialogs
+     */
+    dialogApply;
+    /* Dialogs */
+    /**
+     * The text of the Cancel button in all Spreadsheet dialogs
+     */
+    dialogCancel;
+    /**
+     * The text of the Delete button in the Delete sheet dialog
+     */
+    dialogDelete;
+    /**
+     * The text of the Rename button in the Rename sheet dialog
+     */
+    dialogRename;
+    /**
+     * The text of the **Insert** button in all Spreadsheet dialogs
+     */
+    dialogInsert;
+    /**
+     * The text of the **Remove link** button in the Link tool dialog
+     */
+    dialogRemoveLink;
+    /**
+     * The title of the Delete sheet dialog
+     */
+    delete;
+    /**
+     * The title of the Rename sheet dialog
+     */
+    rename;
+    /**
+     * The title of the Name Box input
+     */
+    nameBox;
+    /**
+     * The title of the Formula input
+     */
+    formulaInput;
+    /**
+     * The title of the Add new sheet button
+     */
+    addSheet;
+    /**
+     * The title of the Sheets menu button
+     */
+    sheetsMenu;
+    /**
+     * The text of the View toolbar tab
+     */
+    view;
+    /**
+     * The title of the Cells Merge tool
+     */
+    merge;
+    /**
+     * The title of the Merge horizontally tool
+     */
+    mergeHorizontally;
+    /**
+     * The title of the Merge vertically tool
+     */
+    mergeVertically;
+    /**
+     * The title of the Merge all tool
+     */
+    mergeAll;
+    /**
+     * The title of the Unmerge tool
+     */
+    unmerge;
+    /**
+     * The title of the tool that inserts a link
+     */
+    insertLink;
+    /**
+     * The title of the tool that inserts a link
+     */
+    increaseDecimal;
+    /**
+     * The title of the tool that inserts a link
+     */
+    decreaseDecimal;
+    /**
+     * The title of the tool that increases the cell font size
+     */
+    increaseFontSize;
+    /**
+     * The title of the tool that decreases the cell font size
+     */
+    decreaseFontSize;
+    /**
+     * The content of the dialog that warns about an unsupported file type
+     */
+    openUnsupported;
+    /**
+     * The content of the dialog that warns about modifying a merged cell
+     */
+    modifyMerged;
+    /**
+     * The content of the dialog that warns about modifying a disabled cell
+     */
+    cannotModifyDisabled;
+    /**
+     * The text of the **OK** dialog button
+     */
+    dialogOk;
+    /**
+     * The title of an error dialog
+     */
+    dialogError;
+    /**
+     * The content of the dialog that warns about duplicated sheet name
+     */
+    duplicateSheetName;
+    /**
+     * The Copy command text
+     */
+    copy;
+    /**
+     * The Cut command text
+     */
+    cut;
+    /**
+     * The Paste command text
+     */
+    paste;
+    /**
+     * The Hide row command text
+     */
+    hideRow;
+    /**
+     * The Unhide row command text
+     */
+    unhideRow;
+    /**
+     * The Hide column command text
+     */
+    hideColumn;
+    /**
+     * The Unhide column command text
+     */
+    unhideColumn;
+    /**
+     * The text of the Sheet menu Delete option
+     */
+    sheetDelete;
+    /**
+     * The text of the Sheet menu Rename option
+     */
+    sheetRename;
+    /**
+     * The text of the Sheet menu Hide option
+     */
+    sheetHide;
+    /**
+     * The text of the Sheet menu Duplicate option
+     */
+    sheetDuplicate;
+    /**
+     * The text of the Sheet menu Move Left option
+     */
+    sheetMoveLeft;
+    /**
+     * The text of the Sheet menu Move Right option
+     */
+    sheetMoveRight;
+    /**
+     * The content of the dialog that warns about invalid name input.
+     *
+     * The content consists of a two-part message - the input value and a localizable string.
+     * For user value input **A1%**, the default dialog content will be **Invalid name: A1%**.
+     *
+     * To allow reordering the input value and the localizable part, the `invalidNameError` accepts a string with a
+     * placeholder for the input value, for example, **{inputValue} is invalid**. The `{inputValue}` placeholder will be replaced
+     * internally with the current value, and the resulting label will be rendered as **A1% is invalid**.
+     */
+    invalidNameError;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessagesDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MessagesDirective, isStandalone: true, selector: "[kendoSpreadsheetMessages]", inputs: { home: "home", file: "file", insert: "insert", formatTab: "formatTab", saveFile: "saveFile", loadFile: "loadFile", bold: "bold", italic: "italic", underline: "underline", format: "format", fontFamily: "fontFamily", fontSize: "fontSize", undo: "undo", redo: "redo", background: "background", color: "color", gridLines: "gridLines", addColumnLeft: "addColumnLeft", addColumnRight: "addColumnRight", addRowBelow: "addRowBelow", addRowAbove: "addRowAbove", deleteColumn: "deleteColumn", deleteRow: "deleteRow", wrap: "wrap", align: "align", alignHorizontal: "alignHorizontal", alignVertical: "alignVertical", alignLeft: "alignLeft", alignCenter: "alignCenter", alignRight: "alignRight", alignJustify: "alignJustify", alignTop: "alignTop", alignMiddle: "alignMiddle", alignBottom: "alignBottom", dialogApply: "dialogApply", dialogCancel: "dialogCancel", dialogDelete: "dialogDelete", dialogRename: "dialogRename", dialogInsert: "dialogInsert", dialogRemoveLink: "dialogRemoveLink", delete: "delete", rename: "rename", nameBox: "nameBox", formulaInput: "formulaInput", addSheet: "addSheet", sheetsMenu: "sheetsMenu", view: "view", merge: "merge", mergeHorizontally: "mergeHorizontally", mergeVertically: "mergeVertically", mergeAll: "mergeAll", unmerge: "unmerge", insertLink: "insertLink", increaseDecimal: "increaseDecimal", decreaseDecimal: "decreaseDecimal", increaseFontSize: "increaseFontSize", decreaseFontSize: "decreaseFontSize", openUnsupported: "openUnsupported", modifyMerged: "modifyMerged", cannotModifyDisabled: "cannotModifyDisabled", dialogOk: "dialogOk", dialogError: "dialogError", duplicateSheetName: "duplicateSheetName", copy: "copy", cut: "cut", paste: "paste", hideRow: "hideRow", unhideRow: "unhideRow", hideColumn: "hideColumn", unhideColumn: "unhideColumn", sheetDelete: "sheetDelete", sheetRename: "sheetRename", sheetHide: "sheetHide", sheetDuplicate: "sheetDuplicate", sheetMoveLeft: "sheetMoveLeft", sheetMoveRight: "sheetMoveRight", invalidNameError: "invalidNameError" }, usesInheritance: true, ngImport: i0 });
 }
-MessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessagesDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-MessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: MessagesDirective, isStandalone: true, selector: "[kendoSpreadsheetMessages]", inputs: { home: "home", file: "file", insert: "insert", formatTab: "formatTab", saveFile: "saveFile", loadFile: "loadFile", bold: "bold", italic: "italic", underline: "underline", format: "format", fontFamily: "fontFamily", fontSize: "fontSize", undo: "undo", redo: "redo", background: "background", color: "color", gridLines: "gridLines", addColumnLeft: "addColumnLeft", addColumnRight: "addColumnRight", addRowBelow: "addRowBelow", addRowAbove: "addRowAbove", deleteColumn: "deleteColumn", deleteRow: "deleteRow", wrap: "wrap", align: "align", alignHorizontal: "alignHorizontal", alignVertical: "alignVertical", alignLeft: "alignLeft", alignCenter: "alignCenter", alignRight: "alignRight", alignJustify: "alignJustify", alignTop: "alignTop", alignMiddle: "alignMiddle", alignBottom: "alignBottom", dialogApply: "dialogApply", dialogCancel: "dialogCancel", dialogDelete: "dialogDelete", dialogRename: "dialogRename", dialogInsert: "dialogInsert", dialogRemoveLink: "dialogRemoveLink", delete: "delete", rename: "rename", nameBox: "nameBox", formulaInput: "formulaInput", addSheet: "addSheet", sheetsMenu: "sheetsMenu", view: "view", merge: "merge", mergeHorizontally: "mergeHorizontally", mergeVertically: "mergeVertically", mergeAll: "mergeAll", unmerge: "unmerge", insertLink: "insertLink", increaseDecimal: "increaseDecimal", decreaseDecimal: "decreaseDecimal", increaseFontSize: "increaseFontSize", decreaseFontSize: "decreaseFontSize", openUnsupported: "openUnsupported", modifyMerged: "modifyMerged", cannotModifyDisabled: "cannotModifyDisabled", dialogOk: "dialogOk", dialogError: "dialogError", duplicateSheetName: "duplicateSheetName", copy: "copy", cut: "cut", paste: "paste", hideRow: "hideRow", unhideRow: "unhideRow", hideColumn: "hideColumn", unhideColumn: "unhideColumn", sheetDelete: "sheetDelete", sheetRename: "sheetRename", sheetHide: "sheetHide", sheetDuplicate: "sheetDuplicate", sheetMoveLeft: "sheetMoveLeft", sheetMoveRight: "sheetMoveRight", invalidNameError: "invalidNameError" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSpreadsheetMessages]',
@@ -3231,17 +3669,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class LocalizedMessagesDirective extends MessagesDirective {
+    service;
     constructor(service) {
         super();
         this.service = service;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoSpreadsheetLocalizedMessages]", providers: [{
+                provide: MessagesDirective,
+                useExisting: forwardRef(() => LocalizedMessagesDirective)
+            }], usesInheritance: true, ngImport: i0 });
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoSpreadsheetLocalizedMessages]", providers: [{
-            provide: MessagesDirective,
-            useExisting: forwardRef(() => LocalizedMessagesDirective)
-        }], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [{
@@ -3257,167 +3696,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Represents the [Kendo UI Spreadsheet component for Angular]({% slug overview_spreadsheet %}).
  */
 class SpreadsheetComponent {
-    constructor(ngZone, intl, host, localization, spreadsheetService, toolsService, errorService, dialogService) {
-        this.ngZone = ngZone;
-        this.intl = intl;
-        this.host = host;
-        this.localization = localization;
-        this.spreadsheetService = spreadsheetService;
-        this.toolsService = toolsService;
-        this.errorService = errorService;
-        this.dialogService = dialogService;
-        this.hostClass = true;
-        this.role = 'application';
-        /**
-         * Sets the overflow option of the built-in Toolbar components.
-         * @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.
-         *
-         * @default 50
-         */
-        this.columns = 50;
-        /**
-         * The initial column width in pixels.
-         *
-         * @default 100
-         */
-        this.columnWidth = 100;
-        /**
-         * The height of the header row in pixels.
-         *
-         * @default 30
-         */
-        this.headerHeight = 30;
-        /**
-         * The width of the header column in pixels.
-         *
-         * @default 32
-         */
-        this.headerWidth = 32;
-        /**
-         * The initial row height in pixels.
-         *
-         * @default 30
-         */
-        this.rowHeight = 30;
-        /**
-         * The number of rows in the document.
-         *
-         * @default 200
-         */
-        this.rows = 200;
-        /**
-         * Fired when a value in the Spreadsheet is changed. Exposes the `SpreadsheetWidget` instance and the selected `Range` as event data.
-         */
-        this.change = new EventEmitter();
-        /**
-         * Fired when the selected range format is changed from the UI. Exposes the `SpreadsheetWidget` instance and the selected `Range` as event data.
-         */
-        this.formatChange = new EventEmitter();
-        /**
-         * Fired when the selection is changed by the end user. Exposes the `SpreadsheetWidget` instance and the selected `Range` as event data.
-         */
-        this.selectionChange = new EventEmitter();
-        /**
-         * Fired when the end user clicks the Export to Excel toolbar button.
-         * The event is preventable and exposes the `Workbook` object, a `preventDefault` method
-         * (if invoked, the generated file will not be saved), and the SpreadsheetWidget instance.
-         */
-        this.excelExport = new EventEmitter();
-        /**
-         * Fired when the end user clicks the Open toolbar button.
-         * The event is preventable and exposes the selected `File` or `Blob`, a `preventDefault` method
-         * (if invoked, the selected file will not be loaded), and the SpreadsheetWidget instance.
-         */
-        this.excelImport = new EventEmitter();
-        /**
-         * Fired when the active sheet is about to change.
-         * The event exposes the new active `Sheet` and the SpreadsheetWidget instance.
-         */
-        this.activeSheetChange = new EventEmitter();
-        this.formulaFxIcon = formulaFxIcon;
-        this.folderOpenIcon = folderOpenIcon;
-        this.downloadIcon = downloadIcon;
-        this.showLicenseWatermark = false;
-        this.contextMenuItems = [];
-        this.subs = new Subscription();
-        /**
-         * @hidden
-         */
-        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);
-        };
-        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.spreadsheetService.selectionChanged.next(e.range);
-        };
-        this.onExcelExport = (e) => hasObservers(this.excelExport) && this.excelExport.emit(e);
-        this.onExcelImport = (e) => hasObservers(this.excelImport) && this.excelImport.emit(e);
-        this.onActiveSheetChanged = (sheet) => {
-            const eventArgs = { sender: this.spreadsheetService.spreadsheet, sheet };
-            hasObservers(this.activeSheetChange) && this.activeSheetChange.emit(eventArgs);
-            const range = sheet.range(sheet.activeCell());
-            this.spreadsheetService.selectionChanged.next(range);
-        };
-        this.updateState = (e) => {
-            this.toolsService.updateTools(e);
-            if (e.reason?.sheetSelection) {
-                this.sheets = mapToSheetDescriptor(this.spreadsheetService.spreadsheet.sheets());
-            }
-        };
-        this.onMessage = (e) => {
-            this.ngZone.run(() => {
-                this.errorService.handleErrorMessage(e);
-            });
-        };
-        const isValid = validatePackage(packageMetadata);
-        this.showLicenseWatermark = shouldShowValidationUI(isValid);
-        ngZone.onStable.pipe(take(1)).subscribe(() => {
-            if (!this.menuItems) {
-                this._menuItems = [{
-                        id: 'file',
-                        text: this.messageFor('file')
-                    }, {
-                        id: 'home',
-                        text: this.messageFor('home'),
-                        active: true,
-                        cssClass: 'k-active'
-                    }, {
-                        id: 'insert',
-                        text: this.messageFor('insert')
-                    }, {
-                        id: 'format',
-                        text: this.messageFor('formatTab')
-                    }, {
-                        id: 'view',
-                        text: this.messageFor('view')
-                    }];
-            }
-            this.selectedMenuItem = this.menuItems[1];
-        });
-    }
+    ngZone;
+    intl;
+    host;
+    localization;
+    spreadsheetService;
+    toolsService;
+    errorService;
+    dialogService;
+    formulaBarInputRef;
+    formulaCellInputRef;
+    nameBoxRef;
+    dialogContainer;
+    contextMenu;
+    hostClass = true;
+    role = 'application';
     /**
      * The menu items configuration.
      */
@@ -3438,6 +3731,18 @@ class SpreadsheetComponent {
     get menuItems() {
         return this._menuItems;
     }
+    /**
+     * Sets the overflow option of the built-in Toolbar components.
+     * @default false
+     */
+    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'
+     */
+    formulaListMaxHeight = '300px';
     /**
      * The name of the currently active sheet. Must match one of the sheet names.
      */
@@ -3467,9 +3772,134 @@ class SpreadsheetComponent {
     get sheetsInfo() {
         return this._sheetsInfo;
     }
+    /**
+     * The number of columns in the document.
+     *
+     * @default 50
+     */
+    columns = 50;
+    /**
+     * The initial column width in pixels.
+     *
+     * @default 100
+     */
+    columnWidth = 100;
+    /**
+     * The initial styles applies to the sheet cells.
+     */
+    defaultCellStyle;
+    /**
+     * The height of the header row in pixels.
+     *
+     * @default 30
+     */
+    headerHeight = 30;
+    /**
+     * The width of the header column in pixels.
+     *
+     * @default 32
+     */
+    headerWidth = 32;
+    /**
+     * The initial row height in pixels.
+     *
+     * @default 30
+     */
+    rowHeight = 30;
+    /**
+     * The number of rows in the document.
+     *
+     * @default 200
+     */
+    rows = 200;
+    /**
+     * An object containing any images used in the Spreadsheet. The keys should be image IDs (they are referenced by this ID in `sheets.drawings`),
+     * and the values should be image URLs. The image URLs can be either [`data URLs`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)
+     * (in which case the images are fully contained by the JSON), or external URLs.
+     */
+    images;
+    /**
+     * Configures the Excel export settings of the Spreadsheet.
+     */
+    excel;
+    /**
+     * Fired when a value in the Spreadsheet is changed. Exposes the `SpreadsheetWidget` instance and the selected `Range` as event data.
+     */
+    change = new EventEmitter();
+    /**
+     * Fired when the selected range format is changed from the UI. Exposes the `SpreadsheetWidget` instance and the selected `Range` as event data.
+     */
+    formatChange = new EventEmitter();
+    /**
+     * Fired when the selection is changed by the end user. Exposes the `SpreadsheetWidget` instance and the selected `Range` as event data.
+     */
+    selectionChange = new EventEmitter();
+    /**
+     * Fired when the end user clicks the Export to Excel toolbar button.
+     * The event is preventable and exposes the `Workbook` object, a `preventDefault` method
+     * (if invoked, the generated file will not be saved), and the SpreadsheetWidget instance.
+     */
+    excelExport = new EventEmitter();
+    /**
+     * Fired when the end user clicks the Open toolbar button.
+     * The event is preventable and exposes the selected `File` or `Blob`, a `preventDefault` method
+     * (if invoked, the selected file will not be loaded), and the SpreadsheetWidget instance.
+     */
+    excelImport = new EventEmitter();
+    /**
+     * Fired when the active sheet is about to change.
+     * The event exposes the new active `Sheet` and the SpreadsheetWidget instance.
+     */
+    activeSheetChange = new EventEmitter();
+    formulaFxIcon = formulaFxIcon;
+    folderOpenIcon = folderOpenIcon;
+    downloadIcon = downloadIcon;
+    selectedMenuItem;
     get spreadsheetWidget() {
         return this.spreadsheetService.spreadsheet;
     }
+    showLicenseWatermark = false;
+    contextMenuItems = [];
+    _sheetsInfo;
+    _activeSheet;
+    _menuItems;
+    currentRange;
+    subs = new Subscription();
+    constructor(ngZone, intl, host, localization, spreadsheetService, toolsService, errorService, dialogService) {
+        this.ngZone = ngZone;
+        this.intl = intl;
+        this.host = host;
+        this.localization = localization;
+        this.spreadsheetService = spreadsheetService;
+        this.toolsService = toolsService;
+        this.errorService = errorService;
+        this.dialogService = dialogService;
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
+        ngZone.onStable.pipe(take(1)).subscribe(() => {
+            if (!this.menuItems) {
+                this._menuItems = [{
+                        id: 'file',
+                        text: this.messageFor('file')
+                    }, {
+                        id: 'home',
+                        text: this.messageFor('home'),
+                        active: true,
+                        cssClass: 'k-active'
+                    }, {
+                        id: 'insert',
+                        text: this.messageFor('insert')
+                    }, {
+                        id: 'format',
+                        text: this.messageFor('formatTab')
+                    }, {
+                        id: 'view',
+                        text: this.messageFor('view')
+                    }];
+            }
+            this.selectedMenuItem = this.menuItems[1];
+        });
+    }
     ngAfterViewInit() {
         if (!isDocumentAvailable()) {
             return;
@@ -3609,6 +4039,16 @@ class SpreadsheetComponent {
             this.spreadsheetWidget.executeCommand(command);
         }
     }
+    /**
+     * @hidden
+     */
+    onKeyDown = (e) => {
+        const isCtrl = e.ctrlKey || e.metaKey;
+        const shift = e.shiftKey;
+        if (isCtrl && shift && e.keyCode === Keys.KeyS) {
+            this.spreadsheetService.onSheetsBarFocus.next();
+        }
+    };
     /**
      * @hidden
      */
@@ -3629,6 +4069,37 @@ class SpreadsheetComponent {
             this.selectedMenuItem = this.menuItems.find(item => item.active);
         }
     }
+    onChange = (e) => {
+        hasObservers(this.change) && this.change.emit(e);
+        this.spreadsheetService.selectionChanged.next(e.range);
+    };
+    onSelectionChange = (e) => {
+        hasObservers(this.selectionChange) && this.selectionChange.emit(e);
+        this.spreadsheetService.selectionChanged.next(e.range);
+    };
+    onChangeFormat = (e) => {
+        hasObservers(this.formatChange) && this.formatChange.emit(e);
+        this.spreadsheetService.selectionChanged.next(e.range);
+    };
+    onExcelExport = (e) => hasObservers(this.excelExport) && this.excelExport.emit(e);
+    onExcelImport = (e) => hasObservers(this.excelImport) && this.excelImport.emit(e);
+    onActiveSheetChanged = (sheet) => {
+        const eventArgs = { sender: this.spreadsheetService.spreadsheet, sheet };
+        hasObservers(this.activeSheetChange) && this.activeSheetChange.emit(eventArgs);
+        const range = sheet.range(sheet.activeCell());
+        this.spreadsheetService.selectionChanged.next(range);
+    };
+    updateState = (e) => {
+        this.toolsService.updateTools(e);
+        if (e.reason?.sheetSelection) {
+            this.sheets = mapToSheetDescriptor(this.spreadsheetService.spreadsheet.sheets());
+        }
+    };
+    onMessage = (e) => {
+        this.ngZone.run(() => {
+            this.errorService.handleErrorMessage(e);
+        });
+    };
     updateActiveSheet(name) {
         this.ngZone.run(() => this.spreadsheetService.currentActiveSheet = name);
     }
@@ -3818,23 +4289,22 @@ class SpreadsheetComponent {
             });
         });
     }
-}
-SpreadsheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetComponent, deps: [{ token: i0.NgZone }, { token: i1$3.IntlService }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ErrorHandlingService }, { token: i1$1.DialogService }], target: i0.ɵɵFactoryTarget.Component });
-SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetComponent, isStandalone: true, 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,
-        SpreadsheetService,
-        {
-            provide: LocalizationService,
-            useExisting: SpreadsheetLocalizationService
-        },
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.spreadsheet'
-        },
-        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 }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], exportAs: ["kendo-spreadsheet"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetComponent, deps: [{ token: i0.NgZone }, { token: i1$3.IntlService }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }, { token: ErrorHandlingService }, { token: i1$1.DialogService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetComponent, isStandalone: true, 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,
+            SpreadsheetService,
+            {
+                provide: LocalizationService,
+                useExisting: SpreadsheetLocalizationService
+            },
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.spreadsheet'
+            },
+            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 }, { 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."
@@ -3998,6 +4468,7 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             </kendo-menu>
             <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'file'"
                 [attr.aria-label]="messageFor('file')"
+                fillMode="flat"
                 class="k-spreadsheet-toolbar"
                 [overflow]="overflow">
                 <kendo-spreadsheet-load-file-tool></kendo-spreadsheet-load-file-tool>
@@ -4006,18 +4477,19 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'home'"
                 [attr.aria-label]="messageFor('home')"
                 class="k-spreadsheet-toolbar"
+                fillMode="flat"
                 [overflow]="overflow">
-                <kendo-toolbar-buttongroup>
-                    <kendo-toolbar-button kendoSpreadsheetUndo></kendo-toolbar-button>
-                    <kendo-toolbar-button kendoSpreadsheetRedo></kendo-toolbar-button>
-                </kendo-toolbar-buttongroup>
+                <kendo-toolbar-button kendoSpreadsheetUndo></kendo-toolbar-button>
+                <kendo-toolbar-button kendoSpreadsheetRedo></kendo-toolbar-button>
                 <kendo-toolbar-separator></kendo-toolbar-separator>
                 <kendo-toolbar-dropdownlist kendoSpreadsheetFontFamily></kendo-toolbar-dropdownlist>
                 <kendo-toolbar-dropdownlist kendoSpreadsheetFontSize></kendo-toolbar-dropdownlist>
-                <kendo-toolbar-button kendoSpreadsheetIncreaseFontSize></kendo-toolbar-button>
-                <kendo-toolbar-button kendoSpreadsheetDecreaseFontSize></kendo-toolbar-button>
+                <kendo-toolbar-buttongroup fillMode="flat">
+                    <kendo-toolbar-button kendoSpreadsheetIncreaseFontSize></kendo-toolbar-button>
+                    <kendo-toolbar-button kendoSpreadsheetDecreaseFontSize></kendo-toolbar-button>
+                </kendo-toolbar-buttongroup>
                 <kendo-toolbar-separator></kendo-toolbar-separator>
-                <kendo-toolbar-buttongroup>
+                <kendo-toolbar-buttongroup fillMode="flat">
                     <kendo-toolbar-button kendoSpreadsheetBold></kendo-toolbar-button>
                     <kendo-toolbar-button kendoSpreadsheetItalic></kendo-toolbar-button>
                     <kendo-toolbar-button kendoSpreadsheetUnderline></kendo-toolbar-button>
@@ -4034,6 +4506,7 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             </kendo-toolbar>
             <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'insert'"
                 [attr.aria-label]="messageFor('insert')"
+                fillMode="flat"
                 class="k-spreadsheet-toolbar"
                 [overflow]="overflow">
                 <kendo-toolbar-button kendoSpreadsheetInsertLink></kendo-toolbar-button>
@@ -4048,6 +4521,7 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             </kendo-toolbar>
             <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'format'"
                 [attr.aria-label]="messageFor('formatTab')"
+                fillMode="flat"
                 class="k-spreadsheet-toolbar"
                 [overflow]="overflow">
                 <kendo-toolbar-button kendoSpreadsheetDecreaseDecimal></kendo-toolbar-button>
@@ -4055,6 +4529,7 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             </kendo-toolbar>
             <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'view'"
                 [attr.aria-label]="messageFor('view')"
+                fillMode="flat"
                 class="k-spreadsheet-toolbar"
                 [overflow]="overflow">
                 <kendo-toolbar-dropdownbutton kendoSpreadsheetMerge></kendo-toolbar-dropdownbutton>
@@ -4099,8 +4574,9 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             (select)="onContextMenuSelect($event)"></kendo-contextmenu>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoSpreadsheetLocalizedMessages]" }, { kind: "component", type: MenuComponent, selector: "kendo-menu", inputs: ["appendTo", "menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { kind: "directive", type: MainMenuDirective, selector: "[kendoSpreadsheetMenu]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MenuItemComponent, selector: "kendo-menu-item", inputs: ["text", "url", "disabled", "cssClass", "cssStyle", "icon", "svgIcon", "data", "separator"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: SpreadsheetLoadFileComponent, selector: "kendo-spreadsheet-load-file-tool" }, { kind: "component", type: 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"] }, { kind: "directive", type: SpreadsheetSaveFileDirective, selector: "[kendoSpreadsheetSaveFile]" }, { kind: "component", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "directive", type: SpreadsheetUndoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]" }, { kind: "directive", type: SpreadsheetRedoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]" }, { kind: "component", type: ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { kind: "component", type: SpreadsheetFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]" }, { kind: "component", type: SpreadsheetFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]" }, { kind: "directive", type: SpreadsheetIncreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseFontSize]" }, { kind: "directive", type: SpreadsheetDecreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseFontSize]" }, { kind: "directive", type: SpreadsheetBoldDirective, selector: "kendo-toolbar-button[kendoSpreadsheetBold]" }, { kind: "directive", type: SpreadsheetItalicDirective, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]" }, { kind: "directive", type: SpreadsheetUnderlineDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]" }, { kind: "component", type: SpreadsheetForeColorComponent, selector: "kendo-spreadsheet-forecolor-tool" }, { kind: "component", type: SpreadsheetBackColorComponent, selector: "kendo-spreadsheet-backcolor-tool" }, { kind: "component", type: 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"] }, { kind: "directive", type: SpreadsheetHorizontalTextAlignDirective, selector: "[kendoSpreadsheetHorizontalTextAlign]" }, { kind: "directive", type: SpreadsheetVerticalTextAlignDirective, selector: "[kendoSpreadsheetVerticalTextAlign]" }, { kind: "directive", type: SpreadsheetTextWrapDirective, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]" }, { kind: "directive", type: SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]" }, { kind: "directive", type: SpreadsheetInsertLinkDirective, selector: "kendo-toolbar-button[kendoSpreadsheetInsertLink]" }, { kind: "directive", type: SpreadsheetAddColumnLeftButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]" }, { kind: "directive", type: SpreadsheetAddColumnRightButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]" }, { kind: "directive", type: SpreadsheetAddRowBelowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]" }, { kind: "directive", type: SpreadsheetAddRowAboveButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]" }, { kind: "directive", type: SpreadsheetDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]" }, { kind: "directive", type: SpreadsheetDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]" }, { kind: "directive", type: SpreadsheetDecreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseDecimal]" }, { kind: "directive", type: SpreadsheetIncreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseDecimal]" }, { kind: "directive", type: SpreadsheetMergeDirective, selector: "[kendoSpreadsheetMerge]" }, { kind: "directive", type: SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]" }, { kind: "component", type: NameBoxComponent, selector: "[kendoSpreadsheetNameBox]", inputs: ["data", "spreadsheetWidget"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]", inputs: ["formulaListMaxHeight"] }, { kind: "component", type: SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: ["sheets", "sheetDescriptors"] }, { kind: "component", type: ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoSpreadsheetLocalizedMessages]" }, { kind: "component", type: MenuComponent, selector: "kendo-menu", inputs: ["appendTo", "menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { kind: "directive", type: MainMenuDirective, selector: "[kendoSpreadsheetMenu]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MenuItemComponent, selector: "kendo-menu-item", inputs: ["text", "url", "disabled", "cssClass", "cssStyle", "icon", "svgIcon", "data", "separator"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: SpreadsheetLoadFileComponent, selector: "kendo-spreadsheet-load-file-tool" }, { kind: "component", type: 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"] }, { kind: "directive", type: SpreadsheetSaveFileDirective, selector: "[kendoSpreadsheetSaveFile]" }, { kind: "component", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "fillMode", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "directive", type: SpreadsheetUndoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]" }, { kind: "directive", type: SpreadsheetRedoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]" }, { kind: "component", type: ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { kind: "component", type: SpreadsheetFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]" }, { kind: "component", type: SpreadsheetFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]" }, { kind: "directive", type: SpreadsheetIncreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseFontSize]" }, { kind: "directive", type: SpreadsheetDecreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseFontSize]" }, { kind: "directive", type: SpreadsheetBoldDirective, selector: "kendo-toolbar-button[kendoSpreadsheetBold]" }, { kind: "directive", type: SpreadsheetItalicDirective, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]" }, { kind: "directive", type: SpreadsheetUnderlineDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]" }, { kind: "component", type: SpreadsheetForeColorComponent, selector: "kendo-spreadsheet-forecolor-tool" }, { kind: "component", type: SpreadsheetBackColorComponent, selector: "kendo-spreadsheet-backcolor-tool" }, { kind: "component", type: 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"] }, { kind: "directive", type: SpreadsheetHorizontalTextAlignDirective, selector: "[kendoSpreadsheetHorizontalTextAlign]" }, { kind: "directive", type: SpreadsheetVerticalTextAlignDirective, selector: "[kendoSpreadsheetVerticalTextAlign]" }, { kind: "directive", type: SpreadsheetTextWrapDirective, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]" }, { kind: "directive", type: SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]" }, { kind: "directive", type: SpreadsheetInsertLinkDirective, selector: "kendo-toolbar-button[kendoSpreadsheetInsertLink]" }, { kind: "directive", type: SpreadsheetAddColumnLeftButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]" }, { kind: "directive", type: SpreadsheetAddColumnRightButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]" }, { kind: "directive", type: SpreadsheetAddRowBelowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]" }, { kind: "directive", type: SpreadsheetAddRowAboveButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]" }, { kind: "directive", type: SpreadsheetDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]" }, { kind: "directive", type: SpreadsheetDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]" }, { kind: "directive", type: SpreadsheetDecreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseDecimal]" }, { kind: "directive", type: SpreadsheetIncreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseDecimal]" }, { kind: "directive", type: SpreadsheetMergeDirective, selector: "[kendoSpreadsheetMerge]" }, { kind: "directive", type: SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]" }, { kind: "component", type: NameBoxComponent, selector: "[kendoSpreadsheetNameBox]", inputs: ["data", "spreadsheetWidget"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]", inputs: ["formulaListMaxHeight"] }, { kind: "component", type: SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: ["sheets", "sheetDescriptors"] }, { kind: "component", type: ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendo-spreadsheet',
@@ -4284,6 +4760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             </kendo-menu>
             <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'file'"
                 [attr.aria-label]="messageFor('file')"
+                fillMode="flat"
                 class="k-spreadsheet-toolbar"
                 [overflow]="overflow">
                 <kendo-spreadsheet-load-file-tool></kendo-spreadsheet-load-file-tool>
@@ -4292,18 +4769,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'home'"
                 [attr.aria-label]="messageFor('home')"
                 class="k-spreadsheet-toolbar"
+                fillMode="flat"
                 [overflow]="overflow">
-                <kendo-toolbar-buttongroup>
-                    <kendo-toolbar-button kendoSpreadsheetUndo></kendo-toolbar-button>
-                    <kendo-toolbar-button kendoSpreadsheetRedo></kendo-toolbar-button>
-                </kendo-toolbar-buttongroup>
+                <kendo-toolbar-button kendoSpreadsheetUndo></kendo-toolbar-button>
+                <kendo-toolbar-button kendoSpreadsheetRedo></kendo-toolbar-button>
                 <kendo-toolbar-separator></kendo-toolbar-separator>
                 <kendo-toolbar-dropdownlist kendoSpreadsheetFontFamily></kendo-toolbar-dropdownlist>
                 <kendo-toolbar-dropdownlist kendoSpreadsheetFontSize></kendo-toolbar-dropdownlist>
-                <kendo-toolbar-button kendoSpreadsheetIncreaseFontSize></kendo-toolbar-button>
-                <kendo-toolbar-button kendoSpreadsheetDecreaseFontSize></kendo-toolbar-button>
+                <kendo-toolbar-buttongroup fillMode="flat">
+                    <kendo-toolbar-button kendoSpreadsheetIncreaseFontSize></kendo-toolbar-button>
+                    <kendo-toolbar-button kendoSpreadsheetDecreaseFontSize></kendo-toolbar-button>
+                </kendo-toolbar-buttongroup>
                 <kendo-toolbar-separator></kendo-toolbar-separator>
-                <kendo-toolbar-buttongroup>
+                <kendo-toolbar-buttongroup fillMode="flat">
                     <kendo-toolbar-button kendoSpreadsheetBold></kendo-toolbar-button>
                     <kendo-toolbar-button kendoSpreadsheetItalic></kendo-toolbar-button>
                     <kendo-toolbar-button kendoSpreadsheetUnderline></kendo-toolbar-button>
@@ -4320,6 +4798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             </kendo-toolbar>
             <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'insert'"
                 [attr.aria-label]="messageFor('insert')"
+                fillMode="flat"
                 class="k-spreadsheet-toolbar"
                 [overflow]="overflow">
                 <kendo-toolbar-button kendoSpreadsheetInsertLink></kendo-toolbar-button>
@@ -4334,6 +4813,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             </kendo-toolbar>
             <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'format'"
                 [attr.aria-label]="messageFor('formatTab')"
+                fillMode="flat"
                 class="k-spreadsheet-toolbar"
                 [overflow]="overflow">
                 <kendo-toolbar-button kendoSpreadsheetDecreaseDecimal></kendo-toolbar-button>
@@ -4341,6 +4821,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             </kendo-toolbar>
             <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'view'"
                 [attr.aria-label]="messageFor('view')"
+                fillMode="flat"
                 class="k-spreadsheet-toolbar"
                 [overflow]="overflow">
                 <kendo-toolbar-dropdownbutton kendoSpreadsheetMerge></kendo-toolbar-dropdownbutton>
@@ -4456,6 +4937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Custom component messages override default component messages.
  */
 class CustomMessagesComponent extends MessagesDirective {
+    service;
     constructor(service) {
         super();
         this.service = service;
@@ -4463,15 +4945,15 @@ class CustomMessagesComponent extends MessagesDirective {
     get override() {
         return true;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-spreadsheet-messages", providers: [
+            {
+                provide: MessagesDirective,
+                useExisting: forwardRef(() => CustomMessagesComponent)
+            }
+        ], usesInheritance: true, ngImport: i0 });
 }
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-CustomMessagesComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-spreadsheet-messages", providers: [
-        {
-            provide: MessagesDirective,
-            useExisting: forwardRef(() => CustomMessagesComponent)
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -4490,12 +4972,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class SpreadsheetTextAlignDirective {
+    host;
+    spreadsheetService;
+    toolsService;
+    commandName = 'align';
+    subs = new Subscription();
     constructor(host, localization, spreadsheetService, toolsService) {
         this.host = host;
         this.spreadsheetService = spreadsheetService;
         this.toolsService = toolsService;
-        this.commandName = 'align';
-        this.subs = new Subscription();
         host.svgIcon = commandSVGIcons[this.commandName];
         host.icon = commandIcons[this.commandName];
         host.arrowIcon = true;
@@ -4518,10 +5003,10 @@ class SpreadsheetTextAlignDirective {
         };
         this.spreadsheetService.spreadsheet.executeCommand(options);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetTextAlignDirective, deps: [{ token: i1$2.ToolBarDropDownButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetTextAlignDirective, isStandalone: true, selector: "[kendoSpreadsheetTextAlign]", ngImport: i0 });
 }
-SpreadsheetTextAlignDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetTextAlignDirective, deps: [{ token: i1$2.ToolBarDropDownButtonComponent }, { token: SpreadsheetLocalizationService }, { token: SpreadsheetService }, { token: SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-SpreadsheetTextAlignDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SpreadsheetTextAlignDirective, isStandalone: true, selector: "[kendoSpreadsheetTextAlign]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetTextAlignDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetTextAlignDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSpreadsheetTextAlign]',
@@ -4572,11 +5057,11 @@ const KENDO_SPREADSHEET = [
  * definition for the Spreadsheet component.
  */
 class SpreadsheetModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetModule, imports: [SpreadsheetComponent, CustomMessagesComponent, SpreadsheetBoldDirective, SpreadsheetItalicDirective, SpreadsheetUnderlineDirective, SpreadsheetLoadFileComponent, SpreadsheetSaveFileDirective, SpreadsheetFormatDirective, SpreadsheetUndoDirective, SpreadsheetRedoDirective, SpreadsheetFontFamilyComponent, SpreadsheetFontSizeComponent, SpreadsheetBackColorComponent, SpreadsheetForeColorComponent, SpreadsheetGridLinesDirective, SpreadsheetAddColumnLeftButtonDirective, SpreadsheetAddColumnRightButtonDirective, SpreadsheetAddRowAboveButtonDirective, SpreadsheetAddRowBelowButtonDirective, SpreadsheetDeleteColumnButtonDirective, SpreadsheetDeleteRowButtonDirective, SpreadsheetTextAlignDirective, SpreadsheetTextWrapDirective, SpreadsheetMergeDirective, SpreadsheetInsertLinkDirective, SpreadsheetIncreaseFontSizeDirective, SpreadsheetDecreaseFontSizeDirective, SpreadsheetIncreaseDecimalDirective, SpreadsheetDecreaseDecimalDirective, SpreadsheetHorizontalTextAlignDirective, SpreadsheetVerticalTextAlignDirective], exports: [SpreadsheetComponent, CustomMessagesComponent, SpreadsheetBoldDirective, SpreadsheetItalicDirective, SpreadsheetUnderlineDirective, SpreadsheetLoadFileComponent, SpreadsheetSaveFileDirective, SpreadsheetFormatDirective, SpreadsheetUndoDirective, SpreadsheetRedoDirective, SpreadsheetFontFamilyComponent, SpreadsheetFontSizeComponent, SpreadsheetBackColorComponent, SpreadsheetForeColorComponent, SpreadsheetGridLinesDirective, SpreadsheetAddColumnLeftButtonDirective, SpreadsheetAddColumnRightButtonDirective, SpreadsheetAddRowAboveButtonDirective, SpreadsheetAddRowBelowButtonDirective, SpreadsheetDeleteColumnButtonDirective, SpreadsheetDeleteRowButtonDirective, SpreadsheetTextAlignDirective, SpreadsheetTextWrapDirective, SpreadsheetMergeDirective, SpreadsheetInsertLinkDirective, SpreadsheetIncreaseFontSizeDirective, SpreadsheetDecreaseFontSizeDirective, SpreadsheetIncreaseDecimalDirective, SpreadsheetDecreaseDecimalDirective, SpreadsheetHorizontalTextAlignDirective, SpreadsheetVerticalTextAlignDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [SpreadsheetComponent, SpreadsheetLoadFileComponent, SpreadsheetFontFamilyComponent, SpreadsheetFontSizeComponent, SpreadsheetBackColorComponent, SpreadsheetForeColorComponent] });
 }
-SpreadsheetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SpreadsheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetModule, imports: [SpreadsheetComponent, CustomMessagesComponent, SpreadsheetBoldDirective, SpreadsheetItalicDirective, SpreadsheetUnderlineDirective, SpreadsheetLoadFileComponent, SpreadsheetSaveFileDirective, SpreadsheetFormatDirective, SpreadsheetUndoDirective, SpreadsheetRedoDirective, SpreadsheetFontFamilyComponent, SpreadsheetFontSizeComponent, SpreadsheetBackColorComponent, SpreadsheetForeColorComponent, SpreadsheetGridLinesDirective, SpreadsheetAddColumnLeftButtonDirective, SpreadsheetAddColumnRightButtonDirective, SpreadsheetAddRowAboveButtonDirective, SpreadsheetAddRowBelowButtonDirective, SpreadsheetDeleteColumnButtonDirective, SpreadsheetDeleteRowButtonDirective, SpreadsheetTextAlignDirective, SpreadsheetTextWrapDirective, SpreadsheetMergeDirective, SpreadsheetInsertLinkDirective, SpreadsheetIncreaseFontSizeDirective, SpreadsheetDecreaseFontSizeDirective, SpreadsheetIncreaseDecimalDirective, SpreadsheetDecreaseDecimalDirective, SpreadsheetHorizontalTextAlignDirective, SpreadsheetVerticalTextAlignDirective], exports: [SpreadsheetComponent, CustomMessagesComponent, SpreadsheetBoldDirective, SpreadsheetItalicDirective, SpreadsheetUnderlineDirective, SpreadsheetLoadFileComponent, SpreadsheetSaveFileDirective, SpreadsheetFormatDirective, SpreadsheetUndoDirective, SpreadsheetRedoDirective, SpreadsheetFontFamilyComponent, SpreadsheetFontSizeComponent, SpreadsheetBackColorComponent, SpreadsheetForeColorComponent, SpreadsheetGridLinesDirective, SpreadsheetAddColumnLeftButtonDirective, SpreadsheetAddColumnRightButtonDirective, SpreadsheetAddRowAboveButtonDirective, SpreadsheetAddRowBelowButtonDirective, SpreadsheetDeleteColumnButtonDirective, SpreadsheetDeleteRowButtonDirective, SpreadsheetTextAlignDirective, SpreadsheetTextWrapDirective, SpreadsheetMergeDirective, SpreadsheetInsertLinkDirective, SpreadsheetIncreaseFontSizeDirective, SpreadsheetDecreaseFontSizeDirective, SpreadsheetIncreaseDecimalDirective, SpreadsheetDecreaseDecimalDirective, SpreadsheetHorizontalTextAlignDirective, SpreadsheetVerticalTextAlignDirective] });
-SpreadsheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [SpreadsheetComponent, SpreadsheetLoadFileComponent, SpreadsheetFontFamilyComponent, SpreadsheetFontSizeComponent, SpreadsheetBackColorComponent, SpreadsheetForeColorComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_SPREADSHEET],