UNPKG

@jaspero/ng-helpers

Version:

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![CircleCI](https://circleci.com/gh/Jaspero/ng-helpers.svg?style=svg)](https://circleci.

79 lines 8.61 kB
import { Directive, EventEmitter, Inject, Input, Output } from '@angular/core'; import { fromEvent } from 'rxjs'; import { debounceTime, filter } from 'rxjs/operators'; import { DEBOUNCE_TIME } from './debounce-time.const'; import * as i0 from "@angular/core"; export class DebounceChangeDirective { _el; _ngZone; _defaultDebounceTime; constructor(_el, _ngZone, _defaultDebounceTime) { this._el = _el; this._ngZone = _ngZone; this._defaultDebounceTime = _defaultDebounceTime; } /** * time to forward to the debounceTime pipe */ debounceTime; /** * Any valid html event */ debounceChangeEventType = 'keyup'; /** * If true and the event has a 'target.value' * we listen for it and only emit if the value changed */ emitOnlyOnChange = false; /** * Emits original event after debounce */ jpDebounceChange = new EventEmitter(); subscription; ngAfterViewInit() { this._ngZone.runOutsideAngular(() => { let prev = this._el.nativeElement.value; this.subscription = fromEvent(this._el.nativeElement, this.debounceChangeEventType) .pipe(debounceTime(this.debounceTime || this._defaultDebounceTime), filter(event => { return event.target && event.target.value !== undefined && this.emitOnlyOnChange ? event.target.value !== prev : true; })) .subscribe(event => { this._ngZone.run(() => { if (event.target) { prev = event.target.value; } this.jpDebounceChange.emit(event.target.value); }); }); }); } ngOnDestroy() { if (this.subscription) { this.subscription.unsubscribe(); } } /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DebounceChangeDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: DEBOUNCE_TIME }], target: i0.ɵɵFactoryTarget.Directive }); /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DebounceChangeDirective, selector: "[jpDebounceChange]", inputs: { debounceTime: "debounceTime", debounceChangeEventType: "debounceChangeEventType", emitOnlyOnChange: "emitOnlyOnChange" }, outputs: { jpDebounceChange: "jpDebounceChange" }, ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DebounceChangeDirective, decorators: [{ type: Directive, args: [{ selector: '[jpDebounceChange]' }] }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{ type: Inject, args: [DEBOUNCE_TIME] }] }], propDecorators: { debounceTime: [{ type: Input }], debounceChangeEventType: [{ type: Input }], emitOnlyOnChange: [{ type: Input }], jpDebounceChange: [{ type: Output }] } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVib3VuY2UtY2hhbmdlLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWhlbHBlcnMvc3JjL2RpcmVjdGl2ZXMvZGVib3VuY2UtY2hhbmdlL2RlYm91bmNlLWNoYW5nZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFnQixTQUFTLEVBQWMsWUFBWSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQXFCLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUMzSCxPQUFPLEVBQUMsU0FBUyxFQUFlLE1BQU0sTUFBTSxDQUFDO0FBQzdDLE9BQU8sRUFBQyxZQUFZLEVBQUUsTUFBTSxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDcEQsT0FBTyxFQUFDLGFBQWEsRUFBQyxNQUFNLHVCQUF1QixDQUFDOztBQUtwRCxNQUFNLE9BQU8sdUJBQXVCO0lBRXhCO0lBQ0E7SUFDdUI7SUFIakMsWUFDVSxHQUFlLEVBQ2YsT0FBZSxFQUNRLG9CQUE0QjtRQUZuRCxRQUFHLEdBQUgsR0FBRyxDQUFZO1FBQ2YsWUFBTyxHQUFQLE9BQU8sQ0FBUTtRQUNRLHlCQUFvQixHQUFwQixvQkFBb0IsQ0FBUTtJQUMxRCxDQUFDO0lBRUo7O09BRUc7SUFDTSxZQUFZLENBQUM7SUFFdEI7O09BRUc7SUFDTSx1QkFBdUIsR0FBRyxPQUFPLENBQUM7SUFFM0M7OztPQUdHO0lBQ00sZ0JBQWdCLEdBQUcsS0FBSyxDQUFDO0lBRWxDOztPQUVHO0lBQ08sZ0JBQWdCLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztJQUV4RCxZQUFZLENBQWU7SUFFM0IsZUFBZTtRQUNiLElBQUksQ0FBQyxPQUFPLENBQUMsaUJBQWlCLENBQUMsR0FBRyxFQUFFO1lBRWxDLElBQUksSUFBSSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQztZQUV4QyxJQUFJLENBQUMsWUFBWSxHQUFHLFNBQVMsQ0FBTSxJQUFJLENBQUMsR0FBRyxDQUFDLGFBQWEsRUFBRSxJQUFJLENBQUMsdUJBQXVCLENBQUM7aUJBQ3JGLElBQUksQ0FDSCxZQUFZLENBQUMsSUFBSSxDQUFDLFlBQVksSUFBSSxJQUFJLENBQUMsb0JBQW9CLENBQUMsRUFDNUQsTUFBTSxDQUFDLEtBQUssQ0FBQyxFQUFFO2dCQUNiLE9BQU8sS0FBSyxDQUFDLE1BQU07b0JBQ2pCLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxLQUFLLFNBQVM7b0JBQ2hDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO29CQUNyQixLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssS0FBSyxJQUFJLENBQUMsQ0FBQztvQkFDN0IsSUFBSSxDQUFDO1lBQ1gsQ0FBQyxDQUFDLENBQ0g7aUJBQ0EsU0FBUyxDQUFDLEtBQUssQ0FBQyxFQUFFO2dCQUNqQixJQUFJLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxHQUFHLEVBQUU7b0JBQ3BCLElBQUksS0FBSyxDQUFDLE1BQU0sRUFBRSxDQUFDO3dCQUNqQixJQUFJLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUM7b0JBQzVCLENBQUM7b0JBRUQsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDO2dCQUNqRCxDQUFDLENBQUMsQ0FBQztZQUNMLENBQUMsQ0FBQyxDQUFDO1FBQ1AsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1lBQ3RCLElBQUksQ0FBQyxZQUFZLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDbEMsQ0FBQztJQUNILENBQUM7MkhBOURVLHVCQUF1QixrRUFJeEIsYUFBYTsrR0FKWix1QkFBdUI7OzRGQUF2Qix1QkFBdUI7a0JBSG5DLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLG9CQUFvQjtpQkFDL0I7OzBCQUtJLE1BQU07MkJBQUMsYUFBYTt5Q0FNZCxZQUFZO3NCQUFwQixLQUFLO2dCQUtHLHVCQUF1QjtzQkFBL0IsS0FBSztnQkFNRyxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBS0ksZ0JBQWdCO3NCQUF6QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtBZnRlclZpZXdJbml0LCBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSW5qZWN0LCBJbnB1dCwgTmdab25lLCBPbkRlc3Ryb3ksIE91dHB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge2Zyb21FdmVudCwgU3Vic2NyaXB0aW9ufSBmcm9tICdyeGpzJztcbmltcG9ydCB7ZGVib3VuY2VUaW1lLCBmaWx0ZXJ9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7REVCT1VOQ0VfVElNRX0gZnJvbSAnLi9kZWJvdW5jZS10aW1lLmNvbnN0JztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2pwRGVib3VuY2VDaGFuZ2VdJ1xufSlcbmV4cG9ydCBjbGFzcyBEZWJvdW5jZUNoYW5nZURpcmVjdGl2ZSBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIE9uRGVzdHJveSB7XG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgX2VsOiBFbGVtZW50UmVmLFxuICAgIHByaXZhdGUgX25nWm9uZTogTmdab25lLFxuICAgIEBJbmplY3QoREVCT1VOQ0VfVElNRSkgcHJpdmF0ZSBfZGVmYXVsdERlYm91bmNlVGltZTogbnVtYmVyXG4gICkge31cblxuICAvKipcbiAgICogdGltZSB0byBmb3J3YXJkIHRvIHRoZSBkZWJvdW5jZVRpbWUgcGlwZVxuICAgKi9cbiAgQElucHV0KCkgZGVib3VuY2VUaW1lO1xuXG4gIC8qKlxuICAgKiBBbnkgdmFsaWQgaHRtbCBldmVudFxuICAgKi9cbiAgQElucHV0KCkgZGVib3VuY2VDaGFuZ2VFdmVudFR5cGUgPSAna2V5dXAnO1xuXG4gIC8qKlxuICAgKiBJZiB0cnVlIGFuZCB0aGUgZXZlbnQgaGFzIGEgJ3RhcmdldC52YWx1ZSdcbiAgICogd2UgbGlzdGVuIGZvciBpdCBhbmQgb25seSBlbWl0IGlmIHRoZSB2YWx1ZSBjaGFuZ2VkXG4gICAqL1xuICBASW5wdXQoKSBlbWl0T25seU9uQ2hhbmdlID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIEVtaXRzIG9yaWdpbmFsIGV2ZW50IGFmdGVyIGRlYm91bmNlXG4gICAqL1xuICBAT3V0cHV0KCkganBEZWJvdW5jZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIHN1YnNjcmlwdGlvbjogU3Vic2NyaXB0aW9uO1xuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICB0aGlzLl9uZ1pvbmUucnVuT3V0c2lkZUFuZ3VsYXIoKCkgPT4ge1xuXG4gICAgICBsZXQgcHJldiA9IHRoaXMuX2VsLm5hdGl2ZUVsZW1lbnQudmFsdWU7XG5cbiAgICAgIHRoaXMuc3Vic2NyaXB0aW9uID0gZnJvbUV2ZW50PGFueT4odGhpcy5fZWwubmF0aXZlRWxlbWVudCwgdGhpcy5kZWJvdW5jZUNoYW5nZUV2ZW50VHlwZSlcbiAgICAgICAgLnBpcGUoXG4gICAgICAgICAgZGVib3VuY2VUaW1lKHRoaXMuZGVib3VuY2VUaW1lIHx8IHRoaXMuX2RlZmF1bHREZWJvdW5jZVRpbWUpLFxuICAgICAgICAgIGZpbHRlcihldmVudCA9PiB7XG4gICAgICAgICAgICByZXR1cm4gZXZlbnQudGFyZ2V0ICYmXG4gICAgICAgICAgICAgIGV2ZW50LnRhcmdldC52YWx1ZSAhPT0gdW5kZWZpbmVkICYmXG4gICAgICAgICAgICAgIHRoaXMuZW1pdE9ubHlPbkNoYW5nZSA/XG4gICAgICAgICAgICAgICAgZXZlbnQudGFyZ2V0LnZhbHVlICE9PSBwcmV2IDpcbiAgICAgICAgICAgICAgICB0cnVlO1xuICAgICAgICAgIH0pXG4gICAgICAgIClcbiAgICAgICAgLnN1YnNjcmliZShldmVudCA9PiB7XG4gICAgICAgICAgdGhpcy5fbmdab25lLnJ1bigoKSA9PiB7XG4gICAgICAgICAgICBpZiAoZXZlbnQudGFyZ2V0KSB7XG4gICAgICAgICAgICAgIHByZXYgPSBldmVudC50YXJnZXQudmFsdWU7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgIHRoaXMuanBEZWJvdW5jZUNoYW5nZS5lbWl0KGV2ZW50LnRhcmdldC52YWx1ZSk7XG4gICAgICAgICAgfSk7XG4gICAgICAgIH0pO1xuICAgIH0pO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgaWYgKHRoaXMuc3Vic2NyaXB0aW9uKSB7XG4gICAgICB0aGlzLnN1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICAgIH1cbiAgfVxufVxuIl19