@filip.mazev/modal 0.1.48 → 0.1.50

package/fesm2022/filip.mazev-modal.mjs

@@ -1,261 +1,384 @@
 import * as i0 from '@angular/core';
-import { inject, output, signal, effect, ViewContainerRef, ViewChildren, ViewChild, Component, input, computed, Injector, ApplicationRef, EnvironmentInjector, RendererFactory2, createComponent, Injectable, TemplateRef, Directive, InjectionToken } from '@angular/core';
-import { Subject, fromEvent, filter, Observable, from, of, take, BehaviorSubject, skip, map } from 'rxjs';
-import { NgTemplateOutlet, NgClass, DOCUMENT } from '@angular/common';
-import { ModalService as ModalService$1 } from '@modal/services/modal.service';
-import { ModalBackdrop as ModalBackdrop$1 } from '@modal/components/shared/ui/backdrop/modal-backdrop';
-import { ModalCentered as ModalCentered$1 } from '@modal/components/views/centered/modal-centered';
-import { ModalSide as ModalSide$1 } from '@modal/components/views/side/modal-side';
-import { WindowDimensionsService, ScrollLockService, uuidv4 } from '@filip.mazev/blocks-core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as animConst from '@modal/constants/modal-animation.constants';
-import * as bottomSheetConst from '@modal/constants/modal-bottom-sheet.constants';
-import { ModalBanner as ModalBanner$1 } from '@modal/components/shared/ui/banner/modal-banner';
-import { ModalBottomSheet as ModalBottomSheet$1 } from '@modal/components/views/bottom-sheet/modal-bottom-sheet';
-import { ModalDefaultCloseButton } from '@modal/components/shared/ui/default-close-button/default-close-button';
+import { InjectionToken, inject, Injector, ApplicationRef, EnvironmentInjector, RendererFactory2, createComponent, Injectable, input, output, Component, signal, computed, ViewChild, ViewChildren, effect, ViewContainerRef, TemplateRef, Directive } from '@angular/core';
+import { BehaviorSubject, Subject, filter, skip, fromEvent, Observable, from, of, take, map } from 'rxjs';
+import { DOCUMENT, NgClass, NgTemplateOutlet } from '@angular/common';
 import { Router, NavigationEnd } from '@angular/router';
-import { ModalConfig as ModalConfig$1 } from '@modal/classes/modal-config';
-import { ModalRef as ModalRef$1 } from '@modal/classes/modal-ref';
-import { ModalCore as ModalCore$1 } from '@modal/components/modal-core';
-import { MODAL_DATA as MODAL_DATA$1 } from '@modal/tokens/modal-data.token';
-import { ModalStyleConfig as ModalStyleConfig$1 } from '@modal/classes/modal-style.config';
-import { ModalState as ModalState$1 } from '@modal/enums/modal-state.enum';
-import { ModalWarnings as ModalWarnings$1 } from '@modal/enums/modal-warnings.enum';
-import { ModalCloseGuard as ModalCloseGuard$1 } from '@modal/classes/modal-close-guard';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { WindowDimensionsService, ScrollLockService, uuidv4 } from '@filip.mazev/blocks-core';
 
-class ModalCore {
-    modalService = inject(ModalService$1);
-    windowDimensionsService = inject(WindowDimensionsService);
-    scrollLockService = inject(ScrollLockService);
-    afterClose = output();
-    animationDuration = animConst.MODAL_DEFAULT_ANIM_DURATION;
-    componentRef = {};
-    config;
-    closeFunction;
-    backdropClickSubject = new Subject();
-    backdropClick = this.backdropClickSubject.asObservable();
-    isOpen = signal(true, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-    effectiveLayout = signal('center', ...(ngDevMode ? [{ debugName: "effectiveLayout" }] : []));
-    isCentered = signal(false, ...(ngDevMode ? [{ debugName: "isCentered" }] : []));
-    isSide = signal(false, ...(ngDevMode ? [{ debugName: "isSide" }] : []));
-    headerTemplate = signal(null, ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
-    footerTemplate = signal(null, ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
-    id = signal(null, ...(ngDevMode ? [{ debugName: "id" }] : []));
-    isBottomSheetModalActive = signal(false, ...(ngDevMode ? [{ debugName: "isBottomSheetModalActive" }] : []));
-    isAnimated = false;
-    hasBanner = false;
-    hasDefaultContentWrapperClass = false;
-    isConfirmCloseModalOpen = false;
-    scrollLockId = uuidv4();
-    _sortedBreakpoints = [];
-    windowDimensions = this.windowDimensionsService.dimensions;
-    _currentVcr = null;
-    set dynamicContainer(vcr) {
-        if (vcr && this.componentRef) {
-            this._currentVcr = vcr;
-            vcr.insert(this.componentRef.hostView);
-        }
+class ModalStyleConfig {
+    layout;
+    breakpoints;
+    animate;
+    hasBackdrop;
+    closeDelay;
+    showCloseButton;
+    mobileConfig;
+    contentWrapper;
+    wrapperClasses;
+    wrapperStyles;
+    overrideFullHeight;
+    constructor(config) {
+        this.layout = config?.layout ?? "center";
+        this.breakpoints = config?.breakpoints;
+        this.animate = config?.animate ?? true;
+        this.hasBackdrop = config?.hasBackdrop ?? true;
+        this.closeDelay = config?.closeDelay;
+        this.showCloseButton = config?.showCloseButton ?? true;
+        this.mobileConfig = config?.mobileConfig ?? {};
+        this.contentWrapper = config?.contentWrapper ?? true;
+        this.wrapperClasses = config?.wrapperClasses ?? "";
+        this.wrapperStyles = config?.wrapperStyles ?? "";
+        this.overrideFullHeight = config?.overrideFullHeight ?? false;
     }
-    modalContainer;
-    contentTemplate;
-    sideModalComponents;
-    centeredModalComponents;
-    constructor() {
-        this.initKeyboardSubscription();
-        effect(() => {
-            const width = this.windowDimensions().width;
-            this.handleLayout(width);
-        });
+}
+
+class ModalConfig {
+    open;
+    afterClose;
+    closeGuard;
+    closeGuardOnlyOnCancel;
+    disableClose;
+    disableCloseOnBackdropClick;
+    disableCloseOnNavigation;
+    data;
+    style;
+    bannerText;
+    contentClasses;
+    contentStyles;
+    disableConsoleWarnings;
+    disableConsoleInfo;
+    id;
+    constructor(config) {
+        this.open = config?.open ?? true;
+        this.afterClose = config?.afterClose;
+        this.closeGuard = config?.closeGuard;
+        this.closeGuardOnlyOnCancel = config?.closeGuardOnlyOnCancel ?? true;
+        this.disableClose = config?.disableClose ?? false;
+        this.disableCloseOnBackdropClick = config?.disableCloseOnBackdropClick ?? false;
+        this.disableCloseOnNavigation = config?.disableCloseOnNavigation ?? false;
+        this.data = config?.data ?? null;
+        this.style = new ModalStyleConfig(config?.style);
+        this.bannerText = config?.bannerText ?? "";
+        this.contentClasses = config?.contentClasses ?? "";
+        this.contentStyles = config?.contentStyles ?? "";
+        this.disableConsoleWarnings = config?.disableConsoleWarnings ?? false;
+        this.disableConsoleInfo = config?.disableConsoleInfo ?? false;
+        this.id = config?.id;
     }
-    ngOnInit() {
-        this.initParamsFromConfig();
-        this.initBreakpointCache();
-        this.scrollLockService.disableScroll(this.scrollLockId, {
-            animationDuration: this.animationDuration,
-            handleTouchInput: true,
-            mobileOnlyTouchPrevention: true,
-        });
+}
+
+var ModalState;
+(function (ModalState) {
+    ModalState["OPEN"] = "open";
+    ModalState["OPENING"] = "opening";
+    ModalState["CLOSED"] = "closed";
+    ModalState["CLOSING"] = "closing";
+})(ModalState || (ModalState = {}));
+
+class ModalRef {
+    componentType;
+    modalService;
+    //#region Modal Container
+    _modalContainer = {};
+    set modalContainer(modalContainer) {
+        this._modalContainer = modalContainer;
     }
-    ngAfterViewInit() {
-        if (!this.componentRef)
-            return;
-        this.dynamicContainer?.insert(this.componentRef.hostView);
-        const width = this.windowDimensionsService.dimensions().width;
-        this.handleLayout(width);
+    get modalContainer() {
+        return this._modalContainer;
     }
-    ngOnDestroy() {
-        this.componentRef?.destroy();
-        this.dynamicContainer?.clear();
-        this.scrollLockService.enableScroll(this.scrollLockId);
+    _modalContainerRef = {};
+    set modalContainerRef(modalContainerRef) {
+        this._modalContainerRef = modalContainerRef;
     }
-    //#region Subscription Methods
-    initKeyboardSubscription() {
-        fromEvent(document, "keydown")
-            .pipe(filter((event) => event.key === "Escape"), takeUntilDestroyed())
-            .subscribe(() => {
-            if (!this.isConfirmCloseModalOpen) {
-                this.close("cancel", undefined, true);
-            }
-        });
+    get modalContainerRef() {
+        return this._modalContainerRef;
     }
-    //#endregion
-    //#region Initialization Methods
-    initParamsFromConfig() {
-        this.id.set(this.config?.id ?? this.scrollLockId);
-        this.hasBanner =
-            this.config !== undefined &&
-                ((this.config.bannerText !== undefined && this.config.bannerText.length > 0) ||
-                    (this.config.disableClose !== true && this.config.style.showCloseButton !== false && this.headerTemplate() === null));
-        this.hasDefaultContentWrapperClass = this.config?.style.contentWrapper !== false;
-        this.isAnimated = this.config?.style.animate === true;
+    _modalContainerElement = {};
+    set modalContainerElement(modalContainerElement) {
+        this._modalContainerElement = modalContainerElement;
     }
-    initBreakpointCache() {
-        const definedBreakpoints = this.config?.style?.breakpoints;
-        if (definedBreakpoints && Object.keys(definedBreakpoints).length > 0) {
-            const serviceBreakpoints = this.windowDimensionsService.breakpoints;
-            this._sortedBreakpoints = Object.keys(definedBreakpoints)
-                .map(key => ({
-                width: serviceBreakpoints[key],
-                layout: definedBreakpoints[key]
-            }))
-                .sort((a, b) => a.width - b.width);
-        }
+    get modalContainerElement() {
+        return this._modalContainerElement;
+    }
+    _parentElement = undefined;
+    set parentElement(parentElement) {
+        this._parentElement = parentElement;
+    }
+    get parentElement() {
+        return this._parentElement;
     }
     //#endregion
-    //#region Public Template Methods
-    setHeaderTemplate(template) {
-        this.headerTemplate.set(template);
+    //#region Component
+    _componentRef = {};
+    set componentRef(componentRef) {
+        this._componentRef = componentRef;
     }
-    setFooterTemplate(template) {
-        this.footerTemplate.set(template);
+    get componentRef() {
+        return this._componentRef;
     }
     //#endregion
-    //#region Closing Methods
-    close(state = "cancel", result = undefined, fromInsideInteraction = false, forceClose = false) {
-        if (forceClose) {
-            this.handleClose(state, result);
-            return;
-        }
-        if ((this.config?.disableClose === true) && fromInsideInteraction) {
-            return;
-        }
-        const shouldCheckCloseGuard = this.config?.closeGuardOnlyOnCancel !== true || state !== "confirm";
-        if (shouldCheckCloseGuard && this.config?.closeGuard) {
-            const guardResult = this.config.closeGuard.canClose(this.modalService);
-            const canClose$ = guardResult instanceof Observable ? guardResult :
-                guardResult instanceof Promise ? from(guardResult) :
-                    of(guardResult);
-            if (this.isBottomSheetModalActive()) {
-                this.resetBottomSheetModalLayout();
-            }
-            canClose$.pipe(take(1)).subscribe((canClose) => {
-                if (canClose) {
-                    this.handleClose(state, result);
-                }
-            });
-            return;
-        }
-        this.handleClose(state, result);
+    //#region Self
+    _modalState = ModalState.CLOSED;
+    modalState = new BehaviorSubject(this.getStatus());
+    modalState$() {
+        return this.modalState.asObservable();
     }
-    async handleClose(state, result) {
-        this.isOpen.set(false);
-        this.setBottomSheetModalFinishedState(true);
-        const returnResult = {
-            data: result,
-            state: state,
-        };
-        if (this.closeFunction) {
-            this.closeFunction(returnResult);
-        }
+    getStatus() {
+        return this._modalState;
     }
-    onBackdropClick(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (!this.isOpen()) {
-            return;
-        }
-        this.backdropClickSubject.next(event);
-        if (this.config?.style?.hasBackdrop && this.config?.disableCloseOnBackdropClick !== true) {
-            this.close("cancel", undefined, true);
-        }
+    _modalConfig = undefined;
+    set modalConfig(modalConfig) {
+        this._modalConfig = modalConfig;
+    }
+    get modalConfig() {
+        return this._modalConfig;
     }
     //#endregion
-    //#region Helper Methods
-    handleLayout(width) {
-        if (!this.config)
-            return;
-        let resolvedLayout = this.config.style.layout;
-        for (const bp of this._sortedBreakpoints) {
-            if (width <= bp.width) {
-                resolvedLayout = bp.layout;
-                break;
+    //#region Observables
+    backdropClickSubject = new Subject();
+    backdropClick() {
+        return this.backdropClickSubject.asObservable();
+    }
+    backdropClicked(event) {
+        this.backdropClickSubject.next(event);
+    }
+    afterCloseSubject = new Subject();
+    /**
+     * Observable that emits when the modal has been closed.
+     * @returns An Observable that emits an IModalCloseResult<R> when the modal is closed.
+     */
+    afterClosed() {
+        return this.afterCloseSubject.asObservable();
+    }
+    afterClose(result) {
+        this.afterCloseSubject.next(result);
+    }
+    //#endregion
+    constructor(componentRef, componentType, modalContainerRef, modalService, modalConfig) {
+        this.componentType = componentType;
+        this.modalService = modalService;
+        this.modalConfig = modalConfig;
+        this.modalContainerRef = modalContainerRef;
+        this.modalContainerElement = modalContainerRef.location.nativeElement;
+        this.componentRef = componentRef;
+    }
+    //#region Public Methods
+    async open() {
+        this._modalState = ModalState.OPENING;
+        this.modalState.next(ModalState.OPENING);
+        this.modalContainerRef.instance.componentRef = this._componentRef;
+        const config = new ModalConfig(this.modalConfig);
+        this.modalContainerRef.instance.config = config;
+        this.modalContainerRef.instance.closeFunction = this.handleClose.bind(this);
+        this.parentElement?.appendChild(this.modalContainerElement);
+        this.modalContainerRef.instance.backdropClick.subscribe((event) => {
+            this.backdropClicked(event);
+        });
+        this._modalState = ModalState.OPEN;
+        this.modalState.next(ModalState.OPEN);
+    }
+    close(state = "cancel", result = undefined, forceClose = false) {
+        this.modalContainerRef.instance.close(state, result, false, forceClose);
+    }
+    //#endregion
+    //#region Private Methods
+    handleClose(result) {
+        this._modalState = ModalState.CLOSING;
+        this.modalState.next(ModalState.CLOSING);
+        setTimeout(() => {
+            if (this.modalConfig?.afterClose) {
+                this.modalConfig.afterClose();
             }
-        }
-        const prevIsSide = this.isSide();
-        const nextIsSide = resolvedLayout === 'left' || resolvedLayout === 'right';
-        const layoutTypeChanged = prevIsSide !== nextIsSide;
-        if (layoutTypeChanged && this._currentVcr && this.componentRef) {
-            const index = this._currentVcr.indexOf(this.componentRef.hostView);
-            if (index !== -1) {
-                this._currentVcr.detach(index);
+            this.modalContainerRef.destroy();
+            this._modalState = ModalState.CLOSED;
+            this.modalState.next(ModalState.CLOSED);
+            this.afterClose(result);
+            this.modalService?.unregister(this);
+        }, this.modalContainerRef.instance.animationDuration);
+    }
+}
+
+const MODAL_DATA = new InjectionToken("MODAL_DATA");
+
+class ModalService {
+    router = inject(Router);
+    injector = inject(Injector);
+    appRef = inject(ApplicationRef);
+    environmentInjector = inject(EnvironmentInjector);
+    rendererFactory = inject(RendererFactory2);
+    renderer;
+    document = inject(DOCUMENT);
+    //#region Properties
+    modals = new Set();
+    modalsSubject = new BehaviorSubject(this.modals);
+    //#endregion
+    constructor() {
+        this.renderer = this.rendererFactory.createRenderer(null, null);
+        this.createSubscriptions();
+    }
+    //#region Subscription Methods
+    createSubscriptions() {
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), skip(1), takeUntilDestroyed())
+            .subscribe(() => {
+            if (this.modalsCount() > 0) {
+                this.closeAll(true);
             }
+        });
+    }
+    //#endregion
+    //#region Public Methods
+    /**
+     * Opens a modal with the specified component and configuration.
+     * @param component The component to be displayed in the modal.
+     * @param config Optional configuration for the modal.
+     * @returns A ModalRef instance representing the opened modal.
+     */
+    open(component, config) {
+        const dataInjector = Injector.create({
+            providers: [{ provide: MODAL_DATA, useValue: config?.data }],
+            parent: this.injector,
+        });
+        const wrapperRef = createComponent((ModalCore), {
+            environmentInjector: this.environmentInjector,
+            elementInjector: dataInjector
+        });
+        const contentInjector = Injector.create({
+            providers: [
+                { provide: ModalCore, useValue: wrapperRef.instance }
+            ],
+            parent: wrapperRef.injector,
+        });
+        const contentRef = createComponent(component, {
+            environmentInjector: this.environmentInjector,
+            elementInjector: contentInjector
+        });
+        wrapperRef.instance.componentRef = contentRef;
+        wrapperRef.instance.config = new ModalConfig(config);
+        this.appRef.attachView(wrapperRef.hostView);
+        this.document.body.appendChild(wrapperRef.location.nativeElement);
+        const modal = new ModalRef(contentRef, component, wrapperRef, this, new ModalConfig(config));
+        if (this.isIModal(contentRef.instance)) {
+            contentRef.instance.modal = modal;
+            contentRef.instance.onModalInit();
         }
-        this.effectiveLayout.set(resolvedLayout);
-        this.isSide.set(nextIsSide);
-        this.isCentered.set(resolvedLayout === 'center' || resolvedLayout === 'bottom-sheet');
-        const shouldBeBottomSheet = resolvedLayout === 'bottom-sheet';
-        const currentSwipeState = this.isBottomSheetModalActive();
-        if (shouldBeBottomSheet && !currentSwipeState) {
-            this.isBottomSheetModalActive.set(true);
-        }
-        else if (!shouldBeBottomSheet && currentSwipeState) {
-            this.isBottomSheetModalActive.set(false);
-        }
+        wrapperRef.onDestroy(() => {
+            this.appRef.detachView(wrapperRef.hostView);
+            wrapperRef.location.nativeElement.remove();
+        });
+        const modalElement = modal.componentRef.location.nativeElement;
+        this.renderer.setStyle(modalElement, 'height', '97%');
+        this.renderer.setStyle(modalElement, 'width', '100%');
+        this.renderer.setStyle(modalElement, 'display', 'flex');
+        this.renderer.setStyle(modalElement, 'flex-grow', '1');
+        this.modals.add(modal);
+        this.modalsSubject.next(this.modals);
+        modal.open();
+        return modal;
     }
-    getBottomSheetModal() {
-        return this.sideModalComponents?.first?.bottomSheet?.first
-            ?? this.centeredModalComponents?.first?.bottomSheet?.first;
+    /**
+     * Closes the specified modal.
+     * @param modal The ModalRef instance representing the modal to be closed.
+     */
+    close(modal) {
+        modal.close();
     }
-    resetBottomSheetModalLayout() {
-        const bottomSheet = this.getBottomSheetModal();
-        if (bottomSheet) {
-            bottomSheet.currentTranslateY.set(0);
-        }
+    /**
+     * Unregisters the specified modal from the service.
+     * @param modal The ModalRef instance representing the modal to be unregistered.
+     */
+    unregister(modal) {
+        this.modals.delete(modal);
+        this.modalsSubject.next(this.modals);
     }
-    setBottomSheetModalFinishedState(isFinished) {
-        const bottomSheet = this.getBottomSheetModal();
-        if (bottomSheet) {
-            bottomSheet.isSwipingVerticallyFinished.set(isFinished);
+    /**
+     * Closes all open modals.
+     * @param onNavigate Indicates if the closeAll is triggered by navigation event.
+    */
+    closeAll(onNavigate = false) {
+        this.modals.forEach((modal) => {
+            if (modal.modalConfig?.disableCloseOnNavigation !== true || !onNavigate) {
+                modal.close("cancel", undefined, true);
+            }
+        });
+    }
+    /**
+     * Finds if a modal with the specified component type is currently open.
+     * @param componentType The component type to search for.
+     * @returns True if a modal with the specified component type is open, false otherwise.
+     */
+    find(componentType) {
+        for (const modal of this.modals) {
+            if (modal.componentRef.componentType === componentType) {
+                return true;
+            }
         }
-        this.isBottomSheetModalActive.set(false);
+        return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalCore, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ModalCore, isStandalone: true, selector: "modal", outputs: { afterClose: "afterClose" }, viewQueries: [{ propertyName: "dynamicContainer", first: true, predicate: ["dynamicContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "sideModalComponents", predicate: ModalSide$1, descendants: true }, { propertyName: "centeredModalComponents", predicate: ModalCentered$1, descendants: true }], ngImport: i0, template: "@if (config?.style?.hasBackdrop && (isSide() || isBottomSheetModalActive())) {\n<modal-backdrop [isAnimated]=\"isAnimated\" [isOpen]=\"isOpen()\" (click)=\"onBackdropClick($event)\">\n</modal-backdrop>\n}\n\n<ng-container #modalContainer>\n    @switch (true) {\n        @case (isSide()) {\n            <modal-side \n                [layout]=\"effectiveLayout()\"\n                [headerTemplate]=\"headerTemplate()\"  \n                [footerTemplate]=\"footerTemplate()\" \n                [config]=\"config\" \n                [id]=\"id()\"\n                [isOpen]=\"isOpen()\" \n                [isAnimated]=\"isAnimated\"\n                [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" \n                [animationDuration]=\"animationDuration\"\n                [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" \n                [hasBanner]=\"hasBanner\" \n                (close)=\"close($event)\">\n                <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n            </modal-side>\n        } \n        @case (isCentered()) {\n            <modal-centered \n                [headerTemplate]=\"headerTemplate()\" \n                [footerTemplate]=\"footerTemplate()\" \n                [config]=\"config\" \n                [id]=\"id()\"\n                [isOpen]=\"isOpen()\" \n                [isAnimated]=\"isAnimated\"\n                [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" \n                [animationDuration]=\"animationDuration\"\n                [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" \n                [hasBanner]=\"hasBanner\" \n                (close)=\"close($event)\"\n                (onBackdropClick)=\"onBackdropClick($event)\">\n                <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n            </modal-centered>\n        }\n    }\n</ng-container>\n\n<ng-template #contentTemplate>\n    <ng-container #dynamicContainer></ng-container>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ModalCentered$1, selector: "modal-centered", inputs: ["headerTemplate", "footerTemplate", "config", "id", "isOpen", "isAnimated", "isBottomSheetModalActive", "animationDuration", "hasDefaultContentWrapperClass", "hasBanner"], outputs: ["close", "onBackdropClick"] }, { kind: "component", type: ModalSide$1, selector: "modal-side", inputs: ["layout", "headerTemplate", "footerTemplate", "config", "id", "isOpen", "isAnimated", "isBottomSheetModalActive", "animationDuration", "hasDefaultContentWrapperClass", "hasBanner"], outputs: ["close"] }, { kind: "component", type: ModalBackdrop$1, selector: "modal-backdrop", inputs: ["isAnimated", "isOpen"], outputs: ["click"] }] });
+    /**
+     * Gets the count of currently open modals.
+     * @returns The number of open modals.
+    */
+    modalsCount() {
+        return this.modals.size;
+    }
+    //#endregion
+    //#region Helper Methods
+    isIModal(component) {
+        return (typeof component === 'object' &&
+            component !== null &&
+            'onModalInit' in component &&
+            typeof component.onModalInit === 'function');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalService, providedIn: "root" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalCore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [] });
+
+class ModalBackdrop {
+    isAnimated = input(false, ...(ngDevMode ? [{ debugName: "isAnimated" }] : []));
+    isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    click = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: ModalBackdrop, isStandalone: true, selector: "modal-backdrop", inputs: { isAnimated: { classPropertyName: "isAnimated", publicName: "isAnimated", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<div class=\"modal-backdrop\" [class.backdrop-fade-in]=\"isAnimated() && isOpen()\"\n    [class.backdrop-fade-out]=\"isAnimated() && !isOpen()\" (click)=\"click.emit($event)\">\n</div>", styles: [".modal-backdrop{position:fixed;inset:0;z-index:3;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:#00000040;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;transform-origin:center}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalBackdrop, decorators: [{
             type: Component,
-            args: [{ selector: 'modal', imports: [
-                        NgTemplateOutlet,
-                        ModalCentered$1,
-                        ModalSide$1,
-                        ModalBackdrop$1
-                    ], template: "@if (config?.style?.hasBackdrop && (isSide() || isBottomSheetModalActive())) {\n<modal-backdrop [isAnimated]=\"isAnimated\" [isOpen]=\"isOpen()\" (click)=\"onBackdropClick($event)\">\n</modal-backdrop>\n}\n\n<ng-container #modalContainer>\n    @switch (true) {\n        @case (isSide()) {\n            <modal-side \n                [layout]=\"effectiveLayout()\"\n                [headerTemplate]=\"headerTemplate()\"  \n                [footerTemplate]=\"footerTemplate()\" \n                [config]=\"config\" \n                [id]=\"id()\"\n                [isOpen]=\"isOpen()\" \n                [isAnimated]=\"isAnimated\"\n                [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" \n                [animationDuration]=\"animationDuration\"\n                [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" \n                [hasBanner]=\"hasBanner\" \n                (close)=\"close($event)\">\n                <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n            </modal-side>\n        } \n        @case (isCentered()) {\n            <modal-centered \n                [headerTemplate]=\"headerTemplate()\" \n                [footerTemplate]=\"footerTemplate()\" \n                [config]=\"config\" \n                [id]=\"id()\"\n                [isOpen]=\"isOpen()\" \n                [isAnimated]=\"isAnimated\"\n                [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" \n                [animationDuration]=\"animationDuration\"\n                [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" \n                [hasBanner]=\"hasBanner\" \n                (close)=\"close($event)\"\n                (onBackdropClick)=\"onBackdropClick($event)\">\n                <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n            </modal-centered>\n        }\n    }\n</ng-container>\n\n<ng-template #contentTemplate>\n    <ng-container #dynamicContainer></ng-container>\n</ng-template>" }]
-        }], ctorParameters: () => [], propDecorators: { afterClose: [{ type: i0.Output, args: ["afterClose"] }], dynamicContainer: [{
-                type: ViewChild,
-                args: ["dynamicContainer", { read: ViewContainerRef }]
-            }], modalContainer: [{
-                type: ViewChild,
-                args: ["modalContainer", { static: false }]
-            }], contentTemplate: [{
-                type: ViewChild,
-                args: ["contentTemplate"]
-            }], sideModalComponents: [{
-                type: ViewChildren,
-                args: [ModalSide$1]
-            }], centeredModalComponents: [{
-                type: ViewChildren,
-                args: [ModalCentered$1]
-            }] } });
+            args: [{ selector: 'modal-backdrop', imports: [], template: "<div class=\"modal-backdrop\" [class.backdrop-fade-in]=\"isAnimated() && isOpen()\"\n    [class.backdrop-fade-out]=\"isAnimated() && !isOpen()\" (click)=\"click.emit($event)\">\n</div>", styles: [".modal-backdrop{position:fixed;inset:0;z-index:3;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:#00000040;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;transform-origin:center}\n"] }]
+        }], propDecorators: { isAnimated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAnimated", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], click: [{ type: i0.Output, args: ["click"] }] } });
+
+class ModalDefaultCloseButton {
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+    close = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalDefaultCloseButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ModalDefaultCloseButton, isStandalone: true, selector: "modal-default-close-button", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: " @if (config()?.disableClose !== true && config()?.style?.showCloseButton !== false) {\n     <svg (click)=\"close.emit('cancel')\" aria-label=\"Close\" class=\"default-close-button\" viewBox=\"0 0 24 24\"\n         fill=\"#ffffff\" xmlns=\"http://www.w3.org/2000/svg\">\n         <path d=\"M2.4 24L0 21.6L9.6 12L0 2.4L2.4 0L12 9.6L21.6 0L24 2.4L14.4 12L24 21.6L21.6 24L12 14.4L2.4 24Z\"\n             fill=\"#ffffff\" />\n     </svg>\n }", styles: [".default-close-button{-webkit-user-select:none;user-select:none;background-repeat:no-repeat;display:inline-block;fill:currentColor;height:1.35rem;width:1.35rem;overflow:hidden;cursor:pointer;pointer-events:fill}.default-close-button path{transition:all .3s ease-in-out}.default-close-button path{fill:var(--modal-text, #000000)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalDefaultCloseButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'modal-default-close-button', imports: [], template: " @if (config()?.disableClose !== true && config()?.style?.showCloseButton !== false) {\n     <svg (click)=\"close.emit('cancel')\" aria-label=\"Close\" class=\"default-close-button\" viewBox=\"0 0 24 24\"\n         fill=\"#ffffff\" xmlns=\"http://www.w3.org/2000/svg\">\n         <path d=\"M2.4 24L0 21.6L9.6 12L0 2.4L2.4 0L12 9.6L21.6 0L24 2.4L14.4 12L24 21.6L21.6 24L12 14.4L2.4 24Z\"\n             fill=\"#ffffff\" />\n     </svg>\n }", styles: [".default-close-button{-webkit-user-select:none;user-select:none;background-repeat:no-repeat;display:inline-block;fill:currentColor;height:1.35rem;width:1.35rem;overflow:hidden;cursor:pointer;pointer-events:fill}.default-close-button path{transition:all .3s ease-in-out}.default-close-button path{fill:var(--modal-text, #000000)}\n"] }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], close: [{ type: i0.Output, args: ["close"] }] } });
+
+class ModalBanner {
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+    close = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalBanner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ModalBanner, isStandalone: true, selector: "modal-banner", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"modal-top-banner-container\">\n    <div class=\"modal-top-banner-title-container\">\n        @if (config() && config()?.bannerText && (config() && config()!.bannerText.length > 0)) {\n            {{ config()?.bannerText }}\n        }\n    </div>\n    \n    <modal-default-close-button [config]=\"config()\" (close)=\"close.emit('cancel')\"></modal-default-close-button>\n</div>", styles: [".modal-top-banner-container{display:flex;flex-direction:row;gap:2rem;justify-content:space-between;align-items:center;color:var(--modal-text, #000000);top:0;min-height:2rem;border-top-left-radius:.75rem;border-top-right-radius:.75rem}.modal-top-banner-title-container{display:flex;flex-direction:row;justify-content:flex-start;gap:1.5rem;align-items:center;width:100%}@keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}@-webkit-keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}@-moz-keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}\n"], dependencies: [{ kind: "component", type: ModalDefaultCloseButton, selector: "modal-default-close-button", inputs: ["config"], outputs: ["close"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalBanner, decorators: [{
+            type: Component,
+            args: [{ selector: 'modal-banner', imports: [
+                        ModalDefaultCloseButton
+                    ], template: "<div class=\"modal-top-banner-container\">\n    <div class=\"modal-top-banner-title-container\">\n        @if (config() && config()?.bannerText && (config() && config()!.bannerText.length > 0)) {\n            {{ config()?.bannerText }}\n        }\n    </div>\n    \n    <modal-default-close-button [config]=\"config()\" (close)=\"close.emit('cancel')\"></modal-default-close-button>\n</div>", styles: [".modal-top-banner-container{display:flex;flex-direction:row;gap:2rem;justify-content:space-between;align-items:center;color:var(--modal-text, #000000);top:0;min-height:2rem;border-top-left-radius:.75rem;border-top-right-radius:.75rem}.modal-top-banner-title-container{display:flex;flex-direction:row;justify-content:flex-start;gap:1.5rem;align-items:center;width:100%}@keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}@-webkit-keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}@-moz-keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}\n"] }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], close: [{ type: i0.Output, args: ["close"] }] } });
+
+const MODAL_DOWN_SWIPE_LIMIT = 3;
+const MODAL_SWIPE_VELOCITY_THRESHOLD = 80;
 
 class ModalBottomSheet {
     id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
@@ -336,7 +459,7 @@ class ModalBottomSheet {
             const deltaY = event.clientY - startY;
             const duration = event.timeStamp - startTime || 1;
             const velocityY = deltaY / duration;
-            if (deltaY > limit || (velocityY > bottomSheetConst.MODAL_SWIPE_VELOCITY_THRESHOLD && deltaY > 0)) {
+            if (deltaY > limit || (velocityY > MODAL_SWIPE_VELOCITY_THRESHOLD && deltaY > 0)) {
                 this.close.emit('cancel');
             }
             else {
@@ -371,7 +494,7 @@ class ModalBottomSheet {
         const style = config?.style?.mobileConfig;
         this.downSwipeLimit = style?.downSwipeLimit && style.downSwipeLimit > 0
             ? style.downSwipeLimit
-            : bottomSheetConst.MODAL_DOWN_SWIPE_LIMIT;
+            : MODAL_DOWN_SWIPE_LIMIT;
     }
     monitorInputType() {
         if (this.globalResizeCleanup)
@@ -407,6 +530,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 args: ["elementRef", { static: true }]
             }] } });
 
+class ModalCentered {
+    headerTemplate = input.required(...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
+    footerTemplate = input.required(...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
+    isOpen = input.required(...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    isAnimated = input.required(...(ngDevMode ? [{ debugName: "isAnimated" }] : []));
+    isBottomSheetModalActive = input.required(...(ngDevMode ? [{ debugName: "isBottomSheetModalActive" }] : []));
+    animationDuration = input.required(...(ngDevMode ? [{ debugName: "animationDuration" }] : []));
+    hasDefaultContentWrapperClass = input.required(...(ngDevMode ? [{ debugName: "hasDefaultContentWrapperClass" }] : []));
+    hasBanner = input.required(...(ngDevMode ? [{ debugName: "hasBanner" }] : []));
+    close = output();
+    onBackdropClick = output();
+    bottomSheet;
+    modalClasses = computed(() => {
+        return {
+            'centered-modal-content-wrapper': true,
+            'centered-modal-default-style': this.hasDefaultContentWrapperClass() || this.hasBanner(),
+            'centered-modal-animate-in': this.isAnimated() && this.isOpen(),
+            'centered-modal-animate-out': this.isAnimated() && !this.isOpen(),
+        };
+    }, ...(ngDevMode ? [{ debugName: "modalClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalCentered, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ModalCentered, isStandalone: true, selector: "modal-centered", inputs: { headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: true, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null }, isAnimated: { classPropertyName: "isAnimated", publicName: "isAnimated", isSignal: true, isRequired: true, transformFunction: null }, isBottomSheetModalActive: { classPropertyName: "isBottomSheetModalActive", publicName: "isBottomSheetModalActive", isSignal: true, isRequired: true, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: true, transformFunction: null }, hasDefaultContentWrapperClass: { classPropertyName: "hasDefaultContentWrapperClass", publicName: "hasDefaultContentWrapperClass", isSignal: true, isRequired: true, transformFunction: null }, hasBanner: { classPropertyName: "hasBanner", publicName: "hasBanner", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close", onBackdropClick: "onBackdropClick" }, viewQueries: [{ propertyName: "bottomSheet", predicate: ModalBottomSheet, descendants: true }], ngImport: i0, template: "@if(!isBottomSheetModalActive()) {\n<div class=\"modal-overlay\" [ngClass]=\"{'modal-backdrop': config()?.style?.hasBackdrop}\" [id]=\"id() ?? ''\"\n    (click)=\"config()?.style?.hasBackdrop ? onBackdropClick.emit($event) : null\">\n    <div class=\"modal-overlay-wrapper\">\n        <div [ngClass]=\"modalClasses()\" (click)=\"$event.stopPropagation()\">\n            <div class=\"centered-modal-inner-content-container\" [class]=\"config()?.style?.wrapperClasses ?? ''\"\n                [style]=\"config()?.style?.wrapperStyles ?? ''\">\n\n                <div class=\"centered-modal-top-group\">\n                    @if (hasBanner()) {\n                    <modal-banner [config]=\"config()\" (close)=\"close.emit('cancel')\"></modal-banner>\n                    }\n                    @if (headerTemplate()) {\n                    <div class=\"centered-modal-header\">\n                        <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n                        @if(!hasBanner()) {\n                        <modal-default-close-button [config]=\"config()\"\n                            (close)=\"close.emit('cancel')\"></modal-default-close-button>\n                        }\n                    </div>\n                    }\n                    <div class=\"centered-modal-main-content-container\">\n                        <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n                    </div>\n                </div>\n\n                @if (footerTemplate()) {\n                <div class=\"centered-modal-footer\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n                </div>\n                }\n            </div>\n        </div>\n    </div>\n</div>\n} @else {\n<modal-bottom-sheet [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\" [config]=\"config()\"\n    [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\" [animationDuration]=\"animationDuration()\"\n    (close)=\"close.emit('cancel')\">\n    <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n</modal-bottom-sheet>\n}\n\n<ng-template #contentTemplate>\n    <ng-content></ng-content>\n</ng-template>", styles: [".modal-overlay-wrapper{display:flex;position:absolute;z-index:3;justify-content:center;align-items:center;width:100%;height:100%}.modal-overlay{position:absolute;inset:0;z-index:2}.modal-backdrop{position:fixed;inset:0;z-index:3;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:#00000040;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;transform-origin:center}.centered-modal-content-wrapper{display:flex;flex-direction:column;max-width:90vw;max-width:90dvw;max-height:95vh;max-height:95dvh;overflow:hidden}.centered-modal-default-style{border-radius:.75rem;box-shadow:0 8px 20px #0000001f;color:var(--modal-text, #000000);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid transparent;background-color:var(--modal-bg, #ffffff)}.centered-modal-default-content-container{padding:1rem 1.5rem;max-height:85vh;max-height:85dvh;overflow-y:auto}.centered-modal-inner-content-container{display:flex;flex-direction:column;height:100%;padding:1rem 1.5rem;gap:1.5rem;box-sizing:border-box}.centered-modal-top-group{display:flex;flex-direction:column;gap:1rem;flex-grow:1;min-height:0}.centered-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0}.centered-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:space-between;gap:.5rem}.centered-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:center;gap:.5rem}.centered-modal-animate-in{scale:0;animation:centered-modal-animate-in .15s ease-in-out forwards}.centered-modal-animate-out{animation:centered-modal-animate-out .15s ease-in-out forwards}@keyframes centered-modal-animate-in{0%{scale:0}to{scale:1}}@-webkit-keyframes centered-modal-animate-in{0%{scale:0}to{scale:1}}@-moz-keyframes centered-modal-animate-in{0%{scale:0}to{scale:1}}@keyframes centered-modal-animate-out{0%{scale:1}to{scale:0}}@-webkit-keyframes centered-modal-animate-out{0%{scale:1}to{scale:0}}@-moz-keyframes centered-modal-animate-out{0%{scale:1}to{scale:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ModalBottomSheet, selector: "modal-bottom-sheet", inputs: ["id", "headerTemplate", "footerTemplate", "config", "isOpen", "isAnimated", "animationDuration"], outputs: ["close"] }, { kind: "component", type: ModalBanner, selector: "modal-banner", inputs: ["config"], outputs: ["close"] }, { kind: "component", type: ModalDefaultCloseButton, selector: "modal-default-close-button", inputs: ["config"], outputs: ["close"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalCentered, decorators: [{
+            type: Component,
+            args: [{ selector: 'modal-centered', imports: [
+                        NgTemplateOutlet,
+                        NgClass,
+                        ModalBottomSheet,
+                        ModalBanner,
+                        ModalDefaultCloseButton
+                    ], template: "@if(!isBottomSheetModalActive()) {\n<div class=\"modal-overlay\" [ngClass]=\"{'modal-backdrop': config()?.style?.hasBackdrop}\" [id]=\"id() ?? ''\"\n    (click)=\"config()?.style?.hasBackdrop ? onBackdropClick.emit($event) : null\">\n    <div class=\"modal-overlay-wrapper\">\n        <div [ngClass]=\"modalClasses()\" (click)=\"$event.stopPropagation()\">\n            <div class=\"centered-modal-inner-content-container\" [class]=\"config()?.style?.wrapperClasses ?? ''\"\n                [style]=\"config()?.style?.wrapperStyles ?? ''\">\n\n                <div class=\"centered-modal-top-group\">\n                    @if (hasBanner()) {\n                    <modal-banner [config]=\"config()\" (close)=\"close.emit('cancel')\"></modal-banner>\n                    }\n                    @if (headerTemplate()) {\n                    <div class=\"centered-modal-header\">\n                        <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n                        @if(!hasBanner()) {\n                        <modal-default-close-button [config]=\"config()\"\n                            (close)=\"close.emit('cancel')\"></modal-default-close-button>\n                        }\n                    </div>\n                    }\n                    <div class=\"centered-modal-main-content-container\">\n                        <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n                    </div>\n                </div>\n\n                @if (footerTemplate()) {\n                <div class=\"centered-modal-footer\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n                </div>\n                }\n            </div>\n        </div>\n    </div>\n</div>\n} @else {\n<modal-bottom-sheet [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\" [config]=\"config()\"\n    [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\" [animationDuration]=\"animationDuration()\"\n    (close)=\"close.emit('cancel')\">\n    <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n</modal-bottom-sheet>\n}\n\n<ng-template #contentTemplate>\n    <ng-content></ng-content>\n</ng-template>", styles: [".modal-overlay-wrapper{display:flex;position:absolute;z-index:3;justify-content:center;align-items:center;width:100%;height:100%}.modal-overlay{position:absolute;inset:0;z-index:2}.modal-backdrop{position:fixed;inset:0;z-index:3;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:#00000040;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;transform-origin:center}.centered-modal-content-wrapper{display:flex;flex-direction:column;max-width:90vw;max-width:90dvw;max-height:95vh;max-height:95dvh;overflow:hidden}.centered-modal-default-style{border-radius:.75rem;box-shadow:0 8px 20px #0000001f;color:var(--modal-text, #000000);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid transparent;background-color:var(--modal-bg, #ffffff)}.centered-modal-default-content-container{padding:1rem 1.5rem;max-height:85vh;max-height:85dvh;overflow-y:auto}.centered-modal-inner-content-container{display:flex;flex-direction:column;height:100%;padding:1rem 1.5rem;gap:1.5rem;box-sizing:border-box}.centered-modal-top-group{display:flex;flex-direction:column;gap:1rem;flex-grow:1;min-height:0}.centered-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0}.centered-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:space-between;gap:.5rem}.centered-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:center;gap:.5rem}.centered-modal-animate-in{scale:0;animation:centered-modal-animate-in .15s ease-in-out forwards}.centered-modal-animate-out{animation:centered-modal-animate-out .15s ease-in-out forwards}@keyframes centered-modal-animate-in{0%{scale:0}to{scale:1}}@-webkit-keyframes centered-modal-animate-in{0%{scale:0}to{scale:1}}@-moz-keyframes centered-modal-animate-in{0%{scale:0}to{scale:1}}@keyframes centered-modal-animate-out{0%{scale:1}to{scale:0}}@-webkit-keyframes centered-modal-animate-out{0%{scale:1}to{scale:0}}@-moz-keyframes centered-modal-animate-out{0%{scale:1}to{scale:0}}\n"] }]
+        }], propDecorators: { headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: true }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: true }] }], isAnimated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAnimated", required: true }] }], isBottomSheetModalActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isBottomSheetModalActive", required: true }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: true }] }], hasDefaultContentWrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDefaultContentWrapperClass", required: true }] }], hasBanner: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBanner", required: true }] }], close: [{ type: i0.Output, args: ["close"] }], onBackdropClick: [{ type: i0.Output, args: ["onBackdropClick"] }], bottomSheet: [{
+                type: ViewChildren,
+                args: [ModalBottomSheet]
+            }] } });
+
 class ModalSide {
     layout = input.required(...(ngDevMode ? [{ debugName: "layout" }] : []));
     headerTemplate = input.required(...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
@@ -452,231 +614,266 @@ class ModalSide {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalSide, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ModalSide, isStandalone: true, selector: "modal-side", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: true, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null }, isAnimated: { classPropertyName: "isAnimated", publicName: "isAnimated", isSignal: true, isRequired: true, transformFunction: null }, isBottomSheetModalActive: { classPropertyName: "isBottomSheetModalActive", publicName: "isBottomSheetModalActive", isSignal: true, isRequired: true, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: true, transformFunction: null }, hasDefaultContentWrapperClass: { classPropertyName: "hasDefaultContentWrapperClass", publicName: "hasDefaultContentWrapperClass", isSignal: true, isRequired: true, transformFunction: null }, hasBanner: { classPropertyName: "hasBanner", publicName: "hasBanner", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "bottomSheet", predicate: ModalBottomSheet$1, descendants: true }], ngImport: i0, template: "@if(!isBottomSheetModalActive()) {\n<div [ngClass]=\"modalClasses()\" (click)=\"$event.stopPropagation()\" [id]=\"id() ?? ''\"\n    [style.--anim-duration.ms]=\"animationDuration()\">\n    <div class=\"side-modal-inner-content-container\"\n        [class]=\"config() && config()?.style?.wrapperClasses ? config()?.style?.wrapperClasses : ''\"\n        [style]=\"config() && config()?.style?.wrapperStyles ? config()?.style?.wrapperStyles : ''\">\n        @if (hasBanner()) {\n        <modal-banner [config]=\"config()\" (close)=\"close.emit('cancel')\"></modal-banner>\n        }\n        @if (headerTemplate()) {\n        <div class=\"side-modal-header\">\n            <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n            @if(!hasBanner()) {\n            <modal-default-close-button [config]=\"config()\" (close)=\"close.emit('cancel')\"></modal-default-close-button>\n            }\n        </div>\n        }\n        <div class=\"side-modal-main-content-container\">\n            <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n        </div>\n    </div>\n\n    @if (footerTemplate()) {\n    <div class=\"side-modal-footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n    </div>\n    }\n</div>\n} @else {\n<modal-bottom-sheet [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\" [config]=\"config()\"\n    [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\" [animationDuration]=\"animationDuration()\"\n    (close)=\"close.emit('cancel')\">\n    <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n</modal-bottom-sheet>\n}\n\n<ng-template #contentTemplate>\n    <ng-content></ng-content>\n</ng-template>", styles: [".side-modal-content-wrapper{position:fixed;top:0;height:100vh;height:100dvh;z-index:3;display:flex;flex-direction:column;padding:1rem;gap:1rem;box-sizing:border-box;overflow:hidden;transition:transform var(--anim-duration, 175ms) ease-in-out}.side-modal-content-wrapper.left{left:0}.side-modal-content-wrapper.right{right:0}.side-modal-content-wrapper.side-modal-animate-in{transform:translate(0)!important}.side-modal-content-wrapper.side-modal-animate-out.left{transform:translate(-100%)}.side-modal-content-wrapper.side-modal-animate-out.right{transform:translate(100%)}.side-modal-content-wrapper.with-footer{justify-content:space-between}.side-modal-content-wrapper .side-modal-inner-content-container{flex-grow:1;display:flex;flex-direction:column;gap:1rem;min-height:0}@media(max-width:768px){.side-modal-content-wrapper{max-width:90vw;max-width:95dvw}}.side-modal-default-style{background:var(--modal-bg, #ffffff);color:var(--modal-text, #000000);box-shadow:0 0 15px #0000004d;max-width:85vw;max-width:85dvw}.side-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0;max-height:none}.side-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:space-between;gap:.5rem;padding-top:.75rem}.side-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:flex-end;gap:.5rem;padding-bottom:.75rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ModalBottomSheet$1, selector: "modal-bottom-sheet", inputs: ["id", "headerTemplate", "footerTemplate", "config", "isOpen", "isAnimated", "animationDuration"], outputs: ["close"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ModalBanner$1, selector: "modal-banner", inputs: ["config"], outputs: ["close"] }, { kind: "component", type: ModalDefaultCloseButton, selector: "modal-default-close-button", inputs: ["config"], outputs: ["close"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ModalSide, isStandalone: true, selector: "modal-side", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: true, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null }, isAnimated: { classPropertyName: "isAnimated", publicName: "isAnimated", isSignal: true, isRequired: true, transformFunction: null }, isBottomSheetModalActive: { classPropertyName: "isBottomSheetModalActive", publicName: "isBottomSheetModalActive", isSignal: true, isRequired: true, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: true, transformFunction: null }, hasDefaultContentWrapperClass: { classPropertyName: "hasDefaultContentWrapperClass", publicName: "hasDefaultContentWrapperClass", isSignal: true, isRequired: true, transformFunction: null }, hasBanner: { classPropertyName: "hasBanner", publicName: "hasBanner", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "bottomSheet", predicate: ModalBottomSheet, descendants: true }], ngImport: i0, template: "@if(!isBottomSheetModalActive()) {\n<div [ngClass]=\"modalClasses()\" (click)=\"$event.stopPropagation()\" [id]=\"id() ?? ''\"\n    [style.--anim-duration.ms]=\"animationDuration()\">\n    <div class=\"side-modal-inner-content-container\"\n        [class]=\"config() && config()?.style?.wrapperClasses ? config()?.style?.wrapperClasses : ''\"\n        [style]=\"config() && config()?.style?.wrapperStyles ? config()?.style?.wrapperStyles : ''\">\n        @if (hasBanner()) {\n        <modal-banner [config]=\"config()\" (close)=\"close.emit('cancel')\"></modal-banner>\n        }\n        @if (headerTemplate()) {\n        <div class=\"side-modal-header\">\n            <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n            @if(!hasBanner()) {\n            <modal-default-close-button [config]=\"config()\" (close)=\"close.emit('cancel')\"></modal-default-close-button>\n            }\n        </div>\n        }\n        <div class=\"side-modal-main-content-container\">\n            <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n        </div>\n    </div>\n\n    @if (footerTemplate()) {\n    <div class=\"side-modal-footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n    </div>\n    }\n</div>\n} @else {\n<modal-bottom-sheet [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\" [config]=\"config()\"\n    [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\" [animationDuration]=\"animationDuration()\"\n    (close)=\"close.emit('cancel')\">\n    <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n</modal-bottom-sheet>\n}\n\n<ng-template #contentTemplate>\n    <ng-content></ng-content>\n</ng-template>", styles: [".side-modal-content-wrapper{position:fixed;top:0;height:100vh;height:100dvh;z-index:3;display:flex;flex-direction:column;padding:1rem;gap:1rem;box-sizing:border-box;overflow:hidden;transition:transform var(--anim-duration, 175ms) ease-in-out}.side-modal-content-wrapper.left{left:0}.side-modal-content-wrapper.right{right:0}.side-modal-content-wrapper.side-modal-animate-in{transform:translate(0)!important}.side-modal-content-wrapper.side-modal-animate-out.left{transform:translate(-100%)}.side-modal-content-wrapper.side-modal-animate-out.right{transform:translate(100%)}.side-modal-content-wrapper.with-footer{justify-content:space-between}.side-modal-content-wrapper .side-modal-inner-content-container{flex-grow:1;display:flex;flex-direction:column;gap:1rem;min-height:0}@media(max-width:768px){.side-modal-content-wrapper{max-width:90vw;max-width:95dvw}}.side-modal-default-style{background:var(--modal-bg, #ffffff);color:var(--modal-text, #000000);box-shadow:0 0 15px #0000004d;max-width:85vw;max-width:85dvw}.side-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0;max-height:none}.side-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:space-between;gap:.5rem;padding-top:.75rem}.side-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:flex-end;gap:.5rem;padding-bottom:.75rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ModalBottomSheet, selector: "modal-bottom-sheet", inputs: ["id", "headerTemplate", "footerTemplate", "config", "isOpen", "isAnimated", "animationDuration"], outputs: ["close"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ModalBanner, selector: "modal-banner", inputs: ["config"], outputs: ["close"] }, { kind: "component", type: ModalDefaultCloseButton, selector: "modal-default-close-button", inputs: ["config"], outputs: ["close"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalSide, decorators: [{
             type: Component,
             args: [{ selector: 'modal-side', imports: [
                         NgTemplateOutlet,
-                        ModalBottomSheet$1,
+                        ModalBottomSheet,
                         NgClass,
-                        ModalBanner$1,
+                        ModalBanner,
                         ModalDefaultCloseButton
                     ], template: "@if(!isBottomSheetModalActive()) {\n<div [ngClass]=\"modalClasses()\" (click)=\"$event.stopPropagation()\" [id]=\"id() ?? ''\"\n    [style.--anim-duration.ms]=\"animationDuration()\">\n    <div class=\"side-modal-inner-content-container\"\n        [class]=\"config() && config()?.style?.wrapperClasses ? config()?.style?.wrapperClasses : ''\"\n        [style]=\"config() && config()?.style?.wrapperStyles ? config()?.style?.wrapperStyles : ''\">\n        @if (hasBanner()) {\n        <modal-banner [config]=\"config()\" (close)=\"close.emit('cancel')\"></modal-banner>\n        }\n        @if (headerTemplate()) {\n        <div class=\"side-modal-header\">\n            <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n            @if(!hasBanner()) {\n            <modal-default-close-button [config]=\"config()\" (close)=\"close.emit('cancel')\"></modal-default-close-button>\n            }\n        </div>\n        }\n        <div class=\"side-modal-main-content-container\">\n            <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n        </div>\n    </div>\n\n    @if (footerTemplate()) {\n    <div class=\"side-modal-footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n    </div>\n    }\n</div>\n} @else {\n<modal-bottom-sheet [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\" [config]=\"config()\"\n    [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\" [animationDuration]=\"animationDuration()\"\n    (close)=\"close.emit('cancel')\">\n    <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n</modal-bottom-sheet>\n}\n\n<ng-template #contentTemplate>\n    <ng-content></ng-content>\n</ng-template>", styles: [".side-modal-content-wrapper{position:fixed;top:0;height:100vh;height:100dvh;z-index:3;display:flex;flex-direction:column;padding:1rem;gap:1rem;box-sizing:border-box;overflow:hidden;transition:transform var(--anim-duration, 175ms) ease-in-out}.side-modal-content-wrapper.left{left:0}.side-modal-content-wrapper.right{right:0}.side-modal-content-wrapper.side-modal-animate-in{transform:translate(0)!important}.side-modal-content-wrapper.side-modal-animate-out.left{transform:translate(-100%)}.side-modal-content-wrapper.side-modal-animate-out.right{transform:translate(100%)}.side-modal-content-wrapper.with-footer{justify-content:space-between}.side-modal-content-wrapper .side-modal-inner-content-container{flex-grow:1;display:flex;flex-direction:column;gap:1rem;min-height:0}@media(max-width:768px){.side-modal-content-wrapper{max-width:90vw;max-width:95dvw}}.side-modal-default-style{background:var(--modal-bg, #ffffff);color:var(--modal-text, #000000);box-shadow:0 0 15px #0000004d;max-width:85vw;max-width:85dvw}.side-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0;max-height:none}.side-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:space-between;gap:.5rem;padding-top:.75rem}.side-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:flex-end;gap:.5rem;padding-bottom:.75rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: true }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: true }] }], isAnimated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAnimated", required: true }] }], isBottomSheetModalActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isBottomSheetModalActive", required: true }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: true }] }], hasDefaultContentWrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDefaultContentWrapperClass", required: true }] }], hasBanner: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBanner", required: true }] }], close: [{ type: i0.Output, args: ["close"] }], bottomSheet: [{
                 type: ViewChildren,
-                args: [ModalBottomSheet$1]
-            }] } });
-
-class ModalCentered {
-    headerTemplate = input.required(...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
-    footerTemplate = input.required(...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
-    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
-    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
-    isOpen = input.required(...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-    isAnimated = input.required(...(ngDevMode ? [{ debugName: "isAnimated" }] : []));
-    isBottomSheetModalActive = input.required(...(ngDevMode ? [{ debugName: "isBottomSheetModalActive" }] : []));
-    animationDuration = input.required(...(ngDevMode ? [{ debugName: "animationDuration" }] : []));
-    hasDefaultContentWrapperClass = input.required(...(ngDevMode ? [{ debugName: "hasDefaultContentWrapperClass" }] : []));
-    hasBanner = input.required(...(ngDevMode ? [{ debugName: "hasBanner" }] : []));
-    close = output();
-    onBackdropClick = output();
-    bottomSheet;
-    modalClasses = computed(() => {
-        return {
-            'centered-modal-content-wrapper': true,
-            'centered-modal-default-style': this.hasDefaultContentWrapperClass() || this.hasBanner(),
-            'centered-modal-animate-in': this.isAnimated() && this.isOpen(),
-            'centered-modal-animate-out': this.isAnimated() && !this.isOpen(),
-        };
-    }, ...(ngDevMode ? [{ debugName: "modalClasses" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalCentered, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ModalCentered, isStandalone: true, selector: "modal-centered", inputs: { headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: true, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null }, isAnimated: { classPropertyName: "isAnimated", publicName: "isAnimated", isSignal: true, isRequired: true, transformFunction: null }, isBottomSheetModalActive: { classPropertyName: "isBottomSheetModalActive", publicName: "isBottomSheetModalActive", isSignal: true, isRequired: true, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: true, transformFunction: null }, hasDefaultContentWrapperClass: { classPropertyName: "hasDefaultContentWrapperClass", publicName: "hasDefaultContentWrapperClass", isSignal: true, isRequired: true, transformFunction: null }, hasBanner: { classPropertyName: "hasBanner", publicName: "hasBanner", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close", onBackdropClick: "onBackdropClick" }, viewQueries: [{ propertyName: "bottomSheet", predicate: ModalBottomSheet$1, descendants: true }], ngImport: i0, template: "@if(!isBottomSheetModalActive()) {\n<div class=\"modal-overlay\" [ngClass]=\"{'modal-backdrop': config()?.style?.hasBackdrop}\" [id]=\"id() ?? ''\"\n    (click)=\"config()?.style?.hasBackdrop ? onBackdropClick.emit($event) : null\">\n    <div class=\"modal-overlay-wrapper\">\n        <div [ngClass]=\"modalClasses()\" (click)=\"$event.stopPropagation()\">\n            <div class=\"centered-modal-inner-content-container\" [class]=\"config()?.style?.wrapperClasses ?? ''\"\n                [style]=\"config()?.style?.wrapperStyles ?? ''\">\n\n                <div class=\"centered-modal-top-group\">\n                    @if (hasBanner()) {\n                    <modal-banner [config]=\"config()\" (close)=\"close.emit('cancel')\"></modal-banner>\n                    }\n                    @if (headerTemplate()) {\n                    <div class=\"centered-modal-header\">\n                        <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n                        @if(!hasBanner()) {\n                        <modal-default-close-button [config]=\"config()\"\n                            (close)=\"close.emit('cancel')\"></modal-default-close-button>\n                        }\n                    </div>\n                    }\n                    <div class=\"centered-modal-main-content-container\">\n                        <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n                    </div>\n                </div>\n\n                @if (footerTemplate()) {\n                <div class=\"centered-modal-footer\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n                </div>\n                }\n            </div>\n        </div>\n    </div>\n</div>\n} @else {\n<modal-bottom-sheet [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\" [config]=\"config()\"\n    [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\" [animationDuration]=\"animationDuration()\"\n    (close)=\"close.emit('cancel')\">\n    <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n</modal-bottom-sheet>\n}\n\n<ng-template #contentTemplate>\n    <ng-content></ng-content>\n</ng-template>", styles: [".modal-overlay-wrapper{display:flex;position:absolute;z-index:3;justify-content:center;align-items:center;width:100%;height:100%}.modal-overlay{position:absolute;inset:0;z-index:2}.modal-backdrop{position:fixed;inset:0;z-index:3;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:#00000040;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;transform-origin:center}.centered-modal-content-wrapper{display:flex;flex-direction:column;max-width:90vw;max-width:90dvw;max-height:95vh;max-height:95dvh;overflow:hidden}.centered-modal-default-style{border-radius:.75rem;box-shadow:0 8px 20px #0000001f;color:var(--modal-text, #000000);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid transparent;background-color:var(--modal-bg, #ffffff)}.centered-modal-default-content-container{padding:1rem 1.5rem;max-height:85vh;max-height:85dvh;overflow-y:auto}.centered-modal-inner-content-container{display:flex;flex-direction:column;height:100%;padding:1rem 1.5rem;gap:1.5rem;box-sizing:border-box}.centered-modal-top-group{display:flex;flex-direction:column;gap:1rem;flex-grow:1;min-height:0}.centered-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0}.centered-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:space-between;gap:.5rem}.centered-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:center;gap:.5rem}.centered-modal-animate-in{scale:0;animation:centered-modal-animate-in .15s ease-in-out forwards}.centered-modal-animate-out{animation:centered-modal-animate-out .15s ease-in-out forwards}@keyframes centered-modal-animate-in{0%{scale:0}to{scale:1}}@-webkit-keyframes centered-modal-animate-in{0%{scale:0}to{scale:1}}@-moz-keyframes centered-modal-animate-in{0%{scale:0}to{scale:1}}@keyframes centered-modal-animate-out{0%{scale:1}to{scale:0}}@-webkit-keyframes centered-modal-animate-out{0%{scale:1}to{scale:0}}@-moz-keyframes centered-modal-animate-out{0%{scale:1}to{scale:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ModalBottomSheet$1, selector: "modal-bottom-sheet", inputs: ["id", "headerTemplate", "footerTemplate", "config", "isOpen", "isAnimated", "animationDuration"], outputs: ["close"] }, { kind: "component", type: ModalBanner$1, selector: "modal-banner", inputs: ["config"], outputs: ["close"] }, { kind: "component", type: ModalDefaultCloseButton, selector: "modal-default-close-button", inputs: ["config"], outputs: ["close"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalCentered, decorators: [{
-            type: Component,
-            args: [{ selector: 'modal-centered', imports: [
-                        NgTemplateOutlet,
-                        NgClass,
-                        ModalBottomSheet$1,
-                        ModalBanner$1,
-                        ModalDefaultCloseButton
-                    ], template: "@if(!isBottomSheetModalActive()) {\n<div class=\"modal-overlay\" [ngClass]=\"{'modal-backdrop': config()?.style?.hasBackdrop}\" [id]=\"id() ?? ''\"\n    (click)=\"config()?.style?.hasBackdrop ? onBackdropClick.emit($event) : null\">\n    <div class=\"modal-overlay-wrapper\">\n        <div [ngClass]=\"modalClasses()\" (click)=\"$event.stopPropagation()\">\n            <div class=\"centered-modal-inner-content-container\" [class]=\"config()?.style?.wrapperClasses ?? ''\"\n                [style]=\"config()?.style?.wrapperStyles ?? ''\">\n\n                <div class=\"centered-modal-top-group\">\n                    @if (hasBanner()) {\n                    <modal-banner [config]=\"config()\" (close)=\"close.emit('cancel')\"></modal-banner>\n                    }\n                    @if (headerTemplate()) {\n                    <div class=\"centered-modal-header\">\n                        <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n                        @if(!hasBanner()) {\n                        <modal-default-close-button [config]=\"config()\"\n                            (close)=\"close.emit('cancel')\"></modal-default-close-button>\n                        }\n                    </div>\n                    }\n                    <div class=\"centered-modal-main-content-container\">\n                        <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n                    </div>\n                </div>\n\n                @if (footerTemplate()) {\n                <div class=\"centered-modal-footer\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n                </div>\n                }\n            </div>\n        </div>\n    </div>\n</div>\n} @else {\n<modal-bottom-sheet [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\" [config]=\"config()\"\n    [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\" [animationDuration]=\"animationDuration()\"\n    (close)=\"close.emit('cancel')\">\n    <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n</modal-bottom-sheet>\n}\n\n<ng-template #contentTemplate>\n    <ng-content></ng-content>\n</ng-template>", styles: [".modal-overlay-wrapper{display:flex;position:absolute;z-index:3;justify-content:center;align-items:center;width:100%;height:100%}.modal-overlay{position:absolute;inset:0;z-index:2}.modal-backdrop{position:fixed;inset:0;z-index:3;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:#00000040;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;transform-origin:center}.centered-modal-content-wrapper{display:flex;flex-direction:column;max-width:90vw;max-width:90dvw;max-height:95vh;max-height:95dvh;overflow:hidden}.centered-modal-default-style{border-radius:.75rem;box-shadow:0 8px 20px #0000001f;color:var(--modal-text, #000000);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid transparent;background-color:var(--modal-bg, #ffffff)}.centered-modal-default-content-container{padding:1rem 1.5rem;max-height:85vh;max-height:85dvh;overflow-y:auto}.centered-modal-inner-content-container{display:flex;flex-direction:column;height:100%;padding:1rem 1.5rem;gap:1.5rem;box-sizing:border-box}.centered-modal-top-group{display:flex;flex-direction:column;gap:1rem;flex-grow:1;min-height:0}.centered-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0}.centered-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:space-between;gap:.5rem}.centered-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:center;gap:.5rem}.centered-modal-animate-in{scale:0;animation:centered-modal-animate-in .15s ease-in-out forwards}.centered-modal-animate-out{animation:centered-modal-animate-out .15s ease-in-out forwards}@keyframes centered-modal-animate-in{0%{scale:0}to{scale:1}}@-webkit-keyframes centered-modal-animate-in{0%{scale:0}to{scale:1}}@-moz-keyframes centered-modal-animate-in{0%{scale:0}to{scale:1}}@keyframes centered-modal-animate-out{0%{scale:1}to{scale:0}}@-webkit-keyframes centered-modal-animate-out{0%{scale:1}to{scale:0}}@-moz-keyframes centered-modal-animate-out{0%{scale:1}to{scale:0}}\n"] }]
-        }], propDecorators: { headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: true }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: true }] }], isAnimated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAnimated", required: true }] }], isBottomSheetModalActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isBottomSheetModalActive", required: true }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: true }] }], hasDefaultContentWrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDefaultContentWrapperClass", required: true }] }], hasBanner: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBanner", required: true }] }], close: [{ type: i0.Output, args: ["close"] }], onBackdropClick: [{ type: i0.Output, args: ["onBackdropClick"] }], bottomSheet: [{
-                type: ViewChildren,
-                args: [ModalBottomSheet$1]
+                args: [ModalBottomSheet]
             }] } });
 
-class ModalBackdrop {
-    isAnimated = input(false, ...(ngDevMode ? [{ debugName: "isAnimated" }] : []));
-    isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-    click = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: ModalBackdrop, isStandalone: true, selector: "modal-backdrop", inputs: { isAnimated: { classPropertyName: "isAnimated", publicName: "isAnimated", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<div class=\"modal-backdrop\" [class.backdrop-fade-in]=\"isAnimated() && isOpen()\"\n    [class.backdrop-fade-out]=\"isAnimated() && !isOpen()\" (click)=\"click.emit($event)\">\n</div>", styles: [".modal-backdrop{position:fixed;inset:0;z-index:3;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:#00000040;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;transform-origin:center}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalBackdrop, decorators: [{
-            type: Component,
-            args: [{ selector: 'modal-backdrop', imports: [], template: "<div class=\"modal-backdrop\" [class.backdrop-fade-in]=\"isAnimated() && isOpen()\"\n    [class.backdrop-fade-out]=\"isAnimated() && !isOpen()\" (click)=\"click.emit($event)\">\n</div>", styles: [".modal-backdrop{position:fixed;inset:0;z-index:3;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:#00000040;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;transform-origin:center}\n"] }]
-        }], propDecorators: { isAnimated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAnimated", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], click: [{ type: i0.Output, args: ["click"] }] } });
-
-class ModalBanner {
-    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
-    close = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalBanner, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ModalBanner, isStandalone: true, selector: "modal-banner", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"modal-top-banner-container\">\n    <div class=\"modal-top-banner-title-container\">\n        @if (config() && config()?.bannerText && (config() && config()!.bannerText.length > 0)) {\n            {{ config()?.bannerText }}\n        }\n    </div>\n    \n    <modal-default-close-button [config]=\"config()\" (close)=\"close.emit('cancel')\"></modal-default-close-button>\n</div>", styles: [".modal-top-banner-container{display:flex;flex-direction:row;gap:2rem;justify-content:space-between;align-items:center;color:var(--modal-text, #000000);top:0;min-height:2rem;border-top-left-radius:.75rem;border-top-right-radius:.75rem}.modal-top-banner-title-container{display:flex;flex-direction:row;justify-content:flex-start;gap:1.5rem;align-items:center;width:100%}@keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}@-webkit-keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}@-moz-keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}\n"], dependencies: [{ kind: "component", type: ModalDefaultCloseButton, selector: "modal-default-close-button", inputs: ["config"], outputs: ["close"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalBanner, decorators: [{
-            type: Component,
-            args: [{ selector: 'modal-banner', imports: [
-                        ModalDefaultCloseButton
-                    ], template: "<div class=\"modal-top-banner-container\">\n    <div class=\"modal-top-banner-title-container\">\n        @if (config() && config()?.bannerText && (config() && config()!.bannerText.length > 0)) {\n            {{ config()?.bannerText }}\n        }\n    </div>\n    \n    <modal-default-close-button [config]=\"config()\" (close)=\"close.emit('cancel')\"></modal-default-close-button>\n</div>", styles: [".modal-top-banner-container{display:flex;flex-direction:row;gap:2rem;justify-content:space-between;align-items:center;color:var(--modal-text, #000000);top:0;min-height:2rem;border-top-left-radius:.75rem;border-top-right-radius:.75rem}.modal-top-banner-title-container{display:flex;flex-direction:row;justify-content:flex-start;gap:1.5rem;align-items:center;width:100%}@keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}@-webkit-keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}@-moz-keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}\n"] }]
-        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], close: [{ type: i0.Output, args: ["close"] }] } });
+const MODAL_DEFAULT_ANIM_DURATION = 175;
+const MODAL_DEFAULT_INTERNAL_ANIM_DURATION = 350;
+const MODAL_DEFAULT_ANIM_DURATION_MULTIPLIER_SMALL = 0.65;
+const MODAL_DEFAULT_ANIM_DURATION_MULTIPLIER_LARGE = 0.85;
 
-class ModalService {
-    router = inject(Router);
-    injector = inject(Injector);
-    appRef = inject(ApplicationRef);
-    environmentInjector = inject(EnvironmentInjector);
-    rendererFactory = inject(RendererFactory2);
-    renderer;
-    document = inject(DOCUMENT);
-    //#region Properties
-    modals = new Set();
-    modalsSubject = new BehaviorSubject(this.modals);
-    //#endregion
+class ModalCore {
+    modalService = inject(ModalService);
+    windowDimensionsService = inject(WindowDimensionsService);
+    scrollLockService = inject(ScrollLockService);
+    afterClose = output();
+    animationDuration = MODAL_DEFAULT_ANIM_DURATION;
+    componentRef = {};
+    config;
+    closeFunction;
+    backdropClickSubject = new Subject();
+    backdropClick = this.backdropClickSubject.asObservable();
+    isOpen = signal(true, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    effectiveLayout = signal('center', ...(ngDevMode ? [{ debugName: "effectiveLayout" }] : []));
+    isCentered = signal(false, ...(ngDevMode ? [{ debugName: "isCentered" }] : []));
+    isSide = signal(false, ...(ngDevMode ? [{ debugName: "isSide" }] : []));
+    headerTemplate = signal(null, ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
+    footerTemplate = signal(null, ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
+    id = signal(null, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    isBottomSheetModalActive = signal(false, ...(ngDevMode ? [{ debugName: "isBottomSheetModalActive" }] : []));
+    isAnimated = false;
+    hasBanner = false;
+    hasDefaultContentWrapperClass = false;
+    isConfirmCloseModalOpen = false;
+    scrollLockId = uuidv4();
+    _sortedBreakpoints = [];
+    windowDimensions = this.windowDimensionsService.dimensions;
+    _currentVcr = null;
+    set dynamicContainer(vcr) {
+        if (vcr && this.componentRef) {
+            this._currentVcr = vcr;
+            vcr.insert(this.componentRef.hostView);
+        }
+    }
+    modalContainer;
+    contentTemplate;
+    sideModalComponents;
+    centeredModalComponents;
     constructor() {
-        this.renderer = this.rendererFactory.createRenderer(null, null);
-        this.createSubscriptions();
+        this.initKeyboardSubscription();
+        effect(() => {
+            const width = this.windowDimensions().width;
+            this.handleLayout(width);
+        });
+    }
+    ngOnInit() {
+        this.initParamsFromConfig();
+        this.initBreakpointCache();
+        this.scrollLockService.disableScroll(this.scrollLockId, {
+            animationDuration: this.animationDuration,
+            handleTouchInput: true,
+            mobileOnlyTouchPrevention: true,
+        });
+    }
+    ngAfterViewInit() {
+        if (!this.componentRef)
+            return;
+        this.dynamicContainer?.insert(this.componentRef.hostView);
+        const width = this.windowDimensionsService.dimensions().width;
+        this.handleLayout(width);
+    }
+    ngOnDestroy() {
+        this.componentRef?.destroy();
+        this.dynamicContainer?.clear();
+        this.scrollLockService.enableScroll(this.scrollLockId);
     }
     //#region Subscription Methods
-    createSubscriptions() {
-        this.router.events
-            .pipe(filter((event) => event instanceof NavigationEnd), skip(1), takeUntilDestroyed())
+    initKeyboardSubscription() {
+        fromEvent(document, "keydown")
+            .pipe(filter((event) => event.key === "Escape"), takeUntilDestroyed())
             .subscribe(() => {
-            if (this.modalsCount() > 0) {
-                this.closeAll(true);
+            if (!this.isConfirmCloseModalOpen) {
+                this.close("cancel", undefined, true);
             }
         });
     }
     //#endregion
-    //#region Public Methods
-    /**
-     * Opens a modal with the specified component and configuration.
-     * @param component The component to be displayed in the modal.
-     * @param config Optional configuration for the modal.
-     * @returns A ModalRef instance representing the opened modal.
-     */
-    open(component, config) {
-        const dataInjector = Injector.create({
-            providers: [{ provide: MODAL_DATA$1, useValue: config?.data }],
-            parent: this.injector,
-        });
-        const wrapperRef = createComponent((ModalCore$1), {
-            environmentInjector: this.environmentInjector,
-            elementInjector: dataInjector
-        });
-        const contentInjector = Injector.create({
-            providers: [
-                { provide: ModalCore$1, useValue: wrapperRef.instance }
-            ],
-            parent: wrapperRef.injector,
-        });
-        const contentRef = createComponent(component, {
-            environmentInjector: this.environmentInjector,
-            elementInjector: contentInjector
-        });
-        wrapperRef.instance.componentRef = contentRef;
-        wrapperRef.instance.config = new ModalConfig$1(config);
-        this.appRef.attachView(wrapperRef.hostView);
-        this.document.body.appendChild(wrapperRef.location.nativeElement);
-        const modal = new ModalRef$1(contentRef, component, wrapperRef, this, new ModalConfig$1(config));
-        if (this.isIModal(contentRef.instance)) {
-            contentRef.instance.modal = modal;
-            contentRef.instance.onModalInit();
+    //#region Initialization Methods
+    initParamsFromConfig() {
+        this.id.set(this.config?.id ?? this.scrollLockId);
+        this.hasBanner =
+            this.config !== undefined &&
+                ((this.config.bannerText !== undefined && this.config.bannerText.length > 0) ||
+                    (this.config.disableClose !== true && this.config.style.showCloseButton !== false && this.headerTemplate() === null));
+        this.hasDefaultContentWrapperClass = this.config?.style.contentWrapper !== false;
+        this.isAnimated = this.config?.style.animate === true;
+    }
+    initBreakpointCache() {
+        const definedBreakpoints = this.config?.style?.breakpoints;
+        if (definedBreakpoints && Object.keys(definedBreakpoints).length > 0) {
+            const serviceBreakpoints = this.windowDimensionsService.breakpoints;
+            this._sortedBreakpoints = Object.keys(definedBreakpoints)
+                .map(key => ({
+                width: serviceBreakpoints[key],
+                layout: definedBreakpoints[key]
+            }))
+                .sort((a, b) => a.width - b.width);
         }
-        wrapperRef.onDestroy(() => {
-            this.appRef.detachView(wrapperRef.hostView);
-            wrapperRef.location.nativeElement.remove();
-        });
-        const modalElement = modal.componentRef.location.nativeElement;
-        this.renderer.setStyle(modalElement, 'height', '97%');
-        this.renderer.setStyle(modalElement, 'width', '100%');
-        this.renderer.setStyle(modalElement, 'display', 'flex');
-        this.renderer.setStyle(modalElement, 'flex-grow', '1');
-        this.modals.add(modal);
-        this.modalsSubject.next(this.modals);
-        modal.open();
-        return modal;
     }
-    /**
-     * Closes the specified modal.
-     * @param modal The ModalRef instance representing the modal to be closed.
-     */
-    close(modal) {
-        modal.close();
+    //#endregion
+    //#region Public Template Methods
+    setHeaderTemplate(template) {
+        this.headerTemplate.set(template);
     }
-    /**
-     * Unregisters the specified modal from the service.
-     * @param modal The ModalRef instance representing the modal to be unregistered.
-     */
-    unregister(modal) {
-        this.modals.delete(modal);
-        this.modalsSubject.next(this.modals);
+    setFooterTemplate(template) {
+        this.footerTemplate.set(template);
     }
-    /**
-     * Closes all open modals.
-     * @param onNavigate Indicates if the closeAll is triggered by navigation event.
-    */
-    closeAll(onNavigate = false) {
-        this.modals.forEach((modal) => {
-            if (modal.modalConfig?.disableCloseOnNavigation !== true || !onNavigate) {
-                modal.close("cancel", undefined, true);
+    //#endregion
+    //#region Closing Methods
+    close(state = "cancel", result = undefined, fromInsideInteraction = false, forceClose = false) {
+        if (forceClose) {
+            this.handleClose(state, result);
+            return;
+        }
+        if ((this.config?.disableClose === true) && fromInsideInteraction) {
+            return;
+        }
+        const shouldCheckCloseGuard = this.config?.closeGuardOnlyOnCancel !== true || state !== "confirm";
+        if (shouldCheckCloseGuard && this.config?.closeGuard) {
+            const guardResult = this.config.closeGuard.canClose(this.modalService);
+            const canClose$ = guardResult instanceof Observable ? guardResult :
+                guardResult instanceof Promise ? from(guardResult) :
+                    of(guardResult);
+            if (this.isBottomSheetModalActive()) {
+                this.resetBottomSheetModalLayout();
             }
-        });
+            canClose$.pipe(take(1)).subscribe((canClose) => {
+                if (canClose) {
+                    this.handleClose(state, result);
+                }
+            });
+            return;
+        }
+        this.handleClose(state, result);
     }
-    /**
-     * Finds if a modal with the specified component type is currently open.
-     * @param componentType The component type to search for.
-     * @returns True if a modal with the specified component type is open, false otherwise.
-     */
-    find(componentType) {
-        for (const modal of this.modals) {
-            if (modal.componentRef.componentType === componentType) {
-                return true;
+    async handleClose(state, result) {
+        this.isOpen.set(false);
+        this.setBottomSheetModalFinishedState(true);
+        const returnResult = {
+            data: result,
+            state: state,
+        };
+        if (this.closeFunction) {
+            this.closeFunction(returnResult);
+        }
+    }
+    onBackdropClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.isOpen()) {
+            return;
+        }
+        this.backdropClickSubject.next(event);
+        if (this.config?.style?.hasBackdrop && this.config?.disableCloseOnBackdropClick !== true) {
+            this.close("cancel", undefined, true);
+        }
+    }
+    //#endregion
+    //#region Helper Methods
+    handleLayout(width) {
+        if (!this.config)
+            return;
+        let resolvedLayout = this.config.style.layout;
+        for (const bp of this._sortedBreakpoints) {
+            if (width <= bp.width) {
+                resolvedLayout = bp.layout;
+                break;
+            }
+        }
+        const prevIsSide = this.isSide();
+        const nextIsSide = resolvedLayout === 'left' || resolvedLayout === 'right';
+        const layoutTypeChanged = prevIsSide !== nextIsSide;
+        if (layoutTypeChanged && this._currentVcr && this.componentRef) {
+            const index = this._currentVcr.indexOf(this.componentRef.hostView);
+            if (index !== -1) {
+                this._currentVcr.detach(index);
             }
         }
-        return false;
+        this.effectiveLayout.set(resolvedLayout);
+        this.isSide.set(nextIsSide);
+        this.isCentered.set(resolvedLayout === 'center' || resolvedLayout === 'bottom-sheet');
+        const shouldBeBottomSheet = resolvedLayout === 'bottom-sheet';
+        const currentSwipeState = this.isBottomSheetModalActive();
+        if (shouldBeBottomSheet && !currentSwipeState) {
+            this.isBottomSheetModalActive.set(true);
+        }
+        else if (!shouldBeBottomSheet && currentSwipeState) {
+            this.isBottomSheetModalActive.set(false);
+        }
     }
-    /**
-     * Gets the count of currently open modals.
-     * @returns The number of open modals.
-    */
-    modalsCount() {
-        return this.modals.size;
+    getBottomSheetModal() {
+        return this.sideModalComponents?.first?.bottomSheet?.first
+            ?? this.centeredModalComponents?.first?.bottomSheet?.first;
     }
-    //#endregion
-    //#region Helper Methods
-    isIModal(component) {
-        return (typeof component === 'object' &&
-            component !== null &&
-            'onModalInit' in component &&
-            typeof component.onModalInit === 'function');
+    resetBottomSheetModalLayout() {
+        const bottomSheet = this.getBottomSheetModal();
+        if (bottomSheet) {
+            bottomSheet.currentTranslateY.set(0);
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalService, providedIn: "root" });
+    setBottomSheetModalFinishedState(isFinished) {
+        const bottomSheet = this.getBottomSheetModal();
+        if (bottomSheet) {
+            bottomSheet.isSwipingVerticallyFinished.set(isFinished);
+        }
+        this.isBottomSheetModalActive.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalCore, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ModalCore, isStandalone: true, selector: "modal", outputs: { afterClose: "afterClose" }, viewQueries: [{ propertyName: "dynamicContainer", first: true, predicate: ["dynamicContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "sideModalComponents", predicate: ModalSide, descendants: true }, { propertyName: "centeredModalComponents", predicate: ModalCentered, descendants: true }], ngImport: i0, template: "@if (config?.style?.hasBackdrop && (isSide() || isBottomSheetModalActive())) {\n<modal-backdrop [isAnimated]=\"isAnimated\" [isOpen]=\"isOpen()\" (click)=\"onBackdropClick($event)\">\n</modal-backdrop>\n}\n\n<ng-container #modalContainer>\n    @switch (true) {\n        @case (isSide()) {\n            <modal-side \n                [layout]=\"effectiveLayout()\"\n                [headerTemplate]=\"headerTemplate()\"  \n                [footerTemplate]=\"footerTemplate()\" \n                [config]=\"config\" \n                [id]=\"id()\"\n                [isOpen]=\"isOpen()\" \n                [isAnimated]=\"isAnimated\"\n                [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" \n                [animationDuration]=\"animationDuration\"\n                [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" \n                [hasBanner]=\"hasBanner\" \n                (close)=\"close($event)\">\n                <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n            </modal-side>\n        } \n        @case (isCentered()) {\n            <modal-centered \n                [headerTemplate]=\"headerTemplate()\" \n                [footerTemplate]=\"footerTemplate()\" \n                [config]=\"config\" \n                [id]=\"id()\"\n                [isOpen]=\"isOpen()\" \n                [isAnimated]=\"isAnimated\"\n                [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" \n                [animationDuration]=\"animationDuration\"\n                [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" \n                [hasBanner]=\"hasBanner\" \n                (close)=\"close($event)\"\n                (onBackdropClick)=\"onBackdropClick($event)\">\n                <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n            </modal-centered>\n        }\n    }\n</ng-container>\n\n<ng-template #contentTemplate>\n    <ng-container #dynamicContainer></ng-container>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ModalCentered, selector: "modal-centered", inputs: ["headerTemplate", "footerTemplate", "config", "id", "isOpen", "isAnimated", "isBottomSheetModalActive", "animationDuration", "hasDefaultContentWrapperClass", "hasBanner"], outputs: ["close", "onBackdropClick"] }, { kind: "component", type: ModalSide, selector: "modal-side", inputs: ["layout", "headerTemplate", "footerTemplate", "config", "id", "isOpen", "isAnimated", "isBottomSheetModalActive", "animationDuration", "hasDefaultContentWrapperClass", "hasBanner"], outputs: ["close"] }, { kind: "component", type: ModalBackdrop, selector: "modal-backdrop", inputs: ["isAnimated", "isOpen"], outputs: ["click"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalCore, decorators: [{
+            type: Component,
+            args: [{ selector: 'modal', imports: [
+                        NgTemplateOutlet,
+                        ModalCentered,
+                        ModalSide,
+                        ModalBackdrop
+                    ], template: "@if (config?.style?.hasBackdrop && (isSide() || isBottomSheetModalActive())) {\n<modal-backdrop [isAnimated]=\"isAnimated\" [isOpen]=\"isOpen()\" (click)=\"onBackdropClick($event)\">\n</modal-backdrop>\n}\n\n<ng-container #modalContainer>\n    @switch (true) {\n        @case (isSide()) {\n            <modal-side \n                [layout]=\"effectiveLayout()\"\n                [headerTemplate]=\"headerTemplate()\"  \n                [footerTemplate]=\"footerTemplate()\" \n                [config]=\"config\" \n                [id]=\"id()\"\n                [isOpen]=\"isOpen()\" \n                [isAnimated]=\"isAnimated\"\n                [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" \n                [animationDuration]=\"animationDuration\"\n                [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" \n                [hasBanner]=\"hasBanner\" \n                (close)=\"close($event)\">\n                <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n            </modal-side>\n        } \n        @case (isCentered()) {\n            <modal-centered \n                [headerTemplate]=\"headerTemplate()\" \n                [footerTemplate]=\"footerTemplate()\" \n                [config]=\"config\" \n                [id]=\"id()\"\n                [isOpen]=\"isOpen()\" \n                [isAnimated]=\"isAnimated\"\n                [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" \n                [animationDuration]=\"animationDuration\"\n                [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" \n                [hasBanner]=\"hasBanner\" \n                (close)=\"close($event)\"\n                (onBackdropClick)=\"onBackdropClick($event)\">\n                <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n            </modal-centered>\n        }\n    }\n</ng-container>\n\n<ng-template #contentTemplate>\n    <ng-container #dynamicContainer></ng-container>\n</ng-template>" }]
+        }], ctorParameters: () => [], propDecorators: { afterClose: [{ type: i0.Output, args: ["afterClose"] }], dynamicContainer: [{
+                type: ViewChild,
+                args: ["dynamicContainer", { read: ViewContainerRef }]
+            }], modalContainer: [{
+                type: ViewChild,
+                args: ["modalContainer", { static: false }]
+            }], contentTemplate: [{
+                type: ViewChild,
+                args: ["contentTemplate"]
+            }], sideModalComponents: [{
+                type: ViewChildren,
+                args: [ModalSide]
+            }], centeredModalComponents: [{
+                type: ViewChildren,
+                args: [ModalCentered]
+            }] } });
 
 class Modal {
     /**
      * Data injected into the modal component.
      */
-    data = inject(MODAL_DATA$1);
+    data = inject(MODAL_DATA);
     /**
      * Reference to the ModalRef instance associated with this modal.
      */
@@ -699,199 +896,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Injectable
         }] });
 
-class ModalConfig {
-    open;
-    afterClose;
-    closeGuard;
-    closeGuardOnlyOnCancel;
-    disableClose;
-    disableCloseOnBackdropClick;
-    disableCloseOnNavigation;
-    data;
-    style;
-    bannerText;
-    contentClasses;
-    contentStyles;
-    disableConsoleWarnings;
-    disableConsoleInfo;
-    id;
-    constructor(config) {
-        this.open = config?.open ?? true;
-        this.afterClose = config?.afterClose;
-        this.closeGuard = config?.closeGuard;
-        this.closeGuardOnlyOnCancel = config?.closeGuardOnlyOnCancel ?? true;
-        this.disableClose = config?.disableClose ?? false;
-        this.disableCloseOnBackdropClick = config?.disableCloseOnBackdropClick ?? false;
-        this.disableCloseOnNavigation = config?.disableCloseOnNavigation ?? false;
-        this.data = config?.data ?? null;
-        this.style = new ModalStyleConfig$1(config?.style);
-        this.bannerText = config?.bannerText ?? "";
-        this.contentClasses = config?.contentClasses ?? "";
-        this.contentStyles = config?.contentStyles ?? "";
-        this.disableConsoleWarnings = config?.disableConsoleWarnings ?? false;
-        this.disableConsoleInfo = config?.disableConsoleInfo ?? false;
-        this.id = config?.id;
-    }
-}
-
-class ModalRef {
-    componentType;
-    modalService;
-    //#region Modal Container
-    _modalContainer = {};
-    set modalContainer(modalContainer) {
-        this._modalContainer = modalContainer;
-    }
-    get modalContainer() {
-        return this._modalContainer;
-    }
-    _modalContainerRef = {};
-    set modalContainerRef(modalContainerRef) {
-        this._modalContainerRef = modalContainerRef;
-    }
-    get modalContainerRef() {
-        return this._modalContainerRef;
-    }
-    _modalContainerElement = {};
-    set modalContainerElement(modalContainerElement) {
-        this._modalContainerElement = modalContainerElement;
-    }
-    get modalContainerElement() {
-        return this._modalContainerElement;
-    }
-    _parentElement = undefined;
-    set parentElement(parentElement) {
-        this._parentElement = parentElement;
-    }
-    get parentElement() {
-        return this._parentElement;
-    }
-    //#endregion
-    //#region Component
-    _componentRef = {};
-    set componentRef(componentRef) {
-        this._componentRef = componentRef;
-    }
-    get componentRef() {
-        return this._componentRef;
-    }
-    //#endregion
-    //#region Self
-    _modalState = ModalState$1.CLOSED;
-    modalState = new BehaviorSubject(this.getStatus());
-    modalState$() {
-        return this.modalState.asObservable();
-    }
-    getStatus() {
-        return this._modalState;
-    }
-    _modalConfig = undefined;
-    set modalConfig(modalConfig) {
-        this._modalConfig = modalConfig;
-    }
-    get modalConfig() {
-        return this._modalConfig;
-    }
-    //#endregion
-    //#region Observables
-    backdropClickSubject = new Subject();
-    backdropClick() {
-        return this.backdropClickSubject.asObservable();
-    }
-    backdropClicked(event) {
-        this.backdropClickSubject.next(event);
-    }
-    afterCloseSubject = new Subject();
-    /**
-     * Observable that emits when the modal has been closed.
-     * @returns An Observable that emits an IModalCloseResult<R> when the modal is closed.
-     */
-    afterClosed() {
-        return this.afterCloseSubject.asObservable();
-    }
-    afterClose(result) {
-        this.afterCloseSubject.next(result);
-    }
-    //#endregion
-    constructor(componentRef, componentType, modalContainerRef, modalService, modalConfig) {
-        this.componentType = componentType;
-        this.modalService = modalService;
-        this.modalConfig = modalConfig;
-        this.modalContainerRef = modalContainerRef;
-        this.modalContainerElement = modalContainerRef.location.nativeElement;
-        this.componentRef = componentRef;
-    }
-    //#region Public Methods
-    async open() {
-        this._modalState = ModalState$1.OPENING;
-        this.modalState.next(ModalState$1.OPENING);
-        this.modalContainerRef.instance.componentRef = this._componentRef;
-        const config = new ModalConfig$1(this.modalConfig);
-        this.modalContainerRef.instance.config = config;
-        this.modalContainerRef.instance.closeFunction = this.handleClose.bind(this);
-        this.parentElement?.appendChild(this.modalContainerElement);
-        this.modalContainerRef.instance.backdropClick.subscribe((event) => {
-            this.backdropClicked(event);
-        });
-        this._modalState = ModalState$1.OPEN;
-        this.modalState.next(ModalState$1.OPEN);
-    }
-    close(state = "cancel", result = undefined, forceClose = false) {
-        this.modalContainerRef.instance.close(state, result, false, forceClose);
-    }
-    //#endregion
-    //#region Private Methods
-    handleClose(result) {
-        this._modalState = ModalState$1.CLOSING;
-        this.modalState.next(ModalState$1.CLOSING);
-        setTimeout(() => {
-            if (this.modalConfig?.afterClose) {
-                this.modalConfig.afterClose();
-            }
-            this.modalContainerRef.destroy();
-            this._modalState = ModalState$1.CLOSED;
-            this.modalState.next(ModalState$1.CLOSED);
-            this.afterClose(result);
-            this.modalService?.unregister(this);
-        }, this.modalContainerRef.instance.animationDuration);
-    }
-}
-
-class ModalStyleConfig {
-    layout;
-    breakpoints;
-    animate;
-    hasBackdrop;
-    closeDelay;
-    showCloseButton;
-    mobileConfig;
-    contentWrapper;
-    wrapperClasses;
-    wrapperStyles;
-    overrideFullHeight;
-    constructor(config) {
-        this.layout = config?.layout ?? "center";
-        this.breakpoints = config?.breakpoints;
-        this.animate = config?.animate ?? true;
-        this.hasBackdrop = config?.hasBackdrop ?? true;
-        this.closeDelay = config?.closeDelay;
-        this.showCloseButton = config?.showCloseButton ?? true;
-        this.mobileConfig = config?.mobileConfig ?? {};
-        this.contentWrapper = config?.contentWrapper ?? true;
-        this.wrapperClasses = config?.wrapperClasses ?? "";
-        this.wrapperStyles = config?.wrapperStyles ?? "";
-        this.overrideFullHeight = config?.overrideFullHeight ?? false;
-    }
-}
-
-const MODAL_DEFAULT_ANIM_DURATION = 175;
-const MODAL_DEFAULT_INTERNAL_ANIM_DURATION = 350;
-const MODAL_DEFAULT_ANIM_DURATION_MULTIPLIER_SMALL = 0.65;
-const MODAL_DEFAULT_ANIM_DURATION_MULTIPLIER_LARGE = 0.85;
-
-const MODAL_DOWN_SWIPE_LIMIT = 3;
-const MODAL_SWIPE_VELOCITY_THRESHOLD = 80;
-
 var ModalWarnings;
 (function (ModalWarnings) {
     //#region Directive usage
@@ -900,23 +904,15 @@ var ModalWarnings;
     //#endregion
 })(ModalWarnings || (ModalWarnings = {}));
 
-var ModalState;
-(function (ModalState) {
-    ModalState["OPEN"] = "open";
-    ModalState["OPENING"] = "opening";
-    ModalState["CLOSED"] = "closed";
-    ModalState["CLOSING"] = "closing";
-})(ModalState || (ModalState = {}));
-
 class ModalHeaderDirective {
     templateRef = inject(TemplateRef);
-    modal = inject(ModalCore$1, { optional: true });
+    modal = inject(ModalCore, { optional: true });
     constructor() {
         if (this.modal) {
             this.modal.setHeaderTemplate(this.templateRef);
         }
         else {
-            console.warn(ModalWarnings$1.HEADER_DIRECTIVE_OUTSIDE_MODAL);
+            console.warn(ModalWarnings.HEADER_DIRECTIVE_OUTSIDE_MODAL);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -932,13 +928,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
 class ModalFooterDirective {
     templateRef = inject(TemplateRef);
-    modal = inject(ModalCore$1, { optional: true });
+    modal = inject(ModalCore, { optional: true });
     constructor() {
         if (this.modal) {
             this.modal.setFooterTemplate(this.templateRef);
         }
         else {
-            console.warn(ModalWarnings$1.FOOTER_DIRECTIVE_OUTSIDE_MODAL);
+            console.warn(ModalWarnings.FOOTER_DIRECTIVE_OUTSIDE_MODAL);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -952,8 +948,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-const MODAL_DATA = new InjectionToken("MODAL_DATA");
-
 /**
  * Abstract class representing a modal close guard.
  */
@@ -965,7 +959,7 @@ class ModalCloseGuard {
  * @param component The component to use for the confirmation modal.
  * @param config The configuration for the confirmation modal.
  */
-class ModalConfirmCloseGuard extends ModalCloseGuard$1 {
+class ModalConfirmCloseGuard extends ModalCloseGuard {
     component;
     config;
     constructor(component, config) {