@progress/kendo-angular-spreadsheet 21.4.1-develop.1 → 22.0.0-develop.1

package/esm2022/spreadsheet.component.mjs

@@ -1,2408 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, ViewChild, ViewContainerRef, TemplateRef, ChangeDetectorRef } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { take } from 'rxjs/operators';
-import { validatePackage } from '@progress/kendo-licensing';
-import { packageMetadata } from './package-metadata';
-import { SpreadsheetWidget, registerEditor, Matrix, dateToSerial, serialToDate, validation, calc, formatting } from '@progress/kendo-spreadsheet-common';
-import { localeData, IntlService } from '@progress/kendo-angular-intl';
-import { calendarIcon, caretAltDownIcon, downloadIcon, folderOpenIcon, formulaFxIcon, sortDescSmallIcon, sortAscSmallIcon, searchIcon } from '@progress/kendo-svg-icons';
-import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
-import { PopupService } from '@progress/kendo-angular-popup';
-import { ContextMenuComponent, MenuItemComponent, MenuComponent } from '@progress/kendo-angular-menu';
-import { Keys, hasObservers, isDocumentAvailable, isPresent, shouldShowValidationUI, getLicenseMessage, WatermarkOverlayComponent, normalizeKeys } from '@progress/kendo-angular-common';
-import { DialogService } from '@progress/kendo-angular-dialog';
-import { IconWrapperComponent } from '@progress/kendo-angular-icons';
-import { ToolBarDropDownButtonComponent, ToolBarSeparatorComponent, ToolBarButtonGroupComponent, ToolBarButtonComponent, ToolBarComponent } from '@progress/kendo-angular-toolbar';
-import { SpreadsheetService } from './common/spreadsheet.service';
-import { SpreadsheetToolsService } from './tools/tools.service';
-import { SpreadsheetLocalizationService } from './localization/spreadsheet-localization.service';
-import { mapToSheetDescriptor, rowAndColPresent } from './utils';
-import { FormulaInputDirective } from './action-bar/formula-input.directive';
-import { getSheetActions } from './sheets-bar/utils';
-import { ErrorHandlingService } from './common/error-handling.service';
-import { commandIcons, commandSVGIcons } from './tools/shared/command-icons';
-import { InsertLinkDialogComponent } from './tools/insert/insert-link-dialog.component';
-import { SheetsBarComponent } from './sheets-bar/sheets-bar.component';
-import { NameBoxComponent } from './action-bar/namebox.component';
-import { SpreadsheetGridLinesDirective } from './tools/gridlines-tool.directive';
-import { SpreadsheetMergeDirective } from './tools/tables/merge-tool.directive';
-import { SpreadsheetIncreaseDecimalDirective } from './tools/increase-decimal-tool.directive';
-import { SpreadsheetDecreaseDecimalDirective } from './tools/decrease-decimal-tool.directive';
-import { SpreadsheetDeleteRowButtonDirective } from './tools/tables/delete-row-button.directive';
-import { SpreadsheetDeleteColumnButtonDirective } from './tools/tables/delete-column-button.directive';
-import { SpreadsheetAddRowAboveButtonDirective } from './tools/tables/add-row-above-button.directive';
-import { SpreadsheetAddRowBelowButtonDirective } from './tools/tables/add-row-below-button.directive';
-import { SpreadsheetAddColumnRightButtonDirective } from './tools/tables/add-column-right-button.directive';
-import { SpreadsheetAddColumnLeftButtonDirective } from './tools/tables/add-column-left-button.directive';
-import { SpreadsheetInsertLinkDirective } from './tools/insert/insert-link-tool.directive';
-import { SpreadsheetFormatDirective } from './tools/format-tool.directive';
-import { SpreadsheetTextWrapDirective } from './tools/text-wrap-tool.directive';
-import { SpreadsheetVerticalTextAlignDirective } from './tools/align/vertical-align-tool.directive';
-import { SpreadsheetHorizontalTextAlignDirective } from './tools/align/horizontal-align-tool.directive';
-import { SpreadsheetBackColorComponent } from './tools/colorpicker/spreadsheet-backcolor.component';
-import { SpreadsheetForeColorComponent } from './tools/colorpicker/spreadsheet-forecolor.component';
-import { SpreadsheetUnderlineDirective } from './tools/typographical-emphasis/underline-tool.directive';
-import { SpreadsheetItalicDirective } from './tools/typographical-emphasis/italic-tool.directive';
-import { SpreadsheetBoldDirective } from './tools/typographical-emphasis/bold-tool.directive';
-import { SpreadsheetDecreaseFontSizeDirective } from './tools/font-size/decrease-font-tool.directive';
-import { SpreadsheetIncreaseFontSizeDirective } from './tools/font-size/increase-font-tool.directive';
-import { SpreadsheetFontSizeComponent } from './tools/font-size/spreadsheet-fontsize-tool.component';
-import { SpreadsheetFontFamilyComponent } from './tools/font-family/spreadsheet-fontfamily-tool.component';
-import { SpreadsheetRedoDirective } from './tools/history/redo-tool';
-import { SpreadsheetUndoDirective } from './tools/history/undo-tool';
-import { SpreadsheetSaveFileDirective } from './tools/save-file-tool.directive';
-import { SpreadsheetLoadFileComponent } from './tools/load-file.component';
-import { MainMenuDirective } from './common/main-menu.directive';
-import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
-import { SpreadsheetDataValidationDirective } from './tools/data-validation-tool.directive';
-import { ListEditorComponent } from './common/list-editor.component';
-import { CalendarComponent } from './common/calendar-editor.component';
-import { SpreadsheetFilterDirective } from './tools/filter-sort/filter-tool.directive';
-import { SpreadsheetFilterMenuItemComponent } from './filter-menu/filter-menu-item.component';
-import { KENDO_TREEVIEW } from '@progress/kendo-angular-treeview';
-import { FilterMenuItemContentTemplateDirective } from './filter-menu/filter-menu-item-content-template.directive';
-import { ButtonComponent } from '@progress/kendo-angular-buttons';
-import { DropDownListComponent } from "@progress/kendo-angular-dropdowns";
-import { InputsModule } from "@progress/kendo-angular-inputs";
-import { DatePickerComponent } from "@progress/kendo-angular-dateinputs";
-import { SpreadsheetSortDirective } from './tools/filter-sort/sort-tool.directive';
-import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-intl";
-import * as i2 from "@progress/kendo-angular-l10n";
-import * as i3 from "./common/spreadsheet.service";
-import * as i4 from "./tools/tools.service";
-import * as i5 from "./common/error-handling.service";
-import * as i6 from "@progress/kendo-angular-dialog";
-import * as i7 from "@progress/kendo-angular-popup";
-import * as i8 from "@progress/kendo-angular-treeview";
-import * as i9 from "@progress/kendo-angular-inputs";
-/**
- * Represents the [Kendo UI Spreadsheet component for Angular]({% slug overview_spreadsheet %}).
- *
- * @example
- * ```html
- * <kendo-spreadsheet [sheets]="sheets"></kendo-spreadsheet>
- * ```
- *
- * @remarks
- * Supported children components are: {@link CustomMessagesComponent}
- */
-export class SpreadsheetComponent {
-    ngZone;
-    intl;
-    host;
-    localization;
-    spreadsheetService;
-    toolsService;
-    errorService;
-    dialogService;
-    popupService;
-    container;
-    cdr;
-    formulaBarInputRef;
-    formulaCellInputRef;
-    nameBoxRef;
-    dialogContainer;
-    contextMenu;
-    filterMenuTemplate;
-    hostClass = true;
-    role = 'application';
-    /**
-     * The menu items configuration.
-     */
-    set menuItems(items) {
-        this._menuItems = [];
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            const normalizedItems = items.map(item => ({
-                active: item.active,
-                text: item.id === 'format' || item.id === 'data' ? this.messageFor(`${item.id}Tab`) : this.messageFor(item.id),
-                cssClass: item.active ? 'k-active' : null,
-                id: item.id
-            }));
-            this._menuItems = normalizedItems;
-            const activeItemIndex = this.menuItems.findIndex(item => item.active);
-            this.selectedMenuItem = this.menuItems[activeItemIndex > -1 ? activeItemIndex : 0];
-        });
-    }
-    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.
-     */
-    set activeSheet(value) {
-        this._activeSheet = value;
-        this.spreadsheetService.spreadsheet?.view?.sheetsbar.onSheetSelect(this.activeSheet);
-    }
-    get activeSheet() {
-        return this._activeSheet || this.spreadsheetService.spreadsheet?.activeSheet()?.name();
-    }
-    /**
-     * An array of `SheetDescriptor` objects that describe the sheets in the Spreadsheet.
-     */
-    set sheets(value) {
-        const items = value.map((item, index, items) => ({
-            ...item,
-            state: item.state || 'visible',
-            inEdit: false,
-            first: index === 0,
-            last: index === items.length - 1,
-            text: item.name,
-            active: (item.name === this.activeSheet) || items.length === 1,
-            index
-        }));
-        this._sheetsInfo = items;
-    }
-    get sheetsInfo() {
-        return this._sheetsInfo;
-    }
-    /**
-     * @hidden
-     */
-    expandedKeys = ['0'];
-    /**
-     * @hidden
-     */
-    checkedKeys = [];
-    /**
-     * 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;
-    /**
-     * Sets the custom cell editors for the Spreadsheet.
-     * Accepts an array of `SpreadsheetCellEditorOptions` objects that define custom editors.
-     */
-    cellEditors;
-    /**
-     * 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;
-    /**
-     * Fires when a value in the Spreadsheet is changed. Exposes the `SpreadsheetWidget` instance and the selected `Range` as event data.
-     */
-    change = new EventEmitter();
-    /**
-     * Fires when the selected range format is changed from the UI. Exposes the `SpreadsheetWidget` instance and the selected `Range` as event data.
-     */
-    formatChange = new EventEmitter();
-    /**
-     * Fires when the selection is changed by the end user. Exposes the `SpreadsheetWidget` instance and the selected `Range` as event data.
-     */
-    selectionChange = new EventEmitter();
-    /**
-     * Fires 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();
-    /**
-     * Fires 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();
-    /**
-     * Fires when the active sheet is about to change.
-     * The event exposes the new active `Sheet` and the `SpreadsheetWidget` instance.
-     */
-    activeSheetChange = new EventEmitter();
-    /**
-     * Fires when a clipboard action (cut, copy, or paste) occurs in the Spreadsheet.
-     */
-    clipboard = new EventEmitter();
-    formulaFxIcon = formulaFxIcon;
-    folderOpenIcon = folderOpenIcon;
-    downloadIcon = downloadIcon;
-    searchIcon = searchIcon;
-    selectedMenuItem;
-    rangeFilterValuesList = [];
-    sortAscSmallIcon = sortAscSmallIcon;
-    sortDescSmallIcon = sortDescSmallIcon;
-    get spreadsheetWidget() {
-        return this.spreadsheetService.spreadsheet;
-    }
-    /**
-     * @hidden
-     */
-    showLicenseWatermark = false;
-    /**
-     * @hidden
-     */
-    licenseMessage;
-    contextMenuItems = [];
-    sortMenuItems = [];
-    conditionExpanded = false;
-    valueExpanded = false;
-    filterConditionsList = {};
-    conditionValue = '';
-    set selectedCondition(value) {
-        if (this._selectedCondition?.type !== value.type) {
-            this.conditionValue = '';
-        }
-        this._selectedCondition = value;
-    }
-    get selectedCondition() {
-        return this._selectedCondition;
-    }
-    /**
-     * @hidden
-     */
-    currentFilterOptions = null;
-    _selectedCondition;
-    _sheetsInfo;
-    _activeSheet;
-    _menuItems;
-    currentRange;
-    subs = new Subscription();
-    filterMenuOpened = false;
-    popupRef;
-    popupPositionChangeSub;
-    constructor(ngZone, intl, host, localization, spreadsheetService, toolsService, errorService, dialogService, popupService, container, cdr) {
-        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.popupService = popupService;
-        this.container = container;
-        this.cdr = cdr;
-        const isValid = validatePackage(packageMetadata);
-        this.licenseMessage = getLicenseMessage(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: 'data',
-                        text: this.messageFor('dataTab')
-                    }, {
-                        id: 'view',
-                        text: this.messageFor('view')
-                    }];
-            }
-            this.selectedMenuItem = this.menuItems[1];
-        });
-    }
-    ngAfterViewInit() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        this.ngZone.runOutsideAngular(() => {
-            setTimeout(() => {
-                const spreadsheet = this.spreadsheetService.spreadsheet = new SpreadsheetWidget(this.host.nativeElement, this.options);
-                spreadsheet.bind('select', this.onSelectionChange);
-                spreadsheet.bind('change', this.onChange);
-                spreadsheet.bind('changeFormat', this.onChangeFormat);
-                spreadsheet.bind('excelImport', this.onExcelImport);
-                spreadsheet.bind('excelExport', this.onExcelExport);
-                spreadsheet.bind('keydown', this.onKeyDown);
-                spreadsheet.view.bind('update', this.updateState);
-                spreadsheet.view.bind('message', this.onMessage);
-                spreadsheet.bind('contextmenu', this.onContextMenu.bind(this));
-                spreadsheet.bind('copy', (e) => { this.onClipboardEvent(e, 'copy'); });
-                spreadsheet.bind('cut', (e) => { this.onClipboardEvent(e, 'cut'); });
-                spreadsheet.bind('paste', (e) => { this.onClipboardEvent(e, 'paste'); });
-                const sheet = spreadsheet.activeSheet();
-                if (sheet) {
-                    this.updateState({ range: sheet.range(sheet.activeCell()) });
-                }
-                this.updateActiveSheet(this.activeSheet || spreadsheet?.activeSheet()?.name());
-                this.configureSheets(spreadsheet);
-                this.spreadsheetService.componentInitialized.next();
-            });
-            this.subs.add(this.spreadsheetService.sheetsChanged.subscribe(this.onSheetsChanged.bind(this)));
-            this.subs.add(this.spreadsheetService.activeSheetChanged.subscribe(this.onActiveSheetChanged.bind(this)));
-            this.subs.add(this.spreadsheetService.selectionChanged.subscribe(range => {
-                this.currentRange = range;
-                this.closePopup();
-            }));
-            this.spreadsheetService.dialogContainer = this.dialogContainer;
-        });
-        this.registerEditors();
-        this.spreadsheetService.spreadsheetComponent = this;
-        this.sortMenuItems = [{
-                text: this.messageFor('sortAsc'),
-                svgIcon: this.sortAscSmallIcon,
-                icon: 'sort-asc-small'
-            }, {
-                text: this.messageFor('sortDesc'),
-                svgIcon: this.sortDescSmallIcon,
-                icon: 'sort-desc-small'
-            }];
-    }
-    ngOnChanges(changes) {
-        const dynamicOptions = [
-            'columns',
-            'columnWidth',
-            'defaultCellStyle',
-            'excel',
-            'headerHeight',
-            'headerWidth',
-            'images',
-            'names',
-            'rowHeight',
-            'rows',
-            'sheets'
-        ];
-        const changedDynamicOptions = dynamicOptions.filter(o => isPresent(changes[o] && !changes[o].firstChange));
-        if (this.spreadsheetWidget && changedDynamicOptions.length) {
-            const newOptions = this.spreadsheetWidget.toJSON();
-            changedDynamicOptions.forEach(o => newOptions[o] = changes[o].currentValue);
-            this.spreadsheetWidget.fromJSON(newOptions);
-        }
-        if (changes['cellEditors'] && !changes['cellEditors'].firstChange) {
-            this.registerCustomEditors();
-        }
-    }
-    ngOnDestroy() {
-        this.subs.unsubscribe();
-    }
-    /**
-     * @hidden
-     */
-    onContextMenu(e) {
-        if (e.targetType === 'topcorner') {
-            return;
-        }
-        const selection = this.spreadsheetWidget.activeSheet().select();
-        const { topLeft, bottomRight } = selection;
-        const isRange = e.targetType === 'cell' && (topLeft.row !== bottomRight.row || topLeft.col !== bottomRight.col);
-        const targetType = isRange ? 'range' : e.targetType;
-        this.contextMenuItems = this.contextMenuItemsForTarget(targetType, e.showUnhide, e.showUnmerge);
-        this.contextMenu.show({ top: e.originalEvent.pageY, left: e.originalEvent.pageX });
-    }
-    /**
-     * @hidden
-     */
-    isChecked = (dataItem) => {
-        if (this.containsItem(dataItem)) {
-            return "checked";
-        }
-        if (this.isIndeterminate(dataItem.items)) {
-            return "indeterminate";
-        }
-        return "none";
-    };
-    /**
-     * @hidden
-     */
-    onContextMenuSelect(e) {
-        let command;
-        switch (e.item.id) {
-            case 'cut':
-                command = { command: 'ToolbarCutCommand', options: { workbook: this.spreadsheetWidget.workbook } };
-                break;
-            case 'copy':
-                command = { command: 'ToolbarCopyCommand', options: { workbook: this.spreadsheetWidget.workbook } };
-                break;
-            case 'unmerge':
-                command = { command: 'MergeCellCommand', options: { value: 'unmerge' } };
-                break;
-            case 'mergeAll':
-                command = { command: 'MergeCellCommand', options: { value: 'cells' } };
-                break;
-            case 'mergeHorizontally':
-                command = { command: 'MergeCellCommand', options: { value: 'horizontally' } };
-                break;
-            case 'mergeVertically':
-                command = { command: 'MergeCellCommand', options: { value: 'vertically' } };
-                break;
-            case 'hideRow':
-                command = { command: 'HideLineCommand', options: { axis: 'row' } };
-                break;
-            case 'hideColumn':
-                command = { command: 'HideLineCommand', options: { axis: 'column' } };
-                break;
-            case 'unhideRow':
-                command = { command: 'UnHideLineCommand', options: { axis: 'row' } };
-                break;
-            case 'unhideColumn':
-                command = { command: 'UnHideLineCommand', options: { axis: 'column' } };
-                break;
-            case 'deleteRow':
-                command = { command: 'DeleteRowCommand' };
-                break;
-            case 'deleteColumn':
-                command = { command: 'DeleteColumnCommand' };
-                break;
-            case 'insertLink':
-                this.openLinkDialog();
-                break;
-            case 'addRowAbove':
-                command = { command: 'AddRowCommand', options: { value: 'above' } };
-                break;
-            case 'addRowBelow':
-                command = { command: 'AddRowCommand', options: { value: 'below' } };
-                break;
-            case 'addColumnLeft':
-                command = { command: 'AddColumnCommand', options: { value: 'left' } };
-                break;
-            case 'addColumnRight':
-                command = { command: 'AddColumnCommand', options: { value: 'right' } };
-                break;
-        }
-        if (command) {
-            this.spreadsheetWidget.executeCommand(command);
-        }
-    }
-    /**
-     * @hidden
-     */
-    onKeyDown = (e) => {
-        const isCtrl = e.ctrlKey || e.metaKey;
-        const shift = e.shiftKey;
-        const altKey = e.altKey;
-        const code = normalizeKeys(e);
-        if (isCtrl && shift && code === Keys.KeyS) {
-            this.spreadsheetService.onSheetsBarFocus.next(undefined);
-        }
-        if (altKey) {
-            const currentSheet = e.sender.activeSheet();
-            const validation = currentSheet.range(currentSheet.activeCell()).validation();
-            if (isPresent(validation) && validation.dataType === 'list') {
-                if (code === Keys.ArrowDown) {
-                    this.spreadsheetWidget.view.openCustomEditor();
-                }
-            }
-        }
-    };
-    /**
-     * @hidden
-     */
-    messageFor(key) {
-        return this.localization.get(key);
-    }
-    /**
-     * @hidden
-     */
-    onMenuItemSelect(e) {
-        const selectedMenuItem = this.menuItems.find(item => item.text === e.item.text);
-        const previousSelectedItem = this.menuItems.find(item => item.active);
-        if (selectedMenuItem !== previousSelectedItem) {
-            this._menuItems.forEach((item, idx) => {
-                item.active = idx === +e.index;
-                item.cssClass = idx === +e.index ? 'k-active' : null;
-            });
-            this.selectedMenuItem = this.menuItems.find(item => item.active);
-        }
-    }
-    /**
-     * @hidden
-     */
-    onToggle(expanded, filterType) {
-        this[`${filterType}Expanded`] = expanded;
-        if (expanded) {
-            const otherFilterType = filterType === 'condition' ? 'value' : 'condition';
-            this[`${otherFilterType}Expanded`] = false;
-        }
-        this.cdr.detectChanges();
-    }
-    /**
-     * @hidden
-     */
-    filterApply(filterType) {
-        if (!this.currentFilterOptions) {
-            return;
-        }
-        let filterData;
-        if (filterType === 'value') {
-            const checkedValues = this.checkedKeys
-                .filter(key => key !== this.messageFor('filterMenuAll'))
-                .map(key => {
-                const item = this.findItemByText(this.rangeFilterValuesList, key);
-                return item ? item.unformattedValue : key;
-            });
-            const hasBlanks = checkedValues.some(v => v === undefined || v === null);
-            const nonBlankValues = checkedValues.filter(v => v !== undefined && v !== null);
-            filterData = {
-                blanks: hasBlanks,
-                values: nonBlankValues.length > 0 ? nonBlankValues : undefined
-            };
-        }
-        else if (this.selectedCondition?.comparer !== 'none' && this.conditionValue !== null && this.conditionValue !== undefined) {
-            filterData = {
-                criteria: [{
-                        operator: this.selectedCondition.comparer,
-                        value: this.conditionValue
-                    }]
-            };
-        }
-        else if (this.selectedCondition?.comparer === 'none') {
-            this.spreadsheetWidget.executeCommand({
-                command: 'ClearFilterCommand',
-                options: { column: this.currentFilterOptions?.column }
-            });
-            this.closePopup();
-            return;
-        }
-        if (filterData) {
-            const commandOptions = {
-                column: this.currentFilterOptions.column,
-                operatingRange: this.currentFilterOptions.range
-            };
-            if (filterType === 'value') {
-                commandOptions.valueFilter = filterData;
-            }
-            else {
-                commandOptions.customFilter = filterData;
-            }
-            this.spreadsheetWidget.executeCommand({
-                command: 'ApplyFilterCommand',
-                options: commandOptions
-            });
-        }
-        this.closePopup();
-    }
-    /**
-     * @hidden
-     */
-    filterClear() {
-        this.spreadsheetWidget.executeCommand({
-            command: 'ClearFilterCommand',
-            options: { column: this.currentFilterOptions?.column }
-        });
-        this.closePopup();
-    }
-    /**
-     * @hidden
-     */
-    onSortItemClick(item) {
-        const dir = item.text === this.messageFor('sortAsc') ? 'asc' : 'desc';
-        const noHeaderRange = this.currentFilterOptions?.range?.resize({ top: 1 });
-        const options = {
-            value: dir,
-            sheet: false,
-            operatingRange: noHeaderRange,
-            column: this.currentFilterOptions?.column
-        };
-        this.spreadsheetWidget.executeCommand({ command: 'SortCommand', options });
-    }
-    /**
-     * @hidden
-     */
-    closePopup() {
-        if (this.popupRef) {
-            this.popupRef.close();
-            this.popupRef = null;
-        }
-        if (this.popupPositionChangeSub) {
-            this.popupPositionChangeSub.unsubscribe();
-            this.popupPositionChangeSub = null;
-        }
-    }
-    onChange = (e) => {
-        hasObservers(this.change) && this.change.emit(e);
-        this.spreadsheetService.selectionChanged.next(e.range);
-    };
-    onSelectionChange = (e) => {
-        this.closePopup();
-        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);
-    }
-    onSheetsChanged(e) {
-        this.ngZone.run(() => {
-            this.sheets = mapToSheetDescriptor(e.sheets);
-            this.updateActiveSheet(this.spreadsheetService.activeSheet);
-        });
-    }
-    onClipboardEvent(event, type) {
-        if (hasObservers(this.clipboard)) {
-            this.ngZone.runOutsideAngular(() => {
-                setTimeout(() => {
-                    const { preventDefault, isDefaultPrevented, clipboardContent, range, sender } = event;
-                    const workbookClipboardContent = clipboardContent || this.spreadsheetWidget.workbook._clipboard._internalContent;
-                    const eventArgs = {
-                        type,
-                        clipboardContent: { data: workbookClipboardContent.data, mergedCells: workbookClipboardContent.mergedCells },
-                        range,
-                        sender,
-                        preventDefault: preventDefault.bind(event),
-                        isDefaultPrevented: isDefaultPrevented.bind(event)
-                    };
-                    this.ngZone.run(() => this.clipboard.emit(eventArgs));
-                });
-            });
-        }
-    }
-    get options() {
-        return {
-            activeSheet: this.activeSheet,
-            ...{
-                sheets: this.sheetsInfo && structuredClone(this.sheetsInfo),
-                intl: {
-                    localeInfo: () => localeData(this.intl.localeId),
-                    parseDate: (value, fmt) => this.intl.parseDate(value, fmt),
-                    toString: (value, fmt) => this.intl.toString(value, fmt),
-                    format: (fmt, ...values) => this.intl.format(fmt, ...values)
-                }
-            },
-            columns: this.columns,
-            columnWidth: this.columnWidth,
-            defaultCellStyle: this.defaultCellStyle,
-            excel: this.excel,
-            headerHeight: this.headerHeight,
-            headerWidth: this.headerWidth,
-            images: this.images,
-            rowHeight: this.rowHeight,
-            rows: this.rows,
-            formulaBarInputRef: { current: this.formulaBarInputRef.current },
-            formulaCellInputRef: { current: this.formulaCellInputRef.current },
-            nameBoxRef: { current: this.nameBoxRef.current },
-            getIconHTMLString: (options) => {
-                if (typeof options === 'string' && options === 'k-i-caret-alt-down') {
-                    //the caret-alt-down filter button icon has different config coming from the common package and has to be handled separately
-                    options = { iconName: 'caret-alt-down', svgIcon: caretAltDownIcon };
-                }
-                const iconWrapper = this.container.createComponent(IconWrapperComponent);
-                iconWrapper.instance.name = options.iconName;
-                iconWrapper.instance.svgIcon = options.svgIcon;
-                iconWrapper.changeDetectorRef.detectChanges();
-                return iconWrapper.instance.element.nativeElement;
-            },
-            createFilterMenu: this.createFilterMenu.bind(this)
-        };
-    }
-    contextMenuItemsForTarget(target, unhide, unmerge) {
-        const commonItems = [{
-                text: this.messageFor('copy'),
-                icon: commandIcons.copy,
-                svgIcon: commandSVGIcons.copy,
-                id: 'copy'
-            }, {
-                text: this.messageFor('cut'),
-                icon: commandIcons.cut,
-                svgIcon: commandSVGIcons.cut,
-                id: 'cut'
-            }, {
-                text: this.messageFor('paste'),
-                icon: commandIcons.paste,
-                svgIcon: commandSVGIcons.paste,
-                id: 'paste',
-                disabled: true
-            }, {
-                separator: true
-            }, {
-                text: this.messageFor('mergeAll'),
-                icon: commandIcons.mergeAll,
-                svgIcon: commandSVGIcons.mergeAll,
-                id: 'mergeAll',
-            }, {
-                text: this.messageFor('mergeHorizontally'),
-                icon: commandIcons.mergeHorizontally,
-                svgIcon: commandSVGIcons.mergeHorizontally,
-                id: 'mergeHorizontally',
-            }, {
-                text: this.messageFor('mergeVertically'),
-                icon: commandIcons.mergeVertically,
-                svgIcon: commandSVGIcons.mergeVertically,
-                id: 'mergeVertically',
-            }, {
-                text: this.messageFor('unmerge'),
-                icon: commandIcons.unmerge,
-                svgIcon: commandSVGIcons.unmerge,
-                id: 'unmerge',
-                disabled: !unmerge
-            }, {
-                separator: true
-            }, {
-                text: this.messageFor('insertLink'),
-                icon: commandIcons.insertLink,
-                svgIcon: commandSVGIcons.insertLink,
-                id: 'insertLink'
-            }];
-        if (target === 'rowheader') {
-            commonItems.push({
-                separator: true
-            }, {
-                text: this.messageFor('addRowAbove'),
-                icon: commandIcons.addRowAbove,
-                svgIcon: commandSVGIcons.addRowAbove,
-                id: 'addRowAbove',
-            }, {
-                text: this.messageFor('addRowBelow'),
-                icon: commandIcons.addRowBelow,
-                svgIcon: commandSVGIcons.addRowBelow,
-                id: 'addRowBelow',
-            }, {
-                text: this.messageFor('deleteRow'),
-                icon: commandIcons.deleteRow,
-                svgIcon: commandSVGIcons.deleteRow,
-                id: 'deleteRow',
-            }, {
-                text: this.messageFor('hideRow'),
-                icon: commandIcons.hideRow,
-                svgIcon: commandSVGIcons.hideRow,
-                id: 'hideRow',
-            }, {
-                text: this.messageFor('unhideRow'),
-                icon: commandIcons.unhideRow,
-                svgIcon: commandSVGIcons.unhideRow,
-                id: 'unhideRow',
-                disabled: !unhide
-            });
-        }
-        if (target === 'columnheader') {
-            commonItems.push({
-                separator: true
-            }, {
-                text: this.messageFor('addColumnLeft'),
-                icon: commandIcons.addColumnLeft,
-                svgIcon: commandSVGIcons.addColumnLeft,
-                id: 'addColumnLeft',
-            }, {
-                text: this.messageFor('addColumnRight'),
-                icon: commandIcons.addColumnRight,
-                svgIcon: commandSVGIcons.addColumnRight,
-                id: 'addColumnRight',
-            }, {
-                text: this.messageFor('deleteColumn'),
-                icon: commandIcons.deleteColumn,
-                svgIcon: commandSVGIcons.deleteColumn,
-                id: 'deleteColumn',
-            }, {
-                text: this.messageFor('hideColumn'),
-                icon: commandIcons.hideColumn,
-                svgIcon: commandSVGIcons.hideColumn,
-                id: 'hideColumn',
-            }, {
-                text: this.messageFor('unhideColumn'),
-                icon: commandIcons.unhideColumn,
-                svgIcon: commandSVGIcons.unhideColumn,
-                id: 'unhideColumn',
-                disabled: !unhide
-            });
-        }
-        return commonItems;
-    }
-    openLinkDialog() {
-        const hasLink = isPresent(this.currentRange?.link());
-        const dialogSettings = {
-            appendTo: this.spreadsheetService.dialogContainer,
-            title: this.localization.get('insertLink'),
-            content: InsertLinkDialogComponent,
-            actions: [{
-                    text: this.localization.get('dialogInsert'),
-                    themeColor: 'primary'
-                }, {
-                    text: this.localization.get('dialogCancel')
-                },
-                'spacer', {
-                    text: this.localization.get('dialogRemoveLink'),
-                    themeColor: 'primary',
-                    fillMode: 'clear',
-                    cssClass: hasLink ? '' : 'k-disabled'
-                }],
-            actionsLayout: 'start',
-            width: 400,
-            autoFocusedElement: '.k-textbox > .k-input-inner'
-        };
-        const dialog = this.dialogService.open(dialogSettings);
-        const dialogInstance = dialog.dialog.instance;
-        const dialogContent = dialog.content.instance;
-        if (hasLink) {
-            dialogContent.setData({ link: this.currentRange?.link() });
-        }
-        dialogInstance.action.pipe(take(1)).subscribe((event) => {
-            if (event.text === this.localization.get('dialogCancel')) {
-                return;
-            }
-            let link = null;
-            if (event.text === this.localization.get('dialogInsert')) {
-                link = dialogContent.urlLink || null;
-            }
-            this.spreadsheetService.spreadsheet.executeCommand({
-                command: 'HyperlinkCommand',
-                options: { link }
-            });
-        });
-    }
-    configureSheets = (spreadsheet) => {
-        if (!this.sheetsInfo) {
-            this.ngZone.run(() => {
-                const defaultSheetDescriptors = mapToSheetDescriptor([spreadsheet?.activeSheet()]);
-                this._sheetsInfo = [{
-                        text: this.spreadsheetService.currentActiveSheet,
-                        first: true, last: true,
-                        state: 'visible',
-                        ...defaultSheetDescriptors,
-                        sheetActions: getSheetActions(defaultSheetDescriptors).map(item => ({ ...item, text: this.messageFor(item.messageKey) }))
-                    }];
-            });
-        }
-    };
-    registerEditors() {
-        registerEditor('_validation_list', () => {
-            return {
-                edit: (options) => {
-                    this.closePopup();
-                    this.popupRef = this.popupService.open({
-                        anchor: options.view.element.querySelector('.k-spreadsheet-editor-button'),
-                        content: ListEditorComponent,
-                        popupAlign: options.alignLeft ? { horizontal: 'right', vertical: 'top' } : { horizontal: 'left', vertical: 'top' },
-                        anchorAlign: options.alignLeft ? { horizontal: 'right', vertical: 'bottom' } : { horizontal: 'left', vertical: 'bottom' },
-                        popupClass: 'k-spreadsheet-list-popup'
-                    });
-                    const list = this.popupRef.content.instance;
-                    list.itemSelect.subscribe((item) => {
-                        this.closePopup();
-                        const itemValue = item.value;
-                        if (isPresent(itemValue)) {
-                            options.callback(itemValue);
-                        }
-                    });
-                    list.close.subscribe(() => {
-                        this.closePopup();
-                    });
-                    const items = options.validation.from.value;
-                    const data = [];
-                    const add = (el) => { data.push({ value: el }); };
-                    if (items instanceof Matrix) {
-                        items.each(add, false);
-                    }
-                    else {
-                        (items + "").split(/\s*,\s*/).forEach(add);
-                    }
-                    list.data = data;
-                },
-                icon: { iconName: 'caret-alt-down', svgIcon: caretAltDownIcon }
-            };
-        });
-        registerEditor('_validation_date', () => {
-            return {
-                edit: (options) => {
-                    this.closePopup();
-                    this.popupRef = this.popupService.open({
-                        anchor: options.view.element.querySelector('.k-spreadsheet-editor-button'),
-                        content: CalendarComponent,
-                        popupAlign: options.alignLeft ? { horizontal: 'right', vertical: 'top' } : { horizontal: 'left', vertical: 'top' },
-                        anchorAlign: options.alignLeft ? { horizontal: 'right', vertical: 'bottom' } : { horizontal: 'left', vertical: 'bottom' }
-                    });
-                    const calendar = this.popupRef.content.instance;
-                    calendar.valueChange.subscribe((value) => {
-                        this.closePopup();
-                        if (!options.range.format()) {
-                            options.range.format('yyyy-mm-dd');
-                        }
-                        options.callback(dateToSerial(value));
-                    });
-                    const date = options.range.value();
-                    calendar.value = this.createDate(date);
-                    const sheet = options.range.sheet();
-                    const currenValidation = options.validation;
-                    if (currenValidation) {
-                        let min = calendar.min;
-                        let max = calendar.max;
-                        const fromValidation = currenValidation.from;
-                        const toValidation = currenValidation.to;
-                        if (/^(?:greaterThan|between)/.test(currenValidation.comparerType)) {
-                            if (this.isValidFormula(fromValidation)) {
-                                min = this.createDate(fromValidation, sheet);
-                            }
-                            else {
-                                min = this.createDate(fromValidation.value);
-                            }
-                        }
-                        if (currenValidation.comparerType === 'between') {
-                            if (this.isValidFormula(toValidation)) {
-                                max = this.createDate(toValidation, sheet);
-                            }
-                            else {
-                                max = this.createDate(currenValidation.to.value);
-                            }
-                        }
-                        if (currenValidation.comparerType === 'lessThan' || currenValidation.comparerType === 'lessThanOrEqualTo') {
-                            if (this.isValidFormula(fromValidation)) {
-                                max = this.createDate(fromValidation, sheet);
-                            }
-                            else {
-                                max = this.createDate(currenValidation.from.value);
-                            }
-                        }
-                        calendar.disabledDates = (date) => {
-                            let from;
-                            let to;
-                            if (fromValidation && this.isValidFormula(fromValidation)) {
-                                from = sheet.range(fromValidation.value.row, fromValidation.value.col).value();
-                            }
-                            else {
-                                from = fromValidation ? fromValidation.value | 0 : 0;
-                            }
-                            if (toValidation && this.isValidFormula(toValidation)) {
-                                to = sheet.range(toValidation.value.row, toValidation.value.col).value();
-                            }
-                            else {
-                                to = toValidation ? toValidation.value | 0 : 0;
-                            }
-                            date = dateToSerial(date) || 0;
-                            return !validation.validationComparers[currenValidation.comparerType](date, from, to);
-                        };
-                        calendar.min = min;
-                        calendar.max = max;
-                    }
-                    else {
-                        calendar.disabledDates = null;
-                        calendar.min = calendar.max = null;
-                    }
-                },
-                icon: { iconName: 'calendar', svgIcon: calendarIcon }
-            };
-        });
-        this.registerCustomEditors();
-    }
-    registerCustomEditors() {
-        if (!this.cellEditors?.length) {
-            return;
-        }
-        this.cellEditors.forEach((editor) => this.registerCustomEditor(editor));
-    }
-    registerCustomEditor(editor) {
-        registerEditor(editor.name, () => ({
-            edit: (options) => this.openCustomEditorPopup(editor, options),
-            icon: { iconName: editor.icon, svgIcon: editor.svgIcon }
-        }));
-    }
-    openCustomEditorPopup(editor, options) {
-        this.closePopup();
-        this.popupRef = this.popupService.open({
-            anchor: options.view.element.querySelector('.k-spreadsheet-editor-button'),
-            content: editor.component,
-            popupAlign: options.alignLeft ? { horizontal: 'right', vertical: 'top' } : { horizontal: 'left', vertical: 'top' },
-            anchorAlign: options.alignLeft ? { horizontal: 'right', vertical: 'bottom' } : { horizontal: 'left', vertical: 'bottom' }
-        });
-        const componentInstance = this.popupRef.content.instance;
-        editor.actions.forEach(action => {
-            const actionStream = componentInstance[action.name];
-            actionStream?.subscribe((args) => {
-                const eventArgs = { originalEvent: args, ...options };
-                action.handler?.apply(componentInstance, [eventArgs]);
-            });
-        });
-    }
-    isValidFormula(validation) {
-        const formula = calc.runtime.Formula;
-        return validation instanceof formula && rowAndColPresent(validation.value);
-    }
-    createDate(validation, sheet) {
-        return new Date(serialToDate(isPresent(sheet) ? sheet.range(validation.value.row, validation.value.col).value() : validation));
-    }
-    createFilterMenu(options) {
-        this.closePopup();
-        this.currentFilterOptions = options;
-        if (this.filterMenuOpened) {
-            this.filterMenuOpened = false;
-            return {
-                bind: () => { },
-                openFor: () => { },
-                close: () => { },
-                destroy: () => { }
-            };
-        }
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            const childItems = this.extractColumnFilterValues(options.range, options.column);
-            const parentItem = {
-                text: this.messageFor('filterMenuAll'),
-                value: null,
-                checked: childItems.every(i => i.checked),
-                items: childItems
-            };
-            this.rangeFilterValuesList = [parentItem];
-            this.checkedKeys = [parentItem, ...childItems].filter(i => i.checked).map(i => i.text);
-        });
-        this.filterConditionsList = [
-            { type: 'none', comparerType: 'none', comparer: 'none', text: this.messageFor('filterNoneOperator') },
-            { type: 'string', comparerType: 'string_contains', comparer: 'contains', text: this.messageFor('filterContainsOperator') },
-            { type: 'string', comparerType: 'string_doesnotcontain', comparer: 'doesnotcontain', text: this.messageFor('filterNotContainsOperator') },
-            { type: 'string', comparerType: 'string_startswith', comparer: 'startswith', text: this.messageFor('filterStartsWithOperator') },
-            { type: 'string', comparerType: 'string_endswith', comparer: 'endswith', text: this.messageFor('filterEndsWithOperator') },
-            { type: 'string', comparerType: 'string_matches', comparer: 'eq', text: this.messageFor('filterMatchesOperator') },
-            { type: 'string', comparerType: 'string_doesnotmatch', comparer: 'neq', text: this.messageFor('filterNotMatchesOperator') },
-            { type: 'date', comparerType: 'date_eq', comparer: 'eq', text: this.messageFor('filterDateEqOperator') },
-            { type: 'date', comparerType: 'date_neq', comparer: 'neq', text: this.messageFor('filterDateNotEqOperator') },
-            { type: 'date', comparerType: 'date_lt', comparer: 'lt', text: this.messageFor('filterBeforeOperator') },
-            { type: 'date', comparerType: 'date_gt', comparer: 'gt', text: this.messageFor('filterAfterOperator') },
-            { type: 'number', comparerType: 'number_eq', comparer: 'eq', text: this.messageFor('filterEqOperator') },
-            { type: 'number', comparerType: 'number_neq', comparer: 'neq', text: this.messageFor('filterNotEqOperator') },
-            { type: 'number', comparerType: 'number_gte', comparer: 'gte', text: this.messageFor('filterGteOperator') },
-            { type: 'number', comparerType: 'number_gt', comparer: 'gt', text: this.messageFor('filterGtOperator') },
-            { type: 'number', comparerType: 'number_lte', comparer: 'lte', text: this.messageFor('filterLteOperator') },
-            { type: 'number', comparerType: 'number_lt', comparer: 'lt', text: this.messageFor('filterLtOperator') }
-        ];
-        const currentSheetFilter = this.spreadsheetWidget.activeSheet().filter();
-        const columnFilter = currentSheetFilter?.columns?.find((col) => col.index === options.column);
-        if (columnFilter) {
-            const filter = columnFilter.filter.toJSON();
-            if (filter.filter === 'custom') {
-                const valueType = typeof filter.criteria[0].value === 'object' ? 'date' : typeof filter.criteria[0].value;
-                this.selectedCondition = this.filterConditionsList.find(c => (c.comparer === filter?.criteria?.[0]?.operator) && (c.type === valueType));
-                this.conditionValue = filter?.criteria?.[0]?.value;
-            }
-            else {
-                this.checkedKeys = filter.values;
-            }
-        }
-        else {
-            this.selectedCondition = this.filterConditionsList[0];
-        }
-        return {
-            bind: (_eventName, _handler) => { },
-            openFor: (anchor) => {
-                this.popupRef = this.popupService.open({
-                    anchor,
-                    content: this.filterMenuTemplate,
-                    popupAlign: { horizontal: 'left', vertical: 'top' },
-                    anchorAlign: { horizontal: 'left', vertical: 'bottom' },
-                    popupClass: 'k-spreadsheet-filter-menu k-column-menu k-group k-reset'
-                });
-                this.popupPositionChangeSub = this.popupRef.popupPositionChange.subscribe(({ offset }) => {
-                    if (offset.top === 0 && offset.left === 0) {
-                        this.closePopup();
-                        this.filterMenuOpened = false;
-                    }
-                });
-                this.filterMenuOpened = true;
-            },
-            close: () => { this.closePopup(); this.filterMenuOpened = false; },
-            destroy: () => { this.closePopup(); this.filterMenuOpened = false; }
-        };
-    }
-    extractColumnFilterValues(range, column) {
-        const results = [];
-        const sheet = range.sheet();
-        const columnRange = range.column(column).resize({ top: 1 });
-        const blanksMessage = this.localization.get('blankValues');
-        columnRange.forEachCell((rowIndex, _colIndex, cellData) => {
-            const isVisible = !sheet.isHiddenRow(rowIndex);
-            let cellValue = cellData.value;
-            const unformattedValue = cellValue;
-            let displayText;
-            let valueType;
-            if (cellValue === undefined) {
-                valueType = 'blank';
-            }
-            else if (cellData.format) {
-                valueType = formatting.type(cellValue, cellData.format);
-            }
-            else {
-                valueType = typeof cellValue;
-            }
-            if (cellValue !== null && cellData.format) {
-                displayText = formatting.text(cellValue, cellData.format);
-            }
-            else {
-                displayText = valueType === 'blank' ? blanksMessage : cellValue;
-            }
-            if (valueType === 'percent' || valueType === 'currency') {
-                valueType = 'number';
-            }
-            if (valueType === 'date') {
-                cellValue = serialToDate(cellValue);
-            }
-            results.push({
-                dataType: valueType,
-                value: cellValue,
-                text: displayText,
-                checked: isVisible,
-                unformattedValue
-            });
-        });
-        const uniqueValuesSorted = this.removeDuplicateValues(results).sort(this.compareFilterValues);
-        return uniqueValuesSorted;
-    }
-    removeDuplicateValues(values) {
-        const hash = new Map();
-        const result = [];
-        for (const item of values) {
-            const existingItem = hash.get(item.value);
-            if (!existingItem) {
-                hash.set(item.value, item);
-                result.push(item);
-            }
-            else if (!existingItem.checked && item.checked) {
-                existingItem.checked = true;
-            }
-        }
-        return result;
-    }
-    compareFilterValues(a, b) {
-        if (a.dataType === b.dataType) {
-            switch (a.dataType) {
-                case 'number':
-                    return a.value - b.value;
-                case 'date':
-                    return a.value.getTime() - b.value.getTime();
-                case 'blank':
-                    return 0;
-                default:
-                    return String(a.value).localeCompare(String(b.value));
-            }
-        }
-        if (a.dataType === 'blank')
-            return -1;
-        if (b.dataType === 'blank')
-            return 1;
-        if (a.dataType === 'number')
-            return -1;
-        if (b.dataType === 'number')
-            return 1;
-        if (a.dataType === 'date')
-            return -1;
-        if (b.dataType === 'date')
-            return 1;
-        return 0;
-    }
-    containsItem(item) {
-        return this.checkedKeys.indexOf(item.text) > -1;
-    }
-    findItemByText(items, text) {
-        for (const item of items) {
-            if (item.text === text) {
-                return item;
-            }
-            if (item.items && item.items.length > 0) {
-                const found = this.findItemByText(item.items, text);
-                if (found) {
-                    return found;
-                }
-            }
-        }
-        return null;
-    }
-    isIndeterminate(items = []) {
-        let idx = 0;
-        let item;
-        while ((item = items[idx])) {
-            if (this.isIndeterminate(item.items) || this.containsItem(item)) {
-                return true;
-            }
-            idx += 1;
-        }
-        return false;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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 }, { token: i7.PopupService }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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", cellEditors: "cellEditors", images: "images", excel: "excel" }, outputs: { change: "change", formatChange: "formatChange", selectionChange: "selectionChange", excelExport: "excelExport", excelImport: "excelImport", activeSheetChange: "activeSheetChange", clipboard: "clipboard" }, 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 }, { propertyName: "filterMenuTemplate", first: true, predicate: ["filterMenuTemplate"], 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."
-          background="Background color"
-          i18n-color="kendo.spreadsheet.color|The title of the tool that changes the text font color."
-          color="Font color"
-          i18n-bold="kendo.spreadsheet.bold|The title of the Bold tool."
-          bold="Bold"
-          i18n-dataValidation="kendo.spreadsheet.dataValidation|The title of the Data Validation tool."
-          dataValidation="Data Validation"
-          i18n-filter="kendo.spreadsheet.filter|The title of the Filter tool."
-          filter="Filter"
-          i18n-validationCellRange="kendo.spreadsheet.validationCellRange|The text of the Cell Range label in the data validation dialog."
-          validationCellRange="Cell Range"
-          i18n-validationCriteria="kendo.spreadsheet.validationCriteria|The text of the Criteria dropdown list label in the data validation dialog."
-          validationCriteria="Criteria"
-          i18n-validationMinValue="kendo.spreadsheet.validationMinValue|The text of the Min value label in the data validation dialog."
-          validationMinValue="Min"
-          i18n-validationMaxValue="kendo.spreadsheet.validationMaxValue|The text of the Max value label in the data validation dialog."
-          validationMaxValue="Max"
-          i18n-validationStartValue="kendo.spreadsheet.validationStartValue|The text of the Start value label in the data validation dialog."
-          validationStartValue="Start"
-          i18n-validationEndValue="kendo.spreadsheet.validationEndValue|The text of the End value label in the data validation dialog."
-          validationEndValue="End"
-          i18n-validationValue="kendo.spreadsheet.validationValue|The text of the Value label in the data validation dialog."
-          validationValue="Text"
-          i18n-validationShowListButtonCheckbox="kendo.spreadsheet.validationShowListButtonCheckbox|The text for the Show list button checkbox label in the data validation dialog."
-          validationShowListButtonCheckbox="Display button to show list"
-          i18n-validationOnInvalidData="kendo.spreadsheet.validationOnInvalidData|The text for the On invalid data label in the data validation dialog."
-          validationOnInvalidData="On invalid data"
-          i18n-validationShowDateButtonCheckbox="kendo.spreadsheet.validationShowDateButtonCheckbox|The text for the Show date button checkbox label in the data validation dialog."
-          validationShowDateButtonCheckbox="Display button to show Calendar"
-          i18n-validationRejectInput="kendo.spreadsheet.validationRejectInput|The text for the Reject input radio button label in the data validation dialog."
-          validationRejectInput="Reject input"
-          i18n-validationShowWarning="kendo.spreadsheet.validationShowWarning|The text for the Show warning radio button label in the data validation dialog."
-          validationShowWarning="Show warning"
-          i18n-validationHintTitle="kendo.spreadsheet.validationHintTitle|The text for the Custom hint title input label in the data validation dialog."
-          validationHintTitle="Custom hint title"
-          i18n-validationHintMessage="kendo.spreadsheet.validationHintMessage|The text for the Custom hint input label in the data validation dialog."
-          validationHintMessage="Custom hint"
-          i18n-validationShowHint="kendo.spreadsheet.validationShowHint|The text for the Show hint radio button label in the data validation dialog."
-          validationShowHint="Show hint"
-          i18n-validationIgnoreBlankCheckbox="kendo.spreadsheet.validationIgnoreBlankCheckbox|The text for the Ignore blank checkbox label in the data validation dialog."
-          validationIgnoreBlankCheckbox="Ignore blank"
-          i18n-validationComparer="kendo.spreadsheet.validationComparer|The text of the Comparer dropdown list label in the data validation dialog."
-          validationComparer="Comparer"
-          i18n-anyValueValidationCriteria="kendo.spreadsheet.anyValueValidationCriteria|The text of the Any value validation criteria"
-          anyValueValidationCriteria="Any value"
-          i18n-numberValidationCriteria="kendo.spreadsheet.numberValidationCriteria|The text of the Number validation criteria"
-          numberValidationCriteria="Number"
-          i18n-textValidationCriteria="kendo.spreadsheet.textValidationCriteria|The text of the Text validation criteria"
-          textValidationCriteria="Text"
-          i18n-dateValidationCriteria="kendo.spreadsheet.dateValidationCriteria|The text of the Date validation criteria"
-          dateValidationCriteria="Date"
-          i18n-customFormulaValidationCriteria="kendo.spreadsheet.customFormulaValidationCriteria|The text of the Custom formula validation criteria"
-          customFormulaValidationCriteria="Custom Formula"
-          i18n-listValidationCriteria="kendo.spreadsheet.listValidationCriteria|The text of the List validation criteria"
-          listValidationCriteria="List"
-          i18n-greaterThanValidationComparer="kendo.spreadsheet.greaterThanValidationComparer|The text of the greater than validation comparer"
-          greaterThanValidationComparer="greater than"
-          i18n-lessThanValidationComparer="kendo.spreadsheet.lessThanValidationComparer|The text of the less than validation comparer"
-          lessThanValidationComparer="less than"
-          i18n-betweenValidationComparer="kendo.spreadsheet.betweenValidationComparer|The text of the between validation comparer"
-          betweenValidationComparer="between"
-          i18n-notBetweenValidationComparer="kendo.spreadsheet.notBetweenValidationComparer|The text of the not between validation comparer"
-          notBetweenValidationComparer="not between"
-          i18n-equalToValidationComparer="kendo.spreadsheet.equalToValidationComparer|The text of the equal to validation comparer"
-          equalToValidationComparer="equal to"
-          i18n-notEqualToValidationComparer="kendo.spreadsheet.notEqualToValidationComparer|The text of the not equal to validation comparer"
-          notEqualToValidationComparer="not equal to"
-          i18n-greaterThanOrEqualToValidationComparer="kendo.spreadsheet.greaterThanOrEqualToValidationComparer|The text of the greater than on equal to validation comparer"
-          greaterThanOrEqualToValidationComparer="greater than or equal to"
-          i18n-lessThanOrEqualToValidationComparer="kendo.spreadsheet.lessThanOrEqualToValidationComparer|The text of the less than on equal to validation comparer"
-          lessThanOrEqualToValidationComparer="less than or equal to"
-          i18n-italic="kendo.spreadsheet.italic|The title of the Italic tool."
-          italic="Italic"
-          i18n-underline="kendo.spreadsheet.underline|The title of the Underline tool."
-          underline="Underline"
-          i18n-loadFile="kendo.spreadsheet.loadFile|The title of the Load File tool."
-          loadFile="Open..."
-          i18n-saveFile="kendo.spreadsheet.saveFile|The title of the Save File tool."
-          saveFile="Export..."
-          i18n-format="kendo.spreadsheet.format|The text of the Format tool."
-          format="Custom format..."
-          i18n-fontFamily="kendo.spreadsheet.fontFamily|The text of the Font Family tool."
-          fontFamily="Font"
-          i18n-fontSize="kendo.spreadsheet.fontSize|The text of the Font Size tool."
-          fontSize="Font size"
-          i18n-home="kendo.spreadsheet.home|The text of the Home toolbar tab."
-          home="Home"
-          i18n-file="kendo.spreadsheet.file|The text of the File toolbar tab."
-          file="File"
-          i18n-insert="kendo.spreadsheet.insert|The text of the Insert toolbar tab."
-          insert="Insert"
-          i18n-formatTab="kendo.spreadsheet.formatTab|The text of the Format toolbar tab."
-          formatTab="Format"
-          i18n-dataTab="kendo.spreadsheet.dataTab|The text of the Data toolbar tab."
-          dataTab="Data"
-          i18n-view="kendo.spreadsheet.view|The text of the View toolbar tab."
-          view="View"
-          i18n-undo="kendo.spreadsheet.undo|The title of the Undo tool."
-          undo="Undo"
-          i18n-redo="kendo.spreadsheet.redo|The title of the Redo tool."
-          redo="Redo"
-          i18n-gridLines="kendo.spreadsheet.gridLines|The title of the Grid Lines tool."
-          gridLines="Toggle grid lines"
-          i18n-addColumnLeft="kendo.spreadsheet.addColumnLeft|The title of the tool that adds new column before currently selected column."
-          addColumnLeft="Add column left"
-          i18n-addColumnRight="kendo.spreadsheet.addColumnRight|The title of the tool that adds new column after currently selected column."
-          addColumnRight="Add column right"
-          i18n-addRowBelow="kendo.spreadsheet.addRowBelow|The title of the tool that adds new row below currently selected row."
-          addRowBelow="Add row below"
-          i18n-addRowAbove="kendo.spreadsheet.addRowAbove|The title of the tool that adds new row above currently selected row."
-          addRowAbove="Add row above"
-          i18n-deleteColumn="kendo.spreadsheet.deleteColumn|The title of the tool that deletes a column."
-          deleteColumn="Delete column"
-          i18n-deleteRow="kendo.spreadsheet.deleteRow|The title of the tool that deletes a row."
-          deleteRow="Delete row"
-          i18n-wrap="kendo.spreadsheet.wrap|The title of the Text Wrap tool."
-          wrap="Text wrap"
-          i18n-align="kendo.spreadsheet.align|The title of the Text Align tool."
-          align="Align"
-          i18n-alignHorizontal="kendo.spreadsheet.alignHorizontal|The title of the Text Align Horizontal tool."
-          alignHorizontal="Align horizontally"
-          i18n-alignVertical="kendo.spreadsheet.alignVertical|The title of the Text Align Vertical tool."
-          alignVertical="Align vertically"
-          i18n-alignLeft="kendo.spreadsheet.alignLeft|The title of the Text Align Left tool."
-          alignLeft="Align Left"
-          i18n-alignCenter="kendo.spreadsheet.alignCenter|The title of the Text Align Center tool."
-          alignCenter="Align Center"
-          i18n-alignRight="kendo.spreadsheet.alignRight|The title of the Text Align Right tool."
-          alignRight="Align Right"
-          i18n-alignJustify="kendo.spreadsheet.alignJustify|The title of the Text Align Justify tool."
-          alignJustify="Align Justify"
-          i18n-alignTop="kendo.spreadsheet.alignTop|The title of the Text Align Top tool."
-          alignTop="Align Top"
-          i18n-alignMiddle="kendo.spreadsheet.alignMiddle|The title of the Text Align Middle tool."
-          alignMiddle="Align Middle"
-          i18n-alignBottom="kendo.spreadsheet.alignBottom|The title of the Text Align Bottom tool."
-          alignBottom="Align Bottom"
-          i18n-merge="kendo.spreadsheet.merge|The title of the Cells Merge tool."
-          merge="Merge"
-          i18n-mergeAll="kendo.spreadsheet.mergeAll|The title of the Merge all tool."
-          mergeAll="Merge all"
-          i18n-mergeHorizontally="kendo.spreadsheet.mergeHorizontally|The title of the Merge horizontally tool."
-          mergeHorizontally="Merge horizontally"
-          i18n-mergeVertically="kendo.spreadsheet.mergeVertically|The title of the Merge vertically tool."
-          mergeVertically="Merge vertically"
-          i18n-unmerge="kendo.spreadsheet.unmerge|The title of the Unmerge tool."
-          unmerge="Unmerge"
-          i18n-insertLink="kendo.spreadsheet.insertLink|The title of the tool that inserts a link."
-          insertLink="Insert link"
-          i18n-decreaseDecimal="kendo.spreadsheet.decreaseDecimal|The title of the tool that decreases decimals."
-          decreaseDecimal="Decrease decimal"
-          i18n-increaseDecimal="kendo.spreadsheet.increaseDecimal|The title of the tool that increases decimals."
-          increaseDecimal="Increase decimal"
-          i18n-increaseFontSize="kendo.spreadsheet.increaseFontSize|The title of the tool that increases the cell font size."
-          increaseFontSize="Increase font size"
-          i18n-decreaseFontSize="kendo.spreadsheet.decreaseFontSize|The title of the tool that decreases the cell font size."
-          decreaseFontSize="Decrease font size"
-          i18n-dialogApply="kendo.spreadsheet.dialogApply|The text of the **Apply** button in all Spreadsheet dialogs."
-          dialogApply="Apply"
-          i18n-dialogCancel="kendo.spreadsheet.dialogCancel|The text of the **Cancel** button in all Spreadsheet dialogs."
-          dialogCancel="Cancel"
-          i18n-dialogDelete="kendo.spreadsheet.dialogDelete|The text of the **Delete** button in the Delete sheet dialog."
-          dialogDelete="Delete"
-          i18n-dialogRename="kendo.spreadsheet.dialogRename|The text of the **Rename** button in the Rename sheet dialog."
-          dialogRename="Rename"
-          i18n-dialogInsert="kendo.spreadsheet.dialogInsert|The text of the **Insert** button in all Spreadsheet dialogs."
-          dialogInsert="Insert"
-          i18n-dialogRemove="kendo.spreadsheet.dialogRemove|The text of the **Remove** button in all Spreadsheet dialogs."
-          dialogRemove="Remove"
-          i18n-dialogRemoveLink="kendo.spreadsheet.dialogRemoveLink|The text of the **Remove link** button in the Link tool dialog."
-          dialogRemoveLink="Remove link"
-          i18n-rename="kendo.spreadsheet.rename|The title of the Rename sheet dialog."
-          rename="Rename Sheet"
-          i18n-delete="kendo.spreadsheet.delete|The title of the Delete sheet dialog."
-          delete="Delete Sheet"
-          i18n-nameBox="kendo.spreadsheet.nameBox|The title of the Name Box input."
-          nameBox="Name Box"
-          i18n-formulaInput="kendo.spreadsheet.formulaInput|The title of the Formula input."
-          formulaInput="Formula Input"
-          i18n-addSheet="kendo.spreadsheet.addSheet|The title of the Add new sheet button."
-          addSheet="Add New Sheet"
-          i18n-sheetsMenu="kendo.spreadsheet.sheetsMenu|The title of the Sheets menu button."
-          sheetsMenu="All Sheets"
-          i18n-openUnsupported="kendo.spreadsheet.openUnsupported|The content of the dialog that warns about an unsupported file type."
-          openUnsupported="Unsupported format. Please select an .xlsx file."
-          i18n-modifyMerged="kendo.spreadsheet.modifyMerged|The content of the dialog that warns about modifying a merged cell."
-          modifyMerged="Cannot change part of a merged cell."
-          i18n-cannotModifyDisabled="kendo.spreadsheet.cannotModifyDisabled|The content of the dialog that warns about modifying a disabled cell."
-          cannotModifyDisabled="Cannot modify disabled cells."
-          i18n-dialogOk="kendo.spreadsheet.dialogOk|The text of the **OK** dialog button."
-          dialogOk="OK"
-          i18n-dialogError="kendo.spreadsheet.dialogError|The title of an error dialog."
-          dialogError="Error"
-          i18n-duplicateSheetName="kendo.spreadsheet.duplicateSheetName|The content of the dialog that warns about duplicated sheet name."
-          duplicateSheetName="There is an existing sheet with this name. Please enter another name."
-          i18n-copy="kendo.spreadsheet.copy|The Copy command text."
-          copy="Copy"
-          i18n-cut="kendo.spreadsheet.cut|The Cut command text."
-          cut="Cut"
-          i18n-paste="kendo.spreadsheet.paste|The Paste command text."
-          paste="Paste (use Ctrl/⌘ + V)"
-          i18n-hideRow="kendo.spreadsheet.hideRow|The Hide row command text."
-          hideRow="Hide"
-          i18n-unhideRow="kendo.spreadsheet.unhideRow|The Unhide row command text."
-          unhideRow="Unhide"
-          i18n-hideColumn="kendo.spreadsheet.hideColumn|The Hide column command text."
-          hideColumn="Hide"
-          i18n-unhideColumn="kendo.spreadsheet.unhideColumn|The Unhide column command text."
-          unhideColumn="Unhide"
-          i18n-sheetDelete="kendo.spreadsheet.sheetDelete|The text of the Sheet menu Delete option."
-          sheetDelete="Delete"
-          i18n-sheetRename="kendo.spreadsheet.sheetRename|The text of the Sheet menu Rename option."
-          sheetRename="Rename"
-          i18n-sheetDuplicate="kendo.spreadsheet.sheetDuplicate|The text of the Sheet menu Duplicate option."
-          sheetDuplicate="Duplicate"
-          i18n-sheetHide="kendo.spreadsheet.sheetHide|The text of the Sheet menu Hide option."
-          sheetHide="Hide"
-          i18n-sheetMoveLeft="kendo.spreadsheet.sheetMoveLeft|The text of the Sheet menu Move Left option."
-          sheetMoveLeft="Move Left"
-          i18n-sheetMoveRight="kendo.spreadsheet.sheetMoveRight|The text of the Sheet menu Move Right option."
-          sheetMoveRight="Move Right"
-          i18n-invalidNameError="kendo.spreadsheet.invalidNameError|The content of the dialog that warns about invalid name input."
-          invalidNameError="{{ 'Invalid name: {inputValue}' }}"
-          i18n-cantSortMixedCells="kendo.spreadsheet.cantSortMixedCells|The content of the dialog that warns about sorting range containing cells of mixed shapes."
-          cantSortMixedCells="Cannot sort range containing cells of mixed shapes"
-          i18n-cantSortNullRef="kendo.spreadsheet.cantSortNullRef|The content of the dialog that warns about sorting incorrect (empty) range."
-          cantSortNullRef="Cannot sort empty selection"
-          i18n-cantSortMultipleSelection="kendo.spreadsheet.cantSortMultipleSelection|The content of the dialog that warns about sorting multiple range selection."
-          cantSortMultipleSelection="Cannot sort multiple selection"
-          i18n-filterApply="kendo.spreadsheet.filterApply|The text of the **Apply** button in the filter menu."
-          filterApply="Apply"
-          i18n-filterClear="kendo.spreadsheet.filterClear|The text of the **Clear** button in the filter menu."
-          filterClear="Clear"
-          i18n-filterMenuAll="kendo.spreadsheet.filterMenuAll|The text of the **All** grouping item in the filter menu."
-          filterMenuAll="All"
-          i18n-blankValues="kendo.spreadsheet.blankValues|The text for the blank (empty) values."
-          blankValues="Blank"
-          i18n-filterNoneOperator="kendo.spreadsheet.filterNoneOperator|The text for the **none** filter operator."
-          filterNoneOperator="None"
-          i18n-filterContainsOperator="kendo.spreadsheet.filterContainsOperator|The text of the **contains** filter operator"
-          filterContainsOperator="Text contains"
-          i18n-filterNotContainsOperator="kendo.spreadsheet.filterNotContainsOperator|The text of the **does not contain** filter operator"
-          filterNotContainsOperator="Text does not contain"
-          i18n-filterStartsWithOperator="kendo.spreadsheet.filterStartsWithOperator|The text of the **starts with** filter operator"
-          filterStartsWithOperator="Text starts with"
-          i18n-filterEndsWithOperator="kendo.spreadsheet.filterEndsWithOperator|The text of the **ends with** filter operator"
-          filterEndsWithOperator="Text ends with"
-          i18n-filterMatchesOperator="kendo.spreadsheet.filterMatchesOperator|The text of the **matches** filter operator"
-          filterMatchesOperator="Text matches"
-          i18n-filterNotMatchesOperator="kendo.spreadsheet.filterNotMatchesOperator|The text of the **does not match** filter operator"
-          filterNotMatchesOperator="Text does not match"
-          i18n-filterDateEqOperator="kendo.spreadsheet.filterDateEqOperator|The text of the **Date is** filter operator"
-          filterDateEqOperator="Date is"
-          i18n-filterDateNotEqOperator="kendo.spreadsheet.filterDateNotEqOperator|The text of the **Date is not** filter operator"
-          filterDateNotEqOperator="Date is not"
-          i18n-filterBeforeOperator="kendo.spreadsheet.filterBeforeOperator|The text of the **Date is before** filter operator"
-          filterBeforeOperator="Date is before"
-          i18n-filterAfterOperator="kendo.spreadsheet.filterAfterOperator|The text of the **Date is after** filter operator"
-          filterAfterOperator="Date is after"
-          i18n-filterEqOperator="kendo.spreadsheet.filterEqOperator|Sets the text for the **Equal (Is equal to)** filter operator."
-          filterEqOperator="Is equal to"
-          i18n-filterNotEqOperator="kendo.spreadsheet.filterNotEqOperator|Sets the text for the **Not equal (Is not equal to)** filter operator."
-          filterNotEqOperator="Is not equal to"
-          i18n-filterGteOperator="kendo.spreadsheet.filterGteOperator|The text of the **greater than or equal to** filter operator"
-          filterGteOperator="Is greater than or equal to"
-          i18n-filterGtOperator="kendo.spreadsheet.filterGtOperator|The text of the **greater than** filter operator"
-          filterGtOperator="Is greater than"
-          i18n-filterLteOperator="kendo.spreadsheet.filterLteOperator|The text of the **less than or equal to** filter operator"
-          filterLteOperator="Is less than or equal to"
-          i18n-filterLtOperator="kendo.spreadsheet.filterLtOperator|The text of the **less than** filter operator"
-          filterLtOperator="Is less than"
-          i18n-filterMenuConditionItem="kendo.spreadsheet.filterMenuConditionItem|The text of the **Filter by condition** menu item."
-          filterMenuConditionItem="Filter by condition"
-          i18n-filterMenuValueItem="kendo.spreadsheet.filterMenuValueItem|The text of the **Filter by value** menu item."
-          filterMenuValueItem="Filter by value"
-          i18n-sort="kendo.spreadsheet.sort|The title of the Sort ToolBar tool."
-          sort="Sort"
-          i18n-sortAsc="kendo.spreadsheet.sortAsc|The text of the **Sort range A to Z** option."
-          sortAsc="Sort range A to Z"
-          i18n-sortDesc="kendo.spreadsheet.sortDesc|The text of the **Sort range Z to A** option."
-          sortDesc="Sort range Z to A"
-          i18n-unsort="kendo.spreadsheet.unsort|The text of the **Unsort** option."
-          unsort="Unsort">
-        </ng-container>
-        <div class="k-spreadsheet-header">
-          <kendo-menu kendoSpreadsheetMenu (select)="onMenuItemSelect($event)">
-            @for (item of menuItems; track item) {
-              <kendo-menu-item [text]="item.text" [cssClass]="item.cssClass"></kendo-menu-item>
-            }
-          </kendo-menu>
-          @if (selectedMenuItem?.active && selectedMenuItem.id === 'file') {
-            <kendo-toolbar
-              [attr.aria-label]="messageFor('file')"
-              fillMode="flat"
-              class="k-spreadsheet-toolbar"
-              [overflow]="overflow">
-              <kendo-spreadsheet-load-file-tool></kendo-spreadsheet-load-file-tool>
-              <kendo-toolbar-button kendoSpreadsheetSaveFile></kendo-toolbar-button>
-            </kendo-toolbar>
-          }
-          @if (selectedMenuItem?.active && selectedMenuItem.id === 'home') {
-            <kendo-toolbar
-              [attr.aria-label]="messageFor('home')"
-              class="k-spreadsheet-toolbar"
-              fillMode="flat"
-              [overflow]="overflow">
-              <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-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 fillMode="flat">
-                <kendo-toolbar-button kendoSpreadsheetBold></kendo-toolbar-button>
-                <kendo-toolbar-button kendoSpreadsheetItalic></kendo-toolbar-button>
-                <kendo-toolbar-button kendoSpreadsheetUnderline></kendo-toolbar-button>
-              </kendo-toolbar-buttongroup>
-              <kendo-spreadsheet-forecolor-tool></kendo-spreadsheet-forecolor-tool>
-              <kendo-toolbar-separator></kendo-toolbar-separator>
-              <kendo-spreadsheet-backcolor-tool></kendo-spreadsheet-backcolor-tool>
-              <kendo-toolbar-separator></kendo-toolbar-separator>
-              <kendo-toolbar-dropdownbutton kendoSpreadsheetHorizontalTextAlign></kendo-toolbar-dropdownbutton>
-              <kendo-toolbar-dropdownbutton kendoSpreadsheetVerticalTextAlign></kendo-toolbar-dropdownbutton>
-              <kendo-toolbar-button kendoSpreadsheetTextWrap></kendo-toolbar-button>
-              <kendo-toolbar-separator></kendo-toolbar-separator>
-              <kendo-toolbar-dropdownbutton kendoSpreadsheetFormat></kendo-toolbar-dropdownbutton>
-            </kendo-toolbar>
-          }
-          @if (selectedMenuItem?.active && selectedMenuItem.id === 'insert') {
-            <kendo-toolbar
-              [attr.aria-label]="messageFor('insert')"
-              fillMode="flat"
-              class="k-spreadsheet-toolbar"
-              [overflow]="overflow">
-              <kendo-toolbar-button kendoSpreadsheetInsertLink></kendo-toolbar-button>
-              <kendo-toolbar-separator></kendo-toolbar-separator>
-              <kendo-toolbar-button kendoSpreadsheetAddColumnLeftButton></kendo-toolbar-button>
-              <kendo-toolbar-button kendoSpreadsheetAddColumnRightButton></kendo-toolbar-button>
-              <kendo-toolbar-button kendoSpreadsheetAddRowBelowButton></kendo-toolbar-button>
-              <kendo-toolbar-button kendoSpreadsheetAddRowAboveButton></kendo-toolbar-button>
-              <kendo-toolbar-separator></kendo-toolbar-separator>
-              <kendo-toolbar-button kendoSpreadsheetDeleteColumnButton></kendo-toolbar-button>
-              <kendo-toolbar-button kendoSpreadsheetDeleteRowButton></kendo-toolbar-button>
-            </kendo-toolbar>
-          }
-          @if (selectedMenuItem?.active && selectedMenuItem.id === 'format') {
-            <kendo-toolbar
-              [attr.aria-label]="messageFor('formatTab')"
-              fillMode="flat"
-              class="k-spreadsheet-toolbar"
-              [overflow]="overflow">
-              <kendo-toolbar-button kendoSpreadsheetDecreaseDecimal></kendo-toolbar-button>
-              <kendo-toolbar-button kendoSpreadsheetIncreaseDecimal></kendo-toolbar-button>
-            </kendo-toolbar>
-          }
-          @if (selectedMenuItem?.active && selectedMenuItem.id === 'view') {
-            <kendo-toolbar
-              [attr.aria-label]="messageFor('view')"
-              fillMode="flat"
-              class="k-spreadsheet-toolbar"
-              [overflow]="overflow">
-              <kendo-toolbar-dropdownbutton kendoSpreadsheetMerge></kendo-toolbar-dropdownbutton>
-              <kendo-toolbar-separator></kendo-toolbar-separator>
-              <kendo-toolbar-button kendoSpreadsheetGridLines></kendo-toolbar-button>
-            </kendo-toolbar>
-          }
-          @if (selectedMenuItem?.active && selectedMenuItem.id === 'data') {
-            <kendo-toolbar
-              [attr.aria-label]="messageFor('dataTab')"
-              fillMode="flat"
-              class="k-spreadsheet-toolbar"
-              [overflow]="overflow">
-              <kendo-toolbar-button kendoSpreadsheetDataValidation></kendo-toolbar-button>
-              <kendo-toolbar-separator></kendo-toolbar-separator>
-              <kendo-toolbar-button kendoSpreadsheetFilter></kendo-toolbar-button>
-              <kendo-toolbar-separator></kendo-toolbar-separator>
-              <kendo-toolbar-dropdownbutton kendoSpreadsheetSort></kendo-toolbar-dropdownbutton>
-            </kendo-toolbar>
-          }
-        </div>
-        <div class="k-spreadsheet-action-bar">
-          <div #nameBox kendoSpreadsheetNameBox [spreadsheetWidget]="spreadsheetWidget"></div>
-          <div class="k-spreadsheet-formula-bar">
-            <span class="k-separator k-separator-vertical"></span>
-            <kendo-icon-wrapper
-              name="formula-fx"
-              [svgIcon]="formulaFxIcon">
-            </kendo-icon-wrapper>
-            <span class="k-separator k-separator-vertical"></span>
-            <div
-              #formulaBar
-              kendoSpreadsheetFormulaInput
-              [formulaListMaxHeight]="formulaListMaxHeight"
-            class="k-textbox k-input k-input-md k-input-flat k-rounded-md"></div>
-          </div>
-        </div>
-        <div class="k-spreadsheet-view">
-          <div class="k-spreadsheet-fixed-container"></div>
-          <div class="k-spreadsheet-scroller">
-            <div class="k-spreadsheet-view-size"></div>
-          </div>
-          <div tabIndex="0" class="k-spreadsheet-clipboard" contentEditable="true"></div>
-          <div #formulaCell kendoSpreadsheetFormulaInput class="k-spreadsheet-cell-editor" data-role="formulainput"></div>
-        </div>
-        <div class="k-spreadsheet-sheets-bar"
-          kendoSpreadsheetSheetsBar
-          [sheets]="sheetsInfo"
-          [sheetDescriptors]="sheets">
-        </div>
-        <ng-container #dialogContainer></ng-container>
-        
-        <kendo-contextmenu #contextMenu
-          [items]="contextMenuItems"
-          (select)="onContextMenuSelect($event)">
-        </kendo-contextmenu>
-
-        <ng-template #filterMenuTemplate>
-            <kendo-spreadsheet-filtermenu-item
-                [innerMenuItems]="sortMenuItems"
-                (itemClick)="onSortItemClick($event)">
-            </kendo-spreadsheet-filtermenu-item>
-            <kendo-spreadsheet-filtermenu-item
-                [expandable]="true"
-                [expanded]="conditionExpanded"
-                expanderClass="k-spreadsheet-condition-filter"
-                [innerMenuItems]="[{text: messageFor('filterMenuConditionItem')}]"
-                (collapse)="onToggle(false, 'condition')"
-                (expand)="onToggle(true, 'condition')">
-                <ng-template kendoSpreadsheetFilterMenuItemContentTemplate>
-                    <div class="k-details-content">
-                        <kendo-dropdownlist
-                            [data]="filterConditionsList"
-                            textField="text"
-                            valueField="comparerType"
-                            [(value)]="selectedCondition">
-                        </kendo-dropdownlist>
-                        @if (selectedCondition?.type === 'string') {
-                            <kendo-textbox [(value)]="conditionValue"></kendo-textbox>
-                        } @else if (selectedCondition?.type === 'number') {
-                            <kendo-numerictextbox [(value)]="conditionValue"></kendo-numerictextbox>
-                        } @else if (selectedCondition?.type === 'date') {
-                            <kendo-datepicker [(value)]="conditionValue"></kendo-datepicker>
-                        }
-                    </div>
-                    <div class="k-actions k-actions-stretched k-actions-horizontal">
-                        <button
-                            kendoButton
-                            themeColor="primary"
-                            (click)="filterApply('condition')">
-                            {{ messageFor('filterApply') }}
-                        </button>
-                        <button
-                            kendoButton
-                            (click)="filterClear()">
-                            {{ messageFor('filterClear') }}
-                        </button>
-                    </div>
-                </ng-template>
-            </kendo-spreadsheet-filtermenu-item>
-            <kendo-spreadsheet-filtermenu-item
-                [expandable]="true"
-                [expanded]="valueExpanded"
-                [innerMenuItems]="[{text: messageFor('filterMenuValueItem')}]"
-                (collapse)="onToggle(false, 'value')"
-                (expand)="onToggle(true, 'value')">
-                <ng-template kendoSpreadsheetFilterMenuItemContentTemplate>
-                    <div class="k-spreadsheet-value-treeview-wrapper">
-                        <kendo-treeview #treeview
-                            kendoTreeViewHierarchyBinding
-                            childrenField="items"
-                            textField="text"
-                            [nodes]="rangeFilterValuesList"
-                            kendoTreeViewExpandable
-                            [(expandedKeys)]="expandedKeys"
-                            [filterable]="true"
-                            [kendoTreeViewCheckable]="{checkOnClick: true}"
-                            [(checkedKeys)]="checkedKeys"
-                            checkBy="text"
-                            [isChecked]="isChecked">
-                        </kendo-treeview>
-                    </div>
-                    <div class="k-actions k-actions-stretched k-actions-horizontal">
-                        <button
-                            kendoButton
-                            themeColor="primary"
-                            (click)="filterApply('value')">
-                            {{ messageFor('filterApply') }}
-                        </button>
-                        <button
-                            kendoButton
-                            (click)="filterClear()">
-                            {{ messageFor('filterClear') }}
-                        </button>
-                    </div>
-                </ng-template>
-            </kendo-spreadsheet-filtermenu-item>
-        </ng-template>
-        
-        @if (showLicenseWatermark) {
-          <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></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: "component", type: MenuItemComponent, selector: "kendo-menu-item", inputs: ["text", "url", "disabled", "cssClass", "cssStyle", "icon", "svgIcon", "data", "separator"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex", "showIcon", "showText"], 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", "rounded", "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]", inputs: ["licenseMessage"] }, { kind: "directive", type: SpreadsheetDataValidationDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDataValidation]" }, { kind: "directive", type: SpreadsheetFilterDirective, selector: "kendo-toolbar-button[kendoSpreadsheetFilter]" }, { kind: "component", type: SpreadsheetFilterMenuItemComponent, selector: "kendo-spreadsheet-filtermenu-item", inputs: ["text", "innerMenuItems", "icon", "expanderClass", "expandable", "svgIcon", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: FilterMenuItemContentTemplateDirective, selector: "[kendoSpreadsheetFilterMenuItemContentTemplate]" }, { kind: "component", type: i8.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: i8.CheckDirective, selector: "[kendoTreeViewCheckable]", inputs: ["isChecked", "checkBy", "checkedKeys", "kendoTreeViewCheckable"], outputs: ["checkedKeysChange"] }, { kind: "directive", type: i8.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { kind: "directive", type: i8.HierarchyBindingDirective, selector: "[kendoTreeViewHierarchyBinding]", inputs: ["childrenField", "nodes", "isVisible", "loadOnDemand"] }, { 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: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "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: "ngmodule", type: InputsModule }, { kind: "component", type: i9.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"] }, { kind: "component", type: i9.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: SpreadsheetSortDirective, selector: "[kendoSpreadsheetSort]" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpreadsheetComponent, decorators: [{
-            type: Component,
-            args: [{
-                    exportAs: 'kendo-spreadsheet',
-                    selector: 'kendo-spreadsheet',
-                    providers: [
-                        SpreadsheetLocalizationService,
-                        SpreadsheetService,
-                        {
-                            provide: LocalizationService,
-                            useExisting: SpreadsheetLocalizationService
-                        },
-                        {
-                            provide: L10N_PREFIX,
-                            useValue: 'kendo.spreadsheet'
-                        },
-                        SpreadsheetToolsService,
-                        PopupService,
-                        ErrorHandlingService
-                    ],
-                    template: `
-        <ng-container
-          kendoSpreadsheetLocalizedMessages
-          i18n-background="kendo.spreadsheet.background|The title of the tool that changes the text background color."
-          background="Background color"
-          i18n-color="kendo.spreadsheet.color|The title of the tool that changes the text font color."
-          color="Font color"
-          i18n-bold="kendo.spreadsheet.bold|The title of the Bold tool."
-          bold="Bold"
-          i18n-dataValidation="kendo.spreadsheet.dataValidation|The title of the Data Validation tool."
-          dataValidation="Data Validation"
-          i18n-filter="kendo.spreadsheet.filter|The title of the Filter tool."
-          filter="Filter"
-          i18n-validationCellRange="kendo.spreadsheet.validationCellRange|The text of the Cell Range label in the data validation dialog."
-          validationCellRange="Cell Range"
-          i18n-validationCriteria="kendo.spreadsheet.validationCriteria|The text of the Criteria dropdown list label in the data validation dialog."
-          validationCriteria="Criteria"
-          i18n-validationMinValue="kendo.spreadsheet.validationMinValue|The text of the Min value label in the data validation dialog."
-          validationMinValue="Min"
-          i18n-validationMaxValue="kendo.spreadsheet.validationMaxValue|The text of the Max value label in the data validation dialog."
-          validationMaxValue="Max"
-          i18n-validationStartValue="kendo.spreadsheet.validationStartValue|The text of the Start value label in the data validation dialog."
-          validationStartValue="Start"
-          i18n-validationEndValue="kendo.spreadsheet.validationEndValue|The text of the End value label in the data validation dialog."
-          validationEndValue="End"
-          i18n-validationValue="kendo.spreadsheet.validationValue|The text of the Value label in the data validation dialog."
-          validationValue="Text"
-          i18n-validationShowListButtonCheckbox="kendo.spreadsheet.validationShowListButtonCheckbox|The text for the Show list button checkbox label in the data validation dialog."
-          validationShowListButtonCheckbox="Display button to show list"
-          i18n-validationOnInvalidData="kendo.spreadsheet.validationOnInvalidData|The text for the On invalid data label in the data validation dialog."
-          validationOnInvalidData="On invalid data"
-          i18n-validationShowDateButtonCheckbox="kendo.spreadsheet.validationShowDateButtonCheckbox|The text for the Show date button checkbox label in the data validation dialog."
-          validationShowDateButtonCheckbox="Display button to show Calendar"
-          i18n-validationRejectInput="kendo.spreadsheet.validationRejectInput|The text for the Reject input radio button label in the data validation dialog."
-          validationRejectInput="Reject input"
-          i18n-validationShowWarning="kendo.spreadsheet.validationShowWarning|The text for the Show warning radio button label in the data validation dialog."
-          validationShowWarning="Show warning"
-          i18n-validationHintTitle="kendo.spreadsheet.validationHintTitle|The text for the Custom hint title input label in the data validation dialog."
-          validationHintTitle="Custom hint title"
-          i18n-validationHintMessage="kendo.spreadsheet.validationHintMessage|The text for the Custom hint input label in the data validation dialog."
-          validationHintMessage="Custom hint"
-          i18n-validationShowHint="kendo.spreadsheet.validationShowHint|The text for the Show hint radio button label in the data validation dialog."
-          validationShowHint="Show hint"
-          i18n-validationIgnoreBlankCheckbox="kendo.spreadsheet.validationIgnoreBlankCheckbox|The text for the Ignore blank checkbox label in the data validation dialog."
-          validationIgnoreBlankCheckbox="Ignore blank"
-          i18n-validationComparer="kendo.spreadsheet.validationComparer|The text of the Comparer dropdown list label in the data validation dialog."
-          validationComparer="Comparer"
-          i18n-anyValueValidationCriteria="kendo.spreadsheet.anyValueValidationCriteria|The text of the Any value validation criteria"
-          anyValueValidationCriteria="Any value"
-          i18n-numberValidationCriteria="kendo.spreadsheet.numberValidationCriteria|The text of the Number validation criteria"
-          numberValidationCriteria="Number"
-          i18n-textValidationCriteria="kendo.spreadsheet.textValidationCriteria|The text of the Text validation criteria"
-          textValidationCriteria="Text"
-          i18n-dateValidationCriteria="kendo.spreadsheet.dateValidationCriteria|The text of the Date validation criteria"
-          dateValidationCriteria="Date"
-          i18n-customFormulaValidationCriteria="kendo.spreadsheet.customFormulaValidationCriteria|The text of the Custom formula validation criteria"
-          customFormulaValidationCriteria="Custom Formula"
-          i18n-listValidationCriteria="kendo.spreadsheet.listValidationCriteria|The text of the List validation criteria"
-          listValidationCriteria="List"
-          i18n-greaterThanValidationComparer="kendo.spreadsheet.greaterThanValidationComparer|The text of the greater than validation comparer"
-          greaterThanValidationComparer="greater than"
-          i18n-lessThanValidationComparer="kendo.spreadsheet.lessThanValidationComparer|The text of the less than validation comparer"
-          lessThanValidationComparer="less than"
-          i18n-betweenValidationComparer="kendo.spreadsheet.betweenValidationComparer|The text of the between validation comparer"
-          betweenValidationComparer="between"
-          i18n-notBetweenValidationComparer="kendo.spreadsheet.notBetweenValidationComparer|The text of the not between validation comparer"
-          notBetweenValidationComparer="not between"
-          i18n-equalToValidationComparer="kendo.spreadsheet.equalToValidationComparer|The text of the equal to validation comparer"
-          equalToValidationComparer="equal to"
-          i18n-notEqualToValidationComparer="kendo.spreadsheet.notEqualToValidationComparer|The text of the not equal to validation comparer"
-          notEqualToValidationComparer="not equal to"
-          i18n-greaterThanOrEqualToValidationComparer="kendo.spreadsheet.greaterThanOrEqualToValidationComparer|The text of the greater than on equal to validation comparer"
-          greaterThanOrEqualToValidationComparer="greater than or equal to"
-          i18n-lessThanOrEqualToValidationComparer="kendo.spreadsheet.lessThanOrEqualToValidationComparer|The text of the less than on equal to validation comparer"
-          lessThanOrEqualToValidationComparer="less than or equal to"
-          i18n-italic="kendo.spreadsheet.italic|The title of the Italic tool."
-          italic="Italic"
-          i18n-underline="kendo.spreadsheet.underline|The title of the Underline tool."
-          underline="Underline"
-          i18n-loadFile="kendo.spreadsheet.loadFile|The title of the Load File tool."
-          loadFile="Open..."
-          i18n-saveFile="kendo.spreadsheet.saveFile|The title of the Save File tool."
-          saveFile="Export..."
-          i18n-format="kendo.spreadsheet.format|The text of the Format tool."
-          format="Custom format..."
-          i18n-fontFamily="kendo.spreadsheet.fontFamily|The text of the Font Family tool."
-          fontFamily="Font"
-          i18n-fontSize="kendo.spreadsheet.fontSize|The text of the Font Size tool."
-          fontSize="Font size"
-          i18n-home="kendo.spreadsheet.home|The text of the Home toolbar tab."
-          home="Home"
-          i18n-file="kendo.spreadsheet.file|The text of the File toolbar tab."
-          file="File"
-          i18n-insert="kendo.spreadsheet.insert|The text of the Insert toolbar tab."
-          insert="Insert"
-          i18n-formatTab="kendo.spreadsheet.formatTab|The text of the Format toolbar tab."
-          formatTab="Format"
-          i18n-dataTab="kendo.spreadsheet.dataTab|The text of the Data toolbar tab."
-          dataTab="Data"
-          i18n-view="kendo.spreadsheet.view|The text of the View toolbar tab."
-          view="View"
-          i18n-undo="kendo.spreadsheet.undo|The title of the Undo tool."
-          undo="Undo"
-          i18n-redo="kendo.spreadsheet.redo|The title of the Redo tool."
-          redo="Redo"
-          i18n-gridLines="kendo.spreadsheet.gridLines|The title of the Grid Lines tool."
-          gridLines="Toggle grid lines"
-          i18n-addColumnLeft="kendo.spreadsheet.addColumnLeft|The title of the tool that adds new column before currently selected column."
-          addColumnLeft="Add column left"
-          i18n-addColumnRight="kendo.spreadsheet.addColumnRight|The title of the tool that adds new column after currently selected column."
-          addColumnRight="Add column right"
-          i18n-addRowBelow="kendo.spreadsheet.addRowBelow|The title of the tool that adds new row below currently selected row."
-          addRowBelow="Add row below"
-          i18n-addRowAbove="kendo.spreadsheet.addRowAbove|The title of the tool that adds new row above currently selected row."
-          addRowAbove="Add row above"
-          i18n-deleteColumn="kendo.spreadsheet.deleteColumn|The title of the tool that deletes a column."
-          deleteColumn="Delete column"
-          i18n-deleteRow="kendo.spreadsheet.deleteRow|The title of the tool that deletes a row."
-          deleteRow="Delete row"
-          i18n-wrap="kendo.spreadsheet.wrap|The title of the Text Wrap tool."
-          wrap="Text wrap"
-          i18n-align="kendo.spreadsheet.align|The title of the Text Align tool."
-          align="Align"
-          i18n-alignHorizontal="kendo.spreadsheet.alignHorizontal|The title of the Text Align Horizontal tool."
-          alignHorizontal="Align horizontally"
-          i18n-alignVertical="kendo.spreadsheet.alignVertical|The title of the Text Align Vertical tool."
-          alignVertical="Align vertically"
-          i18n-alignLeft="kendo.spreadsheet.alignLeft|The title of the Text Align Left tool."
-          alignLeft="Align Left"
-          i18n-alignCenter="kendo.spreadsheet.alignCenter|The title of the Text Align Center tool."
-          alignCenter="Align Center"
-          i18n-alignRight="kendo.spreadsheet.alignRight|The title of the Text Align Right tool."
-          alignRight="Align Right"
-          i18n-alignJustify="kendo.spreadsheet.alignJustify|The title of the Text Align Justify tool."
-          alignJustify="Align Justify"
-          i18n-alignTop="kendo.spreadsheet.alignTop|The title of the Text Align Top tool."
-          alignTop="Align Top"
-          i18n-alignMiddle="kendo.spreadsheet.alignMiddle|The title of the Text Align Middle tool."
-          alignMiddle="Align Middle"
-          i18n-alignBottom="kendo.spreadsheet.alignBottom|The title of the Text Align Bottom tool."
-          alignBottom="Align Bottom"
-          i18n-merge="kendo.spreadsheet.merge|The title of the Cells Merge tool."
-          merge="Merge"
-          i18n-mergeAll="kendo.spreadsheet.mergeAll|The title of the Merge all tool."
-          mergeAll="Merge all"
-          i18n-mergeHorizontally="kendo.spreadsheet.mergeHorizontally|The title of the Merge horizontally tool."
-          mergeHorizontally="Merge horizontally"
-          i18n-mergeVertically="kendo.spreadsheet.mergeVertically|The title of the Merge vertically tool."
-          mergeVertically="Merge vertically"
-          i18n-unmerge="kendo.spreadsheet.unmerge|The title of the Unmerge tool."
-          unmerge="Unmerge"
-          i18n-insertLink="kendo.spreadsheet.insertLink|The title of the tool that inserts a link."
-          insertLink="Insert link"
-          i18n-decreaseDecimal="kendo.spreadsheet.decreaseDecimal|The title of the tool that decreases decimals."
-          decreaseDecimal="Decrease decimal"
-          i18n-increaseDecimal="kendo.spreadsheet.increaseDecimal|The title of the tool that increases decimals."
-          increaseDecimal="Increase decimal"
-          i18n-increaseFontSize="kendo.spreadsheet.increaseFontSize|The title of the tool that increases the cell font size."
-          increaseFontSize="Increase font size"
-          i18n-decreaseFontSize="kendo.spreadsheet.decreaseFontSize|The title of the tool that decreases the cell font size."
-          decreaseFontSize="Decrease font size"
-          i18n-dialogApply="kendo.spreadsheet.dialogApply|The text of the **Apply** button in all Spreadsheet dialogs."
-          dialogApply="Apply"
-          i18n-dialogCancel="kendo.spreadsheet.dialogCancel|The text of the **Cancel** button in all Spreadsheet dialogs."
-          dialogCancel="Cancel"
-          i18n-dialogDelete="kendo.spreadsheet.dialogDelete|The text of the **Delete** button in the Delete sheet dialog."
-          dialogDelete="Delete"
-          i18n-dialogRename="kendo.spreadsheet.dialogRename|The text of the **Rename** button in the Rename sheet dialog."
-          dialogRename="Rename"
-          i18n-dialogInsert="kendo.spreadsheet.dialogInsert|The text of the **Insert** button in all Spreadsheet dialogs."
-          dialogInsert="Insert"
-          i18n-dialogRemove="kendo.spreadsheet.dialogRemove|The text of the **Remove** button in all Spreadsheet dialogs."
-          dialogRemove="Remove"
-          i18n-dialogRemoveLink="kendo.spreadsheet.dialogRemoveLink|The text of the **Remove link** button in the Link tool dialog."
-          dialogRemoveLink="Remove link"
-          i18n-rename="kendo.spreadsheet.rename|The title of the Rename sheet dialog."
-          rename="Rename Sheet"
-          i18n-delete="kendo.spreadsheet.delete|The title of the Delete sheet dialog."
-          delete="Delete Sheet"
-          i18n-nameBox="kendo.spreadsheet.nameBox|The title of the Name Box input."
-          nameBox="Name Box"
-          i18n-formulaInput="kendo.spreadsheet.formulaInput|The title of the Formula input."
-          formulaInput="Formula Input"
-          i18n-addSheet="kendo.spreadsheet.addSheet|The title of the Add new sheet button."
-          addSheet="Add New Sheet"
-          i18n-sheetsMenu="kendo.spreadsheet.sheetsMenu|The title of the Sheets menu button."
-          sheetsMenu="All Sheets"
-          i18n-openUnsupported="kendo.spreadsheet.openUnsupported|The content of the dialog that warns about an unsupported file type."
-          openUnsupported="Unsupported format. Please select an .xlsx file."
-          i18n-modifyMerged="kendo.spreadsheet.modifyMerged|The content of the dialog that warns about modifying a merged cell."
-          modifyMerged="Cannot change part of a merged cell."
-          i18n-cannotModifyDisabled="kendo.spreadsheet.cannotModifyDisabled|The content of the dialog that warns about modifying a disabled cell."
-          cannotModifyDisabled="Cannot modify disabled cells."
-          i18n-dialogOk="kendo.spreadsheet.dialogOk|The text of the **OK** dialog button."
-          dialogOk="OK"
-          i18n-dialogError="kendo.spreadsheet.dialogError|The title of an error dialog."
-          dialogError="Error"
-          i18n-duplicateSheetName="kendo.spreadsheet.duplicateSheetName|The content of the dialog that warns about duplicated sheet name."
-          duplicateSheetName="There is an existing sheet with this name. Please enter another name."
-          i18n-copy="kendo.spreadsheet.copy|The Copy command text."
-          copy="Copy"
-          i18n-cut="kendo.spreadsheet.cut|The Cut command text."
-          cut="Cut"
-          i18n-paste="kendo.spreadsheet.paste|The Paste command text."
-          paste="Paste (use Ctrl/⌘ + V)"
-          i18n-hideRow="kendo.spreadsheet.hideRow|The Hide row command text."
-          hideRow="Hide"
-          i18n-unhideRow="kendo.spreadsheet.unhideRow|The Unhide row command text."
-          unhideRow="Unhide"
-          i18n-hideColumn="kendo.spreadsheet.hideColumn|The Hide column command text."
-          hideColumn="Hide"
-          i18n-unhideColumn="kendo.spreadsheet.unhideColumn|The Unhide column command text."
-          unhideColumn="Unhide"
-          i18n-sheetDelete="kendo.spreadsheet.sheetDelete|The text of the Sheet menu Delete option."
-          sheetDelete="Delete"
-          i18n-sheetRename="kendo.spreadsheet.sheetRename|The text of the Sheet menu Rename option."
-          sheetRename="Rename"
-          i18n-sheetDuplicate="kendo.spreadsheet.sheetDuplicate|The text of the Sheet menu Duplicate option."
-          sheetDuplicate="Duplicate"
-          i18n-sheetHide="kendo.spreadsheet.sheetHide|The text of the Sheet menu Hide option."
-          sheetHide="Hide"
-          i18n-sheetMoveLeft="kendo.spreadsheet.sheetMoveLeft|The text of the Sheet menu Move Left option."
-          sheetMoveLeft="Move Left"
-          i18n-sheetMoveRight="kendo.spreadsheet.sheetMoveRight|The text of the Sheet menu Move Right option."
-          sheetMoveRight="Move Right"
-          i18n-invalidNameError="kendo.spreadsheet.invalidNameError|The content of the dialog that warns about invalid name input."
-          invalidNameError="{{ 'Invalid name: {inputValue}' }}"
-          i18n-cantSortMixedCells="kendo.spreadsheet.cantSortMixedCells|The content of the dialog that warns about sorting range containing cells of mixed shapes."
-          cantSortMixedCells="Cannot sort range containing cells of mixed shapes"
-          i18n-cantSortNullRef="kendo.spreadsheet.cantSortNullRef|The content of the dialog that warns about sorting incorrect (empty) range."
-          cantSortNullRef="Cannot sort empty selection"
-          i18n-cantSortMultipleSelection="kendo.spreadsheet.cantSortMultipleSelection|The content of the dialog that warns about sorting multiple range selection."
-          cantSortMultipleSelection="Cannot sort multiple selection"
-          i18n-filterApply="kendo.spreadsheet.filterApply|The text of the **Apply** button in the filter menu."
-          filterApply="Apply"
-          i18n-filterClear="kendo.spreadsheet.filterClear|The text of the **Clear** button in the filter menu."
-          filterClear="Clear"
-          i18n-filterMenuAll="kendo.spreadsheet.filterMenuAll|The text of the **All** grouping item in the filter menu."
-          filterMenuAll="All"
-          i18n-blankValues="kendo.spreadsheet.blankValues|The text for the blank (empty) values."
-          blankValues="Blank"
-          i18n-filterNoneOperator="kendo.spreadsheet.filterNoneOperator|The text for the **none** filter operator."
-          filterNoneOperator="None"
-          i18n-filterContainsOperator="kendo.spreadsheet.filterContainsOperator|The text of the **contains** filter operator"
-          filterContainsOperator="Text contains"
-          i18n-filterNotContainsOperator="kendo.spreadsheet.filterNotContainsOperator|The text of the **does not contain** filter operator"
-          filterNotContainsOperator="Text does not contain"
-          i18n-filterStartsWithOperator="kendo.spreadsheet.filterStartsWithOperator|The text of the **starts with** filter operator"
-          filterStartsWithOperator="Text starts with"
-          i18n-filterEndsWithOperator="kendo.spreadsheet.filterEndsWithOperator|The text of the **ends with** filter operator"
-          filterEndsWithOperator="Text ends with"
-          i18n-filterMatchesOperator="kendo.spreadsheet.filterMatchesOperator|The text of the **matches** filter operator"
-          filterMatchesOperator="Text matches"
-          i18n-filterNotMatchesOperator="kendo.spreadsheet.filterNotMatchesOperator|The text of the **does not match** filter operator"
-          filterNotMatchesOperator="Text does not match"
-          i18n-filterDateEqOperator="kendo.spreadsheet.filterDateEqOperator|The text of the **Date is** filter operator"
-          filterDateEqOperator="Date is"
-          i18n-filterDateNotEqOperator="kendo.spreadsheet.filterDateNotEqOperator|The text of the **Date is not** filter operator"
-          filterDateNotEqOperator="Date is not"
-          i18n-filterBeforeOperator="kendo.spreadsheet.filterBeforeOperator|The text of the **Date is before** filter operator"
-          filterBeforeOperator="Date is before"
-          i18n-filterAfterOperator="kendo.spreadsheet.filterAfterOperator|The text of the **Date is after** filter operator"
-          filterAfterOperator="Date is after"
-          i18n-filterEqOperator="kendo.spreadsheet.filterEqOperator|Sets the text for the **Equal (Is equal to)** filter operator."
-          filterEqOperator="Is equal to"
-          i18n-filterNotEqOperator="kendo.spreadsheet.filterNotEqOperator|Sets the text for the **Not equal (Is not equal to)** filter operator."
-          filterNotEqOperator="Is not equal to"
-          i18n-filterGteOperator="kendo.spreadsheet.filterGteOperator|The text of the **greater than or equal to** filter operator"
-          filterGteOperator="Is greater than or equal to"
-          i18n-filterGtOperator="kendo.spreadsheet.filterGtOperator|The text of the **greater than** filter operator"
-          filterGtOperator="Is greater than"
-          i18n-filterLteOperator="kendo.spreadsheet.filterLteOperator|The text of the **less than or equal to** filter operator"
-          filterLteOperator="Is less than or equal to"
-          i18n-filterLtOperator="kendo.spreadsheet.filterLtOperator|The text of the **less than** filter operator"
-          filterLtOperator="Is less than"
-          i18n-filterMenuConditionItem="kendo.spreadsheet.filterMenuConditionItem|The text of the **Filter by condition** menu item."
-          filterMenuConditionItem="Filter by condition"
-          i18n-filterMenuValueItem="kendo.spreadsheet.filterMenuValueItem|The text of the **Filter by value** menu item."
-          filterMenuValueItem="Filter by value"
-          i18n-sort="kendo.spreadsheet.sort|The title of the Sort ToolBar tool."
-          sort="Sort"
-          i18n-sortAsc="kendo.spreadsheet.sortAsc|The text of the **Sort range A to Z** option."
-          sortAsc="Sort range A to Z"
-          i18n-sortDesc="kendo.spreadsheet.sortDesc|The text of the **Sort range Z to A** option."
-          sortDesc="Sort range Z to A"
-          i18n-unsort="kendo.spreadsheet.unsort|The text of the **Unsort** option."
-          unsort="Unsort">
-        </ng-container>
-        <div class="k-spreadsheet-header">
-          <kendo-menu kendoSpreadsheetMenu (select)="onMenuItemSelect($event)">
-            @for (item of menuItems; track item) {
-              <kendo-menu-item [text]="item.text" [cssClass]="item.cssClass"></kendo-menu-item>
-            }
-          </kendo-menu>
-          @if (selectedMenuItem?.active && selectedMenuItem.id === 'file') {
-            <kendo-toolbar
-              [attr.aria-label]="messageFor('file')"
-              fillMode="flat"
-              class="k-spreadsheet-toolbar"
-              [overflow]="overflow">
-              <kendo-spreadsheet-load-file-tool></kendo-spreadsheet-load-file-tool>
-              <kendo-toolbar-button kendoSpreadsheetSaveFile></kendo-toolbar-button>
-            </kendo-toolbar>
-          }
-          @if (selectedMenuItem?.active && selectedMenuItem.id === 'home') {
-            <kendo-toolbar
-              [attr.aria-label]="messageFor('home')"
-              class="k-spreadsheet-toolbar"
-              fillMode="flat"
-              [overflow]="overflow">
-              <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-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 fillMode="flat">
-                <kendo-toolbar-button kendoSpreadsheetBold></kendo-toolbar-button>
-                <kendo-toolbar-button kendoSpreadsheetItalic></kendo-toolbar-button>
-                <kendo-toolbar-button kendoSpreadsheetUnderline></kendo-toolbar-button>
-              </kendo-toolbar-buttongroup>
-              <kendo-spreadsheet-forecolor-tool></kendo-spreadsheet-forecolor-tool>
-              <kendo-toolbar-separator></kendo-toolbar-separator>
-              <kendo-spreadsheet-backcolor-tool></kendo-spreadsheet-backcolor-tool>
-              <kendo-toolbar-separator></kendo-toolbar-separator>
-              <kendo-toolbar-dropdownbutton kendoSpreadsheetHorizontalTextAlign></kendo-toolbar-dropdownbutton>
-              <kendo-toolbar-dropdownbutton kendoSpreadsheetVerticalTextAlign></kendo-toolbar-dropdownbutton>
-              <kendo-toolbar-button kendoSpreadsheetTextWrap></kendo-toolbar-button>
-              <kendo-toolbar-separator></kendo-toolbar-separator>
-              <kendo-toolbar-dropdownbutton kendoSpreadsheetFormat></kendo-toolbar-dropdownbutton>
-            </kendo-toolbar>
-          }
-          @if (selectedMenuItem?.active && selectedMenuItem.id === 'insert') {
-            <kendo-toolbar
-              [attr.aria-label]="messageFor('insert')"
-              fillMode="flat"
-              class="k-spreadsheet-toolbar"
-              [overflow]="overflow">
-              <kendo-toolbar-button kendoSpreadsheetInsertLink></kendo-toolbar-button>
-              <kendo-toolbar-separator></kendo-toolbar-separator>
-              <kendo-toolbar-button kendoSpreadsheetAddColumnLeftButton></kendo-toolbar-button>
-              <kendo-toolbar-button kendoSpreadsheetAddColumnRightButton></kendo-toolbar-button>
-              <kendo-toolbar-button kendoSpreadsheetAddRowBelowButton></kendo-toolbar-button>
-              <kendo-toolbar-button kendoSpreadsheetAddRowAboveButton></kendo-toolbar-button>
-              <kendo-toolbar-separator></kendo-toolbar-separator>
-              <kendo-toolbar-button kendoSpreadsheetDeleteColumnButton></kendo-toolbar-button>
-              <kendo-toolbar-button kendoSpreadsheetDeleteRowButton></kendo-toolbar-button>
-            </kendo-toolbar>
-          }
-          @if (selectedMenuItem?.active && selectedMenuItem.id === 'format') {
-            <kendo-toolbar
-              [attr.aria-label]="messageFor('formatTab')"
-              fillMode="flat"
-              class="k-spreadsheet-toolbar"
-              [overflow]="overflow">
-              <kendo-toolbar-button kendoSpreadsheetDecreaseDecimal></kendo-toolbar-button>
-              <kendo-toolbar-button kendoSpreadsheetIncreaseDecimal></kendo-toolbar-button>
-            </kendo-toolbar>
-          }
-          @if (selectedMenuItem?.active && selectedMenuItem.id === 'view') {
-            <kendo-toolbar
-              [attr.aria-label]="messageFor('view')"
-              fillMode="flat"
-              class="k-spreadsheet-toolbar"
-              [overflow]="overflow">
-              <kendo-toolbar-dropdownbutton kendoSpreadsheetMerge></kendo-toolbar-dropdownbutton>
-              <kendo-toolbar-separator></kendo-toolbar-separator>
-              <kendo-toolbar-button kendoSpreadsheetGridLines></kendo-toolbar-button>
-            </kendo-toolbar>
-          }
-          @if (selectedMenuItem?.active && selectedMenuItem.id === 'data') {
-            <kendo-toolbar
-              [attr.aria-label]="messageFor('dataTab')"
-              fillMode="flat"
-              class="k-spreadsheet-toolbar"
-              [overflow]="overflow">
-              <kendo-toolbar-button kendoSpreadsheetDataValidation></kendo-toolbar-button>
-              <kendo-toolbar-separator></kendo-toolbar-separator>
-              <kendo-toolbar-button kendoSpreadsheetFilter></kendo-toolbar-button>
-              <kendo-toolbar-separator></kendo-toolbar-separator>
-              <kendo-toolbar-dropdownbutton kendoSpreadsheetSort></kendo-toolbar-dropdownbutton>
-            </kendo-toolbar>
-          }
-        </div>
-        <div class="k-spreadsheet-action-bar">
-          <div #nameBox kendoSpreadsheetNameBox [spreadsheetWidget]="spreadsheetWidget"></div>
-          <div class="k-spreadsheet-formula-bar">
-            <span class="k-separator k-separator-vertical"></span>
-            <kendo-icon-wrapper
-              name="formula-fx"
-              [svgIcon]="formulaFxIcon">
-            </kendo-icon-wrapper>
-            <span class="k-separator k-separator-vertical"></span>
-            <div
-              #formulaBar
-              kendoSpreadsheetFormulaInput
-              [formulaListMaxHeight]="formulaListMaxHeight"
-            class="k-textbox k-input k-input-md k-input-flat k-rounded-md"></div>
-          </div>
-        </div>
-        <div class="k-spreadsheet-view">
-          <div class="k-spreadsheet-fixed-container"></div>
-          <div class="k-spreadsheet-scroller">
-            <div class="k-spreadsheet-view-size"></div>
-          </div>
-          <div tabIndex="0" class="k-spreadsheet-clipboard" contentEditable="true"></div>
-          <div #formulaCell kendoSpreadsheetFormulaInput class="k-spreadsheet-cell-editor" data-role="formulainput"></div>
-        </div>
-        <div class="k-spreadsheet-sheets-bar"
-          kendoSpreadsheetSheetsBar
-          [sheets]="sheetsInfo"
-          [sheetDescriptors]="sheets">
-        </div>
-        <ng-container #dialogContainer></ng-container>
-        
-        <kendo-contextmenu #contextMenu
-          [items]="contextMenuItems"
-          (select)="onContextMenuSelect($event)">
-        </kendo-contextmenu>
-
-        <ng-template #filterMenuTemplate>
-            <kendo-spreadsheet-filtermenu-item
-                [innerMenuItems]="sortMenuItems"
-                (itemClick)="onSortItemClick($event)">
-            </kendo-spreadsheet-filtermenu-item>
-            <kendo-spreadsheet-filtermenu-item
-                [expandable]="true"
-                [expanded]="conditionExpanded"
-                expanderClass="k-spreadsheet-condition-filter"
-                [innerMenuItems]="[{text: messageFor('filterMenuConditionItem')}]"
-                (collapse)="onToggle(false, 'condition')"
-                (expand)="onToggle(true, 'condition')">
-                <ng-template kendoSpreadsheetFilterMenuItemContentTemplate>
-                    <div class="k-details-content">
-                        <kendo-dropdownlist
-                            [data]="filterConditionsList"
-                            textField="text"
-                            valueField="comparerType"
-                            [(value)]="selectedCondition">
-                        </kendo-dropdownlist>
-                        @if (selectedCondition?.type === 'string') {
-                            <kendo-textbox [(value)]="conditionValue"></kendo-textbox>
-                        } @else if (selectedCondition?.type === 'number') {
-                            <kendo-numerictextbox [(value)]="conditionValue"></kendo-numerictextbox>
-                        } @else if (selectedCondition?.type === 'date') {
-                            <kendo-datepicker [(value)]="conditionValue"></kendo-datepicker>
-                        }
-                    </div>
-                    <div class="k-actions k-actions-stretched k-actions-horizontal">
-                        <button
-                            kendoButton
-                            themeColor="primary"
-                            (click)="filterApply('condition')">
-                            {{ messageFor('filterApply') }}
-                        </button>
-                        <button
-                            kendoButton
-                            (click)="filterClear()">
-                            {{ messageFor('filterClear') }}
-                        </button>
-                    </div>
-                </ng-template>
-            </kendo-spreadsheet-filtermenu-item>
-            <kendo-spreadsheet-filtermenu-item
-                [expandable]="true"
-                [expanded]="valueExpanded"
-                [innerMenuItems]="[{text: messageFor('filterMenuValueItem')}]"
-                (collapse)="onToggle(false, 'value')"
-                (expand)="onToggle(true, 'value')">
-                <ng-template kendoSpreadsheetFilterMenuItemContentTemplate>
-                    <div class="k-spreadsheet-value-treeview-wrapper">
-                        <kendo-treeview #treeview
-                            kendoTreeViewHierarchyBinding
-                            childrenField="items"
-                            textField="text"
-                            [nodes]="rangeFilterValuesList"
-                            kendoTreeViewExpandable
-                            [(expandedKeys)]="expandedKeys"
-                            [filterable]="true"
-                            [kendoTreeViewCheckable]="{checkOnClick: true}"
-                            [(checkedKeys)]="checkedKeys"
-                            checkBy="text"
-                            [isChecked]="isChecked">
-                        </kendo-treeview>
-                    </div>
-                    <div class="k-actions k-actions-stretched k-actions-horizontal">
-                        <button
-                            kendoButton
-                            themeColor="primary"
-                            (click)="filterApply('value')">
-                            {{ messageFor('filterApply') }}
-                        </button>
-                        <button
-                            kendoButton
-                            (click)="filterClear()">
-                            {{ messageFor('filterClear') }}
-                        </button>
-                    </div>
-                </ng-template>
-            </kendo-spreadsheet-filtermenu-item>
-        </ng-template>
-        
-        @if (showLicenseWatermark) {
-          <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
-        }
-        `,
-                    standalone: true,
-                    imports: [LocalizedMessagesDirective, MenuComponent, MainMenuDirective, MenuItemComponent, ToolBarComponent, SpreadsheetLoadFileComponent, ToolBarButtonComponent, SpreadsheetSaveFileDirective, ToolBarButtonGroupComponent, SpreadsheetUndoDirective, SpreadsheetRedoDirective, ToolBarSeparatorComponent, SpreadsheetFontFamilyComponent, SpreadsheetFontSizeComponent, SpreadsheetIncreaseFontSizeDirective, SpreadsheetDecreaseFontSizeDirective, SpreadsheetBoldDirective, SpreadsheetItalicDirective, SpreadsheetUnderlineDirective, SpreadsheetForeColorComponent, SpreadsheetBackColorComponent, ToolBarDropDownButtonComponent, SpreadsheetHorizontalTextAlignDirective, SpreadsheetVerticalTextAlignDirective, SpreadsheetTextWrapDirective, SpreadsheetFormatDirective, SpreadsheetInsertLinkDirective, SpreadsheetAddColumnLeftButtonDirective, SpreadsheetAddColumnRightButtonDirective, SpreadsheetAddRowBelowButtonDirective, SpreadsheetAddRowAboveButtonDirective, SpreadsheetDeleteColumnButtonDirective, SpreadsheetDeleteRowButtonDirective, SpreadsheetDecreaseDecimalDirective, SpreadsheetIncreaseDecimalDirective, SpreadsheetMergeDirective, SpreadsheetGridLinesDirective, NameBoxComponent, IconWrapperComponent, FormulaInputDirective, SheetsBarComponent, ContextMenuComponent, WatermarkOverlayComponent, SpreadsheetDataValidationDirective, SpreadsheetFilterDirective, SpreadsheetFilterMenuItemComponent, FilterMenuItemContentTemplateDirective, KENDO_TREEVIEW, ButtonComponent, DropDownListComponent, InputsModule, DatePickerComponent, SpreadsheetSortDirective]
-                }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.IntlService }, { type: i0.ElementRef }, { type: i2.LocalizationService }, { type: i3.SpreadsheetService }, { type: i4.SpreadsheetToolsService }, { type: i5.ErrorHandlingService }, { type: i6.DialogService }, { type: i7.PopupService }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], propDecorators: { formulaBarInputRef: [{
-                type: ViewChild,
-                args: ['formulaBar', { read: FormulaInputDirective }]
-            }], formulaCellInputRef: [{
-                type: ViewChild,
-                args: ['formulaCell', { read: FormulaInputDirective }]
-            }], nameBoxRef: [{
-                type: ViewChild,
-                args: ['nameBox']
-            }], dialogContainer: [{
-                type: ViewChild,
-                args: ['dialogContainer', { read: ViewContainerRef }]
-            }], contextMenu: [{
-                type: ViewChild,
-                args: ['contextMenu']
-            }], filterMenuTemplate: [{
-                type: ViewChild,
-                args: ['filterMenuTemplate']
-            }], hostClass: [{
-                type: HostBinding,
-                args: ['class.k-spreadsheet']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], menuItems: [{
-                type: Input
-            }], overflow: [{
-                type: Input
-            }], formulaListMaxHeight: [{
-                type: Input
-            }], activeSheet: [{
-                type: Input
-            }], sheets: [{
-                type: Input
-            }], columns: [{
-                type: Input
-            }], columnWidth: [{
-                type: Input
-            }], defaultCellStyle: [{
-                type: Input
-            }], headerHeight: [{
-                type: Input
-            }], headerWidth: [{
-                type: Input
-            }], rowHeight: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], cellEditors: [{
-                type: Input
-            }], images: [{
-                type: Input
-            }], excel: [{
-                type: Input
-            }], change: [{
-                type: Output
-            }], formatChange: [{
-                type: Output
-            }], selectionChange: [{
-                type: Output
-            }], excelExport: [{
-                type: Output
-            }], excelImport: [{
-                type: Output
-            }], activeSheetChange: [{
-                type: Output
-            }], clipboard: [{
-                type: Output
-            }] } });