@nuraly/lumenui 0.2.1 → 0.3.2

package/dist/src/components/menu/controllers/state.controller.js

@@ -0,0 +1,249 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseMenuController } from './base.controller.js';
+/**
+ * State controller manages all state for the menu component
+ * Centralizes state management for selection, submenus, hover, and highlight states
+ */
+export class StateController extends BaseMenuController {
+    constructor() {
+        super(...arguments);
+        this._selectedPath = [];
+        this._openSubMenus = new Set();
+        this._hoveredSubMenus = new Set();
+        this._highlightedSubMenus = new Set();
+    }
+    /**
+     * Get the currently selected path
+     */
+    get selectedPath() {
+        return this._selectedPath;
+    }
+    /**
+     * Set the currently selected path
+     */
+    set selectedPath(path) {
+        this._selectedPath = path;
+    }
+    /**
+     * Get the set of open submenu paths
+     */
+    get openSubMenus() {
+        return this._openSubMenus;
+    }
+    /**
+     * Get the set of hovered submenu paths
+     */
+    get hoveredSubMenus() {
+        return this._hoveredSubMenus;
+    }
+    /**
+     * Get the set of highlighted submenu paths
+     */
+    get highlightedSubMenus() {
+        return this._highlightedSubMenus;
+    }
+    /**
+     * Set the selected path and trigger update
+     * @param path - The path to select
+     */
+    setSelectedPath(path) {
+        try {
+            this._selectedPath = path;
+            this.clearHighlights();
+            this.requestUpdate();
+            this.dispatchMenuEvent('selection-changed', {
+                path,
+                timestamp: Date.now(),
+            });
+        }
+        catch (error) {
+            this.handleError(error, 'setSelectedPath');
+        }
+    }
+    /**
+     * Toggle a submenu open/closed state
+     * @param path - The path to the submenu
+     */
+    toggleSubMenu(path) {
+        try {
+            const pathKey = path.join('-');
+            if (this._openSubMenus.has(pathKey)) {
+                this.closeSubMenu(path);
+            }
+            else {
+                this.openSubMenu(path);
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'toggleSubMenu');
+        }
+    }
+    /**
+     * Open a submenu
+     * @param path - The path to the submenu
+     */
+    openSubMenu(path) {
+        try {
+            const pathKey = path.join('-');
+            if (!this._openSubMenus.has(pathKey)) {
+                this._openSubMenus.add(pathKey);
+                this.requestUpdate();
+                this.dispatchMenuEvent('submenu-opened', {
+                    path,
+                    pathKey,
+                    timestamp: Date.now(),
+                });
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'openSubMenu');
+        }
+    }
+    /**
+     * Close a submenu
+     * @param path - The path to the submenu
+     */
+    closeSubMenu(path) {
+        try {
+            const pathKey = path.join('-');
+            if (this._openSubMenus.has(pathKey)) {
+                this._openSubMenus.delete(pathKey);
+                this.requestUpdate();
+                this.dispatchMenuEvent('submenu-closed', {
+                    path,
+                    pathKey,
+                    timestamp: Date.now(),
+                });
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'closeSubMenu');
+        }
+    }
+    /**
+     * Close all open submenus
+     */
+    closeAllSubMenus() {
+        try {
+            this._openSubMenus.clear();
+            this.requestUpdate();
+            this.dispatchMenuEvent('all-submenus-closed', {
+                timestamp: Date.now(),
+            });
+        }
+        catch (error) {
+            this.handleError(error, 'closeAllSubMenus');
+        }
+    }
+    /**
+     * Set the hovered state of a submenu
+     * @param path - The path to the submenu
+     * @param hovered - Whether the submenu is hovered
+     */
+    setHovered(path, hovered) {
+        try {
+            const pathKey = path.join('-');
+            if (hovered) {
+                this._hoveredSubMenus.add(pathKey);
+            }
+            else {
+                this._hoveredSubMenus.delete(pathKey);
+            }
+            this.requestUpdate();
+        }
+        catch (error) {
+            this.handleError(error, 'setHovered');
+        }
+    }
+    /**
+     * Set the highlighted state of a submenu
+     * @param path - The path to the submenu
+     * @param highlighted - Whether the submenu is highlighted
+     */
+    setHighlighted(path, highlighted) {
+        try {
+            const pathKey = path.join('-');
+            if (highlighted) {
+                this._highlightedSubMenus.add(pathKey);
+            }
+            else {
+                this._highlightedSubMenus.delete(pathKey);
+            }
+            this.requestUpdate();
+        }
+        catch (error) {
+            this.handleError(error, 'setHighlighted');
+        }
+    }
+    /**
+     * Clear all highlighted states
+     */
+    clearHighlights() {
+        try {
+            this._highlightedSubMenus.clear();
+            this.requestUpdate();
+        }
+        catch (error) {
+            this.handleError(error, 'clearHighlights');
+        }
+    }
+    /**
+     * Check if a path is currently selected
+     * @param path - The path to check
+     * @returns True if the path is selected
+     */
+    isPathSelected(path) {
+        return (path.length === this._selectedPath.length &&
+            path.every((val, idx) => val === this._selectedPath[idx]));
+    }
+    /**
+     * Check if a submenu is open
+     * @param path - The path to check
+     * @returns True if the submenu is open
+     */
+    isSubMenuOpen(path) {
+        const pathKey = path.join('-');
+        return this._openSubMenus.has(pathKey);
+    }
+    /**
+     * Check if a submenu is hovered
+     * @param path - The path to check
+     * @returns True if the submenu is hovered
+     */
+    isSubMenuHovered(path) {
+        const pathKey = path.join('-');
+        return this._hoveredSubMenus.has(pathKey);
+    }
+    /**
+     * Check if a submenu is highlighted
+     * @param path - The path to check
+     * @returns True if the submenu is highlighted
+     */
+    isSubMenuHighlighted(path) {
+        const pathKey = path.join('-');
+        return this._highlightedSubMenus.has(pathKey);
+    }
+    /**
+     * Reset all state to initial values
+     */
+    reset() {
+        try {
+            this._selectedPath = [];
+            this._openSubMenus.clear();
+            this._hoveredSubMenus.clear();
+            this._highlightedSubMenus.clear();
+            this.requestUpdate();
+            this.dispatchMenuEvent('state-reset', {
+                timestamp: Date.now(),
+            });
+        }
+        catch (error) {
+            this.handleError(error, 'reset');
+        }
+    }
+}
+//# sourceMappingURL=state.controller.js.map

package/dist/src/components/menu/interfaces/controller.interface.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import type { ReactiveController } from 'lit';
+import type { NrMenuElement } from '../menu.component.js';
+/**
+ * Base interface for all menu controllers
+ */
+export interface MenuController extends ReactiveController {
+    host: NrMenuElement;
+}
+/**
+ * Keyboard controller interface for menu navigation
+ */
+export interface MenuKeyboardController extends MenuController {
+    handleKeydown(event: KeyboardEvent): void;
+    handleArrowNavigation(event: KeyboardEvent): void;
+    handleActivation(event: KeyboardEvent): void;
+    handleEscape(event: KeyboardEvent): void;
+    handleTypeAhead(event: KeyboardEvent): void;
+}
+/**
+ * State controller interface for menu state management
+ */
+export interface MenuStateController extends MenuController {
+    selectedPath: number[];
+    openSubMenus: Set<string>;
+    hoveredSubMenus: Set<string>;
+    highlightedSubMenus: Set<string>;
+    setSelectedPath(path: number[]): void;
+    toggleSubMenu(path: number[]): void;
+    openSubMenu(path: number[]): void;
+    closeSubMenu(path: number[]): void;
+    setHovered(path: number[], hovered: boolean): void;
+    setHighlighted(path: number[], highlighted: boolean): void;
+    clearHighlights(): void;
+    isPathSelected(path: number[]): boolean;
+}
+/**
+ * Accessibility controller interface for ARIA management
+ */
+export interface MenuAccessibilityController extends MenuController {
+    updateAriaAttributes(): void;
+    setAriaExpanded(element: HTMLElement, expanded: boolean): void;
+    setAriaSelected(element: HTMLElement, selected: boolean): void;
+    manageFocus(element: HTMLElement): void;
+    announceToScreenReader(message: string): void;
+}
+//# sourceMappingURL=controller.interface.d.ts.map

package/dist/src/components/menu/interfaces/controller.interface.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=controller.interface.js.map

package/dist/src/components/menu/interfaces/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './controller.interface.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/menu/interfaces/index.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './controller.interface.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/modal/controllers/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './modal-drag-controller.js';
+export * from './modal-keyboard-controller.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/modal/controllers/index.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './modal-drag-controller.js';
+export * from './modal-keyboard-controller.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Interface for modal host element
+ */
+export interface ModalDragHost extends ReactiveControllerHost {
+    modalDraggable: boolean;
+    offsetX: number;
+    offsetY: number;
+    isDragging: boolean;
+    shadowRoot: ShadowRoot | null;
+    requestUpdate(): void;
+}
+/**
+ * Controller for handling modal drag functionality
+ */
+export declare class ModalDragController implements ReactiveController {
+    private host;
+    private initialX;
+    private initialY;
+    private dragHandle;
+    constructor(host: ModalDragHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private setupDragHandlers;
+    private cleanupDragHandlers;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+    /**
+     * Reset modal position to center
+     */
+    resetPosition(): void;
+}
+//# sourceMappingURL=modal-drag-controller.d.ts.map

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/panel/controllers/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './panel-drag-controller.js';
+export * from './panel-resize-controller.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/panel/controllers/index.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './panel-drag-controller.js';
+export * from './panel-resize-controller.js';
+//# sourceMappingURL=index.js.map