import{html as e,css as t}from"lit";import{iconRemixDeleteBinFill as s,iconRemixAddFill as a}from"./assets/cc-remix.icons.js";import{LostFocusController as i}from"./controllers/lost-focus-controller.js";import{focusBySelector as l}from"./lib/focus-helper.js";import{C as n}from"./form-utils-4685920e.js";import{i18n as r}from"./translation.js";import"./cc-button.js";import"./cc-input-text.js";class d extends n{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 i(this,".element",(({suggestedElement:e})=>{l(e,".delete-button",(()=>{this._focusLastFieldInput()}))})),this._renderElement=this._renderElement.bind(this)}static decodeFormData(e,t){const s=e[t];return(Array.isArray(s)?s:[s]).map((e=>JSON.parse(e)))}focus(e){this._focusLastFieldInput(e)}_getFormControlElement(){return this._getLastFieldInput()}_getErrorElement(){return null}_getFormControlData(){const e=new FormData;return this.value.forEach((t=>{e.append(this.name,JSON.stringify(t))})),e}_getLastFieldInput(){const e=this.shadowRoot.querySelectorAll(".input-field");return e[e.length-1]}_focusLastFieldInput(e){this._getLastFieldInput().focus(e)}async _onAdd(){this.value=[...this.value,{field:"",value:""}],await this.updateComplete,this._focusLastFieldInput()}_onDelete(e){const t=Number.parseInt(e.target.dataset.index);this.value=this.value.filter(((e,s)=>s!==t))}_onFieldInput(e){const t=Number.parseInt(e.target.dataset.index);this.value=this.value.map(((s,a)=>a===t?{field:e.target.value,value:s.value}:s))}_onValueInput(e){const t=Number.parseInt(e.target.dataset.index);this.value=this.value.map(((s,a)=>a===t?{field:s.field,value:e.target.value}:s))}willUpdate(e){e.has("value")&&(null!=this.value&&0!==this.value.length||(this.value=[{field:"",value:""}]))}render(){return e`
      <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(t,i){const l=this.value.length,n=i===l-1,d=1===l;return e`
      <div class="element">
        <cc-input-text
          class="input-field"
          label=${r("cc-kv-hash-input.element.field-input")}
          .value=${t.field}
          hidden-label
          data-index=${i}
          ?disabled=${this.disabled}
          ?readonly=${this.readonly}
          @cc-input=${this._onFieldInput}
          @cc-request-submit=${this._onAdd}
        ></cc-input-text>
        <cc-input-text
          label=${r("cc-kv-hash-input.element.value-input")}
          .value=${t.value}
          hidden-label
          data-index=${i}
          ?disabled=${this.disabled}
          ?readonly=${this.readonly}
          multi
          @cc-input=${this._onValueInput}
          @cc-request-submit=${this._onAdd}
        ></cc-input-text>

        ${d?"":e`
              <cc-button
                class="delete-button"
                .icon=${s}
                a11y-name=${r("cc-kv-hash-input.element.delete",{index:i})}
                data-index=${i}
                ?disabled=${this.disabled||this.readonly}
                hide-text
                danger
                outlined
                @cc-click=${this._onDelete}
              ></cc-button>
            `}
        ${n?e`
              <cc-button
                .icon=${a}
                a11y-name=${r("cc-kv-hash-input.element.add")}
                data-index=${i}
                ?disabled=${this.disabled||this.readonly}
                hide-text
                outlined
                @cc-click=${this._onAdd}
              ></cc-button>
            `:e`<div></div>`}
      </div>
    `}static get styles(){return[t`
        :host {
          display: block;
        }

        .elements {
          display: grid;
          gap: 0.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",d);export{d as CcKvHashInput};
//# sourceMappingURL=cc-kv-hash-input.js.map
