@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/modal/controllers/modal-drag-controller.js

@@ -0,0 +1,108 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Controller for handling modal drag functionality
+ */
+export class ModalDragController {
+    constructor(host) {
+        this.initialX = 0;
+        this.initialY = 0;
+        this.dragHandle = null;
+        this.handleMouseDown = (event) => {
+            var _a;
+            if (!this.host.modalDraggable)
+                return;
+            event.preventDefault();
+            this.host.isDragging = true;
+            this.initialX = event.clientX - this.host.offsetX;
+            this.initialY = event.clientY - this.host.offsetY;
+            // Add dragging class for styling
+            const modal = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.modal');
+            if (modal) {
+                modal.classList.add('modal--dragging');
+            }
+        };
+        this.handleMouseMove = (event) => {
+            var _a;
+            if (!this.host.isDragging || !this.host.modalDraggable)
+                return;
+            event.preventDefault();
+            // Calculate new position
+            const newX = event.clientX - this.initialX;
+            const newY = event.clientY - this.initialY;
+            // Get modal and viewport dimensions for boundary checking
+            const modal = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.modal');
+            if (modal) {
+                const modalRect = modal.getBoundingClientRect();
+                const viewportWidth = window.innerWidth;
+                const viewportHeight = window.innerHeight;
+                // Keep modal within viewport bounds
+                const minX = -modalRect.width / 2;
+                const maxX = viewportWidth - modalRect.width / 2;
+                const minY = -modalRect.height / 2;
+                const maxY = viewportHeight - modalRect.height / 2;
+                this.host.offsetX = Math.max(minX, Math.min(maxX, newX));
+                this.host.offsetY = Math.max(minY, Math.min(maxY, newY));
+                // Apply transform
+                modal.style.transform = `translate(${this.host.offsetX}px, ${this.host.offsetY}px)`;
+            }
+            this.host.requestUpdate();
+        };
+        this.handleMouseUp = () => {
+            var _a;
+            if (!this.host.isDragging)
+                return;
+            this.host.isDragging = false;
+            // Remove dragging class
+            const modal = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.modal');
+            if (modal) {
+                modal.classList.remove('modal--dragging');
+            }
+            this.host.requestUpdate();
+        };
+        this.host = host;
+        this.host.addController(this);
+    }
+    hostConnected() {
+        this.setupDragHandlers();
+    }
+    hostDisconnected() {
+        this.cleanupDragHandlers();
+    }
+    setupDragHandlers() {
+        // Wait for next frame to ensure DOM is ready
+        requestAnimationFrame(() => {
+            var _a;
+            this.dragHandle = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.modal-header--draggable');
+            if (this.dragHandle && this.host.modalDraggable) {
+                this.dragHandle.addEventListener('mousedown', this.handleMouseDown);
+                document.addEventListener('mousemove', this.handleMouseMove);
+                document.addEventListener('mouseup', this.handleMouseUp);
+            }
+        });
+    }
+    cleanupDragHandlers() {
+        if (this.dragHandle) {
+            this.dragHandle.removeEventListener('mousedown', this.handleMouseDown);
+        }
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+    }
+    /**
+     * Reset modal position to center
+     */
+    resetPosition() {
+        var _a;
+        this.host.offsetX = 0;
+        this.host.offsetY = 0;
+        const modal = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.modal');
+        if (modal) {
+            modal.style.transform = 'none';
+        }
+        this.host.requestUpdate();
+    }
+}
+//# sourceMappingURL=modal-drag-controller.js.map

package/dist/src/components/modal/controllers/modal-keyboard-controller.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Interface for modal keyboard host element
+ */
+export interface ModalKeyboardHost extends ReactiveControllerHost {
+    open: boolean;
+    closable: boolean;
+    closeModal(): void;
+    dispatchEvent(event: Event): boolean;
+}
+/**
+ * Controller for handling modal keyboard interactions
+ */
+export declare class ModalKeyboardController implements ReactiveController {
+    private host;
+    constructor(host: ModalKeyboardHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private handleKeyDown;
+    private handleTabNavigation;
+    private getFocusableElements;
+    /**
+     * Focus the first focusable element in the modal
+     */
+    focusFirstElement(): void;
+    /**
+     * Focus the last focusable element in the modal
+     */
+    focusLastElement(): void;
+}
+//# sourceMappingURL=modal-keyboard-controller.d.ts.map

package/dist/src/components/modal/controllers/modal-keyboard-controller.js

@@ -0,0 +1,128 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ModalManager } from '../modal-manager.js';
+/**
+ * Controller for handling modal keyboard interactions
+ */
+export class ModalKeyboardController {
+    constructor(host) {
+        this.handleKeyDown = (event) => {
+            if (!this.host.open)
+                return;
+            switch (event.key) {
+                case 'Escape':
+                    if (this.host.closable) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        // Use ModalManager to handle escape for nested modals
+                        const handled = ModalManager.handleEscapeKey();
+                        if (!handled) {
+                            // Fallback: dispatch escape event
+                            const escapeEvent = new CustomEvent('modal-escape', {
+                                bubbles: true,
+                                cancelable: true
+                            });
+                            const dispatched = this.host.dispatchEvent(escapeEvent);
+                            // Only close if event wasn't cancelled
+                            if (dispatched) {
+                                this.host.closeModal();
+                            }
+                        }
+                    }
+                    break;
+                case 'Tab':
+                    // Only handle tab navigation if this is the top modal
+                    if (ModalManager.isTopModal(this.host)) {
+                        this.handleTabNavigation(event);
+                    }
+                    break;
+            }
+        };
+        this.host = host;
+        this.host.addController(this);
+    }
+    hostConnected() {
+        document.addEventListener('keydown', this.handleKeyDown);
+    }
+    hostDisconnected() {
+        document.removeEventListener('keydown', this.handleKeyDown);
+    }
+    handleTabNavigation(event) {
+        var _a;
+        const modal = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.modal');
+        if (!modal)
+            return;
+        const focusableElements = this.getFocusableElements(modal);
+        if (focusableElements.length === 0)
+            return;
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        if (event.shiftKey) {
+            // Shift + Tab: moving backwards
+            if (document.activeElement === firstElement) {
+                event.preventDefault();
+                lastElement.focus();
+            }
+        }
+        else {
+            // Tab: moving forwards
+            if (document.activeElement === lastElement) {
+                event.preventDefault();
+                firstElement.focus();
+            }
+        }
+    }
+    getFocusableElements(container) {
+        const focusableSelectors = [
+            'a[href]',
+            'button:not([disabled])',
+            'input:not([disabled])',
+            'select:not([disabled])',
+            'textarea:not([disabled])',
+            '[tabindex]:not([tabindex="-1"])',
+            '[contenteditable="true"]'
+        ].join(', ');
+        const elements = Array.from(container.querySelectorAll(focusableSelectors));
+        // Filter out elements that are not visible
+        return elements.filter(element => {
+            return element.offsetWidth > 0 &&
+                element.offsetHeight > 0 &&
+                !element.hidden &&
+                getComputedStyle(element).visibility !== 'hidden';
+        });
+    }
+    /**
+     * Focus the first focusable element in the modal
+     */
+    focusFirstElement() {
+        var _a;
+        const modal = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.modal');
+        if (!modal)
+            return;
+        const focusableElements = this.getFocusableElements(modal);
+        if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+        }
+        else {
+            // If no focusable elements, focus the modal itself
+            modal.focus();
+        }
+    }
+    /**
+     * Focus the last focusable element in the modal
+     */
+    focusLastElement() {
+        var _a;
+        const modal = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.modal');
+        if (!modal)
+            return;
+        const focusableElements = this.getFocusableElements(modal);
+        if (focusableElements.length > 0) {
+            focusableElements[focusableElements.length - 1].focus();
+        }
+    }
+}
+//# sourceMappingURL=modal-keyboard-controller.js.map

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

@@ -6,7 +6,7 @@
 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;
+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) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 /**
  * Versatile modal component with multiple sizes, animations, and enhanced functionality.
  *
@@ -48,6 +48,7 @@ declare const NrModalElement_base: (new (...args: any[]) => import("@nuralyui/co
  * @slot footer - Custom footer content
  */
 export declare class NrModalElement extends NrModalElement_base implements ModalDragHost, ModalKeyboardHost {
+    static useShadowDom: boolean;
     static styles: import("lit").CSSResult;
     /** Whether the modal is open */
     open: boolean;

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

@@ -396,6 +396,7 @@ let NrModalElement = class NrModalElement extends NuralyUIBaseMixin(LitElement)
     `;
     }
 };
+NrModalElement.useShadowDom = true;
 NrModalElement.styles = styles;
 __decorate([
     property({ type: Boolean, reflect: true })

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

@@ -9,18 +9,18 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: contents;
-    font-family: var(--nuraly-font-family);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     
     /* Force CSS custom property inheritance to ensure theme switching works properly */
-    color: var(--nuraly-color-text);
-    background-color: var(--nuraly-color-background);
+    color: #161616;
+    background-color: #ffffff;
     
     /* Ensure theme variables are properly inherited */
-    --modal-border-radius: var(--nuraly-border-radius-modal, 8px);
+    --modal-border-radius: 8px;
     
     /* Ensure clean state transitions when theme changes */
     * {
-      transition: all var(--nuraly-transition-fast, 0.15s) ease;
+      transition: all 0.15s ease;
     }
   }
 
@@ -37,13 +37,13 @@ export const styles = css `
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: var(--nuraly-color-modal-backdrop, rgba(0, 0, 0, 0.45));
-    z-index: var(--nuraly-z-modal-backdrop, 1000);
+    background-color: rgba(0, 0, 0, 0.45);
+    z-index: 1000;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--nuraly-spacing-modal-padding, var(--nuraly-spacing-05, 1rem));
-    backdrop-filter: var(--nuraly-modal-backdrop-filter, none);
+    padding: 1rem;
+    backdrop-filter: none;
     
     &.modal-backdrop--hidden {
       display: none;
@@ -51,25 +51,25 @@ export const styles = css `
     
     &.modal-backdrop--position-top {
       align-items: flex-start;
-      padding-top: var(--nuraly-spacing-modal-top, var(--nuraly-spacing-07, 2rem));
+      padding-top: 2rem;
     }
     
     &.modal-backdrop--position-bottom {
       align-items: flex-end;
-      padding-bottom: var(--nuraly-spacing-modal-bottom, var(--nuraly-spacing-07, 2rem));
+      padding-bottom: 2rem;
     }
   }
 
   /* Nested modals support */
   .modal-backdrop {
     /* Ensure each modal backdrop has its own stacking context */
-    z-index: var(--nuraly-z-modal-backdrop, 1000);
+    z-index: 1000;
   }
 
   /* Nested modal backdrop styling */
   .modal-backdrop + .modal-backdrop {
     /* Subsequent modals get slightly darker backdrop */
-    background-color: var(--nuraly-color-modal-backdrop-nested, rgba(0, 0, 0, 0.6));
+    background-color: rgba(0, 0, 0, 0.6);
   }
 
   /* Nested modal animation delay to avoid conflicts */
@@ -80,46 +80,44 @@ export const styles = css `
   /* Modal container */
   .modal {
     position: relative;
-    background-color: var(--nuraly-color-modal-background, var(--nuraly-color-background, #ffffff));
+    background-color: #ffffff;
     border-radius: var(--modal-border-radius);
-    box-shadow: var(--nuraly-shadow-modal, 
-      0 6px 16px 0 rgba(0, 0, 0, 0.08), 
+    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)
-    );
-    border: var(--nuraly-border-modal, 1px solid var(--nuraly-color-border, #e0e0e0));
-    max-height: calc(100vh - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);
-    max-width: calc(100vw - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);
+      0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    border: 1px solid #e0e0e0;
+    max-height: calc(100vh - 2rem * 2);
+    max-width: calc(100vw - 2rem * 2);
     display: flex;
     flex-direction: column;
     outline: none;
     
     &:focus {
-      outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));
-      outline-offset: var(--nuraly-focus-outline-offset, 1px);
+      outline: 2px solid #7c3aed;
+      outline-offset: 1px;
     }
   }
 
 
   /* Modal sizes */
   .modal--size-small {
-    width: var(--nuraly-modal-width-small, 400px);
-    min-height: var(--nuraly-modal-min-height-small, 200px);
+    width: 400px;
+    min-height: 200px;
   }
 
   .modal--size-medium {
-    width: var(--nuraly-modal-width-medium, 600px);
-    min-height: var(--nuraly-modal-min-height-medium, 300px);
+    width: 600px;
+    min-height: 300px;
   }
 
   .modal--size-large {
-    width: var(--nuraly-modal-width-large, 800px);
-    min-height: var(--nuraly-modal-min-height-large, 400px);
+    width: 800px;
+    min-height: 400px;
   }
 
   .modal--size-xl {
-    width: var(--nuraly-modal-width-xl, 1000px);
-    min-height: var(--nuraly-modal-min-height-xl, 500px);
+    width: 1000px;
+    min-height: 500px;
   }
 
   .modal--fullscreen {
@@ -132,12 +130,12 @@ export const styles = css `
 
   /* Modal header */
   .modal-header {
-    padding: var(--nuraly-spacing-modal-header, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));
-    border-bottom: var(--nuraly-border-modal-header, 1px solid var(--nuraly-color-border, #e0e0e0));
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid #e0e0e0;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    min-height: var(--nuraly-modal-header-height);
+    min-height: 56px;
     flex-shrink: 0;
     
     &.modal-header--draggable {
@@ -149,24 +147,24 @@ export const styles = css `
   .modal-header-content {
     display: flex;
     align-items: center;
-    gap: var(--nuraly-spacing-03, 0.5rem);
+    gap: 0.5rem;
     flex: 1;
     min-width: 0;
   }
 
   .modal-header-icon {
     flex-shrink: 0;
-    width: var(--nuraly-modal-header-icon-size, 20px);
-    height: var(--nuraly-modal-header-icon-size, 20px);
-    color: var(--nuraly-color-modal-header-icon, var(--nuraly-color-text-secondary, #525252));
+    width: 20px;
+    height: 20px;
+    color: #525252;
   }
 
   .modal-title {
-    font-size: var(--nuraly-font-size-modal-title, var(--nuraly-font-size-04, 1.125rem));
-    font-weight: var(--nuraly-font-weight-modal-title, var(--nuraly-font-weight-medium, 500));
-    color: var(--nuraly-color-modal-title, var(--nuraly-color-text, #161616));
+    font-size: 1.125rem;
+    font-weight: 500;
+    color: #161616;
     margin: 0;
-    line-height: var(--nuraly-line-height-02, 1.375);
+    line-height: 1.375;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -174,36 +172,36 @@ export const styles = css `
 
   .modal-close-button {
     flex-shrink: 0;
-    width: var(--nuraly-modal-close-size, 32px);
-    height: var(--nuraly-modal-close-size, 32px);
+    width: 32px;
+    height: 32px;
     border: none;
     background: transparent;
-    border-radius: var(--nuraly-border-radius-sm, 4px);
+    border-radius: 4px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--nuraly-color-modal-close-icon, var(--nuraly-color-text-secondary, #525252));
-    transition: all var(--nuraly-transition-fast, 0.15s) ease;
+    color: #525252;
+    transition: all 0.15s ease;
     
     &:hover {
-      background-color: var(--nuraly-color-modal-close-hover, var(--nuraly-color-background-hover, #f4f4f4));
-      color: var(--nuraly-color-modal-close-icon-hover, var(--nuraly-color-text, #161616));
+      background-color: #f4f4f4;
+      color: #161616;
     }
     
     &:focus {
-      outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));
-      outline-offset: var(--nuraly-focus-outline-offset, 1px);
+      outline: 2px solid #7c3aed;
+      outline-offset: 1px;
     }
     
     &:active {
-      background-color: var(--nuraly-color-modal-close-active, var(--nuraly-color-background-active, #c6c6c6));
+      background-color: #c6c6c6;
     }
   }
 
   .modal-close-icon {
-    width: var(--nuraly-modal-close-icon-size, 16px);
-    height: var(--nuraly-modal-close-icon-size, 16px);
+    width: 16px;
+    height: 16px;
   }
 
   /* Carbon theme specific - sharp corners for close button */
@@ -216,21 +214,21 @@ export const styles = css `
   /* Modal body */
   .modal-body {
     flex: 1;
-    padding: var(--nuraly-spacing-modal-body, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));
+    padding: 1rem 1.5rem;
     overflow-y: auto;
-    color: var(--nuraly-color-modal-body-text, var(--nuraly-color-text, #161616));
-    line-height: var(--nuraly-line-height-03, 1.5);
+    color: #161616;
+    line-height: 1.5;
   }
 
   /* Modal footer */
   .modal-footer {
-    padding: var(--nuraly-spacing-modal-footer, var(--nuraly-spacing-03, 0.5rem) var(--nuraly-spacing-05, 1rem));
-    border-top: var(--nuraly-border-modal-footer, 1px solid var(--nuraly-color-border, #e0e0e0));
+    padding: 0.5rem 1rem;
+    border-top: 1px solid #e0e0e0;
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: var(--nuraly-spacing-03, 0.5rem);
-    min-height: var(--nuraly-modal-footer-height, 48px);
+    gap: 0.5rem;
+    min-height: 48px;
     flex-shrink: 0;
   }
 
@@ -290,23 +288,23 @@ export const styles = css `
 
   /* Animation classes */
   .modal-backdrop--animation-fade {
-    animation: backdropFadeIn var(--nuraly-transition-modal, 0.3s) ease;
+    animation: backdropFadeIn 0.3s ease;
   }
 
   .modal--animation-fade {
-    animation: modalFadeIn var(--nuraly-transition-modal, 0.3s) ease;
+    animation: modalFadeIn 0.3s ease;
   }
 
   .modal--animation-zoom {
-    animation: modalZoomIn var(--nuraly-transition-modal, 0.3s) ease;
+    animation: modalZoomIn 0.3s ease;
   }
 
   .modal--animation-slide-up {
-    animation: modalSlideUp var(--nuraly-transition-modal, 0.3s) ease;
+    animation: modalSlideUp 0.3s ease;
   }
 
   .modal--animation-slide-down {
-    animation: modalSlideDown var(--nuraly-transition-modal, 0.3s) ease;
+    animation: modalSlideDown 0.3s ease;
   }
 
   /* Dragging state */
@@ -331,8 +329,8 @@ export const styles = css `
     background: linear-gradient(
       -45deg,
       transparent 40%,
-      var(--nuraly-color-border, #e0e0e0) 40%,
-      var(--nuraly-color-border, #e0e0e0) 60%,
+      #e0e0e0 40%,
+      #e0e0e0 60%,
       transparent 60%
     );
   }
@@ -340,7 +338,7 @@ export const styles = css `
   /* Responsive behavior */
   @media (max-width: 768px) {
     .modal-backdrop {
-      padding: var(--nuraly-spacing-02, 0.25rem);
+      padding: 0.25rem;
     }
     
     .modal--size-small,
@@ -354,8 +352,8 @@ export const styles = css `
     .modal-header,
     .modal-body,
     .modal-footer {
-      padding-left: var(--nuraly-spacing-04, 0.75rem);
-      padding-right: var(--nuraly-spacing-04, 0.75rem);
+      padding-left: 0.75rem;
+      padding-right: 0.75rem;
     }
   }