npm - @nuralyui/colorpicker - Versions diffs - 0.0.5 → 0.0.6 - Mend

@nuralyui/colorpicker 0.0.5 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/bundle.js +12 -12
package/color-holder.component.d.ts +3 -3
package/color-holder.component.js +4 -4
package/color-holder.component.js.map +1 -1
package/color-picker.component.d.ts +9 -9
package/color-picker.component.js +14 -14
package/color-picker.component.js.map +1 -1
package/color-picker.style.d.ts +1 -1
package/color-picker.style.js +1 -1
package/color-picker.style.js.map +1 -1
package/default-color-sets.component.d.ts +2 -2
package/default-color-sets.component.js +5 -5
package/default-color-sets.component.js.map +1 -1
package/package.json +1 -1
package/react.js +1 -1
package/react.js.map +1 -1

package/bundle.js CHANGED Viewed

@@ -321,7 +321,7 @@ const _c=1,Yc=c=>(...a)=>({_$litDirective$:c,values:a});class Kc{constructor(c){
    * Uses theme CSS custom properties for comprehensive border and layout control
    */
   #input-container {
-    /* Default Ant Design outlined style */
+    /* Default outlined style */
     border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, #d9d9d9);
     border-radius: var(--nuraly-border-radius-input, 6px);
@@ -1052,7 +1052,7 @@ const _c=1,Yc=c=>(...a)=>({_$litDirective$:c,values:a});class Kc{constructor(c){
     /* Size properties with fallbacks */
     --nuraly-icon-size-fallback: 18px;
-    --nuraly-icon-size-small-fallback: 16px;
+    --nuraly-icon-size-small-fallback: 14px;
     --nuraly-icon-size-medium-fallback: 20px;
     --nuraly-icon-size-large-fallback: 24px;
     --nuraly-icon-size-xlarge-fallback: 32px;
@@ -1418,7 +1418,7 @@ var hN=function(c,a,e,i){for(var s,n=arguments.length,r=n<3?a:null===i?i=Object.
         aria-label="Color swatch: ${this.color}"
         title="${this.color}"
       ></div>
-    `}};HN.styles=zN,hN([Wc({type:String})],HN.prototype,"color",void 0),hN([Wc({type:String,reflect:!0})],HN.prototype,"size",void 0),hN([Wc({type:Boolean,reflect:!0})],HN.prototype,"disabled",void 0),hN([Wc({type:Boolean,attribute:"show-transparency-grid"})],HN.prototype,"showTransparencyGrid",void 0),hN([Wc({type:Number,attribute:"border-width"})],HN.prototype,"borderWidth",void 0),hN([Wc({type:Boolean,attribute:"show-border"})],HN.prototype,"showBorder",void 0),HN=hN([Uc("hy-colorholder-box")],HN);const VN=n`
+    `}};HN.styles=zN,hN([Wc({type:String})],HN.prototype,"color",void 0),hN([Wc({type:String,reflect:!0})],HN.prototype,"size",void 0),hN([Wc({type:Boolean,reflect:!0})],HN.prototype,"disabled",void 0),hN([Wc({type:Boolean,attribute:"show-transparency-grid"})],HN.prototype,"showTransparencyGrid",void 0),hN([Wc({type:Number,attribute:"border-width"})],HN.prototype,"borderWidth",void 0),hN([Wc({type:Boolean,attribute:"show-border"})],HN.prototype,"showBorder",void 0),HN=hN([Uc("nr-colorholder-box")],HN);const VN=n`
   .default-color-sets-container {
     display: flex;
     flex-wrap: wrap;
@@ -1464,7 +1464,7 @@ var uN=function(c,a,e,i){for(var s,n=arguments.length,r=n<3?a:null===i?i=Object.
  * SPDX-License-Identifier: BSD-3-Clause
  */
 function*(c,a){if(void 0!==c){let e=0;for(const i of c)yield a(i,e++)}}(this.defaultColorSets,(c=>Mc`
-            <hy-colorholder-box
+            <nr-colorholder-box
               color="${c}"
               .size=${this.size}
               class="color-set-container"
@@ -1473,10 +1473,10 @@ function*(c,a){if(void 0!==c){let e=0;for(const i of c)yield a(i,e++)}}(this.def
               aria-label="Color ${c}"
               @click=${a=>this.handleColorClick(c,a)}
               @keydown=${a=>{"Enter"!==a.key&&" "!==a.key||(a.preventDefault(),this.handleColorClick(c,a))}}
-            ></hy-colorholder-box>
+            ></nr-colorholder-box>
           `))}
       </div>
-    `:Cc}};pN.styles=VN,uN([Wc({type:Array,attribute:"default-color-sets"})],pN.prototype,"defaultColorSets",void 0),uN([Wc({type:String,reflect:!0})],pN.prototype,"size",void 0),uN([Wc({type:Number,attribute:"columns"})],pN.prototype,"columns",void 0),pN=uN([Uc("hy-default-color-sets")],pN);var dN=n`
+    `:Cc}};pN.styles=VN,uN([Wc({type:Array,attribute:"default-color-sets"})],pN.prototype,"defaultColorSets",void 0),uN([Wc({type:String,reflect:!0})],pN.prototype,"size",void 0),uN([Wc({type:Number,attribute:"columns"})],pN.prototype,"columns",void 0),pN=uN([Uc("nr-default-color-sets")],pN);var dN=n`
   :host {
     display: inline-block;
     vertical-align: middle;
@@ -1552,7 +1552,7 @@ function*(c,a){if(void 0!==c){let e=0;for(const i of c)yield a(i,e++)}}(this.def
     opacity: 1;
     visibility: visible;
   }
-`;class MN{constructor(c){this.host=c,c.addController(this)}hostConnected(){}hostDisconnected(){}hostUpdated(){}dispatchEvent(c){this.host.dispatchEvent(c)}requestUpdate(){this.host.requestUpdate()}handleError(c,a){console.error(`[ColorPicker ${a}]:`,c)}findElement(c){var a;return(null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(c))||null}}class vN extends MN{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 c,a;null===(a=(c=this.host).setupEventListeners)||void 0===a||a.call(c)}),50),this.dispatchEvent(new CustomEvent("hy-colorpicker-open",{bubbles:!0,composed:!0})))}catch(c){this.handleError(c,"open")}}close(){var c,a;try{this._isOpen&&(this._isOpen=!1,this.host.show=!1,this.resetPosition(),this.requestUpdate(),this.host&&"function"==typeof this.host.removeEventListeners&&(null===(a=(c=this.host).removeEventListeners)||void 0===a||a.call(c)),this.dispatchEvent(new CustomEvent("hy-colorpicker-close",{bubbles:!0,composed:!0})))}catch(c){this.handleError(c,"close")}}toggle(){this._isOpen?this.close():this.open()}findElements(){this._dropdownElement=this.findElement(".dropdown-container"),this._triggerElement=this.findElement(".color-holder")}calculatePosition(){var c,a;try{if(this._dropdownElement&&this._triggerElement||this.findElements(),!this._dropdownElement||!this._triggerElement)return;const e=this._triggerElement.getBoundingClientRect(),i=this._dropdownElement.getBoundingClientRect(),s=(null===(c=window.visualViewport)||void 0===c?void 0:c.height)||window.innerHeight,n=(null===(a=window.visualViewport)||void 0===a?void 0:a.width)||window.innerWidth,r=s-e.bottom,l=e.top,o=n-e.left;let t,f,m="bottom";r>=i.height||r>l?(t=e.bottom,m="bottom"):(t=e.top-i.height,m="top"),f=o>=i.width?e.left:Math.max(0,n-i.width),this._position={top:t,left:f,width:Math.max(e.width,i.width),placement:m},this.applyPosition()}catch(c){this.handleError(c,"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(c){this.handleError(c,"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(c){this.handleError(c,"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 CN extends MN{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(c){if(c.stopPropagation(),!this.host.disabled){const c=this.host.dropdownController;c&&c.toggle()}}handleOutsideClick(c){if(!c.composedPath().includes(this.host)){const c=this.host.dropdownController;c&&c.close()}}handleEscapeKey(c){if("Escape"===c.key&&this.host.show){c.preventDefault();const a=this.host.dropdownController;a&&a.close()}}handleColorChange(c){if(this.isValidColor(c)&&this.host.color!==c){const a=this.host.color;this.host.color=c,this.dispatchColorChangeEvent(c,a),this.requestUpdate()}}handleInputChange(c){const a=c.detail.value;a&&a!==this.host.color&&this.handleColorChange(a)}dispatchColorChangeEvent(c,a){const e={value:c,previousValue:a,isValid:this.isValidColor(c)};this.dispatchEvent(new CustomEvent("hy-color-change",{bubbles:!0,composed:!0,detail:e})),this.dispatchEvent(new CustomEvent("color-changed",{bubbles:!0,composed:!0,detail:{value:c}}))}isValidColor(c){try{return CSS.supports("color",c)}catch(c){return!1}}}
+`;class MN{constructor(c){this.host=c,c.addController(this)}hostConnected(){}hostDisconnected(){}hostUpdated(){}dispatchEvent(c){this.host.dispatchEvent(c)}requestUpdate(){this.host.requestUpdate()}handleError(c,a){console.error(`[ColorPicker ${a}]:`,c)}findElement(c){var a;return(null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(c))||null}}class vN extends MN{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 c,a;null===(a=(c=this.host).setupEventListeners)||void 0===a||a.call(c)}),50),this.dispatchEvent(new CustomEvent("nr-colorpicker-open",{bubbles:!0,composed:!0})))}catch(c){this.handleError(c,"open")}}close(){var c,a;try{this._isOpen&&(this._isOpen=!1,this.host.show=!1,this.resetPosition(),this.requestUpdate(),this.host&&"function"==typeof this.host.removeEventListeners&&(null===(a=(c=this.host).removeEventListeners)||void 0===a||a.call(c)),this.dispatchEvent(new CustomEvent("nr-colorpicker-close",{bubbles:!0,composed:!0})))}catch(c){this.handleError(c,"close")}}toggle(){this._isOpen?this.close():this.open()}findElements(){this._dropdownElement=this.findElement(".dropdown-container"),this._triggerElement=this.findElement(".color-holder")}calculatePosition(){var c,a;try{if(this._dropdownElement&&this._triggerElement||this.findElements(),!this._dropdownElement||!this._triggerElement)return;const e=this._triggerElement.getBoundingClientRect(),i=this._dropdownElement.getBoundingClientRect(),s=(null===(c=window.visualViewport)||void 0===c?void 0:c.height)||window.innerHeight,n=(null===(a=window.visualViewport)||void 0===a?void 0:a.width)||window.innerWidth,r=s-e.bottom,l=e.top,o=n-e.left;let t,f,m="bottom";r>=i.height||r>l?(t=e.bottom,m="bottom"):(t=e.top-i.height,m="top"),f=o>=i.width?e.left:Math.max(0,n-i.width),this._position={top:t,left:f,width:Math.max(e.width,i.width),placement:m},this.applyPosition()}catch(c){this.handleError(c,"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(c){this.handleError(c,"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(c){this.handleError(c,"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 CN extends MN{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(c){if(c.stopPropagation(),!this.host.disabled){const c=this.host.dropdownController;c&&c.toggle()}}handleOutsideClick(c){if(!c.composedPath().includes(this.host)){const c=this.host.dropdownController;c&&c.close()}}handleEscapeKey(c){if("Escape"===c.key&&this.host.show){c.preventDefault();const a=this.host.dropdownController;a&&a.close()}}handleColorChange(c){if(this.isValidColor(c)&&this.host.color!==c){const a=this.host.color;this.host.color=c,this.dispatchColorChangeEvent(c,a),this.requestUpdate()}}handleInputChange(c){const a=c.detail.value;a&&a!==this.host.color&&this.handleColorChange(a)}dispatchColorChangeEvent(c,a){const e={value:c,previousValue:a,isValid:this.isValidColor(c)};this.dispatchEvent(new CustomEvent("hy-color-change",{bubbles:!0,composed:!0,detail:e})),this.dispatchEvent(new CustomEvent("color-changed",{bubbles:!0,composed:!0,detail:{value:c}}))}isValidColor(c){try{return CSS.supports("color",c)}catch(c){return!1}}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
@@ -1561,7 +1561,7 @@ function*(c,a){if(void 0!==c){let e=0;for(const i of c)yield a(i,e++)}}(this.def
       <div class="${Xc(c)}" data-theme="${this.currentTheme}">
         ${this.renderLabel()}
-        <hy-colorholder-box
+        <nr-colorholder-box
           class="color-holder"
           color="${this.color}"
           .size=${this.size}
@@ -1572,7 +1572,7 @@ function*(c,a){if(void 0!==c){let e=0;for(const i of c)yield a(i,e++)}}(this.def
           aria-expanded="${this.show}"
           aria-haspopup="dialog"
           tabindex="${this.disabled?-1:0}"
-        ></hy-colorholder-box>
+        ></nr-colorholder-box>
         ${this.renderDropdown()}
         ${this.renderHelperText()}
@@ -1592,11 +1592,11 @@ function*(c,a){if(void 0!==c){let e=0;for(const i of c)yield a(i,e++)}}(this.def
         ${this.renderColorInput()}
       </div>
     `:Cc}renderDefaultColorSets(){return this.defaultColorSets&&0!==this.defaultColorSets.length?Mc`
-      <hy-default-color-sets
+      <nr-default-color-sets
         .defaultColorSets=${this.defaultColorSets}
         @color-click="${this.handleColorChanged}"
         aria-label="Preset colors">
-      </hy-default-color-sets>
+      </nr-default-color-sets>
     `:Cc}renderColorPicker(){return Mc`
       <hex-color-picker
         color="${this.color}"
@@ -1618,4 +1618,4 @@ function*(c,a){if(void 0!==c){let e=0;for(const i of c)yield a(i,e++)}}(this.def
       <div class="color-picker-helper-text">
         ${this.helperText}
       </div>
-    `:Cc}};gN.styles=dN,LN([Wc({type:String})],gN.prototype,"color",void 0),LN([Wc({type:Boolean,reflect:!0})],gN.prototype,"show",void 0),LN([Wc({type:Array,attribute:"default-color-sets"})],gN.prototype,"defaultColorSets",void 0),LN([Wc({type:Boolean,reflect:!0})],gN.prototype,"disabled",void 0),LN([Wc({type:String,reflect:!0})],gN.prototype,"size",void 0),LN([Wc({type:String,reflect:!0})],gN.prototype,"trigger",void 0),LN([Wc({type:String,reflect:!0})],gN.prototype,"placement",void 0),LN([Wc({type:String,reflect:!0})],gN.prototype,"animation",void 0),LN([Wc({type:Boolean,attribute:"close-on-select"})],gN.prototype,"closeOnSelect",void 0),LN([Wc({type:Boolean,attribute:"close-on-outside-click"})],gN.prototype,"closeOnOutsideClick",void 0),LN([Wc({type:Boolean,attribute:"close-on-escape"})],gN.prototype,"closeOnEscape",void 0),LN([Wc({type:Boolean,attribute:"show-input"})],gN.prototype,"showInput",void 0),LN([Wc({type:Boolean,attribute:"show-copy-button"})],gN.prototype,"showCopyButton",void 0),LN([Wc({type:String,reflect:!0})],gN.prototype,"format",void 0),LN([Wc({type:String,attribute:"input-placeholder"})],gN.prototype,"inputPlaceholder",void 0),LN([Wc({type:String})],gN.prototype,"label",void 0),LN([Wc({type:String,attribute:"helper-text"})],gN.prototype,"helperText",void 0),LN([jc()],gN.prototype,"isValidColor",void 0),gN=LN([Uc("hy-color-picker")],gN);const xN=(c,a=0,e=1)=>c>e?e:c<a?a:c,bN=(c,a=0,e=Math.pow(10,a))=>Math.round(e*c)/e,NN=c=>("#"===c[0]&&(c=c.substring(1)),c.length<6?{r:parseInt(c[0]+c[0],16),g:parseInt(c[1]+c[1],16),b:parseInt(c[2]+c[2],16),a:4===c.length?bN(parseInt(c[3]+c[3],16)/255,2):1}:{r:parseInt(c.substring(0,2),16),g:parseInt(c.substring(2,4),16),b:parseInt(c.substring(4,6),16),a:8===c.length?bN(parseInt(c.substring(6,8),16)/255,2):1}),yN=c=>{const{h:a,s:e,l:i}=(({h:c,s:a,v:e,a:i})=>{const s=(200-a)*e/100;return{h:bN(c),s:bN(s>0&&s<200?a*e/100/(s<=100?s:200-s)*100:0),l:bN(s/2),a:bN(i,2)}})(c);return`hsl(${a}, ${e}%, ${i}%)`},wN=({h:c,s:a,v:e,a:i})=>{c=c/360*6,a/=100,e/=100;const s=Math.floor(c),n=e*(1-a),r=e*(1-(c-s)*a),l=e*(1-(1-c+s)*a),o=s%6;return{r:bN(255*[e,r,n,n,l,e][o]),g:bN(255*[l,e,e,r,n,n][o]),b:bN(255*[n,n,l,e,e,r][o]),a:bN(i,2)}},kN=c=>{const a=c.toString(16);return a.length<2?"0"+a:a},SN=({r:c,g:a,b:e,a:i})=>{const s=i<1?kN(bN(255*i)):"";return"#"+kN(c)+kN(a)+kN(e)+s},AN=({r:c,g:a,b:e,a:i})=>{const s=Math.max(c,a,e),n=s-Math.min(c,a,e),r=n?s===c?(a-e)/n:s===a?2+(e-c)/n:4+(c-a)/n:0;return{h:bN(60*(r<0?r+6:r)),s:bN(s?n/s*100:0),v:bN(s/255*100),a:i}},TN=(c,a)=>{if(c===a)return!0;for(const e in c)if(c[e]!==a[e])return!1;return!0},PN={},BN=c=>{let a=PN[c];return a||(a=document.createElement("template"),a.innerHTML=c,PN[c]=a),a},FN=(c,a,e)=>{c.dispatchEvent(new CustomEvent(a,{bubbles:!0,detail:e}))};let EN=!1;const RN=c=>"touches"in c,DN=(c,a)=>{const e=RN(a)?a.touches[0]:a,i=c.el.getBoundingClientRect();FN(c.el,"move",c.getMove({x:xN((e.pageX-(i.left+window.pageXOffset))/i.width),y:xN((e.pageY-(i.top+window.pageYOffset))/i.height)}))};class qN{constructor(c,a,e,i){const s=BN(`<div role="slider" tabindex="0" part="${a}" ${e}><div part="${a}-pointer"></div></div>`);c.appendChild(s.content.cloneNode(!0));const n=c.querySelector(`[part=${a}]`);n.addEventListener("mousedown",this),n.addEventListener("touchstart",this),n.addEventListener("keydown",this),this.el=n,this.xy=i,this.nodes=[n.firstChild,n]}set dragging(c){const a=c?document.addEventListener:document.removeEventListener;a(EN?"touchmove":"mousemove",this),a(EN?"touchend":"mouseup",this)}handleEvent(c){switch(c.type){case"mousedown":case"touchstart":if(c.preventDefault(),!(c=>!(EN&&!RN(c)||(EN||(EN=RN(c)),0)))(c)||!EN&&0!=c.button)return;this.el.focus(),DN(this,c),this.dragging=!0;break;case"mousemove":case"touchmove":c.preventDefault(),DN(this,c);break;case"mouseup":case"touchend":this.dragging=!1;break;case"keydown":((c,a)=>{const e=a.keyCode;e>40||c.xy&&e<37||e<33||(a.preventDefault(),FN(c.el,"move",c.getMove({x:39===e?.01:37===e?-.01:34===e?.05:33===e?-.05:35===e?1:36===e?-1:0,y:40===e?.01:38===e?-.01:0},!0)))})(this,c)}}style(c){c.forEach(((c,a)=>{for(const e in c)this.nodes[a].style.setProperty(e,c[e])}))}}class $N extends qN{constructor(c){super(c,"hue",'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"',!1)}update({h:c}){this.h=c,this.style([{left:c/360*100+"%",color:yN({h:c,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuenow",`${bN(c)}`)}getMove(c,a){return{h:a?xN(this.h+360*c.x,0,360):360*c.x}}}class UN extends qN{constructor(c){super(c,"saturation",'aria-label="Color"',!0)}update(c){this.hsva=c,this.style([{top:100-c.v+"%",left:`${c.s}%`,color:yN(c)},{"background-color":yN({h:c.h,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuetext",`Saturation ${bN(c.s)}%, Brightness ${bN(c.v)}%`)}getMove(c,a){return{s:a?xN(this.hsva.s+100*c.x,0,100):100*c.x,v:a?xN(this.hsva.v-100*c.y,0,100):Math.round(100-100*c.y)}}}const IN=Symbol("same"),ON=Symbol("color"),WN=Symbol("hsva"),jN=Symbol("update"),GN=Symbol("parts"),_N=Symbol("css"),YN=Symbol("sliders");class KN extends HTMLElement{static get observedAttributes(){return["color"]}get[_N](){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[YN](){return[UN,$N]}get color(){return this[ON]}set color(c){if(!this[IN](c)){const a=this.colorModel.toHsva(c);this[jN](a),this[ON]=c}}constructor(){super();const c=BN(`<style>${this[_N].join("")}</style>`),a=this.attachShadow({mode:"open"});a.appendChild(c.content.cloneNode(!0)),a.addEventListener("move",this),this[GN]=this[YN].map((c=>new c(a)))}connectedCallback(){if(this.hasOwnProperty("color")){const c=this.color;delete this.color,this.color=c}else this.color||(this.color=this.colorModel.defaultColor)}attributeChangedCallback(c,a,e){const i=this.colorModel.fromAttr(e);this[IN](i)||(this.color=i)}handleEvent(c){const a=this[WN],e={...a,...c.detail};let i;this[jN](e),TN(e,a)||this[IN](i=this.colorModel.fromHsva(e))||(this[ON]=i,FN(this,"color-changed",{value:i}))}[IN](c){return this.color&&this.colorModel.equal(c,this.color)}[jN](c){this[WN]=c,this[GN].forEach((a=>a.update(c)))}}const XN={defaultColor:"#000",toHsva:c=>AN(NN(c)),fromHsva:({h:c,s:a,v:e})=>SN(wN({h:c,s:a,v:e,a:1})),equal:(c,a)=>c.toLowerCase()===a.toLowerCase()||TN(NN(c),NN(a)),fromAttr:c=>c};class ZN extends KN{get colorModel(){return XN}}class QN extends ZN{}customElements.define("hex-color-picker",QN);var JN=Object.freeze({__proto__:null,HexColorPicker:QN});export{HN as ColorHolderBox,gN as ColorPicker};
+    `:Cc}};gN.styles=dN,LN([Wc({type:String})],gN.prototype,"color",void 0),LN([Wc({type:Boolean,reflect:!0})],gN.prototype,"show",void 0),LN([Wc({type:Array,attribute:"default-color-sets"})],gN.prototype,"defaultColorSets",void 0),LN([Wc({type:Boolean,reflect:!0})],gN.prototype,"disabled",void 0),LN([Wc({type:String,reflect:!0})],gN.prototype,"size",void 0),LN([Wc({type:String,reflect:!0})],gN.prototype,"trigger",void 0),LN([Wc({type:String,reflect:!0})],gN.prototype,"placement",void 0),LN([Wc({type:String,reflect:!0})],gN.prototype,"animation",void 0),LN([Wc({type:Boolean,attribute:"close-on-select"})],gN.prototype,"closeOnSelect",void 0),LN([Wc({type:Boolean,attribute:"close-on-outside-click"})],gN.prototype,"closeOnOutsideClick",void 0),LN([Wc({type:Boolean,attribute:"close-on-escape"})],gN.prototype,"closeOnEscape",void 0),LN([Wc({type:Boolean,attribute:"show-input"})],gN.prototype,"showInput",void 0),LN([Wc({type:Boolean,attribute:"show-copy-button"})],gN.prototype,"showCopyButton",void 0),LN([Wc({type:String,reflect:!0})],gN.prototype,"format",void 0),LN([Wc({type:String,attribute:"input-placeholder"})],gN.prototype,"inputPlaceholder",void 0),LN([Wc({type:String})],gN.prototype,"label",void 0),LN([Wc({type:String,attribute:"helper-text"})],gN.prototype,"helperText",void 0),LN([jc()],gN.prototype,"isValidColor",void 0),gN=LN([Uc("nr-color-picker")],gN);const xN=(c,a=0,e=1)=>c>e?e:c<a?a:c,bN=(c,a=0,e=Math.pow(10,a))=>Math.round(e*c)/e,NN=c=>("#"===c[0]&&(c=c.substring(1)),c.length<6?{r:parseInt(c[0]+c[0],16),g:parseInt(c[1]+c[1],16),b:parseInt(c[2]+c[2],16),a:4===c.length?bN(parseInt(c[3]+c[3],16)/255,2):1}:{r:parseInt(c.substring(0,2),16),g:parseInt(c.substring(2,4),16),b:parseInt(c.substring(4,6),16),a:8===c.length?bN(parseInt(c.substring(6,8),16)/255,2):1}),yN=c=>{const{h:a,s:e,l:i}=(({h:c,s:a,v:e,a:i})=>{const s=(200-a)*e/100;return{h:bN(c),s:bN(s>0&&s<200?a*e/100/(s<=100?s:200-s)*100:0),l:bN(s/2),a:bN(i,2)}})(c);return`hsl(${a}, ${e}%, ${i}%)`},wN=({h:c,s:a,v:e,a:i})=>{c=c/360*6,a/=100,e/=100;const s=Math.floor(c),n=e*(1-a),r=e*(1-(c-s)*a),l=e*(1-(1-c+s)*a),o=s%6;return{r:bN(255*[e,r,n,n,l,e][o]),g:bN(255*[l,e,e,r,n,n][o]),b:bN(255*[n,n,l,e,e,r][o]),a:bN(i,2)}},kN=c=>{const a=c.toString(16);return a.length<2?"0"+a:a},SN=({r:c,g:a,b:e,a:i})=>{const s=i<1?kN(bN(255*i)):"";return"#"+kN(c)+kN(a)+kN(e)+s},AN=({r:c,g:a,b:e,a:i})=>{const s=Math.max(c,a,e),n=s-Math.min(c,a,e),r=n?s===c?(a-e)/n:s===a?2+(e-c)/n:4+(c-a)/n:0;return{h:bN(60*(r<0?r+6:r)),s:bN(s?n/s*100:0),v:bN(s/255*100),a:i}},TN=(c,a)=>{if(c===a)return!0;for(const e in c)if(c[e]!==a[e])return!1;return!0},PN={},BN=c=>{let a=PN[c];return a||(a=document.createElement("template"),a.innerHTML=c,PN[c]=a),a},FN=(c,a,e)=>{c.dispatchEvent(new CustomEvent(a,{bubbles:!0,detail:e}))};let EN=!1;const RN=c=>"touches"in c,DN=(c,a)=>{const e=RN(a)?a.touches[0]:a,i=c.el.getBoundingClientRect();FN(c.el,"move",c.getMove({x:xN((e.pageX-(i.left+window.pageXOffset))/i.width),y:xN((e.pageY-(i.top+window.pageYOffset))/i.height)}))};class qN{constructor(c,a,e,i){const s=BN(`<div role="slider" tabindex="0" part="${a}" ${e}><div part="${a}-pointer"></div></div>`);c.appendChild(s.content.cloneNode(!0));const n=c.querySelector(`[part=${a}]`);n.addEventListener("mousedown",this),n.addEventListener("touchstart",this),n.addEventListener("keydown",this),this.el=n,this.xy=i,this.nodes=[n.firstChild,n]}set dragging(c){const a=c?document.addEventListener:document.removeEventListener;a(EN?"touchmove":"mousemove",this),a(EN?"touchend":"mouseup",this)}handleEvent(c){switch(c.type){case"mousedown":case"touchstart":if(c.preventDefault(),!(c=>!(EN&&!RN(c)||(EN||(EN=RN(c)),0)))(c)||!EN&&0!=c.button)return;this.el.focus(),DN(this,c),this.dragging=!0;break;case"mousemove":case"touchmove":c.preventDefault(),DN(this,c);break;case"mouseup":case"touchend":this.dragging=!1;break;case"keydown":((c,a)=>{const e=a.keyCode;e>40||c.xy&&e<37||e<33||(a.preventDefault(),FN(c.el,"move",c.getMove({x:39===e?.01:37===e?-.01:34===e?.05:33===e?-.05:35===e?1:36===e?-1:0,y:40===e?.01:38===e?-.01:0},!0)))})(this,c)}}style(c){c.forEach(((c,a)=>{for(const e in c)this.nodes[a].style.setProperty(e,c[e])}))}}class $N extends qN{constructor(c){super(c,"hue",'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"',!1)}update({h:c}){this.h=c,this.style([{left:c/360*100+"%",color:yN({h:c,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuenow",`${bN(c)}`)}getMove(c,a){return{h:a?xN(this.h+360*c.x,0,360):360*c.x}}}class UN extends qN{constructor(c){super(c,"saturation",'aria-label="Color"',!0)}update(c){this.hsva=c,this.style([{top:100-c.v+"%",left:`${c.s}%`,color:yN(c)},{"background-color":yN({h:c.h,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuetext",`Saturation ${bN(c.s)}%, Brightness ${bN(c.v)}%`)}getMove(c,a){return{s:a?xN(this.hsva.s+100*c.x,0,100):100*c.x,v:a?xN(this.hsva.v-100*c.y,0,100):Math.round(100-100*c.y)}}}const IN=Symbol("same"),ON=Symbol("color"),WN=Symbol("hsva"),jN=Symbol("update"),GN=Symbol("parts"),_N=Symbol("css"),YN=Symbol("sliders");class KN extends HTMLElement{static get observedAttributes(){return["color"]}get[_N](){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[YN](){return[UN,$N]}get color(){return this[ON]}set color(c){if(!this[IN](c)){const a=this.colorModel.toHsva(c);this[jN](a),this[ON]=c}}constructor(){super();const c=BN(`<style>${this[_N].join("")}</style>`),a=this.attachShadow({mode:"open"});a.appendChild(c.content.cloneNode(!0)),a.addEventListener("move",this),this[GN]=this[YN].map((c=>new c(a)))}connectedCallback(){if(this.hasOwnProperty("color")){const c=this.color;delete this.color,this.color=c}else this.color||(this.color=this.colorModel.defaultColor)}attributeChangedCallback(c,a,e){const i=this.colorModel.fromAttr(e);this[IN](i)||(this.color=i)}handleEvent(c){const a=this[WN],e={...a,...c.detail};let i;this[jN](e),TN(e,a)||this[IN](i=this.colorModel.fromHsva(e))||(this[ON]=i,FN(this,"color-changed",{value:i}))}[IN](c){return this.color&&this.colorModel.equal(c,this.color)}[jN](c){this[WN]=c,this[GN].forEach((a=>a.update(c)))}}const XN={defaultColor:"#000",toHsva:c=>AN(NN(c)),fromHsva:({h:c,s:a,v:e})=>SN(wN({h:c,s:a,v:e,a:1})),equal:(c,a)=>c.toLowerCase()===a.toLowerCase()||TN(NN(c),NN(a)),fromAttr:c=>c};class ZN extends KN{get colorModel(){return XN}}class QN extends ZN{}customElements.define("hex-color-picker",QN);var JN=Object.freeze({__proto__:null,HexColorPicker:QN});export{HN as ColorHolderBox,gN as ColorPicker};

package/color-holder.component.d.ts CHANGED Viewed

@@ -13,9 +13,9 @@ import { ColorPickerSize } from './color-picker.types.js';
  *
  * @example
  * ```html
- * <hy-colorholder-box color="#3498db"></hy-colorholder-box>
- * <hy-colorholder-box color="rgb(52, 152, 219)" size="large"></hy-colorholder-box>
- * <hy-colorholder-box color="#e74c3c" disabled></hy-colorholder-box>
+ * <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

package/color-holder.component.js CHANGED Viewed

@@ -22,9 +22,9 @@ import { styles } from './color-holder.style.js';
  *
  * @example
  * ```html
- * <hy-colorholder-box color="#3498db"></hy-colorholder-box>
- * <hy-colorholder-box color="rgb(52, 152, 219)" size="large"></hy-colorholder-box>
- * <hy-colorholder-box color="#e74c3c" disabled></hy-colorholder-box>
+ * <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
@@ -110,7 +110,7 @@ __decorate([
     property({ type: Boolean, attribute: 'show-border' })
 ], ColorHolderBox.prototype, "showBorder", void 0);
 ColorHolderBox = __decorate([
-    customElement('hy-colorholder-box')
+    customElement('nr-colorholder-box')
 ], ColorHolderBox);
 export { ColorHolderBox };
 //# sourceMappingURL=color-holder.component.js.map

package/color-holder.component.js.map CHANGED Viewed

	@@ -1 +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 * <hy-colorholder-box color=\"#3498db\"></hy-colorholder-box>\n * <hy-colorholder-box color=\"rgb(52, 152, 219)\" size=\"large\"></hy-colorholder-box>\n * <hy-colorholder-box color=\"#e74c3c\" disabled></hy-colorholder-box>\n * ```\n * \n * @cssproperty --color-holder-size - Size of the color box\n * @cssproperty --color-holder-border - Border style\n * @cssproperty --color-holder-border-radius - Border radius\n * @cssproperty --color-holder-cursor - Cursor style\n /\n@customElement('hy-colorholder-box')\nexport class ColorHolderBox extends LitElement {\n static override styles = styles;\n\n /* The color value to display /\n @property({ type: String })\n color = '#3498db';\n\n /* Size variant (small, default, large) /\n @property({ type: String, reflect: true })\n size: ColorPickerSize = ColorPickerSize.Default;\n\n /* Whether the color holder is disabled /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /* Show a checkered background for transparent colors /\n @property({ type: Boolean, attribute: 'show-transparency-grid' })\n showTransparencyGrid = true;\n\n /* Border width in pixels /\n @property({ type: Number, attribute: 'border-width' })\n borderWidth = 2;\n\n /* Whether to show a border /\n @property({ type: Boolean, attribute: 'show-border' })\n showBorder = true;\n\n /\n Validates if the color is valid CSS color\n /\n private isValidColor(): boolean {\n try {\n return CSS.supports('color', this.color);\n } catch {\n return false;\n }\n }\n\n /\n Checks if the color is transparent or has transparency\n */\n private isTransparent(): boolean {\n return this.color === 'transparent' \|\| \n this.color.toLowerCase().includes('rgba') \|\|\n this.color.toLowerCase().includes('hsla');\n }\n\n override render() {\n const containerClasses = {\n 'color-holder-container': true,\n 'color-holder-container--disabled': this.disabled,\n 'color-holder-container--invalid': !this.isValidColor(),\n 'color-holder-container--transparent': this.isTransparent() && this.showTransparencyGrid,\n [`color-holder-container--${this.size}`]: true,\n };\n\n const containerStyles = {\n backgroundColor: this.isValidColor() ? this.color : '#ffffff',\n borderWidth: this.showBorder ? `${this.borderWidth}px` : '0',\n };\n\n return html`\n <div \n class=\"${classMap(containerClasses)}\" \n style=\"${styleMap(containerStyles)}\"\n role=\"img\"\n aria-label=\"Color swatch: ${this.color}\"\n title=\"${this.color}\"\n ></div>\n `;\n }\n}\n"]}
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"]}

package/color-picker.component.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ 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("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+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.
  *
@@ -19,31 +19,31 @@ declare const ColorPicker_base: (new (...args: any[]) => import("../../shared/de
  * @example
  * ```html
  * <!-- Basic color picker -->
- * <hy-color-picker color="#3498db"></hy-color-picker>
+ * <nr-color-picker color="#3498db"></nr-color-picker>
  *
  * <!-- With default colors -->
- * <hy-color-picker
+ * <nr-color-picker
  *   color="#3498db"
  *   .defaultColorSets="${['#3498db', '#e74c3c', '#2ecc71']}">
- * </hy-color-picker>
+ * </nr-color-picker>
  *
  * <!-- With custom configuration -->
- * <hy-color-picker
+ * <nr-color-picker
  *   color="#3498db"
  *   trigger="click"
  *   placement="top"
  *   size="large"
  *   show-input="true"
  *   show-copy-button="true">
- * </hy-color-picker>
+ * </nr-color-picker>
  *
  * <!-- Disabled -->
- * <hy-color-picker color="#3498db" disabled></hy-color-picker>
+ * <nr-color-picker color="#3498db" disabled></nr-color-picker>
  * ```
  *
  * @fires hy-color-change - Color value changed
- * @fires hy-colorpicker-open - Dropdown opened
- * @fires hy-colorpicker-close - Dropdown closed
+ * @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

package/color-picker.component.js CHANGED Viewed

@@ -12,7 +12,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { LitElement, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import '../input/index.js';
 // Import child components
 import './color-holder.component.js';
@@ -30,31 +30,31 @@ import { ColorPickerDropdownController, ColorPickerEventController, } from './co
  * @example
  * ```html
  * <!-- Basic color picker -->
- * <hy-color-picker color="#3498db"></hy-color-picker>
+ * <nr-color-picker color="#3498db"></nr-color-picker>
  *
  * <!-- With default colors -->
- * <hy-color-picker
+ * <nr-color-picker
  *   color="#3498db"
  *   .defaultColorSets="${['#3498db', '#e74c3c', '#2ecc71']}">
- * </hy-color-picker>
+ * </nr-color-picker>
  *
  * <!-- With custom configuration -->
- * <hy-color-picker
+ * <nr-color-picker
  *   color="#3498db"
  *   trigger="click"
  *   placement="top"
  *   size="large"
  *   show-input="true"
  *   show-copy-button="true">
- * </hy-color-picker>
+ * </nr-color-picker>
  *
  * <!-- Disabled -->
- * <hy-color-picker color="#3498db" disabled></hy-color-picker>
+ * <nr-color-picker color="#3498db" disabled></nr-color-picker>
  * ```
  *
  * @fires hy-color-change - Color value changed
- * @fires hy-colorpicker-open - Dropdown opened
- * @fires hy-colorpicker-close - Dropdown closed
+ * @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
@@ -211,7 +211,7 @@ let ColorPicker = class ColorPicker extends NuralyUIBaseMixin(LitElement) {
       <div class="${classMap(containerClasses)}" data-theme="${this.currentTheme}">
         ${this.renderLabel()}
-        <hy-colorholder-box
+        <nr-colorholder-box
           class="color-holder"
           color="${this.color}"
           .size=${this.size}
@@ -222,7 +222,7 @@ let ColorPicker = class ColorPicker extends NuralyUIBaseMixin(LitElement) {
           aria-expanded="${this.show}"
           aria-haspopup="dialog"
           tabindex="${this.disabled ? -1 : 0}"
-        ></hy-colorholder-box>
+        ></nr-colorholder-box>
         ${this.renderDropdown()}
         ${this.renderHelperText()}
@@ -267,11 +267,11 @@ let ColorPicker = class ColorPicker extends NuralyUIBaseMixin(LitElement) {
             return nothing;
         }
         return html `
-      <hy-default-color-sets
+      <nr-default-color-sets
         .defaultColorSets=${this.defaultColorSets}
         @color-click="${this.handleColorChanged}"
         aria-label="Preset colors">
-      </hy-default-color-sets>
+      </nr-default-color-sets>
     `;
     }
     /**
@@ -374,7 +374,7 @@ __decorate([
     state()
 ], ColorPicker.prototype, "isValidColor", void 0);
 ColorPicker = __decorate([
-    customElement('hy-color-picker')
+    customElement('nr-color-picker')
 ], ColorPicker);
 export { ColorPicker };
 //# sourceMappingURL=color-picker.component.js.map

package/color-picker.component.js.map CHANGED Viewed

	@@ -1 +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 '../../shared/base-mixin.js';\nimport { INPUT_STATE } from '../input/input.types.js';\nimport '../input/index.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 * <hy-color-picker color=\"#3498db\"></hy-color-picker>\n * \n * <!-- With default colors -->\n * <hy-color-picker \n * color=\"#3498db\"\n * .defaultColorSets=\"${['#3498db', '#e74c3c', '#2ecc71']}\">\n * </hy-color-picker>\n * \n * <!-- With custom configuration -->\n * <hy-color-picker\n * color=\"#3498db\"\n * trigger=\"click\"\n * placement=\"top\"\n * size=\"large\"\n * show-input=\"true\"\n * show-copy-button=\"true\">\n * </hy-color-picker>\n * \n * <!-- Disabled -->\n * <hy-color-picker color=\"#3498db\" disabled></hy-color-picker>\n * ```\n * \n * @fires hy-color-change - Color value changed\n * @fires hy-colorpicker-open - Dropdown opened\n * @fires hy-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('hy-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 <hy-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 ></hy-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 <hy-default-color-sets \n .defaultColorSets=${this.defaultColorSets} \n @color-click=\"${this.handleColorChanged}\"\n aria-label=\"Preset colors\">\n </hy-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"]}
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';\nimport '../input/index.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.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@
  * Color Picker component styles for the Hybrid UI Library
  * Using shared CSS variables from /src/shared/themes/
  *
- * This file contains all the styling for the hy-colorpicker component with
+ * This file contains all the styling for the nr-colorpicker component with
  * clean CSS variable usage without local fallbacks and proper theme switching support.
  */
 declare const _default: import("lit").CSSResult;

package/color-picker.style.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { css } from 'lit';
  * Color Picker component styles for the Hybrid UI Library
  * Using shared CSS variables from /src/shared/themes/
  *
- * This file contains all the styling for the hy-colorpicker component with
+ * This file contains all the styling for the nr-colorpicker component with
  * clean CSS variable usage without local fallbacks and proper theme switching support.
  */
 export default css `

package/color-picker.style.js.map CHANGED Viewed

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

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

@@ -12,9 +12,9 @@ import './color-holder.component.js';
  *
  * @example
  * ```html
- * <hy-default-color-sets
+ * <nr-default-color-sets
  *   .defaultColorSets="${['#3498db', '#e74c3c', '#2ecc71', '#f39c12']}">
- * </hy-default-color-sets>
+ * </nr-default-color-sets>
  * ```
  *
  * @fires color-click - Fired when a color swatch is clicked

package/default-color-sets.component.js CHANGED Viewed

@@ -21,9 +21,9 @@ import './color-holder.component.js';
  *
  * @example
  * ```html
- * <hy-default-color-sets
+ * <nr-default-color-sets
  *   .defaultColorSets="${['#3498db', '#e74c3c', '#2ecc71', '#f39c12']}">
- * </hy-default-color-sets>
+ * </nr-default-color-sets>
  * ```
  *
  * @fires color-click - Fired when a color swatch is clicked
@@ -84,7 +84,7 @@ let DefaultColorSets = class DefaultColorSets extends LitElement {
         style="--columns: ${this.columns}"
       >
         ${map(this.defaultColorSets, (color) => html `
-            <hy-colorholder-box
+            <nr-colorholder-box
               color="${color}"
               .size=${this.size}
               class="color-set-container"
@@ -98,7 +98,7 @@ let DefaultColorSets = class DefaultColorSets extends LitElement {
                 this.handleColorClick(color, e);
             }
         }}
-            ></hy-colorholder-box>
+            ></nr-colorholder-box>
           `)}
       </div>
     `;
@@ -115,7 +115,7 @@ __decorate([
     property({ type: Number, attribute: 'columns' })
 ], DefaultColorSets.prototype, "columns", void 0);
 DefaultColorSets = __decorate([
-    customElement('hy-default-color-sets')
+    customElement('nr-default-color-sets')
 ], DefaultColorSets);
 export { DefaultColorSets };
 //# sourceMappingURL=default-color-sets.component.js.map

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

	@@ -1 +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 * <hy-default-color-sets \n * .defaultColorSets=\"${['#3498db', '#e74c3c', '#2ecc71', '#f39c12']}\">\n * </hy-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('hy-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 <hy-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 ></hy-colorholder-box>\n `\n )}\n </div>\n `;\n }\n}\n"]}
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"]}

package/package.json CHANGED Viewed

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

package/react.js CHANGED Viewed

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

package/react.js.map CHANGED Viewed

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