import{LitElement as e,html as t,css as a}from"lit";import{repeat as i}from"lit/directives/repeat.js";import{dispatchCustomEvent as s}from"./lib/events.js";import{i18n as n}from"./translation.js";import"./cc-env-var-create.js";import"./cc-env-var-input.js";const r=[{name:"VARIABLE_ONE",value:""},{name:"VARIABLE_FOOBAR",value:""},{name:"VARIABLE_PORT",value:""}];class l extends e{static get properties(){return{disabled:{type:Boolean},readonly:{type:Boolean},state:{type:Object}}}constructor(){super(),this.disabled=!1,this.readonly=!1,this.state={type:"loading"}}_changeVariables(e){"loading"!==this.state.type&&(this.state={...this.state,variables:e},s(this,"change",e))}_onCreate({detail:e}){"loading"!==this.state.type&&this._changeVariables([...this.state.variables,e])}_onInput({detail:e}){"loading"!==this.state.type&&this._changeVariables(this.state.variables.map((t=>t.name===e.name?{...t,value:e.value}:t)))}_onDelete({detail:e}){"loading"!==this.state.type&&this._changeVariables(this.state.variables.filter((t=>t.name!==e.name||!t.isNew)).map((t=>t.name===e.name?{...t,isDeleted:!0}:t)))}_onKeep({detail:e}){"loading"!==this.state.type&&this._changeVariables(this.state.variables.map((t=>t.name===e.name?{...t,isDeleted:!1}:t)))}render(){const e="loading"===this.state.type,a="loaded"===this.state.type?this.state.variables:r,s=a.map((({name:e})=>e)),l="loaded"===this.state.type?this.state.validationMode:"simple";return t`${this.readonly?"":t`<cc-env-var-create ?disabled=${e||this.disabled} .validationMode=${l} .variablesNames=${s} @cc-env-var-create:create=${this._onCreate}></cc-env-var-create>`}<div class=message ?hidden=${0!==a.length}>${n("cc-env-var-editor-simple.empty-data")}</div>${i(a,(({name:e})=>e),(({name:a,value:i,isNew:s,isEdited:n,isDeleted:r})=>t`<cc-env-var-input name=${a} value=${i} ?new=${s} ?edited=${n} ?deleted=${r} ?skeleton=${e} ?disabled=${this.disabled} ?readonly=${this.readonly} @cc-env-var-input:input=${this._onInput} @cc-env-var-input:delete=${this._onDelete} @cc-env-var-input:keep=${this._onKeep}></cc-env-var-input>`))}`}static get styles(){return a`:host{display:grid;grid-gap:.5em}:host([hidden]){display:none}cc-env-var-create{background-color:var(--cc-color-bg-neutral);margin-bottom:.5em;margin-inline:-1em;padding:1em}.message{color:var(--cc-color-text-weak);font-style:italic;margin:.2em}`}}window.customElements.define("cc-env-var-editor-simple",l);export{l as CcEnvVarEditorSimple};
//# sourceMappingURL=cc-env-var-editor-simple.js.map
