globalThis.Component.register("ColorPicker",e=>{e.state=globalThis.NewState({value:"#000000"}),e.addEventListener("bind",t=>{e.state.value=t.detail||"#000000"}),Object.defineProperty(e,"value",{get:()=>e.state.value,set:t=>{e.state.value=t||"#000000"}}),e.updateValue=t=>{e.state.value=t,e.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:t}))}},globalThis.Util.makeDom('\n<div class="d-flex align-items-center gap-2 w-100 h-100">\n  <input type="color" class="form-control form-control-color flex-shrink-0" style="width: 3rem; padding: 0.25rem" $bind="this.state.value" $onchange="this.updateValue(thisNode.value)">\n  <input type="text" class="form-control" $bind="this.state.value" $onchange="this.updateValue(thisNode.value)">\n</div>\n')),globalThis.AutoForm&&globalThis.AutoForm.register("ColorPicker");