@thednp/color-picker 0.0.2-alpha1 → 0.0.2-alpha2
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +2 -1
- package/dist/js/color-esm.js +94 -105
- package/dist/js/color-esm.min.js +2 -2
- package/dist/js/color-palette-esm.js +105 -119
- package/dist/js/color-palette-esm.min.js +2 -2
- package/dist/js/color-palette.js +105 -119
- package/dist/js/color-palette.min.js +2 -2
- package/dist/js/color-picker-element-esm.js +279 -375
- package/dist/js/color-picker-element-esm.min.js +2 -2
- package/dist/js/color-picker-element.js +279 -375
- package/dist/js/color-picker-element.min.js +2 -2
- package/dist/js/color-picker-esm.js +235 -323
- package/dist/js/color-picker-esm.min.js +2 -2
- package/dist/js/color-picker.js +235 -323
- package/dist/js/color-picker.min.js +2 -2
- package/dist/js/color.js +94 -105
- package/dist/js/color.min.js +2 -2
- package/package.json +7 -4
- package/src/js/color-palette.js +10 -13
- package/src/js/color-picker-element.js +46 -54
- package/src/js/color-picker.js +131 -206
- package/src/js/color.js +93 -106
- package/types/cp.d.ts +31 -29
- package/types/source/types.d.ts +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
// ColorPicker v0.0.
|
|
2
|
-
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).ColorPicker=e()}(this,(function(){"use strict";const t={};function e(e){const o=this,{type:r}=e;(t[r]?[...t[r]]:[]).forEach(t=>{const[s,a]=t;[...a].forEach(t=>{if(s===o){const[o,a]=t;o.apply(s,[e]),a&&a.once&&n(s,r,o,a)}})})}const o=(o,n,r,s)=>{t[n]||(t[n]=new Map);const a=t[n];a.has(o)||a.set(o,new Map);const i=a.get(o),{size:l}=i;i&&i.set(r,s),l||o.addEventListener(n,e,s)},n=(o,n,r,s)=>{const a=t[n],i=a&&a.get(o),l=i&&i.get(r),{options:c}=void 0!==l?l:{options:s};i&&i.has(r)&&i.delete(r),!a||i&&i.size||a.delete(o),a&&a.size||delete t[n],i&&i.size||o.removeEventListener(n,e,c)},r="ArrowDown",s="ArrowUp",a="ArrowLeft",i="ArrowRight",l="Enter",c="Space";function u(t){return t instanceof HTMLElement?t.ownerDocument:t instanceof Window?t.document:window.document}function h(t,e){const o=getComputedStyle(t);return e in o?o[e]:""}let g=0,p=0;const d=new Map;function b(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 f=[Document,Element,HTMLElement],m=[Element,HTMLElement];function w(t,e){const o=f.some(t=>e instanceof t)?e:u();return m.some(e=>t instanceof e)?t:o.querySelector(t)}function v(t,e){return(e&&f.some(t=>e instanceof t)?e:u()).getElementsByClassName(t)}const x=(t,e)=>Object.assign(t,e),$=new Map,y={set:(t,e,o)=>{const n=w(t);if(!n)return;$.has(e)||$.set(e,new Map);$.get(e).set(n,o)},getAllFor:t=>$.get(t)||null,get:(t,e)=>{const o=w(t),n=y.getAllFor(e);return o&&n&&n.get(o)||null},remove:(t,e)=>{const o=w(t),n=$.get(e);n&&o&&(n.delete(o),0===n.size&&$.delete(e))}},k=(t,e)=>{x(t.style,e)},S=(t,e)=>t.getAttribute(e);function H(t){return"true"===t||"false"!==t&&(Number.isNaN(+t)?""===t||"null"===t?null:t:+t)}const A=t=>Object.keys(t),E=t=>t.toLowerCase();const P=t=>t.focus();function L(t,e){return t.classList.contains(e)}function N(t,e){t.classList.add(e)}function C(t,e){t.classList.remove(e)}const M=(t,e,o)=>t.setAttribute(e,o),T=(t,e)=>t.removeAttribute(e),{head:R}=document,F=["transparent","currentColor","inherit","revert","initial"];function D(t){const e=Math.floor(t);return t-e<.5?e:Math.round(t)}const O=["rgb","hex","hsl","hsv","hwb"],K="[-\\+]?\\d*\\.?\\d+(?:deg|rad|grad|turn)?",I="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",V=`(?:${I})|(?:${K})`,U="(?:[,|\\s]+)",B=`(?:[\\s|\\(\\s|\\s\\(\\s]+)?(${V})${U}(${I})${U}(${I})(?:[,|\\/\\s]*)?(${I})?(?:[\\s|\\)\\s]+)?`,_={CSS_UNIT:new RegExp(V),hwb:new RegExp("hwb"+B),rgb:new RegExp("rgb(?:a)?"+B),hsl:new RegExp("hsl(?:a)?"+B),hsv:new RegExp("hsv(?:a)?"+B),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 j(t){return(""+t).includes(".")&&1===parseFloat(t)}function W(t){return(""+t).includes("%")}function z(t){return!F.includes(t)&&!["#",...O].some(e=>t.includes(e))&&["rgb(255, 255, 255)","rgb(0, 0, 0)"].every(e=>{k(R,{color:t});const o=h(R,"color");return k(R,{color:""}),o!==e})}function G(t){return Boolean(_.CSS_UNIT.exec(String(t)))}function X(t,e){let o=t;j(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 Y(t){let e=parseFloat(""+t);return(Number.isNaN(e)||e<0||e>1)&&(e=1),e}function q(t){return Math.min(1,Math.max(0,t))}function J(t){k(R,{color:t});const e=h(R,"color");return k(R,{color:""}),e}function Z(t){return D(255*t).toString(16)}function Q(t){return tt(t)/255}function tt(t){return parseInt(t,16)}function et(t){return 1===t.length?"0"+t:String(t)}function ot(t,e,o){const n=t/255,r=e/255,s=o/255,a=Math.max(n,r,s),i=Math.min(n,r,s);let l=0,c=0;const u=(a+i)/2;if(a===i)c=0,l=0;else{const t=a-i;switch(c=u>.5?t/(2-a-i):t/(a+i),a){case n:l=(r-s)/t+(r<s?6:0);break;case r:l=(s-n)/t+2;break;case s:l=(n-r)/t+4}l/=6}return{h:l,s:c,l:u}}function nt(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 rt(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=nt(i,a,t+1/3),r=nt(i,a,t),s=nt(i,a,t-1/3)}return[n,r,s]=[n,r,s].map(t=>255*t),{r:n,g:r,b:s}}function st(t,e,o){const n=t/255,r=e/255,s=o/255;let a=0,i=0;const l=Math.min(n,r,s),c=Math.max(n,r,s),u=1-c;if(c===l)return{h:0,w:l,b:u};n===l?(a=r-s,i=3):(a=r===l?s-n:n-r,i=r===l?5:1);const h=(i-a/(c-l))/6;return{h:1===h?0:h,w:l,b:u}}function at(t,e,o){if(e+o>=1){const t=e/(e+o)*255;return{r:t,g:t,b:t}}let{r:n,g:r,b:s}=rt(t,1,.5);return[n,r,s]=[n,r,s].map(t=>t/255*(1-e-o)+e).map(t=>255*t),{r:n,g:r,b:s}}function it(t,e,o){const n=t/255,r=e/255,s=o/255,a=Math.max(n,r,s),i=Math.min(n,r,s);let l=0;const c=a,u=a-i,h=0===a?0:u/a;if(a===i)l=0;else{switch(a){case n:l=(r-s)/u+(r<s?6:0);break;case r:l=(s-n)/u+2;break;case s:l=(n-r)/u+4}l/=6}return{h:l,s:h,v:c}}function lt(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;let g=[s,c,l,l,u,s][h],p=[u,s,s,c,l,l][h],d=[l,l,u,s,s,c][h];return[g,p,d]=[g,p,d].map(t=>255*t),{r:g,g:p,b:d}}function ct(t,e,o,n){const r=[et(D(t).toString(16)),et(D(e).toString(16)),et(D(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 ut(t,e,o,n,r){const s=[et(D(t).toString(16)),et(D(e).toString(16)),et(D(o).toString(16)),et(Z(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 ht(t){let e=E(t.trim());if(0===e.length)return{r:0,g:0,b:0,a:1};let o=!1;if(z(e))e=J(e),o=!0;else if(F.includes(e)){return{r:0,g:0,b:0,a:"transparent"===e?0:1,format:"rgb",ok:!0}}let[,n,r,s,a]=_.rgb.exec(e)||[];return n&&r&&s?{r:n,g:r,b:s,a:void 0!==a?a:1,format:"rgb"}:([,n,r,s,a]=_.hsl.exec(e)||[],n&&r&&s?{h:n,s:r,l:s,a:void 0!==a?a:1,format:"hsl"}:([,n,r,s,a]=_.hsv.exec(e)||[],n&&r&&s?{h:n,s:r,v:s,a:void 0!==a?a:1,format:"hsv"}:([,n,r,s,a]=_.hwb.exec(e)||[],n&&r&&s?{h:n,w:r,b:s,a:void 0!==a?a:1,format:"hwb"}:([,n,r,s,a]=_.hex8.exec(e)||[],n&&r&&s&&a?{r:tt(n),g:tt(r),b:tt(s),a:Q(a),format:o?"rgb":"hex"}:([,n,r,s]=_.hex6.exec(e)||[],n&&r&&s?{r:tt(n),g:tt(r),b:tt(s),format:o?"rgb":"hex"}:([,n,r,s,a]=_.hex4.exec(e)||[],n&&r&&s&&a?{r:tt(n+n),g:tt(r+r),b:tt(s+s),a:Q(a+a),format:o?"rgb":"hex"}:([,n,r,s]=_.hex3.exec(e)||[],!!(n&&r&&s)&&{r:tt(n+n),g:tt(r+r),b:tt(s+s),format:o?"rgb":"hex"})))))))}function gt(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,h=null,g=!1;const p="object"==typeof o&&o.format;let d=p&&O.includes(p)?p:"rgb";return"string"==typeof t&&(o=ht(t),o&&(g=!0)),"object"==typeof o&&(G(o.r)&&G(o.g)&&G(o.b)?(({r:u,g:h,b:l}=o),[u,h,l]=[u,h,l].map(t=>255*X(t,W(t)?100:255)),e={r:u,g:h,b:l},g=!0,d="rgb"):G(o.h)&&G(o.s)&&G(o.v)?(({h:c,s:r,v:s}=o),c="number"==typeof c?c:X(c,360),r="number"==typeof r?r:X(r,100),s="number"==typeof s?s:X(s,100),e=lt(c,r,s),g=!0,d="hsv"):G(o.h)&&G(o.s)&&G(o.l)?(({h:c,s:r,l:a}=o),c="number"==typeof c?c:X(c,360),r="number"==typeof r?r:X(r,100),a="number"==typeof a?a:X(a,100),e=rt(c,r,a),g=!0,d="hsl"):G(o.h)&&G(o.w)&&G(o.b)&&(({h:c,w:i,b:l}=o),c="number"==typeof c?c:X(c,360),i="number"==typeof i?i:X(i,100),l="number"==typeof l?l:X(l,100),e=at(c,i,l),g=!0,d="hwb"),G(o.a)&&(n=o.a,n=W(""+n)||parseFloat(n)>1?X(n,100):n)),void 0===o&&(g=!0),{ok:g,format:d,r:Math.min(255,Math.max(e.r,0)),g:Math.min(255,Math.max(e.g,0)),b:Math.min(255,Math.max(e.b,0)),a:Y(n)}}class pt{constructor(t,e){let o=t;const n=e&&O.includes(e)?e:"rgb";if(o instanceof pt&&(o=gt(o)),"number"==typeof o){o=`#${2===(""+o).length?"0":"00"}${o}`}const{r:r,g:s,b:a,a:i,ok:l,format:c}=gt(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;const a=t/255,i=e/255,l=o/255;return n=a<=.03928?a/12.92:((a+.055)/1.055)**2.4,r=i<=.03928?i/12.92:((i+.055)/1.055)**2.4,s=l<=.03928?l/12.92:((l+.055)/1.055)**2.4,.2126*n+.7152*r+.0722*s}get brightness(){const{r:t,g:e,b:o}=this;return(299*t+587*e+114*o)/1e3}toRgb(){const{r:t,g:e,b:o,a:n}=this;return{r:t,g:e,b:o,a:D(100*n)/100}}toRgbString(){const{r:t,g:e,b:o,a:n}=this.toRgb(),[r,s,a]=[t,e,o].map(D);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(D);return`rgb(${r} ${s} ${a}${1===n?"":` / ${D(100*n)}%`})`}toHex(t){const{r:e,g:o,b:n,a:r}=this.toRgb();return 1===r?ct(e,o,n,t):ut(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 ut(e,o,n,r,t)}toHex8String(t){return"#"+this.toHex8(t)}toHsv(){const{r:t,g:e,b:o,a:n}=this.toRgb(),{h:r,s:s,v:a}=it(t,e,o);return{h:r,s:s,v:a,a:n}}toHsl(){const{r:t,g:e,b:o,a:n}=this.toRgb(),{h:r,s:s,l:a}=ot(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=D(360*t),e=D(100*e),o=D(100*o),n=D(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=D(360*t),e=D(100*e),o=D(100*o),n=D(100*n);return`hsl(${t}deg ${e}% ${o}%${n<100?` / ${D(n)}%`:""})`}toHwb(){const{r:t,g:e,b:o,a:n}=this,{h:r,w:s,b:a}=st(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=D(360*t),e=D(100*e),o=D(100*o),n=D(100*n);return`hwb(${t}deg ${e}% ${o}%${n<100?` / ${D(n)}%`:""})`}setAlpha(t){return this.a=Y(t),this}saturate(t){if("number"!=typeof t)return this;const{h:e,s:o,l:n}=this.toHsl(),{r:r,g:s,b:a}=rt(e,q(o+t/100),n);return x(this,{r:r,g:s,b:a}),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:e,s:o,l:n}=this.toHsl(),{r:r,g:s,b:a}=rt(e,o,q(n+t/100));return x(this,{r:r,g:s,b:a}),this}darken(t){return"number"==typeof t?this.lighten(-t):this}spin(t){if("number"!=typeof t)return this;const{h:e,s:o,l:n}=this.toHsl(),{r:r,g:s,b:a}=rt(q((360*e+t)%360/360),o,n);return x(this,{r:r,g:s,b:a}),this}clone(){return new pt(this)}toString(t){const{format:e}=this;return"hex"===e?this.toHexString(t):"hsl"===e?this.toHslString():"hwb"===e?this.toHwbString():this.toRgbString()}}x(pt,{ANGLES:"deg|rad|grad|turn",CSS_ANGLE:K,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:I,CSS_UNIT2:V,PERMISSIVE_MATCH:B,matchers:_,isOnePointZero:j,isPercentage:W,isValidCSSUnit:G,isColorName:z,pad2:et,clamp01:q,bound01:X,boundAlpha:Y,getRGBFromName:J,convertHexToDecimal:Q,convertDecimalToHex:Z,rgbToHsl:ot,rgbToHex:ct,rgbToHsv:it,rgbToHwb:st,rgbaToHex:ut,hslToRgb:rt,hsvToRgb:lt,hueToRgb:nt,hwbToRgb:at,parseIntFromHex:tt,stringInputToObject:ht,inputToRGB:gt,roundPart:D,getElementStyle:h,setElementStyle:k,ObjectAssign:x});class dt{constructor(...t){let e=0,o=12,n=10,r=[.5];if(3===t.length)[e,o,n]=t;else{if(2!==t.length)throw TypeError("ColorPalette requires minimum 2 arguments");if([o,n]=t,[o,n].some(t=>t<1))throw TypeError("ColorPalette: when 2 arguments used, both must be larger than 0.")}const s=[],a=360/o,i=D((n-(n%2?1:0))/2),l=100/(n+(n%2?0:1))/100;let c=.25;c=[4,5].includes(n)?.2:c,c=[6,7].includes(n)?.15:c,c=[8,9].includes(n)?.11:c,c=[10,11].includes(n)?.09:c,c=[12,13].includes(n)?.075:c,c=n>13?l:c;for(let t=1;t<i+1;t+=1)r=[...r,.5+c*t];for(let t=1;t<n-i;t+=1)r=[.5-c*t,...r];for(let t=0;t<o;t+=1){const o=(e+t*a)%360/360;r.forEach(t=>{s.push(new pt({h:o,s:1,l:t}))})}this.hue=e,this.hueSteps=o,this.lightSteps=n,this.colors=s}}x(dt,{Color:pt});const bt={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"},ft=["white","black","grey","red","orange","brown","gold","olive","yellow","lime","green","teal","cyan","blue","violet","magenta","pink"];function mt(t){try{JSON.parse(t)}catch(t){return!1}return!0}const wt=t=>t.toUpperCase();function vt(t){if("string"==typeof t)return u().createElement(t);const{tagName:e}=t,o={...t},n=vt(e);return delete o.tagName,x(n,o),n}function xt(t,e){if("string"==typeof e)return u().createElementNS(t,e);const{tagName:o}=e,n={...e},r=xt(t,o);return delete n.tagName,x(r,n),r}function $t(t,e,o){const{input:n,format:r,componentLabels:s}=t,{defaultsLabel:a,presetsLabel:i}=s,l="color-options"===o,c=e instanceof dt,u=l?i:a;let h=c?e.colors:e;h=h instanceof Array?h:[];const g=h.length,{lightSteps:p}=c?e:{lightSteps:null},d=p||[9,10].find(t=>g>2*t&&!(g%t))||5,b=l&&g>d;let f=2;f=b&&g>=2*d?3:f,f=g>=3*d?4:f,f=g>=4*d?5:f;const m=f-(g<3*d?1:2),w=b&&g>m*d;let v=o;v+=w?" scrollable":"",v+=b?" multiline":"";const x=b?"1px":"0.25rem";let $=b?1.75:2;$=d>5&&b?1.5:$;const y=(m||1)*$+"rem",H=`calc(${f} * ${$}rem + ${f-1} * ${x})`,E=vt({tagName:"ul",className:v});var P,L;return M(E,"role","listbox"),M(E,"aria-label",u),w&&(P=E,A(L={"--grid-item-size":$+"rem","--grid-fit":d,"--grid-gap":x,"--grid-height":y,"--grid-hover-height":H}).forEach(t=>{P.style.setProperty(t,L[t])})),h.forEach(t=>{let[e,o]="string"==typeof t?t.trim().split(":"):[];t instanceof pt&&(e=t.toHexString(),o=e);const s=new pt(t instanceof pt?t:e,r).toString()===S(n,"value"),a=vt({tagName:"li",className:"color-option"+(s?" active":""),innerText:""+(o||e)});M(a,"tabindex","0"),M(a,"data-value",""+e),M(a,"role","option"),M(a,"aria-selected",s?"true":"false"),l&&k(a,{backgroundColor:e}),E.append(a)}),E}function yt(t){const{input:e,parent:o,format:n,id:r,componentLabels:s,colorKeywords:a,colorPresets:i}=t,l=S(e,"value")||"#fff",{toggleLabel:c,pickerLabel:u,formatLabel:h,hexLabel:g}=s,p=F.includes(l)?"#fff":l;t.color=new pt(p,n);const d="hex"===n?g:wt(n),b=vt({id:"picker-btn-"+r,tagName:"button",className:"picker-toggle btn-appearance"});M(b,"aria-expanded","false"),M(b,"aria-haspopup","true"),b.append(vt({tagName:"span",className:"v-hidden",innerText:`${u}. ${h}: ${d}`}));const f=vt({tagName:"div",className:"color-dropdown picker"});M(f,"aria-labelledby","picker-btn-"+r),M(f,"role","group");const m=function(t){const{format:e,componentLabels:o}=t,{hueLabel:n,alphaLabel:r,lightnessLabel:s,saturationLabel:a,whitenessLabel:i,blacknessLabel:l}=o,c="hsl"===e?360:100,u="hsl"===e?100:360;let h="hsl"===e?`${n} & ${s}`:`${s} & ${a}`;h="hwb"===e?`${i} & ${l}`:h;const g="hsl"===e?""+a:""+n,p=vt({tagName:"div",className:"color-controls "+e});return[{i:1,c:"color-pointer",l:h,min:0,max:c},{i:2,c:"color-slider",l:g,min:0,max:u},{i:3,c:"color-slider",l:r,min:0,max:100}].forEach(t=>{const{i:e,c:o,l:n,min:r,max:s}=t,a=vt({tagName:"div",className:"color-control"});M(a,"role","presentation"),a.append(vt({tagName:"div",className:"visual-control visual-control"+e}));const i=vt({tagName:"div",className:o+" knob",ariaLive:"polite"});M(i,"aria-label",n),M(i,"role","slider"),M(i,"tabindex","0"),M(i,"aria-valuemin",""+r),M(i,"aria-valuemax",""+s),a.append(i),p.append(a)}),p}(t),w=function(t){const{format:e,id:o,componentLabels:n}=t,r=vt({tagName:"div",className:"color-form "+e});let s=["hex"];return"rgb"===e?s=["red","green","blue","alpha"]:"hsl"===e?s=["hue","saturation","lightness","alpha"]:"hwb"===e&&(s=["hue","whiteness","blackness","alpha"]),s.forEach(t=>{const[s]="hex"===e?["#"]:wt(t).split(""),a=`color_${e}_${t}_${o}`,i=n[t+"Label"],l=vt({tagName:"label"});M(l,"for",a),l.append(vt({tagName:"span",ariaHidden:"true",innerText:s+":"}),vt({tagName:"span",className:"v-hidden",innerText:i}));const c=vt({tagName:"input",id:a,type:"hex"===e?"text":"number",value:"alpha"===t?"100":"0",className:"color-input "+t});M(c,"autocomplete","off"),M(c,"spellcheck","false");let u="100",h="1";"alpha"!==t&&("rgb"===e?(u="255",h="1"):"hue"===t&&(u="360",h="1")),x(c,{min:"0",max:u,step:h}),r.append(l,c)}),r}(t);if(f.append(m,w),e.before(b),o.append(f),a||i){const e=vt({tagName:"div",className:"color-dropdown scrollable menu"});if(i instanceof Array&&i.length||i instanceof dt&&i.colors){const o=$t(t,i,"color-options");e.append(o)}if(a&&a.length){const o=$t(t,a,"color-defaults");e.append(o)}const n=vt({tagName:"button",className:"menu-toggle btn-appearance"});M(n,"tabindex","-1"),M(n,"aria-expanded","false"),M(n,"aria-haspopup","true");const r=encodeURI("http://www.w3.org/2000/svg"),s=xt(r,{tagName:"svg"});M(s,"xmlns",r),M(s,"viewBox","0 0 512 512"),M(s,"aria-hidden","true");const l=xt(r,{tagName:"path"});M(l,"d","M98,158l157,156L411,158l27,27L255,368L71,185L98,158z"),M(l,"fill","#fff"),s.append(l),n.append(vt({tagName:"span",className:"v-hidden",innerText:""+c}),s),o.append(n,e)}a&&F.includes(l)&&(t.value=l),M(e,"tabindex","-1")}const kt={componentLabels:bt,colorLabels:ft,format:"rgb",colorPresets:!1,colorKeywords:!1};function St(t,e){const r=e?o:n,{input:s,pickerToggle:a,menuToggle:i}=t;r(s,"focusin",t.showPicker),r(a,"click",t.togglePicker),r(s,"keydown",t.keyToggle),i&&r(i,"click",t.toggleMenu)}function Ht(t,e){const r=e?o:n,{input:s,colorMenu:a,parent:i}=t,l=u(s),c=function(t){if(null==t)return window;if(!(t instanceof Window)){const{ownerDocument:e}=t;return e&&e.defaultView||window}return t}(s),h="ontouchstart"in l?{down:"touchstart",move:"touchmove",up:"touchend"}:{down:"mousedown",move:"mousemove",up:"mouseup"};r(t.controls,h.down,t.pointerDown),t.controlKnobs.forEach(e=>r(e,"keydown",t.handleKnobs)),r(c,"scroll",t.handleScroll),r(c,"resize",t.update),[s,...t.inputs].forEach(e=>r(e,"change",t.changeHandler)),a&&(r(a,"click",t.menuClickHandler),r(a,"keydown",t.menuKeyHandler)),r(l,h.move,t.pointerMove),r(l,h.up,t.pointerUp),r(i,"focusout",t.handleFocusOut),r(c,"keyup",t.handleDismiss)}function At(t){var e,o;e=t.input,o=new CustomEvent("colorpicker.change"),e.dispatchEvent(o)}function Et(t){t&&["bottom","top"].forEach(e=>C(t,e))}function Pt(t,e){const{colorPicker:o,colorMenu:n,menuToggle:r,pickerToggle:s,parent:a}=t,i=e===o,l=i?n:o,c=i?r:s,u=i?s:r;L(a,"open")||N(a,"open"),l&&(C(l,"show"),Et(l)),N(e,"bottom"),e.offsetHeight,N(e,"show"),i&&t.update(),t.isOpen||(Ht(t,!0),t.updateDropdownPosition(),t.isOpen=!0,M(t.input,"tabindex","0"),r&&M(r,"tabindex","0")),M(u,"aria-expanded","true"),c&&M(c,"aria-expanded","false")}class Lt{constructor(t,e){const o=this,n=w(t);if(!n)throw new TypeError(`ColorPicker target ${t} cannot be found.`);o.input=n;const r=function t(e,o){return e?e.closest(o)||t(e.getRootNode().host,o):null}(n,".color-picker,color-picker");if(!r)throw new TypeError("ColorPicker requires a specific markup to work.");o.parent=r,o.id=function t(e,o){let n=o?g:p;if(o){const r=t(e),s=d.get(r)||new Map;d.has(r)||d.set(r,s),s.has(o)?n=s.get(o):(s.set(o,n),g+=1)}else{const t=e.id||e;d.has(t)?n=d.get(t):(d.set(t,n),p+=1)}return n}(n,"color-picker"),o.dragElement=null,o.isOpen=!1,o.controlPositions={c1x:0,c1y:0,c2y:0,c3y:0},o.colorLabels={},o.colorKeywords=void 0,o.colorPresets=void 0;const{format:s,componentLabels:a,colorLabels:i,colorKeywords:l,colorPresets:c}=function(t,e,o,n){const r={...t.dataset},s={},a={};return A(r).forEach(t=>{const e=n&&t.includes(n)?t.replace(n,"").replace(/[A-Z]/,t=>E(t)):t;a[e]=H(r[t])}),A(o).forEach(t=>{o[t]=H(o[t])}),A(e).forEach(n=>{s[n]=n in o?o[n]:n in a?a[n]:"title"===n?S(t,"title"):e[n]}),s}(this.isCE?r:n,kt,e||{});let u=ft;i instanceof Array&&17===i.length?u=i:i&&17===i.split(",").length&&(u=i.split(",")),ft.forEach((t,e)=>{o.colorLabels[t]=u[e].trim()});const h=x({},bt),b=a&&mt(a)?JSON.parse(a):a||{};if(o.componentLabels=x(h,b),o.color=new pt("white",s),o.format=s,l instanceof Array?o.colorKeywords=l:"string"==typeof l&&l.length&&(o.colorKeywords=l.split(",")),c instanceof Array)o.colorPresets=c;else if("string"==typeof c&&c.length)if(mt(c)){const{hue:t,hueSteps:e,lightSteps:n}=JSON.parse(c);o.colorPresets=new dt(t,e,n)}else o.colorPresets=c.split(",").map(t=>t.trim());o.showPicker=o.showPicker.bind(o),o.togglePicker=o.togglePicker.bind(o),o.toggleMenu=o.toggleMenu.bind(o),o.menuClickHandler=o.menuClickHandler.bind(o),o.menuKeyHandler=o.menuKeyHandler.bind(o),o.pointerDown=o.pointerDown.bind(o),o.pointerMove=o.pointerMove.bind(o),o.pointerUp=o.pointerUp.bind(o),o.update=o.update.bind(o),o.handleScroll=o.handleScroll.bind(o),o.handleFocusOut=o.handleFocusOut.bind(o),o.changeHandler=o.changeHandler.bind(o),o.handleDismiss=o.handleDismiss.bind(o),o.keyToggle=o.keyToggle.bind(o),o.handleKnobs=o.handleKnobs.bind(o),yt(o);const[f,m]=v("color-dropdown",r);o.pickerToggle=w(".picker-toggle",r),o.menuToggle=w(".menu-toggle",r),o.colorPicker=f,o.colorMenu=m,o.inputs=[...v("color-input",r)];const[$]=v("color-controls",r);o.controls=$,o.controlKnobs=[...v("knob",$)],o.visuals=[...v("visual-control",$)],o.update(),St(o,!0),y.set(n,"color-picker",o)}get value(){return this.input.value}set value(t){this.input.value=t}get hasNonColor(){return this.colorKeywords instanceof Array&&this.colorKeywords.some(t=>F.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 pt(t).isValid}updateVisuals(){const{format:t,controlPositions:e,visuals:o}=this,[n,r,s]=o,{offsetWidth:a,offsetHeight:i}=n,l="hsl"===t?e.c1x/a:e.c2y/i,{r:c,g:u,b:h}=pt.hslToRgb(l,1,.5),g="linear-gradient(rgb(255,255,255) 0%, rgb(255,255,255) 100%)",p=1-e.c3y/i,d=D(100*p)/100;if("hsl"!==t){const t=new pt({h:l,s:1,l:.5,a:p}).toRgbString(),e="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%)";k(n,{background:`linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,${d}) 100%),\n linear-gradient(to right, rgba(255,255,255,${d}) 0%, ${t} 100%),\n ${g}`}),k(r,{background:e})}else{const t=D(e.c2y/i*100),o=new pt({r:255,g:0,b:0,a:p}).saturate(-t).toRgbString(),s=new pt({r:255,g:255,b:0,a:p}).saturate(-t).toRgbString(),a=new pt({r:0,g:255,b:0,a:p}).saturate(-t).toRgbString(),l=new pt({r:0,g:255,b:255,a:p}).saturate(-t).toRgbString(),b=new pt({r:0,g:0,b:255,a:p}).saturate(-t).toRgbString(),f=new pt({r:255,g:0,b:255,a:p}).saturate(-t).toRgbString(),m=new pt({r:255,g:0,b:0,a:p}).saturate(-t).toRgbString();k(n,{background:`${`linear-gradient(rgba(255,255,255,${d}) 0%, rgba(255,255,255,0) 50%),\n linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,${d}) 100%)`},${`linear-gradient(to right,\n ${o} 0%, ${s} 16.67%, ${a} 33.33%, ${l} 50%,\n ${b} 66.67%, ${f} 83.33%, ${m} 100%)`},${g}`});const{r:w,g:v,b:x}=new pt({r:c,g:u,b:h}).greyscale().toRgb();k(r,{background:`linear-gradient(rgb(${c},${u},${h}) 0%, rgb(${w},${v},${x}) 100%)`})}k(s,{background:`linear-gradient(rgba(${c},${u},${h},1) 0%,rgba(${c},${u},${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(t){const{activeElement:e}=u(this.input);("touchmove"===t.type&&this.dragElement||e&&this.controlKnobs.includes(e))&&(t.stopPropagation(),t.preventDefault()),this.updateDropdownPosition()}menuKeyHandler(t){const{target:e,code:o}=t,{previousElementSibling:n,nextElementSibling:u,parentElement:g}=e,p=g&&L(g,"color-options"),d=[...g.children],b=p&&h(g,"grid-template-columns").split(" ").length,f=d.indexOf(e),m=f>-1&&b&&d[f-b],w=f>-1&&b&&d[f+b];[r,s,c].includes(o)&&t.preventDefault(),p?m&&o===s?P(m):w&&o===r?P(w):n&&o===a?P(n):u&&o===i&&P(u):n&&[a,s].includes(o)?P(n):u&&[i,r].includes(o)&&P(u),[l,c].includes(o)&&this.menuClickHandler({target:e})}menuClickHandler(t){const e=this,{target:o}=t,{colorMenu:n}=e,r=(S(o,"data-value")||"").trim();if(!r.length)return;const s=w("li.active",n);let a=F.includes(r)?"white":r;a="transparent"===r?"rgba(0,0,0,0)":r;const{r:i,g:l,b:c,a:u}=new pt(a);x(e.color,{r:i,g:l,b:c,a:u}),e.update(),s!==o&&(s&&(C(s,"active"),T(s,"aria-selected")),N(o,"active"),M(o,"aria-selected","true"),F.includes(r)&&(e.value=r),At(e))}pointerDown(t){const e=this,{type:o,target:n,touches:r,pageX:s,pageY:a}=t,{colorMenu:i,visuals:l,controlKnobs:c}=e,[u,h,g]=l,[p,d,f]=c,m=L(n,"visual-control")?n:w(".visual-control",n.parentElement),v=b(m),x="touchstart"===o?r[0].pageX:s,$="touchstart"===o?r[0].pageY:a,y=x-window.pageXOffset-v.left,k=$-window.pageYOffset-v.top;if(n===u||n===p?(e.dragElement=m,e.changeControl1(y,k)):n===h||n===d?(e.dragElement=m,e.changeControl2(k)):n!==g&&n!==f||(e.dragElement=m,e.changeAlpha(k)),i){const t=w("li.active",i);t&&(C(t,"active"),T(t,"aria-selected"))}t.preventDefault()}pointerUp({target:t}){const e=this,{parent:o}=e,n=u(o),r=null!==w(".color-picker,color-picker.open",n),s=n.getSelection();e.dragElement||s.toString().length||o.contains(t)||e.hide(r),e.dragElement=null}pointerMove(t){const e=this,{dragElement:o,visuals:n}=e,[r,s,a]=n,{type:i,touches:l,pageX:c,pageY:u}=t;if(!o)return;const h=b(o),g="touchmove"===i?l[0].pageX:c,p="touchmove"===i?l[0].pageY:u,d=g-window.pageXOffset-h.left,f=p-window.pageYOffset-h.top;o===r&&e.changeControl1(d,f),o===s&&e.changeControl2(f),o===a&&e.changeAlpha(f)}handleKnobs(t){const{target:e,code:o}=t,n=this;if(![s,r,a,i].includes(o))return;t.preventDefault();const{format:l,controlKnobs:c,visuals:h}=n,{offsetWidth:g,offsetHeight:p}=h[0],[d,b,f]=c,{activeElement:m}=u(d),w=p/("hsl"===l?100:360);if(c.find(t=>t===m)){let c=0,u=0;if(e===d){const t=g/("hsl"===l?360:100);[a,i].includes(o)?n.controlPositions.c1x+=o===i?t:-t:[s,r].includes(o)&&(n.controlPositions.c1y+=o===r?w:-w),c=n.controlPositions.c1x,u=n.controlPositions.c1y,n.changeControl1(c,u)}else e===b?(n.controlPositions.c2y+=[r,i].includes(o)?w:-w,u=n.controlPositions.c2y,n.changeControl2(u)):e===f&&(n.controlPositions.c3y+=[r,i].includes(o)?w:-w,u=n.controlPositions.c3y,n.changeAlpha(u));n.handleScroll(t)}}changeHandler(){const t=this;let e;const{inputs:o,format:n,value:r,input:s,controlPositions:a,visuals:i}=t,{activeElement:l}=u(s),{offsetHeight:c}=i[0],[h,,,g]=o,[p,d,b,f]="rgb"===n?o.map(t=>parseFloat(t.value)/(t===g?100:1)):o.map(t=>parseFloat(t.value)/(t!==h?100:360)),m=t.hasNonColor&&F.includes(r),w=g?f:1-a.c3y/c;if(l===s||l&&o.includes(l)){e=l===s?m?"white":r:"hex"===n?h.value:"hsl"===n?{h:p,s:d,l:b,a:w}:"hwb"===n?{h:p,w:d,b:b,a:w}:{r:p,g:d,b:b,a:w};const{r:o,g:a,b:i,a:c}=new pt(e);x(t.color,{r:o,g:a,b:i,a:c}),t.setControlPositions(),t.updateAppearance(),t.updateInputs(),t.updateControls(),t.updateVisuals(),l===s&&m&&(t.value=r)}}changeControl1(t,e){let[o,n]=[0,0];const{format:r,controlPositions:s,visuals:a}=this,{offsetHeight:i,offsetWidth:l}=a[0];t>l?o=l:t>=0&&(o=t),e>i?n=i:e>=0&&(n=e);const c="hsl"===r?o/l:s.c2y/i,u="hsl"===r?1-s.c2y/i:o/l,h=1-n/i,g=1-s.c3y/i,p="hsl"===r?{h:c,s:u,l:h,a:g}:{h:c,s:u,v:h,a:g},{r:d,g:b,b:f,a:m}=new pt(p);x(this.color,{r:d,g:b,b:f,a:m}),this.controlPositions.c1x=o,this.controlPositions.c1y=n,this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals()}changeControl2(t){const{format:e,controlPositions:o,visuals:n}=this,{offsetHeight:r,offsetWidth:s}=n[0];let a=0;t>r?a=r:t>=0&&(a=t);const i="hsl"===e?o.c1x/s:a/r,l="hsl"===e?1-a/r:o.c1x/s,c=1-o.c1y/r,u=1-o.c3y/r,h="hsl"===e?{h:i,s:l,l:c,a:u}:{h:i,s:l,v:c,a:u},{r:g,g:p,b:d,a:b}=new pt(h);x(this.color,{r:g,g:p,b:d,a:b}),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=b(t),{top:r,bottom:s}=n,{offsetHeight:a}=t,i=(l=t,u(l).documentElement).clientHeight;var l;const c=L(e,"show")?e:o;if(!c)return;const{offsetHeight:h}=c,g=i-s,p=r,d=r+h+a>i,f=r-h<0;(L(c,"bottom")||!f)&&g<p&&d?(C(c,"bottom"),N(c,"top")):(C(c,"top"),N(c,"bottom"))}setControlPositions(){const{format:t,visuals:e,color:o,hsl:n,hsv:r}=this,{offsetHeight:s,offsetWidth:a}=e[0],i=o.a,l=n.h,c="hsl"!==t?r.s:n.s,u="hsl"!==t?r.v:n.l;this.controlPositions.c1x="hsl"!==t?c*a:l*a,this.controlPositions.c1y=(1-u)*s,this.controlPositions.c2y="hsl"!==t?l*s:(1-c)*s,this.controlPositions.c3y=(1-i)*s}updateAppearance(){const t=this,{componentLabels:e,colorLabels:o,color:n,parent:r,hsl:s,hsv:a,hex:i,format:l,controlKnobs:c}=t,{appearanceLabel:u,hexLabel:h,valueLabel:g}=e,{r:p,g:d,b:b}=n.toRgb(),[f,m,w]=c,v=D(360*s.h),x=n.a,$=D(100*("hsl"===l?s.s:a.s)),y=D(100*s.l),S=100*a.v;let H;if(100===y&&0===$)H=o.white;else if(0===y)H=o.black;else if(0===$)H=o.grey;else if(v<15||v>=345)H=o.red;else if(v>=15&&v<45)H=S>80&&$>80?o.orange:o.brown;else if(v>=45&&v<75){const t=v>=54&&v<75&&S<80;H=v>46&&v<54&&S<80&&$>90?o.gold:o.yellow,H=t?o.olive:H}else v>=75&&v<155?H=S<68?o.green:o.lime:v>=155&&v<175?H=o.teal:v>=175&&v<195?H=o.cyan:v>=195&&v<255?H=o.blue:v>=255&&v<270?H=o.violet:v>=270&&v<295?H=o.magenta:v>=295&&v<345&&(H=o.pink);let A=`${h} ${i.split("").join(" ")}`;if("hsl"===l)A=`HSL: ${v}°, ${$}%, ${y}%`,M(f,"aria-description",`${g}: ${A}. ${u}: ${H}.`),M(f,"aria-valuetext",`${v}° & ${y}%`),M(f,"aria-valuenow",""+v),M(m,"aria-valuetext",$+"%"),M(m,"aria-valuenow",""+$);else if("hwb"===l){const{hwb:e}=t,o=D(100*e.w),n=D(100*e.b);A=`HWB: ${v}°, ${o}%, ${n}%`,M(f,"aria-description",`${g}: ${A}. ${u}: ${H}.`),M(f,"aria-valuetext",`${o}% & ${n}%`),M(f,"aria-valuenow",""+o),M(m,"aria-valuetext",v+"%"),M(m,"aria-valuenow",""+v)}else A="rgb"===l?`RGB: ${p}, ${d}, ${b}`:A,M(m,"aria-description",`${g}: ${A}. ${u}: ${H}.`),M(f,"aria-valuetext",`${y}% & ${$}%`),M(f,"aria-valuenow",""+y),M(m,"aria-valuetext",v+"°"),M(m,"aria-valuenow",""+v);const E=D(100*x);M(w,"aria-valuetext",E+"%"),M(w,"aria-valuenow",""+E);const P=n.toString();k(t.input,{backgroundColor:P}),t.isDark?(L(r,"txt-light")&&C(r,"txt-light"),L(r,"txt-dark")||N(r,"txt-dark")):(L(r,"txt-dark")&&C(r,"txt-dark"),L(r,"txt-light")||N(r,"txt-light"))}updateControls(){const{controlKnobs:t,controlPositions:e}=this;let{c1x:o,c1y:n,c2y:r,c3y:s}=e;const[a,i,l]=t;[o,n,r,s]=[o,n,r,s].map(D),k(a,{transform:`translate3d(${o-4}px,${n-4}px,0)`}),k(i,{transform:`translate3d(0,${r-4}px,0)`}),k(l,{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,u]=r,h=D(100*s.a),g=D(360*a.h);let p;if("hex"===n)p=e.color.toHexString(!0),i.value=e.hex;else if("hsl"===n){const t=D(100*a.l),o=D(100*a.s);p=e.color.toHslString(),i.value=""+g,l.value=""+o,c.value=""+t,u.value=""+h}else if("hwb"===n){const{w:t,b:o}=e.hwb,n=D(100*t),r=D(100*o);p=e.color.toHwbString(),i.value=""+g,l.value=""+n,c.value=""+r,u.value=""+h}else if("rgb"===n){let{r:t,g:o,b:n}=e.rgb;[t,o,n]=[t,o,n].map(D),p=e.color.toRgbString(),i.value=""+t,l.value=""+o,c.value=""+n,u.value=""+h}e.value=""+p,t||p===o||At(e)}keyToggle(t){const e=this,{menuToggle:o}=e,{activeElement:n}=u(o),{code:r}=t;[l,c].includes(r)&&(o&&n===o||!n)&&(t.preventDefault(),n?e.toggleMenu():e.togglePicker(t))}togglePicker(t){t.preventDefault();const e=this,{colorPicker:o}=e;e.isOpen&&L(o,"show")?e.hide(!0):Pt(e,o)}showPicker(){const t=this,{colorPicker:e}=t;["top","bottom"].some(t=>L(e,t))||Pt(t,e)}toggleMenu(){const t=this,{colorMenu:e}=t;t.isOpen&&L(e,"show")?t.hide(!0):Pt(t,e)}hide(t){const e=this;if(e.isOpen){const{pickerToggle:o,menuToggle:n,colorPicker:r,colorMenu:s,parent:a,input:i}=e,l=L(r,"show"),c=l?r:s,u=l?o:n,g=c&&function(t){const e=h(t,"transitionProperty"),o=h(t,"transitionDuration"),n=o.includes("ms")?1:1e3,r=e&&"none"!==e?parseFloat(o)*n:0;return Number.isNaN(r)?0:r}(c);c&&(C(c,"show"),M(u,"aria-expanded","false"),setTimeout(()=>{Et(c),w(".show",a)||(C(a,"open"),Ht(e),e.isOpen=!1)},g)),e.isValid||(e.value=e.color.toString()),t||P(o),M(i,"tabindex","-1"),n&&M(n,"tabindex","-1")}}dispose(){const{input:t,parent:e}=this;this.hide(!0),St(this),[...e.children].forEach(e=>{e!==t&&e.remove()}),T(t,"tabindex"),k(t,{backgroundColor:""}),["txt-light","txt-dark"].forEach(t=>C(e,t)),y.remove(t,"color-picker")}}return x(Lt,{Color:pt,ColorPalette:dt,Version:"0.0.2alpha1",getInstance:t=>{return e=t,o="color-picker",y.get(e,o);var e,o},init:t=>new Lt(t),selector:'[data-function="color-picker"]',roundPart:D,setElementStyle:k,setAttribute:M,getBoundingClientRect:b}),Lt}));
|
|
1
|
+
// ColorPicker v0.0.2alpha2 | thednp © 2022 | MIT-License
|
|
2
|
+
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).ColorPicker=e()}(this,(function(){"use strict";const t={};function e(e){const o=this,{type:r}=e;(t[r]?[...t[r]]:[]).forEach(t=>{const[s,a]=t;[...a].forEach(t=>{if(s===o){const[o,a]=t;o.apply(s,[e]),a&&a.once&&n(s,r,o,a)}})})}const o=(o,n,r,s)=>{t[n]||(t[n]=new Map);const a=t[n];a.has(o)||a.set(o,new Map);const i=a.get(o),{size:l}=i;i&&i.set(r,s),l||o.addEventListener(n,e,s)},n=(o,n,r,s)=>{const a=t[n],i=a&&a.get(o),l=i&&i.get(r),{options:c}=void 0!==l?l:{options:s};i&&i.has(r)&&i.delete(r),!a||i&&i.size||a.delete(o),a&&a.size||delete t[n],i&&i.size||o.removeEventListener(n,e,c)},r="ArrowDown",s="ArrowUp",a="ArrowLeft",i="ArrowRight",l="Enter",c="Space";function u(t){return t instanceof HTMLElement?t.ownerDocument:t instanceof Window?t.document:window.document}function h(t){return u(t).documentElement}function g(t,e){const o=getComputedStyle(t);return e in o?o[e]:""}let p=0,d=0;const b=new Map;function f(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 m=[Document,Element,HTMLElement],v=[Element,HTMLElement];function w(t,e){const o=m.some(t=>e instanceof t)?e:u();return v.some(e=>t instanceof e)?t:o.querySelector(t)}function x(t,e){return(e&&m.some(t=>e instanceof t)?e:u()).getElementsByClassName(t)}const y=(t,e)=>Object.assign(t,e),$=new Map,k={set:(t,e,o)=>{const n=w(t);if(!n)return;$.has(e)||$.set(e,new Map);$.get(e).set(n,o)},getAllFor:t=>$.get(t)||null,get:(t,e)=>{const o=w(t),n=k.getAllFor(e);return o&&n&&n.get(o)||null},remove:(t,e)=>{const o=w(t),n=$.get(e);n&&o&&(n.delete(o),0===n.size&&$.delete(e))}},S=(t,e)=>{y(t.style,e)},H=(t,e)=>t.getAttribute(e);function A(t){return"true"===t||"false"!==t&&(Number.isNaN(+t)?""===t||"null"===t?null:t:+t)}const L=t=>Object.keys(t),E=t=>t.toLowerCase();const N=t=>t.focus();function P(t,e){return t.classList.contains(e)}function C(t,e){t.classList.add(e)}function M(t,e){t.classList.remove(e)}const T=(t,e,o)=>t.setAttribute(e,o),R=(t,e)=>t.removeAttribute(e),{head:F}=document,D=["transparent","currentColor","inherit","revert","initial"];function K(t){const e=Math.floor(t);return t-e<.5?e:Math.round(t)}const O=["rgb","hex","hsl","hsv","hwb"],I="[-\\+]?\\d*\\.?\\d+(?:deg|rad|grad|turn)?",V="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",U=`(?:${V})|(?:${I})`,B="(?:[,|\\s]+)",_=`(?:[\\s|\\(\\s|\\s\\(\\s]+)?(${U})${B}(${V})${B}(${V})(?:[,|\\/\\s]*)?(${V})?(?:[\\s|\\)\\s]+)?`,j={CSS_UNIT:new RegExp(U),hwb:new RegExp("hwb"+_),rgb:new RegExp("rgb(?:a)?"+_),hsl:new RegExp("hsl(?:a)?"+_),hsv:new RegExp("hsv(?:a)?"+_),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 W(t){return(""+t).includes(".")&&1===parseFloat(t)}function z(t){return(""+t).includes("%")}function G(t){return!D.includes(t)&&!["#",...O].some(e=>t.includes(e))&&(!!["black","white"].includes(t)||["rgb(255, 255, 255)","rgb(0, 0, 0)"].every(e=>{S(F,{color:t});const o=g(F,"color");return S(F,{color:""}),o!==e}))}function X(t){return Boolean(j.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;W(t)&&(o="100%");const n=z(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 J(t){let e=parseFloat(""+t);return(Number.isNaN(e)||e<0||e>1)&&(e=1),e}function q(t){return Math.min(1,Math.max(0,t))}function Z(t){S(F,{color:t});const e=g(F,"color");return S(F,{color:""}),e}function Q(t){return K(255*t).toString(16)}function tt(t){return et(t)/255}function et(t){return parseInt(t,16)}function ot(t){return 1===t.length?"0"+t:String(t)}function nt(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 rt(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 st(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=rt(i,a,t+1/3),r=rt(i,a,t),s=rt(i,a,t-1/3)}return{r:n,g:r,b:s}}function at(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 it(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}=st(t,1,.5);return[n,r,s]=[n,r,s].map(t=>t*(1-e-o)+e),{r:n,g:r,b:s}}function lt(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 ct(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 ut(t,e,o,n){const r=[ot(K(t).toString(16)),ot(K(e).toString(16)),ot(K(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 ht(t,e,o,n,r){const s=[ot(K(t).toString(16)),ot(K(e).toString(16)),ot(K(o).toString(16)),ot(Q(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 gt(t){let e=E(t.trim());if(0===e.length)return{r:0,g:0,b:0,a:1};if(G(e))e=Z(e);else if(D.includes(e)){return{r:0,g:0,b:0,a:"transparent"===e?0:1,format:"rgb",ok:!0}}let[,o,n,r,s]=j.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]=j.hsl.exec(e)||[],o&&n&&r?{h:o,s:n,l:r,a:void 0!==s?s:1,format:"hsl"}:([,o,n,r,s]=j.hsv.exec(e)||[],o&&n&&r?{h:o,s:n,v:r,a:void 0!==s?s:1,format:"hsv"}:([,o,n,r,s]=j.hwb.exec(e)||[],o&&n&&r?{h:o,w:n,b:r,a:void 0!==s?s:1,format:"hwb"}:([,o,n,r,s]=j.hex8.exec(e)||[],o&&n&&r&&s?{r:et(o),g:et(n),b:et(r),a:tt(s),format:"hex"}:([,o,n,r]=j.hex6.exec(e)||[],o&&n&&r?{r:et(o),g:et(n),b:et(r),format:"hex"}:([,o,n,r,s]=j.hex4.exec(e)||[],o&&n&&r&&s?{r:et(o+o),g:et(n+n),b:et(r+r),a:tt(s+s),format:"hex"}:([,o,n,r]=j.hex3.exec(e)||[],!!(o&&n&&r)&&{r:et(o+o),g:et(n+n),b:et(r+r),format:"hex"})))))))}function pt(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,h=null,g=!1;const p="object"==typeof o&&o.format;let d=p&&O.includes(p)?p:"rgb";return"string"==typeof t&&(o=gt(t),o&&(g=!0)),"object"==typeof o&&(X(o.r)&&X(o.g)&&X(o.b)&&(({r:u,g:h,b:l}=o),[u,h,l]=[u,h,l].map(t=>Y(t,z(t)?100:255)),e={r:u,g:h,b:l},g=!0,d=o.format||"rgb"),X(o.h)&&X(o.s)&&X(o.v)&&(({h:c,s:r,v:s}=o),c=Y(c,360),r=Y(r,100),s=Y(s,100),e=ct(c,r,s),g=!0,d="hsv"),X(o.h)&&X(o.s)&&X(o.l)&&(({h:c,s:r,l:a}=o),c=Y(c,360),r=Y(r,100),a=Y(a,100),e=st(c,r,a),g=!0,d="hsl"),X(o.h)&&X(o.w)&&X(o.b)&&(({h:c,w:i,b:l}=o),c=Y(c,360),i=Y(i,100),l=Y(l,100),e=it(c,i,l),g=!0,d="hwb"),X(o.a)&&(n=o.a,n=z(""+n)||parseFloat(n)>1?Y(n,100):n)),void 0===o&&(g=!0),{ok:g,format:d,r:e.r,g:e.g,b:e.b,a:J(n)}}class dt{constructor(t,e){let o=t;const n=e&&O.includes(e)?e:"";o instanceof dt&&(o=pt(o));const{r:r,g:s,b:a,a:i,ok:l,format:c}=pt(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=>K(255*t*100)/100),n=K(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(K);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(K);return`rgb(${r} ${s} ${a}${1===n?"":` / ${K(100*n)}%`})`}toHex(t){const{r:e,g:o,b:n,a:r}=this.toRgb();return 1===r?ut(e,o,n,t):ht(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 ht(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}=lt(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}=nt(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=K(360*t),e=K(100*e),o=K(100*o),n=K(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=K(360*t),e=K(100*e),o=K(100*o),n=K(100*n);return`hsl(${t}deg ${e}% ${o}%${n<100?` / ${K(n)}%`:""})`}toHwb(){const{r:t,g:e,b:o,a:n}=this,{h:r,w:s,b:a}=at(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=K(360*t),e=K(100*e),o=K(100*o),n=K(100*n);return`hwb(${t}deg ${e}% ${o}%${n<100?` / ${K(n)}%`:""})`}setAlpha(t){return"number"!=typeof t||(this.a=J(t)),this}saturate(t){if("number"!=typeof t)return this;const{h:e,s:o,l:n}=this.toHsl(),{r:r,g:s,b:a}=st(e,q(o+t/100),n);return y(this,{r:r,g:s,b:a}),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:e,s:o,l:n}=this.toHsl(),{r:r,g:s,b:a}=st(e,o,q(n+t/100));return y(this,{r:r,g:s,b:a}),this}darken(t){return"number"==typeof t?this.lighten(-t):this}spin(t){if("number"!=typeof t)return this;const{h:e,s:o,l:n}=this.toHsl(),{r:r,g:s,b:a}=st(q((360*e+t)%360/360),o,n);return y(this,{r:r,g:s,b:a}),this}clone(){return new dt(this)}toString(t){const{format:e}=this;return"hex"===e?this.toHexString(t):"hsl"===e?this.toHslString():"hwb"===e?this.toHwbString():this.toRgbString()}}y(dt,{ANGLES:"deg|rad|grad|turn",CSS_ANGLE:I,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:V,CSS_UNIT2:U,PERMISSIVE_MATCH:_,matchers:j,isOnePointZero:W,isPercentage:z,isValidCSSUnit:X,isColorName:G,pad2:ot,clamp01:q,bound01:Y,boundAlpha:J,getRGBFromName:Z,convertHexToDecimal:tt,convertDecimalToHex:Q,rgbToHsl:nt,rgbToHex:ut,rgbToHsv:lt,rgbToHwb:at,rgbaToHex:ht,hslToRgb:st,hsvToRgb:ct,hueToRgb:rt,hwbToRgb:it,parseIntFromHex:et,stringInputToObject:gt,inputToRGB:pt,roundPart:K,getElementStyle:g,setElementStyle:S,ObjectAssign:y});class bt{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=K((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)),u=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+u*t];for(let t=1;t<n-i;t+=1)r=[.5-u*t,...r];for(let t=0;t<o;t+=1){const o=(e+t*a)%360/360;r.forEach(t=>{s.push(new dt({h:o,s:1,l:t}))})}this.hue=e,this.hueSteps=o,this.lightSteps=n,this.colors=s}}y(bt,{Color:dt});const ft={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"},mt=["white","black","grey","red","orange","brown","gold","olive","yellow","lime","green","teal","cyan","blue","violet","magenta","pink"];function vt(t){try{JSON.parse(t)}catch(t){return!1}return!0}const wt=t=>t.toUpperCase();function xt(t){if("string"==typeof t)return u().createElement(t);const{tagName:e}=t,o={...t},n=xt(e);return delete o.tagName,y(n,o),n}function yt(t,e){if("string"==typeof e)return u().createElementNS(t,e);const{tagName:o}=e,n={...e},r=yt(t,o);return delete n.tagName,y(r,n),r}function $t(t,e,o){const{input:n,format:r,componentLabels:s}=t,{defaultsLabel:a,presetsLabel:i}=s,l="color-options"===o,c=e instanceof bt,u=l?i:a;let h=c?e.colors:e;h=h instanceof Array?h:[];const g=h.length,{lightSteps:p}=c?e:{lightSteps:null},d=p||[9,10].find(t=>g>2*t&&!(g%t))||5,b=l&&g>d;let f=2;f=b&&g>=2*d?3:f,f=g>=3*d?4:f,f=g>=4*d?5:f;const m=f-(g<3*d?1:2),v=b&&g>m*d;let w=o;w+=v?" scrollable":"",w+=b?" multiline":"";const x=b?"1px":"0.25rem";let y=b?1.75:2;y=d>5&&b?1.5:y;const $=(m||1)*y+"rem",k=`calc(${f} * ${y}rem + ${f-1} * ${x})`,A=xt({tagName:"ul",className:w});var E,N;return T(A,"role","listbox"),T(A,"aria-label",u),v&&(E=A,L(N={"--grid-item-size":y+"rem","--grid-fit":d,"--grid-gap":x,"--grid-height":$,"--grid-hover-height":k}).forEach(t=>{E.style.setProperty(t,N[t])})),h.forEach(t=>{let[e,o]="string"==typeof t?t.trim().split(":"):[];t instanceof dt&&(e=t.toHexString(),o=e);const s=new dt(t instanceof dt?t:e,r).toString()===H(n,"value"),a=xt({tagName:"li",className:"color-option"+(s?" active":""),innerText:""+(o||e)});T(a,"tabindex","0"),T(a,"data-value",""+e),T(a,"role","option"),T(a,"aria-selected",s?"true":"false"),l&&S(a,{backgroundColor:e}),A.append(a)}),A}function kt(t){const{input:e,parent:o,format:n,id:r,componentLabels:s,colorKeywords:a,colorPresets:i}=t,l=H(e,"value")||"#fff",{toggleLabel:c,pickerLabel:u,formatLabel:h,hexLabel:g}=s,p=D.includes(l)?"#fff":l;t.color=new dt(p,n);const d="hex"===n?g:wt(n),b=xt({id:"picker-btn-"+r,tagName:"button",className:"picker-toggle btn-appearance"});T(b,"aria-expanded","false"),T(b,"aria-haspopup","true"),b.append(xt({tagName:"span",className:"v-hidden",innerText:`${u}. ${h}: ${d}`}));const f=xt({tagName:"div",className:"color-dropdown picker"});T(f,"aria-labelledby","picker-btn-"+r),T(f,"role","group");const m=function(t){const{format:e,componentLabels:o}=t,{hueLabel:n,alphaLabel:r,lightnessLabel:s,saturationLabel:a,whitenessLabel:i,blacknessLabel:l}=o,c="hsl"===e?360:100,u="hsl"===e?100:360;let h="hsl"===e?`${n} & ${s}`:`${s} & ${a}`;h="hwb"===e?`${i} & ${l}`:h;const g="hsl"===e?""+a:""+n,p=xt({tagName:"div",className:"color-controls "+e});return[{i:1,c:"color-pointer",l:h,min:0,max:c},{i:2,c:"color-slider",l:g,min:0,max:u},{i:3,c:"color-slider",l:r,min:0,max:100}].forEach(t=>{const{i:e,c:o,l:n,min:r,max:s}=t,a=xt({tagName:"div",className:"color-control"});T(a,"role","presentation"),a.append(xt({tagName:"div",className:"visual-control visual-control"+e}));const i=xt({tagName:"div",className:o+" knob",ariaLive:"polite"});T(i,"aria-label",n),T(i,"role","slider"),T(i,"tabindex","0"),T(i,"aria-valuemin",""+r),T(i,"aria-valuemax",""+s),a.append(i),p.append(a)}),p}(t),v=function(t){const{format:e,id:o,componentLabels:n}=t,r=xt({tagName:"div",className:"color-form "+e});let s=["hex"];return"rgb"===e?s=["red","green","blue","alpha"]:"hsl"===e?s=["hue","saturation","lightness","alpha"]:"hwb"===e&&(s=["hue","whiteness","blackness","alpha"]),s.forEach(t=>{const[s]="hex"===e?["#"]:wt(t).split(""),a=`color_${e}_${t}_${o}`,i=n[t+"Label"],l=xt({tagName:"label"});T(l,"for",a),l.append(xt({tagName:"span",ariaHidden:"true",innerText:s+":"}),xt({tagName:"span",className:"v-hidden",innerText:i}));const c=xt({tagName:"input",id:a,type:"hex"===e?"text":"number",value:"alpha"===t?"100":"0",className:"color-input "+t});T(c,"autocomplete","off"),T(c,"spellcheck","false");let u="100",h="1";"alpha"!==t&&("rgb"===e?(u="255",h="1"):"hue"===t&&(u="360",h="1")),y(c,{min:"0",max:u,step:h}),r.append(l,c)}),r}(t);if(f.append(m,v),e.before(b),o.append(f),a||i){const e=xt({tagName:"div",className:"color-dropdown scrollable menu"});if(i instanceof Array&&i.length||i instanceof bt&&i.colors){const o=$t(t,i,"color-options");e.append(o)}if(a&&a.length){const o=$t(t,a,"color-defaults");e.append(o)}const n=xt({tagName:"button",className:"menu-toggle btn-appearance"});T(n,"tabindex","-1"),T(n,"aria-expanded","false"),T(n,"aria-haspopup","true");const r=encodeURI("http://www.w3.org/2000/svg"),s=yt(r,{tagName:"svg"});T(s,"xmlns",r),T(s,"viewBox","0 0 512 512"),T(s,"aria-hidden","true");const l=yt(r,{tagName:"path"});T(l,"d","M98,158l157,156L411,158l27,27L255,368L71,185L98,158z"),T(l,"fill","#fff"),s.append(l),n.append(xt({tagName:"span",className:"v-hidden",innerText:""+c}),s),o.append(n,e)}a&&D.includes(l)&&(t.value=l),T(e,"tabindex","-1")}const St={componentLabels:ft,colorLabels:mt,format:"rgb",colorPresets:!1,colorKeywords:!1};function Ht(t,e){const r=e?o:n,{input:s,pickerToggle:a,menuToggle:i}=t;r(s,"focusin",t.showPicker),r(a,"click",t.togglePicker),i&&r(i,"click",t.toggleMenu)}function At(t,e){const r=e?o:n,{input:s,colorMenu:a,parent:i}=t,l=u(s),c=function(t){if(null==t)return window;if(!(t instanceof Window)){const{ownerDocument:e}=t;return e&&e.defaultView||window}return t}(s),h="ontouchstart"in l?{down:"touchstart",move:"touchmove",up:"touchend"}:{down:"mousedown",move:"mousemove",up:"mouseup"};r(t.controls,h.down,t.pointerDown),t.controlKnobs.forEach(e=>r(e,"keydown",t.handleKnobs)),r(c,"scroll",t.handleScroll),r(c,"resize",t.update),[s,...t.inputs].forEach(e=>r(e,"change",t.changeHandler)),a&&(r(a,"click",t.menuClickHandler),r(a,"keydown",t.menuKeyHandler)),r(l,h.move,t.pointerMove),r(l,h.up,t.pointerUp),r(i,"focusout",t.handleFocusOut),r(l,"keyup",t.handleDismiss)}function Lt(t){var e,o;e=t.input,o=new CustomEvent("colorpicker.change"),e.dispatchEvent(o)}function Et(t){t&&["bottom","top"].forEach(e=>M(t,e))}function Nt(t,e){const{colorPicker:o,colorMenu:n,menuToggle:r,pickerToggle:s,parent:a}=t,i=e===o,l=i?n:o,c=i?r:s,u=i?s:r;P(a,"open")||C(a,"open"),l&&(M(l,"show"),Et(l)),C(e,"bottom"),e.offsetHeight,C(e,"show"),i&&t.update(),t.isOpen||(At(t,!0),t.updateDropdownPosition(),t.isOpen=!0,T(t.input,"tabindex","0"),r&&T(r,"tabindex","0")),T(u,"aria-expanded","true"),c&&T(c,"aria-expanded","false")}class Pt{constructor(t,e){const o=this,n=w(t);if(!n)throw new TypeError(`ColorPicker target "${t}" cannot be found.`);o.input=n;const r=function t(e,o){return e?e.closest(o)||t(e.getRootNode().host,o):null}(n,".color-picker,color-picker");if(!r)throw new TypeError("ColorPicker requires a specific markup to work.");o.parent=r,o.id=function t(e,o){let n=o?p:d;if(o){const r=t(e),s=b.get(r)||new Map;b.has(r)||b.set(r,s),s.has(o)?n=s.get(o):(s.set(o,n),p+=1)}else{const t=e.id||e;b.has(t)?n=b.get(t):(b.set(t,n),d+=1)}return n}(n,"color-picker"),o.dragElement=null,o.isOpen=!1,o.controlPositions={c1x:0,c1y:0,c2y:0,c3y:0},o.colorLabels={},o.colorKeywords=void 0,o.colorPresets=void 0;const{format:s,componentLabels:a,colorLabels:i,colorKeywords:l,colorPresets:c}=function(t,e,o,n){const r={...t.dataset},s={},a={};return L(r).forEach(t=>{const e=n&&t.includes(n)?t.replace(n,"").replace(/[A-Z]/,t=>E(t)):t;a[e]=A(r[t])}),L(o).forEach(t=>{o[t]=A(o[t])}),L(e).forEach(n=>{s[n]=n in o?o[n]:n in a?a[n]:"title"===n?H(t,"title"):e[n]}),s}(this.isCE?r:n,St,e||{});let u=mt;i instanceof Array&&17===i.length?u=i:i&&17===i.split(",").length&&(u=i.split(",")),mt.forEach((t,e)=>{o.colorLabels[t]=u[e].trim()});const h=a&&vt(a)?JSON.parse(a):a;if(o.componentLabels=y(ft,h),o.color=new dt(n.value||"#fff",s),o.format=s,l instanceof Array?o.colorKeywords=l:"string"==typeof l&&l.length&&(o.colorKeywords=l.split(",").map(t=>t.trim())),c instanceof Array)o.colorPresets=c;else if("string"==typeof c&&c.length)if(vt(c)){const{hue:t,hueSteps:e,lightSteps:n}=JSON.parse(c);o.colorPresets=new bt(t,e,n)}else o.colorPresets=c.split(",").map(t=>t.trim());o.showPicker=o.showPicker.bind(o),o.togglePicker=o.togglePicker.bind(o),o.toggleMenu=o.toggleMenu.bind(o),o.menuClickHandler=o.menuClickHandler.bind(o),o.menuKeyHandler=o.menuKeyHandler.bind(o),o.pointerDown=o.pointerDown.bind(o),o.pointerMove=o.pointerMove.bind(o),o.pointerUp=o.pointerUp.bind(o),o.update=o.update.bind(o),o.handleScroll=o.handleScroll.bind(o),o.handleFocusOut=o.handleFocusOut.bind(o),o.changeHandler=o.changeHandler.bind(o),o.handleDismiss=o.handleDismiss.bind(o),o.handleKnobs=o.handleKnobs.bind(o),kt(o);const[g,f]=x("color-dropdown",r);o.pickerToggle=w(".picker-toggle",r),o.menuToggle=w(".menu-toggle",r),o.colorPicker=g,o.colorMenu=f,o.inputs=[...x("color-input",r)];const[m]=x("color-controls",r);o.controls=m,o.controlKnobs=[...x("knob",m)],o.visuals=[...x("visual-control",m)],o.update(),Ht(o,!0),k.set(n,"color-picker",o)}get value(){return this.input.value}set value(t){this.input.value=t}get hasNonColor(){return this.colorKeywords instanceof Array&&this.colorKeywords.some(t=>D.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 dt(t).isValid}get appearance(){const{colorLabels:t,hsl:e,hsv:o,format:n}=this,r=K(360*e.h),s=K(100*("hsl"===n?e.s:o.s)),a=K(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:i,g:l,b:c}=new dt({h:a,s:1,l:.5}).toRgb(),u=1-t.c3y/s,h=K(100*u)/100,g=new dt({h:a,s:1,l:.5,a:u}).toRgbString();S(o,{background:`linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,${h}) 100%),\n linear-gradient(to right, rgba(255,255,255,${h}) 0%, ${g} 100%),\n linear-gradient(rgb(255,255,255) 0%, rgb(255,255,255) 100%)`}),S(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%)"}),S(r,{background:`linear-gradient(rgba(${i},${l},${c},1) 0%,rgba(${i},${l},${c},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(t){const{activeElement:e}=u(this.input);("touchmove"===t.type&&this.dragElement||e&&this.controlKnobs.includes(e))&&(t.stopPropagation(),t.preventDefault()),this.updateDropdownPosition()}menuKeyHandler(t){const{target:e,code:o}=t,{previousElementSibling:n,nextElementSibling:u,parentElement:h}=e,p=h&&P(h,"color-options"),d=[...h.children],b=p&&g(h,"grid-template-columns").split(" ").length,f=d.indexOf(e),m=f>-1&&b&&d[f-b],v=f>-1&&b&&d[f+b];[r,s,c].includes(o)&&t.preventDefault(),p?m&&o===s?N(m):v&&o===r?N(v):n&&o===a?N(n):u&&o===i&&N(u):n&&[a,s].includes(o)?N(n):u&&[i,r].includes(o)&&N(u),[l,c].includes(o)&&this.menuClickHandler({target:e})}menuClickHandler(t){const e=this,{target:o}=t,{colorMenu:n}=e,r=(H(o,"data-value")||"").trim();if(!r.length)return;const s=w("li.active",n);let a=D.includes(r)?"white":r;a="transparent"===r?"rgba(0,0,0,0)":r;const{r:i,g:l,b:c,a:u}=new dt(a);y(e.color,{r:i,g:l,b:c,a:u}),e.update(),s!==o&&(s&&(M(s,"active"),R(s,"aria-selected")),C(o,"active"),T(o,"aria-selected","true"),D.includes(r)&&(e.value=r),Lt(e))}pointerDown(t){const e=this,{type:o,target:n,touches:r,pageX:s,pageY:a}=t,{colorMenu:i,visuals:l,controlKnobs:c}=e,[u,g,p]=l,[d,b,m]=c,v=c.includes(n)?n.previousElementSibling:n,x=f(v),y=h(u),$="touchstart"===o?r[0].pageX:s,k="touchstart"===o?r[0].pageY:a,S=$-y.scrollLeft-x.left,H=k-y.scrollTop-x.top;if(n===u||n===d?(e.dragElement=v,e.changeControl1(S,H)):n===g||n===b?(e.dragElement=v,e.changeControl2(H)):n!==p&&n!==m||(e.dragElement=v,e.changeAlpha(H)),i){const t=w("li.active",i);t&&(M(t,"active"),R(t,"aria-selected"))}t.preventDefault()}pointerUp({target:t}){const e=this,{parent:o}=e,n=u(o),r=null!==w(".color-picker,color-picker.open",n),s=n.getSelection();e.dragElement||s.toString().length||o.contains(t)||e.hide(r),e.dragElement=null}pointerMove(t){const e=this,{dragElement:o,visuals:n}=e,[r,s,a]=n,{type:i,touches:l,pageX:c,pageY:u}=t;if(!o)return;const g=f(o),p=h(r),d="touchmove"===i?l[0].pageX:c,b="touchmove"===i?l[0].pageY:u,m=d-p.scrollLeft-g.left,v=b-p.scrollTop-g.top;o===r&&e.changeControl1(m,v),o===s&&e.changeControl2(v),o===a&&e.changeAlpha(v)}handleKnobs(t){const{target:e,code:o}=t,n=this;if(![s,r,a,i].includes(o))return;t.preventDefault();const{controlKnobs:l,visuals:c}=n,{offsetWidth:h,offsetHeight:g}=c[0],[p,d,b]=l,{activeElement:f}=u(p),m=g/360;if(l.find(t=>t===f)){let l=0,c=0;if(e===p){const t=h/100;[a,i].includes(o)?n.controlPositions.c1x+=o===i?t:-t:[s,r].includes(o)&&(n.controlPositions.c1y+=o===r?m:-m),l=n.controlPositions.c1x,c=n.controlPositions.c1y,n.changeControl1(l,c)}else e===d?(n.controlPositions.c2y+=[r,i].includes(o)?m:-m,c=n.controlPositions.c2y,n.changeControl2(c)):e===b&&(n.controlPositions.c3y+=[r,i].includes(o)?m:-m,c=n.controlPositions.c3y,n.changeAlpha(c));n.handleScroll(t)}}changeHandler(){const t=this;let e;const{inputs:o,format:n,value:r,input:s,controlPositions:a,visuals:i}=t,{activeElement:l}=u(s),{offsetHeight:c}=i[0],[h,,,g]=o,[p,d,b,f]="rgb"===n?o.map(t=>parseFloat(t.value)/(t===g?100:1)):o.map(t=>parseFloat(t.value)/(t!==h?100:360)),m=t.hasNonColor&&D.includes(r),v=g?f:1-a.c3y/c;if(l===s||l&&o.includes(l)){e=l===s?m?"transparent"===r?"rgba(0,0,0,0)":"rgb(0,0,0)":r:"hex"===n?h.value:"hsl"===n?{h:p,s:d,l:b,a:v}:"hwb"===n?{h:p,w:d,b:b,a:v}:{r:p,g:d,b:b,a:v};const{r:o,g:a,b:i,a:c}=new dt(e);y(t.color,{r:o,g:a,b:i,a:c}),t.setControlPositions(),t.updateAppearance(),t.updateInputs(),t.updateControls(),t.updateVisuals(),l===s&&m&&(t.value=r)}}changeControl1(t,e){let[o,n]=[0,0];const{controlPositions:r,visuals:s}=this,{offsetHeight:a,offsetWidth:i}=s[0];t>i?o=i:t>=0&&(o=t),e>a?n=a:e>=0&&(n=e);const l=r.c2y/a,c=o/i,u=1-n/a,h=1-r.c3y/a,{r:g,g:p,b:d,a:b}=new dt({h:l,s:c,v:u,a:h});y(this.color,{r:g,g:p,b:d,a:b}),this.controlPositions.c1x=o,this.controlPositions.c1y=n,this.updateAppearance(),this.updateInputs(),this.updateControls(),this.updateVisuals()}changeControl2(t){const{controlPositions:e,visuals:o}=this,{offsetHeight:n,offsetWidth:r}=o[0];let s=0;t>n?s=n:t>=0&&(s=t);const a=s/n,i=e.c1x/r,l=1-e.c1y/n,c=1-e.c3y/n,{r:u,g:h,b:g,a:p}=new dt({h:a,s:i,v:l,a:c});y(this.color,{r:u,g:h,b:g,a:p}),this.controlPositions.c2y=s,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=f(t),{top:r,bottom:s}=n,{offsetHeight:a}=t,i=h(t).clientHeight,l=P(e,"show")?e:o;if(!l)return;const{offsetHeight:c}=l,u=i-s,g=r,p=r+c+a>i,d=r-c<0;(P(l,"bottom")||!d)&&u<g&&p?(M(l,"bottom"),C(l,"top")):(M(l,"top"),C(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:n,hsv:r,hex:s,format:a,controlKnobs:i}=t,{appearanceLabel:l,hexLabel:c,valueLabel:u}=e;let{r:h,g:g,b:p}=o.toRgb();const[d,b,f]=i,m=K(360*r.h),v=o.a,w=K(100*r.s),x=K(100*r.v),y=t.appearance;let $=`${c} ${s.split("").join(" ")}`;if("hwb"===a){const{hwb:e}=t,o=K(100*e.w),n=K(100*e.b);$=`HWB: ${m}°, ${o}%, ${n}%`,T(d,"aria-valuetext",`${o}% & ${n}%`),T(d,"aria-valuenow",""+o),T(b,"aria-description",`${u}: ${$}. ${l}: ${y}.`),T(b,"aria-valuetext",m+"%"),T(b,"aria-valuenow",""+m)}else[h,g,p]=[h,g,p].map(K),$="hsl"===a?`HSL: ${m}°, ${w}%, ${x}%`:$,$="rgb"===a?`RGB: ${h}, ${g}, ${p}`:$,T(d,"aria-valuetext",`${x}% & ${w}%`),T(d,"aria-valuenow",""+x),T(b,"aria-description",`${u}: ${$}. ${l}: ${y}.`),T(b,"aria-valuetext",m+"°"),T(b,"aria-valuenow",""+m);const k=K(100*v);T(f,"aria-valuetext",k+"%"),T(f,"aria-valuenow",""+k);const H=o.toString();S(t.input,{backgroundColor:H}),t.isDark?(P(n,"txt-light")&&M(n,"txt-light"),P(n,"txt-dark")||C(n,"txt-dark")):(P(n,"txt-dark")&&M(n,"txt-dark"),P(n,"txt-light")||C(n,"txt-light"))}updateControls(){const{controlKnobs:t,controlPositions:e}=this;let{c1x:o,c1y:n,c2y:r,c3y:s}=e;const[a,i,l]=t;[o,n,r,s]=[o,n,r,s].map(K),S(a,{transform:`translate3d(${o-4}px,${n-4}px,0)`}),S(i,{transform:`translate3d(0,${r-4}px,0)`}),S(l,{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,u]=r,h=K(100*s.a),g=K(360*a.h);let p;if("hex"===n)p=e.color.toHexString(!0),i.value=e.hex;else if("hsl"===n){const t=K(100*a.l),o=K(100*a.s);p=e.color.toHslString(),i.value=""+g,l.value=""+o,c.value=""+t,u.value=""+h}else if("hwb"===n){const{w:t,b:o}=e.hwb,n=K(100*t),r=K(100*o);p=e.color.toHwbString(),i.value=""+g,l.value=""+n,c.value=""+r,u.value=""+h}else if("rgb"===n){let{r:t,g:o,b:n}=e.rgb;[t,o,n]=[t,o,n].map(K),p=e.color.toRgbString(),i.value=""+t,l.value=""+o,c.value=""+n,u.value=""+h}e.value=""+p,t||p===o||Lt(e)}togglePicker(t){t&&t.preventDefault();const e=this,{colorPicker:o}=e;e.isOpen&&P(o,"show")?e.hide(!0):Nt(e,o)}showPicker(){const t=this,{colorPicker:e}=t;["top","bottom"].some(t=>P(e,t))||Nt(t,e)}toggleMenu(t){t&&t.preventDefault();const e=this,{colorMenu:o}=e;e.isOpen&&P(o,"show")?e.hide(!0):Nt(e,o)}hide(t){const e=this;if(e.isOpen){const{pickerToggle:o,menuToggle:n,colorPicker:r,colorMenu:s,parent:a,input:i}=e,l=P(r,"show"),c=l?r:s,u=l?o:n,h=c&&function(t){const e=g(t,"transitionProperty"),o=g(t,"transitionDuration"),n=o.includes("ms")?1:1e3,r=e&&"none"!==e?parseFloat(o)*n:0;return Number.isNaN(r)?0:r}(c);e.value=e.color.toString(!0),c&&(M(c,"show"),T(u,"aria-expanded","false"),setTimeout(()=>{Et(c),w(".show",a)||(M(a,"open"),At(e),e.isOpen=!1)},h)),t||N(o),T(i,"tabindex","-1"),n&&T(n,"tabindex","-1")}}dispose(){const{input:t,parent:e}=this;this.hide(!0),Ht(this),[...e.children].forEach(e=>{e!==t&&e.remove()}),R(t,"tabindex"),S(t,{backgroundColor:""}),["txt-light","txt-dark"].forEach(t=>M(e,t)),k.remove(t,"color-picker")}}return y(Pt,{Color:dt,ColorPalette:bt,Version:"0.0.2alpha2",getInstance:t=>{return e=t,o="color-picker",k.get(e,o);var e,o},init:t=>new Pt(t),selector:'[data-function="color-picker"]',roundPart:K,setElementStyle:S,setAttribute:T,getBoundingClientRect:f}),Pt}));
|
package/dist/js/color.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Color v0.0.
|
|
2
|
+
* Color v0.0.2alpha2 (http://thednp.github.io/color-picker)
|
|
3
3
|
* Copyright 2022 © thednp
|
|
4
4
|
* Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
|
|
5
5
|
*/
|
|
@@ -147,6 +147,8 @@
|
|
|
147
147
|
if (nonColors.includes(color)
|
|
148
148
|
|| ['#', ...COLOR_FORMAT].some((f) => color.includes(f))) return false;
|
|
149
149
|
|
|
150
|
+
if (['black', 'white'].includes(color)) return true;
|
|
151
|
+
|
|
150
152
|
return ['rgb(255, 255, 255)', 'rgb(0, 0, 0)'].every((c) => {
|
|
151
153
|
setElementStyle(documentHead, { color });
|
|
152
154
|
const computedColor = getElementStyle(documentHead, 'color');
|
|
@@ -173,6 +175,11 @@
|
|
|
173
175
|
*/
|
|
174
176
|
function bound01(N, max) {
|
|
175
177
|
let n = N;
|
|
178
|
+
|
|
179
|
+
if (typeof N === 'number'
|
|
180
|
+
&& Math.min(N, 0) === 0 // round values to 6 decimals Math.round(N * (10 ** 6)) / 10 ** 6
|
|
181
|
+
&& Math.max(N, 1) === 1) return N;
|
|
182
|
+
|
|
176
183
|
if (isOnePointZero(N)) n = '100%';
|
|
177
184
|
|
|
178
185
|
const processPercent = isPercentage(n);
|
|
@@ -276,15 +283,12 @@
|
|
|
276
283
|
/**
|
|
277
284
|
* Converts an RGB colour value to HSL.
|
|
278
285
|
*
|
|
279
|
-
* @param {number}
|
|
280
|
-
* @param {number}
|
|
281
|
-
* @param {number}
|
|
286
|
+
* @param {number} r Red component [0, 1]
|
|
287
|
+
* @param {number} g Green component [0, 1]
|
|
288
|
+
* @param {number} b Blue component [0, 1]
|
|
282
289
|
* @returns {CP.HSL} {h,s,l} object with [0, 1] ranged values
|
|
283
290
|
*/
|
|
284
|
-
function rgbToHsl(
|
|
285
|
-
const r = R / 255;
|
|
286
|
-
const g = G / 255;
|
|
287
|
-
const b = B / 255;
|
|
291
|
+
function rgbToHsl(r, g, b) {
|
|
288
292
|
const max = Math.max(r, g, b);
|
|
289
293
|
const min = Math.min(r, g, b);
|
|
290
294
|
let h = 0;
|
|
@@ -296,17 +300,10 @@
|
|
|
296
300
|
} else {
|
|
297
301
|
const d = max - min;
|
|
298
302
|
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
case g:
|
|
304
|
-
h = (b - r) / d + 2;
|
|
305
|
-
break;
|
|
306
|
-
case b:
|
|
307
|
-
h = (r - g) / d + 4;
|
|
308
|
-
break;
|
|
309
|
-
}
|
|
303
|
+
if (max === r) h = (g - b) / d + (g < b ? 6 : 0);
|
|
304
|
+
if (max === g) h = (b - r) / d + 2;
|
|
305
|
+
if (max === b) h = (r - g) / d + 4;
|
|
306
|
+
|
|
310
307
|
h /= 6;
|
|
311
308
|
}
|
|
312
309
|
return { h, s, l };
|
|
@@ -335,7 +332,7 @@
|
|
|
335
332
|
* @param {number} h Hue Angle [0, 1]
|
|
336
333
|
* @param {number} s Saturation [0, 1]
|
|
337
334
|
* @param {number} l Lightness Angle [0, 1]
|
|
338
|
-
* @returns {CP.RGB} {r,g,b} object with [0,
|
|
335
|
+
* @returns {CP.RGB} {r,g,b} object with [0, 1] ranged values
|
|
339
336
|
*/
|
|
340
337
|
function hslToRgb(h, s, l) {
|
|
341
338
|
let r = 0;
|
|
@@ -354,7 +351,6 @@
|
|
|
354
351
|
g = hueToRgb(p, q, h);
|
|
355
352
|
b = hueToRgb(p, q, h - 1 / 3);
|
|
356
353
|
}
|
|
357
|
-
[r, g, b] = [r, g, b].map((x) => x * 255);
|
|
358
354
|
|
|
359
355
|
return { r, g, b };
|
|
360
356
|
}
|
|
@@ -364,16 +360,12 @@
|
|
|
364
360
|
* @link https://www.w3.org/TR/css-color-4/#hwb-to-rgb
|
|
365
361
|
* @link http://alvyray.com/Papers/CG/hwb2rgb.htm
|
|
366
362
|
*
|
|
367
|
-
* @param {number}
|
|
368
|
-
* @param {number}
|
|
369
|
-
* @param {number}
|
|
363
|
+
* @param {number} r Red component [0, 1]
|
|
364
|
+
* @param {number} g Green [0, 1]
|
|
365
|
+
* @param {number} b Blue [0, 1]
|
|
370
366
|
* @return {CP.HWB} {h,w,b} object with [0, 1] ranged values
|
|
371
367
|
*/
|
|
372
|
-
function rgbToHwb(
|
|
373
|
-
const r = R / 255;
|
|
374
|
-
const g = G / 255;
|
|
375
|
-
const b = B / 255;
|
|
376
|
-
|
|
368
|
+
function rgbToHwb(r, g, b) {
|
|
377
369
|
let f = 0;
|
|
378
370
|
let i = 0;
|
|
379
371
|
const whiteness = Math.min(r, g, b);
|
|
@@ -403,20 +395,18 @@
|
|
|
403
395
|
* @param {number} H Hue Angle [0, 1]
|
|
404
396
|
* @param {number} W Whiteness [0, 1]
|
|
405
397
|
* @param {number} B Blackness [0, 1]
|
|
406
|
-
* @return {CP.RGB} {r,g,b} object with [0,
|
|
398
|
+
* @return {CP.RGB} {r,g,b} object with [0, 1] ranged values
|
|
407
399
|
*
|
|
408
400
|
* @link https://www.w3.org/TR/css-color-4/#hwb-to-rgb
|
|
409
401
|
* @link http://alvyray.com/Papers/CG/hwb2rgb.htm
|
|
410
402
|
*/
|
|
411
403
|
function hwbToRgb(H, W, B) {
|
|
412
404
|
if (W + B >= 1) {
|
|
413
|
-
const gray =
|
|
405
|
+
const gray = W / (W + B);
|
|
414
406
|
return { r: gray, g: gray, b: gray };
|
|
415
407
|
}
|
|
416
408
|
let { r, g, b } = hslToRgb(H, 1, 0.5);
|
|
417
|
-
[r, g, b] = [r, g, b]
|
|
418
|
-
.map((v) => (v / 255) * (1 - W - B) + W)
|
|
419
|
-
.map((v) => v * 255);
|
|
409
|
+
[r, g, b] = [r, g, b].map((v) => v * (1 - W - B) + W);
|
|
420
410
|
|
|
421
411
|
return { r, g, b };
|
|
422
412
|
}
|
|
@@ -424,15 +414,12 @@
|
|
|
424
414
|
/**
|
|
425
415
|
* Converts an RGB colour value to HSV.
|
|
426
416
|
*
|
|
427
|
-
* @param {number}
|
|
428
|
-
* @param {number}
|
|
429
|
-
* @param {number}
|
|
417
|
+
* @param {number} r Red component [0, 1]
|
|
418
|
+
* @param {number} g Green [0, 1]
|
|
419
|
+
* @param {number} b Blue [0, 1]
|
|
430
420
|
* @returns {CP.HSV} {h,s,v} object with [0, 1] ranged values
|
|
431
421
|
*/
|
|
432
|
-
function rgbToHsv(
|
|
433
|
-
const r = R / 255;
|
|
434
|
-
const g = G / 255;
|
|
435
|
-
const b = B / 255;
|
|
422
|
+
function rgbToHsv(r, g, b) {
|
|
436
423
|
const max = Math.max(r, g, b);
|
|
437
424
|
const min = Math.min(r, g, b);
|
|
438
425
|
let h = 0;
|
|
@@ -442,17 +429,10 @@
|
|
|
442
429
|
if (max === min) {
|
|
443
430
|
h = 0; // achromatic
|
|
444
431
|
} else {
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
case g:
|
|
450
|
-
h = (b - r) / d + 2;
|
|
451
|
-
break;
|
|
452
|
-
case b:
|
|
453
|
-
h = (r - g) / d + 4;
|
|
454
|
-
break;
|
|
455
|
-
}
|
|
432
|
+
if (r === max) h = (g - b) / d + (g < b ? 6 : 0);
|
|
433
|
+
if (g === max) h = (b - r) / d + 2;
|
|
434
|
+
if (b === max) h = (r - g) / d + 4;
|
|
435
|
+
|
|
456
436
|
h /= 6;
|
|
457
437
|
}
|
|
458
438
|
return { h, s, v };
|
|
@@ -476,10 +456,9 @@
|
|
|
476
456
|
const q = v * (1 - f * s);
|
|
477
457
|
const t = v * (1 - (1 - f) * s);
|
|
478
458
|
const mod = i % 6;
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
[r, g, b] = [r, g, b].map((n) => n * 255);
|
|
459
|
+
const r = [v, q, p, p, t, v][mod];
|
|
460
|
+
const g = [t, v, v, q, p, p][mod];
|
|
461
|
+
const b = [p, p, t, v, v, q][mod];
|
|
483
462
|
return { r, g, b };
|
|
484
463
|
}
|
|
485
464
|
|
|
@@ -547,15 +526,15 @@
|
|
|
547
526
|
*/
|
|
548
527
|
function stringInputToObject(input) {
|
|
549
528
|
let color = toLowerCase(input.trim());
|
|
529
|
+
|
|
550
530
|
if (color.length === 0) {
|
|
551
531
|
return {
|
|
552
532
|
r: 0, g: 0, b: 0, a: 1,
|
|
553
533
|
};
|
|
554
534
|
}
|
|
555
|
-
|
|
535
|
+
|
|
556
536
|
if (isColorName(color)) {
|
|
557
537
|
color = getRGBFromName(color);
|
|
558
|
-
named = true;
|
|
559
538
|
} else if (nonColors.includes(color)) {
|
|
560
539
|
const a = color === 'transparent' ? 0 : 1;
|
|
561
540
|
return {
|
|
@@ -574,24 +553,28 @@
|
|
|
574
553
|
r: m1, g: m2, b: m3, a: m4 !== undefined ? m4 : 1, format: 'rgb',
|
|
575
554
|
};
|
|
576
555
|
}
|
|
556
|
+
|
|
577
557
|
[, m1, m2, m3, m4] = matchers.hsl.exec(color) || [];
|
|
578
558
|
if (m1 && m2 && m3/* && m4 */) {
|
|
579
559
|
return {
|
|
580
560
|
h: m1, s: m2, l: m3, a: m4 !== undefined ? m4 : 1, format: 'hsl',
|
|
581
561
|
};
|
|
582
562
|
}
|
|
563
|
+
|
|
583
564
|
[, m1, m2, m3, m4] = matchers.hsv.exec(color) || [];
|
|
584
565
|
if (m1 && m2 && m3/* && m4 */) {
|
|
585
566
|
return {
|
|
586
567
|
h: m1, s: m2, v: m3, a: m4 !== undefined ? m4 : 1, format: 'hsv',
|
|
587
568
|
};
|
|
588
569
|
}
|
|
570
|
+
|
|
589
571
|
[, m1, m2, m3, m4] = matchers.hwb.exec(color) || [];
|
|
590
572
|
if (m1 && m2 && m3) {
|
|
591
573
|
return {
|
|
592
574
|
h: m1, w: m2, b: m3, a: m4 !== undefined ? m4 : 1, format: 'hwb',
|
|
593
575
|
};
|
|
594
576
|
}
|
|
577
|
+
|
|
595
578
|
[, m1, m2, m3, m4] = matchers.hex8.exec(color) || [];
|
|
596
579
|
if (m1 && m2 && m3 && m4) {
|
|
597
580
|
return {
|
|
@@ -599,18 +582,20 @@
|
|
|
599
582
|
g: parseIntFromHex(m2),
|
|
600
583
|
b: parseIntFromHex(m3),
|
|
601
584
|
a: convertHexToDecimal(m4),
|
|
602
|
-
format:
|
|
585
|
+
format: 'hex',
|
|
603
586
|
};
|
|
604
587
|
}
|
|
588
|
+
|
|
605
589
|
[, m1, m2, m3] = matchers.hex6.exec(color) || [];
|
|
606
590
|
if (m1 && m2 && m3) {
|
|
607
591
|
return {
|
|
608
592
|
r: parseIntFromHex(m1),
|
|
609
593
|
g: parseIntFromHex(m2),
|
|
610
594
|
b: parseIntFromHex(m3),
|
|
611
|
-
format:
|
|
595
|
+
format: 'hex',
|
|
612
596
|
};
|
|
613
597
|
}
|
|
598
|
+
|
|
614
599
|
[, m1, m2, m3, m4] = matchers.hex4.exec(color) || [];
|
|
615
600
|
if (m1 && m2 && m3 && m4) {
|
|
616
601
|
return {
|
|
@@ -618,19 +603,20 @@
|
|
|
618
603
|
g: parseIntFromHex(m2 + m2),
|
|
619
604
|
b: parseIntFromHex(m3 + m3),
|
|
620
605
|
a: convertHexToDecimal(m4 + m4),
|
|
621
|
-
|
|
622
|
-
format: named ? 'rgb' : 'hex',
|
|
606
|
+
format: 'hex',
|
|
623
607
|
};
|
|
624
608
|
}
|
|
609
|
+
|
|
625
610
|
[, m1, m2, m3] = matchers.hex3.exec(color) || [];
|
|
626
611
|
if (m1 && m2 && m3) {
|
|
627
612
|
return {
|
|
628
613
|
r: parseIntFromHex(m1 + m1),
|
|
629
614
|
g: parseIntFromHex(m2 + m2),
|
|
630
615
|
b: parseIntFromHex(m3 + m3),
|
|
631
|
-
format:
|
|
616
|
+
format: 'hex',
|
|
632
617
|
};
|
|
633
618
|
}
|
|
619
|
+
|
|
634
620
|
return false;
|
|
635
621
|
}
|
|
636
622
|
|
|
@@ -661,6 +647,7 @@
|
|
|
661
647
|
*/
|
|
662
648
|
function inputToRGB(input) {
|
|
663
649
|
let rgb = { r: 0, g: 0, b: 0 };
|
|
650
|
+
/** @type {*} */
|
|
664
651
|
let color = input;
|
|
665
652
|
/** @type {string | number} */
|
|
666
653
|
let a = 1;
|
|
@@ -677,39 +664,41 @@
|
|
|
677
664
|
let format = inputFormat && COLOR_FORMAT.includes(inputFormat) ? inputFormat : 'rgb';
|
|
678
665
|
|
|
679
666
|
if (typeof input === 'string') {
|
|
680
|
-
// @ts-ignore -- this now is converted to object
|
|
681
667
|
color = stringInputToObject(input);
|
|
682
668
|
if (color) ok = true;
|
|
683
669
|
}
|
|
684
670
|
if (typeof color === 'object') {
|
|
685
671
|
if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
|
|
686
672
|
({ r, g, b } = color);
|
|
687
|
-
// RGB values now are all in [0,
|
|
688
|
-
[r, g, b] = [r, g, b].map((n) => bound01(n, isPercentage(n) ? 100 : 255)
|
|
673
|
+
// RGB values now are all in [0, 1] range
|
|
674
|
+
[r, g, b] = [r, g, b].map((n) => bound01(n, isPercentage(n) ? 100 : 255));
|
|
689
675
|
rgb = { r, g, b };
|
|
690
676
|
ok = true;
|
|
691
|
-
format = 'rgb';
|
|
692
|
-
}
|
|
677
|
+
format = color.format || 'rgb';
|
|
678
|
+
}
|
|
679
|
+
if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
|
|
693
680
|
({ h, s, v } = color);
|
|
694
|
-
h =
|
|
695
|
-
s =
|
|
696
|
-
v =
|
|
681
|
+
h = bound01(h, 360); // hue can be `5deg` or a [0, 1] value
|
|
682
|
+
s = bound01(s, 100); // saturation can be `5%` or a [0, 1] value
|
|
683
|
+
v = bound01(v, 100); // brightness can be `5%` or a [0, 1] value
|
|
697
684
|
rgb = hsvToRgb(h, s, v);
|
|
698
685
|
ok = true;
|
|
699
686
|
format = 'hsv';
|
|
700
|
-
}
|
|
687
|
+
}
|
|
688
|
+
if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
|
|
701
689
|
({ h, s, l } = color);
|
|
702
|
-
h =
|
|
703
|
-
s =
|
|
704
|
-
l =
|
|
690
|
+
h = bound01(h, 360); // hue can be `5deg` or a [0, 1] value
|
|
691
|
+
s = bound01(s, 100); // saturation can be `5%` or a [0, 1] value
|
|
692
|
+
l = bound01(l, 100); // lightness can be `5%` or a [0, 1] value
|
|
705
693
|
rgb = hslToRgb(h, s, l);
|
|
706
694
|
ok = true;
|
|
707
695
|
format = 'hsl';
|
|
708
|
-
}
|
|
696
|
+
}
|
|
697
|
+
if (isValidCSSUnit(color.h) && isValidCSSUnit(color.w) && isValidCSSUnit(color.b)) {
|
|
709
698
|
({ h, w, b } = color);
|
|
710
|
-
h =
|
|
711
|
-
w =
|
|
712
|
-
b =
|
|
699
|
+
h = bound01(h, 360); // hue can be `5deg` or a [0, 1] value
|
|
700
|
+
w = bound01(w, 100); // whiteness can be `5%` or a [0, 1] value
|
|
701
|
+
b = bound01(b, 100); // blackness can be `5%` or a [0, 1] value
|
|
713
702
|
rgb = hwbToRgb(h, w, b);
|
|
714
703
|
ok = true;
|
|
715
704
|
format = 'hwb';
|
|
@@ -726,9 +715,12 @@
|
|
|
726
715
|
return {
|
|
727
716
|
ok,
|
|
728
717
|
format,
|
|
729
|
-
r: Math.min(255, Math.max(rgb.r, 0)),
|
|
730
|
-
g: Math.min(255, Math.max(rgb.g, 0)),
|
|
731
|
-
b: Math.min(255, Math.max(rgb.b, 0)),
|
|
718
|
+
// r: Math.min(255, Math.max(rgb.r, 0)),
|
|
719
|
+
// g: Math.min(255, Math.max(rgb.g, 0)),
|
|
720
|
+
// b: Math.min(255, Math.max(rgb.b, 0)),
|
|
721
|
+
r: rgb.r,
|
|
722
|
+
g: rgb.g,
|
|
723
|
+
b: rgb.b,
|
|
732
724
|
a: boundAlpha(a),
|
|
733
725
|
};
|
|
734
726
|
}
|
|
@@ -747,16 +739,13 @@
|
|
|
747
739
|
constructor(input, config) {
|
|
748
740
|
let color = input;
|
|
749
741
|
const configFormat = config && COLOR_FORMAT.includes(config)
|
|
750
|
-
? config : '
|
|
742
|
+
? config : '';
|
|
751
743
|
|
|
752
|
-
// If input is already a `Color`,
|
|
744
|
+
// If input is already a `Color`, clone its values
|
|
753
745
|
if (color instanceof Color) {
|
|
754
746
|
color = inputToRGB(color);
|
|
755
747
|
}
|
|
756
|
-
|
|
757
|
-
const len = `${color}`.length;
|
|
758
|
-
color = `#${(len === 2 ? '0' : '00')}${color}`;
|
|
759
|
-
}
|
|
748
|
+
|
|
760
749
|
const {
|
|
761
750
|
r, g, b, a, ok, format,
|
|
762
751
|
} = inputToRGB(color);
|
|
@@ -806,24 +795,21 @@
|
|
|
806
795
|
let R = 0;
|
|
807
796
|
let G = 0;
|
|
808
797
|
let B = 0;
|
|
809
|
-
const rp = r / 255;
|
|
810
|
-
const rg = g / 255;
|
|
811
|
-
const rb = b / 255;
|
|
812
798
|
|
|
813
|
-
if (
|
|
814
|
-
R =
|
|
799
|
+
if (r <= 0.03928) {
|
|
800
|
+
R = r / 12.92;
|
|
815
801
|
} else {
|
|
816
|
-
R = ((
|
|
802
|
+
R = ((r + 0.055) / 1.055) ** 2.4;
|
|
817
803
|
}
|
|
818
|
-
if (
|
|
819
|
-
G =
|
|
804
|
+
if (g <= 0.03928) {
|
|
805
|
+
G = g / 12.92;
|
|
820
806
|
} else {
|
|
821
|
-
G = ((
|
|
807
|
+
G = ((g + 0.055) / 1.055) ** 2.4;
|
|
822
808
|
}
|
|
823
|
-
if (
|
|
824
|
-
B =
|
|
809
|
+
if (b <= 0.03928) {
|
|
810
|
+
B = b / 12.92;
|
|
825
811
|
} else {
|
|
826
|
-
B = ((
|
|
812
|
+
B = ((b + 0.055) / 1.055) ** 2.4;
|
|
827
813
|
}
|
|
828
814
|
return 0.2126 * R + 0.7152 * G + 0.0722 * B;
|
|
829
815
|
}
|
|
@@ -833,7 +819,7 @@
|
|
|
833
819
|
* @returns {number} a number in the [0, 255] range
|
|
834
820
|
*/
|
|
835
821
|
get brightness() {
|
|
836
|
-
const { r, g, b } = this;
|
|
822
|
+
const { r, g, b } = this.toRgb();
|
|
837
823
|
return (r * 299 + g * 587 + b * 114) / 1000;
|
|
838
824
|
}
|
|
839
825
|
|
|
@@ -842,12 +828,14 @@
|
|
|
842
828
|
* @returns {CP.RGBA} an {r,g,b,a} object with [0, 255] ranged values
|
|
843
829
|
*/
|
|
844
830
|
toRgb() {
|
|
845
|
-
|
|
831
|
+
let {
|
|
846
832
|
r, g, b, a,
|
|
847
833
|
} = this;
|
|
848
834
|
|
|
835
|
+
[r, g, b] = [r, g, b].map((n) => roundPart(n * 255 * 100) / 100);
|
|
836
|
+
a = roundPart(a * 100) / 100;
|
|
849
837
|
return {
|
|
850
|
-
r, g, b, a
|
|
838
|
+
r, g, b, a,
|
|
851
839
|
};
|
|
852
840
|
}
|
|
853
841
|
|
|
@@ -941,7 +929,7 @@
|
|
|
941
929
|
toHsv() {
|
|
942
930
|
const {
|
|
943
931
|
r, g, b, a,
|
|
944
|
-
} = this
|
|
932
|
+
} = this;
|
|
945
933
|
const { h, s, v } = rgbToHsv(r, g, b);
|
|
946
934
|
|
|
947
935
|
return {
|
|
@@ -956,7 +944,7 @@
|
|
|
956
944
|
toHsl() {
|
|
957
945
|
const {
|
|
958
946
|
r, g, b, a,
|
|
959
|
-
} = this
|
|
947
|
+
} = this;
|
|
960
948
|
const { h, s, l } = rgbToHsl(r, g, b);
|
|
961
949
|
|
|
962
950
|
return {
|
|
@@ -1041,6 +1029,7 @@
|
|
|
1041
1029
|
*/
|
|
1042
1030
|
setAlpha(alpha) {
|
|
1043
1031
|
const self = this;
|
|
1032
|
+
if (typeof alpha !== 'number') return self;
|
|
1044
1033
|
self.a = boundAlpha(alpha);
|
|
1045
1034
|
return self;
|
|
1046
1035
|
}
|