"use strict";(self.webpackChunkdotcms_ui=self.webpackChunkdotcms_ui||[]).push([[4502],{34502:(o,h,i)=>{i.r(h),i.d(h,{dot_textarea:()=>u});var l=i(15861),s=i(55956),t=i(26184),n=i(47628),r=i(50394);const u=class{constructor(e){(0,s.r)(this,e),this.dotValueChange=(0,s.c)(this,"dotValueChange",7),this.dotStatusChange=(0,s.c)(this,"dotStatusChange",7),this.value="",this.name="",this.label="",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.status=void 0}reset(){var e=this;return(0,l.Z)(function*(){e.value="",e.status=(0,t.g)(e.isValid()),e.emitStatusChange(),e.emitValueChange()})()}componentWillLoad(){this.value=this.value||"",this.validateProps(),this.status=(0,t.g)(this.isValid()),this.emitStatusChange()}componentDidLoad(){const e=this.el.querySelector("textarea");setTimeout(()=>{const a=(0,r.g)(Array.from(this.el.attributes),[]);(0,r.s)(e,a)},0)}regexCheckWatch(){this.regexCheck=(0,n.c)(this,"regexCheck")}valueWatch(){this.value=this.value||""}render(){const e=(0,t.a)(this.status,this.isValid(),this.required);return(0,s.h)(s.H,{class:Object.assign({},e)},(0,s.h)("dot-label",{label:this.label,required:this.required,name:this.name},(0,s.h)("textarea",{"aria-describedby":(0,t.h)(this.hint),class:(0,t.j)(this.status.dotValid),id:(0,t.k)(this.name),name:this.name,value:this.value,required:this.getRequiredAttr(),onInput:a=>this.setValue(a),onBlur:()=>this.blurHandler(),disabled:this.getDisabledAtt()})),(0,t.c)(this.hint),(0,t.b)(this.shouldShowErrorMessage(),this.getErrorMessage()))}validateProps(){this.regexCheckWatch()}getDisabledAtt(){return this.disabled||null}getRequiredAttr(){return!!this.required||null}isValid(){return!this.isValueRequired()&&this.isRegexValid()}isValueRequired(){return this.required&&!this.value.length}isRegexValid(){return!this.regexCheck||!this.value.length||new RegExp(this.regexCheck,"ig").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,t.u)(this.status,{dotTouched:!0}),this.emitStatusChange())}setValue(e){this.value=e.target.value.toString(),this.status=(0,t.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"],value:["valueWatch"]}}};u.style="input{outline:none}.dot-field__input--error{border:1px solid red}"}}]);