import{html as t,css as e}from"lit";import{iconRemixDeleteBinFill as i,iconRemixAddFill as a}from"./assets/cc-remix.icons.js";import{LostFocusController as s}from"./controllers/lost-focus-controller.js";import{focusBySelector as n}from"./lib/focus-helper.js";import{C as l}from"./cc-form-control-element.abstract-aaa92b97.js";import{i18n as r}from"./translation.js";import"./cc-button.js";import"./cc-input-text.js";class u extends l{static get properties(){return{...super.properties,disabled:{type:Boolean},readonly:{type:Boolean},resetValue:{type:Array,attribute:"reset-value"},value:{type:Array}}}constructor(){super(),this.disabled=!1,this.readonly=!1,this.resetValue=[],this.value=[],new s(this,".element",(({suggestedElement:t})=>{n(t,".delete-button",(()=>{this._focusLastFieldInput()}))})),this._renderElement=this._renderElement.bind(this)}static decodeFormData(t,e){const i=t[e];return(Array.isArray(i)?i:[i]).map((t=>JSON.parse(t)))}focus(t){this._focusLastFieldInput(t)}_getFormControlElement(){return this._getLastFieldInput()}_getErrorElement(){return null}_getFormControlData(){const t=new FormData;return this.value.forEach((e=>{t.append(this.name,JSON.stringify(e))})),t}_getLastFieldInput(){const t=this.shadowRoot.querySelectorAll(".input-field");return t[t.length-1]}_focusLastFieldInput(t){this._getLastFieldInput().focus(t)}async _onAdd(){this.value=[...this.value,{field:"",value:""}],await this.updateComplete,this._focusLastFieldInput()}_onDelete(t){const e=Number.parseInt(t.target.dataset.index);this.value=this.value.filter(((t,i)=>i!==e))}_onFieldInput(t){const e=Number.parseInt(t.target.dataset.index);this.value=this.value.map(((i,a)=>a===e?{field:t.target.value,value:i.value}:i))}_onValueInput(t){const e=Number.parseInt(t.target.dataset.index);this.value=this.value.map(((i,a)=>a===e?{field:i.field,value:t.target.value}:i))}willUpdate(t){t.has("value")&&(null!=this.value&&0!==this.value.length||(this.value=[{field:"",value:""}]))}render(){return t`<div class=elements><span>${r("cc-kv-hash-input.header.field")}</span> <span class=element-last>${r("cc-kv-hash-input.header.value")}</span> ${this.value.map(this._renderElement)}</div>`}_renderElement(e,s){const n=this.value.length,l=s===n-1,u=1===n;return t`<div class=element><cc-input-text class=input-field label=${r("cc-kv-hash-input.element.field-input")} .value=${e.field} hidden-label data-index=${s} ?disabled=${this.disabled} ?readonly=${this.readonly} @cc-input-text:input=${this._onFieldInput} @cc-input-text:requestimplicitsubmit=${this._onAdd}></cc-input-text><cc-input-text label=${r("cc-kv-hash-input.element.value-input")} .value=${e.value} hidden-label data-index=${s} ?disabled=${this.disabled} ?readonly=${this.readonly} multi @cc-input-text:input=${this._onValueInput} @cc-input-text:requestimplicitsubmit=${this._onAdd}></cc-input-text>${u?"":t`<cc-button class=delete-button .icon=${i} a11y-name=${r("cc-kv-hash-input.element.delete",{index:s})} data-index=${s} ?disabled=${this.disabled||this.readonly} hide-text danger outlined @cc-button:click=${this._onDelete}></cc-button>`} ${l?t`<cc-button .icon=${a} a11y-name=${r("cc-kv-hash-input.element.add")} data-index=${s} ?disabled=${this.disabled||this.readonly} hide-text outlined @cc-button:click=${this._onAdd}></cc-button>`:t`<div></div>`}</div>`}static get styles(){return[e`:host{display:block}.elements{display:grid;gap:.35em;grid-template-columns:1fr 1fr auto auto}.element-last{grid-column:2/-1}.element{display:contents}.input-field{align-self:start}cc-button{margin-top:2px}`]}}window.customElements.define("cc-kv-hash-input-beta",u);export{u as CcKvHashInput};
//# sourceMappingURL=cc-kv-hash-input.js.map
