@everymatrix/casino-lobby 1.74.8 → 1.75.0

package/stencil/{casino-play-random-game-uBjWXXLi.js → casino-play-random-game_2-BBqDze0C.js}

@@ -1,14 +1,8 @@
-import { b as p, p as g, r as u, c as f, h as i, g as w } from "./index-ab3202d6-CSUArOSv.js";
-import { g as y } from "./app-globals-0f993ce5-DfNOCk8l.js";
-var x = () => {
-  const n = import.meta.url, e = {};
-  return n !== "" && (e.resourcesUrl = new URL(".", n).href), g(e);
-};
-x().then(async (n) => (await y(), 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 b = () => {
-  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";
-}, G = "en", s = {
+import { r as h, c as u, h as n, g as p, H as w } from "./index-328e660d-O5RXzgXA.js";
+const f = () => {
+  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 = {
   en: {
     error: "Error",
     randomGameLoading: "Loading ...",
@@ -51,42 +45,42 @@ const b = () => {
     playNowRandomGame: "Şimdi Oyna",
     spinRandomGame: "DEĞİŞTİR"
   }
-}, l = (n) => new Promise((e) => {
-  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);
+}, l = (e) => new Promise((t) => {
+  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);
   });
-}), r = (n, e) => {
-  const t = e;
-  return s[t !== void 0 && t in s ? t : G][n];
+}), s = (e, t) => {
+  const i = t;
+  return r[i !== void 0 && i in r ? i : y][e];
 };
-function m(n, e) {
-  if (n) {
-    const t = document.createElement("style");
-    t.innerHTML = e, n.appendChild(t);
+function m(e, t) {
+  if (e) {
+    const i = document.createElement("style");
+    i.innerHTML = t, e.appendChild(i);
   }
 }
-function d(n, e) {
-  const t = new URL(e);
-  fetch(t.href).then((a) => a.text()).then((a) => {
+function d(e, t) {
+  const i = new URL(t);
+  fetch(i.href).then((a) => a.text()).then((a) => {
     const o = document.createElement("style");
-    o.innerHTML = a, n && n.appendChild(o);
+    o.innerHTML = a, e && e.appendChild(o);
   }).catch((a) => {
     console.error("There was an error while trying to load client styling from URL", a);
   });
 }
-function v(n, e, t) {
+function x(e, t, i) {
   if (window.emMessageBus) {
     const a = document.createElement("style");
-    window.emMessageBus.subscribe(e, (o) => {
-      a.innerHTML = o, n && n.appendChild(a);
+    window.emMessageBus.subscribe(t, (o) => {
+      a.innerHTML = o, e && e.appendChild(a);
     });
   }
 }
-const R = `:host {
+const b = `:host {
   display: block;
   font-family: inherit;
   -webkit-transform: translate3d(0, 0, 0);
@@ -463,17 +457,17 @@ const R = `:host {
     width: 70px;
     height: 85px;
   }
-}`, C = R, k = class {
-  constructor(n) {
-    u(this, n), this.dataLoaded = f(this, "data-loaded", 7), 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;
+}`, k = b, G = class {
+  constructor(e) {
+    h(this, e), this.dataLoaded = u(this, "data-loaded", 7), this.animation = null, this.selectedGameIndex = null, this.selectedGameEl = null, this.iconVisibility = null, this.shuffle = (t) => {
+      let i = t.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;
   }
-  watchEndpoint(n, e) {
-    n && n != e && this.endpoint && this.fetchGameList();
+  watchEndpoint(e, t) {
+    e && e != t && this.endpoint && this.fetchGameList();
   }
   handleNewTranslations() {
     this.isLoading = !0, l(this.translationUrl).then(() => {
@@ -483,11 +477,11 @@ const R = `:host {
   handleIsIconVisible() {
     this.iconVisibility = this.iconVisible === "true";
   }
-  handleClientStylingChange(n, e) {
-    n != e && m(this.stylingContainer, this.clientStyling);
+  handleClientStylingChange(e, t) {
+    e != t && m(this.stylingContainer, this.clientStyling);
   }
-  handleClientStylingChangeURL(n, e) {
-    n != e && this.clientStylingUrl && d(this.stylingContainer, this.clientStylingUrl);
+  handleClientStylingChangeURL(e, t) {
+    e != t && this.clientStylingUrl && d(this.stylingContainer, this.clientStylingUrl);
   }
   connectedCallback() {
     this.handleIsIconVisible();
@@ -497,18 +491,18 @@ const R = `:host {
       return this.fetchGameList();
   }
   componentDidLoad() {
-    window.emMessageBus != null ? v(this.stylingContainer, `${this.mbSource}.Style`) : (this.clientStyling && m(this.stylingContainer, this.clientStyling), this.clientStylingUrl && d(this.stylingContainer, this.clientStylingUrl));
+    window.emMessageBus != null ? x(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", 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, t) => {
-      this.isLoading = !0, fetch(n.href).then((a) => a.json()).then((a) => {
-        this.gamesToShow = this.setUpGames(a?.items), e(!0);
+    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) => {
+      this.isLoading = !0, fetch(e.href).then((a) => a.json()).then((a) => {
+        this.gamesToShow = this.setUpGames(a?.items), t(!0);
       }).catch((a) => {
-        console.error(a), this.hasErrors = !0, t(a);
+        console.error(a), this.hasErrors = !0, i(a);
       }).finally(() => {
         this.isLoading = !1, this.dataLoaded.emit({
           target: this.host
@@ -516,13 +510,13 @@ const R = `:host {
       });
     });
   }
-  setUpGames(n) {
-    const e = this.shuffle(n).slice(0, 40);
-    return e.concat(e);
+  setUpGames(e) {
+    const t = this.shuffle(e).slice(0, 40);
+    return t.concat(t);
   }
   selectRandomGame() {
-    const n = this.gamesToShow.length / 2;
-    this.selectedGameIndex = Math.floor(Math.random() * (n - 3)), this.selectedGameIndex += n, this.selectedGameEl = this.gameContainer.children[this.selectedGameIndex];
+    const e = this.gamesToShow.length / 2;
+    this.selectedGameIndex = Math.floor(Math.random() * (e - 3)), this.selectedGameIndex += e, this.selectedGameEl = this.gameContainer.children[this.selectedGameIndex];
   }
   playRandomGame() {
     this.animateGames(), typeof gtag == "function" && gtag("event", "PlayRandomGame", {
@@ -536,18 +530,18 @@ const R = `: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 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
+    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
+    i / 2 - // Additional half card width to center to the selected game
     a / 2, c = [
       { transform: "translateX(0px)", scale: 1 },
       { scale: 0.75 },
       { transform: `translateX(-${o}px)`, scale: 1 }
-    ], h = {
+    ], g = {
       duration: 3e3,
       easing: "cubic-bezier(0.5, 0, 0.5, 1.2)",
       fill: "forwards"
     };
-    this.animation = this.gameContainer.animate(c, h), this.animation.onfinish = () => {
+    this.animation = this.gameContainer.animate(c, g), this.animation.onfinish = () => {
       this.animationDone = !0, this.selectedGameEl.classList.add("TheRandomGame"), this.selectedGame = this.gamesToShow[this.selectedGameIndex];
     };
   }
@@ -562,13 +556,17 @@ const R = `:host {
     });
   }
   renderGameDetails() {
-    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))));
+    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))));
+  }
+  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));
   }
   render() {
-    return i("div", { key: "07d7315d72cc4a34fd8ce7085efebd9161584570", ref: (n) => this.stylingContainer = n }, this.hasErrors ? i("div", { class: "RandomGameError" }, i("div", { class: "Title" }, r("error", this.language))) : this.isLoading ? i("div", { class: "RandomGameError" }, i("div", { class: "Title" }, r("randomGameLoading", this.language))) : 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() : void 0 }, 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))))));
+    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))))));
   }
   get host() {
-    return w(this);
+    return p(this);
   }
   static get watchers() {
     return {
@@ -582,7 +580,159 @@ const R = `:host {
     };
   }
 };
-k.style = C;
+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 {
+  constructor(e) {
+    h(this, e), this.stylingValue = {
+      width: this.handleStylingProps(this.width),
+      height: this.handleStylingProps(this.height),
+      borderRadius: this.handleStylingProps(this.borderRadius),
+      marginBottom: this.handleStylingProps(this.marginBottom),
+      marginTop: this.handleStylingProps(this.marginTop),
+      marginLeft: this.handleStylingProps(this.marginLeft),
+      marginRight: this.handleStylingProps(this.marginRight),
+      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);
+  }
+  handleStylingProps(e) {
+    switch (typeof e) {
+      case "number":
+        return e === 0 ? 0 : `${e}px`;
+      case "undefined":
+        return "unset";
+      case "string":
+        return ["auto", "unset", "none", "inherit", "initial"].includes(e) || e.endsWith("px") || e.endsWith("%") ? e : "unset";
+      default:
+        return "unset";
+    }
+  }
+  handleStructure(e) {
+    switch (e) {
+      case "logo":
+        return this.renderLogo();
+      case "image":
+        return this.renderImage();
+      case "title":
+        return this.renderTitle();
+      case "text":
+        return this.renderText();
+      case "rectangle":
+        return this.renderRectangle();
+      case "circle":
+        return this.renderCircle();
+      default:
+        return null;
+    }
+  }
+  renderLogo() {
+    return n("div", { class: "SkeletonContainer" }, n("div", { class: "Logo " + (this.animation ? "Skeleton" : "") }));
+  }
+  renderImage() {
+    return n("div", { class: "Image " + (this.animation ? "Skeleton" : "") });
+  }
+  renderTitle() {
+    return n("div", { class: "SkeletonContainer" }, n("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" : "") })));
+  }
+  renderRectangle() {
+    return n("div", { class: "SkeletonContainer" }, n("div", { class: "Rectangle " + (this.animation ? "Skeleton" : "") }));
+  }
+  renderCircle() {
+    return n("div", { class: "SkeletonContainer" }, n("div", { class: "Circle " + (this.animation ? "Skeleton" : "") }));
+  }
+  render() {
+    let e = "";
+    switch (this.structure) {
+      case "logo":
+        e = `
+          :host {
+            --emw-skeleton-logo-width: ${this.stylingValue.width};
+            --emw-skeleton-logo-height: ${this.stylingValue.height};
+            --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+        break;
+      case "image":
+        e = `
+          :host {
+            --emw-skeleton-image-width: ${this.stylingValue.width};
+            --emw-skeleton-image-height: ${this.stylingValue.height};
+            --emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+        break;
+      case "title":
+        e = `
+          :host {
+            --emw-skeleton-title-width: ${this.stylingValue.width};
+            --emw-skeleton-title-height: ${this.stylingValue.height};
+            --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+        break;
+      case "text":
+        e = `
+          :host {
+            --emw-skeleton-text-width: ${this.stylingValue.width};
+            --emw-skeleton-text-height: ${this.stylingValue.height};
+            --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+        break;
+      case "rectangle":
+        e = `
+          :host {
+            --emw-skeleton-rectangle-width: ${this.stylingValue.width};
+            --emw-skeleton-rectangle-height: ${this.stylingValue.height};
+            --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+        break;
+      case "circle":
+        e = `
+          :host {
+            --emw-skeleton-circle-size: ${this.stylingValue.size};
+          }
+        `;
+        break;
+      default:
+        e = "";
+    }
+    return n(w, { key: "e6b885bfd985ce7663d990756fe9101e25eb97f0" }, n("style", { key: "06ae24c7bb74f4dacfc12ae58085333f9dc89da5" }, e), this.handleStructure(this.structure));
+  }
+  static get watchers() {
+    return {
+      structure: ["handleStructureChange"]
+    };
+  }
+};
+S.style = R;
 export {
-  k as casino_play_random_game
+  G as casino_play_random_game,
+  S as ui_skeleton
 };