@thednp/color-picker 1.0.0 → 2.0.0-alpha1

package/dist/js/color-picker-element-esm.min.js

@@ -1,2 +0,0 @@
-// ColorPickerElement v1.0.0 | thednp © 2022 | MIT-License
-function t(t){return t instanceof HTMLElement?t.ownerDocument:t instanceof Window?t.document:window.document}const e=(t,e)=>Object.assign(t,e);function o(n){if("string"==typeof n)return t().createElement(n);const{tagName:r}=n,s={...n},a=o(r);return delete s.tagName,e(a,s),a}const n=(t,e,o)=>t.setAttribute(e,o),r=(t,e)=>t.getAttribute(e),{head:s}=document;function a(t,e){const o=getComputedStyle(t);return e in o?o[e]:""}const i=(t,o)=>{e(t.style,o)},l=t=>t.toLowerCase(),c=["transparent","currentColor","inherit","revert","initial"];function u(t){const e=Math.floor(t);return t-e<.5?e:Math.round(t)}const h=["rgb","hex","hsl","hsv","hwb"],p="[-\\+]?\\d*\\.?\\d+(?:deg|rad|grad|turn)?",g="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",d=`(?:${g})|(?:${p})`,b="(?:[,|\\s]+)",f=`(?:[\\s|\\(\\s|\\s\\(\\s]+)?(${d})${b}(${g})${b}(${g})(?:[,|\\/\\s]*)?(${g})?(?:[\\s|\\)\\s]+)?`,m={CSS_UNIT:new RegExp(d),hwb:new RegExp("hwb"+f),rgb:new RegExp("rgb(?:a)?"+f),hsl:new RegExp("hsl(?:a)?"+f),hsv:new RegExp("hsv(?:a)?"+f),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/};function v(t){return(""+t).includes(".")&&1===parseFloat(t)}function w(t){return(""+t).includes("%")}function x(t){return!c.includes(t)&&!["#",...h].some(e=>t.includes(e))&&(!!["black","white"].includes(t)||["rgb(255, 255, 255)","rgb(0, 0, 0)"].every(e=>{i(s,{color:t});const o=a(s,"color");return i(s,{color:""}),o!==e}))}function k(t){return Boolean(m.CSS_UNIT.exec(String(t)))}function y(t,e){let o=t;if("number"==typeof t&&0===Math.min(t,0)&&1===Math.max(t,1))return t;v(t)&&(o="100%");const n=w(o);return o=360===e?parseFloat(o):Math.min(e,Math.max(0,parseFloat(o))),n&&(o=o*e/100),Math.abs(o-e)<1e-6?1:(o=360===e?(o<0?o%e+e:o%e)/e:o%e/e,o)}function $(t){let e=parseFloat(""+t);return(Number.isNaN(e)||e<0||e>1)&&(e=1),e}function S(t){return Math.min(1,Math.max(0,t))}function H(t){i(s,{color:t});const e=a(s,"color");return i(s,{color:""}),e}function L(t){return u(255*t).toString(16)}function A(t){return P(t)/255}function P(t){return parseInt(t,16)}function N(t){return 1===t.length?"0"+t:String(t)}function E(t,e,o){const n=Math.max(t,e,o),r=Math.min(t,e,o);let s=0,a=0;const i=(n+r)/2;if(n===r)a=0,s=0;else{const l=n-r;a=i>.5?l/(2-n-r):l/(n+r),n===t&&(s=(e-o)/l+(e<o?6:0)),n===e&&(s=(o-t)/l+2),n===o&&(s=(t-e)/l+4),s/=6}return{h:s,s:a,l:i}}function C(t,e,o){let n=o;return n<0&&(n+=1),n>1&&(n-=1),n<1/6?t+6*n*(e-t):n<.5?e:n<2/3?t+(e-t)*(2/3-n)*6:t}function M(t,e,o){let n=0,r=0,s=0;if(0===e)r=o,s=o,n=o;else{const a=o<.5?o*(1+e):o+e-o*e,i=2*o-a;n=C(i,a,t+1/3),r=C(i,a,t),s=C(i,a,t-1/3)}return{r:n,g:r,b:s}}function T(t,e,o){let n=0,r=0;const s=Math.min(t,e,o),a=Math.max(t,e,o),i=1-a;if(a===s)return{h:0,w:s,b:i};t===s?(n=e-o,r=3):(n=e===s?o-t:t-e,r=e===s?5:1);const l=(r-n/(a-s))/6;return{h:1===l?0:l,w:s,b:i}}function R(t,e,o){if(e+o>=1){const t=e/(e+o);return{r:t,g:t,b:t}}let{r:n,g:r,b:s}=M(t,1,.5);return[n,r,s]=[n,r,s].map(t=>t*(1-e-o)+e),{r:n,g:r,b:s}}function F(t,e,o){const n=Math.max(t,e,o),r=Math.min(t,e,o);let s=0;const a=n-r;return n===r?s=0:(t===n&&(s=(e-o)/a+(e<o?6:0)),e===n&&(s=(o-t)/a+2),o===n&&(s=(t-e)/a+4),s/=6),{h:s,s:0===n?0:a/n,v:n}}function D(t,e,o){const n=6*t,r=e,s=o,a=Math.floor(n),i=n-a,l=s*(1-r),c=s*(1-i*r),u=s*(1-(1-i)*r),h=a%6;return{r:[s,c,l,l,u,s][h],g:[u,s,s,c,l,l][h],b:[l,l,u,s,s,c][h]}}function K(t,e,o,n){const r=[N(u(t).toString(16)),N(u(e).toString(16)),N(u(o).toString(16))];return n&&r[0].charAt(0)===r[0].charAt(1)&&r[1].charAt(0)===r[1].charAt(1)&&r[2].charAt(0)===r[2].charAt(1)?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0):r.join("")}function O(t,e,o,n,r){const s=[N(u(t).toString(16)),N(u(e).toString(16)),N(u(o).toString(16)),N(L(n))];return r&&s[0].charAt(0)===s[0].charAt(1)&&s[1].charAt(0)===s[1].charAt(1)&&s[2].charAt(0)===s[2].charAt(1)&&s[3].charAt(0)===s[3].charAt(1)?s[0].charAt(0)+s[1].charAt(0)+s[2].charAt(0)+s[3].charAt(0):s.join("")}function I(t){let e=l(t.trim());if(0===e.length)return{r:0,g:0,b:0,a:1};if(x(e))e=H(e);else if(c.includes(e)){return{r:0,g:0,b:0,a:"transparent"===e?0:1,format:"rgb",ok:!0}}let[,o,n,r,s]=m.rgb.exec(e)||[];return o&&n&&r?{r:o,g:n,b:r,a:void 0!==s?s:1,format:"rgb"}:([,o,n,r,s]=m.hsl.exec(e)||[],o&&n&&r?{h:o,s:n,l:r,a:void 0!==s?s:1,format:"hsl"}:([,o,n,r,s]=m.hsv.exec(e)||[],o&&n&&r?{h:o,s:n,v:r,a:void 0!==s?s:1,format:"hsv"}:([,o,n,r,s]=m.hwb.exec(e)||[],o&&n&&r?{h:o,w:n,b:r,a:void 0!==s?s:1,format:"hwb"}:([,o,n,r,s]=m.hex8.exec(e)||[],o&&n&&r&&s?{r:P(o),g:P(n),b:P(r),a:A(s),format:"hex"}:([,o,n,r]=m.hex6.exec(e)||[],o&&n&&r?{r:P(o),g:P(n),b:P(r),format:"hex"}:([,o,n,r,s]=m.hex4.exec(e)||[],o&&n&&r&&s?{r:P(o+o),g:P(n+n),b:P(r+r),a:A(s+s),format:"hex"}:([,o,n,r]=m.hex3.exec(e)||[],!!(o&&n&&r)&&{r:P(o+o),g:P(n+n),b:P(r+r),format:"hex"})))))))}function V(t){let e={r:0,g:0,b:0},o=t,n=1,r=null,s=null,a=null,i=null,l=null,c=null,u=null,p=null,g=!1;const d="object"==typeof o&&o.format;let b=d&&h.includes(d)?d:"rgb";return"string"==typeof t&&(o=I(t),o&&(g=!0)),"object"==typeof o&&(k(o.r)&&k(o.g)&&k(o.b)&&(({r:u,g:p,b:l}=o),[u,p,l]=[u,p,l].map(t=>y(t,w(t)?100:255)),e={r:u,g:p,b:l},g=!0,b=o.format||"rgb"),k(o.h)&&k(o.s)&&k(o.v)&&(({h:c,s:r,v:s}=o),c=y(c,360),r=y(r,100),s=y(s,100),e=D(c,r,s),g=!0,b="hsv"),k(o.h)&&k(o.s)&&k(o.l)&&(({h:c,s:r,l:a}=o),c=y(c,360),r=y(r,100),a=y(a,100),e=M(c,r,a),g=!0,b="hsl"),k(o.h)&&k(o.w)&&k(o.b)&&(({h:c,w:i,b:l}=o),c=y(c,360),i=y(i,100),l=y(l,100),e=R(c,i,l),g=!0,b="hwb"),k(o.a)&&(n=o.a,n=w(""+n)||parseFloat(n)>1?y(n,100):n)),void 0===o&&(g=!0),{ok:g,format:b,r:e.r,g:e.g,b:e.b,a:$(n)}}class U{constructor(t,e){let o=t;const n=e&&h.includes(e)?e:"";o instanceof U&&(o=V(o));const{r:r,g:s,b:a,a:i,ok:l,format:c}=V(o);this.originalInput=t,this.r=r,this.g=s,this.b=a,this.a=i,this.ok=l,this.format=n||c}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:e,b:o}=this;let n=0,r=0,s=0;return n=t<=.03928?t/12.92:((t+.055)/1.055)**2.4,r=e<=.03928?e/12.92:((e+.055)/1.055)**2.4,s=o<=.03928?o/12.92:((o+.055)/1.055)**2.4,.2126*n+.7152*r+.0722*s}get brightness(){const{r:t,g:e,b:o}=this.toRgb();return(299*t+587*e+114*o)/1e3}toRgb(){let{r:t,g:e,b:o,a:n}=this;return[t,e,o]=[t,e,o].map(t=>u(255*t*100)/100),n=u(100*n)/100,{r:t,g:e,b:o,a:n}}toRgbString(){const{r:t,g:e,b:o,a:n}=this.toRgb(),[r,s,a]=[t,e,o].map(u);return 1===n?`rgb(${r}, ${s}, ${a})`:`rgba(${r}, ${s}, ${a}, ${n})`}toRgbCSS4String(){const{r:t,g:e,b:o,a:n}=this.toRgb(),[r,s,a]=[t,e,o].map(u);return`rgb(${r} ${s} ${a}${1===n?"":` / ${u(100*n)}%`})`}toHex(t){const{r:e,g:o,b:n,a:r}=this.toRgb();return 1===r?K(e,o,n,t):O(e,o,n,r,t)}toHexString(t){return"#"+this.toHex(t)}toHex8(t){const{r:e,g:o,b:n,a:r}=this.toRgb();return O(e,o,n,r,t)}toHex8String(t){return"#"+this.toHex8(t)}toHsv(){const{r:t,g:e,b:o,a:n}=this,{h:r,s:s,v:a}=F(t,e,o);return{h:r,s:s,v:a,a:n}}toHsl(){const{r:t,g:e,b:o,a:n}=this,{h:r,s:s,l:a}=E(t,e,o);return{h:r,s:s,l:a,a:n}}toHslString(){let{h:t,s:e,l:o,a:n}=this.toHsl();return t=u(360*t),e=u(100*e),o=u(100*o),n=u(100*n)/100,1===n?`hsl(${t}, ${e}%, ${o}%)`:`hsla(${t}, ${e}%, ${o}%, ${n})`}toHslCSS4String(){let{h:t,s:e,l:o,a:n}=this.toHsl();t=u(360*t),e=u(100*e),o=u(100*o),n=u(100*n);return`hsl(${t}deg ${e}% ${o}%${n<100?` / ${u(n)}%`:""})`}toHwb(){const{r:t,g:e,b:o,a:n}=this,{h:r,w:s,b:a}=T(t,e,o);return{h:r,w:s,b:a,a:n}}toHwbString(){let{h:t,w:e,b:o,a:n}=this.toHwb();t=u(360*t),e=u(100*e),o=u(100*o),n=u(100*n);return`hwb(${t}deg ${e}% ${o}%${n<100?` / ${u(n)}%`:""})`}setAlpha(t){return"number"!=typeof t||(this.a=$(t)),this}saturate(t){if("number"!=typeof t)return this;const{h:o,s:n,l:r}=this.toHsl(),{r:s,g:a,b:i}=M(o,S(n+t/100),r);return e(this,{r:s,g:a,b:i}),this}desaturate(t){return"number"==typeof t?this.saturate(-t):this}greyscale(){return this.saturate(-100)}lighten(t){if("number"!=typeof t)return this;const{h:o,s:n,l:r}=this.toHsl(),{r:s,g:a,b:i}=M(o,n,S(r+t/100));return e(this,{r:s,g:a,b:i}),this}darken(t){return"number"==typeof t?this.lighten(-t):this}spin(t){if("number"!=typeof t)return this;const{h:o,s:n,l:r}=this.toHsl(),{r:s,g:a,b:i}=M(S((360*o+t)%360/360),n,r);return e(this,{r:s,g:a,b:i}),this}clone(){return new U(this)}toString(t){const{format:e}=this;return"hex"===e?this.toHexString(t):"hsl"===e?this.toHslString():"hwb"===e?this.toHwbString():this.toRgbString()}}e(U,{ANGLES:"deg|rad|grad|turn",CSS_ANGLE:p,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:g,CSS_UNIT2:d,PERMISSIVE_MATCH:f,matchers:m,isOnePointZero:v,isPercentage:w,isValidCSSUnit:k,isColorName:x,pad2:N,clamp01:S,bound01:y,boundAlpha:$,getRGBFromName:H,convertHexToDecimal:A,convertDecimalToHex:L,rgbToHsl:E,rgbToHex:K,rgbToHsv:F,rgbToHwb:T,rgbaToHex:O,hslToRgb:M,hsvToRgb:D,hueToRgb:C,hwbToRgb:R,parseIntFromHex:P,stringInputToObject:I,inputToRGB:V,roundPart:u,getElementStyle:a,setElementStyle:i,ObjectAssign:e});const j={};function B(t){const e=this,{type:o,target:n}=t;[...j[o]].forEach(r=>{const[s,a]=r;[n,e].some(t=>s===t)&&[...a].forEach(e=>{const[n,r]=e;n.apply(s,[t]),r&&r.once&&z(s,o,n,r)})})}const _=(t,e,o,n)=>{j[e]||(j[e]=new Map);const r=j[e];r.has(t)||r.set(t,new Map);const s=r.get(t),{size:a}=s;s.set(o,n),a||t.addEventListener(e,B,n)},z=(t,e,o,n)=>{const r=j[e],s=r&&r.get(t),a=s&&s.get(o),{options:i}=void 0!==a?a:{options:n};s&&s.has(o)&&s.delete(o),!r||s&&s.size||r.delete(t),r&&r.size||delete j[e],s&&s.size||t.removeEventListener(e,B,i)},W="ArrowDown",G="ArrowUp",J="ArrowLeft",q="ArrowRight",X="Enter",Y="Space",Z="touchmove",Q="pointermove";function tt(e){return t(e).documentElement}let et=0,ot=0;const nt=new Map;function rt(t,e){const{width:o,height:n,top:r,right:s,bottom:a,left:i}=t.getBoundingClientRect();let l=1,c=1;if(e&&t instanceof HTMLElement){const{offsetWidth:e,offsetHeight:r}=t;l=e>0&&Math.round(o)/e||1,c=r>0&&Math.round(n)/r||1}return{width:o/l,height:n/c,top:r/c,right:s/l,bottom:a/c,left:i/l,x:i/l,y:r/c}}const st=[Document,Element,HTMLElement],at=[Element,HTMLElement];function it(e,o){const n=st.some(t=>o instanceof t)?o:t();return at.some(t=>e instanceof t)?e:n.querySelector(e)}function lt(e,o){return(o&&st.some(t=>o instanceof t)?o:t()).getElementsByClassName(e)}const ct=new Map,ut={set:(t,e,o)=>{const n=it(t);if(!n)return;ct.has(e)||ct.set(e,new Map);ct.get(e).set(n,o)},getAllFor:t=>ct.get(t)||null,get:(t,e)=>{const o=it(t),n=ut.getAllFor(e);return o&&n&&n.get(o)||null},remove:(t,e)=>{const o=it(t),n=ct.get(e);n&&o&&(n.delete(o),0===n.size&&ct.delete(e))}};function ht(t){return"true"===t||"false"!==t&&(Number.isNaN(+t)?""===t||"null"===t?null:t:+t)}const pt=t=>Object.keys(t);const gt=t=>t.focus();function dt(t,e){return t.classList.contains(e)}function bt(t,e){t.classList.add(e)}function ft(t,e){t.classList.remove(e)}const mt=(t,e)=>t.removeAttribute(e);class vt{constructor(...t){let e=0,o=12,n=10,r=[.5];if(3===t.length)[e,o,n]=t;else if(2===t.length&&([o,n]=t,[o,n].some(t=>t<1)))throw TypeError("ColorPalette: both arguments must be higher than 0.");const s=[],a=360/o,i=u((n-(n%2?1:0))/2),l=[[1,2,3],[4,5],[6,7],[8,9],[10,11],[12,13]],c=l.find(t=>t.includes(n)),h=c?[.25,.2,.15,.11,.09,.075][l.indexOf(c)]:100/(n+(n%2?0:1))/100;for(let t=1;t<i+1;t+=1)r=[...r,.5+h*t];for(let t=1;t<n-i;t+=1)r=[.5-h*t,...r];for(let t=0;t<o;t+=1){const o=(e+t*a)%360/360;r.forEach(t=>{s.push(new U({h:o,s:1,l:t}))})}this.hue=e,this.hueSteps=o,this.lightSteps=n,this.colors=s}}e(vt,{Color:U});const wt={pickerLabel:"Colour Picker",appearanceLabel:"Colour Appearance",valueLabel:"Colour Value",toggleLabel:"Select Colour",presetsLabel:"Colour Presets",defaultsLabel:"Colour Defaults",formatLabel:"Format",alphaLabel:"Alpha",hexLabel:"Hexadecimal",hueLabel:"Hue",whitenessLabel:"Whiteness",blacknessLabel:"Blackness",saturationLabel:"Saturation",lightnessLabel:"Lightness",redLabel:"Red",greenLabel:"Green",blueLabel:"Blue"},xt=["white","black","grey","red","orange","brown","gold","olive","yellow","lime","green","teal","cyan","blue","violet","magenta","pink"];function kt(t){try{JSON.parse(t)}catch(t){return!1}return!0}const yt=t=>t.toUpperCase();function $t(o,n){if("string"==typeof n)return t().createElementNS(o,n);const{tagName:r}=n,s={...n},a=$t(o,r);return delete s.tagName,e(a,s),a}function St(t,e,s){const{input:a,format:l,componentLabels:c}=t,{defaultsLabel:u,presetsLabel:h}=c,p="color-options"===s,g=e instanceof vt,d=p?h:u,b=g?e.colors:e,f=b.length,{lightSteps:m}=g?e:{lightSteps:null},v=m||[9,10].find(t=>f>=2*t&&!(f%t))||5,w=p&&f>v;let x=2;x=w&&f>2*v?3:x,x=w&&f>3*v?4:x,x=w&&f>4*v?5:x;const k=x-(f<=3*v?1:2),y=w&&f>k*v;let $=s;$+=y?" scrollable":"",$+=w?" multiline":"";const S=w?"1px":"0.25rem";let H=w?1.75:2;H=v>5&&w?1.5:H;const L=k*H+"rem",A=`calc(${x} * ${H}rem + ${x-1} * ${S})`,P=o({tagName:"ul",className:$});var N,E;return n(P,"role","listbox"),n(P,"aria-label",d),y&&(N=P,pt(E={"--grid-item-size":H+"rem","--grid-fit":v,"--grid-gap":S,"--grid-height":L,"--grid-hover-height":A}).forEach(t=>{N.style.setProperty(t,E[t])})),b.forEach(t=>{let[e,s]="string"==typeof t?t.trim().split(":"):[];t instanceof U&&(e=t.toHexString(),s=e);const c=new U(t instanceof U?t:e,l).toString()===r(a,"value"),u=o({tagName:"li",className:"color-option"+(c?" active":""),innerText:""+(s||e)});n(u,"tabindex","0"),n(u,"data-value",""+e),n(u,"role","option"),n(u,"aria-selected",c?"true":"false"),p&&i(u,{backgroundColor:e}),P.append(u)}),P}function Ht(t){const{input:s,parent:a,format:i,id:l,componentLabels:u,colorKeywords:h,colorPresets:p}=t,g=r(s,"value")||"#fff",{toggleLabel:d,pickerLabel:b,formatLabel:f,hexLabel:m}=u,v=c.includes(g)?"#fff":g;t.color=new U(v,i);const w="hex"===i?m:yt(i),x=o({id:"picker-btn-"+l,tagName:"button",className:"picker-toggle btn-appearance"});n(x,"aria-expanded","false"),n(x,"aria-haspopup","true"),x.append(o({tagName:"span",className:"v-hidden",innerText:`${b}. ${f}: ${w}`}));const k=o({tagName:"div",className:"color-dropdown picker"});n(k,"aria-labelledby","picker-btn-"+l),n(k,"role","group");const y=function(t){const{format:e,componentLabels:r}=t,{hueLabel:s,alphaLabel:a,lightnessLabel:i,saturationLabel:l,whitenessLabel:c,blacknessLabel:u}=r,h="hsl"===e?360:100,p="hsl"===e?100:360;let g="hsl"===e?`${s} & ${i}`:`${i} & ${l}`;g="hwb"===e?`${c} & ${u}`:g;const d="hsl"===e?""+l:""+s,b=o({tagName:"div",className:"color-controls "+e});return[{i:1,c:"color-pointer",l:g,min:0,max:h},{i:2,c:"color-slider",l:d,min:0,max:p},{i:3,c:"color-slider",l:a,min:0,max:100}].forEach(t=>{const{i:e,c:r,l:s,min:a,max:i}=t,l=o({tagName:"div",className:"color-control"});n(l,"role","presentation"),l.append(o({tagName:"div",className:"visual-control visual-control"+e}));const c=o({tagName:"div",className:r+" knob",ariaLive:"polite"});n(c,"aria-label",s),n(c,"role","slider"),n(c,"tabindex","0"),n(c,"aria-valuemin",""+a),n(c,"aria-valuemax",""+i),l.append(c),b.append(l)}),b}(t),$=function(t){const{format:r,id:s,componentLabels:a}=t,i=o({tagName:"div",className:"color-form "+r});let l=["hex"];return"rgb"===r?l=["red","green","blue","alpha"]:"hsl"===r?l=["hue","saturation","lightness","alpha"]:"hwb"===r&&(l=["hue","whiteness","blackness","alpha"]),l.forEach(t=>{const[l]="hex"===r?["#"]:yt(t).split(""),c=`color_${r}_${t}_${s}`,u=a[t+"Label"],h=o({tagName:"label"});n(h,"for",c),h.append(o({tagName:"span",ariaHidden:"true",innerText:l+":"}),o({tagName:"span",className:"v-hidden",innerText:u}));const p=o({tagName:"input",id:c,type:"hex"===r?"text":"number",value:"alpha"===t?"100":"0",className:"color-input "+t});n(p,"autocomplete","off"),n(p,"spellcheck","false");let g="100",d="1";"alpha"!==t&&("rgb"===r?(g="255",d="1"):"hue"===t&&(g="360",d="1")),e(p,{min:"0",max:g,step:d}),i.append(h,p)}),i}(t);if(k.append(y,$),s.before(x),a.append(k),h||p){const e=o({tagName:"div",className:"color-dropdown scrollable menu"});p&&e.append(St(t,p,"color-options")),h&&h.length&&e.append(St(t,h,"color-defaults"));const r=o({tagName:"button",className:"menu-toggle btn-appearance"});n(r,"tabindex","-1"),n(r,"aria-expanded","false"),n(r,"aria-haspopup","true");const s=encodeURI("http://www.w3.org/2000/svg"),i=$t(s,{tagName:"svg"});n(i,"xmlns",s),n(i,"viewBox","0 0 512 512"),n(i,"aria-hidden","true");const l=$t(s,{tagName:"path"});n(l,"d","M98,158l157,156L411,158l27,27L255,368L71,185L98,158z"),n(l,"fill","#fff"),i.append(l),r.append(o({tagName:"span",className:"v-hidden",innerText:""+d}),i),a.append(r,e)}h&&c.includes(g)&&(t.value=g),n(s,"tabindex","-1")}const Lt={componentLabels:wt,colorLabels:xt,format:"rgb",colorPresets:!1,colorKeywords:!1};function At(t,e){const o=e?_:z,{input:n,pickerToggle:r,menuToggle:s}=t;o(n,"focusin",t.showPicker),o(r,"click",t.togglePicker),s&&o(s,"click",t.toggleMenu)}function Pt(e,o){const n=o?_:z,{input:r,colorMenu:s,parent:a}=e,i=t(r),l=i.defaultView;n(e.controls,"pointerdown",e.pointerDown),e.controlKnobs.forEach(t=>n(t,"keydown",e.handleKnobs)),n(l,"scroll",e.handleScroll),n(l,"resize",e.update),[r,...e.inputs].forEach(t=>n(t,"change",e.changeHandler)),s&&(n(s,"click",e.menuClickHandler),n(s,"keydown",e.menuKeyHandler)),n(i,Q,e.pointerMove),n(i,"pointerup",e.pointerUp),n(a,"focusout",e.handleFocusOut),n(i,"keyup",e.handleDismiss)}function Nt(t){var e,o;e=t.input,o=new CustomEvent("colorpicker.change"),e.dispatchEvent(o)}function Et(t){t&&["bottom","top"].forEach(e=>ft(t,e))}function Ct(t,e){const{colorPicker:o,colorMenu:r,menuToggle:s,pickerToggle:a,parent:i}=t,l=e===o,c=l?r:o,u=l?s:a,h=l?a:s;dt(i,"open")||bt(i,"open"),c&&(ft(c,"show"),Et(c)),bt(e,"bottom"),e.offsetHeight,bt(e,"show"),l&&t.update(),t.isOpen||(Pt(t,!0),t.updateDropdownPosition(),t.isOpen=!0,n(t.input,"tabindex","0"),s&&n(s,"tabindex","0")),n(h,"aria-expanded","true"),u&&n(u,"aria-expanded","false")}class Mt{constructor(t,o){const n=this,s=it(t);if(!s)throw new TypeError(`ColorPicker target "${t}" cannot be found.`);n.input=s;const a=function t(e,o){return e?e.closest(o)||t(e.getRootNode().host,o):null}(s,".color-picker,color-picker");if(!a)throw new TypeError("ColorPicker requires a specific markup to work.");n.parent=a,n.id=function t(e,o){let n=o?et:ot;if(o){const r=t(e),s=nt.get(r)||new Map;nt.has(r)||nt.set(r,s),s.has(o)?n=s.get(o):(s.set(o,n),et+=1)}else{const t=e.id||e;nt.has(t)?n=nt.get(t):(nt.set(t,n),ot+=1)}return n}(s,"color-picker"),n.dragElement=null,n.isOpen=!1,n.controlPositions={c1x:0,c1y:0,c2y:0,c3y:0},n.colorLabels={},n.colorKeywords=void 0,n.colorPresets=void 0;const{format:i,componentLabels:c,colorLabels:u,colorKeywords:h,colorPresets:p}=function(t,e,o,n){const s={...t.dataset},a={},i={};return pt(s).forEach(t=>{const e=n&&t.includes(n)?t.replace(n,"").replace(/[A-Z]/,t=>l(t)):t;i[e]=ht(s[t])}),pt(o).forEach(t=>{o[t]=ht(o[t])}),pt(e).forEach(n=>{a[n]=n in o?o[n]:n in i?i[n]:"title"===n?r(t,"title"):e[n]}),a}(this.isCE?a:s,Lt,o||{});let g=xt;u instanceof Array&&17===u.length?g=u:u&&17===u.split(",").length&&(g=u.split(",")),xt.forEach((t,e)=>{n.colorLabels[t]=g[e].trim()});const d=c&&kt(c)?JSON.parse(c):c;if(n.componentLabels=e({...wt},d),n.color=new U(s.value||"#fff",i),n.format=i,h instanceof Array&&h.length?n.colorKeywords=h:"string"==typeof h&&h.length&&(n.colorKeywords=h.split(",").map(t=>t.trim())),p instanceof Array&&p.length)n.colorPresets=p;else if("string"==typeof p&&p.length)if(kt(p)){const{hue:t,hueSteps:e,lightSteps:o}=JSON.parse(p);n.colorPresets=new vt(t,e,o)}else n.colorPresets=p.split(",").map(t=>t.trim());n.showPicker=n.showPicker.bind(n),n.togglePicker=n.togglePicker.bind(n),n.toggleMenu=n.toggleMenu.bind(n),n.menuClickHandler=n.menuClickHandler.bind(n),n.menuKeyHandler=n.menuKeyHandler.bind(n),n.pointerDown=n.pointerDown.bind(n),n.pointerMove=n.pointerMove.bind(n),n.pointerUp=n.pointerUp.bind(n),n.update=n.update.bind(n),n.handleScroll=n.handleScroll.bind(n),n.handleFocusOut=n.handleFocusOut.bind(n),n.changeHandler=n.changeHandler.bind(n),n.handleDismiss=n.handleDismiss.bind(n),n.handleKnobs=n.handleKnobs.bind(n),Ht(n);const[b,f]=lt("color-dropdown",a);n.pickerToggle=it(".picker-toggle",a),n.menuToggle=it(".menu-toggle",a),n.colorPicker=b,n.colorMenu=f,n.inputs=[...lt("color-input",a)];const[m]=lt("color-controls",a);n.controls=m,n.controlKnobs=[...lt("knob",m)],n.visuals=[...lt("visual-control",m)],n.update(),At(n,!0),ut.set(s,"color-picker",n)}get value(){return this.input.value}set value(t){this.input.value=t}get hasNonColor(){return this.colorKeywords instanceof Array&&this.colorKeywords.some(t=>c.includes(t))}get isCE(){return"color-picker"===this.parent.localName}get hex(){return this.color.toHex(!0)}get hsv(){return this.color.toHsv()}get hsl(){return this.color.toHsl()}get hwb(){return this.color.toHwb()}get rgb(){return this.color.toRgb()}get brightness(){return this.color.brightness}get luminance(){return this.color.luminance}get isDark(){const{color:t,brightness:e}=this;return e<120&&t.a>.33}get isValid(){const t=this.input.value;return""!==t&&new U(t).isValid}get appearance(){const{colorLabels:t,hsl:e,hsv:o,format:n}=this,r=u(360*e.h),s=u(100*("hsl"===n?e.s:o.s)),a=u(100*e.l),i=100*o.v;let l;if(100===a&&0===s)l=t.white;else if(0===a)l=t.black;else if(0===s)l=t.grey;else if(r<15||r>=345)l=t.red;else if(r>=15&&r<45)l=i>80&&s>80?t.orange:t.brown;else if(r>=45&&r<75){const e=r>=54&&r<75&&i<80;l=r>46&&r<54&&i<80&&s>90?t.gold:t.yellow,l=e?t.olive:l}else r>=75&&r<155?l=i<68?t.green:t.lime:r>=155&&r<175?l=t.teal:r>=175&&r<195?l=t.cyan:r>=195&&r<255?l=t.blue:r>=255&&r<270?l=t.violet:r>=270&&r<295?l=t.magenta:r>=295&&r<345&&(l=t.pink);return l}updateVisuals(){const{controlPositions:t,visuals:e}=this,[o,n,r]=e,{offsetHeight:s}=o,a=t.c2y/s,{r:l,g:c,b:h}=new U({h:a,s:1,l:.5}).toRgb(),p=1-t.c3y/s,g=u(100*p)/100,d=new U({h:a,s:1,l:.5,a:p}).toRgbString();i(o,{background:`linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,${g}) 100%),\n      linear-gradient(to right, rgba(255,255,255,${g}) 0%, ${d} 100%),\n      linear-gradient(rgb(255,255,255) 0%, rgb(255,255,255) 100%)`}),i(n,{background:"linear-gradient(\n      rgb(255,0,0) 0%, rgb(255,255,0) 16.67%,\n      rgb(0,255,0) 33.33%, rgb(0,255,255) 50%,\n      rgb(0,0,255) 66.67%, rgb(255,0,255) 83.33%,\n      rgb(255,0,0) 100%)"}),i(r,{background:`linear-gradient(rgba(${l},${c},${h},1) 0%,rgba(${l},${c},${h},0) 100%)`})}handleFocusOut({relatedTarget:t}){t&&!this.parent.contains(t)&&this.hide(!0)}handleDismiss({code:t}){const e=this;e.isOpen&&"Escape"===t&&e.hide()}handleScroll(e){const{activeElement:o}=t(this.input);this.updateDropdownPosition(),([Q,Z].includes(e.type)&&this.dragElement||o&&this.controlKnobs.includes(o))&&(e.stopPropagation(),e.preventDefault())}menuKeyHandler(t){const{target:e,code:o}=t,{previousElementSibling:n,nextElementSibling:r,parentElement:s}=e,i=s&&dt(s,"color-options"),l=[...s.children],c=i&&a(s,"grid-template-columns").split(" ").length,u=l.indexOf(e),h=u>-1&&c&&l[u-c],p=u>-1&&c&&l[u+c];[W,G,Y].includes(o)&&t.preventDefault(),i?h&&o===G?gt(h):p&&o===W?gt(p):n&&o===J?gt(n):r&&o===q&&gt(r):n&&[J,G].includes(o)?gt(n):r&&[q,W].includes(o)&&gt(r),[X,Y].includes(o)&&this.menuClickHandler({target:e})}menuClickHandler(t){const o=this,{target:s}=t,{colorMenu:a}=o,i=(r(s,"data-value")||"").trim();if(!i.length)return;const l=it("li.active",a);let u=c.includes(i)?"white":i;u="transparent"===i?"rgba(0,0,0,0)":i;const{r:h,g:p,b:g,a:d}=new U(u);e(o.color,{r:h,g:p,b:g,a:d}),o.update(),l!==s&&(l&&(ft(l,"active"),mt(l,"aria-selected")),bt(s,"active"),n(s,"aria-selected","true"),c.includes(i)&&(o.value=i),Nt(o))}pointerDown(t){const e=this,{target:o,pageX:n,pageY:r}=t,{colorMenu:s,visuals:a,controlKnobs:i}=e,[l,c,u]=a,[h,p,g]=i,d=i.includes(o)?o.previousElementSibling:o,b=rt(d),f=tt(l),m=n-f.scrollLeft-b.left,v=r-f.scrollTop-b.top;if(o===l||o===h?(e.dragElement=d,e.changeControl1(m,v)):o===c||o===p?(e.dragElement=d,e.changeControl2(v)):o!==u&&o!==g||(e.dragElement=d,e.changeAlpha(v)),s){const t=it("li.active",s);t&&(ft(t,"active"),mt(t,"aria-selected"))}t.preventDefault()}pointerUp({target:e}){const o=this,{parent:n}=o,r=t(n),s=null!==it(".color-picker,color-picker.open",r),a=r.getSelection();o.dragElement||a.toString().length||n.contains(e)||o.hide(s),o.dragElement=null}pointerMove(t){const e=this,{dragElement:o,visuals:n}=e,[r,s,a]=n,{pageX:i,pageY:l}=t;if(!o)return;const c=rt(o),u=tt(r),h=i-u.scrollLeft-c.left,p=l-u.scrollTop-c.top;o===r&&e.changeControl1(h,p),o===s&&e.changeControl2(p),o===a&&e.changeAlpha(p)}handleKnobs(e){const{target:o,code:n}=e,r=this;if(![G,W,J,q].includes(n))return;e.preventDefault();const{controlKnobs:s,visuals:a}=r,{offsetWidth:i,offsetHeight:l}=a[0],[c,u,h]=s,{activeElement:p}=t(c),g=l/360;if(s.find(t=>t===p)){let t=0,s=0;if(o===c){const e=i/100;[J,q].includes(n)?r.controlPositions.c1x+=n===q?e:-e:[G,W].includes(n)&&(r.controlPositions.c1y+=n===W?g:-g),t=r.controlPositions.c1x,s=r.controlPositions.c1y,r.changeControl1(t,s)}else o===u?(r.controlPositions.c2y+=[W,q].includes(n)?g:-g,s=r.controlPositions.c2y,r.changeControl2(s)):o===h&&(r.controlPositions.c3y+=[W,q].includes(n)?g:-g,s=r.controlPositions.c3y,r.changeAlpha(s));r.handleScroll(e)}}changeHandler(){const o=this;let n;const{inputs:r,format:s,value:a,input:i,controlPositions:l,visuals:u}=o,{activeElement:h}=t(i),{offsetHeight:p}=u[0],[g,,,d]=r,[b,f,m,v]="rgb"===s?r.map(t=>parseFloat(t.value)/(t===d?100:1)):r.map(t=>parseFloat(t.value)/(t!==g?100:360)),w=o.hasNonColor&&c.includes(a),x=d?v:1-l.c3y/p;if(h===i||h&&r.includes(h)){n=h===i?w?"transparent"===a?"rgba(0,0,0,0)":"rgb(0,0,0)":a:"hex"===s?g.value:"hsl"===s?{h:b,s:f,l:m,a:x}:"hwb"===s?{h:b,w:f,b:m,a:x}:{r:b,g:f,b:m,a:x};const{r:t,g:r,b:l,a:c}=new U(n);e(o.color,{r:t,g:r,b:l,a:c}),o.setControlPositions(),o.updateAppearance(),o.updateInputs(),o.updateControls(),o.updateVisuals(),h===i&&w&&(o.value=a)}}changeControl1(t,o){let[n,r]=[0,0];const{controlPositions:s,visuals:a}=this,{offsetHeight:i,offsetWidth:l}=a[0];t>l?n=l:t>=0&&(n=t),o>i?r=i:o>=0&&(r=o);const c=s.c2y/i,u=n/l,h=1-r/i,p=1-s.c3y/i,{r:g,g:d,b:b,a:f}=new U({h:c,s:u,v:h,a:p});e(this.color,{r:g,g:d,b:b,a:f}),this.controlPositions.c1x=n,this.controlPositions.c1y=r,this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals()}changeControl2(t){const{controlPositions:o,visuals:n}=this,{offsetHeight:r,offsetWidth:s}=n[0];let a=0;t>r?a=r:t>=0&&(a=t);const i=a/r,l=o.c1x/s,c=1-o.c1y/r,u=1-o.c3y/r,{r:h,g:p,b:g,a:d}=new U({h:i,s:l,v:c,a:u});e(this.color,{r:h,g:p,b:g,a:d}),this.controlPositions.c2y=a,this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals()}changeAlpha(t){const{visuals:e}=this,{offsetHeight:o}=e[0];let n=0;t>o?n=o:t>=0&&(n=t);const r=1-n/o;this.color.setAlpha(r),this.controlPositions.c3y=n,this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals()}update(){this.updateDropdownPosition(),this.updateAppearance(),this.setControlPositions(),this.updateInputs(!0),this.updateControls(),this.updateVisuals()}updateDropdownPosition(){const{input:t,colorPicker:e,colorMenu:o}=this,n=rt(t),{top:r,bottom:s}=n,{offsetHeight:a}=t,i=tt(t).clientHeight,l=dt(e,"show")?e:o;if(!l)return;const{offsetHeight:c}=l,u=i-s,h=r,p=r+c+a>i,g=r-c<0;(dt(l,"bottom")||!g)&&u<h&&p?(ft(l,"bottom"),bt(l,"top")):(ft(l,"top"),bt(l,"bottom"))}setControlPositions(){const{visuals:t,color:e,hsv:o}=this,{offsetHeight:n,offsetWidth:r}=t[0],s=e.a,a=o.h,i=o.s,l=o.v;this.controlPositions.c1x=i*r,this.controlPositions.c1y=(1-l)*n,this.controlPositions.c2y=a*n,this.controlPositions.c3y=(1-s)*n}updateAppearance(){const t=this,{componentLabels:e,color:o,parent:r,hsv:s,hex:a,format:l,controlKnobs:c}=t,{appearanceLabel:h,hexLabel:p,valueLabel:g}=e;let{r:d,g:b,b:f}=o.toRgb();const[m,v,w]=c,x=u(360*s.h),k=o.a,y=u(100*s.s),$=u(100*s.v),S=t.appearance;let H=`${p} ${a.split("").join(" ")}`;if("hwb"===l){const{hwb:e}=t,o=u(100*e.w),r=u(100*e.b);H=`HWB: ${x}°, ${o}%, ${r}%`,n(m,"aria-valuetext",`${o}% & ${r}%`),n(m,"aria-valuenow",""+o),n(v,"aria-description",`${g}: ${H}. ${h}: ${S}.`),n(v,"aria-valuetext",x+"%"),n(v,"aria-valuenow",""+x)}else[d,b,f]=[d,b,f].map(u),H="hsl"===l?`HSL: ${x}°, ${y}%, ${$}%`:H,H="rgb"===l?`RGB: ${d}, ${b}, ${f}`:H,n(m,"aria-valuetext",`${$}% & ${y}%`),n(m,"aria-valuenow",""+$),n(v,"aria-description",`${g}: ${H}. ${h}: ${S}.`),n(v,"aria-valuetext",x+"°"),n(v,"aria-valuenow",""+x);const L=u(100*k);n(w,"aria-valuetext",L+"%"),n(w,"aria-valuenow",""+L);const A=o.toString();i(t.input,{backgroundColor:A}),t.isDark?(dt(r,"txt-light")&&ft(r,"txt-light"),dt(r,"txt-dark")||bt(r,"txt-dark")):(dt(r,"txt-dark")&&ft(r,"txt-dark"),dt(r,"txt-light")||bt(r,"txt-light"))}updateControls(){const{controlKnobs:t,controlPositions:e}=this;let{c1x:o,c1y:n,c2y:r,c3y:s}=e;const[a,l,c]=t;[o,n,r,s]=[o,n,r,s].map(u),i(a,{transform:`translate3d(${o-4}px,${n-4}px,0)`}),i(l,{transform:`translate3d(0,${r-4}px,0)`}),i(c,{transform:`translate3d(0,${s-4}px,0)`})}updateInputs(t){const e=this,{value:o,format:n,inputs:r,color:s,hsl:a}=e,[i,l,c,h]=r,p=u(100*s.a),g=u(360*a.h);let d;if("hex"===n)d=e.color.toHexString(!0),i.value=e.hex;else if("hsl"===n){const t=u(100*a.l),o=u(100*a.s);d=e.color.toHslString(),i.value=""+g,l.value=""+o,c.value=""+t,h.value=""+p}else if("hwb"===n){const{w:t,b:o}=e.hwb,n=u(100*t),r=u(100*o);d=e.color.toHwbString(),i.value=""+g,l.value=""+n,c.value=""+r,h.value=""+p}else if("rgb"===n){let{r:t,g:o,b:n}=e.rgb;[t,o,n]=[t,o,n].map(u),d=e.color.toRgbString(),i.value=""+t,l.value=""+o,c.value=""+n,h.value=""+p}e.value=""+d,t||d===o||Nt(e)}togglePicker(t){t&&t.preventDefault();const e=this,{colorPicker:o}=e;e.isOpen&&dt(o,"show")?e.hide(!0):Ct(e,o)}showPicker(){const t=this,{colorPicker:e}=t;["top","bottom"].some(t=>dt(e,t))||Ct(t,e)}toggleMenu(t){t&&t.preventDefault();const e=this,{colorMenu:o}=e;e.isOpen&&dt(o,"show")?e.hide(!0):Ct(e,o)}hide(t){const e=this;if(e.isOpen){const{pickerToggle:o,menuToggle:r,colorPicker:s,colorMenu:i,parent:l,input:c}=e,u=dt(s,"show"),h=u?s:i,p=u?o:r,g=h&&function(t){const e=a(t,"transitionProperty"),o=a(t,"transitionDuration"),n=o.includes("ms")?1:1e3,r=e&&"none"!==e?parseFloat(o)*n:0;return Number.isNaN(r)?0:r}(h);e.value=e.color.toString(!0),h&&(ft(h,"show"),n(p,"aria-expanded","false"),setTimeout(()=>{Et(h),it(".show",l)||(ft(l,"open"),Pt(e),e.isOpen=!1)},g)),t||gt(o),n(c,"tabindex","-1"),p===r&&n(r,"tabindex","-1")}}dispose(){const{input:t,parent:e}=this;this.hide(!0),At(this),[...e.children].forEach(e=>{e!==t&&e.remove()}),mt(t,"tabindex"),i(t,{backgroundColor:""}),["txt-light","txt-dark"].forEach(t=>ft(e,t)),ut.remove(t,"color-picker")}}function Tt(t,e){if(e){const{input:o,colorPicker:r}=t,{value:s,format:a,colorPresets:i,colorKeywords:l,componentLabels:c,colorLabels:u}=r,{id:h,placeholder:p}=o;if(n(t,"data-id",h),n(t,"data-value",s),n(t,"data-format",a),n(t,"data-placeholder",p),pt(wt).some(t=>wt[t]!==c[t])&&n(t,"data-component-labels",JSON.stringify(c)),xt.every(t=>t===u[t])||n(t,"data-color-labels",xt.map(t=>u[t]).join(",")),i instanceof vt){const{hue:e,hueSteps:o,lightSteps:r}=i;n(t,"data-color-presets",JSON.stringify({hue:e,hueSteps:o,lightSteps:r}))}Array.isArray(i)&&i.length&&n(t,"data-color-presets",i.join(",")),l&&n(t,"data-color-keywords",l.join(",")),setTimeout(e,0)}else mt(t,"data-value"),mt(t,"data-format"),mt(t,"data-placeholder"),mt(t,"data-component-labels"),mt(t,"data-color-labels"),mt(t,"data-color-presets"),mt(t,"data-color-keywords")}e(Mt,{Color:U,ColorPalette:vt,Version:"1.0.0",getInstance:t=>{return e=t,o="color-picker",ut.get(e,o);var e,o},init:t=>new Mt(t),selector:'[data-function="color-picker"]',roundPart:u,setElementStyle:i,setAttribute:n,getBoundingClientRect:rt});let Rt=0;class Ft extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}get value(){return this.input&&this.input.value}connectedCallback(){if(this.input)return;let t=r(this,"data-id");const e=r(this,"data-value")||"#fff",s=r(this,"data-format")||"rgb",a=r(this,"data-placeholder")||"";t||(t=`color-picker-${s}-${Rt}`,Rt+=1);const i=o({tagName:"input",type:"text",className:"color-preview btn-appearance"});n(i,"id",t),n(i,"name",t),n(i,"autocomplete","off"),n(i,"spellcheck","false"),n(i,"value",e),n(i,"placeholder",a),this.append(i),this.input=i,this.colorPicker=new Mt(i),this.shadowRoot.append(o("slot")),Tt(this)}disconnectedCallback(){const t=this,{input:o,colorPicker:n,shadowRoot:r}=t;Tt(t,()=>{o.remove(),n.dispose(),r.innerHTML="",e(t,{colorPicker:void 0,input:void 0})})}}e(Ft,{Color:U,ColorPicker:Mt,ColorPalette:vt,getInstance:Mt.getInstance,Version:"1.0.0"}),customElements.define("color-picker",Ft);export{Ft as default};