@everymatrix/casino-page 1.77.0 → 1.77.2

package/components/{GeneralAnimationLoading-QrfZPZRh.cjs → GeneralAnimationLoading-BySVl_wz.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./CasinoCalendar-BEFWuyZL.cjs");function u(e){i.append_styles(e,"svelte-gnt082",".LoaderContainer{display:flex;justify-content:center}.lds-ellipsis{display:inline-block;position:relative;width:80px;height:80px}.lds-ellipsis div{position:absolute;top:33px;width:13px;height:13px;border-radius:50%;background:#d1d1d1;animation-timing-function:cubic-bezier(0, 1, 1, 0)}.lds-ellipsis div:nth-child(1){left:8px;animation:lds-ellipsis1 0.6s infinite}.lds-ellipsis div:nth-child(2){left:8px;animation:lds-ellipsis2 0.6s infinite}.lds-ellipsis div:nth-child(3){left:32px;animation:lds-ellipsis2 0.6s infinite}.lds-ellipsis div:nth-child(4){left:56px;animation:lds-ellipsis3 0.6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0, 0)}100%{transform:translate(24px, 0)}}")}function f(e){let t;return{c(){t=i.element("div"),t.innerHTML='<section class="LoaderContainer"><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div></section>'},m(l,r){i.insert(l,t,r),e[4](t)},p:i.noop,i:i.noop,o:i.noop,d(l){l&&i.detach(t),e[4](null)}}}function m(e,t,l){let{clientstyling:r=""}=t,{clientstylingurl:c=""}=t,{mbsource:d}=t,n;i.onMount(()=>()=>{});function a(s){i.binding_callbacks[s?"unshift":"push"](()=>{n=s,l(0,n)})}return e.$$set=s=>{"clientstyling"in s&&l(1,r=s.clientstyling),"clientstylingurl"in s&&l(2,c=s.clientstylingurl),"mbsource"in s&&l(3,d=s.mbsource)},e.$$.update=()=>{e.$$.dirty&3&&r&&n&&i.setClientStyling(n,r),e.$$.dirty&5&&c&&n&&i.setClientStylingURL(n,c),e.$$.dirty&9&&d&&n&&i.setStreamStyling(n,`${d}.Style`)},[n,r,c,d,a]}class o extends i.SvelteComponent{constructor(t){super(),i.init(this,t,m,f,i.safe_not_equal,{clientstyling:1,clientstylingurl:2,mbsource:3},u)}get clientstyling(){return this.$$.ctx[1]}set clientstyling(t){this.$$set({clientstyling:t}),i.flush()}get clientstylingurl(){return this.$$.ctx[2]}set clientstylingurl(t){this.$$set({clientstylingurl:t}),i.flush()}get mbsource(){return this.$$.ctx[3]}set mbsource(t){this.$$set({mbsource:t}),i.flush()}}i.create_custom_element(o,{clientstyling:{},clientstylingurl:{},mbsource:{}},[],[],!0);exports.default=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./CasinoCalendar-BYV7Jkb3.cjs");function u(e){i.append_styles(e,"svelte-gnt082",".LoaderContainer{display:flex;justify-content:center}.lds-ellipsis{display:inline-block;position:relative;width:80px;height:80px}.lds-ellipsis div{position:absolute;top:33px;width:13px;height:13px;border-radius:50%;background:#d1d1d1;animation-timing-function:cubic-bezier(0, 1, 1, 0)}.lds-ellipsis div:nth-child(1){left:8px;animation:lds-ellipsis1 0.6s infinite}.lds-ellipsis div:nth-child(2){left:8px;animation:lds-ellipsis2 0.6s infinite}.lds-ellipsis div:nth-child(3){left:32px;animation:lds-ellipsis2 0.6s infinite}.lds-ellipsis div:nth-child(4){left:56px;animation:lds-ellipsis3 0.6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0, 0)}100%{transform:translate(24px, 0)}}")}function f(e){let t;return{c(){t=i.element("div"),t.innerHTML='<section class="LoaderContainer"><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div></section>'},m(l,r){i.insert(l,t,r),e[4](t)},p:i.noop,i:i.noop,o:i.noop,d(l){l&&i.detach(t),e[4](null)}}}function m(e,t,l){let{clientstyling:r=""}=t,{clientstylingurl:c=""}=t,{mbsource:d}=t,n;i.onMount(()=>()=>{});function a(s){i.binding_callbacks[s?"unshift":"push"](()=>{n=s,l(0,n)})}return e.$$set=s=>{"clientstyling"in s&&l(1,r=s.clientstyling),"clientstylingurl"in s&&l(2,c=s.clientstylingurl),"mbsource"in s&&l(3,d=s.mbsource)},e.$$.update=()=>{e.$$.dirty&3&&r&&n&&i.setClientStyling(n,r),e.$$.dirty&5&&c&&n&&i.setClientStylingURL(n,c),e.$$.dirty&9&&d&&n&&i.setStreamStyling(n,`${d}.Style`)},[n,r,c,d,a]}class o extends i.SvelteComponent{constructor(t){super(),i.init(this,t,m,f,i.safe_not_equal,{clientstyling:1,clientstylingurl:2,mbsource:3},u)}get clientstyling(){return this.$$.ctx[1]}set clientstyling(t){this.$$set({clientstyling:t}),i.flush()}get clientstylingurl(){return this.$$.ctx[2]}set clientstylingurl(t){this.$$set({clientstylingurl:t}),i.flush()}get mbsource(){return this.$$.ctx[3]}set mbsource(t){this.$$set({mbsource:t}),i.flush()}}i.create_custom_element(o,{clientstyling:{},clientstylingurl:{},mbsource:{}},[],[],!0);exports.default=o;

package/es2015/casino-page.cjs

@@ -1 +1 @@
-"use strict";if(typeof window!="undefined"){let n=function(t){return function(...s){try{return t.apply(this,s)}catch(e){if(e instanceof DOMException&&e.message.includes("has already been used with this registry")||e.message.includes("Cannot define multiple custom elements with the same tag name"))return!1;throw e}}};customElements.define=n(customElements.define),Promise.resolve().then(()=>require("../components/CasinoPage-Dfa5MIJN.cjs")).then(({default:t})=>{!customElements.get("casino-page")&&customElements.define("casino-page",t.element)})}
+"use strict";if(typeof window!="undefined"){let n=function(t){return function(...s){try{return t.apply(this,s)}catch(e){if(e instanceof DOMException&&e.message.includes("has already been used with this registry")||e.message.includes("Cannot define multiple custom elements with the same tag name"))return!1;throw e}}};customElements.define=n(customElements.define),Promise.resolve().then(()=>require("../components/CasinoPage-AT7RLDJ9.cjs")).then(({default:t})=>{!customElements.get("casino-page")&&customElements.define("casino-page",t.element)})}

package/es2015/casino-page.js

@@ -10,7 +10,7 @@ if (typeof window != "undefined") {
       }
     };
   };
-  customElements.define = n(customElements.define), import("../components/CasinoPage-Naj-FYxv.js").then(({ default: t }) => {
+  customElements.define = n(customElements.define), import("../components/CasinoPage-Tt4Yn1a3.js").then(({ default: t }) => {
     !customElements.get("casino-page") && customElements.define("casino-page", t.element);
   });
 }

package/esnext/casino-page.js

@@ -1,4 +1,4 @@
-import { C as s } from "../components/CasinoPage-ZArp5o29.js";
+import { C as s } from "../components/CasinoPage-DxFN_yZb.js";
 function a(t) {
   return function(...n) {
     try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-page",
-  "version": "1.77.0",
+  "version": "1.77.2",
   "type": "module",
   "main": "es2015/casino-page.cjs",
   "module": "esnext/casino-page.js",

package/stencil/casino-play-random-game-3OLT0AIG.js

@@ -0,0 +1,25 @@
+var l = (i, a, t) => new Promise((s, o) => {
+  var c = (n) => {
+    try {
+      e(t.next(n));
+    } catch (r) {
+      o(r);
+    }
+  }, g = (n) => {
+    try {
+      e(t.throw(n));
+    } catch (r) {
+      o(r);
+    }
+  }, e = (n) => n.done ? s(n.value) : Promise.resolve(n.value).then(c, g);
+  e((t = t.apply(i, a)).next());
+});
+import { b as m, p as d } from "./index-27b314b8-rkjLfQe1.js";
+import { g as h } from "./app-globals-0f993ce5-DfNOCk8l.js";
+var u = () => {
+  const i = import.meta.url, a = {};
+  return i !== "" && (a.resourcesUrl = new URL(".", i).href), d(a);
+};
+u().then((i) => l(void 0, null, function* () {
+  return yield h(), m([["casino-play-random-game_3", [[1, "casino-play-random-game", { endpoint: [513], datasource: [513], language: [513], specificCategory: [513, "specific-category"], iconVisible: [513, "icon-visible"], iconVisibleOnAnim: [513, "icon-visible-on-anim"], launchByGameCard: [513, "launch-by-game-card"], mbSource: [513, "mb-source"], clientStyling: [513, "client-styling"], clientStylingUrl: [513, "client-styling-url"], translationUrl: [513, "translation-url"], hasErrors: [32], isLoading: [32], gamesToShow: [32], selectedGame: [32], animationDone: [32], animationStarted: [32], imageLoadingType: [32], detectDistance: [32] }, null, { endpoint: ["watchEndpoint"], datasource: ["watchEndpoint"], language: ["watchEndpoint"], translationUrl: ["handleNewTranslations"], iconVisible: ["handleIsIconVisible"], clientStyling: ["handleClientStylingChange"], clientStylingUrl: ["handleClientStylingChangeURL"] }], [0, "ui-image", { src: [1], width: [1], height: [1], alt: [1], styles: [8], detectDistance: [1, "detect-distance"], loading: [1], imgLoaded: [32] }, null, { src: ["onSrcChange"], loading: ["onLoadingChange"] }], [0, "ui-skeleton", { structure: [1], width: [1], height: [1], borderRadius: [8, "border-radius"], marginBottom: [8, "margin-bottom"], marginTop: [8, "margin-top"], marginLeft: [8, "margin-left"], marginRight: [8, "margin-right"], animation: [4], rows: [2], size: [1] }, null, { structure: ["handleStructureChange"] }]]]], i);
+}));

package/stencil/casino-play-random-game-BnjMAnCB.js

@@ -0,0 +1,7 @@
+import { b as a, p as t } from "./index-27b314b8-DWbdQG1d.js";
+import { g as e } from "./app-globals-0f993ce5-DfNOCk8l.js";
+var r = () => {
+  const n = import.meta.url, i = {};
+  return n !== "" && (i.resourcesUrl = new URL(".", n).href), t(i);
+};
+r().then(async (n) => (await e(), a([["casino-play-random-game_3", [[1, "casino-play-random-game", { endpoint: [513], datasource: [513], language: [513], specificCategory: [513, "specific-category"], iconVisible: [513, "icon-visible"], iconVisibleOnAnim: [513, "icon-visible-on-anim"], launchByGameCard: [513, "launch-by-game-card"], mbSource: [513, "mb-source"], clientStyling: [513, "client-styling"], clientStylingUrl: [513, "client-styling-url"], translationUrl: [513, "translation-url"], hasErrors: [32], isLoading: [32], gamesToShow: [32], selectedGame: [32], animationDone: [32], animationStarted: [32], imageLoadingType: [32], detectDistance: [32] }, null, { endpoint: ["watchEndpoint"], datasource: ["watchEndpoint"], language: ["watchEndpoint"], translationUrl: ["handleNewTranslations"], iconVisible: ["handleIsIconVisible"], clientStyling: ["handleClientStylingChange"], clientStylingUrl: ["handleClientStylingChangeURL"] }], [0, "ui-image", { src: [1], width: [1], height: [1], alt: [1], styles: [8], detectDistance: [1, "detect-distance"], loading: [1], imgLoaded: [32] }, null, { src: ["onSrcChange"], loading: ["onLoadingChange"] }], [0, "ui-skeleton", { structure: [1], width: [1], height: [1], borderRadius: [8, "border-radius"], marginBottom: [8, "margin-bottom"], marginTop: [8, "margin-top"], marginLeft: [8, "margin-left"], marginRight: [8, "margin-right"], animation: [4], rows: [2], size: [1] }, null, { structure: ["handleStructureChange"] }]]]], n)));

package/stencil/casino-play-random-game-DTTdIJJ3.cjs

@@ -0,0 +1 @@
+"use strict";var c=(n,i,t)=>new Promise((d,l)=>{var g=e=>{try{a(t.next(e))}catch(r){l(r)}},u=e=>{try{a(t.throw(e))}catch(r){l(r)}},a=e=>e.done?d(e.value):Promise.resolve(e.value).then(g,u);a((t=t.apply(n,i)).next())});const s=require("./index-27b314b8-B6-HIs2Q.cjs"),m=require("./app-globals-0f993ce5-4b17CI_n.cjs");var o=typeof document!="undefined"?document.currentScript:null,h=()=>{const n=typeof document=="undefined"?require("url").pathToFileURL(__filename).href:o&&o.tagName.toUpperCase()==="SCRIPT"&&o.src||new URL("stencil/casino-play-random-game-DTTdIJJ3.cjs",document.baseURI).href,i={};return n!==""&&(i.resourcesUrl=new URL(".",n).href),s.promiseResolve(i)};h().then(n=>c(exports,null,function*(){return yield m.globalScripts(),s.bootstrapLazy([["casino-play-random-game_3",[[1,"casino-play-random-game",{endpoint:[513],datasource:[513],language:[513],specificCategory:[513,"specific-category"],iconVisible:[513,"icon-visible"],iconVisibleOnAnim:[513,"icon-visible-on-anim"],launchByGameCard:[513,"launch-by-game-card"],mbSource:[513,"mb-source"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],hasErrors:[32],isLoading:[32],gamesToShow:[32],selectedGame:[32],animationDone:[32],animationStarted:[32],imageLoadingType:[32],detectDistance:[32]},null,{endpoint:["watchEndpoint"],datasource:["watchEndpoint"],language:["watchEndpoint"],translationUrl:["handleNewTranslations"],iconVisible:["handleIsIconVisible"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}],[0,"ui-image",{src:[1],width:[1],height:[1],alt:[1],styles:[8],detectDistance:[1,"detect-distance"],loading:[1],imgLoaded:[32]},null,{src:["onSrcChange"],loading:["onLoadingChange"]}],[0,"ui-skeleton",{structure:[1],width:[1],height:[1],borderRadius:[8,"border-radius"],marginBottom:[8,"margin-bottom"],marginTop:[8,"margin-top"],marginLeft:[8,"margin-left"],marginRight:[8,"margin-right"],animation:[4],rows:[2],size:[1]},null,{structure:["handleStructureChange"]}]]]],n)}));

package/stencil/{casino-play-random-game_2-Cr07t-U3.js → casino-play-random-game_3-5Bmo5OfX.js}

@@ -1,8 +1,8 @@
-import { r as h, c as u, h as n, g as p, H as w } from "./index-328e660d-Cex2hzsG.js";
-const f = () => {
+import { r as d, c as f, h as t, g, H as l } from "./index-27b314b8-rkjLfQe1.js";
+const w = () => {
   let e = window.navigator.userAgent;
   return e.toLowerCase().match(/android/i) ? "Android" : e.toLowerCase().match(/iphone/i) ? "iPhone" : e.toLowerCase().match(/ipad|ipod/i) ? "iPad" : "PC";
-}, y = "en", r = {
+}, y = "en", s = {
   en: {
     error: "Error",
     randomGameLoading: "Loading ...",
@@ -41,46 +41,46 @@ const f = () => {
   tr: {
     error: "Hata",
     randomGameLoading: "Yükleniyor...",
-    playRandomGame: "Rasgele bir oyun oyna",
+    playRandomGame: "Rastgele Bir Oyun Oyna",
     playNowRandomGame: "Şimdi Oyna",
     spinRandomGame: "DEĞİŞTİR"
   }
-}, l = (e) => new Promise((t) => {
+}, m = (e) => new Promise((n) => {
   fetch(e).then((i) => i.json()).then((i) => {
     Object.keys(i).forEach((a) => {
-      r[a] || (r[a] = {});
-      for (let o in i[a])
-        r[a][o] = i[a][o];
-    }), t(!0);
+      s[a] || (s[a] = {});
+      for (let r in i[a])
+        s[a][r] = i[a][r];
+    }), n(!0);
   });
-}), s = (e, t) => {
-  const i = t;
-  return r[i !== void 0 && i in r ? i : y][e];
+}), o = (e, n) => {
+  const i = n;
+  return s[i !== void 0 && i in s ? i : y][e];
 };
-function m(e, t) {
+function h(e, n) {
   if (e) {
     const i = document.createElement("style");
-    i.innerHTML = t, e.appendChild(i);
+    i.innerHTML = n, e.appendChild(i);
   }
 }
-function d(e, t) {
-  const i = new URL(t);
+function c(e, n) {
+  const i = new URL(n);
   fetch(i.href).then((a) => a.text()).then((a) => {
-    const o = document.createElement("style");
-    o.innerHTML = a, e && e.appendChild(o);
+    const r = document.createElement("style");
+    r.innerHTML = a, e && e.appendChild(r);
   }).catch((a) => {
     console.error("There was an error while trying to load client styling from URL", a);
   });
 }
-function x(e, t, i) {
+function b(e, n, i) {
   if (window.emMessageBus) {
     const a = document.createElement("style");
-    window.emMessageBus.subscribe(t, (o) => {
-      a.innerHTML = o, e && e.appendChild(a);
+    window.emMessageBus.subscribe(n, (r) => {
+      a.innerHTML = r, e && e.appendChild(a);
     });
   }
 }
-const b = `:host {
+const x = `:host {
   display: block;
   font-family: inherit;
   -webkit-transform: translate3d(0, 0, 0);
@@ -457,50 +457,56 @@ const b = `:host {
     width: 70px;
     height: 85px;
   }
-}`, k = b, G = class {
+}`, v = x, k = class {
   constructor(e) {
-    h(this, e), this.dataLoaded = u(this, "data-loaded"), this.animation = null, this.selectedGameIndex = null, this.selectedGameEl = null, this.iconVisibility = null, this.shuffle = (t) => {
-      let i = t.length, a;
+    d(this, e), this.dataLoaded = f(this, "data-loaded"), this.animation = null, this.selectedGameIndex = null, this.selectedGameEl = null, this.iconVisibility = null, this.shuffle = (n) => {
+      let i = n.length, a;
       for (; i !== 0; )
-        a = Math.floor(Math.random() * i), i--, [t[i], t[a]] = [t[a], t[i]];
-      return t;
-    }, this.endpoint = void 0, this.datasource = void 0, this.language = "en", this.specificCategory = "", this.iconVisible = "", this.iconVisibleOnAnim = "", this.launchByGameCard = "", this.mbSource = void 0, this.clientStyling = "", this.clientStylingUrl = "", this.translationUrl = "", this.hasErrors = !1, this.isLoading = !0, this.gamesToShow = void 0, this.selectedGame = null, this.animationDone = !1, this.animationStarted = !1;
+        a = Math.floor(Math.random() * i), i--, [n[i], n[a]] = [n[a], n[i]];
+      return n;
+    }, this.endpoint = void 0, this.datasource = void 0, this.language = "en", this.specificCategory = "", this.iconVisible = "", this.iconVisibleOnAnim = "", this.launchByGameCard = "", this.mbSource = void 0, this.clientStyling = "", this.clientStylingUrl = "", this.translationUrl = "", this.hasErrors = !1, this.isLoading = !0, this.gamesToShow = void 0, this.selectedGame = null, this.animationDone = !1, this.animationStarted = !1, this.imageLoadingType = "lazy", this.detectDistance = "200px";
   }
-  watchEndpoint(e, t) {
-    e && e != t && this.endpoint && this.fetchGameList();
+  watchEndpoint(e, n) {
+    e && e != n && this.endpoint && this.fetchGameList();
   }
   handleNewTranslations() {
-    this.isLoading = !0, l(this.translationUrl).then(() => {
+    this.isLoading = !0, m(this.translationUrl).then(() => {
       this.isLoading = !1;
     });
   }
   handleIsIconVisible() {
     this.iconVisibility = this.iconVisible === "true";
   }
-  handleClientStylingChange(e, t) {
-    e != t && m(this.stylingContainer, this.clientStyling);
+  handleClientStylingChange(e, n) {
+    e != n && h(this.stylingContainer, this.clientStyling);
   }
-  handleClientStylingChangeURL(e, t) {
-    e != t && this.clientStylingUrl && d(this.stylingContainer, this.clientStylingUrl);
+  handleClientStylingChangeURL(e, n) {
+    e != n && this.clientStylingUrl && c(this.stylingContainer, this.clientStylingUrl);
   }
   connectedCallback() {
     this.handleIsIconVisible();
   }
   componentWillLoad() {
-    if (this.translationUrl.length > 2 && l(this.translationUrl), this.endpoint && this.language && this.datasource)
+    if (this.translationUrl.length > 2 && m(this.translationUrl), this.endpoint && this.language && this.datasource)
       return this.fetchGameList();
   }
   componentDidLoad() {
-    window.emMessageBus != null ? x(this.stylingContainer, `${this.mbSource}.Style`) : (this.clientStyling && m(this.stylingContainer, this.clientStyling), this.clientStylingUrl && d(this.stylingContainer, this.clientStylingUrl));
+    "IntersectionObserver" in window && (this.io = new IntersectionObserver((e) => {
+      e.forEach((n) => {
+        var i;
+        n.isIntersecting && (this.imageLoadingType = "eager", (i = this.io) === null || i === void 0 || i.unobserve(n.target));
+      });
+    }, { root: null, rootMargin: this.detectDistance }), this.io.observe(this.host)), window.emMessageBus != null ? b(this.stylingContainer, `${this.mbSource}.Style`) : (this.clientStyling && h(this.stylingContainer, this.clientStyling), this.clientStylingUrl && c(this.stylingContainer, this.clientStylingUrl));
   }
   disconnectedCallback() {
-    this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    var e;
+    (e = this.io) === null || e === void 0 || e.disconnect(), this.stylingSubscription && this.stylingSubscription.unsubscribe();
   }
   fetchGameList() {
     let e = new URL(`${this.endpoint}/v1/casino/games`);
-    return e.searchParams.append("platform", f()), e.searchParams.append("datasource", this.datasource), e.searchParams.append("fields", "gId,id,href,thumbnail,name,vendor,launchUrl,subVendor"), e.searchParams.append("expand", "vendor"), e.searchParams.append("pagination", "offset=0,limit=423"), e.searchParams.append("language", this.language), this.specificCategory && e.searchParams.append("filter", `categories(id=${this.specificCategory})`), new Promise((t, i) => {
+    return e.searchParams.append("platform", w()), e.searchParams.append("datasource", this.datasource), e.searchParams.append("fields", "gId,id,href,thumbnail,name,vendor,launchUrl,subVendor"), e.searchParams.append("expand", "vendor"), e.searchParams.append("pagination", "offset=0,limit=423"), e.searchParams.append("language", this.language), this.specificCategory && e.searchParams.append("filter", `categories(id=${this.specificCategory})`), new Promise((n, i) => {
       this.isLoading = !0, fetch(e.href).then((a) => a.json()).then((a) => {
-        this.gamesToShow = this.setUpGames(a == null ? void 0 : a.items), t(!0);
+        this.gamesToShow = this.setUpGames(a == null ? void 0 : a.items), n(!0);
       }).catch((a) => {
         console.error(a), this.hasErrors = !0, i(a);
       }).finally(() => {
@@ -511,8 +517,8 @@ const b = `:host {
     });
   }
   setUpGames(e) {
-    const t = this.shuffle(e).slice(0, 40);
-    return t.concat(t);
+    const n = this.shuffle(e).slice(0, 40);
+    return n.concat(n);
   }
   selectRandomGame() {
     const e = this.gamesToShow.length / 2;
@@ -530,18 +536,18 @@ const b = `:host {
   }
   animateGames() {
     this.iconVisibility = this.iconVisibleOnAnim === "true", this.animationStarted = !0, this.animationDone = !1, this.animation && this.animation.cancel(), this.selectedGameEl && (this.selectedGameEl.classList.remove("TheRandomGame"), this.selectedGame = null, this.selectedGameIndex = null), this.selectRandomGame();
-    const e = window.getComputedStyle(this.gameContainer).getPropertyValue("gap"), t = parseInt(e, 10), i = this.selectedGameEl.offsetWidth, a = this.gameContainer.offsetWidth, o = (i + t) * this.selectedGameIndex + // Width of game cards up to the selected
+    const e = window.getComputedStyle(this.gameContainer).getPropertyValue("gap"), n = parseInt(e, 10), i = this.selectedGameEl.offsetWidth, a = this.gameContainer.offsetWidth, r = (i + n) * this.selectedGameIndex + // Width of game cards up to the selected
     i / 2 - // Additional half card width to center to the selected game
-    a / 2, c = [
+    a / 2, u = [
       { transform: "translateX(0px)", scale: 1 },
       { scale: 0.75 },
-      { transform: `translateX(-${o}px)`, scale: 1 }
-    ], g = {
+      { transform: `translateX(-${r}px)`, scale: 1 }
+    ], p = {
       duration: 3e3,
       easing: "cubic-bezier(0.5, 0, 0.5, 1.2)",
       fill: "forwards"
     };
-    this.animation = this.gameContainer.animate(c, g), this.animation.onfinish = () => {
+    this.animation = this.gameContainer.animate(u, p), this.animation.onfinish = () => {
       this.animationDone = !0, this.selectedGameEl.classList.add("TheRandomGame"), this.selectedGame = this.gamesToShow[this.selectedGameIndex];
     };
   }
@@ -556,17 +562,17 @@ const b = `:host {
     });
   }
   renderGameDetails() {
-    return n("div", { class: "RandomButtonsWrapper" }, n("div", { class: "RandomGameDetails" }, n("span", { class: "RandomGameTitle" }, this.selectedGame.name), n("span", { class: "RandomGameInfo", onClick: () => this.showGameInfo() }, "i")), n("div", { class: "RandomButtons" }, n("button", { class: "RandomButton On", onClick: () => this.respin() }, s("spinRandomGame", this.language)), !this.launchByGameCard && n("button", { class: "RandomButton On", onClick: () => this.playGame() }, s("playNowRandomGame", this.language))));
+    return t("div", { class: "RandomButtonsWrapper" }, t("div", { class: "RandomGameDetails" }, t("span", { class: "RandomGameTitle" }, this.selectedGame.name), t("span", { class: "RandomGameInfo", onClick: () => this.showGameInfo() }, "i")), t("div", { class: "RandomButtons" }, t("button", { class: "RandomButton On", onClick: () => this.respin() }, o("spinRandomGame", this.language)), !this.launchByGameCard && t("button", { class: "RandomButton On", onClick: () => this.playGame() }, o("playNowRandomGame", this.language))));
   }
   renderSkeleton() {
-    const e = Array.from({ length: 5 }, (t, i) => n("div", { class: "RandomGameCard", key: i }, n("ui-skeleton", { structure: "rectangle", width: "300px", height: "420px", borderRadius: "10px", animation: !0 })));
-    return n("div", { class: "RandomGameWrapper" }, n("div", { class: "GameContainerGradient" }), n("div", { class: "GamesContainer" }, e));
+    const e = Array.from({ length: 5 }, (n, i) => t("div", { class: "RandomGameCard", key: i }, t("ui-skeleton", { structure: "rectangle", width: "300px", height: "420px", borderRadius: "10px", animation: !0 })));
+    return t("div", { class: "RandomGameWrapper" }, t("div", { class: "GameContainerGradient" }), t("div", { class: "GamesContainer" }, e));
   }
   render() {
-    return n("div", { key: "ccc1e77093402e72a300ded18465085c182fbd79", ref: (e) => this.stylingContainer = e }, this.hasErrors ? n("div", { class: "RandomGameError" }, n("div", { class: "Title" }, s("error", this.language))) : this.isLoading ? this.renderSkeleton() : n("div", { class: "RandomGameWrapper" }, n("div", { class: "GameContainerGradient" }), n("div", { class: "GamesContainer", ref: (e) => this.gameContainer = e }, this.gamesToShow && this.gamesToShow.map((e, t) => n("div", { class: "RandomGameCard", key: t, onClick: this.launchByGameCard === "true" ? () => this.playGame() : void 0 }, n("div", { class: "RandomGameVendor" }, e.vendor.name), n("img", { class: "RandomGameImage", src: e.thumbnail, alt: e.name, title: e.name }), this.selectedGame && this.selectedGameIndex === t && this.renderGameDetails()))), n("div", { class: `ButtonWrapper ${this.animationDone ? "HideAnimation" : ""}` }, n("div", { class: "ButtonContainer" }, this.iconVisibility && n("div", { class: `ButtonIcon ${this.animationStarted ? "Flip" : ""}` }, n("div", { class: "QustionMark" }, "?"), n("div", { class: "HexagonMarkShadow" }), n("div", { class: "HexagonMark" })), !this.animationStarted && n("div", { class: `RandomButton ${this.animationStarted ? "HideAnimation" : ""}`, onClick: () => this.playRandomGame() }, s("playRandomGame", this.language))))));
+    return t("div", { key: "29fe3535d63177e6d1f30a757bf17b70d89ce386", ref: (e) => this.stylingContainer = e }, this.hasErrors ? t("div", { class: "RandomGameError" }, t("div", { class: "Title" }, o("error", this.language))) : this.isLoading ? this.renderSkeleton() : t("div", { class: "RandomGameWrapper" }, t("div", { class: "GameContainerGradient" }), t("div", { class: "GamesContainer", ref: (e) => this.gameContainer = e }, this.gamesToShow && this.gamesToShow.map((e, n) => t("div", { class: "RandomGameCard", key: n, onClick: this.launchByGameCard === "true" ? () => this.playGame() : void 0 }, t("div", { class: "RandomGameVendor" }, e.vendor.name), t("ui-image", { class: "RandomGameImage", src: e.thumbnail, alt: e.name, title: e.name, loading: this.imageLoadingType }), this.selectedGame && this.selectedGameIndex === n && this.renderGameDetails()))), t("div", { class: `ButtonWrapper ${this.animationDone ? "HideAnimation" : ""}` }, t("div", { class: "ButtonContainer" }, this.iconVisibility && t("div", { class: `ButtonIcon ${this.animationStarted ? "Flip" : ""}` }, t("div", { class: "QustionMark" }, "?"), t("div", { class: "HexagonMarkShadow" }), t("div", { class: "HexagonMark" })), !this.animationStarted && t("div", { class: `RandomButton ${this.animationStarted ? "HideAnimation" : ""}`, onClick: () => this.playRandomGame() }, o("playRandomGame", this.language))))));
   }
   get host() {
-    return p(this);
+    return g(this);
   }
   static get watchers() {
     return {
@@ -580,10 +586,92 @@ const b = `:host {
     };
   }
 };
-G.style = k;
-const v = ":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)}}", R = v, S = class {
+k.style = v;
+const G = ".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}", R = G, S = class {
+  constructor(e) {
+    d(this, e), 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() {
+    this.loading !== "eager" && (this.imgLoaded = !1, this.hasStarted = !1, (typeof window == "undefined" || !("IntersectionObserver" in window)) && this.beginLoad());
+  }
+  onLoadingChange(e, n) {
+    e !== n && (this.cleanupObserver(), this.detachImgHandlers(), e === "eager" ? (this.imgEl && this.src && (this.imgEl.src = this.src), this.hasStarted = !0) : (this.imgLoaded = !1, this.hasStarted = !1, this.setupObserver()));
+  }
+  componentDidLoad() {
+    this.loading !== "eager" && this.setupObserver();
+  }
+  disconnectedCallback() {
+    this.cleanupObserver(), this.detachImgHandlers();
+  }
+  canUseIO() {
+    return typeof window != "undefined" && "IntersectionObserver" in window;
+  }
+  setupObserver() {
+    if (this.loading !== "eager") {
+      if (!this.canUseIO()) {
+        this.beginLoad();
+        return;
+      }
+      this.io = new IntersectionObserver((e) => {
+        var n;
+        for (const i of e)
+          if (i.isIntersecting) {
+            this.beginLoad(), (n = this.io) === null || n === void 0 || n.unobserve(i.target), this.cleanupObserver();
+            break;
+          }
+      }, { root: null, rootMargin: this.detectDistance, threshold: 0 }), this.io.observe(this.el);
+    }
+  }
+  cleanupObserver() {
+    var e;
+    (e = this.io) === null || e === void 0 || e.disconnect(), this.io = void 0;
+  }
+  wireOnceHandlers() {
+    this.imgEl && (this.detachImgHandlers(), this._onLoad = () => {
+      var e;
+      this.currentSrc && (!((e = this.imgEl) === null || e === void 0) && e.currentSrc) && !this.imgEl.currentSrc.includes(this.currentSrc) || (this.imgLoaded = !0);
+    }, this._onError = () => {
+      console.error("Load image failed:", this.src);
+    }, this.imgEl.addEventListener("load", this._onLoad, { once: !0 }), this.imgEl.addEventListener("error", this._onError, { once: !0 }));
+  }
+  detachImgHandlers() {
+    this.imgEl && (this._onLoad && this.imgEl.removeEventListener("load", this._onLoad), this._onError && this.imgEl.removeEventListener("error", this._onError), this._onLoad = void 0, this._onError = void 0);
+  }
+  beginLoad() {
+    if (!this.hasStarted && this.imgEl && this.src) {
+      if (this.hasStarted = !0, this.wireOnceHandlers(), this.imgEl.complete && this.imgEl.naturalWidth > 0) {
+        this.imgLoaded = !0;
+        return;
+      }
+      this.currentSrc = this.src, this.imgEl.src = this.src, this.imgEl.complete && this.imgEl.naturalWidth > 0 && (this.imgLoaded = !0);
+    }
+  }
+  get showSkeleton() {
+    return this.loading !== "eager" && !this.imgLoaded;
+  }
+  renderEager() {
+    return t(l, { 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(l, { class: "HostContainer", "aria-busy": this.imgLoaded ? "false" : "true" }, this.showSkeleton && t("ui-skeleton", { class: "UiContainer", structure: "image", width: "100%", height: "100%" }), t("img", { ref: (e) => this.imgEl = e, src: void 0, decoding: "async", style: this.styles, class: `UiContainer ${this.imgLoaded ? "Visible" : "Hidden"}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" }));
+  }
+  render() {
+    return this.loading === "eager" ? this.renderEager() : this.renderLazy();
+  }
+  get el() {
+    return g(this);
+  }
+  static get watchers() {
+    return {
+      src: ["onSrcChange"],
+      loading: ["onLoadingChange"]
+    };
+  }
+};
+S.style = R;
+const C = ":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)}}", L = C, E = class {
   constructor(e) {
-    h(this, e), this.stylingValue = {
+    d(this, e), this.stylingValue = {
       width: this.handleStylingProps(this.width),
       height: this.handleStylingProps(this.height),
       borderRadius: this.handleStylingProps(this.borderRadius),
@@ -594,8 +682,8 @@ const v = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear in
       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);
+  handleStructureChange(e, n) {
+    n !== e && this.handleStructure(e);
   }
   handleStylingProps(e) {
     switch (typeof e) {
@@ -628,22 +716,22 @@ const v = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear in
     }
   }
   renderLogo() {
-    return n("div", { class: "SkeletonContainer" }, n("div", { class: "Logo " + (this.animation ? "Skeleton" : "") }));
+    return t("div", { class: "SkeletonContainer" }, t("div", { class: "Logo " + (this.animation ? "Skeleton" : "") }));
   }
   renderImage() {
-    return n("div", { class: "Image " + (this.animation ? "Skeleton" : "") });
+    return t("div", { class: "Image " + (this.animation ? "Skeleton" : "") });
   }
   renderTitle() {
-    return n("div", { class: "SkeletonContainer" }, n("div", { class: "Title " + (this.animation ? "Skeleton" : "") }));
+    return t("div", { class: "SkeletonContainer" }, t("div", { class: "Title " + (this.animation ? "Skeleton" : "") }));
   }
   renderText() {
-    return n("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((e, t) => n("div", { key: t, class: "Text " + (this.animation ? "Skeleton" : "") })));
+    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 n("div", { class: "SkeletonContainer" }, n("div", { class: "Rectangle " + (this.animation ? "Skeleton" : "") }));
+    return t("div", { class: "SkeletonContainer" }, t("div", { class: "Rectangle " + (this.animation ? "Skeleton" : "") }));
   }
   renderCircle() {
-    return n("div", { class: "SkeletonContainer" }, n("div", { class: "Circle " + (this.animation ? "Skeleton" : "") }));
+    return t("div", { class: "SkeletonContainer" }, t("div", { class: "Circle " + (this.animation ? "Skeleton" : "") }));
   }
   render() {
     let e = "";
@@ -723,7 +811,7 @@ const v = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear in
       default:
         e = "";
     }
-    return n(w, { key: "e6b885bfd985ce7663d990756fe9101e25eb97f0" }, n("style", { key: "06ae24c7bb74f4dacfc12ae58085333f9dc89da5" }, e), this.handleStructure(this.structure));
+    return t(l, { key: "e6b885bfd985ce7663d990756fe9101e25eb97f0" }, t("style", { key: "06ae24c7bb74f4dacfc12ae58085333f9dc89da5" }, e), this.handleStructure(this.structure));
   }
   static get watchers() {
     return {
@@ -731,8 +819,9 @@ const v = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear in
     };
   }
 };
-S.style = R;
+E.style = L;
 export {
-  G as casino_play_random_game,
-  S as ui_skeleton
+  k as casino_play_random_game,
+  S as ui_image,
+  E as ui_skeleton
 };