@looorent/ngx-simple-modal
Version:
A simple unopinionated framework to implement simple modal based behaviour in angular (v2+) projects.
99 lines • 10.6 kB
JavaScript
import { Component, ElementRef, Injector, ViewChild, ViewContainerRef } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
* The modal backdrop wrapping wrapper to the modal
*/
class SimpleModalWrapperComponent {
resolver;
/**
* Target viewContainer to insert modal content component
*/
viewContainer;
/**
* Link wrapper DOM element
*/
wrapper;
/**
* Wrapper modal and fade classes
*/
modalClasses = 'modal fade-anim';
/**
* Dialog content componet
* @type {SimpleModalComponent}
*/
content;
/**
* Click outside callback
*/
clickOutsideCallback;
/**
* Constructor
* @param {ComponentFactoryResolver} resolver
*/
constructor(resolver) {
this.resolver = resolver;
}
/**
* Adds content modal component to wrapper
* @param {Type<SimpleModalComponent>} component
* @return {SimpleModalComponent}
*/
addComponent(component) {
const factory = this.resolver.resolveComponentFactory(component);
const injector = Injector.create({
providers: [],
parent: 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;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: SimpleModalWrapperComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: SimpleModalWrapperComponent, selector: "simple-modal-wrapper", viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["viewContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: `
<div #wrapper [ngClass]="modalClasses" [ngStyle]="{ display: 'block' }" role="dialog">
<ng-template #viewContainer></ng-template>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
export { SimpleModalWrapperComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: SimpleModalWrapperComponent, decorators: [{
type: Component,
args: [{
selector: 'simple-modal-wrapper',
template: `
<div #wrapper [ngClass]="modalClasses" [ngStyle]="{ display: 'block' }" role="dialog">
<ng-template #viewContainer></ng-template>
</div>
`,
}]
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }]; }, propDecorators: { viewContainer: [{
type: ViewChild,
args: ['viewContainer', { read: ViewContainerRef, static: true }]
}], wrapper: [{
type: ViewChild,
args: ['wrapper', { read: ElementRef, static: true }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2ltcGxlLW1vZGFsLXdyYXBwZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3NpbXBsZS1tb2RhbC9zaW1wbGUtbW9kYWwtd3JhcHBlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFHVCxVQUFVLEVBQ1YsUUFBUSxFQUdSLFNBQVMsRUFDVCxnQkFBZ0IsRUFDakIsTUFBTSxlQUFlLENBQUM7OztBQUd2Qjs7R0FFRztBQUNILE1BUWEsMkJBQTJCO0lBZ0NsQjtJQS9CcEI7O09BRUc7SUFDbUUsYUFBYSxDQUFDO0lBRXBGOztPQUVHO0lBRUgsT0FBTyxDQUFhO0lBRXBCOztPQUVHO0lBQ0gsWUFBWSxHQUFHLGlCQUFpQixDQUFDO0lBRWpDOzs7T0FHRztJQUNILE9BQU8sQ0FBaUM7SUFFeEM7O09BRUc7SUFDSCxvQkFBb0IsQ0FBOEI7SUFFbEQ7OztPQUdHO0lBQ0gsWUFBb0IsUUFBa0M7UUFBbEMsYUFBUSxHQUFSLFFBQVEsQ0FBMEI7SUFBRyxDQUFDO0lBRTFEOzs7O09BSUc7SUFDSCxZQUFZLENBQVEsU0FBNEM7UUFDOUQsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyx1QkFBdUIsQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUNqRSxNQUFNLFFBQVEsR0FBRyxRQUFRLENBQUMsTUFBTSxDQUFDO1lBQy9CLFNBQVMsRUFBRSxFQUFFO1lBQ2IsTUFBTSxFQUFFLElBQUksQ0FBQyxhQUFhLENBQUMsUUFBUTtTQUNwQyxDQUFDLENBQUM7UUFDSCxNQUFNLFlBQVksR0FBRyxPQUFPLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQzlDLElBQUksQ0FBQyxhQUFhLENBQUMsTUFBTSxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUNqRCxJQUFJLENBQUMsT0FBTyxHQUFnQyxZQUFZLENBQUMsUUFBUSxDQUFDO1FBQ2xFLElBQUksQ0FBQyxPQUFPLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUM7UUFDcEMsT0FBTyxFQUFDLEdBQUcsRUFBRSxZQUFZLEVBQUUsU0FBUyxFQUFFLElBQUksQ0FBQyxPQUFPLEVBQUMsQ0FBQztJQUN0RCxDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsMEJBQTBCLENBQUMsUUFBb0I7UUFDN0MsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUM7UUFFL0MsSUFBSSxDQUFDLG9CQUFvQixHQUFHLENBQUMsS0FBaUIsRUFBRSxFQUFFO1lBQ2hELElBQUksS0FBSyxDQUFDLE1BQU0sS0FBSyxXQUFXLEVBQUU7Z0JBQ2hDLFFBQVEsRUFBRSxDQUFDO2FBQ1o7UUFDSCxDQUFDLENBQUM7UUFFRixXQUFXLENBQUMsZ0JBQWdCLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxvQkFBb0IsRUFBRSxLQUFLLENBQUMsQ0FBQztJQUMxRSxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksSUFBSSxDQUFDLG9CQUFvQixFQUFFO1lBQzdCLE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDO1lBQy9DLFdBQVcsQ0FBQyxtQkFBbUIsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLG9CQUFvQixFQUFFLEtBQUssQ0FBQyxDQUFDO1lBQzNFLElBQUksQ0FBQyxvQkFBb0IsR0FBRyxJQUFJLENBQUM7U0FDbEM7SUFDSCxDQUFDO3VHQTFFVSwyQkFBMkI7MkZBQTNCLDJCQUEyQix1SkFJRixnQkFBZ0IsMkdBS3RCLFVBQVUsMkNBZjlCOzs7O0dBSVQ7O1NBRVUsMkJBQTJCOzJGQUEzQiwyQkFBMkI7a0JBUnZDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLHNCQUFzQjtvQkFDaEMsUUFBUSxFQUFFOzs7O0dBSVQ7aUJBQ0Y7K0dBS3VFLGFBQWE7c0JBQWxGLFNBQVM7dUJBQUMsZUFBZSxFQUFFLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUU7Z0JBTXBFLE9BQU87c0JBRE4sU0FBUzt1QkFBQyxTQUFTLEVBQUUsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIENvbXBvbmVudEZhY3RvcnlSZXNvbHZlcixcbiAgQ29tcG9uZW50UmVmLFxuICBFbGVtZW50UmVmLFxuICBJbmplY3RvcixcbiAgT25EZXN0cm95LFxuICBUeXBlLFxuICBWaWV3Q2hpbGQsXG4gIFZpZXdDb250YWluZXJSZWZcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTaW1wbGVNb2RhbENvbXBvbmVudCB9IGZyb20gJy4vc2ltcGxlLW1vZGFsLmNvbXBvbmVudCc7XG5cbi8qKlxuICogVGhlIG1vZGFsIGJhY2tkcm9wIHdyYXBwaW5nIHdyYXBwZXIgdG8gdGhlIG1vZGFsXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NpbXBsZS1tb2RhbC13cmFwcGVyJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2ICN3cmFwcGVyIFtuZ0NsYXNzXT1cIm1vZGFsQ2xhc3Nlc1wiIFtuZ1N0eWxlXT1cInsgZGlzcGxheTogJ2Jsb2NrJyB9XCIgcm9sZT1cImRpYWxvZ1wiPlxuICAgICAgPG5nLXRlbXBsYXRlICN2aWV3Q29udGFpbmVyPjwvbmctdGVtcGxhdGU+XG4gICAgPC9kaXY+XG4gIGAsXG59KVxuZXhwb3J0IGNsYXNzIFNpbXBsZU1vZGFsV3JhcHBlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gIC8qKlxuICAgKiBUYXJnZXQgdmlld0NvbnRhaW5lciB0byBpbnNlcnQgbW9kYWwgY29udGVudCBjb21wb25lbnRcbiAgICovXG4gIEBWaWV3Q2hpbGQoJ3ZpZXdDb250YWluZXInLCB7IHJlYWQ6IFZpZXdDb250YWluZXJSZWYsIHN0YXRpYzogdHJ1ZSB9KSB2aWV3Q29udGFpbmVyO1xuXG4gIC8qKlxuICAgKiBMaW5rIHdyYXBwZXIgRE9NIGVsZW1lbnRcbiAgICovXG4gIEBWaWV3Q2hpbGQoJ3dyYXBwZXInLCB7IHJlYWQ6IEVsZW1lbnRSZWYsIHN0YXRpYzogdHJ1ZSB9KVxuICB3cmFwcGVyOiBFbGVtZW50UmVmO1xuXG4gIC8qKlxuICAgKiBXcmFwcGVyIG1vZGFsIGFuZCBmYWRlIGNsYXNzZXNcbiAgICovXG4gIG1vZGFsQ2xhc3NlcyA9ICdtb2RhbCBmYWRlLWFuaW0nO1xuXG4gIC8qKlxuICAgKiBEaWFsb2cgY29udGVudCBjb21wb25ldFxuICAgKiBAdHlwZSB7U2ltcGxlTW9kYWxDb21wb25lbnR9XG4gICAqL1xuICBjb250ZW50OiBTaW1wbGVNb2RhbENvbXBvbmVudDxhbnksIGFueT47XG5cbiAgLyoqXG4gICAqIENsaWNrIG91dHNpZGUgY2FsbGJhY2tcbiAgICovXG4gIGNsaWNrT3V0c2lkZUNhbGxiYWNrOiAoZXZlbnQ6IE1vdXNlRXZlbnQpID0+IHZvaWQ7XG5cbiAgLyoqXG4gICAqIENvbnN0cnVjdG9yXG4gICAqIEBwYXJhbSB7Q29tcG9uZW50RmFjdG9yeVJlc29sdmVyfSByZXNvbHZlclxuICAgKi9cbiAgY29uc3RydWN0b3IocHJpdmF0ZSByZXNvbHZlcjogQ29tcG9uZW50RmFjdG9yeVJlc29sdmVyKSB7fVxuXG4gIC8qKlxuICAgKiBBZGRzIGNvbnRlbnQgbW9kYWwgY29tcG9uZW50IHRvIHdyYXBwZXJcbiAgICogQHBhcmFtIHtUeXBlPFNpbXBsZU1vZGFsQ29tcG9uZW50Pn0gY29tcG9uZW50XG4gICAqIEByZXR1cm4ge1NpbXBsZU1vZGFsQ29tcG9uZW50fVxuICAgKi9cbiAgYWRkQ29tcG9uZW50PFQsIFQxPihjb21wb25lbnQ6IFR5cGU8U2ltcGxlTW9kYWxDb21wb25lbnQ8VCwgVDE+Pik6IHtyZWY6IENvbXBvbmVudFJlZjxTaW1wbGVNb2RhbENvbXBvbmVudDxULCBUMT4+OyBjb21wb25lbnQ6IFNpbXBsZU1vZGFsQ29tcG9uZW50PFQsIFQxPn0ge1xuICAgIGNvbnN0IGZhY3RvcnkgPSB0aGlzLnJlc29sdmVyLnJlc29sdmVDb21wb25lbnRGYWN0b3J5KGNvbXBvbmVudCk7XG4gICAgY29uc3QgaW5qZWN0b3IgPSBJbmplY3Rvci5jcmVhdGUoe1xuICAgICAgcHJvdmlkZXJzOiBbXSxcbiAgICAgIHBhcmVudDogdGhpcy52aWV3Q29udGFpbmVyLmluamVjdG9yXG4gICAgfSk7XG4gICAgY29uc3QgY29tcG9uZW50UmVmID0gZmFjdG9yeS5jcmVhdGUoaW5qZWN0b3IpO1xuICAgIHRoaXMudmlld0NvbnRhaW5lci5pbnNlcnQoY29tcG9uZW50UmVmLmhvc3RWaWV3KTtcbiAgICB0aGlzLmNvbnRlbnQgPSA8U2ltcGxlTW9kYWxDb21wb25lbnQ8VCwgVDE+PmNvbXBvbmVudFJlZi5pbnN0YW5jZTtcbiAgICB0aGlzLmNvbnRlbnQud3JhcHBlciA9IHRoaXMud3JhcHBlcjtcbiAgICByZXR1cm4ge3JlZjogY29tcG9uZW50UmVmLCBjb21wb25lbnQ6IHRoaXMuY29udGVudH07XG4gIH1cblxuICAvKipcbiAgICogQ29uZmlndXJlcyB0aGUgZnVuY3Rpb24gdG8gY2FsbCB3aGVuIHlvdSBjbGljayBvbiBiYWNrZ3JvdW5kIG9mIGEgbW9kYWwgYnV0IG5vdCB0aGUgY29udGVudHNcbiAgICogQHBhcmFtIGNhbGxiYWNrXG4gICAqL1xuICBvbkNsaWNrT3V0c2lkZU1vZGFsQ29udGVudChjYWxsYmFjazogKCkgPT4gdm9pZCkge1xuICAgIGNvbnN0IGNvbnRhaW5lckVsID0gdGhpcy53cmFwcGVyLm5hdGl2ZUVsZW1lbnQ7XG5cbiAgICB0aGlzLmNsaWNrT3V0c2lkZUNhbGxiYWNrID0gKGV2ZW50OiBNb3VzZUV2ZW50KSA9PiB7XG4gICAgICBpZiAoZXZlbnQudGFyZ2V0ID09PSBjb250YWluZXJFbCkge1xuICAgICAgICBjYWxsYmFjaygpO1xuICAgICAgfVxuICAgIH07XG5cbiAgICBjb250YWluZXJFbC5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIHRoaXMuY2xpY2tPdXRzaWRlQ2FsbGJhY2ssIGZhbHNlKTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIGlmICh0aGlzLmNsaWNrT3V0c2lkZUNhbGxiYWNrKSB7XG4gICAgICBjb25zdCBjb250YWluZXJFbCA9IHRoaXMud3JhcHBlci5uYXRpdmVFbGVtZW50O1xuICAgICAgY29udGFpbmVyRWwucmVtb3ZlRXZlbnRMaXN0ZW5lcignY2xpY2snLCB0aGlzLmNsaWNrT3V0c2lkZUNhbGxiYWNrLCBmYWxzZSk7XG4gICAgICB0aGlzLmNsaWNrT3V0c2lkZUNhbGxiYWNrID0gbnVsbDtcbiAgICB9XG4gIH1cbn1cbiJdfQ==