@nuralyui/colorpicker 0.0.4 → 0.0.6

package/color-picker.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.style.js","sourceRoot":"","sources":["../../../src/components/colorpicker/color-picker.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEjB,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport default css`\n  .color-picker-container {\n    display: inline-flex;\n    flex-direction: column;\n  }\n  hex-color-picker {\n    width: 100%;\n  }\n  .dropdown-container {\n    display: none;\n  }\n  hex-color-picker::part(saturation) {\n    border-radius: 0px;\n  }\n  hex-color-picker::part(hue) {\n    border-radius: 0px;\n  }\n  hex-color-picker::part(saturation-pointer),\n  hex-color-picker::part(hue-pointer) {\n    cursor: pointer;\n  }\n  .color-holder {\n    cursor: pointer;\n  }\n  :host([disabled]) .color-holder {\n    opacity: var(--hybrid-colorpicker-disabled-opacity);\n    cursor: not-allowed;\n  }\n  :host(:not([disabled])) .color-holder {\n    border: var(--hybrid-colorpicker-border-color);\n  }\n  :host(:not([disabled])) .color-holder:hover {\n    opacity: var(--hybrid-colorpicker-hover-opacity);\n  }\n  :host(:not([disabled])) .color-holder:active {\n    border:var(--hybrid-colorpicker-active-border)\n  }\n  \n\n  :host([show]) .dropdown-container{\n    display: block;\n    position: fixed;\n    width: 180px;\n    z-index: 1;\n    padding: 5px;\n    background-color: var(--hybrid-colorpicker-background-color);\n    box-shadow: 1px -1px 5px 1px rgba(0, 0, 0, 0.14);\n    -webkit-box-shadow: 1px -1px 5px 1px rgba(0, 0, 0, 0.14);\n    -moz-box-shadow: 1px -1px 5px 1px rgba(0, 0, 0, 0.14);\n  }\n\n  :host {\n    --hybrid-colorpicker-background-color: #f4f4f4;\n    --hybrid-colorpicker-border-color: 1px solid gray;\n    --hybrid-colorpicker-active-border: 1px solid #0f62fe;\n    --hybrid-colorpicker-disabled-opacity: 0.5;\n    --hybrid-colorpicker-hover-opacity: 0.8;\n    --hybrid-colorpicker-default-width: 30px;\n    --hybrid-colorpicker-default-height: 25px;\n    --hybrid-colorpicker-small-width: 20px;\n    --hybrid-colorpicker-small-height: 15px;\n    --hybrid-colorpicker-large-width: 35px;\n    --hybrid-colorpicker-large-height: 30px;\n  }\n \n  @media (prefers-color-scheme: dark) {\n    :host { \n      --hybrid-colorpicker-background-color: #393939;\n      --hybrid-colorpicker-border-color: 1px solid #f4f4f4;\n      --hybrid-colorpicker-disabled-opacity: 0.2;\n    }\n  }\n`;\n"]}
+{"version":3,"file":"color-picker.style.js","sourceRoot":"","sources":["../../../src/components/colorpicker/color-picker.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EjB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Color Picker component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-colorpicker component with\n * clean CSS variable usage without local fallbacks and proper theme switching support.\n */\nexport default css`\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    \n    /* Force CSS custom property inheritance to ensure theme switching works properly */\n    color: var(--nuraly-color-text);\n    background-color: var(--nuraly-color-background);\n    \n    /* Ensure clean state transitions when theme changes */\n    * {\n      transition: all var(--nuraly-transition-fast, 0.15s) ease;\n    }\n  }\n\n  /* Force re-evaluation of theme-dependent properties on theme change */\n  :host([data-theme]) {\n    color: inherit;\n    background-color: inherit;\n  }\n\n  .color-picker-container {\n    display: inline-flex;\n    flex-direction: column;\n  }\n  \n  hex-color-picker {\n    width: 100%;\n  }\n  \n  .dropdown-container {\n    display: none;\n  }\n  \n  hex-color-picker::part(saturation) {\n    border-radius: 0px;\n  }\n  \n  hex-color-picker::part(hue) {\n    border-radius: 0px;\n  }\n  \n  hex-color-picker::part(saturation-pointer),\n  hex-color-picker::part(hue-pointer) {\n    cursor: pointer;\n  }\n  \n  .color-holder {\n    cursor: pointer;\n  }\n  \n  :host([disabled]) .color-holder {\n    opacity: var(--nuraly-opacity-disabled, 0.5);\n    cursor: not-allowed;\n  }\n\n  :host([show]) .dropdown-container {\n    display: block;\n    position: fixed;\n    width: 180px;\n    z-index: var(--nuraly-z-index-dropdown, 1000);\n    padding: var(--nuraly-spacing-2, 0.5rem);\n    background-color: var(--nuraly-color-surface, #ffffff);\n    border: 1px solid var(--nuraly-color-border, rgba(0, 0, 0, 0.1));\n    border-radius: var(--nuraly-border-radius-medium, 4px);\n    box-shadow: var(--nuraly-shadow-dropdown, 0 2px 8px rgba(0, 0, 0, 0.15));\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity var(--nuraly-transition-fast, 0.15s) ease-in-out,\n                visibility var(--nuraly-transition-fast, 0.15s) ease-in-out;\n  }\n\n  :host([show]) .dropdown-container.positioned {\n    opacity: 1;\n    visibility: visible;\n  }\n`;\n"]}

package/color-picker.types.d.ts

@@ -1,6 +1,60 @@
+/**
+ * ColorPicker size variants
+ */
 export declare const enum ColorPickerSize {
     Default = "default",
     Small = "small",
     Large = "large"
 }
+/**
+ * ColorPicker trigger modes
+ */
+export declare const enum ColorPickerTrigger {
+    Click = "click",
+    Hover = "hover",
+    Manual = "manual"
+}
+/**
+ * ColorPicker placement options
+ */
+export declare const enum ColorPickerPlacement {
+    Top = "top",
+    Bottom = "bottom",
+    Auto = "auto"
+}
+/**
+ * ColorPicker animation types
+ */
+export declare const enum ColorPickerAnimation {
+    None = "none",
+    Fade = "fade",
+    Slide = "slide",
+    Scale = "scale"
+}
+/**
+ * ColorPicker format options
+ */
+export declare const enum ColorFormat {
+    Hex = "hex",
+    RGB = "rgb",
+    RGBA = "rgba",
+    HSL = "hsl",
+    HSLA = "hsla"
+}
+/**
+ * ColorPicker configuration
+ */
+export interface ColorPickerConfig {
+    trigger?: ColorPickerTrigger;
+    placement?: ColorPickerPlacement;
+    animation?: ColorPickerAnimation;
+    disabled?: boolean;
+    closeOnSelect?: boolean;
+    closeOnOutsideClick?: boolean;
+    closeOnEscape?: boolean;
+    showInput?: boolean;
+    showCopyButton?: boolean;
+    format?: ColorFormat;
+    defaultColorSets?: string[];
+}
 //# sourceMappingURL=color-picker.types.d.ts.map

package/color-picker.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.types.js","sourceRoot":"","sources":["../../../src/components/colorpicker/color-picker.types.ts"],"names":[],"mappings":"","sourcesContent":["export const enum ColorPickerSize {\n  Default = 'default',\n  Small = 'small',\n  Large = 'large',\n}\n"]}
+{"version":3,"file":"color-picker.types.js","sourceRoot":"","sources":["../../../src/components/colorpicker/color-picker.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * ColorPicker size variants\n */\nexport const enum ColorPickerSize {\n  Default = 'default',\n  Small = 'small',\n  Large = 'large',\n}\n\n/**\n * ColorPicker trigger modes\n */\nexport const enum ColorPickerTrigger {\n  Click = 'click',\n  Hover = 'hover',\n  Manual = 'manual',\n}\n\n/**\n * ColorPicker placement options\n */\nexport const enum ColorPickerPlacement {\n  Top = 'top',\n  Bottom = 'bottom',\n  Auto = 'auto',\n}\n\n/**\n * ColorPicker animation types\n */\nexport const enum ColorPickerAnimation {\n  None = 'none',\n  Fade = 'fade',\n  Slide = 'slide',\n  Scale = 'scale',\n}\n\n/**\n * ColorPicker format options\n */\nexport const enum ColorFormat {\n  Hex = 'hex',\n  RGB = 'rgb',\n  RGBA = 'rgba',\n  HSL = 'hsl',\n  HSLA = 'hsla',\n}\n\n/**\n * ColorPicker configuration\n */\nexport interface ColorPickerConfig {\n  trigger?: ColorPickerTrigger;\n  placement?: ColorPickerPlacement;\n  animation?: ColorPickerAnimation;\n  disabled?: boolean;\n  closeOnSelect?: boolean;\n  closeOnOutsideClick?: boolean;\n  closeOnEscape?: boolean;\n  showInput?: boolean;\n  showCopyButton?: boolean;\n  format?: ColorFormat;\n  defaultColorSets?: string[];\n}\n"]}

package/default-color-sets.component.d.ts

@@ -1,9 +1,45 @@
-import { LitElement } from 'lit';
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, nothing } from 'lit';
 import './color-holder.component.js';
+/**
+ * Default color sets component for displaying preset color swatches.
+ *
+ * Renders a grid of clickable color swatches that can be used as quick color selections.
+ *
+ * @example
+ * ```html
+ * <nr-default-color-sets
+ *   .defaultColorSets="${['#3498db', '#e74c3c', '#2ecc71', '#f39c12']}">
+ * </nr-default-color-sets>
+ * ```
+ *
+ * @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
+ */
 export declare class DefaultColorSets extends LitElement {
-    defaultColorSets: Array<string>;
     static styles: import("lit").CSSResult;
-    handleColorClick(color: string): void;
-    render(): import("lit").TemplateResult<1>;
+    /** Array of color values to display as swatches */
+    defaultColorSets: string[];
+    /** Size of the color swatches */
+    size: 'small' | 'default' | 'large';
+    /** Number of columns in the grid */
+    columns: number;
+    /**
+     * Handles color swatch click
+     * @param color - The clicked color value
+     * @param event - The click event
+     */
+    private handleColorClick;
+    /**
+     * Validates if a color string is valid CSS color
+     */
+    private isValidColor;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
 }
 //# sourceMappingURL=default-color-sets.component.d.ts.map

package/default-color-sets.component.js

@@ -1,43 +1,121 @@
+/**
+ * @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);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
 import { styles } from './default-color-sets.style.js';
 import './color-holder.component.js';
+/**
+ * Default color sets component for displaying preset color swatches.
+ *
+ * Renders a grid of clickable color swatches that can be used as quick color selections.
+ *
+ * @example
+ * ```html
+ * <nr-default-color-sets
+ *   .defaultColorSets="${['#3498db', '#e74c3c', '#2ecc71', '#f39c12']}">
+ * </nr-default-color-sets>
+ * ```
+ *
+ * @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
+ */
 let DefaultColorSets = class DefaultColorSets extends LitElement {
     constructor() {
         super(...arguments);
+        /** Array of color values to display as swatches */
         this.defaultColorSets = [];
+        /** Size of the color swatches */
+        this.size = 'default';
+        /** Number of columns in the grid */
+        this.columns = 8;
     }
-    handleColorClick(color) {
+    /**
+     * Handles color swatch click
+     * @param color - The clicked color value
+     * @param event - The click event
+     */
+    handleColorClick(color, event) {
+        event.stopPropagation();
+        if (!this.isValidColor(color)) {
+            console.warn(`Invalid color: ${color}`);
+            return;
+        }
+        const detail = {
+            value: color,
+        };
         this.dispatchEvent(new CustomEvent('color-click', {
-            detail: {
-                value: color,
-            },
+            bubbles: true,
+            composed: true,
+            detail,
         }));
     }
+    /**
+     * Validates if a color string is valid CSS color
+     */
+    isValidColor(color) {
+        try {
+            return CSS.supports('color', color);
+        }
+        catch (_a) {
+            return false;
+        }
+    }
     render() {
+        if (!this.defaultColorSets || this.defaultColorSets.length === 0) {
+            return nothing;
+        }
         return html `
-      <div class="default-color-sets-container">
-        ${this.defaultColorSets.map((color) => html `<hy-colorholder-box
-              @click=${() => this.handleColorClick(color)}
+      <div 
+        class="default-color-sets-container"
+        role="list"
+        aria-label="Preset color swatches"
+        style="--columns: ${this.columns}"
+      >
+        ${map(this.defaultColorSets, (color) => html `
+            <nr-colorholder-box
               color="${color}"
-              class='color-set-container'
-            ></hy-colorholder-box>`)}
+              .size=${this.size}
+              class="color-set-container"
+              role="listitem"
+              tabindex="0"
+              aria-label="Color ${color}"
+              @click=${(e) => this.handleColorClick(color, e)}
+              @keydown=${(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.handleColorClick(color, e);
+            }
+        }}
+            ></nr-colorholder-box>
+          `)}
       </div>
     `;
     }
 };
 DefaultColorSets.styles = styles;
 __decorate([
-    property({ type: Array })
+    property({ type: Array, attribute: 'default-color-sets' })
 ], DefaultColorSets.prototype, "defaultColorSets", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], DefaultColorSets.prototype, "size", void 0);
+__decorate([
+    property({ type: Number, attribute: 'columns' })
+], DefaultColorSets.prototype, "columns", void 0);
 DefaultColorSets = __decorate([
-    customElement('hy-default-color-sets')
+    customElement('nr-default-color-sets')
 ], DefaultColorSets);
 export { DefaultColorSets };
 //# sourceMappingURL=default-color-sets.component.js.map

package/default-color-sets.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"default-color-sets.component.js","sourceRoot":"","sources":["../../../src/components/colorpicker/default-color-sets.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,+BAA+B,CAAC;AACrD,OAAO,6BAA6B,CAAC;AAErC,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAAhD;;QAEE,qBAAgB,GAAkB,EAAE,CAAC;IA4BvC,CAAC;IAxBC,gBAAgB,CAAC,KAAa;QAC5B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,MAAM,EAAE;gBACN,KAAK,EAAE,KAAK;aACb;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,gBAAgB,CAAC,GAAG,CACzB,CAAC,KAAK,EAAE,EAAE,CACR,IAAI,CAAA;uBACO,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;uBAClC,KAAK;;mCAEO,CAC1B;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AA1BiB,uBAAM,GAAG,MAAO,CAAA;AAFhC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;0DACa;AAF1B,gBAAgB;IAD5B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,gBAAgB,CA8B5B;SA9BY,gBAAgB","sourcesContent":["import {LitElement, html} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {styles} from './default-color-sets.style.js';\nimport './color-holder.component.js';\n@customElement('hy-default-color-sets')\nexport class DefaultColorSets extends LitElement {\n  @property({type: Array})\n  defaultColorSets: Array<string> = [];\n\n  static override styles = styles;\n\n  handleColorClick(color: string) {\n    this.dispatchEvent(\n      new CustomEvent('color-click', {\n        detail: {\n          value: color,\n        },\n      })\n    );\n  }\n\n  override render() {\n    return html`\n      <div class=\"default-color-sets-container\">\n        ${this.defaultColorSets.map(\n          (color) =>\n            html`<hy-colorholder-box\n              @click=${() => this.handleColorClick(color)}\n              color=\"${color}\"\n              class='color-set-container'\n            ></hy-colorholder-box>`\n        )}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"default-color-sets.component.js","sourceRoot":"","sources":["../../../src/components/colorpicker/default-color-sets.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,6BAA6B,CAAC;AAGrC;;;;;;;;;;;;;;;;GAgBG;AAEH,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAAhD;;QAGE,mDAAmD;QAEnD,qBAAgB,GAAa,EAAE,CAAC;QAEhC,iCAAiC;QAEjC,SAAI,GAAkC,SAAS,CAAC;QAEhD,oCAAoC;QAEpC,YAAO,GAAG,CAAC,CAAC;IA0Ed,CAAC;IAxEC;;;;OAIG;IACK,gBAAgB,CAAC,KAAa,EAAE,KAAY;QAClD,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE;YAC7B,OAAO,CAAC,IAAI,CAAC,kBAAkB,KAAK,EAAE,CAAC,CAAC;YACxC,OAAO;SACR;QAED,MAAM,MAAM,GAA0B;YACpC,KAAK,EAAE,KAAK;SACb,CAAC;QAEF,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM;SACP,CAAC,CACH,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,YAAY,CAAC,KAAa;QAChC,IAAI;YACF,OAAO,GAAG,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;SACrC;QAAC,WAAM;YACN,OAAO,KAAK,CAAC;SACd;IACH,CAAC;IAEQ,MAAM;QACb,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,KAAK,CAAC,EAAE;YAChE,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,IAAI,CAAA;;;;;4BAKa,IAAI,CAAC,OAAO;;UAE9B,GAAG,CACH,IAAI,CAAC,gBAAgB,EACrB,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;uBAEF,KAAK;sBACN,IAAI,CAAC,IAAI;;;;kCAIG,KAAK;uBAChB,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC,CAAC;yBAC3C,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;gBACtC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;aACjC;QACH,CAAC;;WAEJ,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAtFiB,uBAAM,GAAG,MAAO,CAAA;AAIhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;0DAC3B;AAIhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACM;AAIhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;iDACrC;AAbD,gBAAgB;IAD5B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,gBAAgB,CAuF5B;SAvFY,gBAAgB","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { styles } from './default-color-sets.style.js';\nimport './color-holder.component.js';\nimport type { ColorClickEventDetail } from './interfaces/index.js';\n\n/**\n * Default color sets component for displaying preset color swatches.\n * \n * Renders a grid of clickable color swatches that can be used as quick color selections.\n * \n * @example\n * ```html\n * <nr-default-color-sets \n *   .defaultColorSets=\"${['#3498db', '#e74c3c', '#2ecc71', '#f39c12']}\">\n * </nr-default-color-sets>\n * ```\n * \n * @fires color-click - Fired when a color swatch is clicked\n * \n * @cssproperty --default-color-sets-gap - Gap between color swatches\n * @cssproperty --default-color-sets-padding - Padding around the color grid\n */\n@customElement('nr-default-color-sets')\nexport class DefaultColorSets extends LitElement {\n  static override styles = styles;\n\n  /** Array of color values to display as swatches */\n  @property({ type: Array, attribute: 'default-color-sets' })\n  defaultColorSets: string[] = [];\n\n  /** Size of the color swatches */\n  @property({ type: String, reflect: true })\n  size: 'small' | 'default' | 'large' = 'default';\n\n  /** Number of columns in the grid */\n  @property({ type: Number, attribute: 'columns' })\n  columns = 8;\n\n  /**\n   * Handles color swatch click\n   * @param color - The clicked color value\n   * @param event - The click event\n   */\n  private handleColorClick(color: string, event: Event): void {\n    event.stopPropagation();\n    \n    if (!this.isValidColor(color)) {\n      console.warn(`Invalid color: ${color}`);\n      return;\n    }\n\n    const detail: ColorClickEventDetail = {\n      value: color,\n    };\n\n    this.dispatchEvent(\n      new CustomEvent('color-click', {\n        bubbles: true,\n        composed: true,\n        detail,\n      })\n    );\n  }\n\n  /**\n   * Validates if a color string is valid CSS color\n   */\n  private isValidColor(color: string): boolean {\n    try {\n      return CSS.supports('color', color);\n    } catch {\n      return false;\n    }\n  }\n\n  override render() {\n    if (!this.defaultColorSets || this.defaultColorSets.length === 0) {\n      return nothing;\n    }\n\n    return html`\n      <div \n        class=\"default-color-sets-container\"\n        role=\"list\"\n        aria-label=\"Preset color swatches\"\n        style=\"--columns: ${this.columns}\"\n      >\n        ${map(\n          this.defaultColorSets,\n          (color) => html`\n            <nr-colorholder-box\n              color=\"${color}\"\n              .size=${this.size}\n              class=\"color-set-container\"\n              role=\"listitem\"\n              tabindex=\"0\"\n              aria-label=\"Color ${color}\"\n              @click=${(e: Event) => this.handleColorClick(color, e)}\n              @keydown=${(e: KeyboardEvent) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault();\n                  this.handleColorClick(color, e);\n                }\n              }}\n            ></nr-colorholder-box>\n          `\n        )}\n      </div>\n    `;\n  }\n}\n"]}

package/default-color-sets.style.js

@@ -1,15 +1,33 @@
 import { css } from 'lit';
+/**
+ * Default Color Sets component styles
+ * Using shared CSS variables from /src/shared/themes/
+ */
 const defaultColorSetsStyle = css `
   .default-color-sets-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
   }
+  
   .default-color-sets-container * {
-    margin: 3px;
+    margin: var(--nuraly-spacing-1, 0.25rem);
   }
-  .color-set-container{
-    border: var(--hybrid-colorpicker-border-color);
+  
+  .color-set-container {
+    cursor: pointer;
+    position: relative;
+    transition: all var(--nuraly-transition-base, 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);
+  }
+  
+  .color-set-container:active {
+    box-shadow: 0 0 0 2px var(--nuraly-color-focus-active, rgba(15, 98, 254, 0.8));
+    opacity: 1;
   }
 `;
 export const styles = defaultColorSetsStyle;

package/default-color-sets.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"default-color-sets.style.js","sourceRoot":"","sources":["../../../src/components/colorpicker/default-color-sets.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;CAYhC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,qBAAqB,CAAC","sourcesContent":["import {css} from 'lit';\n\nconst defaultColorSetsStyle = css`\n  .default-color-sets-container {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n  .default-color-sets-container * {\n    margin: 3px;\n  }\n  .color-set-container{\n    border: var(--hybrid-colorpicker-border-color);\n  }\n`;\n\nexport const styles = defaultColorSetsStyle;\n"]}
+{"version":3,"file":"default-color-sets.style.js","sourceRoot":"","sources":["../../../src/components/colorpicker/default-color-sets.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;GAGG;AACH,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BhC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,qBAAqB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Default Color Sets component styles\n * Using shared CSS variables from /src/shared/themes/\n */\nconst defaultColorSetsStyle = css`\n  .default-color-sets-container {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n  \n  .default-color-sets-container * {\n    margin: var(--nuraly-spacing-1, 0.25rem);\n  }\n  \n  .color-set-container {\n    cursor: pointer;\n    position: relative;\n    transition: all var(--nuraly-transition-base, 0.2s) ease-in-out;\n  }\n  \n  .color-set-container:hover {\n    box-shadow: 0 0 0 2px var(--nuraly-color-focus, rgba(15, 98, 254, 0.5));\n    opacity: var(--nuraly-opacity-hover, 0.9);\n  }\n  \n  .color-set-container:active {\n    box-shadow: 0 0 0 2px var(--nuraly-color-focus-active, rgba(15, 98, 254, 0.8));\n    opacity: 1;\n  }\n`;\n\nexport const styles = defaultColorSetsStyle;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/colorpicker",
-    "version": "0.0.4",
+    "version": "0.0.6",
     "description": "",
     "main": "index.js",
     "type": "module",
@@ -8,5 +8,19 @@
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "Labidi Aymen",
-    "license": "ISC"
+    "license": "ISC",
+    "exports": {
+        ".": {
+            "import": "./index.js"
+        },
+        "./bundle": {
+            "import": "./bundle.js"
+        }
+    },
+    "files": [
+        "bundle.js",
+        "*.js",
+        "*.d.ts",
+        "*.js.map"
+    ]
 }

package/react.js

@@ -2,7 +2,7 @@ import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
 import { ColorPicker } from './color-picker.component.js';
 export const HyColorPicker = createComponent({
-    tagName: 'hy-color-picker',
+    tagName: 'nr-color-picker',
     elementClass: ColorPicker,
     react: React,
     events: {

package/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/colorpicker/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,MAAM,CAAC,MAAM,aAAa,GAAG,eAAe,CAAC;IAC3C,OAAO,EAAE,iBAAiB;IAC1B,YAAY,EAAE,WAAW;IACzB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,WAAW,EAAE,cAAc;QAC3B,MAAM,EAAE,QAAQ;KACjB;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { ColorPicker } from './color-picker.component.js';\n\nexport const HyColorPicker = createComponent({\n  tagName: 'hy-color-picker',\n  elementClass: ColorPicker,\n  react: React,\n  events: {\n    colorChange: 'color-change',\n    change: 'change',\n  },\n});\n"]}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/colorpicker/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,MAAM,CAAC,MAAM,aAAa,GAAG,eAAe,CAAC;IAC3C,OAAO,EAAE,iBAAiB;IAC1B,YAAY,EAAE,WAAW;IACzB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,WAAW,EAAE,cAAc;QAC3B,MAAM,EAAE,QAAQ;KACjB;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { ColorPicker } from './color-picker.component.js';\n\nexport const HyColorPicker = createComponent({\n  tagName: 'nr-color-picker',\n  elementClass: ColorPicker,\n  react: React,\n  events: {\n    colorChange: 'color-change',\n    change: 'change',\n  },\n});\n"]}

package/color-holder.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"color-holder.component.d.ts","sourceRoot":"","sources":["../../../src/components/colorpicker/color-holder.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,OAAO,EAAC,eAAe,EAAC,MAAM,sBAAsB,CAAC;AAErD,qBACa,cAAe,SAAQ,UAAU;IAE5C,KAAK,SAAa;IAGlB,IAAI,EAAG,eAAe,CAAC;IAEvB,OAAgB,MAAM,0BAAU;IAEvB,MAAM;CAGhB"}

package/color-holder.style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"color-holder.style.d.ts","sourceRoot":"","sources":["../../../src/components/colorpicker/color-holder.style.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,MAAM,yBAAoB,CAAC"}

package/color-picker.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"color-picker.component.d.ts","sourceRoot":"","sources":["../../../src/components/colorpicker/color-picker.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAgB,MAAM,KAAK,CAAC;AAE9D,OAAO,6BAA6B,CAAC;AACrC,OAAO,mCAAmC,CAAC;AAE3C,OAAO,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAC;AAExD,qBACa,WAAY,SAAQ,UAAU;IAEzC,KAAK,SAAiB;IAGtB,IAAI,UAAS;IAGb,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAM;IAGrC,QAAQ,UAAS;IAGjB,IAAI,kBAA2B;IAG/B,YAAY,UAAK;IAEjB,OAAgB,MAAM,0BAAU;;IASvB,iBAAiB,IAAI,IAAI;IASzB,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;YAK3C,iBAAiB;IAK/B,OAAO,CAAC,cAAc,CAIpB;IACF,OAAO,CAAC,yBAAyB,CA4B/B;IAEF,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,iBAAiB;IAIhB,oBAAoB,IAAI,IAAI;IAK5B,MAAM;CAmBhB"}

package/color-picker.style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"color-picker.style.d.ts","sourceRoot":"","sources":["../../../src/components/colorpicker/color-picker.style.ts"],"names":[],"mappings":";AAEA,wBAwEE"}

package/color-picker.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"color-picker.types.d.ts","sourceRoot":"","sources":["../../../src/components/colorpicker/color-picker.types.ts"],"names":[],"mappings":"AAAA,0BAAkB,eAAe;IAC/B,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB"}

package/default-color-sets.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"default-color-sets.component.d.ts","sourceRoot":"","sources":["../../../src/components/colorpicker/default-color-sets.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,OAAO,6BAA6B,CAAC;AACrC,qBACa,gBAAiB,SAAQ,UAAU;IAE9C,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAM;IAErC,OAAgB,MAAM,0BAAU;IAEhC,gBAAgB,CAAC,KAAK,EAAE,MAAM;IAUrB,MAAM;CAchB"}

package/default-color-sets.style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"default-color-sets.style.d.ts","sourceRoot":"","sources":["../../../src/components/colorpicker/default-color-sets.style.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,MAAM,yBAAwB,CAAC"}

package/demo/color-picker-demo.d.ts

@@ -1,18 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google Laabidi Aymen
- * SPDX-License-Identifier: MIT
- */
-import { LitElement } from 'lit';
-import '../color-picker.component';
-import '../../../helpers/ThemeHandler';
-export declare class ColorDemoElement extends LitElement {
-    static styles: import("lit").CSSResult;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'hy-colorpicker-demo': ColorDemoElement;
-    }
-}
-//# sourceMappingURL=color-picker-demo.d.ts.map

package/demo/color-picker-demo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"color-picker-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/colorpicker/demo/color-picker-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,2BAA2B,CAAC;AACnC,OAAO,+BAA+B,CAAC;AAEvC,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAKpB;IAEO,MAAM;CAiIhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,gBAAgB,CAAC;KACzC;CACF"}

package/demo/color-picker-demo.js

@@ -1,157 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google 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);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, html, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import '../color-picker.component';
-import '../../../helpers/ThemeHandler';
-let ColorDemoElement = class ColorDemoElement extends LitElement {
-    render() {
-        return html `
-      <theme-handler>
-        <div style="display: flex;">
-          <!-- Left Section -->
-          <div>
-            <h3>Default</h3>
-            <hy-color-picker
-              @color-changed="${(e) => {
-            console.log(e.detail.value);
-        }}"
-            ></hy-color-picker>
-            <br />
-            <h3>With default color value</h3>
-            <hy-color-picker
-              .color="${'#E92222'}"
-              @color-changed="${(e) => {
-            console.log(e.detail.value);
-        }}"
-            ></hy-color-picker>
-            <br />
-            <h3>With default color value and color sets</h3>
-            <hy-color-picker
-              .color="${'#ECDA1E'}"
-              .defaultColorSets=${[
-            '#264653',
-            '#2a9d8f',
-            '#e9c46a',
-            '#f4a261',
-            '#e76f51',
-            '#e63946',
-            '#f1faee',
-            '#a8dadc',
-            '#457b9d',
-            '#1d3557',
-        ]}
-              @color-changed="${(e) => {
-            console.log(e.detail.value);
-        }}"
-            ></hy-color-picker>
-            <br />
-            <h3>Disabled color picker</h3>
-            <hy-color-picker
-              .disabled=${true}
-              .color="${'#67d640'}"
-              @color-changed="${(e) => {
-            console.log(e.detail.value);
-        }}"
-            ></hy-color-picker>
-
-            <br />
-            <h3>small color picker</h3>
-            <hy-color-picker
-              .color="${'#E92222'}"
-              .size="${'small'}"
-              @color-changed="${(e) => {
-            console.log(e.detail.value);
-        }}"
-            ></hy-color-picker>
-
-            <br />
-            <h3>large color picker</h3>
-            <hy-color-picker
-              .color="${'#ECDA1E'}"
-              .size="${'large'}"
-              @color-changed="${(e) => {
-            console.log(e.detail.value);
-        }}"
-            ></hy-color-picker>
-
-            <br />
-            <div style="margin-top:50%;">
-              <hy-color-picker
-                .color="${'#67d640'}"
-                @color-changed="${(e) => {
-            console.log(e.detail.value);
-        }}"
-              ></hy-color-picker>
-            </div>
-            <br />
-            <div style="margin-top:100%;">
-              <hy-color-picker
-                .color="${'#000000'}"
-                @color-changed="${(e) => {
-            console.log(e.detail.value);
-        }}"
-              ></hy-color-picker>
-            </div>
-          </div>
-
-          <!-- Right Section -->
-          <div id="right">
-            <h3>Right Demo Section</h3>
-            <hy-color-picker
-              .color="${'#3498db'}"
-              @color-changed="${(e) => {
-            console.log('Right side color changed:', e.detail.value);
-        }}"
-            ></hy-color-picker>
-            <br />
-            <h3>Another color picker</h3>
-            <hy-color-picker
-              id="right-block"
-              
-              .color="${'#9b59b6'}"
-              @color-changed="${(e) => {
-            console.log('Right side color changed:', e.detail.value);
-        }}"
-            ></hy-color-picker>
-            <br />
-            <h3>Custom color set on the right</h3>
-            <hy-color-picker
-              .color="${'#f39c12'}"
-              .defaultColorSets=${[
-            '#8e44ad',
-            '#e74c3c',
-            '#2ecc71',
-            '#f1c40f',
-            '#3498db',
-        ]}
-              @color-changed="${(e) => {
-            console.log('Right side color changed:', e.detail.value);
-        }}"
-            ></hy-color-picker>
-          </div>
-        </div>
-      </theme-handler>
-    `;
-    }
-};
-ColorDemoElement.styles = css `
-    #right-block {
-        right: 0;
-        position: fixed;
-    }
-  `;
-ColorDemoElement = __decorate([
-    customElement('hy-colorpicker-demo')
-], ColorDemoElement);
-export { ColorDemoElement };
-//# sourceMappingURL=color-picker-demo.js.map

package/demo/color-picker-demo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"color-picker-demo.js","sourceRoot":"","sources":["../../../../src/components/colorpicker/demo/color-picker-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,2BAA2B,CAAC;AACnC,OAAO,+BAA+B,CAAC;AAGvC,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAQrC,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;;gCAOiB,CAAC,CAAc,EAAE,EAAE;YAC7C,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;;;;;wBAKmB,SAAS;gCACD,CAAC,CAAc,EAAE,EAAE;YAC7C,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;;;;;wBAKmB,SAAS;kCACC;YAC5B,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;SACV;gCAC2B,CAAC,CAAc,EAAE,EAAE;YAC7C,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;;;;;0BAKqB,IAAI;wBACN,SAAS;gCACD,CAAC,CAAc,EAAE,EAAE;YAC7C,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;;;;;;wBAMmB,SAAS;uBACV,OAAO;gCACE,CAAC,CAAc,EAAE,EAAE;YAC7C,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;;;;;;wBAMmB,SAAS;uBACV,OAAO;gCACE,CAAC,CAAc,EAAE,EAAE;YAC7C,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;;;;;;0BAMqB,SAAS;kCACD,CAAC,CAAc,EAAE,EAAE;YAC/C,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;;;;;;0BAMqB,SAAS;kCACD,CAAC,CAAc,EAAE,EAAE;YAC/C,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;;;;;;;;;wBASmB,SAAS;gCACD,CAAC,CAAc,EAAE,EAAE;YAC7C,OAAO,CAAC,GAAG,CAAC,2BAA2B,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC3D,CAAC;;;;;;;wBAOmB,SAAS;gCACD,CAAC,CAAc,EAAE,EAAE;YAC7C,OAAO,CAAC,GAAG,CAAC,2BAA2B,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC3D,CAAC;;;;;wBAKmB,SAAS;kCACC;YAC5B,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;SACV;gCAC2B,CAAC,CAAc,EAAE,EAAE;YAC7C,OAAO,CAAC,GAAG,CAAC,2BAA2B,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC3D,CAAC;;;;;KAKA,CAAC;IACJ,CAAC;CACF,CAAA;AAxIiB,uBAAM,GAAG,GAAG,CAAA;;;;;GAK1B,CAAA;AANS,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CAyI5B;SAzIY,gBAAgB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport {LitElement, html, css} from 'lit';\nimport {customElement} from 'lit/decorators.js';\nimport '../color-picker.component';\nimport '../../../helpers/ThemeHandler';\n\n@customElement('hy-colorpicker-demo')\nexport class ColorDemoElement extends LitElement {\n  static override styles = css`\n    #right-block {\n        right: 0;\n        position: fixed;\n    }\n  `;\n\n  override render() {\n    return html`\n      <theme-handler>\n        <div style=\"display: flex;\">\n          <!-- Left Section -->\n          <div>\n            <h3>Default</h3>\n            <hy-color-picker\n              @color-changed=\"${(e: CustomEvent) => {\n      console.log(e.detail.value);\n    }}\"\n            ></hy-color-picker>\n            <br />\n            <h3>With default color value</h3>\n            <hy-color-picker\n              .color=\"${'#E92222'}\"\n              @color-changed=\"${(e: CustomEvent) => {\n      console.log(e.detail.value);\n    }}\"\n            ></hy-color-picker>\n            <br />\n            <h3>With default color value and color sets</h3>\n            <hy-color-picker\n              .color=\"${'#ECDA1E'}\"\n              .defaultColorSets=${[\n      '#264653',\n      '#2a9d8f',\n      '#e9c46a',\n      '#f4a261',\n      '#e76f51',\n      '#e63946',\n      '#f1faee',\n      '#a8dadc',\n      '#457b9d',\n      '#1d3557',\n    ]}\n              @color-changed=\"${(e: CustomEvent) => {\n      console.log(e.detail.value);\n    }}\"\n            ></hy-color-picker>\n            <br />\n            <h3>Disabled color picker</h3>\n            <hy-color-picker\n              .disabled=${true}\n              .color=\"${'#67d640'}\"\n              @color-changed=\"${(e: CustomEvent) => {\n      console.log(e.detail.value);\n    }}\"\n            ></hy-color-picker>\n\n            <br />\n            <h3>small color picker</h3>\n            <hy-color-picker\n              .color=\"${'#E92222'}\"\n              .size=\"${'small'}\"\n              @color-changed=\"${(e: CustomEvent) => {\n      console.log(e.detail.value);\n    }}\"\n            ></hy-color-picker>\n\n            <br />\n            <h3>large color picker</h3>\n            <hy-color-picker\n              .color=\"${'#ECDA1E'}\"\n              .size=\"${'large'}\"\n              @color-changed=\"${(e: CustomEvent) => {\n      console.log(e.detail.value);\n    }}\"\n            ></hy-color-picker>\n\n            <br />\n            <div style=\"margin-top:50%;\">\n              <hy-color-picker\n                .color=\"${'#67d640'}\"\n                @color-changed=\"${(e: CustomEvent) => {\n      console.log(e.detail.value);\n    }}\"\n              ></hy-color-picker>\n            </div>\n            <br />\n            <div style=\"margin-top:100%;\">\n              <hy-color-picker\n                .color=\"${'#000000'}\"\n                @color-changed=\"${(e: CustomEvent) => {\n      console.log(e.detail.value);\n    }}\"\n              ></hy-color-picker>\n            </div>\n          </div>\n\n          <!-- Right Section -->\n          <div id=\"right\">\n            <h3>Right Demo Section</h3>\n            <hy-color-picker\n              .color=\"${'#3498db'}\"\n              @color-changed=\"${(e: CustomEvent) => {\n      console.log('Right side color changed:', e.detail.value);\n    }}\"\n            ></hy-color-picker>\n            <br />\n            <h3>Another color picker</h3>\n            <hy-color-picker\n              id=\"right-block\"\n              \n              .color=\"${'#9b59b6'}\"\n              @color-changed=\"${(e: CustomEvent) => {\n      console.log('Right side color changed:', e.detail.value);\n    }}\"\n            ></hy-color-picker>\n            <br />\n            <h3>Custom color set on the right</h3>\n            <hy-color-picker\n              .color=\"${'#f39c12'}\"\n              .defaultColorSets=${[\n      '#8e44ad',\n      '#e74c3c',\n      '#2ecc71',\n      '#f1c40f',\n      '#3498db',\n    ]}\n              @color-changed=\"${(e: CustomEvent) => {\n      console.log('Right side color changed:', e.detail.value);\n    }}\"\n            ></hy-color-picker>\n          </div>\n        </div>\n      </theme-handler>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hy-colorpicker-demo': ColorDemoElement;\n  }\n}"]}

package/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/colorpicker/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC"}

package/react.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/colorpicker/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,eAAO,MAAM,aAAa;;;EAQxB,CAAC"}