@nuraly/lumenui 0.1.0 → 0.2.2

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

@@ -0,0 +1,86 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseMenuController } from './base.controller.js';
+import type { MenuAccessibilityController } from '../interfaces/index.js';
+import type { StateController } from './state.controller.js';
+/**
+ * Accessibility controller manages ARIA attributes and screen reader support
+ * Ensures the menu component is fully accessible
+ */
+export declare class AccessibilityController extends BaseMenuController implements MenuAccessibilityController {
+    private stateController;
+    private announcementElement;
+    constructor(host: any, stateController: StateController);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Create a screen reader announcement element
+     */
+    private createAnnouncementElement;
+    /**
+     * Remove the screen reader announcement element
+     */
+    private removeAnnouncementElement;
+    /**
+     * Update all ARIA attributes throughout the menu
+     */
+    updateAriaAttributes(): void;
+    /**
+     * Update ARIA attributes on the menu root
+     */
+    private updateMenuRoot;
+    /**
+     * Update ARIA attributes on all menu items
+     */
+    private updateAllMenuItems;
+    /**
+     * Update ARIA attributes on all submenus
+     */
+    private updateAllSubMenus;
+    /**
+     * Set aria-expanded attribute on an element
+     * @param element - The element to update
+     * @param expanded - Whether the element is expanded
+     */
+    setAriaExpanded(element: HTMLElement, expanded: boolean): void;
+    /**
+     * Set aria-selected attribute on an element
+     * @param element - The element to update
+     * @param selected - Whether the element is selected
+     */
+    setAriaSelected(element: HTMLElement, selected: boolean): void;
+    /**
+     * Manage focus on an element
+     * @param element - The element to focus
+     */
+    manageFocus(element: HTMLElement): void;
+    /**
+     * Announce a message to screen readers
+     * @param message - The message to announce
+     */
+    announceToScreenReader(message: string): void;
+    /**
+     * Announce menu item selection
+     * @param itemText - The text of the selected item
+     * @param path - The path to the item
+     */
+    announceSelection(itemText: string, path: number[]): void;
+    /**
+     * Announce submenu state change
+     * @param itemText - The text of the submenu
+     * @param isOpen - Whether the submenu is now open
+     */
+    announceSubMenuToggle(itemText: string, isOpen: boolean): void;
+    /**
+     * Set focus to the first interactive menu item
+     */
+    focusFirstItem(): void;
+    /**
+     * Set focus to the last interactive menu item
+     */
+    focusLastItem(): void;
+}
+//# sourceMappingURL=accessibility.controller.d.ts.map

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

@@ -0,0 +1,235 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseMenuController } from './base.controller.js';
+/**
+ * Accessibility controller manages ARIA attributes and screen reader support
+ * Ensures the menu component is fully accessible
+ */
+export class AccessibilityController extends BaseMenuController {
+    constructor(host, stateController) {
+        super(host);
+        this.announcementElement = null;
+        this.stateController = stateController;
+    }
+    hostConnected() {
+        this.createAnnouncementElement();
+        this.updateAriaAttributes();
+    }
+    hostDisconnected() {
+        this.removeAnnouncementElement();
+    }
+    /**
+     * Create a screen reader announcement element
+     */
+    createAnnouncementElement() {
+        if (!this.announcementElement) {
+            this.announcementElement = document.createElement('div');
+            this.announcementElement.setAttribute('role', 'status');
+            this.announcementElement.setAttribute('aria-live', 'polite');
+            this.announcementElement.setAttribute('aria-atomic', 'true');
+            this.announcementElement.style.position = 'absolute';
+            this.announcementElement.style.left = '-10000px';
+            this.announcementElement.style.width = '1px';
+            this.announcementElement.style.height = '1px';
+            this.announcementElement.style.overflow = 'hidden';
+            document.body.appendChild(this.announcementElement);
+        }
+    }
+    /**
+     * Remove the screen reader announcement element
+     */
+    removeAnnouncementElement() {
+        if (this.announcementElement && this.announcementElement.parentNode) {
+            this.announcementElement.parentNode.removeChild(this.announcementElement);
+            this.announcementElement = null;
+        }
+    }
+    /**
+     * Update all ARIA attributes throughout the menu
+     */
+    updateAriaAttributes() {
+        try {
+            this.updateMenuRoot();
+            this.updateAllMenuItems();
+            this.updateAllSubMenus();
+        }
+        catch (error) {
+            this.handleError(error, 'updateAriaAttributes');
+        }
+    }
+    /**
+     * Update ARIA attributes on the menu root
+     */
+    updateMenuRoot() {
+        var _a;
+        const menuRoot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.menu-root');
+        if (menuRoot) {
+            menuRoot.setAttribute('role', 'menu');
+            menuRoot.setAttribute('aria-label', 'Main menu');
+        }
+    }
+    /**
+     * Update ARIA attributes on all menu items
+     */
+    updateAllMenuItems() {
+        var _a;
+        const menuLinks = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.menu-link');
+        menuLinks === null || menuLinks === void 0 ? void 0 : menuLinks.forEach((link) => {
+            link.setAttribute('role', 'menuitem');
+            link.setAttribute('tabindex', '0');
+            const pathKey = link.getAttribute('data-path');
+            if (pathKey) {
+                const path = pathKey.split('-').map(Number);
+                const isSelected = this.stateController.isPathSelected(path);
+                this.setAriaSelected(link, isSelected);
+            }
+            const isDisabled = link.classList.contains('disabled');
+            if (isDisabled) {
+                link.setAttribute('aria-disabled', 'true');
+            }
+        });
+    }
+    /**
+     * Update ARIA attributes on all submenus
+     */
+    updateAllSubMenus() {
+        var _a;
+        const subMenus = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.sub-menu');
+        subMenus === null || subMenus === void 0 ? void 0 : subMenus.forEach((subMenu) => {
+            subMenu.setAttribute('role', 'menuitem');
+            subMenu.setAttribute('tabindex', '0');
+            const pathKey = subMenu.getAttribute('data-path');
+            if (pathKey) {
+                const path = pathKey.split('-').map(Number);
+                const isOpen = this.stateController.isSubMenuOpen(path);
+                const header = subMenu.querySelector('.sub-menu-header');
+                if (header) {
+                    header.setAttribute('aria-haspopup', 'true');
+                    this.setAriaExpanded(header, isOpen);
+                }
+            }
+            const isDisabled = subMenu.classList.contains('disabled');
+            if (isDisabled) {
+                subMenu.setAttribute('aria-disabled', 'true');
+            }
+        });
+    }
+    /**
+     * Set aria-expanded attribute on an element
+     * @param element - The element to update
+     * @param expanded - Whether the element is expanded
+     */
+    setAriaExpanded(element, expanded) {
+        try {
+            element.setAttribute('aria-expanded', expanded.toString());
+        }
+        catch (error) {
+            this.handleError(error, 'setAriaExpanded');
+        }
+    }
+    /**
+     * Set aria-selected attribute on an element
+     * @param element - The element to update
+     * @param selected - Whether the element is selected
+     */
+    setAriaSelected(element, selected) {
+        try {
+            if (selected) {
+                element.setAttribute('aria-selected', 'true');
+                element.setAttribute('aria-current', 'page');
+            }
+            else {
+                element.removeAttribute('aria-selected');
+                element.removeAttribute('aria-current');
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'setAriaSelected');
+        }
+    }
+    /**
+     * Manage focus on an element
+     * @param element - The element to focus
+     */
+    manageFocus(element) {
+        try {
+            if (this.isElementInteractive(element)) {
+                element.focus();
+                // Ensure element is visible in viewport
+                element.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                    inline: 'nearest',
+                });
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'manageFocus');
+        }
+    }
+    /**
+     * Announce a message to screen readers
+     * @param message - The message to announce
+     */
+    announceToScreenReader(message) {
+        try {
+            if (this.announcementElement) {
+                // Clear and set message to ensure it's announced
+                this.announcementElement.textContent = '';
+                setTimeout(() => {
+                    if (this.announcementElement) {
+                        this.announcementElement.textContent = message;
+                    }
+                }, 100);
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'announceToScreenReader');
+        }
+    }
+    /**
+     * Announce menu item selection
+     * @param itemText - The text of the selected item
+     * @param path - The path to the item
+     */
+    announceSelection(itemText, path) {
+        const depth = path.length;
+        const message = `Selected ${itemText}, level ${depth}`;
+        this.announceToScreenReader(message);
+    }
+    /**
+     * Announce submenu state change
+     * @param itemText - The text of the submenu
+     * @param isOpen - Whether the submenu is now open
+     */
+    announceSubMenuToggle(itemText, isOpen) {
+        const state = isOpen ? 'expanded' : 'collapsed';
+        const message = `${itemText} submenu ${state}`;
+        this.announceToScreenReader(message);
+    }
+    /**
+     * Set focus to the first interactive menu item
+     */
+    focusFirstItem() {
+        const menuItems = this.getAllMenuLinks();
+        const firstInteractiveItem = menuItems.find(item => this.isElementInteractive(item));
+        if (firstInteractiveItem) {
+            this.manageFocus(firstInteractiveItem);
+        }
+    }
+    /**
+     * Set focus to the last interactive menu item
+     */
+    focusLastItem() {
+        const menuItems = this.getAllMenuLinks();
+        const interactiveItems = menuItems.filter(item => this.isElementInteractive(item));
+        const lastItem = interactiveItems[interactiveItems.length - 1];
+        if (lastItem) {
+            this.manageFocus(lastItem);
+        }
+    }
+}
+//# sourceMappingURL=accessibility.controller.js.map

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