@clevercloud/components - npm Package Compare versions

Comparing version 1.3.0-beta.7 to 1.3.0-beta.8

dist/atoms/cc-img.js

@@ -1,2 +0,2 @@
-import{classMap as t}from"lit-html/directives/class-map.js";import{css as e,html as r,LitElement as i}from"lit-element";import{ifDefined as s}from"lit-html/directives/if-defined.js";import{skeleton as o}from"../styles/skeleton.js";export class CcImg extends i{static get properties(){return{src:{type:String},text:{type:String},skeleton:{type:Boolean,reflect:!0},t:{type:Boolean,attribute:!1},i:{type:Boolean,attribute:!1}}}constructor(){super(),this.t=!1,this.i=!1}set src(t){const e=this.s;this.s=t,this.requestUpdate("src",e),this.t=!1,this.i=!1}get src(){return this.s}o(t){this.t=!0,this.skeleton=!1}l(t){this.i=!0,this.skeleton=!1}render(){const e=null!=this.src&&!this.t&&!this.i,i=this.skeleton||e;return r`<div class="${t({skeleton:i,loaded:this.t})} wrapper"><img src=${s(this.src)} @load=${this.o} @error=${this.l}><div class=error-msg>${this.text}</div></div>`}static get styles(){return[o,e`:host{display:inline-block;overflow:hidden}.wrapper,img{height:100%;width:100%}.wrapper{align-items:center;background-color:#eee;display:flex;justify-content:center;position:relative}.wrapper.skeleton{background-color:#bbb}img{display:block;object-fit:cover;object-position:center center;opacity:0;position:absolute;top:0;transition:opacity 150ms ease-in-out;left:0}.wrapper.loaded img{opacity:1}.error-msg{font-size:.9rem;overflow:hidden;padding:.25rem;text-align:center;text-overflow:ellipsis;white-space:nowrap}.wrapper.loaded .error-msg,.wrapper.skeleton .error-msg{display:none}`]}}window.customElements.define("cc-img",CcImg);
+import{classMap as t}from"lit-html/directives/class-map.js";import{css as e,html as i,LitElement as r}from"lit-element";import{ifDefined as s}from"lit-html/directives/if-defined.js";import{skeleton as o}from"../styles/skeleton.js";export class CcImg extends r{static get properties(){return{src:{type:String},text:{type:String},skeleton:{type:Boolean,reflect:!0},t:{type:Boolean,attribute:!1},i:{type:Boolean,attribute:!1}}}constructor(){super(),this.t=!1,this.i=!1}set src(t){const e=this.s;this.s=t,this.requestUpdate("src",e),this.t=!1,this.i=!1}get src(){return this.s}o(t){this.t=!0,this.skeleton=!1}l(t){this.i=!0,this.skeleton=!1}render(){const e=null!=this.src&&!this.t&&!this.i,r=this.skeleton||e,o=null==this.src||this.i;return i`<div class="${t({skeleton:r,loaded:this.t,text:o})} wrapper"><img src=${s(this.src)} @load=${this.o} @error=${this.l}> ${o?i`<div class=error-msg>${this.text}</div>`:""}</div>`}static get styles(){return[o,e`:host{display:inline-block;overflow:hidden}.wrapper,img{height:100%;width:100%}.wrapper{align-items:center;display:flex;justify-content:center;position:relative}.wrapper.skeleton{background-color:#bbb}.wrapper.text{background-color:#eee}img{display:block;object-fit:cover;object-position:center center;opacity:0;position:absolute;top:0;transition:opacity 150ms ease-in-out;left:0}.wrapper.loaded img{opacity:1}.error-msg{font-size:.9rem;overflow:hidden;padding:.25rem;text-align:center;text-overflow:ellipsis;white-space:nowrap}`]}}window.customElements.define("cc-img",CcImg);
 //# sourceMappingURL=cc-img.js.map

package.json

 {
   "name": "@clevercloud/components",
-  "version": "1.3.0-beta.7",
+  "version": "1.3.0-beta.8",
   "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

804455

increased by0.02%

No dependency changes