@nuralyui/modal 0.0.3 → 0.0.4

package/modal.component.js

@@ -1,202 +1,448 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { css, html, LitElement } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
-export class ModalComponent extends LitElement {
+import { ModalSize, ModalPosition, ModalAnimation, ModalBackdrop, EMPTY_STRING } from './modal.types.js';
+import { styles } from './modal.style.js';
+import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { ModalManager } from './modal-manager.js';
+// Import icon component
+import '../icon/icon.component.js';
+import '../button/button.component.js';
+// Import controllers
+import { ModalDragController, ModalKeyboardController } from './controllers/index.js';
+/**
+ * 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
+ */
+let NrModalElement = class NrModalElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
         super(...arguments);
-        this.label = '';
+        /** Whether the modal is open */
+        this.open = false;
+        /** Modal size (small, medium, large, xl) */
+        this.size = ModalSize.Medium;
+        /** Modal position (center, top, bottom) */
+        this.position = ModalPosition.Center;
+        /** Animation type */
+        this.animation = ModalAnimation.Fade;
+        /** Backdrop behavior */
+        this.backdrop = ModalBackdrop.Closable;
+        /** Whether the modal can be closed */
+        this.closable = true;
+        /** Whether the modal can be dragged */
+        this.modalDraggable = false;
+        /** Whether the modal is resizable */
+        this.resizable = false;
+        /** Whether the modal is fullscreen */
+        this.fullscreen = false;
+        /** Modal title */
+        this.modalTitle = EMPTY_STRING;
+        /** Show close button in header */
+        this.showCloseButton = true;
+        /** Header icon */
+        this.headerIcon = EMPTY_STRING;
+        /** Z-index for the modal */
+        this.zIndex = 1000;
+        /** Custom width */
+        this.width = EMPTY_STRING;
+        /** Custom height */
+        this.height = EMPTY_STRING;
+        /** Dragging state */
+        this.isDragging = false;
+        /** Current X offset for dragging */
         this.offsetX = 0;
+        /** Current Y offset for dragging */
         this.offsetY = 0;
-        this.isDragging = false;
-        this.initialX = 0;
-        this.initialY = 0;
+        /** Animation state */
+        this.animationState = 'closed';
+        /** Previous focus element */
+        this.previousActiveElement = null;
+        this.requiredComponents = ['nr-icon', 'nr-button'];
+        // Controllers
+        this.dragController = new ModalDragController(this);
+        this.keyboardController = new ModalKeyboardController(this);
+        this.handleBackdropClick = (event) => {
+            // Only allow backdrop close if this is the top modal and backdrop is closable
+            if (this.backdrop === ModalBackdrop.Closable &&
+                event.target === event.currentTarget &&
+                ModalManager.handleBackdropClick(this)) {
+                this.closeModal();
+            }
+        };
     }
     connectedCallback() {
         super.connectedCallback();
-        // this.addEventListener('mousedown', this.startDrag);
-        document.addEventListener('mousemove', this.drag.bind(this));
-        // this.addEventListener('mouseup', this.stopDrag);
-        document.addEventListener('keydown', this.handleKeyDown.bind(this));
-        //  document.addEventListener('click', this.handleOutsideClick.bind(this));
+        this.validateDependencies();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        // this.removeEventListener('mousedown', this.startDrag);
-        document.removeEventListener('mousemove', this.drag);
-        // this.removeEventListener('mouseup', this.stopDrag);
-        document.removeEventListener('keydown', this.handleKeyDown.bind(this));
-        document.removeEventListener('click', this.handleOutsideClick.bind(this));
-    }
-    startDrag(event) {
-        if (event.target instanceof HTMLElement) {
-            this.isDragging = true;
-            this.initialX = event.clientX - this.offsetX;
-            this.initialY = event.clientY - this.offsetY;
-            event.preventDefault();
+        // Restore focus when modal is destroyed
+        if (this.previousActiveElement instanceof HTMLElement) {
+            this.previousActiveElement.focus();
         }
     }
-    drag(event) {
-        if (this.isDragging) {
-            this.offsetX = event.clientX - this.initialX;
-            this.offsetY = event.clientY - this.initialY;
-            this.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px)`;
-            event.preventDefault();
-        }
-    }
-    handleKeyDown(event) {
-        if (event.key === 'Escape') {
-            this.closeModal();
-            event.preventDefault();
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('open')) {
+            if (this.open) {
+                this.handleOpen();
+            }
+            else {
+                this.handleClose();
+            }
         }
     }
-    handleOutsideClick(event) {
-        if (this.isOpen && !this.isChildDialog(event.target)) {
-            this.closeModal();
-        }
+    handleOpen() {
+        // Register with modal manager and get z-index
+        const assignedZIndex = ModalManager.openModal(this);
+        this.zIndex = assignedZIndex;
+        // Set animation state to opening
+        this.animationState = 'opening';
+        // Dispatch before open event
+        this.dispatchEvent(new CustomEvent('modal-open', {
+            bubbles: true,
+            detail: { modal: this, stackDepth: ModalManager.getStackDepth() }
+        }));
+        // Wait for DOM update, then start JavaScript animation
+        this.updateComplete.then(() => {
+            this.startOpenAnimation();
+        });
     }
-    isChildDialog(target) {
-        let element = target.parentElement;
-        while (element !== null) {
-            if (element.tagName === 'DIALOG') {
-                return true;
+    startOpenAnimation() {
+        var _a, _b;
+        const modalElement = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.modal');
+        const backdropElement = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.modal-backdrop');
+        if (!modalElement || !backdropElement)
+            return;
+        // Get animation keyframes based on animation type
+        const { modalKeyframes } = this.getAnimationKeyframes();
+        // Start animations
+        const modalAnimation = modalElement.animate(modalKeyframes, {
+            duration: 300,
+            easing: 'ease',
+            fill: 'forwards'
+        });
+        // When animation completes
+        modalAnimation.addEventListener('finish', () => {
+            this.animationState = 'open';
+            // Only focus if this is the top modal
+            if (ModalManager.isTopModal(this)) {
+                this.keyboardController.focusFirstElement();
             }
-            element = element.parentElement;
+            // Dispatch after open event
+            this.dispatchEvent(new CustomEvent('modal-after-open', {
+                bubbles: true,
+                detail: { modal: this, stackDepth: ModalManager.getStackDepth() }
+            }));
+        });
+    }
+    getAnimationKeyframes() {
+        const backdropKeyframes = [
+            { opacity: 0 },
+            { opacity: 1 }
+        ];
+        let modalKeyframes;
+        switch (this.animation) {
+            case 'fade':
+                modalKeyframes = [
+                    { opacity: 0, transform: 'scale(0.9)' },
+                    { opacity: 1, transform: 'scale(1)' }
+                ];
+                break;
+            case 'zoom':
+                modalKeyframes = [
+                    { opacity: 0, transform: 'scale(0.7)' },
+                    { opacity: 1, transform: 'scale(1)' }
+                ];
+                break;
+            case 'slide-up':
+                modalKeyframes = [
+                    { opacity: 0, transform: 'translateY(20px)' },
+                    { opacity: 1, transform: 'translateY(0)' }
+                ];
+                break;
+            case 'slide-down':
+                modalKeyframes = [
+                    { opacity: 0, transform: 'translateY(-20px)' },
+                    { opacity: 1, transform: 'translateY(0)' }
+                ];
+                break;
+            default:
+                modalKeyframes = [
+                    { opacity: 0, transform: 'scale(0.9)' },
+                    { opacity: 1, transform: 'scale(1)' }
+                ];
         }
-        return false;
+        return { modalKeyframes, backdropKeyframes };
+    }
+    handleClose() {
+        this.animationState = 'closing';
+        // Unregister from modal manager
+        ModalManager.closeModal(this);
+        // Reset drag position
+        this.dragController.resetPosition();
+        // Wait for animation to complete
+        setTimeout(() => {
+            this.animationState = 'closed';
+        }, 300);
+    }
+    /**
+     * Opens the modal
+     */
+    openModal() {
+        this.open = true;
     }
+    /**
+     * Closes the modal
+     */
     closeModal() {
-        this.isOpen = false;
-        this.offsetX = 0;
-        this.offsetY = 0;
-        this.style.transform = 'none';
-        this.dispatchEvent(new CustomEvent('close'));
-    }
-    adjustDialogPosition() {
-        var _a;
-        if (this.isOpen) {
-            const dialog = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.modal');
-            if (dialog) {
-                const contentHeight = dialog.clientHeight;
-                const windowHeight = window.innerHeight;
-                const dialogHeight = Math.min(contentHeight + 40, windowHeight - 40);
-                const topPosition = Math.max((windowHeight - dialogHeight) / 2, 0);
-                dialog.style.top = `${topPosition}px`;
+        if (!this.closable)
+            return;
+        // Dispatch before close event (cancelable)
+        const beforeCloseEvent = new CustomEvent('modal-before-close', {
+            bubbles: true,
+            cancelable: true,
+            detail: {
+                modal: this,
+                cancel: () => beforeCloseEvent.preventDefault()
             }
+        });
+        const dispatched = this.dispatchEvent(beforeCloseEvent);
+        // Only close if event wasn't cancelled
+        if (dispatched) {
+            this.open = false;
+            // Dispatch close event
+            this.dispatchEvent(new CustomEvent('modal-close', {
+                bubbles: true,
+                detail: { modal: this }
+            }));
         }
     }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('isOpen')) {
-            if (this.isOpen) {
-                // The dialog has been opened
-                this.adjustDialogPosition();
-            }
+    getBackdropClasses() {
+        return {
+            'modal-backdrop': true,
+            'modal-backdrop--hidden': !this.open,
+            [`modal-backdrop--position-${this.position}`]: true
+        };
+    }
+    getModalClasses() {
+        return {
+            'modal': true,
+            [`modal--size-${this.size}`]: !this.fullscreen,
+            'modal--fullscreen': this.fullscreen,
+            [`modal--animation-${this.animation}`]: this.animationState === 'opening' || this.animationState === 'open',
+            'modal--dragging': this.isDragging,
+            'modal--resizable': this.resizable
+        };
+    }
+    getModalStyles() {
+        const styles = {};
+        if (this.zIndex) {
+            styles['--nuraly-z-modal-backdrop'] = this.zIndex.toString();
+        }
+        if (this.width) {
+            styles.width = this.width;
         }
+        if (this.height) {
+            styles.height = this.height;
+        }
+        return styles;
     }
-    stopDrag() {
-        this.isDragging = false;
+    renderHeader() {
+        const hasCustomHeader = this.querySelector('[slot="header"]');
+        const hasTitle = this.modalTitle || this.headerIcon;
+        if (!hasCustomHeader && !hasTitle && !this.showCloseButton) {
+            return nothing;
+        }
+        return html `
+      <div class="modal-header ${this.modalDraggable ? 'modal-header--draggable' : ''}">
+        ${hasCustomHeader ? html `
+          <div class="modal-header-content">
+            <slot name="header"></slot>
+          </div>
+        ` : hasTitle ? html `
+          <div class="modal-header-content">
+            ${this.headerIcon ? html `
+              <nr-icon class="modal-header-icon" name="${this.headerIcon}"></nr-icon>
+            ` : nothing}
+            ${this.modalTitle ? html `
+              <h2 class="modal-title">${this.modalTitle}</h2>
+            ` : nothing}
+          </div>
+        ` : nothing}
+        
+        ${this.showCloseButton ? html `
+          <button 
+            class="modal-close-button"
+            @click=${this.closeModal}
+            aria-label="Close modal"
+            type="button">
+            <nr-icon class="modal-close-icon" name="close"></nr-icon>
+          </button>
+        ` : nothing}
+      </div>
+    `;
     }
-    render() {
-        const backdropStyles = {
-            display: this.isOpen ? 'block' : 'none',
-        };
-        const modalStyles = {
-            transform: `translate(${this.offsetX}px, ${this.offsetY}px)`,
-        };
+    renderFooter() {
+        const hasCustomFooter = this.querySelector('[slot="footer"]');
+        if (!hasCustomFooter) {
+            return nothing;
+        }
         return html `
-      <div class="backdrop" style=${styleMap(backdropStyles)}></div>
-
-      <dialog class="modal" ?open="${this.isOpen}" style=${styleMap(modalStyles)}>
-        <hy-icon
-          class="close-icon"
-          name="window-close"
-          style="float: right;"
-          @click=${() => (this.closeModal())}
-        ></hy-icon>
-        <h2 class="dialog-label" @mousedown=${this.startDrag} @mouseup=${this.stopDrag}>${this.label}</h2>
-        <slot></slot>
+      <div class="modal-footer">
         <slot name="footer"></slot>
-      </dialog>
+      </div>
     `;
     }
-}
-ModalComponent.styles = css `
-  :host {
-    font-size: 16px;
-    }
-    .modal {
-      position: fixed;
-      z-index: 9999;
-      background-color: #ffffff;
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
-    }
-
-    dialog {
-      border: 0;
-      box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-        0 9px 28px 8px rgba(0, 0, 0, 0.05);
-      min-width: 400px;
-      min-height: 200px;
-    }
-
-    .dialog-label {
-      cursor: move;
-    }
-
-    .backdrop {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(0, 0, 0, 0.3);
-      z-index: 9998;
-    }
-
-    .close-icon {
-      cursor: pointer;
-    }
-    ::slotted([slot='footer']) {
-      /* Styles applied specifically to slotted elements with slot="custom-slot" */
-      bottom: 0;
-      position: absolute;
-      text-align: end;
-      margin-bottom: 10px;
-      width : 93%;
-    }
-
-    ::slotted([slot='content']) {
-      padding: 0px 24px 20px 24px;
-    }
-    @media (prefers-color-scheme: dark) {
-      .modal {
-        background-color: rgb(74, 74, 74);
-        color: #ffffff;
-      } 
-      .backdrop {
-        background-color: rgba(0, 0, 0, 0.3);
-      }
-    }
-
-  `;
+    updated() {
+        this.updateDataTheme();
+    }
+    updateDataTheme() {
+        if (!this.closest('[data-theme]')) {
+            this.setAttribute('data-theme', this.currentTheme);
+        }
+    }
+    render() {
+        if (!this.open && this.animationState === 'closed') {
+            return nothing;
+        }
+        return html `
+      <div 
+        class=${classMap(this.getBackdropClasses())}
+        @click=${this.handleBackdropClick}
+        style=${styleMap(this.getModalStyles())}>
+        
+        <div 
+          class=${classMap(this.getModalClasses())}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby=${this.modalTitle ? 'modal-title' : nothing}
+          tabindex="-1">
+          
+          ${this.renderHeader()}
+          
+          <div class="modal-body">
+            <slot></slot>
+          </div>
+          
+          ${this.renderFooter()}
+          
+          ${this.resizable ? html `
+            <div class="resize-handle"></div>
+          ` : nothing}
+        </div>
+      </div>
+    `;
+    }
+};
+NrModalElement.styles = styles;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrModalElement.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], NrModalElement.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], NrModalElement.prototype, "position", void 0);
+__decorate([
+    property({ type: String })
+], NrModalElement.prototype, "animation", void 0);
+__decorate([
+    property({ type: String })
+], NrModalElement.prototype, "backdrop", void 0);
 __decorate([
     property({ type: Boolean })
-], ModalComponent.prototype, "isOpen", void 0);
+], NrModalElement.prototype, "closable", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrModalElement.prototype, "modalDraggable", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrModalElement.prototype, "resizable", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrModalElement.prototype, "fullscreen", void 0);
+__decorate([
+    property({ type: String })
+], NrModalElement.prototype, "modalTitle", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-close-button' })
+], NrModalElement.prototype, "showCloseButton", void 0);
 __decorate([
     property({ type: String })
-], ModalComponent.prototype, "label", void 0);
+], NrModalElement.prototype, "headerIcon", void 0);
+__decorate([
+    property({ type: Number })
+], NrModalElement.prototype, "zIndex", void 0);
+__decorate([
+    property({ type: String })
+], NrModalElement.prototype, "width", void 0);
+__decorate([
+    property({ type: String })
+], NrModalElement.prototype, "height", void 0);
 __decorate([
     state()
-], ModalComponent.prototype, "offsetX", void 0);
+], NrModalElement.prototype, "isDragging", void 0);
+__decorate([
+    property({ type: Number })
+], NrModalElement.prototype, "offsetX", void 0);
+__decorate([
+    property({ type: Number })
+], NrModalElement.prototype, "offsetY", void 0);
 __decorate([
     state()
-], ModalComponent.prototype, "offsetY", void 0);
-customElements.define('modal-component', ModalComponent);
+], NrModalElement.prototype, "animationState", void 0);
+NrModalElement = __decorate([
+    customElement('nr-modal')
+], NrModalElement);
+export { NrModalElement };
 //# sourceMappingURL=modal.component.js.map