ngx-modalview
Version:
Simple way to implement modal in Angular (16+) projects.
113 lines • 13 kB
JavaScript
import { Injectable, Optional } from '@angular/core';
import { NgxModalHolderComponent } from './ngx-modal-holder.component';
import * as i0 from "@angular/core";
export class NgxModalServiceConfig {
container = null;
}
class NgxModalService {
resolver;
applicationRef;
injector;
/**
* Placeholder of modals
* @type {NgxModalHolderComponent}
*/
modalHolderComponent;
/**
* HTML container for modals
* type {HTMLElement | string}
*/
_container;
constructor(resolver, applicationRef, injector, config) {
this.resolver = resolver;
this.applicationRef = applicationRef;
this.injector = injector;
if (config) {
this.container = config.container;
}
}
/**
* Accessor for contain - will auto generate from string
* if needed or default to the root element if nothing was set
*/
set container(c) {
this._container = c;
}
get container() {
if (typeof this._container === 'string') {
this._container = document.getElementById(this._container);
}
if (!this._container && this.applicationRef['components'].length) {
const componentRootViewContainer = this.applicationRef['components'][0];
this.container = componentRootViewContainer.hostView.rootNodes[0];
}
if (!this._container || typeof this._container === 'string') {
this._container = document.getElementsByTagName('body')[0];
}
return this._container;
}
/**
* Creates and add to DOM modal holder component.
*
* @returns {NgxModalHolderComponent}
*/
createSimpleModalHolder() {
const componentFactory = this.resolver.resolveComponentFactory(NgxModalHolderComponent);
const componentRef = componentFactory.create(this.injector);
const componentRootNode = componentRef.hostView.rootNodes[0];
this.applicationRef.attachView(componentRef.hostView);
componentRef.onDestroy(() => {
this.applicationRef.detachView(componentRef.hostView);
});
this.container.appendChild(componentRootNode);
return componentRef.instance;
}
/**
* Adds modal
*
* @param {Type<NgxModalComponent<T, T1>>} component
* @param {T?} data
* @param {NgxModalOptionsOverrides?} options
*
* @returns {Observable<T1>}
*/
addModal(component, data, options) {
if (!this.modalHolderComponent) {
this.modalHolderComponent = this.createSimpleModalHolder();
}
return this.modalHolderComponent.addModal(component, data, options);
}
/**
* Hides and removes modal from DOM, resolves promise when fully removed
*
* @param {NgxModalComponent} component
*
* @returns {Promise<{}>}
*/
removeModal(component) {
if (!this.modalHolderComponent) {
return Promise.resolve({});
}
return this.modalHolderComponent.removeModal(component);
}
/**
* Closes all modals, resolves promise when they're fully removed
*
* @returns {Promise<{}>}
*/
removeAll() {
if (!this.modalHolderComponent) {
return Promise.resolve({});
}
return this.modalHolderComponent.removeAllModals();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgxModalService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: NgxModalServiceConfig, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgxModalService });
}
export { NgxModalService };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgxModalService, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: NgxModalServiceConfig, decorators: [{
type: Optional
}] }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LW1vZGFsLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbmd4LW1vZGFsL25neC1tb2RhbC5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBNkQsVUFBVSxFQUFZLFFBQVEsRUFBUSxNQUFNLGVBQWUsQ0FBQztBQUVoSSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQzs7QUFJdkUsTUFBTSxPQUFPLHFCQUFxQjtJQUNoQyxTQUFTLEdBQXlCLElBQUksQ0FBQztDQUN4QztBQUVELE1BQ2EsZUFBZTtJQWNoQjtJQUNBO0lBQ0E7SUFmVjs7O09BR0c7SUFDSyxvQkFBb0IsQ0FBMEI7SUFFdEQ7OztPQUdHO0lBQ0ssVUFBVSxDQUFDO0lBRW5CLFlBQ1UsUUFBa0MsRUFDbEMsY0FBOEIsRUFDOUIsUUFBa0IsRUFDZCxNQUE2QjtRQUhqQyxhQUFRLEdBQVIsUUFBUSxDQUEwQjtRQUNsQyxtQkFBYyxHQUFkLGNBQWMsQ0FBZ0I7UUFDOUIsYUFBUSxHQUFSLFFBQVEsQ0FBVTtRQUcxQixJQUFJLE1BQU0sRUFBRTtZQUNWLElBQUksQ0FBQyxTQUFTLEdBQUcsTUFBTSxDQUFDLFNBQWdCLENBQUM7U0FDMUM7SUFDSCxDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsSUFBWSxTQUFTLENBQUMsQ0FBQztRQUNyQixJQUFJLENBQUMsVUFBVSxHQUFHLENBQUMsQ0FBQztJQUN0QixDQUFDO0lBRUQsSUFBWSxTQUFTO1FBQ25CLElBQUksT0FBTyxJQUFJLENBQUMsVUFBVSxLQUFLLFFBQVEsRUFBRTtZQUN2QyxJQUFJLENBQUMsVUFBVSxHQUFHLFFBQVEsQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1NBQzVEO1FBRUQsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLElBQUksSUFBSSxDQUFDLGNBQWMsQ0FBQyxZQUFZLENBQUMsQ0FBQyxNQUFNLEVBQUU7WUFDaEUsTUFBTSwwQkFBMEIsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLFlBQVksQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQ3hFLElBQUksQ0FBQyxTQUFTLEdBQUksMEJBQTBCLENBQUMsUUFBaUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFnQixDQUFDO1NBQzVHO1FBRUQsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLElBQUksT0FBTyxJQUFJLENBQUMsVUFBVSxLQUFLLFFBQVEsRUFBRTtZQUMzRCxJQUFJLENBQUMsVUFBVSxHQUFHLFFBQVEsQ0FBQyxvQkFBb0IsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztTQUM1RDtRQUVELE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUN6QixDQUFDO0lBRUQ7Ozs7T0FJRztJQUNLLHVCQUF1QjtRQUM3QixNQUFNLGdCQUFnQixHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsdUJBQXVCLENBQUMsdUJBQXVCLENBQUMsQ0FBQztRQUN4RixNQUFNLFlBQVksR0FBRyxnQkFBZ0IsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQzVELE1BQU0saUJBQWlCLEdBQUksWUFBWSxDQUFDLFFBQWlDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBZ0IsQ0FBQztRQUV0RyxJQUFJLENBQUMsY0FBYyxDQUFDLFVBQVUsQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUFDLENBQUM7UUFFdEQsWUFBWSxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDMUIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxVQUFVLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ3hELENBQUMsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLFNBQVMsQ0FBQyxXQUFXLENBQUMsaUJBQWlCLENBQUMsQ0FBQztRQUU5QyxPQUFPLFlBQVksQ0FBQyxRQUFRLENBQUM7SUFDL0IsQ0FBQztJQUVEOzs7Ozs7OztPQVFHO0lBQ0ksUUFBUSxDQUNiLFNBQXlDLEVBQ3pDLElBQVEsRUFDUixPQUFrQztRQUVsQyxJQUFJLENBQUMsSUFBSSxDQUFDLG9CQUFvQixFQUFFO1lBQzlCLElBQUksQ0FBQyxvQkFBb0IsR0FBRyxJQUFJLENBQUMsdUJBQXVCLEVBQUUsQ0FBQztTQUM1RDtRQUNELE9BQU8sSUFBSSxDQUFDLG9CQUFvQixDQUFDLFFBQVEsQ0FBUSxTQUFTLEVBQUUsSUFBSSxFQUFFLE9BQU8sQ0FBQyxDQUFDO0lBQzdFLENBQUM7SUFFRDs7Ozs7O09BTUc7SUFDSSxXQUFXLENBQUMsU0FBc0M7UUFDdkQsSUFBSSxDQUFDLElBQUksQ0FBQyxvQkFBb0IsRUFBRTtZQUM5QixPQUFPLE9BQU8sQ0FBQyxPQUFPLENBQUMsRUFBRSxDQUFDLENBQUM7U0FDNUI7UUFDRCxPQUFPLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxXQUFXLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDMUQsQ0FBQztJQUVEOzs7O09BSUc7SUFDSSxTQUFTO1FBQ2QsSUFBSSxDQUFDLElBQUksQ0FBQyxvQkFBb0IsRUFBRTtZQUM5QixPQUFPLE9BQU8sQ0FBQyxPQUFPLENBQUMsRUFBRSxDQUFDLENBQUM7U0FDNUI7UUFDRCxPQUFPLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxlQUFlLEVBQUUsQ0FBQztJQUNyRCxDQUFDO3VHQWxIVSxlQUFlOzJHQUFmLGVBQWU7O1NBQWYsZUFBZTsyRkFBZixlQUFlO2tCQUQzQixVQUFVOzswQkFrQk4sUUFBUSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFwcGxpY2F0aW9uUmVmLCBDb21wb25lbnRGYWN0b3J5UmVzb2x2ZXIsIEVtYmVkZGVkVmlld1JlZiwgSW5qZWN0YWJsZSwgSW5qZWN0b3IsIE9wdGlvbmFsLCBUeXBlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE9ic2VydmFibGUgfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHsgTmd4TW9kYWxIb2xkZXJDb21wb25lbnQgfSBmcm9tICcuL25neC1tb2RhbC1ob2xkZXIuY29tcG9uZW50JztcclxuaW1wb3J0IHsgTmd4TW9kYWxDb21wb25lbnQgfSBmcm9tICcuL25neC1tb2RhbC5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBOZ3hNb2RhbE9wdGlvbnNPdmVycmlkZXMgfSBmcm9tICcuL25neC1tb2RhbC1vcHRpb25zJztcclxuXHJcbmV4cG9ydCBjbGFzcyBOZ3hNb2RhbFNlcnZpY2VDb25maWcge1xyXG4gIGNvbnRhaW5lcjogSFRNTEVsZW1lbnQgfCBzdHJpbmcgPSBudWxsO1xyXG59XHJcblxyXG5ASW5qZWN0YWJsZSgpXHJcbmV4cG9ydCBjbGFzcyBOZ3hNb2RhbFNlcnZpY2Uge1xyXG4gIC8qKlxyXG4gICAqIFBsYWNlaG9sZGVyIG9mIG1vZGFsc1xyXG4gICAqIEB0eXBlIHtOZ3hNb2RhbEhvbGRlckNvbXBvbmVudH1cclxuICAgKi9cclxuICBwcml2YXRlIG1vZGFsSG9sZGVyQ29tcG9uZW50OiBOZ3hNb2RhbEhvbGRlckNvbXBvbmVudDtcclxuXHJcbiAgLyoqXHJcbiAgICogSFRNTCBjb250YWluZXIgZm9yIG1vZGFsc1xyXG4gICAqIHR5cGUge0hUTUxFbGVtZW50IHwgc3RyaW5nfVxyXG4gICAqL1xyXG4gIHByaXZhdGUgX2NvbnRhaW5lcjtcclxuXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIHJlc29sdmVyOiBDb21wb25lbnRGYWN0b3J5UmVzb2x2ZXIsXHJcbiAgICBwcml2YXRlIGFwcGxpY2F0aW9uUmVmOiBBcHBsaWNhdGlvblJlZixcclxuICAgIHByaXZhdGUgaW5qZWN0b3I6IEluamVjdG9yLFxyXG4gICAgQE9wdGlvbmFsKCkgY29uZmlnOiBOZ3hNb2RhbFNlcnZpY2VDb25maWdcclxuICApIHtcclxuICAgIGlmIChjb25maWcpIHtcclxuICAgICAgdGhpcy5jb250YWluZXIgPSBjb25maWcuY29udGFpbmVyIGFzIGFueTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIEFjY2Vzc29yIGZvciBjb250YWluIC0gd2lsbCBhdXRvIGdlbmVyYXRlIGZyb20gc3RyaW5nXHJcbiAgICogaWYgbmVlZGVkIG9yIGRlZmF1bHQgdG8gdGhlIHJvb3QgZWxlbWVudCBpZiBub3RoaW5nIHdhcyBzZXRcclxuICAgKi9cclxuICBwcml2YXRlIHNldCBjb250YWluZXIoYykge1xyXG4gICAgdGhpcy5fY29udGFpbmVyID0gYztcclxuICB9XHJcblxyXG4gIHByaXZhdGUgZ2V0IGNvbnRhaW5lcigpOiBIVE1MRWxlbWVudCB7XHJcbiAgICBpZiAodHlwZW9mIHRoaXMuX2NvbnRhaW5lciA9PT0gJ3N0cmluZycpIHtcclxuICAgICAgdGhpcy5fY29udGFpbmVyID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQodGhpcy5fY29udGFpbmVyKTtcclxuICAgIH1cclxuXHJcbiAgICBpZiAoIXRoaXMuX2NvbnRhaW5lciAmJiB0aGlzLmFwcGxpY2F0aW9uUmVmWydjb21wb25lbnRzJ10ubGVuZ3RoKSB7XHJcbiAgICAgIGNvbnN0IGNvbXBvbmVudFJvb3RWaWV3Q29udGFpbmVyID0gdGhpcy5hcHBsaWNhdGlvblJlZlsnY29tcG9uZW50cyddWzBdO1xyXG4gICAgICB0aGlzLmNvbnRhaW5lciA9IChjb21wb25lbnRSb290Vmlld0NvbnRhaW5lci5ob3N0VmlldyBhcyBFbWJlZGRlZFZpZXdSZWY8YW55Pikucm9vdE5vZGVzWzBdIGFzIEhUTUxFbGVtZW50O1xyXG4gICAgfVxyXG5cclxuICAgIGlmICghdGhpcy5fY29udGFpbmVyIHx8IHR5cGVvZiB0aGlzLl9jb250YWluZXIgPT09ICdzdHJpbmcnKSB7XHJcbiAgICAgIHRoaXMuX2NvbnRhaW5lciA9IGRvY3VtZW50LmdldEVsZW1lbnRzQnlUYWdOYW1lKCdib2R5JylbMF07XHJcbiAgICB9XHJcblxyXG4gICAgcmV0dXJuIHRoaXMuX2NvbnRhaW5lcjtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIENyZWF0ZXMgYW5kIGFkZCB0byBET00gbW9kYWwgaG9sZGVyIGNvbXBvbmVudC5cclxuICAgKiBcclxuICAgKiBAcmV0dXJucyB7Tmd4TW9kYWxIb2xkZXJDb21wb25lbnR9XHJcbiAgICovXHJcbiAgcHJpdmF0ZSBjcmVhdGVTaW1wbGVNb2RhbEhvbGRlcigpOiBOZ3hNb2RhbEhvbGRlckNvbXBvbmVudCB7XHJcbiAgICBjb25zdCBjb21wb25lbnRGYWN0b3J5ID0gdGhpcy5yZXNvbHZlci5yZXNvbHZlQ29tcG9uZW50RmFjdG9yeShOZ3hNb2RhbEhvbGRlckNvbXBvbmVudCk7XHJcbiAgICBjb25zdCBjb21wb25lbnRSZWYgPSBjb21wb25lbnRGYWN0b3J5LmNyZWF0ZSh0aGlzLmluamVjdG9yKTtcclxuICAgIGNvbnN0IGNvbXBvbmVudFJvb3ROb2RlID0gKGNvbXBvbmVudFJlZi5ob3N0VmlldyBhcyBFbWJlZGRlZFZpZXdSZWY8YW55Pikucm9vdE5vZGVzWzBdIGFzIEhUTUxFbGVtZW50O1xyXG5cclxuICAgIHRoaXMuYXBwbGljYXRpb25SZWYuYXR0YWNoVmlldyhjb21wb25lbnRSZWYuaG9zdFZpZXcpO1xyXG5cclxuICAgIGNvbXBvbmVudFJlZi5vbkRlc3Ryb3koKCkgPT4ge1xyXG4gICAgICB0aGlzLmFwcGxpY2F0aW9uUmVmLmRldGFjaFZpZXcoY29tcG9uZW50UmVmLmhvc3RWaWV3KTtcclxuICAgIH0pO1xyXG5cclxuICAgIHRoaXMuY29udGFpbmVyLmFwcGVuZENoaWxkKGNvbXBvbmVudFJvb3ROb2RlKTtcclxuXHJcbiAgICByZXR1cm4gY29tcG9uZW50UmVmLmluc3RhbmNlO1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogQWRkcyBtb2RhbFxyXG4gICAqXHJcbiAgICogQHBhcmFtIHtUeXBlPE5neE1vZGFsQ29tcG9uZW50PFQsIFQxPj59IGNvbXBvbmVudFxyXG4gICAqIEBwYXJhbSB7VD99IGRhdGFcclxuICAgKiBAcGFyYW0ge05neE1vZGFsT3B0aW9uc092ZXJyaWRlcz99IG9wdGlvbnNcclxuICAgKlxyXG4gICAqIEByZXR1cm5zIHtPYnNlcnZhYmxlPFQxPn1cclxuICAgKi9cclxuICBwdWJsaWMgYWRkTW9kYWw8VCwgVDE+KFxyXG4gICAgY29tcG9uZW50OiBUeXBlPE5neE1vZGFsQ29tcG9uZW50PFQsIFQxPj4sXHJcbiAgICBkYXRhPzogVCxcclxuICAgIG9wdGlvbnM/OiBOZ3hNb2RhbE9wdGlvbnNPdmVycmlkZXNcclxuICApOiBPYnNlcnZhYmxlPFQxPiB7XHJcbiAgICBpZiAoIXRoaXMubW9kYWxIb2xkZXJDb21wb25lbnQpIHtcclxuICAgICAgdGhpcy5tb2RhbEhvbGRlckNvbXBvbmVudCA9IHRoaXMuY3JlYXRlU2ltcGxlTW9kYWxIb2xkZXIoKTtcclxuICAgIH1cclxuICAgIHJldHVybiB0aGlzLm1vZGFsSG9sZGVyQ29tcG9uZW50LmFkZE1vZGFsPFQsIFQxPihjb21wb25lbnQsIGRhdGEsIG9wdGlvbnMpO1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogSGlkZXMgYW5kIHJlbW92ZXMgbW9kYWwgZnJvbSBET00sIHJlc29sdmVzIHByb21pc2Ugd2hlbiBmdWxseSByZW1vdmVkXHJcbiAgICpcclxuICAgKiBAcGFyYW0ge05neE1vZGFsQ29tcG9uZW50fSBjb21wb25lbnRcclxuICAgKlxyXG4gICAqIEByZXR1cm5zIHtQcm9taXNlPHt9Pn1cclxuICAgKi9cclxuICBwdWJsaWMgcmVtb3ZlTW9kYWwoY29tcG9uZW50OiBOZ3hNb2RhbENvbXBvbmVudDxhbnksIGFueT4pOiBQcm9taXNlPHt9PiB7XHJcbiAgICBpZiAoIXRoaXMubW9kYWxIb2xkZXJDb21wb25lbnQpIHtcclxuICAgICAgcmV0dXJuIFByb21pc2UucmVzb2x2ZSh7fSk7XHJcbiAgICB9XHJcbiAgICByZXR1cm4gdGhpcy5tb2RhbEhvbGRlckNvbXBvbmVudC5yZW1vdmVNb2RhbChjb21wb25lbnQpO1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogQ2xvc2VzIGFsbCBtb2RhbHMsIHJlc29sdmVzIHByb21pc2Ugd2hlbiB0aGV5J3JlIGZ1bGx5IHJlbW92ZWRcclxuICAgKlxyXG4gICAqIEByZXR1cm5zIHtQcm9taXNlPHt9Pn1cclxuICAgKi9cclxuICBwdWJsaWMgcmVtb3ZlQWxsKCk6IFByb21pc2U8e30+IHtcclxuICAgIGlmICghdGhpcy5tb2RhbEhvbGRlckNvbXBvbmVudCkge1xyXG4gICAgICByZXR1cm4gUHJvbWlzZS5yZXNvbHZlKHt9KTtcclxuICAgIH1cclxuICAgIHJldHVybiB0aGlzLm1vZGFsSG9sZGVyQ29tcG9uZW50LnJlbW92ZUFsbE1vZGFscygpO1xyXG4gIH1cclxufVxyXG4iXX0=