ngx-modal-ease
Version:
ngx-modal-ease is a versatile Angular library providing a lightweight, simple, and performant modal. This library supports data communication between components, opening of multiple modals, custom animations, and a range of customisable options.
115 lines • 13.3 kB
JavaScript
import { Inject, Injectable, PLATFORM_ID, createComponent, } from '@angular/core';
import { ModalComponent } from './modal.component';
import { isPlatformBrowser } from '@angular/common';
import * as i0 from "@angular/core";
export class ModalService {
constructor(appRef, injector, platformId) {
this.appRef = appRef;
this.injector = injector;
/**
* Internal use only.
*/
this.modalInstances = [];
/**
* Internal use only.
*/
this.layerLevel = 0;
/**
* Internal use only.
*/
this.closedOnClickOrEscape = false;
this.isBrowser = true;
this.promiseContainer = [];
this.isBrowser = isPlatformBrowser(platformId);
}
/**
* Opens a custom component within a modal.
* @param componentToCreate The custom component to display within the modal.
* @param options Additional options for configuring the modal appearance and animations.
* @returns A Promise that will emit custom data on closing the modal.
* ```
* this.modalService.open(ModalContentComponent, {
* modal: {
* enter: 'enter-scale-down 0.1s ease-out',
* leave: 'fade-out 0.5s',
* },
* overlay: {
* leave: 'fade-out 0.3s',
* },
* data: {
* type: 'Angular modal library',
* },
* })
* .then((dataFromComponent) => {
* ...
* });
* ```
*/
open(componentToCreate, options) {
this.options = options;
this.openComponent(componentToCreate, options);
return new Promise((resolve) => {
if (!this.isBrowser)
return;
this.promiseContainer.push({ resolve, contentCpRef: this.newComponent });
});
}
openComponent(componentToCreate, options) {
if (!this.isBrowser)
return;
this.newComponent = createComponent(componentToCreate, {
environmentInjector: this.injector,
elementInjector: options?.injector,
});
this.newModalComponent = createComponent(ModalComponent, {
environmentInjector: this.injector,
projectableNodes: [[this.newComponent.location.nativeElement]],
});
this.instantiateProps(options?.data);
document.body.appendChild(this.newModalComponent.location.nativeElement);
this.appRef.attachView(this.newComponent.hostView);
this.appRef.attachView(this.newModalComponent.hostView);
}
instantiateProps(data = {}) {
for (const key of Object.keys(data)) {
this.newComponent.instance[key] = data[key];
}
}
/**
* Close the current modal.
* @param data The optional data to emit on closing the modal (communication from modal to caller).
*/
close(data) {
if (this.promiseContainer.length === 0)
return;
const modalPromise = this.promiseContainer.pop();
this.modalInstances.pop()?.close(modalPromise);
const response = {
closedOnClickOrEscape: this.closedOnClickOrEscape,
data,
};
this.closedOnClickOrEscape = false;
return modalPromise.resolve(response);
}
/**
* Close all modal instances.
* Respective animations will be applied.
*/
closeAll() {
for (let i = this.modalInstances.length - 1; i > -1; i--) {
this.close();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ModalService, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ModalService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ModalService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }, { type: Object, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1tb2RhbC1lYXNlL3NyYy9saWIvbW9kYWwvbW9kYWwuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBSUwsTUFBTSxFQUNOLFVBQVUsRUFDVixXQUFXLEVBRVgsZUFBZSxHQUNoQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFFbkQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0saUJBQWlCLENBQUM7O0FBTXBELE1BQU0sT0FBTyxZQUFZO0lBc0J2QixZQUNVLE1BQXNCLEVBQ3RCLFFBQTZCLEVBQ2hCLFVBQWtCO1FBRi9CLFdBQU0sR0FBTixNQUFNLENBQWdCO1FBQ3RCLGFBQVEsR0FBUixRQUFRLENBQXFCO1FBakJ2Qzs7V0FFRztRQUNILG1CQUFjLEdBQXFCLEVBQUUsQ0FBQztRQUN0Qzs7V0FFRztRQUNILGVBQVUsR0FBRyxDQUFDLENBQUM7UUFDZjs7V0FFRztRQUNILDBCQUFxQixHQUFHLEtBQUssQ0FBQztRQUN0QixjQUFTLEdBQUcsSUFBSSxDQUFDO1FBQ2pCLHFCQUFnQixHQUFtQixFQUFFLENBQUM7UUFPNUMsSUFBSSxDQUFDLFNBQVMsR0FBRyxpQkFBaUIsQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUNqRCxDQUFDO0lBRUQ7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7T0FzQkc7SUFDSCxJQUFJLENBQUksaUJBQTBCLEVBQUUsT0FBaUI7UUFDbkQsSUFBSSxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUM7UUFDdkIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxpQkFBaUIsRUFBRSxPQUFPLENBQUMsQ0FBQztRQUUvQyxPQUFPLElBQUksT0FBTyxDQUFnQixDQUFDLE9BQU8sRUFBRSxFQUFFO1lBQzVDLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUztnQkFBRSxPQUFPO1lBQzVCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsRUFBRSxPQUFPLEVBQUUsWUFBWSxFQUFFLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQyxDQUFDO1FBQzNFLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVPLGFBQWEsQ0FBSSxpQkFBMEIsRUFBRSxPQUFpQjtRQUNwRSxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVM7WUFBRSxPQUFPO1FBRTVCLElBQUksQ0FBQyxZQUFZLEdBQUcsZUFBZSxDQUFDLGlCQUFpQixFQUFFO1lBQ3JELG1CQUFtQixFQUFFLElBQUksQ0FBQyxRQUFRO1lBQ2xDLGVBQWUsRUFBRSxPQUFPLEVBQUUsUUFBUTtTQUNuQyxDQUFDLENBQUM7UUFFSCxJQUFJLENBQUMsaUJBQWlCLEdBQUcsZUFBZSxDQUFDLGNBQWMsRUFBRTtZQUN2RCxtQkFBbUIsRUFBRSxJQUFJLENBQUMsUUFBUTtZQUNsQyxnQkFBZ0IsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLENBQUM7U0FDL0QsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLGdCQUFnQixDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsQ0FBQztRQUVyQyxRQUFRLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQ3pFLElBQUksQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDbkQsSUFBSSxDQUFDLE1BQU0sQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLGlCQUFpQixDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQzFELENBQUM7SUFFTyxnQkFBZ0IsQ0FBQyxPQUF3QixFQUFFO1FBQ2pELEtBQUssTUFBTSxHQUFHLElBQUksTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsRUFBRTtZQUNuQyxJQUFJLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7U0FDN0M7SUFDSCxDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsS0FBSyxDQUFDLElBQWM7UUFDbEIsSUFBSSxJQUFJLENBQUMsZ0JBQWdCLENBQUMsTUFBTSxLQUFLLENBQUM7WUFBRSxPQUFPO1FBRS9DLE1BQU0sWUFBWSxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxHQUFHLEVBQWtCLENBQUM7UUFDakUsSUFBSSxDQUFDLGNBQWMsQ0FBQyxHQUFHLEVBQUUsRUFBRSxLQUFLLENBQUMsWUFBWSxDQUFDLENBQUM7UUFFL0MsTUFBTSxRQUFRLEdBQUc7WUFDZixxQkFBcUIsRUFBRSxJQUFJLENBQUMscUJBQXFCO1lBQ2pELElBQUk7U0FDTCxDQUFDO1FBRUYsSUFBSSxDQUFDLHFCQUFxQixHQUFHLEtBQUssQ0FBQztRQUNuQyxPQUFPLFlBQVksQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDeEMsQ0FBQztJQUVEOzs7T0FHRztJQUNILFFBQVE7UUFDTixLQUFLLElBQUksQ0FBQyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUU7WUFDeEQsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1NBQ2Q7SUFDSCxDQUFDOzhHQXBIVSxZQUFZLG1GQXlCYixXQUFXO2tIQXpCVixZQUFZLGNBRlgsTUFBTTs7MkZBRVAsWUFBWTtrQkFIeEIsVUFBVTttQkFBQztvQkFDVixVQUFVLEVBQUUsTUFBTTtpQkFDbkI7OzBCQTBCSSxNQUFNOzJCQUFDLFdBQVciLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gIEFwcGxpY2F0aW9uUmVmLFxyXG4gIENvbXBvbmVudFJlZixcclxuICBFbnZpcm9ubWVudEluamVjdG9yLFxyXG4gIEluamVjdCxcclxuICBJbmplY3RhYmxlLFxyXG4gIFBMQVRGT1JNX0lELFxyXG4gIFR5cGUsXHJcbiAgY3JlYXRlQ29tcG9uZW50LFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBNb2RhbENvbXBvbmVudCB9IGZyb20gJy4vbW9kYWwuY29tcG9uZW50JztcclxuaW1wb3J0IHsgTW9kYWxSZXNwb25zZSwgT3B0aW9ucyB9IGZyb20gJy4vbW9kYWwtb3B0aW9ucyc7XHJcbmltcG9ydCB7IGlzUGxhdGZvcm1Ccm93c2VyIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgUHJvbWlzZU1vZGFsIH0gZnJvbSAnLi9pbnRlcm5hbC1pbnRlcmZhY2VzJztcclxuXHJcbkBJbmplY3RhYmxlKHtcclxuICBwcm92aWRlZEluOiAncm9vdCcsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBNb2RhbFNlcnZpY2Uge1xyXG4gIHByaXZhdGUgbmV3TW9kYWxDb21wb25lbnQhOiBDb21wb25lbnRSZWY8TW9kYWxDb21wb25lbnQ+O1xyXG4gIHByaXZhdGUgbmV3Q29tcG9uZW50ITogQ29tcG9uZW50UmVmPGFueT47XHJcbiAgLyoqXHJcbiAgICogSW50ZXJuYWwgdXNlIG9ubHkuXHJcbiAgICovXHJcbiAgb3B0aW9ucyE6IE9wdGlvbnMgfCB1bmRlZmluZWQ7XHJcbiAgLyoqXHJcbiAgICogSW50ZXJuYWwgdXNlIG9ubHkuXHJcbiAgICovXHJcbiAgbW9kYWxJbnN0YW5jZXM6IE1vZGFsQ29tcG9uZW50W10gPSBbXTtcclxuICAvKipcclxuICAgKiBJbnRlcm5hbCB1c2Ugb25seS5cclxuICAgKi9cclxuICBsYXllckxldmVsID0gMDtcclxuICAvKipcclxuICAgKiBJbnRlcm5hbCB1c2Ugb25seS5cclxuICAgKi9cclxuICBjbG9zZWRPbkNsaWNrT3JFc2NhcGUgPSBmYWxzZTtcclxuICBwcml2YXRlIGlzQnJvd3NlciA9IHRydWU7XHJcbiAgcHJpdmF0ZSBwcm9taXNlQ29udGFpbmVyOiBQcm9taXNlTW9kYWxbXSA9IFtdO1xyXG5cclxuICBjb25zdHJ1Y3RvcihcclxuICAgIHByaXZhdGUgYXBwUmVmOiBBcHBsaWNhdGlvblJlZixcclxuICAgIHByaXZhdGUgaW5qZWN0b3I6IEVudmlyb25tZW50SW5qZWN0b3IsXHJcbiAgICBASW5qZWN0KFBMQVRGT1JNX0lEKSBwbGF0Zm9ybUlkOiBPYmplY3RcclxuICApIHtcclxuICAgIHRoaXMuaXNCcm93c2VyID0gaXNQbGF0Zm9ybUJyb3dzZXIocGxhdGZvcm1JZCk7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBPcGVucyBhIGN1c3RvbSBjb21wb25lbnQgd2l0aGluIGEgbW9kYWwuXHJcbiAgICogQHBhcmFtIGNvbXBvbmVudFRvQ3JlYXRlIFRoZSBjdXN0b20gY29tcG9uZW50IHRvIGRpc3BsYXkgd2l0aGluIHRoZSBtb2RhbC5cclxuICAgKiBAcGFyYW0gb3B0aW9ucyBBZGRpdGlvbmFsIG9wdGlvbnMgZm9yIGNvbmZpZ3VyaW5nIHRoZSBtb2RhbCBhcHBlYXJhbmNlIGFuZCBhbmltYXRpb25zLlxyXG4gICAqIEByZXR1cm5zIEEgUHJvbWlzZSB0aGF0IHdpbGwgZW1pdCBjdXN0b20gZGF0YSBvbiBjbG9zaW5nIHRoZSBtb2RhbC5cclxuICAgKiBgYGBcclxuICAgKiB0aGlzLm1vZGFsU2VydmljZS5vcGVuKE1vZGFsQ29udGVudENvbXBvbmVudCwge1xyXG4gICAqICAgbW9kYWw6IHtcclxuICAgKiAgICAgZW50ZXI6ICdlbnRlci1zY2FsZS1kb3duIDAuMXMgZWFzZS1vdXQnLFxyXG4gICAqICAgICBsZWF2ZTogJ2ZhZGUtb3V0IDAuNXMnLFxyXG4gICAqICAgfSxcclxuICAgKiAgIG92ZXJsYXk6IHtcclxuICAgKiAgICAgbGVhdmU6ICdmYWRlLW91dCAwLjNzJyxcclxuICAgKiAgIH0sXHJcbiAgICogICBkYXRhOiB7XHJcbiAgICogICAgIHR5cGU6ICdBbmd1bGFyIG1vZGFsIGxpYnJhcnknLFxyXG4gICAqICAgfSxcclxuICAgKiB9KVxyXG4gICAqIC50aGVuKChkYXRhRnJvbUNvbXBvbmVudCkgPT4ge1xyXG4gICAqICAgIC4uLlxyXG4gICAqIH0pO1xyXG4gICAqIGBgYFxyXG4gICAqL1xyXG4gIG9wZW48Qz4oY29tcG9uZW50VG9DcmVhdGU6IFR5cGU8Qz4sIG9wdGlvbnM/OiBPcHRpb25zKSB7XHJcbiAgICB0aGlzLm9wdGlvbnMgPSBvcHRpb25zO1xyXG4gICAgdGhpcy5vcGVuQ29tcG9uZW50KGNvbXBvbmVudFRvQ3JlYXRlLCBvcHRpb25zKTtcclxuXHJcbiAgICByZXR1cm4gbmV3IFByb21pc2U8TW9kYWxSZXNwb25zZT4oKHJlc29sdmUpID0+IHtcclxuICAgICAgaWYgKCF0aGlzLmlzQnJvd3NlcikgcmV0dXJuO1xyXG4gICAgICB0aGlzLnByb21pc2VDb250YWluZXIucHVzaCh7IHJlc29sdmUsIGNvbnRlbnRDcFJlZjogdGhpcy5uZXdDb21wb25lbnQgfSk7XHJcbiAgICB9KTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgb3BlbkNvbXBvbmVudDxDPihjb21wb25lbnRUb0NyZWF0ZTogVHlwZTxDPiwgb3B0aW9ucz86IE9wdGlvbnMpIHtcclxuICAgIGlmICghdGhpcy5pc0Jyb3dzZXIpIHJldHVybjtcclxuXHJcbiAgICB0aGlzLm5ld0NvbXBvbmVudCA9IGNyZWF0ZUNvbXBvbmVudChjb21wb25lbnRUb0NyZWF0ZSwge1xyXG4gICAgICBlbnZpcm9ubWVudEluamVjdG9yOiB0aGlzLmluamVjdG9yLFxyXG4gICAgICBlbGVtZW50SW5qZWN0b3I6IG9wdGlvbnM/LmluamVjdG9yLFxyXG4gICAgfSk7XHJcblxyXG4gICAgdGhpcy5uZXdNb2RhbENvbXBvbmVudCA9IGNyZWF0ZUNvbXBvbmVudChNb2RhbENvbXBvbmVudCwge1xyXG4gICAgICBlbnZpcm9ubWVudEluamVjdG9yOiB0aGlzLmluamVjdG9yLFxyXG4gICAgICBwcm9qZWN0YWJsZU5vZGVzOiBbW3RoaXMubmV3Q29tcG9uZW50LmxvY2F0aW9uLm5hdGl2ZUVsZW1lbnRdXSxcclxuICAgIH0pO1xyXG5cclxuICAgIHRoaXMuaW5zdGFudGlhdGVQcm9wcyhvcHRpb25zPy5kYXRhKTtcclxuXHJcbiAgICBkb2N1bWVudC5ib2R5LmFwcGVuZENoaWxkKHRoaXMubmV3TW9kYWxDb21wb25lbnQubG9jYXRpb24ubmF0aXZlRWxlbWVudCk7XHJcbiAgICB0aGlzLmFwcFJlZi5hdHRhY2hWaWV3KHRoaXMubmV3Q29tcG9uZW50Lmhvc3RWaWV3KTtcclxuICAgIHRoaXMuYXBwUmVmLmF0dGFjaFZpZXcodGhpcy5uZXdNb2RhbENvbXBvbmVudC5ob3N0Vmlldyk7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIGluc3RhbnRpYXRlUHJvcHMoZGF0YTogT3B0aW9uc1snZGF0YSddID0ge30pIHtcclxuICAgIGZvciAoY29uc3Qga2V5IG9mIE9iamVjdC5rZXlzKGRhdGEpKSB7XHJcbiAgICAgIHRoaXMubmV3Q29tcG9uZW50Lmluc3RhbmNlW2tleV0gPSBkYXRhW2tleV07XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBDbG9zZSB0aGUgY3VycmVudCBtb2RhbC5cclxuICAgKiBAcGFyYW0gZGF0YSBUaGUgb3B0aW9uYWwgZGF0YSB0byBlbWl0IG9uIGNsb3NpbmcgdGhlIG1vZGFsIChjb21tdW5pY2F0aW9uIGZyb20gbW9kYWwgdG8gY2FsbGVyKS5cclxuICAgKi9cclxuICBjbG9zZShkYXRhPzogdW5rbm93bikge1xyXG4gICAgaWYgKHRoaXMucHJvbWlzZUNvbnRhaW5lci5sZW5ndGggPT09IDApIHJldHVybjtcclxuXHJcbiAgICBjb25zdCBtb2RhbFByb21pc2UgPSB0aGlzLnByb21pc2VDb250YWluZXIucG9wKCkgYXMgUHJvbWlzZU1vZGFsO1xyXG4gICAgdGhpcy5tb2RhbEluc3RhbmNlcy5wb3AoKT8uY2xvc2UobW9kYWxQcm9taXNlKTtcclxuXHJcbiAgICBjb25zdCByZXNwb25zZSA9IHtcclxuICAgICAgY2xvc2VkT25DbGlja09yRXNjYXBlOiB0aGlzLmNsb3NlZE9uQ2xpY2tPckVzY2FwZSxcclxuICAgICAgZGF0YSxcclxuICAgIH07XHJcblxyXG4gICAgdGhpcy5jbG9zZWRPbkNsaWNrT3JFc2NhcGUgPSBmYWxzZTtcclxuICAgIHJldHVybiBtb2RhbFByb21pc2UucmVzb2x2ZShyZXNwb25zZSk7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBDbG9zZSBhbGwgbW9kYWwgaW5zdGFuY2VzLlxyXG4gICAqIFJlc3BlY3RpdmUgYW5pbWF0aW9ucyB3aWxsIGJlIGFwcGxpZWQuXHJcbiAgICovXHJcbiAgY2xvc2VBbGwoKSB7XHJcbiAgICBmb3IgKGxldCBpID0gdGhpcy5tb2RhbEluc3RhbmNlcy5sZW5ndGggLSAxOyBpID4gLTE7IGktLSkge1xyXG4gICAgICB0aGlzLmNsb3NlKCk7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiJdfQ==