import{validateName as e}from"@clevercloud/client/esm/utils/env-vars.js";import{LitElement as t,html as a,css as i}from"lit";import{dispatchCustomEvent as c}from"./lib/events.js";import{linkStyles as s}from"./templates/cc-link/cc-link.js";import{i18n as n}from"./translation.js";import"./cc-button.js";import"./cc-input-text.js";import"./cc-notice.js";class r extends t{static get properties(){return{disabled:{type:Boolean},validationMode:{type:String,attribute:"validation-mode"},variablesNames:{type:Array,attribute:"variables-names"},_variableName:{type:String,state:!0},_variableValue:{type:String,state:!0}}}constructor(){super(),this.disabled=!1,this.validationMode="simple",this.variablesNames=[],this._variableName="",this._variableValue=""}reset(){this._variableName="",this._variableValue=""}_onNameInput({detail:e}){this._variableName=e}_onValueInput({detail:e}){this._variableValue=e}_onSubmit(){c(this,"create",{name:this._variableName,value:this._variableValue}),this.reset();const e=this.shadowRoot.querySelector("cc-input-text.name");e?.focus()}_onRequestSubmit(e,t){e.stopPropagation(),t||this._onSubmit()}render(){const t=!e(this._variableName,"simple"),i=!e(this._variableName,"strict"),c=this.variablesNames.includes(this._variableName),s="strict"===this.validationMode?i||c:t||c;return a`<div class=inline-form><cc-input-text label=${n("cc-env-var-create.name.label")} class=name name=name value=${this._variableName} ?disabled=${this.disabled} @cc-input-text:input=${this._onNameInput} @cc-input-text:requestimplicitsubmit=${e=>this._onRequestSubmit(e,s)}></cc-input-text><div class=input-btn><cc-input-text label=${n("cc-env-var-create.value.label")} class=value name=value value=${this._variableValue} multi ?disabled=${this.disabled} @cc-input-text:input=${this._onValueInput} @cc-input-text:requestimplicitsubmit=${e=>this._onRequestSubmit(e,s)}></cc-input-text><cc-button primary ?disabled=${s||this.disabled} @cc-button:click=${this._onSubmit}>${n("cc-env-var-create.create-button")}</cc-button></div></div>${i&&"strict"===this.validationMode&&""!==this._variableName?a`<cc-notice intent=warning><div slot=message>${n("cc-env-var-create.errors.invalid-name",{name:this._variableName})}</div></cc-notice>`:""} ${i&&t&&"strict"!==this.validationMode&&""!==this._variableName?a`<cc-notice intent=warning><div slot=message>${n("cc-env-var-create.errors.invalid-name",{name:this._variableName})}</div></cc-notice>`:""} ${i&&!t&&"strict"!==this.validationMode&&""!==this._variableName?a`<cc-notice intent=info><div slot=message>${n("cc-env-var-create.info.java-prop",{name:this._variableName})}</div></cc-notice>`:""} ${c?a`<cc-notice intent=warning><div slot=message>${n("cc-env-var-create.errors.already-defined-name",{name:this._variableName})}</div></cc-notice>`:""}`}static get styles(){return[s,i`:host{display:block}.inline-form{display:flex;flex-wrap:wrap;gap:.5em}.name{flex:1 1 15em}.input-btn{display:flex;flex:2 1 27em;flex-wrap:wrap;gap:1em .5em}.value{flex:100 1 20em}cc-input-text{--cc-input-font-family:var(--cc-ff-monospace, monospace)}cc-button{align-self:flex-start;flex:1 1 6em;margin-top:auto;white-space:nowrap}cc-notice{margin-top:1em}cc-notice code{background-color:var(--cc-color-bg-neutral,#eee);border-radius:var(--cc-border-radius-default,.25em);font-family:var(--cc-ff-monospace,monospace);padding:.15em .3em}`]}}window.customElements.define("cc-env-var-create",r);export{r as CcEnvVarCreate};
//# sourceMappingURL=cc-env-var-create.js.map
