@thednp/color-picker 0.0.2-alpha1 → 0.0.2-alpha2

package/dist/js/color.min.js

@@ -1,2 +1,2 @@
-// Color v0.0.2alpha1 | thednp © 2022 | MIT-License
-!function(t,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):(t="undefined"!=typeof globalThis?globalThis:t||self).Color=r()}(this,(function(){"use strict";const{head:t}=document;function r(t,r){const e=getComputedStyle(t);return r in e?e[r]:""}const e=(t,r)=>Object.assign(t,r),n=(t,r)=>{e(t.style,r)},o=["transparent","currentColor","inherit","revert","initial"];function s(t){const r=Math.floor(t);return t-r<.5?r:Math.round(t)}const a=["rgb","hex","hsl","hsv","hwb"],i="[-\\+]?\\d*\\.?\\d+(?:deg|rad|grad|turn)?",h="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",u=`(?:${h})|(?:${i})`,c="(?:[,|\\s]+)",b=`(?:[\\s|\\(\\s|\\s\\(\\s]+)?(${u})${c}(${h})${c}(${h})(?:[,|\\/\\s]*)?(${h})?(?:[\\s|\\)\\s]+)?`,g={CSS_UNIT:new RegExp(u),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 l(t){return(""+t).includes(".")&&1===parseFloat(t)}function f(t){return(""+t).includes("%")}function m(e){return!o.includes(e)&&!["#",...a].some(t=>e.includes(t))&&["rgb(255, 255, 255)","rgb(0, 0, 0)"].every(o=>{n(t,{color:e});const s=r(t,"color");return n(t,{color:""}),s!==o})}function p(t){return Boolean(g.CSS_UNIT.exec(String(t)))}function d(t,r){let e=t;l(t)&&(e="100%");const n=f(e);return e=360===r?parseFloat(e):Math.min(r,Math.max(0,parseFloat(e))),n&&(e=e*r/100),Math.abs(e-r)<1e-6?1:(e=360===r?(e<0?e%r+r:e%r)/r:e%r/r,e)}function x(t){let r=parseFloat(""+t);return(Number.isNaN(r)||r<0||r>1)&&(r=1),r}function S(t){return Math.min(1,Math.max(0,t))}function $(e){n(t,{color:e});const o=r(t,"color");return n(t,{color:""}),o}function A(t){return s(255*t).toString(16)}function w(t){return H(t)/255}function H(t){return parseInt(t,16)}function y(t){return 1===t.length?"0"+t:String(t)}function v(t,r,e){const n=t/255,o=r/255,s=e/255,a=Math.max(n,o,s),i=Math.min(n,o,s);let h=0,u=0;const c=(a+i)/2;if(a===i)u=0,h=0;else{const t=a-i;switch(u=c>.5?t/(2-a-i):t/(a+i),a){case n:h=(o-s)/t+(o<s?6:0);break;case o:h=(s-n)/t+2;break;case s:h=(n-o)/t+4}h/=6}return{h:h,s:u,l:c}}function R(t,r,e){let n=e;return n<0&&(n+=1),n>1&&(n-=1),n<1/6?t+6*n*(r-t):n<.5?r:n<2/3?t+(r-t)*(2/3-n)*6:t}function M(t,r,e){let n=0,o=0,s=0;if(0===r)o=e,s=e,n=e;else{const a=e<.5?e*(1+r):e+r-e*r,i=2*e-a;n=R(i,a,t+1/3),o=R(i,a,t),s=R(i,a,t-1/3)}return[n,o,s]=[n,o,s].map(t=>255*t),{r:n,g:o,b:s}}function F(t,r,e){const n=t/255,o=r/255,s=e/255;let a=0,i=0;const h=Math.min(n,o,s),u=Math.max(n,o,s),c=1-u;if(u===h)return{h:0,w:h,b:c};n===h?(a=o-s,i=3):(a=o===h?s-n:n-o,i=o===h?5:1);const b=(i-a/(u-h))/6;return{h:1===b?0:b,w:h,b:c}}function T(t,r,e){if(r+e>=1){const t=r/(r+e)*255;return{r:t,g:t,b:t}}let{r:n,g:o,b:s}=M(t,1,.5);return[n,o,s]=[n,o,s].map(t=>t/255*(1-r-e)+r).map(t=>255*t),{r:n,g:o,b:s}}function C(t,r,e){const n=t/255,o=r/255,s=e/255,a=Math.max(n,o,s),i=Math.min(n,o,s);let h=0;const u=a,c=a-i,b=0===a?0:c/a;if(a===i)h=0;else{switch(a){case n:h=(o-s)/c+(o<s?6:0);break;case o:h=(s-n)/c+2;break;case s:h=(n-o)/c+4}h/=6}return{h:h,s:b,v:u}}function E(t,r,e){const n=6*t,o=r,s=e,a=Math.floor(n),i=n-a,h=s*(1-o),u=s*(1-i*o),c=s*(1-(1-i)*o),b=a%6;let g=[s,u,h,h,c,s][b],l=[c,s,s,u,h,h][b],f=[h,h,c,s,s,u][b];return[g,l,f]=[g,l,f].map(t=>255*t),{r:g,g:l,b:f}}function N(t,r,e,n){const o=[y(s(t).toString(16)),y(s(r).toString(16)),y(s(e).toString(16))];return n&&o[0].charAt(0)===o[0].charAt(1)&&o[1].charAt(0)===o[1].charAt(1)&&o[2].charAt(0)===o[2].charAt(1)?o[0].charAt(0)+o[1].charAt(0)+o[2].charAt(0):o.join("")}function k(t,r,e,n,o){const a=[y(s(t).toString(16)),y(s(r).toString(16)),y(s(e).toString(16)),y(A(n))];return o&&a[0].charAt(0)===a[0].charAt(1)&&a[1].charAt(0)===a[1].charAt(1)&&a[2].charAt(0)===a[2].charAt(1)&&a[3].charAt(0)===a[3].charAt(1)?a[0].charAt(0)+a[1].charAt(0)+a[2].charAt(0)+a[3].charAt(0):a.join("")}function I(t){let r=t.trim().toLowerCase();if(0===r.length)return{r:0,g:0,b:0,a:1};let e=!1;if(m(r))r=$(r),e=!0;else if(o.includes(r)){return{r:0,g:0,b:0,a:"transparent"===r?0:1,format:"rgb",ok:!0}}let[,n,s,a,i]=g.rgb.exec(r)||[];return n&&s&&a?{r:n,g:s,b:a,a:void 0!==i?i:1,format:"rgb"}:([,n,s,a,i]=g.hsl.exec(r)||[],n&&s&&a?{h:n,s:s,l:a,a:void 0!==i?i:1,format:"hsl"}:([,n,s,a,i]=g.hsv.exec(r)||[],n&&s&&a?{h:n,s:s,v:a,a:void 0!==i?i:1,format:"hsv"}:([,n,s,a,i]=g.hwb.exec(r)||[],n&&s&&a?{h:n,w:s,b:a,a:void 0!==i?i:1,format:"hwb"}:([,n,s,a,i]=g.hex8.exec(r)||[],n&&s&&a&&i?{r:H(n),g:H(s),b:H(a),a:w(i),format:e?"rgb":"hex"}:([,n,s,a]=g.hex6.exec(r)||[],n&&s&&a?{r:H(n),g:H(s),b:H(a),format:e?"rgb":"hex"}:([,n,s,a,i]=g.hex4.exec(r)||[],n&&s&&a&&i?{r:H(n+n),g:H(s+s),b:H(a+a),a:w(i+i),format:e?"rgb":"hex"}:([,n,s,a]=g.hex3.exec(r)||[],!!(n&&s&&a)&&{r:H(n+n),g:H(s+s),b:H(a+a),format:e?"rgb":"hex"})))))))}function j(t){let r={r:0,g:0,b:0},e=t,n=1,o=null,s=null,i=null,h=null,u=null,c=null,b=null,g=null,l=!1;const m="object"==typeof e&&e.format;let S=m&&a.includes(m)?m:"rgb";return"string"==typeof t&&(e=I(t),e&&(l=!0)),"object"==typeof e&&(p(e.r)&&p(e.g)&&p(e.b)?(({r:b,g:g,b:u}=e),[b,g,u]=[b,g,u].map(t=>255*d(t,f(t)?100:255)),r={r:b,g:g,b:u},l=!0,S="rgb"):p(e.h)&&p(e.s)&&p(e.v)?(({h:c,s:o,v:s}=e),c="number"==typeof c?c:d(c,360),o="number"==typeof o?o:d(o,100),s="number"==typeof s?s:d(s,100),r=E(c,o,s),l=!0,S="hsv"):p(e.h)&&p(e.s)&&p(e.l)?(({h:c,s:o,l:i}=e),c="number"==typeof c?c:d(c,360),o="number"==typeof o?o:d(o,100),i="number"==typeof i?i:d(i,100),r=M(c,o,i),l=!0,S="hsl"):p(e.h)&&p(e.w)&&p(e.b)&&(({h:c,w:h,b:u}=e),c="number"==typeof c?c:d(c,360),h="number"==typeof h?h:d(h,100),u="number"==typeof u?u:d(u,100),r=T(c,h,u),l=!0,S="hwb"),p(e.a)&&(n=e.a,n=f(""+n)||parseFloat(n)>1?d(n,100):n)),void 0===e&&(l=!0),{ok:l,format:S,r:Math.min(255,Math.max(r.r,0)),g:Math.min(255,Math.max(r.g,0)),b:Math.min(255,Math.max(r.b,0)),a:x(n)}}class _{constructor(t,r){let e=t;const n=r&&a.includes(r)?r:"rgb";if(e instanceof _&&(e=j(e)),"number"==typeof e){e=`#${2===(""+e).length?"0":"00"}${e}`}const{r:o,g:s,b:i,a:h,ok:u,format:c}=j(e);this.originalInput=t,this.r=o,this.g=s,this.b=i,this.a=h,this.ok=u,this.format=n||c}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:r,b:e}=this;let n=0,o=0,s=0;const a=t/255,i=r/255,h=e/255;return n=a<=.03928?a/12.92:((a+.055)/1.055)**2.4,o=i<=.03928?i/12.92:((i+.055)/1.055)**2.4,s=h<=.03928?h/12.92:((h+.055)/1.055)**2.4,.2126*n+.7152*o+.0722*s}get brightness(){const{r:t,g:r,b:e}=this;return(299*t+587*r+114*e)/1e3}toRgb(){const{r:t,g:r,b:e,a:n}=this;return{r:t,g:r,b:e,a:s(100*n)/100}}toRgbString(){const{r:t,g:r,b:e,a:n}=this.toRgb(),[o,a,i]=[t,r,e].map(s);return 1===n?`rgb(${o}, ${a}, ${i})`:`rgba(${o}, ${a}, ${i}, ${n})`}toRgbCSS4String(){const{r:t,g:r,b:e,a:n}=this.toRgb(),[o,a,i]=[t,r,e].map(s);return`rgb(${o} ${a} ${i}${1===n?"":` / ${s(100*n)}%`})`}toHex(t){const{r:r,g:e,b:n,a:o}=this.toRgb();return 1===o?N(r,e,n,t):k(r,e,n,o,t)}toHexString(t){return"#"+this.toHex(t)}toHex8(t){const{r:r,g:e,b:n,a:o}=this.toRgb();return k(r,e,n,o,t)}toHex8String(t){return"#"+this.toHex8(t)}toHsv(){const{r:t,g:r,b:e,a:n}=this.toRgb(),{h:o,s:s,v:a}=C(t,r,e);return{h:o,s:s,v:a,a:n}}toHsl(){const{r:t,g:r,b:e,a:n}=this.toRgb(),{h:o,s:s,l:a}=v(t,r,e);return{h:o,s:s,l:a,a:n}}toHslString(){let{h:t,s:r,l:e,a:n}=this.toHsl();return t=s(360*t),r=s(100*r),e=s(100*e),n=s(100*n)/100,1===n?`hsl(${t}, ${r}%, ${e}%)`:`hsla(${t}, ${r}%, ${e}%, ${n})`}toHslCSS4String(){let{h:t,s:r,l:e,a:n}=this.toHsl();t=s(360*t),r=s(100*r),e=s(100*e),n=s(100*n);return`hsl(${t}deg ${r}% ${e}%${n<100?` / ${s(n)}%`:""})`}toHwb(){const{r:t,g:r,b:e,a:n}=this,{h:o,w:s,b:a}=F(t,r,e);return{h:o,w:s,b:a,a:n}}toHwbString(){let{h:t,w:r,b:e,a:n}=this.toHwb();t=s(360*t),r=s(100*r),e=s(100*e),n=s(100*n);return`hwb(${t}deg ${r}% ${e}%${n<100?` / ${s(n)}%`:""})`}setAlpha(t){return this.a=x(t),this}saturate(t){if("number"!=typeof t)return this;const{h:r,s:n,l:o}=this.toHsl(),{r:s,g:a,b:i}=M(r,S(n+t/100),o);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:r,s:n,l:o}=this.toHsl(),{r:s,g:a,b:i}=M(r,n,S(o+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:r,s:n,l:o}=this.toHsl(),{r:s,g:a,b:i}=M(S((360*r+t)%360/360),n,o);return e(this,{r:s,g:a,b:i}),this}clone(){return new _(this)}toString(t){const{format:r}=this;return"hex"===r?this.toHexString(t):"hsl"===r?this.toHslString():"hwb"===r?this.toHwbString():this.toRgbString()}}return e(_,{ANGLES:"deg|rad|grad|turn",CSS_ANGLE:i,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:h,CSS_UNIT2:u,PERMISSIVE_MATCH:b,matchers:g,isOnePointZero:l,isPercentage:f,isValidCSSUnit:p,isColorName:m,pad2:y,clamp01:S,bound01:d,boundAlpha:x,getRGBFromName:$,convertHexToDecimal:w,convertDecimalToHex:A,rgbToHsl:v,rgbToHex:N,rgbToHsv:C,rgbToHwb:F,rgbaToHex:k,hslToRgb:M,hsvToRgb:E,hueToRgb:R,hwbToRgb:T,parseIntFromHex:H,stringInputToObject:I,inputToRGB:j,roundPart:s,getElementStyle:r,setElementStyle:n,ObjectAssign:e}),_}));
+// Color v0.0.2alpha2 | thednp © 2022 | MIT-License
+!function(t,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):(t="undefined"!=typeof globalThis?globalThis:t||self).Color=r()}(this,(function(){"use strict";const{head:t}=document;function r(t,r){const e=getComputedStyle(t);return r in e?e[r]:""}const e=(t,r)=>Object.assign(t,r),n=(t,r)=>{e(t.style,r)},o=["transparent","currentColor","inherit","revert","initial"];function s(t){const r=Math.floor(t);return t-r<.5?r:Math.round(t)}const i=["rgb","hex","hsl","hsv","hwb"],a="[-\\+]?\\d*\\.?\\d+(?:deg|rad|grad|turn)?",h="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",u=`(?:${h})|(?:${a})`,c="(?:[,|\\s]+)",l=`(?:[\\s|\\(\\s|\\s\\(\\s]+)?(${u})${c}(${h})${c}(${h})(?:[,|\\/\\s]*)?(${h})?(?:[\\s|\\)\\s]+)?`,g={CSS_UNIT:new RegExp(u),hwb:new RegExp("hwb"+l),rgb:new RegExp("rgb(?:a)?"+l),hsl:new RegExp("hsl(?:a)?"+l),hsv:new RegExp("hsv(?:a)?"+l),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 b(t){return(""+t).includes(".")&&1===parseFloat(t)}function f(t){return(""+t).includes("%")}function m(e){return!o.includes(e)&&!["#",...i].some(t=>e.includes(t))&&(!!["black","white"].includes(e)||["rgb(255, 255, 255)","rgb(0, 0, 0)"].every(o=>{n(t,{color:e});const s=r(t,"color");return n(t,{color:""}),s!==o}))}function d(t){return Boolean(g.CSS_UNIT.exec(String(t)))}function x(t,r){let e=t;if("number"==typeof t&&0===Math.min(t,0)&&1===Math.max(t,1))return t;b(t)&&(e="100%");const n=f(e);return e=360===r?parseFloat(e):Math.min(r,Math.max(0,parseFloat(e))),n&&(e=e*r/100),Math.abs(e-r)<1e-6?1:(e=360===r?(e<0?e%r+r:e%r)/r:e%r/r,e)}function S(t){let r=parseFloat(""+t);return(Number.isNaN(r)||r<0||r>1)&&(r=1),r}function p(t){return Math.min(1,Math.max(0,t))}function A(e){n(t,{color:e});const o=r(t,"color");return n(t,{color:""}),o}function $(t){return s(255*t).toString(16)}function w(t){return H(t)/255}function H(t){return parseInt(t,16)}function v(t){return 1===t.length?"0"+t:String(t)}function R(t,r,e){const n=Math.max(t,r,e),o=Math.min(t,r,e);let s=0,i=0;const a=(n+o)/2;if(n===o)i=0,s=0;else{const h=n-o;i=a>.5?h/(2-n-o):h/(n+o),n===t&&(s=(r-e)/h+(r<e?6:0)),n===r&&(s=(e-t)/h+2),n===e&&(s=(t-r)/h+4),s/=6}return{h:s,s:i,l:a}}function F(t,r,e){let n=e;return n<0&&(n+=1),n>1&&(n-=1),n<1/6?t+6*n*(r-t):n<.5?r:n<2/3?t+(r-t)*(2/3-n)*6:t}function T(t,r,e){let n=0,o=0,s=0;if(0===r)o=e,s=e,n=e;else{const i=e<.5?e*(1+r):e+r-e*r,a=2*e-i;n=F(a,i,t+1/3),o=F(a,i,t),s=F(a,i,t-1/3)}return{r:n,g:o,b:s}}function y(t,r,e){let n=0,o=0;const s=Math.min(t,r,e),i=Math.max(t,r,e),a=1-i;if(i===s)return{h:0,w:s,b:a};t===s?(n=r-e,o=3):(n=r===s?e-t:t-r,o=r===s?5:1);const h=(o-n/(i-s))/6;return{h:1===h?0:h,w:s,b:a}}function M(t,r,e){if(r+e>=1){const t=r/(r+e);return{r:t,g:t,b:t}}let{r:n,g:o,b:s}=T(t,1,.5);return[n,o,s]=[n,o,s].map(t=>t*(1-r-e)+r),{r:n,g:o,b:s}}function C(t,r,e){const n=Math.max(t,r,e),o=Math.min(t,r,e);let s=0;const i=n-o;return n===o?s=0:(t===n&&(s=(r-e)/i+(r<e?6:0)),r===n&&(s=(e-t)/i+2),e===n&&(s=(t-r)/i+4),s/=6),{h:s,s:0===n?0:i/n,v:n}}function E(t,r,e){const n=6*t,o=r,s=e,i=Math.floor(n),a=n-i,h=s*(1-o),u=s*(1-a*o),c=s*(1-(1-a)*o),l=i%6;return{r:[s,u,h,h,c,s][l],g:[c,s,s,u,h,h][l],b:[h,h,c,s,s,u][l]}}function N(t,r,e,n){const o=[v(s(t).toString(16)),v(s(r).toString(16)),v(s(e).toString(16))];return n&&o[0].charAt(0)===o[0].charAt(1)&&o[1].charAt(0)===o[1].charAt(1)&&o[2].charAt(0)===o[2].charAt(1)?o[0].charAt(0)+o[1].charAt(0)+o[2].charAt(0):o.join("")}function I(t,r,e,n,o){const i=[v(s(t).toString(16)),v(s(r).toString(16)),v(s(e).toString(16)),v($(n))];return o&&i[0].charAt(0)===i[0].charAt(1)&&i[1].charAt(0)===i[1].charAt(1)&&i[2].charAt(0)===i[2].charAt(1)&&i[3].charAt(0)===i[3].charAt(1)?i[0].charAt(0)+i[1].charAt(0)+i[2].charAt(0)+i[3].charAt(0):i.join("")}function j(t){let r=t.trim().toLowerCase();if(0===r.length)return{r:0,g:0,b:0,a:1};if(m(r))r=A(r);else if(o.includes(r)){return{r:0,g:0,b:0,a:"transparent"===r?0:1,format:"rgb",ok:!0}}let[,e,n,s,i]=g.rgb.exec(r)||[];return e&&n&&s?{r:e,g:n,b:s,a:void 0!==i?i:1,format:"rgb"}:([,e,n,s,i]=g.hsl.exec(r)||[],e&&n&&s?{h:e,s:n,l:s,a:void 0!==i?i:1,format:"hsl"}:([,e,n,s,i]=g.hsv.exec(r)||[],e&&n&&s?{h:e,s:n,v:s,a:void 0!==i?i:1,format:"hsv"}:([,e,n,s,i]=g.hwb.exec(r)||[],e&&n&&s?{h:e,w:n,b:s,a:void 0!==i?i:1,format:"hwb"}:([,e,n,s,i]=g.hex8.exec(r)||[],e&&n&&s&&i?{r:H(e),g:H(n),b:H(s),a:w(i),format:"hex"}:([,e,n,s]=g.hex6.exec(r)||[],e&&n&&s?{r:H(e),g:H(n),b:H(s),format:"hex"}:([,e,n,s,i]=g.hex4.exec(r)||[],e&&n&&s&&i?{r:H(e+e),g:H(n+n),b:H(s+s),a:w(i+i),format:"hex"}:([,e,n,s]=g.hex3.exec(r)||[],!!(e&&n&&s)&&{r:H(e+e),g:H(n+n),b:H(s+s),format:"hex"})))))))}function k(t){let r={r:0,g:0,b:0},e=t,n=1,o=null,s=null,a=null,h=null,u=null,c=null,l=null,g=null,b=!1;const m="object"==typeof e&&e.format;let p=m&&i.includes(m)?m:"rgb";return"string"==typeof t&&(e=j(t),e&&(b=!0)),"object"==typeof e&&(d(e.r)&&d(e.g)&&d(e.b)&&(({r:l,g:g,b:u}=e),[l,g,u]=[l,g,u].map(t=>x(t,f(t)?100:255)),r={r:l,g:g,b:u},b=!0,p=e.format||"rgb"),d(e.h)&&d(e.s)&&d(e.v)&&(({h:c,s:o,v:s}=e),c=x(c,360),o=x(o,100),s=x(s,100),r=E(c,o,s),b=!0,p="hsv"),d(e.h)&&d(e.s)&&d(e.l)&&(({h:c,s:o,l:a}=e),c=x(c,360),o=x(o,100),a=x(a,100),r=T(c,o,a),b=!0,p="hsl"),d(e.h)&&d(e.w)&&d(e.b)&&(({h:c,w:h,b:u}=e),c=x(c,360),h=x(h,100),u=x(u,100),r=M(c,h,u),b=!0,p="hwb"),d(e.a)&&(n=e.a,n=f(""+n)||parseFloat(n)>1?x(n,100):n)),void 0===e&&(b=!0),{ok:b,format:p,r:r.r,g:r.g,b:r.b,a:S(n)}}class _{constructor(t,r){let e=t;const n=r&&i.includes(r)?r:"";e instanceof _&&(e=k(e));const{r:o,g:s,b:a,a:h,ok:u,format:c}=k(e);this.originalInput=t,this.r=o,this.g=s,this.b=a,this.a=h,this.ok=u,this.format=n||c}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:r,b:e}=this;let n=0,o=0,s=0;return n=t<=.03928?t/12.92:((t+.055)/1.055)**2.4,o=r<=.03928?r/12.92:((r+.055)/1.055)**2.4,s=e<=.03928?e/12.92:((e+.055)/1.055)**2.4,.2126*n+.7152*o+.0722*s}get brightness(){const{r:t,g:r,b:e}=this.toRgb();return(299*t+587*r+114*e)/1e3}toRgb(){let{r:t,g:r,b:e,a:n}=this;return[t,r,e]=[t,r,e].map(t=>s(255*t*100)/100),n=s(100*n)/100,{r:t,g:r,b:e,a:n}}toRgbString(){const{r:t,g:r,b:e,a:n}=this.toRgb(),[o,i,a]=[t,r,e].map(s);return 1===n?`rgb(${o}, ${i}, ${a})`:`rgba(${o}, ${i}, ${a}, ${n})`}toRgbCSS4String(){const{r:t,g:r,b:e,a:n}=this.toRgb(),[o,i,a]=[t,r,e].map(s);return`rgb(${o} ${i} ${a}${1===n?"":` / ${s(100*n)}%`})`}toHex(t){const{r:r,g:e,b:n,a:o}=this.toRgb();return 1===o?N(r,e,n,t):I(r,e,n,o,t)}toHexString(t){return"#"+this.toHex(t)}toHex8(t){const{r:r,g:e,b:n,a:o}=this.toRgb();return I(r,e,n,o,t)}toHex8String(t){return"#"+this.toHex8(t)}toHsv(){const{r:t,g:r,b:e,a:n}=this,{h:o,s:s,v:i}=C(t,r,e);return{h:o,s:s,v:i,a:n}}toHsl(){const{r:t,g:r,b:e,a:n}=this,{h:o,s:s,l:i}=R(t,r,e);return{h:o,s:s,l:i,a:n}}toHslString(){let{h:t,s:r,l:e,a:n}=this.toHsl();return t=s(360*t),r=s(100*r),e=s(100*e),n=s(100*n)/100,1===n?`hsl(${t}, ${r}%, ${e}%)`:`hsla(${t}, ${r}%, ${e}%, ${n})`}toHslCSS4String(){let{h:t,s:r,l:e,a:n}=this.toHsl();t=s(360*t),r=s(100*r),e=s(100*e),n=s(100*n);return`hsl(${t}deg ${r}% ${e}%${n<100?` / ${s(n)}%`:""})`}toHwb(){const{r:t,g:r,b:e,a:n}=this,{h:o,w:s,b:i}=y(t,r,e);return{h:o,w:s,b:i,a:n}}toHwbString(){let{h:t,w:r,b:e,a:n}=this.toHwb();t=s(360*t),r=s(100*r),e=s(100*e),n=s(100*n);return`hwb(${t}deg ${r}% ${e}%${n<100?` / ${s(n)}%`:""})`}setAlpha(t){return"number"!=typeof t||(this.a=S(t)),this}saturate(t){if("number"!=typeof t)return this;const{h:r,s:n,l:o}=this.toHsl(),{r:s,g:i,b:a}=T(r,p(n+t/100),o);return e(this,{r:s,g:i,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:r,s:n,l:o}=this.toHsl(),{r:s,g:i,b:a}=T(r,n,p(o+t/100));return e(this,{r:s,g:i,b:a}),this}darken(t){return"number"==typeof t?this.lighten(-t):this}spin(t){if("number"!=typeof t)return this;const{h:r,s:n,l:o}=this.toHsl(),{r:s,g:i,b:a}=T(p((360*r+t)%360/360),n,o);return e(this,{r:s,g:i,b:a}),this}clone(){return new _(this)}toString(t){const{format:r}=this;return"hex"===r?this.toHexString(t):"hsl"===r?this.toHslString():"hwb"===r?this.toHwbString():this.toRgbString()}}return e(_,{ANGLES:"deg|rad|grad|turn",CSS_ANGLE:a,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:h,CSS_UNIT2:u,PERMISSIVE_MATCH:l,matchers:g,isOnePointZero:b,isPercentage:f,isValidCSSUnit:d,isColorName:m,pad2:v,clamp01:p,bound01:x,boundAlpha:S,getRGBFromName:A,convertHexToDecimal:w,convertDecimalToHex:$,rgbToHsl:R,rgbToHex:N,rgbToHsv:C,rgbToHwb:y,rgbaToHex:I,hslToRgb:T,hsvToRgb:E,hueToRgb:F,hwbToRgb:M,parseIntFromHex:H,stringInputToObject:j,inputToRGB:k,roundPart:s,getElementStyle:r,setElementStyle:n,ObjectAssign:e}),_}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thednp/color-picker",
-  "version": "0.0.2alpha1",
+  "version": "0.0.2alpha2",
   "description": "Modern Color Picker Web Component",
   "main": "dist/js/color-picker.min.js",
   "module": "dist/js/color-picker.esm.js",
@@ -18,9 +18,11 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "instrument": "npx nyc instrument --all --compact=false src/js cypress/instrumented",
+    "instrument": "npx nyc instrument --compact=false src/js cypress/instrumented",
     "test": "npm run instrument && npx cypress run",
-    "coverage:report": "npx nyc report --exclude=src/js/util --reporter=lcov --reporter=text --report-dir=cypress/coverage",
+    "cypress": "npm run instrument && npx cypress open",
+    "coverage:report": "npx nyc report --exclude=src/js/util --reporter=lcov --reporter=json --reporter=text --reporter=json-summary",
+    "coverage:badge": "npx --check-coverage update-badge",
     "fix:js": "eslint src/ --config .eslintrc --fix",
     "lint:js": "eslint src/ --config .eslintrc",
     "fix:css": "stylelint --config .stylelintrc.json -s --fix scss \"src/scss/*.scss\"",
@@ -85,7 +87,8 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "babel-plugin-istanbul": "^6.1.1",
-    "cypress": "^9.5.3",
+    "check-code-coverage": "^1.10.0",
+    "cypress": "^9.5.4",
     "esbuild": "^0.14.30",
     "eslint": "^7.22.0",
     "eslint-config-airbnb-base": "^14.2.1",

package/src/js/color-palette.js

@@ -29,26 +29,23 @@ export default class ColorPalette {
     } else if (args.length === 2) {
       [hueSteps, lightSteps] = args;
       if ([hueSteps, lightSteps].some((n) => n < 1)) {
-        throw TypeError('ColorPalette: when 2 arguments used, both must be larger than 0.');
+        throw TypeError('ColorPalette: both arguments must be higher than 0.');
       }
-    } else {
-      throw TypeError('ColorPalette requires minimum 2 arguments');
     }
 
-    /** @type {Color[]} */
+    /** @type {*} */
     const colors = [];
-
     const hueStep = 360 / hueSteps;
     const half = roundPart((lightSteps - (lightSteps % 2 ? 1 : 0)) / 2);
-    const estimatedStep = 100 / (lightSteps + (lightSteps % 2 ? 0 : 1)) / 100;
+    const steps1To13 = [0.25, 0.2, 0.15, 0.11, 0.09, 0.075];
+    const lightSets = [[1, 2, 3], [4, 5], [6, 7], [8, 9], [10, 11], [12, 13]];
+    const closestSet = lightSets.find((set) => set.includes(lightSteps));
 
-    let lightStep = 0.25;
-    lightStep = [4, 5].includes(lightSteps) ? 0.2 : lightStep;
-    lightStep = [6, 7].includes(lightSteps) ? 0.15 : lightStep;
-    lightStep = [8, 9].includes(lightSteps) ? 0.11 : lightStep;
-    lightStep = [10, 11].includes(lightSteps) ? 0.09 : lightStep;
-    lightStep = [12, 13].includes(lightSteps) ? 0.075 : lightStep;
-    lightStep = lightSteps > 13 ? estimatedStep : lightStep;
+    // find a lightStep that won't go beyond black and white
+    // something within the [10-90] range of lightness
+    const lightStep = closestSet
+      ? steps1To13[lightSets.indexOf(closestSet)]
+      : (100 / (lightSteps + (lightSteps % 2 ? 0 : 1)) / 100);
 
     // light tints
     for (let i = 1; i < half + 1; i += 1) {

package/src/js/color-picker-element.js

@@ -5,7 +5,7 @@ import setAttribute from 'shorter-js/src/attr/setAttribute';
 import getAttribute from 'shorter-js/src/attr/getAttribute';
 
 import Color from './color';
-import ColorPicker, { getColorPickerInstance } from './color-picker';
+import ColorPicker from './color-picker';
 import ColorPalette from './color-palette';
 import Version from './util/version';
 
@@ -15,90 +15,82 @@ let CPID = 0;
  * `ColorPickerElement` Web Component.
  * @example
  * <label for="UNIQUE_ID">Label</label>
- * <color-picker data-format="hex" data-value="#075">
- *   <input id="UNIQUE_ID" type="text" class="color-preview btn-appearance">
+ * <color-picker>
+ *   <input id="UNIQUE_ID" value="red" format="hex" class="color-preview btn-appearance">
  * </color-picker>
+ * // or
+ * <label for="UNIQUE_ID">Label</label>
+ * <color-picker data-id="UNIQUE_ID" data-value="red" data-format="hex"></color-picker>
  */
 class ColorPickerElement extends HTMLElement {
   constructor() {
     super();
-    /** @type {boolean} */
-    this.isDisconnected = true;
     this.attachShadow({ mode: 'open' });
   }
 
   /**
    * Returns the current color value.
-   * @returns {string?}
+   * @returns {string | undefined}
    */
-  get value() { return this.input ? this.input.value : null; }
+  get value() { return this.input && this.input.value; }
 
   connectedCallback() {
-    if (this.colorPicker) {
-      if (this.isDisconnected) {
-        this.isDisconnected = false;
-      }
-      return;
-    }
+    if (this.input) return;
 
-    const inputs = getElementsByTagName('input', this);
+    let [input] = getElementsByTagName('input', this);
+    const value = (input && getAttribute(input, 'value')) || getAttribute(this, 'data-value') || '#fff';
+    const format = (input && getAttribute(input, 'format')) || getAttribute(this, 'data-format') || 'rgb';
+    let id = (input && getAttribute(input, 'id')) || getAttribute(this, 'data-id');
 
-    if (!inputs.length) {
-      const label = getAttribute(this, 'data-label');
-      const value = getAttribute(this, 'data-value') || '#069';
-      const format = getAttribute(this, 'data-format') || 'rgb';
-      const newInput = createElement({
+    if (!id) {
+      id = `color-picker-${format}-${CPID}`;
+      CPID += 1;
+    }
+
+    if (!input) {
+      input = createElement({
         tagName: 'input',
         type: 'text',
         className: 'color-preview btn-appearance',
       });
-      let id = getAttribute(this, 'data-id');
-      if (!id) {
-        id = `color-picker-${format}-${CPID}`;
-        CPID += 1;
-      }
-
-      const labelElement = createElement({ tagName: 'label', innerText: label || 'Color Picker' });
-      this.before(labelElement);
-      setAttribute(labelElement, 'for', id);
-      setAttribute(newInput, 'id', id);
-      setAttribute(newInput, 'name', id);
-      setAttribute(newInput, 'autocomplete', 'off');
-      setAttribute(newInput, 'spellcheck', 'false');
-      setAttribute(newInput, 'value', value);
-      this.append(newInput);
-    }
 
-    const [input] = inputs;
-
-    if (input) {
-      /** @type {HTMLInputElement} */
-      // @ts-ignore - `HTMLInputElement` is `HTMLElement`
-      this.input = input;
-
-      // @ts-ignore - `HTMLInputElement` is `HTMLElement`
-      this.colorPicker = new ColorPicker(input);
-      this.color = this.colorPicker.color;
+      setAttribute(input, 'id', id);
+      setAttribute(input, 'name', id);
+      setAttribute(input, 'autocomplete', 'off');
+      setAttribute(input, 'spellcheck', 'false');
+      setAttribute(input, 'value', value);
+      this.append(input);
+    }
+    /** @type {HTMLInputElement} */
+    // @ts-ignore - `HTMLInputElement` is `HTMLElement`
+    this.input = input;
 
-      if (this.shadowRoot) {
-        this.shadowRoot.append(createElement('slot'));
-      }
+    // @ts-ignore - `HTMLInputElement` is `HTMLElement`
+    this.colorPicker = new ColorPicker(input);
 
-      this.isDisconnected = false;
-    }
+    // @ts-ignore - `shadowRoot` is defined in the constructor
+    this.shadowRoot.append(createElement('slot'));
   }
 
+  /** @this {ColorPickerElement} */
   disconnectedCallback() {
-    if (this.colorPicker) this.colorPicker.dispose();
-    this.isDisconnected = true;
+    const { input, colorPicker, shadowRoot } = this;
+    if (colorPicker) colorPicker.dispose();
+    if (input) input.remove();
+    if (shadowRoot) shadowRoot.innerHTML = '';
+
+    ObjectAssign(this, {
+      colorPicker: undefined,
+      input: undefined,
+    });
   }
 }
 
 ObjectAssign(ColorPickerElement, {
   Color,
   ColorPicker,
-  ColorPalette,
-  getInstance: getColorPickerInstance,
+  ColorPalette, // @ts-ignore
+  getInstance: ColorPicker.getInstance,
   Version,
 });