import{LitElement as e,html as t,css as n}from"lit";import{classMap as s}from"lit/directives/class-map.js";import{skeletonStyles as a}from"./styles/skeleton.js";import{i18n as i}from"./translation.js";import"./cc-button.js";import"./cc-input-text.js";import{CcEnvVarChangeEvent as l,CcEnvVarDeleteEvent as o,CcEnvVarKeepEvent as p}from"./components/cc-env-var-input/cc-env-var-input.events.js";class c 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,this.dispatchEvent(new l({name:this.name,value:this.value}))}_onDelete(){this.dispatchEvent(new o({name:this.name}))}_onKeep(){this.dispatchEvent(new p({name:this.name}))}render(){return t`
      <div class="wrapper">
        <span class="name ${s({deleted:this.deleted})}"
          ><!-- no-whitespace
          --><span class=${s({skeleton:this.skeleton})}>${this.name}</span
          ><!-- no-whitespace
        --></span
        >

        <div class="input-btn">
          <cc-input-text
            label="${i("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=${i("cc-env-var-input.value-placeholder")}
            @cc-input=${this._onInput}
          ></cc-input-text>

          ${this.readonly?"":t`
                <cc-button
                  ?skeleton=${this.skeleton}
                  ?disabled=${this.disabled}
                  ?danger=${!this.deleted}
                  ?outlined=${!this.deleted}
                  @cc-click=${this.deleted?this._onKeep:this._onDelete}
                >
                  ${this.deleted?i("cc-env-var-input.keep-button"):i("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: 0.5em;
        }

        .name {
          box-sizing: border-box;
          display: inline-block;
          flex: 1 1 17em;
          font-family: var(--cc-ff-monospace, monospace);
          font-size: 0.875em;
          line-height: 1.6em;
          padding-top: 0.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: 0.5em;
        }

        .value {
          align-self: self-start;
          /* 100 seems weird but it is necessary */
          /* it helps to have a button that almost does not grow except when it wraps on its own line */
          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",c);export{c as CcEnvVarInput};
//# sourceMappingURL=cc-env-var-input.js.map
