@nuraly/lumenui 0.1.0

package/dist/src/components/modal/modal-manager.js

@@ -0,0 +1,170 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Modal Manager - Singleton class to handle nested modals
+ * Manages the modal stack, z-index allocation, and focus management
+ */
+class ModalManagerClass {
+    constructor() {
+        this.modalStack = [];
+        this.baseZIndex = 1000;
+        this.zIndexIncrement = 10;
+        this.bodyScrollDisabled = false;
+        this.originalBodyOverflow = '';
+    }
+    /**
+     * Opens a modal and adds it to the stack
+     */
+    openModal(modal) {
+        const id = this.generateModalId();
+        const zIndex = this.baseZIndex + (this.modalStack.length * this.zIndexIncrement);
+        // Store the currently focused element
+        const previousFocus = document.activeElement;
+        // Add to stack
+        const stackItem = {
+            modal,
+            previousFocus,
+            zIndex,
+            id
+        };
+        this.modalStack.push(stackItem);
+        // Disable body scroll for the first modal
+        if (this.modalStack.length === 1) {
+            this.disableBodyScroll();
+        }
+        // Update modal z-index
+        this.updateModalZIndex(modal, zIndex);
+        return zIndex;
+    }
+    /**
+     * Closes a modal and removes it from the stack
+     */
+    closeModal(modal) {
+        const index = this.modalStack.findIndex(item => item.modal === modal);
+        if (index === -1) {
+            console.warn('Attempting to close a modal that is not in the stack');
+            return;
+        }
+        const stackItem = this.modalStack[index];
+        // If this is not the top modal, close all modals above it first
+        if (index < this.modalStack.length - 1) {
+            const modalsToClose = this.modalStack.slice(index + 1);
+            modalsToClose.forEach(item => {
+                if (item.modal && typeof item.modal.closeModal === 'function') {
+                    item.modal.closeModal();
+                }
+            });
+        }
+        // Remove from stack
+        this.modalStack.splice(index);
+        // Restore focus to the previous element
+        if (stackItem.previousFocus instanceof HTMLElement) {
+            // Use setTimeout to ensure the modal DOM changes are complete
+            setTimeout(() => {
+                if (stackItem.previousFocus instanceof HTMLElement) {
+                    stackItem.previousFocus.focus();
+                }
+            }, 100);
+        }
+        // If this was the last modal, restore body scroll
+        if (this.modalStack.length === 0) {
+            this.restoreBodyScroll();
+        }
+        console.log(`Modal closed. Stack depth: ${this.modalStack.length}`);
+    }
+    /**
+     * Gets the current z-index for a modal
+     */
+    getModalZIndex(modal) {
+        const stackItem = this.modalStack.find(item => item.modal === modal);
+        return stackItem ? stackItem.zIndex : this.baseZIndex;
+    }
+    /**
+     * Checks if a modal is the top modal in the stack
+     */
+    isTopModal(modal) {
+        if (this.modalStack.length === 0)
+            return false;
+        return this.modalStack[this.modalStack.length - 1].modal === modal;
+    }
+    /**
+     * Gets the number of open modals
+     */
+    getStackDepth() {
+        return this.modalStack.length;
+    }
+    /**
+     * Closes all modals
+     */
+    closeAllModals() {
+        // Close from top to bottom to maintain proper order
+        const modalsToClose = [...this.modalStack].reverse();
+        modalsToClose.forEach(item => {
+            if (item.modal && typeof item.modal.closeModal === 'function') {
+                item.modal.closeModal();
+            }
+        });
+    }
+    /**
+     * Gets all open modal IDs
+     */
+    getOpenModalIds() {
+        return this.modalStack.map(item => item.id);
+    }
+    /**
+     * Checks if any modals are open
+     */
+    hasOpenModals() {
+        return this.modalStack.length > 0;
+    }
+    generateModalId() {
+        return `modal-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    updateModalZIndex(modal, zIndex) {
+        if (modal && modal.style) {
+            modal.style.setProperty('--nuraly-z-modal-backdrop', zIndex.toString());
+        }
+    }
+    disableBodyScroll() {
+        if (!this.bodyScrollDisabled) {
+            this.originalBodyOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+            this.bodyScrollDisabled = true;
+        }
+    }
+    restoreBodyScroll() {
+        if (this.bodyScrollDisabled) {
+            document.body.style.overflow = this.originalBodyOverflow;
+            this.bodyScrollDisabled = false;
+        }
+    }
+    /**
+     * Handle Escape key for nested modals - only close the top modal
+     */
+    handleEscapeKey() {
+        if (this.modalStack.length === 0)
+            return false;
+        const topModal = this.modalStack[this.modalStack.length - 1].modal;
+        if (topModal && typeof topModal.closeModal === 'function' && topModal.closable !== false) {
+            topModal.closeModal();
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Handle backdrop clicks - only close if it's the top modal
+     */
+    handleBackdropClick(modal) {
+        return this.isTopModal(modal);
+    }
+}
+// Export singleton instance
+export const ModalManager = new ModalManagerClass();
+// Make it available globally for debugging
+if (typeof window !== 'undefined') {
+    window.ModalManager = ModalManager;
+}
+//# sourceMappingURL=modal-manager.js.map

package/dist/src/components/modal/modal.component.d.ts

@@ -0,0 +1,121 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, nothing, type PropertyValues } from 'lit';
+import { ModalSize, ModalPosition, ModalAnimation, ModalBackdrop } from './modal.types.js';
+import { ModalDragHost, ModalKeyboardHost } from './controllers/index.js';
+declare const NrModalElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+/**
+ * Versatile modal component with multiple sizes, animations, and enhanced functionality.
+ *
+ * @example
+ * ```html
+ * <!-- Simple usage -->
+ * <nr-modal open title="My Modal">
+ *   <p>Modal content goes here</p>
+ * </nr-modal>
+ *
+ * <!-- With custom configuration -->
+ * <nr-modal
+ *   open
+ *   size="large"
+ *   position="top"
+ *   animation="zoom"
+ *   backdrop="static"
+ *   draggable>
+ *   <div slot="header">
+ *     <nr-icon name="info"></nr-icon>
+ *     <span>Custom Header</span>
+ *   </div>
+ *   <p>Modal content</p>
+ *   <div slot="footer">
+ *     <nr-button type="secondary">Cancel</nr-button>
+ *     <nr-button type="primary">OK</nr-button>
+ *   </div>
+ * </nr-modal>
+ * ```
+ *
+ * @fires modal-open - Modal opened
+ * @fires modal-close - Modal closed
+ * @fires modal-before-close - Before modal closes (cancelable)
+ * @fires modal-after-open - After modal opens
+ * @fires modal-escape - Escape key pressed
+ *
+ * @slot default - Modal body content
+ * @slot header - Custom header content
+ * @slot footer - Custom footer content
+ */
+export declare class NrModalElement extends NrModalElement_base implements ModalDragHost, ModalKeyboardHost {
+    static styles: import("lit").CSSResult;
+    /** Whether the modal is open */
+    open: boolean;
+    /** Modal size (small, medium, large, xl) */
+    size: ModalSize;
+    /** Modal position (center, top, bottom) */
+    position: ModalPosition;
+    /** Animation type */
+    animation: ModalAnimation;
+    /** Backdrop behavior */
+    backdrop: ModalBackdrop;
+    /** Whether the modal can be closed */
+    closable: boolean;
+    /** Whether the modal can be dragged */
+    modalDraggable: boolean;
+    /** Whether the modal is resizable */
+    resizable: boolean;
+    /** Whether the modal is fullscreen */
+    fullscreen: boolean;
+    /** Modal title */
+    modalTitle: string;
+    /** Show close button in header */
+    showCloseButton: boolean;
+    /** Header icon */
+    headerIcon: string;
+    /** Z-index for the modal */
+    zIndex: number;
+    /** Custom width */
+    width: string;
+    /** Custom height */
+    height: string;
+    /** Dragging state */
+    isDragging: boolean;
+    /** Current X offset for dragging */
+    offsetX: number;
+    /** Current Y offset for dragging */
+    offsetY: number;
+    /** Animation state */
+    private animationState;
+    /** Previous focus element */
+    private previousActiveElement;
+    requiredComponents: string[];
+    private dragController;
+    private keyboardController;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    private handleOpen;
+    private startOpenAnimation;
+    private getAnimationKeyframes;
+    private handleClose;
+    /**
+     * Opens the modal
+     */
+    openModal(): void;
+    /**
+     * Closes the modal
+     */
+    closeModal: () => void;
+    private handleBackdropClick;
+    private getBackdropClasses;
+    private getModalClasses;
+    private getModalStyles;
+    private renderHeader;
+    private renderFooter;
+    updated(): void;
+    private updateDataTheme;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=modal.component.d.ts.map