@everymatrix/lottery-oddsbom-ticket-bet 0.0.1

package/dist/collection/components/lottery-oddsbom-ticket-board/lottery-oddsbom-ticket-board.css

@@ -0,0 +1,82 @@
+.oddsbomTicketBoard {
+  border: 1px solid var(--emw--color-gray-100, #e6e6e6);
+  border-radius: 4px;
+  container-type: inline-size;
+  min-height: 220px;
+}
+.oddsbomTicketBoard-noData {
+  display: flex;
+  justify-content: center;
+  height: 200px;
+  align-items: center;
+}
+.oddsbomTicketBoard-btn {
+  display: flex;
+  justify-content: flex-end;
+  margin: 16px;
+  margin-bottom: unset;
+}
+.oddsbomTicketBoard-item {
+  display: flex;
+  gap: 16px;
+  flex-direction: column;
+  padding: 24px;
+}
+.oddsbomTicketBoard-item:not(:last-child) {
+  border-bottom: 1px solid var(--emw--color-gray-100, #e6e6e6);
+}
+.oddsbomTicketBoard-item-header {
+  font-weight: bold;
+  color: var(--emw--color-typography, #000);
+}
+.oddsbomTicketBoard-item-match {
+  display: flex;
+  align-items: center;
+}
+.oddsbomTicketBoard-item-match--left {
+  width: 130px;
+  color: var(--emw--color-typography, #000);
+}
+.oddsbomTicketBoard-item-match--right {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  justify-content: space-evenly;
+}
+@container (max-width: 320px) {
+  .oddsbomTicketBoard-item-match--left {
+    width: 100px;
+    max-width: 100px;
+  }
+}
+
+.dialog-input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid var(--emw--color-gray-100, #e6e6e6);
+  border-radius: 4px;
+  box-sizing: border-box;
+  margin-top: 10px;
+}
+
+.dialog-input.invalid,
+.dialog-input.invalid:focus {
+  border-color: var(--emw--color-error, #ff3d00);
+  outline-color: var(--emw--color-error, #ff3d00);
+}
+
+.error-message {
+  color: var(--emw--color-error, #ff3d00);
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.addSelectionDialog-title {
+  color: var(--emw--color-typography, #000);
+}
+.addSelectionDialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 18px;
+}

package/dist/collection/components/lottery-oddsbom-ticket-board/lottery-oddsbom-ticket-board.js

@@ -0,0 +1,350 @@
+import { h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import "../../../../../lottery-oddsbom-bullet-group/dist/types/index";
+import "../../../../../lottery-oddsbom-bullet/dist/types/index";
+import "../../../../../lottery-tipping-dialog/dist/types/index";
+import { showNotification } from "../../utils/utils";
+import { getTranslations, translate } from "../../utils/locale.utils";
+import { MAX_DISPLAY_OPTION_NUM } from "../../model/index.type";
+export class LotteryOddsbomTicketBoard {
+    constructor() {
+        this.ticketBoardInfo = undefined;
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.language = 'en';
+        this.translationUrl = '';
+        this.addSelectionConfig = undefined;
+        this.bulletsConfig = undefined;
+        this.isInputInvalid = false;
+        this.errorMessage = '';
+        this.dialogConfig = {
+            width: '400px',
+            visible: false,
+            onConfirm: () => this.handleFillInAddMore(),
+            onCancel: () => this.handleCloseAddMoreDialog()
+        };
+        this.curAddMoreInfo = { matchIdx: 0, selectionIdx: 0, value: '' };
+    }
+    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);
+        }
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            getTranslations(JSON.parse(this.translationUrl));
+        }
+    }
+    handleOddsbomBulletGroupToggle(event) {
+        const { bulletConfigArr } = event.detail;
+        this.bulletsConfig = bulletConfigArr;
+    }
+    handleOddsbomBulletCallDialogFromGroup(event) {
+        const { matchIdx, selectionIdx } = event.detail;
+        this.curAddMoreInfo = Object.assign(Object.assign({}, this.curAddMoreInfo), { matchIdx, selectionIdx });
+        this.dialogConfig = Object.assign(Object.assign({}, this.dialogConfig), { visible: true });
+    }
+    handleFillInAddMore() {
+        if (this.isInputInvalid) {
+            this.handleCloseAddMoreDialog();
+            return;
+        }
+        const { matchIdx, selectionIdx, value } = this.curAddMoreInfo;
+        this.oddsbomAddMoreToMatchEvent.emit({ matchIdx, selectionIdx, value });
+        this.dialogConfig = Object.assign(Object.assign({}, this.dialogConfig), { visible: false });
+        this.curAddMoreInfo = Object.assign(Object.assign({}, this.curAddMoreInfo), { value: '' });
+    }
+    handleCloseAddMoreDialog() {
+        this.dialogConfig = Object.assign(Object.assign({}, this.dialogConfig), { visible: false });
+        this.curAddMoreInfo = Object.assign(Object.assign({}, this.curAddMoreInfo), { value: '' });
+        this.isInputInvalid = false;
+        this.errorMessage = '';
+    }
+    handleClearAllSelection() {
+        this.oddsbomBoardClearEvent.emit();
+        showNotification({ message: translate('selectionCleared', this.language) });
+    }
+    validateInput(value) {
+        const numValue = Number(value);
+        if (isNaN(numValue)) {
+            this.isInputInvalid = true;
+            this.errorMessage = translate('enterValidNumber', this.language);
+            return;
+        }
+        if (numValue < MAX_DISPLAY_OPTION_NUM || numValue > this.addSelectionConfig.maxScore) {
+            this.isInputInvalid = true;
+            this.errorMessage = translate('enterNumberBetween', this.language, {
+                min: MAX_DISPLAY_OPTION_NUM,
+                max: this.addSelectionConfig.maxScore
+            });
+            return;
+        }
+        const { matchIdx, selectionIdx } = this.curAddMoreInfo;
+        const selections = this.ticketBoardInfo[matchIdx].addSelections[selectionIdx];
+        if (selections.some((s) => Number(s) === Number(value))) {
+            this.isInputInvalid = true;
+            this.errorMessage = translate('numberAlreadySelected', this.language);
+            return;
+        }
+        this.isInputInvalid = false;
+        this.errorMessage = '';
+    }
+    handleInputChange(e) {
+        const inputElement = e.target;
+        const value = inputElement.value;
+        this.curAddMoreInfo = Object.assign(Object.assign({}, this.curAddMoreInfo), { value: value });
+        this.validateInput(value);
+    }
+    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();
+    }
+    render() {
+        return (h("div", { key: '7cacb40559ce42eed5c03326d830461c9dbd2708', class: "oddsbomTicketBoard", ref: (el) => (this.stylingContainer = el) }, h("div", { key: 'b1c7f38a621320949049f26745232d2a34d644e8', class: "oddsbomTicketBoard-btn" }, h("lottery-oddsbom-ticket-button", { key: 'ff6c51b5a115cf46e4fc6df5b725a8233a55fa0f', onClick: this.handleClearAllSelection.bind(this), text: translate('clearAll', this.language), variant: "outline" })), this.ticketBoardInfo.length ? (h("div", { class: "oddsbomTicketBoard-list" }, this.ticketBoardInfo.map((item, idx) => {
+            return (h("div", { class: "oddsbomTicketBoard-item" }, h("div", { class: "oddsbomTicketBoard-item-header" }, `${idx + 1}. ${item.matchName}`), h("div", { class: "oddsbomTicketBoard-item-match" }, h("div", { class: "oddsbomTicketBoard-item-match--left" }, item.matchName.split('vs')[0]), h("div", { class: "oddsbomTicketBoard-item-match--right" }, h("lottery-oddsbom-bullet-group", { bulletConfigs: item.selections[0], selectionIdx: 0, matchIdx: idx, addSelectionConfig: this.addSelectionConfig }))), h("div", { class: "oddsbomTicketBoard-item-match" }, h("div", { class: "oddsbomTicketBoard-item-match--left" }, item.matchName.split('vs')[1]), h("div", { class: "oddsbomTicketBoard-item-match--right" }, h("lottery-oddsbom-bullet-group", { bulletConfigs: item.selections[1], selectionIdx: 1, matchIdx: idx, addSelectionConfig: this.addSelectionConfig })))));
+        }))) : (h("div", { class: "oddsbomTicketBoard-noData" }, translate('noTicketBoard', this.language))), h("lottery-tipping-dialog", { key: 'dbaf34154fcf9a16d3210f03345d80c4a5354125', visible: this.dialogConfig.visible, width: this.dialogConfig.width, onCancel: this.handleCloseAddMoreDialog.bind(this) }, h("div", { key: '93370ed84ff6e3483214307e45cb46f767712343', class: "addSelectionDialog" }, h("div", { key: 'ec774960c7f0bc25dc2d2e55d7b185d520dbbe27', class: "addSelectionDialog-title" }, translate('enterScoreUpTo', this.language, {
+            maxScore: this.addSelectionConfig.maxScore
+        })), h("input", { key: 'd21da9e15f671a9790b343674af722394c5599ce', type: "text", class: {
+                'dialog-input': true,
+                invalid: this.isInputInvalid
+            }, value: this.curAddMoreInfo.value, onInput: this.handleInputChange.bind(this) }), h("div", { key: 'ebe2c70cd8a5ba10bdfdc99178356677cd076621', class: "error-message" }, this.errorMessage)), h("div", { key: '31ff21b79c853c9f46fc8e8ba0f33b39bf2cda4f', slot: "footer", class: "addSelectionDialog-footer" }, h("lottery-oddsbom-ticket-button", { key: '34a4edbfae9233b0ee47ffd929901ad7fe991ffe', onClick: this.dialogConfig.onCancel, text: translate('cancel', this.language), variant: "outline" }), h("lottery-oddsbom-ticket-button", { key: 'd0ff9fb20917bd30d88b2aaa87cb863069a88328', onClick: this.dialogConfig.onConfirm, text: translate('confirm', this.language), variant: "primary", disabled: !this.curAddMoreInfo.value })))));
+    }
+    static get is() { return "lottery-oddsbom-ticket-board"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lottery-oddsbom-ticket-board.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lottery-oddsbom-ticket-board.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "ticketBoardInfo": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<TicketBoardItem>",
+                    "resolved": "TicketBoardItem[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        },
+                        "TicketBoardItem": {
+                            "location": "import",
+                            "path": "../../model/index.type",
+                            "id": "../../../../packages/stencil/lottery-oddsbom-ticket-bet/src/model/index.type.ts::TicketBoardItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-styling",
+                "reflect": true
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-styling-url",
+                "reflect": true
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "addSelectionConfig": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AddSelectionConfig",
+                    "resolved": "AddSelectionConfig",
+                    "references": {
+                        "AddSelectionConfig": {
+                            "location": "import",
+                            "path": "../../model/index.type",
+                            "id": "../../../../packages/stencil/lottery-oddsbom-ticket-bet/src/model/index.type.ts::AddSelectionConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "bulletsConfig": {},
+            "isInputInvalid": {},
+            "errorMessage": {},
+            "dialogConfig": {},
+            "curAddMoreInfo": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "oddsbomBoardClearEvent",
+                "name": "oddsbomBoardClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "oddsbomAddMoreToMatchEvent",
+                "name": "oddsbomAddMoreToMatch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    matchIdx: number;\n    selectionIdx: number;\n    value: string;\n  }",
+                    "resolved": "{ matchIdx: number; selectionIdx: number; value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "oddsbomBulletGroupToggle",
+                "method": "handleOddsbomBulletGroupToggle",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "oddsbomBulletCallDialogFromGroup",
+                "method": "handleOddsbomBulletCallDialogFromGroup",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/lottery-oddsbom-ticket-button/lottery-oddsbom-ticket-button.css

@@ -0,0 +1,168 @@
+:host {
+  display: inline-block;
+  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  font-weight: 500;
+  cursor: pointer;
+  outline: none;
+  overflow: hidden;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.btn .content {
+  position: relative;
+}
+.btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.btn .loading-container {
+  display: flex;
+  align-items: center;
+}
+.btn--loading {
+  position: relative;
+}
+.btn .spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: white;
+  animation: spin 1s ease-in-out infinite;
+  margin-left: 0.5em;
+  vertical-align: middle;
+}
+.btn--small .spinner {
+  width: 0.8em;
+  height: 0.8em;
+}
+.btn--large .spinner {
+  width: 1.2em;
+  height: 1.2em;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* Primary Variant */
+.btn--primary {
+  background-color: var(--emw--color-primary, #0d196e);
+  color: var(--emw--color-typography-inverse, #fff);
+}
+.btn--primary:hover:not(:disabled) {
+  background-color: var(--emw--color-primary-variant, #1367e7);
+}
+.btn--primary:active:not(:disabled) {
+  background-color: #08104a;
+}
+
+.btn--outline .spinner,
+.btn--dashed .spinner,
+.btn--text .spinner {
+  border-top-color: currentColor;
+  border-color: rgba(0, 0, 0, 0.2);
+}
+
+/* Outline Variant */
+.btn--outline {
+  background-color: var(--emw--color-background, #fff);
+  border-color: #dcdcdc;
+  color: var(--emw--color-typography, #000);
+}
+.btn--outline:hover:not(:disabled) {
+  background-color: var(--emw--color-background-tertiary, #ccc);
+  border-color: #a6a6a6;
+}
+.btn--outline:active:not(:disabled) {
+  background-color: #e6e6e6;
+}
+
+/* Dashed Variant */
+.btn--dashed {
+  background-color: transparent;
+  border-style: dashed;
+  border-color: #dcdcdc;
+  color: #333;
+}
+.btn--dashed:hover:not(:disabled) {
+  border-color: #a6a6a6;
+  color: #0052d9;
+}
+
+/* Text Variant */
+.btn--text {
+  background-color: transparent;
+  color: #0052d9;
+  border-color: transparent;
+}
+.btn--text:hover:not(:disabled) {
+  background-color: #f2f2f2;
+}
+.btn--text:active:not(:disabled) {
+  background-color: #e6e6e6;
+}
+
+/* Size Variants */
+.btn--small {
+  height: 28px;
+  font-size: 12px;
+  padding: 0 12px;
+}
+
+.btn--medium {
+  height: 34px;
+  font-size: 14px;
+  padding: 0 18px;
+}
+
+.btn--large {
+  height: 40px;
+  font-size: 16px;
+  padding: 0 24px;
+}
+
+/* Ripple Effect */
+.ripple-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  border-radius: inherit;
+}
+
+.ripple {
+  position: absolute;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.3);
+  transform: scale(0);
+  animation: ripple-animation 600ms linear;
+}
+
+.btn--outline .ripple,
+.btn--dashed .ripple,
+.btn--text .ripple {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+@keyframes ripple-animation {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}