!function(){var t=function(t,e){for(var i in e)t.style[i]=e[i]};function e(t){if(this===window)throw"Colorpicker: Can't call a function directly";this.init(t)}e.prototype={init(e){let{el:i,initColor:n="rgb(255,0,0)",allMode:o=["hex","rgb"],color:r=""}=e;if(!(p=document.getElementById(i))||!p.nodeType||1!==p.nodeType)throw`Colorpicker: not found  ID:${i}  HTMLElement,not ${{}.toString.call(i)}`;this.Opt={...e,el:i,initColor:n,allMode:o,color:r},this.bindElem=p,this.elem_wrap=null,this.fixedBg=null,this.elem_colorPancel=null,this.elem_picker=null,this.elem_barPicker1=null,this.elem_hexInput=null,this.elem_showColor=null,this.elem_showModeBtn=null,this.elem_inputWrap=null,this.pancelLeft=0,this.pancelTop=0,this.downX=0,this.downY=0,this.moveX=0,this.moveY=0,this.pointLeft=0,this.pointTop=0,this.current_mode="hex",this.rgba={r:0,g:0,b:0,a:1},this.hsb={h:0,s:100,b:100};var s=this,l=n.slice(4,-1).split(",");this.rgba.r=parseInt(l[0]),this.rgba.g=parseInt(l[1]),this.rgba.b=parseInt(l[2]);var a=document.getElementsByTagName("body")[0],h=document.createElement("div");h.innerHTML=this.render(),a.appendChild(h),this.elem_wrap=h,this.fixedBg=h.children[0],this.elem_colorPancel=h.getElementsByClassName("color-pancel")[0],this.pancel_width=this.elem_colorPancel.offsetWidth,this.pancel_height=this.elem_colorPancel.offsetHeight,this.elem_picker=h.getElementsByClassName("pickerBtn")[0],this.elem_colorPalette=h.getElementsByClassName("color-palette")[0],this.elem_showColor=h.getElementsByClassName("colorpicker-showColor")[0],this.elem_barPicker1=h.getElementsByClassName("colorBar-color-picker")[0],this.elem_hexInput=h.getElementsByClassName("colorpicker-hexInput")[0],this.elem_showModeBtn=h.getElementsByClassName("colorpicker-showModeBtn")[0],this.elem_inputWrap=h.getElementsByClassName("colorpicker-inputWrap")[0];for(var p,d=(p=this.bindElem).offsetTop,g=p.offsetLeft;p.offsetParent;)d+=p.offsetParent.offsetTop,g+=p.offsetParent.offsetLeft,p=p.offsetParent;this.pancelLeft=g+this.elem_colorPalette.clientWidth,this.pancelTop=d+this.bindElem.offsetHeight,t(h,{position:"absolute","z-index":2,display:"none",left:g+"px",top:d+this.bindElem.offsetHeight+"px"}),this.bindMove(this.elem_colorPancel,this.setPosition,!0),this.bindMove(this.elem_barPicker1.parentNode,this.setBar,!1),this.bindElem.addEventListener("click",function(){s.show()},!1),this.fixedBg.addEventListener("click",function(t){s.hide()},!1),this.elem_showModeBtn.addEventListener("click",function(){s.switch_current_mode()},!1),this.elem_wrap.addEventListener("input",function(t){var e=t.target.value;s.setColorByInput(e)},!1),this.elem_colorPalette.addEventListener("click",function(t){if("p"==t.target.tagName.toLocaleLowerCase()){let e=t.target.style.background,i=e.slice(4,-1).split(","),n={r:parseInt(i[0]),g:parseInt(i[1]),b:parseInt(i[2])};switch(s.current_mode){case"hex":s.setColorByInput("#"+s.rgbToHex(n));break;case"rgb":let t=s.elem_wrap.getElementsByTagName("input");t[0].value=n.r,t[1].value=n.g,t[2].value=n.b,s.setColorByInput(e)}}},!1),""!=r&&this.setColorByInput(r)},render:function(){return`<div style="position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px;"></div>\n\t\t\t\t<div style="position: inherit;z-index: 100;display: flex;box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 4px 8px;">\n\t\t\t\t\t<div style='width:180px;padding:10px;background: #f9f9f9;display: flex;flex-flow: row wrap;align-content: space-around;justify-content: space-around;' class='color-palette'>\n\t\t\t\t\t\t${this.getPaletteColorsItem()}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class="colorpicker-pancel" style="background: rgb(255, 255, 255);box-sizing: initial; width: 225px; font-family: Menlo;">\n\t\t\t\t\t\t<div style="width: 100%; padding-bottom: 55%; position: relative; border-radius: 2px 2px 0px 0px; overflow: hidden;">\n\t\t\t\t\t\t\t<div class="color-pancel" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: rgb(${this.rgba.r},${this.rgba.g},${this.rgba.b})">\n\t\t\t\t\t\t\t\t<style>\n\t\t\t\t\t\t\t\t\t.saturation-white {background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0));background: linear-gradient(to right, #fff, rgba(255,255,255,0));}\n\t\t\t\t\t\t\t\t\t.saturation-black {background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0));background: linear-gradient(to top, #000, rgba(0,0,0,0));}\n\t\t\t\t\t\t\t\t</style>\n\t\t\t\t\t\t\t\t<div class="saturation-white" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;">\n\t\t\t\t\t\t\t\t\t<div class="saturation-black" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;">\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class="pickerBtn" style="position: absolute; top: 0%; left: 100%; cursor: default;">\n\t\t\t\t\t\t\t\t\t\t<div style="width: 12px; height: 12px; border-radius: 6px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset; transform: translate(-6px, -6px);">\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div style="padding: 0 16px 20px;">\n\t\t\t\t\t\t\t<div class="flexbox-fix" style="display: flex;align-items: center;height: 40px;">\n\t\t\t\t\t\t\t\t<div style="width: 32px;">\n\t\t\t\t\t\t\t\t\t<div style="width: 16px; height: 16px; border-radius: 8px; position: relative; overflow: hidden;">\n\t\t\t\t\t\t\t\t\t\t<div class="colorpicker-showColor" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; background:rgb(${this.rgba.r},${this.rgba.g},${this.rgba.b}); z-index: 2;"></div>\n\t\t\t\t\t\t\t\t\t\t<div class="" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==&quot;) left center;"></div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div style="-webkit-box-flex: 1; flex: 1 1 0%;"><div style="height: 10px; position: relative;">\n\t\t\t\t\t\t\t\t\t<div style="position: absolute; top: 0px;right: 0px; bottom: 0px; left: 0px;">\n\t\t\t\t\t\t\t\t\t\t<div class="hue-horizontal" style="padding: 0px 2px; position: relative; height: 100%;">\n\t\t\t\t\t\t\t\t\t\t\t<style>\n\t\t\t\t\t\t\t\t\t\t\t\t.hue-horizontal {background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);background: -webkit-linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);}\n\t\t\t\t\t\t\t\t\t\t\t\t.hue-vertical {background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,#0ff 50%, #00f 67%, #f0f 83%, #f00 100%);background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,#0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);}\n\t\t\t\t\t\t\t\t\t\t\t</style>\n\t\t\t\t\t\t\t\t\t\t\t<div  class="colorBar-color-picker" style="position: absolute; left: 0%;">\n\t\t\t\t\t\t\t\t\t\t\t\t<div style="width: 12px; height: 12px; border-radius: 6px; transform: translate(-6px, -1px); background-color: rgb(248, 248, 248); box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;">\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class="flexbox-fix" style="display: flex;">\n\t\t\t\t\t\t\t<div class="flexbox-fix colorpicker-inputWrap" style="-webkit-box-flex: 1; flex: 1 1 0%; display: flex; margin-left: -6px;">\n\t\t\t\t\t\t\t\t\t${this.getInputTpl()}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class="colorpicker-showModeBtn" style="width: 32px; text-align: right; position: relative;">\n\t\t\t\t\t\t\t\t<div style="margin-right: -4px;  cursor: pointer; position: relative;">\n\t\t\t\t\t\t\t\t\t<svg viewBox="0 0 24 24" style="width: 24px; height: 24px; border: 1px solid transparent; border-radius: 5px;"><path fill="#333" d="M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"></path><path fill="#333" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15Z"></path></svg>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>`},getInputTpl:function(){var t="";switch(this.current_mode){case"hex":t+=`\n\t\t\t\t\t\t\t<div style="padding-left: 6px; width: 100%;">\n\t\t\t\t\t\t\t\t<div style="position: relative;">\n\t\t\t\t\t\t\t\t\t<input class="colorpicker-hexInput" value="${"#"+this.rgbToHex(this.HSBToRGB(this.hsb))}" spellcheck="false" style="font-size: 11px; color: rgb(51, 51, 51); width: 100%; border-radius: 2px; border: none; box-shadow: rgb(218, 218, 218) 0px 0px 0px 1px inset; height: 21px; text-align: center;">\n\t\t\t\t\t\t\t\t\t<span style="text-transform: uppercase; font-size: 11px; line-height: 11px; color: rgb(150, 150, 150); text-align: center; display: block; margin-top: 12px;">hex</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>`;break;case"rgb":for(var e=0;e<3;e++)t+=`<div style="padding-left: 6px; width: 100%;">\n\t\t\t\t\t\t\t\t<div style="position: relative;">\n\t\t\t\t\t\t\t\t\t<input class="colorpicker-hexInput" value="${this.rgba["rgb"[e]]}" spellcheck="false" style="font-size: 11px; color: rgb(51, 51, 51); width: 100%; border-radius: 2px; border: none; box-shadow: rgb(218, 218, 218) 0px 0px 0px 1px inset; height: 21px; text-align: center;">\n\t\t\t\t\t\t\t\t\t<span style="text-transform: uppercase; font-size: 11px; line-height: 11px; color: rgb(150, 150, 150); text-align: center; display: block; margin-top: 12px;">${"rgb"[e]}</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>`}return t},getPaletteColorsItem:function(){let t="";return["rgb(0, 0, 0)","rgb(67, 67, 67)","rgb(102, 102, 102)","rgb(204, 204, 204)","rgb(217, 217, 217)","rgb(255, 255, 255)","rgb(152, 0, 0)","rgb(255, 0, 0)","rgb(255, 153, 0)","rgb(255, 255, 0)","rgb(0, 255, 0)","rgb(0, 255, 255)","rgb(74, 134, 232)","rgb(0, 0, 255)","rgb(153, 0, 255)","rgb(255, 0, 255)","rgb(230, 184, 175)","rgb(244, 204, 204)","rgb(252, 229, 205)","rgb(255, 242, 204)","rgb(217, 234, 211)","rgb(208, 224, 227)","rgb(201, 218, 248)","rgb(207, 226, 243)","rgb(217, 210, 233)","rgb(234, 209, 220)","rgb(221, 126, 107)","rgb(234, 153, 153)","rgb(249, 203, 156)","rgb(255, 229, 153)","rgb(182, 215, 168)","rgb(162, 196, 201)","rgb(164, 194, 244)","rgb(159, 197, 232)","rgb(180, 167, 214)"].forEach(e=>t+=`<p style='width:20px;height:20px;background:${e};margin:0 5px;border: solid 1px #d0d0d0;'></p>`),t},setPosition(e,i){var n=parseInt(e-this.pancelLeft),o=parseInt(i-this.pancelTop);this.pointLeft=Math.max(0,Math.min(n,this.pancel_width)),this.pointTop=Math.max(0,Math.min(o,this.pancel_height)),t(this.elem_picker,{left:this.pointLeft+"px",top:this.pointTop+"px"}),this.hsb.s=parseInt(100*this.pointLeft/this.pancel_width),this.hsb.b=parseInt(100*(this.pancel_height-this.pointTop)/this.pancel_height),this.setShowColor(),this.setValue(this.rgba)},setBar:function(e,i){var n=e.getElementsByTagName("div")[0],o=e.getBoundingClientRect(),r=e.offsetWidth,s=Math.max(0,Math.min(i-o.x,r));n===this.elem_barPicker1?(t(n,{left:s+"px"}),this.hsb.h=parseInt(360*s/r)):(t(n,{left:s+"px"}),this.rgba.a=s/r),this.setPancelColor(this.hsb.h),this.setShowColor(),this.setValue(this.rgba)},setPancelColor:function(e){var i=this.HSBToRGB({h:e,s:100,b:100});t(this.elem_colorPancel,{background:"rgba("+i.r+","+i.g+","+i.b+","+this.rgba.a+")"})},setShowColor:function(){var e=this.HSBToRGB(this.hsb);this.rgba.r=e.r,this.rgba.g=e.g,this.rgba.b=e.b,t(this.elem_showColor,{background:"rgba("+e.r+","+e.g+","+e.b+","+this.rgba.a+")"})},setValue:function(t){var e="#"+this.rgbToHex(t);this.elem_inputWrap.innerHTML=this.getInputTpl(),this.Opt.change(this.bindElem,e)},setColorByInput:function(t){switch(this.current_mode){case"hex":3==(t=t.slice(1)).length?(t="#"+t[0]+t[0]+t[1]+t[1]+t[2]+t[2],this.hsb=this.hexToHsb(t)):6==t.length&&(this.hsb=this.hexToHsb(t));break;case"rgb":var e=this.elem_wrap.getElementsByTagName("input"),i={r:e[0].value?parseInt(e[0].value):0,g:e[1].value?parseInt(e[1].value):0,b:e[2].value?parseInt(e[2].value):0};this.hsb=this.rgbToHsb(i)}this.changeViewByHsb()},changeViewByHsb:function(){this.pointLeft=parseInt(this.hsb.s*this.pancel_width/100),this.pointTop=parseInt((100-this.hsb.b)*this.pancel_height/100),t(this.elem_picker,{left:this.pointLeft+"px",top:this.pointTop+"px"}),this.setPancelColor(this.hsb.h),this.setShowColor(),t(this.elem_barPicker1,{left:this.hsb.h/360*this.elem_barPicker1.parentNode.offsetWidth+"px"});var e="#"+this.rgbToHex(this.HSBToRGB(this.hsb));this.Opt.change(this.bindElem,e)},switch_current_mode:function(){this.current_mode="hex"==this.current_mode?"rgb":"hex",this.elem_inputWrap.innerHTML=this.getInputTpl()},bindMove:function(t,e,i){var n=this;t.addEventListener("mousedown",function(o){function r(o){n.moveX=o.pageX,n.moveY=o.pageY,i?e.call(n,n.moveX,n.moveY):e.call(n,t,n.moveX,n.moveY),o.preventDefault()}n.downX=o.pageX,n.downY=o.pageY,i?e.call(n,n.downX,n.downY):e.call(n,t,n.downX,n.downY),document.addEventListener("mousemove",r,!1),document.addEventListener("mouseup",function t(e){document.removeEventListener("mousemove",r,!1),document.removeEventListener("mouseup",t,!1)},!1)},!1)},show:function(){t(this.elem_wrap,{display:"block"})},hide:function(){t(this.elem_wrap,{display:"none"})},HSBToRGB:function(t){var e={},i=Math.round(t.h),n=Math.round(255*t.s/100),o=Math.round(255*t.b/100);if(0==n)e.r=e.g=e.b=o;else{var r=o,s=(255-n)*o/255,l=i%60*(r-s)/60;360==i&&(i=0),i<60?(e.r=r,e.b=s,e.g=s+l):i<120?(e.g=r,e.b=s,e.r=r-l):i<180?(e.g=r,e.r=s,e.b=s+l):i<240?(e.b=r,e.r=s,e.g=r-l):i<300?(e.b=r,e.g=s,e.r=s+l):i<360?(e.r=r,e.g=s,e.b=r-l):(e.r=0,e.g=0,e.b=0)}return{r:Math.round(e.r),g:Math.round(e.g),b:Math.round(e.b)}},rgbToHex:function(t){var e=[t.r.toString(16),t.g.toString(16),t.b.toString(16)];return e.map(function(t,i){1==t.length&&(e[i]="0"+t)}),e.join("")},hexToRgb:function(t){return{r:(t=parseInt(t.indexOf("#")>-1?t.substring(1):t,16))>>16,g:(65280&t)>>8,b:255&t}},hexToHsb:function(t){return this.rgbToHsb(this.hexToRgb(t))},rgbToHsb:function(t){var e={h:0,s:0,b:0},i=Math.min(t.r,t.g,t.b),n=Math.max(t.r,t.g,t.b),o=n-i;return e.b=n,e.s=0!=n?255*o/n:0,0!=e.s?t.r==n?e.h=(t.g-t.b)/o:t.g==n?e.h=2+(t.b-t.r)/o:e.h=4+(t.r-t.g)/o:e.h=-1,e.h*=60,e.h<0&&(e.h+=360),e.s*=100/255,e.b*=100/255,e}},e.create=function(t){return new e(t)},window.Colorpicker=e}();