@nuralyui/colorpicker 0.0.8 → 0.0.10

package/bundle.js

@@ -1,18 +1,246 @@
-import{css as t,LitElement as e,html as o,nothing as i}from"lit";import{property as r,customElement as s,state as n}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{NuralyUIBaseMixin as a}from"@nuralyui/common/mixins";import{styleMap as h}from"lit/directives/style-map.js";import{map as c}from"lit/directives/map.js";const d=t`:host{display:inline-block;cursor:pointer}:host([size=small]) .color-holder-container{width:var(--nuraly-size-colorpicker-small,20px);height:var(--nuraly-size-colorpicker-small-height,15px)}:host([size=large]) .color-holder-container{width:var(--nuraly-size-colorpicker-large,35px);height:var(--nuraly-size-colorpicker-large-height,30px)}.color-holder-container--disabled{opacity:var(--nuraly-opacity-disabled,.5);cursor:not-allowed}:host(:hover:not([disabled])) .color-holder-container{border-color:var(--nuraly-color-border-hover,rgba(0,0,0,.4))}`;
+import{css as t,LitElement as e,html as o,nothing as r}from"lit";import{property as i,customElement as s,state as n}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{NuralyUIBaseMixin as a}from"@nuralyui/common/mixins";import{styleMap as h}from"lit/directives/style-map.js";import{map as c}from"lit/directives/map.js";const d=t`
+  :host {
+    display: inline-block;
+    cursor: pointer;
+    
+    /* Ensure clean state transitions */
+    * {
+      transition: all var(--nuraly-transition-fast, 0.15s) ease;
+    }
+  }
+
+  .color-holder-container {
+    width: var(--nuraly-size-colorpicker-default, 30px);
+    height: var(--nuraly-size-colorpicker-default-height, 25px);
+    border: 1px solid var(--nuraly-color-border, rgba(0, 0, 0, 0.2));
+    box-sizing: border-box;
+    border-radius: var(--nuraly-border-radius-small, 2px);
+  }
+  
+  :host([size='small']) .color-holder-container {
+    width: var(--nuraly-size-colorpicker-small, 20px);
+    height: var(--nuraly-size-colorpicker-small-height, 15px);
+  }
+  
+  :host([size='large']) .color-holder-container {
+    width: var(--nuraly-size-colorpicker-large, 35px);
+    height: var(--nuraly-size-colorpicker-large-height, 30px);
+  }
+  
+  .color-holder-container--disabled {
+    opacity: var(--nuraly-opacity-disabled, 0.5);
+    cursor: not-allowed;
+  }
+  
+  :host(:hover:not([disabled])) .color-holder-container {
+    border-color: var(--nuraly-color-border-hover, rgba(0, 0, 0, 0.4));
+  }
+`;
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-var u=function(t,e,o,i){for(var r,s=arguments.length,n=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i,l=t.length-1;l>=0;l--)(r=t[l])&&(n=(s<3?r(n):s>3?r(e,o,n):r(e,o))||n);return s>3&&n&&Object.defineProperty(e,o,n),n};let p=class extends e{constructor(){super(...arguments),this.color="#3498db",this.size="default",this.disabled=!1,this.showTransparencyGrid=!0,this.borderWidth=2,this.showBorder=!0}isValidColor(){try{return CSS.supports("color",this.color)}catch(t){return!1}}isTransparent(){return"transparent"===this.color||this.color.toLowerCase().includes("rgba")||this.color.toLowerCase().includes("hsla")}render(){const t={"color-holder-container":!0,"color-holder-container--disabled":this.disabled,"color-holder-container--invalid":!this.isValidColor(),"color-holder-container--transparent":this.isTransparent()&&this.showTransparencyGrid,[`color-holder-container--${this.size}`]:!0},e={backgroundColor:this.isValidColor()?this.color:"#ffffff",borderWidth:this.showBorder?`${this.borderWidth}px`:"0"};return o`<div class="${l(t)}" style="${h(e)}" role="img" aria-label="Color swatch: ${this.color}" title="${this.color}"></div>`}};p.styles=d,u([r({type:String})],p.prototype,"color",void 0),u([r({type:String,reflect:!0})],p.prototype,"size",void 0),u([r({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),u([r({type:Boolean,attribute:"show-transparency-grid"})],p.prototype,"showTransparencyGrid",void 0),u([r({type:Number,attribute:"border-width"})],p.prototype,"borderWidth",void 0),u([r({type:Boolean,attribute:"show-border"})],p.prototype,"showBorder",void 0),p=u([s("nr-colorholder-box")],p);const b=t`.default-color-sets-container{display:flex;flex-wrap:wrap;justify-content:center}.default-color-sets-container *{margin:var(--nuraly-spacing-1,.25rem)}.color-set-container{cursor:pointer;position:relative;transition:all var(--nuraly-transition-base,.2s) ease-in-out}.color-set-container:hover{box-shadow:0 0 0 2px var(--nuraly-color-focus,rgba(15,98,254,.5));opacity:var(--nuraly-opacity-hover,.9)}.color-set-container:active{box-shadow:0 0 0 2px var(--nuraly-color-focus-active,rgba(15,98,254,.8));opacity:1}`;
+var u=function(t,e,o,r){for(var i,s=arguments.length,n=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(s<3?i(n):s>3?i(e,o,n):i(e,o))||n);return s>3&&n&&Object.defineProperty(e,o,n),n};let p=class extends e{constructor(){super(...arguments),this.color="#3498db",this.size="default",this.disabled=!1,this.showTransparencyGrid=!0,this.borderWidth=2,this.showBorder=!0}isValidColor(){try{return CSS.supports("color",this.color)}catch(t){return!1}}isTransparent(){return"transparent"===this.color||this.color.toLowerCase().includes("rgba")||this.color.toLowerCase().includes("hsla")}render(){const t={"color-holder-container":!0,"color-holder-container--disabled":this.disabled,"color-holder-container--invalid":!this.isValidColor(),"color-holder-container--transparent":this.isTransparent()&&this.showTransparencyGrid,[`color-holder-container--${this.size}`]:!0},e={backgroundColor:this.isValidColor()?this.color:"#ffffff",borderWidth:this.showBorder?`${this.borderWidth}px`:"0"};return o`
+      <div 
+        class="${l(t)}" 
+        style="${h(e)}"
+        role="img"
+        aria-label="Color swatch: ${this.color}"
+        title="${this.color}"
+      ></div>
+    `}};p.styles=d,u([i({type:String})],p.prototype,"color",void 0),u([i({type:String,reflect:!0})],p.prototype,"size",void 0),u([i({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),u([i({type:Boolean,attribute:"show-transparency-grid"})],p.prototype,"showTransparencyGrid",void 0),u([i({type:Number,attribute:"border-width"})],p.prototype,"borderWidth",void 0),u([i({type:Boolean,attribute:"show-border"})],p.prototype,"showBorder",void 0),p=u([s("nr-colorholder-box")],p);const b=t`
+  .default-color-sets-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  
+  .default-color-sets-container * {
+    margin: var(--nuraly-spacing-1, 0.25rem);
+  }
+  
+  .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;
+  }
+`;
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-var v=function(t,e,o,i){for(var r,s=arguments.length,n=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i,l=t.length-1;l>=0;l--)(r=t[l])&&(n=(s<3?r(n):s>3?r(e,o,n):r(e,o))||n);return s>3&&n&&Object.defineProperty(e,o,n),n};let f=class extends e{constructor(){super(...arguments),this.defaultColorSets=[],this.size="default",this.columns=8}handleColorClick(t,e){if(e.stopPropagation(),!this.isValidColor(t))return void console.warn(`Invalid color: ${t}`);const o={value:t};this.dispatchEvent(new CustomEvent("color-click",{bubbles:!0,composed:!0,detail:o}))}isValidColor(t){try{return CSS.supports("color",t)}catch(t){return!1}}render(){return this.defaultColorSets&&0!==this.defaultColorSets.length?o`<div class="default-color-sets-container" role="list" aria-label="Preset color swatches" style="--columns:${this.columns}">${c(this.defaultColorSets,(t=>o`<nr-colorholder-box color="${t}" .size="${this.size}" class="color-set-container" role="listitem" tabindex="0" aria-label="Color ${t}" @click="${e=>this.handleColorClick(t,e)}" @keydown="${e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleColorClick(t,e))}}"></nr-colorholder-box>`))}</div>`:i}};f.styles=b,v([r({type:Array,attribute:"default-color-sets"})],f.prototype,"defaultColorSets",void 0),v([r({type:String,reflect:!0})],f.prototype,"size",void 0),v([r({type:Number,attribute:"columns"})],f.prototype,"columns",void 0),f=v([s("nr-default-color-sets")],f);var m=t`:host{display:inline-block;vertical-align:middle;color:var(--nuraly-color-text);background-color:var(--nuraly-color-background)}.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:0}hex-color-picker::part(hue){border-radius:0}hex-color-picker::part(hue-pointer),hex-color-picker::part(saturation-pointer){cursor:pointer}.color-holder{cursor:pointer}:host([disabled]) .color-holder{opacity:var(--nuraly-opacity-disabled,.5);cursor:not-allowed}:host([show]) .dropdown-container{display:block;position:fixed;width:180px;z-index:var(--nuraly-z-index-dropdown,1000);padding:var(--nuraly-spacing-2,.5rem);background-color:var(--nuraly-color-surface,#fff);border:1px solid var(--nuraly-color-border,rgba(0,0,0,.1));border-radius:var(--nuraly-border-radius-medium,4px);box-shadow:var(--nuraly-shadow-dropdown,0 2px 8px rgba(0,0,0,.15));opacity:0;visibility:hidden;transition:opacity var(--nuraly-transition-fast,.15s) ease-in-out,visibility var(--nuraly-transition-fast,.15s) ease-in-out}:host([show]) .dropdown-container.positioned{opacity:1;visibility:visible}`;class y{constructor(t){this.host=t,t.addController(this)}hostConnected(){}hostDisconnected(){}hostUpdated(){}dispatchEvent(t){this.host.dispatchEvent(t)}requestUpdate(){this.host.requestUpdate()}handleError(t,e){console.error(`[ColorPicker ${e}]:`,t)}findElement(t){var e;return(null===(e=this.host.shadowRoot)||void 0===e?void 0:e.querySelector(t))||null}}class x extends y{constructor(){super(...arguments),this._isOpen=!1,this._position={top:0,left:0,width:0,placement:"bottom"},this._dropdownElement=null,this._triggerElement=null,this._scrollHandler=null,this._resizeHandler=null}get isOpen(){return this._isOpen}get position(){return Object.assign({},this._position)}hostConnected(){this.setupScrollAndResizeListeners()}hostDisconnected(){this.cleanup()}open(){try{this._isOpen||this.host.disabled||(this._isOpen=!0,this.host.show=!0,this.requestUpdate(),requestAnimationFrame((()=>{this.findElements(),this._dropdownElement&&this._dropdownElement.classList.remove("positioned"),requestAnimationFrame((()=>{this.calculatePosition(),this._dropdownElement&&this._dropdownElement.classList.add("positioned")}))})),this.host&&"function"==typeof this.host.setupEventListeners&&setTimeout((()=>{var t,e;null===(e=(t=this.host).setupEventListeners)||void 0===e||e.call(t)}),50),this.dispatchEvent(new CustomEvent("nr-colorpicker-open",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"open")}}close(){var t,e;try{this._isOpen&&(this._isOpen=!1,this.host.show=!1,this.resetPosition(),this.requestUpdate(),this.host&&"function"==typeof this.host.removeEventListeners&&(null===(e=(t=this.host).removeEventListeners)||void 0===e||e.call(t)),this.dispatchEvent(new CustomEvent("nr-colorpicker-close",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"close")}}toggle(){this._isOpen?this.close():this.open()}findElements(){this._dropdownElement=this.findElement(".dropdown-container"),this._triggerElement=this.findElement(".color-holder")}calculatePosition(){var t,e;try{if(this._dropdownElement&&this._triggerElement||this.findElements(),!this._dropdownElement||!this._triggerElement)return;const o=this._triggerElement.getBoundingClientRect(),i=this._dropdownElement.getBoundingClientRect(),r=(null===(t=window.visualViewport)||void 0===t?void 0:t.height)||window.innerHeight,s=(null===(e=window.visualViewport)||void 0===e?void 0:e.width)||window.innerWidth,n=r-o.bottom,l=o.top,a=s-o.left;let h,c,d="bottom";n>=i.height||n>l?(h=o.bottom,d="bottom"):(h=o.top-i.height,d="top"),c=a>=i.width?o.left:Math.max(0,s-i.width),this._position={top:h,left:c,width:Math.max(o.width,i.width),placement:d},this.applyPosition()}catch(t){this.handleError(t,"calculatePosition")}}applyPosition(){try{if(!this._dropdownElement)return;this._dropdownElement.style.position="fixed",this._dropdownElement.style.top=`${this._position.top}px`,this._dropdownElement.style.left=`${this._position.left}px`,this._dropdownElement.style.zIndex="9999",this._dropdownElement.classList.remove("placement-top","placement-bottom"),this._dropdownElement.classList.add(`placement-${this._position.placement}`),this._dropdownElement.classList.add("positioned")}catch(t){this.handleError(t,"applyPosition")}}resetPosition(){try{this._dropdownElement&&(this._dropdownElement.style.removeProperty("position"),this._dropdownElement.style.removeProperty("top"),this._dropdownElement.style.removeProperty("left"),this._dropdownElement.style.removeProperty("z-index"),this._dropdownElement.classList.remove("placement-top","placement-bottom","positioned"))}catch(t){this.handleError(t,"resetPosition")}}setupScrollAndResizeListeners(){this._scrollHandler=()=>{this._isOpen&&this.calculatePosition()},this._resizeHandler=()=>{this._isOpen&&this.calculatePosition()},document.addEventListener("scroll",this._scrollHandler,{passive:!0}),window.addEventListener("resize",this._resizeHandler)}cleanup(){this._scrollHandler&&(document.removeEventListener("scroll",this._scrollHandler),this._scrollHandler=null),this._resizeHandler&&(window.removeEventListener("resize",this._resizeHandler),this._resizeHandler=null)}}class g extends y{constructor(){super(...arguments),this._outsideClickHandler=null,this._escapeHandler=null}setupEventListeners(){this._outsideClickHandler=this.handleOutsideClick.bind(this),document.addEventListener("click",this._outsideClickHandler,!0),this._escapeHandler=this.handleEscapeKey.bind(this),document.addEventListener("keydown",this._escapeHandler)}removeEventListeners(){this._outsideClickHandler&&(document.removeEventListener("click",this._outsideClickHandler,!0),this._outsideClickHandler=null),this._escapeHandler&&(document.removeEventListener("keydown",this._escapeHandler),this._escapeHandler=null)}handleTriggerClick(t){if(t.stopPropagation(),!this.host.disabled){const t=this.host.dropdownController;t&&t.toggle()}}handleOutsideClick(t){if(!t.composedPath().includes(this.host)){const t=this.host.dropdownController;t&&t.close()}}handleEscapeKey(t){if("Escape"===t.key&&this.host.show){t.preventDefault();const e=this.host.dropdownController;e&&e.close()}}handleColorChange(t){if(this.isValidColor(t)&&this.host.color!==t){const e=this.host.color;this.host.color=t,this.dispatchColorChangeEvent(t,e),this.requestUpdate()}}handleInputChange(t){const e=t.detail.value;e&&e!==this.host.color&&this.handleColorChange(e)}dispatchColorChangeEvent(t,e){const o={value:t,previousValue:e,isValid:this.isValidColor(t)};this.dispatchEvent(new CustomEvent("hy-color-change",{bubbles:!0,composed:!0,detail:o})),this.dispatchEvent(new CustomEvent("color-changed",{bubbles:!0,composed:!0,detail:{value:t}}))}isValidColor(t){try{return CSS.supports("color",t)}catch(t){return!1}}}
+var v=function(t,e,o,r){for(var i,s=arguments.length,n=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(s<3?i(n):s>3?i(e,o,n):i(e,o))||n);return s>3&&n&&Object.defineProperty(e,o,n),n};let f=class extends e{constructor(){super(...arguments),this.defaultColorSets=[],this.size="default",this.columns=8}handleColorClick(t,e){if(e.stopPropagation(),!this.isValidColor(t))return void console.warn(`Invalid color: ${t}`);const o={value:t};this.dispatchEvent(new CustomEvent("color-click",{bubbles:!0,composed:!0,detail:o}))}isValidColor(t){try{return CSS.supports("color",t)}catch(t){return!1}}render(){return this.defaultColorSets&&0!==this.defaultColorSets.length?o`
+      <div 
+        class="default-color-sets-container"
+        role="list"
+        aria-label="Preset color swatches"
+        style="--columns: ${this.columns}"
+      >
+        ${c(this.defaultColorSets,t=>o`
+            <nr-colorholder-box
+              color="${t}"
+              .size=${this.size}
+              class="color-set-container"
+              role="listitem"
+              tabindex="0"
+              aria-label="Color ${t}"
+              @click=${e=>this.handleColorClick(t,e)}
+              @keydown=${e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleColorClick(t,e))}}
+            ></nr-colorholder-box>
+          `)}
+      </div>
+    `:r}};f.styles=b,v([i({type:Array,attribute:"default-color-sets"})],f.prototype,"defaultColorSets",void 0),v([i({type:String,reflect:!0})],f.prototype,"size",void 0),v([i({type:Number,attribute:"columns"})],f.prototype,"columns",void 0),f=v([s("nr-default-color-sets")],f);var m=t`
+  :host {
+    display: inline-block;
+    vertical-align: middle;
+    
+    /* Force CSS custom property inheritance to ensure theme switching works properly */
+    color: var(--nuraly-color-text);
+    background-color: var(--nuraly-color-background);
+    
+    /* Ensure clean state transitions when theme changes */
+    * {
+      transition: all var(--nuraly-transition-fast, 0.15s) ease;
+    }
+  }
+
+  /* Force re-evaluation of theme-dependent properties on theme change */
+  :host([data-theme]) {
+    color: inherit;
+    background-color: inherit;
+  }
+
+  .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(--nuraly-opacity-disabled, 0.5);
+    cursor: not-allowed;
+  }
+
+  :host([show]) .dropdown-container {
+    display: block;
+    position: fixed;
+    width: 180px;
+    z-index: var(--nuraly-z-index-dropdown, 1000);
+    padding: var(--nuraly-spacing-2, 0.5rem);
+    background-color: var(--nuraly-color-surface, #ffffff);
+    border: 1px solid var(--nuraly-color-border, rgba(0, 0, 0, 0.1));
+    border-radius: var(--nuraly-border-radius-medium, 4px);
+    box-shadow: var(--nuraly-shadow-dropdown, 0 2px 8px rgba(0, 0, 0, 0.15));
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity var(--nuraly-transition-fast, 0.15s) ease-in-out,
+                visibility var(--nuraly-transition-fast, 0.15s) ease-in-out;
+  }
+
+  :host([show]) .dropdown-container.positioned {
+    opacity: 1;
+    visibility: visible;
+  }
+`;class y{constructor(t){this.host=t,t.addController(this)}hostConnected(){}hostDisconnected(){}hostUpdated(){}dispatchEvent(t){this.host.dispatchEvent(t)}requestUpdate(){this.host.requestUpdate()}handleError(t,e){console.error(`[ColorPicker ${e}]:`,t)}findElement(t){var e;return(null===(e=this.host.shadowRoot)||void 0===e?void 0:e.querySelector(t))||null}}class g extends y{constructor(){super(...arguments),this._isOpen=!1,this._position={top:0,left:0,width:0,placement:"bottom"},this._dropdownElement=null,this._triggerElement=null,this._scrollHandler=null,this._resizeHandler=null}get isOpen(){return this._isOpen}get position(){return Object.assign({},this._position)}hostConnected(){this.setupScrollAndResizeListeners()}hostDisconnected(){this.cleanup()}open(){try{this._isOpen||this.host.disabled||(this._isOpen=!0,this.host.show=!0,this.requestUpdate(),requestAnimationFrame(()=>{this.findElements(),this._dropdownElement&&this._dropdownElement.classList.remove("positioned"),requestAnimationFrame(()=>{this.calculatePosition(),this._dropdownElement&&this._dropdownElement.classList.add("positioned")})}),this.host&&"function"==typeof this.host.setupEventListeners&&setTimeout(()=>{var t,e;null===(e=(t=this.host).setupEventListeners)||void 0===e||e.call(t)},50),this.dispatchEvent(new CustomEvent("nr-colorpicker-open",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"open")}}close(){var t,e;try{this._isOpen&&(this._isOpen=!1,this.host.show=!1,this.resetPosition(),this.requestUpdate(),this.host&&"function"==typeof this.host.removeEventListeners&&(null===(e=(t=this.host).removeEventListeners)||void 0===e||e.call(t)),this.dispatchEvent(new CustomEvent("nr-colorpicker-close",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"close")}}toggle(){this._isOpen?this.close():this.open()}findElements(){this._dropdownElement=this.findElement(".dropdown-container"),this._triggerElement=this.findElement(".color-holder")}calculatePosition(){var t,e;try{if(this._dropdownElement&&this._triggerElement||this.findElements(),!this._dropdownElement||!this._triggerElement)return;const o=this._triggerElement.getBoundingClientRect(),r=this._dropdownElement.getBoundingClientRect(),i=(null===(t=window.visualViewport)||void 0===t?void 0:t.height)||window.innerHeight,s=(null===(e=window.visualViewport)||void 0===e?void 0:e.width)||window.innerWidth,n=i-o.bottom,l=o.top,a=s-o.left;let h,c,d="bottom";n>=r.height||n>l?(h=o.bottom,d="bottom"):(h=o.top-r.height,d="top"),c=a>=r.width?o.left:Math.max(0,s-r.width),this._position={top:h,left:c,width:Math.max(o.width,r.width),placement:d},this.applyPosition()}catch(t){this.handleError(t,"calculatePosition")}}applyPosition(){try{if(!this._dropdownElement)return;this._dropdownElement.style.position="fixed",this._dropdownElement.style.top=`${this._position.top}px`,this._dropdownElement.style.left=`${this._position.left}px`,this._dropdownElement.style.zIndex="9999",this._dropdownElement.classList.remove("placement-top","placement-bottom"),this._dropdownElement.classList.add(`placement-${this._position.placement}`),this._dropdownElement.classList.add("positioned")}catch(t){this.handleError(t,"applyPosition")}}resetPosition(){try{this._dropdownElement&&(this._dropdownElement.style.removeProperty("position"),this._dropdownElement.style.removeProperty("top"),this._dropdownElement.style.removeProperty("left"),this._dropdownElement.style.removeProperty("z-index"),this._dropdownElement.classList.remove("placement-top","placement-bottom","positioned"))}catch(t){this.handleError(t,"resetPosition")}}setupScrollAndResizeListeners(){this._scrollHandler=()=>{this._isOpen&&this.calculatePosition()},this._resizeHandler=()=>{this._isOpen&&this.calculatePosition()},document.addEventListener("scroll",this._scrollHandler,{passive:!0}),window.addEventListener("resize",this._resizeHandler)}cleanup(){this._scrollHandler&&(document.removeEventListener("scroll",this._scrollHandler),this._scrollHandler=null),this._resizeHandler&&(window.removeEventListener("resize",this._resizeHandler),this._resizeHandler=null)}}class x extends y{constructor(){super(...arguments),this._outsideClickHandler=null,this._escapeHandler=null}setupEventListeners(){this._outsideClickHandler=this.handleOutsideClick.bind(this),document.addEventListener("click",this._outsideClickHandler,!0),this._escapeHandler=this.handleEscapeKey.bind(this),document.addEventListener("keydown",this._escapeHandler)}removeEventListeners(){this._outsideClickHandler&&(document.removeEventListener("click",this._outsideClickHandler,!0),this._outsideClickHandler=null),this._escapeHandler&&(document.removeEventListener("keydown",this._escapeHandler),this._escapeHandler=null)}handleTriggerClick(t){if(t.stopPropagation(),!this.host.disabled){const t=this.host.dropdownController;t&&t.toggle()}}handleOutsideClick(t){if(!t.composedPath().includes(this.host)){const t=this.host.dropdownController;t&&t.close()}}handleEscapeKey(t){if("Escape"===t.key&&this.host.show){t.preventDefault();const e=this.host.dropdownController;e&&e.close()}}handleColorChange(t){if(this.isValidColor(t)&&this.host.color!==t){const e=this.host.color;this.host.color=t,this.dispatchColorChangeEvent(t,e),this.requestUpdate()}}handleInputChange(t){const e=t.detail.value;e&&e!==this.host.color&&this.handleColorChange(e)}dispatchColorChangeEvent(t,e){const o={value:t,previousValue:e,isValid:this.isValidColor(t),color:t};this.dispatchEvent(new CustomEvent("nr-color-change",{bubbles:!0,composed:!0,detail:o})),this.dispatchEvent(new CustomEvent("hy-color-change",{bubbles:!0,composed:!0,detail:o})),this.dispatchEvent(new CustomEvent("color-changed",{bubbles:!0,composed:!0,detail:{value:t,color:t}}))}isValidColor(t){try{return CSS.supports("color",t)}catch(t){return!1}}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var w=function(t,e,o,i){for(var r,s=arguments.length,n=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i,l=t.length-1;l>=0;l--)(r=t[l])&&(n=(s<3?r(n):s>3?r(e,o,n):r(e,o))||n);return s>3&&n&&Object.defineProperty(e,o,n),n};let k=class extends(a(e)){constructor(){super(),this.requiredComponents=["nr-input","nr-icon"],this.color="#3498db",this.show=!1,this.defaultColorSets=[],this.disabled=!1,this.size="default",this.trigger="click",this.placement="auto",this.animation="fade",this.closeOnSelect=!1,this.closeOnOutsideClick=!0,this.closeOnEscape=!0,this.showInput=!0,this.showCopyButton=!0,this.format="hex",this.inputPlaceholder="Enter color",this.label="",this.helperText="",this.isValidColor=!0,this.dropdownController=new x(this),this.eventController=new g(this),this.handleTriggerClick=t=>{this.eventController.handleTriggerClick(t)},this.handleColorChanged=t=>{const e=t.detail.value;this.eventController.handleColorChange(e),this.closeOnSelect&&this.dropdownController.close()},this.handleInputChange=t=>{this.eventController.handleInputChange(t)},"undefined"!=typeof window&&Promise.resolve().then((function(){return Y}))}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback()}updated(t){super.updated(t),t.has("color")&&this.validateColor()}open(){this.dropdownController.open()}close(){this.dropdownController.close()}toggle(){this.dropdownController.toggle()}validateColor(){return this.isValidColor=this.eventController.isValidColor(this.color),this.isValidColor}setupEventListeners(){(this.closeOnOutsideClick||this.closeOnEscape)&&this.eventController.setupEventListeners()}removeEventListeners(){this.eventController.removeEventListeners()}render(){const t={"color-picker-container":!0,"color-picker-container--disabled":this.disabled,"color-picker-container--open":this.show,[`color-picker-container--${this.size}`]:!0};return o`<div class="${l(t)}" data-theme="${this.currentTheme}">${this.renderLabel()}<nr-colorholder-box class="color-holder" color="${this.color}" .size="${this.size}" ?disabled="${this.disabled}" @click="${this.disabled?i:this.handleTriggerClick}" role="button" aria-label="Select color" aria-expanded="${this.show}" aria-haspopup="dialog" tabindex="${this.disabled?-1:0}"></nr-colorholder-box>${this.renderDropdown()} ${this.renderHelperText()}</div>`}renderLabel(){return this.label?o`<label class="color-picker-label">${this.label}</label>`:i}renderDropdown(){return this.show?o`<div class="dropdown-container" role="dialog" aria-label="Color picker">${this.renderDefaultColorSets()} ${this.renderColorPicker()} ${this.renderColorInput()}</div>`:i}renderDefaultColorSets(){return this.defaultColorSets&&0!==this.defaultColorSets.length?o`<nr-default-color-sets .defaultColorSets="${this.defaultColorSets}" @color-click="${this.handleColorChanged}" aria-label="Preset colors"></nr-default-color-sets>`:i}renderColorPicker(){return o`<hex-color-picker color="${this.color}" @color-changed="${this.handleColorChanged}" aria-label="Color gradient picker"></hex-color-picker>`}renderColorInput(){return this.showInput?o`<nr-input type="text" .value="${this.color}" placeholder="${this.inputPlaceholder}" @nr-input="${this.handleInputChange}" ?withCopy="${this.showCopyButton}" .state="${this.isValidColor?"default":"error"}" aria-label="Color value input" aria-invalid="${!this.isValidColor}"></nr-input>`:i}renderHelperText(){return this.helperText?o`<div class="color-picker-helper-text">${this.helperText}</div>`:i}};k.styles=m,w([r({type:String})],k.prototype,"color",void 0),w([r({type:Boolean,reflect:!0})],k.prototype,"show",void 0),w([r({type:Array,attribute:"default-color-sets"})],k.prototype,"defaultColorSets",void 0),w([r({type:Boolean,reflect:!0})],k.prototype,"disabled",void 0),w([r({type:String,reflect:!0})],k.prototype,"size",void 0),w([r({type:String,reflect:!0})],k.prototype,"trigger",void 0),w([r({type:String,reflect:!0})],k.prototype,"placement",void 0),w([r({type:String,reflect:!0})],k.prototype,"animation",void 0),w([r({type:Boolean,attribute:"close-on-select"})],k.prototype,"closeOnSelect",void 0),w([r({type:Boolean,attribute:"close-on-outside-click"})],k.prototype,"closeOnOutsideClick",void 0),w([r({type:Boolean,attribute:"close-on-escape"})],k.prototype,"closeOnEscape",void 0),w([r({type:Boolean,attribute:"show-input"})],k.prototype,"showInput",void 0),w([r({type:Boolean,attribute:"show-copy-button"})],k.prototype,"showCopyButton",void 0),w([r({type:String,reflect:!0})],k.prototype,"format",void 0),w([r({type:String,attribute:"input-placeholder"})],k.prototype,"inputPlaceholder",void 0),w([r({type:String})],k.prototype,"label",void 0),w([r({type:String,attribute:"helper-text"})],k.prototype,"helperText",void 0),w([n()],k.prototype,"isValidColor",void 0),k=w([s("nr-color-picker")],k);const $=(t,e=0,o=1)=>t>o?o:t<e?e:t,C=(t,e=0,o=Math.pow(10,e))=>Math.round(o*t)/o,S=t=>("#"===t[0]&&(t=t.substring(1)),t.length<6?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:4===t.length?C(parseInt(t[3]+t[3],16)/255,2):1}:{r:parseInt(t.substring(0,2),16),g:parseInt(t.substring(2,4),16),b:parseInt(t.substring(4,6),16),a:8===t.length?C(parseInt(t.substring(6,8),16)/255,2):1}),E=t=>{const{h:e,s:o,l:i}=(({h:t,s:e,v:o,a:i})=>{const r=(200-e)*o/100;return{h:C(t),s:C(r>0&&r<200?e*o/100/(r<=100?r:200-r)*100:0),l:C(r/2),a:C(i,2)}})(t);return`hsl(${e}, ${o}%, ${i}%)`},z=({h:t,s:e,v:o,a:i})=>{t=t/360*6,e/=100,o/=100;const r=Math.floor(t),s=o*(1-e),n=o*(1-(t-r)*e),l=o*(1-(1-t+r)*e),a=r%6;return{r:C(255*[o,n,s,s,l,o][a]),g:C(255*[l,o,o,n,s,s][a]),b:C(255*[s,s,l,o,o,n][a]),a:C(i,2)}},O=t=>{const e=t.toString(16);return e.length<2?"0"+e:e},P=({r:t,g:e,b:o,a:i})=>{const r=i<1?O(C(255*i)):"";return"#"+O(t)+O(e)+O(o)+r},j=({r:t,g:e,b:o,a:i})=>{const r=Math.max(t,e,o),s=r-Math.min(t,e,o),n=s?r===t?(e-o)/s:r===e?2+(o-t)/s:4+(t-e)/s:0;return{h:C(60*(n<0?n+6:n)),s:C(r?s/r*100:0),v:C(r/255*100),a:i}},B=(t,e)=>{if(t===e)return!0;for(const o in t)if(t[o]!==e[o])return!1;return!0},I={},M=t=>{let e=I[t];return e||(e=document.createElement("template"),e.innerHTML=t,I[t]=e),e},A=(t,e,o)=>{t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:o}))};let L=!1;const T=t=>"touches"in t,H=(t,e)=>{const o=T(e)?e.touches[0]:e,i=t.el.getBoundingClientRect();A(t.el,"move",t.getMove({x:$((o.pageX-(i.left+window.pageXOffset))/i.width),y:$((o.pageY-(i.top+window.pageYOffset))/i.height)}))};class V{constructor(t,e,o,i){const r=M(`<div role="slider" tabindex="0" part="${e}" ${o}><div part="${e}-pointer"></div></div>`);t.appendChild(r.content.cloneNode(!0));const s=t.querySelector(`[part=${e}]`);s.addEventListener("mousedown",this),s.addEventListener("touchstart",this),s.addEventListener("keydown",this),this.el=s,this.xy=i,this.nodes=[s.firstChild,s]}set dragging(t){const e=t?document.addEventListener:document.removeEventListener;e(L?"touchmove":"mousemove",this),e(L?"touchend":"mouseup",this)}handleEvent(t){switch(t.type){case"mousedown":case"touchstart":if(t.preventDefault(),!(t=>!(L&&!T(t)||(L||(L=T(t)),0)))(t)||!L&&0!=t.button)return;this.el.focus(),H(this,t),this.dragging=!0;break;case"mousemove":case"touchmove":t.preventDefault(),H(this,t);break;case"mouseup":case"touchend":this.dragging=!1;break;case"keydown":((t,e)=>{const o=e.keyCode;o>40||t.xy&&o<37||o<33||(e.preventDefault(),A(t.el,"move",t.getMove({x:39===o?.01:37===o?-.01:34===o?.05:33===o?-.05:35===o?1:36===o?-1:0,y:40===o?.01:38===o?-.01:0},!0)))})(this,t)}}style(t){t.forEach(((t,e)=>{for(const o in t)this.nodes[e].style.setProperty(o,t[o])}))}}class q extends V{constructor(t){super(t,"hue",'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"',!1)}update({h:t}){this.h=t,this.style([{left:t/360*100+"%",color:E({h:t,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuenow",`${C(t)}`)}getMove(t,e){return{h:e?$(this.h+360*t.x,0,360):360*t.x}}}class D extends V{constructor(t){super(t,"saturation",'aria-label="Color"',!0)}update(t){this.hsva=t,this.style([{top:100-t.v+"%",left:`${t.s}%`,color:E(t)},{"background-color":E({h:t.h,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuetext",`Saturation ${C(t.s)}%, Brightness ${C(t.v)}%`)}getMove(t,e){return{s:e?$(this.hsva.s+100*t.x,0,100):100*t.x,v:e?$(this.hsva.v-100*t.y,0,100):Math.round(100-100*t.y)}}}const _=Symbol("same"),F=Symbol("color"),N=Symbol("hsva"),U=Symbol("update"),W=Symbol("parts"),G=Symbol("css"),K=Symbol("sliders");class R extends HTMLElement{static get observedAttributes(){return["color"]}get[G](){return[':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}',"[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}","[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}"]}get[K](){return[D,q]}get color(){return this[F]}set color(t){if(!this[_](t)){const e=this.colorModel.toHsva(t);this[U](e),this[F]=t}}constructor(){super();const t=M(`<style>${this[G].join("")}</style>`),e=this.attachShadow({mode:"open"});e.appendChild(t.content.cloneNode(!0)),e.addEventListener("move",this),this[W]=this[K].map((t=>new t(e)))}connectedCallback(){if(this.hasOwnProperty("color")){const t=this.color;delete this.color,this.color=t}else this.color||(this.color=this.colorModel.defaultColor)}attributeChangedCallback(t,e,o){const i=this.colorModel.fromAttr(o);this[_](i)||(this.color=i)}handleEvent(t){const e=this[N],o={...e,...t.detail};let i;this[U](o),B(o,e)||this[_](i=this.colorModel.fromHsva(o))||(this[F]=i,A(this,"color-changed",{value:i}))}[_](t){return this.color&&this.colorModel.equal(t,this.color)}[U](t){this[N]=t,this[W].forEach((e=>e.update(t)))}}const J={defaultColor:"#000",toHsva:t=>j(S(t)),fromHsva:({h:t,s:e,v:o})=>P(z({h:t,s:e,v:o,a:1})),equal:(t,e)=>t.toLowerCase()===e.toLowerCase()||B(S(t),S(e)),fromAttr:t=>t};class Q extends R{get colorModel(){return J}}class X extends Q{}customElements.define("hex-color-picker",X);var Y=Object.freeze({__proto__:null,HexColorPicker:X});export{p as ColorHolderBox,k as ColorPicker};
+ */var w=function(t,e,o,r){for(var i,s=arguments.length,n=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(s<3?i(n):s>3?i(e,o,n):i(e,o))||n);return s>3&&n&&Object.defineProperty(e,o,n),n};let k=class extends(a(e)){constructor(){super(),this.requiredComponents=["nr-input","nr-icon"],this.color="#3498db",this.show=!1,this.defaultColorSets=[],this.disabled=!1,this.size="default",this.trigger="click",this.placement="auto",this.animation="fade",this.closeOnSelect=!1,this.closeOnOutsideClick=!0,this.closeOnEscape=!0,this.showInput=!0,this.showCopyButton=!0,this.format="hex",this.inputPlaceholder="Enter color",this.label="",this.helperText="",this.isValidColor=!0,this.dropdownController=new g(this),this.eventController=new x(this),this.handleTriggerClick=t=>{this.eventController.handleTriggerClick(t)},this.handleColorChanged=t=>{const e=t.detail.value;this.eventController.handleColorChange(e),this.closeOnSelect&&this.dropdownController.close()},this.handleInputChange=t=>{this.eventController.handleInputChange(t)},"undefined"!=typeof window&&Promise.resolve().then(function(){return Y})}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback()}updated(t){super.updated(t),t.has("color")&&this.validateColor()}open(){this.dropdownController.open()}close(){this.dropdownController.close()}toggle(){this.dropdownController.toggle()}validateColor(){return this.isValidColor=this.eventController.isValidColor(this.color),this.isValidColor}setupEventListeners(){(this.closeOnOutsideClick||this.closeOnEscape)&&this.eventController.setupEventListeners()}removeEventListeners(){this.eventController.removeEventListeners()}render(){const t={"color-picker-container":!0,"color-picker-container--disabled":this.disabled,"color-picker-container--open":this.show,[`color-picker-container--${this.size}`]:!0};return o`
+      <div class="${l(t)}" data-theme="${this.currentTheme}">
+        ${this.renderLabel()}
+        
+        <nr-colorholder-box
+          class="color-holder"
+          color="${this.color}"
+          .size=${this.size}
+          ?disabled="${this.disabled}"
+          @click=${this.disabled?r:this.handleTriggerClick}
+          role="button"
+          aria-label="Select color"
+          aria-expanded="${this.show}"
+          aria-haspopup="dialog"
+          tabindex="${this.disabled?-1:0}"
+        ></nr-colorholder-box>
+        
+        ${this.renderDropdown()}
+        ${this.renderHelperText()}
+      </div>
+    `}renderLabel(){return this.label?o`
+      <label class="color-picker-label">
+        ${this.label}
+      </label>
+    `:r}renderDropdown(){return this.show?o`
+      <div 
+        class="dropdown-container"
+        role="dialog"
+        aria-label="Color picker"
+      >
+        ${this.renderDefaultColorSets()}
+        ${this.renderColorPicker()}
+        ${this.renderColorInput()}
+      </div>
+    `:r}renderDefaultColorSets(){return this.defaultColorSets&&0!==this.defaultColorSets.length?o`
+      <nr-default-color-sets 
+        .defaultColorSets=${this.defaultColorSets} 
+        @color-click="${this.handleColorChanged}"
+        aria-label="Preset colors">
+      </nr-default-color-sets>
+    `:r}renderColorPicker(){return o`
+      <hex-color-picker
+        color="${this.color}"
+        @color-changed="${this.handleColorChanged}"
+        aria-label="Color gradient picker">
+      </hex-color-picker>
+    `}renderColorInput(){return this.showInput?o`
+      <nr-input 
+        type="text" 
+        .value="${this.color}" 
+        placeholder="${this.inputPlaceholder}"
+        @nr-input="${this.handleInputChange}" 
+        ?withCopy=${this.showCopyButton} 
+        .state="${this.isValidColor?"default":"error"}"
+        aria-label="Color value input"
+        aria-invalid="${!this.isValidColor}">
+      </nr-input>
+    `:r}renderHelperText(){return this.helperText?o`
+      <div class="color-picker-helper-text">
+        ${this.helperText}
+      </div>
+    `:r}};k.styles=m,w([i({type:String})],k.prototype,"color",void 0),w([i({type:Boolean,reflect:!0})],k.prototype,"show",void 0),w([i({type:Array,attribute:"default-color-sets"})],k.prototype,"defaultColorSets",void 0),w([i({type:Boolean,reflect:!0})],k.prototype,"disabled",void 0),w([i({type:String,reflect:!0})],k.prototype,"size",void 0),w([i({type:String,reflect:!0})],k.prototype,"trigger",void 0),w([i({type:String,reflect:!0})],k.prototype,"placement",void 0),w([i({type:String,reflect:!0})],k.prototype,"animation",void 0),w([i({type:Boolean,attribute:"close-on-select"})],k.prototype,"closeOnSelect",void 0),w([i({type:Boolean,attribute:"close-on-outside-click"})],k.prototype,"closeOnOutsideClick",void 0),w([i({type:Boolean,attribute:"close-on-escape"})],k.prototype,"closeOnEscape",void 0),w([i({type:Boolean,attribute:"show-input"})],k.prototype,"showInput",void 0),w([i({type:Boolean,attribute:"show-copy-button"})],k.prototype,"showCopyButton",void 0),w([i({type:String,reflect:!0})],k.prototype,"format",void 0),w([i({type:String,attribute:"input-placeholder"})],k.prototype,"inputPlaceholder",void 0),w([i({type:String})],k.prototype,"label",void 0),w([i({type:String,attribute:"helper-text"})],k.prototype,"helperText",void 0),w([n()],k.prototype,"isValidColor",void 0),k=w([s("nr-color-picker")],k);const $=(t,e=0,o=1)=>t>o?o:t<e?e:t,C=(t,e=0,o=Math.pow(10,e))=>Math.round(o*t)/o,S=t=>("#"===t[0]&&(t=t.substring(1)),t.length<6?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:4===t.length?C(parseInt(t[3]+t[3],16)/255,2):1}:{r:parseInt(t.substring(0,2),16),g:parseInt(t.substring(2,4),16),b:parseInt(t.substring(4,6),16),a:8===t.length?C(parseInt(t.substring(6,8),16)/255,2):1}),E=t=>{const{h:e,s:o,l:r}=(({h:t,s:e,v:o,a:r})=>{const i=(200-e)*o/100;return{h:C(t),s:C(i>0&&i<200?e*o/100/(i<=100?i:200-i)*100:0),l:C(i/2),a:C(r,2)}})(t);return`hsl(${e}, ${o}%, ${r}%)`},z=({h:t,s:e,v:o,a:r})=>{t=t/360*6,e/=100,o/=100;const i=Math.floor(t),s=o*(1-e),n=o*(1-(t-i)*e),l=o*(1-(1-t+i)*e),a=i%6;return{r:C(255*[o,n,s,s,l,o][a]),g:C(255*[l,o,o,n,s,s][a]),b:C(255*[s,s,l,o,o,n][a]),a:C(r,2)}},O=t=>{const e=t.toString(16);return e.length<2?"0"+e:e},P=({r:t,g:e,b:o,a:r})=>{const i=r<1?O(C(255*r)):"";return"#"+O(t)+O(e)+O(o)+i},j=({r:t,g:e,b:o,a:r})=>{const i=Math.max(t,e,o),s=i-Math.min(t,e,o),n=s?i===t?(e-o)/s:i===e?2+(o-t)/s:4+(t-e)/s:0;return{h:C(60*(n<0?n+6:n)),s:C(i?s/i*100:0),v:C(i/255*100),a:r}},B=(t,e)=>{if(t===e)return!0;for(const o in t)if(t[o]!==e[o])return!1;return!0},I={},M=t=>{let e=I[t];return e||(e=document.createElement("template"),e.innerHTML=t,I[t]=e),e},A=(t,e,o)=>{t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:o}))};let L=!1;const T=t=>"touches"in t,H=(t,e)=>{const o=T(e)?e.touches[0]:e,r=t.el.getBoundingClientRect();A(t.el,"move",t.getMove({x:$((o.pageX-(r.left+window.pageXOffset))/r.width),y:$((o.pageY-(r.top+window.pageYOffset))/r.height)}))};class V{constructor(t,e,o,r){const i=M(`<div role="slider" tabindex="0" part="${e}" ${o}><div part="${e}-pointer"></div></div>`);t.appendChild(i.content.cloneNode(!0));const s=t.querySelector(`[part=${e}]`);s.addEventListener("mousedown",this),s.addEventListener("touchstart",this),s.addEventListener("keydown",this),this.el=s,this.xy=r,this.nodes=[s.firstChild,s]}set dragging(t){const e=t?document.addEventListener:document.removeEventListener;e(L?"touchmove":"mousemove",this),e(L?"touchend":"mouseup",this)}handleEvent(t){switch(t.type){case"mousedown":case"touchstart":if(t.preventDefault(),!(t=>!(L&&!T(t)||(L||(L=T(t)),0)))(t)||!L&&0!=t.button)return;this.el.focus(),H(this,t),this.dragging=!0;break;case"mousemove":case"touchmove":t.preventDefault(),H(this,t);break;case"mouseup":case"touchend":this.dragging=!1;break;case"keydown":((t,e)=>{const o=e.keyCode;o>40||t.xy&&o<37||o<33||(e.preventDefault(),A(t.el,"move",t.getMove({x:39===o?.01:37===o?-.01:34===o?.05:33===o?-.05:35===o?1:36===o?-1:0,y:40===o?.01:38===o?-.01:0},!0)))})(this,t)}}style(t){t.forEach((t,e)=>{for(const o in t)this.nodes[e].style.setProperty(o,t[o])})}}class q extends V{constructor(t){super(t,"hue",'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"',!1)}update({h:t}){this.h=t,this.style([{left:t/360*100+"%",color:E({h:t,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuenow",`${C(t)}`)}getMove(t,e){return{h:e?$(this.h+360*t.x,0,360):360*t.x}}}class D extends V{constructor(t){super(t,"saturation",'aria-label="Color"',!0)}update(t){this.hsva=t,this.style([{top:100-t.v+"%",left:`${t.s}%`,color:E(t)},{"background-color":E({h:t.h,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuetext",`Saturation ${C(t.s)}%, Brightness ${C(t.v)}%`)}getMove(t,e){return{s:e?$(this.hsva.s+100*t.x,0,100):100*t.x,v:e?$(this.hsva.v-100*t.y,0,100):Math.round(100-100*t.y)}}}const F=Symbol("same"),_=Symbol("color"),N=Symbol("hsva"),U=Symbol("update"),W=Symbol("parts"),G=Symbol("css"),K=Symbol("sliders");class R extends HTMLElement{static get observedAttributes(){return["color"]}get[G](){return[':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}',"[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}","[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}"]}get[K](){return[D,q]}get color(){return this[_]}set color(t){if(!this[F](t)){const e=this.colorModel.toHsva(t);this[U](e),this[_]=t}}constructor(){super();const t=M(`<style>${this[G].join("")}</style>`),e=this.attachShadow({mode:"open"});e.appendChild(t.content.cloneNode(!0)),e.addEventListener("move",this),this[W]=this[K].map(t=>new t(e))}connectedCallback(){if(this.hasOwnProperty("color")){const t=this.color;delete this.color,this.color=t}else this.color||(this.color=this.colorModel.defaultColor)}attributeChangedCallback(t,e,o){const r=this.colorModel.fromAttr(o);this[F](r)||(this.color=r)}handleEvent(t){const e=this[N],o={...e,...t.detail};let r;this[U](o),B(o,e)||this[F](r=this.colorModel.fromHsva(o))||(this[_]=r,A(this,"color-changed",{value:r}))}[F](t){return this.color&&this.colorModel.equal(t,this.color)}[U](t){this[N]=t,this[W].forEach(e=>e.update(t))}}const J={defaultColor:"#000",toHsva:t=>j(S(t)),fromHsva:({h:t,s:e,v:o})=>P(z({h:t,s:e,v:o,a:1})),equal:(t,e)=>t.toLowerCase()===e.toLowerCase()||B(S(t),S(e)),fromAttr:t=>t};class Q extends R{get colorModel(){return J}}class X extends Q{}customElements.define("hex-color-picker",X);var Y=Object.freeze({__proto__:null,HexColorPicker:X});export{p as ColorHolderBox,k as ColorPicker};

package/color-holder.component.d.ts

@@ -45,6 +45,6 @@ export declare class ColorHolderBox extends LitElement {
      * Checks if the color is transparent or has transparency
      */
     private isTransparent;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 //# sourceMappingURL=color-holder.component.d.ts.map

package/color-holder.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-holder.component.js","sourceRoot":"","sources":["../../../src/components/colorpicker/color-holder.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { styles } from './color-holder.style.js';\nimport { ColorPickerSize } from './color-picker.types.js';\n\n/**\n * Color holder box component for displaying a color swatch.\n * \n * Renders a colored box that can be used as a color indicator or trigger.\n * Supports various sizes and can be disabled.\n * \n * @example\n * ```html\n * <nr-colorholder-box color=\"#3498db\"></nr-colorholder-box>\n * <nr-colorholder-box color=\"rgb(52, 152, 219)\" size=\"large\"></nr-colorholder-box>\n * <nr-colorholder-box color=\"#e74c3c\" disabled></nr-colorholder-box>\n * ```\n * \n * @cssproperty --color-holder-size - Size of the color box\n * @cssproperty --color-holder-border - Border style\n * @cssproperty --color-holder-border-radius - Border radius\n * @cssproperty --color-holder-cursor - Cursor style\n */\n@customElement('nr-colorholder-box')\nexport class ColorHolderBox extends LitElement {\n  static override styles = styles;\n\n  /** The color value to display */\n  @property({ type: String })\n  color = '#3498db';\n\n  /** Size variant (small, default, large) */\n  @property({ type: String, reflect: true })\n  size: ColorPickerSize = ColorPickerSize.Default;\n\n  /** Whether the color holder is disabled */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Show a checkered background for transparent colors */\n  @property({ type: Boolean, attribute: 'show-transparency-grid' })\n  showTransparencyGrid = true;\n\n  /** Border width in pixels */\n  @property({ type: Number, attribute: 'border-width' })\n  borderWidth = 2;\n\n  /** Whether to show a border */\n  @property({ type: Boolean, attribute: 'show-border' })\n  showBorder = true;\n\n  /**\n   * Validates if the color is valid CSS color\n   */\n  private isValidColor(): boolean {\n    try {\n      return CSS.supports('color', this.color);\n    } catch {\n      return false;\n    }\n  }\n\n  /**\n   * Checks if the color is transparent or has transparency\n   */\n  private isTransparent(): boolean {\n    return this.color === 'transparent' || \n           this.color.toLowerCase().includes('rgba') ||\n           this.color.toLowerCase().includes('hsla');\n  }\n\n  override render() {\n    const containerClasses = {\n      'color-holder-container': true,\n      'color-holder-container--disabled': this.disabled,\n      'color-holder-container--invalid': !this.isValidColor(),\n      'color-holder-container--transparent': this.isTransparent() && this.showTransparencyGrid,\n      [`color-holder-container--${this.size}`]: true,\n    };\n\n    const containerStyles = {\n      backgroundColor: this.isValidColor() ? this.color : '#ffffff',\n      borderWidth: this.showBorder ? `${this.borderWidth}px` : '0',\n    };\n\n    return html`\n      <div \n        class=\"${classMap(containerClasses)}\" \n        style=\"${styleMap(containerStyles)}\"\n        role=\"img\"\n        aria-label=\"Color swatch: ${this.color}\"\n        title=\"${this.color}\"\n      ></div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"color-holder.component.js","sourceRoot":"","sources":["../../../../src/components/colorpicker/color-holder.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { styles } from './color-holder.style.js';\nimport { ColorPickerSize } from './color-picker.types.js';\n\n/**\n * Color holder box component for displaying a color swatch.\n * \n * Renders a colored box that can be used as a color indicator or trigger.\n * Supports various sizes and can be disabled.\n * \n * @example\n * ```html\n * <nr-colorholder-box color=\"#3498db\"></nr-colorholder-box>\n * <nr-colorholder-box color=\"rgb(52, 152, 219)\" size=\"large\"></nr-colorholder-box>\n * <nr-colorholder-box color=\"#e74c3c\" disabled></nr-colorholder-box>\n * ```\n * \n * @cssproperty --color-holder-size - Size of the color box\n * @cssproperty --color-holder-border - Border style\n * @cssproperty --color-holder-border-radius - Border radius\n * @cssproperty --color-holder-cursor - Cursor style\n */\n@customElement('nr-colorholder-box')\nexport class ColorHolderBox extends LitElement {\n  static override styles = styles;\n\n  /** The color value to display */\n  @property({ type: String })\n  color = '#3498db';\n\n  /** Size variant (small, default, large) */\n  @property({ type: String, reflect: true })\n  size: ColorPickerSize = ColorPickerSize.Default;\n\n  /** Whether the color holder is disabled */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Show a checkered background for transparent colors */\n  @property({ type: Boolean, attribute: 'show-transparency-grid' })\n  showTransparencyGrid = true;\n\n  /** Border width in pixels */\n  @property({ type: Number, attribute: 'border-width' })\n  borderWidth = 2;\n\n  /** Whether to show a border */\n  @property({ type: Boolean, attribute: 'show-border' })\n  showBorder = true;\n\n  /**\n   * Validates if the color is valid CSS color\n   */\n  private isValidColor(): boolean {\n    try {\n      return CSS.supports('color', this.color);\n    } catch {\n      return false;\n    }\n  }\n\n  /**\n   * Checks if the color is transparent or has transparency\n   */\n  private isTransparent(): boolean {\n    return this.color === 'transparent' || \n           this.color.toLowerCase().includes('rgba') ||\n           this.color.toLowerCase().includes('hsla');\n  }\n\n  override render() {\n    const containerClasses = {\n      'color-holder-container': true,\n      'color-holder-container--disabled': this.disabled,\n      'color-holder-container--invalid': !this.isValidColor(),\n      'color-holder-container--transparent': this.isTransparent() && this.showTransparencyGrid,\n      [`color-holder-container--${this.size}`]: true,\n    };\n\n    const containerStyles = {\n      backgroundColor: this.isValidColor() ? this.color : '#ffffff',\n      borderWidth: this.showBorder ? `${this.borderWidth}px` : '0',\n    };\n\n    return html`\n      <div \n        class=\"${classMap(containerClasses)}\" \n        style=\"${styleMap(containerStyles)}\"\n        role=\"img\"\n        aria-label=\"Color swatch: ${this.color}\"\n        title=\"${this.color}\"\n      ></div>\n    `;\n  }\n}\n"]}

package/color-holder.style.js.map

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

package/color-picker.component.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
 import './color-holder.component.js';
 import './default-color-sets.component.js';
 import { ColorPickerSize, ColorPickerTrigger, ColorPickerPlacement, ColorPickerAnimation, ColorFormat } from './color-picker.types.js';
@@ -148,7 +148,7 @@ export declare class ColorPicker extends ColorPicker_base implements ColorPicker
     /**
      * Main render method
      */
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     /**
      * Renders the label if provided
      */

package/color-picker.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.component.js","sourceRoot":"","sources":["../../../src/components/colorpicker/color-picker.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { INPUT_STATE } from '../input/input.types.js';\n\n// Import child components\nimport './color-holder.component.js';\nimport './default-color-sets.component.js';\n\n// Import styles and types\nimport styles from './color-picker.style.js';\nimport {\n  ColorPickerSize,\n  ColorPickerTrigger,\n  ColorPickerPlacement,\n  ColorPickerAnimation,\n  ColorFormat\n} from './color-picker.types.js';\n\n// Import controllers\nimport {\n  ColorPickerDropdownController,\n  ColorPickerEventController,\n} from './controllers/index.js';\n\n// Import interfaces\nimport type { ColorPickerHost } from './interfaces/index.js';\n\n/**\n * Advanced color picker component with dropdown positioning, validation, and accessibility.\n * \n * Supports multiple color formats, default color sets, custom triggers, keyboard navigation,\n * and various display configurations.\n * \n * @example\n * ```html\n * <!-- Basic color picker -->\n * <nr-color-picker color=\"#3498db\"></nr-color-picker>\n * \n * <!-- With default colors -->\n * <nr-color-picker \n *   color=\"#3498db\"\n *   .defaultColorSets=\"${['#3498db', '#e74c3c', '#2ecc71']}\">\n * </nr-color-picker>\n * \n * <!-- With custom configuration -->\n * <nr-color-picker\n *   color=\"#3498db\"\n *   trigger=\"click\"\n *   placement=\"top\"\n *   size=\"large\"\n *   show-input=\"true\"\n *   show-copy-button=\"true\">\n * </nr-color-picker>\n * \n * <!-- Disabled -->\n * <nr-color-picker color=\"#3498db\" disabled></nr-color-picker>\n * ```\n * \n * @fires hy-color-change - Color value changed\n * @fires nr-colorpicker-open - Dropdown opened\n * @fires nr-colorpicker-close - Dropdown closed\n * @fires color-changed - Legacy event for backwards compatibility\n * \n * @slot - Default slot for custom content\n * \n * @cssproperty --colorpicker-trigger-size - Size of the color trigger box\n * @cssproperty --colorpicker-dropdown-width - Width of the dropdown panel\n * @cssproperty --colorpicker-dropdown-background - Background color of dropdown\n * @cssproperty --colorpicker-dropdown-shadow - Shadow of dropdown panel\n * @cssproperty --colorpicker-dropdown-border-radius - Border radius of dropdown\n */\n@customElement('nr-color-picker')\nexport class ColorPicker extends NuralyUIBaseMixin(LitElement) implements ColorPickerHost {\n  static override styles = styles;\n\n  override requiredComponents = ['nr-input', 'nr-icon'];\n\n  /** Current color value */\n  @property({ type: String }) \n  color = '#3498db';\n\n  /** Controls dropdown visibility */\n  @property({ type: Boolean, reflect: true }) \n  show = false;\n\n  /** Array of preset colors to display */\n  @property({ type: Array, attribute: 'default-color-sets' }) \n  defaultColorSets: string[] = [];\n\n  /** Disables the color picker */\n  @property({ type: Boolean, reflect: true }) \n  disabled = false;\n\n  /** Color picker size (small, default, large) */\n  @property({ type: String, reflect: true }) \n  size: ColorPickerSize = ColorPickerSize.Default;\n\n  /** Trigger mode for opening dropdown */\n  @property({ type: String, reflect: true }) \n  trigger: ColorPickerTrigger = ColorPickerTrigger.Click;\n\n  /** Dropdown placement */\n  @property({ type: String, reflect: true }) \n  placement: ColorPickerPlacement = ColorPickerPlacement.Auto;\n\n  /** Animation style for dropdown */\n  @property({ type: String, reflect: true }) \n  animation: ColorPickerAnimation = ColorPickerAnimation.Fade;\n\n  /** Close dropdown when a color is selected */\n  @property({ type: Boolean, attribute: 'close-on-select' }) \n  closeOnSelect = false;\n\n  /** Close dropdown on outside click */\n  @property({ type: Boolean, attribute: 'close-on-outside-click' }) \n  closeOnOutsideClick = true;\n\n  /** Close dropdown on escape key */\n  @property({ type: Boolean, attribute: 'close-on-escape' }) \n  closeOnEscape = true;\n\n  /** Show color input field */\n  @property({ type: Boolean, attribute: 'show-input' }) \n  showInput = true;\n\n  /** Show copy button on input */\n  @property({ type: Boolean, attribute: 'show-copy-button' }) \n  showCopyButton = true;\n\n  /** Color format (hex, rgb, rgba, hsl, hsla) */\n  @property({ type: String, reflect: true }) \n  format: ColorFormat = ColorFormat.Hex;\n\n  /** Placeholder text for color input */\n  @property({ type: String, attribute: 'input-placeholder' }) \n  inputPlaceholder = 'Enter color';\n\n  /** Label text */\n  @property({ type: String }) \n  label = '';\n\n  /** Helper text */\n  @property({ type: String, attribute: 'helper-text' }) \n  helperText = '';\n\n  /** Validation state for color value */\n  @state() \n  private isValidColor = true;\n\n  /** Manages dropdown visibility and positioning */\n  private dropdownController = new ColorPickerDropdownController(this);\n\n  /** Handles all event management */\n  private eventController = new ColorPickerEventController(this);\n\n  constructor() {\n    super();\n    // Dynamically import vanilla-colorful for color picker UI\n    if (typeof window !== 'undefined') {\n      import('vanilla-colorful');\n    }\n  }\n\n  /**\n   * Component connected to DOM - initialize base functionality\n   */\n  override connectedCallback(): void {\n    super.connectedCallback();\n  }\n\n  /**\n   * Component disconnected from DOM - cleanup event listeners\n   */\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n\n  /**\n   * Called after component updates\n   */\n  override updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n    \n    if (changedProperties.has('color')) {\n      this.validateColor();\n    }\n  }\n\n  // === Public API Methods ===\n\n  /**\n   * Opens the color picker dropdown\n   */\n  open(): void {\n    this.dropdownController.open();\n  }\n\n  /**\n   * Closes the color picker dropdown\n   */\n  close(): void {\n    this.dropdownController.close();\n  }\n\n  /**\n   * Toggles the color picker dropdown\n   */\n  toggle(): void {\n    this.dropdownController.toggle();\n  }\n\n  /**\n   * Validates the current color value\n   */\n  validateColor(): boolean {\n    this.isValidColor = this.eventController.isValidColor(this.color);\n    return this.isValidColor;\n  }\n\n  /**\n   * Sets up global event listeners (called by dropdown controller)\n   */\n  setupEventListeners(): void {\n    if (this.closeOnOutsideClick || this.closeOnEscape) {\n      this.eventController.setupEventListeners();\n    }\n  }\n\n  /**\n   * Removes global event listeners (called by dropdown controller)\n   */\n  removeEventListeners(): void {\n    this.eventController.removeEventListeners();\n  }\n\n  /**\n   * Handles trigger click to toggle dropdown\n   */\n  private handleTriggerClick = (event: Event): void => {\n    this.eventController.handleTriggerClick(event);\n  };\n\n  /**\n   * Handles color selection from hex-color-picker or default colors\n   */\n  private handleColorChanged = (event: CustomEvent): void => {\n    const newColor = event.detail.value;\n    this.eventController.handleColorChange(newColor);\n    \n    if (this.closeOnSelect) {\n      this.dropdownController.close();\n    }\n  };\n\n  /**\n   * Handles input change from text input\n   */\n  private handleInputChange = (event: CustomEvent): void => {\n    this.eventController.handleInputChange(event);\n  };\n\n  /**\n   * Main render method\n   */\n  override render() {\n    const containerClasses = {\n      'color-picker-container': true,\n      'color-picker-container--disabled': this.disabled,\n      'color-picker-container--open': this.show,\n      [`color-picker-container--${this.size}`]: true,\n    };\n\n    return html`\n      <div class=\"${classMap(containerClasses)}\" data-theme=\"${this.currentTheme}\">\n        ${this.renderLabel()}\n        \n        <nr-colorholder-box\n          class=\"color-holder\"\n          color=\"${this.color}\"\n          .size=${this.size}\n          ?disabled=\"${this.disabled}\"\n          @click=${this.disabled ? nothing : this.handleTriggerClick}\n          role=\"button\"\n          aria-label=\"Select color\"\n          aria-expanded=\"${this.show}\"\n          aria-haspopup=\"dialog\"\n          tabindex=\"${this.disabled ? -1 : 0}\"\n        ></nr-colorholder-box>\n        \n        ${this.renderDropdown()}\n        ${this.renderHelperText()}\n      </div>\n    `;\n  }\n\n  /**\n   * Renders the label if provided\n   */\n  private renderLabel() {\n    if (!this.label) return nothing;\n    \n    return html`\n      <label class=\"color-picker-label\">\n        ${this.label}\n      </label>\n    `;\n  }\n\n  /**\n   * Renders the dropdown panel with color picker\n   */\n  private renderDropdown() {\n    if (!this.show) return nothing;\n\n    return html`\n      <div \n        class=\"dropdown-container\"\n        role=\"dialog\"\n        aria-label=\"Color picker\"\n      >\n        ${this.renderDefaultColorSets()}\n        ${this.renderColorPicker()}\n        ${this.renderColorInput()}\n      </div>\n    `;\n  }\n\n  /**\n   * Renders default color sets if provided\n   */\n  private renderDefaultColorSets() {\n    if (!this.defaultColorSets || this.defaultColorSets.length === 0) {\n      return nothing;\n    }\n\n    return html`\n      <nr-default-color-sets \n        .defaultColorSets=${this.defaultColorSets} \n        @color-click=\"${this.handleColorChanged}\"\n        aria-label=\"Preset colors\">\n      </nr-default-color-sets>\n    `;\n  }\n\n  /**\n   * Renders the hex color picker\n   */\n  private renderColorPicker() {\n    return html`\n      <hex-color-picker\n        color=\"${this.color}\"\n        @color-changed=\"${this.handleColorChanged}\"\n        aria-label=\"Color gradient picker\">\n      </hex-color-picker>\n    `;\n  }\n\n  /**\n   * Renders the color input field\n   */\n  private renderColorInput() {\n    if (!this.showInput) return nothing;\n\n    return html`\n      <nr-input \n        type=\"text\" \n        .value=\"${this.color}\" \n        placeholder=\"${this.inputPlaceholder}\"\n        @nr-input=\"${this.handleInputChange}\" \n        ?withCopy=${this.showCopyButton} \n        .state=\"${!this.isValidColor ? INPUT_STATE.Error : INPUT_STATE.Default}\"\n        aria-label=\"Color value input\"\n        aria-invalid=\"${!this.isValidColor}\">\n      </nr-input>\n    `;\n  }\n\n  /**\n   * Renders helper text if provided\n   */\n  private renderHelperText() {\n    if (!this.helperText) return nothing;\n    \n    return html`\n      <div class=\"color-picker-helper-text\">\n        ${this.helperText}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"color-picker.component.js","sourceRoot":"","sources":["../../../../src/components/colorpicker/color-picker.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { INPUT_STATE } from '../input/input.types.js';\n\n// Import child components\nimport './color-holder.component.js';\nimport './default-color-sets.component.js';\n\n// Import styles and types\nimport styles from './color-picker.style.js';\nimport {\n  ColorPickerSize,\n  ColorPickerTrigger,\n  ColorPickerPlacement,\n  ColorPickerAnimation,\n  ColorFormat\n} from './color-picker.types.js';\n\n// Import controllers\nimport {\n  ColorPickerDropdownController,\n  ColorPickerEventController,\n} from './controllers/index.js';\n\n// Import interfaces\nimport type { ColorPickerHost } from './interfaces/index.js';\n\n/**\n * Advanced color picker component with dropdown positioning, validation, and accessibility.\n * \n * Supports multiple color formats, default color sets, custom triggers, keyboard navigation,\n * and various display configurations.\n * \n * @example\n * ```html\n * <!-- Basic color picker -->\n * <nr-color-picker color=\"#3498db\"></nr-color-picker>\n * \n * <!-- With default colors -->\n * <nr-color-picker \n *   color=\"#3498db\"\n *   .defaultColorSets=\"${['#3498db', '#e74c3c', '#2ecc71']}\">\n * </nr-color-picker>\n * \n * <!-- With custom configuration -->\n * <nr-color-picker\n *   color=\"#3498db\"\n *   trigger=\"click\"\n *   placement=\"top\"\n *   size=\"large\"\n *   show-input=\"true\"\n *   show-copy-button=\"true\">\n * </nr-color-picker>\n * \n * <!-- Disabled -->\n * <nr-color-picker color=\"#3498db\" disabled></nr-color-picker>\n * ```\n * \n * @fires hy-color-change - Color value changed\n * @fires nr-colorpicker-open - Dropdown opened\n * @fires nr-colorpicker-close - Dropdown closed\n * @fires color-changed - Legacy event for backwards compatibility\n * \n * @slot - Default slot for custom content\n * \n * @cssproperty --colorpicker-trigger-size - Size of the color trigger box\n * @cssproperty --colorpicker-dropdown-width - Width of the dropdown panel\n * @cssproperty --colorpicker-dropdown-background - Background color of dropdown\n * @cssproperty --colorpicker-dropdown-shadow - Shadow of dropdown panel\n * @cssproperty --colorpicker-dropdown-border-radius - Border radius of dropdown\n */\n@customElement('nr-color-picker')\nexport class ColorPicker extends NuralyUIBaseMixin(LitElement) implements ColorPickerHost {\n  static override styles = styles;\n\n  override requiredComponents = ['nr-input', 'nr-icon'];\n\n  /** Current color value */\n  @property({ type: String }) \n  color = '#3498db';\n\n  /** Controls dropdown visibility */\n  @property({ type: Boolean, reflect: true }) \n  show = false;\n\n  /** Array of preset colors to display */\n  @property({ type: Array, attribute: 'default-color-sets' }) \n  defaultColorSets: string[] = [];\n\n  /** Disables the color picker */\n  @property({ type: Boolean, reflect: true }) \n  disabled = false;\n\n  /** Color picker size (small, default, large) */\n  @property({ type: String, reflect: true }) \n  size: ColorPickerSize = ColorPickerSize.Default;\n\n  /** Trigger mode for opening dropdown */\n  @property({ type: String, reflect: true }) \n  trigger: ColorPickerTrigger = ColorPickerTrigger.Click;\n\n  /** Dropdown placement */\n  @property({ type: String, reflect: true }) \n  placement: ColorPickerPlacement = ColorPickerPlacement.Auto;\n\n  /** Animation style for dropdown */\n  @property({ type: String, reflect: true }) \n  animation: ColorPickerAnimation = ColorPickerAnimation.Fade;\n\n  /** Close dropdown when a color is selected */\n  @property({ type: Boolean, attribute: 'close-on-select' }) \n  closeOnSelect = false;\n\n  /** Close dropdown on outside click */\n  @property({ type: Boolean, attribute: 'close-on-outside-click' }) \n  closeOnOutsideClick = true;\n\n  /** Close dropdown on escape key */\n  @property({ type: Boolean, attribute: 'close-on-escape' }) \n  closeOnEscape = true;\n\n  /** Show color input field */\n  @property({ type: Boolean, attribute: 'show-input' }) \n  showInput = true;\n\n  /** Show copy button on input */\n  @property({ type: Boolean, attribute: 'show-copy-button' }) \n  showCopyButton = true;\n\n  /** Color format (hex, rgb, rgba, hsl, hsla) */\n  @property({ type: String, reflect: true }) \n  format: ColorFormat = ColorFormat.Hex;\n\n  /** Placeholder text for color input */\n  @property({ type: String, attribute: 'input-placeholder' }) \n  inputPlaceholder = 'Enter color';\n\n  /** Label text */\n  @property({ type: String }) \n  label = '';\n\n  /** Helper text */\n  @property({ type: String, attribute: 'helper-text' }) \n  helperText = '';\n\n  /** Validation state for color value */\n  @state() \n  private isValidColor = true;\n\n  /** Manages dropdown visibility and positioning */\n  private dropdownController = new ColorPickerDropdownController(this);\n\n  /** Handles all event management */\n  private eventController = new ColorPickerEventController(this);\n\n  constructor() {\n    super();\n    // Dynamically import vanilla-colorful for color picker UI\n    if (typeof window !== 'undefined') {\n      import('vanilla-colorful');\n    }\n  }\n\n  /**\n   * Component connected to DOM - initialize base functionality\n   */\n  override connectedCallback(): void {\n    super.connectedCallback();\n  }\n\n  /**\n   * Component disconnected from DOM - cleanup event listeners\n   */\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n\n  /**\n   * Called after component updates\n   */\n  override updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n    \n    if (changedProperties.has('color')) {\n      this.validateColor();\n    }\n  }\n\n  // === Public API Methods ===\n\n  /**\n   * Opens the color picker dropdown\n   */\n  open(): void {\n    this.dropdownController.open();\n  }\n\n  /**\n   * Closes the color picker dropdown\n   */\n  close(): void {\n    this.dropdownController.close();\n  }\n\n  /**\n   * Toggles the color picker dropdown\n   */\n  toggle(): void {\n    this.dropdownController.toggle();\n  }\n\n  /**\n   * Validates the current color value\n   */\n  validateColor(): boolean {\n    this.isValidColor = this.eventController.isValidColor(this.color);\n    return this.isValidColor;\n  }\n\n  /**\n   * Sets up global event listeners (called by dropdown controller)\n   */\n  setupEventListeners(): void {\n    if (this.closeOnOutsideClick || this.closeOnEscape) {\n      this.eventController.setupEventListeners();\n    }\n  }\n\n  /**\n   * Removes global event listeners (called by dropdown controller)\n   */\n  removeEventListeners(): void {\n    this.eventController.removeEventListeners();\n  }\n\n  /**\n   * Handles trigger click to toggle dropdown\n   */\n  private handleTriggerClick = (event: Event): void => {\n    this.eventController.handleTriggerClick(event);\n  };\n\n  /**\n   * Handles color selection from hex-color-picker or default colors\n   */\n  private handleColorChanged = (event: CustomEvent): void => {\n    const newColor = event.detail.value;\n    this.eventController.handleColorChange(newColor);\n    \n    if (this.closeOnSelect) {\n      this.dropdownController.close();\n    }\n  };\n\n  /**\n   * Handles input change from text input\n   */\n  private handleInputChange = (event: CustomEvent): void => {\n    this.eventController.handleInputChange(event);\n  };\n\n  /**\n   * Main render method\n   */\n  override render() {\n    const containerClasses = {\n      'color-picker-container': true,\n      'color-picker-container--disabled': this.disabled,\n      'color-picker-container--open': this.show,\n      [`color-picker-container--${this.size}`]: true,\n    };\n\n    return html`\n      <div class=\"${classMap(containerClasses)}\" data-theme=\"${this.currentTheme}\">\n        ${this.renderLabel()}\n        \n        <nr-colorholder-box\n          class=\"color-holder\"\n          color=\"${this.color}\"\n          .size=${this.size}\n          ?disabled=\"${this.disabled}\"\n          @click=${this.disabled ? nothing : this.handleTriggerClick}\n          role=\"button\"\n          aria-label=\"Select color\"\n          aria-expanded=\"${this.show}\"\n          aria-haspopup=\"dialog\"\n          tabindex=\"${this.disabled ? -1 : 0}\"\n        ></nr-colorholder-box>\n        \n        ${this.renderDropdown()}\n        ${this.renderHelperText()}\n      </div>\n    `;\n  }\n\n  /**\n   * Renders the label if provided\n   */\n  private renderLabel() {\n    if (!this.label) return nothing;\n    \n    return html`\n      <label class=\"color-picker-label\">\n        ${this.label}\n      </label>\n    `;\n  }\n\n  /**\n   * Renders the dropdown panel with color picker\n   */\n  private renderDropdown() {\n    if (!this.show) return nothing;\n\n    return html`\n      <div \n        class=\"dropdown-container\"\n        role=\"dialog\"\n        aria-label=\"Color picker\"\n      >\n        ${this.renderDefaultColorSets()}\n        ${this.renderColorPicker()}\n        ${this.renderColorInput()}\n      </div>\n    `;\n  }\n\n  /**\n   * Renders default color sets if provided\n   */\n  private renderDefaultColorSets() {\n    if (!this.defaultColorSets || this.defaultColorSets.length === 0) {\n      return nothing;\n    }\n\n    return html`\n      <nr-default-color-sets \n        .defaultColorSets=${this.defaultColorSets} \n        @color-click=\"${this.handleColorChanged}\"\n        aria-label=\"Preset colors\">\n      </nr-default-color-sets>\n    `;\n  }\n\n  /**\n   * Renders the hex color picker\n   */\n  private renderColorPicker() {\n    return html`\n      <hex-color-picker\n        color=\"${this.color}\"\n        @color-changed=\"${this.handleColorChanged}\"\n        aria-label=\"Color gradient picker\">\n      </hex-color-picker>\n    `;\n  }\n\n  /**\n   * Renders the color input field\n   */\n  private renderColorInput() {\n    if (!this.showInput) return nothing;\n\n    return html`\n      <nr-input \n        type=\"text\" \n        .value=\"${this.color}\" \n        placeholder=\"${this.inputPlaceholder}\"\n        @nr-input=\"${this.handleInputChange}\" \n        ?withCopy=${this.showCopyButton} \n        .state=\"${!this.isValidColor ? INPUT_STATE.Error : INPUT_STATE.Default}\"\n        aria-label=\"Color value input\"\n        aria-invalid=\"${!this.isValidColor}\">\n      </nr-input>\n    `;\n  }\n\n  /**\n   * Renders helper text if provided\n   */\n  private renderHelperText() {\n    if (!this.helperText) return nothing;\n    \n    return html`\n      <div class=\"color-picker-helper-text\">\n        ${this.helperText}\n      </div>\n    `;\n  }\n}\n"]}

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,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"]}
+{"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.js.map

@@ -1 +1 @@
-{"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"]}
+{"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

@@ -40,6 +40,6 @@ export declare class DefaultColorSets extends LitElement {
      * Validates if a color string is valid CSS color
      */
     private isValidColor;
-    render(): typeof nothing | import("lit").TemplateResult<1>;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
 }
 //# sourceMappingURL=default-color-sets.component.d.ts.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;;;;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"]}
+{"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.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,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"]}
+{"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/index.js.map

@@ -1 +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';"]}
+{"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

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/colorpicker",
-    "version": "0.0.8",
+    "version": "0.0.10",
     "description": "",
     "main": "index.js",
     "type": "module",

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: 'nr-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"]}