@everymatrix/casino-engagement-suite-container 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.
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as i,h as t,H as s,g as e}from"./index-4a08682c.js";const
|
|
1
|
+
import{r as i,h as t,H as s,g as e}from"./index-4a08682c.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 ui_image}
|
|
@@ -10,7 +10,6 @@ const UiImageStyle0 = uiImageCss;
|
|
|
10
10
|
const UiImage = class {
|
|
11
11
|
constructor(hostRef) {
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
|
-
this.hasStarted = false;
|
|
14
13
|
this._onLoad = () => {
|
|
15
14
|
this.imgLoaded = true;
|
|
16
15
|
};
|
|
@@ -27,7 +26,6 @@ const UiImage = class {
|
|
|
27
26
|
if (this.loading === 'eager')
|
|
28
27
|
return;
|
|
29
28
|
this.imgLoaded = false;
|
|
30
|
-
this.hasStarted = false;
|
|
31
29
|
if (typeof window === 'undefined' || !('IntersectionObserver' in window)) {
|
|
32
30
|
this.beginLoad();
|
|
33
31
|
}
|
|
@@ -40,11 +38,9 @@ const UiImage = class {
|
|
|
40
38
|
if (this.imgEl && this.src) {
|
|
41
39
|
this.imgEl.src = this.src;
|
|
42
40
|
}
|
|
43
|
-
this.hasStarted = true;
|
|
44
41
|
}
|
|
45
42
|
else {
|
|
46
43
|
this.imgLoaded = false;
|
|
47
|
-
this.hasStarted = false;
|
|
48
44
|
this.setupObserver();
|
|
49
45
|
}
|
|
50
46
|
}
|
|
@@ -87,18 +83,28 @@ const UiImage = class {
|
|
|
87
83
|
this.io = undefined;
|
|
88
84
|
}
|
|
89
85
|
beginLoad() {
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
if (!this.imgEl)
|
|
93
|
-
return;
|
|
94
|
-
if (!this.src)
|
|
95
|
-
return;
|
|
96
|
-
this.hasStarted = true;
|
|
97
|
-
this.imgEl.src = this.src;
|
|
98
|
-
if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
|
|
86
|
+
this.preloadAndSetSrc();
|
|
87
|
+
if (this.imgEl && this.imgEl.complete && this.imgEl.naturalWidth > 0) {
|
|
99
88
|
this.imgLoaded = true;
|
|
100
89
|
}
|
|
101
90
|
}
|
|
91
|
+
preloadAndSetSrc() {
|
|
92
|
+
if (!this.src || !this.imgEl)
|
|
93
|
+
return;
|
|
94
|
+
const preloaded = new Image();
|
|
95
|
+
preloaded.onload = () => {
|
|
96
|
+
if (this.imgEl) {
|
|
97
|
+
this.imgEl.src = preloaded.src;
|
|
98
|
+
this.imgLoaded = true;
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
preloaded.onerror = () => {
|
|
102
|
+
if (this.imgEl) {
|
|
103
|
+
this.imgEl.src = this.src;
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
preloaded.src = this.src;
|
|
107
|
+
}
|
|
102
108
|
get showSkeleton() {
|
|
103
109
|
return this.loading !== 'eager' && !this.imgLoaded;
|
|
104
110
|
}
|
|
@@ -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
|
}
|