@nuraly/lumenui 0.2.1 → 0.3.2

package/dist/src/components/menu/controllers/base.controller.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import type { ReactiveControllerHost } from 'lit';
+import type { NrMenuElement } from '../menu.component.js';
+import type { MenuController } from '../interfaces/index.js';
+import { BaseComponentController } from '@nuralyui/common/controllers';
+/**
+ * Base controller class providing common functionality for all menu controllers
+ * Handles controller lifecycle, error handling, and event dispatching
+ */
+export declare class BaseMenuController extends BaseComponentController<NrMenuElement & ReactiveControllerHost> implements MenuController {
+    /**
+     * Dispatch a custom event from the host element
+     * @param eventName - Name of the event
+     * @param detail - Event detail object
+     * @param options - Additional event options
+     */
+    protected dispatchMenuEvent(eventName: string, detail?: any, options?: Partial<CustomEventInit>): boolean;
+    /**
+     * Check if host element is disabled
+     */
+    protected isDisabled(): boolean;
+    /**
+     * Get element by path key
+     * @param pathKey - The path key to search for
+     */
+    protected getElementByPath(pathKey: string): HTMLElement | null;
+    /**
+     * Get all menu link elements
+     */
+    protected getAllMenuLinks(): HTMLElement[];
+    /**
+     * Check if element is visible and not disabled
+     * @param element - The element to check
+     */
+    protected isElementInteractive(element: HTMLElement | null): boolean;
+}
+//# sourceMappingURL=base.controller.d.ts.map

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

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseComponentController } from '@nuralyui/common/controllers';
+/**
+ * Base controller class providing common functionality for all menu controllers
+ * Handles controller lifecycle, error handling, and event dispatching
+ */
+export class BaseMenuController extends BaseComponentController {
+    /**
+     * Dispatch a custom event from the host element
+     * @param eventName - Name of the event
+     * @param detail - Event detail object
+     * @param options - Additional event options
+     */
+    dispatchMenuEvent(eventName, detail, options = {}) {
+        try {
+            const event = new CustomEvent(eventName, Object.assign({ detail, bubbles: true, composed: true, cancelable: true }, options));
+            return this._host.dispatchEvent(event);
+        }
+        catch (error) {
+            this.handleError(error, 'dispatchEvent');
+            return false;
+        }
+    }
+    /**
+     * Check if host element is disabled
+     */
+    isDisabled() {
+        return false; // Menu doesn't have a disabled property at component level
+    }
+    /**
+     * Get element by path key
+     * @param pathKey - The path key to search for
+     */
+    getElementByPath(pathKey) {
+        var _a;
+        return ((_a = this._host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-path="${pathKey}"]`)) || null;
+    }
+    /**
+     * Get all menu link elements
+     */
+    getAllMenuLinks() {
+        var _a;
+        return Array.from(((_a = this._host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.menu-link, .sub-menu')) || []);
+    }
+    /**
+     * Check if element is visible and not disabled
+     * @param element - The element to check
+     */
+    isElementInteractive(element) {
+        if (!element)
+            return false;
+        const isDisabled = element.classList.contains('disabled');
+        const isVisible = element.offsetParent !== null;
+        return !isDisabled && isVisible;
+    }
+}
+//# sourceMappingURL=base.controller.js.map

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

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

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

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

package/dist/src/components/menu/controllers/keyboard.controller.d.ts

@@ -0,0 +1,84 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseMenuController } from './base.controller.js';
+import type { MenuKeyboardController } from '../interfaces/index.js';
+import type { StateController } from './state.controller.js';
+/**
+ * Keyboard controller manages keyboard navigation for the menu component
+ * Handles arrow keys, Enter/Space, Escape, Home/End, and type-ahead search
+ */
+export declare class KeyboardController extends BaseMenuController implements MenuKeyboardController {
+    private stateController;
+    private typeAheadBuffer;
+    private typeAheadTimeout;
+    private currentFocusIndex;
+    constructor(host: any, stateController: StateController);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Main keydown handler - routes to specific handlers
+     * @param event - The keyboard event
+     */
+    handleKeydown(event: KeyboardEvent): void;
+    /**
+     * Handle arrow key navigation
+     * @param event - The keyboard event
+     */
+    handleArrowNavigation(event: KeyboardEvent): void;
+    /**
+     * Navigate down to the next interactive item
+     * @param items - All menu items
+     * @param currentIndex - Current focused item index
+     */
+    private navigateDown;
+    /**
+     * Navigate up to the previous interactive item
+     * @param items - All menu items
+     * @param currentIndex - Current focused item index
+     */
+    private navigateUp;
+    /**
+     * Expand submenu or navigate into it (ArrowRight)
+     * @param element - The current element
+     */
+    private expandOrNavigate;
+    /**
+     * Collapse submenu or navigate out of it (ArrowLeft)
+     * @param element - The current element
+     */
+    private collapseOrNavigate;
+    /**
+     * Handle Enter or Space key activation
+     * @param event - The keyboard event
+     */
+    handleActivation(event: KeyboardEvent): void;
+    /**
+     * Handle Escape key - close all submenus
+     * @param event - The keyboard event
+     */
+    handleEscape(event: KeyboardEvent): void;
+    /**
+     * Handle Home/End keys - jump to first/last item
+     * @param event - The keyboard event
+     */
+    private handleHomeEnd;
+    /**
+     * Handle type-ahead search - type letters to jump to items
+     * @param event - The keyboard event
+     */
+    handleTypeAhead(event: KeyboardEvent): void;
+    /**
+     * Check if an element's text matches the type-ahead buffer
+     * @param element - The element to check
+     * @returns True if the element matches
+     */
+    private matchesTypeAhead;
+    /**
+     * Reset the type-ahead buffer
+     */
+    resetTypeAhead(): void;
+}
+//# sourceMappingURL=keyboard.controller.d.ts.map

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

@@ -0,0 +1,328 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseMenuController } from './base.controller.js';
+/**
+ * Keyboard controller manages keyboard navigation for the menu component
+ * Handles arrow keys, Enter/Space, Escape, Home/End, and type-ahead search
+ */
+export class KeyboardController extends BaseMenuController {
+    constructor(host, stateController) {
+        super(host);
+        this.typeAheadBuffer = '';
+        this.typeAheadTimeout = null;
+        this.currentFocusIndex = -1;
+        this.stateController = stateController;
+    }
+    hostConnected() {
+        this.host.addEventListener('keydown', this.handleKeydown.bind(this));
+    }
+    hostDisconnected() {
+        this.host.removeEventListener('keydown', this.handleKeydown.bind(this));
+        if (this.typeAheadTimeout) {
+            clearTimeout(this.typeAheadTimeout);
+        }
+    }
+    /**
+     * Main keydown handler - routes to specific handlers
+     * @param event - The keyboard event
+     */
+    handleKeydown(event) {
+        try {
+            // Skip keyboard handling when editing (input or contenteditable is focused)
+            const target = event.target;
+            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+                return; // Let the input handle the event
+            }
+            const key = event.key;
+            // Arrow navigation
+            if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
+                this.handleArrowNavigation(event);
+                return;
+            }
+            // Activation keys
+            if (key === 'Enter' || key === ' ') {
+                this.handleActivation(event);
+                return;
+            }
+            // Escape key
+            if (key === 'Escape') {
+                this.handleEscape(event);
+                return;
+            }
+            // Home/End keys
+            if (key === 'Home' || key === 'End') {
+                this.handleHomeEnd(event);
+                return;
+            }
+            // Type-ahead search
+            if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                this.handleTypeAhead(event);
+                return;
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'handleKeydown');
+        }
+    }
+    /**
+     * Handle arrow key navigation
+     * @param event - The keyboard event
+     */
+    handleArrowNavigation(event) {
+        var _a;
+        try {
+            event.preventDefault();
+            const menuItems = this.getAllMenuLinks();
+            const activeElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement;
+            const currentIndex = menuItems.indexOf(activeElement);
+            switch (event.key) {
+                case 'ArrowDown':
+                    this.navigateDown(menuItems, currentIndex);
+                    break;
+                case 'ArrowUp':
+                    this.navigateUp(menuItems, currentIndex);
+                    break;
+                case 'ArrowRight':
+                    this.expandOrNavigate(activeElement);
+                    break;
+                case 'ArrowLeft':
+                    this.collapseOrNavigate(activeElement);
+                    break;
+            }
+            this.dispatchMenuEvent('keyboard-navigation', {
+                key: event.key,
+                currentIndex,
+                timestamp: Date.now(),
+            });
+        }
+        catch (error) {
+            this.handleError(error, 'handleArrowNavigation');
+        }
+    }
+    /**
+     * Navigate down to the next interactive item
+     * @param items - All menu items
+     * @param currentIndex - Current focused item index
+     */
+    navigateDown(items, currentIndex) {
+        let nextIndex = currentIndex + 1;
+        while (nextIndex < items.length) {
+            const nextItem = items[nextIndex];
+            if (this.isElementInteractive(nextItem)) {
+                nextItem.focus();
+                this.currentFocusIndex = nextIndex;
+                return;
+            }
+            nextIndex++;
+        }
+        // Wrap to first item
+        if (currentIndex >= 0) {
+            for (let i = 0; i < items.length; i++) {
+                if (this.isElementInteractive(items[i])) {
+                    items[i].focus();
+                    this.currentFocusIndex = i;
+                    return;
+                }
+            }
+        }
+    }
+    /**
+     * Navigate up to the previous interactive item
+     * @param items - All menu items
+     * @param currentIndex - Current focused item index
+     */
+    navigateUp(items, currentIndex) {
+        let prevIndex = currentIndex - 1;
+        while (prevIndex >= 0) {
+            const prevItem = items[prevIndex];
+            if (this.isElementInteractive(prevItem)) {
+                prevItem.focus();
+                this.currentFocusIndex = prevIndex;
+                return;
+            }
+            prevIndex--;
+        }
+        // Wrap to last item
+        if (currentIndex >= 0) {
+            for (let i = items.length - 1; i >= 0; i--) {
+                if (this.isElementInteractive(items[i])) {
+                    items[i].focus();
+                    this.currentFocusIndex = i;
+                    return;
+                }
+            }
+        }
+    }
+    /**
+     * Expand submenu or navigate into it (ArrowRight)
+     * @param element - The current element
+     */
+    expandOrNavigate(element) {
+        if (!element)
+            return;
+        if (element.classList.contains('sub-menu')) {
+            const pathKey = element.getAttribute('data-path');
+            if (pathKey) {
+                const path = pathKey.split('-').map(Number);
+                this.stateController.openSubMenu(path);
+            }
+        }
+    }
+    /**
+     * Collapse submenu or navigate out of it (ArrowLeft)
+     * @param element - The current element
+     */
+    collapseOrNavigate(element) {
+        if (!element)
+            return;
+        if (element.classList.contains('sub-menu')) {
+            const pathKey = element.getAttribute('data-path');
+            if (pathKey) {
+                const path = pathKey.split('-').map(Number);
+                this.stateController.closeSubMenu(path);
+            }
+        }
+    }
+    /**
+     * Handle Enter or Space key activation
+     * @param event - The keyboard event
+     */
+    handleActivation(event) {
+        var _a;
+        try {
+            event.preventDefault();
+            const activeElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement;
+            if (!activeElement || !this.isElementInteractive(activeElement)) {
+                return;
+            }
+            // Simulate click on the active element
+            activeElement.click();
+            this.dispatchMenuEvent('keyboard-activation', {
+                key: event.key,
+                element: activeElement,
+                timestamp: Date.now(),
+            });
+        }
+        catch (error) {
+            this.handleError(error, 'handleActivation');
+        }
+    }
+    /**
+     * Handle Escape key - close all submenus
+     * @param event - The keyboard event
+     */
+    handleEscape(event) {
+        try {
+            event.preventDefault();
+            this.stateController.closeAllSubMenus();
+            this.dispatchMenuEvent('keyboard-escape', {
+                timestamp: Date.now(),
+            });
+        }
+        catch (error) {
+            this.handleError(error, 'handleEscape');
+        }
+    }
+    /**
+     * Handle Home/End keys - jump to first/last item
+     * @param event - The keyboard event
+     */
+    handleHomeEnd(event) {
+        try {
+            event.preventDefault();
+            const menuItems = this.getAllMenuLinks();
+            const targetItems = menuItems.filter(item => this.isElementInteractive(item));
+            if (targetItems.length === 0)
+                return;
+            if (event.key === 'Home') {
+                targetItems[0].focus();
+                this.currentFocusIndex = menuItems.indexOf(targetItems[0]);
+            }
+            else {
+                const lastItem = targetItems[targetItems.length - 1];
+                lastItem.focus();
+                this.currentFocusIndex = menuItems.indexOf(lastItem);
+            }
+            this.dispatchMenuEvent('keyboard-home-end', {
+                key: event.key,
+                timestamp: Date.now(),
+            });
+        }
+        catch (error) {
+            this.handleError(error, 'handleHomeEnd');
+        }
+    }
+    /**
+     * Handle type-ahead search - type letters to jump to items
+     * @param event - The keyboard event
+     */
+    handleTypeAhead(event) {
+        try {
+            event.preventDefault();
+            // Clear previous timeout
+            if (this.typeAheadTimeout) {
+                clearTimeout(this.typeAheadTimeout);
+            }
+            // Add character to buffer
+            this.typeAheadBuffer += event.key.toLowerCase();
+            // Set timeout to clear buffer
+            this.typeAheadTimeout = window.setTimeout(() => {
+                this.typeAheadBuffer = '';
+                this.typeAheadTimeout = null;
+            }, 500);
+            // Find matching item
+            const menuItems = this.getAllMenuLinks();
+            const currentIndex = this.currentFocusIndex >= 0 ? this.currentFocusIndex : -1;
+            // Search from current position forward
+            for (let i = currentIndex + 1; i < menuItems.length; i++) {
+                if (this.matchesTypeAhead(menuItems[i])) {
+                    menuItems[i].focus();
+                    this.currentFocusIndex = i;
+                    return;
+                }
+            }
+            // Wrap around and search from beginning
+            for (let i = 0; i <= currentIndex; i++) {
+                if (this.matchesTypeAhead(menuItems[i])) {
+                    menuItems[i].focus();
+                    this.currentFocusIndex = i;
+                    return;
+                }
+            }
+            this.dispatchMenuEvent('keyboard-typeahead', {
+                buffer: this.typeAheadBuffer,
+                timestamp: Date.now(),
+            });
+        }
+        catch (error) {
+            this.handleError(error, 'handleTypeAhead');
+        }
+    }
+    /**
+     * Check if an element's text matches the type-ahead buffer
+     * @param element - The element to check
+     * @returns True if the element matches
+     */
+    matchesTypeAhead(element) {
+        var _a;
+        if (!this.isElementInteractive(element)) {
+            return false;
+        }
+        const text = ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase()) || '';
+        return text.startsWith(this.typeAheadBuffer);
+    }
+    /**
+     * Reset the type-ahead buffer
+     */
+    resetTypeAhead() {
+        this.typeAheadBuffer = '';
+        if (this.typeAheadTimeout) {
+            clearTimeout(this.typeAheadTimeout);
+            this.typeAheadTimeout = null;
+        }
+    }
+}
+//# sourceMappingURL=keyboard.controller.js.map

package/dist/src/components/menu/controllers/state.controller.d.ts

@@ -0,0 +1,106 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseMenuController } from './base.controller.js';
+import type { MenuStateController } from '../interfaces/index.js';
+/**
+ * State controller manages all state for the menu component
+ * Centralizes state management for selection, submenus, hover, and highlight states
+ */
+export declare class StateController extends BaseMenuController implements MenuStateController {
+    private _selectedPath;
+    private _openSubMenus;
+    private _hoveredSubMenus;
+    private _highlightedSubMenus;
+    /**
+     * Get the currently selected path
+     */
+    get selectedPath(): number[];
+    /**
+     * Set the currently selected path
+     */
+    set selectedPath(path: number[]);
+    /**
+     * Get the set of open submenu paths
+     */
+    get openSubMenus(): Set<string>;
+    /**
+     * Get the set of hovered submenu paths
+     */
+    get hoveredSubMenus(): Set<string>;
+    /**
+     * Get the set of highlighted submenu paths
+     */
+    get highlightedSubMenus(): Set<string>;
+    /**
+     * Set the selected path and trigger update
+     * @param path - The path to select
+     */
+    setSelectedPath(path: number[]): void;
+    /**
+     * Toggle a submenu open/closed state
+     * @param path - The path to the submenu
+     */
+    toggleSubMenu(path: number[]): void;
+    /**
+     * Open a submenu
+     * @param path - The path to the submenu
+     */
+    openSubMenu(path: number[]): void;
+    /**
+     * Close a submenu
+     * @param path - The path to the submenu
+     */
+    closeSubMenu(path: number[]): void;
+    /**
+     * Close all open submenus
+     */
+    closeAllSubMenus(): void;
+    /**
+     * Set the hovered state of a submenu
+     * @param path - The path to the submenu
+     * @param hovered - Whether the submenu is hovered
+     */
+    setHovered(path: number[], hovered: boolean): void;
+    /**
+     * Set the highlighted state of a submenu
+     * @param path - The path to the submenu
+     * @param highlighted - Whether the submenu is highlighted
+     */
+    setHighlighted(path: number[], highlighted: boolean): void;
+    /**
+     * Clear all highlighted states
+     */
+    clearHighlights(): void;
+    /**
+     * Check if a path is currently selected
+     * @param path - The path to check
+     * @returns True if the path is selected
+     */
+    isPathSelected(path: number[]): boolean;
+    /**
+     * Check if a submenu is open
+     * @param path - The path to check
+     * @returns True if the submenu is open
+     */
+    isSubMenuOpen(path: number[]): boolean;
+    /**
+     * Check if a submenu is hovered
+     * @param path - The path to check
+     * @returns True if the submenu is hovered
+     */
+    isSubMenuHovered(path: number[]): boolean;
+    /**
+     * Check if a submenu is highlighted
+     * @param path - The path to check
+     * @returns True if the submenu is highlighted
+     */
+    isSubMenuHighlighted(path: number[]): boolean;
+    /**
+     * Reset all state to initial values
+     */
+    reset(): void;
+}
+//# sourceMappingURL=state.controller.d.ts.map