@nuraly/lumenui 0.1.0 → 0.2.2

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

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