AutorÃa | Ultima modificación | Ver Log |
var global,factory;global=window,factory=function(){if(void 0!==window.lc_color_picker)return!1;let debounced_vars=[],window_width=null,style_generated=null,active_trigger=null,active_trig_id=null,active_solid=null,active_opacity=null,active_gradient=null,active_mode="linear-gradient",sel_grad_step=0,gradient_data={deg:0,radial_circle:!1,steps:[]};const def_opts={modes:["linear-gradient"],open_on_focus:!0,transparency:!0,dark_theme:!1,no_input_mode:!1,wrap_width:"auto",preview_style:{input_padding:35,side:"right",width:30,separator_color:"#ccc"},fallback_colors:["#008080","linear-gradient(90deg, #fff 0%, #000 100%)"],on_change:null,labels:["click to change color","Solid","Linear Gradient","Radial Gradient","add gradient step","gradient angle","gradient shape","color","opacity"]},right_input_selector='input:not([type="color"])',lccp_ivc_event=function(picker_id){let hide_picker=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return new CustomEvent("lccp_input_val_check",{bubbles:!0,detail:{picker_id:picker_id,hide_picker:hide_picker}})};document.addEventListener("click",(function(e){const picker=document.querySelector("#lc-color-picker.lccp-shown");if(!picker||e.target.classList.contains("lccp-preview"))return!0;for(const trigger of document.getElementsByClassName("lccp-preview"))if(trigger.contains(e.target))return!0;if(e.target.parentNode&&e.target.parentNode.classList&&e.target.parentNode.classList.contains("lccp-el-wrap")&&document.getElementById(active_trig_id))return!0;if(!picker.contains(e.target)&&!e.target.classList.contains("lccp-shown")){const picker_id=picker.getAttribute("data-trigger-id");document.getElementById(picker_id).parentNode.querySelector(right_input_selector).dispatchEvent(lccp_ivc_event(picker_id,!0))}return!0})),window.addEventListener("resize",(function(e){const picker=document.querySelector("#lc-color-picker.lccp-shown");if(!picker||window_width==window.innerWidth)return!0;const picker_id=picker.getAttribute("data-trigger-id");document.getElementById(picker_id).parentNode.querySelector(right_input_selector).dispatchEvent(lccp_ivc_event(picker_id,!0))})),String.prototype.lccpReplaceArray=function(find,replace){let replaceString=this;for(var i=0;i<find.length;i++){const regex=new RegExp(find[i],"g");replaceString="object"==typeof replace?replaceString.replace(regex,replace[i]):replaceString.replace(regex,replace)}return replaceString},window.lc_color_picker=function(attachTo){let cp_uniqid,last_tracked_col,options=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(this.attachTo=attachTo,!this.attachTo)return console.error("You must provide a valid selector string first argument");if("object"!=typeof options)return console.error("Options must be an object");const bkp_opts=options;options=Object.assign({},def_opts,options),void 0!==bkp_opts.preview_style&&(options.preview_style=Object.assign({},def_opts.preview_style,bkp_opts.preview_style)),this.init=function(){const $this=this;style_generated||(this.generate_style(),style_generated=!0),maybe_querySelectorAll(attachTo).forEach((function(el){"INPUT"==el.tagName&&"text"!=el.getAttribute("type")||el.parentNode.classList.length&&el.parentNode.classList.contains("lcslt_wrap")||$this.wrap_element(el)}))},this.wrap_element=function(el){cp_uniqid=Math.random().toString(36).substr(2,9);const $this=this,side_prop="right"==options.preview_style.side?"borderRightWidth":"borderLeftWidth";let trigger_css="width:".concat(options.no_input_mode?"calc(100% - "+parseInt(getComputedStyle(el).borderRightWidth,10)+"px - "+parseInt(getComputedStyle(el).borderLeftWidth,10)+"px);":options.preview_style.width+"px;")+options.preview_style.side+":"+parseInt(getComputedStyle(el)[side_prop],10)+"px;top:"+parseInt(getComputedStyle(el).borderTopWidth,10)+"px;height: calc(100% - "+parseInt(getComputedStyle(el).borderTopWidth,10)+"px - "+parseInt(getComputedStyle(el).borderBottomWidth,10)+"px);",trigger_upper_css=trigger_css+"background:"+el.value+";border-color:"+options.preview_style.separator_color+";",div=document.createElement("div");div.className="lccp-preview-"+options.preview_style.side,div.setAttribute("data-for",el.getAttribute("name")),"auto"!=options.wrap_width&&(div.style.width="inherit"==options.wrap_width?Math.round(el.getBoundingClientRect().width)+"px":options.wrap_width);const direct_colorpicker_code=options.transparency||1!=options.modes.length||"linear-gradient"!=options.modes[0]?"":'<input type="color" name="'+cp_uniqid+'_direct_cp" value="'+el.value+'" class="lccp-direct-cp-f" />';div.classList.add("lccp-el-wrap"),div.innerHTML='<span class="lccp-preview-bg" style="'+trigger_css+'"></span><span id="'+cp_uniqid+'" class="lccp-preview" style="'+trigger_upper_css+'" title="'+options.labels[0]+'"></span>'+direct_colorpicker_code,el.parentNode.insertBefore(div,el),div.appendChild(el),options.no_input_mode||("right"==options.preview_style.side?div.querySelector('input:not([type="color"])').style.paddingRight=options.preview_style.input_padding+"px":div.querySelector('input:not([type="color"])').style.paddingLeft=options.preview_style.input_padding+"px"),div.querySelector(".lccp-direct-cp-f")&&div.querySelector(".lccp-direct-cp-f").addEventListener("input",(e=>{div.querySelector('input:not([type="color"])').value=e.target.value,div.querySelector(".lccp-preview").style.background=e.target.value}));const trigger=document.getElementById(cp_uniqid);trigger.addEventListener("click",(e=>{this.show_picker(trigger)})),options.open_on_focus&&div.querySelector(right_input_selector).addEventListener("focus",(e=>{trigger!=active_trigger&&(active_trigger&&(document.getElementById("lc-color-picker").classList.remove("lccp-shown"),active_trigger=null),$this.debounce("open_on_focus",10,"show_picker",trigger))})),div.querySelector(right_input_selector).addEventListener("keyup",(e=>{if(9==e.keyCode||"Enter"===e.key||13===e.keyCode)return;const is_active_trigger_and_opened=!!(active_trig_id=cp_uniqid&&document.querySelector("#lc-color-picker.lccp-shown"));active_trigger=trigger,active_trig_id=cp_uniqid,$this.debounce("manual_input_sync",10,"val_to_picker",!0),is_active_trigger_and_opened&&($this.debounce("manual_input_sync_cp",10,"append_color_picker",!1),$this.debounce("reopen_picker_after_manual_edit",10,"show_picker",trigger))})),div.querySelector(right_input_selector).addEventListener("focusout",(e=>{if("BODY"==document.activeElement.tagName&&document.querySelector('#lc-color-picker.lccp-shown[data-trigger-id="'+active_trig_id+'"]'))return!0;e.target.dispatchEvent(lccp_ivc_event(active_trig_id,!0))})),div.querySelector(right_input_selector).addEventListener("lccp_input_val_check",(e=>{const curr_val=e.target.value,test=document.createElement("div");test.style.background=curr_val;let val_to_set,browser_val=test.style.background;curr_val.trim().length&&browser_val?(browser_val=browser_val.replaceAll("0.",".").replace(/rgb\([^\)]+\)/g,(rgb=>$this.RGB_to_hex(rgb))),val_to_set="rgb("==browser_val.trim().toLowerCase().substr(0,4)?$this.RGB_to_hex(browser_val):browser_val):val_to_set=-1===e.target.value.toLowerCase().indexOf("gradient")?-1===options.fallback_colors[0].toLowerCase().indexOf("rgba")?$this.RGB_to_hex(options.fallback_colors[0]):options.fallback_colors[0]:options.fallback_colors[1],val_to_set!=curr_val&&(e.target.value=val_to_set),"function"==typeof options.on_change&&last_tracked_col!=val_to_set&&options.on_change.call($this,val_to_set,e.target),e.detail.picker_id==active_trig_id&&(active_trigger=null,active_trig_id=null);const $target=document.querySelector('#lc-color-picker.lccp-shown[data-trigger-id="'+e.detail.picker_id+'"]');$target&&($target.classList.remove("lccp-shown"),document.getElementById("lc-color-picker").remove())}))},this.show_picker=function(trigger){if(document.querySelector('#lc-color-picker.lccp-shown[data-trigger-id="'+active_trig_id+'"]'))return document.getElementById("lc-color-picker").remove(),active_trigger=null,active_trig_id=null,!1;const direct_colorpicker=trigger.parentNode.querySelector(".lccp-direct-cp-f");if(direct_colorpicker&&(!options.open_on_focus||options.open_on_focus&&!navigator.userAgent.toLowerCase().includes("firefox")))return direct_colorpicker.value=active_solid,direct_colorpicker.click(),!0;window_width=window.innerWidth,active_trigger=trigger,active_trig_id=cp_uniqid,this.val_to_picker(),this.append_color_picker();const picker=document.getElementById("lc-color-picker"),picker_w=picker.offsetWidth,picker_h=picker.offsetHeight,at_offsety=active_trigger.getBoundingClientRect(),at_h=parseInt(active_trigger.clientHeight,10)+parseInt(getComputedStyle(active_trigger).borderTopWidth,10)+parseInt(getComputedStyle(active_trigger).borderBottomWidth,10),y_pos=parseInt(at_offsety.y,10)+parseInt(window.pageYOffset,10)+at_h+5;let left=parseInt(at_offsety.right,10)-picker_w;left<0&&(left=0),window.innerWidth<700&&(left=Math.floor((window.innerWidth-picker_w)/2));const y_pos_css=y_pos+picker_h-document.documentElement.scrollTop<window.innerHeight?"top:"+y_pos:"transform: translate3d(0, calc((100% + "+(active_trigger.offsetHeight+10)+"px) * -1), 0); top:"+y_pos;picker.setAttribute("style",y_pos_css+"px; left: "+left+"px;"),picker.classList.add("lccp-shown")},this.val_to_picker=function(from_manual_input){if(!active_trigger)return!1;const val=active_trigger.parentNode.querySelector(right_input_selector).value.trim().toLowerCase();last_tracked_col=val;let test=document.createElement("div");test.style.background=val,val.length&&test.style.background.length?(active_mode="linear-gradient",active_gradient=val):(active_solid=options.fallback_colors[0],active_gradient=options.fallback_colors[1],active_mode="linear-gradient"),active_trigger.style.background=val,(!from_manual_input||from_manual_input&&options.open_on_focus)&&active_gradient&&this.load_gradient_data(active_gradient)},this.load_solid_data=function(raw_data){if(active_opacity=1,-1!==raw_data.indexOf("rgba")){const data=this.RGBA_to_hexA(raw_data);active_solid=data[0],active_opacity=data[1]}else active_solid=-1!==raw_data.indexOf("rgba")?this.RGB_to_hex(raw_data):this.short_hex_fix(raw_data)},this.load_gradient_data=function(raw_data){const $this=this,is_radial=-1!==raw_data.indexOf("radial-gradient");raw_data=(raw_data=raw_data.replace(/,\./g,",0.").replace(/ \./g," 0.").replace(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)/g,"rgbaZ($1|$2|$3|$4)").replace(/\|\)/g,"|1)")).replace("top right","45deg").replace("right top","45deg").replace("bottom right","135deg").replace("bottom right","135deg").replace("top left","315deg").replace("left top","315deg").replace("bottom left","225deg").replace("bottom left","225deg").replace("right","90deg").replace("left","270deg").replace("top","0deg").replace("bottom","180deg"),is_radial&&-1===raw_data.indexOf("ellipse")&&-1===raw_data.indexOf("circle")&&raw_data.replace("\\(","(ellipse "),is_radial||-1!==raw_data.indexOf("deg")||raw_data.replace("\\(","(180deg");const raw_steps=(raw_data=raw_data.lccpReplaceArray(["linear-gradient","radial-gradient","","\\(","to","\\)"],"")).split(","),fallback_multiplier=100/raw_steps.length;gradient_data.steps=[],raw_steps.some((function(raw_step,index){if(index){let position="";position=(raw_step=raw_step.trim().split(" ")).length<2?1===index?"0%":index==raw_steps.length-1?"100%":fallback_multiplier*index+"%":raw_step[1];let raw_color=raw_step[0],opacity=1;if(-1!==raw_color.indexOf("rgbaZ")){const col_arr=$this.RGBA_to_hexA(raw_color.replace("rgbaZ","rgba").replace(/\|/g,","));raw_color=col_arr[0],opacity=col_arr[1]}gradient_data.steps.push({color:$this.short_hex_fix(raw_color),opacity:opacity,position:parseInt(position,10)})}else is_radial?gradient_data.radial_circle=-1!==raw_step.indexOf("circle"):gradient_data.deg=parseInt(raw_step.replace("deg",""),10)}))},this.RGBA_to_hexA=function(raw_data){const rgba_arr=(raw_data=raw_data.lccpReplaceArray(["rgba","\\(","\\)"],"")).split(",");let alpha=void 0!==rgba_arr[3]?rgba_arr[3]:"1";return"."==alpha.substring(0,1)&&(alpha=0+alpha),rgba_arr.splice(3,1),[this.RGB_to_hex("rgb("+rgba_arr.join(",")+")"),parseFloat(alpha)]},this.RGB_to_hex=function(rgb){const rgb_arr=(rgb=rgb.lccpReplaceArray(["rgb","\\(","\\)"],"")).split(",");if(rgb_arr.length<3)return"";let r=parseInt(rgb_arr[0].trim(),10).toString(16),g=parseInt(rgb_arr[1].trim(),10).toString(16),b=parseInt(rgb_arr[2].trim(),10).toString(16);return 1==r.length&&(r="0"+r),1==g.length&&(g="0"+g),1==b.length&&(b="0"+b),this.shorten_hex(r+g+b)},this.shorten_hex=function(hex){return(hex=hex.replace("#","").split("")).length>=6&&hex[0]===hex[1]&&hex[2]===hex[3]&&hex[4]===hex[5]?"#"+hex[0]+hex[2]+hex[4]:"#"+hex.join("")},this.short_hex_fix=function(hex){if(4==hex.length){const a=hex.split("");hex=a[0]+a[1]+a[1]+a[2]+a[2]+a[3]+a[3]}return hex.toLowerCase()},this.hex_to_RGB=function(h){let r=0,g=0,b=0;return 4==h.length?(r="0x"+h[1]+h[1],g="0x"+h[2]+h[2],b="0x"+h[3]+h[3]):7==h.length&&(r="0x"+h[1]+h[2],g="0x"+h[3]+h[4],b="0x"+h[5]+h[6]),"rgb("+ +r+", "+ +g+", "+ +b+")"},this.hex_to_RGBA=function(h,opacity){return 1===parseFloat(opacity)?this.shorten_hex(h):this.hex_to_RGB(h).replace("(","a(").replace(")",", "+opacity.toString().replace("0.",".")+")")},this.append_color_picker=function(){let on_manual_input_change=arguments.length>0&&void 0!==arguments[0]&&arguments[0];const $this=this,theme_class=options.dark_theme?"lccp_dark_theme":"lccp_light_theme",shown_solid="solid"==active_mode?active_solid:gradient_data.steps[0].color,shown_opacity="solid"==active_mode?active_opacity:options.transparency?gradient_data.steps[0].opacity:null,print_grad_code=-1!==options.modes.indexOf("linear-gradient")||-1!==options.modes.indexOf("radial-gradient");let picker_el,picker="";if(on_manual_input_change&&document.getElementById("lc-color-picker")?(picker_el=document.getElementById("lc-color-picker"),picker_el.setAttribute("data-mode",active_mode),picker_el.setAttribute("data-trigger-id",cp_uniqid)):picker='<div id="lc-color-picker" class="'+theme_class+'" data-mode="'+active_mode+'" data-trigger-id="'+cp_uniqid+'">',print_grad_code&&(picker+='\n <div class="lccp_gradient_wizard" '.concat("solid"==active_mode?'style="display: none;"':"",'>\n <div class="lccp_gradient lccp_gradient-bg"></div>\n <divclass="lccp_gradient" style="background: ').concat(active_gradient,'" title="').concat(options.labels[4],'"></div>\n\n <div class="lccp_gradient_ranges"></div>\n\n <div class="pccp_deg_f_wrap" ').concat("radial-gradient"==active_mode?'style="display: none;"':"",'>\n <img src=" data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZJJREFUeNqsVetthDAMzp06QEagEv/LBk03oBswAhuQDVAn6AgZgTIBbAAb5DZIE+ScUs42OVRLVvBd7M+v2BeRRxVwEQSttei6LlNV/HB/ymDP8+LZYVxVlev73llrXUrLsqSipgBaz5YyvmcppfPRbRYDYJCNMSzId67xPSulXNu223c4KZDTAFgqMRDNKAXwGuokoAEazwMHBLW6gxTExQm6iqOGAoG66Ctc7BHl2fMHnBT1ECVK4zgKLgqbpIYjm1EX/eIFhSh/eb5lgLyC/jucf1I7z7NY1/Ue8t4LybwfDU1APeAabIZ6urIsg85DhyxM/tN7de5cuSK/rcz84uSnQKhU3Q7kNKUqDtNIJrMmEu4ORMvH6NDUtwhII85TBfXSYBtF54p/tBoGMI6mfCDm1bM0JU4+vD/FDMYc6pMUx11ksIuGAFrAAJYCtctEk5PT6WBPTOCMTKKPDljg4j+AHABEw0PSQBMxC8n3cASSbtLibL8rZvOpxHtztBYuGWAFPK63xOPPzFWw0a8AAwA+dEfwP/CgZgAAAABJRU5ErkJggg==" alt="angle" title="').concat(options.labels[5],'" />\n\n <input type="range" name="deg" value="').concat(gradient_data.deg,'" min="0" max="360" step="1" />\n <input type="number" name="deg-num" value="').concat(gradient_data.deg,'" min="0" max="360" step="1" />\n </div>\n <div class="pccp_circle_f_wrap" ').concat("radial-gradient"==active_mode?"":'style="display: none;"','>\n <img src=" data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAhQAAAIUB4uz/wQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEZSURBVEiJzdQxSgRBFATQ52hionsKxcjQTERYUzMv4F28hImsiwcQExFEBfUCggtGXkBccRNR1qBnQHRme9p2wYJigu5f9Wd+zaceXexjgFeM8IADbGGmoS6KJVxiHOENVlLF1/HUQrziEBspnaeIV3zGchuD81+IV7wWmUk3Q7ziZpP4HHYib/eBU9yVYnWYnyQwmNDZI1YjDUTx0iD+Xop30BdSk5Kww7LWqOHSSdlAP0H4O3uEP7TucK80SOn8R4wLIWZ1eCufC03ftgUWCxxlCERR4Ay30zQYY1dI01QM4B7bwkCnYgAXWMPVXxo0LalNzArzaVoPWQZfkWVQxK/k4V8Y5MR32MbgOMOgVW1H2Iqp67qHzif097OAt54XXQAAAABJRU5ErkJggg==" alt="shape" title="').concat(options.labels[6],'" />\n\n <span class="pcpp_ellipse_shape ').concat(gradient_data.radial_circle?"":"pcpp_circle_btn_active",'" data-val="ellipse">Ellipse</span>\n <span class="pcpp_circle_shape ').concat(gradient_data.radial_circle?"pcpp_circle_btn_active":"",'" data-val="circle">Circle</span>\n </div>\n <hr/>\n </div>')),picker+='\n <div class="pccp_color_f_wrap" '.concat(print_grad_code?"":'style="margin-top: 0;"','>\n <img src=" data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAA2wAAANsB8FDmnAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFzSURBVEiJrdU/SxxRFIbx3wgWCjbRSkEICCHBzhCwUCurQDr3I6QLaJEqTcDWJoVNPoAWqW2sXAJW22hhkX+F1VYKBlwQ15ti7+Cy2Z29M+OFt5i5nOdhztw5I4QgNXiFH/iYXFMCPoFThJhPTy340AcPeEDjSQRYxN8BQcAt3tQSYBInQ+B52pitI/haAM/zpZIAOwnwgDsslRLgLbqJgoBvyQIs46YEPM/qWAGm8asCPOB7imCvIjzPy5ECrOC+pmC3SJByJMflvEhwUQO8j0t0kP0nwDO9+VIFfh8Px0m8nh8mmKrR/zO9aXsTGVM5d0JcIYRObFGV1cQLzOAisojW/tWqAG/jM94PZQy85IZyrenqjZR1j2OlMfIURclRIvwP1jCH3/HeUcqXvIDrEdCfOMC2Xr/fxRaFWLOQOuw2+wrzHMe959iKonyvjc2y43oWhwOSqyFPdajgj5ZF2MiVZdkGNvA6Jj8pLTRDCM2i+n/jlZhJOn4yuAAAAABJRU5ErkJggg==" alt="color" title="').concat(options.labels[7],'" />\n\n <div>\n <input type="color" name="color" value="').concat(shown_solid,'" style="opacity: ').concat(active_opacity,';" />\n </div>\n <input type="text" name="hex" value="').concat(shown_solid.toLowerCase(),'" />\n </div>'),options.transparency&&(picker+='\n <div class="pccp_opacity_f_wrap">\n <img src=" data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAF9SURBVEiJtda/ihRBEMfxT42D4Jmdq5GHIBqJIHgYGCuIIhcYaGRgYGDsU4i+gqFgJogXivgGwkUmKpqcnhgJJ/4pg5mV3XVmd3q5K+iku+v37e7qrurITH0WEUdwC5dwCiexi21sZub9XufW6h7ho3iEmzg4M/wOm3i/SBxk5lTDDXxB9rRnHT7H8QYX/hubmXgHf+aI9wEO4CW+Yb0T0B7HIvFOQOu/glct5PwUAMfwdYB4L6DVOYzX+DTuGwf5IVYHBW2OZeb3iLiC9cn+EX4OXP3cHXS1qj37zuu6F1bjaqFP/8ucsIi4jtM1ThQCYuC8azhXYa0QUGTVfoqPAR/3E1DjA84U+AwKMl7gba3JjCU3aVCQM/M5zRE9xa8CQJFVmbmDJ3slGBGHIuLiv442SY3MrwFLJ7uqhezgriZdL7vyFU1gz2JjagcTK7iN36U7MKTgzJTMz4WANWxZVDInHEZ4jB8dgC08wL0h6ToWfFtWNd+Wy5b8tvwFZS60TLZpD/8AAAAASUVORK5CYII=" alt="opacity" title="'.concat(options.labels[8],'" />\n\n <input type="range" name="opacity" value="').concat(shown_opacity,'" min="0" max="1" step="0.01" />\n <input type="number" name="opacity-num" value="').concat(shown_opacity,'" min="0" max="1" step="0.05" />\n </div>')),on_manual_input_change&&document.getElementById("lc-color-picker")?picker_el.innerHTML=picker:document.body.insertAdjacentHTML("beforeend",picker+"</div>"),options.modes.length>=1)for(const mode of document.querySelectorAll("#lccp_modes_wrap span"))mode.addEventListener("click",(e=>{$this.mode_change(e.target,e.target.getAttribute("data-mode"))}));if(print_grad_code&&(gradient_data.steps.some((function(step,index){$this.add_draggable_element(index,step.position,step.color)})),document.querySelector(".lccp_gradient:not(.lccp_gradient-bg)").addEventListener("click",(e=>{this.add_gradient_step(e)}))),-1!==options.modes.indexOf("linear-gradient")&&(document.querySelector(".pccp_deg_f_wrap input[type=range]").addEventListener("input",(e=>{this.track_deg_range_change(e)})),document.querySelector(".pccp_deg_f_wrap input[name=deg-num]").addEventListener("change",(e=>{this.track_deg_num_change(e)})),document.querySelector(".pccp_deg_f_wrap input[name=deg-num]").addEventListener("keyup",(e=>{this.debounce("deg_f_change",500,"track_deg_num_change",e)}))),-1!==options.modes.indexOf("radial-gradient"))for(const mode of document.querySelectorAll(".pccp_circle_f_wrap span"))mode.addEventListener("click",(e=>{$this.set_ellipse_circle(e.target,e.target.getAttribute("data-val"))}));document.querySelector('.pccp_color_f_wrap input[type="color"]').addEventListener("input",(e=>{this.track_color_change(e)})),document.querySelector('.pccp_color_f_wrap input[type="color"]').addEventListener("change",(e=>{this.track_color_change(e)})),document.querySelector(".pccp_color_f_wrap input[name=hex]").addEventListener("keyup",(e=>{this.debounce("hex_f_change",600,"track_color_hex_change",e)})),options.transparency&&(document.querySelector(".pccp_opacity_f_wrap input[type=range]").addEventListener("input",(e=>{this.track_opacity_range_change(e)})),document.querySelector(".pccp_opacity_f_wrap input[name=opacity-num]").addEventListener("change",(e=>{this.track_opacity_num_change(e)})),document.querySelector(".pccp_opacity_f_wrap input[name=opacity-num]").addEventListener("keyup",(e=>{this.debounce("opacity_f_change",500,"track_opacity_num_change",e)})))},this.add_draggable_element=function(rel_step_num,position,color){const $this=this,container=document.querySelector(".lccp_gradient_ranges"),sel_class=rel_step_num?"":"lccp_sel_step",del_btn_vis=gradient_data.steps.length>2?"":'style="display: none;"';container.innerHTML+='<span class="lccp_gradient_range '+sel_class+'" data-step-num="'+rel_step_num+'" style="background: '+color+"; left: "+position+'%;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJFJREFUeNpiYMAOFIC4H4jPA/F/NHweKqfAQAQQgCr+TyTuJ2TYeRIMQ3axADYD8RlWAMVEG9pAwBUwQJT3FYjwFjEGgrACE5BIYKAeyGcgMiKIdeF9RjQNuAAjkoEEAXpskgpQYp+JgcqA6l4GufACFR34AGTgRioauIHqCZsmWY8mhQNNii+qF7BUqQIAAgwANgu7Y7cw5VAAAAAASUVORK5CYII=" '+del_btn_vis+" /></span>";let active=!1;const dragStart=function(range_id,el,e){active=range_id},dragEnd=function(){active=!1,$this.apply_changes()},drag=function(range_id,range,e){if(!1!==active&&range_id==active){e.preventDefault();const rect=container.getBoundingClientRect();let new_pos="touchmove"===e.type?e.touches[0].clientX-rect.left:e.clientX-rect.left;new_pos=Math.round(100*new_pos/container.offsetWidth),new_pos<0?new_pos=0:new_pos>100&&(new_pos=100);const min_pos=range_id?gradient_data.steps[range_id-1].position:0,max_pos=range_id==gradient_data.steps.length-1?100:gradient_data.steps[range_id+1].position;new_pos<min_pos?new_pos=min_pos+1:new_pos>max_pos&&(new_pos=max_pos-1),gradient_data.steps[range_id].position=new_pos,range.style.left=new_pos+"%",$this.apply_gradient_changes()}};document.querySelectorAll(".lccp_gradient_range").forEach((range=>{const step_num=parseInt(range.getAttribute("data-step-num"),10);range.removeEventListener("touchstart",null),range.removeEventListener("touchend",null),range.removeEventListener("touchmove",null),range.removeEventListener("click",null),range.removeEventListener("mousedown",null),range.removeEventListener("mouseup",null),range.addEventListener("touchstart",(e=>{dragStart(step_num,e.target)})),range.addEventListener("mousedown",(e=>{dragStart(step_num,e.target)})),range.addEventListener("click",(e=>{$this.select_gradient_color(step_num)})),container.addEventListener("touchmove",(e=>{drag(step_num,range,e)})),container.addEventListener("mousemove",(e=>{drag(step_num,range,e)})),range.addEventListener("mouseup",(e=>{dragEnd()})),range.addEventListener("touchend",(e=>{dragEnd()})),document.addEventListener("mouseup",(e=>{dragEnd()}))})),document.querySelectorAll(".lccp_gradient_range img").forEach((btn=>{btn.addEventListener("click",(e=>{if(document.querySelectorAll(".lccp_gradient_range").length<3)return!1;setTimeout((()=>{const parent=e.target.parentNode,step_num=parseInt(parent.getAttribute("data-step-num"),10),to_select=step_num?step_num-1:0;gradient_data.steps.splice(step_num,1),document.querySelectorAll(".lccp_gradient_range").forEach((r=>r.remove())),gradient_data.steps.some((function(step,index){$this.add_draggable_element(index,step.position,step.color)})),document.querySelector('.lccp_gradient_range[data-step-num="'+to_select+'"]').click(),this.apply_gradient_changes(!0)}),20)}))}))},this.select_gradient_color=function(step_num){sel_grad_step=step_num,document.querySelectorAll(".lccp_gradient_range").forEach((m=>m.classList.remove("lccp_sel_step"))),document.querySelector('.lccp_gradient_range[data-step-num="'+step_num+'"]').classList.add("lccp_sel_step"),active_solid=gradient_data.steps[step_num].color,active_opacity=gradient_data.steps[step_num].opacity,document.querySelector('#lc-color-picker input[type="color"]').value=active_solid,document.querySelector(".pccp_color_f_wrap input[name=hex]").value=active_solid,options.transparency&&(document.querySelector(".pccp_opacity_f_wrap input[type=range]").value=active_opacity,document.querySelector(".pccp_opacity_f_wrap input[name=opacity-num]").value=active_opacity)},this.apply_gradient_changes=function(also_apply_changes){const $this=this;let new_gradient=active_mode+"(";new_gradient+="linear-gradient"==active_mode?gradient_data.deg+"deg":gradient_data.radial_circle?"circle":"ellipse",new_gradient+=", ";let colors_part=[];gradient_data.steps.some((function(step,index){let to_add=options.transparency?$this.hex_to_RGBA(step.color,step.opacity):$this.shorten_hex(step.color);(gradient_data.steps.length>2||gradient_data.steps.length<=2&&(!index&&parseInt(step.position,10)||index&&index<gradient_data.steps.length-1||index==gradient_data.steps.length-1&&100!=parseInt(step.position,10)))&&(to_add+=" "+step.position+"%"),colors_part.push(to_add)})),active_gradient=new_gradient+colors_part.join(", ")+")",document.querySelector(".lccp_gradient:not(.lccp_gradient-bg)")&&(document.querySelector(".lccp_gradient:not(.lccp_gradient-bg)").style.background=active_gradient),also_apply_changes&&this.apply_changes()},this.apply_changes=function(){if(!active_trigger)return!1;let val="";"solid"==active_mode?(val=this.shorten_hex(active_solid),options.transparency&&document.querySelector(".pccp_opacity_f_wrap input[type=range]")&&(active_opacity=document.querySelector(".pccp_opacity_f_wrap input[type=range]").value,val=this.hex_to_RGBA(val,active_opacity))):val=active_gradient,active_trigger.style.background=val;const field=active_trigger.parentNode.querySelector(right_input_selector);field.value!=val&&(field.value=val,last_tracked_col=val,"function"==typeof options.on_change&&(null!=typeof debounced_vars.on_change_cb&&debounced_vars.on_change_cb&&clearTimeout(debounced_vars.on_change_cb),debounced_vars.on_change_cb=setTimeout((()=>{options.on_change.call(this,val,field)}),300)))},this.mode_change=function(el,new_mode){if(active_mode==new_mode)return!1;let color,opacity;"solid"==new_mode?(color=active_solid,options.transparency&&(opacity=active_opacity)):(color=gradient_data.steps[0].color,options.transparency&&(opacity=gradient_data.steps[0].opacity)),document.querySelector('#lc-color-picker input[type="color"]').value=color,document.querySelector(".pccp_color_f_wrap input[name=hex]").value=color,options.transparency&&(document.querySelector(".pccp_opacity_f_wrap input[type=range]").value=opacity,document.querySelector(".pccp_opacity_f_wrap input[name=opacity-num]").value=opacity),options.modes.length>=1&&(document.querySelector(".pccp_deg_f_wrap").style.display="linear-gradient"==new_mode?"flex":"none",document.querySelector(".pccp_circle_f_wrap").style.display="radial-gradient"==new_mode?"block":"none"),-1===options.modes.indexOf("linear-gradient")&&-1===options.modes.indexOf("radial-gradient")||(document.querySelector(".lccp_gradient_wizard").style.display="solid"!=new_mode?"block":"none"),document.querySelectorAll("#lccp_modes_wrap span").forEach((m=>m.classList.remove("lccp_sel_mode"))),el.classList.add("lccp_sel_mode"),active_mode=new_mode,"solid"==new_mode?this.apply_changes():this.apply_gradient_changes(!0)},this.add_gradient_step=function(e){const $this=this,pos=Math.round(100*e.layerX/e.target.offsetWidth);let index=0;for(let step of gradient_data.steps){if(step.position>pos){const step_data={color:index-1<0?step.color:gradient_data.steps[index-1].color,opacity:1,position:pos};gradient_data.steps.splice(index,0,step_data);break}index++}document.querySelectorAll(".lccp_gradient_range").forEach((r=>r.remove())),gradient_data.steps.some((function(step,index){$this.add_draggable_element(index,step.position,step.color)})),document.querySelector('.lccp_gradient_range[data-step-num="'+index+'"]').click(),this.apply_gradient_changes(!0)},this.set_ellipse_circle=function(el,new_opt){if(gradient_data.radial_circle&&"circle"==new_opt||!gradient_data.radial_circle&&"circle"!=new_opt)return!1;gradient_data.radial_circle=!gradient_data.radial_circle,document.querySelectorAll(".pccp_circle_f_wrap span").forEach((m=>m.classList.remove("pcpp_circle_btn_active"))),el.classList.add("pcpp_circle_btn_active"),this.apply_gradient_changes(!0)},this.track_deg_range_change=function(e){document.querySelector(".pccp_deg_f_wrap input[name=deg-num]").value=e.target.value,gradient_data.deg=e.target.value,this.apply_gradient_changes(!0)},this.track_deg_num_change=function(e){let val=parseFloat(e.target.value);(isNaN(val)||val<0||val>360)&&(val=90),e.target.value=val,document.querySelector(".pccp_deg_f_wrap input[type=range]")&&(document.querySelector(".pccp_deg_f_wrap input[type=range]").value=val),gradient_data.deg=val,this.apply_gradient_changes(!0)},this.track_color_change=function(e){const val=e.target.value.toLowerCase();document.querySelector(".pccp_color_f_wrap input[name=hex]").value=val,this.apply_color_change(val)},this.track_color_hex_change=function(e){let val=this.short_hex_fix(e.target.value);null===val.match(/^#[a-f0-9]{6}$/i)&&(val=active_solid.toLowerCase()),e.target.value=val,document.querySelector('#lc-color-picker input[type="color"]').value=val,this.apply_color_change(val)},this.apply_color_change=function(val){"solid"==active_mode?(active_solid=val,this.apply_changes()):(gradient_data.steps[sel_grad_step].color=val,document.querySelector(".lccp_sel_step").style.background=val,this.apply_gradient_changes(!0))},this.track_opacity_range_change=function(e){document.querySelector(".pccp_opacity_f_wrap input[name=opacity-num]").value=e.target.value,this.alter_hex_opacity(e.target.value)},this.track_opacity_num_change=function(e){let val=parseFloat(e.target.value);(isNaN(val)||val<0||val>1)&&(val=.5),e.target.value=val,document.querySelector(".pccp_opacity_f_wrap input[type=range]")&&(document.querySelector(".pccp_opacity_f_wrap input[type=range]").value=val,this.alter_hex_opacity(val))},this.alter_hex_opacity=function(opacity){document.querySelector('#lc-color-picker input[type="color"]').style.opacity=opacity,"solid"==active_mode?(active_opacity=opacity,this.apply_changes()):(gradient_data.steps[sel_grad_step].opacity=opacity,this.apply_gradient_changes(!0))},this.debounce=function(action_name,timing,cb_function,cb_params){void 0!==debounced_vars[action_name]&&debounced_vars[action_name]&&clearTimeout(debounced_vars[action_name]);const $this=this;debounced_vars[action_name]=setTimeout((()=>{$this[cb_function].call($this,cb_params)}),timing)},this.generate_style=function(){document.head.insertAdjacentHTML("beforeend",'<style>\n.lccp-el-wrap {\n position: relative;\n display: inline-block;\n}\n.lccp-el-wrap > input {\n margin: 0;\n min-width: 100%;\n max-width: 100%;\n width: auto;\n}\n.lccp-preview,\n.lccp-preview-bg {\n display: inline-block;\n position: absolute;\n cursor: pointer;\n z-index: 15;\n}\n.lccp-preview-bg {\n z-index: 10;\n}\n.lccp-preview-right .lccp-preview {\n border-left: 1px solid #ccc;\n}\n.lccp-preview-left .lccp-preview {\n border-right: 1px solid #ccc;\n}\n.lccp-direct-cp-f {\n padding: 0 !important;\n margin: 0 !important;\n width: 0 !important;\n height: 0 !important;\n position: absolute;\n bottom: 0;\n visibility: hidden;\n}\n.lccp-preview-right .lccp-direct-cp-f {\n right: 0;\n}\n.lccp-preview-left .lccp-direct-cp-f{\n left: 0;\n}\n#lc-color-picker,\n#lc-color-picker * {\n box-sizing: border-box;\n font-family: sans-serif;\n}\n#lc-color-picker {\n visibility: hidden;\n z-index: -100;\n opacity: 0;\n position: absolute;\n top: -9999px;\n z-index: 9999999999;\n width: 280px;\n background: #fff;\n box-shadow: 0px 2px 13px -2px rgba(0, 0, 0, .18);\n border-radius: 4px;\n overflow: hidden;\n padding: 10px;\n border: 1px solid #ccc;\n transition: opacity .15s ease;\n}\n#lc-color-picker.lccp-shown {\n visibility: visible;\n opacity: 1;\n\n}\n\n#lccp_modes_wrap {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n margin-bottom: 10px;\n}\n#lccp_modes_wrap span,\n.pccp_circle_f_wrap span {\n\tdisplay: inline-block;\n\tborder: 1px solid #e8e8e8;\n\tbackground: #e8e8e8;\n opacity: .78;\n\tpadding: 4px 7px;\n\tfont-size: 11.5px;\n\tborder-radius: 3px;\n\tline-height: normal;\n cursor: pointer;\n user-select: none;\n transition: all .2s ease;\n}\n#lccp_modes_wrap span.lccp_sel_mode,\n.pccp_circle_f_wrap span.pcpp_circle_btn_active {\n\tborder: 1px solid #bbb;\n\tbackground: #fff;\n opacity: 1;\n\tcursor: default;\n}\n.lccp_gradient_wizard,\n.lccp_gradient_ranges {\n position: relative;\n}\n.lccp_gradient {\n height: 35px;\n border:1px solid #aaa;\n cursor: crosshair;\n position: relative;\n z-index: 10;\n user-select: none;\n}\n.lccp_gradient-bg {\n\tposition: absolute;\n\ttop: 0;\n\tz-index: 0;\n\twidth: 100%;\n\tmargin: 0;\n}\n.lccp_gradient_ranges {\n margin: 2px 7px 25px 8px;\n height: 20px;\n}\n.lccp_gradient_range {\n\tdisplay: inline-block;\n\twidth: 13px;\n\theight: 13px;\n\tborder: 1px solid #ccc;\n\tborder-radius: 0 50% 50% 50%;\n\ttransform: rotate(45deg) translate3d(-5px, 5px, 0);\n\tcursor: col-resize;\n\tposition: absolute;\n top: 3px;\n}\n.lccp_gradient_range img {\n\twidth: 13px;\n\tposition: relative;\n\ttop: 11px;\n\tleft: 11px;\n\topacity: .3;\n\tcursor: pointer;\n transition: all .2s ease;\n}\n.lccp_gradient_range img:hover {\n opacity: .5;\n}\n.lccp_sel_step {\n border: 1px solid #333;\n box-shadow: 0 0 2px 1px teal;\n}\n.pccp_deg_f_wrap,\n.pccp_circle_f_wrap {\n margin-bottom: 10px;\n}\n.pccp_circle_f_wrap * {\n float: left;\n}\n.pccp_circle_f_wrap:after {\n content: "";\n clear: both;\n display: block;\n}\n.pccp_circle_f_wrap img {\n position: relative;\n top: 4px;\n}\n.pccp_circle_f_wrap span {\n margin-left: 13px;\n}\n.pccp_circle_f_wrap span:not(.pcpp_circle_btn_active) {\n cursr: pointer;\n}\n.pccp_deg_f_wrap,\n.pccp_color_f_wrap,\n.pccp_opacity_f_wrap {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n clear: both;\n}\n.pccp_deg_f_wrap input,\n.pccp_color_f_wrap input,\n.pccp_opacity_f_wrap input {\n border: 1px solid #aaa;\n border-radius: 3px;\n padding: 0;\n}\n.lccp-preview-bg,\n.pccp_color_f_wrap div,\n.lccp_gradient-bg {\n background: '.concat("url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAQDAwMDAwQDAwQGBAMEBgcFBAQFBwgGBgcGBggKCAkJCQkICgoMDAwMDAoMDA0NDAwRERERERQUFBQUFBQUFBT/2wBDAQQFBQgHCA8KCg8UDg4OFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAoACgDAREAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAUGCP/EACIQAQAABQMFAQAAAAAAAAAAAAAFFUNjgqLB4RESEzVRkf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwDv4AE6K0stgTgAaIAE6K0stgTgAUZra1cATW1q4A9na8WXXu/PgEqu6eQJVd08gnAAowqrjuCiADOgAowqrjuCiAD/2Q==')",' repeat;\n background-size: 15px;\n}\n#lc-color-picker hr {\n\tmargin: 14px 0 0;\n\theight: 0;\n\tborder-width: 1px 0;\n\tborder-style: dashed;\n\tborder-color: #e3e3e3;\n}\n.pccp_color_f_wrap div {\n width: calc(100% - 25px - 85px);\n height: 25px;\n border: 1px solid #aaa;\n border-radius: 2px;\n overflow: hidden;\n}\n.pccp_deg_f_wrap img,\n.pccp_circle_f_wrap img,\n.pccp_color_f_wrap img,\n.pccp_opacity_f_wrap img {\n\tmax-width: 15px;\n\topacity: .6;\n cursor: help;\n user-select: none;\n}\n.pccp_color_f_wrap input[type=color] {\n -webkit-appearance: none;\n padding: 0;\n width: 110%;\n height: 110%;\n transform: translate(-5%, -5%);\n cursor: pointer;\n border: none;\n}\n.pccp_color_f_wrap input:focus {\n outline: none;\n}\n.pccp_color_f_wrap input::-webkit-color-swatch-wrapper {\n padding: 0;\n}\n.pccp_color_f_wrap input::-webkit-color-swatch {\n border: none;\n}\n.pccp_color_f_wrap input[name=hex] {\n width: 70px;\n height: 25px;\n text-align: center;\n}\n.pccp_color_f_wrap {\n margin-top: 17px;\n}\n.pccp_opacity_f_wrap {\n margin-top: 10px;\n}\n.pccp_deg_f_wrap input[type=range],\n.pccp_opacity_f_wrap input[type=range] {\n width: calc(100% - 25px - 70px);\n height: 25px;\n}\n.pccp_deg_f_wrap input[type="number"],\n.pccp_opacity_f_wrap input[type="number"] {\n\twidth: 53px;\n\theight: 25px;\n\ttext-align: center;\n}\n.pccp_deg_f_wrap input[type=range],\n.pccp_opacity_f_wrap input[type=range] {\n -webkit-appearance: none;\n height: 5px;\n background: #d5d5d5;\n outline: none;\n border: none;\n}\n.pccp_deg_f_wrap input::-webkit-slider-thumb,\n.pccp_opacity_f_wrap input::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 17px;\n height: 17px;\n background: #888;\n cursor: pointer;\n border-radius: 50%;\n border: 1px solid #aaa;\n box-shadow: 0 0 0 5px #fff inset, 0 0 2px rgba(0,0,0,.15);\n}\n.pccp_deg_f_wrap input::-moz-range-thumb,\n.pccp_opacity_f_wrap input::-moz-range-thumb {\n width: 15px;\n height: 15px;\n background: #888;\n cursor: pointer;\n border-radius: 50%;\n border: 1px solid #aaa;\n box-shadow: 0 0 0 5px #fff inset, 0 0 2px rgba(0,0,0,.15);\n}\n\n#lc-color-picker.lccp_dark_theme {\n background: #333;\n border-color: #505050;\n}\n.lccp_dark_theme img {\n\tfilter: invert(100%);\n opacity: .85;\n}\n.lccp_dark_theme .lccp_gradient_range img {\n\topacity: .6;\n}\n.lccp_dark_theme .lccp_gradient_range img:hover {\n opacity: .8;\n}\n.lccp_dark_theme .lccp_gradient {\n border-color: #626262;\n}\n.lccp_dark_theme .lccp_sel_step {\n\tbox-shadow: 0 0 2px 1px orange;\n}\n#lc-color-picker.lccp_dark_theme hr {\n\tborder-color: #727272;\n}\n.lccp_dark_theme .pccp_deg_f_wrap input,\n.lccp_dark_theme .pccp_color_f_wrap input,\n.lccp_dark_theme .pccp_opacity_f_wrap input {\n\tborder-color: #777;\n\tbackground: #505050;\n\tcolor: #f3f3f3;\n}\n.lccp_dark_theme input[type=range] {\n background: #808080;\n}\n</style>'))},this.init()};const maybe_querySelectorAll=selector=>{if("string"!=typeof selector){if(selector instanceof Element)return[selector];{let to_return=[];for(const obj of selector)obj instanceof Element&&to_return.push(obj);return to_return}}return(selector.match(/(#[0-9][^\s:,]*)/g)||[]).forEach((function(n){selector=selector.replace(n,'[id="'+n.replace("#","")+'"]')})),document.querySelectorAll(selector)}}(),"object"==typeof exports&&"undefined"!=typeof module?module.exports=factory():"function"==typeof define&&define.amd?define("block_dash/lc_color_picker",factory):(global="undefined"!=typeof globalThis?globalThis:global||self).Chart=factory();//# sourceMappingURL=lc_color_picker.min.js.map