@oddsmith/ui 0.0.0 → 1.0.0

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

@@ -0,0 +1,74 @@
+import { LitElement as u, html as m, nothing as b } from "lit";
+import { property as d } from "lit/decorators.js";
+import { unsafeSVG as p } from "lit/directives/unsafe-svg.js";
+import g from "../../assets/icons/table.rank-up.svg.js";
+import h from "../../assets/icons/table.rank-down.svg.js";
+import v from "../../assets/icons/table.rank-neutral.svg.js";
+import { Component as x } from "../../../../shared/lib/lit/component.js";
+import { scss as L } from "../../../../shared/lib/lit/scss.js";
+import { OS_LEADERBOARD_CASINO_CLIMB as S } from "../../constants/tags.js";
+import { osLeaderboardCasinoTheme as T } from "../../theme/styles.js";
+import { renderPlayerName as N } from "../../theme/vip-mark.js";
+import { iconService as l } from "../../services/icon.service.js";
+import _ from "./climb-section.html.js";
+import C from "./climb-section.scss.js";
+var O = Object.defineProperty, P = Object.getOwnPropertyDescriptor, f = (e, t, i, n) => {
+  for (var r = n > 1 ? void 0 : n ? P(t, i) : t, s = e.length - 1, a; s >= 0; s--)
+    (a = e[s]) && (r = (n ? a(t, i, r) : a(r)) || r);
+  return n && r && O(t, i, r), r;
+};
+function c(e) {
+  return e.replace("<svg ", '<svg viewBox="0 0 512 512" ');
+}
+const w = c(g), $ = c(h), y = c(v);
+let o = class extends u {
+  get climbTitle() {
+    return this.section?.title ?? "Your climb";
+  }
+  get pointsLabel() {
+    return `${this.section.points.toLocaleString()} pts`;
+  }
+  get trendClass() {
+    const e = this.section?.trend ?? 0;
+    return e > 0 ? "up" : e < 0 ? "down" : "flat";
+  }
+  renderTrend() {
+    const e = this.section?.trend ?? 0;
+    return e > 0 ? m`${p(w)}<b>${e}</b>` : e < 0 ? m`${p($)}<b>${Math.abs(e)}</b>` : m`${p(y)}<b>steady</b>`;
+  }
+  get pointsToNextLabel() {
+    return `${this.section.pointsToNextTier.toLocaleString()} pts`;
+  }
+  get nextTierRank() {
+    return this.section.nextTierRank;
+  }
+  get nextTierLabel() {
+    return this.section.nextTierLabel;
+  }
+  renderNextTierPrizeIcon() {
+    const e = l.resolvePrizeIconName(this.section.nextTierLabel);
+    return l.get(e).render({
+      className: "prize-icon prize-icon--inline"
+    });
+  }
+  get progressPct() {
+    return Math.round(Math.min(1, Math.max(0, this.section.progress)) * 100);
+  }
+  renderName() {
+    return N(this.section.username, { vip: this.section.vip });
+  }
+  render() {
+    return this.section ? _(this) : b;
+  }
+};
+o.styles = [T, L(C)];
+f([
+  d({ attribute: !1 })
+], o.prototype, "section", 2);
+o = f([
+  x({ selector: S })
+], o);
+export {
+  o as OsLeaderboardCasinoClimb
+};
+//# sourceMappingURL=climb-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"climb-section.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/climb-section/climb-section.ts"],"sourcesContent":["import { html, LitElement, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport rankUpSvg from '../../assets/icons/table.rank-up.svg?raw';\nimport rankDownSvg from '../../assets/icons/table.rank-down.svg?raw';\nimport rankNeutralSvg from '../../assets/icons/table.rank-neutral.svg?raw';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport { OS_LEADERBOARD_CASINO_CLIMB } 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 { iconService } from '@os-leaderboard-casino/services/icon.service.js';\nimport type { OsLeaderboardCasinoClimbSection } from '@os-leaderboard-casino/types/sections.js';\nimport type { ClimbSectionHost } from './climb-section.host.js';\nimport renderTemplate from './climb-section.html?lit-html';\nimport styles from './climb-section.scss?inline';\n\nfunction addViewBox(svg: string): string {\n  return svg.replace('<svg ', '<svg viewBox=\"0 0 512 512\" ');\n}\nconst rankUpSvgVb = addViewBox(rankUpSvg);\nconst rankDownSvgVb = addViewBox(rankDownSvg);\nconst rankNeutralSvgVb = addViewBox(rankNeutralSvg);\n\n/** \"Your climb\" — progress towards the next prize tier with rank trend. */\n@Component({ selector: OS_LEADERBOARD_CASINO_CLIMB })\nexport class OsLeaderboardCasinoClimb\n  extends LitElement\n  implements ClimbSectionHost\n{\n  static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n  @property({ attribute: false })\n  section!: OsLeaderboardCasinoClimbSection;\n\n  get climbTitle(): string {\n    return this.section?.title ?? 'Your climb';\n  }\n\n  get pointsLabel(): string {\n    return `${this.section.points.toLocaleString()} pts`;\n  }\n\n  get trendClass(): string {\n    const trend = this.section?.trend ?? 0;\n    return trend > 0 ? 'up' : trend < 0 ? 'down' : 'flat';\n  }\n\n  renderTrend(): TemplateResult {\n    const trend = this.section?.trend ?? 0;\n    if (trend > 0) return html`${unsafeSVG(rankUpSvgVb)}<b>${trend}</b>`;\n    if (trend < 0) return html`${unsafeSVG(rankDownSvgVb)}<b>${Math.abs(trend)}</b>`;\n    return html`${unsafeSVG(rankNeutralSvgVb)}<b>steady</b>`;\n  }\n\n  get pointsToNextLabel(): string {\n    return `${this.section.pointsToNextTier.toLocaleString()} pts`;\n  }\n\n  get nextTierRank(): number {\n    return this.section.nextTierRank;\n  }\n\n  get nextTierLabel(): string {\n    return this.section.nextTierLabel;\n  }\n\n  renderNextTierPrizeIcon() {\n    const name = iconService.resolvePrizeIconName(this.section.nextTierLabel);\n    return iconService.get(name).render({\n      className: 'prize-icon prize-icon--inline',\n    });\n  }\n\n  get progressPct(): number {\n    return Math.round(Math.min(1, Math.max(0, this.section.progress)) * 100);\n  }\n\n  renderName() {\n    return renderPlayerName(this.section.username, { vip: this.section.vip });\n  }\n\n  render() {\n    if (!this.section) return nothing;\n    return renderTemplate(this);\n  }\n}\n"],"names":["addViewBox","svg","rankUpSvgVb","rankUpSvg","rankDownSvgVb","rankDownSvg","rankNeutralSvgVb","rankNeutralSvg","OsLeaderboardCasinoClimb","LitElement","trend","html","unsafeSVG","name","iconService","renderPlayerName","renderTemplate","nothing","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","Component","OS_LEADERBOARD_CASINO_CLIMB"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBA,SAASA,EAAWC,GAAqB;AACvC,SAAOA,EAAI,QAAQ,SAAS,6BAA6B;AAC3D;AACA,MAAMC,IAAcF,EAAWG,CAAS,GAClCC,IAAgBJ,EAAWK,CAAW,GACtCC,IAAmBN,EAAWO,CAAc;AAI3C,IAAMC,IAAN,cACGC,EAEV;AAAA,EAME,IAAI,aAAqB;AACvB,WAAO,KAAK,SAAS,SAAS;AAAA,EAChC;AAAA,EAEA,IAAI,cAAsB;AACxB,WAAO,GAAG,KAAK,QAAQ,OAAO,gBAAgB;AAAA,EAChD;AAAA,EAEA,IAAI,aAAqB;AACvB,UAAMC,IAAQ,KAAK,SAAS,SAAS;AACrC,WAAOA,IAAQ,IAAI,OAAOA,IAAQ,IAAI,SAAS;AAAA,EACjD;AAAA,EAEA,cAA8B;AAC5B,UAAMA,IAAQ,KAAK,SAAS,SAAS;AACrC,WAAIA,IAAQ,IAAUC,IAAOC,EAAUV,CAAW,CAAC,MAAMQ,CAAK,SAC1DA,IAAQ,IAAUC,IAAOC,EAAUR,CAAa,CAAC,MAAM,KAAK,IAAIM,CAAK,CAAC,SACnEC,IAAOC,EAAUN,CAAgB,CAAC;AAAA,EAC3C;AAAA,EAEA,IAAI,oBAA4B;AAC9B,WAAO,GAAG,KAAK,QAAQ,iBAAiB,gBAAgB;AAAA,EAC1D;AAAA,EAEA,IAAI,eAAuB;AACzB,WAAO,KAAK,QAAQ;AAAA,EACtB;AAAA,EAEA,IAAI,gBAAwB;AAC1B,WAAO,KAAK,QAAQ;AAAA,EACtB;AAAA,EAEA,0BAA0B;AACxB,UAAMO,IAAOC,EAAY,qBAAqB,KAAK,QAAQ,aAAa;AACxE,WAAOA,EAAY,IAAID,CAAI,EAAE,OAAO;AAAA,MAClC,WAAW;AAAA,IAAA,CACZ;AAAA,EACH;AAAA,EAEA,IAAI,cAAsB;AACxB,WAAO,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,QAAQ,QAAQ,CAAC,IAAI,GAAG;AAAA,EACzE;AAAA,EAEA,aAAa;AACX,WAAOE,EAAiB,KAAK,QAAQ,UAAU,EAAE,KAAK,KAAK,QAAQ,KAAK;AAAA,EAC1E;AAAA,EAEA,SAAS;AACP,WAAK,KAAK,UACHC,EAAe,IAAI,IADAC;AAAA,EAE5B;AACF;AA5DaT,EAIJ,SAAS,CAACU,GAA0BC,EAAKC,CAAM,CAAC;AAGvDC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GANnBd,EAOX,WAAA,WAAA,CAAA;AAPWA,IAANa,EAAA;AAAA,EADNE,EAAU,EAAE,UAAUC,EAAA,CAA6B;AAAA,GACvChB,CAAA;"}

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

@@ -0,0 +1,5 @@
+const r = ':host{display:block;width:100%}.card{position:relative;overflow:hidden;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-sm);box-shadow:var(--panel-shadow);padding:16px 18px}.top{display:flex;align-items:center;gap:13px;flex-wrap:wrap}.rank-ring{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(var(--surface-solid),var(--surface-solid)) padding-box,conic-gradient(from 220deg,var(--violet),var(--gold),var(--violet)) border-box;border:2px solid transparent}.rank-ring b{font-family:var(--font-mono);font-size:15px;font-weight:800;color:var(--text)}.who{flex:1;min-width:0}.name{font-family:var(--font-display);font-size:15px;font-weight:800;color:var(--text)}.pts{margin-top:1px;font-family:var(--font-mono);font-size:12px;color:var(--text-dim)}.trend{flex:none;display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:12px;font-weight:800;padding:6px 12px;border-radius:999px;border:1px solid var(--hairline)}.trend svg{width:15px;height:15px;flex:none}.trend.up{color:var(--green);background:var(--green-soft);border-color:color-mix(in srgb,var(--green) 35%,transparent)}.trend.down{color:var(--red);background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 35%,transparent)}.trend.flat{color:var(--text-dim);background:#ffffff0a}.progress{margin-top:15px}.progress-labels{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px}.goal{font-size:12px;color:var(--text-dim)}.goal b{color:var(--gold-strong);font-weight:800}.target{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--text-faint);white-space:nowrap}.target-label{line-height:1}.target em{display:inline-flex;align-items:center;gap:4px;font-style:normal;color:var(--text);line-height:1}.bar{position:relative;height:10px;border-radius:999px;background:#ffffff0f;border:1px solid var(--hairline);overflow:hidden}.fill{position:relative;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--violet) 0%,var(--gold) 100%);box-shadow:0 0 14px var(--gold-glow);transition:width .8s cubic-bezier(.22,1,.36,1)}.fill:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);background-size:200% 100%;animation:bar-shine 2.6s linear infinite}@keyframes bar-shine{0%{background-position:180% 0}to{background-position:-80% 0}}';
+export {
+  r as default
+};
+//# sourceMappingURL=climb-section.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"climb-section.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/os-leaderboard-casino/sections/events-banner/components/event-icons.js

@@ -0,0 +1,116 @@
+import { html as o } from "lit";
+const t = (r) => {
+  switch (r) {
+    case "boost":
+      return o`<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path
+          d="M4 20 9 9l6 6-11 5Z"
+          fill="currentColor"
+          opacity=".25"
+        />
+        <path
+          d="M4 20 9 9l6 6-11 5Z"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M14 3v3M19 5l-2 2M21 10h-3"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+        />
+        <circle cx="15.5" cy="8.5" r="2.5" fill="currentColor" opacity=".4" />
+      </svg>`;
+    case "gift":
+      return o`<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <rect
+          x="4"
+          y="9"
+          width="16"
+          height="11"
+          rx="1.5"
+          stroke="currentColor"
+          stroke-width="1.5"
+        />
+        <path d="M4 9h16M12 9v11" stroke="currentColor" stroke-width="1.5" />
+        <path
+          d="M12 9C9 9 7 4 9.5 4S12 7 12 9Zm0 0c3 0 5-5 2.5-5S12 7 12 9Z"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linejoin="round"
+        />
+      </svg>`;
+    case "bolt":
+      return o`<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path
+          d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z"
+          fill="currentColor"
+          opacity=".25"
+        />
+        <path
+          d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linejoin="round"
+        />
+      </svg>`;
+    case "fire":
+      return o`<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path
+          d="M12 3c1 3 4 4 4 8a4 4 0 1 1-8 0c0-2 1-3 2-4 .5 1.5 2 2 2-4Z"
+          fill="currentColor"
+          opacity=".25"
+        />
+        <path
+          d="M12 3c1 3 4 4 4 8a4 4 0 1 1-8 0c0-2 1-3 2-4 .5 1.5 2 2 2-4Z"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linejoin="round"
+        />
+      </svg>`;
+    case "star":
+      return o`<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path
+          d="m12 3 2.6 5.5 6 .8-4.4 4.2 1.1 6L12 16.8 6.7 19.5l1.1-6L3.4 9.3l6-.8L12 3Z"
+          fill="currentColor"
+          opacity=".25"
+        />
+        <path
+          d="m12 3 2.6 5.5 6 .8-4.4 4.2 1.1 6L12 16.8 6.7 19.5l1.1-6L3.4 9.3l6-.8L12 3Z"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linejoin="round"
+        />
+      </svg>`;
+    case "clock":
+      return o`<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.5" />
+        <path
+          d="M12 7v5l3.5 2"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>`;
+  }
+}, e = {
+  "event-1": "bolt",
+  "event-2": "boost"
+}, n = {
+  gold: "bolt",
+  violet: "boost",
+  green: "star",
+  red: "fire"
+};
+function l(r) {
+  return r.icon ? r.icon : t(
+    e[r.id] ?? n[r.accent ?? "gold"] ?? "star"
+  );
+}
+export {
+  t as eventIcon,
+  l as resolveEventIcon
+};
+//# sourceMappingURL=event-icons.js.map

package/dist/components/os-leaderboard-casino/sections/events-banner/components/event-icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-icons.js","sources":["../../../../../../src/components/os-leaderboard-casino/sections/events-banner/components/event-icons.ts"],"sourcesContent":["import { html, type TemplateResult } from 'lit';\nimport type { OsLeaderboardCasinoEventItem } from '@os-leaderboard-casino/types/sections.js';\n\nexport type EventIconName = 'boost' | 'gift' | 'bolt' | 'fire' | 'star' | 'clock';\n\nexport const eventIcon = (name: EventIconName): TemplateResult => {\n  switch (name) {\n    case 'boost':\n      return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M4 20 9 9l6 6-11 5Z\"\n          fill=\"currentColor\"\n          opacity=\".25\"\n        />\n        <path\n          d=\"M4 20 9 9l6 6-11 5Z\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linejoin=\"round\"\n        />\n        <path\n          d=\"M14 3v3M19 5l-2 2M21 10h-3\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n        />\n        <circle cx=\"15.5\" cy=\"8.5\" r=\"2.5\" fill=\"currentColor\" opacity=\".4\" />\n      </svg>`;\n    case 'gift':\n      return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n        <rect\n          x=\"4\"\n          y=\"9\"\n          width=\"16\"\n          height=\"11\"\n          rx=\"1.5\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n        />\n        <path d=\"M4 9h16M12 9v11\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n        <path\n          d=\"M12 9C9 9 7 4 9.5 4S12 7 12 9Zm0 0c3 0 5-5 2.5-5S12 7 12 9Z\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>`;\n    case 'bolt':\n      return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M13 2 4 14h6l-1 8 9-12h-6l1-8Z\"\n          fill=\"currentColor\"\n          opacity=\".25\"\n        />\n        <path\n          d=\"M13 2 4 14h6l-1 8 9-12h-6l1-8Z\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>`;\n    case 'fire':\n      return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M12 3c1 3 4 4 4 8a4 4 0 1 1-8 0c0-2 1-3 2-4 .5 1.5 2 2 2-4Z\"\n          fill=\"currentColor\"\n          opacity=\".25\"\n        />\n        <path\n          d=\"M12 3c1 3 4 4 4 8a4 4 0 1 1-8 0c0-2 1-3 2-4 .5 1.5 2 2 2-4Z\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>`;\n    case 'star':\n      return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"m12 3 2.6 5.5 6 .8-4.4 4.2 1.1 6L12 16.8 6.7 19.5l1.1-6L3.4 9.3l6-.8L12 3Z\"\n          fill=\"currentColor\"\n          opacity=\".25\"\n        />\n        <path\n          d=\"m12 3 2.6 5.5 6 .8-4.4 4.2 1.1 6L12 16.8 6.7 19.5l1.1-6L3.4 9.3l6-.8L12 3Z\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>`;\n    case 'clock':\n      return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n        <path\n          d=\"M12 7v5l3.5 2\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>`;\n  }\n};\n\nconst ICON_BY_ID: Record<string, EventIconName> = {\n  'event-1': 'bolt',\n  'event-2': 'boost',\n};\n\nconst ICON_BY_ACCENT: Record<\n  NonNullable<OsLeaderboardCasinoEventItem['accent']>,\n  EventIconName\n> = {\n  gold: 'bolt',\n  violet: 'boost',\n  green: 'star',\n  red: 'fire',\n};\n\nexport function resolveEventIcon(\n  event: OsLeaderboardCasinoEventItem,\n): TemplateResult | string {\n  if (event.icon) return event.icon;\n  return eventIcon(\n    ICON_BY_ID[event.id] ??\n      ICON_BY_ACCENT[event.accent ?? 'gold'] ??\n      'star',\n  );\n}\n"],"names":["eventIcon","name","html","ICON_BY_ID","ICON_BY_ACCENT","resolveEventIcon","event"],"mappings":";AAKO,MAAMA,IAAY,CAACC,MAAwC;AAChE,UAAQA,GAAA;AAAA,IACN,KAAK;AACH,aAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAoBT,KAAK;AACH,aAAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAkBT,KAAK;AACH,aAAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaT,KAAK;AACH,aAAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaT,KAAK;AACH,aAAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaT,KAAK;AACH,aAAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAWb,GAEMC,IAA4C;AAAA,EAChD,WAAW;AAAA,EACX,WAAW;AACb,GAEMC,IAGF;AAAA,EACF,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,KAAK;AACP;AAEO,SAASC,EACdC,GACyB;AACzB,SAAIA,EAAM,OAAaA,EAAM,OACtBN;AAAA,IACLG,EAAWG,EAAM,EAAE,KACjBF,EAAeE,EAAM,UAAU,MAAM,KACrC;AAAA,EAAA;AAEN;"}

package/dist/components/os-leaderboard-casino/sections/events-banner/events-banner.js

@@ -0,0 +1,89 @@
+import { LitElement as d, nothing as l, html as r } from "lit";
+import { keyed as h } from "lit/directives/keyed.js";
+import { property as m, state as v } from "lit/decorators.js";
+import { Component as f } from "../../../../shared/lib/lit/component.js";
+import { scss as u } from "../../../../shared/lib/lit/scss.js";
+import { DEFAULT_EVENTS_ROTATE_MS as b } from "../../constants/defaults.js";
+import { OS_LEADERBOARD_CASINO_EVENTS as _ } from "../../constants/tags.js";
+import { osLeaderboardCasinoTheme as $ } from "../../theme/styles.js";
+import { resolveEventIcon as g } from "./components/event-icons.js";
+import E from "./events-banner.scss.js";
+var x = Object.defineProperty, R = Object.getOwnPropertyDescriptor, p = (t, e, n, s) => {
+  for (var o = s > 1 ? void 0 : s ? R(e, n) : e, i = t.length - 1, c; i >= 0; i--)
+    (c = t[i]) && (o = (s ? c(e, n, o) : c(o)) || o);
+  return s && o && x(e, n, o), o;
+};
+let a = class extends d {
+  constructor() {
+    super(...arguments), this.index = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.startRotation();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.stopRotation();
+  }
+  updated(t) {
+    t.has("section") && (this.index = 0, this.startRotation());
+  }
+  startRotation() {
+    this.stopRotation();
+    const t = this.section?.events?.length ?? 0;
+    t < 2 || (this.timer = setInterval(() => {
+      this.index = (this.index + 1) % t;
+    }, this.section?.rotateMs ?? b));
+  }
+  stopRotation() {
+    this.timer && clearInterval(this.timer), this.timer = void 0;
+  }
+  goTo(t) {
+    this.index = t, this.startRotation();
+  }
+  render() {
+    const t = this.section?.events ?? [];
+    if (!t.length) return l;
+    const e = t[this.index], n = e.accent ?? "gold", s = g(e);
+    return r`
+      <div class="banner" role="region" aria-label="Promotions" aria-live="polite">
+        <div class="chip accent-${n}">
+          ${typeof s == "string" ? r`${s}` : s}
+        </div>
+        ${h(
+      this.index,
+      r`<div class="body">
+            <p class="title">${e.title}</p>
+            ${e.subtitle ? r`<p class="sub">${e.subtitle}</p>` : l}
+          </div>`
+    )}
+        <div class="right">
+          <span class="tag accent-${n}">Event</span>
+          ${t.length > 1 ? r`<div class="dots">
+                ${t.map(
+      (o, i) => r`<button
+                    type="button"
+                    class="dot"
+                    aria-current=${i === this.index ? "true" : "false"}
+                    aria-label="Show event ${i + 1}"
+                    @click=${() => this.goTo(i)}
+                  ></button>`
+    )}
+              </div>` : l}
+        </div>
+      </div>
+    `;
+  }
+};
+a.styles = [$, u(E)];
+p([
+  m({ attribute: !1 })
+], a.prototype, "section", 2);
+p([
+  v()
+], a.prototype, "index", 2);
+a = p([
+  f({ selector: _ })
+], a);
+export {
+  a as OsLeaderboardCasinoEvents
+};
+//# sourceMappingURL=events-banner.js.map

package/dist/components/os-leaderboard-casino/sections/events-banner/events-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events-banner.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/events-banner/events-banner.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { keyed } from 'lit/directives/keyed.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 { DEFAULT_EVENTS_ROTATE_MS } from '@os-leaderboard-casino/constants/defaults.js';\nimport { OS_LEADERBOARD_CASINO_EVENTS } from '@os-leaderboard-casino/constants/tags.js';\nimport { osLeaderboardCasinoTheme } from '@os-leaderboard-casino/theme/index.js';\nimport type { OsLeaderboardCasinoEventsSection } from '@os-leaderboard-casino/types/sections.js';\nimport { resolveEventIcon } from './components/event-icons.js';\nimport styles from './events-banner.scss?inline';\n\n/** Promotional events — v0 Glass Glow (icon chip, fade rotation). */\n@Component({ selector: OS_LEADERBOARD_CASINO_EVENTS })\nexport class OsLeaderboardCasinoEvents extends LitElement {\n  static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n  @property({ attribute: false })\n  section!: OsLeaderboardCasinoEventsSection;\n\n  @state()\n  private index = 0;\n\n  private timer?: ReturnType<typeof setInterval>;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.startRotation();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.stopRotation();\n  }\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has('section')) {\n      this.index = 0;\n      this.startRotation();\n    }\n  }\n\n  private startRotation() {\n    this.stopRotation();\n    const count = this.section?.events?.length ?? 0;\n    if (count < 2) return;\n    this.timer = setInterval(() => {\n      this.index = (this.index + 1) % count;\n    }, this.section?.rotateMs ?? DEFAULT_EVENTS_ROTATE_MS);\n  }\n\n  private stopRotation() {\n    if (this.timer) clearInterval(this.timer);\n    this.timer = undefined;\n  }\n\n  private goTo(index: number) {\n    this.index = index;\n    this.startRotation();\n  }\n\n  render() {\n    const events = this.section?.events ?? [];\n    if (!events.length) return nothing;\n\n    const event = events[this.index];\n    const accent = event.accent ?? 'gold';\n    const icon = resolveEventIcon(event);\n\n    return html`\n      <div class=\"banner\" role=\"region\" aria-label=\"Promotions\" aria-live=\"polite\">\n        <div class=\"chip accent-${accent}\">\n          ${typeof icon === 'string' ? html`${icon}` : icon}\n        </div>\n        ${keyed(\n          this.index,\n          html`<div class=\"body\">\n            <p class=\"title\">${event.title}</p>\n            ${event.subtitle\n              ? html`<p class=\"sub\">${event.subtitle}</p>`\n              : nothing}\n          </div>`,\n        )}\n        <div class=\"right\">\n          <span class=\"tag accent-${accent}\">Event</span>\n          ${events.length > 1\n            ? html`<div class=\"dots\">\n                ${events.map(\n                  (_, i) => html`<button\n                    type=\"button\"\n                    class=\"dot\"\n                    aria-current=${i === this.index ? 'true' : 'false'}\n                    aria-label=\"Show event ${i + 1}\"\n                    @click=${() => this.goTo(i)}\n                  ></button>`,\n                )}\n              </div>`\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["OsLeaderboardCasinoEvents","LitElement","changed","count","DEFAULT_EVENTS_ROTATE_MS","index","events","nothing","event","accent","icon","resolveEventIcon","html","keyed","_","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","state","Component","OS_LEADERBOARD_CASINO_EVENTS"],"mappings":";;;;;;;;;;;;;;;AAcO,IAAMA,IAAN,cAAwCC,EAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA,GAOL,KAAQ,QAAQ;AAAA,EAAA;AAAA,EAIhB,oBAA0B;AACxB,UAAM,kBAAA,GACN,KAAK,cAAA;AAAA,EACP;AAAA,EAEA,uBAA6B;AAC3B,UAAM,qBAAA,GACN,KAAK,aAAA;AAAA,EACP;AAAA,EAEA,QAAQC,GAA+B;AACrC,IAAIA,EAAQ,IAAI,SAAS,MACvB,KAAK,QAAQ,GACb,KAAK,cAAA;AAAA,EAET;AAAA,EAEQ,gBAAgB;AACtB,SAAK,aAAA;AACL,UAAMC,IAAQ,KAAK,SAAS,QAAQ,UAAU;AAC9C,IAAIA,IAAQ,MACZ,KAAK,QAAQ,YAAY,MAAM;AAC7B,WAAK,SAAS,KAAK,QAAQ,KAAKA;AAAA,IAClC,GAAG,KAAK,SAAS,YAAYC,CAAwB;AAAA,EACvD;AAAA,EAEQ,eAAe;AACrB,IAAI,KAAK,SAAO,cAAc,KAAK,KAAK,GACxC,KAAK,QAAQ;AAAA,EACf;AAAA,EAEQ,KAAKC,GAAe;AAC1B,SAAK,QAAQA,GACb,KAAK,cAAA;AAAA,EACP;AAAA,EAEA,SAAS;AACP,UAAMC,IAAS,KAAK,SAAS,UAAU,CAAA;AACvC,QAAI,CAACA,EAAO,OAAQ,QAAOC;AAE3B,UAAMC,IAAQF,EAAO,KAAK,KAAK,GACzBG,IAASD,EAAM,UAAU,QACzBE,IAAOC,EAAiBH,CAAK;AAEnC,WAAOI;AAAA;AAAA,kCAEuBH,CAAM;AAAA,YAC5B,OAAOC,KAAS,WAAWE,IAAOF,CAAI,KAAKA,CAAI;AAAA;AAAA,UAEjDG;AAAA,MACA,KAAK;AAAA,MACLD;AAAA,+BACqBJ,EAAM,KAAK;AAAA,cAC5BA,EAAM,WACJI,mBAAsBJ,EAAM,QAAQ,SACpCD,CAAO;AAAA;AAAA,IAAA,CAEd;AAAA;AAAA,oCAE2BE,CAAM;AAAA,YAC9BH,EAAO,SAAS,IACdM;AAAA,kBACIN,EAAO;AAAA,MACP,CAACQ,GAAG,MAAMF;AAAA;AAAA;AAAA,mCAGO,MAAM,KAAK,QAAQ,SAAS,OAAO;AAAA,6CACzB,IAAI,CAAC;AAAA,6BACrB,MAAM,KAAK,KAAK,CAAC,CAAC;AAAA;AAAA,IAAA,CAE9B;AAAA,wBAEHL,CAAO;AAAA;AAAA;AAAA;AAAA,EAInB;AACF;AAxFaP,EACJ,SAAS,CAACe,GAA0BC,EAAKC,CAAM,CAAC;AAGvDC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GAHnBnB,EAIX,WAAA,WAAA,CAAA;AAGQkB,EAAA;AAAA,EADPE,EAAA;AAAM,GANIpB,EAOH,WAAA,SAAA,CAAA;AAPGA,IAANkB,EAAA;AAAA,EADNG,EAAU,EAAE,UAAUC,EAAA,CAA8B;AAAA,GACxCtB,CAAA;"}

package/dist/components/os-leaderboard-casino/sections/events-banner/events-banner.scss.js

@@ -0,0 +1,5 @@
+const r = ":host{display:block;width:100%}.banner{position:relative;display:flex;align-items:center;gap:18px;padding:16px 20px;border-radius:var(--radius-sm);background:var(--panel-bg);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);overflow:hidden;cursor:pointer}.chip{position:relative;z-index:1;flex:none;width:50px;height:50px;display:grid;place-items:center;border-radius:14px;color:var(--gold);font-size:22px;background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 16%,transparent),color-mix(in srgb,var(--violet) 12%,transparent));border:1px solid color-mix(in srgb,var(--gold) 30%,transparent)}.chip.accent-violet{color:var(--violet);background:linear-gradient(160deg,color-mix(in srgb,var(--violet) 18%,transparent),color-mix(in srgb,var(--gold) 8%,transparent));border-color:color-mix(in srgb,var(--violet) 30%,transparent)}.chip.accent-green{color:var(--green);background:linear-gradient(160deg,color-mix(in srgb,var(--green) 18%,transparent),color-mix(in srgb,var(--gold) 8%,transparent));border-color:color-mix(in srgb,var(--green) 30%,transparent)}.chip.accent-red{color:var(--red);background:linear-gradient(160deg,color-mix(in srgb,var(--red) 18%,transparent),color-mix(in srgb,var(--gold) 8%,transparent));border-color:color-mix(in srgb,var(--red) 30%,transparent)}.chip svg{width:26px;height:26px}.body{position:relative;z-index:1;min-width:0;flex:1}.title{margin:0;font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sub{margin:4px 0 0;font-size:12px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.right{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;align-self:stretch;flex:none;min-height:50px}.tag{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#d9cdff;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--violet) 14%,transparent);border:1px solid color-mix(in srgb,var(--violet) 32%,transparent)}.tag.accent-gold{color:var(--gold-strong);background:var(--gold-soft);border-color:color-mix(in srgb,var(--gold) 35%,transparent)}.tag.accent-green{color:color-mix(in srgb,var(--green) 85%,var(--text));background:color-mix(in srgb,var(--green) 14%,transparent);border-color:color-mix(in srgb,var(--green) 32%,transparent)}.tag.accent-red{color:color-mix(in srgb,var(--red) 85%,var(--text));background:color-mix(in srgb,var(--red) 14%,transparent);border-color:color-mix(in srgb,var(--red) 32%,transparent)}.dots{display:flex;gap:6px}.dot{height:4px;width:14px;border-radius:999px;border:none;padding:0;cursor:pointer;background:color-mix(in srgb,var(--text) 16%,transparent);transition:width var(--transition-fast),background var(--transition-fast)}.dot[aria-current=true]{width:26px;background:var(--gold)}@media(max-width:560px){.banner{gap:14px;padding:14px 16px;align-items:stretch}.title,.sub{white-space:normal}.body,.chip{align-self:center}}";
+export {
+  r as default
+};
+//# sourceMappingURL=events-banner.scss.js.map

package/dist/components/os-leaderboard-casino/sections/events-banner/events-banner.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events-banner.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,18 @@
+import { html as r } from "lit";
+function t(e) {
+  return r`<footer class="page-footer">
+  <!-- <p>${e.displayText}</p> -->
+  <!-- TODO: hardcoded -->
+  <p>
+    Powered by
+    <a href="https://oddsmith.io" target="_blank" rel="noopener noreferrer">
+      Oddsmith.io
+    </a>
+  </p>
+</footer>
+`;
+}
+export {
+  t as default
+};
+//# sourceMappingURL=footer-section.html.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"footer-section.html.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/footer-section/footer-section.html?lit-html"],"sourcesContent":["\nimport { html } from 'lit';\n\nexport default function render(host) {\n  return html`<footer class=\"page-footer\">\n  <!-- <p>${host.displayText}</p> -->\n  <!-- TODO: hardcoded -->\n  <p>\n    Powered by\n    <a href=\"https://oddsmith.io\" target=\"_blank\" rel=\"noopener noreferrer\">\n      Oddsmith.io\n    </a>\n  </p>\n</footer>\n`;\n}\n"],"names":["render","host","html"],"mappings":";AAGe,SAASA,EAAOC,GAAM;AACnC,SAAOC;AAAA,YACGD,EAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU5B;"}

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

@@ -0,0 +1,38 @@
+import { LitElement as a, nothing as l } from "lit";
+import { property as f } from "lit/decorators.js";
+import { Component as O } from "../../../../shared/lib/lit/component.js";
+import { scss as c } from "../../../../shared/lib/lit/scss.js";
+import { OS_LEADERBOARD_CASINO_FOOTER as u } from "../../constants/tags.js";
+import { osLeaderboardCasinoTheme as _ } from "../../theme/styles.js";
+import h from "./footer-section.html.js";
+import x from "./footer-section.scss.js";
+var y = Object.defineProperty, d = Object.getOwnPropertyDescriptor, m = (n, e, s, o) => {
+  for (var t = o > 1 ? void 0 : o ? d(e, s) : e, p = n.length - 1, i; p >= 0; p--)
+    (i = n[p]) && (t = (o ? i(e, s, t) : i(t)) || t);
+  return o && t && y(e, s, t), t;
+};
+let r = class extends a {
+  constructor() {
+    super(...arguments), this.text = "";
+  }
+  get displayText() {
+    return this.section?.text ?? this.text;
+  }
+  render() {
+    return this.displayText ? h(this) : l;
+  }
+};
+r.styles = [_, c(x)];
+m([
+  f({ attribute: !1 })
+], r.prototype, "section", 2);
+m([
+  f({ type: String })
+], r.prototype, "text", 2);
+r = m([
+  O({ selector: u })
+], r);
+export {
+  r as OsLeaderboardCasinoFooter
+};
+//# sourceMappingURL=footer-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"footer-section.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/footer-section/footer-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_FOOTER } from '@os-leaderboard-casino/constants/tags.js';\nimport { osLeaderboardCasinoTheme } from '@os-leaderboard-casino/theme/index.js';\nimport type { OsLeaderboardCasinoFooterSection } from '@os-leaderboard-casino/types/sections.js';\nimport type { FooterSectionHost } from './footer-section.host.js';\nimport renderTemplate from './footer-section.html?lit-html';\nimport styles from './footer-section.scss?inline';\n\n@Component({ selector: OS_LEADERBOARD_CASINO_FOOTER })\nexport class OsLeaderboardCasinoFooter\n  extends LitElement\n  implements FooterSectionHost\n{\n  static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n  @property({ attribute: false })\n  section?: OsLeaderboardCasinoFooterSection;\n\n  @property({ type: String })\n  text = '';\n\n  get displayText(): string {\n    return this.section?.text ?? this.text;\n  }\n\n  render() {\n    if (!this.displayText) return nothing;\n    return renderTemplate(this);\n  }\n}\n"],"names":["OsLeaderboardCasinoFooter","LitElement","renderTemplate","nothing","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","Component","OS_LEADERBOARD_CASINO_FOOTER"],"mappings":";;;;;;;;;;;;;AAYO,IAAMA,IAAN,cACGC,EAEV;AAAA,EAHO,cAAA;AAAA,UAAA,GAAA,SAAA,GAUL,KAAA,OAAO;AAAA,EAAA;AAAA,EAEP,IAAI,cAAsB;AACxB,WAAO,KAAK,SAAS,QAAQ,KAAK;AAAA,EACpC;AAAA,EAEA,SAAS;AACP,WAAK,KAAK,cACHC,EAAe,IAAI,IADIC;AAAA,EAEhC;AACF;AApBaH,EAIJ,SAAS,CAACI,GAA0BC,EAAKC,CAAM,CAAC;AAGvDC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GANnBR,EAOX,WAAA,WAAA,CAAA;AAGAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATfR,EAUX,WAAA,QAAA,CAAA;AAVWA,IAANO,EAAA;AAAA,EADNE,EAAU,EAAE,UAAUC,EAAA,CAA8B;AAAA,GACxCV,CAAA;"}

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

@@ -0,0 +1,5 @@
+const e = ":host{display:block;width:100%}.page-footer{margin-top:4px;padding:14px 4px 0;width:100%;display:grid;gap:10px;border-top:1px solid var(--hairline)}.page-footer p{margin:0;text-align:center;font-size:11.5px;line-height:1.55;color:var(--text-faint)}.page-footer p a,.page-footer__brand{color:inherit;text-decoration:underline;text-underline-offset:2px}.page-footer p a:hover,.page-footer__brand:hover{color:var(--text-dim)}";
+export {
+  e as default
+};
+//# sourceMappingURL=footer-section.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"footer-section.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,15 @@
+import { html as s } from "lit";
+function i(e) {
+  return s`<section>
+  <div class="section-header">
+    <h2 class="section-title">${e.sectionTitle}</h2>
+    <span class="hint">every bet earns points</span>
+  </div>
+  <div class="games-row">${e.renderGames()}</div>
+</section>
+`;
+}
+export {
+  i as default
+};
+//# sourceMappingURL=games-section.html.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"games-section.html.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/games-section/games-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=\"hint\">every bet earns points</span>\n  </div>\n  <div class=\"games-row\">${host.renderGames()}</div>\n</section>\n`;\n}\n"],"names":["render","host","html"],"mappings":";AAGe,SAASA,EAAOC,GAAM;AACnC,SAAOC;AAAA;AAAA,gCAEuBD,EAAK,YAAY;AAAA;AAAA;AAAA,2BAGtBA,EAAK,aAAa;AAAA;AAAA;AAG7C;"}

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

@@ -0,0 +1,86 @@
+import { LitElement as m, html as d, nothing as h } from "lit";
+import { property as _ } from "lit/decorators.js";
+import p from "../../../../shared/vendor/keen-slider-keen-slider.es.js";
+import { Component as f } from "../../../../shared/lib/lit/component.js";
+import { scss as g } from "../../../../shared/lib/lit/scss.js";
+import { OS_LEADERBOARD_CASINO_GAMES as u } from "../../constants/tags.js";
+import { osLeaderboardCasinoTheme as v } from "../../theme/styles.js";
+import { iconService as a } from "../../services/icon.service.js";
+import S from "./games-section.html.js";
+import y from "./games-section.scss.js";
+var C = Object.defineProperty, b = Object.getOwnPropertyDescriptor, c = (e, s, r, i) => {
+  for (var t = i > 1 ? void 0 : i ? b(s, r) : s, l = e.length - 1, n; l >= 0; l--)
+    (n = e[l]) && (t = (i ? n(s, r, t) : n(t)) || t);
+  return i && t && C(s, r, t), t;
+};
+const w = "(max-width: 767px)";
+let o = class extends m {
+  constructor() {
+    super(...arguments), this._onSliderMqChange = () => this._syncSlider(), this._syncSlider = () => {
+      if (!(this.section?.games ?? []).length) return;
+      const s = this.shadowRoot?.querySelector(".games-row");
+      if (!s) return;
+      if (!(this._sliderMq?.matches ?? !1)) {
+        this._destroySlider();
+        return;
+      }
+      s.classList.add("keen-slider"), this._slider ? this._slider.update() : this._slider = new p(s, {
+        mode: "free",
+        slides: { perView: "auto", spacing: 10 }
+      });
+    };
+  }
+  get sectionTitle() {
+    return this.section?.title ?? "Qualifying Games";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._sliderMq = window.matchMedia(w), this._sliderMq.addEventListener("change", this._onSliderMqChange);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._sliderMq?.removeEventListener("change", this._onSliderMqChange), this._sliderMq = void 0, this._destroySlider();
+  }
+  updated() {
+    this._syncSlider();
+  }
+  _destroySlider() {
+    this._slider?.destroy(), this._slider = void 0;
+    const e = this.shadowRoot?.querySelector(".games-row");
+    e && e.classList.remove("keen-slider");
+  }
+  renderCard(e, s) {
+    const r = a.resolveGameIconName(e.id, s), i = e.imageUrl ?? a.get(r).url;
+    return d`
+      <article class="card keen-slider__slide" data-game-id=${e.id}>
+        <div class="thumb">
+          <img
+            src=${i}
+            alt=${e.title}
+            loading="lazy"
+            draggable="false"
+          />
+        </div>
+        <div class="body">
+          <div class="title">${e.title}</div>
+        </div>
+      </article>
+    `;
+  }
+  renderGames() {
+    const e = this.section?.games ?? [];
+    return d`${e.map((s, r) => this.renderCard(s, r))}`;
+  }
+  render() {
+    return (this.section?.games ?? []).length ? S(this) : h;
+  }
+};
+o.styles = [v, g(y)];
+c([
+  _({ attribute: !1 })
+], o.prototype, "section", 2);
+o = c([
+  f({ selector: u })
+], o);
+export {
+  o as OsLeaderboardCasinoGames
+};
+//# sourceMappingURL=games-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"games-section.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/games-section/games-section.ts"],"sourcesContent":["import { html, LitElement, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport KeenSlider, { type KeenSliderInstance } from 'keen-slider';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport { OS_LEADERBOARD_CASINO_GAMES } from '@os-leaderboard-casino/constants/tags.js';\nimport { osLeaderboardCasinoTheme } from '@os-leaderboard-casino/theme/index.js';\nimport type {\n  OsLeaderboardCasinoGameItem,\n  OsLeaderboardCasinoGamesSection,\n} from '@os-leaderboard-casino/types/sections.js';\nimport { iconService } from '@os-leaderboard-casino/services/icon.service.js';\nimport type { GamesSectionHost } from './games-section.host.js';\nimport renderTemplate from './games-section.html?lit-html';\nimport styles from './games-section.scss?inline';\n\nconst SLIDER_MEDIA_QUERY = '(max-width: 767px)';\n\n/** Qualifying games — title + provider cards in a horizontal row. */\n@Component({ selector: OS_LEADERBOARD_CASINO_GAMES })\nexport class OsLeaderboardCasinoGames\n  extends LitElement\n  implements GamesSectionHost\n{\n  static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n  private _slider?: KeenSliderInstance;\n  private _sliderMq?: MediaQueryList;\n  private readonly _onSliderMqChange = () => this._syncSlider();\n\n  @property({ attribute: false })\n  section!: OsLeaderboardCasinoGamesSection;\n\n  get sectionTitle(): string {\n    return this.section?.title ?? 'Qualifying Games';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._sliderMq = window.matchMedia(SLIDER_MEDIA_QUERY);\n    this._sliderMq.addEventListener('change', this._onSliderMqChange);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._sliderMq?.removeEventListener('change', this._onSliderMqChange);\n    this._sliderMq = undefined;\n    this._destroySlider();\n  }\n\n  protected updated() {\n    this._syncSlider();\n  }\n\n  private _destroySlider() {\n    this._slider?.destroy();\n    this._slider = undefined;\n\n    const el = this.shadowRoot?.querySelector<HTMLElement>('.games-row');\n    if (el) el.classList.remove('keen-slider');\n  }\n\n  private _syncSlider = () => {\n    const games = this.section?.games ?? [];\n    if (!games.length) return;\n\n    const el = this.shadowRoot?.querySelector<HTMLElement>('.games-row');\n    if (!el) return;\n\n    // TODO: slider is shown only on small screens\n    const useSlider = this._sliderMq?.matches ?? false;\n\n    if (!useSlider) {\n      this._destroySlider();\n      return;\n    }\n\n    el.classList.add('keen-slider');\n\n    if (!this._slider) {\n      this._slider = new KeenSlider(el, {\n        mode: 'free',\n        slides: { perView: 'auto', spacing: 10 },\n      });\n    } else {\n      this._slider.update();\n    }\n  };\n\n  private renderCard(game: OsLeaderboardCasinoGameItem, index: number) {\n    const iconName = iconService.resolveGameIconName(game.id, index);\n    const imageUrl = game.imageUrl ?? iconService.get(iconName).url!;\n    return html`\n      <article class=\"card keen-slider__slide\" data-game-id=${game.id}>\n        <div class=\"thumb\">\n          <img\n            src=${imageUrl}\n            alt=${game.title}\n            loading=\"lazy\"\n            draggable=\"false\"\n          />\n        </div>\n        <div class=\"body\">\n          <div class=\"title\">${game.title}</div>\n        </div>\n      </article>\n    `;\n  }\n\n  renderGames(): TemplateResult {\n    const games = this.section?.games ?? [];\n    return html`${games.map((game, index) => this.renderCard(game, index))}`;\n  }\n\n  render() {\n    const games = this.section?.games ?? [];\n    if (!games.length) return nothing;\n    return renderTemplate(this);\n  }\n}\n"],"names":["SLIDER_MEDIA_QUERY","OsLeaderboardCasinoGames","LitElement","el","KeenSlider","game","index","iconName","iconService","imageUrl","html","games","renderTemplate","nothing","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","Component","OS_LEADERBOARD_CASINO_GAMES"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAMA,IAAqB;AAIpB,IAAMC,IAAN,cACGC,EAEV;AAAA,EAHO,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAiB,oBAAoB,MAAM,KAAK,YAAA,GAkChD,KAAQ,cAAc,MAAM;AAE1B,UAAI,EADU,KAAK,SAAS,SAAS,CAAA,GAC1B,OAAQ;AAEnB,YAAMC,IAAK,KAAK,YAAY,cAA2B,YAAY;AACnE,UAAI,CAACA,EAAI;AAKT,UAAI,EAFc,KAAK,WAAW,WAAW,KAE7B;AACd,aAAK,eAAA;AACL;AAAA,MACF;AAEA,MAAAA,EAAG,UAAU,IAAI,aAAa,GAEzB,KAAK,UAMR,KAAK,QAAQ,OAAA,IALb,KAAK,UAAU,IAAIC,EAAWD,GAAI;AAAA,QAChC,MAAM;AAAA,QACN,QAAQ,EAAE,SAAS,QAAQ,SAAS,GAAA;AAAA,MAAG,CACxC;AAAA,IAIL;AAAA,EAAA;AAAA,EAtDA,IAAI,eAAuB;AACzB,WAAO,KAAK,SAAS,SAAS;AAAA,EAChC;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAA,GACN,KAAK,YAAY,OAAO,WAAWH,CAAkB,GACrD,KAAK,UAAU,iBAAiB,UAAU,KAAK,iBAAiB;AAAA,EAClE;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAA,GACN,KAAK,WAAW,oBAAoB,UAAU,KAAK,iBAAiB,GACpE,KAAK,YAAY,QACjB,KAAK,eAAA;AAAA,EACP;AAAA,EAEU,UAAU;AAClB,SAAK,YAAA;AAAA,EACP;AAAA,EAEQ,iBAAiB;AACvB,SAAK,SAAS,QAAA,GACd,KAAK,UAAU;AAEf,UAAMG,IAAK,KAAK,YAAY,cAA2B,YAAY;AACnE,IAAIA,KAAIA,EAAG,UAAU,OAAO,aAAa;AAAA,EAC3C;AAAA,EA6BQ,WAAWE,GAAmCC,GAAe;AACnE,UAAMC,IAAWC,EAAY,oBAAoBH,EAAK,IAAIC,CAAK,GACzDG,IAAWJ,EAAK,YAAYG,EAAY,IAAID,CAAQ,EAAE;AAC5D,WAAOG;AAAA,8DACmDL,EAAK,EAAE;AAAA;AAAA;AAAA,kBAGnDI,CAAQ;AAAA,kBACRJ,EAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAMGA,EAAK,KAAK;AAAA;AAAA;AAAA;AAAA,EAIvC;AAAA,EAEA,cAA8B;AAC5B,UAAMM,IAAQ,KAAK,SAAS,SAAS,CAAA;AACrC,WAAOD,IAAOC,EAAM,IAAI,CAACN,GAAMC,MAAU,KAAK,WAAWD,GAAMC,CAAK,CAAC,CAAC;AAAA,EACxE;AAAA,EAEA,SAAS;AAEP,YADc,KAAK,SAAS,SAAS,CAAA,GAC1B,SACJM,EAAe,IAAI,IADAC;AAAA,EAE5B;AACF;AAnGaZ,EAIJ,SAAS,CAACa,GAA0BC,EAAKC,CAAM,CAAC;AAOvDC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GAVnBjB,EAWX,WAAA,WAAA,CAAA;AAXWA,IAANgB,EAAA;AAAA,EADNE,EAAU,EAAE,UAAUC,EAAA,CAA6B;AAAA,GACvCnB,CAAA;"}

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

@@ -0,0 +1,5 @@
+const e = ":host{display:block;width:100%;min-width:0}.hint{font-size:11px;color:var(--text-faint)}.games-row{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;min-width:0;gap:10px}.games-row.keen-slider{gap:0;overflow:hidden;position:relative;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.games-row.keen-slider[data-keen-slider-moves] *{pointer-events:none}.card{box-sizing:border-box;display:flex;flex-direction:column;min-width:0;border-radius:var(--radius-sm);border:1px solid var(--panel-border);background:var(--panel-bg);overflow:hidden;cursor:pointer;transition:border-color var(--transition-fast)}@media(min-width:768px){.card{flex:1 1 0}}@media(max-width:767px){.card{flex:none;width:140px}}.card:hover{border-color:color-mix(in srgb,var(--gold) 35%,var(--panel-border))}.thumb{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;overflow:hidden;background:color-mix(in srgb,var(--surface-solid) 90%,var(--violet-soft))}.thumb img{width:70px;height:70px;object-fit:contain;display:block;pointer-events:none;-webkit-user-drag:none}.card[data-game-id=gates-of-olympus] .thumb img{margin-left:16px}.body{display:flex;flex-direction:column;gap:4px;padding:7px 8px 9px}.title{font-size:11px;font-weight:800;line-height:1.25;letter-spacing:.04em;text-transform:uppercase;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
+export {
+  e as default
+};
+//# sourceMappingURL=games-section.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"games-section.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,34 @@
+import { html as s } from "lit";
+function a(n) {
+  return s`<section class="hero">
+  <img
+    class="banner-img"
+    ?hidden=${!n.showBanner}
+    src="${n.bannerUrl}"
+    alt="${n.bannerAlt}"
+  />
+  <div class="inner">
+    <span class="status ${n.status ?? ""}" ?hidden=${!n.showStatus}>
+      <i class="dot" ?hidden=${!n.showActiveDot}></i>
+      ${n.statusLabel}
+    </span>
+    <h2>${n.section.title}</h2>
+    <p class="description" ?hidden=${!n.showDescription}>
+      ${n.section.description}
+    </p>
+    <div class="pool" ?hidden=${!n.showPool}>
+      <span class="label">${n.poolLabel}</span>
+      <span class="value ${n.poolBump ? "bump" : ""}"
+        >${n.poolValueLabel}</span
+      >
+      <span class="rising" ?hidden=${!n.showRising}><i></i> rising</span>
+    </div>
+    ${n.renderCountdown()}
+  </div>
+</section>
+`;
+}
+export {
+  a as default
+};
+//# sourceMappingURL=hero-section.html.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hero-section.html.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/hero-section/hero-section.html?lit-html"],"sourcesContent":["\nimport { html } from 'lit';\n\nexport default function render(host) {\n  return html`<section class=\"hero\">\n  <img\n    class=\"banner-img\"\n    ?hidden=${!host.showBanner}\n    src=\"${host.bannerUrl}\"\n    alt=\"${host.bannerAlt}\"\n  />\n  <div class=\"inner\">\n    <span class=\"status ${host.status ?? ''}\" ?hidden=${!host.showStatus}>\n      <i class=\"dot\" ?hidden=${!host.showActiveDot}></i>\n      ${host.statusLabel}\n    </span>\n    <h2>${host.section.title}</h2>\n    <p class=\"description\" ?hidden=${!host.showDescription}>\n      ${host.section.description}\n    </p>\n    <div class=\"pool\" ?hidden=${!host.showPool}>\n      <span class=\"label\">${host.poolLabel}</span>\n      <span class=\"value ${host.poolBump ? 'bump' : ''}\"\n        >${host.poolValueLabel}</span\n      >\n      <span class=\"rising\" ?hidden=${!host.showRising}><i></i> rising</span>\n    </div>\n    ${host.renderCountdown()}\n  </div>\n</section>\n`;\n}\n"],"names":["render","host","html"],"mappings":";AAGe,SAASA,EAAOC,GAAM;AACnC,SAAOC;AAAA;AAAA;AAAA,cAGK,CAACD,EAAK,UAAU;AAAA,WACnBA,EAAK,SAAS;AAAA,WACdA,EAAK,SAAS;AAAA;AAAA;AAAA,0BAGCA,EAAK,UAAU,EAAE,aAAa,CAACA,EAAK,UAAU;AAAA,+BACzC,CAACA,EAAK,aAAa;AAAA,QAC1CA,EAAK,WAAW;AAAA;AAAA,UAEdA,EAAK,QAAQ,KAAK;AAAA,qCACS,CAACA,EAAK,eAAe;AAAA,QAClDA,EAAK,QAAQ,WAAW;AAAA;AAAA,gCAEA,CAACA,EAAK,QAAQ;AAAA,4BAClBA,EAAK,SAAS;AAAA,2BACfA,EAAK,WAAW,SAAS,EAAE;AAAA,WAC3CA,EAAK,cAAc;AAAA;AAAA,qCAEO,CAACA,EAAK,UAAU;AAAA;AAAA,MAE/CA,EAAK,gBAAe,CAAE;AAAA;AAAA;AAAA;AAI5B;"}