@nuralyui/modal 0.0.3 → 0.0.4

package/index.d.ts

@@ -1,2 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
 export * from './modal.component.js';
+export * from './modal.types.js';
+export * from './modal-manager.js';
+export * from './controllers/index.js';
 //# sourceMappingURL=index.d.ts.map

package/index.js

@@ -1,2 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
 export * from './modal.component.js';
+export * from './modal.types.js';
+export * from './modal-manager.js';
+export * from './controllers/index.js';
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/modal/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC","sourcesContent":["export * from './modal.component.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/modal/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nexport * from './modal.component.js';\nexport * from './modal.types.js';\nexport * from './modal-manager.js';\nexport * from './controllers/index.js';\n"]}

package/modal-manager.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Modal stack item interface
+ */
+export interface ModalStackItem {
+    modal: any;
+    previousFocus: Element | null;
+    zIndex: number;
+    id: string;
+}
+/**
+ * Modal Manager - Singleton class to handle nested modals
+ * Manages the modal stack, z-index allocation, and focus management
+ */
+declare class ModalManagerClass {
+    private modalStack;
+    private baseZIndex;
+    private zIndexIncrement;
+    private bodyScrollDisabled;
+    private originalBodyOverflow;
+    /**
+     * Opens a modal and adds it to the stack
+     */
+    openModal(modal: any): number;
+    /**
+     * Closes a modal and removes it from the stack
+     */
+    closeModal(modal: any): void;
+    /**
+     * Gets the current z-index for a modal
+     */
+    getModalZIndex(modal: any): number;
+    /**
+     * Checks if a modal is the top modal in the stack
+     */
+    isTopModal(modal: any): boolean;
+    /**
+     * Gets the number of open modals
+     */
+    getStackDepth(): number;
+    /**
+     * Closes all modals
+     */
+    closeAllModals(): void;
+    /**
+     * Gets all open modal IDs
+     */
+    getOpenModalIds(): string[];
+    /**
+     * Checks if any modals are open
+     */
+    hasOpenModals(): boolean;
+    private generateModalId;
+    private updateModalZIndex;
+    private disableBodyScroll;
+    private restoreBodyScroll;
+    /**
+     * Handle Escape key for nested modals - only close the top modal
+     */
+    handleEscapeKey(): boolean;
+    /**
+     * Handle backdrop clicks - only close if it's the top modal
+     */
+    handleBackdropClick(modal: any): boolean;
+}
+export declare const ModalManager: ModalManagerClass;
+export {};
+//# sourceMappingURL=modal-manager.d.ts.map

package/modal-manager.js

@@ -0,0 +1,171 @@
+/**
+ * @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);
+        console.log(`Modal opened. Stack depth: ${this.modalStack.length}, Z-Index: ${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/modal-manager.js.map

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

package/modal.component.d.ts

@@ -1,24 +1,123 @@
-import { LitElement } from 'lit';
-export declare class ModalComponent extends LitElement {
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, nothing, PropertyValues } from 'lit';
+import { ModalSize, ModalPosition, ModalAnimation, ModalBackdrop } from './modal.types.js';
+import '../icon/icon.component.js';
+import '../button/button.component.js';
+import { ModalDragHost, ModalKeyboardHost } from './controllers/index.js';
+declare const NrModalElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").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;
-    isOpen: boolean;
-    label: string;
-    private offsetX;
-    private offsetY;
-    private isDragging;
-    private initialX;
-    private initialY;
+    /** 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;
-    private startDrag;
-    private drag;
-    private handleKeyDown;
-    private handleOutsideClick;
-    private isChildDialog;
+    willUpdate(changedProperties: PropertyValues): void;
+    private handleOpen;
+    private startOpenAnimation;
+    private getAnimationKeyframes;
+    private handleClose;
+    /**
+     * Opens the modal
+     */
+    openModal(): void;
+    /**
+     * Closes the modal
+     */
     closeModal(): void;
-    private adjustDialogPosition;
-    updated(changedProperties: Map<string | number | symbol, unknown>): void;
-    private stopDrag;
-    render(): import("lit").TemplateResult<1>;
+    private handleBackdropClick;
+    private getBackdropClasses;
+    private getModalClasses;
+    private getModalStyles;
+    private renderHeader;
+    private renderFooter;
+    updated(): void;
+    private updateDataTheme;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
 }
+export {};
 //# sourceMappingURL=modal.component.d.ts.map