import{LitElement as e,html as t,css as n}from"lit";import{classMap as l}from"lit/directives/class-map.js";import{dispatchCustomEvent as i}from"./lib/events.js";import{skeletonStyles as a}from"./styles/skeleton.js";import{i18n as s}from"./translation.js";import"./cc-button.js";import"./cc-input-text.js";class o extends e{static get properties(){return{deleted:{type:Boolean},disabled:{type:Boolean},edited:{type:Boolean},name:{type:String},new:{type:Boolean},readonly:{type:Boolean},skeleton:{type:Boolean},value:{type:String}}}constructor(){super(),this.deleted=!1,this.disabled=!1,this.edited=!1,this.name=null,this.new=!1,this.readonly=!1,this.skeleton=!1,this.value=""}_onInput({detail:e}){this.value=e,i(this,"input",{name:this.name,value:this.value})}_onDelete(){i(this,"delete",{name:this.name})}_onKeep(){i(this,"keep",{name:this.name})}render(){return t`<div class=wrapper><span class="${l({deleted:this.deleted})} name"><span class=${l({skeleton:this.skeleton})}>${this.name}</span></span><div class=input-btn><cc-input-text label=${s("cc-env-var-input.value-label",{variableName:this.name})} hidden-label class=value name=value value=${this.value} multi clipboard ?disabled=${this.deleted||this.disabled} ?skeleton=${this.skeleton} ?readonly=${this.readonly} placeholder=${s("cc-env-var-input.value-placeholder")} @cc-input-text:input=${this._onInput}></cc-input-text>${this.readonly?"":t`<cc-button ?skeleton=${this.skeleton} ?disabled=${this.disabled} ?danger=${!this.deleted} ?outlined=${!this.deleted} @cc-button:click=${this.deleted?this._onKeep:this._onDelete}>${this.deleted?s("cc-env-var-input.keep-button"):s("cc-env-var-input.delete-button")}</cc-button>`}</div></div>`}static get styles(){return[a,n`:host{display:block}.wrapper{display:flex;flex-wrap:wrap;gap:.5em}.name{box-sizing:border-box;display:inline-block;flex:1 1 17em;font-family:var(--cc-ff-monospace,monospace);font-size:.875em;line-height:1.6em;padding-top:.35em;word-break:break-all}.name.deleted{text-decoration:line-through}.skeleton{background-color:#bbb}.input-btn{display:flex;flex:2 1 27em;flex-wrap:wrap;gap:.5em}.value{align-self:self-start;flex:100 1 20em}cc-button{align-self:flex-start;flex:1 1 6em;white-space:nowrap}cc-input-text{--cc-input-font-family:var(--cc-ff-monospace, monospace)}`]}}window.customElements.define("cc-env-var-input",o);export{o as CcEnvVarInput};
//# sourceMappingURL=cc-env-var-input.js.map
