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

package/esm2022/spreadsheet.module.mjs

@@ -41,6 +41,8 @@ import * as i29 from "./tools/increase-decimal-tool.directive";
 import * as i30 from "./tools/decrease-decimal-tool.directive";
 import * as i31 from "./tools/align/horizontal-align-tool.directive";
 import * as i32 from "./tools/align/vertical-align-tool.directive";
+import * as i33 from "./tools/filter-sort/filter-tool.directive";
+import * as i34 from "./tools/filter-sort/sort-tool.directive";
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) definition for the Spreadsheet component.
@@ -57,7 +59,7 @@ import * as i32 from "./tools/align/vertical-align-tool.directive";
  */
 export class SpreadsheetModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpreadsheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SpreadsheetModule, imports: [i1.SpreadsheetComponent, i2.CustomMessagesComponent, i3.SpreadsheetBoldDirective, i4.SpreadsheetDataValidationDirective, i5.SpreadsheetItalicDirective, i6.SpreadsheetUnderlineDirective, i7.SpreadsheetLoadFileComponent, i8.SpreadsheetSaveFileDirective, i9.SpreadsheetFormatDirective, i10.SpreadsheetUndoDirective, i11.SpreadsheetRedoDirective, i12.SpreadsheetFontFamilyComponent, i13.SpreadsheetFontSizeComponent, i14.SpreadsheetBackColorComponent, i15.SpreadsheetForeColorComponent, i16.SpreadsheetGridLinesDirective, i17.SpreadsheetAddColumnLeftButtonDirective, i18.SpreadsheetAddColumnRightButtonDirective, i19.SpreadsheetAddRowAboveButtonDirective, i20.SpreadsheetAddRowBelowButtonDirective, i21.SpreadsheetDeleteColumnButtonDirective, i22.SpreadsheetDeleteRowButtonDirective, i23.SpreadsheetTextAlignDirective, i24.SpreadsheetTextWrapDirective, i25.SpreadsheetMergeDirective, i26.SpreadsheetInsertLinkDirective, i27.SpreadsheetIncreaseFontSizeDirective, i28.SpreadsheetDecreaseFontSizeDirective, i29.SpreadsheetIncreaseDecimalDirective, i30.SpreadsheetDecreaseDecimalDirective, i31.SpreadsheetHorizontalTextAlignDirective, i32.SpreadsheetVerticalTextAlignDirective], exports: [i1.SpreadsheetComponent, i2.CustomMessagesComponent, i3.SpreadsheetBoldDirective, i4.SpreadsheetDataValidationDirective, i5.SpreadsheetItalicDirective, i6.SpreadsheetUnderlineDirective, i7.SpreadsheetLoadFileComponent, i8.SpreadsheetSaveFileDirective, i9.SpreadsheetFormatDirective, i10.SpreadsheetUndoDirective, i11.SpreadsheetRedoDirective, i12.SpreadsheetFontFamilyComponent, i13.SpreadsheetFontSizeComponent, i14.SpreadsheetBackColorComponent, i15.SpreadsheetForeColorComponent, i16.SpreadsheetGridLinesDirective, i17.SpreadsheetAddColumnLeftButtonDirective, i18.SpreadsheetAddColumnRightButtonDirective, i19.SpreadsheetAddRowAboveButtonDirective, i20.SpreadsheetAddRowBelowButtonDirective, i21.SpreadsheetDeleteColumnButtonDirective, i22.SpreadsheetDeleteRowButtonDirective, i23.SpreadsheetTextAlignDirective, i24.SpreadsheetTextWrapDirective, i25.SpreadsheetMergeDirective, i26.SpreadsheetInsertLinkDirective, i27.SpreadsheetIncreaseFontSizeDirective, i28.SpreadsheetDecreaseFontSizeDirective, i29.SpreadsheetIncreaseDecimalDirective, i30.SpreadsheetDecreaseDecimalDirective, i31.SpreadsheetHorizontalTextAlignDirective, i32.SpreadsheetVerticalTextAlignDirective] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SpreadsheetModule, imports: [i1.SpreadsheetComponent, i2.CustomMessagesComponent, i3.SpreadsheetBoldDirective, i4.SpreadsheetDataValidationDirective, i5.SpreadsheetItalicDirective, i6.SpreadsheetUnderlineDirective, i7.SpreadsheetLoadFileComponent, i8.SpreadsheetSaveFileDirective, i9.SpreadsheetFormatDirective, i10.SpreadsheetUndoDirective, i11.SpreadsheetRedoDirective, i12.SpreadsheetFontFamilyComponent, i13.SpreadsheetFontSizeComponent, i14.SpreadsheetBackColorComponent, i15.SpreadsheetForeColorComponent, i16.SpreadsheetGridLinesDirective, i17.SpreadsheetAddColumnLeftButtonDirective, i18.SpreadsheetAddColumnRightButtonDirective, i19.SpreadsheetAddRowAboveButtonDirective, i20.SpreadsheetAddRowBelowButtonDirective, i21.SpreadsheetDeleteColumnButtonDirective, i22.SpreadsheetDeleteRowButtonDirective, i23.SpreadsheetTextAlignDirective, i24.SpreadsheetTextWrapDirective, i25.SpreadsheetMergeDirective, i26.SpreadsheetInsertLinkDirective, i27.SpreadsheetIncreaseFontSizeDirective, i28.SpreadsheetDecreaseFontSizeDirective, i29.SpreadsheetIncreaseDecimalDirective, i30.SpreadsheetDecreaseDecimalDirective, i31.SpreadsheetHorizontalTextAlignDirective, i32.SpreadsheetVerticalTextAlignDirective, i33.SpreadsheetFilterDirective, i34.SpreadsheetSortDirective], exports: [i1.SpreadsheetComponent, i2.CustomMessagesComponent, i3.SpreadsheetBoldDirective, i4.SpreadsheetDataValidationDirective, i5.SpreadsheetItalicDirective, i6.SpreadsheetUnderlineDirective, i7.SpreadsheetLoadFileComponent, i8.SpreadsheetSaveFileDirective, i9.SpreadsheetFormatDirective, i10.SpreadsheetUndoDirective, i11.SpreadsheetRedoDirective, i12.SpreadsheetFontFamilyComponent, i13.SpreadsheetFontSizeComponent, i14.SpreadsheetBackColorComponent, i15.SpreadsheetForeColorComponent, i16.SpreadsheetGridLinesDirective, i17.SpreadsheetAddColumnLeftButtonDirective, i18.SpreadsheetAddColumnRightButtonDirective, i19.SpreadsheetAddRowAboveButtonDirective, i20.SpreadsheetAddRowBelowButtonDirective, i21.SpreadsheetDeleteColumnButtonDirective, i22.SpreadsheetDeleteRowButtonDirective, i23.SpreadsheetTextAlignDirective, i24.SpreadsheetTextWrapDirective, i25.SpreadsheetMergeDirective, i26.SpreadsheetInsertLinkDirective, i27.SpreadsheetIncreaseFontSizeDirective, i28.SpreadsheetDecreaseFontSizeDirective, i29.SpreadsheetIncreaseDecimalDirective, i30.SpreadsheetDecreaseDecimalDirective, i31.SpreadsheetHorizontalTextAlignDirective, i32.SpreadsheetVerticalTextAlignDirective, i33.SpreadsheetFilterDirective, i34.SpreadsheetSortDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpreadsheetModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [i1.SpreadsheetComponent, i7.SpreadsheetLoadFileComponent, i12.SpreadsheetFontFamilyComponent, i13.SpreadsheetFontSizeComponent, i14.SpreadsheetBackColorComponent, i15.SpreadsheetForeColorComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpreadsheetModule, decorators: [{

package/esm2022/tools/filter-sort/filter-tool.directive.mjs

@@ -0,0 +1,75 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectorRef, Directive } from '@angular/core';
+import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
+import { SpreadsheetLocalizationService } from '../../localization/spreadsheet-localization.service';
+import { SpreadsheetService } from '../../common/spreadsheet.service';
+import { SpreadsheetToolsService } from '../tools.service';
+import { SpreadsheetCommandButton } from '../shared/spreadsheet-command-button';
+import { isPresent } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-toolbar";
+import * as i2 from "../../localization/spreadsheet-localization.service";
+import * as i3 from "../../common/spreadsheet.service";
+import * as i4 from "../tools.service";
+/**
+ * @hidden
+ */
+export class SpreadsheetFilterDirective extends SpreadsheetCommandButton {
+    cdr;
+    constructor(button, localization, spreadsheetService, toolsService, cdr) {
+        super('filter', button, localization, spreadsheetService, toolsService, {
+            command: 'FilterCommand'
+        });
+        this.cdr = cdr;
+        this.subs.add(spreadsheetService.componentInitialized.subscribe(() => {
+            this.toggleActiveState(button);
+        }));
+        this.subs.add(spreadsheetService.selectionChanged.subscribe((range) => {
+            this.toggleActiveState(button, range);
+        }));
+        this.subs.add(spreadsheetService.activeSheetChanged.subscribe(() => {
+            this.toggleActiveState(button);
+        }));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    clickHandler() {
+        this.spreadsheetService.spreadsheetComponent.closePopup();
+        const options = {
+            command: 'FilterCommand',
+            options: { property: 'hasFilter' }
+        };
+        this.spreadsheetService.spreadsheet.executeCommand(options);
+    }
+    toggleActiveState(button, range) {
+        const currentSheet = this.spreadsheetService.spreadsheet.activeSheet();
+        const currentRange = isPresent(range) ? range : currentSheet.range(currentSheet.activeCell());
+        let disabled = true;
+        let rangeHasValue = false;
+        currentRange.values().forEach((nestedArr) => {
+            if (nestedArr.some(value => isPresent(value) && value !== '') && !rangeHasValue) {
+                rangeHasValue = true;
+            }
+        });
+        const currentRangeRef = currentRange._ref;
+        const isSingleCell = currentRangeRef?.ref === 'cell' || (currentRangeRef.bottomRight.row === currentRangeRef.topLeft.row && currentRangeRef.bottomRight.col === currentRangeRef.topLeft.col);
+        disabled = currentRangeRef?.height() <= 1 || !rangeHasValue || isSingleCell;
+        if (button.disabled !== disabled) {
+            button.disabled = disabled;
+            this.cdr.detectChanges();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpreadsheetFilterDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: SpreadsheetFilterDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoSpreadsheetFilter]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpreadsheetFilterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetFilter]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1.ToolBarButtonComponent }, { type: i2.SpreadsheetLocalizationService }, { type: i3.SpreadsheetService }, { type: i4.SpreadsheetToolsService }, { type: i0.ChangeDetectorRef }] });

package/esm2022/tools/filter-sort/sort-tool.directive.mjs

@@ -0,0 +1,57 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { ToolBarDropDownButtonComponent } from '@progress/kendo-angular-toolbar';
+import { SpreadsheetLocalizationService } from '../../localization/spreadsheet-localization.service';
+import { SpreadsheetService } from '../../common/spreadsheet.service';
+import { commandIcons, commandSVGIcons } from '../shared/command-icons';
+import { SORT } from '../shared/constants';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-toolbar";
+import * as i2 from "../../localization/spreadsheet-localization.service";
+import * as i3 from "../../common/spreadsheet.service";
+/**
+ * @hidden
+ */
+export class SpreadsheetSortDirective {
+    spreadsheetService;
+    commandName = 'sort';
+    subs = new Subscription();
+    constructor(host, localization, spreadsheetService) {
+        this.spreadsheetService = spreadsheetService;
+        host.svgIcon = commandSVGIcons[this.commandName];
+        host.icon = commandIcons[this.commandName];
+        host.arrowIcon = true;
+        host.fillMode = 'flat';
+        host.data = SORT.map(item => ({ ...item, textKey: localization.get(item.commandId) }));
+        this.subs.add(host.itemClick.subscribe((e) => this.onItemClick(e)));
+        host.title = localization.get(this.commandName);
+        host.textField = 'textKey';
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    onItemClick(item) {
+        if (item.disabled) {
+            return;
+        }
+        const dir = item.value;
+        const options = {
+            value: dir,
+            sheet: false
+        };
+        this.spreadsheetService.spreadsheet.executeCommand({ command: 'SortCommand', options });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpreadsheetSortDirective, deps: [{ token: i1.ToolBarDropDownButtonComponent }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: SpreadsheetSortDirective, isStandalone: true, selector: "[kendoSpreadsheetSort]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpreadsheetSortDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoSpreadsheetSort]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1.ToolBarDropDownButtonComponent }, { type: i2.SpreadsheetLocalizationService }, { type: i3.SpreadsheetService }] });

package/esm2022/tools/index.mjs

@@ -22,7 +22,9 @@ export { SpreadsheetInsertLinkDirective } from './insert/insert-link-tool.direct
 export { SpreadsheetIncreaseFontSizeDirective } from './font-size/increase-font-tool.directive';
 export { SpreadsheetDecreaseFontSizeDirective } from './font-size/decrease-font-tool.directive';
 export { SpreadsheetIncreaseDecimalDirective } from './increase-decimal-tool.directive';
+export { SpreadsheetFilterDirective } from './filter-sort/filter-tool.directive';
 export { SpreadsheetDecreaseDecimalDirective } from './decrease-decimal-tool.directive';
 export { SpreadsheetHorizontalTextAlignDirective } from './align/horizontal-align-tool.directive';
 export { SpreadsheetVerticalTextAlignDirective } from './align/vertical-align-tool.directive';
+export { SpreadsheetSortDirective } from './filter-sort/sort-tool.directive';
 export * from './tables';

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

@@ -2,7 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { alignCenterIcon, alignJustifyIcon, alignLeftIcon, alignRightIcon, boldIcon, dropletIcon, foregroundColorIcon, italicIcon, tableColumnDeleteIcon, tableColumnInsertLeftIcon, tableColumnInsertRightIcon, tableRowDeleteIcon, tableRowInsertAboveIcon, tableRowInsertBelowIcon, underlineIcon, arrowRotateCcwIcon, arrowRotateCwIcon, bordersNoneIcon, alignTopIcon, alignMiddleIcon, alignBottomIcon, textWrapIcon, folderOpenIcon, downloadIcon, customFormatIcon, fontSizeIcon, fontFamilyIcon, cellsMergeHorizontallyIcon, cellsMergeIcon, cellsMergeVerticallyIcon, tableUnmergeIcon, linkIcon, fontGrowIcon, fontShrinkIcon, decimalDecreaseIcon, decimalIncreaseIcon, copyIcon, cutIcon, clipboardIcon, eyeSlashIcon, eyeIcon, exclamationCircleIcon } from '@progress/kendo-svg-icons';
+import { alignCenterIcon, alignJustifyIcon, alignLeftIcon, alignRightIcon, boldIcon, dropletIcon, foregroundColorIcon, italicIcon, tableColumnDeleteIcon, tableColumnInsertLeftIcon, tableColumnInsertRightIcon, tableRowDeleteIcon, tableRowInsertAboveIcon, tableRowInsertBelowIcon, underlineIcon, arrowRotateCcwIcon, arrowRotateCwIcon, bordersNoneIcon, alignTopIcon, alignMiddleIcon, alignBottomIcon, textWrapIcon, folderOpenIcon, downloadIcon, customFormatIcon, fontSizeIcon, fontFamilyIcon, cellsMergeHorizontallyIcon, cellsMergeIcon, cellsMergeVerticallyIcon, tableUnmergeIcon, linkIcon, fontGrowIcon, fontShrinkIcon, decimalDecreaseIcon, decimalIncreaseIcon, copyIcon, cutIcon, clipboardIcon, eyeSlashIcon, eyeIcon, exclamationCircleIcon, filterIcon, sortAscIcon, sortDescIcon, sortClearIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -54,7 +54,12 @@ export const commandIcons = {
     hideRow: 'eye-slash',
     unhideRow: 'eye',
     hideColumn: 'eye-slash',
-    unhideColumn: 'eye'
+    unhideColumn: 'eye',
+    filter: 'filter',
+    sort: 'sort-asc',
+    sortAsc: 'sort-asc',
+    sortDesc: 'sort-desc',
+    unsort: 'sort-clear'
 };
 /**
  * @hidden
@@ -107,5 +112,10 @@ export const commandSVGIcons = {
     hideRow: eyeSlashIcon,
     unhideRow: eyeIcon,
     hideColumn: eyeSlashIcon,
-    unhideColumn: eyeIcon
+    unhideColumn: eyeIcon,
+    filter: filterIcon,
+    sort: sortAscIcon,
+    sortAsc: sortAscIcon,
+    sortDesc: sortDescIcon,
+    unsort: sortClearIcon
 };

package/esm2022/tools/shared/constants.mjs

@@ -64,6 +64,13 @@ export const MERGE = [
     { icon: commandIcons.mergeVertically, svgIcon: commandSVGIcons.mergeVertically, textKey: 'Merge vertically', commandName: 'vertically', value: 'vertically', disabled: false, commandId: 'mergeVertically' },
     { icon: commandIcons.unmerge, svgIcon: commandSVGIcons.unmerge, textKey: 'Unmerge', commandName: 'unmerge', value: 'unmerge', disabled: false, commandId: 'unmerge' }
 ];
+/**
+ * @hidden
+ */
+export const SORT = [
+    { icon: commandIcons.sortAsc, svgIcon: commandSVGIcons.sortAsc, textKey: 'Sort range A to Z', commandName: 'sortAsc', value: 'asc', disabled: false, commandId: 'sortAsc' },
+    { icon: commandIcons.sortDesc, svgIcon: commandSVGIcons.sortDesc, textKey: 'Sort range Z to A', commandName: 'sortDesc', value: 'desc', disabled: false, commandId: 'sortDesc' }
+];
 /**
  * @hidden
  */