@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
100 lines • 12.1 kB
JavaScript
/* eslint-disable @angular-eslint/no-output-native */
import { ChangeDetectorRef, Directive, ElementRef, EventEmitter, forwardRef, HostListener, inject, Output, } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i0 from "@angular/core";
export const TOOLBAR_SEARCH_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ToolbarSearchFieldDirective),
multi: true,
};
export class ToolbarSearchFieldDirective {
constructor() {
this._elementRef = inject(ElementRef);
this._changeDetector = inject(ChangeDetectorRef);
/** Emit whenever the escape key is pressed */
this.cancel = new EventEmitter();
/** Emit whenever the enter key is pressed */
this.submitted = new EventEmitter();
/** For use with the Forms and ReactiveForms */
// eslint-disable-next-line @typescript-eslint/no-empty-function
this.onTouchedCallback = () => { };
/** Call this function with the latest value to update ngModel or formControl name */
// eslint-disable-next-line @typescript-eslint/no-empty-function
this.onChangeCallback = () => { };
}
/** Get the current value of the input control */
get text() {
return this._elementRef.nativeElement.value;
}
focus() {
// mark the control as dirty
this.onTouchedCallback();
// focus the input control after a delay to ensure the element is present
requestAnimationFrame(() => this._elementRef.nativeElement.focus());
}
blur() {
// blur the input control after a delay to ensure the element is present
requestAnimationFrame(() => this._elementRef.nativeElement.blur());
}
/** Clear the input, if we have an ngModel reset its value otherwise just set the input value to empty */
clear() {
this.setValue('');
}
onEnter() {
this.submitted.emit(this.text);
}
onEscape() {
this._elementRef.nativeElement.blur();
this.cancel.emit();
}
onInput() {
this.setValue(this.text);
}
/** Update the input value based on ngModel or formControl */
writeValue(value) {
this.setValue(value);
this._changeDetector.markForCheck();
}
/** Register a function to update form control */
registerOnChange(fn) {
this.onChangeCallback = fn;
}
/** Register a function to mark form control as touched */
registerOnTouched(fn) {
this.onTouchedCallback = fn;
}
/** Update the value in all required places */
setValue(value) {
// ngModel/form control can set the default value to null or undefined, which can show in the input. Replace with empty string
if (!value) {
value = '';
}
// update the form value if there is one in use
this.onChangeCallback(value);
// update the content of the input control
this._elementRef.nativeElement.value = value;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ToolbarSearchFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: ToolbarSearchFieldDirective, selector: "[uxToolbarSearchField]", outputs: { cancel: "cancel", submitted: "submitted" }, host: { listeners: { "keydown.enter": "onEnter()", "keydown.escape": "onEscape()", "input": "onInput()" } }, providers: [TOOLBAR_SEARCH_VALUE_ACCESSOR], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ToolbarSearchFieldDirective, decorators: [{
type: Directive,
args: [{
selector: '[uxToolbarSearchField]',
providers: [TOOLBAR_SEARCH_VALUE_ACCESSOR],
}]
}], propDecorators: { cancel: [{
type: Output
}], submitted: [{
type: Output
}], onEnter: [{
type: HostListener,
args: ['keydown.enter']
}], onEscape: [{
type: HostListener,
args: ['keydown.escape']
}], onInput: [{
type: HostListener,
args: ['input']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbGJhci1zZWFyY2gtZmllbGQuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdG9vbGJhci1zZWFyY2gvdG9vbGJhci1zZWFyY2gtZmllbGQuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHFEQUFxRDtBQUNyRCxPQUFPLEVBQ0wsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxVQUFVLEVBQ1YsWUFBWSxFQUNaLFVBQVUsRUFDVixZQUFZLEVBQ1osTUFBTSxFQUNOLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQXdCLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7O0FBRXpFLE1BQU0sQ0FBQyxNQUFNLDZCQUE2QixHQUFHO0lBQzNDLE9BQU8sRUFBRSxpQkFBaUI7SUFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQywyQkFBMkIsQ0FBQztJQUMxRCxLQUFLLEVBQUUsSUFBSTtDQUNaLENBQUM7QUFNRixNQUFNLE9BQU8sMkJBQTJCO0lBSnhDO1FBS21CLGdCQUFXLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBRWpDLG9CQUFlLEdBQUcsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUM7UUFFN0QsOENBQThDO1FBQ3BDLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBRTVDLDZDQUE2QztRQUNuQyxjQUFTLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQU9qRCwrQ0FBK0M7UUFDL0MsZ0VBQWdFO1FBQ3hELHNCQUFpQixHQUFlLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztRQUVqRCxxRkFBcUY7UUFDckYsZ0VBQWdFO1FBQ3hELHFCQUFnQixHQUFxQixHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7S0FtRXZEO0lBOUVDLGlEQUFpRDtJQUNqRCxJQUFJLElBQUk7UUFDTixPQUFPLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQztJQUM5QyxDQUFDO0lBVUQsS0FBSztRQUNILDRCQUE0QjtRQUM1QixJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztRQUV6Qix5RUFBeUU7UUFDekUscUJBQXFCLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztJQUN0RSxDQUFDO0lBRUQsSUFBSTtRQUNGLHdFQUF3RTtRQUN4RSxxQkFBcUIsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDO0lBQ3JFLENBQUM7SUFFRCx5R0FBeUc7SUFDekcsS0FBSztRQUNILElBQUksQ0FBQyxRQUFRLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDcEIsQ0FBQztJQUdELE9BQU87UUFDTCxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDakMsQ0FBQztJQUdELFFBQVE7UUFDTixJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUN0QyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFHRCxPQUFPO1FBQ0wsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDM0IsQ0FBQztJQUVELDZEQUE2RDtJQUM3RCxVQUFVLENBQUMsS0FBYTtRQUN0QixJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3JCLElBQUksQ0FBQyxlQUFlLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDdEMsQ0FBQztJQUVELGlEQUFpRDtJQUVqRCxnQkFBZ0IsQ0FBQyxFQUFPO1FBQ3RCLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxFQUFFLENBQUM7SUFDN0IsQ0FBQztJQUVELDBEQUEwRDtJQUUxRCxpQkFBaUIsQ0FBQyxFQUFPO1FBQ3ZCLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxFQUFFLENBQUM7SUFDOUIsQ0FBQztJQUVELDhDQUE4QztJQUN0QyxRQUFRLENBQUMsS0FBYTtRQUM1Qiw4SEFBOEg7UUFDOUgsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1lBQ1gsS0FBSyxHQUFHLEVBQUUsQ0FBQztRQUNiLENBQUM7UUFFRCwrQ0FBK0M7UUFDL0MsSUFBSSxDQUFDLGdCQUFnQixDQUFDLEtBQUssQ0FBQyxDQUFDO1FBRTdCLDBDQUEwQztRQUMxQyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO0lBQy9DLENBQUM7K0dBeEZVLDJCQUEyQjttR0FBM0IsMkJBQTJCLHFOQUYzQixDQUFDLDZCQUE2QixDQUFDOzs0RkFFL0IsMkJBQTJCO2tCQUp2QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx3QkFBd0I7b0JBQ2xDLFNBQVMsRUFBRSxDQUFDLDZCQUE2QixDQUFDO2lCQUMzQzs4QkFPVyxNQUFNO3NCQUFmLE1BQU07Z0JBR0csU0FBUztzQkFBbEIsTUFBTTtnQkFrQ1AsT0FBTztzQkFETixZQUFZO3VCQUFDLGVBQWU7Z0JBTTdCLFFBQVE7c0JBRFAsWUFBWTt1QkFBQyxnQkFBZ0I7Z0JBTzlCLE9BQU87c0JBRE4sWUFBWTt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiLyogZXNsaW50LWRpc2FibGUgQGFuZ3VsYXItZXNsaW50L25vLW91dHB1dC1uYXRpdmUgKi9cbmltcG9ydCB7XG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBEaXJlY3RpdmUsXG4gIEVsZW1lbnRSZWYsXG4gIEV2ZW50RW1pdHRlcixcbiAgZm9yd2FyZFJlZixcbiAgSG9zdExpc3RlbmVyLFxuICBpbmplY3QsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbmV4cG9ydCBjb25zdCBUT09MQkFSX1NFQVJDSF9WQUxVRV9BQ0NFU1NPUiA9IHtcbiAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IFRvb2xiYXJTZWFyY2hGaWVsZERpcmVjdGl2ZSksXG4gIG11bHRpOiB0cnVlLFxufTtcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW3V4VG9vbGJhclNlYXJjaEZpZWxkXScsXG4gIHByb3ZpZGVyczogW1RPT0xCQVJfU0VBUkNIX1ZBTFVFX0FDQ0VTU09SXSxcbn0pXG5leHBvcnQgY2xhc3MgVG9vbGJhclNlYXJjaEZpZWxkRGlyZWN0aXZlIGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xuICBwcml2YXRlIHJlYWRvbmx5IF9lbGVtZW50UmVmID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuXG4gIHByaXZhdGUgcmVhZG9ubHkgX2NoYW5nZURldGVjdG9yID0gaW5qZWN0KENoYW5nZURldGVjdG9yUmVmKTtcblxuICAvKiogRW1pdCB3aGVuZXZlciB0aGUgZXNjYXBlIGtleSBpcyBwcmVzc2VkICovXG4gIEBPdXRwdXQoKSBjYW5jZWwgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgLyoqIEVtaXQgd2hlbmV2ZXIgdGhlIGVudGVyIGtleSBpcyBwcmVzc2VkICovXG4gIEBPdXRwdXQoKSBzdWJtaXR0ZWQgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcblxuICAvKiogR2V0IHRoZSBjdXJyZW50IHZhbHVlIG9mIHRoZSBpbnB1dCBjb250cm9sICovXG4gIGdldCB0ZXh0KCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudC52YWx1ZTtcbiAgfVxuXG4gIC8qKiBGb3IgdXNlIHdpdGggdGhlIEZvcm1zIGFuZCBSZWFjdGl2ZUZvcm1zICovXG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbm8tZW1wdHktZnVuY3Rpb25cbiAgcHJpdmF0ZSBvblRvdWNoZWRDYWxsYmFjazogKCkgPT4gdm9pZCA9ICgpID0+IHt9O1xuXG4gIC8qKiBDYWxsIHRoaXMgZnVuY3Rpb24gd2l0aCB0aGUgbGF0ZXN0IHZhbHVlIHRvIHVwZGF0ZSBuZ01vZGVsIG9yIGZvcm1Db250cm9sIG5hbWUgKi9cbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby1lbXB0eS1mdW5jdGlvblxuICBwcml2YXRlIG9uQ2hhbmdlQ2FsbGJhY2s6IChfOiBhbnkpID0+IHZvaWQgPSAoKSA9PiB7fTtcblxuICBmb2N1cygpOiB2b2lkIHtcbiAgICAvLyBtYXJrIHRoZSBjb250cm9sIGFzIGRpcnR5XG4gICAgdGhpcy5vblRvdWNoZWRDYWxsYmFjaygpO1xuXG4gICAgLy8gZm9jdXMgdGhlIGlucHV0IGNvbnRyb2wgYWZ0ZXIgYSBkZWxheSB0byBlbnN1cmUgdGhlIGVsZW1lbnQgaXMgcHJlc2VudFxuICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZSgoKSA9PiB0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuZm9jdXMoKSk7XG4gIH1cblxuICBibHVyKCk6IHZvaWQge1xuICAgIC8vIGJsdXIgdGhlIGlucHV0IGNvbnRyb2wgYWZ0ZXIgYSBkZWxheSB0byBlbnN1cmUgdGhlIGVsZW1lbnQgaXMgcHJlc2VudFxuICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZSgoKSA9PiB0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuYmx1cigpKTtcbiAgfVxuXG4gIC8qKiBDbGVhciB0aGUgaW5wdXQsIGlmIHdlIGhhdmUgYW4gbmdNb2RlbCByZXNldCBpdHMgdmFsdWUgb3RoZXJ3aXNlIGp1c3Qgc2V0IHRoZSBpbnB1dCB2YWx1ZSB0byBlbXB0eSAqL1xuICBjbGVhcigpOiB2b2lkIHtcbiAgICB0aGlzLnNldFZhbHVlKCcnKTtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2tleWRvd24uZW50ZXInKVxuICBvbkVudGVyKCk6IHZvaWQge1xuICAgIHRoaXMuc3VibWl0dGVkLmVtaXQodGhpcy50ZXh0KTtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2tleWRvd24uZXNjYXBlJylcbiAgb25Fc2NhcGUoKTogdm9pZCB7XG4gICAgdGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LmJsdXIoKTtcbiAgICB0aGlzLmNhbmNlbC5lbWl0KCk7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdpbnB1dCcpXG4gIG9uSW5wdXQoKTogdm9pZCB7XG4gICAgdGhpcy5zZXRWYWx1ZSh0aGlzLnRleHQpO1xuICB9XG5cbiAgLyoqIFVwZGF0ZSB0aGUgaW5wdXQgdmFsdWUgYmFzZWQgb24gbmdNb2RlbCBvciBmb3JtQ29udHJvbCAqL1xuICB3cml0ZVZhbHVlKHZhbHVlOiBzdHJpbmcpOiB2b2lkIHtcbiAgICB0aGlzLnNldFZhbHVlKHZhbHVlKTtcbiAgICB0aGlzLl9jaGFuZ2VEZXRlY3Rvci5tYXJrRm9yQ2hlY2soKTtcbiAgfVxuXG4gIC8qKiBSZWdpc3RlciBhIGZ1bmN0aW9uIHRvIHVwZGF0ZSBmb3JtIGNvbnRyb2wgKi9cbiAgIFxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLm9uQ2hhbmdlQ2FsbGJhY2sgPSBmbjtcbiAgfVxuXG4gIC8qKiBSZWdpc3RlciBhIGZ1bmN0aW9uIHRvIG1hcmsgZm9ybSBjb250cm9sIGFzIHRvdWNoZWQgKi9cbiAgIFxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogYW55KTogdm9pZCB7XG4gICAgdGhpcy5vblRvdWNoZWRDYWxsYmFjayA9IGZuO1xuICB9XG5cbiAgLyoqIFVwZGF0ZSB0aGUgdmFsdWUgaW4gYWxsIHJlcXVpcmVkIHBsYWNlcyAqL1xuICBwcml2YXRlIHNldFZhbHVlKHZhbHVlOiBzdHJpbmcpOiB2b2lkIHtcbiAgICAvLyBuZ01vZGVsL2Zvcm0gY29udHJvbCBjYW4gc2V0IHRoZSBkZWZhdWx0IHZhbHVlIHRvIG51bGwgb3IgdW5kZWZpbmVkLCB3aGljaCBjYW4gc2hvdyBpbiB0aGUgaW5wdXQuIFJlcGxhY2Ugd2l0aCBlbXB0eSBzdHJpbmdcbiAgICBpZiAoIXZhbHVlKSB7XG4gICAgICB2YWx1ZSA9ICcnO1xuICAgIH1cblxuICAgIC8vIHVwZGF0ZSB0aGUgZm9ybSB2YWx1ZSBpZiB0aGVyZSBpcyBvbmUgaW4gdXNlXG4gICAgdGhpcy5vbkNoYW5nZUNhbGxiYWNrKHZhbHVlKTtcblxuICAgIC8vIHVwZGF0ZSB0aGUgY29udGVudCBvZiB0aGUgaW5wdXQgY29udHJvbFxuICAgIHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudC52YWx1ZSA9IHZhbHVlO1xuICB9XG59XG4iXX0=