@everymatrix/ui-image 1.77.11 → 1.77.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/{ui-image-5a724a40.js → ui-image-3dc9dc43.js} +19 -13
- package/dist/cjs/ui-image_2.cjs.entry.js +1 -1
- package/dist/collection/components/ui-image/ui-image.js +19 -13
- package/dist/esm/index.js +1 -1
- package/dist/esm/{ui-image-8975d115.js → ui-image-ae115205.js} +19 -13
- package/dist/esm/ui-image_2.entry.js +1 -1
- package/dist/types/components/ui-image/ui-image.d.ts +1 -1
- package/dist/ui-image/index.esm.js +1 -1
- package/dist/ui-image/ui-image-ae115205.js +1 -0
- package/dist/ui-image/ui-image_2.entry.js +1 -1
- package/package.json +2 -2
- package/dist/ui-image/ui-image-8975d115.js +0 -1
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -8,7 +8,6 @@ const UiImageStyle0 = uiImageCss;
|
|
|
8
8
|
const UiImage = class {
|
|
9
9
|
constructor(hostRef) {
|
|
10
10
|
index.registerInstance(this, hostRef);
|
|
11
|
-
this.hasStarted = false;
|
|
12
11
|
this._onLoad = () => {
|
|
13
12
|
this.imgLoaded = true;
|
|
14
13
|
};
|
|
@@ -25,7 +24,6 @@ const UiImage = class {
|
|
|
25
24
|
if (this.loading === 'eager')
|
|
26
25
|
return;
|
|
27
26
|
this.imgLoaded = false;
|
|
28
|
-
this.hasStarted = false;
|
|
29
27
|
if (typeof window === 'undefined' || !('IntersectionObserver' in window)) {
|
|
30
28
|
this.beginLoad();
|
|
31
29
|
}
|
|
@@ -38,11 +36,9 @@ const UiImage = class {
|
|
|
38
36
|
if (this.imgEl && this.src) {
|
|
39
37
|
this.imgEl.src = this.src;
|
|
40
38
|
}
|
|
41
|
-
this.hasStarted = true;
|
|
42
39
|
}
|
|
43
40
|
else {
|
|
44
41
|
this.imgLoaded = false;
|
|
45
|
-
this.hasStarted = false;
|
|
46
42
|
this.setupObserver();
|
|
47
43
|
}
|
|
48
44
|
}
|
|
@@ -85,18 +81,28 @@ const UiImage = class {
|
|
|
85
81
|
this.io = undefined;
|
|
86
82
|
}
|
|
87
83
|
beginLoad() {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
if (!this.imgEl)
|
|
91
|
-
return;
|
|
92
|
-
if (!this.src)
|
|
93
|
-
return;
|
|
94
|
-
this.hasStarted = true;
|
|
95
|
-
this.imgEl.src = this.src;
|
|
96
|
-
if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
|
|
84
|
+
this.preloadAndSetSrc();
|
|
85
|
+
if (this.imgEl && this.imgEl.complete && this.imgEl.naturalWidth > 0) {
|
|
97
86
|
this.imgLoaded = true;
|
|
98
87
|
}
|
|
99
88
|
}
|
|
89
|
+
preloadAndSetSrc() {
|
|
90
|
+
if (!this.src || !this.imgEl)
|
|
91
|
+
return;
|
|
92
|
+
const preloaded = new Image();
|
|
93
|
+
preloaded.onload = () => {
|
|
94
|
+
if (this.imgEl) {
|
|
95
|
+
this.imgEl.src = preloaded.src;
|
|
96
|
+
this.imgLoaded = true;
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
preloaded.onerror = () => {
|
|
100
|
+
if (this.imgEl) {
|
|
101
|
+
this.imgEl.src = this.src;
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
preloaded.src = this.src;
|
|
105
|
+
}
|
|
100
106
|
get showSkeleton() {
|
|
101
107
|
return this.loading !== 'eager' && !this.imgLoaded;
|
|
102
108
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const uiImage = require('./ui-image-
|
|
5
|
+
const uiImage = require('./ui-image-3dc9dc43.js');
|
|
6
6
|
const index = require('./index-1708bce9.js');
|
|
7
7
|
|
|
8
8
|
const uiSkeletonCss = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";
|
|
@@ -2,7 +2,6 @@ import { h, Host } from "@stencil/core";
|
|
|
2
2
|
import "../../../../../ui-skeleton/dist/types/index";
|
|
3
3
|
export class UiImage {
|
|
4
4
|
constructor() {
|
|
5
|
-
this.hasStarted = false;
|
|
6
5
|
this._onLoad = () => {
|
|
7
6
|
this.imgLoaded = true;
|
|
8
7
|
};
|
|
@@ -19,7 +18,6 @@ export class UiImage {
|
|
|
19
18
|
if (this.loading === 'eager')
|
|
20
19
|
return;
|
|
21
20
|
this.imgLoaded = false;
|
|
22
|
-
this.hasStarted = false;
|
|
23
21
|
if (typeof window === 'undefined' || !('IntersectionObserver' in window)) {
|
|
24
22
|
this.beginLoad();
|
|
25
23
|
}
|
|
@@ -32,11 +30,9 @@ export class UiImage {
|
|
|
32
30
|
if (this.imgEl && this.src) {
|
|
33
31
|
this.imgEl.src = this.src;
|
|
34
32
|
}
|
|
35
|
-
this.hasStarted = true;
|
|
36
33
|
}
|
|
37
34
|
else {
|
|
38
35
|
this.imgLoaded = false;
|
|
39
|
-
this.hasStarted = false;
|
|
40
36
|
this.setupObserver();
|
|
41
37
|
}
|
|
42
38
|
}
|
|
@@ -79,18 +75,28 @@ export class UiImage {
|
|
|
79
75
|
this.io = undefined;
|
|
80
76
|
}
|
|
81
77
|
beginLoad() {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
if (!this.imgEl)
|
|
85
|
-
return;
|
|
86
|
-
if (!this.src)
|
|
87
|
-
return;
|
|
88
|
-
this.hasStarted = true;
|
|
89
|
-
this.imgEl.src = this.src;
|
|
90
|
-
if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
|
|
78
|
+
this.preloadAndSetSrc();
|
|
79
|
+
if (this.imgEl && this.imgEl.complete && this.imgEl.naturalWidth > 0) {
|
|
91
80
|
this.imgLoaded = true;
|
|
92
81
|
}
|
|
93
82
|
}
|
|
83
|
+
preloadAndSetSrc() {
|
|
84
|
+
if (!this.src || !this.imgEl)
|
|
85
|
+
return;
|
|
86
|
+
const preloaded = new Image();
|
|
87
|
+
preloaded.onload = () => {
|
|
88
|
+
if (this.imgEl) {
|
|
89
|
+
this.imgEl.src = preloaded.src;
|
|
90
|
+
this.imgLoaded = true;
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
preloaded.onerror = () => {
|
|
94
|
+
if (this.imgEl) {
|
|
95
|
+
this.imgEl.src = this.src;
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
preloaded.src = this.src;
|
|
99
|
+
}
|
|
94
100
|
get showSkeleton() {
|
|
95
101
|
return this.loading !== 'eager' && !this.imgLoaded;
|
|
96
102
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { U as UiImage } from './ui-image-
|
|
1
|
+
export { U as UiImage } from './ui-image-ae115205.js';
|
|
2
2
|
import './index-256b7d4e.js';
|
|
@@ -6,7 +6,6 @@ const UiImageStyle0 = uiImageCss;
|
|
|
6
6
|
const UiImage = class {
|
|
7
7
|
constructor(hostRef) {
|
|
8
8
|
registerInstance(this, hostRef);
|
|
9
|
-
this.hasStarted = false;
|
|
10
9
|
this._onLoad = () => {
|
|
11
10
|
this.imgLoaded = true;
|
|
12
11
|
};
|
|
@@ -23,7 +22,6 @@ const UiImage = class {
|
|
|
23
22
|
if (this.loading === 'eager')
|
|
24
23
|
return;
|
|
25
24
|
this.imgLoaded = false;
|
|
26
|
-
this.hasStarted = false;
|
|
27
25
|
if (typeof window === 'undefined' || !('IntersectionObserver' in window)) {
|
|
28
26
|
this.beginLoad();
|
|
29
27
|
}
|
|
@@ -36,11 +34,9 @@ const UiImage = class {
|
|
|
36
34
|
if (this.imgEl && this.src) {
|
|
37
35
|
this.imgEl.src = this.src;
|
|
38
36
|
}
|
|
39
|
-
this.hasStarted = true;
|
|
40
37
|
}
|
|
41
38
|
else {
|
|
42
39
|
this.imgLoaded = false;
|
|
43
|
-
this.hasStarted = false;
|
|
44
40
|
this.setupObserver();
|
|
45
41
|
}
|
|
46
42
|
}
|
|
@@ -83,18 +79,28 @@ const UiImage = class {
|
|
|
83
79
|
this.io = undefined;
|
|
84
80
|
}
|
|
85
81
|
beginLoad() {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
if (!this.imgEl)
|
|
89
|
-
return;
|
|
90
|
-
if (!this.src)
|
|
91
|
-
return;
|
|
92
|
-
this.hasStarted = true;
|
|
93
|
-
this.imgEl.src = this.src;
|
|
94
|
-
if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
|
|
82
|
+
this.preloadAndSetSrc();
|
|
83
|
+
if (this.imgEl && this.imgEl.complete && this.imgEl.naturalWidth > 0) {
|
|
95
84
|
this.imgLoaded = true;
|
|
96
85
|
}
|
|
97
86
|
}
|
|
87
|
+
preloadAndSetSrc() {
|
|
88
|
+
if (!this.src || !this.imgEl)
|
|
89
|
+
return;
|
|
90
|
+
const preloaded = new Image();
|
|
91
|
+
preloaded.onload = () => {
|
|
92
|
+
if (this.imgEl) {
|
|
93
|
+
this.imgEl.src = preloaded.src;
|
|
94
|
+
this.imgLoaded = true;
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
preloaded.onerror = () => {
|
|
98
|
+
if (this.imgEl) {
|
|
99
|
+
this.imgEl.src = this.src;
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
preloaded.src = this.src;
|
|
103
|
+
}
|
|
98
104
|
get showSkeleton() {
|
|
99
105
|
return this.loading !== 'eager' && !this.imgLoaded;
|
|
100
106
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { U as ui_image } from './ui-image-
|
|
1
|
+
export { U as ui_image } from './ui-image-ae115205.js';
|
|
2
2
|
import { r as registerInstance, h, H as Host } from './index-256b7d4e.js';
|
|
3
3
|
|
|
4
4
|
const uiSkeletonCss = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";
|
|
@@ -18,7 +18,6 @@ export declare class UiImage {
|
|
|
18
18
|
el: HTMLElement;
|
|
19
19
|
private imgEl?;
|
|
20
20
|
private io?;
|
|
21
|
-
private hasStarted;
|
|
22
21
|
onSrcChange(): void;
|
|
23
22
|
onLoadingChange(newVal: HTMLImageElement['loading'], oldVal: HTMLImageElement['loading']): void;
|
|
24
23
|
componentDidLoad(): void;
|
|
@@ -28,6 +27,7 @@ export declare class UiImage {
|
|
|
28
27
|
private cleanupObserver;
|
|
29
28
|
private _onLoad;
|
|
30
29
|
private beginLoad;
|
|
30
|
+
private preloadAndSetSrc;
|
|
31
31
|
private get showSkeleton();
|
|
32
32
|
private renderEager;
|
|
33
33
|
private renderLazy;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export{U as UiImage}from"./ui-image-
|
|
1
|
+
export{U as UiImage}from"./ui-image-ae115205.js";import"./index-256b7d4e.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as i,h as t,H as s,g as e}from"./index-256b7d4e.js";const r=class{constructor(t){i(this,t),this._onLoad=()=>{this.imgLoaded=!0},this.src=void 0,this.width=void 0,this.height=void 0,this.alt=void 0,this.styles=void 0,this.detectDistance="200px",this.loading="lazy",this.imgLoaded=!1}onSrcChange(){"eager"!==this.loading&&(this.imgLoaded=!1,"undefined"!=typeof window&&"IntersectionObserver"in window||this.beginLoad())}onLoadingChange(i,t){i!==t&&(this.cleanupObserver(),"eager"===i?this.imgEl&&this.src&&(this.imgEl.src=this.src):(this.imgLoaded=!1,this.setupObserver()))}componentDidLoad(){"eager"!==this.loading&&this.setupObserver()}disconnectedCallback(){this.cleanupObserver(),this.imgEl&&(this.imgEl.src="")}canUseIO(){return"undefined"!=typeof window&&"IntersectionObserver"in window}setupObserver(){"eager"!==this.loading&&(this.canUseIO()?(this.io=new IntersectionObserver((i=>{var t;for(const s of i)if(s.isIntersecting){this.beginLoad(),null===(t=this.io)||void 0===t||t.unobserve(s.target),this.cleanupObserver();break}}),{root:null,rootMargin:this.detectDistance,threshold:0}),this.io.observe(this.el)):this.beginLoad())}cleanupObserver(){var i;null===(i=this.io)||void 0===i||i.disconnect(),this.io=void 0}beginLoad(){this.preloadAndSetSrc(),this.imgEl&&this.imgEl.complete&&this.imgEl.naturalWidth>0&&(this.imgLoaded=!0)}preloadAndSetSrc(){if(!this.src||!this.imgEl)return;const i=new Image;i.onload=()=>{this.imgEl&&(this.imgEl.src=i.src,this.imgLoaded=!0)},i.onerror=()=>{this.imgEl&&(this.imgEl.src=this.src)},i.src=this.src}get showSkeleton(){return"eager"!==this.loading&&!this.imgLoaded}renderEager(){return t(s,{class:"HostContainer"},t("img",{src:this.src,decoding:"async",style:this.styles,class:"UiContainer Visible",alt:this.alt,width:this.width,height:this.height,loading:"eager"}))}renderLazy(){return t(s,{class:"HostContainer","aria-busy":this.imgLoaded?"false":"true"},this.showSkeleton&&t("ui-skeleton",{class:"UiContainer",structure:"image",width:"100%",height:"100%"}),t("img",{ref:i=>this.imgEl=i,src:void 0,decoding:"async",style:this.styles,onLoad:this._onLoad,class:"UiContainer "+(this.imgLoaded?"Visible":"Hidden"),alt:this.alt,width:this.width,height:this.height,loading:"lazy"}))}render(){return"eager"===this.loading?this.renderEager():this.renderLazy()}get el(){return e(this)}static get watchers(){return{src:["onSrcChange"],loading:["onLoadingChange"]}}};r.style=".HostContainer{display:block}.UiContainer{height:100%;width:100%;border-radius:inherit;object-fit:inherit}.UiContainer .Image{border-radius:inherit}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;border-radius:var(--emw--border-radius-medium, 10px);transition:opacity 0.5s ease-in-out}";export{r as U}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export{U as ui_image}from"./ui-image-
|
|
1
|
+
export{U as ui_image}from"./ui-image-ae115205.js";import{r as e,h as t,H as n}from"./index-256b7d4e.js";const i=class{constructor(t){e(this,t),this.stylingValue={width:this.handleStylingProps(this.width),height:this.handleStylingProps(this.height),borderRadius:this.handleStylingProps(this.borderRadius),marginBottom:this.handleStylingProps(this.marginBottom),marginTop:this.handleStylingProps(this.marginTop),marginLeft:this.handleStylingProps(this.marginLeft),marginRight:this.handleStylingProps(this.marginRight),size:this.handleStylingProps(this.size)},this.structure=void 0,this.width="unset",this.height="unset",this.borderRadius="unset",this.marginBottom="unset",this.marginTop="unset",this.marginLeft="unset",this.marginRight="unset",this.animation=!0,this.rows=0,this.size="100%"}handleStructureChange(e,t){t!==e&&this.handleStructure(e)}handleStylingProps(e){switch(typeof e){case"number":return 0===e?0:`${e}px`;case"undefined":default:return"unset";case"string":return["auto","unset","none","inherit","initial"].includes(e)||e.endsWith("px")||e.endsWith("%")?e:"unset"}}handleStructure(e){switch(e){case"logo":return this.renderLogo();case"image":return this.renderImage();case"title":return this.renderTitle();case"text":return this.renderText();case"rectangle":return this.renderRectangle();case"circle":return this.renderCircle();default:return null}}renderLogo(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Logo "+(this.animation?"Skeleton":"")}))}renderImage(){return t("div",{class:"Image "+(this.animation?"Skeleton":"")})}renderTitle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Title "+(this.animation?"Skeleton":"")}))}renderText(){return t("div",{class:"SkeletonContainer"},Array.from({length:this.rows>0?this.rows:1}).map(((e,n)=>t("div",{key:n,class:"Text "+(this.animation?"Skeleton":"")}))))}renderRectangle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Rectangle "+(this.animation?"Skeleton":"")}))}renderCircle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Circle "+(this.animation?"Skeleton":"")}))}render(){let e="";switch(this.structure){case"logo":e=`\n :host {\n --emw-skeleton-logo-width: ${this.stylingValue.width};\n --emw-skeleton-logo-height: ${this.stylingValue.height};\n --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};\n }\n `;break;case"image":e=`\n :host {\n --emw-skeleton-image-width: ${this.stylingValue.width};\n --emw-skeleton-image-height: ${this.stylingValue.height};\n --emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};\n }\n `;break;case"title":e=`\n :host {\n --emw-skeleton-title-width: ${this.stylingValue.width};\n --emw-skeleton-title-height: ${this.stylingValue.height};\n --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};\n }\n `;break;case"text":e=`\n :host {\n --emw-skeleton-text-width: ${this.stylingValue.width};\n --emw-skeleton-text-height: ${this.stylingValue.height};\n --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};\n }\n `;break;case"rectangle":e=`\n :host {\n --emw-skeleton-rectangle-width: ${this.stylingValue.width};\n --emw-skeleton-rectangle-height: ${this.stylingValue.height};\n --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};\n }\n `;break;case"circle":e=`\n :host {\n --emw-skeleton-circle-size: ${this.stylingValue.size};\n }\n `;break;default:e=""}return t(n,{key:"e6b885bfd985ce7663d990756fe9101e25eb97f0"},t("style",{key:"06ae24c7bb74f4dacfc12ae58085333f9dc89da5"},e),this.handleStructure(this.structure))}static get watchers(){return{structure:["handleStructureChange"]}}};i.style=":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";export{i as ui_skeleton}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@everymatrix/ui-image",
|
|
3
|
-
"version": "1.77.
|
|
3
|
+
"version": "1.77.13",
|
|
4
4
|
"main": "./dist/index.cjs.js",
|
|
5
5
|
"module": "./dist/index.js",
|
|
6
6
|
"es2015": "./dist/esm/index.mjs",
|
|
@@ -24,6 +24,6 @@
|
|
|
24
24
|
"access": "public"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@everymatrix/ui-skeleton": "1.77.
|
|
27
|
+
"@everymatrix/ui-skeleton": "1.77.13"
|
|
28
28
|
}
|
|
29
29
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as i,h as t,H as s,g as e}from"./index-256b7d4e.js";const h=class{constructor(t){i(this,t),this.hasStarted=!1,this._onLoad=()=>{this.imgLoaded=!0},this.src=void 0,this.width=void 0,this.height=void 0,this.alt=void 0,this.styles=void 0,this.detectDistance="200px",this.loading="lazy",this.imgLoaded=!1}onSrcChange(){"eager"!==this.loading&&(this.imgLoaded=!1,this.hasStarted=!1,"undefined"!=typeof window&&"IntersectionObserver"in window||this.beginLoad())}onLoadingChange(i,t){i!==t&&(this.cleanupObserver(),"eager"===i?(this.imgEl&&this.src&&(this.imgEl.src=this.src),this.hasStarted=!0):(this.imgLoaded=!1,this.hasStarted=!1,this.setupObserver()))}componentDidLoad(){"eager"!==this.loading&&this.setupObserver()}disconnectedCallback(){this.cleanupObserver(),this.imgEl&&(this.imgEl.src="")}canUseIO(){return"undefined"!=typeof window&&"IntersectionObserver"in window}setupObserver(){"eager"!==this.loading&&(this.canUseIO()?(this.io=new IntersectionObserver((i=>{var t;for(const s of i)if(s.isIntersecting){this.beginLoad(),null===(t=this.io)||void 0===t||t.unobserve(s.target),this.cleanupObserver();break}}),{root:null,rootMargin:this.detectDistance,threshold:0}),this.io.observe(this.el)):this.beginLoad())}cleanupObserver(){var i;null===(i=this.io)||void 0===i||i.disconnect(),this.io=void 0}beginLoad(){this.hasStarted||this.imgEl&&this.src&&(this.hasStarted=!0,this.imgEl.src=this.src,this.imgEl.complete&&this.imgEl.naturalWidth>0&&(this.imgLoaded=!0))}get showSkeleton(){return"eager"!==this.loading&&!this.imgLoaded}renderEager(){return t(s,{class:"HostContainer"},t("img",{src:this.src,decoding:"async",style:this.styles,class:"UiContainer Visible",alt:this.alt,width:this.width,height:this.height,loading:"eager"}))}renderLazy(){return t(s,{class:"HostContainer","aria-busy":this.imgLoaded?"false":"true"},this.showSkeleton&&t("ui-skeleton",{class:"UiContainer",structure:"image",width:"100%",height:"100%"}),t("img",{ref:i=>this.imgEl=i,src:void 0,decoding:"async",style:this.styles,onLoad:this._onLoad,class:"UiContainer "+(this.imgLoaded?"Visible":"Hidden"),alt:this.alt,width:this.width,height:this.height,loading:"lazy"}))}render(){return"eager"===this.loading?this.renderEager():this.renderLazy()}get el(){return e(this)}static get watchers(){return{src:["onSrcChange"],loading:["onLoadingChange"]}}};h.style=".HostContainer{display:block}.UiContainer{height:100%;width:100%;border-radius:inherit;object-fit:inherit}.UiContainer .Image{border-radius:inherit}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;border-radius:var(--emw--border-radius-medium, 10px);transition:opacity 0.5s ease-in-out}";export{h as U}
|