@progress/kendo-angular-spreadsheet 17.0.0-develop.20 → 17.0.0-develop.22

package/{esm2020 → esm2022}/spreadsheet.component.mjs

@@ -70,167 +70,21 @@ import * as i6 from "@progress/kendo-angular-dialog";
  * Represents the [Kendo UI Spreadsheet component for Angular]({% slug overview_spreadsheet %}).
  */
 export 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.
      */
@@ -251,6 +105,18 @@ export 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.
      */
@@ -280,9 +146,134 @@ export 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;
@@ -422,6 +413,16 @@ export 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
      */
@@ -442,6 +443,37 @@ export 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);
     }
@@ -631,23 +663,22 @@ export class SpreadsheetComponent {
             });
         });
     }
-}
-SpreadsheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SpreadsheetComponent, deps: [{ token: i0.NgZone }, { token: i1.IntlService }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }, { token: i5.ErrorHandlingService }, { token: i6.DialogService }], target: i0.ɵɵFactoryTarget.Component });
-SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "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.IntlService }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }, { token: i5.ErrorHandlingService }, { token: i6.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."
@@ -918,7 +949,8 @@ SpreadsheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
 
         <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", "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: "15.2.10", ngImport: i0, type: SpreadsheetComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendo-spreadsheet',

package/{esm2020 → esm2022}/spreadsheet.module.mjs

@@ -46,11 +46,11 @@ import * as i31 from "./tools/align/vertical-align-tool.directive";
  * definition for the Spreadsheet component.
  */
 export 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: [i1.SpreadsheetComponent, i2.CustomMessagesComponent, i3.SpreadsheetBoldDirective, i4.SpreadsheetItalicDirective, i5.SpreadsheetUnderlineDirective, i6.SpreadsheetLoadFileComponent, i7.SpreadsheetSaveFileDirective, i8.SpreadsheetFormatDirective, i9.SpreadsheetUndoDirective, i10.SpreadsheetRedoDirective, i11.SpreadsheetFontFamilyComponent, i12.SpreadsheetFontSizeComponent, i13.SpreadsheetBackColorComponent, i14.SpreadsheetForeColorComponent, i15.SpreadsheetGridLinesDirective, i16.SpreadsheetAddColumnLeftButtonDirective, i17.SpreadsheetAddColumnRightButtonDirective, i18.SpreadsheetAddRowAboveButtonDirective, i19.SpreadsheetAddRowBelowButtonDirective, i20.SpreadsheetDeleteColumnButtonDirective, i21.SpreadsheetDeleteRowButtonDirective, i22.SpreadsheetTextAlignDirective, i23.SpreadsheetTextWrapDirective, i24.SpreadsheetMergeDirective, i25.SpreadsheetInsertLinkDirective, i26.SpreadsheetIncreaseFontSizeDirective, i27.SpreadsheetDecreaseFontSizeDirective, i28.SpreadsheetIncreaseDecimalDirective, i29.SpreadsheetDecreaseDecimalDirective, i30.SpreadsheetHorizontalTextAlignDirective, i31.SpreadsheetVerticalTextAlignDirective], exports: [i1.SpreadsheetComponent, i2.CustomMessagesComponent, i3.SpreadsheetBoldDirective, i4.SpreadsheetItalicDirective, i5.SpreadsheetUnderlineDirective, i6.SpreadsheetLoadFileComponent, i7.SpreadsheetSaveFileDirective, i8.SpreadsheetFormatDirective, i9.SpreadsheetUndoDirective, i10.SpreadsheetRedoDirective, i11.SpreadsheetFontFamilyComponent, i12.SpreadsheetFontSizeComponent, i13.SpreadsheetBackColorComponent, i14.SpreadsheetForeColorComponent, i15.SpreadsheetGridLinesDirective, i16.SpreadsheetAddColumnLeftButtonDirective, i17.SpreadsheetAddColumnRightButtonDirective, i18.SpreadsheetAddRowAboveButtonDirective, i19.SpreadsheetAddRowBelowButtonDirective, i20.SpreadsheetDeleteColumnButtonDirective, i21.SpreadsheetDeleteRowButtonDirective, i22.SpreadsheetTextAlignDirective, i23.SpreadsheetTextWrapDirective, i24.SpreadsheetMergeDirective, i25.SpreadsheetInsertLinkDirective, i26.SpreadsheetIncreaseFontSizeDirective, i27.SpreadsheetDecreaseFontSizeDirective, i28.SpreadsheetIncreaseDecimalDirective, i29.SpreadsheetDecreaseDecimalDirective, i30.SpreadsheetHorizontalTextAlignDirective, i31.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: [i1.SpreadsheetComponent, i6.SpreadsheetLoadFileComponent, i11.SpreadsheetFontFamilyComponent, i12.SpreadsheetFontSizeComponent, i13.SpreadsheetBackColorComponent, i14.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: [i1.SpreadsheetComponent, i2.CustomMessagesComponent, i3.SpreadsheetBoldDirective, i4.SpreadsheetItalicDirective, i5.SpreadsheetUnderlineDirective, i6.SpreadsheetLoadFileComponent, i7.SpreadsheetSaveFileDirective, i8.SpreadsheetFormatDirective, i9.SpreadsheetUndoDirective, i10.SpreadsheetRedoDirective, i11.SpreadsheetFontFamilyComponent, i12.SpreadsheetFontSizeComponent, i13.SpreadsheetBackColorComponent, i14.SpreadsheetForeColorComponent, i15.SpreadsheetGridLinesDirective, i16.SpreadsheetAddColumnLeftButtonDirective, i17.SpreadsheetAddColumnRightButtonDirective, i18.SpreadsheetAddRowAboveButtonDirective, i19.SpreadsheetAddRowBelowButtonDirective, i20.SpreadsheetDeleteColumnButtonDirective, i21.SpreadsheetDeleteRowButtonDirective, i22.SpreadsheetTextAlignDirective, i23.SpreadsheetTextWrapDirective, i24.SpreadsheetMergeDirective, i25.SpreadsheetInsertLinkDirective, i26.SpreadsheetIncreaseFontSizeDirective, i27.SpreadsheetDecreaseFontSizeDirective, i28.SpreadsheetIncreaseDecimalDirective, i29.SpreadsheetDecreaseDecimalDirective, i30.SpreadsheetHorizontalTextAlignDirective, i31.SpreadsheetVerticalTextAlignDirective], exports: [i1.SpreadsheetComponent, i2.CustomMessagesComponent, i3.SpreadsheetBoldDirective, i4.SpreadsheetItalicDirective, i5.SpreadsheetUnderlineDirective, i6.SpreadsheetLoadFileComponent, i7.SpreadsheetSaveFileDirective, i8.SpreadsheetFormatDirective, i9.SpreadsheetUndoDirective, i10.SpreadsheetRedoDirective, i11.SpreadsheetFontFamilyComponent, i12.SpreadsheetFontSizeComponent, i13.SpreadsheetBackColorComponent, i14.SpreadsheetForeColorComponent, i15.SpreadsheetGridLinesDirective, i16.SpreadsheetAddColumnLeftButtonDirective, i17.SpreadsheetAddColumnRightButtonDirective, i18.SpreadsheetAddRowAboveButtonDirective, i19.SpreadsheetAddRowBelowButtonDirective, i20.SpreadsheetDeleteColumnButtonDirective, i21.SpreadsheetDeleteRowButtonDirective, i22.SpreadsheetTextAlignDirective, i23.SpreadsheetTextWrapDirective, i24.SpreadsheetMergeDirective, i25.SpreadsheetInsertLinkDirective, i26.SpreadsheetIncreaseFontSizeDirective, i27.SpreadsheetDecreaseFontSizeDirective, i28.SpreadsheetIncreaseDecimalDirective, i29.SpreadsheetDecreaseDecimalDirective, i30.SpreadsheetHorizontalTextAlignDirective, i31.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: [i1.SpreadsheetComponent, i6.SpreadsheetLoadFileComponent, i11.SpreadsheetFontFamilyComponent, i12.SpreadsheetFontSizeComponent, i13.SpreadsheetBackColorComponent, i14.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],

package/{esm2020 → esm2022}/tools/align/align-tool.directive.mjs

@@ -19,12 +19,15 @@ import * as i4 from "../tools.service";
  * @hidden
  */
 export 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;
@@ -47,10 +50,10 @@ export 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.ToolBarDropDownButtonComponent }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.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.ToolBarDropDownButtonComponent }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.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]',

package/{esm2020 → esm2022}/tools/align/horizontal-align-tool.directive.mjs

@@ -19,12 +19,15 @@ import * as i4 from "../tools.service";
  * @hidden
  */
 export 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;
@@ -47,10 +50,10 @@ export 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.ToolBarDropDownButtonComponent }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.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.ToolBarDropDownButtonComponent }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.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]',

package/{esm2020 → esm2022}/tools/align/vertical-align-tool.directive.mjs

@@ -19,12 +19,15 @@ import * as i4 from "../tools.service";
  * @hidden
  */
 export 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;
@@ -47,10 +50,10 @@ export 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.ToolBarDropDownButtonComponent }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.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.ToolBarDropDownButtonComponent }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.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]',

package/{esm2020 → esm2022}/tools/colorpicker/spreadsheet-backcolor.component.mjs

@@ -26,9 +26,8 @@ export 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.DialogService }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.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.DialogService }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.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>
             <div class="k-toolbar-item">
                 <kendo-colorpicker
@@ -59,7 +58,8 @@ 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) }],

package/{esm2020 → esm2022}/tools/colorpicker/spreadsheet-forecolor.component.mjs

@@ -26,9 +26,8 @@ export 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.DialogService }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.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.DialogService }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.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>
             <div class="k-toolbar-item">
                 <kendo-colorpicker
@@ -59,7 +58,8 @@ 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) }],