@everymatrix/lottery-tipping-page 1.94.62 → 1.94.64

package/dist/cjs/{general-multi-select_15.cjs.entry.js → app-tooltip_21.cjs.entry.js}

@@ -2,8 +2,42 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9d5d8231.js');
-const lotteryTippingPage = require('./lottery-tipping-page-65fd9e22.js');
+const index = require('./index-d19ed439.js');
+const lotteryTippingPage = require('./lottery-tipping-page-1cccdeb8.js');
+
+const tooltipCss = ":host{display:inline-flex;position:relative}.tooltip-wrapper{position:relative;display:inline-flex}.tooltip-content-wrapper{position:absolute;z-index:10;bottom:125%;left:50%;transform:translateX(-50%);opacity:0;visibility:hidden;transition:opacity 0.2s, visibility 0.2s}.tooltip-content-wrapper.visible{opacity:1;visibility:visible}.tooltip-content{background-color:var(--emw--tooltip-background-color, #000);color:var(--emw--tooltip-text-color, #fff);border-radius:4px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.15);white-space:nowrap;padding:4px}";
+const AppTooltipStyle0 = tooltipCss;
+
+const Tooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.show = () => (this.visible = true);
+        this.hide = () => (this.visible = false);
+        this.visible = false;
+    }
+    componentDidLoad() {
+        this.trigger = this.host.querySelector('[slot="trigger"]');
+        if (this.trigger) {
+            this.trigger.addEventListener('mouseenter', this.show);
+            this.trigger.addEventListener('mouseleave', this.hide);
+            this.trigger.addEventListener('focus', this.show);
+            this.trigger.addEventListener('blur', this.hide);
+        }
+    }
+    disconnectedCallback() {
+        if (this.trigger) {
+            this.trigger.removeEventListener('mouseenter', this.show);
+            this.trigger.removeEventListener('mouseleave', this.hide);
+            this.trigger.removeEventListener('focus', this.show);
+            this.trigger.removeEventListener('blur', this.hide);
+        }
+    }
+    render() {
+        return (index.h("div", { key: 'e56695ac60fcd7903127179423e9954ef40f05c0', class: "tooltip-wrapper" }, index.h("slot", { key: '4e2472a395ceeb2b911692739d326c031df07e29', name: "trigger" }), index.h("div", { key: 'f77bd72da94eb17d12e42ebb86c395c55801b728', class: { 'tooltip-content-wrapper': true, visible: this.visible } }, index.h("div", { key: '988399e2b42988622d46eaf255f17c6221eb9697', class: "tooltip-content" }, index.h("slot", { key: '05de0572ab1331d965e61947c5c15775e225197a', name: "content" })))));
+    }
+    get host() { return index.getElement(this); }
+};
+Tooltip.style = AppTooltipStyle0;
 
 const generalMultiSelectCss = ".multi-select-container{position:relative;font-family:\"Inter\", sans-serif;margin-top:4px;width:100%}.flex-row{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;padding:6px 10px;padding-right:6px;border-radius:0.25em;background:var(--emw-selector-color-background, #e8ebef);cursor:pointer}.control{flex:1;display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden}.control:focus-within{border-color:var(--emw--color-primary, #fed275);box-shadow:0 0 0 2px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15))}.chip{display:inline-flex;align-items:center;background:var(--emw--color-gray-50, #f5f5f5);color:var(--emw--color-dialog-typography, #000);border-radius:4px;padding:2px 8px;margin-right:6px;font-size:0.875rem;line-height:1.2;justify-content:space-between;flex:0 1 auto;min-width:0}.chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overflow-chip{background:var(--emw--color-gray-100, #e6e6e6);color:var(--emw--color-gray-300, #333);width:20px;text-align:center;display:block}.remove-btn{background:none;border:none;font-size:1rem;margin-left:6px;cursor:pointer;color:var(--emw--color-gray-150, #6f6f6f)}.remove-btn:hover{color:var(--emw--color-error, red)}.placeholder{color:var(--emw--color-gray-150, #6f6f6f);font-size:0.875rem;padding:3px 8px;padding-left:0;line-height:1.2}.arrow{margin-left:auto;font-size:0.8rem;width:20px;color:var(--emw--color-gray-150, #6f6f6f)}.dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;max-height:240px;overflow-y:auto;border:1px solid var(--emw--color-gray-100, #e6e6e6);border-radius:6px;background:var(--emw--color-dialog-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:10}.dropdown-item{padding:10px 14px;cursor:pointer;font-size:0.875rem;line-height:1.4;transition:background 0.2s}.dropdown-item:hover{background:var(--emw--color-background-tertiary, #ccc);color:var(--emw--color-typography, #000)}.dropdown-item.selected{background:var(--emw--color-background-secondary, #f5f5f5);color:var(--emw--color-typography, #000);font-weight:500}.overflow-popover{position:absolute;top:var(--overflow-top, 0px);left:var(--overflow-left, 0px);max-width:200px;padding:12px;display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--emw--color-gray-100, #d0d5dd);border-radius:6px;background:var(--emw--color-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:20}";
 const GeneralMultiSelectStyle0 = generalMultiSelectCss;
@@ -2899,9 +2933,9 @@ const HelperCountDown = class {
 };
 HelperCountDown.style = HelperCountDownStyle0;
 
-const DEFAULT_LANGUAGE$5 = 'en';
-const SUPPORTED_LANGUAGES$5 = ['ro', 'en', 'fr', 'ar', 'hr'];
-const TRANSLATIONS$5 = {
+const DEFAULT_LANGUAGE$7 = 'en';
+const SUPPORTED_LANGUAGES$7 = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS$7 = {
     en: {
         stop: 'Stop',
         at: 'at',
@@ -2925,18 +2959,18 @@ const TRANSLATIONS$5 = {
         at: 'u'
     }
 };
-const translate$5 = (key, customLang) => {
+const translate$7 = (key, customLang) => {
     const lang = customLang;
-    return TRANSLATIONS$5[lang !== undefined && SUPPORTED_LANGUAGES$5.includes(lang) ? lang : DEFAULT_LANGUAGE$5][key];
+    return TRANSLATIONS$7[lang !== undefined && SUPPORTED_LANGUAGES$7.includes(lang) ? lang : DEFAULT_LANGUAGE$7][key];
 };
-const getTranslations$5 = (data) => {
+const getTranslations$7 = (data) => {
     Object.keys(data).forEach((item) => {
         for (let key in data[item]) {
-            TRANSLATIONS$5[item][key] = data[item][key];
+            TRANSLATIONS$7[item][key] = data[item][key];
         }
     });
 };
-const resolveTranslationUrl$3 = async (translationUrl) => {
+const resolveTranslationUrl$4 = async (translationUrl) => {
     if (translationUrl) {
         try {
             const response = await fetch(translationUrl);
@@ -2944,7 +2978,7 @@ const resolveTranslationUrl$3 = async (translationUrl) => {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
             const translations = await response.json();
-            getTranslations$5(translations);
+            getTranslations$7(translations);
         }
         catch (error) {
             console.error('Failed to fetch or parse translations from URL:', error);
@@ -2997,7 +3031,7 @@ const LotteryBanner = class {
     }
     async componentWillLoad() {
         if (this.translationUrl) {
-            resolveTranslationUrl$3(this.translationUrl);
+            resolveTranslationUrl$4(this.translationUrl);
         }
         this.checkWagerStatus();
     }
@@ -3033,7 +3067,7 @@ const LotteryBanner = class {
             case 'title':
                 return this.bannerTitle && index.h("div", { class: `lottery-banner__title ${className}` }, this.bannerTitle);
             case 'info':
-                return (index.h("div", { class: `lottery-banner__info ${className}` }, !this.isWagerStarted ? (index.h("div", { class: "lottery-banner__info-item" }, index.h("span", { class: "lottery-banner__info-item-label" }, index.h("span", { class: "lottery-banner__info-item-label__strong" }, translate$5('startIn', this.language)), "\u00A0"), index.h("helper-count-down", { class: "lottery-banner__info-item-value lottery-banner__info-item-value__strong", value: this.startTime, format: "DDD HHH mmM ssS", onCountDownFinish: this.handleCountdownFinish }))) : (index.h("div", { class: "lottery-banner__info-item" }, index.h("span", { class: "lottery-banner__info-item-label" }, index.h("span", { class: "lottery-banner__info-item-label__strong" }, translate$5('stop', this.language)), "\u00A0", translate$5('at', this.language)), index.h("span", { class: "lottery-banner__info-item-value" }, this.formattedStopTime))), this.isWagerStarted && this.turnover !== null && this.turnover !== undefined && (index.h("div", { class: "lottery-banner__info-item" }, index.h("span", { class: "lottery-banner__info-item-label" }, translate$5('turnover', this.language)), index.h("span", { class: "lottery-banner__info-item-value" }, this.turnover)))));
+                return (index.h("div", { class: `lottery-banner__info ${className}` }, !this.isWagerStarted ? (index.h("div", { class: "lottery-banner__info-item" }, index.h("span", { class: "lottery-banner__info-item-label" }, index.h("span", { class: "lottery-banner__info-item-label__strong" }, translate$7('startIn', this.language)), "\u00A0"), index.h("helper-count-down", { class: "lottery-banner__info-item-value lottery-banner__info-item-value__strong", value: this.startTime, format: "DDD HHH mmM ssS", onCountDownFinish: this.handleCountdownFinish }))) : (index.h("div", { class: "lottery-banner__info-item" }, index.h("span", { class: "lottery-banner__info-item-label" }, index.h("span", { class: "lottery-banner__info-item-label__strong" }, translate$7('stop', this.language)), "\u00A0", translate$7('at', this.language)), index.h("span", { class: "lottery-banner__info-item-value" }, this.formattedStopTime))), this.isWagerStarted && this.turnover !== null && this.turnover !== undefined && (index.h("div", { class: "lottery-banner__info-item" }, index.h("span", { class: "lottery-banner__info-item-label" }, translate$7('turnover', this.language)), index.h("span", { class: "lottery-banner__info-item-value" }, this.turnover)))));
             default:
                 return null;
         }
@@ -3057,9 +3091,9 @@ const LotteryBanner = class {
 };
 LotteryBanner.style = LotteryBannerStyle0;
 
-const DEFAULT_LANGUAGE$4 = 'en';
-const SUPPORTED_LANGUAGES$4 = ['ro', 'en', 'fr', 'ar', 'hr', 'zh'];
-const TRANSLATIONS$4 = {
+const DEFAULT_LANGUAGE$6 = 'en';
+const SUPPORTED_LANGUAGES$6 = ['ro', 'en', 'fr', 'ar', 'hr', 'zh'];
+const TRANSLATIONS$6 = {
     en: {
         loading: 'Loading'
     },
@@ -3068,9 +3102,9 @@ const TRANSLATIONS$4 = {
     ar: {},
     hr: {}
 };
-const translate$4 = (key, customLang, replacements) => {
+const translate$6 = (key, customLang, replacements) => {
     const lang = customLang;
-    let translation = TRANSLATIONS$4[lang !== undefined && SUPPORTED_LANGUAGES$4.includes(lang) ? lang : DEFAULT_LANGUAGE$4][key];
+    let translation = TRANSLATIONS$6[lang !== undefined && SUPPORTED_LANGUAGES$6.includes(lang) ? lang : DEFAULT_LANGUAGE$6][key];
     if (replacements) {
         Object.keys(replacements).forEach((placeholder) => {
             translation = translation.replace(`{${placeholder}}`, replacements[placeholder]);
@@ -3078,14 +3112,14 @@ const translate$4 = (key, customLang, replacements) => {
     }
     return translation;
 };
-const getTranslations$4 = (data) => {
+const getTranslations$6 = (data) => {
     Object.keys(data).forEach((item) => {
         for (let key in data[item]) {
-            TRANSLATIONS$4[item][key] = data[item][key];
+            TRANSLATIONS$6[item][key] = data[item][key];
         }
     });
 };
-const resolveTranslationUrl$2 = async (translationUrl) => {
+const resolveTranslationUrl$3 = async (translationUrl) => {
     if (translationUrl) {
         try {
             const response = await fetch(translationUrl);
@@ -3093,7 +3127,7 @@ const resolveTranslationUrl$2 = async (translationUrl) => {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
             const translations = await response.json();
-            getTranslations$4(translations);
+            getTranslations$6(translations);
         }
         catch (error) {
             console.error('Failed to fetch or parse translations from URL:', error);
@@ -3171,7 +3205,7 @@ const LotteryButton = class {
     }
     componentWillLoad() {
         if (this.translationUrl) {
-            resolveTranslationUrl$2(this.translationUrl);
+            resolveTranslationUrl$3(this.translationUrl);
         }
     }
     render() {
@@ -3211,7 +3245,7 @@ const LotteryButton = class {
                 [`btn--${variant}`]: true,
                 [`btn--${size}`]: true,
                 'btn--loading': this.loading
-            }, style: color ? buttonStyles : undefined, disabled: isDisabled, onClick: this.handleClick, ref: (el) => (this.stylingContainer = el) }, this.loading ? (index.h("div", { class: "loading-container" }, index.h("span", { class: "content" }, this.text || translate$4('loading', this.language)), index.h("span", { class: "spinner" }))) : (index.h("span", { class: "content" }, index.h("slot", { name: "icon-left" }), this.text || index.h("slot", null), index.h("slot", { name: "icon-right" }))), index.h("div", { key: '302ea02be395bb24989d4abc040a513e23fa029a', class: "ripple-container" }, this.ripples.map((ripple, index$1) => (index.h("span", { key: index$1, class: "ripple", style: {
+            }, style: color ? buttonStyles : undefined, disabled: isDisabled, onClick: this.handleClick, ref: (el) => (this.stylingContainer = el) }, this.loading ? (index.h("div", { class: "loading-container" }, index.h("span", { class: "content" }, this.text || translate$6('loading', this.language)), index.h("span", { class: "spinner" }))) : (index.h("span", { class: "content" }, index.h("slot", { name: "icon-left" }), this.text || index.h("slot", null), index.h("slot", { name: "icon-right" }))), index.h("div", { key: '302ea02be395bb24989d4abc040a513e23fa029a', 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`,
@@ -3227,21 +3261,74 @@ const LotteryButton = class {
 };
 LotteryButton.style = LotteryButtonStyle0;
 
-const lotteryTippingBulletCss = ".LotteryTippingBullet__segment{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:16px;line-height:1;font-weight:500;color:var(--emw--color-typography, #000);background:var(--emw--color-background, #fff);border:1px solid var(--emw--color-gray-100, #e6e6e6);border-radius:6px;cursor:pointer;transition:all 0.2s ease;user-select:none}.LotteryTippingBullet__segment:not(.LotteryTippingBullet__segment--disabled):hover{cursor:pointer;animation:jelly 0.3s ease-in-out;transform:scale(1.02)}.LotteryTippingBullet__segment--text{border:none;color:var(--emw--color-typography, #000);background:transparent;font-weight:400}.LotteryTippingBullet__segment--text:hover{cursor:not-allowed !important}.LotteryTippingBullet__segment--active{font-weight:600;background-color:var(--emw--color-background-inverse, #000);color:var(--emw--color-primary, #fed275)}.LotteryTippingBullet__segment--disabled:not(.LotteryTippingBullet__segment--active){background-color:var(--emw--color-background-tertiary, #ccc);color:var(--emw--color-gray-150, #6f6f6f);border-color:var(--emw--color-gray-100, #e6e6e6)}.LotteryTippingBullet__segment--disabled:hover{cursor:not-allowed}@keyframes jelly{0%{transform:translate(0, 0)}20%{transform:translate(-0.5px, -0.5px)}40%{transform:translate(0.5px, 0.5px)}60%{transform:translate(-0.25px, -0.25px)}80%{transform:translate(0.25px, 0.25px)}100%{transform:translate(0, 0)}}";
-const LotteryTippingBulletStyle0 = lotteryTippingBulletCss;
+const generateUUID$2 = () => {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+};
+function fetchRequest$2(url, method = 'GET', body = null, headers = {}) {
+    return new Promise((resolve, reject) => {
+        const uuid = generateUUID$2();
+        const headersOrigin = Object.assign({ 'Content-Type': 'application/json' }, headers);
+        if (method !== 'GET' && method !== 'HEAD') {
+            headersOrigin['X-Idempotency-Key'] = uuid;
+        }
+        const options = {
+            method,
+            headers: headersOrigin,
+            body: null
+        };
+        if (body && method !== 'GET' && method !== 'HEAD') {
+            options.body = JSON.stringify(body);
+        }
+        else {
+            delete options.body;
+        }
+        fetch(url, options)
+            .then((response) => {
+            if (!response.ok) {
+                return reject(response);
+            }
+            return response.json();
+        })
+            .then((data) => resolve(data))
+            .catch((error) => reject(error));
+    });
+}
 
-const LotteryTippingBullet = class {
+var TicketStatus;
+(function (TicketStatus) {
+    TicketStatus["PURCHASED"] = "Purchased";
+    TicketStatus["SETTLED"] = "Settled";
+    TicketStatus["CANCELED"] = "Canceled";
+    TicketStatus["ERROR"] = "Error";
+})(TicketStatus || (TicketStatus = {}));
+
+const lotteryOrderSummaryCss = ":host{width:100%}.order-summary{width:100%;background:var(--emw--color-background, #fff);border-radius:var(--lottery-order-summary-border-radius, 8px);border:var(--lottery-order-summary-border, none);box-shadow:var(--lottery-order-summary-box-shadow, none);box-sizing:border-box}.order-summary__title{margin:var(--lottery-order-summary-title-margin, 0 0 30px 0);text-align:var(--lottery-order-summary-title-text-align, center);color:var(--emw--color-typography, #000);text-transform:uppercase;font-weight:var(--lottery-order-summary-title-font-weight, 700)}.order-summary__ticket-info{display:flex;align-items:center;margin-bottom:var(--lottery-order-summary-row-gap, 16px);gap:var(--lottery-order-summary-col-gap, 10px);color:var(--emw--color-typography, #000)}.order-summary__ticket-label{display:flex;flex-direction:row;align-items:center;width:var(--lottery-order-summary-label-width, 50px);max-width:var(--lottery-order-summary-label-max-width, 100%);flex-shrink:0}.order-summary__colon{margin-left:2px}.order-summary__ticket{font-weight:var(--lottery-order-summary-label-font-weight, 500);color:var(--emw--color-typography, #000);overflow-wrap:break-word}.order-summary__details{display:flex;align-items:center;color:var(--emw--color-typography, #000);font-weight:var(--lottery-order-summary-details-font-weight, 400)}.order-summary__divider{border:none;border-top:var(--lottery-order-summary-divider-border, 1px solid var(--emw--color-gray-100, #e6e6e6));margin:var(--lottery-order-summary-divider-margin, 20px 0)}.order-summary__button-wrapper{display:flex;justify-content:center;margin:var(--lottery-order-summary-button-wrapper-margin, 0);padding:var(--lottery-order-summary-button-wrapper-padding, 0)}";
+const LotteryOrderSummaryStyle0 = lotteryOrderSummaryCss;
+
+const LotteryOrderSummary = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.lotteryTippingBulletToggleEvent = index.createEvent(this, "lotteryTippingBulletToggle", 7);
+        this.orderSummarySubmit = index.createEvent(this, "orderSummarySubmit", 7);
+        this.submitSuccess = index.createEvent(this, "lotteryTicketSubmitSuccess", 7);
+        this.submitError = index.createEvent(this, "lotteryTicketSubmitError", 7);
+        this.sessionExpired = index.createEvent(this, "sessionExpired", 7);
+        this.endpoint = undefined;
+        this.sessionId = undefined;
         this.mbSource = undefined;
         this.clientStyling = undefined;
         this.clientStylingUrl = undefined;
-        this.positionIdx = undefined;
-        this.theme = 'default';
-        this.value = '';
-        this.disabled = false;
-        this.isSelected = false;
+        this.language = 'en';
+        this.orderSummaryTitle = undefined;
+        this.ticketsLabel = undefined;
+        this.totalLabel = undefined;
+        this.showColon = true;
+        this.showDivider = false;
+        this.submitDisabled = false;
+        this.submitButtonText = undefined;
+        this.submitLoading = false;
     }
     handleClientStylingChange(newValue, oldValue) {
         if (newValue != oldValue) {
@@ -3268,23 +3355,77 @@ const LotteryTippingBullet = class {
                 lotteryTippingPage.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
         }
     }
-    handleClick() {
-        if (!this.disabled) {
-            this.lotteryTippingBulletToggleEvent.emit({ positionIdx: this.positionIdx });
-        }
-    }
     disconnectedCallback() {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
+    handleLotteryTicketParamsReady(event) {
+        if (event.detail && this.isValidTicketSubmitParam(event.detail)) {
+            this.handleSubmitTickets(event.detail);
+        }
+        else {
+            const errorMessage = 'Invalid ticket data received before submission.';
+            console.error(errorMessage, event.detail);
+            this.submitError.emit({
+                message: errorMessage,
+                dataOrigin: event.detail,
+                status: 400 // Bad Request
+            });
+        }
+    }
+    isValidTicketSubmitParam(detail) {
+        return (detail &&
+            Array.isArray(detail.tickets) &&
+            detail.tickets.length > 0 &&
+            detail.tickets.every((ticket) => this.isValidTicketParam(ticket)));
+    }
+    isValidTicketParam(ticket) {
+        return (ticket &&
+            ticket.gameName !== undefined &&
+            ticket.startingDrawId !== undefined &&
+            ticket.amount !== undefined &&
+            ticket.currency !== undefined &&
+            ticket.selection !== undefined);
+    }
+    async handleSubmitTickets(body) {
+        try {
+            this.submitLoading = true;
+            const res = await fetchRequest$2(`${this.endpoint}/tickets`, 'POST', body, {
+                Authorization: `Bearer ${this.sessionId}`
+            });
+            if (!res.tickets.every((ticket) => ticket.state === TicketStatus.PURCHASED)) {
+                this.submitError.emit({
+                    message: 'Failed to purchase ticket',
+                    dataOrigin: res,
+                    status: 200
+                });
+            }
+            else {
+                this.submitSuccess.emit({
+                    dataOrigin: res,
+                    status: 200
+                });
+            }
+        }
+        catch (e) {
+            if (e.status === 401) {
+                this.sessionExpired.emit();
+            }
+            if (e.status > 300 || !e.status) {
+                this.submitError.emit({
+                    dataOrigin: e,
+                    status: e.status || 0
+                });
+            }
+        }
+        finally {
+            this.submitLoading = false;
+        }
+    }
+    handleSubmit() {
+        this.orderSummarySubmit.emit();
+    }
     render() {
-        return (index.h("div", { key: 'ef0fee38ed62adb7809b5a60668af6a499ebe5a6', ref: (el) => (this.stylingContainer = el) }, this.theme === 'text' ? (index.h("div", { class: {
-                LotteryTippingBullet__segment: true,
-                'LotteryTippingBullet__segment--text': true
-            } }, this.value)) : (index.h("button", { class: {
-                LotteryTippingBullet__segment: true,
-                'LotteryTippingBullet__segment--disabled': this.disabled,
-                'LotteryTippingBullet__segment--active': this.isSelected
-            }, onClick: this.handleClick.bind(this) }, this.isSelected ? 'X' : this.value))));
+        return (index.h("div", { key: 'bdab321b9336f47e16057d240b3226d7cba59b97', ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: 'de7ffcc9f96d8c7cfc7bdb3a3c7225ee78c33483', class: "order-summary" }, index.h("h3", { key: '9500cd69a6eba0855d4981cdad8eaa91b9c98567', class: "order-summary__title" }, this.orderSummaryTitle), index.h("div", { key: 'ce29c82eef1d12bc63e94e4fa2d5474700860af2', class: "order-summary__ticket" }, index.h("div", { key: '9db79da17590c7f847f46c3b3b66489ea9a0e268', class: "order-summary__ticket-info" }, index.h("div", { key: '4b5a2df807aeb421cf3c1ebf33f410a92f39ccaf', class: "order-summary__ticket-label" }, index.h("div", { key: 'feb73e9f849d2e3d6b77e4c848657f27e6a82323', class: "order-summary__ticket" }, this.ticketsLabel), index.h("span", { key: '51f70dcdda2154d8ce97d8e1a7c0f61a6198afbb', class: "order-summary__colon" }, this.showColon ? ':' : null)), index.h("div", { key: '4fed2d63cd7a881c8844055fe1fde99c8c7aa9fb', class: "order-summary__details" }, index.h("slot", { key: '6a7969738546ee4aca81a075f6174556e78d2c31', name: "orderSummaryTicketDetail" }))), this.showDivider && index.h("hr", { key: '029803fa93960d5098a24d5ca18e77e14562b29f', class: "order-summary__divider" }), index.h("div", { key: '738096c5b605a97851dbf24a972d93d9533ad48b', class: "order-summary__ticket-info" }, index.h("div", { key: 'acd8a7f3e64c97f58c79f57a90143151c996abf8', class: "order-summary__ticket-label" }, index.h("div", { key: '44e6b29978ca4fc2b22ca9d95ee4facfc883f292', class: "order-summary__ticket" }, this.totalLabel), index.h("span", { key: '330a00a4b39e578a1b0d80211d2b68d44c5235c9', class: "order-summary__colon" }, this.showColon ? ':' : null)), index.h("span", { key: '294046815a62a80366458aade4ec5d5476577a93', class: "order-summary__details" }, index.h("slot", { key: '02d129ef0caf523ec0c9da34318df46d3b008376', name: "orderSummaryTotalDetail" })))), index.h("slot", { key: '9395396883f0594ad8db216a9aa9fa0aeff45c10', name: "orderSummaryChoice" }), index.h("div", { key: '462672abc490cde00fea90ea585f48875ca2ec47', class: "order-summary__button-wrapper" }, index.h("lottery-button", { key: '1885bee3570ce6b58d4ae1977c635f418485fdbe', onClick: this.handleSubmit.bind(this), loading: this.submitLoading, disabled: this.submitDisabled, text: this.submitButtonText })))));
     }
     static get watchers() { return {
         "clientStyling": ["handleClientStylingChange"],
@@ -3292,109 +3433,66 @@ const LotteryTippingBullet = class {
         "mbSource": ["handleMbSourceChange"]
     }; }
 };
-LotteryTippingBullet.style = LotteryTippingBulletStyle0;
+LotteryOrderSummary.style = LotteryOrderSummaryStyle0;
 
-const lotteryTippingBulletGroupCss = "";
-const LotteryTippingBulletGroupStyle0 = lotteryTippingBulletGroupCss;
+const lotterySegmentedCss = ":host{display:block}.wrapper{display:flex;align-items:center;gap:8px}.label{font-size:16px;color:var(--emw-segmented-label-color, #333);font-weight:500}.segmented-container{display:inline-flex;position:relative;background-color:var(--emw-segmented-bg, #f0f0f0);border-radius:20px;box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1)}.option{position:relative;z-index:1;border:none;background-color:transparent;padding:12px 18px;cursor:pointer;font-size:14px;font-weight:500;color:var(--emw-segmented-text-color, #555);transition:color 0.3s ease;white-space:nowrap}.option.active{color:var(--emw-segmented-active-text-color, #000);font-weight:bold}.active-indicator{position:absolute;z-index:0;top:2px;bottom:2px;background-color:var(--emw-segmented-active-bg, #fff);border-radius:22px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.15);transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1)}";
+const LotterySegmentedStyle0 = lotterySegmentedCss;
 
-const LotteryTippingBulletGroup = class {
+const LotterySegmented = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.lotteryTippingBulletGroupToggleEvent = index.createEvent(this, "lotteryTippingBulletGroupToggle", 7);
-        this.mbSource = undefined;
-        this.clientStyling = undefined;
-        this.clientStylingUrl = undefined;
-        this.positionIdx = undefined;
-        this.theme = 'default';
-        this.mode = 'single';
-        this.bulletConfigContent = '';
-    }
-    get bulletConfigArr() {
-        const defaultConfig = [
-            {
-                value: '1'
-            },
-            {
-                value: 'X'
-            },
-            {
-                value: '2'
-            }
-        ];
-        if (typeof this.bulletConfigContent === 'string' && this.bulletConfigContent) {
-            try {
-                const _temp = JSON.parse(this.bulletConfigContent);
-                return _temp;
-            }
-            catch (e) {
-                console.error('Error parsing bulletConfigContent:', e);
-                return defaultConfig;
-            }
-        }
-        else {
-            return defaultConfig;
-        }
-    }
-    handleClientStylingChange(newValue, oldValue) {
-        if (newValue != oldValue) {
-            lotteryTippingPage.setClientStyling(this.stylingContainer, this.clientStyling);
-        }
+        this.valueChange = index.createEvent(this, "valueChange", 7);
+        this.optionRefs = [];
+        this.label = undefined;
+        this.options = [];
+        this.value = undefined;
     }
-    handleClientStylingUrlChange(newValue, oldValue) {
-        if (newValue != oldValue) {
-            lotteryTippingPage.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
-        }
+    handleValueChange() {
+        this.updateActiveIndicator();
     }
-    handleMbSourceChange(newValue, oldValue) {
-        if (newValue != oldValue) {
-            lotteryTippingPage.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+    componentWillLoad() {
+        if (!this.value && this.options.length > 0) {
+            // Default to the first option if no value is provided
+            this.value = this.options[0].value;
         }
     }
     componentDidLoad() {
-        if (this.stylingContainer) {
-            if (this.mbSource)
-                lotteryTippingPage.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
-            if (this.clientStyling)
-                lotteryTippingPage.setClientStyling(this.stylingContainer, this.clientStyling);
-            if (this.clientStylingUrl)
-                lotteryTippingPage.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
-        }
-    }
-    disconnectedCallback() {
-        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+        // Use requestAnimationFrame to ensure layout is calculated
+        requestAnimationFrame(() => this.updateActiveIndicator());
     }
-    lotteryTippingBulletSelectionHandler(event) {
-        const { positionIdx } = event.detail;
-        this.handleToggle(positionIdx);
+    handleWindowResize() {
+        this.updateActiveIndicator();
     }
-    handleToggle(index) {
-        let newConfigArr = [...this.bulletConfigArr];
-        if (this.mode === 'single') {
-            // single mode: only one button can be selected
-            newConfigArr = newConfigArr.map((item) => (Object.assign(Object.assign({}, item), { isSelected: false })));
-            newConfigArr[index].isSelected = true;
+    updateActiveIndicator() {
+        const selectedIndex = this.options.findIndex((opt) => opt.value === this.value);
+        if (selectedIndex === -1 || !this.activeIndicator || !this.optionRefs[selectedIndex]) {
+            return;
         }
-        else {
-            // multi mode: multiple buttons can be selected
-            newConfigArr = newConfigArr.map((item) => (Object.assign({}, item)));
-            newConfigArr[index].isSelected = !newConfigArr[index].isSelected;
+        const selectedOptionEl = this.optionRefs[selectedIndex];
+        const containerEl = this.activeIndicator.parentElement;
+        const containerRect = containerEl.getBoundingClientRect();
+        const optionRect = selectedOptionEl.getBoundingClientRect();
+        this.activeIndicator.style.transform = `translateX(${optionRect.left - containerRect.left}px)`;
+        this.activeIndicator.style.width = `${optionRect.width}px`;
+    }
+    onOptionClick(optionValue) {
+        if (this.value !== optionValue) {
+            this.valueChange.emit(optionValue);
         }
-        this.lotteryTippingBulletGroupToggleEvent.emit({
-            bulletConfigArr: newConfigArr,
-            positionIdx: this.positionIdx + '-' + index
-        });
     }
     render() {
-        var _a;
-        return (index.h("div", { ref: (el) => (this.stylingContainer = el), key: this.positionIdx }, index.h("div", { key: '68223022eed831932c571378164be913206d98e9', style: { display: 'flex', flexDirection: 'row', gap: '10px' } }, (_a = this.bulletConfigArr) === null || _a === void 0 ? void 0 : _a.map((item, index$1) => (index.h("div", { key: index$1 }, index.h("lottery-tipping-bullet", { value: item.value, isSelected: item.isSelected, "position-idx": index$1, disabled: item.disabled, theme: this.theme, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, mbSource: this.mbSource })))))));
+        return (index.h("div", { key: '675f17d5fd8ddef56324416fda27ffd130ddafa3', class: "wrapper" }, this.label && index.h("label", { key: 'd6dfc897e2014a7ce57cc4ddca57b1e6173eb1a5', class: "label" }, this.label), index.h("div", { key: 'e89097f2a9536ada1e0edf52e0d50cdd8f88c52e', class: "segmented-container" }, index.h("div", { key: 'f720dc7b9b8957cb6d363fd6a2313978eba6988e', class: "active-indicator", ref: (el) => (this.activeIndicator = el) }), this.options.map((option, index$1) => (index.h("button", { class: { option: true, active: this.value === option.value }, onClick: () => this.onOptionClick(option.value), ref: (el) => (this.optionRefs[index$1] = el) }, option.label))))));
     }
+    get host() { return index.getElement(this); }
     static get watchers() { return {
-        "clientStyling": ["handleClientStylingChange"],
-        "clientStylingUrl": ["handleClientStylingUrlChange"],
-        "mbSource": ["handleMbSourceChange"]
+        "value": ["handleValueChange"]
     }; }
 };
-LotteryTippingBulletGroup.style = LotteryTippingBulletGroupStyle0;
+LotterySegmented.style = LotterySegmentedStyle0;
+
+// 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 DeleteOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-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-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z" } }] }, "name": "delete", "theme": "outlined" };
@@ -3469,42 +3567,1141 @@ function renderAbstractNodeToSVGElement(node, options) {
     return "<".concat(node.tag).concat(attrsToken, " />");
 }
 
-const DEFAULT_LANGUAGE$3 = 'en';
-const SUPPORTED_LANGUAGES$3 = ['ro', 'en', 'fr', 'ar', 'hr'];
-const TRANSLATIONS$3 = {
-    en: {
-        cancel: 'Cancel',
-        confirm: 'Confirm'
-    },
-    ro: {
-        cancel: 'Anulează',
-        confirm: 'Confirmă'
-    },
-    fr: {
-        cancel: 'Annuler',
-        confirm: 'Confirmer'
-    },
-    ar: {
-        cancel: 'إلغاء',
-        confirm: 'تأكيد'
-    },
-    hr: {
-        cancel: 'Odustani',
-        confirm: 'Potvrdi'
+// Basic sanitization method for SVG content
+// This is NOT a complete XSS prevention for SVG, but prevents common attacks.
+function sanitizeSvg(svgString) {
+    let sanitized = svgString.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, ''); // Remove <script> tags
+    sanitized = sanitized.replace(/on[a-z]+=[\"'][^\"']*[\"']/gi, ''); // Remove on* attributes
+    sanitized = sanitized.replace(/javascript:/gi, ''); // Remove javascript: URLs
+    return sanitized;
+}
+
+const lotterySelectionCss = ":host{display:inline-block}.lottery-selection__button{display:flex;align-items:center;justify-content:center;width:var(--lottery-selection-width, 32px);height:var(--lottery-selection-height, 32px);padding:var(--lottery-selection-padding, 0);box-sizing:border-box;background:var(--lottery-selection-background, var(--emw--color-background, #fff));border:var(--lottery-selection-border-width, 2px) var(--lottery-selection-border-style, solid) var(--lottery-selection-border-color, var(--emw--color-primary, #0d196e));border-radius:var(--lottery-selection-border-radius, var(--emw--border-radius-medium, 8px));color:var(--lottery-selection-color, var(--emw--color-typography, #000));font-weight:var(--lottery-selection-font-weight, bold);font-size:var(--lottery-selection-font-size, 1em);cursor:pointer;user-select:none;}.lottery-selection__button:hover{background:var(--lottery-selection-hover-background, var(--emw--color-background, #fff));border-color:var(--lottery-selection-hover-border-color, var(--emw--color-primary, #0d196e));color:var(--lottery-selection-hover-color, var(--emw--color-typography, #000))}.lottery-selection__button .lottery-selection__delete-icon{display:none}.lottery-selection__button.isDeleteByIcon:hover .lottery-selection__text{display:none}.lottery-selection__button.isDeleteByIcon:hover .lottery-selection__delete-icon{display:flex;align-items:center;justify-content:center;fill:var(--lottery-selection-delete-icon-color, var(--emw--color-typography, #000));vertical-align:middle}.lottery-selection__button.lottery-selection__button--selected{background-color:var(--lottery-selection-selected-background, var(--emw--color-primary, #0d196e));border-color:var(--lottery-selection-selected-border-color, var(--emw--color-primary, #0d196e));color:var(--lottery-selection-selected-color, var(--emw--color-typography-inverse, #fff))}.lottery-selection__button.lottery-selection__button--disabled{background-color:var(--lottery-selection-disabled-background, var(--emw--color-gray-50, #f5f5f5));border-color:var(--lottery-selection-disabled-border-color, var(--emw--color-gray-100, #e6e6e6));color:var(--lottery-selection-disabled-color, var(--emw--color-gray-150, #6f6f6f));cursor:not-allowed;pointer-events:none;}.lottery-selection__button.lottery-selection__button--no-border{border:none}.lottery-selection__button.lottery-selection__button--no-background{background:transparent}";
+const LotterySelectionStyle0 = lotterySelectionCss;
+
+const LotterySelection = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.lotteryBulletClickHandler = index.createEvent(this, "lotteryBulletClick", 7);
+        this.value = 0;
+        this.text = undefined;
+        this.idx = undefined;
+        this.type = 'toggle';
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.hasBorder = true;
+        this.hasBackground = true;
+        this.deleteIconSvg = '';
+        this.deleteIconWidth = '16px';
+        this.deleteIconHeight = '16px';
     }
-};
-const translate$3 = (key, customLang) => {
-    const lang = customLang;
-    return TRANSLATIONS$3[lang !== undefined && SUPPORTED_LANGUAGES$3.includes(lang) ? lang : DEFAULT_LANGUAGE$3][key];
-};
-const getTranslations$3 = (data) => {
-    Object.keys(data).forEach((item) => {
-        for (let key in data[item]) {
-            TRANSLATIONS$3[item][key] = data[item][key];
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            lotteryTippingPage.setClientStyling(this.stylingContainer, this.clientStyling);
         }
-    });
-};
-const resolveTranslationUrl$1 = async (translationUrl) => {
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            lotteryTippingPage.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            lotteryTippingPage.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryTippingPage.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                lotteryTippingPage.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryTippingPage.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    handleClick() {
+        if (this.type === 'disabled' || this.type === 'readonly') {
+            return;
+        }
+        console.log('bullet clicked', this.type, this.idx, this.text, this.value);
+        this.lotteryBulletClickHandler.emit({
+            type: this.type,
+            idx: this.idx,
+            text: this.text,
+            value: this.value
+        });
+    }
+    render() {
+        let iconToRender;
+        if (this.deleteIconSvg) {
+            iconToRender = sanitizeSvg(this.deleteIconSvg);
+        }
+        else {
+            iconToRender = renderIconDefinitionToSVGElement(DeleteFilled$1, {
+                extraSVGAttrs: {
+                    width: this.deleteIconWidth,
+                    height: this.deleteIconHeight,
+                    fill: 'currentColor'
+                }
+            });
+        }
+        return (index.h("div", { key: '0d1e8aaa80a907a7467410f6b27b4b6175e82299', class: "lottery-selection", ref: (el) => (this.stylingContainer = el) }, index.h("button", { key: '11a2402abbc290dc877ad95f3433092c3a0d8419', class: {
+                'lottery-selection__button': true,
+                'lottery-selection__button--selected': this.value == 1,
+                'lottery-selection__button--disabled': this.type === 'disabled',
+                'lottery-selection__button--no-border': !this.hasBorder,
+                'lottery-selection__button--no-background': !this.hasBackground,
+                isDeleteByIcon: this.type === 'delete',
+                isCallDialogBtn: this.type === 'input' || this.type === 'readonly'
+            }, onClick: this.handleClick.bind(this), disabled: this.type === 'disabled' }, this.type === 'delete' && index.h("span", { key: 'f99001d936a8f7bdf8adc5c46e82caf730a9442a', class: "lottery-selection__delete-icon", innerHTML: iconToRender }), index.h("span", { key: '55775e2492a1fe45cc8a457ac0a0d206744461ab', class: "lottery-selection__text" }, this.text))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotterySelection.style = LotterySelectionStyle0;
+
+const DEFAULT_LANGUAGE$5 = 'en';
+const SUPPORTED_LANGUAGES$5 = ['ro', 'en', 'fr', 'ar', 'hr', 'zh'];
+const TRANSLATIONS$5 = {
+    en: {
+        noTicketBoard: 'No ticket board available.',
+        selectionCleared: 'Your selection has been cleared.',
+        clearAll: 'Clear All',
+        stopAt: 'Stop at',
+        turnover: 'Turnover: ',
+        pleaseFillIn: 'Please fill in all the selection input!',
+        fillIn: 'Fill in',
+        noBets: 'Sorry. No bets have been placed so far. Check back later!',
+        search: 'Search',
+        clear: 'Clear',
+        oddsChart: 'Odds Chart',
+        ticketSuccess: 'Ticket purchased successfully.',
+        stakePerLine: 'Stake per Line:',
+        lowestOdds: 'Lowest Odds:',
+        highestOdds: 'Highest Odds:',
+        orderSummary: 'ORDER SUMMARY',
+        ticket: 'Ticket',
+        lines: 'Lines',
+        total: 'Total',
+        submit: 'Submit',
+        loading: 'Loading',
+        enterValidNumber: 'Please enter a valid number.',
+        enterNumberBetween: 'Please enter a number between {min} and {max}.',
+        numberAlreadySelected: 'This number has already been selected.',
+        enterScoreUpTo: 'Please enter the score (Up to {maxScore})',
+        enterValue: 'Please enter a value',
+        myChoices: 'My Choices',
+        teams: 'Teams',
+        scores: 'Scores',
+        euro: 'Euro',
+        cancel: 'Cancel',
+        confirm: 'Confirm'
+    },
+    ro: {},
+    fr: {},
+    ar: {},
+    hr: {}
+};
+const translate$5 = (key, customLang, replacements) => {
+    const lang = customLang;
+    let translation = TRANSLATIONS$5[lang !== undefined && SUPPORTED_LANGUAGES$5.includes(lang) ? lang : DEFAULT_LANGUAGE$5][key];
+    if (replacements) {
+        Object.keys(replacements).forEach((placeholder) => {
+            translation = translation.replace(`{${placeholder}}`, replacements[placeholder]);
+        });
+    }
+    return translation;
+};
+const getTranslations$5 = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS$5[item][key] = data[item][key];
+        }
+    });
+};
+
+function getBulletTextsSet(bulletTexts, splitToken) {
+    return new Set(bulletTexts ? bulletTexts.split(splitToken) : []);
+}
+function validateInput({ value, selectedSet, maxValue, minValue, language, type = 'integer' }) {
+    const trimmedValue = value.trim();
+    if (type === 'integer') {
+        // Strict integer check
+        if (!/^-?\d+$/.test(trimmedValue)) {
+            return {
+                valid: false,
+                errorMessage: translate$5('enterValidNumber', language),
+                value
+            };
+        }
+        const numValue = Number(trimmedValue);
+        if (isNaN(numValue)) {
+            return {
+                valid: false,
+                errorMessage: translate$5('enterValidNumber', language),
+                value
+            };
+        }
+        if ((minValue !== undefined && numValue < minValue) || (maxValue !== undefined && numValue > maxValue)) {
+            return {
+                valid: false,
+                errorMessage: translate$5('enterNumberBetween', language, {
+                    min: minValue,
+                    max: maxValue
+                }),
+                value
+            };
+        }
+        // Normalize value (e.g. "05" -> "5") for set check
+        const normalizedValue = String(numValue);
+        if (selectedSet.has(normalizedValue)) {
+            return {
+                valid: false,
+                errorMessage: translate$5('numberAlreadySelected', language),
+                value
+            };
+        }
+    }
+    else {
+        // Text mode validation
+        if (selectedSet.has(trimmedValue)) {
+            return {
+                valid: false,
+                errorMessage: translate$5('numberAlreadySelected', language), // Or generic 'alreadySelected' if available, but reusing key for now
+                value
+            };
+        }
+    }
+    return {
+        valid: true,
+        errorMessage: '',
+        value
+    };
+}
+function removeBulletTexts(text, selectedArr) {
+    return selectedArr.filter((s) => s !== text);
+}
+function addSelectedBulletTexts(text, selectedArr) {
+    return selectedArr.concat([text]);
+}
+function removeAndAddSelectedBulletTexts(text, selectedArr, maxSelectedCount) {
+    return selectedArr.slice(selectedArr.length - (maxSelectedCount - 1)).concat([text]);
+}
+function buildSelectedBulletTextsArr(item, selectedArr, maxSelectedCount) {
+    if (item.type === 'delete') {
+        return removeBulletTexts(item.text, selectedArr);
+    }
+    if (item.type === 'toggle') {
+        if (selectedArr.includes(item.text)) {
+            return removeBulletTexts(item.text, selectedArr);
+        }
+        if (selectedArr.length >= maxSelectedCount) {
+            return removeAndAddSelectedBulletTexts(item.text, selectedArr, maxSelectedCount);
+        }
+        return addSelectedBulletTexts(item.text, selectedArr);
+    }
+    return [];
+}
+
+const lotterySelectionGroupCss = ":host {\n  width: 100%;\n}\n\n.lottery-selection-group {\n  container-type: inline-size;\n  padding: var(--lottery-selection-group-padding, 0);\n  background: var(--lottery-selection-group-background, transparent);\n  border: var(--lottery-selection-group-border, none);\n  border-radius: var(--lottery-selection-group-border-radius, 0);\n}\n.lottery-selection-group__item {\n  display: flex;\n  flex-direction: var(--lottery-selection-group-flex-direction, row);\n  align-items: var(--lottery-selection-group-item-align, center);\n  justify-content: var(--lottery-selection-group-item-justify, flex-start);\n  gap: var(--lottery-selection-group-item-gap, 16px);\n  width: 100%;\n}\n.lottery-selection-group__item--left {\n  width: var(--lottery-selection-group-label-width, 130px);\n  min-width: var(--lottery-selection-group-label-min-width, auto);\n  max-width: var(--lottery-selection-group-label-max-width, none);\n  color: var(--lottery-selection-group-label-color, var(--emw--color-typography, #000));\n  font-size: var(--lottery-selection-group-label-font-size, 1em);\n  font-weight: var(--lottery-selection-group-label-font-weight, bold);\n  text-align: var(--lottery-selection-group-label-align, left);\n  white-space: var(--lottery-selection-group-label-white-space, normal);\n}\n.lottery-selection-group__item--right {\n  flex: 1;\n  display: flex;\n  flex-wrap: var(--lottery-selection-group-bullets-wrap, wrap); /* Allow items to wrap */\n  gap: var(--lottery-selection-group-bullets-gap, 8px); /* Gap between bullets */\n  align-items: var(--lottery-selection-group-bullets-align, center);\n  justify-content: var(--lottery-selection-group-bullets-justify, flex-start); /* Align bullets to start */\n}\n@container (max-width: 320px) {\n  .lottery-selection-group__item--left {\n    width: 100px;\n    max-width: 100px;\n  }\n}\n\n.dialog-input {\n  width: 100%;\n  padding: var(--lottery-selection-group-input-padding, 8px);\n  border: var(--lottery-selection-group-input-border-width, 1px) var(--lottery-selection-group-input-border-style, solid) var(--lottery-selection-group-input-border-color, var(--emw--color-gray-100, #e6e6e6));\n  border-radius: var(--lottery-selection-group-input-radius, 4px);\n  background-color: var(--lottery-selection-group-input-bg, #fff);\n  color: var(--lottery-selection-group-input-color, #000);\n  box-sizing: border-box;\n  margin-top: var(--lottery-selection-group-input-margin-top, 10px);\n  font-size: var(--lottery-selection-group-input-font-size, 1em);\n}\n.dialog-input::placeholder {\n  color: var(--lottery-selection-group-input-placeholder-color, #999);\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(--lottery-selection-group-error-color, var(--emw--color-error, #ff3d00));\n  font-size: var(--lottery-selection-group-error-font-size, 12px);\n  font-weight: var(--lottery-selection-group-error-font-weight, normal);\n  margin-top: 4px;\n}\n\n.addSelectionDialog-title {\n  color: var(--lottery-selection-group-dialog-title-color, var(--emw--color-typography, #000));\n  font-size: var(--lottery-selection-group-dialog-title-font-size, 1.2em);\n  font-weight: var(--lottery-selection-group-dialog-title-font-weight, bold);\n  margin-bottom: var(--lottery-selection-group-dialog-title-margin-bottom, 0);\n}\n.addSelectionDialog-footer {\n  display: flex;\n  justify-content: var(--lottery-selection-group-dialog-footer-justify, flex-end);\n  gap: var(--lottery-selection-group-dialog-footer-gap, 18px);\n  margin-top: var(--lottery-selection-group-dialog-footer-margin-top, 0);\n}";
+const LotterySelectionGroupStyle0 = lotterySelectionGroupCss;
+
+const LotterySelectionGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bulletGroupUpdateSelectedBulletTexts = index.createEvent(this, "bulletGroupUpdateSelection", 7);
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.language = 'en';
+        this.translationUrl = '';
+        this.splitToken = ',';
+        this.selectionGroupId = undefined;
+        this.selectionGroupLabel = undefined;
+        this.type = 'bet';
+        this.selectedBulletTexts = null;
+        this.maxSelectedCount = null;
+        this.maxDisplayBulletsCount = 11;
+        this.bulletTexts = null;
+        this.maxIntegerBulletText = null;
+        this.minIntegerBulletText = 0;
+        this.bulletTextType = 'integer';
+        this.hasBorder = true;
+        this.hasBackground = true;
+        this.dialogTitle = undefined;
+        this.dialogInputPlaceholder = undefined;
+        this.disabledBulletTexts = '';
+        this.dialogConfig = {
+            width: '400px',
+            visible: false,
+            onConfirm: () => this.handleFillInAddMore(),
+            onCancel: () => this.handleCloseAddMoreDialog()
+        };
+        this.inputInfo = { valid: true, errorMessage: '', value: '' };
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingPage.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingPage.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingPage.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            getTranslations$5(JSON.parse(this.translationUrl));
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryTippingPage.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                lotteryTippingPage.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryTippingPage.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    lotteryBulletClickHandler(event) {
+        event.stopPropagation();
+        // if it's input type, open the dialog
+        if (event.detail.type === 'input') {
+            this.dialogConfig = Object.assign(Object.assign({}, this.dialogConfig), { visible: true });
+            return;
+        }
+        if (['delete', 'toggle'].includes(event.detail.type)) {
+            this.bulletGroupUpdateSelectedBulletTexts.emit({
+                newSelectedBulletTexts: buildSelectedBulletTextsArr(event.detail, Array.from(this.selectedSet), this.maxSelectedCount).join(this.splitToken),
+                selectionGroupId: this.selectionGroupId
+            });
+            return;
+        }
+    }
+    get selectedSet() {
+        return getBulletTextsSet(this.selectedBulletTexts, this.splitToken);
+    }
+    get disabledSet() {
+        return getBulletTextsSet(this.disabledBulletTexts, this.splitToken);
+    }
+    get bulletTextsSet() {
+        if (this.bulletTexts)
+            return getBulletTextsSet(this.bulletTexts, this.splitToken);
+        if (this.bulletTextType === 'integer' &&
+            this.maxIntegerBulletText !== null &&
+            this.maxIntegerBulletText !== undefined) {
+            return getBulletTextsSet(Array.from({ length: Number(this.lastDisplayBulletText) - this.minIntegerBulletText + 1 }, (_, index) => this.minIntegerBulletText + index).join(this.splitToken), this.splitToken);
+        }
+        // If neither bulletTexts nor maxIntegerBulletText are provided,
+        return new Set();
+    }
+    // the last bullet text
+    get lastDisplayBulletText() {
+        if (this.bulletTextType === 'integer') {
+            if (this.maxIntegerBulletText !== null && this.maxIntegerBulletText !== undefined) {
+                return Math.min(this.maxIntegerBulletText, this.minIntegerBulletText + this.maxDisplayBulletsCount - 1);
+            }
+            return this.minIntegerBulletText + this.maxDisplayBulletsCount - 1;
+        }
+        // Text mode: return the text at the max display index if available
+        if (this.bulletTextsSet.size > 0) {
+            const texts = Array.from(this.bulletTextsSet);
+            if (texts.length >= this.maxDisplayBulletsCount) {
+                return texts[this.maxDisplayBulletsCount - 1];
+            }
+            return texts[texts.length - 1]; // If fewer than maxDisplayBulletsCount, return the last one
+        }
+        return null;
+    }
+    get isSingleSelectionMode() {
+        return this.maxSelectedCount === 1;
+    }
+    getBulletToRender() {
+        const allBulletTexts = Array.from(this.bulletTextsSet);
+        // Determine which bullets to display based on type and limit
+        let bulletsToRender = allBulletTexts;
+        let showInputButton = false;
+        if (this.bulletTextType === 'text') {
+            // For text, if we have more items than the limit, we need an input button.
+            // The input button takes one slot, so we show (limit - 1) items.
+            if (allBulletTexts.length > this.maxDisplayBulletsCount) {
+                showInputButton = true;
+                bulletsToRender = allBulletTexts.slice(0, this.maxDisplayBulletsCount - 1);
+            }
+            else {
+                bulletsToRender = allBulletTexts;
+            }
+        }
+        else {
+            // For integer, logic is based on maxIntegerBulletText vs displayed range
+            showInputButton =
+                this.maxIntegerBulletText !== null &&
+                    this.maxIntegerBulletText !== undefined &&
+                    this.maxIntegerBulletText > Number(this.lastDisplayBulletText);
+            // Integer bullets generation already respects the count, no slicing needed on the raw set
+            bulletsToRender = allBulletTexts;
+        }
+        return {
+            bulletsToRender,
+            showInputButton
+        };
+    }
+    renderBulletGroup() {
+        let items = [];
+        if (this.type === 'bet') {
+            const isMaxSelected = this.maxSelectedCount !== null && this.selectedSet.size >= this.maxSelectedCount;
+            const { bulletsToRender, showInputButton } = this.getBulletToRender();
+            bulletsToRender.forEach((text, idx) => {
+                let bulletType = 'toggle';
+                if (this.disabledSet.has(String(text))) {
+                    bulletType = 'disabled';
+                }
+                else if (!this.selectedSet.has(String(text)) && isMaxSelected && !this.isSingleSelectionMode) {
+                    bulletType = 'disabled';
+                }
+                items.push({
+                    value: this.selectedSet.has(String(text)) ? 1 : 0,
+                    text: String(text),
+                    idx,
+                    type: bulletType
+                });
+            });
+            if (showInputButton) {
+                let inputBulletType = 'input';
+                if (isMaxSelected && !this.isSingleSelectionMode) {
+                    inputBulletType = 'disabled';
+                }
+                const inputButtonText = this.bulletTextType === 'text' ? '...' : `${this.lastDisplayBulletText}+`;
+                const inputButtonIdx = this.bulletTextType === 'text' ? -1 : Number(this.lastDisplayBulletText) + 1;
+                // Special handling for integer mode:
+                // If the generated set is "full" (size == maxDisplayBulletsCount),
+                // we need to remove the last item to make room for the "N+" button
+                // so the total visual count remains consistent.
+                if (this.bulletTextType === 'integer' && items.length >= this.maxDisplayBulletsCount) {
+                    items.pop();
+                }
+                items.push({
+                    value: 0,
+                    text: inputButtonText,
+                    idx: inputButtonIdx,
+                    type: inputBulletType
+                });
+            }
+        }
+        else if (['choice', 'preview'].includes(this.type)) {
+            // For choice/preview, also respect the visual limit for text mode
+            const { bulletsToRender } = this.getBulletToRender();
+            bulletsToRender.forEach((text, idx) => {
+                let bulletType = 'toggle';
+                if (this.disabledSet.has(String(text))) {
+                    bulletType = 'disabled';
+                }
+                else if (this.type === 'preview') {
+                    bulletType = 'readonly';
+                }
+                else if (this.selectedSet.has(String(text))) {
+                    bulletType = 'delete';
+                }
+                items.push({
+                    value: this.selectedSet.has(String(text)) ? 1 : 0,
+                    text,
+                    idx,
+                    type: bulletType
+                });
+            });
+        }
+        return (index.h("div", { class: "lottery-selection-group__item--right" }, items.map((item) => {
+            return (index.h("lottery-selection", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, mbSource: this.mbSource, text: item.text, idx: item.idx, value: item.value, type: item.type, hasBorder: this.hasBorder, hasBackground: this.hasBackground }));
+        })));
+    }
+    handleCloseAddMoreDialog() {
+        this.dialogConfig = Object.assign(Object.assign({}, this.dialogConfig), { visible: false });
+        this.inputInfo = { value: '', errorMessage: '', valid: true };
+    }
+    handleInputChange(e) {
+        const inputElement = e.target;
+        const value = inputElement.value;
+        this.inputInfo = Object.assign(Object.assign({}, this.inputInfo), { value: value });
+        this.inputInfo = validateInput({
+            value,
+            selectedSet: this.selectedSet,
+            maxValue: this.maxIntegerBulletText,
+            minValue: this.bulletTextType === 'integer' ? Number(this.lastDisplayBulletText) + 1 : undefined,
+            language: this.language,
+            type: this.bulletTextType
+        });
+    }
+    handleFillInAddMore() {
+        if (this.inputInfo.valid) {
+            const { value } = this.inputInfo;
+            // Normalize the value (e.g., "05" -> "5") to match validation logic
+            let normalizedValue = value;
+            if (this.bulletTextType === 'integer') {
+                normalizedValue = String(Number(value));
+            }
+            else {
+                normalizedValue = value.trim();
+            }
+            let newSelectedBulletTexts;
+            if (this.isSingleSelectionMode) {
+                newSelectedBulletTexts = normalizedValue;
+            }
+            else {
+                newSelectedBulletTexts = addSelectedBulletTexts(normalizedValue, Array.from(this.selectedSet)).join(this.splitToken);
+            }
+            this.bulletGroupUpdateSelectedBulletTexts.emit({
+                newSelectedBulletTexts,
+                selectionGroupId: this.selectionGroupId
+            });
+            this.handleCloseAddMoreDialog();
+        }
+    }
+    render() {
+        return (index.h("div", { key: '39225bad75cf435b166269367df570732eff7ef4', class: "lottery-selection-group", ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: '2bb2bc539c9fc05aeece7145b13f722756bc054e', class: "lottery-selection-group__item" }, this.selectionGroupLabel && (index.h("div", { key: 'dc15197dca90375bd4eb50e87d96402d1ef694d2', class: "lottery-selection-group__item--left" }, this.selectionGroupLabel)), this.renderBulletGroup()), index.h("lottery-tipping-dialog", { key: '9526dbb5d1656d6724e6566465febde778437c64', visible: this.dialogConfig.visible, width: this.dialogConfig.width, onCancel: this.dialogConfig.onCancel }, index.h("div", { key: 'ecf5800430e92be4a2af279f1d8c5075d5965b7e', class: "addSelectionDialog" }, index.h("div", { key: '3e8a2f445679ef5fe2ada60d4a6832f472f27dfa', class: "addSelectionDialog-title" }, this.dialogTitle ||
+            (this.bulletTextType === 'text'
+                ? translate$5('enterValue', this.language)
+                : translate$5('enterScoreUpTo', this.language, {
+                    maxScore: this.maxIntegerBulletText
+                }))), index.h("input", { key: '46462ee8f27410639d45970a76fc3d90a03f3a10', type: "text", class: {
+                'dialog-input': true,
+                invalid: !this.inputInfo.valid
+            }, value: this.inputInfo.value, onInput: this.handleInputChange.bind(this), placeholder: this.dialogInputPlaceholder }), index.h("div", { key: '2e66988e4186f8f4f773ed548fc76e53085be946', class: "error-message" }, this.inputInfo.errorMessage)), index.h("div", { key: '81dc64f0b7cba422a54af8ecff4734aa19832583', slot: "footer", class: "addSelectionDialog-footer" }, index.h("lottery-button", { key: '3027240894aef525dc9fc50db79597cf29f9cb99', onClick: this.dialogConfig.onCancel, text: translate$5('cancel', this.language), variant: "outline" }), index.h("lottery-button", { key: 'ab8c6deed9ab4a7d79d71ed6fe8122b23af5741b', onClick: this.dialogConfig.onConfirm, text: translate$5('confirm', this.language), variant: "primary", disabled: !this.inputInfo.valid || !this.inputInfo.value })))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotterySelectionGroup.style = LotterySelectionGroupStyle0;
+
+const DEFAULT_LANGUAGE$4 = 'en';
+const SUPPORTED_LANGUAGES$4 = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS$4 = {
+    en: {
+        homeTeam: 'Home team:',
+        awayTeam: 'Away team:',
+        loading: 'Loading...',
+        error: 'Error!',
+        noData: 'No data available.',
+        lineInfo: 'Line {currentPage} of {totalPages}',
+        clearAll: 'Clear All'
+    },
+    ro: {
+        homeTeam: 'Echipa gazdă:',
+        awayTeam: 'Echipa oaspete:',
+        selectionCleared: 'Selecția dvs. a fost ștearsă.',
+        selectionOnLineCleared: 'Selecția dvs. de pe această linie va fi ștearsă.',
+        loading: `Se încarcă...',n    error: 'Eroare!`,
+        noData: 'Nu sunt date disponibile.',
+        lineInfo: 'Linia {currentPage} din {totalPages}',
+        clearAll: 'Șterge tot',
+        cancel: 'Anulează',
+        confirm: 'Confirmă'
+    },
+    fr: {
+        homeTeam: 'Équipe à domicile:',
+        awayTeam: `Équipe à l'extérieur:`,
+        selectionCleared: 'Votre sélection a été effacée.',
+        selectionOnLineCleared: 'Votre sélection sur cette ligne sera effacée.',
+        loading: `Chargement...',n    error: 'Erreur!`,
+        noData: 'Aucune donnée disponible.',
+        lineInfo: 'Ligne {currentPage} sur {totalPages}',
+        clearAll: 'Tout effacer',
+        cancel: 'Annuler',
+        confirm: 'Confirmer'
+    },
+    ar: {
+        homeTeam: 'الفريق المضيف:',
+        awayTeam: 'الفريق الضيف:',
+        selectionCleared: 'تم مسح اختيارك.',
+        selectionOnLineCleared: 'سيتم مسح اختيارك في هذا السطر.',
+        loading: `جار التحميل...',n    error: 'خطأ!`,
+        noData: 'لا توجد بيانات متاحة.',
+        lineInfo: 'السطر {currentPage} من {totalPages}',
+        clearAll: 'مسح الكل',
+        cancel: 'إلغاء',
+        confirm: 'تأكيد'
+    },
+    hr: {
+        homeTeam: 'Domaći tim:',
+        awayTeam: 'Gostujući tim:',
+        selectionCleared: 'Vaš odabir je obrisan.',
+        selectionOnLineCleared: 'Vaš odabir na ovoj liniji bit će obrisan.',
+        loading: `Učitavanje...',n    error: 'Greška!`,
+        noData: 'Nema dostupnih podataka.',
+        lineInfo: 'Linija {currentPage} od {totalPages}',
+        clearAll: 'Očisti sve',
+        cancel: 'Odustani',
+        confirm: 'Potvrdi'
+    }
+};
+const translate$4 = (key, customLang, replacements) => {
+    const lang = customLang;
+    let translation = TRANSLATIONS$4[lang !== undefined && SUPPORTED_LANGUAGES$4.includes(lang) ? lang : DEFAULT_LANGUAGE$4][key];
+    if (replacements) {
+        Object.keys(replacements).forEach((placeholder) => {
+            translation = translation.replace(`{${placeholder}}`, replacements[placeholder]);
+        });
+    }
+    return translation;
+};
+const getTranslations$4 = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS$4[item][key] = data[item][key];
+        }
+    });
+};
+const resolveTranslationUrl$2 = 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$4(translations);
+        }
+        catch (error) {
+            console.error('Failed to fetch or parse translations from URL:', error);
+        }
+    }
+};
+
+const formatDate$1 = ({ date, type = 'date', format: format$1 }) => {
+    try {
+        const parsedDate = parseISO(date);
+        if (isNaN(parsedDate.getTime())) {
+            throw new Error(`Invalid date: ${date}`);
+        }
+        if (format$1)
+            return format(parsedDate, format$1);
+        let formatStr = 'dd/MM/yyyy';
+        if (type === 'time') {
+            formatStr = 'dd/MM/yyyy HH:mm:ss';
+        }
+        else if (type === 'week') {
+            formatStr = 'ccc dd/MM/yyyy HH:mm:ss';
+        }
+        return format(parsedDate, formatStr);
+    }
+    catch (error) {
+        console.error('Error formatting date:', error.message);
+        return '';
+    }
+};
+
+const lotteryTippingBetSlipCss = ":host {\n  --lottery-button-border-radius: 16px;\n}\n\n.LotteryTippingTicketBet__container {\n  display: block; /* Or inline-block, depending on desired layout flow */\n  font-size: 14px;\n  padding: 12px;\n  border: 1px solid var(--emw--color-gray-100, #e6e6e6);\n  border-radius: var(--emw--button-border-radius, 4px);\n  line-height: 1.5715;\n  color: var(--emw--color-typography, #000);\n  background: var(--emw--color-background, #fff);\n  overflow: hidden;\n  min-width: 300px;\n  container-type: inline-size;\n}\n@container (max-width: 375px) {\n  .LotteryTippingTicketBet__container {\n    font-size: 12px;\n  }\n}\n\n.table-wrapper {\n  overflow-x: auto; /* Handle horizontal scroll if content overflows */\n}\n\n.LotteryTippingTicketBet__main {\n  overflow: hidden;\n}\n\n.table-scroll-wrapper {\n  overflow-x: auto;\n  flex-grow: 1;\n  min-width: 0;\n}\n\n.my-table-component {\n  width: 100%;\n  border-collapse: collapse; /* Important for borders */\n  text-align: left;\n  border-radius: 0.1rem; /* Ant Design like subtle rounding */\n  border-spacing: 0;\n}\n\n/* Header */\n.my-table-component th {\n  background: var(--emw--color-background-secondary, #f5f5f5);\n  color: var(--emw--color-typography, #000);\n  font-weight: 500;\n  padding: 0.4rem 0.5rem;\n  transition: background 0.3s ease;\n}\n@container (max-width: 400px) {\n  .my-table-component th {\n    padding: 0.3rem 0.3rem;\n  }\n}\n\n/* Cells */\n.my-table-component td {\n  padding: 0.4rem 0.5rem;\n  color: var(--emw--color-typography, #000);\n  background: var(--emw--color-background, #fff);\n  transition: background 0.3s;\n}\n@container (max-width: 400px) {\n  .my-table-component td {\n    padding: 0.3rem 0.3rem;\n  }\n}\n\n.my-table-component th:nth-child(1),\n.my-table-component td:nth-child(1) {\n  /* index */\n  min-width: 10px;\n}\n.my-table-component th:nth-child(3),\n.my-table-component td:nth-child(3) {\n  /* startTime */\n  min-width: 60px;\n}\n.my-table-component th:nth-child(4),\n.my-table-component td:nth-child(4) {\n  /* results */\n  min-width: 120px;\n}\n\n.my-table-component.bordered th,\n.my-table-component.bordered td {\n  border-bottom: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n/* Bordered style */\n.my-table-component.grid th,\n.my-table-component.grid td {\n  border: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n.my-table-component.grid th {\n  border-bottom-width: 1px; /* Ensure bottom border is consistent */\n}\n\n.my-table-component.grid {\n  border: 1px solid var(--emw--color-gray-100, #e6e6e6); /* Outer border */\n  border-right-width: 0;\n  border-bottom-width: 0;\n}\n\n.my-table-component.grid th:last-child,\n.my-table-component.grid td:last-child {\n  border-right: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n.my-table-component.grid tr:last-child td {\n  border-bottom: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n/* Striped style */\n.my-table-component.striped tbody tr:nth-child(even) td {\n  background-color: var(--emw--color-background-secondary, #f5f5f5);\n}\n\n/* Hover (optional, but nice) */\n.my-table-component tbody tr:hover td {\n  background-color: var(--emw--color-background-secondary, #f5f5f5);\n}\n\n.flex {\n  display: flex;\n}\n\n.justify-end {\n  justify-content: flex-end;\n}\n\n.gap-1 {\n  gap: 4px;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.align-center {\n  align-items: center;\n}\n\n.gap-1 {\n  gap: 0.5rem;\n}\n\n.btn {\n  color: var(--emw--color-typography, #000);\n  background: var(--emw--color-background, #fff);\n  font-size: 14px;\n  transition: all 0.2s ease;\n}\n.btn:hover {\n  cursor: pointer;\n}\n\n.btn:hover {\n  background-color: var(--emw--color-gray-100, #e6e6e6);\n}\n\n.btn.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n.btn.disabled:hover {\n  cursor: not-allowed !important;\n}\n\n.LotteryTippingTicketBet__tableToolbar {\n  width: 100%;\n  margin-bottom: 1rem;\n}\n\n.LotteryTippingTicketBet__tableToolbar--item {\n  margin-right: 2rem;\n}\n.LotteryTippingTicketBet__tableToolbar--item.mr-0 {\n  margin-right: 0rem !important;\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup {\n  flex-basis: 2rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  border-radius: 8px;\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 2rem;\n  height: 2rem;\n  background-color: var(--emw--color-background-secondary, #f5f5f5);\n  color: var(--emw--color-typography, #000);\n  border-radius: 8px;\n  border: none;\n  transition: all 0.2s ease-in-out;\n  cursor: pointer;\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item:hover {\n  transform: scale(1.1);\n  box-shadow: 0 6px 14px var(--emw-calender-curday-box-shadow, rgba(0, 0, 0, 0.09));\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item .icon {\n  width: 20px;\n  height: 20px;\n  transition: filter 0.2s ease-in-out;\n  filter: grayscale(0.3);\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item:hover .icon {\n  filter: grayscale(0);\n  transform: rotate(3deg);\n}\n\ndiv.border-line {\n  margin-top: 1rem;\n  height: 1px;\n  width: 100%;\n  box-sizing: border-box;\n  background-color: var(--emw--color-background-secondary, #f5f5f5);\n  transition: all 0.3s ease;\n}\n\n.LotteryTippingTicketBet__footer {\n  padding: 0.5rem;\n}\n\n.my-pagination {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 1rem;\n  font-size: 0.8rem;\n  color: var(--emw--color-typography-secondary, #333);\n}\n\n.my-pagination span {\n  font-weight: 500;\n  user-select: none;\n}\n\n.my-pagination .btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: none;\n  transition: all 0.3s ease;\n  cursor: pointer;\n  opacity: 0.9;\n  color: var(--emw--color-typography, #000);\n  background-color: var(--emw--color-background-secondary, #f5f5f5);\n}\n\n.my-pagination .btn .icon {\n  width: 20px;\n  height: 20px;\n  transition: transform 0.2s ease;\n}\n\n.my-pagination .btn:hover {\n  transform: scale(1.1);\n  box-shadow: 0 6px 14px var(--emw-calender-curday-box-shadow, rgba(0, 0, 0, 0.09));\n}\n\n.my-pagination .btn.disabled {\n  background-color: var(--emw--color-background-tertiary, #ccc);\n  cursor: not-allowed;\n  opacity: 0.5;\n  transform: scale(1);\n}\n\n.match-info-item {\n  display: flex;\n}\n\n.match-info-item-label {\n  margin-right: 6px;\n}\n\n.info-icon:hover {\n  cursor: pointer;\n}\n\n.LotteryTippingTicketBet__empty p {\n  text-align: center;\n}\n\n.no-wrap {\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.eventNameContainer__item--title {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 300px;\n}\n@container (max-width: 600px) {\n  .eventNameContainer__item--title {\n    max-width: 180px;\n  }\n}\n@container (max-width: 500px) {\n  .eventNameContainer__item--title {\n    max-width: 150px;\n  }\n}\n@container (max-width: 400px) {\n  .eventNameContainer__item--title {\n    max-width: 100px;\n  }\n}\n@container (max-width: 330px) {\n  .eventNameContainer__item--title {\n    max-width: 70px;\n  }\n}\n\n.LotteryTippingTicketBet__main {\n  perspective: 800px;\n  will-change: transform, opacity;\n}\n\n@container (max-width: 520px) {\n  .LotteryTippingTicketBet__main {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n  .LotteryTippingTicketBet__tableToolbar--item {\n    margin-right: 0 !important;\n  }\n}\n/* Fade-In Keyframes */\n@keyframes fadeInLeft {\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n/* Fade-Out Keyframes */\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n@keyframes fadeInRight {\n  from {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n@keyframes fadeInUp {\n  from {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@-webkit-keyframes slide-left {\n  0% {\n    -webkit-transform: translateX(0);\n    transform: translateX(0);\n  }\n  100% {\n    -webkit-transform: translateX(-100px);\n    transform: translateX(-100px);\n  }\n}\n@keyframes slide-left {\n  0% {\n    -webkit-transform: translateX(100%);\n    transform: translateX(100%);\n  }\n  100% {\n    -webkit-transform: translateX(0px);\n    transform: translateX(0px);\n  }\n}\n@-webkit-keyframes slide-right {\n  0% {\n    -webkit-transform: translateX(-100%);\n    transform: translateX(-100%);\n  }\n  100% {\n    -webkit-transform: translateX(0px);\n    transform: translateX(0px);\n  }\n}\n@keyframes slide-right {\n  0% {\n    -webkit-transform: translateX(-100px);\n    transform: translateX(-100px);\n  }\n  100% {\n    -webkit-transform: translateX(0);\n    transform: translateX(0);\n  }\n}\n@-webkit-keyframes slide-top {\n  0% {\n    -webkit-transform: translateY(-100px);\n    transform: translateY(-100px);\n  }\n  100% {\n    -webkit-transform: translateY(0px);\n    transform: translateY(0px);\n  }\n}\n@keyframes slide-top {\n  0% {\n    -webkit-transform: translateY(-100px);\n    transform: translateY(-100px);\n  }\n  100% {\n    -webkit-transform: translateY(0px);\n    transform: translateY(0px);\n  }\n}\n/* Apply to your card classes */\n.card-in-left {\n  -webkit-animation: slide-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n  animation: slide-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.card-out-left {\n  animation: fadeOut 0.2s ease-out both;\n}\n\n.card-in-right {\n  -webkit-animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n  animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.card-out-right {\n  animation: fadeOut 0.2s ease-out both;\n}\n\n.card-in-up {\n  -webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n  animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.card-out-down {\n  animation: fadeOut 0.2s ease-out both;\n}\n\n.loading-wrap {\n  margin: 20px 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 40vh;\n}\n.loading-wrap .dots-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n.loading-wrap .dot {\n  height: 14px;\n  width: 14px;\n  margin-right: 14px;\n  border-radius: 14px;\n  background-color: var(--emw--color-gray-300, #333);\n  animation: pulse 1.5s infinite ease-in-out;\n}\n.loading-wrap .dot:last-child {\n  margin-right: 0;\n}\n.loading-wrap .dot:nth-child(1) {\n  animation-delay: -0.3s;\n}\n.loading-wrap .dot:nth-child(2) {\n  animation-delay: -0.1s;\n}\n.loading-wrap .dot:nth-child(3) {\n  animation-delay: 0.1s;\n}\n@keyframes pulse {\n  0% {\n    transform: scale(0.8);\n    background-color: var(--emw--color-gray-300, #333);\n  }\n  50% {\n    transform: scale(1.2);\n    background-color: var(--emw--color-gray-100, #e6e6e6);\n  }\n  100% {\n    transform: scale(0.8);\n    background-color: var(--emw--color-gray-150, #6f6f6f);\n  }\n}\n\n.lottery-selection-group-table-header .lottery-selection__button {\n  border: none;\n  background: none;\n}";
+const LotteryTippingBetSlipStyle0 = lotteryTippingBetSlipCss;
+
+const MyTable = ({ columns, dataSource, hideHead = false, grid = true, bordered = true }) => (index.h("table", { class: { bordered: bordered, grid: grid, 'my-table-component': true } }, !hideHead && (index.h("thead", null, index.h("tr", null, columns.map((column) => {
+    var _a;
+    return (index.h("th", { key: column.value, style: { width: column.width + '%', textAlign: column.align } }, typeof column.title === 'string' ? column.title : (_a = column.title) === null || _a === void 0 ? void 0 : _a.call(column)));
+})))), index.h("tbody", null, dataSource.map((row, index$1) => (index.h("tr", { key: index$1 }, columns.map((column) => (index.h("td", { key: column.value, style: { width: column.width + '%', textAlign: column.align }, class: { 'no-wrap': column.nowrap } }, column.render ? column.render(row, row[column.value], index$1) : row[column.value])))))))));
+const LotteryTippingBetSlip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.selectionChangeHandler = index.createEvent(this, "lotteryTippingBetSelectionChange", 7);
+        this.clearAll = index.createEvent(this, "lotteryTippingBetClearAll", 7);
+        this.addLine = index.createEvent(this, "lotteryTippingBetAddLine", 7);
+        this.removeLine = index.createEvent(this, "lotteryTippingBetRemoveLine", 7);
+        this.pageChange = index.createEvent(this, "lotteryTippingBetPageChange", 7);
+        this.columns = [
+            { title: '', value: 'index', width: 3 },
+            {
+                title: '',
+                value: 'eventName',
+                width: 65,
+                render: (item, value) => this.renderEventName(item, value)
+            },
+            {
+                title: '',
+                value: 'startTime',
+                width: 22,
+                align: 'right',
+                nowrap: true,
+                render: (_, value) => formatDate$1({ date: value, format: 'ccc HH:mm' })
+            },
+            {
+                title: () => (index.h("lottery-selection-group", { language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, clientStylingUrl: this.clientStylingUrl, type: "preview", splitToken: this.bulletTextsSplitToken, "bullet-texts": this.bulletNames, bulletTextType: "text", hasBackground: false, hasBorder: false })),
+                value: 'results',
+                width: 10,
+                render: (_, __, curRow) => (index.h("lottery-selection-group", { language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, clientStylingUrl: this.clientStylingUrl, "mb-source": this.mbSource, selectionGroupId: `${this.currentPage - 1}${this.bulletTextsSplitToken}${curRow}`, type: this.readPretty ? 'preview' : 'bet', "selected-bullet-texts": this.selectedBulletTexts(curRow), "disabled-bullet-texts": this.getBulletDisabledOptions(curRow), "max-selected-count": this.mode === 'single' ? 1 : this.bulletTexts.split(this.bulletTextsSplitToken).length, "bullet-texts": this.bulletTexts, splitToken: this.bulletTextsSplitToken, bulletTextType: "text" }))
+            }
+        ];
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.language = 'en';
+        this.totalPages = 1;
+        this.minTotalPages = 1;
+        this.maxTotalPages = 3;
+        this.bulletTexts = '1,X,2';
+        this.bulletNames = 'Home,Draw,Away';
+        this.bulletTextsSplitToken = ',';
+        this.showClearButton = true;
+        this.addImage = renderIconDefinitionToSVGElement(PlusSquareOutlined$1, {
+            extraSVGAttrs: { width: '20px', height: '20px', fill: 'currentColor' }
+        });
+        this.deleteImage = renderIconDefinitionToSVGElement(DeleteOutlined$1, {
+            extraSVGAttrs: { width: '20px', height: '20px', fill: 'currentColor' }
+        });
+        this.infoImage = renderIconDefinitionToSVGElement(InfoCircleOutlined$1, {
+            extraSVGAttrs: { width: '16px', height: '16px', fill: 'currentColor' }
+        });
+        this.leftImage = renderIconDefinitionToSVGElement(LeftOutlined$1, {
+            extraSVGAttrs: { width: '20px', height: '20px', fill: 'currentColor' }
+        });
+        this.rightImage = renderIconDefinitionToSVGElement(RightOutlined$1, {
+            extraSVGAttrs: { width: '20px', height: '20px', fill: 'currentColor' }
+        });
+        this.mode = 'multi';
+        this.readPretty = false;
+        this.ticketDataSourceStr = '[]';
+        this.bulletSelectionsLineGroupStr = '[]';
+        this.currentPage = 1;
+        this.bulletSelectionsLineGroup = [];
+        this.ticketDataSource = [];
+        this.betIsLoading = false;
+        this.betHasErrors = false;
+    }
+    renderEventName(_, value) {
+        const [homeName, awayName] = value.split(' vs ');
+        return (index.h("div", { class: "flex gap-1 eventNameContainer__item" }, index.h("span", { class: "eventNameContainer__item--title" }, value), index.h("app-tooltip", null, index.h("span", { slot: "trigger", class: "icon info-icon", innerHTML: this.infoImage, style: { width: '18px' } }), index.h("div", { slot: "content" }, index.h("div", { class: "match-info" }, index.h("div", { class: "match-info-item" }, index.h("div", { class: "match-info-item-label" }, translate$4('homeTeam', this.language)), index.h("div", { class: "match-info-item-value" }, homeName)), index.h("div", { class: "match-info-item" }, index.h("div", { class: "match-info-item-label" }, translate$4('awayTeam', this.language)), index.h("div", { class: "match-info-item-value" }, awayName)))))));
+    }
+    selectedBulletTexts(curRow) {
+        var _a, _b, _c;
+        return ((_c = (_b = (_a = this.bulletSelectionsLineGroup) === null || _a === void 0 ? void 0 : _a[this.currentPage - 1]) === null || _b === void 0 ? void 0 : _b[curRow]) === null || _c === void 0 ? void 0 : _c.join(this.bulletTextsSplitToken)) || '';
+    }
+    getBulletDisabledOptions(curRow) {
+        const { outcomes } = this.ticketDataSource[curRow];
+        const curActiveOptions = outcomes.map((ev) => ev.betOn);
+        const bulletText = this.bulletTexts.split(this.bulletTextsSplitToken);
+        const disabledOptions = bulletText.filter((bullet) => !curActiveOptions.includes(bullet));
+        return disabledOptions.join(this.bulletTextsSplitToken);
+    }
+    handleNewTranslations() {
+        resolveTranslationUrl$2(this.translationUrl);
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingPage.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingPage.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingPage.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    parseTicketDataSource(newValue) {
+        try {
+            this.ticketDataSource = JSON.parse(newValue || '[]');
+        }
+        catch (e) {
+            console.error('Failed to parse ticketDataSourceStr:', e);
+        }
+    }
+    parseBulletSelectionsLineGroup(newValue) {
+        try {
+            this.bulletSelectionsLineGroup = JSON.parse(newValue || '[]');
+        }
+        catch (e) {
+            console.error('Failed to parse bulletSelectionsLineGroupStr:', e);
+        }
+    }
+    connectedCallback() {
+        this.boundMessageHandler = this.messageHandler.bind(this);
+        window.addEventListener('message', this.boundMessageHandler);
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+        if (this.boundMessageHandler) {
+            window.removeEventListener('message', this.boundMessageHandler);
+        }
+    }
+    messageHandler() {
+        // This handler can be kept for other potential messages, or removed if no longer needed.
+    }
+    componentWillLoad() {
+        resolveTranslationUrl$2(this.translationUrl);
+        this.parseTicketDataSource(this.ticketDataSourceStr);
+        this.parseBulletSelectionsLineGroup(this.bulletSelectionsLineGroupStr);
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryTippingPage.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                lotteryTippingPage.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryTippingPage.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleClearAll() {
+        this.clearAll.emit();
+    }
+    bulletGroupUpdateSelectionHandler(event) {
+        event.stopPropagation();
+        const { newSelectedBulletTexts, selectionGroupId } = event.detail;
+        if (!selectionGroupId) {
+            console.error('Miss selectionGroupId');
+            return;
+        }
+        const idParts = selectionGroupId.split(this.bulletTextsSplitToken);
+        if (idParts.length !== 2) {
+            console.error('Invalid selectionGroupId format:', selectionGroupId);
+            return;
+        }
+        const [boardId, matchId] = idParts;
+        this.selectionChangeHandler.emit({
+            newSelections: newSelectedBulletTexts.split(this.bulletTextsSplitToken),
+            matchId,
+            boardId
+        });
+    }
+    prevPage() {
+        const doPrev = () => {
+            this.pageChange.emit({ newPage: this.currentPage - 1 });
+        };
+        this.swapCard('prev', doPrev);
+    }
+    nextPage() {
+        const doNext = () => {
+            this.pageChange.emit({ newPage: this.currentPage + 1 });
+        };
+        this.swapCard('next', doNext);
+    }
+    handleAddLine() {
+        const doAdd = () => {
+            this.addLine.emit();
+        };
+        this.swapCard('add', doAdd);
+    }
+    handleRemoveLine() {
+        this.removeLine.emit({
+            boardId: this.currentPage - 1,
+            close: (onClose) => {
+                onClose && this.swapCard('remove', onClose);
+            }
+        });
+    }
+    swapCard(action, cb) {
+        const wrapper = this.mainContainer;
+        if (!wrapper)
+            return;
+        // Prevent new animations if one is already in progress
+        const isAnimating = Array.from(wrapper.classList).some((cls) => cls.startsWith('card-out-') || cls.startsWith('card-in-'));
+        if (isAnimating) {
+            return;
+        }
+        const map = {
+            next: { out: 'card-out-left', in: 'card-in-left' },
+            prev: { out: 'card-out-right', in: 'card-in-right' },
+            remove: { out: 'card-out-down', in: 'card-in-right' },
+            add: { out: 'card-out-left', in: 'card-in-up' }
+        };
+        const { out: outCls, in: inCls } = map[action];
+        wrapper.classList.add(outCls);
+        wrapper.addEventListener('animationend', () => {
+            wrapper.classList.remove(outCls);
+            cb();
+            const newWrapper = this.mainContainer;
+            if (!newWrapper)
+                return;
+            newWrapper.classList.add(inCls);
+            newWrapper.addEventListener('animationend', () => newWrapper.classList.remove(inCls), { once: true });
+        }, { once: true });
+    }
+    renderLoading() {
+        return (index.h("div", { class: "loading-wrap" }, index.h("section", { class: "dots-container" }, index.h("div", { class: "dot" }), index.h("div", { class: "dot" }), index.h("div", { class: "dot" }), index.h("div", { class: "dot" }), index.h("div", { class: "dot" }))));
+    }
+    renderErrorContent() {
+        return index.h("p", null, translate$4('error', this.language));
+    }
+    renderEmptyContent() {
+        return (index.h("div", { class: "LotteryTippingTicketBet__empty" }, index.h("p", null, translate$4('noData', this.language))));
+    }
+    renderPageFooter() {
+        if (this.totalPages <= 1)
+            return null;
+        return (index.h("div", null, index.h("div", { class: 'border-line' }), index.h("div", { class: "LotteryTippingTicketBet__footer" }, index.h("div", { class: "my-pagination flex justify-between" }, index.h("span", null, translate$4('lineInfo', this.language, { currentPage: this.currentPage, totalPages: this.totalPages })), index.h("div", { class: 'flex gap-1' }, index.h("button", { type: "button", class: `btn ${this.currentPage === 1 ? 'disabled' : ''}`, onClick: () => this.prevPage(), disabled: this.currentPage === 1 }, index.h("span", { class: "icon", innerHTML: this.leftImage })), index.h("button", { type: "button", class: `btn ${this.currentPage === this.totalPages ? 'disabled' : ''}`, onClick: () => this.nextPage(), disabled: this.currentPage === this.totalPages }, index.h("span", { class: "icon", innerHTML: this.rightImage })))))));
+    }
+    renderReadPrettyContent() {
+        var _a;
+        return (index.h("div", { class: "LotteryTippingTicketBet__main", ref: (el) => (this.mainContainer = el) }, index.h("div", { class: "table-scroll-wrapper" }, index.h(MyTable, { columns: this.columns, dataSource: ((_a = this.ticketDataSource) === null || _a === void 0 ? void 0 : _a.map((item, index) => (Object.assign(Object.assign({}, item), { index: index + 1 })))) || [], hideHead: false, grid: false, bordered: false })), this.renderPageFooter()));
+    }
+    renderDefaultContent() {
+        var _a;
+        const lineOperatorAddShow = this.totalPages < this.maxTotalPages && this.currentPage === this.totalPages ? true : false;
+        const lineOperatorRemoveShow = this.totalPages > this.minTotalPages ? true : false;
+        return (index.h("div", null, index.h("div", { class: "LotteryTippingTicketBet__tableToolbar flex justify-end gap-1" }, this.showClearButton && (index.h("lottery-button", { class: {
+                'LotteryTippingTicketBet__tableToolbar--item': true,
+                'mr-0': !(lineOperatorAddShow || lineOperatorRemoveShow)
+            }, text: translate$4('clearAll', this.language), onClick: () => this.handleClearAll(), variant: "text", clientStyling: this.clientStyling || '' }))), index.h("div", { class: "flex align-center LotteryTippingTicketBet__main", ref: (el) => (this.mainContainer = el) }, index.h("div", { class: "table-scroll-wrapper" }, index.h(MyTable, { columns: this.columns, dataSource: ((_a = this.ticketDataSource) === null || _a === void 0 ? void 0 : _a.map((item, index) => (Object.assign(Object.assign({}, item), { index: index + 1 })))) || [], hideHead: false, grid: false, bordered: false })), (lineOperatorAddShow || lineOperatorRemoveShow) && (index.h("div", { class: "LotteryTippingTicketBet__lineOperatorGroup" }, lineOperatorAddShow && (index.h("button", { type: "button", class: {
+                'LotteryTippingTicketBet__lineOperatorGroup--item': true
+            }, onClick: () => this.handleAddLine() }, index.h("span", { class: "icon", innerHTML: this.addImage }))), lineOperatorRemoveShow && (index.h("button", { type: "button", class: {
+                'LotteryTippingTicketBet__lineOperatorGroup--item': true
+            }, onClick: () => this.handleRemoveLine() }, index.h("span", { class: "icon", innerHTML: this.deleteImage })))))), this.renderPageFooter()));
+    }
+    render() {
+        let content;
+        if (this.betIsLoading) {
+            content = this.renderLoading();
+        }
+        else if (this.betHasErrors) {
+            content = this.renderErrorContent();
+        }
+        else if (this.ticketDataSource.length === 0) {
+            content = this.renderEmptyContent();
+        }
+        else if (this.readPretty) {
+            content = this.renderReadPrettyContent();
+        }
+        else {
+            content = this.renderDefaultContent();
+        }
+        return (index.h("div", { key: '425f7f3d185616af3189857a9159868e3c57f100', ref: (el) => (this.stylingContainer = el), class: "LotteryTippingTicketBet__container" }, content));
+    }
+    static get watchers() { return {
+        "translationUrl": ["handleNewTranslations"],
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"],
+        "ticketDataSourceStr": ["parseTicketDataSource"],
+        "bulletSelectionsLineGroupStr": ["parseBulletSelectionsLineGroup"]
+    }; }
+};
+LotteryTippingBetSlip.style = LotteryTippingBetSlipStyle0;
+
+const lotteryTippingBulletCss = ".LotteryTippingBullet__segment{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:16px;line-height:1;font-weight:500;color:var(--emw--color-typography, #000);background:var(--emw--color-background, #fff);border:1px solid var(--emw--color-gray-100, #e6e6e6);border-radius:6px;cursor:pointer;transition:all 0.2s ease;user-select:none}.LotteryTippingBullet__segment:not(.LotteryTippingBullet__segment--disabled):hover{cursor:pointer;animation:jelly 0.3s ease-in-out;transform:scale(1.02)}.LotteryTippingBullet__segment--text{border:none;color:var(--emw--color-typography, #000);background:transparent;font-weight:400}.LotteryTippingBullet__segment--text:hover{cursor:not-allowed !important}.LotteryTippingBullet__segment--active{font-weight:600;background-color:var(--emw--color-background-inverse, #000);color:var(--emw--color-primary, #fed275)}.LotteryTippingBullet__segment--disabled:not(.LotteryTippingBullet__segment--active){background-color:var(--emw--color-background-tertiary, #ccc);color:var(--emw--color-gray-150, #6f6f6f);border-color:var(--emw--color-gray-100, #e6e6e6)}.LotteryTippingBullet__segment--disabled:hover{cursor:not-allowed}@keyframes jelly{0%{transform:translate(0, 0)}20%{transform:translate(-0.5px, -0.5px)}40%{transform:translate(0.5px, 0.5px)}60%{transform:translate(-0.25px, -0.25px)}80%{transform:translate(0.25px, 0.25px)}100%{transform:translate(0, 0)}}";
+const LotteryTippingBulletStyle0 = lotteryTippingBulletCss;
+
+const LotteryTippingBullet = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.lotteryTippingBulletToggleEvent = index.createEvent(this, "lotteryTippingBulletToggle", 7);
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.positionIdx = undefined;
+        this.theme = 'default';
+        this.value = '';
+        this.disabled = false;
+        this.isSelected = false;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingPage.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingPage.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingPage.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryTippingPage.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                lotteryTippingPage.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryTippingPage.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleClick() {
+        if (!this.disabled) {
+            this.lotteryTippingBulletToggleEvent.emit({ positionIdx: this.positionIdx });
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    render() {
+        return (index.h("div", { key: 'ef0fee38ed62adb7809b5a60668af6a499ebe5a6', ref: (el) => (this.stylingContainer = el) }, this.theme === 'text' ? (index.h("div", { class: {
+                LotteryTippingBullet__segment: true,
+                'LotteryTippingBullet__segment--text': true
+            } }, this.value)) : (index.h("button", { class: {
+                LotteryTippingBullet__segment: true,
+                'LotteryTippingBullet__segment--disabled': this.disabled,
+                'LotteryTippingBullet__segment--active': this.isSelected
+            }, onClick: this.handleClick.bind(this) }, this.isSelected ? 'X' : this.value))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryTippingBullet.style = LotteryTippingBulletStyle0;
+
+const lotteryTippingBulletGroupCss = "";
+const LotteryTippingBulletGroupStyle0 = lotteryTippingBulletGroupCss;
+
+const LotteryTippingBulletGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.lotteryTippingBulletGroupToggleEvent = index.createEvent(this, "lotteryTippingBulletGroupToggle", 7);
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.positionIdx = undefined;
+        this.theme = 'default';
+        this.mode = 'single';
+        this.bulletConfigContent = '';
+    }
+    get bulletConfigArr() {
+        const defaultConfig = [
+            {
+                value: '1'
+            },
+            {
+                value: 'X'
+            },
+            {
+                value: '2'
+            }
+        ];
+        if (typeof this.bulletConfigContent === 'string' && this.bulletConfigContent) {
+            try {
+                const _temp = JSON.parse(this.bulletConfigContent);
+                return _temp;
+            }
+            catch (e) {
+                console.error('Error parsing bulletConfigContent:', e);
+                return defaultConfig;
+            }
+        }
+        else {
+            return defaultConfig;
+        }
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingPage.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingPage.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingPage.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryTippingPage.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                lotteryTippingPage.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryTippingPage.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    lotteryTippingBulletSelectionHandler(event) {
+        const { positionIdx } = event.detail;
+        this.handleToggle(positionIdx);
+    }
+    handleToggle(index) {
+        let newConfigArr = [...this.bulletConfigArr];
+        if (this.mode === 'single') {
+            // single mode: only one button can be selected
+            newConfigArr = newConfigArr.map((item) => (Object.assign(Object.assign({}, item), { isSelected: false })));
+            newConfigArr[index].isSelected = true;
+        }
+        else {
+            // multi mode: multiple buttons can be selected
+            newConfigArr = newConfigArr.map((item) => (Object.assign({}, item)));
+            newConfigArr[index].isSelected = !newConfigArr[index].isSelected;
+        }
+        this.lotteryTippingBulletGroupToggleEvent.emit({
+            bulletConfigArr: newConfigArr,
+            positionIdx: this.positionIdx + '-' + index
+        });
+    }
+    render() {
+        var _a;
+        return (index.h("div", { ref: (el) => (this.stylingContainer = el), key: this.positionIdx }, index.h("div", { key: '68223022eed831932c571378164be913206d98e9', style: { display: 'flex', flexDirection: 'row', gap: '10px' } }, (_a = this.bulletConfigArr) === null || _a === void 0 ? void 0 : _a.map((item, index$1) => (index.h("div", { key: index$1 }, index.h("lottery-tipping-bullet", { value: item.value, isSelected: item.isSelected, "position-idx": index$1, disabled: item.disabled, theme: this.theme, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, mbSource: this.mbSource })))))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryTippingBulletGroup.style = LotteryTippingBulletGroupStyle0;
+
+const DEFAULT_LANGUAGE$3 = 'en';
+const SUPPORTED_LANGUAGES$3 = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS$3 = {
+    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$3 = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS$3[lang !== undefined && SUPPORTED_LANGUAGES$3.includes(lang) ? lang : DEFAULT_LANGUAGE$3][key];
+};
+const getTranslations$3 = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS$3[item][key] = data[item][key];
+        }
+    });
+};
+const resolveTranslationUrl$1 = async (translationUrl) => {
     if (translationUrl) {
         try {
             const response = await fetch(translationUrl);
@@ -10499,7 +11696,7 @@ const LotteryTippingFilter = class {
 };
 LotteryTippingFilter.style = LotteryTippingFilterStyle0;
 
-const generateUUID$2 = () => {
+const generateUUID$1 = () => {
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
         var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
         return v.toString(16);
@@ -10507,7 +11704,7 @@ const generateUUID$2 = () => {
 };
 function fetchRequest$1(url, method = 'GET', body = null, headers = {}) {
     return new Promise((resolve, reject) => {
-        const uuid = generateUUID$2();
+        const uuid = generateUUID$1();
         const headersOrigin = Object.assign({ 'Content-Type': 'application/json' }, headers);
         if (method !== 'GET' && method !== 'HEAD') {
             headersOrigin['X-Idempotency-Key'] = uuid;
@@ -10534,14 +11731,14 @@ function fetchRequest$1(url, method = 'GET', body = null, headers = {}) {
             .catch((error) => reject(error));
     });
 }
-function isEmptyValueOfArray(arr) {
+function isEmptyValueOfArray$1(arr) {
     if (arr.length === 0) {
         return true;
     }
     const len = arr.length;
     let count = 0;
     for (let i = 0; i < len; i++) {
-        if (isEmptyValue(arr[i])) {
+        if (isEmptyValue$1(arr[i])) {
             count++;
         }
         else {
@@ -10553,14 +11750,14 @@ function isEmptyValueOfArray(arr) {
     }
     return false;
 }
-function isEmptyValueOfObject(obj) {
+function isEmptyValueOfObject$1(obj) {
     if (Object.keys(obj).length === 0) {
         return true;
     }
     const len = Object.keys(obj).length;
     let count = 0;
     for (const val of Object.values(obj)) {
-        if (isEmptyValue(val)) {
+        if (isEmptyValue$1(val)) {
             count++;
         }
         else {
@@ -10572,7 +11769,7 @@ function isEmptyValueOfObject(obj) {
     }
     return false;
 }
-function isEmptyValue(value, allowZero) {
+function isEmptyValue$1(value, allowZero) {
     if (value === null || value === undefined || value === '') {
         return true;
     }
@@ -10580,19 +11777,19 @@ function isEmptyValue(value, allowZero) {
         return false;
     }
     else if (Array.isArray(value)) {
-        return isEmptyValueOfArray(value);
+        return isEmptyValueOfArray$1(value);
     }
     else if (Object.prototype.toString.call(value) === '[object Object]') {
-        return isEmptyValueOfObject(value);
+        return isEmptyValueOfObject$1(value);
     }
     else {
         return !value;
     }
 }
-function toQueryParams(params) {
+function toQueryParams$1(params) {
     const finalParams = {};
     Object.entries(params).forEach(([key, value]) => {
-        if (!isEmptyValue(value, true)) {
+        if (!isEmptyValue$1(value, true)) {
             finalParams[key] = value;
         }
     });
@@ -10648,7 +11845,7 @@ const isMobile = (userAgent) => {
         userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
         userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
 };
-const showNotification$2 = ({ message, theme = 'success' }) => {
+const showNotification$1 = ({ message, theme = 'success' }) => {
     window.postMessage({
         type: 'ShowNotificationToast',
         message,
@@ -10933,7 +12130,7 @@ const getTranslations$1 = (data) => {
     });
 };
 
-const formatDate$1 = ({ date, type = 'date', format: format$1 }) => {
+const formatDate = ({ date, type = 'date', format: format$1 }) => {
     try {
         const parsedDate = parseISO(date);
         if (isNaN(parsedDate.getTime())) {
@@ -10968,7 +12165,7 @@ const DEFAULT_BULLET_CONFIG = [
     }
 ];
 const SPLIT_TOKEN = '-';
-const showNotification$1 = ({ message, theme = 'success', renderOne = false }) => {
+const showNotification = ({ message, theme = 'success', renderOne = false }) => {
     window.postMessage({
         type: 'ShowNotificationToast',
         message,
@@ -11015,7 +12212,7 @@ const LotteryTippingTicketBet = class {
                 width: 22,
                 align: 'right',
                 nowrap: true,
-                render: (_, value) => formatDate$1({ date: value, format: 'ccc HH:mm' })
+                render: (_, value) => formatDate({ date: value, format: 'ccc HH:mm' })
             },
             {
                 title: () => (index.h("lottery-tipping-bullet-group", { theme: "text", bulletConfigContent: JSON.stringify(DEFAULT_BULLET_CONFIG) })),
@@ -11150,7 +12347,7 @@ const LotteryTippingTicketBet = class {
     }
     handleClearAll() {
         this._resetBulletConfig();
-        showNotification$1({ message: translate$1('selectionCleared', this.language), renderOne: true });
+        showNotification({ message: translate$1('selectionCleared', this.language), renderOne: true });
         this.lotteryTippingBulletBetEvent.emit({ hasSelectBullet: false });
     }
     async resetBulletConfig({ minLineNumber, maxLineNumber, defaultBoards }) {
@@ -11318,39 +12515,193 @@ const LotteryTippingTicketBet = class {
 };
 LotteryTippingTicketBet.style = LotteryTippingTicketBetStyle0;
 
-var PlayModeEnum;
-(function (PlayModeEnum) {
-    PlayModeEnum["SingleBet"] = "SingleBet";
-    PlayModeEnum["SystemBet"] = "SystemBet";
-})(PlayModeEnum || (PlayModeEnum = {}));
-var BettingTypeEnum;
-(function (BettingTypeEnum) {
-    BettingTypeEnum["FullTime"] = "FullTime";
-    BettingTypeEnum["HalfTime"] = "HalfTime";
-    BettingTypeEnum["Both"] = "Both";
-})(BettingTypeEnum || (BettingTypeEnum = {}));
-var DrawStatus;
-(function (DrawStatus) {
-    DrawStatus["OPEN"] = "OPEN";
-})(DrawStatus || (DrawStatus = {}));
-var TicketState;
-(function (TicketState) {
-    TicketState["Settled"] = "Settled";
-    TicketState["Purchased"] = "Purchased";
-    TicketState["Canceled"] = "Canceled";
-})(TicketState || (TicketState = {}));
+function isEmptyValue(value, allowZero) {
+    if (value === null || value === undefined || value === '') {
+        return true;
+    }
+    else if (value === 0 && allowZero) {
+        return false;
+    }
+    else if (Array.isArray(value)) {
+        return isEmptyValueOfArray(value);
+    }
+    else if (Object.prototype.toString.call(value) === '[object Object]') {
+        return isEmptyValueOfObject(value);
+    }
+    else {
+        return !value;
+    }
+}
+function isEmptyValueOfArray(arr) {
+    if (arr.length === 0) {
+        return true;
+    }
+    const len = arr.length;
+    let count = 0;
+    for (let i = 0; i < len; i++) {
+        if (isEmptyValue(arr[i])) {
+            count++;
+        }
+        else {
+            return false;
+        }
+    }
+    if (count === len) {
+        return true;
+    }
+    return false;
+}
+function isEmptyValueOfObject(obj) {
+    if (Object.keys(obj).length === 0) {
+        return true;
+    }
+    const len = Object.keys(obj).length;
+    let count = 0;
+    for (const val of Object.values(obj)) {
+        if (isEmptyValue(val)) {
+            count++;
+        }
+        else {
+            return false;
+        }
+    }
+    if (count === len) {
+        return true;
+    }
+    return false;
+}
+function thousandSeparator(value) {
+    if (value === 0) {
+        return '0';
+    }
+    if (!value) {
+        return '';
+    }
+    value = value.toString();
+    const parts = value.split('.');
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return parts.join('.');
+}
+function formattedTurnover(turnover, unit = '€') {
+    if (turnover === null || turnover === undefined)
+        return '';
+    return `${unit}${turnover ? thousandSeparator(turnover) : 0}`;
+}
+function calculateCombinationInLine(selectionsInLine = [[]], matchNum) {
+    let res = 1;
+    for (let i = 0; i < matchNum; i++) {
+        const curMatchSelections = (selectionsInLine[i] || []).filter((i) => i);
+        res *= curMatchSelections.length;
+        if (res === 0)
+            return 0;
+    }
+    return res;
+}
+function getTotalLinesAndCheckIfNotComplete(bulletSelectionsLineGroup, matchNum, minCombinations, maxCombinations) {
+    const isEffectivelyEmpty = !bulletSelectionsLineGroup ||
+        bulletSelectionsLineGroup.length === 0 ||
+        bulletSelectionsLineGroup.every((board) => !board.some((match) => match && match.length > 0));
+    if (isEffectivelyEmpty || matchNum === undefined || matchNum === null) {
+        return {
+            totalLines: 0,
+            notComplete: true
+        };
+    }
+    // total line combination is sum of all the line's combination
+    const _totalLines = bulletSelectionsLineGroup.reduce((pre, cur) => pre + calculateCombinationInLine(cur, matchNum), 0);
+    //  each line's combination should within in [minCombinations, maxCombinations]
+    return {
+        totalLines: _totalLines,
+        notComplete: bulletSelectionsLineGroup.some((selectionsInLine) => {
+            const curCombination = calculateCombinationInLine(selectionsInLine, matchNum);
+            return curCombination < minCombinations || curCombination > maxCombinations;
+        })
+    };
+}
+
+const generateUUID = () => {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+};
+function fetchRequest(url, method = 'GET', body = null, headers = {}) {
+    return new Promise((resolve, reject) => {
+        const uuid = generateUUID();
+        const headersOrigin = Object.assign({ 'Content-Type': 'application/json', 'X-APP-KEY': '123456' }, headers);
+        if (method !== 'GET' && method !== 'HEAD') {
+            headersOrigin['X-Idempotency-Key'] = uuid;
+        }
+        const options = {
+            method,
+            headers: headersOrigin,
+            body: null
+        };
+        if (body && method !== 'GET' && method !== 'HEAD') {
+            options.body = JSON.stringify(body);
+        }
+        else {
+            delete options.body;
+        }
+        fetch(url, options)
+            .then((response) => {
+            if (!response.ok) {
+                return response.json().then((errorData) => {
+                    const error = {
+                        status: response.status,
+                        statusText: response.statusText,
+                        code: errorData.code || 'UNKNOWN_ERROR',
+                        message: errorData.message || 'An unknown error occurred',
+                        data: errorData.data || null
+                    };
+                    reject(error);
+                }, () => reject({
+                    status: response.status,
+                    statusText: response.statusText,
+                    code: 'PARSE_ERROR',
+                    message: 'Failed to parse error response'
+                }));
+            }
+            else {
+                return response.json();
+            }
+        })
+            .then((data) => resolve(data), (error) => reject(error));
+    });
+}
+async function fetchSaleStatistics({ endpoint, gameId, drawId }) {
+    try {
+        const res = await fetchRequest(`${endpoint}/games/${gameId}/draws/${drawId}/saleStatistics`);
+        return res;
+    }
+    catch (error) {
+        return Promise.reject(error);
+    }
+}
+function toQueryParams(params) {
+    const finalParams = {};
+    Object.entries(params).forEach(([key, value]) => {
+        if (!isEmptyValue(value, true)) {
+            finalParams[key] = value;
+        }
+    });
+    const queryString = Object.entries(finalParams)
+        .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
+        .join('&');
+    return queryString ? `?${queryString}` : '';
+}
 
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
 const TRANSLATIONS = {
     en: {
-        gameNotAvailable: 'Sorry. The Game is not available now.',
         stop: 'Stop',
         at: 'at',
         turnover: 'Turnover: ',
         selectionCleared: 'Your selection will be cleared.',
+        selectionOnLineCleared: 'Your selection on this line will be cleared.',
         ticketSubmitted: 'Ticket submitted successfully.',
-        ticketFailed: 'Failed to submit tickets.',
+        ticketFailed: 'Failed to purchase the ticket. Please try again.',
         lines: 'Lines',
         line: 'Line',
         bettingType: 'Betting Type',
@@ -11361,7 +12712,9 @@ const TRANSLATIONS = {
         orderSummarySubmit: 'Submit',
         cancel: 'Cancel',
         confirm: 'Confirm',
-        stakePerLine: 'Stake per Line:'
+        stakePerLine: 'Stake per Line:',
+        error: 'Error!',
+        gameNotAvailable: 'Sorry. The Game is not available now.'
     },
     ro: {
         selectionCleared: 'Selecția dvs. va fi ștearsă.',
@@ -11424,432 +12777,92 @@ const TRANSLATIONS = {
         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 formatDate = ({ date, type = 'date', format: format$1 }) => {
-    try {
-        const parsedDate = parseISO(date);
-        if (isNaN(parsedDate.getTime())) {
-            throw new Error(`Invalid date: ${date}`);
-        }
-        if (format$1)
-            return format(parsedDate, format$1);
-        let formatStr = 'dd/MM/yyyy';
-        if (type === 'time') {
-            formatStr = 'dd/MM/yyyy HH:mm:ss';
-        }
-        else if (type === 'week') {
-            formatStr = 'ccc dd/MM/yyyy HH:mm:ss';
-        }
-        return format(parsedDate, formatStr);
-    }
-    catch (error) {
-        console.error('Error formatting date:', error.message);
-        return '';
-    }
-};
-const generateUUID$1 = () => {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-        var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
-        return v.toString(16);
-    });
-};
-function fetchRequest(url, method = 'GET', body = null, headers = {}) {
-    return new Promise((resolve, reject) => {
-        const uuid = generateUUID$1();
-        const headersOrigin = Object.assign({ 'Content-Type': 'application/json' }, headers);
-        if (method !== 'GET' && method !== 'HEAD') {
-            headersOrigin['X-Idempotency-Key'] = uuid;
-        }
-        const options = {
-            method,
-            headers: headersOrigin
-        };
-        if (body && method !== 'GET' && method !== 'HEAD') {
-            options.body = JSON.stringify(body);
-        }
-        fetch(url, options)
-            .then((response) => {
-            if (!response.ok) {
-                throw new Error(`HTTP error! Status: ${response.status}`);
-            }
-            return response.json();
-        })
-            .then((data) => resolve(data))
-            .catch((error) => reject(error));
-    });
-}
-const showNotification = ({ message, theme = 'success' }) => {
-    window.postMessage({
-        type: 'ShowNotificationToast',
-        message,
-        theme
-    });
-};
-const thousandSeparator = (value) => {
-    if (value === 0) {
-        return '0';
-    }
-    if (!value) {
-        return '';
-    }
-    value = value.toString();
-    const parts = value.split('.');
-    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-    return parts.join('.');
-};
-const HomeDrawAwayArr = ['H', 'D', 'A'];
-// Utility to format raw results into winning numbers (H/D/A)
-const formatResultsToWinningNumbers = (rawResults) => {
-    // Convert each bullet item into binary (1 if selected, 0 otherwise)
-    const toBinarySelection = (matchRes) => matchRes.map((bulletItem) => (bulletItem.isSelected ? 1 : 0));
-    // Step 1: Convert rawResults into arrays of 0/1 flags
-    const binaryResults = rawResults.map((lineRes) => lineRes.map(toBinarySelection));
-    const resultLinesArr = [];
-    // Step 2: Iterate through each line of results
-    binaryResults.forEach((line, lineIdx) => {
-        const formattedLine = [];
-        // Step 3: Iterate through each match in a line
-        line.forEach((match, matchIdx) => {
-            // Step 4: Collect the winning outcomes (H/D/A) based on binary flags
-            const outcomes = match.map((isSelected, idx) => (isSelected ? HomeDrawAwayArr[idx] : null)).filter(Boolean);
-            // Wrap outcomes into the expected structure [[matchRes]]
-            formattedLine[matchIdx] = [outcomes];
+const translate = (key, customLang, replacements) => {
+    const lang = customLang;
+    let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+    if (replacements) {
+        Object.keys(replacements).forEach((placeholder) => {
+            translation = translation.replace(`{${placeholder}}`, replacements[placeholder]);
         });
-        resultLinesArr[lineIdx] = formattedLine;
-    });
-    return resultLinesArr;
-};
-const buildSubmitParam = ({ playerId, rawResults, gameId, rawData, amount, currentStake, betTypeId, betType }) => {
-    var _a;
-    const body = { playerId, tickets: [] };
-    const selections = formatResultsToWinningNumbers(rawResults);
-    const stake = currentStake || {};
-    body.tickets.push({
-        startingDrawId: (_a = rawData === null || rawData === void 0 ? void 0 : rawData.currentDraw) === null || _a === void 0 ? void 0 : _a.id,
-        amount,
-        gameId: gameId,
-        gameName: rawData.name,
-        currency: stake.currency,
-        selection: selections.map((i) => ({
-            betType: betTypeId,
-            stake: +stake.value,
-            poolGameSelections: i,
-            quickPick: false,
-            betName: betType.name
-        })),
-        multiplier: false,
-        drawCount: 1,
-        quickPick: false
-    });
-    return body;
-};
-// BettingTypes, playModes and playTypes
-const getEnableOptions = (raw = []) => raw.filter((i) => i.enabled);
-// the first one in bet type config that enabled = true, will be default choice
-const getDefaultType = ({ playTypeConfig = [], betTypeConfig = [], enabledBettingTypeOptions = [], enabledPlayingModeOptions = [] }) => {
-    const enabledBetTypeConfig = betTypeConfig.filter((i) => i.enabled);
-    for (const item of enabledBetTypeConfig) {
-        const { bettingType, playMode } = playTypeConfig === null || playTypeConfig === void 0 ? void 0 : playTypeConfig.find((i) => i.betTypeId === item.id);
-        if (enabledBettingTypeOptions.map((i) => i.code).includes(bettingType) &&
-            enabledPlayingModeOptions.map((i) => i.code).includes(playMode))
-            return { bettingType, playMode };
-    }
-    return {};
-};
-const calculatePlayingModeOptions = ({ bettingType, playTypeConfig, betTypeConfig, enabledPlayingModeOptions }) => {
-    const enabledBetTypeIdConfig = betTypeConfig.filter((i) => i.enabled).map((i) => i.id);
-    const filteredPlayTypesConfig = playTypeConfig.filter((i) => enabledBetTypeIdConfig.includes(i.betTypeId));
-    const selectedBettingTypeFilteredPlayTypesConfig = filteredPlayTypesConfig.filter((i) => i.bettingType === bettingType);
-    const _ = selectedBettingTypeFilteredPlayTypesConfig.map((i) => i.playMode);
-    return enabledPlayingModeOptions.filter((i) => _.includes(i.code));
-};
-const getCheckedCountForEachLineAndEachMatch = ({ rawResults }) => {
-    const getMatchCheckRes = (matchRes) => matchRes.filter((bulletItem) => bulletItem.isSelected).length;
-    const checkedCountForEachLineAndEachMatch = rawResults.map((lineRes) => lineRes.length > 0 ? lineRes.map(getMatchCheckRes) : [0]);
-    return checkedCountForEachLineAndEachMatch;
-};
-const getPlayTypeConfig = ({ rawData, selectedBettingType, selectedPlayingMode }) => {
-    var _a, _b, _c, _d, _e, _f;
-    const betTypeId = (_d = (_c = (_b = (_a = rawData === null || rawData === void 0 ? void 0 : rawData.rules) === null || _a === void 0 ? void 0 : _a.poolGame) === null || _b === void 0 ? void 0 : _b.playTypes) === null || _c === void 0 ? void 0 : _c.find((i) => i.bettingType === selectedBettingType && i.playMode === selectedPlayingMode)) === null || _d === void 0 ? void 0 : _d.betTypeId;
-    const betType = (_f = (_e = rawData === null || rawData === void 0 ? void 0 : rawData.rules) === null || _e === void 0 ? void 0 : _e.betTypes) === null || _f === void 0 ? void 0 : _f.find((i) => i.id === betTypeId);
-    return { betTypeId, betType };
-};
-const getMinValue = (arr) => (arr.length ? Math.min.apply(null, arr) : undefined);
-function formattedTurnover(turnover, unit = '€') {
-    if (turnover === null || turnover === undefined)
-        return '';
-    return `${unit}${turnover ? thousandSeparator(turnover) : 0}`;
-}
-function formattedWeekName(date) {
-    if (!date)
-        return '';
-    const _temp = formatDate({ date, format: 'EEEE' });
-    if (!['saturday', 'sunday'].includes(_temp.toLowerCase())) {
-        return 'MIDWEEK';
     }
-    return _temp.toUpperCase();
-}
-
-const TICKET_INVALID_TOKEN = 'TICKET_INVALID_TOKEN';
-const generateUUID = () => {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-        var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
-        return v.toString(16);
-    });
+    return translation;
 };
-const doSubmitTicket = ({ body, sessionId, url }) => {
-    const options = {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            Accept: 'application/json',
-            Authorization: `Bearer ${sessionId}`,
-            'X-Idempotency-Key': generateUUID()
-        },
-        body: JSON.stringify(body)
-    };
-    return fetch(url, options).then((res) => {
-        if (res.status === 401) {
-            throw new Error(TICKET_INVALID_TOKEN);
-        }
-        if (res.status > 300) {
-            throw new Error(res.statusText);
+const getTranslations = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS[item][key] = data[item][key];
         }
-        return res.json().then((data) => {
-            if (checkTicketDetailHasError(data.tickets))
-                throw new Error(res.statusText);
-            return data;
-        });
     });
 };
-function checkTicketDetailHasError(tickets) {
-    if (!tickets || !tickets.length)
-        return true;
-    return tickets.some((i) => i.state !== TicketState.Purchased);
-}
-async function fetchSaleStatistics({ endpoint, gameId, drawId }) {
-    try {
-        const res = await fetchRequest(`${endpoint}/games/${gameId}/draws/${drawId}/saleStatistics`);
-        return res;
-    }
-    catch (error) {
-        return Promise.reject(error);
+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 lotteryTippingTicketControllerCss = ".lottery-tipping-ticket-controller__container {\n  display: block;\n  box-sizing: border-box;\n  font-size: 14px;\n  container-type: inline-size;\n  background: var(--emw--color-background, #fff);\n}\n@container (max-width: 375px) {\n  .lottery-tipping-ticket-controller__container {\n    font-size: 12px;\n  }\n}\n\n.LotteryTippingTicketController__top {\n  padding: 1.8rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  margin: 0 auto;\n  max-width: 800px;\n}\n.LotteryTippingTicketController__row {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  justify-content: space-between;\n  flex-wrap: wrap;\n}\n.LotteryTippingTicketController__section {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.LotteryTippingTicketController__label {\n  font-weight: 500;\n  white-space: nowrap;\n  width: 6rem;\n  color: var(--emw--color-typography-secondary, #333);\n}\n.LotteryTippingTicketController__segmented-control {\n  height: 2.2rem;\n  display: inline-flex;\n  background-color: var(--emw--color-background-secondary, #f5f5f5);\n  border-radius: 2rem;\n  padding: 0.2rem;\n}\n.LotteryTippingTicketController__segment {\n  background-color: transparent;\n  border: none;\n  padding: 0.3rem 0.8rem;\n  cursor: pointer;\n  font-weight: 500;\n  border-radius: 2rem;\n  outline: none;\n  transition: background-color 0.25s ease, color 0.25s ease;\n  white-space: nowrap;\n  color: var(--emw--color-typography, #000);\n}\n.LotteryTippingTicketController__segment--active {\n  background-color: var(--emw--color-background, #ffffff);\n  color: var(--emw--color-typography, #000);\n  font-weight: 600;\n}\n.LotteryTippingTicketController__segment--disabled:hover {\n  cursor: not-allowed !important;\n}\n.LotteryTippingTicketController__segment:not(.LotteryTippingTicketController__segment--active):hover {\n  background-color: var(--emw--color-background-tertiary, #ccc);\n}\n\n.flex {\n  display: flex;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.align-center {\n  align-items: center;\n}\n\n.gap-1 {\n  gap: 4px;\n}\n\n.LotteryTippingTicketController__main {\n  align-items: flex-start;\n  justify-content: center;\n  gap: 2rem;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 20px;\n  flex-wrap: wrap;\n}\n.LotteryTippingTicketController__main--left {\n  border: 1px solid var(--emw--color-gray-50, #f5f5f5);\n  padding: 1rem;\n  border-radius: 1rem;\n  flex: 1.5;\n}\n.LotteryTippingTicketController__main--right {\n  padding: 1rem;\n  border-radius: 1rem;\n  flex: 1;\n}\n\n.order-summary {\n  max-width: 360px;\n  width: 100%;\n  background: var(--emw--color-background, #fff);\n}\n\n.order-summary__title {\n  margin-bottom: 16px;\n  text-align: center;\n  color: var(--emw--color-typography, #000);\n  text-transform: uppercase;\n}\n\n.order-summary__ticket-info {\n  display: flex;\n  align-items: center;\n  margin-bottom: 16px;\n  gap: 10px;\n  color: var(--emw--color-typography, #000);\n}\n\n.order-summary__ticket {\n  font-weight: 500;\n  width: 50px;\n  text-align: right;\n  color: var(--emw--color-typography, #000);\n}\n\n.order-summary__details {\n  display: flex;\n  align-items: center;\n  color: var(--emw--color-typography, #000);\n}\n\n.order-summary__multiplier {\n  color: var(--emw--color-typography-secondary, #333);\n  margin: 0 8px;\n}\n\n.order-summary__divider {\n  border: none;\n  border-top: 1px solid var(--emw--color-gray-100, #e6e6e6);\n  margin: 20px 0;\n}\n\n.order-summary__button-wrapper {\n  display: flex;\n  justify-content: center;\n}\n\n.order-summary__button {\n  cursor: pointer;\n  padding: 0.8rem 4rem;\n  background: var(--emw--color-primary, #fed275);\n  color: var(--emw--color-typography, #000);\n  border-radius: var(--emw--button-border-radius, 4px);\n  border: none;\n  position: relative;\n}\n\n.loading-icon {\n  position: absolute;\n  right: 40px;\n  top: 10px;\n}\n\n.order-summary__button:not(.order-summary__button--disabled):not(.order-summary__button--loading):hover {\n  transform: translateY(-1px);\n  background: var(--emw--color-primary-variant, #ffe66f);\n}\n\n.order-summary__button--loading {\n  background: var(--emw--color-primary-variant, #ffe66f);\n  cursor: not-allowed;\n}\n\n.order-summary__button--disabled {\n  background: var(--emw--color-background-secondary, #f5f5f5);\n  color: var(--emw--color-typography, #000);\n  cursor: not-allowed;\n}\n\n.skeleton-content {\n  display: flex;\n  flex-direction: column;\n  gap: 29px;\n  align-items: center;\n}\n\n.skeleton-item {\n  background: var(--emw--color-background-secondary, #f5f5f5);\n  border-radius: 4px;\n  height: 40px;\n  width: 200px;\n}\n\n.skeleton-animated {\n  animation: skeleton-shimmer 1.5s infinite linear;\n  background: linear-gradient(90deg, var(--emw--color-background-secondary, #f5f5f5) 25%, var(--emw--color-background-tertiary, #ccc) 37%, var(--emw--color-background-secondary, #f5f5f5) 63%);\n  background-size: 200% 100%;\n}\n\n@keyframes skeleton-shimmer {\n  to {\n    background-position: 100% 0;\n  }\n}\n.loading-icon.scale {\n  animation: scale 1s infinite ease-in-out;\n}\n\n@keyframes scale {\n  0%, 100% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.2);\n  }\n}\n.noActiveDraw {\n  margin: 30% auto 0px;\n  padding: 24px;\n  border: 2px solid var(--emw--color-primary, #fed275);\n  border-radius: 4px;\n  width: 280px;\n  color: var(--emw--color-typography, #000);\n}";
-const LotteryTippingTicketControllerStyle0 = lotteryTippingTicketControllerCss;
+const lotteryTippingTicketBuyCss = ":host {\n  --vaadin-input-field-background: var(--emw--color-background, #fff);\n  --vaadin-input-field-border-color: var(--emw--color-gray-100, #e6e6e6);\n  --vaadin-input-field-invalid-hover-highlight: var(--emw--color-background, #fff);\n  --vaadin-input-field-hover-highlight: var(--emw--color-background, #fff);\n  --vaadin-input-field-border-width: 1px;\n  --lottery-selection-border-color: #e6e6e6;\n  --lottery-selection-hover-border-color: #e6e6e6;\n  --lottery-selection-selected-border-color: #e6e6e6;\n  --lottery-selection-selected-color: #fed275;\n  --lottery-button-primary-active-bg: #fed275;\n  --lottery-selection-selected-background: #000;\n  --lottery-button-text-color: #000;\n}\n\n.lottery-tipping-ticket-buy {\n  container-type: inline-size;\n  container-name: lottery-tipping-ticket-buy;\n}\n\n.flex {\n  display: flex;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.order-summary__details {\n  display: flex;\n  align-items: center;\n  color: var(--emw--color-typography, #000);\n}\n\n.order-summary__multiplier {\n  color: var(--emw--color-typography-secondary, #333);\n  margin: 0 8px;\n}\n\n.bet-selector {\n  display: flex;\n  gap: 18px;\n  flex-direction: column;\n  width: 80%;\n  max-width: 800px;\n  margin: 20px auto;\n}\n.bet-selector-line {\n  display: flex;\n  align-items: center;\n}\n.bet-selector-line-segments {\n  width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 18px;\n  justify-content: space-between;\n}\n.bet-selector-line-label {\n  font-size: 16px;\n  margin-right: 8px;\n  color: var(--emw--color-typography, #000);\n}\n\n.bet-board {\n  display: flex;\n  width: 84vw;\n  max-width: 1200px;\n  margin: 0px auto;\n  gap: 30px;\n  flex-wrap: wrap;\n}\n.bet-board-slip {\n  min-width: 460px;\n  flex: 1.6;\n}\n.bet-board-order {\n  flex: 1;\n  min-width: 200px;\n}\n\n@container lottery-tipping-ticket-buy (max-width: 768px) {\n  .bet-board {\n    width: 94%;\n  }\n  .bet-board-slip {\n    min-width: 100%;\n  }\n}\n.skeleton-block {\n  background-color: var(--emw--color-background-tertiary, #e0e0e0);\n  border-radius: 4px;\n  position: relative;\n  overflow: hidden;\n}\n.skeleton-block::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(90deg, transparent, var(--emw--color-background-secondary, rgba(255, 255, 255, 0.4)), transparent);\n  animation: shimmer 1.5s infinite;\n}\n\n@keyframes shimmer {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(100%);\n  }\n}\n.no-active-draw {\n  margin: 100px auto;\n  padding: 24px;\n  border: 2px solid var(--emw--color-primary, #fed275);\n  border-radius: 4px;\n  width: 280px;\n  color: var(--emw--color-typography, #000);\n}";
+const LotteryTippingTicketBuyStyle0 = lotteryTippingTicketBuyCss;
 
-const LotteryTippingTicketController = class {
+const LotteryTippingTicketBuy = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.logoutEventHandler = index.createEvent(this, "logout", 7);
-        this.bothBettingTypeMultiplier = 2;
-        this.onStakeChange = (e) => {
-            this.currentStake = this.getCurrentStakeByValue(e.detail.value);
+        this.onClearAll = index.createEvent(this, "lotteryTippingSelectionClear", 7);
+        this.lotteryTicketParamsReady = index.createEvent(this, "lotteryTicketParamsReady", 7);
+        this.SPLIT_TOKEN = ',';
+        this.EVENT_PART_MAP = {
+            '3': 'Full Time',
+            '5': 'Half Time'
         };
+        this.endpoint = '';
+        this.sessionId = undefined;
+        this.playerId = '';
+        this.gameId = '';
+        this.drawId = '';
+        this.currency = 'EUR';
+        this.tippingBetOptions = '1,X,2';
+        this.tippingBetOptionNames = 'Home,Draw,Away';
+        this.groupBy = 'BettingType,EventPart,Event';
         this.mbSource = undefined;
         this.clientStyling = undefined;
         this.clientStylingUrl = undefined;
         this.translationUrl = '';
         this.language = 'en';
-        this.endpoint = '';
-        this.sessionId = undefined;
-        this.gameId = undefined;
-        this.playerId = '';
-        this.drawId = undefined;
-        this.isLoading = true;
-        this.bettingTypeOptions = [];
-        this.playingModeOptions = [];
-        this.selectedBettingType = undefined;
-        this.selectedPlayingMode = undefined;
-        this.hasSelectBullet = undefined;
-        this.hasSelectAllBullet = undefined;
-        this.totalLineCombination = 0;
-        this.submitLoading = false;
-        this.isSalesActive = false;
-        this.drawSubmitAvailable = false;
-        this.rawData = {};
-        this.saleStatisticsInfo = {};
-        this.currentStake = undefined;
+        this.bulletSelectionsLineGroup = [[[]]];
+        this.draw = undefined;
+        this.isLoading = false;
+        this.betCurrentPage = 1;
+        this.betTotalPages = undefined;
         this.dialogConfig = { visible: false };
+        this.submitLoading = undefined;
+        this.betHasErrors = false;
         this.gameUnavailable = false;
-    }
-    async getLotteryTippingBulletResults() {
-        return await this.childRef.getData();
-    }
-    get lineNumberRange() {
-        const { betType } = getPlayTypeConfig({
-            rawData: this.rawData,
-            selectedBettingType: this.selectedBettingType,
-            selectedPlayingMode: this.selectedPlayingMode
-        });
-        const boardsAllowed = (betType === null || betType === void 0 ? void 0 : betType.boardsAllowed) || [0];
-        const [minLineNumber, maxLineNumber] = [Math.min(...boardsAllowed), Math.max(...boardsAllowed)];
-        const defaultBoards = (betType === null || betType === void 0 ? void 0 : betType.defaultBoards) || minLineNumber;
-        return { minLineNumber, maxLineNumber, defaultBoards };
-    }
-    get playTypeConfig() {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this.rawData) === null || _a === void 0 ? void 0 : _a.rules) === null || _b === void 0 ? void 0 : _b.poolGame) === null || _c === void 0 ? void 0 : _c.playTypes;
-    }
-    get betTypeConfig() {
-        var _a, _b;
-        return (_b = (_a = this.rawData) === null || _a === void 0 ? void 0 : _a.rules) === null || _b === void 0 ? void 0 : _b.betTypes;
-    }
-    get isBothBettingType() {
-        return this.selectedBettingType === BettingTypeEnum.Both;
-    }
-    get stakeOptions() {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this.rawData) === null || _a === void 0 ? void 0 : _a.rules) === null || _b === void 0 ? void 0 : _b.stakes) === null || _c === void 0 ? void 0 : _c.map((item) => {
-            var _a;
-            return { value: (_a = item.value) === null || _a === void 0 ? void 0 : _a.toString(), label: item.value, currency: item.currency };
-        });
-    }
-    getCurrentStakeByValue(value) {
-        var _a;
-        return (_a = this.stakeOptions) === null || _a === void 0 ? void 0 : _a.find((item) => +item.value === +value);
-    }
-    initiateCurrentStake() {
-        var _a, _b;
-        // if only one option, default to the first one
-        if (((_a = this.stakeOptions) === null || _a === void 0 ? void 0 : _a.length) === 1) {
-            this.currentStake = this.stakeOptions[0];
-        }
-        else {
-            // otherwise, default to the smallest stake option from the config
-            const minValue = getMinValue(((_b = this.stakeOptions) === null || _b === void 0 ? void 0 : _b.map((i) => i.value)) || []);
-            this.currentStake = this.getCurrentStakeByValue(minValue);
-        }
-    }
-    handleBettingTypeChange(type) {
-        var _a, _b, _c, _d;
-        if (type === this.selectedBettingType)
-            return;
-        this.selectedBettingType = type;
-        const calcPlayingModeOptions = calculatePlayingModeOptions({
-            bettingType: this.selectedBettingType,
-            playTypeConfig: this.playTypeConfig,
-            betTypeConfig: this.betTypeConfig,
-            enabledPlayingModeOptions: getEnableOptions(((_c = (_b = (_a = this.rawData) === null || _a === void 0 ? void 0 : _a.rules) === null || _b === void 0 ? void 0 : _b.poolGame) === null || _c === void 0 ? void 0 : _c.playModes) || [])
-        });
-        this.playingModeOptions = calcPlayingModeOptions;
-        if (!calcPlayingModeOptions.length) {
-            this.selectedPlayingMode = undefined;
-        }
-        else if (!calcPlayingModeOptions.map((i) => i.code).includes(this.selectedPlayingMode)) {
-            this.hasSelectBullet = false;
-            this.handlePlayingModeChange((_d = calcPlayingModeOptions[0]) === null || _d === void 0 ? void 0 : _d.code);
-        }
-        this.clearBulletConfig();
-    }
-    async clearBulletConfig() {
-        return await this.childRef.resetBulletConfig(this.lineNumberRange);
-    }
-    handlePlayingModeChange(mode) {
-        if (mode === this.selectedPlayingMode)
-            return;
-        const doChangeSelectedPlayingMod = (closeDialog) => {
-            this.selectedPlayingMode = mode;
-            this.clearBulletConfig().then(() => {
-                closeDialog === null || closeDialog === void 0 ? void 0 : closeDialog();
-            });
-        };
-        if (this.hasSelectBullet) {
-            const closeDialog = () => {
-                this.dialogConfig = { visible: false };
-            };
-            const onConfirm = () => {
-                doChangeSelectedPlayingMod(closeDialog);
-            };
-            this.dialogConfig = {
-                visible: true,
-                content: translate('selectionCleared', this.language),
-                onConfirm: onConfirm,
-                onCancel: closeDialog
-            };
-        }
-        else {
-            doChangeSelectedPlayingMod();
-        }
-    }
-    lotteryTippingBulletGroupSelectionHandler(event) {
-        var _a;
-        const hasSelectBullet = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.hasSelectBullet;
-        if (hasSelectBullet !== undefined)
-            this.hasSelectBullet = hasSelectBullet;
-        this.bulletBetSelectChecker();
-    }
-    calculateCombinationInLine(checkedNumberArr) {
-        return checkedNumberArr.reduce((pre, cur) => pre * cur, 1);
-    }
-    calculateTotalAmount() {
-        const stake = this.currentStake;
-        if (!stake) {
-            return 0;
-        }
-        let totalAmount = +stake.value * this.totalLineCombination;
-        if (this.isBothBettingType)
-            totalAmount = this.bothBettingTypeMultiplier * totalAmount;
-        return totalAmount;
-    }
-    get totalAmountFormatted() {
-        var _a;
-        const totalAmount = this.calculateTotalAmount();
-        return thousandSeparator(totalAmount) + ' ' + (((_a = this.currentStake) === null || _a === void 0 ? void 0 : _a.currency) || '');
-    }
-    get currentStakeFormatted() {
-        const { value = '', currency = '' } = this.currentStake || {};
-        return `${value} ${currency}`;
-    }
-    bulletBetSelectChecker() {
-        const validateSelectionsAndCalculateTotals = async () => {
-            const doCheckIfNotCompleteSelect = ({ rawResults }) => {
-                const checkedCountForEachLineAndEachMatch = getCheckedCountForEachLineAndEachMatch({ rawResults });
-                // total line combination is sum of all the line's combination
-                this.totalLineCombination = checkedCountForEachLineAndEachMatch.reduce((pre, cur) => pre + this.calculateCombinationInLine(cur), 0);
-                //  each line's combination should within in [combinations, maxCombinations]
-                const { combinations = 1, maxCombinations = 1 } = getPlayTypeConfig({
-                    rawData: this.rawData,
-                    selectedBettingType: this.selectedBettingType,
-                    selectedPlayingMode: this.selectedPlayingMode
-                }).betType || {};
-                return checkedCountForEachLineAndEachMatch.some((checkedNumberArr) => {
-                    const curCombination = this.calculateCombinationInLine(checkedNumberArr);
-                    return curCombination < combinations || curCombination > maxCombinations;
-                });
-            };
-            const rawResults = await this.getLotteryTippingBulletResults();
-            this.hasSelectAllBullet = !doCheckIfNotCompleteSelect({ rawResults });
+        this.isSalesActive = false;
+        this.currentStake = undefined;
+        this.gameConfig = undefined;
+        this.turnover = undefined;
+        this.betTypes = undefined;
+        this.curBetType = undefined;
+        this.eventPartIds = undefined;
+        this.curEventPartId = undefined;
+        this.boardRange = {
+            min: 1,
+            max: 3
         };
-        validateSelectionsAndCalculateTotals();
+        this.eventMap = undefined;
+        this.eventPart2EventOutcomeMap = undefined;
+        this.betTypeOptions = [];
+        this.eventPartOptions = [];
+        this.stakeOptions = [];
     }
     handleClientStylingChange(newValue, oldValue) {
         if (newValue != oldValue) {
@@ -11871,6 +12884,14 @@ const LotteryTippingTicketController = class {
             resolveTranslationUrl(this.translationUrl);
         }
     }
+    connectedCallback() {
+        if (this.endpoint && this.gameId && this.drawId) {
+            this.getTippingInfo();
+        }
+        else {
+            console.log('no fetch');
+        }
+    }
     componentDidLoad() {
         if (this.stylingContainer) {
             if (this.mbSource)
@@ -11884,9 +12905,23 @@ const LotteryTippingTicketController = class {
     disconnectedCallback() {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
+    parsedOutcome(tippingInfo) {
+        const { outcomes } = tippingInfo;
+        const eventPartIdList = [];
+        for (const bettingTypeId in outcomes) {
+            const eventParts = outcomes[bettingTypeId];
+            this.eventPart2EventOutcomeMap = eventParts;
+            for (const eventPartId in eventParts) {
+                eventPartIdList.push(eventPartId);
+            }
+        }
+        if (eventPartIdList.length > 0) {
+            this.eventPartIds = eventPartIdList;
+            this.curEventPartId = eventPartIdList[0];
+        }
+    }
     updateDrawSalesStatus() {
-        var _a;
-        const currentDraw = (_a = this.rawData) === null || _a === void 0 ? void 0 : _a.currentDraw;
+        const currentDraw = this.draw;
         if (!currentDraw) {
             this.gameUnavailable = true;
             this.isSalesActive = false;
@@ -11911,139 +12946,296 @@ const LotteryTippingTicketController = class {
             this.isSalesActive = false;
         }
     }
-    connectedCallback() {
-        const fetchData = () => {
-            let url = new URL(`${this.endpoint}/games/${this.gameId}`);
+    async getTippingInfo() {
+        try {
             this.isLoading = true;
-            fetchRequest(url.href, 'GET')
-                .then((res) => {
-                var _a, _b, _c, _d, _e, _f, _g;
-                this.rawData = res;
-                this.bettingTypeOptions = getEnableOptions(((_b = (_a = res === null || res === void 0 ? void 0 : res.rules) === null || _a === void 0 ? void 0 : _a.poolGame) === null || _b === void 0 ? void 0 : _b.bettingTypes) || []);
-                this.playingModeOptions = getEnableOptions(((_d = (_c = res === null || res === void 0 ? void 0 : res.rules) === null || _c === void 0 ? void 0 : _c.poolGame) === null || _d === void 0 ? void 0 : _d.playModes) || []);
-                this.initiateCurrentStake();
-                // default: select the first one
-                const { bettingType, playMode } = getDefaultType({
-                    playTypeConfig: (_f = (_e = res === null || res === void 0 ? void 0 : res.rules) === null || _e === void 0 ? void 0 : _e.poolGame) === null || _f === void 0 ? void 0 : _f.playTypes,
-                    betTypeConfig: (_g = res === null || res === void 0 ? void 0 : res.rules) === null || _g === void 0 ? void 0 : _g.betTypes,
-                    enabledBettingTypeOptions: this.bettingTypeOptions,
-                    enabledPlayingModeOptions: this.playingModeOptions
-                });
-                this.handleBettingTypeChange(bettingType);
-                this.selectedPlayingMode = playMode;
-                this.updateDrawSalesStatus();
-                return this.updateSaleStatistics();
-            })
-                .catch((err) => {
-                console.error('Error!', err);
-            })
-                .finally(() => {
-                this.isLoading = false;
-            });
-        };
-        fetchData();
+            const { gameId, drawId, endpoint, groupBy } = this;
+            const res = await fetchRequest(`${endpoint}/poolgames/${gameId}/draws/${drawId}/bettingSelections${toQueryParams({
+                groupBy
+            })}`, 'GET');
+            const { game, eventMap } = res;
+            this.gameConfig = res;
+            this.draw = game.currentDraw;
+            this.betTypes = game.rules.betTypes;
+            this._setBetType(this.betTypes[0]);
+            this.currentStake = String(game.rules.stakes[0].value);
+            this.eventMap = eventMap;
+            this.parsedOutcome(res);
+            const betTypeOptions = this.betTypes.map((bt) => ({ label: bt.name, value: bt.name }));
+            this.betTypeOptions = betTypeOptions;
+            const eventPartOptions = this.eventPartIds.map((id) => ({ label: this.EVENT_PART_MAP[id], value: id }));
+            this.eventPartOptions = eventPartOptions;
+            const stakeOptions = game.rules.stakes.map((stake) => ({ label: stake.value, value: stake.value }));
+            this.stakeOptions = stakeOptions;
+            this.updateDrawSalesStatus();
+            this.updateSaleStatistics();
+        }
+        catch (err) {
+            this.betHasErrors = true;
+            console.error('Failed to get tipping info:', err);
+        }
+        finally {
+            this.isLoading = false;
+        }
     }
     updateSaleStatistics() {
-        var _a;
+        var _a, _b, _c;
         return fetchSaleStatistics({
             endpoint: this.endpoint,
-            gameId: (_a = this.rawData) === null || _a === void 0 ? void 0 : _a.type,
-            drawId: this.drawId
+            gameId: (_b = (_a = this.gameConfig) === null || _a === void 0 ? void 0 : _a.game) === null || _b === void 0 ? void 0 : _b.type,
+            drawId: (_c = this.draw) === null || _c === void 0 ? void 0 : _c.id
         }).then((res) => {
-            this.saleStatisticsInfo = res;
+            var _a;
+            this.turnover = (_a = res === null || res === void 0 ? void 0 : res.wagerSegment) === null || _a === void 0 ? void 0 : _a.totalSalesCrossDraw;
+        });
+    }
+    handleSelectionChange(event) {
+        const { newSelections, matchId, boardId } = event.detail;
+        const boardIndex = parseInt(boardId, 10);
+        const matchIndex = parseInt(matchId, 10);
+        const newBulletSelectionsLineGroup = this.bulletSelectionsLineGroup.map((board, index) => {
+            if (index !== boardIndex)
+                return board;
+            const newBoard = [...board];
+            newBoard[matchIndex] = newSelections;
+            return newBoard;
+        });
+        // console.log('newBulletSelectionsLineGroup', newBulletSelectionsLineGroup);
+        this.bulletSelectionsLineGroup = newBulletSelectionsLineGroup;
+    }
+    handleClearAll() {
+        this._resetBulletConfig();
+        this.onClearAll.emit();
+    }
+    handlePageChange(event) {
+        const { newPage } = event.detail;
+        if (newPage >= 1 && newPage <= this.betTotalPages) {
+            this.betCurrentPage = newPage;
+        }
+    }
+    handleAddLine() {
+        if (this.betTotalPages < this.boardRange.max) {
+            this.bulletSelectionsLineGroup = [...this.bulletSelectionsLineGroup, this.initLineForBulletConfig()];
+            this.betTotalPages++;
+            this.betCurrentPage = this.betTotalPages;
+        }
+    }
+    handleRemoveLine(event) {
+        const { boardId, close } = event.detail;
+        if (this.betTotalPages > this.boardRange.min) {
+            const closeDialog = () => {
+                this.dialogConfig = { visible: false };
+            };
+            const doRemove = () => {
+                this.bulletSelectionsLineGroup = this.bulletSelectionsLineGroup.filter((_, index) => index !== boardId);
+                this.betTotalPages--;
+                const removedPage = boardId + 1;
+                if (this.betCurrentPage > removedPage) {
+                    this.betCurrentPage--;
+                }
+                if (this.betCurrentPage > this.betTotalPages) {
+                    this.betCurrentPage = this.betTotalPages;
+                }
+                close(closeDialog);
+            };
+            this.dialogConfig = {
+                visible: true,
+                content: translate('selectionOnLineCleared', this.language),
+                onConfirm: doRemove,
+                onCancel: closeDialog
+            };
+        }
+    }
+    handleSubmitTickets() {
+        const params = this.buildTicketParam();
+        this.lotteryTicketParamsReady.emit(params);
+    }
+    handleTicketSubmitSuccess() {
+        this._resetBulletConfig();
+        this.updateSaleStatistics();
+    }
+    buildTicketParam() {
+        let body = {
+            tickets: []
+        };
+        body.tickets.push({
+            gameName: this.gameConfig.game.name,
+            startingDrawId: this.draw.id,
+            amount: this.calculateTotalAmount(),
+            currency: this.currency,
+            selection: this.bulletSelectionsLineGroup.map((boardInfo) => {
+                const matchList = boardInfo.map((matchSelection, matchIdx) => {
+                    const curBettingTypeMatches = matchSelection.map((bet) => {
+                        return {
+                            betOn: bet,
+                            id: this.parsedEvent[matchIdx].outcomes.find((outcome) => outcome.betOn === bet).id
+                        };
+                    });
+                    return [curBettingTypeMatches];
+                });
+                return {
+                    betType: this.curBetType.id,
+                    prizePool: this.parsedEvent[0].outcomes[0].prizePools[0],
+                    stake: this.currentStake,
+                    poolGameSelections: matchList
+                };
+            })
         });
+        return body;
+    }
+    initLineForBulletConfig() {
+        return [[]];
+    }
+    _resetBulletConfig() {
+        this.bulletSelectionsLineGroup = Array.from({ length: this.betTotalPages }).map(this.initLineForBulletConfig.bind(this));
+        this.betCurrentPage = 1;
+    }
+    calculateTotalAmount() {
+        const stake = this.currentStake;
+        if (!stake) {
+            return '0';
+        }
+        let totalAmount = +stake * this.totalLineCombination;
+        return totalAmount.toString();
+    }
+    get hasSelection() {
+        return this.bulletSelectionsLineGroup.some((board) => board.some((match) => match && match.length > 0));
     }
-    async handleSubmit() {
-        this.updateDrawSalesStatus();
-        if (!this.isSalesActive) {
-            showNotification({
-                message: 'Sales for this period have closed.',
-                theme: 'error'
+    get parsedEvent() {
+        if (!this.eventPart2EventOutcomeMap || !this.curEventPartId || !this.eventMap) {
+            return [];
+        }
+        const curEventObj = this.eventPart2EventOutcomeMap[this.curEventPartId];
+        const flatEvents = [];
+        for (const eventId in curEventObj) {
+            const curEventOutcomeArr = curEventObj[eventId];
+            const eventDetail = this.eventMap[eventId];
+            const { eventName, startTime, order } = eventDetail;
+            flatEvents.push({
+                eventName,
+                startTime,
+                order,
+                outcomes: curEventOutcomeArr.map((outcome) => {
+                    const { betOn, outcomeId, prizePools } = outcome;
+                    return {
+                        betOn,
+                        id: outcomeId,
+                        prizePools
+                    };
+                })
             });
+        }
+        flatEvents.sort((a, b) => a.order - b.order);
+        // console.log('flatEvents', flatEvents);
+        return flatEvents;
+    }
+    get _selectionStats() {
+        const { combinations: minCombinations = 1, maxCombinations = 1 } = this.curBetType || {};
+        return getTotalLinesAndCheckIfNotComplete(this.bulletSelectionsLineGroup, this.parsedEvent.length, minCombinations, maxCombinations);
+    }
+    get totalLineCombination() {
+        return this._selectionStats.totalLines;
+    }
+    get hasSelectAllBullet() {
+        return !this._selectionStats.notComplete;
+    }
+    _setBetType(betType) {
+        if (!betType)
+            return;
+        this.curBetType = betType;
+        this.boardRange.min = Math.min(...betType.boardsAllowed);
+        this.boardRange.max = Math.max(...betType.boardsAllowed);
+        this.betTotalPages = betType.defaultBoards;
+        this._resetBulletConfig();
+    }
+    handleBetTypeChange(event) {
+        const newBetTypeName = event.detail;
+        if (newBetTypeName === this.curBetType.name) {
             return;
         }
-        const rawResults = await this.getLotteryTippingBulletResults();
-        const { betTypeId, betType } = getPlayTypeConfig({
-            rawData: this.rawData,
-            selectedBettingType: this.selectedBettingType,
-            selectedPlayingMode: this.selectedPlayingMode
-        });
-        const url = new URL(`${this.endpoint}/tickets`);
-        const body = buildSubmitParam({
-            playerId: this.playerId,
-            rawResults,
-            gameId: this.gameId,
-            rawData: this.rawData,
-            amount: this.calculateTotalAmount().toString(),
-            currentStake: this.currentStake,
-            betTypeId,
-            betType
-        });
-        this.submitLoading = true;
-        doSubmitTicket({ body, sessionId: this.sessionId, url: url.href })
-            .then(() => {
-            showNotification({ message: translate('ticketSubmitted', this.language) });
-            this.clearBulletConfig();
-            this.updateSaleStatistics();
-        })
-            .catch((res) => {
-            if (res.message === TICKET_INVALID_TOKEN) {
-                this.logoutEventHandler.emit();
-                showNotification({ message: TICKET_INVALID_TOKEN, theme: 'error' });
-                return;
-            }
-            showNotification({ message: translate('ticketFailed', this.language), theme: 'error' });
-        })
-            .finally(() => {
-            this.submitLoading = false;
-        });
+        const switchBetType = () => {
+            const newBetType = this.betTypes.find((bt) => bt.name === newBetTypeName);
+            this._setBetType(newBetType);
+            this.dialogConfig = { visible: false };
+        };
+        this.handleSwitchWithConfirmation(switchBetType);
     }
-    get lineCountRender() {
-        const _ = thousandSeparator(this.totalLineCombination);
-        let unit = translate('lines', this.language);
-        if ([0, 1].includes(+_))
-            unit = translate('line', this.language);
-        return _ + ' ' + unit;
+    handleEventPartChange(event) {
+        const newEventPartId = event.detail;
+        if (newEventPartId === this.curEventPartId) {
+            return;
+        }
+        const switchEventPart = () => {
+            this.curEventPartId = newEventPartId;
+            this._resetBulletConfig();
+            this.dialogConfig = { visible: false };
+        };
+        this.handleSwitchWithConfirmation(switchEventPart);
     }
-    renderBettingControls() {
-        var _a;
-        const renderSkeleton = () => (index.h("div", { class: "skeleton-content" }, index.h("div", { class: "skeleton-item skeleton-animated" })));
-        const renderBettingTypeOptions = () => (index.h("div", { class: "LotteryTippingTicketController__segmented-control" }, this.bettingTypeOptions.map((item) => (index.h("button", { class: {
-                LotteryTippingTicketController__segment: true,
-                'LotteryTippingTicketController__segment--active': this.selectedBettingType === item.code
-            }, onClick: this.handleBettingTypeChange.bind(this, item.code) }, item.name)))));
-        const renderPlayingModeOptions = () => (index.h("div", { class: "LotteryTippingTicketController__segmented-control" }, this.playingModeOptions.map((item) => (index.h("button", { class: {
-                LotteryTippingTicketController__segment: true,
-                'LotteryTippingTicketController__segment--active': this.selectedPlayingMode === item.code
-            }, onClick: this.handlePlayingModeChange.bind(this, item.code) }, item.name)))));
-        const renderingStakeOptions = () => {
-            var _a, _b;
-            return (index.h("div", null, ((_a = this.stakeOptions) === null || _a === void 0 ? void 0 : _a.length) === 1 ? (index.h("div", null, this.stakeOptions[0].label)) : (index.h("vaadin-select", { items: this.stakeOptions || [], value: ((_b = this.currentStake) === null || _b === void 0 ? void 0 : _b.value) || '', "on-value-changed": this.onStakeChange.bind(this), "no-vertical-overlap": true }))));
+    onStakeChange(event) {
+        this.currentStake = event.detail.value;
+    }
+    handleSwitchWithConfirmation(switchAction) {
+        const closeDialog = () => {
+            this.dialogConfig = { visible: false };
+        };
+        const doConfirm = () => {
+            switchAction();
+            closeDialog();
         };
-        return (index.h("div", { class: "LotteryTippingTicketController__top" }, index.h("div", { class: "LotteryTippingTicketController__row" }, index.h("div", { class: "LotteryTippingTicketController__section" }, index.h("span", { class: "LotteryTippingTicketController__label" }, translate('bettingType', this.language)), !!this.bettingTypeOptions.length ? renderBettingTypeOptions() : renderSkeleton()), index.h("div", { class: "LotteryTippingTicketController__section" }, index.h("span", { class: "LotteryTippingTicketController__label" }, translate('playingMode', this.language)), !!this.playingModeOptions.length ? renderPlayingModeOptions() : renderSkeleton())), index.h("div", { class: "LotteryTippingTicketController__row" }, ((_a = this.stakeOptions) === null || _a === void 0 ? void 0 : _a.length) && (index.h("div", { class: "LotteryTippingTicketController__section" }, index.h("span", { class: "LotteryTippingTicketController__label" }, translate('stakePerLine', this.language)), renderingStakeOptions())))));
+        if (this.hasSelection) {
+            this.dialogConfig = {
+                visible: true,
+                content: translate('selectionCleared', this.language),
+                onConfirm: doConfirm,
+                onCancel: closeDialog
+            };
+        }
+        else {
+            switchAction();
+        }
     }
-    renderOrderSummary() {
-        var _a;
-        return (index.h("div", { class: "LotteryTippingTicketController__main--right order-summary" }, index.h("h3", { class: "order-summary__title" }, translate('orderSummaryTitle', this.language)), index.h("div", { class: "order-summary__ticket-info" }, index.h("div", { class: "order-summary__ticket" }, translate('orderSummaryTickets', this.language), ":"), index.h("div", { class: "order-summary__details" }, index.h("span", { class: "order-summary__line-count" }, this.lineCountRender), index.h("div", null, this.currentStake && index.h("span", { class: "order-summary__multiplier" }, "x"), index.h("span", { class: "order-summary__stake" }, this.currentStakeFormatted)), this.isBothBettingType && (index.h("div", null, index.h("span", { class: "order-summary__multiplier" }, "x"), index.h("span", { class: "order-summary__stake" }, this.bothBettingTypeMultiplier))))), index.h("hr", { class: "order-summary__divider" }), index.h("div", { class: "order-summary__ticket-info" }, index.h("div", { class: "order-summary__ticket" }, translate('orderSummaryTotal', this.language), ":"), index.h("span", { class: "order-summary__details" }, this.totalAmountFormatted)), index.h("div", { class: "order-summary__button-wrapper" }, index.h("lottery-button", { onClick: this.handleSubmit.bind(this), loading: this.submitLoading, disabled: !this.hasSelectAllBullet ||
-                this.submitLoading ||
-                ((_a = this.currentStake) === null || _a === void 0 ? void 0 : _a.value) === undefined ||
-                !this.isSalesActive, text: translate('orderSummarySubmit', this.language) }))));
+    _renderSkeletonBlock(style) {
+        return index.h("div", { class: "skeleton-block", style: style });
+    }
+    renderSkeletons() {
+        return (index.h("div", { class: "lottery-tipping-ticket-buy", ref: (el) => (this.stylingContainer = el) }, this._renderSkeletonBlock({ height: '60px', marginBottom: '16px' }), this._renderSkeletonBlock({ width: '60%', margin: '0 auto', height: '80px', marginBottom: '16px' }), index.h("div", { class: "bet-board", style: { display: 'flex', gap: '16px' } }, this._renderSkeletonBlock({ flex: '2', height: '400px' }), this._renderSkeletonBlock({ flex: '1', height: '400px' }))));
+    }
+    renderErrorContent() {
+        return index.h("p", null, translate('error', this.language));
+    }
+    renderNoActiveDraw() {
+        return (index.h("div", { class: "lottery-tipping-ticket-buy", ref: (el) => (this.stylingContainer = el) }, index.h("div", { class: "no-active-draw" }, translate('gameNotAvailable', this.language))));
+    }
+    get ticketDataSourceForBetSlip() {
+        return this.parsedEvent.map(({ eventName, startTime, outcomes }) => ({
+            eventName,
+            startTime,
+            outcomes: outcomes.map(({ betOn }) => ({ betOn }))
+        }));
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        if (this.gameUnavailable) {
-            return (index.h("div", { class: "lottery-tipping-ticket-controller__container", ref: (el) => (this.stylingContainer = el) }, index.h("div", { class: "noActiveDraw" }, translate('gameNotAvailable', this.language))));
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (this.isLoading) {
+            return this.renderSkeletons();
+        }
+        else if (this.betHasErrors) {
+            return this.renderErrorContent();
+        }
+        else if (this.gameUnavailable) {
+            return this.renderNoActiveDraw();
+        }
+        else {
+            return (index.h("div", { class: "lottery-tipping-ticket-buy", ref: (el) => (this.stylingContainer = el) }, index.h("lottery-banner", { clientStylingUrl: this.clientStylingUrl, stopTime: (_a = this.draw) === null || _a === void 0 ? void 0 : _a.wagerCloseTime, startTime: (_b = this.draw) === null || _b === void 0 ? void 0 : _b.wagerStartTime, "banner-title": (_d = (_c = this.gameConfig) === null || _c === void 0 ? void 0 : _c.game) === null || _d === void 0 ? void 0 : _d.name, turnover: formattedTurnover(this.turnover), language: this.language, "translation-url": this.translationUrl, onLotteryBannerWagerStarted: () => this.updateDrawSalesStatus() }), index.h("div", { class: "bet-selector" }, index.h("div", { class: "bet-selector-line" }, index.h("div", { class: "bet-selector-line-segments" }, index.h("lottery-segmented", { class: "event-part-selector", label: "Event Part", options: this.eventPartOptions, value: this.curEventPartId.toString(), onValueChange: this.handleEventPartChange.bind(this) }), index.h("lottery-segmented", { label: "Bet Type", options: this.betTypeOptions, value: ((_e = this.curBetType) === null || _e === void 0 ? void 0 : _e.name) || '', onValueChange: this.handleBetTypeChange.bind(this) }))), index.h("div", { class: "bet-selector-line" }, index.h("div", { class: "bet-selector-line-label" }, translate('stakePerLine', this.language)), index.h("div", { class: "bet-selector-line-input" }, this.stakeOptions.length > 1 ? (index.h("vaadin-select", { items: this.stakeOptions, value: this.currentStake, "on-value-changed": this.onStakeChange.bind(this), "no-vertical-overlap": true })) : (this.currentStake)))), index.h("div", { class: "bet-board" }, index.h("div", { class: "bet-board-slip" }, index.h("lottery-tipping-bet-slip", { language: this.language, "mb-source": this.mbSource, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "translation-url": this.translationUrl, "current-page": this.betCurrentPage, "total-pages": this.betTotalPages, "max-total-pages": this.boardRange.max, "min-total-pages": this.boardRange.min, mode: ((_f = this.curBetType) === null || _f === void 0 ? void 0 : _f.combinations) > 1 ? 'multi' : 'single', readPretty: false, bulletTexts: this.tippingBetOptions, bulletNames: this.tippingBetOptionNames, bulletTextsSplitToken: this.SPLIT_TOKEN, "ticket-data-source-str": JSON.stringify(this.ticketDataSourceForBetSlip), "bullet-selections-line-group-str": JSON.stringify(this.bulletSelectionsLineGroup), showClearButton: true })), index.h("div", { class: "bet-board-order" }, index.h("lottery-order-summary", { "client-styling": this.clientStyling, clientStylingUrl: this.clientStylingUrl, mbSource: this.mbSource, language: this.language, "translation-url": this.translationUrl, endpoint: this.endpoint, sessionId: this.sessionId, orderSummaryTitle: translate('orderSummaryTitle', this.language), ticketsLabel: translate('orderSummaryTickets', this.language), totalLabel: translate('orderSummaryTotal', this.language), "show-divider": true, submitLoading: this.submitLoading, submitDisabled: !this.hasSelectAllBullet || this.submitLoading || !this.isSalesActive, submitButtonText: translate('orderSummarySubmit', this.language) }, index.h("div", { class: "order-summary__details", slot: "orderSummaryTicketDetail" }, index.h("span", { class: "order-summary__line-count" }, `${this.totalLineCombination} ${this.totalLineCombination > 1 ? translate('lines', this.language) : translate('line', this.language)}`), index.h("div", null, index.h("span", { class: "order-summary__multiplier" }, "x"), index.h("span", { class: "order-summary__stake" }, `${this.currentStake} ${this.currency}`))), index.h("span", { class: "order-summary__details", slot: "orderSummaryTotalDetail" }, `${this.calculateTotalAmount()} ${this.currency}`)))), this.dialogConfig.visible && (index.h("vaadin-confirm-dialog", { rejectButtonVisible: true, rejectText: translate('cancel', this.language), confirmText: translate('confirm', this.language), opened: (_g = this.dialogConfig) === null || _g === void 0 ? void 0 : _g.visible, onConfirm: this.dialogConfig.onConfirm, onReject: this.dialogConfig.onCancel }, (_h = this.dialogConfig) === null || _h === void 0 ? void 0 : _h.content))));
         }
-        return (index.h("div", { class: "lottery-tipping-ticket-controller__container", ref: (el) => (this.stylingContainer = el) }, index.h("lottery-banner", { "client-styling": this.clientStyling, "client-styling-Url": this.clientStylingUrl, stopTime: (_b = (_a = this.rawData) === null || _a === void 0 ? void 0 : _a.currentDraw) === null || _b === void 0 ? void 0 : _b.wagerCloseTime, startTime: (_d = (_c = this.rawData) === null || _c === void 0 ? void 0 : _c.currentDraw) === null || _d === void 0 ? void 0 : _d.wagerStartTime, "banner-title": formattedWeekName((_f = (_e = this.rawData) === null || _e === void 0 ? void 0 : _e.currentDraw) === null || _f === void 0 ? void 0 : _f.date), turnover: formattedTurnover((_h = (_g = this.saleStatisticsInfo) === null || _g === void 0 ? void 0 : _g.wagerSegment) === null || _h === void 0 ? void 0 : _h.totalSalesCrossDraw), language: this.language, onLotteryBannerWagerStarted: () => this.updateDrawSalesStatus(), "translation-url": this.translationUrl }), this.renderBettingControls(), index.h("div", { class: "flex flex-wrap LotteryTippingTicketController__main" }, index.h("div", { class: "LotteryTippingTicketController__main--left" }, index.h("lottery-tipping-ticket-bet", { ref: (el) => (this.childRef = el), endpoint: this.endpoint, "session-id": this.sessionId, "game-id": (_j = this.rawData) === null || _j === void 0 ? void 0 : _j.type, "draw-id": this.drawId, language: this.language, "translation-url": this.translationUrl, "max-total-pages": this.lineNumberRange.maxLineNumber, "min-total-pages": this.lineNumberRange.minLineNumber, "total-pages": this.lineNumberRange.defaultBoards, mode: this.selectedPlayingMode === PlayModeEnum.SingleBet ? 'single' : 'multi', "client-styling": this.clientStyling, "client-styling-Url": this.clientStylingUrl })), this.renderOrderSummary()), this.dialogConfig.visible && (index.h("vaadin-confirm-dialog", { rejectButtonVisible: true, rejectText: translate('cancel', this.language), confirmText: translate('confirm', this.language), opened: (_k = this.dialogConfig) === null || _k === void 0 ? void 0 : _k.visible, onConfirm: this.dialogConfig.onConfirm, onReject: this.dialogConfig.onCancel }, (_l = this.dialogConfig) === null || _l === void 0 ? void 0 : _l.content))));
     }
-    static get assetsDirs() { return ["../static"]; }
     static get watchers() { return {
         "clientStyling": ["handleClientStylingChange"],
         "clientStylingUrl": ["handleClientStylingUrlChange"],
         "mbSource": ["handleMbSourceChange"]
     }; }
 };
-LotteryTippingTicketController.style = LotteryTippingTicketControllerStyle0;
+LotteryTippingTicketBuy.style = LotteryTippingTicketBuyStyle0;
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -17129,7 +18321,7 @@ const LotteryTippingTicketHistory = class {
             this.rawData = res;
         }
         catch (e) {
-            showNotification$2({ message: (_a = e.message) !== null && _a !== void 0 ? _a : e, theme: 'error' });
+            showNotification$1({ message: (_a = e.message) !== null && _a !== void 0 ? _a : e, theme: 'error' });
         }
         finally {
         }
@@ -17165,7 +18357,7 @@ const LotteryTippingTicketHistory = class {
     async fetchTicketList() {
         this.isLoading = true;
         try {
-            const { items, total } = await fetchRequest$1(`${this.endpoint}/tickets${toQueryParams(this.filterData)}`, 'GET', null, {
+            const { items, total } = await fetchRequest$1(`${this.endpoint}/tickets${toQueryParams$1(this.filterData)}`, 'GET', null, {
                 Authorization: `Bearer ${this.sessionId}`
             });
             this.ticketHistory = items;
@@ -17177,7 +18369,7 @@ const LotteryTippingTicketHistory = class {
         catch (e) {
             console.log('in fetchTicketList error is: ', e);
             if (e.status === 401) {
-                showNotification$2({ message: e.message, theme: 'error' });
+                showNotification$1({ message: e.message, theme: 'error' });
                 this.logout.emit();
             }
         }
@@ -17370,11 +18562,17 @@ const LotteryTippingTicketHistory = class {
 LotteryTippingTicketHistory.style = LotteryTippingTicketHistoryStyle0;
 
 exports.lottery_tipping_page = lotteryTippingPage.LotteryTippingPage;
+exports.app_tooltip = Tooltip;
 exports.general_multi_select = GeneralMultiSelect;
 exports.general_tooltip = GeneralTooltip;
 exports.helper_count_down = HelperCountDown;
 exports.lottery_banner = LotteryBanner;
 exports.lottery_button = LotteryButton;
+exports.lottery_order_summary = LotteryOrderSummary;
+exports.lottery_segmented = LotterySegmented;
+exports.lottery_selection = LotterySelection;
+exports.lottery_selection_group = LotterySelectionGroup;
+exports.lottery_tipping_bet_slip = LotteryTippingBetSlip;
 exports.lottery_tipping_bullet = LotteryTippingBullet;
 exports.lottery_tipping_bullet_group = LotteryTippingBulletGroup;
 exports.lottery_tipping_dialog = LotteryTippingDialog;
@@ -17382,5 +18580,5 @@ exports.lottery_tipping_filter = LotteryTippingFilter;
 exports.lottery_tipping_pagination = LotteryTippingPagination;
 exports.lottery_tipping_panel = lotteryTippingPanel;
 exports.lottery_tipping_ticket_bet = LotteryTippingTicketBet;
-exports.lottery_tipping_ticket_controller = LotteryTippingTicketController;
+exports.lottery_tipping_ticket_buy = LotteryTippingTicketBuy;
 exports.lottery_tipping_ticket_history = LotteryTippingTicketHistory;