@progress/kendo-angular-grid 19.0.0-develop.8 → 19.0.0

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,19 +90,40 @@ 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;
     }
     handleClose(filterItem) {
         filterItem.expanded = false;
         filterItem.contentState = 'collapsed';
+        const filterContainer = this.filterContainers.find(container => container.column === filterItem.column);
+        if (filterContainer) {
+            // reset the child filter to ensure it is reinitialized based on the global filter on the next open
+            filterContainer.resetChildFilters();
+        }
     }
     toggleItem(event, index) {
         const menuItem = this.menuItems.get(index);
@@ -83,16 +141,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 +169,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 +181,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 +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 }]; }, 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/group-command-tool.directive.mjs

@@ -0,0 +1,206 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, NgZone, Renderer2 } from '@angular/core';
+import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
+import { Subscription } from 'rxjs';
+import { groupIcon } from '@progress/kendo-svg-icons';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { ContextService } from '../../../common/provider.service';
+import { closest, isDocumentAvailable, isPresent } from '@progress/kendo-angular-common';
+import { take } from 'rxjs/operators';
+import { AdaptiveGridService } from '../../../common/adaptiveness.service';
+import { GroupToolbarToolComponent } from './group-toolbar-tool.component';
+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/adaptiveness.service";
+let incrementingId = 0;
+/**
+ * Represents the toolbar tool for grouping columns of the Grid.
+ * You can apply this directive to any `kendo-toolbar-button` element inside a
+ * ToolbarComponent used in the Grid.
+ *
+ * @example
+ * ```html-no-run
+ * <kendo-grid>
+ *      <kendo-toolbar>
+ *         <kendo-toolbar-button text="Group" kendoGridGroupTool></kendo-toolbar-button>
+ *      </kendo-toolbar>
+ * </kendo-grid>
+ * ```
+ */
+export class GroupCommandToolbarDirective {
+    host;
+    popupService;
+    ctx;
+    ngZone;
+    renderer;
+    adaptiveGridService;
+    popupRef;
+    nextId = incrementingId++;
+    toolSubs = new Subscription();
+    popupSubs;
+    actionSheetCloseSub;
+    removeClickListener;
+    constructor(host, popupService, ctx, ngZone, renderer, adaptiveGridService) {
+        this.host = host;
+        this.popupService = popupService;
+        this.ctx = ctx;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.adaptiveGridService = adaptiveGridService;
+    }
+    ngOnInit() {
+        this.toolSubs = this.host.click.subscribe(e => this.onClick(e));
+        this.toolSubs.add(this.ctx.grid.groupChange.subscribe(group => {
+            this.host.showBadge = this.isGroupingApplied(group);
+        }));
+        this.host.hasBadgeContainer = true;
+        this.host.showBadge = this.isGroupingApplied(this.ctx.grid.group);
+        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 = 'group';
+        }
+        if (!hasSvgIcon) {
+            this.host.svgIcon = groupIcon;
+        }
+    }
+    ngAfterViewInit() {
+        if (!isPresent(this.host.text)) {
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                this.host.text = this.ctx.localization.get(`groupToolbarToolText`);
+            });
+        }
+        this.buttonElement?.setAttribute('aria-haspopup', 'dialog');
+        this.buttonElement?.setAttribute('aria-expanded', 'false');
+        this.buttonElement?.setAttribute('title', this.ctx.localization.get('groupToolbarToolText'));
+    }
+    ngOnDestroy() {
+        if (this.toolSubs) {
+            this.toolSubs.unsubscribe();
+        }
+        if (this.popupSubs) {
+            this.popupSubs.unsubscribe();
+        }
+        if (this.popupRef) {
+            this.popupRef.close();
+            this.popupRef = null;
+        }
+        if (this.actionSheetCloseSub) {
+            this.actionSheetCloseSub.unsubscribe();
+            this.actionSheetCloseSub = null;
+        }
+        if (this.removeClickListener) {
+            this.removeClickListener();
+            this.removeClickListener = null;
+        }
+    }
+    onClick(e) {
+        e.preventDefault();
+        if (this.ctx.grid.adaptiveMode === 'auto' && this.adaptiveGridService.windowSize !== 'large') {
+            if (!this.ctx.grid.isActionSheetExpanded) {
+                this.adaptiveGridService.viewType = 'groupToolbarTool';
+                this.ctx.grid.adaptiveRenderer.actionSheet.toggle(true);
+                this.host.selected = true;
+                this.actionSheetCloseSub = this.ctx.grid.adaptiveRenderer.actionSheet.collapse.subscribe(() => this.host.selected = false);
+            }
+        }
+        else {
+            if (this.popupRef) {
+                this.closePopup();
+                return;
+            }
+            this.openPopup();
+        }
+    }
+    openPopup() {
+        const direction = this.ctx.localization.rtl ? 'right' : 'left';
+        this.popupRef = this.popupService.open({
+            anchor: this.buttonElement,
+            content: GroupToolbarToolComponent,
+            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.buttonElement)) {
+                    this.ngZone.run(() => {
+                        this.closePopup();
+                    });
+                }
+            });
+        });
+        this.popupSubs = this.popupRef.popup.instance.anchorViewportLeave.subscribe(() => {
+            this.popupSubs?.unsubscribe();
+            this.popupSubs = null;
+            this.closePopup();
+        });
+        this.initPopupProperties();
+    }
+    setPopupAttributes() {
+        const popupElement = this.popupRef.popupElement;
+        const popupId = `k-group-tool-${this.nextId}-popup`;
+        const popupAriaElement = popupElement.querySelector('.k-popup');
+        this.renderer.setAttribute(popupElement, 'dir', this.ctx.localization.rtl ? 'rtl' : 'ltr');
+        this.renderer.setAttribute(popupAriaElement, 'id', popupId);
+        this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
+        this.buttonElement?.setAttribute('aria-expanded', 'true');
+        this.buttonElement?.setAttribute('aria-controls', popupId);
+    }
+    initPopupProperties() {
+        this.popupRef.content.instance.ctx = this.ctx;
+        this.popupRef.content.instance.hostButton = this.host;
+        this.popupSubs.add(this.popupRef.content.instance.groupClear.subscribe(() => {
+            this.closePopup();
+        }));
+        this.popupSubs.add(this.popupRef.content.instance.close.subscribe(() => {
+            this.closePopup();
+        }));
+    }
+    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;
+        }
+        if (this.popupSubs) {
+            this.popupSubs.unsubscribe();
+            this.popupSubs = null;
+        }
+        if (this.removeClickListener) {
+            this.removeClickListener();
+            this.removeClickListener = null;
+        }
+    }
+    get buttonElement() {
+        return this.host.getButton();
+    }
+    isGroupingApplied(group) {
+        return isPresent(group) && group.length > 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupCommandToolbarDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.PopupService }, { token: i3.ContextService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i4.AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GroupCommandToolbarDirective, isStandalone: true, selector: "[kendoGridGroupTool]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupCommandToolbarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridGroupTool]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ToolBarButtonComponent }, { type: i2.PopupService }, { type: i3.ContextService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i4.AdaptiveGridService }]; } });