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

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

        .elements {
          display: grid;
          gap: 0.35em;
          grid-template-columns: 1fr auto auto;
        }

        .element-last {
          grid-column: 1 / -1;
        }

        .element {
          display: contents;
        }

        cc-button {
          margin-top: 2px;
        }
      `]}}window.customElements.define("cc-kv-list-input-beta",o);export{o as CcKvListInput};
//# sourceMappingURL=cc-kv-list-input.js.map
