"use strict";(self.webpackChunkdotcms_ui=self.webpackChunkdotcms_ui||[]).push([[3277],{83277:(f,n,a)=>{a.r(n),a.d(n,{dot_key_value:()=>d});var o=a(15861),s=a(55956),t=a(26184),m=a(47628);const u=({label:e,value:i})=>({key:e,value:i}),d=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.duplicatedKeyMessage="The key already exists",this.disabled=!1,this.uniqueKeys=!1,this.formKeyPlaceholder=void 0,this.formValuePlaceholder=void 0,this.formKeyLabel=void 0,this.formValueLabel=void 0,this.formAddButtonLabel=void 0,this.listDeleteLabel=void 0,this.whiteListEmptyOptionLabel=void 0,this.whiteList=void 0,this.errorExistingKey=void 0,this.status=void 0,this.items=[]}valueWatch(){this.value=(0,m.c)(this,"value","string");let e="";this.value&&(e=this.value.replace(/&lt;/gi,"<").replace(/[|]/gi,"&#124;").replace(/&#x22;:&#x22;/gi,"|").replace(/&#x22;,&#x22;/gi,",").replace(/{&#x22;/gi,"").replace(/&#x22;}/gi,"").replace(/&#x22;/gi,'"')),this.items=(0,t.f)(e).map(u)}reset(){var e=this;return(0,o.Z)(function*(){e.items=[],e.value="",e.status=(0,t.g)(e.isValid()),e.emitChanges()})()}deleteItemHandler(e){e.stopImmediatePropagation(),this.items=this.items.filter((i,h)=>h!==e.detail),this.errorExistingKey=!1,this.refreshStatus(),this.emitChanges()}reorderItemsHandler(e){e.stopImmediatePropagation(),this.items=[{key:" ",value:""}];const i=this.el.querySelectorAll(".key-value-table-wc__key"),h=this.el.querySelectorAll(".key-value-table-wc__value");let r="";for(let l=0,c=i.length;l<c;l++)r+=`${i[l].textContent.replace(/,/gi,"&#44;").replace(/[|]/gi,"&#124;")}|${h[l].textContent.replace(/,/gi,"&#44;").replace(/[|]/gi,"&#124;")},`;setTimeout(()=>{this.items=[...(0,t.f)(r.substring(0,r.length-1)).map(u)],this.refreshStatus(),this.emitChanges()},100)}addItemHandler({detail:e}){this.refreshStatus(),this.errorExistingKey=this.items.some(i=>i.key===e.key),(this.uniqueKeys&&!this.errorExistingKey||!this.uniqueKeys)&&(this.items=[...this.items,e],this.emitChanges())}keyChangedHandler(){this.errorExistingKey&&(this.errorExistingKey=!1)}componentWillLoad(){this.validateProps(),this.setOriginalStatus(),this.emitStatusChange()}render(){const e=(0,t.a)(this.status,this.isValid()&&!this.errorExistingKey,this.required);return(0,s.h)(s.H,{class:Object.assign({},e)},(0,s.h)("dot-label",{"aria-describedby":(0,t.h)(this.hint),tabIndex:this.hint?0:null,label:this.label,required:this.required,name:this.name},this.disabled?"":this.getKeyValueForm(),(0,s.h)("key-value-table",{onClick:i=>{i.preventDefault()},"button-label":this.listDeleteLabel,disabled:this.isDisabled(),items:this.items})),(0,t.c)(this.hint),(0,t.b)(this.showErrorMessage(),this.getErrorMessage()))}getKeyValueForm(){return(0,s.h)("key-value-form",{onLostFocus:this.blurHandler.bind(this),"add-button-label":this.formAddButtonLabel,disabled:this.isDisabled(),"empty-dropdown-option-label":this.whiteListEmptyOptionLabel,"key-label":this.formKeyLabel,"key-placeholder":this.formKeyPlaceholder,"value-label":this.formValueLabel,"value-placeholder":this.formValuePlaceholder,"white-list":this.whiteList})}isDisabled(){return this.disabled||null}blurHandler(){this.status.dotTouched||(this.status=(0,t.u)(this.status,{dotTouched:!0}),this.emitStatusChange())}validateProps(){this.valueWatch()}setOriginalStatus(){this.status=(0,t.g)(this.isValid())}isValid(){return!(this.required&&!this.items.length)}showErrorMessage(){return this.getErrorMessage()&&!this.status.dotPristine}getErrorMessage(){let e="";return this.errorExistingKey?e=this.duplicatedKeyMessage:this.isValid(),e}refreshStatus(){this.status=(0,t.u)(this.status,{dotTouched:!0,dotPristine:!1,dotValid:this.isValid()})}emitStatusChange(){this.dotStatusChange.emit({name:this.name,status:this.status})}emitValueChange(){const e=(0,t.d)(this.items);this.dotValueChange.emit({name:this.name,value:e})}emitChanges(){this.emitStatusChange(),this.emitValueChange()}get el(){return(0,s.g)(this)}static get watchers(){return{value:["valueWatch"]}}};d.style=""}}]);