@betorigami/game-ui-wheel 1.1.7 → 1.1.9

package/dist/index.mjs

@@ -1,12 +1,12 @@
-import { genCorrelationId as ue, REQUEST_TIMEOUT_MS as ce, resolveApiErrorCode as pe, getTranslation as g, errorCodeToTranslationKey as me, ErrorCode as j, createMockGenerator as de, OrigamiActionType as J, noiseClick as fe, OrigamiElement as D, componentStyles as W, watch as te, desktopAttribute as R, RequiredContext as f, servicesContext as ye, skinContext as be, preferencesContext as ve, localeContext as z, limitsContext as se, layoutContext as ie, walletContext as we, calculateProfitOnWin as Se, formatMonetaryAmount as _e, getCurrencyIcon as $e, OrigamiGame as Y, InvalidReason as xe, GameComponent as re, HotkeyController as ke, HotkeyHelper as ee, waitForEvent as Ee, formatAutobetSettings as Ie, getGameOutcome as Ae, calculateGameLayoutStyle as Me, isEndAction as Pe } from "@betorigami/game-ui-shared";
-import { css as I, svg as q, nothing as X, html as a, LitElement as Oe } from "lit";
-import { Wheel as De, WheelRiskLevel as u, WheelSegments as L, getWheelPattern as Ce, getWheelSegmentMultipliers as Te, describeWheelOutcomes as Be, isWheelRiskLevel as ne, isWheelSegments as le, WHEEL_RISK_LEVELS as We, WHEEL_SEGMENT_OPTIONS as Le, getWheelMaxMultiplier as oe } from "@betorigami/game-wheel";
-import { cache as Re } from "lit/directives/cache.js";
-import { property as o, customElement as $, query as Z, state as b } from "lit/decorators.js";
+import { genCorrelationId as ce, REQUEST_TIMEOUT_MS as ue, resolveApiErrorCode as me, getTranslation as g, errorCodeToTranslationKey as pe, ErrorCode as U, createMockGenerator as de, OrigamiActionType as J, desktopContainerQuery as H, noiseClick as fe, OrigamiElement as D, componentStyles as W, watch as te, RequiredContext as f, servicesContext as ye, skinContext as be, preferencesContext as ve, mobileContainerQuery as we, localeContext as z, limitsContext as se, layoutContext as ie, walletContext as Se, calculateProfitOnWin as _e, formatMonetaryAmount as $e, getCurrencyIcon as xe, OrigamiGame as Y, InvalidReason as ke, GameComponent as re, HotkeyController as Ee, HotkeyHelper as ee, waitForEvent as Ie, formatAutobetSettings as Ae, getGameOutcome as Me, calculateGameLayoutStyle as Pe, isEndAction as Oe } from "@betorigami/game-ui-shared";
+import { css as I, svg as q, nothing as Q, html as a, LitElement as De } from "lit";
+import { Wheel as Ce, WheelRiskLevel as c, WheelSegments as L, getWheelPattern as Te, getWheelSegmentMultipliers as Be, describeWheelOutcomes as We, isWheelRiskLevel as ne, isWheelSegments as le, WHEEL_RISK_LEVELS as Le, WHEEL_SEGMENT_OPTIONS as Re, getWheelMaxMultiplier as oe } from "@betorigami/game-wheel";
+import { cache as Ne } from "lit/directives/cache.js";
+import { property as o, customElement as $, query as X, state as b } from "lit/decorators.js";
 import d from "big.js";
-import { sumPayout as Ne } from "@betorigami/game-engine";
-import { styleMap as Ue } from "lit/directives/style-map.js";
-const je = {
+import { sumPayout as Ue } from "@betorigami/game-engine";
+import { styleMap as je } from "lit/directives/style-map.js";
+const He = {
   overview: {
     translation: {
       key: "gameInfo.wheel.overview",
@@ -47,7 +47,7 @@ const je = {
     }
   }
 };
-class H {
+class j {
   /**
    * Calculate exact target angle for a segment with pseudorandom position
    * @param segmentIndex - Index of winning segment (0-based)
@@ -74,10 +74,10 @@ class H {
     let n = 0, l = 0;
     for (; ; ) {
       l++;
-      const m = e * Math.exp(-i * l);
-      if (m < 0.01)
+      const p = e * Math.exp(-i * l);
+      if (p < 0.01)
         break;
-      n += m, s.push(n);
+      n += p, s.push(n);
     }
     return s;
   }
@@ -106,7 +106,7 @@ class H {
     return 1 + n % l;
   }
 }
-class He {
+class Fe {
   constructor(e, i) {
     this.authToken = e, this.baseUrl = i + "/games/wheel";
   }
@@ -114,11 +114,11 @@ class He {
     try {
       const i = await fetch(`${this.baseUrl}/play`, {
         method: "POST",
-        signal: AbortSignal.timeout(ce),
+        signal: AbortSignal.timeout(ue),
         headers: {
           "Content-Type": "application/json",
           Authorization: `Bearer ${this.authToken}`,
-          "X-Origami-Trace": ue()
+          "X-Origami-Trace": ce()
         },
         body: JSON.stringify({
           amount: e.amount,
@@ -131,31 +131,31 @@ class He {
       }), r = await i.json();
       if (i.ok && r.id)
         return { success: !0, data: r };
-      const s = pe(r);
+      const s = me(r);
       return {
         success: !1,
-        error: g(me(s), e.language),
+        error: g(pe(s), e.language),
         errorCode: s
       };
     } catch {
       return {
         success: !1,
         error: g("alerts.gameError", e.language),
-        errorCode: j.UNKNOWN
+        errorCode: U.UNKNOWN
       };
     }
   }
 }
-class Fe {
+class Ke {
   constructor(e) {
     this.edge = e;
   }
   async startBet(e) {
-    const { amount: i, riskLevel: r, segments: s } = e, n = { riskLevel: r, segments: s, betAmount: d(i) }, l = new De().getGameResult({
+    const { amount: i, riskLevel: r, segments: s } = e, n = { riskLevel: r, segments: s, betAmount: d(i) }, l = new Ce().getGameResult({
       generator: de(),
       edge: this.edge,
       gameInputs: n
-    }), m = Ne(l.payout).toString();
+    }), p = Ue(l.payout).toString();
     return { success: !0, data: {
       id: crypto.randomUUID(),
       tenantId: "origami-casino",
@@ -163,7 +163,7 @@ class Fe {
       tenantUserId: "mock-user",
       gameId: "wheel",
       amount: i,
-      payout: m,
+      payout: p,
       afterBalance: "1000",
       multiplier: l.payoutMultiplier.toString(),
       clientSeed: "mock-seed",
@@ -187,7 +187,7 @@ class Fe {
     } };
   }
 }
-const Ke = I`
+const Ge = I`
   :host {
     width: 100%;
     height: 100%;
@@ -198,7 +198,7 @@ const Ke = I`
     overflow: hidden;
   }
 
-  :host(:not([data-is-desktop='true'])) origami-history-pills {
+  origami-history-pills {
     --container-position: static;
   }
 
@@ -206,15 +206,17 @@ const Ke = I`
     display: none;
   }
 
-  :host([data-is-desktop='true']) {
-    grid-template-rows: auto 1fr auto;
-    padding-bottom: 0;
+  ${H} {
+    :host {
+      grid-template-rows: auto 1fr auto;
+      padding-bottom: 0;
 
-    .desktop-only {
-      display: block;
+      .desktop-only {
+        display: block;
+      }
     }
   }
-`, Ge = I`
+`, qe = I`
   :host {
     width: 100%;
     height: 100%;
@@ -243,14 +245,6 @@ const Ke = I`
     padding: 0;
   }
 
-  @media (min-width: 768px) {
-    .wheel-box {
-      aspect-ratio: 1 / 1;
-      height: auto;
-      margin: 0 auto;
-    }
-  }
-
   .wheel-svg,
   .wheel-svg svg {
     width: 100%;
@@ -282,22 +276,30 @@ const Ke = I`
     display: none;
   }
 
-  :host([data-is-desktop='true']) {
-    background-color: var(--background-secondary);
-    background-image: var(--custom-game-background-image, none);
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    padding: 12px;
-    border-radius: var(--border-radius);
-  }
+  ${H} {
+    .wheel-box {
+      aspect-ratio: 1 / 1;
+      height: auto;
+      margin: 0 auto;
+    }
 
-  :host([data-is-desktop='true']) .game-content {
-    max-width: 360px;
-  }
+    :host {
+      background-color: var(--background-secondary);
+      background-image: var(--custom-game-background-image, none);
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+      padding: 12px;
+      border-radius: var(--border-radius);
+    }
+
+    :host .game-content {
+      max-width: 360px;
+    }
 
-  :host([data-is-desktop='true']) .wheel-box {
-    max-width: 400px;
+    :host .wheel-box {
+      max-width: 400px;
+    }
   }
 
   /* Outcome modal layout: wheel should grow to full height of its container (minus padding) */
@@ -323,14 +325,14 @@ const Ke = I`
   RED: "var(--wheel-color-red)",
   BLUE: "var(--wheel-color-blue)",
   PURPLE: "var(--wheel-color-purple)"
-}, qe = {
+}, Ve = {
   ZERO: C.BLACK,
   A: C.GREEN,
   B: C.YELLOW,
   C: C.BLUE,
   D: C.RED,
   E: C.PURPLE
-}, ae = (t) => qe[t], G = 9, Ve = 0.08, ze = 0.8, Ye = 1e4, Xe = () => ({
+}, ae = (t) => Ve[t], G = 9, ze = 0.08, Ye = 0.8, Qe = 1e4, Xe = () => ({
   layers: [fe(2800, { duration: 15e-4, decay: 8, gain: 0.6 })],
   gainScale: 1
 }), Ze = I`
@@ -354,22 +356,22 @@ const Ke = I`
     }
   }
 `;
-var Qe = Object.defineProperty, Je = Object.getOwnPropertyDescriptor, F = (t, e, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? Je(e, i) : e, n = t.length - 1, l; n >= 0; n--)
+var Je = Object.defineProperty, et = Object.getOwnPropertyDescriptor, F = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? et(e, i) : e, n = t.length - 1, l; n >= 0; n--)
     (l = t[n]) && (s = (r ? l(e, i, s) : l(s)) || s);
-  return r && s && Qe(e, i, s), s;
+  return r && s && Je(e, i, s), s;
 };
 let T = class extends D {
   constructor() {
-    super(...arguments), this.risk = u.MEDIUM_RISK, this.segments = L.TEN, this.highlightedSegments = [];
+    super(...arguments), this.risk = c.MEDIUM_RISK, this.segments = L.TEN, this.highlightedSegments = [];
   }
   generateWheelPaths() {
-    const t = Ce({ riskLevel: this.risk, segments: this.segments }), e = { cx: 285, cy: 285 }, i = 284.371, r = 2 * Math.PI / this.segments, s = [];
+    const t = Te({ riskLevel: this.risk, segments: this.segments }), e = { cx: 285, cy: 285 }, i = 284.371, r = 2 * Math.PI / this.segments, s = [];
     for (let n = 0; n < this.segments; n++) {
       const l = ae(t[n]), _ = this.highlightedSegments.length > 0 && !this.highlightedSegments.includes(n) ? 0.25 : 1, k = n * r - Math.PI / 2, E = (n + 1) * r - Math.PI / 2, P = {
         x: e.cx + i * Math.cos(k),
         y: e.cy + i * Math.sin(k)
-      }, U = {
+      }, N = {
         x: e.cx + i * Math.cos(E),
         y: e.cy + i * Math.sin(E)
       };
@@ -380,7 +382,7 @@ let T = class extends D {
           stroke="${l}"
           stroke-width="1"
           opacity="${_}"
-          d="M${e.cx} ${e.cy} L${P.x.toFixed(3)} ${P.y.toFixed(3)} A${i} ${i} 0 0 1 ${U.x.toFixed(3)} ${U.y.toFixed(3)} Z"
+          d="M${e.cx} ${e.cy} L${P.x.toFixed(3)} ${P.y.toFixed(3)} A${i} ${i} 0 0 1 ${N.x.toFixed(3)} ${N.y.toFixed(3)} Z"
         />`
       );
     }
@@ -416,14 +418,14 @@ F([
 T = F([
   $("origami-wheel-svg")
 ], T);
-var et = Object.defineProperty, tt = Object.getOwnPropertyDescriptor, p = (t, e, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? tt(e, i) : e, n = t.length - 1, l; n >= 0; n--)
+var tt = Object.defineProperty, st = Object.getOwnPropertyDescriptor, m = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? st(e, i) : e, n = t.length - 1, l; n >= 0; n--)
     (l = t[n]) && (s = (r ? l(e, i, s) : l(s)) || s);
-  return r && s && et(e, i, s), s;
+  return r && s && tt(e, i, s), s;
 };
 let h = class extends D {
   constructor() {
-    super(...arguments), this.services = new f(this, ye), this.skin = new f(this, be), this.preferences = new f(this, ve), this.isPlaying = !1, this.staticDisplay = !1, this.ignoreInstantBet = !1, this.risk = u.MEDIUM_RISK, this.segments = 10, this.targetAngle = null, this.resultSegment = null, this.hoveredSegments = [], this._angle = 0, this._rafId = null, this._decelerationOffsets = null, this._currentDecelerationFrame = 0, this._decelerationStartAngle = 0;
+    super(...arguments), this.services = new f(this, ye), this.skin = new f(this, be), this.preferences = new f(this, ve), this.isPlaying = !1, this.staticDisplay = !1, this.ignoreInstantBet = !1, this.risk = c.MEDIUM_RISK, this.segments = 10, this.targetAngle = null, this.resultSegment = null, this.hoveredSegments = [], this._angle = 0, this._rafId = null, this._decelerationOffsets = null, this._currentDecelerationFrame = 0, this._decelerationStartAngle = 0;
   }
   firstUpdated() {
     this._updateTransform();
@@ -440,10 +442,10 @@ let h = class extends D {
       this._angle = this.targetAngle, this._updateTransform(), this._stopLoop(), this.emit("wheel-spin-complete");
       return;
     }
-    const t = this._isInstantBet ? ze : Ve;
-    this._decelerationOffsets = H.generateDecelerationOffsets(G, t);
+    const t = this._isInstantBet ? Ye : ze;
+    this._decelerationOffsets = j.generateDecelerationOffsets(G, t);
     const e = this._decelerationOffsets[this._decelerationOffsets.length - 1];
-    this._decelerationStartAngle = H.calculateDecelerationStartAngle(this._angle, this.targetAngle, e), this._currentDecelerationFrame = 0;
+    this._decelerationStartAngle = j.calculateDecelerationStartAngle(this._angle, this.targetAngle, e), this._currentDecelerationFrame = 0;
   }
   handleIsPlayingChange() {
     this.isPlaying && this._rafId === null && !this._isInstantBet ? this._startLoop() : !this.isPlaying && this._rafId !== null && this._stopLoop();
@@ -505,7 +507,7 @@ let h = class extends D {
                     height=${120 - 2 * (this.skin.value.customWheelCenterPadding ?? 0)}
                     style="clip-path: circle(50%)"
                     preserveAspectRatio="xMidYMid slice"
-                  />` : X}
+                  />` : Q}
               <path
                 d="M281.402 125.5C282.557 123.5 285.443 123.5 286.598 125.5L334.23 208C335.384 210 333.941 212.5 331.632 212.5H236.369C234.059 212.5 232.616 210 233.771 208L281.402 125.5Z"
                 fill="white"
@@ -517,45 +519,44 @@ let h = class extends D {
     `;
   }
 };
-h.styles = [W, Ge];
-p([
+h.styles = [W, qe];
+m([
   o({ type: Boolean })
 ], h.prototype, "isPlaying", 2);
-p([
+m([
   o({ type: Boolean })
 ], h.prototype, "staticDisplay", 2);
-p([
+m([
   o({ type: Boolean })
 ], h.prototype, "ignoreInstantBet", 2);
-p([
+m([
   o({ type: String })
 ], h.prototype, "risk", 2);
-p([
+m([
   o({ type: Number })
 ], h.prototype, "segments", 2);
-p([
+m([
   o({ type: Number })
 ], h.prototype, "targetAngle", 2);
-p([
+m([
   o({ type: Number })
 ], h.prototype, "resultSegment", 2);
-p([
+m([
   o({ type: Array })
 ], h.prototype, "hoveredSegments", 2);
-p([
-  Z(".wheel-svg")
+m([
+  X(".wheel-svg")
 ], h.prototype, "_wheelEl", 2);
-p([
+m([
   te("targetAngle")
 ], h.prototype, "handleTargetAngleChange", 1);
-p([
+m([
   te("isPlaying")
 ], h.prototype, "handleIsPlayingChange", 1);
-h = p([
-  $("origami-wheel-animator"),
-  R
+h = m([
+  $("origami-wheel-animator")
 ], h);
-const st = I`
+const it = I`
   :host {
     display: flex;
     flex-direction: column;
@@ -635,21 +636,6 @@ const st = I`
     gap: 12px;
   }
 
-  :host(:not([data-is-desktop='true'])) .tiles {
-    display: flex;
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    gap: 12px;
-    scroll-snap-type: x proximity;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  :host(:not([data-is-desktop='true'])) .tile {
-    flex: 1 0 0;
-    scroll-snap-align: start;
-    min-width: 96px;
-  }
-
   .tile {
     position: relative;
     border-radius: var(--border-radius);
@@ -689,15 +675,32 @@ const st = I`
     background: var(--background-quinary);
     cursor: help;
   }
+
+  ${we} {
+    :host .tiles {
+      display: flex;
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      gap: 12px;
+      scroll-snap-type: x proximity;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    :host .tile {
+      flex: 1 0 0;
+      scroll-snap-align: start;
+      min-width: 96px;
+    }
+  }
 `;
-var it = Object.defineProperty, rt = Object.getOwnPropertyDescriptor, N = (t, e, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? rt(e, i) : e, n = t.length - 1, l; n >= 0; n--)
+var rt = Object.defineProperty, nt = Object.getOwnPropertyDescriptor, R = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? nt(e, i) : e, n = t.length - 1, l; n >= 0; n--)
     (l = t[n]) && (s = (r ? l(e, i, s) : l(s)) || s);
-  return r && s && it(e, i, s), s;
+  return r && s && rt(e, i, s), s;
 };
 let O = class extends D {
   constructor() {
-    super(...arguments), this.locale = new f(this, z), this.limits = new f(this, se), this.layout = new f(this, ie), this.wallet = new f(this, we), this.risk = u.MEDIUM_RISK, this.segments = L.TEN, this.resultSegment = null, this.hoveredTileIndex = null;
+    super(...arguments), this.locale = new f(this, z), this.limits = new f(this, se), this.layout = new f(this, ie), this.wallet = new f(this, Se), this.risk = c.MEDIUM_RISK, this.segments = L.TEN, this.resultSegment = null, this.hoveredTileIndex = null;
   }
   get edge() {
     return this.limits.value.edge;
@@ -706,10 +709,10 @@ let O = class extends D {
     return { riskLevel: this.risk, segments: this.segments };
   }
   get segmentMultipliers() {
-    return Te(this.selection, this.edge);
+    return Be(this.selection, this.edge);
   }
   get tiles() {
-    return Be(this.selection, this.edge).outcomes;
+    return We(this.selection, this.edge).outcomes;
   }
   getActiveTileIndexFromSegment() {
     if (this.resultSegment === null) return null;
@@ -735,14 +738,14 @@ let O = class extends D {
     this.layout.value.isDesktop && (this.hoveredTileIndex = null, this.emit("wheel-multiplier-hover", { detail: { segments: [] } }));
   }
   formatProfit(t) {
-    const { betAmount: e } = this.wallet.value, { maxPayout: i } = this.limits.value, { currency: r } = this.locale.value, s = Se({ betAmount: d(e), multiplier: t, maxPayout: d(i) });
-    return _e(s.toFixed(), r, { includeSymbol: !1 });
+    const { betAmount: e } = this.wallet.value, { maxPayout: i } = this.limits.value, { currency: r } = this.locale.value, s = _e({ betAmount: d(e), multiplier: t, maxPayout: d(i) });
+    return $e(s.toFixed(), r, { includeSymbol: !1 });
   }
   formatChance(t, e) {
     return `${t}/${e}`;
   }
   render() {
-    const t = this.tiles, e = Math.min(t.length, 6), { language: i } = this.locale.value, r = this.activeTileIndex, s = t[r], n = t.reduce((_, k) => _ + k.weight, 0), l = this.formatProfit(s.multiplier), m = this.formatChance(s.weight, n);
+    const t = this.tiles, e = Math.min(t.length, 6), { language: i } = this.locale.value, r = this.activeTileIndex, s = t[r], n = t.reduce((_, k) => _ + k.weight, 0), l = this.formatProfit(s.multiplier), p = this.formatChance(s.weight, n);
     return a`
       <div class="container">
         ${this.layout.value.isDesktop ? a`<div class="multiplier-info">
@@ -758,14 +761,14 @@ let O = class extends D {
                     .offset=${6}
                     inline
                   >
-                    <span class="info-icon">${$e(this.locale.value.currency)}</span>
+                    <span class="info-icon">${xe(this.locale.value.currency)}</span>
                   </origami-tooltip>
                 </div>
 
                 <div class="info-item">
                   <div>
                     <span class="label">${g("common.winChance", i)}:</span>
-                    <span class="value">${m}</span>
+                    <span class="value">${p}</span>
                   </div>
                   <lottie-icon
                     src="https://assets.betorigami.com/games/animations/percentage_symbol.json"
@@ -773,24 +776,24 @@ let O = class extends D {
                     size="16px"
                   ></lottie-icon>
                 </div>
-              </div>` : X}
+              </div>` : Q}
 
         <div class="tiles" role="list" style="--grid-columns: ${e}" @mouseleave=${() => this.handleTileMouseLeave()}>
           ${t.map(({ slot: _, multiplier: k }, E) => {
-      const P = `${k.toString()}X`, U = ae(_), Q = this.hoveredTileIndex === E;
+      const P = `${k.toString()}X`, N = ae(_), Z = this.hoveredTileIndex === E;
       return a`
               <div 
                 class="tile" 
                 role="listitem"
-                hovered=${Q}
-                active=${!Q && E === r}
+                hovered=${Z}
+                active=${!Z && E === r}
                 @mouseenter=${() => this.handleTileMouseEnter(E)}
               >
                 <div class="tile-content">
                   <span class="tile-label">${P}</span>
                   <span 
                     class="dot" 
-                    style=${Ue({ backgroundColor: U })}
+                    style=${je({ backgroundColor: N })}
                     aria-hidden="true"
                   ></span>
                 </div>
@@ -802,31 +805,30 @@ let O = class extends D {
     `;
   }
 };
-O.styles = [W, st];
-N([
+O.styles = [W, it];
+R([
   o({ type: String })
 ], O.prototype, "risk", 2);
-N([
+R([
   o({ type: Number })
 ], O.prototype, "segments", 2);
-N([
+R([
   o({ type: Number })
 ], O.prototype, "resultSegment", 2);
-N([
+R([
   b()
 ], O.prototype, "hoveredTileIndex", 2);
-O = N([
-  $("origami-wheel-content-bottom"),
-  R
+O = R([
+  $("origami-wheel-content-bottom")
 ], O);
-var nt = Object.defineProperty, lt = Object.getOwnPropertyDescriptor, A = (t, e, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? lt(e, i) : e, n = t.length - 1, l; n >= 0; n--)
+var lt = Object.defineProperty, ot = Object.getOwnPropertyDescriptor, A = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? ot(e, i) : e, n = t.length - 1, l; n >= 0; n--)
     (l = t[n]) && (s = (r ? l(e, i, s) : l(s)) || s);
-  return r && s && nt(e, i, s), s;
+  return r && s && lt(e, i, s), s;
 };
 let v = class extends D {
   constructor() {
-    super(...arguments), this.isPlaying = !1, this.history = [], this.risk = u.MEDIUM_RISK, this.segments = 10, this.targetAngle = null, this.resultSegment = null, this.hoveredSegments = [];
+    super(...arguments), this.isPlaying = !1, this.history = [], this.risk = c.MEDIUM_RISK, this.segments = 10, this.targetAngle = null, this.resultSegment = null, this.hoveredSegments = [];
   }
   handleMultiplierHover(t) {
     this.hoveredSegments = t.detail.segments;
@@ -858,7 +860,7 @@ let v = class extends D {
     `;
   }
 };
-v.styles = [W, Ke];
+v.styles = [W, Ge];
 A([
   o({ type: Boolean })
 ], v.prototype, "isPlaying", 2);
@@ -881,8 +883,7 @@ A([
   b()
 ], v.prototype, "hoveredSegments", 2);
 v = A([
-  $("origami-wheel-layout"),
-  R
+  $("origami-wheel-layout")
 ], v);
 const he = I`
   :host {
@@ -900,12 +901,6 @@ const he = I`
     order: -1;
   }
 
-  :host([data-is-desktop='true']) {
-    .action-section {
-      order: 0;
-    }
-  }
-
   .custom-inputs-container {
     grid-column: span 2;
     display: contents;
@@ -914,7 +909,13 @@ const he = I`
   .grid-full-width {
     grid-column: span 2;
   }
-`, ot = I`
+
+  ${H} {
+    :host .action-section {
+      order: 0;
+    }
+  }
+`, at = I`
   :host {
     display: contents;
   }
@@ -923,19 +924,19 @@ const he = I`
     grid-column: span 2;
   }
 `;
-var at = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, K = (t, e, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? ht(e, i) : e, n = t.length - 1, l; n >= 0; n--)
+var ht = Object.defineProperty, gt = Object.getOwnPropertyDescriptor, K = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? gt(e, i) : e, n = t.length - 1, l; n >= 0; n--)
     (l = t[n]) && (s = (r ? l(e, i, s) : l(s)) || s);
-  return r && s && at(e, i, s), s;
+  return r && s && ht(e, i, s), s;
 };
-const gt = {
-  [u.LOW_RISK]: "common.low",
-  [u.MEDIUM_RISK]: "common.medium",
-  [u.HIGH_RISK]: "common.high"
+const ct = {
+  [c.LOW_RISK]: "common.low",
+  [c.MEDIUM_RISK]: "common.medium",
+  [c.HIGH_RISK]: "common.high"
 };
 let B = class extends D {
   constructor() {
-    super(...arguments), this.locale = new f(this, z), this.risk = u.MEDIUM_RISK, this.segments = L.TEN, this.disabled = !1;
+    super(...arguments), this.locale = new f(this, z), this.risk = c.MEDIUM_RISK, this.segments = L.TEN, this.disabled = !1;
   }
   handleRiskChange(t) {
     const { value: e } = t.detail;
@@ -951,7 +952,7 @@ let B = class extends D {
       <origami-select
         class="grid-full-width"
         label=${g("common.risk", t)}
-        .options=${We.map((e) => ({ value: e, label: g(gt[e], t) }))}
+        .options=${Le.map((e) => ({ value: e, label: g(ct[e], t) }))}
         .value=${this.risk}
         @select-change=${this.handleRiskChange}
         ?disabled=${this.disabled}
@@ -960,7 +961,7 @@ let B = class extends D {
       <origami-select
         class="grid-full-width"
         label=${g("games.wheel.segments", t)}
-        .options=${Le.map((e) => ({ value: e.toString(), label: e.toString() }))}
+        .options=${Re.map((e) => ({ value: e.toString(), label: e.toString() }))}
         .value=${this.segments.toString()}
         @select-change=${this.handleSegmentsChange}
         ?disabled=${this.disabled}
@@ -968,7 +969,7 @@ let B = class extends D {
     `;
   }
 };
-B.styles = [W, ot];
+B.styles = [W, at];
 K([
   o({ type: String })
 ], B.prototype, "risk", 2);
@@ -981,14 +982,14 @@ K([
 B = K([
   $("origami-wheel-selectors")
 ], B);
-var ut = Object.defineProperty, ct = Object.getOwnPropertyDescriptor, x = (t, e, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? ct(e, i) : e, n = t.length - 1, l; n >= 0; n--)
+var ut = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, x = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? mt(e, i) : e, n = t.length - 1, l; n >= 0; n--)
     (l = t[n]) && (s = (r ? l(e, i, s) : l(s)) || s);
   return r && s && ut(e, i, s), s;
 };
 let y = class extends D {
   constructor() {
-    super(...arguments), this.locale = new f(this, z), this.isPlaying = !1, this.betDisabled = !1, this.inputsDisabled = !1, this.risk = u.MEDIUM_RISK, this.segments = L.TEN, this.betMaxMultiplier = d(1), this.isBetAmountValid = !0, this._betAboveBalance = !1;
+    super(...arguments), this.locale = new f(this, z), this.isPlaying = !1, this.betDisabled = !1, this.inputsDisabled = !1, this.risk = c.MEDIUM_RISK, this.segments = L.TEN, this.betMaxMultiplier = d(1), this.isBetAmountValid = !0, this._betAboveBalance = !1;
   }
   render() {
     const t = this.locale.value.language;
@@ -1001,7 +1002,7 @@ let y = class extends D {
       this.isBetAmountValid = e.detail.isValid;
     }}
         @bet-amount-input-error-change=${(e) => {
-      this._betAboveBalance = e.detail.invalidReason === xe.BET_AMOUNT_ABOVE_BALANCE;
+      this._betAboveBalance = e.detail.invalidReason === ke.BET_AMOUNT_ABOVE_BALANCE;
     }}
       ></origami-bet-amount-input>
 
@@ -1049,17 +1050,16 @@ x([
   b()
 ], y.prototype, "_betAboveBalance", 2);
 y = x([
-  $("origami-wheel-manual"),
-  R
+  $("origami-wheel-manual")
 ], y);
-var pt = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, M = (t, e, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? mt(e, i) : e, n = t.length - 1, l; n >= 0; n--)
+var pt = Object.defineProperty, dt = Object.getOwnPropertyDescriptor, M = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? dt(e, i) : e, n = t.length - 1, l; n >= 0; n--)
     (l = t[n]) && (s = (r ? l(e, i, s) : l(s)) || s);
   return r && s && pt(e, i, s), s;
 };
 let w = class extends D {
   constructor() {
-    super(...arguments), this.inputsDisabled = !1, this.autobetStopping = !1, this.autobetInProgress = !1, this.betDisabled = !1, this.risk = u.MEDIUM_RISK, this.segments = L.TEN, this.betMaxMultiplier = d(1);
+    super(...arguments), this.inputsDisabled = !1, this.autobetStopping = !1, this.autobetInProgress = !1, this.betDisabled = !1, this.risk = c.MEDIUM_RISK, this.segments = L.TEN, this.betMaxMultiplier = d(1);
   }
   render() {
     return a`
@@ -1102,10 +1102,9 @@ M([
   o({ attribute: !1 })
 ], w.prototype, "betMaxMultiplier", 2);
 w = M([
-  $("origami-wheel-auto"),
-  R
+  $("origami-wheel-auto")
 ], w);
-const dt = I`
+const ft = I`
   :host {
     height: 100%;
   }
@@ -1114,14 +1113,14 @@ const dt = I`
     display: block;
   }
 `;
-var ft = Object.defineProperty, yt = Object.getOwnPropertyDescriptor, S = (t, e, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? yt(e, i) : e, n = t.length - 1, l; n >= 0; n--)
+var yt = Object.defineProperty, bt = Object.getOwnPropertyDescriptor, S = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? bt(e, i) : e, n = t.length - 1, l; n >= 0; n--)
     (l = t[n]) && (s = (r ? l(e, i, s) : l(s)) || s);
-  return r && s && ft(e, i, s), s;
+  return r && s && yt(e, i, s), s;
 };
-let c = class extends re {
+let u = class extends re {
   constructor() {
-    super(), this.limits = new f(this, se), this.layout = new f(this, ie), this.isManualPlaying = !1, this.history = [], this.wheelRisk = u.MEDIUM_RISK, this.numberOfSegments = 10, this.targetAngle = null, this.resultSegment = null, this.isWheelSpinning = !1, new ke(this, [
+    super(), this.limits = new f(this, se), this.layout = new f(this, ie), this.isManualPlaying = !1, this.history = [], this.wheelRisk = c.MEDIUM_RISK, this.numberOfSegments = 10, this.targetAngle = null, this.resultSegment = null, this.isWheelSpinning = !1, new Ee(this, [
       {
         key: " ",
         callback: () => ee.clickBetButton(this.manualOrAuto, this._wheelManualEl, this._wheelAutoEl),
@@ -1140,7 +1139,7 @@ let c = class extends re {
     this.numberOfSegments = t.detail.value, this.resultSegment = null;
   }
   get wheelApi() {
-    return this.session.value.isDemoMode ? new Fe(this.limits.value.edge) : new He(this.session.value.authToken, this.session.value.baseUrl);
+    return this.session.value.isDemoMode ? new Ke(this.limits.value.edge) : new Fe(this.session.value.authToken, this.session.value.baseUrl);
   }
   get isToggleDisabled() {
     return this.isManualPlaying || this.autobetInProgress || this.autobetStopping;
@@ -1149,7 +1148,7 @@ let c = class extends re {
     return this.isManualPlaying || this.autobetInProgress || this.autobetStopping;
   }
   wheelSpinCompletedPromise() {
-    return Ee(this, "wheel-spin-complete", void 0, Ye, !0);
+    return Ie(this, "wheel-spin-complete", void 0, Qe, !0);
   }
   async handleBetExecution(t, e) {
     this.resetForNextBet(() => {
@@ -1168,14 +1167,14 @@ let c = class extends re {
           language: this.locale.value.language,
           riskLevel: this.wheelRisk,
           segments: this.numberOfSegments,
-          meta: e ? Ie(e) : void 0
+          meta: e ? Ae(e) : void 0
         })
       );
       if (s.success) {
-        const { data: n } = s, l = Number(n.multiplier ?? 0), { betActions: m } = n, _ = m[m.length - 1];
+        const { data: n } = s, l = Number(n.multiplier ?? 0), { betActions: p } = n, _ = p[p.length - 1];
         if (_?.data?.WHEEL) {
           const { result: P } = _.data.WHEEL;
-          this.resultSegment = P[0] ?? 0, this.targetAngle = H.calculateTargetAngle(this.resultSegment, this.numberOfSegments, n.id);
+          this.resultSegment = P[0] ?? 0, this.targetAngle = j.calculateTargetAngle(this.resultSegment, this.numberOfSegments, n.id);
         }
         r && await this.wheelSpinCompletedPromise(), this.isWheelSpinning = !1;
         const k = d(l).gt(0);
@@ -1188,14 +1187,14 @@ let c = class extends re {
       return this.wallet.value.updateBalance(i), this.isWheelSpinning = !1, {
         success: !1,
         error: r instanceof Error ? r.message : g("alerts.gameError", this.locale.value.language),
-        errorCode: j.UNKNOWN
+        errorCode: U.UNKNOWN
       };
     }
   }
   async wheelPlay() {
     this.isManualPlaying = !0;
     const t = await this.handleBetExecution(this.wallet.value.betAmount);
-    t.success || (this.checkSessionExpired(t.errorCode ?? j.UNKNOWN), this.showError(t.error)), this.isManualPlaying = !1;
+    t.success || (this.checkSessionExpired(t.errorCode ?? U.UNKNOWN), this.showError(t.error)), this.isManualPlaying = !1;
   }
   async executeAutobet(t, e) {
     const i = await this.handleBetExecution(e, t);
@@ -1204,14 +1203,14 @@ let c = class extends re {
         pnl: d(0),
         gameOutcome: "Draw",
         hasError: !0,
-        errorCode: i.errorCode ?? j.UNKNOWN,
+        errorCode: i.errorCode ?? U.UNKNOWN,
         errorMessage: i.error || g("alerts.errorProcessingBet", this.locale.value.language)
       };
-    const r = i.data, s = d(r.payout ?? 0).minus(r.amount ?? 0), n = Number(r.multiplier), l = Ae(n);
+    const r = i.data, s = d(r.payout ?? 0).minus(r.amount ?? 0), n = Number(r.multiplier), l = Me(n);
     return await this.holdResultDisplay(), { pnl: s, gameOutcome: l, hasError: !1 };
   }
   render() {
-    const t = oe(this.limits.value.edge, { riskLevel: this.wheelRisk, segments: this.numberOfSegments }), e = !1, i = Me(this.layout.value);
+    const t = oe(this.limits.value.edge, { riskLevel: this.wheelRisk, segments: this.numberOfSegments }), e = !1, i = Pe(this.layout.value);
     return a`
       <origami-game-layout style=${i} .gameType=${Y.WHEEL}>
         <origami-game-sidebar
@@ -1222,7 +1221,7 @@ let c = class extends re {
           @wheel-risk-change=${this.handleWheelRiskChange}
           @wheel-segments-change=${this.handleWheelSegmentsChange}
         >
-          ${Re(
+          ${Ne(
       this.manualOrAuto === "Manual" ? a`<origami-wheel-manual
                   slot="controls"
                   .inputsDisabled=${this.areInputsDisabled}
@@ -1248,7 +1247,7 @@ let c = class extends re {
     )}
         </origami-game-sidebar>
 
-        ${this.layout.value.isDesktop ? X : a`
+        ${this.layout.value.isDesktop ? Q : a`
             <origami-wheel-content-bottom
               slot="content-bottom"
               .risk=${this.wheelRisk}
@@ -1269,43 +1268,43 @@ let c = class extends re {
     `;
   }
 };
-c.styles = [...re.styles, dt];
+u.styles = [...re.styles, ft];
 S([
   b()
-], c.prototype, "isManualPlaying", 2);
+], u.prototype, "isManualPlaying", 2);
 S([
   b()
-], c.prototype, "history", 2);
+], u.prototype, "history", 2);
 S([
   b()
-], c.prototype, "wheelRisk", 2);
+], u.prototype, "wheelRisk", 2);
 S([
   b()
-], c.prototype, "numberOfSegments", 2);
+], u.prototype, "numberOfSegments", 2);
 S([
   b()
-], c.prototype, "targetAngle", 2);
+], u.prototype, "targetAngle", 2);
 S([
   b()
-], c.prototype, "resultSegment", 2);
+], u.prototype, "resultSegment", 2);
 S([
   b()
-], c.prototype, "isWheelSpinning", 2);
+], u.prototype, "isWheelSpinning", 2);
 S([
-  Z("origami-wheel-manual")
-], c.prototype, "_wheelManualEl", 2);
+  X("origami-wheel-manual")
+], u.prototype, "_wheelManualEl", 2);
 S([
-  Z("origami-wheel-auto")
-], c.prototype, "_wheelAutoEl", 2);
-c = S([
+  X("origami-wheel-auto")
+], u.prototype, "_wheelAutoEl", 2);
+u = S([
   $("origami-wheel-game")
-], c);
-var bt = Object.getOwnPropertyDescriptor, vt = (t, e, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? bt(e, i) : e, n = t.length - 1, l; n >= 0; n--)
+], u);
+var vt = Object.getOwnPropertyDescriptor, wt = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? vt(e, i) : e, n = t.length - 1, l; n >= 0; n--)
     (l = t[n]) && (s = l(s) || s);
   return s;
 };
-let V = class extends Oe {
+let V = class extends De {
   render() {
     return a`<slot></slot>`;
   }
@@ -1325,25 +1324,25 @@ V.styles = I`
       box-sizing: border-box;
     }
 
-    @media (min-width: 768px) {
+    ${H} {
       :host {
         height: 225px;
       }
     }
   `;
-V = vt([
+V = wt([
   $("origami-wheel-outcome")
 ], V);
-const wt = (t) => typeof t == "object" && t !== null && "risk" in t && ne(t.risk) && "segments" in t && le(t.segments) && "resultSegment" in t && typeof t.resultSegment == "number" && "betId" in t && typeof t.betId == "string", ge = (t) => {
+const St = (t) => typeof t == "object" && t !== null && "risk" in t && ne(t.risk) && "segments" in t && le(t.segments) && "resultSegment" in t && typeof t.resultSegment == "number" && "betId" in t && typeof t.betId == "string", ge = (t) => {
   const e = t?.WHEEL;
   return e !== void 0 && "segments" in e ? e : void 0;
-}, St = (t) => {
+}, _t = (t) => {
   const e = ge(t.betActions[0]?.data), i = t.betActions[t.betActions.length - 1]?.data.WHEEL;
-  return e === void 0 || i === void 0 || !Pe(i) ? { risk: u.MEDIUM_RISK, segments: L.TEN, resultSegment: 0, betId: t.id || "123" } : { risk: e.riskLevel, segments: e.segments, resultSegment: i.result[0] ?? 0, betId: t.id };
-}, _t = (t, { enableAnimation: e, inBetResultModal: i, language: r }) => {
-  if (!wt(t))
+  return e === void 0 || i === void 0 || !Oe(i) ? { risk: c.MEDIUM_RISK, segments: L.TEN, resultSegment: 0, betId: t.id || "123" } : { risk: e.riskLevel, segments: e.segments, resultSegment: i.result[0] ?? 0, betId: t.id };
+}, $t = (t, { enableAnimation: e, inBetResultModal: i, language: r }) => {
+  if (!St(t))
     return a`<p>${g("errors.noWheelData", r)}</p>`;
-  const s = H.calculateTargetAngle(t.resultSegment, t.segments, t.betId);
+  const s = j.calculateTargetAngle(t.resultSegment, t.segments, t.betId);
   return a`
     <origami-wheel-outcome>
       <origami-wheel-animator
@@ -1358,20 +1357,20 @@ const wt = (t) => typeof t == "object" && t !== null && "risk" in t && ne(t.risk
       ></origami-wheel-animator>
     </origami-wheel-outcome>
   `;
-}, $t = (t) => {
+}, xt = (t) => {
   const e = ge(t);
   return e === void 0 ? {} : { segments: e.segments, riskLevel: e.riskLevel };
-}, xt = ({ segments: t, riskLevel: e }) => ({ segments: t, riskLevel: e }), Tt = {
+}, kt = ({ segments: t, riskLevel: e }) => ({ segments: t, riskLevel: e }), Bt = {
   id: Y.WHEEL,
   renderGame: () => a`<origami-wheel-game></origami-wheel-game>`,
-  gameInfo: je,
+  gameInfo: He,
   maxMultiplier: ({ edge: t }) => oe(t).toNumber(),
-  verifierInputs: $t,
-  verifierQuery: xt,
-  extractOutcome: St,
-  renderOutcome: _t
+  verifierInputs: xt,
+  verifierQuery: kt,
+  extractOutcome: _t,
+  renderOutcome: $t
 };
 export {
-  c as WheelGame,
-  Tt as wheelUiModule
+  u as WheelGame,
+  Bt as wheelUiModule
 };