ngx-simple-modal
Version:
A simple unopinionated framework to implement simple modal based behaviour in angular (v2+) projects.
73 lines • 9.04 kB
JavaScript
import * as tslib_1 from "tslib";
import { Component, ComponentFactoryResolver, ElementRef, OnDestroy, ReflectiveInjector, Type, ViewChild, ViewContainerRef, ComponentRef, } from '@angular/core';
/**
* The modal backdrop wrapping wrapper to the modal
*/
let SimpleModalWrapperComponent = class SimpleModalWrapperComponent {
/**
* Constructor
* @param {ComponentFactoryResolver} resolver
*/
constructor(resolver) {
this.resolver = resolver;
/**
* Wrapper modal and fade classes
*/
this.modalClasses = 'modal fade-anim';
}
/**
* Adds content modal component to wrapper
* @param {Type<SimpleModalComponent>} component
* @return {SimpleModalComponent}
*/
addComponent(component) {
const factory = this.resolver.resolveComponentFactory(component);
const injector = ReflectiveInjector.fromResolvedProviders([], this.viewContainer.injector);
const componentRef = factory.create(injector);
this.viewContainer.insert(componentRef.hostView);
this.content = componentRef.instance;
this.content.wrapper = this.wrapper;
return { ref: componentRef, component: this.content };
}
/**
* Configures the function to call when you click on background of a modal but not the contents
* @param callback
*/
onClickOutsideModalContent(callback) {
const containerEl = this.wrapper.nativeElement;
this.clickOutsideCallback = (event) => {
if (event.target === containerEl) {
callback();
}
};
containerEl.addEventListener('click', this.clickOutsideCallback, false);
}
ngOnDestroy() {
if (this.clickOutsideCallback) {
const containerEl = this.wrapper.nativeElement;
containerEl.removeEventListener('click', this.clickOutsideCallback, false);
this.clickOutsideCallback = null;
}
}
};
SimpleModalWrapperComponent.ctorParameters = () => [
{ type: ComponentFactoryResolver }
];
tslib_1.__decorate([
ViewChild('viewContainer', { read: ViewContainerRef, static: true })
], SimpleModalWrapperComponent.prototype, "viewContainer", void 0);
tslib_1.__decorate([
ViewChild('wrapper', { read: ElementRef, static: true })
], SimpleModalWrapperComponent.prototype, "wrapper", void 0);
SimpleModalWrapperComponent = tslib_1.__decorate([
Component({
selector: 'simple-modal-wrapper',
template: `
<div #wrapper [ngClass]="modalClasses" [ngStyle]="{ display: 'block' }" role="dialog">
<ng-template #viewContainer></ng-template>
</div>
`
})
], SimpleModalWrapperComponent);
export { SimpleModalWrapperComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2ltcGxlLW1vZGFsLXdyYXBwZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LXNpbXBsZS1tb2RhbC8iLCJzb3VyY2VzIjpbInNpbXBsZS1tb2RhbC9zaW1wbGUtbW9kYWwtd3JhcHBlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1Qsd0JBQXdCLEVBQ3hCLFVBQVUsRUFDVixTQUFTLEVBQ1Qsa0JBQWtCLEVBQ2xCLElBQUksRUFDSixTQUFTLEVBQ1QsZ0JBQWdCLEVBQUUsWUFBWSxHQUMvQixNQUFNLGVBQWUsQ0FBQztBQUd2Qjs7R0FFRztBQVNILElBQWEsMkJBQTJCLEdBQXhDLE1BQWEsMkJBQTJCO0lBNEJ0Qzs7O09BR0c7SUFDSCxZQUFvQixRQUFrQztRQUFsQyxhQUFRLEdBQVIsUUFBUSxDQUEwQjtRQXBCdEQ7O1dBRUc7UUFDSCxpQkFBWSxHQUFHLGlCQUFpQixDQUFDO0lBaUJ3QixDQUFDO0lBRTFEOzs7O09BSUc7SUFDSCxZQUFZLENBQVEsU0FBNEM7UUFDOUQsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyx1QkFBdUIsQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUNqRSxNQUFNLFFBQVEsR0FBRyxrQkFBa0IsQ0FBQyxxQkFBcUIsQ0FBQyxFQUFFLEVBQUUsSUFBSSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUMzRixNQUFNLFlBQVksR0FBRyxPQUFPLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQzlDLElBQUksQ0FBQyxhQUFhLENBQUMsTUFBTSxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUNqRCxJQUFJLENBQUMsT0FBTyxHQUFnQyxZQUFZLENBQUMsUUFBUSxDQUFDO1FBQ2xFLElBQUksQ0FBQyxPQUFPLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUM7UUFDcEMsT0FBTyxFQUFDLEdBQUcsRUFBRSxZQUFZLEVBQUUsU0FBUyxFQUFFLElBQUksQ0FBQyxPQUFPLEVBQUMsQ0FBQztJQUN0RCxDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsMEJBQTBCLENBQUMsUUFBb0I7UUFDN0MsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUM7UUFFL0MsSUFBSSxDQUFDLG9CQUFvQixHQUFHLENBQUMsS0FBaUIsRUFBRSxFQUFFO1lBQ2hELElBQUksS0FBSyxDQUFDLE1BQU0sS0FBSyxXQUFXLEVBQUU7Z0JBQ2hDLFFBQVEsRUFBRSxDQUFDO2FBQ1o7UUFDSCxDQUFDLENBQUM7UUFFRixXQUFXLENBQUMsZ0JBQWdCLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxvQkFBb0IsRUFBRSxLQUFLLENBQUMsQ0FBQztJQUMxRSxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksSUFBSSxDQUFDLG9CQUFvQixFQUFFO1lBQzdCLE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDO1lBQy9DLFdBQVcsQ0FBQyxtQkFBbUIsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLG9CQUFvQixFQUFFLEtBQUssQ0FBQyxDQUFDO1lBQzNFLElBQUksQ0FBQyxvQkFBb0IsR0FBRyxJQUFJLENBQUM7U0FDbEM7SUFDSCxDQUFDO0NBQ0YsQ0FBQTs7WUF4QytCLHdCQUF3Qjs7QUE1QmdCO0lBQXJFLFNBQVMsQ0FBQyxlQUFlLEVBQUUsRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSxDQUFDO2tFQUFlO0FBTXBGO0lBREMsU0FBUyxDQUFDLFNBQVMsRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSxDQUFDOzREQUNyQztBQVZULDJCQUEyQjtJQVJ2QyxTQUFTLENBQUM7UUFDVCxRQUFRLEVBQUUsc0JBQXNCO1FBQ2hDLFFBQVEsRUFBRTs7OztHQUlUO0tBQ0YsQ0FBQztHQUNXLDJCQUEyQixDQXdFdkM7U0F4RVksMkJBQTJCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBDb21wb25lbnRGYWN0b3J5UmVzb2x2ZXIsXG4gIEVsZW1lbnRSZWYsXG4gIE9uRGVzdHJveSxcbiAgUmVmbGVjdGl2ZUluamVjdG9yLFxuICBUeXBlLFxuICBWaWV3Q2hpbGQsXG4gIFZpZXdDb250YWluZXJSZWYsIENvbXBvbmVudFJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTaW1wbGVNb2RhbENvbXBvbmVudCB9IGZyb20gJy4vc2ltcGxlLW1vZGFsLmNvbXBvbmVudCc7XG5cbi8qKlxuICogVGhlIG1vZGFsIGJhY2tkcm9wIHdyYXBwaW5nIHdyYXBwZXIgdG8gdGhlIG1vZGFsXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NpbXBsZS1tb2RhbC13cmFwcGVyJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2ICN3cmFwcGVyIFtuZ0NsYXNzXT1cIm1vZGFsQ2xhc3Nlc1wiIFtuZ1N0eWxlXT1cInsgZGlzcGxheTogJ2Jsb2NrJyB9XCIgcm9sZT1cImRpYWxvZ1wiPlxuICAgICAgPG5nLXRlbXBsYXRlICN2aWV3Q29udGFpbmVyPjwvbmctdGVtcGxhdGU+XG4gICAgPC9kaXY+XG4gIGAsXG59KVxuZXhwb3J0IGNsYXNzIFNpbXBsZU1vZGFsV3JhcHBlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gIC8qKlxuICAgKiBUYXJnZXQgdmlld0NvbnRhaW5lciB0byBpbnNlcnQgbW9kYWwgY29udGVudCBjb21wb25lbnRcbiAgICovXG4gIEBWaWV3Q2hpbGQoJ3ZpZXdDb250YWluZXInLCB7IHJlYWQ6IFZpZXdDb250YWluZXJSZWYsIHN0YXRpYzogdHJ1ZSB9KSB2aWV3Q29udGFpbmVyO1xuXG4gIC8qKlxuICAgKiBMaW5rIHdyYXBwZXIgRE9NIGVsZW1lbnRcbiAgICovXG4gIEBWaWV3Q2hpbGQoJ3dyYXBwZXInLCB7IHJlYWQ6IEVsZW1lbnRSZWYsIHN0YXRpYzogdHJ1ZSB9KVxuICB3cmFwcGVyOiBFbGVtZW50UmVmO1xuXG4gIC8qKlxuICAgKiBXcmFwcGVyIG1vZGFsIGFuZCBmYWRlIGNsYXNzZXNcbiAgICovXG4gIG1vZGFsQ2xhc3NlcyA9ICdtb2RhbCBmYWRlLWFuaW0nO1xuXG4gIC8qKlxuICAgKiBEaWFsb2cgY29udGVudCBjb21wb25ldFxuICAgKiBAdHlwZSB7U2ltcGxlTW9kYWxDb21wb25lbnR9XG4gICAqL1xuICBjb250ZW50OiBTaW1wbGVNb2RhbENvbXBvbmVudDxhbnksIGFueT47XG5cbiAgLyoqXG4gICAqIENsaWNrIG91dHNpZGUgY2FsbGJhY2tcbiAgICovXG4gIGNsaWNrT3V0c2lkZUNhbGxiYWNrOiAoZXZlbnQ6IE1vdXNlRXZlbnQpID0+IHZvaWQ7XG5cbiAgLyoqXG4gICAqIENvbnN0cnVjdG9yXG4gICAqIEBwYXJhbSB7Q29tcG9uZW50RmFjdG9yeVJlc29sdmVyfSByZXNvbHZlclxuICAgKi9cbiAgY29uc3RydWN0b3IocHJpdmF0ZSByZXNvbHZlcjogQ29tcG9uZW50RmFjdG9yeVJlc29sdmVyKSB7fVxuXG4gIC8qKlxuICAgKiBBZGRzIGNvbnRlbnQgbW9kYWwgY29tcG9uZW50IHRvIHdyYXBwZXJcbiAgICogQHBhcmFtIHtUeXBlPFNpbXBsZU1vZGFsQ29tcG9uZW50Pn0gY29tcG9uZW50XG4gICAqIEByZXR1cm4ge1NpbXBsZU1vZGFsQ29tcG9uZW50fVxuICAgKi9cbiAgYWRkQ29tcG9uZW50PFQsIFQxPihjb21wb25lbnQ6IFR5cGU8U2ltcGxlTW9kYWxDb21wb25lbnQ8VCwgVDE+Pik6IHtyZWY6IENvbXBvbmVudFJlZjxTaW1wbGVNb2RhbENvbXBvbmVudDxULCBUMT4+LCBjb21wb25lbnQ6IFNpbXBsZU1vZGFsQ29tcG9uZW50PFQsIFQxPn0ge1xuICAgIGNvbnN0IGZhY3RvcnkgPSB0aGlzLnJlc29sdmVyLnJlc29sdmVDb21wb25lbnRGYWN0b3J5KGNvbXBvbmVudCk7XG4gICAgY29uc3QgaW5qZWN0b3IgPSBSZWZsZWN0aXZlSW5qZWN0b3IuZnJvbVJlc29sdmVkUHJvdmlkZXJzKFtdLCB0aGlzLnZpZXdDb250YWluZXIuaW5qZWN0b3IpO1xuICAgIGNvbnN0IGNvbXBvbmVudFJlZiA9IGZhY3RvcnkuY3JlYXRlKGluamVjdG9yKTtcbiAgICB0aGlzLnZpZXdDb250YWluZXIuaW5zZXJ0KGNvbXBvbmVudFJlZi5ob3N0Vmlldyk7XG4gICAgdGhpcy5jb250ZW50ID0gPFNpbXBsZU1vZGFsQ29tcG9uZW50PFQsIFQxPj5jb21wb25lbnRSZWYuaW5zdGFuY2U7XG4gICAgdGhpcy5jb250ZW50LndyYXBwZXIgPSB0aGlzLndyYXBwZXI7XG4gICAgcmV0dXJuIHtyZWY6IGNvbXBvbmVudFJlZiwgY29tcG9uZW50OiB0aGlzLmNvbnRlbnR9O1xuICB9XG5cbiAgLyoqXG4gICAqIENvbmZpZ3VyZXMgdGhlIGZ1bmN0aW9uIHRvIGNhbGwgd2hlbiB5b3UgY2xpY2sgb24gYmFja2dyb3VuZCBvZiBhIG1vZGFsIGJ1dCBub3QgdGhlIGNvbnRlbnRzXG4gICAqIEBwYXJhbSBjYWxsYmFja1xuICAgKi9cbiAgb25DbGlja091dHNpZGVNb2RhbENvbnRlbnQoY2FsbGJhY2s6ICgpID0+IHZvaWQpIHtcbiAgICBjb25zdCBjb250YWluZXJFbCA9IHRoaXMud3JhcHBlci5uYXRpdmVFbGVtZW50O1xuXG4gICAgdGhpcy5jbGlja091dHNpZGVDYWxsYmFjayA9IChldmVudDogTW91c2VFdmVudCkgPT4ge1xuICAgICAgaWYgKGV2ZW50LnRhcmdldCA9PT0gY29udGFpbmVyRWwpIHtcbiAgICAgICAgY2FsbGJhY2soKTtcbiAgICAgIH1cbiAgICB9O1xuXG4gICAgY29udGFpbmVyRWwuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCB0aGlzLmNsaWNrT3V0c2lkZUNhbGxiYWNrLCBmYWxzZSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICBpZiAodGhpcy5jbGlja091dHNpZGVDYWxsYmFjaykge1xuICAgICAgY29uc3QgY29udGFpbmVyRWwgPSB0aGlzLndyYXBwZXIubmF0aXZlRWxlbWVudDtcbiAgICAgIGNvbnRhaW5lckVsLnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgdGhpcy5jbGlja091dHNpZGVDYWxsYmFjaywgZmFsc2UpO1xuICAgICAgdGhpcy5jbGlja091dHNpZGVDYWxsYmFjayA9IG51bGw7XG4gICAgfVxuICB9XG59XG4iXX0=