/**
 * @copyright	Copyright (C) 2011 Simplify Your Web, Inc. All rights reserved.
 * @license	GNU General Public License version 3 or later; see LICENSE.txt
 */ class ColourPicker extends HTMLElement{constructor(){super(),this.swatch="",this.input="",this.panel=""}connectedCallback(){this.swatch=document.createElement("colour-swatch"),this.panel=document.createElement("div"),this.panel.classList.add("panel"),this.appendChild(this.swatch),this.appendChild(this.panel),this.init()}init(){this.input=this.querySelector("input[type=text]");let t=""!==this.input.value?this.input.value:"#fff",e=null!==this.input.getAttribute("data-color-format")?this.input.getAttribute("data-color-format"):"hex",i=null;"rgba"==e||"hex8"==e?(this.querySelector(".panel").style.width="230px",i=new iro.ColorPicker(this.panel,{width:150,layoutDirection:"horizontal",color:t,layout:[{component:iro.ui.Box},{component:iro.ui.Slider,options:{id:"hue-slider",sliderType:"hue"}},{component:iro.ui.Slider,options:{sliderType:"alpha"}},]})):"rgb"==e||"hex"==e?i=new iro.ColorPicker(this.panel,{width:150,layoutDirection:"horizontal",color:t,layout:[{component:iro.ui.Box},{component:iro.ui.Slider,options:{id:"hue-slider",sliderType:"hue"}}]}):"hsla"==e?(this.querySelector(".panel").style.width="230px",i=new iro.ColorPicker(this.panel,{width:150,layoutDirection:"horizontal",color:t,layout:[{component:iro.ui.Wheel},{component:iro.ui.Slider,options:{sliderType:"value"}},{component:iro.ui.Slider,options:{sliderType:"alpha"}},]})):i=new iro.ColorPicker(this.panel,{width:150,layoutDirection:"horizontal",color:t}),i.on(["color:change"],t=>{switch(e){case"rgb":this.input.value=t.rgbString,this.swatch.style.backgroundColor=t.rgbString;break;case"rgba":this.input.value=t.rgbaString,this.swatch.style.backgroundColor=t.rgbaString;break;case"hsl":this.input.value=t.hslString,this.swatch.style.backgroundColor=t.hslString;break;case"hsla":this.input.value=t.hslaString,this.swatch.style.backgroundColor=t.hslaString;break;case"hex8":this.input.value=t.hex8String,this.swatch.style.backgroundColor=t.hex8String;break;default:this.input.value=t.hexString,this.swatch.style.backgroundColor=t.hexString}this.input.dispatchEvent(new Event("input",{bubbles:!0}))}),i.on(["color:init"],t=>{this.swatch.style.backgroundColor=this.input.value}),this.input.addEventListener("change",({target:t})=>{switch(e){case"rgb":i.color.rgbString=t.value;break;case"rgba":i.color.rgbaString=t.value;break;case"hsl":i.color.hslString=t.value;break;case"hsla":i.color.hslaString=t.value;break;case"hex8":i.color.hex8String=t.value;break;default:i.color.hexString=t.value}}),this.swatch.addEventListener("click",()=>{this.input.focus()}),this.input.addEventListener("focus",()=>{this.panel.classList.contains("is-open")||this.panel.classList.add("is-open")}),this.input.addEventListener("blur",()=>{this.panel.classList.remove("is-open")})}}customElements.define("colour-picker",ColourPicker);