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

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

@@ -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,20 @@ export class SortCommandToolbarDirective {
     columnInfoService;
     ngZone;
     renderer;
+    adaptiveGridService;
     popupRef;
     nextId = incrementingId++;
     toolSubs = new Subscription();
     popupSubs;
+    actionSheetCloseSub;
     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 +68,21 @@ 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.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 !== '';
         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 +94,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) {
@@ -97,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;
@@ -104,30 +120,44 @@ 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);
+                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();
         }
-        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 +175,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 +191,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 +207,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 +219,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 }]; } });