@oddsmith/ui 1.0.1 → 1.0.2

package/dist/components/os-leaderboard-casino/sections/marquee-section/marquee-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"marquee-section.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/marquee-section/marquee-section.ts"],"sourcesContent":["import { LitElement, html, nothing, type TemplateResult } from 'lit';\nimport { keyed } from 'lit/directives/keyed.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { property, state } from 'lit/decorators.js';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport { OS_LEADERBOARD_CASINO_MARQUEE } from '@os-leaderboard-casino/constants/tags.js';\nimport { osLeaderboardCasinoTheme } from '@os-leaderboard-casino/theme/index.js';\nimport { renderPlayerName } from '@os-leaderboard-casino/theme/vip-mark.js';\nimport type {\n  OsLeaderboardCasinoMarqueeItem,\n  OsLeaderboardCasinoMarqueeSection,\n} from '@os-leaderboard-casino/types/sections.js';\nimport { iconService } from '@os-leaderboard-casino/services/icon.service.js';\nimport { winIcon } from './components/win-icons.js';\nimport {\n  formatWinAmount,\n  parseMarqueeItem,\n  type ParsedMarqueeWin,\n} from './marquee-item.js';\nimport {\n  ACTIVE_MARQUEE_VARIANT,\n  isMarqueeVariant,\n  type MarqueeVariant,\n} from './marquee-variants.js';\nimport type { MarqueeSectionHost } from './marquee-section.host.js';\nimport renderTemplate from './marquee-section.html?lit-html';\nimport styles from './marquee-section.scss?inline';\n\ninterface FeedRow extends ParsedMarqueeWin {\n  key: number;\n}\n\n/** Infinitely-scrolling winners ticker — v0 variant ports + classic fallback. */\n@Component({ selector: OS_LEADERBOARD_CASINO_MARQUEE })\nexport class OsLeaderboardCasinoMarquee\n  extends LitElement\n  implements MarqueeSectionHost\n{\n  static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n  @property({ attribute: false })\n  section!: OsLeaderboardCasinoMarqueeSection;\n\n  @property({ attribute: 'variant' })\n  variant: MarqueeVariant = ACTIVE_MARQUEE_VARIANT;\n\n  @state()\n  private hudIndex = 0;\n\n  @state()\n  private feedRows: FeedRow[] = [];\n\n  private hudTimer?: ReturnType<typeof setInterval>;\n  private feedTimer?: ReturnType<typeof setInterval>;\n  private feedCursor = 0;\n  private feedKey = 0;\n\n  get speedSec(): number {\n    return this.section?.speedSec ?? 30;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.syncVariantAttribute();\n    this.startVariantTimers();\n  }\n\n  updated(changed: Map<string, unknown>): void {\n    if (changed.has('variant') || changed.has('section')) {\n      this.syncVariantAttribute();\n      this.stopVariantTimers();\n      this.startVariantTimers();\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.stopVariantTimers();\n    super.disconnectedCallback();\n  }\n\n  private syncVariantAttribute(): void {\n    const next = isMarqueeVariant(this.variant) ? this.variant : 'classic';\n    this.dataset.variant = next;\n  }\n\n  private parsedWins(): ParsedMarqueeWin[] {\n    return (this.section?.items ?? []).map((item, index) =>\n      parseMarqueeItem(item, index),\n    );\n  }\n\n  private startVariantTimers(): void {\n    if (this.variant === 'hud') {\n      this.hudIndex = 0;\n      this.hudTimer = setInterval(() => {\n        const count = this.section?.items?.length ?? 0;\n        if (count > 1) this.hudIndex = (this.hudIndex + 1) % count;\n      }, 3000);\n    }\n\n    if (this.variant === 'feed') {\n      this.feedRows = [];\n      this.feedCursor = 0;\n      this.feedKey = 0;\n      for (let i = 0; i < 4; i += 1) this.pushFeedRow(false);\n      this.feedTimer = setInterval(() => this.pushFeedRow(true), 2600);\n    }\n  }\n\n  private stopVariantTimers(): void {\n    if (this.hudTimer) clearInterval(this.hudTimer);\n    if (this.feedTimer) clearInterval(this.feedTimer);\n    this.hudTimer = undefined;\n    this.feedTimer = undefined;\n  }\n\n  private pushFeedRow(trim: boolean): void {\n    const wins = this.parsedWins();\n    if (!wins.length) return;\n    const win = wins[this.feedCursor % wins.length];\n    this.feedCursor += 1;\n    const row: FeedRow = { ...win, key: this.feedKey++ };\n    this.feedRows = trim\n      ? [row, ...this.feedRows].slice(0, 4)\n      : [row, ...this.feedRows];\n  }\n\n  private formatAmount(item: OsLeaderboardCasinoMarqueeItem): string {\n    return formatWinAmount(item.amount ?? null, item.currency ?? 'USD');\n  }\n\n  private renderSeparator() {\n    return html`<span class=\"sep\" aria-hidden=\"true\">·</span>`;\n  }\n\n  private renderItemIcon(win: ParsedMarqueeWin) {\n    if (win.gameId) {\n      const iconName = iconService.resolveGameIconName(win.gameId, 0);\n      const url = iconService.get(iconName).url!;\n      return html`<img src=${url} alt=${win.game} />`;\n    }\n    return winIcon(win.icon);\n  }\n\n  /** Uses shared VIP badge styles from theme (v0 outline tag). */\n  private renderMarqueeUser(user: string, vip?: boolean) {\n    return renderPlayerName(user, { vip });\n  }\n\n  private renderClassicItem(item: OsLeaderboardCasinoMarqueeItem, index: number) {\n    const win = parseMarqueeItem(item, index);\n    const amount = this.formatAmount(item);\n    return html`\n      <span class=\"item\">\n        <span class=\"icon\">${this.renderItemIcon(win)}</span>\n        <span class=\"txt\">\n          ${this.renderMarqueeUser(win.user, win.vip)}\n          <span class=\"verb\">won</span>\n          ${item.amount != null\n            ? html`<span class=\"amt\">${amount}</span>`\n            : nothing}\n          ${win.game\n            ? html`\n                <span class=\"tail\">\n                  <span class=\"on\">on</span>\n                  <span class=\"game\">${win.game}</span>\n                </span>\n              `\n            : nothing}\n        </span>\n      </span>\n    `;\n  }\n\n  private renderClassicGroup(items: OsLeaderboardCasinoMarqueeItem[]) {\n    return html`\n      <span class=\"group\" aria-hidden=\"true\">\n        ${items.map(\n          (item, index) => html`\n            ${this.renderClassicItem(item, index)}${this.renderSeparator()}\n          `,\n        )}\n      </span>\n    `;\n  }\n\n  renderTrack(): TemplateResult {\n    const items = this.section?.items ?? [];\n    return html`${this.renderClassicGroup(items)}${this.renderClassicGroup(items)}`;\n  }\n\n  renderHudLabel(): TemplateResult | typeof nothing {\n    return nothing;\n  }\n\n  private renderTickerWin(win: ParsedMarqueeWin) {\n    const amount = formatWinAmount(win.amount, win.currency);\n    return html`\n      <span class=\"win ${win.big ? 'big' : ''}\">\n        <span class=\"chip\">${this.renderItemIcon(win)}</span>\n        <span class=\"txt\">\n          ${this.renderMarqueeUser(win.user, win.vip)}\n          <span class=\"verb\">won</span>\n          ${amount ? html`<span class=\"amt\">${amount}</span>` : nothing}\n          ${win.game\n            ? html`\n                <span class=\"tail\">\n                  <span class=\"on\">on</span>\n                  <span class=\"game\">${win.game}</span>\n                </span>\n              `\n            : nothing}\n        </span>\n      </span>\n      ${this.renderSeparator()}\n    `;\n  }\n\n  private renderTicker() {\n    const wins = this.parsedWins();\n    const group = html`<div class=\"group\">\n      ${wins.map((win) => this.renderTickerWin(win))}\n    </div>`;\n    return html`\n      <div\n        class=\"marquee\"\n        style=\"--speed: ${this.speedSec}s\"\n        role=\"region\"\n        aria-label=\"Recent winners\"\n      >\n        <div class=\"track\">${group}${group}</div>\n      </div>\n    `;\n  }\n\n  private renderHudStreamGroup(wins: ParsedMarqueeWin[]) {\n    return html`<div class=\"group\">\n      ${wins.map(\n        (win) => html`\n          <span class=\"win ${win.vip ? 'vip' : ''}\">\n            ${this.renderItemIcon(win)}${this.renderMarqueeUser(win.user, win.vip)}<span class=\"amt\">${formatWinAmount(win.amount, win.currency)}</span\n            ><span class=\"sep-inline\">/</span><span class=\"game\">${win.game}</span>\n          </span>\n        `,\n      )}\n    </div>`;\n  }\n\n  private renderHud() {\n    const wins = this.parsedWins();\n    if (!wins.length) return nothing;\n    const hero = wins[this.hudIndex] ?? wins[0];\n    const group = this.renderHudStreamGroup(wins);\n\n    return html`\n      <div\n        class=\"marquee\"\n        style=\"--speed: ${this.speedSec}s\"\n        role=\"region\"\n        aria-label=\"Recent winners\"\n      >\n        <div class=\"hero\">\n          <span class=\"badge\">Latest win</span>\n          <span class=\"chip\">${this.renderItemIcon(hero)}</span>\n          ${keyed(\n            this.hudIndex,\n            html`<span class=\"info\">\n              <span class=\"who\">${this.renderMarqueeUser(hero.user, hero.vip)}</span>\n              <span class=\"val\">${formatWinAmount(hero.amount, hero.currency)}</span>\n            </span>`,\n          )}\n        </div>\n        <div class=\"stream\">\n          <div class=\"track\">${group}${group}</div>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderBeltGroup(wins: ParsedMarqueeWin[]) {\n    return html`<div class=\"group\">\n      ${wins.map(\n        (win) => html`\n          <span class=\"pill ${win.big ? 'big' : ''} ${win.vip ? 'vip' : ''}\">\n            <span class=\"chip\">${this.renderItemIcon(win)}</span>\n            ${this.renderMarqueeUser(win.user, win.vip)}\n            <span class=\"game\">${win.game}</span>\n            <span class=\"amt\">+${formatWinAmount(win.amount, win.currency)}</span>\n          </span>\n        `,\n      )}\n    </div>`;\n  }\n\n  private renderBelt() {\n    const wins = this.parsedWins();\n    const top = wins;\n    const bottom = [...wins].reverse();\n    const topGroup = this.renderBeltGroup(top);\n    const bottomGroup = this.renderBeltGroup(bottom);\n\n    return html`\n      <div\n        class=\"marquee\"\n        style=\"--speed: ${this.speedSec}s\"\n        role=\"region\"\n        aria-label=\"Recent winners\"\n      >\n        <div class=\"lane lane-a\">${topGroup}${topGroup}</div>\n        <div class=\"lane lane-b\">${bottomGroup}${bottomGroup}</div>\n      </div>\n    `;\n  }\n\n  private renderFeed() {\n    return html`\n      <div class=\"marquee feed-panel\" role=\"region\" aria-label=\"Recent winners\">\n        <div class=\"head\">\n          <span class=\"live\"><i></i> Live wins</span>\n          <small>updating in real time</small>\n        </div>\n        <div class=\"list\">\n          ${repeat(\n            this.feedRows,\n            (row) => row.key,\n            (row) => html`\n              <div class=\"row ${row.big ? 'big' : ''} ${row.vip ? 'vip' : ''}\">\n                <span class=\"chip\">${this.renderItemIcon(row)}</span>\n                <span class=\"meta\">\n                  ${this.renderMarqueeUser(row.user, row.vip)}\n                  <span class=\"game-line\">on ${row.game}</span>\n                </span>\n                <span class=\"amt\"\n                  >+${formatWinAmount(row.amount, row.currency)}</span\n                >\n              </div>\n            `,\n          )}\n        </div>\n      </div>\n    `;\n  }\n\n  render() {\n    const items = this.section?.items ?? [];\n    if (!items.length) return nothing;\n\n    switch (this.variant) {\n      case 'ticker':\n        return this.renderTicker();\n      case 'hud':\n        return this.renderHud();\n      case 'belt':\n        return this.renderBelt();\n      case 'feed':\n        return this.renderFeed();\n      default:\n        return renderTemplate(this);\n    }\n  }\n}\n"],"names":["OsLeaderboardCasinoMarquee","LitElement","ACTIVE_MARQUEE_VARIANT","changed","next","isMarqueeVariant","item","index","parseMarqueeItem","count","i","trim","wins","win","row","formatWinAmount","html","iconName","iconService","url","winIcon","user","vip","renderPlayerName","amount","nothing","items","group","hero","keyed","top","bottom","topGroup","bottomGroup","repeat","renderTemplate","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","state","Component","OS_LEADERBOARD_CASINO_MARQUEE"],"mappings":"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"}
+{"version":3,"file":"marquee-section.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/marquee-section/marquee-section.ts"],"sourcesContent":["import { LitElement, html, nothing, type TemplateResult } from 'lit';\nimport { keyed } from 'lit/directives/keyed.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { property, state } from 'lit/decorators.js';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport { OS_LEADERBOARD_CASINO_MARQUEE } from '@os-leaderboard-casino/constants/tags.js';\nimport { osLeaderboardCasinoTheme } from '@os-leaderboard-casino/theme/index.js';\nimport { renderPlayerName } from '@os-leaderboard-casino/theme/vip-mark.js';\nimport type {\n  OsLeaderboardCasinoMarqueeItem,\n  OsLeaderboardCasinoMarqueeSection,\n} from '@os-leaderboard-casino/types/sections.js';\nimport { iconService } from '@os-leaderboard-casino/services/icon.service.js';\nimport { winIcon } from './components/win-icons.js';\nimport {\n  formatWinAmount,\n  parseMarqueeItem,\n  type ParsedMarqueeWin,\n} from './marquee-item.js';\nimport {\n  ACTIVE_MARQUEE_VARIANT,\n  isMarqueeVariant,\n  type MarqueeVariant,\n} from './marquee-variants.js';\nimport type { MarqueeSectionHost } from './marquee-section.host.js';\nimport renderTemplate from './marquee-section.html?lit-html';\nimport styles from './marquee-section.scss?inline';\n\ninterface FeedRow extends ParsedMarqueeWin {\n  key: number;\n}\n\n/** Infinitely-scrolling winners ticker — v0 variant ports + classic fallback. */\n@Component({ selector: OS_LEADERBOARD_CASINO_MARQUEE })\nexport class OsLeaderboardCasinoMarquee\n  extends LitElement\n  implements MarqueeSectionHost\n{\n  static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n  @property({ attribute: false })\n  section!: OsLeaderboardCasinoMarqueeSection;\n\n  @property({ attribute: 'variant' })\n  variant: MarqueeVariant = ACTIVE_MARQUEE_VARIANT;\n\n  @state()\n  private hudIndex = 0;\n\n  @state()\n  private feedRows: FeedRow[] = [];\n\n  private hudTimer?: ReturnType<typeof setInterval>;\n  private feedTimer?: ReturnType<typeof setInterval>;\n  private feedCursor = 0;\n  private feedKey = 0;\n\n  get speedSec(): number {\n    return this.section?.speedSec ?? 30;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.syncVariantAttribute();\n    this.startVariantTimers();\n  }\n\n  updated(changed: Map<string, unknown>): void {\n    if (changed.has('variant') || changed.has('section')) {\n      this.syncVariantAttribute();\n      this.stopVariantTimers();\n      this.startVariantTimers();\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.stopVariantTimers();\n    super.disconnectedCallback();\n  }\n\n  private syncVariantAttribute(): void {\n    const next = isMarqueeVariant(this.variant) ? this.variant : 'classic';\n    this.dataset.variant = next;\n  }\n\n  private parsedWins(): ParsedMarqueeWin[] {\n    return (this.section?.items ?? []).map((item, index) =>\n      parseMarqueeItem(item, index),\n    );\n  }\n\n  private startVariantTimers(): void {\n    if (this.variant === 'hud') {\n      this.hudIndex = 0;\n      this.hudTimer = setInterval(() => {\n        const count = this.section?.items?.length ?? 0;\n        if (count > 1) this.hudIndex = (this.hudIndex + 1) % count;\n      }, 3000);\n    }\n\n    if (this.variant === 'feed') {\n      this.feedRows = [];\n      this.feedCursor = 0;\n      this.feedKey = 0;\n      for (let i = 0; i < 4; i += 1) this.pushFeedRow(false);\n      this.feedTimer = setInterval(() => this.pushFeedRow(true), 2600);\n    }\n  }\n\n  private stopVariantTimers(): void {\n    if (this.hudTimer) clearInterval(this.hudTimer);\n    if (this.feedTimer) clearInterval(this.feedTimer);\n    this.hudTimer = undefined;\n    this.feedTimer = undefined;\n  }\n\n  private pushFeedRow(trim: boolean): void {\n    const wins = this.parsedWins();\n    if (!wins.length) return;\n    const win = wins[this.feedCursor % wins.length];\n    this.feedCursor += 1;\n    const row: FeedRow = { ...win, key: this.feedKey++ };\n    this.feedRows = trim\n      ? [row, ...this.feedRows].slice(0, 4)\n      : [row, ...this.feedRows];\n  }\n\n  private formatAmount(item: OsLeaderboardCasinoMarqueeItem): string {\n    return formatWinAmount(item.amount ?? null, item.currency ?? 'USD');\n  }\n\n  private renderSeparator() {\n    return html`<span class=\"sep\" aria-hidden=\"true\">·</span>`;\n  }\n\n  private renderItemIcon(win: ParsedMarqueeWin) {\n    if (win.gameId) {\n      const iconName = iconService.resolveGameIconName(win.gameId, 0);\n      const url = iconService.get(iconName).url!;\n      return html`<img src=${url} alt=${win.game} />`;\n    }\n    return winIcon(win.icon);\n  }\n\n  /** Uses shared VIP badge styles from theme (v0 outline tag). */\n  private renderMarqueeUser(user: string, vip?: boolean) {\n    return renderPlayerName(user, { vip });\n  }\n\n  private renderClassicItem(item: OsLeaderboardCasinoMarqueeItem, index: number) {\n    const win = parseMarqueeItem(item, index);\n    const amount = this.formatAmount(item);\n    return html`\n      <span class=\"item\">\n        <span class=\"icon\">${this.renderItemIcon(win)}</span>\n        <span class=\"txt\">\n          ${this.renderMarqueeUser(win.user, win.vip)}\n          <span class=\"verb\">won</span>\n          ${item.amount != null\n            ? html`<span class=\"amt\">${amount}</span>`\n            : nothing}\n          ${win.game\n            ? html`\n                <span class=\"tail\">\n                  <span class=\"on\">on</span>\n                  <span class=\"game\">${win.game}</span>\n                </span>\n              `\n            : nothing}\n        </span>\n      </span>\n    `;\n  }\n\n  private renderClassicGroup(items: OsLeaderboardCasinoMarqueeItem[]) {\n    return html`\n      <span class=\"group\" aria-hidden=\"true\">\n        ${items.map(\n          (item, index) => html`\n            ${this.renderClassicItem(item, index)}${this.renderSeparator()}\n          `,\n        )}\n      </span>\n    `;\n  }\n\n  renderTrack(): TemplateResult {\n    const items = this.section?.items ?? [];\n    return html`${this.renderClassicGroup(items)}${this.renderClassicGroup(items)}`;\n  }\n\n  renderHudLabel(): TemplateResult | typeof nothing {\n    return nothing;\n  }\n\n  private renderTickerWin(win: ParsedMarqueeWin) {\n    const amount = formatWinAmount(win.amount, win.currency);\n    return html`\n      <span class=\"win ${win.big ? 'big' : ''}\">\n        <span class=\"chip\">${this.renderItemIcon(win)}</span>\n        <span class=\"txt\">\n          ${this.renderMarqueeUser(win.user, win.vip)}\n          <span class=\"verb\">won</span>\n          ${amount ? html`<span class=\"amt\">${amount}</span>` : nothing}\n          ${win.game\n            ? html`\n                <span class=\"tail\">\n                  <span class=\"on\">on</span>\n                  <span class=\"game\">${win.game}</span>\n                </span>\n              `\n            : nothing}\n        </span>\n      </span>\n      ${this.renderSeparator()}\n    `;\n  }\n\n  private renderTicker() {\n    const wins = this.parsedWins();\n    const group = html`<div class=\"group\">\n      ${wins.map((win) => this.renderTickerWin(win))}\n    </div>`;\n    return html`\n      <div\n        class=\"marquee\"\n        style=\"--speed: ${this.speedSec}s\"\n        role=\"region\"\n        aria-label=\"Recent winners\"\n      >\n        <div class=\"track\">${group}${group}</div>\n      </div>\n    `;\n  }\n\n  private renderHudStreamGroup(wins: ParsedMarqueeWin[]) {\n    return html`<div class=\"group\">\n      ${wins.map(\n        (win) => html`\n          <span class=\"win ${win.vip ? 'vip' : ''}\">\n            ${this.renderItemIcon(win)}${this.renderMarqueeUser(win.user, win.vip)}<span class=\"amt\">${formatWinAmount(win.amount, win.currency)}</span\n            ><span class=\"sep-inline\">/</span><span class=\"game\">${win.game}</span>\n          </span>\n        `,\n      )}\n    </div>`;\n  }\n\n  private renderHud() {\n    const wins = this.parsedWins();\n    if (!wins.length) return nothing;\n    const hero = wins[this.hudIndex] ?? wins[0];\n    const group = this.renderHudStreamGroup(wins);\n\n    return html`\n      <div\n        class=\"marquee\"\n        style=\"--speed: ${this.speedSec}s\"\n        role=\"region\"\n        aria-label=\"Recent winners\"\n      >\n        <div class=\"hero\">\n          <span class=\"badge\">Latest win</span>\n          <span class=\"chip\">${this.renderItemIcon(hero)}</span>\n          ${keyed(\n            this.hudIndex,\n            html`<span class=\"info\">\n              <span class=\"who\">${this.renderMarqueeUser(hero.user, hero.vip)}</span>\n              <span class=\"val\">${formatWinAmount(hero.amount, hero.currency)}</span>\n            </span>`,\n          )}\n        </div>\n        <div class=\"stream\">\n          <div class=\"track\">${group}${group}</div>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderBeltGroup(wins: ParsedMarqueeWin[]) {\n    return html`<div class=\"group\">\n      ${wins.map(\n        (win) => html`\n          <span class=\"pill ${win.big ? 'big' : ''} ${win.vip ? 'vip' : ''}\">\n            <span class=\"chip\">${this.renderItemIcon(win)}</span>\n            ${this.renderMarqueeUser(win.user, win.vip)}\n            <span class=\"game\">${win.game}</span>\n            <span class=\"amt\">+${formatWinAmount(win.amount, win.currency)}</span>\n          </span>\n        `,\n      )}\n    </div>`;\n  }\n\n  private renderBelt() {\n    const wins = this.parsedWins();\n    const top = wins;\n    const bottom = [...wins].reverse();\n    const topGroup = this.renderBeltGroup(top);\n    const bottomGroup = this.renderBeltGroup(bottom);\n\n    return html`\n      <div\n        class=\"marquee\"\n        style=\"--speed: ${this.speedSec}s\"\n        role=\"region\"\n        aria-label=\"Recent winners\"\n      >\n        <div class=\"lane lane-a\">${topGroup}${topGroup}</div>\n        <div class=\"lane lane-b\">${bottomGroup}${bottomGroup}</div>\n      </div>\n    `;\n  }\n\n  private renderFeed() {\n    return html`\n      <div class=\"marquee feed-panel\" role=\"region\" aria-label=\"Recent winners\">\n        <div class=\"head\">\n          <span class=\"live\"><i></i> Live wins</span>\n          <small>updating in real time</small>\n        </div>\n        <div class=\"list\">\n          ${repeat(\n            this.feedRows,\n            (row) => row.key,\n            (row) => html`\n              <div class=\"row ${row.big ? 'big' : ''} ${row.vip ? 'vip' : ''}\">\n                <span class=\"chip\">${this.renderItemIcon(row)}</span>\n                <span class=\"meta\">\n                  ${this.renderMarqueeUser(row.user, row.vip)}\n                  <span class=\"game-line\">on ${row.game}</span>\n                </span>\n                <span class=\"amt\"\n                  >+${formatWinAmount(row.amount, row.currency)}</span\n                >\n              </div>\n            `,\n          )}\n        </div>\n      </div>\n    `;\n  }\n\n  render() {\n    const items = this.section?.items ?? [];\n    if (!items.length) return nothing;\n\n    switch (this.variant) {\n      case 'ticker':\n        return this.renderTicker();\n      case 'hud':\n        return this.renderHud();\n      case 'belt':\n        return this.renderBelt();\n      case 'feed':\n        return this.renderFeed();\n      default:\n        return renderTemplate(this);\n    }\n  }\n}\n"],"names":["OsLeaderboardCasinoMarquee","LitElement","ACTIVE_MARQUEE_VARIANT","changed","next","isMarqueeVariant","item","index","parseMarqueeItem","count","i","trim","wins","win","row","formatWinAmount","html","iconName","iconService","url","winIcon","user","vip","renderPlayerName","amount","nothing","items","group","hero","keyed","top","bottom","topGroup","bottomGroup","repeat","renderTemplate","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","state","Component","OS_LEADERBOARD_CASINO_MARQUEE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmCO,IAAMA,IAAN,cACGC,EAEV;AAAA,EAHO,cAAA;AAAA,UAAA,GAAA,SAAA,GAUL,KAAA,UAA0BC,GAG1B,KAAQ,WAAW,GAGnB,KAAQ,WAAsB,CAAA,GAI9B,KAAQ,aAAa,GACrB,KAAQ,UAAU;AAAA,EAAA;AAAA,EAElB,IAAI,WAAmB;AACrB,WAAO,KAAK,SAAS,YAAY;AAAA,EACnC;AAAA,EAEA,oBAA0B;AACxB,UAAM,kBAAA,GACN,KAAK,qBAAA,GACL,KAAK,mBAAA;AAAA,EACP;AAAA,EAEA,QAAQC,GAAqC;AAC3C,KAAIA,EAAQ,IAAI,SAAS,KAAKA,EAAQ,IAAI,SAAS,OACjD,KAAK,qBAAA,GACL,KAAK,kBAAA,GACL,KAAK,mBAAA;AAAA,EAET;AAAA,EAEA,uBAA6B;AAC3B,SAAK,kBAAA,GACL,MAAM,qBAAA;AAAA,EACR;AAAA,EAEQ,uBAA6B;AACnC,UAAMC,IAAOC,EAAiB,KAAK,OAAO,IAAI,KAAK,UAAU;AAC7D,SAAK,QAAQ,UAAUD;AAAA,EACzB;AAAA,EAEQ,aAAiC;AACvC,YAAQ,KAAK,SAAS,SAAS,CAAA,GAAI;AAAA,MAAI,CAACE,GAAMC,MAC5CC,EAAiBF,GAAMC,CAAK;AAAA,IAAA;AAAA,EAEhC;AAAA,EAEQ,qBAA2B;AASjC,QARI,KAAK,YAAY,UACnB,KAAK,WAAW,GAChB,KAAK,WAAW,YAAY,MAAM;AAChC,YAAME,IAAQ,KAAK,SAAS,OAAO,UAAU;AAC7C,MAAIA,IAAQ,MAAG,KAAK,YAAY,KAAK,WAAW,KAAKA;AAAA,IACvD,GAAG,GAAI,IAGL,KAAK,YAAY,QAAQ;AAC3B,WAAK,WAAW,CAAA,GAChB,KAAK,aAAa,GAClB,KAAK,UAAU;AACf,eAASC,IAAI,GAAGA,IAAI,GAAGA,KAAK,EAAG,MAAK,YAAY,EAAK;AACrD,WAAK,YAAY,YAAY,MAAM,KAAK,YAAY,EAAI,GAAG,IAAI;AAAA,IACjE;AAAA,EACF;AAAA,EAEQ,oBAA0B;AAChC,IAAI,KAAK,YAAU,cAAc,KAAK,QAAQ,GAC1C,KAAK,aAAW,cAAc,KAAK,SAAS,GAChD,KAAK,WAAW,QAChB,KAAK,YAAY;AAAA,EACnB;AAAA,EAEQ,YAAYC,GAAqB;AACvC,UAAMC,IAAO,KAAK,WAAA;AAClB,QAAI,CAACA,EAAK,OAAQ;AAClB,UAAMC,IAAMD,EAAK,KAAK,aAAaA,EAAK,MAAM;AAC9C,SAAK,cAAc;AACnB,UAAME,IAAe,EAAE,GAAGD,GAAK,KAAK,KAAK,UAAA;AACzC,SAAK,WAAWF,IACZ,CAACG,GAAK,GAAG,KAAK,QAAQ,EAAE,MAAM,GAAG,CAAC,IAClC,CAACA,GAAK,GAAG,KAAK,QAAQ;AAAA,EAC5B;AAAA,EAEQ,aAAaR,GAA8C;AACjE,WAAOS,EAAgBT,EAAK,UAAU,MAAMA,EAAK,YAAY,KAAK;AAAA,EACpE;AAAA,EAEQ,kBAAkB;AACxB,WAAOU;AAAAA,EACT;AAAA,EAEQ,eAAeH,GAAuB;AAC5C,QAAIA,EAAI,QAAQ;AACd,YAAMI,IAAWC,EAAY,oBAAoBL,EAAI,QAAQ,CAAC,GACxDM,IAAMD,EAAY,IAAID,CAAQ,EAAE;AACtC,aAAOD,aAAgBG,CAAG,QAAQN,EAAI,IAAI;AAAA,IAC5C;AACA,WAAOO,EAAQP,EAAI,IAAI;AAAA,EACzB;AAAA;AAAA,EAGQ,kBAAkBQ,GAAcC,GAAe;AACrD,WAAOC,EAAiBF,GAAM,EAAE,KAAAC,GAAK;AAAA,EACvC;AAAA,EAEQ,kBAAkBhB,GAAsCC,GAAe;AAC7E,UAAMM,IAAML,EAAiBF,GAAMC,CAAK,GAClCiB,IAAS,KAAK,aAAalB,CAAI;AACrC,WAAOU;AAAAA;AAAAA,6BAEkB,KAAK,eAAeH,CAAG,CAAC;AAAA;AAAA,YAEzC,KAAK,kBAAkBA,EAAI,MAAMA,EAAI,GAAG,CAAC;AAAA;AAAA,YAEzCP,EAAK,UAAU,OACbU,sBAAyBQ,CAAM,YAC/BC,CAAO;AAAA,YACTZ,EAAI,OACFG;AAAAA;AAAAA;AAAAA,uCAGyBH,EAAI,IAAI;AAAA;AAAA,kBAGjCY,CAAO;AAAA;AAAA;AAAA;AAAA,EAInB;AAAA,EAEQ,mBAAmBC,GAAyC;AAClE,WAAOV;AAAAA;AAAAA,UAEDU,EAAM;AAAA,MACN,CAACpB,GAAMC,MAAUS;AAAAA,cACb,KAAK,kBAAkBV,GAAMC,CAAK,CAAC,GAAG,KAAK,iBAAiB;AAAA;AAAA,IAAA,CAEjE;AAAA;AAAA;AAAA,EAGP;AAAA,EAEA,cAA8B;AAC5B,UAAMmB,IAAQ,KAAK,SAAS,SAAS,CAAA;AACrC,WAAOV,IAAO,KAAK,mBAAmBU,CAAK,CAAC,GAAG,KAAK,mBAAmBA,CAAK,CAAC;AAAA,EAC/E;AAAA,EAEA,iBAAkD;AAChD,WAAOD;AAAAA,EACT;AAAA,EAEQ,gBAAgBZ,GAAuB;AAC7C,UAAMW,IAAST,EAAgBF,EAAI,QAAQA,EAAI,QAAQ;AACvD,WAAOG;AAAAA,yBACcH,EAAI,MAAM,QAAQ,EAAE;AAAA,6BAChB,KAAK,eAAeA,CAAG,CAAC;AAAA;AAAA,YAEzC,KAAK,kBAAkBA,EAAI,MAAMA,EAAI,GAAG,CAAC;AAAA;AAAA,YAEzCW,IAASR,sBAAyBQ,CAAM,YAAYC,CAAO;AAAA,YAC3DZ,EAAI,OACFG;AAAAA;AAAAA;AAAAA,uCAGyBH,EAAI,IAAI;AAAA;AAAA,kBAGjCY,CAAO;AAAA;AAAA;AAAA,QAGb,KAAK,iBAAiB;AAAA;AAAA,EAE5B;AAAA,EAEQ,eAAe;AACrB,UAAMb,IAAO,KAAK,WAAA,GACZe,IAAQX;AAAAA,QACVJ,EAAK,IAAI,CAACC,MAAQ,KAAK,gBAAgBA,CAAG,CAAC,CAAC;AAAA;AAEhD,WAAOG;AAAAA;AAAAA;AAAAA,0BAGe,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,6BAIVW,CAAK,GAAGA,CAAK;AAAA;AAAA;AAAA,EAGxC;AAAA,EAEQ,qBAAqBf,GAA0B;AACrD,WAAOI;AAAAA,QACHJ,EAAK;AAAA,MACL,CAACC,MAAQG;AAAAA,6BACYH,EAAI,MAAM,QAAQ,EAAE;AAAA,cACnC,KAAK,eAAeA,CAAG,CAAC,GAAG,KAAK,kBAAkBA,EAAI,MAAMA,EAAI,GAAG,CAAC,qBAAqBE,EAAgBF,EAAI,QAAQA,EAAI,QAAQ,CAAC;AAAA,mEAC7EA,EAAI,IAAI;AAAA;AAAA;AAAA,IAAA,CAGpE;AAAA;AAAA,EAEL;AAAA,EAEQ,YAAY;AAClB,UAAMD,IAAO,KAAK,WAAA;AAClB,QAAI,CAACA,EAAK,OAAQ,QAAOa;AACzB,UAAMG,IAAOhB,EAAK,KAAK,QAAQ,KAAKA,EAAK,CAAC,GACpCe,IAAQ,KAAK,qBAAqBf,CAAI;AAE5C,WAAOI;AAAAA;AAAAA;AAAAA,0BAGe,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAMR,KAAK,eAAeY,CAAI,CAAC;AAAA,YAC5CC;AAAAA,MACA,KAAK;AAAA,MACLb;AAAAA,kCACsB,KAAK,kBAAkBY,EAAK,MAAMA,EAAK,GAAG,CAAC;AAAA,kCAC3Cb,EAAgBa,EAAK,QAAQA,EAAK,QAAQ,CAAC;AAAA;AAAA,IAAA,CAElE;AAAA;AAAA;AAAA,+BAGoBD,CAAK,GAAGA,CAAK;AAAA;AAAA;AAAA;AAAA,EAI1C;AAAA,EAEQ,gBAAgBf,GAA0B;AAChD,WAAOI;AAAAA,QACHJ,EAAK;AAAA,MACL,CAACC,MAAQG;AAAAA,8BACaH,EAAI,MAAM,QAAQ,EAAE,IAAIA,EAAI,MAAM,QAAQ,EAAE;AAAA,iCACzC,KAAK,eAAeA,CAAG,CAAC;AAAA,cAC3C,KAAK,kBAAkBA,EAAI,MAAMA,EAAI,GAAG,CAAC;AAAA,iCACtBA,EAAI,IAAI;AAAA,iCACRE,EAAgBF,EAAI,QAAQA,EAAI,QAAQ,CAAC;AAAA;AAAA;AAAA,IAAA,CAGnE;AAAA;AAAA,EAEL;AAAA,EAEQ,aAAa;AACnB,UAAMD,IAAO,KAAK,WAAA,GACZkB,IAAMlB,GACNmB,IAAS,CAAC,GAAGnB,CAAI,EAAE,QAAA,GACnBoB,IAAW,KAAK,gBAAgBF,CAAG,GACnCG,IAAc,KAAK,gBAAgBF,CAAM;AAE/C,WAAOf;AAAAA;AAAAA;AAAAA,0BAGe,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,mCAIJgB,CAAQ,GAAGA,CAAQ;AAAA,mCACnBC,CAAW,GAAGA,CAAW;AAAA;AAAA;AAAA,EAG1D;AAAA,EAEQ,aAAa;AACnB,WAAOjB;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,YAOCkB;AAAAA,MACA,KAAK;AAAA,MACL,CAACpB,MAAQA,EAAI;AAAA,MACb,CAACA,MAAQE;AAAAA,gCACWF,EAAI,MAAM,QAAQ,EAAE,IAAIA,EAAI,MAAM,QAAQ,EAAE;AAAA,qCACvC,KAAK,eAAeA,CAAG,CAAC;AAAA;AAAA,oBAEzC,KAAK,kBAAkBA,EAAI,MAAMA,EAAI,GAAG,CAAC;AAAA,+CACdA,EAAI,IAAI;AAAA;AAAA;AAAA,sBAGjCC,EAAgBD,EAAI,QAAQA,EAAI,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,IAAA,CAIpD;AAAA;AAAA;AAAA;AAAA,EAIT;AAAA,EAEA,SAAS;AAEP,QAAI,EADU,KAAK,SAAS,SAAS,CAAA,GAC1B,OAAQ,QAAOW;AAE1B,YAAQ,KAAK,SAAA;AAAA,MACX,KAAK;AACH,eAAO,KAAK,aAAA;AAAA,MACd,KAAK;AACH,eAAO,KAAK,UAAA;AAAA,MACd,KAAK;AACH,eAAO,KAAK,WAAA;AAAA,MACd,KAAK;AACH,eAAO,KAAK,WAAA;AAAA,MACd;AACE,eAAOU,EAAe,IAAI;AAAA,IAAA;AAAA,EAEhC;AACF;AAtUanC,EAIJ,SAAS,CAACoC,GAA0BC,EAAKC,CAAM,CAAC;AAGvDC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GANnBxC,EAOX,WAAA,WAAA,CAAA;AAGAuC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,UAAA,CAAW;AAAA,GATvBxC,EAUX,WAAA,WAAA,CAAA;AAGQuC,EAAA;AAAA,EADPE,EAAA;AAAM,GAZIzC,EAaH,WAAA,YAAA,CAAA;AAGAuC,EAAA;AAAA,EADPE,EAAA;AAAM,GAfIzC,EAgBH,WAAA,YAAA,CAAA;AAhBGA,IAANuC,EAAA;AAAA,EADNG,EAAU,EAAE,UAAUC,EAAA,CAA+B;AAAA,GACzC3C,CAAA;"}

package/dist/components/os-leaderboard-casino/sections/prize-section/components/medal-coin/medal-coin.js

@@ -1,17 +1,19 @@
-import { LitElement as c, svg as m, html as y } from "lit";
-import { property as a } from "lit/decorators.js";
+import "../../../../../../shared/vendor/lit-reactive-element-reactive-element.js";
+import { svg as m, html as c } from "../../../../../../shared/vendor/lit-html-lit-html.js";
+import { LitElement as y } from "../../../../../../shared/vendor/lit-element-lit-element.js";
+import { property as a } from "../../../../../../shared/vendor/lit-reactive-element-property.js";
 import { Component as f } from "../../../../../../shared/lib/lit/component.js";
 import { scss as d } from "../../../../../../shared/lib/lit/scss.js";
 import { OS_LEADERBOARD_CASINO_MEDAL_COIN as h } from "../../../../constants/tags.js";
-import { osLeaderboardCasinoTheme as v } from "../../../../theme/styles.js";
-import "lit/directives/unsafe-svg.js";
-import b from "./medal-coin.scss.js";
+import { osLeaderboardCasinoTheme as b } from "../../../../theme/styles.js";
+import "../../../../../../shared/vendor/lit-html-unsafe-svg.js";
+import v from "./medal-coin.scss.js";
 var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, t = (i, o, l, s) => {
   for (var e = s > 1 ? void 0 : s ? x(o, l) : o, p = i.length - 1, n; p >= 0; p--)
     (n = i[p]) && (e = (s ? n(o, l, e) : n(e)) || e);
   return s && e && g(o, l, e), e;
 };
-let r = class extends c {
+let r = class extends y {
   constructor() {
     super(...arguments), this.variant = "gold", this.rank = 1, this.size = 52;
   }
@@ -26,7 +28,7 @@ let r = class extends c {
   }
   render() {
     const i = this.displayLabel;
-    return y`
+    return c`
       <svg viewBox="0 0 72 72" role="img" aria-label=${this.medalAriaLabel}>
         <circle cx="36" cy="36" r="34" fill="var(--coin-edge)" />
         <circle cx="36" cy="34" r="32" fill="var(--coin-face)" />
@@ -49,7 +51,7 @@ let r = class extends c {
     `;
   }
 };
-r.styles = [v, d(b)];
+r.styles = [b, d(v)];
 t([
   a({ type: String, reflect: !0 })
 ], r.prototype, "variant", 2);

package/dist/components/os-leaderboard-casino/sections/prize-section/components/medal-coin/medal-coin.js.map

@@ -1 +1 @@
-{"version":3,"file":"medal-coin.js","sources":["../../../../../../../src/components/os-leaderboard-casino/sections/prize-section/components/medal-coin/medal-coin.ts"],"sourcesContent":["import { LitElement, html, svg } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport { OS_LEADERBOARD_CASINO_MEDAL_COIN } from '@os-leaderboard-casino/constants/tags.js';\nimport { osLeaderboardCasinoTheme } from '@os-leaderboard-casino/theme/index.js';\nimport styles from './medal-coin.scss?inline';\n\nexport type MedalCoinVariant = 'gold' | 'silver' | 'bronze';\n\n/** Layered rank coin for podium slots — themed via glam CSS tokens. */\n@Component({ selector: OS_LEADERBOARD_CASINO_MEDAL_COIN })\nexport class OsLeaderboardCasinoMedalCoin extends LitElement {\n  static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n  @property({ type: String, reflect: true })\n  variant: MedalCoinVariant = 'gold';\n\n  @property({ type: Number })\n  rank = 1;\n\n  /** Optional label override (defaults to rank number). */\n  @property({ type: String })\n  label?: string;\n\n  /** Pixel diameter — also sets `--coin-size` on the host. */\n  @property({ type: Number })\n  size = 52;\n\n  protected override willUpdate(): void {\n    this.style.setProperty('--coin-size', `${this.size}px`);\n  }\n\n  private get displayLabel(): string {\n    return this.label ?? String(this.rank);\n  }\n\n  private get medalAriaLabel(): string {\n    return this.label ?? `Rank ${this.rank} medal`;\n  }\n\n  render() {\n    const text = this.displayLabel;\n    return html`\n      <svg viewBox=\"0 0 72 72\" role=\"img\" aria-label=${this.medalAriaLabel}>\n        <circle cx=\"36\" cy=\"36\" r=\"34\" fill=\"var(--coin-edge)\" />\n        <circle cx=\"36\" cy=\"34\" r=\"32\" fill=\"var(--coin-face)\" />\n        <circle\n          cx=\"36\"\n          cy=\"34\"\n          r=\"25\"\n          fill=\"none\"\n          stroke=\"var(--coin-ring)\"\n          stroke-width=\"2\"\n          opacity=\"0.55\"\n        />\n        ${svg`<text\n          class=\"rank-text\"\n          x=\"36\"\n          y=\"44\"\n          text-anchor=\"middle\"\n          >${text}</text>`}\n      </svg>\n    `;\n  }\n}\n"],"names":["OsLeaderboardCasinoMedalCoin","LitElement","text","html","svg","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","Component","OS_LEADERBOARD_CASINO_MEDAL_COIN"],"mappings":";;;;;;;;;;;;;AAYO,IAAMA,IAAN,cAA2CC,EAAW;AAAA,EAAtD,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,UAA4B,QAG5B,KAAA,OAAO,GAQP,KAAA,OAAO;AAAA,EAAA;AAAA,EAEY,aAAmB;AACpC,SAAK,MAAM,YAAY,eAAe,GAAG,KAAK,IAAI,IAAI;AAAA,EACxD;AAAA,EAEA,IAAY,eAAuB;AACjC,WAAO,KAAK,SAAS,OAAO,KAAK,IAAI;AAAA,EACvC;AAAA,EAEA,IAAY,iBAAyB;AACnC,WAAO,KAAK,SAAS,QAAQ,KAAK,IAAI;AAAA,EACxC;AAAA,EAEA,SAAS;AACP,UAAMC,IAAO,KAAK;AAClB,WAAOC;AAAA,uDAC4C,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAYhEC;AAAA;AAAA;AAAA;AAAA;AAAA,aAKGF,CAAI,SAAS;AAAA;AAAA;AAAA,EAGxB;AACF;AArDaF,EACJ,SAAS,CAACK,GAA0BC,EAAKC,CAAM,CAAC;AAGvDC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAH9BT,EAIX,WAAA,WAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANfT,EAOX,WAAA,QAAA,CAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAVfT,EAWX,WAAA,SAAA,CAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAdfT,EAeX,WAAA,QAAA,CAAA;AAfWA,IAANQ,EAAA;AAAA,EADNE,EAAU,EAAE,UAAUC,EAAA,CAAkC;AAAA,GAC5CX,CAAA;"}
+{"version":3,"file":"medal-coin.js","sources":["../../../../../../../src/components/os-leaderboard-casino/sections/prize-section/components/medal-coin/medal-coin.ts"],"sourcesContent":["import { LitElement, html, svg } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport { OS_LEADERBOARD_CASINO_MEDAL_COIN } from '@os-leaderboard-casino/constants/tags.js';\nimport { osLeaderboardCasinoTheme } from '@os-leaderboard-casino/theme/index.js';\nimport styles from './medal-coin.scss?inline';\n\nexport type MedalCoinVariant = 'gold' | 'silver' | 'bronze';\n\n/** Layered rank coin for podium slots — themed via glam CSS tokens. */\n@Component({ selector: OS_LEADERBOARD_CASINO_MEDAL_COIN })\nexport class OsLeaderboardCasinoMedalCoin extends LitElement {\n  static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n  @property({ type: String, reflect: true })\n  variant: MedalCoinVariant = 'gold';\n\n  @property({ type: Number })\n  rank = 1;\n\n  /** Optional label override (defaults to rank number). */\n  @property({ type: String })\n  label?: string;\n\n  /** Pixel diameter — also sets `--coin-size` on the host. */\n  @property({ type: Number })\n  size = 52;\n\n  protected override willUpdate(): void {\n    this.style.setProperty('--coin-size', `${this.size}px`);\n  }\n\n  private get displayLabel(): string {\n    return this.label ?? String(this.rank);\n  }\n\n  private get medalAriaLabel(): string {\n    return this.label ?? `Rank ${this.rank} medal`;\n  }\n\n  render() {\n    const text = this.displayLabel;\n    return html`\n      <svg viewBox=\"0 0 72 72\" role=\"img\" aria-label=${this.medalAriaLabel}>\n        <circle cx=\"36\" cy=\"36\" r=\"34\" fill=\"var(--coin-edge)\" />\n        <circle cx=\"36\" cy=\"34\" r=\"32\" fill=\"var(--coin-face)\" />\n        <circle\n          cx=\"36\"\n          cy=\"34\"\n          r=\"25\"\n          fill=\"none\"\n          stroke=\"var(--coin-ring)\"\n          stroke-width=\"2\"\n          opacity=\"0.55\"\n        />\n        ${svg`<text\n          class=\"rank-text\"\n          x=\"36\"\n          y=\"44\"\n          text-anchor=\"middle\"\n          >${text}</text>`}\n      </svg>\n    `;\n  }\n}\n"],"names":["OsLeaderboardCasinoMedalCoin","LitElement","text","html","svg","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","Component","OS_LEADERBOARD_CASINO_MEDAL_COIN"],"mappings":";;;;;;;;;;;;;;;AAYO,IAAMA,IAAN,cAA2CC,EAAW;AAAA,EAAtD,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,UAA4B,QAG5B,KAAA,OAAO,GAQP,KAAA,OAAO;AAAA,EAAA;AAAA,EAEY,aAAmB;AACpC,SAAK,MAAM,YAAY,eAAe,GAAG,KAAK,IAAI,IAAI;AAAA,EACxD;AAAA,EAEA,IAAY,eAAuB;AACjC,WAAO,KAAK,SAAS,OAAO,KAAK,IAAI;AAAA,EACvC;AAAA,EAEA,IAAY,iBAAyB;AACnC,WAAO,KAAK,SAAS,QAAQ,KAAK,IAAI;AAAA,EACxC;AAAA,EAEA,SAAS;AACP,UAAMC,IAAO,KAAK;AAClB,WAAOC;AAAAA,uDAC4C,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAYhEC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,aAKGF,CAAI,SAAS;AAAA;AAAA;AAAA,EAGxB;AACF;AArDaF,EACJ,SAAS,CAACK,GAA0BC,EAAKC,CAAM,CAAC;AAGvDC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAH9BT,EAIX,WAAA,WAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANfT,EAOX,WAAA,QAAA,CAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAVfT,EAWX,WAAA,SAAA,CAAA;AAIAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAdfT,EAeX,WAAA,QAAA,CAAA;AAfWA,IAANQ,EAAA;AAAA,EADNE,EAAU,EAAE,UAAUC,EAAA,CAAkC;AAAA,GAC5CX,CAAA;"}

package/dist/components/os-leaderboard-casino/sections/prize-section/prize-section.html.js

@@ -1,5 +1,7 @@
-import { html as i } from "lit";
-function t(e) {
+import "../../../../shared/vendor/lit-reactive-element-reactive-element.js";
+import { html as i } from "../../../../shared/vendor/lit-html-lit-html.js";
+import "../../../../shared/vendor/lit-element-lit-element.js";
+function d(e) {
   return i`<section>
   <div class="section-header">
     <h2 class="section-title">${e.sectionTitle}</h2>
@@ -13,6 +15,6 @@ function t(e) {
 `;
 }
 export {
-  t as default
+  d as default
 };
 //# sourceMappingURL=prize-section.html.js.map

package/dist/components/os-leaderboard-casino/sections/prize-section/prize-section.html.js.map

@@ -1 +1 @@
-{"version":3,"file":"prize-section.html.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/prize-section/prize-section.html?lit-html"],"sourcesContent":["\nimport { html } from 'lit';\n\nexport default function render(host) {\n  return html`<section>\n  <div class=\"section-header\">\n    <h2 class=\"section-title\">${host.sectionTitle}</h2>\n    <span class=\"strategy\" ?hidden=${!host.showStrategy}>${host.strategyLabel}</span>\n  </div>\n\n  <div class=\"podium\">${host.renderPodium()}</div>\n\n  <div class=\"list\" ?hidden=${!host.hasTierList}>${host.renderTierList()}</div>\n</section>\n`;\n}\n"],"names":["render","host","html"],"mappings":";AAGe,SAASA,EAAOC,GAAM;AACnC,SAAOC;AAAA;AAAA,gCAEuBD,EAAK,YAAY;AAAA,qCACZ,CAACA,EAAK,YAAY,IAAIA,EAAK,aAAa;AAAA;AAAA;AAAA,wBAGrDA,EAAK,cAAc;AAAA;AAAA,8BAEb,CAACA,EAAK,WAAW,IAAIA,EAAK,eAAc,CAAE;AAAA;AAAA;AAGxE;"}
+{"version":3,"file":"prize-section.html.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/prize-section/prize-section.html?lit-html"],"sourcesContent":["\nimport { html } from 'lit';\n\nexport default function render(host) {\n  return html`<section>\n  <div class=\"section-header\">\n    <h2 class=\"section-title\">${host.sectionTitle}</h2>\n    <span class=\"strategy\" ?hidden=${!host.showStrategy}>${host.strategyLabel}</span>\n  </div>\n\n  <div class=\"podium\">${host.renderPodium()}</div>\n\n  <div class=\"list\" ?hidden=${!host.hasTierList}>${host.renderTierList()}</div>\n</section>\n`;\n}\n"],"names":["render","host","html"],"mappings":";;;AAGe,SAASA,EAAOC,GAAM;AACnC,SAAOC;AAAAA;AAAAA,gCAEuBD,EAAK,YAAY;AAAA,qCACZ,CAACA,EAAK,YAAY,IAAIA,EAAK,aAAa;AAAA;AAAA;AAAA,wBAGrDA,EAAK,cAAc;AAAA;AAAA,8BAEb,CAACA,EAAK,WAAW,IAAIA,EAAK,eAAc,CAAE;AAAA;AAAA;AAGxE;"}

package/dist/components/os-leaderboard-casino/sections/prize-section/prize-section.js

@@ -1,5 +1,7 @@
-import { LitElement as f, html as n, nothing as a } from "lit";
-import { property as P } from "lit/decorators.js";
+import "../../../../shared/vendor/lit-reactive-element-reactive-element.js";
+import { html as n, nothing as a } from "../../../../shared/vendor/lit-html-lit-html.js";
+import { LitElement as f } from "../../../../shared/vendor/lit-element-lit-element.js";
+import { property as P } from "../../../../shared/vendor/lit-reactive-element-property.js";
 import { Component as p } from "../../../../shared/lib/lit/component.js";
 import { scss as v } from "../../../../shared/lib/lit/scss.js";
 import { DEFAULT_PRIZE_TITLE as b } from "../../constants/defaults.js";

package/dist/components/os-leaderboard-casino/sections/prize-section/prize-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"prize-section.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/prize-section/prize-section.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport { DEFAULT_PRIZE_TITLE } from '@os-leaderboard-casino/constants/defaults.js';\nimport { OS_LEADERBOARD_CASINO_PRIZE } from '@os-leaderboard-casino/constants/tags.js';\nimport { osLeaderboardCasinoTheme } from '@os-leaderboard-casino/theme/index.js';\nimport {\n  labelText,\n  type QuizPrize,\n} from '@os-leaderboard-casino/types/data.js';\nimport { iconService } from '@os-leaderboard-casino/services/icon.service.js';\nimport { OS_LEADERBOARD_CASINO_PRIZE_CLICK } from '@os-leaderboard-casino/types/events.js';\nimport type { OsLeaderboardCasinoPrizeSection } from '@os-leaderboard-casino/types/sections.js';\nimport type { PrizeSectionHost } from './prize-section.host.js';\nimport './components/medal-coin/medal-coin.js';\nimport renderTemplate from './prize-section.html?lit-html';\nimport styles from './prize-section.scss?inline';\n\nfunction rankRange(prize: QuizPrize): string {\n  return prize.rankFrom === prize.rankTo\n    ? `#${prize.rankFrom}`\n    : `#${prize.rankFrom}–${prize.rankTo}`;\n}\n\nfunction podiumPrizeForRank(\n  prizes: QuizPrize[],\n  rank: 1 | 2 | 3,\n): QuizPrize | undefined {\n  return prizes.find(\n    (prize) => prize.rankFrom === rank && prize.rankTo === rank,\n  );\n}\n\nfunction tierPrizesFrom(prizes: QuizPrize[]): QuizPrize[] {\n  return prizes.filter(\n    (prize) =>\n      !(\n        prize.rankFrom === prize.rankTo &&\n        prize.rankFrom >= 1 &&\n        prize.rankFrom <= 3\n      ),\n  );\n}\n\n/** Top-3 metallic podium showcase + remaining prize tiers. */\n@Component({ selector: OS_LEADERBOARD_CASINO_PRIZE })\nexport class OsLeaderboardCasinoPrize\n  extends LitElement\n  implements PrizeSectionHost\n{\n  static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n  @property({ attribute: false })\n  section!: OsLeaderboardCasinoPrizeSection;\n\n  private restPrizes: QuizPrize[] = [];\n  private secondPrize?: QuizPrize;\n  private firstPrize?: QuizPrize;\n  private thirdPrize?: QuizPrize;\n\n  get sectionTitle(): string {\n    return this.section?.title ?? DEFAULT_PRIZE_TITLE;\n  }\n\n  get showStrategy(): boolean {\n    return Boolean(this.section?.allocationStrategy);\n  }\n\n  get strategyLabel(): string {\n    return this.section?.allocationStrategy === 'SPLIT_PRIZE'\n      ? 'Split Prize'\n      : 'Best Prize';\n  }\n\n  get hasTierList(): boolean {\n    return this.restPrizes.length > 0;\n  }\n\n  willUpdate() {\n    const prizes = this.section?.prizePackage?.prizes ?? [];\n    this.firstPrize = podiumPrizeForRank(prizes, 1);\n    this.secondPrize = podiumPrizeForRank(prizes, 2);\n    this.thirdPrize = podiumPrizeForRank(prizes, 3);\n    this.restPrizes = tierPrizesFrom(prizes).sort(\n      (left, right) => left.rankFrom - right.rankFrom,\n    );\n  }\n\n  private onPrizeClick(prize: QuizPrize) {\n    this.dispatchEvent(\n      new CustomEvent(OS_LEADERBOARD_CASINO_PRIZE_CLICK, {\n        detail: { prize },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private formatValue(prize: QuizPrize): string {\n    if (prize.value == null) return '';\n    try {\n      return new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: prize.currency ?? 'USD',\n        maximumFractionDigits: 0,\n      }).format(prize.value);\n    } catch {\n      return `${prize.value} ${prize.currency ?? ''}`.trim();\n    }\n  }\n\n  private renderPodiumSlot(\n    prize: QuizPrize,\n    place: 'first' | 'second' | 'third',\n  ) {\n    const variants = {\n      first: 'gold',\n      second: 'silver',\n      third: 'bronze',\n    } as const;\n    const ranks = { first: 1, second: 2, third: 3 };\n    const labels = {\n      first: 'Champion',\n      second: '2nd place',\n      third: '3rd place',\n    };\n    const coinSize = place === 'first' ? 68 : 52;\n    return html`\n      <button class=\"slot ${place}\" @click=${() => this.onPrizeClick(prize)}>\n        <div class=\"coin\">\n          <os-leaderboard-casino-medal-coin\n            variant=${variants[place]}\n            rank=${ranks[place]}\n            size=${coinSize}\n          ></os-leaderboard-casino-medal-coin>\n        </div>\n        <div class=\"place\">${labels[place]}</div>\n        <div class=\"name\">${labelText(prize.label)}</div>\n        <div class=\"value\">${this.formatValue(prize)}</div>\n      </button>\n    `;\n  }\n\n  renderPodium() {\n    return html`\n      ${this.secondPrize\n        ? this.renderPodiumSlot(this.secondPrize, 'second')\n        : nothing}\n      ${this.firstPrize\n        ? this.renderPodiumSlot(this.firstPrize, 'first')\n        : nothing}\n      ${this.thirdPrize\n        ? this.renderPodiumSlot(this.thirdPrize, 'third')\n        : nothing}\n    `;\n  }\n\n  renderTierList() {\n    return html`${this.restPrizes.map(\n      (prize) => html`\n        <button class=\"tier\" @click=${() => this.onPrizeClick(prize)}>\n          <span class=\"icon\">${iconService.get(iconService.resolvePrizeIconName(prize.label)).svg()}</span>\n          <span class=\"info\">\n            <span class=\"name\">${labelText(prize.label)}</span>\n            <span class=\"range\">Rank ${rankRange(prize)}</span>\n          </span>\n          <span class=\"value\">${this.formatValue(prize)}</span>\n        </button>\n      `,\n    )}`;\n  }\n\n  render() {\n    const prizes = this.section?.prizePackage?.prizes ?? [];\n    if (!prizes.length) return nothing;\n    return renderTemplate(this);\n  }\n}\n"],"names":["rankRange","prize","podiumPrizeForRank","prizes","rank","tierPrizesFrom","OsLeaderboardCasinoPrize","LitElement","DEFAULT_PRIZE_TITLE","left","right","OS_LEADERBOARD_CASINO_PRIZE_CLICK","place","variants","ranks","labels","coinSize","html","labelText","nothing","iconService","renderTemplate","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","Component","OS_LEADERBOARD_CASINO_PRIZE"],"mappings":"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"}
+{"version":3,"file":"prize-section.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/prize-section/prize-section.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport { DEFAULT_PRIZE_TITLE } from '@os-leaderboard-casino/constants/defaults.js';\nimport { OS_LEADERBOARD_CASINO_PRIZE } from '@os-leaderboard-casino/constants/tags.js';\nimport { osLeaderboardCasinoTheme } from '@os-leaderboard-casino/theme/index.js';\nimport {\n  labelText,\n  type QuizPrize,\n} from '@os-leaderboard-casino/types/data.js';\nimport { iconService } from '@os-leaderboard-casino/services/icon.service.js';\nimport { OS_LEADERBOARD_CASINO_PRIZE_CLICK } from '@os-leaderboard-casino/types/events.js';\nimport type { OsLeaderboardCasinoPrizeSection } from '@os-leaderboard-casino/types/sections.js';\nimport type { PrizeSectionHost } from './prize-section.host.js';\nimport './components/medal-coin/medal-coin.js';\nimport renderTemplate from './prize-section.html?lit-html';\nimport styles from './prize-section.scss?inline';\n\nfunction rankRange(prize: QuizPrize): string {\n  return prize.rankFrom === prize.rankTo\n    ? `#${prize.rankFrom}`\n    : `#${prize.rankFrom}–${prize.rankTo}`;\n}\n\nfunction podiumPrizeForRank(\n  prizes: QuizPrize[],\n  rank: 1 | 2 | 3,\n): QuizPrize | undefined {\n  return prizes.find(\n    (prize) => prize.rankFrom === rank && prize.rankTo === rank,\n  );\n}\n\nfunction tierPrizesFrom(prizes: QuizPrize[]): QuizPrize[] {\n  return prizes.filter(\n    (prize) =>\n      !(\n        prize.rankFrom === prize.rankTo &&\n        prize.rankFrom >= 1 &&\n        prize.rankFrom <= 3\n      ),\n  );\n}\n\n/** Top-3 metallic podium showcase + remaining prize tiers. */\n@Component({ selector: OS_LEADERBOARD_CASINO_PRIZE })\nexport class OsLeaderboardCasinoPrize\n  extends LitElement\n  implements PrizeSectionHost\n{\n  static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n  @property({ attribute: false })\n  section!: OsLeaderboardCasinoPrizeSection;\n\n  private restPrizes: QuizPrize[] = [];\n  private secondPrize?: QuizPrize;\n  private firstPrize?: QuizPrize;\n  private thirdPrize?: QuizPrize;\n\n  get sectionTitle(): string {\n    return this.section?.title ?? DEFAULT_PRIZE_TITLE;\n  }\n\n  get showStrategy(): boolean {\n    return Boolean(this.section?.allocationStrategy);\n  }\n\n  get strategyLabel(): string {\n    return this.section?.allocationStrategy === 'SPLIT_PRIZE'\n      ? 'Split Prize'\n      : 'Best Prize';\n  }\n\n  get hasTierList(): boolean {\n    return this.restPrizes.length > 0;\n  }\n\n  willUpdate() {\n    const prizes = this.section?.prizePackage?.prizes ?? [];\n    this.firstPrize = podiumPrizeForRank(prizes, 1);\n    this.secondPrize = podiumPrizeForRank(prizes, 2);\n    this.thirdPrize = podiumPrizeForRank(prizes, 3);\n    this.restPrizes = tierPrizesFrom(prizes).sort(\n      (left, right) => left.rankFrom - right.rankFrom,\n    );\n  }\n\n  private onPrizeClick(prize: QuizPrize) {\n    this.dispatchEvent(\n      new CustomEvent(OS_LEADERBOARD_CASINO_PRIZE_CLICK, {\n        detail: { prize },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private formatValue(prize: QuizPrize): string {\n    if (prize.value == null) return '';\n    try {\n      return new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: prize.currency ?? 'USD',\n        maximumFractionDigits: 0,\n      }).format(prize.value);\n    } catch {\n      return `${prize.value} ${prize.currency ?? ''}`.trim();\n    }\n  }\n\n  private renderPodiumSlot(\n    prize: QuizPrize,\n    place: 'first' | 'second' | 'third',\n  ) {\n    const variants = {\n      first: 'gold',\n      second: 'silver',\n      third: 'bronze',\n    } as const;\n    const ranks = { first: 1, second: 2, third: 3 };\n    const labels = {\n      first: 'Champion',\n      second: '2nd place',\n      third: '3rd place',\n    };\n    const coinSize = place === 'first' ? 68 : 52;\n    return html`\n      <button class=\"slot ${place}\" @click=${() => this.onPrizeClick(prize)}>\n        <div class=\"coin\">\n          <os-leaderboard-casino-medal-coin\n            variant=${variants[place]}\n            rank=${ranks[place]}\n            size=${coinSize}\n          ></os-leaderboard-casino-medal-coin>\n        </div>\n        <div class=\"place\">${labels[place]}</div>\n        <div class=\"name\">${labelText(prize.label)}</div>\n        <div class=\"value\">${this.formatValue(prize)}</div>\n      </button>\n    `;\n  }\n\n  renderPodium() {\n    return html`\n      ${this.secondPrize\n        ? this.renderPodiumSlot(this.secondPrize, 'second')\n        : nothing}\n      ${this.firstPrize\n        ? this.renderPodiumSlot(this.firstPrize, 'first')\n        : nothing}\n      ${this.thirdPrize\n        ? this.renderPodiumSlot(this.thirdPrize, 'third')\n        : nothing}\n    `;\n  }\n\n  renderTierList() {\n    return html`${this.restPrizes.map(\n      (prize) => html`\n        <button class=\"tier\" @click=${() => this.onPrizeClick(prize)}>\n          <span class=\"icon\">${iconService.get(iconService.resolvePrizeIconName(prize.label)).svg()}</span>\n          <span class=\"info\">\n            <span class=\"name\">${labelText(prize.label)}</span>\n            <span class=\"range\">Rank ${rankRange(prize)}</span>\n          </span>\n          <span class=\"value\">${this.formatValue(prize)}</span>\n        </button>\n      `,\n    )}`;\n  }\n\n  render() {\n    const prizes = this.section?.prizePackage?.prizes ?? [];\n    if (!prizes.length) return nothing;\n    return renderTemplate(this);\n  }\n}\n"],"names":["rankRange","prize","podiumPrizeForRank","prizes","rank","tierPrizesFrom","OsLeaderboardCasinoPrize","LitElement","DEFAULT_PRIZE_TITLE","left","right","OS_LEADERBOARD_CASINO_PRIZE_CLICK","place","variants","ranks","labels","coinSize","html","labelText","nothing","iconService","renderTemplate","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","Component","OS_LEADERBOARD_CASINO_PRIZE"],"mappings":"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"}

package/dist/components/os-leaderboard-casino/sections/stats-section/components/stat-rail/stat-rail.js

@@ -1,24 +1,26 @@
-import { LitElement as m, html as h } from "lit";
-import { property as o } from "lit/decorators.js";
-import { Component as v } from "../../../../../../shared/lib/lit/component.js";
-import { scss as f } from "../../../../../../shared/lib/lit/scss.js";
+import "../../../../../../shared/vendor/lit-reactive-element-reactive-element.js";
+import { html as m } from "../../../../../../shared/vendor/lit-html-lit-html.js";
+import { LitElement as h } from "../../../../../../shared/vendor/lit-element-lit-element.js";
+import { property as o } from "../../../../../../shared/vendor/lit-reactive-element-property.js";
+import { Component as f } from "../../../../../../shared/lib/lit/component.js";
+import { scss as v } from "../../../../../../shared/lib/lit/scss.js";
 import { OS_LEADERBOARD_CASINO_STAT_RAIL as y } from "../../../../constants/tags.js";
 import { osLeaderboardCasinoTheme as u } from "../../../../theme/styles.js";
-import "lit/directives/unsafe-svg.js";
-import { statIcons as n } from "../stat-icons.js";
+import "../../../../../../shared/vendor/lit-html-unsafe-svg.js";
+import { statIcons as c } from "../stat-icons.js";
 import d from "./stat-rail.scss.js";
-var g = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (s, i, l, p) => {
-  for (var r = p > 1 ? void 0 : p ? _(i, l) : i, a = s.length - 1, c; a >= 0; a--)
-    (c = s[a]) && (r = (p ? c(i, l, r) : c(r)) || r);
-  return p && r && g(i, l, r), r;
+var g = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (s, i, a, p) => {
+  for (var r = p > 1 ? void 0 : p ? _(i, a) : i, l = s.length - 1, n; l >= 0; l--)
+    (n = s[l]) && (r = (p ? n(i, a, r) : n(r)) || r);
+  return p && r && g(i, a, r), r;
 };
-let t = class extends m {
+let t = class extends h {
   constructor() {
     super(...arguments), this.accent = "participants", this.icon = "users", this.value = "", this.label = "", this.segment = "solo", this.compact = !1, this.highlight = !1;
   }
   render() {
-    const s = n[this.icon] ?? n.users;
-    return h`
+    const s = c[this.icon] ?? c.users;
+    return m`
       <div class="rail">
         <div class="icon-well">${s()}</div>
         <div class="copy">
@@ -30,7 +32,7 @@ let t = class extends m {
     `;
   }
 };
-t.styles = [u, f(d)];
+t.styles = [u, v(d)];
 e([
   o({ type: String, reflect: !0 })
 ], t.prototype, "accent", 2);
@@ -53,7 +55,7 @@ e([
   o({ type: Boolean, reflect: !0 })
 ], t.prototype, "highlight", 2);
 t = e([
-  v({ selector: y })
+  f({ selector: y })
 ], t);
 export {
   t as OsLeaderboardCasinoStatRail

package/dist/components/os-leaderboard-casino/sections/stats-section/components/stat-rail/stat-rail.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat-rail.js","sources":["../../../../../../../src/components/os-leaderboard-casino/sections/stats-section/components/stat-rail/stat-rail.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport { OS_LEADERBOARD_CASINO_STAT_RAIL } from '@os-leaderboard-casino/constants/tags.js';\nimport { osLeaderboardCasinoTheme } from '@os-leaderboard-casino/theme/index.js';\nimport { statIcons } from '../stat-icons.js';\nimport styles from './stat-rail.scss?inline';\n\nexport type StatRailAccent = 'participants' | 'prizes' | 'ends' | 'biggestWin';\nexport type StatRailIcon = keyof typeof statIcons;\nexport type StatRailSegment = 'solo' | 'start' | 'middle' | 'end';\n\n/** Horizontal rail segment — icon well + label/value with accent shimmer. */\n@Component({ selector: OS_LEADERBOARD_CASINO_STAT_RAIL })\nexport class OsLeaderboardCasinoStatRail extends LitElement {\n  static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n  @property({ type: String, reflect: true })\n  accent: StatRailAccent = 'participants';\n\n  @property({ type: String })\n  icon: StatRailIcon = 'users';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String, reflect: true })\n  segment: StatRailSegment = 'solo';\n\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  @property({ type: Boolean, reflect: true })\n  highlight = false;\n\n  render() {\n    const icon = statIcons[this.icon] ?? statIcons.users;\n    return html`\n      <div class=\"rail\">\n        <div class=\"icon-well\">${icon()}</div>\n        <div class=\"copy\">\n          <div class=\"label\">${this.label}</div>\n          <div class=\"value\">${this.value}</div>\n        </div>\n        <span class=\"shimmer\" aria-hidden=\"true\"></span>\n      </div>\n    `;\n  }\n}\n"],"names":["OsLeaderboardCasinoStatRail","LitElement","icon","statIcons","html","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","Component","OS_LEADERBOARD_CASINO_STAT_RAIL"],"mappings":";;;;;;;;;;;;;;AAeO,IAAMA,IAAN,cAA0CC,EAAW;AAAA,EAArD,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,SAAyB,gBAGzB,KAAA,OAAqB,SAGrB,KAAA,QAAQ,IAGR,KAAA,QAAQ,IAGR,KAAA,UAA2B,QAG3B,KAAA,UAAU,IAGV,KAAA,YAAY;AAAA,EAAA;AAAA,EAEZ,SAAS;AACP,UAAMC,IAAOC,EAAU,KAAK,IAAI,KAAKA,EAAU;AAC/C,WAAOC;AAAA;AAAA,iCAEsBF,GAAM;AAAA;AAAA,+BAER,KAAK,KAAK;AAAA,+BACV,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKvC;AACF;AArCaF,EACJ,SAAS,CAACK,GAA0BC,EAAKC,CAAM,CAAC;AAGvDC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAH9BT,EAIX,WAAA,UAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANfT,EAOX,WAAA,QAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATfT,EAUX,WAAA,SAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAZfT,EAaX,WAAA,SAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAf9BT,EAgBX,WAAA,WAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAlB/BT,EAmBX,WAAA,WAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArB/BT,EAsBX,WAAA,aAAA,CAAA;AAtBWA,IAANQ,EAAA;AAAA,EADNE,EAAU,EAAE,UAAUC,EAAA,CAAiC;AAAA,GAC3CX,CAAA;"}
+{"version":3,"file":"stat-rail.js","sources":["../../../../../../../src/components/os-leaderboard-casino/sections/stats-section/components/stat-rail/stat-rail.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport { OS_LEADERBOARD_CASINO_STAT_RAIL } from '@os-leaderboard-casino/constants/tags.js';\nimport { osLeaderboardCasinoTheme } from '@os-leaderboard-casino/theme/index.js';\nimport { statIcons } from '../stat-icons.js';\nimport styles from './stat-rail.scss?inline';\n\nexport type StatRailAccent = 'participants' | 'prizes' | 'ends' | 'biggestWin';\nexport type StatRailIcon = keyof typeof statIcons;\nexport type StatRailSegment = 'solo' | 'start' | 'middle' | 'end';\n\n/** Horizontal rail segment — icon well + label/value with accent shimmer. */\n@Component({ selector: OS_LEADERBOARD_CASINO_STAT_RAIL })\nexport class OsLeaderboardCasinoStatRail extends LitElement {\n  static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n  @property({ type: String, reflect: true })\n  accent: StatRailAccent = 'participants';\n\n  @property({ type: String })\n  icon: StatRailIcon = 'users';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String, reflect: true })\n  segment: StatRailSegment = 'solo';\n\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  @property({ type: Boolean, reflect: true })\n  highlight = false;\n\n  render() {\n    const icon = statIcons[this.icon] ?? statIcons.users;\n    return html`\n      <div class=\"rail\">\n        <div class=\"icon-well\">${icon()}</div>\n        <div class=\"copy\">\n          <div class=\"label\">${this.label}</div>\n          <div class=\"value\">${this.value}</div>\n        </div>\n        <span class=\"shimmer\" aria-hidden=\"true\"></span>\n      </div>\n    `;\n  }\n}\n"],"names":["OsLeaderboardCasinoStatRail","LitElement","icon","statIcons","html","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","Component","OS_LEADERBOARD_CASINO_STAT_RAIL"],"mappings":";;;;;;;;;;;;;;;;AAeO,IAAMA,IAAN,cAA0CC,EAAW;AAAA,EAArD,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,SAAyB,gBAGzB,KAAA,OAAqB,SAGrB,KAAA,QAAQ,IAGR,KAAA,QAAQ,IAGR,KAAA,UAA2B,QAG3B,KAAA,UAAU,IAGV,KAAA,YAAY;AAAA,EAAA;AAAA,EAEZ,SAAS;AACP,UAAMC,IAAOC,EAAU,KAAK,IAAI,KAAKA,EAAU;AAC/C,WAAOC;AAAAA;AAAAA,iCAEsBF,GAAM;AAAA;AAAA,+BAER,KAAK,KAAK;AAAA,+BACV,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKvC;AACF;AArCaF,EACJ,SAAS,CAACK,GAA0BC,EAAKC,CAAM,CAAC;AAGvDC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAH9BT,EAIX,WAAA,UAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANfT,EAOX,WAAA,QAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATfT,EAUX,WAAA,SAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAZfT,EAaX,WAAA,SAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAf9BT,EAgBX,WAAA,WAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAlB/BT,EAmBX,WAAA,WAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArB/BT,EAsBX,WAAA,aAAA,CAAA;AAtBWA,IAANQ,EAAA;AAAA,EADNE,EAAU,EAAE,UAAUC,EAAA,CAAiC;AAAA,GAC3CX,CAAA;"}

package/dist/components/os-leaderboard-casino/sections/stats-section/stats-section.html.js

@@ -1,5 +1,7 @@
-import { html as a } from "lit";
-function t(e) {
+import "../../../../shared/vendor/lit-reactive-element-reactive-element.js";
+import { html as a } from "../../../../shared/vendor/lit-html-lit-html.js";
+import "../../../../shared/vendor/lit-element-lit-element.js";
+function s(e) {
   return a`<section class="strip">
   <os-leaderboard-casino-stat-rail
     accent="participants"
@@ -29,6 +31,6 @@ function t(e) {
 `;
 }
 export {
-  t as default
+  s as default
 };
 //# sourceMappingURL=stats-section.html.js.map

package/dist/components/os-leaderboard-casino/sections/stats-section/stats-section.html.js.map

@@ -1 +1 @@
-{"version":3,"file":"stats-section.html.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/stats-section/stats-section.html?lit-html"],"sourcesContent":["\nimport { html } from 'lit';\n\nexport default function render(host) {\n  return html`<section class=\"strip\">\n  <os-leaderboard-casino-stat-rail\n    accent=\"participants\"\n    icon=\"users\"\n    segment=\"${host.participantsSegment}\"\n    value=\"${host.participantsLabel}\"\n    label=\"Participants\"\n  ></os-leaderboard-casino-stat-rail>\n  <os-leaderboard-casino-stat-rail\n    ?hidden=${!host.showPrizes}\n    accent=\"prizes\"\n    icon=\"gift\"\n    segment=\"${host.prizesSegment}\"\n    value=\"${host.prizesLabel}\"\n    label=\"Prize Tiers\"\n  ></os-leaderboard-casino-stat-rail>\n  <os-leaderboard-casino-stat-rail\n    ?hidden=${!host.showBiggestWin}\n    accent=\"biggestWin\"\n    icon=\"trophy\"\n    segment=\"${host.biggestWinSegment}\"\n    value=\"${host.biggestWinLabel}\"\n    label=\"Biggest Win\"\n    compact\n  ></os-leaderboard-casino-stat-rail>\n</section>\n`;\n}\n"],"names":["render","host","html"],"mappings":";AAGe,SAASA,EAAOC,GAAM;AACnC,SAAOC;AAAA;AAAA;AAAA;AAAA,eAIMD,EAAK,mBAAmB;AAAA,aAC1BA,EAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,cAIrB,CAACA,EAAK,UAAU;AAAA;AAAA;AAAA,eAGfA,EAAK,aAAa;AAAA,aACpBA,EAAK,WAAW;AAAA;AAAA;AAAA;AAAA,cAIf,CAACA,EAAK,cAAc;AAAA;AAAA;AAAA,eAGnBA,EAAK,iBAAiB;AAAA,aACxBA,EAAK,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAMjC;"}
+{"version":3,"file":"stats-section.html.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/stats-section/stats-section.html?lit-html"],"sourcesContent":["\nimport { html } from 'lit';\n\nexport default function render(host) {\n  return html`<section class=\"strip\">\n  <os-leaderboard-casino-stat-rail\n    accent=\"participants\"\n    icon=\"users\"\n    segment=\"${host.participantsSegment}\"\n    value=\"${host.participantsLabel}\"\n    label=\"Participants\"\n  ></os-leaderboard-casino-stat-rail>\n  <os-leaderboard-casino-stat-rail\n    ?hidden=${!host.showPrizes}\n    accent=\"prizes\"\n    icon=\"gift\"\n    segment=\"${host.prizesSegment}\"\n    value=\"${host.prizesLabel}\"\n    label=\"Prize Tiers\"\n  ></os-leaderboard-casino-stat-rail>\n  <os-leaderboard-casino-stat-rail\n    ?hidden=${!host.showBiggestWin}\n    accent=\"biggestWin\"\n    icon=\"trophy\"\n    segment=\"${host.biggestWinSegment}\"\n    value=\"${host.biggestWinLabel}\"\n    label=\"Biggest Win\"\n    compact\n  ></os-leaderboard-casino-stat-rail>\n</section>\n`;\n}\n"],"names":["render","host","html"],"mappings":";;;AAGe,SAASA,EAAOC,GAAM;AACnC,SAAOC;AAAAA;AAAAA;AAAAA;AAAAA,eAIMD,EAAK,mBAAmB;AAAA,aAC1BA,EAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,cAIrB,CAACA,EAAK,UAAU;AAAA;AAAA;AAAA,eAGfA,EAAK,aAAa;AAAA,aACpBA,EAAK,WAAW;AAAA;AAAA;AAAA;AAAA,cAIf,CAACA,EAAK,cAAc;AAAA;AAAA;AAAA,eAGnBA,EAAK,iBAAiB;AAAA,aACxBA,EAAK,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAMjC;"}

package/dist/components/os-leaderboard-casino/sections/stats-section/stats-section.js

@@ -1,17 +1,19 @@
-import { LitElement as g, nothing as p } from "lit";
-import { property as c } from "lit/decorators.js";
+import "../../../../shared/vendor/lit-reactive-element-reactive-element.js";
+import { nothing as g } from "../../../../shared/vendor/lit-html-lit-html.js";
+import { LitElement as p } from "../../../../shared/vendor/lit-element-lit-element.js";
+import { property as c } from "../../../../shared/vendor/lit-reactive-element-property.js";
 import { Component as l } from "../../../../shared/lib/lit/component.js";
 import { scss as u } from "../../../../shared/lib/lit/scss.js";
-import { OS_LEADERBOARD_CASINO_STATS as h } from "../../constants/tags.js";
-import { osLeaderboardCasinoTheme as f } from "../../theme/styles.js";
-import "lit/directives/unsafe-svg.js";
+import { OS_LEADERBOARD_CASINO_STATS as f } from "../../constants/tags.js";
+import { osLeaderboardCasinoTheme as h } from "../../theme/styles.js";
+import "../../../../shared/vendor/lit-html-unsafe-svg.js";
 import "./components/stat-rail/stat-rail.js";
 import b from "./stats-section.html.js";
 import S from "./stats-section.scss.js";
-var L = Object.defineProperty, d = Object.getOwnPropertyDescriptor, a = (r, e, n, i) => {
-  for (var t = i > 1 ? void 0 : i ? d(e, n) : e, o = r.length - 1, m; o >= 0; o--)
-    (m = r[o]) && (t = (i ? m(e, n, t) : m(t)) || t);
-  return i && t && L(e, n, t), t;
+var L = Object.defineProperty, d = Object.getOwnPropertyDescriptor, a = (r, e, o, i) => {
+  for (var t = i > 1 ? void 0 : i ? d(e, o) : e, n = r.length - 1, m; n >= 0; n--)
+    (m = r[n]) && (t = (i ? m(e, o, t) : m(t)) || t);
+  return i && t && L(e, o, t), t;
 };
 function P(r, e = "USD") {
   try {
@@ -24,7 +26,7 @@ function P(r, e = "USD") {
     return r.toLocaleString();
   }
 }
-let s = class extends g {
+let s = class extends p {
   get participantsLabel() {
     return this.section.totalParticipants.toLocaleString();
   }
@@ -53,15 +55,15 @@ let s = class extends g {
     return "end";
   }
   render() {
-    return this.section ? b(this) : p;
+    return this.section ? b(this) : g;
   }
 };
-s.styles = [f, u(S)];
+s.styles = [h, u(S)];
 a([
   c({ attribute: !1 })
 ], s.prototype, "section", 2);
 s = a([
-  l({ selector: h })
+  l({ selector: f })
 ], s);
 export {
   s as OsLeaderboardCasinoStats

package/dist/components/os-leaderboard-casino/sections/stats-section/stats-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"stats-section.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/stats-section/stats-section.ts"],"sourcesContent":["import { LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport { OS_LEADERBOARD_CASINO_STATS } from '@os-leaderboard-casino/constants/tags.js';\nimport { osLeaderboardCasinoTheme } from '@os-leaderboard-casino/theme/index.js';\nimport type { OsLeaderboardCasinoStatsSection } from '@os-leaderboard-casino/types/sections.js';\nimport type { StatsSectionHost, StatRailSegment } from './stats-section.host.js';\nimport './components/stat-rail/stat-rail.js';\nimport renderTemplate from './stats-section.html?lit-html';\nimport styles from './stats-section.scss?inline';\n\nfunction formatWinAmount(value: number, currency = 'USD'): string {\n  try {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency,\n      maximumFractionDigits: 0,\n    }).format(value);\n  } catch {\n    return value.toLocaleString();\n  }\n}\n\n@Component({ selector: OS_LEADERBOARD_CASINO_STATS })\nexport class OsLeaderboardCasinoStats\n  extends LitElement\n  implements StatsSectionHost\n{\n  static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n  @property({ attribute: false })\n  section!: OsLeaderboardCasinoStatsSection;\n\n  get participantsLabel(): string {\n    return this.section.totalParticipants.toLocaleString();\n  }\n\n  get showPrizes(): boolean {\n    return this.section.totalPrizes != null;\n  }\n\n  get prizesLabel(): string {\n    return (this.section.totalPrizes ?? 0).toLocaleString();\n  }\n\n  get showBiggestWin(): boolean {\n    return this.section.biggestWin != null;\n  }\n\n  get biggestWinLabel(): string {\n    return formatWinAmount(\n      this.section.biggestWin ?? 0,\n      this.section.biggestWinCurrency ?? 'USD',\n    );\n  }\n\n  get participantsSegment(): StatRailSegment {\n    if (!this.showPrizes && !this.showBiggestWin) return 'solo';\n    return 'start';\n  }\n\n  get prizesSegment(): StatRailSegment {\n    return this.showBiggestWin ? 'middle' : 'end';\n  }\n\n  get biggestWinSegment(): StatRailSegment {\n    return 'end';\n  }\n\n  render() {\n    if (!this.section) return nothing;\n    return renderTemplate(this);\n  }\n}\n"],"names":["formatWinAmount","value","currency","OsLeaderboardCasinoStats","LitElement","renderTemplate","nothing","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","Component","OS_LEADERBOARD_CASINO_STATS"],"mappings":";;;;;;;;;;;;;;;AAYA,SAASA,EAAgBC,GAAeC,IAAW,OAAe;AAChE,MAAI;AACF,WAAO,IAAI,KAAK,aAAa,SAAS;AAAA,MACpC,OAAO;AAAA,MACP,UAAAA;AAAA,MACA,uBAAuB;AAAA,IAAA,CACxB,EAAE,OAAOD,CAAK;AAAA,EACjB,QAAQ;AACN,WAAOA,EAAM,eAAA;AAAA,EACf;AACF;AAGO,IAAME,IAAN,cACGC,EAEV;AAAA,EAME,IAAI,oBAA4B;AAC9B,WAAO,KAAK,QAAQ,kBAAkB,eAAA;AAAA,EACxC;AAAA,EAEA,IAAI,aAAsB;AACxB,WAAO,KAAK,QAAQ,eAAe;AAAA,EACrC;AAAA,EAEA,IAAI,cAAsB;AACxB,YAAQ,KAAK,QAAQ,eAAe,GAAG,eAAA;AAAA,EACzC;AAAA,EAEA,IAAI,iBAA0B;AAC5B,WAAO,KAAK,QAAQ,cAAc;AAAA,EACpC;AAAA,EAEA,IAAI,kBAA0B;AAC5B,WAAOJ;AAAA,MACL,KAAK,QAAQ,cAAc;AAAA,MAC3B,KAAK,QAAQ,sBAAsB;AAAA,IAAA;AAAA,EAEvC;AAAA,EAEA,IAAI,sBAAuC;AACzC,WAAI,CAAC,KAAK,cAAc,CAAC,KAAK,iBAAuB,SAC9C;AAAA,EACT;AAAA,EAEA,IAAI,gBAAiC;AACnC,WAAO,KAAK,iBAAiB,WAAW;AAAA,EAC1C;AAAA,EAEA,IAAI,oBAAqC;AACvC,WAAO;AAAA,EACT;AAAA,EAEA,SAAS;AACP,WAAK,KAAK,UACHK,EAAe,IAAI,IADAC;AAAA,EAE5B;AACF;AAjDaH,EAIJ,SAAS,CAACI,GAA0BC,EAAKC,CAAM,CAAC;AAGvDC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GANnBR,EAOX,WAAA,WAAA,CAAA;AAPWA,IAANO,EAAA;AAAA,EADNE,EAAU,EAAE,UAAUC,EAAA,CAA6B;AAAA,GACvCV,CAAA;"}
+{"version":3,"file":"stats-section.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/stats-section/stats-section.ts"],"sourcesContent":["import { LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport { OS_LEADERBOARD_CASINO_STATS } from '@os-leaderboard-casino/constants/tags.js';\nimport { osLeaderboardCasinoTheme } from '@os-leaderboard-casino/theme/index.js';\nimport type { OsLeaderboardCasinoStatsSection } from '@os-leaderboard-casino/types/sections.js';\nimport type { StatsSectionHost, StatRailSegment } from './stats-section.host.js';\nimport './components/stat-rail/stat-rail.js';\nimport renderTemplate from './stats-section.html?lit-html';\nimport styles from './stats-section.scss?inline';\n\nfunction formatWinAmount(value: number, currency = 'USD'): string {\n  try {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency,\n      maximumFractionDigits: 0,\n    }).format(value);\n  } catch {\n    return value.toLocaleString();\n  }\n}\n\n@Component({ selector: OS_LEADERBOARD_CASINO_STATS })\nexport class OsLeaderboardCasinoStats\n  extends LitElement\n  implements StatsSectionHost\n{\n  static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n  @property({ attribute: false })\n  section!: OsLeaderboardCasinoStatsSection;\n\n  get participantsLabel(): string {\n    return this.section.totalParticipants.toLocaleString();\n  }\n\n  get showPrizes(): boolean {\n    return this.section.totalPrizes != null;\n  }\n\n  get prizesLabel(): string {\n    return (this.section.totalPrizes ?? 0).toLocaleString();\n  }\n\n  get showBiggestWin(): boolean {\n    return this.section.biggestWin != null;\n  }\n\n  get biggestWinLabel(): string {\n    return formatWinAmount(\n      this.section.biggestWin ?? 0,\n      this.section.biggestWinCurrency ?? 'USD',\n    );\n  }\n\n  get participantsSegment(): StatRailSegment {\n    if (!this.showPrizes && !this.showBiggestWin) return 'solo';\n    return 'start';\n  }\n\n  get prizesSegment(): StatRailSegment {\n    return this.showBiggestWin ? 'middle' : 'end';\n  }\n\n  get biggestWinSegment(): StatRailSegment {\n    return 'end';\n  }\n\n  render() {\n    if (!this.section) return nothing;\n    return renderTemplate(this);\n  }\n}\n"],"names":["formatWinAmount","value","currency","OsLeaderboardCasinoStats","LitElement","renderTemplate","nothing","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","Component","OS_LEADERBOARD_CASINO_STATS"],"mappings":";;;;;;;;;;;;;;;;;AAYA,SAASA,EAAgBC,GAAeC,IAAW,OAAe;AAChE,MAAI;AACF,WAAO,IAAI,KAAK,aAAa,SAAS;AAAA,MACpC,OAAO;AAAA,MACP,UAAAA;AAAA,MACA,uBAAuB;AAAA,IAAA,CACxB,EAAE,OAAOD,CAAK;AAAA,EACjB,QAAQ;AACN,WAAOA,EAAM,eAAA;AAAA,EACf;AACF;AAGO,IAAME,IAAN,cACGC,EAEV;AAAA,EAME,IAAI,oBAA4B;AAC9B,WAAO,KAAK,QAAQ,kBAAkB,eAAA;AAAA,EACxC;AAAA,EAEA,IAAI,aAAsB;AACxB,WAAO,KAAK,QAAQ,eAAe;AAAA,EACrC;AAAA,EAEA,IAAI,cAAsB;AACxB,YAAQ,KAAK,QAAQ,eAAe,GAAG,eAAA;AAAA,EACzC;AAAA,EAEA,IAAI,iBAA0B;AAC5B,WAAO,KAAK,QAAQ,cAAc;AAAA,EACpC;AAAA,EAEA,IAAI,kBAA0B;AAC5B,WAAOJ;AAAA,MACL,KAAK,QAAQ,cAAc;AAAA,MAC3B,KAAK,QAAQ,sBAAsB;AAAA,IAAA;AAAA,EAEvC;AAAA,EAEA,IAAI,sBAAuC;AACzC,WAAI,CAAC,KAAK,cAAc,CAAC,KAAK,iBAAuB,SAC9C;AAAA,EACT;AAAA,EAEA,IAAI,gBAAiC;AACnC,WAAO,KAAK,iBAAiB,WAAW;AAAA,EAC1C;AAAA,EAEA,IAAI,oBAAqC;AACvC,WAAO;AAAA,EACT;AAAA,EAEA,SAAS;AACP,WAAK,KAAK,UACHK,EAAe,IAAI,IADAC;AAAAA,EAE5B;AACF;AAjDaH,EAIJ,SAAS,CAACI,GAA0BC,EAAKC,CAAM,CAAC;AAGvDC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GANnBR,EAOX,WAAA,WAAA,CAAA;AAPWA,IAANO,EAAA;AAAA,EADNE,EAAU,EAAE,UAAUC,EAAA,CAA6B;AAAA,GACvCV,CAAA;"}

package/dist/components/os-leaderboard-casino/sections/table-section/table-section.html.js

@@ -1,5 +1,7 @@
-import { html as s } from "lit";
-function n(a) {
+import "../../../../shared/vendor/lit-reactive-element-reactive-element.js";
+import { html as s } from "../../../../shared/vendor/lit-html-lit-html.js";
+import "../../../../shared/vendor/lit-element-lit-element.js";
+function c(a) {
   return s`<section>
   <div class="section-header">
     <h2 class="section-title">${a.sectionTitle}</h2>
@@ -33,6 +35,6 @@ function n(a) {
 `;
 }
 export {
-  n as default
+  c as default
 };
 //# sourceMappingURL=table-section.html.js.map

package/dist/components/os-leaderboard-casino/sections/table-section/table-section.html.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-section.html.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/table-section/table-section.html?lit-html"],"sourcesContent":["\nimport { html } from 'lit';\n\nexport default function render(host) {\n  return html`<section>\n  <div class=\"section-header\">\n    <h2 class=\"section-title\">${host.sectionTitle}</h2>\n  </div>\n\n  <div class=\"card-shell\">\n    <div class=\"card-accent\" aria-hidden=\"true\"></div>\n    <div class=\"card\">\n      <div class=\"table-scroll\">\n      <div class=\"table-head\">\n        <span class=\"col-rank\">Rank</span>\n        <span class=\"col-player\">Player</span>\n        <span class=\"col-games\">Games</span>\n        <span class=\"col-win-rate\">Win rate</span>\n        <span class=\"col-bet\">Total bet</span>\n        <span class=\"col-points\">Points</span>\n        <span class=\"col-rank-change\">Change</span>\n      </div>\n      <div class=\"empty\" ?hidden=${host.hasPlayers}>${host.emptyMessage}</div>\n      ${host.renderPlayers()}\n      <div class=\"divider\" ?hidden=${!host.showPinned}>Your position</div>\n      ${host.renderPinnedRow()}\n    </div>\n  </div>\n  </div>\n\n  <button type=\"button\" class=\"cta\" @click=${host.onOpenClick}>\n    ${host.ctaLabel}\n  </button>\n</section>\n`;\n}\n"],"names":["render","host","html"],"mappings":";AAGe,SAASA,EAAOC,GAAM;AACnC,SAAOC;AAAA;AAAA,gCAEuBD,EAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mCAgBdA,EAAK,UAAU,IAAIA,EAAK,YAAY;AAAA,QAC/DA,EAAK,cAAa,CAAE;AAAA,qCACS,CAACA,EAAK,UAAU;AAAA,QAC7CA,EAAK,gBAAe,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA,6CAKeA,EAAK,WAAW;AAAA,MACvDA,EAAK,QAAQ;AAAA;AAAA;AAAA;AAInB;"}
+{"version":3,"file":"table-section.html.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/table-section/table-section.html?lit-html"],"sourcesContent":["\nimport { html } from 'lit';\n\nexport default function render(host) {\n  return html`<section>\n  <div class=\"section-header\">\n    <h2 class=\"section-title\">${host.sectionTitle}</h2>\n  </div>\n\n  <div class=\"card-shell\">\n    <div class=\"card-accent\" aria-hidden=\"true\"></div>\n    <div class=\"card\">\n      <div class=\"table-scroll\">\n      <div class=\"table-head\">\n        <span class=\"col-rank\">Rank</span>\n        <span class=\"col-player\">Player</span>\n        <span class=\"col-games\">Games</span>\n        <span class=\"col-win-rate\">Win rate</span>\n        <span class=\"col-bet\">Total bet</span>\n        <span class=\"col-points\">Points</span>\n        <span class=\"col-rank-change\">Change</span>\n      </div>\n      <div class=\"empty\" ?hidden=${host.hasPlayers}>${host.emptyMessage}</div>\n      ${host.renderPlayers()}\n      <div class=\"divider\" ?hidden=${!host.showPinned}>Your position</div>\n      ${host.renderPinnedRow()}\n    </div>\n  </div>\n  </div>\n\n  <button type=\"button\" class=\"cta\" @click=${host.onOpenClick}>\n    ${host.ctaLabel}\n  </button>\n</section>\n`;\n}\n"],"names":["render","host","html"],"mappings":";;;AAGe,SAASA,EAAOC,GAAM;AACnC,SAAOC;AAAAA;AAAAA,gCAEuBD,EAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mCAgBdA,EAAK,UAAU,IAAIA,EAAK,YAAY;AAAA,QAC/DA,EAAK,cAAa,CAAE;AAAA,qCACS,CAACA,EAAK,UAAU;AAAA,QAC7CA,EAAK,gBAAe,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA,6CAKeA,EAAK,WAAW;AAAA,MACvDA,EAAK,QAAQ;AAAA;AAAA;AAAA;AAInB;"}

package/dist/components/os-leaderboard-casino/sections/table-section/table-section.js

@@ -1,6 +1,8 @@
-import { LitElement as f, html as r, nothing as i } from "lit";
-import { property as d } from "lit/decorators.js";
-import { unsafeSVG as c } from "lit/directives/unsafe-svg.js";
+import "../../../../shared/vendor/lit-reactive-element-reactive-element.js";
+import { html as r, nothing as i } from "../../../../shared/vendor/lit-html-lit-html.js";
+import { LitElement as f } from "../../../../shared/vendor/lit-element-lit-element.js";
+import { property as d } from "../../../../shared/vendor/lit-reactive-element-property.js";
+import { unsafeSVG as c } from "../../../../shared/vendor/lit-html-unsafe-svg.js";
 import v from "../../assets/icons/table.rank-up.svg.js";
 import b from "../../assets/icons/table.rank-down.svg.js";
 import g from "../../assets/icons/table.rank-neutral.svg.js";
@@ -14,11 +16,11 @@ import { labelText as R } from "../../types/data.js";
 import { prizeForRank as L, podiumVariantForRank as E } from "../../theme/prize-resolve.js";
 import { OS_LEADERBOARD_CASINO_OPEN as O } from "../../types/events.js";
 import "../prize-section/components/medal-coin/medal-coin.js";
-import z from "./table-section.html.js";
-import A from "./table-section.scss.js";
-var D = Object.defineProperty, T = Object.getOwnPropertyDescriptor, l = (e, s, t, o) => {
-  for (var n = o > 1 ? void 0 : o ? T(s, t) : s, p = e.length - 1, u; p >= 0; p--)
-    (u = e[p]) && (n = (o ? u(s, t, n) : u(n)) || n);
+import A from "./table-section.html.js";
+import z from "./table-section.scss.js";
+var D = Object.defineProperty, T = Object.getOwnPropertyDescriptor, p = (e, s, t, o) => {
+  for (var n = o > 1 ? void 0 : o ? T(s, t) : s, l = e.length - 1, u; l >= 0; l--)
+    (u = e[l]) && (n = (o ? u(s, t, n) : u(n)) || n);
   return o && n && D(s, t, n), n;
 };
 function U(e) {
@@ -161,20 +163,20 @@ let a = class extends f {
     return e ? this.renderRow(e) : i;
   }
   render() {
-    return this.section ? z(this) : i;
+    return this.section ? A(this) : i;
   }
 };
-a.styles = [S, y(A)];
-l([
+a.styles = [S, y(z)];
+p([
   d({ attribute: !1 })
 ], a.prototype, "section", 2);
-l([
+p([
   d({ type: String })
 ], a.prototype, "uuid", 2);
-l([
+p([
   d({ type: Boolean })
 ], a.prototype, "finished", 2);
-a = l([
+a = p([
   k({ selector: P })
 ], a);
 export {