@everymatrix/lottery-oddsbom-bomb 0.0.1

package/dist/cjs/lottery-oddsbom-bomb.cjs.entry.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const lotteryOddsbomBomb = require('./lottery-oddsbom-bomb-2e7290d5.js');
+require('./index-68db8b3b.js');
+
+
+
+exports.lottery_oddsbom_bomb = lotteryOddsbomBomb.LotteryOddsbomBomb;

package/dist/cjs/lottery-oddsbom-bomb.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-68db8b3b.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+/*
+ Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('lottery-oddsbom-bomb.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["lottery-oddsbom-bomb.cjs",[[1,"lottery-oddsbom-bomb",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"groupId":[513,"group-id"],"activeBomb":[32],"bombList":[32],"gameList":[32],"liveDrawsInfoByGroupId":[32],"isLoading":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "components/lottery-oddsbom-bomb/lottery-oddsbom-bomb.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/lottery-oddsbom-bomb/index.js

@@ -0,0 +1 @@
+export { LotteryOddsbomBomb } from './lottery-oddsbom-bomb';

package/dist/collection/components/lottery-oddsbom-bomb/lottery-oddsbom-bomb.css

@@ -0,0 +1,289 @@
+/* --- Component: Bomb Card Grid --- */
+.lottery-oddsbom-bomb-wrapper {
+  background: var(--emw--color-background, #fff);
+  color: var(--emw--color-typography, #000);
+  height: 100%;
+}
+
+.bomb-grid-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  container-type: inline-size;
+  container-name: bomb-grid;
+  background: var(--emw--color-background, #fff);
+  color: var(--emw--color-typography, #000);
+  /* --- Component: Bomb Card --- */
+}
+.bomb-grid-container .bomb-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+  place-items: center;
+}
+.bomb-grid-container .bomb-card-wrapper {
+  width: 100%;
+  max-width: 30rem;
+  height: 100%;
+  box-sizing: border-box;
+  border-radius: 8px;
+  padding: 1rem;
+  border: 1px solid var(--emw--color-gray-100, #e6e6e6);
+}
+.bomb-grid-container .bomb-card {
+  height: 100%;
+  min-width: 24rem;
+  transition: transform 0.3s;
+}
+.bomb-grid-container .bomb-card:hover {
+  transform: scale(1.02);
+  cursor: pointer;
+}
+.bomb-grid-container .card-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 0.8rem;
+}
+.bomb-grid-container .card-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.bomb-grid-container .card-icon svg {
+  width: 28px;
+  height: 28px;
+}
+.bomb-grid-container .card-title {
+  flex-grow: 1;
+  word-break: break-all;
+}
+.bomb-grid-container .card-title h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+  word-wrap: break-word;
+}
+.bomb-grid-container .card-title p {
+  margin: 0;
+  color: var(--emw--color-typography-secondary, #333);
+  font-size: 0.9rem;
+  word-wrap: break-word;
+}
+.bomb-grid-container .card-info {
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 0.8rem;
+  flex-wrap: wrap;
+}
+.bomb-grid-container .card-tag {
+  background-color: var(--emw--color-tertiary, #e3f2fd);
+  padding: 0.3rem 0.75rem;
+  border-radius: 4px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  max-width: 120px;
+}
+.bomb-grid-container .card-matches {
+  max-height: 6.8rem;
+  overflow-y: auto;
+}
+.bomb-grid-container .card-matches ol {
+  margin: 0;
+  padding-left: 1.25rem;
+  font-size: 0.85rem;
+  line-height: 1.6;
+}
+.bomb-grid-container .card-matches li {
+  padding-left: 0.2rem;
+  word-wrap: break-word;
+}
+
+/* --- CONTAINER QUERIES FOR RESPONSIVENESS --- */
+@container bomb-grid (max-width: 768px) {
+  .bomb-grid-container .bomb-grid {
+    /* On smaller containers, switch to a single column */
+    grid-template-columns: 1fr;
+  }
+  .bomb-card-wrapper .bomb-card {
+    min-width: 200px;
+  }
+}
+/* --- Component: Filter Controls --- */
+.OddsbomEntranceController__section {
+  margin: 1.5rem 0;
+  display: flex;
+  gap: 12px;
+  color: var(--emw--color-typography, #000);
+  container-type: inline-size;
+  container-name: controller;
+  justify-content: center;
+}
+.OddsbomEntranceController__label {
+  font-weight: 500;
+  white-space: nowrap;
+  width: 6rem;
+  line-height: 2.2rem;
+}
+.OddsbomEntranceController__segmented-control {
+  display: inline-flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+.OddsbomEntranceController__segment {
+  height: 2.2rem;
+  border: none;
+  padding: 0.3rem 0.8rem;
+  cursor: pointer;
+  font-weight: 500;
+  border-radius: 2rem;
+  outline: none;
+  white-space: nowrap;
+  background-color: var(--emw--color-background, #ffffff);
+  color: var(--emw--color-typography, #000);
+}
+.OddsbomEntranceController__segment--active {
+  background-color: var(--emw--color-primary-variant, #1367e7);
+  color: var(--emw--color-typography-reverse, #fff);
+  font-weight: 600;
+}
+.OddsbomEntranceController__segment--disabled:hover {
+  cursor: not-allowed !important;
+}
+.OddsbomEntranceController__segment:not(.OddsbomEntranceController__segment--active):hover {
+  background-color: var(--emw--color-background-tertiary, #ccc);
+}
+
+.skeleton-content {
+  display: flex;
+  flex-direction: column;
+  gap: 29px;
+  align-items: center;
+}
+
+.skeleton-item {
+  background: var(--emw--color-background-secondary, #f5f5f5);
+  border-radius: 4px;
+  height: 40px;
+  width: 200px;
+}
+
+.skeleton-animated {
+  animation: skeleton-shimmer 1.5s infinite linear;
+  background: linear-gradient(90deg, var(--emw--color-background-secondary, #f5f5f5) 25%, var(--emw--color-background-tertiary, #ccc) 37%, var(--emw--color-background-secondary, #f5f5f5) 63%);
+  background-size: 200% 100%;
+}
+
+@keyframes skeleton-shimmer {
+  to {
+    background-position: 100% 0;
+  }
+}
+.loading-icon.scale {
+  animation: scale 1s infinite ease-in-out;
+}
+
+@keyframes scale {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+}
+@container controller (max-width: 500px) {
+  .OddsbomEntranceController__segmented-control {
+    gap: 0rem;
+  }
+  .OddsbomEntranceController__segment {
+    padding: 0.2rem 0.6rem;
+  }
+  .OddsbomEntranceController__label,
+  .OddsbomEntranceController____segment {
+    line-height: 1.8rem;
+  }
+}
+.loading-wrap {
+  margin: 20px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100px;
+}
+.loading-wrap .dots-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+.loading-wrap .dot {
+  height: 14px;
+  width: 14px;
+  margin-right: 14px;
+  border-radius: 14px;
+  background-color: var(--emw--color-gray-300, #333);
+  animation: pulse 1.5s infinite ease-in-out;
+}
+.loading-wrap .dot:last-child {
+  margin-right: 0;
+}
+.loading-wrap .dot:nth-child(1) {
+  animation-delay: -0.3s;
+}
+.loading-wrap .dot:nth-child(2) {
+  animation-delay: -0.1s;
+}
+.loading-wrap .dot:nth-child(3) {
+  animation-delay: 0.1s;
+}
+@keyframes pulse {
+  0% {
+    transform: scale(0.8);
+    background-color: var(--emw--color-gray-300, #333);
+  }
+  50% {
+    transform: scale(1.2);
+    background-color: var(--emw--color-gray-100, #e6e6e6);
+  }
+  100% {
+    transform: scale(0.8);
+    background-color: var(--emw--color-gray-150, #6f6f6f);
+  }
+}
+
+.empty-draw-wrap {
+  padding-top: 100px;
+}
+.empty-draw-wrap .empty-draw {
+  width: 240px;
+  height: 160px;
+  padding: 18px 12px 12px 12px;
+  background: var(--emw--color-secondary-variant, #e3f2fd);
+  position: relative;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border-radius: 12px;
+}
+.empty-draw-wrap .empty-draw img {
+  position: absolute;
+  top: -64%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 200px;
+}
+.empty-draw-wrap .empty-draw-content {
+  display: flex;
+  gap: 4px;
+}
+.empty-draw-wrap .empty-draw-text {
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 20px;
+}

package/dist/collection/components/lottery-oddsbom-bomb/lottery-oddsbom-bomb.js

@@ -0,0 +1,292 @@
+import { getAssetPath, h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import { Bomb } from "../../models";
+import { fetchData, getTurnoverForAll } from "../../utils/api";
+import { DEFAULT_ALL_BOMB } from "../../utils/utils";
+import { translate } from "../../utils/locale.utils";
+const BombIcons = {
+    [Bomb.Football]: (h("svg", { height: "18px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", class: "text-sm" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.063 19.072l-.81-.97-.117.083.385-2.43.136-.211 2.23-3.464.037-.057h1.075a9.964 9.964 0 01-2.936 7.049zM4.769 5.112l2.8.877-.072 3.246-2.427 2.95-1.561-.153L2.39 9.26a9.977 9.977 0 012.378-4.148zm7.745-3.086l-.72 1.645-3.798 1.404-2.395-.75A9.953 9.953 0 0112 2c.174 0 .343.017.514.026zm7.346 3.812l-1.128 1.29-3.402-.755-.033-.008-2.446-2.241.057.016.862-1.973a9.996 9.996 0 016.09 3.67zm-1.87 8.894l-3.385-.493-1.358-4.067 2.173-2.755 3.144.698 1.347 3.634-1.921 2.983zm-4.64 5.787l4.304-1.486.62.742a9.945 9.945 0 01-5.878 2.205l.954-1.461zm-6.314-2.84l3.91.873-.001.003 1.509 1.507-1.24 1.898a9.946 9.946 0 01-5.908-2.553l1.73-1.728zm1.16-7.72l4.168.725 1.302 3.9-2.552 2.98-3.97-.885-1.412-3.724L8.196 9.96zM2 12c0-.31.019-.615.047-.92l.485 1.203-.454.907A9.934 9.934 0 012 11.999zM12 1C5.934 1 1 5.935 1 12c0 6.067 4.935 11 11 11 6.066 0 11-4.933 11-11 0-6.065-4.934-11-11-11z", fill: "currentColor" })))
+};
+export class LotteryOddsbomBomb {
+    constructor() {
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.language = 'en';
+        this.endpoint = undefined;
+        this.groupId = undefined;
+        this.activeBomb = 'All';
+        this.bombList = [];
+        this.gameList = [];
+        this.liveDrawsInfoByGroupId = {};
+        this.isLoading = false;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    connectedCallback() {
+        this.doFetchData();
+    }
+    async doFetchData(params = {}) {
+        try {
+            this.isLoading = true;
+            this.liveDrawsInfoByGroupId = await fetchData({
+                endpoint: this.endpoint,
+                groupId: this.groupId,
+                params
+            });
+            this.gameList = this.liveDrawsInfoByGroupId.liveDraws;
+            this.bombList = [DEFAULT_ALL_BOMB, ...this.liveDrawsInfoByGroupId.sportTags];
+            this.isLoading = false;
+            this.updateTurnoverForAll();
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    async updateTurnoverForAll() {
+        const turnovers = getTurnoverForAll({
+            endpoint: this.endpoint,
+            configs: this.gameList.map((item) => ({ gameId: item.gameId, drawId: item.drawId }))
+        });
+        for (let i = 0; i < this.gameList.length; i++) {
+            this.gameList[i].turnover = (await turnovers)[i].turnover;
+        }
+        this.gameList = [...this.gameList];
+    }
+    handleBombChange(code) {
+        this.activeBomb = code;
+        if (code === DEFAULT_ALL_BOMB.code) {
+            this.doFetchData();
+        }
+        else {
+            this.doFetchData({ sportTag: code });
+        }
+    }
+    renderLoading() {
+        return (h("div", { class: "loading-wrap" }, h("section", { class: "dots-container" }, h("div", { class: "dot" }), h("div", { class: "dot" }), h("div", { class: "dot" }), h("div", { class: "dot" }), h("div", { class: "dot" }))));
+    }
+    renderEmpty() {
+        const infoImagePath = getAssetPath('../static/empty-info.svg');
+        return (h("div", { class: "empty-draw-wrap" }, h("div", { class: "empty-draw" }, h("img", { src: infoImagePath, class: "empty-draw-logo" }), h("div", { class: "empty-draw-content" }, h("div", { class: "empty-draw-text" }, "\u24D8 Sorry. The game is not available now.")))));
+    }
+    renderFilter() {
+        return (h("div", { class: "OddsbomEntranceController__section" }, h("span", { class: "OddsbomEntranceController__label" }, "Select Bomb:"), !!this.bombList.length ? (h("div", { class: "OddsbomEntranceController__segmented-control" }, this.bombList.map(({ name, code }) => (h("button", { class: {
+                OddsbomEntranceController__segment: true,
+                'OddsbomEntranceController__segment--active': this.activeBomb === code
+            }, onClick: this.handleBombChange.bind(this, code) }, name))))) : (h("div", { class: "skeleton-content" }, h("div", { class: "skeleton-item skeleton-animated" })))));
+    }
+    renderMain() {
+        if (!this.gameList.length)
+            return this.renderEmpty();
+        return (h("div", { class: "bomb-grid" }, this.gameList.map(({ title, subTitle, icon, date, turnover, matchList, drawId, gameId }) => (h("div", { class: "bomb-card-wrapper" }, h("div", { class: "bomb-card", onClick: () => {
+                this.handleBombItemClick.emit({ drawId, gameId });
+            } }, h("div", { class: "card-header" }, BombIcons[icon] && h("div", { class: "card-icon football" }, BombIcons[icon]), h("div", { class: "card-title" }, h("h2", null, title), h("p", null, subTitle)), h("div", { class: "card-jackpot" })), h("div", { class: "card-info" }, h("span", { class: "card-tag" }, date), h("span", { class: "card-tag" }, translate('turnover', this.language) + turnover)), h("div", { class: "card-matches" }, h("ol", null, matchList.map((item) => (h("li", null, item)))))))))));
+    }
+    render() {
+        return (h("div", { key: 'ae8252d8cb1374af9bb8189bcd9edac313c7bc6a', ref: (el) => (this.stylingContainer = el), class: "lottery-oddsbom-bomb-wrapper" }, this.renderFilter(), h("div", { key: '3f673f335248057370e7e57076cc387a86dc4099', class: "bomb-grid-container" }, this.isLoading ? this.renderLoading() : this.renderMain())));
+    }
+    static get is() { return "lottery-oddsbom-bomb"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lottery-oddsbom-bomb.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lottery-oddsbom-bomb.css"]
+        };
+    }
+    static get assetsDirs() { return ["../static"]; }
+    static get properties() {
+        return {
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via message bus"
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via string"
+                },
+                "attribute": "client-styling",
+                "reflect": true
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via css file url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom translation via json file url"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom language for translation"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "endpoint",
+                "reflect": true
+            },
+            "groupId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "GameID of the lottery game"
+                },
+                "attribute": "group-id",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeBomb": {},
+            "bombList": {},
+            "gameList": {},
+            "liveDrawsInfoByGroupId": {},
+            "isLoading": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "handleBombItemClick",
+                "name": "handleBombItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ drawId: string; gameId: string }",
+                    "resolved": "{ drawId: string; gameId: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }];
+    }
+}