@everymatrix/casino-engagement-suite-container 1.77.11 → 1.77.12
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/casino-engagement-suite-container/ui-image.entry.js +1 -1
- package/dist/cjs/ui-image.cjs.entry.js +19 -13
- package/dist/esm/ui-image.entry.js +19 -13
- package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/casino-engagement-suite-container/.stencil/packages/stencil/casino-engagement-suite-container/stencil.config.d.ts +2 -0
- package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/casino-engagement-suite-container/.stencil/packages/stencil/casino-engagement-suite-container/stencil.config.dev.d.ts +2 -0
- package/package.json +1 -1
- package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/casino-engagement-suite-container/.stencil/packages/stencil/casino-engagement-suite-container/stencil.config.d.ts +0 -2
- package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/casino-engagement-suite-container/.stencil/packages/stencil/casino-engagement-suite-container/stencil.config.dev.d.ts +0 -2
- /package/dist/types/{builds/emfe-widgets → Users/adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/casino-engagement-suite-container/.stencil/libs/common/src/storybook/storybook-utils.d.ts +0 -0
- /package/dist/types/{builds/emfe-widgets → Users/adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/casino-engagement-suite-container/.stencil/packages/stencil/casino-engagement-suite-container/storybook/main.d.ts +0 -0
- /package/dist/types/{builds/emfe-widgets → Users/adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/casino-engagement-suite-container/.stencil/packages/stencil/casino-engagement-suite-container/storybook/preview.d.ts +0 -0
- /package/dist/types/{builds/emfe-widgets → Users/adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/casino-engagement-suite-container/.stencil/tools/plugins/index.d.ts +0 -0
- /package/dist/types/{builds/emfe-widgets → Users/adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/casino-engagement-suite-container/.stencil/tools/plugins/lazy-load-chunk-plugin.d.ts +0 -0
- /package/dist/types/{builds/emfe-widgets → Users/adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/casino-engagement-suite-container/.stencil/tools/plugins/stencil-clean-deps-plugin.d.ts +0 -0
- /package/dist/types/{builds/emfe-widgets → Users/adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/casino-engagement-suite-container/.stencil/tools/plugins/vite-chunk-plugin.d.ts +0 -0
- /package/dist/types/{builds/emfe-widgets → Users/adrian.pripon/Documents/Work}/widgets-monorepo/packages/stencil/casino-engagement-suite-container/.stencil/tools/plugins/vite-clean-deps-plugin.d.ts +0 -0
|
@@ -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
|
}
|
package/package.json
CHANGED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|