├── .gitignore
├── App.vue
├── LICENSE
├── README.md
├── deploy.sh
├── dist
    ├── vue-gpickr.common.js
    ├── vue-gpickr.common.js.map
    ├── vue-gpickr.umd.js
    ├── vue-gpickr.umd.js.map
    ├── vue-gpickr.umd.min.js
    └── vue-gpickr.umd.min.js.map
├── main.js
├── package-lock.json
├── package.json
├── scr.png
├── src
    ├── Gradient.js
    ├── LinearGradient.js
    ├── VueGpickr.vue
    └── index.js
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /docs
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="wrapper">
  3 |     <a
  4 |       class="github-fork-ribbon"
  5 |       href="https://github.com/insky/vue-gpickr"
  6 |       title="Fork me on GitHub"
  7 |     >Fork me on GitHub</a>
  8 | 
  9 |     <h1>vue-gpickr</h1>
 10 | 
 11 |     <vue-gpickr v-model="gradient" class="gpickr" />
 12 | 
 13 |     <br><br>
 14 |     <div class="text-left">
 15 |       {{ gradient.toString() }}
 16 |     </div>
 17 |     <pre class="text-left">{{ JSON.stringify(gradient.toRaw(), null, "  ") }}</pre>
 18 |   </div>
 19 | </template>
 20 | 
 21 | <script>
 22 | import VueGpickr from "./src/VueGpickr";
 23 | import LinearGradient from "./src/LinearGradient";
 24 | 
 25 | export default {
 26 |   components: {
 27 |     VueGpickr,
 28 |   },
 29 |   data() {
 30 |     const gradient = new LinearGradient({
 31 |       angle: 0,
 32 |       stops: [
 33 |         ["#0359b5", 0],
 34 |         ["#f6ce01", 1],
 35 |       ],
 36 |       limit: 5
 37 |     });
 38 | 
 39 |     return {
 40 |       gradient
 41 |     };
 42 |   },
 43 | };
 44 | </script>
 45 | 
 46 | <style scoped>
 47 | .wrapper {
 48 |   max-width: 430px;
 49 |   margin: 100px auto;
 50 |   text-align: center;
 51 | }
 52 | .wrapper::before {
 53 |   content: '';
 54 |   position: absolute;
 55 |   top: 0;
 56 |   left: 0;
 57 |   right: 0;
 58 |   min-height: 300px;
 59 |   background: linear-gradient(90deg, #0359b5ff 0%, #f6ce01ff 100%);
 60 |   opacity: 0.5;
 61 |   z-index: 0;
 62 | }
 63 | .gpickr {
 64 |   margin: 30px 0;
 65 | }
 66 | .text-left {
 67 |   text-align: left;
 68 | }
 69 | 
 70 | .github-fork-ribbon {
 71 |   width: 12.1em;
 72 |   height: 12.1em;
 73 |   position: absolute;
 74 |   overflow: hidden;
 75 |   top: 0;
 76 |   right: 0;
 77 |   z-index: 9999;
 78 |   pointer-events: none;
 79 |   font-size: 20px;
 80 |   text-decoration: none;
 81 |   text-indent: -999999px;
 82 | }
 83 | .github-fork-ribbon.fixed {
 84 |   position: fixed;
 85 | }
 86 | .github-fork-ribbon:before,
 87 | .github-fork-ribbon:after {
 88 |   position: absolute;
 89 |   display: block;
 90 |   width: 15.38em;
 91 |   height: 1.54em;
 92 |   top: 3.23em;
 93 |   right: -3.23em;
 94 |   -webkit-transform: rotate(45deg);
 95 |   -moz-transform: rotate(45deg);
 96 |   -ms-transform: rotate(45deg);
 97 |   -o-transform: rotate(45deg);
 98 |   transform: rotate(45deg);
 99 | }
100 | .github-fork-ribbon:before {
101 |   content: "";
102 |   padding: 0.38em 0;
103 |   background-color: #a00;
104 |   background-image: -webkit-gradient(
105 |     linear,
106 |     left top,
107 |     left bottom,
108 |     from(rgba(0, 0, 0, 0)),
109 |     to(rgba(0, 0, 0, 0.15))
110 |   );
111 |   background-image: -webkit-linear-gradient(
112 |     top,
113 |     rgba(0, 0, 0, 0),
114 |     rgba(0, 0, 0, 0.15)
115 |   );
116 |   background-image: -moz-linear-gradient(
117 |     top,
118 |     rgba(0, 0, 0, 0),
119 |     rgba(0, 0, 0, 0.15)
120 |   );
121 |   background-image: -ms-linear-gradient(
122 |     top,
123 |     rgba(0, 0, 0, 0),
124 |     rgba(0, 0, 0, 0.15)
125 |   );
126 |   background-image: -o-linear-gradient(
127 |     top,
128 |     rgba(0, 0, 0, 0),
129 |     rgba(0, 0, 0, 0.15)
130 |   );
131 |   background-image: linear-gradient(
132 |     to bottom,
133 |     rgba(0, 0, 0, 0),
134 |     rgba(0, 0, 0, 0.15)
135 |   );
136 |   -webkit-box-shadow: 0 0.15em 0.23em 0 rgba(0, 0, 0, 0.5);
137 |   -moz-box-shadow: 0 0.15em 0.23em 0 rgba(0, 0, 0, 0.5);
138 |   box-shadow: 0 0.15em 0.23em 0 rgba(0, 0, 0, 0.5);
139 |   pointer-events: auto;
140 | }
141 | .github-fork-ribbon:after {
142 |   content: attr(title);
143 |   color: #fff;
144 |   font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
145 |   line-height: 1.54em;
146 |   text-decoration: none;
147 |   text-shadow: 0 -0.08em rgba(0, 0, 0, 0.5);
148 |   text-align: center;
149 |   text-indent: 0;
150 |   padding: 0.15em 0;
151 |   margin: 0.15em 0;
152 |   border-width: 0.08em 0;
153 |   border-style: dotted;
154 |   border-color: #fff;
155 |   border-color: rgba(255, 255, 255, 0.7);
156 | }
157 | .github-fork-ribbon.left-top,
158 | .github-fork-ribbon.left-bottom {
159 |   right: auto;
160 |   left: 0;
161 | }
162 | .github-fork-ribbon.left-bottom,
163 | .github-fork-ribbon.right-bottom {
164 |   top: auto;
165 |   bottom: 0;
166 | }
167 | .github-fork-ribbon.left-top:before,
168 | .github-fork-ribbon.left-top:after,
169 | .github-fork-ribbon.left-bottom:before,
170 | .github-fork-ribbon.left-bottom:after {
171 |   right: auto;
172 |   left: -3.23em;
173 | }
174 | .github-fork-ribbon.left-bottom:before,
175 | .github-fork-ribbon.left-bottom:after,
176 | .github-fork-ribbon.right-bottom:before,
177 | .github-fork-ribbon.right-bottom:after {
178 |   top: auto;
179 |   bottom: 3.23em;
180 | }
181 | .github-fork-ribbon.left-top:before,
182 | .github-fork-ribbon.left-top:after,
183 | .github-fork-ribbon.right-bottom:before,
184 | .github-fork-ribbon.right-bottom:after {
185 |   -webkit-transform: rotate(-45deg);
186 |   -moz-transform: rotate(-45deg);
187 |   -ms-transform: rotate(-45deg);
188 |   -o-transform: rotate(-45deg);
189 |   transform: rotate(-45deg);
190 | }
191 | </style>
192 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Roman Zhbadynskyi
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-gpickr
 2 | 
 3 | [![forthebadge](https://forthebadge.com/images/badges/made-with-vue.svg)](https://forthebadge.com)
 4 | [![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)
 5 | 
 6 | Vue gradient picker component. Inspired by [gpickr](https://simonwep.github.io/gpickr) and [vue-color](https://xiaokaike.github.io/vue-color/)
 7 | 
 8 | > Vue 3 version. Lock your version on 0.4.2 to use with Vue 2
 9 | 
10 | ### [Demo](https://insky.github.io/vue-gpickr/)
11 |   
12 | ![vue-gpickr](./scr.png?raw=true "How it looks")   
13 |   
14 |   
15 | ### Usage
16 | ```
17 | npm i vue-gpickr
18 | ```
19 | 
20 | ```js
21 | <template>
22 |   <vue-gpickr v-model="gradient" />
23 | </template>
24 | 
25 | <script>
26 | import { VueGpickr, LinearGradient } from 'vue-gpickr';
27 | 
28 | const gradient = new LinearGradient({
29 |   angle: 0,
30 |   stops: [
31 |     ['#0359b5', 0],
32 |     ['#f6ce01', 1]
33 |   ]
34 | });
35 | 
36 | export default {
37 |   components: {
38 |     VueGpickr
39 |   },
40 |   data() {
41 |     return {
42 |       gradient
43 |     }
44 |   }
45 | };
46 | </script>
47 | ```
48 | 
49 | ### Additional Information
50 | 
51 | By using the code provided in this repository you agree with the following:
52 | 
53 | 1. Russia has illegally annexed Crimea in 2014 and brought the war in Donbas followed by a full-scale invasion of Ukraine in 2022.
54 | 2. Russia has brought sorrow and devastation to millions of Ukrainians, killed hundreds of innocent people, damaged thousands of buildings, and forced several million people to flee.
55 | 3. Putin khuylo!
56 | 


--------------------------------------------------------------------------------
/deploy.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env sh
 2 | 
 3 | set -e
 4 | npm run _deploy
 5 | 
 6 | cd docs
 7 | 
 8 | git init
 9 | git add -A
10 | git commit -m 'deploy'
11 | 
12 | git push -f git@github.com:insky/vue-gpickr.git master:gh-pages
13 | 
14 | cd -


--------------------------------------------------------------------------------
/dist/vue-gpickr.umd.min.js:
--------------------------------------------------------------------------------
1 | (function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["vue-gpickr"]=t(require("vue")):e["vue-gpickr"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(function(e){return function(){var t={9662:function(e,t,r){var n=r(614),o=r(6330),a=TypeError;e.exports=function(e){if(n(e))return e;throw a(o(e)+" is not a function")}},6077:function(e,t,r){var n=r(614),o=String,a=TypeError;e.exports=function(e){if("object"==typeof e||n(e))return e;throw a("Can't set "+o(e)+" as a prototype")}},9670:function(e,t,r){var n=r(111),o=String,a=TypeError;e.exports=function(e){if(n(e))return e;throw a(o(e)+" is not an object")}},1318:function(e,t,r){var n=r(5656),o=r(1400),a=r(6244),i=function(e){return function(t,r,i){var s,c=n(t),l=a(c),h=o(i,l);if(e&&r!=r){while(l>h)if(s=c[h++],s!=s)return!0}else for(;l>h;h++)if((e||h in c)&&c[h]===r)return e||h||0;return!e&&-1}};e.exports={includes:i(!0),indexOf:i(!1)}},4326:function(e,t,r){var n=r(1702),o=n({}.toString),a=n("".slice);e.exports=function(e){return a(o(e),8,-1)}},648:function(e,t,r){var n=r(1694),o=r(614),a=r(4326),i=r(5112),s=i("toStringTag"),c=Object,l="Arguments"==a(function(){return arguments}()),h=function(e,t){try{return e[t]}catch(r){}};e.exports=n?a:function(e){var t,r,n;return void 0===e?"Undefined":null===e?"Null":"string"==typeof(r=h(t=c(e),s))?r:l?a(t):"Object"==(n=a(t))&&o(t.callee)?"Arguments":n}},7741:function(e,t,r){var n=r(1702),o=Error,a=n("".replace),i=function(e){return String(o(e).stack)}("zxcasd"),s=/\n\s*at [^:]*:[^\n]*/,c=s.test(i);e.exports=function(e,t){if(c&&"string"==typeof e&&!o.prepareStackTrace)while(t--)e=a(e,s,"");return e}},9920:function(e,t,r){var n=r(2597),o=r(3887),a=r(1236),i=r(3070);e.exports=function(e,t,r){for(var s=o(t),c=i.f,l=a.f,h=0;h<s.length;h++){var u=s[h];n(e,u)||r&&n(r,u)||c(e,u,l(t,u))}}},8880:function(e,t,r){var n=r(9781),o=r(3070),a=r(9114);e.exports=n?function(e,t,r){return o.f(e,t,a(1,r))}:function(e,t,r){return e[t]=r,e}},9114:function(e){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},8052:function(e,t,r){var n=r(614),o=r(3070),a=r(6339),i=r(3072);e.exports=function(e,t,r,s){s||(s={});var c=s.enumerable,l=void 0!==s.name?s.name:t;if(n(r)&&a(r,l,s),s.global)c?e[t]=r:i(t,r);else{try{s.unsafe?e[t]&&(c=!0):delete e[t]}catch(h){}c?e[t]=r:o.f(e,t,{value:r,enumerable:!1,configurable:!s.nonConfigurable,writable:!s.nonWritable})}return e}},3072:function(e,t,r){var n=r(7854),o=Object.defineProperty;e.exports=function(e,t){try{o(n,e,{value:t,configurable:!0,writable:!0})}catch(r){n[e]=t}return t}},9781:function(e,t,r){var n=r(7293);e.exports=!n((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},317:function(e,t,r){var n=r(7854),o=r(111),a=n.document,i=o(a)&&o(a.createElement);e.exports=function(e){return i?a.createElement(e):{}}},8113:function(e,t,r){var n=r(5005);e.exports=n("navigator","userAgent")||""},7392:function(e,t,r){var n,o,a=r(7854),i=r(8113),s=a.process,c=a.Deno,l=s&&s.versions||c&&c.version,h=l&&l.v8;h&&(n=h.split("."),o=n[0]>0&&n[0]<4?1:+(n[0]+n[1])),!o&&i&&(n=i.match(/Edge\/(\d+)/),(!n||n[1]>=74)&&(n=i.match(/Chrome\/(\d+)/),n&&(o=+n[1]))),e.exports=o},748:function(e){e.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},2914:function(e,t,r){var n=r(7293),o=r(9114);e.exports=!n((function(){var e=Error("a");return!("stack"in e)||(Object.defineProperty(e,"stack",o(1,7)),7!==e.stack)}))},2109:function(e,t,r){var n=r(7854),o=r(1236).f,a=r(8880),i=r(8052),s=r(3072),c=r(9920),l=r(4705);e.exports=function(e,t){var r,h,u,p,d,f,g=e.target,v=e.global,b=e.stat;if(h=v?n:b?n[g]||s(g,{}):(n[g]||{}).prototype,h)for(u in t){if(d=t[u],e.dontCallGetSet?(f=o(h,u),p=f&&f.value):p=h[u],r=l(v?u:g+(b?".":"#")+u,e.forced),!r&&void 0!==p){if(typeof d==typeof p)continue;c(d,p)}(e.sham||p&&p.sham)&&a(d,"sham",!0),i(h,u,d,e)}}},7293:function(e){e.exports=function(e){try{return!!e()}catch(t){return!0}}},2104:function(e,t,r){var n=r(4374),o=Function.prototype,a=o.apply,i=o.call;e.exports="object"==typeof Reflect&&Reflect.apply||(n?i.bind(a):function(){return i.apply(a,arguments)})},4374:function(e,t,r){var n=r(7293);e.exports=!n((function(){var e=function(){}.bind();return"function"!=typeof e||e.hasOwnProperty("prototype")}))},6916:function(e,t,r){var n=r(4374),o=Function.prototype.call;e.exports=n?o.bind(o):function(){return o.apply(o,arguments)}},6530:function(e,t,r){var n=r(9781),o=r(2597),a=Function.prototype,i=n&&Object.getOwnPropertyDescriptor,s=o(a,"name"),c=s&&"something"===function(){}.name,l=s&&(!n||n&&i(a,"name").configurable);e.exports={EXISTS:s,PROPER:c,CONFIGURABLE:l}},1702:function(e,t,r){var n=r(4374),o=Function.prototype,a=o.bind,i=o.call,s=n&&a.bind(i,i);e.exports=n?function(e){return e&&s(e)}:function(e){return e&&function(){return i.apply(e,arguments)}}},5005:function(e,t,r){var n=r(7854),o=r(614),a=function(e){return o(e)?e:void 0};e.exports=function(e,t){return arguments.length<2?a(n[e]):n[e]&&n[e][t]}},8173:function(e,t,r){var n=r(9662);e.exports=function(e,t){var r=e[t];return null==r?void 0:n(r)}},7854:function(e,t,r){var n=function(e){return e&&e.Math==Math&&e};e.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof r.g&&r.g)||function(){return this}()||Function("return this")()},2597:function(e,t,r){var n=r(1702),o=r(7908),a=n({}.hasOwnProperty);e.exports=Object.hasOwn||function(e,t){return a(o(e),t)}},3501:function(e){e.exports={}},4664:function(e,t,r){var n=r(9781),o=r(7293),a=r(317);e.exports=!n&&!o((function(){return 7!=Object.defineProperty(a("div"),"a",{get:function(){return 7}}).a}))},8361:function(e,t,r){var n=r(1702),o=r(7293),a=r(4326),i=Object,s=n("".split);e.exports=o((function(){return!i("z").propertyIsEnumerable(0)}))?function(e){return"String"==a(e)?s(e,""):i(e)}:i},9587:function(e,t,r){var n=r(614),o=r(111),a=r(7674);e.exports=function(e,t,r){var i,s;return a&&n(i=t.constructor)&&i!==r&&o(s=i.prototype)&&s!==r.prototype&&a(e,s),e}},2788:function(e,t,r){var n=r(1702),o=r(614),a=r(5465),i=n(Function.toString);o(a.inspectSource)||(a.inspectSource=function(e){return i(e)}),e.exports=a.inspectSource},8340:function(e,t,r){var n=r(111),o=r(8880);e.exports=function(e,t){n(t)&&"cause"in t&&o(e,"cause",t.cause)}},9909:function(e,t,r){var n,o,a,i=r(8536),s=r(7854),c=r(1702),l=r(111),h=r(8880),u=r(2597),p=r(5465),d=r(6200),f=r(3501),g="Object already initialized",v=s.TypeError,b=s.WeakMap,m=function(e){return a(e)?o(e):n(e,{})},x=function(e){return function(t){var r;if(!l(t)||(r=o(t)).type!==e)throw v("Incompatible receiver, "+e+" required");return r}};if(i||p.state){var w=p.state||(p.state=new b),k=c(w.get),y=c(w.has),C=c(w.set);n=function(e,t){if(y(w,e))throw new v(g);return t.facade=e,C(w,e,t),t},o=function(e){return k(w,e)||{}},a=function(e){return y(w,e)}}else{var _=d("state");f[_]=!0,n=function(e,t){if(u(e,_))throw new v(g);return t.facade=e,h(e,_,t),t},o=function(e){return u(e,_)?e[_]:{}},a=function(e){return u(e,_)}}e.exports={set:n,get:o,has:a,enforce:m,getterFor:x}},614:function(e){e.exports=function(e){return"function"==typeof e}},4705:function(e,t,r){var n=r(7293),o=r(614),a=/#|\.prototype\./,i=function(e,t){var r=c[s(e)];return r==h||r!=l&&(o(t)?n(t):!!t)},s=i.normalize=function(e){return String(e).replace(a,".").toLowerCase()},c=i.data={},l=i.NATIVE="N",h=i.POLYFILL="P";e.exports=i},111:function(e,t,r){var n=r(614);e.exports=function(e){return"object"==typeof e?null!==e:n(e)}},1913:function(e){e.exports=!1},2190:function(e,t,r){var n=r(5005),o=r(614),a=r(7976),i=r(3307),s=Object;e.exports=i?function(e){return"symbol"==typeof e}:function(e){var t=n("Symbol");return o(t)&&a(t.prototype,s(e))}},6244:function(e,t,r){var n=r(7466);e.exports=function(e){return n(e.length)}},6339:function(e,t,r){var n=r(7293),o=r(614),a=r(2597),i=r(9781),s=r(6530).CONFIGURABLE,c=r(2788),l=r(9909),h=l.enforce,u=l.get,p=Object.defineProperty,d=i&&!n((function(){return 8!==p((function(){}),"length",{value:8}).length})),f=String(String).split("String"),g=e.exports=function(e,t,r){"Symbol("===String(t).slice(0,7)&&(t="["+String(t).replace(/^Symbol\(([^)]*)\)/,"$1")+"]"),r&&r.getter&&(t="get "+t),r&&r.setter&&(t="set "+t),(!a(e,"name")||s&&e.name!==t)&&(i?p(e,"name",{value:t,configurable:!0}):e.name=t),d&&r&&a(r,"arity")&&e.length!==r.arity&&p(e,"length",{value:r.arity});try{r&&a(r,"constructor")&&r.constructor?i&&p(e,"prototype",{writable:!1}):e.prototype&&(e.prototype=void 0)}catch(o){}var n=h(e);return a(n,"source")||(n.source=f.join("string"==typeof t?t:"")),e};Function.prototype.toString=g((function(){return o(this)&&u(this).source||c(this)}),"toString")},4758:function(e){var t=Math.ceil,r=Math.floor;e.exports=Math.trunc||function(e){var n=+e;return(n>0?r:t)(n)}},133:function(e,t,r){var n=r(7392),o=r(7293);e.exports=!!Object.getOwnPropertySymbols&&!o((function(){var e=Symbol();return!String(e)||!(Object(e)instanceof Symbol)||!Symbol.sham&&n&&n<41}))},8536:function(e,t,r){var n=r(7854),o=r(614),a=r(2788),i=n.WeakMap;e.exports=o(i)&&/native code/.test(a(i))},6277:function(e,t,r){var n=r(1340);e.exports=function(e,t){return void 0===e?arguments.length<2?"":t:n(e)}},3070:function(e,t,r){var n=r(9781),o=r(4664),a=r(3353),i=r(9670),s=r(4948),c=TypeError,l=Object.defineProperty,h=Object.getOwnPropertyDescriptor,u="enumerable",p="configurable",d="writable";t.f=n?a?function(e,t,r){if(i(e),t=s(t),i(r),"function"===typeof e&&"prototype"===t&&"value"in r&&d in r&&!r[d]){var n=h(e,t);n&&n[d]&&(e[t]=r.value,r={configurable:p in r?r[p]:n[p],enumerable:u in r?r[u]:n[u],writable:!1})}return l(e,t,r)}:l:function(e,t,r){if(i(e),t=s(t),i(r),o)try{return l(e,t,r)}catch(n){}if("get"in r||"set"in r)throw c("Accessors not supported");return"value"in r&&(e[t]=r.value),e}},1236:function(e,t,r){var n=r(9781),o=r(6916),a=r(5296),i=r(9114),s=r(5656),c=r(4948),l=r(2597),h=r(4664),u=Object.getOwnPropertyDescriptor;t.f=n?u:function(e,t){if(e=s(e),t=c(t),h)try{return u(e,t)}catch(r){}if(l(e,t))return i(!o(a.f,e,t),e[t])}},8006:function(e,t,r){var n=r(6324),o=r(748),a=o.concat("length","prototype");t.f=Object.getOwnPropertyNames||function(e){return n(e,a)}},5181:function(e,t){t.f=Object.getOwnPropertySymbols},7976:function(e,t,r){var n=r(1702);e.exports=n({}.isPrototypeOf)},6324:function(e,t,r){var n=r(1702),o=r(2597),a=r(5656),i=r(1318).indexOf,s=r(3501),c=n([].push);e.exports=function(e,t){var r,n=a(e),l=0,h=[];for(r in n)!o(s,r)&&o(n,r)&&c(h,r);while(t.length>l)o(n,r=t[l++])&&(~i(h,r)||c(h,r));return h}},5296:function(e,t){"use strict";var r={}.propertyIsEnumerable,n=Object.getOwnPropertyDescriptor,o=n&&!r.call({1:2},1);t.f=o?function(e){var t=n(this,e);return!!t&&t.enumerable}:r},7674:function(e,t,r){var n=r(1702),o=r(9670),a=r(6077);e.exports=Object.setPrototypeOf||("__proto__"in{}?function(){var e,t=!1,r={};try{e=n(Object.getOwnPropertyDescriptor(Object.prototype,"__proto__").set),e(r,[]),t=r instanceof Array}catch(i){}return function(r,n){return o(r),a(n),t?e(r,n):r.__proto__=n,r}}():void 0)},2140:function(e,t,r){var n=r(6916),o=r(614),a=r(111),i=TypeError;e.exports=function(e,t){var r,s;if("string"===t&&o(r=e.toString)&&!a(s=n(r,e)))return s;if(o(r=e.valueOf)&&!a(s=n(r,e)))return s;if("string"!==t&&o(r=e.toString)&&!a(s=n(r,e)))return s;throw i("Can't convert object to primitive value")}},3887:function(e,t,r){var n=r(5005),o=r(1702),a=r(8006),i=r(5181),s=r(9670),c=o([].concat);e.exports=n("Reflect","ownKeys")||function(e){var t=a.f(s(e)),r=i.f;return r?c(t,r(e)):t}},2626:function(e,t,r){var n=r(3070).f;e.exports=function(e,t,r){r in e||n(e,r,{configurable:!0,get:function(){return t[r]},set:function(e){t[r]=e}})}},4488:function(e){var t=TypeError;e.exports=function(e){if(void 0==e)throw t("Can't call method on "+e);return e}},6200:function(e,t,r){var n=r(2309),o=r(9711),a=n("keys");e.exports=function(e){return a[e]||(a[e]=o(e))}},5465:function(e,t,r){var n=r(7854),o=r(3072),a="__core-js_shared__",i=n[a]||o(a,{});e.exports=i},2309:function(e,t,r){var n=r(1913),o=r(5465);(e.exports=function(e,t){return o[e]||(o[e]=void 0!==t?t:{})})("versions",[]).push({version:"3.24.1",mode:n?"pure":"global",copyright:"© 2014-2022 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.24.1/LICENSE",source:"https://github.com/zloirock/core-js"})},1400:function(e,t,r){var n=r(9303),o=Math.max,a=Math.min;e.exports=function(e,t){var r=n(e);return r<0?o(r+t,0):a(r,t)}},5656:function(e,t,r){var n=r(8361),o=r(4488);e.exports=function(e){return n(o(e))}},9303:function(e,t,r){var n=r(4758);e.exports=function(e){var t=+e;return t!==t||0===t?0:n(t)}},7466:function(e,t,r){var n=r(9303),o=Math.min;e.exports=function(e){return e>0?o(n(e),9007199254740991):0}},7908:function(e,t,r){var n=r(4488),o=Object;e.exports=function(e){return o(n(e))}},7593:function(e,t,r){var n=r(6916),o=r(111),a=r(2190),i=r(8173),s=r(2140),c=r(5112),l=TypeError,h=c("toPrimitive");e.exports=function(e,t){if(!o(e)||a(e))return e;var r,c=i(e,h);if(c){if(void 0===t&&(t="default"),r=n(c,e,t),!o(r)||a(r))return r;throw l("Can't convert object to primitive value")}return void 0===t&&(t="number"),s(e,t)}},4948:function(e,t,r){var n=r(7593),o=r(2190);e.exports=function(e){var t=n(e,"string");return o(t)?t:t+""}},1694:function(e,t,r){var n=r(5112),o=n("toStringTag"),a={};a[o]="z",e.exports="[object z]"===String(a)},1340:function(e,t,r){var n=r(648),o=String;e.exports=function(e){if("Symbol"===n(e))throw TypeError("Cannot convert a Symbol value to a string");return o(e)}},6330:function(e){var t=String;e.exports=function(e){try{return t(e)}catch(r){return"Object"}}},9711:function(e,t,r){var n=r(1702),o=0,a=Math.random(),i=n(1..toString);e.exports=function(e){return"Symbol("+(void 0===e?"":e)+")_"+i(++o+a,36)}},3307:function(e,t,r){var n=r(133);e.exports=n&&!Symbol.sham&&"symbol"==typeof Symbol.iterator},3353:function(e,t,r){var n=r(9781),o=r(7293);e.exports=n&&o((function(){return 42!=Object.defineProperty((function(){}),"prototype",{value:42,writable:!1}).prototype}))},5112:function(e,t,r){var n=r(7854),o=r(2309),a=r(2597),i=r(9711),s=r(133),c=r(3307),l=o("wks"),h=n.Symbol,u=h&&h["for"],p=c?h:h&&h.withoutSetter||i;e.exports=function(e){if(!a(l,e)||!s&&"string"!=typeof l[e]){var t="Symbol."+e;s&&a(h,e)?l[e]=h[e]:l[e]=c&&u?u(t):p(t)}return l[e]}},9191:function(e,t,r){"use strict";var n=r(5005),o=r(2597),a=r(8880),i=r(7976),s=r(7674),c=r(9920),l=r(2626),h=r(9587),u=r(6277),p=r(8340),d=r(7741),f=r(2914),g=r(9781),v=r(1913);e.exports=function(e,t,r,b){var m="stackTraceLimit",x=b?2:1,w=e.split("."),k=w[w.length-1],y=n.apply(null,w);if(y){var C=y.prototype;if(!v&&o(C,"cause")&&delete C.cause,!r)return y;var _=n("Error"),E=t((function(e,t){var r=u(b?t:e,void 0),n=b?new y(e):new y;return void 0!==r&&a(n,"message",r),f&&a(n,"stack",d(n.stack,2)),this&&i(C,this)&&h(n,this,E),arguments.length>x&&p(n,arguments[x]),n}));if(E.prototype=C,"Error"!==k?s?s(E,_):c(E,_,{name:!0}):g&&m in y&&(l(E,y,m),l(E,y,"prepareStackTrace")),c(E,y),!v)try{C.name!==k&&a(C,"name",k),C.constructor=E}catch(S){}return E}}},1703:function(e,t,r){var n=r(2109),o=r(7854),a=r(2104),i=r(9191),s="WebAssembly",c=o[s],l=7!==Error("e",{cause:7}).cause,h=function(e,t){var r={};r[e]=i(e,t,l),n({global:!0,constructor:!0,arity:1,forced:l},r)},u=function(e,t){if(c&&c[e]){var r={};r[e]=i(s+"."+e,t,l),n({target:s,stat:!0,constructor:!0,arity:1,forced:l},r)}};h("Error",(function(e){return function(t){return a(e,this,arguments)}})),h("EvalError",(function(e){return function(t){return a(e,this,arguments)}})),h("RangeError",(function(e){return function(t){return a(e,this,arguments)}})),h("ReferenceError",(function(e){return function(t){return a(e,this,arguments)}})),h("SyntaxError",(function(e){return function(t){return a(e,this,arguments)}})),h("TypeError",(function(e){return function(t){return a(e,this,arguments)}})),h("URIError",(function(e){return function(t){return a(e,this,arguments)}})),u("CompileError",(function(e){return function(t){return a(e,this,arguments)}})),u("LinkError",(function(e){return function(t){return a(e,this,arguments)}})),u("RuntimeError",(function(e){return function(t){return a(e,this,arguments)}}))},9658:function(e,t,r){"use strict";r.r(t);var n=r(8081),o=r.n(n),a=r(3645),i=r.n(a),s=r(1667),c=r.n(s),l=new URL(r(6658),r.b),h=i()(o()),u=c()(l);h.push([e.id,"[data-v-31278663] .vc-sketch{box-shadow:none;padding:10px}[data-v-31278663] .vc-sketch .vc-sketch-presets{display:none}[data-v-31278663] .vc-sketch .vc-sketch-saturation-wrap{overflow:visible}[data-v-31278663] .vc-sketch .vc-saturation-pointer{margin-top:-2px}[data-v-31278663] .vc-sketch .vc-sketch-field input{text-align:center;padding:4px 0 3px}.vue-gpickr[data-v-31278663]{position:relative;display:inline-flex;flex-direction:row;background:#fff;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 8px 16px rgba(0,0,0,.15)}.vue-gpickr .vue-gpickr-inner-container[data-v-31278663]{padding:10px;padding-left:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-preview-container[data-v-31278663]{width:200px;height:150px;background-image:url("+u+");background-size:10px;position:relative}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-preview-container .vue-gpickr-preview[data-v-31278663]{position:absolute;top:0;bottom:0;left:0;right:0}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-stops-container[data-v-31278663]{position:relative}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-stops-container .vue-gpickr-stops-preview-container[data-v-31278663]{width:200px;height:24px;background-image:url("+u+');background-size:10px;position:relative;margin-top:4px;border-radius:2px}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-stops-container .vue-gpickr-stops-preview-container .vue-gpickr-stops-preview[data-v-31278663]{position:absolute;top:0;bottom:0;left:0;right:0;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),inset 0 0 4px rgba(0,0,0,.25)}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-stops-container .vue-gpickr-stop[data-v-31278663]{position:absolute;bottom:0;width:12px;height:12px;transform:translate(-6px,6px);display:flex;justify-content:center;align-items:center;cursor:pointer}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-stops-container .vue-gpickr-stop[data-v-31278663]:before{content:"";width:4px;height:4px;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);border-radius:50%;background:currentColor}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-stops-container .vue-gpickr-stop.active[data-v-31278663]{z-index:3}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-stops-container .vue-gpickr-stop.active[data-v-31278663]:before{content:"";box-shadow:0 0 0 2.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 3px rgba(0,0,0,.4);width:6px;height:6px}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-controls-container[data-v-31278663]{margin-top:8px;display:flex;font-size:0}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-controls-container .vue-gpickr-slider-container[data-v-31278663]{flex-grow:1}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-controls-container .vue-gpickr-slider-container input[data-v-31278663]{box-sizing:border-box;width:100%;height:19px;margin:0 2px;padding:0;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-controls-container .vue-gpickr-slider-container input[data-v-31278663]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;width:5px;border-radius:1px;height:10px;border:0;box-shadow:0 0 2px rgba(0,0,0,.6),inset 0 0 0 .5px rgba(0,0,0,.4);background:#fff;z-index:2}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-controls-container .vue-gpickr-slider-container input[data-v-31278663]::-moz-range-thumb{cursor:pointer;width:5px;border-radius:1px;height:10px;border:0;box-shadow:0 0 2px rgba(0,0,0,.6),inset 0 0 0 .5px rgba(0,0,0,.4);background:#fff}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-controls-container .vue-gpickr-slider-container input[data-v-31278663]::-ms-thumb{cursor:pointer;width:5px;border-radius:1px;height:10px;border:0;box-shadow:0 0 2px rgba(0,0,0,.6),inset 0 0 0 .5px rgba(0,0,0,.4);background:#fff}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-controls-container .vue-gpickr-slider-container input[data-v-31278663]::-webkit-slider-runnable-track{width:100%;height:10px;cursor:pointer;background:rgba(0,0,0,.05);border:0;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);z-index:1}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-controls-container .vue-gpickr-slider-container input[data-v-31278663]::-moz-range-track{width:100%;height:10px;cursor:pointer;background:rgba(0,0,0,.05);border:0;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-controls-container .vue-gpickr-slider-container input[data-v-31278663]::-ms-track{width:100%;height:10px;cursor:pointer;background:transparent;border-color:transparent;border-width:16px 0;color:transparent}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-controls-container .vue-gpickr-slider-container input[data-v-31278663]::-ms-fill-lower,.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-controls-container .vue-gpickr-slider-container input[data-v-31278663]::-ms-fill-upper{border:0;background:rgba(0,0,0,.05);border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-controls-container .vue-gpickr-input-container[data-v-31278663]{width:30px;margin-left:8px}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-controls-container .vue-gpickr-input-container input[data-v-31278663]{text-align:center;box-sizing:border-box;width:100%;padding:4px 0 3px;border:none;outline:none;box-shadow:inset 0 0 0 1px #ccc;font-size:10px}.vue-gpickr .vue-gpickr-inner-container .vue-gpickr-controls-container .label[data-v-31278663]{text-align:center;font-size:11px;color:#222;padding-top:3px;padding-bottom:4px;text-transform:capitalize}@media(max-width:430px){.vue-gpickr[data-v-31278663]{flex-direction:column}.vue-gpickr .vue-gpickr-inner-container[data-v-31278663]{padding-left:10px;padding-top:0}}',""]),t["default"]=h},3645:function(e){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var r="",n="undefined"!==typeof t[5];return t[4]&&(r+="@supports (".concat(t[4],") {")),t[2]&&(r+="@media ".concat(t[2]," {")),n&&(r+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),r+=e(t),n&&(r+="}"),t[2]&&(r+="}"),t[4]&&(r+="}"),r})).join("")},t.i=function(e,r,n,o,a){"string"===typeof e&&(e=[[null,e,void 0]]);var i={};if(n)for(var s=0;s<this.length;s++){var c=this[s][0];null!=c&&(i[c]=!0)}for(var l=0;l<e.length;l++){var h=[].concat(e[l]);n&&i[h[0]]||("undefined"!==typeof a&&("undefined"===typeof h[5]||(h[1]="@layer".concat(h[5].length>0?" ".concat(h[5]):""," {").concat(h[1],"}")),h[5]=a),r&&(h[2]?(h[1]="@media ".concat(h[2]," {").concat(h[1],"}"),h[2]=r):h[2]=r),o&&(h[4]?(h[1]="@supports (".concat(h[4],") {").concat(h[1],"}"),h[4]=o):h[4]="".concat(o)),t.push(h))}},t}},1667:function(e){"use strict";e.exports=function(e,t){return t||(t={}),e?(e=String(e.__esModule?e.default:e),/^['"].*['"]$/.test(e)&&(e=e.slice(1,-1)),t.hash&&(e+=t.hash),/["'() \t\n]|(%20)/.test(e)||t.needQuotes?'"'.concat(e.replace(/"/g,'\\"').replace(/\n/g,"\\n"),'"'):e):e}},8081:function(e){"use strict";e.exports=function(e){return e[1]}},7621:function(e,t,r){var n;(function(o){var a=/^\s+/,i=/\s+$/,s=0,c=o.round,l=o.min,h=o.max,u=o.random;function p(e,t){if(e=e||"",t=t||{},e instanceof p)return e;if(!(this instanceof p))return new p(e,t);var r=d(e);this._originalInput=e,this._r=r.r,this._g=r.g,this._b=r.b,this._a=r.a,this._roundA=c(100*this._a)/100,this._format=t.format||r.format,this._gradientType=t.gradientType,this._r<1&&(this._r=c(this._r)),this._g<1&&(this._g=c(this._g)),this._b<1&&(this._b=c(this._b)),this._ok=r.ok,this._tc_id=s++}function d(e){var t={r:0,g:0,b:0},r=1,n=null,o=null,a=null,i=!1,s=!1;return"string"==typeof e&&(e=K(e)),"object"==typeof e&&(Y(e.r)&&Y(e.g)&&Y(e.b)?(t=f(e.r,e.g,e.b),i=!0,s="%"===String(e.r).substr(-1)?"prgb":"rgb"):Y(e.h)&&Y(e.s)&&Y(e.v)?(n=q(e.s),o=q(e.v),t=m(e.h,n,o),i=!0,s="hsv"):Y(e.h)&&Y(e.s)&&Y(e.l)&&(n=q(e.s),a=q(e.l),t=v(e.h,n,a),i=!0,s="hsl"),e.hasOwnProperty("a")&&(r=e.a)),r=D(r),{ok:i,format:e.format||s,r:l(255,h(t.r,0)),g:l(255,h(t.g,0)),b:l(255,h(t.b,0)),a:r}}function f(e,t,r){return{r:255*T(e,255),g:255*T(t,255),b:255*T(r,255)}}function g(e,t,r){e=T(e,255),t=T(t,255),r=T(r,255);var n,o,a=h(e,t,r),i=l(e,t,r),s=(a+i)/2;if(a==i)n=o=0;else{var c=a-i;switch(o=s>.5?c/(2-a-i):c/(a+i),a){case e:n=(t-r)/c+(t<r?6:0);break;case t:n=(r-e)/c+2;break;case r:n=(e-t)/c+4;break}n/=6}return{h:n,s:o,l:s}}function v(e,t,r){var n,o,a;function i(e,t,r){return r<0&&(r+=1),r>1&&(r-=1),r<1/6?e+6*(t-e)*r:r<.5?t:r<2/3?e+(t-e)*(2/3-r)*6:e}if(e=T(e,360),t=T(t,100),r=T(r,100),0===t)n=o=a=r;else{var s=r<.5?r*(1+t):r+t-r*t,c=2*r-s;n=i(c,s,e+1/3),o=i(c,s,e),a=i(c,s,e-1/3)}return{r:255*n,g:255*o,b:255*a}}function b(e,t,r){e=T(e,255),t=T(t,255),r=T(r,255);var n,o,a=h(e,t,r),i=l(e,t,r),s=a,c=a-i;if(o=0===a?0:c/a,a==i)n=0;else{switch(a){case e:n=(t-r)/c+(t<r?6:0);break;case t:n=(r-e)/c+2;break;case r:n=(e-t)/c+4;break}n/=6}return{h:n,s:o,v:s}}function m(e,t,r){e=6*T(e,360),t=T(t,100),r=T(r,100);var n=o.floor(e),a=e-n,i=r*(1-t),s=r*(1-a*t),c=r*(1-(1-a)*t),l=n%6,h=[r,s,i,i,c,r][l],u=[c,r,r,s,i,i][l],p=[i,i,c,r,r,s][l];return{r:255*h,g:255*u,b:255*p}}function x(e,t,r,n){var o=[U(c(e).toString(16)),U(c(t).toString(16)),U(c(r).toString(16))];return n&&o[0].charAt(0)==o[0].charAt(1)&&o[1].charAt(0)==o[1].charAt(1)&&o[2].charAt(0)==o[2].charAt(1)?o[0].charAt(0)+o[1].charAt(0)+o[2].charAt(0):o.join("")}function w(e,t,r,n,o){var a=[U(c(e).toString(16)),U(c(t).toString(16)),U(c(r).toString(16)),U(W(n))];return o&&a[0].charAt(0)==a[0].charAt(1)&&a[1].charAt(0)==a[1].charAt(1)&&a[2].charAt(0)==a[2].charAt(1)&&a[3].charAt(0)==a[3].charAt(1)?a[0].charAt(0)+a[1].charAt(0)+a[2].charAt(0)+a[3].charAt(0):a.join("")}function k(e,t,r,n){var o=[U(W(n)),U(c(e).toString(16)),U(c(t).toString(16)),U(c(r).toString(16))];return o.join("")}function y(e,t){t=0===t?0:t||10;var r=p(e).toHsl();return r.s-=t/100,r.s=H(r.s),p(r)}function C(e,t){t=0===t?0:t||10;var r=p(e).toHsl();return r.s+=t/100,r.s=H(r.s),p(r)}function _(e){return p(e).desaturate(100)}function E(e,t){t=0===t?0:t||10;var r=p(e).toHsl();return r.l+=t/100,r.l=H(r.l),p(r)}function S(e,t){t=0===t?0:t||10;var r=p(e).toRgb();return r.r=h(0,l(255,r.r-c(-t/100*255))),r.g=h(0,l(255,r.g-c(-t/100*255))),r.b=h(0,l(255,r.b-c(-t/100*255))),p(r)}function N(e,t){t=0===t?0:t||10;var r=p(e).toHsl();return r.l-=t/100,r.l=H(r.l),p(r)}function A(e,t){var r=p(e).toHsl(),n=(r.h+t)%360;return r.h=n<0?360+n:n,p(r)}function V(e){var t=p(e).toHsl();return t.h=(t.h+180)%360,p(t)}function B(e){var t=p(e).toHsl(),r=t.h;return[p(e),p({h:(r+120)%360,s:t.s,l:t.l}),p({h:(r+240)%360,s:t.s,l:t.l})]}function F(e){var t=p(e).toHsl(),r=t.h;return[p(e),p({h:(r+90)%360,s:t.s,l:t.l}),p({h:(r+180)%360,s:t.s,l:t.l}),p({h:(r+270)%360,s:t.s,l:t.l})]}function M(e){var t=p(e).toHsl(),r=t.h;return[p(e),p({h:(r+72)%360,s:t.s,l:t.l}),p({h:(r+216)%360,s:t.s,l:t.l})]}function L(e,t,r){t=t||6,r=r||30;var n=p(e).toHsl(),o=360/r,a=[p(e)];for(n.h=(n.h-(o*t>>1)+720)%360;--t;)n.h=(n.h+o)%360,a.push(p(n));return a}function z(e,t){t=t||6;var r=p(e).toHsv(),n=r.h,o=r.s,a=r.v,i=[],s=1/t;while(t--)i.push(p({h:n,s:o,v:a})),a=(a+s)%1;return i}p.prototype={isDark:function(){return this.getBrightness()<128},isLight:function(){return!this.isDark()},isValid:function(){return this._ok},getOriginalInput:function(){return this._originalInput},getFormat:function(){return this._format},getAlpha:function(){return this._a},getBrightness:function(){var e=this.toRgb();return(299*e.r+587*e.g+114*e.b)/1e3},getLuminance:function(){var e,t,r,n,a,i,s=this.toRgb();return e=s.r/255,t=s.g/255,r=s.b/255,n=e<=.03928?e/12.92:o.pow((e+.055)/1.055,2.4),a=t<=.03928?t/12.92:o.pow((t+.055)/1.055,2.4),i=r<=.03928?r/12.92:o.pow((r+.055)/1.055,2.4),.2126*n+.7152*a+.0722*i},setAlpha:function(e){return this._a=D(e),this._roundA=c(100*this._a)/100,this},toHsv:function(){var e=b(this._r,this._g,this._b);return{h:360*e.h,s:e.s,v:e.v,a:this._a}},toHsvString:function(){var e=b(this._r,this._g,this._b),t=c(360*e.h),r=c(100*e.s),n=c(100*e.v);return 1==this._a?"hsv("+t+", "+r+"%, "+n+"%)":"hsva("+t+", "+r+"%, "+n+"%, "+this._roundA+")"},toHsl:function(){var e=g(this._r,this._g,this._b);return{h:360*e.h,s:e.s,l:e.l,a:this._a}},toHslString:function(){var e=g(this._r,this._g,this._b),t=c(360*e.h),r=c(100*e.s),n=c(100*e.l);return 1==this._a?"hsl("+t+", "+r+"%, "+n+"%)":"hsla("+t+", "+r+"%, "+n+"%, "+this._roundA+")"},toHex:function(e){return x(this._r,this._g,this._b,e)},toHexString:function(e){return"#"+this.toHex(e)},toHex8:function(e){return w(this._r,this._g,this._b,this._a,e)},toHex8String:function(e){return"#"+this.toHex8(e)},toRgb:function(){return{r:c(this._r),g:c(this._g),b:c(this._b),a:this._a}},toRgbString:function(){return 1==this._a?"rgb("+c(this._r)+", "+c(this._g)+", "+c(this._b)+")":"rgba("+c(this._r)+", "+c(this._g)+", "+c(this._b)+", "+this._roundA+")"},toPercentageRgb:function(){return{r:c(100*T(this._r,255))+"%",g:c(100*T(this._g,255))+"%",b:c(100*T(this._b,255))+"%",a:this._a}},toPercentageRgbString:function(){return 1==this._a?"rgb("+c(100*T(this._r,255))+"%, "+c(100*T(this._g,255))+"%, "+c(100*T(this._b,255))+"%)":"rgba("+c(100*T(this._r,255))+"%, "+c(100*T(this._g,255))+"%, "+c(100*T(this._b,255))+"%, "+this._roundA+")"},toName:function(){return 0===this._a?"transparent":!(this._a<1)&&(R[x(this._r,this._g,this._b,!0)]||!1)},toFilter:function(e){var t="#"+k(this._r,this._g,this._b,this._a),r=t,n=this._gradientType?"GradientType = 1, ":"";if(e){var o=p(e);r="#"+k(o._r,o._g,o._b,o._a)}return"progid:DXImageTransform.Microsoft.gradient("+n+"startColorstr="+t+",endColorstr="+r+")"},toString:function(e){var t=!!e;e=e||this._format;var r=!1,n=this._a<1&&this._a>=0,o=!t&&n&&("hex"===e||"hex6"===e||"hex3"===e||"hex4"===e||"hex8"===e||"name"===e);return o?"name"===e&&0===this._a?this.toName():this.toRgbString():("rgb"===e&&(r=this.toRgbString()),"prgb"===e&&(r=this.toPercentageRgbString()),"hex"!==e&&"hex6"!==e||(r=this.toHexString()),"hex3"===e&&(r=this.toHexString(!0)),"hex4"===e&&(r=this.toHex8String(!0)),"hex8"===e&&(r=this.toHex8String()),"name"===e&&(r=this.toName()),"hsl"===e&&(r=this.toHslString()),"hsv"===e&&(r=this.toHsvString()),r||this.toHexString())},clone:function(){return p(this.toString())},_applyModification:function(e,t){var r=e.apply(null,[this].concat([].slice.call(t)));return this._r=r._r,this._g=r._g,this._b=r._b,this.setAlpha(r._a),this},lighten:function(){return this._applyModification(E,arguments)},brighten:function(){return this._applyModification(S,arguments)},darken:function(){return this._applyModification(N,arguments)},desaturate:function(){return this._applyModification(y,arguments)},saturate:function(){return this._applyModification(C,arguments)},greyscale:function(){return this._applyModification(_,arguments)},spin:function(){return this._applyModification(A,arguments)},_applyCombination:function(e,t){return e.apply(null,[this].concat([].slice.call(t)))},analogous:function(){return this._applyCombination(L,arguments)},complement:function(){return this._applyCombination(V,arguments)},monochromatic:function(){return this._applyCombination(z,arguments)},splitcomplement:function(){return this._applyCombination(M,arguments)},triad:function(){return this._applyCombination(B,arguments)},tetrad:function(){return this._applyCombination(F,arguments)}},p.fromRatio=function(e,t){if("object"==typeof e){var r={};for(var n in e)e.hasOwnProperty(n)&&(r[n]="a"===n?e[n]:q(e[n]));e=r}return p(e,t)},p.equals=function(e,t){return!(!e||!t)&&p(e).toRgbString()==p(t).toRgbString()},p.random=function(){return p.fromRatio({r:u(),g:u(),b:u()})},p.mix=function(e,t,r){r=0===r?0:r||50;var n=p(e).toRgb(),o=p(t).toRgb(),a=r/100,i={r:(o.r-n.r)*a+n.r,g:(o.g-n.g)*a+n.g,b:(o.b-n.b)*a+n.b,a:(o.a-n.a)*a+n.a};return p(i)},p.readability=function(e,t){var r=p(e),n=p(t);return(o.max(r.getLuminance(),n.getLuminance())+.05)/(o.min(r.getLuminance(),n.getLuminance())+.05)},p.isReadable=function(e,t,r){var n,o,a=p.readability(e,t);switch(o=!1,n=Z(r),n.level+n.size){case"AAsmall":case"AAAlarge":o=a>=4.5;break;case"AAlarge":o=a>=3;break;case"AAAsmall":o=a>=7;break}return o},p.mostReadable=function(e,t,r){var n,o,a,i,s=null,c=0;r=r||{},o=r.includeFallbackColors,a=r.level,i=r.size;for(var l=0;l<t.length;l++)n=p.readability(e,t[l]),n>c&&(c=n,s=p(t[l]));return p.isReadable(e,s,{level:a,size:i})||!o?s:(r.includeFallbackColors=!1,p.mostReadable(e,["#fff","#000"],r))};var O=p.names={aliceblue:"f0f8ff",antiquewhite:"faebd7",aqua:"0ff",aquamarine:"7fffd4",azure:"f0ffff",beige:"f5f5dc",bisque:"ffe4c4",black:"000",blanchedalmond:"ffebcd",blue:"00f",blueviolet:"8a2be2",brown:"a52a2a",burlywood:"deb887",burntsienna:"ea7e5d",cadetblue:"5f9ea0",chartreuse:"7fff00",chocolate:"d2691e",coral:"ff7f50",cornflowerblue:"6495ed",cornsilk:"fff8dc",crimson:"dc143c",cyan:"0ff",darkblue:"00008b",darkcyan:"008b8b",darkgoldenrod:"b8860b",darkgray:"a9a9a9",darkgreen:"006400",darkgrey:"a9a9a9",darkkhaki:"bdb76b",darkmagenta:"8b008b",darkolivegreen:"556b2f",darkorange:"ff8c00",darkorchid:"9932cc",darkred:"8b0000",darksalmon:"e9967a",darkseagreen:"8fbc8f",darkslateblue:"483d8b",darkslategray:"2f4f4f",darkslategrey:"2f4f4f",darkturquoise:"00ced1",darkviolet:"9400d3",deeppink:"ff1493",deepskyblue:"00bfff",dimgray:"696969",dimgrey:"696969",dodgerblue:"1e90ff",firebrick:"b22222",floralwhite:"fffaf0",forestgreen:"228b22",fuchsia:"f0f",gainsboro:"dcdcdc",ghostwhite:"f8f8ff",gold:"ffd700",goldenrod:"daa520",gray:"808080",green:"008000",greenyellow:"adff2f",grey:"808080",honeydew:"f0fff0",hotpink:"ff69b4",indianred:"cd5c5c",indigo:"4b0082",ivory:"fffff0",khaki:"f0e68c",lavender:"e6e6fa",lavenderblush:"fff0f5",lawngreen:"7cfc00",lemonchiffon:"fffacd",lightblue:"add8e6",lightcoral:"f08080",lightcyan:"e0ffff",lightgoldenrodyellow:"fafad2",lightgray:"d3d3d3",lightgreen:"90ee90",lightgrey:"d3d3d3",lightpink:"ffb6c1",lightsalmon:"ffa07a",lightseagreen:"20b2aa",lightskyblue:"87cefa",lightslategray:"789",lightslategrey:"789",lightsteelblue:"b0c4de",lightyellow:"ffffe0",lime:"0f0",limegreen:"32cd32",linen:"faf0e6",magenta:"f0f",maroon:"800000",mediumaquamarine:"66cdaa",mediumblue:"0000cd",mediumorchid:"ba55d3",mediumpurple:"9370db",mediumseagreen:"3cb371",mediumslateblue:"7b68ee",mediumspringgreen:"00fa9a",mediumturquoise:"48d1cc",mediumvioletred:"c71585",midnightblue:"191970",mintcream:"f5fffa",mistyrose:"ffe4e1",moccasin:"ffe4b5",navajowhite:"ffdead",navy:"000080",oldlace:"fdf5e6",olive:"808000",olivedrab:"6b8e23",orange:"ffa500",orangered:"ff4500",orchid:"da70d6",palegoldenrod:"eee8aa",palegreen:"98fb98",paleturquoise:"afeeee",palevioletred:"db7093",papayawhip:"ffefd5",peachpuff:"ffdab9",peru:"cd853f",pink:"ffc0cb",plum:"dda0dd",powderblue:"b0e0e6",purple:"800080",rebeccapurple:"663399",red:"f00",rosybrown:"bc8f8f",royalblue:"4169e1",saddlebrown:"8b4513",salmon:"fa8072",sandybrown:"f4a460",seagreen:"2e8b57",seashell:"fff5ee",sienna:"a0522d",silver:"c0c0c0",skyblue:"87ceeb",slateblue:"6a5acd",slategray:"708090",slategrey:"708090",snow:"fffafa",springgreen:"00ff7f",steelblue:"4682b4",tan:"d2b48c",teal:"008080",thistle:"d8bfd8",tomato:"ff6347",turquoise:"40e0d0",violet:"ee82ee",wheat:"f5deb3",white:"fff",whitesmoke:"f5f5f5",yellow:"ff0",yellowgreen:"9acd32"},R=p.hexNames=j(O);function j(e){var t={};for(var r in e)e.hasOwnProperty(r)&&(t[e[r]]=r);return t}function D(e){return e=parseFloat(e),(isNaN(e)||e<0||e>1)&&(e=1),e}function T(e,t){$(e)&&(e="100%");var r=P(e);return e=l(t,h(0,parseFloat(e))),r&&(e=parseInt(e*t,10)/100),o.abs(e-t)<1e-6?1:e%t/parseFloat(t)}function H(e){return l(1,h(0,e))}function I(e){return parseInt(e,16)}function $(e){return"string"==typeof e&&-1!=e.indexOf(".")&&1===parseFloat(e)}function P(e){return"string"===typeof e&&-1!=e.indexOf("%")}function U(e){return 1==e.length?"0"+e:""+e}function q(e){return e<=1&&(e=100*e+"%"),e}function W(e){return o.round(255*parseFloat(e)).toString(16)}function G(e){return I(e)/255}var X=function(){var e="[-\\+]?\\d+%?",t="[-\\+]?\\d*\\.\\d+%?",r="(?:"+t+")|(?:"+e+")",n="[\\s|\\(]+("+r+")[,|\\s]+("+r+")[,|\\s]+("+r+")\\s*\\)?",o="[\\s|\\(]+("+r+")[,|\\s]+("+r+")[,|\\s]+("+r+")[,|\\s]+("+r+")\\s*\\)?";return{CSS_UNIT:new RegExp(r),rgb:new RegExp("rgb"+n),rgba:new RegExp("rgba"+o),hsl:new RegExp("hsl"+n),hsla:new RegExp("hsla"+o),hsv:new RegExp("hsv"+n),hsva:new RegExp("hsva"+o),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/}}();function Y(e){return!!X.CSS_UNIT.exec(e)}function K(e){e=e.replace(a,"").replace(i,"").toLowerCase();var t,r=!1;if(O[e])e=O[e],r=!0;else if("transparent"==e)return{r:0,g:0,b:0,a:0,format:"name"};return(t=X.rgb.exec(e))?{r:t[1],g:t[2],b:t[3]}:(t=X.rgba.exec(e))?{r:t[1],g:t[2],b:t[3],a:t[4]}:(t=X.hsl.exec(e))?{h:t[1],s:t[2],l:t[3]}:(t=X.hsla.exec(e))?{h:t[1],s:t[2],l:t[3],a:t[4]}:(t=X.hsv.exec(e))?{h:t[1],s:t[2],v:t[3]}:(t=X.hsva.exec(e))?{h:t[1],s:t[2],v:t[3],a:t[4]}:(t=X.hex8.exec(e))?{r:I(t[1]),g:I(t[2]),b:I(t[3]),a:G(t[4]),format:r?"name":"hex8"}:(t=X.hex6.exec(e))?{r:I(t[1]),g:I(t[2]),b:I(t[3]),format:r?"name":"hex"}:(t=X.hex4.exec(e))?{r:I(t[1]+""+t[1]),g:I(t[2]+""+t[2]),b:I(t[3]+""+t[3]),a:G(t[4]+""+t[4]),format:r?"name":"hex8"}:!!(t=X.hex3.exec(e))&&{r:I(t[1]+""+t[1]),g:I(t[2]+""+t[2]),b:I(t[3]+""+t[3]),format:r?"name":"hex"}}function Z(e){var t,r;return e=e||{level:"AA",size:"small"},t=(e.level||"AA").toUpperCase(),r=(e.size||"small").toLowerCase(),"AA"!==t&&"AAA"!==t&&(t="AA"),"small"!==r&&"large"!==r&&(r="small"),{level:t,size:r}}e.exports?e.exports=p:(n=function(){return p}.call(t,r,t,e),void 0===n||(e.exports=n))})(Math)},3744:function(e,t){"use strict";t.Z=(e,t)=>{const r=e.__vccOpts||e;for(const[n,o]of t)r[n]=o;return r}},571:function(e,t,r){var n=r(9658);n.__esModule&&(n=n.default),"string"===typeof n&&(n=[[e.id,n,""]]),n.locals&&(e.exports=n.locals);var o=r(4402).Z;o("e8ef8e54",n,!0,{sourceMap:!1,shadowMode:!1})},4402:function(e,t,r){"use strict";function n(e,t){for(var r=[],n={},o=0;o<t.length;o++){var a=t[o],i=a[0],s=a[1],c=a[2],l=a[3],h={id:e+":"+o,css:s,media:c,sourceMap:l};n[i]?n[i].parts.push(h):r.push(n[i]={id:i,parts:[h]})}return r}r.d(t,{Z:function(){return f}});var o="undefined"!==typeof document;if("undefined"!==typeof DEBUG&&DEBUG&&!o)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var a={},i=o&&(document.head||document.getElementsByTagName("head")[0]),s=null,c=0,l=!1,h=function(){},u=null,p="data-vue-ssr-id",d="undefined"!==typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function f(e,t,r,o){l=r,u=o||{};var i=n(e,t);return g(i),function(t){for(var r=[],o=0;o<i.length;o++){var s=i[o],c=a[s.id];c.refs--,r.push(c)}t?(i=n(e,t),g(i)):i=[];for(o=0;o<r.length;o++){c=r[o];if(0===c.refs){for(var l=0;l<c.parts.length;l++)c.parts[l]();delete a[c.id]}}}}function g(e){for(var t=0;t<e.length;t++){var r=e[t],n=a[r.id];if(n){n.refs++;for(var o=0;o<n.parts.length;o++)n.parts[o](r.parts[o]);for(;o<r.parts.length;o++)n.parts.push(b(r.parts[o]));n.parts.length>r.parts.length&&(n.parts.length=r.parts.length)}else{var i=[];for(o=0;o<r.parts.length;o++)i.push(b(r.parts[o]));a[r.id]={id:r.id,refs:1,parts:i}}}}function v(){var e=document.createElement("style");return e.type="text/css",i.appendChild(e),e}function b(e){var t,r,n=document.querySelector("style["+p+'~="'+e.id+'"]');if(n){if(l)return h;n.parentNode.removeChild(n)}if(d){var o=c++;n=s||(s=v()),t=x.bind(null,n,o,!1),r=x.bind(null,n,o,!0)}else n=v(),t=w.bind(null,n),r=function(){n.parentNode.removeChild(n)};return t(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap)return;t(e=n)}else r()}}var m=function(){var e=[];return function(t,r){return e[t]=r,e.filter(Boolean).join("\n")}}();function x(e,t,r,n){var o=r?"":n.css;if(e.styleSheet)e.styleSheet.cssText=m(t,o);else{var a=document.createTextNode(o),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(a,i[t]):e.appendChild(a)}}function w(e,t){var r=t.css,n=t.media,o=t.sourceMap;if(n&&e.setAttribute("media",n),u.ssrId&&e.setAttribute(p,t.id),o&&(r+="\n/*# sourceURL="+o.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),e.styleSheet)e.styleSheet.cssText=r;else{while(e.firstChild)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}},6658:function(e){"use strict";e.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC"},7203:function(t){"use strict";t.exports=e}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var a=r[e]={id:e,exports:{}};return t[e](a,a.exports,n),a.exports}n.m=t,function(){n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,{a:t}),t}}(),function(){n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}}(),function(){n.g=function(){if("object"===typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"===typeof window)return window}}()}(),function(){n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}}(),function(){n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}}(),function(){n.p=""}(),function(){n.b=document.baseURI||self.location.href}();var o={};return function(){"use strict";n.r(o),n.d(o,{LinearGradient:function(){return ur},VueGpickr:function(){return mr},default:function(){return Wo},vueColor:function(){return e}});var e={};if(n.r(e),n.d(e,{Alpha:function(){return Nt},Checkboard:function(){return yt},Chrome:function(){return wr},Compact:function(){return Yr},EditableInput:function(){return re},Grayscale:function(){return nn},Hue:function(){return gt},Material:function(){return un},Photoshop:function(){return xn},Saturation:function(){return ct},Sketch:function(){return Ot},Slider:function(){return Hn},Swatches:function(){return Co},Twitter:function(){return zo},components:function(){return Po},create:function(){return xr},default:function(){return Uo},install:function(){return Uo}}),"undefined"!==typeof window){var t=window.document.currentScript,r=t&&t.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);r&&(n.p=r[1])}var a=n(7203);const i=e=>((0,a.pushScopeId)("data-v-31278663"),e=e(),(0,a.popScopeId)(),e),s={class:"vue-gpickr"},c={class:"vue-gpickr-inner-container"},l={class:"vue-gpickr-preview-container"},h={ref:"stopsContainer",class:"vue-gpickr-stops-container"},u={class:"vue-gpickr-stops-preview-container"},p=["onMousedown","onTouchstart"],d={class:"vue-gpickr-controls-container"},f={class:"vue-gpickr-slider-container"},g=i((()=>(0,a.createElementVNode)("div",{class:"label"}," Angle ",-1))),v={class:"vue-gpickr-input-container"},b=i((()=>(0,a.createElementVNode)("div",{class:"label"}," Deg° ",-1)));function m(e,t,r,n,o,i){const m=(0,a.resolveComponent)("color-picker");return(0,a.openBlock)(),(0,a.createElementBlock)("div",s,[(0,a.createVNode)(m,{modelValue:i.currentColor,"onUpdate:modelValue":t[0]||(t[0]=e=>i.currentColor=e),"preset-colors":null},null,8,["modelValue"]),(0,a.createElementVNode)("div",c,[(0,a.createElementVNode)("div",l,[(0,a.createElementVNode)("div",{class:"vue-gpickr-preview",style:(0,a.normalizeStyle)(i.previewStyle)},null,4)]),(0,a.createElementVNode)("div",h,[(0,a.createElementVNode)("div",u,[(0,a.createElementVNode)("div",{class:"vue-gpickr-stops-preview",style:(0,a.normalizeStyle)(i.stopsPreviewStyle),onClick:t[1]||(t[1]=(0,a.withModifiers)((e=>i.addStop(e)),["stop","prevent"]))},null,4)]),((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(i.stops,((e,t)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",{key:t,class:(0,a.normalizeClass)(["vue-gpickr-stop",{active:t==o.currentStopIdx}]),style:(0,a.normalizeStyle)(i.stopStyle(t)),onMousedown:(0,a.withModifiers)((e=>i.handleMouseDown(t,e)),["stop"]),onTouchstart:(0,a.withModifiers)((e=>i.handleTouchstart(t,e)),["stop"])},null,46,p)))),128))],512),(0,a.createElementVNode)("div",d,[(0,a.createElementVNode)("div",f,[(0,a.withDirectives)((0,a.createElementVNode)("input",{"onUpdate:modelValue":t[2]||(t[2]=e=>i.angle=e),type:"range",min:"0",max:"360",step:"1"},null,512),[[a.vModelText,i.angle]]),g]),(0,a.createElementVNode)("div",v,[(0,a.withDirectives)((0,a.createElementVNode)("input",{"onUpdate:modelValue":t[3]||(t[3]=e=>i.angle=e),type:"text"},null,512),[[a.vModelText,i.angle]]),b])])])])}function x(e,t){k(e)&&(e="100%");var r=y(e);return e=360===t?e:Math.min(t,Math.max(0,parseFloat(e))),r&&(e=parseInt(String(e*t),10)/100),Math.abs(e-t)<1e-6?1:(e=360===t?(e<0?e%t+t:e%t)/parseFloat(String(t)):e%t/parseFloat(String(t)),e)}function w(e){return Math.min(1,Math.max(0,e))}function k(e){return"string"===typeof e&&-1!==e.indexOf(".")&&1===parseFloat(e)}function y(e){return"string"===typeof e&&-1!==e.indexOf("%")}function C(e){return e=parseFloat(e),(isNaN(e)||e<0||e>1)&&(e=1),e}function _(e){return e<=1?"".concat(100*Number(e),"%"):e}function E(e){return 1===e.length?"0"+e:String(e)}function S(e,t,r){return{r:255*x(e,255),g:255*x(t,255),b:255*x(r,255)}}function N(e,t,r){e=x(e,255),t=x(t,255),r=x(r,255);var n=Math.max(e,t,r),o=Math.min(e,t,r),a=0,i=0,s=(n+o)/2;if(n===o)i=0,a=0;else{var c=n-o;switch(i=s>.5?c/(2-n-o):c/(n+o),n){case e:a=(t-r)/c+(t<r?6:0);break;case t:a=(r-e)/c+2;break;case r:a=(e-t)/c+4;break;default:break}a/=6}return{h:a,s:i,l:s}}function A(e,t,r){return r<0&&(r+=1),r>1&&(r-=1),r<1/6?e+6*r*(t-e):r<.5?t:r<2/3?e+(t-e)*(2/3-r)*6:e}function V(e,t,r){var n,o,a;if(e=x(e,360),t=x(t,100),r=x(r,100),0===t)o=r,a=r,n=r;else{var i=r<.5?r*(1+t):r+t-r*t,s=2*r-i;n=A(s,i,e+1/3),o=A(s,i,e),a=A(s,i,e-1/3)}return{r:255*n,g:255*o,b:255*a}}function B(e,t,r){e=x(e,255),t=x(t,255),r=x(r,255);var n=Math.max(e,t,r),o=Math.min(e,t,r),a=0,i=n,s=n-o,c=0===n?0:s/n;if(n===o)a=0;else{switch(n){case e:a=(t-r)/s+(t<r?6:0);break;case t:a=(r-e)/s+2;break;case r:a=(e-t)/s+4;break;default:break}a/=6}return{h:a,s:c,v:i}}function F(e,t,r){e=6*x(e,360),t=x(t,100),r=x(r,100);var n=Math.floor(e),o=e-n,a=r*(1-t),i=r*(1-o*t),s=r*(1-(1-o)*t),c=n%6,l=[r,i,a,a,s,r][c],h=[s,r,r,i,a,a][c],u=[a,a,s,r,r,i][c];return{r:255*l,g:255*h,b:255*u}}function M(e,t,r,n){var o=[E(Math.round(e).toString(16)),E(Math.round(t).toString(16)),E(Math.round(r).toString(16))];return n&&o[0].startsWith(o[0].charAt(1))&&o[1].startsWith(o[1].charAt(1))&&o[2].startsWith(o[2].charAt(1))?o[0].charAt(0)+o[1].charAt(0)+o[2].charAt(0):o.join("")}function L(e,t,r,n,o){var a=[E(Math.round(e).toString(16)),E(Math.round(t).toString(16)),E(Math.round(r).toString(16)),E(z(n))];return o&&a[0].startsWith(a[0].charAt(1))&&a[1].startsWith(a[1].charAt(1))&&a[2].startsWith(a[2].charAt(1))&&a[3].startsWith(a[3].charAt(1))?a[0].charAt(0)+a[1].charAt(0)+a[2].charAt(0)+a[3].charAt(0):a.join("")}function z(e){return Math.round(255*parseFloat(e)).toString(16)}function O(e){return R(e)/255}function R(e){return parseInt(e,16)}function j(e){return{r:e>>16,g:(65280&e)>>8,b:255&e}}var D={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",goldenrod:"#daa520",gold:"#ffd700",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavenderblush:"#fff0f5",lavender:"#e6e6fa",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};function T(e){var t={r:0,g:0,b:0},r=1,n=null,o=null,a=null,i=!1,s=!1;return"string"===typeof e&&(e=W(e)),"object"===typeof e&&(G(e.r)&&G(e.g)&&G(e.b)?(t=S(e.r,e.g,e.b),i=!0,s="%"===String(e.r).substr(-1)?"prgb":"rgb"):G(e.h)&&G(e.s)&&G(e.v)?(n=_(e.s),o=_(e.v),t=F(e.h,n,o),i=!0,s="hsv"):G(e.h)&&G(e.s)&&G(e.l)&&(n=_(e.s),a=_(e.l),t=V(e.h,n,a),i=!0,s="hsl"),Object.prototype.hasOwnProperty.call(e,"a")&&(r=e.a)),r=C(r),{ok:i,format:e.format||s,r:Math.min(255,Math.max(t.r,0)),g:Math.min(255,Math.max(t.g,0)),b:Math.min(255,Math.max(t.b,0)),a:r}}var H="[-\\+]?\\d+%?",I="[-\\+]?\\d*\\.\\d+%?",$="(?:".concat(I,")|(?:").concat(H,")"),P="[\\s|\\(]+(".concat($,")[,|\\s]+(").concat($,")[,|\\s]+(").concat($,")\\s*\\)?"),U="[\\s|\\(]+(".concat($,")[,|\\s]+(").concat($,")[,|\\s]+(").concat($,")[,|\\s]+(").concat($,")\\s*\\)?"),q={CSS_UNIT:new RegExp($),rgb:new RegExp("rgb"+P),rgba:new RegExp("rgba"+U),hsl:new RegExp("hsl"+P),hsla:new RegExp("hsla"+U),hsv:new RegExp("hsv"+P),hsva:new RegExp("hsva"+U),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/};function W(e){if(e=e.trim().toLowerCase(),0===e.length)return!1;var t=!1;if(D[e])e=D[e],t=!0;else if("transparent"===e)return{r:0,g:0,b:0,a:0,format:"name"};var r=q.rgb.exec(e);return r?{r:r[1],g:r[2],b:r[3]}:(r=q.rgba.exec(e),r?{r:r[1],g:r[2],b:r[3],a:r[4]}:(r=q.hsl.exec(e),r?{h:r[1],s:r[2],l:r[3]}:(r=q.hsla.exec(e),r?{h:r[1],s:r[2],l:r[3],a:r[4]}:(r=q.hsv.exec(e),r?{h:r[1],s:r[2],v:r[3]}:(r=q.hsva.exec(e),r?{h:r[1],s:r[2],v:r[3],a:r[4]}:(r=q.hex8.exec(e),r?{r:R(r[1]),g:R(r[2]),b:R(r[3]),a:O(r[4]),format:t?"name":"hex8"}:(r=q.hex6.exec(e),r?{r:R(r[1]),g:R(r[2]),b:R(r[3]),format:t?"name":"hex"}:(r=q.hex4.exec(e),r?{r:R(r[1]+r[1]),g:R(r[2]+r[2]),b:R(r[3]+r[3]),a:O(r[4]+r[4]),format:t?"name":"hex8"}:(r=q.hex3.exec(e),!!r&&{r:R(r[1]+r[1]),g:R(r[2]+r[2]),b:R(r[3]+r[3]),format:t?"name":"hex"})))))))))}function G(e){return Boolean(q.CSS_UNIT.exec(String(e)))}var X=function(){function e(t,r){var n;if(void 0===t&&(t=""),void 0===r&&(r={}),t instanceof e)return t;"number"===typeof t&&(t=j(t)),this.originalInput=t;var o=T(t);this.originalInput=t,this.r=o.r,this.g=o.g,this.b=o.b,this.a=o.a,this.roundA=Math.round(100*this.a)/100,this.format=null!==(n=r.format)&&void 0!==n?n:o.format,this.gradientType=r.gradientType,this.r<1&&(this.r=Math.round(this.r)),this.g<1&&(this.g=Math.round(this.g)),this.b<1&&(this.b=Math.round(this.b)),this.isValid=o.ok}return e.prototype.isDark=function(){return this.getBrightness()<128},e.prototype.isLight=function(){return!this.isDark()},e.prototype.getBrightness=function(){var e=this.toRgb();return(299*e.r+587*e.g+114*e.b)/1e3},e.prototype.getLuminance=function(){var e,t,r,n=this.toRgb(),o=n.r/255,a=n.g/255,i=n.b/255;return e=o<=.03928?o/12.92:Math.pow((o+.055)/1.055,2.4),t=a<=.03928?a/12.92:Math.pow((a+.055)/1.055,2.4),r=i<=.03928?i/12.92:Math.pow((i+.055)/1.055,2.4),.2126*e+.7152*t+.0722*r},e.prototype.getAlpha=function(){return this.a},e.prototype.setAlpha=function(e){return this.a=C(e),this.roundA=Math.round(100*this.a)/100,this},e.prototype.toHsv=function(){var e=B(this.r,this.g,this.b);return{h:360*e.h,s:e.s,v:e.v,a:this.a}},e.prototype.toHsvString=function(){var e=B(this.r,this.g,this.b),t=Math.round(360*e.h),r=Math.round(100*e.s),n=Math.round(100*e.v);return 1===this.a?"hsv(".concat(t,", ").concat(r,"%, ").concat(n,"%)"):"hsva(".concat(t,", ").concat(r,"%, ").concat(n,"%, ").concat(this.roundA,")")},e.prototype.toHsl=function(){var e=N(this.r,this.g,this.b);return{h:360*e.h,s:e.s,l:e.l,a:this.a}},e.prototype.toHslString=function(){var e=N(this.r,this.g,this.b),t=Math.round(360*e.h),r=Math.round(100*e.s),n=Math.round(100*e.l);return 1===this.a?"hsl(".concat(t,", ").concat(r,"%, ").concat(n,"%)"):"hsla(".concat(t,", ").concat(r,"%, ").concat(n,"%, ").concat(this.roundA,")")},e.prototype.toHex=function(e){return void 0===e&&(e=!1),M(this.r,this.g,this.b,e)},e.prototype.toHexString=function(e){return void 0===e&&(e=!1),"#"+this.toHex(e)},e.prototype.toHex8=function(e){return void 0===e&&(e=!1),L(this.r,this.g,this.b,this.a,e)},e.prototype.toHex8String=function(e){return void 0===e&&(e=!1),"#"+this.toHex8(e)},e.prototype.toRgb=function(){return{r:Math.round(this.r),g:Math.round(this.g),b:Math.round(this.b),a:this.a}},e.prototype.toRgbString=function(){var e=Math.round(this.r),t=Math.round(this.g),r=Math.round(this.b);return 1===this.a?"rgb(".concat(e,", ").concat(t,", ").concat(r,")"):"rgba(".concat(e,", ").concat(t,", ").concat(r,", ").concat(this.roundA,")")},e.prototype.toPercentageRgb=function(){var e=function(e){return"".concat(Math.round(100*x(e,255)),"%")};return{r:e(this.r),g:e(this.g),b:e(this.b),a:this.a}},e.prototype.toPercentageRgbString=function(){var e=function(e){return Math.round(100*x(e,255))};return 1===this.a?"rgb(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%)"):"rgba(".concat(e(this.r),"%, ").concat(e(this.g),"%, ").concat(e(this.b),"%, ").concat(this.roundA,")")},e.prototype.toName=function(){if(0===this.a)return"transparent";if(this.a<1)return!1;for(var e="#"+M(this.r,this.g,this.b,!1),t=0,r=Object.entries(D);t<r.length;t++){var n=r[t],o=n[0],a=n[1];if(e===a)return o}return!1},e.prototype.toString=function(e){var t=Boolean(e);e=null!==e&&void 0!==e?e:this.format;var r=!1,n=this.a<1&&this.a>=0,o=!t&&n&&(e.startsWith("hex")||"name"===e);return o?"name"===e&&0===this.a?this.toName():this.toRgbString():("rgb"===e&&(r=this.toRgbString()),"prgb"===e&&(r=this.toPercentageRgbString()),"hex"!==e&&"hex6"!==e||(r=this.toHexString()),"hex3"===e&&(r=this.toHexString(!0)),"hex4"===e&&(r=this.toHex8String(!0)),"hex8"===e&&(r=this.toHex8String()),"name"===e&&(r=this.toName()),"hsl"===e&&(r=this.toHslString()),"hsv"===e&&(r=this.toHsvString()),r||this.toHexString())},e.prototype.toNumber=function(){return(Math.round(this.r)<<16)+(Math.round(this.g)<<8)+Math.round(this.b)},e.prototype.clone=function(){return new e(this.toString())},e.prototype.lighten=function(t){void 0===t&&(t=10);var r=this.toHsl();return r.l+=t/100,r.l=w(r.l),new e(r)},e.prototype.brighten=function(t){void 0===t&&(t=10);var r=this.toRgb();return r.r=Math.max(0,Math.min(255,r.r-Math.round(-t/100*255))),r.g=Math.max(0,Math.min(255,r.g-Math.round(-t/100*255))),r.b=Math.max(0,Math.min(255,r.b-Math.round(-t/100*255))),new e(r)},e.prototype.darken=function(t){void 0===t&&(t=10);var r=this.toHsl();return r.l-=t/100,r.l=w(r.l),new e(r)},e.prototype.tint=function(e){return void 0===e&&(e=10),this.mix("white",e)},e.prototype.shade=function(e){return void 0===e&&(e=10),this.mix("black",e)},e.prototype.desaturate=function(t){void 0===t&&(t=10);var r=this.toHsl();return r.s-=t/100,r.s=w(r.s),new e(r)},e.prototype.saturate=function(t){void 0===t&&(t=10);var r=this.toHsl();return r.s+=t/100,r.s=w(r.s),new e(r)},e.prototype.greyscale=function(){return this.desaturate(100)},e.prototype.spin=function(t){var r=this.toHsl(),n=(r.h+t)%360;return r.h=n<0?360+n:n,new e(r)},e.prototype.mix=function(t,r){void 0===r&&(r=50);var n=this.toRgb(),o=new e(t).toRgb(),a=r/100,i={r:(o.r-n.r)*a+n.r,g:(o.g-n.g)*a+n.g,b:(o.b-n.b)*a+n.b,a:(o.a-n.a)*a+n.a};return new e(i)},e.prototype.analogous=function(t,r){void 0===t&&(t=6),void 0===r&&(r=30);var n=this.toHsl(),o=360/r,a=[this];for(n.h=(n.h-(o*t>>1)+720)%360;--t;)n.h=(n.h+o)%360,a.push(new e(n));return a},e.prototype.complement=function(){var t=this.toHsl();return t.h=(t.h+180)%360,new e(t)},e.prototype.monochromatic=function(t){void 0===t&&(t=6);var r=this.toHsv(),n=r.h,o=r.s,a=r.v,i=[],s=1/t;while(t--)i.push(new e({h:n,s:o,v:a})),a=(a+s)%1;return i},e.prototype.splitcomplement=function(){var t=this.toHsl(),r=t.h;return[this,new e({h:(r+72)%360,s:t.s,l:t.l}),new e({h:(r+216)%360,s:t.s,l:t.l})]},e.prototype.onBackground=function(t){var r=this.toRgb(),n=new e(t).toRgb();return new e({r:n.r+(r.r-n.r)*r.a,g:n.g+(r.g-n.g)*r.a,b:n.b+(r.b-n.b)*r.a})},e.prototype.triad=function(){return this.polyad(3)},e.prototype.tetrad=function(){return this.polyad(4)},e.prototype.polyad=function(t){for(var r=this.toHsl(),n=r.h,o=[this],a=360/t,i=1;i<t;i++)o.push(new e({h:(n+i*a)%360,s:r.s,l:r.l}));return o},e.prototype.equals=function(t){return this.toRgbString()===new e(t).toRgbString()},e}();function Y(...e){return new X(...e)}function K(e,t){const r=e&&e.a;let n;n=e&&e.hsl?Y(e.hsl):e&&e.hex&&e.hex.length>0?Y(e.hex):e&&e.hsv?Y(e.hsv):e&&e.rgba?Y(e.rgba):e&&e.rgb?Y(e.rgb):Y(e),!n||void 0!==n._a&&null!==n._a||n.setAlpha(r||n.getAlpha());const o=n.toHsl(),a=n.toHsv();return 0===o.s&&(a.h=o.h=e.h||e.hsl&&e.hsl.h||t||0),{hsl:o,hex:n.toHexString().toUpperCase(),hex8:n.toHex8String().toUpperCase(),rgba:n.toRgb(),hsv:a,oldHue:e.h||t||o.h,source:e.source,a:n.getAlpha()}}var Z={model:{prop:"modelValue",event:"update:modelValue"},props:["modelValue"],data(){return{val:K(this.modelValue)}},computed:{colors:{get(){return this.val},set(e){this.val=e,this.$emit("update:modelValue",e)}}},watch:{modelValue(e){this.val=K(e)}},methods:{colorChange(e,t){this.oldHue=this.colors.hsl.h,this.colors=K(e,t||this.oldHue)},isValidHex(e){return Y(e).isValid},simpleCheckForValidColor(e){const t=["r","g","b","a","h","s","l","v"];let r=0,n=0;for(let o=0;o<t.length;o++){const a=t[o];e[a]&&(r++,isNaN(e[a])||n++)}if(r===n)return e},paletteUpperCase(e){return e.map((e=>e.toUpperCase()))},isTransparent(e){return 0===Y(e).getAlpha()}}};function Q(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!==typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}const J="",ee="medium",te=function(e,t){const{componentPrefix:r=J}=t||{};e.component(`${r}${this.name}`,this)};var re={name:"editableInput",props:{label:String,labelText:String,desc:String,value:[String,Number],max:Number,min:Number,arrowOffset:{type:Number,default:1}},computed:{val:{get(){return this.value},set(e){if(!(void 0!==this.max&&+e>this.max))return e;this.$refs.input.value=this.max}},labelId(){return`input__label__${this.label}__${Math.random().toString().slice(2,5)}`},labelSpanText(){return this.labelText||this.label}},methods:{update(e){this.handleChange(e.target.value)},handleChange(e){const t={};t[this.label]=e,(void 0===t.hex&&void 0===t["#"]||e.length>5)&&this.$emit("change",t)},handleKeyDown(e){let{val:t}=this;const r=Number(t);if(r){const n=this.arrowOffset||1;38===e.keyCode&&(t=r+n,this.handleChange(t),e.preventDefault()),40===e.keyCode&&(t=r-n,this.handleChange(t),e.preventDefault())}}}};const ne={class:"vc-editable-input"},oe=["aria-labelledby"],ae=["for","id"],ie={class:"vc-input__desc"};function se(e,t,r,n,o,i){return(0,a.openBlock)(),(0,a.createElementBlock)("div",ne,[(0,a.withDirectives)((0,a.createElementVNode)("input",{"aria-labelledby":i.labelId,class:"vc-input__input","onUpdate:modelValue":t[0]||(t[0]=e=>i.val=e),onKeydown:t[1]||(t[1]=(...e)=>i.handleKeyDown&&i.handleKeyDown(...e)),onInput:t[2]||(t[2]=(...e)=>i.update&&i.update(...e)),ref:"input"},null,40,oe),[[a.vModelText,i.val]]),(0,a.createElementVNode)("span",{for:r.label,class:"vc-input__label",id:i.labelId},(0,a.toDisplayString)(i.labelSpanText),9,ae),(0,a.createElementVNode)("span",ie,(0,a.toDisplayString)(r.desc),1)])}var ce=".vc-editable-input{position:relative}.vc-input__input{border:0;outline:none;padding:0}.vc-input__label{text-transform:capitalize}";function le(e,t,r){return t<r?e<t?t:e>r?r:e:e<r?r:e>t?t:e}function he(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}Q(ce),re.render=se,re.__file="src/components/editable-input/editable-input.vue",re.install=te;var ue=he,pe="object"==typeof global&&global&&global.Object===Object&&global,de=pe,fe="object"==typeof self&&self&&self.Object===Object&&self,ge=de||fe||Function("return this")(),ve=ge,be=function(){return ve.Date.now()},me=be,xe=/\s/;function we(e){var t=e.length;while(t--&&xe.test(e.charAt(t)));return t}var ke=we,ye=/^\s+/;function Ce(e){return e?e.slice(0,ke(e)+1).replace(ye,""):e}var _e=Ce,Ee=ve.Symbol,Se=Ee,Ne=Object.prototype,Ae=Ne.hasOwnProperty,Ve=Ne.toString,Be=Se?Se.toStringTag:void 0;function Fe(e){var t=Ae.call(e,Be),r=e[Be];try{e[Be]=void 0;var n=!0}catch(a){}var o=Ve.call(e);return n&&(t?e[Be]=r:delete e[Be]),o}var Me=Fe,Le=Object.prototype,ze=Le.toString;function Oe(e){return ze.call(e)}var Re=Oe,je="[object Null]",De="[object Undefined]",Te=Se?Se.toStringTag:void 0;function He(e){return null==e?void 0===e?De:je:Te&&Te in Object(e)?Me(e):Re(e)}var Ie=He;function $e(e){return null!=e&&"object"==typeof e}var Pe=$e,Ue="[object Symbol]";function qe(e){return"symbol"==typeof e||Pe(e)&&Ie(e)==Ue}var We=qe,Ge=NaN,Xe=/^[-+]0x[0-9a-f]+$/i,Ye=/^0b[01]+$/i,Ke=/^0o[0-7]+$/i,Ze=parseInt;function Qe(e){if("number"==typeof e)return e;if(We(e))return Ge;if(ue(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=ue(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=_e(e);var r=Ye.test(e);return r||Ke.test(e)?Ze(e.slice(2),r?2:8):Xe.test(e)?Ge:+e}var Je=Qe,et="Expected a function",tt=Math.max,rt=Math.min;function nt(e,t,r){var n,o,a,i,s,c,l=0,h=!1,u=!1,p=!0;if("function"!=typeof e)throw new TypeError(et);function d(t){var r=n,a=o;return n=o=void 0,l=t,i=e.apply(a,r),i}function f(e){return l=e,s=setTimeout(b,t),h?d(e):i}function g(e){var r=e-c,n=e-l,o=t-r;return u?rt(o,a-n):o}function v(e){var r=e-c,n=e-l;return void 0===c||r>=t||r<0||u&&n>=a}function b(){var e=me();if(v(e))return m(e);s=setTimeout(b,g(e))}function m(e){return s=void 0,p&&n?d(e):(n=o=void 0,i)}function x(){void 0!==s&&clearTimeout(s),l=0,n=c=o=s=void 0}function w(){return void 0===s?i:m(me())}function k(){var e=me(),r=v(e);if(n=arguments,o=this,c=e,r){if(void 0===s)return f(c);if(u)return clearTimeout(s),s=setTimeout(b,t),d(c)}return void 0===s&&(s=setTimeout(b,t)),i}return t=Je(t)||0,ue(r)&&(h=!!r.leading,u="maxWait"in r,a=u?tt(Je(r.maxWait)||0,t):a,p="trailing"in r?!!r.trailing:p),k.cancel=x,k.flush=w,k}var ot=nt,at="Expected a function";function it(e,t,r){var n=!0,o=!0;if("function"!=typeof e)throw new TypeError(at);return ue(r)&&(n="leading"in r?!!r.leading:n,o="trailing"in r?!!r.trailing:o),ot(e,t,{leading:n,maxWait:t,trailing:o})}var st=it,ct={name:"Saturation",props:{value:Object},computed:{colors(){return this.value},bgColor(){return`hsl(${this.colors.hsv.h}, 100%, 50%)`},pointerTop(){return-100*this.colors.hsv.v+1+100+"%"},pointerLeft(){return 100*this.colors.hsv.s+"%"}},methods:{throttle:st(((e,t)=>{e(t)}),20,{leading:!0,trailing:!1}),handleChange(e,t){!t&&e.preventDefault();const{container:r}=this.$refs;if(!r)return;const n=r.clientWidth,o=r.clientHeight,a=r.getBoundingClientRect().left+window.pageXOffset,i=r.getBoundingClientRect().top+window.pageYOffset,s=e.pageX||(e.touches?e.touches[0].pageX:0),c=e.pageY||(e.touches?e.touches[0].pageY:0),l=le(s-a,0,n),h=le(c-i,0,o),u=l/n,p=le(-h/o+1,0,1);this.throttle(this.onChange,{h:this.colors.hsv.h,s:u,v:p,a:this.colors.hsv.a,source:"hsva"})},onChange(e){this.$emit("change",e)},handleMouseDown(e){window.addEventListener("mousemove",this.handleChange),window.addEventListener("mouseup",this.handleChange),window.addEventListener("mouseup",this.handleMouseUp)},handleMouseUp(e){this.unbindEventListeners()},unbindEventListeners(){window.removeEventListener("mousemove",this.handleChange),window.removeEventListener("mouseup",this.handleChange),window.removeEventListener("mouseup",this.handleMouseUp)}}};const lt=(0,a.createElementVNode)("div",{class:"vc-saturation--white"},null,-1),ht=(0,a.createElementVNode)("div",{class:"vc-saturation--black"},null,-1),ut=(0,a.createElementVNode)("div",{class:"vc-saturation-circle"},null,-1),pt=[ut];function dt(e,t,r,n,o,i){return(0,a.openBlock)(),(0,a.createElementBlock)("div",{class:"vc-saturation",style:(0,a.normalizeStyle)({background:i.bgColor}),ref:"container",onMousedown:t[0]||(t[0]=(...e)=>i.handleMouseDown&&i.handleMouseDown(...e)),onTouchmove:t[1]||(t[1]=(...e)=>i.handleChange&&i.handleChange(...e)),onTouchstart:t[2]||(t[2]=(...e)=>i.handleChange&&i.handleChange(...e))},[lt,ht,(0,a.createElementVNode)("div",{class:"vc-saturation-pointer",style:(0,a.normalizeStyle)({top:i.pointerTop,left:i.pointerLeft})},pt,4)],36)}var ft=".vc-saturation,.vc-saturation--black,.vc-saturation--white{bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0}.vc-saturation--white{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.vc-saturation--black{background:linear-gradient(0deg,#000,transparent)}.vc-saturation-pointer{cursor:pointer;position:absolute}.vc-saturation-circle{border-radius:50%;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);cursor:head;height:4px;transform:translate(-2px,-2px);width:4px}";Q(ft),ct.render=dt,ct.__file="src/components/saturation/saturation.vue",ct.install=te;var gt={name:"Hue",props:{value:Object,direction:{type:String,default:"horizontal"}},data(){return{oldHue:0,pullDirection:""}},computed:{colors(){const{h:e}=this.value.hsl;return 0!==e&&e-this.oldHue>0&&(this.pullDirection="right"),0!==e&&e-this.oldHue<0&&(this.pullDirection="left"),this.oldHue=e,this.value},directionClass(){return{"vc-hue--horizontal":"horizontal"===this.direction,"vc-hue--vertical":"vertical"===this.direction}},pointerTop(){return"vertical"===this.direction?0===this.colors.hsl.h&&"right"===this.pullDirection?0:-100*this.colors.hsl.h/360+100+"%":0},pointerLeft(){return"vertical"===this.direction?0:0===this.colors.hsl.h&&"right"===this.pullDirection?"100%":100*this.colors.hsl.h/360+"%"}},methods:{handleChange(e,t){!t&&e.preventDefault();const{container:r}=this.$refs;if(!r)return;const n=r.clientWidth,o=r.clientHeight,a=r.getBoundingClientRect().left+window.pageXOffset,i=r.getBoundingClientRect().top+window.pageYOffset,s=e.pageX||(e.touches?e.touches[0].pageX:0),c=e.pageY||(e.touches?e.touches[0].pageY:0),l=s-a,h=c-i;let u,p;"vertical"===this.direction?(h<0?u=360:h>o?u=0:(p=-100*h/o+100,u=360*p/100),this.colors.hsl.h!==u&&this.$emit("change",{h:u,s:this.colors.hsl.s,l:this.colors.hsl.l,a:this.colors.hsl.a,source:"hsl"})):(l<0?u=0:l>n?u=360:(p=100*l/n,u=360*p/100),this.colors.hsl.h!==u&&this.$emit("change",{h:u,s:this.colors.hsl.s,l:this.colors.hsl.l,a:this.colors.hsl.a,source:"hsl"}))},handleMouseDown(e){this.handleChange(e,!0),window.addEventListener("mousemove",this.handleChange),window.addEventListener("mouseup",this.handleChange),window.addEventListener("mouseup",this.handleMouseUp)},handleMouseUp(e){this.unbindEventListeners()},unbindEventListeners(){window.removeEventListener("mousemove",this.handleChange),window.removeEventListener("mouseup",this.handleChange),window.removeEventListener("mouseup",this.handleMouseUp)}}};const vt=["aria-valuenow"],bt=(0,a.createElementVNode)("div",{class:"vc-hue-picker"},null,-1),mt=[bt];function xt(e,t,r,n,o,i){return(0,a.openBlock)(),(0,a.createElementBlock)("div",{class:(0,a.normalizeClass)(["vc-hue",i.directionClass])},[(0,a.createElementVNode)("div",{class:"vc-hue-container",role:"slider","aria-valuenow":i.colors.hsl.h,"aria-valuemin":"0","aria-valuemax":"360",ref:"container",onMousedown:t[0]||(t[0]=(...e)=>i.handleMouseDown&&i.handleMouseDown(...e)),onTouchmove:t[1]||(t[1]=(...e)=>i.handleChange&&i.handleChange(...e)),onTouchstart:t[2]||(t[2]=(...e)=>i.handleChange&&i.handleChange(...e))},[(0,a.createElementVNode)("div",{class:"vc-hue-pointer",style:(0,a.normalizeStyle)({top:i.pointerTop,left:i.pointerLeft}),role:"presentation"},mt,4)],40,vt)],2)}var wt=".vc-hue{border-radius:2px;bottom:0;left:0;position:absolute;right:0;top:0}.vc-hue--horizontal{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.vc-hue--vertical{background:linear-gradient(0deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.vc-hue-container{cursor:pointer;height:100%;margin:0 2px;position:relative}.vc-hue-pointer{position:absolute;z-index:2}.vc-hue-picker{background:#fff;border-radius:1px;box-shadow:0 0 2px rgba(0,0,0,.6);cursor:pointer;height:8px;margin-top:1px;transform:translateX(-2px);width:4px}";Q(wt),gt.render=xt,gt.__file="src/components/hue/hue.vue",gt.install=te;const kt={};var yt={name:"Checkboard",props:{size:{type:[Number,String],default:8},white:{type:String,default:"#fff"},grey:{type:String,default:"#e6e6e6"}},computed:{bgStyle(){return{"background-image":`url(${_t(this.white,this.grey,this.size)})`}}}};function Ct(e,t,r){if("undefined"===typeof document)return null;const n=document.createElement("canvas");n.width=n.height=2*r;const o=n.getContext("2d");return o?(o.fillStyle=e,o.fillRect(0,0,n.width,n.height),o.fillStyle=t,o.fillRect(0,0,r,r),o.translate(r,r),o.fillRect(0,0,r,r),n.toDataURL()):null}function _t(e,t,r){const n=`${e},${t},${r}`;if(kt[n])return kt[n];const o=Ct(e,t,r);return kt[n]=o,o}function Et(e,t,r,n,o,i){return(0,a.openBlock)(),(0,a.createElementBlock)("div",{class:"vc-checkerboard",style:(0,a.normalizeStyle)(i.bgStyle)},null,4)}var St=".vc-checkerboard{background-size:contain;bottom:0;left:0;position:absolute;right:0;top:0}";Q(St),yt.render=Et,yt.__file="src/components/checkboard/checkboard.vue",yt.install=te;var Nt={name:"Alpha",props:{value:Object,onChange:Function},components:{checkboard:yt},computed:{colors(){return this.value},gradientColor(){const{rgba:e}=this.colors,t=[e.r,e.g,e.b].join(",");return`linear-gradient(to right, rgba(${t}, 0) 0%, rgba(${t}, 1) 100%)`}},methods:{handleChange(e,t){!t&&e.preventDefault();const{container:r}=this.$refs;if(!r)return;const n=r.clientWidth,o=r.getBoundingClientRect().left+window.pageXOffset,a=e.pageX||(e.touches?e.touches[0].pageX:0),i=a-o;let s;s=i<0?0:i>n?1:Math.round(100*i/n)/100,this.colors.a!==s&&this.$emit("change",{h:this.colors.hsl.h,s:this.colors.hsl.s,l:this.colors.hsl.l,a:s,source:"rgba"})},handleMouseDown(e){this.handleChange(e,!0),window.addEventListener("mousemove",this.handleChange),window.addEventListener("mouseup",this.handleMouseUp)},handleMouseUp(){this.unbindEventListeners()},unbindEventListeners(){window.removeEventListener("mousemove",this.handleChange),window.removeEventListener("mouseup",this.handleMouseUp)}}};const At={class:"vc-alpha"},Vt={class:"vc-alpha-checkboard-wrap"},Bt=(0,a.createElementVNode)("div",{class:"vc-alpha-picker"},null,-1),Ft=[Bt];function Mt(e,t,r,n,o,i){const s=(0,a.resolveComponent)("checkboard");return(0,a.openBlock)(),(0,a.createElementBlock)("div",At,[(0,a.createElementVNode)("div",Vt,[(0,a.createVNode)(s)]),(0,a.createElementVNode)("div",{class:"vc-alpha-gradient",style:(0,a.normalizeStyle)({background:i.gradientColor})},null,4),(0,a.createElementVNode)("div",{class:"vc-alpha-container",ref:"container",onMousedown:t[0]||(t[0]=(...e)=>i.handleMouseDown&&i.handleMouseDown(...e)),onTouchmove:t[1]||(t[1]=(...e)=>i.handleChange&&i.handleChange(...e)),onTouchstart:t[2]||(t[2]=(...e)=>i.handleChange&&i.handleChange(...e))},[(0,a.createElementVNode)("div",{class:"vc-alpha-pointer",style:(0,a.normalizeStyle)({left:100*i.colors.a+"%"})},Ft,4)],544)])}var Lt=".vc-alpha,.vc-alpha-checkboard-wrap{bottom:0;left:0;position:absolute;right:0;top:0}.vc-alpha-checkboard-wrap{overflow:hidden}.vc-alpha-gradient{bottom:0;left:0;position:absolute;right:0;top:0}.vc-alpha-container{cursor:pointer;height:100%;margin:0 3px;position:relative;z-index:2}.vc-alpha-pointer{position:absolute;z-index:2}.vc-alpha-picker{background:#fff;border-radius:1px;box-shadow:0 0 2px rgba(0,0,0,.6);cursor:pointer;height:8px;margin-top:1px;transform:translateX(-2px);width:4px}";Q(Lt),Nt.render=Mt,Nt.__file="src/components/alpha/alpha.vue",Nt.install=te;const zt=["#D0021B","#F5A623","#F8E71C","#8B572A","#7ED321","#417505","#BD10E0","#9013FE","#4A90E2","#50E3C2","#B8E986","#000000","#4A4A4A","#9B9B9B","#FFFFFF","rgba(0,0,0,0)"];var Ot={name:"Sketch",mixins:[Z],components:{saturation:ct,hue:gt,alpha:Nt,"ed-in":re,checkboard:yt},props:{presetColors:{type:Array,default(){return zt}},disableAlpha:{type:Boolean,default:!1},disableFields:{type:Boolean,default:!1}},computed:{hex(){let e;return e=this.colors.a<1?this.colors.hex8:this.colors.hex,e.replace("#","")},activeColor(){const{rgba:e}=this.colors;return`rgba(${[e.r,e.g,e.b,e.a].join(",")})`}},methods:{handlePreset(e){this.colorChange(e)},childChange(e){this.colorChange(e)},inputChange(e){e&&(e.hex?this.isValidHex(e.hex)&&this.colorChange({hex:e.hex,source:"hex"}):(e.r||e.g||e.b||e.a)&&this.colorChange({r:e.r||this.colors.rgba.r,g:e.g||this.colors.rgba.g,b:e.b||this.colors.rgba.b,a:e.a||this.colors.rgba.a,source:"rgba"}))}}};const Rt={class:"vc-sketch-saturation-wrap"},jt={class:"vc-sketch-controls"},Dt={class:"vc-sketch-sliders"},Tt={class:"vc-sketch-hue-wrap"},Ht={key:0,class:"vc-sketch-alpha-wrap"},It={class:"vc-sketch-color-wrap"},$t=["aria-label"],Pt={key:0,class:"vc-sketch-field"},Ut={class:"vc-sketch-field--double"},qt={class:"vc-sketch-field--single"},Wt={class:"vc-sketch-field--single"},Gt={class:"vc-sketch-field--single"},Xt={key:0,class:"vc-sketch-field--single"},Yt={class:"vc-sketch-presets",role:"group","aria-label":"A color preset, pick one to set as current color"},Kt=["aria-label","onClick"],Zt=["aria-label","onClick"];function Qt(e,t,r,n,o,i){const s=(0,a.resolveComponent)("saturation"),c=(0,a.resolveComponent)("hue"),l=(0,a.resolveComponent)("alpha"),h=(0,a.resolveComponent)("checkboard"),u=(0,a.resolveComponent)("ed-in");return(0,a.openBlock)(),(0,a.createElementBlock)("div",{role:"application","aria-label":"Sketch color picker",class:(0,a.normalizeClass)(["vc-sketch",r.disableAlpha?"vc-sketch__disable-alpha":""])},[(0,a.createElementVNode)("div",Rt,[(0,a.createVNode)(s,{value:e.colors,onChange:i.childChange},null,8,["value","onChange"])]),(0,a.createElementVNode)("div",jt,[(0,a.createElementVNode)("div",Dt,[(0,a.createElementVNode)("div",Tt,[(0,a.createVNode)(c,{value:e.colors,onChange:i.childChange},null,8,["value","onChange"])]),r.disableAlpha?(0,a.createCommentVNode)("v-if",!0):((0,a.openBlock)(),(0,a.createElementBlock)("div",Ht,[(0,a.createVNode)(l,{value:e.colors,onChange:i.childChange},null,8,["value","onChange"])]))]),(0,a.createElementVNode)("div",It,[(0,a.createElementVNode)("div",{"aria-label":`Current color is ${i.activeColor}`,class:"vc-sketch-active-color",style:(0,a.normalizeStyle)({background:i.activeColor})},null,12,$t),(0,a.createVNode)(h)])]),r.disableFields?(0,a.createCommentVNode)("v-if",!0):((0,a.openBlock)(),(0,a.createElementBlock)("div",Pt,[(0,a.createCommentVNode)(" rgba "),(0,a.createElementVNode)("div",Ut,[(0,a.createVNode)(u,{label:"hex",value:i.hex,onChange:i.inputChange},null,8,["value","onChange"])]),(0,a.createElementVNode)("div",qt,[(0,a.createVNode)(u,{label:"r",value:e.colors.rgba.r,onChange:i.inputChange},null,8,["value","onChange"])]),(0,a.createElementVNode)("div",Wt,[(0,a.createVNode)(u,{label:"g",value:e.colors.rgba.g,onChange:i.inputChange},null,8,["value","onChange"])]),(0,a.createElementVNode)("div",Gt,[(0,a.createVNode)(u,{label:"b",value:e.colors.rgba.b,onChange:i.inputChange},null,8,["value","onChange"])]),r.disableAlpha?(0,a.createCommentVNode)("v-if",!0):((0,a.openBlock)(),(0,a.createElementBlock)("div",Xt,[(0,a.createVNode)(u,{label:"a",value:e.colors.a,"arrow-offset":.01,max:1,onChange:i.inputChange},null,8,["value","arrow-offset","onChange"])]))])),(0,a.createElementVNode)("div",Yt,[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(r.presetColors,(t=>((0,a.openBlock)(),(0,a.createElementBlock)(a.Fragment,null,[e.isTransparent(t)?((0,a.openBlock)(),(0,a.createElementBlock)("div",{key:t,"aria-label":"Color:"+t,class:"vc-sketch-presets-color",onClick:e=>i.handlePreset(t)},[(0,a.createVNode)(h)],8,Zt)):((0,a.openBlock)(),(0,a.createElementBlock)("div",{key:`!${t}`,class:"vc-sketch-presets-color","aria-label":"Color:"+t,style:(0,a.normalizeStyle)({background:t}),onClick:e=>i.handlePreset(t)},null,12,Kt))],64)))),256))])],2)}var Jt=".vc-sketch{background:#fff;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 8px 16px rgba(0,0,0,.15);box-sizing:initial;padding:10px 10px 0;position:relative;width:200px}.vc-sketch-saturation-wrap{overflow:hidden;padding-bottom:75%;position:relative;width:100%}.vc-sketch-controls{display:flex}.vc-sketch-sliders{flex:1;padding:4px 0}.vc-sketch-sliders .vc-alpha-gradient,.vc-sketch-sliders .vc-hue{border-radius:2px}.vc-sketch-alpha-wrap,.vc-sketch-hue-wrap{height:10px;position:relative}.vc-sketch-alpha-wrap{margin-top:4px;overflow:hidden}.vc-sketch-color-wrap{border-radius:3px;height:24px;margin-left:4px;margin-top:4px;position:relative;width:24px}.vc-sketch-active-color{border-radius:2px;bottom:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),inset 0 0 4px rgba(0,0,0,.25);left:0;position:absolute;right:0;top:0;z-index:2}.vc-sketch-color-wrap .vc-checkerboard{background-size:auto}.vc-sketch-field{display:flex;padding-top:4px}.vc-sketch-field .vc-input__input{border:none;box-shadow:inset 0 0 0 1px #ccc;font-size:10px;padding:4px 0 3px 10%;width:90%}.vc-sketch-field .vc-input__label{color:#222;display:block;font-size:11px;padding-bottom:4px;padding-top:3px;text-align:center;text-transform:capitalize}.vc-sketch-field--single{flex:1;padding-left:6px}.vc-sketch-field--double{flex:2}.vc-sketch-presets{border-top:1px solid #eee;margin-left:-10px;margin-right:-10px;padding-left:10px;padding-top:10px}.vc-sketch-presets-color{cursor:pointer;display:inline-block;height:16px;margin:0 10px 10px 0;overflow:hidden;position:relative;vertical-align:top;width:16px}.vc-sketch-presets-color,.vc-sketch-presets-color .vc-checkerboard{border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}.vc-sketch__disable-alpha .vc-sketch-color-wrap{height:10px}";function er(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}Q(Jt),Ot.render=Qt,Ot.__file="src/components/sketch/sketch.vue",Ot.install=te;var tr=n(7621),rr=n.n(tr);n(1703);class nr extends Error{constructor(e){super(e),this.name="GradientError"}}const or=[["#0359b5",0],["#f6ce01",1]],ar=0,ir=1;class sr{constructor({stops:e=or,limit:t=null}={}){er(this,"_stops",[]),er(this,"_limit",null),this._stops=e,this._limit=t}get stops(){return this._stops}set stops(e){const t=sr._stopArrayValidator(e);if(t)throw new nr(`Wrong stops format, ${t}`);this._stops=e}get limit(){return this._limit}static _stopPointValidator(e){if(!Array.isArray(e))return"point must be an array";if(2!==e.length)return"wrong point format";const t=e[ir];if("number"!==typeof t)return"position must be a number";if(t!==Number(t))return"position must be a number";if(t<0)return"position must be between 0 and 1";if(t>1)return"position must be between 0 and 1";const r=rr()(e[ar]);return r.isValid()?null:"color is invalid"}static _stopArrayValidator(e){return Array.isArray(e)?e.length<2?"wrong array format":null:"must be an array"}addStop(e){if(this._limit&&this._stops.length>=this._limit)throw new nr("Too many stop points");const t=sr._stopPointValidator(e);if(t)throw new nr(`Wrong stop format, ${t}`);this.stops.push(e)}removeStopByIndex(e){if(this._stops.length<3)throw new nr("Can't remove stop point");if(this._stops.length<=e)throw new nr("Can't remove stop point");this._stops.splice(e,1)}}const cr=0,lr=1;class hr extends sr{constructor({angle:e=0,stops:t,limit:r}={}){super({stops:t,limit:r}),er(this,"_type","linear"),er(this,"_angle",null),this._type="linear",this._angle=e}get angle(){return this._angle}set angle(e){const t=hr._angleValidator(e);if(t)throw new nr(`Wrong angle value, ${t}`);this._angle=e}get type(){return this._type}static _angleValidator(e){return"number"!==typeof e||e!==Number(e)?"must be a number":e<0||e>360?"must be between 0 and 360":null}toString(e="hex8"){const t=this.stops.slice().sort(((e,t)=>e[lr]-t[lr])).map((t=>`${rr()(t[cr]).toString(e)} ${(100*t[lr]).toFixed()}%`)).join(", ");return`linear-gradient(${this.angle}deg, ${t})`}toRaw(e="hex8"){const t=this.stops.slice().sort(((e,t)=>e[lr]-t[lr])).map((t=>(t[cr]=rr()(t[cr]).toString(e),t)));return{type:this.type,angle:this.angle,stops:t,limit:this.limit}}}var ur=hr;const pr=0,dr=1,fr=50;var gr={components:{colorPicker:Ot},props:{modelValue:{type:ur,default:()=>new ur}},emits:["update:modelValue"],data(){return this.containerBoundingClientRectangle={},{currentStopIdx:0}},computed:{angle:{get(){return this.modelValue.angle},set(e){let t=parseInt(e,10)||0;t<0&&(t=0);while(t>360)t=360;this.emitInput(t,this.stops,this.limit)}},stops(){return this.modelValue.stops.slice().map((e=>[...e]))},previewStyle(){return{background:this.getGradientString(this.angle)}},stopsPreviewStyle(){return{background:this.getGradientString(90)}},currentColor:{get(){return this.stops[this.currentStopIdx][pr]},set(e){this.stops[this.currentStopIdx][pr]=e.hex8,this.emitInput(this.angle,this.stops,this.limit)}},orderedStops(){return this.stops.slice().sort(((e,t)=>e[dr]-t[dr]))},limit(){return this.modelValue.limit}},beforeUnmount(){this.unbindEventListeners()},methods:{emitInput(e,t,r){this.$emit("update:modelValue",new ur({angle:e,stops:t,limit:r}))},getGradientString(e){const t=this.orderedStops.map((e=>`${e[pr].toString()} ${100*e[dr]}%`)).join(",");return`linear-gradient(${e}deg, ${t})`},setCurrentStopIdx(e){this.currentStopIdx=e},stopStyle(e){const t=this.stops[e];return{left:100*t[dr]+"%",color:t[pr].toString()}},addStop(e){if(this.limit&&this.stops.length>=this.limit)return;const t=Math.round(100*e.offsetX/e.target.offsetWidth)/100,r=this.stops.length;this.stops.push([this.currentColor,t]),this.setCurrentStopIdx(r),this.emitInput(this.angle,this.stops,this.limit)},removeCurrentStop(){this.stops.splice(this.currentStopIdx,1),this.currentStopIdx>0&&this.setCurrentStopIdx(this.currentStopIdx-1),this.unbindEventListeners(),this.emitInput(this.angle,this.stops,this.limit)},setContainerBoundingClientRectangle(){this.containerBoundingClientRectangle=this.$refs.stopsContainer.getBoundingClientRect()},handleChange(e){if(e.preventDefault(),e.stopPropagation(),this.stops.length>2){const t=(e.touches?e.touches[0].clientY:e.clientY)||0,r=Math.abs(t-this.containerBoundingClientRectangle.bottom);if(r>fr)return void this.removeCurrentStop()}const t=(e.touches?e.touches[0].clientX:e.clientX)||0,r=t-this.containerBoundingClientRectangle.left,n=this.containerBoundingClientRectangle.width;let o;o=r<0?0:r>n?1:Math.round(100*r/n)/100;const a=this.stops[this.currentStopIdx][dr];this.stops[this.currentStopIdx][dr]=o,a!=o&&this.emitInput(this.angle,this.stops,this.limit)},handleMouseDown(e){this.setCurrentStopIdx(e),this.setContainerBoundingClientRectangle(),window.addEventListener("mousemove",this.handleChange),window.addEventListener("mouseup",this.handleMouseUp)},handleMouseUp(){this.unbindEventListeners()},unbindEventListeners(){window.removeEventListener("mousemove",this.handleChange),window.removeEventListener("mouseup",this.handleMouseUp),window.removeEventListener("touchmove",this.handleChange,{passive:!1}),window.removeEventListener("touchend",this.handleTouchend),window.removeEventListener("touchcancel",this.handleTouchend)},handleTouchstart(e){this.setCurrentStopIdx(e),this.setContainerBoundingClientRectangle(),window.addEventListener("touchmove",this.handleChange,{passive:!1}),window.addEventListener("touchend",this.handleTouchend),window.addEventListener("touchcancel",this.handleTouchend)},handleTouchend(){this.unbindEventListeners()}}},vr=(n(571),n(3744));const br=(0,vr.Z)(gr,[["render",m],["__scopeId","data-v-31278663"]]);var mr=br;function xr(e={}){return t=>{const{components:r,componentPrefix:n=J,componentSize:o=ee}=e;t.config.globalProperties.$VUI={size:o,prefix:n},(Array.isArray(r)?r:Object.values(r)).forEach((e=>{t.component(`${n}${e.name}`,e)}))}}var wr={name:"Chrome",mixins:[Z],props:{disableAlpha:{type:Boolean,default:!1},disableFields:{type:Boolean,default:!1}},components:{saturation:ct,hue:gt,alpha:Nt,"ed-in":re,checkboard:yt},data(){return{fieldsIndex:0,highlight:!1}},computed:{hsl(){const{h:e,s:t,l:r}=this.colors.hsl;return{h:e.toFixed(),s:`${(100*t).toFixed()}%`,l:`${(100*r).toFixed()}%`}},activeColor(){const{rgba:e}=this.colors;return`rgba(${[e.r,e.g,e.b,e.a].join(",")})`},hasAlpha(){return this.colors.a<1}},methods:{childChange(e){this.colorChange(e)},inputChange(e){if(e)if(e.hex)this.isValidHex(e.hex)&&this.colorChange({hex:e.hex,source:"hex"});else if(e.r||e.g||e.b||e.a)this.colorChange({r:e.r||this.colors.rgba.r,g:e.g||this.colors.rgba.g,b:e.b||this.colors.rgba.b,a:e.a||this.colors.rgba.a,source:"rgba"});else if(e.h||e.s||e.l){const t=e.s?e.s.replace("%","")/100:this.colors.hsl.s,r=e.l?e.l.replace("%","")/100:this.colors.hsl.l;this.colorChange({h:e.h||this.colors.hsl.h,s:t,l:r,source:"hsl"})}},toggleViews(){this.fieldsIndex>=2?this.fieldsIndex=0:this.fieldsIndex++},showHighlight(){this.highlight=!0},hideHighlight(){this.highlight=!1}}};const kr={class:"vc-chrome-saturation-wrap"},yr={class:"vc-chrome-body"},Cr={class:"vc-chrome-controls"},_r={class:"vc-chrome-color-wrap"},Er=["aria-label"],Sr={class:"vc-chrome-sliders"},Nr={class:"vc-chrome-hue-wrap"},Ar={key:0,class:"vc-chrome-alpha-wrap"},Vr={key:0,class:"vc-chrome-fields-wrap"},Br={class:"vc-chrome-fields"},Fr={class:"vc-chrome-field"},Mr={class:"vc-chrome-fields"},Lr={class:"vc-chrome-field"},zr={class:"vc-chrome-field"},Or={class:"vc-chrome-field"},Rr={key:0,class:"vc-chrome-field"},jr={class:"vc-chrome-fields"},Dr={class:"vc-chrome-field"},Tr={class:"vc-chrome-field"},Hr={class:"vc-chrome-field"},Ir={key:0,class:"vc-chrome-field"},$r={class:"vc-chrome-toggle-icon"},Pr=(0,a.createElementVNode)("path",{fill:"#333",d:"M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"},null,-1),Ur=[Pr],qr={class:"vc-chrome-toggle-icon-highlight"};function Wr(e,t,r,n,o,i){const s=(0,a.resolveComponent)("saturation"),c=(0,a.resolveComponent)("checkboard"),l=(0,a.resolveComponent)("hue"),h=(0,a.resolveComponent)("alpha"),u=(0,a.resolveComponent)("ed-in");return(0,a.openBlock)(),(0,a.createElementBlock)("div",{role:"application","aria-label":"Chrome color picker",class:(0,a.normalizeClass)(["vc-chrome",r.disableAlpha?"vc-chrome__disable-alpha":""])},[(0,a.createElementVNode)("div",kr,[(0,a.createVNode)(s,{value:e.colors,onChange:i.childChange},null,8,["value","onChange"])]),(0,a.createElementVNode)("div",yr,[(0,a.createElementVNode)("div",Cr,[(0,a.createElementVNode)("div",_r,[(0,a.createElementVNode)("div",{"aria-label":`current color is ${e.colors.hex}`,class:"vc-chrome-active-color",style:(0,a.normalizeStyle)({background:i.activeColor})},null,12,Er),r.disableAlpha?(0,a.createCommentVNode)("v-if",!0):((0,a.openBlock)(),(0,a.createBlock)(c,{key:0}))]),(0,a.createElementVNode)("div",Sr,[(0,a.createElementVNode)("div",Nr,[(0,a.createVNode)(l,{value:e.colors,onChange:i.childChange},null,8,["value","onChange"])]),r.disableAlpha?(0,a.createCommentVNode)("v-if",!0):((0,a.openBlock)(),(0,a.createElementBlock)("div",Ar,[(0,a.createVNode)(h,{value:e.colors,onChange:i.childChange},null,8,["value","onChange"])]))])]),r.disableFields?(0,a.createCommentVNode)("v-if",!0):((0,a.openBlock)(),(0,a.createElementBlock)("div",Vr,[(0,a.withDirectives)((0,a.createElementVNode)("div",Br,[(0,a.createCommentVNode)(" hex "),(0,a.createElementVNode)("div",Fr,[i.hasAlpha?(0,a.createCommentVNode)("v-if",!0):((0,a.openBlock)(),(0,a.createBlock)(u,{key:0,label:"hex",value:e.colors.hex,onChange:i.inputChange},null,8,["value","onChange"])),i.hasAlpha?((0,a.openBlock)(),(0,a.createBlock)(u,{key:1,label:"hex",value:e.colors.hex8,onChange:i.inputChange},null,8,["value","onChange"])):(0,a.createCommentVNode)("v-if",!0)])],512),[[a.vShow,0===o.fieldsIndex]]),(0,a.withDirectives)((0,a.createElementVNode)("div",Mr,[(0,a.createCommentVNode)(" rgba "),(0,a.createElementVNode)("div",Lr,[(0,a.createVNode)(u,{label:"r",value:e.colors.rgba.r,onChange:i.inputChange},null,8,["value","onChange"])]),(0,a.createElementVNode)("div",zr,[(0,a.createVNode)(u,{label:"g",value:e.colors.rgba.g,onChange:i.inputChange},null,8,["value","onChange"])]),(0,a.createElementVNode)("div",Or,[(0,a.createVNode)(u,{label:"b",value:e.colors.rgba.b,onChange:i.inputChange},null,8,["value","onChange"])]),r.disableAlpha?(0,a.createCommentVNode)("v-if",!0):((0,a.openBlock)(),(0,a.createElementBlock)("div",Rr,[(0,a.createVNode)(u,{label:"a",value:e.colors.a,"arrow-offset":.01,max:1,onChange:i.inputChange},null,8,["value","arrow-offset","onChange"])]))],512),[[a.vShow,1===o.fieldsIndex]]),(0,a.withDirectives)((0,a.createElementVNode)("div",jr,[(0,a.createCommentVNode)(" hsla "),(0,a.createElementVNode)("div",Dr,[(0,a.createVNode)(u,{label:"h",value:i.hsl.h,onChange:i.inputChange},null,8,["value","onChange"])]),(0,a.createElementVNode)("div",Tr,[(0,a.createVNode)(u,{label:"s",value:i.hsl.s,onChange:i.inputChange},null,8,["value","onChange"])]),(0,a.createElementVNode)("div",Hr,[(0,a.createVNode)(u,{label:"l",value:i.hsl.l,onChange:i.inputChange},null,8,["value","onChange"])]),r.disableAlpha?(0,a.createCommentVNode)("v-if",!0):((0,a.openBlock)(),(0,a.createElementBlock)("div",Ir,[(0,a.createVNode)(u,{label:"a",value:e.colors.a,"arrow-offset":.01,max:1,onChange:i.inputChange},null,8,["value","arrow-offset","onChange"])]))],512),[[a.vShow,2===o.fieldsIndex]]),(0,a.createCommentVNode)(" btn "),(0,a.createElementVNode)("div",{class:"vc-chrome-toggle-btn",role:"button","aria-label":"Change another color definition",onClick:t[3]||(t[3]=(...e)=>i.toggleViews&&i.toggleViews(...e))},[(0,a.createElementVNode)("div",$r,[((0,a.openBlock)(),(0,a.createElementBlock)("svg",{style:{width:"24px",height:"24px"},viewBox:"0 0 24 24",onMouseover:t[0]||(t[0]=(...e)=>i.showHighlight&&i.showHighlight(...e)),onMouseenter:t[1]||(t[1]=(...e)=>i.showHighlight&&i.showHighlight(...e)),onMouseout:t[2]||(t[2]=(...e)=>i.hideHighlight&&i.hideHighlight(...e))},Ur,32))]),(0,a.withDirectives)((0,a.createElementVNode)("div",qr,null,512),[[a.vShow,o.highlight]])]),(0,a.createCommentVNode)(" btn ")]))])],2)}var Gr=".vc-chrome{background:#fff;background-color:#fff;border-radius:2px;box-shadow:0 0 2px rgba(0,0,0,.3),0 4px 8px rgba(0,0,0,.3);box-sizing:initial;font-family:Menlo;width:225px}.vc-chrome-controls{display:flex}.vc-chrome-color-wrap{position:relative;width:36px}.vc-chrome-active-color{border-radius:15px;height:30px;overflow:hidden;position:relative;width:30px;z-index:1}.vc-chrome-color-wrap .vc-checkerboard{background-size:auto;border-radius:15px;height:30px;width:30px}.vc-chrome-sliders{flex:1}.vc-chrome-fields-wrap{display:flex;padding-top:16px}.vc-chrome-fields{display:flex;flex:1;margin-left:-6px}.vc-chrome-field{padding-left:6px;width:100%}.vc-chrome-toggle-btn{position:relative;text-align:right;width:32px}.vc-chrome-toggle-icon{cursor:pointer;margin-right:-4px;margin-top:12px;position:relative;z-index:2}.vc-chrome-toggle-icon-highlight{background:#eee;border-radius:4px;height:28px;left:12px;position:absolute;top:10px;width:24px}.vc-chrome-hue-wrap{margin-bottom:8px}.vc-chrome-alpha-wrap,.vc-chrome-hue-wrap{height:10px;position:relative}.vc-chrome-alpha-wrap .vc-alpha-gradient,.vc-chrome-hue-wrap .vc-hue{border-radius:2px}.vc-chrome-alpha-wrap .vc-alpha-picker,.vc-chrome-hue-wrap .vc-hue-picker{background-color:#f8f8f8;border-radius:6px;box-shadow:0 1px 4px 0 rgba(0,0,0,.37);height:12px;transform:translate(-6px,-2px);width:12px}.vc-chrome-body{background-color:#fff;padding:16px 16px 12px}.vc-chrome-saturation-wrap{border-radius:2px 2px 0 0;overflow:hidden;padding-bottom:55%;position:relative;width:100%}.vc-chrome-saturation-wrap .vc-saturation-circle{height:12px;width:12px}.vc-chrome-fields .vc-input__input{border:none;border-radius:2px;box-shadow:inset 0 0 0 1px #dadada;color:#333;font-size:11px;height:21px;text-align:center;width:100%}.vc-chrome-fields .vc-input__label{color:#969696;display:block;font-size:11px;line-height:11px;margin-top:12px;text-align:center;text-transform:uppercase}.vc-chrome__disable-alpha .vc-chrome-active-color{height:18px;width:18px}.vc-chrome__disable-alpha .vc-chrome-color-wrap{width:30px}.vc-chrome__disable-alpha .vc-chrome-hue-wrap{margin-bottom:4px;margin-top:4px}";Q(Gr),wr.render=Wr,wr.__file="src/components/chrome/chrome.vue",wr.install=te;const Xr=["#4D4D4D","#999999","#FFFFFF","#F44E3B","#FE9200","#FCDC00","#DBDF00","#A4DD00","#68CCCA","#73D8FF","#AEA1FF","#FDA1FF","#333333","#808080","#CCCCCC","#D33115","#E27300","#FCC400","#B0BC00","#68BC00","#16A5A5","#009CE0","#7B64FF","#FA28FF","#000000","#666666","#B3B3B3","#9F0500","#C45100","#FB9E00","#808900","#194D33","#0C797D","#0062B1","#653294","#AB149E"];var Yr={name:"Compact",mixins:[Z],props:{palette:{type:Array,default(){return Xr}}},computed:{pick(){return this.colors.hex.toUpperCase()}},methods:{handlerClick(e){this.colorChange({hex:e,source:"hex"})}}};const Kr={role:"application","aria-label":"Compact color picker",class:"vc-compact"},Zr={class:"vc-compact-colors",role:"listbox"},Qr=["aria-label","aria-selected","onClick"],Jr={class:"vc-compact-dot"};function en(e,t,r,n,o,i){return(0,a.openBlock)(),(0,a.createElementBlock)("div",Kr,[(0,a.createElementVNode)("ul",Zr,[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(e.paletteUpperCase(r.palette),(e=>((0,a.openBlock)(),(0,a.createElementBlock)("li",{role:"option","aria-label":"color:"+e,"aria-selected":e===i.pick,class:(0,a.normalizeClass)(["vc-compact-color-item",{"vc-compact-color-item--white":"#FFFFFF"===e}]),key:e,style:(0,a.normalizeStyle)({background:e}),onClick:t=>i.handlerClick(e)},[(0,a.withDirectives)((0,a.createElementVNode)("div",Jr,null,512),[[a.vShow,e===i.pick]])],14,Qr)))),128))])])}var tn=".vc-compact{background-color:#fff;border-radius:2px;box-shadow:0 2px 10px rgba(0,0,0,.12),0 2px 5px rgba(0,0,0,.16);box-sizing:border-box;padding-left:5px;padding-top:5px;width:245px}.vc-compact-colors{margin:0;overflow:hidden;padding:0}.vc-compact-color-item{cursor:pointer;float:left;height:15px;list-style:none;margin-bottom:5px;margin-right:5px;position:relative;width:15px}.vc-compact-color-item--white{box-shadow:inset 0 0 0 1px #ddd}.vc-compact-color-item--white .vc-compact-dot{background:#000}.vc-compact-dot{background:#fff;border-radius:50%;bottom:5px;left:5px;opacity:1;position:absolute;right:5px;top:5px}";Q(tn),Yr.render=en,Yr.__file="src/components/compact/compact.vue",Yr.install=te;const rn=["#FFFFFF","#F2F2F2","#E6E6E6","#D9D9D9","#CCCCCC","#BFBFBF","#B3B3B3","#A6A6A6","#999999","#8C8C8C","#808080","#737373","#666666","#595959","#4D4D4D","#404040","#333333","#262626","#0D0D0D","#000000"];var nn={name:"Grayscale",mixins:[Z],props:{palette:{type:Array,default(){return rn}}},components:{},computed:{pick(){return this.colors.hex.toUpperCase()}},methods:{handlerClick(e){this.colorChange({hex:e,source:"hex"})}}};const on={role:"application","aria-label":"Grayscale color picker",class:"vc-grayscale"},an={class:"vc-grayscale-colors",role:"listbox"},sn=["aria-label","aria-selected","onClick"],cn={class:"vc-grayscale-dot"};function ln(e,t,r,n,o,i){return(0,a.openBlock)(),(0,a.createElementBlock)("div",on,[(0,a.createElementVNode)("ul",an,[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(e.paletteUpperCase(r.palette),(e=>((0,a.openBlock)(),(0,a.createElementBlock)("li",{role:"option","aria-label":"Color:"+e,"aria-selected":e===i.pick,key:e,class:(0,a.normalizeClass)(["vc-grayscale-color-item",{"vc-grayscale-color-item--white":"#FFFFFF"==e}]),style:(0,a.normalizeStyle)({background:e}),onClick:t=>i.handlerClick(e)},[(0,a.withDirectives)((0,a.createElementVNode)("div",cn,null,512),[[a.vShow,e===i.pick]])],14,sn)))),128))])])}var hn=".vc-grayscale{background-color:#fff;border-radius:2px;box-shadow:0 2px 15px rgba(0,0,0,.12),0 2px 10px rgba(0,0,0,.16);width:125px}.vc-grayscale-colors{border-radius:2px;margin:0;overflow:hidden;padding:0}.vc-grayscale-color-item{cursor:pointer;float:left;height:25px;list-style:none;position:relative;width:25px}.vc-grayscale-color-item--white .vc-grayscale-dot{background:#000}.vc-grayscale-dot{background:#fff;border-radius:50%;height:6px;left:50%;margin:-3px 0 0 -2px;opacity:1;position:absolute;top:50%;width:6px}";Q(hn),nn.render=ln,nn.__file="src/components/grayscale/grayscale.vue",nn.install=te;var un={name:"Material",mixins:[Z],components:{"ed-in":re},methods:{onChange(e){e&&(e.hex?this.isValidHex(e.hex)&&this.colorChange({hex:e.hex,source:"hex"}):(e.r||e.g||e.b)&&this.colorChange({r:e.r||this.colors.rgba.r,g:e.g||this.colors.rgba.g,b:e.b||this.colors.rgba.b,a:e.a||this.colors.rgba.a,source:"rgba"}))}}};const pn={role:"application","aria-label":"Material color picker",class:"vc-material"},dn={class:"vc-material-split"},fn={class:"vc-material-third"},gn={class:"vc-material-third"},vn={class:"vc-material-third"};function bn(e,t,r,n,o,i){const s=(0,a.resolveComponent)("ed-in");return(0,a.openBlock)(),(0,a.createElementBlock)("div",pn,[(0,a.createVNode)(s,{class:"vc-material-hex",label:"hex",value:e.colors.hex,style:(0,a.normalizeStyle)({borderColor:e.colors.hex}),onChange:i.onChange},null,8,["value","style","onChange"]),(0,a.createElementVNode)("div",dn,[(0,a.createElementVNode)("div",fn,[(0,a.createVNode)(s,{label:"r",value:e.colors.rgba.r,onChange:i.onChange},null,8,["value","onChange"])]),(0,a.createElementVNode)("div",gn,[(0,a.createVNode)(s,{label:"g",value:e.colors.rgba.g,onChange:i.onChange},null,8,["value","onChange"])]),(0,a.createElementVNode)("div",vn,[(0,a.createVNode)(s,{label:"b",value:e.colors.rgba.b,onChange:i.onChange},null,8,["value","onChange"])])])])}var mn=".vc-material{background-color:#fff;border-radius:2px;box-shadow:0 2px 10px rgba(0,0,0,.12),0 2px 5px rgba(0,0,0,.16);font-family:Roboto;height:98px;padding:16px;position:relative;width:98px}.vc-material .vc-input__input{color:#333;font-size:15px;height:30px;margin-top:12px;width:100%}.vc-material .vc-input__label{color:#999;font-size:11px;left:0;position:absolute;text-transform:capitalize;top:0}.vc-material-hex{border-bottom-style:solid;border-bottom-width:2px}.vc-material-split{display:flex;margin-right:-10px;padding-top:11px}.vc-material-third{flex:1;padding-right:10px}";Q(mn),un.render=bn,un.__file="src/components/material/material.vue",un.install=te;var xn={name:"Photoshop",mixins:[Z],props:{head:{type:String,default:"Color Picker"},disableFields:{type:Boolean,default:!1},hasResetButton:{type:Boolean,default:!1},acceptLabel:{type:String,default:"OK"},cancelLabel:{type:String,default:"Cancel"},resetLabel:{type:String,default:"Reset"},newLabel:{type:String,default:"new"},currentLabel:{type:String,default:"current"}},components:{saturation:ct,hue:gt,"ed-in":re},data(){return{currentColor:"#FFF"}},computed:{hsv(){const{hsv:e}=this.colors;return{h:e.h.toFixed(),s:(100*e.s).toFixed(),v:(100*e.v).toFixed()}},hex(){const{hex:e}=this.colors;return e&&e.replace("#","")}},created(){this.currentColor=this.colors.hex},methods:{childChange(e){this.colorChange(e)},inputChange(e){e&&(e["#"]?this.isValidHex(e["#"])&&this.colorChange({hex:e["#"],source:"hex"}):e.r||e.g||e.b||e.a?this.colorChange({r:e.r||this.colors.rgba.r,g:e.g||this.colors.rgba.g,b:e.b||this.colors.rgba.b,a:e.a||this.colors.rgba.a,source:"rgba"}):(e.h||e.s||e.v)&&this.colorChange({h:e.h||this.colors.hsv.h,s:e.s/100||this.colors.hsv.s,v:e.v/100||this.colors.hsv.v,source:"hsv"}))},clickCurrentColor(){this.colorChange({hex:this.currentColor,source:"hex"})},handleAccept(){this.$emit("ok")},handleCancel(){this.$emit("cancel")},handleReset(){this.$emit("reset")}}};const wn={role:"heading",class:"vc-ps-head"},kn={class:"vc-ps-body"},yn={class:"vc-ps-saturation-wrap"},Cn={class:"vc-ps-hue-wrap"},_n=(0,a.createElementVNode)("div",{class:"vc-ps-hue-pointer"},[(0,a.createElementVNode)("i",{class:"vc-ps-hue-pointer--left"}),(0,a.createElementVNode)("i",{class:"vc-ps-hue-pointer--right"})],-1),En={class:"vc-ps-previews"},Sn={class:"vc-ps-previews__label"},Nn={class:"vc-ps-previews__swatches"},An=["aria-label"],Vn=["aria-label"],Bn={class:"vc-ps-previews__label"},Fn={key:0,class:"vc-ps-actions"},Mn=["aria-label"],Ln=["aria-label"],zn={class:"vc-ps-fields"},On=(0,a.createElementVNode)("div",{class:"vc-ps-fields__divider"},null,-1),Rn=(0,a.createElementVNode)("div",{class:"vc-ps-fields__divider"},null,-1);function jn(e,t,r,n,o,i){const s=(0,a.resolveComponent)("saturation"),c=(0,a.resolveComponent)("hue"),l=(0,a.resolveComponent)("ed-in");return(0,a.openBlock)(),(0,a.createElementBlock)("div",{role:"application","aria-label":"PhotoShop color picker",class:(0,a.normalizeClass)(["vc-photoshop",r.disableFields?"vc-photoshop__disable-fields":""])},[(0,a.createElementVNode)("div",wn,(0,a.toDisplayString)(r.head),1),(0,a.createElementVNode)("div",kn,[(0,a.createElementVNode)("div",yn,[(0,a.createVNode)(s,{value:e.colors,onChange:i.childChange},null,8,["value","onChange"])]),(0,a.createElementVNode)("div",Cn,[(0,a.createVNode)(c,{value:e.colors,onChange:i.childChange,direction:"vertical"},{default:(0,a.withCtx)((()=>[_n])),_:1},8,["value","onChange"])]),(0,a.createElementVNode)("div",{class:(0,a.normalizeClass)(["vc-ps-controls",r.disableFields?"vc-ps-controls__disable-fields":""])},[(0,a.createElementVNode)("div",En,[(0,a.createElementVNode)("div",Sn,(0,a.toDisplayString)(r.newLabel),1),(0,a.createElementVNode)("div",Nn,[(0,a.createElementVNode)("div",{class:"vc-ps-previews__pr-color","aria-label":`New color is ${e.colors.hex}`,style:(0,a.normalizeStyle)({background:e.colors.hex})},null,12,An),(0,a.createElementVNode)("div",{class:"vc-ps-previews__pr-color","aria-label":`Current color is ${o.currentColor}`,style:(0,a.normalizeStyle)({background:o.currentColor}),onClick:t[0]||(t[0]=(...e)=>i.clickCurrentColor&&i.clickCurrentColor(...e))},null,12,Vn)]),(0,a.createElementVNode)("div",Bn,(0,a.toDisplayString)(r.currentLabel),1)]),r.disableFields?(0,a.createCommentVNode)("v-if",!0):((0,a.openBlock)(),(0,a.createElementBlock)("div",Fn,[(0,a.createElementVNode)("div",{class:"vc-ps-ac-btn",role:"button","aria-label":r.acceptLabel,onClick:t[1]||(t[1]=(...e)=>i.handleAccept&&i.handleAccept(...e))},(0,a.toDisplayString)(r.acceptLabel),9,Mn),(0,a.createElementVNode)("div",{class:"vc-ps-ac-btn",role:"button","aria-label":r.cancelLabel,onClick:t[2]||(t[2]=(...e)=>i.handleCancel&&i.handleCancel(...e))},(0,a.toDisplayString)(r.cancelLabel),9,Ln),(0,a.createElementVNode)("div",zn,[(0,a.createCommentVNode)(" hsla "),(0,a.createVNode)(l,{label:"h",desc:"°",value:i.hsv.h,onChange:i.inputChange},null,8,["value","onChange"]),(0,a.createVNode)(l,{label:"s",desc:"%",value:i.hsv.s,max:100,onChange:i.inputChange},null,8,["value","onChange"]),(0,a.createVNode)(l,{label:"v",desc:"%",value:i.hsv.v,max:100,onChange:i.inputChange},null,8,["value","onChange"]),On,(0,a.createCommentVNode)(" rgba "),(0,a.createVNode)(l,{label:"r",value:e.colors.rgba.r,onChange:i.inputChange},null,8,["value","onChange"]),(0,a.createVNode)(l,{label:"g",value:e.colors.rgba.g,onChange:i.inputChange},null,8,["value","onChange"]),(0,a.createVNode)(l,{label:"b",value:e.colors.rgba.b,onChange:i.inputChange},null,8,["value","onChange"]),Rn,(0,a.createCommentVNode)(" hex "),(0,a.createVNode)(l,{label:"#",class:"vc-ps-fields__hex",value:i.hex,onChange:i.inputChange},null,8,["value","onChange"])]),r.hasResetButton?((0,a.openBlock)(),(0,a.createElementBlock)("div",{key:0,class:"vc-ps-ac-btn","aria-label":"reset",onClick:t[3]||(t[3]=(...e)=>i.handleReset&&i.handleReset(...e))},(0,a.toDisplayString)(r.resetLabel),1)):(0,a.createCommentVNode)("v-if",!0)]))],2)])],2)}var Dn='.vc-photoshop{background:#dcdcdc;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 8px 16px rgba(0,0,0,.15);box-sizing:initial;font-family:Roboto;width:513px}.vc-photoshop__disable-fields{width:390px}.vc-ps-head{background-image:linear-gradient(-180deg,#f0f0f0,#d4d4d4);border-bottom:1px solid #b1b1b1;border-radius:4px 4px 0 0;box-shadow:inset 0 1px 0 0 hsla(0,0%,100%,.2),inset 0 -1px 0 0 rgba(0,0,0,.02);color:#4d4d4d;font-size:13px;height:23px;line-height:24px;text-align:center}.vc-ps-body{display:flex;padding:15px}.vc-ps-saturation-wrap{border:2px solid #b3b3b3;border-bottom-color:#f0f0f0;height:256px;overflow:hidden;position:relative;width:256px}.vc-ps-saturation-wrap .vc-saturation-circle{height:12px;width:12px}.vc-ps-hue-wrap{border:2px solid #b3b3b3;border-bottom-color:#f0f0f0;height:256px;margin-left:10px;width:19px}.vc-ps-hue-pointer,.vc-ps-hue-wrap{position:relative}.vc-ps-hue-pointer--left,.vc-ps-hue-pointer--right{border-color:transparent transparent transparent #555;border-style:solid;border-width:5px 0 5px 8px;height:0;position:absolute;width:0}.vc-ps-hue-pointer--left:after,.vc-ps-hue-pointer--right:after{border-color:transparent transparent transparent #fff;border-style:solid;border-width:4px 0 4px 6px;content:"";height:0;left:1px;position:absolute;top:1px;transform:translate(-8px,-5px);width:0}.vc-ps-hue-pointer--left{transform:translate(-13px,-4px)}.vc-ps-hue-pointer--right{transform:translate(20px,-4px) rotate(180deg)}.vc-ps-controls{display:flex;margin-left:10px;width:180px}.vc-ps-controls__disable-fields{width:auto}.vc-ps-actions{flex:1;margin-left:20px}.vc-ps-ac-btn{background-image:linear-gradient(-180deg,#fff,#e6e6e6);border:1px solid #878787;border-radius:2px;box-shadow:0 1px 0 0 #eaeaea;color:#000;cursor:pointer;font-size:14px;height:20px;line-height:20px;margin-bottom:10px;text-align:center}.vc-ps-previews{width:60px}.vc-ps-previews__swatches{border:1px solid #b3b3b3;border-bottom-color:#f0f0f0;margin-bottom:2px;margin-top:1px}.vc-ps-previews__pr-color{box-shadow:inset 1px 0 0 #000,inset -1px 0 0 #000,inset 0 1px 0 #000;height:34px}.vc-ps-previews__label{color:#000;font-size:14px;text-align:center}.vc-ps-fields{padding-bottom:9px;padding-top:5px;position:relative;width:80px}.vc-ps-fields .vc-input__input{border:1px solid #888;box-shadow:inset 0 1px 1px rgba(0,0,0,.1),0 1px 0 0 #ececec;font-size:13px;height:18px;margin-bottom:5px;margin-left:40%;margin-right:10px;padding-left:3px;width:40%}.vc-ps-fields .vc-input__desc,.vc-ps-fields .vc-input__label{font-size:13px;height:18px;line-height:22px;position:absolute;text-transform:uppercase;top:0}.vc-ps-fields .vc-input__label{left:0;width:34px}.vc-ps-fields .vc-input__desc{right:0;width:0}.vc-ps-fields__divider{height:5px}.vc-ps-fields__hex .vc-input__input{border:1px solid #888;box-shadow:inset 0 1px 1px rgba(0,0,0,.1),0 1px 0 0 #ececec;font-size:13px;height:18px;margin-bottom:6px;margin-left:20%;padding-left:3px;width:80%}.vc-ps-fields__hex .vc-input__label{font-size:13px;height:18px;left:0;line-height:22px;position:absolute;text-transform:uppercase;top:0;width:14px}';Q(Dn),xn.render=jn,xn.__file="src/components/photoshop/photoshop.vue",xn.install=te;const Tn=.5;var Hn={name:"Slider",mixins:[Z],props:{swatches:{type:Array,default(){return[{s:Tn,l:.8},{s:Tn,l:.65},{s:Tn,l:.5},{s:Tn,l:.35},{s:Tn,l:.2}]}}},components:{hue:gt},computed:{normalizedSwatches(){const{swatches:e}=this;return e.map((e=>"object"!==typeof e?{s:Tn,l:e}:e))}},methods:{isActive(e,t){const{hsl:r}=this.colors;return 1===r.l&&1===e.l||(0===r.l&&0===e.l||Math.abs(r.l-e.l)<.01&&Math.abs(r.s-e.s)<.01)},hueChange(e){this.colorChange(e)},handleSwClick(e,t){this.colorChange({h:this.colors.hsl.h,s:t.s,l:t.l,source:"hsl"})}}};const In={role:"application","aria-label":"Slider color picker",class:"vc-slider"},$n={class:"vc-slider-hue-warp"},Pn={class:"vc-slider-swatches",role:"group"},Un=["data-index","aria-label","onClick"];function qn(e,t,r,n,o,i){const s=(0,a.resolveComponent)("hue");return(0,a.openBlock)(),(0,a.createElementBlock)("div",In,[(0,a.createElementVNode)("div",$n,[(0,a.createVNode)(s,{value:e.colors,onChange:i.hueChange},null,8,["value","onChange"])]),(0,a.createElementVNode)("div",Pn,[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(i.normalizedSwatches,((t,r)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",{class:"vc-slider-swatch",key:r,"data-index":r,"aria-label":"color:"+e.colors.hex,role:"button",onClick:e=>i.handleSwClick(r,t)},[(0,a.createElementVNode)("div",{class:(0,a.normalizeClass)(["vc-slider-swatch-picker",{"vc-slider-swatch-picker--active":i.isActive(t,r),"vc-slider-swatch-picker--white":1===t.l}]),style:(0,a.normalizeStyle)({background:"hsl("+e.colors.hsl.h+", "+100*t.s+"%, "+100*t.l+"%)"})},null,6)],8,Un)))),128))])])}var Wn=".vc-slider{position:relative;width:410px}.vc-slider-hue-warp{height:12px;position:relative}.vc-slider-hue-warp .vc-hue-picker{background-color:#f8f8f8;border-radius:6px;box-shadow:0 1px 4px 0 rgba(0,0,0,.37);height:14px;transform:translate(-7px,-2px);width:14px}.vc-slider-swatches{display:flex;margin-top:20px}.vc-slider-swatch{flex:1;margin-right:1px;width:20%}.vc-slider-swatch:first-child{margin-right:1px}.vc-slider-swatch:first-child .vc-slider-swatch-picker{border-radius:2px 0 0 2px}.vc-slider-swatch:last-child{margin-right:0}.vc-slider-swatch:last-child .vc-slider-swatch-picker{border-radius:0 2px 2px 0}.vc-slider-swatch-picker{cursor:pointer;height:12px}.vc-slider-swatch:nth-child(n) .vc-slider-swatch-picker.vc-slider-swatch-picker--active{border-radius:3.6px/2px;transform:scaleY(1.8)}.vc-slider-swatch-picker--white{box-shadow:inset 0 0 0 1px #ddd}.vc-slider-swatch-picker--active.vc-slider-swatch-picker--white{box-shadow:inset 0 0 0 .6px #ddd}";Q(Wn),Hn.render=qn,Hn.__file="src/components/slider/slider.vue",Hn.install=te;var Gn={50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000"},Xn={50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162"},Yn={50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff"},Kn={50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea"},Zn={50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe"},Qn={50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff"},Jn={50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea"},eo={50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4"},to={50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5"},ro={50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853"},no={50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17"},oo={50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00"},ao={50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600"},io={50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00"},so={50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00"},co={50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00"},lo={50:"#efebe9",100:"#d7ccc8",200:"#bcaaa4",300:"#a1887f",400:"#8d6e63",500:"#795548",600:"#6d4c41",700:"#5d4037",800:"#4e342e",900:"#3e2723"},ho={50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121"},uo={50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238"},po={primary:"rgba(0, 0, 0, 0.87)",secondary:"rgba(0, 0, 0, 0.54)",disabled:"rgba(0, 0, 0, 0.38)",dividers:"rgba(0, 0, 0, 0.12)"},fo={primary:"rgba(255, 255, 255, 1)",secondary:"rgba(255, 255, 255, 0.7)",disabled:"rgba(255, 255, 255, 0.5)",dividers:"rgba(255, 255, 255, 0.12)"},go={active:"rgba(0, 0, 0, 0.54)",inactive:"rgba(0, 0, 0, 0.38)"},vo={active:"rgba(255, 255, 255, 1)",inactive:"rgba(255, 255, 255, 0.5)"},bo="#ffffff",mo="#000000",xo={red:Gn,pink:Xn,purple:Yn,deepPurple:Kn,indigo:Zn,blue:Qn,lightBlue:Jn,cyan:eo,teal:to,green:ro,lightGreen:no,lime:oo,yellow:ao,amber:io,orange:so,deepOrange:co,brown:lo,grey:ho,blueGrey:uo,darkText:po,lightText:fo,darkIcons:go,lightIcons:vo,white:bo,black:mo};const wo=["red","pink","purple","deepPurple","indigo","blue","lightBlue","cyan","teal","green","lightGreen","lime","yellow","amber","orange","deepOrange","brown","blueGrey","black"],ko=["900","700","500","300","100"],yo=(()=>{const e=[];return wo.forEach((t=>{let r=[];"black"===t.toLowerCase()||"white"===t.toLowerCase()?r=r.concat(["#000000","#FFFFFF"]):ko.forEach((e=>{const n=xo[t][e];r.push(n.toUpperCase())})),e.push(r)})),e})();var Co={name:"Swatches",mixins:[Z],props:{palette:{type:Array,default(){return yo}}},computed:{pick(){return this.colors.hex}},methods:{equal(e){return e.toLowerCase()===this.colors.hex.toLowerCase()},handlerClick(e){this.colorChange({hex:e,source:"hex"})}}};const _o=["data-pick"],Eo={class:"vc-swatches-box",role:"listbox"},So=["aria-label","aria-selected","data-color","onClick"],No={class:"vc-swatches-pick"},Ao={style:{width:"24px",height:"24px"},viewBox:"0 0 24 24"},Vo=(0,a.createElementVNode)("path",{d:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"},null,-1),Bo=[Vo];function Fo(e,t,r,n,o,i){return(0,a.openBlock)(),(0,a.createElementBlock)("div",{role:"application","aria-label":"Swatches color picker",class:"vc-swatches","data-pick":i.pick},[(0,a.createElementVNode)("div",Eo,[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(r.palette,((e,t)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",{class:"vc-swatches-color-group",key:t},[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(e,(e=>((0,a.openBlock)(),(0,a.createElementBlock)("div",{class:(0,a.normalizeClass)(["vc-swatches-color-it",{"vc-swatches-color--white":"#FFFFFF"===e}]),role:"option","aria-label":"Color:"+e,"aria-selected":i.equal(e),key:e,"data-color":e,style:(0,a.normalizeStyle)({background:e}),onClick:t=>i.handlerClick(e)},[(0,a.withDirectives)((0,a.createElementVNode)("div",No,[((0,a.openBlock)(),(0,a.createElementBlock)("svg",Ao,Bo))],512),[[a.vShow,i.equal(e)]])],14,So)))),128))])))),128))])],8,_o)}var Mo=".vc-swatches{background-color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.12),0 2px 5px rgba(0,0,0,.16);height:240px;overflow-y:scroll;width:320px}.vc-swatches-box{overflow:hidden;padding:16px 0 6px 16px}.vc-swatches-color-group{float:left;margin-right:10px;padding-bottom:10px;width:40px}.vc-swatches-color-it{background:#880e4f;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;box-sizing:border-box;cursor:pointer;height:24px;margin-bottom:1px;overflow:hidden;width:40px}.vc-swatches-color--white{border:1px solid #ddd}.vc-swatches-pick{fill:#fff;display:block;margin-left:8px}.vc-swatches-color--white .vc-swatches-pick{fill:#333}";Q(Mo),Co.render=Fo,Co.__file="src/components/swatches/swatches.vue",Co.install=te;const Lo=["#FF6900","#FCB900","#7BDCB5","#00D084","#8ED1FC","#0693E3","#ABB8C3","#EB144C","#F78DA7","#9900EF"];var zo={name:"Twitter",mixins:[Z],components:{editableInput:re},props:{width:{type:[String,Number],default:276},defaultColors:{type:Array,default(){return Lo}},triangle:{default:"top-left",validator(e){return["hide","top-left","top-right"].includes(e)}}},computed:{hsv(){const{hsv:e}=this.colors;return{h:e.h.toFixed(),s:(100*e.s).toFixed(),v:(100*e.v).toFixed()}},hex(){const{hex:e}=this.colors;return e&&e.replace("#","")}},methods:{equal(e){return e.toLowerCase()===this.colors.hex.toLowerCase()},handlerClick(e){this.colorChange({hex:e,source:"hex"})},inputChange(e){e&&(e["#"]?this.isValidHex(e["#"])&&this.colorChange({hex:e["#"],source:"hex"}):e.r||e.g||e.b||e.a?this.colorChange({r:e.r||this.colors.rgba.r,g:e.g||this.colors.rgba.g,b:e.b||this.colors.rgba.b,a:e.a||this.colors.rgba.a,source:"rgba"}):(e.h||e.s||e.v)&&this.colorChange({h:e.h||this.colors.hsv.h,s:e.s/100||this.colors.hsv.s,v:e.v/100||this.colors.hsv.v,source:"hsv"}))}}};const Oo=(0,a.createElementVNode)("div",{class:"vc-twitter-triangle-shadow"},null,-1),Ro=(0,a.createElementVNode)("div",{class:"vc-twitter-triangle"},null,-1),jo={class:"vc-twitter-body"},Do=["onClick"],To=(0,a.createElementVNode)("div",{class:"vc-twitter-hash"},"#",-1),Ho=(0,a.createElementVNode)("div",{class:"vc-twitter-clear"},null,-1);function Io(e,t,r,n,o,i){const s=(0,a.resolveComponent)("editable-input");return(0,a.openBlock)(),(0,a.createElementBlock)("div",{class:(0,a.normalizeClass)(["vc-twitter",{"vc-twitter-hide-triangle ":"hide"===r.triangle,"vc-twitter-top-left-triangle ":"top-left"===r.triangle,"vc-twitter-top-right-triangle ":"top-right"===r.triangle}]),style:(0,a.normalizeStyle)({width:"number"===typeof r.width?`${r.width}px`:r.width})},[Oo,Ro,(0,a.createElementVNode)("div",jo,[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(r.defaultColors,((e,t)=>((0,a.openBlock)(),(0,a.createElementBlock)("span",{class:"vc-twitter-swatch",style:(0,a.normalizeStyle)({background:e,boxShadow:`0 0 4px ${i.equal(e)?e:"transparent"}`}),key:t,onClick:t=>i.handlerClick(e)},null,12,Do)))),128)),To,(0,a.createVNode)(s,{label:"#",value:i.hex,onChange:i.inputChange},null,8,["value","onChange"]),Ho])],6)}var $o=".vc-twitter{background:#fff;border:0 solid rgba(0,0,0,.25);border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.25);position:relative}.vc-twitter-triangle{border-color:transparent transparent #fff}.vc-twitter-triangle,.vc-twitter-triangle-shadow{border-style:solid;border-width:0 9px 10px;height:0;position:absolute;width:0}.vc-twitter-triangle-shadow{border-color:transparent transparent rgba(0,0,0,.1)}.vc-twitter-body{padding:15px 9px 9px 15px}.vc-twitter .vc-editable-input{position:relative}.vc-twitter .vc-editable-input input{border:0;border-radius:0 4px 4px 0;box-shadow:inset 0 0 0 1px #f0f0f0;box-sizing:content-box;color:#666;float:left;font-size:14px;height:28px;outline:none;padding:1px 1px 1px 8px;width:100px}.vc-twitter .vc-editable-input span{display:none}.vc-twitter-hash{align-items:center;background:#f0f0f0;border-radius:4px 0 0 4px;color:#98a1a4;display:flex;float:left;height:30px;justify-content:center;width:30px}.vc-twitter-swatch{border-radius:4px;cursor:pointer;float:left;height:30px;margin:0 6px 6px 0;outline:none;position:relative;width:30px}.vc-twitter-clear{clear:both}.vc-twitter-hide-triangle .vc-twitter-triangle,.vc-twitter-hide-triangle .vc-twitter-triangle-shadow{display:none}.vc-twitter-top-left-triangle .vc-twitter-triangle{left:12px;top:-10px}.vc-twitter-top-left-triangle .vc-twitter-triangle-shadow{left:12px;top:-11px}.vc-twitter-top-right-triangle .vc-twitter-triangle{right:12px;top:-10px}.vc-twitter-top-right-triangle .vc-twitter-triangle-shadow{right:12px;top:-11px}";Q($o),zo.render=Io,zo.__file="src/components/twitter/twitter.vue",zo.install=te;const Po=[Nt,yt,wr,Yr,re,nn,gt,un,xn,ct,Ot,Hn,Co,zo],Uo=xr({components:Po});var qo=mr,Wo=qo}(),o}()}));
2 | //# sourceMappingURL=vue-gpickr.umd.min.js.map


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import App from './App.vue'
3 | 
4 | createApp(App).mount('#app');
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-gpickr",
 3 |   "version": "1.0.0",
 4 |   "private": false,
 5 |   "description": "Vue gradient picker",
 6 |   "keywords": [
 7 |     "vue",
 8 |     "gradient",
 9 |     "gradient picker",
10 |     "gpickr"
11 |   ],
12 |   "author": {
13 |     "name": "Roman Zhbadynskyi",
14 |     "email": "zhbadynskyi@gmail.com"
15 |   },
16 |   "license": "MIT",
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "git+https://github.com/insky/vue-gpickr.git"
20 |   },
21 |   "homepage": "https://insky.github.io/vue-gpickr/",
22 |   "main": "./dist/vue-gpickr.umd.min.js",
23 |   "files": [
24 |     "dist/*"
25 |   ],
26 |   "scripts": {
27 |     "serve": "vue-cli-service serve main.js",
28 |     "build": "vue-cli-service build --target lib --name vue-gpickr src/index.js && rm dist/demo.html",
29 |     "deploy": "./deploy.sh",
30 |     "_deploy": "NODE_ENV=production vue-cli-service build --target app --name vue-gpickr --dest docs main.js",
31 |     "lint": "vue-cli-service lint",
32 |     "eslint": "eslint ./src --ext vue,js,mjs",
33 |     "eslint:fix": "eslint ./src --ext vue,js,mjs --fix"
34 |   },
35 |   "dependencies": {
36 |     "@ckpack/vue-color": "^1.2.0",
37 |     "tinycolor2": "^1.4.2",
38 |     "vue": "^3.2.37"
39 |   },
40 |   "devDependencies": {
41 |     "@babel/eslint-parser": "^7.18.9",
42 |     "@vue/cli-plugin-babel": "^5.0.8",
43 |     "@vue/cli-plugin-eslint": "^5.0.8",
44 |     "@vue/cli-service": "^5.0.8",
45 |     "eslint": "^8.22.0",
46 |     "eslint-plugin-vue": "^9.3.0",
47 |     "sass": "^1.54.4",
48 |     "sass-loader": "^13.0.2",
49 |     "vue-template-compiler": "^2.7.8"
50 |   },
51 |   "eslintConfig": {
52 |     "root": true,
53 |     "env": {
54 |       "es2021": true,
55 |       "node": true
56 |     },
57 |     "extends": [
58 |       "plugin:vue/vue3-essential",
59 |       "plugin:vue/vue3-recommended",
60 |       "plugin:vue/vue3-strongly-recommended",
61 |       "eslint:recommended"
62 |     ],
63 |     "parserOptions": {
64 |       "parser": "@babel/eslint-parser"
65 |     },
66 |     "rules": {
67 |       "vue/max-attributes-per-line": ["error", {
68 |         "singleline": {
69 |           "max": 3
70 |         },
71 |         "multiline": {
72 |           "max": 1
73 |         }
74 |       }]
75 |     }
76 |   },
77 |   "browserslist": [
78 |     "> 1%",
79 |     "last 2 versions",
80 |     "not dead"
81 |   ],
82 |   "babel": {
83 |     "presets": [
84 |       "@vue/cli-plugin-babel/preset"
85 |     ]
86 |   }
87 | }
88 | 


--------------------------------------------------------------------------------
/scr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/insky/vue-gpickr/6f4edb4c5c32016ffc4d6d64c7f076fe6aefef04/scr.png


--------------------------------------------------------------------------------
/src/Gradient.js:
--------------------------------------------------------------------------------
  1 | import tinycolor from 'tinycolor2';
  2 | 
  3 | class GradientError extends Error {
  4 |   constructor(message) {
  5 |     super(message);
  6 |     this.name = "GradientError";
  7 |   }
  8 | }
  9 | 
 10 | const defaultStops = [
 11 |   ['#0359b5', 0],
 12 |   ['#f6ce01', 1]
 13 | ];
 14 | 
 15 | const COLOR = 0;
 16 | const POSITION = 1;
 17 | 
 18 | class Gradient {
 19 |   _stops = [];
 20 |   _limit = null;
 21 | 
 22 |   constructor({ stops = defaultStops, limit = null } = {}) {
 23 |     this._stops = stops;
 24 |     this._limit = limit;
 25 |   }
 26 | 
 27 |   get stops() {
 28 |     return this._stops;
 29 |   }
 30 | 
 31 |   set stops(value) {
 32 |     const error = Gradient._stopArrayValidator(value);
 33 |     if (error) {
 34 |       throw new GradientError(`Wrong stops format, ${error}`);
 35 |     }
 36 |     this._stops = value;
 37 |   }
 38 | 
 39 |   get limit() {
 40 |     return this._limit;
 41 |   }
 42 | 
 43 |   static _stopPointValidator(value) {
 44 |     if (!Array.isArray(value)) {
 45 |       return 'point must be an array';
 46 |     }
 47 |     if (value.length !== 2) {
 48 |       return 'wrong point format';
 49 |     }
 50 | 
 51 |     const position = value[POSITION];
 52 |     if (typeof position !== 'number') {
 53 |       return 'position must be a number';
 54 |     }
 55 |     if (position !== Number(position)) {
 56 |       return 'position must be a number';
 57 |     }
 58 |     if (position < 0) {
 59 |       return 'position must be between 0 and 1';
 60 |     }
 61 |     if (position > 1) {
 62 |       return 'position must be between 0 and 1';
 63 |     }
 64 | 
 65 |     const color = tinycolor(value[COLOR]);
 66 |     if(!color.isValid()) {
 67 |       return 'color is invalid';
 68 |     }
 69 | 
 70 |     return null;
 71 |   }
 72 | 
 73 |   static _stopArrayValidator(value) {
 74 |     if (!Array.isArray(value)) {
 75 |       return 'must be an array';
 76 |     }
 77 |     if (value.length < 2) {
 78 |       return 'wrong array format';
 79 |     }
 80 | 
 81 |     return null;
 82 |   }
 83 | 
 84 |   addStop(value) {
 85 |     if (this._limit && this._stops.length >= this._limit) {
 86 |       throw new GradientError('Too many stop points');
 87 |     }
 88 |     const error = Gradient._stopPointValidator(value);
 89 |     if (error) {
 90 |       throw new GradientError(`Wrong stop format, ${error}`);
 91 |     }
 92 | 
 93 |     this.stops.push(value);
 94 |   }
 95 | 
 96 |   removeStopByIndex(index) {
 97 |     if (this._stops.length < 3) {
 98 |       throw new GradientError('Can\'t remove stop point');
 99 |     }
100 | 
101 |     if (this._stops.length <= index) {
102 |       throw new GradientError('Can\'t remove stop point');
103 |     }
104 | 
105 |     this._stops.splice(index, 1);
106 |   }
107 | }
108 | 
109 | export { Gradient, GradientError };
110 | 


--------------------------------------------------------------------------------
/src/LinearGradient.js:
--------------------------------------------------------------------------------
 1 | import tinycolor from 'tinycolor2';
 2 | import { Gradient, GradientError } from './Gradient';
 3 | 
 4 | const COLOR = 0;
 5 | const POSITION = 1;
 6 | 
 7 | class LinearGradient extends Gradient {
 8 |   _type = 'linear';
 9 |   _angle = null;
10 | 
11 |   constructor({ angle = 0, stops = undefined, limit = undefined } = {}) {
12 |     super({ stops, limit })
13 |     this._type = 'linear';
14 |     this._angle = angle;
15 |   }
16 | 
17 |   get angle() {
18 |     return this._angle;
19 |   }
20 | 
21 |   set angle(value) {
22 |     const error = LinearGradient._angleValidator(value);
23 |     if (error) {
24 |       throw new GradientError(`Wrong angle value, ${error}`);
25 |     }
26 |     this._angle = value;
27 |   }
28 | 
29 |   get type() {
30 |     return this._type;
31 |   }
32 | 
33 |   static _angleValidator(value) {
34 |     if (typeof value !== 'number') {
35 |       return 'must be a number';
36 |     }
37 |     if (value !== Number(value)) {
38 |       return 'must be a number';
39 |     }
40 |     if (value < 0) {
41 |       return 'must be between 0 and 360';
42 |     }
43 |     if (value > 360) {
44 |       return 'must be between 0 and 360';
45 |     }
46 |     return null;
47 |   }
48 | 
49 |   toString(colorFormat = 'hex8') {
50 |     const stops = this.stops
51 |                     .slice()
52 |                     .sort((a, b) => a[POSITION] - b[POSITION])
53 |                     .map(stop => `${tinycolor(stop[COLOR]).toString(colorFormat)} ${(stop[POSITION] * 100).toFixed()}%`)
54 |                     .join(', ');
55 |     return `linear-gradient(${this.angle}deg, ${stops})`;
56 |   }
57 | 
58 |   toRaw(colorFormat = 'hex8') {
59 |     const stops = this.stops
60 |                     .slice()
61 |                     .sort((a, b) => a[POSITION] - b[POSITION])
62 |                     .map(stop => {
63 |                       stop[COLOR] = tinycolor(stop[COLOR]).toString(colorFormat);
64 |                       return stop;
65 |                     });
66 |     return {
67 |       type: this.type,
68 |       angle: this.angle,
69 |       stops,
70 |       limit: this.limit
71 |     }
72 |   }
73 | }
74 | 
75 | export default LinearGradient;
76 | 


--------------------------------------------------------------------------------
/src/VueGpickr.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vue-gpickr">
  3 |     <color-picker v-model="currentColor" :preset-colors="null" />
  4 | 
  5 |     <div class="vue-gpickr-inner-container">
  6 |       <div class="vue-gpickr-preview-container">
  7 |         <div class="vue-gpickr-preview" :style="previewStyle" />
  8 |       </div>
  9 | 
 10 |       <div ref="stopsContainer" class="vue-gpickr-stops-container">
 11 |         <div class="vue-gpickr-stops-preview-container">
 12 |           <div class="vue-gpickr-stops-preview" :style="stopsPreviewStyle" @click.stop.prevent="addStop($event)" />
 13 |         </div>
 14 |         <div
 15 |           v-for="(stop, index) in stops"
 16 |           :key="index"
 17 |           class="vue-gpickr-stop"
 18 |           :style="stopStyle(index)"
 19 |           :class="{ active: index == currentStopIdx }"
 20 |           @mousedown.stop="handleMouseDown(index, $event)"
 21 |           @touchstart.stop="handleTouchstart(index, $event)"
 22 |         />
 23 |       </div>
 24 | 
 25 |       <div class="vue-gpickr-controls-container">
 26 |         <div class="vue-gpickr-slider-container">
 27 |           <input
 28 |             v-model="angle"
 29 |             type="range"
 30 |             min="0"
 31 |             max="360"
 32 |             step="1"
 33 |           >
 34 |           <div class="label">
 35 |             Angle
 36 |           </div>
 37 |         </div>
 38 |         <div class="vue-gpickr-input-container">
 39 |           <input v-model="angle" type="text">
 40 |           <div class="label">
 41 |             Deg&deg;
 42 |           </div>
 43 |         </div>
 44 |       </div>
 45 |     </div>
 46 |   </div>
 47 | </template>
 48 | 
 49 | <script>
 50 | import { Sketch } from '@ckpack/vue-color';
 51 | import LinearGradient from './LinearGradient';
 52 | 
 53 | const COLOR = 0;
 54 | const POSITION = 1;
 55 | const REMOVE_TRESHOLD = 50;
 56 | 
 57 | export default {
 58 |   components: {
 59 |     colorPicker: Sketch
 60 |   },
 61 |   props: {
 62 |     modelValue: {
 63 |       type: LinearGradient,
 64 |       default: () => new LinearGradient()
 65 |     }
 66 |   },
 67 |   emits: ['update:modelValue'],
 68 |   data() {
 69 |     this.containerBoundingClientRectangle = {};
 70 |     return {
 71 |       currentStopIdx: 0
 72 |     };
 73 |   },
 74 |   computed: {
 75 |     angle: {
 76 |       get() {
 77 |         return this.modelValue.angle;
 78 |       },
 79 |       set(val) {
 80 |         let degrees = parseInt(val, 10) || 0;
 81 |         if (degrees < 0) {
 82 |           degrees = 0;
 83 |         }
 84 |         while (degrees > 360) {
 85 |           degrees = 360;
 86 |         }
 87 | 
 88 |         this.emitInput(degrees, this.stops, this.limit);
 89 |       }
 90 |     },
 91 |     stops() {
 92 |       return this.modelValue.stops.slice().map(stop => [...stop]);
 93 |     },
 94 |     previewStyle() {
 95 |       return { background: this.getGradientString(this.angle) };
 96 |     },
 97 |     stopsPreviewStyle() {
 98 |       return { background: this.getGradientString(90) };
 99 |     },
100 |     currentColor: {
101 |       get() {
102 |         return this.stops[this.currentStopIdx][COLOR];
103 |       },
104 |       set(val) {
105 |         this.stops[this.currentStopIdx][COLOR] = val.hex8;
106 |         this.emitInput(this.angle, this.stops, this.limit);
107 |       }
108 |     },
109 |     orderedStops() {
110 |       return this.stops.slice().sort((a, b) => a[POSITION] - b[POSITION]);
111 |     },
112 |     limit() {
113 |       return this.modelValue.limit
114 |     }
115 |   },
116 |   beforeUnmount() {
117 |     this.unbindEventListeners();
118 |   },
119 |   methods: {
120 |     emitInput(angle, stops, limit) {
121 |       this.$emit('update:modelValue', new LinearGradient({ angle, stops, limit }));
122 |     },
123 |     getGradientString(angle) {
124 |       const stops = this.orderedStops.map(stop => `${stop[COLOR].toString()} ${stop[POSITION] * 100}%`).join(',');
125 |       return `linear-gradient(${angle}deg, ${stops})`;
126 |     },
127 |     setCurrentStopIdx(index) {
128 |       this.currentStopIdx = index;
129 |     },
130 |     stopStyle(index) {
131 |       const stop = this.stops[index];
132 |       return { left: `${stop[POSITION] * 100}%`, color: stop[COLOR].toString() };
133 |     },
134 |     addStop(event) {
135 |       if ( this.limit && this.stops.length >= this.limit ) {
136 |         return;
137 |       }
138 |       const position = Math.round(event.offsetX * 100 / event.target.offsetWidth) / 100;
139 |       const index = this.stops.length;
140 |       this.stops.push([this.currentColor, position]);
141 |       this.setCurrentStopIdx(index);
142 |       this.emitInput(this.angle, this.stops, this.limit);
143 |     },
144 |     removeCurrentStop() {
145 |       this.stops.splice(this.currentStopIdx, 1);
146 |       if (this.currentStopIdx > 0) {
147 |         this.setCurrentStopIdx(this.currentStopIdx - 1);
148 |       }
149 |       this.unbindEventListeners();
150 |       this.emitInput(this.angle, this.stops, this.limit);
151 |     },
152 |     setContainerBoundingClientRectangle() {
153 |       this.containerBoundingClientRectangle = this.$refs.stopsContainer.getBoundingClientRect();
154 |     },
155 |     handleChange (event) {
156 |       event.preventDefault();
157 |       event.stopPropagation();
158 | 
159 |       if (this.stops.length > 2) { // Gradient must have at least 2 stops
160 |         const y = (event.touches ? event.touches[0].clientY : event.clientY) || 0;
161 |         const verticalDistance = Math.abs(y - this.containerBoundingClientRectangle.bottom);
162 | 
163 |         if (verticalDistance > REMOVE_TRESHOLD) {
164 |           this.removeCurrentStop();
165 |           return;
166 |         }
167 |       }
168 | 
169 |       const x = (event.touches ? event.touches[0].clientX : event.clientX) || 0;
170 |       const left = x - this.containerBoundingClientRectangle.left;
171 | 
172 |       const containerWidth = this.containerBoundingClientRectangle.width;
173 | 
174 |       let position;
175 |       if (left < 0) {
176 |         position = 0;
177 |       } else if (left > containerWidth) {
178 |         position = 1;
179 |       } else {
180 |         position = Math.round(left * 100 / containerWidth) / 100;
181 |       }
182 | 
183 |       const previousPosition = this.stops[this.currentStopIdx][POSITION];
184 |       this.stops[this.currentStopIdx][POSITION] = position;
185 |       if (previousPosition != position) {
186 |         this.emitInput(this.angle, this.stops, this.limit);
187 |       }
188 |     },
189 |     handleMouseDown (index) {
190 |       this.setCurrentStopIdx(index);
191 |       this.setContainerBoundingClientRectangle();
192 |       window.addEventListener('mousemove', this.handleChange);
193 |       window.addEventListener('mouseup', this.handleMouseUp);
194 |     },
195 |     handleMouseUp () {
196 |       this.unbindEventListeners();
197 |     },
198 |     unbindEventListeners () {
199 |       window.removeEventListener('mousemove', this.handleChange);
200 |       window.removeEventListener('mouseup', this.handleMouseUp);
201 |       window.removeEventListener('touchmove', this.handleChange, { passive: false });
202 |       window.removeEventListener('touchend', this.handleTouchend);
203 |       window.removeEventListener('touchcancel', this.handleTouchend);
204 |     },
205 |     handleTouchstart(index) {
206 |       this.setCurrentStopIdx(index);
207 |       this.setContainerBoundingClientRectangle();
208 |       window.addEventListener('touchmove', this.handleChange, { passive: false });
209 |       window.addEventListener('touchend', this.handleTouchend);
210 |       window.addEventListener('touchcancel', this.handleTouchend);
211 |     },
212 |     handleTouchend () {
213 |       this.unbindEventListeners();
214 |     },
215 | 
216 |   }
217 | };
218 | </script>
219 | 
220 | <style lang="scss" scoped>
221 | :deep(.vc-sketch) {
222 |   box-shadow: none;
223 |   padding: 10px;
224 |   .vc-sketch-presets {
225 |     display: none;
226 |   }
227 |   .vc-sketch-saturation-wrap {
228 |     overflow: visible;
229 |   }
230 |   .vc-saturation-pointer {
231 |     margin-top: -2px;
232 |   }
233 |   .vc-sketch-field {
234 |     input {
235 |       text-align: center;
236 |       padding: 4px 0 3px;
237 |     }
238 |   }
239 | }
240 | .vue-gpickr {
241 |   position: relative;
242 |   display: inline-flex;
243 |   flex-direction: row;
244 |   background: #FFF;
245 |   border-radius: 4px;
246 |   box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 8px 16px rgba(0, 0, 0, .15);
247 |   .vue-gpickr-inner-container {
248 |     padding: 10px;
249 |     padding-left: 0;
250 |     user-select: none;
251 |     .vue-gpickr-preview-container {
252 |       width: 200px;
253 |       height: 150px;
254 |       background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC);
255 |       background-size: 10px;
256 |       position: relative;
257 |       .vue-gpickr-preview {
258 |         position: absolute;
259 |         top: 0;
260 |         bottom: 0;
261 |         left: 0;
262 |         right: 0;
263 |       }
264 |     }
265 |     .vue-gpickr-stops-container {
266 |       position: relative;
267 |       .vue-gpickr-stops-preview-container {
268 |         width: 200px;
269 |         height: 24px;
270 |         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC);
271 |         background-size: 10px;
272 |         position: relative;
273 |         margin-top: 4px;
274 |         border-radius: 2px;
275 |         .vue-gpickr-stops-preview {
276 |           position: absolute;
277 |           top: 0;
278 |           bottom: 0;
279 |           left: 0;
280 |           right: 0;
281 |           border-radius: 2px;
282 |           box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), inset 0 0 4px rgba(0, 0, 0, .25);
283 |         }
284 |       }
285 |       .vue-gpickr-stop {
286 |         position: absolute;
287 |         bottom: 0;
288 |         width: 12px;
289 |         height: 12px;
290 |         transform: translate(-6px, 6px);
291 |         display: flex;
292 |         justify-content: center;
293 |         align-items: center;
294 |         cursor: pointer;
295 |         &::before {
296 |           content: '';
297 |           width: 4px;
298 |           height: 4px;
299 |           box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);
300 |           border-radius: 50%;
301 |           background: currentColor;
302 |         }
303 |         &.active {
304 |           z-index: 3;
305 |           &::before {
306 |             content: '';
307 |             box-shadow: 0 0 0 2.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 3px rgba(0,0,0,.4);
308 |             width: 6px;
309 |             height: 6px;
310 |           }
311 |         }
312 |       }
313 |     }
314 |     .vue-gpickr-controls-container {
315 |       margin-top: 8px;
316 |       display: flex;
317 |       font-size: 0;
318 |       .vue-gpickr-slider-container {
319 |         flex-grow: 1;
320 |         input {
321 |           box-sizing: border-box;
322 |           width: 100%;
323 |           height: 19px;
324 |           margin: 0 2px;
325 |           padding: 0;
326 |           background-color: transparent;
327 |           appearance: none;
328 |           outline: none;
329 |           &::-webkit-slider-thumb {
330 |             -webkit-appearance: none;
331 |             cursor: pointer;
332 |             width: 5px;
333 |             border-radius: 1px;
334 |             height: 10px;
335 |             border: 0;
336 |             box-shadow: 0 0 2px rgba(0, 0, 0, .6), inset 0 0 0 0.5px rgba(0, 0, 0, 0.4);
337 |             background: #fff;
338 |             z-index: 2;
339 |           }
340 | 
341 |           &::-moz-range-thumb {
342 |             cursor: pointer;
343 |             width: 5px;
344 |             border-radius: 1px;
345 |             height: 10px;
346 |             border: 0;
347 |             box-shadow: 0 0 2px rgba(0, 0, 0, .6), inset 0 0 0 0.5px rgba(0, 0, 0, 0.4);
348 |             background: #fff;
349 |           }
350 | 
351 |           &::-ms-thumb {
352 |             cursor: pointer;
353 |             width: 5px;
354 |             border-radius: 1px;
355 |             height: 10px;
356 |             border: 0;
357 |             box-shadow: 0 0 2px rgba(0, 0, 0, .6), inset 0 0 0 0.5px rgba(0, 0, 0, 0.4);
358 |             background: #fff;
359 |           }
360 | 
361 |           &::-webkit-slider-runnable-track {
362 |             width: 100%;
363 |             height: 10px;
364 |             cursor: pointer;
365 |             background: rgba(0, 0, 0, .05);
366 |             border: 0;
367 |             border-radius: 2px;
368 |             box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
369 |             z-index: 1;
370 |           }
371 | 
372 |           &::-moz-range-track {
373 |             width: 100%;
374 |             height: 10px;
375 |             cursor: pointer;
376 |             background: rgba(0, 0, 0, .05);
377 |             border: 0;
378 |             border-radius: 2px;
379 |             box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
380 |           }
381 | 
382 |           &::-ms-track {
383 |             width: 100%;
384 |             height: 10px;
385 |             cursor: pointer;
386 |             background: transparent;
387 |             border-color: transparent;
388 |             border-width: 16px 0;
389 |             color: transparent;
390 |           }
391 |           &::-ms-fill-lower {
392 |             border: 0;
393 |             background: rgba(0, 0, 0, .05);
394 |             border-radius: 2px;
395 |             box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
396 |           }
397 |           &::-ms-fill-upper {
398 |             border: 0;
399 |             background: rgba(0, 0, 0, .05);
400 |             border-radius: 2px;
401 |             box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
402 |           }
403 |         }
404 |       }
405 |       .vue-gpickr-input-container {
406 |         width: 30px;
407 |         margin-left: 8px;
408 |         input {
409 |           text-align: center;
410 |           box-sizing: border-box;
411 |           width: 100%;
412 |           padding: 4px 0 3px;
413 |           border: none;
414 |           outline: none;
415 |           box-shadow: inset 0 0 0 1px #ccc;
416 |           font-size: 10px;
417 |         }
418 |       }
419 |       .label {
420 |         text-align: center;
421 |         font-size: 11px;
422 |         color: #222;
423 |         padding-top: 3px;
424 |         padding-bottom: 4px;
425 |         text-transform: capitalize;
426 |       }
427 |     }
428 |   }
429 | }
430 | @media (max-width: 430px) {
431 |   .vue-gpickr {
432 |     flex-direction: column;
433 |     .vue-gpickr-inner-container {
434 |       padding-left: 10px;
435 |       padding-top: 0;
436 |     }
437 |   }
438 | }
439 | </style>
440 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import VueGpickr from './VueGpickr';
 2 | import LinearGradient from './LinearGradient';
 3 | import * as vueColor from '@ckpack/vue-color';
 4 | 
 5 | export default VueGpickr;
 6 | 
 7 | export {
 8 |   VueGpickr,
 9 |   LinearGradient,
10 |   vueColor
11 | };
12 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   publicPath: process.env.NODE_ENV === 'production' ? '/vue-gpickr/' : '/',
3 |   css: {
4 |     extract: false
5 |   }
6 | };


--------------------------------------------------------------------------------