@simonwep/pickr - npm Package Compare versions

Comparing version 0.4.0 to 0.4.1

dist/pickr.es5.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Pickr=e():t.Pickr=e()}(window,function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="dist/",n(n.s=1)}([function(t,e,n){},function(t,e,n){"use strict";n.r(e);var o={};n.r(o),n.d(o,"once",function(){return a}),n.d(o,"on",function(){return c}),n.d(o,"off",function(){return s}),n.d(o,"createElementFromString",function(){return l}),n.d(o,"removeAttribute",function(){return p}),n.d(o,"createFromTemplate",function(){return d}),n.d(o,"eventPath",function(){return h}),n.d(o,"adjustableInputNumbers",function(){return f});var r={};n.r(r),n.d(r,"hsvToRgb",function(){return b}),n.d(r,"hsvToHex",function(){return _}),n.d(r,"hsvToCmyk",function(){return w}),n.d(r,"hsvToHsl",function(){return k}),n.d(r,"parseToHSV",function(){return O});n(0);function i(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var a=function(t,e,n,o){return c(t,e,function t(){n.apply(this,arguments),this.removeEventListener(e,t)},o)},c=u.bind(null,"addEventListener"),s=u.bind(null,"removeEventListener");function u(t,e,n,o){var r=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};return e instanceof HTMLCollection||e instanceof NodeList?e=Array.from(e):Array.isArray(e)||(e=[e]),Array.isArray(n)||(n=[n]),e.forEach(function(e){return n.forEach(function(n){return e[t](n,o,function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),o.forEach(function(e){i(t,e,n[e])})}return t}({capture:!1},r))})}),Array.prototype.slice.call(arguments,1)}function l(t){var e=document.createElement("div");return e.innerHTML=t.trim(),e.firstElementChild}function p(t,e){var n=t.getAttribute(e);return t.removeAttribute(e),n}function d(t){return function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=p(e,"data-con"),r=p(e,"data-key");r&&(n[r]=e);for(var i=Array.from(e.children),a=o?n[o]={}:n,c=0;c<i.length;c++){var s=i[c],u=p(s,"data-arr");u?(a[u]||(a[u]=[])).push(s):t(s,a)}return n}(l(t))}function h(t){var e=t.path||t.composedPath&&t.composedPath();if(e)return e;var n=t.target.parentElement;for(e=[t.target,n];n=n.parentElement;)e.push(n);return e.push(document,window),e}function f(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],n=function(t){return t>="0"&&t<="9"||"-"===t||"."===t};function o(o){for(var r=t.value,i=t.selectionStart,a=i,c="",s=i-1;s>0&&n(r[s]);s--)c=r[s]+c,a--;for(var u=i,l=r.length;u<l&&n(r[u]);u++)c+=r[u];if(c.length>0&&!isNaN(c)&&isFinite(c)){var p=o.deltaY<0?1:-1,d=o.ctrlKey?5*p:p,h=Number(c)+d;!e&&h<0&&(h=0);var f=r.substr(0,a)+h+r.substring(a+c.length,r.length),v=a+String(h).length;t.value=f,t.focus(),t.setSelectionRange(v,v)}o.preventDefault(),t.dispatchEvent(new Event("input"))}c(t,"focus",function(){return c(window,"wheel",o)}),c(t,"blur",function(){return s(window,"wheel",o)})}function v(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],o=!0,r=!1,i=void 0;try{for(var a,c=t[Symbol.iterator]();!(o=(a=c.next()).done)&&(n.push(a.value),!e||n.length!==e);o=!0);}catch(t){r=!0,i=t}finally{try{o||null==c.return||c.return()}finally{if(r)throw i}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function y(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var g=Math.min,m=Math.max;function b(t,e,n){t=t/360*6,e/=100,n/=100;var o=Math.floor(t),r=t-o,i=n*(1-e),a=n*(1-r*e),c=n*(1-(1-r)*e),s=o%6;return[255*[n,a,i,i,c,n][s],255*[c,n,n,a,i,i][s],255*[i,i,c,n,n,a][s]]}function _(t,e,n){return b(t,e,n).map(function(t){return Math.round(t).toString(16).padStart(2,"0")})}function w(t,e,n){var o,r=b(t,e,n),i=r[0]/255,a=r[1]/255,c=r[2]/255;return[100*(1===(o=g(1-i,1-a,1-c))?0:(1-i-o)/(1-o)),100*(1===o?0:(1-a-o)/(1-o)),100*(1===o?0:(1-c-o)/(1-o)),100*o]}function k(t,e,n){var o=(2-(e/=100))*(n/=100)/2;return 0!==o&&(e=1===o?0:o<.5?e*n/(2*o):e*n/(2-2*o)),[t,100*e,100*o]}function A(t,e,n){var o,r,i=g(t/=255,e/=255,n/=255),a=m(t,e,n),c=a-i;if(0===c)o=r=0;else{r=c/a;var s=((a-t)/6+c/2)/c,u=((a-e)/6+c/2)/c,l=((a-n)/6+c/2)/c;t===a?o=l-u:e===a?o=1/3+s-l:n===a&&(o=2/3+u-s),o<0?o+=1:o>1&&(o-=1)}return[360*o,100*r,100*a]}function C(t,e,n,o){return e/=100,n/=100,y(A(255*(1-g(1,(t/=100)*(1-(o/=100))+o)),255*(1-g(1,e*(1-o)+o)),255*(1-g(1,n*(1-o)+o))))}function S(t,e,n){return e/=100,[t,2*(e*=(n/=100)<.5?n:1-n)/(n+e)*100,100*(n+e)]}function x(t){return A.apply(void 0,y(t.match(/.{2}/g).map(function(t){return parseInt(t,16)})))}function O(t){var e,n={cmyk:/^cmyk[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)/i,rgba:/^(rgb|rgba)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hsla:/^(hsl|hsla)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hsva:/^(hsv|hsva)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hex:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},o=function(t){return t.map(function(t){return/^(|\d+)\.\d+|\d+$/.test(t)?Number(t):void 0})};for(var r in n)if(e=n[r].exec(t))switch(r){case"cmyk":var i=v(o(e),5),a=i[1],c=i[2],s=i[3],u=i[4];if(a>100||c>100||s>100||u>100)break;return{values:[].concat(y(C(a,c,s,u)),[1]),type:r};case"rgba":var l=v(o(e),6),p=l[2],d=l[3],h=l[4],f=l[5],g=void 0===f?1:f;if(p>255||d>255||h>255||g<0||g>1)break;return{values:[].concat(y(A(p,d,h)),[g]),type:r};case"hex":var m=function(t,e){return[t.substring(0,e),t.substring(e,t.length)]},b=v(e,2)[1];3===b.length?b+="F":6===b.length&&(b+="FF");var _=void 0;if(4===b.length){var w=v(m(b,3).map(function(t){return t+t}),2);b=w[0],_=w[1]}else if(8===b.length){var k=v(m(b,6),2);b=k[0],_=k[1]}return _=parseInt(_,16)/255,{values:[].concat(y(x(b)),[_]),type:r};case"hsla":var O=v(o(e),6),j=O[2],R=O[3],E=O[4],H=O[5],L=void 0===H?1:H;if(j>360||R>100||E>100||L<0||L>1)break;return{values:[].concat(y(S(j,R,E)),[L]),type:r};case"hsva":var P=v(o(e),6),B=P[2],D=P[3],F=P[4],T=P[5],M=void 0===T?1:T;if(B>360||D>100||F>100||M<0||M>1)break;return{values:[B,D,F,M],type:r}}return{values:null,type:null}}function j(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,i=Math.ceil,a={h:t,s:e,v:n,a:o,toHSVA:function(){var t=[a.h,a.s,a.v],e=t.map(i);return t.push(a.a),t.toString=function(){return"hsva(".concat(e[0],", ").concat(e[1],"%, ").concat(e[2],"%, ").concat(a.a.toFixed(1),")")},t},toHSLA:function(){var t=k(a.h,a.s,a.v),e=t.map(i);return t.push(a.a),t.toString=function(){return"hsla(".concat(e[0],", ").concat(e[1],"%, ").concat(e[2],"%, ").concat(a.a.toFixed(1),")")},t},toRGBA:function(){var t=b(a.h,a.s,a.v),e=t.map(i);return t.push(a.a),t.toString=function(){return"rgba(".concat(e[0],", ").concat(e[1],", ").concat(e[2],", ").concat(a.a.toFixed(1),")")},t},toCMYK:function(){var t=w(a.h,a.s,a.v),e=t.map(i);return t.toString=function(){return"cmyk(".concat(e[0],"%, ").concat(e[1],"%, ").concat(e[2],"%, ").concat(e[3],"%)")},t},toHEX:function(){var t=_.apply(r,[a.h,a.s,a.v]);return t.toString=function(){var e=a.a>=1?"":Number((255*a.a).toFixed(0)).toString(16).toUpperCase().padStart(2,"0");return"#".concat(t.join("").toUpperCase()+e)},t},clone:function(){return j(a.h,a.s,a.v,a.a)}};return a}function R(t){var e={options:Object.assign({lockX:!1,lockY:!1,onchange:function(){return 0}},t),_tapstart:function(t){c(document,["mouseup","touchend","touchcancel"],e._tapstop),c(document,["mousemove","touchmove"],e._tapmove),t.preventDefault(),e.wrapperRect=e.options.wrapper.getBoundingClientRect(),e._tapmove(t)},_tapmove:function(t){var n=e.options,o=e.cache,r=n.element,i=e.wrapperRect,a=0,c=0;if(t){var s=t&&t.touches&&t.touches[0];a=t?(s||t).clientX:0,c=t?(s||t).clientY:0,a<i.left?a=i.left:a>i.left+i.width&&(a=i.left+i.width),c<i.top?c=i.top:c>i.top+i.height&&(c=i.top+i.height),a-=i.left,c-=i.top}else o&&(a=o.x,c=o.y);n.lockX||(r.style.left=a-r.offsetWidth/2+"px"),n.lockY||(r.style.top=c-r.offsetHeight/2+"px"),e.cache={x:a,y:c},n.onchange(a,c)},_tapstop:function(){s(document,["mouseup","touchend","touchcancel"],e._tapstop),s(document,["mousemove","touchmove"],e._tapmove)},trigger:function(){e.wrapperRect=e.options.wrapper.getBoundingClientRect(),e._tapmove()},update:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;e.wrapperRect=e.options.wrapper.getBoundingClientRect(),e._tapmove({clientX:e.wrapperRect.left+t,clientY:e.wrapperRect.top+n})},destroy:function(){var t=e.options,n=e._tapstart;s([t.wrapper,t.element],"mousedown",n),s([t.wrapper,t.element],"touchstart",n,{passive:!1})}};e.wrapperRect=e.options.wrapper.getBoundingClientRect();var n=e.options,o=e._tapstart;return c([n.wrapper,n.element],"mousedown",o),c([n.wrapper,n.element],"touchstart",o,{passive:!1}),e}function E(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e={options:Object.assign({onchange:function(){return 0},className:"",elements:[]},t),_ontap:function(t){var n=e.options;n.elements.forEach(function(e){return e.classList[t.target===e?"add":"remove"](n.className)}),n.onchange(t)},destroy:function(){s(e.options.elements,"click",this._ontap)}};return c(e.options.elements,"click",e._ontap),e}function H(t,e,n){return(H=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}()?Reflect.construct:function(t,e,n){var o=[null];o.push.apply(o,e);var r=new(Function.bind.apply(t,o));return n&&L(r,n.prototype),r}).apply(null,arguments)}function L(t,e){return(L=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function P(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function B(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}var D=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.options=Object.assign({useAsButton:!1,disabled:!1,comparison:!0,components:{interaction:{}},strings:{},swatches:null,default:"fff",defaultRepresentation:"HEX",position:"middle",adjustableNumbers:!0,showAlways:!1,parent:void 0,closeWithKey:"Escape"},e),this.options.components.interaction||(this.options.components.interaction={}),this._initializingActive=!0,this._recalc=!0,this._color=new j,this._lastColor=new j,this._eventListener={swatchselect:[],change:[],save:[],init:[]},this.options.swatches=this.options.swatches||[],this.options.swatches&&(this.options.swatches=this.options.swatches.map(function(t){var e=O(t).values;return e&&H(j,P(e))}).filter(function(t){return t})),this._preBuild(),this._buildComponents(),this._bindEvents(),this._representation=this.options.defaultRepresentation,this.setColorRepresentation(this._representation),this._finalBuild(),this._rePositioningPicker(),requestAnimationFrame(function t(){if(!this._root.app.offsetParent)return requestAnimationFrame(t.bind(this));this._initializingActive=!1,this.setColor(this.options.default),this._emit("init")}.bind(this))}var e,n,r;return e=t,(n=[{key:"_preBuild",value:function(){var t,e,n,o,r,i,a,c,s=this.options;"string"==typeof s.el&&(s.el=document.querySelector(s.el)),this._root=(e=(t=s).components,n=t.strings,o=t.useAsButton,r=t.swatches,i=function(t){return t?"":'style="display:none" hidden'},a=d('\n        <div data-key="root" class="pickr">\n        \n            '.concat(o?"":'<div data-key="button" class="pcr-button"></div>','\n\n            <div data-key="app" class="pcr-app">\n                <div class="pcr-selection">\n                    <div data-con="preview" class="pcr-color-preview" ').concat(i(e.preview),'>\n                        <button data-key="lastColor" class="pcr-last-color"></button>\n                        <div data-key="currentColor" class="pcr-current-color"></div>\n                    </div>\n\n                    <div data-con="palette" class="pcr-color-palette">\n                        <div data-key="picker" class="pcr-picker"></div>\n                        <div data-key="palette" class="pcr-palette"></div>\n                    </div>\n\n                    <div data-con="hue" class="pcr-color-chooser" ').concat(i(e.hue),'>\n                        <div data-key="picker" class="pcr-picker"></div>\n                        <div data-key="slider" class="pcr-hue pcr-slider"></div>\n                    </div>\n\n                    <div data-con="opacity" class="pcr-color-opacity" ').concat(i(e.opacity),'>\n                        <div data-key="picker" class="pcr-picker"></div>\n                        <div data-key="slider" class="pcr-opacity pcr-slider"></div>\n                    </div>\n                </div>\n                \n                ').concat(r&&r.length?'\n                <div class="swatches">\n                   '.concat(r.map(function(t,e){return'<button data-arr="swatches" data-color-index="'.concat(e,'" style="color: ').concat(t.toRGBA(),'"></button>')}).join(""),"\n                </div> \n                "):"",'\n\n                <div data-con="interaction" class="pcr-interaction" ').concat(i(Object.keys(e.interaction).length),'>\n                    <input data-key="result" class="pcr-result" type="text" spellcheck="false" ').concat(i(e.interaction.input),'>\n\n                    <input data-arr="options" class="pcr-type" data-type="HEX" value="HEX" type="button" ').concat(i(e.interaction.hex),'>\n                    <input data-arr="options" class="pcr-type" data-type="RGBA" value="RGBa" type="button" ').concat(i(e.interaction.rgba),'>\n                    <input data-arr="options" class="pcr-type" data-type="HSLA" value="HSLa" type="button" ').concat(i(e.interaction.hsla),'>\n                    <input data-arr="options" class="pcr-type" data-type="HSVA" value="HSVa" type="button" ').concat(i(e.interaction.hsva),'>\n                    <input data-arr="options" class="pcr-type" data-type="CMYK" value="CMYK" type="button" ').concat(i(e.interaction.cmyk),'>\n\n                    <input data-key="save" class="pcr-save" value="').concat(n.save||"Save",'" type="button" ').concat(i(e.interaction.save),'>\n                    <input data-key="clear" class="pcr-clear" value="').concat(n.clear||"Clear",'" type="button" ').concat(i(e.interaction.clear),">\n                </div>\n            </div>\n        </div>\n    ")),(c=a.interaction).options.find(function(t){return!t.hidden&&!t.classList.add("active")}),c.type=function(){return c.options.find(function(t){return t.classList.contains("active")})},a),s.useAsButton&&(s.parent||(s.parent="body"),this._root.button=s.el),document.body.appendChild(this._root.root)}},{key:"_finalBuild",value:function(){var t=this.options,e=this._root;document.body.removeChild(e.root),t.parent&&("string"==typeof t.parent&&(t.parent=document.querySelector(t.parent)),t.parent.appendChild(e.app)),t.useAsButton||t.el.parentElement.replaceChild(e.root,t.el),t.disabled&&this.disable(),t.comparison||(e.button.style.transition="none",t.useAsButton||(e.preview.lastColor.style.transition="none")),t.showAlways?e.app.classList.add("visible"):this.hide()}},{key:"_buildComponents",value:function(){var t=this,e=this.options.components,n={palette:R({element:t._root.palette.picker,wrapper:t._root.palette.palette,onchange:function(e,n){var o=t._color,r=t._root,i=t.options;o.s=e/this.wrapper.offsetWidth*100,o.v=100-n/this.wrapper.offsetHeight*100,o.v<0&&(o.v=0);var a=o.toRGBA().toString();this.element.style.background=a,this.wrapper.style.background="\n                        linear-gradient(to top, rgba(0, 0, 0, ".concat(o.a,"), transparent), \n                        linear-gradient(to left, hsla(").concat(o.h,", 100%, 50%, ").concat(o.a,"), rgba(255, 255, 255, ").concat(o.a,"))\n                    "),i.comparison||(r.button.style.background=a,i.useAsButton||(r.preview.lastColor.style.background=a)),r.preview.currentColor.style.background=a,t._recalc&&t._updateOutput(),r.button.classList.remove("clear")}}),hue:R({lockX:!0,element:t._root.hue.picker,wrapper:t._root.hue.slider,onchange:function(o,r){e.hue&&(t._color.h=r/this.wrapper.offsetHeight*360,this.element.style.backgroundColor="hsl(".concat(t._color.h,", 100%, 50%)"),n.palette.trigger())}}),opacity:R({lockX:!0,element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onchange:function(n,o){e.opacity&&(t._color.a=Math.round(o/this.wrapper.offsetHeight*100)/100,this.element.style.background="rgba(0, 0, 0, ".concat(t._color.a,")"),t.components.palette.trigger())}}),selectable:E({elements:t._root.interaction.options,className:"active",onchange:function(e){t._representation=e.target.getAttribute("data-type").toUpperCase(),t._updateOutput()}})};this.components=n}},{key:"_bindEvents",value:function(){var t=this,e=this._root,n=this.options,o=[c(e.interaction.clear,"click",function(){return t._clearColor()}),c(e.preview.lastColor,"click",function(){return t.setHSVA.apply(t,P(t._lastColor.toHSVA()))}),c(e.interaction.save,"click",function(){!t.applyColor()&&!n.showAlways&&t.hide()}),c(e.interaction.result,["keyup","input"],function(e){t._recalc=!1,t.setColor(e.target.value,!0)&&!t._initializingActive&&t._emit("change",t._color),e.stopImmediatePropagation()}),c([e.palette.palette,e.palette.picker,e.hue.slider,e.hue.picker,e.opacity.slider,e.opacity.picker],["mousedown","touchstart"],function(){return t._recalc=!0}),c(window,"resize",function(){return t._rePositioningPicker})];if(e.swatches&&o.push(c(e.swatches,"click",function(e){var o=e.target,r=n.swatches[Number(o.getAttribute("data-color-index"))];r&&(t.setHSVA.apply(t,P(r.toHSVA()).concat([!0])),t._emit("swatchselect",r))})),!n.showAlways){var r=n.closeWithKey;o.push(c(e.button,"click",function(){return t.isOpen()?t.hide():t.show()}),c(document,"keyup",function(e){return t.isOpen()&&(e.key===r||e.code===r)&&t.hide()}),c(document,["touchstart","mousedown"],function(n){t.isOpen()&&!h(n).some(function(t){return t===e.app||t===e.button})&&t.hide()},{capture:!0}))}n.adjustableNumbers&&f(e.interaction.result,!1),this._eventBindings=o}},{key:"_rePositioningPicker",value:function(){var t=this._root,e=this._root.app;if(this.options.parent){var n=t.button.getBoundingClientRect();e.style.position="fixed",e.style.marginLeft="".concat(n.left,"px"),e.style.marginTop="".concat(n.top,"px")}var o=t.button.getBoundingClientRect(),r=e.getBoundingClientRect(),i=e.style;r.bottom>window.innerHeight?i.top="".concat(-r.height-5,"px"):o.bottom+r.height<window.innerHeight&&(i.top="".concat(o.height+5,"px"));var a={left:-r.width+o.width,middle:-r.width/2+o.width/2,right:0},c=parseInt(getComputedStyle(e).left,10),s=a[this.options.position],u=r.left-c+s,l=r.left-c+s+r.width;"middle"!==this.options.position&&(u<0&&-u<r.width/2||l>window.innerWidth&&l-window.innerWidth<r.width/2)?s=a.middle:u<0?s=a.right:l>window.innerWidth&&(s=a.left),i.left="".concat(s,"px")}},{key:"_updateOutput",value:function(){var t,e=this;this._root.interaction.type()&&(this._root.interaction.result.value=(t="to"+e._root.interaction.type().getAttribute("data-type"),"function"==typeof e._color[t]?e._color[t]().toString():"")),this._initializingActive||this._emit("change",this._color)}},{key:"_emit",value:function(t){for(var e=this,n=arguments.length,o=new Array(n>1?n-1:0),r=1;r<n;r++)o[r-1]=arguments[r];this._eventListener[t].forEach(function(t){return t.apply(void 0,o.concat([e]))})}},{key:"on",value:function(t,e){return"function"==typeof e&&"string"==typeof t&&t in this._eventListener&&this._eventListener[t].push(e),this}},{key:"off",value:function(t,e){var n=this._eventListener[t];if(n){var o=n.indexOf(e);~o&&n.splice(o,1)}return this}},{key:"applyColor",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=this._root,n=e.preview,o=e.button,r=this._color.toRGBA().toString();n.lastColor.style.background=r,this.options.useAsButton||(o.style.background=r),o.classList.remove("clear"),this._lastColor=this._color.clone(),this._initializingActive||t||this._emit("save",this._color)}},{key:"_clearColor",value:function(){var t=this._root,e=this.options;e.useAsButton||(t.button.style.background="rgba(255, 255, 255, 0.4)"),t.button.classList.add("clear"),e.showAlways||this.hide(),this._emit("change",null)}},{key:"destroy",value:function(){var t=this;this._eventBindings.forEach(function(t){return s.apply(o,P(t))}),Object.keys(this.components).forEach(function(e){return t.components[e].destroy()})}},{key:"destroyAndRemove",value:function(){this.destroy();var t=this._root.root;t.parentElement.removeChild(t)}},{key:"hide",value:function(){return this._root.app.classList.remove("visible"),this}},{key:"show",value:function(){if(!this.options.disabled)return this._root.app.classList.add("visible"),this._rePositioningPicker(),this}},{key:"isOpen",value:function(){return this._root.app.classList.contains("visible")}},{key:"setHSVA",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:360,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,r=arguments.length>4&&void 0!==arguments[4]&&arguments[4],i=this._recalc;if(this._recalc=!1,t<0||t>360||e<0||e>100||n<0||n>100||o<0||o>1)return!1;var a=this.components,c=a.hue,s=a.opacity,u=a.palette,l=c.options.wrapper.offsetHeight*(t/360);c.update(0,l);var p=s.options.wrapper.offsetHeight*o;s.update(0,p);var d=u.options.wrapper,h=d.offsetWidth*(e/100),f=d.offsetHeight*(1-n/100);return u.update(h,f),this._color=new j(t,e,n,o),this._recalc=i,this._recalc&&this._updateOutput(),r||this.applyColor(),!0}},{key:"setColor",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(null===t)return this._clearColor(),!0;var n=O(t),o=n.values,r=n.type;if(o){var i=r.toUpperCase(),a=this._root.interaction.options,c=a.find(function(t){return t.getAttribute("data-type")===i});if(!c.hidden){var s=!0,u=!1,l=void 0;try{for(var p,d=a[Symbol.iterator]();!(s=(p=d.next()).done);s=!0){var h=p.value;h.classList[h===c?"add":"remove"]("active")}}catch(t){u=!0,l=t}finally{try{s||null==d.return||d.return()}finally{if(u)throw l}}}return this.setHSVA.apply(this,P(o).concat([e]))}}},{key:"setColorRepresentation",value:function(t){return t=t.toUpperCase(),!!this._root.interaction.options.find(function(e){return e.getAttribute("data-type")===t&&!e.click()})}},{key:"getColorRepresentation",value:function(){return this._representation}},{key:"getColor",value:function(){return this._color}},{key:"getRoot",value:function(){return this._root}},{key:"disable",value:function(){return this.hide(),this.options.disabled=!0,this._root.button.classList.add("disabled"),this}},{key:"enable",value:function(){return this.options.disabled=!1,this._root.button.classList.remove("disabled"),this}}])&&B(e.prototype,n),r&&B(e,r),t}();D.utils={once:a,on:c,off:s,eventPath:h,createElementFromString:l,adjustableInputNumbers:f,removeAttribute:p,createFromTemplate:d},D.create=function(t){return new D(t)},D.version="0.4.0";e.default=D}]).default});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Pickr=e():t.Pickr=e()}(window,function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="dist/",n(n.s=1)}([function(t,e,n){},function(t,e,n){"use strict";n.r(e);var o={};n.r(o),n.d(o,"once",function(){return a}),n.d(o,"on",function(){return c}),n.d(o,"off",function(){return s}),n.d(o,"createElementFromString",function(){return l}),n.d(o,"removeAttribute",function(){return p}),n.d(o,"createFromTemplate",function(){return d}),n.d(o,"eventPath",function(){return h}),n.d(o,"adjustableInputNumbers",function(){return f});var r={};n.r(r),n.d(r,"hsvToRgb",function(){return b}),n.d(r,"hsvToHex",function(){return _}),n.d(r,"hsvToCmyk",function(){return w}),n.d(r,"hsvToHsl",function(){return k}),n.d(r,"parseToHSV",function(){return j});n(0);function i(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var a=function(t,e,n,o){return c(t,e,function t(){n.apply(this,arguments),this.removeEventListener(e,t)},o)},c=u.bind(null,"addEventListener"),s=u.bind(null,"removeEventListener");function u(t,e,n,o){var r=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};return e instanceof HTMLCollection||e instanceof NodeList?e=Array.from(e):Array.isArray(e)||(e=[e]),Array.isArray(n)||(n=[n]),e.forEach(function(e){return n.forEach(function(n){return e[t](n,o,function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),o.forEach(function(e){i(t,e,n[e])})}return t}({capture:!1},r))})}),Array.prototype.slice.call(arguments,1)}function l(t){var e=document.createElement("div");return e.innerHTML=t.trim(),e.firstElementChild}function p(t,e){var n=t.getAttribute(e);return t.removeAttribute(e),n}function d(t){return function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=p(e,"data-con"),r=p(e,"data-key");r&&(n[r]=e);for(var i=Array.from(e.children),a=o?n[o]={}:n,c=0;c<i.length;c++){var s=i[c],u=p(s,"data-arr");u?(a[u]||(a[u]=[])).push(s):t(s,a)}return n}(l(t))}function h(t){var e=t.path||t.composedPath&&t.composedPath();if(e)return e;var n=t.target.parentElement;for(e=[t.target,n];n=n.parentElement;)e.push(n);return e.push(document,window),e}function f(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],n=function(t){return t>="0"&&t<="9"||"-"===t||"."===t};function o(o){for(var r=t.value,i=t.selectionStart,a=i,c="",s=i-1;s>0&&n(r[s]);s--)c=r[s]+c,a--;for(var u=i,l=r.length;u<l&&n(r[u]);u++)c+=r[u];if(c.length>0&&!isNaN(c)&&isFinite(c)){var p=o.deltaY<0?1:-1,d=o.ctrlKey?5*p:p,h=Number(c)+d;!e&&h<0&&(h=0);var f=r.substr(0,a)+h+r.substring(a+c.length,r.length),v=a+String(h).length;t.value=f,t.focus(),t.setSelectionRange(v,v)}o.preventDefault(),t.dispatchEvent(new Event("input"))}c(t,"focus",function(){return c(window,"wheel",o)}),c(t,"blur",function(){return s(window,"wheel",o)})}function v(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],o=!0,r=!1,i=void 0;try{for(var a,c=t[Symbol.iterator]();!(o=(a=c.next()).done)&&(n.push(a.value),!e||n.length!==e);o=!0);}catch(t){r=!0,i=t}finally{try{o||null==c.return||c.return()}finally{if(r)throw i}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function y(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var g=Math.min,m=Math.max;function b(t,e,n){t=t/360*6,e/=100,n/=100;var o=Math.floor(t),r=t-o,i=n*(1-e),a=n*(1-r*e),c=n*(1-(1-r)*e),s=o%6;return[255*[n,a,i,i,c,n][s],255*[c,n,n,a,i,i][s],255*[i,i,c,n,n,a][s]]}function _(t,e,n){return b(t,e,n).map(function(t){return Math.round(t).toString(16).padStart(2,"0")})}function w(t,e,n){var o,r=b(t,e,n),i=r[0]/255,a=r[1]/255,c=r[2]/255;return[100*(1===(o=g(1-i,1-a,1-c))?0:(1-i-o)/(1-o)),100*(1===o?0:(1-a-o)/(1-o)),100*(1===o?0:(1-c-o)/(1-o)),100*o]}function k(t,e,n){var o=(2-(e/=100))*(n/=100)/2;return 0!==o&&(e=1===o?0:o<.5?e*n/(2*o):e*n/(2-2*o)),[t,100*e,100*o]}function A(t,e,n){var o,r,i=g(t/=255,e/=255,n/=255),a=m(t,e,n),c=a-i;if(0===c)o=r=0;else{r=c/a;var s=((a-t)/6+c/2)/c,u=((a-e)/6+c/2)/c,l=((a-n)/6+c/2)/c;t===a?o=l-u:e===a?o=1/3+s-l:n===a&&(o=2/3+u-s),o<0?o+=1:o>1&&(o-=1)}return[360*o,100*r,100*a]}function C(t,e,n,o){return e/=100,n/=100,y(A(255*(1-g(1,(t/=100)*(1-(o/=100))+o)),255*(1-g(1,e*(1-o)+o)),255*(1-g(1,n*(1-o)+o))))}function S(t,e,n){return e/=100,[t,2*(e*=(n/=100)<.5?n:1-n)/(n+e)*100,100*(n+e)]}function O(t){return A.apply(void 0,y(t.match(/.{2}/g).map(function(t){return parseInt(t,16)})))}function j(t){var e,n={cmyk:/^cmyk[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)/i,rgba:/^(rgb|rgba)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hsla:/^(hsl|hsla)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hsva:/^(hsv|hsva)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hex:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},o=function(t){return t.map(function(t){return/^(|\d+)\.\d+|\d+$/.test(t)?Number(t):void 0})};for(var r in n)if(e=n[r].exec(t))switch(r){case"cmyk":var i=v(o(e),5),a=i[1],c=i[2],s=i[3],u=i[4];if(a>100||c>100||s>100||u>100)break;return{values:[].concat(y(C(a,c,s,u)),[1]),type:r};case"rgba":var l=v(o(e),6),p=l[2],d=l[3],h=l[4],f=l[5],g=void 0===f?1:f;if(p>255||d>255||h>255||g<0||g>1)break;return{values:[].concat(y(A(p,d,h)),[g]),type:r};case"hex":var m=function(t,e){return[t.substring(0,e),t.substring(e,t.length)]},b=v(e,2)[1];3===b.length?b+="F":6===b.length&&(b+="FF");var _=void 0;if(4===b.length){var w=v(m(b,3).map(function(t){return t+t}),2);b=w[0],_=w[1]}else if(8===b.length){var k=v(m(b,6),2);b=k[0],_=k[1]}return _=parseInt(_,16)/255,{values:[].concat(y(O(b)),[_]),type:r};case"hsla":var j=v(o(e),6),x=j[2],E=j[3],H=j[4],R=j[5],B=void 0===R?1:R;if(x>360||E>100||H>100||B<0||B>1)break;return{values:[].concat(y(S(x,E,H)),[B]),type:r};case"hsva":var L=v(o(e),6),P=L[2],D=L[3],F=L[4],T=L[5],M=void 0===T?1:T;if(P>360||D>100||F>100||M<0||M>1)break;return{values:[P,D,F,M],type:r}}return{values:null,type:null}}function x(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,i=Math.ceil,a={h:t,s:e,v:n,a:o,toHSVA:function(){var t=[a.h,a.s,a.v],e=t.map(i);return t.push(a.a),t.toString=function(){return"hsva(".concat(e[0],", ").concat(e[1],"%, ").concat(e[2],"%, ").concat(a.a.toFixed(1),")")},t},toHSLA:function(){var t=k(a.h,a.s,a.v),e=t.map(i);return t.push(a.a),t.toString=function(){return"hsla(".concat(e[0],", ").concat(e[1],"%, ").concat(e[2],"%, ").concat(a.a.toFixed(1),")")},t},toRGBA:function(){var t=b(a.h,a.s,a.v),e=t.map(i);return t.push(a.a),t.toString=function(){return"rgba(".concat(e[0],", ").concat(e[1],", ").concat(e[2],", ").concat(a.a.toFixed(1),")")},t},toCMYK:function(){var t=w(a.h,a.s,a.v),e=t.map(i);return t.toString=function(){return"cmyk(".concat(e[0],"%, ").concat(e[1],"%, ").concat(e[2],"%, ").concat(e[3],"%)")},t},toHEX:function(){var t=_.apply(r,[a.h,a.s,a.v]);return t.toString=function(){var e=a.a>=1?"":Number((255*a.a).toFixed(0)).toString(16).toUpperCase().padStart(2,"0");return"#".concat(t.join("").toUpperCase()+e)},t},clone:function(){return x(a.h,a.s,a.v,a.a)}};return a}function E(t){var e={options:Object.assign({lockX:!1,lockY:!1,onchange:function(){return 0}},t),_tapstart:function(t){c(document,["mouseup","touchend","touchcancel"],e._tapstop),c(document,["mousemove","touchmove"],e._tapmove),t.preventDefault(),e.wrapperRect=e.options.wrapper.getBoundingClientRect(),e._tapmove(t)},_tapmove:function(t){var n=e.options,o=e.cache,r=n.element,i=e.wrapperRect,a=0,c=0;if(t){var s=t&&t.touches&&t.touches[0];a=t?(s||t).clientX:0,c=t?(s||t).clientY:0,a<i.left?a=i.left:a>i.left+i.width&&(a=i.left+i.width),c<i.top?c=i.top:c>i.top+i.height&&(c=i.top+i.height),a-=i.left,c-=i.top}else o&&(a=o.x,c=o.y);n.lockX||(r.style.left="calc(".concat(a/i.width*100,"% - ").concat(r.offsetWidth/2,"px)")),n.lockY||(r.style.top="calc(".concat(c/i.height*100,"% - ").concat(r.offsetWidth/2,"px)")),e.cache={x:a,y:c},n.onchange(a,c)},_tapstop:function(){s(document,["mouseup","touchend","touchcancel"],e._tapstop),s(document,["mousemove","touchmove"],e._tapmove)},trigger:function(){e.wrapperRect=e.options.wrapper.getBoundingClientRect(),e._tapmove()},update:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;e.wrapperRect=e.options.wrapper.getBoundingClientRect(),e._tapmove({clientX:e.wrapperRect.left+t,clientY:e.wrapperRect.top+n})},destroy:function(){var t=e.options,n=e._tapstart;s([t.wrapper,t.element],"mousedown",n),s([t.wrapper,t.element],"touchstart",n,{passive:!1})}};e.wrapperRect=e.options.wrapper.getBoundingClientRect();var n=e.options,o=e._tapstart;return c([n.wrapper,n.element],"mousedown",o),c([n.wrapper,n.element],"touchstart",o,{passive:!1}),e}function H(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e={options:Object.assign({onchange:function(){return 0},className:"",elements:[]},t),_ontap:function(t){var n=e.options;n.elements.forEach(function(e){return e.classList[t.target===e?"add":"remove"](n.className)}),n.onchange(t)},destroy:function(){s(e.options.elements,"click",this._ontap)}};return c(e.options.elements,"click",e._ontap),e}function R(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function B(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}var L=function(){function t(e){var n=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.options=Object.assign({useAsButton:!1,disabled:!1,comparison:!0,components:{interaction:{}},strings:{},swatches:null,default:"fff",defaultRepresentation:"HEX",position:"middle",adjustableNumbers:!0,showAlways:!1,parent:void 0,closeWithKey:"Escape"},e),this.options.components.interaction||(this.options.components.interaction={}),this._initializingActive=!0,this._recalc=!0,this._color=new x,this._lastColor=new x,this._swatchColors=[],this._eventListener={swatchselect:[],change:[],save:[],init:[]},this._preBuild(),this._buildComponents(),this._bindEvents(),this._representation=this.options.defaultRepresentation,this.setColorRepresentation(this._representation),this._finalBuild(),this._rePositioningPicker();var o=this.options.swatches;o&&o.length&&o.forEach(function(t){return n.addSwatch(t)}),requestAnimationFrame(function t(){if(!this._root.app.offsetParent)return requestAnimationFrame(t.bind(this));this.setColor(this.options.default),this._initializingActive=!1,this._emit("init")}.bind(this))}var e,n,r;return e=t,(n=[{key:"_preBuild",value:function(){var t,e,n,o,r,i,a,c=this.options;"string"==typeof c.el&&(c.el=document.querySelector(c.el)),this._root=(e=(t=c).components,n=t.strings,o=t.useAsButton,r=function(t){return t?"":'style="display:none" hidden'},i=d('\n        <div data-key="root" class="pickr">\n        \n            '.concat(o?"":'<div data-key="button" class="pcr-button"></div>','\n\n            <div data-key="app" class="pcr-app">\n                <div class="pcr-selection">\n                    <div data-con="preview" class="pcr-color-preview" ').concat(r(e.preview),'>\n                        <button data-key="lastColor" class="pcr-last-color"></button>\n                        <div data-key="currentColor" class="pcr-current-color"></div>\n                    </div>\n\n                    <div data-con="palette" class="pcr-color-palette">\n                        <div data-key="picker" class="pcr-picker"></div>\n                        <div data-key="palette" class="pcr-palette"></div>\n                    </div>\n\n                    <div data-con="hue" class="pcr-color-chooser" ').concat(r(e.hue),'>\n                        <div data-key="picker" class="pcr-picker"></div>\n                        <div data-key="slider" class="pcr-hue pcr-slider"></div>\n                    </div>\n\n                    <div data-con="opacity" class="pcr-color-opacity" ').concat(r(e.opacity),'>\n                        <div data-key="picker" class="pcr-picker"></div>\n                        <div data-key="slider" class="pcr-opacity pcr-slider"></div>\n                    </div>\n                </div>\n\n                <div class="swatches" data-key="swatches"></div> \n\n                <div data-con="interaction" class="pcr-interaction" ').concat(r(Object.keys(e.interaction).length),'>\n                    <input data-key="result" class="pcr-result" type="text" spellcheck="false" ').concat(r(e.interaction.input),'>\n\n                    <input data-arr="options" class="pcr-type" data-type="HEX" value="HEX" type="button" ').concat(r(e.interaction.hex),'>\n                    <input data-arr="options" class="pcr-type" data-type="RGBA" value="RGBa" type="button" ').concat(r(e.interaction.rgba),'>\n                    <input data-arr="options" class="pcr-type" data-type="HSLA" value="HSLa" type="button" ').concat(r(e.interaction.hsla),'>\n                    <input data-arr="options" class="pcr-type" data-type="HSVA" value="HSVa" type="button" ').concat(r(e.interaction.hsva),'>\n                    <input data-arr="options" class="pcr-type" data-type="CMYK" value="CMYK" type="button" ').concat(r(e.interaction.cmyk),'>\n\n                    <input data-key="save" class="pcr-save" value="').concat(n.save||"Save",'" type="button" ').concat(r(e.interaction.save),'>\n                    <input data-key="clear" class="pcr-clear" value="').concat(n.clear||"Clear",'" type="button" ').concat(r(e.interaction.clear),">\n                </div>\n            </div>\n        </div>\n    ")),(a=i.interaction).options.find(function(t){return!t.hidden&&!t.classList.add("active")}),a.type=function(){return a.options.find(function(t){return t.classList.contains("active")})},i),c.useAsButton&&(c.parent||(c.parent="body"),this._root.button=c.el),document.body.appendChild(this._root.root)}},{key:"_finalBuild",value:function(){var t=this.options,e=this._root;document.body.removeChild(e.root),t.parent&&("string"==typeof t.parent&&(t.parent=document.querySelector(t.parent)),t.parent.appendChild(e.app)),t.useAsButton||t.el.parentElement.replaceChild(e.root,t.el),t.disabled&&this.disable(),t.comparison||(e.button.style.transition="none",t.useAsButton||(e.preview.lastColor.style.transition="none")),t.showAlways?e.app.classList.add("visible"):this.hide()}},{key:"_buildComponents",value:function(){var t=this,e=this.options.components,n={palette:E({element:t._root.palette.picker,wrapper:t._root.palette.palette,onchange:function(e,n){var o=t._color,r=t._root,i=t.options;o.s=e/this.wrapper.offsetWidth*100,o.v=100-n/this.wrapper.offsetHeight*100,o.v<0&&(o.v=0);var a=o.toRGBA().toString();this.element.style.background=a,this.wrapper.style.background="\n                        linear-gradient(to top, rgba(0, 0, 0, ".concat(o.a,"), transparent), \n                        linear-gradient(to left, hsla(").concat(o.h,", 100%, 50%, ").concat(o.a,"), rgba(255, 255, 255, ").concat(o.a,"))\n                    "),i.comparison||(r.button.style.background=a,i.useAsButton||(r.preview.lastColor.style.background=a)),r.preview.currentColor.style.background=a,t._recalc&&t._updateOutput(),r.button.classList.remove("clear")}}),hue:E({lockX:!0,element:t._root.hue.picker,wrapper:t._root.hue.slider,onchange:function(o,r){e.hue&&(t._color.h=r/this.wrapper.offsetHeight*360,this.element.style.backgroundColor="hsl(".concat(t._color.h,", 100%, 50%)"),n.palette.trigger())}}),opacity:E({lockX:!0,element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onchange:function(n,o){e.opacity&&(t._color.a=Math.round(o/this.wrapper.offsetHeight*100)/100,this.element.style.background="rgba(0, 0, 0, ".concat(t._color.a,")"),t.components.palette.trigger())}}),selectable:H({elements:t._root.interaction.options,className:"active",onchange:function(e){t._representation=e.target.getAttribute("data-type").toUpperCase(),t._updateOutput()}})};this.components=n}},{key:"_bindEvents",value:function(){var t=this,e=this._root,n=this.options,o=[c(e.interaction.clear,"click",function(){return t._clearColor()}),c(e.preview.lastColor,"click",function(){return t.setHSVA.apply(t,R(t._lastColor.toHSVA()))}),c(e.interaction.save,"click",function(){!t.applyColor()&&!n.showAlways&&t.hide()}),c(e.interaction.result,["keyup","input"],function(e){t._recalc=!1,t.setColor(e.target.value,!0)&&!t._initializingActive&&t._emit("change",t._color),e.stopImmediatePropagation()}),c([e.palette.palette,e.palette.picker,e.hue.slider,e.hue.picker,e.opacity.slider,e.opacity.picker],["mousedown","touchstart"],function(){return t._recalc=!0}),c(window,"resize",function(){return t._rePositioningPicker})];if(!n.showAlways){var r=n.closeWithKey;o.push(c(e.button,"click",function(){return t.isOpen()?t.hide():t.show()}),c(document,"keyup",function(e){return t.isOpen()&&(e.key===r||e.code===r)&&t.hide()}),c(document,["touchstart","mousedown"],function(n){t.isOpen()&&!h(n).some(function(t){return t===e.app||t===e.button})&&t.hide()},{capture:!0}))}n.adjustableNumbers&&f(e.interaction.result,!1),this._eventBindings=o}},{key:"_rePositioningPicker",value:function(){var t=this._root,e=this._root.app;if(this.options.parent){var n=t.button.getBoundingClientRect();e.style.position="fixed",e.style.marginLeft="".concat(n.left,"px"),e.style.marginTop="".concat(n.top,"px")}var o=t.button.getBoundingClientRect(),r=e.getBoundingClientRect(),i=e.style;r.bottom>window.innerHeight?i.top="".concat(-r.height-5,"px"):o.bottom+r.height<window.innerHeight&&(i.top="".concat(o.height+5,"px"));var a={left:-r.width+o.width,middle:-r.width/2+o.width/2,right:0},c=parseInt(getComputedStyle(e).left,10),s=a[this.options.position],u=r.left-c+s,l=r.left-c+s+r.width;"middle"!==this.options.position&&(u<0&&-u<r.width/2||l>window.innerWidth&&l-window.innerWidth<r.width/2)?s=a.middle:u<0?s=a.right:l>window.innerWidth&&(s=a.left),i.left="".concat(s,"px")}},{key:"_updateOutput",value:function(){if(this._root.interaction.type()){var t="to".concat(this._root.interaction.type().getAttribute("data-type"));this._root.interaction.result.value="function"==typeof this._color[t]?this._color[t]().toString():""}this._initializingActive||this._emit("change",this._color)}},{key:"_clearColor",value:function(){var t=this._root,e=this.options;e.useAsButton||(t.button.style.background="rgba(255, 255, 255, 0.4)"),t.button.classList.add("clear"),e.showAlways||this.hide(),this._emit("save",null)}},{key:"_emit",value:function(t){for(var e=this,n=arguments.length,o=new Array(n>1?n-1:0),r=1;r<n;r++)o[r-1]=arguments[r];this._eventListener[t].forEach(function(t){return t.apply(void 0,o.concat([e]))})}},{key:"on",value:function(t,e){return"function"==typeof e&&"string"==typeof t&&t in this._eventListener&&this._eventListener[t].push(e),this}},{key:"off",value:function(t,e){var n=this._eventListener[t];if(n){var o=n.indexOf(e);~o&&n.splice(o,1)}return this}},{key:"addSwatch",value:function(t){var e=this,n=j(t).values;if(n){var o=this._swatchColors,r=this._root,i=x.apply(void 0,R(n)),a=l('<button  style="color: '.concat(i.toRGBA(),'"></button>'));return r.swatches.appendChild(a),o.push({element:a,hsvaColorObject:i}),this._eventBindings.push(c(a,"click",function(){e.setHSVA.apply(e,R(i.toHSVA()).concat([!0])),e._emit("swatchselect",i)})),!0}return!1}},{key:"removeSwatch",value:function(t){if("number"==typeof t){var e=this._swatchColors[t];if(e){var n=e.element;return this._root.swatches.removeChild(n),this._swatchColors.splice(t,1),!0}}return!1}},{key:"applyColor",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=this._root,n=e.preview,o=e.button,r=this._color.toRGBA().toString();n.lastColor.style.background=r,this.options.useAsButton||(o.style.background=r),o.classList.remove("clear"),this._lastColor=this._color.clone(),this._initializingActive||t||this._emit("save",this._color)}},{key:"destroy",value:function(){var t=this;this._eventBindings.forEach(function(t){return s.apply(o,R(t))}),Object.keys(this.components).forEach(function(e){return t.components[e].destroy()})}},{key:"destroyAndRemove",value:function(){this.destroy();var t=this._root.root;t.parentElement.removeChild(t)}},{key:"hide",value:function(){return this._root.app.classList.remove("visible"),this}},{key:"show",value:function(){if(!this.options.disabled)return this._root.app.classList.add("visible"),this._rePositioningPicker(),this}},{key:"isOpen",value:function(){return this._root.app.classList.contains("visible")}},{key:"setHSVA",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:360,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,r=arguments.length>4&&void 0!==arguments[4]&&arguments[4],i=this._recalc;if(this._recalc=!1,t<0||t>360||e<0||e>100||n<0||n>100||o<0||o>1)return!1;var a=this.components,c=a.hue,s=a.opacity,u=a.palette,l=c.options.wrapper.offsetHeight*(t/360);c.update(0,l);var p=s.options.wrapper.offsetHeight*o;s.update(0,p);var d=u.options.wrapper,h=d.offsetWidth*(e/100),f=d.offsetHeight*(1-n/100);return u.update(h,f),this._color=new x(t,e,n,o),this._recalc=i,this._recalc&&this._updateOutput(),r||this.applyColor(),!0}},{key:"setColor",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(null===t)return this._clearColor(),!0;var n=j(t),o=n.values,r=n.type;if(o){var i=r.toUpperCase(),a=this._root.interaction.options,c=a.find(function(t){return t.getAttribute("data-type")===i});if(!c.hidden){var s=!0,u=!1,l=void 0;try{for(var p,d=a[Symbol.iterator]();!(s=(p=d.next()).done);s=!0){var h=p.value;h.classList[h===c?"add":"remove"]("active")}}catch(t){u=!0,l=t}finally{try{s||null==d.return||d.return()}finally{if(u)throw l}}}return this.setHSVA.apply(this,R(o).concat([e]))}}},{key:"setColorRepresentation",value:function(t){return t=t.toUpperCase(),!!this._root.interaction.options.find(function(e){return e.getAttribute("data-type")===t&&!e.click()})}},{key:"getColorRepresentation",value:function(){return this._representation}},{key:"getColor",value:function(){return this._color}},{key:"getRoot",value:function(){return this._root}},{key:"disable",value:function(){return this.hide(),this.options.disabled=!0,this._root.button.classList.add("disabled"),this}},{key:"enable",value:function(){return this.options.disabled=!1,this._root.button.classList.remove("disabled"),this}}])&&B(e.prototype,n),r&&B(e,r),t}();L.utils={once:a,on:c,off:s,eventPath:h,createElementFromString:l,adjustableInputNumbers:f,removeAttribute:p,createFromTemplate:d},L.create=function(t){return new L(t)},L.version="0.4.1";e.default=L}]).default});
 //# sourceMappingURL=pickr.es5.min.js.map

dist/pickr.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Pickr=e():t.Pickr=e()}(window,function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(o,i,function(e){return t[e]}.bind(null,i));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="dist/",n(n.s=1)}([function(t,e,n){},function(t,e,n){"use strict";n.r(e);n(0);function o(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}const i=s.bind(null,"addEventListener"),r=s.bind(null,"removeEventListener");function s(t,e,n,i){let r=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};return e instanceof HTMLCollection||e instanceof NodeList?e=Array.from(e):Array.isArray(e)||(e=[e]),Array.isArray(n)||(n=[n]),e.forEach(e=>n.forEach(n=>e[t](n,i,function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(e){o(t,e,n[e])})}return t}({capture:!1},r)))),Array.prototype.slice.call(arguments,1)}function a(t){const e=document.createElement("div");return e.innerHTML=t.trim(),e.firstElementChild}function c(t,e){const n=t.getAttribute(e);return t.removeAttribute(e),n}function l(t){return function t(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const o=c(e,"data-con"),i=c(e,"data-key");i&&(n[i]=e);const r=Array.from(e.children),s=o?n[o]={}:n;for(let e of r){const n=c(e,"data-arr");n?(s[n]||(s[n]=[])).push(e):t(e,s)}return n}(a(t))}function p(t){let e=t.path||t.composedPath&&t.composedPath();if(e)return e;let n=t.target.parentElement;for(e=[t.target,n];n=n.parentElement;)e.push(n);return e.push(document,window),e}function u(t){let e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];const n=t=>t>="0"&&t<="9"||"-"===t||"."===t;function o(o){const i=t.value,r=t.selectionStart;let s=r,a="";for(let t=r-1;t>0&&n(i[t]);t--)a=i[t]+a,s--;for(let t=r,e=i.length;t<e&&n(i[t]);t++)a+=i[t];if(a.length>0&&!isNaN(a)&&isFinite(a)){const n=o.deltaY<0?1:-1,r=o.ctrlKey?5*n:n;let c=Number(a)+r;!e&&c<0&&(c=0);const l=i.substr(0,s)+c+i.substring(s+a.length,i.length),p=s+String(c).length;t.value=l,t.focus(),t.setSelectionRange(p,p)}o.preventDefault(),t.dispatchEvent(new Event("input"))}i(t,"focus",()=>i(window,"wheel",o)),i(t,"blur",()=>r(window,"wheel",o))}function h(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],o=!0,i=!1,r=void 0;try{for(var s,a=t[Symbol.iterator]();!(o=(s=a.next()).done)&&(n.push(s.value),!e||n.length!==e);o=!0);}catch(t){i=!0,r=t}finally{try{o||null==a.return||a.return()}finally{if(i)throw r}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}const d=Math.min,f=Math.max;function v(t,e,n){t=t/360*6,e/=100,n/=100;let o=Math.floor(t),i=t-o,r=n*(1-e),s=n*(1-i*e),a=n*(1-(1-i)*e),c=o%6;return[255*[n,s,r,r,a,n][c],255*[a,n,n,s,r,r][c],255*[r,r,a,n,n,s][c]]}function g(t,e,n){let o,i,r;const s=d(t/=255,e/=255,n/=255),a=f(t,e,n),c=a-s;if(0===c)o=i=0;else{i=c/a;let r=((a-t)/6+c/2)/c,s=((a-e)/6+c/2)/c,l=((a-n)/6+c/2)/c;t===a?o=l-s:e===a?o=1/3+r-l:n===a&&(o=2/3+s-r),o<0?o+=1:o>1&&(o-=1)}return[360*o,100*i,100*(r=a)]}function y(t,e,n,o){return e/=100,n/=100,[...g(255*(1-d(1,(t/=100)*(1-(o/=100))+o)),255*(1-d(1,e*(1-o)+o)),255*(1-d(1,n*(1-o)+o)))]}function m(t,e,n){return e/=100,[t,2*(e*=(n/=100)<.5?n:1-n)/(n+e)*100,100*(n+e)]}function b(t){return g(...t.match(/.{2}/g).map(t=>parseInt(t,16)))}function _(t){const e={cmyk:/^cmyk[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)/i,rgba:/^(rgb|rgba)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hsla:/^(hsl|hsla)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hsva:/^(hsv|hsva)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hex:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},n=t=>t.map(t=>/^(|\d+)\.\d+|\d+$/.test(t)?Number(t):void 0);let o;for(let s in e)if(o=e[s].exec(t))switch(s){case"cmyk":{let t=h(n(o),5),e=t[1],i=t[2],r=t[3],a=t[4];if(e>100||i>100||r>100||a>100)break;return{values:[...y(e,i,r,a),1],type:s}}case"rgba":{let t=h(n(o),6),e=t[2],i=t[3],r=t[4],a=t[5],c=void 0===a?1:a;if(e>255||i>255||r>255||c<0||c>1)break;return{values:[...g(e,i,r),c],type:s}}case"hex":{const t=(t,e)=>[t.substring(0,e),t.substring(e,t.length)];let e,n=h(o,2)[1];if(3===n.length?n+="F":6===n.length&&(n+="FF"),4===n.length){var i=h(t(n,3).map(t=>t+t),2);n=i[0],e=i[1]}else if(8===n.length){var r=h(t(n,6),2);n=r[0],e=r[1]}return e=parseInt(e,16)/255,{values:[...b(n),e],type:s}}case"hsla":{let t=h(n(o),6),e=t[2],i=t[3],r=t[4],a=t[5],c=void 0===a?1:a;if(e>360||i>100||r>100||c<0||c>1)break;return{values:[...m(e,i,r),c],type:s}}case"hsva":{let t=h(n(o),6),e=t[2],i=t[3],r=t[4],a=t[5],c=void 0===a?1:a;if(e>360||i>100||r>100||c<0||c>1)break;return{values:[e,i,r,c],type:s}}}return{values:null,type:null}}function w(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1;const i=Math.ceil,r={h:t,s:e,v:n,a:o,toHSVA(){const t=[r.h,r.s,r.v],e=t.map(i);return t.push(r.a),t.toString=(()=>`hsva(${e[0]}, ${e[1]}%, ${e[2]}%, ${r.a.toFixed(1)})`),t},toHSLA(){const t=function(t,e,n){let o=(2-(e/=100))*(n/=100)/2;return 0!==o&&(e=1===o?0:o<.5?e*n/(2*o):e*n/(2-2*o)),[t,100*e,100*o]}(r.h,r.s,r.v),e=t.map(i);return t.push(r.a),t.toString=(()=>`hsla(${e[0]}, ${e[1]}%, ${e[2]}%, ${r.a.toFixed(1)})`),t},toRGBA(){const t=v(r.h,r.s,r.v),e=t.map(i);return t.push(r.a),t.toString=(()=>`rgba(${e[0]}, ${e[1]}, ${e[2]}, ${r.a.toFixed(1)})`),t},toCMYK(){const t=function(t,e,n){const o=v(t,e,n),i=o[0]/255,r=o[1]/255,s=o[2]/255;let a,c,l,p;return[100*(c=1===(a=d(1-i,1-r,1-s))?0:(1-i-a)/(1-a)),100*(l=1===a?0:(1-r-a)/(1-a)),100*(p=1===a?0:(1-s-a)/(1-a)),100*a]}(r.h,r.s,r.v),e=t.map(i);return t.toString=(()=>`cmyk(${e[0]}%, ${e[1]}%, ${e[2]}%, ${e[3]}%)`),t},toHEX(){const t=function(t,e,n){return v(t,e,n).map(t=>Math.round(t).toString(16).padStart(2,"0"))}(...[r.h,r.s,r.v]);return t.toString=(()=>{const e=r.a>=1?"":Number((255*r.a).toFixed(0)).toString(16).toUpperCase().padStart(2,"0");return`#${t.join("").toUpperCase()+e}`}),t},clone:()=>w(r.h,r.s,r.v,r.a)};return r}function k(t){const e={options:Object.assign({lockX:!1,lockY:!1,onchange:()=>0},t),_tapstart(t){i(document,["mouseup","touchend","touchcancel"],e._tapstop),i(document,["mousemove","touchmove"],e._tapmove),t.preventDefault(),e.wrapperRect=e.options.wrapper.getBoundingClientRect(),e._tapmove(t)},_tapmove(t){const n=e.options,o=e.cache,i=n.element,r=e.wrapperRect;let s=0,a=0;if(t){const e=t&&t.touches&&t.touches[0];s=t?(e||t).clientX:0,a=t?(e||t).clientY:0,s<r.left?s=r.left:s>r.left+r.width&&(s=r.left+r.width),a<r.top?a=r.top:a>r.top+r.height&&(a=r.top+r.height),s-=r.left,a-=r.top}else o&&(s=o.x,a=o.y);n.lockX||(i.style.left=s-i.offsetWidth/2+"px"),n.lockY||(i.style.top=a-i.offsetHeight/2+"px"),e.cache={x:s,y:a},n.onchange(s,a)},_tapstop(){r(document,["mouseup","touchend","touchcancel"],e._tapstop),r(document,["mousemove","touchmove"],e._tapmove)},trigger(){e.wrapperRect=e.options.wrapper.getBoundingClientRect(),e._tapmove()},update(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;e.wrapperRect=e.options.wrapper.getBoundingClientRect(),e._tapmove({clientX:e.wrapperRect.left+t,clientY:e.wrapperRect.top+n})},destroy(){const t=e.options,n=e._tapstart;r([t.wrapper,t.element],"mousedown",n),r([t.wrapper,t.element],"touchstart",n,{passive:!1})}};e.wrapperRect=e.options.wrapper.getBoundingClientRect();const n=e.options,o=e._tapstart;return i([n.wrapper,n.element],"mousedown",o),i([n.wrapper,n.element],"touchstart",o,{passive:!1}),e}function A(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const e={options:Object.assign({onchange:()=>0,className:"",elements:[]},t),_ontap(t){const n=e.options;n.elements.forEach(e=>e.classList[t.target===e?"add":"remove"](n.className)),n.onchange(t)},destroy(){r(e.options.elements,"click",this._ontap)}};return i(e.options.elements,"click",e._ontap),e}class ${constructor(t){this.options=Object.assign({useAsButton:!1,disabled:!1,comparison:!0,components:{interaction:{}},strings:{},swatches:null,default:"fff",defaultRepresentation:"HEX",position:"middle",adjustableNumbers:!0,showAlways:!1,parent:void 0,closeWithKey:"Escape"},t),this.options.components.interaction||(this.options.components.interaction={}),this._initializingActive=!0,this._recalc=!0,this._color=new w,this._lastColor=new w,this._eventListener={swatchselect:[],change:[],save:[],init:[]},this.options.swatches=this.options.swatches||[],this.options.swatches&&(this.options.swatches=this.options.swatches.map(t=>{const e=_(t).values;return e&&new w(...e)}).filter(t=>t)),this._preBuild(),this._buildComponents(),this._bindEvents(),this._representation=this.options.defaultRepresentation,this.setColorRepresentation(this._representation),this._finalBuild(),this._rePositioningPicker(),requestAnimationFrame(function t(){if(!this._root.app.offsetParent)return requestAnimationFrame(t.bind(this));this._initializingActive=!1,this.setColor(this.options.default),this._emit("init")}.bind(this))}_preBuild(){const t=this.options;"string"==typeof t.el&&(t.el=document.querySelector(t.el)),this._root=function(t){const e=t.components,n=t.strings,o=t.useAsButton,i=t.swatches,r=t=>t?"":'style="display:none" hidden',s=l(`\n        <div data-key="root" class="pickr">\n        \n            ${o?"":'<div data-key="button" class="pcr-button"></div>'}\n\n            <div data-key="app" class="pcr-app">\n                <div class="pcr-selection">\n                    <div data-con="preview" class="pcr-color-preview" ${r(e.preview)}>\n                        <button data-key="lastColor" class="pcr-last-color"></button>\n                        <div data-key="currentColor" class="pcr-current-color"></div>\n                    </div>\n\n                    <div data-con="palette" class="pcr-color-palette">\n                        <div data-key="picker" class="pcr-picker"></div>\n                        <div data-key="palette" class="pcr-palette"></div>\n                    </div>\n\n                    <div data-con="hue" class="pcr-color-chooser" ${r(e.hue)}>\n                        <div data-key="picker" class="pcr-picker"></div>\n                        <div data-key="slider" class="pcr-hue pcr-slider"></div>\n                    </div>\n\n                    <div data-con="opacity" class="pcr-color-opacity" ${r(e.opacity)}>\n                        <div data-key="picker" class="pcr-picker"></div>\n                        <div data-key="slider" class="pcr-opacity pcr-slider"></div>\n                    </div>\n                </div>\n                \n                ${i&&i.length?`\n                <div class="swatches">\n                   ${i.map((t,e)=>`<button data-arr="swatches" data-color-index="${e}" style="color: ${t.toRGBA()}"></button>`).join("")}\n                </div> \n                `:""}\n\n                <div data-con="interaction" class="pcr-interaction" ${r(Object.keys(e.interaction).length)}>\n                    <input data-key="result" class="pcr-result" type="text" spellcheck="false" ${r(e.interaction.input)}>\n\n                    <input data-arr="options" class="pcr-type" data-type="HEX" value="HEX" type="button" ${r(e.interaction.hex)}>\n                    <input data-arr="options" class="pcr-type" data-type="RGBA" value="RGBa" type="button" ${r(e.interaction.rgba)}>\n                    <input data-arr="options" class="pcr-type" data-type="HSLA" value="HSLa" type="button" ${r(e.interaction.hsla)}>\n                    <input data-arr="options" class="pcr-type" data-type="HSVA" value="HSVa" type="button" ${r(e.interaction.hsva)}>\n                    <input data-arr="options" class="pcr-type" data-type="CMYK" value="CMYK" type="button" ${r(e.interaction.cmyk)}>\n\n                    <input data-key="save" class="pcr-save" value="${n.save||"Save"}" type="button" ${r(e.interaction.save)}>\n                    <input data-key="clear" class="pcr-clear" value="${n.clear||"Clear"}" type="button" ${r(e.interaction.clear)}>\n                </div>\n            </div>\n        </div>\n    `),a=s.interaction;return a.options.find(t=>!t.hidden&&!t.classList.add("active")),a.type=(()=>a.options.find(t=>t.classList.contains("active"))),s}(t),t.useAsButton&&(t.parent||(t.parent="body"),this._root.button=t.el),document.body.appendChild(this._root.root)}_finalBuild(){const t=this.options,e=this._root;document.body.removeChild(e.root),t.parent&&("string"==typeof t.parent&&(t.parent=document.querySelector(t.parent)),t.parent.appendChild(e.app)),t.useAsButton||t.el.parentElement.replaceChild(e.root,t.el),t.disabled&&this.disable(),t.comparison||(e.button.style.transition="none",t.useAsButton||(e.preview.lastColor.style.transition="none")),t.showAlways?e.app.classList.add("visible"):this.hide()}_buildComponents(){const t=this,e=this.options.components,n={palette:k({element:t._root.palette.picker,wrapper:t._root.palette.palette,onchange(e,n){const o=t._color,i=t._root,r=t.options;o.s=e/this.wrapper.offsetWidth*100,o.v=100-n/this.wrapper.offsetHeight*100,o.v<0&&(o.v=0);const s=o.toRGBA().toString();this.element.style.background=s,this.wrapper.style.background=`\n                        linear-gradient(to top, rgba(0, 0, 0, ${o.a}), transparent), \n                        linear-gradient(to left, hsla(${o.h}, 100%, 50%, ${o.a}), rgba(255, 255, 255, ${o.a}))\n                    `,r.comparison||(i.button.style.background=s,r.useAsButton||(i.preview.lastColor.style.background=s)),i.preview.currentColor.style.background=s,t._recalc&&t._updateOutput(),i.button.classList.remove("clear")}}),hue:k({lockX:!0,element:t._root.hue.picker,wrapper:t._root.hue.slider,onchange(o,i){e.hue&&(t._color.h=i/this.wrapper.offsetHeight*360,this.element.style.backgroundColor=`hsl(${t._color.h}, 100%, 50%)`,n.palette.trigger())}}),opacity:k({lockX:!0,element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onchange(n,o){e.opacity&&(t._color.a=Math.round(o/this.wrapper.offsetHeight*100)/100,this.element.style.background=`rgba(0, 0, 0, ${t._color.a})`,t.components.palette.trigger())}}),selectable:A({elements:t._root.interaction.options,className:"active",onchange(e){t._representation=e.target.getAttribute("data-type").toUpperCase(),t._updateOutput()}})};this.components=n}_bindEvents(){const t=this._root,e=this.options,n=[i(t.interaction.clear,"click",()=>this._clearColor()),i(t.preview.lastColor,"click",()=>this.setHSVA(...this._lastColor.toHSVA())),i(t.interaction.save,"click",()=>{!this.applyColor()&&!e.showAlways&&this.hide()}),i(t.interaction.result,["keyup","input"],t=>{this._recalc=!1,this.setColor(t.target.value,!0)&&!this._initializingActive&&this._emit("change",this._color),t.stopImmediatePropagation()}),i([t.palette.palette,t.palette.picker,t.hue.slider,t.hue.picker,t.opacity.slider,t.opacity.picker],["mousedown","touchstart"],()=>this._recalc=!0),i(window,"resize",()=>this._rePositioningPicker)];if(t.swatches&&n.push(i(t.swatches,"click",t=>{let n=t.target;const o=e.swatches[Number(n.getAttribute("data-color-index"))];o&&(this.setHSVA(...o.toHSVA(),!0),this._emit("swatchselect",o))})),!e.showAlways){const o=e.closeWithKey;n.push(i(t.button,"click",()=>this.isOpen()?this.hide():this.show()),i(document,"keyup",t=>this.isOpen()&&(t.key===o||t.code===o)&&this.hide()),i(document,["touchstart","mousedown"],e=>{this.isOpen()&&!p(e).some(e=>e===t.app||e===t.button)&&this.hide()},{capture:!0}))}e.adjustableNumbers&&u(t.interaction.result,!1),this._eventBindings=n}_rePositioningPicker(){const t=this._root,e=this._root.app;if(this.options.parent){const n=t.button.getBoundingClientRect();e.style.position="fixed",e.style.marginLeft=`${n.left}px`,e.style.marginTop=`${n.top}px`}const n=t.button.getBoundingClientRect(),o=e.getBoundingClientRect(),i=e.style;o.bottom>window.innerHeight?i.top=`${-o.height-5}px`:n.bottom+o.height<window.innerHeight&&(i.top=`${n.height+5}px`);const r={left:-o.width+n.width,middle:-o.width/2+n.width/2,right:0},s=parseInt(getComputedStyle(e).left,10);let a=r[this.options.position];const c=o.left-s+a,l=o.left-s+a+o.width;"middle"!==this.options.position&&(c<0&&-c<o.width/2||l>window.innerWidth&&l-window.innerWidth<o.width/2)?a=r.middle:c<0?a=r.right:l>window.innerWidth&&(a=r.left),i.left=`${a}px`}_updateOutput(){this._root.interaction.type()&&(this._root.interaction.result.value=(()=>{const t="to"+this._root.interaction.type().getAttribute("data-type");return"function"==typeof this._color[t]?this._color[t]().toString():""})()),this._initializingActive||this._emit("change",this._color)}_emit(t){for(var e=arguments.length,n=new Array(e>1?e-1:0),o=1;o<e;o++)n[o-1]=arguments[o];this._eventListener[t].forEach(t=>t(...n,this))}on(t,e){return"function"==typeof e&&"string"==typeof t&&t in this._eventListener&&this._eventListener[t].push(e),this}off(t,e){const n=this._eventListener[t];if(n){const t=n.indexOf(e);~t&&n.splice(t,1)}return this}applyColor(){let t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];const e=this._root,n=e.preview,o=e.button,i=this._color.toRGBA().toString();n.lastColor.style.background=i,this.options.useAsButton||(o.style.background=i),o.classList.remove("clear"),this._lastColor=this._color.clone(),this._initializingActive||t||this._emit("save",this._color)}_clearColor(){const t=this._root,e=this.options;e.useAsButton||(t.button.style.background="rgba(255, 255, 255, 0.4)"),t.button.classList.add("clear"),e.showAlways||this.hide(),this._emit("change",null)}destroy(){this._eventBindings.forEach(t=>r(...t)),Object.keys(this.components).forEach(t=>this.components[t].destroy())}destroyAndRemove(){this.destroy();const t=this._root.root;t.parentElement.removeChild(t)}hide(){return this._root.app.classList.remove("visible"),this}show(){if(!this.options.disabled)return this._root.app.classList.add("visible"),this._rePositioningPicker(),this}isOpen(){return this._root.app.classList.contains("visible")}setHSVA(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:360,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,i=arguments.length>4&&void 0!==arguments[4]&&arguments[4];const r=this._recalc;if(this._recalc=!1,t<0||t>360||e<0||e>100||n<0||n>100||o<0||o>1)return!1;const s=this.components,a=s.hue,c=s.opacity,l=s.palette,p=a.options.wrapper.offsetHeight*(t/360);a.update(0,p);const u=c.options.wrapper.offsetHeight*o;c.update(0,u);const h=l.options.wrapper,d=h.offsetWidth*(e/100),f=h.offsetHeight*(1-n/100);return l.update(d,f),this._color=new w(t,e,n,o),this._recalc=r,this._recalc&&this._updateOutput(),i||this.applyColor(),!0}setColor(t){let e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(null===t)return this._clearColor(),!0;const n=_(t),o=n.values,i=n.type;if(o){const t=i.toUpperCase(),n=this._root.interaction.options,r=n.find(e=>e.getAttribute("data-type")===t);if(!r.hidden)for(const t of n)t.classList[t===r?"add":"remove"]("active");return this.setHSVA(...o,e)}}setColorRepresentation(t){return t=t.toUpperCase(),!!this._root.interaction.options.find(e=>e.getAttribute("data-type")===t&&!e.click())}getColorRepresentation(){return this._representation}getColor(){return this._color}getRoot(){return this._root}disable(){return this.hide(),this.options.disabled=!0,this._root.button.classList.add("disabled"),this}enable(){return this.options.disabled=!1,this._root.button.classList.remove("disabled"),this}}$.utils={once:(t,e,n,o)=>i(t,e,function t(){n.apply(this,arguments),this.removeEventListener(e,t)},o),on:i,off:r,eventPath:p,createElementFromString:a,adjustableInputNumbers:u,removeAttribute:c,createFromTemplate:l},$.create=(t=>new $(t)),$.version="0.4.0";e.default=$}]).default});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Pickr=e():t.Pickr=e()}(window,function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(o,i,function(e){return t[e]}.bind(null,i));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="dist/",n(n.s=1)}([function(t,e,n){},function(t,e,n){"use strict";n.r(e);n(0);function o(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}const i=s.bind(null,"addEventListener"),r=s.bind(null,"removeEventListener");function s(t,e,n,i){let r=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};return e instanceof HTMLCollection||e instanceof NodeList?e=Array.from(e):Array.isArray(e)||(e=[e]),Array.isArray(n)||(n=[n]),e.forEach(e=>n.forEach(n=>e[t](n,i,function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(e){o(t,e,n[e])})}return t}({capture:!1},r)))),Array.prototype.slice.call(arguments,1)}function a(t){const e=document.createElement("div");return e.innerHTML=t.trim(),e.firstElementChild}function c(t,e){const n=t.getAttribute(e);return t.removeAttribute(e),n}function l(t){return function t(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const o=c(e,"data-con"),i=c(e,"data-key");i&&(n[i]=e);const r=Array.from(e.children),s=o?n[o]={}:n;for(let e of r){const n=c(e,"data-arr");n?(s[n]||(s[n]=[])).push(e):t(e,s)}return n}(a(t))}function p(t){let e=t.path||t.composedPath&&t.composedPath();if(e)return e;let n=t.target.parentElement;for(e=[t.target,n];n=n.parentElement;)e.push(n);return e.push(document,window),e}function u(t){let e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];const n=t=>t>="0"&&t<="9"||"-"===t||"."===t;function o(o){const i=t.value,r=t.selectionStart;let s=r,a="";for(let t=r-1;t>0&&n(i[t]);t--)a=i[t]+a,s--;for(let t=r,e=i.length;t<e&&n(i[t]);t++)a+=i[t];if(a.length>0&&!isNaN(a)&&isFinite(a)){const n=o.deltaY<0?1:-1,r=o.ctrlKey?5*n:n;let c=Number(a)+r;!e&&c<0&&(c=0);const l=i.substr(0,s)+c+i.substring(s+a.length,i.length),p=s+String(c).length;t.value=l,t.focus(),t.setSelectionRange(p,p)}o.preventDefault(),t.dispatchEvent(new Event("input"))}i(t,"focus",()=>i(window,"wheel",o)),i(t,"blur",()=>r(window,"wheel",o))}function h(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],o=!0,i=!1,r=void 0;try{for(var s,a=t[Symbol.iterator]();!(o=(s=a.next()).done)&&(n.push(s.value),!e||n.length!==e);o=!0);}catch(t){i=!0,r=t}finally{try{o||null==a.return||a.return()}finally{if(i)throw r}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}const d=Math.min,f=Math.max;function v(t,e,n){t=t/360*6,e/=100,n/=100;let o=Math.floor(t),i=t-o,r=n*(1-e),s=n*(1-i*e),a=n*(1-(1-i)*e),c=o%6;return[255*[n,s,r,r,a,n][c],255*[a,n,n,s,r,r][c],255*[r,r,a,n,n,s][c]]}function g(t,e,n){let o,i,r;const s=d(t/=255,e/=255,n/=255),a=f(t,e,n),c=a-s;if(0===c)o=i=0;else{i=c/a;let r=((a-t)/6+c/2)/c,s=((a-e)/6+c/2)/c,l=((a-n)/6+c/2)/c;t===a?o=l-s:e===a?o=1/3+r-l:n===a&&(o=2/3+s-r),o<0?o+=1:o>1&&(o-=1)}return[360*o,100*i,100*(r=a)]}function y(t,e,n,o){return e/=100,n/=100,[...g(255*(1-d(1,(t/=100)*(1-(o/=100))+o)),255*(1-d(1,e*(1-o)+o)),255*(1-d(1,n*(1-o)+o)))]}function m(t,e,n){return e/=100,[t,2*(e*=(n/=100)<.5?n:1-n)/(n+e)*100,100*(n+e)]}function b(t){return g(...t.match(/.{2}/g).map(t=>parseInt(t,16)))}function _(t){const e={cmyk:/^cmyk[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)/i,rgba:/^(rgb|rgba)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hsla:/^(hsl|hsla)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hsva:/^(hsv|hsva)[\D]+(\d+)[\D]+(\d+)[\D]+(\d+)[\D]*?([\d.]+|$)/i,hex:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},n=t=>t.map(t=>/^(|\d+)\.\d+|\d+$/.test(t)?Number(t):void 0);let o;for(let s in e)if(o=e[s].exec(t))switch(s){case"cmyk":{let t=h(n(o),5),e=t[1],i=t[2],r=t[3],a=t[4];if(e>100||i>100||r>100||a>100)break;return{values:[...y(e,i,r,a),1],type:s}}case"rgba":{let t=h(n(o),6),e=t[2],i=t[3],r=t[4],a=t[5],c=void 0===a?1:a;if(e>255||i>255||r>255||c<0||c>1)break;return{values:[...g(e,i,r),c],type:s}}case"hex":{const t=(t,e)=>[t.substring(0,e),t.substring(e,t.length)];let e,n=h(o,2)[1];if(3===n.length?n+="F":6===n.length&&(n+="FF"),4===n.length){var i=h(t(n,3).map(t=>t+t),2);n=i[0],e=i[1]}else if(8===n.length){var r=h(t(n,6),2);n=r[0],e=r[1]}return e=parseInt(e,16)/255,{values:[...b(n),e],type:s}}case"hsla":{let t=h(n(o),6),e=t[2],i=t[3],r=t[4],a=t[5],c=void 0===a?1:a;if(e>360||i>100||r>100||c<0||c>1)break;return{values:[...m(e,i,r),c],type:s}}case"hsva":{let t=h(n(o),6),e=t[2],i=t[3],r=t[4],a=t[5],c=void 0===a?1:a;if(e>360||i>100||r>100||c<0||c>1)break;return{values:[e,i,r,c],type:s}}}return{values:null,type:null}}function w(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1;const i=Math.ceil,r={h:t,s:e,v:n,a:o,toHSVA(){const t=[r.h,r.s,r.v],e=t.map(i);return t.push(r.a),t.toString=(()=>`hsva(${e[0]}, ${e[1]}%, ${e[2]}%, ${r.a.toFixed(1)})`),t},toHSLA(){const t=function(t,e,n){let o=(2-(e/=100))*(n/=100)/2;return 0!==o&&(e=1===o?0:o<.5?e*n/(2*o):e*n/(2-2*o)),[t,100*e,100*o]}(r.h,r.s,r.v),e=t.map(i);return t.push(r.a),t.toString=(()=>`hsla(${e[0]}, ${e[1]}%, ${e[2]}%, ${r.a.toFixed(1)})`),t},toRGBA(){const t=v(r.h,r.s,r.v),e=t.map(i);return t.push(r.a),t.toString=(()=>`rgba(${e[0]}, ${e[1]}, ${e[2]}, ${r.a.toFixed(1)})`),t},toCMYK(){const t=function(t,e,n){const o=v(t,e,n),i=o[0]/255,r=o[1]/255,s=o[2]/255;let a,c,l,p;return[100*(c=1===(a=d(1-i,1-r,1-s))?0:(1-i-a)/(1-a)),100*(l=1===a?0:(1-r-a)/(1-a)),100*(p=1===a?0:(1-s-a)/(1-a)),100*a]}(r.h,r.s,r.v),e=t.map(i);return t.toString=(()=>`cmyk(${e[0]}%, ${e[1]}%, ${e[2]}%, ${e[3]}%)`),t},toHEX(){const t=function(t,e,n){return v(t,e,n).map(t=>Math.round(t).toString(16).padStart(2,"0"))}(...[r.h,r.s,r.v]);return t.toString=(()=>{const e=r.a>=1?"":Number((255*r.a).toFixed(0)).toString(16).toUpperCase().padStart(2,"0");return`#${t.join("").toUpperCase()+e}`}),t},clone:()=>w(r.h,r.s,r.v,r.a)};return r}function k(t){const e={options:Object.assign({lockX:!1,lockY:!1,onchange:()=>0},t),_tapstart(t){i(document,["mouseup","touchend","touchcancel"],e._tapstop),i(document,["mousemove","touchmove"],e._tapmove),t.preventDefault(),e.wrapperRect=e.options.wrapper.getBoundingClientRect(),e._tapmove(t)},_tapmove(t){const n=e.options,o=e.cache,i=n.element,r=e.wrapperRect;let s=0,a=0;if(t){const e=t&&t.touches&&t.touches[0];s=t?(e||t).clientX:0,a=t?(e||t).clientY:0,s<r.left?s=r.left:s>r.left+r.width&&(s=r.left+r.width),a<r.top?a=r.top:a>r.top+r.height&&(a=r.top+r.height),s-=r.left,a-=r.top}else o&&(s=o.x,a=o.y);n.lockX||(i.style.left=`calc(${s/r.width*100}% - ${i.offsetWidth/2}px)`),n.lockY||(i.style.top=`calc(${a/r.height*100}% - ${i.offsetWidth/2}px)`),e.cache={x:s,y:a},n.onchange(s,a)},_tapstop(){r(document,["mouseup","touchend","touchcancel"],e._tapstop),r(document,["mousemove","touchmove"],e._tapmove)},trigger(){e.wrapperRect=e.options.wrapper.getBoundingClientRect(),e._tapmove()},update(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;e.wrapperRect=e.options.wrapper.getBoundingClientRect(),e._tapmove({clientX:e.wrapperRect.left+t,clientY:e.wrapperRect.top+n})},destroy(){const t=e.options,n=e._tapstart;r([t.wrapper,t.element],"mousedown",n),r([t.wrapper,t.element],"touchstart",n,{passive:!1})}};e.wrapperRect=e.options.wrapper.getBoundingClientRect();const n=e.options,o=e._tapstart;return i([n.wrapper,n.element],"mousedown",o),i([n.wrapper,n.element],"touchstart",o,{passive:!1}),e}function C(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const e={options:Object.assign({onchange:()=>0,className:"",elements:[]},t),_ontap(t){const n=e.options;n.elements.forEach(e=>e.classList[t.target===e?"add":"remove"](n.className)),n.onchange(t)},destroy(){r(e.options.elements,"click",this._ontap)}};return i(e.options.elements,"click",e._ontap),e}class A{constructor(t){this.options=Object.assign({useAsButton:!1,disabled:!1,comparison:!0,components:{interaction:{}},strings:{},swatches:null,default:"fff",defaultRepresentation:"HEX",position:"middle",adjustableNumbers:!0,showAlways:!1,parent:void 0,closeWithKey:"Escape"},t),this.options.components.interaction||(this.options.components.interaction={}),this._initializingActive=!0,this._recalc=!0,this._color=new w,this._lastColor=new w,this._swatchColors=[],this._eventListener={swatchselect:[],change:[],save:[],init:[]},this._preBuild(),this._buildComponents(),this._bindEvents(),this._representation=this.options.defaultRepresentation,this.setColorRepresentation(this._representation),this._finalBuild(),this._rePositioningPicker();const e=this.options.swatches;e&&e.length&&e.forEach(t=>this.addSwatch(t)),requestAnimationFrame(function t(){if(!this._root.app.offsetParent)return requestAnimationFrame(t.bind(this));this.setColor(this.options.default),this._initializingActive=!1,this._emit("init")}.bind(this))}_preBuild(){const t=this.options;"string"==typeof t.el&&(t.el=document.querySelector(t.el)),this._root=function(t){const e=t.components,n=t.strings,o=t.useAsButton,i=t=>t?"":'style="display:none" hidden',r=l(`\n        <div data-key="root" class="pickr">\n        \n            ${o?"":'<div data-key="button" class="pcr-button"></div>'}\n\n            <div data-key="app" class="pcr-app">\n                <div class="pcr-selection">\n                    <div data-con="preview" class="pcr-color-preview" ${i(e.preview)}>\n                        <button data-key="lastColor" class="pcr-last-color"></button>\n                        <div data-key="currentColor" class="pcr-current-color"></div>\n                    </div>\n\n                    <div data-con="palette" class="pcr-color-palette">\n                        <div data-key="picker" class="pcr-picker"></div>\n                        <div data-key="palette" class="pcr-palette"></div>\n                    </div>\n\n                    <div data-con="hue" class="pcr-color-chooser" ${i(e.hue)}>\n                        <div data-key="picker" class="pcr-picker"></div>\n                        <div data-key="slider" class="pcr-hue pcr-slider"></div>\n                    </div>\n\n                    <div data-con="opacity" class="pcr-color-opacity" ${i(e.opacity)}>\n                        <div data-key="picker" class="pcr-picker"></div>\n                        <div data-key="slider" class="pcr-opacity pcr-slider"></div>\n                    </div>\n                </div>\n\n                <div class="swatches" data-key="swatches"></div> \n\n                <div data-con="interaction" class="pcr-interaction" ${i(Object.keys(e.interaction).length)}>\n                    <input data-key="result" class="pcr-result" type="text" spellcheck="false" ${i(e.interaction.input)}>\n\n                    <input data-arr="options" class="pcr-type" data-type="HEX" value="HEX" type="button" ${i(e.interaction.hex)}>\n                    <input data-arr="options" class="pcr-type" data-type="RGBA" value="RGBa" type="button" ${i(e.interaction.rgba)}>\n                    <input data-arr="options" class="pcr-type" data-type="HSLA" value="HSLa" type="button" ${i(e.interaction.hsla)}>\n                    <input data-arr="options" class="pcr-type" data-type="HSVA" value="HSVa" type="button" ${i(e.interaction.hsva)}>\n                    <input data-arr="options" class="pcr-type" data-type="CMYK" value="CMYK" type="button" ${i(e.interaction.cmyk)}>\n\n                    <input data-key="save" class="pcr-save" value="${n.save||"Save"}" type="button" ${i(e.interaction.save)}>\n                    <input data-key="clear" class="pcr-clear" value="${n.clear||"Clear"}" type="button" ${i(e.interaction.clear)}>\n                </div>\n            </div>\n        </div>\n    `),s=r.interaction;return s.options.find(t=>!t.hidden&&!t.classList.add("active")),s.type=(()=>s.options.find(t=>t.classList.contains("active"))),r}(t),t.useAsButton&&(t.parent||(t.parent="body"),this._root.button=t.el),document.body.appendChild(this._root.root)}_finalBuild(){const t=this.options,e=this._root;document.body.removeChild(e.root),t.parent&&("string"==typeof t.parent&&(t.parent=document.querySelector(t.parent)),t.parent.appendChild(e.app)),t.useAsButton||t.el.parentElement.replaceChild(e.root,t.el),t.disabled&&this.disable(),t.comparison||(e.button.style.transition="none",t.useAsButton||(e.preview.lastColor.style.transition="none")),t.showAlways?e.app.classList.add("visible"):this.hide()}_buildComponents(){const t=this,e=this.options.components,n={palette:k({element:t._root.palette.picker,wrapper:t._root.palette.palette,onchange(e,n){const o=t._color,i=t._root,r=t.options;o.s=e/this.wrapper.offsetWidth*100,o.v=100-n/this.wrapper.offsetHeight*100,o.v<0&&(o.v=0);const s=o.toRGBA().toString();this.element.style.background=s,this.wrapper.style.background=`\n                        linear-gradient(to top, rgba(0, 0, 0, ${o.a}), transparent), \n                        linear-gradient(to left, hsla(${o.h}, 100%, 50%, ${o.a}), rgba(255, 255, 255, ${o.a}))\n                    `,r.comparison||(i.button.style.background=s,r.useAsButton||(i.preview.lastColor.style.background=s)),i.preview.currentColor.style.background=s,t._recalc&&t._updateOutput(),i.button.classList.remove("clear")}}),hue:k({lockX:!0,element:t._root.hue.picker,wrapper:t._root.hue.slider,onchange(o,i){e.hue&&(t._color.h=i/this.wrapper.offsetHeight*360,this.element.style.backgroundColor=`hsl(${t._color.h}, 100%, 50%)`,n.palette.trigger())}}),opacity:k({lockX:!0,element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onchange(n,o){e.opacity&&(t._color.a=Math.round(o/this.wrapper.offsetHeight*100)/100,this.element.style.background=`rgba(0, 0, 0, ${t._color.a})`,t.components.palette.trigger())}}),selectable:C({elements:t._root.interaction.options,className:"active",onchange(e){t._representation=e.target.getAttribute("data-type").toUpperCase(),t._updateOutput()}})};this.components=n}_bindEvents(){const t=this._root,e=this.options,n=[i(t.interaction.clear,"click",()=>this._clearColor()),i(t.preview.lastColor,"click",()=>this.setHSVA(...this._lastColor.toHSVA())),i(t.interaction.save,"click",()=>{!this.applyColor()&&!e.showAlways&&this.hide()}),i(t.interaction.result,["keyup","input"],t=>{this._recalc=!1,this.setColor(t.target.value,!0)&&!this._initializingActive&&this._emit("change",this._color),t.stopImmediatePropagation()}),i([t.palette.palette,t.palette.picker,t.hue.slider,t.hue.picker,t.opacity.slider,t.opacity.picker],["mousedown","touchstart"],()=>this._recalc=!0),i(window,"resize",()=>this._rePositioningPicker)];if(!e.showAlways){const o=e.closeWithKey;n.push(i(t.button,"click",()=>this.isOpen()?this.hide():this.show()),i(document,"keyup",t=>this.isOpen()&&(t.key===o||t.code===o)&&this.hide()),i(document,["touchstart","mousedown"],e=>{this.isOpen()&&!p(e).some(e=>e===t.app||e===t.button)&&this.hide()},{capture:!0}))}e.adjustableNumbers&&u(t.interaction.result,!1),this._eventBindings=n}_rePositioningPicker(){const t=this._root,e=this._root.app;if(this.options.parent){const n=t.button.getBoundingClientRect();e.style.position="fixed",e.style.marginLeft=`${n.left}px`,e.style.marginTop=`${n.top}px`}const n=t.button.getBoundingClientRect(),o=e.getBoundingClientRect(),i=e.style;o.bottom>window.innerHeight?i.top=`${-o.height-5}px`:n.bottom+o.height<window.innerHeight&&(i.top=`${n.height+5}px`);const r={left:-o.width+n.width,middle:-o.width/2+n.width/2,right:0},s=parseInt(getComputedStyle(e).left,10);let a=r[this.options.position];const c=o.left-s+a,l=o.left-s+a+o.width;"middle"!==this.options.position&&(c<0&&-c<o.width/2||l>window.innerWidth&&l-window.innerWidth<o.width/2)?a=r.middle:c<0?a=r.right:l>window.innerWidth&&(a=r.left),i.left=`${a}px`}_updateOutput(){if(this._root.interaction.type()){const t=`to${this._root.interaction.type().getAttribute("data-type")}`;this._root.interaction.result.value="function"==typeof this._color[t]?this._color[t]().toString():""}this._initializingActive||this._emit("change",this._color)}_clearColor(){const t=this._root,e=this.options;e.useAsButton||(t.button.style.background="rgba(255, 255, 255, 0.4)"),t.button.classList.add("clear"),e.showAlways||this.hide(),this._emit("save",null)}_emit(t){for(var e=arguments.length,n=new Array(e>1?e-1:0),o=1;o<e;o++)n[o-1]=arguments[o];this._eventListener[t].forEach(t=>t(...n,this))}on(t,e){return"function"==typeof e&&"string"==typeof t&&t in this._eventListener&&this._eventListener[t].push(e),this}off(t,e){const n=this._eventListener[t];if(n){const t=n.indexOf(e);~t&&n.splice(t,1)}return this}addSwatch(t){const e=_(t).values;if(e){const t=this._swatchColors,n=this._root,o=w(...e),r=a(`<button  style="color: ${o.toRGBA()}"></button>`);return n.swatches.appendChild(r),t.push({element:r,hsvaColorObject:o}),this._eventBindings.push(i(r,"click",()=>{this.setHSVA(...o.toHSVA(),!0),this._emit("swatchselect",o)})),!0}return!1}removeSwatch(t){if("number"==typeof t){const e=this._swatchColors[t];if(e){const n=e.element;return this._root.swatches.removeChild(n),this._swatchColors.splice(t,1),!0}}return!1}applyColor(){let t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];const e=this._root,n=e.preview,o=e.button,i=this._color.toRGBA().toString();n.lastColor.style.background=i,this.options.useAsButton||(o.style.background=i),o.classList.remove("clear"),this._lastColor=this._color.clone(),this._initializingActive||t||this._emit("save",this._color)}destroy(){this._eventBindings.forEach(t=>r(...t)),Object.keys(this.components).forEach(t=>this.components[t].destroy())}destroyAndRemove(){this.destroy();const t=this._root.root;t.parentElement.removeChild(t)}hide(){return this._root.app.classList.remove("visible"),this}show(){if(!this.options.disabled)return this._root.app.classList.add("visible"),this._rePositioningPicker(),this}isOpen(){return this._root.app.classList.contains("visible")}setHSVA(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:360,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,i=arguments.length>4&&void 0!==arguments[4]&&arguments[4];const r=this._recalc;if(this._recalc=!1,t<0||t>360||e<0||e>100||n<0||n>100||o<0||o>1)return!1;const s=this.components,a=s.hue,c=s.opacity,l=s.palette,p=a.options.wrapper.offsetHeight*(t/360);a.update(0,p);const u=c.options.wrapper.offsetHeight*o;c.update(0,u);const h=l.options.wrapper,d=h.offsetWidth*(e/100),f=h.offsetHeight*(1-n/100);return l.update(d,f),this._color=new w(t,e,n,o),this._recalc=r,this._recalc&&this._updateOutput(),i||this.applyColor(),!0}setColor(t){let e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(null===t)return this._clearColor(),!0;const n=_(t),o=n.values,i=n.type;if(o){const t=i.toUpperCase(),n=this._root.interaction.options,r=n.find(e=>e.getAttribute("data-type")===t);if(!r.hidden)for(const t of n)t.classList[t===r?"add":"remove"]("active");return this.setHSVA(...o,e)}}setColorRepresentation(t){return t=t.toUpperCase(),!!this._root.interaction.options.find(e=>e.getAttribute("data-type")===t&&!e.click())}getColorRepresentation(){return this._representation}getColor(){return this._color}getRoot(){return this._root}disable(){return this.hide(),this.options.disabled=!0,this._root.button.classList.add("disabled"),this}enable(){return this.options.disabled=!1,this._root.button.classList.remove("disabled"),this}}A.utils={once:(t,e,n,o)=>i(t,e,function t(){n.apply(this,arguments),this.removeEventListener(e,t)},o),on:i,off:r,eventPath:p,createElementFromString:a,adjustableInputNumbers:u,removeAttribute:c,createFromTemplate:l},A.create=(t=>new A(t)),A.version="0.4.1";e.default=A}]).default});
 //# sourceMappingURL=pickr.min.js.map

gh-page/js/script.js

@@ -7,16 +7,16 @@ const pickr = new Pickr({
     swatches: [
-        '#F44336',
-        '#E91E63',
-        '#9C27B0',
-        '#673AB7',
-        '#3F51B5',
-        '#2196F3',
-        '#03A9F4',
-        '#00BCD4',
-        '#009688',
-        '#4CAF50',
-        '#8BC34A',
-        '#CDDC39',
-        '#FFEB3B',
-        '#FFC107'
+        'rgba(244, 67, 54, 1)',
+        'rgba(233, 30, 99, 0.95)',
+        'rgba(156, 39, 176, 0.9)',
+        'rgba(103, 58, 183, 0.85)',
+        'rgba(63, 81, 181, 0.8)',
+        'rgba(33, 150, 243, 0.75)',
+        'rgba(3, 169, 244, 0.7)',
+        'rgba(0, 188, 212, 0.7)',
+        'rgba(0, 150, 136, 0.75)',
+        'rgba(76, 175, 80, 0.8)',
+        'rgba(139, 195, 74, 0.85)',
+        'rgba(205, 220, 57, 0.9)',
+        'rgba(255, 235, 59, 0.95)',
+        'rgba(255, 193, 7, 1)'
     ],
@@ -23,0 +23,0 @@

package.json

 {
     "name": "@simonwep/pickr",
-    "version": "0.4.0",
+    "version": "0.4.1",
     "license": "MIT",
@@ -5,0 +5,0 @@ "author": "Simon Reinisch <[e-mail]>",

README.md

@@ -25,3 +25,3 @@ <h1 align="center">
   <img alt="Current version"
-       src="https://img.shields.io/badge/version-0.4.0-f1c40f.svg?style=popout-square">
+       src="https://img.shields.io/badge/version-0.4.1-f1c40f.svg?style=popout-square">
   <a href="https://www.patreon.com/simonwep"><img
@@ -53,2 +53,3 @@ alt="Support me"
 * Supports touch devices
+* Swatches for quick-selection
 * Lightweight, ~6KB gzipped
@@ -125,3 +126,3 @@
 | `init`         | Initialization done - pickr can be used | `PickrInstance` |
-| `save`         | User clicked the save button | `HSVaColorObject, PickrInstance` |
+| `save`         | User clicked the save / clear button | `HSVaColorObject \| null, PickrInstance` |
 | `change`       | Color has changed (but not saved). Also fired on `swatchselect` | `HSVaColorObject, PickrInstance` |
@@ -132,8 +133,10 @@ | `swatchselect` | User clicked one of the swatches | `HSVaColorObject, PickrInstance` |
 ```js
-pickr.on('save', (...args) => {
-    console.log('Save', args);
+pickr.on('init', (...args) => {
+    console.log('init', args);
+}).on('save', (...args) => {
+    console.log('save', args);
+}).on('change', (...args) => {
+    console.log('change', args);
 }).on('swatchselect', (...args) => {
-    console.log('SwatchSelect', args);
-}).on('change', (...args) => {
-    console.log('Change', args);
+    console.log('swatchselect', args);
 });
@@ -260,2 +263,4 @@ ```
 * pickr.applyColor(silent`:Boolean`) _- Same as pressing the save button. If silent is true the `onSave` event won't be called._
+* pickr.addSwatch(color`:String`) _- Adds a color to the swatch palette._
+* pickr.removeSwatch(index`:Number`) _- Removes a color from the swatch palette by its index._
 
@@ -262,0 +267,0 @@ ## Static methods

src/js/helper/moveable.js

@@ -51,7 +51,9 @@ import * as _ from './../lib/utils';
 
-            if (!options.lockX)
-                element.style.left = (x - element.offsetWidth / 2) + 'px';
+            if (!options.lockX) {
+                element.style.left = `calc(${x / b.width * 100}% - ${element.offsetWidth / 2}px)`;
+            }
 
-            if (!options.lockY)
-                element.style.top = (y - element.offsetHeight / 2) + 'px';
+            if (!options.lockY) {
+                element.style.top = `calc(${y / b.height * 100}% - ${element.offsetWidth / 2}px)`;
+            }
 
@@ -100,2 +102,2 @@ that.cache = {x, y};
     return that;
-}
+}

src/js/pickr.js

@@ -52,2 +52,3 @@ // Import styles
         this._lastColor = new HSVaColor();
+        this._swatchColors = [];
 
@@ -62,11 +63,2 @@ // Evenlistener name: [callbacks]
 
-        // Parse swatch colors
-        this.options.swatches = this.options.swatches || [];
-        if (this.options.swatches) {
-            this.options.swatches = this.options.swatches.map(str => {
-                const {values} = Color.parseToHSV(str);
-                return values && new HSVaColor(...values);
-            }).filter(v => v);
-        }
-
         // Initialize picker
@@ -85,2 +77,8 @@ this._preBuild();
 
+        // Append pre-defined swatch colors
+        const {swatches} = this.options;
+        if (swatches && swatches.length) {
+            swatches.forEach(color => this.addSwatch(color));
+        }
+
         // Initilization is finish, pickr is visible and ready for usage
@@ -92,4 +90,4 @@ requestAnimationFrame((function cb() {
 
+            this.setColor(this.options.default);
             this._initializingActive = false;
-            this.setColor(this.options.default);
             this._emit('init');
@@ -311,16 +309,2 @@ }).bind(this));
 
-        // Color swatches
-        if (_root.swatches) {
-            eventBindings.push(
-                _.on(_root.swatches, 'click', ({target}) => {
-                    const color = options.swatches[Number(target.getAttribute('data-color-index'))];
-
-                    if (color) {
-                        this.setHSVA(...color.toHSVA(), true);
-                        this._emit('swatchselect', color);
-                    }
-                })
-            );
-        }
-
         // Provide hiding / showing abilities only if showAlways is false
@@ -420,8 +404,5 @@ if (!options.showAlways) {
 
-            this._root.interaction.result.value = (() => {
-
-                // Construct function name and call if present
-                const method = 'to' + this._root.interaction.type().getAttribute('data-type');
-                return typeof this._color[method] === 'function' ? this._color[method]().toString() : '';
-            })();
+            // Construct function name and call if present
+            const method = `to${this._root.interaction.type().getAttribute('data-type')}`;
+            this._root.interaction.result.value = typeof this._color[method] === 'function' ? this._color[method]().toString() : '';
         }
@@ -435,2 +416,20 @@
 
+    _clearColor() {
+        const {_root, options} = this;
+
+        // Change only the button color if it isn't customized
+        if (!options.useAsButton) {
+            _root.button.style.background = 'rgba(255, 255, 255, 0.4)';
+        }
+
+        _root.button.classList.add('clear');
+
+        if (!options.showAlways) {
+            this.hide();
+        }
+
+        // Fire listener
+        this._emit('save', null);
+    }
+
     _emit(event, ...args) {
@@ -464,2 +463,62 @@ this._eventListener[event].forEach(cb => cb(...args, this));
 
+    /**
+     * Appends a color to the swatch palette
+     * @param color
+     * @returns {boolean}
+     */
+    addSwatch(color) {
+        const {values} = Color.parseToHSV(color);
+
+        if (values) {
+            const {_swatchColors, _root} = this;
+            const hsvaColorObject = HSVaColor(...values);
+
+            // Create new swatch HTMLElement
+            const element = _.createElementFromString(
+                `<button  style="color: ${hsvaColorObject.toRGBA()}"></button>`
+            );
+
+            // Append element and save swatch data
+            _root.swatches.appendChild(element);
+            _swatchColors.push({element, hsvaColorObject});
+
+            // Bind event
+            this._eventBindings.push(
+                _.on(element, 'click', () => {
+                    this.setHSVA(...hsvaColorObject.toHSVA(), true);
+                    this._emit('swatchselect', hsvaColorObject);
+                })
+            );
+
+            return true;
+        }
+
+        return false;
+    }
+
+    /**
+     * Removes a swatch color by it's index
+     * @param index
+     * @returns {boolean}
+     */
+    removeSwatch(index) {
+
+        // Validate index
+        if (typeof index === 'number') {
+            const swatchColor = this._swatchColors[index];
+
+            // Check swatch data
+            if (swatchColor) {
+                const {element} = swatchColor;
+
+                // Remove HTML child and swatch data
+                this._root.swatches.removeChild(element);
+                this._swatchColors.splice(index, 1);
+                return true;
+            }
+        }
+
+        return false;
+    }
+
     applyColor(silent = false) {
@@ -489,20 +548,2 @@ const {preview, button} = this._root;
 
-    _clearColor() {
-        const {_root, options} = this;
-
-        // Change only the button color if it isn't customized
-        if (!options.useAsButton) {
-            _root.button.style.background = 'rgba(255, 255, 255, 0.4)';
-        }
-
-        _root.button.classList.add('clear');
-
-        if (!options.showAlways) {
-            this.hide();
-        }
-
-        // Fire listener
-        this._emit('change',null);
-    }
-
     /**
@@ -704,3 +745,3 @@ * Destroy's all functionalitys
 function create(options) {
-    const {components, strings, useAsButton, swatches} = options;
+    const {components, strings, useAsButton} = options;
     const hidden = con => con ? '' : 'style="display:none" hidden';
@@ -735,9 +776,5 @@
                 </div>
-                
-                ${swatches && swatches.length ? `
-                <div class="swatches">
-                   ${swatches.map((v, i) => `<button data-arr="swatches" data-color-index="${i}" style="color: ${v.toRGBA()}"></button>`).join('')}
-                </div> 
-                ` : ''}
 
+                <div class="swatches" data-key="swatches"></div> 
+
                 <div data-con="interaction" class="pcr-interaction" ${hidden(Object.keys(components.interaction).length)}>
@@ -785,3 +822,3 @@ <input data-key="result" class="pcr-result" type="text" spellcheck="false" ${hidden(components.interaction.input)}>
 // Export
-Pickr.version = '0.4.0';
+Pickr.version = '0.4.1';
 export default Pickr;

No alert changes

Improved metrics

Total package byte prevSize

1252541

increased by0.21%

Lines of code

1584

increased by1.93%

Number of lines in readme file

280

increased by1.82%

No dependency changes