import{r as t,c as s,h as i,H as h,a as e}from"./p-bace3d90.js";const o=class{constructor(i){t(this,i),this.formEvent=s(this,"formEvent",7),this.type="text",this.autocomplete="off",this.required=!1,this.checked=!1,this.autofocus=!1,this.w=12,this.bg="gray-100",this.hoverBg="gray-300",this.focusBg="gray-300",this.bWidth=0,this.p=4,this.focusOutline="none",this.extraProps={}}async componentWillLoad(){await this.computeStyles()}async computeStyles(){const t=await(await import("./p-a272a252.js").then((function(t){return t.s}))).calculateStyles(this);this.hash=t}onChange(t){const s=t.currentTarget;this.inputValue=s.value,"checkbox"==this.type&&(this.inputValue=!!s.checked),this.formEvent.emit({name:this.formId,key:this.name,type:this.type,value:this.inputValue})}componentWillRender(){"checkbox"==this.type&&(this.extraProps.checked=!!this.checked||null)}render(){const t={id:this._id,name:this.name,type:this.type,formId:this.formId,autocomplete:this.autocomplete,required:this.required,placeholder:this.placeholder,autofocus:this.autofocus},s=Object.keys(t).filter((s=>null!==t[s])).reduce(((s,i)=>(s[i]=t[i],s)),{});return i(h,{style:{display:"block",width:"100%"}},i("corejam-box",{flex:!0,direction:"col",w:"12",mb:3},this.label&&i("corejam-box",{mb:4},i("label",{htmlFor:this.name},i("corejam-type",{size:"sm",color:"gray-500"},this.label))),i("input",Object.assign({},s,this.extraProps,{class:this.hash,"data-cy":this.formId+"-"+this.name,value:this.value,onInput:t=>this.onChange(t)}))))}get el(){return e(this)}};export{o as corejam_form_input}