import{LitElement as t,html as e,css as i}from"lit";import{formSubmit as s}from"./lib/form/form-submit-directive.js";import{i18n as o}from"./translation.js";import"./cc-button.js";import"./cc-input-text.js";import{CcKvStringValueUpdateEvent as n}from"./components/cc-kv-string-editor/cc-kv-string-editor.events.js";class r extends t{static get properties(){return{disabled:{type:Boolean},state:{type:Object},_value:{type:String,state:!0}}}constructor(){super(),this.disabled=!1,this.state={type:"loading"},this._value="",this._onFormSubmit=this._onFormSubmit.bind(this)}_onValueInput(t){this._value=t.detail}_onFormSubmit(t){"loading"!==this.state.type&&this.dispatchEvent(new n(t.value))}willUpdate(t){t.has("state")&&(this._value="loading"===this.state.type?"":this.state.value)}render(){const t="loading"===this.state.type,i="saving"===this.state.type,n=this.disabled;return e`<form ${s(this._onFormSubmit)}>
      <cc-input-text
        name="value"
        label=${o("cc-kv-string-editor.form.value")}
        .skeleton=${t}
        ?disabled=${n}
        ?readonly=${i}
        clipboard
        multi
        .resetValue=${this._value}
        .value=${this._value}
        @cc-input=${this._onValueInput}
      ></cc-input-text>
      <div class="buttons">
        <cc-button type="reset" .skeleton=${t} .disabled=${n||i}>
          ${o("cc-kv-string-editor.form.reset")}
        </cc-button>
        <cc-button type="submit" primary .skeleton=${t} .disabled=${n} .waiting=${i}>
          ${o("cc-kv-string-editor.form.save")}
        </cc-button>
      </div>
    </form>`}static get styles(){return[i`
        :host {
          display: block;
        }

        .buttons {
          display: flex;
          gap: 0.5em;
          justify-content: end;
          margin-top: 1em;
        }
      `]}}window.customElements.define("cc-kv-string-editor-beta",r);export{r as CcKvStringEditor};
//# sourceMappingURL=cc-kv-string-editor.js.map
