@nuraly/lumenui 0.2.1 → 0.3.2

package/dist/src/components/input/utils/input-renderers.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TemplateResult, nothing } from 'lit';
+/**
+ * Rendering utilities for input component icons and elements
+ */
+export declare class InputRenderUtils {
+    /**
+     * Renders prefix content (Light DOM — children passed in directly)
+     */
+    static renderPrefix(children?: Element[]): TemplateResult | typeof nothing;
+    /**
+     * Renders suffix content (Light DOM — children passed in directly)
+     */
+    static renderSuffix(children?: Element[]): TemplateResult | typeof nothing;
+    /**
+     * Renders addon before content (outside input borders)
+     * Only renders if hasAddonBefore is true
+     */
+    static renderAddonBefore(hasAddonBefore: boolean, children?: Element[]): TemplateResult | typeof nothing;
+    /**
+     * Renders addon after content (outside input borders)
+     * Only renders if hasAddonAfter is true
+     */
+    static renderAddonAfter(hasAddonAfter: boolean, children?: Element[]): TemplateResult | typeof nothing;
+    /**
+     * Renders the copy icon when withCopy is enabled
+     */
+    static renderCopyIcon(withCopy: boolean, disabled: boolean, readonly: boolean, onCopy: () => void, onKeydown: (e: KeyboardEvent) => void): TemplateResult | typeof nothing;
+    /**
+     * Renders the clear icon when allowClear is enabled and there's content
+     */
+    static renderClearIcon(allowClear: boolean, value: string, disabled: boolean, readonly: boolean, onClear: () => void, onKeydown: (e: KeyboardEvent) => void): TemplateResult | typeof nothing;
+    /**
+     * Renders state-based icons (warning, error)
+     */
+    static renderStateIcon(state: string): TemplateResult | typeof nothing;
+    /**
+     * Renders the calendar icon for calendar input type
+     */
+    static renderCalendarIcon(state: string, type: string): TemplateResult | typeof nothing;
+    /**
+     * Renders password toggle icon
+     */
+    static renderPasswordIcon(type: string, inputType: string, disabled: boolean, readonly: boolean, onToggle: () => void, onKeydown: (e: KeyboardEvent) => void): TemplateResult | typeof nothing;
+    /**
+     * Renders number input increment/decrement icons
+     */
+    static renderNumberIcons(type: string, state: string, disabled: boolean, readonly: boolean, onIncrement: () => void, onDecrement: () => void, onKeydown: (e: KeyboardEvent) => void): TemplateResult | typeof nothing;
+}
+//# sourceMappingURL=input-renderers.d.ts.map

package/dist/src/components/input/utils/input-renderers.js

@@ -0,0 +1,178 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { html, nothing } from 'lit';
+/**
+ * Rendering utilities for input component icons and elements
+ */
+export class InputRenderUtils {
+    /**
+     * Renders prefix content (Light DOM — children passed in directly)
+     */
+    static renderPrefix(children = []) {
+        if (children.length === 0)
+            return nothing;
+        return html `
+      <div class="input-prefix">
+        ${children}
+      </div>
+    `;
+    }
+    /**
+     * Renders suffix content (Light DOM — children passed in directly)
+     */
+    static renderSuffix(children = []) {
+        if (children.length === 0)
+            return nothing;
+        return html `
+      <div class="input-suffix">
+        ${children}
+      </div>
+    `;
+    }
+    /**
+     * Renders addon before content (outside input borders)
+     * Only renders if hasAddonBefore is true
+     */
+    static renderAddonBefore(hasAddonBefore, children = []) {
+        if (!hasAddonBefore)
+            return nothing;
+        return html `
+      <div class="input-addon-before">
+        ${children}
+      </div>
+    `;
+    }
+    /**
+     * Renders addon after content (outside input borders)
+     * Only renders if hasAddonAfter is true
+     */
+    static renderAddonAfter(hasAddonAfter, children = []) {
+        if (!hasAddonAfter)
+            return nothing;
+        return html `
+      <div class="input-addon-after">
+        ${children}
+      </div>
+    `;
+    }
+    /**
+     * Renders the copy icon when withCopy is enabled
+     */
+    static renderCopyIcon(withCopy, disabled, readonly, onCopy, onKeydown) {
+        if (!withCopy)
+            return nothing;
+        return html `<nr-icon
+      name="copy"
+      type="regular"
+      id="copy-icon"
+      role="button"
+      aria-label="Copy input value"
+      tabindex="0"
+      @click=${!disabled && !readonly ? onCopy : nothing}
+      @keydown=${onKeydown}
+    ></nr-icon>`;
+    }
+    /**
+     * Renders the clear icon when allowClear is enabled and there's content
+     */
+    static renderClearIcon(allowClear, value, disabled, readonly, onClear, onKeydown) {
+        if (!allowClear || !value || disabled || readonly)
+            return nothing;
+        return html `<nr-icon
+      name="times-circle"
+      type="regular"
+      id="clear-icon"
+      role="button"
+      aria-label="Clear input value"
+      tabindex="0"
+      @click=${onClear}
+      @keydown=${onKeydown}
+    ></nr-icon>`;
+    }
+    /**
+     * Renders state-based icons (warning, error)
+     */
+    static renderStateIcon(state) {
+        switch (state) {
+            case "warning" /* INPUT_STATE.Warning */:
+                return html `<nr-icon name="warning" id="warning-icon"></nr-icon>`;
+            case "error" /* INPUT_STATE.Error */:
+                return html `<nr-icon name="exclamation-circle" id="error-icon"></nr-icon>`;
+            default:
+                return nothing;
+        }
+    }
+    /**
+     * Renders the calendar icon for calendar input type
+     */
+    static renderCalendarIcon(state, type) {
+        if (state !== "default" /* INPUT_STATE.Default */ || type !== "calendar" /* INPUT_TYPE.CALENDAR */) {
+            return nothing;
+        }
+        return html `<nr-icon name="calendar" type="regular" id="calendar-icon"></nr-icon>`;
+    }
+    /**
+     * Renders password toggle icon
+     */
+    static renderPasswordIcon(type, inputType, disabled, readonly, onToggle, onKeydown) {
+        if (type !== "password" /* INPUT_TYPE.PASSWORD */)
+            return nothing;
+        if (inputType === "text" /* INPUT_TYPE.TEXT */) {
+            return html `<nr-icon
+        name="eye-slash"
+        type="regular"
+        id="password-icon"
+        role="button"
+        aria-label="Hide password"
+        tabindex="0"
+        @click=${!disabled && !readonly ? onToggle : nothing}
+        @keydown=${onKeydown}
+      ></nr-icon>`;
+        }
+        else {
+            return html `<nr-icon
+        name="eye"
+        type="regular"
+        id="password-icon"
+        role="button"
+        aria-label="Show password"
+        tabindex="0"
+        @click=${!disabled && !readonly ? onToggle : nothing}
+        @keydown=${onKeydown}
+      ></nr-icon>`;
+        }
+    }
+    /**
+     * Renders number input increment/decrement icons
+     */
+    static renderNumberIcons(type, state, disabled, readonly, onIncrement, onDecrement, onKeydown) {
+        if (type !== "number" /* INPUT_TYPE.NUMBER */)
+            return nothing;
+        return html `
+      <div id="number-icons">
+        ${state !== "default" /* INPUT_STATE.Default */ ? html `<span id="icons-separator">|</span>` : nothing}
+        <nr-icon
+          name="minus"
+          aria-label="Decrease value"
+          role="button"
+          tabindex="0"
+          @click=${!disabled && !readonly ? onDecrement : nothing}
+          @keydown=${onKeydown}
+        ></nr-icon>
+        <span id="icons-separator">|</span>
+        <nr-icon
+          name="plus"
+          aria-label="Increase value"
+          role="button"
+          tabindex="0"
+          @click=${!disabled && !readonly ? onIncrement : nothing}
+          @keydown=${onKeydown}
+        ></nr-icon>
+      </div>
+    `;
+    }
+}
+//# sourceMappingURL=input-renderers.js.map

package/dist/src/components/input/utils/input-validation.utils.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Validation utilities for input components
+ */
+export declare class InputValidationUtils {
+    /**
+     * Validates numeric properties (min, max, step) to ensure they are valid numbers
+     */
+    static validateNumericProperties(type: string, min?: string, max?: string, step?: string): void;
+    /**
+     * Prevents non-numeric characters from being typed in number inputs
+     */
+    static preventNonNumericInput(keyDownEvent: KeyboardEvent, min?: string): void;
+    /**
+     * Validates a numeric value against min/max constraints
+     */
+    static validateNumericValue(value: string, min?: string, max?: string): {
+        isValid: boolean;
+        warnings: string[];
+    };
+}
+//# sourceMappingURL=input-validation.utils.d.ts.map

package/dist/src/components/input/utils/input-validation.utils.js

@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Validation utilities for input components
+ */
+export class InputValidationUtils {
+    /**
+     * Validates numeric properties (min, max, step) to ensure they are valid numbers
+     */
+    static validateNumericProperties(type, min, max, step) {
+        if (type === "number" /* INPUT_TYPE.NUMBER */) {
+            if (min && Number.isNaN(Number(min))) {
+                console.warn(`Invalid min value: "${min}" is not a valid number`);
+            }
+            if (max && Number.isNaN(Number(max))) {
+                console.warn(`Invalid max value: "${max}" is not a valid number`);
+            }
+            if (step && Number.isNaN(Number(step))) {
+                console.warn(`Invalid step value: "${step}" is not a valid number`);
+            }
+            if (min && max && Number(min) >= Number(max)) {
+                console.warn(`Invalid range: min value (${min}) should be less than max value (${max})`);
+            }
+        }
+    }
+    /**
+     * Prevents non-numeric characters from being typed in number inputs
+     */
+    static preventNonNumericInput(keyDownEvent, min) {
+        const key = keyDownEvent.key;
+        const target = keyDownEvent.target;
+        const currentValue = target.value;
+        const cursorPosition = target.selectionStart || 0;
+        // Allow control keys (backspace, delete, tab, escape, enter, arrow keys, etc.)
+        const allowedControlKeys = [
+            'Backspace', 'Delete', 'Tab', 'Escape', 'Enter',
+            'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
+            'Home', 'End', 'PageUp', 'PageDown'
+        ];
+        // Allow Ctrl/Cmd combinations (copy, paste, select all, etc.)
+        if (keyDownEvent.ctrlKey || keyDownEvent.metaKey) {
+            return;
+        }
+        // Allow control keys
+        if (allowedControlKeys.includes(key)) {
+            return;
+        }
+        // Allow digits
+        if (/^\d$/.test(key)) {
+            return;
+        }
+        // Allow decimal point (.) only once and allow it at the beginning for values like ".5"
+        if (key === '.' || key === ',') {
+            const hasDecimal = currentValue.includes('.') || currentValue.includes(',');
+            if (!hasDecimal) {
+                return;
+            }
+        }
+        // Allow minus sign (-) only at the beginning and if min allows negative numbers
+        if (key === '-') {
+            const hasMinusSign = currentValue.includes('-');
+            const minAllowsNegative = !min || Number(min) < 0;
+            if (!hasMinusSign && cursorPosition === 0 && minAllowsNegative) {
+                return;
+            }
+        }
+        // Allow plus sign (+) only at the beginning
+        if (key === '+') {
+            const hasPlusSign = currentValue.includes('+');
+            if (!hasPlusSign && cursorPosition === 0) {
+                return;
+            }
+        }
+        keyDownEvent.preventDefault();
+    }
+    /**
+     * Validates a numeric value against min/max constraints
+     */
+    static validateNumericValue(value, min, max) {
+        const warnings = [];
+        if (!value) {
+            return { isValid: true, warnings };
+        }
+        const numericValue = Number(value);
+        if (Number.isNaN(numericValue)) {
+            return {
+                isValid: false,
+                warnings: [`Invalid numeric value: "${value}"`]
+            };
+        }
+        if (min && numericValue < Number(min)) {
+            warnings.push(`Value ${numericValue} is below minimum ${min}`);
+        }
+        if (max && numericValue > Number(max)) {
+            warnings.push(`Value ${numericValue} is above maximum ${max}`);
+        }
+        return { isValid: true, warnings };
+    }
+}
+//# sourceMappingURL=input-validation.utils.js.map

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