@yoursabhishekabhi7/modal-popup-ng-all/esm2022/lib/boot-starp-components/modal-popup/modal-popup.service.mjs

Reusable Angular modal popup components supporting Angular 14 to 18

import { Injectable, Injector, InjectionToken, } from '@angular/core';
import { ComponentPortal } from '@angular/cdk/portal';
import { AngularModalPopup } from './modal-popup.component';
import { Subject } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@angular/cdk/overlay";
export const DATA_MODAL_DIALOG_DATA = new InjectionToken('DATA_MODAL_DIALOG_DATA');
export class ModalService {
    overlay;
    injector;
    overlayRefMap = new Map();
    componentRef;
    modalOpenSubject = new Subject();
    modalOpen$ = this.modalOpenSubject.asObservable();
    RAMDOM_ID = '';
    constructor(overlay, injector) {
        this.overlay = overlay;
        this.injector = injector;
    }
    open(component, options) {
        const modalId = options.id || this.generateUniqueModalId();
        this.RAMDOM_ID = modalId;
        const overlayConfig = {
            hasBackdrop: true,
            backdropClass: 'dark-backdrop',
            panelClass: 'custom-panel',
            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically()
        };
        const injector = Injector.create({
            providers: [
                { provide: DATA_MODAL_DIALOG_DATA, useValue: options?.data },
            ],
            parent: this.injector,
        });
        const overlayRef = this.overlay.create(overlayConfig);
        const modalPortal = new ComponentPortal(AngularModalPopup, null, injector);
        this.componentRef = overlayRef.attach(modalPortal);
        overlayRef.hostElement.setAttribute('id', modalId);
        if (options.title)
            this.componentRef.instance.title = options.title;
        if (options.body)
            this.componentRef.instance.body = options.body;
        this.componentRef.instance.injectComponent(options, component, modalId);
        this.modalOpenSubject.next(true);
        this.overlayRefMap.set(modalId, overlayRef);
        // Handle backdrop click
        overlayRef.backdropClick().subscribe(() => {
            this.close(modalId);
        });
        // Assign the close method to the modal component
        this.componentRef.instance.close = (id) => {
            this.close(id);
        };
        return this.componentRef.instance;
    }
    close(modalId) {
        const overlayRef = this.overlayRefMap.get(modalId);
        if (overlayRef) {
            overlayRef.dispose();
            this.overlayRefMap.delete(modalId);
            this.modalOpenSubject.next(false);
        }
    }
    generateUniqueModalId() {
        let id = '';
        do {
            id = this.randomAlphaNumeric(10);
        } while (this.overlayRefMap.has(id));
        return id;
    }
    randomAlphaNumeric(length) {
        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        let result = '';
        for (let i = 0; i < length; i++) {
            result += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        return result;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalService, deps: [{ token: i1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ModalService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.Injector }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwtcG9wdXAuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21vZGFsLXBvcHVwLW5nMTQtMTgvc3JjL2xpYi9ib290LXN0YXJwLWNvbXBvbmVudHMvbW9kYWwtcG9wdXAvbW9kYWwtcG9wdXAuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsVUFBVSxFQUVWLFFBQVEsRUFFUixjQUFjLEdBQ2YsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLGVBQWUsRUFBaUIsTUFBTSxxQkFBcUIsQ0FBQztBQUNyRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUM1RCxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDOzs7QUFHL0IsTUFBTSxDQUFDLE1BQU0sc0JBQXNCLEdBQUcsSUFBSSxjQUFjLENBQU0sd0JBQXdCLENBQUMsQ0FBQztBQUt4RixNQUFNLE9BQU8sWUFBWTtJQU1IO0lBQTBCO0lBTHRDLGFBQWEsR0FBcUIsSUFBSSxHQUFHLEVBQUUsQ0FBQztJQUM1QyxZQUFZLENBQW1DO0lBQy9DLGdCQUFnQixHQUFHLElBQUksT0FBTyxFQUFXLENBQUM7SUFDM0MsVUFBVSxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUNsRCxTQUFTLEdBQVEsRUFBRSxDQUFBO0lBQzFCLFlBQW9CLE9BQWdCLEVBQVUsUUFBa0I7UUFBNUMsWUFBTyxHQUFQLE9BQU8sQ0FBUztRQUFVLGFBQVEsR0FBUixRQUFRLENBQVU7SUFBSSxDQUFDO0lBRXJFLElBQUksQ0FDRixTQUE4QyxFQUM5QyxPQUFnQjtRQUVoQixNQUFNLE9BQU8sR0FBRyxPQUFPLENBQUMsRUFBRSxJQUFJLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO1FBQzNELElBQUksQ0FBQyxTQUFTLEdBQUcsT0FBTyxDQUFDO1FB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O1FBQ3ZDLE1BQU0sS0FBSyxHQUFHLGdFQUFnRSxDQUFDO1FBQy9FLElBQUksTUFBTSxHQUFHLEVBQUUsQ0FBQztRQUNoQixLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsTUFBTSxFQUFFLENBQUMsRUFBRSxFQUFFLENBQUM7WUFDaEMsTUFBTSxJQUFJLEtBQUssQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7UUFDbkUsQ0FBQztRQUNELE9BQU8sTUFBTSxDQUFDO0lBQ2hCLENBQUM7dUdBNUVVLFlBQVk7MkdBQVosWUFBWSxjQUZYLE1BQU07OzJGQUVQLFlBQVk7a0JBSHhCLFVBQVU7bUJBQUM7b0JBQ1YsVUFBVSxFQUFFLE1BQU07aUJBQ25CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICBJbmplY3RhYmxlLFxyXG4gIENvbXBvbmVudFJlZixcclxuICBJbmplY3RvcixcclxuICBUZW1wbGF0ZVJlZixcclxuICBJbmplY3Rpb25Ub2tlbixcclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgT3ZlcmxheSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9vdmVybGF5JztcclxuaW1wb3J0IHsgQ29tcG9uZW50UG9ydGFsLCBDb21wb25lbnRUeXBlIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL3BvcnRhbCc7XHJcbmltcG9ydCB7IEFuZ3VsYXJNb2RhbFBvcHVwIH0gZnJvbSAnLi9tb2RhbC1wb3B1cC5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XHJcbmltcG9ydCB7IE9wdGlvbnMgfSBmcm9tICcuL21vZGFsLW9wdGlvbnMnO1xyXG5cclxuZXhwb3J0IGNvbnN0IERBVEFfTU9EQUxfRElBTE9HX0RBVEEgPSBuZXcgSW5qZWN0aW9uVG9rZW48YW55PignREFUQV9NT0RBTF9ESUFMT0dfREFUQScpO1xyXG5cclxuQEluamVjdGFibGUoe1xyXG4gIHByb3ZpZGVkSW46ICdyb290J1xyXG59KVxyXG5leHBvcnQgY2xhc3MgTW9kYWxTZXJ2aWNlIHtcclxuICBwcml2YXRlIG92ZXJsYXlSZWZNYXA6IE1hcDxzdHJpbmcsIGFueT4gPSBuZXcgTWFwKCk7XHJcbiAgcHJpdmF0ZSBjb21wb25lbnRSZWYhOiBDb21wb25lbnRSZWY8QW5ndWxhck1vZGFsUG9wdXA+O1xyXG4gIHByaXZhdGUgbW9kYWxPcGVuU3ViamVjdCA9IG5ldyBTdWJqZWN0PGJvb2xlYW4+KCk7XHJcbiAgcHVibGljIG1vZGFsT3BlbiQgPSB0aGlzLm1vZGFsT3BlblN1YmplY3QuYXNPYnNlcnZhYmxlKCk7XHJcbiAgcHVibGljIFJBTURPTV9JRDogYW55ID0gJydcclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIG92ZXJsYXk6IE92ZXJsYXksIHByaXZhdGUgaW5qZWN0b3I6IEluamVjdG9yKSB7IH1cclxuXHJcbiAgb3BlbjxUPihcclxuICAgIGNvbXBvbmVudDogQ29tcG9uZW50VHlwZTxUPiB8IFRlbXBsYXRlUmVmPGFueT4sXHJcbiAgICBvcHRpb25zOiBPcHRpb25zXHJcbiAgKTogQW5ndWxhck1vZGFsUG9wdXAge1xyXG4gICAgY29uc3QgbW9kYWxJZCA9IG9wdGlvbnMuaWQgfHwgdGhpcy5nZW5lcmF0ZVVuaXF1ZU1vZGFsSWQoKTtcclxuICAgIHRoaXMuUkFNRE9NX0lEID0gbW9kYWxJZDtcclxuICAgIGNvbnN0IG92ZXJsYXlDb25maWcgPSB7XHJcbiAgICAgIGhhc0JhY2tkcm9wOiB0cnVlLFxyXG4gICAgICBiYWNrZHJvcENsYXNzOiAnZGFyay1iYWNrZHJvcCcsXHJcbiAgICAgIHBhbmVsQ2xhc3M6ICdjdXN0b20tcGFuZWwnLFxyXG4gICAgICBwb3NpdGlvblN0cmF0ZWd5OiB0aGlzLm92ZXJsYXkucG9zaXRpb24oKS5nbG9iYWwoKS5jZW50ZXJIb3Jpem9udGFsbHkoKS5jZW50ZXJWZXJ0aWNhbGx5KClcclxuICAgIH07XHJcblxyXG4gICAgY29uc3QgaW5qZWN0b3IgPSBJbmplY3Rvci5jcmVhdGUoe1xyXG4gICAgICBwcm92aWRlcnM6IFtcclxuICAgICAgICB7IHByb3ZpZGU6IERBVEFfTU9EQUxfRElBTE9HX0RBVEEsIHVzZVZhbHVlOiBvcHRpb25zPy5kYXRhIH0sXHJcbiAgICAgIF0sXHJcbiAgICAgIHBhcmVudDogdGhpcy5pbmplY3RvcixcclxuICAgIH0pO1xyXG5cclxuICAgIGNvbnN0IG92ZXJsYXlSZWYgPSB0aGlzLm92ZXJsYXkuY3JlYXRlKG92ZXJsYXlDb25maWcpO1xyXG4gICAgY29uc3QgbW9kYWxQb3J0YWwgPSBuZXcgQ29tcG9uZW50UG9ydGFsKEFuZ3VsYXJNb2RhbFBvcHVwLCBudWxsLCBpbmplY3Rvcik7XHJcbiAgICB0aGlzLmNvbXBvbmVudFJlZiA9IG92ZXJsYXlSZWYuYXR0YWNoKG1vZGFsUG9ydGFsKTtcclxuICAgIG92ZXJsYXlSZWYuaG9zdEVsZW1lbnQuc2V0QXR0cmlidXRlKCdpZCcsIG1vZGFsSWQpXHJcbiAgICBpZiAob3B0aW9ucy50aXRsZSkgdGhpcy5jb21wb25lbnRSZWYuaW5zdGFuY2UudGl0bGUgPSBvcHRpb25zLnRpdGxlO1xyXG4gICAgaWYgKG9wdGlvbnMuYm9keSkgdGhpcy5jb21wb25lbnRSZWYuaW5zdGFuY2UuYm9keSA9IG9wdGlvbnMuYm9keTtcclxuXHJcbiAgICB0aGlzLmNvbXBvbmVudFJlZi5pbnN0YW5jZS5pbmplY3RDb21wb25lbnQob3B0aW9ucywgY29tcG9uZW50LCBtb2RhbElkKTtcclxuICAgIHRoaXMubW9kYWxPcGVuU3ViamVjdC5uZXh0KHRydWUpO1xyXG5cclxuICAgIHRoaXMub3ZlcmxheVJlZk1hcC5zZXQobW9kYWxJZCwgb3ZlcmxheVJlZik7XHJcblxyXG4gICAgLy8gSGFuZGxlIGJhY2tkcm9wIGNsaWNrXHJcbiAgICBvdmVybGF5UmVmLmJhY2tkcm9wQ2xpY2soKS5zdWJzY3JpYmUoKCkgPT4ge1xyXG4gICAgICB0aGlzLmNsb3NlKG1vZGFsSWQpO1xyXG4gICAgfSk7XHJcblxyXG4gICAgLy8gQXNzaWduIHRoZSBjbG9zZSBtZXRob2QgdG8gdGhlIG1vZGFsIGNvbXBvbmVudFxyXG4gICAgdGhpcy5jb21wb25lbnRSZWYuaW5zdGFuY2UuY2xvc2UgPSAoaWQ6IHN0cmluZykgPT4ge1xyXG4gICAgICB0aGlzLmNsb3NlKGlkKTtcclxuICAgIH07XHJcbiAgICByZXR1cm4gdGhpcy5jb21wb25lbnRSZWYuaW5zdGFuY2U7XHJcbiAgfVxyXG5cclxuICBjbG9zZShtb2RhbElkOiBzdHJpbmcpOiB2b2lkIHtcclxuICAgIGNvbnN0IG92ZXJsYXlSZWYgPSB0aGlzLm92ZXJsYXlSZWZNYXAuZ2V0KG1vZGFsSWQpO1xyXG4gICAgaWYgKG92ZXJsYXlSZWYpIHtcclxuICAgICAgb3ZlcmxheVJlZi5kaXNwb3NlKCk7XHJcbiAgICAgIHRoaXMub3ZlcmxheVJlZk1hcC5kZWxldGUobW9kYWxJZCk7XHJcbiAgICAgIHRoaXMubW9kYWxPcGVuU3ViamVjdC5uZXh0KGZhbHNlKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHByaXZhdGUgZ2VuZXJhdGVVbmlxdWVNb2RhbElkKCk6IHN0cmluZyB7XHJcbiAgICBsZXQgaWQgPSAnJztcclxuICAgIGRvIHtcclxuICAgICAgaWQgPSB0aGlzLnJhbmRvbUFscGhhTnVtZXJpYygxMCk7XHJcbiAgICB9IHdoaWxlICh0aGlzLm92ZXJsYXlSZWZNYXAuaGFzKGlkKSk7XHJcbiAgICByZXR1cm4gaWQ7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIHJhbmRvbUFscGhhTnVtZXJpYyhsZW5ndGg6IG51bWJlcik6IHN0cmluZyB7XHJcbiAgICBjb25zdCBjaGFycyA9ICdBQkNERUZHSElKS0xNTk9QUVJTVFVWV1hZWmFiY2RlZmdoaWprbG1ub3BxcnN0dXZ3eHl6MDEyMzQ1Njc4OSc7XHJcbiAgICBsZXQgcmVzdWx0ID0gJyc7XHJcbiAgICBmb3IgKGxldCBpID0gMDsgaSA8IGxlbmd0aDsgaSsrKSB7XHJcbiAgICAgIHJlc3VsdCArPSBjaGFycy5jaGFyQXQoTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogY2hhcnMubGVuZ3RoKSk7XHJcbiAgICB9XHJcbiAgICByZXR1cm4gcmVzdWx0O1xyXG4gIH1cclxufVxyXG4iXX0=