@nuraly/lumenui 0.1.0

package/dist/src/components/colorpicker/bundle.js

@@ -0,0 +1,242 @@
+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{renderLabel as h}from"@nuralyui/common/utils";import{styleMap as c}from"lit/directives/style-map.js";import{map as d}from"lit/directives/map.js";import{BaseComponentController as u}from"@nuralyui/common/controllers";const p=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 b=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 v=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="${c(e)}"
+        role="img"
+        aria-label="Color swatch: ${this.color}"
+        title="${this.color}"
+      ></div>
+    `}};v.styles=p,b([i({type:String})],v.prototype,"color",void 0),b([i({type:String,reflect:!0})],v.prototype,"size",void 0),b([i({type:Boolean,reflect:!0})],v.prototype,"disabled",void 0),b([i({type:Boolean,attribute:"show-transparency-grid"})],v.prototype,"showTransparencyGrid",void 0),b([i({type:Number,attribute:"border-width"})],v.prototype,"borderWidth",void 0),b([i({type:Boolean,attribute:"show-border"})],v.prototype,"showBorder",void 0),v=b([s("nr-colorholder-box")],v);const m=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 f=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 y=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}"
+      >
+        ${d(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}};y.styles=m,f([i({type:Array,attribute:"default-color-sets"})],y.prototype,"defaultColorSets",void 0),f([i({type:String,reflect:!0})],y.prototype,"size",void 0),f([i({type:Number,attribute:"columns"})],y.prototype,"columns",void 0),y=f([s("nr-default-color-sets")],y);var x=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 g extends u{findElement(t){var e;return(null===(e=this._host.shadowRoot)||void 0===e?void 0:e.querySelector(t))||null}}class w extends g{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 k extends g{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 $=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 C=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 w(this),this.eventController=new k(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 tt})}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 h(this.label,!1,{cssClass:"color-picker-label"})}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}};C.styles=x,$([i({type:String})],C.prototype,"color",void 0),$([i({type:Boolean,reflect:!0})],C.prototype,"show",void 0),$([i({type:Array,attribute:"default-color-sets"})],C.prototype,"defaultColorSets",void 0),$([i({type:Boolean,reflect:!0})],C.prototype,"disabled",void 0),$([i({type:String,reflect:!0})],C.prototype,"size",void 0),$([i({type:String,reflect:!0})],C.prototype,"trigger",void 0),$([i({type:String,reflect:!0})],C.prototype,"placement",void 0),$([i({type:String,reflect:!0})],C.prototype,"animation",void 0),$([i({type:Boolean,attribute:"close-on-select"})],C.prototype,"closeOnSelect",void 0),$([i({type:Boolean,attribute:"close-on-outside-click"})],C.prototype,"closeOnOutsideClick",void 0),$([i({type:Boolean,attribute:"close-on-escape"})],C.prototype,"closeOnEscape",void 0),$([i({type:Boolean,attribute:"show-input"})],C.prototype,"showInput",void 0),$([i({type:Boolean,attribute:"show-copy-button"})],C.prototype,"showCopyButton",void 0),$([i({type:String,reflect:!0})],C.prototype,"format",void 0),$([i({type:String,attribute:"input-placeholder"})],C.prototype,"inputPlaceholder",void 0),$([i({type:String})],C.prototype,"label",void 0),$([i({type:String,attribute:"helper-text"})],C.prototype,"helperText",void 0),$([n()],C.prototype,"isValidColor",void 0),C=$([s("nr-color-picker")],C);const S=(t,e=0,o=1)=>t>o?o:t<e?e:t,E=(t,e=0,o=Math.pow(10,e))=>Math.round(o*t)/o,z=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?E(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?E(parseInt(t.substring(6,8),16)/255,2):1}),O=t=>{const{h:e,s:o,l:r}=(({h:t,s:e,v:o,a:r})=>{const i=(200-e)*o/100;return{h:E(t),s:E(i>0&&i<200?e*o/100/(i<=100?i:200-i)*100:0),l:E(i/2),a:E(r,2)}})(t);return`hsl(${e}, ${o}%, ${r}%)`},j=({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:E(255*[o,n,s,s,l,o][a]),g:E(255*[l,o,o,n,s,s][a]),b:E(255*[s,s,l,o,o,n][a]),a:E(r,2)}},B=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?B(E(255*r)):"";return"#"+B(t)+B(e)+B(o)+i},I=({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:E(60*(n<0?n+6:n)),s:E(i?s/i*100:0),v:E(i/255*100),a:r}},M=(t,e)=>{if(t===e)return!0;for(const o in t)if(t[o]!==e[o])return!1;return!0},A={},L=t=>{let e=A[t];return e||(e=document.createElement("template"),e.innerHTML=t,A[t]=e),e},T=(t,e,o)=>{t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:o}))};let H=!1;const V=t=>"touches"in t,F=(t,e)=>{const o=V(e)?e.touches[0]:e,r=t.el.getBoundingClientRect();T(t.el,"move",t.getMove({x:S((o.pageX-(r.left+window.pageXOffset))/r.width),y:S((o.pageY-(r.top+window.pageYOffset))/r.height)}))};class _{constructor(t,e,o,r){const i=L(`<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(H?"touchmove":"mousemove",this),e(H?"touchend":"mouseup",this)}handleEvent(t){switch(t.type){case"mousedown":case"touchstart":if(t.preventDefault(),!(t=>!(H&&!V(t)||(H||(H=V(t)),0)))(t)||!H&&0!=t.button)return;this.el.focus(),F(this,t),this.dragging=!0;break;case"mousemove":case"touchmove":t.preventDefault(),F(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(),T(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 _{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:O({h:t,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuenow",`${E(t)}`)}getMove(t,e){return{h:e?S(this.h+360*t.x,0,360):360*t.x}}}class D extends _{constructor(t){super(t,"saturation",'aria-label="Color"',!0)}update(t){this.hsva=t,this.style([{top:100-t.v+"%",left:`${t.s}%`,color:O(t)},{"background-color":O({h:t.h,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuetext",`Saturation ${E(t.s)}%, Brightness ${E(t.v)}%`)}getMove(t,e){return{s:e?S(this.hsva.s+100*t.x,0,100):100*t.x,v:e?S(this.hsva.v-100*t.y,0,100):Math.round(100-100*t.y)}}}const N=Symbol("same"),W=Symbol("color"),G=Symbol("hsva"),K=Symbol("update"),R=Symbol("parts"),J=Symbol("css"),Q=Symbol("sliders");class U extends HTMLElement{static get observedAttributes(){return["color"]}get[J](){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[Q](){return[D,q]}get color(){return this[W]}set color(t){if(!this[N](t)){const e=this.colorModel.toHsva(t);this[K](e),this[W]=t}}constructor(){super();const t=L(`<style>${this[J].join("")}</style>`),e=this.attachShadow({mode:"open"});e.appendChild(t.content.cloneNode(!0)),e.addEventListener("move",this),this[R]=this[Q].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[N](r)||(this.color=r)}handleEvent(t){const e=this[G],o={...e,...t.detail};let r;this[K](o),M(o,e)||this[N](r=this.colorModel.fromHsva(o))||(this[W]=r,T(this,"color-changed",{value:r}))}[N](t){return this.color&&this.colorModel.equal(t,this.color)}[K](t){this[G]=t,this[R].forEach(e=>e.update(t))}}const X={defaultColor:"#000",toHsva:t=>I(z(t)),fromHsva:({h:t,s:e,v:o})=>P(j({h:t,s:e,v:o,a:1})),equal:(t,e)=>t.toLowerCase()===e.toLowerCase()||M(z(t),z(e)),fromAttr:t=>t};class Y extends U{get colorModel(){return X}}class Z extends Y{}customElements.define("hex-color-picker",Z);var tt=Object.freeze({__proto__:null,HexColorPicker:Z});export{v as ColorHolderBox,C as ColorPicker};

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

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

package/dist/src/components/colorpicker/color-holder.component.js

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

package/dist/src/components/colorpicker/color-holder.style.d.ts

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

package/dist/src/components/colorpicker/color-holder.style.js

@@ -0,0 +1,45 @@
+import { css } from 'lit';
+/**
+ * Color Holder component styles
+ * Using shared CSS variables from /src/shared/themes/
+ */
+const colorHolderStyles = css `
+  :host {
+    display: inline-block;
+    cursor: pointer;
+    
+    /* Ensure clean state transitions */
+    * {
+      transition: all var(--nuraly-transition-fast, 0.15s) ease;
+    }
+  }
+
+  .color-holder-container {
+    width: var(--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));
+  }
+`;
+export const styles = colorHolderStyles;
+//# sourceMappingURL=color-holder.style.js.map

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

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