@filip.mazev/modal 0.0.1

package/fesm2022/filip.mazev-modal.mjs

@@ -0,0 +1,932 @@
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, Injectable, InjectionToken, Injector, input, output, Component, ViewChild, ViewChildren, effect, ChangeDetectorRef, ViewContainerRef } from '@angular/core';
+import { BehaviorSubject, Subject, takeUntil, filter, map, take, fromEvent } from 'rxjs';
+import { Router, NavigationEnd } from '@angular/router';
+import { uuidv4, WindowDimensionsService, ScrollLockService, DeviceTypeService } from 'common-parts';
+
+const EMPTY_STRING = '';
+
+var GenericModalWarnings;
+(function (GenericModalWarnings) {
+    //#region Multi-level modals
+    GenericModalWarnings["NO_PARENT_PROVIDED"] = "No parent modal provided for multilevel modal. Please provide a parent modal or set openAsMultilevel to false.";
+    GenericModalWarnings["MULTILEVEL_INLINE_NOT_SUPPORTED"] = "As of this version, opening a multi-level modal from inline HTML is not possible. Please set openAsMultilevel to false or open your modal through the GenericModalService! Opening modal as normal modal.";
+    GenericModalWarnings["MULTILEVEL_NO_PARENT"] = "Cannot open a multilevel modal with only one modal open. Please open another modal before opening a multilevel modal or set openAsMultilevel to false.";
+    GenericModalWarnings["PARENT_MODAL_NOT_SET"] = "Error setting parent modal. Opening modal as normal modal";
+    //#endregion
+    //#region Confirm close
+    GenericModalWarnings["CONFIRM_MODAL_NESTING_NOT_SUPPORTED"] = "Cannot open a confirm modal from within a confirm modal. If you want to allow this behaviour, set bypassSelfCheck to true in the confirmCloseConfig.";
+    //#endregion
+})(GenericModalWarnings || (GenericModalWarnings = {}));
+
+class GenericModalStyleConfig {
+    position;
+    handleMobile;
+    animate;
+    hasBackdrop;
+    closeDelay;
+    showCloseButton;
+    mobileConfig;
+    contentWrapper;
+    wrapperClasses;
+    wrapperStyles;
+    overrideFullHeight;
+    constructor(config) {
+        this.position = config?.position ?? "center";
+        this.handleMobile = config?.handleMobile ?? true;
+        this.animate = config?.animate ?? true;
+        this.hasBackdrop = config?.hasBackdrop ?? true;
+        this.closeDelay = config?.closeDelay;
+        this.showCloseButton = config?.showCloseButton ?? true;
+        this.mobileConfig = config?.mobileConfig ?? {};
+        this.contentWrapper = config?.contentWrapper ?? true;
+        this.wrapperClasses = config?.wrapperClasses ?? EMPTY_STRING;
+        this.wrapperStyles = config?.wrapperStyles ?? EMPTY_STRING;
+        this.overrideFullHeight = config?.overrideFullHeight ?? false;
+    }
+}
+
+class GenericModalConfig {
+    open;
+    afterClose;
+    confirmCloseConfig;
+    disableClose;
+    disableCloseOnBackdropClick;
+    disableCloseOnNavigation;
+    enableExtremeOverflowHandling;
+    webkitOnlyOverflowMobileHandling;
+    closeOnSwipeBack;
+    data;
+    style;
+    bannerText;
+    bannerTextAnnotatedString;
+    bannerIcons;
+    contentClasses;
+    contentStyles;
+    disableConsoleWarnings;
+    disableConsoleInfo;
+    id;
+    constructor(config) {
+        this.open = config?.open ?? true;
+        this.afterClose = config?.afterClose;
+        this.confirmCloseConfig = config?.confirmCloseConfig;
+        this.disableClose = config?.disableClose ?? false;
+        this.disableCloseOnBackdropClick = config?.disableCloseOnBackdropClick ?? false;
+        this.disableCloseOnNavigation = config?.disableCloseOnNavigation ?? false;
+        this.enableExtremeOverflowHandling = config?.enableExtremeOverflowHandling ?? false;
+        this.webkitOnlyOverflowMobileHandling = config?.webkitOnlyOverflowMobileHandling ?? true;
+        this.closeOnSwipeBack = config?.closeOnSwipeBack ?? false;
+        this.data = config?.data ?? null;
+        this.style = new GenericModalStyleConfig(config?.style);
+        this.bannerText = config?.bannerText ?? EMPTY_STRING;
+        this.bannerTextAnnotatedString = config?.bannerTextAnnotatedString ?? EMPTY_STRING;
+        this.bannerIcons = config?.bannerIcons ?? [];
+        this.contentClasses = config?.contentClasses ?? EMPTY_STRING;
+        this.contentStyles = config?.contentStyles ?? EMPTY_STRING;
+        this.disableConsoleWarnings = config?.disableConsoleWarnings ?? false;
+        this.disableConsoleInfo = config?.disableConsoleInfo ?? false;
+        this.id = config?.id ?? uuidv4();
+    }
+}
+
+var GenericModalState;
+(function (GenericModalState) {
+    GenericModalState["OPEN"] = "open";
+    GenericModalState["OPENING"] = "opening";
+    GenericModalState["CLOSED"] = "closed";
+    GenericModalState["CLOSING"] = "closing";
+})(GenericModalState || (GenericModalState = {}));
+
+class GenericModalRef {
+    modalService;
+    //#region Modal Container
+    _modalContainer = {};
+    set modalContainer(modalContainer) {
+        this._modalContainer = modalContainer;
+    }
+    get modalContainer() {
+        return this._modalContainer;
+    }
+    _modalContainerRef = {};
+    set modalContainerRef(modalContainerRef) {
+        this._modalContainerRef = modalContainerRef;
+    }
+    get modalContainerRef() {
+        return this._modalContainerRef;
+    }
+    _modalContainerElement = {};
+    set modalContainerElement(modalContainerElement) {
+        this._modalContainerElement = modalContainerElement;
+    }
+    get modalContainerElement() {
+        return this._modalContainerElement;
+    }
+    _parentElement = undefined;
+    set parentElement(parentElement) {
+        this._parentElement = parentElement;
+    }
+    get parentElement() {
+        return this._parentElement;
+    }
+    //#endregion
+    //#region Component
+    _componentRef = {};
+    set componentRef(componentRef) {
+        this._componentRef = componentRef;
+    }
+    get componentRef() {
+        return this._componentRef;
+    }
+    //#endregion
+    //#region Self
+    _modalState = GenericModalState.CLOSED;
+    modalState = new BehaviorSubject(this.getStatus());
+    modalState$() {
+        return this.modalState.asObservable();
+    }
+    getStatus() {
+        return this._modalState;
+    }
+    _selfIdentifier = {};
+    set selfIdentifier(selfIdentifier) {
+        this._selfIdentifier = selfIdentifier;
+    }
+    get selfIdentifier() {
+        return this._selfIdentifier;
+    }
+    _modalConfig = undefined;
+    set modalConfig(modalConfig) {
+        this._modalConfig = modalConfig;
+    }
+    get modalConfig() {
+        return this._modalConfig;
+    }
+    //#endregion
+    //#region Observables
+    backdropClickSubject = new Subject();
+    backdropClick() {
+        return this.backdropClickSubject.asObservable();
+    }
+    backdropClicked(event) {
+        this.backdropClickSubject.next(event);
+    }
+    afterCloseSubject = new Subject();
+    afterClosed() {
+        return this.afterCloseSubject.asObservable();
+    }
+    afterClose(result) {
+        this.afterCloseSubject.next(result);
+    }
+    //#endregion
+    constructor(componentRef, selfIdentifier, modalContainerRef, modalService, modalConfig) {
+        this.modalService = modalService;
+        this.modalConfig = modalConfig;
+        this.modalContainerRef = modalContainerRef;
+        this.modalContainerElement = modalContainerRef.location.nativeElement;
+        this.componentRef = componentRef;
+        this.selfIdentifier = selfIdentifier;
+    }
+    //#region Public Methods
+    async open() {
+        this._modalState = GenericModalState.OPENING;
+        this.modalState.next(GenericModalState.OPENING);
+        this.modalContainerRef.instance.componentRef = this._componentRef;
+        const config = new GenericModalConfig(this.modalConfig);
+        this.modalContainerRef.instance.config = config;
+        this.modalContainerRef.instance.closeFunction = this.handleClose.bind(this);
+        this.parentElement?.appendChild(this.modalContainerElement);
+        this.modalContainerRef.instance.backdropClick.subscribe((event) => {
+            this.backdropClicked(event);
+        });
+        this._modalState = GenericModalState.OPEN;
+        this.modalState.next(GenericModalState.OPEN);
+    }
+    close(state = "cancel", result = undefined, forceClose = false) {
+        this.modalContainerRef.instance.close(state, result, false, forceClose);
+    }
+    //#endregion
+    //#region Private Methods
+    handleClose(result) {
+        this._modalState = GenericModalState.CLOSING;
+        this.modalState.next(GenericModalState.CLOSING);
+        setTimeout(() => {
+            if (this.modalConfig?.afterClose) {
+                this.modalConfig.afterClose();
+            }
+            this.modalContainerRef.destroy();
+            this._modalState = GenericModalState.CLOSED;
+            this.modalState.next(GenericModalState.CLOSED);
+            this.afterClose(result);
+            this.modalService?.close(this.selfIdentifier, true);
+        }, this.modalContainerRef.instance.animationDuration);
+    }
+}
+
+class GenericModal {
+    genericModalService = inject(GenericModalService);
+    modal;
+    modalGetSubscription$ = new Subject();
+    constructor() {
+        this.createModalSubscription();
+    }
+    ngOnDestroy() {
+        this.onDestroy();
+        this.unsubscribeModalGet();
+    }
+    createModalSubscription() {
+        this.modalGetSubscription$ = new Subject();
+        this.genericModalService
+            .getSubscribe(this.constructor)
+            .pipe(takeUntil(this.modalGetSubscription$))
+            .subscribe((modal) => {
+            if (modal instanceof GenericModalRef) {
+                this.modal = modal;
+                this.afterModalGet();
+                this.modalGetSubscription$.next();
+                this.modalGetSubscription$.complete();
+            }
+        });
+    }
+    unsubscribeModalGet() {
+        this.modalGetSubscription$.next();
+        this.modalGetSubscription$.complete();
+    }
+    close() {
+        this.modal?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GenericModal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GenericModal });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GenericModal, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+var GenericModalErrors;
+(function (GenericModalErrors) {
+    //#region General
+    GenericModalErrors["MODAL_DOESNT_MATCH_THE_REQUESTED_TYPES"] = "The modal doesn't match the requested types.";
+    //#endregion
+    //#region Multi-level modals
+    GenericModalErrors["PARENT_MODAL_CANT_BE_THE_SAME_AS_CHILD"] = "Parent modal cannot be the same as the child modal";
+    GenericModalErrors["PARENT_MODAL_NOT_FOUND"] = "Parent modal does not exist";
+    GenericModalErrors["PARENT_MODAL_NOT_PROVIDED"] = "No parent modal provided for multilevel modal";
+    //#endregion
+})(GenericModalErrors || (GenericModalErrors = {}));
+
+const GENERIC_MODAL_DATA = new InjectionToken("GENERIC_MODAL_DATA");
+
+class GenericModalService {
+    router = inject(Router);
+    injector = inject(Injector);
+    //#region Properties
+    modals = new Map();
+    modalsSubject = new BehaviorSubject(this.modals);
+    viewContainer;
+    renderer;
+    unsubscribe$ = new Subject();
+    //#endregion
+    constructor() {
+        this.createSubscriptions();
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+    //#region Private Methods
+    createSubscriptions() {
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd))
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe(() => {
+            if (this.modalsCount() > 0) {
+                this.closeAll(true);
+            }
+        });
+    }
+    //#endregion
+    //#region Public Methods
+    register(viewContainer, renderer) {
+        this.viewContainer = viewContainer;
+        this.renderer = renderer;
+    }
+    open(component, config) {
+        if (!this.viewContainer || !this.renderer) {
+            throw new Error("ViewContainer and Renderer not set, please set the view container in the constructor of app.module.ts (by calling register), before opening a modal");
+        }
+        const createInjector = Injector.create({
+            providers: [{ provide: GENERIC_MODAL_DATA, useValue: config?.data }],
+            parent: this.injector,
+        });
+        const modal = new GenericModalRef(this.viewContainer.createComponent(component, {
+            injector: createInjector,
+        }), component, this.viewContainer.createComponent((GenericModalComponent), {
+            injector: createInjector,
+        }), this, new GenericModalConfig(config));
+        const modalElement = modal.componentRef.location.nativeElement;
+        this.renderer.setStyle(modalElement, 'height', '97%');
+        this.renderer.setStyle(modalElement, 'width', '100%');
+        this.renderer.setStyle(modalElement, 'display', 'flex');
+        this.renderer.setStyle(modalElement, 'flex-grow', '1');
+        this.modals.set(modal.selfIdentifier, modal);
+        this.modalsSubject.next(this.modals);
+        modal.open();
+        return modal;
+    }
+    close(self, fromCloseFunction = false) {
+        if (this.modals.has(self)) {
+            if (fromCloseFunction !== true) {
+                const modal = this.modals.get(self);
+                if (modal && modal instanceof GenericModalRef) {
+                    modal.close();
+                }
+            }
+            this.modals.delete(self);
+            this.modalsSubject.next(this.modals);
+        }
+    }
+    closeAll(onNavigate = false) {
+        this.modals.forEach((modal) => {
+            if (modal instanceof GenericModalRef) {
+                if (modal.modalConfig?.disableCloseOnNavigation !== true || !onNavigate) {
+                    modal.close("cancel", undefined, true);
+                }
+            }
+        });
+        this.modals.clear();
+        this.modalsSubject.next(this.modals);
+    }
+    get(self) {
+        const modal = this.modals.get(self);
+        this.modalRequestedTypeCheck(modal);
+        return modal;
+    }
+    getSubscribe(self) {
+        return this.modalsSubject.asObservable().pipe(map((modals) => {
+            const modal = modals.get(self);
+            this.modalRequestedTypeCheck(modal);
+            return modal;
+        }));
+    }
+    modalsCount() {
+        return this.modals.size;
+    }
+    find(self) {
+        return this.modals.has(self);
+    }
+    //#endregion
+    //#region Helper Methods
+    modalRequestedTypeCheck(modal) {
+        if (modal) {
+            if (modal instanceof GenericModalRef) {
+                if (!(modal.componentRef.instance instanceof GenericModal)) {
+                    throw new Error(GenericModalErrors.MODAL_DOESNT_MATCH_THE_REQUESTED_TYPES);
+                }
+            }
+            else if (!(modal instanceof GenericModalComponent)) {
+                throw new Error(GenericModalErrors.MODAL_DOESNT_MATCH_THE_REQUESTED_TYPES);
+            }
+        }
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GenericModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GenericModalService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GenericModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [] });
+
+class ModalBackdrop {
+    isAnimated = input(false);
+    isOpen = input(false);
+    click = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ModalBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", 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:absolute;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: "19.2.18", 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:absolute;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"] }]
+        }] });
+
+class ModalBanner {
+    config = input.required();
+    close = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ModalBanner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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()?.bannerIcons && (config() && config()!.bannerIcons.length > 0)) {\n        @for (icon of config()?.bannerIcons; track icon) {\n        <img src=\"{{ icon }}\" class=\"icon-style custom-svg-icon-color-dark-green\" alt=\"\" />\n        }\n        }\n\n        @if (config() && config()?.bannerText && (config() && config()!.bannerText.length > 0)) {\n        <div class=\"modal-banner-default-style\">\n            <div class=\"generic-modal-banner-text\">\n                <div>\n                    {{ config()?.bannerText }}\n                    <b> {{ config()?.bannerTextAnnotatedString }} </b>\n                </div>\n            </div>\n        </div>\n        }\n    </div>\n\n    @if (config()?.disableClose !== true && config()?.style?.showCloseButton !== false) {\n    <svg (click)=\"close.emit('cancel')\" aria-label=\"Close\" class=\"banner-svg-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    }\n</div>", styles: [".modal-banner-default-style{font:lighter;font-size:1.25rem;line-height:1.25rem}.modal-top-banner-container{display:flex;flex-direction:row;gap:2rem;justify-content:space-between;align-items:center;color:var(--text_primary, #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%}.banner-svg-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}.banner-svg-close-button path{transition:all .3s ease-in-out}.banner-svg-close-button path{fill:var(--text_primary, #000000)}@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"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ModalBanner, decorators: [{
+            type: Component,
+            args: [{ selector: 'modal-banner', template: "<div class=\"modal-top-banner-container\">\n    <div class=\"modal-top-banner-title-container\">\n        @if (config() && config()?.bannerIcons && (config() && config()!.bannerIcons.length > 0)) {\n        @for (icon of config()?.bannerIcons; track icon) {\n        <img src=\"{{ icon }}\" class=\"icon-style custom-svg-icon-color-dark-green\" alt=\"\" />\n        }\n        }\n\n        @if (config() && config()?.bannerText && (config() && config()!.bannerText.length > 0)) {\n        <div class=\"modal-banner-default-style\">\n            <div class=\"generic-modal-banner-text\">\n                <div>\n                    {{ config()?.bannerText }}\n                    <b> {{ config()?.bannerTextAnnotatedString }} </b>\n                </div>\n            </div>\n        </div>\n        }\n    </div>\n\n    @if (config()?.disableClose !== true && config()?.style?.showCloseButton !== false) {\n    <svg (click)=\"close.emit('cancel')\" aria-label=\"Close\" class=\"banner-svg-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    }\n</div>", styles: [".modal-banner-default-style{font:lighter;font-size:1.25rem;line-height:1.25rem}.modal-top-banner-container{display:flex;flex-direction:row;gap:2rem;justify-content:space-between;align-items:center;color:var(--text_primary, #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%}.banner-svg-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}.banner-svg-close-button path{transition:all .3s ease-in-out}.banner-svg-close-button path{fill:var(--text_primary, #000000)}@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"] }]
+        }] });
+
+const GENERIC_MODAL_DOWN_SWIPE_LIMIT = 2;
+const GENERIC_MODAL_UP_SWIPE_LIMIT = 1;
+const GENERIC_MODAL_SWIPE_VELOCITY_THRESHOLD = 80;
+
+class ModalSwipeable {
+    config = input.required();
+    isOpen = input.required();
+    isAnimated = input.required();
+    animationDuration = input.required();
+    close = output();
+    currentTranslateY = 0;
+    isSwipingVerticallyFinished = false;
+    isSwipingVertically = false;
+    downSwipeLimit = 0;
+    upSwipeLimit = 0;
+    windowInnerHeight = window.innerHeight;
+    isTrackingSwipe = false;
+    isTouchActive = false;
+    swipeableModalInitiated = false;
+    globalPointerListenerAdded = false;
+    touchDetectionUnsubscribe$ = new Subject();
+    verticalSwipeTarget;
+    modalContent;
+    ngOnInit() {
+        this.startVerticalSwipeDetection();
+        this.monitorInputType();
+    }
+    ngOnDestroy() {
+        this.stopVerticalSwipeDetection();
+    }
+    //#region Swipe Methods
+    startVerticalSwipeDetection() {
+        if (this.isTrackingSwipe)
+            return;
+        const hasTouch = window.matchMedia('(pointer: coarse)').matches || navigator.maxTouchPoints > 0;
+        if (!hasTouch)
+            return;
+        this.initSwipeableModalParams();
+        this.touchDetectionUnsubscribe$ = new Subject();
+        this.isTrackingSwipe = true;
+        const target = this.verticalSwipeTarget?.nativeElement;
+        if (!target)
+            return;
+        const limit = document.body.offsetHeight / this.downSwipeLimit;
+        let startY = 0;
+        let currentY = 0;
+        let isPointerDown = false;
+        const pointerDown = (event) => {
+            isPointerDown = true;
+            startY = event.clientY;
+            this.isSwipingVertically = true;
+        };
+        const pointerMove = (event) => {
+            if (!isPointerDown)
+                return;
+            currentY = event.clientY - startY;
+            event.preventDefault();
+            this.currentTranslateY = currentY;
+        };
+        const pointerUp = (event) => {
+            if (!isPointerDown)
+                return;
+            isPointerDown = false;
+            this.isSwipingVertically = false;
+            const deltaY = event.clientY - startY;
+            const velocityY = (event.clientY - startY) / (event.timeStamp - event.startTime || 1);
+            if (Math.abs(deltaY) > limit || velocityY > GENERIC_MODAL_SWIPE_VELOCITY_THRESHOLD) {
+                this.close.emit('cancel');
+            }
+            else {
+                this.currentTranslateY = 0;
+            }
+        };
+        target.addEventListener('pointerdown', pointerDown);
+        target.addEventListener('pointermove', pointerMove);
+        target.addEventListener('pointerup', pointerUp);
+        target.addEventListener('pointercancel', pointerUp);
+        this.touchDetectionUnsubscribe$.pipe(take(1)).subscribe(() => {
+            target.removeEventListener('pointerdown', pointerDown);
+            target.removeEventListener('pointermove', pointerMove);
+            target.removeEventListener('pointerup', pointerUp);
+            target.removeEventListener('pointercancel', pointerUp);
+        });
+    }
+    stopVerticalSwipeDetection() {
+        if (!this.isTrackingSwipe)
+            return;
+        this.isTrackingSwipe = false;
+        this.touchDetectionUnsubscribe$.next();
+        this.touchDetectionUnsubscribe$.complete();
+    }
+    initSwipeableModalParams() {
+        if (!this.swipeableModalInitiated) {
+            this.swipeableModalInitiated = true;
+            const config = this.config();
+            this.downSwipeLimit = config?.style.mobileConfig?.downSwipeLimit
+                ? config.style.mobileConfig.downSwipeLimit > 0
+                    ? config.style.mobileConfig.downSwipeLimit
+                    : 1
+                : GENERIC_MODAL_DOWN_SWIPE_LIMIT;
+            const configValue = this.config();
+            this.upSwipeLimit = configValue?.style.mobileConfig?.upSwipeLimit
+                ? configValue.style.mobileConfig.upSwipeLimit > 0
+                    ? configValue.style.mobileConfig.upSwipeLimit
+                    : GENERIC_MODAL_UP_SWIPE_LIMIT
+                : window.innerHeight;
+        }
+    }
+    monitorInputType() {
+        if (this.globalPointerListenerAdded)
+            return;
+        this.globalPointerListenerAdded = true;
+        window.addEventListener('pointerdown', (event) => {
+            const isTouch = event.pointerType === 'touch';
+            if (isTouch && !this.isTouchActive) {
+                this.isTouchActive = true;
+                this.startVerticalSwipeDetection();
+            }
+            else if (!isTouch && this.isTouchActive) {
+                this.isTouchActive = false;
+                this.stopVerticalSwipeDetection();
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ModalSwipeable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: ModalSwipeable, isStandalone: true, selector: "modal-swipeable", inputs: { 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: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], ngImport: i0, template: "<div (click)=\"$event.stopPropagation()\" [id]=\"config()?.id ?? ''\"\n    [class]=\"config()?.style?.wrapperClasses !== undefined ? config()!.style.wrapperClasses! : ''\"\n    [style]=\"config()?.style?.wrapperStyles !== undefined ? config()!.style.wrapperStyles! : ''\"\n    [style.max-height]=\"config() && config()?.style?.mobileConfig && config()?.style?.mobileConfig?.customHeight ? config()?.style?.mobileConfig?.customHeight : ''\"\n    [style.transform]=\"!isSwipingVerticallyFinished\n                        ? 'translateY(' + (currentTranslateY * -1 > windowInnerHeight / upSwipeLimit ? (windowInnerHeight / upSwipeLimit) * -1 : currentTranslateY) + 'px)'\n                        : 'translateY(100%)'\"\n    [style.transition]=\"isAnimated() && !isSwipingVertically ? '300ms ease-in-out' : ''\" [ngClass]=\"{\n                'opened-swipeable-modal': isAnimated()\n            }\" data-horizontal-swipe-target=\"swipeable-modal\" class=\"swipeable-modal-style\">\n    <div #verticalSwipeTarget class=\"touch-hitbox\" class=\"swipeable-modal-top-bar\"\n        (click)=\"isTrackingSwipe ? null : close.emit('cancel')\">\n        <div class=\"swipe-line\"></div>\n    </div>\n\n    <div class=\"swipeable-modal-content-container\"\n        [style.animationDuration]=\"isAnimated() ? animationDuration().toString() + 'ms' : '0ms'\">\n        <ng-content></ng-content>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ModalSwipeable, decorators: [{
+            type: Component,
+            args: [{ selector: 'modal-swipeable', imports: [
+                        NgClass
+                    ], template: "<div (click)=\"$event.stopPropagation()\" [id]=\"config()?.id ?? ''\"\n    [class]=\"config()?.style?.wrapperClasses !== undefined ? config()!.style.wrapperClasses! : ''\"\n    [style]=\"config()?.style?.wrapperStyles !== undefined ? config()!.style.wrapperStyles! : ''\"\n    [style.max-height]=\"config() && config()?.style?.mobileConfig && config()?.style?.mobileConfig?.customHeight ? config()?.style?.mobileConfig?.customHeight : ''\"\n    [style.transform]=\"!isSwipingVerticallyFinished\n                        ? 'translateY(' + (currentTranslateY * -1 > windowInnerHeight / upSwipeLimit ? (windowInnerHeight / upSwipeLimit) * -1 : currentTranslateY) + 'px)'\n                        : 'translateY(100%)'\"\n    [style.transition]=\"isAnimated() && !isSwipingVertically ? '300ms ease-in-out' : ''\" [ngClass]=\"{\n                'opened-swipeable-modal': isAnimated()\n            }\" data-horizontal-swipe-target=\"swipeable-modal\" class=\"swipeable-modal-style\">\n    <div #verticalSwipeTarget class=\"touch-hitbox\" class=\"swipeable-modal-top-bar\"\n        (click)=\"isTrackingSwipe ? null : close.emit('cancel')\">\n        <div class=\"swipe-line\"></div>\n    </div>\n\n    <div class=\"swipeable-modal-content-container\"\n        [style.animationDuration]=\"isAnimated() ? animationDuration().toString() + 'ms' : '0ms'\">\n        <ng-content></ng-content>\n    </div>\n</div>" }]
+        }], propDecorators: { verticalSwipeTarget: [{
+                type: ViewChild,
+                args: ["verticalSwipeTarget", { static: true }]
+            }], modalContent: [{
+                type: ViewChild,
+                args: ["modalContent", { static: true }]
+            }] } });
+
+class ModalCentered {
+    config = input.required();
+    isOpen = input.required();
+    isAnimated = input.required();
+    isSwipeableModalActive = input.required();
+    animationDuration = input.required();
+    hasDefaultContentWrapperClass = input.required();
+    hasBanner = input.required();
+    close = output();
+    onBackdropClick = output();
+    swipeableComponents;
+    get modalClasses() {
+        return {
+            'centered-modal-content-wrapper': true,
+            'centered-modal-default-style': this.hasDefaultContentWrapperClass() || this.hasBanner(),
+            'centered-modal-animate-in': this.isAnimated() && this.isOpen(),
+            'centered-modal-animate-out': this.isAnimated() && !this.isOpen(),
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ModalCentered, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: ModalCentered, isStandalone: true, selector: "modal-centered", inputs: { 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 }, isSwipeableModalActive: { classPropertyName: "isSwipeableModalActive", publicName: "isSwipeableModalActive", 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: "swipeableComponents", predicate: ModalSwipeable, descendants: true }], ngImport: i0, template: "@if(!isSwipeableModalActive()) {\n<div class=\"modal-overlay\" [ngClass]=\"{'modal-backdrop': config()?.style?.hasBackdrop}\" (click)=\"\n    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\"\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                <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n} @else {\n<modal-swipeable [config]=\"config()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\"\n    [animationDuration]=\"animationDuration()\" (close)=\"close.emit('cancel')\">\n    <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n</modal-swipeable>\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:absolute;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{max-width:90vw;max-width:90dvw;max-height:95vh;max-height:95dvh}.centered-modal-default-style{border-radius:.75rem;box-shadow:0 8px 20px #0000001f;color:var(--text_primary, #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;padding:1rem 1.5rem;gap:2rem}.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: ModalSwipeable, selector: "modal-swipeable", inputs: ["config", "isOpen", "isAnimated", "animationDuration"], outputs: ["close"] }, { kind: "component", type: ModalBanner, selector: "modal-banner", inputs: ["config"], outputs: ["close"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ModalCentered, decorators: [{
+            type: Component,
+            args: [{ selector: 'modal-centered', imports: [
+                        NgTemplateOutlet,
+                        NgClass,
+                        ModalSwipeable,
+                        ModalBanner,
+                    ], template: "@if(!isSwipeableModalActive()) {\n<div class=\"modal-overlay\" [ngClass]=\"{'modal-backdrop': config()?.style?.hasBackdrop}\" (click)=\"\n    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\"\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                <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n} @else {\n<modal-swipeable [config]=\"config()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\"\n    [animationDuration]=\"animationDuration()\" (close)=\"close.emit('cancel')\">\n    <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n</modal-swipeable>\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:absolute;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{max-width:90vw;max-width:90dvw;max-height:95vh;max-height:95dvh}.centered-modal-default-style{border-radius:.75rem;box-shadow:0 8px 20px #0000001f;color:var(--text_primary, #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;padding:1rem 1.5rem;gap:2rem}.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: { swipeableComponents: [{
+                type: ViewChildren,
+                args: [ModalSwipeable]
+            }] } });
+
+const GENERIC_MODAL_DEFAULT_ANIM_DURATION = 175;
+const GENERIC_MODAL_DEFAULT_INTERNAL_ANIM_DURATION = 350;
+const GENERIC_MODAL_DEFAULT_ANIM_DURATION_MULTIPLIER_SMALL = 0.65;
+const GENERIC_MODAL_DEFAULT_ANIM_DURATION_MULTIPLIER_LARGE = 0.85;
+
+class ModalSide {
+    config = input.required();
+    isOpen = input.required();
+    _innerIsOpen = false;
+    set innerIsOpen(value) {
+        if (value) {
+            this._innerIsOpen = false;
+            setTimeout(() => {
+                this._innerIsOpen = true;
+            }, GENERIC_MODAL_DEFAULT_ANIM_DURATION);
+        }
+        else {
+            this._innerIsOpen = false;
+        }
+    }
+    get innerIsOpen() {
+        return this._innerIsOpen;
+    }
+    isAnimated = input.required();
+    isSwipeableModalActive = input.required();
+    animationDuration = input.required();
+    hasDefaultContentWrapperClass = input.required();
+    hasBanner = input.required();
+    close = output();
+    swipeableComponents;
+    constructor() {
+        effect(() => {
+            this.innerIsOpen = this.isOpen();
+        });
+    }
+    get modalClasses() {
+        const config = this.config();
+        const positionLeft = config?.style?.position === 'left';
+        const positionRight = config?.style?.position === 'right';
+        return {
+            'side-modal-content-wrapper': true,
+            'side-modal-default-style': this.hasDefaultContentWrapperClass() || this.hasBanner(),
+            'left': positionLeft,
+            'right': positionRight,
+            'side-modal-animate-in': this.isAnimated() && this.innerIsOpen,
+            'side-modal-animate-out': this.isAnimated() && !this.innerIsOpen,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ModalSide, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: ModalSide, isStandalone: true, selector: "modal-side", inputs: { 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 }, isSwipeableModalActive: { classPropertyName: "isSwipeableModalActive", publicName: "isSwipeableModalActive", 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: "swipeableComponents", predicate: ModalSwipeable, descendants: true }], ngImport: i0, template: "@if(!isSwipeableModalActive()) {\n<div [ngClass]=\"modalClasses\" (click)=\"$event.stopPropagation()\">\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        <div class=\"side-moda-content-wrapper\">\n            <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n        </div>\n    </div>\n</div>\n} @else {\n<modal-swipeable [config]=\"config()\" [isOpen]=\"innerIsOpen\" [isAnimated]=\"isAnimated()\"\n    [animationDuration]=\"animationDuration()\" (close)=\"close.emit('cancel')\">\n    <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n</modal-swipeable>\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;background:var(--modal_bg, #ffffff);box-shadow:0 0 15px #0000004d;z-index:1050;overflow-y:auto;max-width:85vw;max-width:85dvw;display:flex;flex-direction:column;transition:transform .3s ease-in-out}.side-modal-content-wrapper.left{left:0;transform:translate(-100%)}.side-modal-content-wrapper.right{right:0;transform:translate(100%)}.side-modal-content-wrapper.side-modal-animate-in.left,.side-modal-content-wrapper.side-modal-animate-in.right{transform:translate(0)}.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 .side-modal-inner-content-container{flex-grow:1;display:flex;flex-direction:column;padding:1rem;gap:2rem}@media (max-width: 768px){.side-modal-content-wrapper{max-width:90vw;max-width:95dvw}}.side-moda-content-wrapper{max-height:89vh;max-height:89dvh;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ModalSwipeable, selector: "modal-swipeable", inputs: ["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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ModalSide, decorators: [{
+            type: Component,
+            args: [{ selector: 'modal-side', imports: [
+                        NgTemplateOutlet,
+                        ModalSwipeable,
+                        NgClass,
+                        ModalBanner
+                    ], template: "@if(!isSwipeableModalActive()) {\n<div [ngClass]=\"modalClasses\" (click)=\"$event.stopPropagation()\">\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        <div class=\"side-moda-content-wrapper\">\n            <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n        </div>\n    </div>\n</div>\n} @else {\n<modal-swipeable [config]=\"config()\" [isOpen]=\"innerIsOpen\" [isAnimated]=\"isAnimated()\"\n    [animationDuration]=\"animationDuration()\" (close)=\"close.emit('cancel')\">\n    <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n</modal-swipeable>\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;background:var(--modal_bg, #ffffff);box-shadow:0 0 15px #0000004d;z-index:1050;overflow-y:auto;max-width:85vw;max-width:85dvw;display:flex;flex-direction:column;transition:transform .3s ease-in-out}.side-modal-content-wrapper.left{left:0;transform:translate(-100%)}.side-modal-content-wrapper.right{right:0;transform:translate(100%)}.side-modal-content-wrapper.side-modal-animate-in.left,.side-modal-content-wrapper.side-modal-animate-in.right{transform:translate(0)}.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 .side-modal-inner-content-container{flex-grow:1;display:flex;flex-direction:column;padding:1rem;gap:2rem}@media (max-width: 768px){.side-modal-content-wrapper{max-width:90vw;max-width:95dvw}}.side-moda-content-wrapper{max-height:89vh;max-height:89dvh;overflow-y:auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { swipeableComponents: [{
+                type: ViewChildren,
+                args: [ModalSwipeable]
+            }] } });
+
+class GenericModalComponent {
+    modalService = inject(GenericModalService);
+    windowDimensionService = inject(WindowDimensionsService);
+    scrollLockService = inject(ScrollLockService);
+    deviceTypeService = inject(DeviceTypeService);
+    cdr = inject(ChangeDetectorRef);
+    afterClose = output();
+    animationDuration = GENERIC_MODAL_DEFAULT_ANIM_DURATION;
+    componentRef = {};
+    config;
+    closeFunction;
+    backdropClickSubject = new Subject();
+    backdropClick = this.backdropClickSubject.asObservable();
+    _isOpen = true;
+    get isOpen() {
+        return this._isOpen;
+    }
+    set isOpen(value) {
+        this._isOpen = value;
+        this.cdr.detectChanges();
+    }
+    isSwipeableModalActive = false;
+    isAnimated = false;
+    isCentered = false;
+    isSide = false;
+    hasBanner = false;
+    hasDefaultContentWrapperClass = false;
+    isConfirmCloseModalOpen = false;
+    isSpecialMobileOverflowHandlingEnabled = false;
+    isScrollDisabled = false;
+    windowDimensions;
+    unsubscribe$ = new Subject();
+    modalContainer;
+    sideModalComponents;
+    centeredModalComponents;
+    contentTemplate;
+    dynamicContainer;
+    constructor() {
+        this.windowDimensions = this.windowDimensionService.getWindowDimensions();
+    }
+    ngOnInit() {
+        this.initParamsFromConfig();
+        this.createSubscriptions();
+        if (this.config?.style.handleMobile !== false && this.windowDimensions.width < this.windowDimensions.threshold_sm) {
+            this.isSwipeableModalActive = true;
+        }
+        else {
+            this.isSwipeableModalActive = false;
+        }
+    }
+    ngAfterViewInit() {
+        if (!this.componentRef)
+            return;
+        this.dynamicContainer?.insert(this.componentRef.hostView);
+    }
+    ngOnDestroy() {
+        this.componentRef?.destroy();
+        this.dynamicContainer?.clear();
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+    //#region Subscription Methods
+    createSubscriptions() {
+        this.windowDimensionService
+            .getWindowDimensions$()
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe((dimensions) => {
+            this.windowDimensions = dimensions;
+            this.handleWindowDimensionChange();
+        });
+        fromEvent(document, "keydown")
+            .pipe(filter((event) => event.key === "Escape"), takeUntil(this.unsubscribe$))
+            .subscribe(() => {
+            if (!this.isConfirmCloseModalOpen) {
+                this.close("cancel", undefined, true);
+            }
+        });
+    }
+    handleWindowDimensionChange() {
+        if (this.config?.style.handleMobile !== false) {
+            if (this.windowDimensions.width < this.windowDimensions.threshold_sm && !this.isSwipeableModalActive) {
+                this.isSwipeableModalActive = true;
+                if (this.isOpen) {
+                    if (this.isSpecialMobileOverflowHandlingEnabled) {
+                        this.scrollLockService.disableScroll({
+                            mainContainer: this.modalContainer?.nativeElement,
+                            handleExtremeOverflow: this.config?.enableExtremeOverflowHandling ?? false,
+                            animationDuration: this.animationDuration,
+                            handleTouchInput: true,
+                            mobileOnlyTouchPrevention: true,
+                        });
+                        this.isScrollDisabled = true;
+                    }
+                }
+            }
+            if (this.windowDimensions.width >= this.windowDimensions.threshold_sm && this.isSwipeableModalActive) {
+                this.isSwipeableModalActive = false;
+                if (this.isOpen) {
+                    if (this.isSpecialMobileOverflowHandlingEnabled) {
+                        this.scrollLockService.enableScroll(this.config?.enableExtremeOverflowHandling ?? false);
+                        this.isScrollDisabled = false;
+                    }
+                }
+            }
+        }
+    }
+    //#endregion
+    //#region Initialization Methods
+    initParamsFromConfig() {
+        this.isSpecialMobileOverflowHandlingEnabled = (this.deviceTypeService.getDeviceState().isAppleDevice || this.config?.webkitOnlyOverflowMobileHandling === false);
+        this.hasBanner =
+            this.config !== undefined &&
+                ((this.config.bannerText !== undefined && this.config.bannerText.length > 0) ||
+                    (this.config.bannerIcons && this.config.bannerIcons.length > 0) ||
+                    this.config.disableClose !== true &&
+                        this.config.style.showCloseButton !== false);
+        this.hasDefaultContentWrapperClass = this.config?.style.contentWrapper !== false;
+        this.isAnimated = this.config?.style.animate === true && (this.config?.style.contentWrapper !== false || this.hasBanner);
+        this.isCentered = this.config?.style.position === "center";
+        this.isSide = this.config?.style.position === "left" || this.config?.style.position === "right";
+    }
+    //#endregion
+    //#region Closing Methods
+    close(state = "cancel", result = undefined, fromInsideInteraction = false, forceClose = false) {
+        if (this.isConfirmCloseModalOpen)
+            return;
+        if (this.isScrollDisabled) {
+            this.scrollLockService.enableScroll(this.config?.enableExtremeOverflowHandling ?? false);
+        }
+        if ((this.config && this.config?.disableClose !== true) || !fromInsideInteraction || forceClose) {
+            if (this.config?.confirmCloseConfig && this.shouldOpenConfirmCloseModal(forceClose, state)) {
+                if (this.shouldOpenConfirmCloseModalSelfCheck()) {
+                    const modal = this.modalService.open(this.config.confirmCloseConfig.confirmModalComponent, {
+                        style: this.config.confirmCloseConfig.style ?? {
+                            handleMobile: false,
+                        },
+                        disableClose: true,
+                        bannerText: this.config.confirmCloseConfig.bannerText ?? EMPTY_STRING,
+                        bannerIcons: this.config.confirmCloseConfig.bannerIcons ?? [],
+                        data: this.config.confirmCloseConfig.data ?? null,
+                    });
+                    this.isConfirmCloseModalOpen = true;
+                    if (this.isSwipeableModalActive) {
+                        this.resetSwipeableModalPosition();
+                    }
+                    modal.afterClosed()
+                        .pipe(take(1))
+                        .subscribe((_result) => {
+                        this.isConfirmCloseModalOpen = false;
+                        if (_result.state === 'confirm') {
+                            this.handleClose(state, result);
+                        }
+                    });
+                }
+                else {
+                    if (this.config?.disableConsoleWarnings !== true) {
+                        console.warn(GenericModalWarnings.CONFIRM_MODAL_NESTING_NOT_SUPPORTED);
+                    }
+                    this.handleClose(state, result);
+                }
+            }
+            else {
+                this.handleClose(state, result);
+            }
+        }
+        else if (this.isSwipeableModalActive) {
+            this.resetSwipeableModalPosition();
+        }
+    }
+    async handleClose(state, result) {
+        this.isOpen = false;
+        this.setSwipeableModalFinishedState(true);
+        const returnResult = {
+            data: result,
+            state: state,
+        };
+        if (this.closeFunction) {
+            this.closeFunction(returnResult);
+        }
+    }
+    onBackdropClick(event) {
+        this.backdropClickSubject.next(event);
+        if (this.config?.style?.hasBackdrop && this.config?.disableCloseOnBackdropClick !== true) {
+            this.close("cancel", undefined, true);
+        }
+    }
+    //#endregion
+    //#region Logical Assertions
+    shouldOpenConfirmCloseModal(forceClose, state) {
+        if (this.config?.confirmCloseConfig) {
+            const closeNotCalledWithForceClose = !forceClose;
+            if (closeNotCalledWithForceClose) {
+                const configuredForConfirmClose = this.config.confirmCloseConfig.confirmClose === true;
+                const closeCalledWithCancelState = state === "cancel";
+                const configuredForConfirmCloseOnSubmit = this.config.confirmCloseConfig.confirmOnSubmit === true;
+                return configuredForConfirmClose && (closeCalledWithCancelState || configuredForConfirmCloseOnSubmit);
+            }
+        }
+        return false;
+    }
+    shouldOpenConfirmCloseModalSelfCheck() {
+        if (this.config?.confirmCloseConfig) {
+            const hasSelfIdentifier = this.componentRef && this.componentRef.instance && this.componentRef.instance.modal && this.componentRef.instance.modal.selfIdentifier !== EMPTY_STRING;
+            const bypassSelfCheck = this.config.confirmCloseConfig.bypassSelfCheck === true;
+            return hasSelfIdentifier || bypassSelfCheck;
+        }
+        return false;
+    }
+    //#endregion
+    //#region Helper Methods
+    getSwipeableModal() {
+        return this.sideModalComponents?.first?.swipeableComponents?.first
+            ?? this.centeredModalComponents?.first?.swipeableComponents?.first;
+    }
+    resetSwipeableModalPosition() {
+        const swipeableModal = this.getSwipeableModal();
+        if (swipeableModal) {
+            swipeableModal.currentTranslateY = 0;
+        }
+    }
+    setSwipeableModalFinishedState(isFinished) {
+        const swipeableModal = this.getSwipeableModal();
+        if (swipeableModal) {
+            swipeableModal.isSwipingVerticallyFinished = isFinished;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GenericModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: GenericModalComponent, isStandalone: true, selector: "generic-modal", outputs: { afterClose: "afterClose" }, viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true, static: 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 || isSwipeableModalActive)) {\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 [config]=\"config\" [isOpen]=\"isOpen\" [isAnimated]=\"isAnimated\"\n        [isSwipeableModalActive]=\"isSwipeableModalActive\" [animationDuration]=\"animationDuration\"\n        [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\">\n        <ng-container [ngTemplateOutlet]=\"contentTemplate\">\n        </ng-container>\n    </modal-side>\n    }\n    @case (isCentered) {\n    <modal-centered [config]=\"config\" [isOpen]=\"isOpen\" [isAnimated]=\"isAnimated\"\n        [isSwipeableModalActive]=\"isSwipeableModalActive\" [animationDuration]=\"animationDuration\"\n        [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\"\n        (onBackdropClick)=\"onBackdropClick($event)\">\n        <ng-container [ngTemplateOutlet]=\"contentTemplate\">\n        </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: ["config", "isOpen", "isAnimated", "isSwipeableModalActive", "animationDuration", "hasDefaultContentWrapperClass", "hasBanner"], outputs: ["close", "onBackdropClick"] }, { kind: "component", type: ModalSide, selector: "modal-side", inputs: ["config", "isOpen", "isAnimated", "isSwipeableModalActive", "animationDuration", "hasDefaultContentWrapperClass", "hasBanner"], outputs: ["close"] }, { kind: "component", type: ModalBackdrop, selector: "modal-backdrop", inputs: ["isAnimated", "isOpen"], outputs: ["click"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GenericModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "generic-modal", imports: [
+                        NgTemplateOutlet,
+                        ModalCentered,
+                        ModalSide,
+                        ModalBackdrop
+                    ], template: "@if (config?.style?.hasBackdrop && (isSide || isSwipeableModalActive)) {\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 [config]=\"config\" [isOpen]=\"isOpen\" [isAnimated]=\"isAnimated\"\n        [isSwipeableModalActive]=\"isSwipeableModalActive\" [animationDuration]=\"animationDuration\"\n        [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\">\n        <ng-container [ngTemplateOutlet]=\"contentTemplate\">\n        </ng-container>\n    </modal-side>\n    }\n    @case (isCentered) {\n    <modal-centered [config]=\"config\" [isOpen]=\"isOpen\" [isAnimated]=\"isAnimated\"\n        [isSwipeableModalActive]=\"isSwipeableModalActive\" [animationDuration]=\"animationDuration\"\n        [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\"\n        (onBackdropClick)=\"onBackdropClick($event)\">\n        <ng-container [ngTemplateOutlet]=\"contentTemplate\">\n        </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: { modalContainer: [{
+                type: ViewChild,
+                args: ["modalContainer", { static: true }]
+            }], sideModalComponents: [{
+                type: ViewChildren,
+                args: [ModalSide]
+            }], centeredModalComponents: [{
+                type: ViewChildren,
+                args: [ModalCentered]
+            }], contentTemplate: [{
+                type: ViewChild,
+                args: ["contentTemplate"]
+            }], dynamicContainer: [{
+                type: ViewChild,
+                args: ["dynamicContainer", { read: ViewContainerRef }]
+            }] } });
+
+const LOWEST_CHARACTER_CAP = 23;
+const LOWER_CHARACTER_CAP = 33;
+const MID_CHARACTER_CAP = 49;
+const UPPER_CHARACTER_CAP = 60;
+
+/*
+ * Public API Surface of modal
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EMPTY_STRING, GENERIC_MODAL_DATA, GENERIC_MODAL_DEFAULT_ANIM_DURATION, GENERIC_MODAL_DEFAULT_ANIM_DURATION_MULTIPLIER_LARGE, GENERIC_MODAL_DEFAULT_ANIM_DURATION_MULTIPLIER_SMALL, GENERIC_MODAL_DEFAULT_INTERNAL_ANIM_DURATION, GENERIC_MODAL_DOWN_SWIPE_LIMIT, GENERIC_MODAL_SWIPE_VELOCITY_THRESHOLD, GENERIC_MODAL_UP_SWIPE_LIMIT, GenericModal, GenericModalComponent, GenericModalConfig, GenericModalErrors, GenericModalRef, GenericModalService, GenericModalState, GenericModalStyleConfig, GenericModalWarnings, LOWER_CHARACTER_CAP, LOWEST_CHARACTER_CAP, MID_CHARACTER_CAP, ModalBackdrop, ModalBanner, ModalCentered, ModalSide, ModalSwipeable, UPPER_CHARACTER_CAP };
+//# sourceMappingURL=filip.mazev-modal.mjs.map