radh-ui/dist/radh-ui/p-db487324.entry.js

Stencil Component Starter

import{r as i,c as t,h as e}from"./p-1a9f3501.js";class r{constructor(e){i(this,e),this.defaultValue="#ff0000",this.resettable=!1,this.colorChanged=t(this,"colorChanged",7)}componentWillLoad(){this.setValue(this.defaultValue)}handleChange(i){this.setValue(i.target.value)}setValue(i){this.value=i,this.colorChanged.emit(this.value)}reset(){this.setValue(this.defaultValue)}renderResetButton(){if(this.resettable)return e("radh-button",{onClick:()=>this.reset()},"X")}render(){return e("div",{class:"color-picker"},e("input",{type:"color",value:this.value,onChange:i=>this.handleChange(i)}),e("span",null,this.value),this.renderResetButton())}}r.style=".color-picker{border:2px solid #afafaf;display:-ms-inline-flexbox;display:inline-flex;max-width:175px;-ms-flex-align:center;align-items:center;padding:0;margin:0}.color-picker input{cursor:pointer;border-width:0;width:50px;height:30px}.color-picker span{padding:0 10px 0 10px;width:70px;text-transform:uppercase;color:#afafaf}.color-picker button{border:none;border-left:1px solid #afafaf;font-size:0.9em;width:30px;height:25px}";export{r as radh_color_picker}