@progress/kendo-angular-grid 19.0.0-develop.3 → 19.0.0-develop.31

package/esm2022/rendering/toolbar/tools/filter-tool-wrapper.component.mjs

@@ -12,6 +12,7 @@ import { SinglePopupService } from '../../../common/single-popup.service';
 import { ScrollSyncService } from '../../../scrolling/scroll-sync.service';
 import { ColumnInfoService } from '../../../common/column-info.service';
 import { cloneFilters } from '../../../common/filter-descriptor-differ';
+import { AdaptiveGridService } from '../../../common/adaptiveness.service';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-buttons";
 /**
@@ -26,22 +27,23 @@ export class FilterToolWrapperComponent {
         this.close.emit();
         this.hostButton?.focus(event);
     }
+    onClick(event) {
+        if (this.hostButton.location !== 'toolbar') {
+            event.stopImmediatePropagation();
+        }
+    }
     close = new EventEmitter();
     hostButton;
     clearIcon = filterClearIcon;
     columnInfoService;
-    popupRef;
-    filter;
-    subscriptions;
-    _ctx;
     set ctx(ctx) {
         this._ctx = ctx;
+        this.filter = ctx.grid.filter;
         this.createPopup();
     }
     get ctx() {
         return this._ctx;
     }
-    _filterService;
     set filterService(filterService) {
         this._filterService = filterService;
         this.subscriptions = this._filterService.changes.subscribe(filter => {
@@ -53,6 +55,11 @@ export class FilterToolWrapperComponent {
         return this._filterService;
     }
     columnMenuService;
+    popupRef;
+    filter;
+    subscriptions;
+    _ctx;
+    _filterService;
     constructor(injector) {
         this.injector = injector;
     }
@@ -81,6 +88,7 @@ export class FilterToolWrapperComponent {
                     { provide: FilterService, useValue: this._filterService },
                     { provide: ContextService, useValue: this._ctx },
                     { provide: ColumnInfoService, useValue: this.columnInfoService },
+                    AdaptiveGridService,
                     SinglePopupService,
                     ScrollSyncService
                 ],
@@ -93,10 +101,15 @@ export class FilterToolWrapperComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterToolWrapperComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterToolWrapperComponent, isStandalone: true, selector: "kendo-filter-tool-wrapper", outputs: { close: "close" }, host: { listeners: { "keydown.escape": "onEscKeyDown($event)" }, properties: { "class.k-column-menu": "this.wrapperClasses", "class.k-column-menu-md": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterToolWrapperComponent, isStandalone: true, selector: "kendo-filter-tool-wrapper", outputs: { close: "close" }, host: { listeners: { "keydown.escape": "onEscKeyDown($event)", "click": "onClick($event)" }, properties: { "class.k-column-menu": "this.wrapperClasses", "class.k-column-menu-md": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
         <ng-container #container></ng-container>
         <div class="k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer">
-            <button kendoButton [svgIcon]="clearIcon" (click)="clear()">Clear all filters</button>
+            <button kendoButton
+                    [svgIcon]="clearIcon"
+                    icon="filter-clear"
+                    (click)="clear()">
+                    {{ctx?.localization.get('filterClearAllButton')}}
+            </button>
         </div>
     `, isInline: true, dependencies: [{ kind: "component", type: i1.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"] }] });
 }
@@ -107,7 +120,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     template: `
         <ng-container #container></ng-container>
         <div class="k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer">
-            <button kendoButton [svgIcon]="clearIcon" (click)="clear()">Clear all filters</button>
+            <button kendoButton
+                    [svgIcon]="clearIcon"
+                    icon="filter-clear"
+                    (click)="clear()">
+                    {{ctx?.localization.get('filterClearAllButton')}}
+            </button>
         </div>
     `,
                     standalone: true,
@@ -125,6 +143,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], onEscKeyDown: [{
                 type: HostListener,
                 args: ['keydown.escape', ['$event']]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
             }], close: [{
                 type: Output
             }] } });

package/esm2022/rendering/toolbar/tools/filter-toolbar-tool.component.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 { Component, ElementRef, EventEmitter, Output, QueryList, ViewChildren } from '@angular/core';
+import { Component, ElementRef, EventEmitter, NgZone, Output, QueryList, ViewChildren } from '@angular/core';
 import { ContextService } from '../../../common/provider.service';
 import { NgFor } from '@angular/common';
 import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
@@ -12,10 +12,13 @@ import { ColumnMenuItemComponent } from '../../../column-menu/column-menu-item.c
 import { ColumnMenuItemContentTemplateDirective } from '../../../column-menu/column-menu-item-content-template.directive';
 import { ColumnInfoService } from '../../../common/column-info.service';
 import { cloneFilters } from '../../../common/filter-descriptor-differ';
+import { AdaptiveGridService } from '../../../common/adaptiveness.service';
+import { take } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "../../../filtering/filter.service";
 import * as i2 from "../../../common/provider.service";
 import * as i3 from "../../../common/column-info.service";
+import * as i4 from "../../../common/adaptiveness.service";
 /**
  * @hidden
  */
@@ -24,6 +27,8 @@ export class FilterToolbarToolComponent {
     filterService;
     ctx;
     columnInfoService;
+    ngZone;
+    adaptiveGridService;
     filterItems;
     menuItems;
     filterContainers;
@@ -38,12 +43,44 @@ export class FilterToolbarToolComponent {
     columnMenuService;
     columns;
     filter;
+    isFilterApplied(column) {
+        if (!this.filter?.filters) {
+            return false;
+        }
+        if (Array.isArray(this.filter.filters)) {
+            for (const filterGroup of this.filter.filters) {
+                if (filterGroup.filters && Array.isArray(filterGroup.filters)) {
+                    for (const filter of filterGroup.filters) {
+                        if (filter.field === column.field) {
+                            return true;
+                        }
+                    }
+                }
+                else if (filterGroup.field === column.field) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    isItemFocused(filterItem) {
+        return this.currentFocusedItem === filterItem;
+    }
+    onItemFocus(item) {
+        this.currentFocusedItem = item;
+    }
+    onItemFocusOut() {
+        this.currentFocusedItem = null;
+    }
+    currentFocusedItem = null;
     subscriptions;
-    constructor(element, filterService, ctx, columnInfoService) {
+    constructor(element, filterService, ctx, columnInfoService, ngZone, adaptiveGridService) {
         this.element = element;
         this.filterService = filterService;
         this.ctx = ctx;
         this.columnInfoService = columnInfoService;
+        this.ngZone = ngZone;
+        this.adaptiveGridService = adaptiveGridService;
     }
     ngOnInit() {
         this.columns = this.columnInfoService.leafNamedColumns.filter(column => column?.filterable);
@@ -53,13 +90,29 @@ export class FilterToolbarToolComponent {
         });
     }
     ngAfterViewInit() {
-        this.filterItems?.get(0)?.nativeElement.focus();
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            this.filterItems?.get(0)?.nativeElement.focus();
+        });
     }
     ngOnDestroy() {
         if (this.subscriptions) {
             this.subscriptions.unsubscribe();
         }
     }
+    navigateView(column) {
+        if (this.ctx.grid.isActionSheetExpanded && this.adaptiveGridService.viewType === 'filterToolbarTool') {
+            const componentRef = this.ctx.grid.adaptiveRenderer.filterToolbarToolTemplate.createComponent(FilterMenuContainerComponent);
+            componentRef.instance.column = this.getColumnComponent(column);
+            componentRef.instance.filter = this.filter;
+            this.subscriptions.add(componentRef.instance.close.subscribe(() => {
+                this.adaptiveGridService.reset();
+            }));
+            this.adaptiveGridService.filterMenuContainerComponentRef = componentRef;
+            this.adaptiveGridService.secondaryView = 'columnFilter';
+            this.adaptiveGridService.column = this.getColumnComponent(column);
+            this.ctx.grid.adaptiveRenderer.actionSheet.nextView();
+        }
+    }
     getColumnComponent(column) {
         return column;
     }
@@ -83,16 +136,22 @@ export class FilterToolbarToolComponent {
             menuItem.contentState = 'expanded';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterToolbarToolComponent, deps: [{ token: i0.ElementRef }, { token: i1.FilterService }, { token: i2.ContextService }, { token: i3.ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterToolbarToolComponent, deps: [{ token: i0.ElementRef }, { token: i1.FilterService }, { token: i2.ContextService }, { token: i3.ColumnInfoService }, { token: i0.NgZone }, { token: i4.AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterToolbarToolComponent, isStandalone: true, selector: "kendo-filter-toolbar-tool", outputs: { close: "close" }, viewQueries: [{ propertyName: "filterItems", predicate: ["filterItem"], descendants: true, read: ElementRef }, { propertyName: "menuItems", predicate: ["filterItem"], descendants: true }, { propertyName: "filterContainers", predicate: ["filterContainer"], descendants: true }], ngImport: i0, template: `
         <div [style]="hostStyles">
             <kendo-grid-columnmenu-item *ngFor="let column of columns; let i = index"
                 class="k-columnmenu-item-wrapper" #filterItem
                 role="button"
                 tabindex="0"
+                [column]="getColumnComponent(column)"
                 [text]="column.title || getColumnComponent(column).field"
+                (focus)="onItemFocus(filterItem)"
+                (focusout)="onItemFocusOut()"
                 (keydown.enter)="toggleItem($event, i)"
-                [expanded]="false">
+                [indicatorIcon]="isFilterApplied(column)"
+                (itemClick)="navigateView(getColumnComponent(column))"
+                [expanded]="false"
+                [focused]="isItemFocused(filterItem)">
                 <ng-template kendoGridColumnMenuItemContentTemplate>
                     <kendo-grid-filter-menu-container
                         #filterContainer
@@ -105,7 +164,7 @@ export class FilterToolbarToolComponent {
                 </ng-template>
             </kendo-grid-columnmenu-item>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterToolbarToolComponent, decorators: [{
             type: Component,
@@ -117,9 +176,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 class="k-columnmenu-item-wrapper" #filterItem
                 role="button"
                 tabindex="0"
+                [column]="getColumnComponent(column)"
                 [text]="column.title || getColumnComponent(column).field"
+                (focus)="onItemFocus(filterItem)"
+                (focusout)="onItemFocusOut()"
                 (keydown.enter)="toggleItem($event, i)"
-                [expanded]="false">
+                [indicatorIcon]="isFilterApplied(column)"
+                (itemClick)="navigateView(getColumnComponent(column))"
+                [expanded]="false"
+                [focused]="isItemFocused(filterItem)">
                 <ng-template kendoGridColumnMenuItemContentTemplate>
                     <kendo-grid-filter-menu-container
                         #filterContainer
@@ -136,7 +201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [NgFor, KENDO_BUTTON, FilterMenuContainerComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.FilterService }, { type: i2.ContextService }, { type: i3.ColumnInfoService }]; }, propDecorators: { filterItems: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.FilterService }, { type: i2.ContextService }, { type: i3.ColumnInfoService }, { type: i0.NgZone }, { type: i4.AdaptiveGridService }]; }, propDecorators: { filterItems: [{
                 type: ViewChildren,
                 args: ['filterItem', { read: ElementRef }]
             }], menuItems: [{

package/esm2022/rendering/toolbar/tools/sort-command-tool.directive.mjs

@@ -13,12 +13,14 @@ import { SortService } from '../../../common/sort.service';
 import { closest, isDocumentAvailable, isPresent } from '@progress/kendo-angular-common';
 import { ColumnInfoService } from '../../../common/column-info.service';
 import { take } from 'rxjs/operators';
+import { AdaptiveGridService } from '../../../common/adaptiveness.service';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-toolbar";
 import * as i2 from "@progress/kendo-angular-popup";
 import * as i3 from "../../../common/provider.service";
 import * as i4 from "../../../common/sort.service";
 import * as i5 from "../../../common/column-info.service";
+import * as i6 from "../../../common/adaptiveness.service";
 let incrementingId = 0;
 /**
  * Represents the toolbar tool for sorting columns of the Grid.
@@ -45,12 +47,19 @@ export class SortCommandToolbarDirective {
     columnInfoService;
     ngZone;
     renderer;
+    adaptiveGridService;
     popupRef;
     nextId = incrementingId++;
     toolSubs = new Subscription();
     popupSubs;
     removeClickListener;
-    constructor(host, popupService, ctx, sortService, columnInfoService, ngZone, renderer) {
+    /**
+     * @hidden
+     */
+    isSortingApplied(sort) {
+        return isPresent(sort) && sort.length > 0 && sort.filter(item => item.dir !== undefined).length > 0;
+    }
+    constructor(host, popupService, ctx, sortService, columnInfoService, ngZone, renderer, adaptiveGridService) {
         this.host = host;
         this.popupService = popupService;
         this.ctx = ctx;
@@ -58,19 +67,20 @@ export class SortCommandToolbarDirective {
         this.columnInfoService = columnInfoService;
         this.ngZone = ngZone;
         this.renderer = renderer;
+        this.adaptiveGridService = adaptiveGridService;
     }
     ngOnInit() {
         this.toolSubs = this.host.click.subscribe(e => this.onClick(e));
         this.toolSubs.add(this.sortService.changes.subscribe(sort => {
-            const isSortingApplied = isPresent(sort) && sort.length > 0 && sort.filter(item => item.dir !== undefined).length > 0;
-            this.host.showBadge = isSortingApplied;
+            this.host.showBadge = this.isSortingApplied(sort);
         }));
+        this.host.showBadge = this.isSortingApplied(this.ctx.grid.sort);
         const hasToolbarIcon = isPresent(this.host.toolbarOptions.icon) && this.host.toolbarOptions.icon !== '';
         const hasOverflowIcon = isPresent(this.host.overflowOptions.icon) && this.host.overflowOptions.icon !== '';
         const hasIcon = hasToolbarIcon && hasOverflowIcon;
         const hasSvgIcon = isPresent(this.host.toolbarOptions.svgIcon) && isPresent(this.host.overflowOptions.svgIcon);
         if (!hasIcon) {
-            this.host.icon = 'k-i-arrows-swap';
+            this.host.icon = 'arrows-swap';
         }
         if (!hasSvgIcon) {
             this.host.svgIcon = arrowsSwapIcon;
@@ -82,9 +92,9 @@ export class SortCommandToolbarDirective {
                 this.host.text = this.ctx.localization.get(`sortToolbarToolText`);
             });
         }
-        this.host.toolbarButtonElement.nativeElement.setAttribute('aria-haspopup', 'dialog');
-        this.host.toolbarButtonElement.nativeElement.setAttribute('aria-expanded', 'false');
-        this.host.toolbarButtonElement.nativeElement.setAttribute('title', this.ctx.localization.get('sortable'));
+        this.buttonElement?.setAttribute('aria-haspopup', 'dialog');
+        this.buttonElement?.setAttribute('aria-expanded', 'false');
+        this.buttonElement?.setAttribute('title', this.ctx.localization.get('sortToolbarToolText'));
     }
     ngOnDestroy() {
         if (this.toolSubs) {
@@ -104,30 +114,42 @@ export class SortCommandToolbarDirective {
     }
     onClick(e) {
         e.preventDefault();
-        if (this.popupRef) {
-            this.closePopup();
-            return;
+        if (this.ctx.grid.adaptiveMode === 'auto' && this.adaptiveGridService.windowSize !== 'large') {
+            if (!this.ctx.grid.isActionSheetExpanded) {
+                this.adaptiveGridService.viewType = 'sortToolbarTool';
+                this.ctx.grid.adaptiveRenderer.actionSheet.toggle(true);
+            }
+        }
+        else {
+            if (this.popupRef) {
+                this.closePopup();
+                return;
+            }
+            this.openPopup();
         }
-        this.openPopup();
     }
     openPopup() {
         const direction = this.ctx.localization.rtl ? 'right' : 'left';
         this.popupRef = this.popupService.open({
-            anchor: this.host.toolbarButtonElement.nativeElement,
+            anchor: this.buttonElement,
             content: SortToolbarToolComponent,
             popupClass: 'k-grid-columnmenu-popup',
             positionMode: 'absolute',
             anchorAlign: { vertical: 'bottom', horizontal: direction },
             popupAlign: { vertical: 'top', horizontal: direction }
         });
+        this.adaptiveGridService.popupRef = this.popupRef;
         this.setPopupAttributes();
+        this.host.selected = true;
         this.ngZone.runOutsideAngular(() => {
             if (!isDocumentAvailable()) {
                 return;
             }
             this.removeClickListener = this.renderer.listen('document', 'click', (e) => {
-                if (this.popupRef && !closest(e.target, node => node === this.popupRef.popupElement || node === this.host.toolbarButtonElement.nativeElement)) {
-                    this.closePopup();
+                if (this.popupRef && !closest(e.target, node => node === this.popupRef.popupElement || node === this.buttonElement)) {
+                    this.ngZone.run(() => {
+                        this.closePopup();
+                    });
                 }
             });
         });
@@ -145,8 +167,8 @@ export class SortCommandToolbarDirective {
         this.renderer.setAttribute(popupElement, 'dir', this.ctx.localization.rtl ? 'rtl' : 'ltr');
         this.renderer.setAttribute(popupAriaElement, 'id', popupId);
         this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
-        this.host.toolbarButtonElement.nativeElement.setAttribute('aria-expanded', 'true');
-        this.host.toolbarButtonElement.nativeElement.setAttribute('aria-controls', popupId);
+        this.buttonElement?.setAttribute('aria-expanded', 'true');
+        this.buttonElement?.setAttribute('aria-controls', popupId);
     }
     initPopupProperties() {
         this.popupRef.content.instance.columnInfoService = this.columnInfoService;
@@ -161,8 +183,9 @@ export class SortCommandToolbarDirective {
         }));
     }
     closePopup() {
-        this.host.toolbarButtonElement.nativeElement.setAttribute('aria-expanded', 'false');
-        this.host.toolbarButtonElement.nativeElement.removeAttribute('aria-controls');
+        this.buttonElement?.setAttribute('aria-expanded', 'false');
+        this.buttonElement?.removeAttribute('aria-controls');
+        this.host.selected = false;
         if (this.popupRef) {
             this.popupRef.close();
             this.popupRef = null;
@@ -176,7 +199,10 @@ export class SortCommandToolbarDirective {
             this.removeClickListener = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortCommandToolbarDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.PopupService }, { token: i3.ContextService }, { token: i4.SortService }, { token: i5.ColumnInfoService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    get buttonElement() {
+        return this.host.getButton();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortCommandToolbarDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.PopupService }, { token: i3.ContextService }, { token: i4.SortService }, { token: i5.ColumnInfoService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i6.AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SortCommandToolbarDirective, isStandalone: true, selector: "[kendoGridSortTool]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortCommandToolbarDirective, decorators: [{
@@ -185,4 +211,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridSortTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ToolBarButtonComponent }, { type: i2.PopupService }, { type: i3.ContextService }, { type: i4.SortService }, { type: i5.ColumnInfoService }, { type: i0.NgZone }, { type: i0.Renderer2 }]; } });
+        }], ctorParameters: function () { return [{ type: i1.ToolBarButtonComponent }, { type: i2.PopupService }, { type: i3.ContextService }, { type: i4.SortService }, { type: i5.ColumnInfoService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i6.AdaptiveGridService }]; } });

package/esm2022/rendering/toolbar/tools/sort-toolbar-tool.component.mjs

@@ -12,7 +12,10 @@ import { normalize } from '../../../columns/sort-settings';
 import { take } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-buttons";
-const directions = initialDirection => initialDirection === "asc" ? ["asc", "desc"] : ["desc", "asc"];
+/**
+ * @hidden
+ */
+export const directions = initialDirection => initialDirection === "asc" ? ["asc", "desc"] : ["desc", "asc"];
 /**
  * @hidden
  */
@@ -75,7 +78,10 @@ export class SortToolbarToolComponent {
             this.subscription.unsubscribe();
         }
     }
-    toggleSort(column) {
+    toggleSort(column, ev) {
+        if (this.hostButton.location !== 'toolbar') {
+            ev.stopImmediatePropagation();
+        }
         const field = column?.field;
         if (!field) {
             return;
@@ -142,8 +148,8 @@ export class SortToolbarToolComponent {
                 #sortItem
                 role="button"
                 class="k-columnmenu-item"
-                (click)="toggleSort(column)"
-                (keydown.enter)="toggleSort(column)"
+                (click)="toggleSort(column, $event)"
+                (keydown.enter)="toggleSort(column, $event)"
                 [tabindex]="'0'"
             >
                 {{column.title || getColumnComponent(column).field}}
@@ -160,7 +166,12 @@ export class SortToolbarToolComponent {
         </div>
 
         <div class="k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer">
-            <button kendoButton [svgIcon]="clearIcon" (click)="clearSorting()" >Clear sorting</button>
+            <button kendoButton
+                    [svgIcon]="clearIcon"
+                    icon="x"
+                    (click)="clearSorting()">
+                    {{ctx?.localization.get('sortClearButton')}}
+                </button>
         </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i1.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"] }] });
 }
@@ -179,8 +190,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 #sortItem
                 role="button"
                 class="k-columnmenu-item"
-                (click)="toggleSort(column)"
-                (keydown.enter)="toggleSort(column)"
+                (click)="toggleSort(column, $event)"
+                (keydown.enter)="toggleSort(column, $event)"
                 [tabindex]="'0'"
             >
                 {{column.title || getColumnComponent(column).field}}
@@ -197,7 +208,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </div>
 
         <div class="k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer">
-            <button kendoButton [svgIcon]="clearIcon" (click)="clearSorting()" >Clear sorting</button>
+            <button kendoButton
+                    [svgIcon]="clearIcon"
+                    icon="x"
+                    (click)="clearSorting()">
+                    {{ctx?.localization.get('sortClearButton')}}
+                </button>
         </div>
     `,
                     standalone: true,

package/esm2022/row-reordering/row-reorder.service.mjs

@@ -24,6 +24,10 @@ export class RowReorderService {
     constructor(renderer) {
         this.renderer = renderer;
     }
+    ngOnDestroy() {
+        this.destroyDropIndicator();
+        this.destroyHintElement();
+    }
     press(ev) {
         this.dragTarget = ev.dragTarget;
         this.offsetY = ev.dragEvent.offsetY;
@@ -55,12 +59,14 @@ export class RowReorderService {
     }
     dragEnd() {
         this.destroyDropIndicator();
+        this.destroyHintElement();
         this.dragTarget = null;
         this.dropTarget = null;
         this.hintElement = null;
     }
     drop(ev) {
         this.destroyDropIndicator();
+        this.destroyHintElement();
         const rowReorderArgs = this.rowReorderArgs(this.dragTarget, this.dropTarget, ev.dragData);
         this.rowReorder.emit(rowReorderArgs);
     }
@@ -142,6 +148,15 @@ export class RowReorderService {
             this.dropIndicator = null;
         }
     }
+    destroyHintElement() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        if (this.hintElement?.parentElement) {
+            this.hintElement.parentElement.removeChild(this.hintElement);
+            this.hintElement = null;
+        }
+    }
     decorateHint() {
         hintClasses.forEach(className => this.renderer.addClass(this.hintElement, className));
         Object.keys(hintStyles)

package/esm2022/selection/selection.service.mjs

@@ -144,6 +144,7 @@ export class SelectionService {
             ev.rangeStartRow = { dataItem: this.lastSelectionData, index: this.lastSelectionStartIndex };
             ev.rangeEndRow = { dataItem: item.data, index: item.index };
         }
+        this.syncCurrentSelection(ev);
         this.changes.emit(ev);
     }
     toggle(item) {
@@ -223,6 +224,7 @@ export class SelectionService {
                         deselectedRows: [rowArgs],
                         selectedRows: []
                     };
+                    this.syncCurrentSelection(ev);
                     this.changes.emit(ev);
                 }
             }
@@ -295,6 +297,7 @@ export class SelectionService {
         if (this.options.cellAggregates) {
             ev.cellAggregates = this.aggregateService.onSelectionChange(ev);
         }
+        this.syncCurrentSelection(ev);
         this.changes.emit(ev);
     }
     selectRange(startIndex, endIndex, preserveSelection, existingSelections = []) {
@@ -428,6 +431,14 @@ export class SelectionService {
             this.dataChangedSubscription = null;
         }
     }
+    syncCurrentSelection(ev) {
+        for (const row of ev.deselectedRows) {
+            this.currentSelection.splice(row.index, 1);
+        }
+        for (const row of ev.selectedRows) {
+            this.currentSelection[row.index] = row;
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionService, deps: [{ token: i1.DomEventsService }, { token: i2.CellSelectionAggregateService }, { token: i3.LocalDataChangesService }, { token: i4.NavigationService }, { token: i5.ContextService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionService });
 }

package/esm2022/state-management/grid-state.models.mjs

@@ -0,0 +1,26 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PreventableEvent } from "@progress/kendo-angular-common";
+/**
+ * Arguments for the `undo` and `redo` events.
+ */
+export class UndoRedoEvent extends PreventableEvent {
+    /**
+     * The event data of the original action that triggered the state change.
+     */
+    originalEvent;
+    /**
+     * The grid state and rendered data at the time of the action.
+     */
+    gridState;
+    /**
+     * @hidden
+     */
+    constructor({ originalEvent, gridState }) {
+        super();
+        this.originalEvent = originalEvent;
+        this.gridState = gridState;
+    }
+}