@everymatrix/casino-lobby 1.55.0 → 1.56.0

package/components/GeneralAnimationLoading-BLss2VP4.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./CasinoCalendar-CFPK0TM5.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/components/GeneralAnimationLoading-BUY2TGQr.js

@@ -0,0 +1,84 @@
+import { S as u, i as f, s as m, f as c, b as g, n as d, d as y, h, j as p, o as b, C as v, I as x, J as _, K as S, L as C } from "./CasinoCalendar-_T8fa3tA.js";
+function k(t) {
+  g(t, "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 L(t) {
+  let i;
+  return {
+    c() {
+      i = p("div"), i.innerHTML = '<section class="LoaderContainer"><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div></section>';
+    },
+    m(n, l) {
+      h(n, i, l), t[4](i);
+    },
+    p: d,
+    i: d,
+    o: d,
+    d(n) {
+      n && y(i), t[4](null);
+    }
+  };
+}
+function j(t, i, n) {
+  let { clientstyling: l = "" } = i, { clientstylingurl: a = "" } = i, { mbsource: r } = i, s;
+  b(() => () => {
+  });
+  function o(e) {
+    v[e ? "unshift" : "push"](() => {
+      s = e, n(0, s);
+    });
+  }
+  return t.$$set = (e) => {
+    "clientstyling" in e && n(1, l = e.clientstyling), "clientstylingurl" in e && n(2, a = e.clientstylingurl), "mbsource" in e && n(3, r = e.mbsource);
+  }, t.$$.update = () => {
+    t.$$.dirty & /*clientstyling, customStylingContainer*/
+    3 && l && s && x(s, l), t.$$.dirty & /*clientstylingurl, customStylingContainer*/
+    5 && a && s && _(s, a), t.$$.dirty & /*mbsource, customStylingContainer*/
+    9 && r && s && S(s, `${r}.Style`);
+  }, [
+    s,
+    l,
+    a,
+    r,
+    o
+  ];
+}
+class w extends u {
+  constructor(i) {
+    super(), f(
+      this,
+      i,
+      j,
+      L,
+      m,
+      {
+        clientstyling: 1,
+        clientstylingurl: 2,
+        mbsource: 3
+      },
+      k
+    );
+  }
+  get clientstyling() {
+    return this.$$.ctx[1];
+  }
+  set clientstyling(i) {
+    this.$$set({ clientstyling: i }), c();
+  }
+  get clientstylingurl() {
+    return this.$$.ctx[2];
+  }
+  set clientstylingurl(i) {
+    this.$$set({ clientstylingurl: i }), c();
+  }
+  get mbsource() {
+    return this.$$.ctx[3];
+  }
+  set mbsource(i) {
+    this.$$set({ mbsource: i }), c();
+  }
+}
+C(w, { clientstyling: {}, clientstylingurl: {}, mbsource: {} }, [], [], !0);
+export {
+  w as default
+};

package/components/GeneralAnimationLoading-CRju5T01.js

@@ -0,0 +1,84 @@
+import { S as u, i as f, s as m, f as c, b as g, n as d, d as y, h, j as p, o as b, C as v, I as x, J as _, K as S, L as C } from "./CasinoCalendar-CSMUhfCr.js";
+function k(t) {
+  g(t, "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 L(t) {
+  let i;
+  return {
+    c() {
+      i = p("div"), i.innerHTML = '<section class="LoaderContainer"><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div></section>';
+    },
+    m(n, l) {
+      h(n, i, l), t[4](i);
+    },
+    p: d,
+    i: d,
+    o: d,
+    d(n) {
+      n && y(i), t[4](null);
+    }
+  };
+}
+function j(t, i, n) {
+  let { clientstyling: l = "" } = i, { clientstylingurl: a = "" } = i, { mbsource: r } = i, s;
+  b(() => () => {
+  });
+  function o(e) {
+    v[e ? "unshift" : "push"](() => {
+      s = e, n(0, s);
+    });
+  }
+  return t.$$set = (e) => {
+    "clientstyling" in e && n(1, l = e.clientstyling), "clientstylingurl" in e && n(2, a = e.clientstylingurl), "mbsource" in e && n(3, r = e.mbsource);
+  }, t.$$.update = () => {
+    t.$$.dirty & /*clientstyling, customStylingContainer*/
+    3 && l && s && x(s, l), t.$$.dirty & /*clientstylingurl, customStylingContainer*/
+    5 && a && s && _(s, a), t.$$.dirty & /*mbsource, customStylingContainer*/
+    9 && r && s && S(s, `${r}.Style`);
+  }, [
+    s,
+    l,
+    a,
+    r,
+    o
+  ];
+}
+class w extends u {
+  constructor(i) {
+    super(), f(
+      this,
+      i,
+      j,
+      L,
+      m,
+      {
+        clientstyling: 1,
+        clientstylingurl: 2,
+        mbsource: 3
+      },
+      k
+    );
+  }
+  get clientstyling() {
+    return this.$$.ctx[1];
+  }
+  set clientstyling(i) {
+    this.$$set({ clientstyling: i }), c();
+  }
+  get clientstylingurl() {
+    return this.$$.ctx[2];
+  }
+  set clientstylingurl(i) {
+    this.$$set({ clientstylingurl: i }), c();
+  }
+  get mbsource() {
+    return this.$$.ctx[3];
+  }
+  set mbsource(i) {
+    this.$$set({ mbsource: i }), c();
+  }
+}
+C(w, { clientstyling: {}, clientstylingurl: {}, mbsource: {} }, [], [], !0);
+export {
+  w as default
+};

package/es2015/casino-lobby.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/CasinoLobby-CB5KGhNa.cjs")).then(({default:t})=>{!customElements.get("casino-lobby")&&customElements.define("casino-lobby",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/CasinoLobby-CZ0buhgH.cjs")).then(({default:t})=>{!customElements.get("casino-lobby")&&customElements.define("casino-lobby",t.element)})}

package/es2015/casino-lobby.js

@@ -10,7 +10,7 @@ if (typeof window != "undefined") {
       }
     };
   };
-  customElements.define = n(customElements.define), import("../components/CasinoLobby-DHl1_-VE.js").then(({ default: t }) => {
+  customElements.define = n(customElements.define), import("../components/CasinoLobby-DOvk4Q1L.js").then(({ default: t }) => {
     !customElements.get("casino-lobby") && customElements.define("casino-lobby", t.element);
   });
 }

package/esnext/casino-lobby.js

@@ -1,4 +1,4 @@
-import { C as s } from "../components/CasinoLobby-60oTKJCK.js";
+import { C as s } from "../components/CasinoLobby-CoCRB4M8.js";
 function o(t) {
   return function(...n) {
     try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-lobby",
-  "version": "1.55.0",
+  "version": "1.56.0",
   "type": "module",
   "main": "esnext/casino-lobby.js",
   "module": "esnext/casino-lobby.js",

package/stencil/{casino-play-random-game-B5g4-G4Z.js → casino-play-random-game-CBXhEsCq.js}

@@ -14,19 +14,19 @@ var p = (n, e, a) => new Promise((t, o) => {
   }, c = (r) => r.done ? t(r.value) : Promise.resolve(r.value).then(m, d);
   c((a = a.apply(n, e)).next());
 });
-import { b as u, p as f, r as w, h as i, g as x } from "./index-eac6b960-DXIu1GM6.js";
-import { g as y } from "./app-globals-0f993ce5-D-kw1sls.js";
-var G = () => {
+import { b as w, p as y, r as x, h as i, g as G } from "./index-29915e18-MPiqo7vY.js";
+import { g as b } from "./app-globals-0f993ce5-D-kw1sls.js";
+var v = () => {
   const n = import.meta.url, e = {};
-  return n !== "" && (e.resourcesUrl = new URL(".", n).href), f(e);
+  return n !== "" && (e.resourcesUrl = new URL(".", n).href), y(e);
 };
-G().then((n) => p(void 0, null, function* () {
-  return yield y(), u([["casino-play-random-game", [[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"], clientStyling: [513, "client-styling"], clientStylingUrl: [513, "client-styling-url"], translationUrl: [513, "translation-url"], hasErrors: [32], limitStylingAppends: [32], isLoading: [32], gamesToShow: [32], selectedGame: [32], animationDone: [32], animationStarted: [32] }, null, { endpoint: ["watchEndpoint"], datasource: ["watchEndpoint"], language: ["watchEndpoint"], translationUrl: ["handleNewTranslations"], iconVisible: ["handleIsIconVisible"] }]]]], n);
+v().then((n) => p(void 0, null, function* () {
+  return yield b(), w([["casino-play-random-game", [[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] }, null, { endpoint: ["watchEndpoint"], datasource: ["watchEndpoint"], language: ["watchEndpoint"], translationUrl: ["handleNewTranslations"], iconVisible: ["handleIsIconVisible"], clientStyling: ["handleClientStylingChange"], clientStylingUrl: ["handleClientStylingChangeURL"] }]]]], n);
 }));
-const b = () => {
+const R = () => {
   let n = window.navigator.userAgent;
   return n.toLowerCase().match(/android/i) ? "Android" : n.toLowerCase().match(/iphone/i) ? "iPhone" : n.toLowerCase().match(/ipad|ipod/i) ? "iPad" : "PC";
-}, v = "en", l = {
+}, C = "en", l = {
   en: {
     error: "Error",
     randomGameLoading: "Loading ...",
@@ -79,8 +79,32 @@ const b = () => {
   });
 }), s = (n, e) => {
   const a = e;
-  return l[a !== void 0 && a in l ? a : v][n];
-}, R = `:host {
+  return l[a !== void 0 && a in l ? a : C][n];
+};
+function u(n, e) {
+  if (n) {
+    const a = document.createElement("style");
+    a.innerHTML = e, n.appendChild(a);
+  }
+}
+function f(n, e) {
+  const a = new URL(e);
+  fetch(a.href).then((t) => t.text()).then((t) => {
+    const o = document.createElement("style");
+    o.innerHTML = t, n && n.appendChild(o);
+  }).catch((t) => {
+    console.error("There was an error while trying to load client styling from URL", t);
+  });
+}
+function k(n, e, a) {
+  if (window.emMessageBus) {
+    const t = document.createElement("style");
+    window.emMessageBus.subscribe(e, (o) => {
+      t.innerHTML = o, n && n.appendChild(t);
+    });
+  }
+}
+const S = `:host {
   display: block;
   font-family: inherit;
   -webkit-transform: translate3d(0, 0, 0);
@@ -450,24 +474,14 @@ const b = () => {
     width: 70px;
     height: 85px;
   }
-}`, k = R, C = class {
+}`, F = S, L = class {
   constructor(n) {
-    w(this, n), this.animation = null, this.selectedGameIndex = null, this.selectedGameEl = null, this.iconVisibility = null, this.shuffle = (e) => {
+    x(this, n), this.language = "en", this.specificCategory = "", this.iconVisible = "", this.iconVisibleOnAnim = "", this.launchByGameCard = "", this.clientStyling = "", this.clientStylingUrl = "", this.translationUrl = "", this.hasErrors = !1, this.isLoading = !0, this.selectedGame = null, this.animationDone = !1, this.animationStarted = !1, this.animation = null, this.selectedGameIndex = null, this.selectedGameEl = null, this.iconVisibility = null, this.shuffle = (e) => {
       let a = e.length, t;
       for (; a !== 0; )
         t = Math.floor(Math.random() * a), a--, [e[a], e[t]] = [e[t], e[a]];
       return e;
-    }, this.setClientStyling = () => {
-      let e = document.createElement("style");
-      e.innerHTML = this.clientStyling, this.host.shadowRoot.prepend(e);
-    }, this.setClientStylingURL = () => {
-      let e = new URL(this.clientStylingUrl), a = document.createElement("style");
-      fetch(e.href).then((t) => t.text()).then((t) => {
-        a.innerHTML = t, this.clientStyling = t, setTimeout(() => {
-          this.host.shadowRoot.prepend(a);
-        }, 1);
-      });
-    }, this.endpoint = void 0, this.datasource = void 0, this.language = "en", this.specificCategory = "", this.iconVisible = "", this.iconVisibleOnAnim = "", this.launchByGameCard = "", this.clientStyling = "", this.clientStylingUrl = "", this.translationUrl = "", this.hasErrors = !1, this.limitStylingAppends = !1, this.isLoading = !0, this.gamesToShow = void 0, this.selectedGame = null, this.animationDone = !1, this.animationStarted = !1;
+    };
   }
   watchEndpoint(n, e) {
     n && n != e && this.endpoint && this.fetchGameList();
@@ -480,6 +494,12 @@ const b = () => {
   handleIsIconVisible() {
     this.iconVisibility = this.iconVisible === "true";
   }
+  handleClientStylingChange(n, e) {
+    n != e && u(this.stylingContainer, this.clientStyling);
+  }
+  handleClientStylingChangeURL(n, e) {
+    n != e && this.clientStylingUrl && f(this.stylingContainer, this.clientStylingUrl);
+  }
   connectedCallback() {
     this.handleIsIconVisible();
   }
@@ -488,11 +508,14 @@ const b = () => {
       return this.fetchGameList();
   }
   componentDidLoad() {
-    !this.limitStylingAppends && this.host && (this.clientStyling && this.setClientStyling(), this.clientStylingUrl && this.setClientStylingURL(), this.limitStylingAppends = !0);
+    window.emMessageBus != null ? k(this.stylingContainer, `${this.mbSource}.Style`) : (this.clientStyling && u(this.stylingContainer, this.clientStyling), this.clientStylingUrl && f(this.stylingContainer, this.clientStylingUrl));
+  }
+  disconnectedCallback() {
+    this.stylingSubscription && this.stylingSubscription.unsubscribe();
   }
   fetchGameList() {
     let n = new URL(`${this.endpoint}/v1/casino/games`);
-    return n.searchParams.append("platform", b()), n.searchParams.append("datasource", this.datasource), n.searchParams.append("fields", "gId,id,href,thumbnail,name,vendor,launchUrl,subVendor"), n.searchParams.append("expand", "vendor"), n.searchParams.append("pagination", "offset=0,limit=423"), n.searchParams.append("language", this.language), this.specificCategory && n.searchParams.append("filter", `categories(id=${this.specificCategory})`), new Promise((e, a) => {
+    return n.searchParams.append("platform", R()), n.searchParams.append("datasource", this.datasource), n.searchParams.append("fields", "gId,id,href,thumbnail,name,vendor,launchUrl,subVendor"), n.searchParams.append("expand", "vendor"), n.searchParams.append("pagination", "offset=0,limit=423"), n.searchParams.append("language", this.language), this.specificCategory && n.searchParams.append("filter", `categories(id=${this.specificCategory})`), new Promise((e, a) => {
       this.isLoading = !0, fetch(n.href).then((t) => t.json()).then((t) => {
         this.gamesToShow = this.setUpGames(t == null ? void 0 : t.items), e(!0);
       }).catch((t) => {
@@ -556,10 +579,10 @@ const b = () => {
     if (this.isLoading)
       return i("div", { class: "RandomGameLoading" }, i("div", { class: "Title" }, s("randomGameLoading", this.language)));
     if (!this.isLoading)
-      return i("div", { class: "RandomGameWrapper" }, i("div", { class: "GameContainerGradient" }), i("div", { class: "GamesContainer", ref: (n) => this.gameContainer = n }, this.gamesToShow && this.gamesToShow.map((n, e) => i("div", { class: "RandomGameCard", key: e, onClick: this.launchByGameCard === "true" ? () => this.playGame() : null }, i("div", { class: "RandomGameVendor" }, n.vendor.name), i("img", { class: "RandomGameImage", src: n.thumbnail, alt: n.name, title: n.name }), this.selectedGame && this.selectedGameIndex === e && this.renderGameDetails()))), i("div", { class: `ButtonWrapper  ${this.animationDone ? "HideAnimation" : ""}` }, i("div", { class: "ButtonContainer" }, this.iconVisibility && i("div", { class: `ButtonIcon ${this.animationStarted ? "Flip" : ""}` }, i("div", { class: "QustionMark" }, "?"), i("div", { class: "HexagonMarkShadow" }), i("div", { class: "HexagonMark" })), !this.animationStarted && i("div", { class: `RandomButton ${this.animationStarted ? "HideAnimation" : ""}`, onClick: () => this.playRandomGame() }, s("playRandomGame", this.language)))));
+      return i("div", { class: "RandomGameWrapper", ref: (n) => this.stylingContainer = n }, i("div", { class: "GameContainerGradient" }), i("div", { class: "GamesContainer", ref: (n) => this.gameContainer = n }, this.gamesToShow && this.gamesToShow.map((n, e) => i("div", { class: "RandomGameCard", key: e, onClick: this.launchByGameCard === "true" ? () => this.playGame() : null }, i("div", { class: "RandomGameVendor" }, n.vendor.name), i("img", { class: "RandomGameImage", src: n.thumbnail, alt: n.name, title: n.name }), this.selectedGame && this.selectedGameIndex === e && this.renderGameDetails()))), i("div", { class: `ButtonWrapper  ${this.animationDone ? "HideAnimation" : ""}` }, i("div", { class: "ButtonContainer" }, this.iconVisibility && i("div", { class: `ButtonIcon ${this.animationStarted ? "Flip" : ""}` }, i("div", { class: "QustionMark" }, "?"), i("div", { class: "HexagonMarkShadow" }), i("div", { class: "HexagonMark" })), !this.animationStarted && i("div", { class: `RandomButton ${this.animationStarted ? "HideAnimation" : ""}`, onClick: () => this.playRandomGame() }, s("playRandomGame", this.language)))));
   }
   get host() {
-    return x(this);
+    return G(this);
   }
   static get watchers() {
     return {
@@ -567,11 +590,13 @@ const b = () => {
       datasource: ["watchEndpoint"],
       language: ["watchEndpoint"],
       translationUrl: ["handleNewTranslations"],
-      iconVisible: ["handleIsIconVisible"]
+      iconVisible: ["handleIsIconVisible"],
+      clientStyling: ["handleClientStylingChange"],
+      clientStylingUrl: ["handleClientStylingChangeURL"]
     };
   }
 };
-C.style = k;
+L.style = F;
 export {
-  C as casino_play_random_game
+  L as casino_play_random_game
 };

package/stencil/{casino-play-random-game-Cphp76Jq.js → casino-play-random-game-PZXnDzfs.js}

@@ -1,14 +1,14 @@
-import { b as c, p as h, r as p, h as t, g } from "./index-eac6b960-Dvyvd5zP.js";
-import { g as u } from "./app-globals-0f993ce5-D-kw1sls.js";
-var f = () => {
+import { b as p, p as g, r as u, h as i, g as f } from "./index-29915e18-CQ_kWzEh.js";
+import { g as w } from "./app-globals-0f993ce5-D-kw1sls.js";
+var y = () => {
   const n = import.meta.url, e = {};
-  return n !== "" && (e.resourcesUrl = new URL(".", n).href), h(e);
+  return n !== "" && (e.resourcesUrl = new URL(".", n).href), g(e);
 };
-f().then(async (n) => (await u(), c([["casino-play-random-game", [[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"], clientStyling: [513, "client-styling"], clientStylingUrl: [513, "client-styling-url"], translationUrl: [513, "translation-url"], hasErrors: [32], limitStylingAppends: [32], isLoading: [32], gamesToShow: [32], selectedGame: [32], animationDone: [32], animationStarted: [32] }, null, { endpoint: ["watchEndpoint"], datasource: ["watchEndpoint"], language: ["watchEndpoint"], translationUrl: ["handleNewTranslations"], iconVisible: ["handleIsIconVisible"] }]]]], n)));
-const w = () => {
+y().then(async (n) => (await w(), p([["casino-play-random-game", [[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] }, null, { endpoint: ["watchEndpoint"], datasource: ["watchEndpoint"], language: ["watchEndpoint"], translationUrl: ["handleNewTranslations"], iconVisible: ["handleIsIconVisible"], clientStyling: ["handleClientStylingChange"], clientStylingUrl: ["handleClientStylingChangeURL"] }]]]], n)));
+const x = () => {
   let n = window.navigator.userAgent;
   return n.toLowerCase().match(/android/i) ? "Android" : n.toLowerCase().match(/iphone/i) ? "iPhone" : n.toLowerCase().match(/ipad|ipod/i) ? "iPad" : "PC";
-}, x = "en", r = {
+}, G = "en", s = {
   en: {
     error: "Error",
     randomGameLoading: "Loading ...",
@@ -52,17 +52,41 @@ const w = () => {
     spinRandomGame: "DEĞİŞTİR"
   }
 }, l = (n) => new Promise((e) => {
-  fetch(n).then((i) => i.json()).then((i) => {
-    Object.keys(i).forEach((a) => {
-      r[a] || (r[a] = {});
-      for (let s in i[a])
-        r[a][s] = i[a][s];
+  fetch(n).then((t) => t.json()).then((t) => {
+    Object.keys(t).forEach((a) => {
+      s[a] || (s[a] = {});
+      for (let o in t[a])
+        s[a][o] = t[a][o];
     }), e(!0);
   });
-}), o = (n, e) => {
-  const i = e;
-  return r[i !== void 0 && i in r ? i : x][n];
-}, y = `:host {
+}), r = (n, e) => {
+  const t = e;
+  return s[t !== void 0 && t in s ? t : G][n];
+};
+function m(n, e) {
+  if (n) {
+    const t = document.createElement("style");
+    t.innerHTML = e, n.appendChild(t);
+  }
+}
+function d(n, e) {
+  const t = new URL(e);
+  fetch(t.href).then((a) => a.text()).then((a) => {
+    const o = document.createElement("style");
+    o.innerHTML = a, n && n.appendChild(o);
+  }).catch((a) => {
+    console.error("There was an error while trying to load client styling from URL", a);
+  });
+}
+function b(n, e, t) {
+  if (window.emMessageBus) {
+    const a = document.createElement("style");
+    window.emMessageBus.subscribe(e, (o) => {
+      a.innerHTML = o, n && n.appendChild(a);
+    });
+  }
+}
+const v = `:host {
   display: block;
   font-family: inherit;
   -webkit-transform: translate3d(0, 0, 0);
@@ -432,24 +456,14 @@ const w = () => {
     width: 70px;
     height: 85px;
   }
-}`, G = y, b = class {
+}`, R = v, C = class {
   constructor(n) {
-    p(this, n), this.animation = null, this.selectedGameIndex = null, this.selectedGameEl = null, this.iconVisibility = null, this.shuffle = (e) => {
-      let i = e.length, a;
-      for (; i !== 0; )
-        a = Math.floor(Math.random() * i), i--, [e[i], e[a]] = [e[a], e[i]];
+    u(this, n), this.language = "en", this.specificCategory = "", this.iconVisible = "", this.iconVisibleOnAnim = "", this.launchByGameCard = "", this.clientStyling = "", this.clientStylingUrl = "", this.translationUrl = "", this.hasErrors = !1, this.isLoading = !0, this.selectedGame = null, this.animationDone = !1, this.animationStarted = !1, this.animation = null, this.selectedGameIndex = null, this.selectedGameEl = null, this.iconVisibility = null, this.shuffle = (e) => {
+      let t = e.length, a;
+      for (; t !== 0; )
+        a = Math.floor(Math.random() * t), t--, [e[t], e[a]] = [e[a], e[t]];
       return e;
-    }, this.setClientStyling = () => {
-      let e = document.createElement("style");
-      e.innerHTML = this.clientStyling, this.host.shadowRoot.prepend(e);
-    }, this.setClientStylingURL = () => {
-      let e = new URL(this.clientStylingUrl), i = document.createElement("style");
-      fetch(e.href).then((a) => a.text()).then((a) => {
-        i.innerHTML = a, this.clientStyling = a, setTimeout(() => {
-          this.host.shadowRoot.prepend(i);
-        }, 1);
-      });
-    }, this.endpoint = void 0, this.datasource = void 0, this.language = "en", this.specificCategory = "", this.iconVisible = "", this.iconVisibleOnAnim = "", this.launchByGameCard = "", this.clientStyling = "", this.clientStylingUrl = "", this.translationUrl = "", this.hasErrors = !1, this.limitStylingAppends = !1, this.isLoading = !0, this.gamesToShow = void 0, this.selectedGame = null, this.animationDone = !1, this.animationStarted = !1;
+    };
   }
   watchEndpoint(n, e) {
     n && n != e && this.endpoint && this.fetchGameList();
@@ -462,6 +476,12 @@ const w = () => {
   handleIsIconVisible() {
     this.iconVisibility = this.iconVisible === "true";
   }
+  handleClientStylingChange(n, e) {
+    n != e && m(this.stylingContainer, this.clientStyling);
+  }
+  handleClientStylingChangeURL(n, e) {
+    n != e && this.clientStylingUrl && d(this.stylingContainer, this.clientStylingUrl);
+  }
   connectedCallback() {
     this.handleIsIconVisible();
   }
@@ -470,15 +490,18 @@ const w = () => {
       return this.fetchGameList();
   }
   componentDidLoad() {
-    !this.limitStylingAppends && this.host && (this.clientStyling && this.setClientStyling(), this.clientStylingUrl && this.setClientStylingURL(), this.limitStylingAppends = !0);
+    window.emMessageBus != null ? b(this.stylingContainer, `${this.mbSource}.Style`) : (this.clientStyling && m(this.stylingContainer, this.clientStyling), this.clientStylingUrl && d(this.stylingContainer, this.clientStylingUrl));
+  }
+  disconnectedCallback() {
+    this.stylingSubscription && this.stylingSubscription.unsubscribe();
   }
   fetchGameList() {
     let n = new URL(`${this.endpoint}/v1/casino/games`);
-    return n.searchParams.append("platform", w()), n.searchParams.append("datasource", this.datasource), n.searchParams.append("fields", "gId,id,href,thumbnail,name,vendor,launchUrl,subVendor"), n.searchParams.append("expand", "vendor"), n.searchParams.append("pagination", "offset=0,limit=423"), n.searchParams.append("language", this.language), this.specificCategory && n.searchParams.append("filter", `categories(id=${this.specificCategory})`), new Promise((e, i) => {
+    return n.searchParams.append("platform", x()), n.searchParams.append("datasource", this.datasource), n.searchParams.append("fields", "gId,id,href,thumbnail,name,vendor,launchUrl,subVendor"), n.searchParams.append("expand", "vendor"), n.searchParams.append("pagination", "offset=0,limit=423"), n.searchParams.append("language", this.language), this.specificCategory && n.searchParams.append("filter", `categories(id=${this.specificCategory})`), new Promise((e, t) => {
       this.isLoading = !0, fetch(n.href).then((a) => a.json()).then((a) => {
         this.gamesToShow = this.setUpGames(a?.items), e(!0);
       }).catch((a) => {
-        console.error(a), this.hasErrors = !0, i(a);
+        console.error(a), this.hasErrors = !0, t(a);
       }).finally(() => {
         this.isLoading = !1;
       });
@@ -504,18 +527,18 @@ const w = () => {
   }
   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 n = window.getComputedStyle(this.gameContainer).getPropertyValue("gap"), e = parseInt(n, 10), i = this.selectedGameEl.offsetWidth, a = this.gameContainer.offsetWidth, s = (i + e) * this.selectedGameIndex + // Width of game cards up to the selected
-    i / 2 - // Additional half card width to center to the selected game
-    a / 2, m = [
+    const n = window.getComputedStyle(this.gameContainer).getPropertyValue("gap"), e = parseInt(n, 10), t = this.selectedGameEl.offsetWidth, a = this.gameContainer.offsetWidth, o = (t + e) * this.selectedGameIndex + // Width of game cards up to the selected
+    t / 2 - // Additional half card width to center to the selected game
+    a / 2, c = [
       { transform: "translateX(0px)", scale: 1 },
       { scale: 0.75 },
-      { transform: `translateX(-${s}px)`, scale: 1 }
-    ], d = {
+      { transform: `translateX(-${o}px)`, scale: 1 }
+    ], h = {
       duration: 3e3,
       easing: "cubic-bezier(0.5, 0, 0.5, 1.2)",
       fill: "forwards"
     };
-    this.animation = this.gameContainer.animate(m, d), this.animation.onfinish = () => {
+    this.animation = this.gameContainer.animate(c, h), this.animation.onfinish = () => {
       this.animationDone = !0, this.selectedGameEl.classList.add("TheRandomGame"), this.selectedGame = this.gamesToShow[this.selectedGameIndex];
     };
   }
@@ -530,18 +553,18 @@ const w = () => {
     });
   }
   renderGameDetails() {
-    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))));
+    return i("div", { class: "RandomButtonsWrapper" }, i("div", { class: "RandomGameDetails" }, i("span", { class: "RandomGameTitle" }, this.selectedGame.name), i("span", { class: "RandomGameInfo", onClick: () => this.showGameInfo() }, "i")), i("div", { class: "RandomButtons" }, i("button", { class: "RandomButton On", onClick: () => this.respin() }, r("spinRandomGame", this.language)), !this.launchByGameCard && i("button", { class: "RandomButton On", onClick: () => this.playGame() }, r("playNowRandomGame", this.language))));
   }
   render() {
     if (this.hasErrors)
-      return t("div", { class: "RandomGameError" }, t("div", { class: "Title" }, o("error", this.language)));
+      return i("div", { class: "RandomGameError" }, i("div", { class: "Title" }, r("error", this.language)));
     if (this.isLoading)
-      return t("div", { class: "RandomGameLoading" }, t("div", { class: "Title" }, o("randomGameLoading", this.language)));
+      return i("div", { class: "RandomGameLoading" }, i("div", { class: "Title" }, r("randomGameLoading", this.language)));
     if (!this.isLoading)
-      return t("div", { class: "RandomGameWrapper" }, t("div", { class: "GameContainerGradient" }), t("div", { class: "GamesContainer", ref: (n) => this.gameContainer = n }, this.gamesToShow && this.gamesToShow.map((n, e) => t("div", { class: "RandomGameCard", key: e, onClick: this.launchByGameCard === "true" ? () => this.playGame() : null }, t("div", { class: "RandomGameVendor" }, n.vendor.name), t("img", { class: "RandomGameImage", src: n.thumbnail, alt: n.name, title: n.name }), this.selectedGame && this.selectedGameIndex === e && 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)))));
+      return i("div", { class: "RandomGameWrapper", ref: (n) => this.stylingContainer = n }, i("div", { class: "GameContainerGradient" }), i("div", { class: "GamesContainer", ref: (n) => this.gameContainer = n }, this.gamesToShow && this.gamesToShow.map((n, e) => i("div", { class: "RandomGameCard", key: e, onClick: this.launchByGameCard === "true" ? () => this.playGame() : null }, i("div", { class: "RandomGameVendor" }, n.vendor.name), i("img", { class: "RandomGameImage", src: n.thumbnail, alt: n.name, title: n.name }), this.selectedGame && this.selectedGameIndex === e && this.renderGameDetails()))), i("div", { class: `ButtonWrapper  ${this.animationDone ? "HideAnimation" : ""}` }, i("div", { class: "ButtonContainer" }, this.iconVisibility && i("div", { class: `ButtonIcon ${this.animationStarted ? "Flip" : ""}` }, i("div", { class: "QustionMark" }, "?"), i("div", { class: "HexagonMarkShadow" }), i("div", { class: "HexagonMark" })), !this.animationStarted && i("div", { class: `RandomButton ${this.animationStarted ? "HideAnimation" : ""}`, onClick: () => this.playRandomGame() }, r("playRandomGame", this.language)))));
   }
   get host() {
-    return g(this);
+    return f(this);
   }
   static get watchers() {
     return {
@@ -549,11 +572,13 @@ const w = () => {
       datasource: ["watchEndpoint"],
       language: ["watchEndpoint"],
       translationUrl: ["handleNewTranslations"],
-      iconVisible: ["handleIsIconVisible"]
+      iconVisible: ["handleIsIconVisible"],
+      clientStyling: ["handleClientStylingChange"],
+      clientStylingUrl: ["handleClientStylingChangeURL"]
     };
   }
 };
-b.style = G;
+C.style = R;
 export {
-  b as casino_play_random_game
+  C as casino_play_random_game
 };