ngx-modalview
Version:
Simple way to implement modal in Angular (16+) projects.
96 lines • 10.6 kB
JavaScript
import { Component, ElementRef, ViewChild, ViewContainerRef, Injector } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
* The modal backdrop wrapping wrapper to the modal
*/
class NgxModalWrapperComponent {
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 {NgxModalComponent}
*/
content;
/**
* Click outside callback
*/
clickOutsideCallback;
/**
* Constructor
* @param {ComponentFactoryResolver} resolver
*/
constructor(resolver) {
this.resolver = resolver;
}
ngOnDestroy() {
if (this.clickOutsideCallback) {
const containerEl = this.wrapper.nativeElement;
containerEl.removeEventListener('click', this.clickOutsideCallback, false);
this.clickOutsideCallback = null;
}
}
/**
* Adds content modal component to wrapper
* @param {Type<NgxModalComponent>} component
* @return {NgxModalComponent}
*/
addComponent(component) {
const factory = this.resolver.resolveComponentFactory(component);
const injector = Injector.create([], 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);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgxModalWrapperComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: NgxModalWrapperComponent, selector: "ngx-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 { NgxModalWrapperComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgxModalWrapperComponent, decorators: [{
type: Component,
args: [{
selector: 'ngx-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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LW1vZGFsLXdyYXBwZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL25neC1tb2RhbC9uZ3gtbW9kYWwtd3JhcHBlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBNEIsVUFBVSxFQUFtQixTQUFTLEVBQUUsZ0JBQWdCLEVBQWdCLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBR3RKOztHQUVHO0FBQ0gsTUFRYSx3QkFBd0I7SUFpQ3pCO0lBaENWOztPQUVHO0lBQ21FLGFBQWEsQ0FBQztJQUVwRjs7T0FFRztJQUVILE9BQU8sQ0FBYTtJQUVwQjs7T0FFRztJQUNILFlBQVksR0FBRyxpQkFBaUIsQ0FBQztJQUVqQzs7O09BR0c7SUFDSCxPQUFPLENBQThCO0lBRXJDOztPQUVHO0lBQ0gsb0JBQW9CLENBQThCO0lBRWxEOzs7T0FHRztJQUNILFlBQ1UsUUFBa0M7UUFBbEMsYUFBUSxHQUFSLFFBQVEsQ0FBMEI7SUFDeEMsQ0FBQztJQUVMLFdBQVc7UUFDVCxJQUFJLElBQUksQ0FBQyxvQkFBb0IsRUFBRTtZQUM3QixNQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQztZQUMvQyxXQUFXLENBQUMsbUJBQW1CLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxvQkFBb0IsRUFBRSxLQUFLLENBQUMsQ0FBQztZQUMzRSxJQUFJLENBQUMsb0JBQW9CLEdBQUcsSUFBSSxDQUFDO1NBQ2xDO0lBQ0gsQ0FBQztJQUVEOzs7O09BSUc7SUFDSSxZQUFZLENBQVEsU0FBeUM7UUFDbEUsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyx1QkFBdUIsQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUNqRSxNQUFNLFFBQVEsR0FBRyxRQUFRLENBQUMsTUFBTSxDQUFDLEVBQUUsRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ2xFLE1BQU0sWUFBWSxHQUFHLE9BQU8sQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDOUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxNQUFNLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ2pELElBQUksQ0FBQyxPQUFPLEdBQTZCLFlBQVksQ0FBQyxRQUFRLENBQUM7UUFDL0QsSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQztRQUNwQyxPQUFPLEVBQUUsR0FBRyxFQUFFLFlBQVksRUFBRSxTQUFTLEVBQUUsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO0lBQ3hELENBQUM7SUFFRDs7O09BR0c7SUFDSSwwQkFBMEIsQ0FBQyxRQUFvQjtRQUNwRCxNQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQztRQUUvQyxJQUFJLENBQUMsb0JBQW9CLEdBQUcsQ0FBQyxLQUFpQixFQUFFLEVBQUU7WUFDaEQsSUFBSSxLQUFLLENBQUMsTUFBTSxLQUFLLFdBQVcsRUFBRTtnQkFDaEMsUUFBUSxFQUFFLENBQUM7YUFDWjtRQUNILENBQUMsQ0FBQztRQUVGLFdBQVcsQ0FBQyxnQkFBZ0IsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLG9CQUFvQixFQUFFLEtBQUssQ0FBQyxDQUFDO0lBQzFFLENBQUM7dUdBekVVLHdCQUF3QjsyRkFBeEIsd0JBQXdCLG9KQUlDLGdCQUFnQiwyR0FLdEIsVUFBVSwyQ0FmOUI7Ozs7R0FJVDs7U0FFVSx3QkFBd0I7MkZBQXhCLHdCQUF3QjtrQkFScEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsbUJBQW1CO29CQUM3QixRQUFRLEVBQUU7Ozs7R0FJVDtpQkFDRjsrR0FLdUUsYUFBYTtzQkFBbEYsU0FBUzt1QkFBQyxlQUFlLEVBQUUsRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRTtnQkFNcEUsT0FBTztzQkFETixTQUFTO3VCQUFDLFNBQVMsRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ29tcG9uZW50RmFjdG9yeVJlc29sdmVyLCBFbGVtZW50UmVmLCBPbkRlc3Ryb3ksIFR5cGUsIFZpZXdDaGlsZCwgVmlld0NvbnRhaW5lclJlZiwgQ29tcG9uZW50UmVmLCBJbmplY3RvciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBOZ3hNb2RhbENvbXBvbmVudCB9IGZyb20gJy4vbmd4LW1vZGFsLmNvbXBvbmVudCc7XHJcblxyXG4vKipcclxuICogVGhlIG1vZGFsIGJhY2tkcm9wIHdyYXBwaW5nIHdyYXBwZXIgdG8gdGhlIG1vZGFsXHJcbiAqL1xyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ25neC1tb2RhbC13cmFwcGVyJyxcclxuICB0ZW1wbGF0ZTogYFxyXG4gICAgPGRpdiAjd3JhcHBlciBbbmdDbGFzc109XCJtb2RhbENsYXNzZXNcIiBbbmdTdHlsZV09XCJ7IGRpc3BsYXk6ICdibG9jaycgfVwiIHJvbGU9XCJkaWFsb2dcIj5cclxuICAgICAgPG5nLXRlbXBsYXRlICN2aWV3Q29udGFpbmVyPjwvbmctdGVtcGxhdGU+XHJcbiAgICA8L2Rpdj5cclxuICBgLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgTmd4TW9kYWxXcmFwcGVyQ29tcG9uZW50IGltcGxlbWVudHMgT25EZXN0cm95IHtcclxuICAvKipcclxuICAgKiBUYXJnZXQgdmlld0NvbnRhaW5lciB0byBpbnNlcnQgbW9kYWwgY29udGVudCBjb21wb25lbnRcclxuICAgKi9cclxuICBAVmlld0NoaWxkKCd2aWV3Q29udGFpbmVyJywgeyByZWFkOiBWaWV3Q29udGFpbmVyUmVmLCBzdGF0aWM6IHRydWUgfSkgdmlld0NvbnRhaW5lcjtcclxuXHJcbiAgLyoqXHJcbiAgICogTGluayB3cmFwcGVyIERPTSBlbGVtZW50XHJcbiAgICovXHJcbiAgQFZpZXdDaGlsZCgnd3JhcHBlcicsIHsgcmVhZDogRWxlbWVudFJlZiwgc3RhdGljOiB0cnVlIH0pXHJcbiAgd3JhcHBlcjogRWxlbWVudFJlZjtcclxuXHJcbiAgLyoqXHJcbiAgICogV3JhcHBlciBtb2RhbCBhbmQgZmFkZSBjbGFzc2VzXHJcbiAgICovXHJcbiAgbW9kYWxDbGFzc2VzID0gJ21vZGFsIGZhZGUtYW5pbSc7XHJcblxyXG4gIC8qKlxyXG4gICAqIERpYWxvZyBjb250ZW50IGNvbXBvbmV0XHJcbiAgICogQHR5cGUge05neE1vZGFsQ29tcG9uZW50fVxyXG4gICAqL1xyXG4gIGNvbnRlbnQ6IE5neE1vZGFsQ29tcG9uZW50PGFueSwgYW55PjtcclxuXHJcbiAgLyoqXHJcbiAgICogQ2xpY2sgb3V0c2lkZSBjYWxsYmFja1xyXG4gICAqL1xyXG4gIGNsaWNrT3V0c2lkZUNhbGxiYWNrOiAoZXZlbnQ6IE1vdXNlRXZlbnQpID0+IHZvaWQ7XHJcblxyXG4gIC8qKlxyXG4gICAqIENvbnN0cnVjdG9yXHJcbiAgICogQHBhcmFtIHtDb21wb25lbnRGYWN0b3J5UmVzb2x2ZXJ9IHJlc29sdmVyXHJcbiAgICovXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIHJlc29sdmVyOiBDb21wb25lbnRGYWN0b3J5UmVzb2x2ZXJcclxuICApIHsgfVxyXG5cclxuICBuZ09uRGVzdHJveSgpIHtcclxuICAgIGlmICh0aGlzLmNsaWNrT3V0c2lkZUNhbGxiYWNrKSB7XHJcbiAgICAgIGNvbnN0IGNvbnRhaW5lckVsID0gdGhpcy53cmFwcGVyLm5hdGl2ZUVsZW1lbnQ7XHJcbiAgICAgIGNvbnRhaW5lckVsLnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgdGhpcy5jbGlja091dHNpZGVDYWxsYmFjaywgZmFsc2UpO1xyXG4gICAgICB0aGlzLmNsaWNrT3V0c2lkZUNhbGxiYWNrID0gbnVsbDtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIEFkZHMgY29udGVudCBtb2RhbCBjb21wb25lbnQgdG8gd3JhcHBlclxyXG4gICAqIEBwYXJhbSB7VHlwZTxOZ3hNb2RhbENvbXBvbmVudD59IGNvbXBvbmVudFxyXG4gICAqIEByZXR1cm4ge05neE1vZGFsQ29tcG9uZW50fVxyXG4gICAqL1xyXG4gIHB1YmxpYyBhZGRDb21wb25lbnQ8VCwgVDE+KGNvbXBvbmVudDogVHlwZTxOZ3hNb2RhbENvbXBvbmVudDxULCBUMT4+KTogeyByZWY6IENvbXBvbmVudFJlZjxOZ3hNb2RhbENvbXBvbmVudDxULCBUMT4+LCBjb21wb25lbnQ6IE5neE1vZGFsQ29tcG9uZW50PFQsIFQxPiB9IHtcclxuICAgIGNvbnN0IGZhY3RvcnkgPSB0aGlzLnJlc29sdmVyLnJlc29sdmVDb21wb25lbnRGYWN0b3J5KGNvbXBvbmVudCk7XHJcbiAgICBjb25zdCBpbmplY3RvciA9IEluamVjdG9yLmNyZWF0ZShbXSwgdGhpcy52aWV3Q29udGFpbmVyLmluamVjdG9yKTtcclxuICAgIGNvbnN0IGNvbXBvbmVudFJlZiA9IGZhY3RvcnkuY3JlYXRlKGluamVjdG9yKTtcclxuICAgIHRoaXMudmlld0NvbnRhaW5lci5pbnNlcnQoY29tcG9uZW50UmVmLmhvc3RWaWV3KTtcclxuICAgIHRoaXMuY29udGVudCA9IDxOZ3hNb2RhbENvbXBvbmVudDxULCBUMT4+Y29tcG9uZW50UmVmLmluc3RhbmNlO1xyXG4gICAgdGhpcy5jb250ZW50LndyYXBwZXIgPSB0aGlzLndyYXBwZXI7XHJcbiAgICByZXR1cm4geyByZWY6IGNvbXBvbmVudFJlZiwgY29tcG9uZW50OiB0aGlzLmNvbnRlbnQgfTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIENvbmZpZ3VyZXMgdGhlIGZ1bmN0aW9uIHRvIGNhbGwgd2hlbiB5b3UgY2xpY2sgb24gYmFja2dyb3VuZCBvZiBhIG1vZGFsIGJ1dCBub3QgdGhlIGNvbnRlbnRzXHJcbiAgICogQHBhcmFtIGNhbGxiYWNrXHJcbiAgICovXHJcbiAgcHVibGljIG9uQ2xpY2tPdXRzaWRlTW9kYWxDb250ZW50KGNhbGxiYWNrOiAoKSA9PiB2b2lkKSB7XHJcbiAgICBjb25zdCBjb250YWluZXJFbCA9IHRoaXMud3JhcHBlci5uYXRpdmVFbGVtZW50O1xyXG5cclxuICAgIHRoaXMuY2xpY2tPdXRzaWRlQ2FsbGJhY2sgPSAoZXZlbnQ6IE1vdXNlRXZlbnQpID0+IHtcclxuICAgICAgaWYgKGV2ZW50LnRhcmdldCA9PT0gY29udGFpbmVyRWwpIHtcclxuICAgICAgICBjYWxsYmFjaygpO1xyXG4gICAgICB9XHJcbiAgICB9O1xyXG5cclxuICAgIGNvbnRhaW5lckVsLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgdGhpcy5jbGlja091dHNpZGVDYWxsYmFjaywgZmFsc2UpO1xyXG4gIH1cclxufVxyXG4iXX0=