@thednp/color-picker 1.0.1 → 2.0.0-alpha1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (88) hide show
  1. package/.eslintrc.cjs +199 -0
  2. package/.lgtm.yml +9 -0
  3. package/.prettierrc.json +15 -0
  4. package/.stylelintrc.json +236 -0
  5. package/LICENSE +0 -0
  6. package/README.md +54 -72
  7. package/compile.js +48 -0
  8. package/cypress/downloads/downloads.htm +0 -0
  9. package/cypress/e2e/color-palette.cy.ts +128 -0
  10. package/cypress/e2e/color-picker.cy.ts +920 -0
  11. package/cypress/fixtures/colorNamesFrench.js +3 -0
  12. package/cypress/fixtures/componentLabelsFrench.js +21 -0
  13. package/cypress/fixtures/format.js +3 -0
  14. package/cypress/fixtures/getCEMarkup.js +29 -0
  15. package/cypress/fixtures/getMarkup.js +28 -0
  16. package/cypress/fixtures/getRandomInt.js +6 -0
  17. package/cypress/fixtures/sampleWebcolors.js +18 -0
  18. package/cypress/fixtures/testSample.js +8 -0
  19. package/cypress/plugins/esbuild-istanbul.ts +50 -0
  20. package/cypress/plugins/tsCompile.ts +34 -0
  21. package/cypress/support/commands.ts +0 -0
  22. package/cypress/support/e2e.ts +21 -0
  23. package/cypress/test.html +23 -0
  24. package/cypress.config.ts +29 -0
  25. package/dist/css/color-picker.css +14 -38
  26. package/dist/css/color-picker.min.css +2 -2
  27. package/dist/css/color-picker.rtl.css +14 -38
  28. package/dist/css/color-picker.rtl.min.css +2 -2
  29. package/dist/js/color-picker.cjs +8 -0
  30. package/dist/js/color-picker.cjs.map +1 -0
  31. package/dist/js/color-picker.d.ts +278 -0
  32. package/dist/js/color-picker.js +5 -3570
  33. package/dist/js/color-picker.js.map +1 -0
  34. package/dist/js/color-picker.mjs +2631 -0
  35. package/dist/js/color-picker.mjs.map +1 -0
  36. package/dts.config.ts +15 -0
  37. package/package.json +64 -74
  38. package/src/scss/_variables.scss +0 -1
  39. package/src/scss/color-picker.rtl.scss +4 -0
  40. package/src/scss/color-picker.scss +74 -38
  41. package/src/ts/colorPalette.ts +89 -0
  42. package/src/{js/color-picker.js → ts/index.ts} +489 -486
  43. package/src/ts/interface/colorPickerLabels.ts +20 -0
  44. package/src/ts/interface/colorPickerOptions.ts +11 -0
  45. package/src/ts/interface/paletteOptions.ts +6 -0
  46. package/src/ts/util/colorNames.ts +21 -0
  47. package/src/{js/util/colorPickerLabels.js → ts/util/colorPickerLabels.ts} +4 -2
  48. package/src/ts/util/getColorControls.ts +90 -0
  49. package/src/{js/util/getColorForm.js → ts/util/getColorForm.ts} +28 -18
  50. package/src/{js/util/getColorMenu.js → ts/util/getColorMenu.ts} +21 -30
  51. package/src/ts/util/isValidJSON.ts +19 -0
  52. package/src/{js/util/setMarkup.js → ts/util/setMarkup.ts} +57 -48
  53. package/src/{js/util/vHidden.js → ts/util/vHidden.ts} +0 -0
  54. package/tsconfig.json +29 -0
  55. package/vite.config.ts +34 -0
  56. package/dist/js/color-esm.js +0 -1164
  57. package/dist/js/color-esm.min.js +0 -2
  58. package/dist/js/color-palette-esm.js +0 -1235
  59. package/dist/js/color-palette-esm.min.js +0 -2
  60. package/dist/js/color-palette.js +0 -1243
  61. package/dist/js/color-palette.min.js +0 -2
  62. package/dist/js/color-picker-element-esm.js +0 -3718
  63. package/dist/js/color-picker-element-esm.min.js +0 -2
  64. package/dist/js/color-picker-element.js +0 -3726
  65. package/dist/js/color-picker-element.min.js +0 -2
  66. package/dist/js/color-picker-esm.js +0 -3565
  67. package/dist/js/color-picker-esm.min.js +0 -2
  68. package/dist/js/color-picker.min.js +0 -2
  69. package/dist/js/color.js +0 -1172
  70. package/dist/js/color.min.js +0 -2
  71. package/src/js/color-palette.js +0 -75
  72. package/src/js/color-picker-element.js +0 -107
  73. package/src/js/color.js +0 -1104
  74. package/src/js/index.js +0 -8
  75. package/src/js/util/colorNames.js +0 -6
  76. package/src/js/util/getColorControls.js +0 -103
  77. package/src/js/util/isValidJSON.js +0 -13
  78. package/src/js/util/nonColors.js +0 -5
  79. package/src/js/util/roundPart.js +0 -9
  80. package/src/js/util/setCSSProperties.js +0 -12
  81. package/src/js/util/tabindex.js +0 -3
  82. package/src/js/util/toggleCEAttr.js +0 -70
  83. package/src/js/util/version.js +0 -5
  84. package/src/js/version.js +0 -5
  85. package/types/cp.d.ts +0 -558
  86. package/types/index.d.ts +0 -44
  87. package/types/source/source.ts +0 -4
  88. package/types/source/types.d.ts +0 -92
@@ -1,2 +0,0 @@
1
- // ColorPalette v1.0.1 | thednp © 2022 | MIT-License
2
- !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).ColorPalette=r()}(this,(function(){"use strict";const t=(t,r)=>Object.assign(t,r);function r(t){const r=Math.floor(t);return t-r<.5?r:Math.round(t)}const{head:e}=document;function n(t,r){const e=getComputedStyle(t);return r in e?e[r]:""}const o=(r,e)=>{t(r.style,e)},s=["transparent","currentColor","inherit","revert","initial"],h=["rgb","hex","hsl","hsv","hwb"],i="[-\\+]?\\d*\\.?\\d+(?:deg|rad|grad|turn)?",a="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",u=`(?:${a})|(?:${i})`,l="(?:[,|\\s]+)",c=`(?:[\\s|\\(\\s|\\s\\(\\s]+)?(${u})${l}(${a})${l}(${a})(?:[,|\\/\\s]*)?(${a})?(?:[\\s|\\)\\s]+)?`,g={CSS_UNIT:new RegExp(u),hwb:new RegExp("hwb"+c),rgb:new RegExp("rgb(?:a)?"+c),hsl:new RegExp("hsl(?:a)?"+c),hsv:new RegExp("hsv(?:a)?"+c),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(t){return!s.includes(t)&&!["#",...h].some(r=>t.includes(r))&&(!!["black","white"].includes(t)||["rgb(255, 255, 255)","rgb(0, 0, 0)"].every(r=>{o(e,{color:t});const s=n(e,"color");return o(e,{color:""}),s!==r}))}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(t){o(e,{color:t});const r=n(e,"color");return o(e,{color:""}),r}function $(t){return r(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,h=0;const i=(n+o)/2;if(n===o)h=0,s=0;else{const a=n-o;h=i>.5?a/(2-n-o):a/(n+o),n===t&&(s=(r-e)/a+(r<e?6:0)),n===r&&(s=(e-t)/a+2),n===e&&(s=(t-r)/a+4),s/=6}return{h:s,s:h,l:i}}function T(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 y(t,r,e){let n=0,o=0,s=0;if(0===r)o=e,s=e,n=e;else{const h=e<.5?e*(1+r):e+r-e*r,i=2*e-h;n=T(i,h,t+1/3),o=T(i,h,t),s=T(i,h,t-1/3)}return{r:n,g:o,b:s}}function F(t,r,e){let n=0,o=0;const s=Math.min(t,r,e),h=Math.max(t,r,e),i=1-h;if(h===s)return{h:0,w:s,b:i};t===s?(n=r-e,o=3):(n=r===s?e-t:t-r,o=r===s?5:1);const a=(o-n/(h-s))/6;return{h:1===a?0:a,w:s,b:i}}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}=y(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 h=n-o;return n===o?s=0:(t===n&&(s=(r-e)/h+(r<e?6:0)),r===n&&(s=(e-t)/h+2),e===n&&(s=(t-r)/h+4),s/=6),{h:s,s:0===n?0:h/n,v:n}}function E(t,r,e){const n=6*t,o=r,s=e,h=Math.floor(n),i=n-h,a=s*(1-o),u=s*(1-i*o),l=s*(1-(1-i)*o),c=h%6;return{r:[s,u,a,a,l,s][c],g:[l,s,s,u,a,a][c],b:[a,a,l,s,s,u][c]}}function N(t,e,n,o){const s=[v(r(t).toString(16)),v(r(e).toString(16)),v(r(n).toString(16))];return o&&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[0].charAt(0)+s[1].charAt(0)+s[2].charAt(0):s.join("")}function I(t,e,n,o,s){const h=[v(r(t).toString(16)),v(r(e).toString(16)),v(r(n).toString(16)),v($(o))];return s&&h[0].charAt(0)===h[0].charAt(1)&&h[1].charAt(0)===h[1].charAt(1)&&h[2].charAt(0)===h[2].charAt(1)&&h[3].charAt(0)===h[3].charAt(1)?h[0].charAt(0)+h[1].charAt(0)+h[2].charAt(0)+h[3].charAt(0):h.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(s.includes(r)){return{r:0,g:0,b:0,a:"transparent"===r?0:1,format:"rgb",ok:!0}}let[,e,n,o,h]=g.rgb.exec(r)||[];return e&&n&&o?{r:e,g:n,b:o,a:void 0!==h?h:1,format:"rgb"}:([,e,n,o,h]=g.hsl.exec(r)||[],e&&n&&o?{h:e,s:n,l:o,a:void 0!==h?h:1,format:"hsl"}:([,e,n,o,h]=g.hsv.exec(r)||[],e&&n&&o?{h:e,s:n,v:o,a:void 0!==h?h:1,format:"hsv"}:([,e,n,o,h]=g.hwb.exec(r)||[],e&&n&&o?{h:e,w:n,b:o,a:void 0!==h?h:1,format:"hwb"}:([,e,n,o,h]=g.hex8.exec(r)||[],e&&n&&o&&h?{r:H(e),g:H(n),b:H(o),a:w(h),format:"hex"}:([,e,n,o]=g.hex6.exec(r)||[],e&&n&&o?{r:H(e),g:H(n),b:H(o),format:"hex"}:([,e,n,o,h]=g.hex4.exec(r)||[],e&&n&&o&&h?{r:H(e+e),g:H(n+n),b:H(o+o),a:w(h+h),format:"hex"}:([,e,n,o]=g.hex3.exec(r)||[],!!(e&&n&&o)&&{r:H(e+e),g:H(n+n),b:H(o+o),format:"hex"})))))))}function k(t){let r={r:0,g:0,b:0},e=t,n=1,o=null,s=null,i=null,a=null,u=null,l=null,c=null,g=null,b=!1;const m="object"==typeof e&&e.format;let p=m&&h.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:c,g:g,b:u}=e),[c,g,u]=[c,g,u].map(t=>x(t,f(t)?100:255)),r={r:c,g:g,b:u},b=!0,p=e.format||"rgb"),d(e.h)&&d(e.s)&&d(e.v)&&(({h:l,s:o,v:s}=e),l=x(l,360),o=x(o,100),s=x(s,100),r=E(l,o,s),b=!0,p="hsv"),d(e.h)&&d(e.s)&&d(e.l)&&(({h:l,s:o,l:i}=e),l=x(l,360),o=x(o,100),i=x(i,100),r=y(l,o,i),b=!0,p="hsl"),d(e.h)&&d(e.w)&&d(e.b)&&(({h:l,w:a,b:u}=e),l=x(l,360),a=x(a,100),u=x(u,100),r=M(l,a,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&&h.includes(r)?r:"";e instanceof _&&(e=k(e));const{r:o,g:s,b:i,a:a,ok:u,format:l}=k(e);this.originalInput=t,this.r=o,this.g=s,this.b=i,this.a=a,this.ok=u,this.format=n||l}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:e,b:n,a:o}=this;return[t,e,n]=[t,e,n].map(t=>r(255*t*100)/100),o=r(100*o)/100,{r:t,g:e,b:n,a:o}}toRgbString(){const{r:t,g:e,b:n,a:o}=this.toRgb(),[s,h,i]=[t,e,n].map(r);return 1===o?`rgb(${s}, ${h}, ${i})`:`rgba(${s}, ${h}, ${i}, ${o})`}toRgbCSS4String(){const{r:t,g:e,b:n,a:o}=this.toRgb(),[s,h,i]=[t,e,n].map(r);return`rgb(${s} ${h} ${i}${1===o?"":` / ${r(100*o)}%`})`}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:h}=C(t,r,e);return{h:o,s:s,v:h,a:n}}toHsl(){const{r:t,g:r,b:e,a:n}=this,{h:o,s:s,l:h}=R(t,r,e);return{h:o,s:s,l:h,a:n}}toHslString(){let{h:t,s:e,l:n,a:o}=this.toHsl();return t=r(360*t),e=r(100*e),n=r(100*n),o=r(100*o)/100,1===o?`hsl(${t}, ${e}%, ${n}%)`:`hsla(${t}, ${e}%, ${n}%, ${o})`}toHslCSS4String(){let{h:t,s:e,l:n,a:o}=this.toHsl();t=r(360*t),e=r(100*e),n=r(100*n),o=r(100*o);return`hsl(${t}deg ${e}% ${n}%${o<100?` / ${r(o)}%`:""})`}toHwb(){const{r:t,g:r,b:e,a:n}=this,{h:o,w:s,b:h}=F(t,r,e);return{h:o,w:s,b:h,a:n}}toHwbString(){let{h:t,w:e,b:n,a:o}=this.toHwb();t=r(360*t),e=r(100*e),n=r(100*n),o=r(100*o);return`hwb(${t}deg ${e}% ${n}%${o<100?` / ${r(o)}%`:""})`}setAlpha(t){return"number"!=typeof t||(this.a=S(t)),this}saturate(r){if("number"!=typeof r)return this;const{h:e,s:n,l:o}=this.toHsl(),{r:s,g:h,b:i}=y(e,p(n+r/100),o);return t(this,{r:s,g:h,b:i}),this}desaturate(t){return"number"==typeof t?this.saturate(-t):this}greyscale(){return this.saturate(-100)}lighten(r){if("number"!=typeof r)return this;const{h:e,s:n,l:o}=this.toHsl(),{r:s,g:h,b:i}=y(e,n,p(o+r/100));return t(this,{r:s,g:h,b:i}),this}darken(t){return"number"==typeof t?this.lighten(-t):this}spin(r){if("number"!=typeof r)return this;const{h:e,s:n,l:o}=this.toHsl(),{r:s,g:h,b:i}=y(p((360*e+r)%360/360),n,o);return t(this,{r:s,g:h,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()}}t(_,{ANGLES:"deg|rad|grad|turn",CSS_ANGLE:i,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:a,CSS_UNIT2:u,PERMISSIVE_MATCH:c,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:F,rgbaToHex:I,hslToRgb:y,hsvToRgb:E,hueToRgb:T,hwbToRgb:M,parseIntFromHex:H,stringInputToObject:j,inputToRGB:k,roundPart:r,getElementStyle:n,setElementStyle:o,ObjectAssign:t});class P{constructor(...t){let e=0,n=12,o=10,s=[.5];if(3===t.length)[e,n,o]=t;else if(2===t.length&&([n,o]=t,[n,o].some(t=>t<1)))throw TypeError("ColorPalette: both arguments must be higher than 0.");const h=[],i=360/n,a=r((o-(o%2?1:0))/2),u=[[1,2,3],[4,5],[6,7],[8,9],[10,11],[12,13]],l=u.find(t=>t.includes(o)),c=l?[.25,.2,.15,.11,.09,.075][u.indexOf(l)]:100/(o+(o%2?0:1))/100;for(let t=1;t<a+1;t+=1)s=[...s,.5+c*t];for(let t=1;t<o-a;t+=1)s=[.5-c*t,...s];for(let t=0;t<n;t+=1){const r=(e+t*i)%360/360;s.forEach(t=>{h.push(new _({h:r,s:1,l:t}))})}this.hue=e,this.hueSteps=n,this.lightSteps=o,this.colors=h}}return t(P,{Color:_}),P}));