@everymatrix/casino-engagement-suite-container 1.77.0 → 1.77.1

package/dist/esm/ui-image.entry.js

@@ -6,59 +6,140 @@ const UiImageStyle0 = uiImageCss;
 const UiImage = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.hasStarted = false;
         this.src = undefined;
         this.width = undefined;
         this.height = undefined;
         this.alt = undefined;
         this.styles = undefined;
         this.detectDistance = '200px';
+        this.loading = 'lazy';
         this.imgLoaded = false;
-        this.shouldLoad = false;
     }
-    handleSrc() {
-        if (!this.shouldLoad) {
+    onSrcChange() {
+        if (this.loading === 'eager')
             return;
+        this.imgLoaded = false;
+        this.hasStarted = false;
+        if (typeof window === 'undefined' || !('IntersectionObserver' in window)) {
+            this.beginLoad();
         }
-        const preloadedImage = new Image();
-        preloadedImage.onload = () => {
-            if (this.image) {
-                this.image.src = this.src;
-                this.imgLoaded = true;
-                preloadedImage.onload = null;
+    }
+    onLoadingChange(newVal, oldVal) {
+        if (newVal === oldVal)
+            return;
+        this.cleanupObserver();
+        this.detachImgHandlers();
+        if (newVal === 'eager') {
+            if (this.imgEl && this.src) {
+                this.imgEl.src = this.src;
             }
-        };
-        preloadedImage.src = this.src;
+            this.hasStarted = true;
+        }
+        else {
+            this.imgLoaded = false;
+            this.hasStarted = false;
+            this.setupObserver();
+        }
     }
     componentDidLoad() {
-        if ('IntersectionObserver' in window) {
-            this.el.__uxComponent = this;
-            if (!window.EMUxObserver) {
-                window.EMUxObserver = new IntersectionObserver((entries) => {
-                    entries.forEach(entry => {
-                        if (entry.isIntersecting) {
-                            const comp = entry.target.__uxComponent;
-                            if (comp) {
-                                comp.shouldLoad = true;
-                                comp.handleSrc();
-                            }
-                            window.EMUxObserver.unobserve(entry.target);
-                        }
-                    });
-                }, { rootMargin: this.detectDistance });
+        if (this.loading === 'eager')
+            return;
+        this.setupObserver();
+    }
+    disconnectedCallback() {
+        this.cleanupObserver();
+        this.detachImgHandlers();
+    }
+    canUseIO() {
+        return typeof window !== 'undefined' && 'IntersectionObserver' in window;
+    }
+    setupObserver() {
+        if (this.loading === 'eager')
+            return;
+        if (!this.canUseIO()) {
+            this.beginLoad();
+            return;
+        }
+        this.io = new IntersectionObserver((entries) => {
+            var _a;
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    this.beginLoad();
+                    (_a = this.io) === null || _a === void 0 ? void 0 : _a.unobserve(entry.target);
+                    this.cleanupObserver();
+                    break;
+                }
             }
-            window.EMUxObserver.observe(this.el);
+        }, { root: null, rootMargin: this.detectDistance, threshold: 0 });
+        this.io.observe(this.el);
+    }
+    cleanupObserver() {
+        var _a;
+        (_a = this.io) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.io = undefined;
+    }
+    wireOnceHandlers() {
+        if (!this.imgEl)
+            return;
+        this.detachImgHandlers();
+        this._onLoad = () => {
+            var _a;
+            if (this.currentSrc && ((_a = this.imgEl) === null || _a === void 0 ? void 0 : _a.currentSrc) && !this.imgEl.currentSrc.includes(this.currentSrc))
+                return;
+            this.imgLoaded = true;
+        };
+        this._onError = () => {
+            console.error('Load image failed:', this.src);
+        };
+        this.imgEl.addEventListener('load', this._onLoad, { once: true });
+        this.imgEl.addEventListener('error', this._onError, { once: true });
+    }
+    detachImgHandlers() {
+        if (!this.imgEl)
+            return;
+        if (this._onLoad)
+            this.imgEl.removeEventListener('load', this._onLoad);
+        if (this._onError)
+            this.imgEl.removeEventListener('error', this._onError);
+        this._onLoad = undefined;
+        this._onError = undefined;
+    }
+    beginLoad() {
+        if (this.hasStarted)
+            return;
+        if (!this.imgEl)
+            return;
+        if (!this.src)
+            return;
+        this.hasStarted = true;
+        this.wireOnceHandlers();
+        if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
+            this.imgLoaded = true;
+            return;
         }
-        else {
-            this.shouldLoad = true;
-            this.handleSrc();
+        this.currentSrc = this.src;
+        this.imgEl.src = this.src;
+        if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
+            this.imgLoaded = true;
         }
     }
+    get showSkeleton() {
+        return this.loading !== 'eager' && !this.imgLoaded;
+    }
+    renderEager() {
+        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" })));
+    }
+    renderLazy() {
+        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" })));
+    }
     render() {
-        return (h(Host, { key: 'f506ba73852f257ad80bf59ca177d2065a5f365e', class: "HostContainer" }, !this.imgLoaded && (h("ui-skeleton", { key: '564ebfab701f827ddc2debccb7615926dbc9e876', class: "UiContainer", structure: "image", width: "100%", height: "100%" })), h("img", { key: '2188ca4494c10587f064acc5459ffc468948f497', ref: (el) => (this.image = el), src: this.shouldLoad ? this.src : undefined, onLoad: () => (this.imgLoaded = true), style: this.styles, class: `UiContainer ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" })));
+        return this.loading === 'eager' ? this.renderEager() : this.renderLazy();
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "src": ["handleSrc"]
+        "src": ["onSrcChange"],
+        "loading": ["onLoadingChange"]
     }; }
 };
 UiImage.style = UiImageStyle0;

package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/casino-engagement-suite-container/.stencil/tools/plugins/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./vite-chunk-plugin";
 export * from "./stencil-clean-deps-plugin";
 export * from "./vite-clean-deps-plugin";
+export * from "./lazy-load-chunk-plugin";

package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/casino-engagement-suite-container/.stencil/tools/plugins/lazy-load-chunk-plugin.d.ts

@@ -0,0 +1,12 @@
+export declare const lazyLoadChunkPlugin: () => {
+    name: string;
+    config(config: any): {
+        build: {
+            rollupOptions: {
+                output: {
+                    manualChunks(id: any): any;
+                };
+            };
+        };
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-engagement-suite-container",
-  "version": "1.77.0",
+  "version": "1.77.1",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",