@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
152 lines (151 loc) • 6.92 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, 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 { AdaptiveGridService } from '../../../common/adaptiveness.service';
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);
}
onClick(event) {
if (this.hostButton.location !== 'toolbar') {
event.stopImmediatePropagation();
}
}
close = new EventEmitter();
hostButton;
clearIcon = filterClearIcon;
columnInfoService;
set ctx(ctx) {
this._ctx = ctx;
this.filter = ctx.grid.filter;
this.createPopup();
}
get ctx() {
return this._ctx;
}
set filterService(filterService) {
this._filterService = filterService;
this.subscriptions = this._filterService.changes.subscribe(filter => {
this.filter = filter;
});
this.createPopup();
}
get filterService() {
return this._filterService;
}
columnMenuService;
popupRef;
filter;
subscriptions;
_ctx;
_filterService;
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 },
AdaptiveGridService,
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: "18.2.14", ngImport: i0, type: FilterToolWrapperComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FilterToolWrapperComponent, isStandalone: true, selector: "kendo-filter-tool-wrapper", outputs: { close: "close" }, host: { listeners: { "keydown.escape": "onEscKeyDown($event)", "click": "onClick($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"
icon="filter-clear"
(click)="clear()">
{{ctx?.localization.get('filterClearAllButton')}}
</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: "18.2.14", 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"
icon="filter-clear"
(click)="clear()">
{{ctx?.localization.get('filterClearAllButton')}}
</button>
</div>
`,
standalone: true,
imports: [KENDO_BUTTON]
}]
}], ctorParameters: () => [{ 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']]
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}], close: [{
type: Output
}] } });