@clevercloud/components - npm Package Compare versions

Comparing version 1.0.0-alpha.8 to 1.0.0-alpha.9

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 s}from"lit-html/directives/class-map.js";import{dispatchCustomEvent as r}from"../lib/events.js";import{i18n as n}from"@i18n";export class EnvVarForm extends i{static get properties(){return{heading:{type:String},variables:{type:Array,attribute:!1},saving:{type:Boolean},readonly:{type:Boolean},restartApp:{type:Boolean,attribute:"restart-app"},error:{type:String},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:n("env-var-form.mode.simple"),value:"SIMPLE"},{label:n("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})),s=t.filter(t=>{const s=e.find(e=>e.name===t.name),r=i.find(e=>e.name===t.name);return!s&&!r}).map(t=>{const e=this.h.find(e=>e.name===t.name).value!==t.value;return{...t,isEdited:e}}),r=[...e,...i,...s];this.l=!r.some(({isDeleted:t,isNew:e,isEdited:i})=>t||e||i),this.t=r.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}));r(this,"submit",t)}g(){r(this,"restart-app")}$(t){r(this,"dismissed-error",t)}get _(){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 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>`:"",r=this.saving?e`<cc-loader class="saving-loader"></cc-loader>`:"",a=this.restartApp?e`<cc-button @click="${this.g}">${n("env-var-form.restart-app")}</cc-button>`:"",l=this.readonly?"":e`<div class="button-bar"><cc-button ?disabled="${null==this.t||this.saving||null!=this.error||this.l}" @click="${this.u}">${n("env-var-form.reset")}</cc-button><div class="spacer"></div>${a}<cc-button success ?disabled="${null==this.t||this.saving||this.l||null!=this.error}" @click="${this.v}">${n("env-var-form.update")}</cc-button></div>`;return e`<div class="header">${t}<cc-toggle class="${s({"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="${s({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>${l} ${r} ${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-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);
 //# sourceMappingURL=env-var-form.js.map

package.json

 {
   "name": "@clevercloud/components",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0-alpha.9",
   "description": "This is a Work In Progress to introduce Web Components in our Clever Cloud Web based UIs.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

124686

increased by0.13%

Lines of code

129

increased by0.78%

No dependency changes