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.0.1 to 1.1.0

types/index.d.ts

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 s(t){const e=t.replace(/^#/,""),o=([3,4].includes(e.length)?e.match(/.{1}/g).map(t=>t+t):e.match(/.{2}/g)).map(t=>parseInt(t,16)/255);return{r:o[0],g:o[1],b:o[2],a:4===o.length?o[3]:1}}function n(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 s;return s=0===o||1===e?0:(o-a)/Math.min(a,1-a),{h:r,s:s,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(s(t))},hsv:function(t){return h(s(t))},hwb:function(t){return d(s(t))},rgb:s},hsl:{hex:function(t){return v(n(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(n(t))},rgb:n},hsv:{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,hex:function(t){return v(i(t))}},hwb:{hex:function(t){return v(f(t))},hsl:function(t){return p(f(t))},hsv:u,rgb:f},rgb:{hsl:p,hsv:h,hwb:d,hex:v}};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 w(t){return!!t.startsWith("#")&&(!![3,4,6,8].includes(t.length-1)&&/^#[0-9A-Fa-f]+$/.test(t))}const y=["hex","hsl","hwb","rgb"];function _(t,e,o,r,a,s,n,l,i,c){"boolean"!=typeof n&&(i=l,l=n,n=!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),s?(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(s)},u._ssrRegister=p):e&&(p=n?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"},[t.showColorSpace?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._e(),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:[]},void 0,{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:()=>["hex","hsl","hwb","rgb"],validator:t=>t.length>0&&t.every(t=>y.includes(t))}},data:()=>({showColorSpace:!0,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,e){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,s=o-r.top,n={...this.getColorValue("hsv")};n.s=e(a/r.width,0,1),n.v=e(1-s/r.height,0,1),this.setColorValue(n,"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,s=this.getColorValue("hsv",r)+o*a*.01;this.setColorValue(e(s,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,s=e(parseFloat(o.value)+a*r*10,parseInt(o.min),parseInt(o.max));o.value=String(s-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(t===e)return!0;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(w(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(!w(t.target.value))return;r=t.target.value}else{r={...this.colors[e]};const s=a[e][o].from(t.target.value);if(Number.isNaN(s)||void 0===s)return;r[o]=s}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",e.hsl.h),t.style.setProperty("--vacp-hsl-s",e.hsl.s),t.style.setProperty("--vacp-hsl-l",e.hsl.l),t.style.setProperty("--vacp-hsl-a",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 `}}},void 0,!1,void 0,!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(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=([3,4].includes(e.length)?e.match(/.{1}/g).map(t=>t+t):e.match(/.{2}/g)).map(t=>parseInt(t,16)/255);return{r:o[0],g:o[1],b:o[2],a:4===o.length?o[3]:1}}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})}));

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=([3,4].includes(e.length)?e.match(/.{1}/g).map(t=>t+t):e.match(/.{2}/g)).map(t=>parseInt(t,16)/255);return{r:a[0],g:a[1],b:a[2],a:4===a.length?a[3]:1}}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:{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,hex:function(t){return v(s(t))}},hwb:{hex:function(t){return v(b(t))},hsl:function(t){return u(b(t))},hsv:p,rgb:b},rgb:{hsl:u,hsv:h,hwb:d,hex:v}};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:()=>["hex","hsl","hwb","rgb"],validator:t=>t.length>0&&t.every(t=>x.includes(t))}},data:()=>({showColorSpace:!0,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,e){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(t===e)return!0;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",e.hsl.h),t.style.setProperty("--vacp-hsl-s",e.hsl.s),t.style.setProperty("--vacp-hsl-l",e.hsl.l),t.style.setProperty("--vacp-hsl-a",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"},[t.showColorSpace?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._e(),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-7b51837d_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,void 0,!1,void 0,!1,A,void 0,void 0);function F(t){F.installed||(F.installed=!0,t.component("ColorPicker",T))}const S={install:F};"undefined"!=typeof window&&window.Vue&&"function"==typeof window.Vue.use?window.Vue.use(S):"undefined"!=typeof global&&global.Vue&&"function"==typeof global.Vue.use&&global.Vue.use(S),t.ColorPicker=T,t.default=S,t.install=F,Object.defineProperty(t,"__esModule",{value:!0})}));
!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=([3,4].includes(e.length)?e.match(/.{1}/g).map(t=>t+t):e.match(/.{2}/g)).map(t=>parseInt(t,16)/255);return{r:a[0],g:a[1],b:a[2],a:4===a.length?a[3]:1}}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})}));

49

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

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

"main": "dist/vue-accessible-color-picker.js",
"types": "types/index.d.ts",
"files": [
"dist/vue-accessible-color-picker.js",
"dist/vue-accessible-color-picker-unstyled.js"
"dist/*.js",
"types/*.d.ts"
],

@@ -41,29 +42,29 @@ "sideEffects": false,

"lint": "eslint --ext .js,.vue src",
"lint:fix": "eslint --ext .js,.vue src --fix",
"lint:fix": "npm run lint -- --fix",
"semantic-release": "semantic-release"
},
"devDependencies": {
"@babel/core": "^7.10.5",
"@babel/preset-env": "^7.10.4",
"@commitlint/cli": "^9.1.1",
"@commitlint/config-conventional": "^9.1.1",
"@rollup/plugin-babel": "^5.1.0",
"@semantic-release/github": "^7.0.7",
"@types/jest": "^26.0.7",
"@vue/test-utils": "^1.0.3",
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@commitlint/cli": "^11.0.0",
"@commitlint/config-conventional": "^11.0.0",
"@rollup/plugin-babel": "^5.2.2",
"@semantic-release/github": "^7.2.0",
"@types/jest": "^26.0.19",
"@vue/test-utils": "^1.1.2",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^26.1.0",
"eslint": "^7.5.0",
"eslint-plugin-vue": "^6.2.2",
"husky": "^4.2.5",
"jest": "^26.1.0",
"rollup": "^2.23.0",
"rollup-plugin-terser": "^6.1.0",
"babel-jest": "^26.6.3",
"eslint": "^7.16.0",
"eslint-plugin-vue": "^7.3.0",
"husky": "^4.3.6",
"jest": "^26.6.3",
"rollup": "^2.35.1",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-vue": "^5.1.9",
"semantic-release": "^17.1.1",
"standard": "^14.3.4",
"vue": "^2.6.11",
"vue-jest": "^3.0.6",
"vue-template-compiler": "^2.6.11"
"semantic-release": "^17.3.0",
"standard": "^16.0.3",
"vue": "^2.6.12",
"vue-jest": "^3.0.7",
"vue-template-compiler": "^2.6.12"
}
}
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