"use strict";(self.webpackChunkdotcms_ui=self.webpackChunkdotcms_ui||[]).push([[3888],{73888:(u,h,a)=>{a.r(h),a.d(h,{dot_tags:()=>d});var r=a(15861),s=a(55956),i=a(26184),l=a(47628);const d=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.hint="",this.placeholder="",this.required=!1,this.requiredMessage="This field is required",this.disabled=!1,this.threshold=1,this.debounce=300,this.data=null,this.status=void 0}reset(){var t=this;return(0,r.Z)(function*(){t.value="",t.status=(0,i.g)(t.isValid()),t.emitChanges()})()}valueWatch(){this.value=(0,l.c)(this,"value","string")}componentWillLoad(){this.status=(0,i.g)(this.isValid()),this.validateProps(),this.emitStatusChange()}render(){const t=(0,i.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)("div",{"aria-describedby":(0,i.h)(this.hint),tabIndex:this.hint?0:null,class:"dot-tags__container"},(0,s.h)("dot-autocomplete",{class:(0,i.j)(this.status.dotValid),data:this.data,debounce:this.debounce,disabled:this.isDisabled(),onEnter:this.onEnterHandler.bind(this),onLostFocus:this.blurHandler.bind(this),onSelection:this.onSelectHandler.bind(this),placeholder:this.placeholder||null,threshold:this.threshold}),(0,s.h)("div",{class:"dot-tags__chips"},this.getValues().map(e=>(0,s.h)("dot-chip",{disabled:this.isDisabled(),label:e,onRemove:this.removeTag.bind(this)}))))),(0,i.c)(this.hint),(0,i.b)(this.showErrorMessage(),this.getErrorMessage()))}addTag(t){const e=this.getValues();e.includes(t)||(e.push(t),this.value=e.join(","),this.updateStatus(),this.emitChanges())}blurHandler(){this.status.dotTouched||(this.status=(0,i.u)(this.status,{dotTouched:!0}),this.emitStatusChange())}emitChanges(){this.emitStatusChange(),this.emitValueChange()}emitStatusChange(){this.dotStatusChange.emit({name:this.name,status:this.status})}emitValueChange(){this.dotValueChange.emit({name:this.name,value:this.value})}getErrorMessage(){return this.isValid()?"":this.requiredMessage}getValues(){return(0,i.e)(this.value)?this.value.split(","):[]}isDisabled(){return this.disabled||null}isValid(){return!this.required||this.required&&!!this.value}onEnterHandler({detail:t=""}){t.split(",").forEach(e=>{this.addTag(e.trim())})}onSelectHandler({detail:t}){const e=t.selection.value.replace(","," ").replace(/\s+/g," ");this.addTag(e)}removeTag(t){const e=this.getValues().filter(o=>o!==t.detail);this.value=e.join(","),this.updateStatus(),this.emitChanges()}showErrorMessage(){return this.getErrorMessage()&&!this.status.dotPristine}updateStatus(){this.status=(0,i.u)(this.status,{dotTouched:!0,dotPristine:!1,dotValid:this.isValid()})}validateProps(){this.valueWatch()}get el(){return(0,s.g)(this)}static get watchers(){return{value:["valueWatch"]}}};d.style="dot-tags .dot-tags__container{display:flex;align-items:flex-start;border:solid 1px lightgray}dot-tags .dot-tags__container dot-autocomplete{margin:0.5rem 1rem 0.5rem 0.5rem}dot-tags .dot-tags__container .dot-tags__chips{margin:0.5rem 1rem 0 0}dot-tags .dot-tags__container dot-chip{border:solid 1px #ccc;display:inline-block;margin:0 0.5rem 0.5rem 0;padding:0.2rem}dot-tags button{border:0}"}}]);