@clevercloud/components - npm Package Compare versions

Comparing version 1.0.0-alpha.9 to 1.0.0

dist/atoms/cc-button.js

@@ -1,2 +0,2 @@
-import{LitElement as o,css as t,html as e}from"lit-element";import{classMap as n}from"lit-html/directives/class-map.js";import{pulse as r}from"../styles/animations";export class CcButton extends o{static get properties(){return{disabled:{type:Boolean},primary:{type:Boolean},success:{type:Boolean},danger:{type:Boolean},outlined:{type:Boolean},skeleton:{type:Boolean}}}render(){const o={danger:this.danger&&!this.success&&!this.primary,success:!this.danger&&this.success&&!this.primary,primary:!this.danger&&!this.success&&this.primary,skeleton:this.skeleton};return o.simple=!o.danger&&!o.success&&!o.primary,o.outlined=this.outlined||o.simple,e`<button type="button" class="${n(o)}" .disabled="${this.disabled||this.skeleton}"><slot></slot></button>`}static get styles(){return[r,t`:host{box-sizing:border-box;display:inline-block;margin:.2rem;vertical-align:top}button{background:#fff;border:1px solid #000;display:block;font-size:14px;margin:0;padding:0 .5rem;border-radius:.15rem;cursor:pointer;font-weight:700;min-height:2rem;text-transform:uppercase;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%;background-color:var(--btn-color);border-color:var(--btn-color);color:#fff;box-shadow:0 0 0 0 rgba(255,255,255,0);transition:75ms ease-in-out}button.simple{--btn-color:hsl(210, 23%, 26%);border-color:#aaa}button.primary{--btn-color:hsl(213, 55%, 62%)}button.success{--btn-color:hsl(144, 56%, 43%)}button.danger{--btn-color:hsl(351, 70%, 47%)}button.outlined{background-color:#fff;color:var(--btn-color)}button:enabled:focus{box-shadow:0 0 0 .2em rgba(50,115,220,.25);outline:0}button:enabled:hover{box-shadow:0 1px 3px #888}button:enabled:active{box-shadow:none;outline:0}button:disabled{cursor:default;opacity:.5}button.skeleton{animation-direction:alternate;animation-duration:.5s;animation-iteration-count:infinite;animation-name:pulse;background-color:#aaa;border-color:#777;color:transparent;cursor:progress}@keyframes pulse{from{opacity:.75}to{opacity:.5}}button::-moz-focus-inner{border:0}`]}}window.customElements.define("cc-button",CcButton);
+import{LitElement as o,css as t,html as e}from"lit-element";import{classMap as n}from"lit-html/directives/class-map.js";import{pulse as r}from"../styles/animations.js";export class CcButton extends o{static get properties(){return{disabled:{type:Boolean},primary:{type:Boolean},success:{type:Boolean},danger:{type:Boolean},outlined:{type:Boolean},skeleton:{type:Boolean}}}render(){const o={danger:this.danger&&!this.success&&!this.primary,success:!this.danger&&this.success&&!this.primary,primary:!this.danger&&!this.success&&this.primary,skeleton:this.skeleton};return o.simple=!o.danger&&!o.success&&!o.primary,o.outlined=this.outlined||o.simple,e`<button type="button" class="${n(o)}" .disabled="${this.disabled||this.skeleton}"><slot></slot></button>`}static get styles(){return[r,t`:host{box-sizing:border-box;display:inline-block;margin:.2rem;vertical-align:top}button{background:#fff;border:1px solid #000;display:block;font-size:14px;font-family:inherit;margin:0;padding:0 .5rem;border-radius:.15rem;cursor:pointer;font-weight:700;min-height:2rem;text-transform:uppercase;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%;background-color:var(--btn-color);border-color:var(--btn-color);color:#fff;box-shadow:0 0 0 0 rgba(255,255,255,0);transition:75ms ease-in-out}button.simple{--btn-color:hsl(210, 23%, 26%);border-color:#aaa}button.primary{--btn-color:hsl(213, 55%, 62%)}button.success{--btn-color:hsl(144, 56%, 43%)}button.danger{--btn-color:hsl(351, 70%, 47%)}button.outlined{background-color:#fff;color:var(--btn-color)}button:enabled:focus{box-shadow:0 0 0 .2em rgba(50,115,220,.25);outline:0}button:enabled:hover{box-shadow:0 1px 3px #888}button:enabled:active{box-shadow:none;outline:0}button:disabled{cursor:default;opacity:.5}button.skeleton{animation-direction:alternate;animation-duration:.5s;animation-iteration-count:infinite;animation-name:pulse;background-color:#aaa;border-color:#777;color:transparent;cursor:progress}@keyframes pulse{from{opacity:.75}to{opacity:.5}}button::-moz-focus-inner{border:0}`]}}window.customElements.define("cc-button",CcButton);
 //# sourceMappingURL=cc-button.js.map

dist/atoms/cc-input-text.js

@@ -1,2 +0,2 @@
-import{css as e,html as t,LitElement as i}from"lit-element";import{classMap as o}from"lit-html/directives/class-map.js";import{dispatchCustomEvent as s}from"../lib/events";import{pulse as n}from"../styles/animations.js";export class CcInputText extends i{static get properties(){return{disabled:{type:Boolean},readonly:{type:Boolean},skeleton:{type:Boolean},multi:{type:Boolean},value:{type:String},name:{type:String},placeholder:{type:String}}}constructor(){super(),this.name="",this.value="",this.placeholder=""}focus(){this.shadowRoot.querySelector(".input").focus()}t(e){this.value=e.target.value,s(this,"input",this.value)}i(e){this.readonly&&e.target.select()}o(e){e.stopPropagation()}render(){const e=(this.value||"").split("\n").length;return this.multi?t`<textarea class="${o({input:!0,skeleton:this.skeleton})}" style="--rows:${e}" rows="${e}" ?disabled="${this.disabled||this.skeleton}" ?readonly="${this.readonly}" .value="${this.value}" name="${this.name}" placeholder="${this.placeholder}" @input="${this.t}" @focus="${this.i}" spellcheck="false" @keydown="${this.o}"></textarea>`:t`<input type="text" class="${o({input:!0,skeleton:this.skeleton})}" ?disabled="${this.disabled||this.skeleton}" ?readonly="${this.readonly}" .value="${this.value}" name="${this.name}" placeholder="${this.placeholder}" @input="${this.t}" @focus="${this.i}" spellcheck="false" @keydown="${this.o}">`}static get styles(){return[n,e`:host{display:inline-block;box-sizing:border-box;padding:.2rem;vertical-align:top}:host([multi]){display:block}:host([skeleton]){cursor:progress}.input{background:#fff;border:1px solid #aaa;box-sizing:border-box;display:block;font-family:monospace;font-size:14px;margin:0;padding:.15rem .5rem;resize:none;width:100%;border-radius:.25rem;height:2rem;line-height:1.7rem;overflow:hidden;box-shadow:0 0 0 0 rgba(255,255,255,0);transition:75ms ease-in-out,height}.input:focus{box-shadow:0 0 0 .2em rgba(50,115,220,.25);border-color:#777;outline:0}.input:hover{border-color:#777}.input:active{outline:0}.input[disabled]{background:#eee;border-color:#eee;cursor:default;opacity:.75;pointer-events:none}.input[readonly]{background:#eee}.input.skeleton{animation-direction:alternate;animation-duration:.5s;animation-iteration-count:infinite;animation-name:pulse;background:#eee;border-color:#eee;color:transparent}.input.skeleton::placeholder{color:transparent}.input[rows]{height:calc(calc(calc(var(--rows,1) * 1.7rem) + .3rem) + 2px);white-space:pre}.input[rows="1"]{height:2rem}`]}}window.customElements.define("cc-input-text",CcInputText);
+import{css as e,html as t,LitElement as i}from"lit-element";import{classMap as o}from"lit-html/directives/class-map.js";import{dispatchCustomEvent as s}from"../lib/events.js";import{pulse as n}from"../styles/animations.js";export class CcInputText extends i{static get properties(){return{disabled:{type:Boolean},readonly:{type:Boolean},skeleton:{type:Boolean},multi:{type:Boolean},value:{type:String},name:{type:String},placeholder:{type:String}}}constructor(){super(),this.name="",this.value="",this.placeholder=""}focus(){this.shadowRoot.querySelector(".input").focus()}t(e){this.value=e.target.value,s(this,"input",this.value)}i(e){this.readonly&&e.target.select()}o(e){e.stopPropagation()}render(){const e=(this.value||"").split("\n").length;return this.multi?t`<textarea class="${o({input:!0,skeleton:this.skeleton})}" style="--rows:${e}" rows="${e}" ?disabled="${this.disabled||this.skeleton}" ?readonly="${this.readonly}" .value="${this.value}" name="${this.name}" placeholder="${this.placeholder}" @input="${this.t}" @focus="${this.i}" spellcheck="false" @keydown="${this.o}"></textarea>`:t`<input type="text" class="${o({input:!0,skeleton:this.skeleton})}" ?disabled="${this.disabled||this.skeleton}" ?readonly="${this.readonly}" .value="${this.value}" name="${this.name}" placeholder="${this.placeholder}" @input="${this.t}" @focus="${this.i}" spellcheck="false" @keydown="${this.o}">`}static get styles(){return[n,e`:host{display:inline-block;box-sizing:border-box;padding:.2rem;vertical-align:top}:host([multi]){display:block}:host([skeleton]){cursor:progress}.input{background:#fff;border:1px solid #aaa;box-sizing:border-box;display:block;font-family:monospace;font-size:14px;margin:0;padding:.15rem .5rem;resize:none;width:100%;border-radius:.25rem;height:2rem;line-height:1.7rem;overflow:hidden;box-shadow:0 0 0 0 rgba(255,255,255,0);transition:75ms ease-in-out,height}.input:focus{box-shadow:0 0 0 .2em rgba(50,115,220,.25);border-color:#777;outline:0}.input:hover{border-color:#777}.input:active{outline:0}.input[disabled]{background:#eee;border-color:#eee;cursor:default;opacity:.75;pointer-events:none}.input[readonly]{background:#eee}.input.skeleton{animation-direction:alternate;animation-duration:.5s;animation-iteration-count:infinite;animation-name:pulse;background:#eee;border-color:#eee;color:transparent}.input.skeleton::placeholder{color:transparent}.input[rows]{height:calc(calc(calc(var(--rows,1) * 1.7rem) + .3rem) + 2px);white-space:pre}.input[rows="1"]{height:2rem}`]}}window.customElements.define("cc-input-text",CcInputText);
 //# sourceMappingURL=cc-input-text.js.map

dist/env-var/env-var-create.js

@@ -1,2 +0,2 @@
-import"../atoms/cc-button.js";import"../atoms/cc-input-text.js";import{css as e,html as t,LitElement as a}from"lit-element";import{dispatchCustomEvent as r}from"../lib/events";import i from"../lib/env-vars.js";import{i18n as s}from"@i18n";export class EnvVarCreate extends a{static get properties(){return{disabled:{type:Boolean},variablesNames:{type:Array,attribute:!1},t:{type:String,attribute:!1},i:{type:String,attribute:!1}}}constructor(){super(),this.disabled=!1,this.variablesNames=[],this.reset()}reset(){this.t="",this.i=""}s({detail:e}){this.t=e}l({detail:e}){this.i=e}p(){r(this,"create",{name:this.t,value:this.i}),this.reset(),this.shadowRoot.getElementById("name-input").focus()}render(){const e=!i.validateName(this.t),a=this.variablesNames.includes(this.t),r=e||a;return t`<div class="wrapper"><cc-input-text id="name-input" name="name" .value="${this.t}" class="name" ?disabled="${this.disabled}" placeholder="${s("env-var-create.name.placeholder")}" @cc-input-text:input="${this.s}"></cc-input-text><span class="input-btn"><cc-input-text multi name="value" .value="${this.i}" class="value" ?disabled="${this.disabled}" placeholder="${s("env-var-create.value.placeholder")}" @cc-input-text:input="${this.l}"></cc-input-text><cc-button primary ?disabled="${r||this.disabled}" @click="${this.p}">${s("env-var-create.create-button")}</cc-button></span></div><div class="errors" ?hidden="${!e||""===this.t}">⚠️ ${s("env-var-create.errors.invalid-name",{name:this.t})}</div><div class="errors" ?hidden="${!a}">⚠️ ${s("env-var-create.errors.already-defined-name",{name:this.t})}</div>`}static get styles(){return e`:host{display:block}.wrapper{display:flex;flex-wrap:wrap}.name{flex:1 1 15rem}.input-btn{display:flex;flex:2 1 27rem;flex-wrap:wrap}.value{flex:100 1 20rem}cc-button{flex:1 1 6rem;white-space:nowrap}.errors{margin:.5rem .2rem .2rem}`}}window.customElements.define("env-var-create",EnvVarCreate);
+import"../atoms/cc-button.js";import"../atoms/cc-input-text.js";import{css as e,html as t,LitElement as a}from"lit-element";import{dispatchCustomEvent as r}from"../lib/events";import i from"../lib/env-vars.js";import{i18n as s}from"@i18n";export class EnvVarCreate extends a{static get properties(){return{disabled:{type:Boolean},variablesNames:{type:Array,attribute:!1},t:{type:String,attribute:!1},i:{type:String,attribute:!1}}}constructor(){super(),this.disabled=!1,this.variablesNames=[],this.reset()}reset(){this.t="",this.i=""}s({detail:e}){this.t=e}l({detail:e}){this.i=e}p(){r(this,"create",{name:this.t,value:this.i}),this.reset(),this.shadowRoot.getElementById("name-input").focus()}render(){const e=!i.validateName(this.t),a=this.variablesNames.includes(this.t),r=e||a;return t`<div class="wrapper"><cc-input-text class="name" name="name" value="${this.t}" ?disabled="${this.disabled}" placeholder="${s("env-var-create.name.placeholder")}" @cc-input-text:input="${this.s}"></cc-input-text><span class="input-btn"><cc-input-text class="value" name="value" value="${this.i}" multi ?disabled="${this.disabled}" placeholder="${s("env-var-create.value.placeholder")}" @cc-input-text:input="${this.l}"></cc-input-text><cc-button primary ?disabled="${r||this.disabled}" @click="${this.p}">${s("env-var-create.create-button")}</cc-button></span></div><div class="errors" ?hidden="${!e||""===this.t}">⚠️ ${s("env-var-create.errors.invalid-name",{name:this.t})}</div><div class="errors" ?hidden="${!a}">⚠️ ${s("env-var-create.errors.already-defined-name",{name:this.t})}</div>`}static get styles(){return e`:host{display:block}.wrapper{display:flex;flex-wrap:wrap}.name{flex:1 1 15rem}.input-btn{display:flex;flex:2 1 27rem;flex-wrap:wrap}.value{flex:100 1 20rem}cc-button{flex:1 1 6rem;white-space:nowrap}.errors{margin:.5rem .2rem .2rem}`}}window.customElements.define("env-var-create",EnvVarCreate);
 //# sourceMappingURL=env-var-create.js.map

dist/env-var/env-var-editor-expert.js

@@ -1,2 +0,2 @@
-import"../atoms/cc-input-text.js";import{css as e,html as r,LitElement as t}from"lit-element";import{dispatchCustomEvent as i}from"../lib/events.js";import s from"../lib/env-vars.js";import{i18n as n}from"@i18n";export class EnvVarEditorExpert extends t{static get properties(){return{variables:{type:Array,attribute:!1},disabled:{type:Boolean},readonly:{type:Boolean},t:{type:Array,attribute:!1},i:{type:Array,attribute:!1},s:{type:Boolean,attribute:!1}}}constructor(){super(),this.disabled=!1,this.readonly=!1,this.variables=null}static get skeletonVariables(){return[{name:"VARIABLE_ONE",value:""},{name:"VARIABLE_FOOBAR",value:""},{name:"VARIABLE_PORT",value:""}]}set variables(e){this.s=null==e;const r=(this.s?EnvVarEditorExpert.skeletonVariables:e).filter(({isDeleted:e})=>!e);this.t=s.toNameEqualsValueString(r),this.o=[]}set o(e){this.i=e.map(({type:e,name:r,pos:t})=>e===s.ERROR_TYPES.INVALID_NAME?{line:t.line,msg:n("env-var-editor-expert.errors.invalid-name",{name:r})}:e===s.ERROR_TYPES.DUPLICATED_NAME?{line:t.line,msg:n("env-var-editor-expert.errors.duplicated-name",{name:r})}:e===s.ERROR_TYPES.INVALID_LINE?{line:t.line,msg:n("env-var-editor-expert.errors.invalid-line")}:e===s.ERROR_TYPES.INVALID_VALUE?{line:t.line,msg:n("env-var-editor-expert.errors.invalid-value")}:{line:"?",msg:n("env-var-editor-expert.errors.unknown")})}l({detail:e}){const{variables:r,errors:t}=s.parseRaw(e);this.o=t,0===t.length&&i(this,"change",r)}render(){const e=this.readonly?n("env-var-editor-expert.placeholder-readonly"):n("env-var-editor-expert.placeholder");return r`<cc-input-text multi .value="${this.t}" @cc-input-text:input="${this.l}" placeholder="${e}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?skeleton="${this.s}"></cc-input-text><ul class="error-list" ?hidden="${0===this.i.length}">${this.i.map(({line:e,msg:t})=>r`<li class="error-item">⚠️ <strong>${n("env-var-editor-expert.errors.line")} ${e}:</strong> ${t}</li>`)}</ul>`}static get styles(){return e`:host{display:block}:host([hidden]){display:none}.error-list{margin:.5rem .2rem .2rem;padding:0;list-style:none}.error-item{margin:0;padding:.25rem 0;line-height:1.75}`}}window.customElements.define("env-var-editor-expert",EnvVarEditorExpert);
+import"../atoms/cc-input-text.js";import{css as e,html as r,LitElement as t}from"lit-element";import{dispatchCustomEvent as i}from"../lib/events.js";import s from"../lib/env-vars.js";import{i18n as n}from"@i18n";export class EnvVarEditorExpert extends t{static get properties(){return{variables:{type:Array,attribute:!1},disabled:{type:Boolean},readonly:{type:Boolean},t:{type:Array,attribute:!1},i:{type:Array,attribute:!1},s:{type:Boolean,attribute:!1}}}constructor(){super(),this.variables=null,this.disabled=!1,this.readonly=!1}static get skeletonVariables(){return[{name:"VARIABLE_ONE",value:""},{name:"VARIABLE_FOOBAR",value:""},{name:"VARIABLE_PORT",value:""}]}set variables(e){this.s=null==e;const r=(this.s?EnvVarEditorExpert.skeletonVariables:e).filter(({isDeleted:e})=>!e);this.t=s.toNameEqualsValueString(r),this.o=[]}set o(e){this.i=e.map(({type:e,name:r,pos:t})=>e===s.ERROR_TYPES.INVALID_NAME?{line:t.line,msg:n("env-var-editor-expert.errors.invalid-name",{name:r})}:e===s.ERROR_TYPES.DUPLICATED_NAME?{line:t.line,msg:n("env-var-editor-expert.errors.duplicated-name",{name:r})}:e===s.ERROR_TYPES.INVALID_LINE?{line:t.line,msg:n("env-var-editor-expert.errors.invalid-line")}:e===s.ERROR_TYPES.INVALID_VALUE?{line:t.line,msg:n("env-var-editor-expert.errors.invalid-value")}:{line:"?",msg:n("env-var-editor-expert.errors.unknown")})}l({detail:e}){const{variables:r,errors:t}=s.parseRaw(e);this.o=t,0===t.length&&i(this,"change",r)}render(){const e=this.readonly?n("env-var-editor-expert.placeholder-readonly"):n("env-var-editor-expert.placeholder");return r`<cc-input-text multi value="${this.t}" placeholder="${e}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?skeleton="${this.s}" @cc-input-text:input="${this.l}"></cc-input-text><ul class="error-list" ?hidden="${0===this.i.length}">${this.i.map(({line:e,msg:t})=>r`<li class="error-item">⚠️ <strong>${n("env-var-editor-expert.errors.line")} ${e}:</strong> ${t}</li>`)}</ul>`}static get styles(){return e`:host{display:block}:host([hidden]){display:none}.error-list{margin:.5rem .2rem .2rem;padding:0;list-style:none}.error-item{margin:0;padding:.25rem 0;line-height:1.75}`}}window.customElements.define("env-var-editor-expert",EnvVarEditorExpert);
 //# sourceMappingURL=env-var-editor-expert.js.map

dist/env-var/env-var-editor-simple.js

@@ -1,2 +0,2 @@
-import"./env-var-create.js";import"./env-var-input.js";import{css as e,html as t,LitElement as i}from"lit-element";import{dispatchCustomEvent as s}from"../lib/events.js";import{i18n as a}from"@i18n";import{repeat as n}from"lit-html/directives/repeat.js";export class EnvVarEditorSimple extends i{static get properties(){return{variables:{type:Array,attribute:!1},disabled:{type:Boolean},readonly:{type:Boolean}}}constructor(){super(),this.disabled=!1,this.readonly=!1}static get skeletonVariables(){return[{name:"VARIABLE_ONE",value:""},{name:"VARIABLE_FOOBAR",value:""},{name:"VARIABLE_PORT",value:""}]}t({detail:e}){this.variables=[...this.variables,e],s(this,"change",this.variables)}i({detail:e}){this.variables=this.variables.map(t=>t.name===e.name?{...t,value:e.value}:t),s(this,"change",this.variables)}s({detail:e}){this.variables=this.variables.filter(t=>t.name!==e.name||!t.isNew).map(t=>t.name===e.name?{...t,isDeleted:!0}:t),s(this,"change",this.variables)}l({detail:e}){this.variables=this.variables.map(t=>t.name===e.name?{...t,isDeleted:!1}:t),s(this,"change",this.variables)}render(){const e=null==this.variables?EnvVarEditorSimple.skeletonVariables:this.variables,i=null==this.variables?[]:this.variables.map(({name:e})=>e),s=this.readonly?"":t`<env-var-create ?disabled="${null==this.variables||this.disabled}" .variablesNames="${i}" @env-var-create:create="${this.t}"></env-var-create>`;return t`${s}<div class="message" ?hidden="${null!=e&&0!==e.length}">${a("env-var-editor-simple.empty-data")}</div>${n(e,({name:e})=>e,({name:e,value:i,isNew:s,isEdited:a,isDeleted:n})=>t`<env-var-input name="${e}" value="${i}" ?is-new="${s}" ?is-edited="${a}" ?is-deleted="${n}" ?skeleton="${null==this.variables}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" @env-var-input:input="${this.i}" @env-var-input:delete="${this.s}" @env-var-input:keep="${this.l}"></env-var-input>`)}`}static get styles(){return e`:host{display:block}:host([hidden]){display:none}env-var-create{margin-bottom:1rem}.message{color:#555;margin:.2rem;font-style:italic}env-var-input{margin-bottom:.25rem}`}}window.customElements.define("env-var-editor-simple",EnvVarEditorSimple);
+import"./env-var-create.js";import"./env-var-input.js";import{css as e,html as t,LitElement as i}from"lit-element";import{dispatchCustomEvent as a}from"../lib/events.js";import{i18n as s}from"@i18n";import{repeat as n}from"lit-html/directives/repeat.js";export class EnvVarEditorSimple extends i{static get properties(){return{variables:{type:Array,attribute:!1},disabled:{type:Boolean},readonly:{type:Boolean}}}constructor(){super(),this.disabled=!1,this.readonly=!1}static get skeletonVariables(){return[{name:"VARIABLE_ONE",value:""},{name:"VARIABLE_FOOBAR",value:""},{name:"VARIABLE_PORT",value:""}]}t({detail:e}){this.variables=[...this.variables,e],a(this,"change",this.variables)}i({detail:e}){this.variables=this.variables.map(t=>t.name===e.name?{...t,value:e.value}:t),a(this,"change",this.variables)}s({detail:e}){this.variables=this.variables.filter(t=>t.name!==e.name||!t.isNew).map(t=>t.name===e.name?{...t,isDeleted:!0}:t),a(this,"change",this.variables)}l({detail:e}){this.variables=this.variables.map(t=>t.name===e.name?{...t,isDeleted:!1}:t),a(this,"change",this.variables)}render(){const e=null==this.variables?EnvVarEditorSimple.skeletonVariables:this.variables,i=null==this.variables?[]:this.variables.map(({name:e})=>e),a=this.readonly?"":t`<env-var-create ?disabled="${null==this.variables||this.disabled}" .variablesNames="${i}" @env-var-create:create="${this.t}"></env-var-create>`,r=n(e,({name:e})=>e,({name:e,value:i,isNew:a,isEdited:s,isDeleted:n})=>t`<env-var-input name="${e}" value="${i}" ?new="${a}" ?edited="${s}" ?deleted="${n}" ?skeleton="${null==this.variables}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" @env-var-input:input="${this.i}" @env-var-input:delete="${this.s}" @env-var-input:keep="${this.l}"></env-var-input>`);return t`${a}<div class="message" ?hidden="${null!=e&&0!==e.length}">${s("env-var-editor-simple.empty-data")}</div>${r}`}static get styles(){return e`:host{display:block}:host([hidden]){display:none}env-var-create{margin-bottom:1rem}.message{color:#555;margin:.2rem;font-style:italic}env-var-input{margin-bottom:.25rem}`}}window.customElements.define("env-var-editor-simple",EnvVarEditorSimple);
 //# sourceMappingURL=env-var-editor-simple.js.map

dist/env-var/env-var-form.js

@@ -1,2 +0,2 @@
-import"../atoms/cc-button.js";import"../atoms/cc-loader.js";import"../atoms/cc-toggle.js";import"../cc-expand.js";import"./env-var-editor-expert.js";import"./env-var-editor-simple.js";import{css as t,html as e,LitElement as i}from"lit-element";import{classMap as r}from"lit-html/directives/class-map.js";import{dispatchCustomEvent as s}from"../lib/events.js";import{i18n as l}from"@i18n";export class EnvVarForm extends i{static get properties(){return{heading:{type:String,reflect:!0},variables:{type:Array,attribute:!1},saving:{type:Boolean,reflect:!0},readonly:{type:Boolean,reflect:!0},restartApp:{type:Boolean,attribute:"restart-app"},error:{type:String,reflect:!0},t:{type:Array,attribute:!1},i:{type:Array,attribute:!1},s:{type:String,attribute:!1},l:{type:Boolean,attribute:!1}}}constructor(){super(),this.s="SIMPLE",this.saving=!1,this.readonly=!1,this.restartApp=!1,this.error=null,this.heading=null}static get modes(){return[{label:l("env-var-form.mode.simple"),value:"SIMPLE"},{label:l("env-var-form.mode.expert"),value:"EXPERT"}]}set variables(t){null==t||null==t.then&&null==t.catch?this.o(t):(null!=this.h&&(this.saving=!0),this.error=null,t.then(t=>{this.o(t),this.error=null,this.saving=!1}).catch(()=>{null==this.h?this.error="loading":this.error="saving",this.saving=!1}))}o(t){this.h=t,this.l=!0,null!=t&&(this.t=t.sort((t,e)=>t.name.localeCompare(e.name)),this.i=t.sort((t,e)=>t.name.localeCompare(e.name)))}m({detail:t}){const e=this.h.filter(e=>{const i=t.find(t=>t.name===e.name);return(null==i||i.isDeleted)&&!e.isNew}).map(t=>({...t,isDeleted:!0})),i=t.filter(t=>{return null==this.h.find(e=>e.name===t.name)}).map(t=>({...t,isNew:!0})),r=t.filter(t=>{const r=e.find(e=>e.name===t.name),s=i.find(e=>e.name===t.name);return!r&&!s}).map(t=>{const e=this.h.find(e=>e.name===t.name).value!==t.value;return{...t,isEdited:e}}),s=[...e,...i,...r];this.l=!s.some(({isDeleted:t,isNew:e,isEdited:i})=>t||e||i),this.t=s.sort((t,e)=>t.name.localeCompare(e.name))}p({detail:t}){"EXPERT"===t&&(this.i=this.t),this.s=t}u(){this.variables=this.h}v(){const t=this.t.filter(({isDeleted:t})=>!t).map(({name:t,value:e})=>({name:t,value:e}));s(this,"submit",t)}g(){s(this,"restart-app")}$(t){s(this,"dismissed-error",t)}get _(){return"loading"===this.error?l("env-var-form.error.loading"):"saving"===this.error?l("env-var-form.error.saving"):l("env-var-form.error.unknown")}render(){const t=null!=this.heading?e`<div class="heading">${this.heading}</div>`:"",i=null!=this.error?e`<div class="error-container"><div class="panel"><div class="error-message">⚠️ ${this._}</div><cc-button @click="${()=>this.$(this.error)}">OK</cc-button></div></div>`:"",s=this.saving?e`<cc-loader class="saving-loader"></cc-loader>`:"",n=this.restartApp?e`<cc-button @click="${this.g}">${l("env-var-form.restart-app")}</cc-button>`:"",a=this.readonly?"":e`<div class="button-bar"><cc-button ?disabled="${null==this.t||this.saving||null!=this.error||this.l}" @click="${this.u}">${l("env-var-form.reset")}</cc-button><div class="spacer"></div>${n}<cc-button success ?disabled="${null==this.t||this.saving||this.l||null!=this.error}" @click="${this.v}">${l("env-var-form.update")}</cc-button></div>`;return e`<div class="header">${t}<cc-toggle class="${r({"mode-switcher":!0,saving:this.saving||null!=this.error})}" value="${this.s}" .choices="${EnvVarForm.modes}" ?disabled="${this.saving||null!=this.error}" @cc-toggle:input="${this.p}"></cc-toggle></div><slot class="description"></slot><cc-expand class="${r({saving:this.saving||null!=this.error})}"><env-var-editor-simple ?hidden="${"SIMPLE"!==this.s}" .variables="${this.t}" ?disabled="${this.saving||null!=this.error}" ?readonly="${this.readonly}" @env-var-editor-simple:change="${this.m}"></env-var-editor-simple><env-var-editor-expert ?hidden="${"EXPERT"!==this.s}" .variables="${this.i}" ?disabled="${this.saving||null!=this.error}" ?readonly="${this.readonly}" @env-var-editor-expert:change="${this.m}"></env-var-editor-expert></cc-expand>${a} ${s} ${i}`}static get styles(){return t`:host{display:block;background:#fff;border-radius:.25rem;border:1px solid #bcc2d1;padding:1rem;position:relative}.header{align-items:flex-start;display:flex;justify-content:center;margin-bottom:.5rem}.heading{flex:1 1 0;font-size:1.25rem;font-weight:400;margin:.2rem}.description{display:block;color:#555;font-style:italic;margin:.2rem .2rem 1rem}.saving{filter:blur(.3rem)}.button-bar{display:flex;flex-wrap:wrap;margin-top:1rem}.spacer{flex:1 1 0}.saving-loader{height:100%;left:0;position:absolute;top:0;width:100%}.error-container{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.panel{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#fff;padding:1rem;border-radius:.25rem;border:1px solid #ccc;max-width:80%}.error-message{margin-bottom:1rem}`}}window.customElements.define("env-var-form",EnvVarForm);
+import"../atoms/cc-button.js";import"../atoms/cc-expand.js";import"../atoms/cc-loader.js";import"../atoms/cc-toggle.js";import"./env-var-editor-expert.js";import"./env-var-editor-simple.js";import{css as t,html as e,LitElement as i}from"lit-element";import{classMap as r}from"lit-html/directives/class-map.js";import{dispatchCustomEvent as s}from"../lib/events.js";import{i18n as l}from"@i18n";export class EnvVarForm extends i{static get properties(){return{heading:{type:String,reflect:!0},variables:{type:Array,attribute:!1},saving:{type:Boolean,reflect:!0},readonly:{type:Boolean,reflect:!0},restartApp:{type:Boolean,attribute:"restart-app"},error:{type:String,reflect:!0},t:{type:Array,attribute:!1},i:{type:Array,attribute:!1},s:{type:String,attribute:!1},l:{type:Boolean,attribute:!1}}}constructor(){super(),this.heading=null,this.saving=!1,this.readonly=!1,this.restartApp=!1,this.error=null,this.s="SIMPLE"}static get modes(){return[{label:l("env-var-form.mode.simple"),value:"SIMPLE"},{label:l("env-var-form.mode.expert"),value:"EXPERT"}]}set variables(t){if(null==t)return this.o(null);null!=this.h&&(this.saving=!0),this.error=null,t.then(t=>{this.o(t),this.error=null,this.saving=!1}).catch(()=>{null==this.h?this.error="loading":this.error="saving",this.saving=!1})}o(t){this.h=t,this.l=!0,null==t?(this.t=null,this.i=null):(this.t=t.sort((t,e)=>t.name.localeCompare(e.name)),this.i=t.sort((t,e)=>t.name.localeCompare(e.name)))}m({detail:t}){const e=this.h.filter(e=>{const i=t.find(t=>t.name===e.name);return(null==i||i.isDeleted)&&!e.isNew}).map(t=>({...t,isDeleted:!0})),i=t.filter(t=>{return null==this.h.find(e=>e.name===t.name)}).map(t=>({...t,isNew:!0})),r=t.filter(t=>{const r=e.find(e=>e.name===t.name),s=i.find(e=>e.name===t.name);return!r&&!s}).map(t=>{const e=this.h.find(e=>e.name===t.name).value!==t.value;return{...t,isEdited:e}}),s=[...e,...i,...r];this.l=!s.some(({isDeleted:t,isNew:e,isEdited:i})=>t||e||i),this.t=s.sort((t,e)=>t.name.localeCompare(e.name))}p({detail:t}){"EXPERT"===t&&(this.i=this.t),this.s=t}u(){this.variables=this.h}v(){const t=this.t.filter(({isDeleted:t})=>!t).map(({name:t,value:e})=>({name:t,value:e}));s(this,"submit",t)}g(){s(this,"restart-app")}$(t){s(this,"dismissed-error",t)}get _(){return"loading"===this.error?l("env-var-form.error.loading"):"saving"===this.error?l("env-var-form.error.saving"):l("env-var-form.error.unknown")}render(){const t=null!=this.heading?e`<div class="heading">${this.heading}</div>`:"",i=null!=this.error?e`<div class="error-container"><div class="error-panel"><div class="error-message">⚠️ ${this._}</div><cc-button @click="${()=>this.$(this.error)}">OK</cc-button></div></div>`:"",s=this.saving?e`<cc-loader class="saving-loader"></cc-loader>`:"",n=this.restartApp?e`<cc-button @click="${this.g}">${l("env-var-form.restart-app")}</cc-button>`:"",a=this.readonly?"":e`<div class="button-bar"><cc-button ?disabled="${null==this.t||this.saving||null!=this.error||this.l}" @click="${this.u}">${l("env-var-form.reset")}</cc-button><div class="spacer"></div>${n}<cc-button success ?disabled="${null==this.t||this.saving||this.l||null!=this.error}" @click="${this.v}">${l("env-var-form.update")}</cc-button></div>`;return e`<div class="header">${t}<cc-toggle class="${r({"mode-switcher":!0,saving:this.saving||null!=this.error})}" value="${this.s}" .choices="${EnvVarForm.modes}" ?disabled="${this.saving||null!=this.error}" @cc-toggle:input="${this.p}"></cc-toggle></div><slot class="description"></slot><cc-expand class="${r({saving:this.saving||null!=this.error})}"><env-var-editor-simple ?hidden="${"SIMPLE"!==this.s}" .variables="${this.t}" ?disabled="${this.saving||null!=this.error}" ?readonly="${this.readonly}" @env-var-editor-simple:change="${this.m}"></env-var-editor-simple><env-var-editor-expert ?hidden="${"EXPERT"!==this.s}" .variables="${this.i}" ?disabled="${this.saving||null!=this.error}" ?readonly="${this.readonly}" @env-var-editor-expert:change="${this.m}"></env-var-editor-expert></cc-expand>${a} ${s} ${i}`}static get styles(){return t`:host{display:block;background:#fff;border-radius:.25rem;border:1px solid #bcc2d1;padding:1rem;position:relative}.header{align-items:flex-start;display:flex;justify-content:center;margin-bottom:.5rem}.heading{flex:1 1 0;font-size:1.25rem;font-weight:400;margin:.2rem}.description{display:block;color:#555;font-style:italic;margin:.2rem .2rem 1rem}.saving{filter:blur(.3rem)}.button-bar{display:flex;flex-wrap:wrap;margin-top:1rem}.spacer{flex:1 1 0}.saving-loader{height:100%;left:0;position:absolute;top:0;width:100%}.error-container{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.error-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#fff;padding:1rem;border-radius:.25rem;border:1px solid #ccc;max-width:80%}.error-message{margin-bottom:1rem}`}}window.customElements.define("env-var-form",EnvVarForm);
 //# sourceMappingURL=env-var-form.js.map

dist/env-var/env-var-input.js

@@ -1,2 +0,2 @@
-import"../atoms/cc-button.js";import"../atoms/cc-input-text.js";import{css as e,html as t,LitElement as i}from"lit-element";import{classMap as n}from"lit-html/directives/class-map.js";import{dispatchCustomEvent as s}from"../lib/events.js";import{i18n as o}from"@i18n";import{pulse as a}from"../styles/animations.js";export class EnvVarInput extends i{static get properties(){return{name:{type:String},value:{type:String},isNew:{type:Boolean,attribute:"is-new"},isEdited:{type:Boolean,attribute:"is-edited"},isDeleted:{type:Boolean,attribute:"is-deleted"},skeleton:{type:Boolean},disabled:{type:Boolean},readonly:{type:Boolean}}}constructor(){super(),this.value="",this.isNew=!1,this.isEdited=!1,this.isDeleted=!1,this.skeleton=!1,this.disabled=!1}t({detail:e}){this.value=e,this.isValid=s(this,"input",{name:this.name,value:this.value})}i(){s(this,"delete",{name:this.name})}s(){s(this,"keep",{name:this.name})}render(){const e=this.isDeleted?t`<cc-button ?skeleton="${this.skeleton}" ?disabled="${this.disabled}" @click="${this.s}">${o("env-var-input.keep-button")}</cc-button>`:t`<cc-button ?skeleton="${this.skeleton}" ?disabled="${this.disabled}" danger outlined @click="${this.i}">${o("env-var-input.delete-button")}</cc-button>`,i=this.readonly?"":e;return t`<span class="${n({name:!0,skeleton:this.skeleton,deleted:this.isDeleted})}"><span class="text">${this.name}</span> </span><span class="input-btn"><cc-input-text multi .value="${this.value}" name="${this.name}" class="value" ?disabled="${this.isDeleted||this.disabled}" ?skeleton="${this.skeleton}" ?readonly="${this.readonly}" .placeholder="${o("env-var-input.value-placeholder")}" @cc-input-text:input="${this.t}"></cc-input-text>${i}</span>`}static get styles(){return[a,e`:host{display:flex;flex-wrap:wrap}:host([hidden]){display:none}.icon{font-family:monospace;font-size:.9rem;height:2rem;line-height:2rem;padding:.2rem}.name{background-color:#fff;box-sizing:border-box;display:inline-block;flex:1 1 15rem;font-family:monospace;font-size:14px;line-height:1.4rem;padding:.2rem;position:relative;word-break:break-all}.name.deleted{text-decoration:line-through}.name.skeleton .text{animation-direction:alternate;animation-duration:.5s;animation-iteration-count:infinite;animation-name:pulse;background-color:#bbb;color:transparent;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.input-btn{display:flex;flex:2 1 27rem;flex-wrap:wrap}.value{flex:100 1 20rem}cc-button{flex:1 1 6rem;white-space:nowrap}`]}}window.customElements.define("env-var-input",EnvVarInput);
+import"../atoms/cc-button.js";import"../atoms/cc-input-text.js";import{css as e,html as t,LitElement as n}from"lit-element";import{classMap as i}from"lit-html/directives/class-map.js";import{dispatchCustomEvent as s}from"../lib/events.js";import{i18n as o}from"@i18n";import{pulse as a}from"../styles/animations.js";export class EnvVarInput extends n{static get properties(){return{name:{type:String},value:{type:String},new:{type:Boolean},edited:{type:Boolean},deleted:{type:Boolean},skeleton:{type:Boolean},disabled:{type:Boolean},readonly:{type:Boolean}}}constructor(){super(),this.value="",this.new=!1,this.edited=!1,this.deleted=!1,this.skeleton=!1,this.disabled=!1,this.readonly=!1}t({detail:e}){this.value=e,s(this,"input",{name:this.name,value:this.value})}i(){s(this,"delete",{name:this.name})}s(){s(this,"keep",{name:this.name})}render(){const e=this.readonly?"":t`<cc-button ?skeleton="${this.skeleton}" ?disabled="${this.disabled}" ?danger="${this.deleted}" ?outlined="${this.deleted}" @click="${this.i}">${this.deleted?o("env-var-input.keep-button"):o("env-var-input.delete-button")}</cc-button>`;return t`<span class="${i({name:!0,skeleton:this.skeleton,deleted:this.deleted})}"><span class="text">${this.name}</span> </span><span class="input-btn"><cc-input-text class="value" name="${this.name}" value="${this.value}" multi ?disabled="${this.deleted||this.disabled}" ?skeleton="${this.skeleton}" ?readonly="${this.readonly}" placeholder="${o("env-var-input.value-placeholder")}" @cc-input-text:input="${this.t}"></cc-input-text>${e}</span>`}static get styles(){return[a,e`:host{display:flex;flex-wrap:wrap}:host([hidden]){display:none}.name{background-color:#fff;box-sizing:border-box;display:inline-block;flex:1 1 15rem;font-family:SourceCodePro,monaco,monospace;font-size:14px;line-height:1.4rem;padding:.2rem;word-break:break-all}.name.deleted{text-decoration:line-through}.name.skeleton .text{animation-direction:alternate;animation-duration:.5s;animation-iteration-count:infinite;animation-name:pulse;background-color:#bbb;color:transparent;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.input-btn{display:flex;flex:2 1 27rem;flex-wrap:wrap}.value{flex:100 1 20rem}cc-button{flex:1 1 6rem;white-space:nowrap}`]}}window.customElements.define("env-var-input",EnvVarInput);
 //# sourceMappingURL=env-var-input.js.map

dist/index.js

@@ -1,2 +0,2 @@
-export{CcButton}from"./atoms/cc-button.js";export{CcInputText}from"./atoms/cc-input-text.js";export{CcLoader}from"./atoms/cc-loader.js";export{CcToggle}from"./atoms/cc-toggle.js";export{EnvVarCreate}from"./env-var/env-var-create.js";export{EnvVarEditorExpert}from"./env-var/env-var-editor-expert.js";export{EnvVarEditorSimple}from"./env-var/env-var-editor-simple.js";export{EnvVarForm}from"./env-var/env-var-form.js";export{EnvVarInput}from"./env-var/env-var-input.js";
+export{CcButton}from"./atoms/cc-button.js";export{CcExpand}from"./atoms/cc-expand.js";export{CcInputText}from"./atoms/cc-input-text.js";export{CcLoader}from"./atoms/cc-loader.js";export{CcToggle}from"./atoms/cc-toggle.js";export{EnvVarCreate}from"./env-var/env-var-create.js";export{EnvVarEditorExpert}from"./env-var/env-var-editor-expert.js";export{EnvVarEditorSimple}from"./env-var/env-var-editor-simple.js";export{EnvVarForm}from"./env-var/env-var-form.js";export{EnvVarFull}from"./env-var/env-var-full.js";export{EnvVarInput}from"./env-var/env-var-input.js";
 //# sourceMappingURL=index.js.map

dist/translations/translations.en.js

@@ -1,2 +0,2 @@
-module.exports.en={LANGUAGE:"English","env-var-create.name.placeholder":"VARIABLE_NAME","env-var-create.value.placeholder":"variable value","env-var-create.create-button":"Create","env-var-create.errors.invalid-name":({name:e})=>`Name ${e} is invalid`,"env-var-create.errors.already-defined-name":({name:e})=>`Name ${e} is already defined`,"env-var-editor-simple.empty-data":"There are no variables.","env-var-editor-expert.placeholder":'VARIABLE_NAME="variable value"',"env-var-editor-expert.placeholder-readonly":"There are no variables.","env-var-editor-expert.errors.unknown":"Unknown Error","env-var-editor-expert.errors.line":"line","env-var-editor-expert.errors.invalid-name":({name:e})=>`${e} is not a valid variable name`,"env-var-editor-expert.errors.duplicated-name":({name:e})=>`be careful, the name ${e} is already defined`,"env-var-editor-expert.errors.invalid-line":'this line is not valid, the correct pattern is: NAME="VALUE"',"env-var-editor-expert.errors.invalid-value":'the value is not valid, if you use quotes, you need to escape them like this: \\" or quote the whole value.',"env-var-form.mode.simple":"Simple","env-var-form.mode.expert":"Expert","env-var-form.reset":"Reset changes","env-var-form.restart-app":"Restart the app to apply changes","env-var-form.update":"Update changes","env-var-form.error.loading":"Something went wrong while loading environment variables.","env-var-form.error.saving":"Something went wrong while updating environment variables.","env-var-form.error.unknown":"Something went wrong...","env-var-input.delete-button":"Remove","env-var-input.keep-button":"Keep","env-var-input.value-placeholder":"variable value","env-var.heading":"Environment variables","env-var.message":"Environment variables allow you to inject data in your application’s environment.","env-var.link":"Learn more"};
+module.exports.en={LANGUAGE:"English","env-var-create.name.placeholder":"VARIABLE_NAME","env-var-create.value.placeholder":"variable value","env-var-create.create-button":"Create","env-var-create.errors.invalid-name":({name:e})=>`Name ${e} is invalid`,"env-var-create.errors.already-defined-name":({name:e})=>`Name ${e} is already defined`,"env-var-editor-simple.empty-data":"There are no variables.","env-var-editor-expert.placeholder":'VARIABLE_NAME="variable value"',"env-var-editor-expert.placeholder-readonly":"There are no variables.","env-var-editor-expert.errors.unknown":"Unknown Error","env-var-editor-expert.errors.line":"line","env-var-editor-expert.errors.invalid-name":({name:e})=>`${e} is not a valid variable name`,"env-var-editor-expert.errors.duplicated-name":({name:e})=>`be careful, the name ${e} is already defined`,"env-var-editor-expert.errors.invalid-line":'this line is not valid, the correct pattern is: NAME="VALUE"',"env-var-editor-expert.errors.invalid-value":'the value is not valid, if you use quotes, you need to escape them like this: \\" or quote the whole value.',"env-var-form.mode.simple":"Simple","env-var-form.mode.expert":"Expert","env-var-form.reset":"Reset changes","env-var-form.restart-app":"Restart the app to apply changes","env-var-form.update":"Update changes","env-var-form.error.loading":"Something went wrong while loading environment variables.","env-var-form.error.saving":"Something went wrong while updating environment variables.","env-var-form.error.unknown":"Something went wrong...","env-var-input.delete-button":"Remove","env-var-input.keep-button":"Keep","env-var-input.value-placeholder":"variable value","env-var-full.heading":"Environment variables","env-var-full.message":"Environment variables allow you to inject data in your application’s environment.","env-var-full.link":"Learn more"};
 //# sourceMappingURL=translations.en.js.map

dist/translations/translations.fr.js

@@ -1,2 +0,2 @@
-module.exports.fr={LANGUAGE:"Français","env-var-create.name.placeholder":"NOM_DE_LA_VARIABLE","env-var-create.value.placeholder":"valeur de la variable","env-var-create.create-button":"Créer","env-var-create.errors.invalid-name":({name:e})=>`Le nom ${e} n'est pas valide`,"env-var-create.errors.already-defined-name":({name:e})=>`Le nom ${e} est déjà défini`,"env-var-editor-simple.empty-data":"Il n'y a pas de variable.","env-var-editor-expert.placeholder":'NOM_DE_LA_VARIABLE="valeur de la variable"',"env-var-editor-expert.placeholder-readonly":"Il n'y a pas de variable.","env-var-editor-expert.errors.unknown":"Erreur inconnue","env-var-editor-expert.errors.line":"ligne","env-var-editor-expert.errors.invalid-name":({name:e})=>`Le nom ${e} n'est pas valide`,"env-var-editor-expert.errors.duplicated-name":({name:e})=>`attention, le nom ${e} est déjà défini`,"env-var-editor-expert.errors.invalid-line":'cette ligne est invalide, le format correct est : NOM="VALEUR"',"env-var-editor-expert.errors.invalid-value":'la valeur est invalide, si vous utilisez des guillements, vous devez les échapper comme ceci : \\" ou alors mettre toute la valeur entre guillemets.',"env-var-form.mode.simple":"Simple","env-var-form.mode.expert":"Expert","env-var-form.reset":"Annuler les changements","env-var-form.restart-app":"Redémarrer l'app pour appliquer les changements","env-var-form.update":"Mettre à jour les changements","env-var-form.error.loading":"Une erreur est survenue pendant le chargement des variables d'environnement.","env-var-form.error.saving":"Une erreur est survenue pendant la mise à jour des variables d'environnement.","env-var-form.error.unknown":"Une erreur est survenue...","env-var-input.delete-button":"Enlever","env-var-input.keep-button":"Garder","env-var-input.value-placeholder":"valeur de la variable","env-var.heading":"Variables d'environnement","env-var.message":"Les variables d'environnement sont des variables dynamiques que vous pouvez injecter dans votre application.","env-var.link":"En savoir plus"};
+module.exports.fr={LANGUAGE:"Français","env-var-create.name.placeholder":"NOM_DE_LA_VARIABLE","env-var-create.value.placeholder":"valeur de la variable","env-var-create.create-button":"Créer","env-var-create.errors.invalid-name":({name:e})=>`Le nom ${e} n'est pas valide`,"env-var-create.errors.already-defined-name":({name:e})=>`Le nom ${e} est déjà défini`,"env-var-editor-simple.empty-data":"Il n'y a pas de variable.","env-var-editor-expert.placeholder":'NOM_DE_LA_VARIABLE="valeur de la variable"',"env-var-editor-expert.placeholder-readonly":"Il n'y a pas de variable.","env-var-editor-expert.errors.unknown":"Erreur inconnue","env-var-editor-expert.errors.line":"ligne","env-var-editor-expert.errors.invalid-name":({name:e})=>`Le nom ${e} n'est pas valide`,"env-var-editor-expert.errors.duplicated-name":({name:e})=>`attention, le nom ${e} est déjà défini`,"env-var-editor-expert.errors.invalid-line":'cette ligne est invalide, le format correct est : NOM="VALEUR"',"env-var-editor-expert.errors.invalid-value":'la valeur est invalide, si vous utilisez des guillements, vous devez les échapper comme ceci : \\" ou alors mettre toute la valeur entre guillemets.',"env-var-form.mode.simple":"Simple","env-var-form.mode.expert":"Expert","env-var-form.reset":"Annuler les changements","env-var-form.restart-app":"Redémarrer l'app pour appliquer les changements","env-var-form.update":"Mettre à jour les changements","env-var-form.error.loading":"Une erreur est survenue pendant le chargement des variables d'environnement.","env-var-form.error.saving":"Une erreur est survenue pendant la mise à jour des variables d'environnement.","env-var-form.error.unknown":"Une erreur est survenue...","env-var-input.delete-button":"Enlever","env-var-input.keep-button":"Garder","env-var-input.value-placeholder":"valeur de la variable","env-var-full.heading":"Variables d'environnement","env-var-full.message":"Les variables d'environnement sont des variables dynamiques que vous pouvez injecter dans votre application.","env-var-full.link":"En savoir plus"};
 //# sourceMappingURL=translations.fr.js.map

package.json

 {
   "name": "@clevercloud/components",
-  "version": "1.0.0-alpha.9",
+  "version": "1.0.0",
   "description": "This is a Work In Progress to introduce Web Components in our Clever Cloud Web based UIs.",
@@ -10,6 +10,7 @@ "main": "dist/index.js",
   "scripts": {
-    "prepack": "npm run components:check-i18n && npm run components:build",
+    "prepack": "npm run lint && npm run components:check-i18n && npm run components:build",
     "components:build": "node tasks/minify-components.js",
     "components:check-i18n": "node tasks/check-i18n.js",
-    "components:docs": "npx wca analyze components/** --format markdown --outDir .components-docs",
+    "components:docs": "wca analyze components/** --format markdown --outDir .components-docs",
+    "install": "npm run components:docs && npm run storybook:build",
     "lint": "eslint components stories tasks",
@@ -23,7 +24,6 @@ "lint:fix": "eslint --fix components stories tasks",
     "lit-element": "^2.2.0",
-    "lit-html": "^1.1.0",
-    "mem": "^5.1.0"
+    "lit-html": "^1.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.5",
+    "@babel/core": "^7.5.0",
     "@storybook/addon-actions": "^5.1.9",
@@ -33,5 +33,6 @@ "@storybook/addon-knobs": "^5.1.9",
     "@storybook/html": "^5.1.9",
+    "@storybook/theming": "^5.1.9",
     "babel-loader": "^8.0.6",
     "babel-plugin-template-html-minifier": "^3.0.1",
-    "del": "^4.1.1",
+    "del": "^5.0.0",
     "eslint": "^6.0.1",
@@ -43,9 +44,9 @@ "eslint-config-standard": "^12.0.0",
     "eslint-plugin-standard": "^4.0.0",
-    "fs-extra": "^8.0.1",
+    "fs-extra": "^8.1.0",
     "glob": "^7.1.4",
     "i18n-extract": "^0.6.6",
     "node-static": "^0.7.11",
-    "terser": "^4.0.0",
-    "web-component-analyzer": "0.1.9"
+    "terser": "^4.0.2",
+    "web-component-analyzer": "0.1.10"
   }
 }

README.md

@@ -1,3 +0,31 @@
-# clever-components
+# Collection of Web Components by Clever Cloud
 
-This is a *Work In Progress* to introduce **Web Components** in our Clever Cloud Web based UIs.
+## What is this?
+
+This project contains a collection of Web Components made by Clever Cloud.
+
+Some of those components are low-level like `<cc-button>`, `<cc-input-text>` or `<cc-loader>`,
+the other components are more high-level and specific to Clever Cloud's domain model.
+
+We use them on different Web UIs we have (public and internal).
+
+## Why is it public?
+
+1. We want to share our knowledge and experience with Web Components along with the tooling we used to build them. We hope it will help others for their own components.
+1. We use those components ourselves but we also want our clients and partners to use them in their own custom Web UIs based on our products.
+1. We think it's a great way for our clients to give feedbacks (and even contributions) on small parts of our Web UIs.
+
+## Can I see those components?
+
+All our components are showcased with "stories" using [Storybook](https://github.com/storybookjs/storybook).
+You can see all our components (and their stories) on [this preview](https://www.clever-cloud.com/doc/clever-components/).
+
+Storybook is a great tool to present your components in many different situations.
+This way, you can check how they behave with different inputs (properties, attributes...) and make sure they produce the right outputs (emit events...).
+
+We also use [web-component-analyzer](https://github.com/runem/web-component-analyzer) to generate a documentation spec sheet for each component.
+You can find it in the *Notes* tab of a component's story ([example](https://www.clever-cloud.com/doc/clever-components/?path=/info/atoms--cc-button)).
+
+## Can I use them in my project?
+
+The first stable version will be [available on npm](https://www.npmjs.com/package/@clevercloud/components) soon.

New alerts

Install scripts

Supply chain risk

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dependency count

2

decreased by-33.33%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

32

increased by700%

Worsened metrics

Total package byte prevSize

119677

decreased by-4.02%

Dev dependency count

21

increased by5%

Number of package files

39

decreased by-11.36%

Lines of code

121

decreased by-6.2%

Number of high supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedmem@^5.1.0

• - Removedmap-age-cleaner@0.1.3(transitive)

• - Removedmem@5.1.1(transitive)

• - Removedmimic-fn@2.1.0(transitive)

• - Removedp-defer@1.0.0(transitive)

• - Removedp-is-promise@2.1.0(transitive)