"use strict";(self.webpackChunkdotcms_ui=self.webpackChunkdotcms_ui||[]).push([[5814],{35814:(c,h,i)=>{i.r(h),i.d(h,{dot_multi_select:()=>u});var n=i(15861),e=i(55956),s=i(26184),o=i(47628),l=i(50394);const u=class{constructor(t){(0,e.r)(this,t),this.dotValueChange=(0,e.c)(this,"dotValueChange",7),this.dotStatusChange=(0,e.c)(this,"dotStatusChange",7),this._dotTouched=!1,this._dotPristine=!0,this.value="",this.name="",this.label="",this.hint="",this.options="",this.required=!1,this.requiredMessage="This field is required",this.disabled=!1,this.size="3",this._options=void 0,this.status=void 0}componentWillLoad(){this.validateProps(),this.emitInitialValue(),this.status=(0,s.g)(this.isValid()),this.emitStatusChange()}componentDidLoad(){const t=this.el.querySelector("select");setTimeout(()=>{const a=(0,l.g)(Array.from(this.el.attributes),[]);(0,l.s)(t,a)},0)}optionsWatch(){const t=(0,o.c)(this,"options");this._options=(0,s.f)(t)}reset(){var t=this;return(0,n.Z)(function*(){t.value="",t.status=(0,s.g)(t.isValid()),t.emitInitialValue(),t.emitStatusChange()})()}render(){const t=(0,s.a)(this.status,this.isValid(),this.required);return(0,e.h)(e.H,{class:Object.assign({},t)},(0,e.h)("dot-label",{label:this.label,required:this.required,name:this.name},(0,e.h)("select",{multiple:!0,"aria-describedby":(0,s.h)(this.hint),size:+this.size,class:(0,s.j)(this.status.dotValid),id:(0,s.k)(this.name),disabled:this.shouldBeDisabled(),onChange:()=>this.setValue()},this._options.map(a=>(0,e.h)("option",{selected:this.value===a.value||null,value:a.value},a.label)))),(0,s.c)(this.hint),(0,s.b)(!this.isValid(),this.requiredMessage))}validateProps(){this.optionsWatch()}shouldBeDisabled(){return!!this.disabled||null}setValue(){this.value=this.getValueFromMultiSelect(),this.status=(0,s.u)(this.status,{dotTouched:!0,dotPristine:!1,dotValid:this.isValid()}),this.emitValueChange(),this.emitStatusChange()}getValueFromMultiSelect(){const t=this.el.querySelectorAll("option:checked"),a=Array.from(t).map(d=>d.value);return Array.from(a).join(",")}emitInitialValue(){this.value||(this.value=this._options.length?this._options[0].value:"",this.emitValueChange())}emitStatusChange(){this.dotStatusChange.emit({name:this.name,status:this.status})}isValid(){return!this.required||!!this.value}emitValueChange(){this.dotValueChange.emit({name:this.name,value:this.value})}get el(){return(0,e.g)(this)}static get watchers(){return{options:["optionsWatch"]}}};u.style=""}}]);