ngx-modialog-11
Version:
Modal / Dialog for Angular
90 lines • 12 kB
JavaScript
import { Subject } from 'rxjs';
import { filter } from 'rxjs/operators';
import { createComponent } from '../framework/createComponent';
const BROWSER_PREFIX = ['webkit', 'moz', 'MS', 'o', ''];
function register(eventName, element, cb) {
BROWSER_PREFIX.forEach(p => {
element.addEventListener(p ? p + eventName : eventName.toLowerCase(), cb, false);
});
}
/**
* A base class for supporting dynamic components.
* There are 3 main support areas:
* 1 - Easy wrapper for dynamic styling via CSS classes and inline styles.
* 2 - Easy wrapper for interception of transition/animation end events.
* 3 - Easy wrapper for component creation and injection.
*
* Dynamic css is done via direct element manipulation (via renderer), it does not use change detection
* or binding. This is to allow better control over animation.
*
* Animation support is limited, only transition/keyframes END even are notified.
* The animation support is needed since currently the angular animation module is limited as well and
* does not support CSS animation that are not pre-parsed and are not in the styles metadata of a component.
*
* Capabilities: Add/Remove styls, Add/Remove classes, listen to animation/transition end event,
* add components
*/
export class BaseDynamicComponent {
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
}
activateAnimationListener() {
if (this.animationEnd) {
return;
}
this.animationEnd = new Subject();
this.animationEnd$ = this.animationEnd.asObservable();
register('TransitionEnd', this.el.nativeElement, (e) => this.onEnd(e));
register('AnimationEnd', this.el.nativeElement, (e) => this.onEnd(e));
}
/**
* Set a specific inline style on the overlay host element.
* @param prop The style key
* @param value The value, undefined to remove
*/
setStyle(prop, value) {
this.renderer.setStyle(this.el.nativeElement, prop, value);
return this;
}
forceReflow() {
this.el.nativeElement.offsetWidth;
}
addClass(css, forceReflow = false) {
css.split(' ')
.forEach(c => this.renderer.addClass(this.el.nativeElement, c));
if (forceReflow) {
this.forceReflow();
}
}
removeClass(css, forceReflow = false) {
css.split(' ')
.forEach(c => this.renderer.removeClass(this.el.nativeElement, c));
if (forceReflow) {
this.forceReflow();
}
}
ngOnDestroy() {
if (this.animationEnd && !this.animationEnd.closed) {
this.animationEnd.complete();
}
}
myAnimationEnd$() {
return this.animationEnd$.pipe(filter(e => e.target === this.el.nativeElement));
}
/**
* Add a component, supply a view container ref.
* Note: The components vcRef will result in a sibling.
*/
_addComponent(instructions) {
const cmpRef = createComponent(instructions);
cmpRef.changeDetectorRef.detectChanges();
return cmpRef;
}
onEnd(event) {
if (!this.animationEnd.closed) {
this.animationEnd.next(event);
}
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFzZS1keW5hbWljLWNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1tb2RpYWxvZy0xMS9zcmMvbGliL2NvbXBvbmVudHMvYmFzZS1keW5hbWljLWNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWMsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQzNDLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQVF4QyxPQUFPLEVBQUUsZUFBZSxFQUF1QixNQUFNLDhCQUE4QixDQUFDO0FBRXBGLE1BQU0sY0FBYyxHQUFHLENBQUMsUUFBUSxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFFLEVBQUUsQ0FBQyxDQUFDO0FBRXhELFNBQVMsUUFBUSxDQUFDLFNBQVMsRUFBRSxPQUFPLEVBQUUsRUFBRTtJQUN0QyxjQUFjLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxFQUFFO1FBQ3pCLE9BQU8sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxTQUFTLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxXQUFXLEVBQUUsRUFBRSxFQUFFLEVBQUUsS0FBSyxDQUFDLENBQUM7SUFDbkYsQ0FBQyxDQUFDLENBQUM7QUFDTCxDQUFDO0FBRUQ7Ozs7Ozs7Ozs7Ozs7Ozs7R0FnQkc7QUFDSCxNQUFNLE9BQU8sb0JBQW9CO0lBSy9CLFlBQXNCLEVBQWMsRUFDZCxRQUFtQjtRQURuQixPQUFFLEdBQUYsRUFBRSxDQUFZO1FBQ2QsYUFBUSxHQUFSLFFBQVEsQ0FBVztJQUN6QyxDQUFDO0lBRUQseUJBQXlCO1FBQ3ZCLElBQUksSUFBSSxDQUFDLFlBQVksRUFBRTtZQUNyQixPQUFPO1NBQ1I7UUFDRCxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksT0FBTyxFQUFvQyxDQUFDO1FBQ3BFLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxZQUFZLEVBQUUsQ0FBQztRQUN0RCxRQUFRLENBQUMsZUFBZSxFQUFFLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLENBQUMsQ0FBa0IsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ3hGLFFBQVEsQ0FBQyxjQUFjLEVBQUUsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsQ0FBQyxDQUFpQixFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDeEYsQ0FBQztJQUVEOzs7O09BSUc7SUFDSCxRQUFRLENBQUMsSUFBWSxFQUFFLEtBQWE7UUFDbEMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsSUFBSSxFQUFFLEtBQUssQ0FBQyxDQUFDO1FBQzNELE9BQU8sSUFBSSxDQUFDO0lBQ2QsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxXQUFXLENBQUM7SUFDcEMsQ0FBQztJQUVELFFBQVEsQ0FBQyxHQUFXLEVBQUUsY0FBdUIsS0FBSztRQUNoRCxHQUFHLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQzthQUNYLE9BQU8sQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDbEUsSUFBSSxXQUFXLEVBQUU7WUFDZixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7U0FDcEI7SUFDSCxDQUFDO0lBRUQsV0FBVyxDQUFDLEdBQVcsRUFBRSxjQUF1QixLQUFLO1FBQ25ELEdBQUcsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDO2FBQ1gsT0FBTyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNyRSxJQUFJLFdBQVcsRUFBRTtZQUNmLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUNwQjtJQUNILENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxJQUFJLENBQUMsWUFBWSxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLEVBQUU7WUFDbEQsSUFBSSxDQUFDLFlBQVksQ0FBQyxRQUFRLEVBQUUsQ0FBQztTQUM5QjtJQUNILENBQUM7SUFFRCxlQUFlO1FBQ2IsT0FBTyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FDNUIsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLE1BQU0sS0FBSyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxDQUNoRCxDQUFDO0lBQ0osQ0FBQztJQUVEOzs7T0FHRztJQUNPLGFBQWEsQ0FBSSxZQUFpQztRQUMxRCxNQUFNLE1BQU0sR0FBRyxlQUFlLENBQUMsWUFBWSxDQUFDLENBQUM7UUFDN0MsTUFBTSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsRUFBRSxDQUFDO1FBRXpDLE9BQU8sTUFBTSxDQUFDO0lBQ2hCLENBQUM7SUFHTyxLQUFLLENBQUMsS0FBdUM7UUFFbkQsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsTUFBTSxFQUFFO1lBQzdCLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQy9CO0lBQ0gsQ0FBQztDQUVGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgT2JzZXJ2YWJsZSwgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xyXG5pbXBvcnQgeyBmaWx0ZXIgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XHJcbmltcG9ydCB7XHJcbiAgQ29tcG9uZW50UmVmLFxyXG4gIEVsZW1lbnRSZWYsXHJcbiAgT25EZXN0cm95LFxyXG4gIFJlbmRlcmVyMlxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuaW1wb3J0IHsgY3JlYXRlQ29tcG9uZW50LCBDcmVhdGVDb21wb25lbnRBcmdzIH0gZnJvbSAnLi4vZnJhbWV3b3JrL2NyZWF0ZUNvbXBvbmVudCc7XHJcblxyXG5jb25zdCBCUk9XU0VSX1BSRUZJWCA9IFsnd2Via2l0JywgJ21veicsICdNUycsICdvJywgJyddO1xyXG5cclxuZnVuY3Rpb24gcmVnaXN0ZXIoZXZlbnROYW1lLCBlbGVtZW50LCBjYikge1xyXG4gIEJST1dTRVJfUFJFRklYLmZvckVhY2gocCA9PiB7XHJcbiAgICBlbGVtZW50LmFkZEV2ZW50TGlzdGVuZXIocCA/IHAgKyBldmVudE5hbWUgOiBldmVudE5hbWUudG9Mb3dlckNhc2UoKSwgY2IsIGZhbHNlKTtcclxuICB9KTtcclxufVxyXG5cclxuLyoqXHJcbiAqIEEgYmFzZSBjbGFzcyBmb3Igc3VwcG9ydGluZyBkeW5hbWljIGNvbXBvbmVudHMuXHJcbiAqIFRoZXJlIGFyZSAzIG1haW4gc3VwcG9ydCBhcmVhczpcclxuICogMSAtIEVhc3kgd3JhcHBlciBmb3IgZHluYW1pYyBzdHlsaW5nIHZpYSBDU1MgY2xhc3NlcyBhbmQgaW5saW5lIHN0eWxlcy5cclxuICogMiAtIEVhc3kgd3JhcHBlciBmb3IgaW50ZXJjZXB0aW9uIG9mIHRyYW5zaXRpb24vYW5pbWF0aW9uIGVuZCBldmVudHMuXHJcbiAqIDMgLSBFYXN5IHdyYXBwZXIgZm9yIGNvbXBvbmVudCBjcmVhdGlvbiBhbmQgaW5qZWN0aW9uLlxyXG4gKlxyXG4gKiBEeW5hbWljIGNzcyBpcyBkb25lIHZpYSBkaXJlY3QgZWxlbWVudCBtYW5pcHVsYXRpb24gKHZpYSByZW5kZXJlciksIGl0IGRvZXMgbm90IHVzZSBjaGFuZ2UgZGV0ZWN0aW9uXHJcbiAqIG9yIGJpbmRpbmcuIFRoaXMgaXMgdG8gYWxsb3cgYmV0dGVyIGNvbnRyb2wgb3ZlciBhbmltYXRpb24uXHJcbiAqXHJcbiAqIEFuaW1hdGlvbiBzdXBwb3J0IGlzIGxpbWl0ZWQsIG9ubHkgdHJhbnNpdGlvbi9rZXlmcmFtZXMgRU5EIGV2ZW4gYXJlIG5vdGlmaWVkLlxyXG4gKiBUaGUgYW5pbWF0aW9uIHN1cHBvcnQgaXMgbmVlZGVkIHNpbmNlIGN1cnJlbnRseSB0aGUgYW5ndWxhciBhbmltYXRpb24gbW9kdWxlIGlzIGxpbWl0ZWQgYXMgd2VsbCBhbmRcclxuICogZG9lcyBub3Qgc3VwcG9ydCBDU1MgYW5pbWF0aW9uIHRoYXQgYXJlIG5vdCBwcmUtcGFyc2VkIGFuZCBhcmUgbm90IGluIHRoZSBzdHlsZXMgbWV0YWRhdGEgb2YgYSBjb21wb25lbnQuXHJcbiAqXHJcbiAqIENhcGFiaWxpdGllczogQWRkL1JlbW92ZSBzdHlscywgQWRkL1JlbW92ZSBjbGFzc2VzLCBsaXN0ZW4gdG8gYW5pbWF0aW9uL3RyYW5zaXRpb24gZW5kIGV2ZW50LFxyXG4gKiBhZGQgY29tcG9uZW50c1xyXG4gKi9cclxuZXhwb3J0IGNsYXNzIEJhc2VEeW5hbWljQ29tcG9uZW50IGltcGxlbWVudHMgT25EZXN0cm95IHtcclxuICBhbmltYXRpb25FbmQkOiBPYnNlcnZhYmxlPFRyYW5zaXRpb25FdmVudCB8IEFuaW1hdGlvbkV2ZW50PjtcclxuXHJcbiAgcHJvdGVjdGVkIGFuaW1hdGlvbkVuZDogU3ViamVjdDxUcmFuc2l0aW9uRXZlbnQgfCBBbmltYXRpb25FdmVudD47XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByb3RlY3RlZCBlbDogRWxlbWVudFJlZixcclxuICAgICAgICAgICAgICBwcm90ZWN0ZWQgcmVuZGVyZXI6IFJlbmRlcmVyMikge1xyXG4gIH1cclxuXHJcbiAgYWN0aXZhdGVBbmltYXRpb25MaXN0ZW5lcigpIHtcclxuICAgIGlmICh0aGlzLmFuaW1hdGlvbkVuZCkge1xyXG4gICAgICByZXR1cm47XHJcbiAgICB9XHJcbiAgICB0aGlzLmFuaW1hdGlvbkVuZCA9IG5ldyBTdWJqZWN0PFRyYW5zaXRpb25FdmVudCB8IEFuaW1hdGlvbkV2ZW50PigpO1xyXG4gICAgdGhpcy5hbmltYXRpb25FbmQkID0gdGhpcy5hbmltYXRpb25FbmQuYXNPYnNlcnZhYmxlKCk7XHJcbiAgICByZWdpc3RlcignVHJhbnNpdGlvbkVuZCcsIHRoaXMuZWwubmF0aXZlRWxlbWVudCwgKGU6IFRyYW5zaXRpb25FdmVudCkgPT4gdGhpcy5vbkVuZChlKSk7XHJcbiAgICByZWdpc3RlcignQW5pbWF0aW9uRW5kJywgdGhpcy5lbC5uYXRpdmVFbGVtZW50LCAoZTogQW5pbWF0aW9uRXZlbnQpID0+IHRoaXMub25FbmQoZSkpO1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogU2V0IGEgc3BlY2lmaWMgaW5saW5lIHN0eWxlIG9uIHRoZSBvdmVybGF5IGhvc3QgZWxlbWVudC5cclxuICAgKiBAcGFyYW0gcHJvcCBUaGUgc3R5bGUga2V5XHJcbiAgICogQHBhcmFtIHZhbHVlIFRoZSB2YWx1ZSwgdW5kZWZpbmVkIHRvIHJlbW92ZVxyXG4gICAqL1xyXG4gIHNldFN0eWxlKHByb3A6IHN0cmluZywgdmFsdWU6IHN0cmluZyk6IHRoaXMge1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsIHByb3AsIHZhbHVlKTtcclxuICAgIHJldHVybiB0aGlzO1xyXG4gIH1cclxuXHJcbiAgZm9yY2VSZWZsb3coKSB7XHJcbiAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQub2Zmc2V0V2lkdGg7XHJcbiAgfVxyXG5cclxuICBhZGRDbGFzcyhjc3M6IHN0cmluZywgZm9yY2VSZWZsb3c6IGJvb2xlYW4gPSBmYWxzZSk6IHZvaWQge1xyXG4gICAgY3NzLnNwbGl0KCcgJylcclxuICAgICAgLmZvckVhY2goYyA9PiB0aGlzLnJlbmRlcmVyLmFkZENsYXNzKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgYykpO1xyXG4gICAgaWYgKGZvcmNlUmVmbG93KSB7XHJcbiAgICAgIHRoaXMuZm9yY2VSZWZsb3coKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHJlbW92ZUNsYXNzKGNzczogc3RyaW5nLCBmb3JjZVJlZmxvdzogYm9vbGVhbiA9IGZhbHNlKTogdm9pZCB7XHJcbiAgICBjc3Muc3BsaXQoJyAnKVxyXG4gICAgICAuZm9yRWFjaChjID0+IHRoaXMucmVuZGVyZXIucmVtb3ZlQ2xhc3ModGhpcy5lbC5uYXRpdmVFbGVtZW50LCBjKSk7XHJcbiAgICBpZiAoZm9yY2VSZWZsb3cpIHtcclxuICAgICAgdGhpcy5mb3JjZVJlZmxvdygpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5hbmltYXRpb25FbmQgJiYgIXRoaXMuYW5pbWF0aW9uRW5kLmNsb3NlZCkge1xyXG4gICAgICB0aGlzLmFuaW1hdGlvbkVuZC5jb21wbGV0ZSgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgbXlBbmltYXRpb25FbmQkKCk6IE9ic2VydmFibGU8QW5pbWF0aW9uRXZlbnQgfCBUcmFuc2l0aW9uRXZlbnQ+IHtcclxuICAgIHJldHVybiB0aGlzLmFuaW1hdGlvbkVuZCQucGlwZShcclxuICAgICAgZmlsdGVyKGUgPT4gZS50YXJnZXQgPT09IHRoaXMuZWwubmF0aXZlRWxlbWVudClcclxuICAgICk7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBBZGQgYSBjb21wb25lbnQsIHN1cHBseSBhIHZpZXcgY29udGFpbmVyIHJlZi5cclxuICAgKiBOb3RlOiBUaGUgY29tcG9uZW50cyB2Y1JlZiB3aWxsIHJlc3VsdCBpbiBhIHNpYmxpbmcuXHJcbiAgICovXHJcbiAgcHJvdGVjdGVkIF9hZGRDb21wb25lbnQ8VD4oaW5zdHJ1Y3Rpb25zOiBDcmVhdGVDb21wb25lbnRBcmdzKTogQ29tcG9uZW50UmVmPFQ+IHtcclxuICAgIGNvbnN0IGNtcFJlZiA9IGNyZWF0ZUNvbXBvbmVudChpbnN0cnVjdGlvbnMpO1xyXG4gICAgY21wUmVmLmNoYW5nZURldGVjdG9yUmVmLmRldGVjdENoYW5nZXMoKTtcclxuXHJcbiAgICByZXR1cm4gY21wUmVmO1xyXG4gIH1cclxuXHJcblxyXG4gIHByaXZhdGUgb25FbmQoZXZlbnQ6IFRyYW5zaXRpb25FdmVudCB8IEFuaW1hdGlvbkV2ZW50KTogdm9pZCB7XHJcblxyXG4gICAgaWYgKCF0aGlzLmFuaW1hdGlvbkVuZC5jbG9zZWQpIHtcclxuICAgICAgdGhpcy5hbmltYXRpb25FbmQubmV4dChldmVudCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxufVxyXG4iXX0=