@nuralyui/colorpicker 0.0.3

package/color-holder.component.d.ts

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+import { ColorPickerSize } from './color-picker.types';
+export declare class ColerHolderBox extends LitElement {
+    color: string;
+    size: ColorPickerSize;
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=color-holder.component.d.ts.map

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

@@ -0,0 +1 @@
+{"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.component.js

@@ -0,0 +1,30 @@
+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 { customElement, property } from 'lit/decorators.js';
+import { styles } from './color-holder.style.js';
+let ColerHolderBox = class ColerHolderBox extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.color = '#FFFFFF';
+    }
+    render() {
+        return html ` <div class="color-holder-container" style="background-color: ${this.color}"></div> `;
+    }
+};
+ColerHolderBox.styles = styles;
+__decorate([
+    property({ type: String })
+], ColerHolderBox.prototype, "color", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], ColerHolderBox.prototype, "size", void 0);
+ColerHolderBox = __decorate([
+    customElement('hy-colorholder-box')
+], ColerHolderBox);
+export { ColerHolderBox };
+//# sourceMappingURL=color-holder.component.js.map

package/color-holder.component.js.map

@@ -0,0 +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"]}

package/color-holder.style.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=color-holder.style.d.ts.map

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

@@ -0,0 +1 @@
+{"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-holder.style.js

@@ -0,0 +1,21 @@
+import { css } from 'lit';
+const colorHolderStyles = css `
+  :host {
+    cursor: pointer;
+  }
+
+  .color-holder-container {
+    width: var(--hybrid-colorpicker-default-width);
+    height: var(--hybrid-colorpicker-default-height);
+  }
+  :host([size='small']) .color-holder-container {
+    width: var(--hybrid-colorpicker-small-width);
+    height: var(--hybrid-colorpicker-small-height);
+  }
+  :host([size='large']) .color-holder-container {
+    width: var(--hybrid-colorpicker-large-width);
+    height: var(--hybrid-colorpicker-large-height);
+  }
+`;
+export const styles = colorHolderStyles;
+//# sourceMappingURL=color-holder.style.js.map

package/color-holder.style.js.map

@@ -0,0 +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"]}

package/color-picker.component.d.ts

@@ -0,0 +1,26 @@
+import { LitElement, PropertyValues } from 'lit';
+import './color-holder.component.js';
+import './default-color-sets.component.js';
+import { ColorPickerSize } from './color-picker.types.js';
+export declare class ColorPicker extends LitElement {
+    color: string;
+    show: boolean;
+    defaultColorSets: Array<string>;
+    disabled: boolean;
+    size: ColorPickerSize;
+    isValidColor: boolean;
+    static styles: import("lit").CSSResult;
+    constructor();
+    connectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    private toggleColorHolder;
+    private onClickOutside;
+    private calculateDropDownPosition;
+    private handleColorChanged;
+    private onInputChange;
+    private dispatchColorChange;
+    private checkIsValidColor;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=color-picker.component.d.ts.map

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

@@ -0,0 +1 @@
+{"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.component.js

@@ -0,0 +1,157 @@
+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;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import './color-holder.component.js';
+import './default-color-sets.component.js';
+import styles from './color-picker.style.js';
+let ColorPicker = class ColorPicker extends LitElement {
+    constructor() {
+        super();
+        this.color = 'transparent';
+        this.show = false;
+        this.defaultColorSets = [];
+        this.disabled = false;
+        this.size = "default" /* ColorPickerSize.Default */;
+        this.isValidColor = true;
+        this.onClickOutside = (onClickEvent) => {
+            const outsideClick = !onClickEvent.composedPath().includes(this);
+            if (outsideClick)
+                this.show = false;
+        };
+        this.calculateDropDownPosition = () => {
+            var _a, _b;
+            const dropdownContainer = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-container');
+            const colorHolder = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.color-holder');
+            if (dropdownContainer && colorHolder) {
+                const dropdownRect = dropdownContainer.getBoundingClientRect();
+                const colorHolderRect = colorHolder.getBoundingClientRect();
+                const viewportHeight = window.innerHeight;
+                const viewportWidth = window.innerWidth;
+                // Check if the dropdown is going out of the viewport vertically
+                if (colorHolderRect.bottom + dropdownRect.height > viewportHeight) {
+                    // Move the dropdown upwards if it goes out of the viewport
+                    dropdownContainer.style.top = `${colorHolderRect.top - dropdownRect.height}px`;
+                }
+                else {
+                    // Otherwise, position it below the color holder
+                    dropdownContainer.style.top = `${colorHolderRect.bottom}px`;
+                }
+                // Check if the dropdown is going out of the viewport horizontally
+                if (colorHolderRect.right + dropdownRect.width > viewportWidth) {
+                    // Move the dropdown to the left if it goes out of the viewport
+                    dropdownContainer.style.left = `${viewportWidth - dropdownRect.width}px`;
+                }
+                else {
+                    // Otherwise, position it to the right of the color holder
+                    dropdownContainer.style.left = `${colorHolderRect.left}px`;
+                }
+            }
+        };
+        if (typeof window !== 'undefined') {
+            import('vanilla-colorful');
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Mark the scroll listener as passive:
+        document.addEventListener('scroll', this.calculateDropDownPosition, {
+            passive: true,
+        });
+        document.addEventListener('click', this.onClickOutside);
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('color')) {
+            this.checkIsValidColor();
+        }
+    }
+    toggleColorHolder() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.show = !this.show;
+            yield this.updateComplete;
+            this.calculateDropDownPosition();
+        });
+    }
+    handleColorChanged(colorChangedEvent) {
+        if (this.color != colorChangedEvent.detail.value) {
+            this.color = colorChangedEvent.detail.value;
+            this.dispatchColorChange();
+        }
+    }
+    onInputChange(inputChangedEvent) {
+        if (this.color != inputChangedEvent.detail.value) {
+            this.color = inputChangedEvent.detail.value;
+            this.dispatchColorChange();
+        }
+    }
+    dispatchColorChange() {
+        this.dispatchEvent(new CustomEvent('color-changed', {
+            detail: {
+                value: this.color,
+            },
+        }));
+    }
+    checkIsValidColor() {
+        this.isValidColor = CSS.supports('color', this.color);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.onClickOutside);
+        document.removeEventListener('scroll', this.calculateDropDownPosition);
+    }
+    render() {
+        return html `<div class="color-picker-container">
+      <hy-colorholder-box
+        class="color-holder"
+        color="${this.color}"
+        .size=${this.size}
+        @click=${!this.disabled ? this.toggleColorHolder : nothing}
+      ></hy-colorholder-box>
+      <div class='dropdown-container'>
+        <hy-default-color-sets .defaultColorSets=${this.defaultColorSets} @color-click="${this.handleColorChanged}">
+        </hy-default-color-sets>
+        <hex-color-picker
+          color="${this.color}"
+          @color-changed="${(colorChangedEvent) => this.handleColorChanged(colorChangedEvent)}"
+        ></hex-color-picker>
+        <hy-input type="text" .value="${this.color}" @valueChange="${this.onInputChange}" withCopy=${true} .state=${!this.isValidColor ? 'error' : nothing}> </hy-input>
+      </div>
+    </div> `;
+    }
+};
+ColorPicker.styles = styles;
+__decorate([
+    property({ type: String })
+], ColorPicker.prototype, "color", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ColorPicker.prototype, "show", void 0);
+__decorate([
+    property({ type: Array })
+], ColorPicker.prototype, "defaultColorSets", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ColorPicker.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], ColorPicker.prototype, "size", void 0);
+__decorate([
+    state()
+], ColorPicker.prototype, "isValidColor", void 0);
+ColorPicker = __decorate([
+    customElement('hy-color-picker')
+], ColorPicker);
+export { ColorPicker };
+//# sourceMappingURL=color-picker.component.js.map

package/color-picker.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.component.js","sourceRoot":"","sources":["../../../src/components/colorpicker/color-picker.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {LitElement, PropertyValues, html, nothing} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport './color-holder.component.js';\nimport './default-color-sets.component.js';\nimport styles from './color-picker.style.js';\nimport {ColorPickerSize} from './color-picker.types.js';\n\n@customElement('hy-color-picker')\nexport class ColorPicker extends LitElement {\n  @property({type: String})\n  color = 'transparent';\n\n  @property({type: Boolean, reflect: true})\n  show = false;\n\n  @property({type: Array})\n  defaultColorSets: Array<string> = [];\n\n  @property({type: Boolean, reflect: true})\n  disabled = false;\n\n  @property({type: String, reflect: true})\n  size = ColorPickerSize.Default;\n\n  @state()\n  isValidColor=true\n\n  static override styles = styles;\n\n  constructor() {\n    super();\n    if (typeof window !== 'undefined') {\n      import('vanilla-colorful');\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Mark the scroll listener as passive:\n    document.addEventListener('scroll', this.calculateDropDownPosition, {\n      passive: true,\n    });\n    document.addEventListener('click', this.onClickOutside);\n  }\n\n  override updated(changedProperties: PropertyValues): void {\n    if (changedProperties.has('color')) {\n      this.checkIsValidColor()\n    }\n  }\n  private async toggleColorHolder() {\n    this.show = !this.show;\n    await this.updateComplete;\n    this.calculateDropDownPosition();\n  }\n  private onClickOutside = (onClickEvent: Event) => {\n    const outsideClick =  !onClickEvent.composedPath().includes(this)\n      if(outsideClick)\n        this.show =false\n  };\n  private calculateDropDownPosition = () => {\n    const dropdownContainer = this.shadowRoot?.querySelector('.dropdown-container') as HTMLElement;\n    const colorHolder = this.shadowRoot?.querySelector('.color-holder')  as HTMLElement;\n\n    if (dropdownContainer && colorHolder) {\n      const dropdownRect = dropdownContainer.getBoundingClientRect();\n      const colorHolderRect = colorHolder.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n      const viewportWidth = window.innerWidth;\n\n      // Check if the dropdown is going out of the viewport vertically\n      if (colorHolderRect.bottom + dropdownRect.height > viewportHeight) {\n        // Move the dropdown upwards if it goes out of the viewport\n        dropdownContainer.style.top = `${colorHolderRect.top - dropdownRect.height}px`;\n      } else {\n        // Otherwise, position it below the color holder\n        dropdownContainer.style.top = `${colorHolderRect.bottom}px`;\n      }\n\n      // Check if the dropdown is going out of the viewport horizontally\n      if (colorHolderRect.right + dropdownRect.width > viewportWidth) {\n        // Move the dropdown to the left if it goes out of the viewport\n        dropdownContainer.style.left = `${viewportWidth - dropdownRect.width}px`;\n      } else {\n        // Otherwise, position it to the right of the color holder\n        dropdownContainer.style.left = `${colorHolderRect.left}px`;\n      }\n    }\n  };\n\n  private handleColorChanged(colorChangedEvent: CustomEvent) {\n    if(this.color !=colorChangedEvent.detail.value){\n      this.color = colorChangedEvent.detail.value;\n      this.dispatchColorChange()\n    }\n  }\n\n  private onInputChange(inputChangedEvent: CustomEvent) {\n    if(this.color != inputChangedEvent.detail.value){\n      this.color = inputChangedEvent.detail.value;\n      this.dispatchColorChange()\n    }\n  }\n  private dispatchColorChange(){\n    this.dispatchEvent(\n      new CustomEvent('color-changed', {\n        detail: {\n          value: this.color,\n        },\n      })\n    );\n\n  }\n\n  private checkIsValidColor(){\n    this.isValidColor = CSS.supports('color',this.color)\n  }\n\n  override disconnectedCallback(): void {\n    document.removeEventListener('click', this.onClickOutside);\n    document.removeEventListener('scroll', this.calculateDropDownPosition);\n  }\n\n  override render() {\n    return html`<div class=\"color-picker-container\">\n      <hy-colorholder-box\n        class=\"color-holder\"\n        color=\"${this.color}\"\n        .size=${this.size}\n        @click=${!this.disabled ? this.toggleColorHolder : nothing}\n      ></hy-colorholder-box>\n      <div class='dropdown-container'>\n        <hy-default-color-sets .defaultColorSets=${this.defaultColorSets} @color-click=\"${this.handleColorChanged}\">\n        </hy-default-color-sets>\n        <hex-color-picker\n          color=\"${this.color}\"\n          @color-changed=\"${(colorChangedEvent: CustomEvent) => this.handleColorChanged(colorChangedEvent)}\"\n        ></hex-color-picker>\n        <hy-input type=\"text\" .value=\"${this.color}\" @valueChange=\"${this.onInputChange}\" withCopy=${true} .state=${!this.isValidColor?'error':nothing}> </hy-input>\n      </div>\n    </div> `;\n  }\n}\n"]}

package/color-picker.style.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=color-picker.style.d.ts.map

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

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

package/color-picker.style.js

@@ -0,0 +1,75 @@
+import { css } from 'lit';
+export default css `
+  .color-picker-container {
+    display: inline-flex;
+    flex-direction: column;
+  }
+  hex-color-picker {
+    width: 100%;
+  }
+  .dropdown-container {
+    display: none;
+  }
+  hex-color-picker::part(saturation) {
+    border-radius: 0px;
+  }
+  hex-color-picker::part(hue) {
+    border-radius: 0px;
+  }
+  hex-color-picker::part(saturation-pointer),
+  hex-color-picker::part(hue-pointer) {
+    cursor: pointer;
+  }
+  .color-holder {
+    cursor: pointer;
+  }
+  :host([disabled]) .color-holder {
+    opacity: var(--hybrid-colorpicker-disabled-opacity);
+    cursor: not-allowed;
+  }
+  :host(:not([disabled])) .color-holder {
+    border: var(--hybrid-colorpicker-border-color);
+  }
+  :host(:not([disabled])) .color-holder:hover {
+    opacity: var(--hybrid-colorpicker-hover-opacity);
+  }
+  :host(:not([disabled])) .color-holder:active {
+    border:var(--hybrid-colorpicker-active-border)
+  }
+  
+
+  :host([show]) .dropdown-container{
+    display: block;
+    position: fixed;
+    width: 180px;
+    z-index: 1;
+    padding: 5px;
+    background-color: var(--hybrid-colorpicker-background-color);
+    box-shadow: 1px -1px 5px 1px rgba(0, 0, 0, 0.14);
+    -webkit-box-shadow: 1px -1px 5px 1px rgba(0, 0, 0, 0.14);
+    -moz-box-shadow: 1px -1px 5px 1px rgba(0, 0, 0, 0.14);
+  }
+
+  :host {
+    --hybrid-colorpicker-background-color: #f4f4f4;
+    --hybrid-colorpicker-border-color: 1px solid gray;
+    --hybrid-colorpicker-active-border: 1px solid #0f62fe;
+    --hybrid-colorpicker-disabled-opacity: 0.5;
+    --hybrid-colorpicker-hover-opacity: 0.8;
+    --hybrid-colorpicker-default-width: 30px;
+    --hybrid-colorpicker-default-height: 25px;
+    --hybrid-colorpicker-small-width: 20px;
+    --hybrid-colorpicker-small-height: 15px;
+    --hybrid-colorpicker-large-width: 35px;
+    --hybrid-colorpicker-large-height: 30px;
+  }
+ 
+  @media (prefers-color-scheme: dark) {
+    :host { 
+      --hybrid-colorpicker-background-color: #393939;
+      --hybrid-colorpicker-border-color: 1px solid #f4f4f4;
+      --hybrid-colorpicker-disabled-opacity: 0.2;
+    }
+  }
+`;
+//# sourceMappingURL=color-picker.style.js.map

package/color-picker.style.js.map

@@ -0,0 +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"]}

package/color-picker.types.d.ts

@@ -0,0 +1,6 @@
+export declare const enum ColorPickerSize {
+    Default = "default",
+    Small = "small",
+    Large = "large"
+}
+//# sourceMappingURL=color-picker.types.d.ts.map

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

@@ -0,0 +1 @@
+{"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/color-picker.types.js

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

package/color-picker.types.js.map

@@ -0,0 +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"]}

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

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+import './color-holder.component.js';
+export declare class DefaultColorSets extends LitElement {
+    defaultColorSets: Array<string>;
+    static styles: import("lit").CSSResult;
+    handleColorClick(color: string): void;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=default-color-sets.component.d.ts.map

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

@@ -0,0 +1 @@
+{"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.component.js

@@ -0,0 +1,43 @@
+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 { customElement, property } from 'lit/decorators.js';
+import { styles } from './default-color-sets.style.js';
+import './color-holder.component.js';
+let DefaultColorSets = class DefaultColorSets extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.defaultColorSets = [];
+    }
+    handleColorClick(color) {
+        this.dispatchEvent(new CustomEvent('color-click', {
+            detail: {
+                value: color,
+            },
+        }));
+    }
+    render() {
+        return html `
+      <div class="default-color-sets-container">
+        ${this.defaultColorSets.map((color) => html `<hy-colorholder-box
+              @click=${() => this.handleColorClick(color)}
+              color="${color}"
+              class='color-set-container'
+            ></hy-colorholder-box>`)}
+      </div>
+    `;
+    }
+};
+DefaultColorSets.styles = styles;
+__decorate([
+    property({ type: Array })
+], DefaultColorSets.prototype, "defaultColorSets", void 0);
+DefaultColorSets = __decorate([
+    customElement('hy-default-color-sets')
+], DefaultColorSets);
+export { DefaultColorSets };
+//# sourceMappingURL=default-color-sets.component.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=default-color-sets.style.d.ts.map

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

@@ -0,0 +1 @@
+{"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/default-color-sets.style.js

@@ -0,0 +1,16 @@
+import { css } from 'lit';
+const defaultColorSetsStyle = css `
+  .default-color-sets-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  .default-color-sets-container * {
+    margin: 3px;
+  }
+  .color-set-container{
+    border: var(--hybrid-colorpicker-border-color);
+  }
+`;
+export const styles = defaultColorSetsStyle;
+//# sourceMappingURL=default-color-sets.style.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,18 @@
+/**
+ * @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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,157 @@
+/**
+ * @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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,3 @@
+export * from './color-picker.component.js';
+export * from './color-holder.component.js';
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

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

package/index.js

@@ -0,0 +1,3 @@
+export * from './color-picker.component.js';
+export * from './color-holder.component.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/colorpicker/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './color-picker.component.js';\nexport * from './color-holder.component.js';"]}

package/package.json

@@ -0,0 +1,12 @@
+{
+    "name": "@nuralyui/colorpicker",
+    "version": "0.0.3",
+    "description": "",
+    "main": "index.js",
+    "type": "module",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "Labidi Aymen",
+    "license": "ISC"
+}

package/react.d.ts

@@ -0,0 +1,6 @@
+import { ColorPicker } from './color-picker.component.js';
+export declare const HyColorPicker: import("@lit-labs/react").ReactWebComponent<ColorPicker, {
+    colorChange: string;
+    change: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

package/react.d.ts.map

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

package/react.js

@@ -0,0 +1,13 @@
+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',
+    elementClass: ColorPicker,
+    react: React,
+    events: {
+        colorChange: 'color-change',
+        change: 'change',
+    },
+});
+//# sourceMappingURL=react.js.map

package/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/colorpicker/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,WAAW,EAAC,MAAM,6BAA6B,CAAC;AAExD,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"]}