@nuraly/lumenui 0.2.1 → 0.2.2

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

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseCollapseController, CollapseControllerHost } from './base.controller.js';
+/**
+ * Keyboard navigation controller for collapse component
+ * Handles keyboard accessibility
+ */
+export declare class CollapseKeyboardController extends BaseCollapseController {
+    private currentFocusIndex;
+    constructor(host: CollapseControllerHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Add keyboard event listeners
+     */
+    private addKeyboardListeners;
+    /**
+     * Remove keyboard event listeners
+     */
+    private removeKeyboardListeners;
+    /**
+     * Handle keydown events
+     */
+    private handleKeyDown;
+    /**
+     * Handle focus events
+     */
+    private handleFocus;
+    /**
+     * Toggle section
+     */
+    private toggleSection;
+    /**
+     * Focus next section
+     */
+    private focusNextSection;
+    /**
+     * Focus previous section
+     */
+    private focusPreviousSection;
+    /**
+     * Focus first section
+     */
+    private focusFirstSection;
+    /**
+     * Focus last section
+     */
+    private focusLastSection;
+    /**
+     * Focus specific section
+     */
+    private focusSection;
+    /**
+     * Find next focusable section
+     */
+    private findNextFocusableSection;
+    /**
+     * Find previous focusable section
+     */
+    private findPreviousFocusableSection;
+    /**
+     * Get section index from header element
+     */
+    private getSectionIndex;
+    /**
+     * Get current focus index
+     */
+    getCurrentFocusIndex(): number;
+}
+//# sourceMappingURL=keyboard.controller.d.ts.map

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

@@ -0,0 +1,186 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseCollapseController } from './base.controller.js';
+/**
+ * Keyboard navigation controller for collapse component
+ * Handles keyboard accessibility
+ */
+export class CollapseKeyboardController extends BaseCollapseController {
+    constructor(host) {
+        super(host);
+        this.currentFocusIndex = -1;
+        /**
+         * Handle keydown events
+         */
+        this.handleKeyDown = (event) => {
+            const target = event.target;
+            const headerElement = target.closest('.collapse-header');
+            if (!headerElement)
+                return;
+            const sectionIndex = this.getSectionIndex(headerElement);
+            if (sectionIndex === -1)
+                return;
+            switch (event.key) {
+                case 'Enter':
+                case ' ':
+                    event.preventDefault();
+                    this.toggleSection(sectionIndex);
+                    break;
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.focusNextSection(sectionIndex);
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.focusPreviousSection(sectionIndex);
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    this.focusFirstSection();
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    this.focusLastSection();
+                    break;
+            }
+        };
+        /**
+         * Handle focus events
+         */
+        this.handleFocus = (event) => {
+            const target = event.target;
+            const headerElement = target.closest('.collapse-header');
+            if (headerElement) {
+                const sectionIndex = this.getSectionIndex(headerElement);
+                this.currentFocusIndex = sectionIndex;
+            }
+        };
+    }
+    hostConnected() {
+        super.hostConnected();
+        this.addKeyboardListeners();
+    }
+    hostDisconnected() {
+        super.hostDisconnected();
+        this.removeKeyboardListeners();
+    }
+    /**
+     * Add keyboard event listeners
+     */
+    addKeyboardListeners() {
+        const hostElement = this.host;
+        hostElement.addEventListener('keydown', this.handleKeyDown);
+        hostElement.addEventListener('focus', this.handleFocus, true);
+    }
+    /**
+     * Remove keyboard event listeners
+     */
+    removeKeyboardListeners() {
+        const hostElement = this.host;
+        hostElement.removeEventListener('keydown', this.handleKeyDown);
+        hostElement.removeEventListener('focus', this.handleFocus, true);
+    }
+    /**
+     * Toggle section
+     */
+    toggleSection(index) {
+        const section = this.getSection(index);
+        if (section && section.collapsible !== false && !section.disabled) {
+            // Dispatch toggle event - the main component will handle the actual toggle
+            const hostElement = this.host;
+            hostElement.dispatchEvent(new CustomEvent('section-toggle-requested', {
+                detail: { index },
+                bubbles: false
+            }));
+        }
+    }
+    /**
+     * Focus next section
+     */
+    focusNextSection(currentIndex) {
+        const nextIndex = this.findNextFocusableSection(currentIndex);
+        if (nextIndex !== -1) {
+            this.focusSection(nextIndex);
+        }
+    }
+    /**
+     * Focus previous section
+     */
+    focusPreviousSection(currentIndex) {
+        const prevIndex = this.findPreviousFocusableSection(currentIndex);
+        if (prevIndex !== -1) {
+            this.focusSection(prevIndex);
+        }
+    }
+    /**
+     * Focus first section
+     */
+    focusFirstSection() {
+        const firstIndex = this.findNextFocusableSection(-1);
+        if (firstIndex !== -1) {
+            this.focusSection(firstIndex);
+        }
+    }
+    /**
+     * Focus last section
+     */
+    focusLastSection() {
+        const lastIndex = this.findPreviousFocusableSection(this.host.sections.length);
+        if (lastIndex !== -1) {
+            this.focusSection(lastIndex);
+        }
+    }
+    /**
+     * Focus specific section
+     */
+    focusSection(index) {
+        var _a;
+        const hostElement = this.host;
+        const headerElement = (_a = hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.collapse-header[data-section-index="${index}"]`);
+        if (headerElement) {
+            headerElement.focus();
+            this.currentFocusIndex = index;
+        }
+    }
+    /**
+     * Find next focusable section
+     */
+    findNextFocusableSection(currentIndex) {
+        for (let i = currentIndex + 1; i < this.host.sections.length; i++) {
+            const section = this.host.sections[i];
+            if (section.collapsible !== false && !section.disabled) {
+                return i;
+            }
+        }
+        return -1;
+    }
+    /**
+     * Find previous focusable section
+     */
+    findPreviousFocusableSection(currentIndex) {
+        for (let i = currentIndex - 1; i >= 0; i--) {
+            const section = this.host.sections[i];
+            if (section.collapsible !== false && !section.disabled) {
+                return i;
+            }
+        }
+        return -1;
+    }
+    /**
+     * Get section index from header element
+     */
+    getSectionIndex(headerElement) {
+        const indexAttr = headerElement.getAttribute('data-section-index');
+        return indexAttr ? Number.parseInt(indexAttr, 10) : -1;
+    }
+    /**
+     * Get current focus index
+     */
+    getCurrentFocusIndex() {
+        return this.currentFocusIndex;
+    }
+}
+//# sourceMappingURL=keyboard.controller.js.map

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

@@ -0,0 +1,14 @@
+import { ReactiveControllerHost } from 'lit';
+import type { ColorPickerHost } from '../interfaces/index.js';
+import { BaseComponentController } from '@nuralyui/common/controllers';
+/**
+ * Base controller class for all colorpicker controllers
+ * Provides common functionality for event dispatching, updates, and error handling
+ */
+export declare abstract class BaseColorPickerController extends BaseComponentController<ColorPickerHost & ReactiveControllerHost> {
+    /**
+     * Find an element within the host's shadow root
+     */
+    protected findElement(selector: string): HTMLElement | null;
+}
+//# sourceMappingURL=base.controller.d.ts.map

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

@@ -0,0 +1,15 @@
+import { BaseComponentController } from '@nuralyui/common/controllers';
+/**
+ * Base controller class for all colorpicker controllers
+ * Provides common functionality for event dispatching, updates, and error handling
+ */
+export class BaseColorPickerController extends BaseComponentController {
+    /**
+     * Find an element within the host's shadow root
+     */
+    findElement(selector) {
+        var _a;
+        return ((_a = this._host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(selector)) || null;
+    }
+}
+//# sourceMappingURL=base.controller.js.map

package/dist/src/components/colorpicker/controllers/dropdown.controller.d.ts

@@ -0,0 +1,60 @@
+import { BaseColorPickerController } from './base.controller.js';
+import type { DropdownController, DropdownPosition } from '../interfaces/index.js';
+/**
+ * Dropdown controller manages the colorpicker dropdown positioning, visibility, and interactions
+ */
+export declare class ColorPickerDropdownController extends BaseColorPickerController implements DropdownController {
+    private _isOpen;
+    private _position;
+    private _dropdownElement;
+    private _triggerElement;
+    private _scrollHandler;
+    private _resizeHandler;
+    /**
+     * Check if dropdown is open
+     */
+    get isOpen(): boolean;
+    /**
+     * Get current dropdown position
+     */
+    get position(): DropdownPosition;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Open the dropdown
+     */
+    open(): void;
+    /**
+     * Close the dropdown
+     */
+    close(): void;
+    /**
+     * Toggle dropdown visibility
+     */
+    toggle(): void;
+    /**
+     * Find dropdown and trigger elements
+     */
+    private findElements;
+    /**
+     * Calculate optimal dropdown placement
+     */
+    calculatePosition(): void;
+    /**
+     * Apply calculated position to dropdown element
+     */
+    private applyPosition;
+    /**
+     * Reset dropdown position
+     */
+    private resetPosition;
+    /**
+     * Setup scroll and resize listeners for repositioning
+     */
+    private setupScrollAndResizeListeners;
+    /**
+     * Cleanup event listeners
+     */
+    private cleanup;
+}
+//# sourceMappingURL=dropdown.controller.d.ts.map

package/dist/src/components/colorpicker/controllers/dropdown.controller.js

@@ -0,0 +1,243 @@
+import { BaseColorPickerController } from './base.controller.js';
+/**
+ * Dropdown controller manages the colorpicker dropdown positioning, visibility, and interactions
+ */
+export class ColorPickerDropdownController extends BaseColorPickerController {
+    constructor() {
+        super(...arguments);
+        this._isOpen = false;
+        this._position = { top: 0, left: 0, width: 0, placement: 'bottom' };
+        this._dropdownElement = null;
+        this._triggerElement = null;
+        this._scrollHandler = null;
+        this._resizeHandler = null;
+    }
+    /**
+     * Check if dropdown is open
+     */
+    get isOpen() {
+        return this._isOpen;
+    }
+    /**
+     * Get current dropdown position
+     */
+    get position() {
+        return Object.assign({}, this._position);
+    }
+    hostConnected() {
+        this.setupScrollAndResizeListeners();
+    }
+    hostDisconnected() {
+        this.cleanup();
+    }
+    /**
+     * Open the dropdown
+     */
+    open() {
+        try {
+            if (!this._isOpen && !this.host.disabled) {
+                this._isOpen = true;
+                this.host.show = true;
+                this.requestUpdate();
+                // Find elements and calculate position after DOM update
+                requestAnimationFrame(() => {
+                    this.findElements();
+                    // Hide initially to prevent flicker
+                    if (this._dropdownElement) {
+                        this._dropdownElement.classList.remove('positioned');
+                    }
+                    // Calculate position and show
+                    requestAnimationFrame(() => {
+                        this.calculatePosition();
+                        // Make visible after positioning
+                        if (this._dropdownElement) {
+                            this._dropdownElement.classList.add('positioned');
+                        }
+                    });
+                });
+                // Setup event listeners
+                if (this.host && typeof this.host.setupEventListeners === 'function') {
+                    setTimeout(() => {
+                        var _a, _b;
+                        (_b = (_a = this.host).setupEventListeners) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    }, 50);
+                }
+                this.dispatchEvent(new CustomEvent('nr-colorpicker-open', {
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'open');
+        }
+    }
+    /**
+     * Close the dropdown
+     */
+    close() {
+        var _a, _b;
+        try {
+            if (this._isOpen) {
+                this._isOpen = false;
+                this.host.show = false;
+                this.resetPosition();
+                this.requestUpdate();
+                // Notify host to remove event listeners
+                if (this.host && typeof this.host.removeEventListeners === 'function') {
+                    (_b = (_a = this.host).removeEventListeners) === null || _b === void 0 ? void 0 : _b.call(_a);
+                }
+                this.dispatchEvent(new CustomEvent('nr-colorpicker-close', {
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'close');
+        }
+    }
+    /**
+     * Toggle dropdown visibility
+     */
+    toggle() {
+        if (this._isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    /**
+     * Find dropdown and trigger elements
+     */
+    findElements() {
+        this._dropdownElement = this.findElement('.dropdown-container');
+        this._triggerElement = this.findElement('.color-holder');
+    }
+    /**
+     * Calculate optimal dropdown placement
+     */
+    calculatePosition() {
+        var _a, _b;
+        try {
+            if (!this._dropdownElement || !this._triggerElement) {
+                this.findElements();
+            }
+            if (!this._dropdownElement || !this._triggerElement) {
+                return;
+            }
+            const triggerRect = this._triggerElement.getBoundingClientRect();
+            const dropdownRect = this._dropdownElement.getBoundingClientRect();
+            const viewportHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || window.innerHeight;
+            const viewportWidth = ((_b = window.visualViewport) === null || _b === void 0 ? void 0 : _b.width) || window.innerWidth;
+            // Calculate available space
+            const spaceBelow = viewportHeight - triggerRect.bottom;
+            const spaceAbove = triggerRect.top;
+            const spaceRight = viewportWidth - triggerRect.left;
+            // Determine optimal placement
+            let top;
+            let left;
+            let placement = 'bottom';
+            // Vertical positioning
+            if (spaceBelow >= dropdownRect.height || spaceBelow > spaceAbove) {
+                // Position below
+                top = triggerRect.bottom;
+                placement = 'bottom';
+            }
+            else {
+                // Position above
+                top = triggerRect.top - dropdownRect.height;
+                placement = 'top';
+            }
+            // Horizontal positioning
+            if (spaceRight >= dropdownRect.width) {
+                // Align with trigger left edge
+                left = triggerRect.left;
+            }
+            else {
+                // Align to fit within viewport
+                left = Math.max(0, viewportWidth - dropdownRect.width);
+            }
+            this._position = {
+                top,
+                left,
+                width: Math.max(triggerRect.width, dropdownRect.width),
+                placement,
+            };
+            this.applyPosition();
+        }
+        catch (error) {
+            this.handleError(error, 'calculatePosition');
+        }
+    }
+    /**
+     * Apply calculated position to dropdown element
+     */
+    applyPosition() {
+        try {
+            if (!this._dropdownElement)
+                return;
+            this._dropdownElement.style.position = 'fixed';
+            this._dropdownElement.style.top = `${this._position.top}px`;
+            this._dropdownElement.style.left = `${this._position.left}px`;
+            this._dropdownElement.style.zIndex = '9999';
+            // Add placement class for styling
+            this._dropdownElement.classList.remove('placement-top', 'placement-bottom');
+            this._dropdownElement.classList.add(`placement-${this._position.placement}`);
+            // Ensure positioned class is added for visibility
+            this._dropdownElement.classList.add('positioned');
+        }
+        catch (error) {
+            this.handleError(error, 'applyPosition');
+        }
+    }
+    /**
+     * Reset dropdown position
+     */
+    resetPosition() {
+        try {
+            if (this._dropdownElement) {
+                this._dropdownElement.style.removeProperty('position');
+                this._dropdownElement.style.removeProperty('top');
+                this._dropdownElement.style.removeProperty('left');
+                this._dropdownElement.style.removeProperty('z-index');
+                this._dropdownElement.classList.remove('placement-top', 'placement-bottom', 'positioned');
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'resetPosition');
+        }
+    }
+    /**
+     * Setup scroll and resize listeners for repositioning
+     */
+    setupScrollAndResizeListeners() {
+        this._scrollHandler = () => {
+            if (this._isOpen) {
+                this.calculatePosition();
+            }
+        };
+        this._resizeHandler = () => {
+            if (this._isOpen) {
+                this.calculatePosition();
+            }
+        };
+        document.addEventListener('scroll', this._scrollHandler, { passive: true });
+        window.addEventListener('resize', this._resizeHandler);
+    }
+    /**
+     * Cleanup event listeners
+     */
+    cleanup() {
+        if (this._scrollHandler) {
+            document.removeEventListener('scroll', this._scrollHandler);
+            this._scrollHandler = null;
+        }
+        if (this._resizeHandler) {
+            window.removeEventListener('resize', this._resizeHandler);
+            this._resizeHandler = null;
+        }
+    }
+}
+//# sourceMappingURL=dropdown.controller.js.map

package/dist/src/components/colorpicker/controllers/event.controller.d.ts

@@ -0,0 +1,46 @@
+import { BaseColorPickerController } from './base.controller.js';
+import type { EventController } from '../interfaces/index.js';
+/**
+ * Event controller manages all event handling for the colorpicker component
+ */
+export declare class ColorPickerEventController extends BaseColorPickerController implements EventController {
+    private _outsideClickHandler;
+    private _escapeHandler;
+    /**
+     * Setup global event listeners
+     */
+    setupEventListeners(): void;
+    /**
+     * Remove global event listeners
+     */
+    removeEventListeners(): void;
+    /**
+     * Handle trigger click to toggle dropdown
+     */
+    handleTriggerClick(event: Event): void;
+    /**
+     * Handle clicks outside the component
+     */
+    private handleOutsideClick;
+    /**
+     * Handle escape key to close dropdown
+     */
+    private handleEscapeKey;
+    /**
+     * Handle color change from picker or default colors
+     */
+    handleColorChange(newColor: string): void;
+    /**
+     * Handle input change from text input
+     */
+    handleInputChange(event: CustomEvent): void;
+    /**
+     * Dispatch color change event
+     */
+    private dispatchColorChangeEvent;
+    /**
+     * Validate color format
+     */
+    isValidColor(color: string): boolean;
+}
+//# sourceMappingURL=event.controller.d.ts.map