@progress/kendo-angular-grid 19.0.0-develop.24 → 19.0.0-develop.25

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';
@@ -13,6 +13,8 @@ import { ColumnMenuItemContentTemplateDirective } from '../../../column-menu/col
 import { ColumnInfoService } from '../../../common/column-info.service';
 import { cloneFilters } from '../../../common/filter-descriptor-differ';
 import { AdaptiveGridService } from '../../../common/adaptiveness.service';
+import { filterIcon } from '@progress/kendo-svg-icons';
+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";
@@ -26,6 +28,7 @@ export class FilterToolbarToolComponent {
     filterService;
     ctx;
     columnInfoService;
+    ngZone;
     adaptiveGridService;
     filterItems;
     menuItems;
@@ -41,12 +44,45 @@ export class FilterToolbarToolComponent {
     columnMenuService;
     columns;
     filter;
+    activeFilterSVGIcon = filterIcon;
+    activeFilterIcon = 'k-i-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, adaptiveGridService) {
+    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() {
@@ -57,7 +93,9 @@ 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) {
@@ -101,7 +139,7 @@ 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 }, { token: i4.AdaptiveGridService }], 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"
@@ -110,9 +148,14 @@ export class FilterToolbarToolComponent {
                 tabindex="0"
                 [column]="getColumnComponent(column)"
                 [text]="column.title || getColumnComponent(column).field"
+                (focus)="onItemFocus(filterItem)"
+                (focusout)="onItemFocusOut()"
                 (keydown.enter)="toggleItem($event, i)"
+                [indicatorSVGIcon]="isFilterApplied(column) ? activeFilterSVGIcon : null"
+                [indicatorIcon]="isFilterApplied(column) ? activeFilterIcon : null"
                 (itemClick)="navigateView(getColumnComponent(column))"
-                [expanded]="false">
+                [expanded]="false"
+                [focused]="isItemFocused(filterItem)">
                 <ng-template kendoGridColumnMenuItemContentTemplate>
                     <kendo-grid-filter-menu-container
                         #filterContainer
@@ -125,7 +168,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", "column"], 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", "indicatorSVGIcon", "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,
@@ -139,9 +182,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 tabindex="0"
                 [column]="getColumnComponent(column)"
                 [text]="column.title || getColumnComponent(column).field"
+                (focus)="onItemFocus(filterItem)"
+                (focusout)="onItemFocusOut()"
                 (keydown.enter)="toggleItem($event, i)"
+                [indicatorSVGIcon]="isFilterApplied(column) ? activeFilterSVGIcon : null"
+                [indicatorIcon]="isFilterApplied(column) ? activeFilterIcon : null"
                 (itemClick)="navigateView(getColumnComponent(column))"
-                [expanded]="false">
+                [expanded]="false"
+                [focused]="isItemFocused(filterItem)">
                 <ng-template kendoGridColumnMenuItemContentTemplate>
                     <kendo-grid-filter-menu-container
                         #filterContainer
@@ -158,7 +206,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 }, { type: i4.AdaptiveGridService }]; }, 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

@@ -53,6 +53,12 @@ export class SortCommandToolbarDirective {
     toolSubs = new Subscription();
     popupSubs;
     removeClickListener;
+    /**
+     * @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;
@@ -66,9 +72,9 @@ export class SortCommandToolbarDirective {
     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;
@@ -88,7 +94,7 @@ export class SortCommandToolbarDirective {
         }
         this.buttonElement?.setAttribute('aria-haspopup', 'dialog');
         this.buttonElement?.setAttribute('aria-expanded', 'false');
-        this.buttonElement?.setAttribute('title', this.ctx.localization.get('sortable'));
+        this.buttonElement?.setAttribute('title', this.ctx.localization.get('sortToolbarToolText'));
     }
     ngOnDestroy() {
         if (this.toolSubs) {
@@ -134,13 +140,16 @@ export class SortCommandToolbarDirective {
         });
         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.buttonElement)) {
-                    this.closePopup();
+                    this.ngZone.run(() => {
+                        this.closePopup();
+                    });
                 }
             });
         });
@@ -176,6 +185,7 @@ export class SortCommandToolbarDirective {
     closePopup() {
         this.buttonElement?.setAttribute('aria-expanded', 'false');
         this.buttonElement?.removeAttribute('aria-controls');
+        this.host.selected = false;
         if (this.popupRef) {
             this.popupRef.close();
             this.popupRef = null;