@jaspero/ng-helpers
Version:
[](https://github.com/semantic-release/semantic-release) [](https://circleci.
63 lines • 6.44 kB
JavaScript
import { Directive, EventEmitter, Input, Output } from '@angular/core';
import { fromEvent } from 'rxjs';
import { filter } from 'rxjs/operators';
import * as i0 from "@angular/core";
/**
* Emits an event when a click action occurs that does not target the element
*
* @example
* <div (jpClickOutside)="doSomething()"></div>
*/
export class ClickOutsideDirective {
_el;
_ngZone;
constructor(_el, _ngZone) {
this._el = _el;
this._ngZone = _ngZone;
}
/**
* Any valid html event
*/
clickOutsideEventType = 'click';
/**
* if true jpClickOutside doesn't emit
*/
clickOutsideBlock = false;
/**
* Emits when triggered event doesn't contain this e
*/
jpClickOutside = new EventEmitter();
subscription;
ngAfterViewInit() {
this._ngZone.runOutsideAngular(() => {
this.subscription = fromEvent(window, this.clickOutsideEventType)
.pipe(filter(event => !this.clickOutsideBlock &&
!this._el.nativeElement.contains(event.target)))
.subscribe(event => {
this._ngZone.run(() => {
this.jpClickOutside.emit(event);
});
});
});
}
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
/** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ClickOutsideDirective, selector: "[jpClickOutside]", inputs: { clickOutsideEventType: "clickOutsideEventType", clickOutsideBlock: "clickOutsideBlock" }, outputs: { jpClickOutside: "jpClickOutside" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClickOutsideDirective, decorators: [{
type: Directive,
args: [{
selector: '[jpClickOutside]'
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { clickOutsideEventType: [{
type: Input
}], clickOutsideBlock: [{
type: Input
}], jpClickOutside: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xpY2stb3V0c2lkZS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1oZWxwZXJzL3NyYy9kaXJlY3RpdmVzL2NsaWNrLW91dHNpZGUvY2xpY2stb3V0c2lkZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFnQixTQUFTLEVBQWMsWUFBWSxFQUFFLEtBQUssRUFBcUIsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ25ILE9BQU8sRUFBQyxTQUFTLEVBQWUsTUFBTSxNQUFNLENBQUM7QUFDN0MsT0FBTyxFQUFDLE1BQU0sRUFBQyxNQUFNLGdCQUFnQixDQUFDOztBQUV0Qzs7Ozs7R0FLRztBQUlILE1BQU0sT0FBTyxxQkFBcUI7SUFDWjtJQUF5QjtJQUE3QyxZQUFvQixHQUFlLEVBQVUsT0FBZTtRQUF4QyxRQUFHLEdBQUgsR0FBRyxDQUFZO1FBQVUsWUFBTyxHQUFQLE9BQU8sQ0FBUTtJQUFHLENBQUM7SUFFaEU7O09BRUc7SUFDTSxxQkFBcUIsR0FBRyxPQUFPLENBQUM7SUFFekM7O09BRUc7SUFDTSxpQkFBaUIsR0FBRyxLQUFLLENBQUM7SUFFbkM7O09BRUc7SUFDTyxjQUFjLEdBQUcsSUFBSSxZQUFZLEVBQWMsQ0FBQztJQUUxRCxZQUFZLENBQWU7SUFFM0IsZUFBZTtRQUNiLElBQUksQ0FBQyxPQUFPLENBQUMsaUJBQWlCLENBQUMsR0FBRyxFQUFFO1lBQ2xDLElBQUksQ0FBQyxZQUFZLEdBQUcsU0FBUyxDQUFhLE1BQU0sRUFBRSxJQUFJLENBQUMscUJBQXFCLENBQUM7aUJBQzFFLElBQUksQ0FDSCxNQUFNLENBQ0osS0FBSyxDQUFDLEVBQUUsQ0FDTixDQUFDLElBQUksQ0FBQyxpQkFBaUI7Z0JBQ3ZCLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FDakQsQ0FDRjtpQkFDQSxTQUFTLENBQUMsS0FBSyxDQUFDLEVBQUU7Z0JBQ2pCLElBQUksQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLEdBQUcsRUFBRTtvQkFDcEIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7Z0JBQ2xDLENBQUMsQ0FBQyxDQUFDO1lBQ0wsQ0FBQyxDQUFDLENBQUM7UUFDUCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7WUFDdEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUNsQyxDQUFDO0lBQ0gsQ0FBQzsySEExQ1UscUJBQXFCOytHQUFyQixxQkFBcUI7OzRGQUFyQixxQkFBcUI7a0JBSGpDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGtCQUFrQjtpQkFDN0I7b0dBT1UscUJBQXFCO3NCQUE3QixLQUFLO2dCQUtHLGlCQUFpQjtzQkFBekIsS0FBSztnQkFLSSxjQUFjO3NCQUF2QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtBZnRlclZpZXdJbml0LCBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE5nWm9uZSwgT25EZXN0cm95LCBPdXRwdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtmcm9tRXZlbnQsIFN1YnNjcmlwdGlvbn0gZnJvbSAncnhqcyc7XG5pbXBvcnQge2ZpbHRlcn0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuXG4vKipcbiAqIEVtaXRzIGFuIGV2ZW50IHdoZW4gYSBjbGljayBhY3Rpb24gb2NjdXJzIHRoYXQgZG9lcyBub3QgdGFyZ2V0IHRoZSBlbGVtZW50XG4gKlxuICogQGV4YW1wbGVcbiAqIDxkaXYgKGpwQ2xpY2tPdXRzaWRlKT1cImRvU29tZXRoaW5nKClcIj48L2Rpdj5cbiAqL1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2pwQ2xpY2tPdXRzaWRlXSdcbn0pXG5leHBvcnQgY2xhc3MgQ2xpY2tPdXRzaWRlRGlyZWN0aXZlIGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBfZWw6IEVsZW1lbnRSZWYsIHByaXZhdGUgX25nWm9uZTogTmdab25lKSB7fVxuXG4gIC8qKlxuICAgKiBBbnkgdmFsaWQgaHRtbCBldmVudFxuICAgKi9cbiAgQElucHV0KCkgY2xpY2tPdXRzaWRlRXZlbnRUeXBlID0gJ2NsaWNrJztcblxuICAvKipcbiAgICogaWYgdHJ1ZSBqcENsaWNrT3V0c2lkZSBkb2Vzbid0IGVtaXRcbiAgICovXG4gIEBJbnB1dCgpIGNsaWNrT3V0c2lkZUJsb2NrID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIEVtaXRzIHdoZW4gdHJpZ2dlcmVkIGV2ZW50IGRvZXNuJ3QgY29udGFpbiB0aGlzIGVcbiAgICovXG4gIEBPdXRwdXQoKSBqcENsaWNrT3V0c2lkZSA9IG5ldyBFdmVudEVtaXR0ZXI8TW91c2VFdmVudD4oKTtcblxuICBzdWJzY3JpcHRpb246IFN1YnNjcmlwdGlvbjtcblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgdGhpcy5fbmdab25lLnJ1bk91dHNpZGVBbmd1bGFyKCgpID0+IHtcbiAgICAgIHRoaXMuc3Vic2NyaXB0aW9uID0gZnJvbUV2ZW50PE1vdXNlRXZlbnQ+KHdpbmRvdywgdGhpcy5jbGlja091dHNpZGVFdmVudFR5cGUpXG4gICAgICAgIC5waXBlKFxuICAgICAgICAgIGZpbHRlcihcbiAgICAgICAgICAgIGV2ZW50ID0+XG4gICAgICAgICAgICAgICF0aGlzLmNsaWNrT3V0c2lkZUJsb2NrICYmXG4gICAgICAgICAgICAgICF0aGlzLl9lbC5uYXRpdmVFbGVtZW50LmNvbnRhaW5zKGV2ZW50LnRhcmdldClcbiAgICAgICAgICApXG4gICAgICAgIClcbiAgICAgICAgLnN1YnNjcmliZShldmVudCA9PiB7XG4gICAgICAgICAgdGhpcy5fbmdab25lLnJ1bigoKSA9PiB7XG4gICAgICAgICAgICB0aGlzLmpwQ2xpY2tPdXRzaWRlLmVtaXQoZXZlbnQpO1xuICAgICAgICAgIH0pO1xuICAgICAgICB9KTtcbiAgICB9KTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIGlmICh0aGlzLnN1YnNjcmlwdGlvbikge1xuICAgICAgdGhpcy5zdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==