@ziflow/ngx-simple-modal
Version:
A simple unopinionated framework to implement simple modal based behaviour in angular (v2+) projects.
96 lines • 10.3 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 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('mousedown', this.clickOutsideCallback, false);
}
ngOnDestroy() {
if (this.clickOutsideCallback) {
const containerEl = this.wrapper.nativeElement;
containerEl.removeEventListener('mousedown', 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2ltcGxlLW1vZGFsLXdyYXBwZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3NpbXBsZS1tb2RhbC9zaW1wbGUtbW9kYWwtd3JhcHBlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFFVCxVQUFVLEVBQUUsUUFBUSxFQUdwQixTQUFTLEVBQ1QsZ0JBQWdCLEdBQ2pCLE1BQU0sZUFBZSxDQUFDOzs7QUFHdkI7O0dBRUc7QUFDSCxNQVFhLDJCQUEyQjtJQWdDbEI7SUEvQnBCOztPQUVHO0lBQ21FLGFBQWEsQ0FBQztJQUVwRjs7T0FFRztJQUVILE9BQU8sQ0FBYTtJQUVwQjs7T0FFRztJQUNILFlBQVksR0FBRyxpQkFBaUIsQ0FBQztJQUVqQzs7O09BR0c7SUFDSCxPQUFPLENBQWlDO0lBRXhDOztPQUVHO0lBQ0gsb0JBQW9CLENBQThCO0lBRWxEOzs7T0FHRztJQUNILFlBQW9CLFFBQWtDO1FBQWxDLGFBQVEsR0FBUixRQUFRLENBQTBCO0lBQUcsQ0FBQztJQUUxRDs7OztPQUlHO0lBQ0gsWUFBWSxDQUFRLFNBQTRDO1FBQzlELE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsdUJBQXVCLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDakUsTUFBTSxRQUFRLEdBQUcsUUFBUSxDQUFDLE1BQU0sQ0FBQyxFQUFFLFNBQVMsRUFBRSxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksQ0FBQyxhQUFhLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQztRQUN6RixNQUFNLFlBQVksR0FBRyxPQUFPLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQzlDLElBQUksQ0FBQyxhQUFhLENBQUMsTUFBTSxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUNqRCxJQUFJLENBQUMsT0FBTyxHQUFnQyxZQUFZLENBQUMsUUFBUSxDQUFDO1FBQ2xFLElBQUksQ0FBQyxPQUFPLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUM7UUFDcEMsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDO0lBQ3RCLENBQUM7SUFFRDs7O09BR0c7SUFDSCwwQkFBMEIsQ0FBQyxRQUFvQjtRQUM3QyxNQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQztRQUUvQyxJQUFJLENBQUMsb0JBQW9CLEdBQUcsQ0FBQyxLQUFpQixFQUFFLEVBQUU7WUFDaEQsSUFBSSxLQUFLLENBQUMsTUFBTSxLQUFLLFdBQVcsRUFBRTtnQkFDaEMsUUFBUSxFQUFFLENBQUM7YUFDWjtRQUNILENBQUMsQ0FBQztRQUVGLFdBQVcsQ0FBQyxnQkFBZ0IsQ0FBQyxXQUFXLEVBQUUsSUFBSSxDQUFDLG9CQUFvQixFQUFFLEtBQUssQ0FBQyxDQUFDO0lBQzlFLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxJQUFJLENBQUMsb0JBQW9CLEVBQUU7WUFDN0IsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUM7WUFDL0MsV0FBVyxDQUFDLG1CQUFtQixDQUFDLFdBQVcsRUFBRSxJQUFJLENBQUMsb0JBQW9CLEVBQUUsS0FBSyxDQUFDLENBQUM7WUFDL0UsSUFBSSxDQUFDLG9CQUFvQixHQUFHLElBQUksQ0FBQztTQUNsQztJQUNILENBQUM7dUdBdkVVLDJCQUEyQjsyRkFBM0IsMkJBQTJCLHVKQUlGLGdCQUFnQiwyR0FLdEIsVUFBVSwyQ0FmOUI7Ozs7R0FJVDs7U0FFVSwyQkFBMkI7MkZBQTNCLDJCQUEyQjtrQkFSdkMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsc0JBQXNCO29CQUNoQyxRQUFRLEVBQUU7Ozs7R0FJVDtpQkFDRjsrR0FLdUUsYUFBYTtzQkFBbEYsU0FBUzt1QkFBQyxlQUFlLEVBQUUsRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRTtnQkFNcEUsT0FBTztzQkFETixTQUFTO3VCQUFDLFNBQVMsRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgQ29tcG9uZW50RmFjdG9yeVJlc29sdmVyLFxuICBFbGVtZW50UmVmLCBJbmplY3RvcixcbiAgT25EZXN0cm95LFxuICBUeXBlLFxuICBWaWV3Q2hpbGQsXG4gIFZpZXdDb250YWluZXJSZWYsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU2ltcGxlTW9kYWxDb21wb25lbnQgfSBmcm9tICcuL3NpbXBsZS1tb2RhbC5jb21wb25lbnQnO1xuXG4vKipcbiAqIFRoZSBtb2RhbCBiYWNrZHJvcCB3cmFwcGluZyB3cmFwcGVyIHRvIHRoZSBtb2RhbFxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzaW1wbGUtbW9kYWwtd3JhcHBlcicsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiAjd3JhcHBlciBbbmdDbGFzc109XCJtb2RhbENsYXNzZXNcIiBbbmdTdHlsZV09XCJ7IGRpc3BsYXk6ICdibG9jaycgfVwiIHJvbGU9XCJkaWFsb2dcIj5cbiAgICAgIDxuZy10ZW1wbGF0ZSAjdmlld0NvbnRhaW5lcj48L25nLXRlbXBsYXRlPlxuICAgIDwvZGl2PlxuICBgLFxufSlcbmV4cG9ydCBjbGFzcyBTaW1wbGVNb2RhbFdyYXBwZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xuICAvKipcbiAgICogVGFyZ2V0IHZpZXdDb250YWluZXIgdG8gaW5zZXJ0IG1vZGFsIGNvbnRlbnQgY29tcG9uZW50XG4gICAqL1xuICBAVmlld0NoaWxkKCd2aWV3Q29udGFpbmVyJywgeyByZWFkOiBWaWV3Q29udGFpbmVyUmVmLCBzdGF0aWM6IHRydWUgfSkgdmlld0NvbnRhaW5lcjtcblxuICAvKipcbiAgICogTGluayB3cmFwcGVyIERPTSBlbGVtZW50XG4gICAqL1xuICBAVmlld0NoaWxkKCd3cmFwcGVyJywgeyByZWFkOiBFbGVtZW50UmVmLCBzdGF0aWM6IHRydWUgfSlcbiAgd3JhcHBlcjogRWxlbWVudFJlZjtcblxuICAvKipcbiAgICogV3JhcHBlciBtb2RhbCBhbmQgZmFkZSBjbGFzc2VzXG4gICAqL1xuICBtb2RhbENsYXNzZXMgPSAnbW9kYWwgZmFkZS1hbmltJztcblxuICAvKipcbiAgICogRGlhbG9nIGNvbnRlbnQgY29tcG9uZXRcbiAgICogQHR5cGUge1NpbXBsZU1vZGFsQ29tcG9uZW50fVxuICAgKi9cbiAgY29udGVudDogU2ltcGxlTW9kYWxDb21wb25lbnQ8YW55LCBhbnk+O1xuXG4gIC8qKlxuICAgKiBDbGljayBvdXRzaWRlIGNhbGxiYWNrXG4gICAqL1xuICBjbGlja091dHNpZGVDYWxsYmFjazogKGV2ZW50OiBNb3VzZUV2ZW50KSA9PiB2b2lkO1xuXG4gIC8qKlxuICAgKiBDb25zdHJ1Y3RvclxuICAgKiBAcGFyYW0ge0NvbXBvbmVudEZhY3RvcnlSZXNvbHZlcn0gcmVzb2x2ZXJcbiAgICovXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVzb2x2ZXI6IENvbXBvbmVudEZhY3RvcnlSZXNvbHZlcikge31cblxuICAvKipcbiAgICogQWRkcyBjb250ZW50IG1vZGFsIGNvbXBvbmVudCB0byB3cmFwcGVyXG4gICAqIEBwYXJhbSB7VHlwZTxTaW1wbGVNb2RhbENvbXBvbmVudD59IGNvbXBvbmVudFxuICAgKiBAcmV0dXJuIHtTaW1wbGVNb2RhbENvbXBvbmVudH1cbiAgICovXG4gIGFkZENvbXBvbmVudDxULCBUMT4oY29tcG9uZW50OiBUeXBlPFNpbXBsZU1vZGFsQ29tcG9uZW50PFQsIFQxPj4pIHtcbiAgICBjb25zdCBmYWN0b3J5ID0gdGhpcy5yZXNvbHZlci5yZXNvbHZlQ29tcG9uZW50RmFjdG9yeShjb21wb25lbnQpO1xuICAgIGNvbnN0IGluamVjdG9yID0gSW5qZWN0b3IuY3JlYXRlKHsgcHJvdmlkZXJzOiBbXSwgcGFyZW50OiB0aGlzLnZpZXdDb250YWluZXIuaW5qZWN0b3IgfSk7XG4gICAgY29uc3QgY29tcG9uZW50UmVmID0gZmFjdG9yeS5jcmVhdGUoaW5qZWN0b3IpO1xuICAgIHRoaXMudmlld0NvbnRhaW5lci5pbnNlcnQoY29tcG9uZW50UmVmLmhvc3RWaWV3KTtcbiAgICB0aGlzLmNvbnRlbnQgPSA8U2ltcGxlTW9kYWxDb21wb25lbnQ8VCwgVDE+PmNvbXBvbmVudFJlZi5pbnN0YW5jZTtcbiAgICB0aGlzLmNvbnRlbnQud3JhcHBlciA9IHRoaXMud3JhcHBlcjtcbiAgICByZXR1cm4gdGhpcy5jb250ZW50O1xuICB9XG5cbiAgLyoqXG4gICAqIENvbmZpZ3VyZXMgdGhlIGZ1bmN0aW9uIHRvIGNhbGwgd2hlbiB5b3UgY2xpY2sgb24gYmFja2dyb3VuZCBvZiBhIG1vZGFsIGJ1dCBub3QgdGhlIGNvbnRlbnRzXG4gICAqIEBwYXJhbSBjYWxsYmFja1xuICAgKi9cbiAgb25DbGlja091dHNpZGVNb2RhbENvbnRlbnQoY2FsbGJhY2s6ICgpID0+IHZvaWQpIHtcbiAgICBjb25zdCBjb250YWluZXJFbCA9IHRoaXMud3JhcHBlci5uYXRpdmVFbGVtZW50O1xuXG4gICAgdGhpcy5jbGlja091dHNpZGVDYWxsYmFjayA9IChldmVudDogTW91c2VFdmVudCkgPT4ge1xuICAgICAgaWYgKGV2ZW50LnRhcmdldCA9PT0gY29udGFpbmVyRWwpIHtcbiAgICAgICAgY2FsbGJhY2soKTtcbiAgICAgIH1cbiAgICB9O1xuXG4gICAgY29udGFpbmVyRWwuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgdGhpcy5jbGlja091dHNpZGVDYWxsYmFjaywgZmFsc2UpO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgaWYgKHRoaXMuY2xpY2tPdXRzaWRlQ2FsbGJhY2spIHtcbiAgICAgIGNvbnN0IGNvbnRhaW5lckVsID0gdGhpcy53cmFwcGVyLm5hdGl2ZUVsZW1lbnQ7XG4gICAgICBjb250YWluZXJFbC5yZW1vdmVFdmVudExpc3RlbmVyKCdtb3VzZWRvd24nLCB0aGlzLmNsaWNrT3V0c2lkZUNhbGxiYWNrLCBmYWxzZSk7XG4gICAgICB0aGlzLmNsaWNrT3V0c2lkZUNhbGxiYWNrID0gbnVsbDtcbiAgICB9XG4gIH1cbn1cbiJdfQ==