@nuraly/lumenui 0.1.0 → 0.2.2

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

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

@@ -0,0 +1,130 @@
+import { BaseColorPickerController } from './base.controller.js';
+/**
+ * Event controller manages all event handling for the colorpicker component
+ */
+export class ColorPickerEventController extends BaseColorPickerController {
+    constructor() {
+        super(...arguments);
+        this._outsideClickHandler = null;
+        this._escapeHandler = null;
+    }
+    /**
+     * Setup global event listeners
+     */
+    setupEventListeners() {
+        this._outsideClickHandler = this.handleOutsideClick.bind(this);
+        document.addEventListener('click', this._outsideClickHandler, true);
+        this._escapeHandler = this.handleEscapeKey.bind(this);
+        document.addEventListener('keydown', this._escapeHandler);
+    }
+    /**
+     * Remove global event listeners
+     */
+    removeEventListeners() {
+        if (this._outsideClickHandler) {
+            document.removeEventListener('click', this._outsideClickHandler, true);
+            this._outsideClickHandler = null;
+        }
+        if (this._escapeHandler) {
+            document.removeEventListener('keydown', this._escapeHandler);
+            this._escapeHandler = null;
+        }
+    }
+    /**
+     * Handle trigger click to toggle dropdown
+     */
+    handleTriggerClick(event) {
+        event.stopPropagation();
+        if (!this.host.disabled) {
+            const dropdownController = this.host.dropdownController;
+            if (dropdownController) {
+                dropdownController.toggle();
+            }
+        }
+    }
+    /**
+     * Handle clicks outside the component
+     */
+    handleOutsideClick(event) {
+        const composedPath = event.composedPath();
+        if (!composedPath.includes(this.host)) {
+            const dropdownController = this.host.dropdownController;
+            if (dropdownController) {
+                dropdownController.close();
+            }
+        }
+    }
+    /**
+     * Handle escape key to close dropdown
+     */
+    handleEscapeKey(event) {
+        if (event.key === 'Escape' && this.host.show) {
+            event.preventDefault();
+            const dropdownController = this.host.dropdownController;
+            if (dropdownController) {
+                dropdownController.close();
+            }
+        }
+    }
+    /**
+     * Handle color change from picker or default colors
+     */
+    handleColorChange(newColor) {
+        if (this.isValidColor(newColor) && this.host.color !== newColor) {
+            const previousColor = this.host.color;
+            this.host.color = newColor;
+            this.dispatchColorChangeEvent(newColor, previousColor);
+            this.requestUpdate();
+        }
+    }
+    /**
+     * Handle input change from text input
+     */
+    handleInputChange(event) {
+        const newColor = event.detail.value;
+        if (newColor && newColor !== this.host.color) {
+            this.handleColorChange(newColor);
+        }
+    }
+    /**
+     * Dispatch color change event
+     */
+    dispatchColorChangeEvent(newColor, previousColor) {
+        const detail = {
+            value: newColor,
+            previousValue: previousColor,
+            isValid: this.isValidColor(newColor),
+            color: newColor,
+        };
+        // Dispatch nr-color-change event (primary event)
+        this.dispatchEvent(new CustomEvent('nr-color-change', {
+            bubbles: true,
+            composed: true,
+            detail,
+        }));
+        // Also dispatch hy-color-change for backwards compatibility
+        this.dispatchEvent(new CustomEvent('hy-color-change', {
+            bubbles: true,
+            composed: true,
+            detail,
+        }));
+        // Also dispatch the old event name for backwards compatibility
+        this.dispatchEvent(new CustomEvent('color-changed', {
+            bubbles: true,
+            composed: true,
+            detail: { value: newColor, color: newColor },
+        }));
+    }
+    /**
+     * Validate color format
+     */
+    isValidColor(color) {
+        try {
+            return CSS.supports('color', color);
+        }
+        catch (_a) {
+            return false;
+        }
+    }
+}
+//# sourceMappingURL=event.controller.js.map

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

@@ -0,0 +1,4 @@
+export { BaseColorPickerController } from './base.controller.js';
+export { ColorPickerDropdownController } from './dropdown.controller.js';
+export { ColorPickerEventController } from './event.controller.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,4 @@
+export { BaseColorPickerController } from './base.controller.js';
+export { ColorPickerDropdownController } from './dropdown.controller.js';
+export { ColorPickerEventController } from './event.controller.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/colorpicker/default-color-sets.component.d.ts

@@ -19,11 +19,11 @@ import './color-holder.component.js';
  *
  * @fires color-click - Fired when a color swatch is clicked
  *
- * @cssproperty --default-color-sets-gap - Gap between color swatches
- * @cssproperty --default-color-sets-padding - Padding around the color grid
+ * @csspart container - The color swatches grid container
  */
 export declare class DefaultColorSets extends LitElement {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     /** Array of color values to display as swatches */
     defaultColorSets: string[];
     /** Size of the color swatches */

package/dist/src/components/colorpicker/default-color-sets.component.js

@@ -28,8 +28,7 @@ import './color-holder.component.js';
  *
  * @fires color-click - Fired when a color swatch is clicked
  *
- * @cssproperty --default-color-sets-gap - Gap between color swatches
- * @cssproperty --default-color-sets-padding - Padding around the color grid
+ * @csspart container - The color swatches grid container
  */
 let DefaultColorSets = class DefaultColorSets extends LitElement {
     constructor() {
@@ -77,8 +76,9 @@ let DefaultColorSets = class DefaultColorSets extends LitElement {
             return nothing;
         }
         return html `
-      <div 
+      <div
         class="default-color-sets-container"
+        part="container"
         role="list"
         aria-label="Preset color swatches"
         style="--columns: ${this.columns}"
@@ -105,6 +105,7 @@ let DefaultColorSets = class DefaultColorSets extends LitElement {
     }
 };
 DefaultColorSets.styles = styles;
+DefaultColorSets.useShadowDom = true;
 __decorate([
     property({ type: Array, attribute: 'default-color-sets' })
 ], DefaultColorSets.prototype, "defaultColorSets", void 0);

package/dist/src/components/colorpicker/default-color-sets.style.js

@@ -11,22 +11,22 @@ const defaultColorSetsStyle = css `
   }
   
   .default-color-sets-container * {
-    margin: var(--nuraly-spacing-1, 0.25rem);
+    margin: 0.25rem;
   }
   
   .color-set-container {
     cursor: pointer;
     position: relative;
-    transition: all var(--nuraly-transition-base, 0.2s) ease-in-out;
+    transition: all 0.2s ease-in-out;
   }
   
   .color-set-container:hover {
-    box-shadow: 0 0 0 2px var(--nuraly-color-focus, rgba(15, 98, 254, 0.5));
-    opacity: var(--nuraly-opacity-hover, 0.9);
+    box-shadow: 0 0 0 2px #7c3aed;
+    opacity: 0.9;
   }
   
   .color-set-container:active {
-    box-shadow: 0 0 0 2px var(--nuraly-color-focus-active, rgba(15, 98, 254, 0.8));
+    box-shadow: 0 0 0 2px rgba(15, 98, 254, 0.8);
     opacity: 1;
   }
 `;

package/dist/src/components/colorpicker/interfaces/index.d.ts

@@ -0,0 +1,60 @@
+import type { LitElement } from 'lit';
+/**
+ * Interface for the ColorPicker host component
+ */
+export interface ColorPickerHost extends LitElement {
+    color: string;
+    show: boolean;
+    disabled: boolean;
+    defaultColorSets: string[];
+    size: string;
+    setupEventListeners?: () => void;
+    removeEventListeners?: () => void;
+}
+/**
+ * Dropdown position information
+ */
+export interface DropdownPosition {
+    top: number;
+    left: number;
+    width: number;
+    placement: 'top' | 'bottom';
+}
+/**
+ * Interface for dropdown controller
+ */
+export interface DropdownController {
+    readonly isOpen: boolean;
+    readonly position: DropdownPosition;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    calculatePosition(): void;
+}
+/**
+ * Interface for event controller
+ */
+export interface EventController {
+    setupEventListeners(): void;
+    removeEventListeners(): void;
+    handleTriggerClick(event: Event): void;
+    handleColorChange(newColor: string): void;
+    handleInputChange(event: CustomEvent): void;
+    isValidColor(color: string): boolean;
+}
+/**
+ * Color change event detail
+ */
+export interface ColorChangeEventDetail {
+    value: string;
+    previousValue: string;
+    isValid: boolean;
+    color: string;
+}
+/**
+ * Color click event detail (for default color sets)
+ */
+export interface ColorClickEventDetail {
+    value: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/colorpicker/interfaces/index.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.js.map