Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vue-accessible-color-picker

Package Overview
Dependencies
Maintainers
1
Versions
30
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-accessible-color-picker - npm Package Compare versions

Comparing version 1.1.2 to 2.0.0

29

CHANGELOG.md

@@ -0,1 +1,20 @@

# [2.0.0](https://github.com/kleinfreund/vue-accessible-color-picker/compare/v1.1.2...v2.0.0) (2021-01-17)
### Features
* migrate to Vue.js version 3 ([26b8eb2](https://github.com/kleinfreund/vue-accessible-color-picker/commit/26b8eb2f30b8c57d65b26b71b62395a7e6295786))
### BREAKING CHANGES
* Migrates this package to use and be compatible with Vue.js 3. Upcoming versions of this package therefor no longer support Vue.js 2. Use the new application instance APIs to register components via `app.component`. The README.md file was updated to take these changes into account. Detailed instructions on the the general migration process to Vue.js 3 can be found in the [Vue 3 migration guide](https://v3.vuejs.org/guide/migration/introduction.html).
* Deprecates global component registration via side effect.
* Renames type `SupportedColorFormat` to `ColorFormat`.
* Removes type `ColorChannel` because it’s not a useful type.
Adds the vue package (`vue@^3.x`) as a peer dependency.
Removes some tests from index.test.js because they were testing the behavior of Vue.js itself rather than that of the index.js file.
## [1.1.2](https://github.com/kleinfreund/vue-accessible-color-picker/compare/v1.1.1...v1.1.2) (2020-12-20)

@@ -8,5 +27,11 @@

Fixes the dist files missing from the published npm package. It seems that the `files` field in the package.json must not contain paths that start with `./`.
## [1.1.1](https://github.com/kleinfreund/vue-accessible-color-picker/compare/v1.1.0...v1.1.1) (2020-12-20)
**Note**: This version cannot be used. Use version [1.1.2](https://github.com/kleinfreund/vue-accessible-color-picker/releases/tag/v1.1.2) instead.
Due to an issue with the package.json file’s `files` field, version [1.1.1](https://github.com/kleinfreund/vue-accessible-color-picker/releases/tag/v1.1.1) **does not** include the dist files in the published npm package. The issue was fixed in [9b15741](https://github.com/kleinfreund/vue-accessible-color-picker/commit/9b157413af303e749f8f9d70faef051f6af11f7b) and a new version of the package was released.
### Bug Fixes

@@ -20,3 +45,7 @@

**Note**: This version cannot be used. Use version [1.1.2](https://github.com/kleinfreund/vue-accessible-color-picker/releases/tag/v1.1.2) instead.
Due to an issue with the package.json file’s `files` field, version [1.1.0](https://github.com/kleinfreund/vue-accessible-color-picker/releases/tag/v1.1.0) **does not** include the dist files in the published npm package. The issue was fixed in [9b15741](https://github.com/kleinfreund/vue-accessible-color-picker/commit/9b157413af303e749f8f9d70faef051f6af11f7b) and a new version of the package was released.
### Features

@@ -23,0 +52,0 @@

2

dist/vue-accessible-color-picker-unstyled.js

@@ -1,1 +0,1 @@

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).AccessibleColorPicker={})}(this,(function(t){"use strict";function e(t,e,o){return Math.max(e,Math.min(t,o))}function o(t,e=2){return t.toFixed(e).replace(/0+$/,"").replace(/\.$/,"")}const r={fromHueAngle(t){if(t.endsWith("."))return NaN;return(parseFloat(t)%360+360)%360/360},toHueAngle:t=>o(360*t),fromPercentage(t){if(!t.endsWith("%"))return NaN;const o=t.substring(0,t.length-1);if(o.endsWith("."))return NaN;const r=parseFloat(o);return Number.isNaN(r)?NaN:e(r,0,100)/100},toPercentage:t=>o(100*t)+"%",from8BitDecimal(t){if(t.endsWith("%"))return r.fromPercentage(t);if(t.endsWith("."))return NaN;const o=parseFloat(t);return Number.isNaN(o)?NaN:e(o,0,255)/255},to8BitDecimal:t=>o(255*t),fromAlpha:t=>t.endsWith("%")?r.fromPercentage(t):e(parseFloat(t),0,1),toAlpha:t=>String(t)},a={hsl:{h:{to:r.toHueAngle,from:r.fromHueAngle},s:{to:r.toPercentage,from:r.fromPercentage},l:{to:r.toPercentage,from:r.fromPercentage},a:{to:r.toAlpha,from:r.fromAlpha}},hwb:{h:{to:r.toHueAngle,from:r.fromHueAngle},w:{to:r.toPercentage,from:r.fromPercentage},b:{to:r.toPercentage,from:r.fromPercentage},a:{to:r.toAlpha,from:r.fromAlpha}},rgb:{r:{to:r.to8BitDecimal,from:r.from8BitDecimal},g:{to:r.to8BitDecimal,from:r.from8BitDecimal},b:{to:r.to8BitDecimal,from:r.from8BitDecimal},a:{to:r.toAlpha,from:r.fromAlpha}}};function n(t){const e=t.replace(/^#/,""),o=[],r=e.length>4?2:1;for(let t=0;t<e.length;t+=r){const a=e.slice(t,t+r);o.push(a.repeat(r%2+1))}3===o.length&&o.push("ff");const a=o.map(t=>parseInt(t,16)/255);return{r:a[0],g:a[1],b:a[2],a:a[3]}}function s(t){const e=t.l<.5?t.l*(1+t.s):t.l+t.s-t.l*t.s,o=2*t.l-e;return{r:l(o,e,t.h+1/3),g:l(o,e,t.h),b:l(o,e,t.h-1/3),a:t.a}}function l(t,e,o){return o<0?o+=1:o>1&&(o-=1),o<1/6?t+6*(e-t)*o:o<.5?e:o<2/3?t+(e-t)*(2/3-o)*6:t}function i(t){return{r:c(5,t),g:c(3,t),b:c(1,t),a:t.a}}function c(t,e){const o=(t+6*e.h)%6;return e.v-e.v*e.s*Math.max(0,Math.min(o,4-o,1))}function u(t){return{h:t.h,s:1===t.b?0:1-t.w/(1-t.b),v:1-t.b,a:t.a}}function p(t){const e=Math.min(t.r,t.g,t.b),o=Math.max(t.r,t.g,t.b);let r;r=o===e?0:o===t.r?(0+(t.g-t.b)/(o-e))/6:o===t.g?(2+(t.b-t.r)/(o-e))/6:(4+(t.r-t.g)/(o-e))/6,r<0&&(r+=1);const a=(o+e)/2;let n;return n=0===o||1===e?0:(o-a)/Math.min(a,1-a),{h:r,s:n,l:a,a:t.a}}function h(t){const e=Math.min(t.r,t.g,t.b),o=Math.max(t.r,t.g,t.b);let r,a;r=o===e?0:o===t.r?(0+(t.g-t.b)/(o-e))/6:o===t.g?(2+(t.b-t.r)/(o-e))/6:(4+(t.r-t.g)/(o-e))/6,r<0&&(r+=1),a=0===o?0:(o-e)/o;return{h:r,s:a,v:o,a:t.a}}function v(t){return"#"+Object.values(t).map(t=>{const e=255*t,o=Math.round(e).toString(16);return 1===o.length?"0"+o:o}).join("")}function d(t){const e=Math.min(t.r,t.g,t.b),o=Math.max(t.r,t.g,t.b);let r;return r=o===e?0:o===t.r?(0+(t.g-t.b)/(o-e))/6:o===t.g?(2+(t.b-t.r)/(o-e))/6:(4+(t.r-t.g)/(o-e))/6,r<0&&(r+=1),{h:r,w:e,b:1-o,a:t.a}}const b={hex:{hsl:function(t){return p(n(t))},hsv:function(t){return h(n(t))},hwb:function(t){return d(n(t))},rgb:n},hsl:{hex:function(t){return v(s(t))},hsv:function(t){const e=t.l+t.s*Math.min(t.l,1-t.l),o=0===e?0:2-2*t.l/e;return{h:t.h,s:o,v:e,a:t.a}},hwb:function(t){return d(s(t))},rgb:s},hsv:{hex:function(t){return v(i(t))},hsl:function(t){const e=t.v-t.v*t.s/2,o=Math.min(e,1-e),r=0===o?0:(t.v-e)/o;return{h:t.h,s:r,l:e,a:t.a}},hwb:function(t){return{h:t.h,w:(1-t.s)*t.v,b:1-t.v,a:t.a}},rgb:i},hwb:{hex:function(t){return v(f(t))},hsl:function(t){return p(f(t))},hsv:u,rgb:f},rgb:{hex:v,hsl:p,hsv:h,hwb:d}};function f(t){return i(u(t))}function m(t,e,o){return b[e][o](t)}const g={hex:t=>t,hsl:t=>`hsl(${o(360*t.h)} ${o(100*t.s)}% ${o(100*t.l)}% / ${o(t.a)})`,hwb:t=>`hwb(${o(360*t.h)} ${o(100*t.w)}% ${o(100*t.b)}% / ${o(t.a)})`,rgb:t=>`rgb(${o(255*t.r)} ${o(255*t.g)} ${o(255*t.b)} / ${o(t.a)})`};function C(t,e){return g[e](t)}function y(t){return!!t.startsWith("#")&&(!![3,4,6,8].includes(t.length-1)&&/^#[0-9A-Fa-f]+$/.test(t))}const w=["hex","hsl","hwb","rgb"];function _(t,e,o,r,a,n,s,l,i,c){"boolean"!=typeof s&&(i=l,l=s,s=!1);const u="function"==typeof o?o.options:o;let p;if(t&&t.render&&(u.render=t.render,u.staticRenderFns=t.staticRenderFns,u._compiled=!0,a&&(u.functional=!0)),r&&(u._scopeId=r),n?(p=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,i(t)),t&&t._registeredComponents&&t._registeredComponents.add(n)},u._ssrRegister=p):e&&(p=s?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,l(t))}),p)if(u.functional){const t=u.render;u.render=function(e,o){return p.call(o),t(e,o)}}else{const t=u.beforeCreate;u.beforeCreate=t?[].concat(t,p):[p]}return o}const x=_({render:function(){var t=this,e=t.$createElement,o=t._self._c||e;return o("div",{staticClass:"vacp-color-picker"},[o("div",{ref:"colorSpace",staticClass:"vacp-color-space",on:{mousedown:t.startMovingThumb,touchstart:t.startMovingThumb}},[o("div",{ref:"thumb",staticClass:"vacp-color-space-thumb",attrs:{tabindex:"0","aria-label":"Color space thumb"},on:{keydown:t.moveThumbWithArrows}})]),t._v(" "),o("label",{staticClass:"vacp-range-input-label vacp-range-input-label--hue",attrs:{for:t.id+"-hue-slider"}},[o("span",{staticClass:"vacp-range-input-label-text vacp-range-input-label-text--hue"},[t._t("hue-range-input-label",[t._v("Hue")])],2),t._v(" "),o("input",{staticClass:"vacp-range-input vacp-range-input--hue",attrs:{id:t.id+"-hue-slider",type:"range",min:"0",max:"360",step:"1"},domProps:{value:360*t.colors.hsv.h},on:{"&keydown":function(e){return t.changeInputValue(e)},input:t.updateHue}})]),t._v(" "),o("label",{staticClass:"vacp-range-input-label vacp-range-input-label--alpha",attrs:{for:t.id+"-alpha-slider"}},[o("span",{staticClass:"vacp-range-input-label-text vacp-range-input-label-text--alpha"},[t._t("alpha-range-input-label",[t._v("Alpha")])],2),t._v(" "),o("input",{staticClass:"vacp-range-input vacp-range-input--alpha",attrs:{id:t.id+"-alpha-slider",type:"range",min:"0",max:"100",step:"1"},domProps:{value:100*t.colors.hsv.a},on:{"&keydown":function(e){return t.changeInputValue(e)},input:t.updateAlpha}})]),t._v(" "),o("button",{staticClass:"vacp-copy-button",attrs:{type:"button"},on:{click:t.copyColor}},[t._t("copy-button",[t._v("\n Copy color\n ")])],2),t._v(" "),o("div",{staticClass:"vacp-color-inputs"},["hsl"===t.activeFormat?o("div",{staticClass:"vacp-color-input-group"},[o("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-hsl-h"}},[o("span",{staticClass:"vacp-color-input-label-text"},[t._v("H")]),t._v(" "),o("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-hsl-h",type:"text"},domProps:{value:t.getChannelAsCssValue("hsl","h")},on:{input:function(e){return t.updateColorValue(e,"hsl","h")}}})]),t._v(" "),o("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-hsl-s"}},[o("span",{staticClass:"vacp-color-input-label-text"},[t._v("S")]),t._v(" "),o("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-hsl-s",type:"text"},domProps:{value:t.getChannelAsCssValue("hsl","s")},on:{input:function(e){return t.updateColorValue(e,"hsl","s")}}})]),t._v(" "),o("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-hsl-l"}},[o("span",{staticClass:"vacp-color-input-label-text"},[t._v("L")]),t._v(" "),o("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-hsl-l",type:"text"},domProps:{value:t.getChannelAsCssValue("hsl","l")},on:{input:function(e){return t.updateColorValue(e,"hsl","l")}}})]),t._v(" "),o("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-hsl-a"}},[o("span",{staticClass:"vacp-color-input-label-text"},[t._v("A")]),t._v(" "),o("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-hsl-a",type:"text"},domProps:{value:t.getChannelAsCssValue("hsl","a")},on:{input:function(e){return t.updateColorValue(e,"hsl","a")}}})])]):"hwb"===t.activeFormat?o("div",{staticClass:"vacp-color-input-group"},[o("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-hwb-h"}},[o("span",{staticClass:"vacp-color-input-label-text"},[t._v("H")]),t._v(" "),o("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-hwb-h",type:"text"},domProps:{value:t.getChannelAsCssValue("hwb","h")},on:{input:function(e){return t.updateColorValue(e,"hwb","h")}}})]),t._v(" "),o("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-hwb-w"}},[o("span",{staticClass:"vacp-color-input-label-text"},[t._v("W")]),t._v(" "),o("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-hwb-w",type:"text"},domProps:{value:t.getChannelAsCssValue("hwb","w")},on:{input:function(e){return t.updateColorValue(e,"hwb","w")}}})]),t._v(" "),o("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-hwb-b"}},[o("span",{staticClass:"vacp-color-input-label-text"},[t._v("B")]),t._v(" "),o("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-hwb-b",type:"text"},domProps:{value:t.getChannelAsCssValue("hwb","b")},on:{input:function(e){return t.updateColorValue(e,"hwb","b")}}})]),t._v(" "),o("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-hwb-a"}},[o("span",{staticClass:"vacp-color-input-label-text"},[t._v("A")]),t._v(" "),o("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-hwb-a",type:"text"},domProps:{value:t.getChannelAsCssValue("hwb","a")},on:{input:function(e){return t.updateColorValue(e,"hwb","a")}}})])]):"rgb"===t.activeFormat?o("div",{staticClass:"vacp-color-input-group"},[o("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-rgb-r"}},[o("span",{staticClass:"vacp-color-input-label-text"},[t._v("R")]),t._v(" "),o("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-rgb-r",type:"text"},domProps:{value:t.getChannelAsCssValue("rgb","r")},on:{input:function(e){return t.updateColorValue(e,"rgb","r")}}})]),t._v(" "),o("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-rgb-g"}},[o("span",{staticClass:"vacp-color-input-label-text"},[t._v("G")]),t._v(" "),o("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-rgb-g",type:"text"},domProps:{value:t.getChannelAsCssValue("rgb","g")},on:{input:function(e){return t.updateColorValue(e,"rgb","g")}}})]),t._v(" "),o("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-rgb-b"}},[o("span",{staticClass:"vacp-color-input-label-text"},[t._v("B")]),t._v(" "),o("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-rgb-b",type:"text"},domProps:{value:t.getChannelAsCssValue("rgb","b")},on:{input:function(e){return t.updateColorValue(e,"rgb","b")}}})]),t._v(" "),o("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-rgb-a"}},[o("span",{staticClass:"vacp-color-input-label-text"},[t._v("A")]),t._v(" "),o("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-rgb-a",type:"text"},domProps:{value:t.getChannelAsCssValue("rgb","a")},on:{input:function(e){return t.updateColorValue(e,"rgb","a")}}})])]):"hex"===t.activeFormat?o("div",{staticClass:"vacp-color-input-group"},[o("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-hex"}},[o("span",{staticClass:"vacp-color-input-label-text"},[t._v("Hex")]),t._v(" "),o("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-hex",type:"text"},domProps:{value:t.colors.hex},on:{input:function(e){return t.updateColorValue(e,"hex")}}})])]):t._e(),t._v(" "),t.visibleFormats.length>1?o("button",{staticClass:"vacp-format-switch-button",attrs:{type:"button"},on:{click:t.switchFormat}},[t._t("format-switch-button",[t._v("\n Switch format\n ")])],2):t._e()])])},staticRenderFns:[]},undefined,{name:"ColorPicker",props:{color:{type:[String,Object],required:!1,default:null},id:{type:String,required:!1,default:"color-picker"},visibleFormats:{type:Array,required:!1,default:()=>w,validator:t=>t.length>0&&t.every(t=>w.includes(t))}},data:()=>({pointerOriginatedInColorSpace:!1,activeFormat:"rgb",colors:{hex:"#ffffffff",hsl:{h:0,s:0,l:1,a:1},hsv:{h:0,s:0,v:1,a:1},hwb:{h:0,w:1,b:0,a:1},rgb:{r:1,g:1,b:1,a:1}}}),watch:{color(t){this.setColorValueFromProp(t)}},created(){this.supportedFormats=["hex","hsl","hsv","hwb","rgb"]},mounted(){this.initThumbPointerNavigation(),this.setColorValueFromProp(this.color)},beforeDestroy(){document.removeEventListener("mousemove",this.moveThumbWithMouse),document.removeEventListener("touchmove",this.moveThumbWithTouch),document.removeEventListener("mouseup",this.stopMovingThumb),document.removeEventListener("touchend",this.stopMovingThumb)},methods:{initThumbPointerNavigation(){document.addEventListener("mousemove",this.moveThumbWithMouse,{passive:!1}),document.addEventListener("touchmove",this.moveThumbWithTouch,{passive:!1}),document.addEventListener("mouseup",this.stopMovingThumb),document.addEventListener("touchend",this.stopMovingThumb)},startMovingThumb(){this.pointerOriginatedInColorSpace=!0},stopMovingThumb(){this.pointerOriginatedInColorSpace=!1},moveThumbWithMouse(t){1===t.buttons&&!1!==this.pointerOriginatedInColorSpace&&this.moveThumb(t.clientX,t.clientY)},moveThumbWithTouch(t){!1!==this.pointerOriginatedInColorSpace&&(t.preventDefault(),this.moveThumb(t.touches[0].clientX,t.touches[0].clientY))},moveThumb(t,o){const r=this.$refs.colorSpace.getBoundingClientRect(),a=t-r.left,n=o-r.top,s={...this.getColorValue("hsv")};s.s=e(a/r.width,0,1),s.v=e(1-n/r.height,0,1),this.setColorValue(s,"hsv")},moveThumbWithArrows(t){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(t.key))return;t.preventDefault();const o=["ArrowLeft","ArrowDown"].includes(t.key)?-1:1,r=["ArrowLeft","ArrowRight"].includes(t.key)?"s":"v",a=t.shiftKey?10:1,n=this.getColorValue("hsv",r)+o*a*.01;this.setColorValue(e(n,0,1),"hsv",r)},changeInputValue(t){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(t.key)||!t.shiftKey)return;const o=t.currentTarget,r=parseFloat(o.step),a=["ArrowLeft","ArrowDown"].includes(t.key)?-1:1,n=e(parseFloat(o.value)+a*r*10,parseInt(o.min),parseInt(o.max));o.value=String(n-a*r)},getColorValue(t,e){return void 0===e?this.colors[t]:this.colors[t][e]},setColorValue(t,e,o){if(void 0!==o||function(t,e){if("string"==typeof t||"string"==typeof e)return t===e;for(const o in t)if(t[o]!==e[o])return!1;return!0}(t,this.colors[e])){if(void 0===o||this.colors[e][o]===t)return;this.colors[e][o]=t}else this.colors[e]=t;this.reCalculateColors(e),this.setCssProps(this.$el,this.colors);const r=this.getEventData(this.colors,this.activeFormat);this.$emit("color-change",r)},setColorValueFromProp(t){if(null===t)return;let e,o;if("string"==typeof t)if(y(t))e=t,o="hex";else{const a=function(t){const e=document.createElement("span");if(e.style.display="none",e.style.color=t,""===e.style.color)return"";document.body.appendChild(e);const o=getComputedStyle(e).color;return e.remove(),o}(t);if(""===a)return;e=function(t){const e=t.substring(t.indexOf("(")+1,t.indexOf(")")).replace(/[,/]/g," ").replace(/\s+/g," ").split(" ");return{r:r.from8BitDecimal(e[0]),g:r.from8BitDecimal(e[1]),b:r.from8BitDecimal(e[2]),a:4===e.length?r.fromAlpha(e[3]):1}}(a),o="rgb"}else e=t,a=t,o=Object.prototype.hasOwnProperty.call(a,"r")?"rgb":Object.prototype.hasOwnProperty.call(a,"w")?"hwb":Object.prototype.hasOwnProperty.call(a,"v")?"hsv":"hsl";var a;this.setColorValue(e,o)},reCalculateColors(t){const e=this.getColorValue(t),o=this.supportedFormats.filter(e=>e!==t),r={...this.colors};for(const a of o){const o=m(e,t,a);r[a]=o}this.colors=r},copyColor(){!function(t){if("function"!=typeof document.queryCommandSupported||!document.queryCommandSupported("copy"))return!1;const e=document.createElement("textarea");let o;e.textContent=t,e.style.position="fixed",document.body.appendChild(e),e.select();try{o=document.execCommand("copy")}catch{o=!1}finally{document.body.removeChild(e)}}(C(this.colors[this.activeFormat],this.activeFormat))},updateHue(t){this.setColorValue(parseInt(t.currentTarget.value)/360,"hsv","h")},updateAlpha(t){this.setColorValue(parseInt(t.currentTarget.value)/100,"hsv","a")},updateColorValue(t,e,o){let r;if("hex"===e){if(!y(t.target.value))return;r=t.target.value}else{r={...this.colors[e]};const n=a[e][o].from(t.target.value);if(Number.isNaN(n)||void 0===n)return;r[o]=n}this.setColorValue(r,e)},switchFormat(){const t=this.visibleFormats.findIndex(t=>t===this.activeFormat),e=t===this.visibleFormats.length-1?0:t+1;this.activeFormat=this.visibleFormats[e]},getChannelAsCssValue(t,e){const o=this.colors[t][e];return a[t][e].to(o)},getEventData:(t,e)=>({colors:{...t},cssColor:C(t[e],e)}),setCssProps(t,e){t.style.setProperty("--vacp-hsl-h",String(e.hsl.h)),t.style.setProperty("--vacp-hsl-s",String(e.hsl.s)),t.style.setProperty("--vacp-hsl-l",String(e.hsl.l)),t.style.setProperty("--vacp-hsl-a",String(e.hsl.a)),this.$refs.colorSpace.style="\n position: relative;\n background-color: hsl(calc(var(--vacp-hsl-h) * 360) 100% 50%); /* 1. */\n background-image:\n linear-gradient(to top, #000, transparent), /* 2. */\n linear-gradient(to right, #fff, transparent) /* 2. */\n ;\n ",this.$refs.thumb.style=`\n box-sizing: border-box;\n position: absolute;\n left: ${100*e.hsv.s}%; /* 3. */\n bottom: ${100*e.hsv.v}%; /* 3. */\n `}}},undefined,false,undefined,!1,void 0,void 0,void 0);function A(t){A.installed||(A.installed=!0,t.component("ColorPicker",x))}const V={install:A};"undefined"!=typeof window&&window.Vue&&"function"==typeof window.Vue.use?window.Vue.use(V):"undefined"!=typeof global&&global.Vue&&"function"==typeof global.Vue.use&&global.Vue.use(V),t.ColorPicker=x,t.default=V,t.install=A,Object.defineProperty(t,"__esModule",{value:!0})}));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).AccessibleColorPicker={},e.vue)}(this,(function(e,t){"use strict";function o(e,t,o){return Math.max(t,Math.min(e,o))}function r(e,t=2){return e.toFixed(t).replace(/0+$/,"").replace(/\.$/,"")}const a={fromHueAngle(e){if(e.endsWith("."))return NaN;return(parseFloat(e)%360+360)%360/360},toHueAngle:e=>r(360*e),fromPercentage(e){if(!e.endsWith("%"))return NaN;const t=e.substring(0,e.length-1);if(t.endsWith("."))return NaN;const r=parseFloat(t);return Number.isNaN(r)?NaN:o(r,0,100)/100},toPercentage:e=>r(100*e)+"%",from8BitDecimal(e){if(e.endsWith("%"))return a.fromPercentage(e);if(e.endsWith("."))return NaN;const t=parseFloat(e);return Number.isNaN(t)?NaN:o(t,0,255)/255},to8BitDecimal:e=>r(255*e),fromAlpha:e=>e.endsWith("%")?a.fromPercentage(e):o(parseFloat(e),0,1),toAlpha:e=>String(e)},l={hsl:{h:{to:a.toHueAngle,from:a.fromHueAngle},s:{to:a.toPercentage,from:a.fromPercentage},l:{to:a.toPercentage,from:a.fromPercentage},a:{to:a.toAlpha,from:a.fromAlpha}},hwb:{h:{to:a.toHueAngle,from:a.fromHueAngle},w:{to:a.toPercentage,from:a.fromPercentage},b:{to:a.toPercentage,from:a.fromPercentage},a:{to:a.toAlpha,from:a.fromAlpha}},rgb:{r:{to:a.to8BitDecimal,from:a.from8BitDecimal},g:{to:a.to8BitDecimal,from:a.from8BitDecimal},b:{to:a.to8BitDecimal,from:a.from8BitDecimal},a:{to:a.toAlpha,from:a.fromAlpha}}};function n(e){const t=e.replace(/^#/,""),o=[],r=t.length>4?2:1;for(let e=0;e<t.length;e+=r){const a=t.slice(e,e+r);o.push(a.repeat(r%2+1))}3===o.length&&o.push("ff");const a=o.map((e=>parseInt(e,16)/255));return{r:a[0],g:a[1],b:a[2],a:a[3]}}function s(e){const t=e.l<.5?e.l*(1+e.s):e.l+e.s-e.l*e.s,o=2*e.l-t;return{r:c(o,t,e.h+1/3),g:c(o,t,e.h),b:c(o,t,e.h-1/3),a:e.a}}function c(e,t,o){return o<0?o+=1:o>1&&(o-=1),o<1/6?e+6*(t-e)*o:o<.5?t:o<2/3?e+(t-e)*(2/3-o)*6:e}function i(e){return{r:u(5,e),g:u(3,e),b:u(1,e),a:e.a}}function u(e,t){const o=(e+6*t.h)%6;return t.v-t.v*t.s*Math.max(0,Math.min(o,4-o,1))}function p(e){return{h:e.h,s:1===e.b?0:1-e.w/(1-e.b),v:1-e.b,a:e.a}}function h(e){const t=Math.min(e.r,e.g,e.b),o=Math.max(e.r,e.g,e.b);let r;r=o===t?0:o===e.r?(0+(e.g-e.b)/(o-t))/6:o===e.g?(2+(e.b-e.r)/(o-t))/6:(4+(e.r-e.g)/(o-t))/6,r<0&&(r+=1);const a=(o+t)/2;let l;return l=0===o||1===t?0:(o-a)/Math.min(a,1-a),{h:r,s:l,l:a,a:e.a}}function d(e){const t=Math.min(e.r,e.g,e.b),o=Math.max(e.r,e.g,e.b);let r,a;r=o===t?0:o===e.r?(0+(e.g-e.b)/(o-t))/6:o===e.g?(2+(e.b-e.r)/(o-t))/6:(4+(e.r-e.g)/(o-t))/6,r<0&&(r+=1),a=0===o?0:(o-t)/o;return{h:r,s:a,v:o,a:e.a}}function v(e){return"#"+Object.values(e).map((e=>{const t=255*e,o=Math.round(t).toString(16);return 1===o.length?"0"+o:o})).join("")}function b(e){const t=Math.min(e.r,e.g,e.b),o=Math.max(e.r,e.g,e.b);let r;return r=o===t?0:o===e.r?(0+(e.g-e.b)/(o-t))/6:o===e.g?(2+(e.b-e.r)/(o-t))/6:(4+(e.r-e.g)/(o-t))/6,r<0&&(r+=1),{h:r,w:t,b:1-o,a:e.a}}const m={hex:{hsl:function(e){return h(n(e))},hsv:function(e){return d(n(e))},hwb:function(e){return b(n(e))},rgb:n},hsl:{hex:function(e){return v(s(e))},hsv:function(e){const t=e.l+e.s*Math.min(e.l,1-e.l),o=0===t?0:2-2*e.l/t;return{h:e.h,s:o,v:t,a:e.a}},hwb:function(e){return b(s(e))},rgb:s},hsv:{hex:function(e){return v(i(e))},hsl:function(e){const t=e.v-e.v*e.s/2,o=Math.min(t,1-t),r=0===o?0:(e.v-t)/o;return{h:e.h,s:r,l:t,a:e.a}},hwb:function(e){return{h:e.h,w:(1-e.s)*e.v,b:1-e.v,a:e.a}},rgb:i},hwb:{hex:function(e){return v(f(e))},hsl:function(e){return h(f(e))},hsv:p,rgb:f},rgb:{hex:v,hsl:h,hsv:d,hwb:b}};function f(e){return i(p(e))}function g(e,t,o){return m[t][o](e)}const V={hex:e=>e,hsl:e=>`hsl(${r(360*e.h)} ${r(100*e.s)}% ${r(100*e.l)}% / ${r(e.a)})`,hwb:e=>`hwb(${r(360*e.h)} ${r(100*e.w)}% ${r(100*e.b)}% / ${r(e.a)})`,rgb:e=>`rgb(${r(255*e.r)} ${r(255*e.g)} ${r(255*e.b)} / ${r(e.a)})`};function C(e,t){return V[t](e)}function y(e){return!!e.startsWith("#")&&(!![3,4,6,8].includes(e.length-1)&&/^#[0-9A-Fa-f]+$/.test(e))}const N=["hex","hsl","hwb","rgb"];var w={name:"ColorPicker",props:{color:{type:[String,Object],required:!1,default:null},id:{type:String,required:!1,default:"color-picker"},visibleFormats:{type:Array,required:!1,default:()=>N,validator:e=>e.length>0&&e.every((e=>N.includes(e)))}},data:()=>({pointerOriginatedInColorSpace:!1,activeFormat:"rgb",colors:{hex:"#ffffffff",hsl:{h:0,s:0,l:1,a:1},hsv:{h:0,s:0,v:1,a:1},hwb:{h:0,w:1,b:0,a:1},rgb:{r:1,g:1,b:1,a:1}}}),watch:{color(e){this.setColorValueFromProp(e)}},created(){this.supportedFormats=["hex","hsl","hsv","hwb","rgb"]},mounted(){this.initThumbPointerNavigation(),this.setColorValueFromProp(this.color)},beforeUnmount(){document.removeEventListener("mousemove",this.moveThumbWithMouse),document.removeEventListener("touchmove",this.moveThumbWithTouch),document.removeEventListener("mouseup",this.stopMovingThumb),document.removeEventListener("touchend",this.stopMovingThumb)},methods:{initThumbPointerNavigation(){document.addEventListener("mousemove",this.moveThumbWithMouse,{passive:!1}),document.addEventListener("touchmove",this.moveThumbWithTouch,{passive:!1}),document.addEventListener("mouseup",this.stopMovingThumb),document.addEventListener("touchend",this.stopMovingThumb)},startMovingThumb(){this.pointerOriginatedInColorSpace=!0},stopMovingThumb(){this.pointerOriginatedInColorSpace=!1},moveThumbWithMouse(e){1===e.buttons&&!1!==this.pointerOriginatedInColorSpace&&this.moveThumb(e.clientX,e.clientY)},moveThumbWithTouch(e){!1!==this.pointerOriginatedInColorSpace&&(e.preventDefault(),this.moveThumb(e.touches[0].clientX,e.touches[0].clientY))},moveThumb(e,t){const r=this.$refs.colorSpace.getBoundingClientRect(),a=e-r.left,l=t-r.top,n={...this.colors.hsv};n.s=o(a/r.width,0,1),n.v=o(1-l/r.height,0,1),this.setColorValue(n,"hsv")},moveThumbWithArrows(e){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(e.key))return;e.preventDefault();const t=["ArrowLeft","ArrowDown"].includes(e.key)?-1:1,r=["ArrowLeft","ArrowRight"].includes(e.key)?"s":"v",a=e.shiftKey?10:1,l=this.colors.hsv[r]+t*a*.01;this.setColorValue(o(l,0,1),"hsv",r)},changeInputValue(e){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(e.key)||!e.shiftKey)return;const t=e.currentTarget,r=parseFloat(t.step),a=["ArrowLeft","ArrowDown"].includes(e.key)?-1:1,l=o(parseFloat(t.value)+a*r*10,parseInt(t.min),parseInt(t.max));t.value=String(l-a*r)},setColorValue(e,t,o){if(void 0!==o||function(e,t){if("string"==typeof e||"string"==typeof t)return e===t;for(const o in e)if(e[o]!==t[o])return!1;return!0}(e,this.colors[t])){if(void 0===o||this.colors[t][o]===e)return;this.colors[t][o]=e}else this.colors[t]=e;const r=this.applyColorUpdates(t);this.$emit("color-change",r)},applyColorUpdates(e){return this.colors=this.reCalculateColors(this.colors,e),this.setCssProps(this.$refs.colorPicker,this.$refs.colorSpace,this.$refs.thumb,this.colors),this.getEventData(this.colors,this.activeFormat)},setColorValueFromProp(e){if(null===e)return;let t,o;if("string"==typeof e)if(y(e))t=e,o="hex";else{const r=function(e){const t=document.createElement("span");if(t.style.display="none",t.style.color=e,""===t.style.color)return"";document.body.appendChild(t);const o=getComputedStyle(t).color;return t.remove(),o}(e);if(""===r)return;t=function(e){const t=e.substring(e.indexOf("(")+1,e.indexOf(")")).replace(/[,/]/g," ").replace(/\s+/g," ").split(" ");return{r:a.from8BitDecimal(t[0]),g:a.from8BitDecimal(t[1]),b:a.from8BitDecimal(t[2]),a:4===t.length?a.fromAlpha(t[3]):1}}(r),o="rgb"}else t=e,r=e,o=Object.prototype.hasOwnProperty.call(r,"r")?"rgb":Object.prototype.hasOwnProperty.call(r,"w")?"hwb":Object.prototype.hasOwnProperty.call(r,"v")?"hsv":"hsl";var r;this.setColorValue(t,o)},reCalculateColors(e,t){const o=e[t],r=this.supportedFormats.filter((e=>e!==t)),a={...e};for(const e of r){const r=g(o,t,e);a[e]=r}return a},copyColor(){!function(e){if("function"!=typeof document.queryCommandSupported||!document.queryCommandSupported("copy"))return!1;const t=document.createElement("textarea");let o;t.textContent=e,t.style.position="fixed",document.body.appendChild(t),t.select();try{o=document.execCommand("copy")}catch{o=!1}finally{document.body.removeChild(t)}}(C(this.colors[this.activeFormat],this.activeFormat))},updateHue(e){const t=e.currentTarget;this.setColorValue(parseInt(t.value)/360,"hsv","h")},updateAlpha(e){const t=e.currentTarget;this.setColorValue(parseInt(t.value)/100,"hsv","a")},updateColorValue(e,t,o){let r;const a=e.target;if("hex"===t){if(!y(a.value))return;r=a.value}else{r={...this.colors[t]};const e=l[t][o].from(a.value);if(Number.isNaN(e)||void 0===e)return;r[o]=e}this.setColorValue(r,t)},switchFormat(){const e=this.visibleFormats.findIndex((e=>e===this.activeFormat)),t=e===this.visibleFormats.length-1?0:e+1;this.activeFormat=this.visibleFormats[t]},getChannelAsCssValue(e,t){return l[e][t].to(this.colors[e][t])},getEventData:(e,t)=>({colors:{...e},cssColor:C(e[t],t)}),setCssProps(e,t,o,r){e.style.setProperty("--vacp-hsl-h",String(r.hsl.h)),e.style.setProperty("--vacp-hsl-s",String(r.hsl.s)),e.style.setProperty("--vacp-hsl-l",String(r.hsl.l)),e.style.setProperty("--vacp-hsl-a",String(r.hsl.a)),t.setAttribute("style","\n position: relative;\n background-color: hsl(calc(var(--vacp-hsl-h) * 360) 100% 50%); /* 1. */\n background-image:\n linear-gradient(to top, #000, transparent), /* 2. */\n linear-gradient(to right, #fff, transparent) /* 2. */\n ;\n "),o.setAttribute("style",`\n box-sizing: border-box;\n position: absolute;\n left: ${100*r.hsv.s}%; /* 3. */\n bottom: ${100*r.hsv.v}%; /* 3. */\n `)}}};const x={ref:"colorPicker",class:"vacp-color-picker"},A={class:"vacp-range-input-label-text vacp-range-input-label-text--hue"},$=t.createTextVNode("Hue"),T={class:"vacp-range-input-label-text vacp-range-input-label-text--alpha"},P=t.createTextVNode("Alpha"),k=t.createTextVNode(" Copy color "),F={class:"vacp-color-inputs"},I={key:0,class:"vacp-color-input-group"},M=t.createVNode("span",{class:"vacp-color-input-label-text"},"H",-1),B=t.createVNode("span",{class:"vacp-color-input-label-text"},"S",-1),S=t.createVNode("span",{class:"vacp-color-input-label-text"},"L",-1),D=t.createVNode("span",{class:"vacp-color-input-label-text"},"A",-1),W={key:1,class:"vacp-color-input-group"},O=t.createVNode("span",{class:"vacp-color-input-label-text"},"H",-1),L=t.createVNode("span",{class:"vacp-color-input-label-text"},"W",-1),H=t.createVNode("span",{class:"vacp-color-input-label-text"},"B",-1),E=t.createVNode("span",{class:"vacp-color-input-label-text"},"A",-1),j={key:2,class:"vacp-color-input-group"},q=t.createVNode("span",{class:"vacp-color-input-label-text"},"R",-1),K=t.createVNode("span",{class:"vacp-color-input-label-text"},"G",-1),R=t.createVNode("span",{class:"vacp-color-input-label-text"},"B",-1),U=t.createVNode("span",{class:"vacp-color-input-label-text"},"A",-1),X={key:3,class:"vacp-color-input-group"},Y=t.createVNode("span",{class:"vacp-color-input-label-text"},"Hex",-1),_=t.createTextVNode(" Switch format ");w.render=function(e,o,r,a,l,n){return t.openBlock(),t.createBlock("div",x,[t.createVNode("div",{ref:"colorSpace",class:"vacp-color-space",onMousedown:o[2]||(o[2]=(...e)=>n.startMovingThumb&&n.startMovingThumb(...e)),onTouchstart:o[3]||(o[3]=(...e)=>n.startMovingThumb&&n.startMovingThumb(...e))},[t.createVNode("div",{ref:"thumb",class:"vacp-color-space-thumb",tabindex:"0","aria-label":"Color space thumb",onKeydown:o[1]||(o[1]=(...e)=>n.moveThumbWithArrows&&n.moveThumbWithArrows(...e))},null,544)],544),t.createVNode("label",{class:"vacp-range-input-label vacp-range-input-label--hue",for:`${r.id}-hue-slider`},[t.createVNode("span",A,[t.renderSlot(e.$slots,"hue-range-input-label",{},(()=>[$]))]),t.createVNode("input",{id:`${r.id}-hue-slider`,class:"vacp-range-input vacp-range-input--hue",value:360*l.colors.hsv.h,type:"range",min:"0",max:"360",step:"1",onKeydownPassive:o[4]||(o[4]=(...e)=>n.changeInputValue&&n.changeInputValue(...e)),onInput:o[5]||(o[5]=(...e)=>n.updateHue&&n.updateHue(...e))},null,40,["id","value"])],8,["for"]),t.createVNode("label",{class:"vacp-range-input-label vacp-range-input-label--alpha",for:`${r.id}-alpha-slider`},[t.createVNode("span",T,[t.renderSlot(e.$slots,"alpha-range-input-label",{},(()=>[P]))]),t.createVNode("input",{id:`${r.id}-alpha-slider`,class:"vacp-range-input vacp-range-input--alpha",value:100*l.colors.hsv.a,type:"range",min:"0",max:"100",step:"1",onKeydownPassive:o[6]||(o[6]=(...e)=>n.changeInputValue&&n.changeInputValue(...e)),onInput:o[7]||(o[7]=(...e)=>n.updateAlpha&&n.updateAlpha(...e))},null,40,["id","value"])],8,["for"]),t.createVNode("button",{class:"vacp-copy-button",type:"button",onClick:o[8]||(o[8]=(...e)=>n.copyColor&&n.copyColor(...e))},[t.renderSlot(e.$slots,"copy-button",{},(()=>[k]))]),t.createVNode("div",F,["hsl"===l.activeFormat?(t.openBlock(),t.createBlock("div",I,[t.createVNode("label",{class:"vacp-color-input-label",for:`${r.id}-color-hsl-h`},[M,t.createVNode("input",{id:`${r.id}-color-hsl-h`,class:"vacp-color-input",type:"text",value:n.getChannelAsCssValue("hsl","h"),onInput:o[9]||(o[9]=e=>n.updateColorValue(e,"hsl","h"))},null,40,["id","value"])],8,["for"]),t.createVNode("label",{class:"vacp-color-input-label",for:`${r.id}-color-hsl-s`},[B,t.createVNode("input",{id:`${r.id}-color-hsl-s`,class:"vacp-color-input",type:"text",value:n.getChannelAsCssValue("hsl","s"),onInput:o[10]||(o[10]=e=>n.updateColorValue(e,"hsl","s"))},null,40,["id","value"])],8,["for"]),t.createVNode("label",{class:"vacp-color-input-label",for:`${r.id}-color-hsl-l`},[S,t.createVNode("input",{id:`${r.id}-color-hsl-l`,class:"vacp-color-input",type:"text",value:n.getChannelAsCssValue("hsl","l"),onInput:o[11]||(o[11]=e=>n.updateColorValue(e,"hsl","l"))},null,40,["id","value"])],8,["for"]),t.createVNode("label",{class:"vacp-color-input-label",for:`${r.id}-color-hsl-a`},[D,t.createVNode("input",{id:`${r.id}-color-hsl-a`,class:"vacp-color-input",type:"text",value:n.getChannelAsCssValue("hsl","a"),onInput:o[12]||(o[12]=e=>n.updateColorValue(e,"hsl","a"))},null,40,["id","value"])],8,["for"])])):"hwb"===l.activeFormat?(t.openBlock(),t.createBlock("div",W,[t.createVNode("label",{class:"vacp-color-input-label",for:`${r.id}-color-hwb-h`},[O,t.createVNode("input",{id:`${r.id}-color-hwb-h`,class:"vacp-color-input",type:"text",value:n.getChannelAsCssValue("hwb","h"),onInput:o[13]||(o[13]=e=>n.updateColorValue(e,"hwb","h"))},null,40,["id","value"])],8,["for"]),t.createVNode("label",{class:"vacp-color-input-label",for:`${r.id}-color-hwb-w`},[L,t.createVNode("input",{id:`${r.id}-color-hwb-w`,class:"vacp-color-input",type:"text",value:n.getChannelAsCssValue("hwb","w"),onInput:o[14]||(o[14]=e=>n.updateColorValue(e,"hwb","w"))},null,40,["id","value"])],8,["for"]),t.createVNode("label",{class:"vacp-color-input-label",for:`${r.id}-color-hwb-b`},[H,t.createVNode("input",{id:`${r.id}-color-hwb-b`,class:"vacp-color-input",type:"text",value:n.getChannelAsCssValue("hwb","b"),onInput:o[15]||(o[15]=e=>n.updateColorValue(e,"hwb","b"))},null,40,["id","value"])],8,["for"]),t.createVNode("label",{class:"vacp-color-input-label",for:`${r.id}-color-hwb-a`},[E,t.createVNode("input",{id:`${r.id}-color-hwb-a`,class:"vacp-color-input",type:"text",value:n.getChannelAsCssValue("hwb","a"),onInput:o[16]||(o[16]=e=>n.updateColorValue(e,"hwb","a"))},null,40,["id","value"])],8,["for"])])):"rgb"===l.activeFormat?(t.openBlock(),t.createBlock("div",j,[t.createVNode("label",{class:"vacp-color-input-label",for:`${r.id}-color-rgb-r`},[q,t.createVNode("input",{id:`${r.id}-color-rgb-r`,class:"vacp-color-input",type:"text",value:n.getChannelAsCssValue("rgb","r"),onInput:o[17]||(o[17]=e=>n.updateColorValue(e,"rgb","r"))},null,40,["id","value"])],8,["for"]),t.createVNode("label",{class:"vacp-color-input-label",for:`${r.id}-color-rgb-g`},[K,t.createVNode("input",{id:`${r.id}-color-rgb-g`,class:"vacp-color-input",type:"text",value:n.getChannelAsCssValue("rgb","g"),onInput:o[18]||(o[18]=e=>n.updateColorValue(e,"rgb","g"))},null,40,["id","value"])],8,["for"]),t.createVNode("label",{class:"vacp-color-input-label",for:`${r.id}-color-rgb-b`},[R,t.createVNode("input",{id:`${r.id}-color-rgb-b`,class:"vacp-color-input",type:"text",value:n.getChannelAsCssValue("rgb","b"),onInput:o[19]||(o[19]=e=>n.updateColorValue(e,"rgb","b"))},null,40,["id","value"])],8,["for"]),t.createVNode("label",{class:"vacp-color-input-label",for:`${r.id}-color-rgb-a`},[U,t.createVNode("input",{id:`${r.id}-color-rgb-a`,class:"vacp-color-input",type:"text",value:n.getChannelAsCssValue("rgb","a"),onInput:o[20]||(o[20]=e=>n.updateColorValue(e,"rgb","a"))},null,40,["id","value"])],8,["for"])])):"hex"===l.activeFormat?(t.openBlock(),t.createBlock("div",X,[t.createVNode("label",{class:"vacp-color-input-label",for:`${r.id}-color-hex`},[Y,t.createVNode("input",{id:`${r.id}-color-hex`,class:"vacp-color-input",type:"text",value:l.colors.hex,onInput:o[21]||(o[21]=e=>n.updateColorValue(e,"hex"))},null,40,["id","value"])],8,["for"])])):t.createCommentVNode("",!0),r.visibleFormats.length>1?(t.openBlock(),t.createBlock("button",{key:4,class:"vacp-format-switch-button",type:"button",onClick:o[22]||(o[22]=(...e)=>n.switchFormat&&n.switchFormat(...e))},[t.renderSlot(e.$slots,"format-switch-button",{},(()=>[_]))])):t.createCommentVNode("",!0)])],512)};var z={install(e){e.component("ColorPicker",w)}};e.ColorPicker=w,e.default=z,Object.defineProperty(e,"__esModule",{value:!0})}));

2

dist/vue-accessible-color-picker.js

@@ -1,1 +0,1 @@

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).AccessibleColorPicker={})}(this,(function(t){"use strict";function e(t,e,a){return Math.max(e,Math.min(t,a))}function a(t,e=2){return t.toFixed(e).replace(/0+$/,"").replace(/\.$/,"")}const r={fromHueAngle(t){if(t.endsWith("."))return NaN;return(parseFloat(t)%360+360)%360/360},toHueAngle:t=>a(360*t),fromPercentage(t){if(!t.endsWith("%"))return NaN;const a=t.substring(0,t.length-1);if(a.endsWith("."))return NaN;const r=parseFloat(a);return Number.isNaN(r)?NaN:e(r,0,100)/100},toPercentage:t=>a(100*t)+"%",from8BitDecimal(t){if(t.endsWith("%"))return r.fromPercentage(t);if(t.endsWith("."))return NaN;const a=parseFloat(t);return Number.isNaN(a)?NaN:e(a,0,255)/255},to8BitDecimal:t=>a(255*t),fromAlpha:t=>t.endsWith("%")?r.fromPercentage(t):e(parseFloat(t),0,1),toAlpha:t=>String(t)},o={hsl:{h:{to:r.toHueAngle,from:r.fromHueAngle},s:{to:r.toPercentage,from:r.fromPercentage},l:{to:r.toPercentage,from:r.fromPercentage},a:{to:r.toAlpha,from:r.fromAlpha}},hwb:{h:{to:r.toHueAngle,from:r.fromHueAngle},w:{to:r.toPercentage,from:r.fromPercentage},b:{to:r.toPercentage,from:r.fromPercentage},a:{to:r.toAlpha,from:r.fromAlpha}},rgb:{r:{to:r.to8BitDecimal,from:r.from8BitDecimal},g:{to:r.to8BitDecimal,from:r.from8BitDecimal},b:{to:r.to8BitDecimal,from:r.from8BitDecimal},a:{to:r.toAlpha,from:r.fromAlpha}}};function n(t){const e=t.replace(/^#/,""),a=[],r=e.length>4?2:1;for(let t=0;t<e.length;t+=r){const o=e.slice(t,t+r);a.push(o.repeat(r%2+1))}3===a.length&&a.push("ff");const o=a.map(t=>parseInt(t,16)/255);return{r:o[0],g:o[1],b:o[2],a:o[3]}}function i(t){const e=t.l<.5?t.l*(1+t.s):t.l+t.s-t.l*t.s,a=2*t.l-e;return{r:c(a,e,t.h+1/3),g:c(a,e,t.h),b:c(a,e,t.h-1/3),a:t.a}}function c(t,e,a){return a<0?a+=1:a>1&&(a-=1),a<1/6?t+6*(e-t)*a:a<.5?e:a<2/3?t+(e-t)*(2/3-a)*6:t}function s(t){return{r:l(5,t),g:l(3,t),b:l(1,t),a:t.a}}function l(t,e){const a=(t+6*e.h)%6;return e.v-e.v*e.s*Math.max(0,Math.min(a,4-a,1))}function p(t){return{h:t.h,s:1===t.b?0:1-t.w/(1-t.b),v:1-t.b,a:t.a}}function u(t){const e=Math.min(t.r,t.g,t.b),a=Math.max(t.r,t.g,t.b);let r;r=a===e?0:a===t.r?(0+(t.g-t.b)/(a-e))/6:a===t.g?(2+(t.b-t.r)/(a-e))/6:(4+(t.r-t.g)/(a-e))/6,r<0&&(r+=1);const o=(a+e)/2;let n;return n=0===a||1===e?0:(a-o)/Math.min(o,1-o),{h:r,s:n,l:o,a:t.a}}function h(t){const e=Math.min(t.r,t.g,t.b),a=Math.max(t.r,t.g,t.b);let r,o;r=a===e?0:a===t.r?(0+(t.g-t.b)/(a-e))/6:a===t.g?(2+(t.b-t.r)/(a-e))/6:(4+(t.r-t.g)/(a-e))/6,r<0&&(r+=1),o=0===a?0:(a-e)/a;return{h:r,s:o,v:a,a:t.a}}function v(t){return"#"+Object.values(t).map(t=>{const e=255*t,a=Math.round(e).toString(16);return 1===a.length?"0"+a:a}).join("")}function d(t){const e=Math.min(t.r,t.g,t.b),a=Math.max(t.r,t.g,t.b);let r;return r=a===e?0:a===t.r?(0+(t.g-t.b)/(a-e))/6:a===t.g?(2+(t.b-t.r)/(a-e))/6:(4+(t.r-t.g)/(a-e))/6,r<0&&(r+=1),{h:r,w:e,b:1-a,a:t.a}}const g={hex:{hsl:function(t){return u(n(t))},hsv:function(t){return h(n(t))},hwb:function(t){return d(n(t))},rgb:n},hsl:{hex:function(t){return v(i(t))},hsv:function(t){const e=t.l+t.s*Math.min(t.l,1-t.l),a=0===e?0:2-2*t.l/e;return{h:t.h,s:a,v:e,a:t.a}},hwb:function(t){return d(i(t))},rgb:i},hsv:{hex:function(t){return v(s(t))},hsl:function(t){const e=t.v-t.v*t.s/2,a=Math.min(e,1-e),r=0===a?0:(t.v-e)/a;return{h:t.h,s:r,l:e,a:t.a}},hwb:function(t){return{h:t.h,w:(1-t.s)*t.v,b:1-t.v,a:t.a}},rgb:s},hwb:{hex:function(t){return v(b(t))},hsl:function(t){return u(b(t))},hsv:p,rgb:b},rgb:{hex:v,hsl:u,hsv:h,hwb:d}};function b(t){return s(p(t))}function f(t,e,a){return g[e][a](t)}const m={hex:t=>t,hsl:t=>`hsl(${a(360*t.h)} ${a(100*t.s)}% ${a(100*t.l)}% / ${a(t.a)})`,hwb:t=>`hwb(${a(360*t.h)} ${a(100*t.w)}% ${a(100*t.b)}% / ${a(t.a)})`,rgb:t=>`rgb(${a(255*t.r)} ${a(255*t.g)} ${a(255*t.b)} / ${a(t.a)})`};function C(t,e){return m[e](t)}function w(t){return!!t.startsWith("#")&&(!![3,4,6,8].includes(t.length-1)&&/^#[0-9A-Fa-f]+$/.test(t))}const x=["hex","hsl","hwb","rgb"];var y={name:"ColorPicker",props:{color:{type:[String,Object],required:!1,default:null},id:{type:String,required:!1,default:"color-picker"},visibleFormats:{type:Array,required:!1,default:()=>x,validator:t=>t.length>0&&t.every(t=>x.includes(t))}},data:()=>({pointerOriginatedInColorSpace:!1,activeFormat:"rgb",colors:{hex:"#ffffffff",hsl:{h:0,s:0,l:1,a:1},hsv:{h:0,s:0,v:1,a:1},hwb:{h:0,w:1,b:0,a:1},rgb:{r:1,g:1,b:1,a:1}}}),watch:{color(t){this.setColorValueFromProp(t)}},created(){this.supportedFormats=["hex","hsl","hsv","hwb","rgb"]},mounted(){this.initThumbPointerNavigation(),this.setColorValueFromProp(this.color)},beforeDestroy(){document.removeEventListener("mousemove",this.moveThumbWithMouse),document.removeEventListener("touchmove",this.moveThumbWithTouch),document.removeEventListener("mouseup",this.stopMovingThumb),document.removeEventListener("touchend",this.stopMovingThumb)},methods:{initThumbPointerNavigation(){document.addEventListener("mousemove",this.moveThumbWithMouse,{passive:!1}),document.addEventListener("touchmove",this.moveThumbWithTouch,{passive:!1}),document.addEventListener("mouseup",this.stopMovingThumb),document.addEventListener("touchend",this.stopMovingThumb)},startMovingThumb(){this.pointerOriginatedInColorSpace=!0},stopMovingThumb(){this.pointerOriginatedInColorSpace=!1},moveThumbWithMouse(t){1===t.buttons&&!1!==this.pointerOriginatedInColorSpace&&this.moveThumb(t.clientX,t.clientY)},moveThumbWithTouch(t){!1!==this.pointerOriginatedInColorSpace&&(t.preventDefault(),this.moveThumb(t.touches[0].clientX,t.touches[0].clientY))},moveThumb(t,a){const r=this.$refs.colorSpace.getBoundingClientRect(),o=t-r.left,n=a-r.top,i={...this.getColorValue("hsv")};i.s=e(o/r.width,0,1),i.v=e(1-n/r.height,0,1),this.setColorValue(i,"hsv")},moveThumbWithArrows(t){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(t.key))return;t.preventDefault();const a=["ArrowLeft","ArrowDown"].includes(t.key)?-1:1,r=["ArrowLeft","ArrowRight"].includes(t.key)?"s":"v",o=t.shiftKey?10:1,n=this.getColorValue("hsv",r)+a*o*.01;this.setColorValue(e(n,0,1),"hsv",r)},changeInputValue(t){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(t.key)||!t.shiftKey)return;const a=t.currentTarget,r=parseFloat(a.step),o=["ArrowLeft","ArrowDown"].includes(t.key)?-1:1,n=e(parseFloat(a.value)+o*r*10,parseInt(a.min),parseInt(a.max));a.value=String(n-o*r)},getColorValue(t,e){return void 0===e?this.colors[t]:this.colors[t][e]},setColorValue(t,e,a){if(void 0!==a||function(t,e){if("string"==typeof t||"string"==typeof e)return t===e;for(const a in t)if(t[a]!==e[a])return!1;return!0}(t,this.colors[e])){if(void 0===a||this.colors[e][a]===t)return;this.colors[e][a]=t}else this.colors[e]=t;this.reCalculateColors(e),this.setCssProps(this.$el,this.colors);const r=this.getEventData(this.colors,this.activeFormat);this.$emit("color-change",r)},setColorValueFromProp(t){if(null===t)return;let e,a;if("string"==typeof t)if(w(t))e=t,a="hex";else{const o=function(t){const e=document.createElement("span");if(e.style.display="none",e.style.color=t,""===e.style.color)return"";document.body.appendChild(e);const a=getComputedStyle(e).color;return e.remove(),a}(t);if(""===o)return;e=function(t){const e=t.substring(t.indexOf("(")+1,t.indexOf(")")).replace(/[,/]/g," ").replace(/\s+/g," ").split(" ");return{r:r.from8BitDecimal(e[0]),g:r.from8BitDecimal(e[1]),b:r.from8BitDecimal(e[2]),a:4===e.length?r.fromAlpha(e[3]):1}}(o),a="rgb"}else e=t,o=t,a=Object.prototype.hasOwnProperty.call(o,"r")?"rgb":Object.prototype.hasOwnProperty.call(o,"w")?"hwb":Object.prototype.hasOwnProperty.call(o,"v")?"hsv":"hsl";var o;this.setColorValue(e,a)},reCalculateColors(t){const e=this.getColorValue(t),a=this.supportedFormats.filter(e=>e!==t),r={...this.colors};for(const o of a){const a=f(e,t,o);r[o]=a}this.colors=r},copyColor(){!function(t){if("function"!=typeof document.queryCommandSupported||!document.queryCommandSupported("copy"))return!1;const e=document.createElement("textarea");let a;e.textContent=t,e.style.position="fixed",document.body.appendChild(e),e.select();try{a=document.execCommand("copy")}catch{a=!1}finally{document.body.removeChild(e)}}(C(this.colors[this.activeFormat],this.activeFormat))},updateHue(t){this.setColorValue(parseInt(t.currentTarget.value)/360,"hsv","h")},updateAlpha(t){this.setColorValue(parseInt(t.currentTarget.value)/100,"hsv","a")},updateColorValue(t,e,a){let r;if("hex"===e){if(!w(t.target.value))return;r=t.target.value}else{r={...this.colors[e]};const n=o[e][a].from(t.target.value);if(Number.isNaN(n)||void 0===n)return;r[a]=n}this.setColorValue(r,e)},switchFormat(){const t=this.visibleFormats.findIndex(t=>t===this.activeFormat),e=t===this.visibleFormats.length-1?0:t+1;this.activeFormat=this.visibleFormats[e]},getChannelAsCssValue(t,e){const a=this.colors[t][e];return o[t][e].to(a)},getEventData:(t,e)=>({colors:{...t},cssColor:C(t[e],e)}),setCssProps(t,e){t.style.setProperty("--vacp-hsl-h",String(e.hsl.h)),t.style.setProperty("--vacp-hsl-s",String(e.hsl.s)),t.style.setProperty("--vacp-hsl-l",String(e.hsl.l)),t.style.setProperty("--vacp-hsl-a",String(e.hsl.a)),this.$refs.colorSpace.style="\n position: relative;\n background-color: hsl(calc(var(--vacp-hsl-h) * 360) 100% 50%); /* 1. */\n background-image:\n linear-gradient(to top, #000, transparent), /* 2. */\n linear-gradient(to right, #fff, transparent) /* 2. */\n ;\n ",this.$refs.thumb.style=`\n box-sizing: border-box;\n position: absolute;\n left: ${100*e.hsv.s}%; /* 3. */\n bottom: ${100*e.hsv.v}%; /* 3. */\n `}}};function k(t,e,a,r,o,n,i,c,s,l){"boolean"!=typeof i&&(s=c,c=i,i=!1);const p="function"==typeof a?a.options:a;let u;if(t&&t.render&&(p.render=t.render,p.staticRenderFns=t.staticRenderFns,p._compiled=!0,o&&(p.functional=!0)),r&&(p._scopeId=r),n?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,s(t)),t&&t._registeredComponents&&t._registeredComponents.add(n)},p._ssrRegister=u):e&&(u=i?function(t){e.call(this,l(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,c(t))}),u)if(p.functional){const t=p.render;p.render=function(e,a){return u.call(a),t(e,a)}}else{const t=p.beforeCreate;p.beforeCreate=t?[].concat(t,u):[u]}return a}const _="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function A(t){return(t,e)=>function(t,e){const a=_?e.media||"default":t,r=P[a]||(P[a]={ids:new Set,styles:[]});if(!r.ids.has(t)){r.ids.add(t);let a=e.source;if(e.map&&(a+="\n/*# sourceURL="+e.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",e.media&&r.element.setAttribute("media",e.media),void 0===V&&(V=document.head||document.getElementsByTagName("head")[0]),V.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(a),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{const t=r.ids.size-1,e=document.createTextNode(a),o=r.element.childNodes;o[t]&&r.element.removeChild(o[t]),o.length?r.element.insertBefore(e,o[t]):r.element.appendChild(e)}}}(t,e)}let V;const P={};const T=k({render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"vacp-color-picker"},[a("div",{ref:"colorSpace",staticClass:"vacp-color-space",on:{mousedown:t.startMovingThumb,touchstart:t.startMovingThumb}},[a("div",{ref:"thumb",staticClass:"vacp-color-space-thumb",attrs:{tabindex:"0","aria-label":"Color space thumb"},on:{keydown:t.moveThumbWithArrows}})]),t._v(" "),a("label",{staticClass:"vacp-range-input-label vacp-range-input-label--hue",attrs:{for:t.id+"-hue-slider"}},[a("span",{staticClass:"vacp-range-input-label-text vacp-range-input-label-text--hue"},[t._t("hue-range-input-label",[t._v("Hue")])],2),t._v(" "),a("input",{staticClass:"vacp-range-input vacp-range-input--hue",attrs:{id:t.id+"-hue-slider",type:"range",min:"0",max:"360",step:"1"},domProps:{value:360*t.colors.hsv.h},on:{"&keydown":function(e){return t.changeInputValue(e)},input:t.updateHue}})]),t._v(" "),a("label",{staticClass:"vacp-range-input-label vacp-range-input-label--alpha",attrs:{for:t.id+"-alpha-slider"}},[a("span",{staticClass:"vacp-range-input-label-text vacp-range-input-label-text--alpha"},[t._t("alpha-range-input-label",[t._v("Alpha")])],2),t._v(" "),a("input",{staticClass:"vacp-range-input vacp-range-input--alpha",attrs:{id:t.id+"-alpha-slider",type:"range",min:"0",max:"100",step:"1"},domProps:{value:100*t.colors.hsv.a},on:{"&keydown":function(e){return t.changeInputValue(e)},input:t.updateAlpha}})]),t._v(" "),a("button",{staticClass:"vacp-copy-button",attrs:{type:"button"},on:{click:t.copyColor}},[t._t("copy-button",[t._v("\n Copy color\n ")])],2),t._v(" "),a("div",{staticClass:"vacp-color-inputs"},["hsl"===t.activeFormat?a("div",{staticClass:"vacp-color-input-group"},[a("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-hsl-h"}},[a("span",{staticClass:"vacp-color-input-label-text"},[t._v("H")]),t._v(" "),a("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-hsl-h",type:"text"},domProps:{value:t.getChannelAsCssValue("hsl","h")},on:{input:function(e){return t.updateColorValue(e,"hsl","h")}}})]),t._v(" "),a("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-hsl-s"}},[a("span",{staticClass:"vacp-color-input-label-text"},[t._v("S")]),t._v(" "),a("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-hsl-s",type:"text"},domProps:{value:t.getChannelAsCssValue("hsl","s")},on:{input:function(e){return t.updateColorValue(e,"hsl","s")}}})]),t._v(" "),a("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-hsl-l"}},[a("span",{staticClass:"vacp-color-input-label-text"},[t._v("L")]),t._v(" "),a("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-hsl-l",type:"text"},domProps:{value:t.getChannelAsCssValue("hsl","l")},on:{input:function(e){return t.updateColorValue(e,"hsl","l")}}})]),t._v(" "),a("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-hsl-a"}},[a("span",{staticClass:"vacp-color-input-label-text"},[t._v("A")]),t._v(" "),a("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-hsl-a",type:"text"},domProps:{value:t.getChannelAsCssValue("hsl","a")},on:{input:function(e){return t.updateColorValue(e,"hsl","a")}}})])]):"hwb"===t.activeFormat?a("div",{staticClass:"vacp-color-input-group"},[a("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-hwb-h"}},[a("span",{staticClass:"vacp-color-input-label-text"},[t._v("H")]),t._v(" "),a("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-hwb-h",type:"text"},domProps:{value:t.getChannelAsCssValue("hwb","h")},on:{input:function(e){return t.updateColorValue(e,"hwb","h")}}})]),t._v(" "),a("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-hwb-w"}},[a("span",{staticClass:"vacp-color-input-label-text"},[t._v("W")]),t._v(" "),a("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-hwb-w",type:"text"},domProps:{value:t.getChannelAsCssValue("hwb","w")},on:{input:function(e){return t.updateColorValue(e,"hwb","w")}}})]),t._v(" "),a("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-hwb-b"}},[a("span",{staticClass:"vacp-color-input-label-text"},[t._v("B")]),t._v(" "),a("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-hwb-b",type:"text"},domProps:{value:t.getChannelAsCssValue("hwb","b")},on:{input:function(e){return t.updateColorValue(e,"hwb","b")}}})]),t._v(" "),a("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-hwb-a"}},[a("span",{staticClass:"vacp-color-input-label-text"},[t._v("A")]),t._v(" "),a("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-hwb-a",type:"text"},domProps:{value:t.getChannelAsCssValue("hwb","a")},on:{input:function(e){return t.updateColorValue(e,"hwb","a")}}})])]):"rgb"===t.activeFormat?a("div",{staticClass:"vacp-color-input-group"},[a("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-rgb-r"}},[a("span",{staticClass:"vacp-color-input-label-text"},[t._v("R")]),t._v(" "),a("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-rgb-r",type:"text"},domProps:{value:t.getChannelAsCssValue("rgb","r")},on:{input:function(e){return t.updateColorValue(e,"rgb","r")}}})]),t._v(" "),a("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-rgb-g"}},[a("span",{staticClass:"vacp-color-input-label-text"},[t._v("G")]),t._v(" "),a("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-rgb-g",type:"text"},domProps:{value:t.getChannelAsCssValue("rgb","g")},on:{input:function(e){return t.updateColorValue(e,"rgb","g")}}})]),t._v(" "),a("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-rgb-b"}},[a("span",{staticClass:"vacp-color-input-label-text"},[t._v("B")]),t._v(" "),a("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-rgb-b",type:"text"},domProps:{value:t.getChannelAsCssValue("rgb","b")},on:{input:function(e){return t.updateColorValue(e,"rgb","b")}}})]),t._v(" "),a("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-rgb-a"}},[a("span",{staticClass:"vacp-color-input-label-text"},[t._v("A")]),t._v(" "),a("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-rgb-a",type:"text"},domProps:{value:t.getChannelAsCssValue("rgb","a")},on:{input:function(e){return t.updateColorValue(e,"rgb","a")}}})])]):"hex"===t.activeFormat?a("div",{staticClass:"vacp-color-input-group"},[a("label",{staticClass:"vacp-color-input-label",attrs:{for:t.id+"-color-hex"}},[a("span",{staticClass:"vacp-color-input-label-text"},[t._v("Hex")]),t._v(" "),a("input",{staticClass:"vacp-color-input",attrs:{id:t.id+"-color-hex",type:"text"},domProps:{value:t.colors.hex},on:{input:function(e){return t.updateColorValue(e,"hex")}}})])]):t._e(),t._v(" "),t.visibleFormats.length>1?a("button",{staticClass:"vacp-format-switch-button",attrs:{type:"button"},on:{click:t.switchFormat}},[t._t("format-switch-button",[t._v("\n Switch format\n ")])],2):t._e()])])},staticRenderFns:[]},(function(t){t&&t("data-v-49222da2_0",{source:'.vacp-color-picker{--vacp-color:hsl(\n calc(var(--vacp-hsl-h) * 360)\n calc(var(--vacp-hsl-s) * 100%)\n calc(var(--vacp-hsl-l) * 100%)\n / var(--vacp-hsl-a)\n );--vacp-focus-color:dodgerblue;--vacp-color-space-width:300px;--vacp-spacing:6px;--vacp-tiled-background-image:linear-gradient(\n 45deg,\n #eee 25%,\n transparent 25%,\n transparent 75%,\n #eee 75%,\n #eee\n ),linear-gradient(\n 45deg,\n #eee 25%,\n transparent 25%,\n transparent 75%,\n #eee 75%,\n #eee\n );max-width:var(--vacp-color-space-width);padding:var(--vacp-spacing);display:grid;grid-gap:var(--vacp-spacing);grid-template-columns:1fr min-content;grid-template-areas:"color-space color-space" "hue-input copy-button" "alpha-input copy-button" "color-inputs color-inputs";font-size:.8em;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;background-color:#fff}.vacp-color-picker *,.vacp-color-picker ::after,.vacp-color-picker ::before{box-sizing:border-box}.vacp-color-picker button::-moz-focus-inner{border:none;padding:0}.vacp-color-picker :focus{outline:2px solid var(--vacp-focus-color)}.vacp-color-space{grid-area:color-space;overflow:hidden;height:calc(var(--vacp-color-space-width) * .6)}.vacp-color-space-thumb{--vacp-thumb-size:calc(var(--vacp-spacing) * 4);width:var(--vacp-thumb-size);height:var(--vacp-thumb-size);margin-left:calc(-1 * var(--vacp-thumb-size)/ 2);margin-bottom:calc(-1 * var(--vacp-thumb-size)/ 2);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000}.vacp-color-space-thumb:focus{outline-color:transparent;box-shadow:0 0 0 1px #000,0 0 0 3px var(--vacp-focus-color)}.vacp-range-input-label{--vacp-slider-track-width:100%;--vacp-slider-track-height:calc(var(--vacp-spacing) * 3);--vacp-slider-thumb-size:calc(var(--vacp-slider-track-height) + var(--vacp-spacing));display:block}.vacp-range-input-label--hue{grid-area:hue-input}.vacp-range-input-label--alpha{grid-area:alpha-input}.vacp-range-input,.vacp-range-input::-webkit-slider-thumb{-webkit-appearance:none}.vacp-range-input{display:block;width:var(--vacp-slider-track-width);height:var(--vacp-slider-track-height);margin-right:0;margin-left:0;margin-top:calc(var(--vacp-spacing)/ 2);margin-bottom:calc(var(--vacp-spacing)/ 2);padding:0;border:none;background:0 0}.vacp-range-input:focus{outline:0}.vacp-range-input::-moz-focus-outer{border:none}.vacp-range-input--alpha{background-color:#fff;background-image:var(--vacp-tiled-background-image);background-size:calc(var(--vacp-spacing) * 2) calc(var(--vacp-spacing) * 2);background-position:0 0,var(--vacp-spacing) var(--vacp-spacing)}.vacp-range-input::-moz-range-track{display:block;box-sizing:border-box;height:var(--vacp-slider-track-height);border:none}.vacp-range-input::-webkit-slider-runnable-track{width:var(--vacp-slider-track-width);height:var(--vacp-slider-track-height);border:none}.vacp-range-input::-ms-track{width:var(--vacp-slider-track-width);height:var(--vacp-slider-track-height);border:none}.vacp-range-input:focus::-moz-range-track{border:1px solid var(--vacp-focus-color);outline:2px solid var(--vacp-focus-color)}.vacp-range-input:focus::-webkit-slider-runnable-track{border:1px solid var(--vacp-focus-color);outline:2px solid var(--vacp-focus-color)}.vacp-range-input:focus::-ms-track{border:1px solid var(--vacp-focus-color);outline:2px solid var(--vacp-focus-color)}.vacp-range-input--alpha::-moz-range-track{background-image:linear-gradient(to right,transparent,var(--vacp-color))}.vacp-range-input--alpha::-webkit-slider-runnable-track{background-image:linear-gradient(to right,transparent,var(--vacp-color))}.vacp-range-input--alpha::-ms-track{background-image:linear-gradient(to right,transparent,var(--vacp-color))}.vacp-range-input--hue::-moz-range-track{background-image:linear-gradient(to right,red calc(100% * 0/360),#ff0 calc(100% * 60/360),#0f0 calc(100% * 120/360),#0ff calc(100% * 180/360),#00f calc(100% * 240/360),#f0f calc(100% * 300/360),red calc(100% * 360/360))}.vacp-range-input--hue::-webkit-slider-runnable-track{background-image:linear-gradient(to right,red calc(100% * 0/360),#ff0 calc(100% * 60/360),#0f0 calc(100% * 120/360),#0ff calc(100% * 180/360),#00f calc(100% * 240/360),#f0f calc(100% * 300/360),red calc(100% * 360/360))}.vacp-range-input--hue::-ms-track{background-image:linear-gradient(to right,red calc(100% * 0/360),#ff0 calc(100% * 60/360),#0f0 calc(100% * 120/360),#0ff calc(100% * 180/360),#00f calc(100% * 240/360),#f0f calc(100% * 300/360),red calc(100% * 360/360))}.vacp-range-input::-moz-range-thumb{box-sizing:border-box;width:var(--vacp-slider-thumb-size);height:var(--vacp-slider-thumb-size);border:3px solid #fff;border-radius:50%;background-color:transparent;box-shadow:0 0 0 1px #000;transform:rotate(0)}.vacp-range-input::-webkit-slider-thumb{width:var(--vacp-slider-thumb-size);height:var(--vacp-slider-thumb-size);margin-top:calc((var(--vacp-slider-track-height) - var(--vacp-slider-thumb-size))/ 2);border:3px solid #fff;border-radius:50%;background-color:transparent;box-shadow:0 0 0 1px #000;transform:rotate(0)}.vacp-range-input::-ms-thumb{width:var(--vacp-slider-thumb-size);height:var(--vacp-slider-thumb-size);margin-top:0;border:3px solid #fff;border-radius:50%;background-color:transparent;box-shadow:0 0 0 1px #000;transform:rotate(0)}.vacp-copy-button{grid-area:copy-button;justify-self:center;align-self:center;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;width:calc(var(--vacp-spacing) * 6);height:calc(var(--vacp-spacing) * 6);border:1px solid transparent;border-radius:50%;color:#fff;background-color:#fff;background-image:linear-gradient(var(--vacp-color),var(--vacp-color)),var(--vacp-tiled-background-image);background-size:calc(var(--vacp-spacing) * 2) calc(var(--vacp-spacing) * 2);background-position:0 0,var(--vacp-spacing) var(--vacp-spacing)}.vacp-copy-button:enabled:not(:hover) svg{display:none}.vacp-copy-button:enabled:focus{outline:0;box-shadow:0 0 0 2px var(--vacp-focus-color);border-color:var(--vacp-focus-color)}.vacp-copy-button:enabled:hover{background-color:var(--vacp-color);background-image:linear-gradient(rgb(0 0 0 / .25),rgb(0 0 0 / .25))}.vacp-color-inputs{grid-area:color-inputs;display:flex;align-items:center}.vacp-color-inputs>:not(:first-child){margin-left:var(--vacp-spacing)}.vacp-color-input-group{flex-grow:1;display:flex}.vacp-color-input-label{flex-grow:1;text-align:center}.vacp-color-input-label:not(:first-child){margin-left:var(--vacp-spacing)}.vacp-color-input{width:100%;margin:0;margin-top:calc(var(--vacp-spacing)/ 2);padding:var(--vacp-spacing);border:1px solid #ccc;font:inherit;text-align:center;color:inherit;background-color:#fff}.vacp-color-input:enabled:focus{border-color:var(--vacp-focus-color)}.vacp-format-switch-button{display:flex;justify-content:center;align-items:center;margin:0;padding:var(--vacp-spacing);border:1px solid transparent;font:inherit;color:inherit;background-color:#fff}.vacp-format-switch-button:enabled:focus{border-color:var(--vacp-focus-color)}.vacp-format-switch-button:enabled:hover{background-color:#eee}',map:void 0,media:void 0})}),y,undefined,false,undefined,!1,A,void 0,void 0);function S(t){S.installed||(S.installed=!0,t.component("ColorPicker",T))}const F={install:S};"undefined"!=typeof window&&window.Vue&&"function"==typeof window.Vue.use?window.Vue.use(F):"undefined"!=typeof global&&global.Vue&&"function"==typeof global.Vue.use&&global.Vue.use(F),t.ColorPicker=T,t.default=F,t.install=S,Object.defineProperty(t,"__esModule",{value:!0})}));
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).AccessibleColorPicker={},e.vue)}(this,(function(e,n){"use strict";function t(e,n,t){return Math.max(n,Math.min(e,t))}function a(e,n=2){return e.toFixed(n).replace(/0+$/,"").replace(/\.$/,"")}const o={fromHueAngle(e){if(e.endsWith("."))return NaN;return(parseFloat(e)%360+360)%360/360},toHueAngle:e=>a(360*e),fromPercentage(e){if(!e.endsWith("%"))return NaN;const n=e.substring(0,e.length-1);if(n.endsWith("."))return NaN;const a=parseFloat(n);return Number.isNaN(a)?NaN:t(a,0,100)/100},toPercentage:e=>a(100*e)+"%",from8BitDecimal(e){if(e.endsWith("%"))return o.fromPercentage(e);if(e.endsWith("."))return NaN;const n=parseFloat(e);return Number.isNaN(n)?NaN:t(n,0,255)/255},to8BitDecimal:e=>a(255*e),fromAlpha:e=>e.endsWith("%")?o.fromPercentage(e):t(parseFloat(e),0,1),toAlpha:e=>String(e)},r={hsl:{h:{to:o.toHueAngle,from:o.fromHueAngle},s:{to:o.toPercentage,from:o.fromPercentage},l:{to:o.toPercentage,from:o.fromPercentage},a:{to:o.toAlpha,from:o.fromAlpha}},hwb:{h:{to:o.toHueAngle,from:o.fromHueAngle},w:{to:o.toPercentage,from:o.fromPercentage},b:{to:o.toPercentage,from:o.fromPercentage},a:{to:o.toAlpha,from:o.fromAlpha}},rgb:{r:{to:o.to8BitDecimal,from:o.from8BitDecimal},g:{to:o.to8BitDecimal,from:o.from8BitDecimal},b:{to:o.to8BitDecimal,from:o.from8BitDecimal},a:{to:o.toAlpha,from:o.fromAlpha}}};function c(e){const n=e.replace(/^#/,""),t=[],a=n.length>4?2:1;for(let e=0;e<n.length;e+=a){const o=n.slice(e,e+a);t.push(o.repeat(a%2+1))}3===t.length&&t.push("ff");const o=t.map((e=>parseInt(e,16)/255));return{r:o[0],g:o[1],b:o[2],a:o[3]}}function l(e){const n=e.l<.5?e.l*(1+e.s):e.l+e.s-e.l*e.s,t=2*e.l-n;return{r:i(t,n,e.h+1/3),g:i(t,n,e.h),b:i(t,n,e.h-1/3),a:e.a}}function i(e,n,t){return t<0?t+=1:t>1&&(t-=1),t<1/6?e+6*(n-e)*t:t<.5?n:t<2/3?e+(n-e)*(2/3-t)*6:e}function s(e){return{r:p(5,e),g:p(3,e),b:p(1,e),a:e.a}}function p(e,n){const t=(e+6*n.h)%6;return n.v-n.v*n.s*Math.max(0,Math.min(t,4-t,1))}function u(e){return{h:e.h,s:1===e.b?0:1-e.w/(1-e.b),v:1-e.b,a:e.a}}function h(e){const n=Math.min(e.r,e.g,e.b),t=Math.max(e.r,e.g,e.b);let a;a=t===n?0:t===e.r?(0+(e.g-e.b)/(t-n))/6:t===e.g?(2+(e.b-e.r)/(t-n))/6:(4+(e.r-e.g)/(t-n))/6,a<0&&(a+=1);const o=(t+n)/2;let r;return r=0===t||1===n?0:(t-o)/Math.min(o,1-o),{h:a,s:r,l:o,a:e.a}}function d(e){const n=Math.min(e.r,e.g,e.b),t=Math.max(e.r,e.g,e.b);let a,o;a=t===n?0:t===e.r?(0+(e.g-e.b)/(t-n))/6:t===e.g?(2+(e.b-e.r)/(t-n))/6:(4+(e.r-e.g)/(t-n))/6,a<0&&(a+=1),o=0===t?0:(t-n)/t;return{h:a,s:o,v:t,a:e.a}}function v(e){return"#"+Object.values(e).map((e=>{const n=255*e,t=Math.round(n).toString(16);return 1===t.length?"0"+t:t})).join("")}function g(e){const n=Math.min(e.r,e.g,e.b),t=Math.max(e.r,e.g,e.b);let a;return a=t===n?0:t===e.r?(0+(e.g-e.b)/(t-n))/6:t===e.g?(2+(e.b-e.r)/(t-n))/6:(4+(e.r-e.g)/(t-n))/6,a<0&&(a+=1),{h:a,w:n,b:1-t,a:e.a}}const b={hex:{hsl:function(e){return h(c(e))},hsv:function(e){return d(c(e))},hwb:function(e){return g(c(e))},rgb:c},hsl:{hex:function(e){return v(l(e))},hsv:function(e){const n=e.l+e.s*Math.min(e.l,1-e.l),t=0===n?0:2-2*e.l/n;return{h:e.h,s:t,v:n,a:e.a}},hwb:function(e){return g(l(e))},rgb:l},hsv:{hex:function(e){return v(s(e))},hsl:function(e){const n=e.v-e.v*e.s/2,t=Math.min(n,1-n),a=0===t?0:(e.v-n)/t;return{h:e.h,s:a,l:n,a:e.a}},hwb:function(e){return{h:e.h,w:(1-e.s)*e.v,b:1-e.v,a:e.a}},rgb:s},hwb:{hex:function(e){return v(f(e))},hsl:function(e){return h(f(e))},hsv:u,rgb:f},rgb:{hex:v,hsl:h,hsv:d,hwb:g}};function f(e){return s(u(e))}function m(e,n,t){return b[n][t](e)}const y={hex:e=>e,hsl:e=>`hsl(${a(360*e.h)} ${a(100*e.s)}% ${a(100*e.l)}% / ${a(e.a)})`,hwb:e=>`hwb(${a(360*e.h)} ${a(100*e.w)}% ${a(100*e.b)}% / ${a(e.a)})`,rgb:e=>`rgb(${a(255*e.r)} ${a(255*e.g)} ${a(255*e.b)} / ${a(e.a)})`};function w(e,n){return y[n](e)}function x(e){return!!e.startsWith("#")&&(!![3,4,6,8].includes(e.length-1)&&/^#[0-9A-Fa-f]+$/.test(e))}const k=["hex","hsl","hwb","rgb"];var V={name:"ColorPicker",props:{color:{type:[String,Object],required:!1,default:null},id:{type:String,required:!1,default:"color-picker"},visibleFormats:{type:Array,required:!1,default:()=>k,validator:e=>e.length>0&&e.every((e=>k.includes(e)))}},data:()=>({pointerOriginatedInColorSpace:!1,activeFormat:"rgb",colors:{hex:"#ffffffff",hsl:{h:0,s:0,l:1,a:1},hsv:{h:0,s:0,v:1,a:1},hwb:{h:0,w:1,b:0,a:1},rgb:{r:1,g:1,b:1,a:1}}}),watch:{color(e){this.setColorValueFromProp(e)}},created(){this.supportedFormats=["hex","hsl","hsv","hwb","rgb"]},mounted(){this.initThumbPointerNavigation(),this.setColorValueFromProp(this.color)},beforeUnmount(){document.removeEventListener("mousemove",this.moveThumbWithMouse),document.removeEventListener("touchmove",this.moveThumbWithTouch),document.removeEventListener("mouseup",this.stopMovingThumb),document.removeEventListener("touchend",this.stopMovingThumb)},methods:{initThumbPointerNavigation(){document.addEventListener("mousemove",this.moveThumbWithMouse,{passive:!1}),document.addEventListener("touchmove",this.moveThumbWithTouch,{passive:!1}),document.addEventListener("mouseup",this.stopMovingThumb),document.addEventListener("touchend",this.stopMovingThumb)},startMovingThumb(){this.pointerOriginatedInColorSpace=!0},stopMovingThumb(){this.pointerOriginatedInColorSpace=!1},moveThumbWithMouse(e){1===e.buttons&&!1!==this.pointerOriginatedInColorSpace&&this.moveThumb(e.clientX,e.clientY)},moveThumbWithTouch(e){!1!==this.pointerOriginatedInColorSpace&&(e.preventDefault(),this.moveThumb(e.touches[0].clientX,e.touches[0].clientY))},moveThumb(e,n){const a=this.$refs.colorSpace.getBoundingClientRect(),o=e-a.left,r=n-a.top,c={...this.colors.hsv};c.s=t(o/a.width,0,1),c.v=t(1-r/a.height,0,1),this.setColorValue(c,"hsv")},moveThumbWithArrows(e){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(e.key))return;e.preventDefault();const n=["ArrowLeft","ArrowDown"].includes(e.key)?-1:1,a=["ArrowLeft","ArrowRight"].includes(e.key)?"s":"v",o=e.shiftKey?10:1,r=this.colors.hsv[a]+n*o*.01;this.setColorValue(t(r,0,1),"hsv",a)},changeInputValue(e){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(e.key)||!e.shiftKey)return;const n=e.currentTarget,a=parseFloat(n.step),o=["ArrowLeft","ArrowDown"].includes(e.key)?-1:1,r=t(parseFloat(n.value)+o*a*10,parseInt(n.min),parseInt(n.max));n.value=String(r-o*a)},setColorValue(e,n,t){if(void 0!==t||function(e,n){if("string"==typeof e||"string"==typeof n)return e===n;for(const t in e)if(e[t]!==n[t])return!1;return!0}(e,this.colors[n])){if(void 0===t||this.colors[n][t]===e)return;this.colors[n][t]=e}else this.colors[n]=e;const a=this.applyColorUpdates(n);this.$emit("color-change",a)},applyColorUpdates(e){return this.colors=this.reCalculateColors(this.colors,e),this.setCssProps(this.$refs.colorPicker,this.$refs.colorSpace,this.$refs.thumb,this.colors),this.getEventData(this.colors,this.activeFormat)},setColorValueFromProp(e){if(null===e)return;let n,t;if("string"==typeof e)if(x(e))n=e,t="hex";else{const a=function(e){const n=document.createElement("span");if(n.style.display="none",n.style.color=e,""===n.style.color)return"";document.body.appendChild(n);const t=getComputedStyle(n).color;return n.remove(),t}(e);if(""===a)return;n=function(e){const n=e.substring(e.indexOf("(")+1,e.indexOf(")")).replace(/[,/]/g," ").replace(/\s+/g," ").split(" ");return{r:o.from8BitDecimal(n[0]),g:o.from8BitDecimal(n[1]),b:o.from8BitDecimal(n[2]),a:4===n.length?o.fromAlpha(n[3]):1}}(a),t="rgb"}else n=e,a=e,t=Object.prototype.hasOwnProperty.call(a,"r")?"rgb":Object.prototype.hasOwnProperty.call(a,"w")?"hwb":Object.prototype.hasOwnProperty.call(a,"v")?"hsv":"hsl";var a;this.setColorValue(n,t)},reCalculateColors(e,n){const t=e[n],a=this.supportedFormats.filter((e=>e!==n)),o={...e};for(const e of a){const a=m(t,n,e);o[e]=a}return o},copyColor(){!function(e){if("function"!=typeof document.queryCommandSupported||!document.queryCommandSupported("copy"))return!1;const n=document.createElement("textarea");let t;n.textContent=e,n.style.position="fixed",document.body.appendChild(n),n.select();try{t=document.execCommand("copy")}catch{t=!1}finally{document.body.removeChild(n)}}(w(this.colors[this.activeFormat],this.activeFormat))},updateHue(e){const n=e.currentTarget;this.setColorValue(parseInt(n.value)/360,"hsv","h")},updateAlpha(e){const n=e.currentTarget;this.setColorValue(parseInt(n.value)/100,"hsv","a")},updateColorValue(e,n,t){let a;const o=e.target;if("hex"===n){if(!x(o.value))return;a=o.value}else{a={...this.colors[n]};const e=r[n][t].from(o.value);if(Number.isNaN(e)||void 0===e)return;a[t]=e}this.setColorValue(a,n)},switchFormat(){const e=this.visibleFormats.findIndex((e=>e===this.activeFormat)),n=e===this.visibleFormats.length-1?0:e+1;this.activeFormat=this.visibleFormats[n]},getChannelAsCssValue(e,n){return r[e][n].to(this.colors[e][n])},getEventData:(e,n)=>({colors:{...e},cssColor:w(e[n],n)}),setCssProps(e,n,t,a){e.style.setProperty("--vacp-hsl-h",String(a.hsl.h)),e.style.setProperty("--vacp-hsl-s",String(a.hsl.s)),e.style.setProperty("--vacp-hsl-l",String(a.hsl.l)),e.style.setProperty("--vacp-hsl-a",String(a.hsl.a)),n.setAttribute("style","\n position: relative;\n background-color: hsl(calc(var(--vacp-hsl-h) * 360) 100% 50%); /* 1. */\n background-image:\n linear-gradient(to top, #000, transparent), /* 2. */\n linear-gradient(to right, #fff, transparent) /* 2. */\n ;\n "),t.setAttribute("style",`\n box-sizing: border-box;\n position: absolute;\n left: ${100*a.hsv.s}%; /* 3. */\n bottom: ${100*a.hsv.v}%; /* 3. */\n `)}}};const C={ref:"colorPicker",class:"vacp-color-picker"},N={class:"vacp-range-input-label-text vacp-range-input-label-text--hue"},A=n.createTextVNode("Hue"),$={class:"vacp-range-input-label-text vacp-range-input-label-text--alpha"},T=n.createTextVNode("Alpha"),P=n.createTextVNode(" Copy color "),I={class:"vacp-color-inputs"},F={key:0,class:"vacp-color-input-group"},S=n.createVNode("span",{class:"vacp-color-input-label-text"},"H",-1),M=n.createVNode("span",{class:"vacp-color-input-label-text"},"S",-1),B=n.createVNode("span",{class:"vacp-color-input-label-text"},"L",-1),z=n.createVNode("span",{class:"vacp-color-input-label-text"},"A",-1),D={key:1,class:"vacp-color-input-group"},W=n.createVNode("span",{class:"vacp-color-input-label-text"},"H",-1),E=n.createVNode("span",{class:"vacp-color-input-label-text"},"W",-1),O=n.createVNode("span",{class:"vacp-color-input-label-text"},"B",-1),L=n.createVNode("span",{class:"vacp-color-input-label-text"},"A",-1),j={key:2,class:"vacp-color-input-group"},H=n.createVNode("span",{class:"vacp-color-input-label-text"},"R",-1),R=n.createVNode("span",{class:"vacp-color-input-label-text"},"G",-1),U=n.createVNode("span",{class:"vacp-color-input-label-text"},"B",-1),q=n.createVNode("span",{class:"vacp-color-input-label-text"},"A",-1),K={key:3,class:"vacp-color-input-group"},X=n.createVNode("span",{class:"vacp-color-input-label-text"},"Hex",-1),Y=n.createTextVNode(" Switch format ");!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}('\n/*\nThis style block is unscoped intentionally.\n\nThis is done to have a lower specificity for its selectors\nwhich in turn makes it easier to override their styles.\n\nThe specificity for `.vacp-color-space[data-v-76c97bd2]` is 20\nwhile the specifcitity for `.vacp-color-space` is 10.\n*/\n.vacp-color-picker {\n --vacp-color: hsl(\n calc(var(--vacp-hsl-h) * 360)\n calc(var(--vacp-hsl-s) * 100%)\n calc(var(--vacp-hsl-l) * 100%)\n / var(--vacp-hsl-a)\n );\n --vacp-focus-color: dodgerblue;\n --vacp-color-space-width: 300px;\n --vacp-spacing: 6px;\n --vacp-tiled-background-image: linear-gradient(\n 45deg,\n #eee 25%,\n transparent 25%,\n transparent 75%,\n #eee 75%,\n #eee\n ),\n linear-gradient(\n 45deg,\n #eee 25%,\n transparent 25%,\n transparent 75%,\n #eee 75%,\n #eee\n )\n ;\n\n max-width: var(--vacp-color-space-width);\n padding: var(--vacp-spacing);\n display: grid;\n grid-gap: var(--vacp-spacing);\n grid-template-columns: 1fr min-content;\n grid-template-areas:\n "color-space color-space"\n "hue-input copy-button"\n "alpha-input copy-button"\n "color-inputs color-inputs"\n ;\n font-size: 0.8em;\n font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n background-color: #fff;\n}\n.vacp-color-picker *,\n.vacp-color-picker *::before,\n.vacp-color-picker *::after {\n box-sizing: border-box;\n}\n.vacp-color-picker button::-moz-focus-inner {\n border: none;\n padding: 0;\n}\n.vacp-color-picker :focus {\n outline: 2px solid var(--vacp-focus-color);\n}\n.vacp-color-space {\n grid-area: color-space;\n\n overflow: hidden;\n height: calc(var(--vacp-color-space-width) * 0.6);\n}\n.vacp-color-space-thumb {\n --vacp-thumb-size: calc(var(--vacp-spacing) * 4);\n\n width: var(--vacp-thumb-size);\n height: var(--vacp-thumb-size);\n margin-left: calc(-1 * var(--vacp-thumb-size) / 2);\n margin-bottom: calc(-1 * var(--vacp-thumb-size) / 2);\n border: 3px solid #fff;\n border-radius: 50%;\n box-shadow: 0 0 0 1px #000;\n}\n\n/*\n1. Don’t fully remove a focus outline or border.\n This is important to maintain a focus style in Windows’ high contrast mode.\n*/\n.vacp-color-space-thumb:focus {\n outline-color: transparent; /* 1. */\n box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--vacp-focus-color);\n}\n.vacp-range-input-label {\n --vacp-slider-track-width: 100%;\n --vacp-slider-track-height: calc(var(--vacp-spacing) * 3);\n --vacp-slider-thumb-size: calc(var(--vacp-slider-track-height) + var(--vacp-spacing));\n\n display: block;\n}\n.vacp-range-input-label--hue {\n grid-area: hue-input;\n}\n.vacp-range-input-label--alpha {\n grid-area: alpha-input;\n}\n.vacp-range-input,\n.vacp-range-input::-webkit-slider-thumb {\n -webkit-appearance: none;\n}\n.vacp-range-input {\n display: block;\n width: var(--vacp-slider-track-width);\n height: var(--vacp-slider-track-height);\n margin-right: 0;\n margin-left: 0;\n margin-top: calc(var(--vacp-spacing) / 2);\n margin-bottom: calc(var(--vacp-spacing) / 2);\n padding: 0;\n border: none;\n background: none;\n}\n.vacp-range-input:focus {\n outline: none;\n}\n\n/* Resets one of these annoying custom focus styles in Firefox. */\n.vacp-range-input::-moz-focus-outer {\n border: none;\n}\n.vacp-range-input--alpha {\n background-color: #fff;\n background-image: var(--vacp-tiled-background-image);\n background-size: calc(var(--vacp-spacing) * 2) calc(var(--vacp-spacing) * 2);\n background-position: 0 0, var(--vacp-spacing) var(--vacp-spacing);\n}\n\n/*\nRange input: Tracks\n*/\n.vacp-range-input::-moz-range-track {\n display: block;\n box-sizing: border-box;\n height: var(--vacp-slider-track-height);\n border: none;\n}\n.vacp-range-input::-webkit-slider-runnable-track {\n width: var(--vacp-slider-track-width);\n height: var(--vacp-slider-track-height);\n border: none;\n}\n.vacp-range-input::-ms-track {\n width: var(--vacp-slider-track-width);\n height: var(--vacp-slider-track-height);\n border: none;\n}\n.vacp-range-input:focus::-moz-range-track {\n border: 1px solid var(--vacp-focus-color);\n outline: 2px solid var(--vacp-focus-color);\n}\n.vacp-range-input:focus::-webkit-slider-runnable-track {\n border: 1px solid var(--vacp-focus-color);\n outline: 2px solid var(--vacp-focus-color);\n}\n.vacp-range-input:focus::-ms-track {\n border: 1px solid var(--vacp-focus-color);\n outline: 2px solid var(--vacp-focus-color);\n}\n.vacp-range-input--alpha::-moz-range-track {\n background-image: linear-gradient(to right, transparent, var(--vacp-color));\n}\n.vacp-range-input--alpha::-webkit-slider-runnable-track {\n background-image: linear-gradient(to right, transparent, var(--vacp-color));\n}\n.vacp-range-input--alpha::-ms-track {\n background-image: linear-gradient(to right, transparent, var(--vacp-color));\n}\n.vacp-range-input--hue::-moz-range-track {\n background-image: linear-gradient(\n to right,\n /* 0° */ #f00 calc(100% * 0/360),\n /* 60° */ #ff0 calc(100% * 60/360),\n /* 120° */ #0f0 calc(100% * 120/360),\n /* 180° */ #0ff calc(100% * 180/360),\n /* 240° */ #00f calc(100% * 240/360),\n /* 300° */ #f0f calc(100% * 300/360),\n /* 360° */ #f00 calc(100% * 360/360)\n );\n}\n.vacp-range-input--hue::-webkit-slider-runnable-track {\n background-image: linear-gradient(\n to right,\n /* 0° */ #f00 calc(100% * 0/360),\n /* 60° */ #ff0 calc(100% * 60/360),\n /* 120° */ #0f0 calc(100% * 120/360),\n /* 180° */ #0ff calc(100% * 180/360),\n /* 240° */ #00f calc(100% * 240/360),\n /* 300° */ #f0f calc(100% * 300/360),\n /* 360° */ #f00 calc(100% * 360/360)\n );\n}\n.vacp-range-input--hue::-ms-track {\n background-image: linear-gradient(\n to right,\n /* 0° */ #f00 calc(100% * 0/360),\n /* 60° */ #ff0 calc(100% * 60/360),\n /* 120° */ #0f0 calc(100% * 120/360),\n /* 180° */ #0ff calc(100% * 180/360),\n /* 240° */ #00f calc(100% * 240/360),\n /* 300° */ #f0f calc(100% * 300/360),\n /* 360° */ #f00 calc(100% * 360/360)\n );\n}\n\n/*\nRange input: thumbs\n*/\n.vacp-range-input::-moz-range-thumb {\n box-sizing: border-box;\n width: var(--vacp-slider-thumb-size);\n height: var(--vacp-slider-thumb-size);\n border: 3px solid #fff;\n border-radius: 50%;\n background-color: transparent;\n box-shadow: 0 0 0 1px #000;\n transform: rotate(0);\n}\n.vacp-range-input::-webkit-slider-thumb {\n width: var(--vacp-slider-thumb-size);\n height: var(--vacp-slider-thumb-size);\n margin-top: calc((var(--vacp-slider-track-height) - var(--vacp-slider-thumb-size)) / 2);\n border: 3px solid #fff;\n border-radius: 50%;\n background-color: transparent;\n box-shadow: 0 0 0 1px #000;\n transform: rotate(0);\n}\n.vacp-range-input::-ms-thumb {\n width: var(--vacp-slider-thumb-size);\n height: var(--vacp-slider-thumb-size);\n margin-top: 0;\n border: 3px solid #fff;\n border-radius: 50%;\n background-color: transparent;\n box-shadow: 0 0 0 1px #000;\n transform: rotate(0);\n}\n.vacp-copy-button {\n grid-area: copy-button;\n justify-self: center;\n align-self: center;\n\n position: relative;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--vacp-spacing) * 6);\n height: calc(var(--vacp-spacing) * 6);\n border: 1px solid transparent;\n border-radius: 50%;\n color: #fff;\n\n /* Tiled background */\n background-color: #fff;\n background-image:\n linear-gradient(var(--vacp-color), var(--vacp-color)),\n var(--vacp-tiled-background-image)\n ;\n background-size: calc(var(--vacp-spacing) * 2) calc(var(--vacp-spacing) * 2);\n background-position: 0 0, var(--vacp-spacing) var(--vacp-spacing);\n}\n.vacp-copy-button:enabled:not(:hover) svg {\n display: none;\n}\n\n/*\n1. Justification for removing the outline:\n The focus styles are maintained using a solid border style.\n This maintains a focus style in Windows’ high contrast mode\n which would be lost with a combination of `outline: none` and a box shadow\n because box shadows are removed in high contrast mode.\n*/\n.vacp-copy-button:enabled:focus {\n outline: none; /* 1. */\n box-shadow: 0 0 0 2px var(--vacp-focus-color);\n border-color: var(--vacp-focus-color);\n}\n.vacp-copy-button:enabled:hover {\n background-color: var(--vacp-color);\n background-image: linear-gradient(rgb(0 0 0 / 0.25), rgb(0 0 0 / 0.25));\n}\n.vacp-color-inputs {\n grid-area: color-inputs;\n display: flex;\n align-items: center;\n}\n.vacp-color-inputs > :not(:first-child) {\n margin-left: var(--vacp-spacing);\n}\n.vacp-color-input-group {\n flex-grow: 1;\n display: flex;\n}\n.vacp-color-input-label {\n flex-grow: 1;\n text-align: center;\n}\n.vacp-color-input-label:not(:first-child) {\n margin-left: var(--vacp-spacing);\n}\n.vacp-color-input {\n width: 100%;\n margin: 0;\n margin-top: calc(var(--vacp-spacing) / 2);\n padding: var(--vacp-spacing);\n border: 1px solid #ccc;\n font: inherit;\n text-align: center;\n color: inherit;\n background-color: #fff;\n}\n.vacp-color-input:enabled:focus {\n border-color: var(--vacp-focus-color);\n}\n.vacp-format-switch-button {\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 0;\n padding: var(--vacp-spacing);\n border: 1px solid transparent;\n font: inherit;\n color: inherit;\n background-color: #fff;\n}\n.vacp-format-switch-button:enabled:focus {\n border-color: var(--vacp-focus-color);\n}\n.vacp-format-switch-button:enabled:hover {\n background-color: #eee;\n}\n'),V.render=function(e,t,a,o,r,c){return n.openBlock(),n.createBlock("div",C,[n.createVNode("div",{ref:"colorSpace",class:"vacp-color-space",onMousedown:t[2]||(t[2]=(...e)=>c.startMovingThumb&&c.startMovingThumb(...e)),onTouchstart:t[3]||(t[3]=(...e)=>c.startMovingThumb&&c.startMovingThumb(...e))},[n.createVNode("div",{ref:"thumb",class:"vacp-color-space-thumb",tabindex:"0","aria-label":"Color space thumb",onKeydown:t[1]||(t[1]=(...e)=>c.moveThumbWithArrows&&c.moveThumbWithArrows(...e))},null,544)],544),n.createVNode("label",{class:"vacp-range-input-label vacp-range-input-label--hue",for:`${a.id}-hue-slider`},[n.createVNode("span",N,[n.renderSlot(e.$slots,"hue-range-input-label",{},(()=>[A]))]),n.createVNode("input",{id:`${a.id}-hue-slider`,class:"vacp-range-input vacp-range-input--hue",value:360*r.colors.hsv.h,type:"range",min:"0",max:"360",step:"1",onKeydownPassive:t[4]||(t[4]=(...e)=>c.changeInputValue&&c.changeInputValue(...e)),onInput:t[5]||(t[5]=(...e)=>c.updateHue&&c.updateHue(...e))},null,40,["id","value"])],8,["for"]),n.createVNode("label",{class:"vacp-range-input-label vacp-range-input-label--alpha",for:`${a.id}-alpha-slider`},[n.createVNode("span",$,[n.renderSlot(e.$slots,"alpha-range-input-label",{},(()=>[T]))]),n.createVNode("input",{id:`${a.id}-alpha-slider`,class:"vacp-range-input vacp-range-input--alpha",value:100*r.colors.hsv.a,type:"range",min:"0",max:"100",step:"1",onKeydownPassive:t[6]||(t[6]=(...e)=>c.changeInputValue&&c.changeInputValue(...e)),onInput:t[7]||(t[7]=(...e)=>c.updateAlpha&&c.updateAlpha(...e))},null,40,["id","value"])],8,["for"]),n.createVNode("button",{class:"vacp-copy-button",type:"button",onClick:t[8]||(t[8]=(...e)=>c.copyColor&&c.copyColor(...e))},[n.renderSlot(e.$slots,"copy-button",{},(()=>[P]))]),n.createVNode("div",I,["hsl"===r.activeFormat?(n.openBlock(),n.createBlock("div",F,[n.createVNode("label",{class:"vacp-color-input-label",for:`${a.id}-color-hsl-h`},[S,n.createVNode("input",{id:`${a.id}-color-hsl-h`,class:"vacp-color-input",type:"text",value:c.getChannelAsCssValue("hsl","h"),onInput:t[9]||(t[9]=e=>c.updateColorValue(e,"hsl","h"))},null,40,["id","value"])],8,["for"]),n.createVNode("label",{class:"vacp-color-input-label",for:`${a.id}-color-hsl-s`},[M,n.createVNode("input",{id:`${a.id}-color-hsl-s`,class:"vacp-color-input",type:"text",value:c.getChannelAsCssValue("hsl","s"),onInput:t[10]||(t[10]=e=>c.updateColorValue(e,"hsl","s"))},null,40,["id","value"])],8,["for"]),n.createVNode("label",{class:"vacp-color-input-label",for:`${a.id}-color-hsl-l`},[B,n.createVNode("input",{id:`${a.id}-color-hsl-l`,class:"vacp-color-input",type:"text",value:c.getChannelAsCssValue("hsl","l"),onInput:t[11]||(t[11]=e=>c.updateColorValue(e,"hsl","l"))},null,40,["id","value"])],8,["for"]),n.createVNode("label",{class:"vacp-color-input-label",for:`${a.id}-color-hsl-a`},[z,n.createVNode("input",{id:`${a.id}-color-hsl-a`,class:"vacp-color-input",type:"text",value:c.getChannelAsCssValue("hsl","a"),onInput:t[12]||(t[12]=e=>c.updateColorValue(e,"hsl","a"))},null,40,["id","value"])],8,["for"])])):"hwb"===r.activeFormat?(n.openBlock(),n.createBlock("div",D,[n.createVNode("label",{class:"vacp-color-input-label",for:`${a.id}-color-hwb-h`},[W,n.createVNode("input",{id:`${a.id}-color-hwb-h`,class:"vacp-color-input",type:"text",value:c.getChannelAsCssValue("hwb","h"),onInput:t[13]||(t[13]=e=>c.updateColorValue(e,"hwb","h"))},null,40,["id","value"])],8,["for"]),n.createVNode("label",{class:"vacp-color-input-label",for:`${a.id}-color-hwb-w`},[E,n.createVNode("input",{id:`${a.id}-color-hwb-w`,class:"vacp-color-input",type:"text",value:c.getChannelAsCssValue("hwb","w"),onInput:t[14]||(t[14]=e=>c.updateColorValue(e,"hwb","w"))},null,40,["id","value"])],8,["for"]),n.createVNode("label",{class:"vacp-color-input-label",for:`${a.id}-color-hwb-b`},[O,n.createVNode("input",{id:`${a.id}-color-hwb-b`,class:"vacp-color-input",type:"text",value:c.getChannelAsCssValue("hwb","b"),onInput:t[15]||(t[15]=e=>c.updateColorValue(e,"hwb","b"))},null,40,["id","value"])],8,["for"]),n.createVNode("label",{class:"vacp-color-input-label",for:`${a.id}-color-hwb-a`},[L,n.createVNode("input",{id:`${a.id}-color-hwb-a`,class:"vacp-color-input",type:"text",value:c.getChannelAsCssValue("hwb","a"),onInput:t[16]||(t[16]=e=>c.updateColorValue(e,"hwb","a"))},null,40,["id","value"])],8,["for"])])):"rgb"===r.activeFormat?(n.openBlock(),n.createBlock("div",j,[n.createVNode("label",{class:"vacp-color-input-label",for:`${a.id}-color-rgb-r`},[H,n.createVNode("input",{id:`${a.id}-color-rgb-r`,class:"vacp-color-input",type:"text",value:c.getChannelAsCssValue("rgb","r"),onInput:t[17]||(t[17]=e=>c.updateColorValue(e,"rgb","r"))},null,40,["id","value"])],8,["for"]),n.createVNode("label",{class:"vacp-color-input-label",for:`${a.id}-color-rgb-g`},[R,n.createVNode("input",{id:`${a.id}-color-rgb-g`,class:"vacp-color-input",type:"text",value:c.getChannelAsCssValue("rgb","g"),onInput:t[18]||(t[18]=e=>c.updateColorValue(e,"rgb","g"))},null,40,["id","value"])],8,["for"]),n.createVNode("label",{class:"vacp-color-input-label",for:`${a.id}-color-rgb-b`},[U,n.createVNode("input",{id:`${a.id}-color-rgb-b`,class:"vacp-color-input",type:"text",value:c.getChannelAsCssValue("rgb","b"),onInput:t[19]||(t[19]=e=>c.updateColorValue(e,"rgb","b"))},null,40,["id","value"])],8,["for"]),n.createVNode("label",{class:"vacp-color-input-label",for:`${a.id}-color-rgb-a`},[q,n.createVNode("input",{id:`${a.id}-color-rgb-a`,class:"vacp-color-input",type:"text",value:c.getChannelAsCssValue("rgb","a"),onInput:t[20]||(t[20]=e=>c.updateColorValue(e,"rgb","a"))},null,40,["id","value"])],8,["for"])])):"hex"===r.activeFormat?(n.openBlock(),n.createBlock("div",K,[n.createVNode("label",{class:"vacp-color-input-label",for:`${a.id}-color-hex`},[X,n.createVNode("input",{id:`${a.id}-color-hex`,class:"vacp-color-input",type:"text",value:r.colors.hex,onInput:t[21]||(t[21]=e=>c.updateColorValue(e,"hex"))},null,40,["id","value"])],8,["for"])])):n.createCommentVNode("",!0),a.visibleFormats.length>1?(n.openBlock(),n.createBlock("button",{key:4,class:"vacp-format-switch-button",type:"button",onClick:t[22]||(t[22]=(...e)=>c.switchFormat&&c.switchFormat(...e))},[n.renderSlot(e.$slots,"format-switch-button",{},(()=>[Y]))])):n.createCommentVNode("",!0)])],512)};var _={install(e){e.component("ColorPicker",V)}};e.ColorPicker=V,e.default=_,Object.defineProperty(e,"__esModule",{value:!0})}));

2

LICENSE.txt

@@ -1,2 +0,2 @@

Copyright 2020 Philipp Rudloff
Copyright 2021 Philipp Rudloff

@@ -3,0 +3,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

30

package.json
{
"name": "vue-accessible-color-picker",
"version": "1.1.2",
"version": "2.0.0",
"license": "MIT",

@@ -46,2 +46,5 @@ "description": "Accessible color picker component for Vue.js",

},
"peerDependencies": {
"vue": "^3.x"
},
"devDependencies": {

@@ -59,19 +62,22 @@ "@babel/core": "^7.12.10",

"@semantic-release/release-notes-generator": "^9.0.1",
"@types/jest": "^26.0.19",
"@vue/test-utils": "^1.1.2",
"@types/jest": "^26.0.20",
"@vue/compiler-sfc": "^3.0.5",
"@vue/test-utils": "^2.0.0-beta.14",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^26.6.3",
"eslint": "^7.16.0",
"eslint-plugin-vue": "^7.3.0",
"husky": "^4.3.6",
"eslint": "^7.18.0",
"eslint-plugin-vue": "^7.4.1",
"husky": "^4.3.8",
"jest": "^26.6.3",
"rollup": "^2.35.1",
"postcss": "^8.2.4",
"rollup": "^2.36.2",
"rollup-plugin-postcss": "^4.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-vue": "^5.1.9",
"semantic-release": "^17.3.0",
"rollup-plugin-vue": "^6.0.0",
"semantic-release": "^17.3.3",
"standard": "^16.0.3",
"vue": "^2.6.12",
"vue-jest": "^3.0.7",
"vue-template-compiler": "^2.6.12"
"typescript": "^4.1.3",
"vue": "^3.0.5",
"vue-jest": "^5.0.0-alpha.7"
}
}

10

README.md

@@ -76,8 +76,8 @@ # vue-accessible-color-picker

In your Vue project’s `main.js` (i.e. where you call `new Vue(…)`), import the `ColorPicker` component and register it with `Vue.component`.
In your Vue project’s `main.js` (i.e. where you call `new Vue(…)`), import the `ColorPicker` component and register it with `app.component`.
```js
import { ColorPickerPlugin } from 'vue-accessible-color-picker';
import { ColorPicker } from 'vue-accessible-color-picker';
Vue.component('ColorPickerPlugin', ColorPickerPlugin)
app.component('ColorPicker', ColorPicker)
```

@@ -88,5 +88,5 @@

```js
import { ColorPickerPlugin } from 'vue-accessible-color-picker/dist/vue-accessible-color-picker-unstyled';
import { ColorPicker } from 'vue-accessible-color-picker/dist/vue-accessible-color-picker-unstyled';
Vue.component('ColorPickerPlugin', ColorPickerPlugin)
app.component('ColorPicker', ColorPicker)
```

@@ -93,0 +93,0 @@

4

types/index.d.ts
export namespace VueAccessibleColorPicker {
export type VisibleColorFormat = 'hex' | 'hsl' | 'hwb' | 'rgb'
export type SupportedColorFormat = 'hex' | 'hsl' | 'hsv' | 'hwb' | 'rgb'
export type ColorFormat = 'hex' | 'hsl' | 'hsv' | 'hwb' | 'rgb'
export type ColorChannel = 'r' | 'g' | 'b' | 'h' | 's' | 'l' | 'v' | 'w'
export type ColorHex = string

@@ -9,0 +7,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc