ng2-events/lib/observe-directive/observe-event.directive.js

Supercharge your Angular2+ event handling

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ObserveEventDirective = void 0;
var core_1 = require("@angular/core");
var rxjs_1 = require("rxjs");
var i0 = require("@angular/core");
/**
 * Pass events to a given observable subject without triggering change detection
 *
 * Usage:
 * <button [ev-observe]="subject" ev-events="click"></button>
 *
 * ...
 *
 * export class ExampleComponent implements OnInit {
 *  public subject = new Subject();
 *
 *  constructor(private zone: NgZone) {}
 *
 *  ngOnInit() {
 *      this.subject
 *          .throttleTime(300)
 *          .filter(someCondition)
 *          ...
 *          .subscribe($event => this.zone.run(() => this.handleEvent($event)));
 *  }
 * }
 *
 * Notes:
 * The [ev-events] property can be either a string or an array of strings to handle multiple events
 *
 */
var ObserveEventDirective = /** @class */ (function () {
    function ObserveEventDirective(elm, renderer, zone) {
        this.elm = elm;
        this.renderer = renderer;
        this.zone = zone;
        this.listeners = [];
    }
    Object.defineProperty(ObserveEventDirective.prototype, "events", {
        set: function (e) {
            var _this = this;
            this.unregisterAll();
            var events = (typeof (e) === 'string')
                ? [e]
                : e;
            this.zone.runOutsideAngular(function () {
                _this.listeners = events.map(function (x) { return _this.addListener(x); });
            });
        },
        enumerable: false,
        configurable: true
    });
    ObserveEventDirective.prototype.ngOnDestroy = function () {
        this.unregisterAll();
    };
    ObserveEventDirective.prototype.unregisterAll = function () {
        this.listeners.forEach(function (x) { return x(); });
        this.listeners = [];
    };
    ObserveEventDirective.prototype.addListener = function (eventName) {
        var _this = this;
        var colon = eventName.indexOf(':');
        var handler = function ($event) { return _this.fireEvent($event); };
        if (colon === -1) {
            return this.renderer.listen(this.elm.nativeElement, eventName, handler);
        }
        else {
            var scope = eventName.slice(0, colon);
            var realEventName = eventName.slice(colon + 1);
            return this.renderer.listen(scope, realEventName, handler);
        }
    };
    ObserveEventDirective.prototype.fireEvent = function ($event) {
        if (!this.observe)
            return;
        this.observe.next($event);
    };
    ObserveEventDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.2", ngImport: i0, type: ObserveEventDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
    ObserveEventDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.2", type: ObserveEventDirective, selector: "[ev-observe]", inputs: { observe: ["ev-observe", "observe"], events: ["ev-events", "events"] }, ngImport: i0 });
    return ObserveEventDirective;
}());
exports.ObserveEventDirective = ObserveEventDirective;
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.2", ngImport: i0, type: ObserveEventDirective, decorators: [{
            type: core_1.Directive,
            args: [{
                    selector: '[ev-observe]'
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { observe: [{
                type: core_1.Input,
                args: ['ev-observe']
            }], events: [{
                type: core_1.Input,
                args: ['ev-events']
            }] } });