@clevercloud/components - npm Package Compare versions

Comparing version 1.0.0-alpha.6 to 1.0.0-alpha.7

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 t,html as e,LitElement 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 i{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(){a(this,"create",{name:this.t,value:this.i}),this.reset(),this.shadowRoot.getElementById("name-input").focus()}render(){const t=!r.validateName(this.t),i=this.variablesNames.includes(this.t),a=t||i;return e`<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="${!i}">⚠️ ${n("env-var-create.errors.already-defined-name",{name:this.t})}</div>`}static get styles(){return t`: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);
+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{dispatchCustomEvent as a}from"../lib/events";import r from"../lib/env-vars.js";import n from"@i18n";export class EnvVarCreate extends i{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}l({detail:t}){this.i=t}p(){a(this,"create",{name:this.t,value:this.i}),this.reset(),this.shadowRoot.getElementById("name-input").focus()}render(){const t=!r.validateName(this.t),i=this.variablesNames.includes(this.t),a=t||i;return e`<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="${!i}">⚠️ ${n("env-var-create.errors.already-defined-name",{name:this.t})}</div>`}static get styles(){return t`: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 s from"../lib/env-vars.js";import n from"@i18n";export class EnvVarEditorExpert extends r{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 t=(this.s?EnvVarEditorExpert.skeletonVariables:e).filter(({isDeleted:e})=>!e);this.t=s.toNameEqualsValueString(t),this.o=[]}set o(e){this.i=e.map(({type:e,name:t,pos:r})=>e===s.ERROR_TYPES.INVALID_NAME?{line:r.line,msg:n("env-var-editor-expert.errors.invalid-name",{name:t})}:e===s.ERROR_TYPES.DUPLICATED_NAME?{line:r.line,msg:n("env-var-editor-expert.errors.duplicated-name",{name:t})}:e===s.ERROR_TYPES.INVALID_LINE?{line:r.line,msg:n("env-var-editor-expert.errors.invalid-line")}:e===s.ERROR_TYPES.INVALID_VALUE?{line:r.line,msg:n("env-var-editor-expert.errors.invalid-value")}:{line:"?",msg:n("env-var-editor-expert.errors.unknown")})}l({detail:e}){const{variables:t,errors:r}=s.parseRaw(e.value);this.o=r,0===r.length&&i(this,"change",t)}render(){return t`<cc-input-text multi .value="${this.t}" @cc-input-text:input="${this.l}" ?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: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);
+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 s from"../lib/env-vars.js";import n from"@i18n";export class EnvVarEditorExpert extends r{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 t=(this.s?EnvVarEditorExpert.skeletonVariables:e).filter(({isDeleted:e})=>!e);this.t=s.toNameEqualsValueString(t),this.o=[]}set o(e){this.i=e.map(({type:e,name:t,pos:r})=>e===s.ERROR_TYPES.INVALID_NAME?{line:r.line,msg:n("env-var-editor-expert.errors.invalid-name",{name:t})}:e===s.ERROR_TYPES.DUPLICATED_NAME?{line:r.line,msg:n("env-var-editor-expert.errors.duplicated-name",{name:t})}:e===s.ERROR_TYPES.INVALID_LINE?{line:r.line,msg:n("env-var-editor-expert.errors.invalid-line")}:e===s.ERROR_TYPES.INVALID_VALUE?{line:r.line,msg:n("env-var-editor-expert.errors.invalid-value")}:{line:"?",msg:n("env-var-editor-expert.errors.unknown")})}l({detail:e}){const{variables:t,errors:r}=s.parseRaw(e);this.o=r,0===r.length&&i(this,"change",t)}render(){return t`<cc-input-text multi .value="${this.t}" @cc-input-text:input="${this.l}" ?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: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-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 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(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?e`<cc-button ?skeleton="${this.skeleton}" ?disabled="${this.disabled}" @click="${this.s}">${o("env-var-input.keep-button")}</cc-button>`:e`<cc-button ?skeleton="${this.skeleton}" ?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,skeleton:this.skeleton})}"><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}" ?skeleton="${this.skeleton}" ?readonly="${this.readonly}" .placeholder="${o("env-var-input.value-placeholder")}" @input="${this.t}"></cc-input-text>${i}</span>`}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.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{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);
+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 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:t}){this.value=t,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?e`<cc-button ?skeleton="${this.skeleton}" ?disabled="${this.disabled}" @click="${this.s}">${o("env-var-input.keep-button")}</cc-button>`:e`<cc-button ?skeleton="${this.skeleton}" ?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,skeleton:this.skeleton})}"><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}" ?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,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.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{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.6",
+  "version": "1.0.0-alpha.7",
   "description": "This is a Work In Progress to introduce Web Components in our Clever Cloud Web based UIs.",
@@ -10,2 +10,3 @@ "main": "dist/index.js",
   "scripts": {
+    "prepack": "npm run components:check-i18n && npm run components:build",
     "components:build": "node tasks/minify-components.js",
@@ -12,0 +13,0 @@ "components:check-i18n": "node tasks/check-i18n.js",

No alert changes

Improved metrics

Total package byte prevSize

111067

increased by0.06%

No dependency changes