@filip.mazev/modal 0.1.27 → 0.1.28

package/README.md

@@ -58,12 +58,12 @@ Other themes are also available such as:
 
 ### Create a Modal Component
 
-Your modal content components must extend `Modal<TData, TResult>`:
+Your modal content components must extend `IModal<TData, TResult>`:
 
 Typescript:
 
 ```typescript
-import { Modal, MODAL_DATA, ModalHeaderDirective, ModalFooterDirective } from '@filip.mazev/modal';
+import { Modal, ModalHeaderDirective, ModalFooterDirective } from '@filip.mazev/modal';
 
 @Component({
   selector: 'app-my-modal-component',
@@ -75,19 +75,7 @@ import { Modal, MODAL_DATA, ModalHeaderDirective, ModalFooterDirective } from '@
   styleUrl: './my-modal-component.scss',
 })
 export class MyModalComponent extends Modal<MyData, MyResult> {
-  protected data = inject<MyData>(MODAL_DATA);
 
-  constructor() {
-    super();
-  }
-
-  override afterModalGet(): void {
-    // This is called after the modal service has returned the instance of the generated modal to this component. You can access this.modal only after this 
-  }
-
-  override onDestroy(): void {
-    // Perform onDestroy logic here as this method is called on ngOnDestroy on Modal
-  }
 }
 ```
 
@@ -98,9 +86,13 @@ HTML (Template):
     Example Header
 </div>
 
-<div>
-   Lorem ipsum dolor sit, amet consectetur adipisicing elit. A, iste voluptatum accusamus facere explicabo impedit exercitationem dolore...
-</div>
+<h1>
+ {{ data.Title }}
+</h1>
+
+<p>
+ {{ data.Body }}
+</p>
 
 <div *modalFooter>
     Example Footer
@@ -127,7 +119,6 @@ Accessible via this.modal inside any component that extends Modal. This referenc
 * `componentRef: (ComponentRef<C>)` The Angular ComponentRef of the content component (your component) inside the modal.
 * `modalContainerRef: (ComponentRef<ModalComponent>)` The Angular ComponentRef of the wrapper container (the shell responsible for the backdrop, animations, and layout).
 * `modalContainerElement: (HTMLElement)` The native HTML element of the modal container.
-* `selfIdentifier: ({ constructor: Function })` An object identifying the constructor of the component, used internally for instance tracking.
 
 #### `IModalCloseResult`
 
@@ -171,8 +162,9 @@ modalRef.afterClosed().subscribe(result: IModalCloseResult<MyData> => {
 Controls the behavior and content of the modal container:
 
 * `open` |`boolean`|: (optional) Whether the modal should be open or not, will default to true.
-* `afterClose` |``Function``|: (optional) The function to run after the modal closes.
-* `confirmCloseConfig` |``IModalConfirmCloseConfig<ConfirmModalData, ConfirmModal>``|: (optional) The configuration for the confirm close modal (e.g., a "Discard changes?" prompt), will default to `{ confirmClose: false }`. `ConfirmModalData and ConfirmModal` need to be specified.
+* `afterClose` |`Function`|: (optional) The function to run after the modal closes.
+* `closeGuard` |`ModalCloseGuard`| (optional) The guard that will determine whether the modal can be closed or not
+* `closeGuardOnlyOnCancel` |`boolean`| (optional) Whether the close guard should only be checked on cancel actions, will default to true
 * `disableClose` |`boolean`|: (optional) Whether the modal should be closable or not, will default to false. This applies to the close button, escape key, and backdrop.
 * `disableCloseOnBackdropClick` |`boolean`|: (optional) Whether the modal shouldn't be closable specifically when the user clicks on the backdrop, will default to false.
 * `disableCloseOnNavigation` |`boolean`|: (optional) Whether the modal should remain open when the user navigates away from the current page, will default to false.
@@ -203,18 +195,6 @@ Controls the visual appearance:
 * `wrapperStyles` |`string`|: (optional) Inline CSS styles to apply to the wrapper of the modal.
 * `overrideFullHeight` |`boolean`|: (optional) Whether the modal should override the default full-height restriction or not, will default to false.
 
-### `IModalConfirmCloseConfig`
-
-Configuration for the confirmation modal triggered when a user attempts to close the parent modal (e.g., "Unsaved Changes"):
-
-* `confirmModalComponent` |`ComponentType<ConfirmModal>`|: (required) The component class to use for the confirmation modal.
-* `confirmClose` |`boolean`|: (required) Whether the confirmation flow should be active. If false, the modal closes immediately without confirmation.
-* `confirmOnSubmit` |`boolean`|: (optional) Whether the confirmation should also trigger when the modal is closed via a "submit" (success) action. Defaults to false (meaning confirmation is only required for 'cancel' or backdrop closure).
-* `style` |`IModalStyleConfig`|: (optional) The visual style configuration for the confirmation modal instance.
-* `data` |`ConfirmModalData`|: (optional) The data to pass to the confirmation component. The component needs to use the @Inject(MODAL_DATA) decorator to receive this.
-* `bannerText` |`string`|: (optional) The text to display in the header banner of the confirmation modal.
-* `bypassSelfCheck` |`boolean`|: (optional) Whether the modal should bypass the internal check that ensures the confirmation is attached to the specific closing modal. Defaults to false.
-
 ### `IBottomSheetModalConfig`
 
 Configuration for the mobile-optimized bottom sheet modal (bottom sheet):

package/fesm2022/filip.mazev-modal.mjs

@@ -1,30 +1,11 @@
-import { DOCUMENT, NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Injectable, InjectionToken, Injector, ApplicationRef, EnvironmentInjector, RendererFactory2, createComponent, input, output, Component, signal, computed, ViewChild, ViewChildren, effect, ViewContainerRef, TemplateRef, Directive } from '@angular/core';
-import { BehaviorSubject, Subject, takeUntil, filter, skip, map, fromEvent, take } from 'rxjs';
+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 } from 'rxjs';
+import { DOCUMENT, NgClass, NgTemplateOutlet } from '@angular/common';
 import { Router, NavigationEnd } from '@angular/router';
 import { uuidv4, WindowDimensionsService, ScrollLockService, DeviceTypeService } from '@filip.mazev/blocks-core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
-const EMPTY_STRING = '';
-
-var ModalWarnings;
-(function (ModalWarnings) {
-    //#region Multi-level modals
-    ModalWarnings["NO_PARENT_PROVIDED"] = "No parent modal provided for multilevel modal. Please provide a parent modal or set openAsMultilevel to false.";
-    ModalWarnings["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 ModalService! Opening modal as normal modal.";
-    ModalWarnings["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.";
-    ModalWarnings["PARENT_MODAL_NOT_SET"] = "Error setting parent modal. Opening modal as normal modal";
-    //#endregion
-    //#region Confirm close
-    ModalWarnings["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
-    //#region Directive usage
-    ModalWarnings["FOOTER_DIRECTIVE_OUTSIDE_MODAL"] = "[ModalFooter] Directive used outside of a ModalComponent.";
-    ModalWarnings["HEADER_DIRECTIVE_OUTSIDE_MODAL"] = "[ModalHeader] Directive used outside of a ModalComponent.";
-    //#endregion
-})(ModalWarnings || (ModalWarnings = {}));
-
 class ModalStyleConfig {
     layout;
     breakpoints;
@@ -46,8 +27,8 @@ class ModalStyleConfig {
         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.wrapperClasses = config?.wrapperClasses ?? "";
+        this.wrapperStyles = config?.wrapperStyles ?? "";
         this.overrideFullHeight = config?.overrideFullHeight ?? false;
     }
 }
@@ -55,7 +36,8 @@ class ModalStyleConfig {
 class ModalConfig {
     open;
     afterClose;
-    confirmCloseConfig;
+    closeGuard;
+    closeGuardOnlyOnCancel;
     disableClose;
     disableCloseOnBackdropClick;
     disableCloseOnNavigation;
@@ -72,7 +54,8 @@ class ModalConfig {
     constructor(config) {
         this.open = config?.open ?? true;
         this.afterClose = config?.afterClose;
-        this.confirmCloseConfig = config?.confirmCloseConfig;
+        this.closeGuard = config?.closeGuard;
+        this.closeGuardOnlyOnCancel = config?.closeGuardOnlyOnCancel ?? true;
         this.disableClose = config?.disableClose ?? false;
         this.disableCloseOnBackdropClick = config?.disableCloseOnBackdropClick ?? false;
         this.disableCloseOnNavigation = config?.disableCloseOnNavigation ?? false;
@@ -80,9 +63,9 @@ class ModalConfig {
         this.webkitOnlyOverflowMobileHandling = config?.webkitOnlyOverflowMobileHandling ?? true;
         this.data = config?.data ?? null;
         this.style = new ModalStyleConfig(config?.style);
-        this.bannerText = config?.bannerText ?? EMPTY_STRING;
-        this.contentClasses = config?.contentClasses ?? EMPTY_STRING;
-        this.contentStyles = config?.contentStyles ?? EMPTY_STRING;
+        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 ?? uuidv4();
@@ -98,6 +81,7 @@ var ModalState;
 })(ModalState || (ModalState = {}));
 
 class ModalRef {
+    componentType;
     modalService;
     //#region Modal Container
     _modalContainer = {};
@@ -147,13 +131,6 @@ class ModalRef {
     getStatus() {
         return this._modalState;
     }
-    _selfIdentifier = {};
-    set selfIdentifier(selfIdentifier) {
-        this._selfIdentifier = selfIdentifier;
-    }
-    get selfIdentifier() {
-        return this._selfIdentifier;
-    }
     _modalConfig = undefined;
     set modalConfig(modalConfig) {
         this._modalConfig = modalConfig;
@@ -171,6 +148,10 @@ class ModalRef {
         this.backdropClickSubject.next(event);
     }
     afterCloseSubject = new Subject();
+    /**
+     * Observable that emits when the modal has been closed.
+     * @returns An Observable that emits an IModalCloseResult<R> when the modal is closed.
+     */
     afterClosed() {
         return this.afterCloseSubject.asObservable();
     }
@@ -178,13 +159,13 @@ class ModalRef {
         this.afterCloseSubject.next(result);
     }
     //#endregion
-    constructor(componentRef, selfIdentifier, modalContainerRef, modalService, modalConfig) {
+    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;
-        this.selfIdentifier = selfIdentifier;
     }
     //#region Public Methods
     async open() {
@@ -217,62 +198,11 @@ class ModalRef {
             this._modalState = ModalState.CLOSED;
             this.modalState.next(ModalState.CLOSED);
             this.afterClose(result);
-            this.modalService?.close(this.selfIdentifier, true);
+            this.modalService?.unregister(this);
         }, this.modalContainerRef.instance.animationDuration);
     }
 }
 
-class Modal {
-    ModalService = inject(ModalService);
-    modal;
-    modalGetSubscription$ = new Subject();
-    constructor() {
-        this.createModalSubscription();
-    }
-    ngOnDestroy() {
-        this.onDestroy();
-        this.unsubscribeModalGet();
-    }
-    createModalSubscription() {
-        this.modalGetSubscription$ = new Subject();
-        this.ModalService
-            .getSubscribe(this.constructor)
-            .pipe(takeUntil(this.modalGetSubscription$))
-            .subscribe((modal) => {
-            if (modal instanceof ModalRef) {
-                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: "21.1.1", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: Modal });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: Modal, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-var ModalErrors;
-(function (ModalErrors) {
-    //#region General
-    ModalErrors["MODAL_DOESNT_MATCH_THE_REQUESTED_TYPES"] = "The modal doesn't match the requested types.";
-    //#endregion
-    //#region Multi-level modals
-    ModalErrors["PARENT_MODAL_CANT_BE_THE_SAME_AS_CHILD"] = "Parent modal cannot be the same as the child modal";
-    ModalErrors["PARENT_MODAL_NOT_FOUND"] = "Parent modal does not exist";
-    ModalErrors["PARENT_MODAL_NOT_PROVIDED"] = "No parent modal provided for multilevel modal";
-    //#endregion
-})(ModalErrors || (ModalErrors = {}));
-
 const MODAL_DATA = new InjectionToken("MODAL_DATA");
 
 class ModalService {
@@ -284,14 +214,14 @@ class ModalService {
     renderer;
     document = inject(DOCUMENT);
     //#region Properties
-    modals = new Map();
+    modals = new Set();
     modalsSubject = new BehaviorSubject(this.modals);
     //#endregion
     constructor() {
         this.renderer = this.rendererFactory.createRenderer(null, null);
         this.createSubscriptions();
     }
-    //#region Private Methods
+    //#region Subscription Methods
     createSubscriptions() {
         this.router.events
             .pipe(filter((event) => event instanceof NavigationEnd), skip(1), takeUntilDestroyed())
@@ -303,6 +233,12 @@ class ModalService {
     }
     //#endregion
     //#region Public Methods
+    /**
+     * Opens a modal with the specified component and configuration.
+     * @param component The component to be displayed in the modal.
+     * @param config Optional configuration for the modal.
+     * @returns A ModalRef instance representing the opened modal.
+     */
     open(component, config) {
         const dataInjector = Injector.create({
             providers: [{ provide: MODAL_DATA, useValue: config?.data }],
@@ -327,6 +263,10 @@ class ModalService {
         this.appRef.attachView(wrapperRef.hostView);
         this.document.body.appendChild(wrapperRef.location.nativeElement);
         const modal = new ModalRef(contentRef, component, wrapperRef, this, new ModalConfig(config));
+        if (this.isIModal(contentRef.instance)) {
+            contentRef.instance.modal = modal;
+            contentRef.instance.onModalInit();
+        }
         wrapperRef.onDestroy(() => {
             this.appRef.detachView(wrapperRef.hostView);
             wrapperRef.location.nativeElement.remove();
@@ -336,66 +276,64 @@ class ModalService {
         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.modals.add(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 ModalRef) {
-                    modal.close();
-                }
-            }
-            this.modals.delete(self);
-            this.modalsSubject.next(this.modals);
-        }
+    /**
+     * Closes the specified modal.
+     * @param modal The ModalRef instance representing the modal to be closed.
+     */
+    close(modal) {
+        modal.close();
+    }
+    /**
+     * Unregisters the specified modal from the service.
+     * @param modal The ModalRef instance representing the modal to be unregistered.
+     */
+    unregister(modal) {
+        this.modals.delete(modal);
+        this.modalsSubject.next(this.modals);
     }
+    /**
+     * Closes all open modals.
+     * @param onNavigate Indicates if the closeAll is triggered by navigation event.
+    */
     closeAll(onNavigate = false) {
         this.modals.forEach((modal) => {
-            if (modal instanceof ModalRef) {
-                if (modal.modalConfig?.disableCloseOnNavigation !== true || !onNavigate) {
-                    modal.close("cancel", undefined, true);
-                }
+            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;
-        }));
+    /**
+     * Finds if a modal with the specified component type is currently open.
+     * @param componentType The component type to search for.
+     * @returns True if a modal with the specified component type is open, false otherwise.
+     */
+    find(componentType) {
+        for (const modal of this.modals) {
+            if (modal.componentRef.componentType === componentType) {
+                return true;
+            }
+        }
+        return false;
     }
+    /**
+     * Gets the count of currently open modals.
+     * @returns The number of open modals.
+    */
     modalsCount() {
         return this.modals.size;
     }
-    find(self) {
-        return this.modals.has(self);
-    }
     //#endregion
     //#region Helper Methods
-    modalRequestedTypeCheck(modal) {
-        if (modal) {
-            if (modal instanceof ModalRef) {
-                if (!(modal.componentRef.instance instanceof Modal)) {
-                    throw new Error(ModalErrors.MODAL_DOESNT_MATCH_THE_REQUESTED_TYPES);
-                }
-            }
-            else if (!(modal instanceof ModalCore)) {
-                throw new Error(ModalErrors.MODAL_DOESNT_MATCH_THE_REQUESTED_TYPES);
-            }
-        }
-        return true;
+    isIModal(component) {
+        return (typeof component === 'object' &&
+            component !== null &&
+            'onModalInit' in component &&
+            typeof component.onModalInit === 'function');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalService, providedIn: "root" });
@@ -699,23 +637,27 @@ class ModalCore {
     deviceTypeService = inject(DeviceTypeService);
     afterClose = output();
     animationDuration = MODAL_DEFAULT_ANIM_DURATION;
+    /** The component reference (the component that is being displayed in the modal) */
     componentRef = {};
+    /** The configuration for the modal */
     config;
     closeFunction;
     backdropClickSubject = new Subject();
+    /* Observable for backdrop clicks */
     backdropClick = this.backdropClickSubject.asObservable();
+    /* Whether the modal is open or not */
     isOpen = signal(true, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-    isBottomSheetModalActive = signal(false, ...(ngDevMode ? [{ debugName: "isBottomSheetModalActive" }] : []));
     effectiveLayout = signal('center', ...(ngDevMode ? [{ debugName: "effectiveLayout" }] : []));
     isCentered = signal(false, ...(ngDevMode ? [{ debugName: "isCentered" }] : []));
     isSide = signal(false, ...(ngDevMode ? [{ debugName: "isSide" }] : []));
     headerTemplate = signal(null, ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
     footerTemplate = signal(null, ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
+    isBottomSheetModalActive = signal(false, ...(ngDevMode ? [{ debugName: "isBottomSheetModalActive" }] : []));
     isAnimated = false;
     hasBanner = false;
     hasDefaultContentWrapperClass = false;
     isConfirmCloseModalOpen = false;
-    isSpecialMobileOverflowHandlingEnabled = false;
+    isScrollHandlingEnabled = false;
     isScrollDisabled = false;
     _sortedBreakpoints = [];
     windowDimensions = this.windowDimensionsService.dimensions;
@@ -765,7 +707,10 @@ class ModalCore {
     //#endregion
     //#region Initialization Methods
     initParamsFromConfig() {
-        this.isSpecialMobileOverflowHandlingEnabled = (this.deviceTypeService.getDeviceState().isAppleDevice || this.config?.webkitOnlyOverflowMobileHandling === false);
+        this.isScrollHandlingEnabled =
+            this.deviceTypeService.getDeviceState().isAppleDevice
+                || this.config?.webkitOnlyOverflowMobileHandling === false
+                || this.config?.enableExtremeOverflowHandling === true;
         this.hasBanner =
             this.config !== undefined &&
                 ((this.config.bannerText !== undefined && this.config.bannerText.length > 0) ||
@@ -795,50 +740,40 @@ class ModalCore {
     }
     //#endregion
     //#region Closing Methods
+    /**
+     * Closes the modal with the specified state and result.
+     * @param {ModalCloseMode} state The state of the modal close (e.g., 'confirm', 'cancel').
+     * @param {R | undefined} result The result to be returned when the modal closes.
+     * @param {boolean} fromInsideInteraction Whether the close was triggered from inside the modal interaction.
+     * @param {boolean} forceClose Whether to force close the modal, bypassing the close guards.
+    */
     close(state = "cancel", result = undefined, fromInsideInteraction = false, forceClose = false) {
-        if (this.isConfirmCloseModalOpen)
+        if (forceClose) {
+            this.handleClose(state, result);
             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 ?? {
-                            breakpoints: undefined,
-                        },
-                        disableClose: true,
-                        bannerText: this.config.confirmCloseConfig.bannerText ?? EMPTY_STRING,
-                        data: this.config.confirmCloseConfig.data ?? null,
-                    });
-                    this.isConfirmCloseModalOpen = true;
-                    if (this.isBottomSheetModalActive()) {
-                        this.resetBottomSheetModalLayout();
-                    }
-                    modal.afterClosed()
-                        .pipe(take(1))
-                        .subscribe((_result) => {
-                        this.isConfirmCloseModalOpen = false;
-                        if (_result.state === 'confirm') {
-                            this.handleClose(state, result);
-                        }
-                    });
+        if ((this.config?.disableClose === true) && fromInsideInteraction) {
+            return;
+        }
+        const shouldCheckCloseGuard = this.config?.closeGuardOnlyOnCancel !== true || state !== "confirm";
+        if (shouldCheckCloseGuard && this.config?.closeGuard) {
+            const guardResult = this.config.closeGuard.canClose(this.modalService);
+            const canClose$ = guardResult instanceof Observable ? guardResult :
+                guardResult instanceof Promise ? from(guardResult) :
+                    of(guardResult);
+            canClose$.pipe(take(1)).subscribe((canClose) => {
+                if (canClose) {
+                    this.handleClose(state, result);
                 }
                 else {
-                    if (this.config?.disableConsoleWarnings !== true) {
-                        console.warn(ModalWarnings.CONFIRM_MODAL_NESTING_NOT_SUPPORTED);
+                    if (this.isBottomSheetModalActive()) {
+                        this.resetBottomSheetModalLayout();
                     }
-                    this.handleClose(state, result);
                 }
-            }
-            else {
-                this.handleClose(state, result);
-            }
-        }
-        else if (this.isBottomSheetModalActive()) {
-            this.resetBottomSheetModalLayout();
+            });
+            return;
         }
+        this.handleClose(state, result);
     }
     async handleClose(state, result) {
         this.isOpen.set(false);
@@ -858,28 +793,6 @@ class ModalCore {
         }
     }
     //#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 Layout Methods
     handleLayout(width) {
         if (!this.config)
@@ -914,18 +827,20 @@ class ModalCore {
     }
     handleBottomSheetModalOpened() {
         this.isBottomSheetModalActive.set(true);
-        this.scrollLockService.disableScroll({
-            mainContainer: this.modalContainer?.nativeElement,
-            handleExtremeOverflow: this.config?.enableExtremeOverflowHandling ?? false,
-            animationDuration: this.animationDuration,
-            handleTouchInput: true,
-            mobileOnlyTouchPrevention: true,
-        });
-        this.isScrollDisabled = true;
+        if (this.isScrollHandlingEnabled && !this.isScrollDisabled) {
+            this.scrollLockService.disableScroll({
+                mainContainer: this.modalContainer?.nativeElement,
+                handleExtremeOverflow: this.config?.enableExtremeOverflowHandling ?? false,
+                animationDuration: this.animationDuration,
+                handleTouchInput: true,
+                mobileOnlyTouchPrevention: true,
+            });
+            this.isScrollDisabled = true;
+        }
     }
     handleBottomSheetModalClosed() {
         this.isBottomSheetModalActive.set(false);
-        if (this.isOpen() && this.isSpecialMobileOverflowHandlingEnabled) {
+        if (this.isOpen() && this.isScrollHandlingEnabled && this.isScrollDisabled) {
             this.scrollLockService.enableScroll(this.config?.enableExtremeOverflowHandling ?? false);
             this.isScrollDisabled = false;
         }
@@ -976,10 +891,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 args: [ModalCentered]
             }] } });
 
-const LOWEST_CHARACTER_CAP = 23;
-const LOWER_CHARACTER_CAP = 33;
-const MID_CHARACTER_CAP = 49;
-const UPPER_CHARACTER_CAP = 60;
+class Modal {
+    /**
+     * Data injected into the modal component.
+     */
+    data = inject(MODAL_DATA);
+    /**
+     * Reference to the ModalRef instance associated with this 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.1", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: Modal });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: Modal, decorators: [{
+            type: Injectable
+        }] });
+
+var ModalWarnings;
+(function (ModalWarnings) {
+    //#region Directive usage
+    ModalWarnings["FOOTER_DIRECTIVE_OUTSIDE_MODAL"] = "[ModalFooter] Directive used outside of a ModalComponent.";
+    ModalWarnings["HEADER_DIRECTIVE_OUTSIDE_MODAL"] = "[ModalHeader] Directive used outside of a ModalComponent.";
+    //#endregion
+})(ModalWarnings || (ModalWarnings = {}));
 
 class ModalFooterDirective {
     templateRef = inject(TemplateRef);
@@ -1011,5 +956,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { EMPTY_STRING, LOWER_CHARACTER_CAP, LOWEST_CHARACTER_CAP, MID_CHARACTER_CAP, MODAL_DATA, MODAL_DEFAULT_ANIM_DURATION, MODAL_DEFAULT_ANIM_DURATION_MULTIPLIER_LARGE, MODAL_DEFAULT_ANIM_DURATION_MULTIPLIER_SMALL, MODAL_DEFAULT_INTERNAL_ANIM_DURATION, MODAL_DOWN_SWIPE_LIMIT, MODAL_SWIPE_VELOCITY_THRESHOLD, Modal, ModalBackdrop, ModalBanner, ModalBottomSheet, ModalCentered, ModalConfig, ModalCore, ModalErrors, ModalFooterDirective, ModalRef, ModalService, ModalSide, ModalState, ModalStyleConfig, ModalWarnings, UPPER_CHARACTER_CAP };
+export { MODAL_DATA, MODAL_DEFAULT_ANIM_DURATION, MODAL_DEFAULT_ANIM_DURATION_MULTIPLIER_LARGE, MODAL_DEFAULT_ANIM_DURATION_MULTIPLIER_SMALL, MODAL_DEFAULT_INTERNAL_ANIM_DURATION, MODAL_DOWN_SWIPE_LIMIT, MODAL_SWIPE_VELOCITY_THRESHOLD, Modal, ModalBackdrop, ModalBanner, ModalBottomSheet, ModalCentered, ModalConfig, ModalCore, ModalFooterDirective, ModalRef, ModalService, ModalSide, ModalState, ModalStyleConfig, ModalWarnings };
 //# sourceMappingURL=filip.mazev-modal.mjs.map