@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
112 lines (111 loc) • 5.08 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 { Directive, ElementRef, EventEmitter, Inject, Input, NgZone, Renderer2, Self, ContentChild } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { debounceTime, filter } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { isChanged } from '../utils';
import { isDocumentAvailable, KendoInput } from '@progress/kendo-angular-common';
import * as i0 from "@angular/core";
/**
* @hidden
*/
export class FilterInputDirective {
element;
renderer;
change = new EventEmitter();
composing = false;
kendoInput;
filterDelay = 500;
columnLabel;
set value(value) {
this.accessor.writeValue(value);
}
set disabled(value) {
this.accessor.setDisabledState(value);
}
accessor;
changeRequests = new Subject();
changeRequestsSubscription;
unsubscribeEvents;
constructor(valueAccessors, ngZone, element, renderer) {
this.element = element;
this.renderer = renderer;
this.accessor = valueAccessors[0];
ngZone.runOutsideAngular(() => {
const unsubscribeStart = renderer.listen(element.nativeElement, 'compositionstart', () => this.composing = true);
const unsubscribeEnd = renderer.listen(element.nativeElement, 'compositionend', () => this.composing = false);
this.unsubscribeEvents = () => {
unsubscribeStart();
unsubscribeEnd();
};
});
}
ngAfterViewInit() {
this.addAriaAttributes();
this.accessor.registerOnChange(x => this.filterDelay > 0 ?
this.changeRequests.next(x) :
this.change.emit(x));
this.subscribeChanges();
}
ngOnChanges(changes) {
if (isChanged('filterDelay', changes)) {
this.unsubscribeChanges();
this.subscribeChanges();
}
}
ngOnDestroy() {
this.unsubscribeChanges();
this.unsubscribeEvents();
}
subscribeChanges() {
this.changeRequestsSubscription = this.changeRequests
.pipe(debounceTime(this.filterDelay), filter(() => !this.composing))
.subscribe(x => this.change.emit(x));
}
unsubscribeChanges() {
if (this.changeRequestsSubscription) {
this.changeRequestsSubscription.unsubscribe();
}
}
addAriaAttributes() {
const ariaValue = this.columnLabel;
if (this.kendoInput && this.kendoInput.focusableId && isDocumentAvailable()) {
const focusableElement = this.element.nativeElement.querySelector(`#${this.kendoInput.focusableId}`) ||
this.element.nativeElement;
this.renderer.setAttribute(focusableElement, 'aria-label', ariaValue);
}
else {
const inputElement = this.element.nativeElement.querySelector('.k-input-inner');
const elementToSetLabel = inputElement ? inputElement : this.element.nativeElement;
if (ariaValue) {
this.renderer.setAttribute(elementToSetLabel, 'aria-label', ariaValue);
}
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterInputDirective, deps: [{ token: NG_VALUE_ACCESSOR, self: true }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FilterInputDirective, isStandalone: true, selector: "[kendoFilterInput]", inputs: { filterDelay: "filterDelay", columnLabel: "columnLabel", value: "value" }, queries: [{ propertyName: "kendoInput", first: true, predicate: KendoInput, descendants: true, static: true }], usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterInputDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoFilterInput]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
type: Self
}, {
type: Inject,
args: [NG_VALUE_ACCESSOR]
}] }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { kendoInput: [{
type: ContentChild,
args: [KendoInput, { static: true }]
}], filterDelay: [{
type: Input
}], columnLabel: [{
type: Input
}], value: [{
type: Input
}] } });