@filip.mazev/modal 0.1.50 → 0.1.51

package/fesm2022/filip.mazev-modal.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 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 { BehaviorSubject, Subject, filter, skip, Observable, from, of, take, fromEvent, map } from 'rxjs';
 import { DOCUMENT, NgClass, NgTemplateOutlet } from '@angular/common';
 import { Router, NavigationEnd } from '@angular/router';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { WindowDimensionsService, ScrollLockService, uuidv4 } from '@filip.mazev/blocks-core';
+import { ScrollLockService, WindowDimensionsService, uuidv4 } from '@filip.mazev/blocks-core';
 
 class ModalStyleConfig {
     layout;
@@ -19,7 +19,7 @@ class ModalStyleConfig {
     wrapperStyles;
     overrideFullHeight;
     constructor(config) {
-        this.layout = config?.layout ?? "center";
+        this.layout = config?.layout ?? 'center';
         this.breakpoints = config?.breakpoints;
         this.animate = config?.animate ?? true;
         this.hasBackdrop = config?.hasBackdrop ?? true;
@@ -27,8 +27,8 @@ class ModalStyleConfig {
         this.showCloseButton = config?.showCloseButton ?? true;
         this.mobileConfig = config?.mobileConfig ?? {};
         this.contentWrapper = config?.contentWrapper ?? true;
-        this.wrapperClasses = config?.wrapperClasses ?? "";
-        this.wrapperStyles = config?.wrapperStyles ?? "";
+        this.wrapperClasses = config?.wrapperClasses ?? '';
+        this.wrapperStyles = config?.wrapperStyles ?? '';
         this.overrideFullHeight = config?.overrideFullHeight ?? false;
     }
 }
@@ -59,9 +59,9 @@ class ModalConfig {
         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.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;
@@ -76,93 +76,85 @@ var ModalState;
     ModalState["CLOSING"] = "closing";
 })(ModalState || (ModalState = {}));
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 class ModalRef {
     componentType;
     modalService;
     //#region Modal Container
     _modalContainer = {};
-    set modalContainer(modalContainer) {
-        this._modalContainer = modalContainer;
+    _modalContainerRef = {};
+    _modalContainerElement = {};
+    _parentElement = undefined;
+    //#region Component
+    _componentRef = {};
+    //#region Self
+    _modalState = ModalState.CLOSED;
+    //#endregion
+    modalState = new BehaviorSubject(this.getStatus());
+    _modalConfig = undefined;
+    //#region Observables
+    backdropClickSubject = new Subject();
+    //#endregion
+    afterCloseSubject = new Subject();
+    //#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;
     }
     get modalContainer() {
         return this._modalContainer;
     }
-    _modalContainerRef = {};
-    set modalContainerRef(modalContainerRef) {
-        this._modalContainerRef = modalContainerRef;
+    set modalContainer(modalContainer) {
+        this._modalContainer = modalContainer;
     }
     get modalContainerRef() {
         return this._modalContainerRef;
     }
-    _modalContainerElement = {};
-    set modalContainerElement(modalContainerElement) {
-        this._modalContainerElement = modalContainerElement;
+    set modalContainerRef(modalContainerRef) {
+        this._modalContainerRef = modalContainerRef;
     }
     get modalContainerElement() {
         return this._modalContainerElement;
     }
-    _parentElement = undefined;
-    set parentElement(parentElement) {
-        this._parentElement = parentElement;
+    set modalContainerElement(modalContainerElement) {
+        this._modalContainerElement = modalContainerElement;
     }
     get parentElement() {
         return this._parentElement;
     }
-    //#endregion
-    //#region Component
-    _componentRef = {};
-    set componentRef(componentRef) {
-        this._componentRef = componentRef;
+    set parentElement(parentElement) {
+        this._parentElement = parentElement;
     }
+    //#endregion
     get componentRef() {
         return this._componentRef;
     }
-    //#endregion
-    //#region Self
-    _modalState = ModalState.CLOSED;
-    modalState = new BehaviorSubject(this.getStatus());
-    modalState$() {
-        return this.modalState.asObservable();
+    set componentRef(componentRef) {
+        this._componentRef = componentRef;
     }
-    getStatus() {
-        return this._modalState;
+    get modalConfig() {
+        return this._modalConfig;
     }
-    _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);
+    modalState$() {
+        return this.modalState.asObservable();
     }
-    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.
+     * @returns An Observable that emits an IModalCloseResult<R | undefined> 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;
@@ -178,9 +170,18 @@ class ModalRef {
         this._modalState = ModalState.OPEN;
         this.modalState.next(ModalState.OPEN);
     }
-    close(state = "cancel", result = undefined, forceClose = false) {
+    close(state = 'cancel', result = undefined, forceClose = false) {
         this.modalContainerRef.instance.close(state, result, false, forceClose);
     }
+    getStatus() {
+        return this._modalState;
+    }
+    backdropClicked(event) {
+        this.backdropClickSubject.next(event);
+    }
+    afterClose(result) {
+        this.afterCloseSubject.next(result);
+    }
     //#endregion
     //#region Private Methods
     handleClose(result) {
@@ -199,7 +200,8 @@ class ModalRef {
     }
 }
 
-const MODAL_DATA = new InjectionToken("MODAL_DATA");
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const MODAL_DATA = new InjectionToken('MODAL_DATA');
 
 class ModalService {
     router = inject(Router);
@@ -238,17 +240,15 @@ class ModalService {
     open(component, config) {
         const dataInjector = Injector.create({
             providers: [{ provide: MODAL_DATA, useValue: config?.data }],
-            parent: this.injector,
+            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,
+            providers: [{ provide: ModalCore, useValue: wrapperRef.instance }],
+            parent: wrapperRef.injector
         });
         const contentRef = createComponent(component, {
             environmentInjector: this.environmentInjector,
@@ -295,11 +295,11 @@ class ModalService {
     /**
      * 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);
+                modal.close('cancel', undefined, true);
             }
         });
     }
@@ -319,25 +319,22 @@ class ModalService {
     /**
      * 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');
+        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" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: "root",
+                    providedIn: 'root'
                 }]
         }], ctorParameters: () => [] });
 
@@ -345,36 +342,34 @@ 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"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: ModalBackdrop, isStandalone: true, selector: "app-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", 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"] }]
+            args: [{ selector: 'app-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"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalDefaultCloseButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: ModalDefaultCloseButton, isStandalone: true, selector: "app-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", 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"] }]
+            args: [{ selector: 'app-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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalBanner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: ModalBanner, isStandalone: true, selector: "app-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    <app-modal-default-close-button [config]=\"config()\" (close)=\"close.emit('cancel')\"></app-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: "app-modal-default-close-button", inputs: ["config"], outputs: ["close"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalBanner, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", 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"] }]
+            args: [{ selector: 'app-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    <app-modal-default-close-button [config]=\"config()\" (close)=\"close.emit('cancel')\"></app-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;
@@ -392,6 +387,8 @@ class ModalBottomSheet {
     currentTranslateY = signal(0, ...(ngDevMode ? [{ debugName: "currentTranslateY" }] : []));
     isSwipingVerticallyFinished = signal(false, ...(ngDevMode ? [{ debugName: "isSwipingVerticallyFinished" }] : []));
     isSwipingVertically = signal(false, ...(ngDevMode ? [{ debugName: "isSwipingVertically" }] : []));
+    verticalSwipeTarget;
+    elementRef;
     modalTransform = computed(() => {
         if (this.isSwipingVerticallyFinished()) {
             return 'translateY(100%)';
@@ -405,8 +402,6 @@ class ModalBottomSheet {
     bottomSheetInitiated = false;
     cleanupListeners = null;
     globalResizeCleanup = null;
-    verticalSwipeTarget;
-    elementRef;
     ngOnInit() {
         this.startVerticalSwipeDetection();
         this.monitorInputType();
@@ -492,9 +487,7 @@ class ModalBottomSheet {
         this.bottomSheetInitiated = true;
         const config = this.config();
         const style = config?.style?.mobileConfig;
-        this.downSwipeLimit = style?.downSwipeLimit && style.downSwipeLimit > 0
-            ? style.downSwipeLimit
-            : MODAL_DOWN_SWIPE_LIMIT;
+        this.downSwipeLimit = style?.downSwipeLimit && style.downSwipeLimit > 0 ? style.downSwipeLimit : MODAL_DOWN_SWIPE_LIMIT;
     }
     monitorInputType() {
         if (this.globalResizeCleanup)
@@ -513,21 +506,18 @@ class ModalBottomSheet {
         window.addEventListener('pointerdown', handler);
         this.globalResizeCleanup = () => window.removeEventListener('pointerdown', handler);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalBottomSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ModalBottomSheet, isStandalone: true, selector: "modal-bottom-sheet", inputs: { id: { classPropertyName: "id", publicName: "id", 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 }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null }, isAnimated: { classPropertyName: "isAnimated", publicName: "isAnimated", isSignal: true, isRequired: true, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "verticalSwipeTarget", first: true, predicate: ["verticalSwipeTarget"], descendants: true, static: true }, { propertyName: "elementRef", first: true, predicate: ["elementRef"], descendants: true, static: true }], ngImport: i0, template: "<div (click)=\"$event.stopPropagation()\" \n    [id]=\"id() ?? ''\"\n    [class]=\"config()?.style?.wrapperClasses ?? ''\"\n    [style]=\"config()?.style?.wrapperStyles ?? ''\"\n    [style.max-height]=\"config()?.style?.mobileConfig?.customHeight ?? ''\"\n    [style.transform]=\"modalTransform()\"\n    [style.transition]=\"isAnimated() && !isSwipingVertically() ? 'transform 300ms ease-in-out' : ''\" \n    [ngClass]=\"{\n        'opened-bottom-sheet-modal': isAnimated()\n    }\" \n    #elementRef\n    class=\"bottom-sheet-modal-style\">\n    \n    <div #verticalSwipeTarget \n         class=\"touch-hitbox bottom-sheet-modal-top-bar\"\n         (click)=\"isTrackingSwipe ? null : close.emit('cancel')\">\n        <div class=\"swipe-line\"></div>\n    </div>\n\n    <div class=\"bottom-sheet-modal-inner-content-container\">\n        <div class=\"bottom-sheet-modal-top-group\">\n            @if (headerTemplate()) {\n                <div class=\"bottom-sheet-modal-header\">\n                    <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n                </div>\n            }\n\n            <div class=\"bottom-sheet-modal-main-content-container\"\n                [style.animationDuration]=\"isAnimated() ? animationDuration() + 'ms' : '0ms'\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n\n        @if (footerTemplate()) {\n            <div class=\"bottom-sheet-modal-footer\">\n                <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n            </div>\n        }\n    </div>\n</div>", styles: [".bottom-sheet-modal-style{position:fixed;z-index:3;min-height:60vh;min-height:60dvh;max-height:98vh;max-height:98dvh;width:100vw;width:100dvw;min-width:100vw;max-width:100dvw;bottom:0;left:0;margin:0 auto;border-radius:30px 30px 0 0;background-color:var(--modal-bg, #ffffff);color:var(--modal-text, #000000);display:flex;flex-direction:column}.touch-hitbox{display:flex;flex-direction:row;width:100%;height:3.5rem;justify-content:center;align-items:center;padding-bottom:.5rem;margin-top:-1.5rem;flex-shrink:0}.swipe-line{width:7rem;height:.33rem;background-color:var(--modal-mobile-swipe-line-color, #000000);border-radius:200rem;margin-top:1.5rem;opacity:.215;cursor:pointer}.bottom-sheet-modal-inner-content-container{display:flex;flex-direction:column;flex:1;min-height:0;padding:0 1.25rem 1.75rem;gap:1.5rem;box-sizing:border-box;overflow:hidden}.bottom-sheet-modal-top-group{display:flex;flex-direction:column;gap:1rem;flex-grow:1;min-height:0}.bottom-sheet-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;padding:0}.opened-bottom-sheet-modal{animation:opened-bottom-sheet-modal-anim .35s}.bottom-sheet-modal-top-bar{display:flex;justify-content:center}.bottom-sheet-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:flex-start;padding-top:.5rem;gap:.5rem}.bottom-sheet-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:center;gap:.5rem}@-moz-keyframes opened-bottom-sheet-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes opened-bottom-sheet-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes opened-bottom-sheet-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalBottomSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: ModalBottomSheet, isStandalone: true, selector: "app-modal-bottom-sheet", inputs: { id: { classPropertyName: "id", publicName: "id", 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 }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null }, isAnimated: { classPropertyName: "isAnimated", publicName: "isAnimated", isSignal: true, isRequired: true, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "verticalSwipeTarget", first: true, predicate: ["verticalSwipeTarget"], descendants: true, static: true }, { propertyName: "elementRef", first: true, predicate: ["elementRef"], descendants: true, static: true }], ngImport: i0, template: "<div (click)=\"$event.stopPropagation()\" \n    [id]=\"id() ?? ''\"\n    [class]=\"config()?.style?.wrapperClasses ?? ''\"\n    [style]=\"config()?.style?.wrapperStyles ?? ''\"\n    [style.max-height]=\"config()?.style?.mobileConfig?.customHeight ?? ''\"\n    [style.transform]=\"modalTransform()\"\n    [style.transition]=\"isAnimated() && !isSwipingVertically() ? 'transform 300ms ease-in-out' : ''\" \n    [ngClass]=\"{\n        'opened-bottom-sheet-modal': isAnimated()\n    }\" \n    #elementRef\n    class=\"bottom-sheet-modal-style\">\n    \n    <div #verticalSwipeTarget \n         class=\"touch-hitbox bottom-sheet-modal-top-bar\"\n         (click)=\"isTrackingSwipe ? null : close.emit('cancel')\">\n        <div class=\"swipe-line\"></div>\n    </div>\n\n    <div class=\"bottom-sheet-modal-inner-content-container\">\n        <div class=\"bottom-sheet-modal-top-group\">\n            @if (headerTemplate()) {\n                <div class=\"bottom-sheet-modal-header\">\n                    <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n                </div>\n            }\n\n            <div class=\"bottom-sheet-modal-main-content-container\"\n                [style.animationDuration]=\"isAnimated() ? animationDuration() + 'ms' : '0ms'\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n\n        @if (footerTemplate()) {\n            <div class=\"bottom-sheet-modal-footer\">\n                <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n            </div>\n        }\n    </div>\n</div>", styles: [".bottom-sheet-modal-style{position:fixed;z-index:3;min-height:60vh;min-height:60dvh;max-height:98vh;max-height:98dvh;width:100vw;width:100dvw;min-width:100vw;max-width:100dvw;bottom:0;left:0;margin:0 auto;border-radius:30px 30px 0 0;background-color:var(--modal-bg, #ffffff);color:var(--modal-text, #000000);display:flex;flex-direction:column}.touch-hitbox{display:flex;flex-direction:row;width:100%;height:3.5rem;justify-content:center;align-items:center;padding-bottom:.5rem;margin-top:-1.5rem;flex-shrink:0}.swipe-line{width:7rem;height:.33rem;background-color:var(--modal-mobile-swipe-line-color, #000000);border-radius:200rem;margin-top:1.5rem;opacity:.215;cursor:pointer}.bottom-sheet-modal-inner-content-container{display:flex;flex-direction:column;flex:1;min-height:0;padding:0 1.25rem 1.75rem;gap:1.5rem;box-sizing:border-box;overflow:hidden}.bottom-sheet-modal-top-group{display:flex;flex-direction:column;gap:1rem;flex-grow:1;min-height:0}.bottom-sheet-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;padding:0}.opened-bottom-sheet-modal{animation:opened-bottom-sheet-modal-anim .35s}.bottom-sheet-modal-top-bar{display:flex;justify-content:center}.bottom-sheet-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:flex-start;padding-top:.5rem;gap:.5rem}.bottom-sheet-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:center;gap:.5rem}@-moz-keyframes opened-bottom-sheet-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes opened-bottom-sheet-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes opened-bottom-sheet-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalBottomSheet, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalBottomSheet, decorators: [{
             type: Component,
-            args: [{ selector: 'modal-bottom-sheet', imports: [
-                        NgClass,
-                        NgTemplateOutlet
-                    ], template: "<div (click)=\"$event.stopPropagation()\" \n    [id]=\"id() ?? ''\"\n    [class]=\"config()?.style?.wrapperClasses ?? ''\"\n    [style]=\"config()?.style?.wrapperStyles ?? ''\"\n    [style.max-height]=\"config()?.style?.mobileConfig?.customHeight ?? ''\"\n    [style.transform]=\"modalTransform()\"\n    [style.transition]=\"isAnimated() && !isSwipingVertically() ? 'transform 300ms ease-in-out' : ''\" \n    [ngClass]=\"{\n        'opened-bottom-sheet-modal': isAnimated()\n    }\" \n    #elementRef\n    class=\"bottom-sheet-modal-style\">\n    \n    <div #verticalSwipeTarget \n         class=\"touch-hitbox bottom-sheet-modal-top-bar\"\n         (click)=\"isTrackingSwipe ? null : close.emit('cancel')\">\n        <div class=\"swipe-line\"></div>\n    </div>\n\n    <div class=\"bottom-sheet-modal-inner-content-container\">\n        <div class=\"bottom-sheet-modal-top-group\">\n            @if (headerTemplate()) {\n                <div class=\"bottom-sheet-modal-header\">\n                    <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n                </div>\n            }\n\n            <div class=\"bottom-sheet-modal-main-content-container\"\n                [style.animationDuration]=\"isAnimated() ? animationDuration() + 'ms' : '0ms'\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n\n        @if (footerTemplate()) {\n            <div class=\"bottom-sheet-modal-footer\">\n                <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n            </div>\n        }\n    </div>\n</div>", styles: [".bottom-sheet-modal-style{position:fixed;z-index:3;min-height:60vh;min-height:60dvh;max-height:98vh;max-height:98dvh;width:100vw;width:100dvw;min-width:100vw;max-width:100dvw;bottom:0;left:0;margin:0 auto;border-radius:30px 30px 0 0;background-color:var(--modal-bg, #ffffff);color:var(--modal-text, #000000);display:flex;flex-direction:column}.touch-hitbox{display:flex;flex-direction:row;width:100%;height:3.5rem;justify-content:center;align-items:center;padding-bottom:.5rem;margin-top:-1.5rem;flex-shrink:0}.swipe-line{width:7rem;height:.33rem;background-color:var(--modal-mobile-swipe-line-color, #000000);border-radius:200rem;margin-top:1.5rem;opacity:.215;cursor:pointer}.bottom-sheet-modal-inner-content-container{display:flex;flex-direction:column;flex:1;min-height:0;padding:0 1.25rem 1.75rem;gap:1.5rem;box-sizing:border-box;overflow:hidden}.bottom-sheet-modal-top-group{display:flex;flex-direction:column;gap:1rem;flex-grow:1;min-height:0}.bottom-sheet-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;padding:0}.opened-bottom-sheet-modal{animation:opened-bottom-sheet-modal-anim .35s}.bottom-sheet-modal-top-bar{display:flex;justify-content:center}.bottom-sheet-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:flex-start;padding-top:.5rem;gap:.5rem}.bottom-sheet-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:center;gap:.5rem}@-moz-keyframes opened-bottom-sheet-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes opened-bottom-sheet-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes opened-bottom-sheet-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}\n"] }]
+            args: [{ selector: 'app-modal-bottom-sheet', imports: [NgClass, NgTemplateOutlet], template: "<div (click)=\"$event.stopPropagation()\" \n    [id]=\"id() ?? ''\"\n    [class]=\"config()?.style?.wrapperClasses ?? ''\"\n    [style]=\"config()?.style?.wrapperStyles ?? ''\"\n    [style.max-height]=\"config()?.style?.mobileConfig?.customHeight ?? ''\"\n    [style.transform]=\"modalTransform()\"\n    [style.transition]=\"isAnimated() && !isSwipingVertically() ? 'transform 300ms ease-in-out' : ''\" \n    [ngClass]=\"{\n        'opened-bottom-sheet-modal': isAnimated()\n    }\" \n    #elementRef\n    class=\"bottom-sheet-modal-style\">\n    \n    <div #verticalSwipeTarget \n         class=\"touch-hitbox bottom-sheet-modal-top-bar\"\n         (click)=\"isTrackingSwipe ? null : close.emit('cancel')\">\n        <div class=\"swipe-line\"></div>\n    </div>\n\n    <div class=\"bottom-sheet-modal-inner-content-container\">\n        <div class=\"bottom-sheet-modal-top-group\">\n            @if (headerTemplate()) {\n                <div class=\"bottom-sheet-modal-header\">\n                    <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n                </div>\n            }\n\n            <div class=\"bottom-sheet-modal-main-content-container\"\n                [style.animationDuration]=\"isAnimated() ? animationDuration() + 'ms' : '0ms'\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n\n        @if (footerTemplate()) {\n            <div class=\"bottom-sheet-modal-footer\">\n                <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n            </div>\n        }\n    </div>\n</div>", styles: [".bottom-sheet-modal-style{position:fixed;z-index:3;min-height:60vh;min-height:60dvh;max-height:98vh;max-height:98dvh;width:100vw;width:100dvw;min-width:100vw;max-width:100dvw;bottom:0;left:0;margin:0 auto;border-radius:30px 30px 0 0;background-color:var(--modal-bg, #ffffff);color:var(--modal-text, #000000);display:flex;flex-direction:column}.touch-hitbox{display:flex;flex-direction:row;width:100%;height:3.5rem;justify-content:center;align-items:center;padding-bottom:.5rem;margin-top:-1.5rem;flex-shrink:0}.swipe-line{width:7rem;height:.33rem;background-color:var(--modal-mobile-swipe-line-color, #000000);border-radius:200rem;margin-top:1.5rem;opacity:.215;cursor:pointer}.bottom-sheet-modal-inner-content-container{display:flex;flex-direction:column;flex:1;min-height:0;padding:0 1.25rem 1.75rem;gap:1.5rem;box-sizing:border-box;overflow:hidden}.bottom-sheet-modal-top-group{display:flex;flex-direction:column;gap:1rem;flex-grow:1;min-height:0}.bottom-sheet-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;padding:0}.opened-bottom-sheet-modal{animation:opened-bottom-sheet-modal-anim .35s}.bottom-sheet-modal-top-bar{display:flex;justify-content:center}.bottom-sheet-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:flex-start;padding-top:.5rem;gap:.5rem}.bottom-sheet-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:center;gap:.5rem}@-moz-keyframes opened-bottom-sheet-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes opened-bottom-sheet-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes opened-bottom-sheet-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}\n"] }]
         }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", 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 }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: true }] }], isAnimated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAnimated", required: true }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: true }] }], close: [{ type: i0.Output, args: ["close"] }], verticalSwipeTarget: [{
                 type: ViewChild,
-                args: ["verticalSwipeTarget", { static: true }]
+                args: ['verticalSwipeTarget', { static: true }]
             }], elementRef: [{
                 type: ViewChild,
-                args: ["elementRef", { static: true }]
+                args: ['elementRef', { static: true }]
             }] } });
 
 class ModalCentered {
@@ -549,21 +539,15 @@ class ModalCentered {
             '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(),
+            '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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalCentered, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: ModalCentered, isStandalone: true, selector: "app-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                    <app-modal-banner [config]=\"config()\" (close)=\"close.emit('cancel')\"></app-modal-banner>\n                    }\n                    @if (headerTemplate()) {\n                    <div class=\"centered-modal-header\">\n                        <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n                        @if(!hasBanner()) {\n                        <app-modal-default-close-button [config]=\"config()\"\n                            (close)=\"close.emit('cancel')\"></app-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<app-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</app-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: "app-modal-bottom-sheet", inputs: ["id", "headerTemplate", "footerTemplate", "config", "isOpen", "isAnimated", "animationDuration"], outputs: ["close"] }, { kind: "component", type: ModalBanner, selector: "app-modal-banner", inputs: ["config"], outputs: ["close"] }, { kind: "component", type: ModalDefaultCloseButton, selector: "app-modal-default-close-button", inputs: ["config"], outputs: ["close"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalCentered, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", 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"] }]
+            args: [{ selector: 'app-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                    <app-modal-banner [config]=\"config()\" (close)=\"close.emit('cancel')\"></app-modal-banner>\n                    }\n                    @if (headerTemplate()) {\n                    <div class=\"centered-modal-header\">\n                        <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n                        @if(!hasBanner()) {\n                        <app-modal-default-close-button [config]=\"config()\"\n                            (close)=\"close.emit('cancel')\"></app-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<app-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</app-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]
@@ -583,7 +567,6 @@ class ModalSide {
     hasBanner = input.required(...(ngDevMode ? [{ debugName: "hasBanner" }] : []));
     close = output();
     bottomSheet;
-    renderOpenClass = signal(false, ...(ngDevMode ? [{ debugName: "renderOpenClass" }] : []));
     modalClasses = computed(() => {
         const positionLeft = this.layout() === 'left';
         const positionRight = this.layout() === 'right';
@@ -593,12 +576,13 @@ class ModalSide {
             'side-modal-content-wrapper': true,
             'side-modal-default-style': this.hasDefaultContentWrapperClass() || this.hasBanner(),
             'with-footer': this.footerTemplate() !== null,
-            'left': positionLeft,
-            'right': positionRight,
+            left: positionLeft,
+            right: positionRight,
             'side-modal-animate-in': shouldAnimate ? isRenderedOpen : true,
-            'side-modal-animate-out': shouldAnimate ? !isRenderedOpen : false,
+            'side-modal-animate-out': shouldAnimate ? !isRenderedOpen : false
         };
     }, ...(ngDevMode ? [{ debugName: "modalClasses" }] : []));
+    renderOpenClass = signal(false, ...(ngDevMode ? [{ debugName: "renderOpenClass" }] : []));
     constructor() {
         effect(() => {
             const isOpen = this.isOpen();
@@ -613,18 +597,12 @@ 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, 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalSide, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: ModalSide, isStandalone: true, selector: "app-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        <app-modal-banner [config]=\"config()\" (close)=\"close.emit('cancel')\"></app-modal-banner>\n        }\n        @if (headerTemplate()) {\n        <div class=\"side-modal-header\">\n            <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n            @if(!hasBanner()) {\n            <app-modal-default-close-button [config]=\"config()\"\n                (close)=\"close.emit('cancel')\"></app-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<app-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</app-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: "app-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: "app-modal-banner", inputs: ["config"], outputs: ["close"] }, { kind: "component", type: ModalDefaultCloseButton, selector: "app-modal-default-close-button", inputs: ["config"], outputs: ["close"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalSide, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalSide, decorators: [{
             type: Component,
-            args: [{ selector: 'modal-side', imports: [
-                        NgTemplateOutlet,
-                        ModalBottomSheet,
-                        NgClass,
-                        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"] }]
+            args: [{ selector: 'app-modal-side', imports: [NgTemplateOutlet, ModalBottomSheet, NgClass, 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        <app-modal-banner [config]=\"config()\" (close)=\"close.emit('cancel')\"></app-modal-banner>\n        }\n        @if (headerTemplate()) {\n        <div class=\"side-modal-header\">\n            <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n            @if(!hasBanner()) {\n            <app-modal-default-close-button [config]=\"config()\"\n                (close)=\"close.emit('cancel')\"></app-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<app-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</app-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]
@@ -636,11 +614,6 @@ const MODAL_DEFAULT_ANIM_DURATION_MULTIPLIER_SMALL = 0.65;
 const MODAL_DEFAULT_ANIM_DURATION_MULTIPLIER_LARGE = 0.85;
 
 class ModalCore {
-    modalService = inject(ModalService);
-    windowDimensionsService = inject(WindowDimensionsService);
-    scrollLockService = inject(ScrollLockService);
-    afterClose = output();
-    animationDuration = MODAL_DEFAULT_ANIM_DURATION;
     componentRef = {};
     config;
     closeFunction;
@@ -650,28 +623,26 @@ class ModalCore {
     effectiveLayout = signal('center', ...(ngDevMode ? [{ debugName: "effectiveLayout" }] : []));
     isCentered = signal(false, ...(ngDevMode ? [{ debugName: "isCentered" }] : []));
     isSide = signal(false, ...(ngDevMode ? [{ debugName: "isSide" }] : []));
+    isAnimated = false;
+    animationDuration = MODAL_DEFAULT_ANIM_DURATION;
     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 = [];
+    modalService = inject(ModalService);
+    scrollLockService = inject(ScrollLockService);
+    windowDimensionsService = inject(WindowDimensionsService);
     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;
+    isConfirmCloseModalOpen = false;
+    scrollLockId = uuidv4();
+    _sortedBreakpoints = [];
+    _currentVcr = null;
     constructor() {
         this.initKeyboardSubscription();
         effect(() => {
@@ -685,7 +656,7 @@ class ModalCore {
         this.scrollLockService.disableScroll(this.scrollLockId, {
             animationDuration: this.animationDuration,
             handleTouchInput: true,
-            mobileOnlyTouchPrevention: true,
+            mobileOnlyTouchPrevention: true
         });
     }
     ngAfterViewInit() {
@@ -700,63 +671,27 @@ class ModalCore {
         this.dynamicContainer?.clear();
         this.scrollLockService.enableScroll(this.scrollLockId);
     }
-    //#region Subscription Methods
-    initKeyboardSubscription() {
-        fromEvent(document, "keydown")
-            .pipe(filter((event) => event.key === "Escape"), takeUntilDestroyed())
-            .subscribe(() => {
-            if (!this.isConfirmCloseModalOpen) {
-                this.close("cancel", undefined, true);
-            }
-        });
-    }
-    //#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;
-    }
-    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);
-        }
-    }
-    //#endregion
     //#region Public Template Methods
     setHeaderTemplate(template) {
         this.headerTemplate.set(template);
     }
+    //#endregion
     setFooterTemplate(template) {
         this.footerTemplate.set(template);
     }
-    //#endregion
     //#region Closing Methods
-    close(state = "cancel", result = undefined, fromInsideInteraction = false, forceClose = false) {
+    close(state = 'cancel', result = undefined, fromInsideInteraction = false, forceClose = false) {
         if (forceClose) {
             this.handleClose(state, result);
             return;
         }
-        if ((this.config?.disableClose === true) && fromInsideInteraction) {
+        if (this.config?.disableClose === true && fromInsideInteraction) {
             return;
         }
-        const shouldCheckCloseGuard = this.config?.closeGuardOnlyOnCancel !== true || state !== "confirm";
+        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);
+            const canClose$ = guardResult instanceof Observable ? guardResult : guardResult instanceof Promise ? from(guardResult) : of(guardResult);
             if (this.isBottomSheetModalActive()) {
                 this.resetBottomSheetModalLayout();
             }
@@ -769,17 +704,7 @@ class ModalCore {
         }
         this.handleClose(state, result);
     }
-    async handleClose(state, result) {
-        this.isOpen.set(false);
-        this.setBottomSheetModalFinishedState(true);
-        const returnResult = {
-            data: result,
-            state: state,
-        };
-        if (this.closeFunction) {
-            this.closeFunction(returnResult);
-        }
-    }
+    //#endregion
     onBackdropClick(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -788,7 +713,59 @@ class ModalCore {
         }
         this.backdropClickSubject.next(event);
         if (this.config?.style?.hasBackdrop && this.config?.disableCloseOnBackdropClick !== true) {
-            this.close("cancel", undefined, true);
+            this.close('cancel', undefined, true);
+        }
+    }
+    set dynamicContainer(vcr) {
+        if (vcr && this.componentRef) {
+            this._currentVcr = vcr;
+            vcr.insert(this.componentRef.hostView);
+        }
+    }
+    //#region Subscription Methods
+    initKeyboardSubscription() {
+        fromEvent(document, 'keydown')
+            .pipe(filter((event) => event.key === 'Escape'), takeUntilDestroyed())
+            .subscribe(() => {
+            if (!this.isConfirmCloseModalOpen) {
+                this.close('cancel', undefined, true);
+            }
+        });
+    }
+    //#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;
+    }
+    initBreakpointCache() {
+        // eslint-disable-next-line no-debugger
+        debugger;
+        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] ?? this.config?.style.layout ?? 'center'
+            }))
+                .sort((a, b) => a.width - b.width);
+        }
+    }
+    async handleClose(state, result) {
+        this.isOpen.set(false);
+        this.setBottomSheetModalFinishedState(true);
+        const returnResult = {
+            data: result,
+            state: state
+        };
+        if (this.closeFunction) {
+            this.closeFunction(returnResult);
         }
     }
     //#endregion
@@ -825,8 +802,7 @@ class ModalCore {
         }
     }
     getBottomSheetModal() {
-        return this.sideModalComponents?.first?.bottomSheet?.first
-            ?? this.centeredModalComponents?.first?.bottomSheet?.first;
+        return this.sideModalComponents?.first?.bottomSheet?.first ?? this.centeredModalComponents?.first?.bottomSheet?.first;
     }
     resetBottomSheetModalLayout() {
         const bottomSheet = this.getBottomSheetModal();
@@ -841,32 +817,27 @@ class ModalCore {
         }
         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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalCore, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: ModalCore, isStandalone: true, selector: "app-modal", viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "dynamicContainer", first: true, predicate: ["dynamicContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "sideModalComponents", predicate: ModalSide, descendants: true }, { propertyName: "centeredModalComponents", predicate: ModalCentered, descendants: true }], ngImport: i0, template: "@if (config?.style?.hasBackdrop && (isSide() || isBottomSheetModalActive())) {\n<app-modal-backdrop [isAnimated]=\"isAnimated\" [isOpen]=\"isOpen()\" (click)=\"onBackdropClick($event)\">\n</app-modal-backdrop>\n}\n\n<ng-container #modalContainer>\n    @switch (true) {\n    @case (isSide()) {\n    <app-modal-side [layout]=\"effectiveLayout()\" [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\"\n        [config]=\"config\" [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated\"\n        [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" [animationDuration]=\"animationDuration\"\n        [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\">\n        <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n    </app-modal-side>\n    }\n    @case (isCentered()) {\n    <app-modal-centered [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\" [config]=\"config\"\n        [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated\"\n        [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" [animationDuration]=\"animationDuration\"\n        [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\"\n        (onBackdropClick)=\"onBackdropClick($event)\">\n        <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n    </app-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: "app-modal-centered", inputs: ["headerTemplate", "footerTemplate", "config", "id", "isOpen", "isAnimated", "isBottomSheetModalActive", "animationDuration", "hasDefaultContentWrapperClass", "hasBanner"], outputs: ["close", "onBackdropClick"] }, { kind: "component", type: ModalSide, selector: "app-modal-side", inputs: ["layout", "headerTemplate", "footerTemplate", "config", "id", "isOpen", "isAnimated", "isBottomSheetModalActive", "animationDuration", "hasDefaultContentWrapperClass", "hasBanner"], outputs: ["close"] }, { kind: "component", type: ModalBackdrop, selector: "app-modal-backdrop", inputs: ["isAnimated", "isOpen"], outputs: ["click"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalCore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", 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: [{
+            args: [{ selector: 'app-modal', imports: [NgTemplateOutlet, ModalCentered, ModalSide, ModalBackdrop], template: "@if (config?.style?.hasBackdrop && (isSide() || isBottomSheetModalActive())) {\n<app-modal-backdrop [isAnimated]=\"isAnimated\" [isOpen]=\"isOpen()\" (click)=\"onBackdropClick($event)\">\n</app-modal-backdrop>\n}\n\n<ng-container #modalContainer>\n    @switch (true) {\n    @case (isSide()) {\n    <app-modal-side [layout]=\"effectiveLayout()\" [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\"\n        [config]=\"config\" [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated\"\n        [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" [animationDuration]=\"animationDuration\"\n        [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\">\n        <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n    </app-modal-side>\n    }\n    @case (isCentered()) {\n    <app-modal-centered [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\" [config]=\"config\"\n        [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated\"\n        [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" [animationDuration]=\"animationDuration\"\n        [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\"\n        (onBackdropClick)=\"onBackdropClick($event)\">\n        <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n    </app-modal-centered>\n    }\n    }\n</ng-container>\n\n<ng-template #contentTemplate>\n    <ng-container #dynamicContainer></ng-container>\n</ng-template>" }]
+        }], ctorParameters: () => [], propDecorators: { modalContainer: [{
                 type: ViewChild,
-                args: ["modalContainer", { static: false }]
+                args: ['modalContainer', { static: false }]
             }], contentTemplate: [{
                 type: ViewChild,
-                args: ["contentTemplate"]
+                args: ['contentTemplate']
             }], sideModalComponents: [{
                 type: ViewChildren,
                 args: [ModalSide]
             }], centeredModalComponents: [{
                 type: ViewChildren,
                 args: [ModalCentered]
+            }], dynamicContainer: [{
+                type: ViewChild,
+                args: ['dynamicContainer', { read: ViewContainerRef }]
             }] } });
 
 class Modal {
@@ -880,19 +851,19 @@ class Modal {
     modal;
     /**
      * Called when the modal is initialized.
-    */
+     */
     onModalInit() { }
     /**
      * Closes the modal (with "cancel" reason) with an optional result.
      * @param result The result to be passed when closing the modal.
-    */
+     */
     close(result) {
         this.modal?.close('cancel', result);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: Modal });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: Modal });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: Modal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: Modal, decorators: [{
             type: Injectable
         }] });
 
@@ -915,13 +886,13 @@ class ModalHeaderDirective {
             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 });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ModalHeaderDirective, isStandalone: true, selector: "[modalHeader]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.4", type: ModalHeaderDirective, isStandalone: true, selector: "[appModalHeader]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalHeaderDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[modalHeader]',
+                    selector: '[appModalHeader]',
                     standalone: true
                 }]
         }], ctorParameters: () => [] });
@@ -937,13 +908,13 @@ class ModalFooterDirective {
             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 });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: ModalFooterDirective, isStandalone: true, selector: "[modalFooter]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.4", type: ModalFooterDirective, isStandalone: true, selector: "[appModalFooter]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalFooterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalFooterDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[modalFooter]',
+                    selector: '[appModalFooter]',
                     standalone: true
                 }]
         }], ctorParameters: () => [] });
@@ -969,7 +940,7 @@ class ModalConfirmCloseGuard extends ModalCloseGuard {
     }
     canClose(modalService) {
         const ref = modalService.open(this.component, this.config);
-        return ref.afterClosed().pipe(map(result => result.state === 'confirm'));
+        return ref.afterClosed().pipe(map((result) => result.state === 'confirm'));
     }
 }