@progress/kendo-angular-grid 18.5.2 → 18.6.0-develop.1

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

@@ -0,0 +1,184 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { filterIcon } 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 { ColumnInfoService } from '../../../common/column-info.service';
+import { take } from 'rxjs/operators';
+import { FilterService } from '../../../filtering/filter.service';
+import { FilterToolWrapperComponent } from './filter-tool-wrapper.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 "../../../filtering/filter.service";
+import * as i5 from "../../../common/column-info.service";
+let incrementingId = 0;
+/**
+ * Represents the toolbar tool for filtering columns of the Grid.
+ * You can apply this directive to any `kendo-toolbar-button` element inside a
+ * ToolbarComponent used in the Grid.
+ *
+ * When the user clicks the toolbar button that is associated with the directive, the
+ * filter event is triggered.
+ *
+ * @example
+ * ```html-no-run
+ * <kendo-grid>
+ *      <kendo-toolbar>
+ *         <kendo-toolbar-button text="Filter" kendoGridFilterTool></kendo-toolbar-button>
+ *      </kendo-toolbar>
+ * </kendo-grid>
+ * ```
+ */
+export class FilterCommandToolbarDirective {
+    host;
+    popupService;
+    ctx;
+    filterService;
+    columnInfoService;
+    ngZone;
+    renderer;
+    popupRef;
+    nextId = incrementingId++;
+    toolSubs = new Subscription();
+    popupSubs;
+    removeClickListener;
+    constructor(host, popupService, ctx, filterService, columnInfoService, ngZone, renderer) {
+        this.host = host;
+        this.popupService = popupService;
+        this.ctx = ctx;
+        this.filterService = filterService;
+        this.columnInfoService = columnInfoService;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        this.toolSubs = this.host.click.subscribe(e => this.onClick(e));
+        this.toolSubs.add(this.filterService.changes.subscribe(filter => {
+            this.host.showBadge = isPresent(filter) && filter.filters.length > 0;
+        }));
+        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-filter';
+        }
+        if (!hasSvgIcon) {
+            this.host.svgIcon = filterIcon;
+        }
+    }
+    ngAfterViewInit() {
+        if (!isPresent(this.host.text)) {
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                this.host.text = this.ctx.localization.get(`filterToolbarToolText`);
+            });
+        }
+        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('filter'));
+    }
+    ngOnDestroy() {
+        if (this.toolSubs) {
+            this.toolSubs.unsubscribe();
+        }
+        if (this.popupSubs) {
+            this.popupSubs.unsubscribe();
+        }
+        if (this.popupRef) {
+            this.popupRef.close();
+            this.popupRef = null;
+        }
+        if (this.removeClickListener) {
+            this.removeClickListener();
+            this.removeClickListener = null;
+        }
+    }
+    onClick(e) {
+        e.preventDefault();
+        if (this.popupRef) {
+            this.closePopup();
+            return;
+        }
+        this.openPopup();
+    }
+    openPopup() {
+        const direction = this.ctx.localization.rtl ? 'right' : 'left';
+        this.popupRef = this.popupService.open({
+            anchor: this.host.toolbarButtonElement.nativeElement,
+            content: FilterToolWrapperComponent,
+            popupClass: 'k-grid-columnmenu-popup',
+            positionMode: 'absolute',
+            anchorAlign: { vertical: 'bottom', horizontal: direction },
+            popupAlign: { vertical: 'top', horizontal: direction }
+        });
+        this.setPopupAttributes();
+        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();
+                }
+            });
+        });
+        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-filter-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.host.toolbarButtonElement.nativeElement.setAttribute('aria-expanded', 'true');
+        this.host.toolbarButtonElement.nativeElement.setAttribute('aria-controls', popupId);
+    }
+    initPopupProperties() {
+        this.popupRef.content.instance.columnInfoService = this.columnInfoService;
+        this.popupRef.content.instance.ctx = this.ctx;
+        this.popupRef.content.instance.filterService = this.filterService;
+        this.popupRef.content.instance.hostButton = this.host;
+        this.popupSubs.add(this.popupRef.content.instance.close.subscribe(() => {
+            this.closePopup();
+        }));
+    }
+    closePopup() {
+        this.host.toolbarButtonElement.nativeElement.setAttribute('aria-expanded', 'false');
+        this.host.toolbarButtonElement.nativeElement.removeAttribute('aria-controls');
+        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;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCommandToolbarDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.PopupService }, { token: i3.ContextService }, { token: i4.FilterService }, { token: i5.ColumnInfoService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FilterCommandToolbarDirective, isStandalone: true, selector: "[kendoGridFilterTool]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCommandToolbarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridFilterTool]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ToolBarButtonComponent }, { type: i2.PopupService }, { type: i3.ContextService }, { type: i4.FilterService }, { type: i5.ColumnInfoService }, { type: i0.NgZone }, { type: i0.Renderer2 }]; } });

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

@@ -0,0 +1,130 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, EventEmitter, HostBinding, Injector, Output, ViewChild, ViewContainerRef, HostListener } from '@angular/core';
+import { ContextService } from '../../../common/provider.service';
+import { filterClearIcon } from '@progress/kendo-svg-icons';
+import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
+import { FilterService } from '../../../filtering/filter.service';
+import { FilterToolbarToolComponent } from './filter-toolbar-tool.component';
+import { SinglePopupService } from '../../../common/single-popup.service';
+import { ScrollSyncService } from '../../../scrolling/scroll-sync.service';
+import { ColumnInfoService } from '../../../common/column-info.service';
+import { cloneFilters } from '../../../common/filter-descriptor-differ';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-buttons";
+/**
+ * @hidden
+ */
+export class FilterToolWrapperComponent {
+    injector;
+    container;
+    wrapperClasses = true;
+    onEscKeyDown(event) {
+        event.preventDefault();
+        this.close.emit();
+        this.hostButton?.focus(event);
+    }
+    close = new EventEmitter();
+    hostButton;
+    clearIcon = filterClearIcon;
+    columnInfoService;
+    popupRef;
+    filter;
+    subscriptions;
+    _ctx;
+    set ctx(ctx) {
+        this._ctx = ctx;
+        this.createPopup();
+    }
+    get ctx() {
+        return this._ctx;
+    }
+    _filterService;
+    set filterService(filterService) {
+        this._filterService = filterService;
+        this.subscriptions = this._filterService.changes.subscribe(filter => {
+            this.filter = filter;
+        });
+        this.createPopup();
+    }
+    get filterService() {
+        return this._filterService;
+    }
+    columnMenuService;
+    constructor(injector) {
+        this.injector = injector;
+    }
+    ngOnDestroy() {
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
+        if (this.popupRef) {
+            this.popupRef.destroy();
+            this.popupRef = null;
+        }
+    }
+    clear() {
+        if (!this.filter || this.filter.filters?.length === 0) {
+            return;
+        }
+        this.filter = { logic: 'and', filters: [] };
+        this.popupRef.instance.filter = cloneFilters(this.filter);
+        this.filterService.filter(this.filter);
+        this.close.emit();
+    }
+    createPopup() {
+        if (this._ctx && this._filterService && this.container && !this.popupRef) {
+            const customInjector = Injector.create({
+                providers: [
+                    { provide: FilterService, useValue: this._filterService },
+                    { provide: ContextService, useValue: this._ctx },
+                    { provide: ColumnInfoService, useValue: this.columnInfoService },
+                    SinglePopupService,
+                    ScrollSyncService
+                ],
+                parent: this.injector
+            });
+            this.popupRef = this.container.createComponent(FilterToolbarToolComponent, {
+                injector: customInjector
+            });
+            this.subscriptions.add(this.popupRef.instance.close.subscribe(() => this.close.emit()));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterToolWrapperComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterToolWrapperComponent, isStandalone: true, selector: "kendo-filter-tool-wrapper", outputs: { close: "close" }, host: { listeners: { "keydown.escape": "onEscKeyDown($event)" }, properties: { "class.k-column-menu": "this.wrapperClasses", "class.k-column-menu-md": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
+        <ng-container #container></ng-container>
+        <div class="k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer">
+            <button kendoButton [svgIcon]="clearIcon" (click)="clear()">Clear all filters</button>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterToolWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-filter-tool-wrapper',
+                    template: `
+        <ng-container #container></ng-container>
+        <div class="k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer">
+            <button kendoButton [svgIcon]="clearIcon" (click)="clear()">Clear all filters</button>
+        </div>
+    `,
+                    standalone: true,
+                    imports: [KENDO_BUTTON]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { container: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef, static: true }]
+            }], wrapperClasses: [{
+                type: HostBinding,
+                args: ['class.k-column-menu']
+            }, {
+                type: HostBinding,
+                args: ['class.k-column-menu-md']
+            }], onEscKeyDown: [{
+                type: HostListener,
+                args: ['keydown.escape', ['$event']]
+            }], close: [{
+                type: Output
+            }] } });

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

@@ -0,0 +1,150 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { ContextService } from '../../../common/provider.service';
+import { NgFor } from '@angular/common';
+import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
+import { FilterMenuContainerComponent } from '../../../filtering/menu/filter-menu-container.component';
+import { FilterService } from '../../../filtering/filter.service';
+import { ColumnMenuItemComponent } from '../../../column-menu/column-menu-item.component';
+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 * 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";
+/**
+ * @hidden
+ */
+export class FilterToolbarToolComponent {
+    element;
+    filterService;
+    ctx;
+    columnInfoService;
+    filterItems;
+    menuItems;
+    filterContainers;
+    close = new EventEmitter();
+    get hostStyles() {
+        return {
+            'maxHeight': '400px',
+            'overflowX': 'hidden',
+            'overflowY': 'auto'
+        };
+    }
+    columnMenuService;
+    columns;
+    filter;
+    subscriptions;
+    constructor(element, filterService, ctx, columnInfoService) {
+        this.element = element;
+        this.filterService = filterService;
+        this.ctx = ctx;
+        this.columnInfoService = columnInfoService;
+    }
+    ngOnInit() {
+        this.columns = this.columnInfoService.leafNamedColumns.filter(column => column?.filterable);
+        this.filter = this.ctx.grid.filter;
+        this.subscriptions = this.filterService.changes.subscribe(filter => {
+            this.filter = cloneFilters(filter);
+        });
+    }
+    ngAfterViewInit() {
+        this.filterItems?.get(0)?.nativeElement.focus();
+    }
+    ngOnDestroy() {
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
+    }
+    getColumnComponent(column) {
+        return column;
+    }
+    handleClose(filterItem) {
+        filterItem.expanded = false;
+        filterItem.contentState = 'collapsed';
+    }
+    toggleItem(event, index) {
+        const menuItem = this.menuItems.get(index);
+        if (!menuItem || event.target.closest('.k-filter-menu-container')) {
+            return;
+        }
+        if (menuItem.expanded) {
+            this.filterContainers.get(index).isExpanded = false;
+            menuItem.expanded = false;
+            menuItem.contentState = 'collapsed';
+        }
+        else {
+            this.filterContainers.get(index).isExpanded = true;
+            menuItem.expanded = true;
+            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 ɵ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"
+                [text]="column.title || getColumnComponent(column).field"
+                (keydown.enter)="toggleItem($event, i)"
+                [expanded]="false">
+                <ng-template kendoGridColumnMenuItemContentTemplate>
+                    <kendo-grid-filter-menu-container
+                        #filterContainer
+                        (keydown.shift.tab)="$event.stopImmediatePropagation()"
+                        [column]="getColumnComponent(column)"
+                        [filter]="filter"
+                        [isExpanded]="false"
+                        (close)="handleClose(filterItem)">
+                    </kendo-grid-filter-menu-container>
+                </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]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterToolbarToolComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-filter-toolbar-tool',
+                    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"
+                [text]="column.title || getColumnComponent(column).field"
+                (keydown.enter)="toggleItem($event, i)"
+                [expanded]="false">
+                <ng-template kendoGridColumnMenuItemContentTemplate>
+                    <kendo-grid-filter-menu-container
+                        #filterContainer
+                        (keydown.shift.tab)="$event.stopImmediatePropagation()"
+                        [column]="getColumnComponent(column)"
+                        [filter]="filter"
+                        [isExpanded]="false"
+                        (close)="handleClose(filterItem)">
+                    </kendo-grid-filter-menu-container>
+                </ng-template>
+            </kendo-grid-columnmenu-item>
+        </div>
+    `,
+                    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: [{
+                type: ViewChildren,
+                args: ['filterItem', { read: ElementRef }]
+            }], menuItems: [{
+                type: ViewChildren,
+                args: ['filterItem']
+            }], filterContainers: [{
+                type: ViewChildren,
+                args: ['filterContainer']
+            }], close: [{
+                type: Output
+            }] } });

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

@@ -0,0 +1,188 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { arrowsSwapIcon } from '@progress/kendo-svg-icons';
+import { SortToolbarToolComponent } from './sort-toolbar-tool.component';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { ContextService } from '../../../common/provider.service';
+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 * 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";
+let incrementingId = 0;
+/**
+ * Represents the toolbar tool for sorting columns of the Grid.
+ * You can apply this directive to any `kendo-toolbar-button` element inside a
+ * ToolbarComponent used in the Grid.
+ *
+ * When the user clicks the toolbar button that is associated with the directive, the
+ * sort event is triggered.
+ *
+ * @example
+ * ```html-no-run
+ * <kendo-grid>
+ *      <kendo-toolbar>
+ *         <kendo-toolbar-button text="Sort" kendoGridSortTool></kendo-toolbar-button>
+ *      </kendo-toolbar>
+ * </kendo-grid>
+ * ```
+ */
+export class SortCommandToolbarDirective {
+    host;
+    popupService;
+    ctx;
+    sortService;
+    columnInfoService;
+    ngZone;
+    renderer;
+    popupRef;
+    nextId = incrementingId++;
+    toolSubs = new Subscription();
+    popupSubs;
+    removeClickListener;
+    constructor(host, popupService, ctx, sortService, columnInfoService, ngZone, renderer) {
+        this.host = host;
+        this.popupService = popupService;
+        this.ctx = ctx;
+        this.sortService = sortService;
+        this.columnInfoService = columnInfoService;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+    }
+    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;
+        }));
+        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';
+        }
+        if (!hasSvgIcon) {
+            this.host.svgIcon = arrowsSwapIcon;
+        }
+    }
+    ngAfterViewInit() {
+        if (!isPresent(this.host.text)) {
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                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'));
+    }
+    ngOnDestroy() {
+        if (this.toolSubs) {
+            this.toolSubs.unsubscribe();
+        }
+        if (this.popupSubs) {
+            this.popupSubs.unsubscribe();
+        }
+        if (this.popupRef) {
+            this.popupRef.close();
+            this.popupRef = null;
+        }
+        if (this.removeClickListener) {
+            this.removeClickListener();
+            this.removeClickListener = null;
+        }
+    }
+    onClick(e) {
+        e.preventDefault();
+        if (this.popupRef) {
+            this.closePopup();
+            return;
+        }
+        this.openPopup();
+    }
+    openPopup() {
+        const direction = this.ctx.localization.rtl ? 'right' : 'left';
+        this.popupRef = this.popupService.open({
+            anchor: this.host.toolbarButtonElement.nativeElement,
+            content: SortToolbarToolComponent,
+            popupClass: 'k-grid-columnmenu-popup',
+            positionMode: 'absolute',
+            anchorAlign: { vertical: 'bottom', horizontal: direction },
+            popupAlign: { vertical: 'top', horizontal: direction }
+        });
+        this.setPopupAttributes();
+        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();
+                }
+            });
+        });
+        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-sort-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.host.toolbarButtonElement.nativeElement.setAttribute('aria-expanded', 'true');
+        this.host.toolbarButtonElement.nativeElement.setAttribute('aria-controls', popupId);
+    }
+    initPopupProperties() {
+        this.popupRef.content.instance.columnInfoService = this.columnInfoService;
+        this.popupRef.content.instance.ctx = this.ctx;
+        this.popupRef.content.instance.sortService = this.sortService;
+        this.popupRef.content.instance.hostButton = this.host;
+        this.popupSubs.add(this.popupRef.content.instance.sortClear.subscribe(() => {
+            this.closePopup();
+        }));
+        this.popupSubs.add(this.popupRef.content.instance.close.subscribe(() => {
+            this.closePopup();
+        }));
+    }
+    closePopup() {
+        this.host.toolbarButtonElement.nativeElement.setAttribute('aria-expanded', 'false');
+        this.host.toolbarButtonElement.nativeElement.removeAttribute('aria-controls');
+        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;
+        }
+    }
+    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 });
+    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: [{
+            type: Directive,
+            args: [{
+                    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 }]; } });