@thednp/color-picker 0.0.1-alpha2 → 0.0.2-alpha1
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +32 -15
- package/dist/css/color-picker.css +38 -15
- package/dist/css/color-picker.min.css +2 -2
- package/dist/css/color-picker.rtl.css +38 -15
- package/dist/css/color-picker.rtl.min.css +2 -2
- package/dist/js/color-esm.js +1178 -0
- package/dist/js/color-esm.min.js +2 -0
- package/dist/js/color-palette-esm.js +1252 -0
- package/dist/js/color-palette-esm.min.js +2 -0
- package/dist/js/color-palette.js +1260 -0
- package/dist/js/color-palette.min.js +2 -0
- package/dist/js/color-picker-element-esm.js +433 -424
- package/dist/js/color-picker-element-esm.min.js +2 -2
- package/dist/js/color-picker-element.js +435 -426
- package/dist/js/color-picker-element.min.js +2 -2
- package/dist/js/color-picker-esm.js +745 -739
- package/dist/js/color-picker-esm.min.js +2 -2
- package/dist/js/color-picker.js +747 -741
- package/dist/js/color-picker.min.js +2 -2
- package/dist/js/color.js +1186 -0
- package/dist/js/color.min.js +2 -0
- package/package.json +19 -3
- package/src/js/color-palette.js +28 -12
- package/src/js/color-picker-element.js +8 -4
- package/src/js/color-picker.js +84 -172
- package/src/js/color.js +125 -131
- package/src/js/util/getColorControls.js +3 -3
- package/src/js/util/getColorForm.js +0 -1
- package/src/js/util/getColorMenu.js +31 -33
- package/src/js/util/roundPart.js +9 -0
- package/src/js/util/setCSSProperties.js +12 -0
- package/src/js/util/setMarkup.js +122 -0
- package/src/js/util/tabindex.js +3 -0
- package/src/js/util/version.js +6 -0
- package/src/scss/color-picker.scss +35 -16
- package/types/cp.d.ts +48 -20
- package/src/js/util/templates.js +0 -10
@@ -0,0 +1,2 @@
|
|
1
|
+
// Color v0.0.2alpha1 | thednp © 2022 | MIT-License
|
2
|
+
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"],h="[-\\+]?\\d*\\.?\\d+(?:deg|rad|grad|turn)?",i="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",c=`(?:${i})|(?:${h})`,u="(?:[,|\\s]+)",g=`(?:[\\s|\\(\\s|\\s\\(\\s]+)?(${c})${u}(${i})${u}(${i})(?:[,|\\/\\s]*)?(${i})?(?:[\\s|\\)\\s]+)?`,b={CSS_UNIT:new RegExp(c),hwb:new RegExp("hwb"+g),rgb:new RegExp("rgb(?:a)?"+g),hsl:new RegExp("hsl(?:a)?"+g),hsv:new RegExp("hsv(?:a)?"+g),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(b.CSS_UNIT.exec(String(t)))}function x(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 S(t){let r=parseFloat(""+t);return(Number.isNaN(r)||r<0||r>1)&&(r=1),r}function $(t){return Math.min(1,Math.max(0,t))}function d(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 v(t){return 1===t.length?"0"+t:String(t)}function y(t,r,e){const n=t/255,o=r/255,s=e/255,a=Math.max(n,o,s),h=Math.min(n,o,s);let i=0,c=0;const u=(a+h)/2;if(a===h)c=0,i=0;else{const t=a-h;switch(c=u>.5?t/(2-a-h):t/(a+h),a){case n:i=(o-s)/t+(o<s?6:0);break;case o:i=(s-n)/t+2;break;case s:i=(n-o)/t+4}i/=6}return{h:i,s:c,l:u}}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,h=2*e-a;n=R(h,a,t+1/3),o=R(h,a,t),s=R(h,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,h=0;const i=Math.min(n,o,s),c=Math.max(n,o,s),u=1-c;if(c===i)return{h:0,w:i,b:u};n===i?(a=o-s,h=3):(a=o===i?s-n:n-o,h=o===i?5:1);const g=(h-a/(c-i))/6;return{h:1===g?0:g,w:i,b:u}}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),h=Math.min(n,o,s);let i=0;const c=a,u=a-h,g=0===a?0:u/a;if(a===h)i=0;else{switch(a){case n:i=(o-s)/u+(o<s?6:0);break;case o:i=(s-n)/u+2;break;case s:i=(n-o)/u+4}i/=6}return{h:i,s:g,v:c}}function E(t,r,e){const n=6*t,o=r,s=e,a=Math.floor(n),h=n-a,i=s*(1-o),c=s*(1-h*o),u=s*(1-(1-h)*o),g=a%6;let b=[s,c,i,i,u,s][g],l=[u,s,s,c,i,i][g],f=[i,i,u,s,s,c][g];return[b,l,f]=[b,l,f].map(t=>255*t),{r:b,g:l,b:f}}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 k(t,r,e,n,o){const a=[v(s(t).toString(16)),v(s(r).toString(16)),v(s(e).toString(16)),v(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=d(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,h]=b.rgb.exec(r)||[];return n&&s&&a?{r:n,g:s,b:a,a:void 0!==h?h:1,format:"rgb"}:([,n,s,a,h]=b.hsl.exec(r)||[],n&&s&&a?{h:n,s:s,l:a,a:void 0!==h?h:1,format:"hsl"}:([,n,s,a,h]=b.hsv.exec(r)||[],n&&s&&a?{h:n,s:s,v:a,a:void 0!==h?h:1,format:"hsv"}:([,n,s,a,h]=b.hwb.exec(r)||[],n&&s&&a?{h:n,w:s,b:a,a:void 0!==h?h:1,format:"hwb"}:([,n,s,a,h]=b.hex8.exec(r)||[],n&&s&&a&&h?{r:H(n),g:H(s),b:H(a),a:w(h),format:e?"rgb":"hex"}:([,n,s,a]=b.hex6.exec(r)||[],n&&s&&a?{r:H(n),g:H(s),b:H(a),format:e?"rgb":"hex"}:([,n,s,a,h]=b.hex4.exec(r)||[],n&&s&&a&&h?{r:H(n+n),g:H(s+s),b:H(a+a),a:w(h+h),format:e?"rgb":"hex"}:([,n,s,a]=b.hex3.exec(r)||[],!!(n&&s&&a)&&{r:H(n+n),g:H(s+s),b:H(a+a),format:e?"rgb":"hex"})))))))}function _(t){let r={r:0,g:0,b:0},e=t,n=1,o=null,s=null,h=null,i=null,c=null,u=null,g=null,b=null,l=!1;const m="object"==typeof e&&e.format;let $=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:g,g:b,b:c}=e),[g,b,c]=[g,b,c].map(t=>255*x(t,f(t)?100:255)),r={r:g,g:b,b:c},l=!0,$="rgb"):p(e.h)&&p(e.s)&&p(e.v)?(({h:u,s:o,v:s}=e),u="number"==typeof u?u:x(u,360),o="number"==typeof o?o:x(o,100),s="number"==typeof s?s:x(s,100),r=E(u,o,s),l=!0,$="hsv"):p(e.h)&&p(e.s)&&p(e.l)?(({h:u,s:o,l:h}=e),u="number"==typeof u?u:x(u,360),o="number"==typeof o?o:x(o,100),h="number"==typeof h?h:x(h,100),r=M(u,o,h),l=!0,$="hsl"):p(e.h)&&p(e.w)&&p(e.b)&&(({h:u,w:i,b:c}=e),u="number"==typeof u?u:x(u,360),i="number"==typeof i?i:x(i,100),c="number"==typeof c?c:x(c,100),r=T(u,i,c),l=!0,$="hwb"),p(e.a)&&(n=e.a,n=f(""+n)||parseFloat(n)>1?x(n,100):n)),void 0===e&&(l=!0),{ok:l,format:$,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:S(n)}}class j{constructor(t,r){let e=t;const n=r&&a.includes(r)?r:"rgb";if(e instanceof j&&(e=_(e)),"number"==typeof e){e=`#${2===(""+e).length?"0":"00"}${e}`}const{r:o,g:s,b:h,a:i,ok:c,format:u}=_(e);this.originalInput=t,this.r=o,this.g=s,this.b=h,this.a=i,this.ok=c,this.format=n||u}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,h=r/255,i=e/255;return n=a<=.03928?a/12.92:((a+.055)/1.055)**2.4,o=h<=.03928?h/12.92:((h+.055)/1.055)**2.4,s=i<=.03928?i/12.92:((i+.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,h]=[t,r,e].map(s);return 1===n?`rgb(${o}, ${a}, ${h})`:`rgba(${o}, ${a}, ${h}, ${n})`}toRgbCSS4String(){const{r:t,g:r,b:e,a:n}=this.toRgb(),[o,a,h]=[t,r,e].map(s);return`rgb(${o} ${a} ${h}${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}=y(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=S(t),this}saturate(t){if("number"!=typeof t)return this;const{h:r,s:n,l:o}=this.toHsl(),{r:s,g:a,b:h}=M(r,$(n+t/100),o);return e(this,{r:s,g:a,b:h}),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:h}=M(r,n,$(o+t/100));return e(this,{r:s,g:a,b:h}),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:h}=M($((360*r+t)%360/360),n,o);return e(this,{r:s,g:a,b:h}),this}clone(){return new j(this)}toString(t){const{format:r}=this;return"hex"===r?this.toHexString(t):"hsl"===r?this.toHslString():"hwb"===r?this.toHwbString():this.toRgbString()}}e(j,{ANGLES:"deg|rad|grad|turn",CSS_ANGLE:h,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:i,CSS_UNIT2:c,PERMISSIVE_MATCH:g,matchers:b,isOnePointZero:l,isPercentage:f,isValidCSSUnit:p,isColorName:m,pad2:v,clamp01:$,bound01:x,boundAlpha:S,getRGBFromName:d,convertHexToDecimal:w,convertDecimalToHex:A,rgbToHsl:y,rgbToHex:N,rgbToHsv:C,rgbToHwb:F,rgbaToHex:k,hslToRgb:M,hsvToRgb:E,hueToRgb:R,hwbToRgb:T,parseIntFromHex:H,stringInputToObject:I,inputToRGB:_,roundPart:s,getElementStyle:r,setElementStyle:n,ObjectAssign:e});export{j as default};
|