@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
239 lines (234 loc) • 10.5 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* 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";
/**
* @hidden
*/
export 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, ev) {
if (this.hostButton.location !== 'toolbar') {
ev.stopImmediatePropagation();
}
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, $event)"
(keydown.enter)="toggleSort(column, $event)"
[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"
icon="x"
(click)="clearSorting()">
{{ctx?.localization.get('sortClearButton')}}
</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, $event)"
(keydown.enter)="toggleSort(column, $event)"
[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"
icon="x"
(click)="clearSorting()">
{{ctx?.localization.get('sortClearButton')}}
</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
}] } });