@progress/kendo-angular-spreadsheet 21.4.0-develop.2 → 21.4.0-develop.4

package/esm2022/spreadsheet.component.mjs

@@ -2,14 +2,14 @@
 * Copyright © 2025 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 } from '@angular/core';
+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 } from '@progress/kendo-spreadsheet-common';
+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 } from '@progress/kendo-svg-icons';
+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';
@@ -61,6 +61,15 @@ import { LocalizedMessagesDirective } from './localization/localized-messages.di
 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";
@@ -69,6 +78,8 @@ 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 %}).
  *
@@ -91,11 +102,13 @@ export class SpreadsheetComponent {
     dialogService;
     popupService;
     container;
+    cdr;
     formulaBarInputRef;
     formulaCellInputRef;
     nameBoxRef;
     dialogContainer;
     contextMenu;
+    filterMenuTemplate;
     hostClass = true;
     role = 'application';
     /**
@@ -159,6 +172,14 @@ export class SpreadsheetComponent {
     get sheetsInfo() {
         return this._sheetsInfo;
     }
+    /**
+     * @hidden
+     */
+    expandedKeys = ['0'];
+    /**
+     * @hidden
+     */
+    checkedKeys = [];
     /**
      * The number of columns in the document.
      *
@@ -215,38 +236,46 @@ export class SpreadsheetComponent {
      */
     excel;
     /**
-     * Fired when a value in the Spreadsheet is changed. Exposes the `SpreadsheetWidget` instance and the selected `Range` as event data.
+     * Fires when a value in the Spreadsheet is changed. Exposes the `SpreadsheetWidget` instance and the selected `Range` as event data.
      */
     change = new EventEmitter();
     /**
-     * Fired when the selected range format is changed from the UI. Exposes the `SpreadsheetWidget` instance and the selected `Range` as event data.
+     * 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();
     /**
-     * Fired when the selection is changed by the end user. Exposes the `SpreadsheetWidget` instance and the selected `Range` as event data.
+     * Fires when the selection is changed by the end user. Exposes the `SpreadsheetWidget` instance and the selected `Range` as event data.
      */
     selectionChange = new EventEmitter();
     /**
-     * Fired when the end user clicks the Export to Excel toolbar button.
+     * 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();
     /**
-     * Fired when the end user clicks the Open toolbar button.
+     * 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();
     /**
-     * Fired when the active sheet is about to change.
+     * 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;
     }
@@ -259,13 +288,31 @@ export class SpreadsheetComponent {
      */
     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;
+    }
+    _selectedCondition;
     _sheetsInfo;
     _activeSheet;
     _menuItems;
     currentRange;
     subs = new Subscription();
+    filterMenuOpened = false;
+    currentFilterOptions = null;
     popupRef;
-    constructor(ngZone, intl, host, localization, spreadsheetService, toolsService, errorService, dialogService, popupService, container) {
+    popupPositionChangeSub;
+    constructor(ngZone, intl, host, localization, spreadsheetService, toolsService, errorService, dialogService, popupService, container, cdr) {
         this.ngZone = ngZone;
         this.intl = intl;
         this.host = host;
@@ -276,6 +323,7 @@ export class SpreadsheetComponent {
         this.dialogService = dialogService;
         this.popupService = popupService;
         this.container = container;
+        this.cdr = cdr;
         const isValid = validatePackage(packageMetadata);
         this.licenseMessage = getLicenseMessage(packageMetadata);
         this.showLicenseWatermark = shouldShowValidationUI(isValid);
@@ -322,25 +370,36 @@ export class SpreadsheetComponent {
                 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;
-                if (this.popupRef) {
-                    this.popupRef.close();
-                    this.popupRef = null;
-                }
+                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 = [
@@ -383,6 +442,18 @@ export class SpreadsheetComponent {
         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
      */
@@ -486,11 +557,116 @@ export class SpreadsheetComponent {
             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);
     };
@@ -526,6 +702,25 @@ export class SpreadsheetComponent {
             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,
@@ -551,12 +746,17 @@ export class SpreadsheetComponent {
             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) {
@@ -731,8 +931,7 @@ export class SpreadsheetComponent {
         registerEditor('_validation_list', () => {
             return {
                 edit: (options) => {
-                    this.popupRef?.close();
-                    this.popupRef = null;
+                    this.closePopup();
                     this.popupRef = this.popupService.open({
                         anchor: options.view.element.querySelector('.k-spreadsheet-editor-button'),
                         content: ListEditorComponent,
@@ -742,16 +941,14 @@ export class SpreadsheetComponent {
                     });
                     const list = this.popupRef.content.instance;
                     list.itemSelect.subscribe((item) => {
-                        this.popupRef.close();
-                        this.popupRef = null;
+                        this.closePopup();
                         const itemValue = item.value;
                         if (isPresent(itemValue)) {
                             options.callback(itemValue);
                         }
                     });
                     list.close.subscribe(() => {
-                        this.popupRef.close();
-                        this.popupRef = null;
+                        this.closePopup();
                     });
                     const items = options.validation.from.value;
                     const data = [];
@@ -770,8 +967,7 @@ export class SpreadsheetComponent {
         registerEditor('_validation_date', () => {
             return {
                 edit: (options) => {
-                    this.popupRef?.close();
-                    this.popupRef = null;
+                    this.closePopup();
                     this.popupRef = this.popupService.open({
                         anchor: options.view.element.querySelector('.k-spreadsheet-editor-button'),
                         content: CalendarComponent,
@@ -780,8 +976,7 @@ export class SpreadsheetComponent {
                     });
                     const calendar = this.popupRef.content.instance;
                     calendar.valueChange.subscribe((value) => {
-                        this.popupRef.close();
-                        this.popupRef = null;
+                        this.closePopup();
                         if (!options.range.format()) {
                             options.range.format('yyyy-mm-dd');
                         }
@@ -880,12 +1075,6 @@ export class SpreadsheetComponent {
             });
         });
     }
-    closePopup() {
-        if (this.popupRef) {
-            this.popupRef.close();
-            this.popupRef = null;
-        }
-    }
     isValidFormula(validation) {
         const formula = calc.runtime.Formula;
         return validation instanceof formula && rowAndColPresent(validation.value);
@@ -893,8 +1082,196 @@ export class SpreadsheetComponent {
     createDate(validation, sheet) {
         return new Date(serialToDate(isPresent(sheet) ? sheet.range(validation.value.row, validation.value.col).value() : validation));
     }
-    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 }], 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" }, host: { properties: { "class.k-spreadsheet": "this.hostClass", "attr.role": "this.role" } }, providers: [
+    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 uniqueMap = new Map();
+        for (const item of values) {
+            const key = `${item.dataType}:${item.value}`;
+            if (!uniqueMap.has(key)) {
+                uniqueMap.set(key, item);
+            }
+        }
+        return Array.from(uniqueMap.values());
+    }
+    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,
             {
@@ -908,7 +1285,7 @@ export class SpreadsheetComponent {
             SpreadsheetToolsService,
             PopupService,
             ErrorHandlingService
-        ], viewQueries: [{ propertyName: "formulaBarInputRef", first: true, predicate: ["formulaBar"], descendants: true, read: FormulaInputDirective }, { propertyName: "formulaCellInputRef", first: true, predicate: ["formulaCell"], descendants: true, read: FormulaInputDirective }, { propertyName: "nameBoxRef", first: true, predicate: ["nameBox"], descendants: true }, { propertyName: "dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], exportAs: ["kendo-spreadsheet"], usesOnChanges: true, ngImport: i0, template: `
+        ], 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."
@@ -1132,7 +1509,65 @@ export class SpreadsheetComponent {
           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}' }}">
+          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-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)">
@@ -1227,6 +1662,10 @@ export class SpreadsheetComponent {
               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>
@@ -1260,16 +1699,98 @@ export class SpreadsheetComponent {
           [sheetDescriptors]="sheets">
         </div>
         <ng-container #dialogContainer></ng-container>
-
-        <kendo-contextmenu
-          #contextMenu
+        
+        <kendo-contextmenu #contextMenu
           [items]="contextMenuItems"
-        (select)="onContextMenuSelect($event)"></kendo-contextmenu>
+          (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]" }] });
+        `, 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,
@@ -1515,7 +2036,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           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}' }}">
+          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-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)">
@@ -1610,6 +2189,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               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>
@@ -1643,20 +2226,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           [sheetDescriptors]="sheets">
         </div>
         <ng-container #dialogContainer></ng-container>
-
-        <kendo-contextmenu
-          #contextMenu
+        
+        <kendo-contextmenu #contextMenu
           [items]="contextMenuItems"
-        (select)="onContextMenuSelect($event)"></kendo-contextmenu>
+          (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]
+                    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 }], propDecorators: { formulaBarInputRef: [{
+        }], 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: [{
@@ -1671,6 +2336,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], contextMenu: [{
                 type: ViewChild,
                 args: ['contextMenu']
+            }], filterMenuTemplate: [{
+                type: ViewChild,
+                args: ['filterMenuTemplate']
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-spreadsheet']
@@ -1719,4 +2387,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }], activeSheetChange: [{
                 type: Output
+            }], clipboard: [{
+                type: Output
             }] } });