@clevercloud/components - npm Package Compare versions

Comparing version 1.0.0-alpha.3 to 1.0.0-alpha.4

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},loading:{type:Boolean}}}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.loading{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}`]}render(){const o={danger:this.danger&&!this.success&&!this.primary,success:!this.danger&&this.success&&!this.primary,primary:!this.danger&&!this.success&&this.primary,loading:this.loading};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.loading}"><slot></slot></button>`}}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";export class CcButton extends o{static get properties(){return{disabled:{type:Boolean},primary:{type:Boolean},success:{type:Boolean},danger:{type:Boolean},outlined:{type:Boolean},loading:{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,loading:this.loading};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.loading}"><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.loading{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{LitElement as e,css as t,html as i}from"lit-element";import{classMap as o}from"lit-html/directives/class-map.js";import{dispatchCustomEvent as n}from"../lib/events";import{pulse as r}from"../styles/animations.js";export class CcInputText extends e{static get properties(){return{disabled:{type:Boolean},readonly:{type:Boolean},loading:{type:Boolean},multi:{type:Boolean},value:{type:String},name:{type:String},placeholder:{type:String}}}constructor(){super(),this.name="",this.value="",this.placeholder=""}static get styles(){return[r,t`:host{display:inline-block;box-sizing:border-box;padding:.2rem;vertical-align:top}:host([multi]){display:block}:host([loading]){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.loading{animation-direction:alternate;animation-duration:.5s;animation-iteration-count:infinite;animation-name:pulse;background:#eee;border-color:#eee;color:transparent}.input[rows]{height:calc(calc(calc(var(--rows,1) * 1.7rem) + .3rem) + 2px);white-space:pre}.input[rows="1"]{height:2rem}`]}render(){const e=(this.value||"").split("\n").length;return this.multi?i`<textarea class="${o({input:!0,loading:this.loading})}" style="--rows:${e}" rows="${e}" ?disabled="${this.disabled||this.loading}" ?readonly="${this.readonly}" .value="${this.value}" name="${this.name}" placeholder="${this.placeholder}" @input="${this.t}" @focus="${this.i}" spellcheck="false" @keydown="${this.o}"></textarea>`:i`<input type="text" class="${o({input:!0,loading:this.loading})}" ?disabled="${this.disabled||this.loading}" ?readonly="${this.readonly}" .value="${this.value}" placeholder="${this.placeholder}" @input="${this.t}" @focus="${this.i}" spellcheck="false" @keydown="${this.o}">`}t(e){this.value=e.target.value,n(this,"input",{value:this.value})}o(e){e.stopPropagation()}i(e){this.readonly&&e.target.select()}focus(){this.shadowRoot.querySelector(".input").focus()}}window.customElements.define("cc-input-text",CcInputText);
+import{LitElement as e,css as t,html as i}from"lit-element";import{classMap as o}from"lit-html/directives/class-map.js";import{dispatchCustomEvent as n}from"../lib/events";import{pulse as r}from"../styles/animations.js";export class CcInputText extends e{static get properties(){return{disabled:{type:Boolean},readonly:{type:Boolean},loading:{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,n(this,"input",{value:this.value})}i(e){this.readonly&&e.target.select()}o(e){e.stopPropagation()}render(){const e=(this.value||"").split("\n").length;return this.multi?i`<textarea class="${o({input:!0,loading:this.loading})}" style="--rows:${e}" rows="${e}" ?disabled="${this.disabled||this.loading}" ?readonly="${this.readonly}" .value="${this.value}" name="${this.name}" placeholder="${this.placeholder}" @input="${this.t}" @focus="${this.i}" spellcheck="false" @keydown="${this.o}"></textarea>`:i`<input type="text" class="${o({input:!0,loading:this.loading})}" ?disabled="${this.disabled||this.loading}" ?readonly="${this.readonly}" .value="${this.value}" placeholder="${this.placeholder}" @input="${this.t}" @focus="${this.i}" spellcheck="false" @keydown="${this.o}">`}static get styles(){return[r,t`:host{display:inline-block;box-sizing:border-box;padding:.2rem;vertical-align:top}:host([multi]){display:block}:host([loading]){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.loading{animation-direction:alternate;animation-duration:.5s;animation-iteration-count:infinite;animation-name:pulse;background:#eee;border-color:#eee;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/atoms/cc-loader.js

@@ -1,2 +0,2 @@
-import{css as r,html as e,LitElement as t}from"lit-element";export class CcLoader extends t{static get styles(){return[r`:host{align-items:center;display:flex;justify-content:center}svg{animation:1.75s linear infinite progress-circular-rotate;height:100%;max-height:2.5rem;max-width:2.5rem;width:100%}circle{animation:1.75s ease-in-out infinite progress-circular-dash;fill:transparent;stroke-linecap:round;stroke-width:5px;stroke:var(--cc-loader-color,#2653af)}@keyframes progress-circular-rotate{0%{transform:rotate(0turn)}100%{transform:rotate(1turn)}}@keyframes progress-circular-dash{0%{stroke-dasharray:0,100px;stroke-dashoffset:0}50%{stroke-dasharray:80px,100px;stroke-dashoffset:0}100%{stroke-dasharray:80px,100px;stroke-dashoffset:-100px}}`]}render(){return e`<svg xmlns="http://www.w3.org/2000/svg" viewBox="20 20 40 40"><circle cx="40px" cy="40px" r="16px"></circle></svg>`}}window.customElements.define("cc-loader",CcLoader);
+import{LitElement as r,css as e,html as t}from"lit-element";export class CcLoader extends r{render(){return t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="20 20 40 40"><circle cx="40px" cy="40px" r="16px"></circle></svg>`}static get styles(){return[e`:host{align-items:center;display:flex;justify-content:center}svg{animation:1.75s linear infinite progress-circular-rotate;height:100%;max-height:2.5rem;max-width:2.5rem;width:100%}circle{animation:1.75s ease-in-out infinite progress-circular-dash;fill:transparent;stroke-linecap:round;stroke-width:5px;stroke:var(--cc-loader-color,#2653af)}@keyframes progress-circular-rotate{0%{transform:rotate(0turn)}100%{transform:rotate(1turn)}}@keyframes progress-circular-dash{0%{stroke-dasharray:0,100px;stroke-dashoffset:0}50%{stroke-dasharray:80px,100px;stroke-dashoffset:0}100%{stroke-dasharray:80px,100px;stroke-dashoffset:-100px}}`]}}window.customElements.define("cc-loader",CcLoader);
 //# sourceMappingURL=cc-loader.js.map

dist/atoms/cc-toggle.js

@@ -1,2 +0,2 @@
-import{css as e,html as o,LitElement as t}from"lit-element";import{classMap as l}from"lit-html/directives/class-map.js";import{repeat as r}from"lit-html/directives/repeat.js";import{dispatchCustomEvent as i}from"../lib/events.js";export class CcToggle extends t{static get properties(){return{value:{type:String},disabled:{type:Boolean},choices:{type:Array,attribute:!1}}}static get styles(){return[e`:host{--toggle-color:hsl(210, 23%, 26%);display:flex;margin:.2rem}.toggle-group{border-radius:.15rem;border:1px solid var(--toggle-color);display:flex;overflow:hidden}.toggle-group.enabled:focus-within{box-shadow:0 0 0 .2em rgba(50,115,220,.25);outline:0}.toggle-group.enabled:hover{box-shadow:0 1px 3px #888}.toggle-group.enabled:active{box-shadow:none;outline:0}.toggle-group.disabled{opacity:.5}input{-moz-appearance:none;-webkit-appearance:none;appearance:none;border:0;display:block;height:0;margin:0;outline:0;width:0}label{font-family:Noto Sans;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-transform:uppercase;font-weight:700;font-size:14px;color:var(--toggle-color);padding:.35rem .5rem}.disabled label{cursor:default}input:not(:checked):enabled:hover+label{background-color:#eff2f5}input:checked+label{background-color:var(--toggle-color);color:#fff;position:relative}`]}render(){return o`<div class="${l({"toggle-group":!0,disabled:this.disabled,enabled:!this.disabled})}">${r(this.choices,({value:e})=>e,({label:e,value:t})=>o`<input type="radio" name="mode" value="${t}" id="${t}" ?disabled="${this.disabled}" ?checked="${this.value===t}" @change="${this.o}"> <label for="${t}">${e}</label>`)}</div>`}o(e){this.value=e.target.value,i(this,"input",this.value)}}window.customElements.define("cc-toggle",CcToggle);
+import{css as e,html as o,LitElement as t}from"lit-element";import{classMap as l}from"lit-html/directives/class-map.js";import{dispatchCustomEvent as r}from"../lib/events.js";import{repeat as i}from"lit-html/directives/repeat.js";export class CcToggle extends t{static get properties(){return{value:{type:String},disabled:{type:Boolean},choices:{type:Array,attribute:!1}}}o(e){this.value=e.target.value,r(this,"input",this.value)}render(){return o`<div class="${l({"toggle-group":!0,disabled:this.disabled,enabled:!this.disabled})}">${i(this.choices,({value:e})=>e,({label:e,value:t})=>o`<input type="radio" name="mode" value="${t}" id="${t}" ?disabled="${this.disabled}" ?checked="${this.value===t}" @change="${this.o}"> <label for="${t}">${e}</label>`)}</div>`}static get styles(){return[e`:host{--toggle-color:hsl(210, 23%, 26%);display:flex;margin:.2rem}.toggle-group{border-radius:.15rem;border:1px solid var(--toggle-color);display:flex;overflow:hidden}.toggle-group.enabled:focus-within{box-shadow:0 0 0 .2em rgba(50,115,220,.25);outline:0}.toggle-group.enabled:hover{box-shadow:0 1px 3px #888}.toggle-group.enabled:active{box-shadow:none;outline:0}.toggle-group.disabled{opacity:.5}input{-moz-appearance:none;-webkit-appearance:none;appearance:none;border:0;display:block;height:0;margin:0;outline:0;width:0}label{font-family:Noto Sans;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-transform:uppercase;font-weight:700;font-size:14px;color:var(--toggle-color);padding:.35rem .5rem}.disabled label{cursor:default}input:not(:checked):enabled:hover+label{background-color:#eff2f5}input:checked+label{background-color:var(--toggle-color);color:#fff;position:relative}`]}}window.customElements.define("cc-toggle",CcToggle);
 //# sourceMappingURL=cc-toggle.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{LitElement as t,css as e,html as i}from"lit-element";import{dispatchCustomEvent as a}from"../lib/events";import r from"../lib/env-vars.js";import n from"@i18n";export class EnvVarCreate extends t{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()}static get styles(){return e`:host{display:block}.wrapper{display:flex;flex-wrap:wrap;padding:0;width:100%}cc-input-text[name=name]{flex:1 1 0;min-width:10rem}.input-btn{display:flex;flex:2 1 0}cc-input-text[name=value]{flex:1 1 0;min-width:20rem}cc-button{width:7rem}.errors{margin:.5rem .2rem .2rem}`}render(){const t=!r.validateName(this.t),e=this.variablesNames.includes(this.t),a=t||e;return i`<div class="wrapper"><cc-input-text id="name-input" name="name" .value="${this.t}" ?disabled="${this.disabled}" placeholder="${n("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}" ?disabled="${this.disabled}" placeholder="${n("env-var-create.value.placeholder")}" @cc-input-text:input="${this.l}"></cc-input-text><cc-button primary ?disabled="${a||this.disabled}" @click="${this.p}">${n("env-var-create.create-button")}</cc-button></span></div><div class="errors" ?hidden="${!t||""===this.t}">⚠️ ${n("env-var-create.errors.invalid-name",{name:this.t})}</div><div class="errors" ?hidden="${!e}">⚠️ ${n("env-var-create.errors.already-defined-name",{name:this.t})}</div>`}s({detail:t}){this.t=t.value}l({detail:t}){this.i=t.value}p(t){a(this,"create",{name:this.t,value:this.i}),this.reset(),this.shadowRoot.getElementById("name-input").focus()}reset(){this.t="",this.i=""}}window.customElements.define("env-var-create",EnvVarCreate);
+import"../atoms/cc-button.js";import"../atoms/cc-input-text.js";import{LitElement as t,css as e,html as i}from"lit-element";import{dispatchCustomEvent as a}from"../lib/events";import r from"../lib/env-vars.js";import n from"@i18n";export class EnvVarCreate extends t{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:t}){this.t=t.value}l({detail:t}){this.i=t.value}p(t){a(this,"create",{name:this.t,value:this.i}),this.reset(),this.shadowRoot.getElementById("name-input").focus()}render(){const t=!r.validateName(this.t),e=this.variablesNames.includes(this.t),a=t||e;return i`<div class="wrapper"><cc-input-text id="name-input" name="name" .value="${this.t}" ?disabled="${this.disabled}" placeholder="${n("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}" ?disabled="${this.disabled}" placeholder="${n("env-var-create.value.placeholder")}" @cc-input-text:input="${this.l}"></cc-input-text><cc-button primary ?disabled="${a||this.disabled}" @click="${this.p}">${n("env-var-create.create-button")}</cc-button></span></div><div class="errors" ?hidden="${!t||""===this.t}">⚠️ ${n("env-var-create.errors.invalid-name",{name:this.t})}</div><div class="errors" ?hidden="${!e}">⚠️ ${n("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;padding:0;width:100%}cc-input-text[name=name]{flex:1 1 0;min-width:10rem}.input-btn{display:flex;flex:2 1 0}cc-input-text[name=value]{flex:1 1 0;min-width:20rem}cc-button{width:7rem}.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 t,LitElement as r}from"lit-element";import{dispatchCustomEvent as i}from"../lib/events.js";import n from"../lib/env-vars.js";import s from"@i18n";export class EnvVarEditorExpert extends r{static get properties(){return{disabled:{type:Boolean},t:{type:Array,attribute:!1},i:{type:Array,attribute:!1},s:{type:Boolean,attribute:!1}}}constructor(){super(),this.disabled=!1,this.variables=null}static get defaultLoadingVariables(){return[{name:"VARIABLE_ONE",value:""},{name:"VARIABLE_FOOBAR",value:""},{name:"VARIABLE_PORT",value:""}]}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}`}set variables(e){this.s=null==e;const t=(this.s?EnvVarEditorExpert.defaultLoadingVariables:e).filter(({isDeleted:e})=>!e);this.t=n.toNameEqualsValueString(t),this.l=[]}set l(e){this.i=e.map(({type:e,name:t,pos:r})=>e===n.ERROR_TYPES.INVALID_NAME?{line:r.line,msg:s("env-var-editor-expert.errors.invalid-name",{name:t})}:e===n.ERROR_TYPES.DUPLICATED_NAME?{line:r.line,msg:s("env-var-editor-expert.errors.duplicated-name",{name:t})}:e===n.ERROR_TYPES.INVALID_LINE?{line:r.line,msg:s("env-var-editor-expert.errors.invalid-line")}:e===n.ERROR_TYPES.INVALID_VALUE?{line:r.line,msg:s("env-var-editor-expert.errors.invalid-value")}:{line:"?",msg:s("env-var-editor-expert.errors.unknown")})}render(){return t`<cc-input-text multi .value="${this.t}" @cc-input-text:input="${this.o}" ?disabled="${this.disabled}" ?loading="${this.s}"></cc-input-text><ul class="error-list" ?hidden="${0===this.i.length}">${this.i.map(({line:e,msg:r})=>t`<li class="error-item">⚠️ <strong>line ${e}:</strong> ${r}</li>`)}</ul>`}o({detail:e}){const{variables:t,errors:r}=n.parseRaw(e.value);this.l=r,0===r.length&&i(this,"change",t)}}window.customElements.define("env-var-editor-expert",EnvVarEditorExpert);
+import"../atoms/cc-input-text.js";import{css as e,html as t,LitElement as r}from"lit-element";import{dispatchCustomEvent as i}from"../lib/events.js";import n from"../lib/env-vars.js";import s from"@i18n";export class EnvVarEditorExpert extends r{static get properties(){return{disabled:{type:Boolean},t:{type:Array,attribute:!1},i:{type:Array,attribute:!1},s:{type:Boolean,attribute:!1}}}constructor(){super(),this.disabled=!1,this.variables=null}static get defaultLoadingVariables(){return[{name:"VARIABLE_ONE",value:""},{name:"VARIABLE_FOOBAR",value:""},{name:"VARIABLE_PORT",value:""}]}set variables(e){this.s=null==e;const t=(this.s?EnvVarEditorExpert.defaultLoadingVariables:e).filter(({isDeleted:e})=>!e);this.t=n.toNameEqualsValueString(t),this.l=[]}set l(e){this.i=e.map(({type:e,name:t,pos:r})=>e===n.ERROR_TYPES.INVALID_NAME?{line:r.line,msg:s("env-var-editor-expert.errors.invalid-name",{name:t})}:e===n.ERROR_TYPES.DUPLICATED_NAME?{line:r.line,msg:s("env-var-editor-expert.errors.duplicated-name",{name:t})}:e===n.ERROR_TYPES.INVALID_LINE?{line:r.line,msg:s("env-var-editor-expert.errors.invalid-line")}:e===n.ERROR_TYPES.INVALID_VALUE?{line:r.line,msg:s("env-var-editor-expert.errors.invalid-value")}:{line:"?",msg:s("env-var-editor-expert.errors.unknown")})}o({detail:e}){const{variables:t,errors:r}=n.parseRaw(e.value);this.l=r,0===r.length&&i(this,"change",t)}render(){return t`<cc-input-text multi .value="${this.t}" @cc-input-text:input="${this.o}" ?disabled="${this.disabled}" ?loading="${this.s}"></cc-input-text><ul class="error-list" ?hidden="${0===this.i.length}">${this.i.map(({line:e,msg:r})=>t`<li class="error-item">⚠️ <strong>line ${e}:</strong> ${r}</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 a}from"../lib/events.js";import{repeat as r}from"lit-html/directives/repeat.js";import n from"@i18n";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 defaultLoadingVariables(){return[{name:"VARIABLE_ONE",value:""},{name:"VARIABLE_FOOBAR",value:""},{name:"VARIABLE_PORT",value:""}]}static get styles(){return e`:host{display:block}:host([hidden]){display:none}env-var-create{margin-bottom:1rem}env-var-input{margin-bottom:.25rem}`}render(){const e=null==this.variables?EnvVarEditorSimple.defaultLoadingVariables: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>`;return t`${a}<div ?hidden="${null!=e&&0!==e.length}">${n("env-var-editor-simple.empty-data")}</div>${r(e,({name:e})=>e,({name:e,value:i,isNew:a,isEdited:r,isDeleted:n})=>t`<env-var-input name="${e}" value="${i}" ?is-new="${a}" ?is-edited="${r}" ?is-deleted="${n}" ?loading="${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>`)}`}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)}}window.customElements.define("env-var-editor-simple",EnvVarEditorSimple);
+import"./env-var-create.js";import"./env-var-input.js";import{LitElement as e,css as t,html as i}from"lit-element";import{dispatchCustomEvent as a}from"../lib/events.js";import r from"@i18n";import{repeat as n}from"lit-html/directives/repeat.js";export class EnvVarEditorSimple extends e{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 defaultLoadingVariables(){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.defaultLoadingVariables:this.variables,t=null==this.variables?[]:this.variables.map(({name:e})=>e),a=this.readonly?"":i`<env-var-create ?disabled="${null==this.variables||this.disabled}" .variablesNames="${t}" @env-var-create:create="${this.t}"></env-var-create>`;return i`${a}<div ?hidden="${null!=e&&0!==e.length}">${r("env-var-editor-simple.empty-data")}</div>${n(e,({name:e})=>e,({name:e,value:t,isNew:a,isEdited:r,isDeleted:n})=>i`<env-var-input name="${e}" value="${t}" ?is-new="${a}" ?is-edited="${r}" ?is-deleted="${n}" ?loading="${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 t`:host{display:block}:host([hidden]){display:none}env-var-create{margin-bottom:1rem}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"./env-var-editor-expert.js";import"./env-var-editor-simple.js";import{css as e,html as t,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 n from"@i18n";export class EnvVarForm extends i{static get properties(){return{saving:{type:Boolean},error:{type:String},t:{type:Array,attribute:!1},i:{type:Array,attribute:!1},s:{type:String,attribute:!1},o:{type:Boolean,attribute:!1}}}constructor(){super(),this.s="SIMPLE",this.saving=!1,this.error=null}static get modes(){return[{label:n("env-var-form.mode.simple"),value:"SIMPLE"},{label:n("env-var-form.mode.expert"),value:"EXPERT"}]}static get styles(){return e`:host{display:block;background:#fff;border-radius:.25rem;border:1px solid #bcc2d1;padding:1rem;position:relative}.editor,.mode-switcher{margin-bottom:1rem}.mode-switcher{justify-content:center}.saving{filter:blur(.3rem)}.button-bar{display:flex;justify-content:space-between}.saving-loader{height:100%;left:0;position:absolute;top:0;width:100%}.error-container{height:100%;left:0;position:absolute;top:0;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.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}`}set variables(e){this.l=e,this.o=!0,this.t=e.sort((e,t)=>e.name.localeCompare(t.name)),this.i=e.sort((e,t)=>e.name.localeCompare(t.name))}render(){const e=this.saving?t`<cc-loader class="saving-loader"></cc-loader>`:"",i="loading"===this.error?n("env-var-form.error.loading"):"saving"===this.error?n("env-var-form.error.saving"):n("env-var-form.error.unknown"),s=null!=this.error?t`<div class="error-container"><div class="panel"><div class="error-message">⚠️ ${i}</div><cc-button @click="${()=>this.h(this.error)}">OK</cc-button></div></div>`:"";return 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.v}"></cc-toggle><div class="${r({editor:!0,saving:this.saving||null!=this.error})}"><env-var-editor-simple ?hidden="${"SIMPLE"!==this.s}" .variables="${this.t}" ?disabled="${this.saving||null!=this.error}" @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}" @env-var-editor-expert:change="${this.m}"></env-var-editor-expert></div><div class="button-bar"><cc-button ?disabled="${null==this.t||this.saving||null!=this.error}" @click="${this.u}">${n("env-var-form.reset")}</cc-button><cc-button success ?disabled="${null==this.t||this.saving||this.o||null!=this.error}" @click="${this.p}">${n("env-var-form.update")}</cc-button></div>${e} ${s}`}m({detail:e}){const t=this.l.filter(t=>{const i=e.find(e=>e.name===t.name);return(null==i||i.isDeleted)&&!t.isNew}).map(e=>({...e,isDeleted:!0})),i=e.filter(e=>{return null==this.l.find(t=>t.name===e.name)}).map(e=>({...e,isNew:!0})),r=e.filter(e=>{const r=t.find(t=>t.name===e.name),s=i.find(t=>t.name===e.name);return!r&&!s}).map(e=>{const t=this.l.find(t=>t.name===e.name).value!==e.value;return{...e,isEdited:t}}),s=[...t,...i,...r];this.o=!s.some(({isDeleted:e,isNew:t,isEdited:i})=>e||t||i),this.t=s.sort((e,t)=>e.name.localeCompare(t.name))}v({detail:e}){"EXPERT"===e&&(this.i=this.t),this.s=e}u(){this.variables=this.l}p(){const e=this.t.filter(({isDeleted:e})=>!e).map(({name:e,value:t})=>({name:e,value:t}));s(this,"submit",e)}h(e){s(this,"dismissed-error",e)}}window.customElements.define("env-var-form",EnvVarForm);
+import"../atoms/cc-button.js";import"../atoms/cc-loader.js";import"./env-var-editor-expert.js";import"./env-var-editor-simple.js";import{css as e,html as t,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 n from"@i18n";export class EnvVarForm extends i{static get properties(){return{saving:{type:Boolean},error:{type:String},t:{type:Array,attribute:!1},i:{type:Array,attribute:!1},s:{type:String,attribute:!1},o:{type:Boolean,attribute:!1}}}constructor(){super(),this.s="SIMPLE",this.saving=!1,this.error=null,console.log({EnvVarForm:EnvVarForm}),console.log(this)}static get modes(){return[{label:n("env-var-form.mode.simple"),value:"SIMPLE"},{label:n("env-var-form.mode.expert"),value:"EXPERT"}]}set variables(e){this.l=e,this.o=!0,this.t=e.sort((e,t)=>e.name.localeCompare(t.name)),this.i=e.sort((e,t)=>e.name.localeCompare(t.name))}h({detail:e}){const t=this.l.filter(t=>{const i=e.find(e=>e.name===t.name);return(null==i||i.isDeleted)&&!t.isNew}).map(e=>({...e,isDeleted:!0})),i=e.filter(e=>{return null==this.l.find(t=>t.name===e.name)}).map(e=>({...e,isNew:!0})),r=e.filter(e=>{const r=t.find(t=>t.name===e.name),s=i.find(t=>t.name===e.name);return!r&&!s}).map(e=>{const t=this.l.find(t=>t.name===e.name).value!==e.value;return{...e,isEdited:t}}),s=[...t,...i,...r];this.o=!s.some(({isDeleted:e,isNew:t,isEdited:i})=>e||t||i),this.t=s.sort((e,t)=>e.name.localeCompare(t.name))}v({detail:e}){"EXPERT"===e&&(this.i=this.t),this.s=e}m(){this.variables=this.l}u(){const e=this.t.filter(({isDeleted:e})=>!e).map(({name:e,value:t})=>({name:e,value:t}));s(this,"submit",e)}p(e){s(this,"dismissed-error",e)}get g(){return"loading"===this.error?n("env-var-form.error.loading"):"saving"===this.error?n("env-var-form.error.saving"):n("env-var-form.error.unknown")}render(){const e=null!=this.error?t`<div class="error-container"><div class="panel"><div class="error-message">⚠️ ${this.g}</div><cc-button @click="${()=>this.p(this.error)}">OK</cc-button></div></div>`:"",i=this.saving?t`<cc-loader class="saving-loader"></cc-loader>`:"";return 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.v}"></cc-toggle><div class="${r({editor:!0,saving:this.saving||null!=this.error})}"><env-var-editor-simple ?hidden="${"SIMPLE"!==this.s}" .variables="${this.t}" ?disabled="${this.saving||null!=this.error}" @env-var-editor-simple:change="${this.h}"></env-var-editor-simple><env-var-editor-expert ?hidden="${"EXPERT"!==this.s}" .variables="${this.i}" ?disabled="${this.saving||null!=this.error}" @env-var-editor-expert:change="${this.h}"></env-var-editor-expert></div><div class="button-bar"><cc-button ?disabled="${null==this.t||this.saving||null!=this.error}" @click="${this.m}">${n("env-var-form.reset")}</cc-button><cc-button success ?disabled="${null==this.t||this.saving||this.o||null!=this.error}" @click="${this.u}">${n("env-var-form.update")}</cc-button></div>${i} ${e}`}static get styles(){return e`:host{display:block;background:#fff;border-radius:.25rem;border:1px solid #bcc2d1;padding:1rem;position:relative}.editor,.mode-switcher{margin-bottom:1rem}.mode-switcher{justify-content:center}.saving{filter:blur(.3rem)}.button-bar{display:flex;justify-content:space-between}.saving-loader{height:100%;left:0;position:absolute;top:0;width:100%}.error-container{height:100%;left:0;position:absolute;top:0;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.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 t,html as e,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{pulse as a}from"../styles/animations.js";import o from"@i18n";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"},loading:{type:Boolean},disabled:{type:Boolean},readonly:{type:Boolean}}}constructor(){super(),this.value="",this.isNew=!1,this.isEdited=!1,this.isDeleted=!1,this.loading=!1,this.disabled=!1}static get styles(){return[a,t`:host{align-items:flex-start;display:flex;flex-wrap:wrap;width:100%}:host([hidden]){display:none}.icon{font-family:monospace;font-size:.9rem;height:2rem;line-height:2rem;padding:.2rem}.label{box-sizing:border-box;display:inline-block;flex:1 1 0;font-family:monospace;font-size:14px;line-height:1.4rem;margin:.2rem;min-width:12rem;padding:.3rem 0;word-break:break-all;position:relative;background-color:#fff}.label.loading .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{align-items:flex-start;display:flex;flex:2 1 0}cc-input-text{flex:1 1 0;min-width:20rem}cc-button{width:7rem}`]}render(){const t=this.isDeleted?e`<cc-button ?loading="${this.loading}" ?disabled="${this.disabled}" @click="${this.t}">${o("env-var-input.keep-button")}</cc-button>`:e`<cc-button ?loading="${this.loading}" ?disabled="${this.disabled}" danger outlined @click="${this.i}">${o("env-var-input.delete-button")}</cc-button>`,i=this.readonly?"":t;return e`<span class="${n({label:!0,loading:this.loading})}"><span class="text">${this.name}</span> </span><span class="input-btn"><cc-input-text multi .value="${this.value}" name="${this.name}" ?disabled="${this.isDeleted||this.disabled}" ?loading="${this.loading}" ?readonly="${this.readonly}" .placeholder="${o("env-var-input.value-placeholder")}" @input="${this.s}"></cc-input-text>${i}</span>`}s(t){this.value=t.target.value,this.isValid=s(this,"input",{name:this.name,value:this.value})}i(){s(this,"delete",{name:this.name})}t(){s(this,"keep",{name:this.name})}}window.customElements.define("env-var-input",EnvVarInput);
+import"../atoms/cc-button.js";import"../atoms/cc-input-text.js";import{LitElement as t,css as e,html 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 a from"@i18n";import{pulse as o}from"../styles/animations.js";export class EnvVarInput extends t{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"},loading:{type:Boolean},disabled:{type:Boolean},readonly:{type:Boolean}}}constructor(){super(),this.value="",this.isNew=!1,this.isEdited=!1,this.isDeleted=!1,this.loading=!1,this.disabled=!1}t(t){this.value=t.target.value,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 t=this.isDeleted?i`<cc-button ?loading="${this.loading}" ?disabled="${this.disabled}" @click="${this.s}">${a("env-var-input.keep-button")}</cc-button>`:i`<cc-button ?loading="${this.loading}" ?disabled="${this.disabled}" danger outlined @click="${this.i}">${a("env-var-input.delete-button")}</cc-button>`,e=this.readonly?"":t;return i`<span class="${n({label:!0,loading:this.loading})}"><span class="text">${this.name}</span> </span><span class="input-btn"><cc-input-text multi .value="${this.value}" name="${this.name}" ?disabled="${this.isDeleted||this.disabled}" ?loading="${this.loading}" ?readonly="${this.readonly}" .placeholder="${a("env-var-input.value-placeholder")}" @input="${this.t}"></cc-input-text>${e}</span>`}static get styles(){return[o,e`:host{align-items:flex-start;display:flex;flex-wrap:wrap;width:100%}:host([hidden]){display:none}.icon{font-family:monospace;font-size:.9rem;height:2rem;line-height:2rem;padding:.2rem}.label{box-sizing:border-box;display:inline-block;flex:1 1 0;font-family:monospace;font-size:14px;line-height:1.4rem;margin:.2rem;min-width:12rem;padding:.3rem 0;word-break:break-all;position:relative;background-color:#fff}.label.loading .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{align-items:flex-start;display:flex;flex:2 1 0}cc-input-text{flex:1 1 0;min-width:20rem}cc-button{width:7rem}`]}}window.customElements.define("env-var-input",EnvVarInput);
 //# sourceMappingURL=env-var-input.js.map

package.json

 {
   "name": "@clevercloud/components",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.4",
   "description": "This is a Work In Progress to introduce Web Components in our Clever Cloud Web based UIs.",
@@ -20,19 +20,20 @@ "main": "dist/index.js",
   "dependencies": {
-    "lit-element": "^2.1.0",
-    "lit-html": "^1.1.0"
+    "lit-element": "^2.2.0",
+    "lit-html": "^1.1.0",
+    "mem": "^5.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",
-    "@storybook/addon-actions": "^5.1.1",
-    "@storybook/addon-knobs": "^5.1.1",
-    "@storybook/addon-notes": "^5.1.1",
-    "@storybook/html": "^5.1.1",
+    "@storybook/addon-actions": "^5.1.9",
+    "@storybook/addon-knobs": "^5.1.9",
+    "@storybook/addon-notes": "^5.1.9",
+    "@storybook/html": "^5.1.9",
     "babel-loader": "^8.0.6",
-    "babel-plugin-template-html-minifier": "^3.0.0",
+    "babel-plugin-template-html-minifier": "^3.0.1",
     "del": "^4.1.1",
-    "eslint": "^5.16.0",
+    "eslint": "^6.0.1",
     "eslint-config-standard": "^12.0.0",
-    "eslint-plugin-import": "^2.17.3",
+    "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-node": "^9.1.0",
-    "eslint-plugin-promise": "^4.1.1",
+    "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
@@ -44,4 +45,4 @@ "fs-extra": "^8.0.1",
     "terser": "^4.0.0",
-    "web-component-analyzer": "0.1.8"
+    "web-component-analyzer": "0.1.9"
   }
 }

New alerts

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

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

110003

increased by10.86%

Number of package files

40

increased by17.65%

Lines of code

142

increased by36.54%

Worsened metrics

Dependency count

3

increased by50%

Number of medium supply chain risk alerts

2

increased byInfinity%

Published versions last two months

1

decreased by-50%

Dependency changes

• + Addedmem@^5.1.0

• + Addedmap-age-cleaner@0.1.3(transitive)

• + Addedmem@5.1.1(transitive)

• + Addedmimic-fn@2.1.0(transitive)

• + Addedp-defer@1.0.0(transitive)

• + Addedp-is-promise@2.1.0(transitive)

• Updatedlit-element@^2.2.0