@everymatrix/lottery-oddsbom-ticket-bet 0.0.1

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

@@ -0,0 +1,1064 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b8e9c8e4.js');
+const lotteryOddsbomTicketBet = require('./lottery-oddsbom-ticket-bet-402dc005.js');
+
+// This icon file is generated automatically.
+var ArrowUpOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z" } }] }, "name": "arrow-up", "theme": "outlined" };
+const ArrowUpOutlined$1 = ArrowUpOutlined;
+
+// This icon file is generated automatically.
+var DeleteFilled = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z" } }] }, "name": "delete", "theme": "filled" };
+const DeleteFilled$1 = DeleteFilled;
+
+// This icon file is generated automatically.
+var DownOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" } }] }, "name": "down", "theme": "outlined" };
+const DownOutlined$1 = DownOutlined;
+
+// This icon file is generated automatically.
+var InfoCircleFilled = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" } }] }, "name": "info-circle", "theme": "filled" };
+const InfoCircleFilled$1 = InfoCircleFilled;
+
+// This icon file is generated automatically.
+var LeftOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z" } }] }, "name": "left", "theme": "outlined" };
+const LeftOutlined$1 = LeftOutlined;
+
+// This icon file is generated automatically.
+var RightOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z" } }] }, "name": "right", "theme": "outlined" };
+const RightOutlined$1 = RightOutlined;
+
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var defaultColors = {
+    primaryColor: '#333',
+    secondaryColor: '#E6E6E6'
+};
+function renderIconDefinitionToSVGElement(icond, options) {
+    if (options === void 0) { options = {}; }
+    if (typeof icond.icon === 'function') {
+        // two-tone
+        var placeholders = options.placeholders || defaultColors;
+        return renderAbstractNodeToSVGElement(icond.icon(placeholders.primaryColor, placeholders.secondaryColor), options);
+    }
+    // fill, outline
+    return renderAbstractNodeToSVGElement(icond.icon, options);
+}
+function renderAbstractNodeToSVGElement(node, options) {
+    var targetAttrs = node.tag === 'svg'
+        ? __assign(__assign({}, node.attrs), (options.extraSVGAttrs || {})) : node.attrs;
+    var attrs = Object.keys(targetAttrs).reduce(function (acc, nextKey) {
+        var key = nextKey;
+        var value = targetAttrs[key];
+        var token = "".concat(key, "=\"").concat(value, "\"");
+        acc.push(token);
+        return acc;
+    }, []);
+    var attrsToken = attrs.length ? ' ' + attrs.join(' ') : '';
+    var children = (node.children || [])
+        .map(function (child) { return renderAbstractNodeToSVGElement(child, options); })
+        .join('');
+    if (children && children.length) {
+        return "<".concat(node.tag).concat(attrsToken, ">").concat(children, "</").concat(node.tag, ">");
+    }
+    return "<".concat(node.tag).concat(attrsToken, " />");
+}
+
+const lotteryOddsbomBulletCss = ".OddsbomBullet .OddsbomBulletBtn__normal{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--emw--color-background, #fff);border:2px solid var(--emw--color-primary, #0d196e);border-radius:var(--emw--border-radius-medium, 8px);color:var(--emw--color-typography, #000);font-weight:bold;cursor:pointer;transition:transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s ease, background-color 0.3s;user-select:none;position:relative}.OddsbomBullet .OddsbomBulletBtn__normal:hover{transform:scale(1.15) rotate(-5deg);box-shadow:var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15)) 7px 6px 6px}.OddsbomBullet .OddsbomBulletBtn__normal .OddsbomBullet--deleteIcon{display:none}.OddsbomBullet .OddsbomBulletBtn__normal.isDeleteByIcon:hover{background-color:var(--emw--color-background, #fff)}.OddsbomBullet .OddsbomBulletBtn__normal.isDeleteByIcon:hover .OddsbomBullet--text{display:none}.OddsbomBullet .OddsbomBulletBtn__normal.isDeleteByIcon:hover .OddsbomBullet--deleteIcon{display:inline;fill:var(--emw--color-typography, #000)}.OddsbomBullet .OddsbomBulletBtn__normal.isCallDialogBtn:hover{transform:none;box-shadow:none}.OddsbomBullet .OddsbomBulletBtn__normal.OddsbomBulletBtn__selected{background-color:var(--emw--color-primary, #0d196e);color:var(--emw--color-typography-inverse, #fff);transform:scale(1.05);box-shadow:0 5px 10px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15))}.OddsbomBullet .OddsbomBulletBtn__normal.OddsbomBulletBtn__disabled{background-color:var(--emw--color-gray-50, #f5f5f5);border-color:var(--emw--color-gray-100, #e6e6e6);color:var(--emw--color-gray-150, #6f6f6f);cursor:not-allowed;transform:none;box-shadow:none}.OddsbomBullet .OddsbomBulletBtn__normal.OddsbomBulletBtn__disabled:hover{transform:none;box-shadow:none}";
+const LotteryOddsbomBulletStyle0 = lotteryOddsbomBulletCss;
+
+const DeleteFilledIcon = renderIconDefinitionToSVGElement(DeleteFilled$1, {
+    extraSVGAttrs: { width: '18px', height: '18px', fill: '' }
+});
+const LotteryOddsbomBullet = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.oddsbomBulletToggleEvent = index.createEvent(this, "oddsbomBulletToggle", 7);
+        this.oddsbomBulletDeleteEvent = index.createEvent(this, "oddsbomBulletDelete", 7);
+        this.oddsbomBulletAddedByMoreBtnDeleteEvent = index.createEvent(this, "oddsbomBulletAddedByMoreBtnDelete", 7);
+        this.oddsbomBulletCallDialogEvent = index.createEvent(this, "oddsbomBulletCallDialog", 7);
+        this.isSelected = undefined;
+        this.disabled = undefined;
+        this.text = undefined;
+        this.idx = undefined;
+        this.isReading = undefined;
+        this.isDeleteByIcon = undefined;
+        this.isCallDialogBtn = undefined;
+        this.isAddedByMoreBtn = undefined;
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryOddsbomTicketBet.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                lotteryOddsbomTicketBet.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryOddsbomTicketBet.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    handleClick() {
+        if (this.isCallDialogBtn) {
+            this.oddsbomBulletCallDialogEvent.emit();
+            return;
+        }
+        if (this.isDeleteByIcon) {
+            if (this.isAddedByMoreBtn) {
+                this.oddsbomBulletAddedByMoreBtnDeleteEvent.emit(this.text);
+            }
+            else {
+                this.oddsbomBulletDeleteEvent.emit(this.idx);
+            }
+            return;
+        }
+        if (!this.disabled) {
+            this.oddsbomBulletToggleEvent.emit(this.idx);
+        }
+    }
+    render() {
+        return (index.h("div", { key: 'e21cf46108e35dcbf7d65e8c6a5f12f5d5ae49cb', class: "OddsbomBullet", ref: (el) => (this.stylingContainer = el) }, index.h("button", { key: '4edf5cd481d8283bd71f6806b6f93949e1308095', class: {
+                OddsbomBulletBtn__normal: true,
+                OddsbomBulletBtn__selected: this.isSelected,
+                OddsbomBulletBtn__disabled: this.disabled,
+                isDeleteByIcon: this.isDeleteByIcon,
+                isCallDialogBtn: this.isCallDialogBtn || this.isReading
+            }, onClick: this.handleClick.bind(this), disabled: this.disabled }, index.h("span", { key: 'fa1aed0293dc004808e6992c069d6992317b0788', class: "OddsbomBullet--deleteIcon", innerHTML: DeleteFilledIcon }), index.h("span", { key: '53ed96f2c2b833d21488049f987b6131718d563e', class: "OddsbomBullet--text" }, this.text))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryOddsbomBullet.style = LotteryOddsbomBulletStyle0;
+
+const lotteryOddsbomBulletGroupCss = ".oddsbomBulletGroup{width:100%}.oddsbomBulletGroup .oddsbomBulletGroup-list{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.oddsbomBulletGroup .selection-bullet-list{justify-content:flex-end}";
+const LotteryOddsbomBulletGroupStyle0 = lotteryOddsbomBulletGroupCss;
+
+const LotteryOddsbomBulletGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.addSelectionEvent = index.createEvent(this, "addSelection", 7);
+        this.deleteSelectionEvent = index.createEvent(this, "deleteSelection", 7);
+        this.deleteSelectionOriginEvent = index.createEvent(this, "deleteSelectionOrigin", 7);
+        this.oddsbomBulletGroupToggleEvent = index.createEvent(this, "oddsbomBulletGroupToggle", 7);
+        this.oddsbomBulletGroupAddedByMoreBtnDelEvent = index.createEvent(this, "oddsbomBulletGroupAddedByMoreBtnDel", 7);
+        this.oddsbomBulletCallDialogFromGroupEvent = index.createEvent(this, "oddsbomBulletCallDialogFromGroup", 7);
+        this.selectionIdx = undefined;
+        this.matchIdx = undefined;
+        this.bulletConfigs = [];
+        this.bulletConfigsDeleteOrigin = [];
+        this.addSelectionConfig = undefined;
+        this.isDeleteByIcon = undefined;
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.bulletListClass = undefined;
+        this.innerBulletConfigs = undefined;
+        this.innerBulletConfigsDeleteOrigin = undefined;
+    }
+    handleBulletConfigsChange(newValue) {
+        this.innerBulletConfigs = newValue.map((c) => (Object.assign({}, c)));
+    }
+    handleBulletConfigsDeleteOriginChange(newValue) {
+        this.innerBulletConfigsDeleteOrigin = newValue.map((c) => (Object.assign({}, c)));
+    }
+    componentWillLoad() {
+        this.handleBulletConfigsChange(this.bulletConfigs);
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    oddsbomBulletToggleHandler(event) {
+        const idx = event.detail;
+        const { matchIdx, selectionIdx } = this;
+        const newBulletConfigs = [...this.innerBulletConfigs];
+        const bulletToUpdate = Object.assign({}, newBulletConfigs[idx]);
+        bulletToUpdate.isSelected = !bulletToUpdate.isSelected;
+        newBulletConfigs[idx] = bulletToUpdate;
+        this.innerBulletConfigs = newBulletConfigs;
+        this.oddsbomBulletGroupToggleEvent.emit({
+            bulletSelctionArr: this.innerBulletConfigs,
+            matchIdx: matchIdx,
+            selectionIdx: selectionIdx
+        });
+    }
+    oddsbomBulletDeleteHandler(event) {
+        const idx = event.detail;
+        const { matchIdx, selectionIdx } = this;
+        const newBulletConfigs = [...this.innerBulletConfigsDeleteOrigin];
+        const bulletToUpdate = Object.assign({}, newBulletConfigs[idx]);
+        bulletToUpdate.isSelected = !bulletToUpdate.isSelected;
+        newBulletConfigs[idx] = bulletToUpdate;
+        this.innerBulletConfigsDeleteOrigin = newBulletConfigs;
+        this.oddsbomBulletGroupToggleEvent.emit({
+            bulletSelctionArr: this.innerBulletConfigsDeleteOrigin,
+            matchIdx: matchIdx,
+            selectionIdx: selectionIdx
+        });
+    }
+    oddsbomBulletAddedByMoreBtnDeleteHandler(event) {
+        const text = event.detail;
+        const { matchIdx, selectionIdx } = this;
+        this.oddsbomBulletGroupAddedByMoreBtnDelEvent.emit({
+            delText: text,
+            matchIdx: matchIdx,
+            selectionIdx: selectionIdx
+        });
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryOddsbomTicketBet.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                lotteryOddsbomTicketBet.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryOddsbomTicketBet.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    handleOddsbomBulletCallDialog() {
+        const { matchIdx, selectionIdx } = this;
+        this.oddsbomBulletCallDialogFromGroupEvent.emit({ matchIdx, selectionIdx });
+    }
+    render() {
+        return (index.h("div", { key: '38102a447cf8fafc8f7a7e5a122c7ccbc2ce8b4a', class: "oddsbomBulletGroup", ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: '59ca1df498575356eb3438b45e9431b1bc7ee2dd', class: `oddsbomBulletGroup-list ${this.bulletListClass || ''}` }, this.innerBulletConfigs.map((item) => {
+            return item.isAddMoreBtn ? (index.h("lottery-oddsbom-bullet", { text: `${this.addSelectionConfig.maxOverScore}+`, disabled: item.isDisabled, isCallDialogBtn: true, onOddsbomBulletCallDialog: this.handleOddsbomBulletCallDialog.bind(this) })) : (index.h("lottery-oddsbom-bullet", { text: item.text, idx: item.idx, isSelected: item.isSelected, disabled: item.isDisabled, isDeleteByIcon: this.isDeleteByIcon, isAddedByMoreBtn: item.isAddedByMoreBtn }));
+        }))));
+    }
+    static get watchers() { return {
+        "bulletConfigs": ["handleBulletConfigsChange"],
+        "bulletConfigsDeleteOrigin": ["handleBulletConfigsDeleteOriginChange"],
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryOddsbomBulletGroup.style = LotteryOddsbomBulletGroupStyle0;
+
+const lotteryOddsbomOddschartCss = ".oddsbom-oddschart {\n  container-type: inline-size;\n}\n.oddsbom-oddschart-container {\n  position: relative;\n}\n.oddsbom-oddschart-match {\n  display: flex;\n  align-items: flex-end;\n  margin-bottom: 4px;\n}\n.oddsbom-oddschart-match-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex-basis: 160px;\n}\n.oddsbom-oddschart-match-item-name {\n  margin-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.oddsbom-oddschart-match-item-name--home, .oddsbom-oddschart-match-item-name--away, .oddsbom-oddschart-match-item-name--delimiter {\n  font-size: 13px;\n  height: 16px;\n  line-height: 16px;\n  overflow: hidden;\n  color: var(--emw--color-typography, #000);\n}\n.oddsbom-oddschart-match-item-input {\n  display: flex;\n  justify-content: space-between;\n}\n.oddsbom-oddschart-match-search {\n  flex-basis: 130px;\n  text-align: center;\n}\n.oddsbom-oddschart-match-filter {\n  display: flex;\n  justify-content: flex-end;\n  padding: 2px;\n  position: relative;\n  padding-top: 4px;\n  border-top: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n.oddsbom-oddschart-input {\n  display: flex;\n  margin-top: 4px;\n}\n.oddsbom-oddschart-input-empty {\n  padding: 12px;\n  border: 1px solid var(--emw--color-primary-variant, #1367e7);\n  background-color: var(--emw--color-tertiary, #e3f2fd);\n  width: 50%;\n  min-width: 240px;\n  max-width: 360px;\n  margin: 4px auto;\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  justify-content: center;\n}\n.oddsbom-oddschart-input-empty-operation {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-top: 4px;\n}\n.oddsbom-oddschart-input-wrap {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 4px;\n}\n.oddsbom-oddschart-input-item {\n  display: flex;\n  align-items: center;\n  flex-basis: 160px;\n  justify-content: center;\n  gap: 5px;\n}\n.oddsbom-oddschart-input-odds {\n  flex-basis: 130px;\n  display: flex;\n  align-items: center;\n  font-size: 14px;\n  text-indent: 16px;\n}\n.oddsbom-oddschart-input-operation {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n}\n.oddsbom-oddschart-selection--group {\n  display: flex;\n  margin-bottom: 8px;\n}\n.oddsbom-oddschart-selection--group-wrap {\n  display: flex;\n  border-radius: 4px;\n}\n.oddsbom-oddschart-selection--group-wrap:hover {\n  background: var(--emw--color-gray-50, #f5f5f5);\n  cursor: pointer;\n}\n.oddsbom-oddschart-selection-item {\n  display: flex;\n  flex-basis: 160px;\n  justify-content: center;\n  gap: 10px;\n}\n.oddsbom-oddschart-selection-odds {\n  display: flex;\n  gap: 12px;\n  align-items: center;\n  flex-basis: 130px;\n  position: relative;\n  text-indent: 16px;\n}\n.oddsbom-oddschart-selection-odds--text {\n  font-size: 14px;\n  color: var(--emw--color-typography, #000);\n}\n.oddsbom-oddschart-selection-odds--fillIn {\n  position: absolute;\n  right: 0;\n}\n@container (max-width: 430px) {\n  .oddsbom-oddschart .oddsbom-oddschart-selection-odds {\n    text-indent: unset;\n  }\n  .oddsbom-oddschart .oddsbom-oddschart-selection-odds--fillIn {\n    right: -22px;\n  }\n  .oddsbom-oddschart .oddsbom-oddschart-selection-item {\n    gap: 4px;\n  }\n}\n.oddsbom-oddschart .arrow {\n  transition: transform 0.3s ease;\n  font-size: 16px;\n  display: inline-flex;\n  cursor: pointer;\n  fill: var(--emw--color-typography, #000);\n  display: flex;\n  justify-content: center;\n  flex-basis: 130px;\n}\n.oddsbom-oddschart .arrow.ascend {\n  transform: rotate(180deg);\n}\n\n.empty-wrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.empty-wrap-text {\n  color: var(--emw--color-typography, #000);\n}\n\n.oddsbom-oddschart-pagination {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  margin-top: 10px;\n  padding-right: 16px;\n}\n.oddsbom-oddschart-pagination-wrap {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  height: 18px;\n}\n.oddsbom-oddschart-pagination-prev, .oddsbom-oddschart-pagination-next {\n  cursor: pointer;\n}\n.oddsbom-oddschart-pagination-prev.disabled, .oddsbom-oddschart-pagination-next.disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.oddsbom-oddschart-pagination-icon {\n  display: flex;\n  height: 18px;\n  align-items: center;\n  fill: var(--emw--color-typography, #000);\n}\n.oddsbom-oddschart-pagination-page {\n  font-size: 14px;\n  color: var(--emw--color-typography, #000);\n}\n\n.progress-bar {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 2px;\n  background-color: var(--emw--color-gray-100, #e6e6e6);\n  overflow: hidden;\n}\n.progress-bar::after {\n  content: \"\";\n  display: block;\n  width: 20%;\n  height: 100%;\n  background-color: var(--emw--color-primary, #0d196e);\n  animation: progress 1.5s linear infinite;\n}\n\n@keyframes progress {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(500%);\n  }\n}";
+const LotteryOddsbomOddschartStyle0 = lotteryOddsbomOddschartCss;
+
+const upIcon = renderIconDefinitionToSVGElement(ArrowUpOutlined$1, {
+    extraSVGAttrs: { width: '16px', height: '16px', fill: '' }
+});
+const infoIcon = renderIconDefinitionToSVGElement(InfoCircleFilled$1, {
+    extraSVGAttrs: { width: '18px', height: '18px', fill: '#0d196e' }
+});
+const infoIcon1 = renderIconDefinitionToSVGElement(InfoCircleFilled$1, {
+    extraSVGAttrs: { width: '16px', height: '16px', fill: '#1367e7' }
+});
+const leftArrowIcon = renderIconDefinitionToSVGElement(LeftOutlined$1, {
+    extraSVGAttrs: { width: '16px', height: '16px', fill: '' }
+});
+const rightArrowIcon = renderIconDefinitionToSVGElement(RightOutlined$1, {
+    extraSVGAttrs: { width: '16px', height: '16px', fill: '' }
+});
+const LotteryOddsbomOddschart = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.oddsQueryLineChangeEvent = index.createEvent(this, "oddsQueryLineChange", 7);
+        this.oddschartFillInEvent = index.createEvent(this, "oddschartFillIn", 7);
+        this.oddsQueryChangeEvent = index.createEvent(this, "oddsQueryChange", 7);
+        this.handleSearch = async () => {
+            const inputs = this.matchItemsContainer.querySelectorAll('lottery-oddsbom-oddschart-input');
+            const values = await Promise.all(Array.from(inputs).map((input) => input.getValue()));
+            if (values.length != 2 * this.matchInfo.length) {
+                lotteryOddsbomTicketBet.showNotification({
+                    theme: 'warning',
+                    message: lotteryOddsbomTicketBet.translate('pleaseFillIn', this.language)
+                });
+                return;
+            }
+            const newMatchSelection = [...this.matchSelection];
+            const lineSelection = [];
+            for (let i = 0; i < values.length; i += 2) {
+                const val1 = values[i];
+                const val2 = values[i + 1];
+                const index = i / 2;
+                if (val1 && val2) {
+                    lineSelection.push([[`${val1}:${val2}`]]);
+                    newMatchSelection[index] = [val1, val2];
+                }
+            }
+            this.matchSelection = [...newMatchSelection];
+            if (lineSelection.length > 0) {
+                const lineSelectionBase64 = await lotteryOddsbomTicketBet.stringToBase64(JSON.stringify(lineSelection));
+                this.oddsQueryLineChangeEvent.emit({
+                    lineSelectionBase64: lineSelectionBase64,
+                    offset: 0
+                });
+                this.hasFillInSelection = true;
+            }
+        };
+        this.handleGroupClick = (index) => {
+            this.selectedGroupIndex = index;
+        };
+        this.toggleFilterIcon = () => {
+            this.isAscend = !this.isAscend;
+            this.selectedGroupIndex = -1;
+            this.oddsQueryChangeEvent.emit({
+                ascending: this.isAscend,
+                offset: 0,
+                lineSelectionBase64: ''
+            });
+        };
+        this.handlePrevPage = () => {
+            if (this.curPage >= 1) {
+                this.selectedGroupIndex = -1;
+                this.oddsQueryChangeEvent.emit({
+                    offset: this.offset - this.limit,
+                    lineSelectionBase64: ''
+                });
+            }
+        };
+        this.handleNextPage = () => {
+            if (this.curPage < this.totalPage - 1) {
+                this.selectedGroupIndex = -1;
+                this.oddsQueryChangeEvent.emit({
+                    offset: this.offset + this.limit,
+                    lineSelectionBase64: ''
+                });
+            }
+        };
+        this.matchInfo = undefined;
+        this.oddsInfo = undefined;
+        this.total = undefined;
+        this.curPage = undefined;
+        this.limit = undefined;
+        this.offset = undefined;
+        this.filterdOdds = undefined;
+        this.isSearching = undefined;
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.isLoading = false;
+        this.language = 'en';
+        this.translationUrl = '';
+        this.isAscend = true;
+        this.selectedGroupIndex = -1;
+        this.matchSelection = [];
+        this.hasFillInSelection = false;
+    }
+    async initOddsChart() {
+        this.oddsQueryChangeEvent.emit({
+            offset: 0,
+            ascending: true,
+            lineSelectionBase64: ''
+        });
+    }
+    async closeOddsChart() {
+        this.hasFillInSelection = false;
+        this.selectedGroupIndex = -1;
+        this.matchSelection = [];
+        this.isAscend = true;
+        if (this.matchItemsContainer) {
+            const inputs = this.matchItemsContainer.querySelectorAll('lottery-oddsbom-oddschart-input');
+            inputs.forEach((input) => {
+                input.clearValue();
+            });
+        }
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    handleMatchInfoChange(newValue) {
+        this.matchSelection = newValue.map(() => [-1, -1]);
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            lotteryOddsbomTicketBet.resolveTranslationUrl(this.translationUrl);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryOddsbomTicketBet.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                lotteryOddsbomTicketBet.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryOddsbomTicketBet.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    get totalPage() {
+        return Math.ceil(this.total / this.limit);
+    }
+    generateBulletGroup(line, odds, groupIndex) {
+        let lineArr;
+        try {
+            lineArr = JSON.parse(line);
+        }
+        catch (error) {
+            console.error('Failed to parse line JSON:', error);
+            return index.h("div", { class: "error-message" }, "Invalid data format");
+        }
+        let group = lineArr.map((arr) => arr[0]).map((arr1) => arr1[0]);
+        const isSelected = this.selectedGroupIndex === groupIndex;
+        return (index.h("div", { class: "oddsbom-oddschart-selection--group", onClick: this.handleGroupClick.bind(this, groupIndex) }, index.h("div", { class: "oddsbom-oddschart-selection--group-wrap", style: { flexBasis: `${160 * group.length}px` } }, group.map((item, index$1) => {
+            const selection = item.split(':');
+            return (index.h("div", { class: "oddsbom-oddschart-selection-item", key: index$1 }, index.h("div", { class: "oddsbom-oddschart-selection-item--1" }, index.h("lottery-oddsbom-bullet", { text: selection[0], "is-reading": true, "is-selected": isSelected })), index.h("div", { class: "oddsbom-oddschart-selection-item--2" }, index.h("lottery-oddsbom-bullet", { text: selection[1], "is-reading": true, "is-selected": isSelected }))));
+        })), index.h("div", { class: "oddsbom-oddschart-selection-odds" }, index.h("div", { class: "oddsbom-oddschart-selection-odds--text" }, lotteryOddsbomTicketBet.formatNumber(odds)), isSelected && (index.h("div", { class: "oddsbom-oddschart-selection-odds--fillIn" }, index.h("lottery-oddsbom-ticket-button", { text: lotteryOddsbomTicketBet.translate('fillIn', this.language), size: "small", variant: "outline", onClick: this.handleFillIn.bind(this, group), language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-Url": this.clientStylingUrl }))))));
+    }
+    handleFillIn(nums) {
+        this.oddschartFillInEvent.emit({ fillInNums: nums });
+    }
+    clearMatchSelection() {
+        this.hasFillInSelection = false;
+        if (this.matchItemsContainer) {
+            const inputs = this.matchItemsContainer.querySelectorAll('lottery-oddsbom-oddschart-input');
+            inputs.forEach((input) => {
+                input.clearValue();
+            });
+        }
+    }
+    fillInMatchSelection() {
+        const nums = [];
+        this.matchSelection.forEach((selection) => {
+            nums.push(`${selection[0]}:${selection[1]}`);
+        });
+        this.handleFillIn(nums);
+    }
+    render() {
+        var _a, _b;
+        return (index.h("div", { key: 'b160d1870184937cdd013a233a4841545d8f769a', class: "oddsbom-oddschart", ref: (el) => (this.stylingContainer = el) }, !((_a = this.matchInfo) === null || _a === void 0 ? void 0 : _a.length) || !((_b = this.oddsInfo) === null || _b === void 0 ? void 0 : _b.length) ? (index.h("div", { class: "empty-wrap" }, index.h("span", { innerHTML: infoIcon, style: { marginRight: '6px', height: '18px' } }), index.h("span", { class: "empty-wrap-text", style: { fontSize: '18px' } }, lotteryOddsbomTicketBet.translate('noBets', this.language)))) : (this.matchInfo && (index.h("div", { class: "oddsbom-oddschart-container" }, index.h("div", { class: "oddsbom-oddschart-wrap" }, index.h("div", { class: "oddsbom-oddschart-match", ref: (el) => (this.matchItemsContainer = el) }, this.matchInfo.map((match, idx) => {
+            return (index.h("div", { class: "oddsbom-oddschart-match-item", key: idx }, index.h("div", { class: "oddsbom-oddschart-match-item-name" }, index.h("div", { class: "oddsbom-oddschart-match-item-name--home" }, `${idx + 1}. ${match.eventName.split('vs')[0]}`), index.h("div", { class: "oddsbom-oddschart-match-item-name--delimiter" }, "vs"), index.h("div", { class: "oddsbom-oddschart-match-item-name--away" }, `${match.eventName.split('vs')[1]}`)), index.h("div", { class: "oddsbom-oddschart-match-item-input" }, index.h("lottery-oddsbom-oddschart-input", null), index.h("lottery-oddsbom-oddschart-input", null))));
+        }), index.h("div", { class: "oddsbom-oddschart-match-search" }, index.h("lottery-oddsbom-ticket-button", { text: lotteryOddsbomTicketBet.translate('search', this.language), variant: "outline", onClick: this.handleSearch }))), this.hasFillInSelection &&
+            !this.isSearching &&
+            (this.filterdOdds ? (index.h("div", { class: "oddsbom-oddschart-input-wrap" }, index.h("div", { class: "oddsbom-oddschart-input" }, this.matchSelection.map((arr) => {
+                return (index.h("div", { class: "oddsbom-oddschart-input-item" }, index.h("lottery-oddsbom-bullet", { text: arr[0], "is-reading": true, "is-selected": true }), index.h("lottery-oddsbom-bullet", { text: arr[1], "is-reading": true, "is-selected": true })));
+            }), index.h("div", { class: "oddsbom-oddschart-input-odds" }, lotteryOddsbomTicketBet.formatNumber(this.filterdOdds))), index.h("div", { class: "oddsbom-oddschart-input-operation" }, index.h("lottery-oddsbom-ticket-button", { text: lotteryOddsbomTicketBet.translate('clear', this.language), variant: "outline", size: "small", onClick: this.clearMatchSelection.bind(this) }), index.h("lottery-oddsbom-ticket-button", { text: lotteryOddsbomTicketBet.translate('fillIn', this.language), variant: "outline", size: "small", onClick: this.fillInMatchSelection.bind(this) })))) : (index.h("div", { class: "oddsbom-oddschart-input-empty" }, index.h("div", null, index.h("span", { innerHTML: infoIcon1, style: { marginRight: '6px', height: '16px' } }), index.h("span", { style: { fontSize: '14px' } }, lotteryOddsbomTicketBet.translate('noBets', this.language))), index.h("div", { class: "oddsbom-oddschart-input-empty-operation" }, index.h("lottery-oddsbom-ticket-button", { text: lotteryOddsbomTicketBet.translate('clear', this.language), variant: "text", size: "small", onClick: this.clearMatchSelection.bind(this) }), index.h("lottery-oddsbom-ticket-button", { text: lotteryOddsbomTicketBet.translate('fillIn', this.language), variant: "text", size: "small", onClick: this.fillInMatchSelection.bind(this) }))))), index.h("div", { class: "oddsbom-oddschart-match-filter" }, (this.isLoading || this.isSearching) && index.h("div", { class: "progress-bar" }), index.h("span", { onClick: this.toggleFilterIcon, class: `arrow ${this.isAscend ? 'ascend' : ''}`, innerHTML: upIcon })), index.h("div", { class: "oddsbom-oddschart-selection" }, this.oddsInfo.map((oddsItem, idx) => {
+            return this.generateBulletGroup(oddsItem.lineSelection, oddsItem.odds, idx);
+        })), index.h("div", { class: "oddsbom-oddschart-pagination" }, index.h("div", { class: "oddsbom-oddschart-pagination-wrap" }, index.h("div", { class: `oddsbom-oddschart-pagination-prev ${this.curPage < 1 ? 'disabled' : ''}`, onClick: this.handlePrevPage }, index.h("div", { class: "oddsbom-oddschart-pagination-icon", innerHTML: leftArrowIcon })), index.h("div", { class: "oddsbom-oddschart-pagination-page" }, `${this.curPage + 1} / ${this.totalPage}`), index.h("div", { class: `oddsbom-oddschart-pagination-next ${this.curPage >= this.totalPage - 1 ? 'disabled' : ''}`, onClick: this.handleNextPage }, index.h("div", { class: "oddsbom-oddschart-pagination-icon", innerHTML: rightArrowIcon }))))))))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"],
+        "matchInfo": ["handleMatchInfoChange"]
+    }; }
+};
+LotteryOddsbomOddschart.style = LotteryOddsbomOddschartStyle0;
+
+const lotteryOddsbomOddschartInputCss = ".oddscharts-input{display:inline-flex;padding:2px}.oddscharts-input input{width:32px;height:32px;text-align:center;font-size:14px;font-weight:bold;line-height:32px;border:2px solid var(--emw--color-gray-100, #e6e6e6);border-radius:4px;padding:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--emw--color-background, #fff);color:var(--emw--color-typography, #000);text-transform:uppercase}.oddscharts-input input:focus{outline:none;border-color:var(--emw--color-primary, #0d196e);box-shadow:0 0 0 2px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));border-width:2px}.oddscharts-input input:disabled{background-color:var(--emw--color-gray-50, #f5f5f5);border-color:var(--emw--color-gray-100, #e6e6e6);color:var(--emw--color-gray-150, #6f6f6f);cursor:not-allowed}.oddscharts-input input.error{border-color:var(--emw--color-error, #ff3d00)}.oddscharts-input input.error:focus{box-shadow:0 0 0 2px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15))}";
+const LotteryOddsbomOddschartInputStyle0 = lotteryOddsbomOddschartInputCss;
+
+const LotteryOddsbomOddschartInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange", 7);
+        this.handleInputChange = (e) => {
+            const input = e.target;
+            const value = input.value.trim();
+            this.valueChange.emit(value);
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Enter') {
+                this.inputElement.blur();
+            }
+        };
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.value = '';
+    }
+    async getValue() {
+        return this.inputElement.value;
+    }
+    async clearValue() {
+        if (this.inputElement) {
+            this.inputElement.value = '';
+        }
+        this.value = '';
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryOddsbomTicketBet.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                lotteryOddsbomTicketBet.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryOddsbomTicketBet.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    render() {
+        return (index.h("div", { key: 'eb973f7978b7452788f72a43da5424abbe845361', class: "oddscharts-input", ref: (el) => (this.stylingContainer = el) }, index.h("input", { key: 'f24fba10175b944af328b71f8e257d8ad1386af2', ref: (el) => (this.inputElement = el), type: "text", inputMode: "numeric", value: this.value, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, autocomplete: "one-time-code" })));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryOddsbomOddschartInput.style = LotteryOddsbomOddschartInputStyle0;
+
+const lotteryOddsbomTicketBoardCss = ".oddsbomTicketBoard {\n  border: 1px solid var(--emw--color-gray-100, #e6e6e6);\n  border-radius: 4px;\n  container-type: inline-size;\n  min-height: 220px;\n}\n.oddsbomTicketBoard-noData {\n  display: flex;\n  justify-content: center;\n  height: 200px;\n  align-items: center;\n}\n.oddsbomTicketBoard-btn {\n  display: flex;\n  justify-content: flex-end;\n  margin: 16px;\n  margin-bottom: unset;\n}\n.oddsbomTicketBoard-item {\n  display: flex;\n  gap: 16px;\n  flex-direction: column;\n  padding: 24px;\n}\n.oddsbomTicketBoard-item:not(:last-child) {\n  border-bottom: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n.oddsbomTicketBoard-item-header {\n  font-weight: bold;\n  color: var(--emw--color-typography, #000);\n}\n.oddsbomTicketBoard-item-match {\n  display: flex;\n  align-items: center;\n}\n.oddsbomTicketBoard-item-match--left {\n  width: 130px;\n  color: var(--emw--color-typography, #000);\n}\n.oddsbomTicketBoard-item-match--right {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  justify-content: space-evenly;\n}\n@container (max-width: 320px) {\n  .oddsbomTicketBoard-item-match--left {\n    width: 100px;\n    max-width: 100px;\n  }\n}\n\n.dialog-input {\n  width: 100%;\n  padding: 8px;\n  border: 1px solid var(--emw--color-gray-100, #e6e6e6);\n  border-radius: 4px;\n  box-sizing: border-box;\n  margin-top: 10px;\n}\n\n.dialog-input.invalid,\n.dialog-input.invalid:focus {\n  border-color: var(--emw--color-error, #ff3d00);\n  outline-color: var(--emw--color-error, #ff3d00);\n}\n\n.error-message {\n  color: var(--emw--color-error, #ff3d00);\n  font-size: 12px;\n  margin-top: 4px;\n}\n\n.addSelectionDialog-title {\n  color: var(--emw--color-typography, #000);\n}\n.addSelectionDialog-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 18px;\n}";
+const LotteryOddsbomTicketBoardStyle0 = lotteryOddsbomTicketBoardCss;
+
+const LotteryOddsbomTicketBoard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.oddsbomBoardClearEvent = index.createEvent(this, "oddsbomBoardClear", 7);
+        this.oddsbomAddMoreToMatchEvent = index.createEvent(this, "oddsbomAddMoreToMatch", 7);
+        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) {
+            lotteryOddsbomTicketBet.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            lotteryOddsbomTicketBet.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();
+        lotteryOddsbomTicketBet.showNotification({ message: lotteryOddsbomTicketBet.translate('selectionCleared', this.language) });
+    }
+    validateInput(value) {
+        const numValue = Number(value);
+        if (isNaN(numValue)) {
+            this.isInputInvalid = true;
+            this.errorMessage = lotteryOddsbomTicketBet.translate('enterValidNumber', this.language);
+            return;
+        }
+        if (numValue < lotteryOddsbomTicketBet.MAX_DISPLAY_OPTION_NUM || numValue > this.addSelectionConfig.maxScore) {
+            this.isInputInvalid = true;
+            this.errorMessage = lotteryOddsbomTicketBet.translate('enterNumberBetween', this.language, {
+                min: lotteryOddsbomTicketBet.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 = lotteryOddsbomTicketBet.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)
+                lotteryOddsbomTicketBet.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                lotteryOddsbomTicketBet.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryOddsbomTicketBet.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    render() {
+        return (index.h("div", { key: '7cacb40559ce42eed5c03326d830461c9dbd2708', class: "oddsbomTicketBoard", ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: 'b1c7f38a621320949049f26745232d2a34d644e8', class: "oddsbomTicketBoard-btn" }, index.h("lottery-oddsbom-ticket-button", { key: 'ff6c51b5a115cf46e4fc6df5b725a8233a55fa0f', onClick: this.handleClearAllSelection.bind(this), text: lotteryOddsbomTicketBet.translate('clearAll', this.language), variant: "outline" })), this.ticketBoardInfo.length ? (index.h("div", { class: "oddsbomTicketBoard-list" }, this.ticketBoardInfo.map((item, idx) => {
+            return (index.h("div", { class: "oddsbomTicketBoard-item" }, index.h("div", { class: "oddsbomTicketBoard-item-header" }, `${idx + 1}. ${item.matchName}`), index.h("div", { class: "oddsbomTicketBoard-item-match" }, index.h("div", { class: "oddsbomTicketBoard-item-match--left" }, item.matchName.split('vs')[0]), index.h("div", { class: "oddsbomTicketBoard-item-match--right" }, index.h("lottery-oddsbom-bullet-group", { bulletConfigs: item.selections[0], selectionIdx: 0, matchIdx: idx, addSelectionConfig: this.addSelectionConfig }))), index.h("div", { class: "oddsbomTicketBoard-item-match" }, index.h("div", { class: "oddsbomTicketBoard-item-match--left" }, item.matchName.split('vs')[1]), index.h("div", { class: "oddsbomTicketBoard-item-match--right" }, index.h("lottery-oddsbom-bullet-group", { bulletConfigs: item.selections[1], selectionIdx: 1, matchIdx: idx, addSelectionConfig: this.addSelectionConfig })))));
+        }))) : (index.h("div", { class: "oddsbomTicketBoard-noData" }, lotteryOddsbomTicketBet.translate('noTicketBoard', this.language))), index.h("lottery-tipping-dialog", { key: 'dbaf34154fcf9a16d3210f03345d80c4a5354125', visible: this.dialogConfig.visible, width: this.dialogConfig.width, onCancel: this.handleCloseAddMoreDialog.bind(this) }, index.h("div", { key: '93370ed84ff6e3483214307e45cb46f767712343', class: "addSelectionDialog" }, index.h("div", { key: 'ec774960c7f0bc25dc2d2e55d7b185d520dbbe27', class: "addSelectionDialog-title" }, lotteryOddsbomTicketBet.translate('enterScoreUpTo', this.language, {
+            maxScore: this.addSelectionConfig.maxScore
+        })), index.h("input", { key: 'd21da9e15f671a9790b343674af722394c5599ce', type: "text", class: {
+                'dialog-input': true,
+                invalid: this.isInputInvalid
+            }, value: this.curAddMoreInfo.value, onInput: this.handleInputChange.bind(this) }), index.h("div", { key: 'ebe2c70cd8a5ba10bdfdc99178356677cd076621', class: "error-message" }, this.errorMessage)), index.h("div", { key: '31ff21b79c853c9f46fc8e8ba0f33b39bf2cda4f', slot: "footer", class: "addSelectionDialog-footer" }, index.h("lottery-oddsbom-ticket-button", { key: '34a4edbfae9233b0ee47ffd929901ad7fe991ffe', onClick: this.dialogConfig.onCancel, text: lotteryOddsbomTicketBet.translate('cancel', this.language), variant: "outline" }), index.h("lottery-oddsbom-ticket-button", { key: 'd0ff9fb20917bd30d88b2aaa87cb863069a88328', onClick: this.dialogConfig.onConfirm, text: lotteryOddsbomTicketBet.translate('confirm', this.language), variant: "primary", disabled: !this.curAddMoreInfo.value })))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryOddsbomTicketBoard.style = LotteryOddsbomTicketBoardStyle0;
+
+const lotteryOddsbomTicketButtonCss = ":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)}}.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)}.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}.btn--dashed{background-color:transparent;border-style:dashed;border-color:#dcdcdc;color:#333}.btn--dashed:hover:not(:disabled){border-color:#a6a6a6;color:#0052d9}.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}.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-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}}";
+const LotteryOddsbomTicketButtonStyle0 = lotteryOddsbomTicketButtonCss;
+
+const LotteryOddsbomTicketButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.handleClick = (event) => {
+            if (this.disabled) {
+                return;
+            }
+            // Get the button element from the shadow root
+            const button = this.host.shadowRoot.querySelector('.btn');
+            if (!button)
+                return;
+            const rect = button.getBoundingClientRect();
+            const size = Math.max(rect.width, rect.height);
+            const top = event.clientY - rect.top - size / 2;
+            const left = event.clientX - rect.left - size / 2;
+            // Add the new ripple to the state, triggering a re-render
+            const newRipple = { top, left, size };
+            this.ripples = [...this.ripples, newRipple];
+            // Set a timeout to clean up the ripple from the state after the animation ends
+            // This prevents the DOM from filling up with old ripple elements
+            setTimeout(() => {
+                this.ripples = this.ripples.filter((r) => r !== newRipple);
+            }, 600); // This duration should match the CSS animation duration
+        };
+        this.variant = 'primary';
+        this.size = 'medium';
+        this.disabled = false;
+        this.loading = false;
+        this.text = undefined;
+        this.mbSource = undefined;
+        this.language = 'en';
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.ripples = [];
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            lotteryOddsbomTicketBet.resolveTranslationUrl(this.translationUrl);
+        }
+    }
+    render() {
+        const { variant, disabled, size } = this;
+        const isDisabled = disabled || this.loading;
+        return (index.h("button", { key: 'c0c87c36c7c3f48286729c9133eded8338f137be', class: {
+                btn: true,
+                [`btn--${variant}`]: true,
+                [`btn--${size}`]: true,
+                'btn--loading': this.loading
+            }, disabled: isDisabled, onClick: this.handleClick }, this.loading ? (index.h("div", { class: "loading-container" }, index.h("span", { class: "content" }, this.text || lotteryOddsbomTicketBet.translate('loading', this.language)), index.h("span", { class: "spinner" }))) : (index.h("span", { class: "content" }, this.text)), index.h("div", { key: '8276ad215063ef4217b11f65fb189d6fcccd1f24', class: "ripple-container" }, this.ripples.map((ripple, index$1) => (index.h("span", { key: index$1, class: "ripple", style: {
+                top: `${ripple.top}px`,
+                left: `${ripple.left}px`,
+                width: `${ripple.size}px`,
+                height: `${ripple.size}px`
+            } }))))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryOddsbomTicketButton.style = LotteryOddsbomTicketButtonStyle0;
+
+const lotteryOddsbomTicketSelectionCss = ".oddsbomSelection {\n  container-type: inline-size;\n}\n.oddsbomSelection-panel--header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  height: 40px;\n  padding: 0 4px;\n  color: var(--emw--color-typography, #000);\n}\n.oddsbomSelection-panel--header:hover {\n  background-color: var(--emw--color-background-tertiary, #ccc);\n  border-radius: 4px;\n}\n.oddsbomSelection-panel--header-title {\n  font-size: 16px;\n  font-weight: 600;\n  user-select: none;\n}\n.oddsbomSelection-panel--header-icon {\n  transition: transform 0.2s;\n}\n.oddsbomSelection-panel--header-icon.expanded {\n  transform: rotate(180deg);\n}\n.oddsbomSelection-panel--content {\n  overflow: hidden;\n  max-height: 0;\n  transition: max-height 0.3s ease, padding 0.3s ease;\n  padding: 0 12px;\n  font-size: 14px;\n  user-select: none;\n}\n.oddsbomSelection-panel--content.open {\n  max-height: 19000px;\n  padding: 10px 12px;\n  background-color: var(--emw--color-background, #fff);\n}\n.oddsbomSelection-panel--content.closed {\n  max-height: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n}\n.oddsbomSelection-panel--content-thead {\n  display: flex;\n  justify-content: space-between;\n  padding: 0 24px;\n  margin-bottom: 12px;\n  color: var(--emw--color-typography, #000);\n}\n.oddsbomSelection-panel--content-tbody {\n  padding: 0 18px;\n}\n.oddsbomSelection-item {\n  display: flex;\n  justify-content: space-between;\n  position: relative;\n  padding: 8px;\n}\n.oddsbomSelection-item:not(:last-child) {\n  border-bottom: 1px dashed var(--emw--color-gray-100, #e6e6e6);\n}\n.oddsbomSelection-item-number {\n  position: absolute;\n  left: -18px;\n  top: 48%;\n  color: var(--emw--color-typography, #000);\n}\n.oddsbomSelection-item-selection {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.oddsbomSelection-item-team {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  min-height: 32px;\n  color: var();\n}\n.oddsbomSelection-item-team-name {\n  max-width: 140px;\n  width: 140px;\n  color: var(--emw--color-typography, #000);\n}\n.oddsbomSelection-item-team-selection {\n  display: flex;\n  gap: 6px;\n  flex: 1;\n  justify-content: flex-end;\n}\n@container (max-width: 430px) {\n  .oddsbomSelection-item-team-name {\n    max-width: 80px;\n    width: 80px;\n  }\n}\n\n.oddsbomSelection-panel--header-icon {\n  fill: var(--emw--color-typography, #000);\n}";
+const LotteryOddsbomTicketSelectionStyle0 = lotteryOddsbomTicketSelectionCss;
+
+const downIcon = renderIconDefinitionToSVGElement(DownOutlined$1, {
+    extraSVGAttrs: { width: '16px', height: '16px', fill: '' }
+});
+const LotteryOddsbomTicketSelection = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.togglePanel = () => {
+            this.expanded = !this.expanded;
+        };
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.ticketBoardInfo = undefined;
+        this.language = 'en';
+        this.expanded = false;
+        this._ticketBoardInfo = [];
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    componentWillLoad() {
+        this._ticketBoardInfo = JSON.parse(JSON.stringify(this.ticketBoardInfo));
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryOddsbomTicketBet.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                lotteryOddsbomTicketBet.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryOddsbomTicketBet.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    handleTicketBoradInfoChange(newValue) {
+        this._ticketBoardInfo = JSON.parse(JSON.stringify(newValue));
+    }
+    generateMatchItemSelection(name1, name2, matchIdx, selection1, selection2, selectionOrigin1, selectionOrigin2) {
+        return (index.h("div", { class: "oddsbomSelection-item" }, index.h("div", { class: "oddsbomSelection-item-number" }, matchIdx + 1), index.h("div", { class: "oddsbomSelection-item-selection" }, index.h("div", { class: "oddsbomSelection-item-team" }, index.h("div", { class: "oddsbomSelection-item-team-name" }, name1), index.h("div", { class: "oddsbomSelection-item-team-selection" }, index.h("lottery-oddsbom-bullet-group", { bulletConfigs: selection1, selectionIdx: 0, matchIdx: matchIdx, bulletConfigsDeleteOrigin: selectionOrigin1, isDeleteByIcon: true, bulletListClass: "selection-bullet-list" }))), index.h("div", { class: "oddsbomSelection-item-team" }, index.h("div", { class: "oddsbomSelection-item-team-name" }, name2), index.h("div", { class: "oddsbomSelection-item-team-selection" }, index.h("lottery-oddsbom-bullet-group", { bulletConfigs: selection2, selectionIdx: 1, matchIdx: matchIdx, bulletConfigsDeleteOrigin: selectionOrigin2, isDeleteByIcon: true, bulletListClass: "selection-bullet-list" }))))));
+    }
+    generateSelectionList() {
+        if (!this._ticketBoardInfo)
+            return null;
+        return this._ticketBoardInfo.map((item, matchIdx) => {
+            var _a, _b, _c, _d;
+            const { matchName, selections } = item;
+            const matchName1 = matchName.split('vs')[0];
+            const matchName2 = matchName.split('vs')[1];
+            const selection1 = selections[0].filter((bulletConfig) => bulletConfig.isSelected);
+            const selection2 = selections[1].filter((bulletConfig) => bulletConfig.isSelected);
+            // added by add more btn
+            const addSelection1 = (_b = (_a = item.addSelections) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : [];
+            const addSelection2 = (_d = (_c = item.addSelections) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : [];
+            if (addSelection1.length > 0) {
+                addSelection1.forEach((selection) => {
+                    selection1.push({
+                        text: selection,
+                        idx: -1,
+                        isSelected: true,
+                        isDisabled: false,
+                        isAddedByMoreBtn: true
+                    });
+                });
+            }
+            if (addSelection2.length > 0) {
+                addSelection2.forEach((selection) => {
+                    selection2.push({
+                        text: selection,
+                        idx: -1,
+                        isSelected: true,
+                        isDisabled: false,
+                        isAddedByMoreBtn: true
+                    });
+                });
+            }
+            return this.generateMatchItemSelection(matchName1, matchName2, matchIdx, selection1, selection2, selections[0], selections[1]);
+        });
+    }
+    render() {
+        return (index.h("div", { key: '8e359b773654d6a1632f69837009ccc29d547561', class: "oddsbomSelection", ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: '93c2575de9e70759118f4d4702f356322c2bcb88', class: "oddsbomSelection-panel" }, index.h("div", { key: '2df0bf1be465b9baa00f44052c623071f78d799d', class: "oddsbomSelection-panel--header", onClick: this.togglePanel }, index.h("div", { key: 'c32a79afcab02f683ffb8abc26395e098b080939', class: "oddsbomSelection-panel--header-title" }, lotteryOddsbomTicketBet.translate('myChoices', this.language)), index.h("div", { key: 'de2b875b0fc538212d15cb7dde2c95b10d49665a', class: `oddsbomSelection-panel--header-icon ${this.expanded ? 'expanded' : ''}`, innerHTML: downIcon })), index.h("div", { key: '4a51e00f8ab67d9ab6c1cfd25d47f93c79d7a4bf', class: `oddsbomSelection-panel--content ${this.expanded ? 'open' : 'closed'}` }, index.h("div", { key: '9f9575c3bb176769cee836c9cf027fc76580b367', class: "oddsbomSelection-panel--content-thead" }, index.h("div", { key: '3dd762c94c915afc9f14b38fdaec73a42b56004e', class: "oddsbomSelection-panel--content-thead-item" }, lotteryOddsbomTicketBet.translate('teams', this.language)), index.h("div", { key: '2ea960a6db72e11a7e9157871f70769174f722f0', class: "oddsbomSelection-panel--content-thead-item" }, lotteryOddsbomTicketBet.translate('scores', this.language))), index.h("div", { key: '847ef04f0a9e289c796a856c3d16bebc83d2d188', class: "oddsbomSelection-panel--content-tbody" }, this.generateSelectionList())))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"],
+        "ticketBoardInfo": ["handleTicketBoradInfoChange"]
+    }; }
+};
+LotteryOddsbomTicketSelection.style = LotteryOddsbomTicketSelectionStyle0;
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS = {
+    en: {
+        cancel: 'Cancel',
+        confirm: 'Confirm'
+    },
+    ro: {
+        cancel: 'Anulează',
+        confirm: 'Confirmă'
+    },
+    fr: {
+        cancel: 'Annuler',
+        confirm: 'Confirmer'
+    },
+    ar: {
+        cancel: 'إلغاء',
+        confirm: 'تأكيد'
+    },
+    hr: {
+        cancel: 'Odustani',
+        confirm: 'Potvrdi'
+    }
+};
+const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+const getTranslations = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS[item][key] = data[item][key];
+        }
+    });
+};
+const resolveTranslationUrl = async (translationUrl) => {
+    if (translationUrl) {
+        try {
+            const response = await fetch(translationUrl);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const translations = await response.json();
+            getTranslations(translations);
+        }
+        catch (error) {
+            console.error('Failed to fetch or parse translations from URL:', error);
+        }
+    }
+};
+
+const lotteryTippingDialogCss = ".dialog-wrapper{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:1;z-index:199}.dialog-wrapper-visible{visibility:visible}.mask{position:fixed;inset:0;background-color:rgba(0, 0, 0, 0.5);opacity:0;z-index:1000;transition:opacity var(--duration) linear}.mask-enter{opacity:1}.mask-leave{opacity:0}.dialog{position:relative;background:var(--emw--color-dialog-background, #fff);border-radius:12px;box-shadow:0 4px 32px rgba(0, 0, 0, 0.15);opacity:0;transform:scale(0.9);transition:all var(--duration) linear;width:100%;max-width:100vw;overflow:hidden;z-index:1000}.dialog-enter{opacity:1;transform:scale(1)}.dialog-leave{opacity:0}.dialog.fullscreen{width:100vw !important;height:100vh;overflow:auto;max-height:none;border-radius:0;overflow:hidden}.dialog-header{padding:16px 16px 0 16px;display:flex;justify-content:space-between;align-items:center}.dialog-header .dialog-title{margin:0;font-size:1.25rem;font-weight:500;color:var(--emw--color-dialog-typography, #000)}.dialog-header .close-btn{background:transparent;border:none;font-size:1.5rem;width:2rem;height:2rem;color:var(--emw--color-gray-150, #6f6f6f);cursor:pointer;border-radius:4px}.dialog-header .close-btn:hover{background:var(--emw--color-gray-50, #f5f5f5);color:var(--emw--color-gray-300, #333)}.dialog-content{padding:24px;font-size:0.95rem;line-height:1.6;color:var(--emw--color-dialog-typography, #000);flex:1;overflow-y:auto;max-height:calc(100vh - 200px)}.dialog.fullscreen .dialog-content{max-height:none}.dialog-footer{padding:0 16px 16px 16px;display:flex;justify-content:center;gap:12px}.dialog-footer .cancel-btn,.dialog-footer .confirm-btn{padding:10px 24px;border-radius:6px;font-size:0.9rem;cursor:pointer;transition:all 0.3s linear}.dialog-footer .cancel-btn{border:var(--emw--button-border, 1px solid rgba(221, 221, 221, 0.8666666667));color:var(--emw--color-gray-300, #333);background:var(--emw--color-gray-400, #fff)}.dialog-footer .cancel-btn:hover{border-color:var(--emw--color-gray-100, #e6e6e6)}.dialog-footer .confirm-btn{border:none;color:var(--emw--color-gray-400, #fff);background:var(--emw--color-primary, #009993)}.dialog-footer .confirm-btn:hover{background:var(--emw--color-primary-variant, #004d4a)}@media screen and (max-width: 480px){.dialog.fullscreen .dialog-content{padding:12px}}";
+const LotteryTippingDialogStyle0 = lotteryTippingDialogCss;
+
+const LotteryTippingDialog = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.open = index.createEvent(this, "open", 7);
+        this.close = index.createEvent(this, "close", 7);
+        this.confirm = index.createEvent(this, "confirm", 7);
+        this.cancel = index.createEvent(this, "cancel", 7);
+        this.wasVisible = false;
+        this.mbSource = undefined;
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.visible = undefined;
+        this.dialogTitle = '';
+        this.width = '520px';
+        this.closable = true;
+        this.mask = true;
+        this.maskClosable = true;
+        this.animationDuration = 300;
+        this.fullscreen = false;
+        this.showFooter = true;
+        this.showCancelBtn = true;
+        this.language = 'en';
+        this.translationUrl = undefined;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryOddsbomTicketBet.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            resolveTranslationUrl(this.translationUrl);
+        }
+    }
+    componentWillUpdate() {
+        if (this.visible && !this.wasVisible) {
+            this.disableBodyScroll();
+        }
+        else if (!this.visible && this.wasVisible) {
+            this.enableBodyScroll();
+        }
+        this.wasVisible = this.visible;
+    }
+    disconnectedCallback() {
+        this.enableBodyScroll();
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    disableBodyScroll() {
+        document.body.style.overflow = 'hidden';
+    }
+    enableBodyScroll() {
+        document.body.style.overflow = '';
+    }
+    handleClose() {
+        this.cancel.emit();
+    }
+    handleMaskClick(e) {
+        if (this.maskClosable && e.target === this.el.querySelector('.mask')) {
+            this.cancel.emit();
+        }
+    }
+    handleConfirm() {
+        this.confirm.emit();
+    }
+    render() {
+        const dialogStyle = {
+            width: typeof this.width === 'number' ? `${this.width}px` : this.width,
+            '--duration': `${this.animationDuration}ms`
+        };
+        const dialogWrapperClass = ['dialog-wrapper', this.visible ? 'dialog-wrapper-visible' : ''];
+        const maskClass = ['mask', this.visible ? 'mask-enter' : 'mask-leave'];
+        const dialogClass = [
+            'dialog',
+            this.visible ? 'dialog-enter' : 'dialog-leave',
+            this.fullscreen ? 'fullscreen' : ''
+        ].join(' ');
+        const contentStyle = {
+            maxHeight: 'calc(100vh - 62px)',
+            overflowY: 'auto'
+        };
+        return (index.h("div", { key: '716c6488b86fc5a74bcd8c8c8a4eee1b85f75cb7', class: dialogWrapperClass.join(' '), ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: '161d976b5a15f62c63b56555e161b5b29c0a7771', class: maskClass.join(' '), onClick: this.handleMaskClick.bind(this) }), index.h("div", { key: 'ebd2c356c169765b06c85997dc9906b74358b450', class: dialogClass, style: dialogStyle, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-title" }, index.h("div", { key: '2a8616c336447b33d3c4b3f22deee3871abd93c9', class: "dialog-header" }, index.h("h2", { key: 'fc4f4f87826620754f8cce73874726cdebcc280e', id: "dialog-title", class: "dialog-title" }, this.dialogTitle), this.closable && (index.h("button", { key: '1626434c0700df7dc094cbf0c96840476ab65da5', class: "close-btn", onClick: this.handleClose.bind(this) }, "x"))), index.h("div", { key: '44d28c0e477e3e16069749f7700ee70b6a486d07', class: "dialog-content", style: contentStyle }, index.h("slot", { key: '745e1329fc3647247245f7aa96d10a06b6b18329' })), this.showFooter && (index.h("div", { key: 'cc3b19ba0ab16fd485f2c4e81a5793a25cecb98f', class: "dialog-footer" }, index.h("slot", { key: '906adc00a3735e096159002b972804cfe147f42e', name: "footer" }, this.showCancelBtn && (index.h("button", { key: '1fc68b04c7c39ca9b7dfb228836eb38c4368c355', class: "cancel-btn", onClick: this.handleClose.bind(this) }, translate('cancel', this.language))), index.h("button", { key: '1d054ca93148286249d4989c783a67e1afe33667', class: "confirm-btn", onClick: this.handleConfirm.bind(this) }, translate('confirm', this.language))))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryTippingDialog.style = LotteryTippingDialogStyle0;
+
+exports.lottery_oddsbom_ticket_bet = lotteryOddsbomTicketBet.LotteryOddsbomTicketBet;
+exports.lottery_oddsbom_bullet = LotteryOddsbomBullet;
+exports.lottery_oddsbom_bullet_group = LotteryOddsbomBulletGroup;
+exports.lottery_oddsbom_oddschart = LotteryOddsbomOddschart;
+exports.lottery_oddsbom_oddschart_input = LotteryOddsbomOddschartInput;
+exports.lottery_oddsbom_ticket_board = LotteryOddsbomTicketBoard;
+exports.lottery_oddsbom_ticket_button = LotteryOddsbomTicketButton;
+exports.lottery_oddsbom_ticket_selection = LotteryOddsbomTicketSelection;
+exports.lottery_tipping_dialog = LotteryTippingDialog;