@everymatrix/casino-engagement-suite-container 1.77.5 → 1.77.7
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 h=class{constructor(t){i(this,t),this.hasStarted=!1,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(),
|
|
1
|
+
import{r as i,h as t,H as s,g as e}from"./index-4a08682c.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 ui_image}
|
|
@@ -11,6 +11,9 @@ const UiImage = class {
|
|
|
11
11
|
constructor(hostRef) {
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
13
|
this.hasStarted = false;
|
|
14
|
+
this._onLoad = () => {
|
|
15
|
+
this.imgLoaded = true;
|
|
16
|
+
};
|
|
14
17
|
this.src = undefined;
|
|
15
18
|
this.width = undefined;
|
|
16
19
|
this.height = undefined;
|
|
@@ -33,7 +36,6 @@ const UiImage = class {
|
|
|
33
36
|
if (newVal === oldVal)
|
|
34
37
|
return;
|
|
35
38
|
this.cleanupObserver();
|
|
36
|
-
this.detachImgHandlers();
|
|
37
39
|
if (newVal === 'eager') {
|
|
38
40
|
if (this.imgEl && this.src) {
|
|
39
41
|
this.imgEl.src = this.src;
|
|
@@ -53,7 +55,8 @@ const UiImage = class {
|
|
|
53
55
|
}
|
|
54
56
|
disconnectedCallback() {
|
|
55
57
|
this.cleanupObserver();
|
|
56
|
-
this.
|
|
58
|
+
if (this.imgEl)
|
|
59
|
+
this.imgEl.src = '';
|
|
57
60
|
}
|
|
58
61
|
canUseIO() {
|
|
59
62
|
return typeof window !== 'undefined' && 'IntersectionObserver' in window;
|
|
@@ -83,32 +86,6 @@ const UiImage = class {
|
|
|
83
86
|
(_a = this.io) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
84
87
|
this.io = undefined;
|
|
85
88
|
}
|
|
86
|
-
wireOnceHandlers() {
|
|
87
|
-
if (!this.imgEl)
|
|
88
|
-
return;
|
|
89
|
-
this.detachImgHandlers();
|
|
90
|
-
this._onLoad = () => {
|
|
91
|
-
var _a;
|
|
92
|
-
if (this.currentSrc && ((_a = this.imgEl) === null || _a === void 0 ? void 0 : _a.currentSrc) && !this.imgEl.currentSrc.includes(this.currentSrc))
|
|
93
|
-
return;
|
|
94
|
-
this.imgLoaded = true;
|
|
95
|
-
};
|
|
96
|
-
this._onError = () => {
|
|
97
|
-
console.error('Load image failed:', this.src);
|
|
98
|
-
};
|
|
99
|
-
this.imgEl.addEventListener('load', this._onLoad, { once: true });
|
|
100
|
-
this.imgEl.addEventListener('error', this._onError, { once: true });
|
|
101
|
-
}
|
|
102
|
-
detachImgHandlers() {
|
|
103
|
-
if (!this.imgEl)
|
|
104
|
-
return;
|
|
105
|
-
if (this._onLoad)
|
|
106
|
-
this.imgEl.removeEventListener('load', this._onLoad);
|
|
107
|
-
if (this._onError)
|
|
108
|
-
this.imgEl.removeEventListener('error', this._onError);
|
|
109
|
-
this._onLoad = undefined;
|
|
110
|
-
this._onError = undefined;
|
|
111
|
-
}
|
|
112
89
|
beginLoad() {
|
|
113
90
|
if (this.hasStarted)
|
|
114
91
|
return;
|
|
@@ -117,12 +94,6 @@ const UiImage = class {
|
|
|
117
94
|
if (!this.src)
|
|
118
95
|
return;
|
|
119
96
|
this.hasStarted = true;
|
|
120
|
-
this.wireOnceHandlers();
|
|
121
|
-
if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
|
|
122
|
-
this.imgLoaded = true;
|
|
123
|
-
return;
|
|
124
|
-
}
|
|
125
|
-
this.currentSrc = this.src;
|
|
126
97
|
this.imgEl.src = this.src;
|
|
127
98
|
if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
|
|
128
99
|
this.imgLoaded = true;
|
|
@@ -135,7 +106,7 @@ const UiImage = class {
|
|
|
135
106
|
return (index.h(index.Host, { class: "HostContainer" }, index.h("img", { src: this.src, decoding: "async", style: this.styles, class: "UiContainer Visible", alt: this.alt, width: this.width, height: this.height, loading: "eager" })));
|
|
136
107
|
}
|
|
137
108
|
renderLazy() {
|
|
138
|
-
return (index.h(index.Host, { class: "HostContainer", "aria-busy": !this.imgLoaded ? 'true' : 'false' }, this.showSkeleton && (index.h("ui-skeleton", { class: "UiContainer", structure: "image", width: "100%", height: "100%" })), index.h("img", { ref: (el) => (this.imgEl = el), src: undefined, decoding: "async", style: this.styles, class: `UiContainer ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" })));
|
|
109
|
+
return (index.h(index.Host, { class: "HostContainer", "aria-busy": !this.imgLoaded ? 'true' : 'false' }, this.showSkeleton && (index.h("ui-skeleton", { class: "UiContainer", structure: "image", width: "100%", height: "100%" })), index.h("img", { ref: (el) => (this.imgEl = el), src: undefined, 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" })));
|
|
139
110
|
}
|
|
140
111
|
render() {
|
|
141
112
|
return this.loading === 'eager' ? this.renderEager() : this.renderLazy();
|
|
@@ -7,6 +7,9 @@ const UiImage = class {
|
|
|
7
7
|
constructor(hostRef) {
|
|
8
8
|
registerInstance(this, hostRef);
|
|
9
9
|
this.hasStarted = false;
|
|
10
|
+
this._onLoad = () => {
|
|
11
|
+
this.imgLoaded = true;
|
|
12
|
+
};
|
|
10
13
|
this.src = undefined;
|
|
11
14
|
this.width = undefined;
|
|
12
15
|
this.height = undefined;
|
|
@@ -29,7 +32,6 @@ const UiImage = class {
|
|
|
29
32
|
if (newVal === oldVal)
|
|
30
33
|
return;
|
|
31
34
|
this.cleanupObserver();
|
|
32
|
-
this.detachImgHandlers();
|
|
33
35
|
if (newVal === 'eager') {
|
|
34
36
|
if (this.imgEl && this.src) {
|
|
35
37
|
this.imgEl.src = this.src;
|
|
@@ -49,7 +51,8 @@ const UiImage = class {
|
|
|
49
51
|
}
|
|
50
52
|
disconnectedCallback() {
|
|
51
53
|
this.cleanupObserver();
|
|
52
|
-
this.
|
|
54
|
+
if (this.imgEl)
|
|
55
|
+
this.imgEl.src = '';
|
|
53
56
|
}
|
|
54
57
|
canUseIO() {
|
|
55
58
|
return typeof window !== 'undefined' && 'IntersectionObserver' in window;
|
|
@@ -79,32 +82,6 @@ const UiImage = class {
|
|
|
79
82
|
(_a = this.io) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
80
83
|
this.io = undefined;
|
|
81
84
|
}
|
|
82
|
-
wireOnceHandlers() {
|
|
83
|
-
if (!this.imgEl)
|
|
84
|
-
return;
|
|
85
|
-
this.detachImgHandlers();
|
|
86
|
-
this._onLoad = () => {
|
|
87
|
-
var _a;
|
|
88
|
-
if (this.currentSrc && ((_a = this.imgEl) === null || _a === void 0 ? void 0 : _a.currentSrc) && !this.imgEl.currentSrc.includes(this.currentSrc))
|
|
89
|
-
return;
|
|
90
|
-
this.imgLoaded = true;
|
|
91
|
-
};
|
|
92
|
-
this._onError = () => {
|
|
93
|
-
console.error('Load image failed:', this.src);
|
|
94
|
-
};
|
|
95
|
-
this.imgEl.addEventListener('load', this._onLoad, { once: true });
|
|
96
|
-
this.imgEl.addEventListener('error', this._onError, { once: true });
|
|
97
|
-
}
|
|
98
|
-
detachImgHandlers() {
|
|
99
|
-
if (!this.imgEl)
|
|
100
|
-
return;
|
|
101
|
-
if (this._onLoad)
|
|
102
|
-
this.imgEl.removeEventListener('load', this._onLoad);
|
|
103
|
-
if (this._onError)
|
|
104
|
-
this.imgEl.removeEventListener('error', this._onError);
|
|
105
|
-
this._onLoad = undefined;
|
|
106
|
-
this._onError = undefined;
|
|
107
|
-
}
|
|
108
85
|
beginLoad() {
|
|
109
86
|
if (this.hasStarted)
|
|
110
87
|
return;
|
|
@@ -113,12 +90,6 @@ const UiImage = class {
|
|
|
113
90
|
if (!this.src)
|
|
114
91
|
return;
|
|
115
92
|
this.hasStarted = true;
|
|
116
|
-
this.wireOnceHandlers();
|
|
117
|
-
if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
|
|
118
|
-
this.imgLoaded = true;
|
|
119
|
-
return;
|
|
120
|
-
}
|
|
121
|
-
this.currentSrc = this.src;
|
|
122
93
|
this.imgEl.src = this.src;
|
|
123
94
|
if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
|
|
124
95
|
this.imgLoaded = true;
|
|
@@ -131,7 +102,7 @@ const UiImage = class {
|
|
|
131
102
|
return (h(Host, { class: "HostContainer" }, h("img", { src: this.src, decoding: "async", style: this.styles, class: "UiContainer Visible", alt: this.alt, width: this.width, height: this.height, loading: "eager" })));
|
|
132
103
|
}
|
|
133
104
|
renderLazy() {
|
|
134
|
-
return (h(Host, { class: "HostContainer", "aria-busy": !this.imgLoaded ? 'true' : 'false' }, this.showSkeleton && (h("ui-skeleton", { class: "UiContainer", structure: "image", width: "100%", height: "100%" })), h("img", { ref: (el) => (this.imgEl = el), src: undefined, decoding: "async", style: this.styles, class: `UiContainer ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" })));
|
|
105
|
+
return (h(Host, { class: "HostContainer", "aria-busy": !this.imgLoaded ? 'true' : 'false' }, this.showSkeleton && (h("ui-skeleton", { class: "UiContainer", structure: "image", width: "100%", height: "100%" })), h("img", { ref: (el) => (this.imgEl = el), src: undefined, 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" })));
|
|
135
106
|
}
|
|
136
107
|
render() {
|
|
137
108
|
return this.loading === 'eager' ? this.renderEager() : this.renderLazy();
|