@nuraly/lumenui 0.1.0

package/dist/src/components/modal/modal.component.js

@@ -0,0 +1,461 @@
+/**
+ * @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;
+};
+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';
+import { ModalSize, ModalPosition, ModalAnimation, ModalBackdrop, EMPTY_STRING } from './modal.types.js';
+import { styles } from './modal.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { ModalManager } from './modal-manager.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);
+        /** 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;
+        /** 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);
+        /**
+         * Closes the modal
+         */
+        this.closeModal = () => {
+            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,
+                    composed: true,
+                    detail: { modal: 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.validateDependencies();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Restore focus when modal is destroyed
+        if (this.previousActiveElement instanceof HTMLElement) {
+            this.previousActiveElement.focus();
+        }
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('open')) {
+            if (this.open) {
+                this.handleOpen();
+            }
+            else {
+                this.handleClose();
+            }
+        }
+    }
+    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();
+        });
+    }
+    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';
+            // Clear the animation's fill-forward effect to prevent transform from creating
+            // a containing block for fixed-positioned descendants (e.g., dropdowns)
+            // commitStyles() persists final state, then cancel() removes animation effect
+            modalAnimation.commitStyles();
+            modalAnimation.cancel();
+            // Now clear the transform that was committed
+            modalElement.style.transform = '';
+            // Only focus if this is the top modal
+            if (ModalManager.isTopModal(this)) {
+                this.keyboardController.focusFirstElement();
+            }
+            // 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 { 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;
+    }
+    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;
+    }
+    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=${(e) => {
+            e.stopPropagation();
+            this.open = false;
+            this.dispatchEvent(new CustomEvent('modal-close', {
+                bubbles: true,
+                composed: true,
+                detail: { modal: this }
+            }));
+        }}
+            aria-label="Close modal"
+            type="button">
+            <nr-icon class="modal-close-icon" name="x"></nr-icon>
+          </button>
+        ` : nothing}
+      </div>
+    `;
+    }
+    renderFooter() {
+        const hasCustomFooter = this.querySelector('[slot="footer"]');
+        if (!hasCustomFooter) {
+            return nothing;
+        }
+        return html `
+      <div class="modal-footer">
+        <slot name="footer"></slot>
+      </div>
+    `;
+    }
+    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 })
+], 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 })
+], 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()
+], 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()
+], NrModalElement.prototype, "animationState", void 0);
+NrModalElement = __decorate([
+    customElement('nr-modal')
+], NrModalElement);
+export { NrModalElement };
+//# sourceMappingURL=modal.component.js.map

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

@@ -0,0 +1,9 @@
+/**
+ * Modal component styles for the Hybrid UI Library
+ * Using shared CSS variables from /src/shared/themes/
+ *
+ * This file contains all the styling for the nr-modal component with
+ * clean CSS variable usage and proper theme switching support.
+ */
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=modal.style.d.ts.map