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

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 }]; } });

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

@@ -0,0 +1,425 @@
+/**-----------------------------------------------------------------------------------------
+* 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, Output, Input, HostListener, ViewChildren, QueryList, NgZone } from '@angular/core';
+import { NgFor, NgIf } from '@angular/common';
+import { IconWrapperComponent } from '@progress/kendo-angular-icons';
+import { chevronUpIcon, chevronDownIcon, xCircleIcon, plusCircleIcon, xIcon } from '@progress/kendo-svg-icons';
+import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
+import { take } from 'rxjs/operators';
+import { isPresent } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-buttons";
+/**
+ * @hidden
+ */
+export class GroupToolbarToolComponent {
+    element;
+    ngZone;
+    hostClass = true;
+    get lgClass() {
+        return this.adaptive;
+    }
+    get mdClass() {
+        return !this.adaptive;
+    }
+    onEscKeyDown(event) {
+        event.preventDefault();
+        this.hostButton?.focus(event);
+        this.close.emit();
+    }
+    set groupItems(items) {
+        this._groupItems = items;
+        if (items?.first && (!isPresent(this.currentFocusedItemIndex) || this.currentFocusedItemIndex >= items.length || this.currentFocusedItemIndex < 0)) {
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                this.currentFocusedItemIndex = 0;
+                this.groupItems.first.nativeElement.focus();
+            });
+            return;
+        }
+        if (items?.first) {
+            items.get(this.currentFocusedItemIndex).nativeElement.focus();
+        }
+    }
+    get groupItems() {
+        return this._groupItems;
+    }
+    _groupItems;
+    adaptive = false;
+    close = new EventEmitter();
+    groupClear = new EventEmitter();
+    currentFocusedItemIndex;
+    group = new Array();
+    columns = [];
+    iconSize = 'medium';
+    upIcon = chevronUpIcon;
+    downIcon = chevronDownIcon;
+    removeIcon = xCircleIcon;
+    addIcon = plusCircleIcon;
+    clearIcon = xIcon;
+    _ctx;
+    set ctx(ctx) {
+        if (!ctx || !ctx.grid) {
+            return;
+        }
+        this._ctx = ctx;
+        this.group = ctx.grid.group;
+        this.subscription = ctx.grid.groupChange.subscribe((group) => {
+            this.group = group;
+            this.updateGroupedColumns();
+        });
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            this.updateGroupedColumns();
+        });
+    }
+    get ctx() {
+        return this._ctx;
+    }
+    groupedColumns = [];
+    ungroupedColumns = [];
+    subscription;
+    hostButton;
+    constructor(element, ngZone) {
+        this.element = element;
+        this.ngZone = ngZone;
+    }
+    ngOnInit() {
+        this.iconSize = this.adaptive ? 'large' : 'medium';
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    addGroup(column, ev) {
+        ev.stopImmediatePropagation();
+        const index = this.group.length;
+        const groups = this.group.filter(x => x.field !== column?.field);
+        if (groups.length || this.group.length === 0) {
+            this.group = [...groups.slice(0, index), { field: column?.field }, ...groups.slice(index)];
+            this.ctx.grid.groupChange.emit(this.group);
+            this.updateGroupedColumns();
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                const newIndex = this.groupedColumns.length - 1;
+                const newItem = this.groupItems.get(newIndex);
+                if (newItem) {
+                    this.currentFocusedItemIndex = (this.groupedColumns?.length || 0) + newIndex;
+                    newItem.nativeElement.focus();
+                }
+            });
+        }
+    }
+    removeGroup(column, ev) {
+        ev.stopImmediatePropagation();
+        this.group = this.group.filter(x => x.field !== column?.field);
+        this.ctx.grid.groupChange.emit(this.group);
+        this.updateGroupedColumns();
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            const newIndex = this.ungroupedColumns.findIndex(ungroupedColumn => ungroupedColumn?.field === column?.field);
+            const newItem = this.groupItems.get(newIndex + this.groupedColumns.length);
+            if (newItem) {
+                newItem.nativeElement.focus();
+            }
+        });
+    }
+    moveGroupUp(column, ev) {
+        ev.stopImmediatePropagation();
+        const index = this.group.findIndex(x => x.field === column?.field);
+        if (index > 0) {
+            const groupToMove = this.group[index];
+            this.group.splice(index, 1);
+            this.group.splice(index - 1, 0, groupToMove);
+            this.ctx.grid.groupChange.emit(this.group);
+            this.updateGroupedColumns();
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                const newItem = this.groupItems.get(index - 1);
+                if (newItem) {
+                    newItem.nativeElement.focus();
+                    this.currentFocusedItemIndex = index - 1;
+                }
+            });
+        }
+    }
+    moveGroupDown(column, ev) {
+        ev.stopImmediatePropagation();
+        const index = this.group.findIndex(x => x.field === column?.field);
+        if (index < this.group.length - 1) {
+            const groupToMove = this.group[index];
+            this.group.splice(index, 1);
+            this.group.splice(index + 1, 0, groupToMove);
+            this.ctx.grid.groupChange.emit(this.group);
+            this.updateGroupedColumns();
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                const newItem = this.groupItems.get(index + 1);
+                if (newItem) {
+                    newItem.nativeElement.focus();
+                    this.currentFocusedItemIndex = index + 1;
+                }
+            });
+        }
+    }
+    clear() {
+        this.group = [];
+        this.ctx.grid.groupChange.emit(this.group);
+        this.groupClear.emit(this.group);
+    }
+    getColumnComponent(column) {
+        return column;
+    }
+    onItemFocus(groupIndex, index) {
+        const currentIndex = (typeof groupIndex === 'number' ? groupIndex : this.groupedColumns?.length || 0) + index;
+        this.currentFocusedItemIndex = currentIndex;
+    }
+    handleGroupedKeydown(column, index, ev) {
+        if (ev.code === 'Enter' || ev.code === 'Backspace' || ev.code === 'Delete') {
+            this.removeGroup(column, ev);
+        }
+        else if (ev.code === 'ArrowUp' && ev.shiftKey) {
+            this.moveGroupUp(column, ev);
+        }
+        else if (ev.code === 'ArrowDown' && ev.shiftKey) {
+            this.moveGroupDown(column, ev);
+        }
+        else if (ev.code === 'ArrowUp') {
+            this.navigateToPreviousItem();
+        }
+        else if (ev.code === 'ArrowDown') {
+            this.navigateToNextItem();
+        }
+    }
+    handleUngroupedKeydown(column, index, ev) {
+        if (ev.code === 'Enter') {
+            this.addGroup(column, ev);
+        }
+        else if (ev.code === 'ArrowUp') {
+            this.navigateToPreviousItem();
+        }
+        else if (ev.code === 'ArrowDown') {
+            this.navigateToNextItem();
+        }
+    }
+    updateGroupedColumns() {
+        this.groupedColumns = this.group
+            .map(group => this.ctx.grid.columns.find(column => column?.field === group.field))
+            .filter(column => !!column);
+        this.ungroupedColumns = this.ctx.grid.columns.filter(column => column?.groupable &&
+            !this.groupedColumns.some(gc => gc?.field === column?.field));
+    }
+    navigateToNextItem() {
+        if (this.currentFocusedItemIndex < this.groupItems.length - 1) {
+            this.currentFocusedItemIndex++;
+            this.groupItems.get(this.currentFocusedItemIndex).nativeElement.focus();
+        }
+        else if (this.currentFocusedItemIndex === this.groupItems.length - 1) {
+            this.currentFocusedItemIndex = 0;
+            this.groupItems.get(this.currentFocusedItemIndex).nativeElement.focus();
+        }
+    }
+    navigateToPreviousItem() {
+        if (this.currentFocusedItemIndex > 0) {
+            this.currentFocusedItemIndex--;
+            this.groupItems.get(this.currentFocusedItemIndex).nativeElement.focus();
+        }
+        else if (this.currentFocusedItemIndex === 0) {
+            this.currentFocusedItemIndex = this.groupItems.length - 1;
+            this.groupItems.get(this.currentFocusedItemIndex).nativeElement.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupToolbarToolComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GroupToolbarToolComponent, isStandalone: true, selector: "kendo-group-toolbar-tool", inputs: { adaptive: "adaptive" }, outputs: { close: "close", groupClear: "groupClear" }, host: { listeners: { "keydown.escape": "onEscKeyDown($event)" }, properties: { "class.k-group-menu": "this.hostClass", "class.k-group-menu-lg": "this.lgClass", "class.k-group-menu-md": "this.mdClass" } }, viewQueries: [{ propertyName: "groupItems", predicate: ["groupItem"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+        <div *ngIf="groupedColumns.length" class="k-group-menu-item-wrap">
+            <div *ngFor="let column of groupedColumns; let i = index"
+                #groupItem
+                role="button"
+                class="k-group-menu-item"
+                tabindex="0"
+                (keydown)="handleGroupedKeydown(column, i, $event)"
+                (focus)="onItemFocus(i, 0)"
+            >
+                <span class="k-group-menu-item-actions" *ngIf="groupedColumns.length > 1">
+                    <span
+                        class="k-group-menu-item-action k-group-menu-item-up-action"
+                        (click)="moveGroupUp(column, $event)"
+                        [attr.aria-disabled]="i === 0"
+                        [class.k-disabled]="i === 0"
+                    >
+                        <kendo-icon-wrapper
+                            name="arrow-chevron-up"
+                            [svgIcon]="upIcon"
+                            [size]="iconSize"
+                        ></kendo-icon-wrapper>
+                    </span>
+                    <span
+                        class="k-group-menu-item-action k-group-menu-item-down-action"
+                        (click)="moveGroupDown(column, $event)"
+                        [attr.aria-disabled]="i === groupedColumns.length - 1"
+                        [class.k-disabled]="i === groupedColumns.length - 1"
+                    >
+                        <kendo-icon-wrapper
+                            name="arrow-chevron-down"
+                            [svgIcon]="downIcon"
+                            [size]="iconSize"
+                        ></kendo-icon-wrapper>
+                    </span>
+                </span>
+                <span class="k-group-item-text">{{column.title || getColumnComponent(column).field}}</span>
+                <span class="k-spacer"></span>
+                <span class="k-group-menu-item-actions">
+                    <span class="k-group-menu-item-action k-group-menu-item-remove-action" (click)="removeGroup(column, $event)">
+                        <kendo-icon-wrapper
+                            name="x-circle"
+                            [svgIcon]="removeIcon"
+                            [size]="iconSize"
+                        ></kendo-icon-wrapper>
+                    </span>
+                </span>
+            </div>
+        </div>
+
+        <div *ngIf="ungroupedColumns.length" class="k-group-menu-item-wrap">
+            <div *ngFor="let column of ungroupedColumns; let i = index"
+                #groupItem
+                role="button"
+                class="k-group-menu-item"
+                tabindex="0"
+                (keydown)="handleUngroupedKeydown(column, i, $event)"
+                (focus)="onItemFocus(null, i)"
+            >
+                <span class="k-group-item-text">{{column.title || getColumnComponent(column).field}}</span>
+                <span class="k-spacer"></span>
+                <span class="k-group-menu-item-actions">
+                    <span class="k-group-menu-item-action k-group-menu-item-add-action" (click)="addGroup(column, $event)">
+                        <kendo-icon-wrapper
+                            name="plus-circle"
+                            [svgIcon]="addIcon"
+                            [size]="iconSize"
+                        ></kendo-icon-wrapper>
+                    </span>
+                </span>
+            </div>
+        </div>
+
+        <div *ngIf="!adaptive" class="k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer">
+            <button kendoButton
+                [svgIcon]="clearIcon"
+                (click)="clear()"
+                icon="x"
+            >
+                {{ctx?.localization.get('groupClearButton')}}
+            </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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupToolbarToolComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-group-toolbar-tool',
+                    template: `
+        <div *ngIf="groupedColumns.length" class="k-group-menu-item-wrap">
+            <div *ngFor="let column of groupedColumns; let i = index"
+                #groupItem
+                role="button"
+                class="k-group-menu-item"
+                tabindex="0"
+                (keydown)="handleGroupedKeydown(column, i, $event)"
+                (focus)="onItemFocus(i, 0)"
+            >
+                <span class="k-group-menu-item-actions" *ngIf="groupedColumns.length > 1">
+                    <span
+                        class="k-group-menu-item-action k-group-menu-item-up-action"
+                        (click)="moveGroupUp(column, $event)"
+                        [attr.aria-disabled]="i === 0"
+                        [class.k-disabled]="i === 0"
+                    >
+                        <kendo-icon-wrapper
+                            name="arrow-chevron-up"
+                            [svgIcon]="upIcon"
+                            [size]="iconSize"
+                        ></kendo-icon-wrapper>
+                    </span>
+                    <span
+                        class="k-group-menu-item-action k-group-menu-item-down-action"
+                        (click)="moveGroupDown(column, $event)"
+                        [attr.aria-disabled]="i === groupedColumns.length - 1"
+                        [class.k-disabled]="i === groupedColumns.length - 1"
+                    >
+                        <kendo-icon-wrapper
+                            name="arrow-chevron-down"
+                            [svgIcon]="downIcon"
+                            [size]="iconSize"
+                        ></kendo-icon-wrapper>
+                    </span>
+                </span>
+                <span class="k-group-item-text">{{column.title || getColumnComponent(column).field}}</span>
+                <span class="k-spacer"></span>
+                <span class="k-group-menu-item-actions">
+                    <span class="k-group-menu-item-action k-group-menu-item-remove-action" (click)="removeGroup(column, $event)">
+                        <kendo-icon-wrapper
+                            name="x-circle"
+                            [svgIcon]="removeIcon"
+                            [size]="iconSize"
+                        ></kendo-icon-wrapper>
+                    </span>
+                </span>
+            </div>
+        </div>
+
+        <div *ngIf="ungroupedColumns.length" class="k-group-menu-item-wrap">
+            <div *ngFor="let column of ungroupedColumns; let i = index"
+                #groupItem
+                role="button"
+                class="k-group-menu-item"
+                tabindex="0"
+                (keydown)="handleUngroupedKeydown(column, i, $event)"
+                (focus)="onItemFocus(null, i)"
+            >
+                <span class="k-group-item-text">{{column.title || getColumnComponent(column).field}}</span>
+                <span class="k-spacer"></span>
+                <span class="k-group-menu-item-actions">
+                    <span class="k-group-menu-item-action k-group-menu-item-add-action" (click)="addGroup(column, $event)">
+                        <kendo-icon-wrapper
+                            name="plus-circle"
+                            [svgIcon]="addIcon"
+                            [size]="iconSize"
+                        ></kendo-icon-wrapper>
+                    </span>
+                </span>
+            </div>
+        </div>
+
+        <div *ngIf="!adaptive" class="k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer">
+            <button kendoButton
+                [svgIcon]="clearIcon"
+                (click)="clear()"
+                icon="x"
+            >
+                {{ctx?.localization.get('groupClearButton')}}
+            </button>
+        </div>
+    `,
+                    standalone: true,
+                    imports: [NgFor, NgIf, IconWrapperComponent, KENDO_BUTTON]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-group-menu']
+            }], lgClass: [{
+                type: HostBinding,
+                args: ['class.k-group-menu-lg']
+            }], mdClass: [{
+                type: HostBinding,
+                args: ['class.k-group-menu-md']
+            }], onEscKeyDown: [{
+                type: HostListener,
+                args: ['keydown.escape', ['$event']]
+            }], groupItems: [{
+                type: ViewChildren,
+                args: ['groupItem', { read: ElementRef }]
+            }], adaptive: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }], groupClear: [{
+                type: Output
+            }] } });

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

@@ -52,6 +52,7 @@ export class SortCommandToolbarDirective {
     nextId = incrementingId++;
     toolSubs = new Subscription();
     popupSubs;
+    actionSheetCloseSub;
     removeClickListener;
     /**
      * @hidden
@@ -74,6 +75,7 @@ export class SortCommandToolbarDirective {
         this.toolSubs.add(this.sortService.changes.subscribe(sort => {
             this.host.showBadge = this.isSortingApplied(sort);
         }));
+        this.host.hasBadgeContainer = true;
         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 !== '';
@@ -107,6 +109,10 @@ export class SortCommandToolbarDirective {
             this.popupRef.close();
             this.popupRef = null;
         }
+        if (this.actionSheetCloseSub) {
+            this.actionSheetCloseSub.unsubscribe();
+            this.actionSheetCloseSub = null;
+        }
         if (this.removeClickListener) {
             this.removeClickListener();
             this.removeClickListener = null;
@@ -118,6 +124,8 @@ export class SortCommandToolbarDirective {
             if (!this.ctx.grid.isActionSheetExpanded) {
                 this.adaptiveGridService.viewType = 'sortToolbarTool';
                 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 {