"use strict";(self.webpackChunkdotcms_ui=self.webpackChunkdotcms_ui||[]).push([[9163],{19163:(o,a,i)=>{i.r(a),i.d(a,{dot_textfield:()=>l});var n=i(15861),s=i(55956),e=i(26184),r=i(47628),u=i(50394);const l=class{constructor(t){(0,s.r)(this,t),this.dotValueChange=(0,s.c)(this,"dotValueChange",7),this.dotStatusChange=(0,s.c)(this,"dotStatusChange",7),this.value="",this.name="",this.label="",this.placeholder="",this.hint="",this.required=!1,this.requiredMessage="This field is required",this.validationMessage="The field doesn't comply with the specified format",this.disabled=!1,this.regexCheck="",this.type="text",this.status=void 0}reset(){var t=this;return(0,n.Z)(function*(){t.value="",t.status=(0,e.g)(t.isValid()),t.emitStatusChange(),t.emitValueChange()})()}componentWillLoad(){this.validateProps(),this.status=(0,e.g)(this.isValid()),this.emitStatusChange()}componentDidLoad(){const t=this.el.querySelector("input");setTimeout(()=>{const h=(0,u.g)(Array.from(this.el.attributes),[]);(0,u.s)(t,h)},0)}regexCheckWatch(){this.regexCheck=(0,r.c)(this,"regexCheck")}typeWatch(){this.type=(0,r.c)(this,"type")}render(){const t=(0,e.a)(this.status,this.isValid(),this.required);return(0,s.h)(s.H,{class:Object.assign({},t)},(0,s.h)("dot-label",{label:this.label,required:this.required,name:this.name},(0,s.h)("input",{"aria-describedby":(0,e.h)(this.hint),class:(0,e.j)(this.status.dotValid),disabled:this.disabled||null,id:(0,e.k)(this.name),onBlur:()=>this.blurHandler(),onInput:h=>this.setValue(h),placeholder:this.placeholder,required:this.required||null,type:this.type,value:this.value})),(0,e.c)(this.hint),(0,e.b)(this.shouldShowErrorMessage(),this.getErrorMessage()))}validateProps(){this.regexCheckWatch(),this.typeWatch()}isValid(){return!this.isValueRequired()&&this.isRegexValid()}isValueRequired(){return this.required&&!this.value}isRegexValid(){return!this.regexCheck||!this.value||new RegExp(this.regexCheck).test(this.value)}shouldShowErrorMessage(){return this.getErrorMessage()&&!this.status.dotPristine}getErrorMessage(){return this.isRegexValid()?this.isValid()?"":this.requiredMessage:this.validationMessage}blurHandler(){this.status.dotTouched||(this.status=(0,e.u)(this.status,{dotTouched:!0}),this.emitStatusChange())}setValue(t){this.value=t.target.value.toString(),this.status=(0,e.u)(this.status,{dotTouched:!0,dotPristine:!1,dotValid:this.isValid()}),this.emitValueChange(),this.emitStatusChange()}emitStatusChange(){this.dotStatusChange.emit({name:this.name,status:this.status})}emitValueChange(){this.dotValueChange.emit({name:this.name,value:this.value})}get el(){return(0,s.g)(this)}static get watchers(){return{regexCheck:["regexCheckWatch"],type:["typeWatch"]}}};l.style="input{outline:none}"}}]);