@nuralyui/colorpicker 0.0.3 → 0.0.5

package/color-holder.component.d.ts

@@ -1,9 +1,50 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
 import { LitElement } from 'lit';
-import { ColorPickerSize } from './color-picker.types';
-export declare class ColerHolderBox extends LitElement {
+import { ColorPickerSize } from './color-picker.types.js';
+/**
+ * Color holder box component for displaying a color swatch.
+ *
+ * Renders a colored box that can be used as a color indicator or trigger.
+ * Supports various sizes and can be disabled.
+ *
+ * @example
+ * ```html
+ * <hy-colorholder-box color="#3498db"></hy-colorholder-box>
+ * <hy-colorholder-box color="rgb(52, 152, 219)" size="large"></hy-colorholder-box>
+ * <hy-colorholder-box color="#e74c3c" disabled></hy-colorholder-box>
+ * ```
+ *
+ * @cssproperty --color-holder-size - Size of the color box
+ * @cssproperty --color-holder-border - Border style
+ * @cssproperty --color-holder-border-radius - Border radius
+ * @cssproperty --color-holder-cursor - Cursor style
+ */
+export declare class ColorHolderBox extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** The color value to display */
     color: string;
+    /** Size variant (small, default, large) */
     size: ColorPickerSize;
-    static styles: import("lit").CSSResult;
+    /** Whether the color holder is disabled */
+    disabled: boolean;
+    /** Show a checkered background for transparent colors */
+    showTransparencyGrid: boolean;
+    /** Border width in pixels */
+    borderWidth: number;
+    /** Whether to show a border */
+    showBorder: boolean;
+    /**
+     * Validates if the color is valid CSS color
+     */
+    private isValidColor;
+    /**
+     * Checks if the color is transparent or has transparency
+     */
+    private isTransparent;
     render(): import("lit").TemplateResult<1>;
 }
 //# sourceMappingURL=color-holder.component.d.ts.map

package/color-holder.component.js

@@ -1,3 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -6,25 +11,106 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { styles } from './color-holder.style.js';
-let ColerHolderBox = class ColerHolderBox extends LitElement {
+/**
+ * Color holder box component for displaying a color swatch.
+ *
+ * Renders a colored box that can be used as a color indicator or trigger.
+ * Supports various sizes and can be disabled.
+ *
+ * @example
+ * ```html
+ * <hy-colorholder-box color="#3498db"></hy-colorholder-box>
+ * <hy-colorholder-box color="rgb(52, 152, 219)" size="large"></hy-colorholder-box>
+ * <hy-colorholder-box color="#e74c3c" disabled></hy-colorholder-box>
+ * ```
+ *
+ * @cssproperty --color-holder-size - Size of the color box
+ * @cssproperty --color-holder-border - Border style
+ * @cssproperty --color-holder-border-radius - Border radius
+ * @cssproperty --color-holder-cursor - Cursor style
+ */
+let ColorHolderBox = class ColorHolderBox extends LitElement {
     constructor() {
         super(...arguments);
-        this.color = '#FFFFFF';
+        /** The color value to display */
+        this.color = '#3498db';
+        /** Size variant (small, default, large) */
+        this.size = "default" /* ColorPickerSize.Default */;
+        /** Whether the color holder is disabled */
+        this.disabled = false;
+        /** Show a checkered background for transparent colors */
+        this.showTransparencyGrid = true;
+        /** Border width in pixels */
+        this.borderWidth = 2;
+        /** Whether to show a border */
+        this.showBorder = true;
+    }
+    /**
+     * Validates if the color is valid CSS color
+     */
+    isValidColor() {
+        try {
+            return CSS.supports('color', this.color);
+        }
+        catch (_a) {
+            return false;
+        }
+    }
+    /**
+     * Checks if the color is transparent or has transparency
+     */
+    isTransparent() {
+        return this.color === 'transparent' ||
+            this.color.toLowerCase().includes('rgba') ||
+            this.color.toLowerCase().includes('hsla');
     }
     render() {
-        return html ` <div class="color-holder-container" style="background-color: ${this.color}"></div> `;
+        const containerClasses = {
+            'color-holder-container': true,
+            'color-holder-container--disabled': this.disabled,
+            'color-holder-container--invalid': !this.isValidColor(),
+            'color-holder-container--transparent': this.isTransparent() && this.showTransparencyGrid,
+            [`color-holder-container--${this.size}`]: true,
+        };
+        const containerStyles = {
+            backgroundColor: this.isValidColor() ? this.color : '#ffffff',
+            borderWidth: this.showBorder ? `${this.borderWidth}px` : '0',
+        };
+        return html `
+      <div 
+        class="${classMap(containerClasses)}" 
+        style="${styleMap(containerStyles)}"
+        role="img"
+        aria-label="Color swatch: ${this.color}"
+        title="${this.color}"
+      ></div>
+    `;
     }
 };
-ColerHolderBox.styles = styles;
+ColorHolderBox.styles = styles;
 __decorate([
     property({ type: String })
-], ColerHolderBox.prototype, "color", void 0);
+], ColorHolderBox.prototype, "color", void 0);
 __decorate([
     property({ type: String, reflect: true })
-], ColerHolderBox.prototype, "size", void 0);
-ColerHolderBox = __decorate([
+], ColorHolderBox.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ColorHolderBox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-transparency-grid' })
+], ColorHolderBox.prototype, "showTransparencyGrid", void 0);
+__decorate([
+    property({ type: Number, attribute: 'border-width' })
+], ColorHolderBox.prototype, "borderWidth", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-border' })
+], ColorHolderBox.prototype, "showBorder", void 0);
+ColorHolderBox = __decorate([
     customElement('hy-colorholder-box')
-], ColerHolderBox);
-export { ColerHolderBox };
+], ColorHolderBox);
+export { ColorHolderBox };
 //# sourceMappingURL=color-holder.component.js.map

package/color-holder.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-holder.component.js","sourceRoot":"","sources":["../../../src/components/colorpicker/color-holder.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAI/C,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAEE,UAAK,GAAG,SAAS,CAAC;IAUpB,CAAC;IAHU,MAAM;QACb,OAAO,IAAI,CAAA,iEAAiE,IAAI,CAAC,KAAK,WAAW,CAAC;IACpG,CAAC;CACF,CAAA;AALiB,qBAAM,GAAG,MAAO,CAAA;AALhC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;6CACP;AAGlB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CACjB;AALZ,cAAc;IAD1B,aAAa,CAAC,oBAAoB,CAAC;GACvB,cAAc,CAY1B;SAZY,cAAc","sourcesContent":["import {LitElement, html} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {styles} from './color-holder.style.js';\nimport {ColorPickerSize} from './color-picker.types';\n\n@customElement('hy-colorholder-box')\nexport class ColerHolderBox extends LitElement {\n  @property({type: String})\n  color = '#FFFFFF';\n\n  @property({type: String, reflect: true})\n  size!: ColorPickerSize;\n\n  static override styles = styles;\n\n  override render() {\n    return html` <div class=\"color-holder-container\" style=\"background-color: ${this.color}\"></div> `;\n  }\n}\n"]}
+{"version":3,"file":"color-holder.component.js","sourceRoot":"","sources":["../../../src/components/colorpicker/color-holder.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { styles } from './color-holder.style.js';\nimport { ColorPickerSize } from './color-picker.types.js';\n\n/**\n * Color holder box component for displaying a color swatch.\n * \n * Renders a colored box that can be used as a color indicator or trigger.\n * Supports various sizes and can be disabled.\n * \n * @example\n * ```html\n * <hy-colorholder-box color=\"#3498db\"></hy-colorholder-box>\n * <hy-colorholder-box color=\"rgb(52, 152, 219)\" size=\"large\"></hy-colorholder-box>\n * <hy-colorholder-box color=\"#e74c3c\" disabled></hy-colorholder-box>\n * ```\n * \n * @cssproperty --color-holder-size - Size of the color box\n * @cssproperty --color-holder-border - Border style\n * @cssproperty --color-holder-border-radius - Border radius\n * @cssproperty --color-holder-cursor - Cursor style\n */\n@customElement('hy-colorholder-box')\nexport class ColorHolderBox extends LitElement {\n  static override styles = styles;\n\n  /** The color value to display */\n  @property({ type: String })\n  color = '#3498db';\n\n  /** Size variant (small, default, large) */\n  @property({ type: String, reflect: true })\n  size: ColorPickerSize = ColorPickerSize.Default;\n\n  /** Whether the color holder is disabled */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Show a checkered background for transparent colors */\n  @property({ type: Boolean, attribute: 'show-transparency-grid' })\n  showTransparencyGrid = true;\n\n  /** Border width in pixels */\n  @property({ type: Number, attribute: 'border-width' })\n  borderWidth = 2;\n\n  /** Whether to show a border */\n  @property({ type: Boolean, attribute: 'show-border' })\n  showBorder = true;\n\n  /**\n   * Validates if the color is valid CSS color\n   */\n  private isValidColor(): boolean {\n    try {\n      return CSS.supports('color', this.color);\n    } catch {\n      return false;\n    }\n  }\n\n  /**\n   * Checks if the color is transparent or has transparency\n   */\n  private isTransparent(): boolean {\n    return this.color === 'transparent' || \n           this.color.toLowerCase().includes('rgba') ||\n           this.color.toLowerCase().includes('hsla');\n  }\n\n  override render() {\n    const containerClasses = {\n      'color-holder-container': true,\n      'color-holder-container--disabled': this.disabled,\n      'color-holder-container--invalid': !this.isValidColor(),\n      'color-holder-container--transparent': this.isTransparent() && this.showTransparencyGrid,\n      [`color-holder-container--${this.size}`]: true,\n    };\n\n    const containerStyles = {\n      backgroundColor: this.isValidColor() ? this.color : '#ffffff',\n      borderWidth: this.showBorder ? `${this.borderWidth}px` : '0',\n    };\n\n    return html`\n      <div \n        class=\"${classMap(containerClasses)}\" \n        style=\"${styleMap(containerStyles)}\"\n        role=\"img\"\n        aria-label=\"Color swatch: ${this.color}\"\n        title=\"${this.color}\"\n      ></div>\n    `;\n  }\n}\n"]}

package/color-holder.style.js

@@ -1,20 +1,44 @@
 import { css } from 'lit';
+/**
+ * Color Holder component styles
+ * Using shared CSS variables from /src/shared/themes/
+ */
 const colorHolderStyles = css `
   :host {
+    display: inline-block;
     cursor: pointer;
+    
+    /* Ensure clean state transitions */
+    * {
+      transition: all var(--nuraly-transition-fast, 0.15s) ease;
+    }
   }
 
   .color-holder-container {
-    width: var(--hybrid-colorpicker-default-width);
-    height: var(--hybrid-colorpicker-default-height);
+    width: var(--nuraly-size-colorpicker-default, 30px);
+    height: var(--nuraly-size-colorpicker-default-height, 25px);
+    border: 1px solid var(--nuraly-color-border, rgba(0, 0, 0, 0.2));
+    box-sizing: border-box;
+    border-radius: var(--nuraly-border-radius-small, 2px);
   }
+  
   :host([size='small']) .color-holder-container {
-    width: var(--hybrid-colorpicker-small-width);
-    height: var(--hybrid-colorpicker-small-height);
+    width: var(--nuraly-size-colorpicker-small, 20px);
+    height: var(--nuraly-size-colorpicker-small-height, 15px);
   }
+  
   :host([size='large']) .color-holder-container {
-    width: var(--hybrid-colorpicker-large-width);
-    height: var(--hybrid-colorpicker-large-height);
+    width: var(--nuraly-size-colorpicker-large, 35px);
+    height: var(--nuraly-size-colorpicker-large-height, 30px);
+  }
+  
+  .color-holder-container--disabled {
+    opacity: var(--nuraly-opacity-disabled, 0.5);
+    cursor: not-allowed;
+  }
+  
+  :host(:hover:not([disabled])) .color-holder-container {
+    border-color: var(--nuraly-color-border-hover, rgba(0, 0, 0, 0.4));
   }
 `;
 export const styles = colorHolderStyles;

package/color-holder.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-holder.style.js","sourceRoot":"","sources":["../../../src/components/colorpicker/color-holder.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiB5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,iBAAiB,CAAC","sourcesContent":["import {css} from 'lit';\n\nconst colorHolderStyles = css`\n  :host {\n    cursor: pointer;\n  }\n\n  .color-holder-container {\n    width: var(--hybrid-colorpicker-default-width);\n    height: var(--hybrid-colorpicker-default-height);\n  }\n  :host([size='small']) .color-holder-container {\n    width: var(--hybrid-colorpicker-small-width);\n    height: var(--hybrid-colorpicker-small-height);\n  }\n  :host([size='large']) .color-holder-container {\n    width: var(--hybrid-colorpicker-large-width);\n    height: var(--hybrid-colorpicker-large-height);\n  }\n`;\n\nexport const styles = colorHolderStyles;\n"]}
+{"version":3,"file":"color-holder.style.js","sourceRoot":"","sources":["../../../src/components/colorpicker/color-holder.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;GAGG;AACH,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqC5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,iBAAiB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Color Holder component styles\n * Using shared CSS variables from /src/shared/themes/\n */\nconst colorHolderStyles = css`\n  :host {\n    display: inline-block;\n    cursor: pointer;\n    \n    /* Ensure clean state transitions */\n    * {\n      transition: all var(--nuraly-transition-fast, 0.15s) ease;\n    }\n  }\n\n  .color-holder-container {\n    width: var(--nuraly-size-colorpicker-default, 30px);\n    height: var(--nuraly-size-colorpicker-default-height, 25px);\n    border: 1px solid var(--nuraly-color-border, rgba(0, 0, 0, 0.2));\n    box-sizing: border-box;\n    border-radius: var(--nuraly-border-radius-small, 2px);\n  }\n  \n  :host([size='small']) .color-holder-container {\n    width: var(--nuraly-size-colorpicker-small, 20px);\n    height: var(--nuraly-size-colorpicker-small-height, 15px);\n  }\n  \n  :host([size='large']) .color-holder-container {\n    width: var(--nuraly-size-colorpicker-large, 35px);\n    height: var(--nuraly-size-colorpicker-large-height, 30px);\n  }\n  \n  .color-holder-container--disabled {\n    opacity: var(--nuraly-opacity-disabled, 0.5);\n    cursor: not-allowed;\n  }\n  \n  :host(:hover:not([disabled])) .color-holder-container {\n    border-color: var(--nuraly-color-border-hover, rgba(0, 0, 0, 0.4));\n  }\n`;\n\nexport const styles = colorHolderStyles;\n"]}

package/color-picker.component.d.ts

@@ -1,26 +1,179 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
 import { LitElement, PropertyValues } from 'lit';
+import '../input/index.js';
 import './color-holder.component.js';
 import './default-color-sets.component.js';
-import { ColorPickerSize } from './color-picker.types.js';
-export declare class ColorPicker extends LitElement {
+import { ColorPickerSize, ColorPickerTrigger, ColorPickerPlacement, ColorPickerAnimation, ColorFormat } from './color-picker.types.js';
+import type { ColorPickerHost } from './interfaces/index.js';
+declare const ColorPicker_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+/**
+ * Advanced color picker component with dropdown positioning, validation, and accessibility.
+ *
+ * Supports multiple color formats, default color sets, custom triggers, keyboard navigation,
+ * and various display configurations.
+ *
+ * @example
+ * ```html
+ * <!-- Basic color picker -->
+ * <hy-color-picker color="#3498db"></hy-color-picker>
+ *
+ * <!-- With default colors -->
+ * <hy-color-picker
+ *   color="#3498db"
+ *   .defaultColorSets="${['#3498db', '#e74c3c', '#2ecc71']}">
+ * </hy-color-picker>
+ *
+ * <!-- With custom configuration -->
+ * <hy-color-picker
+ *   color="#3498db"
+ *   trigger="click"
+ *   placement="top"
+ *   size="large"
+ *   show-input="true"
+ *   show-copy-button="true">
+ * </hy-color-picker>
+ *
+ * <!-- Disabled -->
+ * <hy-color-picker color="#3498db" disabled></hy-color-picker>
+ * ```
+ *
+ * @fires hy-color-change - Color value changed
+ * @fires hy-colorpicker-open - Dropdown opened
+ * @fires hy-colorpicker-close - Dropdown closed
+ * @fires color-changed - Legacy event for backwards compatibility
+ *
+ * @slot - Default slot for custom content
+ *
+ * @cssproperty --colorpicker-trigger-size - Size of the color trigger box
+ * @cssproperty --colorpicker-dropdown-width - Width of the dropdown panel
+ * @cssproperty --colorpicker-dropdown-background - Background color of dropdown
+ * @cssproperty --colorpicker-dropdown-shadow - Shadow of dropdown panel
+ * @cssproperty --colorpicker-dropdown-border-radius - Border radius of dropdown
+ */
+export declare class ColorPicker extends ColorPicker_base implements ColorPickerHost {
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    /** Current color value */
     color: string;
+    /** Controls dropdown visibility */
     show: boolean;
-    defaultColorSets: Array<string>;
+    /** Array of preset colors to display */
+    defaultColorSets: string[];
+    /** Disables the color picker */
     disabled: boolean;
+    /** Color picker size (small, default, large) */
     size: ColorPickerSize;
-    isValidColor: boolean;
-    static styles: import("lit").CSSResult;
+    /** Trigger mode for opening dropdown */
+    trigger: ColorPickerTrigger;
+    /** Dropdown placement */
+    placement: ColorPickerPlacement;
+    /** Animation style for dropdown */
+    animation: ColorPickerAnimation;
+    /** Close dropdown when a color is selected */
+    closeOnSelect: boolean;
+    /** Close dropdown on outside click */
+    closeOnOutsideClick: boolean;
+    /** Close dropdown on escape key */
+    closeOnEscape: boolean;
+    /** Show color input field */
+    showInput: boolean;
+    /** Show copy button on input */
+    showCopyButton: boolean;
+    /** Color format (hex, rgb, rgba, hsl, hsla) */
+    format: ColorFormat;
+    /** Placeholder text for color input */
+    inputPlaceholder: string;
+    /** Label text */
+    label: string;
+    /** Helper text */
+    helperText: string;
+    /** Validation state for color value */
+    private isValidColor;
+    /** Manages dropdown visibility and positioning */
+    private dropdownController;
+    /** Handles all event management */
+    private eventController;
     constructor();
+    /**
+     * Component connected to DOM - initialize base functionality
+     */
     connectedCallback(): void;
+    /**
+     * Component disconnected from DOM - cleanup event listeners
+     */
+    disconnectedCallback(): void;
+    /**
+     * Called after component updates
+     */
     updated(changedProperties: PropertyValues): void;
-    private toggleColorHolder;
-    private onClickOutside;
-    private calculateDropDownPosition;
+    /**
+     * Opens the color picker dropdown
+     */
+    open(): void;
+    /**
+     * Closes the color picker dropdown
+     */
+    close(): void;
+    /**
+     * Toggles the color picker dropdown
+     */
+    toggle(): void;
+    /**
+     * Validates the current color value
+     */
+    validateColor(): boolean;
+    /**
+     * Sets up global event listeners (called by dropdown controller)
+     */
+    setupEventListeners(): void;
+    /**
+     * Removes global event listeners (called by dropdown controller)
+     */
+    removeEventListeners(): void;
+    /**
+     * Handles trigger click to toggle dropdown
+     */
+    private handleTriggerClick;
+    /**
+     * Handles color selection from hex-color-picker or default colors
+     */
     private handleColorChanged;
-    private onInputChange;
-    private dispatchColorChange;
-    private checkIsValidColor;
-    disconnectedCallback(): void;
+    /**
+     * Handles input change from text input
+     */
+    private handleInputChange;
+    /**
+     * Main render method
+     */
     render(): import("lit").TemplateResult<1>;
+    /**
+     * Renders the label if provided
+     */
+    private renderLabel;
+    /**
+     * Renders the dropdown panel with color picker
+     */
+    private renderDropdown;
+    /**
+     * Renders default color sets if provided
+     */
+    private renderDefaultColorSets;
+    /**
+     * Renders the hex color picker
+     */
+    private renderColorPicker;
+    /**
+     * Renders the color input field
+     */
+    private renderColorInput;
+    /**
+     * Renders helper text if provided
+     */
+    private renderHelperText;
 }
+export {};
 //# sourceMappingURL=color-picker.component.d.ts.map