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

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

@@ -0,0 +1,222 @@
+/**-----------------------------------------------------------------------------------------
+* 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, HostListener, ViewChildren, QueryList, NgZone } from '@angular/core';
+import { NgFor, NgIf } from '@angular/common';
+import { IconWrapperComponent } from '@progress/kendo-angular-icons';
+import { sortAscSmallIcon, sortDescSmallIcon, xIcon } from '@progress/kendo-svg-icons';
+import { isPresent } from '@progress/kendo-angular-common';
+import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
+import { normalize } from '../../../columns/sort-settings';
+import { take } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-buttons";
+const directions = initialDirection => initialDirection === "asc" ? ["asc", "desc"] : ["desc", "asc"];
+/**
+ * @hidden
+ */
+export class SortToolbarToolComponent {
+    element;
+    ngZone;
+    sortItems;
+    wrapperClasses = true;
+    onEscKeyDown(event) {
+        event.preventDefault();
+        this.hostButton?.focus(event);
+        this.close.emit();
+    }
+    close = new EventEmitter();
+    sortClear = new EventEmitter();
+    sort = new Array();
+    columns = [];
+    sortAscSmallIcon = sortAscSmallIcon;
+    sortDescSmallIcon = sortDescSmallIcon;
+    clearIcon = xIcon;
+    _columnInfoService;
+    set columnInfoService(columnInfoService) {
+        this._columnInfoService = columnInfoService;
+        this.columns = this.columnInfoService.leafNamedColumns.filter(column => column?.sortable);
+    }
+    get columnInfoService() {
+        return this._columnInfoService;
+    }
+    _ctx;
+    set ctx(ctx) {
+        this._ctx = ctx;
+        this.sort = ctx.grid.sort;
+    }
+    get ctx() {
+        return this._ctx;
+    }
+    _sortService;
+    set sortService(sortService) {
+        this._sortService = sortService;
+        this.subscription = this._sortService.changes.subscribe(sort => {
+            this.sort = sort;
+        });
+    }
+    get sortService() {
+        return this._sortService;
+    }
+    subscription;
+    hostButton;
+    constructor(element, ngZone) {
+        this.element = element;
+        this.ngZone = ngZone;
+    }
+    ngAfterViewInit() {
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            this.sortItems?.get(0)?.nativeElement.focus();
+        });
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    toggleSort(column) {
+        const field = column?.field;
+        if (!field) {
+            return;
+        }
+        const descriptor = this.getDescriptor(column);
+        this.sort = descriptor;
+        this.sortService.sort(descriptor);
+    }
+    getColumnComponent(column) {
+        return column;
+    }
+    sortDescriptor(field) {
+        return this.sort.find(item => item.field === field) || { field };
+    }
+    getDescriptor(column) {
+        const { allowUnsort, mode, initialDirection } = normalize(this.ctx.grid.sortable, column.sortable);
+        const field = column?.field;
+        if (!field) {
+            return;
+        }
+        const descriptorT = this.sort.find(item => item.field === field) || { field };
+        const [first, second] = directions(initialDirection);
+        let dir = first;
+        if (descriptorT.dir === first) {
+            dir = second;
+        }
+        else if (descriptorT.dir === second && allowUnsort) {
+            dir = undefined;
+        }
+        const descriptor = { field, dir };
+        if (mode === 'single') {
+            return [descriptor];
+        }
+        return [...this.sort.filter(desc => desc.field !== field), descriptor];
+    }
+    showSortNumbering(column) {
+        return this.sort
+            && this.sort.filter(({ dir }) => isPresent(dir)).length > 1
+            && this.sortOrder(column.field) > 0;
+    }
+    sortOrder(field) {
+        return this.sort
+            .filter(({ dir }) => isPresent(dir))
+            .findIndex(x => x.field === field)
+            + 1;
+    }
+    clearSorting() {
+        if (!this.sort || this.sort.length === 0) {
+            return;
+        }
+        this.sort = [];
+        this.sortService.sort([]);
+        this.sortClear.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortToolbarToolComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SortToolbarToolComponent, isStandalone: true, selector: "kendo-sort-toolbar-tool", outputs: { close: "close", sortClear: "sortClear" }, host: { listeners: { "keydown.escape": "onEscKeyDown($event)" }, properties: { "class.k-column-menu": "this.wrapperClasses", "class.k-column-menu-md": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "sortItems", predicate: ["sortItem"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+        <div
+            class="k-column-menu-item-wrapper"
+            [style.max-height.px]="200"
+            [style.overflow-x]="'hidden'"
+            [style.overflow-y]="'auto'"
+        >
+            <div *ngFor="let column of columns"
+                #sortItem
+                role="button"
+                class="k-columnmenu-item"
+                (click)="toggleSort(column)"
+                (keydown.enter)="toggleSort(column)"
+                [tabindex]="'0'"
+            >
+                {{column.title || getColumnComponent(column).field}}
+
+                <span class="k-columnmenu-indicators">
+                    <kendo-icon-wrapper
+                        *ngIf="sortDescriptor(getColumnComponent(column).field).dir"
+                        name="sort-{{sortDescriptor(getColumnComponent(column).field).dir}}-small"
+                        [svgIcon]="sortDescriptor(getColumnComponent(column).field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon"
+                    ></kendo-icon-wrapper>
+                    <span *ngIf="showSortNumbering(getColumnComponent(column))" class="k-sort-index">{{sortOrder(getColumnComponent(column).field)}}</span>
+                </span>
+            </div>
+        </div>
+
+        <div class="k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer">
+            <button kendoButton [svgIcon]="clearIcon" (click)="clearSorting()" >Clear sorting</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: SortToolbarToolComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-sort-toolbar-tool',
+                    template: `
+        <div
+            class="k-column-menu-item-wrapper"
+            [style.max-height.px]="200"
+            [style.overflow-x]="'hidden'"
+            [style.overflow-y]="'auto'"
+        >
+            <div *ngFor="let column of columns"
+                #sortItem
+                role="button"
+                class="k-columnmenu-item"
+                (click)="toggleSort(column)"
+                (keydown.enter)="toggleSort(column)"
+                [tabindex]="'0'"
+            >
+                {{column.title || getColumnComponent(column).field}}
+
+                <span class="k-columnmenu-indicators">
+                    <kendo-icon-wrapper
+                        *ngIf="sortDescriptor(getColumnComponent(column).field).dir"
+                        name="sort-{{sortDescriptor(getColumnComponent(column).field).dir}}-small"
+                        [svgIcon]="sortDescriptor(getColumnComponent(column).field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon"
+                    ></kendo-icon-wrapper>
+                    <span *ngIf="showSortNumbering(getColumnComponent(column))" class="k-sort-index">{{sortOrder(getColumnComponent(column).field)}}</span>
+                </span>
+            </div>
+        </div>
+
+        <div class="k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer">
+            <button kendoButton [svgIcon]="clearIcon" (click)="clearSorting()" >Clear sorting</button>
+        </div>
+    `,
+                    standalone: true,
+                    imports: [NgFor, NgIf, IconWrapperComponent, KENDO_BUTTON]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { sortItems: [{
+                type: ViewChildren,
+                args: ['sortItem', { read: ElementRef }]
+            }], 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
+            }], sortClear: [{
+                type: Output
+            }] } });